/* LOADING SECTION  */
.loading_wrapper {
position: fixed;
top: 0;
left: 0;
background-color: rgb(255, 255, 255);
width: 100%;
height: 100%;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
}

/* LOADING ICON  */
.loading_icon {
width: 100px;
}


/* ------------------------------------------ */
/* ------- CONFIRMATION & FORM BOX POPUP ---- */
/* ------------------------------------------ */

.user_ui_wrap {
min-width: 100%;
height: 100%;
position: fixed;
bottom: 0px;
left: 0px;
transition-duration: 0.2s;
z-index: 10000;
background-color: rgba(0, 0, 0, 0.578);
transition-duration: 0.1s;
display: none;
opacity: 0%;
}

#confirmPopWrp {
display: none;
opacity: 0%;
}

/* #formpopWrp,#forMempWrp, #reverpopWrp {
display: none;
opacity: 0%;
} */

.user_ui_con {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
z-index: 1000;
}

.user_box {
min-width: 450px;
max-width: 600px;
height: auto;
padding-bottom: 15px;
background-color: white;
border: 1px rgb(195, 195, 195) solid;
box-shadow: 0px 0px 25px 25px rgba(100, 100, 100, 0.185);
transition-duration: 0.2s;
transform: scale(70%);
border-radius: 50px;
overflow: hidden;
opacity: 0%;
}

.user_tpbx {
width: 100%;
height: 45px;
appearance: none;
/* background-image: linear-gradient(to bottom, #035b99, #076ab1); */
display: flex;
}

.user_tp_lftbx {
width: 100%;
height: 45px;
display: flex;
align-items: center;
}

.user_tp_rgtbx {
width: 100%;
height: 45px;
display: flex;
justify-content: end;
align-items: center;
}

.user_hd_tx {
font-family: "Roboto", sans-serif;
color: rgb(0, 0, 0);
font-size: 20px;
font-weight: bold;
padding-top: 15px;
text-align: left;
padding-left: 20px;
}

.user_tp_icn {
width: 23px;
height: 23px;
border: 1px white solid;
background-color: white;
border-radius: 5px;
margin-right: 8px;
padding: 2px;
cursor: pointer;
transition-duration: 0.2s;
}

.user_tp_icn:hover {
opacity: 80%;
}

.user_ui_esc_bx {
width: 100%;
height: auto;
}

.user_ui_tx_bx {
width: 94%;
min-height: 100px;
border: 1px rgba(195, 195, 195, 0.437) inset;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 10px;
}

.user_ui_inrtx_bx {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 10px;
}

.user_ui_tx_1 {
font-family: "Roboto", sans-serif;
color: rgb(4, 4, 4);
font-size: 16px;
font-weight: 400;
padding:10px;
padding-left: 10px;
padding-top: 15px;
line-height: 25px;
}

.user_ui_tx_2 {
font-family: "Lato", sans-serif;
color: rgb(92, 92, 92);
font-size: 16px;
padding:10px;
line-height: 23px;
margin-bottom: 10px;
}

.user_ui_btn_bx {
width: 94%;
height: 45px;
border: 1px rgba(195, 195, 195, 0.437) inset;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
display: flex;
padding-right: 2%;
}

.user_btm_icn {
margin-left: 25px;
width: 30px;
transform: scale(0%);
transition-duration: 0.1s;
}

