/* --- animation preload --- */
.preload {
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5000 !important;
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .7);
    transition: opacity 0.75s, visibility 0.75s;
}

.top-card {
    margin-top: 10rem;
}

.resize-disabled {
    resize: none;
}

.metrics-area {
    display: block;
    width: 100%;
    height: 20vh;
}

.preload--hidden {
    opacity: 0;
    visibility: hidden;
}

.preload::after {
    content: "";
    width: 75px;
    height: 75px;
    border: 3px solid #dddddd;
    border-top-color: rgb(24, 24, 94);
    border-radius: 50%;
    animation: loading 0.75s ease infinite;
}

.size-checkbox {
    width: 20px;
    height: 20px;
}

@keyframes loading {
    from { transform: rotate(0turn)}
    to { transform: rotate(1turn)}
}




/* --- Response message --- */ 

.response {
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgb(240, 248, 255);
    border-left: 5px solid red;
    width: -100%;
    height: 50px;
    text-align: center;
    font-style: italic;
    font-weight: 700;
    border-radius: 2%;
}

.error-danger {
    border-color: brown;
    color: brown;
}

.warning-expose {
    border-color: #F4CD25;
    color: #F4CD25;
}

/* --- config template --- */

.color-header {
    background: #4d5152 !important;
    color: #fff !important;
}

/* --- config tables --- */
.arrow-direction {
    display: block;
    float: right;
    cursor: pointer;
}

/* --- config input:range --- */

.box-range {
    display: block;
    position: relative;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05s), #edf1f4);
    padding: 0px 30px 0px 30px;
}

.box-range .box-control-response {
    display: grid;
    grid-template-columns: 95% 5%;
    align-items: center;
}

.box-grid-template {
    display: grid;
    grid-template-rows: 1fr 2fr 1fr;
    grid-template-areas: "area-question";
}

.box-range p {
    text-align: center;
    color: #8d8d8d;
}

.range{
    width: 100%;
    height: 1px;
    /* appearance: none; */
    background: #f4eded;
    outline: none;
    border-radius: 15px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1), -5px -5px 10px #fff;
    inset: 5px 5px 5px rgba(0, 0, 0, 0.1);
    /* overflow: hidden; */
}

.overlay {
    position: absolute; /* Posicionamento absoluto em relação ao container */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0); /* Invisível */
    z-index: 1; /* Colocar acima do input */
}

.range::-webkit-slider-thumb {
    appearance: none;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    /* border: 0.5px solid #1dc400; */
    /* box-shadow: -407px 0 0 300px #e40000; */
    cursor: pointer;
}

.range::-moz-range-thumb {
    /* appearance: none; */
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    /* border: 0.5px solid #0074cf; */
    /* box-shadow: -407px 0 0 300px #e40000; */
    cursor: pointer;
}

.range::-ms-track-thumb {
    /* appearance: none; */
    width: 15px;
    height: 15px;
    background: #9e0000;
    border-radius: 50%;
    /* border: 0.5px solid #1dc400; */
    /* box-shadow: -407px 0 0 300px #e40000; */
    cursor: pointer;
}

#rangeValue {
    position: relative;
    text-align: center;
    width: 60px;
    font-size: 1.25em;
    color: #fff;
    color: #27a0ff;
    margin-left: 15px;
    border-radius: 25px;
    font-weight: 500;
    /* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px #fff; */
    inset: 5px 5px 10px rgba(0, 0, 0, 0.1);
    inset: -5px -5px 5px rgba(255, 255, 255, 0.25);
}


/* --- modal --- */

.expose {
    display: block;
    background-color: rgba(00, 00, 00, .5);

}

/* --- config stars --- */

.rating-css {
    width: 100%;
    transform: rotateY(180deg);
    margin-bottom: 20px;
}

.rating-css div {
    /* color: rgba(100, 100, 100, .3); */
    font-size: 30px;
    font-family: sans-serif;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    padding: 20px 0;
}

/* .rating-css input{
    display: none;
    } */
    
.rating-css-input:checked + label{
    color: red;
}
    
.rating-css-input {
    display: none;
}

.star-icon-ajust {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
}

/* 


.rating-css input + label {
    font-size: 50px;
    text-shadow: 1px 1px 0 #363636;
    cursor: pointer;
}


.rating-css input:checked + label ~ label {
    color: rgba(246, 246, 246, .3);
}

.rating-css label:activie{
    transform: scale(0.8);
    transition: 0.3s ease;
}

.checked-color {
    color: red !important;
} */




.rating-css label {
    cursor: pointer;
    width: 50px;
}


.rating-css label:before {
    content: '\f005';
    font-family: fontAwesome;
    position: absolute;
    display: block;
    font-size: 50px;
    /* color: #101010; */
}

.rating-css label:after {
    content: '\f005';
    font-family: fontAwesome;
    position: absolute;
    display: block;
    font-size: 50px;
    color: #1f9cff;
    opacity: 0;
    transition: 0.5s;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}

