img, a{
    border:none;
}

a{
    color:#85B200;
    text-decoration: none;
}

a:hover{
    color:#F90;
}

html, body{
    margin:0;
    padding:0;
    background-color: #EDEDED;
    color:#666;
    font-family: verdana;
    height: 100%;
}

header{
    padding: 0.1px 0;
}

::placeholder{
    color:#CCC;
}

.obs{
    font-style: italic;
    font-size:12px !important;
}

.contentMessage{
    padding: 15px;
    font: bolder 20px verdana;
    line-height: 25px;
    text-align: center;
}

.returnMessage {
    color:#333;
}

.floatBar{
    color:#FFF !important;
}

.messageError{
    background-color: rgba(255, 234, 234, 0.9) !important;
    color: #900 !important;
    border-color: #900;
}

.messageDone{
    background-color: rgba(236, 255, 230, 0.9) !important;
    color: #008C00 !important;
    border-color: #008C00;
}

.motivoCancelamento{
    background-color: #FBF5EF;
    padding: 10px;
    font-size: 12px;
    border:1px solid #900;
    color:#900;
    margin: 10px;
}

.motivoCancelamento b{
    margin-right: 5px;
}

#targetJson{
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 -3px 3px rgba(0,0,0,0.2);
    z-index: 950;
}

#targetJson .contentMessage{
    background-color: rgba(0,0,0,0.9);
}

#targetJson .messageError{
    border-color: none;
}

#targetJson .messageDone{
    border-color: none;
}

#targetJson .material-icons{
    vertical-align: middle;
    margin-right: 10px;
}


.btn_model{
    display: inline-block;
    padding: 10px 20px;
    margin: 0;
    margin-top: 20px;
    margin-right: 20px;
    font-size: 20px;
    border-radius: 10px;
}

.btn_model .material-icons{
    vertical-align: middle;
    margin-right: 10px;
}

