/* Keep this for all project */

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 100;
    src: url(fonts/rubik/Rubik-Regular.ttf);
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 200;
    src: url(fonts/rubik/Rubik-Regular.ttf);
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300;
    src: url(fonts/rubik/Rubik-Regular.ttf);
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/rubik/Rubik-Medium.ttf);
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    src: url(fonts/rubik/Rubik-SemiBold.ttf);
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    src: url(fonts/rubik/Rubik-SemiBold.ttf);
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    src: url(fonts/rubik/Rubik-Bold.ttf);
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 800;
    src: url(fonts/rubik/Rubik-ExtraBold.ttf);
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 900;
    src: url(fonts/rubik/Rubik-Black.ttf);
}

/* 

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300;
    src: url(fonts/Manrope/static/Manrope-Regular.ttf);
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/Manrope/static/Manrope-Medium.ttf);
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    src: url(fonts/Manrope/static/Manrope-SemiBold.ttf);
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    src: url(fonts/Manrope/static/Manrope-Bold.ttf);
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    src: url(fonts/Manrope/static/Manrope-ExtraBold.ttf);
}

@font-face {
    font-family: 'SecondFont';
    font-style: normal;
    font-weight: 300;
    src: url(fonts/sui_generis/sui-generis-rg.otf);
}

@font-face {
    font-family: 'ChineseMainFont';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/miaozi-wenanti-Regular-2.ttf);
} */

.body, div, a, button, span, input, section,footer,header {
    font-family: "Rubik", sans-serif;
}

.font2 {
    font-family: "Rubik", sans-serif !important;
}

/* Keep until here */

:root {

    /*theme-color*/
    --primary-color: #ffffff;
    --secondary-color: #f7f9fb;
    --tertiary-color: #323232;
    --error-color: #c51017;
    --warning-color: #ffe139;
    /* --success-color: #4dff2c; */
    --success-color: #755ff7;
    --hyperlink-text-color: #755ff7;

    /*webpage*/
    --primary-bg-color: #ffffff;
    --secondary-bg-color: #f7f9fb;
    --primary-text-color: #000000;
    --secondary-text-color: #8B8B8B;
    --tertiary-text-color: #FFFFFF;
    --fourth-text-color: #D4B25E;
    --onhover-text-color: #000;
    --xl-text-size: 30px;
    --lg-text-size: 24px;
    --md-text-size: 18px;
    --sm-text-size: 15px;
    --ssm-text-size: 14px;
    --xs-text-size: 12px;

    /*font-weight*/
    --default-font-weight-thin: 300;
    --default-font-weight-thick: 500;
    --default-font-weight-bold: 700;
    --default-font-weight-max: 900;

    /*button*/
    --btn-primary-bg-color: #D4B25E;
    --btn-secondary-bg-color: #A7742B;
    --btn-tertiary-bg-color: #8B8B8B;
    --btn-disabled-bg-color: "";
    --btn-onHover-primary-bg-color: #c6a759;
    --btn-onHover-secondary-bg-color: #bb8231;
    --btn-onHover-tertiary-bg-color: #b2b2b2;
    --btn-primary-text-color: #ffffff;
    --btn-secondary-text-color: #ffffff;
    --btn-tertiary-text-color: #FFF;
    --btn-disabled-text-color: "";
    --btn-onHover-primary-text-color: #ffffff;
    --btn-onHover-secondary-text-color: #ffffff;
    --btn-onHover-tertiary-text-color: #FFF;
    --btn-width-long: 170px;
    --btn-width-short: 130px;
    --btn-border-radius: 20px;
    --button-border: "";

    /*input*/
    --input-label-size: 15px;
    --input-text-size: 15px;
    --input-border-radius: 3px;
    --input-border: 1px solid #DEDEDE;
    --input-bg-color: transparent;
    --input-width-long: 100%;
    --input-width-short: "";
    --input-placeholder-size: 15px;
    --input-placeholder-color: #9F9F9F;
    --input-onfocus-border-color: "";
    --input-disabled-bg-color: #e4e6e9;

    /*header*/
    --header-bg-color: #f7f9fb;
    --header-text-size: var(--sm-text-size);
    --header-text-color: #464646;
    --header-border: 1px solid #e4e6e9;
    --header-box-shadow: "";
    --header-menu-onHover-color: #000000;
    --header-menu-onActive-color: #000000;
    --header-menu-onActive-border: 3px solid #755ff7;
    --header-menu-dropdown-text-color: #8b93a4;

    /*footer*/
    --footer-bg-color: transparent;
    --footer-border: 1px solid #e4e6e9;
    --footer-text-size: var(--xs-text-size);
    --footer-text-color: #8b93a4;
    --footer-onHover-color: "";
    --footer-label-color: #3d3d3d;

    /* Others */
    --container-border-radius: 15px;
}

