/*
    Goals for font description technology:
        1) Font sizes can be described in simple terms.
        2) All the fonts in a container scale with the container.
        3) Works across all target browsers.
        -- This one does not work with EM font sizes: 4) Scales with browser zoom control.
    
    Implementers should:
        1) Define all text which should not be scaled using rem.
        2) Put all text which should scale in a container using class with
           font-size: 1rem, a property of data-design-width and have it called
           by an adjust() method which applies the scaling ratio from the base
           size. See examples like in footer.js
        3) All text which scale should be described in px and then em so IE
           has a fallback value. 1em = 10px, 1.4em = 14px,...
*/
/*$color-secondary:    		#6E6E6E;			// Dove Grey*/
/*@mixin box-sizing($type: border-box ) {
    -webkit-box-sizing:     $type;
    -moz-box-sizing:        $type;
    -o-box-sizing:          $type;
    -ms-box-sizing:         $type;
    box-sizing:             $type;
}*/
/* --- GLOBAL ---*/
body {
  color: #606060 !important;
  font-size: 1.05rem;
  overflow-x: auto !important; }

a {
  color: #0087a2;
  text-decoration: none;
  cursor: pointer; }

a:hover, a:active {
  color: #0087a2;
  text-decoration: none;
  opacity: 0.8; }

h1, h2, h3, h4, h5 {
  color: #0087a2;
  letter-spacing: 0.025em; }

h1,
h1:last-child {
  margin-bottom: 15px;
  text-transform: capitalize; }

h2 {
  font-size: 1.65em; }

h3,
.subtitle h3:last-child {
  margin-bottom: 15px;
  color: #606060;
  font-size: 1.55em; }

ul {
  list-style: none;
  margin: 0px;
  padding: 0px; }

ul.cs-list {
  margin-left: 15px;
  list-style-type: disc;
  list-style-position: outside;
  list-style-image: none; }

.title, cs-title {
  font-weight: 700; }

svg {
  height: 100%;
  width: 100%; }

/* --- CLEARFIX --- 
apply .cf to all elements that contain floats */
/* For modern browsers */
.cf:before,
.cf:after {
  content: "";
  display: table; }

.cf:after {
  clear: both; }

/* - - - STRUCTURE - - - */
html {
  /* - - - Not honoring screen height, so no scroll on my mac  - - - */
  /*height: 100% !important;
  display: block;
  position: relative;*/ }

body {
  background-color: #CAC9C9; }

.js-content-region {
  margin: 20px; }

.js-dashboard-footer-layout-view {
  display: block;
  position: relative; }

.cs-tab img,
.cs-palette {
  -webkit-box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
  -moz-box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
  box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37); }

.cs-overlay {
  margin-left: 20px;
  margin-right: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #f1f1f1;
  -webkit-box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
  -moz-box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
  box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
  border-radius: 7px; }

.cs-main {
  min-height: 600px;
  padding: 25px;
  display: block;
  overflow: x-scroll;
  background-color: #EAEBEB;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  overflow: auto; }

.cs-login-wrap {
  width: 100%;
  text-align: center; }

.cs-login-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  text-align: left; }

.cs-footer {
  width: 100%;
  position: absolute;
  bottom: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  clear: both; }