.user_ui_btn {
align-items: center;
appearance: none;
background-image: radial-gradient(100% 100% at 100% 0, #5abdff 0, #5468ff 100%);
border: 0;
border-radius: 6px;
box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: "Poppins", monospace;
height: 30px;
justify-content: center;
overflow: hidden;
padding-left: 15px;
padding-right: 15px;
position: relative;
text-decoration: none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: 14px;
margin-left: 10px;
}

.user_ui_btn:focus {
box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.user_ui_btn:hover {
background-image: radial-gradient(100% 100% at 100% 0, #4295d4 0, #4354d4 100%);
box-shadow: rgba(45, 35, 66, .45) 0 4px 8px, rgba(45, 35, 66, .35) 0 7px 13px -3px, #3545c4 0 -3px 0 inset;
transform: translateY(-0.5px);
}

.user_ui_btn:active {
box-shadow: #3c4fe0 0 3px 7px inset;
transform: translateY(0.5px);
}


/* CONTAINER WRAPPER & SCROLLER  */
.user_ui_form_scroller {
width: 100%;
overflow-y: auto;
max-height: 200px;
background-color: blue;
}
.user_ui_form_scroller::-webkit-scrollbar {
display: none;
}

/* CONTAINER BOX  */
.user_ui_form_mncn {
width: 100%;
height: auto;
background-color: yellow;
}

/* EACH INPUT CONTAINER  */
.fmrppform_rx {
width: 100%;
min-height: 75px;
max-height: 300px;
background-color: rgb(255, 255, 255);
display: flex;
border-top: 1px rgb(228, 228, 228) solid;
}


/* QUESTION CONTAINER  */
.fmrpp_clbx_lft {
width:40%;
height: auto;
}

/* ANSWER CONTAINER  */
.fmrpp_clbx_rgt {
width:60%;
height: auto;
padding-bottom: 15px;
}

/* QUESTION TEXT  */
.fmrp_q_tx {
font-family: "Lato", sans-serif;
color: rgb(4, 4, 4);
font-size: 14px;
font-weight: bold;
width: 90%;
line-height:22px;
padding-top: 13px;
padding-left: 10px;
transition-duration: 0.2s;
}

/* TEXT INPUT  */
.fmrp_in {
width: 90%;
height: 45px;
font-family: "Roboto", sans-serif;
font-weight: 400px;
font-size: 15px;
margin-top: 15px;
margin-left: 5%;
background-color: rgb(250, 250, 250);
padding: 5px;
padding-left: 10px;
outline: none;
border: 1px rgb(220, 220, 220) solid;
transition-duration: 0.2s;
}
.fmrp_in:focus {
border: 1px rgb(167, 167, 167) solid;
}

/* TEXTAREA INPUT  */
.fmrp_in_txa {
width: 90%;
height: 150px;
font-weight: 400px;
font-family: "Roboto", sans-serif;
margin-top: 15px;
margin-left: 5%;
background-color: rgb(250, 250, 250);
padding: 5px;
padding-top: 10px;
padding-left: 10px;
outline: none;
border: 1px rgb(220, 220, 220) solid;
transition-duration: 0.2s;
resize: vertical;
}

.user_ui_form_txtbx {
width: 50%;
min-height: 40px;
height: 150px;
margin-top: 15px;
background-color: rgb(250, 250, 250);
padding: 5px;
padding-left: 10px;
outline: none;
border: 1px rgb(220, 220, 220) solid; 
margin-bottom: 10px;
font-family: "Roboto", sans-serif;
padding-top: 8px;
resize: none;
}

/* ERROR NOTICE  */
.frmpop_err {
font-family: "Roboto", sans-serif;
color: rgb(254, 54, 54);
background-color: rgb(255, 240, 240);
padding: 5px;
font-size: 12px;
margin-top: 15px;
margin-left: 15px;
width: fit-content;
white-space: wrap;
display: none;
transition-duration: 0.1s;
}





/* --------------------- */
/* ---- FORM POPUP UI -- */
/* --------------------- */

.user_ui_form_lbbx {
width: 50%;
min-height: 40px;
margin-top: 15px;
background-color: rgb(250, 250, 250);
outline: none;
font-size: 15px;
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
border: 1px rgb(220, 220, 220) solid;
}

.user_ui_form_lb_inbx {
width: 100%;
min-height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
padding-top: 7px;
padding-bottom: 7px;
}

.user_ui_form_labl {
font-family: "Roboto", sans-serif;
color: rgb(132, 129, 129);
font-size: 15px;  
word-wrap: nowrap;
padding-right: 5px;
line-height: 20px;
width: 100%;
transition-duration: 0.2s;
}
.user_ui_form_labl:hover {
color: black;
}

.user_ui_form_chkbx {
background-color: rgb(250, 250, 250);
padding: 10px;
outline: none;
margin-left: 10px;
margin-right: 10px;
border: 1px rgb(220, 220, 220) solid;  
}


/* IDENTITY VERIFICATION UI  */
/* SLIDER CONTAINER WRAPPER & SCROLLER  */
.user_ui_sldbx_scroller {
width: 400px;
overflow-y: hidden;
overflow-x: hidden;
height: auto;
margin-left: auto;
margin-right: auto;
}

/* SLIDER CONTAINER BOX  */
.user_ui_sld_mncn {
width: 1600px;
height: auto;
display: flex;
transition-duration: 0.8s;
/* height: 170px; */
/* overflow: hidden; */
}

/* EACH SLIDE  */
.user_ui_ecsld {
width: 400px;
padding-bottom: 20px;
}

#ddw2221 {
font-weight: bold;
}

/* TITLE TEXT  */
.user_ui_ecsld p {
font-family:'Lato', sans-serif;
color: rgb(71, 71, 71);
font-size: 14px;  
width: 100%;
padding: 10px;
text-align: center;
}

/* INPUT  */
.user_ui_ecslinp {
display: block;
margin-left: auto;
margin-right: auto;
cursor: text;
margin-top: 15px;
font-size: 15px;
width: 90%;
padding: 10px;
height: 45px;
background-color: #fff;
border: 1px solid #d6d6e7;
border-radius: 3px;
color: rgb(35, 38, 59);
box-shadow: inset 0 1px 4px 0 rgb(119 122 175 / 30%);
overflow: hidden;
transition: all 100ms ease-in-out;
outline: none;
font-family: 'Inter', sans-serif; 
padding-right: 10px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.dety75 {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}

#idrevpopttl {
text-align: center;
}

/* OTP SECTION  */
.aut_otp_cn {
width:350px;
margin-left: auto;
margin-right: auto;
display: block;
height: 190px;
margin-top: 15px;
border-radius: 4px;
border: 1px rgb(205, 205, 205) solid;
background-color: #f1f1f1;;
}

.aut_otp_tx1  {
font-family: "Lato", serif;
font-optical-sizing: auto;
font-style: normal;
font-weight: 500;
text-align: left;
padding-left: 25px;
margin-top: 15px; 
font-size: 15px;
color: rgb(0, 0, 0);
font-style: italic;
}

.aut_otp_ibx {
width: 100%;
height: 40px;
display: flex;
margin-top: 14px;
justify-content: center;
align-items: center;
}

.aut_otp_ibx input {
width: 45px;
height: 45px;
border-radius: 3px;
margin: 4px;
background-color: #fff;
border: 1px solid #d6d6e7;
color: rgb(35, 38, 59);
box-shadow: inset 0 1px 4px 0 rgb(119 122 175 / 30%);
appearance: none;
-webkit-appearance: none;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
padding-left: 15px;
-moz-appearance: none;
font-family: "Noto Sans", serif;
}

/* For Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.aut_otp_sbx {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 5px;
}

.ath_opttxl {
font-family: 'Inter', sans-serif; 
font-size: 13px;
text-align: center;
margin-bottom: 5px;
}

/* QRCODE IMAGE BOX  */
.user_ui_qrimbx {
width: 250px;
height: 250px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}
/* QRCODE BOX  */
.user_ui_qrimbx img {
width: 100%;
}





/* ------------------------------- */
/* -------- SIDE NOTICE ---------- */
/* ------------------------------- */

.user_ui_black_wrap {
width: auto;
height: 100px;
position: fixed;
bottom: 0px;
left: 0px;
transition-duration: 0.2s;
overflow: hidden;
display: none;
z-index: 12000;
}

.user_ui_black_bx {
width: auto;
height: 50px;
background-image: linear-gradient(to right, rgb(58, 58, 58), rgb(96, 96, 96));
border-radius: 5px;
margin-left: 40px;
margin-top: 15px;
display: flex;
justify-content: center;
align-items: center;
transition-duration: 0.5s;
margin-top: -80px;
z-index: 3000;
}

.user_ui_black_icn_1 {
width: 25px;
margin-right: 5px;
margin-left: 20px;
/* display: none; */
}
.user_ui_black_icn_2 {
width: 25px;
margin-right: 5px;
margin-left: 20px;
display: none;
}
.user_ui_black_icn_3 {
width: 25px;
margin-right: 5px;
margin-left: 20px;
display: none;
}

.user_ui_black_tx {
font-family:'Lato', sans-serif;
color: rgb(255, 255, 255);
font-size: 16px;  
}

.user_ui_black_icn {
width: 25px;  
margin-right: 10px;
margin-left: 20px;
cursor: pointer;
transition-duration: 0.32s;
border-radius: 50%;
padding: 5px;
}

.user_ui_black_icn:hover {
opacity: 80%;
background-color: rgba(157, 157, 157, 0.697);
}



/* wrong input highlight */
.input-error {
    outline: 2px solid #ff4d4f;
    box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.25);
    border-radius: 6px;
    transition: all .25s ease;
}

/* optional little shake animation (feels premium) */
@keyframes inputShake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

.input-error-animate {
    animation: inputShake .35s ease;
}

.tagify {
--tags-disabled-bg: none;
--tags-border-color: none;
--tags-hover-border-color: none;
}

.tagify:hover {
--tags-disabled-bg: none;
--tags-border-color: none;
--tags-hover-border-color: none;
}


/* ------------------------------- */
/* -------- SIDE FETCH ---------- */
/* ------------------------------- */

.user_ui_fetch_wrap {
width: auto;
height: 100px;
position: fixed;
bottom: 0px;
left: 0px;
transition-duration: 0.5s;
overflow: hidden;
display: none;
z-index: 12000;
}

.user_ui_fetch_bx {
width: auto;
height: 50px;
background-image: linear-gradient(to right, rgb(7, 7, 7) 3%, rgb(131, 131, 131) 97%);
border-radius: 5px;
margin-left: 40px;
margin-top: 15px;
display: flex;
justify-content: center;
align-items: center;
transition-duration: 0.5s;
margin-top: -80px;
}

.user_ui_fetch_icn_1 {
width: 27px; 
height: 25px;
margin-top: 3px; 
margin-right: 10px;
margin-left: 20px;
}

.user_ui_fetch_tx {
font-family:'Lato', sans-serif;
color: rgb(255, 255, 255);
font-size: 17px;  
}

.user_ui_fetch_icn_2 {
width: 30px;  
margin-right: 10px;
margin-left: 20px;
cursor: pointer;
transition-duration: 0.32s;
border-radius: 50%;
padding: 3px;
}

.user_ui_fetch_icn_2:hover {
opacity: 80%;
background-color: rgba(157, 157, 157, 0.697);
}


/* ------------------------- */
/* ----- UPLOADING UI ------ */
/* ------------------------- */

.notice_right_box {
position: fixed;
right: 0px;
bottom: 0px;
/* display: flex; */
display: none;
justify-content: center;
align-items: end;
width: 350px;
height: 100%;
z-index:5000;
}


/* DISPLAY CONTROL  */
/* INCREASE HEIGHT 160px on one box */
/* INCREASE HEIGHT 320px on two box */
/* INCREASE HEIGHT 480px on 3+ box */
/* WRAPPER  */
.notice_upload_wrapper {
/* display: none; */
height: 160px;
width: 300px;
padding-bottom: 10px;
overflow-y: scroll;
overflow-x: hidden;
transition-property: all;
transition-duration: 0.5s;
-ms-overflow-style: none; /* IE 11 */
scrollbar-width: none; /* Firefox 64 */
}
/* HIDE SCROLLBAR  */
.notice_upload_wrapper::-webkit-scrollbar {
display: none;
}

/* DISPLAY CONTROL  */
/* UPLOAD BOX  */
.notice_upload_box {
/* display: block; */
display: none;
/* margin-top: 10px;  */
margin-top: 200px;
margin-left: auto;
margin-right: auto;
width: 300px;
height: 150px;
background-color: rgb(251, 255, 249);
border-top: 1px rgba(185, 185, 185, 0.774) solid;
border-left: 1px rgba(185, 185, 185, 0.774) solid;
border-right: 1px rgba(185, 185, 185, 0.774) solid;
border-bottom: 6px rgb(72, 194, 224) solid;
box-sizing: border-box;
border-radius: 10px;
transition-property: all;
transition-duration: 0.5s;
box-shadow: 0px;
}

/* CLOSE BUTTON BOX  */
.notice_upload_close_box {
display: block;
width: 300px;
height: 1px;
}

/* BUTTON  */
.notice_upload_close_button {
float: right;
margin-top: 10px;
margin-right: 10px;
border-radius: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 8px;
padding-right: 8px;
font-size: 10px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
background-color: red;
color: white;
border: none;
cursor: pointer;
transition-duration: 0.3s;
}
.notice_upload_close_button:hover {
background-color: rgb(231, 7, 7);
}

/* BODY BOX  */
.notice_upload_body_box {
display: flex;
width: 300px;
height: 60px;
}

/* IMAGE BOX  */
.notice_upload_image_box {
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 60px; 
box-sizing: border-box;
}

/* IMAGE  */
.notice_upload_image {
width: 40px;
}

/* TEXT BOX  */
.notice_upload_text_box {
display: flex;
justify-content: center;
align-items: start;
flex-direction: column;
width: 240px;
height: 60px;
box-sizing: border-box;
text-overflow: ellipsis;
white-space: nowrap;
}

/* TEXT 1  */
.notice_upload_text {
font-weight: 600;
font-size: 14px;
font-family:'Lato', sans-serif;
color:  rgb(22, 22, 22);
max-width: 230px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 200px;
transition-property: all;
transition-duration: 0.1s;
}

/* FLEXER  */
.notice_upload_subtext_flexer {
display: flex;
}

/* TEXT 2  */
.notice_upload_subtext {
font-weight: 500;
font-size: 12px;
padding-top: 5px;
font-family:'Lato', sans-serif;
color: rgb(107, 107, 107);
padding-left: 3px;
transition-property: all;
transition-duration: 0.1s;
}

/* PROGRESS BOX CONTAINER  */
.notice_upload_progress_box {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 40px;
}

/* PROGRESS BAR BOX  */
.notice_progress_barbox {
display: block;
width: 240px;
height: 20px;
background-color: rgb(171, 229, 243);
}

/* 100% = 240 */
/* PROGRESS BAR  */
.notice_progress_bar {
display: block;
position: relative;
width: 0px;
height: 20px;
background-color: rgb(47, 78, 252);
transition-property: all;
transition-duration: 0.5s;
}

/* BEFORE ANIMATED ELEMENT  */
.notice_progress_bar::before {
content: "";
position: absolute;
width: 30%;
height: 20px;
background-image: linear-gradient(rgba(105, 213, 240, 0.767), rgb(68, 110, 248));
animation-name: loader;
animation-duration: 3s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
transition-property: all;
transition-duration: 0.5s;
}

/* ANIMATION KEYFRAME  */
@keyframes loader {
    0% {
        width: 0%;
        margin-left: 0%;
        transition-property: all;
        transition-duration: 0.1s;
    }
    60% {
        width: 30%;
        margin-left: 70%;
        transition-property: all;
        transition-duration: 0.1s;
    }
    100% {
        width: 0%;
        margin-left: 100%;
        transition-property: all;
        transition-duration: 0.1s;
    }
}

.close_upload_notice_wrap {
width: 90%;
height: 35px;
display: flex;
justify-content: space-between;
align-items: end;
margin-right: 5%;
margin-left: 5%;
}

.notice_upload_htdtx {
font-weight: 400;
font-size: 8px;
padding-top: 5px;
font-family:'Lato', sans-serif;
color: rgb(107, 107, 107);
}

.close_upload_notice_box {
display: flex;
justify-content: center;
align-items: center;
width: 25px;
font-family:'Lato', sans-serif;
height: 25px;
background-color: rgb(255, 46, 46);
border-radius: 5px;
transition-duration: 0.5s;
cursor: pointer;
}

.notice {
width: 25px;
height: 25px;
}




/* ---------------------------------- */
/* ------- SLIDER UI INFO SECTION --- */
/* ---------------------------------- */

.slider_ui_info_wrap {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.185);
z-index: 5000;
position: fixed;
top: 0px;
left: 0px;
display: none;
opacity: 0%;
transition-duration: 0.1s;
}

