@charset "UTF-8";
*,
html {
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
html{height:100%;}

body{
    font-family: 'Tahoma', sans-serif;
    background-color: #e4e4e4;
    color: #282828;
    position: relative;
    min-height: 100%;
    padding-bottom: 200px;
}

a:active,
a:hover {
    color: rgb(236, 46, 46);
    outline: 0;
    text-decoration: none
}

a:link,
a:active,
a:visited {
    text-decoration: none;
}

a:link,
a:active,
a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none !important;
}

input {
    outline: none;
}

select:focus,
input[type=""]:focus,
input[type="date"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
textarea.form-control:focus {
	outline: 0;
	background: #fff;
    border: 3px solid #ed3131;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
.navbar-light .navbar-toggler{color: #fff;}
.discount-icon {
    background: url("../img/x10.png") no-repeat top center;
}


.ribbon-wrapper-blue {
    width: 85px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -2px;
    right: -2px;
}

.ribbon-blue {
    font-weight: normal;
    font-family: Helvetica;
    color: #333;
    font-size: 11px;
    text-align: center;
    text-shadow: white 0px 1px 0px;
    transform: rotate(45deg);
    position: relative;
    padding: 2px 0 2px 5px;
    left: 5px;
    top: 5px;
    width: 120px;
    background: -webkit-gradient(linear, left top, left bottom, from(#f45f2e), to(#ff1b06));
    color: #ffffff;
    box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.3);
}

.ribbon-blue:before,
.ribbon-blue:after {
    content: "";
    /* Colour of the triangle. To flip the effect, use border-bottom. */
    border-top: 3px solid #4fb0b6;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    bottom: -3px;
    /* +1 to compensate for the border */
}

.ribbon-blue:before {
    left: 0px;
}

.ribbon-blue:after {
    right: 0px;
}

/*Top Nav*/
.bg-top {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
}

.id-top.in .bg-top {
    background: #ed3131;
    height: 80px;
}

.id-top.in .navbar {
    background: transparent;
}

.navbar {
    position: relative;
    z-index: 9;
    padding: 5px 0;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6867121848739496) 0%, rgba(0, 0, 0, 1) 100%);
    /*border-bottom: solid 1px #ffffff3d;*/
}

div.status-active{text-align:center;position: relative;top: -5px;}
div.status-active span{
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 10px;
}
div.status-active span a{color: inherit !important;}
div.status-active span.n-alert{
    color: #000;
    background: #fada3f;
}
div.status-active span.n-actived{
    color: #d5f6fa;
    background: #47b402;
}
div.status-active span.n-info{
    color: #fff;
    background: #3080f7;
}
.logo {
    _background: url("../img/logo.png");
    height: 31px;
    width: 174px;
    display: inline-block;
    top: 3px;
    position: relative;
    margin-top: -5%;
}

.logo img{width: 100%;}

.id-top.in .logo {
    _background: url("../img/logo.png");
	height: 31px;
    width: 174px;
}

.navbar a {
    color: #ffffff !important;
    line-height: normal;
}

.navbar a:hover {
    color: #ff5b5b !important;
}

.navbar .nav-item {
    text-transform: uppercase;
    margin: 0 10px;
    text-shadow: 0 1px 3px #000;
}

.id-top.in .nav-item {
    text-shadow: none;
}

.id-top.in a:hover {
    color: #000 !important;
}

.nav-red {
    background: #ed3131;
    border-radius: 6px;
}

.nav-red:hover {
    background: #000;
}

.id-top.in .nav-red {
    background: #000;
    border-radius: 6px;
}

.id-top.in .nav-red:hover {
    color: #ed3131 !important;
}

.top-usico {
    background: #fff;
    padding: 8px 10px;
    position: relative;
    display: inline;
    border-radius: 10px;
    color: #000;
}

.nav-user .nav-link {
    line-height: 33px;
}

a.nav-out {
    color: #000000 !important;
    position: relative;
}

a.nav-out::after {
    content: '';
    position: absolute;
    height: 33px;
    width: 1px;
    background: #ffffff;
    left: -10px;
}

.top-crl {
    position: absolute;
    z-index: 0;
    top: 0;
}

.top-crl .carousel-item {
    text-align: center;
}

.top-crl .carousel-item img {
    display: inline-block;
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/*Main*/
.main-id {
    background: #fff;
    border-top: solid 5px #ed3131;
    margin-top: 240px;
    padding: 20px;
    position: relative;
    z-index: 1;
    padding-bottom:50px;
}

.main-id.in {
    border-top: none;
    margin-top: 40px;
    background: transparent;
}

.search-id {
    color: #282828;
    font-size: 2em;
}

.search-id a {
    color: #282828;
}

.search-id input {
    border: none;
    padding: 0 10px;
    border-bottom: solid 1px;
    font-size: 0.8em;
    margin: 0 10px;
}

.tittle-id {
    display: inline-block;
    position: relative;
    font-weight: 700;
    color: #fff;
    z-index: 1;
    margin: 30px 0;
    text-transform: uppercase;
}

.tittle-id:after {
    content: '';
    position: absolute;
    border-bottom: 33px solid #ed3131;
    border-left: 0 solid transparent;
    border-right: 25px solid transparent;
    height: 0;
    width: calc(100% + 80px);
    left: -30px;
    top: -5px;
    z-index: -1;
}

.block-item {
    display: inline-block;
    width: 100%;
}

.passport-item {
    float: left;
    margin-right: 30px;
}

.passport-item a img {
    padding: 10px;
    max-width: 140px;
}

.passport-item img {
    border-radius: 30px;
    /*box-shadow: 10px 10px 5px #ccc;
    -moz-box-shadow: 10px 10px 5px #ccc;
    -webkit-box-shadow: 10px 10px 5px #ccc;*/
}

.passport-item span {
    display: block;
    text-align: center;
}

.passport-item a {
    color: #282828;
    font-size: 1.1em;
}

.passport-km {
    float: left;
    width: calc(50% - 4%);
    border-radius: 10px;
    overflow: hidden;
    margin: 0 2% 25px;
    position: relative;
}

.passport-km:hover img {
    filter: saturate(1.5)
}

.passport-km img {
    max-width: 100%;
    object-fit: cover;
}

.passport-km span {
    position: absolute;
    bottom: 0;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0);
    width: 100%;
    padding: 20px 10px;
    font-size: 1.2em;
    font-weight: 700;
    color: #fff;
}

.col-id {
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 0 20px #e4e4e4;
}

.user-cnt {
    font-size: 1.2em;
    background: #f7f7f7;
    margin: -20px 0 20px -20px;
    padding: 10px;
}

.user-ico {
    background: #000;
    color: #fff;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 1.2em;
}

.point {
    display: block;
    color: #ed3131;
    font-weight: 700;
    background: url(../img/point.png) no-repeat center left;
    padding-left: 20px;
    margin-top: 10px;
}

.point i {
    font-style: normal;
    font-weight: 100;
    color: #282828;
}

.vip {
	font-weight: bold;
    background: linear-gradient(120deg, #eee, #f80, #eee);
    background-repeat: repeat;
    background-size: 50%;
    animation: animate 5s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
    margin-top: 10px;
}
.vip-icon{
    width: 100%;
    display: inline-block;
    text-align: center;
}
.gp-nav {
    list-style: none;
    padding: 0 20px 40px 0;
    text-transform: uppercase;
}

.gp-nav li {
    line-height: 50px;
    border-bottom: dotted 1px #e4e4e4;
}

.gp-nav li a.active {
    color: #ed3131;
}

.col-b {
    font-weight: 700;
}

.col-r {
    color: #ed3131;
    position: relative;
}

.col-r a {
    position: absolute;
    right: 20px;
    top: 0;
}

.tittle-link {
    float: right;
    margin: 30px 0;
    text-transform: uppercase;
}

.xm-done {
    border: solid 1px #39901e;
    padding: 0px 5px;
    border-radius: 5px;
    color: #39901e;
}

.xm-no {
    border: solid 1px #c56d1f;
    padding: 0px 5px;
    border-radius: 5px;
    color: #c56d1f;
}

.table th {
    text-transform: uppercase;
    vertical-align: top !important;
}

.g-tab {
    margin: -20px -20px 0;
    border: none;
    background: #d4d4d4;
}

.g-tab .nav-item {
    width: 25%;
    float: left;
    margin: 0;
}

.g-tab .nav-link {
    background: #d4d4d4;
    border-radius: 0;
    border: none;
    text-align: center;
    padding: 20px 0;
    text-transform: uppercase;
    font-weight: 700;
    color: #8c8c8c;
}

.g-tab .nav-link img {
    max-width: 100%;
    object-fit: contain;
    padding: 0 10px;
    height: 50px;
}

.g-tab .nav-link.active {
    border-radius: 0;
    border: none;
    color: #ffffff;
}

.g-tab .nav-link.active img {}

.form-popup {
    background: #fff;
}

.form-tittle {
    background: #ed3131;
    padding: 10px 20px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: 700;
}

.form-tittle a {
    float: right;
    color: #fff;
}

.form-popup .g-tab {
    margin: 0;
}

.gold-tab .nav-item {
    width: 50%;
}

.gold-tab .gpoint {
    margin: 0;
}

.block-id .tab-pane {
    padding: 30px 10px;
}

.block-id .tab-pane .passport-item {
    zoom: 0.8;
}

.tittle-pay {
    font-weight: 700;
    position: relative;
    margin: 10px 0;
}

.tittle-pay span {
    background: #ffffff;
    position: relative;
    z-index: 1;
    padding-right: 10px;
}

.tittle-pay::after {
    content: '';
    position: absolute;
    _border-top: solid 1px #ed3131;
    width: 100%;
    left: 0;
    top: 12px;
}

.block-id,
.form-bt {
    display: inline-block;
    width: 100%;
}

.form-bt {
    margin: 20px 0;
}

.game-pane {
    float: left;
    border-right: solid 1px #e4e4e4;
    width: 23%;
}

.gold-pane {
    float: left;
    width: 77%;
    padding-left: 30px;
}

.game-des {
    color: #929292;
    display: inline-block;
    padding: 0 20px 20px 0;
    text-align: justify;
    font-size: 0.85em;
    margin-top: 20px;
}

/*Check input*/
.check-gp {
    display: inline-block;
    width: 30%;
    float: left;
    margin: 1.6666%;
    position: relative;
    z-index: 9;
    padding: 0;
}

.check-gp label {
    width: 100%;
    text-align: center;
    padding: 15px;
    box-shadow: inset 0 0 0 2px #cacaca;
    background-size: cover;
    background-repeat: no-repeat;
    white-space: nowrap;
    font-size: 0.85em;
    word-break: break-word;
    white-space: inherit;
}

.check-gp label img {
    display: block;
    margin: 0 auto 10px auto;
    width: auto;
    object-fit: contain;
}

.check-gp label div {
    height: 50px;
}

.check-gp label div img {
    display: inline-block;
}

.check-gp input[type="radio"],
.check-gp input[type="checkbox"] {
    display: none;
}

.check-gp input[type="radio"]:checked+label,
.check-gp input[type="checkbox"]:checked+label {
    background-color: #fbd6d6;
    box-shadow: inset 0 0 0 2px #ed3131;
    color: #ed3131;
    font-weight: 700;
}

.check-gold {
    width: 21.3333%;
}

.check-gold label {
    box-shadow: inset 0 0 0 1px #cacaca;
    padding-bottom: 20px;
}

.check-gold label span {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #9c9c9c;
    left: 0;
    color: #fff;
    font-size: 0.9em;
}

.check-gp label img {
    margin: 0 auto 5px auto;
}

.check-gold input[type="radio"]:checked+label,
.check-gold input[type="checkbox"]:checked+label {
    box-shadow: inset 0 0 0 1px #ed3131;
    background: #fff;
    color: #282828;
    font-weight: 100;
}

.check-gold input[type="radio"]:checked+label span,
.check-gold input[type="checkbox"]:checked+label span {
    background: #ed3131;
}

.form-check-custom {
    width: 100%;
    text-align: center;
    padding: 15px;
    box-shadow: inset 0 0 0 2px #cacaca;
    background-size: cover;
    background-repeat: no-repeat;
    white-space: nowrap;
    font-size: 0.85em;
    margin: 0;
    border: none;
}

.form-check-custom-label {
    position: absolute;
    top: 52px;
    padding: 0 !important;
    box-shadow: none !important;
    width: auto !important;
}

/*Guide*/
.guide-tab {
    margin: 0 -20px;
    border: none;
}

.guide-tab .nav-item {
    float: left;
    width: 11.1111%;
    text-align: center;
}

.guide-tab .nav-link {
    height: 120px;
    border-radius: 0;
    border: none;
    background: #f7f7f7;
    z-index: 5;
    position: relative;
}

.guide-tab .nav-link.active {
    box-shadow: 0 5px 0 0 #ed3131, 0 0 5px 0 #00000040;
    z-index: 9;
}

.guide-tab .nav-link img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: 60px;
    object-fit: contain;
    opacity: 0.5;
}

.guide-tab .nav-link.active img {
    opacity: 1;
}

.guide-content {
    padding: 20px;
}

.guide-content img {
    padding: 20px;
    max-width: 100% !important;
    height: auto !important;
}

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    z-index: 9;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}

#return-to-top:hover i {
    color: #fff;
    top: 5px;
}

