@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


body {
font-family: 'Ubuntu', sans-serif;
    font-size: 1.25em;
  }



h1 {
  color: #202122;
font-size: 1.75em;
  font-weight: bold;
font-family: 'Ubuntu', sans-serif;
}

p {
  color: #202122;
font-size: 1.2em;

font-family: 'Ubuntu', sans-serif;
}


.navbar {
padding-top: 1em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
border-bottom: 10em;
font-family: 'Ubuntu', sans-serif;
font-size: 1.5em;
margin-bottom: 1em;
   position: sticky;
   top: 0px;
z-index: 1;
}




.btn-outline-success {
    --bs-btn-color: #00704A;
    --bs-btn-border-color: #00704A;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #00704A;
    --bs-btn-hover-border-color: #00704A;
    --bs-btn-focus-shadow-rgb: 25,135,84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #00704A;
    --bs-btn-active-border-color: #00704A;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #00704A;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #00704A;
    --bs-gradient: none;
}

.form-control:focus {
        border-color: #49176D;
        box-shadow: 0 0 0 0.2rem rgba(239, 206, 255, 0.96);
    } 

.imagedisplay {
max-width: 85vw;
max-height: 85vh;
display: inline-block;
}

.imagedisplay img {
max-width: 85vw;
max-height: 85vh;
background-color: #ffffff;

}

.modal-dialog {
margin-left: 0;
padding-left: 4em;
}

.modal-content {
background-color: #212529 !important;
border-color: transparent !important;
  width: calc(100% * var(--imagedisplay));
  display: inline-block;


}

.modal {
max-width: 100vw;
max-height: 100vh;

top: 0;
}

.modal-backdrop {
  background-color: #49176D;

}




.modal-header {
color: #49176D !important;
justify-content: flex-start !important;
border-bottom: transparent !important;
}

.modal-footer {
justify-content: flex-start !important;
border-top: transparent !important;
}

.btn-close {
    margin: 0 !important;
color: #49176D !important;
}

.modal-title {
color: white !important;
}

.footer {
margin-top: 2em;
padding-top: 2.2em;
padding-bottom: 2.2em;
padding-left: 1em;
padding-right: 1em;
font-family: 'Ubuntu', sans-serif;
font-size: .75em;
color: #ffffff !important;
background-color: #00704A;
}

.thumbnail {
width:auto%;
height:15em;
}

/* Resize images */
.thumbnail img {
    width: auto;
    height: 100%;
}

.spinner{
font-size: 1.75em;
  font-weight: bold;
font-family: 'Ubuntu', sans-serif;
width: 25vw;
height: 25vw;
background-image: url("https://www.inlag.com/_assets/img/svg/inlag_logo.svg");
background-repeat: no-repeat;
position: absolute;
top:0;
bottom:0;
left:0;
right: 0;
margin: auto;
animation: spin 1s infinite linear;
}

@keyframes spin {
from{
    transform: rotate(0deg);
}to{
    transform: rotate(360deg);
}
}

#overlay{
height:100%;
width:100%;
background: #ffffff;
position:fixed;
left:0;
top:0;
} 

.spinner-text {
font-size: 1.75em;
  font-weight: bold;
font-family: 'Ubuntu', sans-serif;
  text-align: center;
margin-top: 80vh;
}



@media only screen and (max-width: 1000px) {
.modal-content {width: 96vw !important;}
.row {width: 100% !important;}
.navbar {margin-left: -1em; margin-right: -2em; font-size: 20px;}
.footer {margin-left: -1em; margin-right: -2em; font-size: 20px;}
h1 {font-size: 50px;}
body {font-size: 20px;}
li {font-size: 20px;}
.thumbnail {margin-left: -.2em; width: 85vw; height: auto;}
.thumbnail img {width: 85vw; height: auto;}
.modal {margin-left: 0vw;}

.imagedisplay {width: auto; height: auto; display: inline-block;}
.imagedisplay img {max-width: 95.5vw; width: 95.5vw; height: auto;}
.modal-dialog {margin-left: 0; padding-left: .35em;}
}