.btn{
    border-radius: var(--btn-border-radius);
    border: solid 0px;
    color: var(--btn-primary-text-color);
    font-size: var(--ssm-text-size);
    width: var(--btn-width-short);
    padding: 10px 1.5rem;
    font-weight: var(--default-font-weight-thick);
    cursor: pointer;
}

.btn-primary {
    background: var(--btn-primary-bg-color);
    color: var(--btn-primary-text-color);
}

.btn-primary:hover {
    background: var(--btn-onHover-primary-bg-color);
    color: var(--btn-onHover-primary-text-color);
}

.btn-secondary {
    background: var(--btn-secondary-bg-color);
    color: var(--btn-secondary-text-color);
}

.btn-secondary:hover {
    background: var(--btn-onHover-secondary-bg-color);
    color: var(--btn-onHover-secondary-text-color);
}

.btn-tertiary {
    background: var(--btn-tertiary-bg-color);
    color: var(--btn-tertiary-text-color);
}

.btn-tertiary:hover {
    background: var(--btn-onHover-tertiary-bg-color);
    color: var(--btn-onHover-tertiary-text-color);
}

.max-content-btn {
    width: max-content !important;
}

.got-icon-btn {
    display: flex;
    align-items: center;
}

.got-icon-btn img {
    height: 1.2rem;
    width: auto;
    margin-right: 0.5rem;
}

.got-icon-btn img:only-child {
    margin-right: unset;
}

.ipad-below-display {
    display: none;
}

.statusicondiv{
    color: #000;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.statusicon {
    width: 73px;
    height: auto;
    margin-bottom: 1rem;
}

.modalContentWrap,
.ensure{
    color: #000;
}

.btn.listing-btn,
.file-input-btn {
    width: 120px;
    padding: 0.8rem 2.5rem;
}

.form-group {
    margin-bottom: unset;
}

.form-group label,
.form-label {
    color: var(--primary-text-color);
    font-weight: var(--default-font-weight-thick);
}

.form-control {
    border-top: unset;
    border-left: unset;
    border-right: unset;
    border-bottom: var(--input-border);
    /*border-radius: var(--input-border-radius);*/
    border-radius: unset;
    color: var(--primary-text-color);
    font-size: var(--input-text-size);
    font-weight: var(--default-font-weight-thin);
    background-color: var(--input-bg-color);
    border-color: #e2e2e2;
    padding: .65rem 0.5rem;
}

.form-control:focus {
    background-color: var(--input-bg-color);
}

.form-control::placeholder {
    color: var(--input-placeholder-color);
    font-weight: var(--default-font-weight-thin);
}

.noResultTxt {
    font-weight: var(--default-font-weight-thick);
    font-size: 20px;
}

.password-type-group {
    position: relative;
}

.password-type-group .form-control{
    padding-right: 2.5rem;
}

.password-type-group i {
    position: absolute;
    top: 13px;
    right: 10px;
}

.password-type-group:has(.is-invalid) i {
    right: 35px;
}

.password-type-group:has(.is-invalid) .form-control {
    padding-right: 4rem;
}

.modal .modal-content {
    border-radius: var(--default-border-radius);
}

.modal-header {
    border-radius: var(--default-border-radius);
    justify-content: center;
    position: relative;
    font-weight: var(--default-font-weight-max);
}

.modal .close {
    position: absolute;
    top: 11px;
    right: 13px;
}

.modal .modal-content .modal-header .modal-title {
/*    font-size: 20px !important;*/
    font-size: 24px !important;
    color: black !important;
}

.cert-name-setting-modal.modal .modal-content .modal-header {
    justify-content: start;
}

.cert-name-setting-modal.modal .modal-content .modal-header  .modal-title {
    font-size: var(--md-text-size) !important;
}

.modalContentWrap {
    text-align: center;   
    font-weight: 100;
}

.modal-footer {
    border-bottom-right-radius: var(--default-border-radius);
    border-bottom-left-radius: var(--default-border-radius);
    /* background-color: var(--primary-background-color); */
    background-color: #fff;
}
.modal-header {
    padding: 25px 2rem 0px 2rem;
}
 
.modal-body {
    padding: 0.5rem 2rem 1rem 2rem;
    font-weight: 100;
} 

.cert-name-setting-modal.modal .modal-dialog {
    margin-top: 10rem;
    max-width: 350px;
}

