@import url('https://fonts.googleapis.com/css?family=Eczar|Roboto|Dawning+of+a+New+Day');
@import url('css-variables.css');

/*CONFIGURAÇÕES GERAIS===================================================================CONFIGURAÇÕESS DE GERAIS*/
body{
    overflow: auto;
    min-width: 800px;
    font-family: 'Roboto', sans-serif;
}
body md-icon{
    fill: var(--color-icon);
}
body button:not([disabled]):hover md-icon:not(.keep-style-on-hover):not(.fill-green):not(.fill-red):not(.fill-blue):not(.fill-yellow):not(.fill-error):not(.fill-disabled){
    fill: var(--color-primary);
}
body button[disabled] md-icon{
    fill: var(--color-disabled);
}
.no-pointer-event{
    pointer-events: none;
}
.allow-select{
    pointer-events: unset !important;
}
.cursor-pointer:hover > .md-container{
    cursor: pointer!important;
}
.cursor-default {
    cursor: default!important;
}
.set-cursor-pointer{
    cursor: pointer!important;
}
.mat-row, .mat-card:not(rect), .card-item, .card-mov, .md-tab, md-list-item{
    color: var(--color-on-surface-dark) !important;
}
.flex-2{
    flex-grow: 2 !important;
}
.flex-3{
    flex-grow: 3 !important;
}
.flex-4{
    flex-grow: 4 !important;
}


.flex-flow-row{
    flex-flow: row !important;
}
.flex-flow-column{
    flex-flow: column !important;
}
md-divider{
    border-top-color: var(--color-divider);
}
.border-top-1px-color-divider{
    border-top: 1px solid var(--color-divider);
}
.enable-scroll{
    overflow-y: auto;
    overflow-x: hidden;
}
.enable-scroll-important{
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.enable-scroll-x-y-auto{
    overflow-y: auto;
    overflow-x: auto;
}
.overflow-y-hidden{
    overflow-y: hidden;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-visible {
    overflow: visible
}
.overflow-hidden {
    overflow: hidden
}
.contorno-imagem, .funcionario-imagem, .contorno-imagem-dp, .vinculoPJ-imagem{
    border-radius: 50%;
    height: 106px;
    width: 106px;
    z-index: 12;
    object-fit: cover;
    display: flex;
    background-color: var(--color-surface);
}
.contorno-imagem-dp{
    height: 116px;
    width: 116px;
}
#contorno-lider{
    background-color: var(--color-primary);
    display: flex;
    position: absolute;
    width: 100%;
    height: 94px;
    border-radius: 7px 7px 0px 0px;
    top: 0px;
}
.main-content{
    position: absolute;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    background-color: var(--color-background);
    min-height: 100%;
}
#left-container,#right-container{
    max-width:400px;
    width: 100%;
    margin-bottom: 5px;
}
#left-container.hidden{
    position: absolute;
    top: -3000px;
}
#middle-container{
    width: 10px;
    min-width: 10px;
    height: 150px;
    border-radius: 5px;
    margin: 0px 0px 5px 0px;
    transition: all ease-in-out var(--animation-time);
    -webkit-transition: all ease-in-out var(--animation-time);
    -moz-transition: all ease-in-out var(--animation-time);
}
#middle-container:hover{
    background-color: var(--color-hover);
}
#middle-container md-icon{
    width: 24px;
    height: 24px;
    min-width: 0 !important;
    min-width: 0 !important;
}
#middle-container svg{
    position: relative;
    left: -7px !important;
}
#rowbar{
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-flow: row;
    justify-content: space-evenly;
    margin-bottom: 5px;
}
#rowbar > folha-mini-toolbar-mat{
    margin-bottom: 9px;
}
.mat-row{
    display: flex;
    flex-flow: row;
    background-color: var(--color-surface);
    width: 100% !important;
}
.shadowed{
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12);
}
.no-box-shadow-top{
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12);
}
.no-box-shadow{
    box-shadow: none !important;
}
.z-index-10{
    position: relative;
    z-index: 10;
}
.z-index-15{
    z-index: 15;
}
.custom-divider{
    border-bottom: 1px solid var(--color-on-surface-dark);
}
.custom-divider-func{
    border-bottom: 1px solid var(--color-blue);
}
.custom-divider-comp{
    border-bottom: 1px solid var(--color-yellow);
}
.background-color{
    background-color: var(--color-background);
}
.background-color-green{
    background-color: var(--color-green);
}
.background-color-yellow{
    background-color: var(--color-yellow);
}
.background-color-light-grey{
    background-color: #aaaaaa;
}
.background-color-gray{
    background-color: var(--color-gray);
}
.border-solid-3-primary{
    border: 3px solid var(--color-primary) !important;
}
.border-solid-3-transparent{
    border: 3px solid transparent;
}
.border-solid-2-error-around-item{
    border: 2px solid var(--color-error);
    border-radius: 8px;
}
.my-tooltip-parent {
    position: relative;
    z-index: 1;
  }

