body {
    overflow: hidden !important;
    font-family: 'Roboto', sans-serif !important;
}

.home-container {
    height: 100%;
    width: 100%;
    display: flex;
    background-color: var(--color-background);
    overflow-x: auto;
}

.right-panel {
    flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    height: 100%;
    max-width: calc(100% - 64px);
    overflow: auto;
}

.left-panel {
    display: flex;
    flex-direction: column;
    width: 300px;
    margin-right: 10px;
    height: 100%;
    gap: 0;
    box-shadow: unset;
    transition: width 0.3s ease;
    align-items: stretch;
}

.left-panel.menu-collapsed {
    width: 64px;
    align-items: center;
    box-sizing: border-box;
}

.menu-toggle-btn {
    min-width: 26px;
    min-height: 40px;
    height: auto;
    width: auto;
    overflow: visible;
    padding: 4px 12px;
    background-color: transparent !important;
}

.menu-toggle-btn::before {
    display: none !important;
}

.menu-toggle-btn .toggle-icon {
    position: relative;
}

.menu-toggle-btn .toggle-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    pointer-events: none;
}

.menu-toggle-btn:hover,
.menu-toggle-btn:focus,
.menu-toggle-btn:focus-visible {
    background-color: var(--color-hover, rgba(0, 0, 0, 0.3));
}

.menu-toggle-btn:hover .toggle-icon::before,
.menu-toggle-btn:focus .toggle-icon::before,
.menu-toggle-btn:focus-visible .toggle-icon::before {
    background-color: rgba(255, 255, 255, 0.12);
}

.menu-toggle-btn:hover .toggle-icon,
.menu-toggle-btn:focus .toggle-icon,
.menu-toggle-btn:focus-visible .toggle-icon {
    filter: brightness(1.05);
    transition: all 0.2s ease;
}

.toggle-icon {
    width: 26px;
    height: 26px;
    border: 1px solid var(--color-icon);
    border-radius: 50%;
    margin: 12px auto auto 50px;
}

.toggle-icon svg,
.toggle-icon svg * {
    fill: var(--color-icon);
}

.portal-rh-icon {
    width: 32px;
    height: 32px;
    margin: 10px 10px;
    flex-shrink: 0;
    display: block;
    color: var(--color-icon);
}

.portal-rh-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.menu-collapsed .portal-rh-icon {
    display: none !important;
}

.portal-rh-text {
    text-transform: none;
    color: var(--color-icon);
    padding-right: 20px;
}

.left-panel.menu-collapsed .toggle-icon {
    margin: 12px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 40px;
    width: 40px;
    box-sizing: border-box;
}

