.node {
    stroke: #fff;
    stroke-width: 1.5px;
}

.notifyjs-corner{
    position: absolute;
    left:1px;
    width: 300px;
}

.axis {
    opacity: 0.5;
    font: 10px sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.axis .domain {
    fill: none;
    stroke: #000;
    stroke-opacity: .3;
    stroke-width: 4px;
    stroke-linecap: round;
}

.axis .halo {
    fill: none;
    stroke: #ddd;
    stroke-width: 3px;
    stroke-linecap: round;
}

.slider .handle {
    fill: #fff;
    stroke: #000;
    stroke-opacity: .5;
    stroke-width: 1.25px;
    cursor: grab;
}
text.text-hover {
    fill: #00C;
}

#header {
    font-family: 'Open Sans', sans-serif;
    color: #555;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 50px;
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 1;
    text-shadow: #EDEDED 3px 2px 0;
    text-align: center;
    background-image: -webkit-linear-gradient(left top, transparent 0%, transparent 0%, red 25%, blue 50%, transparent 0%, transparent 0%, deepskyblue 0%);
    background-size: 10px 10px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: -5;
    display: block;
    text-shadow: none;

}
.header{
    background-color: lightgray;
}


h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 20px;
    text-align: center;
}

h2 {
    font-family: 'Dancing Script', cursive;
    font-size: 20px;
    text-align: center;
}

h3 {
    font-family: 'Dancing Script', cursive;
    font-size: 20px;
    text-align: center;
}
h4 {
    font-family: 'Dancing Script', cursive;
    font-size: 20px;
    text-align: center;
}




/*input#filepicker {*/
/*    display: inline-block;*/
/*    padding: 30px 0 0 0;*/
/*    height: 30px;*/
/*    overflow: hidden;*/
/*    !*-webkit-box-sizing: border-box;*!*/
/*    !*-moz-box-sizing: border-box;*!*/
/*    box-sizing: border-box;*/
/*    background: url('https://img.icons8.com/cotton/64/000000/upload-to-cloud--v1.png') center center no-repeat #e4e4e4;*/
/*    border-radius: 20px;*/
/*    !*background-size: 60px 60px;*!*/
/*}*/

.btn {
    border: 2px solid gray;
    color: gray;
    background-color: whitesmoke;
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;

}

#network{
    border: 1px solid black;
    position:absolute;
    top: 200px;
    left: 1px;
    width:450px;
    height:1000px;
    resize: both;
}
#chart{
    border: 1px solid black;
    position:absolute;
    top:200px;
    left:451px;
    width:450px;
    height:1000px;
}

.chart-container{
    position:absolute;
    top: 800px;
    left: 0px;
    width:20px;
    height:20px;
}
#marksChart{
    visibility: hidden;
}
#marksChart1{
    visibility: hidden;
}

#loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid gray;
    border-right: 16px solid black;
    border-bottom: 16px solid lightgray;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 300px;
    top: 8px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


#controller {
    border: 1px solid black;
    position: absolute;
    left: 1px;
    top: 130px;
    display: inline-block;
    outline: none;
    height: 100px;
    width: 1520px;
    background-color: lightgray;
}

.rectheatmap{
    visibility: visible;
}

.displayrect {
    visibility: visible;
}

#button1 {
    background-color: #4CAF50; /* Green */
    border: 2px solid gray;
    color: white;
    padding: 5px 52px;
    text-align: center;
    text-decoration: none;
    /*display: inline-block;*/
    font-size: 10px;
    position: absolute;
    top: 2px;
    cursor: pointer;
}
#button4 {
    background-color: #4CAF50; /* Green */
    border: 2px solid gray;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    /*display: inline-block;*/
    font-size: 10px;
    position: absolute;
    top:45px;
    left:1150px;
    cursor: pointer;
}
#button3 {
    background-color: #4CAF50; /* Green */
    border: 2px solid gray;
    color: white;
    padding: 5px 33px;
    text-align: center;
    text-decoration: none;
    /*display: inline-block;*/
    font-size: 10px;
    position: absolute;
    top:58px;
    cursor: pointer;
}

#button2 {
    background-color: #4CAF50; /* Green */
    border: 2px solid gray;
    color: white;
    padding: 5px 33px;
    text-align: center;
    text-decoration: none;
    /*display: inline-block;*/
    font-size: 10px;
    position: absolute;
    top:20px;
    left: 1150px;
    cursor: pointer;
}

#button5 {
    background-color: #4CAF50; /* Green */
    border: 2px solid gray;
    color: white;
    padding: 5px 54px;
    text-align: center;
    text-align: center;
    text-decoration: none;
    /*display: inline-block;*/
    font-size: 10px;
    position: absolute;
    top:30px;
    left: 0px;
    cursor: pointer;
}

#button1:hover {background-color: deepskyblue;
}

#button2:hover {background-color: deepskyblue;
}

#button3:hover {background-color: deepskyblue;
}
#button4:hover {background-color: deepskyblue;
}

