body {
  font-family:'Lato', sans-serif !important;
  background:#08004D !important;
  overflow-x:hidden !important;
  color:white !important;
}

#date {
  text-transform:uppercase !important;
}

.text-primary {
  color:white;
}

.text-alt {
  color:#DAE4F8;
}

.bg-dark {
  background:#050721;
  color:white;
}

.date-picker {
  background:#1E3A73;
  box-shadow:0px 4px 12px rgba(0, 0, 0, 0.25);
  border-radius:8px;
  text-align:center;
  color:#A9BEE3;
}

.prayer-times {
  background-image:url("/imgs/header-bg.png");
  background-repeat:no-repeat;
  background-position:right 0;
}

.prayer-card {
  font-weight:bold;
  text-transform:capitalize;
}

.divider {
  border:1px solid #2B255E;
  margin-top:1em;
}

.prayer-table {
  color:#A9BEE3;
  text-transform:capitalize;
}

.highlighted {
  background:rgba(0, 0, 0, 0.4);
  border-radius:8px;
}

.table-icon {
  max-width:25px;
  margin-left:1em;
  margin-right:1em;
}

.mailing-list {
  width:50%;
}

.mailing-list-title {
  font-size:54px;
  font-weight:bold;
  line-height:1;
}

.mailing-list-p {
  font-size:24px;
  line-height:1.25;
  font-weight:200;
}

.mailing-list-subtitle {
  font-size:21px;
}

#mc_embed_signup form {
  padding: 1em 0 0 0;
}

.mc-field-group {
  display: flex;
}

#mc_embed_signup .mc-field-group [type="email"] {
  flex: 1;
  background-color: #372F7B;
  border-color: #372F7B;
  border-radius: 0;
}

#mc_embed_signup .button {
  max-width: 150px;
  height: 100%;
  margin: 0 0 0 5px;
  border-radius: 0;
}

#mc_embed_signup div#mce-responses {
  margin: 0;
  padding: 0;
  top: 0;
}

#mc_embed_signup div.response {
  padding: 0;
}

#mc_embed_signup .button {
  background-color: #0081AF;
}

.footer {
  font-size:18px;
  color:#A9BEE3;
}

::-moz-placeholder {
  color:white !important;
  opacity:1;
}

:-ms-input-placeholder {
  color:white !important;
  opacity:1;
}

::placeholder {
  color:white !important;
  opacity:1;
}

.input {
  background:#372F7B;
  box-shadow:0px 4px 12px rgba(5, 7, 33, 0.6);
  height:100%;
}

.button {
  background:#0081AF;
  box-shadow:0px 4px 12px rgba(5, 7, 33, 0.6);
  border-radius:0;
  height:100%;
}

.dialog {
  background:rgba(252, 121, 0, 0.15);
  color:#FC7900;
  border:1px solid #FC7900;
  box-sizing:border-box;
  border-radius:8px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  box-shadow:0 0 0 30px #372F7B inset !important;
  -webkit-text-fill-color:white !important;
}

.circles {
  width:5px;
  height:5px;
  border-radius:50%;
  background-color:#08004D;
  box-shadow:0px 0px 0px 10px #08004D,
    0px 0px 0px 12px #00B2FF,
    0px 0px 0px 20px #08004D99,
    0px 0px 0px 22px #00b3ff99,
    0px 0px 0px 30px #08004D66,
    0px 0px 0px 32px #00b3ff66,
    0px 0px 0px 40px #08004D50,
    0px 0px 0px 42px #00b3ff50,
    0px 0px 0px 50px #08004D33,
    0px 0px 0px 52px #00b3ff33;
}

.animated-circles {
  width:5px;
  height:5px;
  border-radius:50%;
  background-color:#08004D;
  transform:translateX(-50%);
  transition:all 0.3s ease-in-out;
  animation:ripple 3.0s 0.3s infinite;
  -webkit-animation:ripple 3.0s 0.3s infinite;
}

@-webkit-keyframes ripple {
  20% {
    box-shadow:0px 0px 0px 10px #08004D,
        0px 0px 0px 12px #00B2FF;
  }

  40% {
    box-shadow:0px 0px 0px 10px #08004D,
        0px 0px 0px 12px #00B2FF,
        0px 0px 0px 20px #08004D99,
        0px 0px 0px 22px #00b3ff99;
  }

  60% {
    box-shadow:0px 0px 0px 10px #08004D,
        0px 0px 0px 12px #00B2FF,
        0px 0px 0px 20px #08004D99,
        0px 0px 0px 22px #00b3ff99,
        0px 0px 0px 30px #08004D66,
        0px 0px 0px 32px #00b3ff66;
  }

  80% {
    box-shadow:0px 0px 0px 10px #08004D,
        0px 0px 0px 12px #00B2FF,
        0px 0px 0px 20px #08004D99,
        0px 0px 0px 22px #00b3ff99,
        0px 0px 0px 30px #08004D66,
        0px 0px 0px 32px #00b3ff66,
        0px 0px 0px 40px #08004D50,
        0px 0px 0px 42px #00b3ff50;
  }

  100% {
    box-shadow:0px 0px 0px 10px #08004D,
        0px 0px 0px 12px #00B2FF,
        0px 0px 0px 20px #08004D99,
        0px 0px 0px 22px #00b3ff99,
        0px 0px 0px 30px #08004D66,
        0px 0px 0px 32px #00b3ff66,
        0px 0px 0px 40px #08004D50,
        0px 0px 0px 42px #00b3ff50,
        0px 0px 0px 50px #08004D33,
        0px 0px 0px 52px #00b3ff33;
  }
}

@media (max-width: 762px) {
  .mc-field-group {
    flex-direction: column;
  }

  #mc_embed_signup .mc-field-group input {
    margin: 0;
    width: 100%;
    max-width: 100%;
  }

  #mc_embed_signup .mc-field-group [type="submit"] {
    margin-top: 5px;
  }
}