html {
    font-size: 100%; /* or 16px */
}

@font-face {
   
   font-family: Orbitron;
   src: local("Orbitron"), url("/fonts/orbitron.ttf");
   
}

@font-face {
    font-family: BrunoAce;
    src: local("BrunoAceSC-Regular"), url("/fonts/BrunoAceSC-Regular.ttf");
}

.sectionheader{
    font-family: Orbitron;
    color:white;
    font-size: 3vw;
}


.panelheader {
    font-family: Orbitron;
    color: white;
    font-size: x-large;
    margin-left: 5px;
    margin:5px;
    padding: 0px;
}
.panelelement {
    font-family: BrunoAce;
    color: gold;
    font-size: medium;
    margin: 10px;
    padding: 10px;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.26);
}

.paneltext{
    font-family: Tahoma;
    color: white;
    font-size: medium;
    margin-left: 10px;
}
.buttonlabel {
    font-family: BrunoAce;
    color: white;
    font-size: 14pt;
    margin-right: 5px;
}
.menublock {
    width: 140px;
    height: 140px;
    vertical-align: bottom;
    text-align: right;
}
.apppanel{
    
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    border: 2px solid goldenrod;
    border-radius: 5px;
    padding: 5px;
    font-family: Orbitron;
    font-size: medium;
}

input[type="checkbox"] {
    appearance: none; /* For modern browsers */
    vertical-align: middle;
    width: 25px;
    height: 25px;
    border: 2px solid black; /* Border styling */
    border-radius: 4px; /* Rounded corners */
    background-color: lightblue; /* Background color */
    cursor: pointer;
}
    input[type="checkbox"]:checked {
        background-color: orange; /* Change background when checked */
        border-color: red; /* Optional border color change */
    }

        input[type="checkbox"]:checked::before {
            content: 'X'; /* Unicode checkmark */
            color: black;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.menubutton {
    background-color: black;
    color: white;
    border: 2px solid goldenrod;
    border-radius: 5px;
    padding: 5px;
    font-family: Orbitron;
    font-size: medium;
    cursor: pointer;
    width:175px;
}

.menubuttonwide {
    background-color: black;
    color: white;
    border: 2px solid goldenrod;
    border-radius: 5px;
    padding: 5px;
    font-family: Orbitron;
    font-size: small;
    cursor: pointer;
    width:350px;
}
.menubuttondisabled {
    background-color: gray;
    color: black;
    border: 2px solid white;
    border-radius: 5px;
    padding: 5px;
    font-family: Orbitron;
    font-size: medium;
    cursor: pointer;
    width:175px;
    cursor: not-allowed;
}


.formtextinput {
    background-color: black;
    color: white;
    border: 2px solid goldenrod;
    border-radius: 5px;
    padding: 5px;
    font-family: BrunoAce;
    font-size: large;
    cursor: pointer;
    width:400px;
}

.menuimage{
    width: 350px;
    height: 350px;
    
}

/* Specific styles for the admin panel */
.adminheader {
    background-color: black;
    color: white;
    font-family: Orbitron;
    font-size: 2em;
    padding: 10px;
    text-align: center;
}   
/* Specific styles for the FullCalendar Control */
/* Change FullCalendar day header colors */
.fc .fc-col-header-cell {
    background: #222;
    color: gold;
}
.fc-list-event {
  border-bottom: 1px solid #ddd;
  padding: 8px;
  background-color: black;
  color: goldenrod
}
.fc-list-event-title {
  font-weight: bold;
  color:white;
}
.fc-list-day {
  background-color: white;
  font-weight: bold;
  padding: 10px;
  color: black;
}
.fc-event{
    cursor: pointer
}

.formlabel {
    font-family: Orbitron;
    color: white;
    font-size: medium;
    padding-top: 5px;
    text-align: right;
    padding-right: 10px;
    background-color: rgba(6, 153, 197, 0.623);
}