/*Footer*/
.footer {
    position: absolute;
	background-color: #000;
    width: 100%;
    bottom: 0;
}

.footer-des {
    color: #ffffff;
    width: 100%;
    margin: 30px 0;
}

.passport-info {
    float: left;
}

.passport-info img {
    display: block;
    margin-bottom: 10px;
}

.passport-partner {
    float: right;
}

.passport-partner img {
    zoom: 0.6;
    filter: brightness(200) saturate(0);
    margin: 0 15px;
	height: 70px;
}

/*Modal*/
.lg-tab {}

.lg-tab .nav-item {
    width: 50%;
    text-align: center;
}

.lg-tab .nav-link {
    border-radius: 0;
    border-top: solid 3px transparent;
    font-weight: 700;
    color: #a4a4a4;
}

.lg-tab .nav-link.active {
    border-radius: 0;
    border-top: solid 3px #ed3131;
    color: #ffffff;
}

.modal-logreg .tab-pane {
    padding: 20px;
}

.modal-content {
    border-radius: 0;
    border: none;
    box-shadow: 0 2px 4px 5px #00000030;
}

.close-modal {
    text-align: right;
    border-top: solid 1px #cecece;
    padding-top: 15px;
    margin-top: 10px;
    text-transform: uppercase;
}

.alert {
    z-index: 9999999999999 !important;
    font-size: 23px;
}