.slider_ui_info_box {
width: 40%;
height: 100vh;
float: right;
padding-bottom: 5vh;
}

.slider_ui_info_mainbox {
width: 100%;
height: 100vh;
background-color: white;
overflow-y: auto;
padding-bottom: 5vh;
margin-left: 110%;
transition-duration: 0.2s;
}
.slider_ui_info_mainbox:hover {
margin-left: 0%;
}

/* width */
.slider_ui_info_mainbox::-webkit-scrollbar {
  width: 0px;
}

.slider_ui_info_close_bx {
width: 100%;
height: 100px;
}

.user_ui_info_close_bx {
width: 50%;
height: 40px;
}

.slider_ui_info_close_icn {
width: 30px;
float: right;
margin-top: 20px;
margin-right: 20px;
cursor: pointer;
}

.user_ui_info_close_icn {
width: 30px;
float: right;
margin-top: 15px;
margin-right: 20px;
cursor: pointer;    
}

.slider_ui_info_hdtx {
font-family: "Roboto", sans-serif;
color: rgb(8, 8, 8);
font-size: 20px;
padding-left: 25px;
padding-top: 30px;
font-weight: 600;
}

.slider_ui_content_box {
width: 90%;
min-height: 500px;
background-color: rgb(252, 252, 252);
border: 1px rgb(224, 224, 224) solid;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}

