/*

    Shadow style for Raven elements:
    https://tobiasahlin.com
    
*/

@font-face {
    font-family: R-Regular;
    src: url('/fonts/Roboto/Roboto-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: R-Italic;
    src: url('/fonts/Roboto/Roboto-Italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: R-Medium;
    src: url('/fonts/Roboto/Roboto-Medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: R-Bold;
    src: url('/fonts/Roboto/Roboto-Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: R-BoldItalic;
    src: url('/fonts/Roboto/Roboto-BoldItalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: H-Regular;
    src: url('/fonts/Hind/hind-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: H-Medium;
    src: url('/fonts/Hind/hind-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: H-Bold;
    src: url('/fonts/Hind/hind-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');







/*SET properties that do not depend on screen size:*/


/*
.title, .title2, .dialogTitle, .pagingBar, .fieldArea, .textbox01, .textarea01 {
    font-family: H-Regular, Helvetica, sans-serif;
}

.button, .fieldLabel, .fieldLabel3 {
    font-family: H-Medium, Helvetica, sans-serif;
}

body,
#Welcome, #ItemKey,
.textbody, .anchor2, .payload, .payload2 {
    font-family: R-Regular, Arial, Helvetica, sans-serif;
}

.rvnHeading2, .rvnText2, .rowH2, .rowAction {
    font-family: R-Medium, Arial, Helvetica, sans-serif;
}
 
.Vi-SapientText2, .Vi-SapientText3, .fieldArea2, .keyDesc, bookTitle, .fieldLabel2, .fieldLabel3, .h2StyleA {
    font-family: R-Italic, Arial, Helvetica, sans-serif;
}

.Vi-SapientText1, .rvnBold, .rvnHeading1, .h2StyleB, .h2StyleC {
    font-family: R-Bold, Arial, Helvetica, sans-serif;
}

#Version, #MissionStatement, #ItemKeyDesc,
.raven1, .rvnHeading3, .rowH1, .rowTotal, .rvnLatin, .mobileEmphasis, .anchor3 {
    font-family: R-BoldItalic, Arial, Helvetica, sans-serif;
}
*/



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, .button {
    /*color: #01579B;*/
}

body {
    font-family: 'Inter', sans-serif;
    cursor: default;
    /*
    letter-spacing: 0.025em;
    font-weight: 100;
    background: linear-gradient(135deg, #1a3a4a 0%, #0d2535 40%, #1b3d4f 100%);
    */
    min-height: 100vh;
}



.Vi-SapientText2 {
    margin-top: 30px;
    margin-bottom: 10px;
}

.Vi-SapientText3 {
    line-height: 40px;
}



.payload, .payload2, .small2 {
    overflow-y: auto;
    padding: 3px;
}

select {
    font-weight: inherit;
    font-size: inherit;
}

input, textarea, select,
.textbox01, .textarea01 {
    outline: hidden;
}

#RavenHeader01Left, #RavenHeader02Left,
.fieldArea, .dialogBody, .payloadCol1,
.keyArea1, .keyArea2, .buttonGridRight {
    text-align: left;
}


#valResult, #Version, #EOF, #RavenLogo2A, #ItemKeyDesc, #ItemKey, #MissionStatement, #NsBanner, 
.idxHeader, .classification, .title, .title2, .title3,
.buttonBar, .formButton, .dialogButtons, .button, .pagingBar, .textbox02,
.gridContainerTitle, .noData, .accountActions, .homeActions, .infoContent, .rvnHeading1,
.signUpLink, .signUpText, .checkoutActions,
.valResultNeutral, .valResultSuccess, .valResultError {
    text-align: center;
}

#RavenHeader01Right, #RavenHeader02Right, #repoUnread,
.fieldLabel, .fieldLabel3, .payloadCol2, .find,
.buttonGridLeft {
    text-align: right;
}

body {
    margin: 0;
}

.payloadContainer, .itemLevel1, .itemLevel2, .itemLevel3 {
    margin: 5px;
}

#ItemKey {
    margin-bottom: 15px;
}

#HeaderIconDomain, #HeaderIconApp, #HeaderIconRepo {
    margin-top: -4px;
}

#ViewContainer2 {
    margin-top: 1px;
}

.dialogButtons {
    margin-top: 10px;
}

#EOF,
.rvnHeading3 {
    margin-top: 20px;
}

#MissionStatement {
    margin-top: 35px;
}

.rvnHeading2 {
    margin-top: 45px;
}

h2 {
    line-height: 1.3;
}

h2Style1 {
}

h2Style2 {
}

.idxHeader {
    line-height: normal;
}

#IdxTitle {
    padding-top: 35px;
    padding-bottom: 20px;
}

#Vi-SapientLogo {
    height: auto;
}

#InfoTitle, #InfoTitle2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#InfoTitle {
    width: 310px;
    height: auto;
    margin-top: 15px;
}

#InfoTitle2 {
    width: 100px;
    margin-top: 30px;
    letter-spacing: -0.045em;
}