#button5:hover {background-color: deepskyblue;
}

/*.slidecontainer_perplexity{*/
/*    position: relative;*/
/*    height:25px;*/
/*}*/
/*.slidecontainer_iteration{*/
/*    position: relative;*/
/*    height:25px;*/
/*}*/
/*#live_canvas{*/
/*    position: relative;*/
/*    top:-150px;*/
/*    left:350px;*/
/*}*/
/*#duration{*/
/*    position: relative;*/
/*    top: -20px;*/
/*    left: 25px*/
/*}*/
#iteration_output{
    position: relative;
    top: -20px;
    left: 25px
}
#perplexity_output{
    position: relative;
    top: -20px;
    left: 25px
}
#tsne{
    position: absolute;
    left: 900px;
    top:-10px;
}

/*#tooltip_all {*/
/*    !*width:520px !important;*!*/
/*    height: 635px !important;*/
/*}*/

#tooltip_radar{
    position: absolute;
    width: 200px !important;
    height: 200px !important;
    left: 300px;
    top: 265px;
}

#tooltip_radar_compare{
    position: absolute;
    width: 200px !important;
    height: 200px !important;
    left: 100px;
    top: 265px;
}
/*Make Dynamic SVG*/
.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    vertical-align: top;
    overflow: hidden;
}
.svg-content {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

.card-header{
    height: 40px;
}

/* Style Control Panel for Tsne Input*/
input[type='range'] {
    align-self: center;
    margin: -0.75em 0;
    border: solid 1.5em transparent;
    padding: 0;
    width: 100%;
    height: 2.25em;
    background: repeating-linear-gradient(90deg, #c5b9b9, #c5b9b9 0.0625em, transparent 0.0625em, transparent 2em) no-repeat 50% 0.4375em border-box, repeating-linear-gradient(90deg, #c5b9b9, #c5b9b9 0.0625em, transparent 0.0625em, transparent 2em) no-repeat 50% 4.1875em border-box, linear-gradient(90deg, rgba(195, 183, 183, 0), #c3b7b7, rgba(195, 183, 183, 0)) no-repeat 50% 50% border-box;
    background-size: 12.0625em 0.625em, 12.0625em 0.625em, 100% 2.25em;
    font-size: 1em;
    cursor: pointer;
}
input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
    position: relative;
    width: 13em;
    height: 0.5em;
    border-radius: 0.1875em;
    background: rgba(202, 191, 191, 0.825);
}
input[type='range']::-moz-range-track {
    width: 13em;
    height: 0.5em;
    border-radius: 0.1875em;
    background: rgba(202, 191, 191, 0.825);
}
input[type='range']::-ms-track {
    border: none;
    width: 13em;
    height: 0.5em;
    border-radius: 0.1875em;
    background: rgba(202, 191, 191, 0.825);
    color: transparent;
}
input[type='range']::-ms-fill-lower {
    display: none;
}
input[type='range']::-webkit-slider-thumb {
    margin-top: -0.75em;
    border: none;
    width: 4em;
    height: 2em;
    border-radius: 0.5em;
    box-shadow: -0.125em 0 0.25em #928886, inset -1px 0 1px #fff;
    background: radial-gradient(#ebe1e0 10%, rgba(235, 225, 224, 0.2) 10%, rgba(235, 225, 224, 0) 72%) no-repeat 50% 50%, radial-gradient(at 100% 50%, #e9dfde, #eae1de 71%, transparent 71%) no-repeat 2.5em 50%, linear-gradient(90deg, #e9dfde, #d0c8c6) no-repeat 100% 50%, radial-gradient(at 0 50%, #d0c6c5, #c6baba 71%, transparent 71%) no-repeat 0.75em 50%, linear-gradient(90deg, #e3d9d8, #d0c6c5) no-repeat 0 50%, linear-gradient(#cdc0c0, #fcf5ef, #fcf5ef, #cdc0c0);
    background-size: 0.825em 100%;
}
input[type='range']::-moz-range-thumb {
    border: none;
    width: 4em;
    height: 2em;
    border-radius: 0.5em;
    box-shadow: -0.125em 0 0.25em #928886, inset -1px 0 1px #fff;
    background: radial-gradient(#ebe1e0 10%, rgba(235, 225, 224, 0.2) 10%, rgba(235, 225, 224, 0) 72%) no-repeat 50% 50%, radial-gradient(at 100% 50%, #e9dfde, #eae1de 71%, transparent 71%) no-repeat 2.5em 50%, linear-gradient(90deg, #e9dfde, #d0c8c6) no-repeat 100% 50%, radial-gradient(at 0 50%, #d0c6c5, #c6baba 71%, transparent 71%) no-repeat 0.75em 50%, linear-gradient(90deg, #e3d9d8, #d0c6c5) no-repeat 0 50%, linear-gradient(#cdc0c0, #fcf5ef, #fcf5ef, #cdc0c0);
    background-size: 0.825em 100%;
}
input[type='range']::-ms-thumb {
    border: none;
    width: 4em;
    height: 2em;
    border-radius: 0.5em;
    box-shadow: -0.125em 0 0.25em #928886, inset -1px 0 1px #fff;
    background: radial-gradient(#ebe1e0 10%, rgba(235, 225, 224, 0.2) 10%, rgba(235, 225, 224, 0) 72%) no-repeat 50% 50%, radial-gradient(at 100% 50%, #e9dfde, #eae1de 71%, transparent 71%) no-repeat 2.5em 50%, linear-gradient(90deg, #e9dfde, #d0c8c6) no-repeat 100% 50%, radial-gradient(at 0 50%, #d0c6c5, #c6baba 71%, transparent 71%) no-repeat 0.75em 50%, linear-gradient(90deg, #e3d9d8, #d0c6c5) no-repeat 0 50%, linear-gradient(#cdc0c0, #fcf5ef, #fcf5ef, #cdc0c0);
    background-size: 0.825em 100%;
}
input[type='range']::-webkit-slider-runnable-track:before, input[type='range'] /deep/ #track:before, input[type='range']::-webkit-slider-runnable-track:after, input[type='range'] /deep/ #track:after {
    position: absolute;
    font: 0.75em/8em trebuchet ms, arial, sans-serif;
}
input[type='range']::-webkit-slider-runnable-track:before, input[type='range'] /deep/ #track:before {
    top: 50%;
    right: 100%;
    transform: translate(50%, -50%) rotate(90deg) translate(0, 32%);
}
input[type='range']::-webkit-slider-runnable-track:after, input[type='range'] /deep/ #track:after {
    left: 50%;
    width: 3em;
    word-spacing: 1em;
}
input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track:before, input[type='range']:nth-of-type(1) /deep/ #track:before {
    content: "320Hz";
}
input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track:after, input[type='range']:nth-of-type(1) /deep/ #track:after {
    bottom: 100%;
    transform: translate(-50%, 50%) rotate(90deg) translate(-4.375em);
    text-align: right;
}
input[type='range']:nth-of-type(2)::-webkit-slider-runnable-track:before, input[type='range']:nth-of-type(2) /deep/ #track:before {
    content: "600Hz";
}
input[type='range']:nth-of-type(3)::-webkit-slider-runnable-track:before, input[type='range']:nth-of-type(3) /deep/ #track:before {
    content: "1KHz";
}
input[type='range']:nth-of-type(4)::-webkit-slider-runnable-track:before, input[type='range']:nth-of-type(4) /deep/ #track:before {
    content: "3KHz";
}
input[type='range']:nth-of-type(5)::-webkit-slider-runnable-track:before, input[type='range']:nth-of-type(5) /deep/ #track:before {
    content: "6KHz";
}
input[type='range']:nth-of-type(6)::-webkit-slider-runnable-track:before, input[type='range']:nth-of-type(6) /deep/ #track:before {
    content: "12KHz";
}
input[type='range']:nth-of-type(6)::-webkit-slider-runnable-track:after, input[type='range']:nth-of-type(6) /deep/ #track:after {
    top: 100%;
    transform: translate(-50%, -50%) rotate(90deg) translate(4.375em);
}
input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track:after, input[type='range']:nth-of-type(6)::-webkit-slider-runnable-track:after, input[type='range']:nth-of-type(1) /deep/ #track:after, input[type='range']:nth-of-type(6) /deep/ #track:after {
    content: '+18 0 -18';
}
input[type='range']:focus {
    outline: none;
}
input[type='range']:focus::-webkit-slider-runnable-track {
    background: #898586;
}
input[type='range']:focus::-moz-range-track {
    background: #898586;
}
input[type='range']:focus::-ms-track {
    background: #898586;
}

/* Table ToolTip */
.wsTooltip {
    position: absolute;
    top: 600px;
    left: 300px;
    text-align: center;
    width: 250px;
    max-width: 350px;
    height: auto;
    font: 12px sans-serif;
    pointer-events: none;
    z-index: 300;
    overflow: auto;
    border-radius: 12px;
    border: 0.5px solid #676767;
}
.tableTooltip{
    table-layout: fixed;
    width: 100%;
    word-wrap: break-word;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
    border-style: hidden;
    width:100%;
    /*max-width: 100%;*/
}
.tableTooltip th {
    text-align: left;
    padding: 6px;
}
.tableTooltip td {
    text-align: left;
    padding: 3px 6px;
}
.tableTooltip th {
    background-color: #5bc0de;
    color: white;
}

tr:nth-child(odd){background-color: #efefef
}
tr:nth-child(even){background-color: #dadada
}
.column-Damage_Intensity {
    width: 110px;
}
.column-Location {
    width: 20%;
}
.column-Total_Report {
    width: 80px;
}
.column-Note {
    width: 60%;
}
tr:first-child th:first-child { border-top-left-radius: 10px; }
tr:first-child th:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }