@import 'reset.css';
:root {
    --primary-color:#FE7434;
    --primary-color-dark:#7D2800;
    --proportional:1;
}

.Admin * {
        --primary-color: #404040;
        --primary-color-dark: #7D2800;
        --proportional: 1;
}

html,body {
    height:100%;
}

.mat-form-field-label-wrapper {
    display: none;
}

.mat-select-trigger {
    height: calc(30px * var(--proportional));
    top: calc(3px * var(--proportional));
}

.mat-form-field-appearance-legacy .mat-form-field-infix {
    /* padding: calc(16px * var(--proportional)) calc(24px * var(--proportional)); */
    padding: 0;
    min-height: calc(48px * var(--proportional))
}

.mat-primary .mat-pseudo-checkbox-checked, .mat-primary .mat-pseudo-checkbox-indeterminate {
    background: #fe7434 !important;
}

.mat-form-field-appearance-legacy .mat-form-field-underline {
    background-color: rgb(255 255 255 / 42%) !important;
}

.mat-form-field.mat-focused .mat-form-field-ripple {
    background: var(--primary-color);
}

.mat-form-field-appearance-fill:not(.mat-form-field-disabled) .mat-form-field-flex~.mat-form-field-underline .mat-form-field-ripple {
    background-color: var(--primary-color);
}

.mat-form-field.mat-focused .mat-form-field-ripple, .mat-form-field.mat-form-field-invalid .mat-form-field-ripple {
    background-color: var(--primary-color) !important;
}

.date .mat-form-field-appearance-legacy .mat-form-field-wrapper {
    padding-bottom: 0;
}

.mat-form-field-appearance-legacy .mat-form-field-infix {
    background: #f4f4f4;
    border-top: 0;
}

.checkbox .mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

.no-padding-mat-menu .mat-mdc-menu-content {
  padding: calc(10px * var(--proportional)) calc(12px * var(--proportional));
  background-color: var(--primary-color);
  span {
    color: white;
  }
}

.checkbox .mat-mdc-checkbox .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

.situation {
    padding: calc(4px * var(--proportional)) calc(12px * var(--proportional));
    color: white;
    background-color: #FE7434;
    border-radius: 100px;
    font-size: calc(12px * var(--proportional));
    line-height: calc(15px * var(--proportional));
    white-space: nowrap;
}

.mat-dialog-container {
    overflow-x: hidden !important;
}

.open-situation {
    background-color: #FFC000;
}

.revisao {
    background-color: #FE7434;
}

.elaboracao {
    background-color: #56CCF2;
}

.avaliation {
    background-color: #6788dc;
}

.aprovacao {
    background: #07BF56;
}

.obsoleto {
    background: #BFBFBF;
}


.flex {
    display: flex;
}

.flex-center {
    justify-content: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

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

.flex-start {
    justify-content: flex-start;
}

.flex-end {
    justify-content: flex-end;
}



.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.col {
    flex:1;
    width: 100%;
}

.mt-10 {
    margin-top: 10px;
}

.mt-16 {
    margin-top: calc(16px * var(--proportional));
}

.mt-32 {
    margin-top: calc(32px * var(--proportional));
}

.mb-32 {
    margin-bottom: calc(32px * var(--proportional));
}

.mt-42 {
    margin-top: calc(42px * var(--proportional));
}

.mt-48 {
    margin-top: calc(48px * var(--proportional));
}

.mt-64 {
    margin-top: calc(64px * var(--proportional));
}

app-root button, .btn {
    padding: calc(12px * var(--proportional)) calc(60px * var(--proportional));;
    appearance: none;
    border: none;
    outline: none;
    background: var(--primary-color);
    color: white;
    font-size: calc(16px * var(--proportional));
    border-radius: calc(40px * var(--proportional));
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--primary-color);
    transition: all ease-in-out 300ms;
}

/* ── Exceção: botões da toolbar do Quill Editor ─────────────
   O seletor "app-root button" acima quebra os botões do Quill.
   Este bloco restaura o comportamento nativo com especificidade maior.
   ─────────────────────────────────────────────────────────── */
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
    padding: 3px 5px;
    background: none;
    border: none;
    border-radius: 2px;
    color: #444;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 24px;
    width: 28px;
    transition: none;
    outline: none;
    box-shadow: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover {
    background: rgba(0,0,0,0.07);
    color: #444;
}
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active {
    color: #FE7434;
}
/* Ícones SVG — cor padrão */
.ql-snow .ql-stroke,
.ql-snow .ql-stroke-miter {
    stroke: #444;
    fill: none;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    fill: #444;
}
/* Ícones SVG — hover */
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter {
    stroke: #FE7434;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill {
    fill: #FE7434;
}
/* Ícones SVG — ativo */
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter {
    stroke: #FE7434;
}
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill {
    fill: #FE7434;
}
/* ── Quill: remove outline do browser no contenteditable ── */
.ql-editor[contenteditable] {
    outline: none !important;
}
/* ── Quill: restaura o ql-clipboard que o reset.css do projeto desfaz ── */
.ql-clipboard {
    left: -100000px !important;
    height: 1px !important;
    overflow-y: hidden !important;
    position: absolute !important;
    top: 50% !important;
}
/* ─────────────────────────────────────────────────────────── */

