:root {
   --clr-body: #666;
   --clr-body-bg: #fff;
   --clr-primary: #000;
   --clr-secondary: #000;
   --clr-menu: #000;
   --clr-red: #e8412c;
   --head-height: 300px;
   --font-family: OpenSans;
}

@font-face {
   font-family: "OpenSans";
   font-weight: normal;
   src: url(/static/font/OpenSansR.ttf) format("truetype");
}

@font-face {
   font-family: "OpenSans";
   font-weight: bold;
   src: url(/static/font/OpenSansB.ttf) format("truetype");
}

body {
   color: var(--clr-body);
   background-color: var(--clr-body-bg);
   font-family: var(--font-family); 
}

a {
   color: var(--clr-secondary);
}

a:hover {
   color: var(--clr-primary);
}

.clr-primary {
   color: var(--clr-primary);
}

.clr-secondary {
   color: var(--clr-secondary);
}

/* btn menu */
.btn-live {
   background-color: var(--clr-red);
   border: .13rem solid var(--clr-red);
}

.btn-live:hover {
   color: #fff;
   background-color: var(--clr-menu);
   border: .13rem solid var(--clr-red);
}

::marker {
   color: var(--clr-primary);
}

.hallName {
   background-color: var(--clr-primary);
}

.modal-header {
   background-color: var(--clr-primary);
}

.programmeControls {
   background-color: var(--clr-body-bg);
}

.wizardCount.active {
   background-color: var(--clr-primary);
}

.dropdown-item:focus, .dropdown-item:hover {
   background-color: var(--clr-primary);
   color: #fff;
}

.custom-control-input:checked~.custom-control-label::before {
   border-color: var(--clr-secondary);
   background-color: var(--clr-secondary);
}

@media (max-width:280px) {
   .header-top {
      min-height: calc(var(--head-height) * .2463);
   }
}

@media (min-width: 281px) and (max-width: 320px) {
   .header-top {
      min-height: calc(var(--head-height) * .2831);
   }
}

@media (min-width: 321px) and (max-width: 360px) {
   .header-top {
      min-height: calc(var(--head-height) * .3162);
   }
}

@media (min-width: 361px) and (max-width: 375px) {
   .header-top {
      min-height: calc(var(--head-height) * .3309);
   }
}

@media (min-width: 376px) and (max-width: 411px) {
   .header-top {
      min-height: calc(var(--head-height) * .3603);
   }
}

@media (min-width: 412px) and (max-width: 414px) {
   .header-top {
      min-height: calc(var(--head-height) * .364);
   }
}

@media (min-width: 415px) and (max-width: 540px) {
   .header-top {
      min-height: calc(var(--head-height) * .4743);
   }
}

@media (min-width: 541px) and (max-width: 768px) {
   .header-top {
      min-height: calc(var(--head-height) * .6765);
   }
}

@media (min-width: 769px) and (max-width: 1024px) {
   .header-top {
      min-height: calc(var(--head-height) * .9007);
   }
}

@media (min-width: 1200px) {
   .header-top {
      min-height: var(--head-height);
   }
}

@media (min-width: 1921px) {
   .bg-banner {
      background-size: contain !important;
   }
}

/*
.nav-item>.btn:focus {
   color: var(--clr-primary)
}

span[g-container="clock"] {
   width: 4rem;
}

span[data-target="#tagsModal"] {
   display: none;
}
*/
.content {
   width: 100%;
   max-width: 1100px;
   margin: 0 auto;
   padding: 2rem;
}

.content h2 {
   color: var(--clr-primary);
   font-size: 1.5rem;
   margin: 0 0 2rem;
}

.section-title {
   margin-top: 4rem !important;
}

.table-responsive {
   width: 100%;
   overflow-x: auto;
}

.fees-table {
   width: 100%;
   border-collapse: collapse;
   color: var(--clr-body);
}

.fees-table th,
.fees-table td {
   padding: .75rem;
   border: 1px solid #ccc;
   text-align: left;
   vertical-align: middle;
}

.fees-table th {
   color: var(--clr-primary);
   font-weight: bold;
}

.fees-table tbody tr:nth-child(odd) {
   background-color: #f2f2f2;
}

.fees-table td:not(:first-child) {
   white-space: nowrap;
}

.fees-table .period-row {
   background-color: #fff;
}

.fees-table .period-row td,
.fees-table .period-row th {
   padding-top: 2rem;
}