body {
    font-family : "Open Sans";
    font-weight : 300;
}

/*to prevent overscrolling on chrome http://stackoverflow.com/questions/12046315/prevent-overscolling-of-web-page*/
html {
    overflow: hidden;
    height: 100%;
}
body {
    height: 100%;
    overflow: auto;
}

.larger {
    font-size: larger;
}
.smaller {
    font-size: smaller;
}

.modal-body .row:nth-of-type(1) {
    margin-top: 0px;
}

.modal-body .row:nth-of-type(n+2) {
    margin-top: 44px;
}

.modal-body .row h3 {
     margin: 0px;
 }

.modal-body .row.closer {
    margin-top: 14px;
}

#diagram-settings-long, #diagram-settings-short {
    display: inline;
    width: initial;
    height: initial;
    margin-top: 6px;
}

#preloader {
    position : absolute;
    top: 50%;
    left: 50%;
    z-index: 2001;
    transform: translateX(-50%);
    font-size: 50px;
    color: #757575;
    font-style: italic;
    /* text-align: center; */
}
#cookie-banner .close {
  margin-right: 10px;
}

#cookie-banner .close:hover {
    color:#dddddd;
}

#cookie-banner span {
    color: #dddddd;
}

#cookie-banner {
    position : fixed;
    bottom: 0px;
    right : 0px;
    left : 0px;
    padding: 20px;
    font-size: 16px;
    z-index: 11001;
    background: rgba(0, 0, 0, 0.7);
    color: #999999;
    display: none;
}

#alert-holder {
    position : absolute;
    top: 10px;
    right : 10px;
    z-index: 2000;
}

#cta-holder {
    /* position: relative; */
    /* pointer-events: none; */
    /* top: 0px; */
    /* right : 0px; */
    z-index: 102;
    /* border: beige 1px; */
    /* border-style: solid; */
    /* border-color: red; */
    /* height: 100vh; */
    /* width: 100%; */
}

.modal-header.nav-tabs {
    padding: 24px 24px 0px 0px;
}

#embed-tos{
    display: none;
    font-size: small;
}

#table-select-all {
    margin-left: -14px;
    /* margin-bottom: 5px; */
    /* padding-top: 15px; */
    padding-bottom: 15px;
}
#table-download-all {
    margin-left: -14px;
    /* margin-top: 10px; */
    padding-bottom: 0px;
    padding-top: 20px;
}

#table-modal-body table {
    width: 100%;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    text-overflow: ellipsis;
}
#table-modal-body td:nth-child(3), #table-modal-body th:nth-child(3){
    text-align: right;
    white-space: nowrap;
}
#table-modal-body td:nth-child(2), #table-modal-body th:nth-child(2){
    padding: 0px 10px 0px 10px;
    max-width: 130px;
}
#table-modal-body td:nth-child(1), #table-modal-body th:nth-child(1){max-width: 280px;}



/*http://stackoverflow.com/questions/18053408/vertically-centering-bootstrap-modal-window*/
.modal-splash {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    pointer-events:none;
}

.modal-splash a {

}

.modal-splash .modal-content {
    pointer-events: all;
}

.modal-splash .modal-body {
    background: #ffffff;
    width: 865px;
    /* overflow: hidden; */
    text-align: center;
    height: 600px;
}

#plans-splash iframe {
    width: 100%;
    height: 470px;
    /* overflow: hidden; */
    margin-top: 10px;
}

#debug-alert {
    position : absolute;
    top: 50px;
    right : 20px;
    z-index: 2000;
}

.modal-vertical-centered {
    transform: translate(0, 50%) !important;
    -ms-transform: translate(0, 50%) !important; /* IE 9 */
    -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}
#data-import-modal a.btn.btn-link {
    margin-left: -14px;
    /* margin-bottom: 20px; */
}

#import-instructions .field {
    border: 1px solid #e3e3e3;
    padding: 0px 6px 0px 6px;
    margin-right: 5px;
    font-size: smaller;
}

#import-instructions .example {
    display: block;
    text-align: center;
    margin: 50px;
}

#import-instructions .example img {
    width: 280px;
    height: 78px;
    display: block;
    margin: 0 auto;
    margin-bottom: 4px;
}

#import-instructions .example i {
    position: relative;
    display: inline-block;
    width: 1px;
    height: 30px;
    background-color: #e3e3e3;
    left: 0px;
    top: 0px;
    margin-left: 40px;
    margin-right: 40px;
}

#import-instructions .example i:nth-of-type(4) {
    transform: rotateZ(-40deg);
    /* margin-right: 5px; */
}
#import-instructions .example i:nth-of-type(5) {
    /* transform: rotateZ(10deg); */
    margin-left: 10px;
    margin-right: 10px;
    /* margin-top: 3px; */
    height: 25px;
}
#import-instructions .example i:nth-of-type(6) {
    transform: rotateZ(40deg);
}

#import-instructions .example .field {
    margin-left: 15px;
    margin-right: 15px;
}


#import-instructions .example strong {
    display: block;
    margin: 0 auto;
    padding-right: 13px;
    font-size: larger;
}

#import-instructions .well {
    background-color: #ffffff;
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.3);
    border-radius: 0px;
    border : 0px;
    /* width: 90%; */
    margin-left: 2px;
    margin-right: 8px;
    margin-top: 7px;
    /* font-weight: bold; */
    font-size: larger;
}

.tour-title-2 {
    float:right;
}

#tour-holder-url {
    position:absolute;
    top: 0px;
    left: 300px;
    width: 1px;
    height: 1px;
    z-index: 1000;
    pointer-events: none;
}

#tour-holder-add {
    position:absolute;
    bottom:87px;
    right: 311px;
    width: 1px;
    height: 1px;
    z-index: 1000;
    pointer-events: none;
}

#tour-holder-menu {
    position:absolute;
    top:200px;
    right: 220px;
    width: 1px;
    height: 1px;
    z-index: 1000;
    pointer-events: none;
}

.tour-img {
    width: 246px;
    height : 125px;
    display: block;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}
.tour-img-feedback {
    width: 43px;
    height : 43px;
    display: inline;/*
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;*/
}

#tour-click-icon {
    font-size: 50px;
}

#tour-click-icon span:nth-child(1) {
    color: #3a87ad;
    position: absolute;
    top: 152px;
    left: 212px;
    z-index: 1;
}

#tour-click-icon span:nth-child(2) {
    color: #77B8F8;
    position: absolute;
    top: 151px;
    left: 211px;
    z-index: 2;
}

#main-logo {
    position:absolute;
    bottom: 15px;
    right:15px;
    z-index: 2;
}

#main-menu {
    position:absolute;
    top: 15px;
    right:15px;
    z-index: 200;
    font-size: 20px;
}

.dropdown-menu {
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 0px;
    border : 0px;
    min-width: 190px;
    cursor: pointer;
}

/*#main-menu-dropdown, #class-selector-dropup {
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 0px;
    border : 0px;
    min-width: 190px;
}*/
#main-menu-dropdown p {
    margin: 15px 30px 15px 30px;
}

#batch-button {
    position:absolute;
    top: 15px;
    right:55px;
    z-index: 100;
    font-size: 12px;
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 0px;
    border : 0px;
}

.inside-dropdown {
    padding: 10px 20px;
}

.search-connected {
    height: 34px;
    background-color: #F3F3F3;
    padding: 6px 12px;
    border: 0px solid #cccccc;
}

.search-connected .del {
    float: right;
    margin-top: 2px;
}

#search {
    position:relative;
    top : 15px;
    left : 15px;
    width : 360px;
    z-index: 101;

}
.input-group.search-bar {
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}

.empty-message {
    display: block;
    padding: 12px 15px 12px 15px;
    font-weight: normal;
    white-space: nowrap;
}

.search-delimiter {
    padding: 12px 15px 12px 15px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 10px;
    background-color: #f5f5f5;
    text-align: left;

    color: #77B8F8;
    font-weight: 600;
}

.search-delimiter span {
    font-size: 14px;
    color: #333333;
    font-weight: 300;
 }

.search-bar .btn {
    border : 0px;
    width: 50px;
    height: 34px;
    min-width: 0px;
}

#search .form-control {
    border-radius: 0px;
    border : 0px;
}

.searchclear {
    position:absolute;
    right:58px;
    top:11px;
    height:14px;
    margin:auto;
    font-size:11px;
    cursor:pointer;
    color:#000;
    z-index: 10000;
    display: none;
    opacity: 0.2;
    filter: alpha(opacity=20);
}