.border-left-1-surface-dark{
    border-left: 1px solid var(--color-surface-dark);
}
.background-color-yellow{
    background-color: var(--color-yellow);
}
.background-color-red{
    background-color: var(--color-red);
}
.background-color-red-important{
    background-color: var(--color-red) !important;
}
.background-color-primary-lighter{
    background-color: var(--color-on-primary-lighter);
}
.border-radius-50{
    border-radius: 50%;
}
.border-radius-10px{
    border-radius: 10px;
}
.border-radius-8px{
    border-radius: 8px !important;
}
.border-radius-8-8-0-0px{
    border-radius: 8px 8px 0px 0px;
}
.border-radius-0-0-8-8px{
    border-radius: 0 0 8px 8px;
}
.border-radius-8px-bottom{
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.border-radius-8px-top{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.cursor-default{
    cursor: default;
}
.transparent-background{
    background-color: transparent;
}
.break-line{
    white-space: pre-line;
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE DISPLAY===============================================================CONFIGURAÇÕES DE DISPLAY*/
.display-none{
    display: none;
}
.display-flex{
    display: flex;
}
.display-block{
    display: block;
}
.display-content{
    display: contents !important;
}
.display-grid{
    display: grid;
}
.grid-template-columns-106px{
    grid-template-columns: repeat(auto-fit,106px);
}
.right-zero{
    right: 0;
}
.top-zero{
    top: 0;
}
.right-15{
    right: 15px;
}
.right-panel{
    max-width: calc(100% - 310px);
    width: 100%;
    height: 100%;
}

.left-panel{
    display: grid;
    grid-row-gap: 10px;
    grid-template-rows: 345px calc(100% - 355px);
    width: 300px;
    margin-right: 10px;
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE PADDING===============================================================CONFIGURAÇÕES DE PADDING*/
.no-padding{
    padding: 0 !important;
}
.no-padding-bottom{
    padding-bottom: 0px !important;
}
.padding-4{
    padding: 4px;
}
.padding-5{
    padding: 5px;
}
.padding-6{
    padding: 6px !important;
}
.padding-8{
    padding: 8px !important;
}
.padding-10{
    padding: 10px !important;
}
.padding-16{
    padding: 16px !important;
}
.padding-20{
    padding: 20px;
}
.padding-bottom-2{
    padding-bottom: 2px;
}
.padding-bottom-10{
    padding-bottom: 10px;
}
.padding-bottom-16{
    padding-bottom: 16px;
}
.padding-bottom-5{
    padding-bottom: 5px;
}
.padding-top-4px{
    padding-top: 4px;
}
.padding-top-9px{
    padding-top: 9px;
}
.padding-top-7px{
    padding-top: 7px;
}
.padding-top-8px{
    padding-top: 8px;
}
.no-padding-top{
    padding-top: 0 !important;
}
.padding-vertical-10{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.padding-side-5{
    padding-right: 5px !important;
    padding-left: 5px !important;
}
.padding-side-10{
    padding-right: 10px !important;
    padding-left: 10px !important;
}
.padding-side-16{
    padding-right: 16px !important;
    padding-left: 16px !important;
}
.padding-side-18{
    padding-right: 18px !important;
    padding-left: 18px !important;
}
.padding-side-20{
    padding-right: 20px !important;
    padding-left: 20px !important;
}
.no-padding-left{
    padding-left: 0 !important;
}
.no-padding-right{
    padding-right: 0 !important;
}
.padding-left-7{
    padding-left: 7px;
}
.padding-left-8{
    padding-left: 8px;
}
.padding-left-10{
    padding-left: 10px;
}
.padding-left-16{
    padding-left: 16px;
}
.padding-left-20{
    padding-left: 20px;
}
.padding-left-4{
    padding-left: 4px;
}
.padding-left-5{
    padding-left: 5px;
}
.padding-left-30{
    padding-left: 30px;
}
.padding-right-4{
    padding-right: 4px;
}
.padding-right-8{
    padding-right: 8px;
}
.padding-right-10{
    padding-right: 10px;
}
.padding-right-16{
    padding-right: 16px;
}
.padding-right-zero{
    padding-right: 0px !important;
}
.padding-right-30{
    padding-right: 30px !important;
}
.padding-top-40{
    padding-top: 40px;
}
.padding-top-20{
    padding-top: 20px;
}
.padding-top-16{
    padding-top: 16px;
}
.padding-top-25{
    padding-top: 25px;
}
.padding-top-10{
    padding-top: 10px;
}
.padding-top-2{
    padding-top: 2px;
}
.padding-top-5{
    padding-top: 5px;
}
.padding-grid{
    padding: 12px 0px 15px 5px;
}
.padding-grid-ferias{
    padding: 10px 0px 15px 5px;
}
.padding-8-16{
    padding: 8px 16px;
}
.padding-8-zero{
    padding: 8px 0;
}

/*===============================================================================================================*/

/*CONFIGURAÇÕES DE MARGEM=================================================================CONFIGURAÇÕES DE MARGEM*/
.no-margin{
    margin: 0 !important;    
}
.margin-1{
    margin: 1px;
}
.margin-8{
    margin: 8px;
}
.margin-10{
    margin: 10px !important;
}
.margin-side-4{
    margin: 0 4px;
}
.margin-side-5{
    margin: 0 5px;
}
.margin-side-16{
   margin-left: 16px;
   margin-right: 16px;
}
.margin-side-20{
    margin: 0 20px;
}
.margin-side-auto{
    margin-left: auto;
    margin-right: auto;
}
.margin-side-8{
    margin-left: 8px !important;
    margin-right: 8px !important;
}
.margin-bottom-6{
    margin-bottom: 6px;
}
.margin-bottom-3{
    margin-bottom: 3px !important;
}
.margin-bottom-5{
    margin-bottom: 5px;
}
.margin-bottom-8{
    margin-bottom: 8px;
}
.margin-bottom-9{
    margin-bottom: 9px;
}
.margin-bottom-10{
    margin-bottom: 10px;
}
.margin-bottom-16{
    margin-bottom: 16px;
}
.margin-bottom-20{
    margin-bottom: 20px !important;
}
.margin-bottom-30 {
    margin-bottom: 30px !important;
}
.margin-bottom-40 {
    margin-bottom: 40px !important;
}
.margin-bottom-zero{
    margin-bottom: 0 !important;
}
.no-margin-top{
    margin-top: 0;
}
.no-margin-top-important{
    margin-top: 0 !important;
}
.margin-top-auto{
    margin-top: auto;
}
.margin-top-zero{
    margin-top: 0;
}
.margin-bottom-auto{
    margin-bottom: auto;
}
.margin-bottom-auto-important{
    margin-bottom: auto !important;
}
.margin-top-2{
    margin-top: 2px !important;
}
.margin-top-3{
    margin-top: 3px !important;
}
.margin-top-5{
    margin-top: 5px !important;
}
.margin-top-8{
    margin-top: 8px !important;
}
.margin-top-10{
    margin-top: 10px !important;
}
.margin-top-15{
    margin-top: 15px !important;
}
.margin-top-18{
    margin-top: 18px !important;
}
.margin-top-20{
    margin-top: 20px !important;
}
.margin-top-30{
    margin-top: 30px !important;
}
.margin-top-48{
    margin-top: 48px;
}
.margin-left-auto{
    margin-left: auto !important;
    margin-top: auto;
    margin-bottom: auto;
}
.only-margin-left-auto{
    margin-left: auto !important;
}
.margin-left-and-top-auto{
    margin-left: auto !important;
    margin-top: auto;
}
.margin-top-and-bottom-auto{
    margin-top: auto;
    margin-bottom: auto;
}
.margin-top-and-bottom-3px{
    margin-top: 3px;
    margin-bottom: 3px;
}
.left-zero{
    left: 0;
}
.left-15px{
    left: 15px;
}
.left-5px{
    left: 5px;
}
.top-5px{
    top: 5px;
}
.top-18px{
    top: 18px;
}
.top-21px{
    top: 21px;
}
.bottom-18px {
    bottom: 18px;
}
.margin-left-zero{
    margin-left: 0px !important;
}
.margin-left-2{
    margin-left: 2px;
}
.margin-left-4{
    margin-left: 4px;
}
.margin-left-5{
    margin-left: 5px;
}
.margin-left-8{
    margin-left: 8px !important;
}
.margin-left-10{
    margin-left: 10px ;
}
.margin-left-14{
    margin-left: 14px !important;
}
.margin-left-15{
    margin-left: 15px;
}
.margin-left-16{
    margin-left: 16px !important;
}
.margin-left-20{
    margin-left: 20px !important;
}
.margin-left-25{
    margin-left: 25px !important;
}
.margin-left-30{
    margin-left: 30px;
}
.margin-left-50{
    margin-left: 50px;
}
.margin-right-auto{
    margin-right: auto !important;
}
.margin-right-50{
    margin-right: 50% !important;
}
.margin-left-and-right-auto{
    margin: 0 auto;
}
.margin-right-zero{
    margin-right: 0;
}
.margin-right-4{
    margin-right: 4px;
}
.margin-right-2{
    margin-right: 2px;
}
.margin-right-5{
    margin-right: 5px;
}
.margin-right-7{
    margin-right: 7px;
}
.margin-right-8{
    margin-right: 8px;
}
.margin-right-10{
    margin-right: 10px;
}
.margin-right-15{
    margin-right: 15px;
}
.margin-right-20{
    margin-right: 20px;
}
.margin-right-25{
    margin-right: 25px;
}
.margin-right-30{
    margin-right: 30px;
}
.margin-top-20-less{
    margin-top: -20px;
}
.flex-itens-end{
    display: flex;
    align-items: flex-end;
}

.margin-right-50{
    margin-right: 50px;
}
.margin-4-zero{
    margin: 4px 0;
}
.margin-4{
    margin: 4px;
}
.margin-10-zero{
    margin: 10px 0;
}
.margin-10-auto{
    margin: 10px auto;
}
.margin-auto-zero{
    margin: auto 0;
}
.margin-auto{
    margin: auto;
}
.margin-auto-important{
    margin: auto !important;
}
.margin-auto-8{
    margin: auto 8px;
}
.margin-zero-left-auto{
    margin: 0 !important;
    margin-left: auto !important;
}
.margin-bottom-21{
    margin-bottom: 21px;
}
.margin-bottom-51{
    margin-bottom: 51px;
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE HEIGHT=================================================================CONFIGURAÇÕES DE HEIGHT*/
.height-fit-content{
    height: fit-content;
    height: -moz-fit-content;
}
.min-height-fit-content{
    min-height: fit-content;
}
.min-height-50px{
    min-height: 50px;
}
.min-height-40px{
    min-height: 40px;
}
.min-height-30px{
    min-height: 30px;
}
.min-height-200{
    min-height: 200px;
}
.min-height-300px{
    min-height: 300px;
}
.min-height-330px{
    min-height: 330px;
}
.min-height-352px{
    min-height: 352px;
}
.min-height-252px{
    min-height: 252px;
}
.min-height-930px{
    min-height: 930px;
}
.min-height-76px{
    min-height: 76px;
}
.height-41vh{
    height: 41vh;
}
.height-60vh{
    height: 60vh;
}
.height-90vh{
    height: 90vh;
}
.height-98{
    height: 98%;
}
.height-100{
    height: 100%;
}
.height-30px{
    height: 30px;
}
.height-100-22{
    height: calc(100% - 22px);
}
.height-100-45{
    height: calc(100% - 45.6px);
}
.height-90{
    height: 90%;
}
.height-5{
    height: 5%;
}
.height-100px{
    height: 100px; 
}
.height-108px{
    height: 108px; 
}
.height-36px{
    height: 36px; 
}
.height-500px{
    height: 500px; 
}
.height-65px{
    height: 65px;
}
.height-67px{
    height: 67px;
}
.height-124px{
    height: 124px; 
}
.height-150px{
    height: 150px;
}
.height-165px{
    height: 165px;
}
.height-80{
    height: 80%;
}
.height-80px{
    height: 80px;
}
.height-243px{
    height: 243px;
}
.height-236px{
    height: 236px;
}
.height-200px{
    height: 200px;
}
.height-300px{
    height: 300px;
}
.height-60px{
    height: 60px;
}
.height-70px{
    height: 70px;
}
.height-270px{
    height: 270px;
}
.height-76px-important{
    height: 76px !important;
}
.height-48px{
    height: 48px;
}
.height-42px{
    height: 42px;
}
.height-44px{
    height: 44px;
}
.height-24px{
    height: 24px;
}
.height-40px{
    height: 40px;
}
.height-29px{
    height: 29px;
}
.height-28px{
    height: 28px;
}
.height-55px{
    height: 55px;
}
.height-105px{
    height: 105px;
}
.height-116px{
    height: 116px;
}
.height-170px{
    height: 170px;
}
.height-320px{
    height: 320px;
}
.height-322px{
    height: 322px;
}
.height-22px{
    height: 22px;
}
.height-50px{
    height: 50px;
}
.height-45px{
    height: 45px;
}
.height-75px-important{
    height: 75px !important;
}
.height-50{
    height: 50%;
}
.height-35px{
    height: 35px;
}
.height-10px{
    height: 10px;
}
.height-content{
    height: calc(100% - 59px);
}
.height-content-20{
    height: calc(100% - 20px);
}
.height-content-22{
    height: calc(100% - 22px);
}
.height-content-28{
    height: calc(100% - 28px);
}
.height-content-30{
    height: calc(100% - 30px);
}
.height-content-34{
    height: calc(100% - 34px);
}
.height-content-25{
    height: calc(100% - 25px);
}
.height-content-84{
    height: calc(100% - 84px);
}
.height-content-75{
    height: calc(100% - 75px);
}
.height-content-76{
    height: calc(100% - 76px);
}
.height-content-70{
    height: calc(100% - 70px);
}
.height-content-72{
    height: calc(100% - 72px);
}
.height-content-60 {
    height: calc(100% - 60px);
}
.height-content-50 {
    height: calc(100% - 50px)!important;
}
.height-content-45 {
    height: calc(100% - 45px);
}
.height-content-48 {
    height: calc(100% - 48px)!important;
}
.height-content-52 {
    height: calc(100% - 52px)!important;
}
.height-content-55{
    height: calc(100% - 55px);
}
.height-content-40{
    height: calc(100% - 40px);
}
.height-content-35{
    height: calc(100% - 35px);
}
.height-content-41{
    height: calc(100% - 41px);
}
.height-content-42{
    height: calc(100% - 42px);
}
.height-content-50{
    height: calc(100% - 50px);
}
.height-content-55{
    height: calc(100% - 55px);
}
.height-content-69{
    height: calc(100% - 69px);
}
.height-content-92{
    height: calc(100% - 92px);
}
.height-content-80{
    height: calc(100% - 80px);
}
.height-content-85{
    height: calc(100% - 85px);
}
.height-content-97{
    height: calc(100% - 97px);
}
.height-content-99{
    height: calc(100% - 99px);
}
.height-content-108 {
    height: calc(100% - 108px);
}
.height-content-114 {
    height: calc(100% - 114px);
}
.height-content-110 {
    height: calc(100% - 110px);
}
.height-content-118 {
    height: calc(100% - 118px);
}
.height-content-142{
    height: calc(100% - 142px);
}
.height-content-149{
    height: calc(100% - 149px);
}
.height-content-150{
    height: calc(100% - 150px) !important;
}
.height-content-138 {
    height: calc(100% - 138px);
}
.height-content-100{
    height: calc(100% - 100px);
}
.height-content-219{
    height: calc(100% - 219px) !important;
}
.height-content-310{
    height: calc(100% - 310px) !important;
}
.max-height-170px{
    max-height: 170px;
}
.max-height-189px{
    max-height: 189px;
}
.max-height-270{
    max-height: 270px;
}
.max-height-310{
    max-height: 310px;
}
.max-height-650px{
    max-height: 650px;
}
.height-content-65{
    height: calc(100% - 65px) !important;
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE WIDTH===================================================================CONFIGURAÇÕES DE WIDTH*/
.width-fit-content{
    width: fit-content;
    width: -moz-fit-content;
}
.no-max-width{
    max-width: unset !important;
}
.width-min-200{
    min-width: 200px;
}
.width-min-218{
    min-width: 218px;
}
.width-min-450{
    min-width: 450px;
}
.width-min-150{
    min-width: 150px;
}
.width-min-190{
    min-width: 190px;
}
.width-min-300{
    min-width: 300px;
}
.width-min-0{
    min-width: 0;
}
.width-min-837px{
    min-width: 837px;
}
.width-min-600px{
    min-width: 600px !important;
}
.min-width-650{
    min-width: 650px;
}
.min-width-729{
    min-width: 729px;
}
.min-width-146{
    min-width: 146px;
}
.min-width-511px{
    min-width: 511px !important;
}
.min-width-1182px{
    min-width: 1182px !important;
}
.min-width-1693px{
    min-width: 1693px !important;
}
.width-auto{
    width: auto;
}
.width-38{
    width: 38%;
}
.width-11{
    width: 11%;
}
.width-16{
    width: 16%;
}
.width-6{
    width: 6%;
}
.width-50{
    width: 50%;
}
.width-60{
    width: 60%;
}
.width-83{
    width: 83%;
}
.width-49{
    width: 49%;
}
.width-40{
    width: 40%;
}
.width-30{
    width: 30%;
}
.width-33{
    width: 33%;
}
.width-60{
    width: 60%;
}
.width-35{
    width: 35%;
}
.width-23{
    width: 23%;
}
.width-25{
    width: 25%;
}
.width-20{
    width: 20%;
}
.width-15{
    width: 15%;
}
.width-100-40px{
    width: calc(100% - 40px);
}
.width-100-80px{
    width: calc(100% - 80px);
}
.width-100px{
    width: 100px;
}
.width-65{
    width: 65%;
}
.width-70{
    width: 70%;
}
.width-80{
    width: 80%;
}
.width-95{
    width: 95%;
}
.width-100-20px{
    width: calc(100% - 20px);
}
.width-100-28px{
    max-width: calc(100% - 28px) !important;
}
.width-100-70px{
    width: calc(100% - 70px) !important;
}
.width-100-90px{
    width: calc(100% - 90px);
}
.width-100-100px{
    width: calc(100% - 100px);
}
.no-width{
    width: 0 !important;
}
.no-min-width{
    min-width: 0 !important;
}
.width-100{
    width: 100px !important;
}
.max-width-cabecalho{
    max-width: 100%;
}
.max-width-60{
    max-width: 60% !important;
}
.max-width-70{
    max-width: 70%;
}
.max-width-90{
    max-width: 90%;
}
.max-width-93{
    max-width: 93%;
}
.max-width-95{
    max-width: 95% !important;
}
.max-width-100{
    max-width: 100%;
}
.width-100-30{
    width: calc(100% - 30px);
}
.width-194px{
    width: 194px;
}
.width-112px{
    width: 112px;
}
.width-135px{
    width: 135px;
}
.width-340px{
    width: 340px;
}
.width-300px{
    width: 300px;
}
.width-80px{
    width: 80px;
}
.width-70px{
    width: 70px;
}
.width-60px{
    width: 60px;
}
.width-50px{
    width: 50px;
}
.width-45px{
    width: 45px;
}
.width-35px{
    width: 35px;
}
.width-24px{
    width: 24px;
}
.width-40px{
    width: 40px;
}
.width-20px{
    width: 20px;
}
.width-43px{
    width: 43px;
}
.width-200px{
    width: 200px;
}
.width-212px{
    width: 212px;
}
.width-250px{
    width: 250px;
}
.width-577px{
    width: 577px;
}
.width-55px{
    width: 55px;
}
.width-75px{
    width: 75px;
}
.width-130px{
    width: 130px;
}
.width-180px{
    width: 180px!important
}
.width-400px{
    width: 400px;
}
.width-50vw{
    width: 50vw;
}
.min-width-55px{
    min-width: 55px;
}
.min-width-20{
    min-width: 20%;
}
.min-width-100{
    min-width: 100%;
}
.min-width-30{
    min-width: 30%;
}
.min-width-50{
    min-width: 50%;
}
.min-width-80{
    min-width: 80%;
}
.min-width-22px{
    min-width: 22px;
}
.min-width-210px{
    min-width: 210px;
}
.min-width-275px{
    min-width: 275px;
}
.width-and-min-width-400px{
    min-width: 400px !important;
    width: 400px !important;
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE FILL=====================================================================CONFIGURAÇÕES DE FILL*/
.fill{
    width: 100%;
    height: 100%;
}
.fill-guia{
    width: 100%;
    height: 98%;
}
.fill-width{
    min-width: 100%;
    width: 100%;    
}
.fill-width-4{
    width: 4%;    
}

.fill-width-5{
    width: 5% !important; 
}

.fill-width-7{
    width: 7% !important; 
}

.fill-width-8{
    width: 8%; 
}

.fill-width-10{
    width: 10%;    
}

.fill-width-12{
    width: 12%;    
}
.fill-width-25{
    width: 25%;
}
.fill-width-40{
    width: 40%;
}

.fill-width-15{
    width: 15%;    
}
.fill-width-13{
    width: 11.4%;    
}
.fill-width-20{
    width: 20%;
}
.fill-width-30{
    width: 30%;
}
.fill-width-90{
    width: 90%;    
}
.fill-width-100{
    width: 100%;    
}
.fill-width-12{
    width: 12%;    
}
.fill-width-50{
    min-width: calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
}

.fill-width-60{
    min-width: calc(60% - 4px) !important;
    width: calc(60% - 4px) !important;
}

.fill-width-75{
    min-width: calc(75% - 4px) !important;
    width: calc(75% - 4px) !important;
}

.fill-width-80{
    min-width: 80%;
}

.fill-width-86{
    min-width: 86%;
}

.fill-width-90{
    min-width: 90%;
}

.fill-width-95{
    min-width: 95%;
}

.fill-func-line{
    width: 40%;
    display: inline-flex;
    margin-left: 8px;
}

.fill-evento-line{
    width: 35%;
    display: inline-flex;
    margin-left: 8px;
}

.fill-cargo-line{
    width: 50%;
    display: inline-flex;
    margin-left: 8px;
}
.fill-matricula-line{
    width: 20%;
    display: inline-flex;
    margin-left: 8px;
}
.fill-height{
    height: 100%;
}
.height-auto{
    height: auto;
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE JUSTIFY===============================================================CONFIGURAÇÕES DE JUSTIFY*/
.justify-self-end{
    justify-self: end;
}
.justify-self-baseline{
    justify-self: baseline;
}
.justify-right {
    align-items: flex-end;
    justify-self: flex-end;
    margin-left: auto;
    width: fit-content;
    padding-right: 0;
}
.justify-left{
    align-items: flex-start;
    justify-self: flex-end;
    width: fit-content;
}
.justify-content-left {
    justify-content: left !important;
}
.justify-content-right{
    justify-content: right;
}
.justify-content-center{
    justify-content: center;
}
.justify-content-end {
    justify-content: end !important;
}
.justify-center{
    display: flex !important;
    justify-content: center !important;
    align-content: center !important;
}
.justify-space-around{
    display: flex !important;
    justify-content: space-around !important;
    align-content: center !important;
}
.justify-space-between{
    display: flex !important;
    justify-content: space-between !important;
    align-content: center !important;
}
.justify-space-evenly{
    display: flex !important;
    justify-content: space-evenly !important;
    align-content: center !important;
}
.align-flex-end{
    align-content: flex-end
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE ALIGN===================================================================CONFIGURAÇÕES DE ALIGN*/
.center-self{
    margin-top: auto;
    margin-bottom: auto;
    align-self: center;
}
.center-self-side{
    margin-left: auto;
    margin-right: auto;
}
.left-self{
    margin-right: auto;
    align-self: center;
}
.right-self{
    margin-left: auto;
    align-self: center;
}
.align-center{
    align-items: center;
    text-align: center;
}
.align-self{
    align-self: center;
}
.align-items-center{
    align-items: center;
}
.align-items-baseline{
    align-items: baseline;
}
.left-8{
    left: 8px;
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE FONTE===================================================================CONFIGURAÇÕES DE FONTE*/
.letter-spacing-0-14px{
    letter-spacing: 0.14px;
}
.font-italic{
    font-style: italic;
}
.font-small{
    font-size: small;
}
.font-medium{
    font-size: medium;
}
.font-large{
    font-size: large;
}
.font-11{
    font-size: 11px;
}
.font-12{
    font-size: 12px;
}
.font-13{
    font-size: 13px;
}
.font-14{
    font-size: 14px;
}
.font-15{
    font-size: 15px;
}
.font-16{
    font-size: 16px;
}
.font-17{
    font-size: 17px;
}
.font-18{
    font-size: 18px !important;
}
.font-19{
    font-size: 19px;
}
.font-20{
    font-size: 20px;
}
.font-21{
    font-size: 21px;
}
.font-22{
    font-size: 22px;
}
.font-33{
    font-size: 33px !important;
}
.font-24{
    font-size: 24px;
}
.font-30{
    font-size: 30px;
}
.font-bold-alt{ /*NAO USAR*/
    font-weight: bold;
}
.font-bold-mov{ /*NAO USAR*/
    font-weight: bold;
}
.font-bold{
    font-weight: bold;
}
.font-bold-100{
    font-weight: 100;
}
.font-bold-500{
    font-weight: 500;
}
.font-bold-700{
    font-weight: 700;
}
.font-italic{
    font-style: italic;
}
.font-family-eczar{
    font-family: 'Eczar', serif;
}
.font-family-dawning{
    font-family: 'Dawning of a New Day', cursive;
}
.font-on-primary{
    color: var(--color-on-primary);
}
.font-surface{
    color: var(--color-on-surface) !important;
}
.font-surface-dark{
    color: var(--color-on-surface-dark);
}
.font-primary{
    color: var(--color-primary) !important;
}
.font-green:not([disabled]){
    color: var(--color-green) !important;
}
.font-green[disabled]{
    color: var(--color-disabled) !important;
}
.font-disabled{
    color: var(--color-disabled) !important;
}
.font-red{
    color: var(--color-red) !important;
}
.font-red-dark{
    color: var(--color-red-dark) !important;
}
.font-orange{
    color: var(--color-orange);
}
.font-pink{
    color: var(--color-pink);
}
.font-pink-strong{
    color: var(--color-pink-strong);
}
.font-blue{
    color: var(--color-blue);
}
.font-yellow{
    color: var(--color-warning);
}
.font-yellow-stronger{
    color: var(--color-yellow-stronger);
}
.font-error{
    color:var(--color-error);
}
.font-black{
    color:var(--color-black);
}
.font-white{
    color: white;
}
.opacity-40{
    opacity: 0.4;
}
.opacity-30{
    opacity: 0.3;
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE SCROLL=================================================================CONFIGURAÇÕES DE SCROLL*/
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background: var(--color-scroll-back); 
}
::-webkit-scrollbar-thumb {
    background: var(--color-scroll-thumb); 
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-scroll-thumb-hover); 
}
body{
    scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-back);
    scrollbar-width: thin;
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE RADIO BUTTON=====================================================CONFIGURAÇÕES DE RADIO BUTTON*/
md-radio-button.md-checked .md-off{
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.md-on{
    background-color: var(--color-primary) !important;
}
.radio{
    display: flex;
    justify-content: space-around;
    flex-flow: row;
    flex-wrap: wrap;
    align-items: center;
}
md-radio-button{
    margin-right: 10px;
}
md-radio-button .md-off{
    border-color: var(--color-on-surface);
}
md-radio-button.md-checked.my-radio .md-on, md-radio-button.md-checked.my-radio .md-off{
    background-color: var(--color-primary) !important;
}
md-radio-group md-radio-button .md-label span{
    font-weight: normal;
    color: var(--color-on-surface);
}
md-radio-group.md-default-theme.md-focused:not(:empty) .md-checked .md-container:before, 
md-radio-group.md-focused:not(:empty) .md-checked .md-container:before {
  background-color: rgba(41, 131, 55, 0.26);
}
md-radio-group.md-default-theme .md-checked .md-ink-ripple, 
md-radio-group .md-checked .md-ink-ripple {
  color: rgba(41, 131, 55, 0.85);
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE MEDIA QUERY=======================================================CONFIGURAÇÕES DE MEDIA QUERY*/
@media screen and (min-width: 10px) {
    /*DESKTOP*/
    .main-content{
        flex-flow: row;
        justify-content: space-around;
        height: 100%;
        min-height: 580px;
    }
    #left-container{
        max-width: 300px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: space-between;
    }
    #right-container{
        max-width: calc(100% - 325px);
        width: 100%;
        height: 100%;
    }
    #right-container-func, #right-container-funcionario, #right-container-vinculoPJ{
        max-width: calc(100% - 320px);
        width: 100%;
        height: 100%;
    }
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE COR=======================================================================CONFIGURAÇÕES DE COR*/
#warning{
    fill: var(--color-warning) !important;
}
#error{
    fill: var(--color-error) !important;
}
#check, #integracaoFin, #integracaoCont{
    fill: var(--color-green) !important;
}
#pending{
    fill: var(--color-blue) !important;
}
#lock, #calendar, #details, #compare, #detalhesFunc, #comparaFunc{
    fill: var(--color-icon);
}
.bc-unselected{
    color: var(--color-on-surface);
}
.bc-unselected:hover{
    color: var(--color-on-surface-dark);
}
.fill-green{
    fill: var(--color-green);
}
.fill-red{
    fill: var(--color-red);
}
.fill-disabled{
    fill: var(--color-disabled);
}
.fill-error{
    fill: var(--color-red);
}
.fill-on-primary{
    fill: var(--color-on-primary) !important;
}
.fill-on-green{
    fill: var(--color-on-green) !important;
}
.fill-on-yellow{
    fill: var(--color-on-yellow) !important;
}
.fill-blue{
    fill: var(--color-blue);
}
.fill-warning{
    fill: var(--color-warning);
}
.fill-yellow-fire{
    fill: var(--color-yellow-fire);
}
.fill-yellow{
    fill: var(--color-yellow);
}
.fill-pink{
    fill: var(--color-pink-strong);
}
.fill-primary{
    fill: var(--color-primary);
}
.background-color-surface{
    background-color: var(--color-surface);
}
.background-color-red-dark{
    background-color: var(--color-red-dark);
}
.background-color-primary{
    background-color: var(--color-primary);
}
.background-color-orange{
    background-color: var(--color-orange);
}
.background-color-transparent-important{
    background-color: transparent !important;
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE MAT-CARD=============================================================CONFIGURAÇÕES DE MAT-CARD*/
.mat-card{
    background-color: var(--color-surface);
    display: flex;
    min-height: 50px;
    min-width: 300px;
    padding: 8px;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12);
    flex-wrap: wrap;
    flex-flow: column;
    align-content: space-around;
    width: 100%;
}
md-card-title{
    height: calc(100% - 56px);
}
md-card-title .md-headline{
    color: var(--color-on-surface-dark);
}
md-card-title .md-subhead{
    color: var(--color-on-surface) !important;
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE TABS=====================================================================CONFIGURAÇÕES DE TABS*/
.tab md-content {
    background-color: transparent !important;
}
md-tabs .md-tab.md-active{
    color: var(--color-primary) !important; 
}
.md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar{
    color: var(--color-primary) !important; 
    background: var(--color-primary) !important; 
}
.tab md-content h1:first-child {
    margin-top: 0; 
}
md-tab-content, md-content{
    overflow: unset;
}
md-tab-item:hover{
    background-color: var(--color-hover);
}
.bg-surface, md-tabs-wrapper{
    background-color: var(--color-surface) !important;
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE BOTÃO===================================================================CONFIGURAÇÕES DE BOTÃO*/
.primary-button{
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
    border-radius: 8px !important;
}
.primary-button:hover:not([disabled]), .primary-button.md-focused:not([disabled]){
    background-color: var(--color-primary-dark) !important;
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),
                0 8px 10px 1px rgba(0,0,0,.14),
                0 3px 14px 2px rgba(0,0,0,.12);
}
.primary-button[disabled], .error-button[disabled], .green-button[disabled], .confirm-button[disabled], .error-button[disabled], .yellow-button[disabled]{
    color: var(--color-on-surface) !important;
    background-color: var(--color-hover) !important;
}
.yellow-button{
    background-color: var(--color-yellow) !important;
    color: var(--color-on-yellow) !important;
    border-radius: 8px !important;
}
.yellow-button:hover:not([disabled]), .yellow-button.md-focused:not([disabled]){
    background-color: var(--color-yellow-stronger) !important;
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),
                0 8px 10px 1px rgba(0,0,0,.14),
                0 3px 14px 2px rgba(0,0,0,.12);
}
.green-button{
    background-color: var(--color-green) !important;
    color: var(--color-background) !important;
    border-radius: 8px !important;
}
.green-button:hover:not([disabled]), .green-button.md-focused:not([disabled]){
    background-color: var(--color-green-dark) !important;
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),
                0 8px 10px 1px rgba(0,0,0,.14),
                0 3px 14px 2px rgba(0,0,0,.12);
}
.confirm-button:not([disabled]){
    background-color: var(--color-green) !important;
    color: var(--color-on-primary) !important;
    border-radius: 8px !important;
}
.error-button:not([disabled]){
    background-color: var(--color-red-button) !important;
    color: var(--color-on-primary) !important;
    border-radius: 8px !important;
}

.error-button:hover:not([disabled]), .error-button.md-focused:not([disabled]){
    background-color: var(--color-red-dark) !important;
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),
                0 8px 10px 1px rgba(0,0,0,.14),
                0 3px 14px 2px rgba(0,0,0,.12);
}
.md-ripple.md-ripple-placed.md-ripple-scaled.md-ripple-active, .md-radio-group.md-checked.md-ink-ripple{
    color: var(--color-primary) !important;
    background-color: var(--color-primary-light) !important;
    border-color: var(--color-primary) !important;
}
.md-button:not(.margin-left-auto):not(.keep-margins){
    margin: 0 !important;
}
.md-button{
    border-radius: 7px;
}
.smaller-size-icon > svg {
    width: 20px;
    height: 20px;
}
.md-icon-button > .smaller-size-md-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}
#confirmIntegracaoId{
    color: var(--color-green);
}
#confirmIntegracaoId[disabled]{
    color: var(--color-on-surface);
}
.button-adjust-36{
    height: 36px;
    min-height: 36px;
    width: 36px;
    min-width: 36px;
    padding: 0;
}
.guia-button{
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
}
.guia-button:hover:not([disabled]), .guia-button.md-focused:not([disabled]){
    background-color: var(--color-primary-dark) !important;
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),
                0 8px 10px 1px rgba(0,0,0,.14),
                0 3px 14px 2px rgba(0,0,0,.12);
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE TOOLTIP===============================================================CONFIGURAÇÕES DE TOOLTIP*/
.md-tooltip {
    font-size: 14px !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 10px 6px 10px !important;
    background-color: var(--color-tooltip) !important;
    color: var(--color-on-tooltip) !important;
    opacity: .95 !important;
}
.my-tooltip-parent {
    position: relative;
    z-index: 1;
  }
