/**
* Template Name: NiceAdmin
* Updated: Mar 09 2023 with Bootstrap v5.2.3
* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/




/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;

  /*--------------------------------------------------------------
                             Colors
--------------------------------------------------------------*/
--true-blue: #012970;
--dark-blue: #011e5fdf;
--boostrap-blue: #0D6EFD;


--success : #56b37d;
--warning : #d3c054;
--danger : #c64e4e;

--success-bg : #3d845a;
--warning-bg : #988724;
--danger-bg : #862e2e;

--tx-title: var(--text-blue);

--cust-trans: #ffffff00;
--cust-opacity: #fceed683;
--cust-back-light: #e7f0fff7;
--cust-nav: #f5dcbdf3;
--cust-back-hov: #fef4e6;
--cust-back: #fceed6;
--cust-back2: #fbe2b7;
--cust-back3: #ffe1ac;
--cust-back-border: #f5ead0;
--cust-form-text: #7e7c7a;
--cust-btn-orange: #f58634;
--cust-btn-orange-hov: #ffa636;
--cust-btn-orange-act: #c26a29;
--cust-btn-brown: #e1b694;
--cust-btn-brown-hov: #f0b59e;
--cust-btn-brown-act: #f79973;
--cust-btn-blue: #011e5fdf;
--cust-btn-blue-hov: #032e8bdf;
--cust-btn-blue-act: #011236f1;

--cust-btn-green: #015f17df;
--cust-btn-green-hov: #038b23df;

--cust-text-blue: #011e5fdf;
--cust-title-blue: #012970;
--cust-red: #ac1426;
--cust-dark-red: #811622;
--cust-red-title: #BF1B2D;
--cust-darkest-red: #350a06;
--cust-brown:#9e8448;
--cust-gold:#D8BB78;
--cust-gold-lg:#f9dc98;
--cust-goldest:#e7cb8c;
--cust-dark-gold:#D8BB78;
--cust-grey: #808080;
--cust-dark-grey: #606060;
--cust-light-grey: #ececec;
--cust-path-grey:#899bbd;
--cust-path-grey-bold:#51678f;
--cust-blue-grey:#191e40;
--cust-blue-grey2:#3f5170;
--cust-white: #fbfbffef;
--cust-orange: #d77127;
--cust-light-orange: #ffa636;
--cust-green-title: #40775a;
--cust-black-title: #0d0673;
--cust-menu-item-huv:#ededed;
--cust-menu-item-active:#bec3c7;

--cust-green-table: rgba(31, 200, 127, 0.885);
--cust-yellow-table:rgba(255, 201, 52, 0.885);
--cust-red-table:rgba(210, 29, 29, 0.885);
--cust-green-op: rgba(31, 200, 127, 0.631);
--cust-yellow-op:rgba(255, 201, 52, 0.631);
--cust-red-op:rgba(210, 29, 29, 0.631);
--cust-general-op:rgba(29, 95, 210, 0.67);



--true-blue: #012970;
--dark-blue: #011e5fdf;
--boostrap-blue: #0D6EFD;
--text-blue: #012970;

--dark-red: #350a06;
--light-red: #BF1B2D;

--dark-orange: #d86a1c;
--light-orange: #f58634;

--light-green: #1bbf1b;

--trans-gray:#ffffffe3;

--white: #fbfbffef;