.modal-footer {
    padding: 0.5rem 1rem 2rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#canvasMessage .modal-footer .btn {
    width: unset !important;
    padding: 10px 2rem;
    font-size: 14px;
    font-weight: var(--default-font-weight-thin);
}

#canvasMessage{
    z-index:1100;
} 

.sidebar-display-div{
    background-color: white;
    color: #FFF;
    width: 7%!important;
    border-right: 1px solid #e6e6e6;
}
.sidebar-menu-section{
    width: 100%;

}
.sidebar-anchor-item,
.sidebar-anchor {
    padding: 0.2rem 1.5rem;
    font-size: var(--btn-font-size);
    color: #fff;
    width: 100%;
    display: block;
    cursor: pointer;
    margin: 2rem 0rem;
}

.sidebar-anchor-item:first-child,
.sidebar-anchor:first-child {
    margin-top: unset !important;
}

.sidebar-anchor-item:last-child,
.sidebar-anchor:last-child {
    margin-bottom: unset !important;
}

.sidebar-anchor{
    text-align: center;

}
.sidebar-anchor-item{
    padding-left: 55px;


}
.sidebar-anchor-item.active .menu-icon.white,
.sidebar-anchor.active .menu-icon.white,
.sidebar-anchor:hover .menu-icon.white {
    display: none;
}
.sidebar-anchor-item.active .menu-icon.yellow,
.sidebar-anchor.active .menu-icon.yellow, 
.sidebar-anchor:hover .menu-icon.yellow{
    display: inline-block;
}
.menu-icon.yellow{
    display: none;
}
.sidebar-anchor-item.active,
.sidebar-anchor.active, 
.sidebar-anchor:hover{
    background-color: #fff;
    color: #000;
    border-radius: 30px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-weight: bold;
    position: relative;
    /* border-top-left-radius: 50;
    border-bottom-left-radius: 50; */
}

.sidebar-anchor-item.active:before,
.sidebar-anchor.active:before, 
.sidebar-anchor:hover:before {
    content: "";
    transform: translate(50%, -50%);
    height: 100%;
    width: 2px;
    background: transparent linear-gradient(180deg, #D4B25E 0%, #A7742B 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    right: 0px;
    top: 50%;
}

.sidebar-logo-horizontal-line {
    border: 0.8px solid #e6e6e6;
    width: 3.5rem;
    margin: 1rem 0rem;
}

.main-display-div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*overflow: hidden;*/
    position: relative;
    width: 93%;
    min-height: 100vh;
    background-color: var(--secondary-bg-color);
}

.main-display-div:has(.dashboard-cert-bg) {
    background-image: var(--dashboard-cert-bg);
    background-repeat: no-repeat;
    background-size: 25% 100%;
    background-position: right;
}

.display-level-content-container {
    padding: 3rem 2rem;
    height: 100%;
}

.footer-section1 {
    background-color: var(--footer-bg-color);
    padding: 1rem 2rem;
    color: var(--primary-text-color);
    font-weight: var(--default-font-weight-thick);
    font-size: var(--xs-text-size);
    position: relative;
    text-align: center;
}

/* Start of Header */
.header-title-diplay {
    color: var(--primary-text-color);
    font-size: var(--xl-text-size);
    font-weight: var(--default-font-weight-thick);
}

.header-title-diplay:has(.header-title-name) {
    display: flex;
    align-items: center;
}

.header-title-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.header-btn-section {
    display: flex;
    justify-content: end;
    align-items: center;
}

.header-title-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    /*width: 45px;
    height: 38px;*/
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--tertiary-color);
    cursor: pointer;
}

.header-title-btn img {
    width: 1rem;
}

