/* SF UI Font */
@font-face {
    font-family: 'SF UI Bold';
    src: local('San Francisco(SF UI) Display Bold'), local('San-Francisco(SF-UI)-Display-Bold'),
         url('/static/font/SFUIDisplay-Bold-548f317bb3fa541ef082229aafe9f5f4.woff2') format('woff2'),
         url('/static/font/SFUIDisplay-Bold-ad7991367ae9b7bd7d207bd09586a533.woff') format('woff'),
         url('/static/font/SFUIDisplay-Bold-a64a8504f458a8c9742930a9a4b9e3a0.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'SF UI';
    src: local('San Francisco(SF UI) Display Regular'), local('San-Francisco(SF-UI)-Display-Regular'),
         url('/static/font/SFUIDisplay-Regular-2a7d15a301e2045942980e8544ccfbb5.woff2') format('woff2'),
         url('/static/font/SFUIDisplay-Regular-766f96ed8bf5efc37825bf60fa04067f.woff') format('woff'),
         url('/static/font/SFUIDisplay-Regular-b8d6156c471232f96b10f3e36a54748f.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'SF UI Light';
    src: local('SF Pro Display Light'), local('SFProDisplay-Light'),
         url('/static/font/SFProDisplay-Light-0229ea633558c4c9c1fbc1c92e5a0de3.woff2') format('woff2'),
         url('/static/font/SFProDisplay-Light-ee7481b4e87fdad06d71aeac1d173821.woff') format('woff'),
         url('/static/font/SFProDisplay-Light-eebf2894b069d9cb93a29dab12aa31f5.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

/* Color palette */
:root {
    --main-color-darker: #292929;
    --pastel-blue: #7ca4d9;
    --pastel-green: #7fc99a;
    --pastel-orange: #fa927a;
    --pastel-yellow: #ffc087;
    --pastel-red: #ff7171;
    --gray: #bfbfbf;
}

/* Header & footer */
.header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;

    background-color: #2d2d2d;
    height: 83px;
    box-shadow: 0 3px 6px 3px rgba(0, 0, 0, 0.35);
    z-index: 10;
}
.padded-header {
    margin-bottom: 24px;
}

.footer {
    background-color: #292929;
    height: 100px;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
    box-shadow: rgba(0,0,0,0.2) 0 -5px 20px 0;
}
.footer a {
    margin: 12px;
}
.footer .logo-group {
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-attach-to-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

/* Logo */
.novologo {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    filter: grayscale(100%)
            invert(1) brightness(1.3);
}

body {
    margin: 0;
    padding: 0;
    background-color: #383838;
    height: 100%;
}
*:not(svg, path), p {
    color: white;
    font-family: 'SF UI', sans-serif;
}

/* Inputs */
input[type="text"]:not(.clickgui input),
input[type="password"], input[type="email"], select {
    width: 300px;
    height: 36px;

    color: white;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 5px;
    margin-bottom: 5px;
    padding: 0;

    text-indent: 10px;
    outline-width: 0;
}
.button {
    position: relative;
    margin-top: 5px;
    text-align: center;
    padding: 10px 20px;
    background-color: #404040;
    box-shadow: 0 5px 3px rgba(30, 30, 30, 0.1);
    border-radius: 5px;
    cursor: pointer;
    transition: filter 0.5s;
}
.button:hover {
    filter: brightness(1.1);
}
.button.disabled {
    pointer-events: none;
}
a.button {
    color: white !important;
}

a {
    text-decoration: none;
    color: var(--pastel-blue);
}
.header a {
    color: white;
}
.h-24 {
    font-size: 24px;
    font-family: 'SF UI Bold', sans-serif;
    margin-bottom: 5px;
    margin-top: 5px
}
.h-36 {
    font-size: 36px;
    font-family: 'SF UI Bold', sans-serif;
}
.t-24   { font-size: 24px; }
.t-20   { font-size: 20px; }
.t-16   { font-size: 16px; }
.t-12   { font-size: 12px; }
.t-bold { font-family: 'SF UI Bold', sans-serif; }

/* Flexbox */
.flex-column {
    display: flex !important;
    flex-direction: column;
}
.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-centered {
    align-items: center;
    text-align: center;
}
.inline-flex {
    display: inline-flex;
}
.flex-wrap {
    flex-wrap: wrap;
    gap: 5px;
}

/* Scroll bars */
*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #303030;
    box-shadow: inset 0 0 6px #303030;;
    border-radius: 10px;
    background-color: #292929;
}
*::-webkit-scrollbar {
    width: 12px;
    background-color: transparent;
}
*::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #343434;
}

/* VanillaToasts */
.vanillatoasts-toast { background-color: #1f1f1f !important; }
.vanillatoasts-title { font-family: 'SF UI Bold', sans-serif; }
.toasts-top-right { z-index: 100; }

/* Font Awesome */
i.inline-icon { float: left; }
.fas, svg { margin-right: 5px; }

/* Icon layout shift fixes */
.fas-11x16 { width: 11px; height: 16px; }
.fas-14x16 { width: 14px; height: 16px; }
.fas-16x16 { width: 16px; height: 16px; }
.fas-18x16 { width: 18px; height: 16px; }
.fas-20x16 { width: 20px; height: 16px; }

/* JQuery UI changes */
.ui-selectmenu-button {
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    background-color: transparent !important;
}
.ui-selectmenu-icon {
    width: 16px !important;
    color: white;
}
.ui-selectmenu-icon:hover {
    color: white;
}
.ui-selectmenu-text, .ui-menu-item-wrapper {
    font-size: 14px !important;
}
ul.ui-corner-bottom {
    background: none;
}
.ui-menu-item {
    background-color: #343434;
    padding: 5px;
}
.ui-widget.ui-widget-content {
    border-top: none !important;
}
li.ui-menu-item:hover {
    background-color: #303030 !important;
}
.ui-menu-item-wrapper.ui-state-active {
    border: none !important;
    background: none !important;
    margin: 0 !important;
}