.box-shadow {
    box-shadow: calc(3px * var(--proportional)) calc(3px * var(--proportional)) calc(19px * var(--proportional)) rgba(0, 0, 0, 0.04);
}

app-root button.btn-reverse, app-root .btn-reverse, .btn-reverse {
    color: var(--primary-color);
    background-color: white;
}

app-root button:not(.no-hover):hover, .btn:hover {
    color: var(--primary-color);
    background-color: white;
}

app-root button.btn-reverse:not(.no-hover):hover, app-root .btn-reverse:not(.no-hover):hover, .btn-reverse:hover {
    color: white;
    background-color:var(--primary-color);
}

mat-form-field.input-user-multiple-trigger {
    .mat-select-trigger {
        height: calc(30px * var(--proportional));
        top: calc(3px * var(--proportional));
    }

    &.mat-form-field-appearance-legacy .mat-form-field-infix {
        padding: calc(5px * var(--proportional)) calc(10px * var(--proportional))  !important;
        min-height: calc(47px * var(--proportional))
    }
}

.force-mat-tab-horizontal-scroll .mat-tab-list {
    max-width: 0px;
}

.rotate {
    transform-origin: center;
    transform-box: fill-box;
    -webkit-animation:spin 20s linear infinite;
    -moz-animation:spin 20s linear infinite;
    animation:spin 20s linear infinite;
}

.rotate2x {
    transform-origin: center;
    transform-box: fill-box;
    -webkit-animation:spin2 40s linear infinite;
    -moz-animation:spin2 40s linear infinite;
    animation:spin2 40s linear infinite;
}

.loader  {
    background-color: transparent !important;
}

body {
    overflow: hidden;
}

.align-center {
    align-items: center;
}

.flex-end {
    justify-content: flex-end;
}

.contextPage {
    background: #FFFFFF;
    box-shadow: calc(3px * var(--proportional)) calc(3px * var(--proportional)) calc(19px * var(--proportional)) rgba(0, 0, 0, 0.04);
    border-radius: calc(4px * var(--proportional));
    padding: calc(32px * var(--proportional)) calc(32px * var(--proportional)) calc(54px * var(--proportional));
    width: 100%;
}

.contentPage {
    padding: calc(24px * var(--proportional)) calc(45px * var(--proportional));
    height: 100%;
}

.contentPage h1 {
    font-weight: 600;
    font-size: calc(20px * var(--proportional));
    line-height: calc(24px * var(--proportional));
    color: #404040;
}

.span-styles {
    white-space: nowrap;
    padding: calc(4px * var(--proportional)) calc(12px * var(--proportional));
    border-radius: 100px;
}

* {
    box-sizing: border-box;
}

.contents > *:last-child {
    width: 100% !important;
}

.f-14 {
    font-size: calc(14px * var(--proportional));
    line-height: calc(17px * var(--proportional));
}

.border {
    border: 1px solid #BFBFBF;
    box-sizing: border-box;
    box-shadow: 3px 3px 19px rgba(0, 0, 0, 0.04);
}

.no-shadow{
    box-shadow: none;
}

.contextPage .flex .col {
    padding:calc(32px * var(--proportional))
}

h2 {
    font-weight: 600;
    font-size: calc(16px * var(--proportional));
    line-height: calc(19px * var(--proportional));

    /* Preto-75% */
    color: #404040;
}

.nopadding {
    padding: 0 !important;
}

.gap-1{gap: calc(8px * var(--proportional))}
.gap-2{gap: calc(16px * var(--proportional))}
.gap-3{gap: calc(24px * var(--proportional))}
.gap-4{gap: calc(32px * var(--proportional))}

.border-radius{
    border-radius: 4px;
}

@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}

