.page-style {
    background: 
        linear-gradient(rgba(0, 47, 109, 0.8), rgba(0, 47, 109, 0.8)),
        url('images/page_image_for_overlay.jpg') center / cover no-repeat;
    background-color: #002F6D;
    margin: 0;
    background-attachment: fixed;
}

/* Main Sections styling and alignment */
.page-container {
  font-family: sans-serif;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
  font-family: 'Source Sans Pro';
}
header {
  grid-column: 1 / 4;
  grid-row: 1;
  text-align: center;
}
main {
  grid-column: 2;
  grid-row: 2;
  padding: 0 20px;
}

footer {
  grid-column: 2;
  grid-row: 3;
  text-align: center;
  padding: 0 20px;
}

/* adjust for other devices */
@media (max-width: 992px) {
  main {
    grid-column: 1 / 4;
  }
  footer {
    grid-column: 1 / 4;
  }
}
/**/

.page-title-area {
    text-align: center;
}

.svg-inline--fa {
    color: #1774b7;
}

.page-top-header {
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    align-self: stretch;
    background: var(--darker-blue, #002755);
}

.page-top-header-logo {
    width: 36.852px;
    height: 36.75px;
}

.page-top-header-name {
    width: 253.959px;
    height: 19.176px;
    background: url('images/ccc_wording.png');
}

/* Customize header font size */
h2 { font-size: 30px; margin-bottom: -15px; }
h3 { font-size: 25px; }
h4 { font-size: 18px; }
/**/

.page-title-contents {
    color: #FFF;
    line-height: normal;
}

.page-title-contents > i {
    color: var(--gold, #FFB600);
}

.page-title-subheading {
    align-self: stretch;
    color: #FFF;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
}


/*** Search area for schools module styling */
.search-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    border-right: 1px;
}

.search-input {
    width: 100%;
    height: 50px;
    padding: 0 16px 0 44px;
    border: 1px solid #ccc;
    border-radius: 100px;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: 'Source Sans Pro';
}
/**/

.more-links-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
}

.input-group {
    display: flex;
    flex-direction: row;
}

.addon-section {
    border: 1px solid #ccc;
    border-radius: 100px 0 0 100px;
    border-right: 0;
    padding: 6px 12px;
}

