/* ////////////////////////////////////////////////////////////////////
*
*  CSS CORE variables
*  CSS CORE global

*  v3.0 - 31 Jan 2022
*  Dev by: Rogério Saraceni
*
* //////////////////////////////////////////////////////////////////// */


/* ////////////////////////////////////////////////////////////////////
*
*  CSS CORE variables
*
* - variables-colors
* - variables default
*
* //////////////////////////////////////////////////////////////////// */

/* --------------------------------------------------------------------
* - variables-colors
* -------------------------------------------------------------------- */
:root {
    --primary: #4095f1;
    --secondary: #A5B5C5;
    --success: #68BB69;
    --danger: #F65F6E;
    --warning: #F8BC34;

    --white: #ffffff;
    --white-hover: #e9e3e3;
    --white-clean: #ffffff;
    --white-clean-hover: #eee7e7;

    --blue: #3498db;
    --blue-hover: #2980b9;
    --blue-clean: #97CDF9;
    --blue-clean-hover: #62B2F3;


    --purple: #9b59b6;
    --purple-hover: #8e44ad;
    --purple-clean: #d19de5;
    --purple-clean-hover: #cb75ec;


    --pink: #e83e8c;
    --pink-hover: #b9286c;
    --pink-clean: #d6a3bb;
    --pink-clean-hover: #db70a2;


    --red: #F65F6E;
    --red-hover: #CC525F;
    --red-clean: #F999A2;
    --red-clean-hover: #D6868D;


    --orange: #f7b84b;
    --orange-hover: #daa344;
    --orange-clean: #f7c691;
    --orange-clean-hover: #d0a87c;


    --yellow: #f9f81a;
    --yellow-hover: #d6d618;
    --yellow-clean: #F2F384;
    --yellow-clean-hover: #d9da72;


    --green: #1abc9c;
    --green-hover: #179f84;
    --green-clean: #55efc4;
    --green-clean-hover: #53e0b8;

    --grey: #6c757d; 
    --grey-hover: #4e5052;
    --grey-clean: #c1c6ca;
    --grey-clean-hover: #abadaf;


    --black: #1D1E1F;
    --black-hover: #000000;
    --black-clean: #3d3d3e;
    --black-clean-hover: #323234;
}

/* --------------------------------------------------------------------
* - variables default
* -------------------------------------------------------------------- */
:root {
    --bg-body-default: #fff;

    --font-size-default: 0.9rem;
    --font-color-default: #67757c;

    --border-color-default: #dee2e6;
    --border-radius-default: 0.75rem;

    --shadow-default: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);

    --transition-hover-default: all .3s ease 0s;

    --popup-bg-default: #fff;
}





/* ////////////////////////////////////////////////////////////////////
*
*  CSS CORE global
* 
* - bg colors
* - breadcrumb
* - cards
* - dropdown-menu
* - links
* - link colors
* - modal
* - shadows
* - table
* - text colors
* - tooltip
* 
* 
* - complementary classes
*
* //////////////////////////////////////////////////////////////////// */

/* --------------------------------------------------------------------
* - bg colors
---------------------------------------------------------------------- */
.bg-white  { background-color: var(--white);}
.bg-blue   { background-color: var(--blue);}
.bg-purple { background-color: var(--purple);}
.bg-pink   { background-color: var(--pink);}
.bg-red    { background-color: var(--red);}
.bg-orange { background-color: var(--orange);}
.bg-yellow { background-color: var(--yellow);}
.bg-green  { background-color: var(--green);}
.bg-grey   { background-color: var(--grey);}
.bg-black  { background-color: var(--black);}

.bg-blue-clean  { background-color: var(--blue-clean);}
.bg-purple-clean{ background-color: var(--purple-clean);}
.bg-pink-clean  { background-color: var(--pink-clean);}
.bg-red-clean   { background-color: var(--red-clean);}
.bg-orange-clean{ background-color: var(--orange-clean);}
.bg-yellow-clean{ background-color: var(--yellow-clean);}
.bg-green-clean { background-color: var(--green-clean);}
.bg-grey-clean  { background-color: var(--grey-clean);}
.bg-black-clean { background-color: var(--black-clean);}


