/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 06 2026 | 19:03:49 */
/********** Main Styles **********/

body {
--lightRed: rgb(255, 250, 250);
--lightRed2: rgb(255, 238, 238);
--lightBlue2: rgb(230, 240, 250);
--mediumBlue: rgb(47, 117, 181);
--mediumBlue2: rgb(60, 110, 160);
--mediumBlue3: rgb(60, 100, 150);
--darkBlue2: rgb(60, 80, 80);
--darkGreen: rgb(40, 140, 140);
--darkGreen2: rgb(30, 100, 100);
--darkGreen3: rgb(24, 80, 80);
--lightGreen: rgb(223, 243, 245);
--lightGreen2: rgb(180, 200, 210);
--gray3: rgb(1, 1, 1);
}

#main-heading-wrapper {
width: 100%;
overflow: hidden;
}

#main-heading {
position: relative;
width: 100%;
/*margin-bottom: 40px;*/
display: flex;
justify-content: center;
left: 0;
opacity: 1;
}

#heading {
font-size: 30px;
line-height: 30px;
font-weight: bold;
color: var(--gray3);
text-align: center;
}

#screen-size-notice {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
text-align: justify;
padding: 0 6%;
height: 100px;
line-height: 28px;
font-size: 24px;
color: var(--gray3);
background-color: var(--lightRed2);
}

#configuration-notice {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 10px 20px;
line-height: 22px;
font-size: 18px;
color: var(--gray3);
background-color: var(--lightGreen);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

/********** Main Header Styles **********/

.rubrics-header {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
line-height: 20px;
background-color: var(--darkGreen);
color: var(--white);
font-size: 20px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid var(--white);
}

#rubrics-header-main {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
line-height: 60px;
background-color: var(--burgundy1);
color: var(--white);
font-size: 20px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid var(--white);
border-radius: 8px 8px 0 0;
}

#inst-info-header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 60px;
line-height: 20px;
background-color: var(--brandBlue);
color: var(--white);
font-size: 20px;
font-weight: bold;
text-align: center;
}

#review-of-inst-info-header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 60px;
line-height: 18px;
background-color: var(--brandBlue);
color: var(--white);
font-size: 18px;
font-weight: bold;
text-align: center;
border-top: 1px solid var(--white);
}

#sct-intro-header {
position: relative;
display: flex;
width: 100%;
background-color: var(--brandBlue);
}

/********** End of Main Header Styles **********/

/********** Institutional Info Styles **********/

.category {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
line-height: 20px;
background-color: var(--burgundy1);
color: var(--white);
font-size: 20px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid var(--white);
border-radius: 8px 8px 0 0;
}

.data-wrapper {
box-sizing: border-box;
height: 50px;
display: flex;
border-right: 1px solid var(--gray2);
border-left: 1px solid var(--gray2);
background-color: rgb(250, 250, 250);
border-bottom: 1px solid var(--gray2);
}

.data-type,
.data-type-bg {
box-sizing: border-box;
display: flex;
align-items: center;
flex-basis: 28%;
height: 50px;
line-height: 18px;
padding-left: 20px;
font-size: 18px;
font-weight: bold;
color: var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

.data-type-bg {
background-color: var(--lightBlue2);
}

.data,
.data-bg {
display: flex;
align-items: center;
flex-basis: 72%;
box-sizing: border-box;
height: 50px;
line-height: 18px;
padding: 18px 10px 14px 10px;
font-size: 18px;
font-weight: bold;
color: var(--gray2);
border-bottom: 1px solid var(--gray2);
}

.data-bg {
background-color: var(--lightBlue2);
}

#ddl {
border-bottom: 0;
}

.data-type.inst-characteristics {
border-right: 0;
}

.response-form {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 24px;
outline: 0;
border: 0;
}

#response-block {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
width: 20%;
padding: 22px 20px 18px 20px;
}

#yes-block,
#no-block {
position: relative;
display: flex;
}

#yes-block {
margin-right: 10px;
}

#yes-box-label,
#no-box-label {
position: relative;
font-size: 16px;
line-height: 24px;
font-weight: bold;
color: var(--white);
}

#yes-box,
#no-box {
width: 24px;
height: 24px;
margin-right: 10px;
accent-color: var(--white);
outline: 0;
border: 0;
cursor: pointer;
}

#write-innerhtml-wrapper {
display: flex;
width: 100%;
height: 0;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--white);
background-color: var(--mediumBlue);
transition: height 0.5s ease;
}

#write-innerhtml-block {
opacity: 1;
transition: opacity 0.2s ease;
}

#first-header-row-wrapper {
position: relative;
width: 100%;
height: 60px;
background-color: var(--mediumBlue);
border-top: 1px solid var(--white);
}

#first-header-row {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
line-height: 18px;
opacity: 1;
font-size: 18px;
font-weight: bold;
color: var(--white);
transition: opacity 0.2s ease;
}

/********** Inst Charecteristics Styles **********/

.inst-char-data-wrapper {
/*width: 100%;*/
box-sizing: border-box;
height: 50px;
display: flex;
background-color: var(--white);
border-bottom: 1px solid var(--gray2);
}

