/*------------------------------------*\
 #Developed by Toolkit Systems
/*------------------------------------*/

/*
Breakpoints used for all publicly accessible content

@media screen and (max-width:  879px)                         { nav { height: 30px; }}
@media screen and (min-width:  880px) and (max-width: 1750px) { nav { height: 30px; }}

*/

/*------------------------------------*\
/* SECTION: Variables */
/*------------------------------------*/

:root {
    --primary: #0090FC;
    --primary_hover: #0090FC;
    --primary_light: #004579;
    --secondary: #FCB741;
    --tertiary: #9B9B9B;
    --text: #fff;
    --text_light: #bbbbbb;
    --text_inverted: #252525;
    --text_on_primary: var(--text);
    --text_on_secondary: var(--text);
    --bg: #061829;
    --bg1: #03111d;
    --bg2: #000;
    --bg_input: rgba(0, 0, 0, .7);
    --bg_modal: rgb(255, 255, 255, 75%);
    --bg_modal_box: #fff;
    --success: #00D10A;
    --error: #FF0000;
    --warning: #E8940F;
    --notification: #0090FC;
    --darker: rgba(0, 0, 0, 0.2);
    --lighter: rgba(255, 255, 255, 0.2);
    --secondary_gradient: linear-gradient(to right, rgba(255,190,21,0) 0%, rgba(255,190,21,1) 33%, rgba(255,190,21,1) 66%, rgba(255,190,21,0) 100%);
    --item_gradient: linear-gradient(to right, rgba(1, 124, 229, 0.3) 20% , rgba(1, 124, 229, 0.03) 100%);
    --item_border: 5px solid var(--primary);

    --device-width: 400px;


    --border_radius: 5px;

    /**
    * header and footer height
    */
    --input_width: 300px;
    --input_height: 45px;

    --button_width: 200px;
    --button_height: 40px;

    /**
    * font sizes for h elements
    */
    --h1: 2.0rem;
    --h2: 1.5rem;
    --h3: 1.3rem;
    --h4: 1.15rem;

    --textshadow: 2px 2px 0.5px #000000;
    --textshadow_2: 3px 3px 0.8px #000000;

    --z1: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    --z2: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --z3: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
    --z4: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
    --z5: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}


/*------------------------------------*\
/* Scrollbar Chrome */
/*------------------------------------*/
::-webkit-scrollbar-button{
    display: none;
    height: 13px;
    border-radius: 0px;
    background-color: var(--primary);
}
::-webkit-scrollbar-button:hover{
    background-color: var(--primary);
}
::-webkit-scrollbar-thumb{
    background-color: var(--primary);
}
::-webkit-scrollbar-thumb:hover{
    background-color: var(--primary);
}
::-webkit-scrollbar-track{
    background-color: var(--bg);
}
::-webkit-scrollbar-track:hover{
    background-color: var(--bg);
}
::-webkit-scrollbar{
    width: 6px;
}
/*------------------------------------*\
/* SECTION: Global Settings */
/*------------------------------------*/

html {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    color: var(--text);
    box-sizing: border-box;
    line-height: 1.5;
    height: 100%;
}

/**
* Border-Box everything!
*/
html * {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-flow: column;
    height: 100vh;
    width: 100%;
    align-items: center;
    background-color: var(--bg);
}

.background_image {
    width: 100%;
    height: calc(100% - 170px);
    top: 170px;
    background-image: url("../img/bg.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: fixed;
    z-index: -30;
}

@media screen and (max-width:  879px)                         { .background_image { background-size: cover; }}
@media screen and (min-width:  880px) and (max-width: 1750px) { .background_image { background-size: cover; }}

main {
    width: auto;
    margin: 40px auto 0px;

    /**
    * Main Grid
    */
    display: grid;
    grid-template-columns: repeat(4, 400px);
    grid-column-gap: 40px;
    grid-row-gap: 30px;
}

@media screen and (max-width:  879px)                         { main { grid-template-columns: repeat(1, minmax(300px, 400px)); padding: 10px; margin: 0px; max-width: 420px; }}
@media screen and (min-width:  880px) and (max-width: 1750px) { main { grid-template-columns: repeat(2, 400px); }}

.filler {
    flex: 1;
}

form[class="grid"] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: inherit;
    grid-column-gap: inherit;
    grid-row-gap: inherit;
}

