.base-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top: 57px;
}

.sidebar {
    transition: all .3s;
    width: 23%;
    margin-left: 10px;
}

.sidebar.collapsed {
    max-height: 23px;
}

.live-lateral-kpis {
    position: relative;
    min-height: 1px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.live-events {
    margin: 0% 6%;
    margin-top: 15px;
}

#live-board:fullscreen {
    background-color: #ffff;
    padding: 3% 4% 4.5% 4%;
    overflow-x: auto;
}

.live-board-child{
    width: 65%;
    position: relative;
    min-height: 1px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.live-board{
    display: flex;
    margin: 0% 6%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 15px;
    align-content: flex-start;
    row-gap: 20px;
}

.mainContainer {
    padding-left: 3%;
    padding-right: 3%;
    flex-basis: 74%;
    margin-top: 20px;
}

#main-options {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-basis: 100%;
}


/* **** se define la altura del menu de notificaciones segun la pantalla **** */


/* **** fin se define la altura del menu de notificaciones segun la pantalla **** */

#mainLocation {
    /*width: 60%;*/
    /*margin-left: 9%;*/
    /*margin-right: 15px;*/
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    height: fit-content;
}

#mainCamera {
    width: 65%;
    display: none;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

#mainNotification {
    width: 65%;
    display: none;
    margin-left: 20px;
    margin-right: 20px;
}

.main-video-stream {
    /*height: 100%;*/
    margin-top: 35px;
    display: none;
}

.main-card {
    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
    background-color: #fafafa;
    padding: 15px;
    height: 95%;
}

.tabs-list {
    list-style-type: none;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}

.tabs-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: absolute;
    margin-top: -20px;
    margin-left: 10px;
}

.tabs-nav-main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: absolute;
    margin-top: -20px;
    margin-left: 10px;
}

.tabs-nav-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: fixed;
    margin-top: -20px;
    margin-left: 10px;
}

.tabs-tab {
    background-color: #988c77;
    margin-right: 5px;
    cursor: pointer;
    border-radius: 2px;
}

.tabs-tab:hover {
    background-color: #222A35;
}

.tabs-anchor {
    float: left;
    padding: .3em 0.7em;
    text-decoration: none;
    color: white;
    font-size: small;
}

.tabs-anchor-disable {
    float: left;
    padding: .3em 0.7em;
    text-decoration: none;
    color: grey;
    font-size: small;
}

.tabs-anchor:hover {
    text-decoration: none;
    color: white;
}

.tabs-active {
    background-color: #6b6552;
}

.tabs-panel {
    border-style: solid;
    border-color: hsl(215deg 22% 90%);
    border-width: 1px;
}

.tabs {
    height: 100%;
}

.loading-content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 50px;
}

.loading-text {
    text-align: center;
    font-weight: bold;
}

.loading-gif {
    width: 250px;
    height: 250px;
    align-self: center;
    margin-top: -70px;
}

.load-error-content {
    display: none;
    justify-content: center;
    margin-top: 50px;
    text-align: center;
}

.load-error-icon {
    background: url(../img/error_outline-black.svg) no-repeat center;
    background-size: contain;
    display: inline-block;
    height: 45px;
    width: 45px;
    margin-right: 5px;
}

.loading-error-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: bold;
}


/* ----- Locations Map Style ------*/

#location-title {
    display: flex;
    margin-bottom: 20px;
    /*margin-top: -10px;*/
}

#location-title:hover {
    cursor: pointer;
}

.title-text-new-new .icon-location {
    margin-right: 5px;
    background: url(../img/location-dark-24dp.svg) no-repeat top left;
    background-size: contain;
    display: flex;
    align-self: center;
    height: 24px;
    width: 24px;
    cursor: default;
}

#location-title .title-line {
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #222a3512;
    width: -webkit-fill-available;
    display: flex;
    align-items: center;
}

#location-title .title-text {
    font-weight: bold;
    font-size: 14px;
    color: #222A35;
}


/* **** se define el tamaño de canvas segun la pantalla **** */


/*@media only screen and (min-aspect-ratio: 16/9) {*/


.select-location-buttons{
    display: flex !important;
    flex-flow: row wrap !important;
    /*height: 68px;*/
    overflow-x: scroll;
    overflow-y: hidden;
}

/*}*/


/* **** fin se define el tamaño de canvas segun la pantalla **** */


/*----- End Locations Map Style -------*/