.bgBlue{
    color: #FFF;
    background-image: linear-gradient(#0099FF, #0066CC);
}

.bgBlue:hover{
    color: #FFF;
    background-image: linear-gradient(#0066CC, #0099FF);
}

.bgRed{
    color: #FFF;
    background-image: linear-gradient(#F92323, #C63C3C);
}

.bgRed:hover{
    color: #FFF;
    background-image: linear-gradient(#C63C3C, #F92323);
}

.mobileMenu{
    display: none !important;
}


.login{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: linear-gradient(#0099FF, #0066CC);
}

.login .content{
    border:1px solid #CCC;
    background-color: #FFF;
    padding: 20px;
    margin: 10px;
    box-shadow: 5px 5px 3px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 350px;
}

.login .content .campo{
    margin: 15px 0;
    display: block;
}

.login .content .campo .text{
    border:1px solid #CCC;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    font-size: 16px;
    color:#666;
}

.login .content .campo label{
    display: block;
}

.login .content .btns{
    margin: 10px 0;
}

.login .content .btns .btn{
    margin: 0;
    border:3px solid #FFCC66;
    color:#FFF;
    background-color: #F90;
    box-shadow: none;
}

.login .content .btns .btn:hover{
    color:#666;
    background-color: #FFCC66;
}

.login .content p{
    line-height: 2;
}

.login .content .plano{
    padding: 10px;
    background-color: #EFF5F2;
    margin: 10px;
    border:1px dashed #C7DCD1
}

.login .content .plano p{
    padding: 5px;
    margin: 5px;
}

.login .content .resumo{
    font-weight: bolder;
}

.login .content .enabled{
    color: #85B200;
}

.login .content .disabled{
    color: #AE271E;
}

.btnCheckUncheck{
    margin: 5px;
    padding: 5px;
    font-size: 12px;
    display: inline-block;
}

.btnCheckUncheck a{
    margin-right: 15px;
}

.fixed{
    position: fixed;
    z-index: 899;
}

.shadow{
    box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
}

.breadcrumbs{
    margin-top: 30px;
}

.breadcrumbs a, .breadcrumbs span{
    color: inherit;
    text-decoration: none;
    font-size: 18px;
    white-space: nowrap
}

.breadcrumbs a:after, .breadcrumbs span:after{
    content: " »";
}

.breadcrumbs a:hover{
    color: #85B200;
}

.breadcrumbs a:last-child::after, .breadcrumbs span:last-child::after{
    content: normal;
}

.breadcrumbs a:last-child{
    pointer-events: none;
}


nav{
    font-size: 14px;
    color:#FFF;
    height: 55px;
}

nav .navBar .logo{
    font-weight: bolder;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}



.cancelar{
    margin: 20px 0;
    border:1px solid #CCC;
    background-color: #EFEFEF;
    padding: 10px;
    display: none;
}

.cancelar h3 .material-icons{
    vertical-align: -8px;
    margin-right: 5px;
    font-size: 32px;
}

.cancelar textArea{
    border:1px solid #CCC;
    padding: 20px;
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    resize: vertical;
    font-size: 12px;
    font-family: verdana;
    line-height: 18px;
    color:#666;
    margin: 15px 0;
}

.cancelar .btns{
    margin: 0;
    padding: 0;
}

.cancelar .btns .btn{
    background-color: #088A29;
    color: #FFF;
}

.cancelar .btns .btn:hover{
    background-color: #01DF3A;
}

.cancelar .btns .cancel{
    background-color: #CCC;
    color: #666;
}

.cancelar .btns .cancel:hover{
    background-color: #AAA;
}


.darkBlue{
    background-color: #00698C;
    color:#FFF;
}

.darkBlue .menuList li a{
    color:#FFF;
}

.darkBlue .menuList li a:hover, .btns .darkBlue:hover{
    background-color:#0089B7;
}

.darkRed{
    background-color: #900;
    color:#FFF;
}

.darkRed .menuList li a{
    color:#FFF;
}

.darkRed .menuList li a:hover, .btns .darkRed:hover{
    background-color:#750000;
}


.darkGreen{
    background-color: #238C00;
    color:#FFF;
}

.darkGreen .menuList li a{
    color:#FFF;
}

.darkGreen .menuList li a:hover, .btns .darkGreen:hover{
    background-color:#30BF00;
}



.grey1{
    background-color: #AAA;
    color:#FFF;
}

.grey1 .menuList li a{
    color:#FFF;
}

.grey1 .menuList li a:hover, .btns .grey1:hover{
    background-color:#BBB;
}



.grey2{
    background-color: #CCC;
    color:#666;
}

.grey2 .menuList li a{
    color:#666;
}

.grey2 .menuList li a:hover, .btns .grey2:hover{
    background-color:#AAA;
    color:#FFF;
}



.grey3{
    background-color: #EEE;
    color:#666;
}

.grey3 .menuList li a{
    color:#666;
}

.grey3 .menuList li a:hover, .btns .grey3:hover{
    background-color:#CCC;
}



.grey4{
    background-color: #999;
    color:#FFF;
}

.grey4 .menuList li a{
    color:#FFF;
}

.grey4 .menuList li a:hover, .btns .grey4:hover{
    background-color:#666;
}



.grey5{
    background-color: #666;
    color:#FFF;
}

.grey5 .menuList li a{
    color:#FFF;
}

.grey5 .menuList li a:hover, .btns .grey5:hover{
    background-color:#333;
}



.grey6{
    background-color: #333;
    color:#FFF;
}

.grey6 .menuList li a{
    color:#FFF;
}

.grey6 .menuList li a:hover, .btns .grey6:hover{
    background-color:#666;
}


.navegacaoSimples{
    display: flex;
    margin: 20px 0;
}

.navegacaoSimples a{
    font-size: 12px;
    margin-right: 20px;
    padding: 5px;
}

.navegacaoSimples a .material-icons{
    font-size: 18px;
    vertical-align: middle;
    margin-right: 5px;
}

#formAcao{
    display: none;
    background-color: #EFEFEF;
    padding: 5px 10px;
    text-align: center;
    margin-bottom: 30px;
}

.radioOptions{
    margin: 25px 0;
}

.radioOptions .radioContent{
    display: inline-block;
    font-size: 20px;
    margin: 10px;
}

.radioOptions .radioContent label{
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.5s;
    border-radius: 5px;
}

.radioOptions .radioContent label:hover{
    background-color: #CCC;
}

.radioOptions .radioContent input{
    display: none;
}

.radioOptions input:checked~label{
    background-color: #666;
    color:#FFF;
    box-shadow: inset -6px 6px 8px rgba(0,0,0,0.3);
}

.radioOptions input:checked~label:hover{
    background-color: #666;
}

.radioOptions label .material-icons{
    float: left;
    margin-right: 10px;
    font-size: 32px;
    margin-top: -3px;
}

.simpleBtn{
    padding: 0;
    font: normal 14px verdana;
    text-decoration: none;
    color:#85B200;
    font-style: italic;
    display: inline-block;
    margin-right: 15px;
}

.simpleBtn .material-icons{
    font-size: 20px;
    float:left;
    margin-right: 5px;
}

.simpleBtn:hover{
    color:#F90;
}


nav .navbar {
    display: block;
    width: 100%;
}

nav .navbar .logo{
    float:left;
    margin:17px 15px;
    color:#FFF;
    text-decoration: none;
}

nav .navbar .menuList{
    margin: 0;
    padding: 0;
}

nav .navbar .menuList{
    float:left
}

nav .navbar .right{
    float: right;
}

.clear{
    display: block;
    clear:both;
}

nav .navbar .menuList li{
    display: inline-block;
}

nav .navbar .menuList li a{
    display: inline-block;
    padding: 20px;
    line-height: 1;
    text-decoration: none;
}

nav .navbar .menuList li a:hover{
}

nav .navbar .menuList li a .material-icons{
    font-size: 14px;
    line-height: 0.9;
    padding: 0 5px;
    margin: 0;
    margin-bottom: 1px;
    display: inline-block;
}

.btns .btn{
    font-size: 14px;
    display: inline-block;
    border:none;
    text-decoration: none;
    padding: 15px;
    margin: 10px 0;
    margin-right: 10px;
    cursor: pointer;
    font-weight: bolder;
    box-shadow: inset 2px 2px 3px rgba(255,255,255,0.5);
}

.btns .btn .material-icons{
    vertical-align: middle;
    margin-right: 10px;
}

.btns .simple{
    font-size: 14px;
    text-decoration: none;
    color: #85B200;
    font-style: italic;
}

.btns .simple .material-icons{
    display: inline-block;
}

.btns .simple:hover{
    color:#F90;
}

.searchBar{
    background-color: #E9E9E9;
    margin: 10px;
}

.searchBar .search{
    display: flex;
}

.searchBar .search .material-icons{
    line-height: 2;
    margin: 0;
    padding: 0 1%;
    width: 3%;
    text-align: center;
}

.searchBar .search input{
    padding: 6px 10px;
    color: #666;
    font: bolder 18px verdana;
    line-height: 2;
    width: 100%;
    border:none;
    float: right;
    background-color: transparent;
}

.btnIcoCancel{
    color:#900;
    padding: 5px 10px;
    margin: 0;
    display: flex;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.btnIcoCancel:hover{
    background-color: #900;
    color:#FFF;
    /*background-color: #CCC;*/
    text-shadow: none;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}

.btnIcoCancel .material-icons{
    font-size: 30px;
    vertical-align: middle;
}

.line{
    display:flex;
    width: auto;
    margin: 30px 20px;
}

.line .col label{
    display: block;
    font-size: 14px;
    font-weight: bolder;
}

.line .col p{
    font-weight: normal;
}

.line .col input{
    color:#999;
    font: bolder 14px/2 verdana;
    width: 100%;
    margin: 0;
    margin-top: 5px;
    padding: 5px;
    border: 1px solid #CCC;
    box-sizing: border-box;

}

.line .col textarea{
    color:#999;
    font: bolder 14px/2 verdana;
    width: 100%;
    margin: 10px 0;
    padding: 5px 1%;
    border: 1px solid #CCC;
    resize: none;
    height: 200px;
    box-sizing: border-box;

}

.valorArea{
    background-color: #EFEFEF;
    padding: 10px;
    margin: 10px;
}

.valorArea .col{
    width: auto;
    text-align: center;
}

.valorArea .col input[type="text"]{
    width: auto;
    font-size: 23px;
    border:1px solid #CCC;
}

.middle, .center{
    vertical-align: middle !important;
    text-align: center !important;
}

.line .col input[type="text"]{
}

.line .col input[type="number"]{
}

select{
    width: 100%;
    margin: 0;
    margin-top: 5px;
    border: 1px solid #CCC;
    padding: 10px 0;
    color:#999;
    font: bolder 14px/2 verdana;
}

.line .col .radio{
    display: inline-block;
    padding: 0;
    margin: 0;
    margin-right: 15px;
    line-height: 3.5;
}

.col{
    flex-grow: 1;
    margin-right: 10px;
}

.col:last-child{
    margin-right: 0;
}

.noFull select{
    width: auto;
}

.ate{
    margin: 0 15px;
}

.line .one{
    width: 10%;
}

.line .two{
    width: 20%;
}

.line .three{
    width: 30%;
}

.line .four{
    width: 40%;
}

.line .five{
    width: 50%;
}

.line .six{
    width: 60%;
}

.line .seven{
    width: 70%;
}

.line .eight{
    width: 80%;
}

.line .nine{
    width: 90%;
}

.line .ten{
    width: 90%;
}

.line .all{
    width: auto;
}

.line .col .radio{
    display: inline-block;
    margin-left: 15px;
}


.buscadorInterativo {
    background-color: #EFEFEF;
    padding: 10px;
    text-align: center;
}

.buscadorInterativo p{
    display: none;
}

.buscadorInterativo .btn_open_search{
    font-size: 14px;
    border:none;
    display: inline-block;
    padding: 10px;
    margin: 0;
    cursor: pointer;
    font-weight: bolder;
    color:#FFF;
    background-color: #00698c;
    box-shadow: inset 2px 2px 3px rgba(255,255,255,0.5);
}

.buscadorInterativo .btn_open_search:hover{
    background-color: #0089B7;
    box-shadow: none;
}

.detalheBusca{
    margin: 10px;
}

.detalheBusca b{
    margin-right: 10px;
}

.resultList{
    margin: 10px;
}

.resultList .table{
    display: table;
    width: 100%;
    font-size: 12px;
    border-spacing: 3px;
    border:1px solid #CCC;
    background-color: #FFF;
}

.resultList .table .row{
    display: table-row;
}

.resultList .table .row:nth-child(2n+0) {
    background-color: #F2F9FB;
}

.resultList .table .row .column{
    display: table-cell;
    padding: 5px;
}

.resultList .table .table .row .full{
    width:100%;
}

.resultList .table .cancelPayOff{
    text-decoration:line-through red;
    cursor: pointer;
}

.resultList .table .row .column .motivoCancelamento{
    font-size: 12px;
    background: none;
    border:none;
    margin: 0 !important;
    padding:5px  0 !important;
}

.lightBody .infoCancel{
    font-weight: normal;
}

.lightBody .infoCancel p{
    margin: 0;
    padding: 10px 0;
    line-height: 25px;
}

.listaItens{
    background-color: #EFEFEF;
    margin: 10px;
}

.resultList .table .title{
    font-weight: bolder;
    font-size: 14px;
    background-color: #00698C;
    color:#FFF;
    white-space: nowrap;
}

.listaItens .row{
    display: flex;
    flex-wrap: nowrap;
    font-size: 12px;
    margin: 0 !important;
    align-content: stretch;
}

.listaItens .row .col a{
    display: inline;
}

.listaItens .row .col{
    display: block;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 90px;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}


.listaItens .row .col input[type="checkbox"]{
    transform: scale(1.5);
}

.listaItens .title{
    background-color: #00698C;
    font-weight: bolder;
    color: #FFF;
}

.listaItens .back{
    background-color: #FFF;
}

.listaItens .row .large{
    flex-grow: 7;
    flex-shrink: 3;
}



.lightBody .requestCancel{
    font-weight: normal;
}

.lightBody .requestCancel .alert{
    font-size: 12px;
    color:red;
    font-style: italic;
}

.lightBody .requestCancel textarea{
    width:100%;
    resize: none;
    height: 100px;
    border:1px solid #CCC;
    font-size: 14px;
    font-weight: bolder;
    line-height: 22px;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
}


.anotacoes .normal .column{
    border:2px dashed #CCC !important;
}

.anotacoes .atencao .column{
    border:2px dashed #F90 !important;
}

.anotacoes .importante .column{
    border:2px solid #900 !important;
}

.legNiveis{
    margin: 5px 10px;
    border:1px solid #CCC;
    padding:5px;
    display: inline-block;
    font-size: 12px;
}

.legNiveis span{
    display: inline-block;
    margin: 5px;
    padding: 5px;
}

.legNiveis .normal{
    border-left: 5px solid #CCC;
    color:#CCC;
}

.legNiveis .atencao{
    border-left: 5px solid #F90;
    color:#F90;
}

.legNiveis .importante{
    border-left: 5px solid #900;
    color:#900;
}


.aLeft{
    text-align: left !important;
}

.aRight{
    text-align: right !important;
}

.aCenter{
    text-align: center !important;
}


.listaCampos{
    background-color: #FFF;
    padding: 10px;
    border-bottom: 2px solid #CCC;
    margin-bottom: 25px;
    font-size: 14px;
}

.listaCampos h3{
    font-size:18px;
}

.listaCampos .itemCampo{
    display: inline-block;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    width: 30%;
}

.listaCampos .breakline{
    display: block;
    width: auto;
}

.listaCampos .itemCampo:last-child{
    margin-right: 0;
}

.listaCampos .itemCampo label{
    font-weight: bolder;
}

.resumo{
    color: #85B200;
}

.resumo .linha{
    margin: 10px;
}

.resumo .linha label{
    font-weight: bolder;
    margin-right: 5px;
}

.reportList ul{
    list-style: none;
    margin: 10px;
    padding: 0;
}

.reportList ul li{
    padding: 10px 0;
}

.reportList ul li .material-icons{
    vertical-align: -5px;
    margin-right: 10px;
}

.periodoTabela{
    max-width: 600px;
    width: 100%;
    display: table;
    margin: 20px auto;
    border:5px solid #FFF;
}

.periodoTabela .col{
    display: table-cell !important;
    padding: 1px 0;
    width: 50% !important;
}

.periodoTabela .col input{
    border:none;
    background-color: transparent;
    text-align: center;
    font:bolder 22px/35px verdana;
    width: 100%;
    padding: 25px 15px;
    color:#999;

}

.periodoTabela .de{
    background-color: #FFF;
}

.periodoTabela .ate{
    background-color: #B8ECFF;
}

.periodoTabela .btn{
    background-color: #09C;
    padding: 10px;
    vertical-align: middle;
    text-align: center;
    color:#FFF;
    max-width: 70px;
    cursor: pointer;
}

.periodoTabela .btn:hover{
    background-color: #396;
}




.myLightbox{
    position: fixed;
    z-index: 900;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    color: #FFF;
    font-weight: bolder;
    display: none;
    color:#666;
    box-sizing: border-box;
    padding: 15px;
}

.myLightbox .lightBody{
    max-height: 100%;
}

.myLightbox .lightBody .contentArea{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    background-color: #FFF;
    border:2px solid #CCC;
    max-height: 95vh;
    padding:10px;
    overflow-y: auto;
    box-sizing: border-box;
}

.myLightbox .lightNavArea{
    position: absolute;
    right: 0;
    text-align: right;
}

.myLightbox .lightNavArea .btnClose{
    background-color: #900;
    padding: 10px 20px;
    color: #FFF;
    margin: 0;
    display: inline-block;
    font-size: 12px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
    cursor: pointer;
}

.myLightbox .lightNavArea .btnClose:hover{
    background-color: #DC2F2F;
}

.myLightbox .lightNavArea .btnClose .material-icons{
    vertical-align: middle;
    font-size: 16px;
}




/*=-=-=-=-=-=-=-=-=-=-=- LOADING BAR =-=-=-=-=-=-=-=-=-=-=-=-=-=*/

.contentLoad{
    margin:30px;
}

.contentLoad h1{
    text-align: center;
}

.contentLoad .loadBar{
    border: 2px solid #70AB08;
    padding: 3px;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
}

.contentLoad .loadingBar{
    background-color: #70AB08;
    width: 0;
    height: 100%;
    transition: width 1s;
}

/*=-=-=-=-=-=-=-=-=-=-=- FINAL LOADING BAR =-=-=-=-=-=-=-=-=-=-=-=-=-=*/



.formTable{
    background-color: #EFEFEF;
    padding: 5px 10px;
}


.formTable .periodo{
    display: table;
    margin: 5px auto;
    border-spacing: 10px;
}

.formTable .periodo .col{
    display: table-cell;
    vertical-align: middle;
}

.formTable .periodo select{
    display: inline-block;
    width: auto;
    margin-top: 0;
}

.formTable .situacao{
    border-bottom: 1px dashed #CCC;
    padding: 10px;
    margin: 5px;
    text-align: center;
    font-size: 12px;
}

.formTable .situacao label{
    font-size: 12px;
    font-weight: normal;
    margin-right: 20px;
}

.formTable .situacao label input[type="radius"]{
    margin-right: 5px;
    vertical-align: middle;
}

#resultSearch{
    margin-top: 30px;
}

#resultSearch .contentMessage{
    color:#999;
}

#resultSearch .cotas{
    margin-bottom: 40px;
}

#resultSearch .cotas h2{
    margin: 10px;
}

#resultSearch .cotas p{
    margin: 10px;
}




