/* Generic Site wide styles */


html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.papl-button-primary {
    width: auto;
    text-align: center;
    padding: 10px;
    min-height: 40px;
    background-color: #FFF;
    color: #004F71;
    border-color: #004F71;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Archia', sans-serif;
    font-weight: 500;
    transition: background-color 0.3s;
    font-size: 14px;
}

.papl-button-primary:hover {
    border-color: #004F71;
    color: #FFF;
    /* New button color on hover */
    background-color: #004F71;
}

.papl-button-primary:hover .fa-circle-plus {
    /* Define the styles for the icon when button is hovered over */
    /* For example, you can change color or size */
    color: #FFF !important;
}

.papl-button-primary:hover .fa-circle-xmark {
    /* Define the styles for the icon when button is hovered over */
    /* For example, you can change color or size */
    color: #FFF !important;
}

.papl-button-primary .fa-circle-plus {
    margin-left: 5px;
}

.papl-button-primary .fa-circle-xmark {
    margin-left: 5px;
}

.papl-button-primary:hover .fa-circle-right {
    /* Define the styles for the icon when button is hovered over */
    /* For example, you can change color or size */
    color: #FFF !important;
}

.papl-button-primary .fa-circle-right {
    margin-left: 8px;
}

/*Styles for Home Navigation Headers, Pressed and Unpressed*/
.nav-header-rectangle {

    width: 200px;
    height: 60px;
    background-color: rgba(211, 211, 211, 0.5);
    font-style: normal !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    transition-duration: 0.3s, 0.3s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
    transition-property: background-color,

}

.nav-header-rectangle-pressed {

    width: 200px;
    height: 60px;
    background-color: rgba(209, 25, 25, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    transition-duration: 0.3s, 0.3s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
    transition-property: background-color,
}

.header-navigation-seperator {

    width: auto;
    height: 10px;
    background-color: white;

}

.custom-nav-link {
    position: relative;
    text-decoration: none;
}

.custom-nav-link:hover {
    text-decoration: none;
}

.custom-nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: transparent;
    transition: background-color 0.2s;
}

.custom-nav-link:hover::after {
    background-color: white;
}

/*Style for  Request Card Main Container*/
.requestcard-rectangle-container {
    display: flex;
    max-width: 1800px;
    /* Adjust the width as needed */
    max-height: 200px;
    margin: 20px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 5px 5px;
    padding: 0px;
    text-decoration: none;
}

/* Style for the left side of the rectangle */
.requestcard-rectangle-left-side {
    flex: 2;
    padding: 20px;
}

/* Style for the title */
.requestcard-rectangle-title {
    font-weight: bold;
    margin-bottom: 10px;
    font-family: 'Archia', sans-serif;
    font-size: 20px;
    font-weight: bold;
}

/* Style for the description */
.requestcard-rectangle-description {
    margin-bottom: 20px;
    font-family: 'Archia', sans-serif;
    font-size: 14px;
}

/* Style for the right side of the rectangle */
.requestcard-rectangle-right-side {
    flex: 1;
    display: flex;
    justify-content: right;
}

/* Style for the image */
.cardrequest-rectangle-image {
    max-width: 100%;
    height: max-content;
    border-radius: 0px;
}

/* Styles for request cards */

.requests-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 22rem));
    gap: 25px;
}

.card-papl {
    width: 100%;
    /* Allow the card to take the full width of the grid column */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    height: 580px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
    /* Add transition for smooth scaling */
}

.card-papl:hover {
    transform: scale(1.02);
    /* Scale the card by 1.1x on hover */
}

