body{
    margin:0;
    padding:0;
    font-family:'Roboto', sans-serif;
    color:#fff;
    background:#1c1c1c;
}

a{color:lightblue}

#title{
    margin: 22px 0;
    font-size: 24pt;
    font-weight: bold;
}

#title span{ 
    vertical-align: middle;
}

#title-icon{
    width:48px;
    height:48px;
    margin-right:5px;
    display:inline-block;
    vertical-align: middle;
}
@media only screen and (max-width: 400px){
    #title-icon{display:none}
}

#title-icon svg path{
    fill:white !important;
}

#window{
    border-radius:10px;
    background:#555;
    position:absolute;
    z-index:3;
    box-shadow:0 0 2px #fff;
    overflow:auto;
    opacity:1;
    transition:opacity 300ms;
}
#window.hidden{
    opacity:0;
    pointer-events:none;
}

#window-country{
    font-size:24pt;
    font-weight:500;
    display:inline-block;
    margin:20px 0;
    vertical-align:middle;
}

.window-paragraph{
    font-size: 14pt;
    text-align: justify;
    margin:20px 50px 20px 0;
}
#window-assessment{
    margin-top:0;
}

.window-warning{
    background:#777;
    border-radius:10px;
    padding:5px 20px 10px 20px;
    margin:0 0 30px 0;
}
.window-warning.hidden{
    display:none;
}
.window-warning li{
    margin:10px 0;
}

#map{
    position:absolute;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    opacity:1;
    overflow:hidden;
}

#map svg{
    height:100%;
    position:absolute;
    right:0;
    transition:opacity 300ms;
}
#map.hidden{
    opacity:0.3;
    pointer-events:none;
}

.interactive-map{
    cursor:pointer;
}


.container{
    background:#555;
    box-shadow:0 0 2px #fff;
    border-radius:10px;
    padding:10px 20px;
    margin:20px 0;
}

p{font-size:9.5pt;text-align:justify}
#data-container p{margin:7px 0}

#table{
    margin:30px 0 0 -20px;
    width:calc(100% + 40px);
}

.cell{
    padding:0 20px;
    margin:10px 0;
    height:90px;
    background:#777;
    border:2px solid #555;
    cursor:pointer;
}

.cell-tri{
    display:inline-block;
    vertical-align:middle;
    cursor:pointer;
}

.cell-heading{
    height:90px;
    line-height:90px;
    font-size:14pt;
    width:calc(100% - 245px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.cell-graph{
    margin-left:10px;
    width:135px;
    height:90px;
}

.cell-graph svg, .full-graph svg{
    fill:none;
}

.cell-upshot{
    height:30px;
    line-height:30px;
    text-align:center;
    border-radius:10px;
    width:80px;
    font-size:8pt;
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.cell-upshot.hidden{ display:none }

.cell-upshot.cell-tri, #window-header .cell-upshot{
    margin-left:20px;vertical-align:middle;
}

#explainer-cell{
    height:115px;
    cursor:auto;
}
#explainer-cell .cell-upshot{
    margin:0 3px;
    width:calc(100% / 4 - 9px);
}

#mousemove-cell{
    position:absolute;
    border-radius:10px;
    background:#555;
    transition:opacity 100ms;
    z-index:2;
}
#mousemove-cell.hidden{
    opacity:0;
    pointer-events:none;
}

#mousemove-cell .cell{
    margin:0;
    border-radius:10px;
    pointer-events:none;
}

#mousemove-cell .cell-heading{width:110px}

#close-window{
    cursor:pointer;
    position:absolute;
    top:0;
    right:0;
    width:50px;
    height:30px;
    margin:35px 20px;
    background-image:url(/uk-travel/assets/svg/close.svg);
    background-position:center;
    background-size:contain;
    background-repeat:no-repeat;
}

.full-graph{
    margin:30px 70px 20px 70px;
}

h2{
    margin-top:40px;
}

.shouldNotGo{ background:red; fill:red !important }
.couldGo { color:black; background:yellow; fill:yellow !important }
.shouldGo{ color: black; background:lightgreen; fill:lightgreen !important }
.cannotGo{ background:rgb(69,25,25); fill:rgb(69,25,25) !important }

.shouldNotGoPartially{ background:red; fill:url(#shouldNotGoPartially) !important }
.couldGoPartially { color:black; background:yellow; fill:url(#couldGoPartially) !important }
.shouldGoPartially{ color: black; background:lightgreen; fill:url(#shouldGoPartially) !important }

#nation-selection{
    display:flex;
    margin-bottom:20px;
}

.nation-selection-button{
    background:#666;
    margin:0 3px;
    flex: 1 1 0px;
    text-align:center; 
    height:30px;
    line-height:30px;
    border-radius:10px;
    font-size:8pt;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    cursor:pointer;
    transition: background 150ms;
}
.nation-selection-button:first-child{margin-left:0}
.nation-selection-button:last-child{margin-right:0}

.nation-selection-button.selected{ background: #888 }

#entry-section.hidden{
    display:none;
}