.searchclear:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
/*
.search-results {
    text-align: left;
    cursor: pointer;
    display:table;
    width:100%
}*/
/*.search-name {
    !*padding: 10px 15px 2px 15px;*!
}
.search-country {
    !*padding: 0px 15px 10px 15px;*!
    font-size: smaller;
    color: #888888;
}*/


.slider-but {
    /* width: 12px; */
    /* height: 12px; */
    /* background-color: #77B8F8; */
    color: #77B8F8;
    font-size: 9px;
    cursor: pointer;
}

.slider {
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
}
#zoom-slider {
    position: absolute;
    margin-top: 28px;
    margin-left: 18px;
    float:left;
    z-index: 100;
    display: none;
}

#compare-icons {
    z-index: 3;
    position: absolute;
    left: -67px;
    bottom: -87px;
    width: 500px;
    padding-left: 0px;
    margin-bottom: 0px;
    /* display: none; */
}

#compare-queue .panel {
    position: absolute;
    left: -82px;
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
    border : 0px;
}

#compare-queue {
    position: absolute;
    left: 50%;
    bottom: 102px;
    z-index: 100;
    width: 165px;
}

#compare-pos-1 {
    margin-right: 15px;
}

#compare-template {
    display: none;
}

.compare-icon {
    float: left;
    display: block;
    background-color: #e2e2e2;
    width: 60px;
    height: 40px;
    margin-right: 15px;
}
.compare-pos {
    float: left;
    display: block;
    background-color: #e2e2e2;
    width: 60px;
    height: 40px;
}

.compare-action {
    text-align: center;
    margin-bottom: 10px;
}

.compare-action .btn-link {
    font-weight: bold;
    text-transform: uppercase;
    /* color: #555555; */
}

.compare-action .nav-icon {
    /* font-size: 12px; */
    font-weight: normal;
}



#multiselect {
    position:relative;
    margin-top : 18px;
    margin-left : 15px;
    width : 360px;
    float:left;
    z-index: 100;
    display: none;
}

#multiselect .panel {
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
    border : 0px;
    margin-top: 0px;
    /* border-top-color: #eeeeee; */
    /* border-top-width: 1px; */
    /* border-top-style: solid; */
}

#beta-tag {
    position:absolute;
    margin-top : 18px;
    margin-left : 380px;
    z-index: 201;
}

#navigation {
    position:relative;
    margin-top : 15px;
    margin-left : 15px;
    width : 360px;
    float:left;
    z-index: 100;
    display: none;
}

#navigation .panel {
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
    border : 0px;
    margin-top: 3px;
}

.nav-name {
    font-size: 17px;
    font-weight: 600;
}

.nav-sum {
    /* font-weight: 600; */
    font-size: 20px;
    margin: 0px;
}

.nav-code {
    margin-top: -2px;
}

.nav-code span {
    display: inline;
    margin-left: -4px;
    margin-top: 0px;
    font-size: 10px;
    padding: 2px 4px;
    font-weight: normal;
    color: rgba(48, 67, 105, 0.8);
    border: 1px solid;
    border-color: rgba(48, 67, 105, 0.34);
}

.nav-blue {
    font-size: 10px;
    /* color: #77B8F8; */
    color: #77B8F8;
    font-weight: 600;

}

#nav-panel-0 .btn-link:hover,
#nav-panel-0 .btn-link:focus {
    text-decoration: none;
}

.nav-buttons .btn-link {
    font-weight: bold;
    text-transform: uppercase;
    color: #555555;
    /* max-width: 57px; */
    /* overflow: initial; */
    /* height: 64px; */
    /* overflow-wrap: normal; */
}

.nav-buttons .btn-link:hover {
    color: #aaaaaa;
}

#nav-panel-0 .nav-icon {
    font-size: 16px;
    font-weight: normal;
}

#nav-panel-0 .nav-icon.left {
    transform: rotate(270deg) scaleY(2) scaleX(-1.2);
    display:inline-block;
}

#nav-panel-0 .nav-icon.right {
    transform: rotate(90deg) scaleY(2) scaleX(-1.2);
    display:inline-block;
}

.no-padding {
    padding: 0px;
}

.row.nav-buttons {
    margin-top: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: -15px;
    background-color: #F2F2F2;
    border: solid #e2e2e2;
    border-width: 1px 0px 0px 0px;
    /* height: 84px; */
}

