html,body {
    position: fixed;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: 'Baloo Da 2';
}

@font-face {
    font-family: 'Gotham';
    src: url("../fonts/Gotham/GothamHTF Medium.otf") format("opentype");
}
.hidden { display: none; }

.display-block {
    display: block;
}

.input {
    position: relative;
}
.input label {
    position: absolute;
    left: 20px;
    top: 2px;
}
.input svg {
    color:  #8d8ea5;
    font-size: 24px;
}


/********** COMMON ****************/
.bg-container {
    background-color: rgb(242, 242, 251);
    padding: 70px 50px 50px 50px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.white-container {
    background-color: white;
    padding: 7vh 3vw;
    height: 100%;
}

input {padding: 0; margin: 0; }
/*input, select { border: 1px solid black; padding: 2px 1px; -moz-appearance:none; -webkit-appearance: none; appearance: none; }*/

.no-padding {
    padding: 0;
}

.no-margin {
    margin: 0;
}

.container-padding {
    padding: 35px 50px 50px 50px;
}

a.button.white-button, button.white-button {
    width: 100%;
    background-color: white;
    border-radius: 25px;
    border: 2px solid transparent;
    /*margin-bottom: 25px;*/
    /*height: 100px;*/
    align-self: center;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    color: rgb(29,31,77);
}

/* Button styles */
.button,
button {
    transition: all .5s ease-in-out;
}

button.button-active,
button.button-active:active,
button.button-active:focus,
button.button-active:hover {
    background-color: #fff; color: black;
}


.popup-content .button.small-button,
.main-content .button.small-button,
.popup-content button,
.main-content button {
    display: inline-block;
    font-family: 'Baloo Da 2';
    border-radius: 10px;
    padding:  10px;
    font-size: 16px;
    border: none;
    background-color: rgb(81,205,187);
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    outline: none;
    line-height: 1;
}

.main-content .small-button:active, .main-content .small-button:focus, .main-content .small-button:hover,
.popup-content .small-button:active, .popup-content .small-button:focus, .popup-content .small-button:hover,
.popup-content button:active, .popup-content button:focus, .popup-content button:hover,
.main-content button:active, .main-content button:focus, .main-content button:hover {
    background-color: rgb(111,235,217);
}

.button.cancel-button,
button.cancel-button {
    background-color: rgb(137, 148, 147);
}
button.button-gray, button.button-gray:active, button.button-gray:focus, button.button-gray:hover {
    background-color: #777;
}

.button.delete-button,
button.delete-button {
    background-color: rgb(205, 81, 81);
}
.button.delete-button:active, .button.delete-button:focus, .button.delete-button:hover {
    background-color: rgb(217, 125, 125) !important;
}



/* Error boxes */
.error-box {
    border: 2px dashed rgb(237, 31, 52);
    border-radius: 20px;
    line-height: 20px;
    padding: 10px;
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    background: rgb(251 208 212);
}

/* Funny input styles */
.required::placeholder {
    color: rgb(255, 102, 102);
}

input.h2 {
    padding: 5px 10px;
}

.base-input {
    position: relative;
}

.base-input input[type="datetime-local"] {
    padding-right: 45px;
}

.base-input .label {
    margin-bottom: 0px;
}

.base-input ::placeholder {
    color: hsl(240deg 12% 79%);
}

.base-input input, .base-input select {
    appearance: none;
    background-color: rgb(239, 241, 247);
    color: #8d8ea5;
    border-radius: 16px;
    padding: 15px 15px;
    font-size: 16px;
    border: none;
    outline: none;
    font-family: 'Gotham';

    box-sizing: border-box;
}

.base-input .clear-input {
    color: rgb(137 148 147);
    font-size: 26px;
    position: absolute;
    text-decoration: none;
    border-radius: 10px;
    padding: 10px 15px;
    line-height: 26px;
}

.base-input.half-width input, .base-input.half-width select {
    min-width: 180px;
    max-width: 600px;
    width: 100%;
    height: 46px;
}