a {
    text-decoration: none;
    color: var(--text);
}

a.link {
    color: var(--secondary);
}

h1 {
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

legend {
    padding: 10px;
}

fieldset > input {
    margin-bottom: 15px;
}

.page_headline {
    grid-column: 1 / -1;
    line-height: 2rem;
}

/*------------------------------------*\
/* SECTION: Helper */
/*------------------------------------*/

/**
* Hidden
*/
.hidden {
    display: none !important;
    visibility: hidden !important;
}

/**
* Center Flexbox
*/

.center_flex {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

.filler {
    flex: 1;
}

.mt10 {
    margin-top: 10px;
}

/**
* Center Grid
*/

.center_grid {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}


/**
* Drop-Shadow
*/

.z1 {
    box-shadow: var(--z1);
}

.z2 {
    box-shadow: var(--z2);
}

.z3 {
    box-shadow: var(--z3);
}

.z4 {
    box-shadow: var(--z4);
}

.z5 {
    box-shadow: var(--z5);
}

/**
* Drop Shadow with hover animation
*/
.hoverable
{
    -webkit-transition: -webkit-box-shadow .25s, margin-top .25s, margin-bottom .25s;
    transition: box-shadow .25s, margin-top .25s, margin-bottom .25s, -webkit-box-shadow .25s;
}

@media (pointer:fine)
{
    /**
    * Hover animation only visible on devices with expected fine human interface device (mouse)
    */
    .hoverable:hover
    {
        -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin-top: -2px;
        margin-bottom: 2px;
    }
}

/**
* Text Align
*/

.text_align_left
{
    text-align: left;
}
.text_align_center
{
    text-align: center;
}
.text_align_right
{
    text-align: right;
}

/**
* Width 100%
*/

.full_width {
    width: 100%;
}

/**
* Font Weight
*/

.fw_400 {
    font-weight: 400;
}

.fw_500 {
    font-weight: 500;
}

.fw_700 {
    font-weight: 700;
}

/* Hide elements on smaller Breakpoints */
@media screen and (max-width:  879px)                         { .hide_mobile { display: none; visibility:hidden; }}
@media screen and (min-width:  880px) and (max-width: 1750px) { .hide_tablet { display: none; visibility:hidden; }}

/* Show hide password */
.show_password {
    position: relative;
}
.show_password_icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M569.354 231.631C512.969 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-75.162 0-136-60.827-136-136 0-75.162 60.826-136 136-136 75.162 0 136 60.826 136 136 0 75.162-60.826 136-136 136zm104-136c0 57.438-46.562 104-104 104s-104-46.562-104-104c0-17.708 4.431-34.379 12.236-48.973l-.001.032c0 23.651 19.173 42.823 42.824 42.823s42.824-19.173 42.824-42.823c0-23.651-19.173-42.824-42.824-42.824l-.032.001C253.621 156.431 270.292 152 288 152c57.438 0 104 46.562 104 104z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 20px;
    height: 20px;
    position: absolute;
    filter: invert(.7);
    top: 38px;
    right: -5px;
    display: block;
    z-index: 99999999;
}
.show_password_active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M286.693 391.984l32.579 46.542A333.958 333.958 0 0 1 288 440C168.19 440 63.031 376.051 6.646 280.369a47.999 47.999 0 0 1 0-48.739c24.023-40.766 56.913-75.775 96.024-102.537l57.077 81.539C154.736 224.82 152 240.087 152 256c0 74.736 60.135 135.282 134.693 135.984zm282.661-111.615c-31.667 53.737-78.747 97.46-135.175 125.475l.011.015 41.47 59.2c7.6 10.86 4.96 25.82-5.9 33.42l-13.11 9.18c-10.86 7.6-25.82 4.96-33.42-5.9L100.34 46.94c-7.6-10.86-4.96-25.82 5.9-33.42l13.11-9.18c10.86-7.6 25.82-4.96 33.42 5.9l51.038 72.617C230.68 75.776 258.905 72 288 72c119.81 0 224.969 63.949 281.354 159.631a48.002 48.002 0 0 1 0 48.738zM424 256c0-75.174-60.838-136-136-136-17.939 0-35.056 3.473-50.729 9.772l19.299 27.058c25.869-8.171 55.044-6.163 80.4 7.41h-.03c-23.65 0-42.82 19.17-42.82 42.82 0 23.626 19.147 42.82 42.82 42.82 23.65 0 42.82-19.17 42.82-42.82v-.03c18.462 34.49 16.312 77.914-8.25 110.95v.01l19.314 27.061C411.496 321.2 424 290.074 424 256zM262.014 356.727l-77.53-110.757c-5.014 52.387 29.314 98.354 77.53 110.757z'/%3E%3C/svg%3E");

}

