@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600;700&display=swap');
@import url('glip.css');



.header { color: white; }
.header .navi { display: flex ; height: 75px ; box-shadow: 1px 1px 9px -1px rgba(53,53,53,0.49);
-webkit-box-shadow: 1px 1px 9px -1px rgba(53,53,53,0.49);
-moz-box-shadow: 1px 1px 9px -1px rgba(53,53,53,0.49); align-items: center;}
.logo { }
.logo img { height: 40px; margin-right: 10px; }
.menu { display: flex; gap: 20px;}
.menu a { color: #000; text-decoration: none; font-weight: bold; font-size:16px}
.menu a:hover { text-decoration: underline; }
.auth { display: flex; gap: 45px;  background: #3B7DD2 ;padding: 5px 35px; justify-content: flex-end;}
.auth a {color: white; text-decoration: none; }
.utile-icons { display: flex; gap: 15px; }
.utile-icons img { height: 20px; cursor: pointer;}
.content { display: flex ; gap:20px ; max-width: 1600px ; margin: 0 auto ;  padding: 0px 20px 20px; width: 100%;}
.ui-left { width: 65% ;float: left ; }
.ui-aside { width: 35% ; float: left ; }
.map-section { flex: 1 1 45%; text-align: center; background:url("../images/img-keymap.jpg") no-repeat ; height:700px; margin-top: 20px ;position: relative}
.map-section .headline {background:rgb(255 255 255 / 70%); padding:50px ; text-align: left }
.map-section .headline h3 { font-size: 35px ; color: #172DB9 ; font-weight: 800 ;line-height: 50px; display: block ; width: 100%;}
.map-section .headline p { font-size: 35px ;line-height: 50px;font-weight: 600;}
.map-section .route { position: absolute; top: 300px;background: url(../images/map-ani2.gif) no-repeat; width: 100%; height: 400px; font-size: 0}

.tablinks { width: 50%}
.tab { overflow: hidden; background-color:#A2B9EE ; width: 60%}
.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px;}
.tab button:hover { background-color:#D0DEFF;}
.tab button.active { background-color:#A2B9EE ;color: #00356F}
.tabcontent { display: none; padding: 25px; border-top: none; overflow: hidden ; height: 200px; position: relative;}
.tabcontent button { width: 100%}
.tabcontent .input-inline { display: flex}
.search-section { display: flex; gap: 20px; width: 100% ; margin-top: 20px }
.search-box { flex: 1 1 60%; padding: 20px; background-color: #f5f5f5; }
.search-box label { font-weight: 600}
.search-section input { width: 100%; padding: 8px;margin-bottom: 10px;}
.search-section .input-group { flex-wrap: wrap;}
.search-section .input-group button.date { position: absolute; right: 5px; top: 0; width: unset; z-index: 999;}
.search-section input.form-control.date { max-width: 100%!important}
.search-section .tablinks { padding: 15px 10px ; background-color: #D0DEFF; color:rgb(0 53 111 / 50%); border: none; cursor: pointer; font-weight: 600 ;border-radius: 0;}
.search-section button.src, .search-box button.src { padding: 10px; background: none;background-color: #00356F; color:#fff; border: none; cursor: pointer; width: 100% ; font-size: 15px ;margin-top: 10px;border-radius: 0;}
.monitoring-vssl li .list-info > span { width: 80px;}
.monitoring-vssl li .list-info > span:last-child { width: 130px;}

.monitoring-vssl {display: flex; flex-direction: column;}
.monitoring-vssl h3 , .monitoring-air h3 ,.news h3 { line-height: 50px ; font-size: 20px ; margin-top: 15px ; width: 100%}
.monitoring-vssl h3 span, .monitoring-air h3 span,.news h3 span { float: right ; font-size: 14px ;}
.monitoring-vssl ul {display: flex ; flex-direction: column; gap: 5px;}
.monitoring-vssl li { border: 1px solid #98B6D9 ; padding: 10px ; font-size: 16px ;display: flex; gap: 15px;align-items: center; font-weight: 600 ; justify-content: space-between;}
.monitoring-vssl li .flag { display: flex ;}
.monitoring-vssl li .flag > label { width: 30px; height: 24px;  display: inline-block ; border: 1px solid #c2c2c2;}
.monitoring-vssl li .list-info > span { width: 90px;}
/* .monitoring-vssl li .list-info > span:last-child { width: 120px;} */


.monitoring-vssl li span.rank-weekly { background:#9EA6AF ; color: #fff ; font-weight: 600 ; width: 34px ; height: 34px; display: inline-block ;display: flex; flex-direction: column;justify-content: center; align-items: center;}
.monitoring-vssl li span.rank-weekly.top { background: #4D65FF}
.monitoring-vssl li span strong { color:#8AA2BC ;  margin-right: 10px ;font-size: 14px; font-weight: 700;}
.monitoring-vssl li .flex-list {display: flex ; gap: 15px; align-items: center; width: 45%;}
.monitoring-vssl li .list-info { display: flex; gap:15px }
.monitoring-vssl li span.depature { display: flex; align-items: center;}
.monitoring-vssl li span.alival {  display: flex; align-items: center; background-position: 0 -20px ;}
.monitoring-vssl li span.depature strong, .monitoring-vssl li span.alival strong { display: flex;  align-items: center; font-size: 0 ; height: 25px ; width: 30px ; background:url(/nlic/glip/images/icon-flight-m.svg) no-repeat; }
.monitoring-vssl li span.depature strong { background-position: -1px -3px}
.monitoring-vssl li span.alival strong  {  background-position: -125px -3px}

.news { overflow: hidden ;}
.news h3 {  border-bottom: 1px solid #ccc  }
.news ul { clear: both ; padding-top: 20px}
.news ul li { line-height: 2rem ; display: flex}
.news ul li:before { content: "\2027" ; padding: 0px 5px 10px 0 }
.news ul li a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;  }
.news ul li a:hover,.news ul li a:active  { color: #295db9 ; text-decoration: underline}


@media only screen and (max-width: 600px) {
    .monitoring-vssl ul { zoom:80%} 
}

@media only screen and (max-width: 992px) {
    .content {  display: flex;  flex-direction: column;}
    .ui-left { width: 100% ; margin-top: 550px;  margin-top: 630px;}
    .ui-aside { width: calc(100% - 40px);; position: absolute; }
    .map-section { background: url(../images/img-keymap.jpg) no-repeat;  background-size: cover;height: 500px;  zoom: 70%;}
    .map-section .headline {}
}

@media only screen and (max-width: 1400px) {
     #ship-list li { display: flex ; flex-direction: column;  align-items: flex-start;} 
     #ship-list li .flex-list { width: 100%}
     #ship-list li li .list-info { width: 100%; display: flex ; justify-content: space-around;}
    
    #flight-list li { display: flex ; flex-direction: column;  align-items: flex-start;} 
    #flight-list li .flex-list { width: 100%}
    #flight-list li li .list-info { width: 100%; display: flex ; justify-content: space-around;}
    div#ship-list .list-info { display: flex ; width: 100%; justify-content: space-between; }
    div#flight-list .list-info { display: flex; width: 100%; justify-content: space-between;}
}