@import "font-awesome-4.6.3/css/font-awesome.min.css";

.pop-over {
    position: relative;
    background-color: rgba(5, 107, 166, 0.6);
    min-height: 190px;
    min-width: 100px;
    border: 1px solid #bbbbbb;
    border-radius: 6px;
    box-shadow: 0 0 7px #000000;
    z-index: 1020;
    overflow:hidden;
    /*height:auto !important;*/
    width:100%;
    text-align: left;
}

.pop-over-selected {
    background-color: rgba(0, 160, 0, 0.6);
}

.pop-over h3 {
    font-size: 14px;
    font-family: Tahoma, Sans;
    color: white;
    margin: 7px 3px 3px 15px;
    text-shadow: 0 0 10px rgba(255, 255, 255 .3);
}

.pop-over h3:hover {
    cursor: default;
}

.pop-inner{
    display: flex;
    flex-direction: column;
    width:100%;
}

.pop-content {
    width:inherit;
    position: static;
    margin-top:8px;
    margin-bottom:5px;
    flex:1;
}

.pop-footer {
    height:45px;
}

.pop-close {
    position: absolute;
    top: 3px;
    right: 0;
    padding: 4px 4px 0 0;
    text-align: center;
    width: 18px;
    height: 14px;
    font: 18px/14px Tahoma, Verdana, sans-serif;
    color: #c3c3c3;
    text-decoration: none !important;
    font-weight: bold;
    background: transparent;
    cursor: default;
    text-decoration: none;
}

.pop-pin {
    position: absolute;
    top: 7px;
    right: 25px;
    padding: 4px 4px 0 0;
    text-align: center;
    width: 16px;
    height: 16px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    color: #c3c3c3;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
    background-image: url("../images/pin-2.png");
    cursor: default;
}

.pop-pin:hover {
    background-image: url("../images/unpin-2.png");
}

.pop-pin-drag {
    background-image: url("../images/unpin-2.png");
}

.pop-pin-drag:hover {
    background-image: url("../images/pin-2.png");
}

.pop-connect {
    position: absolute;
    top: 7px;
    right: 48px;
    padding: 0px 0px 0 0;
    text-align: center;
    width: 16px;
    height: 16px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    color: #c3c3c3;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
    background-image: url("../images/connected.png");
    cursor: default;
}

.pop-connect:hover {
    background-image: url("../images/disconnected.png");
}

.pop-disconnect:hover {
    background-image: url("../images/connected.png");
}

.pop-disconnect {
    position: absolute;
    top: 7px;
    right: 48px;
    padding: 0px 0px 0 0;
    text-align: center;
    width: 16px;
    height: 16px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    color: #c3c3c3;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
    background-image: url("../images/disconnected.png");
}

.pop-exchange {
    position: absolute;
    top: 5px;
    right: 72px;
    padding: 4px 4px 0 0;
    text-align: center;
    width: 16px;
    height: 16px;
    color: #c3c3c3;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
}

.pop-exchange:hover {
    text-decoration: none;
}

.resizable {
    resize: both;   /* Options: horizontal, vertical, both */
    overflow: auto; /* fix for Safari */
}


/** HANDLE extra div **/
.pop-extra {
    position: static;
    margin-top:8px;
    margin-bottom:5px;
    flex: 2;
}

.pop-extra-el {
    margin-left:5px;
    flex: 3;
}

.pop-extra-el .fa-2x {
    font-size: 1.75em;
}

.pop-extra-el>i {
    cursor: pointer;
    width:100%;
    padding-top:2px;
}

.pop-extra-collapse + div {
    display:none !important;
}

.pop-extra-show + div {
    display: block !important;
    margin-left: 25px;
}

.no-keep-ratio {
    height: calc(100% - 45px);
}

.keep-ratio-w {
    height:auto !important;
    width:100%;
}

.keep-ratio-h {
    width:auto !important;
}