.title, .title2 {
    letter-spacing: -0.01em;
}

.title3, .h2StyleA, .h2StyleB, .h2StyleC {
    letter-spacing: -0.025em;
}

.formAction1, .formAction2, .formActionLabel {
    margin-bottom: 5px;
}

#MissionStatement {
    margin-bottom: 8px;
}

.dialogButtons {
    margin-bottom: 20px;
}

footer {
    margin-bottom: 70px;
}

#LogOut {
    margin-left: 22px;
}

#Btn_Find {
    margin-left: 7px;
}

.findInputSmall,
.valResultNeutral, .valResultSuccess, .valResultError {
    border-style: solid;
    border-width: 1px;
}

#NsBanner,
main, footer {
    margin-left: 15px;
    margin-right: 15px;
}

body,  
#valResult,
.gridRaven {
    /*background-color: whitesmoke;*/
}

#PagingA {
    padding-top: 5px;
    color: #fff;
    background-color: #37474f;
}

#valResult, 
.rowAction, .formAction3 {
    padding-left: 10px;
}

#CurrentUser, #ViewContainer2, 
.subPara, .appInfo, .payloadContainer, .dialogTitle, .checkoutActions {
    /* padding-left: 15px; */
    display: contents;
}

.rvnSubPara1, .rvnSubParaNum1 {
    padding-left: 60px;
}

.rvnSubPara2 {
    padding-left: 120px;
}

#valResult,
.formAction1 {
    padding-right: 10px;
}

#ViewContainer2, 
.keySet, .rowTotal, .formAction2, .appInfo, .payloadContainer, .dialogTitle, .checkoutActions {
    padding-right: 15px;
}

.rowH1, .rowH2, .rowDesc {
    padding-right: 20px;
}

#RavenHeader02Left, #More {
    padding-top: 5px;
}

.findArea {
    padding-top: 5px;
    display: flex;
    justify-content: flex-end;
}

.title, .title3, .dialogTitle, .rowDetails {
    padding-top: 10px;
}

.title2 {
    padding-top: 18px;
}

.keyArea1 {
    padding-top: 13px;
}

.keyArea2 {
    padding-top: 20px;
}

.title, .title2, .title3 {
    padding-bottom: 5px;
}

.textBodyContainer {
    padding-bottom: 50px;
}

.mainContent, .mainBody2 {
    padding-top: 0px;
}

#RavenHeader01Left {
    padding: 3px 0 2px 15px;
}

#RavenHeader01Right {
    padding: 3px 15px 2px 0;
}

#RavenHeader03, #RavenHeader04 {
    padding: 15px;
}

.infoItem {
    padding: 10px 0;
}

.mainBody {
    padding: 0 15px 50px 15px;
}

