:root {
    --grpumps-color-blue: #0067b1;
    --grpumps-color-darkblue: #003c75;
    --grpumps-color-lightblue: #abe1fa;
    --grpumps-color-red: #d00a2c;
    --grpumps-color-black: #393a3a;
}

/* I added this in case I need to add custom CSS - Nick Vogt */

a {
    color: var(--grpumps-color-blue);
}

/* layout/default.php */
nav {
    height: 12vh;
}

.banner {
    display: flex;
    justify-content: center;
    background-color: white;
}

.userBanner {
    height: 16vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.applicantsBanner {
    height: 16vh;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.calculationsBanner {
    height: 16vh;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #131313;
}

.loginBanner {
    height: 16vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.linksBanner {
    height: 16vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

main {
    /* background-color: var(--grpumps-color-lightblue); */
    background-image: linear-gradient(
        90deg,
        var(--grpumps-color-lightblue) 0%, 
        var(--grpumps-color-lightblue) 50%, 
        var(--grpumps-color-darkblue) 50%, 
        var(--grpumps-color-darkblue)
    );
    min-height: 86vh;
}

.label {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.loginRow {
    padding: 0 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: white;
    background-color: var(--grpumps-color-black);
    height: 4vh;
}

.loginRow a {
    color: white;
}

.loginRow a:hover {
    color: var(--grpumps-color-lightblue);
}

.navBarRow {
    display: grid;
    grid-template-columns: 25% 75%;
    padding: 0;
    height: 10vh;
}

.navBarBttns {
    display: flex;
    justify-content: space-around;
}

.returnArrow {
    margin: 20px 0;
}

.returnArrow div a::before {
    content: '\00AB';
}

.processingShade {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.6);
    height: 100vh;
    width: 100vw;
    z-index: 2;
}

.processingShade img {
    max-width: 75px;
    max-height: 75px;
}

.adminOpenAndClose {
    color: rgb(5,9,13);
    font-weight: 500;
    font-size: 16px;
    font-family: 'Oswald', sans-serif;
}

.adminOpenAndClose:hover {
    color: #abe1fa;
    transition: color 0.2s ease-out;
    cursor: pointer;
}

.adminDropdown {
    padding: 10px;
    display: none;
    position: absolute;
    z-index: 1;
    background-color: var(--color-main-bg);
}

/* Shared between multiple View files */

thead tr th:first-child {
    padding-left: 5px;
}

thead tr th:last-child {
    padding-right: 5px;
}

.customContent {
    padding: 0;
    border-radius: 0;
    min-height: 70vh;
}

.contentUnderTitle {
    padding: 20px 2% 50px 2%;
}

.subContent {
    padding: 0 40px 40px 40px;
}

.message {
    /* margin-bottom: 0px; */
    margin: 0 2rem;
}

.eventBttnBar {
    margin-bottom: 40px;
    padding-top: 10px;
    display: flex; 
    justify-content: space-between;
}

.selectSize {
    font-size: 1.5rem;
}

.acceptedLabel {
    margin-top: 40px;
}

.permDeleteEl {
    border: 3px dashed grey;
    padding: 10px 15px;
    display: none;
    position: absolute;
    top: 20px;
    left: calc(50% - 150px);
    background-color: white;
    width: 300px;
}

.permExplain {
    margin-bottom: 15px;
}

.permDeleteBttn {
    padding: 0 5px;
    width: 100%;
}

.permCancel {
    margin-top: 30px;
}

.permCancel span {
    cursor: pointer;
}

.bottomSubmit {
    margin-top: 50px;
}

.commentContainer {
    margin-top: 100px;
}

.commentBox {
    display: grid;
    grid-template-columns: 49% 49%;
    column-gap: 2%;
}

.commentRow {
    margin-bottom: 15px;
    border-radius: 5px;
    border-bottom: 1px solid white;
    padding: 10px;
    color: white;
    display: grid;
    background-color: var(--grpumps-color-blue);
    grid-template-columns: 58% 40%;
    column-gap: 2%;
    grid-template-areas: 
        "sender date"
        "status status"
        "statement statement";
}

.commentSender {
    grid-area: sender;
}

.commentDate {
    text-align: right;
    grid-area: date;
}

.commentStatus {
    font-style: italic;
    text-align: right;
    grid-area: status;
}

.commentStatement {
    margin-top: 10px;
    border: 1px solid white;
    border-radius: 5px;
    padding: 5px;
    grid-area: statement;
}

.commentInput {
    border-radius: 5px;
    padding: 1vw;
    color: white;
    background-color: var(--grpumps-color-red);
}

.explainInput {
    margin-bottom: 30px;
    font-size: 2rem;;
    text-align: center;
}

.commentInput textarea {
    background-color: white;
    min-height: 150px;
}

label.commentInitial {
    font-weight: normal;
}

input.commentInitial {
    background-color: white;
    width: 50%;
    min-width: 120px;
}

.noBottomMarginList {
    margin-bottom: 0;
}

.backArrow::before {
    content: '\00AB';
}

/* Users/login.php */

.loginPage {
    padding-top: 50px;
}

.bottomLoginBttns {
    display: flex;
    justify-content: space-between;
}

/* Applicants/index.php */

.wrapsIntroMain {
    min-height: 70vh;
}

.backgroundMain {
    padding: 10px 1% 100px 1%;
    background-color: white;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 70vh;
}

.backgroundMain > .customContent {
    min-height: unset;
}

.introMain {
    display: grid;
    grid-template-columns: 33% 32% 33%;
    row-gap: 10px;
    column-gap: 1%;
    box-shadow: none;
}

.oneSection {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 20px;
    border-radius: 20px;
    background-color: rgb(224,224,224);
}

.sectionTitle {
    margin: 20px 5%;
    text-align: center;
    font-weight: bold;
}

.sectionDescription {
    margin: 0 8%;
}

.finderTag {
    padding: 40px 30px 0 30px;
}

.finderTag > a {
    color: white;
}

.finderTag > a:hover {
    color: white;
}

.finderTag > a:active {
    color: white;
}

.finderTag > a:visited {
    color: white;
}

.finderBttn {
    /* margin: 40px 30px 0 30px; */
    border-radius: 5px;
    padding: 20px 5px;
    text-align: center;
    background-color: var(--grpumps-color-blue);
}

.finderAcademyBttn {
    margin-top: 50px;
    color: white;
}

.emailLink {
    margin-top: 30px;
    text-align: center;
}

.libraryEl {
    padding: 10px 3%;
    border-radius: 15px;
    color: white;
    background-color: var(--grpumps-color-darkblue);
    max-width: 400px;
}

.libraryTitle {
    margin-bottom: 20px;
    text-align: center;
    font-size: 2rem;
}

.libraryList {
    display: grid;
    grid-template-columns: 40% 40%;
    gap: 4%;
}

.libraryList a {
    color: white;
}

/* Applicants/create.php */

.mainContent {
    display: grid;
    grid-template-columns: 50% 50%;
    background-color: white;
}

.formColumn {
    padding: 20px 5%;
}

.formInputLocation {
    display: grid;
    grid-template-columns: 78% 20%;
    grid-column-gap: 2%;
}

.formLeft {
    background-position: top;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background: linear-gradient(
            rgba(255, 255, 255, 0.7),
            rgba(255, 255, 255, 0.7)
        ),
        url('../img/applicants/GR_Academy_side_banner.jpg')
        var(--grpumps-color-blue)
}

.eventStats {
    margin-top: 20px;
    border: solid black 1px;
    border-radius: 15px;
    padding: 20px 10%;
    background-color: white;
}

.eventStats .title {
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
}

.eventStats .location {
    margin-bottom: 20px;
}

.eventStats .description {
    margin-bottom: 30px;
    color: #606c76;
}

.eventStats .dates {
    margin-bottom: 20px;
}

.returnBttn {
    margin-bottom: 15px;
    /* text-align: right; */
}

.returnBttn a::before {
    content: '\00AB';
}

.questions {
    visibility: hidden;
}

.questions form select {
    font-size: 1.5rem;
}

.questions form .submit {
    margin-top: 50px;
}

.formQuestion {
    margin-bottom: 20px;
    text-align: center;
}

.bttnTray {
    display: flex;
    justify-content: space-around;
}

.formAnswer {
    margin-bottom: 50px;
}

.distBttn {
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    width: 20%;
}

.isDist {
    color: white;
    background-color: var(--grpumps-color-blue);
    cursor: pointer;
}

.notDist {
    color: black;
    background-color: lightgrey;
}

.distSelect {
    font-size: 1.6rem;
}

.sponsorInfo {
    display: none;
}

input.error {
    border: 2px solid var(--grpumps-color-red);
}

.flightSection {
    margin-bottom: 30px;
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    padding: 15px;
}

.flightHeader  {
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
}

.flightDetails div {
    text-align: right;
}

.attendeeDivider {
    margin: 40px 0 20px 0;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    text-align: center;
}

.companyRow {
    display: none;
}

/* Applicants/view.php */

.confirmationContent {
    /* background-color: white; */
    height: 70vh;
}

.confirmationLeft {
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat !important;
    background: linear-gradient(
            rgba(255, 255, 255, 0.7),
            rgba(255, 255, 255, 0.7)
        ),
        url('../img/applicants/GR_Academy_side_banner.jpg')
        var(--grpumps-color-blue)
}

.confirmationTitle {
    margin-bottom: 40px;
    text-align: center;
    font-size: 2rem;
    color: var(--grpumps-color-darkblue);
}

.confirmationLinks {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}

.confirmationLinks a span {
    border: 1px solid var(--grpumps-color-blue);
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

.confirmationLinks a span:hover {
    text-decoration: underline;
}

/* Applicants/details.php */

.subheader {
    padding-left: 20px !important;
}

/* Applicants/edit.php */

.flightDetails {
    display: grid;
    grid-template-columns: 45% 45%;
    column-gap: 10%;
}

/* Events/index.php */

.newEventBox {
    margin: 20px 0;
    display: flex; 
    justify-content: flex-end;
}

.newEventBox span a {
    color: white;
}

.newEventBox span a span {
    margin-left: 20px;
    background-color:var(--grpumps-color-darkblue); 
    border-radius:10px; 
    padding: 10px;
}

.upcoming {
    margin-left: 20px;
}

.eventSearchEl {
    border-radius: 8px;
    padding: 10px 10px 0 10px;
    background-color: lightgray;
}

/* Events/create.php */

.createEventColumns {
    display: grid;
    grid-template-columns: 48% 48%;
    gap: 4%;
}

.eventRow {
    margin-top: 5px;
    border-bottom: 1px solid black;
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

.eventRow:last-of-type {
    border-bottom: none;
}

.eventColumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chooseEvent {
    border-radius: 5px;
    padding: 5px;
    color: white;
    background-color: var(--grpumps-color-blue);
    cursor: pointer;
}

.invisible {
    display: none;
}

.autoEmailSelect {
    display: flex;
}

.autoEmailSelect label {
    margin-left: 10px;
}

.autoEmailBody {
    height: unset;
}

/* Events/view.php */

.editEventBttn {
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 1.1rem;
    background-color: var(--grpumps-color-blue);
}

.editEventBttn:hover {
    color: white;
}

.basicEventInfo {
    display: grid;
    grid-template-columns: 48% 48%;
    row-gap: 10px;
    column-gap: 4%;
    width: 60%;
}

.basicEventInfo textarea {
    color: #606c76;
    font-family: 'Play';
}

.daysLeft {
    margin-top: 20px
}

.addApplicantBttn {
    margin-top: 40px;
    margin-bottom: 20px;
    display: flex;
    justify-content: end;
}

.addApplicantBttn a span {
    border-radius: 15px;
    padding: 10px;
    background-color: var(--grpumps-color-blue);
}

.addApplicantBttn a {
    color: white;
    text-decoration: none;
}

.applicantPaginator {
    margin-bottom: 100px;
}

.applyLinkButton {
    border-radius:10px;
    color:white;
    background-color:#606c76;
    padding:5px;
    cursor: pointer
}

.applyLinkButton img {
    margin-left: 10px
}

.linkOutline {
    display: grid;
    grid-template-columns: 45% 45%;
    gap: 10%;
}

.linkBox {
    margin-top: 20px;
    border: 1px solid black;
    padding: 0px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.linkBox div {
    margin-bottom: 20px;
}

.linkBttnBar span:first-child {
    margin-right: 10px;
}

.actualLink {
     display: none;
}

/* EventPages */

.eventPagesTextarea {
    min-height: 20rem;
}

/* EventPages/index */

.moveBar {
    display: flex;
    justify-content: flex-start;
    width: 80%;
}

.moveBar select {
    margin-right: 5px;
}

.moveBar input {
    border: 1px solid black;
    color: black;
    background-color: lightgrey;
}

/* EventPages/view */

.topBar {
    margin: 10px 10px 50px 10px;
    display: flex;
    justify-content: space-between;
}

.topBar a span {
    border: 1px solid grey;
    border-radius: 5px;
    padding: 5px;
}

.topBar a span:hover {
    color: white;
    background-color: grey;
}

/* EventPages/edit */

.qrCodeImg {
    max-width: 50%;
    max-height: 100px;
}

.editInputEl {
    margin-bottom: 1.5rem;
}

.fileList {
    display: block;
}

.fileListRow {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 60% 30%;
    gap: 10%;
}

.fileListRow > div:first-of-type {
    white-space: nowrap;
    overflow-x: hidden;
}

.fileRowButton {
    text-align: center;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.fileRowButton a {
    color: white;
}

.fileRowButton.copy {
    background-color: grey;
}

.fileRowButton.copy {
    background-color: grey;
}

.fileRowButton.edit {
    background-color: var(--grpumps-color-blue);
}

.addFileRow {
    margin-top: 30px;
    text-align: right;
}

/* Forecast/index */

.forecastTitle {
    display: grid;
    grid-template-columns: 60% 40%;
    padding: 0px 2% 0px 20%;
    color: white;
    background: linear-gradient(
        90deg,
        var(--grpumps-color-red),
        var(--grpumps-color-red) 15%,
        var(--grpumps-color-blue) 15%,
        var(--grpumps-color-blue) 100%
    );
    height: 16vh;
}

.forecastTitle > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.forecastInfo h3 {
    margin-bottom: 0;
    font-family: 'Oswald', sans-serif;
    color: white;
}

.selectorInput {
    border: 1px solid grey;
    padding-left: 10px;
    color: grey;
    font-style: italic;
    cursor: pointer;
}

#forecastSelectorDropdown {
    display: none;
    position: absolute;
    z-index: 2;
    background-color: white;
}

.selectorDropdown {
    border: 1px solid grey;
    padding-left: 10px;
}

.resultEl table thead tr th {
    color: white;
    background-color: var(--grpumps-color-black);
}

.marketEl {
    display: none;
}

.resultMenu {
    margin-top: 50px;
    margin-bottom: 35px;
    display: grid;
    grid-template-columns: 25% 25% 50%;
}

.selectedMarketBox {
    margin-left: 50%;
    display: grid;
    grid-template-columns: 50% 50%;
}

.selectedResult {
    padding: 3px;
    text-align: center;
}

.marketOption {
    padding-left: 5px;
    text-align: left;
}

.marketDropDownBttn {
    padding: 3px;
    border: 1px solid #606c76;
    cursor: pointer;
}

.marketDropDownBox {
    display: none;
    border: 1px solid #606c76;
    background-color: white;
    position: absolute;
    overflow-y: scroll;
    height: 200px;
}

.filterSelect span {
    cursor: pointer;
    border-color: #606c76;
    border-radius: 10px;
    padding: 5px;
}

.filterSelect span:hover {
    text-decoration: underline;
}

.districtSelect {
    border: 1px solid black;
}

.oneMarket {
    margin: 70px 0 30px 0;
    color: white;
    text-align: center;
    background-color: var(--grpumps-color-red);
}

.classRow .title {
    color: var(--grpumps-color-blue);
    cursor: pointer;
}

.classRow .title:hover {
    text-decoration: underline;
}

.allClassBttn {
    display: none;
    cursor: pointer;
}

.genericReturnBttn::before {
    content: '\00AB';
}

.allClassBttn:hover {
    text-decoration: underline;
}

.districtRow {
    display: none;
}

.searchBttn {
    text-decoration: underline;
    cursor: pointer;
}

.searchBox {
    display: none;
}

.totals > td {
    background-color: rgba(100,100,100,0.3);
}

.historyBttn {
    margin-top: 50px;
}

/* Forecasts/view.php */
.headerCell {
    white-space: wrap;
    text-align: right;
}

.headerCell div {
    text-align: center;
}

.headerCell input {
    text-align: right;
}

td:first-child.districtNameCell {
    padding-left: 50px;
    font-size: 0.8em;
}

input.readOnly {
    background-color: lightgrey;
    color: grey;
    display: none;
}

.commentSubmit {
    border: 1px solid white !important;
    background-color: var(--grpumps-color-red) !important;
}

.centerUnlock {
    margin: 15px 0;
    text-align: center;
}

.unlockOpen {
    margin: 20px 0;
}

.unlockOpen span {
    text-decoration: underline;
    cursor: pointer;
}

.unlockBttnEl {
    margin-top: 40px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    color: white;
}

.unlockBttn {
    border-radius: 10px;
    padding: 10px;
    color: white;
    background-color: var(--grpumps-color-red);
}

/* Forecasts/edit.php */

.editingBttnsEl {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
}

.editingBttnsEl .leftEdit {
    display: flex;
}

.editingBttnsEl div:nth-child(1) button {
    margin-right: 20px;
}

.submitBttnOverlay {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(0,0,0,0.3);
    width: 100vw;
    height: 100vh;
}

.submitBttnWindow {
    padding: 10px;
    display: none;
    background-color: #fff;
    /* height: 40vh; */
    width: 50vw;
    max-width: 500px;
    /* max-height: 300px; */
}

.returnBttnWindow {
    padding: 10px;
    display: none;
    background-color: #fff;
    /* height: 40vh; */
    width: 50vw;
    max-width: 500px;
    /* max-height: 300px; */
}

.exitBar {
    display: flex;
    justify-content: right;
}

.exitBar span {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: var(--grpumps-color-red);
    cursor: pointer;
    height: 20px;
    width: 20px;
}

.commentExplained {
    margin-left: 15%;
    margin-bottom: 20px;
    width: 70%;
}

.submitBttn {
    background-color: var(--grpumps-color-red);
    border: 0.1rem solid var(--grpumps-color-red);
    border-radius: 0.4rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    height: 3.8rem;
    letter-spacing: 0.1rem;
    margin-bottom: 1.0rem;
    padding: 0 3.0rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

/* Forecasts/add */

.generateInfo {
    margin-bottom: 50px;
    display: grid;
    grid-template-columns: 45% 45%;
    gap: 10%;
}

.generateBttnRow {
    display: flex;
    justify-content: space-between;
}

/* Forecasts/overall.php */

.backlogCell span {
    width: 10%;
}

.backlogCell input {
    width: 90%;
}

/* Users/index.php */

.assignMgrBttns {
    border: 1px dashed rgba(100,100,100,0.5);
    padding: 5px 10px;
    display: grid;
    grid-template-columns: 50% 50%;
}

.assignMgrBttns div {
    padding: 10px;
    display: flex;
    justify-content: left;
}

.oneAssignBttn {
    margin-right: 15px;
    margin-bottom: 0;
    padding: 10px !important;
    border: none !important;
    line-height: 0 !important;
    font-size: 1rem;
    background-color: #0d6efd !important;
}

.isAssigned {
    background-color: lightgreen;
}

/* Users */

.userIndex {
    padding: 20px;
}

.usersContent {
    display: grid;
    grid-template-columns: 20% 80%;
}

.userSideBar {
    padding: 20px 0 0 10%;
    color: white;
    background-color: var(--grpumps-color-blue);
}

.userSideBar > h4 {
    color: white;
}

.userSideBar > a {
    color: white;
    transition: none;
}

.userSideBar > a:hover {
    color: white;
    text-decoration: underline;
}

.userFilter {
    margin: 40px 0 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: flex-end;
    color: var(--grpumps-color-blue);
}

.noWhiteSpace {
    /* LEAVE THIS CLASS ALONE! IT IS FOR JAVASCRIPT! */
}

/* TDH */

.locationGrid {
    display: grid;
    grid-template-columns: 48% 20% 30%;
    gap: 0 1%;
}

.showAddFitting {
    margin-top: 20px;
}

.showAddFitting span {
    text-decoration: underline;
    color: var(--grpumps-color-blue);
    cursor: pointer;
}

.addFittingBox {
    margin-top: 15px;
    display: none;
    grid-template-columns: 68% 28%;
    gap: 4%;
}

.addFittingBttn { 
    display: flex;
    justify-content: center;
    align-items: center;
}

.addFittingBttn span {
    border-radius: 25px;
    padding: 15px;
    color: white;
    background-color: var(--grpumps-color-darkblue);
}

.subContainer {
    padding: 10px;
    border-radius: 5px;
}

.subContainer.contactInfo {
    border: 1px solid var(--grpumps-color-lightblue);
}

.subContainer.applicationInfo {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--grpumps-color-black);
}

.subContainer.suction {
    border: 1px solid var(--grpumps-color-blue);
}

.subContainer.discharge {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--grpumps-color-red);
}

.tdhInputGrid {
    margin-bottom: 4%;
    display: grid;
    grid-template-columns: 48% 48%;
    gap: 0px 4%;
}

.tdhInputGrid div {
    border-radius: 5px;
    padding: 5px;
    /* background-color: rgba(0,0,0,0.1); */
}

.tdhInputGrid div div {
    background-color: rgba(0,0,0,0);
}

.tdhFrictionEl {
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 5px 10px 20px 10px;
    background-color: rgba(0,0,0,0.15);
}

input[type="number"].pipeLength {
    margin-left: 30%;
    width: 40%;
}

.pipeLengthLabel {
    text-align: center;
    margin-left: 30%;
    margin-top: 20px;
    width: 40%;
}

.staticNote {
    font-size: 1.2rem;
}

.allStraightPipes {
    display: grid;
    grid-template-columns: 70% 30%;
}

.oneStraightPipe {
    display: flex;
    justify-content: flex-start;
}

.oneStraightPipe input {
    margin-right: 5px;
    width: 50%;
}

.pipeBttn {
    margin-left: 20px;
}

/* .noFitting {
    display: none;
    font-style: italic;
} */

.fittingEl {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    column-gap: calc(4% / 3);
    grid-column-gap: calc(4% / 3);
    grid-template-columns: repeat(4,24%);
    row-gap: 5px;
    grid-row-gap: 0px;
    grid-template-areas: 
        "name name name input"
        "eqlength eqlength . button";
    margin-bottom: 20px;
    border: 1px solid grey;
    border-radius: 5px;
    padding: 5px;
}

.fittingSelectionEl {
    display: grid;
    grid-template-columns: 48% 48%;
    gap: 0 4%;
}

.fittingEl input {
    border: 1px solid black;
    background-color: white;
}

.fittingNumber {
    grid-area: input;
}

.fittingEqLength {
    font-size: 1.2rem;
    grid-area: eqlength;
}

.fittingBttns {
    grid-area: button;
    height: 25px;
    width: 25px;
    cursor: pointer;
}

.fittingName {
    grid-area: name;
}

.customFittingForm div input {
    border: 1px solid black;
    background-color: white;
}

.fittingDropdown {
    border: 1px solid black;
    min-height: 100px;
    overflow-y: scroll;
    max-height: 200px;
}

.fittingSearchEl {
    border-radius: 15px;
    padding: 20px;
    color: white;
    background-color: var(--grpumps-color-blue);
    width: 40%;
}

.fittingSearchEl input {
    background-color: white;
}

.fittingSearchTitle {
    font-family: "Raleway", sans-serif;
    text-align: center;
}

.dropdown {
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
}

.viewResultEl {
    display: grid;
    grid-template-columns: 40% 40% 20%;
}

.viewResultEl div {
    padding: 1.2rem 0;
}

.viewResultSubtitle {
    padding: 1.2rem 1.5rem;
    font-weight: bold;
    text-align: center;
    background-color: var(--grpumps-color-lightblue);
}

.viewResultEl > div {
    border-bottom: 2px solid rgba(0,0,0,0.3);
}

.viewResultEl > div:last-of-type {
    border-bottom: none;
}

.viewResultEl > div:nth-last-child(2) {
    border-bottom: none;
}

.viewResultEl > div:nth-last-child(3) {
    border-bottom: none;
}

.viewResultEl > ul {
    border-bottom: 2px solid rgba(0,0,0,0.3);
}

.resultName {
    font-weight: bold;
}

.resultList {
    margin: 0;
}

.resultList li {
    padding: 1.2rem 0;
}

.fittingList {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-column-start:2;
    grid-column-end:4;
}

.suctionHighlight {
    background-color: rgba(0,103,177,0.1);
    grid-template-areas:
        's-standard s-standard'
        's-stname s-stvalue'
        's-custom s-custom'
        's-cuname s-cuvalue';
}

.suctionHighlight > .standardGridTitle {
    grid-area: s-standard;
}

.suctionHighlight > .standardGridName {
    grid-area: s-stname;
}

.suctionHighlight > .standardGridValue {
    display: grid;
    grid-area:s-stvalue;
    grid-template-columns:1fr 1fr;
}

.suctionHighlight > .customGridTitle {
    grid-area: s-custom;
}

.suctionHighlight > .customGridName {
    grid-area: s-cuname;
}

.suctionHighlight > .customGridValue {
    display: grid;
    grid-area:s-cuvalue;
    grid-template-columns:1fr 1fr;
}

.dischargeHighlight {
    background-color: rgba(208,10,44,0.1);
    grid-template-areas:
        'd-standard d-standard'
        'd-stname d-stvalue'
        'd-custom d-custom'
        'd-cuname d-cuvalue';
}

.dischargeHighlight > .standardGridTitle {
    grid-area: d-standard;
}

.dischargeHighlight > .standardGridName {
    grid-area: d-stname;
}

.dischargeHighlight > .standardGridValue {
    display: grid;
    grid-area:d-stvalue;
    grid-template-columns:1fr 1fr;
}

.dischargeHighlight > .customGridTitle {
    grid-area: d-custom;
}

.dischargeHighlight > .customGridName {
    grid-area: d-cuname;
}

.dischargeHighlight > .customGridValue {
    display: grid;
    grid-area:d-cuvalue;
    grid-template-columns:1fr 1fr;
}

div.gridValue {
    padding-right: 5px;
    text-align: right;
}

.resultData {
    display: grid;
    grid-template-columns: 50% 50%;
}

.resultData div {
    padding: 0;
}

.resultData div:nth-of-type(odd) {
    padding-right: 5px;
    text-align: right;
}

.resultData div:nth-of-type(event) {
    text-align: left;
}

.fittingDataGrid {
    gap: 1.2rem 0;
}

.boldData {
    font-weight: bold;
}

.tdhTitle {
    padding: 20px 20px 20px 25%;
    color: white;
    background: linear-gradient(
        90deg,
        var(--grpumps-color-red),
        var(--grpumps-color-red) 20%,
        var(--grpumps-color-blue) 20%,
        var(--grpumps-color-blue) 100%
    );
    height: 16vh;
}

.tdhTitle h3 {
    margin-bottom: 0;
    color: white;
    font-family: 'Oswald', sans-serif;
}

.crudTitle {
    margin-bottom: 40px;
    font-size: 2.5rem;
    text-align: center;
}

.copyConfirmation {
    margin-bottom: 10px;
    text-align: center;
    color: var(--grpumps-color-blue);
    visibility: hidden;
    animation-name: none;
    animation-duration: 4s;
}

@keyframes copy-confirmation {
    0% {
        visibility: visible;
    }
    100% {
        visibility: hidden;
    }
}

.switchMeasureType {
    margin-bottom: 30px;
    display: flex;
    justify-content: flex-end;
}

.totalPipeLengthEl {
    /* display: none; */
}

/* .npshBttn {
    display: grid;
    grid-template-columns: 50% 50%;
    margin-bottom: 10px;
    color: var(--grpumps-color-blue);
    cursor: pointer;
} */

.npshEl {
    border: 1px solid black;
}

.npshRow {
    display: grid;
    grid-template-columns: 70% 30%;
}

.npshAltitudeRow {
    display: grid;
    grid-template-columns: 40% 30% 30%;
    grid-template-areas: 
        "altKey altKey altValue"
        "zipCodeKey . ." 
        "zipCodeValue . zipCodeNotice";
}

.npshAltKeyEl {
    grid-area: altKey;
}

.npshAltValueEl {
    grid-area: altValue;
}

.npshAltValueEl input {
    margin-bottom: 0px;
}

.npshZipCodeKeyEl {
    grid-area: zipCodeKey;
    font-size: 1.3rem;
    font-style: italic;
}

.npshZipCodeValueEl {
    grid-area: zipCodeValue;
    font-size: 1.2rem;
}

.zipCodeNotice {
    grid-area: zipCodeNotice;
    margin-bottom: 10px;
    text-align: center;
    color: var(--grpumps-color-red);
    visibility: hidden;
    animation-name: none;
    animation-duration: 4s;
}

@keyframes zip-code-notice {
    0% {
        visibility: visible;
    }
    100% {
        visibility: hidden;
    }
}

.npshClose {
    display: flex;
    justify-content: end;
}

.npshClose > span {
    cursor: pointer;
}

.calcResultsEl {
    padding-right: 20px;
    position: sticky;
    top: 2vh;
}

.calcResultsEl > label {
    font-size: 1.3rem;
    font-weight: 600;
}

.calcResultsEl > input {
    font-family: 'Play';
    background-color: white;
}

.calcResultsEl .forReadOnly {
    border: 1px solid white;
    color: white;
    background-color: var(--grpumps-color-blue);
    cursor: default;
}

.tdhCommentBox {
    margin-top: 50px;
}

.measurementButtonsEl {
    display: grid;
    grid-template-columns: 40% 40%;
    gap: 20%;
}

.measurementButtonsEl div {
    border: 1px solid #606c76;
    text-align: center;
}

.measurementTypeWindow {
    display: none;
    text-align: center;
    grid-template-areas: 
        'summary summary'
        'confirm cancel';
}

.measurementTypeWindow div:nth-of-type(1) {
    grid-area: summary;
}

.measurementTypeWindow div:nth-of-type(2) {
    grid-area: confirm;
}

.measurementTypeWindow div:nth-of-type(2) u {
    cursor: pointer;
}

.measurementTypeWindow div:nth-of-type(3) {
    grid-area: cancel;
}

.measurementTypeWindow div:nth-of-type(3) u {
    cursor: pointer;
}

.fuelingOther {
    display: none;
}

.transferOption {
    display: none;
}

.transferOptionFrom {
    display: none
}

.transferOptionTo {
    display: none;
}

.minAndMaxRow {
    display: grid;
    grid-template-columns: 48% 48%;
    gap: 0 4%;
    text-align: center;
}

/* COEFFICIENTS */

.coefficientFilter {
    margin-top: 50px;
    text-align: right;
}

.pastCoefficient {
    font-size: 0.8em;
    color: darkred;
}

.pastCoefficient td:nth-of-type(3) {
    color: rgba(0,0,0,0);
}

.tableBttnRow {
    display: flex;
    justify-content: space-between;
}

/* AI CONVERSATIONS */

.conversationContainer {
    height: 86vh;
}

.promptWindow {
    border-top: 1px solid lightgray;
    padding: 0vh 2rem;
    display: flex;
    flex-direction: column-reverse;
    height: 72vh;
    overflow-y: scroll;
}

.promptInputEl {
    margin: 1vh 2% 1vh 2%;
    display: grid;
    grid-template-columns: 84% 10%;
    gap: 2%;
    height: 12vh;
}

.promptInputEl input {
    margin: 0;
    text-align: left;
    color: #606c76;
}

.promptInputEl textarea.message {
    margin: 0;
    border: 1px solid #606c76;
    color: #606c76;
    text-align: left;
    background-color: white;
    height: 100%;
    min-height: 0;
}

.inaccessibleAgent {
    padding: 0 20%;
    font-style: italic;
    text-align: center;
    align-content: center;
}

.startPrompt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    color:#606c76;
    height: 3.8rem;
    cursor: none;
}

.conversationList {
    /* IMPORTANT: this is how it finds out where JS puts the new prompts */
}

.conversationRow {
    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    padding: 10px;
    display: grid;
    grid-template-columns: 10% calc(80% - 20px) 10%;
    grid-template-areas: 
        ". prompt prompt"
        "response response setting";
    gap: 10px;
}

.conversationRow > div {
    /* margin-bottom: 20px; */
    padding: 10px;
    border-width: 1px;
    border-style: solid;
    border-radius: 15px;
    white-space: pre-line;
}

.conversationRow > .prompt {
    /* margin-left: 30%; */
    border-color: var(--grpumps-color-red);
    grid-area: prompt;
}

.conversationRow > .response {
    border-color: var(--grpumps-color-blue);
    grid-area: response;
}

.conversationRow > .includeOrIgnore {
    border: none;
    display: flex;
    justify-content: flex-end;
    grid-area: setting;
}

/* @keyframes processing {
    0% {
        color: rgba(0,0,0,0);
    }
    50% {
        color: rgba(0,0,0,1);
    }
} */

@keyframes processing {
    0% {
        color: rgba(0,0,0,1);
    }
    50% {
        color: rgba(0,0,0,0.5);
    }
    100% {
        color: rgba(0,0,0,1);
    }
}

@keyframes processingWords {
    0% {
        content: "Receives prompt...";
    }
    20% {
        content: "Searches files...";
    }
    40% {
        content: "Analyzes data...";
    }
    80% {
        content: "Creates reply...";
    }
    100% {
        content: "Creates reply...";
    }
}

.inputProcessing::before {
    font-weight: bold;
    text-align: center;
    animation-name: processing, processingWords;
    animation-duration: 3s, 10s;
    animation-iteration-count: infinite, 1;
    animation-fill-mode: none, forwards;
    animation-timing-function: linear, steps(5);
    content: "Receives prompt...";
}

.includeOrIgnore span a img {
    height: 25px;
    width: 25px;
}

.addIntro {
    margin: 35px 5%;
    text-align: center;
    font-size: 3.5rem;
}

.suggestedQuestions {
    display: flex;
    justify-content: space-around;
}

.suggestedQuestions form {
    width: 30%;
}

.suggestedTitle {
    margin-bottom: 10px;
    text-align: center;
}

.suggestedQuestions form button {
    padding: 5px;
    border: 0.1rem solid #d1d1d1;
    color: #606c76;
    text-wrap: unset;
    text-align: left;
    line-height: 2rem;
    background-color: white;
    height: 100%;
    width: 100%;
}

.conversationInfo {
    margin-top:30px;
    margin-right: 10%;
    border-radius: 15px;
    padding: 10px;
    font-size: 1.5rem;
    background-color: var(--grpumps-color-darkblue);
}

.conversationInfo .infoEl div:first-child {
    margin-bottom: 5px;
    font-size: 1.3rem;
    text-align: center;
    text-decoration-line: underline;
}

.conversationInfo .infoEl:first-child {
    margin-bottom: 10px;
}

.conversationInfo .infoEl a span {
    color: white;
}

.versionsEl {
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    height: 6vh;
}

.version:hover {
    text-decoration-line: underline; 
}

.selectedVersion {
    padding: 0 10px;
    border: 1px solid var(--grpumps-color-blue);
    border-radius: 10px;
}

.versionRow {
    display: flex;
    justify-content: space-between;
}

.versionButton {
    display: flex;
    justify-content: end;
    margin-top: 25px;
    font-size: 1.1rem;
}

.versionButton span {
    cursor: pointer;
}

.versionContent {
    padding: 4px;
    border: 1px solid var(--grpumps-color-black);
    display: none;
    font-size: 1.4rem;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    width: 30vw;
    background-color: var(--grpumps-color-lightblue);
}

.fakeButton {
    display: none;
    background-image: url('layouts/loading-gif.gif');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.referenceRow {
    /* display: flex;
    justify-content: space-between; */
    margin-top: 20px;
    display: grid;
    grid-template-columns: 33% 34% 33%;
    grid-template-areas: 
        "time thumbs citations"
        ". comments comments";
    grid-gap: 10px 0;
}

.time {
    grid-area: time;
}

.thumbs {
    border-radius: 90px;
    grid-area: thumbs;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.thumbs span {
    border-radius: 5px;
}

.citations {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    grid-area: citations;
}

.onePromptComment {
    grid-area: comments;
    display: none;
}

.onePromptComment textarea {
    margin-bottom: 0px;
}

.onePromptComment div {
    display: flex;
    justify-content: flex-start;
}

.onePromptComment div span {
    padding: 5px;
    border: 1px solid var(--grpumps-color-darkblue);
    border-radius: 3px;
    cursor: pointer;
}

.onePromptComment div span:first-child {
    margin-right: 30px;
    color: white;
    background-color: var(--grpumps-color-darkblue);
}

.references {
    /* display: flex;
    justify-content: end;
    margin-top: 20px; */
    font-size: 0.9em;
}

.references span {
    cursor: pointer;
}

.references span a {
    text-decoration: underline !important;
}

.userSideBar > .returnConversation {
    display: block;
    margin-top: 30px;
}

.embeddingDeleteBttn {
    display: flex;
    justify-content: end;
}

.embeddingDeleteBttn a {
    display: inline;
    border: 1px solid var(--color-cakephp-red);
    border-radius: 5px;
    padding: 0 10px;
    color: var(--color-cakephp-red);
}

.embeddingSearch {
    display: grid;
    grid-template-columns: 50% 50%;
}

.allEmbeddingsLink {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.allEmbeddingsLink span {
    border: 1px dashed black;
    border-radius: 5px;
    padding: 10px;
}

.storageProcessing {
    margin: 20px 0 50px 0;
    font-size: 3rem;
    text-align: center;
}

.embeddingPie {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.outerPie {
    display: flex;
    align-items: center;
    justify-content: center;
    height:30vw;
    width:30vw;
    border-radius: 50%;
    max-height: 200px;
    max-width: 200px;
}

/* .pieText {
    display: flex;
    align-items: center;
} */

.lineOfTags span {
    padding-top: 5px;
    font-size: 13px;
    font-style: oblique;
}

.searchReset {
    text-align: right;
}

.searchReset a {
    color: white;
}

.viewGrid {
    display: grid;
    grid-template-columns: 40% 60%;
}

.viewGrid div {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid #808080;
}

.viewGrid div.header {
    font-weight: bold;
}

.embedEditText {
    height: 40vh;
}

.ratingCell {
    padding: 3px;
    border-radius: 5px;
}

.ratingUp {
    background-color: var(--grpumps-color-blue);
}

.ratingDown {
    background-color: var(--grpumps-color-red);
}

/* UPLOADS */

.uploadSubmitGrid {
    display: grid;
    grid-template-columns: 15% 85%;
    gap: 0%;
}

.uploadSubmitGrid span {
    margin-bottom: 1.0rem;
    padding: 0 3.0rem;
}

/* AGENTS */

.tagEl {
    margin-bottom: 3rem;
}

.tagList {
    display: flex;
    flex-wrap: wrap;
}

.tagList span {
    margin: 10px;
    border-radius: 15px;
    border: 1px solid black;
    padding: 5px 10px;
    color: black;
    cursor: pointer;
}

.userListForPersonalAgent {
    display: none;
    border: 2px solid black;
    border-radius: 10px;
    padding: 5px;
    background-color: white;
    position: fixed;
    top: 15vh;
    left: 0;
    z-index: 2;
    max-height: 70vh;
}

.userListClose {
    display: flex;
    justify-content: flex-end;
    height: 25px;
}

.userListClose span {
    cursor: pointer;
}

.userListScroll {
    max-height: calc(70vh - 10px - 25px); /* This is the parent element's max-height, minus its padding, minus the "close" sibling element */
    overflow-y: scroll;
}

.temperatureSlider {
    appearance: none;
    border-radius: 15px;
    /* background-color: #d3d3d396; */
}

.temperatureSlider.edit {
    background-color: var(--grpumps-color-lightblue);
} 

.temperatureSlider.view {
    background-color: var(--grpumps-color-blue);
} 

.personalBadge {
    border-radius: 15px;
    padding: 2px 10px;
    color: white;
    font-size: 0.7em;
    background-color: var(--grpumps-color-darkblue);
}

/* TAGS */

.viewTagGrid {
    margin-bottom: 30px;
}

.viewTagGrid div {
    border-bottom: none;
}

.linkToTags {
    margin: 20px 2%;
    text-align: right;
}

.viewGrid div div.linkToTags {
    border-bottom: none;
}

/* SCORECARDS */

.distributorList {
    border: 1px solid black;
    padding: 10px;
    overflow-y: scroll;
    max-height: 400px;
}

.distributorLabel {
    margin: 10px 0 0 0;
    padding: 0 10px;
}

.lightGrey {
    background-color: lightgrey;
}

.white {
    background-color: white;
}

.distributorBttn {
    cursor: pointer;
}

.branchList {
    padding: 10px 10px 20px 35px;
    display: none;
}

.branchList > .input {
    margin-bottom: 0;    
}

.scoreRow {
    display: grid;
    grid-template-columns: 70% 25%;
    gap: 5%;
}

.scoreRowTitle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
}

.scoreRowBttns {
    display: flex;
    justify-content: space-evenly;
}

.scoreRowColumns > div {
    margin-top: 40px;
    transform: rotate(-90deg);
    text-align: center;
    width: 40px;
}

.ratingBttn {
    font-size: 40px;
    cursor: pointer;
}

.actionRow {
    display: flex;
    justify-content: space-between;
}

.scoreViewGrid {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 75% 20%;
    gap: 5%;
}

/* BUDGET FORECAST */

.totalBudgetTable {
    display: flex;
    border: 1px solid lightgrey;
}

.leftBudgetTable table {
    background-color: lightgrey;
}

.rightBudgetTable {
    overflow-x: scroll;
}

.rightBudgetTable > table {
    margin-bottom: 0;
}

.rightBudgetTable table tbody tr td:first-child {
    padding-left: 1.5rem;
}

.monthRow {
    text-align: center;
}

/* MARKETS ADMIN */

.distSelectBttns {
    display: flex;
    justify-content: space-around;
}

.distSelectBttns > span {
    border: 1px solid var(--grpumps-color-darkblue);
    border-radius: 5px;
    padding: 0 5px;
    cursor: pointer;
}

.radioRow {
    display: grid;
    grid-template-columns: 35% 20% 20%;
}