@charset "UTF-8";

/**
Copyright 2019
**/

:root {
    --bgcolor-hub: rgb(82, 124, 235, .1);
    --bgcolor-MYR: rgba(42,195,152, .1);
    --bgcolor-TUSDT: rgb(122, 6, 199, .1);
    --bgcolor-SGD: rgb(255, 26, 38, 0.1);
    --bgcolor-AUD: rgb(153, 122, 0, 0.1);

    /*--maincolor*/
    --color-hub: #527ceb;
    --color-MYR: #2ac398;
    --color-TUSDT: #7a06c7;
    --color-SGD: #ff1a26;
    --color-AUD: #ddb206;

    --colorhover-hub: #2356ff;
    --colorhover-MYR: #01DC66;
    --colorhover-TUSDT: #9900ff;
    --colorhover-SGD: #ff545c;
    --colorhover-AUD: #b39a37;

    --colorlink-hub: rgba(82, 124, 235, 0.9);
    --colorlink-MYR: rgba(42, 195, 152, 0.9);
    --colorlink-TUSDT: rgb(132, 1, 219, 0.9);
    --colorlink-SGD: rgb(255, 26, 38, 0.9);
    --colorlink-AUD: rgb(179, 154, 55, 0.9);

    --colorbtn-hub: rgba(82, 124, 235, 0.3);
    --colorbtn-MYR: rgba(42,195,152,.3);
    --colorbtn-TUSDT: rgb(132, 1, 219, 0.3);
    --colorbtn-SGD: rgb(255, 26, 38, 0.3);
    --colorbtn-AUD: rgb(179, 154, 55, 0.3)

    --colortable-hub: rgba(82, 124, 235, 0.2);
    --colortable-MYR: rgba(42,195,152,.2);
    --colortable-TUSDT: rgb(132, 1, 219, 0.2);
    --colortable-SGD: rgb(255, 26, 38, 0.2);
    --colortable-AUD: rgb(216, 195, 112, 0.2);

    --colordark-hub: #0d34a0;
    --colordark-MYR: #1F915C;
    --colordark-TUSDT: #580391;
    --colordark-SGD: #b3050e;
    --colordark-AUD: #6e6024;
}

.bg-vw {
    background-color: var(--maincolor);
}

.shadow-vw {
    box-shadow: 0 0.1rem 0.3rem 0.05rem rgba(191,230,224,1);
}

.admincontact ~ button {
    top: 4px;
    left: 125px;
    position: absolute;
}

.wrap-float-widget {
    /*bottom: 35%;
    right: 10%;*/
    top: 90%;
    left: 95%;
    z-index: 1100;
    display: inline-block;
    position: fixed;
}

.wrap-float-widget .btn-float-content {
    display: block;
    width: 50px;
    filter: drop-shadow(3px 3px 3px #a8a8a8); 
}

/*
Currency Card
*/
.userCurrency > a {
    text-decoration: none;
    color:#ffffff;
    border-color: var(--maincolor);
    background: var(--maincolor);
    background: -moz-linear-gradient(-45deg,  var(--maincolor) 0%, rgba(29,193,147,1) 100%);
    background: -webkit-linear-gradient(-45deg,  var(--maincolor) 0%,rgba(29,193,147,1) 100%);
    background: linear-gradient(135deg,  var(--maincolor) 0%,rgba(29,193,147,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--maincolor)', endColorstr='#1dc193',GradientType=1 );
}

.userCurrency > a:hover {
    background-color:#3fd4b4;
    background:#3fd4b4;
    text-decoration: none;
    color:#ffffff
}

/* Desktop: force exactly 3 currency cards per row (accounts for row gap-3) */
@media (min-width: 992px) {
    .userCurrency > a {
        flex: 0 0 calc(33.333% - 0.667rem);
        max-width: calc(33.333% - 0.667rem);
    }
}

.stat {
    align-items:center;
    background:#d3e2f7;
    border-radius:50%;
    color:#3b7ddd;
    display:flex;
    height:40px;
    justify-content:center;
    width:40px
}

.stat i {
    stroke-width:1.5;
    color:inherit!important;
    font-size:30px;
    height:30px;
    width:30px
}

/*currency icon*/
.stat i.MYR {
    background: url('../../assets/img/currency/myr.png') no-repeat center center;
    background-size: 100%;
}

.stat i.TUSDT {
    background: url('../../assets/img/currency/tusdt.png') no-repeat center center;
    background-size: 100%;
}

.stat i.VND {
    background: url('../../assets/img/currency/vnd.png') no-repeat center center;
    background-size: 100%;
}

.stat i.THB {
    background: url('../../assets/img/currency/thb.png') no-repeat center center;
    background-size: 100%;
}

.stat i.SGD {
    background: url('../../assets/img/currency/sgd.png') no-repeat center center;
    background-size: 100%;
}

/* Button */
.btn-ag {
    color: #ffffff;
    background-color: #007bff;
}

.btn-ag:hover {
    color: #ffffff;
    background-color: #0056b3;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--maincolor);
    --bs-btn-border-color: var(--maincolor);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--hovercolor);
    --bs-btn-hover-border-color: var(--hovercolor);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--hovercolor);
    --bs-btn-active-border-color: var(--btncolor)
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--btncolor);
    --bs-btn-disabled-border-color: var(--btncolor);
}

.btn-outline-primary {
    --bs-btn-color: var(--maincolor);
    --bs-btn-border-color: var(--maincolor);
    --bs-btn-hover-bg: var(--hovercolor);
    --bs-btn-hover-border-color: var(--hovercolor);
}

.btn-light {
    color: #1A3235;
    background-color: var(--btncolor);
}

.btn-light:hover {
    color: var(--maincolor);
    background-color: rgba(115, 122, 122, 0.8);
}

/* Others */
.loginForm [type="submit"], .loginForm [type="submit"]:focus, .loginForm [type="submit"]:active {
    border-color: var(--maincolor);
    background: var(--maincolor);
    background: -moz-linear-gradient(-45deg,  var(--maincolor) 0%, rgba(29,193,147,1) 100%);
    background: -webkit-linear-gradient(-45deg,  var(--maincolor) 0%,rgba(29,193,147,1) 100%);
    background: linear-gradient(135deg,  var(--maincolor) 0%,rgba(29,193,147,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--maincolor)', endColorstr='#1dc193',GradientType=1 );
}

.active>.page-link, .page-link.active {
    z-index: 3;
    color: #FFF;
    background-color: var(--maincolor);
    border-color: var(--maincolor);
}

.page-link {
    color: var(--maincolor);
}

.page-link:hover {
    color: #1A3235;
}

.input-group-text {
    color: var(--darkcolor);
    background-color: var(--tablecolor);
    border: 1px solid var(--tablecolor);
}

.form-control, .form-select {
    /* border: 1px solid #FFF; */
    /* box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; */
    /* box-shadow: 0 .125rem .25rem rgba(42,195,152,.3)!important; */
    border: 1px solid var(--tablecolor);
}

.input-group .form-control, .input-group .form-select {
    box-shadow: unset !important;
    border: 1px solid var(--btncolor);
}

thead {
    color: var(--darkcolor);
    background-color: var(--tablecolor);
    /* border: 1px solid rgba(42,195,152,.2); */
}