/* the floating label */
.norma--floating-input > label {
    background: var(--norma__bg-light);
}
/* #region -> dropdown like select */
.norma--custom--select .dropdown-toggle {
    background: var(--norma__neutral--light);
    border: 0.5px solid var(--norma-secondary--2);
}

.norma--custom--select .dropdown-menu {
    background: var(--norma__neutral--grey-4);
}

.norma--custom--select .dropdown-item {
    background-color: var(--norma__neutral--grey-4);
    color: var(--norma__neutral--grey-5);
}

    .norma--custom--select .dropdown-item:hover {
        background: var(--norma-secondary--5);
    }

    .norma--custom--select .dropdown-item.active {
        background: var(--norma-secondary--5);
    }
/* #endregion */
/* #region -> notifications */
.norma--notifications-main {
    color: var(--norma__neutral--grey-3);
}

.norma--notify-danger {
    background: var(--norma__neutral--extra-light-blue);
}

    .norma--notify-danger p {
        color: var(--norma__neutral--light-blue)
    }

.norma--notify-warning {
    background: rgb(255 188 188 / 95%);
}

.norma--notify-success {
    background: rgb(149 224 176 / 95%);
}

.norma--notify-danger strong {
    color: var(--norma--danger-darker)
}

.norma--notify-warning strong, .norma--notifications-main.norma--notify-warning {
    color: black;
    font-weight: normal;
}

.norma--notify-success strong, .norma--notifications-main.norma--notify-success {
    color: black;
    font-weight: normal;
}

.norma--notifications-main .norma--all-notifications-wrap#norma--notify--srollbar::-webkit-scrollbar {
    background-color: var(--norma__neutral--grey-3) !important;
}

.norma--notifications-main .norma--all-notifications-wrap#norma--notify--srollbar::-webkit-scrollbar-thumb {
    background: var(--norma__neutral--grey-2) !important;
}
/* #endregion */
    /* #region language -> */
    .language .languageList li a {
    color: var(--norma__neutral--light-blue);
    background: var( --norma__neutral--grey-3);
}
/* #endregion */
/* #region header and sidebar -> */
header.appHeader {
    background: var(--norma__neutral--light);
}

    header.appHeader nav {
        background: var(--norma__neutral--light-blue);
    }

    header.appHeader .toggleNavButtonWrap {
        background: var(--norma__neutral--light-blue);
    }

aside.appSideBar .menu ul li.active::after {
    background: var( --norma-primary--1);
}

aside.appSideBar .menu ul li.active, aside.appSideBar .menu ul li:hover {
    background: rgb(218 255 231 / 30%);
}

aside.appSideBar.opened .norma--nav-title {
    color: var(--norma__neutral--grey-2);
}
/* #endregion */

/* #region -> order table states */
/*  ---default-odd  */
#orders-panel-scrolling-container .order-row.order-row-White:nth-of-type(odd) .order-row-item, #orders-panel-scrolling-container .order-row.order-row-White:nth-of-type(odd) {
    background-color: white;
}
/*  ---default-even  */
#orders-panel-scrolling-container .order-row.order-row-White:nth-of-type(even) .order-row-item, #orders-panel-scrolling-container .order-row.order-row-White:nth-of-type(even) {
    /* background-color: var(--norma__neutral--main-light-blue); */
}

.grouped-order-container .order-row.order-row-White .order-row-item, .grouped-order-container .order-row.order-row-White {
    background-color: var(--norma__neutral--light) 
}
/*  ----done  */
#orders-panel-scrolling-container .order-row.order-row-green .order-row-item, #orders-panel-scrolling-container .order-row.order-row-green {
    background-color: var(--norma-primary--2);
}
/*  ----planned  */
#orders-panel-scrolling-container .order-row.order-row-gray .order-row-item, #orders-panel-scrolling-container .order-row.order-row-gray, #orders-panel-scrolling-container .order-row.order-row-gray:hover .order-row-item, #orders-panel-scrolling-container .order-row.order-row-gray:hover {
    background-color: var(--norma__neutral--grey-2) !important;
}

    #orders-panel-scrolling-container .order-row.order-row-gray .order-row-item .order-row-info {
        filter: grayscale(1) hue-rotate(85deg) saturate(86) sepia(0) brightness(1.45);
    }
