/* --------------------------------------- */
/* ------- CONFIRMATION OR FORM POPUP ---- */
/* --------------------------------------- */

.user_ui_wrap {
width: 100%;
height: 100%;
position: fixed;
bottom: 0px;
left: 0px;
transition-duration: 0.2s;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.395);
transition-duration: 0.1s;
}

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

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

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

.user_box_1 {
transform: scale(70%);
overflow: hidden;
opacity: 0%;
border-radius: 50px;
}

.user_box_2 {
transform: scale(70%);
overflow: hidden;
opacity: 0%;
border-radius: 50px;
}

.user_box {
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%);
overflow: hidden;
opacity: 0%;
}

.user_tpbx {
width: 100%;
height: 50px;
appearance: none;
background-color: #213864;
display: flex;
}

.user_tp_lftbx {
height: 50px;
width: 80%;
}

.user_tp_rgtbx {
height: 50px;
min-width: 20%;
display: flex;
justify-content: end;
align-items: center;
}

.user_hd_tx {
font-family: "Mukta", sans-serif;
color: rgb(255, 255, 255);
font-size: 22px;
font-weight: bold;
padding-top: 10px;
text-align: left;
padding-left: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.user_hd_tx_w {
font-family: "Roboto", sans-serif;
color: rgb(255, 255, 255);
font-size: 20px;
font-weight: bold;
padding-left: 15px;
padding-top: 10px;
}

.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: auto;
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_tx_1 {
font-family: "Radio Canada Big", sans-serif;
color: rgb(4, 4, 4);
font-size: 18px;
font-style: italic;
font-weight: bold;
padding:10px;
margin-top: 8px;
margin-bottom: 8px;
}

.user_ui_tx_2 {
font-family: "Radio Canada Big", sans-serif;
color: rgb(137, 135, 135);
font-size: 16px;
padding:10px;
max-width: 600px;
}

.user_ui_btn_bx {
width: 92%;
height: 50px;
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%);
margin-top: 10px;
transition-duration: 0.1s;
}

.user_ui_btn {
align-items: center;
appearance: none;
background-color:#3498DB;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: "Poppins",monospace;
height: 30px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 15px;
padding-right: 15px;
border: #3498DB;
position: relative;
text-align: left;
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: 15px;
margin-left: 10px;
}

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

.user_ui_btn:hover {
box-shadow: #3cb1e0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c9ee0 0 -3px 0 inset;
transform: translateY(-2px);
}

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

.user_ui_form_scroller {
width: 100%;
height: 400px;
overflow-y: auto;
}
.user_ui_form_scroller::-webkit-scrollbar {
display: none;
}



/* --------------------------------------- */
/* ----------- FORM FORM SECTION --------- */
/* --------------------------------------- */

/* ROW  */
.user_ui_form_rx {
width: auto;
height: auto;
background-color: rgb(255, 255, 255);
display: flex;
position: relative;
padding-bottom: 15px;
padding-top: 15px;
}
.user_ui_form_rx:nth-child(even) {
  background-color: rgb(255, 255, 255); /* White */
}
.user_ui_form_rx:nth-child(odd) {
  background-color: rgba(197, 197, 197, 0.164); /* Light grey */
}

/* LEFT COLUMN  */
.user_ui_form_clbx_lft {
width: 40%;
display: flex;
justify-content: center;
align-items: start;
height: auto;
}

/* RIGHT COLUMN  */
.user_ui_form_clbx_rgt {
width: 60%;
display: flex;
justify-content: start;
align-items: center;
height: auto;
}

/* LEFT TEXT  */
.user_ui_form_tx {
font-family: "Lato", sans-serif;
color: rgb(4, 4, 4);
font-size: 18px;
font-weight: bold;
width: 90%;
text-align: left;
transition-duration: 0.2s;
padding-top: 10px;
}

/* TEXT > INPUT  */
.user_ui_form_inp_text {
width: 90%;
height: 50px;
font-family: "Roboto", sans-serif;
font-weight: 400px;
font-size: 17px;
background-color: rgb(250, 250, 250);
padding: 5px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
outline: none;
border: 1px rgb(220, 220, 220) solid;
transition-duration: 0.2s;
}

/* ALL INPUT FOUCS  */
.uuif {
border: "";
}
.uuif:focus {
border: 1px rgb(167, 167, 167) solid;
}

/* INPUT > NUMBER  */
.user_ui_form_inp_num {
width: 90%;
height: 50px;
font-weight: 400px;
font-size: 17px;
height: 40px;
font-family: "Roboto", sans-serif;
background-color: rgb(250, 250, 250);
padding: 5px;
padding-left: 10px;
outline: none;
border: 1px rgb(220, 220, 220) solid;
padding-right: 10px;
}