.card-body .card-body-papl {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.card-body-papl {
    color: black;
    font-size: 20px;
    font-family: 'Archia', sans-serif;
    font-weight: 450;
    padding-bottom: 5px;
}

.card-blurb-papl {
    color: black;
    font-size: 16px;
    font-family: 'Archia', sans-serif;
    font-weight: 400;
    height: 240px;
    flex-grow: 1;
    overflow: hidden;
    /* Hide the overflowed text */
    text-overflow: ellipsis;
    /* Add an ellipsis (three dots) */
    display: -webkit-box;
    -webkit-line-clamp: 10;
    /* Change the number of lines as needed */
    -webkit-box-orient: vertical;
}

.card-icon-papl {
    display: flex;
    align-items: center;
    height: 40px;
    margin-top: auto;
}

/* Style for Sign in Button */
.PAPL-button-sign-in {
    width: 350px;
    text-align: center;
    padding: 10px;
    min-height: 40px;
    background-color: #FFF;
    color: #004F71;
    border-color: #004F71;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Archia', sans-serif;
    font-weight: 500;
    transition: background-color 0.3s;
    font-size: 24px;
}

.PAPL-button-sign-in:hover {
    border-color: #004F71;
    color: #FFF;
    /* New button color on hover */
    background-color: #004F71;
}

/* Style for Create Button */
.PAPL-button-create {
    border: 0;
    text-align: center;
    display: inline-block;
    padding: 14px;
    width: 300px;
    margin: 7px;
    color: #ffffff;
    background-color: #ff7700;
    border-radius: 0px;
    font-family: "proxima-nova-soft", sans-serif;
    font-weight: 600;
    text-decoration: none;
    transition: box-shadow 200ms ease-out;
}


/*Style for View Request Background*/
.view-requests-background {
    background-color: #dde5ea;
    padding-top: 20px;
    padding-left: 10%;
    padding-right: 10%;
    justify-content: center;
    height: 100%;
    padding-bottom: 15px
}




.list-item-main-container {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin: 10px;
    padding-right: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.list-item-status-container {
    flex: 1;
    text-align: center;
    height: 75px;
    color: #fff;
    font-size: large;
    font-weight: bold;
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 10px;

}

.list-item-status-new {
    background-color: #139dcc;
}

.list-item-status-pending {
    background-color: #A2C73C;
}

.list-item-status-rfi {
    background-color: #C73CC0;
}

.list-item-status-cancelled {
    background-color: #39473A;
}

.list-item-status-rejected {
    background-color: #39473A;
}

.list-item-status-approved {
    background-color: #3CC747;
}

.list-item-status-default {
    background-color: #A4ABB6;
}

.list-status-icon-img {
    width: auto;
    /* Adjust the width of the image */
    height: auto;
    /* Adjust the height of the image */
    margin-bottom: 0px;
}

.list-item-title-description-container {
    flex: 5;
    padding-left: 10px;
    height: 75px;
    padding-top: 5px;
}

.list-item-date-button-container {
    flex: 1;
    justify-content: right;
    text-align: center;
    display: flex;
    gap: 20px;
}

.list-item-button {
    background-color: #c73cc0;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
}

/* Hide Landing Icon by default */
.nav-item .landing {
    display: none;
    /* Hide the wrench icon by default */
}

/* Show Landing Icon on Hover*/
.nav-item:hover .landing {
    display: inline;
    /* Show the wrench icon on hover */
    /* Add any additional styling for the icon when hovered */
}

/* Hide TakeOff Icon on Hover*/
.nav-item:hover .takeOff {
    display: none;
}

/* Hide TakeOff Icon on Active Nav Item */
.nav-item.active>a>.takeOff {
    display: none;
}

/* Show Landing Icon on Active Nav Item */
.nav-item.active>a>.landing {
    display: inline;
}

/* Login Page CSS */

.login-main-container {
    display: flex;
    height: 100vh;
}

.login-left-side {
    flex: 1;
    background-color: #004F71;
    color: #fff;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login-right-side {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login-logo {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
}

.login-blurb-top {
    margin-bottom: 20px;
    text-align: center;
    font-size: 40px;
    font-family: 'Archia', sans-serif;
    font-weight: 500
}

.login-blurb-bottom {
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    font-family: 'Archia', sans-serif;
}

.login-image {
    width: 350px;
    height: auto;
    margin-bottom: 20px;
}

.login-button-primary {
    margin-top: 10px;
    margin-bottom: 0px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #004F71;
    color: #fff;
    width: 275px;
    font-family: 'Archia', sans-serif;
    font-size: 18px;
    font-weight: 500;
    box-shadow: 11px
}

.login-button-secondary {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #ddd;
    color: #004F71;
    width: 275px;
    font-family: 'Archia', sans-serif;
    font-size: 19px;
    font-weight: 500;
    box-shadow: 11px
}

/* Request Landing Page CSS */

.info-quicklinks-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    /* Make both sections the same height */
    min-height: 200px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-top: 2%;
    /* overflow: auto; */
    /* background-image: url("https://www.perthairport.com.au/-/media/Images/pa-pattern-boab-blue.png");
} */
}

.requests-info {
    flex: 2.75;
    /* Take up remaining space */
    border-radius: 5px;
    padding: 0px;
    margin-right: 20px;
}

/* Font overides dynamic text areas */


.requests-quick-links {
    flex: 1;
    /* Take up remaining space */
    /* display: flex; */
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 20px;
    width: 100%;


}

/*Style for Requests Landing Page Background*/
.request-landing-body {
    /* background-image: url("https://www.perthairport.com.au/-/media/Images/pa-pattern-boab-blue.png");  */
    height: auto;
    overflow: auto;
}

.request-landing-bg-top {
    /* background-image: url("https://www.perthairport.com.au/-/media/Images/pa-pattern-boab-blue.png");  */
    padding-top: 20px;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 1%;
    justify-content: center;
    min-height: 400px;
    /* background-color: #004F71; */
    background: linear-gradient(#004F71 0%,
            #004F71 65%,
            #FFFFFF 65%,
            #FFFFFF 100%);
}


.request-landing-title {
    margin-bottom: 20px;
    text-align: left;
    font-size: 32px;
    font-family: 'Archia', sans-serif;
    color: #fff;
    font-weight: 600;
    margin-top: 2%;
    /* text-decoration: underline; */
}

/* Burb CSS Overides */
.request-landing-blurb, .view-requests-blurb {
    text-align: left !important;
    font-size: 17px !important;
    font-family: 'Archia', sans-serif !important;
}

.request-landing-blurb p, .view-requests-blurb p {
    text-align: left !important;
    font-size: 17px !important;
    font-family: 'Archia', sans-serif !important;
}

.request-landing-blurb a, .view-requests-blurb a {
    text-align: left !important;
    font-size: 17px !important;
    font-family: 'Archia', sans-serif !important;
    color: #007bff !important; /* Standard blue link color */
    text-decoration: underline !important; /* Adds underline to make it more noticeable */
}

.request-landing-blurb a:hover, .view-requests-blurb a:hover {
    color: #0056b3 !important; /* Darker blue on hover for better UX */
}

.request-landing-blurb table tr, .view-requests-blurb table tr {
    text-align: left !important;
    font-size: 17px !important;
    font-family: 'Archia', sans-serif !important;
}

.request-landing-blurb table th, .view-requests-blurb table th {
    text-align: left !important;
    font-size: 17px !important;
    font-family: 'Archia', sans-serif !important;
    font-weight: bold !important;
}

.request-landing-blurb strong, .view-requests-blurb strong {
    text-align: left !important;
    font-size: 17px !important;
    font-family: 'Archia', sans-serif !important;
    font-weight: bold !important;
}



.info-vertical-line {
    width: 2px;
    /* Width of the line */
    /* height: 100%; Height of the line */
    background-color: #004f71b4;
    /* Color of the line */
}

/* breakpoints for blurb & quick links */

/* Media Query for screen width below 1105px */
@media (max-width: 1000px) {
    .info-quicklinks-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .requests-info {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .requests-quick-links {
        flex-direction: column;
        padding-left: 0;
    }

    .info-vertical-line {
        width: 100%;
        height: 2px;
        margin: 20px 0;
    }

    .quick-link-button {
        width: 100% !important;
        margin-bottom: 10px;
        text-align: center;
        padding: 10px;
        background-color: #FFF;
        color: #004F71;
        border-color: #004F71;
        border-radius: 5px;
        cursor: pointer;
        font-family: 'Archia', sans-serif;
        font-weight: 500;
        transition: background-color 0.2s;
        /* max-height: 50px; */
    }
}

.quick-link-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;
}

.quick-link-button {
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
    padding: 10px;
    background-color: #FFF;
    color: #004F71;
    border-color: #004F71;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Archia', sans-serif;
    font-weight: 500;
    transition: background-color 0.2s;
    /* max-height: 50px; */
}

.quick-link-button:hover .fa-up-right-from-square {
    /* Define the styles for the icon when button is hovered over */
    /* For example, you can change color or size */
    color: #FFF !important;
}

.quick-link-button .fa-up-right-from-square {
    margin-left: 10px;
}

.quick-link-button:hover {
    border-color: #004F71;
    color: #FFF;
    /* New button color on hover */
    background-color: #004F71;
}

@media (max-width: 350px) {
    .quick-link-button {
        width: 100%;
    }
}

.request-landing-bg-bottom {
    padding-left: 4%;
    padding-right: 4%;
    justify-content: center;
    height: auto;
    background-color: #ffffff;
    padding-left: 10%;
    padding-right: 10%;
    margin-bottom: 3%;
}

.request-landing-requests-title {
    text-align: left;
    font-size: 32px;
    font-family: 'Archia', sans-serif;
    color: #004F71;
    font-weight: 600;
    padding-bottom: 20px;
}

.landing-request-title:active {
    color: #FFFFFF;
    /* Replace with your desired color */
}

/* Create Request CSS */

.create-simple-request-main {
    padding-top: 20px;
    padding-left: 10%;
    padding-right: 10%;
    justify-content: center;
    background: linear-gradient(#2e5a6d 0%, #004F71 25%, #FFFFFF 25%, #FFFFFF 100%);
    height: auto;
    margin-bottom: 5%;
}

.create-simple-request-title {
    margin-bottom: 20px;
    text-align: left;
    font-size: 32px;
    font-family: 'Archia', sans-serif;
    color: #fff;
    font-weight: 600;
    margin-top: 5%;
    justify-content: center;
}

.create-simple-request-Links {
    justify-content: left;
}

.create-simple-request-form-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: relative;
    width: 100%;
    height: 1200px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-top: 2%;
}

.create-complex-request-main {
    padding-top: 20px;
    padding-left: 10%;
    padding-right: 10%;
    justify-content: center;
    background: linear-gradient(#004F71 0%, #004F71 25%, #FFFFFF 25%, #FFFFFF 100%);
    height: auto;
    margin-bottom: 5%;
}

.create-complex-request-title {
    margin-bottom: 20px;
    text-align: left;
    font-size: 32px;
    font-family: 'Archia', sans-serif;
    color: #fff;
    font-weight: 600;
    margin-top: 5%;
    justify-content: center;
}

.create-complex-request-form-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: relative;
    width: 100%;
    height: auto;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-top: 2%;
}

.ms-form {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* View Requests CSS */

.view-requests-main {

    /* background: linear-gradient(#004F71 0%, #004F71 30%, #FFFFFF 30%, #FFFFFF 100%); */
    height: auto;
    margin-bottom: 5%;
}

.view-requests-top {
    padding-top: 20px;
    padding-left: 10%;
    padding-right: 10%;
    justify-content: center;
    background: linear-gradient(#004F71 0%, #004F71 70%, #FFFFFF 70%, #FFFFFF 100%);
    height: auto;
    /* margin-bottom: 5%; */

}

.view-requests-bottom {

    padding-top: 20px;
    padding-left: 10%;
    padding-right: 10%;
    justify-content: center;
    height: auto;
    margin-bottom: 5%;

}

.view-requests-title {
    margin-bottom: 20px;
    text-align: left;
    font-size: 32px;
    font-family: 'Archia', sans-serif;
    color: #fff;
    font-weight: 600;
    margin-top: 4%;
    justify-content: center;
}

.view-requests-description-container {
    display: flex;
    justify-content: left;
    align-items: stretch;
    /* Make both sections the same height */
    height: auto;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-top: 2%;
    margin-bottom: 4%;
    font-family: 'Archia', sans-serif !important;
    /* overflow: auto; */
    /* background-image: url("https://www.perthairport.com.au/-/media/Images/pa-pattern-boab-blue.png");
} */
}

.view-requests-existing-title {
    text-align: left;
    font-size: 32px;
    font-family: 'Archia', sans-serif;
    color: #004F71;
    font-weight: 600;
    padding-bottom: 20px;
    flex: 1
}

.create-request-wrapper {
    flex: 1;
    justify-content: end;
    display: flex;
    gap: 25px;
}

/* Request button on view requests page  */
.create-request-button {
    width: auto;
    /* Let the button width adjust to its text */
    height: 50px;
    /* Keep the consistent height */
    margin-bottom: 10px;
    text-align: center;
    padding: 10px 20px;
    /* More horizontal padding to prevent text from touching edges */
    background-color: #FFF;
    color: #004F71;
    border-color: #004F71;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Archia', sans-serif;
    font-weight: 500;
    transition: background-color 0.3s;
    white-space: nowrap;
    /* Prevent line breaks for long text */
}

.create-request-button:hover {
    border-color: #004F71;
    color: #FFF;
    /* New button color on hover */
    background-color: #004F71;
}

.create-request-button:hover .fa-circle-plus {
    /* Define the styles for the icon when button is hovered over */
    /* For example, you can change color or size */
    color: #FFF !important;
}

/* ABC Button */
.ABC-view-button {
    width: auto;
    /* Let the button width adjust to its text */
    height: 50px;
    /* Keep the consistent height */
    margin-bottom: 10px;
    text-align: center;
    padding: 10px 20px;
    /* More horizontal padding to prevent text from touching edges */
    background-color: #FFF;
    color: #6a0dad;
    border-color: #6a0dad;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Archia', sans-serif;
    font-weight: 500;
    transition: background-color 0.3s;
    white-space: nowrap;
    /* Prevent line breaks for long text */
}

.ABC-view-button:hover {
    border-color: #6a0dad;
    color: #FFF;
    /* New button color on hover */
    background-color: #6a0dad;
}

.ABC-view-button:hover .fa-user {
    /* Define the styles for the icon when button is hovered over */
    /* For example, you can change color or size */
    color: #FFF !important;
}

.view-requests-button-title-wrapper {
    display: flex;
    /* flex-direction: row;  Default: Stack buttons above the title */
    gap: 20px;  /* Space between the buttons and title */
    align-items: flex-start;  /* Aligns content to the left */
  }
  
  .view-requests-existing-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
  }
  
  .create-request-wrapper {
    display: flex;
    gap: 10px;  /* Space between buttons */
    flex-wrap: wrap;  /* Allow buttons to wrap when necessary */
  }
  
  @media (min-width: 1000px) {
    .view-requests-button-title-wrapper {
      flex-direction: column;  /* Horizontal layout when screen width >= 1000px */
      align-items: center;
      justify-content: space-between;  /* Space between title and buttons */
      padding-bottom: 25px;
    }
  
    .create-request-wrapper {
        order: 1;  /* Buttons first */
      }
      
      .view-requests-existing-title {
        order: 2;  /* Title second */
      }
  }
  
  @media (max-width: 1000px) {
    .view-requests-button-title-wrapper {
      flex-direction: column;  /* Stack buttons above title for smaller screens */
    }
  }
  


/* Letter of Acceptance CSS Styles */

.loa-main {
    padding-top: 5%;
    margin-right: 10%;
    margin-left: 10%;
    justify-content: center;
    background: white;
    height: auto;
    margin-bottom: 2%;
}

.loa-title {
    height: auto;
    padding-bottom: 1%;
    text-align: left;
    font-size: 32px;
    font-family: 'Archia', sans-serif;
    color: #000000;
    font-weight: 600;

}

.loa-blurb {
    height: auto;
    font-family: 'Archia', sans-serif;
    padding-bottom: 1%;
    color: #000000;
}

.loa-body-text {
    height: auto;
    padding-bottom: 1%;
    flex: 1;
    /* This will make the div grow to fill the remaining space */
    overflow-y: auto;
    /* Enable vertical scrolling if content overflows */
}

.loa-checkbox {
    height: auto;
    padding-bottom: 3%;
}

.loa-buttons-wrapper {
    height: auto;
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
}

.loa-cancel {
    height: auto;
}

.loa-accept {
    height: auto;
}

/* View PAAT CSS Styles */

.view-paat-main {
    padding-top: 30px;
    margin-right: 5%;
    margin-left: 5%;
    justify-content: center;
    background: white;
    height: 100%;
    margin-bottom: 5%;
    display: flex;
    flex-direction: column;
}

.view-paat-title {
    height: auto;
    padding-bottom: 3%;
    text-align: left;
    font-size: 22px;
    font-family: 'Archia', sans-serif;
    color: #000000;
    font-weight: 600;
}

.view-paat-projects-applications-wrapper {
    display: flex;
    flex: 1;
    /* Take up remaining space */
    flex-direction: row;
    /* Arrange children in a row */
    min-height: 600px;
}

.paat-create-search-wrapper {
    display: flex;
}

.view-paat-projects-wrapper,
.view-paat-applications-Wrapper {
    flex: 1;
    /* Allow these elements to take up equal space */
}

.view-paat-projects-wrapper {
    height: auto;
    flex: 1;
    max-width: 300px;

}

.view-paat-projects-title {
    height: auto;
    padding-bottom: 1%;
    text-align: left;
    font-size: 16px;
    font-family: 'Archia', sans-serif;
    color: #000000;
    font-weight: 500;
}

.view-paat-projects-list {
    height: auto;
    padding-bottom: 2%;
}


.view-paat-new-project-button {
    height: auto;
    padding-left: 4%;
}

.view-paat-applications-Wrapper {
    height: auto;
    flex: 3;
    padding-left: 3%;
}

.view-paat-applications-title {
    height: auto;
    padding-bottom: 2%;
    text-align: left;
    font-size: 16px;
    font-family: 'Archia', sans-serif;
    color: #000000;
    font-weight: 500;
}

.view-paat-applications-pills-create-wrapper {
    height: auto;
    display: flex;
    justify-content: space-between;
    padding-bottom: 2%;

}

.paat-nav-pills-wrapper {
    width: auto;
}

@media (max-width: 1400px) {
    .paat-nav-pills-wrapper {
        max-width: 250px;
    }
}

.view-paat-applications-pills {
    height: auto;
    display: flex;
    flex-direction: column;
}

.view-paat-applications-create {
    height: auto;
}

.view-paat-applications-list {
    height: auto;
}

.view-paat-seperator {
    background-color: #004f71;
    width: 2px;
    background-color: #004f71;
    min-height: 450px;
    /* Minimum height */
}

.paat-nav-pill {
    background-color: #004f71;
}

.nav-pills .nav-link.active {
    background-color: #004f71;
    /* Your custom background color */
    color: #fff;
    /* Your custom text color */
    font-family: 'Archia', sans-serif;
}

.nav-pills .nav-link {

    color: #000;
    /* Your custom text color */
    font-family: 'Archia', sans-serif;
}

.view-paat-projects-list > ul > li {
    width: 100%;
}

.nav-selected-item {
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: #f2f2f2;
    /* semi-transparent white background */

}

.project-item {
    text-overflow: ellipsis;
    overflow: hidden;
    font-family: 'Archia', sans-serif;
    color: #004f71;
    /* semi-transparent white background */

}

/* CSS for Account Applications Table */
.papl-download-icon {
    cursor: pointer;
}

.application-table-crane-type {
    text-align: middle;
}


#account-applications-table {
    width: 100%;
    border-collapse: collapse;
}

#account-applications-table th,
#account-applications-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-family: 'Archia', sans-serif;
    font-weight: 350;
    font-size: 15px;
}

.download-icon-blurb {
    padding: 8px 12px;
    text-align: left;
    font-family: 'Archia', sans-serif;
    font-weight: 350;
    font-size: 15px;
    padding-left: 5px;
}

#account-applications-table th {
    background-color: #004f71;
    font-weight: 500;
    color: white;
    font-family: 'Archia', sans-serif;
}

