html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 0px;
    color: white;
}

.tablinks {
    color: silver;
    padding: 5px 10px;
    border: 1px solid #ddd;
    background-color: #09090d;
    box-shadow: none;
    text-shadow: none;
}
.tablinks:hover {
        background-color: black;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.tablinks:active {
        background-color: black; 
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); 
}
.w3-red, .w3-hover-red:hover {
    color: #fff !important;
    background-color: black !important
}

.custom-background {
    color: white;
    font-family: "SFProDisplay", sans-serif;
    background-color: #132344;
}

.custom-bg-image {
    background-image: url('../images/bg-mob.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

small {
    color: lightslategray;
}

.nav-link.btn-outline-primary {
    background-color: transparent;
    color: white;
}

.nav-link.active.btn-outline-primary {
    border: 0px solid #ccc;
    background-color: transparent;
    color: gray;
}

.nav-link.btn-outline-primary:hover {
    border: 1px solid #ccc;
    background-color: transparent;
    color: white;
}

.custom-tab-link {
    background-color: transparent;
    border: 1px solid;
}

    .custom-tab-link:hover {
        background-color: #132344;
        border: 1px solid #ccc;
    }

    .custom-tab-link.active {
        background-color: transparent;
    }

input[type="file"]::file-selector-button {
    color: white;
    background-color: transparent;
    padding: 10px 20px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.transparent-button {
    color: white;
    background-color: transparent;
    padding: 10px 20px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.narrow-footer {
    height: 75px; /* Adjust as needed */
    overflow: hidden; /* Prevent content from overflowing if height is too small */
    display: none;
}

/* FONTS */

@font-face {
  font-family: SFProDisplay;
  font-display: swap;
  src: url("../fonts/SFProDisplay-Bold.woff2") format("woff2"), url("../fonts/SFProDisplay-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: SFProDisplay;
  font-display: swap;
  src: url("../fonts/SFProDisplay-Medium.woff2") format("woff2"), url("../fonts/SFProDisplay-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: SFProDisplay;
  font-display: swap;
  src: url("../fonts/SFProDisplay-Regular.woff2") format("woff2"), url("../fonts/SFProDisplay-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

.w3-bar {
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}

.w3-center .w3-bar {
    display: inline-block;
    width: auto;
}

.w3-bar .w3-bar-item {
    padding: 8px 16px;
    float: left;
    width: auto;
    border: none;
    display: block;
    border: 1px solid #ccc;
}

.w3-bar .w3-dropdown-hover, .w3-bar .w3-dropdown-click {
    position: static;
    float: left;
}

.w3-bar .w3-button {
    white-space: normal;
    background-color: transparent;
}

.w3-black, .w3-hover-black:hover {
    color: #fff !important;
    background-color: transparent;
}

.w3-bar-block .w3-bar-item {
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    outline: 0
}

.w3-bar-block.w3-center .w3-bar-item {
    text-align: center
}

.w3-block {
    display: block;
    width: 100%
}

.w3-btn, .w3-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}

.w3-btn, .w3-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.w3-disabled, .w3-btn:disabled, .w3-button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

.w3-disabled *, :disabled * {
    pointer-events: none;
}

.w3-bar-block .w3-dropdown-hover .w3-button, .w3-bar-block .w3-dropdown-click .w3-button {
    width: 100%;
    text-align: left;
    padding: 8px 16px
}

.w3-bar .w3-button {
    white-space: normal
}

.w3-dropdown-hover.w3-mobile, .w3-dropdown-hover.w3-mobile .w3-btn, .w3-dropdown-hover.w3-mobile .w3-button, .w3-dropdown-click.w3-mobile, .w3-dropdown-click.w3-mobile .w3-btn, .w3-dropdown-click.w3-mobile .w3-button {
    width: 100%
}

.w3-button:hover {
    color: #000 !important;
    background-color: #ccc !important
}