/*------------------------------------*\
#FONTS
\*------------------------------------*/

@font-face {
    font-family: "Source Sans Pro";
    font-weight: 400;
    src: url("../fonts/SourceSansPro-Regular.c1678b46f7dd.ttf") format("ttf");
}

@font-face {
    font-family: "Source Sans Pro";
    font-weight: 600;
    src: url("../fonts/SourceSansPro-SemiBold.83476a890be7.ttf") format("ttf");
}

@font-face {
    font-family: "Source Sans Pro";
    font-weight: 700;
    src: url("../fonts/SourceSansPro-Bold.8669b8706bbb.ttf") format("ttf");
}

:root {
    /* Colors */
    --color-primary: #FF7100;
    --color-buttons: #FF8F36;
    --color-secondary: #F5F5F5;

    /* Shadows */
    --shadow-color: #20223a15;
    --inset-shadow: inset 0 1px 1px var(--shadow-color);
    --focus-shadow-color: #FF7100;
    --focus-shadow: 0 0 0 3px var(--focus-shadow-color);
    --box-shadow: 0 3px 6px 2px var(--shadow-color);

    /* border radius */
    --rounded-radius: 8px;
    --radius: 8px;
    --radius-left: var(--radius) 0 0 var(--radius);
    --radius-right: 0 var(--radius) var(--radius) 0;


    /* transitions */
    --transition-alpha: .1s ease-in-out;
}

