@charset "UTF-08";

/* rgb(238, 216, 132) linear */
/* rgb(200, 172, 90) linear */

/* rgb(222, 195, 113) */


*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    height: 100%;
    min-height: 100%;
}

.background-container{
    width:100%; 
    height:100%;
    background-image: url("https://legacy.oplanor.com.br/images/assets/background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.container{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.input-field{
    width:100%; 
    height:36px; 
    justify-content:flex-start; 
    padding:0 15px;
    background:white;
    border-radius:50px;
}

.input-field input{
    background:none; 
    cursor:pointer; 
    width:100%; 
    color:white;
    outline: none;
    height:100%; 
    border:none; 
}

.loader {
  border: 5px solid rgb(222, 195, 113);
  border-top: 5px solid rgb(33, 46, 54);
  border-radius: 50%;
  width: 25px;
  margin-left:auto;
  margin-right:auto;
  height: 25px;
  animation: spin 0.5s linear infinite;
}

.button{
    background: linear-gradient(90deg, rgb(238, 216, 132), rgb(200, 172, 90)); 
    color: rgb(0, 0, 0); 
    font-weight:800; 
    border:none; 
    border-radius:50px; 
    cursor:pointer;
}

.button:hover{
    background: rgba(255, 255, 255); 
    color: rgba(47, 52, 62, 1); 
}

.button-blue{
    background:rgba(17, 53, 75, 1);
    color: white; 
    width:140px; 
    height:40px;
    font-weight:800; 
    border:none; 
    border-radius:50px; 
    cursor:pointer;
    border:2px solid rgba(17, 53, 75, 1);
}

.button-blue:hover{
    background: rgba(255, 255, 255); 
    color: rgba(17, 53, 75, 1);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.disappear{
    opacity: 0;
    transition: opacity 1s ease-in-out;
    transition-delay: 2s;
}

#mobile_loading_page {
    display:none;
}

.carousel{
    width:100%;
    left:0;
    transition: 0.5s;
}

.carousel.hide-left{
    left:-100%;
}

.carousel.hide-right{
    left: 100%;
}

@keyframes fadeInDown {
    from {
        opacity:0;
        transform: translatey(-30px);
    }
    to {
        opacity:1;
        transform: translatey(0);
    }
}
.in-down {
    animation-name: fadeInDown;
    animation-fill-mode: both;
    animation-duration: 1s;
}

.modal{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1050;
    display:none;
    overflow:hidden;
    -webkit-overflow-scrolling:touch;
    outline:0
    
}

.modal.fade .modal-dialog{
    -webkit-transition:-webkit-transform .3s ease-out;
    -o-transition:-o-transform .3s ease-out;
    transition:transform .3s ease-out;
    -webkit-transform:translate(0,-25%);
    -ms-transform:translate(0,-25%);
    -o-transform:translate(0,-25%);
    transform:translate(0,-25%)
    
}

.modal.in .modal-dialog{
    -webkit-transform:translate(0,0);
    -ms-transform:translate(0,0);
    -o-transform:translate(0,0);
    transform:translate(0,0)
    
}

.modal-open .modal{
    overflow-x:hidden;
    overflow-y:auto
    
}

.modal-dialog{
    position:relative;
    width:auto;
    margin:10px
    
}

.modal-content{
    position:relative;
    background-color:#fff;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    border:1px solid #999;
    border:1px solid rgba(0,0,0,.2);
    border-radius:6px;
    outline:0;
    -webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);
    box-shadow:0 3px 9px rgba(0,0,0,.5)
    
}

.modal-backdrop{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1040;
    background-color:#000
    
}

.modal-backdrop.fade{
    filter:alpha(opacity=0);
    opacity:0
    
}

.modal-backdrop.in{
    filter:alpha(opacity=50);
    opacity:.5
    
}

.modal-header{
    padding:15px;
    border-bottom:1px solid #e5e5e5
    
}

.modal-header .close{
    margin-top:-2px
    
}

.modal-title{
    margin:0;
    line-height:1.42857143
    
}

.modal-body{
    position:relative;
    padding:15px
    
}

.modal-footer{
    padding:15px;
    text-align:right;
    border-top:1px solid #e5e5e5
    
}

.modal-footer .btn+.btn{
    margin-bottom:0;
    margin-left:5px
    
}

.modal-footer .btn-group .btn+.btn{
    margin-left:-1px
    
}

.modal-footer .btn-block+.btn-block{
    margin-left:0
    
}

