@betha-plataforma/theme-bootstrap4/dist/theme-bootstrap4.css

Tema do Design System Betha para Bootstrap 4

@charset "UTF-8";
/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/**
 ** Colors adicionais utilizadas no sistema
 **/
/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("https://cdn.betha.cloud/plataforma/design/kare/framework/0.1.4/assets/fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans Italic"), local("OpenSans-Italic"), url("https://cdn.betha.cloud/plataforma/design/kare/framework/0.1.4/assets/fonts/OpenSans-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("https://cdn.betha.cloud/plataforma/design/kare/framework/0.1.4/assets/fonts/OpenSans-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("https://cdn.betha.cloud/plataforma/design/kare/framework/0.1.4/assets/fonts/OpenSans-BoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans Light"), local("OpenSans-Light"), url("https://cdn.betha.cloud/plataforma/design/kare/framework/0.1.4/assets/fonts/OpenSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans Light Italic"), local("OpenSans-LightItalic"), url("https://cdn.betha.cloud/plataforma/design/kare/framework/0.1.4/assets/fonts/OpenSans-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url("https://cdn.betha.cloud/plataforma/design/kare/framework/0.1.4/assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans SemiBold Italic"), local("OpenSans-SemiBoldItalic"), url("https://cdn.betha.cloud/plataforma/design/kare/framework/0.1.4/assets/fonts/OpenSans-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
}
/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/**
 ** Colors adicionais utilizadas no sistema
 **/