@-moz-keyframes spin2 {
    100% { -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes spin2 {
    100% { -webkit-transform: rotate(-360deg); }
}
@keyframes spin2 {
    100% {
        -webkit-transform: rotate(-360deg);
        transform:rotate(-360deg);
    }
}

@media (max-width:1450px) {
    :root {
        --proportional:0.81;
    }
}

.Admin .table table thead tr td {
    border-bottom: 1px solid #404040 !important;
}

.Admin .table table thead tr td svg path {
    fill: #404040 !important;
}

.Admin .table table tbody tr td.cursor.act .subMenu {
    background: #404040 !important;
}

.table svg {
    fill: #404040;
}

.table .subMenu svg {
    fill: none;
}

.Admin .table svg {
    fill: #404040;
}

.pages span.number:not(.act) {
    background-color: white;
    color: #404040;
}

.table .pages span.number {
    color: white;
    padding: calc(5px * var(--proportional)) calc(8px * var(--proportional));
    border-radius: calc(5px * var(--proportional));
    top: 0px;
    text-decoration: none;
    display: block;
    text-align: center;
    background: #FE7434;
}

.Admin .table .pages span.number {
    color: white;
    padding: calc(5px * var(--proportional)) calc(8px * var(--proportional));
    border-radius: calc(5px * var(--proportional));
    top: 0px;
    text-decoration: none;
    display: block;
    text-align: center;
    background: #404040;
}

.w-100 {
    width: 100%;
}

.Admin .input-row input:focus + label + span {
    background-color: #404040 !important;
}

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: var(--primary-color) !important;
    height: 3px;
}

.swal2-container.swal2-backdrop-show:not(.swal2-top-right):not(.swal2-top), .swal2-container.swal2-noanimation {
    background: rgb(255 255 255 / 39%) !important;
}

body.swal2-toast-shown .swal2-container.swal2-top-end, body.swal2-toast-shown .swal2-container.swal2-top-right {
    top: calc(64px * var(--proportional)) !important;
    animation: animateRight 300ms ease-in-out;
}

@keyframes animateRight {
    0% {
        right: -240px;
        top: calc(64px * var(--proportional)) !important;
    }
    100% {
        right: 0px;
        top: calc(64px * var(--proportional)) !important;
    }
}

button:disabled {
    pointer-events: none;
    opacity: 0.6;
}

.swal2-title {
    line-height: 1;
}

.mat-expansion-panel-header {
    cursor: pointer;
    align-items: center;
    display: flex;
    gap: 30px;
}

.mat-content-name {
    display: flex;
    align-items: center;
}

.mat-content {
    overflow: visible !important;
}

mat-expansion-panel-header.header-align-center .mat-content {
    display: flex;
    align-items: center;
}


.close.ng-star-inserted {
    display: flex;
    justify-content: flex-end;
}

.mat-expansion-indicator::after {
    border-style: solid;
    border-width: 0 2px 2px 0;
    content: "";
    display: inline-block;
    position: relative;
    color: #404040 !important;
    padding: 6px !important;
    transform: rotate(45deg);
    vertical-align: middle;
    top: -4px !important;
}

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
    border-color: var(--primary-color) !important;
}

.mat-radio-outer-circle {
    border-color: #BFBFBF !important;
    border-width: 1px !important;
}

.mat-radio-label-content {
    font-size: 14px !important;
    line-height: 17px !important;
    color: #808080 !important;
}

.mat-checkbox-inner-container {
    width: 20px !important;
    height: 20px !important;
}
.mat-checkbox-frame {
    border: 1px solid #808080 !important;
    border-radius: 4px !important;
}

.mat-radio-button.mat-accent .mat-radio-inner-circle, .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {
    background-color: var(--primary-color) !important;
}


.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {    
    background-color: #fe7434 !important;
    border-radius: 4px;
}

.userImgDiv img {
    width: calc(33px * var(--proportional));
    height: calc(33px * var(--proportional));
    object-fit: cover;
    border-radius: 4px;
}

.userImgDiv {
    width: calc(33px * var(--proportional));
    height: calc(33px * var(--proportional));
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: bisque;
}

.userImgDivNoting {
    width: calc(33px * var(--proportional));
    height: calc(33px * var(--proportional));
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: bisque;
}

.textAreaAuto.mat-form-field-appearance-fill .mat-form-field-flex {
    padding: 0px;
}

.mat-form-field-appearance-fill.textAreaAuto .mat-form-field-wrapper {
    padding-bottom: 0px;
}

.mat-form-field-appearance-fill.textAreaAuto .mat-form-field-underline::before {
    display: none;
}

.mat-form-field-appearance-fill.textAreaAuto .mat-form-field-infix {
    padding: 0.25em calc(24px * var(--proportional)) calc(16px * var(--proportional))  calc(24px * var(--proportional));
}

