@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

@font-face {
  font-family: "Guton";
  src: url(fonts/Guton-Regular.ttf);
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Guton";
  src: url(fonts/Guton-SemiBold.ttf);
  font-weight: bold;
  font-style: normal;
}

* {
  border: 0;
  padding: 0;
  margin: 0;
  font-family: "Montserrat", serif;
  scrollbar-width: thin;
}

:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: none !important;
}

:active {
  outline: none;
  box-shadow: none;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

h1,
h1>*,
h2,
h2>*,
h3,
h3>*,
h4,
h4>*,
h5,
h5>*,
h6,
h6>* {
  font-family: "Guton", sans-serif;
}

p.obs,
span.obs {
  font-size: .8rem;
}

/* Icons */
.bi-heart::before,
[class*=" bi-heart"]::before,
[class^=bi-heart]::before {
  vertical-align: -.16em;
}

/* Animação de timer para o alerta */
#alert-area {
  z-index: 9999;
  position: fixed;
  bottom: 0;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.alert {
  border: none;
  position: relative;
  animation: removeAlert 5s forwards;
  animation-fill-mode: forwards;
}

@keyframes removeAlert {
  100% {
    display: none;
  }
}

.alert .btn-close {
  color: var(--gray-950) !important;
  font-weight: 700;
}

.alert .progress {
  position: absolute;
  width: 100%;
  bottom: 0px;
  left: 0px;
  height: 4px;
}

.alert .progress-bar {
  width: 100%;
  background-color: #adb5bd;
}

.alert .progress-bar:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
}

.alert.show .progress-bar:before {
  animation: progress 5s linear forwards;
}

@keyframes progress {
  100% {
    right: 100%;
  }
}

.alert.alert-success .progress-bar:before {
  background-color: var(--success-500);
}

.alert.alert-danger .progress-bar:before {
  background-color: var(--danger-500);
}

.alert.alert-warning .progress-bar:before {
  background-color: var(--warning-500);
}

.alert.alert-info .progress-bar:before {
  background-color: var(--info-500);
}

/* Animação de sucesso */
.success-animation {
    margin: 0rem auto 2rem;
}

.success-animation .checkmark {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: var(--success-500);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px var(--success-500);
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    position: relative;
    top: 5px;
    right: 5px;
    margin: 0 auto;
}

.success-animation .checkmark .checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--success-500);
    fill: var(--gray-50);
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-animation .checkmark .checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {

    0%,
    100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px var(--success-500);
    }
}

/* Animação de erro */
.error-animation {
    margin: 0rem auto 2rem;
    width: 100px;
}

.error-animation .xmark__circle {
    stroke-width: 5;
    stroke-miterlimit: 10;
    stroke: var(--danger-500);
    fill: transparent;
}

.error-animation .xmark__x {
    stroke-width: 5;
    stroke-miterlimit: 10;
    stroke-linecap: "round";
    stroke: var(--danger-500);
    fill: transparent;
}

/* Formulários */
div.form-two-columns {
  display: flex;
  flex-direction: row;
  gap: .5rem;
}

div.form-two-columns div {
  width: 100%;
}

input[readonly],
select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}

.upload-info {
  padding: 1rem 0 0;
}

