@import "reset.css";
@import "responsible.css";

:root {
   --primary-color: #fe6344;
   --primary-color-dark: #7d2800;
   --proportional: 1;
}

.Admin :root {
   --primary-color: #404040;
   --primary-color-dark: #7d2800;
   --proportional: 1;
}

html,
body {
   height: 100%;
}

.font-table {
   color: #404040;
}

.mat-mdc-progress-spinner {
   --mdc-circular-progress-active-indicator-color: var(--primary-color);
}
.mat-mdc-menu-panel .mat-mdc-menu-content {
   padding: 0;
}

.span-styles {
   border-radius: 5px;
   padding: 4px 12px;
   white-space: nowrap;
   box-shadow: rgba(41, 41, 51, 0.5) 0px 4px 5px -1px,
      rgb(0 0 0 / 30%) 0px 1px 3px -1px;
}

.mat-tab-header button,
.mat-tab-header button:hover,
.mat-tab-header button:focus,
.mat-tab-header button:active,
.mat-tab-header button:not(.no-hover):focus,
.mat-tab-header button:not(.no-hover):hover {
   border-radius: 0;
   background-color: transparent;
   box-shadow: none;
}

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

/* LINHA ABAIXO FOI COMENTADA POIS ESTAVA DANDO PROBLEMA NO input-suboptions */
/* .mat-select-trigger {
    height: calc(30px * var(--proportional)) !important;
}

.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))
} */

.mat-primary .mat-pseudo-checkbox-checked,
.mat-primary .mat-pseudo-checkbox-indeterminate {
   background: #fe6344 !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,
.mat-step-header .mat-step-icon-selected,
.mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {
   background: #fe6344 !important;
}

.mat-step-header .mat-step-icon-selected {
   background-color: var(--primary-color) !important;
}

.mat-form-field-appearance-legacy .mat-form-field-infix {
   box-sizing: border-box !important;
   background: white;
   box-shadow: inset 0 0 2px #404040;
   border-radius: calc(4px * var(--proportional))
      calc(4px * var(--proportional)) 0px 0px;
   border-top: 0;
}

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

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

.revisao {
   background-color: #fe6344;
}

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

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

.w-inherit {
   width: inherit;
}

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

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

.mb-24 {
   margin-bottom: calc(24px * 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));
}

.btn {
   padding: calc(12px * var(--proportional)) calc(40px * var(--proportional));
   appearance: none;
   border: none;
   outline: none;
   background: #fe6344;
   color: white;
   font-size: calc(16px * var(--proportional));
   font-family: "Inter";
   font-style: normal;
   font-weight: 400;
   line-height: 19px;
   border-radius: calc(40px * var(--proportional));
   cursor: pointer;
   text-decoration: none;
   word-break: keep-all;
   border: 1px solid var(--primary-color);
   transition: all ease-in-out 300ms;
   box-shadow: rgb(50 50 93 / 50%) 0px 4px 5px -1px,
      rgb(0 0 0 / 30%) 0px 1px 3px -1px;
}

.btn:hover {
   background: white !important;
   color: #fe6344 !important;
}

.mat-datepicker-toggle > button {
   box-shadow: none;
}

.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 {
   color: var(--primary-color);
   background-color: white;
}

/* .btn:not(.no-hover):hover,
button:focus {
   color: var(--primary-color) !important;
   background-color: white !important;
} */

.btnAdm {
   background: #404040 !important;
   border: 1px solid #404040 !important;
}

.btnAdm:not(.no-hover):hover {
   background: #404040 !important;
   border: 1px solid #404040 !important;
}

.swal2-actions:not(.swal2-loading) .swal2-styled:hover {
   color: #ffffff;
}

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

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

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

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

.paddinNoBottom {
   background: #ffffff;
   padding: calc(32px * var(--proportional)) calc(32px * var(--proportional))
      calc(0px * var(--proportional)) calc(32px * var(--proportional));
}

.filterTable {
   display: flex;
   background: #ffffff;
   align-items: center;
   border-top-left-radius: calc(4px * var(--proportional));
   border-top-right-radius: calc(4px * var(--proportional));
   padding: calc(32px * var(--proportional)) calc(32px * var(--proportional));
   gap: calc(16px * var(--proportional));
}

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

h1 {
   font-family: "Inter";
   font-style: normal;
   font-weight: 600;
   font-size: 20px;
   line-height: 24px;
   color: #404040;
}

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

.boxNoPadding {
   border: 1px solid #bfbfbf;
   border-radius: 4px;
}

.box {
   border: 1px solid #bfbfbf;
   border-radius: 4px;
   padding: calc(24px * var(--proportional)) calc(45px * var(--proportional));
}

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

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