button.text-primary:hover {
    color: #77B8F8;
}

#navigation .panel-heading {
    /* background-color: #c8edfa; */
    /* font-size: 100%; */
    /* color: inherit; */
}

.nav-class {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.nav-class-tab {
    display: table-cell;
    text-align: center;
    padding: 10px 10px;
    font-size: 13px;
    border-style : solid;
}

.nav-tab-active {
    cursor: default;
    color : #555555;
    border-width: 5px 0px 0px 0px;
    background-color: #ffffff;
}

.nav-tab-inactive {
    cursor: pointer;
    color : #555555;
    border-width: 0px 0px 5px 0px;
    background-color: #f0f0f0;
}

.nav-tab-disabled {
    cursor: default;
    color : #d6d6d6;
    border-width: 0px 0px 0px 0px;
    background-color: #f0f0f0;
}

.nav-ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.nav-ul li {
    display: table;
    width: 100%;
}

.nav-ul li:nth-child(even) {
    background: #ffffff;
}
/*.nav-ul li:nth-child(even) {
    background: #FdFdFd;
}*/

/*.nav-ul li:first-child {
    margin-top: 20px;
}
.nav-ul li:last-child {
    margin-bottom: 20px;
}*/

.ghost {
    background-color: #fff;
}

#nav-pie-from-chevron, #nav-pie-to-chevron {
    float:right;
}

#nav-from-ul, #nav-to-ul {
    display: table;
    width: 100%;
}

.nav-row {
    display: table-row;
}

.nav-row .grip {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width : 16px;
}

.nav-row .node-name {
    display: table-cell;
    vertical-align: middle;
    width: 250px;
    padding: 12px 0 12px 0;
}

.nav-row .diagram-name {
    display: table-cell;
    vertical-align: middle;
    width: 200px;
    padding: 12px 0 12px 0;
    font-weight: bold;
}

.nav-row .code  {
    margin-left: -4px;
    display: inline;
    font-size: 65%;
    padding: 1px 4px;
    font-weight: normal;
    color: #999999;
    border: 1px solid #eeeeee;
}
.nav-row .country  {
    margin-left: -4px;
    /* margin-top: -6px; */
    display: inline;
    font-size: 85%;
    padding: 1px 4px;
    font-weight: normal;
    color: #999999;
    /*border: 1px solid #eeeeee;*/
}

.nav-row .long-name {
    display: table-cell;
    vertical-align: middle;
    padding: 12px 0 12px 0;
    font-weight: bold;
}

.nav-row .money {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    line-height: 1.1;
}

.nav-row .money2 {
    font-size: smaller;
}

.nav-row .del {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 16px;
    font-size: 9px;
}

.nav-row .add {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 16px;
    font-size: 9px;
}

.nav-row .grip, .nav-row .add, .nav-row .del {
    cursor: pointer;
    color:#000;
    opacity: 0;
    filter: alpha(opacity=0);
}

.nav-row:hover .mode-1.grip, .nav-row:hover .mode-1.add, .nav-row:hover .mode-1.del {
    opacity: 0.2;
    filter: alpha(opacity=20);
}

.nav-row:hover .mode-1.grip {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.nav-row .mode-1.add:hover, .nav-row .mode-1.del:hover {
    /*font-weight: bold;*/
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.use-hover .clickable:hover {
    background-color: #E9F4F8;
}

.right-icon {
    float: right;
    color: #bbbbbb;
}
#navigation .panel-collapse {
    background-color: #ffffff;
    max-height: 100%;
    overflow-y: hidden;
}

.clickable {
    cursor: pointer;
}

#copy-paste {
    display: none;
}

#credits {
    position: absolute;
    left: 70px;
    bottom: 15px;
    color: #555555;
    z-index: 2;
    font-size: smaller;
}

#breadcrumbs {
    position: absolute;
    left: 381px;
    top: 15px;
    z-index: 3;
    display: none;
    /* min-width: 600px; */
    /* overflow: hidden; */
    /* height: 50px; */
    /* overflow: overlay; */
    white-space:nowrap;
}

#title {
    color: #FFFFFF;
    font-size: 13px;
    background-color: #304369;
    margin: 0px;
    padding: 8px 20px;
    letter-spacing: 1px;
    /* float: left; */
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
    /* max-width: calc(100% - 129px); */
}