#inst-characteristics-wrapper {
position: relative;
box-sizing: border-box;
/*width: 100%;*/
display: block;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

.inst-characteristic {
box-sizing: border-box;
display: flex;
flex-basis: 25%;
height: 50px;
line-height: 50px;
padding-left: 20px;
font-size: 18px;
font-weight: bold;
color: var(--gray2);
border-right: 1px solid var(--gray2);
}

.ddl-characteristic {
box-sizing: border-box;
display: flex;
align-items: center;
flex-basis: 25%;
height: 50px;
padding-left: 20px;
font-size: 18px;
font-weight: bold;
color: var(--gray2);
border-right: 1px solid var(--gray2);
}

#inst-empty-block {
box-sizing: border-box;
width: 100px;
border-bottom: 1px solid var(--gray2);
}

/********** End of Inst Charecteristics Styles **********/

/********** Inst Wrapper and Container Styles **********/

#dos-wrapper {
box-sizing: border-box;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

#toi-wrapper,
#ddl-wrapper,
#es-wrapper,
#eo-wrapper,
#pr-wrapper {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
}

#toi-wrapper {
background-color: var(--lightBlue2);
}

#ddl-wrapper {
background-color: var(--lightBlue2);
}

#es-wrapper {
background-color: var(--white);
}

#eo-wrapper {
background-color: var(--lightBlue2);
}

#pr-wrapper {
background-color: var(--white);
}

#toi-details-wrapper,
#ddl-details-wrapper,
#es-details-wrapper,
#eo-details-wrapper,
#pr-details-wrapper {
position: relative;
box-sizing: border-box;
width: 100%;
height: 0px;
overflow: hidden;
transition: height 0.5s ease;
}

#toi-details-container,
#ddl-details-container,
#ug-grad-programs-container,
#es-details-container,
#eo-details-container,
#pr-details-container,
#eo-container {
position: relative;
box-sizing: border-box;
width: 100%;
}

/********** End of Inst Wrapper and Container Styles **********/

/********** DDL Programs Styles **********/

#programs-wrapper {
position: relative;
box-sizing: border-box;
width: 100%;
}

#programs-container {
position: relative;
box-sizing: border-box;
width: 100%;
}

.programs-row {
position: relative;
box-sizing: border-box;
flex-basis: 100%;
display: flex;
align-items: center;
height: 50px;
background-color: var(--lightBlue2);
}

.programs-block {
box-sizing: border-box;
display: flex;
flex-basis: 28%;
height: 50px;
padding-left: 20px;
font-size: 18px;
border-right: 1px solid var(--gray2);
}

.programs-heading-container {
position: relative;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
background-color: var(--lightBlue2);
}

.programs-heading {
box-sizing: border-box;
height: 50px;
display: flex;
align-items: center;
flex-basis: 72%;
padding-left: 10px;
font-size: 16px;
font-weight: bold;
color: var(--brandBlue);
text-decoration: underline;
}

#sc-programs-block,
#bacc-programs-block,
#masters-programs-block,
#doctoral-programs-block,
#no-ug-programs-block,
#no-grad-programs-block {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: left;
flex-basis: 72%;
height: 50px;
padding-left: 5px;
}

.left-empty-cell {
box-sizing: border-box;
display: flex;
align-items: center;
flex-basis: 28%;
height: 50px;
padding-left: 20px;
font-size: 18px;
font-weight: bold;
color: var(--gray2);
border-right: 1px solid var(--gray2);
}

.right-empty-cell {
box-sizing: border-box;
width: 100px;
height: 50px;
}

/********** End of DDL Programs Styles **********/

/********** Inst Info Checkbox Styles **********/

.inst-response-block {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
flex-basis: 72%;
border-bottom: 1px solid var(--gray2);
}

.inst-response-form {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
flex-basis: 100%;
height: 22px;
outline: 0;
border: 0;
}

.inst-checkbox-wrapper {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: left;
width: 100%;
height: 50px;
padding-left: 5px;
}

#ddl-checkbox-wrapper {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: left;
height: 50px;
}

#ddl-response-block {
box-sizing: border-box;
display: flex;
flex-basis: 72%;
padding-left: 5px;
}

#esc-response-form,
#psc-response-form,
#ebacc-response-form, 
#pbacc-response-form,
#emasters-response-form,
#pmasters-response-form,
#edoctoral-response-form,
#pdoctoral-response-form,
#no-ug-response-form,
#no-grad-response-form {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: left;
width: auto;
height: 22px;
outline: 0;
border: 0;
}

#esc-response-form,
#ebacc-response-form,
#emasters-response-form,
#edoctoral-response-form {
box-sizing: border-box;
padding-right: 10px;
}

#esc-response-form {
padding-right: 27px;
}

.inst-checkbox-block {
margin-right: 20px;
}

#public-block {
margin-right: 119.2333px;
}

#ug-block {
margin-right: 20px;
}

#grad-block {
margin-right: 20px;
}

#ug-grad-block {
margin-right: 0;
}

#small-block {
margin-right: 124.2333px;
}

#medium-block {
margin-right: 77.516px;
}

#large-block {
margin-right: 0px;
}

