@font-face {
  font-family: "DIN";
  src: url(./fonts/DIN-Bold.ttf) format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: "DIN";
  src: url(./fonts/DIN-Light.ttf) format("truetype");
  font-weight: light;
}
@font-face {
  font-family: "DIN";
  src: url(./fonts/DIN-Medium.ttf) format("truetype");
  font-weight: medium;
}
@font-face {
  font-family: "DIN";
  /* src: url(./fonts/DIN-Regular.ttf) format("truetype"),  replace this with next line for font change back*/
  src: url(./fonts/DIN-Regular.ttf) format("truetype"),
    url(./fonts/DIN-RegularAlternate.ttf) format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "DIN";
  src: url(./fonts/DIN-BlackAlternate.ttf) format("truetype");
  font-weight: 900;
}
@font-face {
  font-family: "Horizon";
  src: url(./fonts/Centurion-horizon.otf) format("opentype");
  font-weight: normal;
}

ul {
  list-style-type: none;
}

.gradient-custom {
  background: -webkit-linear-gradient(
    to right,
    rgba(106, 17, 203, 1),
    rgb(4, 9, 17)
  );
  background: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0));
  /* Remove above and use bottom for purple -> black 
   background: linear-gradient(to right, rgb(120, 119, 182), rgb(4, 9, 17)); */
}

body {
  font-family: "DIN";
  margin: 0;
  /* margin-left: 240px; */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0));
  /* background: linear-gradient(to right, rgb(120, 119, 182), rgb(4, 9, 17)); */
}

#top {
  height: 50px;
}
#bottom {
  flex: 1;
}

.mainContent {
  flex: 1;
}
/*
@media (min-width: 991.98px) {
  main {
    padding-left: 240px;
    background-color: transparent;
    min-height: 650px;

    position: relative;
  }
}*/

/* Sidebar */
.sidebar {
  position: fixed;
  align-self: flex-start;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 58px 0 0;

  /* Height of navbar */
  /* box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%); */
  width: 240px;
  z-index: 95;
}

@media (max-width: 991.98px) {
  .sidebar {
    width: 100%;
  }
}
.sidebar .active {
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: 0.5rem;
  overflow-x: visible;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.wrap {
  width: 97%;
  height: 900px;
  padding: 0;
  overflow: hidden;
}

.frame {
  margin-left: 20px;
  width: 100%;
  height: 100%;
  border: 0;
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);

  cursor: pointer;

  -ms-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

h3 {
  margin-top: 20px;
}

.search-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

a {
  color: lightgray;
  text-decoration: none;
}

a:hover {
  color: rgb(155, 88, 155);
}

::-webkit-scrollbar {
  width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(120, 119, 182, 0.7);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 221, 0.1);
}

.newtext {
  visibility: hidden;
}

.iframewrap {
  width: 400px;
  height: 600px;
  padding: 0;
  overflow: hidden;
}

.logothumbnail {
  width: 1200px;
  height: 1800px;
  border: 0;
  -ms-transform: scale(0.25);
  -moz-transform: scale(0.25);
  -o-transform: scale(0.25);
  -webkit-transform: scale(0.25);
  transform: scale(0.25);

  -ms-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

input {
  border: 1px solid black;
  border-radius: 5px;
}

.enlargeImgDiv {
  position: absolute;
  text-align: left;
  background: white;
  border: 1px solid black;
  right: 4%;
  padding: 5px;
  width: 30vw;
  z-index: 7;
}

.pulse {
  background: red;
  color: #000;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    background: red;
    color: #000;
  }
  50% {
    background: #6f2a21;
    color: #fff;
  }
  100% {
    background: red;
    color: #000;
  }
}

.overscreenhud {
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  display: none;
  justify-content: center;
  align-items: center;
}

.overlaydeviceselection {
  height: 300px;
  width: 700px;
  background: white;
  margin-left: 255px;
  padding: 20px;
  border-radius: 10px;
  position: relative;
}

.overlayhidcontent {
  height: 400px;
  width: 800px;
  background: white;
  margin-left: 255px;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  display: none;
}

.overlayaddx100 {
  height: 350px;
  width: 600px;
  background: white;
  padding-top: 20px;
  border-radius: 10px;
  position: relative;
  display: none;
}

.overlayeditx100 {
  height: 350px;
  width: 600px;
  background: white;
  padding-top: 20px;
  border-radius: 10px;
  position: relative;
  display: none;
}

.overlayadddoor {
  height: 900px;
  width: 600px;
  background: white;
  padding-top: 20px;
  border-radius: 10px;
  position: relative;
  display: none;
}

.overlayeditdoor {
  height: 900px;
  width: 600px;
  background: white;
  padding-top: 20px;
  border-radius: 10px;
  position: relative;
  display: none;
}

.overlayaddschedule {
  height: 950px;
  width: 600px;
  background: white;
  padding-top: 10px;
  border-radius: 10px;
  position: fixed;
  overflow-y: scroll;
  display: none;
}

.overlayeditschedule {
  height: 950px;
  width: 600px;
  background: white;
  padding-top: 10px;
  border-radius: 10px;
  position: fixed;
  overflow-y: scroll;
  display: none;
}

input:read-only {
  background-color: lightgray;
}
/*
.paginationTable {
  background-color: white;
  color: black;
  letter-spacing: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table {
  width: 100%;
  height: 100%;
  padding: 20px 50px;
  border-collapse: collapse;
}

td, thead{
  font-family: 'Cambria';
  cursor: pointer;
  padding: 10px 10px;
  border: 0.5px solid #606060;
  letter-spacing: 1px;
}

thead{
  font-weight: bold;
  font-size: 21px;
  background-color: darkgrey;
}

td{
  font-size: 19px;
  background-color: lightgrey;
}

tr:hover td{
  background-color: darkgrey;
  border: 1px solid black;
}

.paginationfooter{
  margin-top: 25px;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
*/
.paginationbutton {
  padding: 7px 15px;
  color: white;
  background-color: transparent;
  font-size: 20px;
  cursor: pointer;
}

.paginationbutton.active,
.paginationbutton:hover {
  background: linear-gradient(to bottom, darkgrey 0%, black 100%);
}

h1 {
  font-size: 1.8rem;
  margin: 0px;
}

.kioskLbl {
  font-size: 1.2em;
  font-weight: bold;
}

.footerLogo {
  max-width: 10vw;
  max-height: 10vh;
  object-fit: contain;
}

.mainAdmin {
  padding-left:240px;
}

ul#navlist
{
list-style: none;
padding: 0;
margin: 5px;
}

ul#navlist li
{
display: block;
float: left;
width: 15%;
margin: 0 5px 0 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: white;
text-decoration: none;
background: #565e64;
border-radius:5px;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
background: #666e74;
}

#search-input {
  width:auto;
  padding: 2px;
}

.callPulse {
  background: #6283a3;
  animation: callPulse 2s ease-in-out infinite;
}

@keyframes callPulse {
  0% {
    background: #6283a3;
  }
  50% {
    background: #212529;
  }
  100% {
    background: #6283a3;
  }
}