.modal-scrollbar-measure{
    position:absolute;
    top:-9999px;
    width:50px;
    height:50px;
    overflow:scroll
    
}

.select_button_new_old{
    width:110px; 
    height:60px; 
    background: rgb(0, 0, 0, 1); 
    border-radius:50px; 
    right:5px;
    position:absolute;
    transition: 0.5s;
}

.select_button_new_old.active{
    right:125px;
}

.select_button_new_old_text{
    width:110px; 
    height:60px; 
    border-radius:50px; 
    position:absolute; 
    color:white;
}

.select_button_new_old_text.active{
    color: rgb(0, 0, 0);
}

.calendar_revision_text:hover{
    background: rgb(17, 53, 75);
    color:white;
}

#menu{
    height:80px; 
    width:100%; 
    position:relative; 
}

#menu_option_1{
    margin-right:15px; 
    cursor:pointer;
}

#menu_option_2{
    margin-left:15px; 
    margin-right:15px;
    cursor:pointer;
}

#menu_option_3{
    margin-left:15px; 
    cursor:pointer;
}

#menu_option_4{
    position:absolute; 
    right:30px;
    cursor:pointer;
}

#nav_mobile{
    display:none;
}

#nav_items{
    position:absolute; 
    flex:1;
    height:100%;
}

.option-text{
    flex-direction:column; 
    margin-right:10px;
    font-size:18px; 
    font-weight:600;
    color:white;
    padding:10px;
}

.option-text:hover{
    background: linear-gradient(90deg, rgb(238, 216, 132), rgb(200, 172, 90));
    border-radius:10px;
    color: rgb(0, 0, 0);
}

.box-shadow{
    box-shadow: 6px 4px 8px rgba(0, 0, 0, 0.25);
}

.only-desktop{
    display:flex;
}

.only-mobile{
    display:none;
}

#home .div_1{
    color:rgb(0, 0, 0);
    height:70px; 
    width:96%; 
    background:linear-gradient(90deg, rgb(238, 216, 132), rgb(200, 172, 90)); 
    margin-top:10px; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255,255,255,0.5), inset 0 -2px 4px rgba(255,255,255,0.5);
    border-radius:50px; 
    justify-content:flex-start; 
    padding:0 10px;
}

#home .div_1 .sub_div_1{
    margin-left:80px; 
    height:100%; 
}

#home .div_1 .sub_div_2{
    margin-left:90px
}

#home .div_1 .sub_div_3{
    margin-left:110px
}

#home .div_1 .text_1{
    font-size:20px;
    margin-right:10px
}

#home .div_1 .text_2{
    font-size:14px; 
    font-weight:300
}

#home .div_2{
    width:90%; 
    justify-content:flex-start; 
    padding-left:20px; 
    margin-top: 20px;
}

#home .div_3{
    width:100%; 
    margin-top:20px;
}

#home .div_3 .sub_div_1{
    height:300px; 
    background:white; 
    border-radius:10px; 
    width:90%; 
    max-width:500px; 
    margin-right:40px; 
    flex-direction:column; 
    justify-content:Flex-start; 
    color:black; 
    padding:10px;
}

.button-golden{
    border-radius:5px; 
    cursor:pointer; 
    font-size:18px;
    font-weight:500;
    color:rgb(0, 0, 0);
    background:linear-gradient(90deg, rgb(238, 216, 132), rgb(200, 172, 90));
    border: 1px solid rgb(222, 195, 113);
}

.button-golden:hover{
    background:linear-gradient(90deg, rgb(238, 216, 132, 0.4), rgb(200, 172, 90, 0.4)); 
}

.button-black{
    border-radius:5px; 
    background: rgb(0, 0, 0, 0.5); 
    border:1px solid rgb(0, 0, 0);  
    cursor:pointer; 
    color:rgb(255, 255, 255); 
    font-size:18px;
    font-weight:500;
}

.button-black:hover{
    color:rgb(0, 0, 0);
    background:rgb(222, 195, 113, 0.5);
    border: 1px solid rgb(222, 195, 113);
}

.button-green{
    width:60%; 
    border-radius:10px; 
    background:rgb(13, 182, 101); 
    border:2px solid rgb(255, 255, 255, 0.5);  
    height:70px; 
    margin-top:20px; 
    cursor:pointer; 
    color:white; 
    font-size:18px;
    font-weight:500;
}

.button-green:hover{
    color: rgba(17, 53, 75, 1);
}

#home .div_3 .sub_div_2{
    height:300px; 
    background:white; 
    border-radius:10px; 
    width:90%; 
    max-width:500px; 
    margin-left:40px; 
    flex-direction:column; 
    justify-content:Flex-start; 
    color:black; 
    padding:10px;
}