/* INPUT > SELECT  */
.user_ui_form_inp_sel {
width: 90%;
height: 55px;
font-weight: 400px;
font-size: 16px;
font-family: "Roboto", sans-serif;
background-color: rgb(250, 250, 250);
padding: 5px;
padding-left: 10px;
outline: none;
border: 1px rgb(220, 220, 220) solid;
padding-right: 10px;
}

/* INPUT > SELECT > OPTION  */
.user_ui_form_inp_sel option {
font-size: 16px;
padding: 15px;
font-family: "Roboto", sans-serif;
}

/* INPUT > TEXTAREA  */
.user_ui_form_inp_textarea {
width: 87%;
height: 150px;
font-weight: 400px;
font-family: "Roboto", sans-serif;
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;
font-size: 17px;;
padding-right: 10px;
}

.user_ui_form_txtbx {
width: 90%;
height: 150px;
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;
}

/* BOX CONTAIN LABEL OF CHECKBOX OR RADIO  */
.user_ui_form_lbbx {
  width: 90%;
min-height: 40px;
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;
}

/* EACH LABEL TEXT CONTAINER  */
.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;
}

/* LABEL TEXT  */
.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;
}

/* INPUT > CHECKBOX  */
.user_ui_form_chkbx {
background-color: rgb(250, 250, 250);
width: 20px;
height: 20px;
outline: none;
margin-left: 10px;
margin-right: 10px;
border: 1px rgb(255, 255, 255) solid;  
outline: none;
}





/* ------------------------------- */
/* -------- 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: 1000;
}

.user_ui_black_bx {
height: 50px;
background-image: linear-gradient(to right, rgb(81, 81, 81), rgb(103, 102, 102));
border-radius: 5px;
margin-left: 40px;
display: flex;
justify-content: center;
align-items: center;
transition-duration: 0.5s;
margin-top: -150px;
border: 2px rgba(122, 122, 122, 0.811) solid;
}

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

.user_ui_black_tx {
font-family: "Roboto", sans-serif;
color: rgb(255, 255, 255);
font-size: 16px;  
line-height: 22px;
}

.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);
}





/* ------------------------------- */
/* -------- 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: 1000;
}

.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: "Arial", 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: 1000;
}


/* 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:'Poppins', 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:'Poppins', 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: 95%;
height: 35px;
display: flex;
justify-content: right;
align-items: end;
margin-right: 5%;
}

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

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















/* DOWNLOAD ITEMS SKELITON LOADER  */
.skl_ldr_wrap {
width: 100%;
height: auto;
transition-duration: 0.15s;
}

/* 1 SUBSECTION  */
.skl_ldr_bx_1 {
display: flex;
justify-content: start;
align-items: center;
width: 96%;
height: 70px;
margin-top: 10px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
overflow: hidden;
transition-duration: 0.15s;
}

.skl_ldr_ebx_1 {
width: 450px;
height: 45px;
border-radius: 5px;
margin-left: 5px;
margin-right: 5px;
background-color: rgb(238 238 238);
background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) rgb(238 238 238);
background-size: 200% 100%;
background-position-x: 180%;
animation: 1s loading ease-in-out infinite;
transition-duration: 0.15s;
}
@keyframes loading {
  to {
    background-position-x: -20%;
  }
}

.skl_ldr_ebx_2 {
width: 70px;
height: 45px;
border-radius: 5px;
margin-left: 5px;
margin-right: 5px;
background-color: rgb(238 238 238);
background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) rgb(238 238 238);
background-size: 200% 100%;
background-position-x: 180%;
animation: 1s loading ease-in-out infinite;
transition-duration: 0.15s;
}
@keyframes loading {
  to {
    background-position-x: -20%;
  }
}

.skl_ldr_ebx_3 {
width: 150px;
height: 45px;
border-radius: 5px;
margin-left: 5px;
margin-right: 5px;
background-color: rgb(238 238 238);
background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) rgb(238 238 238);
background-size: 200% 100%;
background-position-x: 180%;
animation: 1s loading ease-in-out infinite;
transition-duration: 0.15s;
}
@keyframes loading {
  to {
    background-position-x: -20%;
  }
}


/* 2 SUBSECTION  */
.skl_ldr_bx_2 {
display: flex;
width: 100%;
height: 175px;
display: flex;
margin-top: 35px;
margin-bottom: 5px;
margin-right: auto;
background-color: #fff;
overflow: hidden;
transition-duration: 0.15s;
}

.skl_ldr_ebx_4 {
width: 360px;
height: 175px;
margin-left: 30px;
border-radius: 5px;
background-color: rgb(238 238 238);
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, .5) 50%,
rgba(255, 255, 255, 0) 60%
) rgb(238 238 238);
background-size: 200% 100%;
background-position-x: 180%;
animation: 1s loading ease-in-out infinite;
transition-duration: 0.15s;
}
@keyframes loading {
  to {
    background-position-x: -20%;
  }
}








