/* Global styles for the site */
body {
    font-family: 'Sansation', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 15px;
    background-color: #333;
    color: #bebebe;
    margin: 0;
    padding: 10px;
    text-align: left;
}
a, a:visited {
    color: #4caf50;
    text-decoration: none;
}
a:active, a:hover {
    text-decoration: underline;
}
h1, h2 {
    font-size: 1.25em;
    font-weight: 500;
    margin: 0 0 20px 0;
    color: #e1e1e1;
}
h2 {
    font-size: 1em;
}

/* Single element styles */
#header {
    margin-bottom: 10px;
}
#header-logo img {
    height: 60px;
    width: auto;
}
#header-title .title {
    font-size: 1.5em;
    font-weight: 500;
    margin: 0;
}
#header-title .subtitle {
    font-size: .9em;
    color: #6d6d6d;
    font-style: italic;
    margin: 0;
}
#main {
    padding: 0 10px;
}
#footer {
    margin-top: 10px;
    font-size: 0.9em;
    color: #9e9e9e;
}

/* Layout and structure */
.center-content {
    max-width: 900px;
    margin: 0 auto;
}
.divider {
    border-top: 1px solid #555;
    margin: 0;
    padding: 0;
}
.page-section {
    margin-bottom: 40px;
}
.column {
    float: left;
    max-width: 400px;
    padding: 0 20px 20px 0;
}
.nav-menu {
    margin: 5px 0 20px 0;
}
.nav-menu a {
    margin-right: 15px;
}
.nav-menu a:hover {
    text-decoration: underline;
}
.box {
    border: 1px solid #4e4e4e;
    border-radius: 5px;
    background-color: #3e3e3e;
}
.box-header {
    padding: 5px;
    background-color: #444;
    border-bottom: 1px solid #4e4e4e;
}
.box-header > .icon {
    font-size: 1.25em;
}
.box-body {
    padding: 10px;
}
.box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Utility classes */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.flex-container.middle {
    align-items: center;
}
.flex-container.top {
    align-items: flex-start;
}
.flex-container.bottom {
    align-items: flex-end;
}
.flex-container.center {
    justify-content: center;
}
.flex-container.grow > div {
    flex-grow: 1;
}
.hide {
    display: none;
}
.inline-block {
    display: inline-block;
}
.clear {
    clear: both;
}
.material-symbols-outlined {
    vertical-align: text-bottom;
}

/* Form styles */
.form-section {
    margin-bottom: 20px;
}
.form-section label {
    display: block;
    margin-bottom: 5px;
}
.form-section input[type="text"], .form-section input[type="number"], .form-section input[type="email"], .form-section textarea, .form-section select {
    box-sizing: border-box;
    padding: 8px;
    margin-bottom: 5px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #444;
    color: #fff;
    width: 100%;
}
.form-section .note {
    font-size: 0.8em;
    color: #9e9e9e;
}
form button[type="submit"] {
    background-color: #4caf50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
form button[type="submit"]:hover {
    background-color: #45a049;
}
form button[type="submit"] .spinner {
    /* Size and shape */
    width: 8px;
    height: 8px;
    border-radius: 50%;

    /* The track (light gray) and the moving indicator (blue) */
    border: 4px solid #358a38;
    border-top-color: #ffffff;

    /* Smooth infinite rotation */
    animation: spin 1s linear infinite;
}

/* Pure CSS Spinner */
.loading-spinner {
  /* Size and shape */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  
  /* The track (light gray) and the moving indicator (blue) */
  border: 8px solid #6f7787;
  border-top-color: #4b4e55;
  
  /* Smooth infinite rotation */
  animation: spin 1s linear infinite;
}

/* Keyframe definition to rotate the element 360 degrees */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}