/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 06 2026 | 18:59:28 */
/********** Page Banner **********/

#main,
#data-sheet-container {
background-color: rgb(250, 250, 250);
}

#bg-container {
position: relative;
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
}

#bg-shell {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background-image: url(/wp-content/uploads/pre-banner.jpg);
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
}

#page-title-container {
position: absolute;
left: -100%;
width: 100%;
height: auto;
padding: 0 20px;
transition: left 1s ease 0.5s;
}

#page-title-container #main-title, #page-title-container #sub-title {
position: relative;
text-align: center;
font-size: 40px;
line-height: 48px;
color: rgb(250, 250, 250);
text-shadow: 2px 2px 0px rgb(0, 0, 0);
}

#symbols-block {
box-sizing: border-box;
position: relative;
width: 100%;
margin: 10px 0;
color: var(--white);
font-size: 30px;
line-height: 30px;
text-align: center;
}

#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;
}

#logo-block {
width: auto;
height: 50px;
margin-right: 10px;
}

#logo-block img {
width: auto;
height: 50px;
}

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

#heading-bullet-survey {
box-sizing: border-box;
width: 30px;
line-height: 34px;
padding: 13px 0 7px 0;
margin-right: 5px;
font-size: 30px;
color: var(--burgundy1);
}

#heading-survey {
box-sizing: border-box;
padding: 12px 0 8px 0;
}

#section-heading-wrapper {
position: relative;
}

.section-heading-animated {
position: relative;
display: flex;
margin-bottom: 20px;
font-size: 30px;
line-height: 34px;
font-weight: bold;
text-align: center;
color: var(--gray3);
}

#form-intro {
margin-top: 20px;
}

#form-intro span {
color: rgb(255,0,0);
}

#intersection-target {
position: relative;
width: 100%;
background-color: rgb(250, 250, 250);
}

#screen-size-notice {
position: relative;
width: calc(100% - 40px);
padding: 40px 20px;
margin: 20px 20px 0 20px;
font-size: 18px;
color: var(--gray2);
border: 1px solid var(--gray2);
border-radius: 4px;
background-color: var(--lightBlue2);
display: none;
}

#adjuster-block {
background-color: rgb(250, 250, 250);
}

/********** Main Styling **********/

body {
--lightBlue2: rgb(230, 240, 250);
--lightBlue3: rgb(240, 250, 255);
--mediumBlue: rgb(47, 117, 181);
--mediumBlue2: rgb(60, 110, 160);
--darkGreen: rgb(40, 140, 140);
--darkGreen2: rgb(30, 100, 100);
--lightGreen: rgb(223, 243, 245);
--lightGreen2: rgb(180, 200, 210);
--pureRed: rgb(255, 0, 0);
}

#menu-tagline-wrapper {
position: relative;
height: 49px;
margin-left: 0px !important;
overflow: hidden;
transition: width 0.4s ease, height 0.4s ease;
}

#menu-tagline {
position: relative;
left: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 22px;
font-weight: bold;
color: var(--brandBlue);
background-color: var(--lightBlue);
border: 0.5px solid var(--gray1);
border-radius: 4px;
transition: left 0.8s ease, height 0.4s ease, background-color 0.2s ease, color 0.2s ease;
}

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

#inst-info {
width: 100%;
}

.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;
}

.quality-indicator,
.quality-indicator-2 {
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);
border-radius: 8px 8px 0 0;
}

.quality-indicator-2 {
border-radius: 0;
}

.quality-indicator-2 {
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);
}

.inst-info-2 {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
line-height: 20px;
background-color: var(--brandBlue);
color: var(--white);
font-size: 20px;
font-weight: bold;
text-align: center;
}

.data-type,
.data-type-bg {
display: flex;
align-items: center;
box-sizing: border-box;
width: 300px;
height: 50px;
line-height: 18px;
padding: 0 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-type.inst-characteristics {
border-right: 0;
}

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

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

#data-intro-wrapper {
width: 100%;
display: flex;
background-color: var(--brandBlue);
border-bottom: 1px solid var(--white);
}

#data-intro {
position: relative;
width: calc(100% - 222px);
line-height: 20px;
padding: 22px 20px 18px 20px;
font-size: 16px;
color: var(--white);
border-right: 1px solid var(--white);
}

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

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

.inst-char-data-wrapper {
/*width: 100%;*/
height: 50px;
display: flex;
background-color: var(--white);
}

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

#box-error-message-cell {
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 400px);
font-size: 18px;
font-weight: normal;
color: var(--pureRed);
border-bottom: 1px solid var(--gray2);
}

.inst-characteristic {
box-sizing: border-box;
width: 300px;
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 {
display: flex;
align-items: center;
box-sizing: border-box;
width: 300px;
height: 50px;
padding-left: 20px;
font-size: 18px;
font-weight: bold;
color: var(--gray2);
border-right: 1px solid var(--gray2);
}

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

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

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

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

#toi-wrapper,
#ddl-wrapper,
#es-wrapper,
#eo-wrapper,
#pr-wrapper {
position: relative;
/*width: 100%;*/
display: flex;
align-items: center;
}

#toi-wrapper {
background-color: var(--lightBlue2);
border-bottom: 1px solid var(--gray2);
}

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

#es-wrapper {
background-color: var(--white);
border-bottom: 1px solid var(--gray2);
}

#eo-wrapper {
background-color: var(--lightBlue2);
border-bottom: 1px solid var(--gray2);
}

#pr-wrapper {
background-color: var(--white);
border-bottom: 1px solid var(--gray2);
}

#toi-details-wrapper,
#ddl-details-wrapper,
#es-details-wrapper,
#eo-details-wrapper,
#pr-details-wrapper {
position: relative;
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;
width: 100%;
}

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

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

#programs-wrapper {
position: relative;
width: 100%;
height: 0px;
overflow: hidden;
transition: height 0.5s ease;
}

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

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

.programs-block {
width: 300px;
height: 50px;
padding-left: 20px;
font-size: 18px;
border-right: 1px solid var(--gray2);
}

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

.programs-heading {
box-sizing: border-box;
width: calc(100% - 400px);
height: 50px;
display: flex;
align-items: center;
padding-left: 10px;
font-size: 16px;
font-weight: bold;
color: var(--brandBlue);
text-decoration: underline;
border-right: 1px solid var(--gray2);
}

