body {
    background-color: black;
    color: white;
    font-family: Arial, sans-serif;
    margin: 0px;
    padding: 0px;
}

#webex_big {
        opacity: 0.7;
        padding-top: 15vh;
        text-align: center;    
        position: absolute;
        transition: all 10s;
}

.fadeout {
    opacity: 1;
    animation: fade 0.4s linear forwards;
}

@keyframes fade {
  0% { opacity: 0.7 }
  100% { opacity: 0 }
}

#notification {
    position: absolute;
    left: 20px;
    bottom: 20px;
    
    color: black;
    height: 20px;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    padding-inline: 50px;
    border: rgb(144, 205, 225) 2px solid;
    background-color: lightblue;
    min-width: 300px
}

.notification_warn {
    border: darkred 2px solid !important;
    background-color: red !important;
    color: white !important;
}


#dialogMask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #58585845;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialogMaskHide { 
    display: none !important;
}

#dialogBox {
    background-color: rgb(86, 86, 86);
    width: 700px;
    height: 500px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

#diglogContent{
    flex-grow: 1;
    padding-top: 10px;
}

#main_container {
    display: flex;
    flex-flow: column;
    height: 98dvh;
    justify-content: center;
}

#main_viewport {
    overflow: scroll;
    width: 100%;
    height: 100%;
    padding-top: 20px;
    justify-items: center;
    display: flex;
}
#main_scroll {
    min-width: 100%;
}

#main_view {
    display: flex;
    flex-direction: column;
    min-width: 100%;
    align-items: safe center;
}

#main_title {
    position: absolute;
    left: 20px;
    font-size: x-large;
    color: rgba(0, 0, 128, 1);
    font-weight: bolder;
    z-index: 1001;    
}

#sub_title {
    position: absolute;
    left: 20px;
    font-size: medium;
    color: rgba(0, 0, 128, 1);
    font-weight: bolder;
    padding-top: 30px;    
    z-index: 1000;    
}

#title_text {    
    background-color: transparent;
    border: transparent;
    font-size: x-large;
    font-weight: bolder;
    color: rgba(0, 0, 128, 1);
    width: 400px;
}

#sub_text {    
    background-color: transparent;
    border: transparent;
    font-size: medium;
    font-weight: bolder;
    color: rgba(0, 0, 128, 1);
    width: 400px;
}


.title_enabled {
    color: navy !important;
}

#webex_logo {
    position: absolute;
    top: 15px;
    right: 20px;
}

#webex_logo img {
    height: 65px;
    opacity: 0.4;
}

#main_header {
    font-size: 3vh;
    min-height: 1em;
    max-height: 1em;
    display: flex;
    justify-content: space-between;
}

#main_content {
    position: relative;
    margin: 10px;
    background-color: #cccccc;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    overflow: hidden;
    background-size: 20px 20px;
    background-image:
        linear-gradient(to right, rgba(0, 81, 255, 0.162) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 81, 255, 0.162) 1px, transparent 1px);
}

#main_controls {
    position: absolute;
    bottom: 20px;
    right: 10px;
    z-index: 5000;
}

#main_footer {
    background-color: rgb(37, 37, 37);
    height: 5em;
    min-height: 6em;
    margin-inline: 10px;    
}

.flex_footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#menuBarButtons {
    display: flex;
    justify-content: space-between;
}


.footer_label {
    font-size: smaller;
    color: cyan;
}

.main_common {
    margin: .2em;
    border-radius: 10px;
    padding: 10px;
}

.rootDiv {
    
}

.NodeContainer {
    /* position: relative; */
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 0px dashed lightblue;
    margin-left: 10px;
    margin-right: 10px;
    width: min-content;
}

.NodeItem {
    height: 73px;
    width: 148px;
    color: black;
    text-align: center;
    border-radius: 10px;
    background-color: rgb(233, 233, 233);
    border: 2px rgb(233, 233, 233) solid;
    user-select: none;
    position: relative;
}

.NodeItem * {
    pointer-events: none;
}

.NodeChild {
    display: flex;
}

.mediaSelected {    
    border: 2px red dashed;
}

.dialogHidden {
    display: none !important;
}

.doNotDisplay {
    display: none;
}

.home {
    background-image: url("../img/home.png");
    background-repeat: no-repeat;
    background-size: 130px 65px;
    background-position: center;
    position: relative;
}

.media {
    background-image: url("../img/media.png");
    background-repeat: no-repeat;
    background-size: 130px 65px;
    background-position: center;
}

