:root {
  --main-color: rgb(0, 145, 145);
  --mainclair:rgb(230, 245, 245);
}

.saved {
  background-color: #9FCC51;
}

.saveerror {
  background-color: red;
}

body { 
    font-family:sans-serif;
    margin:0px;
    /*background-color:lightgrey;*/
    font-size:medium;
    /*width: 99%;*/
    padding-top: 50px;
  }
  .input {
    font-size:x-large;
    width:100%;
  }
  .head {
    font-size:30px;
    background: var(--main-color);
    background: linear-gradient(0deg, var(--main-color) 0%, rgba(36,0,0,1) 100%); /* https://cssgradient.io/ */ 
    background:white;
    color:var(--main-color);
    text-decoration:bold;
    margin:0px;
    /*border-bottom:1px dotted var(--main-color);*/
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
  }
  .head a {
    text-decoration:none;
    color:var(--main-color);
    font-weight: bolder;
  }
  .subtitle {
    border-left:1px dotted var(--main-color);
    padding-left:10px;
    font-weight: 100;
    font-size:medium;
  }
  
  .menu {
    width:50px;
    height:50px;
    background-color:var(--main-color);
    color:white;
    padding:5px;
    padding-left:10px;
    margin-right:5px;
  }
  .topnav {
    overflow: hidden;
    background-color: var(--mainclair);
    position: relative;
    border-bottom:1px solid var(--main-color);
  }
  .bookdesc {
    max-height:300px;
    overflow:scroll;
  }
  .topnav #myLinks {
    display: none;
  }
  
  .topnav a {
    color: var(--main-color);
    padding: 10px 10px;
    text-decoration: none;
    font-size: 17px;
    font-weight:300;
    display: block;
  }
  
  .topnav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav a:hover {
    background-color: var(--main-color);
    color: white;
  }
  
  .search {
    display:inline-block;
    border-left:1px dotted var(--main-color);
    padding-left:5px;
    padding-bottom:5px;
  }
  .search #q {
    background-color: var(--mainclair);
    border:0px;
    width:170px;
    border-bottom:1px solid var(--main-color);
  }
  .search #btnsearch {
    border:0px;
    background-color:transparent; 
  }
  .main {
    padding:5px;
    /*padding-top:60px;*/
  }
h2 {
    margin-top:10px;
    margin-bottom:0px;
  }
h3 {
  margin-top:10px;
  margin-bottom:0px;
}
h3 a {
  color: var(--main-color);
}
.booksection {
  display:block;
  clear:right;
  width: auto;
  /*overflow-x: auto;
  white-space: nowrap;*/
  background:var(--mainclair);
  border-radius: 5px;
  padding:5px;
  margin:3px;
}
.field {
  margin-top:5px;
}
.librarycontent {
  display:block;
  clear:right;
  width: auto;
  overflow-x: auto;
  white-space: nowrap;
  background:var(--mainclair);
  background-position: center;
  border-radius: 5px;
  padding:3px;
}
.book {
    background-repeat: no-repeat;
    background-size: cover;
    margin: 2px 2px;
    border-radius: 5px;
    background-color: white;
    background-position: center;
    display: inline-block;
    overflow: hidden;
    position:relative;
}
.book .title {
    color:white;
    font-size:medium;
    text-align: center;
    /*vertical-align: middle;*/
    /*display: inline-block;*/
    font-size:small;
    display:block;
    background-color:black;
    opacity: 70%;
    /*line-height:20px;*/
    position:absolute;
    width:100%;
    top:120px;
    height:35px;
    overflow:hidden;
    border-radius:5px;
    white-space: normal;
}
.book .collorder {
  background-color: black;
  color:white;
  border:1px solid white;
  padding-left:1px;
  padding-right:1px;
}

  .btndld {
    box-shadow:inset 0px 1px 0px 0px var(--mainclair);
    background-color:var(--main-color);
    border-radius:3px;
    border:1px solid var(--main-color);
    display:inline-block;
    cursor:pointer;
    color:var(--mainclair);
    font-family:Arial;
    font-size:16px;
    padding:6px 24px;
    text-decoration:none;
  }
  .btndld:hover {
    background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
    background-color:#bc3315;
  }
  .btndld:active {
    position:relative;
    top:1px;
  }
  .btndld a {
    font-size: 16pt;
  }
.newflag {
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent orange transparent transparent;
  right: -70px;
  top: 0px;
  position: relative;
}
.readflag {
  display:block;
  float:left;
  content: '';
  width: 20px;
  height: 20px;
  background-image: url('img/readmark.png') ;
  background-size: 20px;
  right: -5px;
  top: 5px;
  position: relative;
}
.openbook {
  display:block;
  background-color:white;
  border-radius: 5px;
  margin:5px;
  padding:3px;
}
.minitoolbar {
  float:right;
}
.toolbar button, .minitoolbar button {
  box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color:#f9f9f9;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	padding:6px 6px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
  margin:2px 1px 2px 0px;
}
.minitoolbar button {
  margin:0px;
  padding:0px 10px;
  padding-top:3px;
}
.toolbar button, .minitoolbar button {
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	background-color:#e9e9e9;
}
.minitoolbar button img {
  margin:0px;
  padding:0px;
  height:20px;
}
.toolbar button img {
  height:20px;
}
.separator {
  border-left:1px dotted darkgrey;
  margin-left:3px;
  margin-right:3px;
}
 
.tool:active {
	position:relative;
	top:1px;
}

.tool img {
  height:20px;
  margin:5px;
}

form {
  margin:0px;
}

.pgmenu {
  list-style: none;
  margin:0px;
  padding:0px;
}

.pgmenu li {
  border-bottom:1px dotted var(--main-color);
  padding:5px;
}

.pgmenu li a {
  color: var(--main-color);
}

.main .item {
  border-bottom:1px dotted var(--main-color);
  padding:5px;
}

.dialog {
  border-radius: 5px;
  border-color: darkgrey;
  box-shadow: 5px 5px 5px darkgrey;
  display:none;
  background-color:#F2F3F4;
  border-color:black;
  padding:20px;
  position: fixed;
  top: 20%;
  left: 10%;
  width:80%;
  height: auto;

}
.dialog button {
  float:right;
  margin:5px;
}

@media only screen and (max-width: 600px) {
    /* For mobile: */
    body {
        margin:0x;
        
        
    }
    .book {
        height:155px;
        width: 100px;
    }
    .input {
      font-size:x-large;
    }
}
@media only screen and (min-width: 600px) {
    /* For desktop: */
    .book {
        height:200px;
        width: 150px;
    }
    .book .title {
      color:white;
      font-size:medium;
      text-align: center;
      /*vertical-align: middle;*/
      /*display: inline-block;*/
      font-size:small;
      display:block;
      background-color:black;
      opacity: 70%;
      /*line-height:20px;*/
      position:absolute;
      width:100%;
      top:165px;
      height:35px;
      overflow:hidden;
      border-radius:5px;
      white-space: normal;
  }
  .newflag {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 30px 30px 0;
    border-color: transparent orange transparent transparent;
    right: -120px;
    top: 0px;
    position: relative;
  }
}

#authlist, #colllist {
  display:none;
  background-color:white;
  font-size:medium;
  margin-left:15px;
  margin-right:15px;
  padding:5px;
  border: 1px solid darkgrey;
}

.switch {
  position: relative;
  display: block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 20;
  height: 20;
  margin-left:70px;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}