:root {
    --font-main: 'IRANSans', sans-serif;
    --font-alt: 'danamedium', sans-serif;

    --color-white: #fff;
    --color-dark: #303944;
    --color-light-gray: #e5e5e5;
    --color-orange: #FF5722;
    --color-red: #ff002d;
    --color-green: #4caf50;
    --color-blue: #12afff;
    --color-gray: #636363;
    --color-showplace: #0c82a7;
    --color-showplace-risx3: #38d1ff;
    --color-temp: #5b5c5a;
    --color-rtemp: #ffce0b47;
    --color-gust: #b1b1b1;
    --color-zero: #c773f9cf;
    --color-lock: #33a107;
    --color-agc: #ffaf09;
    --color-spacecell: #1e1e1e;
    --color-tableheader: #dde0e4;
    --color-spinner: #333;
}

/* Standard font applied to all main elements */
body, .frameTable, .TableHeader, .asclass, .showplace, .btnx, .slider, .seatarea {
    font-family: var(--font-main);
}

/* Colors and behaviors */
.TableHeader { font-size: 14px; color: var(--color-tableheader)!important; text-align: center; display: inline-block; font-weight: 100; direction: rtl; margin-left: 2px; }
.frameTable { font-size: 16px; width: 100%; background-color: transparent; margin: 0 auto; text-align: left; color: var(--color-white); }
.asclass>span {color: var(--color-white);min-width: 18px;line-height: 15px;text-align: center;margin-right: 4px;font-family: var(--font-alt);border-radius: 3px;font-size: 81%;display: inline-block;user-select: none;font-weight: bolder;margin-top: 7px;}
.orgincell { cursor: pointer; background-color: var(--color-light-gray); color: var(--color-dark)!important; border-bottom-left-radius: 7px!important; border-bottom-right-radius: 7px!important; font-weight: bolder; }
.PerCell { background-color: var(--color-orange)!important; }
.rescell { background-color: var(--color-red); pointer-events: none; border-bottom-left-radius: 7px!important; border-bottom-right-radius: 7px!important; color: var(--color-white)!important; }
.control { background-color: var(--color-green)!important; }
.ris2 { background-color: var(--color-blue)!important; visibility: visible!important; pointer-events: visible!important; cursor: pointer!important; z-index: 300!important; color: var(--color-white)!important; }
.risx3 { background-color: var(--color-gray)!important; visibility: visible!important; pointer-events: none!important; cursor: pointer!important; z-index: 3; opacity: .1; color: var(--color-white)!important; }
.showplace .risx3 { color: var(--color-white)!important; background-color: var(--color-showplace-risx3)!important; opacity: 1; display: block; }
.TempCell { background: var(--color-temp)!important; pointer-events: none; border-bottom-left-radius: 7px!important; border-bottom-right-radius: 7px!important; }
.RTempCell { background: var(--color-rtemp)!important; pointer-events: none; border-bottom-left-radius: 7px!important; border-bottom-right-radius: 7px!important; color: #978a5900!important; }
.gustcell { background-color: var(--color-gust); color: var(--color-white)!important; pointer-events: visible!important; }
.zero { background-color: var(--color-zero); cursor: pointer!important; color: var(--color-white)!important; pointer-events: painted!important; }
.lock { background-color: var(--color-lock); cursor: pointer!important; color: var(--color-white)!important; pointer-events: painted!important; }
.slidecontainer { width: 100%; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 45px; background: #d3d3d3; outline: 0; opacity: .7; transition: opacity .2s; }
.slider:hover { opacity: 1; }
.slider::-webkit-slider-thumb, .slider::-moz-range-thumb { width: 25px; height: 25px; background: var(--color-green); cursor: pointer; -webkit-appearance: none; appearance: none; }
.btnx { border-radius: 3px; text-decoration: none; background-color: #ef3c43; display: block; width: 160px; line-height: 40px; align-items: center; margin: 0 auto; color: var(--color-white); text-align: center; user-select: none; }
.agc { background-color: var(--color-agc); color: #000!important; }
.spacecell { color: var(--color-spacecell); pointer-events: none; min-width: 22px; font-size: 85%; }
.showplace { width: 500px; text-align: center; border-radius: 2px; color: var(--color-white)!important; background-color: var(--color-showplace)!important; opacity: 1; display: block; margin: 4px auto 2%; }
.seatarea { text-align: center; margin: 0 auto; height: 470px; overflow: auto; -webkit-overflow-scrolling: touch; background-color: #29313b; }
.includeseat { position: relative; white-space: nowrap; width: auto; margin-left: auto; margin-right: auto; direction: ltr; display: inline-block; margin-top: 2px; }
.owlmy { width: auto; position: absolute; left: 45%; }
.asclass { font-size: 85%; item-align: center; margin-top: 3px; }
.spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; }
.spinner>div { background-color: var(--color-spinner); height: 100%; width: 6px; display: inline-block; animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 { animation-delay: -1.1s; }
.spinner .rect3 { animation-delay: -1s; }
.spinner .rect4 { animation-delay: -.9s; }
.spinner .rect5 { animation-delay: -.8s; }

@keyframes sk-stretchdelay { 0%,40%,100% { transform: scaleY(.4); } 20% { transform: scaleY(1); } }
@-webkit-keyframes sk-stretchdelay { 0%,40%,100% { -webkit-transform: scaleY(.4); } 20% { -webkit-transform: scaleY(1); } }