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

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

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

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

.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: 60%;
height: 45px;
display: flex;
align-items: center;
}

.user_tp_rgtbx {
width: 40%;
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_hd_tx_w {
font-family: "Roboto", sans-serif;
color: rgb(255, 255, 255);
font-size: 20px;
font-weight: bold;
padding-left: 15px;
}

.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_tx_1 {
font-family: "Roboto", sans-serif;
color: rgb(4, 4, 4);
font-size: 18px;
font-weight: 400;
padding: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;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 15px;
padding-right: 15px;
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: 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 {
box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
transform: translateY(-2px);
}

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


/* 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: 15px;
font-weight: bold;
width: 90%;
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: 2000;
}

.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: 10000;
}

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




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















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

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

.skl_ldr_bx_list_td {
width: 20%;
margin-left: 5px;
margin-right: 5px;
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%;
  }
}




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

.slider_ui_info_close_icn {
width: 30px;
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%;
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: "Mukta", sans-serif;
color: rgb(8, 8, 8);
font-size: 18px;
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-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(255, 255, 255);
display: flex;
justify-content: start;
align-items: center;
}

.slider_ui_tag p {
border: 1px solid #d6d6e7;
background-color: #f6f6f6;;
color: rgb(52, 52, 52);
font-family: "Mukta", sans-serif;
font-size: 15px;
font-family: 500;
padding: 5px;
margin-right: 8px;
}

/* LOADER LAZY UI  */

.ldr032 {
width: 100%;
height: 240px;
display: flex;
transition-duration: 0.15s;
}

.inldr43 {
width: 27%;
margin-left: 3%;
height: 200px;
margin-top: 30px;
margin-bottom: 10px;
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 loading1 ease-in-out infinite;
transition-duration: 0.15s;
}
@keyframes loading1 {
  to {
    background-position-x: -20%;
  }
}

.inldr44 {
width: 65%;
margin-right: 2%;
margin-left: 2%;
height: 200px;
margin-top: 30px;
margin-bottom: 10px;
}

.inldr44 div:nth-child(1) {
width: 96%;
height: 50px;
margin-right: 2%;
margin-left: 2%;
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 loading2 ease-in-out infinite;
transition-duration: 0.15s;
}
@keyframes loading2 {
  to {
    background-position-x: -20%;
  }
}

.inldr44 div:nth-child(2) {
width: 76%;
height: 50px;
margin-left: 2%;
margin-top: 10px;
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 loading3 ease-in-out infinite;
transition-duration: 0.15s;
}
@keyframes loading3 {
  to {
    background-position-x: -20%;
  }
}

.inldr44 div:nth-child(3) {
width: 56%;
height: 50px;
margin-left: 2%;
margin-top: 10px;
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 loading4 ease-in-out infinite;
transition-duration: 0.15s;
}
@keyframes loading4 {
  to {
    background-position-x: -20%;
  }
}