.header-profile-img-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background-color: var(--tertiary-color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.header-profile-img-item img {
    width: 100%;
    height: auto;
}


/* End of Header */

.language-dropdown-item {
    width: 100%;
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-weight: var(--default-font-weight-thin);
    display: block;
}
.language-dropdown-list {
    position: absolute;
    top: 40px;
    right: -20px;
    /* background-color: var(--primary-background-color); */
    background-color: #fff;
    padding: 0.5rem 0rem;
    box-shadow: var(--default-box-shadow);
    -webkit-box-shadow: var(--default-box-shadow);
    -moz-box-shadow: var(--default-box-shadow);
    border-radius: 5px;
    width: 125px;
    z-index: 3;
    text-align: justify;
}
.language-dropdown-item img {
    width: 15px;
    height: auto;
    box-shadow: var(--default-box-shadow);
    -webkit-box-shadow: var(--default-box-shadow);
    -moz-box-shadow: var(--default-box-shadow);
    border-radius: 50%;
}
.language-dropdown {
    position: relative;
}
.menu-icon{
    width: 16px;
}
a:hover {
    color: unset;
    text-decoration: underline;
}
/* .sidebar-anchor-item {
    padding: 0.5rem 3rem;
    color: var( --default-menu-text-focus-color);  
    display: block;
    font-size: var(--default-font-size);
} */

.sidebar-anchor-item.active{
    color: #000;

}
.language-btn.collapsed i{
    transform: rotate(0deg);
}
.language-btn i{
    transform: rotate(180deg);
}
.sidebar-div{
    min-height: 100vh;
}
.text-end{
    text-align: end  !important; 
    /* justify-content: end; */
}
.header-btn.newdisplay{
 
    background-color: #00000000;
    box-shadow: unset;
    padding: 0 0px 0 0px !important;
}
.section-container {
    padding: 3rem 2.5rem 2rem 2.5rem;
    min-height: 80vh;
}

.content-section-bg {
    height: 100%;
}

/* Listing */
.listing-filter-section .form-group {
    margin-bottom: unset;
}

.date-range-input-group {
    display: flex;
    align-items: center;
    border: 1px solid var(--form-control-border-color);
    border-radius: var(--form-control-border-radius);
    background-color: var(--form-control-background-color);
}

.date-range-input-group .form-control {
    width: 45%;
    border: unset;
    background-color: transparent;
    height: calc(1.5em + 1.3rem);
}

.date-range-input-group .data-range-group-divider {
    font-size: 20px;
}

.date-range-input-group img {
    width: 1.3rem;
    height: auto;
}
/* Listing */

.margin-auto{
    margin: auto !important;
}
.sidebar-display-div.collapse:not(.show) {
    display: block;
}

.btn-back{
    width: 100%;
    padding: 10px;
    background-image: unset;
    background-color: var(--btn-back-background-color) !important;
}

.page-content-section {
    margin-top: 1rem;
}

.title-listing, 
.page-title {
    font-size: 26px;
    font-weight: var(--default-font-weight-thick);
    color: var(--primary-text-color);
}

.page-sub-title {
    font-size: var(--md-text-size);
    font-weight: var(--default-font-weight-thin);
    color: var(--primary-text-color);
}
/* Registration Modal */

.country-select {
    margin-inline: 10px;
}

.register-form-label {
    font-size: var(--label-font-size);
    font-weight: bold;
    color: var(--primary-text-color);
}

.register-form-label span {
    color: red;
}

.modalTitleContainer {
    display: flex;
    justify-content: space-between;
}

.confirmationModalTitle {
    flex: 1;
    text-align: center;
    color: var(--primary-text-color);
    font-size: var(--page-title-size);
    font-weight: bold;
}

.x-mark {
    color: var(--secondary-background-color);
    font-size: 20px;
    cursor: pointer;
}

.register-form-btn {
    width: var(--button-width);
    padding: 10px;
}

.register-form-btn.cancel-button {
    background: #C4C4C4;
}

.phone-ext {
    border-radius: 4px 0 0 4px;
    border-right: none;
    
}

.phone-number {
    border-radius: 0 4px 4px 0;
    border-left: none;
}
.modal-content,
.registration-modal-content {
    border-radius: 30px!important;
}

.registration-modal-body {
    padding: 40px;
}

.country-container .select2.select2-container.select2-container--default, .phone-container .select2-container {
    width: 100%!important;
}

.country-container .select2-selection.select2-selection--single{
    height: 100%;
}

.phone-container .select2-selection.select2-selection--single {
    border: solid 0.5px #aaaaaa;
    border-right: solid 0px !important;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    height: 41.5px;
}

.country-container .select2-container--default .select2-selection--single .select2-selection__arrow, .phone-container .select2-container--default .select2-selection--single .select2-selection__arrow {
    transform: translateY(81%);
}

.phone-container .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px;
}

#registrationModal .form-control {
    border-color: #aaa!important;
}

.registration-btn {
    display: flex;
}

/* End of Registration Modal */

/* Reentry */
.text-tick{
 font-weight: 100;
}
.modal-title{
    font-weight: var(--default-font-weight-bold) !important;
}

.modal .modal-content .modal-header .close:hover{
  color:#000 !important;
}
.reentry-modal-type .btn {
    width: unset;
    min-width: var(--btn-width-short);
    padding: 0.8rem 2.5rem;
}


/* Reentry */

/* Support */
.section-container .form-group {
    margin-bottom: unset;
}

.section-container label span {
    color: #CE152A;
}