.slider_ui_tr {
width: 100%;
min-height: 50px;
display: flex;
}

.slider_ui_tdh {
height: auto;
width: 40%;
font-family: "Lato", sans-serif;
color: rgb(8, 8, 8);
font-size: 16px;
padding-left: 15px;
padding-top: 15px;
font-weight: 400;
border-top: 1px rgb(240, 240, 240) solid;
background-color: white;
}

.slider_ui_td {
width: 60%;
min-height: 30px;
font-family: "Lato", sans-serif;
color: rgb(81, 81, 81);
font-size: 15px;
font-family: 400;
padding-left: 15px;
padding-top: 10px;
font-weight: 200;
border: 1px rgb(240, 240, 240) solid;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
line-height: 25px;
padding-top: 15px;
background-color: rgb(250, 250, 250);
}

.slider_ui_img {
width: 100%;
height: auto;
padding: 10px;
background-color: white;
}

.slider_ui_td img {
width: 95%;
height: auto;
margin-left: auto;
margin-right: auto;
margin: 5px;
display: block;
}

.slider_ui_tag {
width: 60%;
min-height: 30px;
padding-top: 10px;
border: 1px rgb(240, 240, 240) solid;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
line-height: 25px;
background-color: rgb(255, 255, 255);
display: flex;
justify-content: start;
align-items: center;
font-family: "Roboto", sans-serif;
flex-wrap: balance;
}

