/* Reset Rules */
@media (-webkit-device-pixel-ratio: 1.25) {
  :root {
    zoom: 0.75; } }
*:focus {
  outline: none; }

*:last-child:not(:first-child):not(.container):not(.container-fluid):not(.override) {
  margin-bottom: 0 !important; }

/* Breakpoints */
/* Colors */
/* General Rules */
body {
  position: relative;
  font-family: 'roboto', Arial, sans-serif;
  font-display: swap;
  text-rendering: geometricPrecision;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  background-color: #fff;
  color: #071e3f;
  height: 100vh;
  overflow: hidden;
  padding-right: 0 !important; }
  @media (max-width: 575.98px) {
    body {
      font-size: 8px !important; } }
  @media (min-width: 576px) {
    body {
      font-size: 10px !important; } }
  @media (min-width: 768px) {
    body {
      font-size: 12px !important; } }
  @media (min-width: 992px) {
    body {
      font-size: 16px !important; } }
  @media (min-width: 1200px) {
    body {
      font-size: 20px !important; } }
  @media (min-width: 1400px) {
    body {
      font-size: 20px !important; } }
  @media (min-width: 1920px) {
    body {
      font-size: 20px !important; } }
  @media (min-width: 2560px) {
    body {
      font-size: 20px !important; } }
  body.front {
    background-image: url("../images/bg.png");
    background-size: 50% auto;
    transform: scaleX(170%); }
    body.front .header {
      height: 19vh; }
      body.front .header .logo {
        height: 100%;
        background-image: url("../images/logo-katok.svg");
        background-repeat: no-repeat;
        background-size: auto 90%;
        background-position: center bottom; }
    body.front .footer .hours {
      text-align: center;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 26px; }
    body.front .session-data {
      color: #fff;
      font-size: 40px;
      font-weight: 800; }
      body.front .session-data .session-head,
      body.front .session-data .session-time,
      body.front .session-data .session-capacity {
        text-align: center;
        justify-content: center; }
      body.front .session-data .session-head {
        font-size: 30px; }
      body.front .session-data .info {
        color: #fad352;
        font-size: 30px; }
      body.front .session-data .closed {
        margin-top: 29%; }
        body.front .session-data .closed .info {
          color: #fff;
          font-size: 40px;
          background-color: rgba(221, 80, 66, 0.3);
          border-color: #dd5042;
          padding: 20px;
          border-radius: 10px; }
      body.front .session-data input.form-control {
        color: #fff;
        font-size: 60px;
        width: 100%;
        text-align: center;
        font-weight: 800;
        padding: 0; }
      body.front .session-data .session {
        border-radius: 10px;
        background-color: rgba(63, 120, 90, 0.5);
        border: 1px solid #3f785a; }
        body.front .session-data .session.to-much {
          background-color: rgba(221, 80, 66, 0.5);
          border-color: #dd5042; }
        body.front .session-data .session.on-verge {
          background-color: rgba(250, 211, 82, 0.5);
          border-color: #fad352; }
  body.back input.form-control {
    border: 1px solid #21355b !important;
    height: 50px;
    text-align: center;
    max-width: 100px; }
  body.back .timepicker-container {
    overflow-y: hidden; }
  body.back .timepicker-inline-24 input.form-control, body.back .timepicker input.form-control {
    border: none !important;
    max-width: auto; }
  body.back .form-outline .form-control ~ .form-label {
    padding-top: .7rem !important; }
  body.back .form-outline .form-control.active ~ .form-label, body.back .form-outline .form-control:focus ~ .form-label {
    -webkit-transform: translateY(-1.2rem) translateY(0.1rem) scale(0.8);
    transform: translateY(-1.2rem) translateY(0.1rem) scale(0.8); }

/* Buttons */
.btn {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  text-decoration: none !important;
  text-transform: none;
  margin: 0;
  width: max-content;
  padding: 0px 20px;
  border-radius: 3px;
  height: 50px; }
  @media (max-width: 575.98px) {
    .btn {
      font-size: 10px !important; } }
  @media (min-width: 576px) {
    .btn {
      font-size: 12px !important; } }
  @media (min-width: 768px) {
    .btn {
      font-size: 14px !important; } }
  @media (min-width: 992px) {
    .btn {
      font-size: 18px !important; } }
  @media (min-width: 1200px) {
    .btn {
      font-size: 22px !important; } }
  @media (min-width: 1400px) {
    .btn {
      font-size: 24px !important; } }
  @media (min-width: 1920px) {
    .btn {
      font-size: 24px !important; } }
  @media (min-width: 2560px) {
    .btn {
      font-size: 24px !important; } }
  .btn.btn-primary {
    background-color: #21355b;
    color: #fff; }
  .btn.btn-secondary {
    background-color: #fff;
    border: 1px solid #21355b;
    color: #21355b; }
  .btn.btn-danger {
    background-color: #dd5042;
    border: 1px solid #dd5042;
    color: #fff; }

.brdr {
  border: 1px solid red; }

.brdg {
  border: 1px solid green; }

.brdb {
  border: 1px solid blue; }

.brdy {
  border: 1px solid yellow; }