/* UPLOAD RESOURCE SKELITON LOADER  */
.skl_ldr_wrap {
width: 100%;
height: auto;
transition-duration: 0.15s;
}

/* EACHBOX  */
.skl_ldr_eachbx_3 {
width: 90%;
height: 350px;
display: flex;
margin-top: 55px;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
background-color: rgb(238 238 238);
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, .5) 50%,
rgba(255, 255, 255, 0) 60%
) rgb(238 238 238);
background-size: 200% 100%;
background-position-x: 180%;
animation: 1s loading ease-in-out infinite;
transition-duration: 0.15s;
}
@keyframes loading {
  to {
    background-position-x: -20%;
  }
}

/* COLUMN BOX 1  */
.skl_ldr_colbx_3_1 {
width: 50%;
height: 350px;
}

/* CELL BOX 1  */
.skl_ldr_celbx_3_1 {
width: 90%;
height: 35px;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.753);
}

/* ROW BOX  */
.skl_ldr_rwbx_3_1 {
width: 100%;
height: 80px;
display: flex;
justify-content: space-around;
align-items: end;
}

/* CELL BOX 2  */
.skl_ldr_celbx_3_2 {
width: 40%;
height: 35px;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.753);
}

/* CELL BOX 3  */
.skl_ldr_celbx_3_3 {
width: 80%;
height: 105px;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.753);
}






/* ------------------ TABLE SKELITON ------------- */
.skl_ldr_bx_mi_1 {
width: 97%;
margin-left: auto;
margin-right: auto;
height: 85px;
box-sizing: border-box;
display: flex;
justify-content: space-around;
align-items: center;
}