.left-panel.menu-collapsed md-button {
    min-width: 56px !important;
    min-height: 48px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.menu-collapsed .left-panel-menu-item {
    justify-content: center !important;
    align-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    flex-direction: column !important;
    display: flex;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.menu-collapsed .left-panel-menu-icon {
    margin-right: 0;
    width: 28px !important;
    height: 28px !important;
}

.menu-collapsed .left-panel-menu-label {
    display: none;
}

.menu-collapsed .mat-card.funcionario-info {
    padding: 8px 4px;
    align-items: center;
    height: auto;
    width: 100%;
}

.menu-collapsed .funcionario-foto-nome-func-container {
    width: 48px;
    height: 48px;
    margin: 30px auto 0 auto;
    padding: 0;
    top: 0;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-collapsed .funcionario-foto-nome-func-container .foto-funcionario,
.menu-collapsed .funcionario-foto-nome-func-container md-icon {
    width: 40px;
    height: 40px;
    font-size: 40px;
    padding: 0;
    margin-bottom: 10px;
}

.menu-collapsed md-icon {
    margin: 0 !important;
}

.menu-collapsed .left-panel-menu-container {
    margin-top: 0px;
    padding: 0 !important;
    gap: 8px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-around;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    overflow-y: auto;
    min-height: 0;
}

.menu-collapsed .left-panel-menu-chevron {
    display: none !important;
}

.menu-collapsed .chevron-down {
    display: none !important;
}

.menu-collapsed .chevron-up {
    display: none !important;
}

.menu-collapsed .left-panel-menu-item,
.menu-collapsed .portal-menu-button {
    justify-content: center !important;
    align-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    flex-direction: column !important;
    display: flex;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.menu-collapsed .left-panel-menu-icon,
.menu-collapsed .portal-menu-button-icon {
    margin-right: 0;
    width: 28px !important;
    height: 28px !important;
}

.menu-collapsed .left-panel-menu-label,
.menu-collapsed .portal-menu-button-label {
    display: none;
}

.menu-collapsed .left-panel-menu-item:hover,
.menu-collapsed .portal-menu-button:hover,
.menu-collapsed .left-panel-menu-item:focus,
.menu-collapsed .portal-menu-button:focus,
.menu-collapsed .left-panel-menu-item:focus-visible,
.menu-collapsed .portal-menu-button:focus-visible {
    border-radius: 50% !important;
}

.menu-collapsed .left-panel-menu-item.left-panel-menu-selected,
.menu-collapsed .portal-menu-button.portal-menu-button-selected,
.menu-collapsed .left-panel-menu-item:focus-visible,
.menu-collapsed .portal-menu-button:focus-visible {
    border-radius: 50% !important;
    background-color: var(--color-hover, rgba(0, 0, 0, 0.08));
}

.menu-collapsed .mat-card>md-divider {
    display: none;
}

.menu-collapsed .mat-card {
    min-width: 56px !important;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box !important;
}

.mat-card.funcionario-info[layout-align="start center"][layout="column"] {
    padding: 0px;
}

.left-panel>.mat-card:first-child {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    height: auto;
    margin: 0;
}

.left-panel>.mat-card:last-child {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    min-height: 0;
    padding: 0px 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.menu-collapsed.left-panel>.mat-card:last-child {
    padding: 0 !important;
}

.left-panel .mat-card {
    box-shadow: none !important;
}

.left-panel-divider {
    border-top-width: 3px;
    width: 100%;
    margin: auto;
    display: block;
}

.menu-collapsed .left-panel-divider {
    display: none !important;
}

.empresa-info-section {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    flex-grow: 1;
    flex-shrink: 1;
    gap: 5px;
    padding: 5px 20px;
    width: 300px;
}

.empresa-info-section .empresa-info-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--color-icon);
    height: 28px;
}

.empresa-info-section .empresa-info-label {
    margin-right: 8px;
    flex-shrink: 0;
}

.empresa-info-section .empresa-info-value {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.empresa-info-section .empresa-info-item.empresa-name-e-departamento-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
}

.empresa-info-section .empresa-name-e-departamento {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    margin-right: 8px;
    padding-left: 10px
}

.empresa-info-section .empresa-change-btn {
    flex-shrink: 0;
    height: 28px;
    width: 28px;
    min-height: 28px;
    min-width: 28px;
    padding: 2px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empresa-info-section .empresa-change-btn md-icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.empresa-info-section .left-panel-menu-icon {
    fill: var(--color-icon);
    stroke: var(--color-icon);
    color: var(--color-icon);
    min-width: 10px;
    min-height: 10px;
    height: 15px;
    width: 15px;
}

.empresa-info-section .left-panel-menu-icon svg,
.empresa-info-section .left-panel-menu-icon svg * {
    fill: var(--color-icon) !important;
    stroke: var(--color-icon) !important;
}

.funcionario-foto-nome-func-container {
    display: flex;
    flex-flow: row;
    align-items: center;
    width: 300px;
    background-color: var(--color-surface-dark);
    position: relative;
    color: var(--color-icon);
    top: 37px;
    margin-bottom: 45px;
    justify-content: flex-start;
}

.menu-collapsed .funcionario-foto-nome-func-container {
    width: 48px;
    justify-content: center;
    padding-right: 0;
}

.foto-funcionario {
    width: 90px;
    height: 90px;
    object-fit: cover;
    flex-shrink: 0;
    padding: 10px;
    border-radius: 50%;
}

.funcionario-foto-nome-func-container md-icon {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    margin: 0;
}

.funcionario-foto-nome-func-container>span {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    color: var(--color-on-primary)
}

.left-panel-menu-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0px;
    box-shadow: none !important;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.left-panel-menu-container .left-panel-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: 8px 8px;
    margin: 0;
    text-align: left;
    text-transform: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.left-panel-menu-container .left-panel-menu-item:hover {
    background-color: var(--color-hover, rgba(0, 0, 0, 0.24));
}

.menu-collapsed .left-panel-menu-item:hover {
    border-radius: 50% !important;
}

.left-panel-menu-container .left-panel-menu-item.left-panel-menu-selected {
    background-color: var(--color-hover, rgba(0, 0, 0, 0.08));
}

.menu-collapsed .left-panel-menu-item.left-panel-menu-selected {
    border-radius: 50% !important;
    background-color: var(--color-hover, rgba(0, 0, 0, 0.08));
}

.left-panel-menu-item .left-panel-menu-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin-right: 12px;
    flex-shrink: 0;
    fill: var(--color-icon);
}

.left-panel-menu-item .left-panel-menu-icon svg,
.left-panel-menu-item .left-panel-menu-icon svg * {
    fill: var(--color-icon) !important;
}

.left-panel-menu-item .left-panel-menu-label {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-on-surface, #333);
}

.left-panel-menu-item .left-panel-menu-chevron {
    width: 20px;
    height: 20px;
    margin-left: auto;
    flex-shrink: 0;
    fill: var(--color-icon);
}

.left-panel-menu-item .left-panel-menu-chevron svg,
.left-panel-menu-item .left-panel-menu-chevron svg * {
    fill: var(--color-icon) !important;
}

.menu-collapsed md-menu.md-open .chevron-down {
    display: none !important;
}

.menu-collapsed md-menu.md-open .chevron-up {
    display: none !important;
}

.left-panel-menu-container .left-panel-menu-item:hover .left-panel-menu-icon svg,
.left-panel-menu-container .left-panel-menu-item:hover .left-panel-menu-icon svg *,
.left-panel-menu-container .left-panel-menu-item:hover .left-panel-menu-chevron svg,
.left-panel-menu-container .left-panel-menu-item:hover .left-panel-menu-chevron svg * {
    fill: var(--color-primary) !important;
}

.left-panel-menu-container .left-panel-menu-item.left-panel-menu-selected .left-panel-menu-icon,
.left-panel-menu-container .left-panel-menu-item.left-panel-menu-selected .left-panel-menu-chevron {
    fill: var(--color-primary);
}

.left-panel-menu-container .left-panel-menu-item.left-panel-menu-selected .left-panel-menu-icon svg,
.left-panel-menu-container .left-panel-menu-item.left-panel-menu-selected .left-panel-menu-icon svg *,
.left-panel-menu-container .left-panel-menu-item.left-panel-menu-selected .left-panel-menu-chevron svg,
.left-panel-menu-container .left-panel-menu-item.left-panel-menu-selected .left-panel-menu-chevron svg * {
    fill: var(--color-primary) !important;
}

.left-panel-menu-item .left-panel-menu-investida-logo {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin-right: 12px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.left-panel-menu-container::-webkit-scrollbar {
    width: 6px;
}

.left-panel-menu-container::-webkit-scrollbar-track {
    background: transparent;
}

.left-panel-menu-container::-webkit-scrollbar-thumb {
    background: transparent;
}

/*POPUP TROCA EMPRESA ================================================================================== POPUP TROCA EMPRESA*/
.troca-empresa-popup {
    min-height: 200px;
    padding: 24px 24px 0 24px;
    width: fit-content;
}

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

/* FERIAS ========================================================================================================== FERIAS */
.solicitacao-ferias-container {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 10px;
}

.solicitacao-ferias-expansion,
.ferias-expansion {
    height: 0;
    transition: height 0.15s ease-in-out;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
    grid-template-rows: 150px;
    grid-gap: 10px;
    margin: 0 auto;
    justify-content: center;
    align-content: center;
    transition: height var(--animation-time-long) ease-in-out;
}

.ferias-expansion {
    height: auto;
    padding: 20px 0px;
}

.solicitacao-ferias-card {
    background-color: var(--color-surface);
    border-radius: 8px;
    color: var(--color-on-surface);
    height: 95%;
    min-height: 150px;
    width: 95%;
    margin: auto;
    overflow: hidden;

    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);
}

.solicitacao-ferias-card:hover {
    transform: scale(1.02, 1.02);
    -ms-transform: scale(1.02, 1.02);
    -webkit-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);
}

.solicitacao-ferias-label {
    font-size: 17px;
    white-space: nowrap;
    margin: 23px auto 10px auto;
    color: var(--color-on-surface);
}

.solicitacao-ferias-data-btn {
    height: auto;
    margin: auto;
}

.solicitacao-ferias-data-container {
    color: var(--color-on-surface-dark);
    font-family: 'Eczar', serif;
    margin: 0 auto;
}

.solicitacao-ferias-data-container .solicitacao-ferias-dia {
    margin: 0 10px;
}

.solicitacao-ferias-dia {
    margin: 0 auto;
    font-size: 50px;
    color: var(--color-on-surface-dark);
    font-family: 'Eczar', serif;
}

.solicitacao-ferias-mes {
    font-size: 18px;
}

.solicitacao-ferias-ano {
    font-size: 18px;
}

.solicitacao-ferias-options-grid {
    display: grid !important;
    grid-template-columns: 50% 50%;
    width: 100%;
    grid-template-rows: 100%;
    position: absolute;
    bottom: 0;
}

.solicitacao-ferias-option-item {
    display: flex;
}

.solicitacao-ferias-option-item:hover {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.solicitacao-ferias-option-item:hover>md-icon {
    fill: var(--color-on-primary);
}

.solicitacao-ferias-btn-cancelar-closed {
    width: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.solicitacao-ferias-btn-cancelar-opened {
    width: 50% !important;
}

.solicitacao-ferias-edit-btn {
    position: absolute !important;
    right: 0;
    top: 0;
}

.ferias-grid {
    padding: 10px 15px;
    display: grid;
    grid-template-columns: 100%;
    /* grid-template-rows: repeat(auto-fit, 300px); */
    grid-gap: 20px;
}

.ferias-container {
    height: auto;
    width: 100%;
    display: block;
    overflow: visible;
    margin-bottom: 20px;
}

.ferias-item {
    height: fit-content;
    width: 100%;
    background-color: var(--color-surface);
    border-radius: 8px;
    position: relative;
    left: 0;
    transition: all var(--animation-time-long) ease-in-out;
    overflow: hidden;
    box-sizing: border-box;
}

.ferias-info-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(auto-fit, 100px);
    grid-gap: 20px;
    justify-content: space-around;
    align-content: center;
    padding: 50px 30px;
    height: 50%;
    width: calc(100% - 60px);
    box-sizing: border-box;
    color: var(--color-on-surface);
}

.ferias-info-container.info-padding {
    padding-bottom: 0;
}

.ferias-info-sistema {
    padding: 5px 0 20px;
}

.ferias-info-item {
    min-height: 100px;
}

.ferias-info-label {
    font-size: 16px;
    white-space: nowrap;
}

.ferias-info-value {
    font-size: 20px;
    margin: auto;
    color: var(--color-on-surface-dark);
    font-family: Eczar, sans-serif;
}

.ferias-info-observacao {
    color: var(--color-on-surface);
    margin-top: 25px;
}

.ferias-icon-button {
    padding: 0 !important;
    height: 70px !important;
    width: 70px !important;
}

.ferias-icon {
    height: 45px;
    width: 45px;
}

.edicao-ferias-container {
    width: 100%;
    transition: width var(--animation-time-long) ease-in-out;
    overflow: hidden;
    flex-shrink: 0;
}

folha-input-mat.edit-days-ferias {
    width: 70px;
    margin: 0 auto;
}

folha-input-mat.edit-days-ferias input {
    text-align: center;
    font-size: 30px;
    font-family: 'Eczar';
}

.help-feriado-ferias {
    padding: 0 !important;
    height: 22.4px !important;
    min-height: 0 !important;
    min-width: 0 !important;
}

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

/* THEME ============================================================================================================ THEME */
.theme-circle-background {
    height: 21px;
    width: 21px !important;
    min-width: 21px !important;
    padding: 0;
    border-radius: 50%;
    margin: 4px 20px;
    display: flex;
}

.theme-circle-primary {
    width: 16px;
    height: 16px;
    margin: auto;
    border-radius: 50%;
}

.theme-selection-icon {
    width: 30px !important;
    padding: 0;
    margin: auto 18px;
    height: 30px;
    max-width: 0;
    background-color: transparent !important;
}

.theme-item {
    cursor: pointer;
    margin: 2px 0;
    height: 32px !important;
}

.theme-item:hover {
    background-color: var(--color-hover);
}

.theme-selection-light-primary {
    background-color: var(--light-theme-primary);
    fill: var(--light-theme-primary);
}

.theme-selection-light-background {
    background-color: var(--light-theme-background);
    fill: var(--light-theme-background);
}

.theme-selection-dark-primary {
    background-color: var(--dark-theme-primary);
    fill: var(--dark-theme-primary);
}

.theme-selection-dark-background {
    background-color: var(--dark-theme-background);
    fill: var(--dark-theme-background);
}

.theme-selection-slack-primary {
    background-color: var(--slack-theme-primary);
    fill: var(--slack-theme-primary);
}

.theme-selection-slack-background {
    background-color: var(--slack-theme-background);
    fill: var(--slack-theme-background);
}

.theme-selection-night-blue-primary {
    background-color: var(--night-blue-theme-primary);
    fill: var(--night-blue-theme-primary);
}

.theme-selection-night-blue-background {
    background-color: var(--night-blue-theme-background);
    fill: var(--night-blue-theme-background);
}

.theme-selection-cyberpunk-umbra-primary {
    background-color: var(--cyberpunk-umbra-theme-primary);
    fill: var(--cyberpunk-umbra-theme-primary);
}

.theme-selection-cyberpunk-umbra-background {
    background-color: var(--cyberpunk-umbra-theme-background);
    fill: var(--cyberpunk-umbra-theme-background);
}

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

/* MENSAGEM POPUP ========================================================================================== MENSAGEM POPUP */
.portalrh-mensagem-popup {
    min-width: 600px;
    min-height: 200px;
    width: auto;
    max-height: 90vh;
    display: grid;
}

.portalrh-mensagem-container {
    height: 100%;
    width: 100%;
    padding: 10px 20px 20px 20px;
}

.portalrh-mensagem-close-bnt {
    position: absolute !important;
    right: 0;
    top: 0;
}

.portalrh-mensagem-content {
    padding: 25px;
    height: 100%;
    width: 100%;
}

.portalrh-mensagem-titulo {
    margin: auto;
}

.portalrh-mensagem-body {
    padding: 30px 0;
    margin: auto;
}

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

/* CALENDARIO ================================================================================================== CALENDARIO */
md-menu-content {
    /*max-height: 348px !important;*/
    overflow-y: hidden !important;
}

.md-calendar-day-header {
    background: var(--color-surface-dark) !important;
    color: var(--color-on-surface-dark) !important;
}

.md-calendar {
    background-color: var(--color-surface);
}

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

/* CHECKMARK ==================================================================================================== CHECKMARK */
.check-container {
    margin: 8px auto 0 auto;
    background-color: var(--color-green);
    width: 50px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.check-container.cross {
    background-color: var(--color-red);
}

.check-container.check {
    background-color: var(--color-green);
}

.check-mark {
    height: 20px;
    width: 20px;
    position: relative;
}

.check-mark div {
    background-color: var(--color-on-primary);
    position: absolute;
}

.check-mark div:nth-child(1) {
    height: 5px;
    width: 23px;
    transform: translate(2px, 8px) rotate(-45deg);
}

.check-mark div:nth-child(1).cross {
    animation: div1cross ease-out 0.5s forwards;
}

.check-mark div:nth-child(1).check {
    animation: div1check ease-out 0.5s forwards;
}

.check-mark div:nth-child(2) {
    height: 5px;
    width: 15px;
    transform: translate(-5px, 11px) rotate(45deg);
}

.check-mark div:nth-child(2).cross {
    animation: div2cross ease-out 0.5s forwards;
}

.check-mark div:nth-child(2).check {
    animation: div2check ease-out 0.5s forwards;
}

@keyframes div1cross {
    0% {
        transform: translate(2px, 8px) rotate(-45deg);
    }

    100% {
        transform: translate(-5px, 8px) rotate(135deg);
        width: 30px;
    }
}

@keyframes div2cross {
    0% {
        transform: translate(-5px, 11px) rotate(45deg);
        /* width:50px;  */
    }

    100% {
        transform: translate(-5px, 8px) rotate(-135deg);
        width: 30px;
    }
}

@keyframes div1check {
    100% {
        transform: translate(2px, 8px) rotate(-45deg);
    }

    0% {
        transform: translate(-5px, 8px) rotate(135deg);
        width: 30px;
    }
}

@keyframes div2check {
    100% {
        transform: translate(-5px, 11px) rotate(45deg);
        /* width:50px; */
    }

    0% {
        transform: translate(-5px, 8px) rotate(-135deg);
        width: 30px;
    }
}

/*==========================================================================================================================*/
/* EVOLUCAO SALARIAL ===================================================================================== EVOLUCAO SALARIAL*/
#combo-ano {
    min-width: 80px !important
}

.anos-combobox md-input-container {
    margin: 0;
}

.ajusta-icone-ev-sal {
    margin-top: 8px;
    margin-bottom: auto;
    margin-right: 10px;
    margin-left: 10px;
}

.evolucao-salarial-grafico {
    display: flex;
    height: calc(100% - 59px);
    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);
}

.ev-salarial-border {
    padding: 5px;
    background-color: var(--color-surface);
    border-radius: 8px;
}

.ajusta-tela-visao-totais {
    width: 100%;
    height: calc(100% - 59px);
    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);
}

.ajusta-total-geral {
    height: 10%;
    display: flex;
    align-items: center;
}

.donut-chart {
    width: 100%;
    height: 90%;
    margin: auto;
}

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

/* CADASTRO ======================================================================================================= CADASTRO*/
.cadastro-portal-grid {
    display: grid;
    width: 100%;
    grid-template-columns: 100%;
    /* grid-template-rows: 205px 920px; */
    grid-gap: 10px;
}

.cadastro-portal-grid-foto-endereco {
    display: grid;
    grid-template-columns: 300px calc(100% - 310px);
    grid-template-rows: 100%;
    grid-gap: 10px;
    width: 100%;
    height: calc(100% - 40px);
}

.cadastro-form-content {
    height: fit-content;
    width: 100%;
    padding-top: 20px;

    display: block;
    height: fit-content;

    -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;
}

.funcionario-form-content {
    height: fit-content;
    width: 100%;
    padding-top: 20px;

    display: block;
    height: fit-content;

    -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;
}

.ajusta-pesquisa {
    width: 50%;
    min-width: fit-content;
    align-items: center;
}

#cadastroPortalID fileupload-mat#anexoEnderecoID>div,
#cadastroPortalID fileupload-mat#anexoEscolaridadeID>div,
#cadastroPortalID fileupload-mat#anexoEstadoCivilID>div,
#cadastroPortalID fileupload-mat#anexoNomeID>div {
    max-height: 150px;
}

