/* -- Default Variables */
:root {

	/* -- Base Colors */
    --color-alpha: 255, 184, 122; /* Primary Orange */ 
    --color-beta: 101, 101, 101; /* Primary Grey */ 
    --color-gamma: 176, 176, 176; /* Secondary Grey */ 
    --color-delta: 233, 233, 233; /* Tertiary Grey */ 
    --color-epsilon: 5, 104, 166; /* Primary Blue */ 
    --color-zeta: 3, 140, 127; /* Primary Green */ 
    --color-eta: 71, 188, 133; /* Secondary Green */ 
    --color-theta: 245, 148, 148; /* Primary Red */ 
    --color-iota: 4, 196, 178; /* Tertiary Green */ 
    --color-kappa: 243, 190, 120; /* Primary Yellow */ 

    /* -- Gradient Colors */
    --gradient-orange: linear-gradient(180deg, rgba(242,131,34,1) 0%, rgba(249, 195, 148, 1) 100%);

    /* -- Easings */
    --accelerate: cubic-bezier(0.4, 0.0, 1, 1);
    --decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
    --standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --sharp: cubic-bezier(0.4, 0.0, 0.6, 1);

    /* -- Shadows */
    --shadow-1dp: 0 0 2px 0 rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.20);
    --shadow-2dp: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.20);
    --shadow-3dp: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.20);
    --shadow-4dp: 0 2px 4px 0 rgba(0, 0, 0, 0.14), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.20);
    --shadow-6dp: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px 0 rgba(0, 0, 0, 0.20);
    --shadow-8dp: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.20);
    --shadow-9dp: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12), 0 5px 6px 0 rgba(0, 0, 0, 0.20);
    --shadow-12dp: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px 0 rgba(0, 0, 0, 0.20);
    --shadow-16dp: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px 0 rgba(0, 0, 0, 0.20);
    --shadow-24dp: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px 0 rgba(0, 0, 0, 0.20);

    --shadow-orange: rgba(242, 131, 34, .3) 0 6px 10px;

    /* -- Max screen width */
    --max-width: 420px;

}

/* -- Fonts */
@font-face {
    font-family: 'Font Awesome 5 Pro';
    src: url('../fonts/font-awesome/fa-light-300.ttf');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Font Awesome 5 Pro';
    src: url('../fonts/font-awesome/fa-regular-400.ttf');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Font Awesome 5 Pro';
    src: url('../fonts/font-awesome/fa-solid-900.ttf');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Light.ttf') format('truetype');
    font-weight: 100;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: 200;
}


@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Medium.ttf') format('truetype');
    font-weight: 300;
}

/* -- Animations */
@keyframes fade-in-scale {

	from { visibility: hidden; opacity: 0; transform: scale(.8); -webkit-transform: scale(.8); }
	to { visibility: visible; opacity: 1; transform: scale(1); -webkit-transform: scale(1); }

}

@keyframes fade-in {

    from { visibility: hidden; opacity: 0; }
    to { visibility: visible; opacity: 1; }

}

@keyframes fade-out {

	from { visibility: visible; opacity: 1; }
	to { visibility: hidden; opacity: 0; }

}

