/*

  COVER.BOUTIQUE

  (c) 2019, Leander Seige, leander@seige.name

  https://cover.boutique
	https://github.com/leanderseige/cover.boutique

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with this program.  If not, see <https://www.gnu.org/licenses/>.

*/

/* GENERIC ELEMENTS */

@font-face {
  font-family: sacramento;
  src: url(sacramento.ttf);
}

body {
  font-family: 'Montserrat', sans-serif;
  padding: 0px;
  margin: 0px;
  overscroll-behavior: none;
  overflow: hidden;
}

h1 {
  font-family: 'sacramento';
  font-size: 7vh;
  margin: 0 0;
}

.logo {
    font-family: 'sacramento';
}

strong {
  color:#222;
}

p, input {
    font-size: 2vh;
}

.small {
    font-size: 1vh;
    line-height: .8vh;
}

/* INDIVIDUAL ITEMS */

#osd {
    position: absolute;
    left:35vw;
    top:0vh;
    width:30vw;
    height:80vh;
    z-index: 10;
}

#osdo {
    position: absolute;
    left:35vw;
    top:0vh;
    width:30vw;
    height:80vh;
    /* opacity: 0.5; */
    z-index: 20;
    pointer-events: none;
}

#mask {
    position: absolute;
    left:35vw;
    top:0vh;
    width:30vw;
    height:80vh;
    background-image: url("../images/Samsung-J5_2017.png");
    pointer-events:none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 30;
}

#fmode_select {
    display:none;
    width:40vw;
    margin: auto;
}

#ficons {
    margin: auto;
    justify-content: space-evenly;
    align-items: center;
    display: flex;
    width:65vw;
}

#overlay_opacity, #overlay_mode {
    display: none;
}

#add_item {
    display:none;
}

#download_pdf {
    color: #A04040;
}

.icons {
  color: #444;
  font-size: 5.5vh;
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  display:inline-block;
  text-align: center;
}

.icons_big {
    font-size: 16.5vh;
}

.mainmenu {
    padding:4vh;
}

.icon_label {
    padding-top: 1vh;
    display: block;
    text-align: center;
    font-family: sans-serif;
    font-size: 2vh;
}

.discoimage {
    margin:1vh 0vh 0vh 0vh;
    width:100%;
    clear:both;
}

.discoparagraph {
    text-align:center;
    margin-bottom:4vh;
}

.hidden {
    display: none;
}

#splash_meta p {
    width:60vw;
    text-align:right;
    overflow: auto;
}
#splash_meta p img {
    width:15vh;
    float:right;
    margin:0px 0px 0px 1vh;
}

#addiiif_uri {
  width:60vw;
  margin-bottom: 1vh;
}

/* MAIN GRID ZONES */

#gridwrap {
  display: grid;
  grid-template-columns: 35vw 30vw 35vw;
  grid-template-rows: 10vh 70vh 20vh;
  /* border:1px solid #ccc; */
  /* height: 100vh; */
  height: calc(var(--vh, 1vh) * 100);
  /*
  top: calc((100vh - 49vw)*0.333);
  position: absolute;
  width:100vw;
  left:0px;
  */
}

#bottom {
  display:flex;
  color:#888;
  font-size:4vw;
  padding:0vw;
  grid-column: 2 / span 3;
  grid-row: 3;
  white-space: nowrap;
  height: 20vh;
  max-height: 20vh;
  justify-content: space-evenly;
  align-items: center;
  border-top:1px solid #888;
}

#construction {
  grid-column: 2;
  grid-row: 1  / span 2;
  border-right:1px solid #888;
}

#adjust {
  grid-column: 3;
  grid-row: 2;
}

#scroll {
  grid-column: 1;
  grid-row: 2 / span 2;
  height:90vh;
  overflow:scroll;
  border-right:1px solid #888;

}

#logo {
    display: block;
    grid-column: 3;
    grid-row: 1;
    text-align: center;
    vertical-align: middle;
    padding-bottom: 1vh;
}

.mobile {
    display: none;
}

.desktop {
    display: block;
}

/* SPLASHS */

.splash {
  display: none; /* grid; */
  grid-template-columns: 100vw;
  grid-template-areas: "a";
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: rgba(255, 255, 255, 1);
}

.splash_content {
  text-align: center;
  grid-area: a;
  align-self: center;
  justify-self: center;
  z-index: 110;
  font-size: 3.4vw;
  display:none;
  padding:10vw;
}

.splash_content h1 {
    font-size: 8vw;
}

.splash_content hr {
  width:50%;
  color:#ccc;
}

#iframe_pdfview {
      z-index: 120;
      position: absolute;
      top:12%;
      left:0;
      height:88%;
      width:80%;
      border:none;
}

#pdfctrl {
    z-index: 120;
    position: absolute;
    top:12%;
    left:80%;
    height:88%;
    width:20%;
    border:none;
}

/* INTERACTIONS */

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


/* SELECTS */

.select-css {
	display: block;
	font-size: 2vh;
    font-weight: 700;
	font-family: sans-serif;
	/* font-weight: 700; */
    color:#444;
    border-width: 0.4vh;
    border-color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 1.6vh 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
    border-radius: 1.25vh;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #444;
}
.select-css:focus {
	border-color: #444;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	outline: none;
}
.select-css option {
	font-weight:normal;
}

/* SLIDERS */

.sliders, .sliders.p {
    /* display:flow-root; */
    display:none;
    width:45vw;
    font-size: 2vh;
    margin-left: 5vw;
    margin-right: 15vw;
}

[id^="f"].ui-slider-horizontal {
  background: #888;
}

[id^="f"].ui-slider-handle, .ui-slider-handle {
    height: 10vh;
    background: #444 !important;
    color:#444 !important;
}

#close_slider, #close_disco, #close_splash {
    color: #444;
    font-size: 6vh;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    display:none;
    float:left;
}

#close_disco, #close_splash {
    z-index: 900;
    position: absolute;
    right:0px;
    top:0px;
    background-color: white;
    width:20vw;
    height:10vh;
    padding:0px;
    margin:0px;
    justify-content: space-evenly;
    align-items: center;
}


#disco_select {
  margin: 0vh 0vw;
  grid-column: 1;
  grid-row: 1;
  height:10vh;
  font-size: 2vh;
}

#brand_select, #model_select {
    width:90%;
    margin-left:auto;
    margin-right:auto;
    border-color:#000;
    color:#000;
}

#layer_select {
    width:90%;
    margin-left:auto;
    margin-right:auto;
    background-color: #444;
    color:white;
}

#close_slider {
    position: absolute;
    top: 80vh;
    right: 1vh;
    margin:2vh;
    clear: both;
}

.close_slider_label {
    font-family: sans-serif;
    font-size: 2vh;
    margin-right: 5vh;
    margin-bottom: 2vh;
    vertical-align: middle;
}