.file-input-group {
    display: flex;
    align-items: center;
}

.file-input-node {
    display: none !important;
}

.file-input-btn {
    background-image: var(--btn-primary-bg-color);
    border-radius: var(--btn-border-radius);
    padding: 0.8rem 0rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-group label.file-input-btn {
    color: var(--btn-primary-text-color);
}

.file-input-group span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Support */

/* Inbox */
.inbox-chat-list-div {
    box-shadow: var(--default-box-shadow);
    -webkit-box-shadow: var(--default-box-shadow);
    -moz-box-shadow: var(--default-box-shadow);
    background-color: #ECECEC;
    height: 100%;
    max-height: 100%;
    overflow-y: scroll;
}

.inbox-chat-inner-list-div {
    box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.16);
}

.inbox-chat-list-item {
    background-color: #FFF;
    border-bottom: 1px solid #F0F0F0;
    padding: 1rem 2rem;
    color: #BBBDC4;
    font-weight: var(--default-font-weight-thin);
    font-size: 12px;
    cursor: pointer;
}

/*.inbox-chat-list-item:last-child {
    border-bottom: unset;
}*/

.inbox-chat-list-item:hover,
.inbox-chat-list-item.active {
    background-color: #FFF8C4;
}

.inbox-chat-list-item-title {
    font-weight: var(--default-font-weight-bold);
    font-size: var(--default-font-size);
    max-width: 100%;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000;
}

.inbox-chat-list-item-preview {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-chat-div {
    background-color: #FFF;
    box-shadow: var(--default-box-shadow);
    -webkit-box-shadow: var(--default-box-shadow);
    -moz-box-shadow: var(--default-box-shadow);
    overflow: hidden;
}

.inbox-chat-div.no-msg {
/*    height: 470px;*/
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: var(--default-font-weight-max);
}

.inbox-chat-title {
    background-color: #FFF;
    font-size: var(--default-font-size);
    font-weight: var(--default-font-weight-bold);
    box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.16);
    text-align: center;
    padding: 2rem 1rem;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-chat-img-name {
    color: #8C8C8C;
    max-width: 100%;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.inbox-chat-box-div {
    padding: 2rem;
    /*height: 300;
    max-height: 300;*/
    height: 60vh;
    max-height: 60vh;
    overflow-x: hidden;
/*    background-color: #FFF;*/
}

.inbox-message-display-div {
    max-width: 50%;
}

.inbox-chat-info {
    font-size: 12px;
    font-weight: var(--default-font-weight-thin);
    color: #BBBDC4;
}

.inbox-chat-info.member-type {
    display: flex;
    justify-content: left;
    align-items: center;
}

.inbox-chat-info.admin-type {
    display: flex;
    justify-content: right;
    align-items: center;
}

.inbox-chat-info-title {
    font-size: var(--default-font-size);
    font-weight: var(--default-font-weight-bold);
/*    font-weight: 400;*/
}

.inbox-chat-bubble-div {
    background-color: #FFF8C4;
    border-radius: 7px;
    padding: 1rem;
    display: inline-block;
/*    font-weight: var(--default-font-weight-thin);*/
    font-weight: 100;
    white-space: pre-line;
}

.inbox-message-display-div:has(.admin-type) {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.inbox-chat-bottom-div {
    background-color: #FFF;
    padding: 1rem 2rem;
}

.inbox-chat-textarea {
    width: 100%;
    background-color: transparent;
    border: unset;
    /* border-top: ; */
}

.inbox-chat-textarea[disabled] {
    cursor: not-allowed;
}

.inbox-chat-textarea:focus {
    outline: none !important;
}

.inbox-chat-img-btn {
    font-size: 15px;
    padding: 0rem;
    background-color: transparent;
    border: unset;
}

.inbox-chat-img-btn img {
    width: 30px;
    height: auto;
}

.inbox-chat-img-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.inbox-chat-bubble-img {
    width: 100%;
    height: auto;
}

.inbox-chat-img-div {
    display: flex;
    align-items: end;
}
/* Inbox */

/*My Referral*/
.dataTables_wrapper .dataTable td{
    color: #000;
    font-weight: 100;
}
.select2-container--default .select2-selection--single{
    border: 0.5px solid #aaa !important;
}
.supportbox{
    border-radius: 5px;
    background-color: #f6f6f6;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);;
    
    margin-left: 3rem;
}
.supportbox img{
    border-radius: 5px;
   
}
.supportbox .title{
    font-weight: 600;
    text-align: left;
    font-size: 20px;

}
.supportbox .conten{
    font-weight: 100;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-align: left;
    font-size: 15px;
    margin-top: 15px;

}
.supportbox1{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / 3);
    overflow-x: auto;
    padding: 24px;
    gap: 10px;
    cursor: grab;
    /* scroll-snap-type: x mandatory; */
    -webkit-scroll-snap-type: x mandatory;
    /* scroll-padding-inline: 24px; */
    scroll-behavior: smooth;
     scrollbar-width: none;
     /* max-width:40rem */
}

#card-listing-container {
    display: none;
}
#basicwizard1 {
    display: block;
}