/* --------------------------------------------------------------------
* - breadcrumb
* -------------------------------------------------------------------- */
.breadcrumb {
   padding: 0.25rem 0.5rem;
   margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------
* - cards
---------------------------------------------------------------------- */
.card {
   border: none;
   border-radius: var(--border-radius-default);
}
.card .card-header {
   padding: 15px 15px 0;
   background-color: var(--white);
   border-bottom: none !important;
}
.card .card-footer {
   padding: 15px 15px 10px 15px;
   background-color: transparent;
   line-height: 30px;
   border-top: none !important;
   font-size: 14px;
}
.card .card-footer .legend { padding: 5px 0;}
.card .card-footer hr { margin-top: 5px; margin-bottom: 5px;}

/* --------------------------------------------------------------------
* - dropdown-menu
---------------------------------------------------------------------- */
.dropdown-menu {
   margin: 0;
   font-size: .875rem;
   color: #7b809a;
   text-align: left;
   list-style: none;
   background-color: #fff;
   background-clip: padding-box;
   border: 0 solid transparent;
}
.dropdown-menu-end {
   --bs-position: end;
}
.dropdown .dropdown-menu.dropdown-menu-end {
  right: 0!important;
  left: auto!important;
}
.dropdown .dropdown-menu.dropdown-menu-end:before {
   right: 28px;
   left: auto;
}

@media (max-width: 991.98px){
   .navbar-toggler+.navbar-collapse .dropdown.nav-item .dropdown-menu {
      background-color: transparent;
      overflow: auto;
      position: relative;
   }
   .navbar .navbar-collapse .navbar-nav .dropdown .dropdown-menu {
      box-shadow: none!important;
   }

   .dropdown.nav-item .dropdown-menu-animation.show {
      max-height: 250px;
      opacity: 1;
   }      
}
@media (min-width: 992px){
   .navbar-expand-lg .navbar-toggler {
      display: none;
   }

   .dropdown .dropdown-menu, 
   .dropend .dropdown-menu, 
   .dropstart .dropdown-menu, 
   .dropup .dropdown-menu {
      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
      transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1)!important;
      cursor: pointer;
   }

   .dropdown.dropdown-hover:hover>.dropdown-menu, 
   .dropdown .dropdown-menu.show {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
      transform: scale(1)!important;
   }

   .dropdown.dropdown-hover:hover>.dropdown-menu:before, 
   .dropdown .dropdown-menu.show:before {
      top: -20px;
   }
   .dropdown.dropdown-hover:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -24px;
      width: 100%;
      height: 100%;
   }

   .dropdown.dropdown-hover .dropdown-menu, 
   .dropdown .dropdown-menu {
      opacity: 0;
      transform-origin: 0 0;
      inset: 0 auto auto 0;
      margin-top: 2.2rem!important;
      pointer-events: none;
      transform: scale(.95)!important;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      will-change: transform,box-shadow;
   }

   .dropdown .dropdown-menu:before {
      font-family: bootstrap-icons;
      content: "\f235";      
      position: absolute;
      top: 0;
      left: 28px;
      right: auto;
      font-size: 22px;
      color: #fff;
      transition: top .35s ease;
   }

   .dropdown.dropdown-hover:hover>.dropdown-menu, 
   .dropdown .dropdown-menu.show {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
      transform: scale(1)!important;
   }

   .dropdown-md { min-width: 15rem;}

   .bootstrap-select .dropdown-menu.inner {
      margin-top: 0!important;
   }
}

@media (min-width: 768px){
   .mx-md-4 {
      margin-right: 1.5rem!important;
      margin-left: 1.5rem!important;
   }
}

/* --------------------------------------------------------------------
* - links
* -------------------------------------------------------------------- */
a { transition: var(--transition-hover-default);}