.max-width{
    max-width: 200px;
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES ITEM LISTA===============================================================CONFIGURAÇÕES ITEM LISTA*/
.listItem .col{
    display: flex !important;
    flex-flow: row !important;
}
.listItem .dataEvento{
    margin-right: 50px;
}
.listItem .mat-icon{
    margin-left: 5px;
    margin-right: 15px;
}
.listItem.md-clickable:hover{
    background-color: var(--color-hover);
    transition: all ease-in-out var(--animation-time);
    -webkit-transition: all ease-in-out var(--animation-time);
    -moz-transition: all ease-in-out var(--animation-time); 
}
md-list-item:nth-child(odd){
    background: var(--color-surface-light);
}
.highlight-list-item{
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
}
.highlight-list-item:hover{
    border-bottom: 1px solid var(--color-primary);
    border-top: 1px solid var(--color-primary);
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE GR�?FICO===============================================================CONFIGURAÇÕES DE GR�?FICO*/
.chart{
    width: 100%;
    height: 100%;
}

/*BOTAO ALTERNA GRAFICO/CARD*/
.adjust-button-graph-card{
    margin-bottom: auto; 
    position: absolute; 
    right: 0;
    top: 0;
}
.content-calctot, .content-calctotcalc{
    padding: 18px 8px;
}
.add-position-relative{
    position: relative;
}
.position-relative{
    position: relative;
}
.position-absolute{
    position: absolute;
}
/*TOOLTIP=========================================================================TOOLTIP*/
.chart-tooltip{
    padding: 5px !important; 
    width: fit-content !important;
    height: fit-content !important;
    text-align:left !important;
    color: var(--color-on-surface-dark);
}
/*===============================================================================================================*/

/*CONFIGURACAO DIVS CARD TOTAL=======================================================CONFIGURACAO DIVS CARD TOTAL*/
.card-total-label{
    display: flex; 
    flex-direction: column; 
    height:30%; 
    justify-content: center; 
    align-items: center;
}
.card-total-content{
    display: flex; 
    flex-direction: column; 
    min-height: 60px;
    justify-content: center; 
    align-items: center;
}
.card-folha-content{
    display: flex; 
    flex-direction: column; 
    min-height: 40px;
    justify-content: center; 
    align-items: center;
}
.card-folha-label{
    display: flex; 
    flex-direction: column; 
    height:20%; 
    justify-content: center; 
    align-items: center;
}
.card-total-provisao-label{
    display: flex; 
    flex-direction: column; 
    height:30%; 
    justify-content: center; 
    align-items: center;
}
.card-total-provisao-content{
    display: flex; 
    flex-direction: column; 
    min-height: 60px;
    justify-content: center; 
    align-items: center;
}
.card-total-content-integracao{
    display: flex; 
    flex-direction: column; 
    min-height: 20px;
    justify-content: center; 
    align-items: center;
}
.fonte-total-label{
    font-size: 16px; 
    text-align: center;
    color: var(--color-on-surface);
}
.fonte-total-provisao-label{
    font-size: 18px; 
    text-align: center;
    color: var(--color-on-surface);
}
.fonte-total{
    color: var(--color-on-surface-dark);
}
.fonte-total-red, .fonte-total-green, .fonte-total{
    font-size: 22px; 
    text-align: center; 
    font-weight: 700;
}
.fonte-total-provisao{
    font-size: 26px; 
    text-align: center; 
    font-weight: 700;
}
.fonte-total-red{
    color:var(--color-error);
}
.fonte-total-green{
    color: var(--color-green);
}
.text-align-center{
    text-align: center;
}
.text-align-end{
    text-align: end;
}
.text-align-left{
    text-align: left;
}
.text-align-right{
    text-align: right;
}
.text-align-justify{
    text-align: justify;
}
.text-decoration-underline{
    text-decoration: underline;
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DE IMAGENS DE FUNCION�?RIO NO MODO LISTA=====CONFIGURAÇÕES DE IMAGENS DE FUNCION�?RIO NO MODO LISTA*/
.pic-func{
    width: 82%;
    height: 82%;
    float: right;
    border-radius: 100%;
}
.no-pic-func{
    width: 100%;
    height: 100%;
    float: right;
}
.no-pic-func-sugestao-ferias{
    object-fit: cover;
    width: 48px;
    height: 51px;
    float: right;
    margin-top: -3px;
    margin-left: -3px;
}
.no-pic-func-sugestao-ferias-icon, .no-pic-func-sugestao-rescisao-icon{
    width: 12%;
    height: 12%;
    float: right;
    margin: 0px;
}
.no-pic-func-notification{
    width: 15%;
    height: 15%;
    float: right;
    margin: 0px;
}
.no-pic-func.pic-small{
    width: 58px;
}
.no-pic-func.pic-large{
    width: 116px;
    height: 116px;
    margin: -8px 0 0 -8px;
}
.no-pic-func.with-background{
    width: 116px;
    height: 116px;
    margin: -7px -8px -8px -5px;
}
img#foto-small{
    object-fit: cover;
    border-radius: 50%;
    margin: 6px;
    height: 48px;
    width: 48px;
}
img#foto-large{
    object-fit: cover;
    border-radius: 50%;
    height: 98px;
    width: 98px;
}
img#foto-func-sugerido{
    object-fit: cover;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    float: right;
}
.foto-func-sugerido{
    object-fit: cover;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    float: right;
}
/*===============================================================================================================*/

