/* XX-Large devices (larger desktops, 1400px and up) */
@media (max-width: 1400px) {
}

/* X-Large devices (desktops, 1366px and up) */
@media (min-width: 1366px) {

    .main-wrapper a div svg {
        width: 20px;
    }

    .profile-box {
        height: 40px;
        padding: 5px;
    }

    .dropdown button svg {
        width: 30px;
    }

    .dropdown button span {
        font-size: small;
    }


    .form-check-input[type="radio"], .form-check-input[type="checkbox"] {
        /* margin: 0 10px; */
    }


    /************************* Form *************************/

    /* form-haghighi */
    .form-haghighi .form-control,
    .form-hoghoghi .form-control {
        font-size: 12px;
    }

    .form-haghighi .input-group-text,
    .form-hoghoghi .input-group-text {
        width: 130px;
        font-size: 12px;
    }

    .form-workshop .form-control, .form-workshop .form-select {
        /* padding: 2px 5px; */
        font-size: 12px;
        /* margin: 5px !important; */
        /* height: auto; */
    }

    .form-workshop .input-group-text {
        width: 100px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 0;
        font-size: 12px;
        /* padding: 5px; */
    }

    .form-workshop p {
        font-size: 12px;
    }



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

    .form-personal .input-group-text {
        width: 90px;
        font-size: 12px;
    }

    .form-personal-step3 .input-group-text {
        width: 135px;
        font-size: 12px;
    }

    .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', serif;
            font-size: 13px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            /* margin: 0; */
        }

    .btn-primary, .btn-secondary {
        width: 200px;
        padding: 10px;
        font-size: 16px;
    }



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

    .line {
        width: 170px;
    }
}

/* X-Large devices (desktops, 1366px and up) */
@media (max-width: 1366px) {
    .sidebar-navigation .logo {
        width: 95px;
    }

    .sidebar-navigation {
        width: 280px;
        padding: 1rem !important;
    }

    .sidebar-navigation > .sidebar-menu > ul li {
        padding: 3px;
        margin: 3px 2px;
    }

    .sidebar-navigation > .sidebar-menu > ul li a {
        font-size: 12px;
        font-weight: 400;
    }

    .title {
        font-size: 16px;
        font-weight: 600;
    }

    .sub-title {
        font-size: 14px;
        font-weight: 600;
    }

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

    .inputGroup-sizing-gender label, .inputGroup-sizing-region label, .inputGroup-sizing-marriage label {
        margin-left: 5px !important;
        /* padding: 0.01rem 0.35rem; */
        font-size: 11px;
    }

    .card-title {
        font-size: 12px;
        font-weight: 500;
    }

    .imgP .img-fluid {
        max-width: 20%;
    }

    /* Progress Step */
    .step-progress h5 {
        width: 40px;
        height: 40px;
        font-size: 23px;
    }

    .step-progress::before {
        width: 40px;
        height: 40px;
    }

    .step-progress p {
        font-size: 11px;
        font-weight: 600;
    }

    .line {
        width: 120px;
    }
    /* End Progress Step */




    /* Form */


    .form-haghighi .input-group {
        height: 30px;
        width: 100%;
        border-radius: 6px;
    }

    .form-hoghoghi .input-group {
        height: auto;
        border-radius: 6px;
        width: 100%;
    }


    .form-workshop .input-group,
    .form-personal .input-group,
    .form-personal-step3 .input-group {
        height: 35px;
        width: 100%;
        border-radius: 6px;
    }


    .form-haghighi .form-control,
    .form-hoghoghi .form-control,
    .form-workshop .form-control, .form-workshop .form-select,
    .form-personal .form-control, .form-personal .form-select,
    .form-personal-step3 .form-control, .form-personal-step3 .form-select {
        border-radius: 5px;
        font-size: 11px;
        padding: 0 3px;
    }

    .form-haghighi .input-group-text,
    .form-hoghoghi .input-group-text {
        width: 110px;
        font-size: 10px;
    }
    /* .form-hoghoghi .input-group-text .description{
        height: auto;
    } */

    .form-workshop .input-group-text,
    .form-personal .input-group-text {
        width: 85px;
        font-size: 10px;
    }

    .form-personal-step3 .input-group-text {
        width: 110px;
        font-size: 10px;
    }

    .form-personal .note-modal {
        /* padding: 5px; */
    }

        .form-personal .note-modal p {
            font-size: 11px;
        }


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



    /* End Form */

    .btn-primary, .btn-secondary {
        width: 150px;
        padding: 10px;
        font-size: 14px;
    }


    .profilePasswordModal .modal-header h5 {
        font-size: 20px;
        font-weight: 500;
    }

    .profilePasswordModal .modal-body .form-control {
        font-size: 13px;
        /*margin: 0;*/
    }

    .profilePasswordModal .modal-footer button {
        font-size: 12px;
        padding: 8px;
    }


    .border-msg {
        background: #F04349;
        width: 300px;
        height: 3px;
        bottom: 0;
        backdrop-filter: blur(8px);
        right: 0;
    }

    
    /************************* Start Select Workshop from Employee *************************/
    .wp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wp-card .wp-content .wp-workshop-name {
        font-size: 13px;
    }

    .wp-card .wp-content span {
        font-size: 11px;
    }

    .wp-card .wp-card-chose {
        font-size: 12px;
        font-weight: 500;
    }

    .wp-card .wp-content img {
        font-weight: 700;
        font-size: 30px;
    }
    /************************* End Select Workshop from Employee *************************/
}