#sc-programs-block,
#bacc-programs-block,
#masters-programs-block,
#doctoral-programs-block,
#no-ug-programs-block,
#no-grad-programs-block {
display: flex;
align-items: center;
justify-content: left;
box-sizing: border-box;
width: calc(100% - 400px);
height: 50px;
padding-left: 5px;
border-right: 1px solid var(--gray2);
}

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

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

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

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

.inst-response-block {
position: relative;
display: flex;
align-items: center;
width: calc(100% - 300px);
}

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

.inst-checkbox-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: left;
width: calc(100% - 100px);
height: 50px;
padding-left: 5px;
border-right: 1px solid var(--gray2);
}

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

}

#ddl-response-block {
box-sizing: border-box;
width: calc(100% - 400px);
padding-left: 5px;
border-right: 1px solid var(--gray2);
}

#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;
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 {
padding-right: 10px;
}

.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 {
width: 22px;
height: 22px;
margin-right: 5px;
accent-color: var(--brandBlue);
outline: 1px solid var(--gray2);
border: 0;
cursor: pointer;
}

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

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

/********** Inst Info Button Styles **********/

.details-button-wrapper {
width: 100px;
text-align: center;
}

.details-button {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 6px 14px;
line-height: 14px;
font-size: 14px;
border-radius: 4px;
color: var(--white);
background-color: var(--brandBlue);
transition: background-color 0.1s ease;
}

.close-details-button {
position: absolute;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 5px 20px;
line-height: 14px;
font-size: 14px;
border-radius: 4px;
color: var(--gray4);
background-color: var(--lightGreen);
transition: background-color 0.1s ease;
}

.top-of-details-button {
position: absolute;
right: 102.8167px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 5px 15.63355px;
line-height: 14px;
font-size: 14px;
color: var(--gray4);
background-color: var(--lightGreen);
transition: background-color 0.1s ease;
border-radius: 4px;
}

/********** End of Inst Info Button Styles **********/

/********** Inst Classification and Row Styles **********/

.classification-header {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
line-height: 16px;
padding: 14px 0;
font-size: 16px;
font-weight: bold;
color: var(--white);
background-color: var(--darkGreen);
}

.classification-header button {
position: absolute;
top: 10px;
display: inline-block;
width: 26px;
height: 26px;
}

.classification-footer {
position: relative;
/*width: 100%;*/
padding: 11px 20px;
font-size: 16px;
font-weight: bold;
color: var(--white);
}

.classification-footer.green {
display: flex;
align-items: center;
background-color: var(--darkGreen);
}

.classification-sub-row-header button {
position: absolute;
top: 10px;
display: inline-block;
width: 26px;
height: 26px;
}

.ddl-last-row {
position: relative;
width: 100%;
padding: 10px 20px 12px 20px;
font-size: 16px;
color: var(--white);
text-align: left;
background-color: var(--darkGreen);
}

#pr-last-row {
position: relative;
width: 100%;
padding: 10px 20px 12px 20px;
font-size: 16px;
color: var(--white);
text-align: left;
background-color: var(--darkGreen);
}

.isced-last-row,
#pda-last-row {
position: relative;
/*width: 100%;*/
padding: 10px 20px 12px 20px;
font-size: 16px;
color: var(--white);
text-align: left;
background-color: rgb(47, 117, 181);
border-bottom: 1px solid var(--white);
}

#pda-last-row {
border-bottom: 1px solid var(--white);
}

.isced-last-row a:link,
.isced-last-row a:visited,
#pda-last-row a:link,
#pda-last-row a:visited {
font-size: 16px;
color: var(--white);
text-decoration: underline;
outline: none;
}

.isced-last-row a:hover,
#pda-last-row a:hover {
font-size: 16px;
color: var(--white);
text-decoration: underline;
outline: none;
}

.classification-row-green {
position: relative;
/*width: 100%;*/
height: 44px;
line-height: 44px;
font-size: 16px;
font-weight: bold;
color: var(--gray3);
text-align: center;
background-color: var(--lightGreen);
border-bottom: 1px solid var(--gray2);
}

.classification-row-green.broad-scope {
border-bottom: 1px solid var(--gray2);
}

.classification-row-white {
position: relative;
/*width: 100%;*/
padding: 10.5px 20px;
font-size: 16px;
color: var(--gray3);
text-align: left;
background-color: var(--white);
border-bottom: 1px solid var(--gray2);
}

.classification-sub-row-white {
position: relative;
display: flex;
/*width: 100%;*/
font-size: 16px;
color: var(--gray3);
text-align: left;
background-color: var(--white);
}

.classification-sub-row-white.first,
.classification-sub-row-white.second {
display: flex;
padding: 10px 20px 0 20px;
}

.criterion-cell {
width: calc(100% - 14px);
}

.classification-sub-row-white.third {
display: flex;
padding: 10px 20px 12px 20px;
border-bottom: 1px solid var(--gray2);
}

.classification-sub-row-white.last {
border: 0;
}

.classification-sub-row-white span,
.classification-sub-row-blue span {
font-weight: bold;
}

.classification-row-white.last {
border-bottom: 0;
}

.classification-sub-row-blue {
position: relative;
display: flex;
/*width: 100%;*/
padding: 10px 20px 12px 20px;
font-size: 16px;
color: var(--gray3);
text-align: left;
background-color: var(--lightBlue2);
}

.classification-sub-row-white.isced,
.classification-sub-row-blue.isced,
.classification-sub-row-white.pda,
.classification-sub-row-blue.pda,
.classification-sub-row-white.ft {
padding: 8px 20px;
border-bottom: 1px solid var(--gray2);
}

.classification-sub-row-blue.ft {
padding: 8px 20px;
border-bottom: 0;
}

.classification-sub-row-blue.first, 
.classification-sub-row-blue.second,
.classification-sub-row-blue.third,
.classification-sub-row-blue.fourth,
.classification-sub-row-blue.fifth,
.classification-sub-row-blue.sixth {
padding: 8px 20px 0 20px;
}

.classification-sub-row-blue.stem-fifth {
padding: 8px 20px;
}

.classification-sub-row-blue.seventh {
padding: 8px 20px;
}

.classification-sub-row-white.last {
border-bottom: 0;
}

.classification-sub-row-white.no-border,
.classification-sub-row-blue.no-border {
border-bottom: 0;
}

.classification-sub-row-green button {
display: inline-block;
font-size: 16px;
color: var(--gray3);
text-decoration: underline;
}

.classification-footer-green,
.classification-sub-row-green {
position: relative;
/*width: 100%;*/
padding: 8px 20px;
font-size: 16px;
color: var(--gray3);
background-color: var(--lightGreen);
border-top: 1px solid var(--gray2);
}

/********** End of Inst Classification and Row Styles **********/

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

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

#main-data-sheet-wrapper {
position: relative;
width: 100%;
overflow: hidden;
height: 0px;
transition: height 1s ease;
}

#main-data-sheet-container {
position: relative;
/*width: 100%;*/
}

#row-wrapper-pd {
position: relative;
display: flex;
/*width: 100%;*/
font-size: 16px;
color: var(--gray3);
background-color: var(--white);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

#row-wrapper-se {
position: relative;
display: flex;
/*width: 100%;*/
font-size: 16px;
color: var(--gray3);
background-color: var(--white);
border: 1px solid var(--gray2);
}

#row-wrapper-pd span {
display: inline-block;
padding: 20px;
}

#row-wrapper-se span {
display: inline-block;
padding: 10px 20px;
}

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

.metric-row-wrapper.bg {
background-color: var(--lightBlue2);
}

#metric-row-wrapper-last,
#sd-metric-row-wrapper {
position: relative;
background-color: var(--white);
}

#sd-metric-row-wrapper {
border-top: 1px solid var(--gray2);
}

#supplemental-data-sheet-wrapper {
position: relative;
height: 0;
/*width: 100%;*/
overflow: hidden;
transition: height 0.5s ease;
}

.examples-wrapper {
position: relative;
height: 0;
width: 100%;
overflow: hidden;
transition: height 1s ease;
}

.examples-container {
position: relative;
/*width: 100%;*/
border-right: 1px solid var(--gray2);
border-left: 1px solid var(--gray2);
}

.metric-row-container-primary,
.metric-row-container-supplemental {
display: flex;
align-items: center;
flex-basis: 100%;
}

.metric-row-container-supporting {
display: flex;
align-items: flex-start;
flex-basis: 100%;
height: 80px;
}

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

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

#sheet-header {
position: relative;
/*width: 100%;*/
/*height: 60px;*/
line-height: 20px;
padding: 20px;
font-size: 16px;
color: var(--white);
background-color: rgb(47, 117, 181);
/*border-top: 1px solid var(--white);*/
}

.metric-first-row {
position: relative;
/*width: 100%;*/
display: flex;
align-items: center;
padding: 10px 20px;
font-size: 16px;
color: var(--gray3);
background-color: var(--white);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

#sd-metric-row-3 {
background-color: var(--lightRed);
}

.metric-2-cell {
position: relative;
display: flex;
align-items: center;
width: calc(100% - 222px);
padding: 10px 20px;
font-size: 16px;
color: var(--gray3);
border-right: 1px solid var(--gray2);
}

.added-row-primary,
.added-row-supplemental {
height: 0;
overflow: hidden;
transition: height 0.3s ease, background-color 0.3s ease;
}