/* -- Global Elements */
*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
html, body { color: rgb(var(--color-beta)); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; height: 100%; font-family: Roboto, Arial, sans-serif; font-size: 14px; font-weight: 200; letter-spacing: 1px; overscroll-behavior-y: contain; }
body { background-color: rgb(var(--color-epsilon)); }
input, textarea, button, select { border: 0; border-radius: 0; outline: 0; background: 0; font-family: inherit; font-size: inherit; font-weight: inherit; -webkit-appearance: none; }
textarea { resize: none; }
.ios-status-bar { background: rgb(var(--color-epsilon)); width: 100%; height: env(safe-area-inset-top); }
.hardware-acceleration { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); perspective: 1000; -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; -ms-perspective: 1000; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-select-none { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.default-transition { transition: all 175MS var(--standard); -webkit-transition: all 175MS var(--standard); -moz-transition: all 175MS var(--standard); -o-transition: all 175MS var(--standard); }
.fade-transition { transition: visibility 375MS var(--standard), opacity 375MS var(--standard); -webkit-transition: visibility 375MS var(--standard), opacity 375MS var(--standard); -moz-transition: visibility 375MS var(--standard), opacity 375MS var(--standard); -o-transition: visibility 375MS var(--standard), opacity 375MS var(--standard); }
.default-fade-state { visibility: hidden; opacity: 0; pointer-events: none; }
.fade-in { visibility: visible; opacity: 1; pointer-events: auto; }
.vertical-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
.vertical-padding { padding-top: 16px; padding-bottom: 16px; }
.horizontal-padding { padding-left: 16px; padding-right: 16px; }
.no-padding { padding: 0; }
.scroll { width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.scroll.scroll-hidden { overflow-y: hidden; }
.scroll::-webkit-scrollbar { width: 4px; }
.scroll::-webkit-scrollbar-thumb { background-color: rgba(117, 117, 117, .4); border-radius: 2px; }
.logo { background-image: url('../images/logo/mvc-logboek.svg'); background-repeat: no-repeat; height: 100%; }
.gradient-background { background: rgba(5, 104, 166, 1); padding-bottom: env(safe-area-inset-bottom); background: -webkit-linear-gradient( 145deg, rgba(5, 104, 166, 1) 55%, rgba(3, 140, 127, 1) 100% ); background: linear-gradient( 145deg, rgba(5, 104, 166, 1) 55%, rgba(3, 140, 127, 1) 100% ); width: 100%; height: 100%; }
.opacity-hover { opacity: .8; transition: opacity 175MS var(--standard); -webkit-transition: opacity 175MS var(--standard); -moz-transition: opacity 175MS var(--standard); -o-transition: opacity 175MS var(--standard); }
.opacity-hover:hover { opacity: 1; }
.dynamic-grow { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.badge { background-color: rgb(var(--color-gamma)); color: #fff; font-family: Roboto, Arial, sans-serif; border: 2px solid #fff; font-size: 10px; min-width: 18px; height: 18px; border-radius: 9px; position: absolute; top: 0; left: 0; text-align: center; line-height: 15px; padding: 0 4px; }
.allow-appearance { -webkit-appearance: initial; }
.img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } 
.block-section { margin-bottom: 16px; }
.block-section.x2 { margin-bottom: 32px; }
.block-section:last-of-type { margin-bottom: 0; }
.block-title { font-size: 16px; font-weight: 300; }
.required { color: rgb(var(--color-theta)); }
.img-holder { width: 40px; height: 40px; border-radius: 100%; position: relative; overflow: hidden; }
.img-holder > * { border-radius: 100%; } /* IOS overflow hidden FIX */
.img-holder .placeholder { color: rgb(var(--color-gamma)); font-size: 16px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.link { color: rgb(var(--color-alpha)); }

/* -- FontAwesome */
/*.fa-icons { font-family: 'FontAwesome'; font-weight: 900; }
.fa-icons.regular { font-weight: 400; }
.fa-icons.light { font-weight: 300; }*/

.fa,
.fas { font-family: 'Font Awesome 5 Pro'; font-weight: 900; } /* Solid */
.fal { font-family: 'Font Awesome 5 Pro'; font-weight: 300; } /* Light */
.far { font-family: 'Font Awesome 5 Pro'; font-weight: 400; } /* Regular */

/* -- Text related */
.lowercase { text-transform: lowercase; }
.uppercase { text-transform: uppercase; }
.letter-spacing-04px { letter-spacing: 0.4px; }
.text-align-left { text-align: left; }
.text-align-right { text-align: right; }

/* -- Reset padding */
.no-padding { padding: 0; }
.no-padding-top { padding-top: 0; }
.no-padding-left { padding-left: 0; }
.no-padding-right { padding-right: 0;}
.no-padding-bottom { padding-bottom: 0; }
.no-padding-vertical { padding-top: 0; padding-bottom: 0; }
.no-padding-horizontal { padding-left: 0; padding-right: 0; }

/* -- Reset margin */
.no-margin { margin: 0; }
.no-margin-top { margin-top: 0; }
.no-margin-left { margin-left: 0; }
.no-margin-right { margin-right: 0; }
.no-margin-bottom { margin-bottom: 0; }
.no-margin-vertical { margin-top: 0; margin-bottom: 0; }
.no-margin-horizontal { margin-left: 0; margin-right: 0; }

/* -- Auto margin */
.auto-margin { margin: auto; }
.auto-margin-top { margin-top: auto; }
.auto-margin-left { margin-left: auto; }
.auto-margin-right { margin-right: auto; }
.auto-margin-bottom { margin-bottom: auto; }
.auto-margin-vertical { margin-top: auto; margin-bottom: auto; }
.auto-margin-horizontal { margin-left: auto; margin-right: auto; }

/* -- Flexbox */
.display-flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.display-inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
.flex-direction-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.flex-direction-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex-no-wrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
.align-items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.align-items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.align-items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
.align-items-baseline { -webkit-box-align:baseline; -ms-flex-align:baseline; align-items:baseline; }
.align-self-center { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center }
.justify-content-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.justify-content-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
.justify-content-space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.justify-content-space-around { -ms-flex-pack: distribute; justify-content: space-around; }
.flex-auto-grow { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; }
.flex-no-auto-grow { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; }

/* -- Background */
.background-contain, .background-cover { background-repeat: no-repeat; background-position: center; }
.background-contain { background-size: contain; }
.background-cover { background-size: cover; }

/* -- Duration & Easing */
.accelerate-bezier { transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1); -webkit-transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1); -moz-transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1); -o-transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1); }
.decelerate-bezier { transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); -webkit-transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); -moz-transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); -o-transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); }
.standard-bezier { transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); -webkit-transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); }
.sharp-bezier { transition-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1); -webkit-transition-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1); -moz-transition-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1); -o-transition-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1); }