#principal main .bloco{
    padding: 0.1px;
}

#principal main .bloco h2{
    margin: 10px;
}

#principal main .bloco h3{
    margin: 10px;
}

#principal main .bloco p{
    margin: 10px;
}

#principal main .bloco .content{
    max-width: 1200px;
    margin: 10px auto;
}

#principal main .bloco .fill{
    border:1px solid #CCC;
    background-color: #FFF;
}


.cupons{
    display: flex;
    margin: 20px 0;
}

.cupons .cupom{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.cupons .cupom label{
    height: 100%;
    display: block;
    border: 1px solid #CCC;
    background-color: #EFEFEF;
    padding: 10px;
    line-height: 30px;
    box-sizing: border-box;
}

.cupons .cupom label:hover{
    cursor: pointer;
    background-color: #999;
    color:#FFF;
}

.cupons .cupom input:checked~label{
    background-color: #E0F8E0;
    color:#04B404;
    border:1px dashed #04B404;
}

.cupons .cupom input{
    display: none;
}

.formFone{
    display: flex;
}

.formFone .ddd{
    width: 50px !important; 
    margin-right: 10px !important; 
}

.fones{
    margin: 10px;
    padding: 10px;
    background-color: #EFEFEF;
}

.cards{
    text-align: left;
}

.cards .card{
    display: inline-table;
    width: 28%;
    padding: 1%;
    margin: 10px 1%;
    background-color: #FFF;
    border-top:4px solid #F90;
    text-align: left;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: 4px 4px 3px rgba(0,0,0,0.2);
    text-decoration: none;
    color: inherit;
}

.cards .card:hover{
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    border-color: #5ce638;
}

.cards .card .content .data{
    margin: 5px 0;
    white-space: nowrap;
    line-height: 2;
}

.cards .card .content .data .material-icons{
    margin-right: 10px;
    margin-top: 8px;
    font-size: 18px;
    float: left;
}

.cards .card .content .data b{
    display: inline-block;
    margin-right: 10px;
}

.cards .card .content .valores{
    /*white-space: nowrap;*/
    text-align: right;
}

.cards .card .content .valores .valor{
    display: inline-block;
    margin-left: 10px;
    font-size: 26px;
    font-weight: bolder;
    white-space: nowrap;
}

.cards .card .content .valores .valor span{
    font-size: 14px;
    margin-right: 5px;
}

.cards .card .content .valores .de{
    font-size: 18px;
    text-decoration: line-through #900;
}

.cards .card .content .valores .por{
    color: #F90;
}

.tabelaValores{
    border: 1px dashed #F90;
    padding: 10px;
    margin: 10px;
    background-color: #FFF;
}

.tabelaValores h2{
    font-size: 18px;
    color:#F90;
    padding: 0;
    margin: 0 !important;
    margin-bottom: 20px;
}

.tabelaValores .valor{
    font-size: 12px;
    display: inline-block;
    margin: 10px 20px;
    margin-left: 0;
    margin-bottom: 0;
    padding: 5px;
    cursor: pointer;
}

.tabelaValores .valor:hover{
    background-color: #EFEFEF;
}

.tabelaValores .valor label{
    font-weight: bolder;
}


.tabelasPage{
    background-color:#FFF;
    padding: 10px;
    margin-top: 25px;
}

.tabelasPage h2{
    margin: 20px 10px !important;
    padding: 0;
}

.tabelasPage .tabelaPage{
    border:1px solid #CCC;
    background-color: #F9F9F9;
    padding: 10px;
    margin: 15px 10px;
}

.tabelasPage .tabelaPage .valores{
    display: table;
    border:1px solid #00698C;
    font-size: 14px;
    margin: 10px 1%;
    width: 98%;
    box-sizing: border-box;
}

.tabelasPage .tabelaPage .valores .linha{
    display: table-row;
}

.tabelasPage .tabelaPage .valores .title{
    background-color: #00698C;
    color:#FFF;
    font-weight: bolder;
}

.tabelasPage .tabelaPage .valores .linha .col{
    display: table-cell;
    padding: 5px;
    text-align: center;
}

.tabelasPage .tabelaPage h2{
    font-size:18px;
    line-height: 30px;
    margin: 0 !important;
    padding: 0;
}

.tabelasPage .tabelaPage .promocoes{
    display: flex;
    align-items: stretch;
}

.tabelasPage .tabelaPage .promocoes .promocao{
    margin: 20px 10px;
    background-color: #FFF;
    border:1px solid #063;
    font-size: 12px;
    width: 200px;
    text-align: center;
}

.tabelasPage .tabelaPage .promocoes .inativo{
    color:#999;
    border-color:#999;
}

.tabelasPage .tabelaPage .promocoes .inativo .status{
    background-color:#999 !important;
}

.tabelasPage .tabelaPage .promocoes .novo{
    display: flex;
    justify-content: center;
    align-items: center;
    border-color:#FFF;
}

.tabelasPage .tabelaPage .promocoes .novo span{
    font-weight: bolder;
}



.tabelasPage .tabelaPage .promocoes .promocao .linha{
    margin:10px 5px;
}

.tabelasPage .tabelaPage .promocoes .promocao label{
    font-weight: bolder;
    margin-right: 5px;
}

.tabelasPage .tabelaPage .promocoes .promocao .desconto{
    font-size: 38px;
    margin: 20px 5px;
    font-weight: bolder;
}

.tabelasPage .tabelaPage .promocoes .promocao .status{
    background-color: #063;
    color: #FFF;
    margin: 0;
    padding: 3px 5px;
    font-style: italic;
    position: absolute;
    margin-top: 10px;
    margin-left: -10px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

.tabelasPage .tabelaPage .promocoes .promocao .nav a{
    margin: 5px;
    padding: 5px;
    display: inline-block;
}


.ligacoesStart{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 85%;
}


.ligacoesStart .form{
    background-color: #FFF;
    border:1px solid #CCC;
    display: block;
    padding: 10px 20px;
}


.ligacoesStart .form h1{
    text-align: center;
}

.ligacoesStart .form form{

}

.ligacoesStart .form form .text{
    text-align: center;
    font-size: 24px;
}

.ligacoesStart .form form ::placeholder{
    color:#CCC;
}

.ligacoesStart .form form :-ms-input-placeholder{
    color:#CCC;
}

.ligacoesStart .form form ::-ms-input-placeholder{
    color:#CCC;
}

.ligacoesStart .form .btns{
    text-align: center;
}


.btnSimular{
    display: inline-block;
    padding: 5px 30px;
    background-color: #85B200;
    color:#FFF;
}

.btnSimular:hover{
    background-color: #F90;
    color: #FFF;
}

.simulador h1, .simulador h2{
    text-align: center;
}

.simulador .valores{
    margin: 10px;
    margin-bottom: 35px;
    background-color: #FFF;
    padding:0.1px;
}

.simulador .valores:last-child{
    margin-bottom: 10px;
}

.simulador .form{
    background-color: #666;
    font-size: 14px;
    line-height: 22px;
    color:#FFF;
    text-align: center;
    padding:5px;
    margin: 0 15px;

}

.simulador .form form{
    display: flex;
}

.simulador .form .campo{
    margin: 5px 0;
    padding: 5px 1%;
    flex-grow: 4;
}

.simulador .form .campo label{
    display: block;
}

.simulador .form .campo select{
    border:none;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: bolder;
    color:#666;
    border-radius: 5px;
    width: 100%
}

.simulador .form .campo input{
    border:none;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: bolder;
    color:#666;
    border-radius: 5px;
    width: 100%
}

.simulador .valores .alerta{
    font-size: 14px;
    color:#900;
    margin: 15px;
    text-align: center;
    font-style: italic;
}

.simulador .valores .request{
    font-size: 14px;
    line-height: 26px;
    color:#666;
    margin: 15px;
    text-align: center;
}

.simulador .valores .request .campos{
    display: inline-block;
}

.simulador .valores .request span{
    display: inline-block;
    background-color: #F6F6F6;
    padding: 5px 15px;
    margin: 5px;
}

.simulador .valores .planos{
    display: table;
    border-spacing: 5px;
    margin: 10px 1%;
    width: 98%;
    box-shadow: none;
}

.simulador .valores .planos .plano{
    color:#FFF;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width: 25%;
    border-radius: 10px;
}

.simulador .valores h2{
    background-color: #FFF;
    color:#f76060;
    padding: 10px;
    font-weight: bolder;
    font-size: 20px;
    text-align: center;
}

.simulador .valores .obs{
    color:#f76060;
    border:none;
    font-weight: normal;
    font-size: 14px;
    text-align: center;
    display: block;
    margin: 0;
    padding: 5px;
}

.simulador .valores .plano div{
    padding: 5px;
}

.simulador .valores .economia{
    font-size: 12px;
    margin: 5px 15px;
}

.simulador .valores .valor{
}

.simulador .valores .valor .valorOld{
    text-decoration: line-through;
    font-size: 80%;
}

.simulador .valores .planos .naoAssociado{
    color: #666;
}

.simulador .valores .plus{
    background-color: #F90;
}

.simulador .valores .planos .naoAssociado .valor{
    font-size: 26px;
    font-weight: bolder;
}


.simulador .valores .planos .naoAssociado .valor b{
    font-size: 38px;
}

.simulador .valores .planos .naoAssociado .valor .sJuros{
    font-size: 16px;
}

.simulador .valores .planos .plus .economia{
    color:#f90;
    background-color: #FFF7EF;
}

.simulador .valores .planos .plantur{
    background-color: #18C65E;
}

.simulador .valores .planos .plantur .economia{
    color:#18C65E;
    background-color: #E3FFEF;
}

.simulador .valores .planos .ts{
    background-color: #10B9C1;
}

.simulador .valores .planos .ts .economia{
    color:#10B9C1;
    background-color: #E8F7FF;
}

.simulador .contato{
    background-color: #EFEFEF;
    padding: 20px;
    font-size: 24px;
    text-align: center;
    font-weight: bolder;
    margin: 4px;
}

.simulador .contato span{
    font-size: 18px;
    font-weight: normal;
}



.blocoCampos{
    margin: 15px;
    padding: 10px;
    border:1px solid #CCC;
    background-color: #FFF;
}

.blocoCampos h2{
    margin-top:15px !important;
}

.line .col .checkbox{
    display: inline-block;
    margin: 10px;
    padding: 5px 10px;
    background-color: #FFF;
    border:1px solid #CCC;
    font-weight: normal;
    white-space: nowrap;
    text-align: left;
}

.line .col .checkbox input[type="checkbox"]{
    display: inline-block;
    margin: 5px;
    padding: 0;
    width: auto;
    margin-right: 10px;
}

.bloco .content .btnPlanos{
    display: table;
    width: 100%;
    border:5px solid #FFF;
}

.bloco .content .btnPlanos .btn{
    display: table-cell;
    font-size: 30px;
    padding: 40px 0;
    width: 33%;
    text-align: center;
    background-color: #FFF;
    text-decoration: none;
    color:#666;
    font-weight: bolder;
}

.bloco .content .btnPlanos .btn:hover{
    background-color: #00698C;
    color:#FFF;
    box-shadow: inset -1px 1px 10px rgba(0,0,0,0.5);
}


.headerPerfil{
    box-sizing: border-box;
    background-color: #FFF;
    padding: 10px;
    border-bottom: 3px solid #00698C;
    display: table;
    width: 100%;
}

.headerPerfil .detalhes h2{
    background-color: #FFF;
    margin: 0 !important;
    line-height: 2;
}

.headerPerfil .detalhes h2 .material-icons{
    float: left;
    margin-right: 10px;
    font-size: 32px;
    margin-top: 7px;
}

.headerPerfil .col {
    display: table-cell;
    vertical-align: middle;
}

.headerPerfil .carteira{
    width: 15%;
    height: inherit;
    background-image: linear-gradient(#007ca6, #00698C);
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    color:#FFF;
    font-size: 22px;
    font-weight: bolder;
    line-height: 34px;
}

.headerPerfil .carteira:hover{
    background-image: linear-gradient(#00698C, #007ca6);
}

.headerPerfil .carteira span{
    display: block;
    font-size: 14px;
}

.headerAlert {
    background-color: #fcfccf;
    border:1px solid #ffcf7d;
    padding: 10px;
    margin-top: 20px;
}

.headerAlert a{
    display: block;
    color:#e66000;
    padding: 10px 0;
}

.headerAlert a:hover{
    color:#fc7c00;
    text-decoration: underline;
}
.headerAlert a .material-icons{
    vertical-align: middle;
    margin-right: 10px;
}

.campos{
    margin:10px;
}

.campo{
    font-size: 14px;
    line-height: 3;
    display: inline-block;
    margin-right: 15px;
    font-weight: normal;
}

.campo label{
    font-weight: bolder;
    margin-right: 5px;
}

.campo a{
    text-decoration: none;
    color:#85B200;
    font-style: italic;
}

.campo a:hover{
    color:#F90;
}

.campo .material-icons{
    float:left;
    margin-top: 10px;
}

.contentPerfil{
    display: table;
    margin: 10px 0;
    width: 100%;
}

.contentPerfil .col{
    display: table-cell;
    vertical-align: top;
}

.contentPerfil .menuBar{
    width: 250px;
    display: block;
    margin-right: 15px;
}

.contentPerfil .menuBar .menu{
    padding: 0 5px;
}

.contentPerfil .menuBar .menu .titleMenu{
    padding: 5px 0;
    display: block;
    font-weight: bolder;
}

.contentPerfil .menuBar .menu .titleMenu .material-icons{
    float: left;
    margin-top: -1px;
    margin-right: 5px;

}

.contentPerfil .menuBar .submenu{
    margin: 0;
    padding: 0;
    display: block;
    float: none;
    list-style: none;
}

.contentPerfil .menuBar .submenu a{
    display: block;
    padding: 5px;
    transition: background 0.5s;
    font: normal 14px verdana;
    text-decoration: none;
    color:#666;
}

.contentPerfil .menuBar .submenu a:hover{
    background-color: #FFF;
    color:#85B200;
}

.contentPerfil .menuBar .carteira a{
    display: block;
    text-decoration: none;
    text-align: center;
    background-color: #00698C;
    color:#FFF;
    padding: 15px;
    margin: 20px 10px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    transition: background 0.5s;
}

.contentPerfil .menuBar .carteira a:hover{
    background-color: #85B200;
}


.contentPerfil .menuBar .carteira a h2{
    margin: 0 !important;
    line-height: 2;
    font-size: 18px;
    display: inline-block;
}


.contentPerfil .menuBar .carteira a h2 .material-icons{
    float:left;
    margin-top: 6px;
    margin-right: 10px;
}

.contentPerfil .menuBar .carteira a .valor{
    font-size: 20px;
}

.contentPerfil .content{
    width: 100%;
}

.contentPerfil .content .bloco{
    background-color: #FFF;
    padding: 10px;
    margin-bottom: 15px;
}

.contentPerfil .content .bloco h2{
    margin: 10px !important;
    line-height: 2;
}

.contentPerfil .content .bloco p{
    font-size: 14px;
    line-height: 1.5;
    margin: 10px !important;
}

.contentPerfil .content .bloco .item{
    margin: 10px;
    padding: 0;
    border:1px solid #00698C;
}

.contentPerfil .content .bloco .item .header{
    background-color: #00698C;
    padding: 5px;
    color:#FFF;
}

.contentPerfil .content .bloco .item .header h3{
    font-size: 12px;
    margin: 5px 0;
}

.contentPerfil .content .bloco .item .header p{
    font-size: 10px;
    font-weight: normal;
    margin: 5px 0 !important;
    padding: 0;

}

.contentPerfil .content .bloco .item .line .col{
    padding-top:5px;
    padding-bottom:5px;
    font-size: 12px;

}

.contentPerfil .content .bloco .item .line .col a{
    color: #85B200;
    text-decoration: none;
}

.contentPerfil .content .bloco .item .line .col a:hover{
    color: #F90;
}

.contentPerfil .content .bloco .item .line label{
    font-size: 12px;

}

.btns{
    padding: 0;
    margin: 10px;
}

.btnline{
    background-color: #999;
    font-size: 20px;
    padding: 10px;
    font-weight: bolder;
    font-family: Verdana;
    color: #FFF;
    text-align: center;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border:none;
    cursor: pointer;
}

.btnline .material-icons{
    vertical-align: middle;
    margin-right: 10px;
    font-size: 32px;
}

.btnline:hover{
    background-color: #666;
    color: #FFF;
}


.btnUpdate .material-icons{
    float: none;
    margin: 0;
    vertical-align: middle;
    font-size: 24px;
    margin-left: 10px;
}

.navCarrinhoCobranca{
    position: fixed;
    margin-top: 70px;
}

.navCarrinhoCobranca .btn{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.5);
    background-image:
        radial-gradient(
        circle at top right,
        #6B96FA,
        #3259B4
        );
    margin-bottom: 10px;
}

.navCarrinhoCobranca .btn:hover{
    box-shadow: 0 1px 2px rgba(0,0,0,0.7);
    background-image:
        radial-gradient(
        circle at top right,
        #92B0F8,
        #506CAF
        );
}

.navCarrinhoCobranca .btn a{
    display: inline-block;
    padding: 15px;
    color: #FFF;
}

.navCarrinhoCobranca .btn a .total{
    position: absolute;
    display: inline-block;
    padding: 4px;
    font-size: 12px;
    font-weight: bolder;
    background-color: #900;
    height: 16px;
    width: 16px;
    border-radius: 16px;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
    text-align: center;
    overflow: hidden;
    margin-top: -10px;
    margin-left: -15px;
}

.navCarrinhoCobranca a .material-icons{
    font-size: 25px;
}

.rightAlign{
    text-align: right;
}

.leftAlign{
    text-align: left;
}

.leftAlign .red{
    color:#900;
}



.leftAlign .lightBlue{
    color:#0089B7;
}

.leftAlign .green{
    color:#238C00;
}

.leftAlign .lightBlue:hover, .leftAlign .red:hover, leftAlign .green:hover{
    color:#F90;
}

.contentPerfil .content .bloco .btns .btn{
    padding: 10px;
    font: normal 14px verdana;
    text-decoration: none;
    color:#85B200;
    font-style: italic;
    display: inline-block;
}

.contentPerfil .content .bloco .btns .btn:hover{
    color:#F90;
}

.contentPerfil .content .bloco .btns .btn .material-icons{
    float:left;
    margin-top: -2px;
    margin-right: 5px;
}

.contentPerfil .content .bloco .cards{
    margin: 10px;
    text-align: center;
}

.contentPerfil .content .bloco .cards .card{
    display: inline-table;
    margin: 10px 0;
    margin-left: 1%;
    width: 31%;
    background-color: #F6F6F6;
    text-align: left;
    border: 1px solid #DDD;
}

.contentPerfil .content .bloco .cards .card h3{
    font-size: 14px;
    line-height: 1.5;
    margin: 10px;
}

.contentPerfil .content .bloco .cards .card h3 i{
    font-size: 12px;
    display: block;
}

.contentPerfil .content .bloco .cards .card .campo{
    font-size: 14px;
    line-height: 2;
    margin: 0 10px;
}

.contentPerfil .content .bloco .cards .card .campo label{
    font-weight: bolder;
}

#bi_resultado .resultado .itens{
    text-align: center;
}

#bi_resultado .resultado .itens .item{
    display: inline-table;
    width: 32%;
}

#bi_resultado .resultado .itens .item .content{
    display: block;
    margin: 15px 1%;
    padding: 10px;
    text-align: left;
    text-decoration: none;
    color: #FFF;
    background-color: #00698C;
    cursor: pointer;
}