#ButtonBarA, #ButtonBarB {
    /*border-top: 1px solid #455A64;*/
    background-color: #37474f;
}
.grid-container {
    border: 1px solid #85888a;
    background: #fff;
    color: #2a4a58;
    margin-top: 1em;
    border-radius: 14px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11);
}

#PagingA, #ButtonBarA, #ButtonBarB, #InfoContentApp,
.gridEven, .gridOdd {
    /*
    border-right: 1px solid #455A64;
    border-left: 1px solid #455A64;
    */
}

#RavenLogo2B {
    height: 100px;
    width: 100px;
    background-color: #ddd;
    border-radius: 5px;
}



#RavenLogo2B, #InfoContainer, #InfoTitle,
.fieldContainer, .textBodyContainer, .gridContainer, .dropdown-content, .dialogBody,
.itemLevel1, .itemLevel2, .itemLevel3,
.large, .valResultNeutral, .valResultSuccess, .valResultError {
    /*Shadow-Shorter*/
    /*box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);*/
}

.itemLevel1, .itemLevel2, .itemLevel3,
.fieldLabel, .fieldLabel3, .dialogBody, .requiredField2 {
    font-weight: 200;
}

.buttonBar, .pagingBar, .rvnSubParaNum1, .formButton, .rowDesc2 {
    font-weight: 300;
}

#RavenHeader01, #RavenHeader02,
.fieldArea, .rvnHeading1, .rowH2, .rowAction, .dialogField {
    font-weight: 400;
}


.title, .title2 {
    font-weight: 500;
}

#ViewHelp,
.viewHelp2, .formAction1, .formAction2, .formAction3 {
    font-weight: 600;
}

.title3 {
    font-weight: 700;
}

h2,
#IdxTitle, #InfoTitle2 {
    font-weight: 900;
}

.rvnSubPara1, .rvnSubPara2 {
    list-style-type: square;
}

.rvnSubParaNum1 {
    list-style-type: decimal;
}

.valResultNeutral, .valResultSuccess, .valResultError {
    padding: 8px;
    border-color: black;
    border-radius: 4px;
}

.title, .title2, .title3, .rowHeading, .pagingField, .keySet, .grouped, .find, .appInfo, .rvnLatin {
    white-space: nowrap;
}

.payloadTable {
    width: 100%;
    border-collapse: collapse;
}

.rowArrow {
    color: #3F51B5;
}

.fieldLabel, .fieldLabel3, .rowCurrentRecord, .rowParent, .rowUnderline, .payloadTable, .dialogField 
.formButton:hover, .button:hover, .small2:hover 
{
    color: black;
}

#LogOut,
.anchor {
    color: #EEEEEE;
}

.valResultNeutral, .valResultSuccess, .valResultError, .dialogTitle, .large, 
#LogOut:hover, #CurrentUser:hover,
.anchor:hover {
    color: white;
}

#RavenHeader01, #RavenHeader02, #IdxTitle,
.anchor, .pagingBar, .dialogBody, .payload, .payload2, viewHelp2 {
    color: whitesmoke;
}

.idxHeader, .title3 {
    color: #1A237E;
}

.rowH1, .rowTotal {
    color: #3949AB;
}

body,
.rowSubtext, .h2StyleC, .fieldContainer, .textarea03 {
    color: #37474F;
}

.formAction1, .formAction2, .formAction3 {
    color: #304FFE;
}

.gridTopic {
    border: 1px solid #455A64;
    padding-top: 14px;
    padding-bottom: 14px;
    color: #1A237E;
}

.gridTopicUnreadAmber {
    background-color: #FFE082;
}

.gridTopicUnreadOrange {
    background-color: #FFCC80;
}

.gridTopicUnreadDeepOrange {
    background-color: #FFAB91;
}

.gridTopicUnreadRed {
    background-color: #EF9A9A;
}

#RavenHeader01, #IdxTitle,
.buttonBar, .dialogBody {
    background-color: #455A64;
}