.rating-css label:hover:after,
.rating-css label:hover ~ label:after,
.rating-css input:checked ~ label:after {
    opacity: 1;
}


/* --- email --- */

.box-content-email {
    width: 450px;
    display: block;
    margin: 75px auto 0 auto;
}

.title-section {
    margin-bottom: 30px;
}

.title {
    color: #38475a;
    font-size: 25px;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 10px;
    background-color: red;
}

.para {
    color: #38475a;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.submit-btn {
    width: 100%;
    background-color: #106fde;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 16px;
    color: #fff;
    padding: 13px 24px;
    font-weight: 500;
    text-align: center;
    text-transform: capitalize;
    cursor: pointer;
}

.submit-btn:hover {
    opacity: 0.95;
}


.box-password {
    width: 450px;
    display: block;
    margin: 75px auto 0 auto;
}

.list-icon,
.icon-email {
    display: block;
    text-align: center;
    font-size: 16pt;
    cursor: pointer;
}


/* --- scrolling table --- */

.bar-style-table::-webkit-scrollbar {
    width:  2px;
}

.bar-style-table::-webkit-scrollbar-thumb {
    height: 5px;
    background-color: none;
    opacity: 0;
}

.bar-style-table:hover::-webkit-scrollbar-thumb {
    background-color: #494e53;
}



.bar-style-table-colaboradores::-webkit-scrollbar{
    height: 2px;
    width: 2px;
}

.bar-style-table-colaboradores::-webkit-scrollbar-thumb {
    background-color: none;
    border-radius: 50px;
    opacity: 0;
}

.bar-style-table-colaboradores:hover::-webkit-scrollbar-thumb {
    background-color: #494e53;
}



.bar-style-table-atrelar-colaboradores::-webkit-scrollbar{
    height: 2px;
    width: 2px;
}

.bar-style-table-atrelar-colaboradores::-webkit-scrollbar-thumb {
    background-color: none;
    border-radius: 50px;
    opacity: 0;
}

.bar-style-table-atrelar-colaboradores:hover::-webkit-scrollbar-thumb {
    background-color: #494e53;
}

.bar-style-graphic-all-questions-all-collaborators::-webkit-scrollbar{
    height: 2px;
    width: 2px;
}

.bar-style-graphic-all-questions-all-collaborators::-webkit-scrollbar-thumb {
    background-color: none;
    border-radius: 50px;
    opacity: 0;
}

.bar-style-graphic-all-questions-all-collaborators:hover::-webkit-scrollbar-thumb {
    background-color: #494e53;
}

.box-questionary {
    display: none;
    margin: 0 auto;
    height: 100vh;
    grid-template-rows: 88% 12%;
}

/* --- Tooltip Colaboradores --- */

.tbl-buttons .tooltip-notification {
    position: absolute;
    /* position: fixed; */
    /* position: relative; */
    z-index: 1000;
    /* top: 10px;  */
    /* transform: translateX(-40px); */
    /* transform: translate(-200%, -10px); */
    right: 0;
    margin: 0;
    background-color: #4d5152;
    color: #fff;
    white-space: nowrap;
    padding: 10px 15px;
    border-radius: 7px;
    visibility: hidden;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.tooltip-notification::before{
    content: "";
    position: absolute;
    left: 40%;
    top: 100%;
    border: 15px solid;
    border-color: #4d5152 #0000 #0000 #0000;
}

.tbl-buttons:has(.btn-warning:hover)  .tooltip-notification{
    visibility: visible;
    display: block;
    opacity: 1;
    position: fixed;
    margin-top: -72px;
    cursor: pointer;
}

.icon-email .tooltip-email {
    position: absolute;
    z-index: 1000;
    right: 280px;
    margin: 0;
    background-color: #4d5152;
    color: #fff;
    white-space: nowrap;
    padding: 10px 15px;
    border-radius: 7px;
    visibility: hidden;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    width: 140px;
    height: 80px;
    font-size: 9pt;
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    text-align: justify;
}

.tooltip-email::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    border: 15px solid;
    border-color: #4d5152 #0000 #0000 #0000;
}

.icon-email:has(.i-email:hover)  .tooltip-email{
    visibility: visible;
    display: block;
    opacity: 1;
    position: fixed;
    margin-top: -90px;
    cursor: pointer;
    word-break: break-all;    
}

.tooltip-status{
    position: absolute;
    z-index: 1000;
    margin-top: -100px;
    margin-left: -40px;
    background-color: #4d5152;
    color: #fff;
    white-space: nowrap;
    padding: 10px 15px;
    border-radius: 7px;
    visibility: hidden;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    width: 150px;
    height: 80px;
    font-size: 9pt;
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    text-align: justify;
}

