/* ************************************* */
/* Variable Setup                        */
/* ************************************* */

:root {
    --zp-standard-border-radius: 4px;
    --zp-primary-colour: #007C82;
    --zp-primary-colour-darker: #00494D;
    --zp-page-load-spinner-colour-1: var(--zp-primary-colour);
    --zp-page-load-spinner-colour-2: #222831;
    --zp-page-load-spinner-colour-3: #00dee8;
    --zp-page-load-spinner-colour-4: #82B4BB;
    --zp-page-load-spinner-colour-5: #32E0C4;
    --rz-primary: var(--zp-primary-colour) !important;
}

/*****************************************/
/* Home Page Formatting                  */
/*****************************************/

.zp-contactus-app-landing-full-screen-container {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100dvw;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.zp-contactus-app-landing-warning-container {
    display: flex;
    flex-direction: column;
    height: 380px;
    width: 420px;
    background-color: white;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.zp-contactus-app-denial-of-service-title-text {
    font-weight: 900;
    font-size: 28px;
    color: var(--zp-primary-colour);
    margin-bottom: 48px;
}

.zp-contactus-app-denial-of-service-text {
    font-weight: 300;
    font-size: 16px;
    color: red;
    text-align: center;
    margin-bottom: 24px;
}

.zp-contactus-app-denial-of-service-email-text {
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 12px;
    color: black;
    text-align: center;
}

.zp-contactus-send-button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.zp-contactus-send-button {
    width: 210px;
    background-color: var(--zp-primary-colour) !important;
    color: white !important;
    margin-right: 12px !important;
}

.zp-contactus-send-button:hover {
    width: 210px;
    background-color: var(--zp-primary-colour-darker) !important;
    color: white !important;
    margin-right: 12px !important;
}

.zp-contactus-message-editor {
    margin-bottom: 12px;
    width: 100%;
    height: calc(100dvh - 18px - 18px - 650px);
}

.zp-contactus-spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100dvw;
    height: 100dvh;
}

.zp-contactus-main-container {
    display: flex;
    flex-direction: column;
    margin-top: 18px;
    margin-bottom: 18px;
    width: 80dvw;
    height: calc(100dvh - 18px - 18px);
    margin-left: 10dvw;
    border: 1px solid var(--zp-primary-colour);
    border-radius: var(--zp-standard-border-radius);
    padding: 18px;
}

.zp-contactus-input-field-container {
    width: 60%;
    margin-left: 20%;
    padding-top: 36px;
}

.zp-contactus-field-margin {
    padding-bottom: 18px !important;
}

.zp-contactus-app-title-bar {
    background-color: var(--zp-primary-colour);
    border-radius: var(--zp-standard-border-radius);
    height: 110px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zp-contactus-app-title {
    color: black;
    font-size: 48px;
    font-weight: 600;
    text-align: center;
    margin-top: 56px;
}

.zp-contactus-app-version-title-text {
    font-weight: 900;
    font-size: 28px;
    color: var(--zp-primary-colour);
    margin-bottom: 48px;
}

.zp-contactus-app-version-text {
    font-weight: 300;
    font-size: 48px;
    color: black;
    text-align: center;
    margin-bottom: 24px;
}

.zp-contactus-app-message-sent-container {
    display: flex;
    flex-direction: column;
    height: 470px;
    width: 420px;
    background-color: white;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.zp-contactus-app-message-sent-title-text {
    font-weight: 900;
    font-size: 28px;
    color: var(--zp-primary-colour);
    margin-bottom: 24px;
}

.zp-contactus-app-message-sent-text {
    font-weight: 300;
    font-size: 18px;
    color: black;
    text-align: center;
    margin-bottom: 8px;
}

.zp-contactus-app-message-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 24px;
}

.zp-contactus-app-message-button {
    width: 190px;
    background-color: var(--zp-primary-colour) !important;
    color: white !important;
}

.zp-contactus-app-message-button:hover {
    width: 190px;
    background-color: var(--zp-primary-colour-darker) !important;
    color: white !important;
}

/* ************************************* */
/* MudBlazor Global Overrides            */
/* ************************************* */

.mud-input-outlined-border { 
    border-radius: var(--zp-standard-border-radius) !important; 
} 
 
.mud-alter-outlined-error {
     border-radius: var(--zp-standard-border-radius);
 }
 
.mud-input > input.mud-input-root-outlined.mud-input-root:-webkit-autofill, div.mud-input-slot.mud-input-root-outlined.mud-input-root:-webkit-autofill { 
     border-radius: var(--zp-standard-border-radius) !important;
 }

/* ************************************* */
/* Page Loading Spinner                  */
/* ************************************* */

.spinner {
    margin: 100px auto;
    width: 70px;
    height: 40px;
    text-align: center;
    font-size: 10px;
    }
    .spinner > div {
        background-color: var(--zp-page-load-spinner-colour-1);
        height: 100%;
        width: 10px;
        display: inline-block;
        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
        animation: sk-stretchdelay 1.2s infinite ease-in-out;
        border-radius: 3px;
    }
    .spinner .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
        background-color: var(--zp-page-load-spinner-colour-2);
    }
    .spinner .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
        background-color: var(--zp-page-load-spinner-colour-3);
    }
    .spinner .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
        background-color: var(--zp-page-load-spinner-colour-4);
    }
    .spinner .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
        background-color: var(--zp-page-load-spinner-colour-5);
    }

   @-webkit-keyframes sk-stretchdelay {
       0%, 40%, 100% {
           -webkit-transform: scaleY(0.4)
       }
       20% {
           -webkit-transform: scaleY(1.0)
       }
   }

   @keyframes sk-stretchdelay {
       0%, 40%, 100% {
           transform: scaleY(0.2);
           -webkit-transform: scaleY(0.2);
       }
       20% {
           transform: scaleY(1.8);
           -webkit-transform: scaleY(1.8);
       }
   }