#RavenHeader02 {
    background-color: #37474F;
}

#RavenHeader03, #RavenHeader04 {
    background-color: #F9AA33;
}

#InfoContentGeneral, #InfoContentDomain,
.rowEven, .gridEvenDefault, .calendarRowEven {
    /*background-color: #C1DAE9;*/
}

#InfoContentApp,
.rowOdd, .gridOddDefault, .calendarRowOdd {
    background-color: #e6eaed;
}

.gridEvenUnreadAmber {
    background-color: #FFECB3;
}

.gridEvenUnreadOrange {
    background-color: #FFE0B2;
}

.gridEvenUnreadDeepOrange {
    background-color: #FFCCBC;
}

.gridEvenUnreadRed {
    background-color: #FFCDD2;
}

.gridOddUnreadAmber {
    background-color: #FFF8E1;
}

.gridOddUnreadOrange {
    background-color: #FFF3E0;
}

.gridOddUnreadDeepOrange {
    background-color: #FBE9E7;
}

.gridOddUnreadRed {
    background-color: #FFEBEE;
}

.rowCurrentRecord {
    background-color: #FFB74D;
}

.rowParent {
    background-color: #FFF9C4;
}

.gridEven, .gridOdd {
    border-bottom: 1px solid #455A64;
    border-top: 1px solid #f5f7f9;
    padding: 8px;
}

#InfoContentGeneral, #InfoContentDomain, #InfoContentApp,
.gridEven, .rowEven, calendarRowEven, .gridOdd, .rowOdd, calendarRowOdd {
    color: #1A237E;
}

.rowUnderline {
    border-bottom-width: 4px;
}

.textarea01, .textarea02 {
    min-height: 200px;
    resize: none;
}

.textarea01 {
    padding: 8px 15px 4px 15px;
}

.textarea02 {
    padding: 8px;
}

a,
#More, #MoreMenu, #InfoTitle,
.textbox03, .rowArrow, .gridRow, .button,
a:hover,
#LogOut:hover, #Raven:hover, #HeaderLabelDomain:hover, #HeaderLabelApps:hover, #HeaderLabelRepo:hover, #CurrentUser:hover,
#Vi-SapientAudio:hover,
#RavenHeader03:hover, #RavenHeader04:hover,
.anchor:hover, .anchor2:hover, .anchor3:hover,
.actionCreateUpdate:hover, .actionCreateTask:hover, .actionCreateMeeting:hover, .actionSetStatus:hover,
.actionAbout:hover, .actionEnter:hover, .actionMenu:hover,
.formAction1:hover, .formAction2:hover, .formAction3:hover, .formButton:hover {
    cursor: pointer;
}

.anchor2, .anchor3,
a:hover,
#LogOut:hover, #Raven:hover, #HeaderLabelDomain:hover, #HeaderLabelApps:hover, #HeaderLabelRepo:hover, #CurrentUser:hover,
#RavenHeader03:hover, #RavenHeader04:hover,
.anchor:hover,
.actionCreateUpdate:hover, .actionCreateTask:hover, .actionCreateMeeting:hover, .actionSetStatus:hover,
.actionAbout:hover, .actionEnter:hover, .actionMenu:hover,
.formAction1:hover, .formAction2:hover, .formAction3:hover,
.button:hover, .formButton:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.anchor2 {
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for WebKit */
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}


#RavenHeader01, #RavenHeader02, #InfoContainer,
.rowTitle, .treeRow, .blockRow, .blockRow2,
.buttonGrid, .fieldRow, .fieldRow2, .fieldRowFirst {
    display: grid;
}

a {
    text-decoration: none;
}

#RavenHeader01,
.idxHeader {
    /*border-top: 1px solid whitesmoke;*/
}

#RavenHeader02 {
    grid-template-columns: 1fr 15%;
    padding: 3px 15px;
}