.tooltip-status::before {
    content: "";
    position: absolute;
    left: 30%;
    top: 100%;
    border: 15px solid;
    border-color: #4d5152 #0000 #0000 #0000;
}

.it-status:has(.icon-status:hover)  .tooltip-status{
    visibility: visible;
    display: block;
    opacity: 1;
    /* position: fixed; */
    /* margin-top: -90px; */
    cursor: pointer;
    word-break: break-all;    
}

/* --- toggle --- */

input[type="checkbox"].input-toggle {
    width: 0;
    height: 0;
    visibility: hidden;
  }

  label.label-toggle {
    display: block;
    width: 35px;
    height: 5px;
    background-color: #663232;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    transition: 0.5s;
    box-shadow: 0 0 20px #85478050;
    margin: 0 auto;
  }

  .label-toggle::after {
    content: "";
    width: 15px;
    height: 15px;
    background-color: #e9e8f7;
    background-color: #570000;
    position: absolute;
    border-radius: 70px;
    top: -5px;
    left: 1px;
    transition: 0.5s;
  }

  .input-toggle:checked + .label-toggle:after {
    left: calc(100% - 9px);
    transform: translateX(-50%);
    background-color: #02a302;
   }

.input-toggle:checked + .label-toggle {
    background-color: #01e401;
  }

  .label-toggle:active:after {
    width: 5px;
  }


  

input[type=checkbox].toggle {
    display: none;
}

input[type=checkbox].toggle + label {
    display: inline-block;
    height: 60px;
    width: 200px;
    position: relative;
    font-size: 20px;
    border: 4px solid white;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

input[type=checkbox].toggle + label:before {
    position: absolute;
    top: 4px;
    height: 44px;
    width: 44px;
    content: "";
    transition: all 0.3s ease;
    z-index: 3;
}

input[type=checkbox].toggle + label:after {
    width: 140px;
    text-align: center;
    z-index: 2;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-overflow: ellipsis;
    overflow: hidden;
}

input[type=checkbox].toggle + label.android {
    height: 20px;
    border-radius: 30px;
    width: 150px;
    border-width: 0;
    margin-top: 20px;
    margin-bottom: 20px;
}

input[type=checkbox].toggle + label.android:before {
    border-radius: 50%;
    top: -20px;
    height: 60px;
    width: 60px;
    background-color: white;
    box-shadow: 0 0 15px #333;
}

input[type=checkbox].toggle + label.android:after {
    display: none;
}

input[type=checkbox].toggle + label.android:active:before {
    box-shadow: 0 0 2px 15px rgba(48, 48, 48, 0.7);
    transition: all 0.1s ease;
}

input[type=checkbox].toggle:not(:checked) + label.android{
    background-color: white;
    border-color: white;
}

input[type=checkbox].toggle:not(:checked) + label.android:before {
    left: 0;
    background-color: white;
}

input[type=checkbox].toggle:checked + label {
    text-align: center;
    border-color: yellow;
}

input[type=checkbox].toggle:checked + label:after {
    content: attr(data-checked);
    left: 4px;
    right: auto;
    opacity: 1;
    color: white;
}

input[type=checkbox].toggle:checked + label:before {
    left: 144px;
    background-color: yellow;
}

input[type=checkbox].toggle:checked + label.android {
    background-color: white;
    border-color: white;
}

input[type=checkbox].toggle:checked + label.android:before {
    right: auto;
    left: 90px;
}

  /* --- modal de pesquisa do colaborador ---*/

  .style-modal-pesquisa {
    display: block;
    background-color: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100vh;
    position: fixed !important;
    z-index: 5000 !important;
    opacity: 1;
    transition: opacity 0.2s ease-in;
  }

 
  .modal-conteudo {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin:5% auto 0 auto;
    width: 90%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .5);
    outline: 0;
    height: 80%;
  }


.content-relatorio {
    display: flex;
    align-items: center;
    width: 100%;
    height: 63vh;
    overflow: hidden;
    overflow-x: hidden;
}

/* --- Animação do ícone da table de colaboradores  --- */

.movie-content {
    transform: rotate(180deg);
    transition: transform 0.1s ease-in-out;
}

/* --- Box de conteúdo sobre o relatório --- */

.box-graphics {
    width: 100%;
    height: 415px;
    /* background-color: red; */
    display: flex !important;
    flex-direction: column;
    overflow-x: auto;
    align-items: center;
}

.box-graphics::-webkit-scrollbar {
    width:  2px;
}

.box-graphics::-webkit-scrollbar-thumb {
    height: 5px;
    background-color: none;
    opacity: 0;
}

.box-graphics:hover::-webkit-scrollbar-thumb {
    background-color: #494e53;
}


/* --- Impressão de pdf --- */

.printed {
    position: absolute !important;
    z-index: 1000;
    display: block;
    right: 3%;
    top: 25%;
    font-size: 1.5rem;
}

.grayscale {
    width: 200px;
}