/*  ----selected  */
#orders-panel-scrolling-container .order-row.order-row-blue .order-row-item, #orders-panel-scrolling-container .order-row.order-row-blue {
    background-color: var(--norma__neutral--blue);
}
/*  ----hover  */
#orders-panel-scrolling-container .order-row.order-row-White:hover .order-row-item, #orders-panel-scrolling-container .order-row.order-row-White:hover {
    background-color: var(--norma__neutral--blue) !important;
}
/*  ----clicked  */
#orders-panel-scrolling-container .order-row.order-row-clicked .order-row-item, #orders-panel-scrolling-container .order-row.order-row-clicked {
    background-color: var(--norma__neutral--extra-light-blue);
}
/* #endregion */

/* region -> custom radio*/
.custom-radio [type="radio"]:checked + label,
.custom-radio [type="radio"]:not(:checked) + label {
    color: var(--norma__neutral--light-blue);
}

    .custom-radio [type="radio"]:checked + label:before,
    .custom-radio [type="radio"]:not(:checked) + label:before {
        border: 2px solid var(--norma__neutral--grey-2);
        background: var(--norma__neutral--light);
    }

    .custom-radio [type="radio"]:checked + label:after,
    .custom-radio [type="radio"]:not(:checked) + label:after {
        background: var(--norma__neutral--light-blue);
    }

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: none
}
/* #endregion */
/* #region -> norma buttons  */
.norma--button--primary {
    background: var(--norma-primary--1);
    color: var(--norma__neutral--light);
}

    .norma--button--primary:disabled {
        background: var(--norma__neutral--grey-2);
        color: var(--norma__neutral--grey-1);
        cursor: not-allowed;
    }

        .norma--button--primary:disabled img {
            filter: brightness(0.9);
        }

.norma--button--secondary {
    background: var( --norma-secondary--3);
    color: var( --norma-secondary--1);
}

    .norma--button--secondary:disabled {
        background: var(--norma__neutral--grey-1);
        color: var(--norma__neutral--grey-2)
    }

.norma--button--danger {
    background: var(--norma--danger);
    color: var(--norma__neutral--light);
    box-shadow: 0px 4px 5px #00000024;
}

    .norma--button--danger:disabled {
        opacity: 0.5
    }

.norma--button--danger-outline {
    box-shadow: 0px 4px 5px #00000024;
    color: var(--norma--danger);
    border: 2px solid var(--norma--danger)
}

.norma--button--link {
    color: var(--norma-primary--1)
}

    .norma--button--link:disabled {
        opacity: 0.5
    }

.norma--popup-confirm-button {
    background: var(--norma-primary--1) !important;
    color: var(--norma__neutral--light) !important;
    border-color: var(--norma-primary--1) !important
}

.norma--popup-cancel-button {
    background: var(--norma__neutral--light) !important;
    color: var(--norma__neutral--grey-1) !important;
    border: 1px solid var(--norma-primary--1) !important;
}

.norma--popup .modal-title {
    color: var(--norma__neutral--grey-1)
}
/* #endregion */
/* #region -> norma toggle input */
input.norma--toggles-input {
    background: var(--norma-secondary--3);
}

    input.norma--toggles-input:disabled {
        background: var(--norma__neutral--grey-2);
    }
/* #endregion*/
/* #region => manual planning sidebar*/
.norma--manualplanning-side {
    background: var(--norma__neutral--light-blue);
}
/* #endregion*/
/* #region => manual planning sidebar*/
.designSystemPageWrapper {
    background: var(--norma__neutral--grey-3);
}
/* #endregion*/
/* #region -> dropdown like select */
.norma--custom--select .dropdown-item {
    background-color: var(--norma__neutral--grey-4);
}
/* #endregion */
/* #region -> date range input , with single date*/
.norma--single-date-input-wrapper {
    background: var(--norma__neutral--light);
}

    .norma--single-date-input-wrapper .norma--single-date-input {
        background: transparent;
    }

        .norma--single-date-input-wrapper .norma--single-date-input input {
            background: transparent;
        }
/* #endregion*/
/* #region -> norma toggle input */
input.norma--toggles-input:before {
    background-color: var(--norma__neutral--light);
}
/* #endregion*/
/* #region => norma checkbox */
.norma--checkbox input[type=checkbox] {
    border: 2px solid var( --norma__neutral--grey-6);
    background: var(--norma__neutral--light);
}

    .norma--checkbox input[type=checkbox]:checked {
        background-color: var(--norma__neutral--light-blue);
    }
/* #endregion*/