/******************************************************************/
/************************** FONTS *********************************/
/******************************************************************/
@font-face {
    font-family: quicksand;
    src: url('fonts/quicksand.ttf');
}

@font-face {
    font-family: luckiest-guy-regular;
    src: url('fonts/luckiest_guy_regular.ttf');
}

/******************************************************************/
/******************* STANDARD ELEMENTS ****************************/
/******************************************************************/
:root {
    --color-primary: #ffa957;
    --color-primary-light: #ffc593;
    --color-secondary: #ffcfb0;
    --color-white: #FFFFFF;
    --color-gray-light: #E1E1E1;
    --color-gray-mid: #878787;
    --color-gray-heavy: #646464;
    --color-online-light: #00ff00;
    --font-family-primary: quicksand, sans-serif;
    --font-family-luckiest-guy: luckiest-guy-regular, sans-serif;
    --transition-duration-250: 250ms;
    --transition-duration-500: 500ms;
    --4-pixels: 4px;
    --8-pixels: 8px;
    --16-pixels: 16px;
    --24-pixels: 24px;
    --32-pixels: 32px;
    --40-pixels: 40px;
    --48-pixels: 48px;
    --point-625-em: 0.625em;
    --point-75-em: 0.75em;
    --point-875-em: 0.875em;
    --double-em: 2em;
    height: 100%;
}

* {
    box-sizing: border-box;
    color: var(--color-gray-mid);
    font-family: var(--font-family-primary);
}

body {
    position: fixed; /* Disable iOS Safari rubber band effect. */
    margin: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: var(--color-gray-light);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-gray-heavy);
    margin: 0;
}

p {
    font-weight: bold;
    margin: 0;
}

strong {
    color: var(--color-gray-heavy);
}

label {
    display: block;
    margin-bottom: 16px;
}

hr {
    width: 100%;
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--color-gray-light);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="password"] {
    display: block;
    width: 100%;
    font-size: 1em;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--color-gray-mid);
    margin-top: 8px;
    outline: none;
}

input[type="text"]:focus, input[type="tel"]:focus, input[type="password"]:focus {
    border-bottom: 1px solid var(--color-primary);
}

button {
    width: 100%;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 50px;
    cursor: pointer;
}

button:active {
    background-color: var(--color-primary-light);
}

button.secondary {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-gray-light);
}

button.secondary:active {
    background-color: var(--color-gray-light);
}

button.simple {
    display: block;
    letter-spacing: 0;
    padding: initial;
    background-color: transparent;
    color: var(--color-gray-mid);
    cursor: pointer;
    text-decoration: underline;
}

button:disabled {
    color: var(--color-gray-mid);
    background-color: var(--color-gray-light);
}

/******************************************************************/
/******************* COMMON STYLE CLASSES *************************/
/******************************************************************/
.full-size {
    width: 100%;
    height: 100%;
}

.screen {
    position: absolute;
    width: 100%;
    height: 100%;
    transition-duration: var(--transition-duration-500); /* transition-property and transform are handled by mtl-base-screen-element.js */
    overflow-y: scroll;
}

.enable-animation-short {
    transition-property: transform;
    transition-duration: var(--transition-duration-250);
}

.enable-animation-long {
    transition-property: transform;
    transition-duration: var(--transition-duration-500);
}

.rubber-band {
    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.jump-out-to-right, .jump-out {
    transition-property: none;
    transform: translate(100%, 0%);
}

.jump-to-origin {
    transition-property: none;
    transform: translate(0%, 0%);
}

.animate-to-origin {
    transition-property: transform;
    transform: translate(0%, 0%);
}

.animate-out-to-right {
    transition-property: transform;
    transform: translate(100%, 0%);
}

.position-absolute-top-left {
    position: absolute;
    top: 0;
    left: 0;
}

.floating-button {
    position: fixed;
    bottom: var(--16-pixels);
    right: var(--16-pixels);
    width: 50px;
    aspect-ratio: 1;
    transition: transform var(--transition-duration-250);
}

.floating-button mtl-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    --color: var(--color-white);
}

.enable-fade {
    transition: opacity var(--transition-duration-250);
}