/*CONFIGURACOES DE LISTA EM PAINEL EXPANSIVO===========================CONFIGURACOES DE LISTA EM PAINEL EXPANSIVO*/
.list-label-cod, .list-label-descr, .list-label-ind, .list-label-ind-reduced, .list-label-descr-trct-reduced, 
.list-label-seq, .list-label-value, .list-label-dat, .list-label-descr-reduced,
.list-label-value-reduced, .list-label-descr-expanded, .list-label-9-4px, .list-label-18, .list-label-15, .list-label-55{
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
}
.list-label-ind-reduced, .list-label-seq, .list-label-cod, .list-label-value-reduced{
    width: 10%;
}
.list-label-15{
    width: 15%;
}
.list-label-18{
    width: 100px;
}
.list-label-55{
    width: 55%;
}
.list-label-9-4px{
    /* width: calc(9% - 4px); */
    width: 85px;
    min-width: fit-content;
}
.list-label-ind, .list-label-value, .list-label-dat{
    width: 20%;
}
.list-label-descr-reduced{
    width: 30%;
}
.list-label-descr-trct-reduced{
    width: 35%;
}
.list-label-descr{
    width: 40%;
}
.list-label-descr-expanded{
    width: 60%;
}
.list-label-value.right, .list-label-dat.right, .list-label-ind.right{
    text-align: right;
}
/* .list-label-cod{
    padding-left: 8px;
} */
/*===============================================================================================================*/