.text-16 {
   font-size: calc(16px * var(--proportional));
   font-weight: bold;
   color: #404040;
}

h2 {
   font-weight: 600;
   font-size: calc(17px * 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.8;
   }
}

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

.w-100 {
   width: 100%;
}

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

.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: #fe6344;
}

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

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

.mdc-tab-indicator__content--underline {
   color: var(--primary-color) !important;
   background-color: var(--primary-color) !important;
   height: 3px;
}

.admin .mdc-tab-indicator__content--underline {
   color: #404040 !important;
   background-color: #404040 !important;
   height: 3px;
}

.mdc-tab__text-label {
   font-weight: 600;
   font-size: calc(17px * var(--proportional));
   line-height: calc(19px * var(--proportional));
   color: #404040;
}

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

.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: #fe6344 !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 !important;
}

.mat-form-field-wrapper {
   padding-bottom: unset !important;
}

.mat-form-field-infix {
   border-top: unset !important;
}

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

.mat-form-field-wrapper > .mat-form-field-underline {
   position: static;
}

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

.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: #fe6344;
}
.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-form-field-hide-placeholder .mat-select-placeholder {
   color: #808080;
   font-size: calc(14px * var(--proportional));
   line-height: calc(17px * var(--proportional));
   position: relative;
   z-index: 10;
   -webkit-text-fill-color: #808080;
   position: relative;
   top: 8px;
   left: 7px;
   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(20px * var(--proportional)) !important;
   top: calc(9px * 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;
}

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

.gp-12 {
   gap: 12px;
}

.btn-unset {
   background-color: unset;
}

.pd-5 {
   padding: 5px;
}

.orangeFont {
   color: #ff6344 !important;
   font-size: calc(20px * var(--proportional));
}

.grid {
   display: grid;
   /* grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); */
}

.grid-center {
   place-items: center;
}

.selectLanguage {
   display: flex !important;
   height: 20px;
   align-items: center;
}

.wForm-200 {
   width: 200px;
}

@media (max-width: 890px) {
   .wForm-200 {
      width: 100%;
   }
}

@media (min-width: 1450px) {
   .mat-datepicker-toggle > button {
      margin-top: calc(4px * var(--proportional));
   }
}

@media (max-width: 890px) {
   .gap-form {
      gap: calc(32px * var(--proportional));
      flex-direction: column;
   }
}

.myPanelClass {
   margin-top: 30px;
}

.timepicker-overlay {
   z-index: 100000 !important;
}

.timepicker-backdrop-overlay {
   z-index: 100000 !important;
}

.selectLanguage {
   display: flex !important;
   height: 20px;
   align-items: center;
}

@media (min-width: 1450px) {
   .mat-datepicker-toggle > button {
      margin-top: calc(4px * var(--proportional));
   }
}

.userDiv {
   display: flex;
}

.typeUserDiv {
   min-width: 333px;
}

@media (max-width: 890px) {
   .userDiv {
      display: grid;
   }
   .typeUserDiv {
      min-width: unset;
   }
   .gap-form {
      gap: calc(32px * var(--proportional));
      flex-direction: column;
   }
   .contentPage {
      padding: 20px;
   }
}

@media (max-width: 420px) {
   .contentPage {
      padding: calc(24px * var(--proportional)) calc(24px * var(--proportional));
      height: 100%;
   }
   .contextPage {
      padding: calc(24px * var(--proportional)) calc(24px * var(--proportional))
         calc(24px * var(--proportional));
   }
   .box {
      border: 1px solid #bfbfbf;
      border-radius: 4px;
      padding: calc(24px * var(--proportional)) calc(24px * var(--proportional));
   }
}

fieldset {
   border: 1px solid #ccc;
   padding: 16px;
   border-radius: 5px;
}

.mat-pseudo-checkbox-minimal::after {
   color: white !important;
}

.tooltipTable {
   white-space: pre-line;
   font-size: 12px;
   padding-bottom: 3px;
}

.mdc-line-ripple {
   display: none !important;
}

.mat-mdc-form-field-subscript-wrapper {
   display: none !important;
}

.mat-mdc-select-placeholder {
   font-size: calc(14px * var(--proportional));
   line-height: calc(17px * var(--proportional));
   color: #808080;
}

.mat-mdc-option .mdc-list-item__primary-text {
   white-space: nowrap !important;
}

.header-icon {
   color: #bfbfbf;
   font-size: 38px;
   height: 38px;
   width: 38px;
   cursor: pointer;
   display: inline;
   border: 1px solid #bfbfbf;
   border-radius: 4px;
   &:hover {
      color: #ff6344;
      border-color: #ff6344;
   }
}