/* ====================================================

 @company: Siteimprove
 @contributors: Rickard Andersson, ra@siteimprove.com
 @content: UI

======================================================= */

/****************************************
  ==== OVERLAYS
****************************************/

div.main-overlay {
  position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 99; cursor: pointer; background: rgba(60,72,94,0.6); opacity: 0; visibility: hidden; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
div.main-overlay.open {
  opacity: 1; visibility: visible;
}

/****************************************
  ==== TOOLTIP
****************************************/

.tooltip {
  position: relative;
}
.tooltip:after {
  visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
.tooltip div.tip {
  height: 24px; line-height: 24px; position: absolute; left: -100000px; z-index: 9999; opacity: 0; background: #002835; color: #fff; border: 0; font-size: 1.4em; font-weight: 300; padding: 0 7px; white-space: nowrap; text-align: center;
}
.tooltip div.bottom:after {
  content: ""; display: block; position: absolute; top: -8px; left: 50%; font-size: 0px; line-height: 0%; width: 0px; margin: 0 0 0 -3px; border: transparent 4px solid; border-bottom-color: #002835;
}
.tooltip div.top:after {
  content: ""; display: block; position: absolute; bottom: -8px; left: 50%; font-size: 0px; line-height: 0%; width: 0px; margin: 0 0 0 -4px; border: transparent 4px solid; border-top-color: #002835;
}
.tooltip div.tip-visible {
  left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%);
}

/****************************************
  ==== INLINE TOOLTIP
****************************************/

div.inline-tooltip-wrap {
  position: relative; float: left;
}
div.inline-tooltip-wrap .has-tooltip:before {
  font-family: 'entypo-plus'; content: "\e9b6";
}
div.inline-tooltip {
  padding: 20px; background-color: #0e38b1; position: absolute; top: 50px; left: 0; right: 0; font-weight: 300; z-index: 999; text-align: left; -webkit-box-shadow: 0 1px 20px rgba(60,72,94,0.3); -moz-box-shadow: 0 1px 20px rgba(60,72,94,0.3); box-shadow: 0 1px 20px rgba(60,72,94,0.3);
}
div.inline-tooltip:before {
  content: ''; display: block; position: absolute; top: -19px; left: 50%; margin: 0 0 0 -10px; z-index: 18; border: transparent 10px solid; border-bottom-color: #0e38b1;
}
div.inline-tooltip * {
  color: #fff;
}
div.inline-tooltip *:last-child {
  margin-bottom: 0;
}

/****************************************
  ==== MODAL
****************************************/

div.modal {
  width: 90%; max-width: 513px; max-height: 100%; position: fixed; top: 0; left: 50%; z-index: 100; opacity: 0; visibility: hidden; -webkit-box-shadow: 0 5px 40px 5px rgba(60,72,94,0.5); -moz-box-shadow: 0 5px 40px 5px rgba(60,72,94,0.5); box-shadow: 0 5px 40px 5px rgba(60,72,94,0.5); -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%);
} 
div.modal div.wrap {
  overflow: auto;
}
div.modal div.content {
  background: #fff; text-align: left;
}
div.modal .footer {
  width: 100%; height: 50px; padding: 0 30px; position: absolute; bottom: -50px; left: 0; background: #fff;
} 
div.modal .footer .close-modal {
  width: 50px; height: 50px; line-height: 50px; position: absolute; top: 25px; left: 50%; margin: 0 0 0 -25px; display: block; text-align: center; text-decoration: none; font-size: 3em; background: #f0134c; color: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 30px rgba(60,72,94,0.25); -moz-box-shadow: 0 0 30px rgba(60,72,94,0.25); box-shadow: 0 0 30px rgba(60,72,94,0.25);
}
div.modal.open {
  opacity: 1; visibility: visible;
} 
div.modal.large {
  max-width: 898px;
}
div.modal.medium {
  max-width: 641px;
}
div.modal.small {
  max-width: 308px;
}

/****************************************
  ==== EXPAND/EXPANDED
****************************************/

.expand, .expand:hover, .expand:active, .expand:focus {
  display: block; float: left; color: #3c485e; font-size: 1em; text-decoration: none; padding: 0 0 0 40px; position: relative;
}
.expanded, .toggled {
  font-weight: 700;
}
.expand:before, .expanded:before, .toggled:before {
  content: '\f123'; display: block; width: 23px; height: 24px; line-height: 24px; padding: 0 0 0 1px; position: absolute; top: 2px; left: 0; background: #e1e2e5; font-size: 75%; text-align: center; font-family: 'icons8'; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.expanded:before, .toggled:before {
  content: '\f103'; width: 24px; padding: 1px 0 0 0; font-weight: normal; color: #fff; background: #0e38b1;
}

/****************************************
  ==== FAQ
****************************************/

