@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
@import url('https://fonts.googleapis.com/css?family=Quicksand');

html {
  height: 100%;
}

body, TD, TH, input, select, textarea, div, input, button {
  font-family: 'Open Sans', tahoma, arial;
  FONT-SIZE: 14px;
  color: #333
}

body {
  margin: 10px;
  background-color: #FFF;
}

  body.grayBG {
    background-color: #F7F7F7;
  }

  body.lightBlueBG {
    background-color: #cfe1f4;
  }

  body.noMargin {
    margin: 0 !important
  }

  body.adminBG {
    background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color: #0A3049;
    background-size: 16px 16px;
  }


p {
  margin: 0;
  padding: 0;
}

h1, .header {
  padding: 2px;
  font-family: 'Quicksand', 'Open Sans', sans-serif;
  margin: 0;
  margin-bottom: 5px;
  color: #2b579a;
  FONT-SIZE: 25px;
  display: block;
  font-weight: normal;
}

h2, .header2 {
  padding: 2px;
  margin: 0;
  margin-bottom: 5px;
  font-family: 'Quicksand', 'Open Sans', sans-serif;
  color: #2b579a;
  FONT-SIZE: 21px;
  font-weight: normal;
  display: block;
}

h3, .header3 {
  padding: 2px;
  margin: 0;
  margin-bottom: 5px;
  color: #2b579a;
  font-family: 'Quicksand', 'Open Sans', sans-serif;
  FONT-SIZE: 17px;
  font-weight: normal;
  display: block;
}

h4, .header4 {
  padding: 2px;
  margin: 0;
  color: #2b579a;
  font-family: 'Quicksand', 'Open Sans', sans-serif;
  FONT-SIZE: 15px;
  font-weight: bold;
  display: block;
}

.noMargin {
  margin: 0 !important
}

ul, ol {
  margin: 10px 0 0 0;
  padding: 0;
}

li {
  margin: 0 0 10px 30px;
}

.lined {
  border-bottom: 1px solid #2b579a;
}

/*BUTTONS*/
a.button:link, a.button:visited, input.button[type=submit], input.button[type=button], button.button {
  color: white;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  background: #5c94cb;
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 600;
  transition: all .25s;
  cursor: pointer;
  min-width: 70px;
  text-align: center;
  box-sizing: border-box
}

  a.button:hover, input.button[type=submit]:hover, input.button[type=button]:hover, button.button:hover {
    background-color: #3671ab;
    text-decoration: none;
  }

  a.button.gray:link, a.button.gray:visited, input.button.gray[type=submit], input.button.gray[type=button], button.button.gray {
    background: #bbb;
  }

    a.button.gray:hover, input.button.gray[type=submit]:hover, input.button.gray[type=button]:hover, button.gray.button:hover {
      background-color: #999;
      text-decoration: none;
    }

/*object*/
a.object:link, a.object:visited, input.object[type=submit], input.object[type=button], button.object {
  display: block;
  text-align: center;
  background-color: #DDDDDD;
  margin: 2px;
  padding: 3px 10px;
  color: black;
  border-radius: 0;
  border: 1px solid #A7A7A7;
  font-size: 13px;
  font-weight: normal;
  text-decoration: none;
  transition: background-color .25s;
}

  a.object:hover, input.object[type=submit]:hover, input.object[type=button]:hover, button.object:hover {
    background-color: #C1C1C1;
    text-decoration: none;
  }

  a.object.inactive:link, a.object.inactive:visited, input.object.inactive[type=submit], input.object.inactive[type=button], button.object.inactive {
    background-color: #ECECEC;
    color: rgb(159, 159, 159);
    border: 1px solid #C9C9C9;
    transition: none;
  }

a.cms-button:link, a.cms-button:visited, input.cms-button[type=submit], button.cms-button {
  color: #FFF;
  display: inline-block;
  text-decoration: none;
  background: #3598d9;
  padding: 5px 10px;
  font-size: 16px;
  font-weight: 400;
  transition: all .25s;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

  a.cms-button:hover, input.cms-button[type=submit]:hover, button.cms-button:hover {
    background-color: #2a80b7;
    text-decoration: none;
  }

a.smallButton:link, a.smallButton:visited, input.smallButton[type=submit], input.smallButton[type=button], button.smallButton {
  box-sizing:border-box;
  color: white;
  display: inline-block;
  text-decoration: none;
  background: #5c94cb;
  border: none;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 600;
  transition: all .25s;
  cursor: pointer;
  text-align:center
}

  a.smallButton:hover, input.smallButton[type=submit]:hover, input.smallButton[type=button]:hover, button.smallButton:hover {
    background-color: #3671ab;
    text-decoration: none;
  }

a.mediumButton:link, a.mediumButton:visited, input.mediumButton[type=submit], input.mediumButton[type=button], button.mediumButton {
  color: white;
  display: inline-block;
  text-decoration: none;
  background: #5c94cb;
  border: none;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  font-weight: normal;
  transition: all .25s;
  cursor: pointer;
}

  a.mediumButton:hover, input.mediumButton[type=submit]:hover, input.mediumButton[type=button]:hover, button.mediumButton:hover {
    background-color: #3671ab;
    text-decoration: none;
  }

.helpContents {
  display: none !important
}

.button:disabled {
  color: silver !important;
  background-color: #e1e1e1 !important
}

a:focus,
input:focus,
select:focus,
textarea:focus,
cms-button:focus,
button:focus {
  outline: none;
}

.icon {
  font-size: 16px !important;
}

a.icon:link, a.icon:visited {
  text-decoration: none;
}

a.icon:hover {
  text-decoration: none;
}

.red {
  color: red;
}

A:link,
A:visited {
  color: #4b77a7;
}

A:hover {
  color: #16487e;
}

A.plain:link, A.plain:visited, .plain a:link, .plain a:visited {
  text-decoration: none;
}

A.plain:hover, .plain a:hover {
  text-decoration: none;
}

A.red:link, A.red:visited {
  text-decoration: none;
  color: crimson;
}

a.red:hover {
  color: red;
}

.light {
  color: white
}

a.light:link {
  color: #FFF;
}

a.light:visited {
  color: #fff;
}

a.light:hover {
  color: #4b77a7;
}

a.light.noChange:hover {
  color: #fff;
}



.cms-numberInput, .cms-textInput {
  outline: none;
  padding: 7px;
  border: 1px solid transparent;
  background-color: #E8E8E8;
  border-radius: 5px;
  font-size: 14px;
  transition: .2s all
}

.cms-numberInput {
  width: 65px;
  text-align: center;
}

  .cms-numberInput:focus, .cms-textInput:focus {
    background-color: #D5D5D5;
  }

  .cms-numberInput.invalid, .cms-numberInput.invalid:focus, .cms-textInput.invalid, .cms-textInput.invalid:focus {
    background-color: #ffddde;
    border: 1px solid red;
  }

  .cms-numberInput::-webkit-input-placeholder, .cms-textInput::-webkit-input-placeholder {
    color: #AAA
  }


fieldset {
  border: 1px solid silver
}

  fieldset legend {
    color: #698cb1;
    FONT-SIZE: 14px;
    font-weight: normal;
    margin-bottom: 0;
    padding: 5px;
  }

.box {
  background-color: #FFF;
  padding: 15px;
  border: 1px solid #000;
}

.lightBorder {
  border: 1px solid silver;
}

.loginBox {
  border-top: 10px solid #006eb8;
  background-color: #fff;
  padding: 30px;
  margin: 10vh auto 5px auto;
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

.gradBoxLight {
  -webkit-box-shadow: 0px 3px 12px -5px rgba(0,0,0,0.31);
  -moz-box-shadow: 0px 3px 12px -5px rgba(0,0,0,0.31);
  box-shadow: 0px 3px 12px -5px rgba(0,0,0,0.31);
  border: 1px solid #e6e6e6;
  padding: 10px;
  background: rgba(252,252,252,1);
  background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(245,245,245,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(252,252,252,1)), color-stop(100%, rgba(245,245,245,1)));
  background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(245,245,245,1) 100%);
  background: -o-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(245,245,245,1) 100%);
  background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(245,245,245,1) 100%);
  background: linear-gradient(to bottom, rgba(252,252,252,1) 0%, rgba(245,245,245,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f5f5f5', GradientType=0 );
}

.quickSearch {
  border: 1px solid #B9B9B9;
  padding: 2px 5px;
  font-weight: bold
}

  .quickSearch::placeholder {
    color: silver;
    font-weight: normal
  }

/* SPECTRUM COLOR PICKER */
.cms_colorPickerContainer {
  border-radius: 5px;
  background-color: #FFF;
  border: solid 1px silver;
  padding: 10px;
  -webkit-box-shadow: 1px 1px 13px 0px rgba(0,0,0,0.44);
  -moz-box-shadow: 1px 1px 13px 0px rgba(0,0,0,0.44);
  box-shadow: 1px 1px 13px 0px rgba(0,0,0,0.44);
}

/*TABS*/
.adminTabs {
  border: 1px solid silver;
  background-color: white;
}

  .adminTabs > ul {
    display: flex;
    padding: 0 5px;
    margin: 3px 3px 0 3px;
    border: 1px solid #7daed7;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: linear-gradient(to bottom, #deefff 0%,#98bede 100%);
  }

    .adminTabs > ul > li {
      display: block;
      padding: 0;
      list-style-type: none;
      margin: 5px 3px -1px 0;
      border: 1px solid silver;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
      outline: none;
      transition: filter .2s
    }

      .adminTabs > ul > li a {
        display: block;
        text-decoration: none;
        padding: 5px 10px;
        color: black
      }

      .adminTabs > ul > li.active {
        border-bottom: 1px solid #FFFFFF;
        background: #FFFFFF
      }

      .adminTabs > ul > li:not(.active):hover {
        filter: brightness(96%);
      }

      .adminTabs > ul > li a.aspNetDisabled {
        color: silver
      }

/* END TABS */

.spacedListItems {
  margin: 5px 0
}

  .spacedListItems td {
    padding-right: 15px;
  }

.shadow {
  -moz-box-shadow: 0 3px 10px 0 #111;
  -webkit-box-shadow: 0 3px 10px 0 #111;
  box-shadow: 0 3px 10px 0 #111;
}

.gridView {
  background-color: #FFF;
  border: none;
}

  .gridView th, .gridView tr, .gridView td {
    border: none;
  }

    .gridView tr:nth-child(2n+2) {
      background-color: #F4F4F4
    }

  .gridView > tbody > tr:not(.gridViewPager):not(.gridViewHeader):hover {
    transition: background-color .2s;
    background-color: #caf5c9
  }

.gridViewHeader {
  font-size: 9pt;
  background-color: #cee0f3;
  color: #406287;
  text-align: left;
  font-weight: bold;
}

.gridViewPager {
  font-size: 9pt;
  background-color: #cee0f3;
  color: #406287;
  text-align: center;
  font-weight: bold;
}

  .gridViewPager > td {
    padding: 0 !important;
  }


.gridView tr.grayedOut > td, .gridView tr.grayedOut > td a {
  color: silver !important
}

.gridView tr.grayedOut img {
  filter: grayscale(100%);
  opacity: .9
}

.gridViewPager a {
  text-decoration: none
}

.gridView .sortablePlaceholder {
  border: 1px dashed silver;
  box-sizing: border-box;
}

/* Cool Checkbox =============== */
.coolCheck input[type=checkbox] {
  position: absolute;
  left: -9999px;
}

.coolCheck input + label::before {
  vertical-align: middle;
  margin: 3px;
  font-family: 'Font Awesome 5 Free';
  font-size: 16px;
  content: '\f0c8';
  font-weight: 800;
  color: #d8d8d8;
  cursor: pointer;
  transition: color .2s
}

.coolCheck input + label:hover::before {
  color: #bbb;
}

.coolCheck input:checked + label::before {
  content: '\f14a';
  color: #5c94ca;
}

.coolCheck label {
  cursor: pointer
}

.coolCheck.smaller td {
  font-size: 11px;
  white-space: nowrap;
  padding: 5px;
}

.aspNetDisabled label {
  color: #D2D2D2;
  cursor: not-allowed
}

.aspNetDisabled input + label:hover::before {
  color: #D2D2D2;
}


/* ================== */
.gripColumn {
  background-color: #5c94ca;
  cursor: grab;
  color: white;
  text-align: center;
}

.gridInfo {
  border-top: 1px solid #e8e8e8;
  padding: 5px;
}

.headerSuccess {
  color: #69b19e;
}

.headerFailure {
  color: red;
}

hr {
  height: 1px;
  background-color: #333;
  color: #333;
  border: 0px;
  margin: 25px 0;
}

.strike {
  text-decoration: line-through;
}

.subtle {
  color: Gray;
}

.bigText, tr.bigText td, table.bigText td, table.bigText th {
  font-size: 17px;
}

.smallText, tr.smallText td, table.smallText td, table.smallText th {
  font-size: 12px;
}

.semiBold {
  font-weight: 600
}

.normalText, tr.normalText td, table.normalText td, table.normalText th {
  font-weight: normal;
  color: #333;
  font-family: 'Open Sans', tahoma, arial;
  FONT-SIZE: 14px;
}

/* INLINE EDITING*/
input.cms_inlineEdit {
  width: 100%;
  box-sizing: border-box;
  border: none;
  padding: 0;
  background-color: transparent;
  outline: 1px solid silver;
  outline-offset: 2px;
}

TD.top {
  border: solid black;
  border-width: 1px 0px 0px 0px;
}

TD.right {
  border: solid black;
  border-width: 0px 1px 0px 0px;
}

TD.bottom {
  border: solid black;
  border-width: 0px 0px 1px 0px;
}

TD.left {
  border: solid black;
  border-width: 0px 0px 0px 1px;
}

TD.L {
  border: solid black;
  border-width: 0px 0px 1px 1px;
}

TD.leftTop {
  border: solid black;
  border-width: 1px 0px 0px 1px;
}

TD.rightTop {
  border: solid black;
  border-width: 1px 0px 0px 1px;
}

TD.N {
  border: solid black;
  border-width: 1px 1px 0px 1px;
}

TD.U {
  border: solid black;
  border-width: 0px 1px 1px 1px;
}

TD.C {
  border: solid black;
  border-width: 1px 0px 1px 1px;
}

TD.inC {
  border: solid black;
  border-width: 1px 1px 1px 0px;
}

TD.topBot {
  border: solid black;
  border-width: 1px 0px 1px 0px;
}

TD.full {
  border: solid black;
  border-width: 1px 1px 1px 1px;
}

@media print {
  .hideOnPrint {
    display: none;
  }
}

/* ==================== JQUERY SORTABLES ===============================*/

.sorter ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

.sorter li {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  margin-left: 0;
}
