/* *************************************************** */
/* Root */
/* *************************************************** */

html {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

body {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans', sans-serif;
}

.content {
    flex-grow: 1;
    padding: 20px;
}

.header {
    height: 60px;
    background-color: #182a42;
    display: flex;
    justify-content: left;
    padding: 10px;
    box-shadow: 0px 4px 5px #00000066;
    margin-bottom: 5px;
}

.footer {
    height: 100px;
    background-color: #182a42;
    box-shadow: 0px -4px 5px #00000066;
    margin-top: 5px;
}

/* *************************************************** */
/* Logo */
/* *************************************************** */

#logo_container {
    width: 75px;
    display: flex;
    justify-content: center;
}

#logo {
    object-fit: contain; 
    height: 100%;
    animation: logo_rotate 3s ease-in-out infinite, logo_electric 5s linear infinite;
}

@keyframes logo_rotate {
    0% { transform: rotate(0deg); }
    40% { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}

@keyframes logo_electric {
    0% { filter: brightness(1) blur(0); }
    15% { filter: brightness(1.5) blur(0); }
    15.5% { filter: brightness(10) blur(1px); }
    16% { filter: brightness(1) blur(0); }
    18% { filter: brightness(1) blur(0); }
    18.5% { filter: brightness(10) blur(1px); }
    19% { filter: brightness(1) blur(0); }
    21% { filter: brightness(1) blur(0); }
    21.5% { filter: brightness(10) blur(1px); }
    24% { filter: brightness(1) blur(0); }
}

/* *************************************************** */
/* Nav */
/* *************************************************** */

.mynav {
    margin: auto 10px;
    color: white;
}

.mynav:hover {
    color: #ff921e;
    text-decoration: underline wavy;
}

#mynav_2 {
    position: relative; 
    display: flex;
    align-content: center;
    flex-direction: column;
}

#mynav_2_content {
    display: none;
    position: absolute; 
    background-color: #213753; 
    box-shadow: 0px -4px 5px #00000066;
    z-index: 10;
    right: 0;
    top: 40px;
    padding: 10px;
}

#mynav_2:hover #mynav_2_content{
    display: flex;
    flex-direction: column;
}

#mynav_2_content .mynav{
    white-space: nowrap;
    text-align: right;
    margin: 7px 10px;
}

/* *************************************************** */
/* Layout */
/* *************************************************** */

.hidden{
    display: none !important;
}

.space_h_small { width: 6px; }
.space_v_small { height: 6px; }

.space_h_medium { width: 20px; }
.space_v_medium { height: 20px; }

.space_h_large { width: 50px; }
.space_v_large { height: 50px; }

.separator { background-color: #ffffff75; }
.separator.sep_v { height: 1px; }
.separator.sep_h { width: 1px; }
.separator.sep_small { margin: 3px; }

.boxed_A {
    border-radius: 3px;
    box-shadow: 0px 0px 3px #00000066;
    padding: 10px;
    margin: 5px;
}

.boxed_B {
    border-radius: 3px;
    box-shadow: 0px 0px 3px #00000066;
    padding: 5px;
    margin: 5px;
}

.boxed_0 {
    padding: 5px;
    margin: 5px;
}

.fit_content_width {
    width: fit-content;
}

.fit_content_height {
    height: fit-content;
}

.margin_auto {
    margin: auto;
}

.margin_auto_vert {
    margin-top: auto;
    margin-bottom: auto;
}

.flex_horz {
    display: flex;
    flex-direction: row;
    align-content: center;
}

.flex_center {
    justify-content: center;
}

.flex_grow_1 {
    flex-grow: 1;
}

.multiline {
    white-space: pre-line;
}

/* *************************************************** */
/* Misc */
/* *************************************************** */

#blocker {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00000030;
}

/* *************************************************** */
/* Label & input */
/* *************************************************** */

.label_A {
    width: 150px;
}

.label_B {
    width: 70px;
}

.label_color_good {
    color: #07e707;
}

.label_color_bad {
    color: #e90404;
}

.label_align_center {
    text-align: center;
}

.label_align_right {
    text-align: right;
}

.input_A_size {
    max-width: 300px;
}

/* *************************************************** */
/* Buttons */
/* *************************************************** */

.mybtn {
    border-radius: 4px;
    background-color: #ffa443;
    padding: 3px 8px;
    color: #000000bb;
    border: none;
    outline: none;
    box-shadow: 2px 2px 4px #00000088;
    font-weight: 600;
}

.mybtn:disabled {
    filter: grayscale(1) !important;
    background-color: #dbcbb9;
    outline: none;
}

.mybtn:focus {
    outline: none;
}

.mybtn:hover:not([disabled]) {
    outline: 2px #d1791c double;
}

.mybtn:active:not([disabled]) {
    outline: 2px #ee922f double;
}

.mytextbtn {
    background: none;
    padding: 4px 4px;
    color: #000000ff;
    border: none;
    outline: none;
    box-shadow: none;
    font-weight: 600;
}

.mytextbtn:disabled {
    color: #00000077;
    filter: grayscale(1) !important;
}

.mytextbtn:focus {
    outline: none;
}

.mytextbtn:hover:not([disabled]) {
    transform: scale(1.2);
}

.mytextbtn:active:not([disabled]) {
    transform: scale(1.1);
}


/* *************************************************** */
/* Popups */
/* *************************************************** */

#mypopup_blocker {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 7000;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00000030;
    cursor: pointer;
    backdrop-filter: blur(2px) grayscale(0.5);
}

#mypopup_container {
    z-index: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: auto;
}

.mypopup{
    background-color: white;
    display: none;
}

.mypopup[show]{
    display: block;
    animation: mypopup_showing 0.125s ease-out;
}

@keyframes mypopup_showing {
    0% { 
        transform: translateY(-100px) scale(0.75); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0px) scale(1); 
        opacity: 1;
    }
}