.nga-fade.ng-enter{
    transition: 0.5s linear all;
    opacity: 0;
}
.nga-fade.ng-enter.ng-enter-active{
    opacity: 1;
}

.arrow-pattern {
    padding: 0 30px;
}
.arrow-pattern img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

md-input-container label:not(.md-no-float):not(.md-container-ignore) {
    font-size: 18px;
}

md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md-select-value.md-select-placeholder{
    color: rgba(0, 0, 0, 0.54);
}

.vh100 {
    height: 100vh;
}
.text-right {
    text-align: right!important;
}
.text-center {
    text-align: center!important;
}
.text-white {
    color: #fff;
}
.text-red {
    color: red;
}
.md-button.btn-orange {
    font-size: 18px;
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    background: rgb(255,138,101);
    background: linear-gradient(45deg, rgb(216,67,21) 0%, rgb(255,138,101) 100%);
    border-radius: 50px;
}
.md-button.btn-blue {
    font-size: 18px;
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    background: rgb(59 98 160);
    background: linear-gradient(45deg, rgb(59 98 160) 0%, rgb(79 155 220) 100%);
    border-radius: 50px;
}
.md-button.btn-gray {
    font-size: 18px;
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    text-transform: none;
    text-align: center;
    background: rgb(60 60 60);
    background: linear-gradient(45deg, rgb(60 60 60) 0%, rgb(120 120 120) 100%);
    border-radius: 2px;
}
.md-button.btn-green {
    font-size: 18px;
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    background: rgb(1 135 103);
    background: linear-gradient(45deg, rgb(0 18 64) 0%, rgb(1 135 103) 100%);
    border-radius: 2px;
}
.md-button.btn-red {
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    background: rgb(142 46 28);
    background: linear-gradient(45deg, rgb(148 37 0 / 89%) 0%, #c9765b 100%);
    border-radius: 50px;
}
.md-button.btn-red2 {
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    background: rgb(159,8,25);
    background: linear-gradient(45deg, rgba(159,8,25,1) 0%, rgba(240,50,71,1) 100%);
    border-radius: 50px;
}
.md-confirm-button, .md-confirm-button:hover {
    background-color: rgb(240,50,71)!important;
    color: #fff!important;
}

.btn-back {
    padding: 0!important;
    min-width: 40px;
    margin: 0;
}
.btn-back md-icon {
    color: #000;
}

md-radio-button.md-default-theme .md-off, md-radio-button .md-off {
    border-color: rgb(255,87,34);
}
md-checkbox.md-default-theme:not(.md-checked) .md-icon, md-checkbox:not(.md-checked) .md-icon {
    border-color: rgb(255,87,34);
}

a, a:visited {
    color: rgb(255,87,34);
}
a:hover {
    color: rgb(221,44,0);
}

md-dialog {
    max-height: 95%!important;
}


.bg-white10p {
    background-color: rgba(255,255,255,.1)!important;
}


/* custom alert */
.alert-danger {
    background-color: #ffe7e6;
    color: #880000;
}
.alert-success {
    background-color: #baffc6;
    color: #236900;
}
.alert-warning {
    background-color: #ffee96;
    color: #8c5b0d;
}
.alert{
    text-align: center;
    padding: 14px 21px;
    margin: 10px 0;
    display: block;
}
md-card, md-dialog {
    box-shadow: 0 0 16px 6px rgb(175 187 255 / 40%);
    background-color: #fff;
}
.md-button {
    padding: 8px 16px;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

#landing-page, #register-page, #login-page, #camera-page {
    background: url(../img/bg4.jpg) #000 no-repeat center center fixed;
    background-size: 100% auto;
}
#landing-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}
#landing-page .md-button{
    display: block;
    width: 250px!important;
    margin-top: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 6px;
}
#landing-page .logo, #login-page .logo {
    max-width: 100px;
    margin: 40px 20px 20px;
    display: block;
}
#landing-page .btn-custom {
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    text-transform: none;
    padding: 16px 20px;
    min-width: 160px;
    text-align: center;
    background: rgb(61 61 61 / .8);
    background: linear-gradient(45deg, rgb(61 61 61 / .5) 0%, rgb(147 146 146 / .5) 100%);
    box-shadow: 0 0 6px 0px rgb(0 0 0 / 40%);
    border-radius: 2px;
    margin-top: 20px;
}
#landing-page .btn-custom:hover {
    background: linear-gradient(45deg, rgb(61 61 61) 0%, rgb(110 110 110) 100%);
}

