@import url('https://fonts.googleapis.com/css2?family=Maitree:wght@200;300;400;500;600;700&display=swap');
* {
    font-family: 'Maitree', serif;
}
body {
    background-image: url(https://cdn.exe.in.th/activities/granado-espada-atlas/assets/spend-cash/images/main-page-bg.jpg), url(https://cdn.exe.in.th/activities/granado-espada-atlas/assets/spend-cash/images/cartographer.png) ;
    background-position: center center, center center;background-repeat: no-repeat, repeat;background-color: #1e1e20;background-size: cover, cover;font-size: 1em;
}
body.page-history {
    background-image: url(https://cdn.exe.in.th/activities/granado-espada-atlas/assets/spend-cash/images/bg-history-page.jpg) ;background-position: top center;background-repeat: no-repeat;background-size:auto;background-attachment: fixed;
}
.eror-page {
    background-image: url(https://cdn.exe.in.th/granado-espada-web/official-site/images/error404.jpg);
}
.error-btn {
    display: inline-block;margin-top: -32px;transition: 0.2s;
}
.error-btn img {
    transition: 0.2s;
}
.error-btn img:hover {
    filter: brightness(120%);transform: scale(0.97);
}
.error-title {
    text-align: center;
}
.main-navbar {
    padding-top: 3px;padding-bottom: 3px;width: 100%;position: fixed;top: 0;color: #efefef;background-color: rgba(0, 0, 0, .9);z-index: 3;
}
.navbar-brand img{
    width: 185px;
}
.main-navbar .navbar  {
    padding-top: 0;padding-bottom: 0;
}
.navbar-nav a.nav-item {
    padding-left: 15px !important;padding-right: 15px !important;font-weight: 600;text-align: center;color: #efefef;font-size: 18px;transition: 0.1s;
}
.navbar-nav a.nav-item span {
    display: block;font-weight: 400;font-size: 12px;color: #aaaaaa;
}
.navbar-nav a.nav-item.active,
.navbar-nav a.nav-item:hover,
.navbar-nav a.nav-item.active span,
.navbar-nav a.nav-item:hover span {
    color: #cfac5a !important;
}
.navbar-social-border {
    margin-left: 10px;margin-right: 10px;width: 2px;height: 26px;background-color: #efefef66;position: relative;top: 6px;
}
.navbar-social a {
    margin-left: 5px;margin-right: 5px;background-color: #efefef;transition: 0.1s;
}
.navbar-social a:hover {
    background-color: #cfac5a;
}
.navbar-login {
    font-size: 18px;font-weight: 700;color: #efefef;background-color: transparent !important;padding-left: 20px;padding-right: 20px;text-decoration: none;line-height: 36px;border: 1px solid #efefef;
}
.navbar-login:hover {
    color: #000;background-color: #c2a255 !important;border: 1px solid #c2a255;
}
.id-name {
    background-color: #020202;
    border: 2px solid #ffffff29;padding-left: 24px;padding-right: 22px;padding-top: 10px;font-size: 14px;border-top-left-radius: 4px;border-bottom-left-radius: 4px;
}
.id-name span {
    padding-right: 10px;color: #edda8b;
}
.logout-btn {
    background-color: #edda8b;border-radius: 4px;border-top-left-radius: 0px;border-bottom-left-radius: 0px;font-size: 14px;font-weight: 700;padding-top: 12px;padding-bottom: 9px;
}
.logout-btn:hover {
    filter: brightness(120%);background-color: #edda8b !important;color: #202020 !important;
}
.point-reward {
    font-size: 14px;background: #020202;border: 2px solid #ffffff29;color: #ffffff;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 4px;
}
.icon-small {
    vertical-align: bottom;width: 35px;
}
.bonus-point {
    width: 100%;color: #ffffff;font-size: 16px;font-weight: bold;text-transform: uppercase;padding: 5px 10px;
}
.refresh-btn {
    background-color: #edda8b;width: auto !important;font-size: 12px;padding: 5px 10px;margin: 0 0 0 10px;border-radius: 4px;text-transform: uppercase;font-weight: 700;
}
.bonus-point .total-point {
    color: #edda8b;
}
.history-btn {
    background-color: #edda8b;color: #212529;font-size: 14px;font-weight: 700;text-transform: uppercase;border-radius: 4px;text-decoration: none;padding: 11px 18px;
}
.refresh-btn:hover, .history-btn:hover {
    filter: brightness(120%);background-color: #edda8b !important;color: #202020 !important;
}
.sec-header {
    background-image: url(https://cdn.exe.in.th/activities/granado-espada-atlas/assets/spend-cash/images/header-bg.png) ;background-position: top center;background-repeat: no-repeat;background-size: cover;height: 959px;
}
.event-title {
    margin-bottom: 250px;
}
.sec-reward {
    background-image: url(https://cdn.exe.in.th/activities/granado-espada-atlas/assets/spend-cash/images/bg-sec-reward_03.png) ;background-position: center center;background-repeat: repeat;background-size: 50px;padding: 20px 20px;
}
.reward-box {
    padding: 15px 15px;
    position: relative;
    border-radius: 6px;
    border-top: 1px solid rgb(255 255 255 / 50%);
    border-bottom: 1px solid #181818;
    background-image: linear-gradient(to top, #181818, rgb(255 255 255 / 50%)), linear-gradient(to top, #181818, rgb(255 255 255 / 50%));
    background-size: 1px 100%;
    background-position: 100% 0, 0 ;
    background-repeat: no-repeat;
    background-color: rgb(0 0 0 / 80%);
    height: 100%;
}
.reward-image {
    position: relative;
    width: 35%;
    font-size: 13px;
    color: #fff;
    text-align: center;
    padding: 10px 10px 10px 10px;
    border-radius: 6px;
    border-top: 1px solid rgb(255 255 255 / 50%);
    border-bottom: 1px solid #181818;
    background-image: linear-gradient(to top, #181818, rgb(255 255 255 / 50%)), linear-gradient(to top, #181818, rgb(255 255 255 / 50%));
    background-size: 1px 100%;
    background-position: 100% 0, 0 ;
    background-repeat: no-repeat;
    background-color: rgb(0 0 0 / 80%);
}
.reward-image img {
    width: 60px;margin-top: 15px;margin-bottom: 15px;
}
.reward-points {
    font-size: 18px;font-weight: bold;color: #edda8b;
}
.reward-detial {
    width: 65%;padding-left: 15px;height: 100%;
}
.reward-detial .items-name {
    font-size: 16px;line-height: 1.2em;color: #ffffff;font-weight: bold;margin: 0 0 5px 0;
}
.reward-detial .items-name span{
    font-size: 12px;color: #edda8b;
}
.reward-detial .items-detial, .reward-detial .items-remark {
    font-size: 13px;color: #ffffff;margin: 0;
}
.items-redeem_num  {
    color: #edda8b;margin-bottom: 0;
}
.btn-get-reward {
    background-color: #edda8b;border-radius: 6px;width: 100%;padding: 8px 10px;font-size: 16px;font-weight: bold;color: #212529;border: none;margin-top: 10px;
}
.btn-get-reward:hover {
    filter: brightness(120%);background-color: #edda8b ;
}
.reward-box.out-of-stock  .btn-get-reward, .reward-box.out-of-stock  .btn-get-reward:hover {
    pointer-events: none !important;opacity: 0.5;transform: scale(1);filter: grayscale(1);cursor: not-allowed;
}
.reward-box.out-of-stock .reward-image img {
    opacity: 0.5;transform: scale(1);filter: grayscale(1);
}
.btn-get-reward.btn-disable , .btn-get-reward.disable:hover {
    pointer-events: none !important;opacity: 0.5;transform: scale(1);filter: grayscale(1);cursor: not-allowed;
}

.main-footer {
    padding-left: 20px;padding-right: 20px;padding-top: 20px;padding-bottom: 20px;text-align: center;background-color: #101010;
}
.main-footer p {
    padding-top: 15px;margin-bottom: 0px;font-weight: 400;color: #efefef;font-size: 12px;
}
.remark-btn {
    padding: 20px;color: #ffffff;
}
.swal2-modal {
    padding: 30px  30px!important;border: solid 2px #bba790 !important;border-radius: 4px !important;background: #362f2d !important;box-shadow: none !important;color: #ffffff !important;
}
.swal2-icon.swal2-warning {
    border-color: rgb(143 143 143) !important;color: rgb(143 143 143) !important;
}
.swal2-content {
    color: #ffffff !important;
}
.confirm-btn {
    margin-left: 20px;margin-right: 20px;padding-left: 40px;padding-right: 40px;margin-bottom: 0;font-weight: 600;font-size: 16px;height: 40px;background-color: #cfac5a;color: #202020;
}
.cancel-btn {
    margin-left: 20px;margin-right: 20px;margin-bottom: 0;padding-left: 40px;padding-right: 40px;font-weight: 700;font-size: 16px;height: 40px;background-color: rgb(197, 197, 197);color: #202020;
}
.confirm-btn:hover {
    background-color: #edda8b;color: #202020;
}
.cancel-btn:hover  {
    background-color: rgb(117, 117, 117);color: #202020;
}
.hide-close-btn .btn-close {
    display: none;
}
.action-title {
    color: #cfac5a !important;font-size: 24px;font-weight: bold;margin-bottom: 5px;
}
.example-items {
    width: 40px;margin-right: 10px;
}
.history-container .table {
    color: #222222;background-color: #eeeee4!important;border: 4px solid #ffff!important;
}
.history-container .table tbody th {
    background-color: rgb(255, 255, 255);border-right: 1px solid rgb(221, 221, 221);
}
.history-container .table thead th {
    font-size: 16px;
    padding: 18px 15px;
    vertical-align: middle;
    text-align: center;
    background: #edda8b;
    color: #212529 !important;
    border-bottom: 2px solid rgba(255,255,255, 0.8) !important;
    border-right: 1px solid rgba(0,0,0, 0.2) !important;
}
.history-container .table thead th:first-child, .history-container .table thead th:nth-of-type(2) {
    text-align: left;
}
.history-container .table td, .history-container .table th {
    padding: 15px 15px;vertical-align: middle;border-top: none;
}  
.history-container .table td {
    font-size: 13px;font-weight: normal;vertical-align: middle;
}
.sweet-event-error .swal2-content .swal2-error {
    margin-top: 40px;display: block !important;
}
.swal2-content .swal2-success {display: block !important;}
.swal2-icon.swal2-success::before, .swal2-icon.swal2-success::after {
    background-color: transparent;
}
.swal2-modal {
    padding: 30px 30px!important;border: solid 2px #bba790 !important;border-radius: 4px !important;background: #362f2d !important;box-shadow: none !important;color: #ffffff !important;
}
.modal-item {padding: 15px 20px;margin-bottom: 6px;background-color: rgb(0, 0, 0);border-radius: 6px;}
.modal-item-detail {
    color: #cfac5a;font-size: 18px;font-weight: bold;
}
.items-set .modal-item-detail {
    font-size: 16px;
}
.items-set .modal-item-pic img {width:60px}
.image-avatar  {width: 76px;height: 76px;border-radius: 50%;-o-object-fit: cover;object-fit: cover;-o-object-position: center center;object-position: center center;}
.remark-items p{font-size: 14px;color: #fff;}
.remark-items p strong{color: #f5f257;}
.sec-history {padding-top: 50px;}
@media screen and (min-width: 768px) { 
    .navbar-brand {margin-right: auto!important;}
    .sec-history {padding-top: 200px;}
}
@media screen and (min-width: 992px) { 
    .sec-history {padding-top: 280px;}
}
@media screen and (min-width: 120px) { 
    .char-bottomleft {
        position: absolute;left: -70px;bottom: 0;z-index: -1;
    }
    .char-topright {
        position: absolute;right: -70px;top: 0;z-index: -1;
    }
    .char-bottomleft.v-2 {
        left: -165px;
    }
    .char-topright.v-2 {
        right: -165px;
    }
}
@media screen and (max-width: 991.98px) { 
    .main-navbar {padding-top: 5px;padding-bottom: 10px;}
    .sec-header {
        background-position: top center;height: 680px;
    }
    .event-title {
        margin-bottom: 150px;
    }
    .reward-image, .reward-detial {
        position: relative;width: 100%;
    }
    .reward-image{
        margin-bottom: 15px;
    }
    .reward-image img {
        margin-top: 10px;margin-bottom: 10px;
    }
    .btn-get-reward {
        margin-top: 20px;
    }
}
@media screen and (max-width: 767.98px) { 
    .main-navbar {
        position: relative;background-color: rgba(0, 0, 0, 1);
    }
    .sec-header {
        background-image: url(https://cdn.exe.in.th/activities/granado-espada-atlas/assets/spend-cash/images/header-bg-sm.png) ;background-position: top center;background-repeat: no-repeat;background-size: cover;height: 400px;
    }
    .event-title {
        margin-bottom: 0px;
    }
    .sec-reward {
        padding: 15px 15px;margin-top: 30px;
    }

    .table-responsive>.table>tbody>tr>td, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>td, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>thead>tr>th {
        white-space: nowrap;
    }
}