@font-face {
    font-family: 'HighlandsCoffee';
    src: url('UTM Alexander.ttf') format('truetype');
}

html,body {height:100%; width:100%; overflow-x: hidden}

body{
   background-size: 100% 100%;
   background-position: top center;
}

.modal-content {
    background-color:#fbd2a6;
    width:100%;
}

.modal-footer {
   border-top:none;
}

.modal-body p {
    padding-left:5%;
    padding-right:5%;
    color: #660000;
    font-family:'HighlandsCoffee';
    font-size:13pt;
    text-align:center;
}

.modal-backdrop
{
    opacity:0.5 !important;
}

.btn-ok {
  display: inline-block;
  border: none;
  font-size: 14px;
  padding: 12px 35px;
  border-radius: 10px;
  text-transform: uppercase;
  color: #fff;
  line-height: normal;
  cursor: pointer;
  text-align: center;  
}

.group-code {
  position: relative;
  margin:30px 0 50px 0;
}

.employee-label {
    position: absolute;
    top: 0;
    font-size: 20px;
    margin: 10px;
    padding: 0 10px;
    background-color: #fcf3e4;
    -webkit-transition: top .2s ease-in-out, font-size .2s ease-in-out;
    transition: top .2s ease-in-out, font-size .2s ease-in-out;
    color: #a21422;
}

.active {
  top: -25px;
  font-size: 20px;
}

.employee-code {
  width: 100%;
  padding: 10px;
  border: 2px solid #a21422;
  font-size: 20px;
  background-color: #fcf3e4;
  color: #a21422;
} 

.employee-code:focus {
  outline: none;
}

.site-btn {
  display: inline-block;
  border: none;
  font-size: 14px;
  font-weight: 600;
  min-width: 188px;
  padding: 22px 35px;
  border-radius: 50px;
  text-transform: uppercase;
  color: #fff;
  line-height: normal;
  cursor: pointer;
  text-align: center;  
  margin-top:20px;
  box-shadow: 5px 5px #949451ed;
}

.wrap {
  width: 40%;
  vertical-align: middle;
  margin-left: 30%;
  margin-right:30%;
  font-family:'HighlandsCoffee';
  justify-content:center;
  text-align:center;
  margin-top:20px;
}

.col-left, .col-right {
   width:100%;
   padding-left:15px;
   padding-right:15px;
}

/******************** Social Foot *************************/
ul {
    list-style: none;
}

.socialFoot{
    margin-right: 20px;
    margin-top:10px;
}
.socialFoot ul{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content:center;
}
.socialFoot ul li{
    margin-right: 5px;
}
.socialFoot ul li:last-child{
    margin-right: 0;
}
.socialFoot ul li a{
    display: block;
    width: 25px;
    height: 25px;
    background-color: transparent;
    color:white;
    font-size: 16px;
    line-height: 24px;
    position: relative;
    backface-visibility: hidden;
}
.socialFoot ul li a:hover{
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
}
.socialFoot ul li a i{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/***********************************************/

/*****************************************Lời chúc*************************************/
#txt_requiremess {
    font-family: 'HighlandsCoffee';
    /*color:#a21422;*/
    color: #ffffff;
    /*color:#000000;*/
}

#pn_wish {
    /*color:#a21422;*/
    color: #ffffff;
    /*color:#000000;*/
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    /*background:rgba(255,255,255,0.7);*/
    padding: 20px;
    border-radius: 10px;
}

#guide{
    font-size:18pt;
}

#logo {
    width:15%;
    margin: 20px 0;
}

#gift {
    width:30%;
}

.wish{
    font-size:14pt;
}

/**************************************************************************************/

@media only screen and (max-width: 767px) {
    #guide{
        font-size:12pt;
    }

    #logo {
        width:30%;
        margin: 10px 0;
    }

    #gift {
        width:80%;
    }

    .wrap {
        /*margin-top:135%;*/
        /*margin-bottom: 0;*/
        margin-left:5%;
        margin-right:5%;
        width: 90%;
    }

    .col-left {
        display:none;
    }

    .col-right {
         -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    #pn_wish{
        width:100%;
        margin-left:30px;
        margin-right:30px;
    }

    .wish{
        font-size:11pt;
    }
}