.cancel {
    background: #000;
    border-color: #000;
}

.box_notice {
    width: 70%;
    margin: 0 auto 20px;
    text-align: center;
    font-size: 22px;
    padding: 10px;
    font-weight: bold;
    border: 1px solid #bce8f1;
}

.box_notice.success {
    background: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}

.box_notice.error {
    background: #ffc19f;
    border-color: #e8aa88;
    color: #ff0000;
}

.clearfix {
    clear: both;
}

label.error {
    color: #c82333;
    font-weight: bold;
}

.nav-user .nav-link.nav-out.logout {
    color: #fff !important;
}

.in .carousel {
    display: none;
}

.btn-continue {
    background: #ed3131;
    color: #fff;
    text-transform: uppercase;
}

/*Responsive*/
@media (max-width: 768px) {
    .main-id {
        margin-top: 100px;
    }

    .passport-km {
        width: calc(100% - 4%);
    }

    .passport-km img {
        width: 100%;
    }

    .top-crl .carousel-item img {
        height: 220px;
    }

    .navbar-light .navbar-toggler {
        color: rgba(255, 255, 255, 0.5);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .navbar-light .navbar-toggler-icon {
        background-image: none;
    }

    .id-top.in .navbar-toggler {
        color: rgba(255, 255, 255, 1);
        border-color: rgba(255, 255, 255, 1);
    }

    .navbar-collapse {
        position: absolute;
        top: 75px;
        background: #282828;
        width: 50%;
        padding: 10px;
        right: 0;
    }

    .id-top.in .navbar-collapse {
        top: 80px;
        background: #c12525;
    }

    .navbar .nav-item {
        text-align: center;
        margin: 5px 0 10px;

    }

    .navbar-nav.pull-right {
        float: none;
    }

    .col-id {
        -ms-flex: none;
        flex: none;
        max-width: 100%;
        box-shadow: none;
        padding: 0 20px;
    }

    .user-cnt {
        margin: -20px -20px 20px;
    }

    .check-gp {
        width: 46.3333%;
    }

    .guide-tab .nav-link {
        font-size: 0;
        height: auto;
    }
}

@media (max-width: 425px) {
    body {
        padding-bottom: 300px;
    }

    .navbar {
        padding: 17px 20px;
    }

    .navbar-collapse {
        width: 100%;
    }

    .top-crl {
        padding-top: 65px;
        background: #000;
    }

    .top-crl .carousel-item img {
        height: 120px;
    }

    .search-id input {
        width: calc(100% - 50px);
    }

    .passport-km img {
        height: 150px;
    }

    .passport-item {
        width: 46%;
        text-align: center;
        margin: 2% 2%;
    }

    .passport-item img {
        width: 100%;
    }

    .footer-des {
        margin: 30px 20px;
    }

    .passport-partner {
        float: none;
        width: 100%;
        text-align: center;
        margin-top: 20px;
        display: inline-block;
    }

    .passport-info {
        font-size: 0.8em;
    }

    .g-tab .nav-link img {
        height: 30px;
    }

    .check-gp {
        width: 100%;
        font-size: 1.1em;
    }

    .check-gold {
        width: 46.3333%;
    }

    .game-pane {
        border-right: none;
        width: 100%;
        text-align: center;
    }

    .gold-pane {
        width: 100%;
        padding: 0;
    }

    .game-pane .passport-item {
        width: 80px;
        zoom: unset !important;
        margin: 0 20px 20px 0;
    }

    .game-pane .passport-item span {
        display: none;
    }

    .game-des {
        display: block;
        text-align: justify;
        margin-top: 0;
    }

    .guide-tab .nav-link {
        padding: 0 5px;
    }

    .guide-tab .nav-link img {
        height: 55px;
    }
}
/* Other */
.back-to-top {
    z-index: 999;
    position: fixed;
    right: 15px;
    bottom: 5px;
    display: none;
    width: 45px;
    height: 45px;
    text-align: center;
    color: #fff;
    background: rgba(52, 58, 64, .5);
    line-height: 45px
}

.back-to-top:focus,
.back-to-top:hover {
    color: #fff
}

.back-to-top:hover {
    background: #343a40
}

.img-wiew {
	width: 770px;
    height: 464px;
}
.swal-icon:first-child{margin-top:15px!important;margin-bottom: 0px!important;}
.swal-content{margin-top: 10px!important;}