#cadastroPortalID fileupload-mat#anexoEnderecoID>div>div>span,
#cadastroPortalID fileupload-mat#anexoEscolaridadeID>div>div>span,
#cadastroPortalID fileupload-mat#anexoEstadoCivilID>div>div>span,
#cadastroPortalID fileupload-mat#anexoNomeID>div>div>span {
    font-size: 18px;
}

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

/* HOLERITE ======================================================================================================= HOLERITE*/
.holerite-totais-grid-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, 180px);
    grid-template-rows: 110px;
    justify-content: center;
    grid-gap: 10px;
    padding: 0 20px 20px 20px;
}

.holerite-totais-card {
    height: 110px;
    width: 180px;
}

folha-combobox-mat#tipo_folha_portal {
    height: 40px;
}

folha-combobox-mat#tipo_folha_portal md-input-container {
    margin: 0;
}

folha-date-mat#referenciaHolerite form {
    margin: 0;
}

folha-date-mat#referenciaHolerite {
    height: 40px;
    width: 105px;
    margin-left: 20px;
    margin-right: 10px;
}

folha-date-mat#referenciaHolerite md-input-container {
    height: 40px;
}

.fill-expand-event {
    width: 100% !important;
    height: 300px;
    margin-bottom: 30px;
}

.holerite-totais-card-grid {
    height: 0;
    transition: height 0.15s ease-in-out;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
    grid-template-rows: 150px;
    grid-gap: 10px;
    margin: 0 auto;
    justify-content: center;
    align-content: center;
    transition: height var(--animation-time-long) ease-in-out;
}