html {
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #060606;
    background: #F5F5F5;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Customize the background color to match your design.
*/

::-moz-selection {
    background: #FF7100;
    color: white;
    text-shadow: none;
}

::selection {
    background: #FF7100;
    color: white;
    text-shadow: none;
}

/*------------------------------------*\
#Elements
\*------------------------------------*/

/*
Elements: Images
---
Default markup for images to make them responsive
*/

img {
    max-width: 100%;
    vertical-align: top;
}

h1,
h2,
h3 {
    font-weight: 700;
}

h1 {
    font-size: 36px;
    line-height: 48px;
    margin: 0 0 24px;
}

h2 {
    font-size: 32px;
    line-height: 40px;
    margin: 0 0 24px;
}

h3 {
    font-size: 26px;
    line-height: 32px;
    margin: 0 0 24px;
}

h4,
h5,
h6 {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin: 0 0 24px;
}

p,
ol,
ul,
dl,
table,
address,
figure {
    margin: 0 0 24px;
}

ul,
ol {
    padding-left: 24px;
}

li ul,
li ol {
    margin-bottom: 0;
}

blockquote {
    font-style: normal;
    font-size: 23px;
    line-height: 32px;
    margin: 0 0 24px;
}

blockquote * {
    font-size: inherit;
    line-height: inherit;
}

figcaption {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    margin-top: 8px;
}

hr {
    border: 0 solid #707070;
    width: 100%;
    height: 1px;
    background: #707070;
    margin-bottom: 16px;
    margin-top: 0;
}

a {
    transition: all var(--transition-alpha);
    color: black;
    outline-color: black;
    outline-width: medium;
    outline-offset: 2px;
    text-decoration: none;
}

a:visited,
a:active {
    color: #707070;
}

a:hover,
a:focus {

    border: none;
    outline: 0;
    -moz-outline-style: none;
    box-shadow: var(--focus-shadow);
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

label,
input {
    display: block;
}

select {
    width: 100%;
}

input::placeholder {
    color: #9e9e9e;
}

input::-webkit-calendar-picker-indicator {
    display: none;
}


/*------------------------------------*\
#OBJECTS
\*------------------------------------*/

/*
    Objects: Row
    ---
    Creates a horizontal row that stretches the viewport and adds padding around children
*/

.o-row {
    position: relative;
    padding: 16px 16px 0;
}

.o-row--menu {
    padding: 0 16px 16px;
}

.o-row--login {
    min-height: 100vh;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
}

.o-row--beta {
    background-color: #FF7100;
    background-image: linear-gradient(to bottom right, #FF8F36, #FF7100);
}

/* size modifiers */

.o-row--lg {
    padding-top: 48px;
    padding-bottom: 24px;
}

.o-row--xl {
    padding-top: 72px;
    padding-bottom: 48px;
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

/*
    Objects: Container
    ---
    Creates a horizontal container that sets de global max-width
*/

.o-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 79.5em; /* 79.5 * 16px = 1272 */
    width: 100%;
}


/*
    Objects: section
    ---
    Creates vertical whitespace between adjacent sections inside a row
*/

.o-section {
    position: relative;
}

.o-section + .o-section {
    padding-top: 24px;
}


.o-list {
    list-style: none;
    padding: 0;
}

/*
    Object: Button reset
    ---
    Small button reset object
*/

.o-button-reset {
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;

    /* inherit font & color from ancestor */
    color: inherit;
    font: inherit;

    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
    line-height: normal;

    /* Corrects font smoothing for webkit */
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;

    /* Corrects inability to style clickable `input` types in iOS */
    -webkit-appearance: none;
}

.o-link-reset, .o-link-reset:hover, .o-link-reset:focus, .o-link-reset:active, .o-link-reset:visited {
    text-decoration: none;
    color: inherit;
    box-shadow: none;
}


/*
    Object: Hide accessible
    ---
    Accessibly hide any element
*/

.o-hide-accessible {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/*------------------------------------*\
#COMPONENTS
\*------------------------------------*/

/*
    Component: Header
    ---
    Website header
*/

.c-header {
    height: 56px;
    background-color: #FF7100;
    width: 100%;
    box-shadow: var(--box-shadow);
    position: fixed;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.c-header__link {
    border-radius: var(--rounded-radius);
}

.c-header__link:hover, .c-header__link:focus {
    box-shadow: none;
    transform: scale(1.05);
}

.c-header__link:active {
    box-shadow: none;
    transform: scale(1);
}

.c-header__link--alt {
    background-color: var(--color-buttons);
    margin-right: 8px;
}

.c-header__link__text {
    padding: 4px 8px;
    color: black;
}

.c-header + * {
    padding-top: 72px;
}

.c-header__logo-container {
    height: calc(100% - 16px);
    background: #F5F5F5;
    margin: 8px;
    width: 106px;
    border-radius: var(--rounded-radius);
    display: none;
}

.c-header__logo {
    height: 100%;
    padding: 6px;
}

.c-header--buttons {
    margin: auto;
    display: flex;
    padding: 0 32px;
    flex-grow: 1;
    max-width: 1024px;
    justify-content: space-between;
}

.c-header__title {
    font-size: 29px;
    color: var(--color-secondary);
    text-align: center;
    padding: 8px;
    margin: 0;
}

@media (min-width: 48em) {
    .c-header__logo-container {
        display: inline-block;
    }
}


/*
    Component: Main Menu
    ---
    Main index menu items
*/
.c-menu {
    max-width: 850px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
}


.c-menu__item {
    background-color: var(--color-buttons);
    height: 192px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;
    width: 100%;
    max-width: 328px;
    border-radius: var(--rounded-radius);
    transition: all var(--transition-alpha);
    box-shadow: var(--box-shadow);
    outline: none !important;
    border: none;
}

.c-menu__item:hover {
    background-color: #ffad66;
    transform: scale(1.05);
    /*box-shadow: none;*/
}

.c-menu__item:active {
    /*box-shadow: none;*/
    transform: scale(0.98);
}

.c-menu__item-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
}

.c-menu__item-logo__symbol {
    width: 96px;
    height: 96px;
}

.c-menu__item-text {
    text-align: center;
    font-size: 28px;
}


@media (min-width: 36em) {
    /* 576px */
    .c-menu__item {
        margin: 32px 16px 0;
    }
}

/*
    Component: Body
    ---
    Main body (not including header)
*/

/*.c-body {*/
/*    overflow: auto;*/
/*    margin-top: 110px;*/
/*}*/

/*
    Component: Search
    ---
    Search Bar
*/
.c-search-bar {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 16px;
    width: 100%;
    max-width: 336px;
    border: 0;
    border-bottom: 1px solid black;
    padding: 4px;
    outline: none;
    transition: border var(--transition-alpha);
}

.c-search-bar__symbol {
    margin: 0 0 0 16px;
}


.c-search-bar__symbol img {
    height: 32px;
    width: 32px;
}

/*
    Component: Config Section
    ---
    Config page card body
*/
.c-config-section {
    border-radius: var(--rounded-radius);
    background-color: #fff;
    width: 100%;
    max-width: 1024px;
    padding: 16px;
    margin: 0 16px 16px;
    box-shadow: var(--box-shadow);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    transition: var(--transition-alpha);

}

.c-config-section__componenten {
    flex-wrap: nowrap;

    flex-direction: column;
}

.c-config-section__componenten .c-form-field {
    max-width: 100%;
    width: 100%;
}

.c-config-section__default-error-config {
    flex-wrap: nowrap;

    flex-direction: column;
}

.c-config-section__default-error-config .c-form-field {
    max-width: 100%;
    width: 100%;
}

.c-config-section__device-options {
    padding: 0;
    margin: 0;
    width: 100%;
    background: none;
    box-shadow: none;
    flex-wrap: nowrap;

    flex-direction: column;
}

.c-config-section__actual-lifespan {
    padding: 0;
    margin: 0;
    width: 100%;
    background: none;
    box-shadow: none;
    flex-wrap: nowrap;

    flex-direction: column;
}

.c-device-option-input-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.c-device-option-toggle-input {
    display: flex;
    flex-direction: column;
}

/*
    Component: List
    ---
    List of items
*/
.c-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.c-list__item {
    background-color: #fff;
    border-radius: var(--rounded-radius);
    margin-bottom: 16px;
    max-width: 1024px;
    height: 48px;
    min-height: 48px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.c-list__item--container-2 {
    border-radius: var(--rounded-radius);
    margin-bottom: 16px;
    max-width: 1024px;
    width: 100%;
    height: 64px;
    min-height: 64px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.c-list__item--container-3 {
    background-color: #fff;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    max-width: 1024px;
    min-height: 100%;
    width: calc(100% - 48px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 48px;
}

.c-list__item--container-4 {
    background-color: #fff;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    max-width: 1024px;
    min-height: 100%;
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 8px;
}

.c-list__item--button {
    border-radius: var(--rounded-radius);
    outline: none;
    transition: all var(--transition-alpha);
    cursor: pointer;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.c-list__item--button__danger {
    background-color: #ff8585;
}


.c-list__item--button__disabled {
    pointer-events: none;
    background-color: #dedede;
}

.c-list__item--button:hover {
    /*background-color: #F5F5F5;*/
    background-color: #ffd4b3;
}

.c-list__item--button__danger:hover {
    background-color: #ff5151;
}

.c-list__item--button:active {
    /*background-color: #DFDFDF;*/
    background-color: #ffab66;
    /*background-color: #f56200;*/
}

.c-list__item--button__danger:active {
    background-color: #ff0000;
}

.c-list__item--button:focus {
    /*box-shadow: var(--focus-shadow);*/
}


.c-list__item--button__secondary {
    background-color: var(--color-buttons);

}

.c-list__item--button__secondary:hover, .c-header__button:focus {
    background: #FFAE6E;
    transform: scale(1.01);

}

.c-list__item--button__secondary:active {
    background-color: var(--color-buttons);
    transform: scale(0.99);

}


.c-list__item--delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 100%;
    background-color: var(--color-buttons);
    color: #fff;
    outline: none;
    transition: all var(--transition-alpha);
    pointer-events: bounding-box;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.c-list__item--delete__hide {
    visibility: hidden;
    pointer-events: none;
}

.c-list__item--delete:hover {
    background-color: #FFAE6E;
    /*transform: scale(1.11);*/
}

.c-list__item--delete__symbol {
    width: 24px;
    height: 24px;
}

.c-list__item--edit:hover .c-list__item--delete__symbol {
    transform: scale(1.20);
}

.c-list__item--edit:active .c-list__item--delete__symbol {
    transform: scale(1.10);
}

.c-list__item--edit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 100%;
    background-color: var(--color-buttons);
    color: #fff;
    outline: none;
    transition: all var(--transition-alpha);
    pointer-events: bounding-box;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.c-list__item--edit__hide {
    visibility: hidden;
    pointer-events: none;
}

.c-list__item--edit:hover {
    background-color: #FFAE6E;
    /*transform: scale(1.11);*/
}

.c-list__item--edit__symbol {
    width: 24px;
    height: 24px;
}

.c-list__item--edit:hover .c-list__item--edit__symbol {
    transform: scale(1.10);
}

.c-list__item--edit:active .c-list__item--edit__symbol {
    transform: scale(1.10);
}

.c-list__item--spacer-vertical {
    background-color: #000;
    height: 100%;
    min-width: 1px;
    min-height: 64px;
    /*margin: 0 16px;*/
}

.c-list__item--spacer-invisible {
    background-color: inherit;
    visibility: hidden;
    min-width: 48px;
}

.c-list__scroll {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}


.c-list__spacer__labeled {
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 8px;
}


.c-list__spacer {
    max-width: 1024px;
    margin-bottom: 16px;
}

.c-list__spacer__labeled .c-list__spacer {
    margin: 0;
}

.c-list__spacer--label {
    margin: 0;
}


.c-list__item--text {
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.c-list__item--date {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.c-list__item--date--padding {
    padding-left: 16px;
    padding-right: 8px;
}

.c-list__item--text-wrap {
    font-size: 14px;
    white-space: normal;
    overflow: visible;
    /*overflow-wrap: break-word;*/
}


/* Media query */
@media (min-width: 512px) {
    /* 576px */
    .c-list__item {
        height: 64px;
        min-height: 64px;
    }

    .c-list__item--text {
        font-size: 24px;
    }
}


/*
    Component: Link
    ---
    Website links
*/
.c-link {
    padding: 2px;
}

.c-link__image {
    text-decoration: none !important;
    border: 0 none !important;
    outline: 0;
    color: black;
}

.c-link__image:visited,
.c-link__image:active {
    color: black;
}

.c-link__image:hover,
.c-link__image:focus {

    border: none;
    outline: 0;
    -moz-outline-style: none;
    /*box-shadow: var(--focus-shadow);*/
}

/*
    Component: Logo
    ---
    Website main logo
*/
.c-logo {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 48px;
}

.c-logo__symbol {
    height: 100%;
}

/*
    Component: Card
    ---
    Card with box shadow
*/
.c-card {
    background-color: #FF8F36;
    margin-bottom: 24px;
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, .075);
    overflow: hidden;
}

.c-card__footer {
    text-align: center;
    border-top: 1px solid #F5F5F5;
    background-color: #F5F5F5;
}

/* Add padding to child for more flexibility */
.c-card__body,
.c-card__footer {
    padding: 24px 24px 0;
    overflow: auto; /* Fix margin collapse */
}

.c-card__logo {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;

}

/*
    Component: Forms
    ---
    Everything form related here
*/
.c-form-field {
}

.c-form-field__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    column-gap: 10px;
}

.c-form-field__row--full-width {
    padding: 4px;
    box-shadow: #FF7C14 0px 0px 0px 1px inset;
    flex-direction: row;
    flex-wrap: wrap;
}

.c-form-field--config {
    padding: 16px;
    margin-bottom: 0;
    min-width: 16em;
    flex-grow: 1;
}


.c-form-field--option {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
}

.c-form-field--floating-labels {
    position: relative;
}

.c-form-field--config__device_options {
    background-color: #fff;
    border-radius: var(--rounded-radius);
    width: 100%;
    margin-bottom: 16px;
    max-width: 1024px;
    height: 72px;
    min-height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--box-shadow);
}


/*
    Component: Input
    ---
    Class to put on all input="text" like form inputs
*/
.c-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: 1px solid #FF7100;
    border-radius: var(--radius);
    background-color: #fff;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    padding: 11px 16px;
    outline: none;
    box-shadow: var(--inset-shadow);
    transition: border var(--transition-alpha);
}

.c-input:invalid {
    color: #ff0033;
    border-color: #ff0033;
    box-shadow: 0 0 0 2px #ff0033;
}

.c-input--error {
    color: #ff0033;
    border-color: #ff0033;
    box-shadow: 0 0 0 2px #ff0033;
}


.c-input--withbuttons {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8px;
}

.c-input__prefixed {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /*margin-bottom: 8px;*/
}

.c-input__prefixed label {
    /*padding-right: 8px;*/
    padding: 11px 0 11px 11px;
    border: 1px solid #FF7100;
    border-right: none;
    border-radius: var(--radius-left);
}

.c-input__prefixed .c-input {
    border-left: none;
    padding-left: 0;
    border-radius: var(--radius-right);
}

.c-input__backgroundcolor {
    background-color: #FF0000;
}

.c-input__prefixed + .c-input {
    /*margin-left: 8px;*/
}

.c-input__device-options {
    min-width: 196px;
    width: 70%;
}

.c-input__actual-lifespan {
    height: 38px;
}

.c-actual-lifespan-text {
    font-weight: 600;
}


.c-custom-select {
    display: block;
    position: relative;
    min-width: 96px;
}

.c-custom-select__fouttype {
    width: 100%;
}

.c-custom-select__symbol {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 12px;
    right: 12px;
    pointer-events: none;
    fill: #9e9e9e;
}

.c-upload-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

option {
    border: none !important;
    outline: 0 !important;
    /*box-shadow: none !important;*/
    box-shadow: 0 0 10px 100px #fff inset;
    background: linear-gradient(#000000, #000000) !important;
}

select:focus {
    border-color: gray;
    outline: none;
}

option:focus {
    border: none !important;
    outline: 0 !important;
    box-shadow: none !important;
}

option:hover {
    border: none !important;
    outline: 0 !important;
    box-shadow: none !important;
}

option:active {
    border: none !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/*
    Component: Toggle Input / Switch
    ---
    Class to put on all input="checkbox" like form inputs styled as a switch
*/

.c-toggle-input__switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.c-toggle-input__switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.c-toggle-input__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 8px 0;
    -webkit-transition: .25s;
    transition: .25s;
    box-shadow: 0 3px 6px 2px #20223a15;
    border-radius: 34px;
}

.c-toggle-input__slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 0px;
    bottom: -4px;
    background-color: white;
    -webkit-transition: .25s;
    transition: .25s;
    box-shadow: 0 3px 6px 2px #20223a15;
    border-radius: 50%;
}

input:checked + .c-toggle-input__slider {
    background-color: #FF7700;
}

input:checked + .c-toggle-input__slider:before {
    -webkit-transform: translateX(36px);
    -ms-transform: translateX(36px);
    transform: translateX(36px);
}

.c-toggle-input__label {
    font-size: 13px;
    color: #707070;
    text-align: center;
    line-height: 1.6;
    margin-bottom: -4px;

    /* disable selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;

}

/*
    Component: Label
    ---
    Class to put on all form labels
*/
.c-label {
    margin-bottom: 0;
    padding-bottom: 8px;
    font-size: 14px;
    line-height: 16px;
}

.c-label__component {
    font-size: 16px;
    font-weight: 600;
}

.c-label__fouttype {
    font-size: 16px;
    font-weight: 600;
    padding: 0;
}

.c-label__actual-lifespan {
    font-size: 11px;
    color: #707070;
    padding: 0;
    margin: 0;
}

/*
    Component: Button
    ---
    Class to put on all buttons
*/
.c-button {
    font-size: 16px;
    font-weight: 400;
    border-radius: var(--radius);
    border: 1px solid #FF7100;
    background-color: #ededed;
    padding: 11px 0;
    line-height: 24px;
    width: 100%;
    outline: none;
    transition: all var(--transition-alpha);
    cursor: pointer;
}


.c-button:hover {
    background-color: #F5F5F5;
}

.c-button:active {
    background-color: #DFDFDF;
}

.c-button:focus {
    /*box-shadow: var(--focus-shadow);*/
}

.c-button__create {
    outline: none;
    height: 36px;
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    fill: #FF7100;
    margin-left: 8px;
    transition: all var(--transition-alpha);

}

.c-button__create--recenter {
    margin-top: 24px;
    margin-right: 16px;
}

.c-button__create--destroy {
    transform: rotate(45deg);
}

.c-button__create:hover {
    fill: #FF8F36;

}

.c-button__create:active {
    fill: #FF7C14;
}

.c-button__create:focus {
    border: 2px solid red;
    border-radius: 100%;
}

.c-button-add-option {
    display: flex;
    align-items: center;
    justify-content: center;
    fill: #F5F5F5;
    background-color: #FF8F36;
    outline: none;
    border-radius: var(--rounded-radius);
    transition: all var(--transition-alpha);
    cursor: pointer;
    box-shadow: var(--box-shadow);
    width: 196px;
}

.c-button-add-option:hover, .c-button-add-option:focus {
    background: #FFAE6E;
    transform: scale(1.03);

}

.c-button-add-option:active {
    transform: scale(0.98);
}


.c-header__button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    fill: #F5F5F5;
    background-color: #FF8F36;
    outline: none;
    border-radius: 100%;
    transition: all var(--transition-alpha);
    cursor: pointer;
}

.c-header__button:hover, .c-header__button:focus {
    background: #FFAE6E;
    transform: scale(1.2);

}

.c-header__button:active {
    /*background: #db792e;*/
    transform: scale(0.9);

}


/*
    Component: Modal
    ---
    Classes to create a modal popup
*/


.c-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(77, 77, 77, 0.77);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: var(--transition-alpha);
    z-index: 15;
}

.c-modal.is-visible {
    visibility: visible;
    opacity: 1;
}

.c-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 448px;
    border-radius: var(--rounded-radius);
    background-color: #F5F5F5;
    overflow: visible;
    cursor: default;
}

.c-modal-dialog > * {
    padding: 16px;
}

.c-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.c-modal-header .c-modal-close {
    font-size: 1.5rem;
}

.c-modal p + p {
    margin-top: 1rem;
}


.c-modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}


.c-modal-button {
    display: flex;
    align-items: center;
    justify-content: center;
    fill: #F5F5F5;
    background-color: #FF8F36;
    outline: none;
    border-radius: var(--rounded-radius);
    transition: all var(--transition-alpha);
    cursor: pointer;
    box-shadow: var(--box-shadow);
}


.c-modal-button:hover, .c-modal-button:focus {
    background: #FFAE6E;
    transform: scale(1.03);

}

.c-modal-button:active {
    transform: scale(0.98);
}

.c-modal-button__exit {
    width: 24px;
    height: 24px;
    border-radius: 100%;
}

.c-modal-button__file {
    max-width: 128px;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;

}

.c-modal-file__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.c-modal-file-text {
    font-size: 14px;
    line-height: 16px;
    margin-right: 8px;
}

.c-modal-button--text {
    padding: 4px 8px;
    color: var(--color-secondary)
}

.c-modal-header__title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0;
}

.c-modal-wrapper {
    padding: 4px 8px;
    background-color: #fefefe;
    box-shadow: 0 3px 6px 2px #20223a15;
    margin: 4px; /* Allows box shadow to show up */
    border-radius: var(--rounded-radius);
}


.c-modal-wrapper:hover {
    background-color: #F5F5F5;
}

.c-modal-select {
    display: block;
    position: relative;
    min-width: 96px;
}

.c-modal-select__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: none;
    border-radius: var(--radius);
    background-color: #fff;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    padding: 11px 16px;
    outline: none;
    box-shadow: var(--box-shadow);
    transition: border var(--transition-alpha);
}


.c-modal-select__symbol {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 12px;
    right: 12px;
    pointer-events: none;
    fill: #9e9e9e;
    cursor: pointer;
}

.c-modal-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    width: 100%;
}