#year {
    /* float: left; */
    margin: 0px 0px 0px 5px;
    padding: 0px;
    display: none;
    /* overflow: hidden; */
    vertical-align: top;
}

/*#year li {
    color: #FFFFFF;
    font-size: 13px;
    background-color: #304369;
    margin: 0px 0px 0px 0px;
    padding: 10px 20px;
    letter-spacing: 1px;
    cursor: pointer;
}*/

#year h1 {
    color: #FFFFFF;
    font-size: 13px;
    background-color: #304369;
    margin: 0px 0px 0px 0px;
    padding: 8px 10px 8px 20px;
    letter-spacing: 1px;
    cursor: pointer;
}

#credits a {
    color: #555555;
    text-decoration: underline;
}
#credits a:hover {
    color: #888888;
}

#feedback-icon {
    font-size: 40px;
    z-index: 50 !important;
    position: absolute;
    bottom: 5px;
    left: 10px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

.tour-tour .feedback-icon {
    font-size: 30px;
}

.feedback-icon {
    color: #77B8F8;
}

#feedback-icon a:hover {
    color: #77B8F8;
    text-decoration: none;
}

#map {
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	background-color: #F2F2F2;
}

#map canvas {
	position: initial;
	top:0px;
	/* bottom:0px; */
	width: 100%;
	height: 100%;
}

.temp-hide {
    display: none;
}

.non-selectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.non-selectable:hover {
    /*cursor: default;*/
}

/*https://css-tricks.com/almanac/selectors/c/checked/*/
input[type=radio][disabled] + label {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*modal dialogue width*/
@media screen and (min-width: 768px) {
    .modal-dialog { width: 400px;
        margin: 50px auto 50px auto;
    }
    .modal-dialog-wide {
        width: 600px;
    }
}

@media screen and (max-width: 1024px) {
    #preloader {
        font-size: 40px;
    }
}

@media screen and (max-width: 768px) {
    #cookie-banner {
        font-size: 12px;
        padding: 16px;
    }

    #preloader {
        font-size: 28px;
    }
}

@media (min-width: 0) and (max-width: 450px) {

    #cookie-banner {
        font-size: 8px;
        padding: 10px;
    }

    #preloader {
        font-size: 16px;
    }

    #title {
        left: 6px;
        top: 42px;
    }

    #beta-tag {
        display: none;
    }

    #search {
        top: 5px;
        left: 5px;
        width: calc(100% - 10px);
    }

    .panel-group {
        margin-bottom: 5px;
    }

    #search .input-group-btn {
        display: none;
    }

    .searchclear {
        right: 40px;
    }

    .tt-menu {
        width: 100%;
    }

    #main-menu {
        top: 9px;
        right: 12px;
    }

    #main-menu-dropdown {
        top: 33px;
        right: -7px;
    }

    #navigation {
        margin-top: 100%;

        margin-bottom: -254px;
        /* bottom: 0px; */
        /* top: 80%; */
        margin-left: 5px;
        width: calc(100% - 10px);
    }

    #zoom-slider2 {
        display: none;
    }
}


.compare-icon .close {
    z-index: 5;
    position: absolute;
    margin-left: 45px;
}

.compare-thumb {
    float: left;
}

h1#title {}

#year .dropdown-menu {
    min-width: 78px;
}

#nav-panel-0 {
    border-top-color: #4FB6DB;
    border-top-width: 6px;
    border-top-style: solid;
    background-color: #77B8F8;
    background-image: linear-gradient(to bottom right, #77B8F8, #7DC4F5);
    color: #fff;
}

#edit-pie-cancel {}


.pie-color-input {
    box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;
}


.pie-color-input input {
    height: 36px;
    border-bottom: 0px;

}

.btn-raised {
    box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;
}

.search.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 26px 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 0px solid #ccc;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.search.btn {display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.search.btn-primary {
    color: #fff;
    background-color: #77B8F8;
    background-image: linear-gradient(to bottom right, #77B8F8, #7DC4F5);
}

.search.btn-primary:hover {
    color: #fff;
    background-color: #77B8F8;
    background-image: linear-gradient(to bottom right, #77B8F8, #7DC4F5);
}


#edit-pie-color {
    padding-left: 6px;
}

#color-picker {
    min-width: 54px;
}

div#publish-state {
    min-height: 62px;
}