/*CSS for ICV*/

.body-icv {
	margin:0;
	-webkit-text-adjust: 100%;
	background: url(/o/ImpactCorridorVisualisationTool-portlet/images/icv/images/tlo4.jpg);
	font-family: NotesEsaReg, Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 20px;
	}

.page-icv {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	}

.portlet-body {
    min-height: 100vh;
}

.row-icv, .col-icv, .page-icv {
	overflow: hidden;
	position: absolute;
	}

.row-icv {
	left: 0;
	right: 0;
	}

.col-icv {
	top: 0;
	bottom: 0;
	}

.scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	}

.scroll-y {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	}

.fill, .pane {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%
	}

.pane {
	display: none;
	}

/* Pane configuration */
.left.col-icv {
    width: 250px;
    /*float: left;*/
}
.right.col-icv { left: 250px; right: 0; }
.header-icv.row-icv { height: 35px; line-height: 35px; }
.body-icv.row-icv { top: 35px; bottom: 35px; }
.footer-icv.row-icv { height: 35px; bottom: 0; line-height: 35px; }

/* Very rough, 5-minute effort at iOS-like styles. I'm sure you can do better... */
.header-icv, .footer-icv {
   color: #eee;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
   padding: 0 0.1em;
   background: url(/o/ImpactCorridorVisualisationTool-portlet/images/icv/images/tlo4.jpg);
	}

.legendVisualisation{
   color: #eee;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
   padding: 0 0.1em;
   font-size: 1.5em;
   font-family: NotesEsaReg, Helvetica, Arial, sans-serif;
}
.header-icv { font-size: 1.5em; }

.title {
	margin-left: 0.6em;
	font-family: NotesEsaReg, Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	}

.titleOnMap {
	margin-left: 0.6em;
	font-family: NotesEsaReg, Helvetica, Arial, sans-serif;
	font-size: 2.5em;
	}

.textFooter {
	margin-left: 0.6em;
	font-family: NotesEsaReg, Helvetica, Arial, sans-serif;
	font-size: 1.1em;
	}

.titleCorridor {
	margin-left: 0.6em;
	font-family: NotesEsaReg, Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	}

.body-icv, .pane { background: url(/o/ImpactCorridorVisualisationTool-portlet/images/icv/images/tlo4.jpg) }
.right.col-icv { border-left: 1px solid black; }
.right.col-icv .body-icv { padding: 0 1em; }
.listview { padding: 0; margin: 0;  color: white }
.listview li { list-style-type: none; padding: 1em;}

.listview.inset { margin: 1em 0; }
.listview.inset li { background: url(/o/ImpactCorridorVisualisationTool-portlet/images/icv/images/tlo4.jpg); border: 2px solid #aaa; border-bottom-width: 0; }
.listview.inset li:first-child { border-radius: 1em 1em 0em 0em; }
.listview.inset li:last-child { border-radius: 0em 0em 1em 1em; border-bottom-width: 2px; }

.tiles { overflow-y: hidden; }
.tiles > div { width: 1175px; }
.tiles div { margin: 0; padding: 0; white-space: nowrap; }

/* Workaround: in landscape mode, IEMobile makes bottom toolbar overlap the page, so shorten the page by 75px to compensate */
.iemobile .page-icv { bottom: -6px; }
@media screen and (orientation:landscape) { .iemobile .page-icv { bottom: 75px; } }

/*Added by CATT because SSAEsa-theme/css/main.css adds padding:10px but we don't need this! */
body-icv.portal-popup {
	padding:0px !important;
	/* overflow: hidden !important; */
}

.tableRaw{
	line-height: 13px;
}

#marker {
	/*color: #0099FF;*/
	color: #00008B;
}

#earthAltitude {
	color: #770000;
}

#hightAltitude{
	color: #074C00;
}

/* ------------------------------ NEW ------------------------------------------ */

/*
Used ESA colors
Red - #D0103A
Dark Red - #822433
Green - #008542
Dark Green - #284E36
Orange - #E37222
Dark Orange - #9D5116
Azure - #0098DB
Dark Azure - #00549F
Yellow - #FDC82F
Dark Yellow - #B88B00
Blue - #00338D
Dark Blue - #002664
*/

@font-face {
  font-family: 'NotesEsaBol';
  src: url("fonts/NotesEsaBol.otf") format("opentype");
}
@font-face {
  font-family: 'NotesEsaBolIta';
  src: url("fonts/NotesEsaBolIta.otf") format("opentype");
}
@font-face {
  font-family: 'NotesEsaReg';
  src: url("fonts/NotesEsaReg.otf") format("opentype");
}
@font-face {
  font-family: 'NotesEsaRegIta';
  src: url("fonts/NotesEsaRegIta.otf") format("opentype");
}

.renderer-container {
    position: relative;
	background: url(/o/ImpactCorridorVisualisationTool-portlet/images/icv/images/loader.gif) no-repeat 50% 50%;
	width: 100% ;
	height: 100%;
	border-left: 1px solid #3d4758;
	cursor:move;
}

.esa-button {
    padding: .5em 1em !important;
	border-radius: 5px !important;
	border-width: 0 !important;
	/*font: inherit !important;*/
	font-family: NotesEsaReg, Helvetica, Arial, sans-serif;
	cursor: pointer !important;
	margin-top: 5px;
	font-size: 1.2em;
}

.esa-button.esa-button-wide{
	display:block !important;
	width:100% !important
}

.esa-module-container{
	overflow:hidden
}