#HeaderIconDomain, #HeaderIconApp, #HeaderIconRepo, #RavenLogo2B,
.middle {
    vertical-align: middle;
}

#MoreMenu {
    background-color: #B3E5FC;
    min-width: 80px;
}

#RavenHeader01, .buttonGrid {
    grid-template-columns: 1fr 1fr;
}

.rowTitle {
    grid-template-columns: 20% 1fr 20%;
}

#InfoContainer {
    grid-template-columns: 1fr 1fr 1fr;
}

.blockRow {
    grid-template-columns: 28px 1fr;
}

.blockRow2 {
    grid-template-columns: 100px 1fr;
}

.treeRow {
    grid-template-columns: 28px 28px 1fr;
}

.fieldRow, .fieldRowFirst {
    grid-template-columns: 35% 1fr;
}

.fieldRow2 {
    grid-template-columns: 1fr 30%;
}

.blockRow, .blockRow2 {
    padding-top: 10px;
}

.fieldLabel, .fieldLabel3, .fieldArea {
    padding: 18px 15px 14px 15px;
}

.findInputSmall {
    width: 70%;
    border-color: #BDBDBD;
    padding-left: 5px;
}

.buttonBar {
    overflow: auto;
    padding: 2px 0;
}

    .buttonBar {
        
    }

.topRadius {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.formButton {
    margin: 2px;
    min-width: 30px;
    min-height: 23px;
    background-color: #ECEFF1;
    padding: 2px 5px 2px 5px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    transition: all 0.2s;
}

.pagingBar {
    /*background-color: #607D8B;*/
    border-bottom: 1px solid #f0f4f7;
}

.pagingField {
    margin: 3px 10px 0px 10px;
}

.payloadCol1, .payloadCol2 {
    padding-left: 5px;
    padding-right: 5px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
}

.payloadCol2 {
    border-right: 1px solid black;
}

.valResultNeutral {
    /*Indigo A700*/
    background-color: #304FFE;
}

.valResultSuccess {
    /*Green A700*/
    background-color: #00C853;
}

#NsBanner,
.valResultError {
    /*Red A700*/
    background-color: #D50000;
}

#InfoContainer,
.fieldContainer, .textBodyContainer {
    border: 1px solid #455A64;
}

.gridContainerTitle, .noData {
    color: #455A64;
}

.fieldRowFirst {
    border-top: 0;
}

.fieldArea {
    overflow-wrap: break-word;
}

.textbox01 {
    padding: 4px;
}

.textbox02 {
    width: 60px;
}

.textbox03 {
    width: auto;
}


.textarea03 {
    overflow-y: scroll;
    border: none;
}

.gridContainerTitle {
    margin: 20px 0 0 0;
    padding: 10px 0 10px 15px;
}

#Btn_Find,
.gridContainer {
    overflow: hidden;
}

.gridRaven {
    /*    Set visibility to hidden so that the grid is not shown when the page loads.  The grid will be unhidden by OnLoad()*/
    visibility: hidden;
    overflow-x: hidden;
}


.valResultNeutral, .valResultSuccess, .valResultError, .pagingField, .button, 
.treeRowContent, .textBeforeIcon, .formActionLabel, .formAction2, .viewDetail, .rowAction, .dropdown,
.fieldLabel, .fieldLabel3, .fieldArea {
    display: inline-block;
}

.verticalContainer {
    display: table;
    height: 100%;
}

.middle {
    display: table-cell;
}

.dialogBody {
    min-width: 100px;
    position: absolute;
    z-index: 9;
    border: 1px solid #FFFFFF;
    top: 50%;
    left: 50%;
    right: 50%;
}

.dialogBody, .dialogTitle {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.dialogTitle {
    padding-bottom: 10px;
    z-index: 10;
    background-color: #039BE5;
}

.dialogTitle:hover {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
}

.dialogField {
    margin-top: 3px;
    margin-bottom: 2px;
    scroll-behavior: auto;
}

.payload {
    height: 200px;
    background-color: white;
}

.invisible, .dialogBody {
    display: none;
}

.hidden {
    visibility: hidden;
}

.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    width: max-content;
    z-index: 1;
    text-align: left;
    background-color: #B3E5FC;
}

.dropdown-item {
    color: black;
    padding: 6px 6px;
    text-decoration: none;
    display: block;
}

.dropdown-item:hover {
    color: whitesmoke;
    background-color: #2962FF;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.itemLevel1, .itemLevel2, .itemLevel3 {
    border: 1px solid #bbb;
    margin: 15px;
}

.itemLevel1 {
    /*Green 200*/
    background-color: #A5D6A7;
}

.itemLevel2 {
    /*Yellow 200*/
    background-color: #FFF9C4;
}

.itemLevel3 {
    /*Orange 200*/
    background-color: #FFAB91;
}


.fieldSection, .textarea01, .textarea02, .textarea03, .textbox01, .verticalContainer, .dialogField {
    width: 100%;
}

.button {
    border-width: 0;
    border-radius: 10px;
    line-height: 1.25em;
    margin: 2px 3px;
    padding: 5px 10px 3px 10px;
    vertical-align: baseline;
}


.button:hover {
    background-color: #FDD835;
}

.large {
    background-color: #04538f;
    padding: 10px;
}

.button.large:hover {
    color: black;
    background-color: #00E676;
}


.grow-wrap {
    display: grid;
}

.grow-wrap::after {
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
}

.grow-wrap > textarea {
    resize: none;
    overflow: hidden;
}

.grow-wrap > textarea,
.grow-wrap::after {
    border: 1px, solid black;
    padding: 0.5rem;
    font: inherit;
    grid-area: 1/1/2/2;
}




#CalendarTitle {
    font-size: 28px;
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 15px;
}

