: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);
}

html:not([data-bs-theme="dark"]) .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 (min-width: 321px) and (max-width: 360px) {
   .header-top {
      min-height: calc(var(--head-height) * .24);
   }
}

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

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

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

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

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

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

@media (min-width: 1025px) and (max-width: 1199px) {
   .header-top {
      min-height: calc(var(--head-height) * .4);
   }
}

@media (min-width: 1200px) and (max-width: 1399px) {
   .header-top {
      min-height: calc(var(--head-height) * .85);
   }
}

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

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

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

span[data-target="#tagsModal"] {
display: none;
}
*/