.content-principal {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 0px 20px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.wrapper{
  box-shadow: 0px 0px 25px 0px rgb(45 69 95 / 33%) !important;
}

.top-logo .logo{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.iq-sidebar {
  position: fixed;
  z-index: 999;
  top: 0;
  width: 260px;
  overflow: hidden;
  height: 100%;
  background: #ffffff;
  transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(45, 69, 95, 0.1);
  -moz-box-shadow: 0px 0px 25px 0px rgba(45, 69, 95, 0.1);
  box-shadow: 0px 0px 25px 0px rgba(45, 69, 95, 0.1);
}

.iq-sidebar .iq-sidebar-logo {
  float: none;
  width: 100%;
}

.iq-sidebar #sidebar-scrollbar {
  margin-top: 15px;
}

/*---------------------------------------------------------------------
                             Sidebar Menu
-----------------------------------------------------------------------*/

/* Form */
#sidebar-scrollbar {
  height: 100vh;
}

.scroll-content div.p-3 {
  height: 100px;
}

.iq-sidebar-menu .iq-menu .iq-menu-title {
  display: block;
  color: #374948;
  font-size: 15px;
  position: relative;
  padding: 15px 20px 15px 30px;
  font-weight: 500;
  line-height: 18px;
}

.iq-sidebar-menu {
  position: relative;
}

.iq-sidebar-menu .iq-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.iq-sidebar-menu .iq-menu li {
  list-style-type: none;
  position: relative;
}

.iq-sidebar-menu .iq-menu li a {
  font-size: 15px;
  white-space: nowrap;
  display: block;
  color: #777D74;
  position: relative;
  padding: 15px 20px 15px 30px;
  line-height: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}

.iq-sidebar-menu .iq-menu li>a::before {
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  content: "";
  width: 3px;
  height: 0;
  display: inline-block;
  background: #0084ff;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 1;
}

.iq-sidebar-menu .iq-menu li.active>a::before {
  opacity: 1;
  height: 100%;
}

.iq-sidebar-menu .iq-menu li a i {
  font-size: 20px;
  margin-right: 5px;
  vertical-align: middle;
  width: 20px;
  display: inline-block;
  float: left;
}

