/*
Theme Name: ticket
Author: HungNguyen
Version: 1.0.2

*/

body {
    font-family: 'Roboto Condensed', sans-serif;
    background: #01143f;
}

#viewport {
    width: 100%;
    height: 600px;
    overflow: scroll;
    background: #001130;
    overflow: hidden;
	border: 1px solid #ffc107;
}

#stage {
    position: relative;
    width: 2000px;
    height: 2000px;
}

#stage img {
    position: absolute;
    top: 80px;
    left: 790px;
    height: 300px;
}

.slot {
    position: absolute;
    border-radius: 7px;
    color: #000;
    cursor: move;
    background-color: #000;
    text-align: center;
    font-size: 8px;
    font-weight: 700;
    line-height: 20px;
    width: 20px;
    height: 20px;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
}

.slot:not(.hidden, .waiting, .sold) {
	cursor: pointer;
}

.slot.waiting,
.slot.sold {
	cursor: not-allowed;
}

.slot:not(.hidden, .waiting, .sold).active {
    outline: 1px solid #76ffcf;
}

.slot span {
    font-size: 8px;
    transform: rotate(-90deg);
    display: block;
    margin-top: 1px;
    width: 20px;
    margin-left: -5px;
    font-weight: 700;
}

.area:nth-child(3) .slot span,
.area:nth-child(4) .slot span {
    transform: rotate(90deg);
    margin-top: 7px;
}

.slot.hidden {
    opacity: 0;
}
.area:nth-child(1) {
    transform: rotate(56deg);
    left: 0;
    top: 117px;
}
.area:nth-child(2) {
    transform: rotate(22deg);
    left: 187px;
    top: 343px;
}
.area:nth-child(3) {
    transform: rotate(-22deg);
    left: 537px;
    top: 473px;
}
.area:nth-child(4) {
    transform: rotate(-62deg);
    left: 911px;
    top: 374px;
}

.slot[data-type="stars"] {
    background-color: #f5f5f5;
    color: #000;
}

.slot[data-type="blue_sky"] {
	background: #03a9f4;
}

.slot[data-type="pink_cloud"] {
    background-color: #f8bbd0;
}

.slot[data-type="sea"] {
    background-color: #378f83;
}

.slot[data-type="moon"] {
    background-color: #ffc107;
}

.slot[data-type="hill"] {
	background-color: #388e3c;
}

.slot[data-type="bay"] {
	background-color: #00bcd4;
}

.slot[data-type="island"] {
	background-color: #009688;
}

.slot[data-type="beach"] {
	background-color: #ff5721;
}

.slot.waiting {
    color: #fff;
	background-color: #555;
}

.slot.sold {
    color: #fff;
    background: #555555;
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 5px 5px;
}

#cart-button, #call-button, #zalo-button, #messenger-button {
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 1;
	cursor: pointer;
}

#cart-button span {
	right: 0px;
    top: -5px;
}

#call-button {
    right: inherit;
    left: 10px;
}

#zalo-button {
    right: inherit;
    left: 10px;
    bottom: 80px;
}

#messenger-button {
    right: inherit;
    left: 10px;
    bottom: 150px;
}

#cart-canvas {
	background-color: #001130;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #e2e2e2!important;
	opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #e2e2e2!important;
}

::-ms-input-placeholder { /* Microsoft Edge */
	color: #e2e2e2!important;
}

.modal-content {
	background-color: #001130;
	color: #fff;
}

.modal-header, .modal-footer {
	border-color: #ffffff0f;
}

.jst-hours {
    display: none;
}

#zoomUp, #zoomDown {
    touch-action: manipulation;
}

.um-account-side, .um-account-heading, .um-account-nav, .um-account-meta {
    display: none!important;
}

.um-account-tab {
    border: 0!important;
    padding: 0!important;
}

.um-account-main {
    float: none!important;
    width: 100%!important;
    max-width: 100%!important;
    padding: 0!important;
}

.card {
    background-color: #01143f;
}

.um .um-field-label, .um-field-block {
    color: #fff;
}

.um .um-form input[type=text], .um .um-form input[type=search], .um .um-form input[type=tel], .um .um-form input[type=number], .um .um-form input[type=password], .um .um-form textarea, .um .upload-progress, .select2-container .select2-choice, .select2-drop, .select2-container-multi .select2-choices, .select2-drop-active, .select2-drop.select2-drop-above {
    border: 1px solid #ffffff33!important;
}

.um-form input[type=text], .um-form input[type=search], .um-form input[type=tel], .um-form input[type=number], .um-form input[type=password] {
    background: transparent!important;
    color: #fff!important;
    border-radius: 5px!important;
}

.um-field-arrow {
    top: -13px;
}

.um input[type=submit].um-button, .um input[type=submit].um-button:focus, .um a.um-button, .um a.um-button.um-disabled:hover, .um a.um-button.um-disabled:focus, .um a.um-button.um-disabled:active {
    background: #0d6efd;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 180px;
    z-index: 999;
}

.site-logo img {
    height: 70%;
    width: auto;
}

.show-item {
    background: #020f2e;
}