/* Colors

light purple: #8a67b2
dark purple: #6034aa
formBg bg: #eee9f3
orange: #ff6e2b

*/



/* General */

html {
  overflow-y: scroll;
  }

body {
  margin: 0;
  background: #e8e1ef;
  }

.bgGrad {
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(50%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
  padding: 30px 0;
  }

body, input, select, textarea, table {
  font-family: 'Titillium Web', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  }

h2 {
  color: #6034aa;
  font-size: 24px;
  margin: 0px 0px 25px 0px;
  }

h3 {
  font-size: 20px;
  margin: 0px 0px 20px 0px;
  color: #6034aa;
  }

a:link,a:visited,a:active {
  color: #6034aa;
  text-decoration: underline;
  font-weight: normal;
  }

a:hover {
  color: #8a67b2;
  text-decoration: none;
  }

a:link.red,a:visited.red,a:active.red,a:hover.red {
  color: #990000;
  }


ul {
  display: block;
  list-style-type: square;
  padding-left: 0;
  margin-left: 32px;
  }

ul li {
  padding: 5px 0px;
  }

ul.compact {
  margin: 0 0 0 10px;
  padding-left: 20px;
  }

ul.compact li {
  margin: 0;
  padding: 0;
  }

hr {
  background-color: rgba(0,0,0,0.2);
  color: rgba(0,0,0,0.2);
  border: none;
  height: 1px;
  margin: 20px 0px;
  }

.hide {
  display: none;
  }

.b {
  font-weight: bold;
  }

.i {
  font-style: italic;
  }



/* Page Layout */

div.header {
  background-color: #6034aa;
  height: 70px;
  }

div.bannerTop {
  height: 65px;
  max-width: 1000px;
  margin: 0px auto;
  position: relative;
  }

div.bannerBot {
  background-color: #ff6e2b;
  height: 5px;
  border: solid white;
  border-width: 1px 0 0 0;
  }

div.bannerTop h1 {
  color: rgba(255,255,255,0.5);
  margin: 6px 15px 0px 210px;
  font-size: 32px;
  font-weight: 700;
  float: left;
  }

div.bannerTop h2 {
  color: white;
  margin: 6px 25px 0px 0px;
  font-size: 32px;
  font-weight: 400;
  float: left;
  }

.loginInfo {
  position: absolute;
  width: 300px;
  right: 12px;
  top: 6px;
  text-align: right;
  color: white;
  }

.loginInfo p {
  margin: 0;
  width: 300px;
  height: 24px;
  line-height: 24px;
  }

.loginInfo span {
  color: rgba(255,255,255,0.4);
  }

.loginInfo a {
  color: rgba(255,255,255,0.6);
  font-weight: 400;
  display: inline-block;
  margin-left: 10px;
  }

.loginInfo a:hover {
  color: rgba(255,255,255,1);
  }

.loginInfo a img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  border: 0;
  margin-right: 4px;
  opacity: 0.3;
  }

.loginInfo a:hover img {
  opacity: 0.6;
  }


a.btnMenu {
  position: absolute;
  right: 12px;
  top: 16px;
  line-height: 32px;
  font-size: 18px;
  color: rgba(255,255,255,.7);
  color: white;
  text-decoration: none;
  opacity: 0.5;
  }

.btnMenu img {
  width: 32px;
  height: 32px;
  border: 0;
  margin-left: 15px;
  vertical-align: -9px;
  }

.btnMenu:hover {
  opacity: 1;
  }

div#logobox {
  background-color: white;
  box-shadow: 0px 0px 8px #6034aa;
  width: 188px;
  height: 76px;
  border-radius: 0 0 8px 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  }

img.logo {
  width: 164px;
  height: 70px;
  margin: 6px 12px 0 12px;
  }

div.page {
  background-color: white;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
  width: 980px;
  margin: 0px auto;
  box-sizing: border-box;
  padding: 30px 30px;
  position: relative;
  }




/* Forms */

input[type=text], input[type=password] {
  line-height: 30px;
  height: 42px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  }