.slider_ui_tag p, .taggs {
border: 1px solid #d6d6e7;
background-color: #f6f6f6;;
color: rgb(33, 33, 33);
font-size: 14px;
font-family: "Roboto", sans-serif;
font-weight: 400;
width: fit-content;
padding: 5px;
margin-top: 5px;
margin-right: 8px;
margin-left: 6px;
border-radius: 4px;
}







/* ======================================================= */
/* =============== TEAM MANAGE MODULE ==================== */
/* ======================================================= */

.userUI_teamResCon {
width: 100%;
height: 500px;
}

.userUI_orderCon {
width: 100%;
}

.userUI_permResCon {
width: 100%;
height: auto;
}

.userUI_teamSrcIn {
font-size: 15px;
line-height: 20px;
z-index: 60;
padding-left: 10px;
height: 50px;
background-color: #fff;
border: 1px solid #d6d6e7;
border-radius: 3px;
color: rgb(35, 38, 59);
box-shadow: inset 0 1px 4px 0 rgb(119 122 175 / 30%);
overflow: hidden;
transition: all 100ms ease-in-out;
margin-top: 10px;
width: 92%;
display: block;
margin-left: 15px;
outline: none;
cursor: text;
font-family: 'Inter', sans-serif;   
}

.userUI_teamSrcIn:focus {
box-shadow: 0 0 0 4px #dfe6f8;
}