.holerite-card {
    min-width: 180px;
    min-height: 110px;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    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);
}
.holerite-card:hover{
    -ms-transform: scale(1.02 , 1.02); /* IE 9 */
    -webkit-transform: scale(1.02 , 1.02); /* Safari */
    transform: scale(1.02 , 1.02);
    color: var(--color-on-primary-light);
    background-color: var(--color-primary-light);
    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);
}

.holerite-container {
    height: 100%;
    width: 100%;
    display: flex;
    overflow: hidden;
}

.eventos-grid {
    display: grid;
    grid-template-rows: 100%;
    column-gap: 10px;
    grid-template-columns: 10% 40% 15% 15% 15%;
}

.amountButton {
    min-width: 35px;
    min-height: 35px;
    border-radius: 100%;
    background-color: var(--color-primary) !important;
}

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

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

/*EXTRATO PONTO =============================================================================================== EXTRATO PONTO*/
.primary-relatorio-button {
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
}

.primary-relatorio-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-relatorio-button[disabled],
.error-button[disabled],
.green-button[disabled] {
    color: var(--color-on-surface) !important;
    background-color: var(--color-hover) !important;
    margin: auto;
}

.green-relatorio-button {
    background-color: var(--color-green) !important;
    color: var(--color-background) !important;
}

.green-relatorio-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);
}

.yellow-relatorio-button {
    background-color: var(--color-yellow) !important;
    color: var(--color-on-primary) !important;
}

.yellow-relatorio-button:hover:not([disabled]),
.green-button.md-focused:not([disabled]) {
    background-color: var(--color-yellow-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);
}

.card-extrato-ponto-container {
    margin-bottom: 10px;
    height: 100%;
    width: 75%;
    min-width: 400px;
}

.ponto-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 240px);
    grid-template-rows: 150px;
    margin-bottom: 10px;
    grid-gap: 10px;
    width: 100%;
    justify-content: center;
}