/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
@media (max-width: 767px) {
  html,
body {
    background-color: #fff !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  html,
body {
    background-color: #fff !important;
  }
}
html,
body {
  background: #ededee;
  font-size: 0.915rem;
}

body {
  color: #242424;
  font-family: "Open Sans", "Arial", sans-serif;
}

a,
a:not([href]),
a:not([href]):not([class]) {
  color: #3374db;
  cursor: pointer;
}
a.disabled,
a:not([href]).disabled,
a:not([href]):not([class]).disabled {
  color: #bfbfc0;
  cursor: not-allowed;
}
a.disabled:hover,
a:not([href]).disabled:hover,
a:not([href]):not([class]).disabled:hover {
  color: #bfbfc0;
  text-decoration: none;
}
a:focus,
a:not([href]):focus,
a:not([href]):not([class]):focus {
  text-decoration: underline;
}
a:hover,
a:not([href]):hover,
a:not([href]):not([class]):hover {
  color: #215cba;
}

:focus {
  outline: 1px dotted #242424;
}

label.required,
a.required {
  position: relative;
}
label.required:before,
a.required:before {
  content: "Este campo é obrigatório";
  position: absolute;
  display: none;
  top: -26px;
  right: -77px;
  width: 155px;
  background-color: #FFF;
  border: 1px solid #757576;
  color: #222;
  padding: 3px 6px;
  font-weight: normal;
  text-transform: none;
  z-index: 1048;
}
label.required:after,
a.required:after {
  content: " *";
  color: #D64038;
}
label.required:hover:before,
a.required:hover:before {
  display: block;
}

.text-muted {
  color: #767676 !important;
}

/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/**
 ** Colors adicionais utilizadas no sistema
 **/
/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
.alert {
  border-radius: 4px;
  position: relative;
}
.alert-warning {
  background-color: #f7e7ba;
  border: 1px solid #f7e7ba;
  color: #72570d;
}
.alert-warning .alert-link {
  color: #72570d;
}
.alert-danger {
  background-color: #fbeaea;
  border: 1px solid #fbeaea;
  color: #c42722;
}
.alert-danger .alert-link {
  color: #c42722;
}
.alert-success {
  background-color: #d8f3e9;
  border: 1px solid #d8f3e9;
  color: #257456;
}
.alert-success .alert-link {
  color: #257456;
}
.alert-info {
  background-color: #c1e4f0;
  border: 1px solid #c1e4f0;
  color: #195366;
}
.alert-info .alert-link {
  color: #195366;
}
.alert .alert-link {
  font-weight: 500;
  text-decoration: underline;
}

.alert.alert-dismissible {
  padding-right: 40px;
}

/** Helpers **/
.alert.alert-icon {
  padding: 0.75rem 1.25rem 0.75rem 3.3rem !important;
}
.alert.alert-icon.alert-warning:before {
  content: "󰀦";
  display: inline-block;
  font-family: "Material Design Icons", "Arial", sans-serif;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1;
  font-size: 1.25rem;
  margin-right: 0.5rem;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 1.2;
  position: absolute;
  height: 100%;
  top: 0;
  left: calc(1rem + 5px);
  display: flex;
  align-items: center;
}
.alert.alert-icon.alert-danger:before {
  content: "󰀨";
  display: inline-block;
  font-family: "Material Design Icons", "Arial", sans-serif;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1;
  font-size: 1.25rem;
  margin-right: 0.5rem;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 1.2;
  position: absolute;
  height: 100%;
  top: 0;
  left: calc(1rem + 5px);
  display: flex;
  align-items: center;
}
.alert.alert-icon.alert-success:before {
  content: "󰗠";
  display: inline-block;
  font-family: "Material Design Icons", "Arial", sans-serif;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1;
  font-size: 1.25rem;
  margin-right: 0.5rem;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 1.2;
  position: absolute;
  height: 100%;
  top: 0;
  left: calc(1rem + 5px);
  display: flex;
  align-items: center;
}
.alert.alert-icon.alert-info:before {
  content: "󰋼";
  display: inline-block;
  font-family: "Material Design Icons", "Arial", sans-serif;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1;
  font-size: 1.25rem;
  margin-right: 0.5rem;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 1.2;
  position: absolute;
  height: 100%;
  top: 0;
  left: calc(1rem + 5px);
  display: flex;
  align-items: center;
}

/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/**
 ** Colors adicionais utilizadas no sistema
 **/
.badge {
  display: inline-flex;
  align-items: center;
  background-color: #e3e3e3;
  border-radius: 50px;
  color: #242424;
  font-size: 90%;
  font-weight: 400;
  padding: 3px 6px;
  text-align: center;
}
.badge.badge-primary {
  background-color: #3374db;
  color: #fff;
}
.badge.badge-success {
  background-color: #329a72;
  color: #fff;
}
.badge.badge-danger {
  background-color: #dd413c;
  color: #fff;
}
.badge.badge-warning {
  background-color: #e8b730;
  color: #242424;
}
.badge.badge-info {
  background-color: #6fc1dc;
  color: #242424;
}

/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/**
 ** Colors adicionais utilizadas no sistema
 **/
.breadcrumb {
  background: transparent;
  margin: 0;
  padding: 0;
  align-items: flex-end;
}
.breadcrumb .breadcrumb-item {
  color: #757576;
}
.breadcrumb .breadcrumb-item.active {
  color: #242424;
}
.breadcrumb .breadcrumb-item + :before {
  color: #757576;
  content: "󰅂";
  font-family: "Material Design Icons", "Arial", sans-serif;
  font-weight: 300;
}

/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/**
 ** Colors adicionais utilizadas no sistema
 **/
/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
button:focus {
  outline: 1px dotted #242424;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: "Open Sans", "Arial", sans-serif;
  text-transform: uppercase;
  border-radius: 4px;
}
.btn > .material-icons {
  vertical-align: middle;
}
.btn:before {
  font-weight: normal;
}
.btn.btn-secondary {
  background-color: #fff;
  border-color: #bfbfc0;
  color: #242424;
}
.btn.btn-secondary:hover, .btn.btn-secondary:focus {
  background-color: #ededee;
}
.btn.btn-secondary:not(:disabled):not(.disabled).active, .btn.btn-secondary:not(:disabled):not(.disabled):active, .btn.btn-secondary:active, .btn.btn-secondary.active {
  background-color: #e3e3e3;
  border-color: #bfbfc0;
  color: #242424;
}
.btn.btn-secondary[disabled], .btn.btn-secondary.disabled {
  border-color: #e3e3e3;
  box-shadow: none;
  color: #bfbfc0;
  opacity: 1;
}
.btn.btn-secondary[disabled]:hover, .btn.btn-secondary.disabled:hover {
  background-color: #fff;
}
.btn.btn-secondary.dropdown-toggle {
  border-left: 1px solid #bfbfc0;
  z-index: 2;
}
.btn.btn-success {
  background-color: #329a72;
  border-color: #329a72;
  color: #fff;
}
.btn.btn-success:hover, .btn.btn-success:focus {
  background-color: #257456;
  border-color: #257456;
}
.btn.btn-success:not(:disabled):not(.disabled).active, .btn.btn-success:not(:disabled):not(.disabled):active, .btn.btn-success:active, .btn.btn-success.active {
  background-color: #194d39;
  border-color: #194d39;
  color: #fff;
}
.btn.btn-success[disabled], .btn.btn-success.disabled {
  background-color: #8bdabc;
  border-color: #8bdabc;
  box-shadow: none;
  color: #fff;
  opacity: 1;
}
.btn.btn-success.dropdown-toggle {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  z-index: 2;
}
.btn.btn-primary {
  background-color: #3374db;
  border-color: #3374db;
  color: #fff;
}
.btn.btn-primary:hover, .btn.btn-primary:focus {
  background-color: #215cba;
  border-color: #215cba;
}
.btn.btn-primary:not(:disabled):not(.disabled).active, .btn.btn-primary:not(:disabled):not(.disabled):active, .btn.btn-primary:active, .btn.btn-primary.active {
  background-color: #19478f;
  border-color: #19478f;
  color: #fff;
}
.btn.btn-primary[disabled], .btn.btn-primary.disabled {
  background-color: #8aafea;
  border-color: #8aafea;
  box-shadow: none;
  color: #fff;
  opacity: 1;
}
.btn.btn-primary.dropdown-toggle {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  z-index: 2;
}
.btn.btn-danger {
  background-color: #dd413c;
  border-color: #dd413c;
  color: #fff;
}
.btn.btn-danger:hover, .btn.btn-danger:focus {
  background-color: #c42722;
  border-color: #c42722;
}
.btn.btn-danger:not(:disabled):not(.disabled).active, .btn.btn-danger:not(:disabled):not(.disabled):active, .btn.btn-danger:active, .btn.btn-danger.active {
  background-color: #981e1b;
  border-color: #981e1b;
  color: #fff;
}
.btn.btn-danger[disabled], .btn.btn-danger.disabled {
  background-color: #ec9693;
  border-color: #ec9693;
  box-shadow: none;
  color: #fff;
  opacity: 1;
}
.btn.btn-danger.dropdown-toggle {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  z-index: 2;
}
.btn.btn-warning {
  background-color: #e8b730;
  border-color: #e8b730;
  color: #242424;
}
.btn.btn-warning:hover, .btn.btn-warning:focus {
  background-color: #ce9d17;
  border-color: #ce9d17;
}
.btn.btn-warning:not(:disabled):not(.disabled).active, .btn.btn-warning:not(:disabled):not(.disabled):active, .btn.btn-warning:active, .btn.btn-warning.active {
  background-color: #a07a12;
  border-color: #a07a12;
  color: #242424;
}
.btn.btn-warning[disabled], .btn.btn-warning.disabled {
  background-color: #edc75e;
  border-color: #edc75e;
  box-shadow: none;
  color: #fff;
  opacity: 1;
}
.btn.btn-warning.dropdown-toggle {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  z-index: 2;
}
.btn.btn-info {
  background-color: #6fc1dc;
  border-color: #6fc1dc;
  color: #242424;
}
.btn.btn-info:hover, .btn.btn-info:focus {
  background-color: #46afd2;
  border-color: #46afd2;
}
.btn.btn-info:not(:disabled):not(.disabled).active, .btn.btn-info:not(:disabled):not(.disabled):active, .btn.btn-info:active, .btn.btn-info.active {
  background-color: #2d95b8;
  border-color: #2d95b8;
  color: #fff;
}
.btn.btn-info[disabled], .btn.btn-info.disabled {
  background-color: #98d2e6;
  border-color: #98d2e6;
  box-shadow: none;
  color: #fff;
  opacity: 1;
}
.btn.btn-info.dropdown-toggle {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  z-index: 2;
}
.btn.btn-link {
  color: #59595a;
  text-decoration: none;
}
.btn.btn-link:hover, .btn.btn-link:focus {
  background-color: #ededee;
  color: #242424;
}
.btn.btn-link:active, .btn.btn-link.active {
  background-color: #e3e3e3;
  color: #242424;
}
.btn.btn-link[disabled], .btn.btn-link.disabled {
  color: #bfbfc0;
  opacity: 1;
}
.btn.btn-link[disabled]:hover, .btn.btn-link.disabled:hover {
  background-color: #fff;
}

.btn-group .btn-info + .btn-info {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-group .btn-warning + .btn-warning {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-group .btn-danger + .btn-danger {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-group .btn-primary + .btn-primary {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-group .btn-success + .btn-success {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-group .btn-default + .btn-default {
  border-left: 1px solid #bfbfc0;
}

button.btn-link:disabled {
  pointer-events: all;
}

/** Botões **/
/** Deletar btn-add no futuro **/
.btn.btn-add:before {
  content: "󰐕";
  display: inline-block;
  font-family: "Material Design Icons", "Arial", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  margin-right: 5px;
  margin-top: -1px;
  padding-right: 0;
  vertical-align: middle;
}

.btn.btn-lg.btn-add:before {
  font-size: 20px;
}

.btn-circle {
  height: 50px;
  width: 50px;
  border-radius: 50% !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/** .Botões **/
/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/**
 ** Colors adicionais utilizadas no sistema
 **/
/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
.card {
  border-radius: 8px;
}
.card .card-img,
.card .card-img-top {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.card .card-img,
.card .card-img-bottom {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.card .card-img-overlay {
  border-radius: 8px;
}
.card.bg-secondary {
  background-color: whitesmoke !important;
}
.card.border-secondary {
  border: 1px solid #bfbfc0 !important;
}

/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/**
 ** Colors adicionais utilizadas no sistema
 **/
input[type=checkbox]:hover {
  cursor: pointer;
}

.form-check-input {
  margin-top: 0.2rem;
}

.form-check-label {
  padding-left: 0.25rem;
}

.form-check-label > .form-check-input {
  margin-left: -0.15rem !important;
}

.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}

.form-check-inline .form-check-input {
  display: inline-block !important;
}

.form-check-inline .form-check-input {
  /* position: static; */
  margin-top: 0;
  margin-right: 0.3125rem;
  margin-left: 0;
}

input[type=checkbox]:after {
  width: 1.1rem !important;
  height: 1.1rem !important;
  border-radius: 0.15rem !important;
  top: 0px;
  left: -2px;
  position: relative;
  background-color: #fff;
  content: "";
  display: inline-block;
  visibility: visible;
  border: 2px solid #bfbfc0;
}

input[type=checkbox]:checked:after {
  width: 1.1rem !important;
  height: 1.1rem !important;
  border-radius: 0.15rem !important;
  top: 0;
  left: -2;
  position: relative;
  content: "";
  background-size: 1rem;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpolygon fill='%23fff' points='19.59,4.88 9,15.46 4.91,11.38 2.79,13.5 9,19.71 21.71,7 '/%3e%3c/svg%3e");
  background-color: #3374db;
  border-color: #3374db !important;
  display: inline-block;
  visibility: visible;
  border: 1px solid #bfbfc0;
}

input[type=checkbox].checkbox-success:checked:after {
  background-color: #3ec18f;
  border-color: #3ec18f !important;
}

input[type=checkbox].checkbox-danger:checked:after {
  background-color: #dd413c;
  border-color: #dd413c !important;
}

input[type=checkbox].checkbox-warning:checked:after {
  background-color: #e8b730;
  border-color: #e8b730 !important;
}

/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/**
 ** Colors adicionais utilizadas no sistema
 **/
/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
.container.container-page {
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  min-height: 500px;
  position: relative;
}
.container.container--full-y {
  height: calc(100vh - 103px);
  padding: 0;
}

/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/**
 ** Colors adicionais utilizadas no sistema
 **/
.dropdown-menu {
  border-color: #e3e3e3;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.dropdown-menu .dropdown-header {
  color: #59595a;
  font-weight: 600;
}
.dropdown-menu .divider {
  background-color: #e3e3e3;
}
.dropdown-menu li > a {
  color: #59595a;
  padding: 6px 14px;
}
.dropdown-menu li > a i {
  color: #555;
}
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus {
  background-color: whitesmoke;
}
.dropdown-menu > li.disabled > a {
  color: #bfbfc0 !important;
}
.dropdown-menu ul.radio-list li:hover {
  background-color: #ededed;
}

.dropdown-sm {
  width: 350px;
}

.dropdown-lg {
  width: 650px;
}

.dropdown-menu > .disabled > a {
  color: #bfbfc0;
}

.dropdown-toggle::after,
.dropup .dropdown-toggle::after {
  display: none;
}

.dropdown-item {
  color: #242424;
}
.dropdown-item:focus, .dropdown-item:hover {
  background-color: whitesmoke;
  border-color: whitesmoke;
  outline: none;
  color: pallete("gray", "dark-30");
}
.dropdown-item.active, .dropdown-item:active {
  color: #222;
  background-color: #c0c0c0;
}

.btn.btn-secondary.dropdown-toggle,
.show > .btn-secondary.dropdown-toggle {
  background-color: #fff;
  border-color: #bfbfc0;
  color: #242424;
}
.btn.btn-secondary.dropdown-toggle:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  background-color: #ededee;
}
.btn.btn-secondary.dropdown-toggle:not(:disabled):not(.disabled).active, .btn.btn-secondary.dropdown-toggle:not(:disabled):not(.disabled):active, .btn.btn-secondary.dropdown-toggle:active, .btn.btn-secondary.dropdown-toggle.active,
.show > .btn-secondary.dropdown-toggle:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle:active,
.show > .btn-secondary.dropdown-toggle.active {
  background-color: #e3e3e3;
  border-color: #bfbfc0;
  color: #242424;
}

/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/**
 ** Colors adicionais utilizadas no sistema
 **/
/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
.form-control {
  border: 1px solid #bfbfc0;
  border-radius: 4px;
  box-shadow: none;
  color: #242424;
  transition: none;
}
.form-control::placeholder {
  color: #757576;
}
.form-control:focus {
  border-color: #3374db;
  box-shadow: none;
  outline: none;
}
.form-control.input-danger:focus {
  border-color: #dd413c;
}
.form-control.input-success:focus {
  border-color: #3ec18f;
}
.form-control[readonly] {
  background-color: #ededee;
}
.form-control[disabled] {
  background-color: #ededee;
  border-color: #bfbfc0;
  color: #757576;
}

input:disabled, .form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label {
  color: #c0c0c0;
  cursor: not-allowed !important;
}

form input .field-error,
form input .field-error .select2-choice,
form input .field-error .select2-choices {
  border-color: #dd413c;
}

label:not(.custom-control-label), label:not(.form-check-label) {
  color: #59595a;
}

label:not(label.form-check-label) {
  font-weight: 600 !important;
}

.required-icon {
  color: #dd413c;
  font-family: "Arial", sans-serif;
}

.tabrequired .required-icon {
  right: 0;
  top: 3px;
}

input[disabled] + .input-group-addon {
  border-right: 1px solid #bfbfc0;
}

.input-group-addon {
  background-color: #ededee;
  border-color: #bfbfc0;
  border-radius: 4px;
  color: #59595a;
}
.input-group-addon + input[disabled] {
  border-left: 1px solid #bfbfc0;
}

.input-group input.form-control:first-child + .input-group-addon {
  border-left: 0;
}

.input-group-lg + .form-control-feedback,
.input-lg + .form-control-feedback {
  right: 10px;
  width: auto;
}

.input-group-sm + .form-control-feedback,
.input-sm + .form-control-feedback {
  right: 8px;
  width: auto;
}

.form-control-feedback {
  align-items: center;
  display: flex;
  right: 5px;
}

.has-error .form-control,
.has-feedback .form-control,
.has-success .form-control,
.has-warning .form-control {
  box-shadow: none;
}
.has-error .form-control:focus,
.has-feedback .form-control:focus,
.has-success .form-control:focus,
.has-warning .form-control:focus {
  box-shadow: none;
}

.has-error .form-control:focus {
  border-color: #dd413c;
}
.has-error .input-group-addon {
  background-color: #fbeaea;
  color: #c42722;
}

.has-success .form-control:focus {
  border-color: #3ec18f;
}
.has-success .input-group-addon {
  background-color: #d8f3e9;
  color: #257456;
}

.has-warning .form-control:focus {
  border-color: #a07a12;
}
.has-warning .input-group-addon {
  background-color: #f7e7ba;
  color: #72570d;
}
.has-warning .form-control-feedback {
  color: #ce9d17;
}

.has-feedback label ~ .form-control-feedback {
  top: 20px;
}
.has-feedback label.sr-only ~ .form-control-feedback {
  top: 0;
}

/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/**
 ** Colors adicionais utilizadas no sistema
 **/
.tx__gray--d40 {
  color: #000 !important;
}

.tx__gray--d30 {
  color: #242424 !important;
}

.tx__gray--d20 {
  color: #59595a !important;
}

.tx__gray--d10 {
  color: #757576 !important;
}

.tx__gray--d5 {
  color: #98989a !important;
}

.tx__gray {
  color: #bfbfc0 !important;
}

.tx__gray--l5 {
  color: #d6d6d7 !important;
}

.tx__gray--l10 {
  color: #e3e3e3 !important;
}

.tx__gray--l20 {
  color: #ededee !important;
}

.tx__gray--l30 {
  color: whitesmoke !important;
}

.tx__gray--l40 {
  color: #fff !important;
}

.tx__red--d40 {
  color: #420d0b !important;
}

.tx__red--d30 {
  color: #6d1613 !important;
}

.tx__red--d20 {
  color: #981e1b !important;
}

.tx__red--d10 {
  color: #c42722 !important;
}

.tx__red {
  color: #dd413c !important;
}

.tx__red--l10 {
  color: #e56b67 !important;
}

.tx__red--l20 {
  color: #ec9693 !important;
}

.tx__red--l30 {
  color: #f4c0be !important;
}

.tx__red--l40 {
  color: #fbeaea !important;
}

.tx__pink--d40 {
  color: #3e1329 !important;
}

.tx__pink--d30 {
  color: #651f42 !important;
}

.tx__pink--d20 {
  color: #8d2a5c !important;
}

.tx__pink--d10 {
  color: #b43676 !important;
}

.tx__pink {
  color: #cb528f !important;
}

.tx__pink--l10 {
  color: #d779a8 !important;
}

.tx__pink--l20 {
  color: #e3a0c2 !important;
}

.tx__pink--l30 {
  color: #eec8db !important;
}

.tx__pink--l40 {
  color: #faeff5 !important;
}

.tx__blue--d40 {
  color: #0a1c38 !important;
}

.tx__blue--d30 {
  color: #123163 !important;
}

.tx__blue--d20 {
  color: #19478f !important;
}

.tx__blue--d10 {
  color: #215cba !important;
}

.tx__blue {
  color: #3374db !important;
}

.tx__blue--l10 {
  color: #5e92e3 !important;
}

.tx__blue--l20 {
  color: #8aafea !important;
}

.tx__blue--l30 {
  color: #b5cdf2 !important;
}

.tx__blue--l40 {
  color: #e0eafa !important;
}

.tx__aqua--d40 {
  color: #0f323d !important;
}

.tx__aqua--d30 {
  color: #195366 !important;
}

.tx__aqua--d20 {
  color: #23748f !important;
}

.tx__aqua--d10 {
  color: #2d95b8 !important;
}

.tx__aqua {
  color: #46afd2 !important;
}

.tx__aqua--l10 {
  color: #6fc1dc !important;
}

.tx__aqua--l20 {
  color: #98d2e6 !important;
}

.tx__aqua--l30 {
  color: #c1e4f0 !important;
}

.tx__aqua--l40 {
  color: #eaf6fa !important;
}

.tx__green--d40 {
  color: #0c271d !important;
}

.tx__green--d30 {
  color: #194d39 !important;
}

.tx__green--d20 {
  color: #257456 !important;
}

.tx__green--d10 {
  color: #329a72 !important;
}

.tx__green {
  color: #3ec18f !important;
}

.tx__green--l10 {
  color: #65cda5 !important;
}

.tx__green--l20 {
  color: #8bdabc !important;
}

.tx__green--l30 {
  color: #b2e6d2 !important;
}

.tx__green--l40 {
  color: #d8f3e9 !important;
}

.tx__yellow--d40 {
  color: #443408 !important;
}

.tx__yellow--d30 {
  color: #72570d !important;
}

.tx__yellow--d20 {
  color: #a07a12 !important;
}

.tx__yellow--d10 {
  color: #ce9d17 !important;
}

.tx__yellow {
  color: #e8b730 !important;
}

.tx__yellow--l10 {
  color: #edc75e !important;
}

.tx__yellow--l20 {
  color: #f2d78c !important;
}

.tx__yellow--l30 {
  color: #f7e7ba !important;
}

.tx__yellow--l40 {
  color: #fcf7e8 !important;
}

.tx__orange--d40 {
  color: #442108 !important;
}

.tx__orange--d30 {
  color: #72370d !important;
}

.tx__orange--d20 {
  color: #a04d12 !important;
}

.tx__orange--d10 {
  color: #ce6417 !important;
}

.tx__orange {
  color: #e87d30 !important;
}

.tx__orange--l10 {
  color: #ed9a5e !important;
}

.tx__orange--l20 {
  color: #f2b78c !important;
}

.tx__orange--l30 {
  color: #f7d3ba !important;
}

.tx__orange--l40 {
  color: #fcf0e8 !important;
}

.tx__purple--d40 {
  color: #2a1830 !important;
}

.tx__purple--d30 {
  color: #492853 !important;
}

.tx__purple--d20 {
  color: #673975 !important;
}

.tx__purple--d10 {
  color: #854a97 !important;
}

.tx__purple {
  color: #9f62b2 !important;
}

.tx__purple--l10 {
  color: #b484c3 !important;
}

.tx__purple--l20 {
  color: #c9a6d4 !important;
}

.tx__purple--l30 {
  color: #dec9e4 !important;
}

.tx__purple--l40 {
  color: #f3ebf5 !important;
}

.tx__white {
  color: #fff !important;
}

.tx__black {
  color: #000 !important;
}

.bg__gray--d40 {
  background-color: #000 !important;
}

.bg__gray--d30 {
  background-color: #242424 !important;
}

.bg__gray--d20 {
  background-color: #59595a !important;
}

.bg__gray--d10 {
  background-color: #757576 !important;
}

.bg__gray--d5 {
  background-color: #98989a !important;
}

.bg__gray {
  background-color: #bfbfc0 !important;
}

.bg__gray--l5 {
  background-color: #d6d6d7 !important;
}

.bg__gray--l10 {
  background-color: #e3e3e3 !important;
}

.bg__gray--l20 {
  background-color: #ededee !important;
}

.bg__gray--l30 {
  background-color: whitesmoke !important;
}

.bg__gray--l40 {
  background-color: #fff !important;
}

.bg__red--d40 {
  background-color: #420d0b !important;
}

.bg__red--d30 {
  background-color: #6d1613 !important;
}

.bg__red--d20 {
  background-color: #981e1b !important;
}

.bg__red--d10 {
  background-color: #c42722 !important;
}

.bg__red {
  background-color: #dd413c !important;
}

.bg__red--l10 {
  background-color: #e56b67 !important;
}

.bg__red--l20 {
  background-color: #ec9693 !important;
}

.bg__red--l30 {
  background-color: #f4c0be !important;
}

.bg__red--l40 {
  background-color: #fbeaea !important;
}

.bg__pink--d40 {
  background-color: #3e1329 !important;
}

.bg__pink--d30 {
  background-color: #651f42 !important;
}

.bg__pink--d20 {
  background-color: #8d2a5c !important;
}

.bg__pink--d10 {
  background-color: #b43676 !important;
}

.bg__pink {
  background-color: #cb528f !important;
}

.bg__pink--l10 {
  background-color: #d779a8 !important;
}

.bg__pink--l20 {
  background-color: #e3a0c2 !important;
}

.bg__pink--l30 {
  background-color: #eec8db !important;
}

.bg__pink--l40 {
  background-color: #faeff5 !important;
}

.bg__blue--d40 {
  background-color: #0a1c38 !important;
}

.bg__blue--d30 {
  background-color: #123163 !important;
}

.bg__blue--d20 {
  background-color: #19478f !important;
}

.bg__blue--d10 {
  background-color: #215cba !important;
}

.bg__blue {
  background-color: #3374db !important;
}

.bg__blue--l10 {
  background-color: #5e92e3 !important;
}

.bg__blue--l20 {
  background-color: #8aafea !important;
}

.bg__blue--l30 {
  background-color: #b5cdf2 !important;
}

.bg__blue--l40 {
  background-color: #e0eafa !important;
}

.bg__aqua--d40 {
  background-color: #0f323d !important;
}

.bg__aqua--d30 {
  background-color: #195366 !important;
}

.bg__aqua--d20 {
  background-color: #23748f !important;
}

.bg__aqua--d10 {
  background-color: #2d95b8 !important;
}

.bg__aqua {
  background-color: #46afd2 !important;
}

.bg__aqua--l10 {
  background-color: #6fc1dc !important;
}

.bg__aqua--l20 {
  background-color: #98d2e6 !important;
}

.bg__aqua--l30 {
  background-color: #c1e4f0 !important;
}

.bg__aqua--l40 {
  background-color: #eaf6fa !important;
}

.bg__green--d40 {
  background-color: #0c271d !important;
}

.bg__green--d30 {
  background-color: #194d39 !important;
}

.bg__green--d20 {
  background-color: #257456 !important;
}

.bg__green--d10 {
  background-color: #329a72 !important;
}

.bg__green {
  background-color: #3ec18f !important;
}

.bg__green--l10 {
  background-color: #65cda5 !important;
}

.bg__green--l20 {
  background-color: #8bdabc !important;
}

.bg__green--l30 {
  background-color: #b2e6d2 !important;
}

.bg__green--l40 {
  background-color: #d8f3e9 !important;
}

.bg__yellow--d40 {
  background-color: #443408 !important;
}

.bg__yellow--d30 {
  background-color: #72570d !important;
}

.bg__yellow--d20 {
  background-color: #a07a12 !important;
}

.bg__yellow--d10 {
  background-color: #ce9d17 !important;
}

.bg__yellow {
  background-color: #e8b730 !important;
}

.bg__yellow--l10 {
  background-color: #edc75e !important;
}

.bg__yellow--l20 {
  background-color: #f2d78c !important;
}

.bg__yellow--l30 {
  background-color: #f7e7ba !important;
}

.bg__yellow--l40 {
  background-color: #fcf7e8 !important;
}

.bg__orange--d40 {
  background-color: #442108 !important;
}

.bg__orange--d30 {
  background-color: #72370d !important;
}

.bg__orange--d20 {
  background-color: #a04d12 !important;
}

.bg__orange--d10 {
  background-color: #ce6417 !important;
}

.bg__orange {
  background-color: #e87d30 !important;
}

.bg__orange--l10 {
  background-color: #ed9a5e !important;
}

.bg__orange--l20 {
  background-color: #f2b78c !important;
}

.bg__orange--l30 {
  background-color: #f7d3ba !important;
}

.bg__orange--l40 {
  background-color: #fcf0e8 !important;
}

.bg__purple--d40 {
  background-color: #2a1830 !important;
}

.bg__purple--d30 {
  background-color: #492853 !important;
}

.bg__purple--d20 {
  background-color: #673975 !important;
}

.bg__purple--d10 {
  background-color: #854a97 !important;
}

.bg__purple {
  background-color: #9f62b2 !important;
}

.bg__purple--l10 {
  background-color: #b484c3 !important;
}

.bg__purple--l20 {
  background-color: #c9a6d4 !important;
}

.bg__purple--l30 {
  background-color: #dec9e4 !important;
}

.bg__purple--l40 {
  background-color: #f3ebf5 !important;
}

.bg__white {
  background-color: #fff !important;
}

.bg__black {
  background-color: #000 !important;
}

/** Fixadores **/
.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

/** z-index **/
.zindex-n1 {
  z-index: -1;
}

.zindex-0 {
  z-index: 0;
}

.zindex-1 {
  z-index: 1000;
}

.zindex-2 {
  z-index: 1020;
}

.zindex-3 {
  z-index: 1030;
}

.zindex-4 {
  z-index: 1030;
}

.zindex-5 {
  z-index: 1050;
}

.zindex-6 {
  z-index: 1060;
}

.zindex-7 {
  z-index: 1070;
}

/** Tamanhos (avatares) **/
.avatar {
  border: 1px solid #fff;
  border-radius: 50% !important;
  object-fit: cover;
  object-position: center center;
}

.size-1 {
  width: 1.75rem;
  height: 1.75rem;
}

.size-2 {
  width: 2.25rem;
  height: 2.25rem;
}

.size-3 {
  width: 3.25rem;
  height: 3.25rem;
}

.size-4 {
  width: 5rem;
  height: 5rem;
}

.size-5 {
  width: 7.5rem;
  height: 7.5rem;
}

/** Object-fit **/
.object-cover {
  object-fit: cover;
  object-position: center center;
}

/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/**
 ** Colors adicionais utilizadas no sistema
 **/
/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: String que será dividia
**  $separator: String do separador
*/
/*
** @desc Acrescenta iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Remove iluminação a cor
** @param
**  $color: Cor
**  $amount: Porção de iluminação
*/
/*
** @desc Gera variações de cores
** @param
**  $prop: Propriedade do css que receberá a cor
**  $prefix: Classe que receberá as variações
**
*/
/* tamanhos de modal */
.modal .modal-xxl {
  width: 1140px;
}

.modal .modal-xl {
  width: 1000px;
}

.modal .modal-sm {
  width: 800px;
}

.modal .modal-xs {
  width: 300px;
}

.modal-header,
.modal-footer {
  border-color: whitesmoke;
}

.modal-content {
  border-radius: 8px;
}
.modal-content .spinner-grow-backdrop {
  border-radius: 8px;
}

/* ajuste do tamanho da modal xxl para monitores menores */
@media (max-width: 1024px) {
  .modal .modal-xxl {
    width: 1020px;
  }
}
/*
** @desc Seletor da font e suas propriedades
** @param
**  $prop: Propiedade
**  $variation: Variação da propriedade
**  $hierarchy: Hierarquia da font
*/
/*
** @desc Seletor de cores baseado no padrão de nomenclatura estabelecido na paleta
** @param
**  $color: Nome da cor
**  $variation: Variação da cor
*/
/*
** @desc Divide uma string em um array com base em um separador
** @param
**  $string: Str