﻿/********************************************/
/**************Share*************************/
/********************************************/
/*#region share*/
@font-face {
    font-family: 'Mulish-Regular';
    src: url('fonts/Mulish/Mulish-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Mulish-Bold';
    src: url('fonts/Mulish/Mulish-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Mulish-Italic';
    src: url('fonts/Mulish/Mulish-Italic.ttf') format('truetype');
}
@font-face {
    font-family: 'Mulish-Light';
    src: url('fonts/Mulish/Mulish-Light.ttf') format('truetype');
}

.custom-selector {
    width:auto;
    display:inline-block;
    font-size:0;
}
.custom-selector button {
    font-size:12px;
    border:0;
    padding:2px;
    width:100px;
    color:white;
    font-weight:bold;
}
.custom-selector button.first {
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
.custom-selector button.last {
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 5px;
}
.custom-scrollbar::-webkit-scrollbar {
	width: 7px;
    height: 7px;
	background-color: #F5F5F5;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
	background-color: grey;
	border-radius: 5px;
}

.custom-scrollbar-mini::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 2px;
}
.custom-scrollbar-mini::-webkit-scrollbar {
	width: 2px;
    height: 2px;
	background-color: #F5F5F5;
}
.custom-scrollbar-mini::-webkit-scrollbar-thumb {
	background-color: grey;
	border-radius: 2px;
}

.custom-cb {
    display: block;
    position: relative;
    padding-top: 1px;
    padding-left: 30px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.custom-cb input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.custom-cb .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #808080;
}
.custom-cb .container:hover input ~ .checkmark {
  background-color: #ccc;
}
.custom-cb input:checked ~ .checkmark {
  background-color: #2196F3;
}
.custom-cb.red input:checked ~ .checkmark {
  background-color: red;
}
.custom-cb .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.custom-cb input:checked ~ .checkmark:after {
  display: block;
}
.custom-cb .checkmark:after {
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.custom-radio label {
    display:flex;
    flex-direction:column;
    justify-content:center;
}

button:focus {
    outline:none;
}
a:hover {
    text-decoration:none;
}
select:focus {
    outline:none;
}

.mdi-cursor-move {
    color:mediumpurple;
    cursor:move;
}
.tip-move {
    color:mediumpurple;
    white-space:nowrap;
}
.btn-sort {
    background-color:mediumpurple;
    color:white;
    margin-right:5px;
    margin-left:3px;
    padding:2px 5px;
}
.btn-sort:hover {
    color:white;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}

.field-warning {
    color:red;
    font-size:13px;
}

.hide {
    display:none;
}
.show {
    display:block;
}
.show-inline {
    display:inline-block;
}

.right {
    text-align:right;
}
.mid {
    text-align:center;
}

.grey {
    color:grey;
}

.fullscreen-frame {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 9001;
    display: none;
    cursor:zoom-out;
}
.fullscreen-frame img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}
.fullscreen-frame video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}
.zoomable {
    cursor:zoom-in;
}
.zoomable_path {
    cursor:zoom-in;
}

.under-development {
    font-size:12px;
}

.saving {
    display:none;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    z-index:99;
}
.saving .center {
    width:200px;
    height:120px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    text-align:center;
}
.saving .center img {
    display:block;
    margin:5px auto;
    text-align:center;
    max-width:150px;
    max-height:80px;
    border-radius:15px;
}
.saving .center span {
    display:block;
    text-align:center;
    color:lightblue;
}

.no-data {
    font-size:15px;
    font-weight:bold;
    color:red;
}

.record-templates {
    display:none;
}

.loading {
    padding-top:15px;
    padding-bottom:15px;
    width: 100%;
    text-align: center;
}
.loading .spinner-border {
    display: block;
    margin: auto;
    margin-bottom: 15px;
}
.loading .loading-text {
    font-size: 12px;
    font-weight: bold;
}

.syslogs {
    position:fixed;
    top:0;
    z-index:99999;
    pointer-events:none;
}
.syslogs label {
    display:block;
    font-size:11px;
    margin-bottom:0;
    color:red;
}

.daterangepicker {
    z-index:9001!important;
}

.custom-paging {
    margin-top:5px;
}
/*#endregion share*/


/********************************************/
/**************layout************************/
/********************************************/
/*#region layout*/
body {
    /*border:3px solid blue;*/
    font-family: 'Mulish-Regular';
    
}

.body-top {
    /*border:1px solid red;*/
    /*height:90%;*/
    color:white;
    padding:20px;
    background-image: url('../Images/bg-mobile-v2.jpg');
    background-size:cover;
    background-repeat:no-repeat;
    background-position-x:center;
    background-position-y:center;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    /*pointer-events: none;*/
}
@media screen and (min-width: 768px)  {
    .body-top {
        background-image: url('../Images/bg-wide-v2.jpg');
    }
}

.body-top .navs {
    /*border:1px solid red;*/
    display:flex;
}
.body-top .navs .a1 {
    height:40px;
}
.body-top .navs .a1 img {
    height:100%;
}
.body-top .navs div {
    flex-grow:1;
}
.body-top .navs .a3 {
    padding:5px 10px;
    font-size:16px;
    border:1px solid white;
    border-top-right-radius:15px;
    border-bottom-right-radius:15px;
    border-bottom-left-radius:15px;
    background-color:black;
}
.body-top .intro {
    /*border:1px solid red;*/
    padding-top:150px;
    padding-bottom:150px;
}
.body-top .intro h1 {
    display:block;
}
.body-top .intro h5 {
    display:block;
    color:#d1b333;
    font-family: 'Mulish-Bold';
}
.body-top .intro a {
    color:lightblue;
    text-decoration:underline;
    font-size:25px;
}

.body-content {
    /*border:1px solid red;*/
    min-height:200px;
    margin-bottom:30px;
}

.body-bottom {
    /*border:1px solid red;*/
    min-height:200px;
}
.body-bottom .sponsors {
    padding:25px 15px;
    text-align:center;
}
.body-bottom .sponsors img {
    height:50px;
    margin:10px 10px;
}
.body-bottom h3 {
    display:block;
    text-align:center;
    padding:5px 15px;
    font-family: 'Mulish-Bold';
}
.body-bottom h6 {
    display:block;
    text-align:center;
    padding:5px 15px;
    font-family: 'Mulish-Bold';
    color:dimgray;
}

.body-bottom .chat {
    text-align:center;
    padding:15px 15px 25px 15px;
}

.body-bottom .chat .jChat {
    text-align:center;
    padding:5px 15px;
    display:inline-flex;
    margin:auto;
    background-color:transparent;
    border:0;
}
.body-bottom .chat .jChat img {
    align-self:center;
    height:35px;
    margin-right:10px;
}
.body-bottom .chat .jChat div {
    padding:8px 15px;
    font-size:15px;
    border:1px solid white;
    border-top-right-radius:15px;
    border-bottom-right-radius:15px;
    border-bottom-left-radius:15px;
    background-color:#01adff;
    color:white;
}
.body-bottom .chat .jChat div span {
    display:block;
}

.body-bottom .chat .chat-fb {
    text-align:center;
    padding:5px 15px;
    display:inline-flex;
    margin:auto;
    background-color:transparent;
    border:0;
}
.body-bottom .chat .chat-fb img {
    align-self:center;
    height:35px;
    margin-right:10px;
}
.body-bottom .chat .chat-fb div {
    padding:8px 15px;
    font-size:15px;
    border:1px solid white;
    border-top-right-radius:15px;
    border-bottom-right-radius:15px;
    border-bottom-left-radius:15px;
    background-color:#455795;
    color:white;
}
.body-bottom .chat .chat-fb div span {
    display:block;
}

.body-bottom .footer {
    background-color:black;
    padding:30px 15px;
    margin-top:35px;
}
.body-bottom .footer .container {
}
.body-bottom .footer ._left {
    text-align:center;
}
.body-bottom .footer ._left img {
    width:150px;
    margin-bottom:25px;
}
.body-bottom .footer ._right {
    color:#d2d2d4;
    text-align:center;
}
.body-bottom .footer ._right p {
    margin-bottom:5px;
    display:block;
}
.body-bottom .footer ._right p i {
    font-size:20px;
    margin-right:5px;
}
.body-bottom .footer ._right a {
    margin-bottom:5px;
    display:block;
}
@media screen and (min-width: 768px) {
    .body-bottom .footer .container {
        display:flex;
        justify-content:space-between;
    }
    .body-bottom .footer ._left {
        align-self:center;
    }
    .body-bottom .footer ._left img {
        margin-bottom:unset;
    }
    .body-bottom .footer ._right {
        align-self:center;
        color:#d2d2d4;
        text-align:right;
    }
}

.body-bottom .copyright {
    background-color:#091b3f;
    color:#d2d2d4;
    padding:10px 15px;
}
.body-bottom .copyright p {
    margin-bottom:0;
    text-align:center;
}
.body-alert {
    z-index:9006;
    position:fixed;
    bottom:40px;
    left:0;
    margin:auto;
    max-width:90%;
    width:300px;
    font-size:smaller;
}
@media screen and (min-width: 768px) {
    .body-alert {
        bottom:0;
    }
}

.jWa {
    position:fixed;
    bottom:15px;
    right:15px;
    border:0;
    background-color:transparent;
    width:50px;
    height:50px;
    outline:none;
    padding:0;
}
.jWa img {
    width:50px;
    height:50px;
}
.jWa:focus {
    outline:none;
}

.btn-fb-float {
    position:fixed;
    bottom:15px;
    right:75px;
    border:0;
    background-color:transparent;
    width:50px;
    outline:none;
    padding:5px;
}
.btn-fb-float img {
    width:50px;
}
.btn-fb-float:focus {
    outline:none;
}
/*#endregion layout*/


/********************************************/
/**************index*************************/
/********************************************/
/*#region index*/
.index ._index {
    padding-left:5px;
    padding-right:5px;
}
.index ._filters {
    position:relative;
    /*z-index:100;*/
    background-color:#091b3f;
    margin-top:15px;
    margin-bottom:15px;
    padding:15px;
    text-align:center;
    border-radius:15px;
    margin-top:-100px;
}
.index ._filters input,
.index ._filters select {
    border:1px solid grey;
    padding:8px 10px;
    border-radius:10px;
    display:block;
    width:100%;
    text-align:center;
    background-color:#091b3f;
    color:white;
    margin-bottom:8px;
}
.index ._filters .r {
    display:flex;
    column-gap:10px;
}
.index ._filters .r select,
.index ._filters .r input {
    flex-grow:1;
}
.index ._filters input::placeholder {
    color: grey;
    opacity: 1;
}
.index ._filters input:-ms-input-placeholder {
    color: grey;
}
.index ._filters input::-ms-input-placeholder {
    color: grey;
}
.index ._filters button {
    margin:10px auto 0 auto;
}
.index .loading {
    padding-top:35px;
}
.index .table th,
.index .table td {
    padding:5px 5px;
    vertical-align:top;
}
.index .jSort {
    cursor:pointer;
}
.index .jSort label {
    cursor:pointer;
}
.index .jPrice {
    display:none;
}
@media screen and (min-width: 768px) {

}

.index .highlight {
    background-color: mediumspringgreen;
}
.index mark {
    background-color: mediumspringgreen;
    padding:0;
}
/*#endregion index*/


/********************************************/
/**************terms*************************/
/********************************************/
/*#region terms*/
.terms {
    padding-top:15px;
}
/*#endregion terms*/


/********************************************/
/**************policy************************/
/********************************************/
/*#region policy*/
.policy {
    padding-top:15px;
}
/*#endregion terms*/

