@import url("Theme.AGV_UI_th.css?3837");

/* CSS PARA SER EXPORTADO PARA AGV_UI_RESPONSIVE */

/* CSS AGV */

:root {
    --color-verde: #00a29a;
    --color-cinza:;
}

table, td, th { 
    border-collapse: collapse;
}

.DisplayFlex {
    display: flex;
    align-items: center;
}

a {
    color: initial;   
}

.DisplayBlock {
    display: block;
}

.FlexBetween {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.H1 {
    color: #474747;    
    font-family: Arial;    
    font-size: 32px;    
    font-weight: bold;
    line-height: 37px;
}

.H2 {
    color: #FBB030;    
    font-family: Arial;    
    font-size: 22px;    
    font-weight: bold;    
    line-height: 26px;
    white-space: nowrap;
}

.SubtitleForm {
    font-size: 14px;
    color: #999999;
    font-weight: bold;
    margin-bottom: 20px;
}

.ContentPages {
    padding: 30px 0;   
}

.PaddingContent {
    padding: 0 30px;   
}

.TitlePage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.IconTitle {
    margin-right: 15px   
}

.AlertMarginTop {
    margin-top: 20px;   
}

.BoxCinza {
    border: 1px solid #CCCCCC;  
    border-left: 0;
    border-right: 0;
    background-color: #F7F7F7;
    padding: 40px 40px; 
}

.BoxSearch {
    border: 1px solid #CCCCCC;    
    border-radius: 4px;    
    background-color: rgba(0,0,0,0.05);
    padding: 16px 20px; 
    display: flex;
    align-items: center;
    width: 100%;
}

.SearchComponent {
    width: 100%;   
}

.BoxSearch input {
    width: 100%;   
}

.InputDefault {
    border: 1px solid #DDDDDD;
    border-radius: 50px;
    background-color: #FFFFFF;
    box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.3);
    padding: 5px 10px 8px 10px;
    height: 30px;
}

/* BOTOES */

.ButtonSearch {
    margin-left: 20px;
}

.ButtonVerde {
    color: white;
    border: 1px solid #dcdcdc;
    box-shadow: inset 0 0px 0 0 rgba(19,24,25,0.2);
    padding: 5px 15px;
    border-radius: 20px;
    background-color: var(--color-verde);
    font-weight: bold;
    cursor: pointer;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    text-transform: uppercase;
}

.ButtonVerde:hover {
    background-color: #017872;
    box-shadow: inset 0 -1px 0 0 #747272;
}

.ButtonVerde:active {
    background-color: #017872;
    box-shadow: inset 0 2px 4px 0 rgba(18,20,20,0.4);
    transition: none;
}

.ButtonMaisInformacoes {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 50px;
    padding: 5px 15px;
    font-weight: 500;
    font-size: 16px;
    background-color: rgba(227,227,227,0.3);
    color: var(--color-verde);
    cursor: pointer;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    text-transform: uppercase;
}

.ButtonMaisInformacoes:hover {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 50px;
    padding: 5px 15px;
    font-weight: 500;
    font-size: 16px;
    background-color: var(--color-verde);
    color: white;        
    cursor: pointer;
}

.ButtonBranco {
    color: rgba(0,0,0,0.54);
    border: 1px solid #DCDCDC;
    box-shadow: inset 0 0px 0 0 rgba(19,24,25,0.2);
    padding: 5px 20px;
    border-radius: 20px;
    background-color: #FFFFFF;
    font-weight: bold;
    cursor: pointer;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    text-transform: uppercase;
}