#bi_resultado .resultado .itens .item input:checked~.content{
    background-color: #85B200;
}

#bi_resultado .resultado .itens .item h2{
    font-size: 18px;
    line-height: 2;
    margin: 0;
    padding: 0;
}

#bi_resultado .resultado .itens .item h3{
    font-size: 14px;
    line-height: 2;
    margin: 0;
    padding: 0;
}

#bi_resultado .resultado .itens .item h4{
    font-size: 12px;
    line-height: 2;
    margin: 0;
    padding: 0;
}

#bi_resultado .resultado .itens .item .campos .campo{
    display: inline-block;
    font-size: 12px;
    background-color: rgba(0,0,0,0.3);
    padding: 10px;
    margin: 10px 5px;
    line-height: 1;
    border-radius:10px;
    /*box-shadow: 2px 2px 2px rgba(0,0,0,0.3);*/
}

#bi_resultado .resultado .itens .item .campos .campo b{
    margin-right: 5px;
}


.resultSearch .clientes{
    text-align: center;
}

.card{
    display: inline-table;
    width: 46%;
    margin: 20px 1%;
    border: 1px solid #CCC;
    text-decoration: none;
    cursor: pointer;
}

.card:hover{
    border-color: #00698C;
}

.card:hover > .info{
    background-color: #00698C;
    color:#FFF;
}

