@font-face {font-family: Segoe UI; src: url(../fonts/segoe_ui.woff);}
@font-face {font-family: Segoe UI; src: url(../fonts/segoe_ui_bold.woff); font-weight: bold;}
@font-face {font-family: Segoe UI; src: url(../fonts/segoe_ui_italic.woff); font-style: italic;}
* {margin: 0 auto; padding: 0 auto; border: 0 auto; box-sizing: border-box; scrollbar-width: thin;}
body, html {height: 100%;}
body {background: #fff; color: #333; font-family: Segoe UI, sans-serif; font-size: 14px; min-width: 320px; overflow: hidden;}
a:link {color: #555; text-decoration: none;}
a:visited {color: #555; text-decoration: none;}
a:hover {color: #333; text-decoration: none;}
h1, h2, h3, h4, h5, h6 {font-family: Segoe UI, sans-serif;}
.flex-div {display: flex;}
.flex-wrap {flex-wrap: wrap;}
.align-center {align-items: center;}
.clear {clear: both;}
.color {color: #0c63e7;}
.bg-color {background: #0c63e7!important; color: #FFF!important;}
.bg-color-grad {background: linear-gradient(to bottom, #0c63e7, #0d41e1)!important; color: #FFF!important;}
.bg-color-grad-hover:hover {background: linear-gradient(to bottom, #0d41e1, #0c63e7)!important; color: #FFF!important;}
.bg-color-grad-2 {background: linear-gradient(to bottom, #317BEB, #76A7F1)!important; color: #FFF!important;}
.bg-color-grad-2-hover:hover {background: linear-gradient(to bottom, #76A7F1, #317BEB)!important; color: #FFF!important;}
.bg-white {background-color: #FFF; color: #333;}
#logo {width: 80px; margin-bottom: 10px; transition: all 0.5s ease-in-out;}
nav {width: 20%; height: 100vh; background: linear-gradient(to bottom, #0c63e7, #0d41e1); color: #FFF; padding: 25px; z-index: 3;}
.hide-nav {display: block;}
.navicon {font-size: 20px; cursor: pointer; padding:10px 5px; display: none;}
.closeicon {font-size: 20px; cursor: pointer; padding:3px 5px; border:1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; display: none;}
nav .link {padding: 10px; display: block; color: #FFF; margin-bottom: 5px; border-radius: 5px; transition: all 0.3s ease-in-out;}
.nav-min-height {height:85%; min-height:500px}
nav .link:hover, nav .link.active {background: rgba(0,0,0,0.2);}
nav .link .fa {font-size: 18px; width: 15px; height: 15px; margin-right: 10px;}
.header-title {font-weight: bold; width: 100%; font-size: 20px;}
#close-nav {width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,0.2); display: none; cursor: pointer;}
.hide-close-nav {display: none;}
main {width: 80%; background: linear-gradient(to bottom, #E1ECFC, #FFF); overflow-y: scroll; height: 100vh;}
header {background: transparent; min-height: 70px;}
.header-one {width: 60%; padding-left: 20px;}
.header-two {width: 40%; font-size: 16px; padding-right: 50px; text-align: right;}
.main-50 {width: 50%;}
.main-60 {width: 60%;}
.main-70 {width: 70%;}
.main-80 {width: 80%;}
.main-90 {width: 90%;}
.balance-div {width: 50%; font-size: 18px; font-weight: bold; text-align: right;}
.welcome-div {width: 100%; font-size: 18px; font-weight: bold;}
.welcome-div .user {font-size: 25px;}
.option-list {background: #FFF; padding:10px; border: 1px solid #FFF; border-radius: 10px; box-shadow: 1px 5px 7px 1px #E1ECFC; transition: all 0.2s ease-in-out;}
.option-list.movie {padding: 7px;}
.option-list:hover {background: #FFF; border: 1px solid #0c63e7; box-shadow: 1px 10px 20px 1px #E1ECFC;}
.option-list .fa {color: #333;}
.option-list img {width: 100%; border-radius: 5px;}
.option-list input {display: none;}
input:disabled + .option-list {background: #CCC; color: #777; border: 1px solid #FFF; cursor: auto;}
input:checked + .option-list {background: #F9F9F9; border: 1px solid #0c63e7;}
.success-bg {background: #B9FEB9!important;}
.error-bg {background: #E3C6C6!important;}
.app-nav {display: none;}
.btn {font-size: 14px;}
.btn-sm {font-size: 10px;}
.border-x {border-top:1px solid #DDD;}
.info-board {background: linear-gradient(to bottom, #0c63e7, #0d41e1); color:#FFF; min-height:200px; border-radius: 10px; margin-top: 20px}
.info-board.auto {min-height: auto;}
.info-board #question {font-size: 20px;}
.user-icon {border: 3px solid #888; color: #888; padding: 8px 12.29px; border-radius: 50%;}
.user-icon .fa {font-size:40px;}
.user-email {font-size:16px; margin-top: 5px;}
.modal-1, .modal-alert {background: rgba(16,0,43,0.6); position: fixed; top: 0; height: 100%; width: 100%; z-index: 4; display: none;}
.modal-inner {padding: 20px;}
.modal-inner-2 {background: linear-gradient(to bottom, #E1ECFC, #FFF); width: 600px; margin-top: 80px; border-radius: 10px; padding: 20px; box-shadow: 1px 10px 20px 1px rgba(0,0,0,0.2);}
.modal-alert .modal-inner-2 {max-width: 300px;}
.modal-inner-3 {max-height: 350px; overflow-y: auto;}
.modal-title {font-size: 16px; font-weight: bold;}
.modal-launch {background: linear-gradient(to bottom, #0c63e7, #0d41e1); color: #eee; position: fixed; top: 0; height: 100%; width: 100%; z-index: 4; display: non;}
.modal-launch img {width: 200px;}
.modal-launch span {font-size: 12px; letter-spacing: 2px;}
.modal-launch a {color: #eee;}
.border-b {border-bottom:1px solid #DDD;}
.cursor {cursor: pointer;}
input, select, textarea, button {outline: none!important;}
textarea {resize: vertical;}
.input-min, .input-min-2, .input-min-3, .input-max {border: 1px solid #F5F5F5; color: #555; padding: 12px; margin:4px 0 14px; border-radius: 5px; box-shadow: 1px 10px 20px 1px #E1ECFC; transition: all 0.2s ease-in-out;}
.input-min:hover, .input-min-2:hover, .input-min-3:hover, .input-max:hover, .input-min:focus, .input-min-2:focus, .input-min-3:focus, .input-max:focus {border-color: #888; box-shadow: 1px 5px 10px 1px #E1ECFC;}
.input-min {width: 50%;}
.input-min-2 {width: 70%; min-width: 100px;}
.input-min-3 {width: 20%; min-width: 80px;}
.input-max {width: 100%; min-width: 100px;}

.receipt-logo img {width: 80px;}
.receipt-title {font-size: 20px; font-weight: bold;}
.receipt-sign {border-bottom:1px solid #CCC;}
.receipt-sign img {width: 150px;}
.receipt-bg {background-image: url('../img_files/logo-transparent.png'); background-repeat: no-repeat; background-size: 60%; background-position: center;}
.print-view {background: linear-gradient(to bottom, #E1ECFC, #FFF); width: 732px; min-height: 1000px; padding: 30px;}
#receipt-table {border: 1px solid #CCC;}
.thead {border-bottom: 1px solid #CCC; padding-left: 2px; padding-right: 2px;}
.tbody {border-bottom: 1px solid #CCC; padding-left: 2px; padding-right: 2px;}
.thead div, .tbody div {border-right: 1px solid #CCC; padding: 5px;}
.thead div:last-child, .tbody div:last-child {border-right: none;}

@media screen and (max-width: 992px) {
  #logo {width: 80px;}
  nav {width: 300px; position: fixed; z-index: 2;}
  .hide-nav {display: none;}
  .navicon {display: block; width: 20%;}
  .closeicon {display: inline-block;}
  .header-title {width: 80%; font-size: 16px;}
  #close-nav {display: none; z-index: 1;}
  .hide-close-nav {display: block!important;}
  main {width: 100%;}
  header {background: transparent;}
  .header-two {padding-right: 25px;}
  .welcome-div {font-size: 15px;}
  .main-50 {width: 90%;}
  .main-60 {width: 90%;}
  .main-70 {width: 90%;}
  .main-80 {width: 90%;}
  .main-90 {width: 90%;}
  .info-board {min-height:150px;}
  .option-list.movie {padding: 5px;}
  .modal-launch img {width: 150px;}
  .app-nav {background: #fff; display: block; position:fixed; width:100%; bottom: 0; border-top: 1px solid #f2f2f2;}
  .app-nav .fa {font-size: 18px; color: #333;}
  .app-nav .page-title {font-size: 13px;}
  .app-nav a {padding: 15px 0; transition: all 0.5s ease-in-out;}
  .app-nav a:hover {background: #E1ECFC; border-radius: 50px}

}

@media screen and (max-width: 468px) {
  .receipt-logo img {width: 50px;}
  .receipt-title {font-size: 16px;}
  .receipt-sign img {width: 100px;}
  #receipt {font-size: 12px!important;}
  #receipt-table {font-size: 11px!important;}
}