/**
 * Style | AEPH do Brasil
 *
 * @author Thay Santos <saltythay@gmail.com>
 * @version 1.0
 * @copyright © 2019, aephdobrasil.com.br
 * 
 */

/**
*************** COLOR PALETTE ***************
*/

/** background
---------------*/

.bg-white {
    background-color: #fff;
}

.bg-black {
    background-color: #000;
}

.bg-blue {
    background-color: #003bcb;
}

.bg-blue-light {
    background-color: #2196f3;
}

.bg-blue-dark {
    background-color: #084cff;
}

.bg-yellow {
    background-color: #ffaf00;
}

.bg-grey {
    background-color: #363944 !important;
}

.bg-grey-light {
    background-color: #b9bfc9 !important;
}

.bg-green {
    background-color: #49962c !important;
}

.bg-green-light {
    background-color: #039f92 !important;
}

.bg-green-dark {
    background-color: #09753b !important;
}

/** gradient
---------------*/

.bg-blue-gradient {
    background-image: linear-gradient(to bottom right, #003bcb, #0028a9);
}

/** text color
---------------*/

.color-white {
    color: #fff;
}

.color-black {
    color: #000000 !important;
}

.color-blue {
    color: #003bcb !important;
}

.color-blue-light {
    color: #2196f3 !important;
}

.color-blue-dark {
    color: #084cff;
}

.color-yellow {
    color: #ffaf00 !important;
}

.color-grey {
    color: #363944;
}

.color-grey-light {
    color: #b9bfc9 !important;
}

.color-green {
    color: #49962c !important;
}

.color-light {
    color: #039f92 !important;
}

.color-green-dark {
    background-color: #09753b !important;;
}

/**
*************** FONT ***************
*/

.font-Raleway {
    font-family: 'Raleway', sans-serif;
}

/**
*************** HOMEPAGE ***************
*/

.main-homepage {
    width: 100%;
    background-image: url(../img/background/bg-01.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 12% 0 25% 0;
}

.main-homepage-logo {
    width: 90%;
    margin: 0 5% 10% 5%;
}

.main-homepage-text {
    width: 100%;
}


.main-homepage-text img {
    width: 80%;
}

.version {
    font-size: .8em;
    letter-spacing: 3px;
    color: #fff;
    text-align: center;
    width: 100%;
    margin: 10% 0% 0% 35%;
}

.main-homepage-text h1 {
    margin: 5% 0 3% 0;
    font-size: 1.2em;
}

.main-homepage-text p {
    font-size: .95em;
}

.main-homepage-btn {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 10%;
}

.main-homepage-btn a {
    flex-basis: 45%;
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 4%;
    font-size: .95em;
    font-weight: 600;
}

.main-homepage-btn a:hover {
    background-color: #fff;
    color: #2196f3;
}

.main-homepage-btn a:first-of-type:hover {
    background-color: #2196f3;
    border: 1px solid #2196f3;
    color: #fff;
}

/**
*************** MENU - HEADER ***************
*/

.main-menu {
    width: 100%;
    position: fixed;
    bottom: 0;
    box-shadow: 3px 3px 3px 5px #ccc;
    padding: 7% 2% 3% 2%;
    z-index: 999;
}

.main-menu-new {
    position: relative !important;
}

.main-menu-new .btn {
    width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 100%;
    text-align: center;
    font-size: 1.7em;
    position: fixed;
    left: 41%;
    bottom: 9%;
    padding: 5% 0 5% 2%;
}

.main-menu-btns {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}

.main-menu-btns p {
    font-weight: 600;
    padding-top: 7%;
}

.main-menu-btns a {
    text-align: center;
    flex-basis: 20%;
    font-size: 1.4em;
}

.main-menu-btns a span {
    font-size: .65em;
    color: #b6b6b6;
}

.main-header {
    width: 100%;
}

.main-header-search {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 0 0 8% 0;
    font-size: 1.35em;
}

.main-header-search form input[type='text'] {
    border: none;
    font-size: .75em;
    color: #fff;
    background-color: transparent;
}

.main-header-search form ::placeholder {
    color: #fff;
}

.main-header-title {
    font-size: 1.4em;
    padding-left: 7%;
    margin-top: 10%;
}


/**
*************** WELCOME ***************
*/

.main-welcome {
    width: 100%;
    background-image: url(../img/background/bg-03.png);
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 10% 0 0 0;
    margin-bottom: 60%;
}

.main-welcome-boxes {
    display: flex;
    width: 85%;
    margin: 10% auto 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
}

.welcome-boxes {
    flex-basis: 47%;
    text-align: center;
    overflow: hidden;
    padding: 5% 2%;
    border-radius: 10px;

    margin: 0 0 8% 0;
}


.welcome-boxes img {
    width: 40%;
}

.welcome-boxes p {
    margin: 10% 0 0 0;
    font-size: .75em;
    color: #515151;
    font-weight: 700;
}

.welcome-boxes p span {
    color: #00c4d6;
    font-style: italic;
    text-transform: capitalize;
    font-weight: 600;
}

/**
*************** PROPOSTAS ***************
*/

.main-proposta {
    width: 100%;
    background-image: url(../img/background/bg-04.png);
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 10% 0 25% 0;
}

.main-proposta .main-header-title,
.main-solicitacao-proposta .main-header-title {
    font-weight: 900;
}

.main-proposta .main-header-description {
    font-size: .9em;
    margin: 5% 0;
    padding-left: 7%;
    width: 95%;
}

.main-proposta-boxes {
    width: 100%;
    margin-top: 10%;

}

.proposta-boxes {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 5% 0;
    padding: 5% 3%;
    border-radius: 10px;
    box-shadow: 1px 1px 6px #979898;
}

.proposta-boxes-item-1 {
    padding: 3% 6%;
    font-size: 2em;
    border-radius: 5px;
    margin-right: 5%;
}

.proposta-boxes-item-1 a {
    color: #fff;
}

.proposta-boxes-item-2 {
    padding-top: 3%;
    margin-right: 2%;
    flex-basis: 35%;
}

.proposta-boxes-item-2 p:first-of-type,
.proposta-boxes-item-2 p a {
    font-size: .95em;
    color: #212121;
}

.proposta-boxes-item-2 p:last-of-type {
    font-size: .85em;
    color: #b9bfc9;
    margin-top: 5%;
    font-weight: 600;
}

.proposta-boxes-item-3 {
    padding-top: 7%;
    flex-basis: 40%;
    text-align: center;
}

.proposta-boxes-item-3 a {
    font-size: .95em;
    margin: 0;
    color: #b5bac3;
    cursor: pointer;
}

.proposta-boxes-item-3 a:nth-child(1) {
    color: #fdca5a;
}

.proposta-boxes-item-3 a:nth-child(2):hover {
    color: red;
}


.main-proposta-boxes-gerenciar {
    margin-top: 20%;
    margin-bottom: 50%;
}

.main-proposta-boxes-gerenciar .form-question-title {
    margin-bottom: 10%;
    color: #1a6cfe !important;
}

.form-question-title-subtitle {
    color: #363944;
    font-size: 1em;
    margin: 7% 0 2% 0;
}

.proposta-boxes-gerenciar {
    width: 80%;
    margin: 7% auto 0 auto;
    background-color: #f7f7f7;
    border: 1px solid #dddbdb;
    border-radius: 5px;
    text-align: center;
    padding: 4% 5%;
    color: #898989;
    font-weight: 800;
    font-size: .9em;
    transition: .3s;
}

.proposta-boxes-gerenciar:hover {
    background-color: #0028a9;
    color: #fff;
}

.main-proposta-boxes-gerenciar .active {
    border: 2px solid #bad969 !important;
    background: #ecf4dc !important;
    color: #bad969 !important;
    font-weight: bold !important;
}

/**
*************** PERFIL ***************
*/

.main-perfil {
    width: 100%;
    background-image: url(../img/background/bg-03.png);
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 10% 0 25% 0;
    margin-bottom: 30%;
}

.perfil-boxes-avatar {
    width: 100%;
    margin: 0 0 5% 0;
    text-align: center;
    overflow: hidden;
}

.perfil-boxes-avatar p {
    font-size: 1.6em;
}

.perfil-boxes-avatar img {
    border-radius: 100%;
    width: 130px;
    height: 130px;
    margin: 2% auto;
    border: 5px solid #fff;
}

.perfil-boxes-avatar input[type='file'] {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    overflow: hidden;
    opacity: 0;
    z-index: -1;
}

.perfil-boxes-avatar input[type='file']:focus + .file-input {
    color: #333333;
}

.perfil-boxes-avatar .file-input {
    display: block;
    position: relative;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.3em;
    font-weight: 600;
}

.file-input:hover {
    color: #3367d9;
}

.file-input[disabled] {
    cursor: wait;
}

.main-perfil-form {
    width: 90%;
    margin: 30% auto 0 auto;
}

.input-container {
    display: flex;
    width: 100%;
    margin-bottom: 12%;
}

.main-perfil-form .icon {
    text-align: center;
    color: #b6b6b6;
    font-size: 1.2em;
    padding: 3% 0 0 0;
}

.input-field {
    width: 100%;
    padding: 10px;
    outline: none;
    border: none;
    border-bottom: 1px solid #ccc;
    color: #212121;
}

.input-field ::placeholder {
    color: #212121;
}

.input-container select {
    width: 100%;
    color: #212121;
    font-size: .9em;
    padding: 3% 2%;
    border: 1px solid #ccc;
}

.input-field:focus {
    border: 2px solid dodgerblue;
}

.main-perfil-form .btn {
    padding: 4% 5%;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 10px;
    font-weight: 600;
    margin-top: 5%;
}

.main-perfil-form .btn:hover {
    opacity: .7;
}

/**
*************** SOLICITAÇÃO DE PROPOSTA ***************
*/

.form-question-title {
    color: #1a6cfe !important;
    font-weight: 600;
}

.form-question-title span {
    color: #fff !important;
    font-weight: bold;
    background-color: #1a6cfe;
    padding: 1% 2.3%;
    border-radius: 100px;
}

.tabs li {
    float: left;
    width: 50%;
    font-size: .85em !important;
    border-right: 2px solid #fff;
}

.tabs .tabs-title {
    font-size: .85em !important;
    font-weight: bold;
    display: block;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #888;
    padding: 20px 0;
    background: #ffffff;
    box-shadow: 1px 1px 10px #e4e4e4;
    border-radius: 10px 10px 0 0;
}

.tabs .tabs-title:hover,
.tabs .tabs-title.active {
    background: #ededed;
}

.tabgroup div {
    width: 100%;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.tabs_item_title {
    background-color: #ededed;
    color: #b2b2b2;
    font-weight: 900;
    padding: 6% 5%;
    font-size: 1.1em;
    margin-bottom: 20%;
}


.main-solicitacao-proposta {
    width: 100%;
    background-image: url(../img/background/bg-02.png);
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 10% 0 7% 0;
    margin-bottom: 10%;
}

.main-solicitacao-proposta-form {
    width: 100%;
    margin: 2% 0 90% 0;
}

.main-solicitacao-proposta-form-title {
    font-weight: 600;
    font-size: 1.4em;
    margin: 5% 0;
}

.form-question {
    width: 100%;
    margin-bottom: 15%;
}

.form-question-title {
    color: #363944;
    font-size: 1.1em;
    margin: 5% 0;
}

.form-question-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
    margin-bottom: 10%;
}

.question-item input[type='text'],
.question-item textarea {
    padding: 5%;
    border: 1px dashed #ccc;
    font-size: .9em;
    margin: 5% auto 0 auto;
    width: 95%;
    text-align: center;
}

.question-item-100 {
    flex-basis: 100% !important;
}

.form-question-item-img .question-item {
    flex-basis: 45%;
    margin: 2% 0;
    text-align: center;
}

.form-question-item-img label {
    cursor: pointer;
    color: #898989;
    background-color: #f7f7ff;
    border: 1px solid #e1e8f3;
    padding: 15% 5%;
    text-align: center;
    font-size: 1em;
    border-radius: 5px;
    width: 100%;
    float: left;
}

.form-question-item-img input[type='radio'],
.form-question-item-text input[type='radio'],
.form-question-item-img-left input[type='radio'] {
    display: none;
}

.form-question-item-img input[type='radio']:checked + label,
.form-question-item-text input[type='radio']:checked + label,
.form-question-item-img-left input[type='radio']:checked + label {
    background-color: #1a6cfe;
    border: 1px solid #1a6cfe;
    color: #fff;
}

.form-question-item-img input[type='checkbox'],
.form-question-item-text input[type='checkbox'],
.form-question-item-img-left input[type='checkbox'] {
    display: none;
}

.form-question-item-img input[type='checkbox']:checked + label,
.form-question-item-text input[type='checkbox']:checked + label,
.form-question-item-img-left input[type='checkbox']:checked + label {
    background-color: #1a6cfe;
    border: 1px solid #1a6cfe;
    color: #fff;
}

.form-question-item-img label img {
    width: 65%;
}

.form-question-item-img label p {
    margin-top: 10%;
    font-weight: 600;
    font-size: .95em;
}

.form-question-item-text label {
    cursor: pointer;
    color: #898989;
    background-color: #f7f7ff;
    border: 1px solid #e1e8f3;
    padding: 5%;
    text-align: center;
    font-size: 1em;
    border-radius: 5px;
    width: 100%;
    float: left;
}

.form-question-item-text .question-item,
.form-question-item-img-left .question-item {
    flex-basis: 95%;
    margin: 3% auto;
    text-align: center;
}

.form-question-item-text label p {
    font-weight: 600;
    font-size: .95em;
}

.form-question-item-img-left label {
    cursor: pointer;
    color: #898989;
    background-color: #f7f7ff;
    border: 1px solid #e1e8f3;
    padding: 5%;
    font-size: 1em;
    border-radius: 5px;
    width: 100%;
    display: flex;
}

.form-question-item-img-left label p {
    margin-top: 3%;
}

.form-question-item-img-left label img {
    margin-right: 5%;
    width: 15%;
}

.form-range {
    -webkit-appearance: none;
    width: 100%;
    height: 7px;
    border-radius: 5px;
    background: #066ae7;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #066ae7;
    cursor: pointer;
}

.form-range::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #066ae7;
    cursor: pointer;
}

.from-question-item-range .question-item {
    flex-basis: 100% !important;
    display: flex;
}

.question-item .question-item-range {
    background: url(../img/icon/icon-listas.png);
    padding: 5% 0;
    margin-bottom: 20%;
    flex-basis: 85%;
    margin-right: 5%;
}

.question-item-range-value {
    background-color: #535353;
    color: #fff;
    border-radius: 10px;
    font-size: 1.2em;
    height: 50px;
    width: 50px;
    padding-top: 5%;
}

.question-item select {
    width: 100%;
    padding: 3% 4%;
    background-color: #1a6cfe;
    border: none;
    color: #fff;
}

.question-item select option {
    background-color: #fff;
    color: #212121;
    font-size: 1em;
}


.solicitacao-proposta-form-btn {
    background-color: #0028a9;
    color: #fff;
    border: 0;
    padding: 4% 10%;
    cursor: pointer;
    margin-right: 5%;
    width: 100%;
    margin: 5% 0 0 0%;
    float: right;
}

.box-form-btn-up {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.solicitacao-proposta-form-btn-up-left {
    background-color: #0028a9;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 4% 10%;
    cursor: pointer;
    flex-basis: 45%;
    margin: 0 2.5% 5% 0% !important;

}

.solicitacao-proposta-form-btn-up-right {
    margin: 0 0 5% 2.5% !important;
    float: right;
    flex-basis: 45%;
    background-color: #0028a9;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 4% 5%;
    cursor: pointer;
    float: right;
}

.solicitacao-proposta-form-btn:hover,
.solicitacao-proposta-form-btn-up-left:hover,
.solicitacao-proposta-form-btn-up-right:hover {
    background-color: #00aeff;
}


.box-calculo-peso {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.question-special {
    flex-basis: 47%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.question-special-item {
    flex-basis: 100%;
    margin: 2% 0;
}

.question-special-item-form {
    flex-basis: 100%;
}

.question-special-item-form label {
    color: #a2a9bd;
    font-size: .9em;
}

.question-special-item-form input[type=text] {
    border: 1px solid #1161ff;
    border-radius: 10px;
    padding: 15% 10%;
    width: 85%;
    margin-top: 2%;
}

.question-special-item-form input::placeholder {
    text-align: right;
    font-size: .9em;
}

.question-special-item-text {
    flex-basis: 50%;
    font-size: .8em;
    text-align: left;
    padding-left: 5%;
}

.question-special-item-text p:first-of-type {
    color: #1161ff;
    font-weight: 600;
    font-size: 1.2em;
}

.question-special-item-volume-densidade {
    background-color: #f3f3fb;
    border: 1px solid #d2d9e5;
    padding: 5% 3%;
    border-radius: 10px;
}

.question-special-item-volume-densidade .text-blue {
    color: #1161ff;
    font-weight: 600;
    margin: 10% 0 5% 0;
    font-size: 2em;
}

.question-special-item-volume-densidade input {
    border: 1px solid #d2d9e5;
    padding: 5% 3%;
    margin: 5% 10% 5% 10%;
    font-size: .95em;
    width: 80%;
    border-radius: 10px;
}

.question-special-item-volume-densidade label {
    color: #a2a9bd;
    font-size: 1em;
}

.question-special-item-peso-bruto {
    text-align: center;
    width: 60%;
    margin: 5% auto;
}

.question-special-item-peso-bruto label {
    color: #a2a9bd;
    font-size: 1.3em;
}

.question-special-item-resultado {
    border-bottom: 1px solid #1161ff;
    color: #1161ff;
    padding-bottom: 5%;
    margin-top: 5%;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.question-special-item-resultado p {
    font-size: 2.5em;
}

.question-special-item-resultado span {
    color: #1161ff !important;
    font-size: 1em;
    padding-top: 10%;
}


.form-question-file-multiple .file-drop-area {
    border: 1px dashed #ccc;
    border-radius: 3px;
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: 26px 20px 30px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}


.form-question-file-multiple .fake-btn {
    background-color: #002184;
    border: none;
    border-radius: 3px;
    padding: 5% 10%;
    margin-right: 8px;
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
}

.form-question-file-multiple .file-msg {
    font-size: small;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: calc(100% - 130px);
    vertical-align: middle;
    color: #000;
}

.form-question-file-multiple .file-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
}

.form-question-file-multiple .file-input:focus {
    outline: none;
}

.form-calculo-reservatorio {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.form-calculo-reservatorio input {
    width: 100%;
}

.form-calculo-reservatorio-left,
.form-calculo-reservatorio-right {
    flex-basis: 47%;
}

.form-calculo-reservatorio-left-box01 {
    border: 1px solid #1a6cfe;
    color: #1161ff;
    padding: 15% 6%;
    margin: 10% 0 20% 0;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.form-calculo-reservatorio-left-box01-text {
    flex-basis: 50%;
    font-size: .8em;
    text-align: right;
    padding-right: 5%;
}

.form-calculo-reservatorio-left-box01-input {
    flex-basis: 50%;
    padding-top: 5%;
}

.form-calculo-reservatorio-left-box01-input input {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #1161ff;
    text-align: right;
    font-weight: bold;
    color: #9a9a9a;
    font-size: 1.3em;
}

.form-calculo-reservatorio-left-box01-input input::placeholder {
    text-align: right;
    color: #9a9a9a;
    font-weight: bold;
    font-size: .7em;
}

.form-calculo-reservatorio-left-box02 {
    border: 1px solid #e6e8f0;
    padding: 15% 6%;
    margin: 5% 0;
    background-color: #f3f3fb;
    color: #9a9a9a;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.form-calculo-reservatorio-left-box02-input input {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #9a9a9a;
    text-align: right;
    font-weight: bold;
    color: #9a9a9a;
    font-size: 1.3em;
    background-color: transparent;
}

.form-calculo-reservatorio-right {
    border: 1px solid #e6e8f0;
    padding: 15% 6% 10% 6%;
    background-color: #f3f3fb;
    color: #9a9a9a;
    border-radius: 15px;
    margin: 5% 0 0 0;
    text-align: center;
}

.form-calculo-reservatorio-right-text {
    font-size: .9em;
    font-weight: bold;
}

.form-calculo-reservatorio-right p {
    border-bottom: 1px solid #9a9a9a;
    text-align: right;
    font-weight: bold;
    color: #9a9a9a;
    font-size: 1.3em;
    background-color: transparent;
    margin-top: 20%;
}


/**
*************** MANUAIS ***************
*/

.main-manuais .main-header-search {
    margin: 0 0 5% 0;
}

.main-manuais {
    width: 100%;
    background-image: url(../img/background/bg-04.png);
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 10% 0 40% 0;
}

.main-manuais .main-header-title {
    font-weight: 900;
    margin-top: 0;
}

.main-manuais .main-header-description {
    font-size: .9em;
    margin: 2% 0 5% 0;
    padding-left: 7%;
    line-height: 1.5;
}

.manuais-form {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.manuais-form input {
    background-color: #002184;
    color: #fff;
    padding: 4%;
    border-radius: 50px 0px 0px 50px;
    border: none;
    font-size: .9em;
    flex-basis: 90%;
}

.manuais-form input::placeholder {
    color: #fff;
}

.manuais-form button {
    background-color: #002184;
    color: #fff;
    border: 0;
    padding: 4%;
    border-radius: 0px 50px 50px 0px;
    font-size: .9em;
    flex-basis: 10%;
}

.main-manuais-boxes {
    width: 95%;
    margin: 10% auto 0 auto;
}

.manuais-boxes {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 10% 0;
    padding: 5% 3%;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 1px 2px 7px #ccc;
}

.manuais-boxes-item-01 {
    flex-basis: 17%;
    overflow: hidden;
    text-align: center;
    padding-top: 5%;
}

.manuais-boxes-item-02 {
    flex-basis: calc(100% - 63%);
}

.boxes-item-02-tag {
    background-color: #009dc6;
    padding: 2%;
    padding-left: 7%;
    border-radius: 50px;
    color: #fff;
    font-weight: 600;
    font-size: .7em;
    width: 95%;
}

.boxes-item-02-title {
    font-size: 1em;
    font-weight: 600;
    margin: 7% 0;
}

.boxes-item-02-info {
    color: #757576;
    font-size: .75em;
    font-weight: 600;
}

.manuais-boxes-item-03 {
    flex-basis: 40%;
    text-align: right;
    padding-top: 5%;
}

.manuais-boxes-item-03 a:nth-child(1) {
    color: #ffcb50;
}

.manuais-boxes-item-03 a:nth-child(2) {
    color: #b4bbc5;
}

.manuais-boxes-item-03 a:nth-child(3) {
    color: #afafc8;
    font-size: 2em;
}

/**
*************** UPLOAD MANUAIS ***************
*/

.main-upload-manuais {
    width: 95%;
    margin: 20% auto 50% auto;
}

.upload-manuais-form-item {
    width: 100%;
    margin: 10% 0;
}

.upload-manuais-form-item label {
    color: #535353;
}

.upload-manuais-form-item input,
.upload-manuais-form-item select {
    width: 100%;
    padding: 4%;
    color: #535353;
    border: 1px solid #ccc;
    font-size: .9em;
}

.upload-manuais-form-item select {
    margin-top: 3%;
}

.upload-manuais-form-item select option {
    font-size: 1.2em;
}

.upload-manuais-form-item input::placeholder {
    color: #535353;
}

.upload-manuais-form-item-file {
    border: 1px dashed #ccc;
    padding: 10% 4%;
}

.upload-manuais-form-item-file-2 {
    border: 1px dashed #ccc;
    padding: 0 4% 12% 4%;
}

.upload-manuais-form-item-file .container {
    width: 85%;
    margin: 0 auto;
}

.upload-manuais-form-item-file label {
    display: block;
    margin: 0 auto 15px;
    text-align: center;
    color: #535353;
}

.upload-manuais-form-item-file .hidden,
.upload-manuais-form-item-file #uploadImg:not(.hidden) + label {
    display: none;
}

.upload-manuais-form-item-file #fileImage {
    display: none;
    margin: 0 auto;
}

.upload-manuais-form-item-file #upload {
    display: block;
    padding: 10px 25px;
    border: 0;
    margin: 0 auto;
    font-size: 15px;
    letter-spacing: 0.05em;
    cursor: pointer;
    background: #0054d4;
    color: #fff;
    outline: none;
    transition: 0.3s ease-in-out;
}

.upload-manuais-form-item-file #upload:hover,
.upload-manuais-form-item-file #upload:focus {
    background: #2f74eb;
}

.upload-manuais-form-item-file #upload:active {
    background: #2f74eb;
    transition: 0.1s ease-in-out;
}

.upload-manuais-form-item-file img {
    display: block;
    margin: 0 auto 15px;
}


#file {
    display: none
}

.file_label {
    display: block;
    margin: 3% auto 0 auto;
    font-size: 1em;
    width: 90%;
    line-height: 40px;
    background-color: #0054d4;
    color: #FFF !important;
    text-align: center;
    padding: 2%;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.file_label:hover {
    background-color: #2f74eb;
    color: #ffffff;
}

.upload-manuais-form-item-icon {
    font-size: 1em;
    padding-top: 10%;
    color: #535353;;
}


.upload-manuais-form-item-btn {
    padding: 5% 20%;
    border: none;
    text-align: center;
    background-color: #ffaf00;
    margin: 2% 0 5% 0;
    width: 100%;
    font-weight: 600;
    cursor: pointer;
}

.upload-manuais-form-item-btn:hover {
    background-color: #ffcb50;
    cursor: pointer;
}

/**
*************** NOTIFICAÇÕES ***************
*/

.box-delete {
    background-color: #f5f5f5;
    padding: 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 3% 0;
}

.box-delete p {
    flex-basis: 100%;
    text-align: center;
    margin-bottom: 6%;
    font-size: 1em;

}

.box-delete-yes,
.box-delete-no {
    flex-basis: 45%;
    text-align: center;
    padding: 3%;
    font-size: .9em;
    font-weight: 600;
    border-radius: 15px;
}

.box-delete-yes {
    background-color: darkred;
    color: #fff;
}

.box-delete-yes:hover {
    background-color: red;
}

.box-delete-no {
    background-color: darkgreen;
    color: #fff;
}

.box-delete-no:hover {
    background-color: green;

}

/**
*************** VISITAS AGENDADAS - AGENDAMENTO  ***************
*/

.visita-boxes-item-1 {
    padding-top: 6%;
}

.visita-boxes-item-3 {
    padding: 0 !important;
}

.visita-boxes-item-3 button {
    background-color: #9f9f9f;
    color: #fff;
    border-radius: 15px;
    padding: 5%;
    border: none;
    margin: 0 0 10% 0;
    width: 90%;
    cursor: pointer;
    font-size: .9em;
}

.visita-boxes-item-3-btn {
    background-color: #9f9f9f;
    color: #fff !important;
    border-radius: 15px;
    padding: 5% 30%;
    border: none;
    margin: 5% 0 10% 0 !important;
    cursor: pointer;
    font-size: .9em !important;
}

.proposta-boxes-item-3 button:hover,
.visita-boxes-item-3-btn:hover {
    background-color: #09753b;
}

.box-visita-saida {
    padding: 10%;
}

.box-visita-saida-icon {
    font-size: 3em;
}

.box-visita-saida-title {
    font-size: 1.3em;
}

.box-visita-saida-btn form {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-top: 5%;
}

.box-visita-saida-btn button {
    flex-basis: 45%;
    padding: 3% 5%;
    border-radius: 50px;
}

/**
*************** VISITAS AGENDADAS - CADASTRO  ***************
*/


.box-cadastro-visita {
    padding: 2% 3% 2% 3%;
}

.cadastro-visita-form {
    padding: 2% 5%;
}

.cadastro-visita-form input,
.cadastro-visita-form select {
    width: 100%;
    padding: 4%;
    font-size: .9em;

}

.cadastro-visita-form .input-container {
    margin: 0 0 4% 0;
}

.cadastro-visita-form select {
    border: 1px solid #d8d9dd;
}

.cadastro-visita-form .icon {
    padding-top: 3%;
}

.cadastro-visita-form-icons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    margin: 2% 0;
}

.cadastro-visita-form .btn {
    padding: 4% 2%;
    width: 100%;
    border: none;
    border-radius: 5px;
    margin-top: 5%;
    cursor: pointer;
}


/* 480px */

@media (min-width: 30em) {


    /**
*************** MENU - HEADER ***************
*/
    .main-menu {
        padding: 5% 2% 3% 2%;
    }

    .main-menu-new .btn {
        left: 43%;
        bottom: 9%;
        padding: 4% 0 4% 1.5%;
    }

    .main-menu-btns a {
        flex-basis: 22%;
        font-size: 1.6em;
    }

    .main-menu-btns a span {
        font-size: .7em;
    }

    .main-header-search {
        font-size: 1.5em;
    }

    .main-header-title {
        font-size: 1.7em;
        padding-left: 5%;
    }

    /**
*************** WELCOME ***************
*/
    .main-welcome {
        margin-bottom: 50%;
    }


    .main-welcome-boxes {
        width: 80%;
    }

    .welcome-boxes {
        flex-basis: 45%;
    }

    .welcome-boxes p {
        font-size: .85em;
    }

    /**
*************** PROPOSTAS ***************
*/
    .main-proposta {
        margin-bottom: 10%;
    }

    .main-proposta .main-header-description {
        font-size: 1em;
        margin: 5% 0;
        padding-left: 10%;
        width: 100%;
    }

    .main-proposta-boxes {
        width: 90%;
        margin: 10% auto 0 auto;
    }

    .proposta-boxes-item-2 p:first-of-type {
        font-size: 1.1em;
    }

    .proposta-boxes-item-2 p:last-of-type {
        font-size: 1em;
        margin-top: 3%;
    }

    .proposta-boxes-item-3 a {
        font-size: 1.1em;
    }

    .proposta-boxes-item-3 .icon-download3 {
        font-size: 1.7em !important;
    }

    .main-proposta-boxes-gerenciar {
        margin-top: 30%;
    }

    /**
*************** SOLICITAÇÃO DE PROPOSTA ***************
*/
    .main-solicitacao-proposta-form {
        padding: 0 7%;
    }

    .form-calculo-reservatorio-left-box01,
    .form-calculo-reservatorio-left-box02 {
        padding-left: 15%;
        padding-right: 15%;
    }

    .form-calculo-reservatorio-right {
        padding-left: 10%;
        padding-right: 10%;
    }

    /**
*************** MANUAIS ***************
*/
    .main-manuais .main-header-search {
        margin: 0 0 5% 0;
    }

    .main-manuais {
        padding: 5% 0 10% 0;
    }

    .main-manuais .main-header-title {
        font-size: 2em;
    }

    .main-manuais .main-header-description {
        font-size: 1.1em;
        margin: 2% 0 5% 0;
        padding-left: 5%;
    }

    .manuais-form input {
        font-size: 1em;
    }

    .manuais-form button {
        font-size: 1em;
    }

    .main-manuais-boxes {
        width: 90%;
    }

    .manuais-boxes {
        margin: 0 0 7% 0;
    }

    .manuais-boxes-item-01 {
        flex-basis: 22%;
        padding-top: 2%;
    }

    .boxes-item-02-tag {
        font-size: .8em;
    }

    .boxes-item-02-title {
        font-size: 1.4em;
    }

    .boxes-item-02-info {
        font-size: .85em;
    }

    .manuais-boxes-item-02 {
        flex-basis: calc(100% - 60%);
    }

    .manuais-boxes-item-03 {
        flex-basis: 30%;
        padding-top: 7%;
    }

    .manuais-boxes-item-03 a {
        font-size: 1.2em;
    }

    /**
*************** UPLOAD MANUAIS ***************
*/
    .main-upload-manuais {
        width: 90%;
        margin: 20% auto 50% auto;
    }

    .main-manuais-upload .main-header-title {
        margin-top: 15%;

    }

}

/* 640px */

@media (min-width: 40em) {

    /********** HOMEPAGE RESPONSIVE **********/
    .main-homepage {
        background-image: url(../img/background/bg-01-720.png);
        padding: 10% 0;
    }

    .main-homepage-logo {
        width: 70%;
        margin: 0 15% 5% 15%;
    }

    .main-homepage-text img {
        width: 60%;
    }

    .main-homepage-text h1 {
        margin: 5% 0 3% 0;
        font-size: 1.5em;
    }

    .main-homepage-text p {
        font-size: 1.2em;
    }

    .main-homepage-btn a {
        flex-basis: 40%;
        padding: 3% 4%;
        font-size: 1.1em;
    }

    /**
*************** MENU - HEADER ***************
*/
    .main-menu {
        padding: 5% 2% 3% 2%;
    }

    .main-menu-new .btn {
        left: 45%;
        bottom: 12%;
        padding: 3% 0 4% 1%;
    }

    .main-menu-btns a {
        flex-basis: 25%;
        font-size: 1.8em;
    }

    .main-menu-btns p {
        padding-top: 5%;
    }

    .main-menu-btns a span {
        font-size: .65em;
    }

    .main-header-search {
        font-size: 1.8em;
    }

    .main-header-title {
        font-size: 2.3em;
        padding-left: 10%;
    }


    /**
*************** WELCOME ***************
*/
    .main-welcome-boxes {
        width: 75%;
    }

    .welcome-boxes {
        flex-basis: 45%;
        margin-bottom: 7%;
        padding: 7% 2%;
    }

    .welcome-boxes img {
        width: 35%;
    }

    .welcome-boxes p {
        font-size: 1em;
    }

    /**
*************** PERFIL ***************
*/
    .main-perfil-form {
        width: 80%;
        margin: 12% auto 0 auto;
    }

    .input-container {
        margin-bottom: 10%;
    }

    .main-perfil-form .icon {
        font-size: 1.5em;
        padding: 2% 0 0 0;
    }

    /**
*************** UPLOAD MANUAIS ***************
*/
    .main-upload-manuais {
        width: 85%;
        margin: 20% auto 50% auto;
    }

    .main-manuais-upload .main-header-title {
        margin-top: 30%;

    }

    /**
*************** SOLICITAÇÃO DE PROPOSTA ***************
*/
    .question-special {
        width: 100%;
    }

    .question-special-item {
        flex-basis: 100%;
        margin: 2% 0;
    }

    .question-special-item-form input[type=text] {
        padding: 6%;
        width: 85%;
        margin-top: 2%;
    }

    .question-special-item-text {
        flex-basis: 100%;
        font-size: .8em;
    }

    .question-special-item-text p:first-of-type {
        font-size: 1.2em;
    }

    .question-special-item-volume-densidade {
        padding: 5% 3%;
    }

    .question-special-item-volume-densidade input {
        margin: 4% 5% 5% 5%;
        font-size: .9em;
        width: 90%;
    }

    .question-special-item-peso-bruto {
        width: 100%;
        margin: 5% auto;
    }


}

/* 720px */

@media (min-width: 45em) {

    /********** HOMEPAGE RESPONSIVE **********/
    .main-homepage {
        padding: 10% 10% 15% 10%;
    }

    .main-homepage-logo {
        width: 70%;
        margin: 0 15% 5% 15%;
    }

    .main-homepage-text img {
        width: 50%;
    }

    /**
*************** PROPOSTAS ***************
*/
    .main-proposta .main-header-description {
        font-size: 1.2em;
        margin: 2% 0;
        width: 95%;
    }

    .main-proposta-boxes {
        width: 80%;
        margin: 7% auto 0 auto;
    }

    .proposta-boxes {
        width: 100%;
        margin: 0 auto 2% auto;
        padding: 2% 3%;
    }

    .proposta-boxes-item-1 {
        font-size: 2.5em;
        padding: 5% 7%;
    }

    .proposta-boxes-item-2 {
        padding-top: 2%;
    }

    .proposta-boxes-item-2 p:first-of-type {
        font-size: 1.5em;
    }

    .proposta-boxes-item-2 p:last-of-type {
        font-size: 1.2em;
        margin-top: 3%;
    }

    .proposta-boxes-item-3 {
        padding-top: 5%;
    }

    .proposta-boxes-item-3 a {
        font-size: 1.5em;
    }

    .main-proposta-boxes-gerenciar {
        margin-top: 35%;
        width: 70%;
        margin: 35% auto 50% auto;
    }

    /**
*************** SOLICITAÇÃO DE PROPOSTA ***************
*/
    .solicitacao-proposta-form-btn-up {
        margin: 0 0 5% 50% !important;
    }

    .main-solicitacao-proposta-form {
        padding: 0 10%;
    }

    .form-question-title {
        font-size: 1.25em;
        margin: 2% 0;
    }

    .form-question-item-text .question-item {
        flex-basis: 47%;
    }

    .form-question-item-img-left .question-item {
        flex-basis: 31%;
    }

    .form-question-item-img-left label img {
        width: 25%;
    }

    .form-question-item-text label {
        padding: 10% 2%;
    }

    .form-question-item-img .question-item {
        flex-basis: 30%;
    }

    .question-item-range-value {
        padding-top: 3%;
    }

    .form-calculo-reservatorio-left-box01-text,
    .form-calculo-reservatorio-left-box02-text {
        font-size: 1em;
    }

    .form-calculo-reservatorio-right-text {
        font-size: 1.15em;
    }

    .form-calculo-reservatorio-right {
        padding-top: 10%;
    }

    .solicitacao-proposta-form-btn-up-left {
        background-color: #0028a9;
        color: #fff;
        border: 0;
        border-radius: 10px;
        padding: 4% 10%;
        cursor: pointer;
        flex-basis: 45%;
        margin: 0 2.5% 5% 0% !important;

    }

    .solicitacao-proposta-form-btn-up-right {
        margin: 0 0 5% 2.5% !important;
        float: right;
        flex-basis: 45%;
        background-color: #0028a9;
        color: #fff;
        border: 0;
        border-radius: 10px;
        padding: 4% 5%;
        cursor: pointer;
        float: right;
    }


    /**
*************** MANUAIS ***************
*/
    .main-manuais .main-header-title {
        font-size: 3em;
    }

    .main-manuais .main-header-description {
        font-size: 1.2em;
        margin: 2% 0 5% 0;
        padding-left: 10%;
    }

    .manuais-form {
        width: 85%;
        margin: 0 auto;
    }

    .manuais-form input {
        font-size: 1.1em;
    }

    .manuais-form button {
        font-size: 1.1em;
    }

    .main-manuais-boxes {
        width: 80%;
    }

    .manuais-boxes {
        margin: 0 0 5% 0;
    }

    .manuais-boxes-item-01 {
        flex-basis: 25%;
        padding-top: 1%;
    }

    .boxes-item-02-tag {
        font-size: .8em;
    }

    .boxes-item-02-title {
        font-size: 1.5em;
    }

    .boxes-item-02-info {
        font-size: .9em;
    }

    .manuais-boxes-item-02 {
        flex-basis: calc(100% - 60%);
    }

    .manuais-boxes-item-03 {
        flex-basis: 30%;
        padding-top: 7%;
    }

    .manuais-boxes-item-03 a {
        font-size: 1.5em;
    }

    .manuais-boxes-item-03 a:last-of-type {
        font-size: 2.5em;
    }


}

/* 768px */

@media (min-width: 48em) {

    /**
*************** MENU - HEADER ***************
*/
    .main-menu {
        padding: 3% 2% 3% 2%;
    }

    .main-menu-new .btn {
        width: 90px;
        height: 90px;
        bottom: 13%;
        padding: 3.5% 0 4% 1%;
        font-size: 2em;
    }

    .main-menu-btns a {
        font-size: 2em;
    }

    .main-menu-btns p {
        padding-top: 5%;
        font-size: 1.3em;
    }

    .main-menu-btns a span {
        font-size: .65em;
    }

    .main-header-search {
        padding: 0 5%;
        font-size: 1.5em;
    }

    .main-header-title {
        font-size: 2.5em;
    }


    /**
*************** WELCOME ***************
*/
    .main-welcome {
        padding-top: 7%;
    }

    .main-welcome-boxes {
        width: 70%;
    }

    .welcome-boxes {
        flex-basis: 45%;
        padding: 5% 0;
    }

    .welcome-boxes img {
        width: 40%;
    }

    .welcome-boxes p {
        font-size: 1em;
        margin: 10% 0 5% 0;
    }

    /**
*************** SOLICITAÇÃO DE PROPOSTA ***************
*/
    .question-special-item {
        flex-basis: 100%;
        margin: 2% 0;
    }

    .question-special-item-form {
        flex-basis: 100%;
    }


    .question-special-item-text {
        flex-basis: 100%;
        font-size: .87em;
    }


}

/* 900px */

@media (min-width: 56em) {

    /********** HOMEPAGE RESPONSIVE **********/
    .main-homepage {
        background-image: url(../img/background/bg-01-900.png);
        padding: 10% 20% 15% 20%;
    }

    .main-homepage-logo {
        width: 90%;
        margin: 0 5% 7% 5%;
    }

    .main-homepage-text img {
        width: 70%;
    }

    .main-homepage-text h1 {
        margin: 5% 0 3% 0;
        font-size: 2em;
    }

    .main-homepage-btn a {
        flex-basis: 45%;
        padding: 3% 4%;
        font-size: 1.2em;
    }

    /**
*************** PERFIL ***************
*/
    .main-perfil-form {
        width: 60%;
        margin: 12% auto 0 auto;
        margin-bottom: 25%;
    }

    .input-container {
        margin-bottom: 10%;
    }

    .main-perfil-form .icon {
        font-size: 1.5em;
        padding: 2% 0 0 0;
    }

    /**
*************** SOLICITAÇÃO DE PROPOSTA ***************
*/
    .main-solicitacao-proposta-form {
        padding: 0 10%;
    }

    .tabs li {
        float: left;
        width: 25%;
        font-size: .85em !important;
    }


    .tabs_item_title {
        padding: 3% 2%;
        margin-bottom: 10%;
    }


    .form-calculo-reservatorio {
        justify-content: space-around;
    }

    .form-calculo-reservatorio input {
        width: 100%;
    }

    .form-calculo-reservatorio-left,
    .form-calculo-reservatorio-right {
        flex-basis: 40%;
    }

    .form-calculo-reservatorio-left-box01 {
        padding: 10% 15%;
        margin: 10% 0 10% 0;
    }

    .form-calculo-reservatorio-left-box01-text {
        flex-basis: 45%;
        font-size: 1em;
    }

    .form-calculo-reservatorio-left-box01-input {
        flex-basis: 55%;
    }

    .form-calculo-reservatorio-left-box01-input input {
        font-size: 1.3em;
    }

    .form-calculo-reservatorio-left-box01-input input::placeholder {
        font-size: .8em;
    }

    .form-calculo-reservatorio-left-box02 {
        padding: 12% 15%;
        margin: 15% 0 5% 0;
    }

    .form-calculo-reservatorio-right {
        padding: 10% 5% 0 5%;
        margin: 3% 0 0 0;
    }

    .form-calculo-reservatorio-right-text {
        font-size: 1.1em;
    }

    .form-calculo-reservatorio-right p {
        font-size: 1.4em;
    }


    /**
*************** UPLOAD MANUAIS ***************
*/
    .main-upload-manuais {
        width: 70%;
        margin: 20% auto 30% auto;
    }

    .main-manuais-upload .main-header-title {
        margin-top: 30%;

    }
}

/* 1024px */

@media (min-width: 64em) {

    /**
*************** MENU - HEADER ***************
*/
    .main-menu {
        padding: 3% 20% 3% 20%;
    }

    .main-menu-new .btn {
        width: 100px;
        height: 100px;
        bottom: 15%;
        padding: 2.5% 0 4% 1%;
        font-size: 2.5em;
    }

    .main-menu-btns a {
        font-size: 2.2em;
    }

    .main-menu-btns p {
        padding-top: 7%;
        font-size: 1.4em;
    }

    .main-menu-btns a span {
        font-size: .6em;
    }

    .main-header {
        padding: 0 20%;
    }

    .main-header-search {
        font-size: 2em;
    }

    .main-header-title {
        font-size: 2em;
        padding-left: 0;
    }

    /**
*************** WELCOME ***************
*/
    .main-welcome {
        padding-top: 5%;
    }

    .main-welcome-boxes {
        width: 55%;
    }

    .welcome-boxes {
        flex-basis: 45%;
        margin-bottom: 5%;
    }

    .welcome-boxes p {
        font-size: 1.2em;
        margin: 10% 00 0;
    }

    /**
*************** PROPOSTAS ***************
*/
    .main-proposta .main-header-description {
        font-size: 1.3em;
        margin: 2% 0;
        width: 100%;
    }

    .main-proposta-boxes {
        width: 60%;
        margin: 7% auto 0 auto;
    }

    .proposta-boxes-item-1 {
        font-size: 3em;
        padding: 5% 7%;
    }

    .proposta-boxes-item-2 {
        padding-top: 2%;
    }

    .proposta-boxes-item-2 p:first-of-type {
        font-size: 1.7em;
    }

    .proposta-boxes-item-2 p:last-of-type {
        font-size: 1.3em;
        margin-top: 3%;
    }

    .proposta-boxes-item-3 {
        padding-top: 7%;
    }

    .proposta-boxes-item-3 a {
        font-size: 1.7em;
    }

    .main-proposta-boxes-gerenciar {
        width: 50%;
        padding: 2%;
        margin: 5% auto 50% auto;
        background-color: #fff;
    }

    /**
*************** PERFIL ***************
*/
    .perfil-boxes-avatar {
        width: 90%;
        margin: 12% auto 5% auto;
    }

    .perfil-boxes-avatar p {
        font-size: 2em;
    }

    .perfil-boxes-avatar .file-input {
        font-size: 1.7em;
    }

    /**
*************** SOLICITAÇÃO DE PROPOSTA ***************
*/
    .form-question {
        margin: 10% 0 5% 0;
    }

    .solicitacao-proposta-form-btn {
        width: 90%;
        margin: 0 5% 30% 5%;
        padding: 3% 2%;
    }

    .solicitacao-proposta-form-btn-up {
        margin: 0 0 5% 60% !important;
    }

    .main-solicitacao-proposta {
        padding-bottom: 2%;
    }

    .main-solicitacao-proposta {
        margin-bottom: 3%;
    }

    .main-solicitacao-proposta-form {
        padding: 0 15%;
        margin-bottom: 10%;
    }

    .main-solicitacao-proposta-form-title {
        margin: 0 0 5% 0;
    }

    .question-item-range-value {
        height: 70px;
        padding-top: 5%;
        font-size: 1.3em;
    }

    .question-special-item {
        flex-basis: 100%;
        margin: 2% 0;
    }

    .question-special-item-form {
        flex-basis: 100%;
    }

    .question-special-item-text {
        flex-basis: 100%;
    }

    .solicitacao-proposta-form-btn-up-left {
        background-color: #0028a9;
        color: #fff;
        border: 0;
        border-radius: 10px;
        padding: 4% 10%;
        cursor: pointer;
        flex-basis: 30%;
        margin: 0 2.5% 5% 0% !important;

    }

    .solicitacao-proposta-form-btn-up-right {
        margin: 0 0 5% 2.5% !important;
        float: right;
        flex-basis: 30%;
        background-color: #0028a9;
        color: #fff;
        border: 0;
        border-radius: 10px;
        padding: 4% 5%;
        cursor: pointer;
        float: right;
    }

    /**
*************** MANUAIS ***************
*/
    .main-manuais .main-header-description {
        padding-left: 0%;
    }

    .manuais-form {
        width: 100%;
    }


    .main-manuais-boxes {
        width: 65%;
    }

    .manuais-boxes {
        margin: 0 0 5% 0;
        padding: 4% 3% 0 4%;
    }

    /**
*************** UPLOAD MANUAIS ***************
*/
    .main-upload-manuais {
        width: 65%;
        margin: 30% auto 30% auto;
    }

    .main-manuais-upload .main-header-title {
        margin-top: 40%;

    }


}

/* 1200px */

@media (min-width: 75em) {

    /********** HOMEPAGE RESPONSIVE **********/
    .main-homepage {
        padding: 7% 20% 15% 20%;
    }

    .main-homepage-logo {
        width: 80%;
        margin: 0 10% 7% 10%;
    }

    .main-homepage-text img {
        width: 50%;
    }

    .main-homepage-text h1 {
        font-size: 2em;
    }

    .main-homepage-text p {
        font-size: 1.3em;
    }

    .main-homepage-btn a {
        flex-basis: 40%;
        font-size: 1.2em;
    }

    /**
*************** MENU - HEADER ***************
*/
    .main-menu {
        padding: 1% 30% 1% 30%;
    }

    .main-menu-new .btn {
        width: 80px;
        height: 80px;
        bottom: 8%;
        left: 47%;
        padding: 1.5% 0 2% .5%;
        font-size: 2em;
    }

    .main-menu-btns a {
        font-size: 1.5em;
    }

    .main-menu-btns p {
        padding-top: 7%;
        font-size: 1em;
    }

    .main-menu-btns a span {
        font-size: .6em;
    }

    .main-header-search {
        font-size: 1.5em;
        padding: 0;
    }

    .main-header-title {
        font-size: 2em;
        margin-top: 10%;
        text-align: center;
        padding: 0;
    }


    /**
*************** WELCOME ***************
*/
    .main-welcome {
        padding-top: 5%;
        margin-bottom: 15%;
    }

    .main-welcome-boxes {
        width: 85%;
        margin-top: 5%;
    }

    .welcome-boxes {
        flex-basis: 15%;
        padding: 4% 0;
    }

    .welcome-boxes p {
        font-size: 1em;
        margin: 10% 0 5% 0;
    }

    /**
*************** PROPOSTAS ***************
*/
    .main-proposta .main-header-description {
        font-size: 1.3em;
        margin: 2% auto;
        width: 70%;
        text-align: center;
        padding: 0;
    }

    .proposta-boxes {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 70%;
        margin: 0 auto 2% auto;
        padding: 3% 3%;
        border-radius: 10px;
    }

    .main-proposta-boxes {
        width: 80%;
        margin: 7% auto 0 auto;
    }

    .proposta-boxes-item-1 {
        font-size: 3em;
        padding: 2% 4%;
    }

    .proposta-boxes-item-2 {
        padding-top: 1%;
    }

    .proposta-boxes-item-2 p:first-of-type {
        font-size: 1.7em;
    }

    .proposta-boxes-item-2 p:last-of-type {
        font-size: 1.3em;
        margin-top: 2%;
    }

    .proposta-boxes-item-3 {
        padding-top: 4%;
    }

    .proposta-boxes-item-3 a {
        font-size: 1.5em;
        margin: 0 2%;
    }

    .main-proposta-boxes-gerenciar {
        width: 45%;
        padding: 2%;
        margin: 5% auto 0 auto;
        background-color: #fff;
    }

    /**
*************** PERFIL ***************
*/
    .main-perfil {
        padding: 5% 0 25% 0;
        margin-bottom: 0;
    }

    .perfil-boxes-avatar {
        width: 50%;
        margin: 7% auto 5% auto;
    }

    .perfil-boxes-avatar p {
        font-size: 2em;
    }

    .perfil-boxes-avatar .file-input {
        font-size: 1.7em;
    }

    .main-perfil-form {
        width: 40%;
        margin: 15% auto 0 auto;
        margin-bottom: 25%;
    }


    /**
*************** MANUAIS ***************
*/
    .main-manuais {
        padding: 5% 0;
        margin-bottom: 10%;
    }

    .main-manuais .main-header-description {
        font-size: 1.4em;
    }

    .manuais-form {
        width: 90%;
    }

    .main-manuais-boxes {
        width: 50%;
        margin-top: 5%;
    }

    .manuais-boxes {
        margin: 0 0 5% 0;
        padding: 4% 3% 4% 4%;
    }

    .manuais-boxes-item-01 {
        padding: 0;
    }


    /**
*************** UPLOAD MANUAIS ***************
*/
    .main-upload-manuais {
        width: 50%;
        margin: 5% auto 30% auto;
        background-color: #fff;
        padding: 1% 3%;
    }

    .main-manuais-upload .main-header-title {
        margin-top: 10%;

    }


    /**
*************** SOLICITAÇÃO DE PROPOSTA ***************
*/
    .main-solicitacao-proposta-form {
        padding: 0 22%;

    }

    .box-calculo-peso {
        margin-top: 5%;
    }

    .question-special-item {
        flex-basis: 100%;
        margin: 2% 0;
    }

    .question-special-item-form {
        flex-basis: 100%;
    }

    .question-special-item-text {
        flex-basis: 100%;
    }


    /**
*************** NOTIFICAÇÕES ***************
*/
    .box-delete {
        padding: 2% 5%;
        margin: 3% auto;
        width: 60%;
    }

    .box-delete p {
        font-size: 1.2em;

    }

    .box-delete-yes,
    .box-delete-no {
        flex-basis: 30%;
        padding: 2% 3%;
    }


    /**
*************** VISITAS AGENDADAS - AGENDAMENTO  ***************
*/
    .proposta-boxes-item-3 button {
        margin-bottom: 5%;
        width: 75%;
        margin-bottom: 10%;
    }


}

/* 1366px */

@media (min-width: 85em) {

    /********** HOMEPAGE RESPONSIVE **********/
    .main-homepage {
        padding: 4% 30% 10% 30%;
    }

    .main-homepage-logo {
        width: 80%;
        margin: 0 10% 7% 10%;
    }

    .version {
        margin-left: 40%;
    }

    .main-homepage-text h1 {
        margin: 5% 0 3% 0;
        font-size: 1.9em;
    }

    .main-homepage-text p {
        font-size: 1em;
    }

    .main-homepage-btn {
        margin-top: 7%;
    }

    .main-homepage-btn a {
        flex-basis: 45%;
        font-size: 1em;
    }
}

/**
*************** PROPOSTA SOLICITADA ***************
*/

.box-proposta-solicitada {
    background-color: #f7f7f7;
}

.proposta-solicitada-titles {
    background-color: #0029b8;
    padding: 2% 5%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.proposta-solicitada-titles-left,
.proposta-solicitada-titles-right {
    flex-basis: 50%;
}

.proposta-solicitada-titles-left {
    color: #fff;
    float: left;
}

.proposta-solicitada-titles-left p {
    margin-left: 14%;
}

.proposta-solicitada-titles-left p:first-of-type {
    font-weight: bold;
}

.proposta-solicitada-titles-left p:nth-child(3) {
    font-size: 2.3em;
}

.proposta-solicitada-titles-right {
    text-align: right;
}

.proposta-solicitada-titles-right img {
    width: 40%;

}

.proposta-solicitada {
    background-color: #fff;
    padding: 5%;
    box-shadow: 1px 1px 10px #c1c2c7;
    margin-bottom: 10%;
}

.proposta-solicitada-item {
    width: 100%;
    margin: 0 0 5% 0;
}

.proposta-solicitada-item-title {
    background-color: #002bbb;
    padding: .5% 2%;
    color: #fff;
    font-size: 1.3em;
    border-radius: 15px;
    font-weight: 400;
}

.proposta-solicitada-item-form {
    padding: 0 5%;
    margin: 2% 0;
}

.item-form-question {
    font-size: 1.2em;
    color: #2e2f30;
}

.item-form-answer {
    padding-left: 2%;
    margin-top: 1%;
    color: #002bbb;
    font-weight: 600;
}

.proposta-solicitada-titles-left .container {
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

.pulse-button {
    float: left;
    width: 70px;
    height: 70px;
    font-size: 1.3em;
    font-weight: light;
    text-transform: uppercase;
    text-align: center;
    line-height: 70px;
    letter-spacing: -1px;
    color: white;
    border: none;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
    -webkit-animation: pulse 1.5s infinite;
}

.pulse-button:hover {
    -webkit-animation: none;
}

@-webkit-keyframes pulse {
    0% {
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    70% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
    }

    100% {
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
    }
}


/* 768px MAX */

@media (max-width: 48em) {

    /**
*************** PROPOSTA SOLICITADA ***************
*/
    .proposta-solicitada-titles {
        padding: 2% 5%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .proposta-solicitada-titles-left,
    .proposta-solicitada-titles-right {
        flex-basis: 100%;
    }

    .proposta-solicitada-titles-left {
        margin: 2% 20%;
    }

    .proposta-solicitada-titles-left p {
        margin-left: 18%;
    }


    .proposta-solicitada-titles-right {
        text-align: right;
    }

    .proposta-solicitada-titles-right img {
        width: 20%;

    }

    .proposta-solicitada-item-title {
        padding: 2% 3%;
        font-size: 1.2em;
    }

    .proposta-solicitada-item-form {
        padding: 0 5%;
        margin: 5% 0;
    }
}

/* 640px MAX */

@media (max-width: 40em) {

    /**
*************** PROPOSTA SOLICITADA ***************
*/
    .proposta-solicitada-titles {
        padding: 3% 5%;
    }

    .proposta-solicitada-titles-left {
        margin: 2% 10%;
    }

    .proposta-solicitada-titles-right {
        margin-top: 3%;
    }

    .proposta-solicitada-titles-right img {
        width: 30%;
    }
}

/* 480px MAX */

@media (max-width: 30em) {

    /**
*************** PROPOSTA SOLICITADA ***************
*/
    .proposta-solicitada-titles-left p:first-of-type {
        font-size: .8em;
    }

    .proposta-solicitada-titles-left p:nth-child(3) {
        font-size: 1.5em;
    }

    .proposta-solicitada-titles {
        padding: 3% 0;
    }

    .proposta-solicitada-titles-left {
        margin: 2% 5%;
    }

    .proposta-solicitada-titles-left p {
        margin-left: 25%;
    }

    .proposta-solicitada-titles-right img {
        width: 50%;
        margin-right: 5%;
    }

    .proposta-solicitada-item-title {
        padding: 4% 10%;
        font-size: 1em;
    }

    .proposta-solicitada-item-form {
        padding: 0 5%;
        margin: 10% 0;
    }

    .item-form-question {
        font-size: 1em;
        color: #2e2f30;
    }

    .item-form-answer {
        font-size: .9em;
    }
}


/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.img-replace {
    /* replace text with an image */
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    color: transparent;
    white-space: nowrap;
}

/* -------------------------------- 

xnugget info 

-------------------------------- */
.cd-nugget-info {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 50px;
    line-height: 50px;
    bottom: 0;
    left: 0;
}

.cd-nugget-info a {
    position: relative;
    font-size: 14px;
    color: #5e6e8d;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

.no-touch .cd-nugget-info a:hover {
    opacity: .8;
}

.cd-nugget-info span {
    vertical-align: middle;
    display: inline-block;
}

.cd-nugget-info span svg {
    display: block;
}

.cd-nugget-info .cd-nugget-info-arrow {
    fill: #5e6e8d;
}


/* --------------------------------

xpopup 

-------------------------------- */
.cd-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(94, 110, 141, 0.9);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
    transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

.cd-popup.is-visible {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup-container {
    position: relative;
    width: 90%;
    max-width: 400px;
    margin: 2em auto;
    background: #FFF;
    border-radius: .25em .25em .4em .4em;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
    /* Force Hardware Acceleration in WebKit */
    -webkit-backface-visibility: hidden;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.cd-popup-container p {
    padding: 3em 1em;
}

.cd-popup-container .cd-buttons:after {
    content: "";
    display: table;
    clear: both;
}

.cd-popup-container .cd-buttons li {
    float: left;
    width: 50%;
    list-style: none;
}

.cd-popup-container .cd-buttons a {
    display: block;
    height: 60px;
    line-height: 60px;
    text-transform: uppercase;
    color: #FFF;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

.cd-popup-container .cd-buttons li:first-child a {
    background: #fc7169;
    border-radius: 0 0 0 .25em;
}

.no-touch .cd-popup-container .cd-buttons li:first-child a:hover {
    background-color: #fc8982;
}

.cd-popup-container .cd-buttons li:last-child a {
    background: #b6bece;
    border-radius: 0 0 .25em 0;
}

.no-touch .cd-popup-container .cd-buttons li:last-child a:hover {
    background-color: #c5ccd8;
}

.cd-popup-container .cd-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
}

.cd-popup-container .cd-popup-close::before,
.cd-popup-container .cd-popup-close::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 14px;
    height: 3px;
    background-color: #8f9cb5;
}

.cd-popup-container .cd-popup-close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 8px;
}

.cd-popup-container .cd-popup-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 8px;
}

.is-visible .cd-popup-container {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

@media only screen and (min-width: 1024px) {
    .cd-popup-container {
        margin: 2em auto;
    }
}

/**
*************** BOX INFORMAÇÕES COMPONENTES ***************
*/

.box-componente-info {
    width: 100%;
    margin: 0 0 10% 0;
    background-color: #f3f3fb;
    border: 1px solid #e6e8f0;
    padding: 6% 8%;
}

.box-componente-info img {
    margin-right: 3%;
    margin-top: -1%;
}

.box-componente-info p:first-of-type {
    color: #8a8a8a;
    font-size: 1.1em;
    margin-bottom: 5%;
}

.box-componente-info p:last-of-type {
    color: #929292;
    font-size: .9em;
}

.box-dosagem-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all ease .5s;
    margin-top: -5%;
}

.box-dosagem-info i {
    font-size: 2.2em;
    color: #1771ff;
}

.box-dosagem-info .desc {
    margin-left: 10px;
}

.box-dosagem-info .desc p:first-of-type {
    font-size: 1em;
    margin: 0;
}

.box-dosagem-info .desc p:last-of-type {
    font-size: 1.3em;
    color: #1771ff;
    margin: 0;
}


/* 1200px */

@media (min-width: 75em) {

    .box-componente-info {
        margin: 0 0 10% 0;
        padding: 4% 5%;
    }

    .box-componente-info img {
        margin-right: 1%;
        margin-top: 0;
    }

    .box-componente-info p:first-of-type {
        font-size: 1.3em;
        margin-bottom: 2%;
    }

    .box-componente-info p:last-of-type {
        font-size: 1em;
    }

}

/**
*************** NOTICES ***************
*/

.notice-error {
    background-color: #fe8484;
    padding: 4% 2%;
    text-align: center;
    border-radius: 5px;
    margin: 0 0 10% 0;
    width: 100%;
    text-transform: uppercase;
    color: #900505;
    font-weight: 600;
    font-size: .9em;
    border-left: 3px solid #900505;
    border-right: 3px solid #900505;
}

.notice-warning {
    background-color: #fdd846;
    padding: 4% 2%;
    text-align: center;
    border-radius: 5px;
    margin: 0 0 10% 0;
    width: 100%;
    text-transform: uppercase;
    color: #8d7102;
    font-weight: 600;
    font-size: .9em;
    border-left: 3px solid #dcb001;
    border-right: 3px solid #dcb001;
}

.notice-accept {
    background-color: #b2ffa5;
    padding: 4% 2%;
    text-align: center;
    border-radius: 5px;
    margin: 0 0 10% 0;
    width: 100%;
    text-transform: uppercase;
    color: #19a103;
    font-weight: 600;
    font-size: .9em;
    border-left: 3px solid #19a103;
    border-right: 3px solid #19a103;
}

.notice-error span,
.notice-warning span,
.notice-accept span {
    color: #000;
    text-transform: none;
    font-weight: 500;
}

/** POP UP **/

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 4%;
    border: 1px solid #888;
    width: 90% !important;
}

.modal-peso .modal-content {
    background-color: #f2f2f2 !important;
    padding-bottom: 5%;
}

.modal-peso .modal-content p:first-of-type {
    margin: 5% 0%;
    color: #0577c9;
    padding-bottom: 1%;
    border-bottom: 2px solid #0577c9;
    font-size: 1.2em;
    font-weight: bold;
}


/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 2.5em;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-content .form-question-title:nth-child(1) {
    text-align: center;
    margin-bottom: 10% !important;
    font-size: 1.3em;
}

.modal-content .form-question-title:nth-child(2) {
    color: #82838b !important;
    font-weight: 500;
}

.modal-content-proposta {
    text-align: center;
    padding: 10% 0%;
}

.modal-content-proposta i {
    font-size: 3em;
    color: #1a6cfe;
    margin-bottom: 2%;
}

.modal-content-proposta span:first-of-type {
    font-size: 1.1em;
    color: #1a6cfe;
    margin: 20% 0%;
}

.modal-content-proposta span:last-of-type {
    background-color: #0035c0;
    color: #fff;
    margin: 5% 0;
    padding: 10px 30px;
    cursor: pointer;
}

.modal-content-proposta span:last-of-type:hover {
    opacity: .8;
}


/* 720px */

@media (min-width: 45em) {
    /* Modal Content */
    .modal-content {
        width: 60% !important;
    }
}

/* 1024px */

@media (min-width: 64em) {

    /* Modal Content */
    .modal-content {
        width: 40% !important;
    }

    .modal-content-proposta {
        text-align: center;
        padding: 5% 0% 0 0;
    }
}

/* upload - formulário
-----------------------*/

.form-question-upload-selected {
    border: 2px solid #bad969 !important;
}

.form-question-upload-selected .filupp {
    background: #ecf4dc !important;
    color: #bad969 !important;
    font-weight: bold !important;
}

.form-question-upload-selected .upload-img-black {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    filter: none; /* IE */
}

.upload-img-edit {
    width: 35px;
    margin-top: -8%;
}

/* 1024px */

@media (min-width: 64em) {
    .upload-img-edit {
        width: 40px;
        margin-top: -5%;
        margin-left: -10%;
    }
}


.form-question-upload {
    width: 80%;
    text-align: center;
    margin: 15% 10% 5% 10%;
    overflow: hidden;
    border-radius: 5px;
    border: 2px dashed #dddbdb;
    text-transform: uppercase;
}

.filupp > input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);

}

.filupp {
    position: relative;
    background: #fbfbfb;
    display: block;
    padding: 1em;
    font-size: .9em;
    width: 100%;
    height: 3.8em;
    color: #898989;
    cursor: pointer;
    box-shadow: 0 1px 3px #0b0b0b;
    transition: .3s;
}

.filupp:hover {
    background-color: #f3f3f3;
}

.filupp-file-name {
    width: 75%;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

.upload-img-black {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray; /* IE */
}

/*
   enviar e-mail
------------------*/

.form-email {
    width: 80%;
    margin: 12% 10% 5% 10%;
    text-align: right;
}

.form-email button {
    background-color: #0036c2;
    color: #fff;
    border: none;
    padding: 14px 0px;
    cursor: pointer;
    transition: .3s;
    width: 100%;
}

.form-email button:hover {
    background-color: #1a6cfe;
}

/**
*****   UPLOAD ARQUIVOS   *****
 */


.upload-file :focus {
    outline: 0;
    box-shadow: 0 0 .0625rem .25rem #5e9ed6;
}

.upload-file .hidden {
    display: none;
}

.upload-file .visually-hidden {
    position: absolute !important;
    overflow: hidden !important;
    width: .0625rem !important;
    height: .0625rem !important;
    padding: 0 !important;
    border: 0 !important;
    margin: -.0625rem !important;
    clip: rect(0 0 0 0) !important;
}

.upload-file .anchor {
    border-radius: .125rem;
    color: #0036c2;
}

.upload-file .button {
    display: block;
    padding: .375rem .75rem;
    border: none;
    background-color: #0036c2;
    color: #fff;
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
    cursor: pointer;
}

.upload-file {
    max-width: 100%;
}

.upload-file .file {
    padding-left: 0;
    list-style: none;
}

.upload-file .file__item {
    display: flex;
    align-items: center;
    padding: .5rem;
    border-radius: .125rem;
    margin-bottom: .0625rem;
    background-color: #f0f0f0;
}

.upload-file .file__name {
    flex-basis: 40%;
    overflow: hidden;
    padding: .3125rem;
    margin-right: .5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-file .file__status {
    flex-basis: 40%;
    margin-right: .5rem;
}

.upload-file .file__status--success {
    color: #008000;
}

.upload-file .file__status--error {
    color: #800000;
}

.upload-file .file__remove {
    flex-basis: 20%;
}

.upload-file .dropzone {
    margin-bottom: 1rem;
    margin-top: 5%;
}

.upload-file .dropzone--actual {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    border: .125rem dashed #ccc;
    border-radius: .125rem;
}

.upload-file .dropzone--actual .dropzone__label {
    margin-bottom: 0;
}

.upload-file .dropzone--actual .dropzone__label::after {
    content: '';
}

.upload-file .dropzone--actual .dropzone__label--focused {
    outline: 0;
    box-shadow: 0 0 .0625rem .25rem #5e9ed6;
}

.upload-file .dropzone--actual .dropzone__file {
    position: absolute;
    left: -9999em;
}

.upload-file .dropzone--actual .dropzone__upload {
    display: none;
}

.upload-file .dropzone--dragover {
    background-color: #ddd;
}

.upload-file .dropzone__label {
    display: inline-block;
    margin-bottom: .5rem;
}

.upload-file .dropzone__label::after {
    content: ':';
}

.upload-file .dropzone__file {
    display: block;
    padding: .375rem .75rem;
    border: .0625rem solid #0036c2;
    border-radius: .125rem;
    font-family: inherit;
    font-size: inherit;
}

.upload-file .dropzone__upload {
    margin-top: .5rem;
}

.upload-boxes {
    margin: 5% 10%;
}

.upload-boxes-item {
    background-color: #f3f3fb;
    border: 1px solid #e6e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    margin: 0 0 4% 0;
}

.upload-boxes-item-icon {
    flex-basis: 10%;
    width: 10%;
    font-size: 2em;
    color: #487cff;
}

.upload-boxes-desc {
    flex-basis: 65%;
    width: 65%;
}

.upload-boxes-desc p {
    color: #9a9a9a;
    font-size: .8em;
}

.upload-boxes-desc a {
    color: #487cff !important;
    font-size: .75em;
}

.upload-boxes-item-btn{
    flex-basis: 20%;
    width: 20%;
    color: #aeb3c0;
}

.upload-boxes-item-btn a,
.upload-boxes-item-btn button{
    color: #aeb3c0;
    margin: 0 5px;
    border: none;
    cursor: pointer;
    transition: .3s;
}

.upload-boxes-item-btn a:hover{
    color: #7e828f;
}

.upload-boxes-item-btn button:hover{
    color: darkred;
}

.modal-delete button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

.modal-delete button:hover {
    opacity:1;
}

/* Float cancel and delete buttons and add an equal width */
.modal-delete .cancelbtn, .modal-delete .deletebtn {
    float: left;
    width: 50%;
}

/* Add a color to the cancel button */
.modal-delete .cancelbtn {
    background-color: #ccc;
    color: black;
}

/* Add a color to the delete button */
.modal-delete .deletebtn {
    background-color: #f44336;
}


/* The Modal (background) */
.modal-delete {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #474e5d;
    padding-top: 50px;
}

/* Modal Content/Box */
.modal-delete .modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* Style the horizontal ruler */
.modal-delete hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}

/* The Modal Close Button (x) */
.modal-delete .close {
    position: absolute;
    right: 35px;
    top: 15px;
    font-size: 40px;
    font-weight: bold;
    color: #f1f1f1;
}

.modal-delete .close:hover,
.modal-delete .close:focus {
    color: #f44336;
    cursor: pointer;
}

/* Clear floats */
.modal-delete .clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.modal-delete .container{
    text-align: center;
}
.modal-delete .container h1{
    color: darkred;
    font-weight: bold;
    margin-bottom: 2%;
    text-transform: uppercase;
}

.modal-delete .container p{
    font-size: .9em;
    margin: 2% 0;
}


/* Change styles for cancel button and delete button on extra small screens */
@media screen and (max-width: 300px) {
    .modal-delete .cancelbtn, .modal-delete .deletebtn {
        width: 100%;
    }
}

.proposta-solicitada-item-form .upload-boxes {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.proposta-solicitada-item-form .upload-boxes .upload-boxes-item{
    flex-basis: 32%;
    margin: 0 0 2% 0;
}

.proposta-solicitada-item-form .upload-boxes .upload-boxes-item .upload-boxes-desc{
    margin: 0 15px;
}
.proposta-solicitada-item-form .upload-boxes .upload-boxes-item .upload-boxes-item-btn{
    color: #487cff !important;
}