/*CONFIGURACOES DE LISTA DE AVISOS===============================================CONFIGURACOES DE LISTA DE AVISOS*/
.aviso-list-problem, .aviso-list-data, .advertencia-list-problem, .advertencia-list-data{
    margin: auto 0;
    display: flex;
}
.aviso-list-problem, .advertencia-list-problem{
    width: 65%;
}
.aviso-list-problem-extended, .advertencia-list-problem-extended{
    width: 85%;
}
.aviso-list-data, .advertencia-list-data{
    width: auto;
    margin-left: auto;
}
.aviso-grid, .advertencia-grid{
    display: grid;
    grid-template-columns: 40% 59%;
    row-gap: 10px;
    column-gap: 10px;
    padding: 10px 0 0 0;
    margin: 0;
}
.aviso-card-small, .advertencia-card-small{
    grid-column-end: span 1;
    grid-row-end: span 1;
    grid-column-start: 1;
    min-width: 0;
    border-radius: 5px;
}
.aviso-card-large, .advertencia-card-large{
    grid-column-end: span 1;
    grid-row-end: span 1;
    grid-row-start: 1;
    grid-column-start: 2;
    min-width: 0;
    border-radius: 5px;
}
.aviso-span{
    display: flex;
    flex-flow: column;
    font-size: 14px;
}
.aviso-text{
    margin-bottom: 10px;
    font-size: 14px
}
.aviso-text-center{
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    font-size: 14px
}
.status-circle-avisos, .status-circle-advertencias, .status-circle-dismiss{
    border-radius: 50%;
    width: 24px;
    height: 24px;
    position: absolute;
    display: flex;
    z-index: 20;
    top: -12px;
}
.status-circle-avisos{
    background-color: var(--color-warning);
    color: var(--color-font-on-warning);
}
.status-circle-advertencias{
    background-color: var(--color-error);
    color: var(--color-surface);
}
.status-circle-dismiss{
    background-color: var(--color-hover);
    color: var(--color-on-surface-dark);
}
.status-circle-avisos.avisos-gerenciador, .status-circle-dismiss.avisos-gerenciador{
    left: 518px;
}
.status-circle-avisos.avisos-calculo, .status-circle-dismiss.avisos-calculo{
    left: 341px;
}
.status-circle-advertencias.advertencias-gerenciador{
    left: 420px;
}
.status-circle-advertencias.advertencias-calculo{
    left: 440px;
}
.status-circle-avisos span, .status-circle-advertencias span, .status-circle-dismiss span{
    margin: auto;
    font-weight: bold;
    font-size: 13px;
}
.aviso-func-line, .advertencia-func-line{
    width: 20%;
    max-width: 20%;
    display: inline-flex;
    margin-left: 8px;
}
.aviso-cod-line, .advertencia-cod-line{
    width: 5%;
    max-width: 5%;
    display: inline-flex;
    margin-left: 8px;
}
.aviso-func-text, .advertencia-func-text{
    width: 90%;
    max-width: 90%;
}
/*===============================================================================================================*/

/*CONFIGURACOES DE POPUP===================================================================CONFIGURACOES DE POPUP*/
md-dialog.md-default-theme, md-dialog{
    background-color: var(--color-surface);
    color: var(--color-on-surface-dark);
}
md-dialog#funcSemDialog{
    height: 80%;
    min-height: 501px;
    background-color: var(--color-surface);
}
.md-dialog-container .md-cancel-button:not([disabled]) span{
    color: var(--color-error);
}
.md-dialog-container .md-confirm-button:not([disabled]) span{
    color: var(--color-green) !important;
}
.md-dialog-container .md-cancel-button{
    color: var(--color-error) !important;
}

