*{
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #f3f7f5;
    overflow-x: hidden;
}

.flex{
    display: flex;
    display: -o-flex;
    display: -ms-flex;
    display: -moz-flex;
    display: -webkit-flex;
    align-items: center;
}

.row{
    flex-direction: row;
    justify-content: space-between;
}
.column{
    flex-direction: column;
    justify-content: flex-start;
}
.center{
    justify-content: center;
}

header.flex.row{
    width: 100vw;
    padding: 8px 24px;
    box-shadow: 0 5px 5px rgba(0,0,0,.16);
    background-color: #FFF;
}

header.flex.row > h1, header.flex.row img{
    margin: 4px 12px;
}

header.flex.row > h1 {
    font-size: 24px;
}

header.flex.row img{
    max-height: 52px;
}

#main{
    background-image: url("neuro.svg");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 32px 0 64px 0;
    min-height: 700px;
}

.welcome, #popup-content{
    padding: 20px 40px;
}

#popup-content{
    min-width: 720px;
    max-width: 700px;

}

.welcome > h2{
    margin-bottom: 16px;
}

.welcome > p{
    margin-bottom: 8px;
}

.welcome > div.btn-container.flex.row.start{
    justify-content: flex-end;
    padding-top: 20px;
}

#firebaseui-auth-container, .termo-box, .welcome, #popup-content, .box{
    float: left;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    background-color: #FFF;
}

#firebaseui-auth-container > h3{
    text-align: center;
    padding: 36px 32px 12px 32px;
    font-weight: 300;
}

.container{
    width: 100vw;
    max-width: 1200px;
    padding: 32px 16px;
    margin: auto;
}
.container.flex.row{
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
}

#hero-banner{
    max-width: 33.33%;
}

#main-content{
    padding: 8px 32px 8px 72px;
    max-width: 66.66%;
    min-width: 66.66%;
}

#main-content p{
    text-align: justify;
}
#main-content > *{
    margin: 8px 0;
}

footer{
    background-color: #383838;
    color: #FFF;
}

footer a{
    color: #FFF;
}

#conteudo{
    max-width: 900px;
    text-align: justify;
}

#conteudo h1{
    margin: 8px 0 12px 0;
}

#conteudo p{
    margin: 6px 0;
}

#conteudo{
    display: none;
}

.btn-container{
    width: 100%;
    padding: 8px 0;
    justify-content: flex-end;
}

.btn-container button, .btn-container input[type="button"]{
    padding: 12px 20px;
    color: #FFF;
    background-color: #4a7d65;
    border: none;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0,0,0,.16);
    cursor: pointer;
    transition: all .26s ease;
}
.btn-container button:hover, .btn-container input[type="button"]:hover{
    box-shadow: 0 1px 3px rgba(0,0,0,.16);
    background-color: #95b8a7;
}


.btn-container button, .btn-container input[type="submit"]{
    padding: 12px 20px;
    color: #FFF;
    background-color: #4a7d65;
    border: none;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0,0,0,.16);
    cursor: pointer;
    transition: all .26s ease;
}

.btn-container button:not(:first-child), .btn-container input[type="submit"]:not(:first-child){
    margin-left: 12px;
}

.btn-container button:hover, .btn-container input[type="submit"]:hover{
    box-shadow: 0 1px 3px rgba(0,0,0,.16);
    background-color: #95b8a7;
}

.btn-container button:disabled, .btn-container input[type="submit"]:disabled{
    background-color: #414141;
    box-shadow: 0 1px 3px rgba(0,0,0,.16);
}

#conteudo.termo-box > *{
    padding: 12px 16px;
}

#termoContent{
    padding: 12px 32px;
    background-color: rgb(245, 245, 245);
    margin: 0;
    max-height: 450px;
    overflow-y: scroll;
}

#conteudo.termo-box{
    border-radius: 6px;
}

#conteudo.termo-box form label{
    justify-content: flex-start;
    cursor: pointer;
}

#conteudo.termo-box form > .btn-container{
    justify-content: flex-end;
}

.disabled{
    pointer-events: none;
    color: rgb(167, 167, 167);
}

#input-termos{
    display: none;
}

#input-termos + span + span{
    display: none;
}

#input-termos:checked + span{
    display: none;
}

#input-termos:checked + span + span{
    display: block;
}

#firebaseui-auth-container > div {
    margin-bottom: 28px;
    min-width: 364px;
}
.firebaseui-idp-button, .firebaseui-tenant-button {
    min-width: 232px;
}
#conteudo.termo-box{
    display: block;
}


#popup-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.5);
    margin: 0;
    display: none;
}

#popup{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    align-items: center;
    justify-content: center;
    display: none;
}

#popup-content{
    position: relative;
    padding-top: 40px;
}

#popup-content > #close{
    position: absolute;
    top: 10px;
    right: 18px;
    cursor: pointer;
}

#popup-content > #close:hover > span{
    color: #F00;
}

#popup-content > h3{
    margin-bottom: 8px;
}

#popup-content > h4{
    margin-bottom: 6px;
}

#popup-content > ul{
    margin: 12px auto 12px auto;
}

#popup-content > ul > li:not(:last-child){
    margin-bottom: 8px;
}

#popup-content div.form{
    padding: 8px;
}

#popup-content div.form label.flex, .radio-options > label.flex{
    justify-content: flex-start;
}

