html {
    font-size:16px;
}
a, i{
    color:unset;
    cursor: pointer;
}
i {
    color:#e0b767;
}
body {
    font-weight: 300;
    color: var(--subtheme-color);
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif !important;
    font-weight:400;
    font-size:16px;
    background: var(--default-background);
}
input:-webkit-autofill {
    font-size: 0.813rem;
    font-weight: bold;
    color: #fff;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    font-size: 0.813rem;
    font-weight: bold;
    color: #fff;
    border: 0;
    outline: none;
}
/* width */
::-webkit-scrollbar {
    width: 4px;
}
  
/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}
   
/* Handle */
::-webkit-scrollbar-thumb {
    background: #ffa700; 
    border-radius: 10px;
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b30000; 
}
.copyright {
    padding-top:15px;
    text-align:center;
    font-size: 0.688rem;
    padding-bottom:25px;
    color: var(--copyright-color);
}



.-onlyweb {display:block ;}
.-onlymob {display:none ;}

/* Navigation Bar */
.nav-top-01 {
    background:transparent;padding:2rem 5%;color:#fff;top:0;position:fixed;width:100%;left:0;
    z-index: 10;
}
.nav-top-02 {
    padding:1rem 1.25rem;position:sticky;top:0;width:100%;left:0;background:rgba(255,255,255,0.7);
}
.nav-top-03 {
    padding:1rem 1.25rem;position:sticky;top:0;width:100%;left:0;background:rgba(255,255,255,0.7);
}
.nav-logo-img {
    width: 9.178rem;height:auto;
}
.nav-back-i {
    color: #d2af6d;font-size:1.25rem;
}
.nav-right-button {
    cursor: pointer;
}
.nav-right-button i{
    color: #d2af6d;font-size:1rem;margin-right:0.6rem;
}
.nav-right-button span {
    color: #273155;font-size: 0.813rem;font-weight: bold;
}
.nav-right-count span {
    color: #b9b9b9;
    font-size: 0.813rem;
    font-weight: bold;
}

.nav-right-kyc span {
    color: #000;
    font-size: 0.813rem;
    font-weight: bold;
}
.nav-right-kyc i.pending {
    color: #b9b9b9;
    font-size: 1rem;
    font-weight: bold;
    margin-left: 0.5rem;
}
.nav-right-kyc i.approved {
    color: #32db6d;
    font-size: 1rem;
    font-weight: bold;
    margin-left: 0.5rem;
}
.nav-right-kyc i.rejected {
    color: #ff0000;
    font-size: 1rem;
    font-weight: bold;
    margin-left: 0.5rem;
}
.nav-mob-title {
    padding:0.5rem 1.25rem;
}
.nav-mob-title .nav-title {
    color: #273155;font-size: 1.375rem;font-weight: bold;
}

.header-box {
    background-color: var(--web-version-header-background);
    box-shadow:var(--web-version-header-box-shadow);
    padding:var(--web-version-header-padding);
    position:fixed;
    width:80%;
    z-index:30;
}
.header-box .img-ranking {
    width:2rem;height:auto;margin-right:0.75rem
}
.header-box .header-title {
    color:#273155;
    font-size: 1.013rem;
    font-weight: 600;
    text-transform: capitalize;
}

.nav-top-language-bar span {
    font-size: 0.813rem;font-weight: bold;color: #d2af6d;
}
.nav-top-language-bar i {
    font-size:0.682rem;margin-left:0.5rem;font-size: 0.5rem;
}



.nav-top-language-bar:hover span {
    font-size: 0.813rem;font-weight: bold;color: #d2af6dc0;
}
.nav-top-language-bar:hover i {
    font-size:0.682rem;margin-left:0.5rem;color: #d2af6dc0;
    font-size: 0.5rem;
}

.nav-top-language-bar2 span {
    font-size: 0.813rem;font-weight: bold;color:#273155
}
.nav-top-language-bar2 i {
    font-size:0.682rem;margin-left:0.5rem;font-size: 0.5rem;
}
.nav-top-language-bar2 .icons-language {
    margin-right:0.5rem;font-size: 1rem;
}

