.bg-sahp-1 {
background: rgb(7,39,64);
background: linear-gradient(300deg, rgb(7, 64, 26) 0%, rgb(7, 64, 12) 74%, rgba(0,0,0,1) 100%);
}
.bg-sahp-5 {
background: rgb(7,39,64);
background: linear-gradient(300deg, rgba(7,39,64,1) 0%, rgba(7,39,64,1) 74%, rgba(0,0,0,1) 100%);
}
.bg-sahp-2 {
background: rgb(64,7,7);
background: linear-gradient(300deg, rgba(64,7,7,1) 0%, rgba(64,7,7,1) 74%, rgba(0,0,0,1) 100%);
}
.bg-sahp-3 {
background: rgb(58, 57, 57);
background: linear-gradient(300deg, rgb(85, 85, 85) 0%, rgb(99, 99, 99) 74%, rgba(0,0,0,1) 100%);
}
.bg-sahp-4 {
background: rgb(199, 176, 44);
background: linear-gradient(300deg, rgb(161, 147, 17) 0%, rgb(211, 192, 22) 74%, rgba(0,0,0,1) 100%);
}
.bg-sahp-0 {
background: rgb(64,48,7);
background: linear-gradient(300deg, rgba(64,48,7,1) 0%, rgba(64,51,7,1) 74%, rgba(0,0,0,1) 100%);
}
.bg-sahp-10 {
    background: rgb(66,0,0);
    background: -moz-linear-gradient(107deg, rgba(66,0,0,1) 19%, rgba(0,24,70,1) 71%);
    background: -webkit-linear-gradient(107deg, rgba(66,0,0,1) 19%, rgba(0,24,70,1) 71%);
    background: linear-gradient(107deg, rgba(66,0,0,1) 19%, rgba(0,24,70,1) 71%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#420000",endColorstr="#001846",GradientType=1) ;
}
.cursor-pointer {
    cursor: pointer;
}


.clock {
font-size: 48px;
text-align: left;
padding-left: 60px; /* Adjusted to align with the start of the tiles */
margin: 20px auto 40px auto; /* Centering the clock horizontally with margin auto */
max-width: 1300px; /* Matching the width of the tile container */
}

.menu-container {
display: flex;
flex-wrap:wrap;
justify-content: center;
gap: 10px;
padding: 0 60px; /* Uniform padding for alignment */
margin: auto; /* Center the container */
}

.tile {
background-color: #0078D7;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
font-size: 13pt;
transition: transform 0.3s ease;
}

.tile:hover {
color: white;
}


.tile:hover {
transform: scale(1.1);
cursor: pointer;
}

.tile.small {
grid-column: span 1;
height: 150px;
}

.tile.medium {
grid-column: span 2;
height: 150px;
}

.tile.large {
grid-column: span 3;
height: 150px;
}

.tile.xlarge {
grid-column: span 4;
height: 310px;
}      
#logs {
    margin-top: 5vh;
}
#operations {
  margin-top: 3vh;
}

.bg-sahp-green{
background: rgb(7, 64, 15);
background: linear-gradient(300deg, rgb(7, 64, 19) 0%, rgb(9, 64, 7) 74%, rgba(0,0,0,1) 100%);
}
.bg-sahp-2 {
background: rgb(64,7,7);
background: linear-gradient(300deg, rgba(64,7,7,1) 0%, rgba(64,7,7,1) 74%, rgba(0,0,0,1) 100%);
}
.bg-sahp-0 {
background: rgb(64,48,7);
background: linear-gradient(300deg, rgba(64,48,7,1) 0%, rgba(64,51,7,1) 74%, rgba(0,0,0,1) 100%);
}
.cursor-pointer {
  cursor: pointer;
}
a {
  text-decoration: none;
  color: white;
}
.bg-primary {
background: #5C412F !important;
}
@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height: 25vh;
  --card-width: calc(var(--card-height) / 1.0);
}


body {
  min-height: 100vh;
  background: #212534;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;

}

.magiccard {
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  padding: 4px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: normal;
  font-family: cursive;
}

.magiccard , .magiccard.selected, .magiccard.blocked{
  color: white;
  transition: color 1s;
}

.magiccard.selected {
  cursor: pointer;
  opacity: 0.7;
}

.magiccard.selected:hover {
  opacity: 1;
}

.magiccard.blocked {
  opacity: 0.3;
  cursor:not-allowed;
}

.magiccard.selected:after, .magiccard.selected:before, .magiccard.blocked:after, .magiccard.blocked:before {
  animation: none;
  opacity: 0;
}

.magiccard::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: spin 2.5s linear infinite;
}

.magiccard::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    opacity: 1;
  transition: opacity .5s;
  animation: spin 2.5s linear infinite;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}
.bg-sahp-7 {
background: rgb(7, 57, 64);
background: linear-gradient(300deg, rgb(7, 60, 64) 0%, rgb(14, 124, 115) 74%, rgba(0,0,0,1) 100%);
}
.magiccard.blocked>span{
  background: rgba(0, 0, 0, 0.6);
  /* opacity: 0.3; */
  /* cursor: not-allowed; */
}

/* For WebKit browsers */
::-webkit-scrollbar{
  width: 8px;
  background-color: transparent;
  }
  
  ::-webkit-scrollbar-thumb{
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb:hover{
  background-color: rgba(0, 0, 0, 0.7);
  }
  
  ::-webkit-scrollbar-track{
  background: transparent;
  }
  
  /* For Firefox */
  body{
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
  scrollbar-base-color: transparent;
  scrollbar-face-color: rgba(0, 0, 0, 0.5);
  scrollbar-highlight-color: transparent;
  scrollbar-shadow-color: transparent;
  scrollbar-track-color: transparent;
  scrollbar-arrow-color: transparent;
  scrollbar-dark-shadow-color: transparent;
  scrollbar-3dlight-color: transparent;
  }