.dd-reset-font-size {
    font-family: var(--dd-font-default);
    font-size: 16px;
}

.dd-stretch {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

.dd-max-width {
    width: 100%;
    width: -webkit-fill-available;
    width: auto;
    max-width: var(--dd-max-width);
    margin: auto;
}

.dd-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dd-column {
    /* display: flex;
    flex-direction: column; */
    display: grid;
    grid-template-rows: auto; 
    gap: 8px;
}

.dd-gap {
    display: flex;
    gap: var(--dd-gap);
}

.dd-margin-wide {
    margin: var(--dd-margin-wide);
}

.dd-margin-narrow {
    margin: var(--dd-margin-narrow);
}


.dd-status-color-text {
    color: var(--dd-status-color);
}

.dd-status-color-text-forced {
    color: var(--dd-status-color) !important;
}

.dd-status-color-background {
    background: var(--dd-status-color);
}

.dd-status-color-background-forced {
    background: var(--dd-status-color) !important;
}

.dd-status-color-mask-path {
    fill: var(--dd-status-color);
    /* stroke: var(--dd-status-color); */
    stroke: white;
}

.dd-status-bulb {
    width: 0.8em;
    height: 0.8em;
    display: inline-block;
    border-radius: 1em;
    margin: 0 3px;
}

.dd-font-extrasmall {
    font-size: var(--dd-font-extrasmall);
}

.dd-font-small {
    font-size: var(--dd-font-small);
}

.dd-font-normal {
    font-size: var(--dd-font-normal);
}

.dd-font-large {
    font-size: var(--dd-font-large);
}

.dd-font-semibold {
    font-weight: var(--dd-font-semibold);
}

.dd-font-bold {
    font-weight: var(--dd-font-bold);
}

.dd-text-wrapper {
    line-height: 1.2em;
}

html body .dd-soft-shadow {
    box-shadow: 0px 0px 10px #00000061;
}


.dd-loadingscreen {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display: none;
    justify-content: center;
    align-items: center;
    background: #ffffffc7;
    z-index: 1;
}

.dd-loadingscreen .dd-loader {
    width: var(--dd-loading-donut-size);
    aspect-ratio: 1;
    border-radius: 50%;
    background: 
      radial-gradient(farthest-side,var(--dd-color-accent) 94%,#0000) top/var(--dd-loading-donut-width) var(--dd-loading-donut-width) no-repeat,
      conic-gradient(#0000 30%,var(--dd-color-accent));
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - var(--dd-loading-donut-width)),#000 0);
    mask: radial-gradient(farthest-side,#0000 calc(100% - var(--dd-loading-donut-width)),#000 0);
    animation: dd-loading-animation var(--dd-loading-donut-speed) infinite linear;
}
@keyframes dd-loading-animation { 
    100%{
        transform: rotate(1turn)
    }
}

.dd-loading .dd-loadingscreen { 
    display: flex;
}



/* EFFECTS */
.dd-box-shadow {
    -webkit-box-shadow: -2px 2px 3px #00000028;
    -moz-box-shadow: -2px 2px 3px #00000028;
    box-shadow: -2px 2px 3px #00000028;
}



/* POINTERS */
.dd-grabbable {
    pointer-events: all;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}
.dd-grabbing {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}



/* FOCUS */
body .dd-can-focus:focus-visible {
    outline: 2px solid var(--dd-color-text);
    outline-offset: 3px;
}


/* ICONS */
.dd-icon {
    line-height: 0;
}


    /* Unselectable (blue highlight) */
.dd-disable-selection-highlight {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* For iOS Safari */
    tap-highlight-color: transparent; /* For other browsers */
}


.dd-pointer-events-none {
    pointer-events: none;
}