/*------------------------------------*\
/* SECTION: Loader */
/*------------------------------------*/

#loader {
  position: fixed;
  bottom: var(--footer);
  right: 5px;
  width: 55px;
  height: 55px;
  display: none;
  visibility: hidden;
}

#loader:after {
  content: " ";
  display: block;
  width: 30px;
  height: 30px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid var(--secondary);
  border-color: var(--secondary) transparent var(--primary) transparent;
  animation: loader 1.2s linear infinite;
}

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


/*------------------------------------*\
/* SECTION: Return Messages */
/*------------------------------------*/

.return_message {
    position: fixed;
    top: 30px;
    left: 30px;
    width: 320px;
    z-index: 100000;
}

.return_message_box {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    z-index: 100;
    left: -600px;
    border-bottom: 10px solid var(--bg);
    box-shadow: var(--z4);
    background-color: var(--bg1);
}

.return_message_close {
    cursor: pointer;
    display: flex;
    place-items: center;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 15px;
}

.return_message_close:hover {
    color: var(--secondary);
}

.return_message_message {
    padding:20px;
    width: 300px;
}

.return_message_error {
    border-bottom-color: var(--error);
}

.return_message_warning {
    border-bottom-color: var(--warning);
}

.return_message_notification {
    border-bottom-color: var(--notification);
}

.return_message_success {
    border-bottom-color: var(--success);
}


/*------------------------------------*\
/* SECTION: Checkbox */
/*------------------------------------*/

input[type='checkbox'] {
    transform: scale(1.5);
    margin-left: 3px;
    margin-right: 8px;
}

input[type='radio'] {
    transform: scale(1.5);
}


/*------------------------------------*\
/* SECTION: Input */
/*------------------------------------*/

.field_group_header {
    color: var(--text_light);
    max-width: 100%;
}

.field {
    display: flex;
    flex-flow: column;
}

label {
    color: var(--primary);
}

.input {
    border: .5px solid transparent;
    background-color: var(--bg_input);
    color: var(--text);
    padding: 10px;
}

.input:focus {
    border-color: var(--primary_light);
    outline: none;
}

.input.error {
    border-color: var(--error);
}

.input.success {
    border-color: var(--success);
}

.input_info {
    color: var(--text_light);
    font-size: 0.75rem;
    padding-left: 10px;
    min-height: 28px;
}

.input_info.error {
    color: var(--error);
}

.input_submit {
    margin-top: 30px;
}

/*------------------------------------*\
/* SECTION: Textarea */
/*------------------------------------*/

textarea:disabled, input:disabled {
    background-color: var(--bg);
}

textarea {
    width: 100%;
    padding: 10px;
    max-width: 100%;
    margin: 10px 0px;
}

/*------------------------------------*\
/* SECTION: Dropdown */
/*------------------------------------*/

select {
    border: .5px solid transparent;
    background-color: var(--bg_input);
    color: var(--text);
    padding: 10px;
}

select:focus {
    border-color: var(--primary_light);
    outline: none;
}

select.error {
    border-color: var(--error);
}

select.success {
    border-color: var(--success);
}


/*------------------------------------*\
/* SECTION: Buttons */
/*------------------------------------*/

.button {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    color: var(--text_on_primary);
    border-width: 0px;
    padding: 10px;
    height: var(--button_height);
    cursor: pointer;
    box-shadow: var(--z1);
    min-width: var(--button_width);
    line-height: 1rem;
}

.button:hover {
    background-color: var(--primary_hover);
}

.button.plain {
    background-color: var(--secondary);
    color: var(--text_light);
}