/* -- Elevation & Shadows */
.shadow-1dp { box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.20); -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.20); -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.20); }
.shadow-2dp { box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.20); -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.20); -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.20); }
.shadow-3dp { box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.20); -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.20); -moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.20); }
.shadow-4dp { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.20); -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.20); -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.20); }
.shadow-6dp { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px 0 rgba(0, 0, 0, 0.20); -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px 0 rgba(0, 0, 0, 0.20); -moz-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px 0 rgba(0, 0, 0, 0.20); }
.shadow-8dp { box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.20); -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.20); -moz-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.20); }
.shadow-9dp { box-shadow: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12), 0 5px 6px 0 rgba(0, 0, 0, 0.20); -webkit-box-shadow: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12), 0 5px 6px 0 rgba(0, 0, 0, 0.20); -moz-box-shadow: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12), 0 5px 6px 0 rgba(0, 0, 0, 0.20); }
.shadow-12dp { box-shadow: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px 0 rgba(0, 0, 0, 0.20); -webkit-box-shadow: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px 0 rgba(0, 0, 0, 0.20); -moz-box-shadow: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px 0 rgba(0, 0, 0, 0.20); }
.shadow-16dp { box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px 0 rgba(0, 0, 0, 0.20); -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px 0 rgba(0, 0, 0, 0.20); -moz-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px 0 rgba(0, 0, 0, 0.20); }
.shadow-24dp { box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px 0 rgba(0, 0, 0, 0.20); -webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px 0 rgba(0, 0, 0, 0.20); -moz-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px 0 rgba(0, 0, 0, 0.20); }

