@import "fontiran.css";

/* @font-face {
    font-family: 'YekanLight';
    src: url('../fonts/iranyekanweblightfanum.eot') format('embedded-opentype'), url('../fonts/iranyekanweblightfanum.woff') format('woff'), url('../fonts/iranyekanweblightfanum.ttf') format('truetype'), url('../fonts/iranyekanweblightfanum.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'yekanBold';
    src: url('../fonts/IRANYekanWebBold.eot') format('embedded-opentype'), url('../fonts/IRANYekanWebBold.woff') format('woff'), url('../fonts/IRANYekanWebBold.ttf') format('truetype'), url('../fonts/IRANYekanWebBold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}*/

@font-face {
    font-family: 'IranNastaliq';
    src: url('../fonts/IranNastaliq.eot') format('embedded-opentype'), url('../fonts/IranNastaliq.woff') format('woff'), url('../fonts/IranNastaliq.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'IranSans';
    src: url('../fonts/iranyekanwebboldfanum.eot') format('embedded-opentype'), url('../fonts/iranyekanwebboldfanum.woff') format('woff'), url('../fonts/iranyekanwebboldfanum.ttf') format('truetype'), url('../fonts/iranyekanwebboldfanum.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*@font-face {
    font-family: 'IranYekanEXBold';
    src: url('../fonts/IRANYekanWebExtraBold.eot') format('embedded-opentype'), url('../fonts/IRANYekanWebExtraBold.woff') format('woff'), url('../fonts/IRANYekanWebExtraBold.ttf') format('truetype'), url('../fonts/IRANYekanWebExtraBold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}*/
@font-face {
    font-family: 'IranText';
    src: url('../fonts/IRANYekanBoldMsn.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*@font-face {
    font-family: 'Estedad';
    src: url('../fonts/Estedad/ttf/Estedad-Regular.ttf') format('truetype'), url('../fonts/Estedad/woff2/Estedad-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
} */


:root {
    --clr-light: #F5F5F5;
    --clr-dark: #1F2937;
    --clr-bg: #ffffff;
    --clr-text: #161616;
    --clr-input: #ffffff;
    --clr-bg-topmenu: #1A237E;
    --clr-bg-menu: #ffffff;
    --clr-bg-card: #ffffff;
    --clr-card-title: #1F2937;
    --clr-socail: #52525B;
    --clr-mute: #6B7280;
    --clr-input-bg: #F6F6F6;
    --clr-placeholder: #64748B;
    --clr-bg-bubbles: rgba(41, 69, 232, 0.42);
    --d-moon: none;
    --d-sun: inline-block;
    --foreground: var(--clr-dark);
    --background: var(--clr-light);
    --loader-background-color: #EEEEEE;
    --loader-highlight-color: #DEDEDE;
}

.darkmode {
    --clr-light: #F5F5F5;
    --clr-dark: #1F2937;
    --clr-bg: #182331;
    --clr-text: #ffffff;
    --clr-input: #111827;
    --clr-bg-topmenu: #0F172A;
    --clr-bg-menu: #1E293B;
    --clr-bg-card: #334155;
    --clr-card-title: #ffffff;
    --clr-socail: #cacad2;
    --clr-mute: #D1D5DB;
    --clr-input-bg: #334155;
    --clr-placeholder: #64748B;
    --clr-bg-bubbles: rgba(255, 255, 255, 0.15);
    --d-moon: inline-block;
    --d-sun: none;
    --foreground: var(--clr-light);
    --background: var(--clr-dark);
}

:focus-visible {
    outline: none;
}

.ss03 {
    -moz-font-feature-settings: "ss03";
    -webkit-font-feature-settings: "ss03";
    font-feature-settings: "ss03";
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: #ebebeb;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #6d6d6d;
}

*,
html {
    direction: rtl;
    font-family: 'IRANYekanX', serif;
    font-weight: 500;
}

body {
    background: var(--background);
    margin: 0;
    -webkit-text-size-adjust: 100%;
    text-align: right;
    -moz-font-feature-settings: "ss02";
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
    /* min-height: 100vh; */
}

input {
    font-family: 'IRANYekanX', serif;
    -moz-font-feature-settings: "ss02";
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
}

a {
    text-decoration: none;
}

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    color: black;
}

ul {
    list-style: none;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-none {
    grid-template-columns: none;
}

.grid-cols-subgrid {
    grid-template-columns: subgrid;
}


.col-auto {
    grid-column: auto;
}

.col-span-1 {
    grid-column: span 1 / span 1;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.col-span-3 {
    grid-column: span 3 / span 3;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-5 {
    grid-column: span 5 / span 5;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-7 {
    grid-column: span 7 / span 7;
}

.col-span-8 {
    grid-column: span 8 / span 8;
}

.col-span-9 {
    grid-column: span 9 / span 9;
}

.col-span-10 {
    grid-column: span 10 / span 10;
}

.col-span-11 {
    grid-column: span 11 / span 11;
}

.col-span-12 {
    grid-column: span 12 / span 12;
}

.col-span-full {
    grid-column: 1 / -1;
}

.col-start-1 {
    grid-column-start: 1;
}

.col-start-2 {
    grid-column-start: 2;
}

.col-start-3 {
    grid-column-start: 3;
}

.col-start-4 {
    grid-column-start: 4;
}

.col-start-5 {
    grid-column-start: 5;
}

.col-start-6 {
    grid-column-start: 6;
}

.col-start-7 {
    grid-column-start: 7;
}

.col-start-8 {
    grid-column-start: 8;
}

.col-start-9 {
    grid-column-start: 9;
}

.col-start-10 {
    grid-column-start: 10;
}

.col-start-11 {
    grid-column-start: 11;
}

.col-start-12 {
    grid-column-start: 12;
}

.col-start-13 {
    grid-column-start: 13;
}

.col-start-auto {
    grid-column-start: auto;
}

.col-end-1 {
    grid-column-end: 1;
}

.col-end-2 {
    grid-column-end: 2;
}

.col-end-3 {
    grid-column-end: 3;
}

.col-end-4 {
    grid-column-end: 4;
}

.col-end-5 {
    grid-column-end: 5;
}

.col-end-6 {
    grid-column-end: 6;
}

.col-end-7 {
    grid-column-end: 7;
}

.col-end-8 {
    grid-column-end: 8;
}

.col-end-9 {
    grid-column-end: 9;
}

.col-end-10 {
    grid-column-end: 10;
}

.col-end-11 {
    grid-column-end: 11;
}

.col-end-12 {
    grid-column-end: 12;
}

.col-end-13 {
    grid-column-end: 13;
}

.col-end-auto {
    grid-column-end: auto;
}

.card {
    border: none;
    border-radius: 10px;
    /*padding: 10px 5px;*/
    padding: 5px;
}

.moon {
    display: var(--d-moon);
    color: #E7E5E4;
}

.sun {
    display: var(--d-sun);
    color: #EAB308;
}

.sticky-div {
    position: sticky;
    top: 3px;
    z-index: 60;
}

.sticky-div-modal {
    position: sticky;
    top: 1px;
    z-index: 60;
}



/******************************** Start for top menu and main wrpaer ********************************/
/* for main section */
.main-wrapper {
    margin-right: 290px;
}

.header-container {
    padding: 10px;
    transition: ease .5s;
}

.content-container {
    margin-right: 290px;
    transition: all ease .4s;
}
/******************************** End for top menu and main wrpaer ********************************/


/* Top Header */
.toggle {
    border: none;
    background-color: transparent;
}

.header-right button {
    width: 40px;
    height: 40px;
}

.header-left a {
    margin: 0 5px;
    width: 40px;
    height: 40px;
}

.header-left .dropdown {
    margin: 0 5px 0 0;
}

.profile-box {
    /* height: 50px; */
    /* padding: 10px 2px; */
    border-radius: 25px;
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    background-color: #ffffff;
}

    .profile-box img {
        width: 30px;
        border-radius: 50%;
        margin: 3px 0 3px 3px;
    }

    .profile-box span {
        color: rgba(163, 174, 208, 0.9);
        font-size: 12px;
        margin: 0 1px 0 10px;
        font-weight: 300;
    }

.profile-box:focus {
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    background-color: #ffffff;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.dropdown .dropdown-menu {
    width: 100%;
    background-color: #ffffff;
    -webkit-border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    border-radius: 25px;
    border: 0;
    margin: 0 !important;
    padding: 5px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.dropdown .dropdown-menu li {
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 25px;
    cursor: pointer;
    transition: all .3s ease;
}

.dropdown .dropdown-menu li a {
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    font-size: 12px;
    padding: 10px 5px;
    color: rgba(132, 139, 159, 0.9);
    background-color: transparent;
}

.dropdown .dropdown-menu .active {
    background-color: rgba(235, 235, 235, 0.7);
    border-radius: 25px;
}

.dropdown .dropdown-menu .workshopActive {
    background-color: rgb(224, 253, 253);
    border-radius: 25px;
    border: 1px solid #26afaf;
}

.dropdown .dropdown-menu li:hover {
    background-color: rgba(235, 235, 235, 0.7);
    border-radius: 25px;
}

.workshop-box {
    position: relative;
    padding: 1px;
    border-radius: 70px;
    color: #1BB9B9;
    z-index: 1;
    transition: all 0.18s ease;
    background: #E4FFFF;
    backdrop-filter: blur(40px);
    backface-visibility: hidden;
    z-index: 99;
    /*overflow: hidden;*/
}

.workshop-box:after,
.workshop-box:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 70px;
    background-size: 100% 100%;
    background-position: 0px 0px;
    background-image: conic-gradient(from var(--angle) at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 33%, var(--glowColor) 50%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);
    animation: rotate 2s infinite linear;
}

.workshop-box:before {
    animation: rotate 2s infinite linear;
    filter: blur(3px);
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --glowColor {
    syntax: "<color>";
    initial-value: #1BB9B9;
}

@keyframes rotate {
    0% {
        --angle: 0deg;
        --glowColor: #1BB9B9;
    }

    100% {
        --angle: 360deg;
        --glowColor: #1BB9B9;
    }
}

.workshop-box button {
    width: 300px;
    z-index: 4;
    position: relative;
}

.employer-count {
    text-align: center;
    width: 30px;
    height: 30px;
    background-color: #B6F2E1;
    border: 2px solid #059669;
    border-radius: 50px;
    align-items: center;
    display: flex;
    justify-content: center;
    color: #0B5959;
    font-size: 11px;
    margin-left: 10px;
    overflow: hidden;
}

.workshopName {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 222px;
    display: block;
}



/* ------------------------ */
/* Main Content */

.title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #353232;
}
.sub-title {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    color: #353232;
}

.select-box {
    border-radius: 20px;
    outline: 3px dashed #097575;
    background: linear-gradient(263deg, rgba(176, 231, 231, 0.57) 31.24%, rgba(176, 231, 231, 0.28) 65.3%);
}

    .select-box h1 {
        color: #353232;
        text-align: right;
        font-size: 24px;
        font-weight: 600;
        line-height: normal;
    }

    .select-box p {
        color: #1C1B1B;
        text-align: justify;
        font-size: 16px;
        font-weight: 300;
        line-height: 2.2em;
    }

    .select-box img {
        width: 90%;
    }

/* Handle Operate */
.register-btn {
    border-radius: 15px;
    background-color: #2FC1C1;
    border: none;
    padding: 3px 10px;
    margin: auto 2px;
}

    .register-btn span {
        color: #FFF;
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

.back-btn {
    border-radius: 15px;
    background: #454D5C;
    border: none;
    padding: 3px 20px;
}

    .back-btn span {
        color: #FFF;
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

.back-main-btn {
    border-radius: 10px;
    background: #2FC1C1;
    border: none;
    padding: 3px 20px;
}

    .back-main-btn span {
        color: #FFF;
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

/* End Handle Operate */




/* Div Table */
.divTable {
    display: table;
    width: 100%;
    margin-bottom: 50px;
}

.divTableRow {
    display: table-row;
    border-radius: 50px;
}

.divTableCell, .divTableHead {
    display: table-cell;
    padding: 3px 10px;
}

.divTableHeadColor {
    background: linear-gradient(180deg, #41D1D1 0%, #2CD0D0 100%);
    /* border: 7px solid #0B5959; */
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
}

.divTableHeading {
    /* display: table-header-group; */
    font-weight: 500;
    color: #ffffff;
}

.divTableCell span.td {
    color: #0B5959;
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 171.429% */
    letter-spacing: -0.28px;
}


.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}

.divTableBody {
    display: table-row-group;
}

    .divTableBody .divTableRow .divTableCell:first-child {
        /* width: 25%; */
    }

    .divTableBody .divTableRow:last-child .divTableCell {
        /* height: 200px; */
    }













.table-head span {
    color: #A3AED0;
    text-align: right;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px; /* 171.429% */
    letter-spacing: -0.28px;
}

.table-body tr {
    border-radius: 10px;
    background: rgba(47, 192, 192, 0.07);
}

/* End Div Table */


.important-note {
    padding: 10px;
    outline: 2px dashed rgba(7, 113, 113, 0.70);
    border-radius: 10px;
    /* background: rgba(20, 181, 181, 0.22); */
    background: rgba(146, 213, 144, 0.22);
}

    .important-note p {
        color: #000;
        text-align: center;
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: 0;
    }

        .important-note p a {
            color: #5339e6;
            text-decoration: underline;
        }


/* Modal */
.modal {
    backdrop-filter: blur(8px);
}

    .modal .modal-content {
        border-radius: 20px;
    }

.modal-header {
    border: none;
}

    /* .modal-header h5{
    text-align: center;
} */

    .modal-header .btn-close {
        margin: 0 0 0 15px;
        border: 2px solid #33363F;
        border-radius: 50%;
        right: 13px;
        padding: 5px;
        background-size: 10px;
        z-index: 25;
    }

        .modal-header .btn-close:focus {
            box-shadow: none;
        }

.modal-content {
    border: none;
}
/* 
.modal-content label{
    font-size: 13px;
    color: #49579B;
} */
.modal-footer {
    /* padding: 1.5rem; */
    border: none;
}
/* End Modal */


/* Butoton */
.btn-primary, .btn-secondary {
    width: 200px;
    font-size: 14px;
    font-style: normal;
    border: none;
    padding: 10px;
    border-radius: 5px;
    color: #ffffff;
}

.btn-primary {
    background-color: #84CC16;
}

.btn-secondary {
    background-color: #454D5C;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus-visible {
    background-color: #69a313;
    box-shadow: none;
}

.btn-secondary:hover {
    background-color: #363c47;
}

.btn-cancel {
    background: #1F2937;
    border-radius: 5px;
    color: #ffffff;
    padding: 10px 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}


#searchModal .btn-search {
    padding: 10px 8px;
}

#searchModal .btn-view-all {
    padding: 5px 8px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 7px;
    border: 1px solid #000000;
}

    #searchModal .btn-view-all:hover {
        background-color: #e6e6e6;
    }

    #searchModal .btn-view-all span {
        font-size: 12px;
        font-weight: 500;
        color: #000000;
    }

#searchModal span.persianDateInputStartDate,
#searchModal span.persianDateInputEndDate,
#searchModal span.persianDateInputYear,
#searchModal span.persianDateInputMonth {
    border: 1px solid #DADADA;
    background-color: #F6F6F6;
    padding: 6px;
    color: #333333;
    font-size: 12px;
    font-weight: 500;
    transition: ease .4s;
    cursor: pointer;
}

.btn-cancel:hover {
    background-color: #121820;
}

.btn-cancel:focus {
    box-shadow: none;
}
/* End Butoton */



/* Checkbox & Radio */

.form-haghighi .form-check-input[type="radio"],
.form-haghighi .form-check-input[type="checkbox"] {
    border-radius: 4px;
    padding: 7px;
    margin: 0 7px;
}

    .form-haghighi .form-check-input[type="radio"] + label,
    .form-haghighi .form-check-input[type="checkbox"] + label {
        color: #83898C;
    }

.form-haghighi .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: none;
}

    .form-haghighi .form-check-input:checked[type="radio"] + label,
    .form-check-input:checked[type="checkbox"] + label {
        color: #2B2F32;
    }


.form-check-input[type="radio"],
.form-check-input[type="checkbox"] {
    border-radius: 4px;
    padding: 10px;
    outline: none;
    margin: 2px 0;
}

.form-check,
.form-switch {
    padding-right: 0;
    border-radius: 0.8em;
}

    .form-switch .form-check-input {
        width: 2.6em;
        height: 20px;
        border: 1px solid transparent;
        background-color: #D1D1D6;
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
        background-position: right center;
    }

        .form-switch .form-check-input:checked {
            background-color: #1AB0B0;
            background-position: left center;
        }

        .form-switch .form-check-input:focus {
            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
        }

    .form-check-input label,
    .form-switch label {
        color: #696969;
        font-size: 12px;
        font-weight: 400;
        margin-right: 10px;
    }

.form-check-input:checked[type="checkbox"] + label {
    color: #2F2F2F;
    background-position: right center;
}
/* End Checkbox & Radio */


.search-input {
    /* width: 357px;
    height: 36px; */
    border-radius: 7px;
    border: 1px solid #DADADA;
    background: #F6F6F6;
}

.svg-search {
    /* width: 357px; */
    left: 20px;
    top: 6px;
}

.filter-option {
    width: 88px;
    height: 36px;
    border-radius: 7px;
    border: 1px solid #DADADA;
    background: #FFF;
}

/* End List & Table */


/* Buttons */


button.btn-pdf {
    border: 1px solid transparent;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    padding: 3px 1px;
    color: #E83838;
    margin: auto 0 auto 1px;
    background-color: rgba(211, 8, 37, 0.2);
    box-shadow: 0;
    transition: ease .2s;
}

button.btn-pdf svg {
    color: rgb(174, 0, 0);
    fill: rgb(174, 0, 0);
}

button.btn-print {
    border: 1px solid transparent;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    padding: 3px 1px;
    color: #1E293B;
    margin: auto 0 auto 1px;
    background-color: rgba(148, 163, 184, 0.30);
    box-shadow: 0;
    transition: ease .2s;
}

button.btn-print svg {
    color: #1E293B;
}

button.btn-print:hover {
    color: #ffffff;
    background-color: rgba(52, 209, 209, 0.50);
}

button.btn-print:hover svg {
    color: #1E293B;
}

button.btn-edit,
a .btn-edit {
    border: 1px solid transparent;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    padding: 3px 1px;
    color: #009EE2;
    margin: auto 0 auto 1px;
    /* background-color: #ffffff; */
    background-color: rgba(52, 209, 209, 0.20);
    box-shadow: 0;
    transition: ease .2s;
}

    button.btn-edit svg {
        color: #009EE2;
    }

    button.btn-edit:hover {
        color: #ffffff;
        /* background-color: #009EE2; */
        background-color: rgba(52, 209, 209, 0.40);
    }

        button.btn-edit:hover svg {
            color: #009EE2;
        }

button.btn-delete {
    border: 1px solid transparent;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    padding: 3px 1px;
    color: #FF5151;
    margin: auto 1px auto 0;
    /* background-color: #ffffff; */
    background: rgba(209, 50, 50, 0.15);
    transition: ease .2s;
}

    button.btn-delete svg {
        color: #FF5151;
    }

    button.btn-delete:hover {
        color: #ffffff;
        /* background-color: #FF5151; */
        background-color: rgba(209, 50, 50, 0.25);
    }

        button.btn-delete:hover svg {
            color: #FF5151;
        }

    button.btn-edit span, button.btn-delete span {
        display: none;
    }

button.btn-more {
    height: 30px;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    color: #059669;
    text-align: right;
    font-size: 11px;
    padding: 3px 1px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.22px;
    background-color: #B6F2E1;
    margin: auto 0 auto 2px;
    /* display: flex !important; */
    white-space: nowrap;
}

    button.btn-more span {
        text-align: center;
        margin: 0 auto !important;
        display: flex !important;
    }

    button.btn-more:hover {
        background-color: #a8dfcf;
    }

    button.btn-more span:nth-child(1) {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 0.1rem;
        background: linear-gradient(to right, #05966900, #05966883);
        animation: animate1 2s linear infinite;
    }

@keyframes animate1 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

button.btn-more span:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 0.1rem;
    background: linear-gradient(to bottom, #05966900, #05966883);
    animation: animate2 2s linear infinite;
    animation-delay: 1s;
}

@keyframes animate2 {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

button.btn-more span:nth-child(3) {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 0.1rem;
    background: linear-gradient(to left, #05966900, #05966883);
    animation: animate3 2s linear infinite;
}

@keyframes animate3 {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

button.btn-more span:nth-child(4) {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0.1rem;
    background: linear-gradient(to top, #05966900, #05966883);
    animation: animate4 2s linear infinite;
    animation-delay: 1s;
}

@keyframes animate4 {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(-100%);
    }
}

/* End Buttons */


.number {
    display: none;
}



/* Overlay Background */

.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh !important;
    /* max-height: 300vh !important; */
    /* width:100vw; */
    z-index: 1011;
    transition: background-color 0.3s, transform 0.3s;
}


.overlaySearchAdvance {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh !important;
    /* max-height: 300vh !important; */
    /* width:100vw; */
    z-index: 10;
    transition: background-color 0.3s, transform 0.3s;
}

/* End Overlay Background */

/* Note Modal */
#noteModal .modal-dialog {
    text-align: center;
    /* margin: 0 auto; */
}

#noteModal.modal-content {
    max-width: 30% !important;
    width: 30% !important;
    max-height: 30% !important;
    height: 30% !important;
}

#test {
}

.alert-note h3 {
}

.alert-note p {
    margin: 10px auto;
    border-radius: 6px;
    text-align: justify;
    font-size: 13px;
    font-weight: 400;
    line-height: 28px;
}

.alert-note button {
    margin: 10px auto;
    font-size: 14px;
    border-radius: 6px;
    background: linear-gradient(93deg, #30C1C1 2.98%, #097474 97.36%);
}

.not-show span {
    font-size: 12px;
}
/* End Note Modal */






/************************* Form *************************/
.input-group-text {
    border-radius: 0px;
}

/* form-haghighi */
.form-haghighi .input-group {
    /* border: 1px solid #23A8A8; */
    box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    border-radius: 10px;
    height: 40px;
    border: 1px solid #23A8A8;
}

.form-haghighi .form-control {
    /* border: none; */
    /* border: 1px solid #23A8A8; */
    box-shadow: none;
    border-radius: 10px;
}

.form-haghighi .input-group-text {
    /* border-radius: 0px 10px 10px 0px; */
    background: #23A8A8;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    width: 150px;
    border: none;
    display: block;
    text-align: center;
}


.form-check-input:checked {
    background-color: #23A8A8;
    border: 1px solid #ffffff !important;
    outline: 1px solid #23A8A8;
}

.form-check-input:focus, .form-control:focus {
    border-color: #23A8A8;
    outline: 0;
    box-shadow: none;
}

.inputGroup-sizing-gender, .inputGroup-sizing-region, .inputGroup-sizing-marriage {
    /* margin: 12px !important; */
    padding: 0.375rem 0.75rem;
    font-size: 12px;
}

/* form-hoghoghi */
.form-hoghoghi .input-group {
    border-radius: 10px;
    width: 100%;
    height: 40px;
    /* background: #23A8A8; */
    box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    border: 1px solid #23A8A8;
}

.form-hoghoghi .form-control {
    width: 25%;
    height: 40px;
    box-shadow: none;
    border-radius: 10px;
}

.form-hoghoghi .input-group-text {
    width: 15%;
    /* border-radius: 0px 10px 10px 0px; */
    background: #23A8A8;
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    border: none;
    display: block;
    text-align: center;
    padding: 0 auto;
}


.form-hoghoghi .description {
    width: 60%;
    background: #23A8A833;
    color: #134a4a;
    font-size: 11px;
    font-weight: 500;
    text-align: justify;
    line-height: 20px;
    margin: 0;
    padding: 0 7px;
}

/* form-workshop */
.form-workshop .input-group {
    border-radius: 10px;
    width: 100%;
    height: 40px;
    /* background: #23A8A8; */
    box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    border: 1px solid #23A8A8;
}

.form-workshop .form-control, .form-workshop .form-select {
    /* width: 25%; */
    box-shadow: none;
    border-radius: 10px;
    font-size: 13px;
}

    .form-workshop .form-select option {
        font-family: 'IRANYekanX' !important;
        -webkit-font-family: 'IRANYekanX' !important;
        -webkit-font-familygap: 'IRANYekanX' !important;
        -webkit-font-family: 'IRANYekanX' !important;
        -moz-font-family: 'IRANYekanX' !important;
        -moz-font-family: 'IRANYekanX' !important;
        -moz-font-family: 'IRANYekanX' !important;
    }

.form-workshop .form-workshop-blur2 {
    position: relative;
    display: flex;
    justify-content: end;
    padding: 5px;
}

    .form-workshop .form-workshop-blur2 .blur2 {
        width: 100%;
        height: 100%;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.20);
        backdrop-filter: blur(3px);
        position: absolute;
        top: 0;
        right: 0;
        z-index: 50;
    }

.form-workshop .input-group-text {
    width: 110px;
    background: #23A8A8;
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    border: none;
    display: block;
    text-align: center;
    padding: 0 auto;
}

.form-workshop .workshop-bime-dastmozd {
    border-radius: 15px;
    border: 1px dashed #23A8A8;
    padding: 15px;
}

.form-workshop .workshop-bime-dastmozd2,
.form-workshop .workshop-bime-dastmozd3 {
    border-radius: 15px;
    padding: 10px;
    position: relative;
}

    .form-workshop .workshop-bime-dastmozd2 .blur2,
    .form-workshop .workshop-bime-dastmozd3 .blur3 {
        width: 100%;
        height: 100%;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.20);
        backdrop-filter: blur(3px);
        position: absolute;
        top: 0;
        right: 0;
        z-index: 50;
    }


/* form-personal */
.form-personal .input-group,
.form-personal-step2 .input-group,
.form-personal-step3 .input-group {
    border-radius: 10px;
    width: 100%;
    height: 40px;
    /* background: #23A8A8; */
    box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    border: 1px solid #199494;
}

.form-personal .form-control, .form-personal-step3 .form-control
.form-personal .form-select, .form-personal-step3 .form-select {
    /* width: 25%; */
    box-shadow: none;
    border-radius: 10px;
    font-size: 13px;
}


.form-personal .input-group-text,
.form-personal-step3 .input-group-text {
    width: 130px;
    background: #199494;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    border: none;
    display: block;
    text-align: center;
    padding: 0 auto;
}

.form-personal .note-modal {
    border-radius: 8px;
    outline: 2px dashed rgba(7, 113, 113, 0.70);
    background: rgba(20, 181, 181, 0.22);
    padding: 10px;
    margin-bottom: 15px;
}

    .form-personal .note-modal p {
        color: #000;
        text-align: center;
        font-family: IRANYekanX;
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: 0;
    }

.form-personal #childForm {
    overflow: hidden;
}

.form-personal #add_child {
    left: 50px;
    bottom: 5px;
}




/* form-contract */
.form-contract {
    /* padding: 5px 10px; */
}

    .form-contract .input-group {
        border-radius: 8px;
        box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.10);
        border: 1px solid #23A8A8;
        overflow: hidden;
    }

    .form-contract .input-group {
        border-radius: 8px;
        box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.10);
        border: 1px solid #23A8A8;
        overflow: hidden;
    }

        .form-contract .input-group .custom-border-input-mini {
            border: 1px solid #C5C5C5;
            margin: 1px;
            border-radius: 8px;
            position: relative;
        }

            .form-contract .input-group .custom-border-input-mini .disable {
                background-color: #d9d9d944;
                position: absolute;
                top: 0;
                border-radius: 8px;
                width: 100%;
                height: 100%;
                z-index: 300;
            }

            .form-contract .input-group .custom-border-input-mini .small-date {
                font-size: 10px;
                /* font-weight: 200; */
                white-space: nowrap;
                color: #E73333;
                width: 100%;
            }

    .form-contract .input-group-title {
        width: 100%;
        background: #23A8A8;
        padding: 4px;
    }

    .form-contract .custom-border-input-mini .form-control {
        box-shadow: none;
        /* border-radius: 8px !important; */
        font-size: 11px;
        border: none;
        padding: 0.272rem 0;
        /* margin: 2px; */
        text-align: center;
    }

        .form-contract .custom-border-input-mini .form-control:disabled {
            background-color: transparent;
        }

    .form-contract .form-control:nth-child(2) {
        margin: 3px 0 3px 3px;
    }

    .form-contract .add-btn {
        display: none;
    }

    .form-contract .input-group-text {
        background: transparent;
        color: #ffffff;
        font-size: 11px;
        font-weight: 500;
        border: none;
        padding: 3px 0;
    }

    .form-contract .btn-primary {
        width: 30px;
        border-radius: 8px;
        padding: 3px;
        font-size: 10px;
        bottom: 10px;
        margin: auto 5px;
    }

    .form-contract .btn-delete {
        background-color: #EF4444;
        width: 30px;
        border-radius: 8px;
        font-size: 10px;
    }

        .form-contract .btn-delete:hover {
            background-color: #c93939;
        }

    .form-contract .btn-primary svg {
        width: 20px;
    }

    .form-contract .btn-primary-mini,
    .form-contract .btn-edit-mini,
    .form-contract .btn-del-mini {
        padding: 5px 6px;
        font-size: 11px;
        border-radius: 5px;
        color: #ffffff;
        margin: 0 2px;
        z-index: 301;
    }

    .form-contract .btn-primary-mini {
        background: #84CC16;
        left: 5px;
    }

    .form-contract .btn-edit-mini {
        background: #14B8A6;
        left: 45px;
    }

    .form-contract .btn-del-mini {
        background: #EF4444;
        left: 5px;
    }

    .form-contract .btn-primary-mini.disabled {
        background: #dddddd;
        background: #c5c5c5;
        color: #ddd;
    }

/* ----- */
.form-contract-step2 .input-group {
    border-radius: 8px;
    width: 100%;
    /* height: 35px; */
    box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    border: 1px solid #23A8A8;
}

.form-contract-step2 span {
    color: #4B4B4B;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px; /* 133.333% */
}

.form-contract-step2 .form-control {
    /* width: 25%; */
    box-shadow: none;
    border-radius: 8px;
    font-size: 12px;
}

.disable {
    filter: grayscale(100%);
    pointer-events: none;
    opacity: 0.6;
}

.form-contract-step2 .input-group-text {
    width: 100px;
    background: #23A8A8;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    border: none;
    display: block;
    text-align: center;
    padding: 0 auto;
}

.form-contract-step3 p {
    color: #000;
    text-align: justify;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px; /* 133.333% */
}

.form-contract-step2 .form-check,
.form-contract-step2 .form-switch,
.form-contract-step3 .form-check,
.form-contract-step3 .form-switch {
    padding-right: 0;
    border-radius: 0.8em;
}

.form-contract-step2 .form-check-input[type="checkbox"],
.form-contract-step3 .form-check-input[type="checkbox"] {
    border-radius: 7px;
    padding: 10px;
    margin: 0;
    outline: none;
}

.form-contract-step2 .form-switch .form-check-input,
.form-contract-step3 .form-switch .form-check-input {
    width: 2.6em;
    height: 20px;
    border: none;
    background-color: #D1D1D6;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: right center;
}

    .form-contract-step2 .form-switch .form-check-input:checked,
    .form-contract-step3 .form-switch .form-check-input:checked {
        background-color: #1AB0B0;
        background-position: left center;
    }

.form-contract-step2 .form-switch label,
.form-contract-step3 .form-switch label {
    color: #696969;
    font-size: 12px;
    font-weight: 400;
    margin-right: 10px;
}

.form-contract-step2 .form-check-input:checked[type="checkbox"] + label,
.form-contract-step3 .form-check-input:checked[type="checkbox"] + label {
    color: #2F2F2F;
    background-position: right center;
}

.checkAll:checked[type="checkbox"] + label {
    color: #ffffff;
}



/************************* End Form *************************/

/* Step Proress */
.step-progress {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .step-progress h5 {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        border: 1px solid #23A8A8;
        background: #23A8A8;
        font-size: 30px;
        font-weight: 600;
        color: #ffffff;
        z-index: 33 !important;
    }

    .step-progress .not-step {
        background: #ffffff !important;
        color: #23A8A8 !important;
    }

    .step-progress p {
        position: absolute;
        color: #0A7676;
        font-size: 14px;
        font-weight: 500;
        margin: 0;
        bottom: -15px;
        white-space: nowrap;
    }

    .step-progress::before {
        position: absolute;
        content: "";
        display: block;
        top: 0;
        width: 50px;
        height: 50px;
        border-radius: 10px;
        background: #9CD8D8;
        translate: -7px -7px;
        transform: rotate(-7deg);
        z-index: 32 !important;
    }

.line {
    width: 140px;
    height: 5px;
    background: #9CD8D8;
    position: relative;
    bottom: 10px;
    margin: 0 0px;
}

.line-active {
    background: #23A8A8 !important;
}

/* End Step Proress */





button {
    border-radius: 3px;
    border: none;
    transition: all 0.3s;
}

button.edit {
    background: #6F9;
}

button.delete {
    background: #F69;
}


.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
    /* color: #0F8080; */
    border-radius: 8px;
    color: #ffffff;
    outline: none;
    background: linear-gradient(94deg, #2EBEBE 1.59%, #1E9D9D 47.86%, #0B7878 101.16%);
}

.form-workshop .radio-btn {
    color: #0F8080;
    padding: 10px;
    border-radius: 8px;
    border: none;
    outline: 2px dashed #0F8080;
    background-color: #DDF4F4;
    /* margin: 0.4rem; */
    width: 100%;
    font-size: 13px;
}

.search-box .radio-btn {
    color: #0F8080;
    padding: 10px;
    border-radius: 8px;
    border: none;
    outline: 1px dashed #0F8080;
    background-color: #DDF4F4;
    width: 100%;
    height: 50px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: center;
}

    .form-workshop .radio-btn:hover, .search-box .radio-btn:hover {
        color: #0a5e5e;
        background-color: #DDF4F4
    }

.form-workshop .btn-check + .form-workshop .btn:hover {
    color: #ffffff;
}

.form-workshop .form-check-label {
    color: #2B2F32;
    text-align: right;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.form-workshop p {
    color: #464646;
    text-align: justify;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

.empty {
    border-radius: 10px;
    padding: 35px;
}

    .empty h5 {
        font-size: 20px;
    }


.no-info {
    border-radius: 12px;
    padding: 35px;
    background-color: #f0f0f0;
    text-align: center;
}

    .no-info img {
        width: 100%;
    }

    .no-info h5 {
        font-size: 14px;
    }













/************** Personel for selecting workshop ***************/
.msg-select {
    padding: 10px;
    border-radius: 10px;
    outline: 2px dashed #0B7979;
    background: #DFFBFB;
    font-size: 12px;
}

.msg-note {
    padding: 5px;
    border-radius: 10px;
    background: #FFFFFF;
    font-size: 12px;
    color: #464646;
}

.bg-personal-workshop {
    border-radius: 10px;
    padding: 10px 20px;
    margin-bottom: 100px;
}

    .bg-personal-workshop .select-item {
        border-radius: 10px;
        outline: 2px dashed #097575;
        background: #ECFFFF;
        padding: 15px 10px;
        margin: 7px;
        height: 90%;
        transition: ease-in-out .3s;
    }

    .bg-personal-workshop .select-item2 {
        border-radius: 10px;
        outline: 1px solid #E8E8E8;
        background: #F9F9F9;
        padding: 15px 10px;
        margin: 7px;
        height: 90%;
        transition: ease-in-out .3s;
    }

    .bg-personal-workshop .select-item:hover {
        background: #cbfdfd;
    }

    .bg-personal-workshop .select-item2:hover {
        background: #ECFFFF;
        outline: 1px solid #097575;
    }

    .bg-personal-workshop .select-item h4,
    .bg-personal-workshop .select-item2 h4 {
        color: #444;
        text-align: right;
        font-size: 18px;
        font-weight: 700;
        line-height: 34px; /* 88.889% */
    }

    .bg-personal-workshop .select-item .emplyee-name span,
    .bg-personal-workshop .select-item2 .emplyee-name span {
        border-radius: 50px;
        background: rgba(87, 227, 227, 0.25);
        color: #5A5A5A;
        text-align: center;
        font-size: 10px;
        font-weight: 400;
        padding: 3px 9px;
        margin-left: 5px;
    }
    .avatars,
    .bg-personal-workshop .select-item .avatars,
    .bg-personal-workshop .select-item2 .avatars {
        display: flex;
        list-style-type: none;
        /* margin: auto; */
        /* padding: 0px; */
        padding: 0 0px 0 25px;
        flex-direction: row;
        z-index: 3;
    }

.avatars__item {
    background-color: #ECFFFF;
    border: 2px solid #ECFFFF;
    border-radius: 100%;
    color: #ffffff;
    display: block;
    font-size: 12px;
    font-weight: 100;
    height: 30px;
    width: 30px;
    /* line-height: 30px; */
    text-align: center;
    transition: margin 0.1s ease-in-out;
    overflow: hidden;
    /* margin-top: 10px; */
    margin-left: -15px;
}

.avatars__item:first-child,
.select-item .avatars__item:first-child,
.select-item2 .avatars__item:first-child {
    z-index: 60;
}

.avatars__item:nth-child(2),
.select-item .avatars__item:nth-child(2),
.select-item2 .avatars__item:nth-child(2) {
    z-index: 61;
}

.avatars__item:nth-child(3),
.select-item .avatars__item:nth-child(3),
.select-item2 .avatars__item:nth-child(3) {
    z-index: 62;
}

.avatars__item:nth-child(4),
.select-item .avatars__item:nth-child(4),
.select-item2 .avatars__item:nth-child(4) {
    z-index: 63;
}

.avatars__item:nth-child(5),
.select-item .avatars__item:nth-child(5),
.select-item2 .avatars__item:nth-child(5) {
    z-index: 64;
}

.avatars__item:nth-child(6),
.select-item .avatars__item:nth-child(6),
.select-item2 .avatars__item:nth-child(6) {
    z-index: 65;
}

.avatars__item:last-child,
.select-item .avatars__item:last-child,
.select-item2 .avatars__item:last-child {
    z-index: 66;
    border: 2px solid #D9D9D9;
    margin-right: 20px;
    color: #B7B7B7;
    align-items: center;
    display: flex;
}

.avatars__item img,
.select-item .avatars__item img,
.select-item2 .avatars__item img {
    width: 100%;
}
/* .select-item .avatars:hover .avatars__item {
    margin-right: 10px;
  } */

.select-item span a,
.select-item2 span a {
    color: #3B3B3B;
    text-align: right;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
}

.select-item .view-personsal,
.select-item2 .view-personsal {
    color: #00638E;
    stroke: #00638E;
    background-color: #34D1D14D;
    padding: 3px 5px;
    border-radius: 7px;
    transition: all .3s ease-in-out;
}

    .select-item .view-personsal:hover,
    .select-item2 .view-personsal:hover {
        color: #FFFFFF;
        stroke: #FFFFFF;
        background-color: #2ebebe;
    }

    .select-item .view-personsal span,
    .select-item2 .view-personsal span {
        font-size: 12px;
        font-weight: 400;
        white-space: nowrap;
        margin-right: 5px;
    }
/************** End Personel for selecting workshop ***************/




/************** Personel Modal Info & Printing ***************/
.personalInfoModal .modal-header {
    margin-bottom: 15px !important;
}

.personalInfoModal .info-personal {
    padding: 5px;
}

.personalInfoModal .modal-header img {
    width: 100%;
}

.personalInfoModal .info-personal img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    background: linear-gradient(39deg, #2DBEBE 5.7%, #0B7A7A 84.84%);
    margin-bottom: 10px;
}

.info-personal .info-name {
    margin: auto 20px auto 0;
}

    .info-personal .info-name h5 {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
        color: #000;
        text-align: right;
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
    }

    .info-personal .info-name span {
        color: #383838;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

.info-personal .info-personal-table {
    margin: 10px auto 0;
    /* border: 2px solid #E4E4E4;
    border-radius: 13px; */
}

    .info-personal .info-personal-table .title-personal {
        padding: 2px 7px;
        border-radius: 9px;
        border: 2px solid #E4E4E4;
        margin: 2px auto;
    }

        .info-personal .info-personal-table .title-personal span {
            color: #000;
            font-size: 12px;
            font-weight: 400;
            margin: 0 2px;
        }

.personalInfoModal .info-personal {
    padding: 5px;
}

.personalInfoModal .btn-primary, .personalInfoModal .btn-secondary {
    width: 100px;
    padding: 6px;
    font-size: 13px;
    border-radius: 6px;
}

/* .info-personal .info-personal-table .title-personal:nth-child(odd)
{
    border-bottom: 2px solid #E4E4E4;
    border-left: 2px solid #E4E4E4;
}

.info-personal .info-personal-table .title-personal:nth-child(even)
{
    border-bottom: 2px solid #E4E4E4;
}


.info-personal .info-personal-table .title-personal:last-child
{
    border: none;
} */

/************** End Personel Modal Info ***************/





/************** Search & Print ***************/
.search-box {
    border-radius: 10px;
    /*padding: 5px;*/
}

.search-box label{
    font-size:12px;
    font-weight:600;
}

.list-box .search-box {
    padding: 3px 0;
}

.search-box input[type="text"],
.search-box .form-select {
    border-radius: 7px;
    border: 1px solid #DADADA;
    background-color: #FFFFFF;
    padding: 6px;
    color: #797979;
    font-size: 12px;
    font-weight: 500;
    transition: ease .4s;
}


.search-box input[type="text"]:focus,
.search-box .form-select:focus {
    outline: none;
    border: 1px solid #8a8a8a;
    color: rgb(65, 65, 65);
    box-shadow: none;
}

.btn-search, .btn-view-all {
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 13px;
    color: #ffffff;
    text-align: center;
}

.btn-clear-filter {
    background-color: #FF8798;
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    transition: all ease-in-out .3s;
}

.btn-clear-filter:hover {
    background-color: #cb6977;
}

.btn-clear-filter span {
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    color: #ffffff;
}

.btn-w-size {
    width: 100px;
}

.search-box-workshop .search svg {
    position: absolute;
    top: 3px;
    left: 5px;
}

    .search-box-workshop .search {
        width: auto;
    }

    .search-box-workshop input[type="text"] {
        border-radius: 7px;
        border: 1px solid #DADADA;
        background: #F6F6F6;
        padding: 4px 6px;
        color: #3a3a3a;
        font-size: 12px;
        font-weight: 500;
        width: 250px;
        transition: ease .4s;
    }

        .search-box-workshop input[type="text"]:focus {
            outline: none;
            border: 1px solid #8a8a8a;
            color: rgb(65, 65, 65);
        }

    .search-box-workshop .btn-filter {
        border-radius: 7px;
        border: 1px solid #DADADA;
        background: #FFF;
        width: 80px;
        color: #797979;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        align-items: center;
        display: flex;
        justify-content: center;
    }



.btn-print-all {
    border-radius: 7px;
    /* padding: 6px 8px; */
    padding: 3px 7px;
    color: #000000;
    background-color: rgba(148, 163, 184, 0.30);
}

    .btn-print-all:hover {
        background-color: rgba(148, 163, 184, 0.60);
    }

.btn-search {
    background: #84CC16;
}

.btn-view-all {
    background: #0EA5E9;
}

.btn-search:hover {
    background: #71b112;
}

.btn-view-all:hover {
    background: #0b87c0;
}

.btn-search span, .btn-view-all span {
    color: #FFF;
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 184.615% */
    letter-spacing: -0.26px;
}

.btn-search span, .btn-view-all span {
    color: #FFF;
    text-align: center;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
}

.btn-print-all span {
    color: #1E293B;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}
/************** End Search & Print ***************/



/************** Login & Register Pages ***************/
.bg-login {
    height: 100vh;
    border-radius: 0px 35px 35px 0px;
    background-image: url('../images/login.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px;
    /* align-items: center; */
    /* display: flex; */
    justify-content: center;
}

.bg-register {
    height: 100vh;
    border-radius: 0px 35px 35px 0px;
    background-image: url('../images/login1.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 120px;
}

    .bg-login h4, .bg-register h4 {
        font-size: 30px;
        font-weight: 500;
        color: #005656;
    }

    .bg-login p, .bg-register p {
        font-size: 16px;
        font-weight: 400;
        color: #434343;
    }

.login {
    padding: 25px;
    /* height: 100vh; */
    /* align-items: center; */
    display: flex;
    justify-content: center;
}

    .login .custom-login .form-control {
        border-radius: 10px;
        border: 1px solid #C6C6C6;
        color: #464646;
        text-align: right;
        font-size: 14px;
        font-weight: 300;
        padding: 5px 15px;
        margin-bottom: 10px;
        background-color: #EAEAEA;
    }

    .login .custom-login .recover-pass {
        margin: 20px 10px;
    }

    .login .custom-login a,
    .login .custom-login button {
        color: #018E8E;
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        margin: 0 5px;
    }

    .login .custom-login p,
    #codeDiv p {
        font-size: 12px;
        font-weight: 400;
        color: #018E8E;
    }

    .login .custom-login .btn-login {
        border-radius: 5px;
        background: linear-gradient(91deg, #2EBFBF -7.13%, #0A7777 110.51%);
        color: #FFF;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        width: 60%;
        padding: 10px;
        margin: 10px 0;
    }

.bg-login button .next,
.bg-register button .next {
    padding: 10px;
    background: linear-gradient(91deg, #2AB8B8 -7.13%, #108282 110.51%);
    border-radius: 50%;
}

.otp {
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
}

 .otp .form-control {
    width: 40px;
    height: 40px;
    display: flex;
    padding: 3px;
    font-size: 12px;
    text-align: center;
    /* margin: 5px; */
    margin: 5px;
}

#timer {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.login .custom-login img {
    width: 250px;
    margin: 0 0 50px 0;
}


.login .custom-login {
    /* margin: 50px auto; */
    margin: auto;
    display: flex;
    flex-direction: column;
    /* justify-content: space-evenly; */
    align-items: center;
    width: 100%;
}

/************** End Login & Register Pages ***************/




.modal-title {
    color: #1F2937;
    font-weight: 600;
}


/* ********************************************** Profile Page ********************************************** */
.profile-header {
    width: 100%;
    height: 190px;
    background: linear-gradient(91deg, #2EC0C0 -7.13%, #00A7A7 110.51%);
    border-radius: 20px;
}

    .profile-header > img {
        position: absolute;
        top: 0;
        right: 0;
        object-fit: contain;
        object-position: center;
        height: auto;
        width: 100%;
    }


    .profile-header .profile-subheader {
        position: relative;
        border: 1px solid #ffffff;
        border-radius: 20px;
        /* height: 100px; */
        bottom: -125px;
        right: 0;
        width: 96%;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        padding: 20px 25px;
    }


        .profile-header .profile-subheader .profile-img {
            border: 1px solid #C4C4C4;
            border-radius: 15px;
            position: relative;
        }

            .profile-header .profile-subheader .profile-img img {
                border-radius: 15px;
                width: 80px;
                height: 80px;
            }

            .profile-header .profile-subheader .profile-img .edit-img {
                position: absolute;
                width: 30px;
                height: 30px;
                background-color: #ffffff;
                bottom: -10px;
                right: -10px;
                border-radius: 10px;
                box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
                align-items: center;
                display: flex;
                justify-content: center;
            }


        .profile-header .profile-subheader .profile-title {
            margin: auto 10px;
        }

            .profile-header .profile-subheader .profile-title h5 {
                color: #2D3748;
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 0;
            }

            .profile-header .profile-subheader .profile-title span {
                color: #718096;
                font-size: 13px;
                font-weight: 300;
            }


        .profile-header .profile-subheader .profile-btns button {
            border-radius: 15px;
            padding: 10px;
            background-color: #ffffff;
            box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
        }

            .profile-header .profile-subheader .profile-btns button span {
                color: #2D3748;
                font-size: 13px;
                font-weight: 400;
            }


.profilePasswordModal .modal-header h5 {
    font-size: 24px;
}

.profilePasswordModal .modal-body .form-control {
    font-size: 14px;
    border: 1px solid #C6C6C6;
    color: #424242;
    background-color: #F8F8F8;
    padding: 9px 13px;
    border-radius: 11px;
    font-weight: 400;
}

.profilePasswordModal .modal-body .strongPass span {
    width: 100%;
    height: 3px;
    background-color: #BEF264;
}


.profilePasswordModal .modal-footer {
    margin: 20px 0;
}

    .profilePasswordModal .modal-footer button {
        font-size: 14px;
        padding: 12px;
        border-radius: 6px;
    }

        .profilePasswordModal .modal-footer button.btn-secondary {
            background-color: #1F2937;
        }

        .profilePasswordModal .modal-footer button.btn-secondary {
            background-color: #1F2937;
        }



/* ********************************************** End Profile Page ********************************************** */


/* ********************************************** Start Week Section ********************************************** */
.weekDisplay {
    width: 100%;
    height: 150px;
    display: flex;
    /* grid-template-columns: repeat(7, 1fr); */
    justify-items: center;
    justify-content: center;
    margin: 30px 0 0 0;
}

.wDisplayDay {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 70px;
    border-radius: 70px;
    margin: 0 6px;
}

    .wDisplayDay.active {
        background-color: #01C696;
        color: #fff;
    }

    .wDisplayDay .dayNameX {
        padding: 30px 0 4px 0;
        font-size: 12px;
        font-weight: 600;
        color: #757575;
    }

    .wDisplayDay.active .dayNameX {
        color: #fff;
    }

    .wDisplayDay .dayNumY {
        font-size: 32px;
        font-weight: 600;
    }
/* ********************************************** End Week Section ********************************************** */

/* ********************************************** Start Time Section ********************************************** */
.clock {
    display: block;
    margin: auto;
    width: 100%;
    height: auto;
}

.clock__colon {
    animation: blink 1s cubic-bezier(0.77,0,0.18,1) infinite;
}

.clock__g {
    fill: hsl(189, 100%, 36%);
}

[data-digit],
[data-ampm] {
    transition: opacity 0.3s cubic-bezier(0.77,0,0.18,1);
}

[data-digit=" "],
[data-ampm=" "],
[data-digit="0"] polygon:nth-child(4),
[data-digit="1"] polygon:nth-child(1),
[data-digit="1"] polygon:nth-child(2),
[data-digit="1"] polygon:nth-child(4),
[data-digit="1"] polygon:nth-child(5),
[data-digit="1"] polygon:nth-child(7),
[data-digit="2"] polygon:nth-child(2),
[data-digit="2"] polygon:nth-child(6),
[data-digit="3"] polygon:nth-child(2),
[data-digit="3"] polygon:nth-child(5),
[data-digit="4"] polygon:nth-child(1),
[data-digit="4"] polygon:nth-child(5),
[data-digit="4"] polygon:nth-child(7),
[data-digit="5"] polygon:nth-child(3),
[data-digit="5"] polygon:nth-child(5),
[data-digit="6"] polygon:nth-child(3),
[data-digit="7"] polygon:nth-child(2),
[data-digit="7"] polygon:nth-child(4),
[data-digit="7"] polygon:nth-child(5),
[data-digit="7"] polygon:nth-child(7),
[data-digit="9"] polygon:nth-child(5),
[data-ampm="am"] text:nth-child(2),
[data-ampm="pm"] text:nth-child(1) {
    opacity: 0;
}

/* Animations */
@keyframes blink {
    from, to {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}
/* ********************************************** End Time Section ********************************************** */


/* ********************************************** Start Dashabaord Image Section ********************************************** */
.dashboard-image-section {
    position: relative;
}

    .dashboard-image-section img {
        height: 203px;
        object-fit: cover;
        width: 100%;
        border-radius: 12px;
    }

    .dashboard-image-section .overlay {
        position: absolute;
        height: 203px !important;
        background: linear-gradient(180deg, #007166 0%, rgba(0, 106, 97, 0.35) 100%);
        border-radius: 12px;
        backdrop-filter: blur(0);
        z-index: 4;
    }
/* ********************************************** End Dashabaord Image Section ********************************************** */


/* ********************************************** Start Loading Buttons Section ********************************************** */
.loading-buttons {
  display: inline-flex;
  flex-direction: column;
  margin-top: 1em;
}

.loading-buttons button {
  border-color: #004d00;
  background: green;
  margin: 0.25em 1em;
}

.loading-buttons button:active, .loading-buttons button:focus, .loading-buttons button:hover, .loading-buttons button.disabled {
  background: #004d00 !important;
  border-color: #004d00;
}

.loading-buttons button i.fa-file-word {
  padding-right: 0.5em;
}
/* ********************************************** End Loading Buttons Section ********************************************** */




/* ********************************************** Start Card ********************************************** */
.card-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
}

.card-description {
    font-size: 9px;
    color: #475569;
}
/* ********************************************** End Card ********************************************** */

/* ********************************************** Start skeleton ********************************************** */
.skeleton-loader {
    width: 100%;
    height: 25px;
    background: linear-gradient(90deg, var(--loader-background-color) 25%, var(--loader-highlight-color) 50%, var(--loader-background-color) 75%);
    background-size: 200% 100%;
    animation: loading 2s infinite ease-in-out;
    border-radius: 8px;
    margin-bottom: 10px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}
/* ********************************************** End skeleton ********************************************** */


/* ********************************************** Start Buttons ********************************************** */
button.btn-employee-reprot {
    border: 1px solid transparent;
    height: 30px;
    border-radius: 5px;
    padding: 3px 5px;
    color: #1E293B;
    margin: auto 0 auto 1px;
    background-color: rgba(148, 163, 184, 0.30);
    box-shadow: 0;
    transition: ease .2s;
}

    button.btn-employee-reprot:hover {
        color: #1E293B;
        background-color: rgba(148, 163, 184, 0.60);
    }

button.btn-employee-payment {
    border: 1px solid transparent;
    height: 30px;
    border-radius: 5px;
    padding: 3px 5px;
    color: #451A03;
    margin: auto 0 auto 1px;
    background-color: #FFEDD5;
    box-shadow: 0;
    transition: ease .2s;
}

    button.btn-employee-payment:hover {
        background-color: #F5DFC0;
    }
/* ********************************************** End Buttons ********************************************** */



/************************* Start Morakhasi *************************/
.form-morakhasi-estelaji h5 {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

.form-morakhasi-estelaji .input-group {
    border-radius: 10px;
    box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    border: 1px solid #23A8A8;
}

.form-morakhasi-estelaji .form-control {
    height: 35px;
    border-radius: 10px;
    margin: 0;
    padding-right: 5px;
}

.form-morakhasi-estelaji .input-group-text {
    background: #23A8A8;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 10px;
    font-weight: 400;
    border: none;
    width: 105px;
}

.btn-primary {
    width: 100%;
    height: 100%;
    border-radius: 5px !important;
    font-size: 12px;
    padding: 7px;
}


.form-morakhasi-estehghaghi h5 {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

.form-morakhasi-estehghaghi .input-group {
    border-radius: 10px;
    box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    border: 1px solid #23A8A8;
}

.form-morakhasi-estehghaghi .form-control {
    height: 35px;
    border-radius: 10px;
    margin: 0;
    padding-right: 5px;
}

.form-morakhasi-estehghaghi .input-group-text {
    background: #23A8A8;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 10px;
    font-weight: 400;
    border: none;
    width: 70px;
}

#morakhasiEstehghaghiModal .modal-footer .btn-primary {
    width: 100%;
    height: 100%;
    color: #ffffff;
}

.form-morakhasi-estelaji .form-check-input[type="radio"],
.form-morakhasi-estehghaghi .form-check-input[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    border-radius: 6px;
    margin: 0 10px;
    padding: 8px;
}

.form-morakhasi-estelaji .form-check-input:checked[type="radio"],
.form-morakhasi-estehghaghi .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    border-radius: 6px;
}

.form-morakhasi-estelaji .form-check-input[type="checkbox"],
.form-morakhasi-estehghaghi .form-check-input[type="checkbox"] {
    border-radius: 7px;
    padding: 10px;
    outline: none;
    border: 0px !important;
}

.form-morakhasi-estelaji label,
.form-morakhasi-estehghaghi label {
    font-size: 14px;
}

.form-morakhasi-estelaji .form-check-label,
.form-morakhasi-estehghaghi .form-check-label {
    font-size: 13px;
}

.form-morakhasi-estelaji .note,
.form-morakhasi-estehghaghi .note {
    font-size: 13px;
    font-weight: 400;
    color: #FF3A3A;
}

.form-morakhasi-estelaji textarea,
.form-morakhasi-estehghaghi textarea {
    border-radius: 10px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    resize: none;
}


.form-morakhasi-estehghaghi .blur {
    filter: blur(1px) grayscale(80%);
    opacity: 0.7;
}

.title-legend {
    right: 15px;
    top: 6px;
    background-color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 0 5px;
}
/************************* End Morakhasi *************************/

/************************* Start Leave Personal Mobile *************************/
.leaveDiv, .paymentDiv {
    padding: 10px;
    margin: 6px;
    background-color: #ffffff;
    color: #000;
    border-radius: 5px;
    font-size: 11px;
    font-weight:400;
}

.personal-paid-leave-mobile .btn-edit,
.personal-payment-mobile .btn-edit {
    margin: 5px 0;
    width: 100%;
    background-color: transparent;
    border: 1px solid #0EA5E9
}

.personal-paid-leave-mobile .btn-delete,
.personal-payment-mobile .btn-delete {
    margin: 5px 0;
    width: 100%;
    background-color: transparent;
    border: 1px solid #EF4444
}

.personal-paid-leave-mobile button.btn-edit span,
.personal-paid-leave-mobile button.btn-delete span,
.personal-payment-mobile button.btn-edit span,
.personal-payment-mobile button.btn-delete span {
    display: inline-flex;
}

.lineMobile {
    border-style: dashed;
    border-width: 1px;
    border-image: radial-gradient(#adadad, #F1F5F9) 1;
}
/************************* End Leave Personal Mobile *************************/

/************************* Start Leave Personal Mobile *************************/
.spinner-loading {
    width: 100%;
    background-color: #2ebdbdb8;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all .3s ease-in;
    z-index:5;
}

.spinner-loading-progress {
    width: 0%;
    background-color: #2ebdbdb8;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in;
    z-index: 5;
}
/************************* End Leave Personal Mobile *************************/

/************************* Start Button Card in Dashboard *************************/
.card-btn {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.card-btn .content {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 10px;
}

.card-btn .content .title-btn {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
}

.card-btn .content-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 10px;
}

.card-btn .content-bottom button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    margin: 0px 2px;
    border-radius: 30px;
    height: 40px;
    width: 40px;
}

.card-section-btn {
    border-radius: 10px;
    overflow: hidden;
}

.card-section-btn .content {
    display: flex;
    align-items: center;
}

.card-section-btn .btn {
    padding: 12px 10px;
    box-sizing: border-box;
    border-radius: 10px;
    width: 100%;
    text-align: center;
    transition: all .3s ease-in;
    border: 1px solid #179090;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-section-btn .btn-group .btn:first-child {
    border-radius: 0 10px 10px 0;
}

.card-section-btn .btn-group .btn:before {
    content: '';
    width: 90%;
    position: absolute;
    height: 6%;
    background: #2ab7b7;
    left: 5%;
    bottom: 0;
    border-radius: 50px 50px 0 0;
}

.card-section-btn .btn-group .btn:last-child {
    border-radius: 10px;
}

.card-section-btn .btn:hover {
    background: rgba(10, 119, 119, 0.1);
}

.card-section-btn .btn .btn-title {
    color: #179090;
    font-size: 16px;
    font-weight: 700;
}
/************************* End Button Card in Dashboard *************************/


/************************* Start Prevent Select *************************/
.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
/************************* End Prevent Select *************************/


/************************* Start Button *************************/
.btn-blue {
    background-color: #06b6d4;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px !important;
    transition: all .3s ease-in;
    cursor: pointer;
}

.btn-blue:hover {
    background-color: #0891b2;
}

.btn-gary {
    background-color: #94a3b8;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px !important;
    transition: all .3s ease-in;
    cursor: pointer;
}

.btn-gary:hover {
    background-color: #64748b;
}
/************************* End Button *************************/
.sweet-alert h2 {
    font-size: 22px !important;
}



.day-off-parent {
    width: 100%;
}

.day-off-title {
    color: #000000;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
}

.day-off-button-container {
    display: flex;
    justify-content: center;
    gap: 5px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    padding: 10px 4px;
}

.day-off-button {
    width: 42px;
    height: 22px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 8px;
}

.day-off-button__active {
    background-color: #148989;
    color: white;
    transition: all 0.3s ease-in-out;
}

    .day-off-button__active:hover {
        background-color: #106b6b;
    }

.day-off-button__diactive {
    border: 1px solid #f2c2c2;
    color: #4c4c4c;
    background-color: #fff3f3;
    transition: all 0.3s ease-in-out;
}

    .day-off-button__diactive:hover {
        background-color: #f7dbdb;
    }

.day-off-status-person {
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    padding: 10px 5px;
}

.day-off-status-person__item {
    font-weight: 500;
    font-size: 9px;
    color: #646464;
}

@media screen and (min-width: 431px) and (max-width: 767px) {
    .day-off-button {
        width: 55px;
        height: 22px;
        border-radius: 4px;
        font-weight: 500;
        font-size: 12px;
    }
    /* .day-off-status-person__item {
    font-weight: 500;
    font-size: 12px;
    color: #646464;
  } */
}

@media screen and (min-width: 768px) {
    .day-off-button-container {
        display: flex;
        justify-content: center;
        gap: 8px;
        border: 1px solid #d9d9d9;
        border-radius: 10px;
        padding: 10px 5px;
    }

    .day-off-button {
        width: 71px;
        height: 22px;
        border-radius: 4px;
        font-weight: 500;
        font-size: 12px;
    }

    .day-off-status-person__item {
        font-weight: 500;
        font-size: 14px;
        color: #646464;
    }
}

.custom-checkbox {
    /* Hide the default checkbox */
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid #cfd3d4;
    cursor: pointer;
    position: relative;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
}

    .custom-checkbox:checked {
        background-color: #23a8a8;
        border: 1px solid #ffffff !important;
        outline: 1px solid #23a8a8;
    }

        .custom-checkbox:checked::after {
            content: "";
            position: absolute;
            left: 6px;
            top: 2px;
            width: 6px;
            height: 12px;
            border: solid white;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }