@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@300;400;700;900&display=swap');

/*--- COLORS ---*/
:root {
    --primary-white: #FFFFFF;
    --primary-purple-1: #ECEEF6;
    --primary-purple-2: #D2D6E8;
    --primary-purple-3: #BAC0DD;
    --primary-purple-4: #757CA1;
    --primary-purple-5: #495070;
    --primary-purple-6: #292D3E;
    --primary-purple-7: #1E2130;
    --primary-purple-8: #161823;
    --secondary-red-1: #FDD8DA;
    --secondary-red-2: #F9A9AE;
    --secondary-red-3: #F47B81;
    --secondary-red-4: #F04C55;
    --secondary-red-5: #DE333C;
    --secondary-red-6: #CB1922;
    --secondary-red-7: #B90009;
    --secondary-red-8: #970008;
    --secondary-green-1: #DEFAB5;
    --secondary-green-2: #C3EB89;
    --secondary-green-3: #A8DC5C;
    --secondary-green-4: #8DCD30;
    --secondary-green-5: #63B22D;
    --secondary-green-6: #389729;
    --secondary-green-7: #0E7C26;
    --secondary-green-8: #026618;
    --secondary-yellow-1: #FFEBB4;
    --secondary-yellow-2: #FFDA73;
    --secondary-yellow-3: #FFC931;
    --secondary-yellow-4: #FCAF27;
    --secondary-yellow-5: #F9951D;
    --secondary-yellow-6: #F77C14;
    --secondary-yellow-7: #F4620A;
    --secondary-yellow-8: #F14800;
    --secondary-blue-1: #D3F2FF;
    --secondary-blue-2: #9CE0FB;
    --secondary-blue-3: #66CDF8;
    --secondary-blue-4: #2FBBF4;
    --secondary-blue-5: #25A3DA;
    --secondary-blue-6: #1A8BBF;
    --secondary-blue-7: #1072A5;
    --secondary-blue-8: #055A8A;
    --tertiary-citron-1: #FCFFA7;
    --tertiary-citron-2: #EFF28A;
    --tertiary-citron-3: #E1E56C;
    --tertiary-citron-4: #D4D84F;
    --tertiary-citron-5: #C6CB31;
    --tertiary-citron-6: #ADB22B;
    --tertiary-citron-7: #949825;
    --tertiary-citron-8: #868A18;
    --tertiary-lavander-1: #FADAFF;
    --tertiary-lavander-2: #ECC0F4;
    --tertiary-lavander-3: #DFA5E8;
    --tertiary-lavander-4: #D18BDD;
    --tertiary-lavander-5: #C370D1;
    --tertiary-lavander-6: #AC63B8;
    --tertiary-lavander-7: #94559F;
    --tertiary-lavander-8: #8A4197;
    --tertiary-teal-1: #ABFBFF;
    --tertiary-teal-2: #80E9EF;
    --tertiary-teal-3: #56D7DF;
    --tertiary-teal-4: #2BC5CE;
    --tertiary-teal-5: #00B3BE;
    --tertiary-teal-6: #009CA5;
    --tertiary-teal-7★: #00848C;
    --tertiary-teal-8: #00747B;
    --tertiary-brown-1: #FFE6DC;
    --tertiary-brown-2: #EACBBF;
    --tertiary-brown-3: #D6B0A2;
    --tertiary-brown-4: #C19584;
    --tertiary-brown-5: #AC7A67;
    --tertiary-brown-6: #936857;
    --tertiary-brown-7: #795547;
    --tertiary-brown-8: #6B483A;
    --tertiary-pink-1: #FFC3EB;
    --tertiary-pink-2: #FBAAE0;
    --tertiary-pink-3: #F790D5;
    --tertiary-pink-4: #F277C9;
    --tertiary-pink-5: #EE5DBE;
    --tertiary-pink-6: #D64FAA;
    --tertiary-pink-7: #BD4195;
    --tertiary-pink-8: #AE3386;
    --charts-qualitative-group-1-red-5: #DE333C;
    --charts-qualitative-group-1-green-5: #63B22D;
    --charts-qualitative-group-1-blue-5: #25A3DA;
    --charts-qualitative-group-1-orange-1: #F9951D;
    --charts-qualitative-group-1-citron-5: #C6CB31;
    --charts-qualitative-group-1-lavander-5: #C370D1;
    --charts-qualitative-group-1-teal-5: #00B3BE;
    --charts-qualitative-group-1-brown-5: #AC7A67;
    --charts-qualitative-group-1-pink-5: #EE5DBE;
    --charts-qualitative-group-2-red-7: #B90009;
    --charts-qualitative-group-2-green-3: #A8DC5C;
    --charts-qualitative-group-2-blue-7: #1072A5;
    --charts-qualitative-group-2-yellow-3: #FFC931;
    --charts-qualitative-group-2-citron-7: #949825;
    --charts-qualitative-group-2-lavander-3: #DFA5E8;
    --charts-qualitative-group-2-teal-7: #00848C;
    --charts-qualitative-group-2-brown-3: #D6B0A2;
    --charts-qualitative-group-2-pink-7: #BD4195;
    --charts-qualitative-group-3-red-3: #F47B81;
    --charts-qualitative-group-3-green-7: #0E7C26;
    --charts-qualitative-group-3-blue-3: #66CDF8;
    --charts-qualitative-group-3-orange-3: #F4620A;
    --charts-qualitative-group-3-citron-3: #E1E56C;
    --charts-qualitative-group-3-lavander-7: #94559F;
    --charts-qualitative-group-3-teal-3: #56D7DF;
    --charts-qualitative-group-3-brown-7: #795547;
    --charts-qualitative-group-3-pink-3: #F790D5;
    --charts-semantic-green-7: #0E7C26;
    --charts-semantic-green-6: #389729;
    --charts-semantic-green-5: #63B22D;
    --charts-semantic-citron-2: #ADB22B;
    --charts-semantic-yellow-3: #FFC931;
    --charts-semantic-orange-3: #F77C14;
    --charts-semantic-orange-4: #F4620A;
    --charts-semantic-red-5: #DE333C;
    --charts-semantic-red-7: #B90009;
}

body.status {
    font-family: "Lato", sans-serif;
    color: var(--primary-purple-6);
}

.color-primary {
    color: var(--primary-purple-6);
}

.color-secondary,
small,
.small {
    color: rgba(41,45,62,.5);
}

/*--- SUBSCRIBE TO UPDATES ---*/
.flat-button,
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
    background-color: var(--primary-purple-6);
    text-transform: capitalize;
    letter-spacing: normal;
    font-size: 1rem;
    border-radius: 3px;
    padding: 1rem 2rem;
}

.flat-button:hover,
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown:hover {
    background-color: var(--primary-purple-8);
}

.layout-content.status .masthead-container.basic .masthead,
.layout-content.status .masthead-container.premium .masthead .text-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.layout-content.status .masthead-container.basic .masthead .clearfix {
    display: none;
}
      
/*--- ALL SYSTEMS OPERATIONAL ---*/
.layout-content.status.status-index .page-status.status-none {
    background-color: var(--secondary-green-2);
    border: 1px solid var(--secondary-green-4);
    border-bottom-width: 2px;
    color: var(--primary-purple-6);
}
     
.updates-dropdown-sections-container .privacy_policy_information, .terms_and_privacy_information {
    line-height: 24px !important;
}                      
                          
.layout-content.status.status-index .page-status .status {
    color: var(--primary-purple-6);    
}
                  
.layout-content.status.status-index .components-section .component-container .name,
.name > span {
    font-weight: bold;
}

.name > span.fa.fa-plus-square-o {
    font-weight: normal;
    color: var(--primary-purple-6);
}

.components-container .component-inner-container.status-green .component-status {
    color: var(--secondary-green-6);
}

.layout-content.status.status-index .components-section .components-container {
    border-radius: none !important;
    -webkit-border-radius: none !important;
    border-top: 1px solid var(--primary-purple-2);
}
                      
.layout-content.status.status-index .components-section .components-container.one-column .component-container {
    border: none;
    border-radius: none !important;
    -webkit-border-radius: none !important; 
    border-bottom: 1px solid var(--primary-purple-2);
}

.layout-content.status.status-index .components-section .components-container.one-column .component-container:last-child {
    border: none !important;
}

.layout-content.status.status-index .components-section {
    border-bottom: 1px solid var(--primary-purple-2);
    border-radius: 0;
}

.tooltip-base {
    border: 1px solid var(--primary-purple-3);
    color: var(--primary-purple-3);
}

.tooltip-base:hover {
    border: 1px solid var(--primary-purple-6);
    color: var(--primary-purple-6);
}

.font-largest {
    text-transform: uppercase;
}

.layout-content.status .incidents-list.format-expanded .status-day .date {
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--primary-purple-2);
    margin-bottom: .5rem;
}
                                                                      
nav {
    display: flex;
    width: 90%;
    max-width: 850px;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto 0 auto;
    gap: 1rem;
}

nav ul {
    display: flex;
    flex-direction: row;
    gap: .5rem;
}

@media screen and (max-width: 960px) {
    nav {
        flex-direction: column;
        width: 90%;
    }

    nav ul {
        flex-direction: column;
    }

    nav ul,
    nav ul li,
    nav ul li a {
        width: 100%;
    }
    
    nav ul li a {
        display: flex;
					        justify-content: center;
    }

    .updates-dropdown-container,
    #show-updates-dropdown {
        width: 100%;
    }
}

nav ul li a {
    padding: .5rem 1rem;
    border: 1px solid var(--primary-purple-3);
    border-radius: 3px;
    color: var(--primary-purple-6);
}

nav ul li a:hover {
    border: 1px solid var(--primary-purple-6);
    color: var(--primary-purple-6);
}

