@import url('http://fonts.cdnfonts.com/css/lato');

html{
    font-family: 'Lato', sans-serif;
}

body{
    min-height:100vh;
    background-color: aliceblue;
    background-image: url(/assets/background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center bottom;
}

#viewdata{
    width: 60vw;
    margin:auto;
    margin-top: 10vh;
    padding: 2vw;
    color: rgb(239, 239, 239);
    background-color: #008ea7;
    border-radius: 10px;
    height:65vh;
    overflow-y:scroll;
}

#generaldata{
    width: 60vw;
    margin:auto;
    margin-top: 14vh;
    background-color: #88098d;
    color: rgb(239, 239, 239);
    padding: 2vw;
    border-radius: 10px;
    -webkit-filter: drop-shadow(0px 5px 10px #222);
    filter: drop-shadow(0px 5px 10px #222);
}

@media  only screen and (max-width: 864px) {
    #generaldata{
        width: 90vw;
    }
    #viewdata{
        width: 90vw;
    }
}

input, select, textarea{
    display:block;
}

input, textarea{
    margin-bottom: 1vw;
}

#generaldata button{
    margin:0.5vw;
    margin-right: 0;
}

#beforeimageserver, #afterimageserver, #signature{
    color: black;
    background-color: white;
    text-align: center;
    font-weight: bold;
    height: 60vh;
    width:100%;
    overflow-y: scroll;
    margin-bottom: 5vh;
    margin-top: 5vh;
}

#beforeimageslist img, #afterimageslist img, #signatureimage img{
    max-height: 50vh;
    max-width:100%;
    margin:auto;
    display:block;
    margin-bottom: 2vh;
}

#signature{
  height:45vh;
}
#signatureimage{
  margin-top:5vh;
}

.mainstuff{
    text-align: center;
    font-weight: bolder;
    color:white;
    margin-bottom: 5vh;
}
@media  only screen and (max-width: 864px) {
    .mainstuff{
        width: 85vw;
    }
}


.popup {
    display: none;
    position: fixed;
    padding: 10px;
    width: 280px;
    left: 50%;
    margin-left: -150px;
    height: fit-content;
    top: 40%;
    margin-top: -100px;
    color: black;
    background: #FFF;
    z-index: 20;
  }
  
  #popup2:after {
    position: fixed;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    z-index: -2;
  }
  
  #popup2:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #FFF;
    z-index: -1;
  }

  .primelogo{
    display:block;
    width: 20vw;
    height:auto;
    margin:auto;
    margin-top:5vh;
  }

  @media  only screen and (max-width: 864px) {
    .primelogo{
        width: 40vw;
    }
}

.footer{
    position:relative;
    padding-top: 5vh;
    font-style: italic;
    font-size: small;
    color:white;
    bottom:0;
    width:100%;
    text-align: center;
    margin:auto;
}

.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
  }
  .lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    
    border-radius: 50%;
    border: 6px solid #008ea7;
    border-color: #008ea7 transparent #008ea7 transparent;
    animation: lds-dual-ring 1.2s linear infinite;
  }
  @keyframes lds-dual-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .loading-loop{
    position:fixed;
    width:100%;
    height:100%;
    z-index:99;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.5);
  }