#account-applications-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

#account-applications-table tr:hover {
    background-color: #ddd;
}

/* Center the icon in the cell */
#account-applications-table .permit-download {
    text-align: center;
    vertical-align: middle;
    position: relative;
    width: 130px;
}

#account-applications-table .permit-download i {
    display: inline-block;
}

/* Change cursor to pointer when hovering over header items */
#account-applications-table th:hover {
    cursor: pointer;
}

/* CSS for Personal Applications Table */

#personal-applications-table {
    width: 100%;
    border-collapse: collapse;
}

#personal-applications-table th,
#personal-applications-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-family: 'Archia', sans-serif;
    font-weight: 350;
    font-size: 15px;
}

#personal-applications-table th {
    background-color: #004f71;
    font-weight: 500;
    color: white;
    font-family: 'Archia', sans-serif;
}

#personal-applications-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

#personal-applications-table tr:hover {
    background-color: #ddd;
}

/* Center the icon in the cell */
#personal-applications-table .permit-download {
    text-align: center;
    vertical-align: middle;
    position: relative;
    width: 130px;
}

#personal-applications-table .permit-download i {
    display: inline-block;
}

/* Change cursor to pointer when hovering over header items */
#personal-applications-table th:hover {
    cursor: pointer;
}

/* Loading Spinner CSS  */

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    /* Ensure it is on top of everything else */
}

