@import url("https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:900");
/**===== Main =====**/
*{
    box-sizing: border-box;
}
html{
    height: 100%;
    width: 100%;
}
html,body{
    margin: 0;
    padding: 0;
    width: 100%;
    --masterFont: "Heebo","cairo", sans-serif;
    --secFont: "Bebas Neue", sans-serif;
    --signFont: "Yellowtail", cursive;
    --sign2Font: "Great Vibes", cursive;
    --logFont: "IBM Plex Mono", monospace;
    background-color: var(--bgColor)!important;
}
.light_theme{
    --masterColor: #a90514;
    --secColor: #ffffff;
    --mainShadow: 1px 4px 16px 0 rgb(155 154 154 / 61%);
    --bgColor: #e0e0e0;
    --secBGColor: #000;
    --btnHoverColor: #820410;
    --borderColor: #a90514;
    --textColor: #000;
    --secTextColor: #fff;
    --inputBGColor: #e0e0e0;
    --inputTextColor:#000;
    --inputBorderColor: #a90514;
    --inputFocusColor:#000;
    --loginLogo: invert(100%);
    --iconColor: #000;
    --pendingColor: #604c03;;
    --pendingColorlight: #C59A00;
    --modalBG: #fefefe;
}
.dark_theme{
    --masterColor: #0d6efd;
    --secColor: #111217;
    --bgColor: #101012;
    --secBGColor: #fff;
    --btnHoverColor: #0b56c2;
    --borderColor: #26272f;
    --textColor: #d3d3da;
    --inputTextColor: #9a9cae;
    --headingColor: #f5f5f5;
    --headingColorHover: #9a9cae;
    --inputBGColor: #1f212a;
    --inputBorderColor: #464852;
    --inputFocusColor:#fff;
    --loginLogo: invert(0%);
    --iconColor: #636674;
    --iconHover:#1b1c22;
    --boxColor: #1c1d22;
    --menuHover: #1b1c22;
    --sideMenuTextColor: #9a9cae;
    --successColor: #00a261;
    --successColorlight: #1F212A;
    --dangerColor: #e42855;
    --dangerColorlight: #302024;
    --pendingColor: #C59A00;
    --pendingColorlight: #242320;
    --infoColor: #883FFF;
    --infoColorlight: #272134;
    --processColor: #006AE6;
    --processColorlight: #172331;
    --gray100: #1b1c22;
    --gray200: #26272f;
    --gray500: #636674;
    --gray600: #808290;
    --modalBG: #15171c;
    --modalSaveBG: rgba(27,28,34,0.9);
    --chatMsgR: #272134;
    --chatMsgS: #172331;
    --titleBG: #a90514;
    --checkbox-bg: #dbeafe;
    --checkbox-border: #93c5fd;
}
/**===== Loading =====**/
#loading{
    background-color: var(--bgColor);
    z-index: 1000;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.sys_loading_line{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5px;
    width: 120px;
    border-radius: calc(5px / 2);
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}
.sys_loading_line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--secBGColor);
    opacity: 0.1;
}
.sys_loading_line::after {
    content: '';
    height: 100%;
    width: 100%;
    border-radius: calc(5px / 2);
    animation: wobble_s 1.55s ease-in-out infinite;
    transform: translateX(-90%);
    background-color: var(--masterColor);
}
.sys_loading_text{
    font-family: var(--masterFont);
    color: var(--textColor);
    font-size: 25px;
}
@keyframes wobble_s {
    0%,
    100% {
        transform: translateX(-90%);
    }

    50% {
        transform: translateX(90%);
    }
}
/**===== ScrollBar =====**/
::-webkit-scrollbar {
    width: 5px;
    border-radius: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bgColor);
}
::-webkit-scrollbar-thumb {
    background: var(--masterColor);
}
/**===== Global Class =====**/
.primary_clr{
    color: var(--masterColor) !important;
}
.w_fc{
    width: fit-content;
}
.w_full{
    width: 100% !important;
}
.h_full{
    min-height: 100% !important;
}
.mr_0{
    margin-right: 0 !important;
}
.mr_5{
    margin-right: 5px !important;
}
.mt_10{
    margin-top: 10px !important;
}
.ml_auto{
    margin-left: auto !important;
}
.fs_18{
    font-size: 18px !important;
}
.fs_20{
    font-size: 20px !important;
}
.fs_26{
    font-size: 26px !important;
}
.wh_pl{
    white-space: pre-line;
}
.h_75vh{
    height: 75vh !important;
}
.lh_0{
    line-height: 0 !important;
}
.dir_rtl{
    direction: rtl !important;
}
.custom_hr{
    width: 100% !important;
    color: var(--gray500);
    height: 1px;
    border-bottom: 1px dashed var(--gray500);
    margin-bottom: 15px;
}
.txt_up{
    text-transform: uppercase !important;
}
mark{
    background-color: var(--masterColor) !important;
    color: var(--headingColor) !important;
    padding: 0 !important;
    display: inline-block;
}
.danger_btn{
    background-color: var(--dangerColor) !important;
}
.vertical_center{
    display: flex;
    align-items: center;
    max-height: 100%;
    min-height: 100vh;
    justify-content: center;
}
.vc_flex_dir{
    flex-direction: column;
}
.vc_75{
    min-height: 75vh!important;
}
.vc_60{
    min-height: 60vh!important;
}
input[type=checkbox] {
    visibility: hidden;
}
::-webkit-calendar-picker-indicator {
    filter: invert(1);
}
/**===== Dashboard =====**/
/*Disk Usage*/
.disk_chart_list ul{
    padding: 0;
    list-style: none;
}
.disk_chart_list ul li{
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}
.chart_data .chart_dot{
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 10px;
    border-radius: 3px;
}
.chart_dot.success_dot{
    background-color: var(--successColor);
}
.chart_dot.danger_dot{
    background-color: var(--dangerColor);
}
.chart_dot.pending_dot{
    background-color: var(--pendingColor);
}
.chart_dot.process_dot{
    background-color: var(--processColor);
}
.chart_data .chart_title{
    font-family: var(--masterFont);
    color: var(--headingColor);
    font-weight: 500;
}
.chart_value .chart_num{
    font-family: var(--masterFont);
    color: var(--gray600);
    font-weight: 700;
}
/*alert*/
.alert_msg_pending{
    padding: 10px;
    background-color: var(--pendingColorlight);
    border-radius: 10px;
    border: 1px dashed var(--pendingColor);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.alert_body{
    display: flex;
    align-items: center;
}
.alert_msg_pending_btn{
    border: 0;
    font-family: var(--masterFont);
    background: var(--pendingColor);
    padding: 5px 15px;
    border-radius: 5px;
    color: var(--headingColor);
    font-weight: 700;
    opacity: 0.8;
    transition: all ease 0.2s;
}
.alert_msg_pending_btn:hover{
    opacity: 1;
}
.alert_msg_danger{
    padding: 10px;
    background-color: var(--dangerColorlight);
    border-radius: 10px;
    border: 1px dashed var(--dangerColor);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.alert_msg_danger .alert_icon{
    color: var(--dangerColor);
    font-size: 30px;
    width: 50px;
    text-align: center;
    height: 50px;
}
.alert_msg_pending .alert_icon{
    color: var(--pendingColor);
    font-size: 30px;
    width: 50px;
    text-align: center;
    height: 50px;
}
.alert_msg{
    color: var(--headingColor);
    font-weight: 700;
    font-family: var(--masterFont);
    font-size: 16px;
}
/*devices*/
.devices_count_box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.devices_logo{
    font-size: 60px;
}
.devices_count{
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-weight: 700;
    font-size: 60px;
    line-height: 1;
}
.devices_title{
    color: var(--gray500);
    font-family: var(--masterFont);
}
/**===== Modal =====**/
.sys_modal_alert_error, .sys_custom_modal{
    background-color: var(--modalBG)!important;
}
.custom_modal_body{
    padding: 50px 40px !important;
    text-align: center;
}
.sys_modal_label{
    font-family: var(--masterFont);
    color: var(--headingColor);
    width: 100%;
    margin-bottom: 8px;
}
.save_modal_screen{
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--modalSaveBG);
    z-index: 1500;
    flex-direction: column;
    display: none;
}
.save_modal_screen h6{
    margin-top: 10px;
}
.sys_modal_label .optional_msg{
    font-family: var(--masterFont);
    font-size: 12px;
    color: var(--iconColor);
}
.label_info{
    margin-left: 5px;
    font-size: 12px;
    color: var(--iconColor);
}
.sys_custom_tooltip{
    --bs-tooltip-bg: var(--gray200) !important;
    --bs-tooltip-color: var(--inputTextColor) !important;
}
.custom_modal_body .modal_title{
    font-family: var(--masterFont);
    color: var(--headingColor);
    margin: 0;
}
.modal_title strong{
    color: var(--masterColor);
    text-transform: capitalize;
}
.label_req:after{
    content: "*";
    margin-left: 4px;
    color: var(--dangerColor);
}
.label_verify{
    margin-left: auto;
}
.label_danger{
    color: var(--dangerColor);
}
.label_success{
    color: var(--successColor);
}
.modal_title_msg{
    font-family: var(--masterFont);
    color: var(--iconColor);
}
.sys_modal_input{
    width: 100%;
    padding: 10px 15px;
    border: 0;
    border-radius: 50px;
    margin-bottom: 20px;
    background: var(--gray100);
    font-family: var(--masterFont);
    color: var(--inputTextColor);
    outline: none;
    transition: all 0.2s ease-in-out;
    min-height: 50px;
}
.sys_modal_input:focus,
.sys_modal_input:active{
    background: var(--gray200);
    color: var(--headingColor);
}
.sys_modal_close_btn,
.sys_modal_del_btn,
.sys_modal_pending_btn,
.sys_modal_success_btn,
.sys_modal_submit_btn{
    font-family: var(--masterFont);
    padding: 10px 20px;
    border: 0;
    border-radius: 5px;
    font-weight: 700;
    transition: all 0.2s ease-out;
    max-height: 50px;
    min-height: 50px;
}
.sys_modal_pending_btn{
    background-color: var(--pendingColor);
    color:#fff;
}
.sys_modal_pending_btn:hover{
    background-color: var(--pendingColorlight);
}
.sys_modal_success_btn{
    background-color: var(--successColor);
    color:#fff;
}
.sys_modal_success_btn:hover{
    background-color: var(--successColorlight);
}
.sys_modal_submit_btn{
    background-color: var(--masterColor);
    color:#fff;
}
.sys_modal_submit_btn:hover{
    background-color: var(--btnHoverColor);
}
.sys_modal_del_btn{
    background-color: var(--dangerColor);
    color: var(--headingColor);
}
.sys_modal_del_btn:hover{
    background: var(--dangerColorlight);
}
.sys_modal_close_btn{
    background-color: var(--gray100);
    margin-right: 10px;
    color: var(--inputTextColor);
}
.sys_modal_close_btn:hover{
    background: var(--gray200);
}
.sys_modal_alert_error img{
    width: 200px;
}
.sys_modal_alert_error h2{
    margin-top: 20px;
    font-family: var(--masterFont);
    color: var(--textColor);
}
.sys_modal_alert_error span{
    font-family: var(--masterFont);
    color: var(--sideMenuTextColor);
}
.sys_modal_alert_error strong{
    color: var(--masterColor);
}
.modal_custom_info_item{
    display: flex;
    width: 100%;
    border-bottom: 1px dashed var(--borderColor);
    padding: 15px 0;
    align-items: center;
}
.modal_info_title{
    font-family: var(--masterFont);
    color: var(--gray600);
}
.modal_info_title i{
    margin-right: 5px;
}
.modal_info_data{
    font-family: var(--masterFont);
    color: var(--gray600);
    margin-left: auto;
    font-weight: 600;
    text-transform: capitalize;
}
.modal_contact_phone{
    font-size: 30px;
    font-family: var(--masterFont);
    color: var(--gray600);
    display: flex;
    align-items: center;
    justify-content: start;
}
.phone_contact_action{
    margin-left: auto;
}
.phone_contact_action a{
    text-decoration: none;
    padding: 5px;
    display: inline-flex;
    width: 40px;
    height: 40px;
    font-size: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--iconColor);
    transition: all 0.3s ease;
}
.phone_contact:hover{
    color: var(--masterColor);
}
.phone_whats:hover{
    color: var(--successColor);
}
#networkError{
    z-index: 2000!important;
}
.auto_input{
    cursor: no-drop;
}
.captcha_code_num{
    font-size: 60px;
}
.checkbox_container{
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 20px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.checkbox_container input{
    display: none;
}
.checkbox_mark{
    position: relative;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: var(--gray200);
    border-radius: 5px;
    transition: all 0.25s;
}
.checkbox_container input:checked ~ .checkbox_mark {
    background-color: var(--masterColor);
}
.checkbox_mark:after {
    content: "";
    position: absolute;
    transform: rotate(0deg);
    border: 1px solid var(--gray500);
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    border-radius: 0.25em;
    transition: all 0.25s, border-width 0.1s;
}
.checkbox_container input:checked ~ .checkbox_mark:after {
    left: 9px;
    top: 5px;
    width: 8px;
    height: 13px;
    border-color: #fff0 white white #fff0;
    border-width: 0 0.15em 0.15em 0;
    border-radius: 0;
    transform: rotate(45deg);
}
/**===== Main Pages Class =====**/
.sys_main_section{
    background-color: var(--bgColor);
    padding-top: 75px;
}
.sys_page_actions{
    display: flex;
}
.sys_input{
    width: 100%;
    padding: 10px;
    border: 1px solid var(--inputBorderColor);
    border-radius: 10px;
    margin-bottom: 20px;
    background: var(--inputBGColor);
    font-family: var(--masterFont);
    color: var(--inputTextColor);
    outline: none;
}
.sys_input:focus{
    border: 1px solid var(--inputFocusColor);
}
.sys_button{
    background-color: var(--masterColor);
    width: 100%;
    padding: 10px;
    font-family: var(--masterFont);
    color: #fff;
    border-radius: 10px;
    border: 0;
    font-size: 20px;
    margin-top: 10px;
}
.sys_button:hover{
    background-color: var(--btnHoverColor);
    transition: all 0.5s ease-out;
}
.sys_button:disabled,
.sys_modal_submit_btn:disabled,
.sys_modal_del_btn:disabled{
    background: #afafaf;
    cursor: not-allowed;
}
.sys_toast_error{
    font-family: var(--masterFont);
    font-weight: 900;
    background: var(--dangerColor) !important;
    color: #fff !important;
}
.sys_toast_success{
    font-family: var(--masterFont);
    font-weight: 900;
    color: #fff !important;
    background: var(--successColor) !important;
}
/**===== Custom Select Style =====**/
.select_hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}
.select_cus_input {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 16px;
    color: var(--inputTextColor);
    font-family: var(--masterFont);
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
}
.select_styled {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--gray100);
    color: var(--inputTextColor);
    padding: 10px;
    transition: all 0.2s ease-in;
    border-radius: 10px;
}
.select_styled:after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro", serif;
    font-weight: 900;
    position: absolute;
    top: 10px;
    right: 10px;
}
.select_styled:hover {
    background-color: var(--gray200);
}
.select_styled:active, .select_styled.active {
    background-color: var(--gray200);
    color: var(--headingColor);
}
.select_options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1995;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 10px;
    background-color: var(--gray100);
    width: 100%;
    /*height: 200px;*/
    overflow: auto;
    max-height: 200px;
}
.select_options li {
    margin: 0;
    padding: 12px 0;
    text-indent: 15px;
    border-radius: 10px;
    transition: all 0.15s ease-in;
}
.select_options li:hover {
    color: var(--masterColor);
    background-color: var(--gray200);
}
.select_options li[rel=""] {
    display: none;
}
/**===== System Auth =====**/
.sys_auth{
    width: 100%;
    height: 100%;
    background-color: var(--bgColor);
}
.sys_auth .login_logo{
    width: 300px;
    padding-bottom: 20px;
    filter: var(--loginLogo);
    max-width: 100%;
}
.sys_auth_box{
    background-color: var(--secColor);
    border-radius: 20px;
    border: 1px solid var(--borderColor);
    padding: 30px;
    text-align: center;
    -webkit-box-shadow: 0 0 26px -7px rgba(0,0,0,0.75);
    -moz-box-shadow: 0 0 26px -7px rgba(0,0,0,0.75);
    box-shadow: 0 0 26px -7px rgba(0,0,0,0.75);
}
.sys_custom_checkbox{
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 16px;
    cursor: pointer;
    font-size: 20px;
    font-family: var(--masterFont);
    color: var(--textColor);
    text-align: left !important;
}
.sys_checkbox{
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: white;
    border: 1px solid black;
    border-radius: 6px;
}
.sys_custom_checkbox input:checked ~ .sys_checkbox {
    background-color: var(--masterColor);
    border: 0;
}
.sys_checkbox:after {
    content: "";
    position: absolute;
    display: none;
}
.sys_custom_checkbox input:checked ~ .sys_checkbox:after {
    display: block;
}
.sys_custom_checkbox .sys_checkbox:after {
    left: 10px;
    bottom: 7px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.sys_lost_pass_link{
    font-family: var(--masterFont);
    color: var(--textColor);
    font-weight: 500;
    text-decoration: none;
}
.sys_login_label{
    text-align: left;
    font-family: var(--masterFont);
    color: var(--textColor);
}
.check_exist_err_msg{
    font-family: var(--masterFont);
    color: var(--masterColor) !important;
}
.check_exist_avb_msg{
    font-family: var(--masterFont);
    color: var(--successColor) !important;
}
.sys_auth .login_title{
    color: var(--headingColor);
    font-family: var(--masterFont);
}
.account_container .account_info img{
    border-radius: 15px;
    width: 120px;
    height: 120px;
    transition: all ease 0.2s;
}
.account_container .account_info .account_full_name{
    color: var(--headingColor);
    font-family: var(--masterFont);
    transition: all ease 0.2s;
    text-transform: capitalize;
}
.account_container .account_card a{
    text-decoration: none;
}
.account_container .account_card:hover img{
    border: 2px solid var(--headingColor);
    transform: scale(0.9);
}
.account_container .account_card:hover .account_full_name{
    transform: scale(0.9);
    color: var(--headingColorHover);
}
.account_container .account_card:hover .account_delete_btn{
    transform: scale(0.9);
    bottom: 30px;
    right: 22px;
}
.account_container .account_card{
    position: relative;
    display: inline-block;
}
.account_container .account_delete_btn{
    position: absolute;
    bottom: 24px;
    right: 14px;
    color: var(--gray600);
    border: none;
    padding: 6px;
    cursor: pointer;
    background: var(--gray200);
    line-height: 1;
    border-radius: 0 0 15px 0;
    transition: all ease 0.2s;
    opacity: 0.8;
}
.account_container .account_delete_btn:hover{
    color: var(--headingColor);
    background: var(--gray100);
    opacity: 1;
}
.account_container .account_delete_btn i{
    font-size: 12px;
}
.add_account a{
    width: fit-content;
    display: block;
    text-decoration: none;
}
.add_account .addAccountIcon{
    width: 120px;
    height: 120px;
    border: 2px dashed var(--headingColor);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: var(--headingColor);
    transition: all ease 0.2s;
}

.add_account .addAccountText{
    color: var(--headingColor);
    font-family: var(--masterFont);
    transition: all ease 0.2s;
}
.add_account:hover .addAccountText,
.add_account:hover .addAccountIcon{
    color: var(--headingColorHover);
    border-color: var(--headingColorHover);
    transform: scale(0.9);
}
/**===== Toolbar =====**/
.sys_main_toolbar{
    width: 100%;
    height: 75px;
    background-color: var(--secColor);
    position: fixed;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--borderColor);
}
.menu_user_img img{
    width: 50px;
    height: 50px;
    margin: 13px;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.menu_user_opt ul{
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.menu_user_opt ul li{
    display: inline-flex;
    margin: 3px;
    width: 25px;
    height: 25px;
    text-align: center;
    padding: 18px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-out;
    cursor: pointer;
}
.menu_user_opt ul li a{
    color: var(--iconColor);
    font-size: 18px;
}
.menu_user_opt ul li:hover{
    background-color: var(--iconHover);
}
.menu_user_opt ul li:hover a{
    color: var(--masterColor);
}
.sys_user_img{
    position: relative;
}
.menu_user_img:hover > .sys_user_menu {
    opacity: 1;
    z-index: 1;
    transform: translatex(0);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.sys_user_menu{
    background-color: var(--boxColor);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.88, -0.72, 0, 1), opacity 0.3s ease-in-out;
    transform: translatex(20rem);
    list-style: none;
    margin: 0;
    padding: 10px;
    position: absolute;
    z-index: -11;
    right: 25px;
    width: 280px;
    border-radius: 10px;
}
.user_menu_item {
    cursor: pointer;
    padding: 1em;
    text-align: center;
}
.user_menu_item:hover {
    background-color: #eb272d;
}
.user_info,.user_menu_items{
    border-bottom: 1px solid var(--borderColor);
}
.user_info .user_name{
    color: var(--textColor);
    font-family: var(--masterFont);
    text-transform: capitalize;
}
.user_info .user_name i{
    font-size: 15px;
    color: var(--masterColor);
}
.user_info .user_role{
    font-family: var(--masterFont);
    color: var(--iconColor);
}
.user_menu_items ul{
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.user_menu_items ul li{
    padding: 10px;
    transition: all 0.3s ease-out;
}
.user_menu_items ul li:hover{
    background-color: var(--menuHover);
}
.user_menu_items ul li:hover a{
    color: var(--masterColor);
}
.user_menu_items ul li a{
    font-family: var(--masterFont);
    color: var(--textColor);
    text-decoration: none;
    transition: all 0.3s ease-out;
}
.user_menu_items ul li a i{
    margin-right: 5px;
    width: 20px;
}
.sys_version{
    margin-top: 5px;
    color: var(--iconColor);
    text-align: center;
    font-size: 15px;
}
.sys_toolbar_logo{
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}
.sys_toolbar_logo .main_txt_logo{
    height: 50px;
    filter: var(--loginLogo);
}
.sys_toolbar_logo .sm_menu_logo{
    display: none;
    height: 50px;
}
.menu_time_date{
    display: inline-grid;
    justify-content: start;
    align-items: start;
    margin-right: 20px;
    color: var(--iconColor);
    font-family: var(--masterFont);
    font-weight: 600;
}
.menu_time img{
    width: 70px;
}
.toolbar_rm{
    gap: 10px;
}
.menu_server_time{
    color: var(--iconColor);
    font-family: var(--masterFont);
    font-weight: 900;
}
/**===== Side Menu =====**/
.side_menu{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    padding: 0;
}
.sys_main_side{
    width: 100%;
    position: relative;
    top: 0;
    height: 100vh;
    padding-top: 75px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--secColor);
    border-right: 1px solid var(--borderColor);
    transition: all 0.3s ease-out;
}
.main_side_section{
    margin: 15px;
}
.sys_main_side::-webkit-scrollbar{
    width: 5px;
}
.sys_main_side::-webkit-scrollbar-thumb{
    background-color: var(--masterColor);
    border-radius: 10px;
}
.sys_main_side::-webkit-scrollbar-track{
    background-color: transparent;
}
.main_side_section .side_label{
    font-family: var(--masterFont);
    color: var(--iconColor);
    font-weight: 600;
    padding: 8px 12px;
    text-transform: uppercase;
    font-size: 12px;
}
.main_side_section .side_item{
    padding: 8px 12px;
    font-family: var(--masterFont);
}
.main_side_section .side_item .item_icon{
    width: 25px;
    font-size: 16px;
    text-align: center;
    margin-right: 10px;
    opacity: 0.6;
}
.main_side_section .side_item .side_item_link{
    color: var(--gray500);
    text-decoration: none;
    width: 100%;
    font-weight: 600;
    transition: all 0.2s ease-out;
    display: flex;
    justify-content: start;
    align-items: center;
}
.side_item:hover .side_item_link{
    color: var(--textColor);
}
.side_badge{
    margin-left: auto;
}
.badge_master{
    background-color: var(--masterColor);
}
.active_link .badge_active{
    background-color: var(--headingColor) !important;
    color: #000 !important;
}
.item_active .side_item_link{
    color: var(--headingColor) !important;
}
.sys_menu_burger{
    width: 25px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    margin-right: 5px;
    display: none;
}
.show_menu{
    position: absolute !important;
    transform: translatex(0) !important;
    opacity: 1 !important;
}
.menu_overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: var(--iconColor);
    opacity: 0;
    visibility: hidden;
}
.menu_overlay.show_menu {
    opacity: 0.8;
    visibility: visible;
}
/**/
.sub_menu{
    display: none;
}
.default_open .sub_menu{
    display: block;
}
.sub_menu .active_link{
    background-color: var(--masterColor);
}
.sub_menu .active_link a{
    color: var(--headingColor) !important;
}
.sub_menu .active_link .item_dot{
    background: var(--headingColor) !important;
}
.main_side_section .sub_open i.fa-chevron-down{
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.side_item_trailing i{
    margin: 0 !important;
    width: 12px !important;
    height: 12px !important;
    font-size: 12px !important;
    transition: all 0.3s ease;
}
.main_side_section .sub_menu{
    margin: 10px 0;
}
.main_side_section .sub_menu ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.main_side_section .sub_menu ul li{
    padding: 5px;
    margin: 5px 0;
    border-radius: 5px;
    transition: all 0.2s ease;
}
.main_side_section .sub_menu ul li a{
    text-decoration: none;
    font-family: var(--masterFont);
    color: var(--gray500);
    font-size: 15px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}
.main_side_section .sub_menu ul li:hover a{
    color: var(--headingColor);
}
.main_side_section .sub_menu ul li:hover:not(.disabled_link):not(.active_link){
    background-color: var(--gray500);
}
.main_side_section .sub_menu .item_dot{
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: var(--gray600);
    display: inline-block;
    margin-right: 5px;
}
.sub_menu .active_link .sub_item_icon{
    color: var(--headingColor);
}
.sub_menu .sub_item_icon{
    width: 25px;
    font-size: 14px;
    text-align: center;
}
.main_side_section .disabled_link {
    cursor: no-drop;
    font-style: italic;
}
.main_side_section .disabled_link a{
    color: var(--gray200) !important;
}
/**===== Top Page Section =====**/
.section_top_opt{
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    justify-content: space-between;
    gap: 30px;
    font-family: var(--masterFont);
}
.sys_page_title span{
    color: var(--iconColor);
    font-size: 14px;
}
.sys_page_title h5{
    margin: 0!important;
    color: var(--textColor);
    text-transform: capitalize;
}
.sys_page_title span a{
    text-decoration: none;
    color: var(--iconColor);
    transition: all 0.3s ease-out;
}
.sys_page_title span a:hover{
    color: var(--masterColor);
}
.sys_top_opt_btn,
.sys_top_sec_btn,
.sys_top_success_btn,
.sys_top_danger_btn{
    background-color: var(--masterColor);
    border-radius: 8px;
    border: 0;
    color: #fff;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}
.sys_top_opt_btn:disabled{
    background-color: var(--gray500);
    cursor: no-drop;
}
.sys_top_opt_btn:disabled:hover{
    background-color: var(--gray600);
}
.sys_top_opt_btn:hover{
    background-color: var(--btnHoverColor);
}
.sys_top_sec_btn{
    background-color: var(--gray100);
    margin-right: 5px;
}
.sys_top_sec_btn:hover{
    background-color: var(--gray200);
}
.sys_top_success_btn{
    background-color: var(--successColorlight);
    margin-right: 5px;
    color: var(--successColor);
}
.sys_top_danger_btn{
    background-color: var(--dangerColor);
    margin-right: 5px;
    color: var(--headingColor);
}
a.sys_top_danger_btn{
    border: 2px solid var(--dangerColor);
}
a.sys_top_success_btn{
    border: 2px solid var(--successColorlight);
}
.sys_top_success_btn:hover{
    background-color: #2a2d38;
}
.sys_info_box{
    margin-right:20px;
    display: inline-grid;
    padding: 10px;
    min-width: 120px;
    border-radius: 8px;
    border: 1px dashed var(--iconColor);
    font-family: var(--masterFont);
}
.sys_info_box .info_box_count{
    font-weight: 900;
    color: var(--textColor);
}
.sys_info_box .info_box_count i{
    margin-right: 5px;
    font-size: 15px;
}
.sys_info_box .info_default i{
    color: var(--masterColor);
}
.sys_info_box .info_success i{
    color: var(--successColor);
}
.sys_info_box .info_danger i{
    color: var(--dangerColor);
}
.sys_info_box .info_box_title{
    color: var(--iconColor);
}
/**===== Student's System =====**/
.class_box{
    background-color: var(--boxColor);
    border: 1px solid var(--borderColor);
    text-align: center;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease-out;
}
.class_link{
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: grid;
}
.class_link:hover .class_name{
    color: var(--masterColor);
}
.class_count{
    font-size: 80px;
    color: #fff;
    font-family: var(--secFont);
}
.class_name{
    color: var(--textColor);
    font-family: var(--masterFont);
    text-transform: uppercase;
    font-size: 20px;
    border-top: 1px dashed var(--borderColor);
    padding-top: 5px;
    transition: all 0.2s ease;
}
.class_box_disabled .class_link{
    cursor: no-drop !important;
}
.class_box_disabled{
    background-color: var(--iconColor);
}
.class_box_disabled .class_name{
    color: var(--boxColor)!important;
}
/**===== Modal Loading =====**/
.loading_status {
    position: relative;
    width: 120px;
}
.animationObj {
    animation: loading 2.5s linear infinite;
}
.animationInner {
    animation: loading-circle 2s linear infinite;
}
#load {
    transition: all 2.5s;
    width: 120px;
}
#load #loadingUnder {
    stroke-width: 8;
    stroke: #E6E6E6;
    fill: transparent;
}
#load #loading-inner {
    stroke-dashoffset: 0;
    stroke-dasharray: 300;
    stroke-width: 8;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke: #0077FF;
    fill: transparent;
    box-shadow: 0 5px 8px rgba(58, 169, 254, 0.2);
}
.cross_container {
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: 60px;
    margin-left: 30px;
}
.cross_icon {
    display: none;
    width: 60px;
    height: 8px;
    border-radius: 4px;
    background: #0077FF;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
}
.cross_icon::after {
    content: "/";
    display: block;
    width: 60px;
    height: 8px;
    border-radius: 4px;
    background: #0077FF;
    -webkit-transform: rotate(-90deg);
}
#loading_success {
    stroke: #0077FF;
    stroke-width: 8;
    stroke-linecap: round;
}
.sucesstransition {
    transition: all 0.5s;
}
.loading_success_begin {
    stroke-dashoffset: 100;
    stroke-dasharray: 100;
}
.loading-sucess-complete {
    stroke-dashoffset: 0;
    stroke-dasharray: 100;
}
.loading-failed-begin {
    stroke-dashoffset: 100;
    stroke-dasharray: 100;
}
.scaleobj {
    animation: scaleobj 0.5s 1;
}
@keyframes scaleobj {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(0.5);
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.buttongroup {
    text-align: center;
}
@keyframes loading {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes loading-circle {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -600;
    }
}
/**===== Table =====**/
.sys_page_table_box,
.sys_page_box{
    background-color: var(--modalBG);
    border-radius: 10px;
    border: 1px solid var(--borderColor);
    padding: 20px 30px;
    margin-bottom: 15px;
    position: relative;
}
.table_search i{
    position: absolute;
    left: 1rem;
    fill: #9e9ea7;
    width: 1rem;
    height: 1rem;
}
.table_search {
    display: flex;
    align-items: center;
    position: relative;
    color: var(--inputTextColor);
    flex-grow: 1;
}
.sys_table_search{
    background-color: var(--gray100);
    border-radius: 100px;
    font-family: var(--masterFont);
    border: 0;
    padding: 10px 20px 10px 2.5rem;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    width: 100%;
    color: var(--inputTextColor);
}
.sys_table_search::placeholder {
    color: var(--inputTextColor);
}
.sys_table_search:active,
.sys_table_search:focus{
    outline: none;
    background-color: var(--gray200);
}
.table_titles{
    color: var(--gray500);
    font-family: var(--masterFont);
    text-transform: uppercase;
    padding: 15px 0;
    border-bottom: 1px dashed var(--borderColor);
    font-weight: 500;
    font-size: 15px;
}
.table_data{
    padding: 15px 0;
    font-family: var(--masterFont);
    text-transform: capitalize;
    border-bottom: 1px dashed var(--borderColor);
    color: var(--textColor);
}
.student_data img{
    width: 50px;
    border-radius: 100px;
    margin-right: 20px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 2px solid #fff;
}
.student_data .student_name{
    font-weight: 500;
    line-height: 20px;
    font-size: 15px;
    text-transform: capitalize;
}
.account_link{
    color: var(--headingColor);
    text-decoration: none;
    transition: all ease-in-out 0.1s;
}
.account_link:hover{
    color: var(--headingColorHover);
}
.table_col_data{
    color: var(--gray600);
    font-weight: 600;
}
.status_badge{
    border-radius: 6px;
    font-size: 14px;
    padding: 3px 10px;
    width: fit-content;
    text-align: center;
}
.status_pending{
    color: var(--pendingColor);
    background-color: var(--pendingColorlight);
}
.status_danger{
    color: var(--dangerColor);
    background-color: var(--dangerColorlight);
}
.status_success{
    color: var(--successColor);
    background-color: var(--successColorlight);
}
.status_info{
    color: var(--infoColor);
    background-color: var(--infoColorlight);
}
.status_process{
    color: var(--processColor);
    background-color: var(--processColorlight);
}
.student_img_placeholder{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    margin-right: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    text-transform: uppercase;
}
.table_actions ul{
    display: inline-flex;
}
.danger_opt_style a{
    color: var(--dangerColor)!important;
}
.danger_opt_style:hover{
    background-color: var(--dangerColorlight)!important;
}
.success_opt_style:hover a{
    color: var(--successColor)!important;
}
.success_opt_style:hover{
    background-color: var(--successColorlight)!important;
}
/**===== System Roles =====**/
.sys_role_box{
    border: 1px dashed var(--gray600);
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 10px;
}
.sys_custom_radio{
    margin-bottom: 8px;
}
.sys_radio_chk{
    color: var(--sideMenuTextColor);
    font-family: var(--masterFont);
    font-weight: 600;
    margin: 0;
    max-width: 60%;
}
.custom_radio label{
    color: var(--sideMenuTextColor);
    font-family: var(--masterFont);
    font-weight: 600;
    margin: 0 5px;
}
/**===== Access Page =====**/
.access_page h1{
    color: var(--headingColor);
    font-family: var(--masterFont);
    margin-top: 20px;
    font-weight: 600;
    text-transform: uppercase;
}
.access_page span{
    font-family: var(--masterFont);
    color: var(--gray600);
    font-size: 20px;
}
.access_page img{
    width: 300px;
}
.search_error{
    padding: 25px;
}
.search_error h1{
    font-family: var(--masterFont);
    color: var(--headingColor);
}
.search_error img{
    width: 400px;
}
/**===== Users =====**/
.user_nickname{
    font-family: var(--masterFont);
    color: var(--gray600);
    font-size: 15px;
}
.table_title{
    line-height: 15px;
}
.user_online{
    color: #2ECC71;
    font-family: var(--masterFont);
    font-weight: 600;
}
.user_offline{
    color: #E74C3C;
    font-family: var(--masterFont);
    font-weight: 600;
}
.user_status{
    margin-top: -5px;
    position: relative;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.user_status::before,
.user_status::after{
    left: 0;
    top: 50%;
    margin-left: -1px;
    margin-top: -6px;
    position: absolute;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.user_status[type="on"],
.user_status[type="on"]::before,
.user_status[type="on"]::after {
    background: #2ECC71;
}
.user_status[type="off"],
.user_status[type="off"]::before,
.user_status[type="off"]::after {
    background: #E74C3C;
}
.user_status::before {
    content: "";
    animation: bounce_s 1.5s infinite;
}
.user_status::after {
    content: "";
    animation: bounce_s 1.5s -0.4s infinite;
}
@keyframes bounce_s {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        -webkit-transform: scale(2);
        opacity: 0;
    }
}
@-webkit-keyframes bounce_s {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        -webkit-transform: scale(2);
        opacity: 0;
    }
}
/**===== Attendance System =====**/
.custom_attend_radio_group{
    display: flex;
    align-items: center;
    gap: 24px;
}
.sys_radio_btn{
    display: inline-block;
    position: relative;
    cursor: pointer;
}
.attend_radio_input{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.attend_radio_label{
    display: inline-block;
    padding-left: 30px;
    margin-bottom: 10px;
    position: relative;
    font-size: 15px;
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
.attend_radio_custom{
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #555;
    transition: all 0.3s ease;
}
.attend_radio_input:checked + .attend_present_label .attend_present_custom {
    background-color: var(--successColor);
    border-color: transparent;
    transform: scale(0.8);
    box-shadow: 0 0 20px var(--successColorlight);
}
.attend_radio_input:checked + .attend_present_label {
    color: var(--successColor);
}
.attend_present_label:hover .attend_present_custom {
    transform: scale(1.2);
    border-color: var(--successColor);
    box-shadow: 0 0 20px var(--successColorlight);
}
.attend_radio_input:checked + .attend_absent_label .attend_absent_custom {
    background-color: var(--dangerColor);
    border-color: transparent;
    transform: scale(0.8);
    box-shadow: 0 0 20px var(--dangerColorlight);
}
.attend_radio_input:checked + .attend_absent_label {
    color: var(--dangerColor);
}
.attend_absent_label:hover .attend_absent_custom {
    transform: scale(1.2);
    border-color: var(--dangerColor);
    box-shadow: 0 0 20px var(--dangerColorlight);
}
.attend_radio_input:checked + .attend_late_label .attend_late_custom {
    background-color: var(--pendingColor);
    border-color: transparent;
    transform: scale(0.8);
    box-shadow: 0 0 20px var(--pendingColorlight);
}
.attend_radio_input:checked + .attend_late_label {
    color: var(--pendingColor);
}
.attend_late_label:hover .attend_late_custom {
    transform: scale(1.2);
    border-color: var(--pendingColor);
    box-shadow: 0 0 20px var(--pendingColorlight);
}
.attend_radio_input:checked + .attend_excuse_label .attend_excuse_custom {
    background-color: var(--infoColor);
    border-color: transparent;
    transform: scale(0.8);
    box-shadow: 0 0 20px var(--infoColorlight);
}
.attend_radio_input:checked + .attend_excuse_label {
    color: var(--infoColor);
}
.attend_excuse_label:hover .attend_excuse_custom {
    transform: scale(1.2);
    border-color: var(--infoColor);
    box-shadow: 0 0 20px var(--infoColorlight);
}
.attend_radio_input:disabled + .attend_radio_label{
    color: var(--gray500);
    font-style: italic;
    cursor: no-drop;
}
.attend_excuse_input{
    display: none;
}
.table_heading_title{
    color: var(--headingColor);
}
.sys_count_info_box{
    background-color: var(--modalBG);
    border: 1px solid var(--borderColor);
    padding: 15px;
    border-radius: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.sys_count_info_box span{
    color: var(--gray600);
}
.sys_count_info_box .attend_timer{
    color: var(--headingColor);
    font-size: 30px;
}
.sys_count_info_box .info_count_num{
    color: var(--headingColor);
    font-size: 50px;
    line-height: 40px;
    font-weight: 700;
}
.sys_count_info_box .attend_present_icon{
    color: var(--successColor);
    font-weight: 600;
}
.sys_count_info_box .attend_absent_icon{
    color: var(--dangerColor);
    font-weight: 600;
}
.sys_count_info_box .attend_late_icon{
    color: var(--pendingColor);
    font-weight: 600;
}
.attend_select_placeholder img{
    width: 300px;
}
.attend_select_placeholder h2{
    color: var(--headingColor);
    font-family: var(--masterFont);
}
.attend_status_box{
    background-color: var(--modalBG);
    border: 1px solid var(--borderColor);
    padding: 20px;
    border-radius: 10px;
}
.attend_status_info{
    text-align: center;
    border-right: 1px solid var(--gray600);
    display: flex;
    justify-content: center;
    align-items: center;
}
.attend_status_info:last-of-type{
    border: 0;
}
.attend_present_status_icon{
    color: var(--successColor);
    font-size: 60px;
    margin-right: 20px;
    line-height: 0;
}
.attend_absent_status_icon{
    color: var(--dangerColor);
    font-size: 60px;
    margin-right: 20px;
    line-height: 0;
}
.attend_late_status_icon{
    color: var(--pendingColor);
    font-size: 60px;
    margin-right: 20px;
    line-height: 0;
}
.attend_status_num{
    font-family: var(--masterFont);
    color: var(--headingColor);
    font-size: 35px;
    line-height: 1;
}
.attend_status_count{
    display: flex;
    align-items: start;
    flex-direction: column;
}
.attend_status_title{
    color: var(--gray500);
    font-size: 20px;
    font-family: var(--masterFont);
    font-weight: 600;
}
.attend_approve_box{
    background-color: var(--processColor);
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--borderColor);
    color: var(--headingColor);
    font-family: var(--masterFont);
}
.attend_class_num{
    margin-left: auto;
    font-size: 50px;
}
.approve_bar{
    position: relative;
    overflow-x:hidden;
}
.approve_bar > p{
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.approve_bar:before{
    width: 100%;
    height: 5px;
    content: "";
    display: block;
    position: absolute;
    background: #ffffff;
    bottom: 0;
    opacity: 0.5;
    border-radius: 10px;
}
.attend_approve_bar{
    width: 100%;
    height: 5px;
    background:#ffffff;
    display: block;
    position: relative;
    border-radius: 10px;
}
.attend_approve_bar span{
    position: absolute;
    top: -30px;
    font-size: 18px;
    padding: 3px 0;
    font-weight: 500;
}
.bar_num_count{
    right: 0;
}
.attend_send_btn{
    width: 100%;
    padding: 10px;
    background-color: var(--bgColor);
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-weight: 500;
    border: 0;
    border-radius: 10px;
    margin-top: 10px;
}
.attend_send_btn:disabled{
    background-color: var(--gray100);
    cursor: no-drop;
}
.approve_success{
    background-color: var(--successColor);
}
.att_class_status{
    font-family: var(--masterFont);
    font-weight: 600;
    margin: 5px;
}
.att_class_status i{
    width: 15px;
    height: 15px;
    text-align: center;
    margin-right: 3px;
}
.att_class_success{
    color: var(--successColor);
}
.att_class_danger{
    color: var(--dangerColor) !important;
}
.att_classes_list ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.attend_info_item{
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.attend_info_item:last-of-type{
    margin-bottom: 0;
}
.attend_info_item .info_box_title{
    font-family: var(--masterFont);
    font-size: 18px;
    color: var(--headingColor);
    text-transform: capitalize;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.attend_info_item .info_box_title i{
    width: 25px;
    height: 25px;
    justify-content: center;
    align-items: center;
    display: flex;
}
.attend_info_item .info_box_data{
    font-family: var(--masterFont);
    font-size: 18px;
    color: var(--gray600);
    font-weight: 600;
    text-transform: capitalize;
}
.attend_data{
    text-transform: capitalize;
    font-family: var(--masterFont);
    color: var(--headingColor);
}
.attend_time_input{
    display: none;
    margin-bottom: 0;
}
.att_count_box .days_7{
    font-family: var(--secFont);
    color: var(--processColor);
    font-size: 60px;
    margin: 0;
    line-height: 1;
    font-weight: bold;
}
.att_count_box .days_14{
    font-family: var(--secFont);
    color: var(--successColor);
    font-size: 60px;
    margin: 0;
    line-height: 1;
    font-weight: bold;
}
.att_count_box .days_21{
    font-family: var(--secFont);
    color: var(--pendingColor);
    font-size: 60px;
    margin: 0;
    line-height: 1;
    font-weight: bold;
}
.att_count_box .days_30{
    font-family: var(--secFont);
    color: var(--dangerColor);
    font-size: 60px;
    margin: 0;
    line-height: 1;
    font-weight: bold;
}
.att_count_box .days_title{
    font-family: var(--masterFont);
    color: var(--headingColor);
    text-align: center;
    margin: 0;
    line-height: 1;
}
.att_count_box .total_count{
    font-family: var(--masterFont);
    margin: 10px 0 0 0;
    text-align: center;
    color: var(--gray600);
}
.student_attend_item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--masterFont);
    margin-bottom: 15px;
    cursor: pointer;
}
.student_attend_item .student_data{
    display: flex;
    flex-direction: column;
}
.student_attend_item .student_name{
    color: var(--headingColor);
}
.student_attend_item .student_class{
    color: var(--gray600);
    line-height: 1;
}
.student_attend_item .student_attend_count{
    min-width: 25px;
    max-width: 35px;
    height: 25px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}
.process_badge{
    background-color: var(--processColorlight);
    color: var(--processColor);
}
.pending_badge{
    background-color: var(--pendingColorlight);
    color: var(--pendingColor);
}
.success_badge{
    background-color: var(--successColorlight);
    color: var(--successColor);
}
.danger_badge{
    background-color: var(--dangerColorlight);
    color: var(--dangerColor);
}
.attend_class_status_box{
    margin-bottom: 15px;
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
}
.danger_bg{
    background-color: var(--dangerColor) !important;
}
.success_bg{
    background-color: var(--successColor) !important;
}
.attend_class_status_box .attend_class_data{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--masterFont);
}
.attend_class_info .att_class_name{
    color: var(--headingColor);
    font-weight: 700;
    font-size: 30px;
}
.att_class_supervisor ul{
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--headingColor);
}
.att_class_supervisor ul li{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
}
.att_class_supervisor ul li i{
    width: 20px;
    text-align: center;
}
.attend_class_data .class_counter{
    background: black;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    color: var(--headingColor);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}
.attend_modal_alert{
    color: var(--headingColor);
    font-family: var(--masterFont);
}
.attend_badge{
    font-size: 25px;
    padding: 5px;
    line-height: 1;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.class_report_table{
    direction: rtl;
    background: white;
    border-radius: 10px;
    padding: 10px;
    font-family: var(--masterFont);
}
.class_report_table table{
    width: 100%;
    font-family: var(--masterFont);
}
.class_report_table .table_date_head{
    background: var(--processColor);
    text-align: center;
    font-size: 25px;
    border: 1px solid black;
    color: var(--headingColor);
}
.class_report_table .attend_table_title td,
.class_report_table .attend_table_data td{
    padding: 5px;
    border: 1px solid black;
    font-weight: 700;
    text-align: center;
}
.class_report_table .attend_table_data:nth-of-type(odd){
    background-color: #ccc;
}
.attend_table_title_name{
    text-align: start !important;
}
.att_absent_table{
    background-color: var(--dangerColor);
    color: white;
}
.att_present_table{
    background-color: var(--successColor);
    color: white;
}
.att_late_table{
    background-color: var(--pendingColor);
    color: black;
}
.att_excuse_table{
    background-color: var(--infoColor);
    color: white;
}
.attend_progress{
    width: 30%;
}
.attend_progress h6{
    font-family: var(--masterFont);
    color: var(--headingColor);
}
.attend_progress .progress_bar_bg{
    width: 100%;
    background-color: #ccc;
    border-radius: 10px;
}
.attend_progress .progress_bar_fg{
    width: 10%;
    background-color: var(--masterColor);
    height: 5px;
    border-radius: 10px;
}
.att_daily_page{
    width: 210mm;
    height: 297mm;
    border-radius: 10px;
    position: relative;
    z-index: 10;
}
.att_page_design{
    padding: 4.0cm 0.5cm 4.5cm;
    width: 210mm;
    height: 297mm;
    display: flex;
    flex-direction: column;
    justify-content: start;
    max-height: 297mm;
}
.white_bg{
    background-color: white !important;
    border-radius: 10px;
}
.att_daily_page .daily_page_date{
    text-align: right;
    font-family: var(--masterFont);
    font-size: 20px;
    direction: rtl;
}
.att_daily_page .daily_page_date strong{
    color: var(--masterColor);
}
.daily_page_body table{
    direction: rtl;
    width: 100%;
    font-family: var(--masterFont);
    line-height: 1.3;
}
.daily_page_body table th,
.daily_page_body table td{
    border: 2px solid black;
    text-align: center;
    padding: 5px;
    font-weight: bold;
}
.att_daily_name{
    text-align: right;
    word-break: break-word;
    display: flex;
    align-items: end;
}
.name_handler{
    display: block;
}
.att_daily_title{
    color: var(--dangerColor);
    font-size: 25px;
    margin-bottom: 5px;
}
.att_pdf{
    position: relative;
}
.att_pdf img{
    position: absolute;
    width: 210mm;
    height: 297mm;
    z-index: -1;
    border-radius: 10px;
}
.daily_page_total{
    background-color: #ccc;
}
.reload_countdown{
    font-family: var(--masterFont);
    color: var(--headingColor);
    font-weight: 600;
    text-align: right;
}
.grade_container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.grade_container .grade_name{
    color: var(--headingColor);
    font-weight: 600;
    font-size: 35px;
    line-height: 1;
}
.grade_container .grade_count{
    font-family: var(--secFont);
    font-size: 50px;
    color: black;
    background: white;
    line-height: 1;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px;
    min-width: 60px;
}
.grade_container .grade_date{
    color: var(--gray600);
    font-size: 15px;
}
.stage_title{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.stage_title .stage_name{
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-size: 30px;
    white-space: nowrap;
}
.stage_divider{
    width: 100%;
    display: block;
    border-bottom: 1px solid var(--gray500);
}
.student_att_rpt_page_design{
    padding: 152px 40px 45px;
    width: 210mm;
    height: 297mm;
    display: flex;
    flex-direction: column;
    justify-content: start;
    max-height: 297mm;
}
.rpt_page_header{
    color: black;
    font-family: var(--masterFont);
    text-transform: capitalize;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    text-decoration: underline;
}
.rpt_page_body table{
    width: 100%;
    font-family: var(--masterFont);
    line-height: 1.3;
    border-radius: 10px;
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000;
}
.rpt_page_body table th,
.rpt_page_body table td{
    padding: 10px;
    border: 1px solid #000;
}
.rpt_table_data{
    font-weight: 700 !important;
    text-transform: capitalize;
}
.rpt_table_title{
    font-weight: 500;
}
.rpt_table_status{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}
.rpt_table_status i{
    width: 20px;
    text-align: center;
    font-size: 20px;
}
.page_number{
    font-weight: 600 !important;
    font-family: var(--masterFont);
    text-align: right;
}
.att_reject_reason{
    font-weight: 600 !important;
    font-family: var(--masterFont);
    color: var(--headingColor);
    font-size: 25px;
    padding: 10px;
    background: var(--gray200);
    border-radius: 10px;
}
.drop_out_item{
    font-family: var(--masterFont);
    color: var(--headingColor);
    font-weight: 600;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--gray200);
    margin-bottom: 15px;
}
.drop_out_date{
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}
/**===== Announcement =====**/
.sys_box_title{
    font-family: var(--masterFont);
    color: var(--headingColor);
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
}
.sys_box_textarea{
    height: 250px;
    resize: none;
    padding: 20px;
    border: 1px solid; /*عايز اعدل الكلاس دا*/
}
.sys_box_textarea_modal{
    height: 200px;
}
.msg_box_chr_count{
    width: 100%;
    display: block;
    text-align: end;
    color: var(--headingColor);
    font-family: var(--masterFont);
}
.emoji_trigger{
    color: #fff;
}
.custom_upload_input{
    margin-bottom: 15px;
}
.custom_upload_input input[type='file'] {
    display: none;
}
.custom_upload_input .disabled_upload{
    background-color: var(--gray500);
    cursor: no-drop;
}
.custom_upload_input .disabled_upload:hover{
    border: 2px dashed var(--bgColor);
    color: var(--bgColor);
}
.custom_upload_input label{
    padding: 10px 30px;
    background-color: var(--headingColor);
    color: var(--bgColor);
    font-family: var(--masterFont);
    font-weight: 600;
    border-radius: 10px;
    border: 2px dashed var(--bgColor);
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: 0.15s ease;
}
.custom_upload_input label:hover{
    border: 2px dashed var(--masterColor);
    color: var(--masterColor);
}
.file_name{
    font-family: var(--masterFont);
    font-size: 15px;
    color: var(--headingColor);
    font-weight: 600;
    display: block;
}
.upload_info{
    font-family: var(--masterFont);
    font-size: 12px;
    color: var(--iconColor);
    display: block;
}
.section_radio_inputs{
    margin-bottom: 15px;
}
.section_radio_inputs label{
    width: 100%;
}
.radio_input > *{
    margin: 5px;
}
.radio_input:checked + .radio_box,
.checkbox_input:checked + .checkbox_tile{
    border-color: var(--masterColor);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    color: var(--masterColor);
}
.radio_input:checked + .radio_box:before {
    transform: scale(1);
    opacity: 1;
    background-color: var(--masterColor);
    border-color: var(--masterColor);
}
.radio_input:checked + .radio_box .radio_icon,
.radio_input:checked + .radio_box .radio_label,
.checkbox_input:checked + .checkbox_tile,
.checkbox_input:checked + .checkbox_tile .checkbox_label{
    color: var(--masterColor);
}
.radio_input:focus + .radio_box,
.checkbox_input:focus + .checkbox_tile {
    border-color: var(--masterColor);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
}
.radio_input:focus + .radio_box:before,
.checkbox_input:focus + .checkbox_tile:before {
    transform: scale(1);
    opacity: 1;
}
.radio_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 80px;
    border-radius: 10px;
    border: 2px solid var(--bgColor);
    background-color: var(--headingColor);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transition: 0.15s ease;
    cursor: pointer;
    position: relative;
}
.radio_box:before {
    content: "";
    position: absolute;
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #b5bfd9;
    background-color: #fff;
    border-radius: 50%;
    top: 0.25rem;
    left: 0.25rem;
    opacity: 0;
    transform: scale(0);
    transition: 0.25s ease;
}
.radio_box:hover,
.checkbox_tile:hover {
    border-color: var(--masterColor);
}
.radio_box:hover:before,
.checkbox_tile:hover:before {
    transform: scale(1);
    opacity: 1;
}
.radio_icon{
    color: var(--gray200);
    text-align: center;
    font-size: 23px;
}
.radio_label,
.checkbox_label {
    color: var(--gray200);
    transition: 0.375s ease;
    text-align: center;
    font-size: 13px;
    font-family: var(--masterFont);
    font-weight: 800;
}
.radio_input,
.checkbox_input{
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
.checkbox_box {
    margin: 5px;
}
.preview_img_placeholder{
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--successColor);
    border-radius: 10px;
}
.preview_img_placeholder i{
    font-size: 100px;
    color: var(--headingColor);
}
.preview_header{
    font-family: var(--masterFont);
    color: var(--headingColor);
    font-weight: 600;
    margin: 15px 0;
}
.preview_body{
    font-family: var(--masterFont);
    color: var(--headingColor);
    font-weight: 400;
    white-space: pre-line;
}
.preview_sign{
    font-family: var(--sign2Font);
    color: var(--headingColor);
    font-size: 30px;
}
.preview_img_placeholder img{
    width: 100%;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.56) 0 22px 70px 4px;
}
.checkbox_input:checked + .checkbox_tile:before {
    transform: scale(1);
    opacity: 1;
    background-color: var(--masterColor);
    border-color: var(--masterColor);
    color: #fff;
    content: "✓";
}
.checkbox_tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6rem;
    min-height: 2rem;
    border-radius: 0.5rem;
    border: 2px solid #b5bfd9;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transition: 0.15s ease;
    cursor: pointer;
    position: relative;
}
.checkbox_tile:before {
    content: "";
    font-size: 12px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #b5bfd9;
    border-radius: 50%;
    top: 0.25rem;
    left: 0.25rem;
    opacity: 0;
    transform: scale(0);
    transition: 0.25s ease;
}
.msg_body{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.msg_info{
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: start;
}
.msg_img{
    max-width: 100%;
    border-radius: 10px;
    margin-right: 10px;
}
.msg_title{
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-weight: 600;
}
.msg_block{
    font-family: var(--masterFont);
    font-weight: 400;
    color: var(--gray600);
    font-size: 20px;
}
.msg_body .msg_user img{
    width: 30px;
    border-radius: 50%;
    margin-right: 5px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.msg_body .msg_user strong{
    color: var(--headingColor);
    font-family: var(--masterFont);
    text-transform: capitalize;
}
.msg_date,
.msg_time,
.msg_section{
    margin: 0 0 0 15px;
    font-family: var(--masterFont);
    color: var(--gray600);
}
.msg_grades ul{
    padding: 0;
    list-style: none;
    display: block;
}
.msg_grades ul li{
    padding: 5px 10px;
    border-radius: 10px;
    background: var(--gray200);
    color: var(--headingColor);
    width: fit-content;
    display: inline-block;
    margin: 3px;
}
.msg_grades ul li a{
    text-decoration: none;
    color: var(--masterColor);
}
.msg_actions{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}
.msg_actions ul{
    padding: 0;
    list-style: none;
}
.msg_actions ul li{
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
}
.msg_actions ul li a{
    text-decoration: none;
}
.action_success_btn{
    background: var(--successColorlight);
}
.action_danger_btn{
    background-color: var(--dangerColorlight);
}
.action_edit_btn{
    background-color: var(--processColorlight);
}
.action_pending_btn{
    background-color: var(--pendingColorlight);
}
.action_edit_btn a{
    color: var(--processColor);
}
.action_danger_btn a{
    color: var(--dangerColor);
}
.action_success_btn a{
    color: var(--successColor);
}
.action_pending_btn a{
    color: var(--pendingColor);
}
.sys_page_back_btn{
    margin-right: 10px;
}
.sys_page_back_btn a{
    padding: 10px 15px;
    background: var(--gray200);
    border-radius: 10px;
    color: var(--masterColor);
    text-decoration: none;
}
/**===== Uniform =====**/
.cs_2x{
    width: 9rem !important;
    min-height: 3rem !important;
    height: 5rem !important;
}
.LH_1{
    line-height: 1;
}
.number_in_btn{
    padding: 5px;
    width: 100%;
    background: var(--successColor);
    border: 0;
    border-radius: 10px;
    color: var(--headingColor);
    font-size: 40px;
    display: block;
    text-align: center;
}
.number_dc_btn{
    padding: 5px;
    width: 100%;
    background: var(--dangerColor);
    border: 0;
    border-radius: 10px;
    color: var(--headingColor);
    font-size: 40px;
    display: block;
    text-align: center;
}
.qty_number_input{
    padding: 5px;
    width: 100%;
    border: 0;
    border-radius: 10px;
    color: var(--bgColor);
    font-size: 40px;
    text-align: center;
    font-family: var(--masterFont);
    font-weight: 900;
}
.sys_sec_button{
    background-color: var(--gray100);
    width: 100%;
    padding: 10px;
    font-family: var(--masterFont);
    color: #fff;
    border-radius: 10px;
    border: 0;
    font-size: 20px;
    margin-top: 10px;
    transition: all 0.3s ease;
}
.sys_sec_button:hover{
    background-color: var(--gray200);
}
.sum_title{
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-weight: 600;
}
.sum_count{
    font-family: var(--masterFont);
    font-weight: 600;
    font-size: 80px;
    line-height: 2;
}
.cart_title{
    color: var(--headingColor);
    font-family: var(--masterFont);
}
.cart_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cart_counter{
    font-family: var(--masterFont);
    color: var(--headingColor);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart_item{
    background: var(--headingColor);
    border-radius: 10px;
    color: black;
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: var(--masterFont);
    margin-bottom: 10px;
}
.cart_item .item_remove button{
    border: 0;
    background: transparent;
    color: var(--dangerColor);
    font-size: 20px;
}
.cart_item .item_data{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.cart_item .item_data .item_name{
    font-weight: 900;
    font-size: 25px;
}
.cart_item .item_data .item_total{
    font-size: 25px;
    font-weight: 700;
}
.cart_item .item_data .item_details .item_price_qty{
    direction: ltr;
    font-weight: 600;
    text-align: right;
    margin-top: 5px;
}
.cart_item .item_data .item_details .item_price_qty input{
    max-width: 40px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid var(--masterColor);
    color: black;
    font-weight: 600;
}
.cart_total_body{
    padding: 10px;
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-size: 25px;
    font-weight: 400;
}
.checkbox_uniform{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    border-radius: 0.5rem;
    border: 3px solid black;
    background-color: var(--pendingColor);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transition: 0.15s ease;
    cursor: pointer;
    position: relative;
    direction: rtl;
    padding: 10px;
    min-width: 230px !important;
    outline: 3px solid white;
}
.checkbox_uniform .uniform_label{
    color: var(--gray200);
    transition: 0.375s ease;
    text-align: center;
    font-size: 18px;
    font-family: var(--masterFont);
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 5px;
}
.checkbox_uniform .uniform_label i{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item_qty_style{
    background-color: black;
    color: var(--headingColor);
    min-width: 40px;
    border-radius: 5px;
}
.item_size_style{
    background-color: black;
    color: var(--headingColor);
    min-width: 40px;
    border-radius: 5px;
}
.item_price_style{
    background-color: black;
    color: var(--headingColor);
    min-width: 40px;
    border-radius: 5px;
}
.label_size_style{
    color: black;
}
.label_price_style{
    color: black;
}
.label_qty_style{
    color: black;
}
.uni_data{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.checkbox_input:checked + .checkbox_uniform{
    border-color: var(--dangerColor);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    outline: white solid medium;
    outline-offset: 3px;
    background-color: white;
}
.out_of_stock_notice{
    text-align: center;
    background: var(--gray200);
    padding: 10px;
    border-radius: 10px;
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-size: 25px;
    font-weight: 800;
}
.uniform_page_link{
    width: 100%;
    display: block;
    text-align: center;
    background: var(--successColor);
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-weight: 700;
    padding: 15px;
    border-radius: 10px;
    text-decoration: none;
    margin-bottom: 15px;
    border: 3px solid black;
    outline: 2px solid white;
    transition: 0.2s ease all;
    font-size: 20px;
}
.uniform_page_link:hover{
    background: var(--gray600);
}
.uniform_page_link_active{
    background: var(--masterColor) !important;
}
.uniform_sell{
    text-align: center;
    background-color: var(--successColor);
    color: var(--headingColor);
}
.uniform_rev{
    text-align: center;
    background-color: var(--pendingColor);
    color: black;
}
.uniform_return{
    text-align: center;
    background-color: var(--dangerColor);
    color: var(--headingColor);
}
.uniform_total{
    text-align: center;
    background-color: var(--dangerColor);
    color: var(--headingColor);
    font-size: 25px;
}
.new_cart{
    width: 100%;
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    color: black;
    font-family: var(--masterFont);
    text-decoration: none;
    background: var(--pendingColor);
    font-weight: 800;
    font-size: 20px;
}
.select_uniform_img img{
    width: 100%;
}
.grade_uniform{
    padding: 10px;
    background: var(--pendingColor);
    border-radius: 10px;
    border: 4px solid black;
    outline: 3px solid white;
}
.uniform_box_title{
    text-align: center;
    font-family: var(--masterFont);
    font-weight: 800;
    color: black;
    font-size: 30px;
    letter-spacing: 2px;
}
.table_view_btn{
    background: var(--masterColor);
    padding: 10px 15px;
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    color: white;
}
.table_print_btn{
    background: var(--dangerColor);
    padding: 10px 15px;
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    color: white;
}
/**===== Timetable =====**/
.timetable_sessions_title{
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--dangerColor);
    border-radius: 10px;
    font-family: var(--masterFont);
    font-weight: 900;
    color: var(--headingColor);
    padding: 10px;
    font-size: 20px;
}
.timetable_day{
    background: var(--gray100);
    border-radius: 10px;
    margin: 15px 0;
    padding: 10px;
    text-align: center;
    color: var(--headingColor);
    font-family: var(--masterFont);
}
.timetable_select_input{
    width: 100%;
    padding: 5px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: var(--masterFont);
    color: var(--headingColor);
    outline: none;
    text-align: center;
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
.timetable_select_input:focus,
.timetable_select_input:hover{
    background: var(--gray200);
}
.timetable_select_input::-ms-expand {
    display: none;
}
/**===== Channel =====**/
.sys_button_success{
    background-color: var(--successColor);
    width: 100%;
    padding: 10px;
    font-family: var(--masterFont);
    color: #fff;
    border-radius: 10px;
    border: 0;
    font-size: 20px;
    margin-top: 10px;
}
.sys_button_danger{
    background-color: var(--dangerColor);
    width: 100%;
    padding: 10px;
    font-family: var(--masterFont);
    color: #fff;
    border-radius: 10px;
    border: 0;
    font-size: 20px;
    margin-top: 10px;
}
.book_section{
    display: flex;
    padding: 20px;
    border-radius: 10px;
    border: 1px dashed var(--gray500);
    justify-content: start;
    align-items: center;
}
.book_section .book_icon{
    padding: 10px;
    background: var(--successColorlight);
    border-radius: 10px;
    width: 50px;
    height: 50px;
    color: var(--successColor);
    text-align: center;
    font-size: 20px;
    margin-right: 10px;
}
.book_section .book_data h4,
.book_section .book_data h6{
    color: var(--headingColor);
    font-family: var(--masterFont);
    line-height: 1;
    margin: 0;
}
.c_loader_size{
    width: 20px !important;
    height: 20px !important;
}
.sys_main_title{
    font-family: var(--masterFont);
    color: var(--headingColor);
    font-weight: 600;
}
.textarea_disabled{
    background: var(--gray500);
    cursor: no-drop;
}
.hod_confirmed_alert{
    width: 100%;
    display: block;
    padding: 10px;
    text-align: center;
    color: var(--headingColor);
    background: var(--dangerColor);
    border-radius: 10px;
    font-family: var(--masterFont);
    font-size: 20px;
    font-weight: 600;
}
.hod_confirmed_badge{
    background: var(--successColor);
    padding: 10px 20px;
    border-radius: 10px;
    color: var(--headingColor);
    font-weight: 600;
    font-family: var(--masterFont);
}
.notes_alert{
    width: 100%;
    display: block;
    text-align: center;
    padding: 10px 5px;
    border-radius: 10px;
    color: var(--headingColor);
    background: var(--dangerColor);
    font-size: 20px;
    font-family: var(--masterFont);
    direction: rtl;
    border: 2px dashed var(--headingColor);
}
.class_channel_status {
    font-family: var(--masterFont);
    display: inline-grid;
    color: var(--headingColor);
    border-radius: 10px;
    margin: 10px 0;
}
.not_set_channel{
    color: var(--dangerColor) !important;
}
.success_channel{
    color: var(--successColor) !important;
}
/**===== Uploader =====**/
.sys_uploader .uploader_header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--masterFont);
}
.uploader_header .uploader_title{
    text-transform: uppercase;
    color: var(--headingColor);
    font-weight: 700;
    font-size: 1.2rem;
}
.uploader_header .uploader_status{
    font-weight: 500;
    font-size: 1rem;
    color: var(--gray600);
}
.sys_uploader .files_list{
    list-style: none;
    width: 100%;
    padding-bottom: 10px;
    max-height: 400px;
    overflow-y: auto;
    display: contents;
}
.sys_uploader .files_list:has(li){
    padding: 20px 0;
}
.sys_uploader .file_item{
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
}
.files_list .file_item .file_ext{
    height: 50px;
    width: 50px;
    background: var(--masterColor);
    border-radius: 10px;
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}
.files_list .file_item .file_content_wrapper{
    flex: 1;
}
.files_list .file_item .file_content{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.files_list .file_item .u_file_name{
    font-size: 1rem;
    font-weight: 600;
    color: var(--headingColor);
    font-family: var(--masterFont);
    margin: 0;
}
.files_list .file_item .file_info{
    display: flex;
    gap: 5px;
}
.files_list .file_item .file_info small{
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray600);
    font-family: var(--masterFont);
    margin-top: 5px;
}
.files_list .file_item .file_info .file_status{
    color: var(--masterColor);
}
.files_list .file_item .file_cancel_btn{
    align-self: center;
    border: none;
    outline: none;
    background: none;
    color: var(--gray500);
}
.files_list .file_item .file_cancel_btn:hover{
    color: var(--masterColor);
}
.files_list .file_item .file_bar{
    width: 100%;
    height: 3px;
    margin-top: 5px;
    background: var(--gray200);
    border-radius: 10px;
}
.files_list .file_item .file_bar .file_progress{
    background: var(--masterColor);
    height: inherit;
    border-radius: inherit;
    width: 0;
}
.sys_uploader .file_upload_box{
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--gray600);
    border-radius: 10px;
    transition: all 0.2s ease;
}
.sys_uploader .file_upload_box.active{
    border: 2px solid var(--masterColor);
    background-color: var(--gray200);
}
.file_upload_box .box_title{
    color: var(--gray600);
    font-family: var(--masterFont);
    font-size: 1rem;
    font-weight: 500;
}
.sys_uploader .file_upload_box.active .box_title{
    pointer-events: none;
}
.file_upload_box .file_browse_btn{
    color: var(--masterColor);
    cursor: pointer;
}
.file_upload_box .file_browse_btn:hover{
    text-decoration: underline;
}
.embed_pdf{
    width: 100%;
    height: 100vh;
    display: flex;
}
/**===== choose screen =====**/
.choose_screen a{
    width: 100%;
    display: block;
    min-height: 250px;
    max-height: 500px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.choose_screen .screen_box:hover{
    transform: scale(0.9);
}
.choose_screen .screen_box{
    width: 100%;
    height: 100%;
    background-color: var(--boxColor);
    border-radius: 10px;
    border: 2px solid var(--borderColor);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.screen_box .screen_icon{
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--masterColor);
    color: var(--headingColor);
    border-radius: 50%;
    font-size: 30px;
}
.screen_box .screen_title{
    color: var(--headingColor);
    font-size: 25px;
    font-family: var(--masterFont);
    margin: 20px 10px;
}
.channel_chats_list{
    height: 70vh;
}
.channel_chats_list ul{
    margin: 0;
    list-style: none;
    height: 70vh;
    overflow-y: scroll;
    padding: 0 15px 0 0;
}
.channel_chats_list ul a{
    text-decoration: none;
}
.channel_chats_list ul::-webkit-scrollbar,
.chat_body::-webkit-scrollbar{
    width: 5px !important;
}
.channel_chats_list ul::-webkit-scrollbar-track,
.chat_body::-webkit-scrollbar-track{
    background-color: transparent !important;
}
.channel_chats_list ul::-webkit-scrollbar-thumb,
.chat_body::-webkit-scrollbar-thumb{
    background: var(--gray200);
}
.chat_card{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
}
.user_chat .chat_back_btn a{
    color: var(--headingColor);
    text-decoration: none;
    font-size: 20px;
}
.channel_chats_list input[type='radio']{
    display: none;
    visibility: hidden;
}
.channel_chats_list input[type="radio"]:checked + label {
    background-color: var(--gray200) !important;
}
.chat_card .user_chat{
    display: flex;
    align-items: center;
    gap: 10px;
}
.user_chat .chat_user_avatar{
    background-color: var(--dangerColorlight);
    color: var(--dangerColor);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    display: grid;
    align-items: center;
    text-align: center;
    font-family: var(--masterFont);
    font-weight: 600;
    font-size: 20px;
}
.user_chat .chat_user_info{
    font-family: var(--masterFont);
    display: inline-grid;
    line-height: 1.2;
}
.chat_user_info .chat_username{
    color: var(--headingColor);
    font-weight: 600;
    text-transform: capitalize;
}
.chat_user_info .chat_user_class{
    color: var(--gray600);
    font-weight: 400;
    font-size: 14px;
}
.chat_card .seen_time{
    color: var(--gray500);
    font-weight: 300;
    font-size: 12px;
}
.chat_box{
    background-color: var(--modalBG);
    border-radius: 10px;
    border: 1px solid var(--borderColor);
    margin-bottom: 15px;
    height: 75vh;
}
.chat_box .chat_header{
    padding: 20px 20px 15px 20px;
    border-bottom: 1px solid var(--gray200);
}
.chat_box .chat_footer{
    padding: 15px 20px 20px 20px;
}
.chat_box .chat_header .user_chat{
    display: flex;
    gap: 10px;
    align-items: center;
}
.chat_box .chat_body{
    padding: 20px;
    height: 48vh;
    overflow-y: scroll;
    display: flex;
    flex-direction: column-reverse;
}
.chat_body .chat_message_text{
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-weight: 500;
}
.chat_body .received_message_box{
    max-width: 70%;
    width: fit-content;
    padding: 10px;
    border-radius: 10px;
    background: var(--chatMsgR);
    margin-bottom: 10px;
}
.chat_body .send_message_box{
    max-width: 70%;
    width: fit-content;
    padding: 10px;
    border-radius: 10px;
    background: var(--chatMsgS);
    margin-bottom: 10px;
    margin-left: auto;
    text-align: right;
}
.message_send_box{
    display: flex;
    flex-direction: column;
    align-items: end;
}
.message_send_box textarea{
    width: 100%;
    background: var(--gray100);
    outline: none;
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-family: var(--masterFont);
    color: var(--headingColor);
    font-weight: 500;
    resize: none;
}
.msg_act_btn{
    display: flex;
    justify-content: end;
    gap: 10px;
}
.send_btn{
    background-color: var(--masterColor);
    width: 100px;
    padding: 8px;
    font-family: var(--masterFont);
    color: #fff;
    border-radius: 10px;
    border: 0;
    font-size: 15px;
    transition: all 0.2s ease-in-out;
    margin-top: 10px;
}
.send_btn:hover{
    background-color: var(--btnHoverColor);
    width: 150px;
}
.read_btn{
    background-color: var(--successColor);
    padding: 8px;
    font-family: var(--masterFont);
    color: #fff;
    border-radius: 10px;
    border: 0;
    font-size: 15px;
    transition: all 0.2s ease-in-out;
    margin-top: 10px;
}
.read_btn:hover{
    background-color: var(--successColorlight);
}
.chat_last_seen .chat_unread_count{
    background-color: var(--masterColor);
    border-radius: 100%;
    font-family: var(--masterFont);
    color: var(--headingColor);
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat_last_seen{
    display: flex;
    flex-direction: column;
    align-items: end;
}
.chat_placeholder{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}
.chat_placeholder h2{
    font-family: var(--masterFont);
    color: var(--headingColor);
    font-weight: 600;
}
.send_msg_time{
    max-width: 70%;
    margin-left: auto;
    font-family: var(--masterFont);
    font-weight: 400;
    text-align: right;
    color: var(--gray500);
    font-size: 15px;
}
.received_msg_time{
    max-width: 70%;
    font-family: var(--masterFont);
    font-weight: 400;
    text-align: left;
    color: var(--gray500);
    font-size: 15px;
}
.replied_msg{
    background: var(--successColor);
    border-radius: 10px;
}
.not_replay_msg{
    background: var(--dangerColor);
    border-radius: 10px;
}
.not_replay_msg .chat_user_class,
.not_replay_msg .seen_time,
.replied_msg .chat_user_class,
.replied_msg .seen_time{
    color: var(--headingColor) !important;
}
.emojionearea-editor{
    font-family: var(--masterFont) !important;
    min-height: 6em !important;
    max-height: 8em !important;
    color: black !important;
    font-weight: 800 !important;
}
.chat_msg_section{
    display: flex;
    flex-direction: column-reverse;
    align-items: self-end;
    margin-bottom: 20px;
}
.message_section{
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 8px;
}
.chat_body .send_message_box_kg{
    max-width: 70%;
    width: fit-content;
    padding: 10px;
    border-radius: 10px;
    background: var(--chatMsgS);
    text-align: right;
}
.msg_edit_btn,
.msg_delete_btn{
    background: transparent;
    border: 1px solid var(--gray600);
    color: var(--gray600);
    border-radius: 10px;
    transition: all ease-out 0.2s;
}
.msg_edit_btn:hover{
    background-color: var(--masterColor);
    color: var(--headingColor);
    border: 1px solid var(--headingColor);
}
.msg_delete_btn:hover{
    background-color: var(--dangerColor);
    color: var(--headingColor);
    border: 1px solid var(--headingColor);
}
/**===== Sheets =====**/
.view_sheet_info{
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sheet_title{
    font-family: var(--masterFont);
    color: var(--headingColor);
}
.confirm_btn{
    background-color: var(--successColor);
    font-family: var(--masterFont);
    color: var(--headingColor);
    border: 0;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 600;
}
.reject_btn{
    background-color: var(--dangerColor);
    font-family: var(--masterFont);
    color: var(--headingColor);
    border: 0;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 600;
}
/**===== Update Modal =====**/
.updates_list{
    margin: 10px;
    padding: 10px;
    direction: rtl;
    font-family: var(--masterFont);
}
.updates_list ul{
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: right;
}
.updates_list ul li{
    padding: 10px 0;
    border-bottom: 1px dashed var(--gray500);
}
.updates_list ul li i{
    margin-left: 5px;
    width: 20px;
    height: 20px;
    text-align: center;
}
.update_status_add{
    color: var(--masterColor);
}
.update_status_fix{
    color: var(--pendingColor);
}
.update_status_remove{
    color: var(--dangerColor);
}
.update_status_update{
    color: var(--successColor);
}
.updates_list ul li span{
    color: var(--headingColor);
}
/**===== Settings =====**/
.custom_sys_box{
    background-color: var(--boxColor);
    border-radius: 10px;
    border: 1px solid var(--borderColor);
    margin-bottom: 20px;
}
.custom_sys_box .box_header{
    padding: 20px 15px 10px 15px;
    border-bottom: 1px solid var(--borderColor);
}
.custom_sys_box .box_header .box_title{
    font-weight: 500;
    font-family: var(--masterFont);
    color: var(--headingColor);
    text-transform: uppercase;
    margin: 0;
}
.box_header .box_title_desc{
    font-family: var(--masterFont);
    margin: 0;
    color: var(--gray600);
}
.box_item .item_img{
    border-radius: 10px;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.box_item .item_img:hover{
    opacity: 0.5;
}
.custom_sys_box .box_body{
    padding: 15px;
}
.custom_sys_box .box_body .box_item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px dashed var(--gray500);
}
.custom_sys_box .box_body .box_item:last-of-type{
    border: none;
}
.custom_sys_box .box_body .box_item .item_name{
    font-weight: 400;
    font-family: var(--masterFont);
    color: var(--headingColor);
}
.custom_sys_box .box_footer{
    padding: 10px 15px 20px 15px;
    border-top: 1px solid var(--borderColor);
    display: flex;
    align-items: center;
    justify-content: end;
}
.item_action .box_item_select{
    padding: 5px 10px;
    border-radius: 5px;
    background: var(--gray200);
    outline: none;
    border: 1px solid var(--gray500);
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-weight: 600;
}
.sys_top_select{
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: var(--inputBGColor);
    font-family: var(--masterFont);
    color: var(--inputTextColor);
    outline: none;
}
/**===== Toggle Switch =====**/
.toggle_switch{
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
    cursor: pointer;
}
.toggle_switch_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    border-radius: 20px;
    box-shadow: inset 0 0 0 2px #ccc;
    transition: background-color 0.3s ease-in-out;
}
.toggle_switch_handle {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}
.toggle_switch::before {
    content: "";
    position: absolute;
    top: -25px;
    right: -35px;
    font-size: 12px;
    font-weight: bold;
    color: #aaa;
    text-shadow: 1px 1px #fff;
    transition: color 0.3s ease-in-out;
}
.toggle_switch input[type="checkbox"]:checked + .toggle_switch_handle {
    transform: translateX(45px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--masterColor);
}
.toggle_switch input[type="checkbox"]:checked + .toggle_switch_background {
    background-color: var(--masterColor);
    box-shadow: inset 0 0 0 2px #0559d3;
}
.toggle_switch input[type="checkbox"]:checked + .toggle_switch:before {
    content: "On";
    color: var(--masterColor);
    right: -15px;
}
.toggle_switch input[type="checkbox"]:checked + .toggle_switch_background .toggle_switch_handle {
    transform: translateX(25px);
}
/**===== Tour Guide =====**/
.driver-popover.sys_tour_guide{
    background-color: var(--masterColor);
    color: var(--headingColor);
}
.driver-popover.sys_tour_guide .driver-popover-title {
    font-size: 20px;
    font-family: var(--masterFont);
    font-weight: 600;
}
.driver-popover.sys_tour_guide .driver-popover-title,
.driver-popover.sys_tour_guide .driver-popover-description,
.driver-popover.sys_tour_guide .driver-popover-progress-text {
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-weight: 600;
    text-align: right;
}
.driver-popover.sys_tour_guide button {
    text-align: center;
    background-color: var(--gray200);
    color: #ffffff;
    border: 1px solid var(--borderColor);
    text-shadow: none;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 10px;
    font-family: var(--masterFont);
}
.driver-popover.sys_tour_guide button:hover {
    background-color: var(--headingColor);
    color: var(--gray100);
}
.driver-popover.sys_tour_guide .driver-popover-close-btn {
    color: var(--gray100);
    background-color: transparent;
    padding: 0;
    border: none;
    font-size: 20px;
    left: 0!important;
}
.driver-popover.sys_tour_guide .driver-popover-close-btn:hover {
    color: var(--headingColor);
    background-color: transparent;
}
.driver-popover.sys_tour_guide .driver-popover-arrow-side-left.driver-popover-arrow {
    border-left-color: var(--masterColor);
}
.driver-popover.sys_tour_guide .driver-popover-arrow-side-right.driver-popover-arrow {
    border-right-color: var(--masterColor);
}
.driver-popover.sys_tour_guide .driver-popover-arrow-side-top.driver-popover-arrow {
    border-top-color: var(--masterColor);
}
.driver-popover.sys_tour_guide .driver-popover-arrow-side-bottom.driver-popover-arrow {
    border-bottom-color: var(--masterColor);
}
/**===== Reports =====**/
#subject_data .subject_name{
    font-family: var(--masterFont);
    color: var(--successColor);
    text-align: center;
    font-weight: 800;
    font-size: 20px;
}
#subject_data .subject_degree{
    font-family: var(--masterFont);
    color: var(--headingColor);
    text-align: center;
    font-weight: 900;
    font-size: 50px;
}
.report_subjects_title{
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--titleBG);
    border-radius: 10px;
    font-family: var(--masterFont);
    font-weight: 900;
    color: var(--headingColor);
    padding: 10px;
    font-size: 20px;
}
.report_student_data{
    background: var(--headingColor);
    border-radius: 10px;
    margin: 15px 0;
    padding: 10px;
    text-align: center;
    color: var(--gray100);
    font-family: var(--masterFont);
    font-weight: 600;
    text-transform: capitalize;
    font-size: 18px;
}
.report_table_degree_input{
    border: 1px solid var(--gray100);
    background: #cbcbcb;
    border-radius: 5px;
    text-align: center;
    font-family: var(--masterFont);
    font-weight: 600;
    width: 100%;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
.reports_idle_alert{
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}
.reports_idle_alert h2 {
    font-family: var(--masterFont);
    color: var(--textColor);
    font-size: 50px;
    font-weight: 600;
    margin: 0;
}
.reports_idle_alert span {
    font-family: var(--masterFont);
    color: var(--sideMenuTextColor);
    font-size: 20px;
}
.reports_idle_alert .idle_access_input{
    height: 80px !important;
    text-align: center !important;
    font-size: 25px !important;
}
.drag_opt{
    margin: 0 5px;
    cursor: grab;
    color: var(--gray600);
}
.reports_table{
    background: white;
    width: 100%;
    border:1px solid black;
    color: black;
    border-collapse: collapse;
    padding: 10px;
    font-family: var(--masterFont);
}
.reports_table th,
.reports_table td{
    border:1px solid black;
    border-collapse: collapse;
    padding: 10px;
}
.reports_table tr:nth-child(even){
    background-color: #dddddd;
}
.reports_table th{
    background-color: green;
    color: white;
}
.report_null_input{
    background-color: var(--titleBG) !important;
    color: var(--headingColor) !important;
}
.sticky_reports_title{
    position: sticky;
    top: 70px;
}
.total_in input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.total_in{
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 1.5rem;
    user-select: none;
    max-height: 50px;
    height: 50px;
}
.checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 1.3em;
    width: 1.3em;
    background-color: var(--dangerColor);
    border-radius: .5rem;
    transition: 300ms;
}
.total_in input:checked ~ .checkmark {
    background-color: var(--successColor);
    border-radius: .5rem;
    animation: pulse 500ms ease-in-out;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.total_in input:checked ~ .checkmark:after {
    display: block;
}
.total_in .checkmark:after {
    left: 0.5em;
    top: 0.3em;
    width: 0.25em;
    height: 0.5em;
    border: solid #E0E0E2;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
}
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 #0B6E4F90;
        rotate: 20deg;
    }

    50% {
        rotate: -20deg;
    }

    75% {
        box-shadow: 0 0 0 10px #0B6E4F60;
    }

    100% {
        box-shadow: 0 0 0 13px #0B6E4F30;
        rotate: 0;
    }
}
.term_table_container{
    overflow-x: scroll;
    height: 80vh;
    overflow-y: scroll;
    direction: rtl;
    font-family: var(--masterFont);
    font-weight: 700;
}
.term_table_container table{
    border-collapse: collapse;
    white-space: nowrap;
    background-color: white;
}
.term_table_container thead{
    top: 0;
    position: sticky;
    border: 1px solid #000;
    z-index: 99;
}
.term_table_container thead th{
    padding: 8px;
}
.term_table_container th,
.term_table_container td{
    border: 1px solid #000;
    text-align: center;
}
.term_table_container th {
    font-weight: bold;
}
.term_table_container .header {
    background-color: #cce8cc;
}
.term_table_container .name_cell_title {
    background-color: #ffd966;
    position: sticky;
    right: 0;
    min-width: 400px;
    max-width: 400px;
}
.term_table_container .code_cell_title {
    background-color: #ffd966;
    position: sticky;
    right: 400px;
}
.term_table_container .name_cell {
    background-color: #dbdedb;
    position: sticky;
    right: 0;
    padding: 5px;
    min-width: 400px;
    max-width: 400px;
}
.term_table_container .code_cell_input {
    background-color: #6391e3;
    position: sticky;
    right: 400px;
}
.term_table_container .code_cell_input input {
    background-color: #6391e3;
    font-weight: bolder;
}
.term_table_container input{
    outline: none;
    border: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    min-width: 50px;
    max-width: 100%;
}
.term_table_container input:read-only{
    background-color: #dedede;
    cursor: no-drop;
    color: var(--dangerColor);
    font-weight: 800;
}
.term_table_container input:focus{
    border: 1px solid #000;
}
.excel_blue{
    background-color: #4472C4;
    color: white;
}
.excel_green{
    background-color: #70AD47;
}
.excel_yellow{
    background-color: #FFD966;
}
.excel_orange{
    background-color: #ED7D31;
}
.excel_red{
    background-color: #E74C3C;
    color: white;
}
.reports_term_table{
    border: 1px solid black;
}
.blue_degree{
    width: 100%;
    height: 100%;
    display: block;
    min-height: 45px;
    background-color: blue;
}
.green_degree{
    width: 100%;
    height: 100%;
    display: block;
    min-height: 45px;
    background-color: green;
}
.yellow_degree{
    width: 100%;
    height: 100%;
    display: block;
    min-height: 45px;
    background-color: yellow;
}
.red_degree{
    width: 100%;
    height: 100%;
    display: block;
    min-height: 45px;
    background-color: red;
}
.term_count_container table{
    border-collapse: collapse;
    white-space: nowrap;
    background-color: white;
    width: 100%;
}
.term_count_container{
    overflow-x: scroll;
    overflow-y: scroll;
    direction: rtl;
    font-family: var(--masterFont);
    font-weight: 700;
}
.term_count_container th,
.term_count_container td{
    border: 1px solid #000;
    text-align: center;
}
.term_count_table_container{
    overflow-x: scroll;
    overflow-y: scroll;
    direction: rtl;
    font-family: var(--masterFont);
    font-weight: 700;
}
.term_count_table_container table{
    border-collapse: collapse;
    white-space: nowrap;
    background-color: white;
    width: 100%;
}
.term_count_table_container thead{
    top: 0;
    position: sticky;
    border: 1px solid #000;
    z-index: 99;
}
.term_count_table_container thead th{
    padding: 8px;
}
.term_count_table_container th,
.term_count_table_container td{
    border: 1px solid #000;
    text-align: center;
}
.term_count_table_container .name_cell_title {
    background-color: #ffd966;
    position: sticky;
    right: 0;
    min-width: 400px;
    max-width: 400px;
}
.term_count_table_container .name_cell {
    background-color: #dbdedb;
    position: sticky;
    right: 0;
    padding: 5px;
    min-width: 400px;
    max-width: 400px;
}
.term_count_table_container .head65 {
    background-color: #ffd966;
}
.term_select_input{
    outline: none;
    border: 0;
    text-align: center;
    appearance: none;
    cursor: pointer;
    min-width: 100px;
}
/**===== Log =====**/
.log_action_status .log_success{
    color: var(--successColor);
    font-family: var(--logFont);
}
.log_action_status .log_danger{
    color: var(--dangerColor);
    font-family: var(--logFont);
}
.log_action_status .log_process{
    color: var(--processColor);
    font-family: var(--logFont);
}
.log_action_status .log_info{
    color: var(--infoColor);
    font-family: var(--logFont);
}
.log_action_status .log_pending{
    color: var(--pendingColor);
    font-family: var(--logFont);
}
.log_action_status .log_def{
    color: var(--headingColor);
    font-family: var(--logFont);
}
.log_section{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}
.log_section i {
    width: 20px;
    text-align: center;
}
.log_action_status i {
    width: 15px;
    text-align: center;
    margin-right: 5px;
}
/**temp**/
.custom_temp_timer{
    padding: 15px;
    text-align: center;
    font-size: 25px;
    color: var(--headingColor);
    font-family: var(--masterFont);
}
.custom_temp_timer strong{
    color: var(--masterColor);
}
/**===== App Login =====**/
.device_icon{
    width: 25px;
    height: 25px;
    text-align: center;
    margin-right: 8px;
    font-size: 20px;
}
.device_iphone{
    color: white;
}
.device_android{
    color: #3DDC84;
}
.lang_flag{
    width: 35px;
    border-radius: 2px;
    margin-right: 5px;
}
.lang_code{
    text-transform: uppercase;
    font-family: var(--secFont);
}
/*select all checked*/
.all_checkbox_tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6rem;
    min-height: 2rem;
    border: 2px solid var(--headingColor);
    border-radius: 0.5rem;
    background-color: var(--successColor);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transition: 0.15s ease;
    cursor: pointer;
    position: relative;
}
.all_checkbox_tile:before {
    content: "";
    font-size: 12px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--headingColor);
    border-radius: 50%;
    top: 0.25rem;
    left: 0.25rem;
    opacity: 0;
    transform: scale(0);
    transition: 0.25s ease;
}
.select_all_check:checked + .all_checkbox_tile:before{
    transform: scale(1);
    opacity: 1;
    border-color: var(--headingColor);
    color: #fff;
    content: "✓";
}
.all_checkbox_tile:hover:before {
    transform: scale(1);
    opacity: 1;
}
.all_checkbox_tile:hover {
    border-color: var(--headingColor);
}
.select_all_check:checked + .all_checkbox_tile,
.select_all_check:checked + .all_checkbox_tile .checkbox_label{
    color: var(--headingColor);
}
/**===== Status =====**/
.sys_status_icon{
    width: 50px;
    height: 50px;
    font-size: 40px;
    text-align: center;
    align-items: center;
    display: flex;
    color: var(--gray600);
}
.sys_status_data{
    margin-left: 10px;
    font-family: var(--masterFont);
    width: 100%;
}
.sys_status_data .status_item{
    display: flex;
    justify-content: space-between;
}
.status_item .status_item_title{
    color: var(--gray600);
}
.status_item .status_item_name{
    color: var(--headingColor);
}
.status_dot_online{
    width: 10px;
    height: 10px;
    background-color: var(--successColor);
    -webkit-animation: online 0.14s linear infinite;
    border-radius: 50%;
}
.status_dot_warning{
    width: 10px;
    height: 10px;
    background-color: var(--pendingColor);
    -webkit-animation: warning 0.14s linear infinite;
    border-radius: 50%;
}
.status_dot_error{
    width: 10px;
    height: 10px;
    background-color: var(--dangerColor);
    -webkit-animation: error 0.14s linear infinite;
    border-radius: 50%;
}
@-webkit-keyframes online{
    0%{
        background: #02d17d;
    }
    100%{
        background: #026840;
    }
}
@-webkit-keyframes warning{
    0%{
        background: #eab700;
    }
    100%{
        background: #866701;
    }
}
@-webkit-keyframes error{
    0%{
        background: #ef0d47;
    }
    100%{
        background: #970828;
    }
}
.online_status{
    text-transform: uppercase;
    color: var(--successColor);
}
.warning_status{
    text-transform: uppercase;
    color: var(--pendingColor);
}
.error_status{
    text-transform: uppercase;
    color: var(--dangerColor);
    font-family: var(--masterFont);
    font-weight: 600;
}
.info_status{
    text-transform: uppercase;
    color: var(--infoColor);
    font-family: var(--masterFont);
    font-weight: 600;
}
.pending_status{
    text-transform: uppercase;
    color: var(--pendingColor);
    font-family: var(--masterFont);
    font-weight: 600;
}
.success_status{
    text-transform: uppercase;
    color: var(--successColor);
    font-family: var(--masterFont);
    font-weight: 600;
}
.process_status{
    text-transform: uppercase;
    color: var(--processColor);
    font-family: var(--masterFont);
    font-weight: 600;
}
.status_item_q{
    color: var(--gray600);
    font-weight: 800;
}
.status_item_timer{
    color: var(--gray600);
    font-weight: 400;
}
.nfmsg{
    font-family: var(--masterFont);
    color: var(--headingColor);
}
/**===== Term PDF =====**/
.main_pdf{
    width: 210mm;
    height: 297mm;
    border-radius: 10px;
    /*background-image:url("../img/bgl.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;
    background-size: cover;*/
    z-index: 10;
    position: relative;
}
.timetable_img{
    width: 297mm;
    height: 210mm;
    border-radius: 10px;
    z-index: 10;
    position: relative;
}
.main_pdf table{
    border:1px solid black;
    font-family: var(--masterFont);
    text-align: center;
}
.main_pdf th{
    border:1px solid black;
    color: var(--headingColor);
    padding: 5px;
}
.main_pdf td{
    border:1px solid black;
    font-weight: bold;
}
.latter_head_sizes{
    padding: 3.5cm 1.5cm 8cm;
    /*padding: 3.5cm 1.5cm 3cm;*/
    width: 210mm;
    height: 297mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 297mm;
    /*background-color: white;*/
}
.latter_head_sizes_white{
    /*padding: 3.5cm 1.5cm 8cm;*/
    padding: 3.5cm 1.5cm 3cm;
    width: 210mm;
    height: 297mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 297mm;
    background-color: white;
}
.latter_head_sizes_white_new{
    padding: 3.5cm 1.5cm 3cm;
    width: 210mm;
    height: 297mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 297mm;
    background-color: white;
}
.timetable_LT{
    padding: 1cm 1.5cm 1cm;
    width: 297mm;
    height: 210mm;
    display: flex;
    flex-direction: column;
    justify-content: start;
    text-align: center;
    font-family: var(--masterFont);
    max-height: 210mm;
    font-weight: 700;
}
.timetable_LT .c_num{
    font-weight: 700;
    color: red;
    text-decoration: underline;
}
.timetable_table table{
    width: 100%;
    border: 2px solid black;
    border-collapse: collapse;
}
.timetable_table table th,
.timetable_table table td{
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}
.a_link{
    display: block;
    text-align: center;
    text-decoration: none;
}
.line_br{
    width: 100%;
    display: block;
    line-height: 0;
    border-bottom: 1px dashed black;
}
.te_name{
    font-size: 12px;
    color: red;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 5px;
}
.custom_td{
    line-height: 1;
    padding: 5px;
    border-bottom: 1px dashed black !important;
}
.brk_placeholder{
    color: red;
    font-size: 35px;
    transform: rotate(90deg);
    border: 0 !important;
}
.tt_top_info{
    padding: 3.4cm 2.5cm 0;
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-family: var(--masterFont);
    max-height: 210mm;
    font-weight: 700;
}
.tt_top_info h3{
    font-weight: 600;
}
.pdf_top_info{
    margin-top: 10px;
    margin-bottom: 10px;
}
.total_table{
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.total_table table{
    width: 50%;
    font-size: 12px;
    border-collapse: unset;
    border: 2px solid #901913;
}
.in_total {
    width: 100%; /* لضمان أن العرض يطابق الـ div */
    box-sizing: border-box; /* لأخذ الحواف في الحسبان */
    font-size: 12px;
}
.in_total table {
    width: 100%; /* لضبط عرض الجدول داخل div */
    border-collapse: unset; /* لإزالة الفراغات بين خلايا الجدول */
    border: 2px solid #901913;
}
.in_total table th,
.in_total table td {
    text-align: center; /* لمحاذاة النصوص */
    word-wrap: break-word; /* لتجنب النصوص الطويلة خارج الخلايا */
    font-family: var(--masterFont);
    padding: 0 3px;
}
.gold_logo{
    height: 4.5cm;
    width: 4.5cm;
    display: block;
    background-color: white;
    border-radius: 50%;
    opacity: 0;
}
.download_pdf_btn{
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    background: #15be0c;
    outline: none;
    border: 0;
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-weight: 700;
    line-height: 2;
}
.print_btn{
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    background: var(--pendingColor);
    outline: none;
    border: 0;
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-weight: 700;
    line-height: 2;
}
.save_pdf_btn{
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    background: var(--masterColor);
    outline: none;
    border: 0;
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-weight: 700;
}
.download_pdf_btn:disabled,
.save_pdf_btn:disabled,
.print_btn:disabled{
    background-color: var(--gray600);
    cursor: no-drop;
}
/**===== غسالة =====**/
.washing {
    width: 120px;
    height: 150px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-image: linear-gradient(#ddd 50%, #bbb 51%),
    linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd),
    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%);
    background-position: 0 20px, 45px 0, 8px 6px, 55px 3px, 75px 3px, 95px 3px;
    background-size: 100% 4px, 1px 23px, 30px 8px, 15px 15px, 15px 15px, 15px 15px;
    position: relative;
    border-radius: 6%;
    animation: shake 3s ease-in-out infinite;
    transform-origin: 60px 180px;
}

.washing:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 100%;
    width: 7px;
    height: 5px;
    background: #aaa;
    border-radius: 0 0 4px 4px;
    box-shadow: 102px 0 #aaa;
}

.washing:after {
    content: "";
    position: absolute;
    width: 95px;
    height: 95px;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 20px;
    background-color: #bbdefb;
    background-image: linear-gradient( to right, #0004 0%, #0004 49%, #0000 50%, #0000 100% ),
    linear-gradient(135deg, #64b5f6 50%, #607d8b 51%);
    background-size: 30px 100%, 90px 80px;
    border-radius: 50%;
    background-repeat: repeat, no-repeat;
    background-position: 0 0;
    box-sizing: border-box;
    border: 10px solid #DDD;
    box-shadow: 0 0 0 4px #999 inset, 0 0 6px 6px #0004 inset;
    animation: spin 3s ease-in-out infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(360deg)
    }

    75% {
        transform: rotate(750deg)
    }

    100% {
        transform: rotate(1800deg)
    }
}

@keyframes shake {
    65%, 80%, 88%, 96% {
        transform: rotate(0.5deg)
    }

    50%, 75%, 84%, 92% {
        transform: rotate(-0.5deg)
    }

    0%, 50%, 100% {
        transform: rotate(0)
    }
}
.loader {
    position: relative;
    font-size: 16px;
    width: 5.5em;
    height: 5.5em;
}

.loader:before {
    content: '';
    position: absolute;
    transform: translate(-50%, -50%) rotate(45deg);
    height: 100%;
    width: 4px;
    background: #fff;
    left: 50%;
    top: 50%;
}

.loader:after {
    content: '';
    position: absolute;
    left: 0.2em;
    bottom: 0.18em;
    width: 1em;
    height: 1em;
    background-color: orange;
    border-radius: 15%;
    animation: rollingRock 2.5s cubic-bezier(.79, 0, .47, .97) infinite;
}

@keyframes rollingRock {
    0% {
        transform: translate(0, -1em) rotate(-45deg)
    }

    5% {
        transform: translate(0, -1em) rotate(-50deg)
    }

    20% {
        transform: translate(1em, -2em) rotate(47deg)
    }

    25% {
        transform: translate(1em, -2em) rotate(45deg)
    }

    30% {
        transform: translate(1em, -2em) rotate(40deg)
    }

    45% {
        transform: translate(2em, -3em) rotate(137deg)
    }

    50% {
        transform: translate(2em, -3em) rotate(135deg)
    }

    55% {
        transform: translate(2em, -3em) rotate(130deg)
    }

    70% {
        transform: translate(3em, -4em) rotate(217deg)
    }

    75% {
        transform: translate(3em, -4em) rotate(220deg)
    }

    100% {
        transform: translate(0, -1em) rotate(-225deg)
    }
}
.pdf_footer_txt{
    text-align: center;
    font-family: var(--secFont);
    font-size: 25px;
    margin-top: 5px;
    color: #901913;
    margin-bottom: 0;
}
.underline_img{
    width: 100%;
    text-align: center;
    line-height: 0;
}
.underline_img img{
    width: 300px;
}
.kg_pdf .in_total{
    display: flex;
    align-items: center;
    justify-content: center;
}
.got_pdf .in_total{
    display: flex;
    align-items: center;
    justify-content: center;
}
.kg_pdf .in_total table{
    width: 50% !important;
}
.got_pdf .in_total table{
    width: 65% !important;
}
.kg_pdf .in_total table th,
.kg_pdf .in_total table td{
    padding: 8px !important;
    font-size: 15px !important;
}
.got_pdf .in_total table th,
.got_pdf .in_total table td{
    padding: 5px !important;
    font-size: 20px !important;
}
.bg_pdf{
    position: relative;
}
.bg_pdf img{
    position: absolute;
    width: 210mm;
    height: 297mm;
    z-index: -1;
}
.TT_LT{
    position: relative;
}
.TT_LT img{
    position: absolute;
    width: 297mm;
    height: 210mm;
    z-index: -1;
}
/**===== Fees =====**/
.platform_logo{
    width: 100%;
    background: white;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px;
    max-height: 50px;
}
.platform_logo img{
    width: 75%;
}
.fees_platform_box{
    background-color: white;
    padding: 20px 30px;
    border: 1px solid var(--gray500);
    border-radius: 10px;
    font-family: var(--masterFont);
    width: 100%;
}
.platform_box_header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.platform_box_header img{
    width: 50%;
}
.platform_box_header p{
    color: var(--gray500);
    font-size: 15px;
    margin: 10px;
    font-style: italic;
}
.platform_box_body .fee_list{
    border-bottom: 1px dashed var(--gray600);
    font-weight: 700;
    font-size: 20px;
}
.platform_box_body .fee_title{
    color: var(--gray600);
    font-weight: 500;
}
.platform_box_body .action_btn{
    color: var(--gray600);
    font-size: 15px;
}
/**===== Account =====**/
.account_info{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.account_img_placeholder{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    text-transform: uppercase;
}
.account_img img{
    width: 100px;
    height: 100px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 200px;
    border: 2px solid #fff;
}
.account_name{
    margin-top: 10px;
    color: var(--headingColor);
    font-family: var(--masterFont);
    text-transform: capitalize;
    font-size: 20px;
}
.account_status{
    margin-top: 10px;
}
.account_badges{
    margin-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--gray200);
    flex-wrap: wrap;
    font-size: 25px;
}
.account_badges span{
    margin: 5px;
    cursor: help;
}
.account_badges .red_flag{
    color: var(--dangerColor);
}
.account_badges .standing{
    color: var(--successColor);
}
.account_badges .review{
    color: var(--pendingColor);
}
.account_badges .vip{
    color: #FFD700;
}
.account_badges .warning{
    color: #fa7203;
}
.account_badges .vision{
    color: var(--infoColor);
}
.account_badges .payment_pending{
    color: var(--pendingColor);
}
.account_badges .banned{
    color: var(--dangerColor);
}
.account_badges .support{
    color: var(--processColor);
}
.account_details{
    margin-top: 10px;
    display: flex;
    align-items: start;
    justify-content: start;
    width: 100%;
}
.account_details ul{
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: var(--masterFont);
}
.account_details ul li{
    margin-bottom: 10px;
}
.detail_name{
    color: var(--headingColor);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}
.detail_data{
    color: var(--gray500);
    font-size: 15px;
    font-weight: 400;
    line-height: 2;
    font-family: var(--masterFont);
}
.account_tabs ul{
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
}
.account_tabs ul li{
    margin: 10px 0;
}
.account_tabs ul li a{
    text-decoration: none;
    color: var(--gray600);
    font-size: 20px;
    font-family: var(--masterFont);
    font-weight: 300;
    line-height: 1;
    padding: 5px 0;
    transition: all ease 0.1s;
    cursor: pointer;
}
.account_tabs ul li a:hover{
    color: var(--masterColor);
    font-weight: 500;
    border-bottom: 2px solid var(--masterColor);
}
.account_tabs ul li a.active_tab{
    color: var(--masterColor);
    font-weight: 500;
    border-bottom: 2px solid var(--masterColor);
}
.account_tabs ul li a.disabled_tab{
    color: var(--gray200);
    cursor: no-drop;
}
.account_tabs ul li a.disabled_tab:hover{
    border: 0;
}
.overview_title{
    color: var(--headingColor);
    font-size: 18px;
    font-weight: 600;
    font-family: var(--masterFont);
    margin: 10px 0;
}
.overview_data{
    color: var(--gray500);
    font-size: 18px;
    font-weight: 400;
    font-family: var(--masterFont);
    text-transform: capitalize;
    margin: 10px 0;
}
#copy_btn{
    cursor: pointer;
}
.account_delete_opt{
    margin-bottom: 10px;
}
.cbx {
    position: relative;
    top: 1px;
    width: 25px;
    height: 25px;
    border: 1px solid #c8ccd4;
    border-radius: 3px;
    vertical-align: middle;
    transition: background 0.1s ease;
    cursor: pointer;
    display: block;
}
.cbx:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 8px;
    width: 7px;
    height: 14px;
    opacity: 0;
    transform: rotate(45deg) scale(0);
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transition: all 0.3s ease;
    transition-delay: 0.15s;
}
.delete_title {
    margin-left: 5px;
    vertical-align: middle;
    color: var(--gray500);
}
.cbi:checked ~ .cbx {
    border-color: transparent;
    background: var(--dangerColor);
    animation: jelly 0.6s ease;
}
.cbi:disabled ~ .cbx {
    border-color: transparent;
    background: var(--gray500);
    animation: jelly 0.6s ease;
}
.cbi:checked ~ .cbx:after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}
.delete_check {
    position: relative;
}
@keyframes jelly {
    from {
        transform: scale(1, 1);
    }

    30% {
        transform: scale(1.25, 0.75);
    }

    40% {
        transform: scale(0.75, 1.25);
    }

    50% {
        transform: scale(1.15, 0.85);
    }

    65% {
        transform: scale(0.95, 1.05);
    }

    75% {
        transform: scale(1.05, 0.95);
    }

    to {
        transform: scale(1, 1);
    }
}
.hidden_xs_up {
    display: none!important;
}
.device_title{
    color: var(--headingColor);
    font-family: var(--masterFont);
    line-height: 0;
}
.device_info{
    color: var(--gray600);
    font-family: var(--masterFont);
    margin-top: 5px;
}
.device_logo{
    width: 200px;
    text-align: center;
}
.device_logo img{
    width: 100%;
}
img.device_lg_logo{
    width: 50%;
}
.device_token{
    width: 100%;
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    border-radius: 10px;
    position: relative;
    border: 2px solid var(--borderColor);
    background-color:var(--inputBGColor);
}
.device_token .prefix{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--headingColor);
    font-size: 15px;
    font-family: var(--masterFont);
    height: 100%;
    width: 70px;
    font-weight: 600;
    padding: 10px;
    background-color: var(--gray200);
    border-radius: 10px 0 0 10px;
}
.device_token .token_input{
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
    padding: 0 10px;
    color: var(--headingColor);
    font-family: var(--masterFont);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: var(--inputBGColor);
}
.token_icon{
    font-size: 16px;
    color: var(--gray600);
    height: 100%;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 10px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    position: relative;
}
.brothers_avatar{
    padding: 5px;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid white;
    margin-right: 5px;
    z-index: 2;
    position: relative;
}
.more_avatar{
    padding: 5px;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    font-size: 15px;
    color: var(--gray200);
    background-color: var(--gray600);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid white;
    margin-right: 5px;
    z-index: 0;
    position: relative;
    left: -40px;
}
.avatar_link:not(:first-of-type){
    position: relative;
    left: -20px;
    z-index: 1!important;
}
.avatar_link{
    text-decoration: none;
    width: fit-content;
}
.ticket_link{
    cursor: pointer;
}
.modal_info_desc{
    margin: 0;
    text-align: right;
    direction: rtl;
    font-family: var(--masterFont);
    color: var(--headingColor);
    border-bottom: 1px dashed var(--borderColor);
    padding-bottom: 10px;
}
.tck_desc_title{
    direction: rtl;
    font-family: var(--masterFont);
    color: var(--gray600);
    width: 100%;
    display: block;
    text-align: right;
    margin-top: 5px;
}
/**===== Activity =====**/
.activity_item{
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 25px;
    position: relative;
}
.activity_item:last-of-type .activity_line{
    display: none;
}
.activity_line{
    display: block;
    content: " ";
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 0;
    border-left: 1px dashed var(--gray500);
    width: 40px;
    top: 40px;
    transform: translate(50%);
}
.activity_highlight{
    color: var(--masterColor)!important;
    font-weight: 600!important;
}
.activity_item .activity_icon{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px dashed var(--gray500);
    color: var(--gray600);
    font-size: 14px;
}
.activity_data .activity_title{
    font-family: var(--masterFont);
    color: var(--headingColor);
    font-weight: 400;
    font-size: 18px;
}
.activity_data .activity_info{
    font-family: var(--masterFont);
    color: var(--gray500);
    font-size: 13px;
}
.activity_data .activity_info img{
    width: 25px;
    margin: 5px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid var(--gray200);
}
.reject_reason{
    direction: rtl;
    padding: 5px;
    background: var(--gray200);
    margin: 5px 0;
    border-radius: 10px;
    border: 1px dashed;
}
/****/
.containerX {
    position: relative;
    margin: auto;
    overflow: hidden;
    width: 650px;
}
h1 {
    font-family: var(--masterFont);
    text-align: center;
    margin-top: 2em;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #F6F4F3;
}