.calendarRow {
    display: grid;
    grid-template-columns: 15% 14% 14% 14% 14% 14% 15%;
    border-left: 2px solid grey;
    border-bottom: 2px solid grey;
    border-right: 2px solid grey;
}

.calendarHeaderRow {
    border-top: 2px solid grey;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.calendarHeaderCell, .cellContent {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.calendarRefCell {
    color: white;
    background-color: darkblue;
    border-radius: 5px;
}

.calendarRefMonth {
    color: black;
}

.calendarTodayCell {
    color: orangered;
}

.calendarRefCell:hover, .calendarRefMonth:hover, .calendarMonth:hover, .calendarTodayCell:hover {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.calendarHeaderCell, .calendarRefCell, .calendarRefMonth, .calendarMonth, .calendarTodayCell {
    font-size: 30px;
    font-weight: bold;
    padding: 5px;
    margin-top: 3px;
}

.calendarMonth {
    color: gray;
    font-weight: 200;
    font-size: 25px;
}

.calendarAppts {
    color: darkblue;
    font-weight: 800;
    font-size: 20px;
}




/*SET properties that are based on screen size:*/


/* Extra small screen */
@media only screen and (max-width: 768px) {

    body,
    .dialogBody {
        line-height: 27px;
    }

    #Password_CB, #ConfirmPassword_CB, #TermsAgree_CB, #RememberMe_CB {
        width: 20px;
        height: 20px;
    }

    .mainBody2 {
        padding-bottom: 50px;
        padding-right: 1%;
        padding-left: 1%;
    }

    .mainPageContent {
        margin-left: 3%;
        margin-right: 3%;
    }

    .fieldContainer, .fieldArea2 {
        margin-bottom: 15px;
    }

    .emoji2 {
        font-size: 16px;
    }

    .rowAction {
        display: none;
    }

    .formActionLabel, .formAction1, .formAction2, .formAction3 {
        font-size: 17px;
    }

    #RavenHeader01,
    .formButton, .fieldLabel, fieldLabel2, .fieldLabel3, .fieldArea, .fieldArea2, .keyDesc, .textbox03,
    .rowArrow, .dialogBody, .payloadCol1, .payloadCol2, .checkboxLabel {
        font-size: 18px;
    }


    
    .find, .keyArea1, .keyArea2, .rowH2, .rowAction, .payload, .payload2,
    .formAction1:hover, .formAction2:hover, .formAction3:hover {
        font-size: 19px;
    }


    #ItemKey, #Btn_Goto_Page, #Btn_Prev_Page, #Btn_Next_Page,
    .button, .rowArrow, .rowDesc, .rowDesc2, .dropdown-item, .textbox01, .textbox02, .pagingBar, .findInputSmall {
        font-size: 20px;
    }

    body,
    .rowH1, .rowTotal, .infoItem, .rvnText, .rvnText2, .rvnSubPara1, .rvnSubPara2, .rvnSubParaNum1, .dialogTitle,
    .actionCreateUpdate:hover, .actionCreateTask:hover, .actionCreateMeeting:hover, .actionSetStatus:hover, 
    .actionAbout:hover, .actionEnter:hover, .actionMenu:hover {
        font-size: 21px;
    }

    #Version, #ItemKeyDesc,
    .Vi-SapientText2, .gridContainerTitle, .emoji, .rowH1, .title2, .rvnHeading3, .h2StyleA, .h2StyleB,
    .rowArrow:hover {
        font-size: 22px;
    }

    #ViewHelp,
    .viewHelp2, .rvnHeading2, .textarea01, .textarea02, .textarea03 {
        font-size: 23px;
    }

    #MissionStatement,
    .emoji4, .requiredField, .requiredField2,
    .rowArrow:hover {
        font-size: 24px;
    }

    .Vi-SapientText3, .raven1, .title, .rvnHeading1, .h2StyleC, .viewSymbol2 {
        font-size: 25px;
    }

    #RavenHeader02,
    .emoji3 {
        font-size: 27px;
    }

    .title3 {
        font-size: 28px;
    }

    #InfoTitle2 {
        font-size: 41px;
    }

    #MoreMenu {
        margin-left: -130px;
    }

    #Vi-SapientLogo {
        width: 80%;
    }

    .Vi-SapientText1 {
        font-size: 40px;
    }

    .Vi-SapientText2 {
        margin-top: 15px;
    }

    .textBody {
        padding: 0 5%;
    }
}