#to-block {
margin-right: 33.6167px;
}

#ro-block {
margin-right: 0px;
}

#bs-block {
margin-right: 71.6997px;
}

#ls-block {
margin-right: 0;
}

.inst-checkbox {
box-sizing: border-box;
width: 22px;
height: 22px;
margin-right: 5px;
accent-color: var(--brandBlue);
outline: 0;
border: 0;
cursor: pointer;
}

.inst-checkbox-label {
position: relative;
font-size: 15px;
font-weight: bold;
color: var(--gray3);
}

/********** End of Inst Info Checkbox Styles **********/

/********** End of Institutional Info Styles **********/

/********** Review of Inst Info Styles **********/

.intro-wrapper {
width: 100%;
display: flex;
}

#inst-info-intro-wrapper {
box-sizing: border-box;
width: 100%;
border-top: 1px solid var(--white);
height: 0;
transition: height 0.6s ease;
}

#inst-info-intro-container {
box-sizing: border-box;
display: flex;
align-items: center;
flex-basis: 100%;
line-height: 22px;
padding: 10px 20px;
width: 100%;
font-size: 16px;
color: var(--white);
}

#inst-info-intro {
box-sizing: border-box;
display: flex;
align-items: center;
flex-basis: 100%;
max-width: 1178px;
text-align: justify;
line-height: 22px;
font-size: 16px;
color: var(--white);
}

#inst-info-missing-data-wrapper {
position: relative;
box-sizing: border-box;
padding: 0 20px 0 20px;
width: 100%;
height: 0;
background-color: var(--lightBlue2);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
transition: height 0.5s ease;
}

#inst-info-discrepancies-box {
position: relative;
line-height: 22px;
padding: 0 0 10px 3px;
font-size: 16px;
color: var(--gray3);
}

/********** End of Review of Inst Info Styles **********/

#inst-info-intro-wrapper,
#ue-intro-wrapper,
#notifications-intro-wrapper {
box-sizing: border-box;
border-top: 1px solid var(--white);
}

#inst-info-intro-wrapper,
#ue-intro-wrapper,
#notifications-intro-wrapper {
height: 0;
transition: height 0.6s ease;
}

#notifications-intro-wrapper {
height: 0;
line-height: 22px;
font-size: 16px;
color: var(--white);
}

#notifications-intro-container {
padding: 10px 20px;
line-height: 22px;
font-size: 16px;
color: var(--white);
}

#inst-info-intro-container,
#r1-scoring-intro-1,
#r1-scoring-intro-2,
#r2-scoring-intro-1,
#r2-scoring-intro-2,
#ue-scoring-intro-1,
#ue-scoring-intro-2 {
box-sizing: border-box;
display: flex;
align-items: center;
flex-basis: 100%;
line-height: 22px;
padding: 10px 20px;
font-size: 16px;
color: var(--white);
}

#r1-intro-container-1,
#r1-intro-container-2, 
#r2-intro-container-1,
#metric-3-intro-container {
padding: 10px 20px;
}

#r1-scoring-intro-1,
#r1-scoring-intro-2,
#r2-scoring-intro-1,
#r2-scoring-intro-2 {
padding: 0;
}

#ue-scoring-intro-1 {
height: 0;
padding: 0 20px;
background-color: var(--darkBlue);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
transition: height 0.5s ease;
}

.intro-wrapper.blue {
background-color: var(--brandBlue);
}

.intro-wrapper.green {
box-sizing: border-box;
color: var(--white);
background-color: var(--darkGreen);
border-bottom: 1px solid var(--white);
}

.intro-wrapper.dark-blue {
display: flex;
align-items: center;
box-sizing: border-box;
background-color: var(--darkBlue);
transition: height 0.3s ease;
}

.intro-wrapper.medium-blue {
background-color: var(--mediumBlue3);
}

.intro-wrapper.white {
box-sizing: border-box;
color: var(--gray3);
background-color: var(--white);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

#comments-intro-wrapper {
width: 100%;
}

#comments-intro-box {
box-sizing: border-box;
display: flex;
align-items: center;
flex-basis: 100%;
line-height: 22px;
padding: 10px 20px;
font-size: 16px;
color: var(--white);
display: flex;
max-width: 1178px;
text-align: justify;
}

#comments-block {
padding: 0 10px;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

#sct-intro {
box-sizing: border-box;
display: flex;
align-items: center;
flex-basis: 100%;
line-height: 22px;
padding: 10px 20px;
font-size: 18px;
color: var(--white);
}

#scoring-intro {
box-sizing: border-box;
display: flex;
align-items: center;
flex-basis: 100%;
line-height: 22px;
font-size: 16px;
color: var(--white);
}

#inst-info-intro,
#r1-intro-1,
#r1-intro-2,
#r2-intro-1,
#r2-intro-2,
#ue-intro-1 {
box-sizing: border-box;
display: flex;
align-items: center;
flex-basis: 100%;
line-height: 22px;
font-size: 16px;
color: var(--white);
}