.date_yo{
    font-family: var(--secFont);
    color: white;
}

#timer {
    color: #F6F4F3;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--masterFont);
    font-size: 0.7em;
    letter-spacing: 5px;
    margin-top: 25%;
}

.days, .hours, .minutes, .seconds {
    display: inline-block;
    padding: 10px;
    width: 100px;
    border-radius: 5px;
    text-align: center;
}

.days {
    background: #EF2F3C;
}

.hours {
    background: #F6F4F3;
    color: #183059;
}

.minutes {
    background: #276FBF;
}

.seconds {
    background: #F0A202;
}
.numbers {
    font-family: "Montserrat", sans-serif;
    color: #183059;
    font-size: 4em;
}

.white {
    position: absolute;
    background: #F6F4F3;
    height: 85px;
    width: 75px;
    left: 30%;
    top: 2%;
}
.white .triangle {
    border-bottom: 14px solid #F6F4F3;
}
.white .string {
    background: #F6F4F3;
    border: 1px solid #F6F4F3;
}

.red {
    position: absolute;
    background: #EF2F3C;
    left: 18%;
    top: 9%;
    height: 65px;
    width: 70px;
}
.red .triangle {
    border-bottom: 14px solid #EF2F3C;
}
.red .string {
    background: #EF2F3C;
    border: 1px solid #EF2F3C;
}

.blue {
    position: absolute;
    background: #276FBF;
    height: 80px;
    width: 80px;
    left: 55%;
    top: 5%;
}
.blue .triangle {
    border-bottom: 14px solid #276FBF;
}
.blue .string {
    background: #276FBF;
    border: 1px solid #276FBF;
}

.balloon {
    border: 1px solid #000;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    z-index: 2;
}

.eye {
    position: absolute;
    width: 7px;
    height: 7px;
    top: 40%;
    left: 22%;
    background: #000;
    border-radius: 50%;
}
.eye:after {
    content: "";
    left: 35px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #000;
    position: absolute;
}

.mouth {
    position: absolute;
    top: 45%;
    left: 43%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.happy {
    border: 2px solid;
    border-color: transparent #000 #000 transparent;
    transform: rotate(45deg);
}

.triangle {
    position: absolute;
    left: 40%;
    bottom: -10%;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.string {
    position: absolute;
    height: 70px;
    width: 1px;
    left: 48%;
    top: 100%;
    z-index: -1;
}

.star {
    width: 20px;
    height: 20px;
    background: #F6F4F3;
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.star-red {
    width: 30px;
    height: 30px;
    margin-left: 51px;
    margin-top: -5px;
    background: #EF2F3C;
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/**===== System Version =====**/
.sys_flex_box{
    background: var(--boxColor);
    width: 100%;
    padding: 10px;
    border: 1px solid var(--gray500);
    border-radius: 10px;
}
.sys_v_box_header{
    font-family: var(--masterFont);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sys_v_box_header h2{
    color: var(--headingColor);
    line-height: 1;
}
.sys_v_box_header span{
    color: var(--gray600);
    line-height: 1;
}
.v_item{
    display: flex;
    align-items: start;
    justify-content: start;
    padding: 5px 0;
    border-bottom: 1px dashed var(--gray200);
}
.v_icon{
    width: 25px;
    text-align: center;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    line-height: 1;
}
.v_new{
    color: var(--successColor);
}
.v_fix{
    color: var(--pendingColor);
}
.v_imp{
    color: var(--infoColor);
}
.v_rev{
    color: var(--dangerColor);
}
.v_data{
    font-family: var(--masterFont);
    color: var(--headingColor);
    font-weight: 600;
}
.production_ver{
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-weight: 500;
    font-size: 25px;
    padding: 0 10px;
    display: flex;
}
.production_ver strong{
    color: var(--dangerColor);
    font-size: 10px;
}
.ad_item{
    position: relative;
}
.ad_item .ad_img{
    width: 100%;
    border-radius: 10px;
}
.ad_item .btn_placeholder{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    padding: 15px;
    justify-content: space-between;
}
.btn_placeholder .ad_close_btn{
    width: 100%;
    text-align: end;
    font-size: 25px;
}
.btn_placeholder .ad_link_btn{
    width: 100%;
    text-align: center;
    padding: 10px;
    border-radius: 50px;
    font-family: var(--masterFont);
    font-weight: 600;
    border: 0;
}
.pdf_page{
    width: 210mm;
    height: 297mm;
    background-color: white !important;
    padding: 3mm;
}
.pdf_img{
    width: 210mm;
    background-color: white !important;
    padding: 3mm;
}
.pdf_img img{
    max-width: 100%;
}
.style_box {
    border: 2px solid #a90514;
    border-radius: 20px;
    margin: 3px;
    padding: 10px;
}
.pdf_title {
    font-family: var(--masterFont);
    font-weight: 600;
    font-style: italic;
    color: #000;
}
.top_data {
    font-family: var(--masterFont);
    font-weight: 900;
    color: #000;
}
.main_title_style {
    text-align: center;
    background: #a90514;
    border-radius: 50px;
    color: #fff;
    font-family: var(--masterFont);
    font-weight: 600;
    margin: 0;
    font-size: 30px;
}
.st_data h6 {
    font-family: var(--masterFont);
    font-weight: 600;
    font-style: italic;
    color: #000;
}
.st_data h5 {
    font-family: var(--masterFont);
    font-weight: 900;
    color: #a90514;
    word-break: break-word;
}
.frame {
    border: 2px solid #a90514;
    border-radius: 10px;
    text-align: center;
    max-width: 75%;
    padding: 5px;
}
.frame img {
    max-width: 75%;
    border-radius: 10px;
    max-height: 130px;
}
.mid_data {
    font-family: var(--masterFont);
    font-weight: 900;
    color: #a90514;
}
.id_class img{
    max-width: 90%;
    object-fit: contain;
    padding: 10px;
}
.pdf_print_btn{
    width: 210mm;
    padding: 5px;
    border-radius: 10px;
    background: var(--masterColor);
    color: var(--headingColor);
    font-family: var(--masterFont);
    font-weight: 700;
    border: 0;
}
.star_color{
    color: #ccc !important;
}
.emp_img{
    width: 4cm;
    border-radius: 10px;
    margin-right: 20px;
    /*aspect-ratio: 1 / 1;*/
    /*object-fit: cover;*/
    border: 2px solid #a90514;
    max-height: 6cm;
}
.boxes {
    --size: 32px;
    --duration: 800ms;
    height: calc(var(--size) * 2);
    width: calc(var(--size) * 3);
    position: relative;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    margin-top: calc(var(--size) * 1.5 * -1);
    transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
}

.boxes .box {
    width: var(--size);
    height: var(--size);
    top: 0;
    left: 0;
    position: absolute;
    transform-style: preserve-3d;
}

.boxes .box:nth-child(1) {
    transform: translate(100%, 0);
    -webkit-animation: box1 var(--duration) linear infinite;
    animation: box1 var(--duration) linear infinite;
}

.boxes .box:nth-child(2) {
    transform: translate(0, 100%);
    -webkit-animation: box2 var(--duration) linear infinite;
    animation: box2 var(--duration) linear infinite;
}

.boxes .box:nth-child(3) {
    transform: translate(100%, 100%);
    -webkit-animation: box3 var(--duration) linear infinite;
    animation: box3 var(--duration) linear infinite;
}

.boxes .box:nth-child(4) {
    transform: translate(200%, 0);
    -webkit-animation: box4 var(--duration) linear infinite;
    animation: box4 var(--duration) linear infinite;
}

.boxes .box > div {
    --background: #5C8DF6;
    --top: auto;
    --right: auto;
    --bottom: auto;
    --left: auto;
    --translateZ: calc(var(--size) / 2);
    --rotateY: 0deg;
    --rotateX: 0deg;
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--background);
    top: var(--top);
    right: var(--right);
    bottom: var(--bottom);
    left: var(--left);
    transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
}

.boxes .box > div:nth-child(1) {
    --top: 0;
    --left: 0;
}

.boxes .box > div:nth-child(2) {
    --background: #145af2;
    --right: 0;
    --rotateY: 90deg;
}

.boxes .box > div:nth-child(3) {
    --background: #447cf5;
    --rotateX: -90deg;
}

.boxes .box > div:nth-child(4) {
    --background: #DBE3F4;
    --top: 0;
    --left: 0;
    --translateZ: calc(var(--size) * 3 * -1);
}

@-webkit-keyframes box1 {
    0%, 50% {
        transform: translate(100%, 0);
    }

    100% {
        transform: translate(200%, 0);
    }
}

@keyframes box1 {
    0%, 50% {
        transform: translate(100%, 0);
    }

    100% {
        transform: translate(200%, 0);
    }
}

@-webkit-keyframes box2 {
    0% {
        transform: translate(0, 100%);
    }

    50% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(100%, 0);
    }
}

@keyframes box2 {
    0% {
        transform: translate(0, 100%);
    }

    50% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(100%, 0);
    }
}

@-webkit-keyframes box3 {
    0%, 50% {
        transform: translate(100%, 100%);
    }

    100% {
        transform: translate(0, 100%);
    }
}

@keyframes box3 {
    0%, 50% {
        transform: translate(100%, 100%);
    }

    100% {
        transform: translate(0, 100%);
    }
}

@-webkit-keyframes box4 {
    0% {
        transform: translate(200%, 0);
    }

    50% {
        transform: translate(200%, 100%);
    }

    100% {
        transform: translate(100%, 100%);
    }
}

@keyframes box4 {
    0% {
        transform: translate(200%, 0);
    }

    50% {
        transform: translate(200%, 100%);
    }

    100% {
        transform: translate(100%, 100%);
    }
}
.term_info{
    margin-top: 10px;
}
.term_info ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.term_info ul li{
    font-family: var(--masterFont);
    color: #a90514;
    font-weight: bold;
    font-size: 13px;
}
.term_info ul li span{
    color: #0448da;
    font-weight: 900;
}
.term_info ul li i{
    color: #0448da;
    font-size: 10px;
}
.drop_icon{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}
.drop_icon button{
    background: transparent;
    border:1px solid transparent;
    color: var(--gray600);
    line-height: 0;
    padding: 5px;
    border-radius: 5px;
    outline: 2px solid transparent;
}
.drop_icon button:focus{
    outline: 2px solid var(--gray600);
    border: 1px solid var(--masterColor);
}
.dropdown-menu .delete_item{
    color: var(--dangerColor) !important;
}
/**===== WIFI Loading =====**/
#wifi-loader {
    --background: #62abff;
    --front-color: var(--masterColor);
    --back-color: #c3c8de;
    --text-color: #414856;
    width: 64px;
    height: 64px;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    scale: 200%;
}

#wifi-loader svg {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

#wifi-loader svg circle {
    position: absolute;
    fill: none;
    stroke-width: 6px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(-100deg);
    transform-origin: center;
}

#wifi-loader svg circle.back {
    stroke: var(--back-color);
}

#wifi-loader svg circle.front {
    stroke: var(--front-color);
}

#wifi-loader svg.circle-outer {
    height: 86px;
    width: 86px;
}

#wifi-loader svg.circle-outer circle {
    stroke-dasharray: 62.75 188.25;
}

#wifi-loader svg.circle-outer circle.back {
    animation: circle-outer135 1.8s ease infinite 0.3s;
}

#wifi-loader svg.circle-outer circle.front {
    animation: circle-outer135 1.8s ease infinite 0.15s;
}

#wifi-loader svg.circle-middle {
    height: 60px;
    width: 60px;
}

#wifi-loader svg.circle-middle circle {
    stroke-dasharray: 42.5 127.5;
}

#wifi-loader svg.circle-middle circle.back {
    animation: circle-middle6123 1.8s ease infinite 0.25s;
}

#wifi-loader svg.circle-middle circle.front {
    animation: circle-middle6123 1.8s ease infinite 0.1s;
}

#wifi-loader svg.circle-inner {
    height: 34px;
    width: 34px;
}

#wifi-loader svg.circle-inner circle {
    stroke-dasharray: 22 66;
}

#wifi-loader svg.circle-inner circle.back {
    animation: circle-inner162 1.8s ease infinite 0.2s;
}

#wifi-loader svg.circle-inner circle.front {
    animation: circle-inner162 1.8s ease infinite 0.05s;
}

#wifi-loader .text {
    position: absolute;
    bottom: -40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.2px;
}

#wifi-loader .text::before, #wifi-loader .text::after {
    content: attr(data-text);
}

#wifi-loader .text::before {
    color: var(--text-color);
}

#wifi-loader .text::after {
    color: var(--front-color);
    animation: text-animation76 3.6s ease infinite;
    position: absolute;
    left: 0;
}

@keyframes circle-outer135 {
    0% {
        stroke-dashoffset: 25;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 301;
    }

    80% {
        stroke-dashoffset: 276;
    }

    100% {
        stroke-dashoffset: 276;
    }
}

@keyframes circle-middle6123 {
    0% {
        stroke-dashoffset: 17;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 204;
    }

    80% {
        stroke-dashoffset: 187;
    }

    100% {
        stroke-dashoffset: 187;
    }
}

@keyframes circle-inner162 {
    0% {
        stroke-dashoffset: 9;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 106;
    }

    80% {
        stroke-dashoffset: 97;
    }

    100% {
        stroke-dashoffset: 97;
    }
}

@keyframes text-animation76 {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    50% {
        clip-path: inset(0);
    }

    100% {
        clip-path: inset(0 0 0 100%);
    }
}
#att_data_loading{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 200px;
}
.account_setting_opt{
    display: flex;
    justify-content: end;
    align-items: end;
    flex-direction: column-reverse;
    gap: 10px;
}
.sys_rounded_btn{
    padding: 10px 20px;
    border-radius: 100px;
    font-family: var(--masterFont);
    font-weight: 700;
    border: 0;
}
.sys_rounded_btn:hover,
.sys_card_btn:hover{
    filter: brightness(80%);
}
.sys_rounded_btn:disabled{
    background: #afafaf !important;
    cursor: not-allowed;
}
.submit_btn{
    color: var(--headingColor);
    background: var(--masterColor);
}
.delete_btn{
    color: var(--headingColor);
    background: var(--dangerColor);
}
.process_btn{
    color: var(--gray200);
    background: var(--pendingColor);
}
.success_btn{
    color: var(--headingColor);
    background: var(--successColor);
}
/**===== Code latter Page =====**/
.code_latter_a4{
    width: 210mm;
    height: 297mm;
    z-index: 10;
    position: relative;
    border-radius: 10px;
}
.code_latter_bg{
    position: relative;
    border-radius: 10px;
}
.code_latter_bg img{
    width: 210mm;
    height: 297mm;
    z-index: -1;
    position: absolute;
    border-radius: 10px;
}
.code_data{
    padding: 20.7cm 3.7cm 3.7cm 3.7cm;
    width: 210mm;
    height: 297mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 297mm;
}
.code_data ul{
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: var(--masterFont);
    font-weight: 800;
}
.code_data ul li{
    margin: 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.code_data_title{
    color: #243f62;
}
.code_data ul li span{
    color: #a90514;
    font-family: var(--logFont);
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bs-border-color-translucent);
    border-radius: 50px;
    border: 1px solid var(--bs-border-color-translucent);
    letter-spacing: 4px;
}
.code_label{
    width: 10cm;
    height: 5cm;
    background: #fff;
    border-radius: 10px;
    padding: 0.5cm;
    font-family: var(--masterFont);
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: black;
}
.code_label img{
    width: 95%;
}
.code_label_name{
    white-space: nowrap;
    overflow: hidden;
}
.code_label_class{
    font-size: 30px;
}
.account_setting_title{
    font-family: var(--masterFont);
}
.account_setting_title h5{
    color: var(--headingColor);
}
.account_setting_title span{
    color: var(--gray500);
}
#pdfFrame {
    display: block;
    position: absolute;
    left: -9999px; /* بعيد عن الشاشة */
}

#code_a4, #label {
    visibility: visible; /* مهم */
}
.login_data{
    padding: 15px;
    background: var(--pendingColorlight);
    border-radius: 50px;
    border: 2px dashed var(--pendingColor);
    font-family: var(--masterFont);
    margin-bottom: 10px;
}
.student_login_data{
    padding: 10px 20px;
    background: white;
    border-radius: 50px;
    font-family: var(--logFont);
    font-weight: 900;
    text-align: center;
    color: var(--dangerColor);
    letter-spacing: 10px;
    line-height: 1;
    font-size: 20px;
}
.sys_modal_pin_input{
    width: 100%;
    padding: 10px 15px;
    border: 0;
    border-radius: 10px;
    margin-bottom: 20px;
    background: var(--gray100);
    font-family: var(--masterFont);
    color: var(--inputTextColor);
    outline: none;
    transition: all 0.2s ease-in-out;
    min-height: 50px;
    text-align: center;
}
.sys_modal_pin_input:focus{
    border: 1px solid var(--masterColor);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
}
#pinMsg,#passMsg{
    text-align: center;
    font-family: var(--masterFont);
}
.pin_err,#passMsg{
    color: var(--dangerColor);
}
.pin_scc{
    color: var(--successColor);
}
.pin_loader{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: var(--masterFont);
    color: white;
}
.permission-group{
    padding: 0 10px;
}
.sys_main_checkbox{
    position: relative;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border-radius: 100px;
}
.sys_main_checkbox:hover{
    background: var(--processColorlight);
}
.sys_main_checkbox input {
    display: none;
}
.sys_main_checkbox .checkbox_wrapper {
    position: relative;
    width: 25px;
    height: 25px;
    border-radius: 100px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.sys_main_checkbox .checkbox_bg {
    position: absolute;
    inset: 0;
    border-radius: 100px;
    border: 2px solid var(--checkbox-border);
    background: white;
    transition: all 0.2s ease;
}
.sys_main_checkbox .checkbox_icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 80%;
    height: 80%;
    color: white;
    transform: scale(0);
    transition: all 0.2s ease;
}
.sys_main_checkbox .check_path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    transition: stroke-dashoffset 0.3s ease 0.1s;
}
.sys_main_checkbox .checkbox_text{
    line-height: 1;
    color: var(--headingColor);
    font-family: var(--masterFont);
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Checked State */
.sys_main_checkbox input:checked + .checkbox_wrapper .checkbox_bg {
    background: var(--masterColor);
    border-color: var(--masterColor);
}
.sys_main_checkbox input:checked + .checkbox_wrapper .checkbox_icon {
    transform: scale(1);
}
.sys_main_checkbox input:checked + .checkbox_wrapper .check_path {
    stroke-dashoffset: 0;
}
/* Hover Effects */
.sys_main_checkbox:hover .checkbox_wrapper {
    transform: scale(1.05);
}
/* Active Animation */
.sys_main_checkbox:active .checkbox_wrapper {
    transform: scale(0.95);
}
/* Focus Styles */
.sys_main_checkbox input:focus + .checkbox_wrapper .checkbox_bg {
    box-shadow: 0 0 0 4px var(--checkbox-bg);
}
/* Animation */
@keyframes bounce_chk {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}
.sys_main_checkbox input:checked + .checkbox_wrapper {
    animation: bounce_chk 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.weeks_func{
    font-family: var(--masterFont);
    color: var(--headingColor);
    direction: rtl;
}
.main_weeks{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.main_weeks label{
    cursor: pointer;
    font-size: 40px;
    margin-bottom: 10px;
}
.weeks_func input{
    text-align: center;
    background: white;
    border: 1px solid lightgray;
    border-radius: 10px;
    padding: 10px;
    font-size: 20px;
    width: 100%;
}
.weeks_total{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    gap: 10px;
}
.weeks_total span{
    color: var(--masterColor);
    font-weight: 900;
}
.sys_radio_container{
    display: flex;
    align-items: center;
    gap: 24px;
}
.sys_radio_container .radio_button {
    display: inline-block;
    position: relative;
    cursor: pointer;
}
.sys_radio_container .radio_button_input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.sys_radio_container .radio_button_label {
    display: inline-block;
    padding-left: 30px;
    position: relative;
    font-size: 15px;
    color: #f2f2f2;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
.sys_radio_container .radio_button_custom {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #555;
    transition: all 0.3s ease;
}
.radio_button_input:checked + .radio_button_label .radio_button_custom {
    background-color: var(--masterColor);
    border-color: transparent;
    transform: scale(0.8);
    box-shadow: 0 0 20px var(--processColorlight);
}
.radio_button_input:checked + .radio_button_label {
    color: var(--masterColor);
}
.radio_button_label:hover .radio_button_custom {
    transform: scale(1.2);
    border-color: var(--masterColor);
    box-shadow: 0 0 20px var(--processColorlight);
}
/*sys input*/
.sys_main_input{
    position: relative;
    width: 100%;
    font-family: var(--masterFont);
}
.sys_main_input input{
    width: 100%;
    padding: 28px 18px 8px 18px;
    background: var(--inputBGColor);
    border-radius: 15px;
    color: var(--headingColor);
    font-size: 16px;
    outline: none;
    transition: 0.3s ease;
    border: 1px solid var(--inputBGColor);
}
.sys_main_input label {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 15px;
    pointer-events: none;
    transition: 0.3s ease;
}
.sys_main_input input::placeholder {
    opacity: 0;
    transition: 0.3s;
}
.sys_main_input input:focus::placeholder {
    opacity: 1;
}
.sys_main_input input:focus{
    border: 1px solid var(--inputFocusColor);
}
.sys_main_input input:focus + label,
.sys_main_input input:not(:placeholder-shown) + label {
    font-size: 13px;
    top: 20px;
}
.sys_main_input .label_verify{
    margin-left: 5px;
}
.sys_main_select_input select{
    width: 100%;
    padding: 18px 14px;
    background: var(--inputBGColor);
    border-radius: 15px;
    color: var(--headingColor);
    font-size: 16px;
    outline: none;
    transition: 0.3s ease;
    border: 1px solid var(--inputBGColor);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.sys_main_select_input select:disabled{
    cursor: no-drop;
    background: var(--gray500);
}
.sys_main_box_input select{
    width: 100%;
    padding: 18px 14px;
    background: var(--inputBGColor);
    border-radius: 15px;
    color: var(--headingColor);
    font-size: 16px;
    outline: none;
    transition: 0.3s ease;
    border: 1px solid var(--inputFocusColor);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.save_status{
    display: none;
    font-size: 14px;
}
.save_status.saving { display: inline; color: orange; }
.save_status.saved  { display: inline; color: var(--successColor); }
.save_status.error  { display: inline; color: red; }
.sys_eve_box{
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    background: var(--boxColor);
    border: 1px solid var(--borderColor);
    padding: 15px;
    justify-content: center;
    align-items: center;
    font-family: var(--masterFont);
}
.sys_eve_box h2{
    color: var(--headingColor);
}
.sys_eve_box select{
    width: 100%;
    padding: 10px;
    background: var(--inputBGColor);
    border-radius: 15px;
    color: var(--headingColor);
    font-size: 16px;
    outline: none;
    transition: 0.3s ease;
    border: 1px solid var(--inputBGColor);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-bottom: 10px;
}
.sys_main_card{
    background: var(--boxColor);
    border-radius: 15px;
    font-family: var(--masterFont);
}
.sys_main_card .card_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--gray500);
}
.sys_main_card .card_body{
    padding: 15px;
    border-bottom: 1px solid var(--gray500);
}
.sys_main_card .card_footer{
    display: flex;
    justify-content: end;
    align-items: end;
    padding: 15px;
}
.card_header strong{
    color: var(--headingColor);
    font-size: 20px;
}
.focus_border{
    border: 1px solid var(--inputFocusColor) !important;
}
.sys_main_input input:read-only{
    cursor: no-drop !important;
}
.sys_card_btn{
    padding: 10px 20px;
    border-radius: 15px;
    font-family: var(--masterFont);
    font-weight: 700;
    border: 0;
}
.sys_card_btn:disabled{
    background: var(--gray500) !important;
    cursor: not-allowed;
}
.table_data_col_vr{
    text-align: center;
    font-size: 25px;
    border: 1px solid black;
    padding: 10px;
    writing-mode: sideways-lr;
}
.excel_table td{
    border: 1px solid #000;
    text-align: center;
}
.excel_table td input{
    outline: none;
    border: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    min-width: 50px;
    max-width: 100%;
    cursor: cell;
}
.excel_table td input:read-only{
    background: #dbdedb ;
    cursor: no-drop;
}
.excel_table .table_name_cell{
    background-color: #dbdedb;
    padding: 5px;
    min-width: 400px;
    max-width: 400px;
}
.evals.error{
    background: red;
    color: white;
}
.evals.ap_alert{
    background: orange;
    color: black;
}
.excel_gray{
    background-color: #cccdcf !important;
    color: black !important;
}
.AMEE_cell_active,
.AMEE_cell_active input{
    outline: 3px dashed black !important;
}
/* الصف
.AMEE_row_active td,
.AMEE_row_active input,
.AMEE_row_active .total{
    background-color: #cdcdcd !important;
}
*/
.AMEE_row_active .table_name_cell{
    background-color: #daa478 !important;
}
/* العمود */
.AMEE_col_active{
    background-color: #cdcdcd;
    color: black;
}

/* التقاطع (الخلية نفسها) */
.AMEE_row_active .AMEE_col_active {
    background-color: #cdcdcd;
}
.AMEE_cell.selected_cell {
    background: #cce5ff;
    outline: 2px solid #3399ff;
}
.AMEE_cell.copied {
    background: #e6f7ff;
}

.cell_wrapper {
    position: relative;
}
.fill_handle {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 6px;
    height: 6px;
    background: #1a73e8;
    cursor: crosshair;
    display: none;
}
.cell_wrapper.active .fill_handle {
    display: block !important;
}
.AMEE_cell.fill_preview {
    background: #e3f2fd !important;
    color: black !important;
    outline: 3px dashed #1a73e8;
}
#AMEE_context_menu {
    position: fixed;
    display: none;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 9999;
    min-width: 160px;
    font-size: 14px;
}

#AMEE_context_menu div {
    padding: 8px 12px;
    cursor: pointer;
}

#AMEE_context_menu div:hover {
    background: #f1f1f1;
}

#AMEE_context_menu hr {
    margin: 4px 0;
    border: none;
    border-top: 1px solid #ddd;
}
.AMEE_cell.AMEE_error{
    background-color: var(--dangerColor) !important;
}
.AMEE_cell.AMEE_alert{
    background-color: var(--pendingColor) !important;
}
.AMEE_cell.AMEE_info{
    background-color: var(--infoColor) !important;
}