@media only screen and (max-width: 500px) {
    /*.wrap {
        margin-top:130%;
        margin-bottom: 0;
        width: 90%;
    }*/

    .ticket {
        width:400px;
    }

    .col-left {
        display:none;
    }

    .col-right {
         -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media only screen and (max-width: 991px) and (min-width: 768px) {
    .wrap {
        /*margin-top:65%;
        margin-bottom:30%;*/
        margin-left:20%;
        margin-right:20%;
        width: 60%;
    }

    #pn_wish{
        width:60%;
        margin-left:20%;
        margin-right:20%;
    }

    .col-left {
        display:none;
    }

    .col-right {
         -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    #guide{
        font-size:14pt;
    }

    #logo {
        width:25%;
    }

    #gift {
        width:60%;
    }

    .wish{
        font-size:14pt;
    }
}

@media only screen and (min-width: 991px) and  (max-width: 1024px) {
    .wrap {
        /*margin-top:68%;
        margin-bottom:30%;*/
        margin-left:20%;
        margin-right:20%;
        width: 60%;
    }

    #pn_wish{
        width:60%;
        margin-left:20%;
        margin-right:20%;
    }

    .col-left {
        display:none;
    }

    .col-right {
         -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    #guide{
        font-size:18pt;
    }

    #logo {
        width:25%;
    }

    #gift {
        width:60%;
    }

    .wish{
        font-size:14pt;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1280px){
    /*.wrap {
        margin-top:65%;
        margin-bottom:20%;
        width: 80%;
    }*/

    .col-left {
         -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-right {
         -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media only screen and (min-width: 1281px){
    /*.wrap {
        margin-top:55%;
        margin-bottom:50%;
        width: 80%;
    }*/

    .col-left {
         -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-right {
         -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/*************************************Page E voucher***************************************/
.ticket {
   position: relative;
   display: inline-block;
   width:100%;
   max-width: 400px;
}

.ticket>img {
    display: block;
    max-width: 100%;
    height: auto;
}
/**************************************Voucher *********************************************/
.VoucherNo {
  position: absolute;
  top: 65.2%;
  width: 100%;
  margin-left: 30%;
  color: #53352a;
  font-size: 15px;
  font-weight:bold;
}

.VoucherSerial {
  position: absolute;
  top: 69.5%;
  width: 100%;
  margin-left: 30%;
  color: #53352a;
  font-size: 15px;
  font-weight:bold;
}

.VoucherDate {
  position: absolute;
  top: 73.7%;
  width: 100%;
  margin-left: 30%;
  color: #53352a;
  font-size: 15px;
  font-weight:bold;
}

.VoucherQRCode{
  position: absolute;
  top: 83%;
  width: 100%;
  margin-left: 30px;
}

.VoucherQRCode > canvas {
    margin-right: 2px;
    margin-top: 2px;
    padding:5px;
	background:#fdf3ce;
}

/**********************************Button************************************************/
.btn-download {
    display: block;
    width: 100%;
    max-width:400px;
    height: 25px;
    background: #fac60e;
    padding: 3px;
    text-align: center;
    color: #a21422;
    font-weight: bold;
    /*line-height: 25px;*/
}

.btn-download:active {
   color: #a21422;
   background: #fac60e;
}

/* Delay*/
.animate__animated.animate__delay-6s{
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-animation-delay: calc(var(--animate-delay)*6); 
    animation-delay: calc(var(--animate-delay)*6);
}

.animate__animated.animate__delay-11s{
    -webkit-animation-delay: 11s;
    animation-delay: 11s;
    -webkit-animation-delay: calc(var(--animate-delay)*11); 
    animation-delay: calc(var(--animate-delay)*11);
}