#inst-info-intro,
#r1-intro-1,
#r1-intro-2,
#r1-intro-metric-1-block,
#r2-intro-1,
#r2-intro-2,
#r1-intro-metric-2,
#r2-intro-metric-2-block,
#metric-3-intro,
#ue-intro-1,
#ue-intro-2,
#notifications-intro {
display: flex;
max-width: 1178px;
text-align: justify;
color: var(--white);
}

#ue-intro-1 {
height: 0;
padding: 10px 20px;
transition: height 0.5s ease;
}

#ue-intro-2 {
padding: 10px 20px;
font-size: 16px;
line-height: 22px;
}

#ue-intro-1-wrapper,
#ue-intro-2-wrapper,
#ue-intro-wrapper-2 {
position: relative;
width: 100%;
background-color: var(--darkBlue);
/*border-top: 1px solid var(--white);*/
}

#ue-intro-1-container,
#ue-intro-2-container {
display: flex;
flex-basis: 100%;
}

#r1-intro-wrapper-1,
#r1-intro-wrapper-2,
#r2-intro-wrapper-1,
#r2-intro-wrapper-2 {
box-sizing: border-box;
display: flex;
align-items: center;
width: 100%;
height: 0;
font-size: 16px;
color: var(--white);
transition: height 0.3s ease;
}

#r1-intro-metric-1,
#r2-intro-metric-2 {
position: relative;
width: 100%;
line-height: 22px;
padding: 10px 20px;
font-size: 16px;
color: var(--white);
}

#r3-intro-metric-3 {
height: 0;
border-top: 1px solid var(--white);
transition: height 0.3s ease;
}

#scoring-intro-2 {
box-sizing: border-box;
display: flex;
align-items: center;
flex-basis: 100%;
line-height: 22px;
font-size: 16px;
color: var(--white);
}

/********** End of Scoring Intro Styles **********/

/********** Missing Data / Credibility Styles **********/

.scoring-intro-2 {
position: relative;
width: 100%;
line-height: 22px;
color: var(--white);
}

.missing-data-heading,
.data-credibility-heading {
position: relative;
box-sizing: border-box;
padding: 10px 20px;
font-size: 16px;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

.missing-data-heading.green {
background-color: var(--lightGreen);
}

.missing-data-heading.blue{
background-color: var(--lightBlue2);
}

.data-credibility-heading.blue {
background-color: var(--lightBlue2);
}

#comments-heading {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 10px 20px;
font-size: 16px;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
background-color: var(--lightGreen);
}

.missing-data-wrapper,
.data-credibility-wrapper,
.comments-wrapper {
position: relative;
overflow: hidden;
transition: height 0.5s ease;
}

#inst-info-missing-data-wrapper,
#r1-missing-data-wrapper,
#r2-missing-data-wrapper,
.comments-wrapper {
position: relative;
width: 100%;
background-color: var(--lightBlue2);
height: 0;
transition: height 0.5s ease;
}

#ue-missing-data-wrapper {
position: relative;
padding: 0 10px;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
background-color: var(--lightBlue2);
height: 0;
transition: height 0.5s ease;
}

.r2-missing-data-container,
.comments-container {
position: relative;
width: 100%;
}

#r1-intro-wrapper-2,
#r2-intro-wrapper-2,
#ue-intro-wrapper-2,
#ue-missing-data-wrapper {
overflow: hidden;
transition: height 0.5s ease;
}

#roii-discrepancies-box,
#r1-discrepancies-box,
#ue-discrepancies-box {
position: relative;
line-height: 22px;
padding: 0 0 0 3px;
font-size: 16px;
color: var(--gray3);
}

#r1-intro-container-2,
#r2-intro-container-2,
#ue-intro-container-2 {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
width: 100%;
line-height: 20px;
}

#r1-intro-container-2,
#r2-intro-container-2,
#ue-intro-container-2 {
box-sizing: border-box;
width: 100%;
}

#r2-intro-container-2 {
padding: 10px 20px;
}

#r1-data-credibility-wrapper,
#r2-data-credibility-wrapper,
#ue-data-credibility-wrapper {
width: 100%;
height: 0;
}

#ue-data-credibility-container {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
}

#inst-info-missing-data-wrapper,
#r1-missing-data-wrapper,
#r1-supplemental-data-block,
#r2-missing-data-wrapper,
#r2-supplemental-data-block,
#ue-missing-data,
#notifications-missing-data-wrapper {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0 20px 0 20px;
background-color: var(--lightBlue2);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

#inst-info-missing-data-wrapper,
#r1-missing-data-wrapper,
#r1-supplemental-data-block,
#r2-missing-data-wrapper,
#r2-supplemental-data-block,
#ue-data-credibility-block {
width: 100%;
padding: 0 10px;
background-color: var(--lightBlue2);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

#notifications-missing-data {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0 20px;
background-color: var(--lightBlue2);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

#r1-missing-data,
#ue-missing-data {
box-sizing: border-box;
position: relative;
padding: 10px 20px 0 20px;
background-color: var(--lightBlue2);
transition: height 0.5s ease;
}

#r2-missing-data {
padding: 0;
}