.userUI_teamSrcResBx {
height:70px;
width: 380px;
display: block;
margin-left: auto;
margin-right: auto;;
background-color: #f9fafb;
border: 1px solid #d1d5db;
margin-top: 10px;
display: none;
}

.userUI_permSrcResBx {
height:70px;
width: 380px;
display: block;
margin-left: auto;
margin-right: auto;;
background-color: #f9fafb;
border: 1px solid #d1d5db;
margin-top: 15px;
display: flex;
}

.userUI_permSrcResBx .lop008 {
padding-top: 5px;
}

.user_ui_tx_4 {
font-family: "Roboto", sans-serif;
color: rgb(4, 4, 4);
font-size: 17px;
font-weight: 400;
text-align: center;
width: 100%;
padding-top: 15px;
padding-bottom: 10px;
line-height: 25px;
}

.sfc323 {
font-family: "Roboto", sans-serif;
color: rgb(142, 142, 142);
font-size: 15px; 
font-weight: 400; 
padding-top: 10px; 
text-align: left;
padding-left: 22px;
margin-bottom: 30px;
}

.frt432 {
font-family: "Roboto", sans-serif;
color: rgb(142, 142, 142);
font-size: 15px; 
font-weight: 400; 
padding-top: 10px; 
text-align: left;
padding-left: 20px;
margin-bottom: 10px;
}

