@charset "UTF-8";

/**
Copyright 2019
**/

:root {
    --bgcolor-hub: rgb(17, 102, 247, 0.1);
    --bgcolor-MYR: rgb(17, 102, 247, 0.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: #023790;
    --color-MYR: #023790;
    --color-TUSDT: #7a06c7;
    --color-SGD: #ff1a26;
    --color-AUD: #ddb206;

    --colorlink-hub: rgb(2, 55, 144, 0.9);
    --colorlink-MYR: rgb(2, 55, 144, 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: rgb(2, 55, 144, 0.3);
    --colorbtn-MYR: rgb(2, 55, 144, 0.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: rgb(2, 55, 144, 0.2);
    --colortable-MYR: rgb(2, 55, 144, 0.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: #1166F7;
    --colordark-MYR: #1166F7;
    --colordark-TUSDT: #580391;
    --colordark-SGD: #b3050e;
    --colordark-AUD: #6e6024;

    --colorhub: #1166F7;
}

.bg-hightlight {
    background-color: #FDEECB !important;
    border: 1px solid #FFF !important;
}

.bg-hightlight3 {
    background-color: rgba(115, 103, 240, 1) !important;
    border: 1px solid #FFF !important;
}

.bg-hightlight2 {
    background-color: #FFCCCC !important;
    border: 1px solid #FFF !important;
}

header {
    background-color: #FFF;
}

.form-signin {
    width: 360px;
    padding: 2rem;
    margin: auto;
}

.loginForm input {
    font-size: 1rem;
    padding: 1rem 1.5rem 1rem 0rem !important;
    border: 1px solid #FFF !important;
}

.loginForm .input-group-text {
    background-color: #FFF;
    border-color: transparent;
}

.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%, var(--hubcolor) 100%);
    background: -webkit-linear-gradient(-45deg,  var(--maincolor) 0%,var(--hubcolor) 100%);
    background: linear-gradient(135deg,  var(--maincolor) 0%,var(--hubcolor) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--maincolor)', endColorstr='#1dc193',GradientType=1 );
}

/*
Color
*/

.shadow-vw {
    box-shadow: 0 0.1rem 0.3rem 0.05rem var(--linkcolor);
}

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

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

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

.color-vw2 {
    color: #B4B4B4;
}

.color-vw3 {
    color: #1A3235;
}

.bg-vw3 {
    background-color: #1A3235;
}

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

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

.btn-ag {
    color: #ffffff;
    background-color: var(--hubcolor);
}

.btn-ag:hover {
    color: #ffffff;
    background-color: var(--darkcolor);
}

.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);
}

.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);
}

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

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

.userCurrency > a:hover {
    background-color:var(--hubcolor);
    background:var(--hubcolor);
    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%;
}

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

/* announcement message column - image fit */
#announcementTable img,
#announcementTable .dtr-details img {
    max-width: 100% !important;
    height: auto !important;
    display: inline-block;
}
#announcementTable figure.image,
#announcementTable .dtr-details figure.image {
    max-width: 100% !important;
    margin: 0.25rem 0;
}
#announcementTable figure.image img,
#announcementTable .dtr-details figure.image img {
    width: 100% !important;
}
#announcementTable td,
#announcementTable .dtr-details li {
    word-wrap: break-word;
    overflow-wrap: break-word;
}