--cust-radial-back: radial-gradient(var(--cust-back),var(--cust-back2),var(--cust-back3));
--cust-radial-login-card: radial-gradient(#fff6e7,#fff6e7,#ffeccb, #ffeac5);
--cust-radial-orange: radial-gradient(#fff6e7,#fff6e7,#ffeccb, #ffd894);
--cust-radial-orange: radial-gradient(#fff6e7,#fff6e7,#ffeccb, #ffe0aa);
--cust-radial-card: radial-gradient(#fbebd7,#ffe9ce, #ffffffc8);
--cust-radial-bw: radial-gradient(#f4f6fe,#f4f6fe, #8e9fffc8);
--cust-radial-menu-item: radial-gradient( #a3252f,#a3252f,#86111a, #820c16);
--cust-radial-menu-item2: radial-gradient( #003ba2,#003ba2,#012970, #011c4b);
--cust-radial-menu-item3: radial-gradient( #012970,#012970, #01235c);

--cust-radial-cristal: radial-gradient(#ecddddda, #ffffffe4);

--cust-radial-blue: radial-gradient( #003ba2,hsl(218, 100%, 32%),#012970, #011c4b);
--cust-radial-ow: radial-gradient(#fbf4e7ed,#fdf4e2ef, #fce1aec8);

--cust-linear-gold: linear-gradient(to bottom, #7d5e21 20%, #e1d19e 60%, #7d5e21 90% );
--cust-linear-silver: linear-gradient(to bottom, #817b6f 20%, #e1d19e 60%, #817b6f 90% );
--cust-linear-blue: linear-gradient(to bottom, #011c4b 20%, #003ba2 60%, #011c4b 90% );
--cust-linear-white: linear-gradient(to bottom, #fafafa 5%, #f1f1f1 60%, #f1f1f1 100% );
--cust-linear-red: linear-gradient(to bottom, #a22332 20%, #d82439 60%, #a22332 90% );
--cust-linear-o-white: linear-gradient(to bottom, #afafaf29 20%, #ffffff49 60%, #afafaf5a 90% );
--cust-linear-green: linear-gradient(to bottom, #001d7b29 20%, #160c8314 60%, #001d7b29 90% );
--cust-linear-green3: linear-gradient(to bottom, #ededed0e 20%, #0c837f14 60%, #007b7723 90% );
--cust-linear-green2: linear-gradient(to bottom, #00514e 20%, #13beb866 60%, #00514e 90% );
--cust-linear-brown: linear-gradient(to bottom, #efd2aff3 20%, #f7e1c6f3 60%, #efd2aff3 90% );
--cust-linear-menu-font: linear-gradient(to bottom, #efd2aff3 20%, #f7e1c6f3 60%, #efd2aff3 90% );



--cust-solid-b: #f3f2ff;
--cust-solid-db: #011c4b;

--btn-alternate:var(--light-red);
--primary-font-color:var(--text-blue);
--primary-comp-color:var(--boostrap-blue);
--primary-bord-color:var(--boostrap-blue);

--hover-item-color: var(--trans-gray);
--border-color: var(--primary-bord-color);

--cust-toggle-bg:var(--white);
--cust-toggle-font-col:var(--primary-font-color);
--cust-toggle-br:var(--primary-bord-color);
--cust-toggle-bt: var(--primary-comp-color);

--drag-container-color:var(--boostrap-blue);
--drag-button-color:var(--boostrap-blue);
--drag-hov-button-color:var(--white);
--drag-font-color:var(--boostrap-blue);
--drag-font-color2:var(--white);

--default-border-container-color:var(--boostrap-blue);

--bnt-color:var(--boostrap-blue);
--btn-font-color:var(--white);
--hover-bnt-color:var(--trans-gray);
--hover-btn-border-color: var(--boostrap-blue);
--hover-btn-font-color:var(--boostrap-blue);

--hexagon-border-color: var(--boostrap-blue);
--hexagon-icon-color: var(--boostrap-blue);

--div-com-bg-color: var(--cust-radial-orange);

--nav-bg:var(--cust-radial-nav-hov);
--nav-items-bg:var(--cust-trans);
--navbar-tabs-color-font:var(--cust-dark-red);
--navbar-tabs-color-font-hov:var(--cust-darkest-red);
--nav-underline-color:var(--cust-darkest-red);
--nav-bottom-bord-col:var(--cust-black-title);
--nav-hr-col:var(--cust-brown);

--tx-title: var(--text-blue);

--page-info-color: var(--cust-btn-blue);
/* --profile-menu-bg: var(--cust-radial-cristal); */
--profile-menu-bg: var(--cust-radial-nav-hov);
--profile-menu-color: var(--cust-black-title);
--secundary-profile-menu-color: var(--cust-path-grey-bold);
/* --profile-menu-item-hover: var(--cust-light-grey); */
--profile-menu-item: var(--cust-btn-blue);
--profile-menu-item-hover: var(--cust-back-light);
--profile-menu-logout: var(--cust-red);
--profile-menu-logout-hover: var(--cust-dark-red);

/* --cust-radial-nav: radial-gradient( #6a111c,#6a111c, #580d16); */
--cust-radial-nav: radial-gradient( #14116a,#14116a, #0d1758);
--cust-radial-nav-hov: radial-gradient( #ffffff,#ffffff, #f4f7f9);
--cust-radial-body: radial-gradient( #ffffff,#ffffff, #f4f7f9, #e9f2fade);

/* Table color styles */
--table-border-color: var(--cust-goldest);
--thead-bg-color: var(--cust-linear-o-white);
--table-th-color: var(--cust-black-title);
--table-tbody-color: var(--cust-black-title);
--table-td-good:var(--cust-green-table);
--table-td-warning:var(--cust-yellow-table);
--table-td-error:var(--cust-red-table);
--table-td-good-hov:var(--cust-green-op);
--table-td-warning-hov:var(--cust-yellow-op);
--table-td-error-hov:var(--cust-red-op);
--table-td-general-hov:var(--cust-general-op);

}

body {
  font-family: "Open Sans", sans-serif;
  background: var(--cust-radial-body);
  color: #444444;
}

a {
  color: #4154f1;
  text-decoration: none;
}

a:hover {
  color: #717ff5;
  text-decoration: none;
}

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

::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb {
  background-color: #011e5fdf;
  /* background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); */
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}
/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
  margin-top: 60px;
  margin-left: 250px;
  padding: 20px 30px;
  transition: all 0.3s;
}

@media (max-width: 1199px) {
  #main {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
                             Alignment, Properties & Order
--------------------------------------------------------------*/
.div_overflow_auto{
  overflow-x: auto;
}

.div_items_center{
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.div_items_right{
  align-items: right;
  display: inline-flex;
  justify-content: right;
}

.div_items_left{
  align-items: left;
  display: inline-flex;
  justify-content: left !important;
}


.cont_margin_3{
  margin: 3% 3%;
}

.cont_padding_3{
  padding: 3% 3%;
}

.cont_padding_0_3{
  padding: 0% 3%;
}

.div_padding_5{
  padding: 5% 5%;
}

.div_padding_13{
  padding: 1% 3%;
}

.div_padding_1{
  padding: 1% 1%;
}

.div_wrap{
  display: flex ;
  flex-wrap: wrap !important;
}

.div_content_field_format div{
  align-items: center;
  display: inline-flex;
  justify-content: center;
  padding: 1% 2%;
}

.hide_col{
  display: none;
}

.table-dark {
  --bs-table-color: #ede5b9;
  --bs-table-bg: #1e2737;
  --bs-table-border-color: #1e2737;
  /* 1B2333 */
}

.table {
  max-width: 100%;
  font-size: 1em;
}

.table td, .table th {
  text-align: center; 
  vertical-align: middle; 
}

.table tr.t-zebra{
  background-color: #dee8ff;
}

.table tr.t-zebra td{
  background-color: hsla(0, 0%, 100%, 0);
}

.btn-alter{
  background-color: var(--btn-alternate) !important;
  width: 100% !important;
}

.table-cell-w-3 th, 
.table-cell-w-3 td {
    width: 33.3% !important;
    text-align: center;
    max-width: 33.3%;
    padding: .5%;
}
/*--------------------------------------------------------------
                             Stylings
--------------------------------------------------------------*/

.btn-primary{
  font-size: 1em !important;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--cust-btn-blue);
  --bs-btn-border-color: var(--cust-btn-blue);
  --bs-btn-hover-color: var(--cust-dark-gold);
  --bs-btn-hover-bg: var(--cust-btn-blue-hov);
  --bs-btn-hover-border-color: var(--cust-dark-gold);

}

.btn-excel{
  font-size: 0.7em;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--cust-btn-green);
  --bs-btn-border-color: var(--cust-btn-green);
  --bs-btn-hover-color: var(--cust-dark-gold);
  --bs-btn-hover-bg: var(--cust-btn-green-hov);
  --bs-btn-hover-border-color: var(--cust-brown);

}

.btn-aux{
  font-size: 0.7em;
  color: var(--cust-btn-blue);
  background-color: var(--white);
  border-color: var(--cust-btn-blue);
  /* --bs-btn-color: var(--cust-btn-blue);
  --bs-btn-bg: var(--white);
  --bs-btn-border-color: var(--cust-btn-blue);
  --bs-btn-hover-color: var(--cust-dark-gold);
  --bs-btn-hover-bg: var(--cust-btn-blue-hov);
  --bs-btn-hover-border-color: var(--cust-dark-gold); */
}

.btn-aux:hover{
  font-size: 0.7em;
  color: var(--cust-dark-gold);
  background-color: var(--cust-btn-blue-hov);
  border-color: var(--cust-btn-blue-hov);
  /* --bs-btn-color: #fff;
  --bs-btn-bg: var(--cust-btn-blue);
  --bs-btn-border-color: var(--cust-btn-blue);
  --bs-btn-hover-color: var(--cust-dark-gold);
  --bs-btn-hover-bg: var(--cust-btn-blue-hov);
  --bs-btn-hover-border-color: var(--cust-dark-gold); */

}


.btn-outline-primary{
  font-size: 0.7em;
  --bs-btn-color: var(--cust-btn-blue);
  --bs-btn-bg: var(--white);
  --bs-btn-border-color: var(--cust-btn-blue);
  --bs-btn-hover-color: var(--cust-dark-gold);
  --bs-btn-hover-bg: var(--cust-btn-blue-hov);
  --bs-btn-hover-border-color: var(--cust-dark-gold);
}

.btn-check+.btn:hover{
  color: var(--cust-dark-gold);
  background-color: var(--cust-btn-blue-hov);
  border-color: var(--cust-btn-blue-hov);
}

.btn-check:checked+.btn, 
.btn.active, .btn.show, 
.btn:first-child:active, 
:not(.btn-check)+.btn:active{
  color: var(--white);
  background-color: var(--cust-btn-blue);
  border-color: var(--cust-btn-blue);
}

/* .collapse-horizontal{
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  animation: normal 9000ms ease-in-out 1;
} */

.collapse-horizontal {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.collapse-horizontal.show {
  opacity: 1;
  transform: translateX(0);
}

/* .collapse-horizontal.show {
  animation: fadeSlideIn .35s ease-out;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
} */

/*--------------------------------------------------------------
                             fields
--------------------------------------------------------------*/
.field-cont{
  padding-right: 1em;
  /* padding-left:  1em; */
  font-size: 1em;
}

.field-cont label{
  height: 2em;
  font-weight: bold;
  color: var(--cust-btn-blue);
}

.field-cont .form-select{
  font-size: 1em !important; 
}

.field-cont .form-select:focus{
  border-color: var(--cust-btn-blue);
  box-shadow: 0 0 0 .15rem var(--cust-btn-blue);
}

.field-name{
  font-size: clamp(10px, .9em,.9em);
  font-weight: 800;
  padding-left: .2em;
  /* padding-top: .2em; */
  padding-bottom: .1em;
  margin: 0;
}

.field-info{
  font-size: clamp(8px, .6em,.6em) !important;
  font-weight: 500;
  padding-left: .2em;
  padding-top: .4em;
  padding-bottom: .1em;
  margin: 0;
}

.field-info-md{
  font-size: clamp(8px, .7em,.7em) !important;
  font-weight: 500;
  padding-left: .2em;
  padding-top: .4em;
  padding-bottom: .1em;
  margin: 0;
}
/* .field-cont .form-select option{
  background-color: var(--cust-btn-blue);
}

.field-cont .form-select option:active{
  background-color: var(--cust-btn-blue);
} */

.field-cont .btn-label{
  /* padding-bottom:  .1em; */
  font-size: .7em;
  border-width: .15em;
  border-radius: 1em;
  --bs-btn-padding-x: .4em;
  --bs-btn-padding-y: 0;
  --bs-btn-font-weight: 700;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--cust-btn-blue);
  --bs-btn-border-color: var(--cust-gold);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--cust-btn-blue-hov);
  --bs-btn-hover-border-color: var(--cust-goldest);
  --bs-btn-focus-shadow-rgb: var(--cust-black-title);
  --bs-btn-active-color: #f4f4f4;
  --bs-btn-active-bg: var(--cust-btn-blue-act);
  --bs-btn-active-border-color: var(--cust-goldest);
}

.form-check-input{
  margin-top: .6em !important;
}

/*--------------------------------------------------------------
                             Login
--------------------------------------------------------------*/

.login-card{
  /* border-radius: 5em; */
  box-shadow: .2em .5em 1em rgba(0, 0, 0, 0.291)!important;
}

.login-card .card-header{
  background: var(--cust-radial-menu-item3);
}

.login-card .card-header span{
  background: var(--cust-radial-menu-item3);
  font-size: 1.5em;
}

.login-card  h6 {
  padding: 20px 0 15px 0;
  font-size: 1.7em;
  font-weight: bold;
  color: var(--cust-red-title);
  /* font-family: "Poppins", sans-serif; */
}


.login-card  label {
  /* padding: 20px 0 15px 0; */
  font-size: 1em;
  font-weight: 600;
  color: #012769;
  /* font-family: "Poppins", sans-serif; */
}

.login-card .card-body span{
  font-size: 1em;
  font-weight: 500;
  color: white;
  background: #012769;
  border-color: #012769;
  /* #E58812; */
}


.login-card  p {
  /* padding: 20px 0 15px 0; */
  font-size: 1em;
  font-weight: 400;
  color: #012769;
  /* font-family: "Poppins", sans-serif; */
}

.login-card  button{
  font-size: .8em;
  font-weight: 600;
  color: var(--cust-white);
  background: #012769;
  border-color: #012769;
  /* #E58812; */
}

.login-card  button:hover{
  font-size: .85em;
  font-weight: 600;
  color: var(--cust-white);
  background: #2C59A8;
  border-color: #2C59A8;
  /* #E58812; */
}

/* ********************************************************** */
/* PAPER */
/* ********************************************************** */

.paper {
    background: #fff;
    padding: 2em 1em;
    position: relative;
    /* z-index: 3; */
  }
  
  .paper,
  .paper::before,
  .paper::after {
    /* Styles to distinguish sheets from one another */
    box-shadow: .2em .2em .2em rgba(0,0,0,0.25);
    border: 1px solid #bbb;
  }
  
  .paper::before,
  .paper::after {
    content: "";
    position: absolute;
    height: 95%;
    width: 99%;
    background-color: var(--cust-back-light);
  }
  
  .paper::before {
    right: 1em;
    top: 0;
    transform: rotate(-1deg);
    z-index: -2;
  }
  
  .paper::after {
    top: .75em;
    right: -.75em;
    transform: rotate(1deg);
    z-index: -1;
  }

  
/*--------------------------------------------------------------
                             Navbar
--------------------------------------------------------------*/

.custom-navbar {
    width: 100%;
    height: 3.8em;
    /* height: clamp(20px, 3.5vmax, 3.5vmax); */
    background: var(--cust-radial-nav);
    box-shadow: 0px .2em 2em rgba(0, 0, 0, 0.291);
    --bs-navbar-padding-y: 0%;
}

.nav-container{
    /* height: clamp(20px, 3vmax, 3vmax); */
    height: 3.8em;
    width: 100% !important;
    /* display: inline-flex; */
    /* flex-wrap: inherit; */
    /* align-items: baseline; */
    padding: 0% 0%;
}

/* .nav-container a{
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: .25em 2rem;
} */

/* .nav-container .nav-menu-bt i{
  font-size: 3em;
  padding: .25em 1em;
} */

.nav-container .logo-nav img {
  height: 2em;
  margin-right: 1em;
}

.nav-container .logo-nav span{
  font-size: 2em;
  font-weight: bold;
  color: var(--cust-white);
  font-style: italic;
}

.header .toggle-sidebar-btn:hover {
  font-size: 2.2em;
  /* padding: 0%; */
  /* height: clamp(12px,2vmax, 2vmax); */
  font-weight: 600;
  color: var(--cust-back-hov)!important;
}

.nav-container .nav-profile i,
.nav-container .nav-menu-bt{
  font-size: 2.2em;
  padding: .35em 1.5rem;
  /* padding-left: .5em;
  padding-right: .5em; */
  /* height: clamp(12px,2vmax, 2vmax); */
  font-weight: 600;
  color: var(--cust-white);
}

/* .nav-container .logo-nav span:hover{
  font-size: 2.1em;
  color: var(--cust-back-hov);
} */

.nav-container .nav-profile i:hover,
.nav-container .nav-menu-bt:hover {
  font-size: 2.2em;
  margin:  0;
  padding: .35em 1.5rem;
  /* padding: 0%; */
  /* height: clamp(12px,2vmax, 2vmax); */
  font-weight: 600;
  color: var(--cust-back-hov) !important;
}


.navbar-toggler{
    padding-left: clamp(1px, 1em,1em);
    --bs-navbar-color: var(--cust-btn-brown);
    --bs-navbar-toggler-border-color:#ffffff00;
    --bs-navbar-toggler-font-size:clamp(12px,2em, 2em);
    --bs-navbar-toggler-focus-width: 0;
}

.navbar-toggler:hover{
    --bs-navbar-color: var(--cust-grey);
    -webkit-transform:                  scale(1.1, 1.1);
    -webkit-transition-timing-function: ease-out;
    -moz-transform:                     scale(1.1, 1.1);
    -moz-transition-timing-function:    ease-out;
    -ms-transform:                      scale(1.1, 1.1);
    -ms-transition-timing-function:     ease-out;
 
    -webkit-transition-duration:        400ms;
    -moz-transition-duration:           400ms;
    -ms-transition-duration:            400ms;
}



/*--------------------------------------------------------------
                             Profile Menu
--------------------------------------------------------------*/


.profile-menu{
    align-items: center;
    font-size: clamp(2px, 1.2vmax,2vmax);
    --bs-offcanvas-width: clamp(50px, 20vmax,20vmax);
    background: var(--profile-menu-bg);
    color: var(--profile-menu-color);
}

.profile-menu ul{
    width: 100%;
    /* padding-left:.5vmax; */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.profile-menu .profile-menu-item{
  color: var(--cust-back);
  background-color: var(--profile-menu-item);
}

.profile-menu .profile-menu-item a{
  color: var(--cust-light-grey) !important;
  padding: .5em .5em;
}

.profile-menu .profile-menu-item:hover{
    background-color: var(--profile-menu-item-hover);
}

.profile-menu .profile-menu-item:hover a{
    color: var(--cust-btn-blue) !important;
}

.profile-menu li{
    /* padding-left:.5vmax; */
    width: 100%;
    display: inline-flex;
}

.profile-menu .hr{
  color: var(--menu-profile-hr);
  border-width: .1vw;
  z-index: 2000;
  border:none;
  height: .2vmax;
 	width: 100%;
	margin: 0;
	border-bottom: 1px solid #1f1209;
	/* box-shadow: 0 1.5vmax 1vmax -1.3vmax #333; */
  /* margin: -50px auto 10px;  */
  /* z-index: 1; */
}

.profile-menu a{
  width: 100%;
  justify-content: left;
  color: var(--profile-menu-color);
  /* font-weight: 900 !important; */
}

/* .profile-menu i{
    padding-right: 2vmax;
} */

.profile-menu .user-photo{
  color: var(--cust-black-title);
  text-align: center;
  font-size: clamp(20px, 8vmax,10vmax);;
}

.profile-menu .logout-div{
  /* width: clamp(50px, 25vmax,25vmax);; */
  /* color: var(--cust-back-light); */
  background-color: var(--profile-menu-logout);
  margin-top: auto;

}
.profile-menu .logout-div a{
  padding: .5em .5em;
  /* width: 100%;
  justify-content: left; */
  color: var(--cust-back) !important;
}

/* .logout-div span{
    color: var(--cust-white);
    --bs-navbar-color: var(--bs-white);
    --bs-offcanvas-color: var(--cust-white);
} */
/* .logout-div i{
    font-weight: bolder;
    padding-left: 1vmax;
} */

.logout-div a:hover{
    background-color: var(--profile-menu-logout-hover);
}
/* .button-nav i{
    height: clamp(12px,2.5vmax, 2.5vmax);
    width: clamp(12px,2.5vw, 2.5vw);
    color: var(--cust-grey);
    padding-left: 5px;
} */


    
/* ********************************************************** */
/* TABLES STYLES */
/* ********************************************************** */

.table-bw{
    width: 96%;
    line-height: 1em;
}

.table-bw th {
    color:#D5DDE5;
    background:#1b1e24;
    border-bottom:.2vmax solid #9ea7af;
    border-right: .1vmax solid #343a45;
    font-size:.8vmax;
    font-weight: 600;
    padding:.5vmax;
    line-height: 1em;
    text-align:center;
    text-shadow: 0 .1vmax .1vmax rgba(0, 0, 0, 0.1);
    vertical-align:middle;
}

.table-bw th:first-child {
    border-top-left-radius:.5vmax;
}

.table-bw th:last-child {
    border-top-right-radius:.5vmax;
    border-right:none;
}

.table-bw tr:last-child td:first-child {
    border-bottom-left-radius:.5vmax;
}

.table-bw tr:last-child td:last-child {
    border-bottom-right-radius:.5vmax;
    border-right:none;
}

.table-bw td {
    background:#FFFFFF;
    padding:.5vmax;
    text-align:center;
    vertical-align:middle;
    font-weight:500;
    font-size:.8vmax;
    text-shadow: -.1vmax -.1vmax .1vmax rgba(0, 0, 0, 0.1);
    border-right: .1vmax solid #C1C3D1;
}

.table-bw td:last-child {
    border-right: 0px;
}

.table-bw tr {
    border-top: 1px solid #C1C3D1;
    border-bottom: 1px solid #C1C3D1;
    color:#666B85;
    font-size:16px;
    font-weight:normal;
    text-shadow: 0 .1vmax .1vmax rgba(256, 256, 256, 0.1);
}

.table-bw tr:hover td {
    background:#4E5066 !important;
    color:#FFFFFF;
    border-top: .1vmax solid #22262e;
}
   
.table-bw tr:first-child {
    border-top:none;
}
  
.table-bw tr:last-child {
    border-bottom:none;
}
   
.table-bw tr:nth-child(odd) td {
    background:#EBEBEB;
}
   
.table-bw tr:nth-child(odd):hover td {
    background:#4E5066;
}

.table-bw .row-good td{
    background: var(--table-td-good) !important;
    color:white;
}

.table-bw .row-warning td{
    background:  var(--table-td-warning) !important; 
}

.table-bw .row-error td{
    background:  var(--table-td-error) !important; 
    color:white;
}

.table-bw .row-good:hover td,
.table-bw .row-warning:hover td, 
.table-bw .row-error:hover td{
    background-color: var(--table-td-general-hov)!important;
    color: var(--cust-blue-grey2);
    /* font-size: .6em;
    font-weight: 700; */
}

/* .table-bw .row-good:nth-child(odd):hover td {
    background: var(--table-td-good-hov)!important;
}

.table-bw .row-warning:nth-child(odd):hover td {
    background: var(--table-td-warning-hov)!important;
}

.table-bw .row-error:nth-child(odd):hover td {
    background: var(--table-td-error-hov)!important;
} */
/*
                             Tables
*/
.modern-blue{
  width: 100%;
  table-layout: fixed;
  border-radius: .6vmax;
  box-shadow: 0 clamp(1px, .2vmax, .2vmax) clamp(1px, 1vmax, 1vmax) rgba(202, 203, 225, 0.849);
  color: #989898;
  font-weight: 400;
  text-align: center;
}

.modern-blue thead{
  background-color: #0b5ed7;
  color: #ecf2ff;
  text-align: center;
  border-radius: .6vmax;
  font-weight: 800;
}

.modern-blue thead th:first-child {
  border-top-left-radius: .6vmax;
}
.modern-blue thead th:last-child {
  border-top-right-radius: .6vmax;
}

.modern-blue tbody{
  word-wrap: break-word;
}

.modern-blue tbody tr:nth-child(even) {
  background-color: #edebfa;
}

.modern-blue th,
.modern-blue td {
  overflow-wrap: break-word;
  white-space: normal;
  /* max-width: 200px; */
}

/*--------------------------------------------------------------
                             Components
--------------------------------------------------------------*/
.default-border-container{
  border: .1vmax solid;
  border-radius: 1vmax;
  border-color: var(--default-border-container-color);
  padding: 1% 1%;
}

.div_round_shadow{
  border-radius: 1vmax;
  box-shadow: 0px .2vmax .6vmax rgba(46, 46, 46, 0.6);
  /* background: var(--cust-radial-menu-item); */
}

.div_item_hov:hover{
  background-color: var(--hover-item-color);
  box-shadow: 0px .2vmax .6vmax rgba(62, 113, 200, 0.868);
}

.hr {
  /* border:none; */
  height: 20px;
 	width: 100%;
	margin-top: 0;
	border-bottom: 1px solid #1f1209;
	box-shadow: 0 20px 20px -20px #333;
  margin: -50px auto 10px; 
}

.card .card-header{
  border-top-right-radius: 1vmax !important;
  border-top-left-radius: 1vmax !important;
}

.file-upload:focus{
  outline: none !important;
  box-shadow: none;
  border: none;
}

.btn-style{
  color: var(--btn-font-color);
  background-color: var(--bnt-color);
  border-radius: 1vmax;
}

.btn-style:hover{
  color: var(--hover-btn-font-color);
  border-color: var(--hover-btn-border-color);
  background-color: var(--hover-btn-color);
}

#chart_cont {
  /* width: 400px !important; */
  /* height: 200px !important; */
  width: 100%;
  height: 10vmax;
}

.canvas_st{
  font-size: 2vmax !important;
}

/*--------------------------------------------------------------
                            Alerts
--------------------------------------------------------------*/

.alert-container{
  width: 100%;
  top:5vmax;
  padding-right: clamp(5px,1vmax,1vmax);
  justify-content: end;
}

.alert-container .alert{
  width: clamp(100px,40%,40%);
  display: inline-flex;
  /* top: 4.5vmax; */
  /* left: 56vw; */
  font-size: clamp(3px, 1vmax,1vmax);
  padding: .2vmax 1vmax;
  margin: 0;
  --bs-alert-border-color:.2vmax;
  --bs-alert-border-radius:.2vmax;
  box-shadow: 0 clamp(1px, .4vmax, .4vmax) clamp(1px, .4vmax, .4vmax) rgb(157, 157, 157) !important;
  animation: growOut 300ms ease forwards;
}

.alert-dismissible .btn-close {
  padding: .5vmax;
  width: 1vmax;
  height: 1vmax;
  position: relative;
}

/*--------------------------------------------------------------
                        TOGGLE
--------------------------------------------------------------*/

.toggle-container input{
  visibility:hidden;
}

.toggle-container{
  height:clamp(8px,3vmax,3vmax);
  margin-bottom: 2vmax;
  background:var(--cust-toggle-bg);
  /* width:clamp(50px,25%,25%); */
  border-radius:10vmax;
  border:.2vmax solid var(--cust-toggle-br);
  position:relative;
  font-size: clamp(1px, .1vw, .1vw);
}

.toggle-container:before{
  content:"Cargar Grupo";
  color:var(--cust-toggle-font-col);
  float:left;
  margin-right:5%;
  padding: 1% 0%;
  font-size: clamp(3px, 1.5vmax, 1vmax);
  font-weight: 600;
}

.toggle-container:after{
  content:"Empleado";
  color:var(--cust-toggle-font-col);;
  float:right;
  margin-left:5%;
  padding: 1% 0%;
  font-size: clamp(3px, 1vmax, 1vmax);
  font-weight: 600;
}

.toggle-container label{
  display:block;
  width:48%;
  height:80%;
  border-radius:10vmax;
  position:absolute;
  background:var(--cust-toggle-bt);
  bottom:10%;
  left:1%;
  -webkit-transition: all 0.75s ease;
  -moz-transition: all 0.75s ease;
  -o-transition: all 0.75s ease;
  -ms-transition: all 0.75s ease;
  transition: all 0.75s ease;
  cursor: pointer;
}

.toggle-container input[type=checkbox]:checked + label {
  transition: transform all .75s ease-in-out;
  transform: translate(105%, 0px);
  background: var(--cust-toggle-bt);
}

/* -------------------------------------------------------------- */

/*--------------------------------------------------------------
                            file download Comps
--------------------------------------------------------------*/
.file-download-container{
  color: var(--drag-container-color);
  border: .2em solid;
  border-color: var(--drag-container-color);
  border-radius: 2em;
  font-weight:900;
}

.file-download-container i{
  font-size: clamp(15px,4vmax,4vmax);
  color: var(--drag-container-color);
}

/*--------------------------------------------------------------
                            drag Comps
--------------------------------------------------------------*/
.drag-container{
  border: .2vmax dashed;
  border-color: var(--drag-container-color);
  /* height: clamp(50px, 20vw, 20vw); */
  height: 100%;
  width: clamp(100px, 30vw, 30vw);
  padding: 1vmax;
  border-radius: 3vmax;
  font-weight:400;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.drag-container.active{
  border: .2vmax solid;
  border-color: var(--drag-container-color);
}

.drag-body{
  font-size: clamp(3px, 1vmax,1vmax);
  color: var(--drag-font-color);
}

.drag-body i{
  font-size: clamp(15px,4vmax,4vmax);
}

.drag-body h6{
  font-size: clamp(5px, 2vmax, 2vmax) !important;
}

.drag-body button{
  width: 60%;
  font-size: 1.5vmax;
  color: var(--drag-font-color2);
  background-color: var(--drag-button-color);
  border-radius: 2vmax;
  border: .2vmax solid;
  border-color: var(--drag-container-color);
  padding: 1%;
  margin-bottom: 2vmax;
}

.drag-body button:hover{
  background-color: var(--drag-hov-button-color);
  color: var(--drag-container-color);
}

.drag-upload{
  font-size: clamp(5px, 2vmax,2vmax);
  color: var(--drag-container-color);
}

.drag-upload i{
  font-size: clamp(15px,4vmax,4vmax);
}

.drag-upload h6{
  /* font-size: clamp(5px, 2vmax, 2vmax) !important; */
  font-size:  .7em !important;
  word-break: break-all;
}

.drag-upload .btn-close{
  width: 1vmax;
  height: 1vmax;
  color: var(--light-red);
  --bs-btn-close-color: var(--light-red) !important;
}

/* -------------------------------------------------------------- */


/*--------------------------------------------------------------
                             Estilos
--------------------------------------------------------------*/

.border-light{
  border: .1em solid #e9e9e9 !important;
  border-radius: .5em;
}

.text_info{
  font-size: 1vmax;
  font-weight: bold;
}

.text_title{
  font-size: 2vmax;
  font-weight: 900;
  color: var(--tx-title);
}

.no_margin{
  margin: 0 !important;
}

.no_padding{
  padding: 0 !important;
}

.padding_item{
  padding: 1%;
}

.right_padding{
  padding-right: 5%;
}

.icon_sm{
  font-size: 12px;
}

.icon_md_dnm{
  font-size: 4vmax;
}

.icon_lg{
  font-size: 55px;
}
.margin_item{
  margin: 2%;
}

.icon_color_1{
  color: var(--dark-blue);
}
.icon_color_2{
  color: var(--dark-orange);
}

.icon_color_3{
  color: var(--dark-red);
}

.success_color{
  color: var(--light-green);
}

.danger_color{
  color: var(--light-red);
}

.border_group{
  border-color:var(--border-color);
  /* border-width: .2vmax; */
  border-radius: 1vmax;
  box-shadow: 0px 0vmax .2vmax var(--border-color);
}

.div_pointer{
  cursor: pointer;
}

.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}
/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
  margin-bottom: 10px;
}

.pagetitle h1 {
  font-size: 24px;
  margin-bottom: 0;
  font-weight: 600;
  color: #012970;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: #4154f1;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #6776f4;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
  border-radius: 4px;
  padding: 10px 0;
  animation-name: dropdown-animate;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  border: 0;
  box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
  text-align: center;
  font-size: 15px;
  padding: 10px 25px;
}

.dropdown-menu .dropdown-footer a {
  color: #444444;
  text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover {
  text-decoration: none;
}

.dropdown-menu .dropdown-divider {
  color: #a5c5fe;
  margin: 0;
}

.dropdown-menu .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.dropdown-menu .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #f6f9ff;
}

@media (min-width: 768px) {
  .dropdown-menu-arrow::before {
    content: "";
    width: 13px;
    height: 13px;
    background: #fff;
    position: absolute;
    top: -7px;
    right: 20px;
    transform: rotate(45deg);
    border-top: 1px solid #eaedf1;
    border-left: 1px solid #eaedf1;
  }
}

@keyframes dropdown-animate {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

  0% {
    opacity: 0;
  }
}

/* Light Backgrounds */
.bg-primary-light {
  background-color: #cfe2ff;
  border-color: #cfe2ff;
}

.bg-secondary-light {
  background-color: #e2e3e5;
  border-color: #e2e3e5;
}

.bg-success-light {
  background-color: var(--success-bg) !important;
  /* border-color: #d1e7dd !important; */
}

.bg-danger-light {
  background-color: var(--danger-bg) !important;
  /* border-color: #f8d7da !important; */
}

.bg-warning-light {
  background-color: var(--warning-bg) !important;
  /* border-color: #fff3cd !important; */
}

.bg-info-light {
  background-color: #cff4fc;
  border-color: #cff4fc;
}

.bg-dark-light {
  background-color: #d3d3d4;
  border-color: #d3d3d4;
}

.no-cell-background td{
  background-color: transparent !important;
  border-color: #3e4f6f !important;
}


.cl-success-td {
  color: var(--success) !important;
  font-weight: bold !important;
  /* border-color: #d1e7dd !important; */
}

.cl-danger-td{
  color: var(--danger) !important;
  font-weight: bold !important;
  /* border-color: #f8d7da !important; */
}

.cl-warning-td{
  color: var(--warning) !important;
  font-weight: bold !important;
  /* border-color: #fff3cd !important; */
}

.cl-blue-td{
  color: var(--true-blue) !important;
  font-weight: bold !important;
}


/* Card */
.card {
  border-radius: 1em !important;
  /* z-index: 0; */
  margin-bottom: 3em;
  border: none;
  box-shadow: 0em 0 1em rgba(1, 41, 112, 0.1);
  backdrop-filter: blur(1em);
}

.card-header,
.card-footer {
  border-color: #ebeef4;
  background-color: #fff;
  color: #798eb3;
  padding: 15px;
}

.card-title {
  padding: 20px 0 15px 0;
  font-size: 18px;
  font-weight: 500;
  color: #012970;
  font-family: "Poppins", sans-serif;
}

.card-title span {
  color: #899bbd;
  font-size: 14px;
  font-weight: 400;
}

.card-body {
  padding: 0 20px 20px 20px;
}

.card-img-overlay {
  background-color: rgba(255, 255, 255, 0.6);
}

/* Alerts */
.alert-heading {
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
}

/* Close Button */
.btn-close {
  background-size: 1vmax;
}

.btn-close:focus {
  outline: 0;
  box-shadow: none;
}

/* Accordion */
.accordion-item {
  border: 1px solid #ebeef4;
}

.accordion-button:focus {
  outline: 0;
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: #012970;
  background-color: #f6f9ff;
}

.accordion-flush .accordion-button {
  padding: 15px 0;
  background: none;
  border: 0;
}

.accordion-flush .accordion-button:not(.collapsed) {
  box-shadow: none;
  color: #4154f1;
}

.accordion-flush .accordion-body {
  padding: 0 0 15px 0;
  color: #3e4f6f;
  font-size: 15px;
}

/* Breadcrumbs */
.breadcrumb {
  font-size: 0.8em !important;
  font-family: "Nunito", sans-serif;
  color: #899bbd;
  font-weight: 600;
  background: transparent !important;
  padding-left: 1.5em !important;
}

.breadcrumb a {
  color: #899bbd;
  transition: 0.3s;
}

.breadcrumb a:hover {
  color: #51678f;
}

.breadcrumb .breadcrumb-item::before {
  color: #899bbd;
}

.breadcrumb .active {
  color: #51678f;
  font-weight: 600;
}

/* Bordered Tabs */
.nav-tabs-bordered {
  border-bottom: 2px solid #ebeef4;
}

.nav-tabs-bordered .nav-link {
  margin-bottom: -2px;
  border: none;
  color: #2c384e;
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
  color: #4154f1;
}

.nav-tabs-bordered .nav-link.active {
  background-color: #fff;
  color: #4154f1;
  border-bottom: 2px solid #4154f1;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.logo {
  line-height: 1;
}

@media (min-width: 1200px) {
  .logo {
    width: 220px;
  }
}

.logo img {
  max-height: 26px;
  margin-right: 6px;
}

.logo span {
  font-size: 26px;
  font-weight: 700;
  color: #012970;
  font-family: "Nunito", sans-serif;
 
}


.header {
  transition: all 0.5s;
  z-index: 997;
  height: 55px;
  box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
  background-color: #fff;
  padding-left: 20px;
  /* Toggle Sidebar Button */
  /* Search Bar */
}

.header .toggle-sidebar-btn {
  font-size: 32px;
  padding-left: 10px;
  cursor: pointer;
  color: #012970;
}

.header .search-bar {
  min-width: 360px;
  padding: 0 20px;
}

@media (max-width: 1199px) {
  .header .search-bar {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    padding: 20px;
    box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1);
    background: white;
    z-index: 9999;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
  }

  .header .search-bar-show {
    top: 60px;
    visibility: visible;
    opacity: 1;
  }
}

.header .search-form {
  width: 100%;
}

.header .search-form input {
  border: 0;
  font-size: 14px;
  color: #012970;
  border: 1px solid rgba(1, 41, 112, 0.2);
  padding: 7px 38px 7px 8px;
  border-radius: 3px;
  transition: 0.3s;
  width: 100%;
}

.header .search-form input:focus,
.header .search-form input:hover {
  outline: none;
  box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
  border: 1px solid rgba(1, 41, 112, 0.3);
}

.header .search-form button {
  border: 0;
  padding: 0;
  margin-left: -30px;
  background: none;
}

.header .search-form button i {
  color: #012970;
}

/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
  list-style: none;
}

.header-nav > ul {
  margin: 0;
  padding: 0;
}

.header-nav .nav-icon {
  font-size: 22px;
  color: #012970;
  margin-right: 25px;
  position: relative;
}

.header-nav .nav-profile {
  color: #012970;
}

.header-nav .nav-profile img {
  max-height: 36px;
}

.header-nav .nav-profile span {
  font-size: 14px;
  font-weight: 600;
}

.header-nav .badge-number {
  position: absolute;
  inset: -2px -5px auto auto;
  font-weight: normal;
  font-size: 12px;
  padding: 3px 6px;
}

.header-nav .notifications {
  inset: 8px -15px auto auto !important;
}

.header-nav .notifications .notification-item {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  transition: 0.3s;
}

.header-nav .notifications .notification-item i {
  margin: 0 20px 0 10px;
  font-size: 24px;
}

.header-nav .notifications .notification-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}

.header-nav .notifications .notification-item p {
  font-size: 13px;
  margin-bottom: 3px;
  color: #919191;
}

.header-nav .notifications .notification-item:hover {
  background-color: #f6f9ff;
}

.header-nav .messages {
  inset: 8px -15px auto auto !important;
}

.header-nav .messages .message-item {
  padding: 15px 10px;
  transition: 0.3s;
}

.header-nav .messages .message-item a {
  display: flex;
}

.header-nav .messages .message-item img {
  margin: 0 20px 0 10px;
  max-height: 40px;
}

.header-nav .messages .message-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #444444;
}

.header-nav .messages .message-item p {
  font-size: 13px;
  margin-bottom: 3px;
  color: #919191;
}

.header-nav .messages .message-item:hover {
  background-color: #f6f9ff;
}

.header-nav .profile {
  min-width: 240px;
  padding-bottom: 0;
  top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
  font-size: 18px;
  margin-bottom: 0;
  font-weight: 600;
  color: #444444;
}

.header-nav .profile .dropdown-header span {
  font-size: 14px;
}

.header-nav .profile .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.header-nav .profile .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.header-nav .profile .dropdown-item:hover {
  background-color: #f6f9ff;
}

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
  position: fixed;
  top: 55px;
  left: 0;
  bottom: 0;
  width: 250px;
  z-index: 996;
  transition: all 0.3s;
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #aab7cf transparent;
  box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
  background-color: #fff;
}



.sidebar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #aab7cf;
}


@media (max-width: 1199px) {
  .sidebar {
    left: 0px;
  }
}

@media (max-width: 1199px) {
  .toggle-sidebar .sidebar {
    left: 300;
  }
}
/* 
@media (min-width: 1200px) {
  #main,
  #footer {
    margin-left: 250px;
  }
}

@media (min-width: 1200px) {
  .toggle-sidebar #main, 
  .toggle-sidebar #footer {
    margin-left: 0;
  }

  .toggle-sidebar .sidebar {
    left: -300px;
  }
} */

.sidebar-nav {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav .nav-item {
  margin-bottom: 5px;
}

.sidebar-nav .nav-heading {
  font-size: 11px;
  text-transform: uppercase;
  color: #899bbd;
  font-weight: 600;
  margin: 10px 0 5px 15px;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #4154f1;
  transition: 0.3;
  background: #f6f9ff;
  padding: 10px 15px;
  border-radius: 4px;
}

.sidebar-nav .nav-link i {
  font-size: 16px;
  margin-right: 10px;
  color: #4154f1;
}

.sidebar-nav .nav-link.collapsed {
  color: #012970;
  background: #fff;
}

.sidebar-nav .nav-link.collapsed i {
  color: #899bbd;
}

.sidebar-nav .nav-link:hover {
  color: #4154f1;
  background: #f6f9ff;
}

.sidebar-nav .nav-link:hover i {
  color: #4154f1;
}

.sidebar-nav .nav-link .bi-chevron-down {
  margin-right: 0;
  transition: transform 0.2s ease-in-out;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

.sidebar-nav .nav-content {
  padding: 5px 0 0 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav .nav-content a {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #012970;
  transition: 0.3;
  padding: 10px 0 10px 40px;
  transition: 0.3s;
}

.sidebar-nav .nav-content a i {
  font-size: 6px;
  margin-right: 8px;
  line-height: 0;
  border-radius: 50%;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  color: #4154f1;
}

.sidebar-nav .nav-content a.active i {
  background-color: #4154f1;
}
/*--------------------------------------------------------------
# sidebar2
--------------------------------------------------------------*/
.sidebar2 {
  position: fixed;
  top: 55px;
  left: 0;
  bottom: 0;
  width: 250px;
  z-index: 996;
  transition: all 0.3s;
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #aab7cf transparent;
  box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
  background-color: #fff;
}

@media (max-width: 1199px) {
  .sidebar2 {
    left: -300px;
  }
}

.sidebar2::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #fff;
}

.sidebar2::-webkit-scrollbar-thumb {
  background-color: #aab7cf;
}

/* @media (min-width: 1200px) {
  #main,
  #footer {
    margin-left: 250px;
  }
} */

@media (max-width: 1199px) {
  .toggle-sidebar2 .sidebar2 {
    left: 0;
  }
}

/* @media (min-width: 1200px) {
  .toggle-sidebar2 #main,
  .toggle-sidebar2 #footer {
    margin-left: 0;
  }

  .toggle-sidebar2 .sidebar2 {
    left: -300px;
  }
} */

.sidebar-nav2 {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav2 li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav2 .nav-item {
  margin-bottom: 5px;
}

.sidebar-nav2 .nav-heading {
  font-size: 11px;
  text-transform: uppercase;
  color: #899bbd;
  font-weight: 600;
  margin: 10px 0 5px 15px;
}

.sidebar-nav2 .nav-link {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #4154f1;
  transition: 0.3;
  background: #f6f9ff;
  padding: 10px 15px;
  border-radius: 4px;
}

.sidebar-nav2 .nav-link i {
  font-size: 16px;
  margin-right: 10px;
  color: #4154f1;
}

.sidebar-nav2 .nav-link.collapsed {
  color: #012970;
  background: #fff;
}

.sidebar-nav2 .nav-link.collapsed i {
  color: #899bbd;
}

.sidebar-nav2 .nav-link:hover {
  color: #4154f1;
  background: #f6f9ff;
}

.sidebar-nav2 .nav-link:hover i {
  color: #4154f1;
}

.sidebar-nav2 .nav-link .bi-chevron-down {
  margin-right: 0;
  transition: transform 0.2s ease-in-out;
}

.sidebar-nav2 .nav-link:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

.sidebar-nav2 .nav-content {
  padding: 5px 0 0 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav2 .nav-content a {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #012970;
  transition: 0.3;
  padding: 10px 0 10px 40px;
  transition: 0.3s;
}

.sidebar-nav2 .nav-content a i {
  font-size: 6px;
  margin-right: 8px;
  line-height: 0;
  border-radius: 50%;
}

.sidebar-nav2 .nav-content a:hover,
.sidebar-nav2 .nav-content a.active {
  color: #4154f1;
}

.sidebar-nav2 .nav-content a.active i {
  background-color: #4154f1;
}

/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/
/* Filter dropdown */
.dashboard .filter {
  position: absolute;
  right: 0px;
  top: 15px;
}

.dashboard .filter .icon {
  color: #aab7cf;
  padding-right: 20px;
  padding-bottom: 5px;
  transition: 0.3s;
  font-size: 16px;
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
  color: #4154f1;
}

.dashboard .filter .dropdown-header {
  padding: 8px 15px;
}

.dashboard .filter .dropdown-header h6 {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #aab7cf;
  margin-bottom: 0;
  padding: 0;
}

.dashboard .filter .dropdown-item {
  padding: 8px 15px;
}

/* Info Cards */
.dashboard .info-card {
  padding-bottom: 10px;
}

.dashboard .info-card h6 {
  font-size: 28px;
  color: #012970;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

.dashboard .card-icon {
  font-size: 32px;
  line-height: 0;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  flex-grow: 0;
}

.dashboard .sales-card .card-icon {
  color: #4154f1;
  background: #f6f6fe;
}

.dashboard .revenue-card .card-icon {
  color: #2eca6a;
  background: #e0f8e9;
}

.dashboard .customers-card .card-icon {
  color: #ff771d;
  background: #ffecdf;
}

/* Activity */
.dashboard .activity {
  font-size: 14px;
}

.dashboard .activity .activity-item .activite-label {
  color: #888;
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  min-width: 64px;
}

.dashboard .activity .activity-item .activite-label::before {
  content: "";
  position: absolute;
  right: -11px;
  width: 4px;
  top: 0;
  bottom: 0;
  background-color: #eceefe;
}

.dashboard .activity .activity-item .activity-badge {
  margin-top: 3px;
  z-index: 1;
  font-size: 11px;
  line-height: 0;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid #fff;
  flex-grow: 0;
}

.dashboard .activity .activity-item .activity-content {
  padding-left: 10px;
  padding-bottom: 20px;
}

.dashboard .activity .activity-item:first-child .activite-label::before {
  top: 5px;
}

.dashboard .activity .activity-item:last-child .activity-content {
  padding-bottom: 0;
}

/* News & Updates */
.dashboard .news .post-item + .post-item {
  margin-top: 15px;
}

.dashboard .news img {
  width: 80px;
  float: left;
  border-radius: 5px;
}

.dashboard .news h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
  margin-bottom: 5px;
}

.dashboard .news h4 a {
  color: #012970;
  transition: 0.3s;
}

.dashboard .news h4 a:hover {
  color: #4154f1;
}

.dashboard .news p {
  font-size: 14px;
  color: #777777;
  margin-left: 95px;
}

/* Recent Sales */
.dashboard .recent-sales {
  font-size: 14px;
}

.dashboard .recent-sales .table thead {
  background: #f6f6fe;
}

.dashboard .recent-sales .table thead th {
  border: 0;
}

.dashboard .recent-sales .dataTable-top {
  padding: 0 0 10px 0;
}

.dashboard .recent-sales .dataTable-bottom {
  padding: 10px 0 0 0;
}

/* Top Selling */
.dashboard .top-selling {
  font-size: 14px;
}

.dashboard .top-selling .table thead {
  background: #f6f6fe;
}

.dashboard .top-selling .table thead th {
  border: 0;
}

.dashboard .top-selling .table tbody td {
  vertical-align: middle;
}

.dashboard .top-selling img {
  border-radius: 5px;
  max-width: 60px;
}

/*--------------------------------------------------------------
# Icons list page
--------------------------------------------------------------*/
.iconslist {
  display: grid;
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  padding-top: 15px;
}

.iconslist .icon {
  background-color: #fff;
  border-radius: 0.25rem;
  text-align: center;
  color: #012970;
  padding: 15px 0;
}

.iconslist i {
  margin: 0.25rem;
  font-size: 2.5rem;
}

.iconslist .label {
  font-family: var(--bs-font-monospace);
  display: inline-block;
  width: 100%;
  overflow: hidden;
  padding: 0.25rem;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #666;
}

/*--------------------------------------------------------------
# Profie Page
--------------------------------------------------------------*/
.profile .profile-card img {
  max-width: 120px;
}

.profile .profile-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: #2c384e;
  margin: 10px 0 0 0;
}

.profile .profile-card h3 {
  font-size: 18px;
}

.profile .profile-card .social-links a {
  font-size: 20px;
  display: inline-block;
  color: rgba(1, 41, 112, 0.5);
  line-height: 0;
  margin-right: 10px;
  transition: 0.3s;
}

.profile .profile-card .social-links a:hover {
  color: #012970;
}

.profile .profile-overview .row {
  margin-bottom: 20px;
  font-size: 15px;
}

.profile .profile-overview .card-title {
  color: #012970;
}

.profile .profile-overview .label {
  font-weight: 600;
  color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit label {
  font-weight: 600;
  color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit img {
  max-width: 120px;
}

/*--------------------------------------------------------------
# F.A.Q Page
--------------------------------------------------------------*/
.faq .basic h6 {
  font-size: 18px;
  font-weight: 600;
  color: #4154f1;
}

.faq .basic p {
  color: #6980aa;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
  padding: 28px 30px;
}

.contact .info-box i {
  font-size: 38px;
  line-height: 0;
  color: #4154f1;
}

.contact .info-box h3 {
  font-size: 20px;
  color: #012970;
  font-weight: 700;
  margin: 20px 0 10px 0;
}

.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  border-radius: 0;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: #4154f1;
}

.contact .php-email-form input {
  padding: 10px 15px;
}

.contact .php-email-form textarea {
  padding: 12px 15px;
}

.contact .php-email-form button[type="submit"] {
  background: #4154f1;
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type="submit"]:hover {
  background: #5969f3;
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/
.error-404 {
  padding: 30px;
}

.error-404 h1 {
  font-size: 180px;
  font-weight: 700;
  color: #4154f1;
  margin-bottom: 0;
  line-height: 150px;
}

.error-404 h2 {
  font-size: 24px;
  font-weight: 700;
  color: #012970;
  margin-bottom: 30px;
}

.error-404 .btn {
  background: #51678f;
  color: #fff;
  padding: 8px 30px;
}

.error-404 .btn:hover {
  background: #3e4f6f;
}

@media (min-width: 992px) {
  .error-404 img {
    max-width: 50%;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  padding: 20px 0;
  font-size: 14px;
  transition: all 0.3s;
  border-top: 1px solid #cddfff;
}

.footer .copyright {
  text-align: center;
  color: #012970;
}

.footer .credits {
  padding-top: 5px;
  text-align: center;
  font-size: 13px;
  color: #012970;
}
/*-------------------------------------------------------------
estilo de select con check
*/
.multiselect {
  width: 200px;
  position:relative;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: block;
  border: 1px #dadada solid;
  position:absolute;
  width:100%;
  background-color:white;
  box-sizing: border-box;
  overflow-y:auto;
  max-height:110px;
}
#checkboxes.hide {display:none;}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

.multiselect {
  width: 100%;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#mySelectOptions {
  display: none;
  border: 0.5px #7c7c7c solid;
  background-color: #ffffff;
  max-height: 150px;
  overflow-y: scroll;
}

#mySelectOptions label {
  display: block;
  font-weight: normal;
  display: block;
  white-space: nowrap;
  min-height: 1.2em;
  background-color: #ffffff00;
  padding: 0 2.25rem 0 .75rem;
  /* padding: .375rem 2.25rem .375rem .75rem; */
}

#mySelectOptions label:hover {
  background-color: #1e90ff;
}

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

.red {
  background-color: red !important;
}

.btn
{
  font-size: 0.9em;
}

.tabla-scroll {
  overflow-x: auto;   /* activa scroll horizontal */
  overflow-y: hidden; /* opcional, oculta scroll vertical */
}



/*--------------------------------------------------------------
# Pro Tabs
--------------------------------------------------------------*/

.pro-tabs{
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  /* background: white; */
  padding: 50px;
  padding-bottom: 80px;
  width: 70%;
  height: 250px;
  /* box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); */
  /* border-radius: 5px; */
  /* min-width: #{$tab-count * 60px}; */
}

.pro-tabs input[name="tab-control"] {
  display: none;
}

.pro-tabs ul {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}
.pro-tabs ul li {
  box-sizing: border-box;
  flex: 1;
  /* width: #{100%/$tab-count}; */
  padding: 0 10px;
  text-align: center;
}

.pro-tabs ul label {
  transition: all 0.3s ease-in-out;
  /* color: $secondary; */
  padding: 5px auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  -webkit-touch-callout: none;
  /* @include user-select(none); */
}

.pro-tabs ul br {
  display: none;
}
      
.pro-tabs ul svg {
  /* fill: $secondary; */
  height: 1.2em;
  vertical-align: bottom;
  margin-right: 0.2em;
  transition: all 0.2s ease-in-out;
}
      
.pro-tabs:hover,
.pro-tabs:focus,
.pro-tabs:active {
        outline: 0;
        /* color: lighten($secondary, 15%); */
}

/* .pro-tabs:hover svg,
.pro-tabs:focus svg,
.pro-tabs:active svg {
  fill: lighten($secondary, 15%);
} */
      
.slider {
  position: relative;
  /* width: #{100%/$tab-count}; */
  transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}

.slider .indicator {
  position: relative;
  /* width: $indicator-width; */
  max-width: 100%;
  margin: 0 auto;
  /* height: $indicator-height;
  background: $accent; */
  border-radius: 1px;     
}

.slider .content {
  margin-top: 30px;
}

.slider section {
  display: none;
  animation: normal 300ms ease-in-out 1;
  line-height: 1.4;
}

.slider section h2 {
  /* color: $accent; */
  display: none;
}

.slider section::after {
  content: "";
  position: relative;
  display: block;
  width: 30px;
  height: 3px;
  /* background: $accent; */
  margin-top: 5px;
  left: 1px;
}


/*--------------------------------------------------------------
# Hexagonal Menu
--------------------------------------------------------------*/
.hexagon-menu {
  display: flex;
  justify-content: center;
}

.hexagon-item {
  cursor: pointer;
  width: 5.9em;
  height: 7.5em;
  float: left;
  /* margin-left: -2em; */
  z-index: 0;
  position: relative;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg); 
}

.hexagon-item:hover {
  z-index: 1; 
}

.hexagon-item:hover .hex-item:last-child {
  opacity: 1;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(.51); 
}

.hexagon-item:hover .hex-item:first-child {
  opacity: 1;
  -webkit-transform:  scale(.9);
  -moz-transform:     scale(.9);
  -ms-transform:      scale(.9);
  -o-transform:       scale(.9);
  transform:          scale(.9);
} 

.hexagon-item:hover .hex-item:first-child div:before,
.hexagon-item:hover .hex-item:first-child div:after {
  height: .1em; 
}

.hexagon-item:hover .hex-item div::before,
.hexagon-item:hover .hex-item div::after {
  background-color: var(--cust-gold); 
}

.hexagon-item:hover .hex-content svg {
  -webkit-transform: scale(0.97);
  -moz-transform: scale(0.97);
  -ms-transform: scale(0.97);
  -o-transform: scale(0.97);
  transform: scale(0.97); 
}

/* .hexagon-item:nth-last-child(1),
.hexagon-item:nth-last-child(2),
.hexagon-item:nth-last-child(3) {
  -webkit-transform:  rotate(30deg) translate(4.45em, -5.25em);
  -moz-transform:     rotate(30deg) translate(4.45em, -5.25em);
  -ms-transform:      rotate(30deg) translate(4.45em, -5.25em);
  -o-transform:       rotate(30deg) translate(4.45em, -5.25em);
  transform:          rotate(30deg) translate(4.45em, -5.25em);
} */

.hex-item {
  position: absolute;
  top: 0;
  left: 2em;
  width: 3em;
  height: 5em; 
}

.hex-item:first-child {
  z-index: 1;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
}

.hex-item:last-child {
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 1; 
}

.hex-item div {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  width: 3.45em;
  height: 6em; 
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center; 
}

.hex-item div::before, .hex-item div::after {
  background-color: #1e2530;
  content: "";
  position: absolute;
  width: 100%;
  height: .1em;
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; 
}

.hex-item div:before {
  top: 0; 
}

.hex-item div:after {
  bottom: 0; 
}

.hex-item div:nth-child(1) {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg); 
}

.hex-item div:nth-child(2) {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg); 
}

.hex-item div:nth-child(3) {
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg); 
}

.hex-content {
  color: #fff;
  display: block;
  width: 3.7em;
  height: 6em;
  margin: 0 auto;
  position: relative;
  text-align: center;
  transform: rotate(-30deg);
  z-index: 999;
}

.hex-content .hex-content-inner {
  left: 2.5em;
  margin: 0em 0 0 0em;
  position: absolute;
  top: 3.1em;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); 
}

.hex-content .icon {
  display: block;
  font-size: 1.2em;
  line-height: 0;
  margin-bottom: .1em; 
}

.hex-content .title {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: .6em;
  letter-spacing: .1em ;
  line-height: 2em;
  text-transform: uppercase; }

.hex-content svg {
  left: -0.5em;
  position: absolute;
  top: -0.12em;
  transform: scale(0.87);
  z-index: -1;
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; }

.hex-content:hover {
  color: #fff; 
}

/* .hexagon-item:nth-last-child(1), .hexagon-item:nth-last-child(2), .hexagon-item:nth-last-child(3) {
    -webkit-transform:  rotate(30deg) translate(4.45em, -5.25em);
    -moz-transform:     rotate(30deg) translate(4.45em, -5.25em);
    -ms-transform:      rotate(30deg) translate(4.45em, -5.25em);
    -o-transform:       rotate(30deg) translate(4.45em, -5.25em);
    transform:          rotate(30deg) translate(4.45em, -5.25em);
} */



@media (min-width: 1200px)
{
.col-lg-offset-2 {
    margin-left: 16.66666667%;
}
}

@media (min-width: 1200px)
{
.col-lg-8 {
    width: 66.66666667%;
}
}

/* .hexagon-item:first-child {
    margin-left: 12em;
} */

.hexagon-item:hover .icon i
{
  color: var(--cust-gold);
  transition:0.6s;  
}

.hexagon-item:hover .title
{
  color: var(--cust-gold);
  -webkit-animation: focus-in-contract 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: focus-in-contract 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/***************************/

@-webkit-keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}


@media only screen and (max-width: 767px)
{
.hexagon-item {
    float: none;
    margin: 0 auto 50px;
}
  .hexagon-item:first-child {
    margin-left: auto;
}
  
  .page-home .hexagon-item:nth-last-child(1), .page-home .hexagon-item:nth-last-child(2), .page-home .hexagon-item:nth-last-child(3) {
    -webkit-transform: rotate(30deg) translate(0px, 0px);
    -moz-transform: rotate(30deg) translate(0px, 0px);
    -ms-transform: rotate(30deg) translate(0px, 0px);
    -o-transform: rotate(30deg) translate(0px, 0px);
    transform: rotate(30deg) translate(0px, 0px);
}
  
}

/***************************/

@-webkit-keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

/* @media only screen and (max-width: 767px){

  
   .hexagon-item:nth-last-child(1), .hexagon-item:nth-last-child(2), .hexagon-item:nth-last-child(3) {
    -webkit-transform: rotate(30deg) translate(0px, 0px);
    -moz-transform: rotate(30deg) translate(0px, 0px);
    -ms-transform: rotate(30deg) translate(0px, 0px);
    -o-transform: rotate(30deg) translate(0px, 0px);
    transform: rotate(30deg) translate(0px, 0px);
}
  
} */

/*--------------------------------------------------------------
# Loader icon
--------------------------------------------------------------*/
.loader {
	position: relative;
	display: grid;
	grid-template-columns: 33% 33% 33%;
	grid-gap: 2px;
	width: 100px;
	height: 100px;
}

@keyframes loader {
	0%   { transform: scale(0.0); }
	40%  { transform: scale(1.0); }
	80%  { transform: scale(1.0); }
	100% { transform: scale(0.0); }
}

.loadingModal{
  background: #ffffffe4 !important;
}
	
.loader div {
	position: relative;
	width: 100%;
	height: 100%;
	background: tomato;
	transform: scale(0.0);
	transform-origin: center center;
	animation: loader 2s infinite linear;
}
/* .loader divnth-of-type(7) {} */
		
.loader div:nth-of-type(1),
.loader div:nth-of-type(5), 
.loader div:nth-of-type(9) {
  animation-delay: 0.4s;
}
		
.loader div:nth-of-type(4),
.loader div:nth-of-type(8) {
  animation-delay: 0.2s;
}
		
.loader div:nth-of-type(2),
.loader div:nth-of-type(6) {
  animation-delay: 0.6s;
}
		
.loader div:nth-of-type(3) {
  animation-delay: 0.8s;
}


/*--------------------------------------------------------------
# loader text
--------------------------------------------------------------*/

.loader_h1 span {
  /* position: relative; */
  top: 0.63em;
  display: inline-block;
  text-transform: uppercase;
  opacity: 0;
  transform: rotateX(-90deg);
  /* font-size:  1vmax; */
  color: #1f1209;
}

.loader_aux{
  font-size: 4vmax;
  color: #1f1209;
}

.let0 {
  animation: drop 1.2s step-end infinite;
  animation-delay: 1.2s;
}

.let1 {
  animation: drop 1.2s ease-in-out infinite;
  animation-delay: 1.2s;
}

.let2 {
  animation: drop 1.2s ease-in-out infinite;
  animation-delay: 1.3s;
}

.let3 {
  animation: drop 1.2s ease-in-out infinite;
  animation-delay: 1.4s;
}

.let4 {
  animation: drop 1.2s ease-in-out infinite;
  animation-delay: 1.5s;

}

.let5 {
  animation: drop 1.2s ease-in-out infinite;
  animation-delay: 1.6s;
}

.let6 {
  animation: drop 1.2s ease-in-out infinite;
  animation-delay: 1.7s;
}

.let7 {
  animation: drop 1.2s ease-in-out infinite;
  animation-delay: 1.8s;
}

.let8 {
  animation: drop 1.2s ease-in-out infinite;
  animation-delay: 2s;
}

.let9 {
  animation: drop 1.2s ease-in-out infinite;
  animation-delay: 2.2s;
}

.let10 {
  animation: drop 1.2s ease-in-out infinite;
  animation-delay: 2.4s;
}

.let11 {
  animation: drop 1.2s ease-in-out infinite;
  animation-delay: 2.6s;
}

.let12 {
  animation: drop 1.2s ease-in-out infinite;
  animation-delay: 2.8s;
}

.let13 {
  animation: drop 1.2s ease-in-out infinite;
  animation-delay: 3s;
}

@keyframes drop {
    10% {
        opacity: 0.5;
    }
    20% {
        opacity: 1;
        top: 3.78em;
        transform: rotateX(-360deg);
    }
    80% {
        opacity: 1;
        top: 3.78em;
        transform: rotateX(-360deg);
    }
    90% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        top: 6.94em
    }
}




#progress {
  width: 100%;
  /* height: 3vmax; */
  padding: 0;
  list-style-type: none;
  font-family: arial;
  font-size: .9vmax;
  font-weight: bold;
  clear: both;
  line-height: 1em;
  margin: 0vmax .1vmax;
  /* margin: 0 -0.1vmax; */
  text-align: center;
}

#progress li {
  float: left;
  padding-top: .5vmax;
  /* padding: 10px 30px 10px 40px; */
  /* padding: .5vmax 2vmax .5vmax 2vmax; */
  width: 22%;
  height: 2.1vmax;
  /* height: 2vmax; */
  /* background: #333; */
  background: rgb(184, 10, 10);
  color: #ffffff;
  position: relative;
  margin: .2vmax .1vmax;
  /* border-top: 1px solid #666;
  border-bottom: 1px solid #666; */
  /* margin: 0 -0.01vmax; */
}

#progress li:before {
  content: '';
  border-left: 1vmax solid #fff;
  border-top: 1vmax solid transparent;
  border-bottom: 1vmax solid transparent;
  position: absolute;
  top: 0;
  left: 0;
  
}
#progress li:after {
  content: '';
  /* border-left: 1vmax solid #333; */
  border-left: 1vmax solid rgb(184, 10, 10);
  border-top: 1vmax solid transparent;
  border-bottom: 1vmax solid transparent;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 20;
}

#progress li.active {
  /* background: #555; */
  background: rgb(6, 138, 50);
}

#progress li.active:after {
  /* border-left-color: #555; */
  border-left-color: rgb(6, 138, 50);
}

#progress li.warning {
  /* background: #555; */
  background: rgb(190, 167, 13);
}

#progress li.warning:after {
  /* border-left-color: #555; */
  border-left-color: rgb(190, 167, 13);
}