/* Small screen */
@media only screen and (min-width: 768px) and (max-width: 991px) {

    .mainBody2 {
        padding-bottom: 50px;
        padding-right: 10%;
        padding-left: 10%;
    }

    .fieldContainer {
        margin-bottom: 10px;
    }

    .mainPageContent {
        margin-left: 5%;
        margin-right: 5%;
    }

    #Vi-SapientLogo {
        width: 70%;
    }

    .textBody {
        padding: 0 10%;
    }
}

/* Medium screen */
@media only screen and (min-width: 991px) and (max-width: 1199px) {

    .mainBody2 {
        padding-bottom: 50px;
        padding-right: 20%;
        padding-left: 20%;
    }

    .fieldContainer {
        margin-bottom: 0px;
    }

    .mainPageContent {
        margin-left: 10%;
        margin-right: 10%;
    }

    #Vi-SapientLogo {
        width: 60%;
    }

    .textBody {
        padding: 0 15%;
    }
}

/* Large screen */
@media only screen and (min-width: 1199px) {

    .mainBody2 {
        /*
        padding-bottom: 50px;
        padding-right: 30%;
        padding-left: 30%;
        */
    }

    .fieldContainer {
        margin-bottom: 0px;
    }

    .mainPageContent {
        margin-left: 15%;
        margin-right: 15%;
    }

    #Vi-SapientLogo {
        width: 45%;
    }

    .textBody {
        padding: 0 17%;
    }
}