.skl_ldr_mibx_1 {
width: 150px;
height: 70px;
border-radius: 5px;
background-color: rgba(177, 16, 16, 0.084);
background: linear-gradient(100deg, rgba(0, 0, 0, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) rgba(238, 238, 238, 0.874);
background-size: 200% 100%;
background-position-x: 180%;
animation: 1s loading_21 ease-in-out infinite;
transition-duration: 1s;
}
@keyframes loading_21 {
  to {
    background-position-x: -20%;
  }
}


/* ----------- LIST SKELITON ROW -------------- */
.skl_ldr_bx_list_tw {
width: 100%;
height: 75px;
}

.skl_ldr_bx_list_itd {
width: 100%;
display: inline-flex;
justify-content: center;
align-items: end;
height: 70px;
}

.skl_ldr_bx_list_td {
width: 20%;
margin-left: 5px;
margin-right: 5px;
height: 60px;
border-radius: 5px;
background-color: rgba(177, 16, 16, 0.084);
background: linear-gradient(100deg, rgba(0, 0, 0, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) rgba(238, 238, 238, 0.874);
background-size: 200% 100%;
background-position-x: 180%;
animation: 1s loading_21 ease-in-out infinite;
transition-duration: 1s;
}
@keyframes loading_21 {
  to {
    background-position-x: -20%;
  }
}




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

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

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

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

/* width */
.slider_ui_info_mainbox::-webkit-scrollbar {
  width: 10px;
}
/* Track */
.slider_ui_info_mainbox::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
/* Handle */
.slider_ui_info_mainbox::-webkit-scrollbar-thumb {
  background: #c0c0c0; 
  border-radius: 10px;
}
/* Handle on hover */
.slider_ui_info_mainbox:-webkit-scrollbar-thumb:hover {
  background: #8b8b8b; 
}

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

.slider_ui_info_close_icn {
width: 50px;
float: right;
margin-top: 20px;
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%;
height: auto;
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;
min-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: "Mukta", sans-serif;
color: rgb(8, 8, 8);
font-size: 18px;
word-break: break-all;
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);
}








/* ----------- PERM SKELITON ROW -------------- */

.skl_ldr_bx_priv_tw {
width: 100%;
height: 63px;
}

.skl_ldr_bx_priv_itd {
width: 100%;
display: inline-flex;
justify-content: center;
align-items: end;
height: 60px;
}

.skl_ldr_bx_priv_td {
width: 99%;
margin-left: 0.5%;
margin-right: 0.5%;
height: 50px;
border-radius: 5px;
background-color: rgba(177, 16, 16, 0.084);
background: linear-gradient(100deg, rgba(0, 0, 0, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) rgba(238, 238, 238, 0.874);
background-size: 200% 100%;
background-position-x: 180%;
animation: 1.5s loading_24 ease-in-out infinite;
transition-duration: 1s; 
}
@keyframes loading_24 {
  to {
    background-position-x: -20%;
  }
}







/* -------------------------------------- */
/* -------- FORGET PASSWORD ------------- */
/* -------------------------------------- */

.forpas_wrapper  {
width: 100%;
height: auto;
background-color: rgb(250, 250, 250);
display: flex;
justify-content: center;
align-items: center;
}

.forpas_wrapper_con {
width: 70%;
height: auto;
margin-top: 80px;
background-color: rgb(255, 255, 255);
border-radius: 10px;
border: 1px rgba(195, 195, 195, 0.683) dotted;
box-shadow: 0px 0px 15px 15px rgb(247, 247, 247);
}

.forpas_tx_1 {
font-family: "Poppins", sans-serif;
font-size: 20px;
color: rgb(16, 16, 16);
font-weight: bold;
text-align: center;
padding: 20px;
margin-top: 20px;
}

.forpas_row {
width: 85%;
height: 60px;
border: 1px black solid;
margin: 20px auto;
background-color: white;
position: relative;
}

.forpas_lbl {
font-family: "Mukta", sans-serif;
color: rgb(16, 16, 16);   
font-weight: bold;
font-size: 15px; 
margin: 21px 0 0 20px;
transition: font-size 0.2s, margin 0.2s;
position: absolute;
pointer-events: none;
}

.forpas_in_1 {
width: 80%;
height: 40px;
font-size: 14px;
border: none;
outline: none;
margin: 12px 0 0 35px;
background-color: rgb(255, 255, 255);
transition: margin 0.2s;
color: grey;
padding-left: 15px;
font-family: "Mukta", sans-serif;
}

.forpas_in_2 {
width: 50%;
height: 40px;
font-size: 14px;
border: none;
outline: none;
margin: 10px 0 0 40%;
background-color: rgb(255, 255, 255);
transition: margin 0.2s;
color: grey;
padding-left: 15px;
font-family: "Mukta", sans-serif;
}

.forpas_btn {
margin-top: 10px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
align-items: center;
appearance: none;
background-color:#3498DB;
border: 0;
border-radius: 6px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
border-radius: 2px #2C3E50 solid;
display: block;
font-family: "Roboto", sans-serif;
height: 45px;
width: 85%;
justify-content: center;
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;
}

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

.forpas_btn:hover {
box-shadow: #3cb1e0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c9ee0 0 -3px 0 inset;
transform: translateY(-2px);
}

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

.forpas_in_2e{
margin: 12px 0 0 35px;
width: 80%;
}  








/* ---------------- STATE AND YEAR VIEW ----------- */

.user_ui_form_rx_state_year {
  width: auto;
  height: auto;
  background-color: rgb(255, 255, 255);
  display: flex;
  position: relative;
  padding-bottom: 15px;
  padding-top: 15px;
  }
  .user_ui_form_rx_state_year:nth-child(even) {
      background-color: rgb(255, 255, 255); /* White */
  }
  .user_ui_form_rx_state_year:nth-child(odd) {
      background-color: rgba(197, 197, 197, 0.164); /* Light grey */
  }
  
  /* LEFT COLUMN  */
  .user_ui_form_clbx_lft {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: start;
  height: auto;
  }
  
  .user_ui_form_clbx_lft_state_year {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: start;
  height: auto;
  }
  
  /* RIGHT COLUMN  */
  .user_ui_form_clbx_rgt {
  width: 60%;
  display: flex;
  justify-content: start;
  align-items: center;
  height: auto;
  }
  
  .user_ui_form_clbx_rgt_state_year {
  width: 60%;
  display: flex;
  justify-content: start;
  align-items: center;
  height: auto;
  }
  
  
  .user_ui_form_inp_sel_state_year {
  width: 33%;
  height: 55px;
  font-weight: 400px;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  background-color: rgb(250, 250, 250);
  padding: 5px;
  padding-left: 10px;
  outline: none;
  border: 1px rgb(220, 220, 220) solid;
  padding-right: 10px;
  margin-right: 15px;
  }


  .user_ui_btn_main{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 55px;
    width: 26%;
  }
  
  .user_ui_btn_state_year { 
    background-color: #213864;
    color: #fff;
    cursor: pointer;
    font-family: "Poppins", monospace;
    height: 26px; 
    border: none;
    user-select: none;
    -webkit-user-select: none;
    font-size: 12px;
    border-radius: 3px;
    width: 96px; 
  }

  .user_ui_btn_state_year:focus {
    box-shadow: #213864 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #213864 0 -3px 0 inset;
  }
  
  .user_ui_btn_state_year:hover {
    box-shadow: #213864 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #213864 0 -3px 0 inset;
  transform: translateY(-2px);
  }
  
  .user_ui_btn_state_year:active {
  box-shadow: #213864 0 3px 7px inset;
  transform: translateY(2px);
  }