/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
    /* Background Colors */
    --background-primary: #10C6CA;
    --background-secondary: #FB8D20;
    --background-light: #FFF;
    --background-muted: #E1E1E1;
    --background-disabled: #ACACAC;
    /* Hover States */
    --background-primary-hover: #4FD6DA;
    --background-secondary-hover: #FFA633;
    /* Text Colors */
    --text-primary: #444;
    --text-secondary: #10C6CA;
    --text-light: #FFF;
    --text-muted: #ACACAC;
}

body {
    font-family: 'Roboto';
    scroll-behavior: smooth;
    background: #F9F9F9;
}

.bx {
    vertical-align: middle;
}

.caleran-ex {
    cursor: pointer;
}

/*--------------------------------------------------------------
# Input
--------------------------------------------------------------*/
.label-i {
    position: relative;
    display: block;
    margin-bottom: 35px;
}

    .label-i .input {
        background: var(--background-light);
        border: 1px solid #AAA;
        border-radius: 12px;
        width: 100%;
        height: 65px;
        padding: 23px;
        outline: 0;
    }

        .label-i .input + span {
            color: var(--text-muted);
            position: absolute;
            left: 23px;
            top: 3px;
            cursor: text;
            font-size: 12px;
            transition: .3s ease;
        }

        .label-i .input:placeholder-shown + span {
            top: 23px;
            font-size: 16px;
        }

        .label-i .input:focus + span {
            top: 3px;
            font-size: 12px;
        }

/*--------------------------------------------------------------
# Placeholder
--------------------------------------------------------------*/
::placeholder {
    color: var(--background-disabled);
    font-size: 15px;
    opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12-18 */
    color: var(--background-disabled);
    font-size: 15px;
}