#home .div_4{
    width:100%; 
    max-width:1080px; 
    margin-top:40px; 
    margin-bottom:40px; 
    justify-content:space-between;
}

#home .div_4 .sub_div_1{
    height:260px; 
    background:white; 
    border-radius:10px; 
    width:90%; 
    max-width:320px; 
    flex-direction:column; 
    justify-content:flex-start; 
    padding:20px 10px;
}

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

#revisions{
    width:100%;
    flex-direction:column; 
    margin-top:20px; 
    display:none; 
    margin-bottom:40px;
}

#revisions .div_1{
    width:90%; 
    justify-content:flex-start; 
    padding-left:20px; 
    justify-content:space-between;
}

#revisions .div_1 .sub_div_1{
    width:200px; 
    height:70px;
}

#revisions .div_2{
    width:100%; 
    flex-direction:column;
}

#revisions .div_2 .sub_div_1{
    flex:1; 
    height:120px; 
    text-align:center; 
    border:1px solid rgb(220, 220, 220);
}

#revisions .div_2 .sub_div_1 .sub_sub_div_1{
    width:100%; 
    flex-direction:column; 
    margin-top:5px;
}

#activities{
    width:100%; 
    flex-direction:column; 
    margin-top:20px; 
    position:relative; 
    display:none;
}

#activities .div_1{
    width:220px; 
    flex-direction:column; 
    position:absolute; 
    left:40px; 
    top:0px;
}

#activities .div_1 .sub_div_1{
    width:220px; 
    height:300px; 
    background: rgb(0, 0, 0); 
    border-radius:10px; 
    margin-top:15px; 
    flex-direction:column;
}

#activities .div_2{
    background:white; 
    border-radius:10px; 
    width:90%; 
    max-width:460px;
    color:rgba(17, 53, 75, 1); 
    flex-direction:column; 
    margin-bottom:40px; 
    padding:0 15px;
}

#apostilas .div_2{
    background:white; 
    border-radius:10px; 
    margin-top:80px;
    width:90%; 
    max-width:460px;
    color:rgba(17, 53, 75, 1); 
    flex-direction:column; 
    margin-bottom:40px; 
    padding:0 15px;
}


#performance .div_1{
    width:80%; 
    justify-content:space-between; 
    padding-left:20px; 
    margin-top: 20px;
}

#performance .div_1 .sub_div_1{
    font-weight:500;
    width:140px;
    font-size:14px;
    height:40px;
    border-radius:10px; 
    text-align:center;
}

#performance .div_2{
    width:100%; 
    margin-top:40px; 
    margin-bottom:40px; 
    justify-content:space-evenly; 
    max-width:1000px;
}

#performance .div_2 .sub_div_1{
    height:140px; 
    background:white; 
    border-radius:10px; 
    width:260px; 
    flex-direction:column; 
    justify-content:flex-start; 
    padding:20px 10px; 
    color:black;
}

#performance .div_3{
    width:100%; 
    margin-top:20px;
}

#performance .div_3 .sub_div_1{
    height:230px; 
    background:white; 
    border-radius:10px; 
    width:100%; 
    max-width:460px; 
    margin-left:40px; 
    margin-right:40px; 
    flex-direction:column; 
    justify-content:Flex-start; 
    color:black; 
    padding:5px;
}

.contact-logo-button {
    cursor:pointer;
    z-index:10;
    position:fixed;  
    bottom:20px; 
    right:20px; 
    width:60px; 
    height:60px; 
    font-size: 20px; 
    border:none; 
    border-radius:50%; 
    color:white;
    animation: white-shyne 4s infinite;
    background:linear-gradient(90deg, rgb(238, 216, 132), rgb(200, 172, 90));
}

@keyframes white-shyne {
  0% {
        background:rgb(0, 0, 0, 0);
  }
  50% {
      background:rgb(222, 195, 113, 0.8);
  }
  100% {
      background:rgb(0, 0, 0, 0);
  }
}

#notifications{
    position:fixed; 
    width:300px; 
    height:100%; 
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background:white;
    top:100%;
    right:0;
    z-index:10;
    transition: 0.5s;
}

#notifications.active{
    top:0;
}

.search-options:hover{
    background: rgb(13, 182, 101);
    color:white;
}