input[type=checkbox] {
  vertical-align: -1px;
  margin-right: 8px;
  }

input[type=radio] {
  vertical-align: -1px;
  margin-right: 8px;
  }

textarea {
  line-height: 125%;
  padding: 10px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  resize: vertical;
  min-height: 150px;
  }

select {
  line-height: 30px;
  height: 42px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  }

input:not([type=radio]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: #aaa;
  box-shadow: 0 0 5px rgba(96,52,170,0.25);
  }

.formBg, .errorBg, .infoBg {
  padding: 20px 30px;
  margin-bottom: 25px;
  display: inline-block;
  background-color: #eee9f3;
  border: solid #6034aa;
  border-width: 0 0 0 4px;
  border-radius: 8px;
  text-align: left;
  box-sizing: border-box;
  }

.errorBg {
  border-color: #ff6e2b;
  background-color: #ffebe1;
  background-repeat: no-repeat;
  background-position: 20px 15px;
  background-size: 32px 32px;
  background-image: url('../images/icons/error-orange.svg');
  }

.errorBg h2 {
  padding-left: 40px;
  color: #ff6e2b;
  line-height: 25px;
  margin-top: 0px;
  padding-top: 0px;
  }

.infoBg {
  border-color: #666666;
  background-color: #eeeeee;
  background-repeat: no-repeat;
  background-position: 20px 15px;
  background-size: 32px 32px;
  background-image: url('../images/icons/info-grey.svg');
  }

.infoBg h2 {
  padding-left: 40px;
  color: #666666;
  line-height: 25px;
  margin-top: 0px;
  padding-top: 0px;
  }

div.noTitle {
  padding-left: 70px;
  }

.formBg hr {
  background-color: rgba(96,52,170,0.25);
  color: rgba(96,52,170,0.25);
  border: none;
  height: 1px;
  margin: 20px 0px;
  }

.leftCol, .rightCol {
  display: inline-block;
  width: 370px;
  vertical-align: top;
  }

.rightCol {
  border: solid rgba(96,52,170,0.25);
  border-width: 0px 0px 0px 1px;
  }

.leftCol2, .rightCol2 {
  display: inline-block;
  width: 370px;
  vertical-align: top;
  }

.leftCol2 {
  border: solid rgba(96,52,170,0.25);
  border-width: 0px 1px 0px 0px;
  }

.rightCol2 {
  padding-left: 20px;
  }


span.fn {
  display: inline-block;
  vertical-align: top;
  width: 160px;
  line-height: 42px;
  margin: 0px 0px 10px 0px;
  text-align: right;
  padding-right: 20px;
  }

.mb0 {
  margin-bottom: 0;
  }

.bntsBelowForm {
  width: 100%;
  padding: 0 0 0 12px;
  margin: 0px auto 30px auto;
  min-height: 50px;
  box-sizing: border-box;
  }

.btnsBelowForm a {
  display: inline-block;
  line-height: 30px;
  }