.extrato-ponto-card {
    background-color: var(--color-surface);
    border-radius: 8px;
    color: var(--color-on-surface);
    height: 150px;
    min-height: 150px;
    width: 240px;
    overflow: hidden;
}

.extrato-ponto-label {
    font-size: 17px;
    white-space: nowrap;
    margin: 0px auto 0px auto;
    color: var(--color-on-surface);
}

.solicitacao-ferias-data-container {
    color: var(--color-on-surface-dark);
    font-family: 'Eczar', serif;
    margin: 0 auto;
}

.solicitacao-ferias-data-container .solicitacao-ferias-dia {
    margin: 0 10px;
}

.extrato-ferias-horas {
    margin: 0 auto;
    font-size: 50px;
    color: var(--color-on-surface-dark);
    font-family: 'Eczar', serif;
}

.ajusta-icone-saldo {
    margin: 10px auto 10px auto;
}

.extrato-ponto-grafico {
    background-color: var(--color-surface);
    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);
    border-radius: 8px;
    color: var(--color-on-surface);
    height: 100%;
    min-height: 300px;
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0px;
    margin-right: auto;
    overflow: hidden;
}

.extrato-ponto-item {
    position: relative;
    cursor: default !important;
    margin: auto;
    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);
}

.extrato-ponto-item.extrato-ponto-printable-item:hover {
    font-weight: bold;
    color: var(--color-primary);
    transform: scale(1.3);
    cursor: pointer !important;
}

.grafico-extrato-ponto-container {
    width: 100%;
    height: calc(100% - 160px);
}

.lista-extrato-ponto {
    width: 24%;
    min-width: 240px;
    height: 100%;
    color: var(--color-on-surface);
}

.ajusta-grid-cards-ponto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: repeat(auto-fill, 57px);
    grid-gap: 10px;
    height: auto;
    margin: auto 0;
}

.ajusta-cards-ponto-all-rounded {
    height: 52px;
    width: 200px;
    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-ponto-all-rounded:hover.tem-conteudo:not(.no-hover):not(.sem-conteudo){
    -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);
}

.sem-conteudo {
    opacity: 0.65;
    cursor: default;
}

.container-mes-selecionado {
    color: var(--color-on-surface);
    min-height: 387px;
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0px;
    margin-right: auto;
    overflow: hidden;
}

.conteudo-cards-mes-container {
    width: 100%;
    height: fit-content;
    min-height: fit-content;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 10px;
}

.conteudo-horas-container {
    display: flex;
    flex-flow: column;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    height: 100%;
    width: 100%;
    background-color: var(--color-surface);
    border-radius: 8px;
}

.cabecalho-lista-horas {
    width: calc(100% - 7px) !important;
}

.icone-item-printable {
    position: absolute;
    top: -3px;
    right: -18px;
    opacity: 0.5;
    width: 16px;
    height: 17px;
    min-width: 0;
}

/* AJUSTE DE PONTO ================================================================================ AJUSTE DE PONTO*/
.ajuste-ponto-form-content {
    display: flex;
    flex-flow: column;
    width: 100%;
}

.ajuste-ponto-grid-container {
    display: grid;
    grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    grid-template-rows: 100%;
    grid-gap: 10px;
}

.ajuste-ponto-left-input {
    width: calc(50% - 5px);
    margin-right: 5px;
}

.ajuste-ponto-right-input {
    width: calc(50% - 5px);
    margin-left: 5px;
}

.observacao-ajuste-body-container {
    width: 100%;
    height: calc(100% - 90px);
    margin: 0;
    margin-bottom: 24px;
    min-height: 100px;
}

.observacao-ajuste-body-container:not(.md-input-invalid).md-input-focused .md-input {
    border-color: var(--color-primary) !important;
}

.observacao-ajuste-body {
    background-color: var(--color-surface-light) !important;
    border-radius: 3px !important;
    color: var(--color-on-surface-dark) !important;
    height: 100% !important;
    overflow-y: auto;
}

.ajuste-ponto-lista {
    height: calc(100% - 276px);
    min-height: 200px;
    width: 95%;
    margin: 0 auto;
    padding: 10px 4px 0 4px;
}

.ajuste-ponto-lista-item {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 4px;
}

.ajustes-ponto-item-options {
    position: absolute;
    height: 50px;
    width: 50px;
    right: -66px;
    top: -13px;
    display: flex;
    background-color: transparent;
    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);
}

.ajustes-ponto-item-options.showing {
    right: -16px;
    background-color: var(--color-error);
}

.ajustes-ponto-item-options.round-border {
    border-bottom-right-radius: 8px;
}

.ajustes-ponto-item-options .md-icon-button {
    opacity: 0;
    margin: auto !important;
    transition: all cubic-bezier(0.52, 1.1, 0.4, 1.01) var(--animation-time);
    -webkit-transition: all cubic-bezier(0.52, 1.1, 0.4, 1.01) var(--animation-time);
    -moz-transition: all cubic-bezier(0.52, 1.1, 0.4, 1.01) var(--animation-time);
}

.ajustes-ponto-item-options md-icon {
    fill: var(--color-on-primary);
}

.ajustes-ponto-item-options.showing .md-icon-button {
    opacity: 1;
    transition: all cubic-bezier(0.55, 0.01, 0.45, -0.12) var(--animation-time);
    -webkit-transition: all cubic-bezier(0.55, 0.01, 0.45, -0.12) var(--animation-time);
    -moz-transition: all cubic-bezier(0.55, 0.01, 0.45, -0.12) var(--animation-time);
}

.ajuste-ponto-observacao-container {
    display: flex;
    flex-flow: column;
    height: calc(100% - 246px);
    width: 95%;
    padding: 0 4px;
    margin: 0 auto;
}

.ajuste-ponto-simulacao-container {
    height: 270px;
    min-height: 270px;
    width: 100%;
    background-color: var(--color-surface);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-flow: column;
    overflow-y: auto;
}

folha-combobox-mat.remove-bottom-margin md-input-container {
    margin-bottom: 0;
}

.ajuste-ponto-simulacao-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(auto-fill, 55px);
    width: 100%;
    height: calc(100% - 35px);
}

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

/* NOVO PONTO ========================================================================================== NOVO PONTO*/
.novo-ponto-button {
    width: 70px !important;
    height: 70px !important;
}

.novo-ponto-button>md-icon {
    width: 56px;
    height: 56px;
}

.novo-ponto-popup {
    min-width: 300px;
    min-height: 200px;
    width: auto;
    height: auto;
    max-width: 25vw;
}

.novo-ponto-container {
    padding: 20px;
}

.novo-ponto-close-bnt {
    position: absolute !important;
    right: 0;
    top: 0;
}

