:root {
  --cl-dark-blue: #09418d;
  --cl-light-blue: #0092f4;
  --cl-yellow:#fddc01 ;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset ! important;
}
html,body{height:100%;}
body{overflow-x:hidden; }
select, select:focus, .form-control:focus{box-shadow:none;}
.booking-layout select.form-control , .booking-layout input[type="text"].form-control {height:52px; border:0 none;}
.row > * {padding-right: calc(var(--bs-gutter-x) * .4); padding-left: calc(var(--bs-gutter-x) * .4);}
.mb-50{margin-bottom:50px}
body{margin:0; padding:0;     font-family: 'Poppins', sans-serif; font-size:20px; display:flex; flex-direction:column}
label{font-size:16px;}
table{font-size:16px}
.form-control{-webkit-appearance: auto;
    -moz-appearance: unset;
    appearance: auto;}
    ul.text-danger {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.text-danger li {
    background: #f00;
    border-radius: 4px;
}
ul.text-danger li small {
    color: #fff;
    text-align: center !important;
    display: block;
    font-size: 16px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{font-size:16px;}
.dataTables_wrapper .dataTables_paginate{padding-top:50px;}
body.home{background:url(../images/background.jpg) no-repeat top left; background-size:cover;}
header{padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #ddd;}
.logo{max-width:400px}
.header-nav{display:flex; justify-content: space-between;}
.header-tools-nav ul {  display: flex;  align-items: center;  justify-content: start;}
.header-tools-nav .users {  display: flex;  align-items: center;}
.header-tools-nav .users img {  max-width: 34px;  margin-right: 10px;}
.header-tools-nav ul li{list-style:none; margin: 0 16px}
.header-tools-nav .logout {outline: 0 none;border: 0 none;background: #000;padding: 8px 10px;border-radius: 5px;display: flex;align-items: center;justify-content: center;}
.header-tools-nav .logout img{max-width:24px;}
.header-tools-nav .counter-number {   border: 2px solid #fff; padding: 8px 56px 8px 20px;  border-radius: 50px;  position:relative;}
.header-tools-nav .counter-number span { background: #fff; padding: 6px 15px; border-radius: 50%; position: absolute;top: 2px; right: 2px; }
.text-ip-address { text-align: right; margin-bottom: 15px;}
.header-tools-nav ul li:last-child { margin-right: 0;}
footer {margin-top: auto; background: #014baf; padding: 15px; font-size: 14px;  color: #fff;}
.wspace-0{white-space: nowrap;}
.card-header.white{white-space:no-wrap}
.page-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  position: relative;
  min-height: 50px;
  margin: 1.8rem 0 1.5rem;
  border-radius: 7px;
}

a.forgot-pass-lbl {
    text-decoration: none !important;
    color: #000 !important;
    font-weight: 600;
    font-size: 18px;
}

.content-wrap{padding-top:30px;}
.dashboard-menu ul {display:flex; margin:0; padding:0}
.dashboard-menu ul li{list-style:none; margin:0; padding:0; margin-right:10px; }
.dashboard-menu ul li a{text-decoration:none; background:#fff; padding: 8px 16px; border-radius:5px; color:#fff; font-size:16px; color:#696969; border:1px solid #696969; transition:all 0.4s ease-in-out}
.dashboard-menu ul li.active a, .dashboard-menu ul li:hover a{background:var(--cl-dark-blue); color:#fff; border-color:var(--cl-dark-blue)}
.menu-panel { display: flex;  justify-content: space-between; align-items: center; margin-bottom: 70px;}
.dashboard-tools button {background: #09f; border: 0 none; padding: 10px 25px; color: #fff; font-weight: 600; border-radius: 5px;}
.dashboard-tools button img {max-width: 36px;}


.dashboard-main-menu .navbar-nav .nav-link {text-decoration:none; background:#fff; padding: 8px 16px; border-radius:5px; color:#fff; font-size:16px; color:#696969; border:1px solid #696969; transition:all 0.4s ease-in-out}
.dashboard-main-menu .navbar-nav .nav-link.active{background:var(--cl-dark-blue); color:#fff; border-color:var(--cl-dark-blue)}
.dashboard-main-menu .navbar-nav .nav-item{margin-right:12px;}
.dashboard-main-menu .navbar-nav .nav-item:last-child{margin-right:0}

.menu-panel { display: flex;  justify-content: space-between; align-items: center; margin-bottom: 30px;}


.bg-darkblue{background:var(--cl-dark-blue);}
.bg-lightblue{background:var(--cl-light-blue);}
.color-yellow{color:var(--cl-yellow) !important}
.ticket-box{padding:20px 30px; border-radius:6px;}
.ticket-title{font-size:22px; text-transform:uppercase; font-weight:600; margin:0; padding:0; margin-top:20px; color:#fff;}
.offer-info{font-size:15px; color:rgba(255,255,255,0.7); display:flex; align-items:center}
.offer-info img{max-width:20px; margin-left:10px;}

.ticket-book-form label{font-size:16px; color:#fff}
.icon-keyboard{max-width:36px; position:absolute; top:8px; right:20px;}
.icon-keyboard2 {max-width: 36px; position: absolute; top: 38px; right: 13px;}
.row-action-button{background:none; border:0 none;}
.row-action-button img{max-width:42px;}
.btn-submit{background:none; border:0 none;}
.btn-submit:active, .row-action-button:active { transform: translateY(4px);}

.ticket-cirle-chart{margin:0; padding:0; display:flex; align-items:center; position:absolute; top:-20px; left:30px;}
.ticket-cirle-chart li{list-style:none;}
.ticket-cirle-chart li a{text-decoration:none; font-size:18px; font-weight:600; width:48px; height:48px; display:block}
.ticket-cirle-chart li:nth-child(1) a{background:#c7c7c7; border-radius:5px; display:flex; align-items:center; justify-content:center; color:#000; margin-right:10px;}
.ticket-cirle-chart li:nth-child(2) a{background:#f25594; border-radius:5px; display:flex; align-items:center; justify-content:center; color:#fff; margin-right:10px;}
.ticket-cirle-chart li:nth-child(3) a{background:#fdb601; border-radius:5px; display:flex; align-items:center; justify-content:center; color:#014baf}

.student-checkwrap input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none;  cursor: pointer;}
.student-checkwrap label {  position: relative;  cursor: pointer;}
.student-checkwrap label:before {  content: "";  -webkit-appearance: none;  background-color: #fff;  border: 2px solid #fff;  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),    inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);  padding: 23px;  display: inline-block;  position: relative;  vertical-align: middle;  cursor: pointer;  border-radius:6px;}
.student-checkwrap input:checked + label:after {  content: "";  display: block;  position: absolute;  top: 2px;  left: 16px;  width: 16px;  height: 34px;  border: solid #0079bf;
  border-width: 0 7px 7px 0;  transform: rotate(45deg);}
.student-checkwrap input:not(:checked)  + label:after{position: absolute;  content: "X";  display: block;  color:#bdbdbd;  left: 11px;  top: -4px;  font-size:40px;  font-weight:600}

.ticket-preview{background:#fff; padding:25px; border-radius:15px; max-width:80%; margin-left: auto; padding-bottom:90px; position:relative}
.ticket-id{font-size:26px; color:#0190f0; font-weight:600; margin-bottom:15px;}
.ticket-order{background:#ebebeb; border-radius:10px; padding:20px 15px; margin-bottom:20px;}

.ticket-order-row {position: relative; padding-left: 54px;}
.ticket-order-row img.icon-ticket {max-width: 32px; position: absolute; left: 0;  top: 0;}
.ticket-name { font-size: 18px;color: var(--cl-dark-blue);  font-weight: 600;  margin-bottom: 5px;}
.ticket-showinfo {display: flex;  justify-content: space-between;  align-items: center;  font-size: 16px;}
.ticket-showinfo img { max-width: 20px;}
.ticket-count { font-size: 24px; color: var(--cl-dark-blue);  font-weight: 700;}
.ticket-count span { font-size: 18px; font-weight: 400;  color: #333;}
.ticket-price { font-size: 24px; font-weight: 700;  color: var(--cl-dark-blue);}
.ticket-ticketinfo { display: flex;  justify-content: space-between;}
.ticket-order hr {background-color: transparent; opacity: .50; border-top: 1px dashed #000;}

.payment-mode label{font-size:16px;}
.payment-mode select.form-control, .payment-mode input[type="text"].form-control {border:1px solid #999;}
.btn-yellow { background: var(--cl-dark-blue); border-color: var(--cl-dark-blue); font-weight: 600; font-size: 20px; height: 54px;}
.btn-center { position: absolute; width: 110%;  left: -17px;  bottom: 25px;}
.legents { list-style: none;   margin: 0; padding: 0; font-size: 14px; display: flex;}
.legents li { margin-right: 14px;}
.legents li span { width: 16px; height: 16px; border-radius: 3px; display: inline-block; vertical-align: middle;}
.clr-total { background: #c7c7c7;}
.clr-blocked { background: #f25594;}
.clr-available {  background: #fdb601;}
.sec-legents {  padding: 30px 0;}
.keyboard-wrap{position:fixed; bottom:0; right:0; border:1px solid #f00; max-width:400px; max-height:400px;}
.keyboard-wrap { position: fixed;  bottom: 80px;  right: 0;  border: 1px solid #f00;  max-width: 400px;  max-height: 400px;  width: 400px;  height: 300px;}

.content input[type="text"].form-control{height:auto}


@media (max-width: 991.98px) {
  .content .bg { height: 500px; } 
}
.content .contents, .content .bg { width: 50%; }
 @media (max-width: 1199.98px) {
    /* .content .contents, .content .bg {  width: 100%; } */
}
.content .contents .form-group, .content .bg .form-group {overflow: hidden;  margin-bottom: 0;  padding: 15px 15px;  border-bottom: none; position: relative;  background: #fff; border-bottom: 1px solid #fff; }
.content .contents .form-group label, .content .bg .form-group label {position: absolute; top: 50%;  -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%); transform: translateY(-50%);
      -webkit-transition: .3s all ease;   -o-transition: .3s all ease;   transition: .3s all ease; }
.content .contents .form-group input, .content .bg .form-group input {  background: transparent; }
.content .contents .form-group.first, .content .bg .form-group.first {border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom: 1px solid #999; }
.content .contents .form-group.last, .content .bg .form-group.last {border-bottom-left-radius: 7px;  border-bottom-right-radius: 7px; }
.content .contents .form-group label, .content .bg .form-group label { font-size: 15px; display: block; margin-bottom: 0;  color: #666; }
.content .contents .form-group.focus, .content .bg .form-group.focus { background: #fff; }
.content .contents .form-group.field--not-empty label, .content .bg .form-group.field--not-empty label { margin-top: -20px; }
.content .contents .form-control, .content .bg .form-control {border: none; padding: 0; font-size: 20px;  border-radius: 0; }
.content .contents .form-control:active, .content .contents .form-control:focus, .content .bg .form-control:active, .content .bg .form-control:focus {outline: none;  -webkit-box-shadow: none;
box-shadow: none; }
.content .bg {background-size: cover; background-position: center; }
.content a {color: #888; text-decoration: underline; }
.content .btn {height: 54px; padding-left: 30px; padding-right: 30px; }
.content .forgot-pass { position: relative; top: 2px; font-size: 14px; }
.control { display: block;position: relative;  padding-left: 30px;  margin-bottom: 15px;  cursor: pointer;  font-size: 14px; }
.control .caption { position: relative;  top: .2rem;  color: #888; }
.control input {position: absolute; z-index: -1; opacity: 0; }
.control__indicator {position: absolute;  top: 2px;  left: 0;  height: 20px;  width: 20px;  background: #e6e6e6;  border-radius: 4px; }
.control--radio .control__indicator { border-radius: 50%; }
.control:hover input ~ .control__indicator, .control input:focus ~ .control__indicator {background: #ccc; }
.control input:checked ~ .control__indicator { background: #6c63ff; }
.control:hover input:not([disabled]):checked ~ .control__indicator, .control input:checked:focus ~ .control__indicator { background: #847dff; }
.control input:disabled ~ .control__indicator {background: #e6e6e6; opacity: 0.9;  pointer-events: none; }
.control__indicator:after { font-family: 'icomoon';  content: '\e5ca';  position: absolute;  display: none;  font-size: 16px;  -webkit-transition: .3s all ease;  -o-transition: .3s all ease;
  transition: .3s all ease; }
.control input:checked ~ .control__indicator:after {display: block;  color: #fff; }
.control--checkbox .control__indicator:after { top: 50%; left: 50%;  margin-top: -1px;  -webkit-transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%); }
.control--checkbox input:disabled ~ .control__indicator:after {border-color: #7b7b7b; }
.control--checkbox input:disabled:checked ~ .control__indicator { background-color: #7e0cf5;  opacity: .2; }

.dataTables_wrapper .dataTables_info{font-size: 16px; padding-top: 50px;}
#example_paginate {font-size: 16px; padding-top: 50px;}
#example_length, #example_filter{font-size:16px;}

@media only screen and (min-width:1200px) and (max-width:1399px){
  .ticket-title{font-size: 20px;}
  .ticket-book-form label{font-size: 14px;}
  .booking-layout select.form-control, .booking-layout input[type="text"].form-control{height: 50px;}
  .icon-keyboard{top: 5px;}
  .ticket-preview{max-width: 90%;}
  .smallscr{flex: 0 0 auto; width: 10%;}
  .ticket-cirle-chart li a{font-size: 16px; width: 38px; height: 38px;}
}

.text-danger{ font-size:14px; }
.alert-success, .alert-danger{ font-size:16px; padding: 8px;}
input#input-start-date, input#input-end-date, input#input-sale-start-date, input#input-sale-end-date {padding: 0.375rem 0.75rem;}
.title-gpbaasri{text-align:center; text-transform: uppercase; padding-bottom: 30px;font-size: 26px;}
#audits-table_wrapper div#audits-table_length {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
div#audits-table_info {
    margin-left: 20px;
}
.dataTables_wrapper .dataTables_paginate {
    padding-top: 40px;
    padding-bottom: 20px;
}

.login-action-wrapper{ display: flex; align-items: center; justify-content: space-between;}

@media only screen and (min-width:768px) and (max-width:991px){
    body{font-size:14px;}
    .logo {  max-width: 300px;}
    .dashboard-main-menu .navbar-nav .nav-link{font-size: 12px;padding: 8px 12px; display: flex; align-items: center;}
    .dashboard-main-menu .navbar-nav .nav-item {margin-right: 6px;}
    .dashboard-main-menu .navbar-nav .nav-link + ul li .dropdown-item {  font-size: 12px;}
    .h5, h5 {font-size: 1rem;}
    h3.card-title { font-size: 16px;font-weight: 600;}
    table.table {  font-size: 13px;}
    table .btn-primary, table .btn-danger, table .btn-secondary, table .btn-warning{font-size:11px;}
    input {  font-size: 14px !important;}
    .dashboard-tools button{padding: 8px 20px; font-size: 14px;}
    table.dataTable tbody th, table.dataTable tbody td {padding: 4px 10px;  font-size: 12px;}
    table.dataTable thead th, table.dataTable thead td{font-size:12px;}
    .dataTables_wrapper .dataTables_info{font-size:14px;}
    .dataTables_wrapper .dataTables_paginate .paginate_button {    font-size: 14px;}
    label, .form-control { font-size: 14px !important;}
    input#input-start-date, input#input-end-date {padding: 0.375rem 0.75rem;}
    .btn-primary, .btn-secondary{font-size:13px;}
    .title-gpbaasri{font-size:18px;}
     .dashboard-main-menu .navbar-nav .nav-link{padding: 6px 8px;}
     button.btn-submit {    position: absolute; top: 60px;  right: 20px;max-width: 45px;}
     .ticket-preview{max-width:100%;}
     .content .contents, .content .bg{width:58%;}
     .login-action-wrapper{align-items: start; flex-direction: column;}
}

@media only screen and (min-width:992px) and (max-width:1199px){
    body{font-size:14px;}
    .logo {  max-width: 300px;}
    .dashboard-main-menu .navbar-nav .nav-link{font-size: 14px;padding: 8px 12px; display: flex; align-items: center;}
    .dashboard-main-menu .navbar-nav .nav-item {margin-right: 6px;}
    label, .form-control { font-size: 14px !important;}
    table .btn-primary, table .btn-danger, table .btn-secondary{font-size:14px;}
    .title-gpbaasri{font-size:20px;}
    .dashboard-main-menu .navbar-nav .nav-link{padding: 6px 8px;}
    .ticket-preview{max-width:100%; padding:25px 0;}
    .ticket-order-row{padding-left: 0;}
    .ticket-order-row img.icon-ticket{position:static;}
    .ticket-preview .btn-yellow{max-width:100%;}
    .login-action-wrapper{align-items: start; flex-direction: column;}
}