.metric-row-wrapper {
position: relative;
display: flex;
align-items: flex-start;
/*width: 100%;*/
font-size: 16px;
color: var(--gray3);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

.metric-heading-row {
position: relative;
display: flex;
align-items: center;
/*width: 100%;*/
font-size: 16px;
color: var(--gray3);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

#sd-metric-row-3 {
align-items: flex-start;
}

.metric-row,
.sd-method-cell {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
width: calc(100% - 222px);
line-height: 16px;
padding: 16px 20px 12px 20px;
font-size: 16px;
color: var(--gray3);
}

.sd-method-cell-2 {
position: relative;
display: flex;
align-items: flex-start;
width: calc(100% - 222px);
height: 80px;
line-height: 16px;
padding: 10px 20px;
font-size: 16px;
color: var(--gray3);
}

.metric-row-se {
position: relative;
display: flex;
align-items: flex-start;
box-sizing: border-box;
width: calc(100% - 222px);
height: 80px;
line-height: 16px;
padding: 10px 20px;
font-size: 16px;
color: var(--gray3);
}

.metric-heading-cell {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
width: calc(100% - 222px);
padding: 10px 20px;
font-size: 16px;
color: var(--gray3);
border-right: 1px solid var(--gray2);
}

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

/********** Content Editable and Visibilty Styles **********/

.editable-box-1 {
position: relative;
text-align: left;
width: calc(100% - 300px);
height: 50px;
line-height: 50px;
padding: 0 10px;
color: var(--gray3);
font-size: 18px;
outline: 0;
border-bottom: 1px solid var(--gray2);
}

.editable-box-1:focus {
height: 50px;
width: calc(100% - 300px);
display: inline-block;
vertical-align: middle;
border-bottom: 1px solid var(--gray2);
}

.data-box-type-1 {
padding-top: 6px;
height: 49px;
display: flex;
align-items: center;
justify-content: left;
box-sizing: border-box;
width: 100%;
font-size: 18px;
font-weight: normal;
color: var(--gray3);
outline: 0;
border: 0;
background-color: transparent;
}

.data-box-2,
.editable-box-3,
.grand-array-box {
position: relative;
/*text-align: center;*/
width: 222px;
height: 44px;
/*line-height: 44px;*/
color: var(--gray3);
font-size: 16px;
background-color: transparent;
outline: 0;
border: 0;
}

.data-box-type-2 {
position: relative;
display: inline-block;
box-sizing: border-box;
/*display: flex;
align-items: center;
justify-content: center;*/
text-align: center;
width: 222px;
height: 44px;
padding: 13px;
line-height: 18px;
vertical-align: middle;
color: var(--gray3);
font-size: 16px;
background-color: transparent;
outline: 0;
border: 0;
}

/*.data-box-type-3 {
position: relative;
display: flex;
align-items: flex-start;
box-sizing: border-box;
width: 222px;
height: 60px;
color: var(--gray3);
font-size: 16px;
background-color: transparent;
outline: 0;
border: 0;
overflow-y: auto;
overflow-x: auto;
scrollbar-color: var(--brandBlue) var(--lightRed2);
}*/

.data-box-type-3 {
position: relative;
box-sizing: border-box;
width: 222px;
height: 80px;
padding: 10px;
color: var(--gray2);
font-size: 16px;
background-color: transparent;
overflow-y: auto;
overflow-x: auto;
scrollbar-color: var(--brandBlue) var(--lightRed2);
}

.data-box-type-1:focus {
display: flex;
align-items: center;
justify-content: left;
width: auto;
height: auto;
display: inline-block;
vertical-align: middle;
}

.editable-box-3:focus,
.data-box-type-2:focus {
/*.grand-array-box:focus*/
display: inline-block;
box-sizing: border-box;
text-align: center;
padding: 13px;
/*justify-content: center;*/
width: 222px;
height: 44px;
line-height: 18px;
font-size: 16px;
vertical-align: middle;
}

/*.data-box-type-3:focus {
position: relative;
display: flex;
align-items: flex-start;
box-sizing: border-box;
width: 202px;
height: 60px;
color: var(--gray3);
font-size: 16px;
background-color: transparent;
overflow-y: auto;
overflow-x: auto;
scrollbar-color: var(--brandBlue) var(--lightRed2);
}*/

.data-box-4 {
position: relative;
width: 202px;
height: 60px;
color: var(--gray3);
font-size: 16px;
background-color: transparent;
overflow-y: auto;
overflow-x: auto;
scrollbar-color: var(--brandBlue) var(--lightRed2);
}

.data-box-4:focus {
display: inline-block;
vertical-align: top;
}
 
.content-editable-1,
.content-editable-2,
.content-editable {
position: relative;
box-sizing: border-box;
padding: 10px;
width: 222px;
height: 80px;
color: var(--gray3);
font-size: 16px;
background-color: transparent;
overflow-y: auto;
/*overflow-x: auto;*/
scrollbar-color: var(--brandBlue) var(--lightRed2);
}

.placeholder {
font-size: 16px;
color: rgb(0, 0, 0);
opacity: 0.4;
}

.row-visible-1,
.row-visible-2 {
display: flex;
}

.row-hidden-1,
.row-hidden-2 {
display: none;
}

.cell-visible-1,
.cell-visible-2,
.cell-visible-3 {
display: flex;
}

.cell-hidden-4,
.cell-hidden-5 {
display: block;
}

.cell-hidden-1,
.cell-hidden-2,
.cell-hidden-3,
.cell-hidden-4,
.cell-hidden-5 {
display: none;
}

/********** End of Content Editable and Visibilty Styles **********/

/********** Header and Heading Styles **********/

#pd-sheet-header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
/*width: 100%;*/
height: 50px;
font-size: 18px;
font-weight: bold;
color: var(--gray3);
background-color: var(--lightGreen);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

#sd-sheet-header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
/*width: 100%;*/
height: 50px;
font-size: 18px;
font-weight: bold;
color: var(--gray3);
background-color: var(--lightGreen);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

.metric-header {
display: flex;
align-items: center;
justify-content: center;
flex-basis: 100%;
height: 50px;
font-size: 18px;
font-weight: bold;
color: var(--gray3);
background-color: var(--lightRed);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

.metric-header button {
display: inline-block;
width: 26px;
height: 26px;
cursor: pointer;
}

#pd-sheet-header img,
.metric-header img {
width: 26px;
height: 26px;
}

.sd-heading-cell {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
width: calc(100% - 222px);
padding: 10px 20px;
font-size: 16px;
color: var(--gray3);
}

.sd-data-heading {
box-sizing: border-box;
width: 222px;
padding: 10px;
font-size: 16px;
color: var(--gray3);
text-align: center;
}

.se-data-heading {
box-sizing: border-box;
width: 222px;
padding: 10px;
font-size: 16px;
color: var(--gray3);
text-align: center;
border-left: 1px solid var(--gray2);
}

#supporting-evidence-header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
/*width: 100%;*/
height: 43px;
font-size: 18px;
font-weight: bold;
color: var(--gray3);
background-color: var(--lightRed);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

#supporting-evidence-header button {
width: 26px;
height: 26px;
cursor: pointer;
}

/********** End of Header and Heading Styles **********/

/********** Form, Textbox, and CheckboxStyles **********/

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

#response-cell {
position: relative;
display: flex;
align-items: center;
width: 222px;
padding: 22px 20px 18px 20px;
}

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

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

.form {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-basis: 100%;;
height: 100%;
outline: 0;
border: 0;
text-align: center;
transition: background-color 0.1s ease;
}

.form-2 {
box-sizing: border-box;
position: relative;
width: calc(100% - 222px);
height: 44px;
outline: 0;
text-align: center;
border-top: 0;
border-bottom: 0;
border-left: 0;
border-right: 1px solid var(--gray2);
}

.form-3 {
position: relative;
box-sizing: border-box;
width: 222px;
outline: 0;
border: 0;
}

/*.textbox-cell-1 {
padding-top: 6px;
height: 49px;
display: flex;
align-items: center;
width: 100%;
font-size: 18px;
color: var(--gray3);
outline: 0;
border: 0;
background-color: transparent;
}*/

.textbox-cell-2 {
box-sizing: border-box;
display: flex;
align-items: center;
/*width: calc(100% - 222px);*/
width: 100%;
height: 44px;
padding: 5px 20px 5px 30px;
font-size: 16px;
text-align: left;
color: var(--gray3);
outline: 0;
border: 0;
background-color: transparent;
}

.textbox-cell-3,
.textbox-cell-4,
.textbox-cell-5 {
display: flex;
align-items: center;
width: 100%;
height: 44px;
line-height: 16px;
font-size: 16px;
color: var(--gray3);
text-align: center;
outline: 0;
border: 0;
background-color: transparent;
}

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

input[type="checkbox"] + label {
position: absolute;
top: 5px;
display: inline-block;
height: 30px;
line-height: 30px;
margin-left: 5px;
font-weight: bold;
color: var(--white);
}

.checkbox-cell {
display: flex;
align-items: center;
box-sizing: border-box;
width: 222px;
height: 44px;
border-left: 1px solid var(--gray2);
}

.metric-checkbox {
position: relative;
top: 1px;
width: 24px;
height: 24px;
outline: 1px solid var(--gray2);
border: 0;
accent-color: var(--brandBlue);
cursor: pointer;
}

.data-cell,
.data-cell-sd {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 222px;
height: 44px;
}

.data-cell-sd {
border-left: 1px solid var(--gray2);
}