.scf442 {
width: 20%;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}

.scf442 img {
width: 50px;
height: 50px;
border-radius: 50%;
}

.lop008 {
width: auto;
}

.lop008 p:nth-child(1){
font-family: "Roboto", sans-serif;
color: rgb(8, 8, 8);
font-size: 17px;  
padding-top: 10px;  
}

.lop008 p:nth-child(2){
font-family: "Roboto", sans-serif;
color: rgb(178, 178, 178);
font-size: 14px;  
padding-top: 5px; 
}

.userUI_teamActBx {
width: 380px;
display: block;
margin-left: auto;
margin-right: auto;
height: 60px;
display: flex;
justify-content: space-evenly;
align-items: center;
margin-bottom:10px;
margin-top: 6px;
cursor: default;
display: none;
}

.userUI_teamActBx button {
background-color: rgb(232, 251, 255);
color: rgb(0, 152, 207);
border: 1px solid rgba(0, 152, 207, 0.25);
border-radius: 3px;
font-family: 'Poppins', sans-serif;
font-size: 15px;
font-weight: 400;
height: 45px;
width: 380px;
display: block;
margin-left: auto;
margin-right: auto;
line-height: 18px;
padding: 0 14px;
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
box-shadow: 0 2px 6px rgba(0, 152, 207, 0.12);
}