.form-control {
    padding: 6px 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.input-group-addon, .input-group-btn {
    width: 100%;
    white-space: nowrap;
    vertical-align: middle;
}

.input-group > input { 
    border-radius: 0 100px 100px 0;
    height: 50px;
    border-left: 1px solid #ccc;
    font-size: 16px;
    margin-bottom: 10px;
}

input::placeholder {
    color: #ccc;
}

.align-icon {
  padding-top: 7px;
}

.page-form-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.page-form-box {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    border-radius: 8px;
    background: var(--white, #FFF);
    padding: 20px;
}

.form-area-progress-space {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

/**** Node styles ***/
.form-area-node-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 10px;
}

.form-area-node {
    display: flex;    
    padding: 15px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1/1;
    border-radius: 100px;
}

.form-area-node-large {
    font-size: 24px;
}
.form-area-node-med {
    width: 30px;
    height: 30px;
    font-size: 16px;
}

.font-area-node-number {    
    text-align: center;
    font-variant-numeric: lining-nums proportional-nums;
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.node-number-on {
    color: #FFB600;
    font-weight: bold;
}
.node-number-off {
    color: #002F6D;
    font-weight: normal;
}
.node-number-apply-newccc {
    color: #006D31;
    font-weight: bold;
}
.node-number-apply-oldccc {
    color: #002A60;
    font-weight: bold;
}
.form-area-node-label {
    color: var(--dark-blue, #002F6D);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}
.node-background-on {
    background: #002F6D;
}
.node-background-off {
    background: #E6E9EF;
}
.node-background-newccc {
    background: #E1F0E8;
    border: 1px solid #B0D7C3;
}
.node-background-oldccc {
    background: #E2E7ED;
    border: 1px solid #C7D1DE;
}
.form-area-progress-space img {
    width: clamp(12px, 5vw, 90px);
    height: auto;
    flex-shrink: 0;
    display: flex;
    align-self: flex-start;         /* Anchor to top of flex container */
    margin-top: clamp(2px, 7.5vw, 20px); /* Push down slightly from top */
}
/**** Node styles - end ***/


.form-area-headline-area {
    display: flex;
    padding: 48px 24px 0 24px;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
}

.form-area-headline-title-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}
.form-area-headline-title {
    flex: 1 0 0;
    color: var(--dark-blue, #002F6D);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 20px;
}
.form-area-headline-desc-area {
    display: flex;
    padding-top: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}
.form-area-headline-desc {
    flex: 1 0 0;
    color: #555759;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
}

.input-group-area {
    display:block; 
    width:100%; 
    clear:both;
}

/**** Highlight box section styles - colors used separately ****/
.form-area-highlight-section {
    display: flex;
    padding: 16px;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 4px; 
    margin: 10px 0;  
    font-size: 14px; 
}
.highlight-blue {
    background: rgba(0, 102, 186, 0.15);
}
.highlight-yellow {
    background: #FFF7E3;
}
.highlight-orange {
    color: #FFB600;
}
.highlight-light-grey {
    background: #E5E9EF;
}
.highlight-blue-normal {
    color: #1774b7;
}
.highlight-blue-bold {
    color: #0e4165;
    font-weight: bold;
}
.highlight-yellow-bold {
    color: #D27F20;
    font-weight: bolder;
}
/**** Highlight box section styles - end ****/

.form-area-highlight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    align-self: stretch;
    margin: -5px 0 0 0;
}

.form-area-highlight-heading {    
    margin: 0;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.form-area-highlight-text {
    color: var(--dark-blue, #002F6D);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%
}

.form-area-highlight-section .glyphicon {
    font-size: 18px;       
    line-height: normal;        
    flex-shrink: 0;        
}
.glyphon-color-blue {
    color: var(--dark-blue, #002F6D);  
}
.glyphon-color-yellow {
    color: var(--dark-blue, #002F6D);  
}

/* button defs */ 
.button-group-area {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 20px 0;
}

.form-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(8px, 2vw, 15px);
    border-radius: 100px;
    font-size:16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.form-generic-button {
    flex: 0 0;
    background-color: #dddddd;
    color: #333333;
}
.form-generic-button:hover {
    background-color: #cccccc;
    color: #333333;
    text-decoration: underline;
}
.form-back-button {
    width: 100%;
    background-color: #dddddd;
    color: #333333;
}
.form-back-button:hover {
    background-color: #cccccc;
    color: #333333;
    text-decoration: underline;
}
.form-forward-button {
    flex: 0 0 calc(75% - 4px);
    background-color: #0066BA;
    color: #ffffff;
}
.form-forward-button:hover {
    background-color: #004d8a;
    color: #ffffff;
    text-decoration: underline;
}
.form-cccnew-button {
    background: #007934;
    color: #ffffff;
    width: 25%;
    padding:10px;   
}
.form-cccnew-button:hover {
    background: #01431e;
    color: #ffffff;
    text-decoration: underline;
} 
.form-cccold-button {
    background: #004d8a;
    color: #ffffff;
    width: 25%;
    padding:10px;   
}
.form-cccold-button:hover {
    background-color: #004d8a;
    color: #ffffff;
    text-decoration: underline;
}

.form-search-one-area {
    display: flex; 
    width: 100%;
}
.form-search-one-info {
    font-size: 14px; 
    font-weight: bold;
    flex: 1; 
    line-height: 1.4;
}
.form-search-one-info p {
    margin: 0px;
}
.form-search-one-apply-area {
    display: flex; 
    justify-content: left;
    align-items: center; 
    padding-right:150px;
    flex: 1;
}
.school-info-heading {
    font-size:16px; 
    font-weight:bolder;
    color: #004680;
}

.form-link-button {
    background: #0066BA;
    color: #ffffff;
    font-size:14px; 
    border-radius:100px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    text-align: center;
}
.form-link-button-small {
    padding: 4px 10px;
    font-size: 12px;
    color: #ffffff;
    margin: 3px 0;
}
.form-link-button-small:hover {
    background-color: #004d8a;
    color: #ffffff;
    text-decoration: underline;
}
.form-link-button-med {
    padding: 15px 15px; 
}
.form-link-button-med:hover {
    background-color: #004d8a;
    color: #ffffff;
    text-decoration: underline;
}

.apply-school-name {
    color: #0066BA;
    font-size: 16px;
    font-weight: bold;  
}

.page-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
}

.page-more-links-area {
    display: flex;
    height: 94px;
    padding-top: 16px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    align-self: stretch;
}

.page-more-links-box {
    display: flex;
    padding: 16px 24px;
    align-items: flex-start;
    align-self: stretch;
    background: #FFF7E3;
    border-radius: 8px;
}

.page-more-links-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    padding: 0 5px;
    flex: 1 0 0;
}

.page-more-links-title {
    color: var(--dark-blue, #002F6D);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-left: 5px;
}

.page-more-links-subheading {
    color: var(--medium-blue, #0066BA);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.page-more-links-title > a {
    text-decoration: none;
}
.page-more-links-title > a:hover {
    text-decoration: underline;
}
.page-more-links-title > a:focus {
    text-decoration: none;
}

.page-footer-help-area {
    display: flex;
    height: 189px;
    padding: 48px 0 80px 0;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    align-self: stretch;
}

.page-footer-help-heading {
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.page-footer-help-subheading {
    display: flex;
    flex-direction: row;
    gap: 20px;
    color: #fff;
    padding: 0 0 40px 0;
}

.page-footer-help-subheading a {
    color: #fff;
    text-decoration: none;
}
.page-footer-help-subheading a:hover {
    color: var(--gold, #FFB600);
    text-decoration: underline;
}
.page-footer-help-subheading a:focus {
    color: var(--gold, #FFFFFF);
    text-decoration: none;
}

.page-footer-help-subheading .glyphicon {
    color: var(--gold, #FFB600);
    gap: 5px;
}

.page-footer-credit {
    color: #FFF;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom:10px;
}

.page-form-searchbox-area {
    opacity: 1;
    gap: 14px;
    top: 100px;
}

/**** Search results styles ****/
.schools-dynamic-area {
    position: relative;
}
.input-box-spacer-top {
    height:10px; 
    position: relative; 
    clear:both;
}
#search-results-inner {
    overflow-x: auto;
    max-height: 600px;
    margin-bottom: 10px;
}
.search-results-item-area {
    align-items: center;
    margin-top: 5px;    
}
.search-results-item {
    display: flex;
    gap: 25px;
    padding: 10px;
    background-color: #EAEAEA;
    margin: 5px 0;
    font-size: 14px;
    border-radius: 15px;
}
.search-results-item-info {
    display: flex;
    flex-direction: row;
    word-break: break-word;
}
/**** Search results styles - end ****/

/**** Selected Schools styles in "SELECTED COLLEGES" area 
from checkboxes | apply ****/
.school-select-area {
    display:inline; 
    gap: 5px; 
}
.school-select-button {
    flex: 1 1 auto; 
    width:fit-content;
    padding: 5px 10px;
    border-radius: 100px;
    background: #D2E5F3;
    margin: 5px 5px 5px 0;
    box-shadow: 0 2px 6px rgba(148, 146, 146, 0.2);
    float: left;
}
.selected-name {
    text-align: center;
    color: #194677;
    font-size: 14px;
    white-space: nowrap;
    line-height: 1;
}
.remove-btn {
    border:none; 
    background-color: #D2E5F3;
    color: #6691c6;
    font-weight: bold;
}

/**** Apply section for results of selected schools ****/
.apply-container {
    margin: 20px 0;
}

.apply-container-area {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    margin: 3px 0;
}

.nodearea {
    flex: 0 0 8%;
    width: 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    box-sizing: border-box;
}
.node-arrow-down {
    flex: 1;
    width: 12px;
    margin: 6px 0 0 0;
    background-image: url(images/arrow_down.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.node-arrow-right img {
    width: 100%;
    height: auto;
    display: block;
    padding: 8px 5px 0 2px;
}

.applyinfo-block {
    flex: 0 0 92%;
    width: 92%;
    display: flex;
    flex-direction: column;
    padding: clamp(12px, 2vw, 24px);
    box-sizing: border-box;
    background: #ffffff;
}
.apply-info-box {
    opacity: 1;
    border-radius: 4px;
    border: 1px;
    border-style: solid;
    padding: 16px;
    width: 100%;
    margin-bottom:20px;
}
.apply-info-box-newccc {
    border-color: #C6E2D4;
}
.apply-info-box-oldccc {
    border-color: #DAE1E9;
}
.apply-info-heading {
    font-size: 18px;
    font-weight: bolder;
    line-height: .2;
}
.apply-info-college{
    font-size: 14px;
    font-weight: 400;
}
.apply-info-text-newccc {
    color: #006D31;
}
.apply-info-text-oldccc {
    color: #002A60;
}
/**** Apply section for results of selected schools - end ****/

.faq-section {
    margin: 20px 0 40px 0;
}
.faq-label {
    color: #002F6D;
    text-align: left;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}
.faq-heading {
    font-size: 16px;
    font-weight: bolder;
    cursor: pointer;
}
.faq-heading:hover {
    color: #014eb3;
    text-decoration: underline;
}

.faq-content {
    font-size: 16px;
    margin-bottom: 10px;
    background: #EEEEEE;
    border-radius:5px;
    padding: 10px;
}

.page-three-button-area {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    width: 100%;
    gap: 8px;
}

p {
    font-size: 16px;
}

/** Promise Grant Specific styles */
.p-bottom-border {
    border-bottom: 2px solid #EEE; 
    margin: 20px 0;
}

#pgcolleges {
    font-size: 16px;
}

#pgcolleges > tbody > tr > td {
    border-top:0;
}                                                            
 
.ca-grant-list-item {
    break-inside: avoid;    /* prevents an item from splitting across columns */
    padding: 2px;
    font-size: 16px;
}  

.ca-grant-list-container {
    display: flex;
    gap: 20px;
    align-items: flex-start; /* each column sizes to its own content */
    box-sizing: border-box;
    min-height: 150px; /* the "minimum" height requirement */
    margin-bottom:20px;
  }

  .ca-grant-list-column {
    flex: 1 1 0; /* two equal-width columns */
    /*display: flex;
    flex-direction: column;*/
    min-width: 0; /* prevents flex overflow issues with long content */
  }

  .ca-grant-list-column > ul {
    margin: 0;
    padding: 0;
  }

  .ca-grant-list-item {
    padding: 3px 0px;
    margin-bottom: 0px;
    box-sizing: border-box;
    list-style-type: none;
  }

  .ca-grant-list-item a {
    text-decoration: none;
  }
  .ca-grant-list-item a:hover {
    text-decoration: underline;
  }
  .ca-grant-list-item a:focus {
    text-decoration: none;
  }

/**/