.content-editable {
position: relative;
box-sizing: border-box;
width: 100%;
height: 210px;
padding: 10px 20px;
color: var(--gray3);
font-size: 16px;
background-color: var(--lightBlue2);
border-top: 1px solid var(--gray3);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
overflow-y: auto;
scrollbar-color: var(--brandBlue) var(--gray5);
}

/********** End of Missing Data / Credibility Styles **********/

/********** Wrapper and Container Styles **********/

#main-rubric-wrapper,
#metrics-marks-wrapper,
#inst-info-wrapper,
#rubric-1-wrapper,
#rubric-2-wrapper,
#rubric-3-wrapper,
#score-sheet-wrapper,
#uploaded-evidence-wrapper,
#notifications-wrapper {
position: relative;
height: 0px;
overflow: hidden;
transition: height 0.5s ease;
}

#r1-scoring-rubric,
#r2-scoring-rubric,
#r3-scoring-rubric {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 60px;
font-size: 16px;
font-weight: bold;
color: var(--gray3);
border-top: 1px solid var(--gray2);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
background-color: var(--lightRed);
}

#notifications-row-wrapper {
position: relative;
height: 0;
overflow: hidden;
border-top: 1px solid var(--gray2);
background-color: var(--lightRed2);
transition: height 0.3s ease;
}

#notifications-row-container {
position: relative;
width: 100%;
}

#notifications-row-block {
position: relative;
box-sizing: border-box;
padding: 20px;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

#notifications-row {
position: relative;
width: 100%;
font-size: 16px;
color: var(--gray3);
text-align: left;
}

#main-rubric-wrapper {
transition: height 1s ease;
}

#main-rubric-container,
#metrics-marks-container,
#inst-info-container,
#rubric-1-container,
#rubric-2-container,
#rubric-3-container,
#score-sheet-container,
#uploaded-evidence-container,
#notifications-container {
position: relative;
}

.rubric-row-wrapper {
position: relative;
display: flex;
height: 60px;
background-color: var(--white);
transition: background-color 0.3s ease;
}

.rubric-row-wrapper.blue {
background-color: var(--lightBlue2);
}

.rubric-row-wrapper.green {
background-color: var(--lightGreen);
}

.rubric-row-wrapper.white {
background-color: var(--white);
}

/********** End of Wrapper and Container Styles **********/

/********** Row and Cell Styles **********/

.rubric-row-cell {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
flex-basis: 80%;
height: 60px;
padding-left: 20px;
font-size: 16px;
color: var(--gray3);
border-left: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

#row-2 {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-basis: 100%;
height: 60px;
line-height: 20px;
padding: 20px;
font-size: 18px;
font-weight: bold;
color: var(--white);
border-bottom: 1px solid var(--white);
}

.row-1-cell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-basis: 50%;
height: 60px;
line-height: 20px;
padding: 20px;
font-size: 16px;
color: var(--white);
}

#first-header-row.row-1-cell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-basis: 50%;
height: 60px;
line-height: 20px;
font-size: 16px;
color: var(--white);
}

.row-1-cell.first {
border-right: 1px solid var(--white);
}

#metrics-marks-row-1 {
height: 0;
}

.rubric-row-1 {
position: relative;
box-sizing: border-box;
height: 60px;
line-height: 60px;
font-size: 16px;
font-weight: bold;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

.rubric-row-1.first {
padding-left: 20px;
background-color: var(--white);
border-top: 1px solid var(--gray2);
}

.rubric-row-1.second {
box-sizing: border-box;
text-align: center;
background-color: var(--lightBlue2);
border-top: 1px solid var(--gray2);
}

#rubric-1-container .rubric-row-2,
#rubric-2-container .rubric-row-2 {
position: relative;
box-sizing: border-box;
display: flex;
height: 60px;
line-height: 60px;
background-color: var(--lightRed);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

#rubric-3-container .rubric-row-2 {
position: relative;
box-sizing: border-box;
display: flex;
width: 100%;
background-color: var(--lightRed);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

.rubric-row-3 {
position: relative;
box-sizing: border-box;
display: flex;
flex-basis: 100%;
height: 40px;
line-height: 40px;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

.rubric-row-3.first,
.rubric-row-3.third {
background-color: var(--white);
}

.rubric-row-3.second {
background-color: var(--lightBlue2);
}

#rubric-1-container .rubric-row-cell-2,
#rubric-2-container .rubric-row-cell-2 {
box-sizing: border-box;
flex-basis: 50%;
height: 60px;
font-size: 16px;
font-weight: bold;
text-align: center;
}

#rubric-3-container .rubric-row-cell-2 {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
flex-basis: 50%;
font-size: 16px;
font-weight: bold;
text-align: center;
}

#rubric-1-container .rubric-row-cell.first,
#rubric-1-container .rubric-row-cell-2.first,
#rubric-2-container .rubric-row-cell.first,
#rubric-2-container .rubric-row-cell-2.first {
box-sizing: border-box;
height: 60px;
border-right: 1px solid var(--gray2);
}

#rubric-3-container .rubric-row-cell.first,
#rubric-3-container .rubric-row-cell-2.first {
box-sizing: border-box;
padding: 10px;
border-right: 1px solid var(--gray2);
}