.novo-ponto-content {
    padding: 0 25px;
    height: 100%;
    width: 100%;
}

.novo-ponto-horario-icon {
    margin: 0 0 0 15px;
}

.novo-ponto-horario-field {
    width: 87px;
}

.clock {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--color-surface-light);
    border: 3px var(--color-on-surface) solid;
    position: relative;
}

.clock .hand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    transform-origin: center bottom;
    border-radius: 40px;
}

.clock .s-hand {
    height: 40px;
    width: 3px;
    background-color: var(--color-primary);
    z-index: 5;
}

.clock .m-hand {
    height: 35px;
    width: 4px;
    background-color: var(--color-primary-light);
    z-index: 4;
}

.clock .h-hand {
    height: 28px;
    width: 5px;
    background-color: var(--color-green);
    z-index: 3;
}

.clock .center {
    background-color: var(--color-primary);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
}

.loading-update {
    animation: rotate 1s infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

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

/* AFASTAMENTO ================================================================================ AFASTAMENTO*/
.afast-grid {
    min-width: 880px;
    display: grid;
    grid-template-columns: 30% calc(70% - 10px);
    grid-template-rows: 100%;
    gap: 10px;
}

.afast-upload-area {
    height: calc(100% - 45px);
    max-height: -webkit-fill-available;
}

.afastamento-tipo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    grid-gap: 15px 15px;
    font-size: 15px;
    padding: 0px 10px;
}

.afas-max-height {
    height: calc(100% - 50px);
    max-height: calc(100% - 50px);
    margin-bottom: 25px;
}

.afast-tipo-item {
    display: flex;
    flex-flow: column;
    height: 120px;
    width: 95% !important;
    min-width: 10px !important;
}

.afast-tipo-item-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.afast-tipo-item-icon {
    position: relative;
    width: 100%;
}

.afast-tipo-item-icon>div {
    position: absolute;
    right: 0px;
}

.header-stepper {
    min-height: 50px !important;
    position: inherit;
    width: 100%;
    border-radius: 8px;
}

.create-afas-request {
    margin: 0px !important;
    margin-bottom: 10px !important;
    width: 100%;
    min-width: 100%;
}

md-dialog.form-popup-afastamento {
    width: 1000px;
}

md-dialog#confirm-popup-req .popup-title {
    font-size: 22px;
    margin-left: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

md-dialog#confirm-popup-req .popup-grid {
    display: grid;
    grid-template-columns: repeat(2, 45%);
    grid-column-gap: 20px;
    justify-content: center;
}

md-dialog#confirm-popup-req md-dialog-content md-input-container:not(.md-input-invalid).md-input-focused .md-input {
    border-color: var(--color-primary);
}

md-dialog#confirm-popup-req md-dialog-content md-input-container:not(.md-input-invalid).md-input-focused label {
    color: var(--color-primary);
}

md-dialog#confirm-popup-req .input-comment {
    width: calc(100% - 100px);
    margin: 18px 0px 0px !important;
}

md-dialog#confirm-popup-req .input-comment label {
    color: var(--color-on-surface);
}

md-dialog#confirm-popup-req .popup-post-textarea {
    color: var(--color-on-surface-dark);
    caret-color: var(--color-on-surface);
    border-color: var(--color-on-surface);
}

md-dialog-content md-input-container:not(.md-input-invalid).md-input-focused .md-input {
    border-color: var(--color-primary);
}

md-dialog-content md-input-container:not(.md-input-invalid).md-input-focused label {
    color: var(--color-primary);
}

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

/* TROCAR SENHA POPUP ========================================================================== TROCAR SENHA POPUP*/
.trocar-senha-popup {
    min-width: 400px;
    min-height: 200px;
    width: auto;
    height: auto;
    max-width: 35vw;
}

.trocar-senha-container {
    height: 100%;
    width: 100%;
}

.trocar-senha-close-bnt,
.trocar-senha-visibility-bnt {
    position: absolute !important;
    top: 0;
}

.trocar-senha-close-bnt {
    right: 0;
}

.trocar-senha-visibility-bnt {
    left: 0;
}

.trocar-senha-content {
    padding: 35px;
    height: 100%;
    width: 100%;
}

.trocar-senha-campos input {
    -text-security: disc;
    -webkit-text-security: disc;
    -mox-text-security: disc;
}

.trocar-senha-input {
    width: calc(100% - 40px);
    min-width: calc(100% - 40px);
}

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



/*PRINTABLES CSS===================================================================================================*/
.header-emp {
    font-size: 22px;
    display: flex;
}

.header-emp strong {
    font-size: 20px;
    margin: 0 auto;
}

.header-emp span {
    margin: 0 auto;
    font-size: 17px;
    margin-top: 10px;
}

.logomarca {
    width: 250px;
    height: 70px;
    object-fit: contain;
}

.field-value {
    display: flex;
    flex-flow: column;
}

.holerite-body {
    border: 1px solid black;
    border-bottom: 0;
    display: flex;
    flex-flow: column;
}

.demons {
    margin: 15px auto;
    font-size: 24px;
    font-weight: 500;
}

.frst-line-grid {
    display: grid;
    grid-template-columns: 22% calc(78% + 1px);
    font-size: 16px;
    border-top: 1px solid black;
}

.field-value {
    border: 1px solid black;
    border-left: 0;
    padding: 6px;
}

.field-value strong {
    margin-bottom: 10px;
}

.scnd-line-grid {
    display: grid;
    grid-template-columns: 22% 34.8% 15% 14% calc(14% + 3px);
    font-size: 16px;
}

.thrd-line-grid {
    display: grid;
    grid-template-columns: 22% 34.8% calc(43% + 3px);
    font-size: 16px;
}

.list-evt.evts-header {
    height: 22px;
}

.list-evt.evts-header .field-value {
    padding: 0px !important;
}

.list-evt.evts-header .field-value strong {
    margin-bottom: auto !important;
}

.list-evt.evts-header .field-value .fix-margin {
    margin-left: 5px;
}

.list-evt {
    display: grid;
    grid-template-columns: 22% 34.8% 10% 16.6% calc(16% + 6px);
    font-size: 14px;
}

.margin-auto {
    margin: auto
}

.list-evt:not(.evts-header) .field-value {
    border-bottom: none !important;
    border-top: none !important;
}

.resume-line {
    display: grid;
    grid-template-columns: 66.8% 16.6% calc(16% + 6px);
    font-size: 11px;
}

.resume-line .field-value span,
.resume-line .field-value strong {
    margin-left: auto;
    margin-right: auto;
}

.resume-line .field-value span {
    font-size: 13px;
    margin-top: auto;
}

.bases-line {
    display: flex;
    font-size: 13px;
    grid-template-rows: 55px;
    margin-top: 5px;
}

