@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v37/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaooCP.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v49/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmT.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/nunito/v32/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTQ3ig.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJfedw.ttf) format('truetype');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/jost/v20/92zPtBhPNqw79Ij1E865zBUv7myjJTVBNI0.ttf) format('truetype');
}
/*-----------Green (ca) Base Colors-----------*/
/*-----------Red/Orange (cc) Base Colors-----------*/
@font-face {
  font-family: 'fontfacetwo';
  src: url('/resource/Styles/Fonts/dosis-regular-webfont.eot');
  src: url('/resource/Styles/Fonts/dosis-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/resource/Styles/Fonts/dosis-regular-webfont.woff') format('woff'), url('/resource/Styles/Fonts/dosis-regular-webfont.ttf') format('truetype'), url('/resource/Styles/Fonts/dosis-regular-webfont.svg#dosis-regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'fontfaceone';
  src: url('/resource/Styles/Fonts/TrebuchetMS.eot');
  src: url('/resource/Styles/Fonts/TrebuchetMS.eot?#iefix') format('embedded-opentype'), url('/resource/Styles/Fonts/TrebuchetMS.woff') format('woff'), url('/resource/Styles/Fonts/TrebuchetMS.ttf') format('truetype'), url('/resource/Styles/Fonts/TrebuchetMS.svg#dosis-regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'lobster';
  src: url('/resource/Styles/Fonts/Lobster-Regular.ttf');
  src: url('/resource/Styles/Fonts/Lobster-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'calligraffitti';
  src: url('/resource/Styles/Fonts/Calligraffitti-Regular.ttf');
  src: url('/resource/Styles/Fonts/Calligraffitti-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'luckiestguy';
  src: url('/resource/Styles/Fonts/LuckiestGuy-Regular.ttf');
  src: url('/resource/Styles/Fonts/LuckiestGuy-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'permanentmarker';
  src: url('/resource/Styles/Fonts/PermanentMarker-Regular.ttf');
  src: url('/resource/Styles/Fonts/PermanentMarker-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'anton';
  src: url('/resource/Styles/Fonts/Anton-Regular.ttf');
  src: url('/resource/Styles/Fonts/Anton-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'indieflower';
  src: url('/resource/Styles/Fonts/IndieFlower-Regular.ttf');
  src: url('/resource/Styles/Fonts/IndieFlower-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'syncopate';
  src: url('/resource/Styles/Fonts/Syncopate-Regular.ttf');
  src: url('/resource/Styles/Fonts/Syncopate-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'shadows';
  src: url('/resource/Styles/Fonts/ShadowsIntoLight-Regular.ttf');
  src: url('/resource/Styles/Fonts/ShadowsIntoLight-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'righteous';
  src: url('/resource/Styles/Fonts/Righteous-Regular.ttf');
  src: url('/resource/Styles/Fonts/Righteous-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'badscript';
  src: url('/resource/Styles/Fonts/BadScript-Regular.ttf');
  src: url('/resource/Styles/Fonts/BadScript-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'medulaone';
  src: url('/resource/Styles/Fonts/MedulaOne-Regular.ttf');
  src: url('/resource/Styles/Fonts/MedulaOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'condiment';
  src: url('/resource/Styles/Fonts/Condiment-Regular.ttf');
  src: url('/resource/Styles/Fonts/Condiment-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'intolight';
  src: url('/resource/Styles/Fonts/ShadowsIntoLightTwo-Regular.ttf');
  src: url('/resource/Styles/Fonts/ShadowsIntoLightTwo-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'londrina';
  src: url('/resource/Styles/Fonts/LondrinaShadow-Regular.ttf');
  src: url('/resource/Styles/Fonts/LondrinaShadow-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'griffy';
  src: url('/resource/Styles/Fonts/Griffy-Regular.ttf');
  src: url('/resource/Styles/Fonts/Griffy-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'fasterone';
  src: url('/resource/Styles/Fonts/FasterOne-Regular.ttf');
  src: url('/resource/Styles/Fonts/FasterOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'orbitron';
  src: url('/resource/Styles/Fonts/Orbitron-VariableFont_wght.ttf');
  src: url('/resource/Styles/Fonts/Orbitron-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/*-----------------------------------------------------------------------------------------*/
.orbitron {
  font-family: orbitron;
}
.fontfacetwo {
  font-family: fontfacetwo;
}
.fontfaceone {
  font-family: fontfaceone;
}
.lobster {
  font-family: lobster;
}
.calligraffitti {
  font-family: calligraffitti;
}
.luckiestguy {
  font-family: luckiestguy;
}
.permanentmarker {
  font-family: permanentmarker;
}
.anton {
  font-family: anton;
}
.indieflower {
  font-family: indieflower;
}
.syncopate {
  font-family: syncopate;
}
.shadows {
  font-family: shadows;
}
.righteous {
  font-family: righteous;
}
.badscript {
  font-family: badscript;
}
.medulaone {
  font-family: medulaone;
}
.condiment {
  font-family: condiment;
}
.intolight {
  font-family: intolight;
}
.londrina {
  font-family: londrina;
}
.griffy {
  font-family: griffy;
}
.fasterone {
  font-family: fasterone;
}
.arial {
  font-family: Arial, Helvetica, sans-serif;
}
.arialblack {
  font-family: "Arial Black", Gadget, sans-serif;
}
.georgia {
  font-family: Georgia, serif;
}
.comic {
  font-family: "Comic Sans MS", cursive, sans-serif;
}
.impact {
  font-family: Impact, Charcoal, sans-serif;
}
.palatino {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.times {
  font-family: "Times New Roman", Times, serif;
}
.lucida {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.tahoma {
  font-family: Tahoma, Geneva, sans-serif;
}
.trebuchet {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.verdana {
  font-family: Verdana, Geneva, sans-serif;
}
.courier {
  font-family: "Courier New", Courier, monospace;
}
.console {
  font-family: "Lucida Console", Monaco, monospace;
}
/*--------------------------------------------Google API Fonts-----------------------------*/
.raleway {
  font-family: 'Raleway', sans-serif;
}
.roboto {
  font-family: 'Roboto', sans-serif;
}
.opensans {
  font-family: 'Open Sans', sans-serif;
}
/*-----------------------------------------------------------------------------------------*/
.temp {
  float: left;
}
.boldtext {
  font-weight: bold;
}
@font-face {
  font-family: 'fontfaceone';
  src: url('/resource/Styles/Fonts/dosis-regular-webfont.eot');
  src: url('/resource/Styles/Fonts/dosis-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/resource/Styles/Fonts/dosis-regular-webfont.woff') format('woff'), url('/resource/Styles/Fonts/dosis-regular-webfont.ttf') format('truetype'), url('/resource/Styles/Fonts/dosis-regular-webfont.svg#dosis-regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.temp {
  float: left;
}
/*================================================================================================================*/
/*================================================================================================================*/
.innershadow {
  -moz-box-shadow: inset 5px 5px 20px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 5px 5px 20px 5px rgba(0, 0, 0, 0.1);
  box-shadow: inset 5px 5px 20px 5px rgba(0, 0, 0, 0.1);
}
.margin5 {
  margin: 5px;
}
body {
  font-size: 12px;
  font-family: fontfaceone, Arial, Verdana, Helvetica, sans-serif;
  color: #303030;
  text-decoration: none;
  font-weight: normal;
  text-align: left;
  margin: 0;
  padding: 0;
}
.break_page_here {
  page-break-after: always;
}
.ui-autocomplete {
  position: absolute;
  cursor: default;
  z-index: 9999 !important;
}
/*=======================================*/
.roundleft {
  -webkit-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
  border-left: 1px solid #e0e0e2;
}
.roundright {
  -webkit-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  border-right: 1px solid #e0e0e2;
}
/*=======================================*/
form {
  margin: 0;
  padding: 0;
}
img {
  border: 0;
}
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  font-size: 10px;
}
a,
a:link,
a:hover {
  text-decoration: none;
  outline: none;
}
.a,
.a:link,
.a:hover {
  color: #fff;
}
a:hover {
  text-decoration: underline;
}
/*a:visited {
    color: #fff;
}*/
.off {
  visibility: hidden;
}
.hide,
.hide:hover {
  display: none;
}
/*================================================*/
/*================================================*/
.buttonone {
  font-size: 12px;
  font-family: fontfaceone, Arial, Verdana, Helvetica, sans-serif;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  float: left;
  min-width: 50px;
  cursor: pointer;
  text-align: center;
  background-color: #464545;
  background-color: #3b474d;
  background-image: -moz-linear-gradient(top, #3b474d 0, #223036 100%);
  background-image: -ms-linear-gradient(top, #3b474d 0, #223036 100%);
  background-image: -o-linear-gradient(top, #3b474d 0, #223036 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3b474d), color-stop(1, #223036));
  background-image: -webkit-linear-gradient(top, #3b474d 0, #223036 100%);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #000000;
  padding: 2px 5px 2px 5px;
}
.buttononex,
.buttonbox input {
  font-size: 12px;
  font-family: fontfaceone, Arial, Verdana, Helvetica, sans-serif;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  float: left;
  min-width: 50px;
  cursor: pointer;
  text-align: center;
  background-color: #464545;
  background-color: #3b474d;
  background-image: -moz-linear-gradient(top, #3b474d 0, #223036 100%);
  background-image: -ms-linear-gradient(top, #3b474d 0, #223036 100%);
  background-image: -o-linear-gradient(top, #3b474d 0, #223036 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3b474d), color-stop(1, #223036));
  background-image: -webkit-linear-gradient(top, #3b474d 0, #223036 100%);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #000000;
  padding: 2px 5px 2px 5px;
}
.buttontwo {
  font-size: 12px;
  font-family: fontfaceone, Arial, Verdana, Helvetica, sans-serif;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  float: left;
  min-width: 50px;
  cursor: pointer;
  text-align: center;
  background-color: #77C21B;
  background-image: -moz-linear-gradient(top, #77C21B 0, #64a416 100%);
  background-image: -ms-linear-gradient(top, #77C21B 0, #64a416 100%);
  background-image: -o-linear-gradient(top, #77C21B 0, #64a416 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #77C21B), color-stop(1, #64a416));
  background-image: -webkit-linear-gradient(top, #77C21B 0, #64a416 100%);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #000000;
  padding: 2px 5px 2px 5px;
}
.buttonboxw,
.buttonboxw input {
  float: left;
  width: 100%;
}
.button-box-w50 {
  width: 50px;
  margin: 0 3px;
  cursor: pointer;
  padding: 3px 6px;
}
.button-box-w75 {
  width: 75px;
  margin: 0 3px;
  cursor: pointer;
  padding: 3px 6px;
}
.button-box-w100 {
  width: 100px;
  margin: 0 3px;
  cursor: pointer;
  padding: 3px 6px;
}
.button-box-w125 {
  width: 125px;
  margin: 0 3px;
  cursor: pointer;
  padding: 3px 6px;
}
.button-box-w150 {
  width: 150px;
  margin: 0 3px;
  cursor: pointer;
  padding: 3px 6px;
}
.button-box-w200 {
  width: 200px;
  margin: 0 3px;
  cursor: pointer;
  padding: 3px 6px;
}
.button-box-w250 {
  width: 250px;
  margin: 0 3px;
  cursor: pointer;
  padding: 3px 6px;
}
.button-back-w {
  background-color: #fff;
  color: #303030;
  float: left;
  height: 100%;
}
.button-back-b {
  float: left;
  background-color: #5E5E67;
  background: -moz-linear-gradient(top, #5E5E67 0%, #464545 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5E5E67), color-stop(100%, #464545));
  background: -webkit-linear-gradient(top, #5E5E67 0%, #464545 100%);
  background: -o-linear-gradient(top, #5E5E67 0%, #464545 100%);
  background: -ms-linear-gradient(top, #5E5E67 0%, #464545 100%);
  background: linear-gradient(top, #5E5E67 0%, #464545 100%);
  padding: 6px;
  color: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #37373D;
  text-align: center;
}
.button-back-b input {
  border: 0;
  background-color: transparent;
  color: #fff;
  width: 100%;
}
/*==================================*/
/* ========   Grid system ========= */
.gridheader {
  float: left;
  width: 100%;
  padding: 2px;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.grid,
.gridalt {
  float: left;
  width: 100%;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-height: 35px;
}
.gridalt {
  background-color: #dbdbdb;
}
.grid:hover,
.gridalt:hover,
.grid.selected,
.gridalt.selected,
.grid.selected:hover,
.gridalt.selected:hover {
  background-color: #dff8ff;
}
/*.grid:hover, .gridalt:hover{
    background-color: #C2E0FF;
}*/
.grid .padtop,
.gridalt .padtop {
  float: left;
}
.gridul {
  float: left;
  width: 100%;
  padding: 2px;
  margin: 0;
}
.gridul li {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #e4f7fc;
}
.gridcol {
  padding: 10px 0 10px 5px;
}
.gridcolheader {
  padding: 5px 0 5px 5px;
}
.gridcol.selected {
  background-color: #e4f7fc;
}
.gridcol:hover {
  background-color: #c5edf7;
}
.gridcol05,
.gridcol1,
.gridcol2,
.gridcol3,
.gridcol4,
.gridcol5,
.gridcol6,
.gridcol7,
.gridcol8,
.gridcol9,
.gridcol10,
.gridcol11,
.gridcol12,
.gridcol13,
.gridcol14,
.gridcol15,
.gridcol16,
.gridcol17,
.gridcol18,
.gridcol19,
.gridcol20,
.gridcol28 {
  float: left;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  /*    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;*/
}
.gridcol05 {
  width: 2.5%;
}
.gridcol1 {
  width: 5%;
}
.gridcol2 {
  width: 10%;
}
.gridcol3 {
  width: 15%;
}
.gridcol4 {
  width: 20%;
}
.gridcol5 {
  width: 25%;
}
.gridcol6 {
  width: 30%;
}
.gridcol7 {
  width: 35%;
}
.gridcol8 {
  width: 40%;
}
.gridcol9 {
  width: 45%;
}
.gridcol10 {
  width: 50%;
}
.gridcol11 {
  width: 55%;
}
.gridcol12 {
  width: 60%;
}
.gridcol13 {
  width: 65%;
}
.gridcol14 {
  width: 70%;
}
.gridcol15 {
  width: 75%;
}
.gridcol16 {
  width: 80%;
}
.gridcol17 {
  width: 85%;
}
.gridcol18 {
  width: 90%;
}
.gridcol19 {
  width: 95%;
}
.gridcol20 {
  width: 100%;
}
.gridcol28 {
  width: 28%;
}
.gridcellclickfilter {
  text-decoration: underline;
  text-decoration-color: blue;
}
.gridcellclickfilter:hover {
  cursor: pointer;
  color: blue;
  font-weight: bold;
}
/*==================================*/
/* ========   Page panel ========= */
.pageheader {
  float: left;
  width: 98%;
  padding: 0 0 10px 0;
  margin: 0 0 40px 0;
  border-bottom: 1px solid #f8f8f8;
}
.pageheadertitle {
  float: left;
  margin: 0 0 0 10%;
  font-size: 26px;
  color: #303030;
  font-weight: bold;
}
/*----------------------------------------------------*/
.pagepanelwide {
  float: left;
  width: 98%;
  padding: 0 1%;
  text-align: left;
  margin-top: 40px;
}
.pagepanellong {
  width: 58%;
  margin: 0.5% 2%;
  float: left;
  min-height: 500px;
}
.pagepanelthird {
  width: 30%;
  margin: 1.5%;
  float: left;
  min-height: 500px;
}
.pagepanelsmall {
  width: 20%;
  margin: 0.5%;
  float: left;
  min-height: 500px;
}
.pagepaneltiny {
  width: 15%;
  margin: 0.5%;
  float: left;
  min-height: 500px;
}
.pagepanellarge {
  width: 74%;
  margin: 0.5% 0.5% 0.5% 3%;
  float: left;
  min-height: 100px;
}
.pagepanelbox {
  width: 98%;
  float: left;
  padding: 1%;
  height: 240px;
  overflow: auto;
}
.pagepanelboxsmall {
  width: 98%;
  float: left;
  padding: 1%;
  height: 140px;
  overflow: auto;
}
.pagepanelboxauto {
  width: 98%;
  float: left;
  padding: 1%;
}
.pagepanelline {
  width: 98%;
  float: left;
  padding: 1%;
}
.pagepanellineslim {
  width: 98%;
  float: left;
  padding: 0 1%;
}
.pagepanellineslimheader {
  width: 95%;
  float: left;
  padding: 0 1%;
  background-color: #fff;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  margin-left: 10px;
  margin-bottom: 5px;
}
.pagepanellineslimborder {
  width: 98%;
  float: left;
  padding: 0 1%;
  border-bottom: 1px solid #dbd7d7;
}
.pagepanelsubbox {
  width: 98%;
  float: left;
  padding: 1%;
}
.pagepanelorderlist {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
}
.pagepanelorderlist li {
  float: left;
  width: 98%;
  margin: 0 0.5%;
}
.pagepanelorderlistselected {
  background-color: #0094ff;
  color: #fff;
}
.pagepanelordersmall {
  float: left;
  width: 3%;
  padding: 0;
  margin: 0;
  min-height: 20px;
}
.pagepanelorderlarge {
  float: left;
  width: 96%;
  padding: 0;
  margin: 0;
  background-color: #FCFCFC;
  -webkit-border-radius: 0 10px 10px 0;
  border-radius: 0 10px 10px 0;
  border: 1px solid #dbd7d7;
  margin-bottom: 5px;
}
.pagepanelorderlargeselected {
  float: left;
  width: 96%;
  padding: 0;
  margin: 0;
  background-color: #F7F0F2;
  -webkit-border-radius: 0 10px 10px 10px;
  border-radius: 0 10px 10px 10px;
  border: 2px solid #6A3E50;
  margin-bottom: 5px;
  -webkit-box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.1);
}
.pagepanelorderlargeheader {
  float: left;
  width: 96%;
  padding: 0;
  margin: 0;
  background-color: #1860A4;
  color: #fff;
  border: 1px solid #dbd7d7;
  margin-bottom: 5px;
}
.pagepanelordernumber {
  float: left;
  width: 98%;
  padding: 0;
  margin: 1%;
  font-size: 18px;
  text-align: center;
  height: 20px;
  background-color: #1F60A0;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1f60a0), to(#5f9fe0));
  background: -moz-linear-gradient(#1f60a0, #5f9fe0);
  background: linear-gradient(#1f60a0, #5f9fe0);
  -webkit-border-radius: 10px 0 0 10px;
  border-radius: 10px 0 0 10px;
  border-left: 1px solid #dbd7d7;
  border-top: 1px solid #dbd7d7;
  border-bottom: 1px solid #dbd7d7;
  color: #fff;
}
.pagepanelordernumbersmall {
  float: left;
  width: 98%;
  padding: 0;
  margin: 1%;
  font-size: 18px;
  text-align: center;
  height: 20px;
  background-color: #FCFCFC;
  -webkit-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
}
.pagepanelordermain {
  float: left;
  width: 100%;
}
.pagepanelordersummary {
  float: left;
  font-size: 16px;
  padding: 1px 10px;
}
.pagepanellineslimdates {
  float: left;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
/*==================================*/
/* ========   Login ========= */
.loginlogo {
  margin: 10px 10px 10px 10px;
  float: left;
  width: 240px;
  height: 60px;
}
.loginouter {
  width: 520px;
  height: 350px;
  position: fixed;
  margin-top: 200px;
  margin-left: 50%;
  left: -260px;
}
.loginmain {
  width: 450px;
  height: 352px;
  margin-left: 50%;
  left: -225px;
  position: absolute;
  top: 80px;
}
.logininput {
  float: left;
  width: 430px;
  margin: 10px;
  height: 230px;
  background-color: #F8F8F8;
  -webkit-border-radius: 0 0 0 15px;
  border-radius: 0 0 0 15px;
}
.loginline,
.loginarea {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 10px 0;
  font-size: 16px;
}
.loginarea textarea {
  float: left;
  width: 100%;
  height: 150px;
}
.loginpad {
  float: left;
  margin-left: 100px;
}
.loginpadlicense {
  float: left;
  margin: 10px;
}
.logintitle {
  border: 2px solid #fff;
  background-color: #1E2D33;
  color: #fff;
  font-size: 18px;
  padding: 10px 5px;
  margin-left: -20px;
  margin-top: -20px;
  -webkit-border-radius: 15px 15px 15px 15px;
  border-radius: 15px 15px 15px 15px;
  width: 300px;
}
.loginentry {
  background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJkAAAAdCAYAAAC5fc50AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJuSURBVHja7JxPbxJBGIffnV3ABTZbIpCFxnKpJy9e/Q6NH0E9WG41XpB60PjnIvSmN3vSj2DiN6CXRpOqMbFR8dAijSKxtVZKWdZ3hrJtPLUrc/s9yTBk9jZ58pt5ZzNrBEFAx5mv1lzuZgmAaKxx85dr1XDAGEs2X62XuasYFMxaIiBDPTVGPQAnQJrU95UxDW63l2u3GqFk5cWlui36laxjUXbKIdu2KR6PkxCCPYNm4ISSsUu+71Or84va3T36vT+ce/qo8tIoL9Yv8vNXF4pnzGLBo1wuS47jKMmkYJAMnEay4XBIvV6PPnzepMabZouHz1ss0eVsSpilmXNUKs2wZDmVZJZlQTBwaqRkg8GA8vk8Nb92p9ud7UsWZ5XnOikqFgtUKBQok8koweRSCUCUNJMtmUzS2cwUbXV2PJlkKrlc16V0Ok2xWAwJBiIz3mIlEonQJSF/LCumBk3ThGBgIsiVcFw4CoNXRWEa2OSDyaeaGDUBuYDupXMkGY5cgU7JhPqDCQEaJCOVYqMkIyQZ0JJkNF4uBZIMaJJMqMZVJpIM6Esy6ddhdYkJAZqrSyQZ0CkakgzoTzIBw4AuycIjDIETf6BJMvVaKdyTAaApy472ZBANaK0uMRlAl2SHZ2VIMaA7zaRkWwcDH7MBJs7uXk9K1pK15YuN77v+fv+A/r3oC0BU1psbtNnutNivVXHv5rU1TrSl1bcfqf3tB0QD/8279S+08vq93I9dZ7/+hDfIHzx+Jm+Q33dStpdO2YRXTSAK3Z87xKui/FTBwt0bV49ukB/n4ZPn09x5mC4QkU/ctu8sXAkH/gowANlBnJjBss9KAAAAAElFTkSuQmCC') /*/resource/images/style/input-field.png*/ no-repeat center center;
  border: 0;
  width: 153px;
  height: 29px;
  float: left;
  padding-left: 10px;
  line-height: 30px;
  margin: 0;
}
.loginbutton {
  background-image: url('/resource/images/style/login-button.png');
  width: 69px;
  height: 29px;
  text-indent: -9999px;
  position: relative;
  top: 1px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.loginerror {
  float: left;
  width: 90%;
  margin-top: 20px;
  margin-left: 10%;
  font-size: 14px;
  color: #000;
  text-align: left;
}
/*====================================*/
.iconcursor {
  cursor: pointer;
}
.cursor {
  cursor: pointer;
}
.iconpadding {
  float: left;
  margin: 5px 0 5px 10px;
}
.iconpaddingright {
  margin-right: 5px;
}
.paddingleft {
  margin-left: 5px;
}
.paddingright {
  margin-right: 5px;
}
.paddingtop {
  margin-top: 5px;
}
.paddingtopten {
  margin-top: 10px;
}
.textcentre {
  text-align: center;
}
.floatright {
  float: right;
}
.floatleft {
  float: left;
}
.textleft {
  text-align: left;
}
.textright {
  text-align: right;
}
.textcenter {
  text-align: center !important;
}
.linebreak {
  float: left;
  width: 80%;
  height: 1px;
  margin: 5px 10% 9px 10%;
  border-bottom: 1px solid #686868;
}
.maxwidth {
  float: left;
  width: 100%;
}
.maxwidthcenter {
  float: left;
  width: 100%;
  margin: 0 auto;
}
/*-----------------------------------*/
.baseheaderpad {
  float: left;
  width: 100%;
  height: 8%;
}
.basemaincontent {
  float: left;
  width: 100%;
  height: 92%;
  margin: 0;
}
/*=======================================*/
.homepanel {
  float: left;
  width: 800px;
  margin: 130px 0 0 50%;
  position: absolute;
  left: -400px;
}
.homepanelline {
  float: left;
  width: 100%;
}
.homepanelline span {
  float: left;
}
/*========================================*/
.jspContainer {
  overflow: hidden;
  position: relative;
}
.jspPane {
  position: absolute;
}
.jspVerticalBar {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 100%;
  background: red;
}
.jspHorizontalBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: red;
}
.jspCap {
  display: none;
}
.jspHorizontalBar .jspCap {
  float: left;
}
.jspTrack {
  background: #F2F2F2;
  position: relative;
}
.jspDrag {
  background: #63A2E3;
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
  float: left;
  height: 100%;
}
.jspArrow {
  background: #50506d;
  text-indent: -20000px;
  display: block;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.jspArrow.jspDisabled {
  cursor: default;
  background: #80808d;
}
.jspVerticalBar .jspArrow {
  height: 16px;
}
.jspHorizontalBar .jspArrow {
  width: 16px;
  float: left;
  height: 100%;
}
.jspVerticalBar .jspArrow:focus {
  outline: none;
}
.jspCorner {
  background: #eeeef4;
  float: left;
  height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner {
  margin: 0 -3px 0 0;
}
.baseform .line {
  float: left;
  width: 400px;
  height: 25px;
}
.baseform .line .label {
  float: left;
  width: 120px;
  font-weight: bolder;
  background-color: #ddd;
  padding: 2px 5px;
}
.baseform .line .input {
  float: left;
  width: 250px;
  padding: 2px 5px;
}
.baseform .line .input input {
  float: left;
  width: 95%;
}
.baseform .line .input select {
  float: left;
  width: 95%;
}
.baseform .line .input .smallinput {
  float: left;
  width: 25%;
}
.baseform .break {
  float: left;
  width: 90%;
  margin: 3px 5%;
}
/*----------------No labels--------------------*/
.baseform .nolabelsline {
  float: left;
  width: auto;
  padding-right: 3px;
}
.baseform .nolabelsline .nolabelslabel {
  display: none;
}
.baseform .nolabelsline .nolabelsinput {
  float: left;
  width: auto;
}
.baseform .nolabelsline .nolabelsinput input {
  float: left;
  width: 95%;
}
.baseform .nolabelsline .nolabelsinput select {
  float: left;
  width: 95%;
}
.baseform .nolabelsline .nolabelsinput .nolabelssmallinput {
  float: left;
  width: 25%;
}
.baseform .nolabelsbreak {
  float: left;
  margin: 3px 5%;
}
/*---------------------------------------------*/
.popupsidebar {
  position: absolute;
  border: 2px solid #34353A;
  -webkit-box-shadow: 0 5px 19px -1px #7d7d7d;
  -moz-box-shadow: 0 5px 19px -1px #7d7d7d;
  box-shadow: 0 5px 19px -1px #7d7d7d;
  z-index: 999;
  background-color: #f1eeee;
  border-bottom-left-radius: 18px;
}
.scratchpadheader {
  font-weight: bold;
  font-size: 15px;
  color: white;
  background-color: #34353A;
  padding: 3px;
}
.scratchpad {
  float: left;
  height: 500px;
  width: 270px;
  padding-bottom: 6px;
  overflow-x: hidden;
}
.scratchpad .content {
  float: right;
  width: 100%;
  background: white;
}
.scratchpad .item {
  padding: 3px;
  float: left;
  width: 100%;
}
.scratchpad .item.alt {
  background-color: #f8f8f8;
}
.scratchpad .item:hover,
.scratchpad .item.alt:hover {
  background-color: #C2E0FF;
}
.scratchpad .selected {
  background-color: yellow;
}
.scratchpad .item .icon1 {
  float: left;
  width: 20px;
}
.scratchpad .item .name {
  float: left;
  width: 150px;
  padding: 3px;
}
.scratchpad .item .icon2 {
  float: right;
  width: 20px;
  margin-right: 3px;
}
.scratchpadleft {
  float: right;
  margin: 2px;
  width: 300px;
  background: white;
}
.scratchpadleft .leftitem {
  width: 100%;
  float: left;
  padding: 3px;
  margin: 3px;
}
.scratchpadleft .leftitem .leftrow {
  width: 100%;
  float: left;
  border-bottom: solid 1px #63A2E3;
}
.scratchpadleft .leftitem .leftrow .title {
  float: left;
  margin: 3px;
  width: 30%;
  font-weight: bold;
}
.scratchpadleft .leftitem .leftrow .description {
  float: left;
  margin: 3px;
  width: 60%;
}
#BrowseFavouritesList {
  width: 500px;
}
/*=====================================================================================*/
.oops {
  width: 900px;
  margin: 50px auto;
}
.oops .maintitle {
  float: left;
  width: 100%;
  font-size: 40px;
  font-weight: bold;
  color: #1F60A0;
}
.oops .mainmessage {
  float: left;
  width: 100%;
  font-size: 14px;
  color: #1f1f1f;
}
.oops .title {
  float: left;
  width: 100%;
  font-size: 16px;
  color: #ac0000;
}
.oops .message {
  float: left;
  width: 100%;
  font-size: 14px;
  color: #5c0202;
}
.oops .data {
  float: left;
  width: 880px;
  font-size: 14px;
  color: #5c0202;
  background-color: #fae986;
  padding: 10px;
  border-top: 1px solid #1F60A0;
  margin: 20px 0;
}
.browsemain {
  float: left;
  width: 100%;
  margin: 10px 0;
  font-family: Arial;
}
.browsedata {
  float: left;
  width: 96%;
}
.browsedatabox {
  width: 96%;
  margin: 0 1%;
  padding: 5px 1%;
}
.browserow {
  float: left;
  width: 98%;
  padding: 0 1%;
  margin: 0;
  min-height: 10px;
}
.browseheader {
  float: left;
  width: 96%;
  margin: 0 1%;
  color: #fff;
  padding: 5px 1%;
  -webkit-border-radius: 15px 15px 15px 15px;
  border-radius: 15px 15px 15px 15px;
  min-height: 20px;
}
/*.inlinepanel {
    font-family: Roboto;
}

.inlinepanel .titlepanel {
    // background-color: #4A7A10 !important;
    background-color: red;
}

.inlinepanel .spacer {
    height: 1px;
    background-color: #AEAEAD;
    width: 80%;
    display: inline-block;
    text-align: center;
}*/
.spriterotatefourtyfivedegrees {
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.classfooterinput {
  width: 90%;
}
.classfooterdisplay {
  float: left;
  padding-top: 5px;
}
.browsefixedpaging {
  float: left;
  margin: 0 0 0 40%;
  padding: 5px 5px 0 5px;
  border-radius: 10px 10px 0 0;
  background-color: #fff;
  height: 34px;
}
.browsefilterlabel {
  float: left;
  margin-top: 3px;
  margin-left: 5px;
}
.browsefilter {
  float: left;
  margin-left: 5px;
}
.browsefilter input[type=text] {
  width: 150px;
}
.browsefilterbutton {
  float: left;
  cursor: pointer;
}
.browsetitlebar {
  color: #fff;
  font-size: 18px;
  padding: 10px 5px;
  margin-left: -20px;
  margin-top: -20px;
  -webkit-border-radius: 15px 15px 15px 15px;
  border-radius: 15px 15px 15px 15px;
  z-index: 50;
  text-align: center;
  width: 300px;
}
.browseboxfixed {
  float: right;
  height: 30px;
  z-index: 60;
  -webkit-box-shadow: 0px 0px 7px 7px rgba(150, 150, 150, 0.2);
  box-shadow: 0px 0px 7px 7px rgba(150, 150, 150, 0.2);
  border: 2px solid #fff;
  border-radius: 20px 20px 20px 20px;
  background: #ebebeb;
  background: -moz-linear-gradient(top, #ebebeb 0%, #f7f7f7 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ebebeb), color-stop(100%, #f7f7f7));
  background: -webkit-linear-gradient(top, #ebebeb 0%, #f7f7f7 100%);
  background: -o-linear-gradient(top, #ebebeb 0%, #f7f7f7 100%);
  background: -ms-linear-gradient(top, #ebebeb 0%, #f7f7f7 100%);
  background: linear-gradient(to bottom, #ebebeb 0%, #f7f7f7 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-left: 10px;
  margin: -35px -10px 0 0;
  min-width: 80px;
}
.browsecount {
  float: left;
  font-size: 18px;
  margin: 12px 10px 0 10px;
  line-height: 15px;
}
.browseactionbar {
  float: left;
  margin: -50px 0 0 0;
}
.browseactionbartabdiv {
  float: left;
  padding: 15px 5px 5px 5px;
}
.browseactionbarleft {
  background: url(/Resource/Images/ActionBarLeft.png) no-repeat;
  width: 18px;
  height: 48px;
  float: left;
}
.browseactionbarright {
  background: url(/Resource/Images/ActionBarRight.png) no-repeat;
  width: 18px;
  height: 48px;
  float: left;
}
.browseactionbarmid {
  background: url(/Resource/Images/ActionBarMid.png) repeat-x;
  height: 48px;
  float: left;
}
.browsepanel {
  float: left;
  background-color: #F7F7F7;
  color: #464545;
  font-size: 12px;
  -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 0 0 0 20px;
  border-radius: 0 0 0 20px;
  padding: 0;
  margin: 0;
  width: 100%;
}
.popuppanelclose {
  float: right;
  margin: -12px -10px 0 0;
  width: 30px;
  height: 30px;
  z-index: 11;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 7px 7px rgba(150, 150, 150, 0.2);
  box-shadow: 0px 0px 7px 7px rgba(150, 150, 150, 0.2);
  border: 2px solid #fff;
  border-radius: 30px 30px 30px 30px;
  background: #ebebeb;
  background: -moz-linear-gradient(top, #ebebeb 0%, #f7f7f7 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ebebeb), color-stop(100%, #f7f7f7));
  background: -webkit-linear-gradient(top, #ebebeb 0%, #f7f7f7 100%);
  background: -o-linear-gradient(top, #ebebeb 0%, #f7f7f7 100%);
  background: -ms-linear-gradient(top, #ebebeb 0%, #f7f7f7 100%);
  background: linear-gradient(to bottom, #ebebeb 0%, #f7f7f7 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 10px;
}
.popuppanelcloseicon {
  float: left;
  width: 30px;
  height: 30px;
  z-index: 11;
}
.contactorder1 {
  background: url(/Resource/Images/ContactSortUp.png) no-repeat;
}
.contactorder2 {
  background: url(/Resource/Images/ContactSortDown.png) no-repeat;
}
/*.gridtitle span {
    float: right;
    width: 15px;
    height: 15px;
    margin-right: 10px;
}*/
.popuppanelcontentline {
  float: left;
  width: 98% !important;
  padding: 0;
  margin: 0 0 5px 0;
  font-size: 13px;
}
.popuppanelcontentlabel {
  float: left;
  width: 20% !important;
  padding: 0;
  margin: 0 1% 0 0;
  text-align: right;
  background-color: transparent;
  color: #464545;
}
.popuppanelcontentinput {
  float: left;
  width: 79% !important;
  padding: 0;
  margin: 0;
  color: #555;
  text-align: left;
}
.popuppanelcontentinput input {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
  color: #000;
  border: 0;
  height: 20px;
}
.popuppanelcontentinput textarea {
  float: left;
  width: 100%;
  height: 70px;
  padding: 0;
  margin: 0;
  background-color: #fff;
  color: #000;
  border: 0;
}
.popuppanelcontentinput select {
  float: left;
  width: 40%;
  padding: 0;
  margin: 0;
  background-color: #fff;
  color: #000;
  border: 0;
}
.popuppanelcontentinputlabelscroll {
  float: left;
  background-color: white;
  width: 100%;
  height: 60px;
  padding: 3px;
  margin-bottom: 10px;
  white-space: pre-wrap;
  overflow-y: scroll;
  cursor: default;
}
.memberexistingsub {
  float: left;
  width: 98.9%;
  /*    border-style: solid;
    border-width: 0 1px 1px 1px;*/
  padding: 5px;
}
.memberexistingsubclicked {
  /*    border-style: solid;
    border-width: 1px 1px 0 1px;*/
}
.popuppanelcontentlinedouble {
  float: left;
  width: 98%;
  padding: 0;
  margin: 0 0 5px 0;
  font-size: 13px;
}
.popuppanelcontentlabeldouble {
  float: left;
  width: 20%;
  padding: 0;
  margin: 0 1% 0 0;
  text-align: right;
  background-color: transparent;
  color: #464545;
}
.popuppanelcontentinputdouble {
  float: left;
  width: 29%;
  padding: 0;
  margin: 0;
  color: #555;
  text-align: left;
}
.popuppanelcontentinputdouble input {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
  color: #000;
  border: 0;
  height: 20px;
}
.popuppanelouter {
  margin: 10px 5px 5px 5px;
  -webkit-border-radius: 0 0 0 18px;
  border-radius: 0 0 0 18px;
  background-color: #ECECEC;
  padding-top: 10px;
  float: left;
  overflow: auto;
}
.innericon,
.closeicon {
  cursor: pointer;
}
.classpopuppanel {
  float: left !important;
  margin-top: 50px !important;
  background-color: #ECECEC !important;
  border-color: #4A7A10 !important;
}
.popuppanelselect {
  float: right;
  margin: 5px 5px 0 5px;
  z-index: 11;
  cursor: pointer;
}
.popuppanelbox {
  float: right;
  height: 30px;
  z-index: 60;
  -webkit-box-shadow: 0px 0px 7px 7px rgba(150, 150, 150, 0.2);
  box-shadow: 0px 0px 7px 7px rgba(150, 150, 150, 0.2);
  border: 2px solid #fff;
  border-radius: 20px 20px 20px 20px;
  background: #ebebeb;
  background: -moz-linear-gradient(top, #ebebeb 0%, #f7f7f7 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ebebeb), color-stop(100%, #f7f7f7));
  background: -webkit-linear-gradient(top, #ebebeb 0%, #f7f7f7 100%);
  background: -o-linear-gradient(top, #ebebeb 0%, #f7f7f7 100%);
  background: -ms-linear-gradient(top, #ebebeb 0%, #f7f7f7 100%);
  background: linear-gradient(to bottom, #ebebeb 0%, #f7f7f7 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-left: 10px;
  min-width: 80px;
}
.adminmenuitem {
  width: 175px !important;
}
.classtabtitle {
  float: left;
  width: 24%;
  text-align: center;
  color: #464545;
  background-color: #ccc;
  margin-left: 2%;
  padding: 2px 0;
  cursor: pointer;
}
.classtabtitleselected {
  color: #fff;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4a7a10), to(#6eb419));
  background: -moz-linear-gradient(#4a7a10, #6eb419);
  background: linear-gradient(#4a7a10, #6eb419);
}
.titlebarcolor {
  -webkit-box-shadow: 0 0 5px 5px rgba(50, 50, 50, 0.1);
  box-shadow: 0 0 5px 5px rgba(50, 50, 50, 0.1);
  border: 1px solid #dcdcdc;
  background-color: #FBFBFB;
  color: #464545;
}
.titlebarcolor-l {
  -webkit-box-shadow: 0 0 5px 5px rgba(50, 50, 50, 0.1);
  box-shadow: 0 0 5px 5px rgba(50, 50, 50, 0.1);
  border: 2px solid #464545;
  background-color: #919191;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#919191), to(#E4E4E4));
  background: -moz-linear-gradient(#919191, #E4E4E4);
  background: linear-gradient(#919191, #E4E4E4);
}
.titlebarcolor-d {
  -webkit-box-shadow: 0 0 5px 5px rgba(50, 50, 50, 0.1);
  box-shadow: 0 0 5px 5px rgba(50, 50, 50, 0.1);
  border: 2px solid #e5e5e5;
  background-color: #333339;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333339), to(#61616B));
  background: -moz-linear-gradient(#333339, #61616B);
  background: linear-gradient(#333339, #61616B);
}
.titlebarcolor-ca {
  -webkit-box-shadow: 0 0 5px 5px rgba(50, 50, 50, 0.1);
  box-shadow: 0 0 5px 5px rgba(50, 50, 50, 0.1);
  border: 2px solid #D3E9BA;
  background-color: #4A7A10;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4A7A10), to(#6EB419));
  background: -moz-linear-gradient(#4A7A10, #6EB419);
  background: linear-gradient(#4A7A10, #6EB419);
}
.titlebarcolor-cb {
  -webkit-box-shadow: 0 0 5px 5px rgba(50, 50, 50, 0.1);
  box-shadow: 0 0 5px 5px rgba(50, 50, 50, 0.1);
  border: 2px solid #D1E3F7;
  background-color: #1F60A0;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1F60A0), to(#5F9FE0));
  background: -moz-linear-gradient(#1F60A0, #5F9FE0);
  background: linear-gradient(#1F60A0, #5F9FE0);
}
.titlebarcolor-cc {
  -webkit-box-shadow: 0 0 5px 5px rgba(50, 50, 50, 0.1);
  box-shadow: 0 0 5px 5px rgba(50, 50, 50, 0.1);
  border: 2px solid #FDD1C4;
  background-color: #C73707;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#C73707), to(#F56537));
  background: -moz-linear-gradient(#C73707, #F56537);
  background: linear-gradient(#C73707, #F56537);
}
.ui-menu-item-wrapper {
  float: left;
  width: 204px;
}
.ui-menu-item .ui-state-active {
  color: #000 !important;
  background-color: #cee4fc !important;
  border-color: #268af7 !important;
}
/* ==================================================================================================================================================== */
form {
  padding: 0;
  margin: 0 auto;
}
/*// positioning context
  > .item {
    background: white;

    // Looks like placeholder

    > input[type="text"],
    > input[type="email"],
    > input[type="password"] {
      width: 100%;
      border: 0;
      padding: 20px 20px 20px 50px;
      background: #eee;

      &:focus {
        // removing default focus style
        outline: 0;
        // adding new one
        background: white;

        & + label {
          opacity: 0;
        }
      }

      &:valid {
        background: url(/resource/images/check.svg);
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: 20px 20px;
        & + label {
          opacity: 0;
        }
      }

      &:invalid:not(:focus):not(:placeholder-shown) {
        background: pink;
        & + label {
          opacity: 0;
        }
      }

      &:invalid:focus:not(:placeholder-shown) {
        & ~ .requirements {
          max-height: 200px;
          padding: 0 30px 20px 50px;
          display:inline;
        }
      }
    }
      }
  }*/
/*.formbuildermainareabox .formbuilderareaitem .item input:valid{
    background: url(/resource/images/OnIcon.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 20px 20px;
    border-color:#77C21B;
}*/
.formbuildermainareabox .formbuilderareaitem .item input:invalid {
  border-color: red;
}
.formbuildermainareabox .formbuilderareaitem .item input:invalid ~ .requirements {
  max-height: 200px !important;
  border: 2px solid red;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 4px 4px;
}
.inputinvalid {
  border: 3px solid red !important;
}
.requirements {
  padding: 0 30px 0 50px;
  max-height: 0;
  transition: 0.28s;
  overflow: hidden;
  color: red;
  font-style: italic;
  position: absolute;
  background-color: #fff;
  margin: -30px -10px 0 0;
}
/*==============================================================================================*/
/*----------------------------Banner Info---------------------------------*/
.toolbarbannerinfo {
  position: fixed;
  width: 100%;
  background-color: transparent;
  color: #0c5460;
  text-align: center;
  border: 1px solid #bee5eb;
  bottom: 40px;
  padding: 5px 0;
  cursor: pointer;
  z-index: 99999;
  font-size: 18px;
  height: 22px;
}
.toolbarbannerinfo .bannerprogress {
  position: fixed;
  width: 10%;
  bottom: 43px;
  background-color: rgba(96, 214, 232, 0.4);
  height: 28px;
  transition: all linear 1s;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
}
.toolbarbannerinfo .bannertimer {
  float: right;
  padding-right: 20px;
}
/*.toolbarbannerinfo .bannerprogress:after {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;

    content: "";
}*/
/*.toolbarbannerinfo .bannerprogress:after {
    content: '';
    position: absolute;
    top: 0;
    right: -44px;
    width: 44px;
    height: 100%;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    transform: skew(-45deg);
    z-index: -1;
    background-color: rgba(96, 214, 232, 0.4);
}*/
/*.toolbarbannerinfo:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    transform: skew(-45deg);
    z-index: -1;
}*/
.toolbarbannerinfo.ok {
  background-color: #cce5ff !important;
  color: #004085 !important;
  border-color: #004085 !important;
}
.toolbarbannerinfo.ok:after {
  background-color: #cce5ff !important;
  color: #004085 !important;
  border-color: #b8daff !important;
}
.toolbarbannerinfo.error {
  background-color: #f8d7da !important;
  color: #721c24 !important;
  border-color: #f5c6cb !important;
}
.toolbarbannerinfo.error:after {
  background-color: #f8d7da !important;
  color: #721c24 !important;
  border-color: #f5c6cb !important;
}
.toolbarbannerinfo.info {
  background-color: #d1ecf1 !important;
  color: #0c5460 !important;
  border-color: #0c5460 !important;
}
.toolbarbannerinfo.info:after {
  background-color: #d1ecf1 !important;
  color: #0c5460 !important;
  border-color: #bee5eb !important;
}
.toolbarbannerinfo.success {
  background-color: #d4edda !important;
  color: #155724 !important;
  border-color: #155724 !important;
}
.toolbarbannerinfo.success:after {
  background-color: #d4edda !important;
  color: #155724 !important;
  border-color: #c3e6cb !important;
}
/*-------------------------------------------------------------*/
/*-----------------------------------------------*/
.classgridline {
  border-bottom: 2px solid #e3e3e3;
  border-top: 2px solid #e3e3e3;
  cursor: pointer;
  transition: ease-in 0.25s all;
}
.classgridline .classgridlinecell {
  padding: 5px 0 5px 0;
}
.classgridline .classgridlineicon {
  display: none;
}
.classgridline:hover {
  background-color: #CCE3E1;
  border-color: #899CA8;
}
.classgridline.selected {
  background-color: #CCE3E1;
  border-color: #899CA8;
  border-width: 3px;
}
.classgridline.hilight {
  background-color: yellow;
}
.classgridline.selected .classgridlineicon {
  display: block;
}
.classgridline:hover .classgridlineicon {
  display: block;
}
.classgridline.userstatus0 {
  background-color: #ffe7e7;
}
.classgridline.orderlinestatus0 {
  background-color: #e9e9e9;
}
.classgridline.orderlinestatus1 {
  background-color: #beffab;
}
.classgridline.orderlinestatus-1 {
  background-color: #dcdcdc;
}
.classgridline.orderlinestatus8 {
  background-color: #e7f5ff;
}
.classgridline.orderlinestatus9 {
  background-color: #ffe7e7;
}
.classgridline.orderlinestatus10 {
  background-color: #ffe7e7;
}
.classgridline.orderlinestatus11 {
  background-color: #e0ffd8;
}
.classgridline.orderlinestatus13 {
  background-color: #e9e9e9;
}
.classgridline .editablecell {
  font-weight: bold;
  border-radius: 20px;
  margin-left: -3px;
  padding-left: 3px;
  padding-top: 5px;
}
.classgridline .editablecell:hover {
  cursor: pointer;
  color: green;
}
.classgridline .editablecell.startdate {
  padding-top: 3px;
  background-color: #beffab;
}
.classgridline .editablecell.startdate .editicon {
  padding-right: 20px;
  font-size: 18px;
}
.classgridline .editablecell.startdate .saveicon {
  padding-right: 20px;
  font-size: 18px;
  color: #000;
}
.classgridline .editablecell.startdate .saveicon:hover {
  color: green;
}
.classgridline .editablecell.expirydate {
  padding-top: 3px;
  background-color: #beffab;
}
.classgridline .editablecell.expirydate .editicon {
  padding-right: 20px;
  font-size: 18px;
}
.classgridline .editablecell.expirydate .saveicon {
  padding-right: 20px;
  font-size: 18px;
  color: #000;
}
.classgridline .editablecell.expirydate .saveicon:hover {
  color: green;
}
.classgridline .editablecell .editablecellinput {
  border-radius: 5px;
}
/*-------------------------------------------------------------*/
/*- credit: https://alligator.io/css/css-spinning-loader-animation/ -*/
.spinning-loader-tiny {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50%;
  border: 2px solid rgba(29, 161, 242, 0.2);
  border-left-color: #1da1f2;
  background: transparent;
  animation: rotate-s-loader 1s linear infinite;
}
.spinning-loader-small {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50%;
  border: 2px solid rgba(29, 161, 242, 0.2);
  border-left-color: #1da1f2;
  background: transparent;
  animation: rotate-s-loader 1s linear infinite;
}
.spinning-loader {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
  border: 2px solid rgba(29, 161, 242, 0.2);
  border-left-color: #1da1f2;
  background: transparent;
  animation: rotate-s-loader 1s linear infinite;
}
.spinning-loader-large {
  width: 200px !important;
  height: 200px !important;
  border-radius: 50%;
  border: 2px solid rgba(29, 161, 242, 0.2);
  border-left-color: #1da1f2;
  background: transparent;
  animation: rotate-s-loader 1s linear infinite;
  margin: 100px;
}
@keyframes rotate-s-loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.spinning-loader-tiny.white,
.spinning-loader-small.white,
.spinning-loader.white,
.spinning-loader-large.white {
  border-left-color: #fff;
}
/*-------------------------------------------------------------*/
.totopbutton {
  display: none;
}
/*===========================================================================================================================*/
.foldermediaiconclose {
  background: url(/resource/images/folder_close.png) no-repeat;
  width: 20px;
  height: 20px;
  float: left;
}
.foldermediaiconopen {
  background: url(/resource/images/folder_open.png) no-repeat;
  width: 20px;
  height: 20px;
  float: left;
}
.foldermediaicondown {
  background: url(/resource/images/folder_down.png) no-repeat;
  width: 20px;
  height: 20px;
  float: left;
}
.foldermediaiconroot {
  background: url(/resource/images/folder_root.png) no-repeat;
  width: 20px;
  height: 20px;
  float: left;
}
.foldermedia {
  width: 99%;
  height: 95%;
  float: left;
  margin: 0.5%;
}
.foldermedia .header {
  float: left;
  width: 100%;
  height: 40px;
}
.foldermedia .footer {
  float: left;
  width: 100%;
  height: 30px;
}
.foldermedia .body {
  float: left;
  width: 100%;
  height: 100%;
}
.foldermedia .boxfolder {
  float: left;
  width: 39%;
  height: 99%;
  overflow: auto;
  padding: 0;
  margin: 0;
  background-color: #fff;
}
.foldermedia .fullfolder {
  float: left;
  width: 490px;
  height: 550px;
  overflow: auto;
  padding: 5px;
  background-color: #fff;
}
.foldermedia .boxmedia {
  float: left;
  width: 59%;
  height: 99%;
  background-color: #fff;
  padding: 0;
  margin: 0 0 0 0.5%;
}
.boxsplit {
  float: left;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0;
  margin: 0;
}
.boxspacer {
  float: left;
  width: 480px;
  height: 1px;
  border-bottom: 1px solid #464545;
  margin: 2px 0;
}
.boxsplitfull {
  float: left;
  width: 480px;
  height: 480px;
  overflow: auto;
  padding: 0 5px;
}
.foldermediacsvbox {
  float: left;
  width: 100%;
  height: 200px;
  overflow: auto;
}
.foldermediacsvboxfull {
  float: left;
  width: 100%;
  height: 450px;
  overflow: auto;
}
.foldermediacsvboxbig {
  float: left;
  width: 100% !important;
  height: 90%;
  overflow: auto;
  margin: 10px !important;
}
.fodermediadisplay {
  float: left;
  width: 100%;
  height: 220px;
  overflow: auto;
}
.foldermediasize {
  width: auto;
  padding: 0 3px;
  color: #000;
  background-color: #BFFBFF;
  margin: 2px 3px 0 0;
}
.foldermediadescription {
  width: 250px;
  overflow: hidden;
}
.boxsplit .preview {
  float: left;
  width: 100%;
}
.boxsplit .preview img {
  max-width: 420px;
}
.foldermedia .folderline {
  float: left;
  width: 450px;
  cursor: pointer;
  margin-bottom: 5px;
  background-color: #fff;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid #e0e0e2;
}
.foldermedia .folderline:hover,
.foldermedia .folderline.selected {
  border: 1px solid #000;
  background-color: #eaf0f9;
}
.foldermedia .folderline.dragselect {
  background-color: #bff1a4;
  border: 1px dashed #464545;
  color: #000;
}
.foldermedia .folderline.hover {
  background-color: #a4f1c2;
  border: 1px dashed #000;
  color: #000;
}
.folder-draggable-helper {
  opacity: 0.6 !important;
  border: 1px solid red !important;
}
.foldermedia .folderlinepreview {
  float: left;
  width: 460px;
  cursor: pointer;
  padding: 3px 1%;
  margin-bottom: 5px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e2;
}
.foldermedia .folderlinepreview.selected,
.foldermedia .folderlinepreview:hover {
  background-color: #F0F0F0;
}
.foldermedia .folderlinepreview.multiselected {
  background-color: #F0F0F0;
}
.foldermedia .folderline .expand {
  float: left;
  width: 20px;
  height: 20px;
  background-color: #fff;
}
.foldermedia .folderline .name {
  float: left;
  width: 203px;
  height: 20px;
  overflow: hidden;
}
.foldermedia .folderline .nameshared {
  float: left;
  width: 203px;
  height: 20px;
  color: #63A2E3;
}
.foldermedia .folderline.selected .nameshared {
  float: left;
  width: 203px;
  height: 20px;
  color: #1F60A0;
}
.foldermedia .folderline .folderdetails {
  float: right;
  padding-right: 3px;
}
.foldermedia .folderline .folderdetails span {
  background-color: #777;
  border-radius: 5px;
  color: #fff;
  float: left;
  width: auto;
  padding: 0 3px;
  margin: 2px 2px 0 0;
}
.foldermedia .foldermediaexpand {
  display: none;
  width: 100%;
  float: left;
}
.foldermedia .foldermediaexpand span {
  float: right;
  margin: 0 5px;
}
.foldermedia .folderline .folderoptions {
  float: right;
}
.foldermedia .folderline .folderoptions .empty {
  float: right;
  width: 0;
  height: 20px;
  background-color: #fff;
}
.foldermedia .folderline .folderoptions .delete,
.foldermedia .folderline .folderoptions .add,
.foldermedia .folderline .folderoptions .upload,
.foldermedia .folderline .folderoptions .permissions {
  float: left;
  width: 16px;
  height: 16px;
}
.foldermedia .folderlist {
  float: left;
  margin: 0 0 0 30px;
  border-left: 1px dashed #5f9fe0;
  /*background : url(/Resource/images/FolderDash.png) repeat-x;*/
}
.folderdialog {
  float: left;
  width: 100%;
}
.folderdialog .line {
  float: left;
  width: 100%;
  margin-bottom: 5px;
}
.folderdialog .title {
  text-align: center;
  margin: 10px 0 0 0;
  font-weight: bold;
  font-size: 14px;
}
.folderdialog .line input {
  float: left;
  width: 90%;
  margin: 2px 2.5%;
}
.folderdialog .error {
  float: left;
  width: 100%;
  margin: 2px 0;
  color: red;
}
.folderdialog .boxouter {
  margin: 0;
  padding: 0;
  float: left;
  width: 49%;
}
.folderdialog .box {
  width: 100px;
  text-align: center;
  background: #fff;
  margin: 5px 0 5px -50px;
  border: 1px solid #5f9fe0;
  left: 50%;
  position: relative;
}
.folderdialog .box:hover {
  background-color: #464545;
  color: #fff;
}
.foldermediaupload {
  float: left;
  width: 100%;
}
.foldermediaupload .uploader {
  float: left;
  width: 98%;
  margin: 0 1%;
  border: 1px solid #000;
}
.foldermediaupload .drag {
  float: left;
  width: 93%;
  text-align: center;
  margin: 3%;
  background-color: #C2E0FF;
  height: 40px;
  padding: 20px 0 0 0;
  border: 2px dashed #5f9fe0;
}
.foldermediaupload .or {
  float: left;
  width: 100%;
  text-align: center;
}
.foldermediaupload .browser {
  float: left;
  width: 100%;
}
.foldermediaupload .browser span {
  float: left;
  width: 80%;
  margin: 0 0 0 10px;
}
.foldermediaupload .browser input {
  float: left;
  width: 90%;
  margin: 5px 0 5px 10px;
}
.foldermediaupload .percent {
  float: left;
  width: 98%;
  height: 10px;
}
.foldermediaupload .percentbar {
  float: left;
  height: 10px;
  width: 1px;
  background-color: deepskyblue;
}
.foldermediaupload .line {
  float: left;
  width: 100%;
}
.foldermediaupload .line span {
  float: right;
  margin: 0 5px;
}
/*=======================================
Folder Media Pageing
========================================*/
.foldermediapaging {
  float: right;
  margin: 10px 5px 5px 5px;
}
.foldermediapaging ul {
  height: 15px;
  margin: 0;
  padding: 0;
  float: left;
  font-size: 12px;
}
.foldermediapaging ul li {
  padding: 2px;
  float: left;
  width: auto;
}
.foldermediapaging a {
  margin-right: 2px;
  font-size: 12px;
}
.foldermediapaging .resultsprevious-off,
.foldermediapaging .resultsnext-off {
  color: #B4B4B4;
  float: left;
  width: auto;
}
.foldermediapaging .resultnext a,
.foldermediapaging .resultsprevious a {
  padding: 2px;
  height: 15px;
  float: left;
  width: auto;
}
.foldermediapaging .resultsnext,
.foldermediapaging .resultsprevious {
  width: auto;
}
.foldermediapaging .resultsactive {
  color: #303030;
  background-color: #fff;
  float: left;
}
.foldermediapaging a:link,
.foldermediapaging a:visited {
  color: #6B6B6B;
  display: block;
  float: left;
  padding: 1px;
  text-decoration: none;
}
.foldermediapaging a:hover {
  color: #303030;
  background-color: #E6F3FF;
}
.displaylink {
  float: left;
  font-weight: bold;
  cursor: pointer;
  border-bottom: 1px solid #464545;
  padding: 0 0 2px 0;
}
/*#LoadingPopupContent, #MagicHubLoading, #PopupPanelLoadingContent // #PopupPanelMediaFolderContent {
height: inherit;
display: flex;
}*/
/*-----------------------Slide out panel----------------------*/
.righthandslide {
  position: fixed;
  width: 80%;
  height: 100%;
  top: 0;
  right: 0;
  margin: 0;
  transition: width ease-in-out 0.25s;
  z-index: 102;
  overflow: auto;
}
.righthandslide.tiny {
  width: 20%;
}
.righthandslide.small {
  width: 40%;
}
.righthandslide.medium {
  width: 60%;
}
.righthandslide.large {
  width: 95%;
}
.righthandslide.hidden {
  width: 0;
  margin-right: -20%;
  transition: width ease-in-out 0.25s;
}
.righthandslide-left {
  width: 100%;
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(67, 125, 153, 0.75);
  content: '';
  transition: width ease-in-out 0.25s;
  cursor: pointer;
  z-index: 101;
}
/*.righthandslide-left.tiny {
    width: 80%;
}

.righthandslide-left.small {
    width: 60%;
}

.righthandslide-left.medium {
    width: 40%;
}*/
.righthandslide-left.hidden {
  width: 0;
  transition: width ease-in-out 0.25s;
}
/*==================================================================================*/
.diaryactionreportleft {
  float: left;
  width: 75%;
}
.diaryactionreportright {
  float: left;
  width: 20%;
}
.diaryactionreportright .filterresults {
  float: left;
  width: 175px;
}
.diaryactionreportright .title {
  float: left;
  font-size: 14px;
  margin: 5px 0;
}
.diaryactionreportright ul {
  float: left;
  width: 100%;
}
.diaryactionreportright li {
  float: left;
  width: 100%;
  border-bottom: 1px solid #dbd7d7;
  padding: 2px 0;
  margin: 2px 0;
}
.diaryactionreportright li:hover {
  border-color: #a9a9a9;
}
.diaryactionreportright .filterbox {
  float: left;
  width: 175px;
}
.diaryactionreportright .filterbox .highlighttoggle {
  float: left;
  width: 150px;
  height: 20px;
  background-color: #e3e3e3;
  border-radius: 15px;
  margin: 2%;
  cursor: pointer;
  border: 1px solid #77C21B;
}
.diaryactionreportright .filterbox .highlighttoggle .toggleitem {
  float: left;
  width: 75px;
  height: 16px;
  border-radius: 15px;
  text-align: center;
  padding-top: 4px;
}
.diaryactionreportright .filterbox .highlighttoggle .toggleitem.selected {
  background-color: #77C21B;
  color: #fff;
  font-weight: bold;
  width: 85px;
}
.diaryactionreportright .filterbox .buttonone {
  margin: 0 5px 0 0;
}
.diaryactionreportright .filterresults .checkbox {
  float: right;
  width: 30px;
}
.diaryactionreportright .filterresults .box {
  float: left;
  width: 80%;
  cursor: pointer;
}
.diaryactionreportright .filterresults .icon {
  float: left;
  width: 16px;
  height: 16px;
}
.diaryactionreportright .filterresults .body {
  float: left;
  margin: 0 0 0 5px;
}
.diaryactionreport {
  float: left;
  width: 98%;
  margin: 5px 1%;
  overflow: auto;
  height: 615px;
}
.diaryactionreportleft .tab {
  float: left;
  width: 100%;
}
.diaryactionreportleft .tabspan {
  float: left;
  width: 110px;
  padding: 2px 5px;
  margin: 2px 5px 2px 0;
  border: 1px solid #5f9fe0;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
.diaryactionreportleft .tablastcheck {
  float: right;
  width: 110px;
  margin: 2px 5px 2px 10px;
  border: 1px solid #ccc;
  font-size: 12px;
  font-weight: bold;
}
.diaryactionreport ul {
  float: left;
  width: 100%;
}
.diaryactionreport li {
  float: left;
  width: 100%;
  padding: 2px 0;
  border-bottom: 1px solid #dbd7d7;
}
.diaryactionreport li:hover {
  background-color: #e0e0e2;
}
.diaryactionreport .filter {
  background-color: #77C21B;
}
.diaryactionreport .block1 {
  float: left;
  width: 98%;
  margin: 2px 0;
  border: 3px solid #1F60A0;
}
.diaryactionreport .block1 .status {
  float: left;
  width: 60px;
  font-weight: bold;
  color: #5f9fe0;
  margin: 0 0 0 0;
}
.diaryactionreport .block2 {
  float: left;
  width: 98%;
  margin: 2px 0;
  border: 3px solid #F7683A;
}
.diaryactionreport .block2 .status {
  float: right;
  width: 60px;
  font-weight: bold;
  color: #F7683A;
  margin: 0 0 0 0;
}
.diaryactionreport .block3 {
  float: left;
  width: 98%;
  margin: 2px 0;
  border: 3px solid #77C21B;
}
.diaryactionreport .block3 .status {
  float: right;
  width: 60px;
  font-weight: bold;
  color: #77C21B;
  margin: 0 0 0 0;
}
.diaryactionreport .block {
  float: left;
  width: 90%;
}
.diaryactionreport .line {
  float: left;
  width: 98%;
}
.diaryactionreport .line .index {
  float: right;
  width: 16px;
  height: 16px;
  text-align: center;
  border: 1px solid #1F60A0;
  background-color: #5f9fe0;
  color: #fff;
  border-radius: 10px;
  margin: 2px 0 0 5px;
  font-weight: bold;
}
.diaryactionreport .line .display {
  float: left;
  color: #1F60A0;
  width: 45%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diaryactionreport .line .display.large {
  float: left;
  color: #1F60A0;
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diaryactionreport .line .percentouter {
  float: right;
  color: #1F60A0;
  font-weight: bold;
  width: 48%;
  border-right: 1px solid green;
  background-color: #e0e0e2;
  text-align: center;
  margin-right: 3px;
}
.diaryactionreport .line .percentouter .progress {
  float: left;
  background-color: #8fea8f;
}
.diaryactionreport .line .percentouter .percent {
  display: inline-block;
}
.diaryactionreport .line .timeremaining {
  float: left;
  color: #1F60A0;
  margin: 0 10px 0 10px;
}
.diaryactionreport .line .countouter {
  float: right;
  color: #1F60A0;
  font-weight: bold;
  width: 200px;
  border-right: 1px solid green;
  background-color: #e0e0e2;
  text-align: center;
  margin-right: 3px;
}
.diaryactionreport .line .countouter .countprogress {
  float: left;
  width: 100%;
  /*-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;*/
}
.diaryactionreport .line .countouter .countprogress.selected {
  background-color: #8fea8f;
}
/*.diaryactionreportleft:hover .diaryactionreport .line .countouter .countprogress {
    background-color:#8fea8f;  
}*/
.diaryactionreport .line .percentouter .count {
  display: inline-block;
}
.diaryactionreport .line .timetaken {
  float: left;
  color: #1F60A0;
  width: 40px;
  margin-left: 10px;
}
.diaryactionreport .line .label {
  float: left;
  width: 50px;
}
.diaryactionreport .line .title {
  float: left;
  width: 135px;
}
.diaryactionreport .line .labelsmall {
  float: left;
  width: 60px;
}
.diaryactionreport .line .date {
  float: left;
  width: 70px;
  font-weight: bold;
}
.diaryactionreport .image {
  float: left;
  width: 35px;
  margin: 0 0 0 5px;
}
.diaryactionreport img {
  float: left;
}
.diaryactionreport .line .icon {
  float: right;
  width: 16px;
  height: 16px;
}
/* ==================================================================================================================================================== */
/*--------------------------------------------------*/
/*--------------Pulse animation---------------------*/
.circlepulse {
  position: relative;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  box-shadow: 0px 0px 1px 1px #0000001a;
  background-color: yellow;
  animation: pulse-animation 1s infinite;
  top: 10px;
  left: 50%;
}
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(255, 239, 0, 0.57);
  }
}
/*-----------------------------------------------------------------*/
/*-------------------------Font awesome helpers--------------------*/
/*--------------Hover colours for font awesome---------------------*/
.hovercolorwhite:hover,
.hovercolor-w:hover {
  color: #fff;
}
.hovercolorlightgrey:hover,
.hovercolor-l:hover {
  color: #D1D2D6;
}
.hovercolordarkgrey:hover,
.hovercolor-d:hover {
  color: #909090;
}
.hovercolorblack:hover,
.hovercolor-b:hover {
  color: #33353A;
}
.hovercolorgreen:hover,
.hovercolor-ca:hover {
  color: #6FB519;
}
.hovercolorblue:hover,
.hovercolor-cb:hover {
  color: #63A2E3;
}
.hovercolororange:hover,
.hovercolor-cc:hover {
  color: #F7683A;
}
.iconcolorwhite,
.iconcolor-w {
  color: #fff;
}
.iconcolorlightgrey,
.iconcolor-l {
  color: #D1D2D6;
}
.iconcolordarkgrey,
.iconcolor-d {
  color: #909090;
}
.iconcolorblack,
.iconcolor-b {
  color: #33353A;
}
.iconcolorgreen,
.iconcolor-ca {
  color: #6FB519;
}
.iconcolorblue,
.iconcolor-cb {
  color: #63A2E3;
}
.iconcolororange,
.iconcolor-cc {
  color: #F7683A;
}
/*-----------------------------------------------------------------*/
/*--------------------------Font size------------------------------*/
.fontsize16 {
  font-size: 16px;
}
.fontsize18 {
  font-size: 18px;
}
.fontsize20 {
  font-size: 20px;
}
.fontsize22 {
  font-size: 22px;
}
.fontsize24 {
  font-size: 24px;
}
.fontsize30 {
  font-size: 30px;
}
.fontsize60 {
  font-size: 60px;
}
/*================================================================================*/
.multi-select-container {
  display: inline-block;
  /*position: relative;*/
  float: left;
  color: #000;
}
.multi-select-menu {
  position: absolute;
  /*left: 0;
    top: 0.8em;*/
  z-index: 1;
  float: left;
  /*min-width: 100%;*/
  background: #fff;
  /*margin: 1em 0;*/
  border: 1px solid #aaa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: none;
}
/*      -- FOR SOME REASON THESE TWO CLASSES ARE IN REPORT.less
.multi-select-menuitem input {
    position: relative !important;
    margin: 0 !important;
    width: auto !important;
    float: left !important;
}

.multi-select-menuitem {
    display: block;
    font-size: 12px;
    padding: 3px 1%;
    white-space: nowrap;
    float: left !important;
    width: 98% !important;

}*/
/*.multi-select-menuitem {
    display: block;
    font-size: 0.875em;
    padding: 0.6em 1em 0.6em 30px;
    white-space: nowrap;
}*/
.multi-select-menuitem {
  display: block;
  font-size: 12px;
  padding: 2% 1%;
  white-space: nowrap;
  float: left !important;
  width: 98% !important;
  cursor: pointer;
  font-weight: bold;
}
.multi-select-menuitem:hover,
.multi-select-menuitem.selected {
  background: linear-gradient(#577284, #899CA8);
  color: #fff;
}
.multi-select-menuitem input {
  position: relative !important;
  /*margin: 0 !important;*/
  /*width: auto !important;*/
  float: left !important;
  margin: 0 10% 0 0;
  height: 20px;
  width: 20px;
}
.multi-select-menuitem + .multi-select-menuitem {
  /*padding-top: 0;*/
}
.multi-select-presets {
  border-bottom: 1px solid #ddd;
}
/*.multi-select-menuitem input {
    position: absolute;
    margin-top: 0.25em;
    margin-left: -20px;
    width: auto !important;
}*/
.multi-select-button {
  display: inline-block;
  font-size: 0.875em;
  padding: 0.2em 0.6em;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: -0.5em;
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: default;
}
.multi-select-button:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4em 0.4em 0 0.4em;
  border-color: #999 transparent transparent transparent;
  margin-left: 0.4em;
  vertical-align: 0.1em;
}
.multi-select-container--open .multi-select-menu {
  display: block;
}
.multi-select-container--open .multi-select-button:after {
  border-width: 0 0.4em 0.4em 0.4em;
  border-color: transparent transparent #999 transparent;
}
.multi-select-container--positioned .multi-select-menu {
  /* Avoid border/padding on menu messing with JavaScript width calculation */
  box-sizing: border-box;
}
.multi-select-container--positioned .multi-select-menu label {
  /* Allow labels to line wrap when menu is artificially narrowed */
  white-space: normal;
}
.multi-select-menuitems {
  float: left;
  width: 250px;
}
.multi-select-menu .confirmbutton {
  position: absolute;
  top: 100%;
  left: 100%;
  width: 20px;
  height: 20px;
  padding: 3px;
  background-color: #fff;
  content: '';
  background: linear-gradient(#577284, #899CA8);
  border-radius: 50%;
}
.multi-select-menu .cancelbutton {
  position: absolute;
  top: -20px;
  left: 100%;
  width: 20px;
  height: 20px;
  padding: 3px;
  background-color: #fff;
  content: '';
  border-radius: 50%;
}
/*==============calendar strip new css====================*/
.calendartimelinemainbar {
  float: left;
  width: 100%;
  padding: 0;
  margin: 20px 0 0;
}
.mainbarstrip {
  float: left;
  width: 100%;
  background-color: #fff;
  padding: 0;
  margin: 5px 0;
  border-bottom: 2px solid #DD771B;
  -webkit-box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.1);
}
.calendartimeline {
  width: 100%;
  float: left;
}
.calendartimelinebox {
  margin: auto;
  text-align: center;
  margin-bottom: 10px;
}
.calendartimelinebox span {
  font-size: 30px;
  color: #1E2D33;
  -webkit-text-shadow: 3px 3px 5px #ababab;
  text-shadow: 3px 3px 5px #ababab;
  filter: dropshadow(color=#ababab, offx=3, offy=3);
  margin-left: 180px;
}
.calendartimelinebox div {
  cursor: pointer;
}
.calendartimelineprevious {
  float: left;
  width: 3%;
  cursor: pointer;
  height: 82px;
  background: url("/resource/images/calp.png") no-repeat scroll left bottom;
}
.calendartimelinenext {
  float: right;
  width: 3%;
  cursor: pointer;
  height: 82px;
  background: url("/resource/images/caln.png") no-repeat scroll left bottom;
}
.calendartimelinemode {
  float: left;
  width: 80px;
  padding: 5px 10px;
  margin: 0;
  background-image: -moz-linear-gradient(top, #464545 0%, #000 100%);
  background-image: -ms-linear-gradient(top, #464545 0%, #000 100%);
  background-image: -o-linear-gradient(top, #464545 0%, #000 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #464545), color-stop(1, #000));
  background-image: -webkit-linear-gradient(top, #464545 0%, #000 100%);
  background-color: #464545;
  border-right: 1px solid #DD771B;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  color: #fff;
  cursor: pointer;
}
.calendartimelinemodestart {
  float: left;
  width: 80px;
  padding: 5px 10px;
  margin: 0;
  background-image: -moz-linear-gradient(top, #464545 0%, #000 100%);
  background-image: -ms-linear-gradient(top, #464545 0%, #000 100%);
  background-image: -o-linear-gradient(top, #464545 0%, #000 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #464545), color-stop(1, #000));
  background-image: -webkit-linear-gradient(top, #464545 0%, #000 100%);
  background-color: #464545;
  border-right: 1px solid #DD771B;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  color: #fff;
  -webkit-border-radius: 10px 0px 0px 10px;
  border-radius: 10px 0px 0px 10px;
  cursor: pointer;
}
.calendartimelinemodeend {
  float: left;
  width: 80px;
  padding: 5px 10px;
  margin: 0;
  background-image: -moz-linear-gradient(top, #464545 0%, #000 100%);
  background-image: -ms-linear-gradient(top, #464545 0%, #000 100%);
  background-image: -o-linear-gradient(top, #464545 0%, #000 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #464545), color-stop(1, #000));
  background-image: -webkit-linear-gradient(top, #464545 0%, #000 100%);
  background-color: #464545;
  border-right: 1px solid #000;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  color: #fff;
  -webkit-border-radius: 0px 10px 10px 0px;
  border-radius: 0px 10px 10px 0px;
  cursor: pointer;
}
.calendartimelinemode.selected,
.calendartimelinemodestart.selected,
.calendartimelinemodeend.selected {
  cursor: default;
  background-image: -moz-linear-gradient(top, #DD771B 0%, #fa9132 100%);
  background-image: -ms-linear-gradient(top, #DD771B 0%, #fa9132 100%);
  background-image: -o-linear-gradient(top, #DD771B 0%, #fa9132 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DD771B), color-stop(1, #fa9132));
  background-image: -webkit-linear-gradient(top, #DD771B 0%, #fa9132 100%);
  background-color: #DD771B;
  color: #000;
}
.calendartimeline.first,
.calendartimelinediv.first {
  border-left: 1px solid #DD771B;
}
.calendartimelinedivsel {
  float: left;
  height: 50px;
  cursor: pointer;
  text-align: center;
  background: #1E2D33 url("/resource/images/cornerb.png") repeat-x scroll left bottom;
  border-bottom: 1px solid #DD771B;
  border-right: 1px solid #DD771B;
  border-top: 1px solid #DD771B;
  color: #fff;
  margin: 0;
  padding: 0;
}
.calendartimelinediv {
  float: left;
  height: 50px;
  border-bottom: 1px solid #DD771B;
  border-right: 1px solid #DD771B;
  border-top: 1px solid #DD771B;
  cursor: pointer;
  text-align: center;
  color: #1E2D33;
  margin: 0;
  padding: 0;
}
.calendartimelinedivselnow {
  float: left;
  height: 50px;
  cursor: pointer;
  text-align: center;
  background: #ffd800 url("/resource/images/cornerb.png") repeat-x scroll left bottom;
  border-bottom: 1px solid #DD771B;
  border-right: 1px solid #DD771B;
  border-top: 1px solid #DD771B;
}
.calendartimelinedivnow {
  float: left;
  height: 50px;
  border-bottom: 1px solid #DD771B;
  border-right: 1px solid #DD771B;
  border-top: 1px solid #DD771B;
  cursor: pointer;
  text-align: center;
  background-color: #ffd800;
  margin: 0;
  padding: 0;
}
.calendartimelinedivsel.selectedday,
.calendartimelinediv.selectedday,
.calendartimelinedivselnow.selectedday,
.calendartimelinedivnow.selectedday {
  background-color: #bce9e9;
  color: #1E2D33;
}
.calendartimelinedivtop {
  float: left;
  border-top: 1px solid #DD771B;
  border-right: 1px solid #fff;
  text-align: center;
  font-size: 14px;
  height: 20px;
  margin: 5px 0 0 0;
  padding: 0;
  color: #1E2D33;
}
.calendartimelinedivtopempty {
  float: left;
  height: 21px;
  margin-top: 5px;
}
.calendartimelinedivtopstart {
  float: left;
  border-top: 1px solid #DD771B;
  border-right: 1px solid #fff;
  text-align: center;
  font-size: 14px;
  height: 20px;
  margin: 5px 0 0 0;
  padding: 0;
  color: #1E2D33;
}
.calendartimelinedivtopend {
  float: left;
  border-top: 1px solid #DD771B;
  border-right: 1px solid #fff;
  text-align: center;
  font-size: 14px;
  height: 20px;
  margin: 5px 0 0 0;
  padding: 0;
  color: #1E2D33;
}
.calendartimelinedivtopstartweek {
  float: left;
  border-top: 1px solid #1E2D33;
  border-right: 1px solid #1E2D33;
  text-align: center;
  font-size: 14px;
  height: 20px;
  margin: 5px 0 0 0;
  padding: 0;
  background-color: #1E2D33;
  color: #fff;
}
.calendartimelinedivtopendweek {
  float: left;
  border-top: 1px solid #1E2D33;
  border-right: 1px solid #1E2D33;
  text-align: center;
  background-color: #1E2D33;
  font-size: 14px;
  height: 20px;
  margin: 5px 0 0 0;
  padding: 0;
  color: #fff;
}
.calendartimelinedivtopstartweek.first,
.calendartimelinedivtopendweek.first,
.calendartimelinedivtopstart.first,
.calendartimelinedivtopend.first,
.calendartimelinedivtop.first {
  border-right: 0px solid transparent;
  border-left: 1px solid #DD771B;
}
.calendartimelinedivtopstartweek.last,
.calendartimelinedivtopendweek.last,
.calendartimelinedivtopstart.last,
.calendartimelinedivtopend.last,
.calendartimelinedivtop.last {
  border-right: 1px solid #DD771B;
  border-left: 0px solid transparent;
}
.calendartimelinepop {
  background: transparent url(/resource/images/calendar-date-icon.png) no-repeat;
  position: fixed;
  height: 128px;
  width: 128px;
  z-index: 99;
}
.footerouter {
  float: left;
  width: 80%;
  padding: 5% 10%;
  background-color: #577284;
  border-top: dashed 7px #fff;
  color: #fff;
  font-size: 14px;
}
.footerouter .footerinner {
  float: left;
  width: 100%;
}
.footerouter .footerinner .column {
  float: left;
  width: 30%;
}
.footerouter .footerinner .column .item {
  float: left;
  width: 100%;
  padding: 5px 0;
}
.footerouter .footerinner .column .item.large {
  font-size: 22px;
  font-weight: 700;
}
.footerouter .footerinner .bottomrow {
  float: left;
  width: 100%;
}
.leftsidescrollprogressouter {
  position: fixed;
  top: 0;
  left: 0;
  width: 5px;
  background-color: transparent;
  height: 100%;
}
.leftsidescrollprogressouter .leftsidescrollprogress {
  width: 100%;
  background-color: #577284;
  height: 0;
  transition: all 0.5s ease-in-out;
}