@import url('https://fonts.googleapis.com/css?family=Kanit:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap&subset=thai');

@font-face {
    font-family: DBHelvethaicaMon;
    src: url('../fonts/DBHelvethaicaMonX.ttf');
}

body#home {
    background-color: #16171d;
    display: grid;
}

body#main {
    background-color: #16171d;
    display: grid;
}

.card {
    background-color: #1f2129;
}

.button {
    isolation: isolate;
}

.darkmode--activated .logo {
    mix-blend-mode: difference;
}

* {
    font-family: 'Kanit', 'Segoe UI', Geneva, Verdana, sans-serif;
}

.bg-black {
    background-color: #000000;
}

.bg-main {
    background-color: #032530;
}

header h1 {
    margin-top: 60px;
    font-size: 2rem;
    text-align: right;
    padding: 52px 0;
    text-shadow: 2px 2px 0px #000000;
}

body.store header {
    font-family: 'Kanit', 'Segoe UI';
    background: url('../../images/banner/banner2-1920.png') no-repeat;
    background-position: top;
    background-size: cover;
}

body.store header h1 {
    margin-top: 60px;
    font-size: 2rem;
    text-align: left;
    padding: 52px 0;
    text-shadow: 2px 2px 0px #000000;
}


#product-main .container .card {
    margin: 5px
}

.nav-main {
    background-color: #16171d;
    ;
}

.headerimage {
    position: absolute;
    width: 100%;
    z-index: -1;
}

.headerimage img {
    z-index: -1;
}


.navbar-brand {
    font-weight: bolder;
    font-size: 1.5rem;
    font-style: italic;
    text-transform: uppercase;
}

.navbar-nav .nav-link {
    padding: .5321rem;
    font-weight: 400;
}


.page-container {
    position: relative;
    min-height: 100vh;
}

.content-wrap {
    padding-bottom: 2.5rem;
}

.bottom-shape {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0;
    left: 0;
}
.card-img-top {
    max-height: 120px;
}
.selecttypeimg{
    opacity: 0.5;
}

.wrapper {
    height: 100%;
}

#content-product,
#content-topup,
#content-profile,
#content-register,
#content-buy,
#content-key {
    margin: 50px 0px;
}


#content-login {
    margin: 20px 0px;
}

.store-item {
    transition: ease-in-out 0.2s;
    height: 100%;
    background-color: #1f2129;
}

.card-footer {
    background-color: #13141a;
}

.store-item a:hover {
    text-decoration: none;
}

.form-signin {
    text-align: c;
}

#livesearchinput {
    border: 1px solid #136db2;
    background-color: #136db21a;
    padding: 6px 20px;
    border-radius: 21px;
}

#downloadbtn-overlay {
    right: 0.5rem;
    top: 50%;
}

#downloadbtn-overlay li{
    list-style: none;
}

#content-store .pagination {
    justify-content: flex-end !important;
}

#content-product #overlay-image img {
    padding: 20px;
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
}

header {
    font-family: 'Kanit', 'Segoe UI';
    background: url('../../images/banner/banner-1920.png') no-repeat;
    background-position: center;
    background-size: cover;
}

@media screen and (max-width:1366px) {
    header {
        font-family: 'Kanit', 'Segoe UI';
        background: url('../../images/banner/banner-1366.png') no-repeat;
        background-position: center;
        background-size: cover;
    }

    body.store header {
        font-family: 'Kanit', 'Segoe UI';
        background: url('../../images/banner/banner2-1366.png') no-repeat;
        background-position: top;
        background-size: cover;
    }

}

@media screen and (max-width:576px) {

    body.store header {
        background-position: left;
        background-size: cover;
    }


    #product-main {
        position: unset;
        height: auto;
    }

    #content-store .pagination {
        justify-content: fl;
    }

    body {
        display: block;
    }


    .bottom-shape {
        display: none;
    }

    header h1 {
        text-align: center;
    }
}

.topup-check-success{
    animation: topup-input-success 1s ;
    animation-fill-mode: forwards;
}
.topup-check-error{
    animation: topup-input-error 1s ;
    animation-fill-mode: forwards;
}



@keyframes topup-input-error {
    from { background: #4caf50;}
    to {background-color: #ff0000;}
}

@keyframes topup-input-success {
    from {background-color: #ff0000;}
    to { background: #4caf50;}
}