.renderer-container{
	float:left;
}

.standalone-container{
	width:100%;
	height: 800px;

}

.renderer-side{
	position:absolute;
	right:10px;
}

.titleMap{
	position:absolute;
	left:10px;
	top: 60px;
}

.renderer-side .esaLogo{
	display:block;
	top:10px;
	overflow: hidden;
}

.esaLogo{
	font-size:1px;
	border:0px;
	width:180px;
	height:89px;
	background:url(/o/ImpactCorridorVisualisationTool-portlet/images/icv/images/ESA_logo_2020_Black_FAV_small_esafonts.png) no-repeat top right;
	/*float:right;*/
	margin:0 10px 10px 0;
	background-size:100% 100%;
	backeground-color: transparent;
	border-radius: 5px !important;
}

.ssaNEOCC{
	color: #00338D;
	text-align: center;
	font-family: NotesEsaReg;
	}

.checkbox-container {
    padding: 5px;
    font-family: NotesEsaReg, Helvetica, Arial, sans-serif;
	}
.checkbox-container label {
    margin-left: .25em;
    display: inline-block!important;
    font-size: 1.2em;
	}
.checkbox-container input, .checkbox-container label {
    cursor: pointer
}

.list-empty {
    background: hsla(0, 0% , 100% , .8);
	border-radius: 5px;
	padding: 10px;
	color: black
}

.toHide{
 display: none;
}


.map-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.icv_renderer{
	width: 100%;
	height: 100%;
}

.map-print {
	margin-top: 8px;
}

.esa-icv3D-container {
    padding-left: 30px;
	padding-bottom: 100%;
	background: url(/o/ImpactCorridorVisualisationTool-portlet/images/icv/images/tlo4.jpg);
	color: #fff;
	font-size: 13px;
    line-height: 1.3;
    font-family: NotesEsaReg, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

.esaLogo_icv3D{
	font-size:1px;
	border:0px;
	width:180px;
	height:89px;
	background:url(/o/ImpactCorridorVisualisationTool-portlet/images/icv/images/ESA_logo_2020_White_FAV_small_esafonts.png) no-repeat top right;
	float:right;
	margin: 10px;
	background-size:100% 100%;
	backeground-color: transparent;
	/*border-radius: 5px !important;*/
}

.ssaNEOCC_icv3D{
	color: #FFFFFF;
	text-align: center;
	font-family: NotesEsaReg;
}


.instructions_icv3D {
	position: relative;
	top: 100px;
}

.sigma-list {
	position:relative;
	left: 20px;
}

.hide-div {
	display:none;
}

.noSelectable{
	-webkit-touch-callout: none; /* iOS Safari */
  	-webkit-user-select: none;   /* Chrome/Safari/Opera */
  	-khtml-user-select: none;    /* Konqueror */
  	-moz-user-select: none;      /* Firefox */
  	-ms-user-select: none;       /* Internet Explorer/Edge */
  	user-select: none;           /* Non-prefixed version, currently
  		                              not supported by any browser */
}

/********************************
 * START MODAL WINDOW
 *******************************/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 60px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 85%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px !important;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.page-icv .modal-header {
    padding: 2px 16px;
    background: url(/o/ImpactCorridorVisualisationTool-portlet/images/icv/images/tlo4.jpg);
    color: white;
    font-size: 10px;
    line-height: 1.3;
    font-family: NotesEsaReg, Helvetica, Arial, sans-serif;
}

.page-icv .modal-body {
	background: url(/o/ImpactCorridorVisualisationTool-portlet/images/icv/images/tlo4.jpg);
}

.generatedImg {
	width:100%;
}

.page-icv .modal-footer {
    padding: 2px 16px;
    background: url(/o/ImpactCorridorVisualisationTool-portlet/images/icv/images/tlo4.jpg);
    color: white;
    font-size: 10px;
    line-height: 1.3;
    font-family: NotesEsaReg, Helvetica, Arial, sans-serif;
}

.modalWindow {
position: fixed;
font-family: arial;
font-size:80%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.2);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalHeader h2 { color: #189CDA; border-bottom: 2px groove #efefef;}
.modalWindow:target {
opacity:1;
pointer-events: auto;
}
.modalWindow > div {
width: 800px;
position: relative;
margin: 10% auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #fff;
}
.modalWindow .modalHeader  {    padding: 5px 20px 0px 20px; }
.modalWindow .modalContent {    padding: 0px 20px 5px 20px; }
.modalWindow .modalFooter  {    padding: 8px 20px 8px 20px; }
.modalFooter {
background: #F1F1F1;
border-top: 1px solid #999;
-moz-box-shadow: inset 0px 13px 12px -14px #888;
-webkit-box-shadow: inset 0px 13px 12px -14px #888;
box-shadow: inset 0px 13px 12px -14px #888;
}
.modalFooter p {
color:#D4482D;
text-align:right;
margin:0;
padding: 5px;
}

.ok, .close, .cancel {
background: #606061;
color: #FFFFFF;
line-height: 25px;
text-align: center;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close {
position: absolute;
right: 5px;
top: 5px;
width: 22px;
height: 22px;
font-size: 10px;
}
.ok, .cancel {
width:80px;
float:right;
margin-left:20px;
}
.ok:hover { background: #189CDA; }
.close:hover, .cancel:hover { background: #D4482D; }
.clear { float:none; clear: both; }

/********************************
 * END MODAL WINDOW
 *******************************/