.data-cell-se,
.data-cell-added {
position: relative;
display: flex;
align-items: center;
/*align-items: flex-start;*/
justify-content: left;
box-sizing: border-box;
height: 100%;
width: 222px;
height: 80px;
/*padding: 10px;*/
border-left: 1px solid var(--gray2);
}

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

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

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

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

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

.button-cell {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 222px;
height: 43px;
}

#info-button-3 {
transition: transform 0.1s ease;
}

.button-row {
position: relative;
padding: 10px 20px;
font-size: 16px;
color: var(--gray3);
text-align: center;
background-color: var(--lightBlue3);
}

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

#insert-row-button {
position: absolute;
top: 7.5px;
display: none;
right: 20px;
width: 100px;
height: 30px;
font-size: 14px;
color: var(--white);
border-radius: 4px;
background-color: var(--brandBlue);
transition: background-color 0.2s ease;
}

.delete-method-button {
position: absolute;
padding: 5px 10px;
font-size: 14px;
color: var(--white);
border-radius: 4px;
background-color: var(--brandBlue);
transition: background-color 0.2s ease;
}

.back-button {
position: absolute;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
line-height: 14px;
font-size: 14px;
border-radius: 4px;
color: var(--gray4);
background-color: var(--lightGreen);
transition: background-color 0.1s ease;
}

#back-button-1 {
padding: 5px 28.35px;
}

#back-button-2 {
padding: 5px 10px;
}

#close-examples-button {
position: absolute;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
line-height: 14px;
padding: 5px 32.8px;
font-size: 14px;
border-radius: 4px;
color: var(--gray4);
background-color: var(--lightGreen);
transition: background-color 0.1s ease;
}

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

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

#back-to-examples-button {
position: absolute;
right: 128px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
line-height: 14px;
padding: 5px 20px;
font-size: 14px;
border-radius: 4px;
color: var(--gray4);
background-color: var(--lightGreen);
transition: background-color 0.1s ease;
}

#end-buttons-wrapper {
position: relative;
display: flex;
width: 100%;
height: 0px;
margin-top: 0px;
overflow: hidden;
transition: height 0.5s ease, margin-top 0.5s ease;
}

#end-buttons-container {
position: relative;
display: flex;
width: 100%;
height: 50px;
padding: 5px 0 5px 0;
}

#send-button-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 440px);
top: 0px;
/*transition: top 0.5s ease 1.3s;*/
}

#validate-button,
#send-button {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
width: 220px;
height: 40px;
line-height: 40px;
font-size: 16px;
background-color: var(--brandBlue);
transition: background-color 0.2s ease;
border-radius: 8px;
}

.button-label {
position: relative;
display: inline-block;
width: auto;
line-height: 40px;
font-size: 16px;
color: var(--white);
}

.top-of-sheet-button {
position: absolute;
right: 206px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 5px 32.635px;
line-height: 14px;
font-size: 14px;
color: var(--gray4);
background-color: var(--lightGreen);
transition: background-color 0.1s ease;
border-radius: 4px;
}

#top-of-data-sheet-button-3 {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 220px;
height: 40px;
line-height: 40px;
font-size: 16px;
color: var(--white);
background-color: var(--brandBlue);
transition: background-color 0.1s ease;
border-radius: 8px;
}

#examples-button-wrapper {
position: relative;
width: 100%;
margin-top: 10px;
text-align: right;
}

#examples-button {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 5px 20px;
line-height: 14px;
font-size: 14px;
border-radius: 4px;
color: var(--gray4);
background-color: var(--lightBlue2);
transition: background-color 0.1s ease;
}

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

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

.vantage-icon-arrow-up-2 {
color: var(--white);
}

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

/********** Note Styles *********/

#note-wrapper-1,
#note-wrapper-2,
#note-wrapper-3,
#note-wrapper-4,
#note-wrapper-5 {
position: relative;
height: 0;
/*width: 100%;*/
overflow: hidden;
transition: height 0.5s ease;
}

.note-container {
position: relative;
/*width: 100%;*/
border-right: 1px solid var(--gray2);
border-left: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

#note-container-5 {
border-bottom: 0;
}

.note-header {
position: relative;
display: flex;
align-items: center;
/*width: 100%;*/
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
color: var(--white);
background-color: var(--brandBlue);
}

.info-icon-block {
width: 26px;
height: 26px;
}

.info-icon-block img {
width: 26px;
height: 26px;
}

.note-header button,
.note-header button,
.examples-header button {
display: inline-block;
width: 26px;
height: 26px;
}

.info {
transform: scale(1);
transition: transform 0.1s ease;
}

.close {
position: absolute;
right: 20px;
cursor: pointer;
transform: scale(1);
transition: transform 0.2s ease;
}

.note-row {
position: relative;
padding: 10px 20px;
font-size: 16px;
color: var(--gray3);
background-color: var(--lightBlue3);
}

.note-row button {
display: inline-block;
cursor: pointer;
text-decoration: underline;
}

/********** End of Note Styles *********/

/********** Examples Styles **********/

.examples-header {
width: 100%;
padding: 15px 0;
font-size: 20px;
font-weight: bold;
text-align: center;
color: var(--white);
background-color: var(--darkGreen);
}

.examples-row,
.examples-row-blue {
position: relative;
display: flex;
box-sizing: border-box;
/*width: 100%;*/
padding: 16px 20px;
font-size: 16px;
color: var(--gray3);
background-color: var(--white);
border-bottom: 1px solid var(--gray2);
}

.examples-row span,
.examples-row-blue span {
font-weight: bold;
}

.examples-row-blue {
/*width: 100%;*/
box-sizing: border-box;
padding: 10px 20px;
font-size: 16px;
color: var(--gray3);
background-color: var(--lightGreen);
border-bottom: 1px solid var(--gray2);
}

.bullet-cell {
position: relative;
width: 14px;
font-size: 18px;
top: 1px;
}

.examples-cell {
position: relative;
width: calc(100% - 14px);
}

/********** End of Examples Styles **********/

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

#end-of-primary-data-sheet {
position: relative;
/*width: 100%;*/
height: 44px;
display: flex;
align-items: center;
padding-left: 20px;
font-size: 18px;
font-weight: bold;
color: var(--white);
background-color: var(--darkGreen);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