.location {
    background-image: url("../img/location.png");
    background-repeat: no-repeat;
    background-size: 90px 50px;
    background-position-x: 35px;
    background-position-y: 5px;
}

.Phones {
    background-image: url("../img/WxCphone.png");
    background-repeat: no-repeat;
    background-size: 65px;
    background-position-y: 7px;
    background-position-x: 25px;
}

.CCP {
    background-image: url("../img/ccp.png");
    background-repeat: no-repeat;
    background-size: 100px 50px;
    background-position-y: 5px;
    background-position-x: center;
}

.LGW {
    background-image: url("../img/lgw.png");
    background-repeat: no-repeat;
    background-size: 70px 45px;
    background-position-y: 10px;
    background-position-x: 10px;
}

.SBC {
    background-image: url("../img/sbc.png");
    background-repeat: no-repeat;
    background-size: 70px 45px;
    background-position-y: 15px;
    background-position-x: 10px;
}

.WxC {
    background-image: url("../img/WxC.png");
    background-repeat: no-repeat;
    background-size: 110px 52px;
    background-position-y: 3px;
    background-position-x: center;
}

.WxCC {
    background-image: url("../img/WxCC.png");
    background-repeat: no-repeat;
    background-size: 130px 70px;
    background-position-y: 0px;
    background-position-x: 25px;
}

.SP {
    background-image: url("../img/cloud.png");
    background-repeat: no-repeat;
    background-size: 100px 50px;
    background-position-y: 10px;
    background-position-x: 25px;
}

.cucm {
    background-image: url("../img/cucm.png");
    background-repeat: no-repeat;
    background-size: 100px 50px;
    background-position-y: 5px;
    background-position-x: center;
}

.byoPSTN {
    background-image: url("../img/byoPSTN.png");
    background-repeat: no-repeat;
    background-size: 100px 50px;
    background-position-y: 5px;
    background-position-x: center;
}

.PSTN {
    background-image: url("../img/byoPSTN.png");
    background-repeat: no-repeat;
    background-size: 100px 50px;
    background-position-y: 5px;
    background-position-x: center;
}

.cucmPhone {
    background-image: url("../img/OnPremPhone.png");
    background-repeat: no-repeat;
    background-size: 65px;
    background-position-y: 7px;
    background-position-x: 25px;
}

.WbxApp {
    background-image: url("../img/WebexApp.png");
    background-repeat: no-repeat;
    background-size: 65px;
    background-position-y: 5px;
    background-position-x: 25px;
}

.WbxAppCUCM {
    background-image: url("../img/WebexAppCUCM.png");
    background-repeat: no-repeat;
    background-size: 65px;
    background-position-y: 5px;
    background-position-x: 25px;
}

.webedge {
    background-image: url("../img/webedge.png");
    background-repeat: no-repeat;
    background-size: 80px 60px;
    background-position-y: 5px;
    background-position-x: 65px;
}


.WebRTC {
    background-image: url("../img/WebRTC.png");
    background-repeat: no-repeat;
    background-size: 65px;
    background-position-y: 5px;
    background-position-x: 25px;
}

.jabber {
    background-image: url("../img/jabber.png");
    background-repeat: no-repeat;
    background-size: 65px;
    background-position-y: 5px;
    background-position-x: 25px;
}

.MS {
    background-image: url("../img/ms.png");
    background-repeat: no-repeat;
    background-size: 80px 50px;
    background-position-y: 5px;
    background-position-x: center;
}

.DI {
    background-image: url("../img/di.png");
    background-repeat: no-repeat;
    background-size: 110px 65px;
    background-position-y: 5px;
    background-position-x: center;
}

.ms365 {
    background-image: url("../img/ms365.png");
    background-repeat: no-repeat;
    background-size: 100px 60px;
    background-position-y: 5px;
    background-position-x: center;
}

.NodeBar {
    height: 50px;
    width: 100%;

}


.NodeUpright {
    color: grey;
    height: 14px;
    width: 3px;
    background-color: grey;
}

.NodeText {
    background-color: rgba(245, 222, 179, 0) !important;
}

.home .NodeText {
    font-size: small;
    float: right;
    padding-right: 5px;
    position: relative;
    top: -10px;
    display: none;
}

.media .NodeText {    
    display: none;
}

.location .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.CCP .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.WxC .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.WxCC .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.SP .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.DI .NodeText {
    display: none;
}

.PSTN .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.MS .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.ms365 .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.Phones .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.Phones .NodeText2 {    
    position: absolute;
    top: 0px;
    left: 110px;
}