.card:hover > .ico .material-icons{
    color:#00698C;;
}

.card .col{
    display: table-cell;
    text-align: left;
    padding: 10px;
    vertical-align: middle;
}

.card .ico .material-icons{
    text-align: center;
}

.card .ico .material-icons{
    font-size: 45px;
}

.card .info{
    width: 100%;
    background-color: #EFEFEF;
}

.card .info h2{
    font-size: 14px;
    color:inherit;
    font-weight: bolder;
}

.card .info p{
    font-size: 12px;
    font-weight: normal;
}


.listSemanas{
    margin: 20px 10px;
    padding: 10px;
    border:1px dashed #CCC;
    background-color: #FFF;
}

.listSemanas .navSemanas{
    background-color:#666;
}

.listSemanas .navSemanas .btn{
    font-size: 12px;
    text-decoration: none;
    margin: 0;
    padding: 10px;
    cursor: pointer;
    font-weight: bolder;
    color: #FFF;
    display: inline-block;
    line-height: 2;
}

.listSemanas .navSemanas .btn:hover{
    background-color: #999;
}


.listSemanas  .navSemanas .btn .material-icons{
    font-size: 24px;
    margin-right: 5px;
    float: left;
    line-height: 23px;
}

.setSemana{
    margin:15px 0;
    background-color:#F3F3F3;
    padding: 15px;
    border-bottom:3px solid #CCC;
}