.base-item {
    border: 1px solid black;
    border-left: 0;
    display: flex;
    flex-flow: column;
}

.base-item:first-child {
    border-left: 1px solid black;
}

.bases {
    display: grid;
    width: calc(4 * calc(100% / 6));
    grid-template-columns: repeat(4, calc(100% / 4));
}

.bases-resumo {
    display: grid;
    width: calc(2 * calc(100% / 6));
    grid-template-columns: repeat(2, 50%);
}

.fields-grid {
    display: grid;
    grid-template-columns: 50% 50%;
}

.comprovante-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
}

.comprovante {
    width: fit-content;
    width: -moz-fit-content;
    height: 100%;
    display: flex;
    flex-flow: column;
    margin: 0 auto;
}

.cabecalho-titulo {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    margin: 20px 0;
}

.comprovante-conteudo {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-items: flex-start;
}

.height-30 {
    height: 30%;
}

.benef-grid {
    min-width: 300px;
    display: grid;
    grid-template-rows: 50% calc(50% - 10px);
    grid-template-columns: 100%;
    gap: 10px;
    height: 100%;
}

.benef-grid-100 {
    grid-template-rows: 100% calc(50% - 10px);
}

.req-grid {
    height: calc(100% - 10px) !important;
    width: 100%;
}

.radio-medias {
    height: 150px;
    margin: 0;
}

.radio-display-flex {
    display: flex !important;
}

.color-red {
    color: var(--color-red);
    font-weight: bold;
}

.radio-titular {
    align-items: start;
    padding-left: 80px;
}

.benef-card {
    height: 100%;
    width: 100%;
    padding-left: 10px;
}

.benef-box {
    width: calc(100% - 10px);
}

.grid-cards-benef {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    grid-template-rows: repeat(auto-fill, 60px);
    grid-gap: 15px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    padding-left: 10px;
}

.benef-icon-button {
    padding: 0 !important;
    height: 48px !important;
    width: 48px !important;
}

.ajusta-cards-benef-all-rounded {
    padding: 5px;
    height: 60px;
    width: 320px;
    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-benef-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);
}

/*PRINTABLES CSS===================================================================================================*/


/*DEPENDENTES======================================================================================================*/

.dpd-form {
    display: grid;
    grid-template-columns: repeat(2, 100%);
    grid-column-gap: 3%;
    margin-top: 25px;
    z-index: 5;
}

.dpd-info-dpd-grid {
    display: grid;
    grid-template-columns: 64% 33%;
    grid-column-gap: 3%;
    grid-template-rows: repeat(2, 70px);
}

.dpd-info-dpd-grid>* {
    margin: 0 15px;
}

.field-dpd {
    display: grid;
    grid-template-columns: 30px calc(100% - 30px);
}

.field-dpd-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    align-items: center;
    margin-top: 15px;
}

.field-dpd-grid-3 > * {
    margin: 0 15px;
}

.grid-2-half {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    margin: 0 15px;
    align-items: center;
}

.field-dpd-grid-3-inc {
    display: grid;
    grid-template-columns: 10% 30% 60%;
    align-items: center;
}

.field-dpd-grid-3-inc > * {
    margin: 0 15px;
}

.dependente-form-grid {
    display: grid;
    grid-template-columns: 25% calc(75% - 10px);
    grid-column-gap: 10px;
    height: calc(100% - 50px);
}

.upload-area {
    height: 100%;
    max-height: -webkit-fill-available;
}

.margin-titulo-dpd {
    margin: 25px 5px;
}

/* POPUP DE AJUDA INCLUSAO DE DEPENDENTE =============================================================================*/
md-dialog.help-popup-dep {
    min-width: 600px;
    width: auto;
    max-height: 90vh;
    display: grid;
}

.help-popup-dep-container {
    padding: 20px;
}

.help-popup-dep-close-bnt {
    position: absolute !important;
    right: 0;
    top: 0;
}

.help-popup-dep-content {
    display: flex;
    flex-flow: column;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.help-popup-dep-disable-bnt {
    filter: grayscale(1);
}

/* CARD DEPENDENTE ===================================================================================================== */

.calc-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 310px);
    column-gap: 10px;
    justify-content: center;
    align-content: flex-start;
}

.card-dep {
    height: 200px !important;
}

.dependente-circle {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    display: flex;
    margin: 0 5px
}

/* POPUP DE OBSERVACAO INCLUSÃO DPD */

md-dialog.form-popup-beneficio-dpd {
    width: 700px;
}

.popup-observacao-grid {
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
}

.input-comment-dpd {
    width: 100%;
    margin: 18px 0px 0px !important;
}

.input-comment-dpd label {
    color: var(--color-on-surface);
}

.delete-bnt {
    position: absolute;
    top: -15px;
    left: 20px;
}

.dpd-disable-bnt:not(:hover) {
    filter: grayscale(1);
}

.dpd-enable-bnt:hover {
    filter: grayscale(1);
}

.telegram-bnt {
    margin-left: auto;
    margin-top: -10px;
    color: black;
}

.telegram-bnt md-icon {
    transform: scale(1.2);
    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);
}

.telegram-bnt:hover .md-button:not([disabled]) md-icon {
    transform: scale(1.35);
}

.timer-container {
    position: relative;
}

.timer-container .timer-values {
    position: absolute;
    top: 54px;
    left: 48px;
    font-size: 30px;
}

.e-c-base {
    fill: none;
    stroke: var(--color-background);
    stroke-width: 4px;
}

.e-c-progress {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 4px;
    transition: stroke-dashoffset 0.7s;
}

.md-button[disabled] md-icon {
    filter: grayscale(1);
}

.display-remain-time.ending-time {
    animation: timelinePointGlow 3s infinite;
}

@keyframes timelinePointGlow {
    0% {
        color: var(--color-on-surface-dark);
        filter: drop-shadow(0px 0px 0px var(--color-error));
    }

    50% {
        color: var(--color-error);
        filter: drop-shadow(0px 0px 5px var(--color-error));
    }

    100% {
        color: var(--color-on-surface-dark);
        filter: drop-shadow(0px 0px 0px var(--color-error));
    }
}

md-dialog#novoPontoPopup .area {
    margin: 10px auto;
    box-shadow: 0 10px 100px #ccc;
    padding: 20px;
    box-sizing: border-box;
    max-width: 500px;
    border-radius: 8px;
}

md-dialog#novoPontoPopup .area video {
    width: 100%;
    height: auto;
    background-color: whitesmoke;
}

.portalrh-pendencias-popup {
    max-width: 60vw;
    min-width: 60vw;
}

.portalrh-pendencias-container .pendencia-title {
    margin: 5px auto;
    font-size: 25px;
    font-weight: 500;
}

.portalrh-pendencias-container .pendencia-header {
    margin: 0 auto 10px;
    font-size: 20px;
}