.mat-form-field-appearance-fill.textAreaAuto .mat-form-field-ripple {
    bottom: -18px;
    height: 2px;
}

.mat-form-field-appearance-fill.textAreaAuto .mat-form-field-ripple {
    background-color: rgb(255 255 255);
}

.input-row input {
    box-sizing: border-box !important;
}

.mat-button-toggle-checked span{
color: white;
}
.mat-button-toggle-button:hover span {
color: #FFFFFF;
background-color: #FE7434;
}
.mat-button-toggle-button{
    border-radius: 0px;
}
.mat-button-toggle-button:hover{
    background-color: var(--primary-color);
}

.select .mat-select {
    margin-top: 3px;
}

.select .mat-select-placeholder {
    color: #808080;
    font-size: calc(14px * var(--proportional)) !important;
    line-height: calc(17px * var(--proportional)) !important;
    position: relative;
    z-index: 10;
    -webkit-text-fill-color: #808080 !important;
    position: relative;
    top: 1px !important;
    left: 7px !important;
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

.date .mat-form-field-appearance-legacy .mat-form-field-infix {
    padding: 0px !important;
}

.date .mat-form-field-flex {
    align-items: center;
    position: relative;
}
.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-form-field {
    max-width: 60px !important;
    width: 60px !important;
}
.date .mat-form-field {
    width: 100%;
}

.mat-calendar-body-selected {
    background-color:var(--primary-color) !important;
}

.date .mat-form-field-suffix {
    z-index: 10 !important;
    right: calc(12px * var(--proportional)) !important;
    top: calc(12px * var(--proportional)) !important;
    position: absolute !important;
}

.date .mat-datepicker-toggle .mat-button-wrapper svg {
    width: calc(16px * var(--proportional)) !important;
}

.date .ngx-mat-timepicker-table .mat-input-element {
    position: relative;
    top: calc(9px * var(--proportional)) !important;
}

.mat-option.none {
    pointer-events: none;
    opacity: 0.6;
}


.mat-option.none.first:first-child {
    pointer-events: all;
    opacity: 1;
}

.first-allowed mat-option {
    pointer-events: none;
    opacity: 0.6;
}

.cdk-drag-preview {
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);
    background-color: white;

}

.cdk-drag-preview .order {
    position: relative;
    top: -10px;
}

.cdk-drag-preview h1 {
    font-weight: 600;
    font-size: calc(20px * var(--proportional));
    line-height: calc(24px * var(--proportional));
    color: #404040;
}

.cdk-drag-placeholder {
    opacity: 0;
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-box:last-child {
    border: none;
}

.draggTabs .mat-tab-label-active .drag span .flex span {
    color: white !important;
}

.draggTabs .mat-tab-label-active .drag span .flex svg {
    fill: white !important;
    cursor: all-scroll !important;
}

.cdk-drag-preview .no-preview {
    display: none;
}

.cdk-drag-preview .elipsis {
    padding-right: 0px !important;
    max-width: 100% !important;
    text-overflow: inherit !important;
}

.draggTabs .mat-tab-label .drag span .flex svg {
    cursor: all-scroll !important;
    min-width: 24px;
}
.draggTabs .mat-tab-label .drag span .flex span {
    max-width: 200px;
    padding-right: 16px;
}
.elipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;
}

.gp-24 {
    gap: 24px;
}

.gp-12 {
    gap: 12px;
}

.gap-32-12 {
  gap: calc(32px * var(--proportional)) 12px;
}

.p-8 {
    padding: calc(32px * var(--proportional));
}

.text-center {
    text-align: center;
}

.inline {
    display: inline;
}

.bold {
    font-weight: bold;
}

.rounded {
    border-radius: 4px;
}

.mdc-radio__outer-circle, .mdc-radio__inner-circle{
    border-color: #fe7434 !important;
}

.mat-mdc-progress-spinner svg.mdc-circular-progress__indeterminate-circle-graphic {
    stroke: var(--primary-color);
}


.table .action-svg:hover svg {
    fill: #FE7434;
}

.Admin .table .action-svg:hover svg {
    fill: #808080;
}

.table .action-svg-180:hover svg {
    fill: #FE7434;
}

.Admin .table .action-svg-180:hover svg {
    fill: #808080;
}

.fullscreen-modal {
  .mat-mdc-dialog-container,
  .mat-dialog-container {
    padding: 0 !important;
    border-radius: 0;
    height: 90vh;
    bottom: 0;
    position: absolute;
  }
  
  .mat-mdc-dialog-surface,
  .mat-dialog-content {
    padding: 0 !important;
    margin: 0 !important;
  }
}