.rubric-row-cell-3 {
flex-basis: 50%;
font-size: 16px;
text-align: center;
}

.rubric-row-cell-3.first {
box-sizing: border-box;
border-right: 1px solid var(--gray2);
}

/********** End of Row and Cell Styles **********/

/********** Header Styles **********/

#directory-header,
#metrics-marks-header,
#inst-info-header,
#rubric-1-header,
#rubric-2-header,
#rubric-3-header,
#notifications-header,
#uploaded-evidence-header {
position: relative;
display: flex;
height: 60px;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
color: var(--white);
}

#metrics-marks-header,
#rubric-1-header,
#rubric-2-header,
#rubric-3-header,
#notifications-header {
border-top: 1px solid var(--white);
}

#score-sheet-header {
position: relative;
display: flex;
width: 100%;
height: 60px;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
/*border-top: 1px solid var(--white);*/
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

#metrics-marks-header,
#rubric-1-header,
#rubric-3-header,
#score-sheet-header {
color: var(--white);
background-color: var(--brandBlue);
}

#inst-info-header,
#rubric-2-header,
#notifications-header,
#uploaded-evidence-header {
color: var(--white);
background-color: var(--brandBlue);
}

#uploaded-evidence-header {
border-bottom: 1px solid var(--white);
}

/********** End of Header Styles **********/

/********* Total Score Sheet Styles **********/

.score-sheet-row-wrapper {
position: relative;
box-sizing: border-box;
display: flex;
width: 100%;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

#total-score-header {
height: 0;
transition: height 0.3s ease;
}

.score-sheet-row-wrapper.green {
background-color: var(--lightGreen);
}

.score-sheet-row-wrapper.white {
background-color: var(--white);
}

.score-sheet-cell-1 {
flex-basis: 50%;
display: flex;
align-items: center;
color: var(--gray3);
}

.score-sheet-cell-2 {
flex-basis: 50%;
display: flex;
align-items: center;
color: var(--gray3);
}

.score-sheet-cell-1.center-bold,
.score-sheet-cell-2.center-bold {
box-sizing: border-box;
padding: 10px;
font-size: 18px;
font-weight: bold;
justify-content: center;
}

.score-sheet-cell-1.first{
border-right: 1px solid var(--gray2);
}

.score-sheet-cell-1.left {
box-sizing: border-box;
justify-content: left;
padding: 10px;
font-size: 16px;
border-right: 1px solid var(--gray2);
}

.score-sheet-cell-1.right {
box-sizing: border-box;
justify-content: right;
padding: 10px;
font-size: 18px;
font-weight: bold;
border-right: 1px solid var(--gray2);
}

.score-sheet-cell-2.center {
box-sizing: border-box;
padding: 10px;
justify-content: center;
font-size: 16px;
}

/********** End of Total Score Sheet Styles **********/

/********** Form and Textbox Styles **********/

.form {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 50px;
outline: 0;
border: 0;
text-align: center;
}

#inst-info-discrepancies-box,
#r1-discrepancies-box,
#ue-discrepancies-box,
#notifications-discrepancies-box {
padding-left: 34px;
height: 0;
transition: height 0.7s ease;
}

.problem-areas {
margin-left: 3px;
font-size: 16px;
color: var(--gray3);
}

.checkbox-block {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: left;
padding: 10px 0;
}

#r1-scoring-form-container-3,
#r1-scoring-form-container-4 {
}

#r1-scoring-form-container-5,
#r1-scoring-form-container-6,
#r2-scoring-form-container-3,
#r2-scoring-form-container-4,
#ue-scoring-form-container-17,
#ue-scoring-form-container-18,
#ue-scoring-form-container-19,
#ue-scoring-form-container-20 {
padding-left: 20px;
background-color: var(--lightBlue2);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

#r1-scoring-form-container-6 {
padding-left: 20px;
padding-right: 20px;
}

.checkbox-form {
position: relative;
display: flex;
align-items: center;
justify-content: left;
outline: 0;
border: 0;
text-align: center;
}

.checkbox {
width: 24px;
height: 24px;
margin-right: 10px;
accent-color: var(--brandBlue);
outline: 0;
border: 0;
cursor: pointer;
}

.checkbox-label {
position: relative;
font-size: 16px;
text-align: left;
color: var(--gray3);
}

.textbox-cell {
box-sizing: border-box;
display: flex;
align-items: center;
width: 100%;
line-height: 18px;
padding: 0;
font-size: 18px;
color: var(--gray2);
outline: 0;
border: 0;
background-color: transparent;
}

.form-2 {
position: relative;
flex-basis: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 58px;
outline: 0;
}

.textbox-cell-2 {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
font-size: 16px;
text-align: center;
outline: 0;
border: 0;
}

/********* End of Form, Textbox, and Textarea Styles **********/

/********** Score Calculator Styles **********/

.calculator-wrapper {
position: relative;
box-sizing: border-box;
overflow: hidden;
transition: height 0.5s ease;
}

.calculator-container {
position: relative;
width: 100%;
}

