body{display:flex;}
h1{margin:0;}
h2{margin:0;}
p{margin:0;}

.header{
  width: 100vw;
  height:5svh;
  position:absolute;
  top:0;
  left:0;
  display:flex;
}
.header {margin-left:auto; display: flex;}
.buttons{margin-left:auto; display: flex;}

.subheader{
    width: 100vw;
  height:4.5svh;
  position:absolute;
  top:5svh;
  left:0;
  display:flex;
}
.subheader div{margin-right:1.2rem;}
@media screen and (max-width:480px){
  .subheader{height:3svh;}
  .subheader div{margin-right:0.4rem;}
}

.footer{
  width:100vw;
  height:5svh;
  position:fixed;
  bottom:0;
  left:0;
  display:flex;
}
.footer .copyright{margin-left:auto;}

/* Top page (index.html) */
#IndexMap{
  width:100vw;
  height:95svh;
}
#Link-to-OEDevteam{
  position:absolute;
  bottom:5.5svh;
  right:0.5vw;
  z-index:1000;
}
#Link-to-OEDevteam img{
  height:3rem;
  vertical-align:middle;
}

/* For card style layout (oceanpoint.html) */
.ContentsCard{
  position:absolute;
  top:10svh;
  left: 0;
  padding-bottom: 5.5svh;
  display:flex;
  flex-wrap:wrap;
  align-items:strech;
}
.card-two-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  padding:5px 10px;
  margin:1svh 0;
}
.card-two-row-left{
  width:44vw;
  margin-left:1vw;
}
.card-two-row-right{
  width:44vw;
  margin-left:auto;
  margin-right:2vw;
}
.card-two-row-all{
  width:94vw;
  margin:0 1vw;
}
@media screen and (max-width:480px){
    .ContentsCard {flex-direction: column;}
    .card-two-row {width:90%;margin: 0.5svh auto;}
}

.subcard{
  width:45%;
  margin:1%;
}
.card-two-row table{width:100%;}
.card-two-row .quicklook-map{
  width:100%;
  height:35svh;
}
@media screen and (max-width:480px){
  .subcard{width:98%;}
  .card-two-row table svg{width:5vw;}
}

.card-title_winfo{width:25%;}
.card-title_woinfo{width:95%;}
.info-supple{
  width:70%;
  margin-right:1px;
  margin-left:auto;
  text-align:right;
}

/* For tab-seected contents (timeseries.html) */
.ContentsTab{
  position:absolute;
  top:10svh;
  left:0;
  width:96vw;
  margin-left:2vw;
  display:flex;
  flex-wrap:wrap;
}
.ContentsTab .tab{height:1.2rem;}
.ContentsTab .main{
  position:absolute;
  top:1.3rem;
  left:0;
  width:100%;
  height:calc(89svh - 1.4rem);
  display:none;
}
.ContentsTab .grapharea{
  width:98%;
  height:calc(100% - 1.5rem);
}
.ContentsTab .radio-for-tab{display:none;}

/* For diary contents (diarymemo.html) */
.ContentsCalendar{
  position:absolute;
  width:100vw;
  height:90svh;
  top:10svh;
  left:0;
}
.ContentsCalendar table{
  width:100%;
  height:calc(100% - 1.5rem);
  table-layout:fixed;
}
.calendar-table-header{height:5%;}
.calendar-table-content{
  height:18%;
  vertical-align:top;
}
.calendar-content-html{height:98%;}
.calendar-content-memo{overflow:auto;}
.calendar-input-diary{
  display:none;
  position:absolute;
  top:30svh;
  left:20vw;
}
#calendar-area-preview{
  width:500px;
  height:300px;
  overflow:auto;
  position:relative;
}
.calendar-image-preview{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
}
#calendar-image-delete{
  position:absolute;   /* relative to #calendar-area-preview */
  top:1px;
  right:1px;
  width:20px;
  display:none;
}
.calendar-input-diary textarea{
  width:600px;
  height:6rem;
  resize:vertical;
}

/* Map contents */
#ContentsMap{
  position:absolute;
  top:12svh;
  left:0;
  width:100vw;
  height:88svh;
}
#ControllerMap{
  position:absolute;
  top:13svh;
  right:2px;
  width:200px;
  z-index:1000;
}
.ControlArea{
  width:100%;
  display:flex;
  flex-wrap:wrap;
}
.CtrlMap-btn{
  position:relative;
}
.CtrlMap-btn label{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  cursor:pointer;
}
#ControllerMap .button1{
  width:90%;
}
#ControllerMap .button2{
  width:45%;
}
#ControllerMap .button3{
  width:30%;
}

/* Registration pages */
.Content-Registration{
  position:absolute;
  top:10svh;
  left:0;
  width:100vw;
  height:80svh;
}
.Content-Registration img{
  height:20svh;
  margin:5svh auto 2svh auto;
  display:block;
}
.Content-Registration-Line{
  margin:1svh auto;
  text-align:center;
}
.Content-Registration-Line .entrance-button{
  display:inline-block;
}
#user-register_show-status{
  display:inline-block;
  width:50%;
  margin:auto;
}
#user-revoke_show-status{
  display:inline-block;
  width:50%;
  margin:auto;
}

/* Temporary or obsolete */
.grapharea-allwidth{height:400px;width:100vw;}
.grapharea-halfwidth{height:400px;width:50vw;}
#ContentsGraph{width:60vw;height:95vh;}