:root {
  --primary-color: #02a64b;
  --secondary-color: #004799;
  --primary-color-hover: #099b4b;
  --secondary-color-v2: #012b5b;
}

.caret.caret-light {
    content: '';
    display: inline-block;
    --width: 4px;
    border-left: var(--width) solid transparent;
    border-right: var(--width) solid transparent;
    border-top: var(--width) solid #ffffff;
    /* border-bottom: 6px solid #000; */
    /* position: absolute; */
    /* right: 0; */
    /* top: -6px;
    right: 10px; */
}

.icon-casa {
  position: relative;
  width: 40px;
  height: 30px;
  border: 2px solid #333;
  border-top: none;
}

/* Telhado */
.icon-casa::before {
  content: "";
  position: absolute;
  top: -22px;
  left: -2px;
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 22px solid #333;
}

/* Porta minimalista */
.icon-casa::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 14px;
  border: 2px solid #333;
  border-bottom: none;
}


.icons {
    --valor-width: 20px;
    background: #004799;
    margin: 0;
}

.icons.icon-sm,
.icons.icn-sm {
  --valor-width: 18px;
}

.icons.icon-color-disabled {
  background-color: #afafaf !important;
}

/* .icons:hover {
    background: #737373;
} */

.icons.icon-home {
    /* width: 50px; */
    /* height: 50px; */
    -webkit-mask: url("/vest_acesso2324/view/icons/home.png") no-repeat center;
    mask: url("/vest_acesso2324/view/icons/home.png") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icons.icon-clock {
    background: black;
    -webkit-mask: url("/vest_acesso2324/view/icons/relogio.png") no-repeat center;
    mask: url("/vest_acesso2324/view/icons/relogio.png") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icons.icon-config {
    background: black;
    -webkit-mask: url("/vest_acesso2324/view/icons/config.png") no-repeat center;
    mask: url("/vest_acesso2324/view/icons/config.png") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icons.icon-document {
  background: black;
  -webkit-mask: url("/vest_acesso2324/view/icons/document-ofc.png") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/document-ofc.png") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icons.icon-email, 
.icons.icn-email {
  --valor-width: 30px;
  background: black;
  -webkit-mask: url("/vest_acesso2324/view/icons/email-ofc.png") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/email-ofc.png") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
}

.icons.icon-user, 
.icons.icn-user {
  --valor-width: 30px;
  background: black;
  -webkit-mask: url("/vest_acesso2324/view/icons/user-ofc.png") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/user-ofc.png") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  position: relative;
}

.icons.icon-dashboard, 
.icons.icn-dashboard {
  --valor-width: 24px;
  background: black;
  -webkit-mask: url("/vest_acesso2324/view/icons/dashboard-icon.svg") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/dashboard-icon.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  position: relative;
}

.icon-wrapper,
.icn-wrapper {
  /* display: inline-block;
  border: 1px solid red;
  padding: 4px; */
  width: max-content !important;
  border-radius: 50%;
  padding: 0px;
  border: 2px solid #515151;
}

.icons.icon-menu {
    background: black;
    -webkit-mask: url("/vest_acesso2324/view/icons/bars-menu.png") no-repeat center;
    mask: url("/vest_acesso2324/view/icons/bars-menu.png") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icons.icon-menu.def {
  background: #0756b1;
}

.icons.menu-icon {
  --valor-width: 50px;
  --grossura-borda: calc(var(--valor-width) / 16);
  --width-linha: calc(var(--valor-width) / 10);
  --cor-borda: black;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: calc(var(--valor-width) / 5) 0;
  width: var(--valor-width) !important;
  height: var(--valor-width) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border-radius: calc(var(--valor-width) / 5);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: .1s;
  outline: none;
}

.icons.menu-icon:hover {
  transform: scale(1.05);
}

.icons.menu-icon.fnt-light {
  --grossura-borda: calc(var(--valor-width) / 18);
  --width-linha: calc(var(--valor-width) / 12);
}

.icons.menu-icon.def {
  --cor-borda: var(--secondary-color);
  /* background-color: var(--primary-color); */
  background-color: #70bf3f;
}

/* .icons.menu-icon span {
  display: block;
  height: var(--width-linha);
  width: 70%;
  background-color: #0756b1;
  border-radius: 999px;
  transform: translateZ(0);
  backface-visibility: hidden;
} */

.icons.menu-icon {
  border: var(--grossura-borda) solid var(--cor-borda);
}

.icons.icon-add,
.icons.icn-add {
  background: black;
  -webkit-mask: url("/vest_acesso2324/view/icons/icon-add-ofc.png") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/icon-add-ofc.png") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
}

.icons.icon-subtract,
.icons.icn-subtract {
  background: black;
  -webkit-mask: url("/vest_acesso2324/view/icons/icon-subtract-ofc.png") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/icon-subtract-ofc.png") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
}

.icons.icon-styleprops,
.icons.icn-styleprops {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/styleprops.svg") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/styleprops.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
}

.icons.icon-bold,
.icons.icn-bold {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/bold.svg") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/bold.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 14px;
}

.icons.icon-italic,
.icons.icn-italic {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/italic.svg") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/italic.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 14px;
}

.icons.icon-underline,
.icons.icn-underline {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/underline.svg") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/underline.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 16px;
}

.icons.icon-strikethrough,
.icons.icn-strikethrough {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/strikethrough.svg") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/strikethrough.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 16px;
}

.icons.icon-align_left,
.icons.icn-align_left {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/align_left.svg") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/align_left.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 16px;
}

.icons.icon-align_center,
.icons.icn-align_center {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/align_center.svg") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/align_center.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 16px;
}

.icons.icon-align_right,
.icons.icn-align_right {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/align_right.svg") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/align_right.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 16px;
}

.icons.icon-decrease_indent,
.icons.icn-decrease_indent {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/decrease_indent.svg") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/decrease_indent.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 16px;
}

.icons.icon-increase_indent,
.icons.icn-increase_indent {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/increase_indent.svg") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/increase_indent.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 16px;
}

.icons.icon-clear_formatting,
.icons.icn-clear_formatting {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/clear_formatting.svg") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/clear_formatting.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 16px;
}

.icons.icon-undo,
.icons.icn-undo {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/undo.svg") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/undo.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 16px;
}

.icons.icon-redo,
.icons.icn-redo {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/redo.svg") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/redo.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 16px;
}

.icons.icon-user_cadeado,
.icons.icn-user_cadeado {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/icon_user_cadeado.png") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/icon_user_cadeado.png") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 16px;
}

.icons.icon-tarefa,
.icons.icn-tarefa {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/icon_tarefa.png") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/icon_tarefa.png") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 16px;
}

/* .icons.icon-tarefa,
.icons.icn-tarefa {
    position: relative;
    width: 16px;
    height: 16px;
    display: block;
}

.icons.icon-tarefa::before,
.icons.icn-tarefa::before {
    content: "";
    position: absolute;
    inset: 0;

    background: white;

    -webkit-mask: url("/vest_acesso2324/view/icons/icon_tarefa.png") no-repeat center;
    mask: url("/vest_acesso2324/view/icons/icon_tarefa.png") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;

    transform: scale(1.15);
}

.icons.icon-tarefa::after,
.icons.icn-tarefa::after {
    content: "";
    position: absolute;
    inset: 0;

    background: #007bff;

    -webkit-mask: url("/vest_acesso2324/view/icons/icon_tarefa.png") no-repeat center;
    mask: url("/vest_acesso2324/view/icons/icon_tarefa.png") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
} */

.icons.icon-user_azul,
.icons.icn-user_azul {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/icon_user_azul.png") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/icon_user_azul.png") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 16px;
  --valor-width: 9px;
  padding: 0px 7px;
}

.icons.icon-inscricao,
.icons.icn-inscricao {
  background: white;
  -webkit-mask: url("/vest_acesso2324/view/icons/icon_inscricao.png") no-repeat center;
  mask: url("/vest_acesso2324/view/icons/icon_inscricao.png") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  --valor-width: 16px;
}

.icons.icon-confirm,
.icons.icn-confirm {
  /* background: black; */
  /* -webkit-mask: url("/vest_acesso2324/view/icons/icon-check.png") no-repeat center; */
  /* mask: url("/vest_acesso2324/view/icons/icon-check.png") no-repeat center; */
  /* -webkit-mask-size: contain; */
  background:transparent;
  mask-size: contain;
  background-image: url("/vest_acesso2324/view/icons/icon-check.png");
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  position: relative;
}

.icons.icon-reject,
.icons.icn-reject {
  /* background: black; */
  /* -webkit-mask: url("/vest_acesso2324/view/icons/icon-check.png") no-repeat center; */
  /* mask: url("/vest_acesso2324/view/icons/icon-check.png") no-repeat center; */
  /* -webkit-mask-size: contain; */
  background:transparent;
  mask-size: contain;
  background-image: url("/vest_acesso2324/view/icons/icon-reject.png");
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  position: relative;
}

i.icons.icn-user_cadeado.icons-v4::before {
  display: block;
  position: relative;
  content: "";
}

button:disabled .icons {
  opacity: 0.5;
  filter: grayscale(1);
}

/* .icons.icon-confirm::before,
.icons.icn-confirm::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(173, 173, 173, 0.5);
  border-radius: 50%;
  width: 100%;
  height: 100%;
} */
/* 
.icons.icon-reject::before,
.icons.icn-reject::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(173, 173, 173, 0.5);
  border-radius: 50%;
  width: 100%;
  height: 100%;
} */


.icons {
  min-width: var(--valor-width);
  width: var(--valor-width);
  height: var(--valor-width);
}

.icons.icons-v2 {
  --valor-width: 30px;
}

.icons.icons-v3 {
  --valor-width: 40px;
}

.icons.icons-v4 {
  --valor-width: 45px;
}

.icons.icons-v5 {
  --valor-width: 60px !important;
}

@media (max-width: 768px) {
  .icons.icons-v2 {
    --valor-width: 25px;
  }

  .icons.icons-v3 {
    --valor-width: 35px;
  }

  .icons.icons-v4 {
    --valor-width: 40px;
  }

  .icons.icons-v5 {
    --valor-width: 50px !important;
  }
}

@media (max-width: 576px) {
  .icons.icons-v2 {
    --valor-width: 20px;
  }

  .icons.icons-v3 {
    --valor-width: 30px;
  }

  .icons.icons-v4 {
    --valor-width: 35px;
  }

  .icons.icons-v5 {
    --valor-width: 45px !important;
  }
}

    /* --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px; */

i.icons {
  display: block;
  /* background-color: red !important; */
}

.btn-icon {
  width: max-content;
  padding: 0px !important;
  background-color: transparent;
  border-radius: 4px;
  box-shadow: inset 1px 0px 4px 0px #a8a8a8;
  border: 1px solid #a8a8a8;  
  transition: 0.2s;
}

.btn-icon:hover {
  background-color: transparent;
  /* box-shadow: inset 0px 0px 8px 1px #575757; */
  border: 1px solid #575757;
}

table.table-sm .btn-icon:hover {
  transform: scale(1.3);
}

.btn-icon.btn-secondary .icons {
  background-color: white;
}

.btn-label-icon {
  width: max-content;
  display: flex;
  gap: 6px;
  align-items: center;
  border-radius: 8px !important;
  margin: 0 !important;
  transition: 0.3s;
}

.btn-label-icon:hover {
  transform: translateY(-2px);
}

.btn-label-icon > .icons {
  background-color: white;
  --valor-width: 32px;
}

.btn-voltar.btn-label-icon.collapsed {
  padding: 4px 8px;
}

.btn-label-icon.collapsed {
  padding: 0;
}

.btn-label-icon.collapsed > span {
  display: none;
}

/* .btn-icon-disabled > .icons.icon-confirm::before,
.btn-icon-disabled > .icons.icn-confirm::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(173, 173, 173, 0.5);
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.btn-icon-disabled > .icons.icon-reject::before,
.btn-icon-disabled > .icons.icn-reject::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(173, 173, 173, 0.5);
  border-radius: 50%;
  width: 100%;
  height: 100%;
} */

.btn-icon.p-1 {
  padding: 4px !important;
  border-radius: 6px;
  outline: none;
}

.btn-icon:hover {
  background-color: transparent;
}

.traco {
  flex: 1;
  border-bottom: 1px dashed #aaa;
  padding-top: 8px;
}

@media (max-width: 320px) {
  .icons.menu-icon {
    --valor-width: 30px;
    --grossura-borda: calc(var(--valor-width) / 16);
    --width-linha: 2px;
    --cor-borda: black;

    transform: translateZ(0);
    backface-visibility: hidden;
  }
}