#popup-content div.form label.flex input[type="radio"], .radio-options > label.flex > input[type="radio"], .radio-options label.flex > input[type="radio"]{
    display: none;
}

#popup-content div.form label.flex span{
    margin-right: 6px;
    cursor: pointer;
    margin-bottom: 6px;
    transition: all .26s ease;
}

#popup-content div.form label.flex > span, .radio-options > label.flex > span, .radio-options label.flex > span{
    display: none;
}

#popup-content div.form label.flex > span + span, .radio-options > label.flex > span + span, .radio-options label.flex > span + span{
    display: block;
}

#popup-content div.form label.flex > input[type="radio"]:checked + span, .radio-options > label.flex > input[type="radio"]:checked + span, .radio-options label.flex > input[type="radio"]:checked + span{
    display: block;
    color: #4a7d65;
}

#popup-content div.form label.flex > input[type="radio"]:checked + span + span, .radio-options > label.flex > input[type="radio"]:checked + span + span, .radio-options label.flex > input[type="radio"]:checked + span + span{
    display: none;
}

#popup-content div.send.flex{
    justify-content: flex-end;
    padding-top: 12px;
}

#agradecimento{
    display: none;
}

form.box{
    padding: 20px 40px;
    min-width: 360px;
}

form.box > h2{
    margin: 8px auto 32px auto;
}

.input-text, .input-date, .input-number, .input-email, .material-select, .radio-options label, .textarea{
    position: relative;
    float: left;
}
.radio-options{
    width: 100%;
    align-items: flex-start;
}

.radio-options > h4{
    margin-bottom: 6px;
}

.radio-options > label{
    margin: 6px;
}

.input-text input[type="text"], .input-number input[type="number"], .input-date input[type="date"], .input-email input[type="email"], .material-select select, .textarea textarea{
    border: 1px solid #666;
    border-radius: 4px;
    padding: 12px 16px 14px 16px;
    font-size: 16px;
    min-width: 360px;
}

.input-text input[type="text"]:focus, .input-number input[type="number"], .input-date input[type="date"]:focus, .input-email input[type="email"]:focus, .material-select select:focus, .textarea textarea{
    border: 2px solid #4a7d65;
    outline: none;
    margin-left: -1px;
    margin-top: -1px;
    margin-bottom: 0px;
}

.input-text .label, .input-date .label, .input-number .label, .input-email .label, .material-select .label, .textarea .label{
    position: absolute;
    left: 16px;
    top: 13px;
    color: #666;
    transition: all .16s ease-in;
}

.input-text.filled .label, .input-number input[type="number"] + .label, .input-date .label, .input-email.filled .label, .input-text input[type="text"]:focus + .label, .input-date input[type="date"]:focus + .label, .input-email input[type="email"]:focus + .label, .material-select select:focus + .label, .material-select .label, .textarea .label{
    top: -9px;
    left: 12px;
    max-width: 95%;
    font-size: 12px;
    background-color: #FFF;
    padding: 2px 4px;
    color: #4a7d65;
}

.input-text.filled .label, .input-number .label, .input-date .label, .input-email.filled .label, .material-select .label{
    color: #666;
}

label.input-text, label.input-date, div.radio-options, label.input-email, .material-select{
    margin-bottom: 24px;
}

#header-conteudo{
    align-items: flex-start;
}

#header-conteudo > h2{
    margin-right: 8px;
    min-width: 50%;
    max-width: 50%;
    font-size: 1.3em;
}

#header-conteudo > div{
    margin-left: 8px;
    min-width: 50%;
    max-width: 50%;
}

#header-conteudo > div > p{
    text-align: right;
    margin-right: 16px;
}

#header-conteudo > div > p:not(:first-child){
    font-size: 14px;
    color: #585858;
}

#termoContent > h4{
    margin-top: 14px;
    margin-bottom: 10px;
}

.ok{
    align-items: flex-start;
    padding-bottom: 4px;
}

#termo-lbl.ok > span{
    margin-right: 8px;
    margin-top: 6px;
}

#termo-lbl.ok > p{
    font-size: 14px;
}

form#conteudo{
    max-width: 700px;
}

.textarea{
    width: 100%;
    max-width: 700px;
    margin: 4px auto 12px auto;
}

.textarea textarea{
    width: 100%;
    min-height: 90px;
    max-height: 200px;
    max-width: 100%;
}

.textarea .label, .input-number .label{
    font-size: 14px;
}

.input-number input[type="number"] {
    width: 100%;
    max-width: 700px;
    margin: 4px auto 12px auto;
}

#despedida {
    display: none;
    text-align: center;
}

#despedidaFim {
    display: none;
    text-align: center;
}

.disp_table h4, .disp_table .options_table{
    width: 100%;
    margin: 0;
}
.disp_table .options_table{
    min-width: 455px;
}

.disp_table{
    align-items: center;
}

.options_table label.flex, .options_table > div{
    width: 50%;
    justify-content: center;
    text-align: center;
}

.options_table label.flex span{
    cursor: pointer;
}

#bass{
    margin: 24px 0 8px 0;
}

.questao{
    margin-top: 24px;
}

.questao h3, .questao p{
    margin-bottom: 12px;
    text-align: justify;
}

.firebaseui-idp-button {
    max-width: 240px !important;
}