div.faq a.expand {
  margin: 0 0 15px 0;
}
div.faq a.expand:before {
  
}
div.faq div.info {
  padding: 0 0 15px 40px;
}
div.faq div.info p {
  font-size: 1.0625em;
}
div.faq div.info ul li {
  font-size: 1.0625em;
}

/****************************************
  ==== CHECKMARKS LIST
****************************************/

ul.checkmarks li {
  padding-left: 25px;
}
ul.checkmarks li:before {
  content: '\f106'; font-family: 'icons8'; width: 16px; height: 16px; line-height: 16px; top: 6px; border: 0; background: #0e38b1; color: #fff; font-size: 60%; text-align: center;
}

/****************************************
  ==== PROGRESS
****************************************/

div.progress.simple {
  width: 100%;
}
div.progress.simple div {
  width: 25%; height: 10px; float: left; border-right: #f4f4f4 1px solid; background: #e1e2e5;
}
div.progress.simple div:last-child {
  border-right: 0;
}
div.progress.simple div.current {
  background: #0e38b1;
}
div.progress.simple div.done {
  background: #0e38b1;
}
div.progress.simple.steps2 div {
  width: 50%;
}
div.progress.simple.steps3 div {
  width: 33.3333333334%;
}
div.progress.simple.steps5 div {
  width: 20%;
}
div.progress.simple.steps6 div {
  width: 16.6666667%;
}

/****************************************
  ==== FORM FIELD HELPER
****************************************/

div.field-helper {
  padding: 20px; background: #fff; position: absolute; border-top: #f5d027 5px solid; top: 50px; left: -5px; right: -5px; z-index: 999; -webkit-box-shadow: 0 1px 20px rgba(60,72,94,0.3); -moz-box-shadow: 0 1px 20px rgba(60,72,94,0.3); box-shadow: 0 1px 20px rgba(60,72,94,0.3);
}
div.field-helper:before {
  content: ''; display: block; position: absolute; top: -25px; left: 50px; z-index: 18; border: transparent 10px solid; border-bottom-color: #f5d027;
}

/****************************************
  ==== FORM LABEL HELPER
****************************************/

div.label-helper {
  padding: 20px; background: #fff; position: absolute; border-bottom: #2196f3 5px solid; top: 50px; left: -5px; right: -5px; font-weight: 300; z-index: 999; text-align: left; -webkit-box-shadow: 0 1px 20px rgba(60,72,94,0.3); -moz-box-shadow: 0 1px 20px rgba(60,72,94,0.3); box-shadow: 0 1px 20px rgba(60,72,94,0.3);
}
div.label-helper:before {
  content: ''; display: block; position: absolute; top: -19px; left: 50%; margin: 0 0 0 -10px; z-index: 18; border: transparent 10px solid; border-bottom-color: #fff;
}

/****************************************
  ==== MESSAGES
****************************************/

div.message {
  text-align: center; padding: 10px 15px;
}
div.message:after {
  visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
div.message ul li {
  padding: 0;
}
div.message ul li:before {
  display: none;
}
div.message.warning {
  background: #f5d027;
}
div.message.error {
  background: #f0134c; color: #fff;
}
div.message.success {
  background: #71d645;
}

/****************************************
  ==== CUSTOM SELECT BOX
****************************************/

div.select-box {
  position: relative;
}
div.select-box select:focus + div.trigger, div.select-box.open select:focus + div.trigger, div.select-box.open div.trigger {
  border-color: #00bcd4;
}
div.select-box div.trigger {
  width: 100%; line-height: 20px; padding: 12px 45px 12px 13px; float: left; position: relative; color: #3c485e; font-size: 1em; text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background: #e9ebec; border: 1px solid #e9ebec; cursor: pointer; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
}
div.select-box div.trigger:hover {
  border-color: #9e9e9e;
}
div.select-box div.trigger:after {
  content: ""; width: 30px; height: 46px; line-height: 46px; display: block; position: absolute; top: 0; right: 0; z-index: 9; font-family: 'icons8'; content: "\f103"; font-size: 80%; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg);
}
div.select-box.open div.trigger:after {
  -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); transform: rotateX(180deg);
}
div.select-box ul.options {
  width: 100%; max-height: 300px; list-style: none; overflow: auto; visibility: hidden; opacity: 0; display: none; margin: 0; background: #fff; text-align: left; position: absolute; top: 56px; left: 0; z-index: 1003; -webkit-box-shadow: 0 0 10px rgba(60,72,94,0.25); -moz-box-shadow: 0 0 10px rgba(60,72,94,0.25); box-shadow: 0 0 10px rgba(60,72,94,0.25); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
}
div.select-box.open ul.options {
  visibility: visible; opacity: 1; display: block;
}
div.select-box ul.options li {
  cursor: pointer; padding: 0;
}
div.select-box ul.options li a {
  display: block; padding: 15px 20px; font-size: 1em;
}
div.select-box ul.options li:before {
  display: none;
}
div.select-box ul.options li:hover, div.select-box ul.options li a:hover {
  background: #e1e2e5; color: #283142;
}
div.select-box ul.options li a.selected, div.select-box ul.options li.selected a, div.select-box ul.options li.selected a:hover, div.select-box ul.options li.selected a:active, div.select-box ul.options li.selected a:focus {
  font-weight: 700; background: #e1e2e5; color: #283142;
}
div.select-box ul.options li a {
  display: block; color: #3c485e; text-decoration: none;
}
div.select-box ul.options li a:hover, div.select-box ul.options li a:active, div.select-box ul.options li a:focus {
  background: #e1e2e5; color: #283142;
}
div.select-box.small div.trigger {
  padding: 4px 10px; font-size: 0.875em;
}
div.select-box.small div.trigger:after {
  width: 9px; height: 6px; top: 11px; right: 12px; background-position: -265px -77px;
}
div.select-box.small ul.options {
  top: 37px;
}
div.select-box.small ul.options li a {
  padding: 5px 10px; font-size: 0.875em;
}