#rubric-1-container .score-calculator-header,
#rubric-2-container .score-calculator-header,
#rubric-3-container .score-calculator-header {
position: relative;
box-sizing: border-box;
display: flex;
width: 100%;
height: 40px;
align-items: center;
justify-content: center;
padding: 20px;
font-size: 18px;
font-weight: bold;
color: var(--white);
background-color: var(--brandBlue);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

.score-calculator-header.first {
background-color: var(--brandBlue);
}

.score-calculator-header.second {
background-color: var(--brandBlue);
}

.score-calculator-header.third {
background-color: var(--brandBlue);
}

#rubric-1-container .calculator-row-first,
#rubric-1-container .calculator-row-second,
#rubric-2-container .calculator-row-first,
#rubric-2-container .calculator-row-second {
position: relative;
box-sizing: border-box;
display: flex;
height: 60px;
line-height: 60px;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

#rubric-3-container .calculator-row-first,
#rubric-3-container .calculator-row-second {
position: relative;
box-sizing: border-box;
display: flex;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

.calculator-row-first.first {
background-color: var(--lightBlue2);
}

.calculator-row-first.second {
background-color: var(--white);
}

.calculator-row-second.first {
background-color: var(--lightBlue2);
}

.calculator-row-second.second {
background-color: var(--white);
}

#rubric-1-container .calculator-row-cell,
#rubric-2-container .calculator-row-cell {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
flex-basis: 50%;
height: 60px;
font-size: 16px;
text-align: center;
}

#rubric-3-container .calculator-row-cell {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
flex-basis: 50%;
font-size: 16px;
text-align: center;
}

#rubric-1-container .calculator-row-cell.first,
#rubric-2-container .calculator-row-cell.first {
box-sizing: border-box;
font-weight: bold;
border-right: 1px solid var(--gray2);
}

#rubric-1-container .calculator-row-cell.second,
#rubric-2-container .calculator-row-cell.second {
font-weight: bold;
}

#rubric-3-container .calculator-row-cell.first {
box-sizing: border-box;
padding: 10px;
font-weight: bold;
border-right: 1px solid var(--gray2);
}

#rubric-3-container .calculator-row-cell.second {
box-sizing: border-box;
padding: 10px;
font-weight: bold;
}

#rubric-3-container .calculator-row-cell.textbox {
box-sizing: border-box;
border-right: 1px solid var(--gray2);
}

/********** End of Score Calculator Styles **********/

/********** Button Styles **********/

.button-cell {
position: relative;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-basis: 20%;
height: 60px;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

.calculator-button-wrapper {
position: relative;
width: 100%;
display: flex;
}

.calculator-button-container {
display: flex;
align-items: center;
justify-content: center;
flex-basis: 50%;
height: 60px;
}

.calculator-button-container.first {
border-right: 1px solid var(--gray2);
}

.calculator-button {
position: relative;
width: 140px;
height: 30px;
line-height: 30px;
font-size: 14px;
color: var(--white);
border-radius: 4px;
background-color: var(--brandBlue);
transition: background-color 0.2s ease;
}

.contents-button,
.metrics-marks-button {
position: absolute;
width: 120px;
height: 30px;
line-height: 30px;
font-size: 14px;
color: var(--white);
border-radius: 4px;
background-color: var(--brandBlue);
transition: background-color 0.2s ease, transform 0.2s ease;
}

.contents-button span {
position: relative;
display: inline-block;
top: 0px;
}

.open-icon {
position: absolute;
top: 22px;
right: 20px;
width: 16px;
height: 16px;
transition: transform 0.6s ease;
}

.open-icon img {
position: absolute;
right: 0px;
width: 16px;
height: 16px;
}

.open-button {
position: absolute;
top: 22px;
right: 20px;
width: 16px;
height: 16px;
z-index: 10;
}

.back-to-contents-button,
.sheet-top-button,
.back-button,
.close-button {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
line-height: 14px;
padding: 6px 0px 6px 0px;
font-size: 14px;
border-radius: 4px;
color: var(--gray4);
}

.back-button.blue,
.back-to-contents-button.blue,
.sheet-top-button.blue,
.close-button.blue {
background-color: var(--lightBlue2);
}

.back-button.green,
.back-to-contents-button.green,
.sheet-top-button.green,
.close-button.green {
background-color: var(--lightGreen);
}

.close-button {
right: 20px;
}

#st-button-1 {
right: 136px;
}

#btc-button-1 {
right: 252px;
}

#back-button-1 {
right: 368px;
}

#st-button-2,
#st-button-3,
#st-button-4,
#st-button-5 {
right: 126px; 
}

#btc-button-2,
#btc-button-3,
#btc-button-4,
#btc-button-5 {
right: 232px; 
}

#back-button-2,
#back-button-3,
#back-button-4,
#back-button-5 {
right: 338px;
}

#st-button-6,
#st-button-7,
#st-button-8 {
right: 150px;
}

#btc-button-6,
#btc-button-7,
#btc-button-8 {
right: 280px;
}

#back-button-6,
#back-button-7,
#back-button-8 {
right: 410px;
}

#back-button-1,
#btc-button-1,
#st-button-1,
#close-button-1 {
width: 106px;
}

