/* Fonts */
/* Outfit Font */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900; /* Supports a range of weights */
    src: url('/static/fonts/outfit/Outfit-VariableFont_wght.woff2') format('woff2'),
         url('/static/fonts/outfit/Outfit-VariableFont_wght.ttf') format('truetype');
}
/* Roboto Font */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/static/fonts/roboto/Roboto-Regular.ttf') format('truetype');
}

/* Alpine.js */
[x-cloak] { display: none !important; }

/* Notifications */
.notification-badge {
    position: absolute;
    top: 0;
    right: 20px;
    background-color: red;
    color: white;
    line-height: normal;
    border-radius: 20%;
    padding: .2rem .3rem;
    font-size: 0.6rem;
    display: inline-block;
    direction: ltr;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes ping-once {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(2);
      opacity: .1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
}

@keyframes ping-twice {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    25% {
      transform: scale(2);
      opacity: .1;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    75% {
      transform: scale(2);
      opacity: .1;
    }
    100% {
      transform: scale(2);
      opacity: 1;
    }
}

@keyframes pulse-once {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.01);
      opacity: .5;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
}

@keyframes pulse-twice {
    0% {
      opacity: 1;
    }
    25% {
        opacity: .3;
    }
    50% {
        opacity: 1;
    }
    75% {
      opacity: .3;
    }
    100% {
      opacity: 1;
    }
}
@keyframes borderGlow {
  0% {
    box-shadow: inset 0 0 0 rgba(255, 196, 0, 0);
  }
  50% {
    box-shadow: inset 0 0 8px rgb(9, 78, 156);
  }
  100% {
    box-shadow: inset 0 0 0 rgba(255, 196, 0, 0);
  }
}
@keyframes ringGlow {
  0% {
    box-shadow:  0 0 0 rgba(255, 196, 0, 0);
  }
  50% {
    box-shadow:  0 0 14px rgb(5, 97, 184);
  }
  100% {
    box-shadow:  0 0 0 rgba(255, 196, 0, 0);
  }
}

.notification {
    background-color: red;
    color: white;
    padding: 16px;
    margin-bottom: 10px;
    border-radius: 6px;
    opacity: 0.8;
    animation: fadeIn 0.2s ease;
}

.fade-out {
    animation: fadeOut 0.8s ease forwards;
}

.notification-message {
    width: auto;
}

/* Styling for account/base.html body */
/* Landscape orientation */
@media (orientation: landscape) and (max-width: 639px) {
    account-base-body { align-items: flex-start; }
}

@media (orientation: landscape) and (min-width: 640px) {
    account-base-body { align-items: center; }
}


/* Portrait orientation */
@media (orientation: portrait) and (min-width: 640px)  {
    account-base-body { align-items: center; }
}

@media (orientation: portrait) and (max-width: 639px)  {
    account-base-body { align-items: flex-start; }
}

/* Styling for filter chips */
.additional-contributions-filter-chip.active.apc {
    background-color: #0369a1; /*bg-sky-700*/
    color: white;
}
.additional-contributions-filter-chip.active.arc {
    background-color: #4f46e5; /*bg-indigo-600*/
    color: white;
}
.additional-contributions-filter-chip.active.avc {
    background-color: #16a34a; /*bg-green-600*/
    color: white;
}
.additional-contributions-filter-chip.active.service {
    background-color: #831843; /*bg-pink-900*/
    color: white;
}
.additional-contributions-filter-chip.active.other {
    background-color: #6b7280; /*bg-gray-500*/
    color: white;
}

/* Styling for Material design input boxes */
.input-container {
    position: relative;
    margin-top: 1rem;
}

.input-container input {
    border: 1px solid rgb(4, 24, 59);
    padding: .5rem 0.5rem 0.5rem 0.5rem;
    width: 100%;
    outline: none;
    border-radius: 0.5rem;
    height: 2.5rem;
    box-sizing: border-box;
    box-shadow: 0 0 0px 1000px white inset !important;

    /* Keeps the background white */
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

/* input:-webkit-autofill {
    transition: background-color 5000s ease-in-out 0s !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
} */

.input-container label {
    position: absolute;
    top: 1.25rem;
    left: 0.5rem;
    width: 95%;
    height: 1.8rem;
    transform: translateY(-50%);
    transition: all 0.2s linear;
    background-color: white;
    padding: .1rem 1rem;
    border-radius: .5rem;
    color: #60646b;
    pointer-events: none; 
}

.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label {
    top: 0;
    left: 0.5rem;
    height: fit-content;
    width: fit-content;
    transform: translateY(-80%);
    padding: 0 .5rem;
    border-radius: .5rem;
    border: 1px solid #0285c741;
    font-size: .8rem;
    color: #01405f; /* text-sky-500 */
}

.input-container.static-prefix label {
  position: static !important;
  transform: none    !important;
  background: none   !important;
  padding: 0         !important;
  width: auto        !important;
  height: auto       !important;
  margin-bottom: .25rem;
  pointer-events: auto !important;
}

.input-container.static-prefix .mobileinput {
  position: relative !important;
  padding-left: 3rem
}

.input-container.static-prefix .mobileinput::before {
  content: "+44";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #374151;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  z-index: 2;
}

.animate-ping-once {
    animation: ping-once 1.5s ease-in-out;
}

.animate-ping-twice {
    animation: ping-twice 1.5s ease-in-out;
}

.animate-pulse-once {
    animation: pulse-once 1.5s ease-in-out;
}

.animate-pulse-twice {
    animation: pulse-twice 1.5s ease-in-out;
}

.animate-border-glow-once {
    animation: borderGlow 2s ease-in-out ;
      animation-fill-mode: forwards;

}
.animate-ring-glow-once {
    animation: ringGlow 2s ease-in-out ;
      animation-fill-mode: forwards;

}

.notyf-icon-custom {
  color: white !important;
  background: transparent !important;
}

/* CIVIC Cookie Manager Plugin */
#ccc-content { background-color:  rgba(255, 255, 255) !important; border-radius: 0 12px 12px 0 !important; color: black !important; font-family: 'Outfit', sans-serif !important; }
#ccc-content h1, #ccc-content h2, #ccc-content h3, #ccc-content p , #ccc-content a { color: black !important; }
#ccc-close {
  border: 1px solid rgb(180,180,180) !important;
  border-radius: 25%;
  fill: rgb(180,180,180);
  transition: border-color 0.2s linear, box-shadow 0.2s linear, fill 0.2s linear !important;
  box-shadow: 0 0 0 0 rgba(7, 89, 133, 0);
  vertical-align: middle;
}
#ccc-close:hover {
  border-color: rgb(5, 54, 80) !important;
  box-shadow: 0 0 2px 0 rgb(6, 73, 109, 0.8) !important;
  fill: rgb(6, 73, 109) !important;
}
#ccc-button-holder {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#ccc-recommended-settings, #ccc-reject-settings {
    flex: 1 1 auto; 
    min-width: max-content;
    width: 45%;
    white-space: nowrap !important;
    padding: 0.5rem 2rem !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.1) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: all 0.5s !important;
}
#ccc-recommended-settings {
    border: 1px solid transparent !important;
    background-color: rgb(7, 89, 133) !important;
    color: white !important;
}
#ccc-reject-settings {
    border: 1px solid rgb(200,200,200) !important;
    background-color: transparent !important;
    color: rgb(7, 89, 133) !important;
}
#ccc-recommended-settings span {
    color: #fff !important;
    transition: all 0.5s !important;
}   
#ccc-recommended-settings:hover {
    background-color: #f9fafb !important; /* gray-50 */
    color: rgb(7, 89, 133) !important;
    border-color: rgb(7, 89, 133) !important;
    box-shadow: 0 0 0 1px rgb(7, 89, 133) !important;
}
#ccc-recommended-settings:hover span {
    color: rgb(7, 89, 133) !important;
    transition: all 0.5s !important;
}
#ccc-reject-settings span {
    color: rgb(100,100,100) !important;
    transition: all 0.5s !important;
}   
#ccc-reject-settings:hover {
    background-color: #fff !important;
    color: rgb(7, 89, 133) !important;
    border-color: rgb(7, 89, 133) !important;
    box-shadow: 0 0 0 1px #0ea5e9 !important;
}            
#ccc-reject-settings:hover span {
    color: rgb(7, 89, 133) !important;
    transition: all 0.5s !important;
}
#ccc-icon svg{
    fill: rgb(7, 89, 133) !important;
}
.checkbox-toggle--slider.checkbox-toggle--dark {background-color: rgb(7, 89, 133) !important; border-color: rgb(7, 89, 133) !important;}
.checkbox-toggle-toggle {background-color: white !important;}
.checkbox-toggle-on {background-color: transparent !important; color: rgb(255,255,255) !important;}
.checkbox-toggle-off {background-color: transparent !important; color: rgba(255, 255, 255, 0.671) !important;}
.checkbox-toggle-input {background-color: transparent !important;}
.checkbox-toggle-label {background: transparent !important; color: white !important;}
#ccc-info {opacity: 50%;}