.iq-sidebar-menu .iq-menu li a span {
  white-space: nowrap;
  padding: 0;
  display: inline-block;
  float: left;
}
.iq-footer {
  padding: 15px;
  margin-left: 260px;
  -webkit-box-shadow: 0px 0px 12px 0px rgba(55, 73, 72, 0.06);
  -moz-box-shadow: 0px 0px 12px 0px rgba(55, 73, 72, 0.06);
  box-shadow: 0px 0px 12px 0px rgba(55, 73, 72, 0.06);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.iq-footer ul li a {
  color: #777D74;
}

.iq-footer ul li a:hover {
  color: #0084ff;
  text-decoration: none;
}
.iq-sidebar-menu .iq-menu li a .iq-arrow-right {
  margin-right: 0;
  margin-left: auto;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

.iq-sidebar-menu .iq-menu li a .badge {
  position: absolute;
  right: 15px;
  -webkit-transition: all 0.9s ease-out 0s;
  -moz-transition: all 0.9s ease-out 0s;
  -ms-transition: all 0.9s ease-out 0s;
  -o-transition: all 0.9s ease-out 0s;
  transition: all 0.9s ease-out 0s;
}

.iq-sidebar-menu .iq-menu li.active {
  border-bottom: none;
}

.iq-sidebar-menu .iq-menu li a:hover,
.iq-sidebar-menu .iq-menu li.active>a,
.iq-sidebar-menu .iq-menu li.menu-open>a {
  color: #0084ff;
  background: #e5f2ff;
  text-decoration: none;
}

.iq-sidebar-menu .iq-menu li a[aria-expanded="true"] .iq-arrow-right,
.iq-sidebar-menu .iq-menu li.menu-open .iq-arrow-right,
.iq-sidebar-menu .iq-menu li.active .iq-arrow-right {
  transform: rotate(90deg);
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

.iq-sidebar-menu .iq-menu li.active .iq-submenu li>a {
  background: transparent;
}

.iq-sidebar-menu .iq-menu li .iq-submenu li a:hover {
  
  color: var(--text-color-hover-navbar) !important;
  background: var(--bg-color-hover-navbar) !important;
}

.iq-sidebar-menu .iq-menu li .iq-submenu li>a::before {
  display: none;
}

/*------------------------*/
.iq-sidebar-menu .iq-menu li ul {
  padding-left: 30px;
}

.iq-sidebar-menu .iq-menu li ul li a {
  color: #777D74;
  background: #ffffff;
  padding: 12px 20px;
}

.iq-sidebar-menu .iq-menu li ul a:hover {
  color: #0084ff;
  text-decoration: none;
  background: transparent;
}

/*---------Sidebar Dark---------------*/
.iq-sidebar.sidebar-dark,
.iq-sidebar.sidebar-dark .iq-sidebar-logo {
  background: #151b21;
  color: #ffffff;
}

.iq-sidebar.sidebar-dark .iq-sidebar-logo a span {
  color: rgba(255, 255, 255, 0.8);
}

.iq-sidebar.sidebar-dark .iq-sidebar-menu .iq-menu .iq-menu-title {
  color: rgba(255, 255, 255, 0.4);
}

.iq-sidebar.sidebar-dark .iq-menu li>a::before {
  display: none;
}

.iq-sidebar.sidebar-dark .iq-sidebar-menu .iq-menu li>a:hover,
.iq-sidebar.sidebar-dark .iq-sidebar-menu .iq-menu li.active>a,
.iq-sidebar.sidebar-dark .iq-sidebar.sidebar-dark .iq-sidebar-menu .iq-menu li a {
  color: #ffffff;
  background: #0f1317;
}

.iq-sidebar.sidebar-dark .iq-menu li a:hover,
.iq-sidebar.sidebar-dark .iq-menu li.active>a,
.iq-sidebar.sidebar-dark .iq-menu li.menu-open>a {
  color: #ffffff;
  background: #0f1317;
}

.iq-sidebar.sidebar-dark .iq-sidebar-menu .iq-menu li a {
  color: rgba(255, 255, 255, 0.6);
}

.iq-sidebar.sidebar-dark .iq-sidebar-menu .iq-menu li ul li a {
  background: transparent;
  padding-left: 60px;
}

.iq-sidebar.sidebar-dark .iq-sidebar-menu .iq-menu li ul {
  padding-left: 0;
}

.iq-sidebar.sidebar-dark .iq-sidebar-menu .iq-menu li.active .iq-submenu li>a {
  background: transparent;
}

.iq-sidebar.sidebar-dark .ripple {
  background: rgba(255, 255, 255, 0.1);
}

.iq-sidebar.sidebar-dark .iq-menu-bt {
  background: #0f1317;
}

.iq-sidebar.sidebar-dark .line-menu {
  background: #ffffff;
}

/*---------Sidebar Dark blue ---------------*/
.iq-sidebar.sidebar-dark-blue,
.iq-sidebar.sidebar-dark-blue .iq-sidebar-logo {
  background: #6d73f6;
  color: #ffffff;
}

.iq-sidebar.sidebar-dark-blue .iq-sidebar-logo a span {
  color: rgba(255, 255, 255, 0.8);
}

.iq-sidebar.sidebar-dark-blue .iq-sidebar-menu .iq-menu .iq-menu-title {
  color: rgba(255, 255, 255, 0.4);
}

.iq-sidebar.sidebar-dark-blue .iq-menu li>a::before {
  display: none;
}

.iq-sidebar.sidebar-dark-blue .iq-sidebar-menu .iq-menu li>a:hover,
.iq-sidebar.sidebar-dark-blue .iq-sidebar-menu .iq-menu li.active>a,
.iq-sidebar.sidebar-dark-blue .iq-sidebar.sidebar-dark-blue .iq-sidebar-menu .iq-menu li a {
  color: #ffffff;
  background: #5a61fd;
}

.iq-sidebar.sidebar-dark-blue .iq-menu li a:hover,
.iq-sidebar.sidebar-dark-blue .iq-menu li.active>a,
.iq-sidebar.sidebar-dark-blue .iq-menu li.menu-open>a {
  color: #ffffff;
  background: #0f1317;
}

.iq-sidebar.sidebar-dark-blue .iq-sidebar-menu .iq-menu li a {
  color: rgba(255, 255, 255, 0.9);
}

.iq-sidebar.sidebar-dark-blue .iq-sidebar-menu .iq-menu li ul li a {
  background: transparent;
  padding-left: 15px;
}

.iq-sidebar.sidebar-dark-blue .iq-sidebar-menu .iq-menu li ul {
  padding-left: 0;
}

.iq-sidebar.sidebar-dark-blue .ripple {
  background: rgba(255, 255, 255, 0.1);
}

.iq-sidebar.sidebar-dark-blue .iq-menu-bt {
  background: #0f1317;
}

.iq-sidebar.sidebar-dark-blue .line-menu {
  background: #ffffff;
}

/*---------------------------------------------------------------------
                             Top Menu
-----------------------------------------------------------------------*/
.iq-top-navbar .iq-navbar-custom .iq-menu-bt {
  display: none;
}

.iq-top-navbar {
  border-radius: 0;
  margin-bottom: 0;
  padding: 0;
  min-height: 73px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: inline-block;
  z-index: 99;
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(45, 69, 95, 0.1);
  -moz-box-shadow: 0px 0px 25px 0px rgba(45, 69, 95, 0.1);
  box-shadow: 0px 0px 25px 0px rgba(45, 69, 95, 0.1);
}

.iq-top-navbar .iq-navbar-custom .navbar-breadcrumb {
  display: inline-block;
  margin: 15px 0 0 30px;
  float: left;
}

.iq-top-navbar .breadcrumb .breadcrumb-item.active {
  color: #777D74;
}

.iq-top-navbar .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
}

.iq-top-navbar .breadcrumb li {
  list-style-type: none;
  font-size: 12px;
}

.breadcrumb-item+.breadcrumb-item::before {
  content: "\ea5f";
  font-family: 'remixicon';
  font-size: 14px;
  vertical-align: sub;
  color: #777D74;
}

.iq-top-navbar .breadcrumb li a,
.iq-top-navbar .breadcrumb li a:hover {
  text-decoration: none;
}

.navbar-list {
  margin: 0;
  padding: 0;
  float: right;
}

.navbar-list li {
  float: left;
  list-style-type: none;
  position: relative;
}

.navbar-list li .dropdown-toggle::after {
  display: none;
}

.navbar-list li>a {
  font-size: 18px;
  padding: 0 10px;
  line-height: 73px;
  color: #0084ff;
  display: block;
  /* min-height: 75px; */
}

@media (min-width: 1220px) {
    
  .section_name_header {
    display: flex !important;
    align-items: center !important;
  }

  .name-grid {
    display: inline-grid;
    grid-template-rows: 1fr 1fr;
    /* line-height: 1; */
    gap: 1px;
    margin-left: 5px !important;
  }

}

@media (max-width: 1219px) {
  
	.name-user {
		display: none !important;
	}

}



.menu-tag {
  position: absolute;
  background: #374948;
  color: #ffffff;
  display: inline-block;
  top: 18px;
  left: 18px;
  font-size: 12px;
  border-radius: 90px;
  line-height: normal;
  height: 18px;
  width: 18px;
  line-height: 18px;
  text-align: center;
  display: inline-block;
}

.navbar-list li a:hover {
  text-decoration: none;
}

.navbar-list li img {
  width: 30px;
  height: 30px;
}


.media-body-lang {
  display: flex;
  justify-content: space-between;
}

.navbar-list li.iq-nav-user {
  display: flex;
  align-items: flex-start;
}

.navbar-list li.iq-nav-user span {
  flex: 1;
  font-size: 14px;
}


.iq-breadcrumb {
  display: none;
}

.nav-item span.dots {
  height: 5px;
  width: 5px;
  font-size: 0;
  text-align: center;
  padding: 0;
  position: absolute;
  top: 25px;
  right: 10px;
  animation: shadow-pulse-dots 1s infinite;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

.nav-item .badge.count-mail {
  height: 15px;
  width: 15px;
  font-size: 10px;
  text-align: center;
  line-height: 15px;
  padding: 0;
  position: absolute;
  top: 20px;
  right: 10px;
  animation: shadow-pulse 1s infinite;
}

@keyframes shadow-pulse-dots {
  0% {
    box-shadow: 0 0 0 0px rgba(230, 65, 65, 0.2);
  }

  100% {
    box-shadow: 0 0 0 15px rgba(230, 65, 65, 0);
  }
}

@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 132, 255, 0.2);
  }

  100% {
    box-shadow: 0 0 0 15px rgba(0, 132, 255, 0);
  }
}