.button.plain:hover {
    background-color: var(--secondary);
    border-color: var(--text_light);
    cursor: default;
}

.button_container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
    grid-auto-rows: var(--button_height);
    justify-content: flex-end;
    align-items: center;
    grid-column: 1 / -1;
}

.button_container.center {
    justify-content: center;
}

.button_container.left {
    justify-content: flex-start;
}


/*------------------------------------*\
/* SECTION: Box */
/*------------------------------------*/

.box_outer {
    --border_radius: 2px;
}

.span_2 {
    grid-column: span 2;
}
@media screen and (max-width:  879px)                         { .span_2 { grid-column: span 1; }}

.span_2_static {
    grid-column: span 2;
}

.box_outer_headline {
    color: var(--secondary);
    text-shadow: var(--textshadow);
}

.box {
    border-style: solid;
    border-width: 30px;
    border-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 88 88' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;'%3E%3Crect id='ArtBoard1' x='0' y='0' width='87.028' height='87.014' style='fill:none;'/%3E%3CclipPath id='_clip1'%3E%3Crect x='0' y='0' width='87.028' height='87.014'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23_clip1)'%3E%3Crect x='1.524' y='1.512' width='84' height='84' style='fill-opacity:0.298039;'/%3E%3Cpath d='M1.515,15.512l0,-14l14,0' style='fill:none;stroke:%23017ce5;stroke-width:3px;'/%3E%3Cpath d='M71.524,1.62l14,0l0,14' style='fill:none;stroke:%23017ce5;stroke-width:3px;'/%3E%3Cpath d='M85.524,71.512l0,14l-14,0' style='fill:none;stroke:%23017ce5;stroke-width:3px;'/%3E%3Cpath d='M15.524,85.512l-14,0l0,-14' style='fill:none;stroke:%23017ce5;stroke-width:3px;'/%3E%3Cpath d='M27.19,1.512l33,0' style='fill:none;stroke:%23017ce5;stroke-width:0.25px;'/%3E%3Cpath d='M27.19,85.512l33,0' style='fill:none;stroke:%23017ce5;stroke-width:0.25px;'/%3E%3Cpath d='M1.506,27.084l0,33' style='fill:none;stroke:%23017ce5;stroke-width:0.25px;'/%3E%3Cpath d='M85.524,27.066l0,33' style='fill:none;stroke:%23017ce5;stroke-width:0.25px;'/%3E%3C/g%3E%3C/svg%3E");
    border-image-repeat: repeat;
    border-image-slice: 40% fill;
    position: relative;
}

.box_btn {
    display: block;
    position: absolute;
    background-color: var(--primary);
    font-size: 0.6rem;
    padding: 2px 7px;
    cursor: pointer;
    border-radius: var(--border_radius);
    top: 0px;
    right: 0px;
}

.box_text_info {
    color: var(--text_light);
    font-size: 0.7rem;
}

.box_text {
    margin-bottom: 10px;
    min-height: 27px;
}

.box_item_container {
    margin-left: -15px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
}

.box_item {
    border-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 467 21' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Crect id='ArtBoard1' x='0' y='0' width='466.162' height='20.814' style='fill:none;'/%3E%3CclipPath id='_clip1'%3E%3Crect x='0' y='0' width='466.162' height='20.814'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23_clip1)'%3E%3Crect x='0' y='0' width='0.978' height='4.66' style='fill:%23017ce5;'/%3E%3Crect x='0' y='16.154' width='0.978' height='4.66' style='fill:%23017ce5;'/%3E%3Crect x='0.978' y='19.836' width='465.184' height='0.978' style='fill:url(%23_Linear2);'/%3E%3Crect x='0.978' y='0' width='465.184' height='0.978' style='fill:url(%23_Linear3);'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='_Linear2' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='matrix(465.184,-7.05167e-16,2.05275e-16,0.977655,0.977655,20.325)'%3E%3Cstop offset='0' style='stop-color:%23017ce5;stop-opacity:1'/%3E%3Cstop offset='1' style='stop-color:%23017ce5;stop-opacity:0'/%3E%3C/linearGradient%3E%3ClinearGradient id='_Linear3' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='matrix(465.184,-7.05167e-16,2.05275e-16,0.977655,0.977655,0.488828)'%3E%3Cstop offset='0' style='stop-color:%23017ce5;stop-opacity:1'/%3E%3Cstop offset='1' style='stop-color:%23017ce5;stop-opacity:0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");

    border-style: solid;
    border-width: 25px;
    border-image-repeat: stretch;
    border-image-slice: 75% 40% 75% 5%;
    position: relative;
    /* margin-left: -15px; */
    margin-right: -15px;
    margin-bottom: 10px;
}