.setSemana h2{
    margin:0 !important;
    margin-bottom: 10px;
    padding: 5px 0;
}

.setSemana .btnRemover{
    text-align: center;
    font-size: 12px;
    color:#900;
    font-weight: bolder;
    margin-top: 10px;
}

.setSemana .btnRemover span{
    display: inline-block;
}

.setSemana .btnRemover span:hover{
    color:#F90;
    cursor: pointer;
}


.setSemana .btnRemover span .material-icons{
    font-size: 20px;
    margin-right: 5px;
    float: left;
    line-height: 15px;
}


.anoVigente{
    margin: 15px 10px;
    background-color: #EFEFEF;
    color:#666;
    box-sizing: border-box;
    display: block;
    padding: 0.1px;
}

.anoVigente .cota{
    background-color: #FFF;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    padding: 5px;
    color:#666;
    margin: 10px;
    display: block;
}







@media screen and (max-width: 1250px) {
    #principal main .bloco .content{
        margin-left: 3%;
        margin-right: 3%;
    }
}

@media screen and (max-width: 1100px) {

    .cards{
        text-align: left;
    }

    .cards .card{
        width: 45%;
    }
}

@media screen and (max-width: 950px) {

    .contentPerfil .content .bloco .cards{
        text-align: left;
    }

    .contentPerfil .content .bloco .cards .card{
        width: 45%;
    }
}

