body {font-size:1.8em;background:#f8fafe;overflow-y:auto;}

body:after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    background-repeat: no-repeat;
    background-position:0;
    background-size: cover;
    z-index:-1;
    transition:opacity .3s ease-out;
}

header {backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);padding:10px 0;text-align:center;border-bottom:1px solid #ddd;background-color:rgba(255,255,255,.7);z-index:2;
box-shadow: 0 0 3px rgba(0,0,0,.15);  
}
header h6 {margin:0;}
header h6 strong {text-transform:uppercase;}
.jumbotron {margin-top:60px;padding-bottom:30px;}
.hello-user {vertical-align:middle;text-align:left;color:#555;margin-top:0px;}
.hello-user > div {width:auto;display:inline-block;}
.hello-name {display:block;vertical-align:middle;margin:0 0 30px 0;font-size:1.2em;border-bottom:2px dashed #ddd;padding-bottom:10px;}
.hello-avatar {width: 32px;height: 32px;display: inline-block;background-size: cover;vertical-align: middle;border-radius: 50%;margin: -5px -3px 0 5px;}
.child-avatar {width: 60px;height: 60px;display: inline-block;background-size: cover;vertical-align: middle;border-radius: 50%;margin:0 10px 0 0;border:4px solid #eee;float:left;}
.child-box-check-wrap {margin:0 10px 0 0;float:left;}
.child-box{text-align: left;border-bottom: 1px solid #ddd;height: 86px;padding: 17px 0 0 10px;}
.child-box h5 {margin:0;padding-top:5px;font-weight:400;}
.child-box h6 {margin:-3px 0 0;}
.request-type-grid .row {margin-top:30px;}
.request-type {text-align:center;border:1px solid #ddd;border-radius:4px;min-height:244px;}
.request-type:hover {cursor:pointer;border-color:#0FA0CE;}
.request-type:hover h5, .request-type:hover h6, .request-type:hover .rt-ico {color:#0FA0CE;}
.request-type-icon .rt-ico {font-size:80px;padding:30px 0;}
.smaller-requests .request-type-icon .rt-ico {font-size:50px;padding:20px 0;}
.smaller-requests .request-type {min-height:140px;}
.request-type h5 {padding:0 20px;line-height:1.3em; overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.request-type h6 {padding:0 20px;line-height:1.3em;font-weight:300;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;  }
.rt-placeholder {display:none;}
.rt-placeholder:hover {cursor:default;border-color:#ddd;}
footer {margin:0px 0 20px;}
.uppy-Dashboard-poweredBy {display:none !important;}
.sticky {position: sticky;top: 0;width: 100%;z-index:2;}
.subhdr {text-align:center;background:#f8fafe;color:#555;text-transform:uppercase;padding:5px 0;border-bottom:1px solid #ddd;}
.hdr-back-website {display:none;}
.btn-lg.btn-positive {background-color: #1BB240;}
.btn-lg.btn-positive:hover {background-color: #148630;}   
.btn-disabled, .btn-disabled:hover {background:#eee !important;color:#999;cursor:not-allowed !important;} 
.subhdr h6 {margin:0;}
.label-top-space {margin-top:1em;}
.container {padding-top:50px;}
.uppy-size--md .uppy-Dashboard-dropFilesTitle {font-size:1em}
.lookup-btn {margin-top: 0;background: none;color: #555;font-size: .7em;padding: 9px 18px;font-weight:600;}
.lookup-btn:hover {background-color:#eee;}
.lookup-btn:active {background-color:#ddd;}
.input-lg {padding: 20px !important;height: 70px !important;}
.btn-lg {padding: 10px 30px !important;margin:40px 0 40px;}
.btn-lg > * {margin:0;font-weight:600;}
a.muted {text-decoration:none;opacity:.8;}
p.muted {opacity:.5;}
.align-center {text-align:center;}
.loading form {pointer-events:none;}
label {font-size:85%;}
#district-logo {width:180px;position:absolute;top:10px;left:10px;}
.error-msg {display:none;}
.error .error-msg {display:block;}
.error-msg {
  position: relative;
  padding: 1rem 0;
  margin-bottom: 2rem;
  border-radius: .25rem;  
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;  
  font-weight:700;
  text-align:center;
}
.error-msg p {
  margin:0;
  font-size:85%;
}
.g-signin2 {width:270px;margin:0 auto;}
#district-logo {display:none;}
#login-form {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 25px 30px 20px;    
  border-radius: 20px;
  background: rgba(255,255,255,.7);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
  border: 1px solid rgba(0,0,0,.125);
}
#login-form label em {font-weight:200;font-style:normal;font-size:90%;}
#login-form h6 {
    text-align: center;
    font-weight: 700;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 1rem;
    margin: 0 -30px 20px;
    background: #f9fafe;
    color: #444;
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;    
}
#username, #password {border-color:#e0e2e3;color:#444;font-size:90%;background-color:rgba(255,255,255,.75);line-height:38px;}
#username:focus, #password:focus {background-color:rgba(255,255,255,.85);border-color: #80bdff;outline: 0;box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);}
.card-btn {
  color: #fff;
  background-color: #000;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  font-weight: 500;  
  display:block;
  width:100%;
  margin-top:10px;
}
.hdr-back-website span {margin-right:3px;}
#login-form-logo {margin:0 auto 25px;display:block;height:150px;}
.k12it-app-ico {font-size:35px;margin:0 5px 0;}
.show-when-loading, .loading .hide-when-loading {display:none;}
.loading .show-when-loading {display:inherit;}
.loading .card-btn {opacity:.4}

#login-form-wrap {
  max-width: 350px;
  margin: calc(30vh - 175px) auto 60px;
  padding-top: 20px;  
}

@media(max-width:1100px) {
    #district-logo {width:120px;}
}
@media(max-width:800px) {
  .hide-mobile {display:none;}
  .jumbotron .columns {width:100% !important;text-align:center;}
  .jumbotron .columns img {max-height:200px !important}
  .request-type {width:50% !important;margin:0;border-radius:0;border-top:none;border-right:none;min-height:184px;}
  .request-type:hover {cursor:pointer;border-color:#ddd;}
  .smaller-requests .request-type {min-height:160px;}
  .request-type-grid {margin-top:30px;}
  .request-type-grid .row {margin-top:0;}
  .request-type-grid {border-top:1px solid #ddd; border-right:1px solid #ddd;}
  .request-type-icon .rt-ico {font-size:67px;padding:20px 0;}
  .smaller-requests .request-type-icon .rt-ico {font-size:50px;padding:20px 0;}
  .rt-placeholder {display:block;}
}
@media (max-width:600px), (max-height:400px) {
  #login-form-wrap {
    max-width:100%;width:100%;margin:0;padding-top:0;
  }  
  #login-form {
    padding-top:40px;
    border:none;
    box-shadow:none!important;
    border-radius:0;
    padding-bottom:0;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:#f8fafe;
  }
  body {
    background:#f8fafe;
  }
  body:after {
    background-image:none!important;    
  }
  .container {
    width:100%!important;
    padding:0!important;
  }
}

svg.loading-spinner {
  animation: 2s linear infinite svg-animation;
  width: 26px;
  margin-bottom: -6px;
}

@keyframes svg-animation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg)
  }
}

circle {
  animation: 1.4s ease-in-out infinite both circle-animation;
  display: block;
  fill: transparent;
  stroke: #fff;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 280;
  stroke-width: 10px;
  transform-origin: 50% 50%;
}

@keyframes circle-animation {
  0%,
  25% {
    stroke-dashoffset: 280;
    transform: rotate(0);
  }
  
  50%,
  75% {
    stroke-dashoffset: 75;
    transform: rotate(45deg);
  }
  
  100% {
    stroke-dashoffset: 280;
    transform: rotate(360deg);
  }
}

body.bg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

header {
  display:none;
}