/*POPUP FECHAMENTO===============================================================================POPUP FECHAMENTO*/
.form-popup-fechamento{
    width: 1000px;
    height: 566px;
    min-height: 566px;
}
.form-popup-dependenteProcessoTrab{
    width: 440px;
}
.form-popup-importdependenteProcessoTrab{
    width: 1000px;
    height: 566px;
    min-height: 566px;
}
.fechamento-card-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, 280px);
    grid-template-rows: repeat(auto-fill, 170px);
    column-gap: 20px;
    row-gap: 10px;
    justify-content: center;
    align-content: flex-start;
    padding: 10px 0;
}
.card-fechamento{
    width: 280px;
    height: 160px;
    background-color: var(--color-surface);
}
#eventoCard, #eventoCardDp{
    background-color: var(--color-background);
}
md-dialog#fechamentoFolhaPopup, md-dialog#reaberturaFolhaPopup {
    background-color: var(--color-surface);
}

.ajusta-grid-cards-func{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));;
    grid-template-rows: repeat(auto-fill, 70px);
    grid-gap: 6px 20px;
    overflow-x: auto;
    overflow-y: hidden;
    height: fit-content;
}

.ajusta-itens-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    grid-template-rows: repeat(auto-fill, 55px);
    grid-gap: 15px 20px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0;
}
    
.ajusta-cards-func-all-rounded{
    padding: 5px;
    height: 55px;
    width: 270px;
    background-color: var(--color-surface);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
    border-radius: 50px 50px 50px 50px;
    transition: all ease-in-out var(--animation-time-short);
    -webkit-transition: all ease-in-out var(--animation-time-short);
    -moz-transition: all ease-in-out var(--animation-time-short);
}

.ajusta-cards-func-all-rounded:hover:not(.no-hover){
    -ms-transform: scale(1.02 , 1.02); /* IE 9 */
    -webkit-transform: scale(1.02 , 1.02); /* Safari */
    transform: scale(1.02 , 1.02);
    background-color: var(--color-hover);
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),
                0 8px 10px 1px rgba(0,0,0,.14),
                0 3px 14px 2px rgba(0,0,0,.12);
}
/*===============================================================================================================*/
/*REABERTURA=====================================================================================================*/
#reaberturaFolhaButton{
    bottom: 111px !important;
}
/*=====================================================================================================REABERTURA*/

/*CONFIGURACOES DE MENU=====================================================================CONFIGURACOES DE MENU*/
.md-open-menu-container{
    border-radius: 10px;
}
.md-open-menu-container md-menu-content{
    background-color: var(--color-surface);
}
.md-open-menu-container md-menu-item span{
    color: var(--color-on-surface-dark);
}
md-menu-content{
    padding: 0 !important;
}
md-menu-content > md-menu-item{
    min-height: unset;
    height: auto !important;
}
md-menu-content .md-menu>.md-button:after{
    color: var(--color-icon);
}
md-menu-item > md-button{
    min-height: unset;
    height: 30px;
}
md-menu-bar{
    padding: 0;
}
md-menu-bar md-menu.md-open>button{
    background: var(--color-hover);
}
md-menu-bar md-menu>button:focus{
    background: var(--color-hover);
}
.md-select-menu-container md-content{
    background-color: var(--color-surface) !important;
}
md-select-menu md-content md-option{
    background-color: var(--color-surface) !important;
    color: var(--color-on-surface-dark);
}
md-select-menu md-content md-option:not([disabled]):hover{
    background: var(--color-hover) !important;
}
md-select-menu md-content md-option:focus{
    background-color: var(--color-surface-dark) !important;
}
/*===============================================================================================================*/

/*CONFIGURACOES DE STEP=====================================================================CONFIGURACOES DE STEP*/
.button-primary{
    color: var(--color-primary);
}
.step-footer{
    width: 95%;
    height: auto;
    display: flex;
    margin-bottom: 4.75px;
    margin-top: auto;
}
.step-footer-content{
    width: 40%;
    height: fit-content;
    margin: auto; 
}
/*===============================================================================================================*/

/*CONFIGURACOES DE AUTOFILL=============================================================CONFIGURACOES DE AUTOFILL*/
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill,
input:-webkit-autofill:focus, textarea:-webkit-autofill:focus, select:-webkit-autofill:focus
input:-webkit-autofill:hover, textarea:-webkit-autofill:hover, select:-webkit-autofill:hover {
    background-color: var(--color-surface);
    box-shadow: 0 0 0 30px var(--color-surface) inset;
    -webkit-box-shadow: 0 0 0 30px var(--color-surface) inset;
    -webkit-text-fill-color: var(--color-on-surface-dark);
}
/*===============================================================================================================*/

/*CONFIGURAÇÕES DOS CARDS=================================================================CONFIGURAÇÕES DOS CARDS*/
.add-opacity{
    opacity: 0.65;
}
.card-item.card-calc{
    width: 275px;
    height: 170px;
}
.card-item.card-list-calc{
    width: 300px;
    height: 210px;
}

.card-item{
    border-radius: 10px;
}
.card-item .md-ripple-container {
    border-radius: 10px;
}

.func-card-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, 400px);
    row-gap: 16px;
    column-gap: 15px;
    justify-content: center;
    align-content: flex-start;
    padding-top: 13px;
    padding-bottom: 13px;
}
.audit-card-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, 400px);
    row-gap: 20px;
    column-gap: 10px;
    justify-content: center;
    align-content: flex-start;
    padding: 10px 0;
}

.func-card-details-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, 25%);
    padding: 14px;
    padding-top: 0;
}
.pessoas-card-details-grid{
    display: grid;
    grid-template-columns: 30% 40% 30%;
    padding: 13px;
    padding-top: 0;
}
.folha-unselectable{
    opacity: 0.6;
    pointer-events: none;
}
.eventos-cards-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, 220px);
    /* grid-template-rows: repeat(auto-fit, 130px); */
    row-gap: 16px;
    column-gap: 15px;
    justify-content: center;
    align-content: flex-start;
    padding-top: 13px;
    padding-bottom: 13px;
}
.eventos-cards-grid-edicao{
    flex-flow: row wrap;
    align-content: space-between;
    justify-content: left;
}
.evento-card{
    min-width: 220px;
    min-height: 130px;
    background-color: var(--color-surface);
    display: flex !important;
    justify-content: center !important;
    align-content: center !important;
    border-radius: 10px;
    transition: all ease-in-out var(--animation-time);
    -webkit-transition: all ease-in-out var(--animation-time);
    -moz-transition: all ease-in-out var(--animation-time); 
    margin: 0;
}

.evento-card-edicao{
    min-height: 130px;
    min-width: 215px;
    background-color: var(--color-surface);
    display: flex !important;
    justify-content: center !important;
    align-content: center !important;
    border-radius: 10px;
    transition: all ease-in-out var(--animation-time);
    -webkit-transition: all ease-in-out var(--animation-time);
    -moz-transition: all ease-in-out var(--animation-time); 
}

.animation.ng-enter {
    transition: var(--animation-time-long) ease-in-out all;
    opacity:0;
}
.animation.ng-enter.ng-enter-active {
    opacity:1;
}
.animation.ng-leave {
    transition: var(--animation-time-long) ease-in-out all;
    opacity:1;
}
.animation.ng-leave.ng-leave-active {
    opacity:0;
}
.animation-short.ng-enter {
    transition: var(--animation-time) ease-in-out all;
    opacity:0;
}
.animation-short.ng-enter.ng-enter-active {
    opacity:1;
}
.animation-short.ng-leave {
    transition: var(--animation-time) ease-in-out all;
    opacity:1;
}
.animation-short.ng-leave.ng-leave-active {
    opacity:0;
}

@keyframes slideInFromTop {
    0% {
      transform: translateY(-100%);
    }
    80% {
        transform: translateY(10%);
    }
    100% {
      transform: translateY(0);
    }
    
}

@keyframes kf_SlideFromRightToLeft {
    from {
        transform: translateX(100px);
    }
    
    to {
        transform: translateX(0);
    }
}

.slideFromRightToLeft{
    animation: kf_SlideFromRightToLeft 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 500ms both ;
}  

.animation-picture{
    animation: 1s ease-in-out 0s 1 slideInFromTop;
}
.card-mov{
    width: 275px;
    height:175px;
}
.no-value-list-item{
    height: 0;
    width: 50%;
    margin: auto auto;
    border-bottom: 1px solid;
    max-width: 50px;
}
.card-item.card-func{
    width: 390px;
    height: 240px;
    position: relative;
}
.card-item.card-func-gerenciador-folha{ /*06/02/20 - Laura: adicionei essa função para alterar a altura do card apenas na tela gerenciador de folhas*/
    width: 390px;
    height: 278px;
    position: relative;
}
.card-item.card-func.func-popup{
    height: 200px;
}
.card-item.card-func-from-mov{
    width: 390px;
    height: 237px;
}
.card-item.card-func.card-func-sugest{
    width: 390px;
    height: 200px;
}
.card-item, .card-mov{ 
    min-width: 200px;
    min-height: 130px;
    background-color: var(--color-surface);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),
                0 1px 1px 0 rgba(0,0,0,.14),
                0 2px 1px -1px rgba(0,0,0,.12);
    transition: all ease-in-out var(--animation-time-short);
    -webkit-transition: all ease-in-out var(--animation-time-short);
    -moz-transition: all ease-in-out var(--animation-time-short);
}
.card-item:hover:not(.no-hover), .evento-card:hover:not(.no-hover){
    -ms-transform: scale(1.02 , 1.02); /* IE 9 */
    -webkit-transform: scale(1.02 , 1.02); /* Safari */
    transform: scale(1.02 , 1.02);
    background-color: var(--color-hover);
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),
                0 8px 10px 1px rgba(0,0,0,.14),
                0 3px 14px 2px rgba(0,0,0,.12);
}
.card-item:hover .func-status-circle:not(.no-hover), .evento-card:hover:not(.no-hover) {
    background-color: var(--color-hover);
}
.cargo-text{
    max-width: 268px;
}
.func-status-circle{
    height: 30px;
    width: 30px;
    position: absolute;
    border-radius: 50%;
    background-color: var(--color-surface);
    top: -10px;
    right: -10px;
    display: flex;
    transition: all ease-in-out var(--animation-time-short);
    -webkit-transition: all ease-in-out var(--animation-time-short);
    -moz-transition: all ease-in-out var(--animation-time-short);
}