::-webkit-input-placeholder {color: #ccc;} /* Chrome */
:-ms-input-placeholder {color: #ccc;} /* IE 10+ */
::-moz-placeholder {color: #ccc; opacity: 1;} /* Firefox 19+ */
:-moz-placeholder {color: #ccc; opacity: 1;} /* Firefox 4 - 18 */


.ui-tooltip {
  color: #004b9c;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
  border-radius: 4px;
  font-size: 15px;
  }

.helpicon {
  width: 18px;
  height: 18px;
  padding: 12px;
  display: inline-block;
  position: absolute;
  opacity: .5;
  cursor: help;
  }

.iconhigh {
  margin-top: -8px;
  }

.helpicon:hover {
  opacity: 1;
  }






/* File Upload */


.fileUpload {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
  }

.fileUpload + label {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  line-height: 40px;
  padding-left: 45px;
  padding-right: 15px;
  max-width: 600px;
  height: 42px;
  box-sizing: border-box;
  overflow: hidden;
  background-image: url('../images/icons/upload.svg');
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: 10px 50%;
  font-weight: 400;
  display: inline-block;
  cursor: pointer;
  }

.fileUpload:focus + label {
  outline: none;
  border-color: #aaa;
  box-shadow: 0 0 5px rgba(96,52,170,1);
  }




/* Buttons */

.btnRightTop {
  float: right;
  width: 30px;
  height: 30px;
  opacity: .3;
  padding: 10px;
  margin-right: -10px;
  margin-top: -10px;
  border: 0;
  }

.btnRightTop:hover {
  opacity: 0.6;
  }

a.btnL, a.btnR {
  display: inline-block;
  text-decoration: underline;
  line-height: 30px;
  color: #333;
  font-weight: 400;
  position: relative;
  }

a.btnL {padding-left: 40px;}
a.btnR {padding-right: 40px;}

a.btnL:hover, a.btnR:hover {
  text-decoration: none;
  color: #6034aa;
  }

a.btnL:before, a.btnR:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: .3;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  }

a.btnL:before {background-position: 0% 50%;}
a.btnR:before {background-position: 99% 50%;}

a.btnL:hover::before, a.btnR:hover::before {
  opacity: .6;
  }

.btnSave:before {background-image: url('../images/icons/save.svg');}
.btnSubmit:before {background-image: url('../images/icons/submit.svg');}
.btnAdd:before {background-image: url('../images/icons/add.svg');}
.btnEdit:before {background-image: url('../images/icons/edit-btn.svg');}
.btnDelete:before {background-image: url('../images/icons/del-btn.svg');}
.btnBack:before {background-image: url('../images/icons/back.svg');}
.btnNext:before {background-image: url('../images/icons/next.svg');}
.btnPDF:before {background-image: url('../images/icons/pdf.svg');}
.btnSearch:before {background-image: url('../images/icons/search.svg');}
.btnExtLnk:before {background-image: url('../images/icons/ext-link.svg');}
.btnApprove:before {background-image: url('../images/icons/approve.svg');}
.btnDecline:before {background-image: url('../images/icons/decline.svg');}
.btnSend:before {background-image: url('../images/icons/send-btn.svg');}

a.btnCancel {
  display: inline-block;
  text-decoration: underline;
  line-height: 30px;
  color: #333;
  font-weight: 400;
  }

a.btnCancel:hover, a.btnDecline:hover {
  text-decoration: none;
  color: #e85f28;
  }

.btnSmall {
  width: 20px;
  height: 20px;
  opacity: .3;
  padding: 5px;
  vertical-align: middle;
  border: 0;
  }

.btnSmall:hover {
  opacity: 0.6;
  }




/* Tables - Lists */

table.list {
  width: 100%;
  border-collapse: collapse;
  }

table.list td {
  padding: 6px 10px;
  border: solid #ddd;
  border-width: 0px 0px 1px 0px;
  }

table.list tr:hover td {
  background-color: rgba(0,0,0,0.03);
  border-color: #6034aa;
  color: black;
  cursor: default;
  }

table.list td.dateCol {
  width: 100px;
  text-align: right;
  }

table.list td.icoCol {
  width: 16px;
  }

table.list td.cbxCol {
  width: 24px;
  }

table.list td.lastCol {
  text-align: right;
  border: none;
  width: 32px;
  padding: 0;
  }

table.list tr:hover td.lastCol {
  background-color: transparent;
  }

tr.greyOut td {
  opacity: .4;
  font-style: italic;
  }

tr.greyOut td.doNotDim {
  opacity: 1;
  }

table.list th {
  padding: 4px 8px;
  color: white;
  background-color: #666;
  }

table.list th.lastCol {
  background-color: transparent;
  }

table.list th img.ico, table.list th img.ico:hover {
  opacity: 1;
  }

table.list tr:hover td.tdClick, table.list tr:hover td.tdCheck {
  cursor: pointer;
  }

span.noRecords {
  display: block;
  padding: 50px 0px 50px 0px;
  font-style: italic;
  text-align: center;
  }



/* Table Filter */

div.filterBox {
  float: right;
  position: relative;
  margin-right: 20px;
  margin-left: 20px;
  height: 32px;
  width: 202px;
  margin-top: -1px;
  }

div.filterBox img {
  display: block;
  position: absolute;
  z-index: 2;
  background-color: #b3b3b3;
  width: 18px;
  height: 18px;
  padding: 8px 7px 6px 11px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  }

div.filterBox img.filterActive {
  background-color: #8a67b2;
  }

div.filterBox input {
  position: absolute;
  line-height: 30px;
  height: 32px;
  padding: 0px 10px;
  border: 1px solid #ccc;
  border-radius: 0px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  box-sizing: border-box;
  width: 202px;
  padding-left: 44px;
  z-index: 1;
  }



/* Misc */

img.ico {
  width: 16px;
  height: 16px;
  padding: 4px;
  border: 0;
  opacity: 0.3;
  vertical-align: middle;
  }

img.ico.disabled {
  opacity: 0.2;
  cursor: not-allowed;
  }

img.ico.disabled:hover {
  opacity: 0.2;
  }

img.ico:hover, img.ico.fakeHover {
  opacity: 0.6;
  }

img.ico20 {
  width: 20px;
  height: 20px;
  }

img.btnDisabled {
  opacity: 0.1;
  cursor: not-allowed;
  }

img.btnDisabled:hover {
  opacity: 0.1;
  }

.light {
  opacity: .4;
  }





/* Floating, margins, withs, ... */

.l {float: left;}
.r {float: right;}
.cb {clear: both;}
.tar {text-align: right;}
.tal {text-align: left;}
.tac {text-align: center;}
.mr0 {margin-right: 0px;}
.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.mr30 {margin-right: 30px;}
.ml0 {margin-left: 0px;}
.ml10 {margin-left: 10px;}
.ml20 {margin-left: 20px;}
.ml30 {margin-left: 30px;}
.mt0 {margin-top: 0px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mb0 {margin-bottom: 0px;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}

.w100p {width: 100%;}
.w10 {width: 10px;}
.w20 {width: 20px;}
.w30 {width: 30px;}
.w40 {width: 40px;}
.w50 {width: 50px;}
.w60 {width: 60px;}
.w70 {width: 70px;}
.w80 {width: 80px;}
.w90 {width: 90px;}
.w100 {width: 100px;}
.w110 {width: 110px;}
.w120 {width: 120px;}
.w130 {width: 130px;}
.w140 {width: 140px;}
.w150 {width: 150px;}
.w160 {width: 160px;}
.w170 {width: 170px;}
.w180 {width: 180px;}
.w190 {width: 190px;}
.w200 {width: 200px;}
.w210 {width: 210px;}
.w220 {width: 220px;}
.w230 {width: 230px;}
.w240 {width: 240px;}
.w250 {width: 250px;}
.w260 {width: 260px;}
.w270 {width: 270px;}
.w280 {width: 280px;}
.w290 {width: 290px;}
.w300 {width: 300px;}
.w310 {width: 310px;}
.w320 {width: 320px;}
.w330 {width: 330px;}
.w340 {width: 340px;}
.w350 {width: 350px;}
.w360 {width: 360px;}
.w370 {width: 370px;}
.w380 {width: 380px;}
.w390 {width: 390px;}
.w400 {width: 400px;}
.w410 {width: 410px;}
.w420 {width: 420px;}
.w430 {width: 430px;}
.w440 {width: 440px;}
.w450 {width: 450px;}
.w460 {width: 460px;}
.w470 {width: 470px;}
.w480 {width: 480px;}
.w490 {width: 490px;}
.w500 {width: 500px;}
.w510 {width: 510px;}
.w520 {width: 520px;}
.w530 {width: 530px;}
.w540 {width: 540px;}
.w550 {width: 550px;}
.w560 {width: 560px;}
.w570 {width: 570px;}
.w580 {width: 580px;}
.w590 {width: 590px;}
.w600 {width: 600px;}
.wmax {width: 100%;}

.mw100 {max-width: 100px;}