.userUI_teamActBx button:nth-child(2) {
margin-left: 13px;
}

.userUI_teamActBx button:hover {
background-color: rgb(0, 152, 207);
color: white;
box-shadow: 0 6px 14px rgba(0, 152, 207, 0.35);
transform: translateY(-2px);
}

.userUI_teamActBx button:active {
transform: translateY(1px);
box-shadow: 0 3px 8px rgba(0, 152, 207, 0.25) inset;
}

.userUI_teamActBx button4:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 152, 207, 0.25);
}



/* =========================================================== */
/* =============== TEAM PERMISSION MODULE ==================== */
/* =========================================================== */


.userUI_teamOermBx {
width: 100%;
max-height: 57%;
overflow-y: scroll;
display: block;
margin-bottom: 20px;
padding-top: 5px;
cursor: default;
}

.userUI_teamEcpermBx {
width: 90%;
height: 60px;
border-radius: 15px;
margin-left: 5%;
margin-right: 5%;
display: flex;
background-color: #f9fafb;
border: 1px solid #d1d5db;
margin-bottom: 10px; 
display: flex;   
}

.dvgt667 {
width: 80%;
height: 60px;
}

.dvgt667 p:nth-child(1){
font-family: "Roboto", sans-serif;
color: rgb(8, 8, 8);
font-size: 15px;  
padding-top: 10px;  
padding-left: 20px;
}

.dvgt667 p:nth-child(2){
font-family: "Roboto", sans-serif;
color: rgb(178, 178, 178);
font-size: 12px;  
padding-top: 4px; 
padding-left: 20px;
}

.sdf4423 {
width: 20%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;    
}



/* ---------------------- */
/* --- CHECKBOX TOGGLE -- */
/* ---------------------- */

.toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 30px;
cursor: pointer;
margin-left: 0px;
}

.toggle-switch input[type="checkbox"] {
display: none;
}

.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;
top: 5px;
left: 5px;
width: 20px;
height: 20px;
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: -15px;
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(25px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 3px #05c46b;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch-background {
background-color: #05c46b;
box-shadow: inset 0 0 0 2px #04b360;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch:before {
content: "On";
color: #05c46b;
right: -15px;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch-background .toggle-switch-handle {
transform: translateX(20px);
}


.toggle-active {
background-color: #05c46b !important;
box-shadow: inset 0 0 0 2px #04b360 !important;
color: #05c46b !important;
}

.toggle-active .toggle-switch-handle {
transform: translateX(25px) !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 3px #05c46b !important;
}




/* UPGRADE WRAP LOCK  */
.upgradeLockWrap {
width: 100%;
height: 100vh;
z-index: 4000;
position: fixed;
top: 0px;
left: 0px;
opacity: 75%;
display: none;
justify-content: center;
align-items: center;
background-image: linear-gradient(to right, rgb(58, 58, 58), rgb(96, 96, 96));
}

.upgradeLockBox {
width: 50%;
height: 150px;
position: relative;
}

.upgradeLockBox p:nth-child(1) {
font-weight: 500;
font-size: 40px;
color: rgb(255, 255, 255);
text-align: center;
font-family: 'Inter', sans-serif;   
}

.upgradeLockBox p:nth-child(2) {
font-weight: 400;
font-size: 30px;
color: rgb(255, 255, 255);
text-align: center;
padding-top: 10px;
font-style: italic;
font-family: 'Inter', sans-serif;   
}

.scki86 {
font-weight: 400;
font-size: 15px;
color: black;
text-align: center;
padding-top: 10px;
font-family: 'Inter', sans-serif;   
padding: 15px;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 15px;
border-radius: 4px;
background-color: white;
border: none;
}

.scki86:hover {
background-color: rgb(228, 228, 228);
}

.drvhdbx {
display: flex;
}

.drvhdbx select {
width: 150px;
margin-left: -200px;
cursor: default;
appearance: none;
}