/* -- View */
.container { background-color: #fff; width: 100%; height: 100%; position: relative; overflow: hidden; }
.container input:-webkit-autofill { -webkit-box-shadow:0 0 0 50px #fff inset; -webkit-text-fill-color: rgb(var(--color-beta)); } /* IOS Auto fill color workaround */
.container input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 50px #fff inset; -webkit-text-fill-color: rgb(var(--color-beta)); } /* IOS Auto fill color workaround */
.container.gradient-background input:-webkit-autofill { -webkit-box-shadow:0 0 0 50px rgb(var(--color-epsilon)) inset; -webkit-text-fill-color: #fff; } /* IOS Auto fill color workaround */
.container.gradient-background input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 50px rgb(var(--color-epsilon)) inset; -webkit-text-fill-color: #fff; } /* IOS Auto fill color workaround */
/*.page { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; overflow: hidden; }
.page.ng-enter { z-index: 88; animation: fadeIn 375MS; -webkit-animation: fadeIn 375MS; -moz-animation: fadeIn 375MS; -o-animation: fadeIn 375MS; }
.page.ng-leave { z-index: 99; animation: fadeOut 375MS; -webkit-animation: fadeOut 375MS; -moz-animation: fadeOut 375MS; -o-animation: fadeOut 375MS; }*/

/* -- Content */
.content-container { position: relative; min-height: 0; height: 100%; }
.content-container .notice { background-color: #444444; color: #fff; font-weight: 300; height: 0; opacity: 0; position: relative; z-index: 999; pointer-events: none; overflow: hidden; }
.content-container .notice.animate { transition: 375ms ease; transition-property: height, opacity; }
.content-container .notice.show { height: 49px; opacity: 1; overflow: initial; }
.content-container .notice .wrapper { padding: 16px; }
.content-container .notice .wrapper .online,
.content-container .notice .wrapper .offline { text-transform: capitalize; }
.content-container .notice .wrapper .online { color: rgb(var(--color-iota)); }
.content-container .notice .wrapper .offline { color: rgb(var(--color-theta)); }
.content-container:not(.no-spacing) > .scroll { padding: 16px; }
.content-container .scroll .infinite-scroll-loader { width: 100%; height: 24px; margin-top: 16px; position: relative; display: none; }
.content-container .scroll .infinite-scroll-loader.show { display: block; }
.content-container .content-placeholder { background-color: #fff; border-radius: 4px; min-height: 48px; padding: 16px; -webkit-box-shadow: var(--shadow-1dp); box-shadow: var(--shadow-1dp); }
.content-container .content-placeholder .icon { font-size: 24px; margin-right: 16px; }
.content-container .content-placeholder .message { color: rgb(var(--color-gamma)); }
.content-container .content-loader { background-color: #fff; z-index: 99; }
.content-container .content-loader .loader { width: 100%; height: 32px; position: relative; margin-bottom: 32px; }
.content-container .content-loader .label { color: rgb(var(--color-gamma)); text-align: center; }
.content-container .option-bar { position: absolute; right: 16px; bottom: 16px; left: 16px; pointer-events: none; }
.content-container .option-bar .fab { margin-left: auto; }
.content-container .option-bar .btt, 
.content-container .option-bar .fab { pointer-events: all; }

/* -- Entry */
/*.entry-section .entry-background { width: 100%; height: 100%; border-top: 100vh solid hsla(0, 0%, 4%, 1); border-right: 100vw solid hsla(209, 97%, 10%, 1); }
.entry-section .entry-container { border-radius: 2px; width: 100%; max-width: 400px; height: 100%; max-height: 500px; z-index: 2; }
.entry-section .entry-container .logo-wrapper { height: 40%; margin-bottom: 16px; overflow: hidden; }
.entry-section .entry-container .form-wrapper { height: 60%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.entry-section .entry-container .form-wrapper::-webkit-scrollbar { width: 4px; }
.entry-section .entry-container .form-wrapper::-webkit-scrollbar-thumb { background-color: rgba(117, 117, 117, .4); border-radius: 2px; }
.entry-section .entry-container .logo-wrapper .logo { background-position: center top; }
.entry-section .entry-container .logo-wrapper .logo-title { color: var(--primaryColor); font-size: 24px; font-weight: 300; text-align: center; display: block; margin-top: 16px; }
.entry-section .button.raised:disabled { background-color: #313131; color: #6f6f6f; }
.entry-section .action-label { color: var(--secondaryColor); font-size: 12px; cursor: pointer; padding-right: 8px; }
.entry-section .button-container { margin-top: 32px; }*/

/* -- Startscreen */
.startscreen-section .welcome-text { color: #fff; font-weight: 100; text-transform: uppercase; display: block; text-align: center; letter-spacing: 4px; font-size: 18px; margin-bottom: 45px; }
.startscreen-section .wrapper { width: 100%; height: 100%; max-height: 375px; max-width: 233px; overflow-x: hidden; overflow-y: scroll; padding: 16px 6px 16px 16px; margin-right: 6px; }
.startscreen-section .wrapper::-webkit-scrollbar { width: 4px; }
.startscreen-section .wrapper::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .4); border-radius: 2px; }
.startscreen-section .author,
.startscreen-section .version { color: rgba(255, 255, 255, .5); font-weight: 100; font-size: 10px; text-align: center; margin-top: 8px; }
.startscreen-section .version { margin-top: 4px; }
.startscreen-section .copyright { color: rgba(255, 255, 255, .5); font-size: 10px; font-weight: 100; text-align: center; position: relative; bottom: env(safe-area-inset-bottom); }

/* -- Message */
.message-section .message-container { width: 100%; }
.message-section .message-container .title { color: #fff; margin-bottom: 16px; font-size: 18px; }
.message-section .message-container .icon-container { border: 3px solid; border-radius: 100%; width: 48px; height: 48px; border-radius: 100%; margin: auto; }
.message-section .message-container .icon-container.success { color: #00ffa1; }
.message-section .message-container .icon-container.warning { color: #e8af58; }
.message-section .message-container .icon-container.error { color: #e48e8e; }
.message-section .message-container .icon-container .icon { font-size: 20px; }
.message-section .message-container .message { color: rgb(var(--color-delta)); font-size: 14px; font-weight: 100; word-wrap: break-word; margin: 16px 0 32px; }
.message-section .message-container .title,
.message-section .message-container .message { display: block; text-align: center; }
.message-section .message-container .button { max-width: 200px; }
.message-section .message-container .link-btn { color: rgb(var(--color-theta)); text-decoration: underline; font-size: 10px; padding-top: 16px; text-align: center; text-transform: uppercase; }

/* -- Flights */
.flights-section .card .card-head .icon-holder .icon.has-comments { color: rgb(5, 96, 154); }
.flights-section .card .card-body .card-body-section .value.success { color: rgb(var(--color-iota)); }
.flights-section .card .card-body .card-body-section .value.pending { color: rgb(var(--color-kappa)); }
.flights-section .card .card-body .card-body-section .value.failed,
.flights-section .card .card-body .card-body-section .value.expired { color: rgb(var(--color-theta)); }

/* -- Flight Detail */
.flight-detail-section .card.alpha { border-radius: 0; overflow: initial; }
.flight-detail-section .card.alpha .card-head { height: 100%; }
.flight-detail-section .flight-information-container { margin-top: 16px; }
.flight-detail-section .flight-information-container .title { font-size: 20px; text-align: center; margin: 16px 0 8px; }
.flight-detail-section .flight-information-container .start-date { color: rgb(var(--color-gamma)); text-align: center; font-weight: 100; font-size: 12px; }
.flight-detail-section .flight-information-container .give-your-rating { text-align: center; font-size: 12px; margin-top: 16px; }
.flight-detail-section .flight-information-container .give-your-rating.disabled { opacity: .2; }
.flight-detail-section .flight-information-container .rating { margin-top: 4px; }
.flight-detail-section .flight-information-container .rating .star { width: 22px; height: 22px; }
.flight-detail-section .flight-information-container .rating .star::before { font-size: 18px; }
.flight-detail-section .flight-information-container .floating-items { margin-top: 16px; }
.flight-detail-section .flight-information-container .card-container { margin-top: 16px; }
.flight-detail-section .flight-information-container .card-container .card-container-title { font-size: 16px; padding: 0 16px; }
.flight-detail-section .flight-information-container .card-container .cards { overflow-x: auto; padding: 16px; }
.flight-detail-section .flight-information-container .card-container .card { width: 320px; }
.flight-detail-section .flight-information-container .card-container .card.disabled { opacity: 0.5; pointer-events: none; }
.flight-detail-section .flight-information-container .card-container .card:not(:last-of-type) { margin-right: 16px; }
.flight-detail-section .flight-information-container .card-container .card.comment { background-color: rgb(var(--color-epsilon)); }
.flight-detail-section .flight-information-container .card-container .card.raport { background-color: rgb(var(--color-theta)); }
.flight-detail-section .flight-information-container .card-container .card.model { background-color: rgb(var(--color-zeta)); }

/* -- Model */
.model-section .subheader { margin-bottom: 16px; }
.model-section .subheader .model-amount { color: rgb(var(--color-gamma)); font-size: 12px; }
.model-section .subheader .model-amount .value { color: rgb(var(--color-epsilon)); }

/* -- Model Create */
.model-create-section .model-disclaimer { color: rgb(var(--color-gamma)); max-width: 345px; font-size: 12px; text-align: center; margin: 16px auto 0; }

/* -- Flight Registration Setup */
.flight-registration-setup-section .more-info { color: rgb(var(--color-alpha)); }

/* -- Flight Registration Start */
.flight-registration-start-section .card-selector { flex: 1; min-height: 130px; max-height: 170px; }
.flight-registration-start-section .card-selector:not(:last-of-type) { margin-bottom: 37px; }

/* -- Flight Registration Count */
.flight-registration-count-section .counter { color: #fff; font-size: calc(32px + (70 - 32) * ((100vw - 200px) / (320 - 200))); text-align: center; }

/* -- Flight Registration End Success */
.flight-registration-end-success-section .title { margin-top: 32px; }

/* -- Flight Registration End Failed */
.flight-registration-end-failed-section .title { margin-top: 32px; }

/* -- Flight Comments */
.flight-comments-section .fab { position: absolute; bottom: 72px; right: 16px; }

/* -- Feedback */
.feedback-section .feedback-description { color: rgb(var(--color-gamma)); max-width: 260px; }

/* -- Update */
.update-section .title { color: #fff; font-weight: 100; text-transform: uppercase; display: block; text-align: center; letter-spacing: 4px; font-size: 18px; margin-bottom: 45px; }
.update-section .bg-container { background-color: #fff; padding: 16px; max-width: 250px; width: 100%; border-radius: 12px; }
.update-section .bg-container .icon-container { background-color: #fff; width: 62px; height: 62px; border-radius: 100%; padding: 19px; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.12); margin: auto; }
.update-section .bg-container .icon-container .icon { color: rgb(var(--color-iota)); font-size: 24px; }
.update-section .bg-container .info { margin: 32px 0; }

/* -- Sync */
.sync-section .title { color: #fff; font-weight: 100; display: block; text-align: center; letter-spacing: 4px; font-size: 20px; margin-bottom: 32px; }
.sync-section .sync-bar { position: relative; width: 100%; }
.sync-section .sync-bar .sync-track { background-color: rgba(0, 0, 0, .2); width: 100%; height: 3px; border-radius: 1.5px; }
.sync-section .sync-bar .sync-track .sync-fill { background-color: rgb(var(--color-alpha)); width: 33%; height: 3px; border-radius: 1.5px; will-change: width; transition: 175ms ease; transition-property: width, background-color; }
.sync-section .sync-bar .sync-track .sync-fill.show { transition-delay: 175ms; background-color: rgb(var(--color-iota)); }
.sync-section .sync-bar .sync-label { color: rgba(255, 255, 255, .5); text-align: center; margin-top: 8px; }
.sync-section .sync-bar .sync-check { position: absolute; width: 20px; height: 20px; bottom: 0; left: 50%; transform: translateX(-50%); }
.sync-section .sync-bar .sync-check .sync-check-path { stroke: rgb(var(--color-iota)); stroke-width: 2.12px; stroke-dashoffset: 29.7833385; stroke-dasharray: 29.7833385; transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1); }
.sync-section .sync-bar .sync-check.show .sync-check-path { transition-delay: 175ms; stroke-dashoffset: 0; }

/* -- Profile */
.profile-section .username { color: #fff; font-size: 18px; letter-spacing: 4px; }
.profile-section .email { color: rgba(255, 255, 255, .6); font-size: 12px; margin-top: 4px; }

/* -- More */
.more-section .badge { background-color: rgb(var(--color-alpha)); top: -5px; }

/* -- Club Members */
.club-members-section .cards .permission-icon { color: rgb(var(--color-gamma)); font-size: 12px; padding: 0 8px; position: relative; left: 8px; }
.club-members-section .cards .permission-icon.admin { color: rgb(var(--color-theta)); }
.club-members-section .cards .status { background-color: rgb(var(--color-delta)); width: 10px; height: 10px; border-radius: 100%; margin-top: 8px; transition: background-color 375ms ease; }
.club-members-section .cards .status.online { background-color: rgba(var(--color-iota), .8); }
.club-members-section .cards .goto-icon { align-self: center; left: 8px; position: relative; }

/* -- Club Member */
.club-member-section .username { color: #fff; font-size: 18px; letter-spacing: 4px; }
.club-member-section .email { color: rgba(255, 255, 255, .6); font-size: 12px; margin-top: 4px; }

/* -- Install */
.install-section .overlay .title { color: #fff; font-weight: 100; text-transform: uppercase; display: block; text-align: center; letter-spacing: 4px; font-size: 18px; margin-bottom: 45px; }
.install-section .bg-container { background-color: #fff; padding: 16px; max-width: 250px; width: 100%; border-radius: 12px; }
.install-section .bg-container .icon-container { background-color: #fff; width: 62px; height: 62px; border-radius: 100%; padding: 19px; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.12); margin: auto; }
.install-section .bg-container .icon-container .icon { color: rgb(var(--color-iota)); font-size: 24px; }
.install-section .bg-container .info { text-align: center; margin: 32px 0; }
.install-section video { background-color: #012b44; width: 100%; height: 190px; border-radius: 12px; margin-top: 32px; }

/* -- Clubs */
.clubs-section .card.invitation { box-shadow: 0 0 7px 3px rgba(255, 184, 122, 0.5); }

.clubs-section .card .card-body .card-body-section .value.subscribed { color: rgb(var(--color-iota)); }
.clubs-section .card .card-body .card-body-section .value.pending { color: rgb(var(--color-kappa)); }
.clubs-section .card .card-body .card-body-section .value.rejected { color: rgb(var(--color-theta)); }

/* -- Medial Queries */

@media screen and (min-width: 320px) {

    /* Flight Registration Count */
    .flight-registration-count-section .counter { font-size: 70px; }

}