@charset "utf-8";
*{outline:none;}
html{scroll-behavior: smooth;}
body{font-family:'Jost', 'Poppins', sans-serif !important; font-size:14px; background:#fafafa;}
a{text-decoration:none; transition:300ms}
a:hover{text-decoration:underline;}

input, select{box-shadow:none !important;}

.fs-12{font-size:12px !important;}
.fs-14{font-size:14px !important ;}


.shadow-sm{box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.075) !important;}
.bg{background-image:url(../images/overlay.png); background-repeat:no-repeat; background-blend-mode:overlay;}

.box{display:none;}

.btn{font-size:14px;}
.card{border-radius:12px;}


.container-fluid{padding:0 1rem;}

#main-bg.bg{background-size:200% 200%}


#topmenu .dropdown-toggle{color:#fff !important; font-weight:700; font-size:18px; text-decoration:none;}
#topmenu .dropdown-toggle::after{content:unset;}
#topmenu #notifi{background:rgba(var(--bs-primary-rgb)) !important; color:#fff; font-size:12px; font-weight:normal; width:20px; border-radius:20px; line-height:20px; text-align:center; position:absolute; right:-10px; top:-10px;}

.navbar-toggler .icon-bar{background-color:#171717; transform:rotate(0deg) translate(0px, 0px); transition:300ms;}
.navbar-toggler .icon-bar{display:block; width:22px; height:2px; border-radius:1px;}
.navbar-toggler .icon-bar+.icon-bar{margin-top:4px;}
.navbar-toggler .icon-bar:nth-child(2){width:16px; transition:300ms;}
.navbar-toggler:hover>.icon-bar:nth-child(2){width:22px; transition:300ms;}
.navbar-toggler:active>.icon-bar:nth-child(2){width:22px; transition:300ms;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1){transform:rotate(45deg) translate(5px, 4px); transition:300ms;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2){opacity:0; transition:300ms;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3){transform:rotate(-45deg) translate(4px, -4px); transition:300ms;}

#navbarNav .nav.flex-column li a{display:block; padding:8px 10px;}
#navbarNav .nav.flex-column li a.active{background:#fff; color:rgba(var(--bs-primary-rgb)) !important; border-radius:8px;}


#navbarNav{background-size:100% 100%}

#topQuickLinks{}
#topQuickLinks .card,
#topQuickLinks img{transition:300ms}
#topQuickLinks .card:hover{background-image:url(../images/overlay.png); background-repeat:no-repeat; background-blend-mode:overlay; background-color:rgba(var(--bs-primary-rgb)) !important; color:#fff !important;}
#topQuickLinks .card:hover .btn{color:rgba(var(--bs-primary-rgb)) !important; background:#fff !important;}
#topQuickLinks .card:hover img[alt="icon"]{filter:brightness(0) invert(100%);}



#balance #wusd{position:relative; overflow:hidden}

#balance #wusd:after,
#balance #weur:after,
#balance #wgbp:after,
#balance #wusdt:after{position:absolute; right:15px; bottom:-40px; font-family:bootstrap-icons; font-size:100px; opacity:0.2}

#balance #wusd:after{content:"\F636";}
#balance #weur:after{content:"\F637";}
#balance #wgbp:after{content:"\F639";}
#balance #wusdt:after{content:""; background:url(../images/half-coin.png) no-repeat right top; width:150px; bottom:0px; top:15px; opacity:0.2;
filter:brightness(0) invert(100%);}


#upload{opacity:0;}
#upload-label{position:absolute; top:50%; left:1rem; transform:translateY(-50%);}
.image-area{border: 2px dashed #343a40; padding:1rem; position:relative;}
.image-area::before{content:'UPLADED IMAGE RESULT'; color:#343a40; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);z-index:1; width:100%}

.image-area img{z-index:2; position:relative;}


.file-drop-area{position:relative; background: #fff; display:flex; flex-direction:column; align-items:center; padding:30px 10px; transition:300ms; height: 170px; justify-content: center;}
.file-msg{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.file-input{position:absolute; left:0; top:0; height:100%; width:100%; cursor:pointer; opacity:0;}

.profile-pic{color:transparent; transition:300ms;}
.profile-pic img{position:absolute; object-fit:cover; width:165px; height:165px; box-shadow:0 0 10px 0 rgba(23, 23, 23, 0.35); border-radius:100px; z-index:0;}
.profile-pic .-label{cursor:pointer; height:165px; width:165px;}
.profile-pic:hover .-label{display:flex; justify-content:center; align-items:center; background-color:rgba(0, 0, 0, 0.8); z-index:10000; color:#fafafa; transition:background-color 0.2s ease-in-out; border-radius:100px; margin-bottom:0;}
.profile-pic span{display:inline-flex; padding:0.2em; height:2em;}



.rate{float: left;}
.rate:not(:checked) > input {position:absolute; top:-9999px; }
.rate:not(:checked) > label {float:right; width:12px;  overflow:hidden; white-space:nowrap; cursor:pointer; font-size:16px; color:#ccc;}
.rate:not(:checked) > label:before {content: '★ ';}
.rate > input:checked ~ label {color: #ffc107;}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label{color: #ffc107;}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}


@media (min-width:1200px) and (max-width:1399px){}
@media (min-width:992px) and (max-width:1199px){}
@media (min-width:768px) and (max-width:991px){}
@media (min-width:576px) and (max-width:767px){
#verification .border-start{border:none !important;}
}
@media (min-width:0px) and (max-width:575px){
#topmenu .dropdown-toggle{font-size:16px;}
#verification .border-start{border:none !important;}
}

@media (min-width:0px) and (max-width:1399px){
#content{height:unset !important}
}
@media (min-width:0px) and (max-height:765px){#signup{height:unset !important}}
@media (min-width:0px) and (max-height:515px){#login{height:unset !important}}

@media (min-width:0) and (max-width:767px){
#content .col-xxl-10 .mt-4 h4.mb-1 .btn {
  font-size: 14px !important;
  padding: 4px 8px !important;
}

#content .col-xxl-10 .mt-4 h4.mb-1 span.mx-2.opacity-25 {
  margin: 0 2px !important;
}
}