/* Keep this for all project */

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 100;
    src: url(fonts/IBMPlex/IBMPlexSans-Light.otf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 300;
    src: url(fonts/IBMPlex/IBMPlexSans-Regular.otf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/IBMPlex/IBMPlexSans-Medium.otf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 500;
    src: url(fonts/IBMPlex/IBMPlexSans-SemiBold.otf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 600;
    src: url(fonts/IBMPlex/IBMPlexSans-Bold.otf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 700;
    src: url(fonts/IBMPlex/IBMPlexSans-Bold.otf);
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body {
    counter-reset: progressCounter;
}

a:hover {
    color: #121212;
}

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

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

.themeColor {
    color: #015263;
}

.text-black {
    color: #121212;
}

.small, small {
    font-weight: 300;
}

.radio.radio-inline {
    margin-right: 10px;
}

.radio.radio-inline span {
    font-size: 12px;
    vertical-align: middle;
    display: inline-block;
}

.customRadio {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 1px solid #666;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
}

.customRadio:after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background-color: #000;
    border-radius: 50%;
    transform: scale(0);
    /*opacity: 0;*/
    transition: .3s;
}

.customRadio:checked:after {
    transform: scale(1);
    /*opacity: 1;*/
}

.customRadio:checked ~ span {
    color: #000;
}

.kt-container {
    max-width: 100%;
}

.modal {
    background-color: rgba(250, 250, 250, 0.6);
}

.modal-dialog {
    padding: 0 40px;
}

.modal-content {
    margin-top: 27%;
    padding: 20px;
}

.modal-header {
    padding: 0px;
}

.modalTitle {
    text-align: left;
    font-weight: 200;
    font-size: 19px;
    color: #3C424C;
    font-weight: normal;
}

.modal-body {
    font-weight: 200;
    color: #818A98;
    font-size: 16px;
    padding: 30px 15px;
}

.modal-body img{
    width:120px;
}

.modalText {
    margin-top: 20px;
}

.btnDefaultModal {
    font-weight: 300;
    font-size: 14px;
    color: #f3f3f4;
    background: linear-gradient(180deg, #3cb6be, #006a7f);
    width: 100%;
    border-style: none;
    outline: none;
    border-radius: 6px;
    padding: 10px 0;
}

.modal-footer {
    background-color: transparent;
}

.modal {
    background-color: rgba(250, 250, 250, 0.6);
}

.modal-dialog {
    padding: 0 40px;
}

.modal-content {
    margin-top: 27%;
    padding: 20px;
}

.modal-header {
    padding: 0px;
}

.modalTitle {
    text-align: left;
    font-weight: 200;
    font-size: 19px;
    color: #3C424C;
    font-weight: normal;
}

.modal-body {
    font-weight: 200;
    color: #818A98;
    font-size: 16px;
    padding: 30px 15px;
}

.modal-body img{
    width:120px;
}

.modalText {
    margin-top: 20px;
}

.btnDefaultModal {
    font-weight: 300;
    font-size: 14px;
    color: #f3f3f4;
    background: linear-gradient(180deg, #3cb6be, #006a7f);
    width: 100%;
    border-style: none;
    outline: none;
    border-radius: 6px;
    padding: 10px 0;
}

.modal-footer {
    background-color: transparent;
}


/* Keep until here */

/* Dashboard */

.pageContent {
    margin-top: 15px;
}

.pageContentWrapper, .sideMenuWrapper {
    padding-top: 69px;
}

.pageContentWrapper {
    padding-bottom: 20px;
}

.pageTitle {
    font-weight: 400;
    margin: 25px 0;
    font-size: 25px;
}

.sideMenuWrapper {
    box-shadow: 1px 0 20px -15px #000;
    position: relative;
    z-index: 1;
    min-height: calc(100vh);
    align-items: flex-start;
    align-content: flex-start;
    height: 100%;
}

.sideBarItem {
    padding-top: 10px;
    padding-bottom: 10px;
}

.sideBarMenuDropdownItem {
    padding-left: 43px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.userDetails {
    margin: 30px 0;
    color: #818A98;
}

.userShortIconWrapper {
    padding-left: 10px;
    padding-right: 10px;
}

.userShortIcon {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: 1px solid #121212;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    text-transform: uppercase;
    color: #121212;
}

.userNormalDetail {
    font-size: 20px;
    color: #121212;
    font-weight: 500;
}

.userLoginDetail {
    margin-top: 3px;
    font-size: 16px;
    color: #818A98;
}

.dashboardBanner {
    position: relative;
}

.mobileOnly {
    display: none;
}

.pcView {
    display: block;
}

.bannerImg {
    width: 100%;
}

.dashboardBannerTxtWrapper {
    position: absolute;
    color: #fff;
    padding: 15px;
    top: 0;
}

.bannerHeader {
    font-size: 25px;
}

.bannerSubHeader {
    font-size: 14px;
    color: #95979B;
}

.dashboardBannerProgressWrapper {
    margin-top: 10px;
    display: flex;
}

.dashboardBannerProgressItem {
    display: block;
    width: 200px;
    overflow: visible;
    /*background-color: #ccc;*/
}

.progressIndex {
    width: 23px;
    height: 23px;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
}

.progressIndex.completed {
    background-color: #00C087;
}

.progressIndex:before {
    content: "";
    position: absolute;
    right: 100%;
    width: 177px;
    border-top: 1px dashed #F5C61F;
}

.dashboardBannerProgressItem:first-of-type .progressIndex:before {
    content: "";
    position: absolute;
    right: 100%;
    width: 177px;
    border-top: 1px dashed #F5C61F;
    display: none;
}

.progressIndex:after {
    counter-increment: progressCounter;
    content: counter(progressCounter);
    color: #000;
    /*transition: .3s;*/
}

.progressIndex.completed:after {
    content: "\2714";
    /*transform: rotateY(360deg);*/
}

.progressTitle {
    font-size: 16px;
    font-weight: 500;
    margin-top: 5px;
}

.progressContent {
    max-width: 170px;
    font-size: 14px;
    font-weight: 100;
    color: #838D9A;
}

.btn.btn-primary, .btn.btn-primary2, .btn.btn-default {
    padding: 4px 20px;
    border-radius: 5px;
    font-size: 14px;
}

.btnFixWidth {
    width: 105px;
}

.btn.btn-primary {
    background: rgb(60,182,190);
    background: linear-gradient(180deg, rgba(60,182,190,1) 0%, rgba(0,106,127,1) 100%);
    color: #f3f3f4;
    border: 1px solid rgb(60,182,190);
}

.btn.btn-primary:hover {
    border: 1px solid rgb(60,182,190);
    color: #f3f3f4;
    background: linear-gradient(180deg, rgba(0,106,127,1) 0%, rgba(60,182,190,1) 100%);
}

.btn.btn-default {
    background-color: transparent;
    color: #818A98;
    border: 1.5px solid #e1e1e1;
}

.btn.btn-default.active, .btn.btn-default:active, .btn.btn-default:hover, .show>.btn.btn-default {
    color: #121212;
    border: 1.5px solid #121212;
    background-color: transparent;
}

.btn.btn-primary2 {
    background-color: transparent;
    color: #3CB6BE;
    border: 1.5px solid #3CB6BE;
}

.btn.btn-primary2.active, .btn.btn-primary2:active, .btn.btn-primary2:hover, .show>.btn.btn-primary2 {
    color: #121212;
    border: 1.5px solid #121212;
    background-color: transparent;
}

.btn.btn-primary.zoomBtn {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 23px;
}

.modal-footer {
    padding-left: 0;
    padding-right: 0;
}

.modal-footer .btn, .modal-footer .btn:hover, .modal-footer .btn:active {
    width: 100%;
    padding-top: 7px;
    padding-bottom: 7px;
}

.dashboardWrapper {
    padding: 20px;
    border-radius: 3px;
    border: 1px solid #F3F3F3;
    box-shadow: 0 0 5px rgba(0,0,0,.12);
    height: 100%;
}

.dashboardWrapperTitle {
    display: flex;
    font-size: 20px;
    font-weight: 500;
    color: #121212;
    align-items: center;
}

.dashboardWrapperTitle i {
    color: #121212;
}

.dashboardWrapperTitle2 {
    font-size: 14px;
    font-weight: 300;
    color: #3CB6BE;
    margin-right:10px;
}

.dashboardWrapperTitle.isBorder, .profileWrapperTitle.isBorder {
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 15px;
}

.dashboardWrapperTitle.isBorder1 {
    border-bottom: 1px solid #e1e1e1;
    /*padding-bottom: 15px;*/
}

.walletTabMenu {
    display: block;
    border-bottom: 1px solid #e1e1e1;
    margin-top: 20px;
}

.walletTabMenuItem {
    display: inline-block;
    color: #818A98!important;
    font-size: 16px;
    padding: 5px 10px;
    margin-right: 10px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 300;
}

.walletTabMenuItem.active {
    color: #121212!important;
    border-bottom: 3px solid #3CB6BE;
    font-weight: 500;
}

.walletTabPane {
    margin-top: 40px;
}

.walletTabItem {
    display: none;
    opacity: 0;
}

.walletTabItem.active {
    display: block;
    opacity: 1;
    animation: fadeIn .3s;
}

.balanceTxt {
    color: #818A98;
    font-size: 16px;
}

.balanceAmt span {
    display: inline-block;
    font-size: 20px;
    color: #121212;
}

.balanceAmt small {
    display: inline-block;
    margin-left: 5px;
    font-size: 16px;
    color: #121212;
}

.walletBtnWrapper {
    margin-top: 25px;
    margin-bottom: 20px;
}

.borderBottom {
    padding-bottom: 12px;
    border-bottom: 3px solid #3CB6BE;
}

.topSalesWrapper, .editProfileWrapper {
    color: #818A98;
    border-bottom: 1px solid #e1e1e1;
    margin-bottom: 15px;
    padding-bottom: 15px;
    font-size: 14px;
}

.topSalesText1 {
    color: #818A98;
    font-size: 14px;
    font-weight: 400;
}

.topSalesText2 {
    color: #D0D0D0;
    font-size: 14px;
    font-weight: 600;    
}

.textBlue {
    color: #3CB6BE;
}

.dashboardAnnouncementWrapper {
    border-bottom: 1px solid #e1e1e1;
    color: #818A98;
    font-size: 16px;
    padding-bottom: 15px;
    /*margin-bottom: 15px;*/
    cursor: pointer;
}

.dashboardAnnouncementWrapper:hover {
    background-color: #f3f3f4;
}

.dashboardAnnouncementWrapper .des {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 80%
}

.dashboardAnnouncementWrapper .date {
    text-align: right;
    margin-top: 15px;
    font-size: 14px;
}

.dashboardAnnouncementWrapper .title {
    /*text-align: right;*/
    margin-top: 15px;
    color: #000;
    font-weight: 400;
}

.diagramTabMenu {
    display: block;
    border-bottom: 1px solid #e1e1e1;
    margin-top: 20px;
}

.diagramBtn {
    display: inline-block;
    color: #818A98!important;
    font-size: 16px;
    padding: 5px 10px;
    margin-right: 10px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 300;
}

.diagramBtn.active {
    color: #000!important;
    border-bottom: 3px solid #3CB6BE;
    font-weight: 400;
}


.diagramItem {
    display: none;
    opacity: 0;
}

.diagramItem.active {
    display: block;
    opacity: 1;
    animation: fadeIn .3s;
}

.diagramSubTitle {
    font-size: 20px;
    color: #000;
    display: inline-block;
    position: relative;
    font-weight: 400;
    padding-right: 15px;
}

.diagramSubTitle:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    background-color: #3CB6BE;
    transform: translateY(-50%);
    height: 5px;
    width: 75px;
}

.diagramDetails {
    padding-top: 45px;
    display: flex;
    flex-flow: column;
    height: 100%;
    justify-content: space-between;
}

.diagramSummary {
    display: block;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.diagramInputWrapper {
    padding-left: 15px;
    padding-right: 15px;
}

.diagramDetailsTitle {
    color: #818A98;
}

.diagramDetailsAmt span {
    display: inline-block;
    font-size: 28px;
    color: #121212;
    font-weight: 300;
}

.diagramDetailsAmt small {
    display: inline-block;
    margin-left: 5px;
    font-size: 16px;
    color: #121212;
    font-weight: 300;
}

.diagramDetailsAmt2 span {
    display: inline-block;
    font-size: 20px;
    color: #121212;
    font-weight: 300;
}

.diagramDetailsAmt2 small {
    display: inline-block;
    margin-left: 5px;
    font-size: 14px;
    color: #121212;
    font-weight: 300;
}

.linkWrapper {
    display: flex;
    align-items: center;
}

.linkWrapper input{
    color: #B3B3B3;
}

.btn > .fa-share {
    color: #3CB6BE;
}

.topBorder {
    background-color: #4472C4;
    height: 5px;
    width: 65px;
    margin-bottom: 5px;
}

.topBorder.color1 {
    background-color: #ED7D31;
}

.topBorder.color2 {
    background-color: #A5A5A5;
}

.dashboardChart {
    width: 100%;
    height: 350px;
}

/*footer*/

.footer {
    background: #121212;
    color: #818A98;
    padding: 30px 20px;
    font-size: 14px;
}

.footerBorder {
    border-right: 1px solid #01677b;
}

.footerTitle {
    color: #f3f3f4;
    margin-top: 10px;
    font-size: 14px;
}

.footerButton {
    margin-top: 15px;
    width: 130px;
    padding-left: 0;
    padding-right: 0;
}

.footerMenu, .footerText {
    color: #818A98;
    font-size: 13px;
}

.footerMenu:hover, .footerMenu:focus {
    color: #64FAFF;
}

.btn.btn-footer-lang {
    border: 1px solid #01677b;
    color: #f3f3f4;
    padding: 8px 20px;
}

.btn.btn-footer-lang:hover, .btn.btn-footer-lang:focus {
    color: #64FAFF;
}

/*Portfolio*/

.form-group label {
    color: #848E9C;
    font-weight: 300;
    font-size: 14px;
}

.input-group {
    border-bottom: 1px solid #e1e1e1;
}

.input-group-text {
    font-weight: 300;
    font-size: 12px;
    background: transparent;
    border: none;
    padding: 0;
}

.form-group label {
    margin-bottom: 0;
}

.input-sm.form-control, .input-sm.form-control:focus {
    font-weight: 300;
    border: none;
    font-size: 12px;
    text-align: center;
    padding: 0;
    color: #7C8188;
    background-color: transparent;
}

.calendarIcon {
    font-size: 12px;
    color: #7C8188;
    align-self: center;
    margin-right: 8px;
}

/* listing Style */

.noResultIcon {
    font-size: 14px;
    color: #999999;
    margin-right: 7px;
}

.noResultTxt {
    font-weight: 300;
    color: #818A98;
    font-size: 12px;
}

.table thead th {
    text-align: left;
    border: none;
    background-color: #f3f3f4;
    font-weight: 300;
    color: #848E9C;
    font-size: 12px;
    vertical-align: top;
}

.dataTables_wrapper .dataTable th {
    color: #848E9C;
}

.table td {
    font-weight: 300;
    color: #121212;
    text-align: left;
    font-size: 12px;

}

.table tr {
    border-bottom: 1px solid #ECECEC;
}


.table tr:first-child {
    border-bottom: none;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

table.dataTable.dtr-column>tbody>tr>td.control:before, table.dataTable.dtr-column>tbody>tr>th.control:before {
    top: 50%;
    left: 50%;
    height: 22px;
    width: 22px;
    margin-top: -10px;
    margin-left: -10px;
    display: flex;
    position: absolute;
    color: white;
    border: 2px solid white;
    border-radius: 14px;
    box-shadow: 0 0 3px #444;
    box-sizing: border-box;
    text-indent: 0 !important;
    font-family: "MainFont";
    content: '+';
    align-items: center;
    justify-content: center;
    background-color: #3CB6BE;
}

/* End listing Style */

/*Transaction History*/

.btnBox {
    /*border-bottom: 1px solid #e1e1e1;*/
    width: 100%;
    margin: 23px 0;
}

.displayBtn {
    text-align: center;
    padding: 0px 20px 10px 20px;
    color: #818A98;
    font-size: 18px;
    font-weight: 300;
    border-style: none;
    border-bottom: 3px solid transparent;
    background-color: transparent;
}

.displayBtnw {
    text-align: center;
    padding: 0px 20px 10px 20px;
    color: #818A98;
    font-size: 18px;
    font-weight: 300;
    border-style: none;
    border-bottom: 3px solid transparent;
    background-color: transparent;
}

.displayBtn.active {
    border-bottom: 3px solid #3CB6BE;
    color: #121212;
    font-weight: 400;
}
.displayBtnw.active {
    border-bottom: 3px solid #3CB6BE;
    color: #121212;
    font-weight: 400;
}

.display.active {
    display: block;
}

.displayw.active {
    display: block;
}

.display {
    display: none;
}

.line1 {
    background-color: #e1e1e1;
    height: 0.5px;
    margin: -23px 0 23px 0;
}

/* END Transaction History*/

/* My Wallet*/

.displayBox {
    padding: 0 30px 23px 30px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    background-color: #fff;
}

.subBtnBox {
    border-bottom: 1px solid #e1e1e1;
}

.subDisplayBtn {
    text-align: center;
    padding: 10px 15px;
    color: #818A98;
    font-size: 14px;
    font-weight: 300;
    border-style: none;
    border-bottom: 3px solid transparent;
    background-color: transparent;
}

.subDisplayBtn.active {
    border-bottom: 3px solid #3CB6BE;
    color: #121212;
}

/*.submitBtn {
    font-weight: 400;
    font-size: 12px;
    color: #f3f3f4;
    background: linear-gradient(180deg, #3cb6be, #006a7f);
    border-style: none;
    border-radius: 6px;
    padding: 6px 20px;
    margin-bottom: 23px;
}*/

.subDisplay {
    display: none;
}

.subDisplay.active {
    display: block;
}

.formLabel {
    font-weight: 300;
    font-size: 12px;
    color: #818A98;
    margin-bottom: 5px;
}

.form-control {
    width:100%;
    outline: none;
    border: 1px solid #e1e1e1;
    padding: 10px 9px;
    border-radius: 6px!important;
    font-size: 11px;
    color: #121212;
}

.listingTitle {
    color: #121212;
    font-size: 18px;
    font-weight: 400;
}

/*wallet modal style*/

.modal {
    background-color: rgba(250, 250, 250, 0.6);
}

.modal-dialog {
    padding: 0 40px;
}

.modal-content {
    margin-top: 27%;
    padding: 20px;
}

.modal-header {
    padding: 0px;
}

.modalTitle {
    text-align: left;
    font-weight: 200;
    font-size: 19px;
    color: #3C424C;
}

.modal-body {
    font-weight: 200;
    color: #818A98;
    font-size: 16px;
    padding: 0 0;
    margin-top: 10px;
}

.modal-body img{
    width:120px;
    margin-top: 30px;
}

.modalText {
    margin-top: 20px;
}

.modalText.padding {
    padding: 0 70px;
}

.modalConfirmBtn {
    font-weight: 300;
    font-size: 14px;
    color: #f3f3f4;
    background: linear-gradient(180deg, #3cb6be, #006a7f);
    width: 100%;
    border-style: none;
    outline: none;
    border-radius: 6px;
    padding: 10px 0;
}

.accConfirmBox1 {
    background-color: #F7F7F7;
    padding: 12px 20px;
}

.valueBox {
    padding: 2px 0;
}


.accConfirmBox2 {
    padding: 10px 30px 35px 30px;
    margin: 20px 5px 8px 5px;  
    box-shadow: 0 0 8px 0 #ddd;
    border-radius: 3px;
}

.valueFont {
    font-weight: 400;
    font-size: 11px;
    color: #121212;
    margin-top: 2px;
}

.inputBox {
    margin: 23px 0;
}

.passwordBox {
    position: relative;
}

.eyeIco.active, .eyeIco1.active {
    display: block;    
}

.eyeIco, .eyeIco1 {
    display: none;     
    position: absolute;
    right: 8px;
    top: 12px;
    /*transform: translateY(-50%);  */
    color: #848E9C; 
    cursor: pointer;
}

.form-control::placeholder {
    color: #BCBCBC;
}

.modalSuccessBtn {
    font-weight: 300;
    font-size: 14px;
    color: #f3f3f4;
    background: linear-gradient(180deg, #3cb6be, #006a7f);
    width: 100%;
    border-style: none;
    outline: none;
    border-radius: 6px;
    padding: 10px 0;
    margin-top: 35px;
}

/*END wallet modal style*/

/* deposit */

.tLogo {
    width: 40px;
    margin-right: 20px;
}

.subTitle {
    font-size: 18px;
    font-weight: 400;
    color: #121212;
}

.subTitle.bold {
    font-weight: 400;
}

.textFont {
    color: #121212;
    font-size: 14px;
    font-weight: 300;
    color: #818A98;
}

.sampleQR {
    max-width: 100%;
    margin: 23px 0;
}

.input-group-text.qrCode {
    border:none;
    background-color: #f7f8fa;
    color: #3CB6BE;
    padding: 0 10px;
    font-weight: 400;
    font-size: 12px;
}

.input-group.qrCode {
    border-bottom: none;
    margin: 0 -10px;
}

.form-control.qrCode::placeholder {
    color: #121212;
}

.depositIconWrapper {
    height: 80px;
}

.depositIcon {
    width: 60px;
    cursor: pointer;
    margin-right: 40px;
}

.depositIcon:hover {
    width: 80px;
}

/*downlaod centre*/

.displayBox1 {
    padding: 40px 30px;
    border: 1px solid #EBEBEB;
    border-radius: 4px;
    background-color: #fff;
}

.subDisplayBox {
    position: relative;
    box-shadow: 0 3px 6px 1px #ddd;
    border-top: 3px solid #3CB6BE;
}

.newUpdate {
    display: none;
    position: absolute;
    top: -18px;
    left: 0;
    background-color: #F23051;
    clip-path: polygon(0 0, 0% 100%, 85% 100%, 100% 0);
    padding: 2px 19px 2px 15px;
    color: #f3f3f4;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.newUpdate.active {
    display: block;
}

.currentTime {
    font-size: 14px;
    font-weight: 300;
    color: #818A98;
    margin: 10px 0;
}

.contentTitle {
    font-size: 14px;
    font-weight: 600;
    color: #121212;
    margin: 10px 0 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.contentItems {
    font-size: 12px;
    font-weight: 300;
    color: #818A98;
    margin: -10px 0 0 0;
    overflow: hidden;
    white-space: pre-line;
    text-overflow: ellipsis;
    height: 75px;
}

.downloadContentItems {
    font-size: 14px;
    font-weight: 300;
    color: #818A98;
    margin: 10px 0 15px 0;
}

.downloadBox {
    width: 100%;
    border-top: 1px solid #e1e1e1;
    padding: 10px;
    text-align: center;
}

.downloadBox i {
    color: #3CB6BE;
    border: 1px solid #3CB6BE;
    border-radius: 50%;
    padding: 8px;
    font-size: 14px;
    margin-right: 8px;
}

.downloadBtn1 {
    color: #3CB6BE;
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
}

.reentryBalWrapper {
    /*width: 350px;*/
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 50px;
    border: 1px solid #3CB6BE;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}
.reentryBalIcon {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
.reentryBalTitle {
    display: inline-block;
    margin-left: 10px;
    color: #818A98;
    vertical-align: middle;
}
.reentryBalDisplay {
    text-align: right;
    color: #121212;
    font-weight: 400;
}

.allPackageWrapper {
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 15px;
}

.packageWrapper {
    border: 1px solid transparent;
    padding: 15px;
    border-radius: 4px;
    background-color: transparent;
    opacity: 0.6;
    height: 100%;
    max-width: 100%;
    width: 430px;
}

.packageWrapper:hover {
    opacity: 0.8;
}

.packageWrapper.active {
    border: 1px solid #3CB6BE;
    background-color: #EDFFFE;
    opacity: 1;
}

.packageWrapper.soldOut {
    position: relative;
    pointer-events: none;
    opacity: 1;
    overflow: hidden;
}

.packageWrapper.soldOut:before {
    content: "";
    position: absolute;
    background-color: rgba(0,0,0,.65);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.packageWrapper.soldOut:after {
    content: attr(data-status);
    position: absolute;
    left: 15%;
    top: 4%;
    transform: translateX(-50%) rotate(-30deg);
    display: block;
    background-color: #DD1717;
    color: #f3f3f4;
    padding: 5px 15px;
    font-weight: 400;
    font-size: 18px;
    z-index: 2;
    width: 100%;
    text-transform: uppercase;
    text-align: center;
    transform-origin: top center;
}

.packageBlock {
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.packageTitle {
    background: #121212;
    color: #f3f3f4;
    padding: 8px 15px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
}

.packageContent {
    background-color: #f3f3f4;
    padding: 15px;
    height: 100%;
}

.packageImg {
    width: 100%;
}

.packageImg img {
    width: 100%;
}

.packageDesc {
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
}
.packageDescItem {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 5px;
}
.descTitle {
    color: #818A98;
}
.descContent {
    color: #121212;
    font-weight: 400;
}

.packageSubWrapper {
    margin-top: 20px;
}

.packageAmtWrapper {
    margin-bottom: 10px;
}

.amtWrapperTitle {
    color: #818A98;
    font-size: 14px;
}

.form-control.subAmtInp, .form-control.subAmtInp:hover, .form-control.subAmtInp:focus {
    border: 1px solid #e1e1e1;
    border-right: none;
}

.reentryNoResult {
    display: inline-block;
    width: 350px;
    max-width: 100%;
    margin: 15px auto 15px auto;
}

.reentryNoResultTxt {
    color: #818A98;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 300;
}

span.form-control {
    cursor: text;
    white-space: nowrap;
    overflow-x: auto;
    position: relative;
}

/* Hide scrollbar for Chrome, Safari and Opera */
span.form-control::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
span.form-control {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

span.form-control:after {
    content: "";
    width: 8px;
    height: 8px;
    border: solid #ababab;
    position: absolute;
    right: 10px;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.footerDropdownBox {
    display: none;
    position: absolute;
    background-color: #121212;
    top: 0;
    left: 0;
    width: 150px;
    z-index: 3;
    max-height: 100vh;
    border-radius: 0;
    cursor: pointer;
    animation: footerDropdownBoxFadeIn ease 0.3s forwards;
}

.footerDropdownBox .dropdown-item {
    font-weight: 300;
    font-size: 14px;
    color: #fff;
    padding: 0;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border-top: 1px solid #01677b;
    border-radius: 0;
}

.footerDropdownBox .dropdown-item:hover, .footerDropdownBox .dropdown-item.active {
    border-top: 1px solid #01677b;
    background-color: #01677b;
    color: #64FAFF;
}

.dropdown-item.changeLanguage, .btn.btn-footer-lang {
    text-transform: capitalize;
}

.walletDropDown {
    background: #fff;
    display: none;
    position: absolute;
    z-index: 3;
    border: 1px solid #efefef;
    box-shadow: 0 1px 3px #dedede;
}

.walletDropDown .walletItems {
    display: block;
    padding: 5px 15px;
    cursor: pointer;
    color: #121212;
}

.walletDropDown .walletItems:hover {
    background-color: #dedede;
}

.input-group-text.subAmtTxt {
    padding: 0 15px;
    border: 1px solid #e2e5ec;
    background: #fff;
    border-left: none;
    color: #121212;
}

.packageTncLink {
    font-size: 12px;
    color: #818A98;
    font-weight: 300;
    margin-top: 10px;
}

.packageTncLink a {
    color: #3CB6BE;
    text-decoration: underline;
}

.packageTncLink a:hover {
    color: #121212;
    text-decoration: underline !important;
}

.eyeIco.active, .eyeIco1.active {
    display: block;    
}

.eyeIco, .eyeIco1 {
    display: none;     
    position: absolute;
    right: 8px;
    top: 10px;
    /*transform: translateY(-50%);  */
    color: #848E9C; 
    cursor: pointer;
}

.form-control, .form-control:focus {
    outline: none;
    border: 1px solid #e1e1e1;
    padding: 10px 9px;
    border-radius: 6px;
    font-size: 12px;
    color: #121212;
    font-weight: 400;
}

.form-control:focus {
    border: 1px solid #121212;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: none;
    padding-right: 0;
}

.input-group-prepend ~ .invalid-feedback {
    position: absolute;
    top: 100%;
}

.modal .modal-content .modal-header .modal-title {
    font-weight: 500;
    font-size: 18px;
    color: #121212;
}

.newsDes {
    font-size: 14px;
    font-weight: 300;
    color: #818A98;
    white-space: pre-line;
}

.confirmWrapper {
    display: block;
    background-color: #F7F7F7;
    padding: 15px;
    margin-bottom: 25px;
}
.confimationTable {
    width: 100%;
}
.confimationTable tr td {
    color: #818A98;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 400;
}
.confimationTable tr td:last-child {
    color: #121212;
}

/*transfer, covert, withdraw*/

.smallLinkBtn {
    text-decoration: underline;
    color: #3CB6BE; 
    font-size: 12px; 
    font-weight: 400;
}

.amountBox {
    width:100%;
    outline: none;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    font-size: 11px;
    color: #121212;  
    flex-wrap: nowrap;
    position: relative;
    align-items: center;
}

.amount, .amount:focus {
    text-align: right;
    border: none;
    padding-right: 0;
}

.input-group-text.amountTxt {
    margin: 0 10px;
    color: #121212;
    font-weight: 400;
    font-size: 12px;
}

.input-group-append > .amountTxt {
    color: #3CB6BE;
}

.addAdressText {
    margin: 0px 8px;
    font-size: 12px;
    color: #818A98;
    font-weight: 400;
}

.formLabel1 {
    font-size: 14px;
    color: #818A98;
    font-weight: 300;
    margin: 0;
}

.formLabel1 ~ span {
    font-size: 12px;
    color: #121212;
    font-weight: 400;
}

.receiveAmountTxt {
    font-size: 12px;
    color: #121212;
    font-weight: 400;
}

.verificationEmailBox {
    font-size: 12px;
    color: #3CB6BE;
    font-weight: 400;
    padding: 4px;
    padding-right: 10px;
    border: 1px solid #3CB6BE;
    border-radius: 25px;
    /*width: 90px;*/
}

.paymentMethodBox {
    font-size: 12px;
    color: #3CB6BE;
    font-weight: 400;
    padding: 7px;
    border: 1px solid #3CB6BE;
    border-radius: 10px;
    /*width: 90px;*/
}
    
.verificationEmailBox > .far, .verificationEmailBox > .fa {
    font-size: 16px;
    border-radius: 50%;
    background-color: #3CB6BE;
    padding: 8px;
    color: #f3f3f4;
    margin-right: 6px;
}

.mobileCheckbox {
    margin-top: 5px;
}

/* END transfer, covert, withdraw*/

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.qrCodeWrapper {
    height: 200px;
    position: relative;
}

.qrCodeWrapper img, .qrCodeWrapper canvas {
    position: relative;
    z-index: 5;
}

.qrCodeWrapper:before {
    content: "";
    position: absolute;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: solid #ccc;
    border-width: 2px 0px 1px 2px;
    animation: spinner .4s infinite;
    border-radius: 50%;
    top: calc(50% - 21px);
    left: calc(50% - 21px);
}

.lastTransactionLine {
    font-weight: 500;
    color: #000;
}
.viewAllBtn, .viewAllBtn:hover, .viewAllBtn:focus {
    display: inline-block;
    margin-left: 15px;
    color: #3CB6BE;
    text-decoration: underline;
}

/*Sponsor diagram*/

/*.btn.btn-primary.zoomBtn {
    padding: 0;
    width: 52px;
    font-size: 30px;
}*/

.disgramBox {
    margin: 0;
    background: linear-gradient(180deg, #fff, #E7E7E7);
    border: 2px solid #DCDCDC;
    padding: 0px 10px;
    border-radius: 9px;
    width: 220px;
    text-align: center;
    box-shadow: none;
}

.diagramIcon {
    padding: 0 10px;
}

.sponsorUsername, .downlinesUsername {
    text-transform: uppercase;
    color: #7C8188;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 3px;
    text-indent: 3px;
    /*margin: 15px 0;*/
    z-index: 1;
}

.diagramSeperator {
    height: 2px;
    background: #3CB6BE;
}

.diagramText {
    color: #7C8188;
    font-weight: 300;
    font-size: 14px;
}

.diagramNum {
    color: #7C8188;
    font-weight: 500;
    font-size: 14px;
}

.hv-item-child.proNode > .disgramBox {
    background-image: url("/images/project/diagramBox.png");
    background-size: cover;
    border: 2px solid #00EFFF;
}

.hv-item-child.proNode > * > * > * > .diagramSeperator {
    background: linear-gradient(0deg, rgba(255,255,255,0.5) 0%, rgba(158,219,223,0.3) 50%, rgba(255,255,255,0) 100%);
}

.hv-item-child.proNode > * > * > * > .downlinesUsername {
    color: #1EEAFF;
}

.hv-item-child.proNode > * > * > * > * > .diagramText {
    color: #D4D4D4;
}

.hv-item-child.proNode > * > * > * > * > .diagramNum {
    color: #f3f3f4;
}

.uplineName {
    text-transform: uppercase;
    color: #121212!important;
}

.list-group-item {
    width: 100%;
    color: #495057;
    text-align: inherit;
    font-weight: 400;
}

.targetVertical {
    color: #121212;
    text-transform: capitalize;
}

/*Profile*/

.profileWrapperTitle {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 500;
    color: #121212;
}

.editProfileWrapper i {
    color: #121212;
    border: 1px solid black;
    border-radius: 50%;
    font-size: 16px;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.settingText {
    color: #121212;
    font-weight: 500;
    font-size: 16px;
}

.grey {
    color: #818A98;
}

.settingText li {
    font-size: 14px;
    font-weight: 300;
    color: #818A98;
}

.editProfileWrapper.noBorder {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.profileStatusText {
    font-size: 14px;
}

.profileStatusText i {
    border: none;
    display: inline-flex;
    width: auto;
    height: auto;
    font-size: 14px;
}

.green, .fas.green {
    color: green;
}

.red, .fas.red {
    color: red;
}

.yellow, .fas.yellow {
    color: #FFB818;
}

.editProfileWrapper > * > .btn.btn-default , .editProfileWrapper > * > .btn.btn-primary {
    width: 110px;
}

.recentLoginModalText {
    color: #121212;
    font-size: 23px;
}

.emailVerificationModalText {
    font-size: 14px;
    font-weight: 400;
    color: #818A98;
}

.emailVerificationModalText > .fas.fa-info {
    color: #3CB6BE;
    height: 15px;
    width: 15px;
    border: 1px solid #3CB6BE;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 11px;
    font-size: 11px;
}

.form-control.profileModalResendBtn {
    background-color: #848E9C;
    color: #f3f3f4;
    font-size: 11px;
    padding: 10px 9px;
    width: 100%;
    border-radius: 6px;
    height: calc(1.5em + 1.3rem + 2px);
}

select#country {
    width:100%;
    outline: none;
    border: 1px solid #e1e1e1;
    padding: 10px 3px;
    border-radius: 6px;
    font-size: 11px;
    color: #121212;
}

.mobileBox {
    width:100%;
    outline: none;
    border: 1px solid #e1e1e1;
    /*padding: 8.7px 3px;*/
    border-radius: 6px;
    font-size: 11px;
    color: #121212;  
    flex-wrap: nowrap;
    position: relative;
    align-items: center;
}

.mobileBox .fa {
    position: relative;
    margin-left: -10px;
    z-index: 0;
}

.mobileBox.is-invalid {
    border: 1px solid #fd397a;
}

.mobileBox .form-control {
    font-size: 12px;
    width: 60px;
    padding: 10px 9px;
    border: none;
    cursor: pointer;
    background: transparent;
    position: relative;
    z-index: 1;
}

.mobileBox .form-control.phone {
    width: 100%;
    cursor: text;
}

.customSelectBox {
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    max-height: 150px;
    border: 1px solid #ccc;
    overflow: auto;
    z-index: 10;
    background: #fff;
    display: none;
}

.customSelectBox.open {
    display: block;
}

.customSelectItem {
    display: block;
    padding: 5px 15px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    font-weight: 400;
    font-size: 11px;
}

.customSelectItem:hover {
    background: #007f99;
    color: #fff;
}

.customSelectItem:last-of-type {
    border-bottom: none;
}

/*basic & advance identity*/


.identityTabItem {
    font-size: 16px;
    color: #818A98;
    font-weight: 400;
}

.identityTabItem.active {
    color: #121212;
}

.numCircle {
    padding: 3px 7px;
    font-size: 14px;
    font-weight: 300;
    color: #818A98;
    border-radius: 50%;
    border: 1.5px solid #818A98;
}

.numCircle.active {
    background-color: #3CB6BE;
    color: #f3f3f4;
    border: 1.5px solid #3CB6BE;
}

.identityTabItem::before{
    content: "---------------";
    font-weight: 100;
}

.identityTabItem:first-of-type::before{
    content: unset;
}

.identityTabItem.active::before {
    color: #3CB6BE;
}

/*.identityTabItem.frontLine::before {
    content: "---------------";
    font-weight: 100;
    margin-right: 10px;
}*/

.pageSubtitle {
    font-weight: 600;
    font-size: 20px;
    color: #121212;
}

.identityTabItem > .fa-check {
    padding: 5px;
    font-size: 12px;
    color: #3CB6BE;
    border-radius: 50%;
    border: 1.5px solid #3CB6BE;
}

.step2Text {
    font-size: 14px;
}

.step2Text div:not(.invalid-feedback){
    color: #121212;
    font-weight: 500;
    margin-bottom: 20px;
}

.step2Text li {
    color: #818A98;
    font-weight: 300;
}

input[type="file"] {
    display: none;
}

.step2Text1 {
    color: #121212;
    font-weight: 300;
    padding-top: 5px;
}

.verifyIcon {
    width: 80px; 
    margin: auto;
}

.identityDetails1 {
    font-size: 14px;
    color: #818A98;
}

.identityDetails2 {
    font-size: 20px;
    color: #121212;
}

.step3Text {
    font-size: 18px;
    color: #121212;
    font-weight: 500;
    margin-bottom: 20px;
    display: none;
}

.idCardSample {
    width: 100%;
}

/*announcement*/

.updatedTime {
    font-size: 12px;
    font-weight: 300;
    color: #818A98;
    margin: 10px 0;
}

.imgFit {
    max-width: 100%;
    object-fit: contain;
    max-height: 100%;
    /*background: rgb(244,244,244);*/
}

.modal-content img.imgFit {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-top: 0;
    background: none;
}

.mailIco {
    font-size: 32px;
    color: #121212;
    align-self: center;
    margin-right: 20px;
}

.verifyText {
    color: #818A98;
    font-size: 12px;
    font-weight: 200;
    line-height: 16px;
}

.verifyTextBox {
    margin: 30px 0;
}

.codeBox {
    margin: 14px 0;
}

input.codeItem, input.codeMigrateItem {
    width: 43px;
    padding: 8px 0;
    text-align: center;
    font-size: 18px;
    font-weight: 200;
}

input.codeItem:hover, input.codeItem:focus, input.codeMigrateItem:hover, input.codeMigrateItem:focus {
    border: 1px solid #3CB6BE;
}

.verifyBox {
    margin: 30px 0;
}

/*#qrcode img {
    width: 100%;
}*/

#popUpModal .modal-dialog {
    max-width: 600px; 
    margin-top: 50px;
}

#popUpModal .modal-body img {
    margin-top: 0;
}
.mySlides{
    padding: 0;
    background: #fff;
}

.memoRadio {
    position: absolute;
    display: none;
}

.memoRadio.img + img {
    display: none;
}

.memoRadio.img:checked + img {
    display: block;
}

.memoRadio.vid + video {
    display: none;
}

.memoRadio.vid:checked + video {
    display: block;
}

.memoLabel {
    height: 80px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    overflow: hidden;
    border: 1px solid transparent;
    opacity: .5;
}

.memoRadio.img:checked ~ .memoButtonWrapper .memoLabel.img {
    border: 1px solid #999;
    opacity: 1;
}

.memoRadio.vid:checked ~ .memoButtonWrapper .memoLabel.vid {
    border: 1px solid #999;
    opacity: 1;
}


.w3-btn, .w3-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}



.w3-display-right {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
}

.w3-display-left {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
}

.w3-black, .w3-hover-black:hover {
    color: #fff !important;
    background-color: #000 !important;
}


@keyframes footerDropdownBoxFadeIn {
    0% {
        opacity:0;
        top: 20%;
        max-height: 100vh;
        z-index: -1;
    }
    100% {
        opacity:1;
        top: 0;
        max-height: 100vh;
        z-index: 0;
    }
}

#captchaModal {
    overscroll-behavior-x: contain;
}

/*stake FIL*/

.btn-default.stakeDaysBtn.active {
    color: #3CB6BE;
    border: 1.5px solid #3CB6BE;
}

/*dashboard carousel*/

.carousel-control-next, .carousel-control-prev {
    width: 5%;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    background-color: rgba(0,0,0,0.3);
}

.carousel-control-next:focus, .carousel-control-prev:focus{
    opacity: 0;
}

.carousel-control-next:hover, .carousel-control-prev:hover {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9;
}

.carousel-control-next.mobile, .carousel-control-prev.mobile {
    width: 10%;
    opacity: 0;
    background-color: rgba(0,0,0,0);
}

.carousel-control-next.mobile:focus, .carousel-control-next.mobile:hover, .carousel-control-prev.mobile:focus, .carousel-control-prev.mobile:hover {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9;
}

/*dashboard news*/

.newsWrapper {
    max-height: 410px;
    overflow-y: auto;
}