/**********************************************************************/
/***                          Basic Setup                           ***/
/**********************************-***********************************/


:root {
    /***   Website Theme   ***/
    --almost__white: #feffff; /***   Dark Slate Gray 0   ***/
    --phthalo__green: #7db7b6; /***   Pthalo Green 4   ***/
    --dark__cyan: #20434c; /***   Dark Cyan 8   ***/
    --dark__slate__gray: rgb(17, 45, 50); /***   Dark Slate Gray 9   ***/
    --medium__brown: #585349; /***   Mediium Brown 7   ***/
    --alameda__gray: #776f60; /***   Alameda Gray 6   ***/
    --almost__black: #040b0c; /***   Dark Slate Gray 10   ***/

    /***   Phtalo Green   ***/
    --phthalo__green__0: #f5fafa;
    --phthalo__green__1: #dfeeed;
    --phthalo__green__2: #bfdbdb;
    --phthalo__green__3: #9ec9c8;
    --phthalo__green__4: #7db7b6;
    --phthalo__green__5: #5ca5a3;
    --phthalo__green__6: #498583;
    --phthalo__green__7: #376463;
    --phthalo__green__8: #254342;
    --phthalo__green__9: #132222;
    --phthalo__green__10: #010101;

    /***   Dark Cyan   ***/
    --dark__cyan__0: #f7fbfc;
    --dark__cyan__1: #dfeef2;
    --dark__cyan__2: #bbdbe3;
    --dark__cyan__3: #98c8d3;
    --dark__cyan__4: #74b5c4;
    --dark__cyan__5: #50a1b5;
    --dark__cyan__6: #3e8394;
    --dark__cyan__7: #2f6370;
    --dark__cyan__8: #20434c;
    --dark__cyan__9: #112428;
    --dark__cyan__10: #020404;

    /***   Dark Slate Gray   ***/
    --dark__slate__gray__0: #feffff;
    --dark__slate__gray__1: #e5f4f6;
    --dark__slate__gray__2: #bfe3e9;
    --dark__slate__gray__3: #99d2dc;
    --dark__slate__gray__4: #73c1cf;
    --dark__slate__gray__5: #4db1c2;
    --dark__slate__gray__6: #3894a4;
    --dark__slate__gray__7: #2b727e;
    --dark__slate__gray__8: #1e4f58;
    --dark__slate__gray__9: #112d32;
    --dark__slate__gray__10: rgb(4, 11, 12);

    /***   Medium Brown   ***/
    --medium__brown__0: #fbfbfa;
    --medium__brown__1: #eceae7;
    --medium__brown__2: #d5d1cb;
    --medium__brown__3: #beb9af;
    --medium__brown__4: #a7a093;
    --medium__brown__5: #908777;
    --medium__brown__6: #746d60;
    --medium__brown__7: #585349;
    --medium__brown__8: #3c3932;
    --medium__brown__9: #201e1b;
    --medium__brown__10: #040404;

    /***   Alameda Gray   ***/
    --alameda__gray__0: #fcfcfc;
    --alameda__gray__1: #edece9;
    --alameda__gray__2: #d7d3cc;
    --alameda__gray__3: #c0bab0;
    --alameda__gray__4: #a9a194;
    --alameda__gray__5: #938977;
    --alameda__gray__6: #776f60;
    --alameda__gray__7: #5b5449;
    --alameda__gray__8: #3f3a32;
    --alameda__gray__9: #22201c;
    --alameda__gray__10: #060605;

    /***   Backgrounds   ***/
    --toast__background: rgba(20, 33, 33, 0.95);

    /***   Overlay Colors   ***/
    --25__overlay: rgba(4, 11, 12,0.25); /***   Based on Dark Slate Gray 10   ***/
    --15__alameda__overlay: rgba(6, 6, 5, 0.15); /***   Based on Alameda Gray 10   ***/
    --60__overlay: rgba(4, 11, 12, 0.60); /***   Based on Dark Slate Gray 10   ***/
    --80__overlay: rgba(4, 11, 12, 0.85); /***   Based on Dark Slate Gray 10   ***/
    --parallax__overlay: rgba(4, 11, 12, 0.60); /***   Based on Dark Slate Gray 10   ***/
    --gray__overlay: rgba(4, 11, 12, 0.8); /***   Based on Dark Slate Gray 10   ***/
    --dark__cyan__overlay: rgba(32, 67, 76, 0.95); /***   Based on Dark Cyan 8   ***/
    --brown__waves: rgba(88, 83, 73, 0.65); /***   Medium Brown 7   ***/
}