.background-color-blue{
    background-color: var(--color-blue);
    color: var(--color-background);
}
.background-color-warning{
    background-color: var(--color-warning) !important;
    color: var(--color-font-on-warning);
}
.func-indicator{
    height: 30px;
    width: 60px;
    position: absolute;
    top: -11px;
    right: -22px;
}
.func-circle-indicator{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    
    transition: all ease-in-out var(--animation-time-short);
    -webkit-transition: all ease-in-out var(--animation-time-short);
    -moz-transition: all ease-in-out var(--animation-time-short);
}
.func-circle-indicator-icon{
    width: 21px;
    height: 21px;
    display: flex;
    position: absolute;
    right: -3px;
    bottom: 16px;
    border-radius: 50%
}

.func-circle-indicator-icon-bigger{
    width: 25px;
    height: 25px;
    display: flex;
    position: absolute;
    right: 3px;
    bottom: 50px;
    border-radius: 50%;
}

.seta-voltar{
    height: 30px;
    width: 30px;
    position: absolute;
    top: 3px;
    left: 3px;
}
.seta-voltar-calculo{
    height: 30px;
    width: 30px;
    position: absolute;
    top: 3px;
    right: 15px;
}

.card-func md-card-title-text, .card-func-from-mov md-card-title-text{
    margin-left: 10px;
}
.func-status-circle md-icon{
    width: 30px;
    height: 30px;
}
.func-status-circle .circle-fechada{
    background-color: var(--color-icon);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    margin: auto;
    display: flex;
}

.func-status-circle .circle-fechada md-icon{
    width: 20px;
    height: 20px;
    fill: var(--color-surface);
    min-width: 0;
    min-height: 0;
    margin: auto;
}

/*STATUS SUGESTAO FERIAS INDIVIDUAL*/
.func-status-mensal-circle{
    height: 30px;
    width: 30px;
    position: absolute;
    border-radius: 50%;
    background-color: var(--color-surface);
    top: -52px;
    right: -10px;
    display: flex;
    transition: all ease-in-out var(--animation-time-short);
    -webkit-transition: all ease-in-out var(--animation-time-short);
    -moz-transition: all ease-in-out var(--animation-time-short);
}

.sugestoes-grid-1{
    grid-column-end: span 1;
    grid-row-end: span 2;
    border-bottom: unset;
    border-right: unset !important;
}

.sugestoes-grid-2{
    grid-column-end: span 2;
    grid-row-end: span 1;
    border-bottom: unset;
    border-right: unset !important;
}

.sugestoes-grid-3{
    grid-column-end: span 2;
    grid-row-end: span 2;
    border-bottom: unset;
    border-right: unset !important;
}

.add-grid-column-end-span-1{
    grid-column-end: span 1;
}
.unset-grid-template-rows-100{
    grid-template-rows: unset;
}
.ajusta-grid-lider{
    display: grid;
    height: 100%;
    width: 300px;
    grid-template-columns: 100%;
    grid-template-rows: 300px calc(100% - 310px);
    row-gap: 10px;
}
.ajusta-grid-cards-notificacao{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));;
    
    grid-gap: 11px 20px;
    overflow-x: auto;
    overflow-y: hidden;
    
}
.ajusta-cards-notificacao-all-rounded{
    padding: 5px;
    height: 60px;
    width: 310px;
    background-color: var(--color-surface);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
    border-radius: 50px 50px 50px 50px;
    transition: all ease-in-out var(--animation-time-short);
    -webkit-transition: all ease-in-out var(--animation-time-short);
    -moz-transition: all ease-in-out var(--animation-time-short);
}
.ajusta-cards-notificacao-all-rounded:hover:not(.no-hover){
    -ms-transform: scale(1.02 , 1.02); /* IE 9 */
    -webkit-transform: scale(1.02 , 1.02); /* Safari */
    transform: scale(1.02 , 1.02);
    background-color: var(--color-hover);
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),
                0 8px 10px 1px rgba(0,0,0,.14),
                0 3px 14px 2px rgba(0,0,0,.12);
}
.ajusta-cards-notificacao-all-rounded:hover{
    background-color: var(--color-hover);
}



/*===============================================================================================================*/
/*CONFIGURACOES DE POPUP DE FUNCIONARIO SEMELHANTE===============CONFIGURACOES DE POPUP DE FUNCIONARIO SEMELHANTE*/
md-dialog-content.func-popup{
    overflow: hidden;
    background-color: var(--color-surface);
}
.cnt-blk md-list{
    min-height: 460px;
    height: 100%;
}
.cnt-blk#funcionarioSemCard{
    background-color: var(--color-background);
}
/*===============================================================================================================*/

/*CONFIGURACOES DA CHECKBOX=============================================================CONFIGURACOES DA CHECKBOX*/
md-checkbox.epaco-nav-check.md-indeterminate:not(.md-checked) .md-icon{
    border-color: var(--color-primary);
}
md-checkbox.epaco-nav-check.md-indeterminate .md-container{
    background-color: var(--color-primary);
    border-radius: 2px;
}
md-checkbox.md-checked .md-ink-ripple{
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}    
md-checkbox.md-checked .md-icon{
    background-color:var(--color-primary);
}
md-checkbox.md-checked.md-focused .md-container::before{
    background-color:  var(--color-hover);
}

md-checkbox:not(.md-checked) .md-icon{
    border-color: var(--color-icon);
}
md-checkbox.md-indeterminate .md-icon:after{
    border-color: var(--color-on-primary);
}
md-checkbox[disabled] .md-icon{
    border-color: var(--color-disabled) !important;
}
/*CONFIGURACOES DA SWITCH================================================================CONFIGURACOES DA SWITCH*/
md-switch .md-thumb {
    color: var(--color-primary); /* not selected switch color */
}

md-switch.md-checked .md-thumb {
    background-color: var(--color-primary); /* selected switch color */
}
md-switch.md-checked .md-bar {
    background-color: var(--color-on-primary-lighter); /* set selected bar color */
}
md-switch .md-ink-ripple { 
    color: var(--color-on-primary-lighter); /* not selected switch ripple color */
} 
md-switch.md-checked .md-ink-ripple { 
    color: var(--color-on-primary-lighter); /* selected switch ripple color */ 
}
/*CONFIGURACOES DA SWITCH================================================================CONFIGURACOES DA SWITCH*/
/*===============================================================================================================*/
.testeComponentes{
    display: block;
    height: fit-content;
    width: 100%;
    
    -webkit-column-count: 2;        /* Chrome, Safari, Opera */
    -moz-column-count: 2;           /* Firefox */
    column-count: 2;

    -webkit-column-width: 400px;    /* Chrome, Safari, Opera */
    -moz-column-width: 400px;       /* Firefox */
    column-width: 400px;
}
.field-height{
    width: 95% !important;
    padding-right: 4px;
    padding-left: 4px;
    height: fit-content;
    height: -moz-fit-content;
    margin-left: auto !important;
    margin-right: auto !important;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    overflow: -webkit-paged-x;
}
.testeQuebra{
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    overflow: -webkit-paged-x;
}
.avoid-break-after {
    break-after: avoid;
}
.flex-flow-wrap{
    flex-flow: wrap;
}
.flex-wrap{
    flex-wrap: wrap;
}
.total-card{
    min-width: 180px;
    min-height: 110px;
    background-color: var(--color-surface);
    display: flex !important;
    justify-content: center !important;
    align-content: center !important;
    border-radius: 10px;
    transition: all ease-in-out var(--animation-time);
    -webkit-transition: all ease-in-out var(--animation-time);
    -moz-transition: all ease-in-out var(--animation-time); 
}
.total-card-provisao{
    min-width: 210px;
    min-height: 140px;
    background-color: var(--color-surface);
    display: flex !important;
    justify-content: center !important;
    align-content: center !important;
    border-radius: 10px;
}
.total-card-integracao{
    min-width: 100px;
    min-height: 80px;
    background-color: var(--color-surface);
    display: flex !important;
    justify-content: center !important;
    align-content: center !important;
    border-radius: 10px;
}
.highlight-card-hover {
    transition: all ease-in-out var(--animation-time);
    -webkit-transition: all ease-in-out var(--animation-time);
    -moz-transition: all ease-in-out var(--animation-time); 
}
.highlight-card-hover:hover {
    cursor: pointer;
    -ms-transform: scale(1.02 , 1.02); /* IE 9 */
    -webkit-transform: scale(1.02 , 1.02); /* Safari */
    transform: scale(1.02 , 1.02);
    background-color: var(--color-hover);
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),
                0 8px 10px 1px rgba(0,0,0,.14),
                0 3px 14px 2px rgba(0,0,0,.12);
}
.func-card-hover:hover{
    -ms-transform: scale(1.02 , 1.02); /* IE 9 */
    -webkit-transform: scale(1.02 , 1.02); /* Safari */
    transform: scale(1.02 , 1.02);
    background-color: var(--color-hover);
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),
                0 8px 10px 1px rgba(0,0,0,.14),
                0 3px 14px 2px rgba(0,0,0,.12);
    transition: all ease-in-out var(--animation-time);
    -webkit-transition: all ease-in-out var(--animation-time);
    -moz-transition: all ease-in-out var(--animation-time); 
}
.func-estourado-card-hover:hover{
    -ms-transform: scale(1.02 , 1.02); /* IE 9 */
    -webkit-transform: scale(1.02 , 1.02); /* Safari */
    transform: scale(1.02 , 1.02);
    background-color: var(--color-hover-red);
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),
                0 8px 10px 1px rgba(0,0,0,.14),
                0 3px 14px 2px rgba(0,0,0,.12);
}
/*FIX DE RESOLUCAO SVG PARA FIREFOX*/
svg {
    transform: translateZ(0);
}
.no-result-warning{
    display: grid;
    place-items: center;
    font-size: 18px;
    color: var(--color-on-surface-dark);
}
.no-result-warning-2{
    display: flex;
    margin: auto auto !important;
    height: fit-content;
    width: fit-content;
    font-size: 18px;
    color: var(--color-on-surface-dark);
}
.no-result-warning-3{
    display: flex;
    margin: auto auto;
    height: fit-content;
    width: fit-content;
    font-size: 18px;
    color: var(--color-on-surface-dark);
}
.no-result-warning-with-icon{
    display: flex;
    height: fit-content;
    width: fit-content;
    font-size: 18px;
    color: var(--color-on-surface-dark);
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
}