#st-button-2,
#st-button-3,
#st-button-4,
#st-button-5,
#back-button-2,
#back-button-3,
#back-button-4,
#back-button-5,
#btc-button-2,
#btc-button-3,
#btc-button-4,
#btc-button-5,
#close-button-2,
#close-button-3,
#close-button-4,
#close-button-5 {
width: 96px;
}

#st-button-6,
#back-button-6,
#btc-button-6,
#close-button-6,
#st-button-7,
#back-button-7,
#btc-button-7,
#close-button-7,
#st-button-8,
#back-button-8,
#btc-button-8,
#close-button-8 {
width: 120px;
}

.vantage-icon-arrow-up::before {
content: "\e603";
}

.vantage-icon-arrow-up {
position: relative;
box-sizing: border-box;
width: 14px;
height: 18px;
margin-right: 5px;
top: 2.5px;
font-family: 'vantage-icons';
font-size: 14px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: var(--gray2);
text-transform: none;
}

.x-icon {
position: relative;
top: -1px;
box-sizing: border-box;
width: 10px;
height: 10px;
margin-right: 5px;
}

.x-icon img {
width: 10px;
height: 10px;
}

#inst-info-send-button-wrapper,
#r1-send-button-wrapper,
#r2-send-button-wrapper {
position: relative;
width: 100%;
margin: 10px 0px;
display: flex;
align-items: center;
}

#send-button-wrapper {
position: relative;
width: 100%;
margin-top: 20px;
display: flex;
}

#send-button {
position: relative;
box-sizing: border-box;
width: 140px;
height: 30px;
line-height: 30px;
font-size: 14px;
color: var(--white);
background-color: var(--brandBlue);
border-radius: 4px;
transition: background-color 0.2s ease;
}

#inst-info-send-button-label,
#r1-send-button-label,
#r2-send-button-label {
position: relative;
font-size: 16px;
color: var(--gray3);
}

/********** End of Button Styles **********/

/********** Rubric Graph Styles **********/

.graph-wrapper {
position: relative;
display: none;
justify-content: center;
flex-wrap: wrap;
padding: 0;
margin: 0;
box-sizing: border-box;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

#graph-metric-1,
#graph-metric-2 {
position: relative;
height: 500px;
background-color: var(--white);
}

.graph-label {
position: relative;
width: 100%;
line-height: 16px;
font-weight: bold;
color: var(--gray2);
background-color: var(--white);
text-align: center;
}

.graph-label.first {
padding: 20px 0 10px 0;
font-size: 18px;
}

.graph-label.second {
padding: 10px 0 20px 0;
font-size: 14px;
}

.graph {
position: relative;
display: block;
}

.graph img {
position: relative;
display: block;
height: 400px;
}

/********** End of Rubric Graph Styles **********/

/********** End of Section Styles **********/

.end-of-section {
display: flex;
align-items: center;
height: 60px;
line-height: 18px;
padding: 0 20px;
color: var(--white);
font-size: 18px;
font-weight: bold;
background-color: var(--brandBlue);
border-bottom: 1px solid var(--white);
}

#end-of-review-of-inst-info,
#end-of-contents,
#end-of-metrics-marks,
#end-of-rubric-1,
#end-of-rubric-2,
#end-of-rubric-3,
#end-of-score-sheet,
#end-of-review-of-uploaded-evidence,
#end-of-notifications {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
height: 55px;
line-height: 18px;
padding-left: 20px;
color: var(--white);
font-size: 18px;
font-weight: bold;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
background-color: var(--mediumBlue);
}

#end-of-rubric-3 {
border-bottom: 1px solid var(--white);
}

#end-of-form {
display: flex;
align-items: center;
line-height: 18px;
padding: 23px 20px 19px 20px;
color: var(--white);
font-size: 18px;
font-weight: bold;
background-color: var(--burgundy1);
border-top: 1px solid var(--white);
border-radius: 0 0 8px 8px;
}

/********** End of End of Section Styles **********/

/********** Responsive Styling **********/

/********** Page Banner **********/

@media (max-width: 450px) {
#bg-container { height: 84vw; }
}

@media (min-width: 450.01px) and (max-width: 680px) {
#bg-container { height: 30vw; }
}

@media (min-width: 680.01px) and (max-width: 1080px) and (orientation: landscape) {
#bg-container { height: 30vw; }
}

@media (min-width: 680.01px) and (max-width: 1080px) and (orientation: portrait) {
#bg-container { height: 30vh; }
}
  
@media (min-width: 1080.01px) and (orientation: landscape) {
/*body.responsive #page-banner { top: 109px; height: calc(100vh - 109px); }*/
/*#bg-container { height: calc(100vh - 109px); }*/
}

@media (min-width: 1080.01px) and (max-width: 1900px) and (orientation: portrait) {
#bg-container { height: 44vw; }
}

@media (min-width: 1901.01px) and (max-width: 2500px) and (orientation: portrait) {
#bg-container { height: 33vw; }
}

@media (min-width: 2500.01px) and (orientation: portrait) {
#bg-container { height: 21vw; }
}

/********** General Styling **********/

@media (max-width: 1000px) {
.banner-symbol { font-size: 24px; }
}