html {
    font-size: 62.5% !important;
    scroll-behavior: smooth !important;
}

body {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    color: var(--dark__slate__gray__9);
    background: var(--almost__white) !important;
    padding: 0rem !important;
    margin: 0rem !important;
}

.row {
    width: 100% !important;
    margin: 0rem;
}


/**********************************************************************/
/***                      Reusable Components                       ***/
/**********************************-***********************************/


.disabled {
    display: none !important;
}

.no-decoration {
    text-decoration: none !important;
}

.no-list-style {
    list-style: none !important;
}

.transparent {
    background: transparent !important;
}

.bold {
    font-weight: 900 !important;
}

.uppercase {
    text-transform: uppercase !important;
}

.white {
    color: var(--almost__white);
}

figcaption,
figure {
    padding-left: 2.2rem !important;
}

.waves-effect.waves-brown .waves-ripple {
     background-color: var(--brown__waves);
}

/* Input field bottom border color */
.input-field input:not([type]), 
.input-field input[type=text]:not(.browser-default), 
.input-field input[type=password]:not(.browser-default), 
.input-field input[type=email]:not(.browser-default), 
.input-field input[type=url]:not(.browser-default), 
.input-field input[type=time]:not(.browser-default), 
.input-field input[type=date]:not(.browser-default), 
.input-field input[type=datetime]:not(.browser-default), 
.input-field input[type=datetime-local]:not(.browser-default), 
.input-field input[type=tel]:not(.browser-default), 
.input-field input[type=number]:not(.browser-default), 
.input-field input[type=search]:not(.browser-default), 
textarea.materialize-textarea {
    border-bottom: 1px solid var(--dark__slate__gray) !important;
}

/* label color */
.input-field label {
    color: var(--dark__slate__gray__9) !important;
}

/* label focus color */
.input-field input[type=text]:focus + label,
.input-field input[type=tel]:focus + label,
.input-field input[type=email]:focus + label,
.input-field .materialize-textarea:focus + label {
    color: var(--phthalo__green__4) !important;
}

/* label underline focus color */
.input-field input[type=text]:focus,
.input-field input[type=tel]:focus,
.input-field input[type=email]:focus,
.materialize-textarea:focus {
    border-bottom: 2px solid var(--phthalo__green__4) !important;
    box-shadow: 0 1px 0 0 var(--dark__slate__gray__9) !important;
}

/* valid color */
.input-field input[type=text].valid {
    border-bottom: 1px solid var(--dark__slate__gray__9) !important;
    box-shadow: 0 1px 0 0 var(--dark__slate__gray__9) !important;
}

/* invalid color */
.input-field input[type=email].invalid {
    border-bottom: 2px solid #c62828 !important;
    box-shadow: 0 1px 0 0 #c62828 !important;
}

.input-field input[type=email].invalid ~ .helper-text:after {
    color: #c62828 !important;
}

/* icon prefix focus color */
.input-field .prefix.active {
    color: var(--phthalo__green__4) !important;
}


/**********************************************************************/
/***                   Toast Reusable Components                    ***/
/**********************************-***********************************/


.toast-wrapper {
    position: fixed;
    font-family: 'Montserrat', sans-serif;
    background: var(--toast__background) !important;
    width: 100%;
    height: auto;
    bottom: 0rem;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(2, max-content);
    grid-template-areas:
        "tst-bnr"
        "tst-msg";
    border-radius: 1rem;
    place-self: center center;
    z-index: 9000;
}

.toast-banner {
    grid-area: tst-bnr;
    width: 100%;
    display: grid;
    grid-template-columns: max-content auto 10%;
    grid-template-rows: max-content;
    grid-template-areas:
        "tst-icn tst-hdr tst-cls";
}

.toast-icon {
    grid-area: tst-icn;
    font-size: 3.5rem;
    font-weight: 600;
    place-self: center center;
    margin: 0.8rem 0.8rem 0.8rem 1rem;
}

