form { display:flex; flex-flow: row wrap; justify-content:space-between; }
a { text-decoration:underline; cursor:pointer; }
a:hover { color:blue; }
body { margin:0; font-family: Verdana, Helvetica, Sans-Serif, Arial, ProximaNova-Regular,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif; }

#greyOut { left:0; top:0; width:100%; height:100%; position:absolute; background-color: #333; display:none; z-index:2000; }
#__username_fieldWrap { margin-top:-30px; }

.outerWrapper { max-width:1024px; margin: 135px auto 100px; line-height:1.4; font-size:12px; }
.outerWrapper * { box-sizing: border-box; }

.leftToggle {position:fixed; top:135px; }
.leftToggle * { box-sizing: border-box; }
.leftTab {white-space:nowrap; width:30px; background-color:#ff671f; color:white; font-weight:bold; padding:2px 10px 30px 10px; border-top-right-radius:10px; border-bottom-right-radius:10px; vertical-align:top;position:relative; overflow: hidden; height: 40px; }
.leftTab div {position:absolute; top:8px; left:10px; font-family:Verdana; font-size:12px; }
.leftTab div div {transform-origin:0 0; transform:rotate(-270deg);-webkit-transform:rotate(-270deg); -webkit-transform-origin:0 0;}
.leftTab:hover {cursor:pointer; background-color:#ff671f;}
.leftMenu {margin-right:-4px; width:400px; height:470px; background-image:url("/images/WhiteOut.png"); display:inline-block; border:1px solid #ccc; border-bottom-right-radius:8px; box-shadow: inset 0px 1px 10px #ccc; z-index:0; font-size:12px; background-color:white;}

/*.panel { min-width:400px; margin: 0 auto 15px auto; padding:0 25px 25px 25px; box-shadow: 0px 2px 20px #ccc; border-radius:6px; border:1px solid #ccc; background-color:#fff; color:#555; }*/
.panel { min-width:400px; margin: 0 auto 15px auto; padding:0 25px 25px 25px; box-shadow: inset 0px 1px 10px #ccc; border-radius:6px; border:1px solid #ccc; background-color:#fff; color:#555; }
.panelHeader { width:100%; text-align:center; font-size:26px; font-weight:400; color:#333; margin:10px 10px 35px 10px; line-height:2.0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.panelWrapper { display:flex; flex-flow: row wrap; justify-content:space-between; }
.panelNone { margin: 0 auto 15px auto; border:none;  text-align:left; }
.panelThick { border:8px solid #aaa;  border-radius:15px; background-color:#fff; text-align:left; padding:20px; padding-left:28px; margin:0 auto; }
.panelHeaderThick { color:blue; font-size:24px; line-height:40px; height:40px; }
.panelWrapThick {padding:12px;}

.onFocus { color:#000; background-color:#e6f4ff; border: 1px solid #005bca; box-shadow: 0px 0px 5px #ccc; }
.onBlur  { color:#000; background-color:#fff; border: 1px solid #9a9a9a; box-shadow: inset 0px 1px 2px hsla(0, 0%, 4%, 0.1) }
.onErr   { color:#000; background-color:#fee; border: 1px solid #fa5858; }

.decimal { text-align: right; }
.integer { text-align: right; }
.input0  { padding:0 10px 0 10px; width:100%; font-size:12px; border-radius: 4px; height:30px; }
.input1  { padding:0 10px 0 10px; width:100%; font-size:12px; border-radius: 4px; height:22px; margin-left:4px; }
.input2  { padding:4px 10px 0 15px; width:100%; font-size:12px; border-radius: 4px; height:30px; }
.button  { width:100%; font-size:12px; border:none; border-radius: 4px; height:30px;  margin-top:15px; background-color:#ff671f; color:#fff; }
.button:hover, .submit :hover {cursor:pointer; background-color:#ff671f; color:#eee;}
.buttonDisabled { width:100%; font-size:12px; border:none; border-radius: 4px; height:30px;  margin-top:15px; background-color:#ccc; color:#555; }
.select { padding-left:10px; width:100%; font-size:12px; border: 1px solid #9a9a9a; border-radius: 4px; height:30px; box-shadow: inset 0px 1px 2px hsla(0, 0%, 4%, 0.1); }
.textarea { padding:10px; width:100%; font-size:12px; border: 1px solid #9a9a9a; border-radius: 4px; box-shadow: inset 0px 1px 2px hsla(0, 0%, 4%, 0.1) }
.disable { color: currentColor; cursor: not-allowed; opacity: 0.5; text-decoration: none; }

.displayMode0 { margin-bottom:8px; }
.displayMode1 { margin-bottom:8px; display:flex; flex-flow: row wrap; justify-content:space-between; }

.labelMode0 { text-align: left; white-space: nowrap; overflow: hidden; font-size:10px; margin-left:5px; }
.labelMode1 { text-align: right; margin:auto; white-space: nowrap; overflow: hidden;  font-size:10px;}
.labelMode2 { text-align: left; white-space: nowrap; overflow: hidden; position:relative; top:8px; left:10px; background-color:white; color:#999; font-size:11px; }

.optionLabel { font-size:10px; margin-bottom:4px; display:inline-block; font-size:10px; }
.radioLabel { display:flex; flex-flow: row nowrap; justify-content:space-between; font-size:10px; }
.checkBoxesLabel { display:flex; flex-flow: row wrap; justify-content:space-between; font-size:10px; }
.checkBoxWrap { margin-top:5px; }
.labelRadioCheckbox { text-align: left; white-space: nowrap; overflow: hidden; vertical-align:bottom; font-size: 11px; }
.errDiv { color: red; padding-left:5px; font-size:10px; overflow:hidden; }
.spinner { height:40px; margin-top:20px; }

.hideEl { -webkit-animation:animateHideEl; -webkit-animation-duration:.4s; -webkit-animation-fill-mode:forwards; animation-name: animateShow; animation-duration: .7s; animation-fill-mode:forwards; }
@-webkit-keyframes animateHideEl { from {opacity:100;} to {opacity:0; display:none;} }
@keyframes animateHideEl { from {opacity:100;} to {opacity:0; display:none; } }

.showBar { -webkit-animation:animateShow; -webkit-animation-duration:.7s; -webkit-animation-fill-mode:forwards; animation-name: animateShow; animation-duration: .7s; animation-fill-mode:forwards; }
@-webkit-keyframes animateShow { from {height:0px;} to {height:54px;} }
@keyframes animateShow { from {height:0px;} to {height:54px;} }

.hideBar { -webkit-animation:animateHide; -webkit-animation-duration:.7s; -webkit-animation-fill-mode:forwards; animation-name: animateHide; animation-duration: .7s; animation-fill-mode:forwards; }
@-webkit-keyframes animateHide { from {height:54px;} to {height:0px;} }
@keyframes animateHide { from {height:54px;} to {height:0px;} }

.largeImage { -webkit-animation:animateLargeImage; -webkit-animation-duration:.7s; -webkit-animation-fill-mode:forwards; animation-name:animateLargeImage; animation-duration: .7s; animation-fill-mode:forwards; }
@-webkit-keyframes animateLargeImage { from {height:55px; width:108px; left:20px } to {height:114px; width:224px; left:0;} }
@keyframes animateLargeImage { from {height:55px; width:108px; left:20px } to {height:114px; width:224px; left:0;} }

.shrinkImage { -webkit-animation:animateShrinkImage; -webkit-animation-duration:.7s; -webkit-animation-fill-mode:forwards; animation-name: animateShrinkImage; animation-duration: .7s; animation-fill-mode:forwards; }
@-webkit-keyframes animateShrinkImage { from {height:114px; width:224px; left:0; top:0; } to {height:55px; width:108px; left:20px; top:50px;} }
@keyframes animateShrinkImage { from {height:114px; width:224px; left:0; top:0; } to {height:55px; width:108px; left:20px; top:50px;} }

#userMenuDiv { position:absolute; top:22px; right:1px; font-size:10px; background-color:#fff; box-shadow: 0px 2px 10px #888; border-radius:2px; z-index:1001; overflow:hidden; }
.userMenuList { list-style-type:none; padding:12px; white-space:nowrap; }
.userMenuList a { text-decoration:none; color:#555; padding:8px; display:block; border-radius:3px; }
.userMenuList a:hover { cursor:pointer; background-color:#60a5d9; color:white; }

.modal { display: none; position: fixed; z-index: 200; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }

/*Toggle Switch Added by Allan 10/23/2020*/
.switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/*Multi Select Check Boxes added by Allan 12/10/2020*/
.multiselect0 { padding:0 10px 0 10px; width:100%; font-size:12px; border: 1px solid #9a9a9a; border-radius: 4px; height:30px; box-shadow: inset 0px 1px 2px hsla(0, 0%, 4%, 0.1) }
.multiselect1 { padding:0 10px 0 10px; width:100%; font-size:12px; border: 1px solid #9a9a9a; border-radius: 4px; height:30px; box-shadow: inset 0px 1px 2px hsla(0, 0%, 4%, 0.1) }
.multiselect2 { padding:6px 10px 0 10px; width:100%; font-size:12px; border: 1px solid #9a9a9a; border-radius: 4px; height:30px; box-shadow: inset 0px 1px 2px hsla(0, 0%, 4%, 0.1) }
.selectBox { position: relative; }
.selectBox select { width: 100%; }
.overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.selectCheckBoxes { display: none; border: 1px #dadada solid; }
.selectCheckBoxes label { display: block; }
.selectCheckBoxes label:hover { background-color: #1e90ff; }

.panelState { float:right; padding-right:10px; padding-top:10px; position:relative; cursor:pointer; font-size:16px; }

/*GridView*/
.headerStyle  { border:1px solid #aaa; padding:5px; border-radius: 4px; background-color:#efefef; }
.counterStyle { border: none; vertical-align:middle; white-space:nowrap; }
.numStyle     { text-align:right; border:1px solid #ccc; padding:5px; border-radius: 3px; }
.textStyle    { text-align:left; border:1px solid #ccc; padding:5px; border-radius: 3px; white-space: nowrap; }
.dateStyle    { text-align:center; border:1px solid #ccc; padding:5px; border-radius: 3px; }
.iconStyle    { vertical-align:top; padding-top:7px; white-space:nowrap; }
.iconStyle    { vertical-align:top; padding-top:7px; white-space:nowrap; }
.noBorder     { border: none; vertical-align:top; white-space:nowrap; }
.inputBorder  { border:none; padding:0; vertical-align:top; }

/*Tabs*/
.tabs { border-top-left-radius:0; display:flex; flex-flow: row wrap; }
.tab { font-family:Verdana; font-size:12px; font-weight: bold; padding-top:10px; padding-bottom:10px; padding-left:20px; padding-right:20px; border-top:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; border-top-left-radius:10px; border-top-right-radius:10px; background-color:#eee; color:#aaa; }
.tab:hover { cursor:pointer; background-color:#ccc; color:#fff; }
.tabSelected { font-family:Verdana; font-size:12px; font-weight: bold; padding-top:10px; padding-bottom:10px; padding-left:20px; padding-right:20px; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; border-top-left-radius:10px; border-top-right-radius:10px; background-color:#ff671f; color:#fff; }

/* Customer */
.key { color: #aaa; font-family: Verdana; font-size: 12px; text-align: right; height: 20px; }
.value { color: #777; font-family: Verdana; font-size: 12px; font-weight: bold; text-align: left; height: 20px; }
.report { margin:0 auto; }
.report td { background-color:#f8f8ff; color:#909090; font-family:Verdana; font-weight:normal; font-size:10px; text-align:left; }
.report td a { color:#909090; font-weight:bold; }
.report td a:hover { color:#C66; font-weight:bold; }
.reportheader td { background-color:#e0e4f8; color:#808080; font-family:Verdana; font-weight:bold; font-size:10px; text-align:center; background-image:none; }
.loanno { width:715px; height:25px; margin:0 auto; position:absolute; font-family: Verdana; font-size: 14px; font-weight: bold; color: White; }

/* Customer Banner menu */
.menu { font-family:Verdana; font-size:14px; font-weight:bold; list-style:none; float:right;}     
.menu li {display:inline; margin-left:40px; padding-bottom:18px; color:#fff}
.menu li:hover {border-bottom: 4px solid #aaa; color:#ccc;}
.menu li a { text-decoration:none; color:#fff; }
.menu li a:hover { text-decoration:none; cursor:pointer;}
.mainMenu {color:White; text-decoration:none; font-family: Verdana, Helvetica, Sans-Serif, Arial;}
.mainMenu:link {color:White; text-decoration:none; font-family: Verdana, Helvetica, Sans-Serif, Arial;}
.mainMenu:hover {color:White; text-decoration:underline; font-family: Verdana, Helvetica, Sans-Serif, Arial; cursor:pointer}



/* Calendar */
#caltab th {background-color:#4f4f4f; color:White;}
#caltab td {border:1px solid #aaaaaa; background-color:White; width:25px; }
#caltab td a{text-decoration:none; color:Black;}