.spinner-content {
    text-align: center;
    background-color: #f8f9fa;
    /* Light background */
    border: 1.5px solid #dee2e6;
    /* Light border */
    border-radius: 0.5rem;
    /* Rounded corners */
    padding: 1.5rem;
    /* Padding */
}

.spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: .3em;
    color: #004f71;
    /* Set spinner color */
}

.spinner-text {
    margin-top: 1rem;
    font-family: 'Archia', sans-serif;
    color: #004f71;
    /* Text color */
}

/* Download Permit Spinner CSS  */

.download-permit-spinner {

    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    /* Light grey */
    border-top: 2px solid #004f71;
    /* Blue */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -10px;
    /* Half of the spinner's height */
    margin-left: -10px;
    /* Half of the spinner's width */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*  New Application modal css */

.modal-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dropdown-container {
    flex: 1;
    margin-right: 10px;
}

.new-project-btn {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    margin-left: 10px;
}

.modal-body p {
    margin-bottom: 0;
}

.modal-custom-width {
    max-width: 32.5%;
    /* Adjust the percentage as needed */
}

.modal-title-custom {
    font-size: 1.5rem;
    /* Adjust the size as needed */
    font-family: 'Archia', sans-serif;
    /* Adjust the font family as needed */
    font-weight: 400;
}

/* New Project Modal CSS */

.modal-lg {
    max-width: 800px;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: bold;
}

/* CSS for no projects found text */
.no-projects-blurb {
    padding-top: 3%;
    min-height: 105px;
    max-height: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    /* Adjust the size as needed */
    font-family: 'Archia', sans-serif;
    /* Adjust the font family as needed */
    font-weight: 400;
    display: flex;
    flex-direction: column;
}

/* Alert Button Close */
.btn-close-modal {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 0;
    color: #000;
    background: 0, 0;
    text-shadow: 0 1px 0 #fff;
}

/* Applications Search box */

.application-search-box {
    display: flex;
    align-items: center;
    margin-left: 15px;
    min-width: 350px;
}

.application-search-box input[type="text"] {
    padding: 5px 10px;
    font-family: 'Archia', sans-serif;
    font-size: 14px;
    border: 2px solid #004f71;
    border-radius: 4px 0 0 4px;
    outline: none;
    width: 300px;
    /* Adjust the width as needed */
    width: 100%;
    height: 45px;
    border-right: none;
}

.application-search-box button[type="submit"] {
    padding: 5px 10px;
    font-size: 14px;
    border-left: none;
    background-color: #004f71;
    color: white;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    height: 45px;
}

.application-search-box button[type="submit"]:hover {
    background-color: #003a55;
}

/* Account Pagination css */

/* @font-face {
    font-family: 'Archia';
    src: url('path-to-your-font/Archia-Regular.woff2') format('woff2');
  } */
.pagination-container {
    display: none;
    /* Hide the pagination container initially */
    justify-content: left;
    margin-top: 20px;
}

.pagination .page-item {
    margin: 0 2px;
}

.pagination .page-link {
    border-radius: 5px !important;
    padding-top: 7.5px !important;
    font-family: 'Archia', sans-serif !important;
    border: 1px solid #dee2e6 !important;
    color: #004f71 !important;
    background-color: white !important;
    transition: none !important;
    outline: none !important;
    /* Remove the outline */
    box-shadow: none !important;
    /* Remove the box shadow */
}

.pagination .page-item.active .page-link {
    background-color: #004f71 !important;
    border-color: #004f71 !important;
    color: white !important;
}

.pagination .page-link:hover {
    background-color: #004f71 !important;
    color: white !important;
    text-decoration: none !important;
}

.pagination .page-item.active .page-link:hover {
    background-color: #003a55 !important;
    color: white !important;
}

/*Style for  Landing Page Background*/
.landing-body {
    /* background-image: url("https://www.perthairport.com.au/-/media/Images/pa-pattern-boab-blue.png");   */
    height: auto;
    overflow: auto;
}

.landing-bg-top {
    padding: 20px 10% 1%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 1%;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(#004F71 0%,
            #004F71 45%,
            #FFFFFF 45%,
            #FFFFFF 100%);
    display: flex;
    /* Enables horizontal alignment */
    align-items: center;
    /* Align items vertically in the center */

}

.landing-title {

    margin: 2% 0 20px;
    text-align: left;
    font-size: 40px;
    font-family: 'Archia', sans-serif;
    color: #000;
    font-weight: 600;
    margin-top: 2%;
    /* text-decoration: underline; */
}

.landing-blurb {
    text-align: left !important;
    font-size: 22px !important;
    font-family: 'Archia', sans-serif !important;
    color: #000;
    font-weight: 400;
}

.landing-hero-left {
    flex: 1;
    /* Makes each div take up equal space */
    margin: 10px;
    /* Optional: Adds space around each div */
}

.landing-hero-right {
    flex: 1;
    display: flex;
    justify-content: end;
}

.landing-right-img {
    display: flex;
    /* Make it a flex container */
    align-items: center;
    /* Center vertically */
    justify-content: center;
    /* Center horizontally */
    width: 100%;
    /* Ensure it takes up full width of the parent */
}

.landing-hero-right img {
    max-width: 65%;
    /* Adjust this value to control the image size */
    height: auto;
    margin-right: 10px;
    /* Optional: Adds some spacing to the right */

}

.landing-hero {
    justify-content: center;
    align-items: stretch;
    display: flex;
    max-width: 70%;
    min-height: 200px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-top: 2%;
}

.landing-bg-bottom {
    padding-left: 4%;
    padding-right: 4%;
    justify-content: center;
    height: auto;
    background-color: #ffffff;
    padding-left: 10%;
    padding-right: 10%;
    margin-bottom: 3%;
    padding-top: 20px
}


.landing-request-box {
    background-color: #004F71;
    /* Box background color */
    color: #FFF;
    /* Text color */
    font-family: 'Archia', sans-serif;
    /* Font family */
    border-radius: 10px;
    /* Slightly rounded edges */
    padding: 20px;
    /* Inner padding for content */
    width: 300px;
    /* Fixed width for consistent box sizes */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Subtle shadow for depth */
    display: flex;
    /* Allow vertical alignment inside the box */
    flex-direction: column;
    /* Stack title and sub-links vertically */
    align-items: stretch;
    /* Align content inside the box */
}


.landing-request-title {
    display: block;
    /* Ensure it spans the full width */
    font-size: 18px;
    /* Title font size */
    font-weight: bold;
    /* Bold for emphasis */
    color: #FFF;
    /* Title color */
    text-decoration: none;
    /* Remove underline */
    font-family: 'Archia', sans-serif;
    /* Font family */
    margin-bottom: 10px;
    /* Space below the title */
}

.landing-request-title:hover {
    color: #FFF;
    /* Title color */
    text-decoration: underline;
    /* Add underline on hover */
}

.landing-request-title:hover {
    text-decoration: underline;
    /* Add underline on hover */
}

.landing-requests-wrapper {
    display: flex;
    /* Enable flexbox layout */
    flex-wrap: wrap;
    /* Allow wrapping to the next row if necessary */
    gap: 20px;
    /* Add spacing between boxes */
    justify-content: center;
    /* Center the boxes horizontally */
    padding: 20px;
    /* Add padding around the container */
}

.landing-sub-links {
    margin-top: 10px;
    /* Space above the sub-links */
}

.landing-sub-link {
    display: block;
    /* Stack sub-links vertically */
    border: 1px solid #FFF;
    /* Border around each sub-link */
    color: #FFF;
    /* Sub-link text color */
    font-size: 14px;
    /* Sub-link font size */
    text-decoration: none;
    /* Remove underline */
    padding: 10px;
    /* Padding inside each sub-link */
    margin-bottom: 10px;
    /* Space between sub-links */
    border-radius: 5px;
    /* Rounded edges for sub-links */
    font-family: 'Archia', sans-serif
}

.landing-sub-link:hover {
    background-color: #005F85;
    /* Slightly darker background on hover */
    color: #FFF;
    /* Keep text white */
}

/* Responsive landing page items */
@media (max-width: 1200px) {
    .landing-bg-top {
        flex-direction: column;
        padding: 20px;
    }

    .landing-hero {
        flex-direction: column;
        width: 100%;
        padding: 10px;
    }

    .landing-title {
        font-size: 28px;
    }

    .landing-blurb {
        font-size: 18px;
    }

    .landing-hero-right img {
        width: 100%;
    }
}

/* Hide "Note text" field in pop up moadal */

.table-info label[for="notescontrol"].field-label {
    display: none !important;
}

/* Consent/ABC view table */

#defaultView, #abcView {
    transition: opacity 0.5s ease-in-out;
  }
  
  #abcView[style*="display: none;"] {
    opacity: 0;
  }
  
  #abcView[style*="display: flex;"] {
    opacity: 1;
  }