svg > g > g:last-child { pointer-events: none }

.item-hover:hover{
    background-color: var(--color-hover);
    transition: all ease-in-out var(--animation-time);
    -webkit-transition: all ease-in-out var(--animation-time);
    -moz-transition: all ease-in-out var(--animation-time);    
}

md-toast.md-center {
    left: 50%;
    transform: translate3d(-50%, 0, 0);
}

.md-toast-content{
    background-color: var(--color-on-background) !important;
    color: var(--color-background) !important;
}

.md-toast-content .md-toast-text{
    text-align: center;
}

md-toast .md-toast-content .md-button.md-highlight{
    color: var(--color-primary) !important;
}

.color-primary{
    color: var(--color-primary) !important;
}

/* MUDANÇA DE COR CHECK  COMBO BOX MAT MULTIPLE*/

.md-checkbox-enabled.md-default-theme[selected] .md-icon, .md-checkbox-enabled[selected] .md-icon {
    background-color: var(--color-primary);
}

.highlight{
    color: var(--color-primary);
    font-weight: bold;
}
.color-yellow{
    color: var(--color-yellow);
    font-weight: bold;
}

md-tooltip .highlight{
    color: var(--color-on-tooltip-highlight);
    font-weight: bold;
}

/*BOTAO ADD =========================================*/
.buttonAdd{
    display: flex;
    z-index: 20;
    position: fixed;
    bottom: 60px;
    right: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}
.buttonAdd:not([disabled]){
    background-color: var(--color-primary);
}
.buttonAdd:not([disabled]):hover{
    background-color: var(--color-primary-dark);
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12);
}
.buttonAdd[disabled]{
    background-color: var(--color-disabled);
    pointer-events: none;
}
.buttonAdd button md-icon{
    fill: var(--color-on-primary) !important;
}

.custom-icon-size{
    height: 24px !important;
    width: 24px !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.custom-icon-size-20{
    height: 20px !important;
    width: 20px !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.custom-icon-size-30{
    height: 30px !important;
    width: 30px !important;
    padding: 0 !important;
    min-height: 0 !important;
}

md-dialog md-dialog-content .md-dialog-content-body{
    font-size: 16px;
}
.background-color-pink{
    background-color: var(--color-pink-strong) !important;
}
.no-background-color{
    background-color: unset;
}
.no-border-radius{
   border-radius: unset !important;
}
.no-box-shadow{
    box-shadow: unset;
}
.light-border-right{
    border-right: 1px solid var(--color-border);
}

.border-right-dotted-on-surface{
    border-right: 2px dotted var(--color-on-surface-dark)
}

.progress-circle-calc svg path { 
    stroke: var(--color-primary); 
}

.progress-calc-icon{
    width: 100px;
    height: 100px;
}
/*ICON ====================================================*/
.icon-adjust{
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 10px;
    margin-left: 0;
}
.icon-adjust-30{
    width: 30px; 
    height: 30px;
    min-height: 30px;
    min-width: 30px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 10px;
    margin-left: 0;
}
.seta-icon-disabled{
    filter: grayscale(100%) brightness(120%);
    opacity: 0.5;
}
.seta-icon-greyscale{
    filter: grayscale(100%);
    opacity: 0.5;
}
.grayscale{
    filter: grayscale(100%);
}
.icon-size-35{
    height: 35px;
    width: 35px;
}

/*CONFIGURACOES DE LAYOUT===================================*/
#histLeft{
    min-width: 20%;
}
#histRight{
    max-width: calc(100% - 318px);
    width: 100%;
    height: 100%;
    position: relative;
}
#histRightFunc{
    max-width: calc(100% - 309px);
    width: 100%;
    height: 100%;
    position: relative;
}
.func-nome-label{
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}
.func-cargo-label{
    font-size: 15px;
    text-align: center;
}
/*==========================================================*/

md-progress-circular svg path {
    stroke: var(--color-primary); 
}

.fieldsetter{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-flow: row;
    flex-wrap: wrap;
    align-items: center;
}
.fieldset{
    width: 100% !important;
    margin: 5px !important;
}
.no-wrap{
    white-space: nowrap;
}

.white-space-normal{
    white-space:normal;
}

.right-2px{
    right: 2px;
}

.folha-selected-mat md-card, .folha-selected-mat div.folha-selectable{
    border: 3px solid var(--color-primary) !important;
}
md-list-item.folha-selected-mat{
    /* border-bottom: 1px solid var(--color-primary);
    border-top: 1px solid var(--color-primary); */
    border: 3px solid var(--color-primary) !important;
}

/*TIMELINE ==================================================*/
.timeline-item{
    width: 90%!important;
    margin: 10px auto;
}

md-dialog{
    max-width: unset;
    width: fit-content;
}
/*==========================================================*/

.disable-text-selection {
    cursor: pointer;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

.action-bnt {
    height: 50px!important;
    width: 50px!important;
}
.action-bnt md-icon {
    height: 35px!important;
    width: 35px!important;
    border-radius: 50%;
    transition: all ease-in-out var(--animation-time-short);
    -webkit-transition: all ease-in-out var(--animation-time-short);
    -moz-transition: all ease-in-out var(--animation-time-short);
}
.action-bnt:hover:not([disabled]) md-icon {
    -ms-transform: scale(1.15 , 1.15);
    -webkit-transform: scale(1.15 , 1.15);
    transform: scale(1.15 , 1.15);
}

.header-line{
    width: 100%;
    height: 0;
    margin-left: 10px;
    border-bottom: 1px solid var(--color-divider);
}

.provisoes-detalhes-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, 185px);
    grid-template-rows: repeat(auto-fit, 110px);
    grid-gap: 10px;
}

.hoverable{
    background-color: var(--color-surface);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),
                0 1px 1px 0 rgba(0,0,0,.14),
                0 2px 1px -1px rgba(0,0,0,.12);
    transition: all ease-in-out var(--animation-time-short);
    -webkit-transition: all ease-in-out var(--animation-time-short);
    -moz-transition: all ease-in-out var(--animation-time-short);
}

.hoverable:hover {
    -ms-transform: scale(1.02 , 1.02); /* IE 9 */
    -webkit-transform: scale(1.02 , 1.02); /* Safari */
    transform: scale(1.02 , 1.02);
    background-color: var(--color-hover);
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),
                0 8px 10px 1px rgba(0,0,0,.14),
                0 3px 14px 2px rgba(0,0,0,.12);
}

.func-option-circle{
    border-radius: 50%;
    margin: auto;
    display: flex;
}

.rotate-plus-135{
    transform: rotate(225deg);
}
.grid-columns-2{
    display: grid;
    grid-template-columns: repeat(2, 48%);
    column-gap: 10px;
}
.disable-selection{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.transition-long-important{
    transition: all ease-in-out var(--animation-time-long) !important;
    -webkit-transition: all ease-in-out var(--animation-time-long) !important;
    -moz-transition: all ease-in-out var(--animation-time-long) !important;
}
.md-char-counter{
    color: var(--color-on-background);
}
.folha-fab-right-2px > .folha-fab-button{
    right: 2px;
}
body[theme='light'] md-tooltip .font-blue, body[theme='slack'] md-tooltip .font-blue {
    color: var(--color-textarea-db-variable)
}
body[theme='dark'] md-tooltip .font-yellow, body[theme='night-blue'] md-tooltip .font-yellow, body[theme='cyberpunk-umbra'] md-tooltip .font-yellow {
    color: var(--color-orange)
}
.show-list-indicator{
    margin-left: 11px;
    position: relative;
}
.show-list-indicator::before{
    border: 2px solid var(--color-on-surface-dark);
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    margin-top: 8px;
    margin-left: -10px;
}

[folha-is-selectable]:hover{
    cursor: pointer;
}

.set-focus{
    height: 0;
}
.width-and-height-27{
    width: 27px !important;
    height: 27px !important;
}
.height-calc-80-250 {
    height: calc(80vh - 250px);
}
.primary-bg-on-hover{
    transition: all ease-in-out var(--animation-time-short);
    -webkit-transition: all ease-in-out var(--animation-time-short);
    -moz-transition: all ease-in-out var(--animation-time-short);
}
.primary-bg-on-hover:hover{
    color: var(--color-on-primary);
    background-color: var(--color-primary);
}
.round-fake-fab{
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    width: 25px;
    height: 25px;
    margin: auto 5px;
    border-radius: 20px; 
}

.filter-func-ref{
    width: 100px;
    height: 30px;
    margin: 0 0 10px 10px;
}

.beneficio-grid-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, 225px);
    row-gap: 10px;
    column-gap: 20px;
    justify-content: center;
    align-content: flex-start;
}

.card-ben{
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
}
.border-bottom-solid-1px{
    border-bottom: 1px solid var(--color-divider);
}

.responsive-image{
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    border-radius: 5px;
}

.bg-cabecalho{
    background: rgba(0,0,0,0.15) !important;
}

.textOverflowing {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.margin-left-5-percent {
    margin-left: 5%;
}

.margin-left-3-percent {
    margin-left: 3%;
}

.width-min-200 {
    min-width: 200px;
}

.max-width-100px {
    max-width: 100px;
}

.flex-container {
    display: flex!important;
    justify-content: space-between!important;
}

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

.flex-container {
    display: flex;
    justify-content: space-between;
}

.tooltip-700 {
    white-space: normal;
    word-wrap: break-word;
    width: 700px!important;
}

.modal-content-wrapper {
    max-height: 80vh;
    overflow-y: auto;
}

.margin-top-12-negativo {
    margin-top: -12px;
}

/*Informacao Trabalho Intermitente*/

.field-info-trab-inter{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.field-title-info-trab-inter{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}
.align-itens-start{
    align-items: start !important;
}

.pop-height-350{
    height: 350px!important;
}