.c-modal-toggle > div {
    margin: 2px 8px;
}

.c-modal-toggle-text {
    text-align: center;
    line-height: 1.6;
}

.c-modal-toggle-text__span {
    display: inline-block;
    max-height: 24px;
}

/*
    Component: Tooltip
    ---
    Classes to create a tooltip
*/

.c-tooltip {
    position: relative;
    display: inline-block;
}

.c-tooltip .c-tooltip--text {
    visibility: hidden;
    width: 320px;
    background-color: #FFFFFF;
    color: #060606;
    text-align: left;
    border-radius: var(--rounded-radius);
    padding: 5px 16px 5px 16px;
    box-shadow: var(--box-shadow);
    margin-top: 24px;

    /* Position the tooltip */
    position: absolute;
    z-index: 20;
}

.c-tooltip:hover .c-tooltip--text {
    visibility: visible;
}

.c-tooltip--icon {
    vertical-align: middle;
    margin-bottom: 2px;
}

/*
    Component: Error Page
    ---
    Classes to create the error pages
*/

.c-error--body {
    min-width: 100vw;
    min-height: 100vh;
    background-color: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-error--message {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border-radius: var(--rounded-radius);
    box-shadow: var(--box-shadow);
    min-width: 256px;
    min-height: 64px;
    max-width: 80vw; /* Makes sure the box doesn't touch the sides */
    outline: var(--color-primary) solid 2px;
}

.c-error--message__text {
    padding: 24px;
    font-size: 16px;
    font-weight: 600;
}

@media (min-width: 512px) {
    /* 576px */
    .c-error--message {
        min-width: 408px;
        min-height: 96px;
    }

    .c-error--message__text {
        font-size: 24px;
    }
}


/*------------------------------------*\
#UTILITIES
\*------------------------------------*/
.u-pt-clear {
    padding-top: 0 !important;
}

.u-mb-clear {
    margin-bottom: 0 !important;
}

.u-mb-xs {
    margin-bottom: 4px !important;
}

.u-mb-sm {
    margin-bottom: 8px !important;
}

.u-mb-md {
    margin-bottom: 16px !important;
}

.u-mb-lg {
    margin-bottom: 32px !important;
}

.u-mb-xl {
    margin-bottom: 48px !important;
}

/*------------------------------------*\
#UTILITIES
\*------------------------------------*/
.u-pt-clear {
    padding-top: 0 !important;
}

.u-mt-clear {
    margin-top: 0 !important;
}

.u-mt-xs {
    margin-top: 4px !important;
}

.u-mt-sm {
    margin-top: 8px !important;
}

.u-mt-md {
    margin-top: 16px !important;
}

.u-mt-lg {
    margin-top: 32px !important;
}

.u-mt-xl {
    margin-top: 48px !important;
}

/*
    Utilities: max-width
    ---
    Utility classes to put specific max widths onto elements
*/
.u-max-width-xs {
    max-width: 27em !important;
}

.u-max-width-sm {
    max-width: 39em !important;
}

.u-max-width-md {
    max-width: 50em !important;
}

.u-max-width-lg {
    max-width: 63.5em !important;
}

.u-max-width-none {
    max-width: none !important;
}


/*
    Utilities: align
    ---
    Utility classes align text or components
*/
.u-align-text-center {
    text-align: center;
}

.u-align-center {
    margin: 0 auto;
}


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

/*
    Utilities: text
    Utility classes to create smaller or bigger test
*/
.u-text-sm {
    font-size: 14px;
}

/*
    Utility: Widths
    ---
    Utility classes to put specific widths onto elements
    Will be mostly used on o-layout__item
*/
.u-width-auto {
    width: auto !important;
}

.u-1-of-2 {
    width: 50% !important;
}

.u-1-of-3 {
    width: 33.3333333333% !important;
}

.u-2-of-3 {
    width: 66.6666666667% !important;
}

.u-1-of-4 {
    width: 25% !important;
}

.u-3-of-4 {
    width: 75% !important;
}

.u-1-of-5 {
    width: 20% !important;
}

.u-2-of-5 {
    width: 40% !important;
}

.u-3-of-5 {
    width: 60% !important;
}

.u-4-of-5 {
    width: 80% !important;
}

.u-1-of-6 {
    width: 16.6666666667% !important;
}

.u-5-of-6 {
    width: 83.3333333333% !important;
}

.u-max-1-of-2 {
    max-width: 50% !important;
}

.u-max-1-of-3 {
    max-width: 33.3333333333% !important;
}

.u-max-2-of-3 {
    max-width: 66.6666666667% !important;
}

.u-max-1-of-4 {
    max-width: 25% !important;
}

.u-max-3-of-4 {
    max-width: 75% !important;
}

.u-max-1-of-5 {
    max-width: 20% !important;
}

.u-max-2-of-5 {
    max-width: 40% !important;
}

.u-max-3-of-5 {
    max-width: 60% !important;
}

.u-max-4-of-5 {
    max-width: 80% !important;
}

.u-max-1-of-6 {
    max-width: 16.6666666667% !important;
}

.u-max-5-of-6 {
    max-width: 83.3333333333% !important;
}

/*
    Utility: Border colors
*/

.u-error-marking {
    border-color: red;
    box-shadow: 0 0 2px 2px red;
}

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster:
        http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
    * Don't show links that are fragment identifiers,
    * or use the `javascript:` pseudo protocol
    */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
    * Printing Tables:
    * http://css-discuss.incutio.com/wiki/Printing_Tables
    */
    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


/*
    Utilities: shadow
    ---
    Utility classes to put shadows on specific objects
*/

.u-inset-shadow {
    box-shadow: var(--inset-shadow);
}

.u-hide-element {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.u-flex-align-center {
    display: flex;
    align-items: center;
}

.u-flex-space-evenly {
    display: flex;
    justify-content: space-evenly;
}

.u-flex-space-between {
    display: flex;
    justify-content: space-between;
}