/* Large devices (desktops, 1200px and up) */
@media (min-width: 992px) {

    .sidebar-navigation > .sidebar-menu {
        display: block;
    }

    .sidebar-navigation > .sidebar-menu-mobile {
        display: none;
    }

    .sidebar-navigation > .sidebar-menu-mobile > ul {
        font-size: 13px;
        font-weight: 200;
    }

    .sidebar-navigation > .sidebar-menu-mobile > ul li {
        border-radius: 15px;
        border: 0.5px solid transparent;
    }

    .sidebar-navigation > .sidebar-menu-mobile > ul li a svg {
        width: 50px;
        height: 50px;
    }

    .sidebar-navigation > .sidebar-menu-mobile > ul li:hover {
        border: 0.5px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.15);
    }

    .sidebar-navigation.small {
        padding: 2rem 0.6rem !important;
        width: 80px;
        margin-right: 0;
        transition: ease .4s;
        transition-timing-function: cubic-bezier(0.9,0,1,1);
    }

    .sidebar-navigation.small .logo {
        padding: 0;
        width: 50px;
        height: 50px;
        text-align: center;
    }

    .sidebar-navigation.small > .sidebar-menu > ul li a span {
        display: none;
        transition: ease .4s;
        /* transition-timing-function: cubic-bezier(0.9,0,1,1); */
    }

    .sidebar-navigation.small > .sidebar-menu > ul li a .alert-number {
        display: flex;
        position: absolute;
        top: -15px;
        right: -9px;
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .sidebar-navigation.small > .sidebar-menu > ul li {
        border-radius: 50px;
        padding: 8px 0;
        margin: 6px auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .small .toggle {
        margin-right: 85px;
        transition: ease .4s;
    }

    .content-container.small {
        margin-right: 85px;
        transition: ease .4s;
    }
}


/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
    .sidebar-navigation {
        width: 280px;
        /* height: 100% !important; */
    }

    .sidebar-navigation > .sidebar-menu {
        display: none;
    }

    .sidebar-navigation > .sidebar-menu-mobile ul {
        font-size: 13px;
        font-weight: 200;
    }

    .sidebar-navigation > .sidebar-menu-mobile ul li {
        border-radius: 15px;
        margin: 1px 0;
        border: 0.5px solid transparent;
        transition: all .3s ease;
    }

    .sidebar-navigation > .sidebar-menu-mobile ul li a svg {
        width: 35px;
        height: 35px;
        stroke-width: 1.5px;
    }

    .sidebar-navigation > .sidebar-menu-mobile ul li:hover {
        border: 0.5px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.15);
    }

    .sidebar-navigation .sidebar-menu-mobile ul li.active {
        border: 0.5px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.15);
    }


    .header-left {
        display: none !important;
    }

    /* Sidebar Navigation Small  */
    .sidebar-navigation.small {
        padding: 0 !important;
        width: 0;
        right: 0;
    }

    .sidebar-navigation.small > .sidebar-menu-mobile {
        display: none !important;
    }

    .sidebar-navigation.small > .sidebar-menu-mobile > ul li a span {
        display: none;
    }

    .sidebar-navigation.small > .sidebar-menu-mobile > ul li {
        display: none;
    }

    .small .toggle {
        margin-right: 10px;
        transition: ease .4s;
    }

    .content-container {
        margin: 0 0 80px 0;
        transition: ease .4s;
    }

    .btn-primary, .btn-secondary {
        width: 140px;
        font-size: 13px;
        padding: 9px;
    }

    .form-check-inline {
        margin-left: 0.4rem;
    }

    .modal-dialog {
        /* max-width: 770px; */
    }

    .menu-bottom {
        border-top: 2px solid #097575;
        padding: 5px;
    }

    .menu-bottom div a span {
        font-size: 13px;
        color: #048e7f;
        font-weight: 500;
        display: block;
    }

    .menu-bottom div a .alert-number {
        font-size: 12px;
        position: absolute;
        background-color: #dd2a2a;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 40px;
        color: #fff;
        font-weight: 600;
        padding: 2px 0 0 0;
        top: -12px;
        left: -4px;
    }

    .menu-bottom div {
        border: 1px solid transparent;
        transition: ease .4s;
    }