.toast-heading {
    grid-area: tst-hdr;
    font-size: 1.4rem;
    font-weight: 600;
    place-self: center start;
    margin-left: 0.8rem;
}

.toast-close {
    grid-area: tst-cls;
    background: transparent;
    cursor: pointer;
    border: transparent;
    place-self: center center;
    padding: 0rem 0.8rem;
}

.toast-close span {
    font-size: 3rem;
    font-weight: 600;
}

.toast-message {
    grid-area: tst-msg;
    height: auto;
    word-wrap: normal;
    white-space: normal;
    place-self: center start;
    margin-left: 0.5rem;
}

.toast-message p {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--phthalo__green__0);
    margin: 1.2rem;
}

.toast-phthalo-green {
    color: var(--phthalo__green__4) !important;
}

.toast-green {
    color: green !important;
}

.toast-yellow {
    color: yellow !important;
}

.toast-red {
    color: red !important;
}


/**********************************************************************/
/***                            Top Bar                             ***/
/**********************************-***********************************/


.topbar-container {
    background-color: var(--gray__overlay);
    position: relative;
    padding: 0rem !important;
}

.topbar-row {
    padding: 0.2rem 2.9rem;
    margin: 0rem;
}

.topbar-section {
    padding: 0rem !important;
}

.topbar-list {
    display: flex;
    justify-content: center;
    margin: 0rem;
}

.topbar-list-item {
    display: inline;
    margin-left: 1.3rem;
}

.topbar-list-item:first-child {
    margin-left: 0rem;
}

.topbar-list-link {
    color: var(--phthalo__green__4);
    transition: all 0.25s linear;
}

.topbar-list-link:hover {
    color: var(--phthalo__green__0);
    transition: all 0.25s linear;
}

.social-icon {
    font-size: 1.8rem;
    transition: all 0.25s linear;
}

.icon-phone:hover,
.icon-email:hover {
    color: var(--phthalo__green__0);
    transition: all 0.25s linear;
}

.contact-icon {
    font-size: 1.7rem;
    transition: all 0.25s linear;
}

.contact-icon span {
    font-size: 1.3rem;
    margin-left: 0.4rem;
}


/**********************************************************************/
/***                             Navbar                             ***/
/**********************************-***********************************/


nav {
    color: var(--phthalo__green__4);
    height: 6.4rem;
    position: sticky;
    box-shadow: none;
    transition: all 0.25s linear;
    z-index: 300;
}

nav.nav-extended,
nav.nav-extended .nav-wrapper {
    background: linear-gradient(to right, rgba(245,250,250,0.8), rgba(245,250,250,0), rgba(245,250,250,0));
    height: 6.4rem;
    transition: all 0.25s linear;
}

nav,
nav .nav-wrapper i,
nav a.sidenav-trigger,
nav a.sidenav-trigger i {
    line-height: 6.4rem;
    transition: all 0.25s linear;
}

nav .brand-logo {
    display: flex;
    height: 6.4rem;
    left: 0rem !important;
    padding: auto 0rem;
    align-items: center;
    margin-left: 2.9rem;
    transition: all 0.25s linear;
}

nav .brand-logo .brand-image {
    width: auto;
    height: 5rem;
    transition: all 0.25s linear;
}

nav ul {
    margin-right: 2.9rem;
    transition: all 0.25s linear;
}

nav ul li {
    padding: 0rem;
}

nav ul li:nth-child(6) a {
    padding-right: 0rem;
}

nav ul li a {
    font-size: 1.4rem !important;
    font-weight: 600;
    color: var(--phthalo__green__4);
    padding: 0rem 0.75rem;
    transition: all 0.25s linear;
}

nav ul a:hover,
nav ul button:hover,
nav ul a:active,
nav ul button:active {
    color: var(--phthalo__green__0) !important;
    background-color: transparent;
    box-shadow: none !important;
    transition: all 0.25s linear;
}

.dropdown-content {
    background-color: var(--dark__cyan__overlay) !important;
    color: var(--phthalo__green__4) !important;
    width: auto !important;
    border-radius: 0.6rem;
}

.dropdown-content li {
    line-height: 1.1rem !important;
}