@media screen and (max-width: 850px) {

    .card{
        display: table;
        width: 98%;
    }
}

@media screen and (max-width: 790px) {

    .contentPerfil .content .bloco .cards .card{
        display: block;
        width: auto;
    }
}

@media screen and (max-width: 750px) {

    .cards{
        text-align: center;
    }

    .cards .card{
        display: block;
        width: 96%;
        margin-bottom: 25px;
    }
}

@media screen and (max-width: 700px) {

    .line{
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 680px) {


    .radioOptions{
        text-align: center;
    }

    .navbar .mobileMenu{
        display: inline-block !important;
    }

    .navbar .submenu{
        display: none;
        position: absolute;
        float: none;
        height: auto;
        left: 0;
        width: 100%;
        text-align: center;
    }

    .navbar .submenuButton:hover > .submenu{
        display: block !important;
    }

    .navbar .submenu li{
        padding: 10px;
    }



    .darkBlue .submenu{
        background-color: #0089B7;
        color:#FFF;
    }

    .darkBlue .submenuButton .menuList li a{

    }

    .darkBlue .submenuButton .menuList li a:hover{
        background-color:#85B200;
        color:#333;
    }

}

@media screen and (max-width: 650px) {
    .navbar.mobileMenu{
        display: inline-block !important;
    }

    .navbar .submenu{
        display: none;
        position: absolute;
        float: none;
        height: auto;
        left: 0;
        width: 100%;
        text-align: center;
    }

    .navbar .submenuButton:hover > .submenu{
        display: block !important;
    }

    .navbar .submenu li{
        padding: 10px;
    }



    .darkBlue .submenu{
        background-color: #0089B7;
        color:#FFF;
    }

    .darkBlue .submenuButton .menuList li a{
    }

    .darkBlue .submenuButton .menuList li a:hover{
        background-color:#85B200;
        color:#333;
    }




    .contentPerfil{
        display: block;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .contentPerfil .col{
        display: block;
        width: auto;
        margin: 0;
    }

    .contentPerfil .menuBar .submenu li{
        display: inline-block;
        margin: 5px 0;
        margin-right: 5px;
    }

    .contentPerfil .menuBar .submenu a{
        background-color: #FFF;
        padding: 10px;
        border:1px solid #CCC;
    }

    .contentPerfil .menuBar .submenu a:hover{
        background-color: #ECECEC;
        color:#85B200;
    }

}

@media screen and (max-width: 500px) {

    .contentPerfil .menuBar .menu:hover{
        background-color: #E3E3E3;
        cursor: pointer;
        padding: 5px;
    }

    .contentPerfil .menuBar .menu:hover{
        background-color: #E3E3E3;
        cursor: pointer;
    }

    .contentPerfil .menuBar .menu:hover > .submenu{
        display: block;
    }

    .contentPerfil .menuBar .submenu{
        display: none;
    }

    .contentPerfil .menuBar .submenu li{
        display: block;
        margin: 5px 0;
    }

}