#show-updates-dropdown {
    background-color: var(--primary-purple-6);
    color: white;
}

#show-updates-dropdown {
    background-color: var(--primary-purple-8);
}

/*--- IMPACT ---*/

/* Shared */
.unresolved-incident {
    border-radius: 3px;
}
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-shadow: none;
}
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title a {
    color: var(--primary-purple-8);
}
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title a:hover {
    color: var(--primary-purple-8);
    font-weight: bold;
}

/* None */
.unresolved-incident.impact-none {
    border: 1px solid var(--primary-purple-2);
    border-bottom-width: 2px;
}
.layout-content.status.status-index .unresolved-incidents .unresolved-incident.impact-none .incident-title {
    background-color: var(--primary-purple-2);
    border: none;
}
.layout-content.status.status-index .unresolved-incidents .unresolved-incident.impact-none .updates {
    background-color: var(--primary-purple-1);
    border: none;
}

/* Minor */
.unresolved-incident.impact-minor {
    border: 1px solid var(--secondary-yellow-2);
    border-bottom-width: 2px;
}
.layout-content.status.status-index .unresolved-incident.impact-minor .incident-title {
    background-color: var(--secondary-yellow-2);
    border: none;
}
.layout-content.status.status-index .unresolved-incident.impact-minor .updates {
    background-color: var(--secondary-yellow-1);
    border: none;
}

/* Major */
.unresolved-incident.impact-major {
    border: 1px solid var(--secondary-yellow-5);
    border-bottom-width: 2px;
}
.layout-content.status.status-index .unresolved-incident.impact-major .incident-title {
    background-color: var(--secondary-yellow-5);
    border: none;
}
.layout-content.status.status-index .unresolved-incident.impact-major .updates {
    background-color: var(--secondary-yellow-3);
    border: none;
}

/* Critical */
.unresolved-incident.impact-critical {
    border: 1px solid var(--secondary-red-3);
    border-bottom-width: 2px;
}
.layout-content.status.status-index .unresolved-incident.impact-critical .incident-title {
    background-color: var(--secondary-red-3);
    border: none;
}
.layout-content.status.status-index .unresolved-incident.impact-critical .updates {
    background-color: var(--secondary-red-2);
    border: none;
}
    

/* CSS for the pop-up/modal window */
#gdpr-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-purple-1);
  z-index: 9999; /* Ensures the pop-up appears above everything else */
}

.gdpr-modal-first-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80%;
  max-width: 800px;
  background-color: white;
  padding: 20px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
 border-top: 1px solid var(--primary-purple-6);
 border-right: 1px solid var(--primary-purple-6);
 border-bottom: 2px solid var(--primary-purple-6);
 border-left: 1px solid var(--primary-purple-6);    }

.gdpr-modal-second-container {
  margin-bottom: 20px;
}

.gdpr-modal-first-container p {
  margin-bottom: 20px;
}

.gdpr-modal-first-container a {
  text-decoration: none; 
}

.gdpr-modal-first-container a:hover {
  text-decoration: underline;
}
.gdpr-btn-container{
  width:100%;
  display:flex;
  align-items: flex-end;
  justify-content: end;
}
  .gdpr-btn-confirm  button {
   border-radius: 3px;
  cursor: pointer;                                     color: var(--primary-white);
  background-color: var(--primary-purple-6);           border: 1px solid var(--primary-purple-6);           margin-right:1rem;                                   padding: .5rem 2rem;                                  text-align:center;                                    text-transform: capitalize;
  letter-spacing: normal;
  font-size: 1rem;                                    }
  .gdpr-btn-reject  button {
   border-radius: 3px;
  cursor: pointer;                                     color: var(--primary-purple-6);
  background-color: transparent;                 border: 1px solid var(--primary-purple-3);           padding: .5rem 2rem;                                  text-align:center;                                   text-transform: capitalize;
  letter-spacing: normal;
  font-size: 1rem;                                    }     
   .gdpr-btn-confirm  button:hover {                  color: var(--primary-white);
  background-color: var(--primary-purple-8);           border: 1px solid var(--primary-purple-8);                                                                }
  .gdpr-btn-reject  button:hover {                      color: var(--primary-purple-6);
  background-color: transparent;                 border: 1px solid var(--primary-purple-6);           padding: .5rem 2rem;                                 }   
    .gdpr-btn-confirm  button:active {                color: var(--primary-purple-6);
  background-color: var(--primary-purple-2);           border: 1px solid var(--primary-purple-3);                                                                }
  .gdpr-btn-reject  button:active {                      color: var(--primary-purple-6);
  background-color: var(primary-purple-2);              border: 1px solid var(--primary-purple-3);           padding: .5rem 2rem;                                 }

   @media only screen and (max-width: 960px) {
.gdpr-btn-container{
display:flex;
align-items: center;
justify-content: center;
}
.layout-content.status.status-index .page-status {
   display:flex;
justify-content:center;
}
}