.dropdown-content li a {
    color: var(--phthalo__green__4);
    font-size: 1.3rem !important;
    padding: 1.5rem 1.5rem 0rem 1.5rem !important;
    text-align: left;
    height: 5.5rem;
}

.dropdown-content li:hover,
.dropdown-content li:focus {
    background: var(--gray__overlay) !important;
}

.sidenav {
    background: var(--dark__cyan__overlay);
}

.user-view {
    background: linear-gradient(rgba(245,250,250,0.85), rgba(7,12,12,0.95)) !important;
    height: 20rem;
    padding: 0rem 0rem 2.4rem 0rem !important;
}

.sidenav-logo {
    width: 100%;
    padding: 2.4rem 3.15rem 0.75rem 3rem !important;
}

.sidenav .user-view .name {
    color: var(--phthalo__green__0) !important;
    font-size: 1.8rem !important;
    line-height: 1.6rem !important;
    padding: 0rem 2.4rem;
}

.background img {
    width: 30rem;
    height: auto;
}

.sidenav .sidenav-image {
    width: auto;
    height: 13rem;
    margin: 1.2rem 0rem;
    transition: all 0.25s linear;
}

.sidenav li > a,
.sidenav li > button {
    font-size: 1.3rem !important;
    color: var(--phthalo__green__4) !important;
    background: transparent !important;
    height: 3.6rem !important;
}

.sidenav li > a:hover,
.sidenav li > a:active {
    color: var(--phthalo__green__0) !important;
}

.sidenav .sidenav-about-dropdown-list li > a {
    padding-left: 4.8rem;
}

.sidenav .sidenav-services-dropdown-list li > a {
    padding-left: 4.8rem;
}

.sidenav .sidenav-clients-dropdown-list li > a,
.sidenav .sidenav-clients-dropdown-list li > button {
    padding-left: 4.8rem !important;
}

.sidenav .sidenav-clients-dropdown-list .input-field {
    margin-top: 0rem;
    margin-bottom: 0rem;
}

.sidenav .sidenav-clients-dropdown-list .signout-submit,
.sidenav .sidenav-clients-dropdown-list .signout-button {
    font-weight: 500;
    height: 3.6rem;
    padding: 0rem 4.8rem;
}

.sidenav-trigger ion-icon {
    font-size: 3.9rem;
    color: var(--phthalo__green__4);
}

.sidenav-trigger ion-icon:hover,
.sidenav-trigger ion-icon:active {
    color: var(--phthalo__green__0) !important;
    transition: all 0.25s linear;
}

.signout-submit {
    padding: 0rem !important;
}

.signout-submit .btn-large {
    line-height: 0rem !important;
}

.signout-button {
    color: var(--phthalo__green__4) !important;
    background: transparent !important;
    border: none;
    font-size: 1.3rem !important;
    font-weight: 600;
    text-align: left;
    box-shadow: none;
    width: 100%;
    height: 5.5rem;
    padding: 1.5rem 1.5rem 1.7rem 1.5rem;
}


/**********************************************************************/
/***                             Login                             ***/
/**********************************-***********************************/


.login-header {
    background-image: linear-gradient(var(--80__overlay), var(--80__overlay)), url('../media/Login_09042023_1312.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh !important;
    background-attachment: fixed;
    top: 0rem;
    left: 0rem;
}

header.container-fluid.login-header .row,
div.container.login-hero,
div.col.s12.m6.l4.offset-m3.offset-l4.valign-wrapper {
    color: var(--almost__white) !important;
    height: 100%;
}

form.login {
    width: 100%;
}

.login-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
        "title title"
        "username username"
        "password password"
        "remember remember"
        "action action";
    background-color: var(--dark__cyan__overlay) !important;
    border-radius: 0.9rem;
    padding: 1.6rem;
}

.login-title {
    grid-area: title;
    font-size: 2.3rem;
    font-weight: 400;
    margin-bottom: 1.2rem;
}

.card-login-row {
    margin: 0.5rem 0rem !important;
}

.card-login-row .input-field input[type=text]:not(.browser-default),
.card-login-row .input-field input[type=password]:not(.browser-default), 
.card-login-row .input-field input[type=email]:not(.browser-default) {
    color: var(--almost__white) !important;
    border-bottom: 1px solid var(--almost__white) !important;
}