.portalrh-pendencias-container .content-grid {
    display: grid;
    grid-template-columns: 40% 60%;
}

.portalrh-pendencias-container .pendencia-ponto-grid {
    display: grid;
    grid-template-columns: 30% 30%;
    grid-auto-rows: 55px;
    justify-content: center;
}

.portalrh-pendencias-container .pendencia-form {
    width: 95%;
    height: 100%;
    margin: auto;
}

.portalrh-pendencias-container .pendencia-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 250px);
    width: 100%;
    grid-gap: 15px;
    padding: 15px;
    justify-content: center;
}

.portalrh-pendencias-container .pendencia-review-grid .mat-card {
    min-width: unset !important;
    border-radius: 8px;
    text-align: center;
}

.max-height-150px {
    max-height: 150px;
}

folha-filter-mat#filter-timeline-portal md-menu-bar {
    padding-right: 0px !important;
}

.md-open-menu-container md-menu-content {
    border-radius: 8px;
}

.hat {
    position: absolute;
    height: 40px;
    width: 40px;
    z-index: 20;
    top: -16px;
    left: -10px;
    transform: rotate(-36deg);
}

/* GERAL MENSAGENS ======================================================================================================================== GERAL MENSAGENS */
.fale-rh-icon {
    fill: var(--color-black) !important;
}

.icon-position {
    margin-left: 8px;
    height: 34px;
    width: 34px;
}

.pagination-margin {
    margin-bottom: 20px;
}

.mensagem-form-content {
    height: fit-content;
    width: 100%;

    display: block;

    -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: 1000px;
}

.filtros-rh-combo-card {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    min-width: 30%;
    margin-bottom: 0px !important;
}

.tabela-mensagens-height {
    height: calc(100% - 90px);
}

.list-msg-height {
    max-height: 15%;
    line-height: 20px !important;
}

.list-msg-height .md-button {
    line-height: 20px !important;
}

.flow-title-rh {
    flex-flow: row
}

.height-40 {
    height: 40% !important;
}

.input-container-margins md-input-container {
    margin-top: 5px !important;
    margin-bottom: 0px !important;
}

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

/* FORMULARIO DE NOVA MENSAGEM ================================================================================================ FORMULARIO DE NOVA MENSAGEM */
.mensagem-grid {
    display: grid;
    grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    grid-template-rows: 100%;
    grid-column-gap: 10px;
}

.mensagem-emp {
    width: calc(50% - 5px);
    margin-right: 5px;
}

.mensagem-dpto {
    width: calc(50% - 5px);
    margin-left: 5px;
}

.mensagem-body {
    background-color: var(--color-surface-light) !important;
    border-radius: 3px !important;
    color: var(--color-on-surface-dark) !important;
    height: 100% !important;
    overflow-y: auto;
    float: none !important;
}

.mensagem-body-container {
    width: 100%;
    height: calc(100% - 245px);
    margin: 0;
}

.mensagem-body-container:not(.md-input-invalid).md-input-focused .md-input {
    border-color: var(--color-primary) !important;
}

.height-conteudo-filtro-e-msgs {
    height: calc(100% - 60px);
}

.height-conteudo-mensagens {
    height: calc(100% - 130px);
}

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

/* LISTA DE MENSAGENS =================================================FALE COM O RH===================================================== LISTA DE MENSAGENS */
.nenhuma-mensagem {
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(100% - 80px);
    justify-content: center;
    font-size: 20px;
    color: var(--color-on-surface-dark);
}

.tabela-height-80 {
    min-height: 80px !important;
}

.mensagem-titulo-line {
    width: 25%;
    display: inline-flex;
    margin-left: 8px;
}

.new-msg-titulo-line {
    width: 100%;
    display: inline-flex;
    margin-left: 12px;
    align-self: center;
}

.mensagem-descricao-line {
    width: 45%;
    display: inline-flex;
    margin-left: 8px;
    overflow-wrap: break-word !important;
    white-space: normal;
}

.mensagem-data-line {
    width: 10%;
    max-width: 10%;
    display: inline-flex;
    margin-left: 8px;
}

.mensagem-status-line {
    width: 10%;
    max-width: 10%;
    display: inline-flex;
    margin-left: 6px;
    margin-right: 4px;
    margin-left: auto;
}

.filtrar-msg-button {
    width: 35%;
}

.div-filtrar-msg-button {
    text-align-last: center
}

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

/* POPUP DE VISUALIZACAO DE MENSAGEM =====================================FALE COM O RH=================================== POPUP DE VISUALIZACAO DE MENSAGEM */
.position-card-resposta {
    text-align: -webkit-right;
}

.card-mensagem-size-position {
    min-height: 70px;
    width: 70%;
    text-align: justify;
    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-mensagem-size-position:hover {
    opacity: 100%;
}

.visualizacao-mensagem-popup {
    min-width: 50%;
    width: auto;
    max-height: 90vh;
}

.visualizacao-mensagem-container {
    padding: 10px 20px 20px 20px;
}

.visualizacao-mensagem-close-btn {
    position: absolute;
    right: 0;
    top: 0;
}

.nova-mensagem-close-btn {
    position: absolute;
    right: -10;
    top: -10;
}

.visualizacao-mensagem-titulo {
    align-self: flex-start;
    margin: 10px;
    font-size: 20px;
}

.visualizacao-resposta-titulo {
    text-align: right;
    margin: 10px;
    font-size: 20px;
}

.visualizacao-mensagem {
    margin: 12px;
    font-size: 15px;
}

.visualizacao-resposta {
    margin: 12px;
    font-size: 15px;
    align-self: end;
}

.mais-empresas {
    margin: auto 0;
}

.md-virtual-repeat-offsetter.ng-scope {
    margin-bottom: 100px !important;
}

infinite-scroll-mat .ajusteBottom {
    margin-bottom: 15px;
}

/* Icones investidas */
.left-panel-menu-item .left-panel-menu-icon.icon-round {
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.menu-collapsed .left-panel-menu-item .left-panel-menu-icon.icon-round {
    width: 28px !important;
    height: 28px !important;
    margin: 0 auto !important;
    flex-shrink: 0;
}

/* Fim icones investidas */

/*============================================================FIM FALE COM O RH=====================================================================*/



/* Tema menu esquerdo */

body[theme='light'] #HomePortalRH .left-panel .mat-card,
body[theme='slack'] #HomePortalRH .left-panel .mat-card {
    background-color: #ffffff;
}

body[theme='dark'] #HomePortalRH .left-panel .mat-card,
body[theme='night-blue'] #HomePortalRH .left-panel .mat-card,
body[theme='cyberpunk-umbra'] #HomePortalRH .left-panel .mat-card {
    background-color: var(--color-surface);
}