@media screen and (max-width:990px) {
  div.form-two-columns {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Validação do Trumbowyg */
.trumbowyg-box {
  background: #ffffff;
  border-radius: 0.375rem;
}

.trumbowyg-box .trumbowyg-editor {
  padding: .375rem .75rem;
  min-height: 18rem;
  max-height: 100%;
  margin: 0;
}

.trumbowyg-box .trumbowyg-button-pane {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.trumbowyg-box.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.trumbowyg-box.is-valid {
  border-color: var(--bs-form-valid-border-color);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Tabelas */
.dt-container {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dt-layout-table {
  flex-grow: 1;
  overflow-x: auto;
  scrollbar-width: thin;
}

.dt-container .row {
  padding: 0;
  margin: 0;
}

.dt-container .row>* {
  padding: 0;
}

.dt-container .dt-layout-start,
.dt-container .dt-layout-end {
  max-width: calc(100% - 2rem);
  margin: 0 1rem;
}

.dt-container .dt-layout-start {
  margin-bottom: 1rem;
}

table.table.dataTable>:not(caption)>*>* {
  background-color: transparent;
  border-bottom-width: 0;
  box-shadow: none;
}

table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: left;
}

table.dataTable tr td[colspan]:last-child {
  display: table-cell !important;
}

.table.dataTable thead tr:first-child th:first-child,
.table.dataTable tbody tr th:first-child,
.table.dataTable tbody tr td:first-child {
  padding-left: 1rem !important;
}

.table.dataTable thead tr:first-child th:last-child,
.table.dataTable tbody tr td:last-child {
  padding-right: 1rem !important;
}

table.table.dataTable.table-striped>tbody>tr[data-regid] {
  cursor: pointer;
}

table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
  box-shadow: none;
  background: var(--gray-100);
}

table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n):not(th):hover td,
table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1):not(th):hover td {
  background: var(--gray-200);
}

table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n)>th,
table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>th {
  background: var(--gray-700);
  background-image: linear-gradient(var(--gray-600) 0%, var(--gray-700) 100%);
  color: var(--gray-50);
}

table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n)>td .text-success,
table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>td .text-success {
  color: var(--success-500) !important;
}

table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n)>td .text-danger,
table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>td .text-danger {
  color: var(--danger-500) !important;
}

table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n)>td .text-warning,
table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>td .text-warning {
  color: var(--warning-500) !important;
}

table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n)>td .text-info,
table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>td .text-info {
  color: var(--info-500) !important;
}

table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n)>td .text-muted,
table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>td .text-muted {
  color: var(--gray-400) !important;
}

.table tr td [data-action="yes"] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  height: 100%;
}

[data-action="yes"] {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}

[data-action="add-shortcut"],
[data-action="edit"],
[data-action="del"],
[data-action="active"],
[data-action="redirect"] {
  text-decoration: none;
  cursor: pointer;
}

[data-action="add-shortcut"],
[data-action="edit"],
[data-action="del"],
[data-action="redirect"] {
  border-radius: var(--border-radius);
  padding: 0.1rem 0.3rem;
}

[data-action="add-shortcut"] {
  background-color: var(--success-500);
  color: var(--info-50);
  transition: all 0.5s;
}

[data-action="add-shortcut"]:hover,
[data-action="add-shortcut"]:active {
  background-color: var(--success-700);
  color: var(--success-100);
}

[data-action="edit"] {
  background-color: var(--info-500);
  color: var(--info-50);
  transition: all 0.5s;
}

[data-action="edit"]:hover,
[data-action="edit"]:active {
  background-color: var(--info-700);
  color: var(--info-100);
}

[data-action="del"] {
  background-color: var(--danger-500);
  color: var(--danger-50);
  transition: all 0.5s;
}

[data-action="del"]:hover,
[data-action="del"]:active {
  background-color: var(--danger-700);
  color: var(--danger-100);
}

[data-action="redirect"] {
  background-color: var(--gray-500);
  color: var(--gray-50);
  transition: all 0.5s;
}

[data-action="redirect"]:hover,
[data-action="redirect"]:active {
  background-color: var(--gray-700);
  color: var(--gray-100);
}

[data-action="edit"]:disabled,
[data-action="del"]:not(.form-check-input):disabled {
  background: var(--gray-100);
  color: var(--gray-300);
  cursor: initial;
}

@media screen and (max-width:990px) {
  .table {
    table-layout: fixed;
  }
}

/* Paginação */
ul.pagination li:first-child button.page-link {
  border-top-left-radius: var(--border-radius) !important;
  border-bottom-left-radius: var(--border-radius) !important;
}

ul.pagination li:last-child button.page-link {
  border-top-right-radius: var(--border-radius) !important;
  border-bottom-right-radius: var(--border-radius) !important;
}

ul.pagination .active>button.page-link,
ul.pagination button.page-link.active {
  color: var(--primary-50);
  background: var(--primary-600);
  background-image: linear-gradient(var(--primary-500) 0%, var(--primary-600) 100%);
  border-color: var(--primary-600);
}

ul.pagination .disabled>button.page-link,
ul.pagination button.page-link.disabled {
  color: var(--gray-300);
  background: var(--gray-100);
  border-color: var(--gray-100);
}