/*.menu-bottom div:hover {
    color: #000000;
    background-color: rgba(0,0,0,0.04);
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.04);
}*/

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


    .modal-header .btn-close {
        width: 15px;
        height: 15px;
    }

        .modal-header .btn-close svg {
            width: 10px;
            height: 10px;
        }


    /************************* Form-haghighi & hoghoghi *************************/
    .form-haghighi .form-check-input:checked,
    .form-hoghoghi .form-check-input:checked {
        align-items: center;
        width: 5px;
        height: 5px;
    }

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

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

    .inputGroup-sizing-gender,
    .inputGroup-sizing-region,
    .inputGroup-sizing-marriage {
        padding: 3px;
        width: 100%;
        text-align: center !important;
    }

    /* form-haghighi */
    .form-haghighi .input-group,
    .form-hoghoghi .input-group,
    .form-workshop .input-group {
        height: auto !important;
    }

    .form-haghighi .input-group-text {
        width: 100%;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 0;
        font-size: 12px;
        padding: 5px;
    }

    /* form-hoghoghi */
    .form-haghighi .form-control,
    .form-hoghoghi .form-control {
        padding: 2px 5px;
        font-size: 12px;
        margin: 5px !important;
        height: auto;
        border-radius: 5px !important;
    }

    .form-hoghoghi .input-group-text {
        width: 100%;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 0;
        font-size: 12px;
        padding: 5px;
    }

    .form-hoghoghi .description {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 3px;
    }

    /* form-workshop */
    .form-workshop .form-control, .form-workshop .form-select {
        padding: 2px 5px;
        font-size: 12px;
        margin: 5px !important;
        height: auto;
        border-radius: 5px !important;
    }

    .form-workshop .input-group-text {
        width: 100%;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 0;
        font-size: 12px;
        padding: 5px;
    }


    .form-workshop p {
        font-size: 12px;
    }


    /* form-personal */
    .form-personal .input-group,
    .form-personal-step3 .input-group {
        height: auto;
        width: 100%;
    }

    .form-personal .form-control,
    .form-personal-step3 .form-control,
    .form-personal .form-select,
    .form-personal-step3 .form-select {
        padding: 2px 5px;
        font-size: 12px;
        margin: 5px !important;
        height: auto;
        border-radius: 5px !important;
    }

    .form-personal .input-group-text,
    .form-personal-step3 .input-group-text {
        width: 100%;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 0;
        font-size: 12px;
        padding: 5px;
    }

    /************************* End Form-haghighi & hoghoghi *************************/


    /* Progress Step */
    .step-progress h5 {
        width: 40px;
        height: 40px;
        font-size: 25px;
    }

    .step-progress::before {
        width: 40px;
        height: 40px;
    }

    .step-progress p {
        font-size: 11px;
        font-weight: 300;
    }

    .line {
        width: 80px;
    }
    /* End Progress Step */



    .form-personal #add_child {
        left: -20px;
        bottom: 13px;
    }





    /* ******************* Search Advance in Modal from bottom ******************* */
    #searchModal.modal .modal-content .modal-header h5 {
        color: #292929;
        text-align: right;
        font-size: 12px;
        font-weight: 600;
    }

    #searchModal.modal .modal-content .modal-header .iphone-line {
        width: 90px;
        height: 6px;
        border-radius: 30px;
        background: #909090;
    }

    #searchModal.modal .modal-body .search-box {
        padding: 0;
    }

        #searchModal.modal .modal-body .search-box .form-control {
            margin: 0 0 7px !important;
        }

        #searchModal.modal .modal-body .search-box input[type="text"],
        #searchModal.modal .modal-body .search-box .form-select {
            padding: 7px;
            border-radius: 7px !important;
        }

        #searchModal.modal .modal-body .search-box p {
            font-size: 13px;
        }

    #searchModal.modal .modal-content .modal-footer {
        border-top: 1px solid #D5D5D5;
        padding: 15px 0;
    }

    /* ******************* End Search Advance in Modal from bottom ******************* */


    /* ******************* Login and register ******************* */
    .bg-login, .bg-register {
        border-radius: 0;
        /* background-image: none;
        background-repeat: none;
        background-size: none; */
        padding: 0 30px 70px 30px;
        align-items: end;
        justify-content: start;
        display: flex;
        font-size: 12px !important;
        /* height: 30vh; */
        height: 100vh;
        /* margin: 15px 0 0; */
    }


    .login .custom-login .form-control {
        margin: 10px 5px;
        border-radius: 8px;
        font-size: 12px !important;
    }

    .bg-login h4, .bg-register h4 {
        padding: 20px 0;
        align-items: end;
        display: flex;
        font-size: 20px !important;
        font-weight: 600;
        height: 100vh;
        margin: 15px 0 0;
    }

    .bg-login p, .bg-register p {
        text-align: justify;
        font-size: 14px;
        font-weight: 400;
    }

    .login {
        align-items: center;
        height: 100vh;
    }

    .login .custom-login p,
    #codeDiv p {
        text-align: center;
        font-size: 12px;
        margin: 2px;
    }

    .otp .form-control {
        padding: 3px;
        font-size: 12px;
        text-align: center;
        margin: 5px;
    }

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

    .login .custom-login .btn-login {
    }

    /* ******************* End Login and register ******************* */


    /************** Personel Modal Info ***************/
    .info-personal img {
        width: 60px;
        height: 60px;
    }

    .info-personal .info-name h5 {
        font-size: 14px;
        font-weight: 400;
    }

    .info-personal .info-name span {
        font-size: 10px;
        font-weight: 300;
    }

    .info-personal .info-personal-table .title-personal {
        padding: 1px 3px;
    }

        .info-personal .info-personal-table .title-personal span {
            font-size: 11px;
            font-weight: 300;
        }

    .info-personal {
        padding: 0px;
    }

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


    /************** form contract ***************/
    .form-contract-step2 .form-control,
    .form-contract-step3 .form-control
    .form-contract .form-select,
    .form-contract-step3 .form-select {
        width: 100%;
        border-radius: 8px !important;
        font-size: 10px;
        margin: 3px !important;
    }

    .form-contract-step2 .input-group-text,
    .form-contract-step3 .input-group-text {
        width: 100%;
        font-size: 11px;
        font-weight: 400;
    }
    /************** End form contract ***************/


    /************** Background Pages ***************/
    .empty {
        border-radius: 10px;
        position: fixed;
        height: 90vh;
        right: 0;
        /* bottom: 0; */
    }

    .bg-personal-workshop {
        border-radius: 15px;
        /* position: fixed;
        height: 90vh; */
    }
    /************** End Background Pages ***************/

    /************************* Start Select Workshop from Employee *************************/
    .wp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 8px;
    }
    /************************* End Select Workshop from Employee *************************/

    .sticky-div {
        top: 48px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 767px) {
    .workshopName {
        width: 300px;
    }

    .title {
        font-size: 15px;
        font-weight: 600;
    }

    .sub-title {
        font-size: 12px;
        font-weight: 600;
    }

    .select-box h1 {
        text-align: right;
        font-size: 18px;
        font-weight: 600;
        margin-top: 10px;
    }

    .select-box div img {
        width: 60px;
    }

    .select-box div svg {
        width: 60px;
    }

    .select-box p {
        font-size: 15px;
        font-weight: 400;
    }

    .list-box {
        padding: 4px 10px;
    }


    .search-box-workshop .search {
        width: 100%;
    }

    .search-box-workshop input[type="text"] {
        width: 100%;
    }

    /* Table Responsive
    ==================================== */

    .is-striped {
        background-color: rgb(114, 20, 20);
    }

    .Rtable--collapse {
        display: block;
        width: 100%;
        box-shadow: none;
        border: 0 solid white;
        /* padding: 5px 10px; */
        /* padding: 0 5px 10px; */
    }

        .Rtable--collapse .Rtable-row {
            box-sizing: border-box;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            margin: 10px 0px 0;
            /* box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); */
            border: 0;
            padding: 1em;
            overflow: hidden;
            outline: 1.8px dashed #097575;
        }

            .Rtable--collapse .Rtable-row:first-child {
                margin-top: 5px;
            }

            .Rtable--collapse .Rtable-row .Rtable-cell {
                /* width: 100% !important; */
                display: flex;
                align-items: center;
                border-bottom: 0.5px dashed #CACACA;
            }

    .Rtable .Rtable-row .Rtable-cell {
        padding: 0.4em;
    }

    .Rtable--collapse .Rtable-row .Rtable-cell:last-child {
        border-bottom: none;
    }

    .Rtable--collapse .Rtable-row .Rtable-cell .Rtable-cell--heading {
        display: inline-block;
        flex: 1;
        /* max-width: 120px;
        min-width: 120px; */
        color: #0B5959;
        font-size: 12px;
        font-weight: bold;
        /* border-right: 1px solid #ccc; */
        /* margin-right: 1em; */
    }

    .Rtable--collapse .Rtable-row .Rtable-cell .Rtable-cell--content {
        flex: 2;
        /* padding-left: 1em; */
        color: #0B5959;
        font-size: 12px;
        text-align: end;
    }

    .Rtable--collapse .Rtable-row .Rtable-cell:last-child .Rtable-cell--content {
        text-align: center
    }

    .Rtable--collapse .topic-cell {
        background-color: #43bac0;
        color: white;
        font-weight: 400;
        order: -1;
    }

        .Rtable--collapse .topic-cell .Rtable-cell--content {
            padding-left: 0 !important;
        }

    .Rtable--collapse .Rtable-row--head {
        display: none;
    }



    .table-personals .Rtable--collapse .Rtable-row, .table-personals .Rtable .Rtable-row {
        display: block;
        padding: 0.2em;
    }

    .table-personals .Rtable .Rtable-row {
        background: #ECFFFF !important;
    }


        .table-personals .Rtable .Rtable-row .Rtable-personal {
            padding: 3px 10px;
            margin: 0 auto;
        }


            .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--heading img {
                width: 50px;
                border-radius: 5px;
                border: 4px solid rgba(87, 227, 227, 0.25);
            }

            .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--heading span {
                color: #0B5959;
                text-align: center;
                font-size: 13px;
                font-style: normal;
                font-weight: 500;
            }


            .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content:last-child {
                border-right: 1px dashed #CACACA;
                padding-right: 10px;
                display: flex;
            }



            /* Buttons */
            .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-edit {
                border: 1px solid transparent;
                width: 30px;
                height: 30px;
                border-radius: 3px;
                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;
            }

                .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-edit svg {
                    color: #009EE2;
                }

                .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-edit:hover {
                    color: #ffffff;
                    /* background-color: #009EE2; */
                    background-color: rgba(52, 209, 209, 0.40);
                }

                    .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-edit:hover svg {
                        color: #009EE2;
                    }

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

                .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-delete svg {
                    color: #FF5151;
                }

                .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-delete:hover {
                    color: #ffffff;
                    /* background-color: #FF5151; */
                    background-color: rgba(209, 50, 50, 0.25);
                }

                    .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-delete:hover svg {
                        color: #FF5151;
                    }

                .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-edit span,
                .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-delete span {
                    display: none;
                }

            .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content 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; */
                margin: 2px 3px;
                /* display: flex !important; */
            }

                .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-more span {
                    text-align: center;
                    margin: 0 auto !important;
                    display: flex !important;
                }


    /* ********************************************** Table Personal List ********************************************** */
    .personalListModal .personal-list .Rtable--collapse .Rtable-row {
        padding: 4px 10px;
        outline: none;
        margin: 0.3em 0;
    }

    .personalListModal .personal-list .Rtable--collapse .Rtable-row--head {
        display: flex;
    }

    .personalListModal .personal-list .width1 {
        width: 10%;
        font-size: 11px;
    }

    .personalListModal .personal-list .width2 {
        font-size: 11px;
    }

    .personalListModal .personal-list .width3,
    .personalListModal .personal-list .width3 .Rtable-cell--content {
        width: 40%;
        font-size: 11px;
    }

    .personalListModal .personal-list .width4,
    .personalListModal .personal-list .width4 .Rtable-cell--content {
        width: 20%;
        display: flex;
        justify-content: center;
        font-size: 11px;
    }

    .personalListModal .personal-list .width5 {
        width: 20%;
        display: flex;
        justify-content: center;
        font-size: 11px;
    }

    .personalListModal .personal-list .Rtable .Rtable-row .Rtable-cell,
    .personalListModal .personal-list .Rtable--collapse .Rtable-row .Rtable-cell {
        padding: 0;
        border: none;
    }

        .personalListModal .personal-list .Rtable--collapse .Rtable-row .Rtable-cell .Rtable-cell--content {
            text-align: right;
        }

            .personalListModal .personal-list .Rtable--collapse .Rtable-row .Rtable-cell .Rtable-cell--content:nth-last-child(4) {
                text-align: center;
            }

        .personalListModal .personal-list .Rtable--collapse .Rtable-row .Rtable-cell:nth-last-child(4) .Rtable-cell--content,
        .personalListModal .personal-list .Rtable--collapse .Rtable-row .Rtable-cell:last-child .Rtable-cell--content {
            text-align: center;
        }
    /* ********************************************** End Table Personal List ********************************************** */




    /* ordanary btn for workshop & haghighi & hoghoghi */
    .Rtable .Rtable-row .Rtable-cell button.btn-edit {
        width: 50%;
        padding: 7px 12px;
        background-color: #009EE2;
        margin: auto 0 auto 4px;
        color: #ffffff;
        height: auto;
    }

    .Rtable .Rtable-row .Rtable-cell button.btn-delete {
        width: 50%;
        border-radius: 3px;
        padding: 7px 12px;
        background-color: #FF5151;
        margin: auto 4px auto 0;
        color: #ffffff;
        height: auto;
    }

        .Rtable .Rtable-row .Rtable-cell button.btn-edit span, .Rtable .Rtable-row .Rtable-cell button.btn-delete span, button.btn-more span {
            display: inline-block;
        }

        .Rtable .Rtable-row .Rtable-cell button.btn-edit svg, .Rtable .Rtable-row .Rtable-cell button.btn-delete svg {
            color: #ffffff;
        }

        .Rtable .Rtable-row .Rtable-cell button.btn-edit:hover svg, .Rtable .Rtable-row .Rtable-cell button.btn-delete:hover svg {
            color: #ffffff;
        }

    .Rtable .Rtable-row .Rtable-cell button.btn-more {
        width: 50%;
        padding: 8px 12px;
        margin: auto 0 auto 4px;
        /* color: #ffffff; */
        text-align: center;
        height: auto;
    }





    /* **************************** Contract Table ************************* */
    .table-contracts .Rtable--collapse .Rtable-row {
        padding: 0.7em;
    }

    .table-contracts .Rtable .Rtable-row .Rtable-contract .checkbox-responsive {
        border-radius: 7px;
        background: #57E3E340;
        width: 70px;
        height: 45px;
        font-weight: 400;
    }


    .table-insurance .Rtable .Rtable-row .Rtable-insurance .checkbox-responsive span {
        border-radius: 7px;
        background: #57E3E340;
        width: 35px;
        height: 35px;
        font-weight: 400;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .table-insurance .Rtable .Rtable-row .Rtable-insurance .checkbox-responsive > span {
        font-size: 20px;
        font-weight: 500;
        margin-left: 8px;
    }

    .table-insurance .Rtable .Rtable-row .Rtable-insurance .Rtable-cell--heading {
        font-size: 12px;
        font-weight: 600;
        /* margin-left: 8px; */
    }

        .table-insurance .Rtable .Rtable-row .Rtable-insurance .Rtable-cell--heading span {
            font-size: 10px;
            font-weight: 300;
            margin-left: 8px;
        }

    .table-insurance .Rtable .Rtable-row .Rtable-insurance .Rtable-cell--content {
        font-size: 14px;
        font-weight: 500;
        /* margin-left: 8px; */
        padding: 0 10px 0 0;
        border-right: 1px dashed #CACACA;
    }

        .table-insurance .Rtable .Rtable-row .Rtable-insurance .Rtable-cell--content:last-child {
            border-right: none;
        }

    .table-contracts .Rtable .Rtable-row .Rtable-contract .checkbox-responsive > span {
        font-size: 25px;
        font-weight: 500;
    }

    .table-contracts .Rtable .Rtable-row .Rtable-contract .checkbox-responsive input {
        font-size: 20px;
        font-weight: 500;
    }

    .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--heading span {
        font-weight: 300;
        font-size: 11px;
    }

    .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--heading {
        padding: 0 10px;
        border-right: 1px dashed #CACACA;
    }

        .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--heading button.btn-print {
            width: 40px;
            height: 40px;
            border-radius: 8px;
        }

    .table-contracts .select-all label {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }
    /* **************************** End Contract Table ************************* */


    /* End Buttons */

    .number {
        display: block;
        right: -30px;
        top: -50px;
        font-size: 200px;
        color: rgba(0,0,0,0.07);
        text-align: right;
        white-space: nowrap;
        /* width: 50px;  */
        overflow: hidden;
        text-overflow: clip;
        /* border: 1px solid #000000; */
    }

    /* Progress Step */
    .step-progress p {
        font-size: 10px;
        font-weight: 200;
    }
    /* End Progress Step */
    /* ====================================
    End Table Responsive */

    .important-note p {
        font-size: 11px;
        font-weight: 300;
    }

    /* form-contract */
    .form-contract .form-contract-mini {
        border-radius: 9px;
        border: 2px solid #199494;
        box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.10);
        margin: 5px auto;
        padding: 5px;
    }

    .form-contract .add-btn {
        width: 130px;
        height: 30px;
        text-align: center;
        background-color: #84CC16;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        font-size: 13px;
    }

    .form-contract .btn-primary {
        display: none;
    }
    /* End form-contract */


    /* Profile Page */
    .profile-header {
        height: 170px;
    }

        .profile-header > img {
            height: 100%;
        }

        .profile-header .profile-subheader {
            position: relative;
            border: 1px solid #ffffff;
            border-radius: 20px;
            /* height: 100px; */
            bottom: -105px;
        }

            .profile-header .profile-subheader .profile-title h5 {
                font-size: 14px;
                font-weight: 300;
                margin-bottom: 5px;
            }

            .profile-header .profile-subheader .profile-title span {
                font-size: 11px;
            }

            .profile-header .profile-subheader .profile-btns button {
                position: absolute;
                top: -95px;
                left: -10px;
                /* padding: 10px 15px; */
                /* border-radius: 12px; */
            }

                .profile-header .profile-subheader .profile-btns button span {
                    font-size: 11px;
                }
    /* End Profile Page */
}