#end-of-examples {
position: relative;
/*width: 100%;*/
height: 44px;
display: flex;
align-items: center;
padding-left: 20px;
font-size: 18px;
font-weight: bold;
color: var(--white);
background-color: var(--darkGreen);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--white);
}

#end-of-supplemental-data-sheet {
position: relative;
/*width: 100%;*/
height: 44px;
display: flex;
align-items: center;
padding-left: 20px;
font-size: 18px;
font-weight: bold;
color: var(--white);
background-color: var(--darkGreen);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
border-bottom: 1px solid var(--white);
}

.end-of-section {
display: flex;
align-items: center;
/*width: 100%;*/
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-inst-characteristics {
display: flex;
align-items: center;
width: 100%;
height: 44px;
line-height: 16px;
padding: 0 20px;
color: var(--white);
font-size: 16px;
font-weight: bold;
background-color: var(--brandBlue);
border-top: 1px solid var(--white);
border-bottom: 1px solid var(--white);
}

#end-of-datasheet-1,
#end-of-datasheet-2 {
display: flex;
align-items: center;
/*width: 100%;*/
height: 60px;
line-height: 18px;
padding: 0 20px;
color: var(--white);
font-size: 18px;
font-weight: bold;
background-color: var(--burgundy1);
border-radius: 0 0 8px 8px;
/*border-top: 1px solid var(--white);*/
}

#end-of-datasheet-2 {
display: none;
}

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

/********** File Uploader Styles **********/

#files-list-wrapper {
position: relative;
width: 1070px;
height: 32px;
overflow: hidden;
transition: height 0.5s ease;
}

#upload-evidence-wrapper {
position: relative;
height: 0px;
/*width: 100%;*/
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
transition: height 0.5s ease;
}

#upload-evidence-header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
/*width: 100%;*/
height: 43px;
font-size: 18px;
font-weight: bold;
color: var(--gray3);
background-color: var(--lightRed);
border-top: 1px solid var(--gray2);
border-bottom: 1px solid var(--gray2);
}

#upload-evidence-block {
position: relative;
/*width: 100%;*/
padding: 20px 20px 0 20px;
font-size: 16px;
color: var(--gray3);
}

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

#upload-evidence-row-block {
position: relative;
width: 100%;
padding: 20px;
background-color: var(--white);
}

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

#wordpress_file_upload_block_1 {
width: 100%;
background-color: var(--white);
}

.file_td_clean {
padding: 0 !important;
}

#wordpress_file_upload_textbox_1 {
width: 870px;
}

#wordpress_file_upload_message_1,
#wordpress_file_upload_message_2 {
position: relative;
box-sizing: border-box;
width: 1070px !important;
height: 32px !important;
margin-top: 20px !important;
}

#fileName_1 {
width: 850px;
height: 32px !important;
margin: 0 10px;
padding: 0 10px;
font-family: Calibri;
font-size: 16px;
font-weight: normal;
color: var(--gray3);
background-color: var(--lightBlue2);
border: 1px solid var(--gray2);
}

#fileName_2 {
width: 750px;
height: 32px !important;
margin: 0 10px;
padding: 0 10px;
font-family: Calibri;
font-size: 16px;
font-weight: normal;
color: var(--gray3);
background-color: var(--lightBlue2);
border: 1px solid var(--gray2);
}


table {
position: relative;
margin: 0;
border: 0;
outline: 0;
}

tbody,
tr {
border: 0;
outline: 0;
}

td.file_messageblock_header_td {
border: 0 !important;
margin: 0;
padding: 0;
}

.file_messageblock_header_tr {
display: flex;
align-items: center;
}

.file_messageblock_fileheader_tr {
display: block;
border: 0;
outline: 0;
height: 32px;
margin-top: 10px;
/*overflow: hidden;*/
transition: height 0.5s ease, margin-top 0.5s ease;
}

#wfu_messageblock_1,
#wfu_messageblock_2 {
position: absolute;
z-index: 0;
box-sizing: border-box;
margin-top: 0 !important;
border-radius: 4px;
}

.file_messageblock_header {
display: flex;
align-items: center;
box-sizing: border-box;
width: 600px;
padding: 5px 10px !important;
border: 1px solid var(--gray2);
border-radius: 2px;
}

label.file_messageblock_header_label {
font-weight: normal;
font-size: 16px !important;
line-height: 22px !important;
}

#wfu_messageblock_header_1 {
width: 1030px;
height: 32px;
font-size: 16px;
line-height: 22px;
color: var(--gray2);
}

#wfu_messageblock_header_2 {
width: 1070px;
height: 32px;
font-size: 16px;
line-height: 22px;
color: var(--gray2);
}

#wfu_messageblock_header_1_label,
#wfu_messageblock_header_2_label {
display: table !important;
font-size: 16px !important;
line-height: 22px !important;
color: var(--gray2) !important;
}

div.file_messageblock_header_arrow_down,
div.file_messageblock_header_arrow_up {
margin: 0 !important;
}

div.file_messageblock_file_arrow_down {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border-left: 5px solid transparent !important;
border-right: 5px solid transparent !important;
border-top: 5px solid #555 !important;
margin: 0 !important;
}

div.file_messageblock_file_arrow_up {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border-left: 5px solid transparent !important;
border-right: 5px solid transparent !important;
border-bottom: 5px solid #555 !important;
margin: 0 !important;
}

td.file_messageblock_arrow_td {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: 1px solid var(--gray2) !important;
margin-left: 10px !important;
padding: 0 14px 0 14px !important;
height: 32px;
width: 30px !important;
border-radius: 2px;
background-color: var(--lightGreen);
cursor: pointer;
}

.file_messageblock_filearrow_td {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--gray2) !important;
margin-left: 5px !important;
padding: 0 14px 0 14px !important;
height: 31.333px;
border-radius: 2px;
background-color: var(--lightGreen);
}

.file_messageblock_filesubheader_tr {
display: flex;
width: 600px !important;
margin-left: 25px;
padding: 5px 10px;
border: 1px solid var(--gray2);
border-radius: 2px;
background-color: #FFEEEE;
}

.file_messageblock_filesubheader_td {
border: 0 !important;
}

td.file_messageblock_filesubheaderempty_td {
display: none !important;
width: 0 !important;
margin: 0;
padding: 0;
border: 1px solid var(--gray2);
}

.file_messageblock_filesubheader_message {
width: 600px !important;
padding: 0 !important;
}

