/*hide radio*/
.custom-radio, .custom-checkbox {
    opacity: 0;
    position: absolute;
    /*left: -2rem;
    top: -2rem;*/
}

/*circle--inline*/
.circle--inline {
    font-size: 22px;
    font-weight: bold;
    font-family: sourceSansPro,sans-serif;
    background-color: transparent;
    text-transform: uppercase;
    padding: 0 35px;
    display: inline-block;
    color: #009FC2;
    position: relative;
}

    .circle--inline::before, .circle--inline::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
    }

    .circle--inline::before {
        display: block;
        width: 22px;
        height: 22px;
        border: 2px solid #009ED0;
        padding: 0 5px;
    }

    .circle--inline::after {
        display: none;
        width: 14px;
        height: 14px;
        margin: 4px;
        background-color: #003745;
    }

input[type="radio"] + .circle--inline::before,
input[type="radio"] + .circle--inline::after {
    border-radius: 50%;
}

input:focus + .circle--inline::before {
    border-color: #003745;
}

input:focus + .circle--inline, input:checked + .circle--inline {
    color: #003745;
}


    input:checked + .circle--inline::after {
        display: block;
    }


.circle--inline:hover {
    color: #00758f; /*#003745;*/
    cursor: pointer;
}

/*rectangle--inline*/
.rectangle--inline {
    font-size: 20px;
    /*font-weight: bold;*/
    /*font-family: sourceSansPro,sans-serif;*/
    text-transform: uppercase;
    padding: 5px 10px;
    display: inline-block;
    color: #009FC2;
    position: relative;
    color: #fff;
    border-color: #009FC2;
    background-color: #009FC2;
}

    .rectangle--inline:hover {
        color: #FFF;
        border-color: #00758f; /*#003745;*/
        background-color: #00758f; /*#003745;*/
        cursor: pointer;
    }

input:focus + .rectangle--inline, input:checked + .rectangle--inline {
    color: #FFF;
    border-color: #003745;
    background-color: #003745;
}

/*checkbox--inline*/
.checkbox--inline {
    position: relative;
    padding: 0 40px;
}

    .checkbox--inline::before, .checkbox--inline::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
    }

    .checkbox--inline::before {
        display: block;
        width: 20px;
        height: 20px;
        border: 2px solid #009ED0;
        padding: 0 5px;
    }

    .checkbox--inline::after {
        display: none;
        /*width: 17px;
        height: 17px;
        margin: 4px;
        background-color: #003745;*/
        content: "\2713";
        font-size: 35px;
        font-weight: bolder;
        position: absolute;
        top: -10px;
        left: 3px;
    }

input[type="checkbox"] + .checkbox--inline::before,
input[type="checkbox"] + .checkbox--inline::after {
    border-radius: 10%;
}

input:focus + .checkbox--inline::before {
    border-color: #003745;
}

input:focus + .checkbox--inline, input:checked + .checkbox--inline {
    /*color: #003745;*/
    /*content: "\2713";*/
}

    input:checked + .checkbox--inline::after {
        display: block;
    }


/*Custom Textbox
    ===========================================
*/

/* Icons  */
.icon-container {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    width: 100%;
    margin-bottom: 15px;
}

.icon {
    padding: 10px;
    /*background: dodgerblue;*/
    /*background: #009FC2;*/
    color: #009FC2;
    min-width: 50px;
    min-height: 50px;
    /*text-align: center;*/
    vertical-align: top;
    font-size: 25px;
    line-height: 28px;
}

.custom__input {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    /*height: 3rem;*/
    width: 100%;
    /*font-size: 16px;*/
    margin: 0 0 8px 0;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transition: border .3s, -webkit-box-shadow .3s;
    transition: border .3s, -webkit-box-shadow .3s;
    transition: box-shadow .3s, border .3s;
    transition: box-shadow .3s, border .3s, -webkit-box-shadow .3s;
}

    .custom__input:not(.browser-default):focus:not([readonly]) {
        border-bottom: 1px solid #009FC2;
        -webkit-box-shadow: 0 1px 0 0 #009FC2;
        box-shadow: 0 1px 0 0 #009FC2;
    }

        .custom__input:not(.browser-default):focus:not([readonly]) + label {
            color: #003745;
        }

    /*.custom__input:focus + label,
.custom__input:not(:focus):valid + label,*/
    .custom__input:focus ~ label,
    .custom__input:not(:required):focus ~ label,
    .custom__input:valid ~ label {
        -webkit-transform: translateY(-14px) scale(0.8);
        transform: translateY(-14px) scale(0.8);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        font-weight: bold;
        color: #009FC2 !important;
    }



.input-field {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

    .input-field > label {
        color: #9e9e9e;
        position: absolute;
        top: 0;
        left: 60px;
        font-size: 1rem;
        cursor: text;
        -webkit-transition: color .2s ease-out, -webkit-transform .2s ease-out;
        transition: color .2s ease-out, -webkit-transform .2s ease-out;
        transition: transform .2s ease-out, color .2s ease-out;
        transition: transform .2s ease-out, color .2s ease-out, -webkit-transform .2s ease-out;
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        text-align: initial;
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
    }

        .input-field > label:not(.label-icon).active {
            -webkit-transform: translateY(-14px) scale(0.8);
            transform: translateY(-14px) scale(0.8);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            font-weight: bold;
            color: #009FC2 !important;
        }