*:root {
    --header-height: 12vh;
    --header-padding: calc(0.2 * var(--header-height));

    --footer-height: 8.1vh;
    --footer-padding: calc(0.2 * var(--footer-height));
    
    --message-success-back: #00ffb7;
    --message-warning-back: #57b1ff;
    --message-error-back:   #ff8a8a;
    --message-font:         #ffffff;

    --font-size: 2vh; 
    
    --icon-size: 3.5vh;
    --icon-radius: 0.5vh;

    --space-width: 1vh;

    --table-title-height: 6vh;

    /* --blue-dark: #001428;
    --blue-medium:  #003658;
    --blue-light:  #0a4a73;
    
    --blue-1: #184E77;
    --blue-2: #1E6091;
    --blue-3: #1A759F;
    --blue-4: #168AAD;
    --blue-5: #34A0A4; */


    --header-back:  #A7BEAE;
    --header-font:  #FFFFFF;
    
    --footer-back:  #A7BEAE;
    --footer-font:  #FFFFFF;
    
    --button-back:  #000000;
    --button-over: #000000;
    --button-font:  #000000;

    --body-back:    #e7e8d1;
    --body-over:    #d7d8bf;
    --body-font:    #000000;
    
    --table-header: #B85042;
    --table-odd:    #00000010;
    --table-even:   #00000020;
    --table-over:   #FFFFFF10;
    --table-font:   #000000;
    
    --icon-back:    #00000020;
    --icon-font:    #FFFFFF;
    --icon-over:    #00000040;

} 


::-webkit-scrollbar {
    display: none;
}


#map {
    height: calc( 100vh - var(--header-height) - var(--footer-height));
    width: 100vw;
}


html {
    scroll-behavior:smooth;
    position: relative; height: 100%; overflow: hidden;
}

body {
    margin: 0;
    color:      var(--body-font);
    background: var(--body-back);
    overflow-x: hidden;
    background-attachment: fixed;
    font-family: Roboto;
    font-weight: 100;
    width: 100vw;
    font-size: var(--font-size);
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
}

input[type=text], input[type=text]:focus {
    height: calc( 0.35 * var(--header-height));
    border-radius: 0.5vh;
    border: none;
    font-family: 'Roboto';
    font-weight: 100;
    width: 88vw;
    padding: 1vh;
    outline: none;
    background: #FFFFFF20;
    color: white;
}

input[type=text]:focus {
    background: #FFFFFF40;
    color: white;
}

input::placeholder {
    color: #FFFFFFA0;
}


*[center] {
    text-align: center;
}

*[left] {
    text-align: left;
}

*[right] {
    text-align: right;
}

.full-page {
    font-size: 5.5vh;
    color: #FFFFFF;
}

.rotating {
    animation: color-change 3s infinite;
}