.file_messageblock_filesubheader_messagelabel {
line-height: 16px !important;
font-size: 16px !important;
font-weight: normal !important;
color: var(--gray2);
}

#input_1,
#upload_1,
#input_2,
#upload_2 {
height: 32px !important;
background-image: none;
font-size: 14px;
color: var(--white);
background-color: var(--brandBlue);
transition: background-color 0.1s ease;
border-radius: 4px;
cursor: pointer;
}

#uploadform_1,
#uploadform_2 {
height: 32px !important;
}

#wfu_messageblock_2_1 {
margin-top: 0;
}

#wfu_messageblock_header_2_1 {
margin-left: 0 !important;
width: 1070px;
}

td.file_messageblock_filenumber_td {
display: flex;
width: 32px !important;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-weight: normal !important;
font-size: 14px !important;
color: var(--white) !important;
border: 1px solid var(--gray2) !important;
background-color: var(--brandBlue);
border-radius: 2px;
}

div.file_messageblock_fileheader {
display: flex;
align-items: center;
box-sizing: border-box;
padding: 5px 10px !important;
width: 1032px;
height: 32px;
margin-left: 6px !important;
font-size: 16px;
border-radius: 2px;
}

td.file_messageblock_fileheader_td {
margin: 0;
padding: 0;
border: 0 !important;
}

label.file_messageblock_header_label {
font-family: Calibri;
font-weight: normal !important;
font-size: 16px !important;
line-height: 22px !important;
color: var(--gray2) !important;
}

label.file_messageblock_fileheader_label {
font-family: Calibri;
font-weight: normal !important;
font-size: 16px !important;
line-height: 22px !important;
color: var(--gray2) !important;
}

#end-of-upload-evidence {
position: relative;
/*width: 100%;*/
height: 44px;
display: flex;
align-items: center;
padding-left: 20px;
font-size: 18px;
font-weight: bold;
color: var(--gray3);
background-color: var(--lightRed);
border-top: 1px solid var(--gray2);
}

#end-of-review {
position: relative;
width: 100%;
height: 44px;
display: flex;
align-items: center;
padding-left: 20px;
font-size: 18px;
font-weight: bold;
color: var(--gray3);
background-color: var(--lightRed);
border-top: 1px solid var(--gray2);
}

#wordpress_file_upload_block_1,
#wordpress_file_upload_drag_1,
#wordpress_file_upload_block_2,
#wordpress_file_upload_drag_2 {
position: relative !important;
display: block !important;
}

#wordpress_file_upload_block_1,
#wordpress_file_upload_block_2 {
margin-top: 20px;
}

#wordpress_file_upload_drag_1,
#wordpress_file_upload_drag_2 {
margin-bottom: 20px;
}

#wordpress_file_upload_block_2 {
width: calc(100% - 40px);
margin: 0 20px 0 20px;
padding-bottom: 20px;
}

#wordpress_file_upload_block_2 tr {
/*width: 100%;*/
}

#wordpress_file_upload_drag_2 {
/*display: flex !important;
align-items: center;
justify-content: center;*/
}

#wordpress_file_upload_drag_2 div {
/*display: flex;
align-items: center;
justify-content: center;*/
}

div.file_drag_target,
div.file_drag_target_over {
display: block !important;
position: relative !important;
width: 100%;
height: 100px !important;
background-color: var(--lightBlue2) !important;
border: 1px solid var(--gray2) !important;
border-radius: 4px;
color: rgba(102, 102, 102, 0.4) !important;
font-size: 24px !important;
font-weight: 700;
text-align: center;
box-sizing: border-box;
}

#uploaded-files-block {
position: relative;
display: none;
/*width: 100%;*/
line-height: 21.67px;
padding: 5px 10px;
margin-top: 20px;
color: var(--darkBlue);
font-family: Calibri;
font-size: 16px;
background-color: var(--lightGreen);
border: 1px solid var(--gray2);
border-radius: 4px;
}

#ue-error-box {
position: relative;
width: 100%;
padding: 5px 10px;
margin-bottom: 20px;
border: 1px solid var(--gray3);
border-radius: 4px;
background-color: var(--lightBlue2);
color: var(--gray2);
font-size: 16px;
line-height: 20px;
}

#upload-status-bar,
#submit-status-bar {
position: relative;
box-sizing: border-box;
width: 100%;
height: 32px;
padding: 5px 10px;
border: 1px solid var(--gray2);
border-radius: 4px;
background-color: var(--lightBlue2);
color: var(--gray2);
font-size: 16px;
line-height: 22px;
}

#upload-status-bar {
position: absolute;
z-index: 10;
}

#submit-status-bar {
position: absolute;
z-index: 10;
display: block;
width: 1070px;
}

/********** End of File Uploader Styles **********/

/********** Comments Section **********/

#comments-wrapper {
position: relative;
width: 100%;
overflow: hidden;
transition: height 0.5s ease;
}

#comments-container {
position: relative;
width: 100%;
margin: 0 0 20px 0;
}

#comments-block {
position: relative;
width: 100%;
height: 0px;
margin-top: 0px;
overflow: hidden;
transition: height 0.5s ease, margin-top 0.5s ease;
}

#comments-button {
width: 100px;
height: 32px;
margin-top: 20px;
font-size: 14px;
color: var(--white);
background-color: var(--brandBlue);
transform: scale(1);
transition: background-color 0.1s ease;
border-radius: 4px;
cursor: pointer;
}

#comments-heading {
position: relative;
width: 100%;
padding-top: 20px;
font-size: 16px;
color: var(--gray3);
}

#comments-box {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100px;
padding: 10px;
color: var(--gray2);
font-size: 16px;
background-color: var(--lightBlue2);
border: 1px solid var(--gray2);
border-radius: 4px;
overflow-y: auto;
overflow-x: auto;
scrollbar-color: var(--brandBlue) var(--lightBlue2);
}

/********** End of Comments Section **********/

/********** Switch and Slider Styles **********/