.web-navi-left {
    width:20%;position:fixed;left:0;top:0;height:100vh;box-shadow: 0 2px 10px 0 rgba(71, 176, 146, 0.2);
  background-image: linear-gradient(to bottom, #212d4f, #18203a);
  overflow: auto;
}
.web-navi-right {
    width:80%;position:relative;margin-left:20%;
}

.nav-option {
    padding:1.2rem 1.3rem;
    align-items:center;
    cursor: pointer;
}
.nav-option .nav-icons {
    width:20%;
    display: flex;
    align-items:center;
}
.nav-option .nav-icons i {
    font-size:1.125rem;
}
.nav-option .nav-labels {
    width:60%;
    display: flex;
    align-items:center;
}
.nav-option .nav-labels span {
    font-size: 0.8rem;
    color: #fff;
}
.nav-option .nav-back {
    font-size:0.7rem;
}

.nav-option:hover {
    background:#d2af6d41;
}
.nav-option:hover .nav-icons {
    width:20%;
    display: flex;
    align-items:center;
}
.nav-option:hover .nav-icons i {
    font-size:1.125rem;
}
.nav-option:hover .nav-labels {
    width:60%;
    display: flex;
    align-items:center;
}
.nav-option:hover .nav-labels span {
    font-weight:bold;
}
.nav-option:hover .nav-back {
    font-size:0.7rem;
}


.nav-option.bolded {
    background:#d2af6d49;
}
.nav-option.bolded .nav-icons {
    width:20%;
    display: flex;
    align-items:center;
}
.nav-option.bolded .nav-icons i {
    font-size:1.125rem;
}
.nav-option.bolded .nav-labels {
    width:60%;
    display: flex;
    align-items:center;
}
.nav-option.bolded .nav-labels span {
    font-size: 0.8rem;
    color: #d2af6d;
    font-weight: bold;
}
.nav-option.bolded .nav-back {
    font-size:0.7rem;
}



/* reminder*/
.reminder-box-01 {
    color: #fff;font-size: 0.75rem;
}



/* Input */
.form-new-input-box {
    margin-top: 1rem;
    position: relative;
    text-align: left;
}
.form-new-input-box label {
    font-size: 0.813rem;
    color: #fff;
    margin-bottom: 0.375rem;
    font-weight: normal;
    text-align: left;
    margin-left: 0.5rem;
}
.form-new-input-box input {
    background-color: #273155;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 0px;
    padding: 0.838rem 1.25rem;
    outline: none !important;
    font-size: 0.813rem;
    width: 100%;
    font-weight: bold;
    color: #fff;
}
.form-new-input-box input:focus {
    border: solid 1px #d2af6d;
}
.form-new-input-box textarea {
    background-color: #273155;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 0px;
    padding: 2.538rem 1.25rem 0.938rem;
    outline: none !important;
    font-size: 0.813rem;
    width: 100%;
    font-weight: bold;
    color: #fff;
}
.form-new-input-box.light {
    margin-top: 1rem;
    position: relative;
    text-align: left;
}
.form-new-input-box.light label {
    font-size: 0.813rem;
    color: #273155;
    margin-bottom: 0.375rem;
    font-weight: normal;
    text-align: left;
    margin-left: 0.5rem;
}
.form-new-input-box.light input {
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 0px;
    padding: 0.838rem 1.25rem;
    outline: none !important;
    font-size: 0.813rem;
    width: 100%;
    font-weight: bold;
    color: #000;
}
.form-new-input-box.light input:focus {
    border: solid 1px #d2af6d;
}
.form-new-input-box.light textarea {
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 0px;
    padding: 2.538rem 1.25rem 0.938rem;
    outline: none !important;
    font-size: 0.813rem;
    width: 100%;
    font-weight: bold;
    color: #000;
}
.form-new-input-box input[type="date"] {
    background-color: #273155;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 0px;
    padding: 0.838rem 1.25rem;
    outline: none !important;
    font-size: 0.813rem;
    width: 100%;
    font-weight: bold;
    color: #fff;
}
.form-new-input-box input::placeholder {
    font-size: 0.813rem;
    width: 100%;
    font-weight: 300;
    color: #b9b9b9;
}
.form-new-input-box textarea::placeholder {
    font-size: 0.813rem;
    width: 100%;
    font-weight: 300;
    color: #b9b9b9;
}
.form-new-input-box.light input::placeholder {
    font-size: 0.813rem;
    width: 100%;
    font-weight: 300;
    color: #b9b9b9;
}
.form-new-input-box.light textarea::placeholder {
    font-size: 0.813rem;
    width: 100%;
    font-weight: 300;
    color: #b9b9b9;
}
.form-new-input-box i.open-eye {
    position: absolute;
    bottom: 0.95rem;
    right: 1rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #d2af6d;
  }
  .form-new-input-box i.close-eye {
    position: absolute;
    bottom: 0.9rem;
    right: 1rem;
    cursor: pointer;
    font-size: 1rem;
    color: #d2af6d;
}
.form-new-input-box .right-act {
    position: absolute;
    right: 1.25rem;
    top: 0.938rem;
    color: #d2af6d;
    text-decoration: underline;
    font-size: 0.813rem;
    font-weight: 600;
}
  
.form-new-select-box {
    position: relative;
}
.form-new-select-box select {
    border-radius: 0px;
    border: none;
    text-align: left;
    background-color: #273155;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    font-size: 0.813rem;
    font-weight: bold;
    position: relative;
    padding: 0.738rem 1.25rem;
    outline: none;
    height: auto;
    color: #fff;
    padding-right: 3rem;
    width:100%;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.form-new-select-box .label-selects {
    position: relative;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 0.813rem;
    margin-bottom:0.375rem;
    margin-left: 0.5rem;
    margin-top:1.5rem;
    font-weight: normal;
}
.form-new-select-box.light {
    position: relative;
}
.form-new-select-box.light select {
    border-radius: 0px;
    border: none;
    text-align: left;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    font-size: 0.813rem;
    font-weight: bold;
    position: relative;
    padding: 0.738rem 1.25rem;
    outline: none;
    height: auto;
    color: #273155;
    padding-right: 3rem;
    width:100%;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.form-new-select-box.light .label-selects {
    position: relative;
    color: #273155;
    display: flex;
    align-items: center;
    font-size: 0.813rem;
    margin-bottom:0.5rem;
    margin-left: 0.5rem;
    margin-top:1.5rem;
    font-weight: normal;
}
.form-new-input-box span.prefix {
    position: absolute;
    left: 1.25rem;
    bottom: 0.9rem;
    color: #fff;
    font-size: 0.813rem;
    font-weight: bold;
  }
.form-new-select-box .icon-select {
    position: absolute;
    z-index: 10;
    right: 1.25rem;
    bottom: 1.1rem;
    color: #d2af6d;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.413rem;
}
.error_messages
{
    color: var(--error-color);
    text-align: left;
    font-size:0.65rem;
    padding-top:0.3rem;
}

/*custom checkbox*/
.form-checkbox.spaces {
    margin: 1.5rem 0 0rem;
}
/* The container */
form-checkbox
.form-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 0.813rem;
    
    color:#b9b9b9;
    font-weight:normal;
}

.postlogin .form-control,
.bootstrap-select .form-control {
    color: #fff;
    font-weight: bold;
    background-color: #273155;
    

}

.light .bootstrap-select .form-control {
    color: #273155 !important;
    font-weight: bold;
    background-color: #fff !important;
    

}

span.filter-option.pull-left {
    padding-left: 0px;
    text-align: left !important;
    padding-left: 1.25rem !important;
    font-size: 0.963rem;
}
  
/* START Radio Button */
.radio_btn {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 1.6rem;
    cursor: pointer;
    color: var(--radio-button-default-label-color);
    font-size: var(--radio-button-label-size);
    font-weight: var(--radio-button-default-label-weight);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
  
/* Hide the browser's default radio button */
.radio_btn input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
  
/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: var(--radio-button-dot);
    border-radius: 50%;
}
.label-checkmark {
    font-size: 0.813rem;
    line-height: 1.23;
    font-weight:400;
}
  
/* On mouse-over, add a grey background color */
.radio_btn:hover input ~ .checkmark {
    background-color: #ccc;
}
  
/* When the radio button is checked, add a blue background */
.radio_btn input:checked ~ .checkmark {
    background-color: #8ab4f7;
}
.radio_btn input:checked ~ .label-checkmark {
    font-weight:var(--radio-button-active-label-weight);
}
  
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
  
/* Show the indicator (dot/circle) when checked */
.radio_btn input:checked ~ .checkmark:after {
    display: block;
}
  
/* Style the indicator (dot/circle) */
.radio_btn .checkmark:after {
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #142046;
}
/* END Radio Button */

/* START Radio Button Light */
.radio_btn_light {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 1.6rem;
    cursor: pointer;
    color: #273155;
    font-size: 0.813rem;
    font-weight: var(--radio-button-default-label-weight);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
  
/* Hide the browser's default radio button */
.radio_btn_light input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
  
/* Create a custom radio button */
.checkmarkk {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: var(--radio-button-dot);
    border-radius: 50%;
}
.label-checkmarkk {
    font-size: 0.813rem;
    line-height: 1.23;
    font-weight:400;
}
  
/* On mouse-over, add a grey background color */
.radio_btn_light:hover input ~ .checkmarkk {
    background-color: #ccc;
}
  
/* When the radio button is checked, add a blue background */
.radio_btn_light input:checked ~ .checkmarkk {
    background-color: var(--radio-button-active-back);
}
.radio_btn_light input:checked ~ .label-checkmarkk {
    font-weight:var(--radio-button-active-label-weight);
}
  
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkk:after {
    content: "";
    position: absolute;
    display: none;
}
  
/* Show the indicator (dot/circle) when checked */
.radio_btn_light input:checked ~ .checkmarkk:after {
    display: block;
}
  
/* Style the indicator (dot/circle) */
.radio_btn_light .checkmarkk:after {
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
}
/* END Radio Button Light*/







/******************************** MODAL ********************************/
.modal-content-new {
    background-color: var(--modal-color);
    box-shadow: var(--modal-box-shadow);
    border-radius: var(--modal-border-radius);
    position:relative;
}
.modal-content-header {
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    
}
.modal-content-subject {
    color: #d2af6d;
    font-size: 1rem;
    font-weight: bold;
    padding:0.95rem; 
    border-bottom: solid 1px rgba(0, 0, 0, 0.1); 
    background: #142046;
}
.modal-close-box {
    font-size: 1rem;
    position:absolute;
    right:18px;
    top:18px;
    color: #d2af6d !important;
}
.modal-content-body {
    padding:1.5rem 1.25rem;
    max-height: 60vh;
    overflow-y: auto;
}
.modal-content-footer {padding:0 20% 1.625rem;}
.button-modal {
    background-color: #d2af6d;
    border-radius: 5px;
    width:100%;
    padding:0.688rem;
    color:#142046;
    border:none;
    outline:none;
    font-size: 0.8rem;
    font-weight: bold;
}
.button-modal:hover {
    background-color: #d2af6dbe;
}

.desc-m{
    padding: 0.563rem 0.563rem 1rem;
    font-size: 0.813rem;
    font-weight: normal;
    line-height: 1.23;
    text-align: center;
    color: #a5a5a5;
}

.failed {
    text-align:center;
}
.failed i{
    font-size:2.5rem;
    color:var(--error-color) !important;
}
.failed .label-m {
    color: var(--subtheme-color);
    font-size: 1.125rem;
    font-weight: bold;
    margin-top:0.813rem;
}
.failed .desc-m {
    padding: 0.563rem 0.563rem 1rem;
    font-size: 0.813rem;
    line-height: 1.23;
    color: var(--error-color);
    font-weight:500;
}

.successes {
    text-align:center;
}
.successes i{
    font-size:2.5rem;
    color:var(--success-color) !important;
}
.successes .label-m {
    color: var(--subtheme-color);
    font-size: 1.125rem;
    font-weight: bold;
    margin-top:0.813rem;
}
.successes .desc-m {
    padding: 0.563rem 0.563rem 1rem;
    font-size: 0.813rem;
    line-height: 1.23;
    color: #a5a5a5;
    font-weight:500;
}

.kyc_modal img{
    width: 5.625rem;
    height: 5.625rem;
    margin-bottom:1rem;
}

.logo-b {display:flex;margin:1rem;}
.logo-r {width:0.938rem;}
.logo-p {width:4.688rem;}

.announcement-pop-img {
    width:100%;height:auto;border-radius:6px;margin-bottom:0.6rem;
}
.announcement-pop-title {
    color: #fff;font-size: 1rem;font-weight: bold;padding:1rem 0;
}
.announcement-pop-desc {
    color:#d2af6d;font-weight:normal;font-size: 0.813rem;line-height: 1.38;
}
.announcement-pop-date {
    padding:1rem 0;color: #b9b9b9;font-size: 0.688rem;font-weight:normal;
}






/* Breakcrumb */




/* background */
.bg-default
{
  background: #fff;
  position: relative;
  min-height: 100vh;
}
.bg-01 {
  /*background: url('../img/Background/WB1.png') center/cover no-repeat;*/
  background-image: url('../img/Background/WB1.png?v=1.1');
  background-attachment: fixed;
  position: relative;
  min-height: 100vh;
  background-position-y: 0px;
  background-size:100%;
  background-repeat: no-repeat;
}
.bg-02 {
    /*background: url('../img/Background/WB2.png') center/cover no-repeat;*/
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('../img/Background/WB2.png?v=1.1');
    background-attachment: fixed;
    position: relative;
    min-height: 100vh;
    z-index: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-01 {
    z-index: 2;
    position: relative;
}
.section-02 {
    padding: 0 20vw 5rem;
    min-height: 100vh;
    min-width: 100%;
}
.section-03 {
    padding: 2rem 13vw 5rem;
    z-index: 1;
    min-height: 100vh;
    min-width: 80vw;
    margin-left: 20vw;
}
.section-04 {
    padding: 2rem 10vw 8rem;
    z-index: 1;
    min-height: 100vh;
}

.topup-label-top {
    color: #273155;
    font-size: 1rem;
    font-weight: bold;
}
.upload-boxx {
    background-color: #fafafa;
    border-radius: 0px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    min-height: 8rem;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.05);
  }
  .upload-boxx .before-upload {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 8rem;
  }
  .upload-boxx .after-upload {
    position: relative;
    text-align: center;
  }
  .before-upload input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
  }
  .before-upload i {
    color: #e1e1e1;
    font-size: 1.875rem;
  }
  .before-upload .before-upload-label {
    color: #e1e1e1;
    line-height: 1.23;
    font-size: 0.813rem;
    padding-top: 0.625rem;
    font-weight: 500;
  }
  .after-upload .deletebtn {
    position: absolute;
    right: -0.1rem;
    top: -0.1rem;
  }
  .after-upload .deletebtn i {
    color: #ff0000;
  }


/*Other*/
.ml-auto {margin-left: auto;}
.flex {display:flex}
.flex-items-center {display:flex;align-items:center}


/* Breakcrumb */
.breakcrumb {
    padding-top: 0rem;
    display: flex;
    gap: 0.625rem;
    align-items: center;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    padding: 0 9%;
  }
  .breakcrumb .previous {
    color: #273155;
    font-size: 0.813rem;
    display: flex;
    align-items: center;
    font-weight: normal;
  }
  .breakcrumb .previous:hover {
    color: #273155a8;
    font-size: 0.813rem;
  }
  .breakcrumb i {
    color: #d2af6d;
    font-size: 0.713rem;
  }
  .breakcrumb i.icon-icon19 {
    color: #d2af6d;
    font-size: 1.25rem;
    margin-right: 2.25rem;
    margin-left: -1.25rem;
  }
  .breakcrumb .now {
    color: #273155;
    font-size: 0.813rem;
    font-weight: 600;
  }

.history-breakcrumb-label {
    color: #273155;line-height: 1.5;
    font-size: 0.875rem;font-weight:600;
    display: flex;align-items: center;
}
.history-breakcrumb-label i {
    margin-left:7px;font-size:0.813rem;
}
.history-breakcrumb-label:hover {
    opacity: 0.7;
}