.header-page-title{
    position: relative;
}

/* Pop up modal */

.memo-modal {
    
    padding: 0 !important;
    /*display: flex !important;
    align-items: center;*/
    
    .modal-dialog {
        max-width: max-content;
        margin: 0px auto !important;
        top: 50%;
        transform: translateY(-50%) !important;
    }

    .modal-dialog .modal-content {
        background-color: transparent !important;
        box-shadow: unset !important;
    }

    .modal-dialog .modal-body .pop-up-memo-div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-dialog .modal-body .pop-up-memo-div img {
        max-height: 70vh;
        max-width: 100%;
    }

    .modal-dialog .modal-body .pop-up-memo-div button {
        background-color: transparent;
        color: #b9b9b97a;
        border: none;
        font-size: 80px;
    }

    .modal-dialog .modal-body .pop-up-memo-div button:first-child i {
        padding-right: 20px;
    }

    .modal-dialog .modal-body .pop-up-memo-div button:last-child i {
        padding-left: 20px;
    }
}

/* Pop up modal */

/* Login */
.homepage-section1 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--login-bg-img);
    background-size: cover;

}

.login-div-wrapper {
    position: relative;
}

.login-div {
    border-radius: 5px;
    background-color: white;
    padding: 40px;
}

.login-lang-dropdown-div {
    position: absolute;
    top: 0;
    right: 0;
}

.language-dropdown-list {
    position: absolute;
    top: 40px;
    right: -20px;
    background-color: #fff;
    padding: 0.5rem 0rem;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 5px;
    width: 125px;
    z-index: 3;
    text-align: justify;
}

.language-dropdown-item {
    width: 100%;
    cursor: pointer;
    padding: 0.5rem 1rem;
    color: var(--primary-text-color);
    font-weight: var(--default-font-weight-thin);
    display: block;
}

.login-title-1 {
    font-size: 30px;
    color: black;
    text-align: center;
}

#loginForm .password-login-form-div {
    position: relative;
}

.login-form-password-btn {
    position: absolute;
    top: 13px;
    right: 19px;
    color: #d5d5d5!important;
}

.login-anchor2 {
    color: black;
    text-decoration: underline;
    font-weight: 200;
}

.login-anchor2:hover {
    color: black;
}

.login-btn {
    color: white;
    background: linear-gradient(180deg, #D4B25E 0%, #A7742B 100%);
    border-radius: 30px;
}

.login-btn:hover{
    color: white;
}

.centered-text span {
    display: inline-block;
    padding: 0 20px;
    color: black;
}

.centered-text {
    text-align: center;
    position: relative;
}

.centered-text::before {
    left: 0;
}

.centered-text::after {
    right: 0;
}

.centered-text::before, .centered-text::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 20px);
    height: 1px;
    background-color: lightgray;
}

.connect-wallet-btn {
    background:#000000;
    color: white;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.connect-wallet-btn:hover{
    color: white;
}

.login-form-control-input {
    border: none;
    border-bottom: var(--input-border) !important;
    padding-left: 38px;
}

.register-country-code-div .select2-container--default .select2-selection--single{
    border: none!important;
    border-bottom: var(--input-border)!important;    
}

.register-country-code-div .select2-container .select2-selection--single .select2-selection__rendered {
    margin-top: 14px;
    padding-left: 26px;
    line-height: 4px;
}

.register-country-code-div .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 23px;
    right: -8px;
}

.login-logo-image {
    width: 80px;
}

.login-form-control-input-container {
    position: relative;
}
    
.login-form-control-input-container img {
    width: 15px;
    position: absolute;
    top: 13px;
    left: 0;
}

.connect-wallet-btn img {
    width: 17px;
    margin-right: 10px;
}
body {
    display: block;
}

.errorSpan {
    color: red;
}
/* End of Login */

/* Start of Dashboard */
.dashboard-welcome-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 2rem 0rem 1rem;
}

.dashboard-welcome-text {
    color: var(--primary-text-color);
    font-weight: var(--default-font-weight-thick);
    font-size: var(--lg-text-size);
    display: flex;
    align-items: center;
}