#main-page {
    background: url(../img/bg4.jpg) #000 no-repeat center center fixed;
    background-size: 100% auto;
}
#main-page .logo {
    margin: 40px auto 10px;
    max-width: 250px;
    display: block;
}
#main-page md-content.main-content {
    width: 100%;
    background-color: transparent;
}
#main-page md-card {
    margin: 30px 30px 60px;
    border-radius: 30px;
    /* box-shadow: 0 0 16px 6px rgb(175 187 255 / 40%); */
}
#main-page md-card md-card-content {
    position: relative;
}
#main-page md-card md-card-content .btn-close{
    position: absolute;
    top: 6px;
    right: 0;
}
#main-page .help-text {
    color: #666;
    text-align: center;
}
#main-page .md-button.md-raised{
    display: block;
    width: 200px;
}
#main-page .main-content {
    padding-top: 20px;
    /* padding-bottom: 40px; */
    min-height: 200px;
}

.w-100 {
    width: 100%;
}
.w-80 {
    width: 80%;
}
.w-60 {
    width: 60%;
}

#ticket-page {
    max-width: 350px;
    position: relative;
    padding: 10px 20px;
    margin: 0 auto;
}
#ticket-page img {
    width: 100%;
}
#ticket-page .md-icon-button {
    position: absolute;
    right: 5%;
    top: 3%;
}
#ticket-page .my-qr-code {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 8%;
    left: 0;
    font-size: .85rem;
}
#ticket-page .ticket-owner {
    margin-top: 20px;
}
#ticket-page .ticket-owner h2{
    margin: 0;
    color: #8e3632;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.2rem;
}
#ticket-page .ticket-owner h4{
    margin: 0;
    font-weight: 400;
    letter-spacing: 1px;
    color: #0151d8;
}

#pdpa-dialog .md-dialog-content {
    position: relative;
}
#pdpa-dialog h4 {
    font-size: 1rem;
}
#pdpa-dialog p {
    font-size: .8rem;
}
#pdpa-dialog ol{
    padding-left: 20px;
}
#pdpa-dialog ol li{
    font-size: 0.8rem;
    margin: 12px 0;
}
#pdpa-dialog .btn-close {
    position: absolute;
    top: 5px;
    right: 0;
}

.member-photo {
    margin: 0 auto;
    overflow: hidden;
}
.member-photo md-icon {
    width: 100px;
    height: 100px;
    font-size: 100px;
}
.member-photo img {
    width: 100%;
    height: auto;
}

._md-nav-bar-list {
    justify-content: center;
}

.atk-status {
    text-align: center;
    margin: 30px 0;
    line-height: 40px;
}
.atk-status strong {
    font-size: 30px;
}

.ticket-qrcode canvas {
    border: 4px solid #fff;
}

.zoom-in-zoom-out {
    animation: zoom-in-zoom-out 16s linear infinite;
}
@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.3, 1.3);
    }
    100% {
        transform: scale(1, 1);
    }
}

@font-face {
    font-family: 'Hyundai Sans Head Pro';
    src: url('../font/HyundaiSansHeadProBold.woff2') format('woff2'),
        url('../font/HyundaiSansHeadProBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hyundai Sans Head Pro';
    src: url('../font/HyundaiSansHeadProRegular.woff2') format('woff2'),
        url('../font/HyundaiSansHeadProRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hyundai Sans Head Pro';
    src: url('../font/HyundaiSansHeadProLight.woff2') format('woff2'),
        url('../font/HyundaiSansHeadProLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}