.opacity-0 {
    opacity: 0;
}

/******************************************************************/
/******************* CUSTOM ELEMENTS ******************************/
/******************************************************************/
mtl-accordion {
    border-radius: 25px;
    box-shadow: 1px 3px 5px var(--color-gray-light);
    --accordion-anim-duration: var(--transition-duration-500);
    --padding-horizontal: 24px;
    --padding-vertical: 16px;
    --icon-size: 16px;
    --icon-tint: var(--color-primary);
}

mtl-drawer {
    --animation-duration: var(--transition-duration-500);
}

mtl-switch {
    --switch-color: var(--color-gray-light);
    --track-color-off: var(--color-gray-mid);
    --track-color-on: var(--color-primary);
    --transition-duration: var(--transition-duration-250);
}

mtl-range-slider, mtl-slider {
    --range-color: var(--color-primary);
    --thumb-color: var(--color-primary);
}

mtl-toolbar.primary {
    background-color: var(--color-primary);
}

mtl-toolbar.primary > *[slot="nav-icon"], mtl-toolbar.primary > *[slot="menu-icon"] {
    --color: var(--color-white);
}

mtl-toolbar.primary > *[slot="content"] {
    color: var(--color-white);
}

mtl-toolbar.subscreen {
    background-color: var(--color-gray-light);
}

mtl-toolbar.subscreen > *[slot="nav-icon"], mtl-toolbar.subscreen > *[slot="menu-icon"] {
    --color: var(--color-gray-heavy);
}

mtl-toolbar.subscreen > *[slot="content"] {
    color: var(--color-gray-heavy);
}

mtl-toolbar.light {
    background-color: var(--color-white);
}

mtl-toolbar.light > *[slot="nav-icon"], mtl-toolbar.light > *[slot="menu-icon"] {
    --color: var(--color-gray-heavy);
}

mtl-toolbar.light > *[slot="content"] {
    color: var(--color-gray-heavy);
}

button mtl-svg {
    cursor: pointer;
}

/******************************************************************/
/************* JOIN SCREENS SHARED STYLES *************************/
/******************************************************************/
.join-panel {
    flex: 1;
    padding: 0 var(--16-pixels);
}

.join-panel-middle {
    border-top: 3px dashed var(--color-gray-light);
}

.join-panel-middle p {
    color: var(--color-gray-light);
    font-size: 0.75em;
    text-align: right;
    margin-right: var(--16-pixels);
}

/******************************************************************/
/************* PREFERENCE SCREENS SHARED STYLES *******************/
/******************************************************************/
section.preferences {
    padding: var(--16-pixels) var(--16-pixels) 0 var(--16-pixels);
}

section.preferences > div {
    display: flex;
    margin: var(--16-pixels) 0;
}

section.preferences > div p {
    width: 55%;
}

section.preferences > div button {
    width: 45%;
    text-align: right;
    word-wrap: anywhere;
}

section.preferences > div > div {
    position: relative;
    width: 45%;
}

section.preferences > div > div * {
    position: absolute;
    right: 0;
}

/******************************************************************/
/************* INDIVIDUAL STYLES FOR CONSISTENCY ******************/
/******************************************************************/
.margin-4 {
    margin: var(--4-pixels);
}

.margin-8 {
    margin: var(--8-pixels);
}

.margin-16 {
    margin: var(--16-pixels);
}

.margin-24 {
    margin: var(--24-pixels);
}

.margin-32 {
    margin: var(--32-pixels);
}

.margin-40 {
    margin: var(--40-pixels);
}

.margin-48 {
    margin: var(--48-pixels);
}

.margin-top-4 {
    margin-top: 4px;
}

.margin-top-8 {
    margin-top: var(--8-pixels);
}

.margin-top-16 {
    margin-top: var(--16-pixels);
}

.margin-top-24 {
    margin-top: var(--24-pixels);
}

.margin-top-32 {
    margin-top: var(--32-pixels);
}

.margin-top-40 {
    margin-top: var(--40-pixels);
}

.margin-top-48 {
    margin-top: var(--48-pixels);
}