.dashboard-welcome-name,
.header-title-name {
    max-width: 17rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

.dashboard-section-subtitle-text {
    font-size: var(--md-text-size);
    color: var(--primary-text-color);
    font-weight: var(--default-font-weight-thin);
}

.dashboard-section-title-text {
    font-size: 24px;
    color: var(--primary-text-color);
    font-weight: var(--default-font-weight-thick);
}

.dashboard-rank-info-container {
    background-color: var(--tertiary-color);
    border-radius: var(--container-border-radius);
    padding: 2rem 2.5rem;
    box-shadow: 0px 3px 6px #00000029;
    -webkit-box-shadow: 0px 3px 6px #00000029;
    -moz-box-shadow: 0px 3px 6px #00000029;
}

.dashboard-rank-info-label {
    color: var(--tertiary-text-color);
    font-size: var(--sm-text-size);
    font-weight: var(--default-font-weight-thin);
}

.dashboard-rank-info-val {
    color: var(--tertiary-text-color);
    font-size: var(--xl-text-size);
    font-weight: var(--default-font-weight-thick);
}

.dashboard-rank-info-div {
    border-right: 1px solid #5c5c5c;
    /*padding: 1rem 0rem;*/
}

.dashboard-courses-display-container {
    border-radius: var(--container-border-radius);
    border: 1px solid #F4F4F4;
    overflow: hidden;
}

.dashboard-courses-img-display {
    background-image: var(--dashboard-courses-section-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 8rem;
}

.dashboard-courses-text-display {
    padding: 1.5rem 1rem;
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
}

.dashboard-courses-text-display-label {
    color: var(--primary-text-color);
    font-size: var(--sm-text-size);
    font-weight: var(--default-font-weight-thick);
    margin-bottom: 2rem;
}

.dashboard-courses-text-display-val {
    color: var(--secondary-text-color);
    font-size: var(--ssm-text-size);
    font-weight: var(--default-font-weight-thin);
}

.dashboard-banner-image-display {
    width: 100%;
    height: 330px;
}

.carousel {
    border-radius: var(--container-border-radius);
    overflow: hidden;
}

.carousel-indicators .active {
    width: 20px;
}

.carousel-indicators li {
    width: 5px;
    height: 5px;
    transition: 0.2s linear;
    border-top: unset;
    border-bottom: unset;
    border-radius: 20px;
}

.dashboard-cert-section-container {
    padding-left: 2rem;
}

.dashboard-cert-section-title {
    font-size: 22px;
    color: var(--tertiary-text-color);
    font-weight: var(--default-font-weight-thick);
}

.dashboard-cert-display {
    border: 1px solid #FFF;
    box-shadow: 0px 3px 6px #0000008F;
    -webkit-box-shadow: 0px 3px 6px #0000008F;
    -moz-box-shadow: 0px 3px 6px #0000008F;
    border-radius: var(--container-border-radius);
    overflow: hidden;
    margin-bottom: 1rem;
    cursor: pointer;
}

.dashboard-cert-display:last-child {
    margin-bottom: unset;
}

.dashboard-cert-display img {
    width: 100%;
    height: auto;
}

.dashboard-cert-display:has(img) {
    height: auto;
}

.dashboard-cert-display:has(canvas) {
    height: 200px;
}

.cert-pdf-display {
    width: 100%;
    height: auto;
}

.cert-modal .modal-content {
    position: relative;
}

.cert-modal-close-btn {
        position: absolute;
    transform: translate(50%, -50%);
    top: 33px;
    right: 46px;
    z-index: 100;
    cursor: pointer;
} 

.cert-modal-close-btn i {
    font-size: 30px;
    color: #FFF;
}

.modal-preview-canvas {
    border: 1px solid #FFF;
    box-shadow: 0px 3px 6px #0000008F;
    -webkit-box-shadow: 0px 3px 6px #0000008F;
    -moz-box-shadow: 0px 3px 6px #0000008F;
    border-radius: var(--container-border-radius);
    overflow: hidden;
    width: 750px;
    height: 500px;
    max-width: 100%;
}
/* End of Dashboard */

/* Start of License Renewal Page */
.centered-item-display-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.license-renewal-container {
    background-color: var(--primary-bg-color);
    border-radius: var(--container-border-radius);
    box-shadow: 0px 3px 6px #0000001A;
    -webkit-box-shadow: 0px 3px 6px #0000001A;
    -moz-box-shadow: 0px 3px 6px #0000001A;
    padding: 3rem;
    width: 100%;
}

.license-renewal-payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 1.5rem;
}

.license-renewal-payment-row:last-child {
    margin-bottom: unset;
}

.license-renewal-payment-label {
    font-size: var(--sm-text-size);
    color: var(--primary-text-color);
    font-weight: var(--default-font-weight-thin);
}

.license-renewal-payment-value {
    font-size: var(--sm-text-size);
    color: var(--primary-text-color);
    font-weight: var(--default-font-weight-thick);
}

/* End of License Renewal Page */

.form-date-range-container {
    border-bottom: var(--input-border);
    display: flex;
    width: 100%;
    align-items: center;
}

.form-date-range-input-div {
    width: 45%;
    position: relative;
}

.form-date-range-input-div > .form-control {
    width: 100%;
    padding-left: 2.5rem;
    border: unset !important;
}

.form-date-range-icon {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 1.2rem;
    height: auto;
    top: 50%;
    left: 15px;
}

.form-date-range-divider {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.range-icon {
    font-size: 30px;
    color: var(--primary-text-color);
}

.anchor-btn {
    color: var(--fourth-text-color);
    text-decoration: underline;
    font-size: var(--sm-text-size);
    font-weight: var(--default-font-weight-thin);
    cursor: pointer;
}

.anchor-btn:hover {
    color: var(--fourth-text-color);   
}

/* Start of Online Exams */
.online-exam-questions-container {
    background-color: var(--primary-bg-color);
    border-radius: var(--container-border-radius);
    box-shadow: 0px 3px 6px #0000001A;
    -webkit-box-shadow: 0px 3px 6px #0000001A;
    -moz-box-shadow: 0px 3px 6px #0000001A;
    padding: 3rem 3.5rem;
}

.online-exam-questions-num {
    color: var(--primary-text-color);
    font-size: var(--sm-text-size);
    font-weight: var(--default-font-weight-thick);
}

.online-exam-questions-container > .form-group {
    padding-bottom: 2rem;
}

.online-exam-questions-container > .form-group > label.form-label {
    color: var(--primary-text-color);
    font-size: var(--sm-text-size);
    font-weight: var(--default-font-weight-thin);
}

.online-exam-questions-ans-div {
    margin-top: 1rem;
}

.online-exam-qeustions-ans-row {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    width: 100%;
}

.online-exam-qeustions-ans-row:last-child {
    margin-bottom: unset;
}

.online-exam-question-radio-btn-input {
    display: none;
}

.online-exam-question-radio-btn {
    margin-right: 0.5rem;
    cursor: pointer;
    border: 1px solid #D5D5D5;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-top: unset !important;
    margin-bottom: unset !important;
    position: relative;
}

.online-exam-question-radio-btn:has(.online-exam-question-radio-btn-input:checked),
.online-exam-question-radio-btn:hover,
.online-exam-qeustions-ans-row:has(.online-exam-question-radio-label:hover) .online-exam-question-radio-btn {
    background-color: #7DD961;
    border-color: #7DD961;
}

.online-exam-question-radio-btn:has(.online-exam-question-radio-btn-input:checked):after,
.online-exam-question-radio-btn:hover:after,
.online-exam-qeustions-ans-row:has(.online-exam-question-radio-label:hover) .online-exam-question-radio-btn:after {
    position: absolute;
    top: 0;
    right: 0;
}
#pdf-viewer .pdf-page-canvas{
    width: 100%;
}
    transform: translate(50%, -50%);
    width: 8px;
    height: 8px;
    background-color: #FFF;
    top: 50%;
    right: 50%;
    content: "";
    border-radius: 50%;
}

.online-exam-question-radio-label,
.form-group label.online-exam-question-radio-label {
    color: var(--primary-text-color);
    font-size: var(--sm-text-size);
    font-weight: var(--default-font-weight-thin);
    margin-top: unset;
    margin-bottom: unset;
    cursor: pointer;
}

.online-exam-question-radio-label:hover,
.online-exam-qeustions-ans-row:has(.online-exam-question-radio-btn:hover) .online-exam-question-radio-label,
.online-exam-qeustions-ans-row:has(.online-exam-question-radio-btn .online-exam-question-radio-btn-input:checked) .online-exam-question-radio-label,
.form-group label.online-exam-question-radio-label:hover,
.form-group .online-exam-qeustions-ans-row:has(label.online-exam-question-radio-btn:hover) label.online-exam-question-radio-label,
.online-exam-qeustions-ans-row:has(label.online-exam-question-radio-btn .online-exam-question-radio-btn-input:checked) label.online-exam-question-radio-label {
    font-weight: var(--default-font-weight-thick);
}
/* End of Online Exams */