.card-login-row .input-field input[type="checkbox"]:not(:checked),
.card-login-row .input-field input[type="checkbox"]:checked {
    color: var(--almost__white) !important;
}

.card-login-row .input-field input[type=text]:not(.browser-default)::placeholder,
.card-login-row .input-field input[type=password]:not(.browser-default)::placeholder {
    color: rgba(245, 250, 250, 0.5);
}

.card-login-row .input-field label {
    color: var(--almost__white) !important;
    font-size: 1.3rem !important;
}

.login-user {
    grid-area: username;
    height: auto !important;
}

.login-password {
    grid-area: password;
    height: auto !important;
}

.login-remember {
    grid-area: remember;
    height: 4rem !important;
}

.login-remember .switch {
    margin-left: -1.45rem !important;
}

.login-remember .switch label {
    color: var(--almost__white);
    font-size: 1.2rem;
}

.login-remember .switch label input[type=checkbox]:checked+.lever {
    background-color: rgba(245, 250, 250, 0.5);
}
  
.login-remember .switch label input[type=checkbox]:checked+.lever:after {
    background-color: var(--almost__white);
}

.action-items {
    grid-area: action;
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: 1fr;
    grid-template-areas:
        "submit forgot";
    place-content: center center;
    margin: 0rem !important;
}

.login-submit {
    grid-area: submit;
    margin-top: 0rem;
}

.login-submit,
.login-forgot {
    width: auto !important;
}

.login-submit button {
    color: var(--almost__white) !important;
    background: rgba(245, 250, 250, 0.3);
    border-radius: 2.7rem !important;
    box-shadow: 0rem 0.2rem 0.7rem rgba(37, 78, 88, 0.4);
    margin: 0rem !important;
    transition: all 0.25s linear;
}

.login-submit button:hover {
    font-weight: 600;
    background: rgba(245, 250, 250, 0.4);
    transition: all 0.25s linear;
}

.login-submit ion-icon {
    font-size: 2rem;
    transform: translateY(25%);
    transition: all 0.25s linear;
}

.login-forgot {
    grid-area: forgot;
    height: 100% !important;
    justify-self: center;
}

.login-forgot .secondaryAction {
    margin: 0rem !important;
}

.login-forgot a {
    color: rgba(245, 250, 250, 0.5) !important;
    font-size: 1.2rem !important;
}

.login-forgot a:hover {
    color: var(--almost__white) !important;
}


/**************************************************************************/
/***                         Reset Password                             ***/
/**********************************-***************************************/


.reset-header {
    background-image: linear-gradient(var(--80__overlay), var(--80__overlay)), url('../media/Login_09042023_1312.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh !important;
    background-attachment: fixed;
    top: 0rem;
    left: 0rem;
}

header.container-fluid.reset-header .row,
div.container.reset-hero,
div.col.s12.m6.l4.offset-m3.offset-l4.valign-wrapper {
    color: var(--almost__white) !important;
    height: 100%;
}

form .email {
    width: 100%;
}

.reset-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, auto);
    grid-template-areas:
        "title title"
        "warning warning"
        "instruct instruct"
        "email email"
        "action action"
        "contact contact";
    background-color: var(--dark__cyan__overlay) !important;
    border-radius: 0.9rem;
    padding: 1.6rem;
}

.reset-title {
    grid-area: title;
    font-size: 2.3rem;
    font-weight: 400;
    margin-bottom: 1.2rem;
}

.reset-warning,
.reset-instructions,
.reset-contact {
    font-size: 1.3rem;
    padding: 0rem 0.75rem;
}

.reset-warning {
    grid-area: warning;
}

.reset-instructions {
    grid-area: instruct;
    margin: 1.4rem 0rem;
}

.reset-email {
    grid-area: email;
    height: auto;
    margin: 1rem 0rem !important;
    place-content: center center;
}

.reset-email .input-field input[type=text]:not(.browser-default),
.reset-email .input-field input[type=password]:not(.browser-default), 
.reset-email .input-field input[type=email]:not(.browser-default) {
    color: var(--almost__white) !important;
    border-bottom: 1px solid var(--almost__white) !important;
}