/* --------------------------------------------------------------------
* - link colors
---------------------------------------------------------------------- */
.link-white { color: var(--white);}
.link-blue  { color: var(--blue);}
.link-purple{ color: var(--purple);}
.link-pink  { color: var(--pink);}
.link-red   { color: var(--red);}
.link-orange{ color: var(--orange);}
.link-yellow{ color: var(--yellow);}
.link-green { color: var(--green);}
.link-grey  { color: var(--grey);}
.link-black { color: var(--black);}

.link-white:hover { color: var(--white-hover);}
.link-blue:hover  { color: var(--blue-hover);}
.link-purple:hover{ color: var(--purple-hover);}
.link-pink:hover  { color: var(--pink-hover);}
.link-red:hover   { color: var(--red-hover);}
.link-orange:hover{ color: var(--orange-hover);}
.link-yellow:hover{ color: var(--yellow-hover);}
.link-green:hover { color: var(--green-hover);}
.link-grey:hover  { color: var(--grey-hover);}
.link-black:hover { color: var(--black-hover);}

.link-white-clean  { color: var(--white-hover);}
.link-blue-clean   { color: var(--blue-clean);}
.link-purple-clean { color: var(--purple-clean);}
.link-pink-clean   { color: var(--pink-clean);}
.link-red-clean    { color: var(--red-clean);}
.link-orange-clean { color: var(--orange-clean);}
.link-yellow-clean { color: var(--yellow-clean);}
.link-green-clean  { color: var(--green-clean);}
.link-grey-clean   { color: var(--grey-clean);}
.link-black-clean  { color: var(--black-clean);}

.link-white-clean:hover { color: var(--white-clean-hover);}
.link-blue-clean:hover   { color: var(--blue-clean-hover);}
.link-purple-clean:hover { color: var(--purple-clean-hover);}
.link-pink-clean:hover   { color: var(--pink-clean-hover);}
.link-red-clean:hover    { color: var(--red-clean-hover);}
.link-orange-clean:hover { color: var(--orange-clean-hover);}
.link-yellow-clean:hover { color: var(--yellow-clean-hover);}
.link-green-clean:hover  { color: var(--green-clean-hover);}
.link-grey-clean:hover   { color: var(--grey-clean-hover);}
.link-black-clean:hover  { color: var(--black-clean-hover);}

/* --------------------------------------------------------------------
* - modal
---------------------------------------------------------------------- */
.modal .close{ outline: none;}

/* --------------------------------------------------------------------
* - shadows
* -------------------------------------------------------------------- */
.shadow-default{ box-shadow: var(--shadow-default);}
.shadow { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)!important;}
.shadow-blur { box-shadow: inset 0 0 1px 1px hsla(0,0%,100%,.9),0 20px 27px 0 rgba(0,0,0,.05)!important;}

/* --------------------------------------------------------------------
* - table
* -------------------------------------------------------------------- */
.table {
   --table-bg-color: #fff; 

   --table-th-padding: 4px 3px;
   --table-th-font-color: #fff; 
   --table-th-bg-color: #1980af; 

   --table-padding: 2px 3px;
   --table-border-color: #dee2e6;

   --table-dataTable-th-padding: 4px 18px;
}

.table {
   word-break: break-word;
   font-size: var(--font-size-default);
   color: var(--font-color-default);
   background-color: var(--table-bg-color);
}

.table-fixed { table-layout: fixed;}

.table>thead>tr>th,
.table>thead>tr>td,
.table>tbody>tr>th,
.table>tbody>tr>td,
.table>tfoot>tr>th,
.table>tfoot>tr>td {
   position: relative;
   padding: var(--table-padding);
   vertical-align: middle;
   border-color: var(--table-border-color);
}

.table-bordered td,
.table-bordered th { border-color: var(--table-border-color);}