.jabber .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.jabber .NodeText2 {    
    position: absolute;
    top: 0px;
    left: 110px;
}


.WbxApp .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.WbxAppCUCM .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.WbxApp .NodeText2 {    
    position: absolute;
    top: 0px;
    left: 110px;
}

.WbxAppCUCM .NodeText2 {    
    position: absolute;
    top: 0px;
    left: 110px;
}


.LGW .NodeText {
    font-size: small;
    position: absolute;
    top: 8px;
    left: 81px;
    width: 67px;
    height: 35px;
    justify-content: center !important;
    display: flex;
    align-items: center;
}

.SBC .NodeText {
    font-size: small;
    position: absolute;
    top: 8px;
    left: 81px;
    width: 67px;
    height: 35px;
    justify-content: center !important;
    display: flex;
    align-items: center;
}

.LGW .NodeText2 {
    font-size: x-small;
    top: 48px;
    position: relative;
    text-align: left;
    left: 15px;
    width: 80%;
}

.cucm .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.byoPSTN .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.cucmPhone .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;
}

.cucmPhone .NodeText2 {    
    position: absolute;
    top: 0px;
    left: 110px;
}


.WebRTC .NodeText {
    font-size: small;
    padding-top: 50px;
    position: relative;
    top: -5px;    
}

.WebRTC .NodeText2 {    
    position: absolute;
    top: 0px;
    left: 110px;
}


.webedge .NodeText {
    font-size: small;
    position: relative;
    text-align: left;
    top: 10px;
    left: 10px;
    width: 10px;
}

.NodeText3 {
        position: absolute;
        font-size: x-small;
        top: 25px;
        left: 105px;
}



.connector {
    stroke: grey;
    stroke-width: 4;
    fill: none;
}

button {
    background-image: linear-gradient(#0dccea, #0d70ea);
    border: 0;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, .3) 0 5px 15px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: Montserrat, sans-serif;
    font-size: .9em;
    margin: 5px;
    padding: 10px 15px;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

button:hover {
    background-image: linear-gradient(#075b68, #0d70ea);
}

#btn_DEL,#btn_DEL-T,.deleteButton {
    background-image: linear-gradient(#ea5b81, #ea0d27) !important;
}

.smallButton {
    padding: 3px 3px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 3px;
    font-size: 15px
}

button.designButton {
    font-size: small;
    background-color: #ffffff42 !important;
    color: rgba(0, 0, 128, 0.329);
    background-image: none;
}

button.designButton:hover {    
    color: #ffffff42 !important;
    background-color: rgba(0, 0, 128, 0.329) !important;    
}

.dialogInput {
        position: absolute;        
        height: 32px;
        padding: 10px;        
        display: flex;
        justify-content: center;
        padding-left: 20px;
        padding-right: 20px;
        z-index: 5000;
        font-size: x-small;
        color: black;
}

.dialogInputHide {
    display: none !important;
}

#dialogInputGeneral {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 10px;
    height: 50px;
    border-radius: 15px;
    border: 2px navy solid;
}

#dialogInputGeneral select {
    border-radius: 15px;
}

#dialogInputLGW {
        display: flex;
        background: white;
        height: 130px;
        width: 201px;
        justify-content: space-around;
        padding: 10px;
        border-radius: 10px;    
        border: 2px navy solid;
}

#dialogAgentCount {
    display: flex;
    background: white;
    height: 25px;
    width: 150px;
    justify-content: space-around;
    padding: 10px;
    border-radius: 10px;    
    border: 2px navy solid;
}

#dialogInputText {
    border-radius: 15px;
    padding-left: 10px;
}

.annotationContainer {
    position: absolute;
    background-color: transparent;
    padding: 5px;
    width: fit-content;
    height: fit-content;
    border: 2px transparent solid;
    top: 100px;
    right: 50px;
    pointer-events: all;
    z-index: 5000;
}

.annotationText {
    min-width: 50px;
    min-height: 20px;
    border: 1px navy solid;            
    font-family: Arial, sans-serif;
    font-size: medium;
    background-color: transparent;
    color: navy;
    text-align: center;      
    pointer-events: all;  
}

.annotationLock {
    resize: none;
    pointer-events: none;
    user-select: none;
    border: 1px transparent solid !important;            
}

.NodeCountry {
    background-color: rgb(126, 199, 255);
    position: absolute;
    right: -15px;
    top: -20px;
    padding: 5px;
    border-radius: 50%;
}