@font-face {
    font-family: 'Shed Web';
    font-style: normal;
    font-weight: normal;
    src: url('https://theshed.org/_web-fonts/ShedWeb-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Shed Web Italic';
    font-style: italic;
    font-weight: normal;
    src: url('https://theshed.org/_web-fonts/ShedWeb-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Shed Web Bold';
    font-style: normal;
    font-weight: bold;
    src: url('https://theshed.org/_web-fonts/ShedWeb-Bold.woff2') format('woff2');
}

@font-face {
    src: url();
    font-family: 'Shed Web Italic Bold';
    font-style: italic;
    font-weight: bold;
    src: url('https://theshed.org/_web-fonts/ShedWeb-BoldItalic.woff2') format('woff2');
}

@font-face {
    src: url();
    font-family: 'Shed Web Display';
    font-style: none;
    font-weight: bold;
    src: url('https://theshed.org/_web-fonts/ShedWeb-HeavyDisplay.woff2') format('woff2');
}

body {
    font-family: 'Shed Web', 'Arial Narrow', 'Roboto Condensed', sans-serif !important;
    background-color: #eaeaea !important;
    color: #000000 !important;
}

div {
    font-family: 'Shed Web', 'Arial Narrow', 'Roboto Condensed', sans-serif !important;
}

#main .t, #main .c {
    background-image: none !important;
    background-color: #ffffff !important;
}

#main .t {
    display: none !important;
}

#main .b {
    background-image: none !important;
}

#header {
    padding: 0 !important;
    border-bottom: 2px solid black !important;
}

.logo {
    border-bottom: 2px solid black !important;
    margin: 0 !important;
    text-align: left !important;
}

.logo img{
  padding: 16px !important;
  float: left !important;
  margin: 2px -2px !important;
  height: 35px;
}

.btn {
    background-color: #eaeaea !important;
    color: #000000 !important;
    border-radius: 25px !important;
    font-size: 21px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    font-size: 21px !important;
    line-height: 35px !important;
    transition: background-color 0.3s cubic-bezier(0, 0.15, 0, 1), border-color 0.3s cubic-bezier(0, 0.15, 0, 1), color 0.3s cubic-bezier(0, 0.15, 0, 1) !important;
  }

.btn:hover {
    background: none !important;
    color: #ffffff !important;
    border-radius: 25px !important;
    box-shadow: none !important !important;
    background-color: #4C4C4C !important;
}

#main-top-message{
  font-size: 14px !important;
  padding-bottom: 10px !important;
}

#header #headertext {
  font-family: 'Shed Web Display', 'Arial Narrow', 'Roboto Condensed', sans-serif !important;
  font-size: 48px !important;
  border-bottom: 2px solid black !important;
  text-align: center !important;
  padding-bottom: 12px !important;
  padding-top: 8px !important;
  vertical-align: middle !important;
  line-height: 50px !important;
}

#headerparagraph {
    padding-top: 10px !important;
    font-size: 21px !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
    font-weight: normal !important;

}

#detailExpander {
    padding-bottom: 14px !important;
    margin-left: 14px !important;
    font-size: 21px !important;
    font-weight: normal !important;
    color: #767676 !important;
}

#whatisthis {
    padding-bottom: 20px !important;
    margin-left: 14px !important;
    font-size: 21px !important;
}

#whatisthis a{
  font-weight: normal !important;
  color: #767676 !important;
}

.warning-box {
    background-image: none !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border-bottom: 2px solid black !important;
}

.after #MainPart_divWarningBox{
  border: none !important;
}
#MainPart_lbManualUpdateWarning{
  margin: 8px 0 8px 0 !important;
}

#noscript{
  max-width: 514px !important;
  margin: 0 auto !important;
}

#noscript .alert{
  border-radius: 7px !important;
  border: none !important;
  text-shadow: none !important;
}

#noscript .alert a{
  color: white !important;
}

.alert {
  padding: 8px 15px 8px !important;
  font-weight: normal !important;
  font-size: 14px !important;
  border: 1px solid #ff0000 !important;
  border-radius: 7px !important;
  color: white !important;
}

.alert-error{
  background-color: #ff0000 !important;
}

#MainPart_lbEventStartsAtText{
  font-weight: normal !important;
}

.processbar-box {
    background-image: none !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    padding-bottom: 3px !important;
}

.processbar-box .holder {
    background-image: none !important;
    background-color: #ffffff !important;
    padding-top: 6px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid black !important;
}

#MainPart_pProgressbarBox_Holder_Larger{
  font-size: 21px !important;
  font-weight: normal !important;
  line-height: 26px !important;
  margin-bottom: 36px !important;
}

#MainPart_lbQueueNumber, #MainPart_lbUsersInLineAheadOfYou, #MainPart_lbExpectedServiceTime, #MainPart_lbExpectedServiceTimeTimeZonePostfix, #MainPart_lbWhichIsIn, #MainPart_lbLastUpdateTimeText, #MainPart_lbLastUpdateTimeTextTimeZonePostfix  {
  font-weight: bold !important;
}

#MainPart_lbLastUpdateTime{
  margin-left: 3px !important;
}

#MainPart_ulProgressbarBox_Holder_Processbar {
  display: none !important;
}

#MainPart_divProgressbar{
  height: 80px !important;
  width: 80px !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  position: relative !important;
  margin: 0 auto !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  border: none !important;
}

