/** Css de los popups */ 
.popupBack{
    border:1px solid black;
    background-color:white; 
    filter:alpha(opacity=90);
    -moz-opacity:0.9;
    opacity: 0.9;
}

.popupItem{ 
    border:1px solid #CCCCCC;
    vertical-align: middle; 
    padding: 1px;
}

.popupItemHover{
    background-color:#CCCCCC;
    border:1px solid #CCCCCC;
    padding: 1px;
}

.popupClass{
    z-index: 3;
}
/*  
    Menu de las graficas
    Menu de los elementos de ext-all
*/
.x-menu-floating ul li,
.popupClass > div{
    text-align: left;
    color: var(--font-color-btn);
    font-family: var(--font-sfUiDisplayHeavy);
    width: 100%;
    box-sizing: border-box;
    padding: 5px 15px;
    margin:2px 0;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: none;
    cursor: pointer;
    display: block;
    font-size: 12px;
    transition: all 200ms ease-out;
}

.popupClass > div.titleOtherOption{
    background-color: #fff;
    color: #5c5c5c;
    font-size: 16px;
    border: solid 1px #b9b8b8;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.popupClass > div.titleOtherOption:hover{
    box-shadow: none;
}

.popupClass > div.dashBoardOption{
    display: block;
    background-color: #fff !important;
    color: #686868;
    width: 100%;
    text-align: left;
    border: solid 1px #b9b8b8;
    border-bottom: none;
    border-radius: 0;
    border-top: none;
    margin: 0;
}

.popupClass > div.dashBoardOption:hover{
    box-shadow: none;
}

.popupClass > div.dashBoardOption > div{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
}

.popupClass > div.dashBoardOption  > div > div:nth-child(1) {
    border-bottom: 1px solid;
}

.popupClass > div.dashBoardOption  > div > div:nth-child(2) {
    background: #686868;
    width: 7px;
    height: 7px;
    margin-right: 10px;
    border-radius: 50%;
}

.popupClass > div.dashBoardOption:nth-last-child(2) {
    border-bottom: solid 1px #b9b8b8;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding-bottom: 10px;
}

.x-menu-floating ul li:hover,
.popupClass > div:hover{
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

.popupClass > div > div  > div{
    font-family: sfUiDisplayHeavy, Helvetica;
}

.x-shadow{
    display: none !important;
}
.x-menu-floating{
    border: 0 !important;
}

.x-menu-floating ul{
    margin: 5px 0;
}

.x-menu-floating ul li{
    background-color: #04B5EB !important;
}

.x-menu-floating .x-menu-item-text>span{
    color: #fff !important;
    font-family: sfUiDisplayHeavy, Helvetica !important;
}

.x-menu-floating ul li.titleOtherOption {
    border: solid 1px #b9b8b8;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    text-align: left;
    /* width: 100%; */
    box-sizing: border-box;
    padding: 5px 15px;
    margin: 2px 0 0;
    cursor: pointer;
    display: block;
    font-size: 16px;
    transition: initial;
}

.x-menu-floating ul li.titleOtherOption a.x-menu-item span{
    color: #5c5c5c;
    font-family: sfUiDisplayHeavy;
}

.x-menu-floating ul li.dashBoardOption {
    background-color: #fff !important;
    width: 100%;
    text-align: left;
    border: solid 1px #b9b8b8;
    border-bottom: none;
    border-radius: 0;
    border-top: none;
    margin: 0;
    font-size: 12px;
    transition: initial;
}

.x-menu-floating ul li.dashBoardOption a.x-menu-item .x-menu-item-text > div {
    display: inline-flex;
    align-items: center;
}

.x-menu-floating ul li.dashBoardOption a.x-menu-item .x-menu-item-text > div > div:nth-child(1) {
    background: #686868;
    width: 7px;
    height: 7px;
    margin-right: 10px;
    border-radius: 50%;
    font-family: sfUiDisplayHeavy;
}

.x-menu-floating ul li.dashBoardOption a.x-menu-item .x-menu-item-text > div > div:nth-child(2) {
    color: #686868 !important;
    font-family: sfUiDisplayHeavy;
    border-bottom: 1px solid;
    transition: all 200ms ease-out;
}

.x-menu-floating ul li.dashBoardOption:hover a.x-menu-item .x-menu-item-text > div > div:nth-child(2) {
    color: #04B5EB !important;
}

.x-menu{
    background-color: transparent !important;
    background-image: none !important;
}

#contextMenu li.dashBoardOption:nth-last-child(1){
    border-bottom: solid 1px #b9b8b8;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding-bottom: 10px;
    box-sizing: border-box;
    height: 29px;
}

div#contextMenu {
    width: auto !important;
}

.targetOption{
    padding: 0 !important;
    margin: 0;
}

.targetOption .popupopion-click {
    /*background-color: #f0f;*/
    padding: 5px 15px;
}