/*
#switch-container {
position: absolute;
right: 20px;
width: 100px;
display: flex;
height: 32px;
background-color: transparent;
border-radius: 4px;
z-index: 20;
}

#switch {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
width: 100px;
height: 32px;
background-color: var(--darkGreen);
border-radius: 4px;
z-index: 20;
transition: background-color 0.2s ease;
}

#switch-button {
position: absolute;
top: 0;
box-sizing: border-box;
width: 100px;
height: 32px;
border-radius: 4px;
z-index: 30;
}

#slider-rail {
position: absolute;
left: 6px;
box-sizing: border-box;
width: 88px;
height: 20px;
border: 1px solid var(--gray3);
background-color: var(--white);
border-radius: 2px;
transition: background-color 0.2s ease 0.6s;
}

#switch-slider {
position: relative;
left: 9px;
box-sizing: border-box;
width: 16px;
height: 16px;
background-color: var(--darkGreen2);
border: 1px solid var(--gray1);
border-radius: 2px;
z-index: 20;
transition: left 0.8s ease;
}

#slider-wrapper {
position: relative;
display: flex;
justify-content: center;
width: calc(100% - 460px);
height: 40px;
border-radius: 4px;
overflow: hidden;
}

#done-slider,
#tods-slider {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
font-size: 16px;
font-weight: bold;
line-height: 40px;
background-color: var(--lightBlue);
border-radius: 4px;
color: var(--brandBlue);
transition: left 0.6s ease;
}

#done-slider {
left: -100%;
}

#tods-slider {
left: 100%;
}
*/

/********** End of Switch and Slider Styles **********/

/********** Validation Block Styles **********/

#validation-block-1-wrapper,
#validation-block-2-wrapper {
position: relative;
/*width: 100%;*/
height: 0px;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
overflow: hidden;
transition: height 0.5s ease;
}

#validation-block-1,
#validation-block-2 {
position: relative;
box-sizing: border-box;
width: 100%;
height: 44px;
line-height: 16px;
padding: 16px 20px 12px 20px;
color: var(--gray3);
font-size: 16px;
text-align: center;
}

.validation-row-wrapper {
position: relative;
width: 100%;
overflow: hidden;
height: 0px;
transition: height 0.5s ease;
}

.validation-row-container {
position: relative;
width: 100%;
border-top: 1px solid var(--gray2);
}

.validation-row {
position: relative;
width: 100%;
padding: 14px 20px;
font-size: 16px;
color: var(--gray3);
background-color: var(--lightRed2);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

#summary-review-wrapper {
position: relative;
/*width: 100%;*/
background-color: var(--white);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
}

#submit-data-sheet-header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 43px;
font-size: 18px;
font-weight: bold;
color: var(--gray3);
background-color: var(--lightRed);
border-top: 1px solid var(--gray2);
}

#summary-box {
position: relative;
width: 100%;
height: 0px;
margin-top: 0px;
overflow: hidden;
transition: height 0.5s ease, margin-top 0.5s ease;
}

#summary-container {
position: relative;
width: 100%;
padding-bottom: 20px;
}

/*#summary-data-block {
position: relative;
width: 100%;
height: 0px;
margin-top: 0px;
overflow: hidden;
transition: height 0.5s ease, margin-top 0.5s ease;
}*/

#summary-data-title {
position: relative;
width: calc(100% - 40px);
line-height: 16px;
/*margin: 0 0 20px 0;*/
margin: 0 20px 20px 20px;

text-align: center;
padding: 10px;
font-size: 16px;
font-weight: bold;
color: var(--gray3);
border: 1px solid var(--gray2);
border-radius: 4px;
background-color: var(--lightBlue2);
}

/*#summary-data-title span {
display: inline-block;
padding: 10px;
font-size: 16px;
font-weight: bold;
color: var(--gray3);
border: 1px solid var(--gray2);
border-radius: 4px;
background-color: var(--lightBlue2);
}*/

#summary-data-wrapper {
position: relative;
/*display: none;*/
width: 100%;
/*height: 0px;*/
padding-left: 20px;
padding-right: 20px;
/*background-color: var(--white);
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);*/
/*margin-top: 0px;*/
overflow: hidden;
transition: height 0.5s ease, margin-top 0.5s ease;
}

#summary-data-container {
position: relative;
width: calc(100% - 40px);
padding: 10px 20px;
margin: 0 20px 0 20px;
background-color: var(--lightBlue2);
border: 1px solid var(--gray2);
border-radius: 4px;
color: var(--gray3);
font-family: Calibri;
font-size: 18px;
}

#summary-data-container span {
display: inline-block;
width: 161px;
margin-right: calc(100% - 161px);
margin-bottom: 10px;
font-weight: bold;
}

#review-data-wrapper {
position: relative;
width: 100%;
overflow: hidden;
height: 0px;
transition: height 0.5s ease;
}

#review-data-container {
position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
}

#review-data-container-1,
#review-data-container-2 {
position: relative;
flex-basis: 100%;
padding: 20px 20px 0 20px;
font-size: 16px;
color: var(--gray3);
border-top: 1px solid var(--gray2);
}

#review-data-container-1 {
border-top: 0;
}

/*#review-data-container-1 {
border-right: 1px solid var(--gray2);
}*/

#review-data-box,
#submit-data-sheet-box {
position: relative;
width: 100%;
}

#review-button-wrapper,
#print-button-wrapper {
display: flex;
align-items: center;
justify-content: left;
width: 100%;
margin: 20px 0 20px 0;
}

#ue-button-wrapper {
position: relative;
display: flex;
align-items: center;
/*width: 100%;*/
height: 60px;
border-left: 1px solid var(--gray2);
border-right: 1px solid var(--gray2);
overflow: hidden;
}

#ue-button-container {
position: relative;
display: flex;
align-items: center;
width: 100%;
margin: 0;
}

#ue-message-block {
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: calc(100% - 222px);
height: 60px;
padding: 0;
line-height: 28px;
font-size: 16px;
color: var(--gray3);
}

#ue-button-block {
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 222px;
height: 60px;
border-left: 1px solid var(--gray2);
}

#ue-button,
#review-data-button,
#print-data-button {
position: relative;
width: 150px;
height: 32px;
font-size: 14px;
color: var(--white);
background-color: var(--brandBlue);
transform: scale(1);
transition: background-color 0.1s ease;
border-radius: 4px;
cursor: pointer;
}

/*#print-data-button {
position: absolute;
right: 20px;
width: 120px;
height: 32px;
margin-top: 21.67px;
font-size: 14px;
color: var(--white);
background-color: var(--brandBlue);
transform: scale(1);
transition: background-color 0.1s ease;
border-radius: 4px;
cursor: pointer;
}*/

/********** End of Validation Row 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; }
}