.ButtonAmarelo {
    text-transform: uppercase;
    color: white;
    border: none;
    box-shadow: inset 0 0px 0 0 rgba(19,24,25,0.1);
    padding: 5px 20px;
    border-radius: 20px;
    background-color: #fbb130;
    font-weight: bold !important;
    cursor: pointer;   
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.ButtonAmarelo:hover{
    background-color: #FF8A00;
    box-shadow: inset 0 -1px 0 0 rgba(19,24,25,0.3);
}

.ButtonAmarelo:active {
    box-shadow: inset 0 2px 4px 0 rgba(18,20,20,0.4);
    background-color: #FF8A00;
    transition: none;
}

.ButtonAmarelo:disabled {
    color: #DADBDE;
    background-color: #999999;
}

.ButtonAddRepresentantes {
    border: 1px solid #CCCCCC;  
    background-color: #F7F7F7;
    padding: 20px 10px;
    line-height: 0;
    display: flex;
    align-items: center;
}


/* LISTA INSTALAÇÕES */

.ItemCodigoInstalacoes {
    border: 1px solid #ccc;
    border-collapse: collapse;
    border-radius: 4px;
    /* border-style: hidden; /* hide standard table (collapsed) border */
    /*box-shadow: 0 0 0 1px #ccc; /* this draws the table border  */     
}

.ItemCodigoInstalacoes td, .ItemCodigoInstalacoes th {
    border: 1px solid #ccc;
}

.ListaInstalacoes {
    display: flex;
    align-items: center;
    justify-content: space-between;  
}

.ListagemInstalacoes {
    margin-top: 20px;   
}

.LabelCodigoInstalacao {
    color: #474747;    
    font-family: Arial;    
    font-size: 12px;    
    line-height: 14px;
}

.CodigoInstalacao {
    font-size: 12px;
    color: var(--color-verde);
    font-weight: bold;
    margin-left: 5px;
    text-transform: uppercase;
}

.EnderecoCodigoInstalacao {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #505050;
    margin-top: 10px;
}

.ContentListaInstalacoes {
    display: flex;   
    align-items: center;
    padding: 15px;
}

.BoxCodigoInstalacao {
    border: 1px solid #CCCCCC;    
    border-radius: 4px;   
    padding: 16px 20px; 
    margin-top: 20px;
}

/* LABEL FORM */

.RadioFlex {
    display: flex;
    align-items: center; 
    flex-wrap: wrap;
}

.ItemRadio {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.ItemRadio div:first-child  {
    margin-right: 10px;   
}

.ItemRadioVertical {
    margin-bottom: 10px;
}

.ItemRadioHorizontal {
    margin-right: 100px;   
}

.ItemRadioHorizontalPeq {
    margin-right: 50px;   
}

.ItemRadioHorizontal:last-child, .ItemRadioHorizontalPeq:last-child {
    margin-right: 0;  
}

.ItemForm {
    margin-right: 10px;
    margin-bottom: 15px;   
}

.ItemForm100 {
    width: 100%;
}

.ItemFormPeq {
    width: 200px;   
}

.FormSelect {
    min-width: 200px;   
}

.LabelForm {
    color: #666666;    
    font-family: Arial;    
    font-size: 12px;    
    line-height: 16px; 
    margin-left: 5px;
}

.IconObrigatorio {
    color: #fbb130;
    font-family: Arial;    
    font-size: 12px;    
    line-height: 16px;  
}

.CamposFormulario {
    margin-top: 10px;
    display: flex;  
    align-items: flex-end;
}

.AlignCenter {
    align-items: center;
}

.CamposFormulario .ItemForm:last-child {
    margin-right: 0;
}

/* FORM */

.InputForm {
    margin-top: 10px;     
}

.LinhaTitle {
    border-bottom: 1px solid #E3E3E3;
    line-height: 0.1em;
    width: 100%;
    margin-left: 10px;   
}

.ActionsForm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
}

/* TABELA INSTALACAO GERADORA */

.TablePercentual {
    background-color: #FFF;
    border: 1px solid #CCCCCC;
    margin-bottom: 40px;
}

.TablePercentualInput {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
    /*margin-bottom: 40px;*/
}

.TablePercentual th, .TablePercentual td, .TablePercentualInput th, .TablePercentualInput td {
    border: 1px solid #CCCCCC;
    padding: 20px
}

.ColunaPercentual {
    width: 150px;
    text-align: center;
}

.ColunaPercentualText {
    margin-top: 5px;
    font-size: 28px;
}

.ColunaPercentualInput {
    width: 150px;
    color: #999999 !imporant;
    margin-top: 5px;
    font-size: 14px;
}

/* ETAPAS MICRO MINI */

.EspacoWizard {
    margin: 30px 0;   
}

.EtapasMicroMini {    
    display: flex;   
    margin: 0 auto;
    width: 580px;
}

.EtapasMicroMiniPJ {    
    display: flex;   
    margin: 0 auto;
    width: 750px;
}

.BolaVerde {
    border-color :#029696;
    color: #029696;
    background-color: #fff;
    border-radius: 50px;
    border-style: solid;
    border-width: 2px;    
    font-weight: bold;
    height: 32px;
    padding: 6px 0px 0px 12px;
    width: 32px;
}

.BolaFinalizada {
    color: #FFF;
    background-color: #029696;
    border-color: #029696;
    border-radius: 50px;
    border-style: solid;
    border-width: 2px;    
    font-weight: bold;
    height: 32px;
    padding: 6px 0px 0px 12px;
    width: 32px;
}

.BolaDesativada {
    color: #CED4DA;
    border-color: #CED4DA;
    border-radius: 50px;
    border-style: solid;
    border-width: 2px;    
    font-weight: bold;
    height: 32px;
    padding: 6px 0px 0px 12px;
    width: 32px;
}

.ItemEtapa {
    display: flex;
    align-items: center;
}

.LinhaEtapa, .LinhaEtapaPJ {
    border-top: 1px solid #ccc;
    line-height: 0.1em;
    width: 150px;
}

.LinhaEtapaVerde, .LinhaEtapaPJVerde {
    border-top: 2px solid #029696;
    line-height: 0.1em;
    width: 150px;
}

.LabelEtapas {
    display: flex;   
    margin: 10px auto 0 auto;
    width: 680px;
    font-size: 14px;
}

.LabelEtapasPJ {
    display: flex;   
    margin: 10px auto 0 auto;
    width: 810px;
    font-size: 14px;
}

.BoxEtapas {
    border: 1px solid #CCCCCC;      
    background-color: #F7F7F7;
    padding: 20px 40px; 
    border-radius: 4px; 
}

.ContentDocumentos {
    padding: 30px 0;   
    background-color: #FAFAFA; 
}

.ContentDocumentos .PaddingContent {
    margin-bottom: 20px;
}

.IconeLixeira {
    width: 50px;
    text-align: center;
}

.IconeLixeira a {
    font-size: 24px;   
    color: #707070;
    border-color: #707070;
}

/* ACCORDION */

.accordion-item-header {
    background-color: #F5F5F5;
    border-bottom: 1px solid #DDDDDD;
}

.file-upload {
    background-color: transparent;
}

.LabelAccordion {
    font-size: 18px;
    font-weight: bold;
    color: #747474;
}

.AccordionDocumentos {
    margin: 40px 0;
}

@media only screen and (max-width: 1010px) {
    
    .LabelEtapasPJ {
        display: none;
    }
    
    .LinhaEtapaPJ, .LinhaEtapaPJVerde {
        width: 80px;
    }
    
    .EtapasMicroMiniPJ {
        width: 483px;   
    }    
        
}

@media only screen and (max-width: 900px) {
    
    .BoxCinza {
        padding: 40px 20px;   
    }
 
    .EtapasMicroMini {
        width: 300px;
    }

    .LinhaEtapa, .LinhaEtapaPJ, .LinhaEtapaVerde, .LinhaEtapaPJVerde {
        width: 50px;
    }

    .LabelEtapas, .LabelEtapasPJ {
        display: none;
    }
    
     .EtapasMicroMiniPJ {
        width: 362px;   
    }
    
}

@media only screen and (max-width: 800px) {
 
    .ButtonMaisInformacoes {
        display: none;   
    }
    
    .ListagemInstalacoes {        
        overflow: auto;
        box-shadow: inset -8px 0 10px -6px #ccc; 
    }
    
    .TablePercentualInput {
        background-color: initial;   
    }
    
    .ItemCodigoInstalacoes {
        width: 900px;   
        border-radius: 0;
        border: 1px solid #ccc;
    }
    
    .ContentDocumentos .PaddingContent {
        margin-bottom: 20px;
    }

    /* ACCORDION */

    .accordion-item-header {
        background-color: #F5F5F5;
        border-bottom: 1px solid #DDDDDD;
    }

    .file-upload {
        background-color: transparent;
    }

    .LabelAccordion {
        font-size: 18px;
        font-weight: bold;
        color: #6F6F6F;
    }

    .LabelUpload {
        margin-top: 20px;   
    }

    .AccordionDocumentos {
        margin: 40px 0;
    }

    .MensagemAdicional {
        margin-top: 40px;
    }
    
    .RadioFlex {
        display: block;
    }  
    
}

@media only screen and (max-width: 700px) {
    
    .CamposFormulario {
        flex-wrap: wrap;
        margin-top: 0;
    }   
    
    .ItemForm {
        margin-right: 0;
        margin-bottom: 20px;
    }
    
    .ItemFormPeq {
        width: 100%;           
    } 
    
    .EtapasMicroMini {
        width: 280px;   
    }
        
}


@media only screen and (max-width: 550px) {
    
   .LinhaEtapa, .LinhaEtapaPJ, .LinhaEtapaVerde, .LinhaEtapaPJVerde {
        width: 15px;
    }
    
    .EtapasMicroMini {
        width: 175px;   
    }
    
    .EtapasMicroMiniPJ {
        width: 222px;   
    }
    
}