.margin-right-4 {
    margin-right: var(--4-pixels);
}

.margin-right-8 {
    margin-right: var(--8-pixels);
}

.margin-right-16 {
    margin-right: var(--16-pixels);
}

.margin-right-24 {
    margin-right: var(--24-pixels);
}

.margin-right-32 {
    margin-right: var(--32-pixels);
}

.margin-right-40 {
    margin-right: var(--40-pixels);
}

.margin-right-48 {
    margin-right: var(--48-pixels);
}

.margin-bottom-4 {
    margin-bottom: var(--4-pixels);
}

.margin-bottom-8 {
    margin-bottom: var(--8-pixels);
}

.margin-bottom-16 {
    margin-bottom: var(--16-pixels);
}

.margin-bottom-24 {
    margin-bottom: var(--24-pixels);
}

.margin-bottom-32 {
    margin-bottom: var(--32-pixels);
}

.margin-bottom-40 {
    margin-bottom: var(--40-pixels);
}

.margin-bottom-48 {
    margin-bottom: var(--48-pixels);
}

.margin-left-4 {
    margin-left: var(--4-pixels);
}

.margin-left-8 {
    margin-left: var(--8-pixels);
}

.margin-left-16 {
    margin-left: var(--16-pixels);
}

.margin-left-24 {
    margin-left: var(--24-pixels);
}

.margin-left-32 {
    margin-left: var(--32-pixels);
}

.margin-left-40 {
    margin-left: var(--40-pixels);
}

.margin-left-48 {
    margin-left: var(--48-pixels);
}

.margin-horizontal-4 {
    margin-left: var(--4-pixels);
    margin-right: var(--4-pixels);
}

.margin-horizontal-8 {
    margin-left: var(--8-pixels);
    margin-right: var(--8-pixels);
}

.margin-horizontal-16 {
    margin-left: var(--16-pixels);
    margin-right: var(--16-pixels);
}

.margin-horizontal-24 {
    margin-left: var(--24-pixels);
    margin-right: var(--24-pixels);
}

.margin-horizontal-32 {
    margin-left: var(--32-pixels);
    margin-right: var(--32-pixels);
}

.margin-horizontal-40 {
    margin-left: var(--40-pixels);
    margin-right: var(--40-pixels);
}

.margin-horizontal-48 {
    margin-left: var(--48-pixels);
    margin-right: var(--48-pixels);
}

.margin-vertical-4 {
    margin-top: var(--4-pixels);
    margin-bottom: var(--4-pixels);
}

.margin-vertical-8 {
    margin-top: var(--8-pixels);
    margin-bottom: var(--8-pixels);
}

.margin-vertical-16 {
    margin-top: var(--16-pixels);
    margin-bottom: var(--16-pixels);
}

.margin-vertical-24 {
    margin-top: var(--24-pixels);
    margin-bottom: var(--24-pixels);
}

.margin-vertical-32 {
    margin-top: var(--32-pixels);
    margin-bottom: var(--32-pixels);
}

.margin-vertical-40 {
    margin-top: var(--40-pixels);
    margin-bottom: var(--40-pixels);
}

.margin-vertical-48 {
    margin-top: var(--48-pixels);
    margin-bottom: var(--48-pixels);
}

.padding-4 {
    padding: var(--4-pixels);
}

.padding-8 {
    padding: var(--8-pixels);
}

.padding-16 {
    padding: var(--16-pixels);
}

.padding-24 {
    padding: var(--24-pixels);
}

.padding-32 {
    padding: var(--32-pixels);
}

.padding-40 {
    padding: var(--40-pixels);
}

.padding-48 {
    padding: var(--48-pixels);
}

.padding-top-4 {
    padding-top: var(--4-pixels);
}

.padding-top-8 {
    padding-top: var(--8-pixels);
}

.padding-top-16 {
    padding-top: var(--16-pixels);
}

.padding-top-24 {
    padding-top: var(--24-pixels);
}

.padding-top-32 {
    padding-top: var(--32-pixels);
}

.padding-top-40 {
    padding-top: var(--40-pixels);
}