@media all and (max-width: 750px) {
}


/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    .card {
        padding: 3px 0px;
    }

    .card-title {
        font-size: 12px;
        font-weight: 500;
    }

    .imgP .img-fluid {
        max-width: 20%;
    }

    h3 {
        font-size: 17px;
        font-weight: 500;
    }

    h5 {
        font-size: 14px;
        font-weight: 400;
    }

    .sidebar-navigation .sidebar-menu-mobile > ul li a svg {
        width: 40px;
        height: 40px;
    }

    /* .modal-content label{
        font-size: 12px;
    } */

    .btn-primary, .btn-secondary {
        width: 130px;
        font-size: 12px;
        padding: 7px;
    }

    .form-check-inline {
        margin-left: 0.3rem;
    }

    .form-check-custom {
        /* display: flex !important; */
    }

    .select-box h1 {
        text-align: right;
        font-size: 18px;
        font-weight: 600;
    }

    .select-box div img, .select-box div svg {
        width: 55px;
    }

    .select-box p {
        font-size: 14px;
        font-weight: 400;
    }

    .alert-note button {
        margin: 5px auto;
        font-size: 12px;
    }


    .inputGroup-sizing-gender, .inputGroup-sizing-region, .inputGroup-sizing-marriage {
        padding: 3px;
        width: 100%;
        text-align: center !important;
    }

        .inputGroup-sizing-gender label, .inputGroup-sizing-region label, .inputGroup-sizing-marriage label {
            margin-left: 12px;
            font-size: 11px;
        }

    .form-control {
        margin: 10px 0;
        border-radius: 5px;
    }


    .input-group-text {
        display: inline-block;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 0;
        font-size: 12px;
        font-weight: 200;
        padding: 5px;
        height: auto;
        width: 100%;
    }

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


    .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content:last-child {
        border-right: none;
    }

    .title {
        font-size: 13px;
        font-weight: 600;
    }

    .sub-title {
        font-size: 10px;
        font-weight: 600;
    }

    .register-btn svg {
        width: 20px;
    }

    .btn-search span, .btn-view-all span {
        font-size: 10px;
    }

    .btn-search svg, .btn-view-all svg {
        width: 20px;
    }

    .register-btn span {
        font-size: 11px;
        font-weight: 400;
    }

    .back-btn span {
        font-size: 11px;
        font-weight: 300;
    }

    /* Progress Step */
    .step-progress p {
        font-size: 10px;
        font-weight: 500;
    }

    .line {
        width: 65px;
    }
    /* End Progress Step */

    .bg-personal-workshop .select-item h4 {
        font-size: 16px;
        font-weight: 400;
    }


    /* **************************** Contract Table ************************* */
    .table-contracts .Rtable--collapse .Rtable-row {
        padding: 0.7em;
    }

    .table-contracts .Rtable .Rtable-row .Rtable-contract .checkbox-responsive {
        width: 45px;
        height: 35px;
        padding: 0 5px;
        margin-left: 10px !important;
        font-weight: 300;
    }

        .table-contracts .Rtable .Rtable-row .Rtable-contract .checkbox-responsive > span {
            font-size: 18px;
            font-weight: 300;
        }

        .table-contracts .Rtable .Rtable-row .Rtable-contract .checkbox-responsive input {
            font-size: 10px;
            font-weight: 300;
            margin-left: 5px !important;
        }

    .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--heading span,
    .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--content {
        font-weight: 300;
        font-size: 11px;
    }

    .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--heading {
        padding: 0 8px;
        border-right: 1px dashed #CACACA;
        font-weight: 300;
        font-size: 12px;
    }

        .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--heading button.btn-print {
            width: 30px;
            height: 30px;
        }
    /* **************************** End Contract Table ************************* */


    .weekDisplay {
        height: 120px;
        margin: 0 0 0 0;
    }

    .wDisplayDay {
        width: 45px;
        margin: 0 7px;
    }

    .wDisplayDay:first-child,
    .wDisplayDay:last-child{
        display: none;
    }

    .wDisplayDay .dayNameX {
        font-size: 10px;
    }

    .wDisplayDay .dayNumY {
        font-size: 24px;
    }

    /************************* Start Select Workshop from Employee *************************/
    .wp-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    /************************* End Select Workshop from Employee *************************/

    .sweet-alert h2 {
        font-size: 18px !important;
    }
    .sweet-alert button {
        font-size: 13px !important;
    }

}

/* 
    X-Small devices (portrait phones, less than 576px)
    No media query for `xs` since this is the default in Bootstrap 
*/
@media (max-width: 416px) {
    .sidebar-navigation .sidebar-menu-mobile > ul li a svg {
        width: 40px;
        height: 40px;
    }

    .inputGroup-sizing-gender label, .inputGroup-sizing-region label, .inputGroup-sizing-marriage label {
        margin-left: 7px;
        font-size: 9px;
    }

    .select-box h1 {
        text-align: right;
        font-size: 17px;
        font-weight: 500;
    }

    .register-btn span {
        font-size: 10px;
        font-weight: 300;
    }

    .back-btn span {
        font-size: 10px;
        font-weight: 300;
    }

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

    .card-section-btn .btn .btn-title {
        font-size: 14px;
        font-weight: 800;
    }
}