.revision-box{
    cursor:pointer; 
    width:300px; 
    margin-top:15px; 
    background:white; 
    border-radius:10px; 
    box-shadow: 6px 4px 8px rgba(0, 0, 0, 0.25); 
    padding:10px 15px; 
    position:relative; 
    border:1px solid rgba(100, 100, 100, 0.6);
}

.revision-box:hover{
    background:linear-gradient(90deg, rgb(238, 216, 132), rgb(200, 172, 90));
}

@media (max-width: 991px){
    
    #main_page_text{
        display:none;
    }
    
    #mobile_loading_page {
        display:flex;
    }
    
    .only-desktop{
        display:none;
    }
    
    .only-mobile{
        display:flex;
    }

    #menu{
        height:50px;  
        position:fixed;
        z-index:10;
    }
    
    #nav_mobile{
        display:flex;
    }
    
    #menu #nav{
        top:50px;
        width:100%;
        background: rgb(0, 0, 0);
        position:fixed;
        left:-100%;
        flex-direction:column;
        z-index:10;
        transition: 0.5s;
    }
    
    #nav img{
        display:none;
    }
    
    #nav_items{
        position:static; 
        left:0;
        right:0;
        height:auto;
        width:100%;
    }
    
    .option-text:hover{
        border-radius:0px;
    }
    
    #menu_option_1{
        width:100%;
        height:50px;
        margin:auto;
        
    }
    
    #menu_option_2{
        width:100%;
        height:50px;
        margin:auto;
    }
    
    #menu_option_3{
        width:100%;
        height:50px;
        margin:auto;
    }
    
    #menu_option_4{
        position:static; 
        right:0;
        height:50px;
        left:0;
        width:100%;
        margin:auto;
    }
    
    #menu #nav.active{
        left:0;
    }
    
    #home{
        margin-top:60px;
    }
    
    #home .div_1{
        height:190px; 
        padding:10px;
        border-radius:10px; 
        flex-direction:column;
        align-items:flex-start;
    }
    
    #home .div_1 .sub_div_1{
        position:absolute;
        top:10px;
        right:20px;
        height:auto;
        margin-left:auto;
    }
    
    #home .div_1 .sub_div_2{
        margin-left:10px;
        margin-top:10px;
    }
    
    #home .div_1 .sub_div_3{
        margin-left:10px;
        margin-top:10px;
    }
    
    #home .div_1 .text_1{
        font-size:16px;
        margin-right:10px
    }
    
    #home .div_1 .text_2{
        font-size:12px; 
        font-weight:300
    }
    
    #home .div_2{
        justify-content:center; 
        padding-left:0px; 
    }
    
    #home .div_3 .sub_div_1{
        margin-right:0px; 
    }
    
    #home .div_3 .sub_div_1 button{
        font-size:14px;
        width:80%;
    }
    
    #home .div_3 .sub_div_2{
        margin-left:0px; 
        margin-top:20px;
        height:230px;
    }
    
    #home .div_4{
        margin-top:20px;
        justify-content:center;
    }
    
    #home .div_4 .sub_div_1{
        margin-bottom:20px;
    }
                    
    #revisions{
        margin-top:60px; 
    }
    
    #revisions .div_1{
        justify-content:center; 
        padding-left:0px; 
        justify-content:center;
    }
    
    #revisions .div_1 .sub_div_1{
        margin-top:20px;
    }
    
    #revisions .div_2{
        margin-top:20px;
    }
    
    #revisions .div_2 .sub_div_1{
        flex:1; 
        height:60px; 
        text-align:center; 
        border:1px solid rgb(220, 220, 220);
    }
    
    #revisions .div_2 .sub_div_1 .sub_sub_div_1{
        margin-top:10px;
        flex-direction:row; 
    }
    
    #activities{
        margin-top:60px;
    }
    
    #activities .div_1{
        width:100%; 
        position:static; 
        left:0px;
        right:0px;
        top:0px;
        bottom:0px;
    }
    
    #activities .div_2{
        margin-top:20px;
    }
    
    #activities .div_1 .sub_div_1{
        width:90%; 
        height:300px; 
    }
    
    #performance{
        margin-top:40px;
    }
    
    #performance .div_1{
        flex-direction:column;
        width:100%;
        padding:0;
    }
    
    #performance .div_1 .sub_div_1{
        margin-top:15px;
        width:90%;
    }
    
    #performance .div_2 .sub_div_1{
        width:90%;
        margin-bottom:15px;
    }
    
    #performance .div_3{
        margin-top:0px;
        width:90%;
    }
    
    #performance .div_3 .sub_div_1{
        margin:0 auto 20px auto;
        height:200px;
        
    }
    
}