* {
    font-family: Montserrat, serif;
    margin: 0;
    //max-width: 100%;
}

html,
body {
    margin: 0;
    width: 100%;
    background: var(--Neutral-neutral-100, #FCFCFC);
}

:root {
    --zenit-primary-color: #F3AE4B;
    --zenit-primary-subtle: #f3ae4bbd;
    --zenit-red: #ea1616;
    --zenit-blue: #BAD6F5;
    --zenit-green: rgba(121, 203, 56, 0.8);
    --zenit-grey: #999966;
    --zenit-light-orange: #f8e7c9;
    --zenit-dark-orange: #bf750dd6;
    --zenit-light-green: #8ce8a2;
    --zenit-light-red: #f27373;
    --zenit-light-blue: #bbe5f6;
    --zenit-light-grey: #999999;
    --zenit-surplus-color: #e34e69;
    --zenit-self-consumption-color: #70c38d;
    --zenit-network-color: #558ca4;
}

.main-container {
    height: 100%;
    width: 100%;
    display: flex;
}

.sidebar {
    top: 0;
    max-width: 17%;
    min-width: 5%;
    min-height: 100%;
    display: flex;
 //   padding: 16px var(--padding-padding-6, 24px);
    flex-direction: column;
    align-items: flex-start;
 //   gap: var(--padding-padding-5, 16px);
    flex: 1 0 0;
    align-self: stretch;
 //   background: var(--Neutral-neutral-100, #FCFCFC);
         z-index: 1030;
}

.sidebar__logo {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.sidebar__logo svg {
  //  padding: 9.5px 0;
}

.navbar-vertical .navbar-collapse {
    background: var(--bg-default, #FFF);
}

.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-collapse {
    padding-left: 1rem !important;
    width: 4.125rem !important;
}

.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-vertical-content{
    padding: 1rem 0 1rem 0;
}

.navbar-vertical .navbar-nav .nav-item .nav-link.active, .card-link.active{
    color: var(--zenit-primary-color);
}

.navbar-vertical.navbar-expand-xl .navbar-collapse {
    padding-left: 0px !important;
    width: 13.125rem !important;
    box-shadow: 10px 0px 10px -5px rgba(0, 0, 0, 0.3);
}

.sidebar__menu,
.sidebar__menu ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
    align-self: stretch;
    width: 100%;
    padding-left: 1rem;
}

.sidebar__menu ul a {
    text-decoration: none;
    color: unset;
    width: 100%;
}

.sidebar__menu ul a li {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    align-self: stretch;
}

.sidebar__menu ul a li div {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.sidebar__menu ul a li svg:last-of-type {
    float: right;
}

.sidebar__menu ul a li p {
    color: var(--Neutral-neutral-1000, #000);
    margin: 0;
    font-family: Montserrat, serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
}

.custom-container {
 //   max-width: 83%;
    width: 100%;
}

.custom-container__search {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.custom-container .custom-container__search {
    display: flex;
    max-width: 100%;
    height: 51px;
    padding: var(--padding-padding-3, 8px) 16px;
    padding-left: 5rem;
    align-items: center;
    gap: var(--padding-padding-5, 16px);
    align-self: stretch;
    justify-content: space-between;
    border-bottom: 1px solid var(--br-light, #F0F0F0);
    background: var(--bg-default, #FFF);
}

.custom-container__search .custom-container__search--title {
    padding: 11px 0;
    color: var(--fg-subtle, #595959);
    font-family: Montserrat;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 137%; /* 16.44px */
    display: flex;
    align-items: center;
    gap: 2rem;
}

.custom-container__search .custom-container__search--title span {
    color: var(--fg-default, #000);
    font-family: Montserrat, serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 18px */
}

.custom-container__search .custom-container__search--settings {
    display: flex;
    align-items: center;
    gap: var(--gap-gap-6, 24px);
}

.custom-container__search .custom-container__search--settings ul {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    gap: var(--padding-padding-4, 12px);
}

.custom-container__search .custom-container__search--settings ul li {
    list-style: none;
    display: flex;
    gap: 8px;
}

.custom-container__search .custom-container__search--settings ul li img {
    border-radius: 100px;
}

.custom-container__search .custom-container__search--settings ul .separator {
    display: flex;
    height: 24px;
    align-items: flex-start;
    gap: 8px;
    stroke-width: 1px;
    stroke: var(--br-medium, #D9D9D9);
}

.custom-container__search .custom-container__search--settings div input {
    border: 0;
    color: var(--fg-subtle, #595959);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
    width: fit-content;
}

.custom-container__search .custom-container__search--settings div.input {
    display: flex;
    width: 349px;
    max-height: 45px;
    align-items: center;
    gap: 8px;
    padding: 8px;
    align-self: stretch;
    border-radius: var(--radius-radius-3, 8px);
    border: 1px solid var(--br-medium, #D9D9D9);
    background: var(--bg-default, #FFF);
}

.custom-container__search .custom-container__search--settings div.input input:focus {
    border: 0;
    outline: none;
}
.submenu {
    padding: var(--padding-padding-4, 0.5rem) 1rem var(--gap-gap-4, 0.5rem) 1rem;
    padding-left: 10%;
    padding-right: 10%;
    align-self: stretch;
    border-bottom: 0.1rem solid var(--br-medium, #D9D9D9);
    background: var(--bg-default, #FFF);
    box-shadow: var(--x-x-0, 0rem) 1rem var(--blur-blur-1, 2rem) var(--spread-spread-0, 0rem) rgba(0, 0, 0, 0.05);
    justify-content: space-between;
    align-items: center;
}
.custom-container__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    display: flex;
    padding: var(--padding-padding-5, 16px) 16px;
    padding-left: 10% !important;
    padding-right: 10% !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: var(--radius-radius-0, 0px);
    border-left: 1px solid var(--br-medium, #D9D9D9);
    background-color: #F4F4F4; //#D9D9D9;
    height: 100%;
    min-height: 50.5rem;
}

.zenit-primary {
    color: var(--zenit-primary-color) !important;
}
.zenit-link {
    color: var(--zenit-primary-color) !important;
}
.simple-link {
    color: var(--zenit-light-grey) !important;
}

.btn-primary {
    color: white !important;
    border: 1px solid var(--zenit-primary-color) !important;
    background-color: var(--zenit-primary-color) !important;
}
.btn-success {
    color: white !important;
    border: 1px solid var(--zenit-light-green) !important;
    background-color: var(--zenit-light-green) !important;
}
.btn-danger-zenit {
    color: white !important;
    border: 1px solid var(--zenit-red) !important;
    background-color: var(--zenit-red) !important;
}
.btn-outline-primary:hover {
    background-color: var(--zenit-primary-color) !important;
}
.btn-outline-primary {
    border: 1px solid var(--zenit-primary-color) !important;
}
.transparent-button, .btn-transparent {
    border: transparent;
    background-color: transparent;
}
.bg-zenit-light-green {
    background-color: var(--zenit-light-green);
}
.bg-zenit-light {
    background-color: var(--zenit-light-orange);
}
.bg-zenit {
    background-color: var(--zenit-primary-color);
}
.bg-surplus-subtle{
    background-color: var(--zenit-surplus-color);
}
.bg-self-consumption-subtle{
    background-color: var(--zenit-self-consumption-color);
}
.bg-network-subtle{
    background-color: var(--zenit-network-color);
}
.zenit-red {
    color: var(--zenit-red);
}
.zenit-blue {
    color: var(--zenit-blue) !important;
}
.zenit-green {
    color: var(--zenit-green);
}
.zenit-grey {
    color: var(--zenit-grey);
}
.badge-warning-zenit {
    color: black;
    background-color: var(--zenit-primary-color);
}
.badge-info-zenit {
    color: white;
    background-color: var(--zenit-blue) !important;
}
.badge-success-zenit {
    color: white;
    background-color: var(--zenit-green);
}
.badge-danger-zenit {
    color: white;
    background-color: var(--zenit-red);
}
.badge-info {
    color: white;
    background-color: var(--zenit-blue) !important;
}

a.zenit-link{
    color:  var(--zenit-primary-color)!important;
}

#contenedor {
  width: 200px; /* Puedes ajustar el tamaño del cuadrado según tus necesidades */
  height: 200px;
  background-color: #f0f0f0; /* Color de fondo del cuadrado */
  position: relative;
}

/* Estilos para el círculo dentro del cuadrado */
#circulo {
  width: 100px; /* Diámetro del círculo */
  height: 100px;
  background-color: transparent; /* Fondo transparente para que sea un círculo */
  border-radius: 50%; /* Hace que el elemento sea un círculo */
  border: 2px solid #00ff00; /* Borde verde para el círculo */
  position: absolute;
  top: 50%; /* Centra verticalmente el círculo */
  left: 50%; /* Centra horizontalmente el círculo */
  transform: translate(-50%, -50%); /* Ajusta la posición para centrar completamente el círculo */

}
.icon-circle {
  width: 3rem !important;
  height: 3rem !important;
}

.subtle-border-bottom {
  border-bottom: solid 1px #d8e2ef;
}
.vertical-justify{
    td{
        vertical-align:middle !important;
    }
}
.notification-indicator::before {
    border: none;
    left: 0.5rem;
    top: 0.15rem;
    height: 0.75rem;
    width: 0.75rem;
}

/* Media Widths */

@media screen and (min-device-width: 481px) {
    #language_li {
        display: block;
    }
    #userDropdownLanguage {
        display: none;
    }
}
@media screen and (max-device-width: 450px) {
    #userDropdownLanguage {
        display: block;
    }
    #language_li {
        display: none;
    }
}
.geocoder-control-input{
    border: 1px solid #c0c0c0;
    box-shadow: none;
}
#search-container .geocoder-control-expanded {
    width: 100% !important;
}
select {
    max-height: 3em !important;
}
.btn-borderless {
    border: none !important;
    box-shadow: none !important;
}
.border-grey {
    border: 1px solid #9e9e9e;
}
.chart-type-buttons{
    button{
        font-size: 12px;
        color: black !important;
    }
}

@media screen and (min-device-width: 481px) and (max-device-width: 1199px) {
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-collapse {
        width: 15.125rem !important;
        .navbar-vertical-content ul{
            font-size: x-small;
            li .nav-link{
                padding: 0.125rem;
            }
        }
    }
}
@media screen and (max-device-width: 1199px) {
    .hamburger-icon-desktop{
        display: none !important;
    }
    .custom-container__content{
        min-height: 50rem;
    }
}
@media screen and (min-device-width: 481px) and (max-device-width: 1080px) {
    .custom-container__content{
        padding-left: 3% !important;
        padding-right: 3% !important;
    }
}
@media screen and (max-device-width: 480px) {
    .energy_balance_title{
        max-width: 8em !important;
    }
    .custom-container .custom-container__search {
        padding-left: 3rem;
        gap: 1rem;
    }
    .sidebar {
        max-width: 70%;
        min-height: 0;
    }
    .sidebar__logo {
        gap: 1rem;
        svg{
            width: 65px;
        }
    }
    .col-avatar-menu{
        padding-left: 1rem !important;
        max-width: 21rem;
    }
    .navbar-vertical .navbar-brand{
        margin: 0;
    }
    .navbar-vertical .toggle-icon-wrapper{
        margin: 0px;
    }
    .custom-container__content{
        padding-left: 5% !important;
        padding-right: 5% !important;
        min-height: 50rem;
    }
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-collapse{
        position: fixed;
    }
    .navbar-vertical.navbar-expand-xl .navbar-collapse {
        top: 51px;
        position: fixed;
        padding: 1rem !important;
        width: -webkit-fill-available !important;
        max-height: 30rem;
        box-shadow: -3px 5px 7px 3px rgba(0, 0, 0, 0.3);
    }
    .navbar-vertical{
        padding: 0px !important;
    }
    .navbar-vertical-content {
        width: -webkit-fill-available;
    }
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-collapse{
        width: 27rem !important;
        padding: 0.5rem !important;
        right: 0;
        left: 0;
    }
    .sidebar__menu{
        right: 0;
    }
    .submenu{
        padding-left: 0px !important;
    }
    .ck.ck-toolbar.ck-toolbar_grouping>.ck-toolbar__items {
        flex-wrap: wrap !important;
    }
    .breadcrumb .breadcrumb-item{
        max-width: 11rem;
    }
}

.navbarDropdownLanguage__mobile{
    box-shadow: none;
    border: none;
}

.languages-mobile{
    .dropdown-item{
            border-bottom: 0.1px solid #e6e6e6;
    }
}

#navbarDropdownUser__mobile{
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
}

.sidebar__menu:hover {
    cursor: pointer;
     min-width: 14.125rem !important;
     transition: width 0.5s ease;
}

.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb{
    max-height: 51px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
    background-color: var(--zenit-primary-color);
}

.link-style {
    color: rgba(243, 174, 75, 1) !important;
    text-decoration: none;
}
.link-style:hover {
    --falcon-link-color-rgb: var(--falcon-link-hover-color-rgb);
    text-decoration: underline;
}