/*---------- Sidebar Logo --------------*/
.iq-sidebar-logo {
  display: inline-block;
  width: 260px;
  padding-left: 20px;
  float: left;
  position: relative;
  background: #ffffff;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.iq-sidebar-logo a {
  display: flex;
  align-items: flex-start;
}

.iq-sidebar-logo a span {
  margin-left: 10px;
  font-size: 28px;
  line-height: 45px;
  color: #374948;
  font-family: 'Questrial', sans-serif;
  flex: 1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.iq-sidebar-logo a:hover,
.iq-sidebar-logo a:focus {
  text-decoration: none;
}

.iq-sidebar-logo img {
  height: 55px;
}

.iq-menu-bt {
  background: #e5f2ff;
  padding: 12px 10px;
  margin-right: 15px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.wrapper-menu {
  color: #0084ff;
  width: 20px;
  height: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 330ms ease-out;
}

.wrapper-menu.open {
  transform: rotate(-45deg);
}

.line-menu {
  background-color: #0084ff;
  border-radius: 90px;
  width: 100%;
  height: 2px;
}

.line-menu.half {
  width: 50%;
}

.line-menu.start {
  transition: transform 330ms cubic-bezier(0.54, -0.81, 0.37, 0.37);
  transform-origin: right;
}

.open .line-menu.start {
  transform: rotate(-90deg) translateX(3px);
}

.line-menu.end {
  align-self: flex-end;
  transition: transform 330ms cubic-bezier(0.54, -0.81, 0.37, 0.37);
  transform-origin: left;
}

.open .line-menu.end {
  transform: rotate(-90deg) translateX(-3px);
}

/*----------------------*/
.iq-top-navbar .iq-sub-dropdown {
  width: 300px;
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  -webkit-animation: fade-in-bottom 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-bottom 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  background-color: #ffffff;
  transition: all 0.3s;
  padding: 0;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(45, 69, 95, 0.1);
  -moz-box-shadow: 0px 0px 25px 0px rgba(45, 69, 95, 0.1);
  box-shadow: 0px 0px 25px 0px rgba(45, 69, 95, 0.1);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  z-index: 9999;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-12-22 15:30:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

.iq-show .iq-sub-dropdown {
  display: inline-block;
}

.navbar-list li .iq-sub-dropdown .iq-sub-card:hover {
  background-color: #f3f7fd;
  border-radius: 5px;
  border: 1px solid #f3f7fd;
}
.navbar-list li .iq-sub-dropdown .iq-sub-card {
  font-size: inherit;
  padding: 0px 0px 0px 5px;
  line-height: normal;
  color: inherit;
  border-bottom: 1px solid #f3f7fd;
  display: inline-block;
  width: 100%;
}



.iq-top-navbar .search-box {
  top: 100%;
  right: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  background-color: #ffffff;
  transition: all 0.3s;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(45, 69, 95, 0.1);
  -moz-box-shadow: 0px 0px 25px 0px rgba(45, 69, 95, 0.1);
  box-shadow: 0px 0px 25px 0px rgba(45, 69, 95, 0.1);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.iq-show .search-box {
  display: inline-block;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.search-box .search-input {
  width: 300px;
  height: 50px;
  padding: 0 1em;
  border: 1px solid #d4e3f9;
  background-color: #f3f7fd;
  opacity: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.iq-sub-dropdown .iq-card-icon {
  width: 30px;
  height: 45px;
  line-height: 45px;
  font-size: 22px;
}

/*---------------------------------------------------------------------
                              Content Page
-----------------------------------------------------------------------*/
.content-page {
  margin-left: 260px;
  overflow: hidden;
  padding: 100px 15px 0;
  padding-bottom:50px;
  min-height: 100vh;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.iq-user-dropdown {
  width: 350px;
}

body.sidebar-main .content-page,
body.sidebar-main .iq-footer {
  margin-left: 80px;
}

body.sidebar-main .iq-sidebar-logo {
  width: 80px;
}

body.sidebar-main .iq-sidebar .iq-sidebar-menu .iq-menu li a span,
body.sidebar-main .iq-sidebar-logo a span,
body.sidebar-main .iq-sidebar-menu .iq-menu li a .badge {
  opacity: 0;
  display: none;
}

body.sidebar-main .iq-menu-bt {
  opacity: 0;
  display: none;
}

body.sidebar-main .iq-sidebar {
  width: 80px;
}

body.sidebar-main .iq-sidebar-menu .iq-menu li a .iq-arrow-right {
  margin-right: 0;
  display: none;
}

body.sidebar-main .iq-sidebar:hover,
body.sidebar-main .iq-sidebar:hover .iq-sidebar-logo {
  width: 260px;
}

body.sidebar-main .iq-sidebar:hover .iq-sidebar-menu .iq-menu li a .iq-arrow-right {
  margin-right: 0;
  display: inline-block;
}

body.sidebar-main .iq-sidebar:hover .iq-sidebar-menu .iq-menu li a span,
body.sidebar-main .iq-sidebar:hover .iq-sidebar-logo a span,
body.sidebar-main .iq-sidebar:hover .iq-sidebar-menu .iq-menu li a .badge,
body.sidebar-main .iq-sidebar:hover .iq-menu-bt {
  opacity: 1;
  display: inline-block;
}

/* --------------- */
.iq-card.iq-border-box {
  border-bottom: 4px solid;
}

.right-block .image-absulute.image-absulute-1 {
  position: absolute;
  top: 10px;
  left: auto;
  right: 240px;
}

.right-block .image-absulute.image-absulute-2 {
  position: absolute;
  left: auto;
  right: 330px;
  top: 30px;
}

.iq-right-fixed .iq-card .iq-card-header {
  border-color: rgba(255, 255, 255, 0.2);
}

/*--------------------*/
.iq-card-header-list {
  margin: 0;
  padding: 0;
  float: right;
}

.iq-card-header-list li {
  list-style-type: none;
  float: left;
  display: inline-block;
  font-size: 20px;
  margin: 0 0 0 8px;
}

.iq-card-header-list li a,
.iq-card-header-list li a:hover {
  text-decoration: none;
}


.search-container {
  .search-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    color: #007bff;
    transition: color 0.3s ease;
    font-size: 20px;
  }

  position: relative;
  top: 10px;
  margin-right: 0px !important;
}


.search-wrapper {
  display: flex;
  align-items: center;
  border-radius: 25px;
  background-color: transparent;
  overflow: hidden;
  width: 40px;
  /* Ancho inicial colapsado */
  transition: width 0.3s ease;
  box-shadow: none !important;
}

.search-wrapper.expanded {
  width: 300px;
  /* Ancho expandido */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

.search-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  color: #007bff;
  transition: color 0.3s ease;
  font-size: 20px;
}



/*---------------------------------------------------------------------
horizontal page
-----------------------------------------------------------------------*/
.icon-size {
  font-size: 100px;
  position: absolute;
  left: auto;
  right: 30px;
  top: -70px;
  opacity: 0.2;
}

/*---------------------------------------------------------------------
small sidebar with icon
-----------------------------------------------------------------------*/
.two-sidebar .iq-sidebar-small {
  z-index: 1030;
  position: fixed;
  width: 60px;
  height: 100vh;
  top: 0;
  left: 0;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  background: #fff;
}

#sidebar-scrollbar {
  color: var(--text-color-navbar);
  background: var(--bg-navbar);
}

.iq-sidebar-menu .iq-menu li a {
  color: var(--text-color-navbar);
  background: var(--bg-navbar);
}

.iq-sidebar-menu .iq-menu li a:hover {
  color: var(--text-color-hover-navbar);
  background: var(--bg-color-hover-navbar);
}

.two-sidebar .iq-sidebar {
  /* margin-left: 60px; */
}

.two-sidebar .content-page {
  margin-left: 190px;
}

.two-sidebar .iq-sidebar-logo {
  width: 320px;
}

.two-sidebar .iq-footer {
  margin-left: 320px;
}

.two-sidebar .iq-menu-bt {
  margin: 0 auto;
  line-height: 17px;
  font-size: 20px;
}

body.two-sidebar.sidebar-main .iq-sidebar-small .iq-menu-bt {
  opacity: 1;
  display: block;
}

body.two-sidebar.sidebar-main .iq-sidebar {
  width: 0;
}

body.two-sidebar.sidebar-main .content-page,
body.sidebar-main .iq-footer {
  /* margin-left: 60px; */
}

body.two-sidebar.sidebar-main .iq-sidebar-logo {
  width: 60px
}

.sidebar-menu-icon {
  display: flex;
  flex-direction: column;
}

.sidebar-menu-icon>a {
  font-size: 18px;
  display: block;
  padding: 5px 0;
  color: #ffffff
}

.menu-open {
  opacity: 0;
  position: absolute;
  top: 0;
  text-align: center;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 50%;
}

.wrapper-menu.open .menu-close {
  opacity: 0;
}

.wrapper-menu.open .menu-open {
  opacity: 1;
}

.two-sidebar.sidebar-main .wrapper-menu.open {
  transform: rotate(0deg);
}

.breadcrumb-item+.breadcrumb-item::before {
  content: "\ea5f" !important;
  font-family: 'remixicon' !important;
  font-size: 14px !important;
  vertical-align: sub !important;
  color: #777D74 !important;
}



#loading_page { background-color: #ffffff; height: 100%; width: 100%; position: fixed; margin-top: 0px; top: 0px; left: 0px; bottom: 0px; overflow: hidden !important; right: 0px; z-index: 999999; }
#loading_page-center { width: 100%; height: 100%; position: relative; }
.loader { width: 3em; height: 3em; margin: auto; left: 0; right: 0; top: 0; bottom: 0; position: absolute; }
@-webkit-keyframes rotate {
  0% { -webkit-transform: rotateX(-37.5deg) rotateY(45deg); transform: rotateX(-37.5deg) rotateY(45deg); }
  50% { -webkit-transform: rotateX(-37.5deg) rotateY(405deg); transform: rotateX(-37.5deg) rotateY(405deg); }
  100% { -webkit-transform: rotateX(-37.5deg) rotateY(405deg); transform: rotateX(-37.5deg) rotateY(405deg); }
}
@keyframes rotate {
  0% { -webkit-transform: rotateX(-37.5deg) rotateY(45deg); transform: rotateX(-37.5deg) rotateY(45deg); }
  50% { -webkit-transform: rotateX(-37.5deg) rotateY(405deg); transform: rotateX(-37.5deg) rotateY(405deg); }
  100% { -webkit-transform: rotateX(-37.5deg) rotateY(405deg); transform: rotateX(-37.5deg) rotateY(405deg); }
}
.cube, .cube * { position: absolute; width: 71px; height: 71px; left: 0; right: 0; top: 0; bottom: 0; }
.sides { -webkit-animation: rotate 3s ease infinite; animation: rotate 3s ease infinite; -webkit-animation-delay: .8s; animation-delay: .8s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-37.5deg) rotateY(45deg); transform: rotateX(-37.5deg) rotateY(45deg); }
.cube .sides * { box-sizing: border-box; background-color: rgba(0, 132, 255, 0.8); border: 5px solid #eaeaea; }
.cube .sides .top { -webkit-animation: top-animation 3s ease infinite; animation: top-animation 3s ease infinite; -webkit-animation-delay: 0ms; animation-delay: 0ms; -webkit-transform: rotateX(90deg) translateZ(90px); transform: rotateX(90deg) translateZ(90px); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
@-webkit-keyframes top-animation {
  0% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(90px); transform: rotateX(90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(35px); transform: rotateX(90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(35px); transform: rotateX(90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(90px); transform: rotateX(90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(90px); transform: rotateX(90deg) translateZ(90px); }
}
@keyframes top-animation {
  0% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(90px); transform: rotateX(90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(35px); transform: rotateX(90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(35px); transform: rotateX(90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(90px); transform: rotateX(90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(90px); transform: rotateX(90deg) translateZ(90px); }
}
.cube .sides .bottom { -webkit-animation: bottom-animation 3s ease infinite; animation: bottom-animation 3s ease infinite; -webkit-animation-delay: 0ms; animation-delay: 0ms; -webkit-transform: rotateX(-90deg) translateZ(90px); transform: rotateX(-90deg) translateZ(90px); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
@-webkit-keyframes bottom-animation {
  0% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(90px); transform: rotateX(-90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(35px); transform: rotateX(-90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(35px); transform: rotateX(-90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(90px); transform: rotateX(-90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(90px); transform: rotateX(-90deg) translateZ(90px); }
}
@keyframes bottom-animation {
  0% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(90px); transform: rotateX(-90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(35px); transform: rotateX(-90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(35px); transform: rotateX(-90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(90px); transform: rotateX(-90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(90px); transform: rotateX(-90deg) translateZ(90px); }
}
.cube .sides .front { -webkit-animation: front-animation 3s ease infinite; animation: front-animation 3s ease infinite; -webkit-animation-delay: 100ms; animation-delay: 100ms; -webkit-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
@-webkit-keyframes front-animation {
  0% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(35px); transform: rotateY(0deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(35px); transform: rotateY(0deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); }
}
@keyframes front-animation {
  0% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(35px); transform: rotateY(0deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(35px); transform: rotateY(0deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); }
}
.cube .sides .back { -webkit-animation: back-animation 3s ease infinite; animation: back-animation 3s ease infinite; -webkit-animation-delay: 100ms; animation-delay: 100ms; -webkit-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
@-webkit-keyframes back-animation {
  0% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(35px); transform: rotateY(-180deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(35px); transform: rotateY(-180deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); }
}
@keyframes back-animation {
  0% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(35px); transform: rotateY(-180deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(35px); transform: rotateY(-180deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); }
}
.cube .sides .left { -webkit-animation: left-animation 3s ease infinite; animation: left-animation 3s ease infinite; -webkit-animation-delay: 100ms; animation-delay: 100ms; -webkit-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
@-webkit-keyframes left-animation {
  0% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(35px); transform: rotateY(-90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(35px); transform: rotateY(-90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); }
}
@keyframes left-animation {
  0% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(35px); transform: rotateY(-90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(35px); transform: rotateY(-90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); }
}
.cube .sides .right { -webkit-animation: right-animation 3s ease infinite; animation: right-animation 3s ease infinite; -webkit-animation-delay: 100ms; animation-delay: 100ms; -webkit-transform: rotateY(90deg) translateZ(90px); transform: rotateY(90deg) translateZ(90px); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
@-webkit-keyframes right-animation {
  0% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(90px); transform: rotateY(90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(35px); transform: rotateY(90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(35px); transform: rotateY(90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(90px); transform: rotateY(90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(90px); transform: rotateY(90deg) translateZ(90px); }
}
@keyframes right-animation {
  0% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(90px); transform: rotateY(90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(35px); transform: rotateY(90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(35px); transform: rotateY(90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(90px); transform: rotateY(90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(90px); transform: rotateY(90deg) translateZ(90px); }
}
.right-sidebar-mini { top: 0; z-index: 100; position: fixed; width: 350px; right: 0; transform: translateX(calc(111% + -2em)); transition: all 0.5s ease; }
.right-sidebar-mini .side-right-icon { display: none; }
.right-sidebar-toggle { position: absolute; margin-left: -44px; background: #fff; padding: 15px; display: inline; top: 15%; z-index: 99; border-radius: 30px 0px 0px 30px; box-shadow: -10px 5px 20px rgba(0, 0, 0, 0.19); cursor: pointer; }
.right-sidebar-panel { background-color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); height: 100vh; padding: 15px; overflow-y: scroll; }
.right-sidebar { transform: translateX(calc(10% + -1em)); }
.right-sidebar .side-left-icon { display: none; }
.right-sidebar .side-right-icon { display: block; }