div.select-box.text div.trigger {
  width: auto; line-height: 20px; padding: 20px 40px 12px 30px; float: left; color: #3c485e; font-size: 1.0625em; font-weight: 400; background: #f5f8f9; border: 0;
}
div.select-box.text div.trigger:after {
  width: 9px; height: 6px; top: 26px; right: 15px; background-position: -265px -77px;
}
div.select-box.text ul.options li {
  width: 100%; height: auto; margin: 0;
}
div.select-box.text ul.options li a {
  width: 100%; height: auto; line-height: 20px; padding: 15px 20px; background: #fff; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}
div.select-box.text ul.options li a:hover {
  background: #e0f7fa;
}
div.select-box.text ul.options li a.selected, div.select-box.text ul.options li a.selected:hover, div.select-box.text ul.options li a.selected:active, div.select-box.text ul.options li a.selected:focus {
  background: #00bcd4; color: #fff; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}
div.select-box.text ul.options li a span {
  display: none;
}


/****************************************
  ==== TABLES
****************************************/

table {
  width: 100%; margin: 0 0 30px 0;
}
table thead th {
  padding: 0 20px 0 0; vertical-align: top; font-size: 1.8em; font-weight: 400; color: #002835;
}
table tbody td {
  padding: 0 20px 0 0; vertical-align: top; font-size: 1.8em;
}
table.custom thead th, table.custom tbody td {
  font-size: 1em;
}

table.presentaion {
  width: 100%; margin: 0 0 30px 0;
}
table.presentaion thead tr {
  border-bottom: #f4f4f4 2px solid;
}
table.presentaion thead tr th {
  padding: 0 20px 10px 0;
}
table.presentaion tbody tr {
  border-bottom: #f4f4f4 1px solid;
}
table.presentaion tbody td {
  padding: 20px 20px 20px 0;
}
table.presentaion tbody td:first-child {
  font-weight: 400;
}

table.data {
  width: 100%; margin: 0 0 30px 0;
}
table.data thead tr {
  border-bottom: #3c485e 2px solid;
}
table.data thead tr th {
  font-weight: 700; padding: 0 20px 10px 20px; vertical-align: top;
}
table.data tbody tr {
  border-bottom: #f4f4f4 1px solid; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
table.data tbody tr:hover {
  background: #f4f4f4;
}
table.data tbody td {
  padding: 20px;
}
table.data tbody td:first-child {
  font-weight: 400;
}
table.data tbody td .ico {
  color: #9e9e9e;
}
table.data tbody tr:hover td .ico {
  color: #00bcd4;
}


/****************************************
  ==== BREAKPOINT: 1024px
****************************************/

@media only screen and (max-width: 1024px){

}

/****************************************
  ==== BREAKPOINT: 768px
****************************************/

@media only screen and (max-width: 767px){

table.data thead {
  display: none;
}
table.data tbody tr { 
  margin: 0 0 10px 0;
}
table.data tbody tr:hover { 
  background: none;
}
table.data tbody td { 
  display: block; padding: 10px 0; text-align: left !important; border-bottom: #f4f4f4 1px solid;
}
table.data tbody tr td:first-child { 
  border-top: #3c485e 2px solid;
}
table.data tbody td:before { 
  content: attr(data-th); width: auto; display: inline-block; font-weight: 400; padding: 0 15px 0 0;
}
table.data tbody tr {
  border: 0;
}

}

/****************************************
  ==== BREAKPOINT: 480px
****************************************/

@media only screen and (max-width: 479px){

}

/****************************************
  ==== RETINA: @2X
****************************************/

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio:2){

}