@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--oc1: #00284c;
	--oc2: #53bbad;
	--oc2dark: #479f94;
	--oc2light: #afd4cf;
	--oc3: #29bdef;
	--oc3dark: #21a0ca;
	--oc3light: #b7e4f3;
	--green: #008800;
	--red: #CC0000;
	--lightGrey: #CCCCCC;
	--greyTint: #E5E5E5;
	--oc4: #1f99c2; 
}
body { background-image:none !important; background-color:#FFF !important; font-family: 'Urbanist', sans-serif !important; font-size:14px; font-weight:300; }
li, ol, h1, .xp, .xpnum, input, select, option, textarea {font-family: 'Urbanist', sans-serif !important;}
h1, .h1actual { font-weight: 100 !important; font-size:26px; }
.h1 { font-weight: 600 !important; font-size:26px; }
th { top: 46px; } /* this is to cope with the 46px header that will HIDE these */
.noHeader th { top: 0px; }

a { color: var(--oc3dark); text-decoration: none; }
.hasDatepicker { width:95px !important; }

.back-oc1 { background-color: var(--oc1) !important; color:#FFF !important; }
.back-oc2 { background-color: var(--oc2) !important; }
.back-oc3 { background-color: var(--oc3) !important; }
.back-oc1light { background-color: var(--oc2light) !important; }
.back-oc2light { background-color: var(--lightGrey) !important; }
.back-oc3light { background-color: var(--oc3light) !important; }

.submitlg { background-color: var(--oc1); }
.submitlg:hover { background-color: var(--oc3dark); }
.submitlg1 { background-color: var(--oc3dark); }
.submitlg1:hover { background-color: var(--oc1); }
.submitlg2 { background-color: var(--oc2dark); }
.submitlg2:hover { background-color: var(--oc1); }

.rroundIcon { width:17px; background-color:#000; border-radius:100%; padding:2px; }

.masHeader { position: fixed; z-index: 10000; width: 100%; top: 0px; left: 0px; border-bottom:6px solid var(--oc2);}
.masHeaderContent { line-height:30px; text-align:left; padding:3px 10px 3px 15px; background-color:#000; color:#FFF; }
.masHeaderContent a { color:#FFFFFF; text-decoration:none; }
.masHeaderContent a:hover { color:var(--greyTint); text-decoration:none; }
.manavbox { width:170px; padding:0px; background-color:var(--greyTint); height:100%; position:fixed; z-index:100000; top:46px; left:0px; }
.manavbox a { display:block; padding:5px; padding-left:15px; line-height:25px; font-size:16px; color:#000; border-bottom:1px solid #d5d5D5; text-decoration: none; }
.manavbox a:hover { background-color:#757575; color:#FFF; text-decoration:none; }
.mainContainer { min-height:450px; margin-left:180px; margin-top:46px; padding-right:10px; }
.mainContainer.pictureBack { margin-left: 170px; margin-top: 35px; padding-right:0px; }
.catchlineContainer { margin-top:40px; background-color:#FFFFFF; padding:30px; margin-left:280px; margin-right:100px; border-top:1px solid var(--greyTint); }
.catchlineContainer.pictureBack { margin-top:0px; }
.zero .manavbox { display:none; }
.zero .mainContainer { margin-left:15px; margin-right:15px; }
.zero .catchlineContainer { margin-left:100px; }

.ocChooser { background-color:var(--greyTint); padding:20px; margin:20px auto; width:600px; border-radius:15px; }
.ocChooser h1  { margin-top:0px; }
.chooserRow { background-color:#FFF; border-radius:5px; border:1px solid #999; padding:10px; margin-bottom:10px; font-size:12px; text-align:left; }
.chooserRow:hover { background-color: var(--oc3); cursor:pointer; }
.chooserDefault { width:50px; text-align:center; float:right; font-size:12px; z-index:100; }
.hvaFilterDetail { white-space:nowrap; margin-right: 15px; display: inline-block; }

.didyMeTable { border: 1px solid var(--lightGrey); border-bottom:0px none; }
.ddPositive { background-color:var(--green); color:#FFF; }
.ddNegative { background-color:var(--red); color:#FFF; }

#notifybox { background-color: var(--oc2); }
.ocbox { min-height: 80px; padding: 8px; border-radius: 5px; margin-bottom: 10px; margin-right: 10px; font-size: 16px;  }
.ocbox.centered { text-align: center; }
.ocbox .chooserRow { border:0px none; cursor: default; }
.clickable { cursor: pointer !important; }
.ocbox.clickable:hover { background-image:url(https://i.blackculm.com/0021-pencil7.png); background-repeat: no-repeat; background-position: right 5px top 5px;  background-size: 23px; box-shadow:3px 3px 5px #666; }
.ocbox.back-oc2 .chooserRow { background-color:var(--oc2light); }
.ocbox.back-oc2 .chooserRow:hover { background-color:var(--oc3light); }
.ocbox.back-oc2light .chooserRow:hover { background-color:var(--oc3light); }
.back-oc3.clickable:hover { background-color: var(--oc2) !important; }
/* .back-oc2.clickable:hover { background-color: var(--oc3) !important; }
.back-oc2light.clickable:hover { background-color: var(--oc3light) !important; }
.back-oc3light.clickable:hover { background-color: var(--oc2light) !important; } */

.ocIcon { width:19px; }
.ocIcon.padR { margin-right:4px; }
.dataRow .ocIcon { cursor: pointer; }
.dataRow .ocIcon.padR { margin-right:7px; }
.dataRow td.highlightRow { background-color:var(--red); color:#FFF; }
.dataRow td.highlightRow.warning { background-image: url(https://i.blackculm.com/w/1105-warning2.png); background-repeat: no-repeat; background-position: 3px center; background-size: 18px; padding-left:29px; }
.dataRow td.highlightRow a { color:#FFF !important; }
.smallNumbers { width:20px; height:20px; border: 0px none; background-color:#333; font-size:13px; color:#FFF; }

.selectableRow { cursor:pointer; }
.selectableRow:hover { background-color:var(--greyTint); }

.ocFlagSmall { height:21px; border:1px solid #333; }

.formrowlg .xp, .formrowlg option, .formrowlg input, .formrowlg td, .formrowlg th { font-size: 16px !important; }
.itemRow { margin-bottom:4px; }
.itemHead { display:inline-block; width:100px; text-align:left; vertical-align:top; font-weight:bold; }


.formrowlg.wideHeight td { padding-top: 20px; padding-bottom: 20px; }