/* - - - STRUCTURE - Content - - - */
.cs-column-left {
  width: 71%;
  float: left;
  position: relative;
  color: #6e6e6e; }

.cs-column-right {
  width: 26%;
  float: right;
  position: relative; }

/* - - - STRUCTURE - Blocks - - - */
.cs-block {
  height: 100%;
  margin-bottom: 20px;
  padding: 20px;
  display: block;
  position: relative;
  background-color: #FFFFFF;
  border-radius: 7px; }

.cs-block button.cs-collapse-expand {
  margin-top: -5px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: -5px;
  float: right; }

.cs-block button.cs-collapse-expand.ui.button.small {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0.6em;
  padding-right: 0.6em;
  border-radius: 4px; }

.cs-block .block-title {
  float: left; }

.cs-block h2.block-title {
  margin-top: 0;
  margin-bottom: 15px;
  float: left;
  font-size: 1.25em; }

.cs-block .cs-text {
  clear: both; }

.cs-welcome {
  margin-bottom: 15px;
  color: #0087a2;
  font-size: 1.2em;
  font-weight: 400; }

.cs-instructions {
  margin-bottom: 15px;
  font-weight: 400; }

/* - - - STRUCTURE - Right Column - - - */
.cs-column-right .cs-block h3 {
  margin-top: 0;
  margin-bottom: 2px;
  clear: both;
  font-size: 1.1em; }

.cs-column-right .cs-entry {
  margin-top: 15px;
  display: block;
  position: relative;
  clear: both;
  font-size: 1rem;
  line-height: 120%; }

.cs-entry.icon i.fa {
  position: absolute;
  top: 0px;
  left: 0px;
  float: none;
  font-size: 1.5em;
  color: #CECECE; }

.cs-column-right .cs-entry.icon .cs-entry-text {
  clear: none;
  padding-left: 30px; }

.cs-column-right .cs-block .cs-block-tex .cs-block-text a {
  color: #7c7c7c; }

/* - - - PALETTE - - - */
.cs-palette-title {
  padding-top: 10px;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 10px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #FFFFFF;
  text-align: left;
  background-color: #0087A2;
  border-top-left-radius: 10px; }

.cs-palette-block {
  padding: 15px;
  color: #2D2C2C; }

.cs-palette-block h2.block-title {
  width: 100%;
  margin-top: 0;
  margin-bottom: 3px;
  font-size: 1rem; }

.cs-palette-block h3 {
  width: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  font-size: 0.9rem;
  color: #2D2C2C; }

.cs-palette-block.cs-block-gray {
  background-color: #F6F7F7; }

.cs-palette-close {
  width: 28px;
  height: 28px;
  margin-top: -5px;
  padding-top: 4px;
  padding-left: 3px;
  float: right;
  font-size: 30px;
  color: white;
  text-align: center;
  background-color: #1898BE;
  border-radius: 50%;
  cursor: pointer; }

.cs-palette-block .cs-entry {
  min-height: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: block;
  position: relative;
  clear: both;
  font-size: 1rem;
  line-height: 120%; }

.cs-palette-block .cs-entry.icon .cs-entry-text {
  clear: none;
  padding-left: 30px; }

.cs-palette-footer {
  height: 25px;
  background-color: #0087a2;
  border-bottom-left-radius: 10px; }

/* - - - STRUCTURE - Header - - - */
.cs-header {
  padding-top: 10px;
  padding-right: 30px;
  padding-left: 25px;
  padding-bottom: 10px;
  display: block;
  position: relative;
  background-color: #DEDEDE;
  background: #f9fafa;
  background: -moz-linear-gradient(top, #f9fafa 2%, #dddfdf 99%);
  background: -webkit-linear-gradient(top, #f9fafa 2%, #dddfdf 99%);
  background: linear-gradient(to bottom, #f9fafa 2%, #dddfdf 99%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fafa', endColorstr='#dddfdf',GradientType=0 );
  border-top-left-radius: 7px;
  border-top-right-radius: 7px; }

.cs-close {
  display: block;
  position: absolute;
  height: 36px;
  width: 36px;
  top: -17px;
  right: -17px; }

.cs-close img {
  max-height: 100%;
  height: auto;
  cursor: pointer;
  border-radius: 50%;
  -webkit-box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
  -moz-box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
  box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37); }

.cs-login {
  margin-bottom: 10px;
  float: right;
  color: #C2C1C3;
  font-size: 0.9em; }

.cs-branding {
  margin-top: 4px;
  margin-bottom: 8px;
  margin-right: 25px;
  float: left; }

.cs-branding img {
  max-width: 265px;
  float: left; }

/* - - - STRUCTURE - Menu - - - */
.cs-nav-main {
  margin-right: -5px;
  margin-top: 5px;
  float: right;
  clear: right; }

.cs-nav-main button.js-step-1 {
  text-transform: uppercase;
  font-weight: 700; }

/* - - - STRUCTURE - Palette - - - */
.cs-palette {
  width: 200px;
  top: 100px;
  right: 0px;
  background-color: #EDEDED;
  border-bottom-left-radius: 7px;
  border-top-left-radius: 7px; }

/* - - - CONTENT - Resources, Services & Documents - - - */
ul.cs-resources-list,
ul.cs-services-list,
ul.cs-documents-list,
ul.cs-services-list {
  display: block;
  clear: both;
  line-height: 120%; }

li.cs-resource,
li.cs-document,
li.cs-service {
  margin-top: 15px;
  display: block;
  position: relative;
  clear: both; }

.cs-resource .cs-resource-icon,
.cs-document .cs-document-icon,
.cs-service .cs-service-icon {
  position: absolute;
  top: 0px;
  left: 0px;
  float: none;
  cursor: pointer; }

.cs-documents .cs-document-icon {
  top: 3px; }

.cs-resource .cs-resource-icon img {
  height: 34px;
  width: 34px; }

.cs-documents .cs-document-icon img {
  height: 20px;
  width: 20px; }

.cs-services .cs-service-icon img {
  margin-left: -2px;
  margin-top: -2px;
  height: 23px;
  width: 23px; }

.cs-resource .cs-resource-text,
.cs-documents .cs-document-text,
.cs-services .cs-service-text {
  clear: none;
  padding-bottom: 5px;
  padding-right: 30px;
  font-size: 1.02rem; }

.cs-resource .cs-resource-text {
  padding-top: 5px;
  padding-left: 50px; }

.cs-documents .cs-document-text,
.cs-services .cs-service-text {
  padding-top: 0;
  padding-left: 30px; }

.cs-resource .cs-resource-text a,
.cs-documents a,
.cs-services a {
  color: #606060; }

.cs-resource .cs-resource-text a:hover,
.cs-resource .cs-resource-text a:active,
.cs-documents a:hover,
.cs-documents a:active,
.cs-services a:hover,
.cs-services a:active {
  color: #0087a2;
  text-decoration: none; }

.cs-resource .cs-resource-text .cs-type {
  margin-top: -5px;
  font-size: 0.8em;
  text-transform: uppercase;
  opacity: 0.8; }

.cs-resource .cs-resource-functions {
  position: absolute;
  top: 0px;
  right: 0px;
  float: none;
  width: 23px;
  text-align: right; }

.cs-resource .cs-resource-functions img {
  cursor: pointer; }

/* - - - CONTENT - Action Plan - - - */
.cs-action-plan ul {
  margin-bottom: 15px !important; }

.cs-action-plan li {
  margin-left: 25px;
  margin-bottom: 3px;
  list-style: disc; }

/* - - - CONTENT - Icons - - - */
i.fa.fa-round,
a.fa.fa-round,
button.fa.fa-round {
  width: 22px;
  height: 22px;
  padding-left: 1px;
  padding-top: 2px;
  font-size: 18px;
  line-height: 18px;
  color: #FFFFFF;
  background-color: gainsboro;
  border-radius: 50%;
  text-align: center; }

/* - - - CONTENT - Alerts - - - */
.cs-alerts {
  border: 2px solid #d1a12b; }

.cs-alerts h2.block-title {
  color: #d1a12b; }

.cs-alerts i.fa.close,
.cs-alerts a.fa.close {
  margin-top: -7px;
  margin-right: -7px;
  float: right;
  margin-left: 20px;
  background-color: #d1a12b; }

/*******************************
                 Forms
*******************************/
.ui.form .field .title,
.ui.form .field > label,
.ui.form .grouped.fields > label {
  color: rgba(0, 0, 0, 0.65);
  font-size: 1.05em;
  font-weight: 700; }

.ui.form .field .cs-question {
  margin-top: 30px;
  margin-bottom: 5px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 1.18em;
  font-weight: 700; }

.ui.form .field > .checkbox label {
  color: rgba(0, 0, 0, 0.6);
  font-size: 1.1em;
  text-wrap: none; }

.ui.checkbox,
.ui.radio.checkbox {
  min-height: 27px !important; }

.ui.form .field > .ui.radio.checkbox input[type="text"],
.ui.form .field > .ui.checkbox input[type="text"] {
  margin-top: -15px;
  margin-left: 10px;
  padding-top: 0.3em;
  padding-bottom: 0.3em; }

.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="url"] {
  border-width: 2px; }

/*--------------------
        Restricted
---------------------*/
.field.js-form-element-view.js-scope-restricted {
  margin-left: -5px !important;
  margin-right: -5px !important;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #EFE5E5;
  border-radius: 5px; }

.field.js-form-element-view.js-scope-restricted .ui.checkbox,
.field.js-form-element-view.js-scope-restricted .ui.radio.checkbox {
  margin-bottom: -7px; }

.ui.form .field.js-scope-restricted .cs-question {
  margin-top: 5px; }

.ui.form .field.js-scope-restricted .title {
  padding-top: 5px; }

.ui.form .field.js-scope-restricted input,
.ui.form .field.js-scope-restricted textarea {
  margin-bottom: 5px; }

/*--------------------
        Assessment Tabes
---------------------*/
.js-form-element-contents.fields .js-form-element-view {
  /*Make all elements 100% including button, instead of just tables*/
  /*width: 100%;*/ }

.scroll-table {
  margin-top: 10px;
  margin-bottom: 10px;
  overflow-x: auto; }

@media screen and (max-width: 1100px) {
  .scroll-table {
    border-right: 1px solid #DEDEDE; } }
.ui.table td.checkbox {
  text-align: center;
  background-color: #F9FAFB; }

.ui.table td.radio.checkbox {
  text-align: center;
  background-color: #FFFFFF; }

.ui.table td.radio.checkbox .ui.checkbox {
  width: 17px;
  text-align: center; }

/*--------------------
        Focus
---------------------*/
.ui.form input:not([type]):focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="url"]:focus {
  color: rgba(0, 0, 0, 0.95);
  border-color: rgba(0, 135, 162, 0.6); }

.ui.form textarea:focus {
  color: rgba(0, 0, 0, 0.95);
  border-color: #85B7D9;
  border-radius: 0.28571429rem;
  background: #FFFFFF;
  box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
  -webkit-appearance: none; }

/*******************************
                 Buttons
*******************************/
.ui.button {
  color: white !important;
  padding-left: 2em;
  padding-right: 2em;
  font-weight: 700;
  background-color: #0087a2;
  border-radius: 0.45rem; }

.ui.button.small {
  font-size: 0.75rem;
  padding-left: 1em;
  padding-right: 1em; }

.ui.button.wide {
  min-width: 175px; }

.ui.button.grey {
  background-color: gainsboro; }

/*--------------
      Hover
---------------*/
.ui.button:hover {
  background-color: rgba(0, 135, 162, 0.8);
  color: white; }

/*--------------
      Focus
---------------*/
.ui.button:focus {
  background-color: rgba(0, 135, 162, 0.8);
  color: white; }

/*--------------
      Down
---------------*/
.ui.button:active,
.ui.active.button:active {
  background-color: rgba(0, 135, 162, 0.6);
  color: white; }

/*--------------
     Active
---------------*/
.ui.active.button {
  background-color: rgba(0, 135, 162, 0.6);
  color: white; }

.ui.active.button:hover {
  background-color: rgba(0, 135, 162, 0.6);
  color: white; }

.ui.active.button:active {
  background-color: rgba(0, 135, 162, 0.6); }

/*******************************
    Chevron-Based Navigation
*******************************/
.cs-nav-main {
  /*centering*/
  display: inline-block;
  overflow: hidden;
  border-radius: 5px;
  /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
  counter-reset: flag; }

.cs-nav-main button {
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #BABABA;
  background: #fefefe;
  background: linear-gradient(to right, #fefefe 0%, #f1f1f1 100%); }

/*.cs-nav-main button.active {
	color: white;
	background: #0087A2;
}*/
.cs-nav-main button {
  /*text-decoration: none;*/
  outline: none;
  display: block;
  float: left;
  font-size: 14px;
  line-height: 36px;
  /*color: white;*/
  /*need more margin on the left of links to accomodate the numbers*/
  padding: 0 10px 0 60px;
  position: relative; }

/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.cs-nav-main button:first-child {
  padding-left: 46px;
  border-radius: 5px 0 0 5px;
  /*to match with the parent's radius*/ }

.cs-nav-main button:first-child:before {
  left: 14px; }

.cs-nav-main button:last-child {
  border-radius: 0 5px 5px 0;
  /*this was to prevent glitches on hover*/
  padding-right: 20px; }

/*hover/active styles*/
.cs-nav-main button.active,
.cs-nav-main button.active:after,
.cs-nav-main button.active:hover {
  color: white;
  background: #0087a2; }

.cs-nav-main button:hover,
.cs-nav-main button:hover:after {
  color: #0087a2; }

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.cs-nav-main button:after {
  content: '';
  position: absolute;
  top: 0;
  right: -18px;
  /*half of square's length*/
  /*same dimension as the line-height of .breadcrumb a */
  width: 36px;
  height: 36px;
  /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
  length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
  if diagonal required = 1; length = 1/1.414 = 0.707*/
  transform: scale(0.707) rotate(45deg);
  /*we need to prevent the arrows from getting buried under the next link*/
  z-index: 1;
  /*background same as links but the gradient will be rotated to compensate with the transform applied*/
  background: #f1f1f1;
  background: linear-gradient(135deg, #f1f1f1, #ececec);
  /*stylish arrow design using box shadow*/
  /*box-shadow: 
  	2px -2px 0 2px rgba(0, 0, 0, 0.4), 
  	3px -3px 0 2px rgba(255, 255, 255, 0.1);*/
  /*
  	5px - for rounded arrows and 
  	50px - to prevent hover glitches on the border created using shadows*/
  border-radius: 0 5px 0 50px; }

/*we dont need an arrow after the last link*/
.cs-nav-main button:last-child:after {
  content: none; }

/*we will use the :before element to show numbers*/
.cs-nav-main button:before {
  content: counter(flag);
  counter-increment: flag;
  /*some styles now*/
  border-radius: 100%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin: 8px 0;
  position: absolute;
  top: 0;
  left: 30px;
  color: white;
  background: #BABABA;
  /*background: linear-gradient(#444, #222);*/
  font-weight: bold; }

.cs-nav-main button.active:before {
  background: #219db7; }

/* - - Hide numbers - - */
.cs-nav-main button {
  padding-left: 27px; }

.cs-nav-main button:first-child {
  padding-left: 17px; }

.cs-nav-main button::before {
  width: 0;
  height: 0;
  display: none; }

/*******************************
            Media Queries
*******************************/
@media screen and (max-width: 1100px) {
  .cs-column-left {
    width: 61%;
    float: left;
    position: relative;
    color: #6e6e6e; }

  .cs-column-right {
    width: 36%;
    float: right;
    position: relative; } }
/* - - DEBUG - -*/
@media screen and (max-width: 810px) {
  .ui.stackable.grid > .row > .wide.column,
  .ui.stackable.grid > .wide.column,
  .ui.stackable.grid > .column.grid > .column,
  .ui.stackable.grid > .column.row > .column,
  .ui.stackable.grid > .row > .column,
  .ui.stackable.grid > .column:not(.row),
  .ui.grid > .stackable.stackable.row > .column {
    padding-left: 0 !important;
    padding-right: 0 !important; } }
@media screen and (max-width: 800px) {
  .js-content-region {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px; }

  .cs-column-left {
    width: 100%;
    float: none; }

  .cs-column-right {
    width: 100%;
    float: none; }

  .cs-header,
  .cs-main {
    padding-left: 15px;
    padding-right: 15px; }

  .ui.button.wide {
    min-width: auto; }

  /*Hide numbers in small browses only*/
  /*.cs-nav-main button {
  	padding-left: 27px;
  }
  .cs-nav-main button:first-child {
  	padding-left: 17px;
  }
  .cs-nav-main button::before {
  	width: 0;
  	height: 0;
  	display: none;
  }*/ }
@media screen and (max-width: 500px) {
  .js-content-region {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 0px; }

  .cs-overlay {
    margin-left: 5px;
    margin-right: 17px; } }
@media screen and (max-width: 350px) {
  .js-content-region {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 0px; }

  .cs-overlay {
    margin-left: 0;
    margin-right: 40px;
    margin-top: 0; }

  .cs-branding {
    margin-right: 0;
    float: none; }

  .cs-branding img {
    max-width: 100%;
    float: none; } }