/* Small, Medium, and Large screen */
@media only screen and (min-width: 768px) {

    .Vi-SapientText1 {
        font-size: 40px;
    }

    .Vi-SapientText2 {
        font-size: 22px;
        margin-top: 15px;
    }

    .Vi-SapientText3 {
        font-size: 25px;
    }


    body,
    .dialogBody {
        /*line-height: 25px;*/
    }

    #Password_CB, #ConfirmPassword_CB, #TermsAgree_CB, #RememberMe_CB {
        /*
        width: 20px;
        height: 20px;
        */
    }

    .emoji2 {
        font-size: 13px;
    }


    .formActionLabel, .formAction1, .formAction2, .formAction3 {
        font-size: 14px;
    }

    #RavenHeader01,
    .formButton, .pagingBar,
    .rowArrow, .dialogBody, .payloadCol1, .payloadCol2, .findInputSmall {
        font-size: 15px;
    }

    .button, .find, .keyArea1, .keyArea2, .rowH2, .rowAction, .payload, .payload2, .fieldArea2, .keyDesc, .textbox03,
    .formAction1:hover, .formAction2:hover, .formAction3:hover {
        font-size: 16px;
    }


    #ItemKey,
    .rowArrow, .rowDesc, .rowDesc2, .dropdown-item, .fieldLabel, .fieldLabel2, .fieldLabel3, .fieldArea,
    .checkboxLabel {
        font-size: 17px;
    }


    body, select,
    #Btn_Goto_Page, #Btn_Prev_Page, #Btn_Next_Page,
    .rowH1, .rowTotal, .infoItem, .rvnText, .rvnText2, .rvnSubPara1, .rvnSubPara2, .rvnSubParaNum1, .dialogTitle,
    .textbox01, .textbox02, .pagingBar,
    .actionCreateUpdate:hover, .actionCreateTask:hover, .actionCreateMeeting:hover, .actionSetStatus:hover,
    .actionAbout:hover, .actionEnter:hover, .actionMenu:hover {
        font-size: 18px;
    }

    #Version, #ItemKeyDesc,
    .gridContainerTitle, .emoji, .rowH1, .title2, .fieldArea, .rvnHeading3,
    .rowArrow:hover {
        font-size: 19px;
    }

    #ViewHelp,
    .viewHelp2, .textarea01, .textarea02, .textarea03, .rvnHeading2, .h2StyleA, .h2StyleB {
        font-size: 20px;
    }

    #MissionStatement,
    .emoji4, .requiredField, .requiredField2,
    .rowArrow:hover {
        font-size: 21px;
    }

    .raven1, .title, .title3, .rvnHeading1, .viewSymbol2 {
        font-size: 22px;
    }

    #RavenHeader02,
    .emoji3 {
        font-size: 23px;
    }

    .title3, .h2StyleC {
        font-size: 25px;
    }

    #InfoTitle2 {
        font-size: 38px;
    }

    #MoreMenu {
        margin-left: -109px;
    }

}


@media only screen {

    .fieldRow, .fieldRow2 {
        border-top: 1px solid whitesmoke;
    }

    .gridTopic {
        background-color: #80CBC4;

    }

    .fieldLabel, .fieldArea, .textarea03, .button {
        background-color: #B2DFDB;
    }

    .fieldLabel3 {
        background-color: #B3C0FC;
    }

    .textBodyContainer {
        background-color: #D1FDD7;
    }

    #RavenHeader03, #RavenHeader04, #ItemKey, 
    .centered {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .appInfo2 {
        padding: 8px;
        border-radius: 3px;
    }

}

@media only print {

    body,
    .fieldLabel, .fieldLabel3, .fieldArea {
        background-color: white;
    }

    .fieldLabel, .fieldLabel3 {
        border-right: 1px solid grey;
    }

    .fieldRow, .fieldRow2 {
        border-top: 1px solid grey;
    }

    .find, .buttonBar, .buttonBarB, .formAction, .rowAction {
        visibility: hidden;
    }
}