#MainPart_divProgressbar::after{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("data:image/svg+xml;utf8,<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 210'><defs><style>.cls-1{fill:%239cff00;}</style></defs><title>Artboard 1</title><path class='cls-1' d='M104.71,208.69A104.24,104.24,0,1,1,209,104.45,104.36,104.36,0,0,1,104.71,208.69Zm0-197.48A93.24,93.24,0,1,0,198,104.45,93.35,93.35,0,0,0,104.71,11.21Zm0,175.72,0-11A71.3,71.3,0,0,0,154.84,54.22l7.78-7.77a82.3,82.3,0,0,1-57.89,140.48Z'/></svg>") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  animation: spin 2s linear infinite !important;
}

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

#MainPart_divProgressbar #MainPart_divProgressbar_Progress{
  display: none !important;
}

#MainPart_lbQueueNumberText, #MainPart_lbQueueNumber, #MainPart_lbExpectedServiceTimeText, #MainPart_lbExpectedServiceTime, #MainPart_lbExpectedServiceTimeTimeZonePostfix{
  display: none !important;
}

#MainPart_lbWhichIsInText, #MainPart_lbWhichIsIn, #first-in-line{
  font-size: 42px !important;
  line-height: 50px !important;
  font-family: 'Shed Web Display', 'Arial Narrow', 'Roboto Condensed', sans-serif !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#first-in-line{
  color: #9cff00 !important;
}

#MainPart_lbUsersInLineAheadOfYouText, #MainPart_lbUsersInLineAheadOfYou{
  float: left !important;
}
#MainPart_lbUsersInLineAheadOfYouText{
  margin-left: 3px !important;
}
#MainPart_lbUsersInLineAheadOfYou{
  margin-left: 3px !important;
}

#queue-paused{
  float: left !important;
  margin-left: 3px !important;
}

#serviced-soon{
  text-align: left !important;
  float: left !important;
  margin-left: 3px !important;
  margin-bottom: 4px !important;
  margin-top: 36px !important;
}

#MainPart_divProgressbarBox_Holder{
  border-bottom: 2px solid black !important;
}

#MainPart_divProgressbarBox_Holder_LastUpdateTime {
  text-align: left !important;
  font-size: 21px !important;
  font-weight: normal !important;
  padding-bottom: 20px !important;
}

#MainPart_frmReminder2{
  margin: 0 !important;
}
#MainPart_FormEmailInput{
  display: flex !important;
  flex-direction: column !important;
}
#MainPart_lbNotyfyMeText, #MainPart_inpEmailAddress{
  font-family: 'Shed Web', 'Arial Narrow', 'Roboto Condensed', sans-serif !important;
  font-size: 21px !important;
  font-weight: normal !important;
}

#MainPart_inpEmailAddress{
  margin-bottom: 45px !important;
  width: calc(100% - 26px) !important;
}

#aUpdateEmail{
  align-self: center !important;
  margin-bottom: 35px !important;
}

#aUpdateEmail .l{
  font-family: 'Shed Web', 'Arial Narrow', 'Roboto Condensed', sans-serif !important;
  font-size: 21px !important;
  line-height: 35px !important;
}

#divEmailStatusFrame{
  margin-top: 10px !important;
  font-size: 14px !important;
  border: 1px solid #ff0000 !important;
  border-radius: 7px !important;
  color: white !important;
  background-color: #ff0000 !important;
  text-shadow: none !important;
  padding: 8px 15px 8px !important;
}

.finished {
  font-size: 21px !important;
}

.time-box{
  background-color: #f1f1f1 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

#MainPart_divTimeBox_Holder_Frame{
  font-size: 14px !important;
}

.beforeElement{
  font-size: 21px !important;
  text-align: left !important;
  margin-left: 4px !important;
}

.larger.beforeElement{
  display: none !important;
}

#footer {
    padding: 0 !important;
    padding-bottom: 16px !important;
    width: 100% !important;

}

#footer .by{
  padding-right: 0 !important;
}

#footer-direct-link{
  padding: 0 !important;
}

#MainPart_divExitLine{
  padding-left: 0 !important;
}

.modal-body{
  font-family: 'Shed Web', 'Arial Narrow', 'Roboto Condensed', sans-serif !important;
}

#h2ConfirmRedirect, #pConfirmRedirectTime{
  font-family: 'Shed Web Bold', 'Arial Narrow', 'Roboto Condensed', sans-serif !important;
  font-size: 42px !important;
  line-height: 35px !important;
}

#pConfirmRedirectTime{
  margin-top: 28px !important;
  margin-bottom: 31px !important;
}

#pConfirmRedirect{
  margin-bottom: 30px !important;
}

@media only screen and (max-width: 540px) {
    #main .c {
        padding: 10px !important;
    }
}

@media only screen and (max-width: 480px) {
  #footer{
    width: 100% !important;
    margin: 0 !important;
  }
  #footer-queueit-link .by{
    text-align: left !important;
    width: 100% !important;
  }
  #MainPart_lbWhichIsInText, #MainPart_lbWhichIsIn{
    line-height: 44px !important;
  }
  #MainPart_lbWhichIsInText{
    white-space: pre-wrap !important
  }
  #MainPart_lbWhichIsIn{
    margin-bottom: 20px !important;
    float: left;
  }
  #queue-paused{
    width: 100% !important;
  }
}