@keyframes color-change {
   0%   { color: #FFFFFF50; }
  10%   { color: #FFFFFF70; }
  20%   { color: #FFFFFF90; }
  30%   { color: #FFFFFFB0; }
  40%   { color: #FFFFFFD0; }
  50%   { color: #FFFFFFF0; }
  60%   { color: #FFFFFFD0; }
  70%   { color: #FFFFFFB0; }
  80%   { color: #FFFFFF90; }
  90%   { color: #FFFFFF70; }
  100%  { color: #FFFFFF50; }
}

ocean-header {
    /* background-color:   var(--header-back); */
    color:              var(--header-font);
    position:           fixed;
    left:               0;
    width:              calc(100vw - 2 * (var(--header-padding) + 1.7 * var(--icon-size)));
    top:                0;
    height:             var(--header-height);
    line-height:        var(--header-height);
    padding:            0 calc( 1.7 * var(--icon-size) + var(--header-padding));
    /* font-size:          calc(0.35 * var(--header-height)); */
}



ocean-header.search {
    margin-top: 1vh;
    height:             var(--header-height);
    line-height:        calc( 0.4 * var(--header-height));
    font-size:          calc(0.26 * var(--header-height));
}

ocean-header input[type=text], ocean-header input[type=text]:focus {
    position: fixed;
    left: 6vw;
    font-size: calc( 0.21 * var(--header-height));
    top: 7vh;
    padding: 2.2vh 2vw 2.3vh 2vw;
}




ocean-footer {
    background-color: #00000050;
    color:              var(--footer-font);
    position:           fixed;
    left:               0;
    width:              calc(100vw - 2 * var(--footer-padding));
    bottom:             0;
    padding:            0 var(--footer-padding);
    height:             var(--footer-height);
    line-height:        var(--footer-height);
}

ocean-scroller {
    display:            block;
    position:           fixed;
    height:             10vh;
    bottom:             -10vh;
}


ocean-message {
    color:              var(--message-font);
    background:         var(--message-warning-back);
    position:           fixed;
    text-align:         center;
    left:               0;
    width:              calc(100vw - 2 * var(--footer-padding));
    bottom:             0;
    padding:            0 var(--footer-padding);
    height:             var(--footer-height);
    line-height:        var(--footer-height);
    transition:         all 0.3s ease-in-out;
    display:            none;
}

ocean-message.success {
    background:         var(--message-success-back);
}

ocean-message.error {
    background:         var(--message-error-back);
}

*[body-height] {
    height:         calc( 98vh - var(--header-height) - var(--footer-height));
}

ocean-body {
    text-align:     center;
    position:       fixed;
    top:            calc(var(--header-height) + 2vh);
    width:          100vw;
    display:        grid;
    gap:            8px;
    align-content:  center;
    justify-items:  center;
    align-items:    center;
    
}

ocean-body div {
    cursor:pointer;
    border-radius: 1vh;    
    padding: 3vh 0vw;
    transition: all 0.2s ease-in-out;
}
/* 
ocean-body div:hover {
    background: var(--body-over);
} */

ocean-body div span {
    display:block;
    font-family: Roboto;
    font-weight: 100;
}



@media screen and (orientation:portrait) {
    ocean-body.grid_6, ocean-body.grid_5 {
        grid-template-rows: repeat(3, 33%);
        grid-template-columns: repeat(2, 50%);
    }

    ocean-body.grid_4, ocean-body.grid_3 {
        grid-template-rows: repeat(2, 50%);
        grid-template-columns: repeat(2, 50%);
    }


    ocean-body div {
        font-size: 7vh;
    }
    

    ocean-body div span {
        font-size: 3vh;
        margin-top: 0vh;
    }

    *:root {
        --footer-height: 10vh;
        --footer-padding: calc(0.2 * var(--footer-height));
        --icon-size: 4vh;
        --icon-radius: 0.5vh;
    }
}



@media screen and (orientation:landscape) {
    ocean-body.grid_6, ocean-body.grid_5 {
        grid-template-columns: repeat(3, 33%);
        grid-template-rows: repeat(2, 50%);
    }


    ocean-body.grid_6 div, ocean-body.grid_5 div {
        font-size: 12vh;
    }
    

    ocean-body.grid_6 div span, ocean-body.grid_5 div span {
        font-size: 3vh;
        margin-top: 1vh;
    }


    ocean-body.grid_4, ocean-body.grid_3 {
        grid-template-rows: repeat(2, 50%);
        grid-template-columns: repeat(2, 50%);
    }


    ocean-body.grid_4 div, ocean-body.grid_3 div {
        font-size: 16.5vh;
    }
    

    ocean-body.grid_4 div span, ocean-body.grid_3 div span {
        font-size: 4.5vh;
        margin-top: 0vh;
    }
}




icon {
	font-family:                    'MaterialIcons';
    font-weight:                    normal;
    font-style:                     normal;
    font-size:                      var(--icon-size);
    display:                        inline;
    -webkit-font-feature-settings:  'liga';
    font-feature-settings:          'liga';
    -webkit-font-smoothing:         antialiased;
    text-rendering:                 optimizeLegibility;
    padding:                        calc(0.1 * var(--icon-size)) calc(0.2 * var(--icon-size));
    border-radius:                  var(--icon-radius);
    background:                     var(--icon-back);
    color:                          var(--icon-font);
    cursor:                         pointer;
}

icon:hover {
    background:                     var(--icon-over);
}


icon.full-page {
    color:                        #ffffff;
    background:                     none;
    font-size:                      12vh;
    cursor:                         default;
}

icon.icon_5, icon.icon_2, icon.icon_3, icon.icon_4 {
    background:                     none;
    color:                        #FFFFFFC0;
    display:                        inline-block;
    padding:                        0;
    font-size:                      calc( 0.5 * var(--footer-height) );
}

icon.icon_4 {
        width:22vw;
}

icon.icon_5 {
    width:                          18vw;
}

icon.icon_2 {
    width:                          45vw;
}

icon.icon_3 {
    width:                          30vw;
}

icon.icon_5:hover, icon.icon_2:hover, icon.icon_3:hover {
    background:                     none;
    color:                          #FFFFFFF0;
}

icon.search {
    position: absolute;
    left: 70vw;
    bottom: calc( 0.035 * var(--header-height));
    font-size: calc( 0.35 * var(--header-height));
}

space {
    display: inline-block;
    width: var(--space-width);
}

ocean-header icon {
    position:           fixed;
    right:              var(--header-padding);
    background:         none;
    padding-top:        0;
    font-size:          calc( 1.2 * var(--icon-size))
}

ocean-header icon[left] {
    left:               var(--header-padding);
}

ocean-header icon:hover {
    background:         none;
}



div.table-title {
    font-size: calc( 0.6 * var(--table-title-height));
    padding: 0;
    max-height: calc( (3/4) * var(--table-title-height));
    padding-top: calc( var(--table-title-height) / 4);
}



.background-0 { background: #EB2B00 }
.background-1 { background: #FF4000 }
.background-2 { background: #FF7C00 }
.background-3 { background: #FFB800 }
.background-4 { background: #FFF400 }
.background-5 { background: #C9E026 }
.background-6 { background: #92CC4B }
.background-7 { background: #77C25E }
.background-8 { background: #5bb871 }


.month-score {
    width: 5.63vw;
    position: relative;
    font-size: 2vh;
    font-weight: 100;
    left: 2.2vw;
    z-index: 50;
}

.place-label {
    /* width: 50vw;*/
    font-weight: 400;
    font-size: 3vh;
    text-align: left;
    color: white;
    /* padding-left: 6vw; */
}










div.container-no-title {
    border: 1px solid black;
}


div.list-item  {
    position: relative;
    margin: 3vh 0;
    background: #f0efeb;
    padding: 2vh 4vw;
    box-shadow: 1px 1px 10px grey;
    max-width: 72vw;
    width: 72vw;
}

div.list-item:first-of-type {
    margin: 3 0 3vh 0;
}


div.item-title {
    display: table-cell;
    font-size: 3.5vh;
    padding: 0;
    vertical-align: top;
    position: absolute;
    text-align:left;
    top: 2vh;
    left: calc( 4vw + 9vh);
}

div.item-text {
    position: absolute;
    top: 7vh;
    left: calc( 4vw + 9vh);
    font-size: 2.3vh;
    text-align: left;
    padding: 0;
}


div.item-top-right {
    position: absolute;
    right: 4vw;
    top: 2vh;
    display: table-cell;
    padding: 0;
    font-size: 2.5vh;
    vertical-align: top;
}


div.item-bottom {
    /* margin-top: 2vh; */
}

ocean-body.list {
    display: block;
    width: 100vw;
    height: calc(100vh - var(--header-height) - var(--footer-height));
}

ocean-body.list div.title {
    font-size: 4vh;
    display:none;
}

div.container-title {
    max-height: calc(95vh - var(--header-height) - var(--footer-height));
    overflow-y:scroll;
    overflow-x: hidden;
    position: relative;
    top: -2vh;
    padding-top: 0;
    scrollbar-width: none;
} 


img.item-avatar {
    border: 1px solid black;
}


div.item-avatar {
    display: table-cell;
    padding: 1vh 1.5vh 0.5vh 1.5vh;
    border-radius: 10vh;
    background: #FFFFFF;
    font-size: 5vh;
    text-align: center;
}



div.page-title {
    font-size: 3.5vh;
    padding-top: 1.5vh;
    padding-bottom: 0;
    display: none;
}



a.title {
    text-decoration: none;
    color: var(--body-font);
}

a.title:hover, a.title:visited {
    text-decoration: none;
    color: var(--body-font);
}


ocean-image {
    position: fixed;
    top: 0;
    left:0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    
}

.image-legend {
    width: 94vw;
    background-color: #00000040;
    top: 0;
    position: fixed;
    color: white;
    font-size: 2.5vh;
    height: 7vh;
    padding: 1vh 0 0.5vh 6vw;
    text-align: left;
}

.sub-legend {
    font-size: 1.7vh;
    position:relative;
    top: 0.3vh;
}

#world > table > tbody > tr > td.month-score {
    width: 4vw;
    left: 0;
}

#world > table {
    width: unset;
}