.table>thead>tr>th,
.table>tfoot>tr>th {
   border-bottom-width: 1px;
   text-align: center;
   font-weight: 400;
   padding: var(--table-th-padding);
   color: var(--table-th-font-color);
   background-color: var(--table-th-bg-color);
}

.table.dataTable>thead>tr>th{ padding: var(--table-dataTable-th-padding);}

.icon-tab   { font-size: 1.3rem;}
.icon-tab-md{ font-size: 1.6rem;}
.icon-tab-lg{ font-size: 1.9rem;}

.icon-tab,
.icon-tab-md,
.icon-tab-lg { color: var(--grey);}

.icon-tab:hover,
.icon-tab-md:hover,
.icon-tab-lg:hover { color: var(--grey-hover);}

table .input-group label.error{ order: 3;}

/* --------------------------------------------------------------------
* - text colors
---------------------------------------------------------------------- */
.text-white { color: var(--white);}
.text-blue  { color: var(--blue);}
.text-purple{ color: var(--purple);}
.text-pink  { color: var(--pink);}
.text-red   { color: var(--red);}
.text-orange{ color: var(--orange);}
.text-yellow{ color: var(--yellow);}
.text-green { color: var(--green);}
.text-grey  { color: var(--grey);}
.text-black { color: var(--black);}

.text-blue-clean  { color: var(--blue-clean);}
.text-purple-clean{ color: var(--purple-clean);}
.text-pink-clean  { color: var(--pink-clean);}
.text-red-clean   { color: var(--red-clean);}
.text-orange-clean{ color: var(--orange-clean);}
.text-yellow-clean{ color: var(--yellow-clean);}
.text-green-clean { color: var(--green-clean);}
.text-grey-clean  { color: var(--grey-clean);}
.text-black-clean { color: var(--black-clean);}

/* --------------------------------------------------------------------
* - tooltip
---------------------------------------------------------------------- */
.bs-tooltip,
.bs-tooltip-top,
.bs-tooltip-bottom,
.bs-tooltip-left,
.bs-tooltip-right{ z-index: 1100;}




/* --------------------------------------------------------------------
* - complementary classes
---------------------------------------------------------------------- */
.border-radius-xl { border-radius: 0.75rem;}
.border-radius-lg { border-radius: 0.5rem;}
.blur {
   box-shadow: inset 0 0 2px #fefefed1;
   -webkit-backdrop-filter: saturate(200%) blur(30px);
   backdrop-filter: saturate(200%) blur(30px);
   background-color: hsla(0,0%,100%,.8)!important;
}
.bg-cover{ background-size: cover;}
.bg-gradient-secondary { background-image: linear-gradient(195deg,#747b8a,#495361);}

.cursor-pointer{ cursor: pointer;}
.cursor-default{ cursor: default;}

.font-100{ font-weight: 100;}
.font-200{ font-weight: 200;}
.font-300{ font-weight: 300;}
.font-400{ font-weight: 400;}
.font-500{ font-weight: 500;}
.font-600{ font-weight: 600;}
.font-700{ font-weight: 700;}
.font-800{ font-weight: 800;}

.flex-1{ flex: 1;}

.min-vh-55 { min-height: 55vh!important;}
.min-vh-75 { min-height: 75vh!important;}

.mt-n5 { margin-top: -3rem!important;}
.mt-n6 { margin-top: -4rem!important;}

.opacity-1 { opacity: .1!important;}
.opacity-2 { opacity: .2!important;}
.opacity-3 { opacity: .3!important;}
.opacity-4 { opacity: .4!important;}
.opacity-5 { opacity: .5!important;}

.text-bold { font-weight: bold;}
.text-left { text-align: left;}
.text-right{ text-align: right;}

.left-0 { left: 0;}
.right-0 { right: 0;}

.z-index-0{ z-index: 0;}
.z-index-1{ z-index: 1;}
.z-index-2{ z-index: 2;}
.z-index-3{ z-index: 3;}
.z-index-4{ z-index: 4;}
.z-index-5{ z-index: 5;}

.z-index-sticky { z-index: 1020;}