.reset-email .input-field input[type="checkbox"]:not(:checked),
.reset-email .input-field input[type="checkbox"]:checked {
    color: var(--almost__white) !important;
}

.reset-email .input-field input[type=text]:not(.browser-default)::placeholder,
.reset-email .input-field input[type=password]:not(.browser-default)::placeholder {
    color: rgba(245, 250, 250, 0.5);
}

.reset-email .input-field label {
    color: var(--almost__white) !important;
    font-size: 1.3rem !important;
}

.reset-actions {
    grid-area: action;
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: 1fr;
    grid-template-areas:
        "reset cancel";
    place-content: center center;
    margin: 0rem !important;
}

.reset-submit {
    grid-area: reset;
    margin-top: 0rem;
}

.reset-submit,
.reset-cancel {
    width: auto !important;
}

.reset-submit button {
    color: var(--almost__white) !important;
    background: rgba(245, 250, 250, 0.3);
    border-radius: 2.7rem !important;
    box-shadow: 0rem 0.2rem 0.7rem rgba(37, 78, 88, 0.4);
    margin: 0rem !important;
    transition: all 0.25s linear;
}

.reset-submit button:hover {
    font-weight: 600;
    background: rgba(245, 250, 250, 0.4);
    transition: all 0.25s linear;
}

.reset-submit ion-icon {
    font-size: 2rem;
    transform: translateY(25%);
    transition: all 0.25s linear;
}

.reset-cancel {
    grid-area: cancel;
    height: 100% !important;
    justify-self: center;
}

.reset-cancel a {
    color: rgba(245, 250, 250, 0.5) !important;
    font-size: 1.2rem !important;
}

.reset-cancel a:hover {
    color: var(--almost__white) !important;
}

.reset-contact {
    grid-area: contact;
    margin: 1.4rem 0rem 0rem;
}


/**********************************************************************/
/***                             Footer                             ***/
/**********************************-***********************************/


footer,
.page-footer .footer-copyright {
    background-color: var(--alameda__gray__6) !important;
    color: var(--phthalo__green) !important;
}

.footer-menu ul li {
    margin: 0.5rem 0rem;
}

.about-dropdown-list,
.services-dropdown-list,
.clients-dropdown-list {
    margin-left: 2rem;
}

.estimating-dropdown-list,
.comercial-dropdown-list {
    margin-left: 4rem;
}

.footer-menu-list li a,
.footer-policies-list li a,
.footer-contact p,
.contact-telephone a,
.contact-email a {
    font-size: 1.2rem !important;
    color: var(--phthalo__green) !important;
}

.footer-menu-list li a:hover,
.footer-icon:hover,
.footer-policies-list li a:hover,
.contact-telephone a:hover,
.contact-email a:hover,
.footer-menu-list li a:active,
.footer-icon:active,
.footer-policies-list li a:active,
.contact-telephone a:active,
.contact-email a:active {
    color: var(--almost__white) !important;
}

.footer-social > .row {
    margin-left: 0rem;
}

.footer-social-list li {
    display: inline;
}

.footer-icon {
    font-size: 2.2rem;
    color: var(--phthalo__green);
}

.footer-contact p {
    margin: 0.2rem 0rem 0rem;
}

.contact-name {
    margin: 1.1rem 0rem 0rem !important;
}

.contact-postcode {
    margin: 0.2rem 0rem 0.8rem 0rem !important;
}

.contact-email {
    margin: 0.5rem 0rem 1rem 0rem !important;
}

.contact-telephone a span,
.contact-email a span {
    margin-left: 0.4rem;
}

.footer-policies ul li {
    margin: 0.5rem 0rem;
}

.footer-copyright p {
    font-size: 1.2rem;
}


/**********************************************************************/
/***                         Media Queries                          ***/
/**********************************-***********************************/


/****  screen and (min-width: 768px)  ****/

@media screen and (min-width: 768px) {

    /***************************************/
    /****   Toast Reusable Components   ****/
    /***************************************/


    .toast-wrapper {
        width: 40rem;
        bottom: calc(0vh + 3vh);
        left: calc(100vw - 45rem);
    }

}

/****  screen and (min-width: 768px)  ****/