.padding-top-48 {
    padding-top: var(--48-pixels);
}

.padding-right-4 {
    padding-right: var(--4-pixels);
}

.padding-right-8 {
    padding-right: var(--8-pixels);
}

.padding-right-16 {
    padding-right: var(--16-pixels);
}

.padding-right-24 {
    padding-right: var(--24-pixels);
}

.padding-right-32 {
    padding-right: var(--32-pixels);
}

.padding-right-40 {
    padding-right: var(--40-pixels);
}

.padding-right-48 {
    padding-right: var(--48-pixels);
}

.padding-bottom-4 {
    padding-bottom: var(--4-pixels);
}

.padding-bottom-8 {
    padding-bottom: var(--8-pixels);
}

.padding-bottom-16 {
    padding-bottom: var(--16-pixels);
}

.padding-bottom-24 {
    padding-bottom: var(--24-pixels);
}

.padding-bottom-32 {
    padding-bottom: var(--32-pixels);
}

.padding-bottom-40 {
    padding-bottom: var(--40-pixels);
}

.padding-bottom-48 {
    padding-bottom: var(--48-pixels);
}

.padding-left-4 {
    padding-left: var(--4-pixels);
}

.padding-left-8 {
    padding-left: var(--8-pixels);
}

.padding-left-16 {
    padding-left: var(--16-pixels);
}

.padding-left-24 {
    padding-left: var(--24-pixels);
}

.padding-left-32 {
    padding-left: var(--32-pixels);
}

.padding-left-40 {
    padding-left: var(--40-pixels);
}

.padding-left-48 {
    padding-left: var(--48-pixels);
}

.padding-horizontal-4 {
    padding-left: var(--4-pixels);
    padding-right: var(--4-pixels);
}

.padding-horizontal-8 {
    padding-left: var(--8-pixels);
    padding-right: var(--8-pixels);
}

.padding-horizontal-16 {
    padding-left: var(--16-pixels);
    padding-right: var(--16-pixels);
}

.padding-horizontal-24 {
    padding-left: var(--24-pixels);
    padding-right: var(--24-pixels);
}

.padding-horizontal-32 {
    padding-left: var(--32-pixels);
    padding-right: var(--32-pixels);
}

.padding-horizontal-40 {
    padding-left: var(--40-pixels);
    padding-right: var(--40-pixels);
}

.padding-horizontal-48 {
    padding-left: var(--48-pixels);
    padding-right: var(--48-pixels);
}

.padding-vertical-4 {
    padding-top: var(--4-pixels);
    padding-bottom: var(--4-pixels);
}

.padding-vertical-8 {
    padding-top: var(--8-pixels);
    padding-bottom: var(--8-pixels);
}

.padding-vertical-16 {
    padding-top: var(--16-pixels);
    padding-bottom: var(--16-pixels);
}

.padding-vertical-24 {
    padding-top: var(--24-pixels);
    padding-bottom: var(--24-pixels);
}

.padding-vertical-32 {
    padding-top: var(--32-pixels);
    padding-bottom: var(--32-pixels);
}

.padding-vertical-40 {
    padding-top: var(--40-pixels);
    padding-bottom: var(--40-pixels);
}

.padding-vertical-48 {
    padding-top: var(--48-pixels);
    padding-bottom: var(--48-pixels);
}

.text-weak {
    font-weight: normal;
}

.text-size-point-625 {
    font-size: var(--point-625-em);
}

.text-size-point-75 {
    font-size: var(--point-75-em);
}

.text-size-point-875 {
    font-size: var(--point-875-em);
}

.text-size-double {
    font-size: var(--double-em);
}
.text-align-center {
    text-align: center;
}

.text-align-right {
    text-align: right;
}

.text-white {
    color: var(--color-white);
}

.text-luckiest-guy {
    font-family: var(--font-family-luckiest-guy);
}

.scale-0 {
    transform: scale(0);
}

.display-none {
    /* Any element selected with a more specific selector that sets a display style will be unaffected by this */
    /* without the !important. This happens often in our components which have elements which need to be hidden. */
    display: none !important;
}

.overflow-hidden {
    overflow: hidden;
}