.box_item_content {
    --height: 50px;

    border-left: 5px solid var(--primary);
    min-height: 50px;
    margin-top: -20px;
    margin-left: -20px;
    margin-bottom: -20px;
    padding-left: 8px;
    background: linear-gradient(to right, rgba(1, 124, 229, 0.3) 0% , rgba(1, 124, 229, 0.0) 100%);
}

/*------------------------------------*\
/* SECTION: Edit Modal */
/*------------------------------------*/

.edit_modal {
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg_input);
    z-index: 999;
    display: none;
    visibility: hidden;
}

.modal_grid {
    display: grid;
    place-items: center;
    height: 100%;
}

.modal_grid > .box_outer {
    width: 400px;
    max-height: 90%;
}

.box_modal {
    padding-top: 10px;
    border-style: solid;
    border-width: 30px;
    border-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 88 88' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;'%3E%3Crect id='ArtBoard1' x='0' y='0' width='87.028' height='87.014' style='fill:none;'/%3E%3CclipPath id='_clip1'%3E%3Crect x='0' y='0' width='87.028' height='87.014'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23_clip1)'%3E%3Crect x='1.524' y='1.512' width='84' height='84' style='fill:%23182029;'/%3E%3Cpath d='M1.515,15.512l0,-14l14,0' style='fill:none;stroke:%23017ce5;stroke-width:3px;'/%3E%3Cpath d='M71.524,1.62l14,0l0,14' style='fill:none;stroke:%23017ce5;stroke-width:3px;'/%3E%3Cpath d='M85.524,71.512l0,14l-14,0' style='fill:none;stroke:%23017ce5;stroke-width:3px;'/%3E%3Cpath d='M15.524,85.512l-14,0l0,-14' style='fill:none;stroke:%23017ce5;stroke-width:3px;'/%3E%3Cpath d='M27.19,1.512l33,0' style='fill:none;stroke:%23017ce5;stroke-width:0.25px;'/%3E%3Cpath d='M27.19,85.512l33,0' style='fill:none;stroke:%23017ce5;stroke-width:0.25px;'/%3E%3Cpath d='M1.506,27.084l0,33' style='fill:none;stroke:%23017ce5;stroke-width:0.25px;'/%3E%3Cpath d='M85.524,27.066l0,33' style='fill:none;stroke:%23017ce5;stroke-width:0.25px;'/%3E%3C/g%3E%3C/svg%3E");
    border-image-repeat: repeat;
    border-image-slice: 40% fill;
    position: relative;
}

.box_modal > .box_content {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--bg1);
    max-height: 80vh;
    padding-right: 10px;
}

