body
{
  margin:0px;
  padding:0px;
  background-color:rgb(70,70,70);
  
  font-family:Arial;
  font-size:14px;
}
a
{
  color:white;
  text-decoration:none;
}
a:hover { text-decoration:underline; }
.clear
{
  clear:both;
}

.bookii_header
{
  width:100%;
  height:50px;
  overflow:hidden;
  background-color:rgb(30,30,30);
  color:white;
  
  position:fixed;
  top:0px;
  left:0px;
  z-index:9000000;
}
  .column
  {
    float:left;
    line-height:50px;
  }
  .col1 { text-align:left; width:33%; }
  .col2 { text-align:center; width:33%; }
  .col3 { text-align:right; float:right; }
  .col4 { text-align:right; float:initial; overflow:hidden; }
    .bookii_editor_info { float:right; }
    .bookii_editor_buttons img,
    .bookii_editor_save span img { margin-top:9px; }
    .bookii_editor_save { float:right; }
      .bookii_editor_save span { margin-left:3px; }
      .bookii_editor_hidden
      {
        display:none;
      }
    .inputfile
    {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }
      .inputfile + label,
      .submitButton
      {
          font-weight: 600;
          color: white;
          background-color: black;
          display: inline-block;
          
          height:30px;
          margin:8px;
          border:solid 2px red;
          line-height:30px;
          padding:0px 11px;
          
          cursor: pointer; /* "hand" cursor */
      }
      
      .inputfile:focus + label,
      .inputfile + label:hover,
      .submitButton:hover
      {
          background-color: red;
      }
      .inputfile:focus + label,
      .submitButton:focus
      {
          outline: 1px dotted #000;
          outline: -webkit-focus-ring-color auto 5px;
      }
    .zoomButton
    {
      border:solid 1px white;
      color:white;
      background-color:rgb(30,30,30);
      height:25px;
      width:25px;
      cursor:pointer;
    }

.bookii_container
{
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;
  
  background-color:white;
  
  width:210px;
  height:297px;
  overflow:hidden;
}
  .bookii_container img
  {
    width:100%;
  }



.bookii_creator
{
  margin-left:auto;
  margin-right:auto;
  
  width:210px;
  height:297px;
  margin-top:-297px;
  overflow:hidden;
  
  position:relative;
}
  .polyElement
  {
    fill:rgba(52,176,207,0.5);
    stroke:rgb(52,176,207);
    stroke-width:1;
    cursor: grab;
  }
    .polyElement:hover
    {
      fill:rgba(52,176,207,0.8);
    }
  .polyElementActive
  {
    fill:rgba(250,0,0,0.5);
    stroke:rgb(250,0,0);
    stroke-width:1;
    cursor: help;
  }
  .polyElementCreate
  {
    fill:rgba(150,150,150,0.5);
    stroke:rgb(150,150,150);
    stroke-width:1;
  }
  .polyText
  {
    color:rgb(50,50,50);
    font-size:4px;
    cursor: grab;
  }


.bookii_elementconfig
{
  position:fixed;
  top:54px;
  left:0px;
  width:230px;
  height:360px;
  
  background: rgb(45,45,45);
  background: linear-gradient(135deg, rgb(45,45,45) 0%,rgb(55,55,55) 100%);
  color:white;
  
  display:none;
  box-shadow: 0px 0px 6px black;
  z-index:9000100;
}
  .bookii_elementconfig .numberField,
  .bookii_elementconfig .textField
  {
    color: white;
    background-color: rgb(150,150,150);
    border:solid 1px white;
    text-align:center;
    width:90%;
    padding:2px;
    margin:2px;
  }
    .bookii_elementconfig .textField { text-align:left; }
  .elementButton
  {
      font-weight: 600;
      color: white;
      background-color: black;
      display: inline-block;
      
      height:30px;
      border:solid 2px rgb(150,150,150);
      line-height:30px;
      padding:0px 11px;
      
      cursor: pointer;
  }
    .buttonSave { border-color:rgb(50,200,50); }
    .buttonSave:hover { background-color:rgb(50,230,50); }
    .buttonClose { border-color:rgb(150,150,150); }
    .buttonClose:hover { background-color:rgb(100,100,100); }
    .buttonDelete { border-color:rgb(150,0,0); }
    .buttonDelete:hover { background-color:red; }

.bookii_einstellungen
{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  
  background: #1e1e1e;
  background: linear-gradient(135deg, #1e1e1e 0%,#444444 100%);
  color:white;
  
  display:none;
  overflow:scroll;
  z-index:9000200;
}
  .bookii_einstellungen .container
  {
    margin:10%;
    margin-top:3%;
    padding:5%;
    border:solid 1px rgb(100,100,100);
  }
    .bookii_einstellungen .container .numberField
    {
      color: white;
      background-color: rgb(150,150,150);
      border:solid 1px white;
      text-align:center;
      width:50px;
      padding:2px;
      margin:2px;
    }
    .bookii_einstellungen .container .resetButton
    {
      font-weight: 600;
      color: white;
      background-color: black;
      display: inline-block;
      
      height:30px;
      border:solid 2px red;
      line-height:30px;
      padding:0px 11px;
      
      cursor: pointer; /* "hand" cursor */
    }
    .bookii_einstellungen .container .saveButton
    {
      font-weight: 600;
      color: white;
      background-color: black;
      display: inline-block;
      
      height:30px;
      border:solid 2px green;
      line-height:30px;
      padding:0px 11px;
      
      cursor: pointer; /* "hand" cursor */
    }
      .bookii_einstellungen .container .resetButton:hover
      {
        background-color: red;
      }
    #bookiiconfig_preview_helligkeit_box
    {
      width:100px;
      text-align:center;
      background-color:white;
      color:black;
    }
    #bookiiconfig_fields
    {
      display:none;
    }









 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 19px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.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: 13px;
  width: 13px;
  left: 3px;
  bottom: 3px;
  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(15px);
  -ms-transform: translateX(15px);
  transform: translateX(15px);
}

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

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