html {
    font-size: 10px;
}

.ui-widget-overlay {
    background: #151515;
    opacity: .3;
}

.ui-widget button {
    font-family: var(--primaryFontFamily), Arial;
}

button.btn:focus, button.btn:focus-visible {
    outline-color: #cbcbcb;
}

:focus-visible {
    outline-color: #cbcbcb;
}

/*commonly used css classes across pages*/

.pageBody {
    padding: 1.5rem 3rem 2rem;
    font-family: var(--primaryFontFamily), Arial;
    accent-color: #46749b;
}

.cardFL {
    background: white;
    padding: 2.4rem;
    border-radius: 1rem;
    box-shadow: 0px 4px 4px 0px #655b9640;
    margin-bottom: 2rem;
}

/*Jquery dialog styles -----------------------------------------------------*/

.ui-dialog {
    font-family: var(--primaryFontFamily), Arial;
    padding: 0px;
    font-size: 1.3rem;
}

    .ui-dialog .ui-dialog-content {
        padding: 15px !important;
    }

    .ui-dialog .ui-dialog-title {
        font-size: 13px;
        color: #606060;
    }

    .ui-dialog .buttonWrap {
        display: flex;
        justify-content: flex-end;
    }

    .ui-dialog :focus-visible {
        outline-color: #cbcbcb;
    }

    .ui-dialog .ui-dialog-titlebar {
        background: #e9e9e942;
        border: none;
        border-bottom: 1px solid var(--pageContentBackground);
        padding: 1rem;
    }

    .ui-dialog .ui-dialog-titlebar-close {
        background: white;
        position: absolute;
        right: 1rem;
        top: 50%;
        width: 20px;
        margin: -10px 0 0 0;
        padding: 1px;
        height: 20px;
        background: white;
        border: 1px solid #e1e1e1;
    }

        .ui-dialog .ui-dialog-titlebar-close::after {
            background-image: url("../Images/img2022/close.png") !important;
            background-size: 100%;
            background-repeat: no-repeat;
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .ui-dialog .ui-dialog-titlebar-close .custom-modal-close {
            background-image: url("../Images/img2022/close.png") !important;
            background-size: 100%;
            background-repeat: no-repeat;
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

    .ui-dialog .ui-dialog-buttonpane {
        padding: 8px;
        border-top: 1px solid var(--pageContentBackground);
    }

        .ui-dialog .ui-dialog-buttonpane button {
            margin: 0;
            margin-right: 7px;
            font-size: 1.3rem;
            padding: 5px 12px;
            border-width: 1px;
            /* items/EditProductPack/-1 Reports/SupplierDetails */
        }

            .ui-dialog .ui-dialog-buttonpane button:focus {
                outline-offset: 0;
            }

/* button styles -----------------------------------------------------*/

.btnPrimary {
    background: var(--primaryButtonBackground);
    background-color: var(--primaryButtonBackground);
    color: var(--primaryButtonColor);
    font-family: Montserrat;
    font-size: 1.3rem;
    font-weight: 500;
}

    .btnPrimary:hover {
        filter: brightness(1.2);
        color: var(--primaryButtonColor);
    }

    .btnPrimary:focus {
        filter: brightness(0.8);
        color: var(--primaryButtonColor);
        outline: none;
    }

.btnSecondary {
    background: var(--secondaryButtonBackground);
    color: var(--secondaryButtonColor);
    font-weight: 600;
    font-family: var(--primaryFontFamily), Arial;
    font-size: 12px;
    padding: 4px 8px;
    margin-right: 5px;
}

    .btnSecondary:hover {
        filter: brightness(0.95);
        color: var(--secondaryButtonColor);
    }

    .btnSecondary:focus {
        filter: brightness(0.8);
        color: var(--secondaryButtonColor);
        outline: none;
    }

.btnDanger {
    background: var(--dangerButtonBackground);
    color: var(--dangerButtonColor);
    font-family: Montserrat;
    font-size: 1.3rem;
    font-weight: 500;
}

    .btnDanger:hover {
        filter: brightness(0.95);
        color: var(--dangerButtonColor);
    }

    .btnDanger:focus {
        filter: brightness(0.8);
        color: var(--dangerButtonColor);
        outline: none;
    }

.btnDefault {
    color: var(--defaultButtonColor);
    border: 1px solid var(--defaultButtonBorderColor);
    border-color: var(--defaultButtonBorderColor) !important;
    background: white;
    border-radius: 6px !important;
    font-family: 'Montserrat';
    font-weight: 600;
    font-size: 1.3rem;
}

.btnMinor {
    color: var(--minorButtonColor);
    border: 1px solid var(--minorButtonBorderColor);
    background: var(--minorButtonBackground);
    border-radius: 4px;
    font-family: Montserrat;
    font-weight: 600;
    font-size: 1.3rem;
}

    .btnMinor.active {
        background: var(--minorButtonBackgroundAcyive);
    }

/* link-button styles */

.linkDefault {
    color: var(--defaultButtonColor);
    border: 1px solid var(--defaultButtonBorderColor);
    background: white;
    border-radius: 6px !important;
    font-family: 'Montserrat';
    font-weight: 600;
    font-size: 1.3rem;
}

    .linkDefault:hover {
        color: var(--defaultButtonColor);
        filter: brightness(0.95);
    }

.linkDanger {
    color: var(--dangerButtonBackground);
    border: 1px solid #bf454159 !important;
    background: white;
    border-radius: 6px !important;
    font-family: 'Montserrat';
    font-weight: 600;
    font-size: 1.3rem;
}

    .linkDanger:hover {
        color: var(--dangerButtonBackground);
        filter: brightness(0.95);
    }


/* bootstrap select styles */

.bootstrap-select .dropdown-toggle {
    background: #e9e9e942;
}

    .bootstrap-select .dropdown-toggle:focus {
        outline: none !important;
        box-shadow: 1px 3px 4px #eee;
    }

.bootstrap-select.bsSelectFL > button.dropdown-toggle {
    color: var(--inputColor1);
    border: 1px solid var(--inputBorderColor1);
    background: white;
    border-radius: 6px !important;
    font-family: var(--primaryFontFamily), Arial;
    font-weight: 500;
    font-size: var(--inputFontSize1) !important;
    padding: 0.4rem 0.8rem;
    height: 30px;
}

.bootstrap-select.bsSelectFL .dropdown-menu .bs-actionsbox .btn-group {
    display: flex;
}

    .bootstrap-select.bsSelectFL .dropdown-menu .bs-actionsbox .btn-group button {
        width: max-content;
    }

/* html select styles */

.labelFL {
    font-size: 1.2rem;
    margin-bottom: 0.1rem;
    font-weight: 500;
    color: var(--textColor1);
}

select.selectFL {
    color: var(--inputColor1);
    border: 1px solid var(--inputBorderColor1);
    background: white;
    border-radius: 6px !important;
    font-family: var(--primaryFontFamily), Arial;
    font-weight: 500;
    font-size: var(--inputFontSize1) !important;
    padding: 0.4rem 0.8rem;
    height: 30px;
}

select.selectFL[multiple] {
    color: var(--inputColor1);
    border: 1px solid var(--inputBorderColor1);
    background: white;
    border-radius: 6px !important;
    font-family: var(--primaryFontFamily), Arial;
    font-weight: 500;
    font-size: var(--inputFontSize1) !important;
    padding: 0.4rem 0.8rem;
    height: auto;
}

/* input styles */

input[type="text"].inputFL, input[type="time"].inputFL, input[type="number"].inputFL, input[type="password"].inputFL {
    color: var(--inputColor1);
    border: 1px solid var(--inputBorderColor1);
    background: white;
    border-radius: 6px !important;
    font-family: var(--primaryFontFamily), Arial;
    font-weight: 500;
    font-size: var(--inputFontSize1) !important;
    padding: 0.4rem 0.8rem;
    height: 30px;
}

    input[type="text"].inputFL:disabled, input[type="time"].inputFL:disabled, input[type="number"].inputFL:disabled, input[type="password"].inputFL:disabled {
        background: #eee;
        border-color: #c9c9c9;
    }

    input[type="text"].inputFL::placeholder, input[type="time"].inputFL::placeholder, input[type="number"].inputFL::placeholder, input[type="password"].inputFL::placeholder {
        color: #ababab;
        font-weight: 400;
    }

.textareaFL {
    color: var(--inputColor1);
    border: 1px solid var(--inputBorderColor1);
    background: white;
    border-radius: 6px !important;
    font-family: var(--primaryFontFamily), Arial;
    font-weight: 500;
    font-size: var(--inputFontSize1) !important;
    padding: 0.4rem 0.8rem;
}

    .textareaFL:disabled {
        background: #eee;
        border-color: #c9c9c9;
    }

/* to fix styles of the date picker in sales departments page */
.ui-datepicker {
    width: max-content;
}

/*.........styles for the settings in the main sidebar..........*/

.dropdown-submenu.settings-menu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0;
    height: max-content;
}

.dropdown-submenu.settings-menu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu.settings-menu a {
    background: white;
}

.dropdown-submenu.settings-menu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu.settings-menu:hover > a:after {
    border-left-color: #fff;
}


/* ------------Styles for the store selector/store categories selector---------------- */

.dialog-confirm .ui-dialog-buttonset {
    border: 1px solid red;
}

/*Temporary prices page*/

@media screen and (max-width: 550px) {
    .showSearchDialog {
        width: 100% !important;
    }
}

/* Styles form the facelifted modal */

.facelift-modal .modal-header {
    background: #e9e9e942;
    border: none;
    border-bottom: 1px solid var(--pageContentBackground);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
}

    .facelift-modal .modal-header::before {
        display: none;
    }

    .facelift-modal .modal-header .modal-title {
        font-size: 13px;
        color: #606060;
        font-family: var(--primaryFontFamily), Arial;
        font-weight: bold;
    }

.facelift-modal button.close-modal-x {
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 20px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
    background: white;
    border: 1px solid #e1e1e1;
}

    .facelift-modal button.close-modal-x > div {
        background-image: url("../Images/img2022/close.png") !important;
        background-size: 100%;
        background-repeat: no-repeat;
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }


.facelift-modal .modal-footer {
    padding: 8px;
    border-top: 1px solid var(--pageContentBackground);
}

    .facelift-modal .modal-footer .btn {
        padding: 5px 12px;
    }

/* datepicker styles -------------------- */

.ui-datepicker .ui-datepicker-header {
    border: none;
    border-bottom: 1px solid #bbb;
    font-family: var(--primaryFontFamily), Arial;
}

    .ui-datepicker .ui-datepicker-header select {
        font-family: var(--primaryFontFamily), Arial;
        border-radius: 4px;
    }

.ui-datepicker .ui-datepicker-calendar {
    font-family: var(--primaryFontFamily), Arial;
}

    .ui-datepicker .ui-datepicker-calendar thead {
        font-size: 10px;
    }

.ui-timepicker-div {
    font-family: var(--primaryFontFamily), Arial;
}

    .ui-timepicker-div dl {
        margin-top: 12px;
    }

        .ui-timepicker-div dl dt {
            font-size: 12px;
            font-weight: 500;
        }

            .ui-timepicker-div dl dt.ui_tpicker_time_label {
                margin-top: 5px;
            }

        .ui-timepicker-div dl .ui_tpicker_time_input {
            font-family: var(--primaryFontFamily), Arial;
            font-size: 12px;
            padding: 0;
        }

.ui-datepicker-buttonpane {
    padding: 8px;
    border-top: 1px solid var(--pageContentBackground);
    display: flex;
    justify-content: flex-end;
}

    .ui-datepicker-buttonpane button {
        float: none;
        margin: 0;
        margin-left: 7px;
        font-size: 13px;
    }

/*  Alert styles  */

.alert {
    font-family: var(--primaryFontFamily), Arial;
}

.alert-danger {
    background-image: linear-gradient(to bottom, #f2dede 0%, #ffefef 100%);
}