:root {
    --digital-nature-loader-icon: url("../img/digital-nature-white.png");
    --digital-nature-loader-background-colour: #CCC;
}


.dn-toggle-visibility-trigger {
    cursor: pointer;
}

.dn-toggle-visibility-target:not(.visible) {
    display: none;
}

.dn-tooltip .dn-tooltip-body {
    display: none;
}

.dn-tooltip > .dn-tooltip-trigger:hover + .dn-tooltip-body {
    display: block;
}







.dn-draggable-table {
    border-collapse: collapse;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ and Edge */
    user-select: none; /* Standard syntax */
}

.dn-draggable-table tr,
.dn-draggable-table td,
.dn-draggable-table th {
    border:1px solid white;
    border-collapse: collapse;
    cursor:all-scroll;
}





/** LOADING OVERLAY **/
.digital-nature-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10001;
}

body>.digital-nature-loader {
    position: fixed;
}

.digital-nature-loader .digital-nature-loader-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--digital-nature-loader-background-colour);
    opacity: 0.5;
}

.digital-nature-loader .digital-nature-loader-content {
    width: 100px;
    height: 100px;
}

.digital-nature-loader .digital-nature-loader-content:after {
    background-image: var(--digital-nature-loader-icon);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100px;
    height: 100px;
    content: "";
    display: block;
    animation: spinX 3s infinite;
}

@keyframes spinX {
    0% {
        transform: rotateX(0deg);
        transform-origin: 0% 50% 0;
    }

    100% {
        transform: rotateX(360deg);
        transform-origin: 0% 50% 0;
    }
}




th.attention,
td.attention {
    background: #fb0000;
    color: #FFF;
    text-align: center;
}


/** FORMS **/
.dn-auto-search {
    position: relative;
}

.dn-auto-search label {
    display: block;
}

.dn-auto-search-input-wrap {
    position: relative;
    display: inline-block;
}

.dn-auto-search-field-and-results {
    position: relative;
    z-index: 10;
    display: inline-block;
}

.dn-auto-search-input-wrap input[type="search"] {
    padding-right: 30px;
}

.dn-auto-search-input-wrap input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.dn-auto-search-input-wrap.dn-utilities-field-loading:after {
    background-image: var(--digital-nature-auto-search-loader-icon);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio : 1 / 1;
    height: 100%;
    content: "";
    animation: spinX 3s infinite;
    display: block;
    position: absolute;
    bottom: 0;
    right: 10px;
}

.dn-modal-step-form .dn-auto-search-input-wrap .dn-utilities-error-message {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

.dn-auto-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

.dn-auto-search-results-populated {
    background: white;
    border-width: 0 1px 1px 1px;
    border-color: black;
    border-style: solid;
    border-radius: 0 0 10px 10px;
}

.dn-auto-search-results > div {
    padding: 5px;
    cursor: pointer;
}

.dn-auto-search-results > div:hover {
    background-color: #CCC;
}

.dn-auto-search-selected-clear {
    cursor: pointer;
}

.dn-auto-search-selected-label {
    margin-top: 10px;
    border: 1px solid black;
}

.dn-auto-search-selected-label,
.dn-auto-search-selected-clear {
    display: none;
    padding: 10px;
}

.dn-auto-search-value-selected .dn-auto-search-selected-label,
.dn-auto-search-value-selected .dn-auto-search-selected-clear {
    display: block;
}

.dn-auto-search-selected-clear {
    position: absolute;
    bottom: 0;
    right: 0;
}

.dn-auto-search-results-populated .user-search-result-id,
.dn-auto-search-results-populated .user-search-result-email,
.dn-auto-search-results-populated .user-search-result-name {
    display: inline-block;
    margin-right: 5px;
}



/** Column checkbox check all **/
.dn-check-table-column {
    text-align: left;
}

.dn-check-all-table-column {}