.box_modal > .box_btn_row {
    position: relative;
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.box_save {
    position: relative;
    background-color: var(--primary);
    font-size: 0.6rem;
    padding: 2px 7px;
    cursor: pointer;
    border-radius: var(--border_radius);
}


/*------------------------------------*\
/* SECTION: Header */
/*------------------------------------*/

header {
    width: 100%;
    z-index: 10;
    padding: 10px 0px;
    flex-shrink: 0;
    background-color: var(--bg);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    --margin: 15px;
    --modifier: calc(1749px - 100%);
    margin: calc(var(--margin) * -1) 0px;
}

header > * {
    flex-grow: 1;
    flex-basis: calc(var(--modifier) * 999);
    margin: var(--margin) 0px;
}

.header_logo_container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

@media screen and (max-width:  1749px) { .header_logo_container { order: -1; }}

.header_logo {
    width: 460px;
    max-width: 100%;
}

.header_nav_container {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(5, minmax(80px, auto));
    justify-content: center;
    align-items: center;
    min-width: 550px;
    flex: 1;
    max-width: 100%;
}

@media screen and (max-width:  550px) { .header_nav_container { grid-template-columns: repeat(2, minmax(80px, auto)); min-width: 300px; }}

.header_nav_container > a {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    width: 80px;
    height: 65px;
    position: relative;
    box-sizing: border-box;
    background-color: var(--bg2);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 8px;
    box-shadow: var(--z3);
    text-transform: uppercase;
    font-size: 11px;
    padding-top: 5px;
    font-weight: bold;
    letter-spacing: 0.3px;
    color: var(--text_light);
}

.header_nav_container > a:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background: linear-gradient(to right, #656464, #B5B5B4, #656464);
}

.header_nav_button_light {
    width: 55px;
    height: 8px;
    background-color: var(--text_light);
    margin-bottom: 10px;
}

.header_nav_button_light.active {
    background-color: #00FF0C;
}

.header_nav_line {
    height: 1px;
    width: 100%;
    background: rgba(255,190,21,0);
    background: var(--secondary_gradient);
    grid-column: 1 / -1;
}

@media screen and (max-width:  1099px) { .header_nav_line_hide { display: none; visibility: hidden; }}


/*------------------------------------*\
/* SECTION: Footer */
/*------------------------------------*/

footer {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    font-size: 0.8rem;
    margin-top: 40px;
    padding-bottom: 10px;
}

.link_container a {
    color: var(--text_light);
    margin: 0px 15px;
}

.link_container a:hover {
    color: var(--text);
}


/*------------------------------------*\
/* SECTION: Checkable */
/*------------------------------------*/

.checkable_container {
    display: grid;
    grid-row-gap: 10px;
    grid-auto-rows: max-content;
}

.checkable_sorting_header {
    color: var(--text_light);
    max-width: 100%;
}

.checkable {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    box-shadow: var(--z1);
    padding: 10px;
    cursor: pointer;
}

.checkable.formlayout {
    margin-bottom: 28px;
}

.checkable_text {
    max-width: 100%;
}

.checkable:hover {
    background-color: var(--bg1);
}

.checkable:active {
    background-color: var(--darker);
}

.checkable_checkbox {
    font-size: 1.3rem;
    margin-right: 20px;
    margin-left: 5px;
    color: var(--primary);
}

.checkbox_svg {
    width: 25px;
    height: 25px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='1.414'%3E%3Cpath d='M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z' fill='var(--primary)' fill-rule='nonzero'/%3E%3C/svg%3E");
}

.checkbox_svg.checked {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='1.414'%3E%3Cpath d='M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z' fill='var(--primary)' fill-rule='nonzero'/%3E%3C/svg%3E");
}


/*------------------------------------*\
/* SECTION: Auth */
/*------------------------------------*/

.auth_box {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    grid-column: 1 / -1;
    line-height: 1.6rem;
}

.auth_box form {
    max-width: 400px;
}

.auth_headline {
    font-size: var(--h2);
    margin-top: 0px;
}

.auth_link {
    font-size: 0.9rem;
    color: var(--text_light);
    margin-top: 20px;
}

.auth_link:hover {
    font-size: 0.9rem;
    filter: brightness(1.3);
}

.auth_link span {
    color: var(--primary);
}

.auth_explanation {
    font-size: 0.9rem;
    max-width: 300px;
    text-align: center;
    margin-top: 0px;
}


/*------------------------------------*\
/* SECTION: Conversational */
/*------------------------------------*/

.con_grid_container_outer {
    grid-column: 1 / -1;
    place-self: center;
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: calc(100vh - 80px);
}

@media screen and (max-width:  879px) { .con_grid_container_outer { all: unset; }}

.con_grid_container {
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

@media screen and (max-width:  879px) { .con_grid_container { all: unset; }}

.con_grid_container::-webkit-scrollbar {
    display: none;
}

@media screen and (max-width:  879px) { .con_grid_container::-webkit-scrollbar { all: unset; }}

.con_grid {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    align-content: center;
    grid-gap: 20px;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: center;
}

@media screen and (max-width:  879px) { .con_grid { all: unset; }}

.con_active_item {
    all: unset;
    display: grid;
    place-items: center;
    max-width: 600px;
    text-align: center;
    grid-gap: 20px;
}

.con_active_item_header {
    font-size: var(--h2);
}

.con_active_item_description {
    color: var(--text_light);
}

.con_input {
    width: var(--input_width);
    height: var(--input_height);
    background-color: var(--bg_input);
    outline: none;
    border: none;
    border-bottom: 2px solid var(--text_light);
    padding: 10px;
    color: var(--text);
    text-align: center;
}

select.con_input {
    text-align-last: center;
    text-align: center;
}

.con_input_label_text {
    color: var(--primary);
}

.con_input_group {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-bottom: 40px;
}

.con_input_group > .error {
    margin-top: 20px;
    color: var(--error);
}

.con_input:active {
    border-bottom-color: var(--primary);
}

.con_input:focus {
    border-bottom-color: var(--primary);
}

.con_next {
    margin-top: 40px;
}

.con_previous {
    cursor: pointer;
    padding: 20px;
}


@media screen and (max-width:  879px) {
    .con_mobile_text {
        font-size: 0.9rem;
    }

    .con_active_item_header {
        margin-top: 60px;
    }

    .con_mobile_submit {
        margin: auto;
        margin-bottom: 100px;
    }

    .remove_con_mobile {
        visibility: hidden;
        display: none;
    }
}

@media screen and (min-width:  880px) { .show_con_mobile { visibility: hidden; display: none; }}


/*------------------------------------*\
/* SECTION: Pilot Dashboard */
/*------------------------------------*/

.pilot_db_row_1 {
    height:394px;
}

.pilot_db_row_2 {
    height:256px;
}


/* Pilot Licence */

.pilot_db_licence_main {
    border-left: var(--item_border);
    background: var(--item_gradient);
    margin-top: -10px;
    padding-bottom: 15px;
}

.pilot_db_licence_text {
    font-size: 3rem;
    text-align: center;
    text-shadow: var(--textshadow_2);
}

.pilot_db_licence_line {
    background: var(--secondary_gradient);
    height: 1px;
    width: 60%;
    margin-left: 20%;
    margin-top: -10px;
}

.pilot_db_licence_note {
    text-align: center;
    font-size: 0.8rem;
    text-shadow: var(--textshadow);
    padding-top: 5px;
}

.pilot_db_licence_container {
  display: flex;
  display: -webkit-flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin-top: 10px;
}

.pilot_db_licence_item {
    border-left: var(--item_border);
    background: var(--item_gradient);
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-self: center;
    text-shadow: var(--textshadow);
    font-size: 1.2rem;
    padding-top: 7px;
    color: var(--text_light);
    opacity: 0.3;
}
.pilot_db_licence_item.active {
    color: var(--primary_text);
    opacity: 1;
}

/* Telex */
.telex_box {
    margin-top: 13px;
}

.pilot_db_telex_container {
    display: flex;
    display: -webkit-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.pilot_db_telex_item {
    border-left: var(--item_border);
    background: var(--item_gradient);
    width: 100px;
    height: 70px;
}

.pilot_db_telex_item_number {
    text-align: center;
    text-shadow: var(--textshadow);
    font-size: 1.4rem;
}

.pilot_db_telex_item_line {
    background: var(--secondary_gradient);
    height: 1px;
    width: 60%;
    margin-left: 20%;
}

.pilot_db_telex_item_note {
    text-align: center;
    font-size: 0.8rem;
    text-shadow: var(--textshadow);
    padding-top: 5px;
}

/* Statistics */

.pilot_db_statistics_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: ". ." ". .";
    grid-gap: 10px;
}

.pilot_db_statistics_item {
    border-left: var(--item_border);
    background: var(--item_gradient);
    padding-bottom: 10px;
}

.pilot_db_statistics_item_number {
    text-align: center;
    text-shadow: var(--textshadow);
    font-size: 2.2rem;
}

.pilot_db_statistics_item_line {
    background: var(--secondary_gradient);
    height: 1px;
    width: 60%;
    margin-left: 20%;
}

.pilot_db_statistics_item_note {
    text-align: center;
    font-size: 0.7rem;
    text-shadow: var(--textshadow);
    padding-top: 5px;
}


/* Typerating */

.pilot_db_typerating_box {
    position: relative;
}

.pilot_db_typerating_manufacturer {
    font-size: 0.7rem;
    color: var(--text_light);
}

.pilot_db_typerating_icao {
    color: var(--primary);
    position: absolute;
    top: 2px;
    right: 5px;
    font-size: 0.7rem;
}

/* Logbook */

.pilot_db_logbook_header {
    display: grid;
    grid-template-columns: 10fr 10fr 10fr 10fr 8fr 8fr 10fr 7fr 7fr 7fr 7fr;
    grid-template-rows: 1fr 1fr;
    margin-top: -15px;
    margin-right: 15px;
    text-align: center;
}
@media screen and (max-width:  879px) { .pilot_db_logbook_header { margin-top: 0px; }}


.pilot_db_logbook_header_item.main_header {
    color: var(--primary);
    font-size: 0.8rem;
}

.pilot_db_logbook_header_item.sub_header {
    color: var(--text_light);
    font-size: 0.6rem;
}
.pilot_db_logbook_item {
    display: grid;
    grid-template-columns: 10fr 10fr 10fr 10fr 8fr 8fr 10fr 7fr 7fr 7fr 7fr;
    grid-template-rows: 1fr;
    font-size: 0.8rem;
    height: var(--height);
    place-items: center;
}

@media screen and (max-width:  879px)                         { .pilot_db_logbook_overflow .box_item_container { overflow: visible; }}

@media screen and (max-width:  879px)                         { .pilot_db_logbook_overflow { overflow-x: auto;  }}


/* Achievements */






/*------------------------------------*\
/* SECTION: Administration - Template */
/*------------------------------------*/

.admin_menu_btn {
    position: absolute;
    left: 50%;
    top: 13px;
    background-color: var(--primary);
    font-size: 0.6rem;
    cursor: pointer;
    border-radius: var(--border_radius);
    padding: 2px 7px;
    margin-left: 140px;
    z-index: 90;
}

/*------------------------------------*\
/* SECTION: Administration - Template */
/*------------------------------------*/

.admin_control_panel_btn {
    background-color: var(--primary);
    font-size: 0.8rem;
    display: block;
    cursor: pointer;
    border-radius: var(--border_radius);
    padding: 2px 7px;
    margin-top: -10px;
}

/*------------------------------------*\
/* SECTION: Administration - Userlist */
/*------------------------------------*/

.admin_userlist_functions {
        margin-top: -15px;
        margin-bottom: 5px;
}

.admin_userlist_headline {
    display: grid;
    grid-template-columns: 5fr 10fr 10fr 10fr 22fr 8fr 18fr 10fr 5fr;
    grid-template-rows: 1fr;
    text-align: left;
    width: 100%;
}

.admin_userlist_item {
    display: grid;
    grid-template-columns: 5fr 10fr 10fr 10fr 22fr 8fr 18fr 10fr 5fr;
    grid-template-rows: 1fr;
    margin-top: -15px;
    text-align: left;
    width: 100%;
    height: var(--height);
}
.admin_userlist_item > div {
    display: grid;
    align-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 95%;
}



/*------------------------------------*\
/* SECTION: Admin - Usergroup         */
/*------------------------------------*/
.admin_usergroups_rights_headline {
    color: var(--primary);
    margin-top: 10px;
}

.inline_btn{
    display: inline-block;
    float: right;
    background-color: var(--primary);
    font-size: 0.6rem;
    cursor: pointer;
    border-radius: var(--border_radius);
    padding: 2px 7px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
}

.admin_usergroup_mebers {
    text-align: right;
    color: var(--text_light);
}

/*------------------------------------*\
/* SECTION: Admin - Userstatistiks    */
/*------------------------------------*/
.admin_userstats_country_grid {
    display: grid;
    grid-template-columns: 15fr 5fr 5fr;
    grid-template-rows: 1fr;
    margin-top: -15px;
    text-align: left;
    width: 100%;
}
.admin_userstats_registrations_grid {
    display: grid;
    grid-template-columns: 10fr 5fr;
    grid-template-rows: 1fr;
    margin-top: -15px;
    text-align: left;
    width: 100%;
}

/*------------------------------------*\
/*  Beta Testers note Page */
/*------------------------------------*/



.beta_note_box {
    grid-column: 1/-1;
    display: grid;
    place-items: center;
}
.beta_note_box > .box {
    max-width: 400px;
    text-align: center;
}






/* */