@import '../../../Bundles/TrebuchetCore/css/source-sans-pro-font.css';
@charset "UTF-8";

@font-face {
  font-family: "trebuchet-icons";
  src: url("fonts/trebuchet-icons.eot");
  src: url("fonts/trebuchet-icons.eot?#iefix") format("embedded-opentype"),
    url("fonts/trebuchet-icons.woff") format("woff"),
    url("fonts/trebuchet-icons.ttf") format("truetype"),
    url("fonts/trebuchet-icons.svg#trebuchet-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: "trebuchet-icons" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="tre-"]:before,
[class*=" tre-"]:before {
  font-family: "trebuchet-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tre-filter:before {
  content: "\61";
}

.tre-edit:before {
  content: "\62";
}

.tre-close:before {
  content: "\63";
}

.tre-delete:before {
  content: "\64";
}

.tre-arrow-right-end:before {
  content: "\66";
}

.tre-arrow-right:before {
  content: "\67";
}

.tre-arrow-left-end:before {
  content: "\68";
}

.tre-arrow-left:before {
  content: "\69";
}

.tre-arrow-expand:before {
  content: "\6a";
}

.tre-arrow-collapse:before {
  content: "\6c";
}

.tre-apps:before {
  content: "\6d";
}

.tre-add:before {
  content: "\6e";
}

.tre-menu:before {
  content: "\6f";
}

.tre-settings:before {
  content: "\71";
}

.tre-search:before {
  content: "\6b";
}

.tre-copy:before {
  content: "\74";
}

.tre-menu-delete:before {
  content: "\75";
}

.tre-dropdown:before {
  content: "\76";
}

.tre-look-up:before {
  content: "\41";
}

.tre-queue:before {
  content: "\42";
}

.tre-save:before {
  content: "\43";
}

.tre-urgent:before {
  content: "\47";
}

.tre-unlock:before {
  content: "\46";
}

.tre-knowledge:before {
  content: "\79";
}

.tre-view:before {
  content: "\48";
}

.tre-home:before {
  content: "\78";
}

.tre-sort-down:before {
  content: "\77";
}

.tre-sort-up:before {
  content: "\44";
}

.tre-check-in:before {
  content: "\45";
}

.tre-check-out:before {
  content: "\4a";
}

.tre-lock:before {
  content: "\70";
}

.tre-warn:before {
  content: "\72";
}

.tre-cal:before {
  content: "\65";
}

.tre-attach:before {
  content: "\73";
}

.tre-important:before {
  content: "\7a";
}

.tre-send-email:before {
  content: "\49";
}

.tre-rich-text:before {
  content: "\4b";
}

.tre-plain-text:before {
  content: "\4c";
}

.tre-wrench:before {
  content: "\4d";
}

.tre-abandon:before {
  content: "\4e";
}

.tre-barcode:before {
  content: "\4f";
}
/*colors
	white: #fff;
	cool gray: #eff2f9;
	light blue: #9bafbf;
	medium blue: #436c7c;
	dark blue: #323e48;
	interactive (focused): #034470;
	error red: #D64123;
	Cherwell blue: #0056B8;
*/

/*Styles common to all Kendo controls (.k-window.trebuchet-modal-notification class can be removed when all Kendo controls have new look and feel)*/

.k-overlay {
  background-color: #323e48 !important;
  opacity: .85 !important;
}

.trebuchet-hide {
  display: none;
}

/******************************************
	Button Styles
******************************************/

.k-window.trebuchet-modal-dialog .window-footer .k-button,
.k-window.trebuchet-modal-dialog .k-primary,
.k-window .window-footer-old button.k-button,
.k-window .window-footer-old button.k-primary,
.k-window.trebuchet-modal button.k-button,
.k-window.trebuchet-modal button.k-primary,
.k-window.trebuchet-modal ~ .k-animation-container button.k-button,
.k-window.trebuchet-modal ~ .k-animation-container button.k-primary,
.k-window.trebuchet-modal ~ .k-animation-container .k-filter-menu button.k-button,
.k-window.trebuchet-modal ~ .k-animation-container .k-filter-menu button.k-primary,
.responsivediv.overlay .window-footer .k-button,
.responsivediv.overlay .k-primary,
.responsivediv.overlay button.k-button,
.responsivediv.overlay button.k-primary {
  /*!important used here to override button classes in bundle.trebuchetoverrides.css*/
  border-radius: 3px !important;
  background-image: none !important;
  box-shadow: 2px 2px 3px rgba(0,0,0,.18);
  font-size: 14px;
  font-weight: bold;
  height: 30px !important;
  width: 100px;
  padding: 0;
  line-height: normal !important;
  transition: .2s all;
}

.k-window.trebuchet-modal ~ .k-animation-container .k-filter-menu li.k-button,
.k-window.trebuchet-modal ~ .k-animation-container .k-filter-menu li.k-primary {
  height: auto;
  width: 48%;
  box-shadow: none;
}

.k-window.trebuchet-modal-dialog button.k-button:focus,
.k-window.trebuchet-modal-dialog button.k-primary:focus,
.k-window.trebuchet-modal-dialog button.k-button:active,
.k-window.trebuchet-modal-dialog .k-primary:active,
.k-window .window-footer-old button.k-button:focus,
.k-window .window-footer-old button.k-primary:focus,
.k-window .window-footer-old button.k-button:active,
.k-window .window-footer-old button.k-primary:active,
.k-window.trebuchet-modal button.k-button:focus,
.k-window.trebuchet-modal button.k-primary:focus,
.k-window.trebuchet-modal button.k-button:active,
.k-window.trebuchet-modal button.k-primary:active,
.k-window.trebuchet-modal ~ .k-animation-container button.k-primary:active,
.k-window.trebuchet-modal ~ .k-animation-container button.k-button:focus,
.k-window.trebuchet-modal ~ .k-animation-container .k-filter-menu li.k-primary:focus,
.k-window.trebuchet-modal ~ .k-animation-container .k-filter-menu li.k-button:active,
.k-window.trebuchet-modal ~ .k-animation-container .k-filter-menu li.k-primary:active,
.k-window.trebuchet-modal ~ .k-animation-container .k-filter-menu button.k-button:focus,
.responsivediv.overlay button.k-button:focus,
.responsivediv.overlay button.k-primary:focus,
.responsivediv.overlay button.k-button:active,
.responsivediv.overlay .k-primary:active,
.responsivediv.overlay button.k-button:focus,
.responsivediv.overlay button.k-primary:focus,
.responsivediv.overlay button.k-button:active,
.responsivediv.overlay button.k-primary:active {
  border: 1px solid #1c4054;
  box-shadow: 2px 2px 3px rgba(0,0,0,.18) !important;
  background-color: #1c4054;
  color: #fff;
}

.k-window.trebuchet-modal-dialog button.k-button,
.k-window .window-footer-old button.k-button,
.k-window.trebuchet-modal button.k-button,
.k-window.trebuchet-modal ~ .k-animation-container button.k-button,
.k-window.trebuchet-modal ~ .k-animation-container .k-filter-menu li.k-button,
.responsivediv.overlay button.k-button {
  border: 1px solid #1c4054;
  color: #1c4054;
  background-color: #ffffff;
}

.k-window.trebuchet-modal-dialog button.k-button-hover:hover,
.k-window.trebuchet-modal-dialog button.k-primary-hover:hover,
.k-window.trebuchet-modal-dialog button.k-button-focus:focus,
.k-window .window-footer-old button.k-button:hover,
.k-window .window-footer-old button.k-primary:hover,
.k-window.trebuchet-modal button.k-button-hover:hover,
.k-window.trebuchet-modal button.k-primary-hover:hover,
.k-window.trebuchet-modal button.k-button-focus:focus,
.k-window.trebuchet-modal ~ .k-animation-container button.k-button:hover,
.k-window.trebuchet-modal ~ .k-animation-container button.k-primary:hover,
.k-window.trebuchet-modal ~ .k-animation-container .k-filter-menu li.k-button-hover:hover,
.k-window.trebuchet-modal ~ .k-animation-container .k-filter-menu li.k-primary-hover:hover,
.k-window.trebuchet-modal ~ .k-animation-container .k-filter-menu button.k-button-hover:hover,
.k-window.trebuchet-modal ~ .k-animation-container .k-filter-menu button.k-primary-hover:hover
	.responsivediv.overlay button.k-button-hover:hover,
.responsivediv.overlay button.k-primary-hover:hover,
.responsivediv.overlay button.k-button-focus:focus,
.responsivediv.overlay button.k-button-hover:hover,
.responsivediv.overlay button.k-primary-hover:hover,
.responsivediv.overlay button.k-button-focus:focus {
  background-color: #436c7c;
  border: 1px solid #436c7c;
  box-shadow: 2px 2px 3px rgba(0,0,0,.18) !important;
  color: #fff;
}

.k-window.trebuchet-modal-dialog button.k-primary,
.k-window .window-footer-old button.k-primary,
.k-window.trebuchet-modal button.k-primary,
.k-window.trebuchet-modal ~ .k-animation-container button.k-primary,
.k-window.trebuchet-modal ~ .k-animation-container .k-filter-menu li.k-primary,
.responsivediv.overlay button.k-primary {
  background-color: #1c4054;
  border: 1px solid #1c4054;
  color: #fff;
}

/******************************************
	Scrollbar Styles
******************************************/

.k-window.trebuchet-modal ::-webkit-scrollbar {
  width: 10px;
  /* for vertical scrollbars */
  height: 10px;
  /* for horizontal scrollbars */
}

.k-window.trebuchet-modal ::-webkit-scrollbar-track {
  background: #fff;
}

.k-window.trebuchet-modal ::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  background: #9bafbf;
}

/******************************************
	Anchor Styles
******************************************/

.k-window.trebuchet-modal a {
  font-size: 14px;
  color: #1c4054;
}

.k-window.trebuchet-modal a:hover,
.k-window.trebuchet-modal a:active {
  color: #436c7c;
}

/******************************************
	Input Styles
******************************************/

/* Textbox and TextArea*/

.textbox-control {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  border: 1px solid #9bafbf;
  border-radius: 2px;
  box-shadow: none;
  outline: none;
  font-size: 14px;
  color: #323e48;
  padding: 3px 10px;
  margin: 0;
}

.textbox-control:focus {
  border: 1px solid #034470;
}

form.submitted .textbox-control:invalid {
  border: 1px solid #d64123;
}

textarea.textbox-control {
  height: auto;
  resize: none;
}

textarea.textbox-control.resizable {
  resize: both;
}

/* Number Textbox*/

.number-textbox-control {
  width: 100%;
  font-size: 14px;
  color: #323e48;
  margin: 0;
}

.number-textbox-control .k-input {
  padding: 3px 10px;
}

.number-textbox-control .k-numeric-wrap.k-state-default {
  border: 1px solid #9bafbf;
  border-radius: 2px;
  box-shadow: none;
  background-image: none;
  background-color: #fff;
}

.number-textbox-control .k-numeric-wrap.k-state-hover,
.number-textbox-control .k-numeric-wrap.k-state-focused {
  border: 1px solid #436c7c;
}

/*Kendo file upload*/

.upload-control .k-clear-selected,
.upload-control .k-upload-selected,
.upload-control .k-upload-status > .k-i-warning,
.upload-control .k-upload-action > .k-i-pause-sm {
  display: none;
}

.upload-control .k-upload-button {
  background-color: #fff;
  background-image: none;
  border-radius: 3px !important;
  border: 1px solid #1c4054;
  color: #1c4054;
  font-size: 14px;
  font-weight: bold;
  line-height: 2em !important;
  cursor: pointer;
  margin: 0 0 .3em 0;
}

.upload-control .k-upload-button.k-state-focused,
.upload-control .k-upload-button:hover {
  box-shadow: none;
  background-color: #436c7c;
  color: #fff;
}

.upload-control .k-dropzone {
  padding-left: 0;
}

.upload-control .k-dropzone .k-upload-status,
.upload-control .k-file-validation-message {
  color: #a1a1a1;
}

.upload-control .k-upload-status {
  top: 3px;
}

.upload-control .k-upload-status button.k-button {
  border: 0;
  box-shadow: none;
  width: 20px;
}

.upload-control .k-upload-status button.k-button .k-icon {
  font-size: 20px;
}

/******************************************
	Label and Control Group Styles
******************************************/

.control-group {
  margin-bottom: 15px;
}

.label-control {
  text-transform: uppercase;
  font-size: 14px;
  color: #676767;
  margin: 0 0 5px 0;
}

.label-container {
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.label-container .k-invalid-msg {
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  color: #d64123;
  line-height: 14px;
  font-size: 14px;
  font-weight: bold;
  padding: 0;
}

.error-icon {
  vertical-align: middle;
}

.error-text {
  color: #D64123;
  font-size: 14px;
  font-weight: bold;
  vertical-align: middle;
}

/*.k-window.trebuchet-modal .error {
	font-weight: bold;
	font-size: 14px;
	line-height: 14px;
	color: #d64123;
}*/

/******************************************
	Table Styles for modals
******************************************/

.k-window.trebuchet-modal .k-grid-header th.k-header > .k-link,
.k-window.trebuchet-modal .k-grid-header th.k-header {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: normal;
  color: #404252;
}

.k-window.trebuchet-modal .k-grid-header th.k-header {
  padding: 6px 10px;
}

.k-window.trebuchet-modal .k-grid {
  font-size: 12px;
  color: #676767;
}

.k-window.trebuchet-modal .k-header[role=columnheader],
.k-window.trebuchet-modal .k-grid-header {
  background-color: #d0d9e6;
  background-image: none;
  border-top: 2px solid #d0d9e6;
  border-bottom: 2px solid #d0d9e6;
  border-right: 1px solid #436c7c;
}

.k-window.trebuchet-modal .k-grid-header {
  border-right: none;
}

.k-window.trebuchet-modal .k-grid tr:hover {
  background-image: none !important;
  background-color: transparent;
}

.k-window.trebuchet-modal .k-header > .k-grid-filter {
  padding-top: .39em;
}

.k-window.trebuchet-modal .k-i-filter {
  font: 9px/1 'trebuchet-icons';
  color: #323e48;
  margin-right: 5px;
}

.k-window.trebuchet-modal .k-i-filter:before {
  content: "\61";
}

.k-window.trebuchet-modal .k-grid td {
  padding: 15px 10px;
}

.k-window.trebuchet-modal .k-grid .k-alt {
  background-color: #eff2f9;
}

.k-window.trebuchet-modal .k-grid .portal-row-style:hover,
.k-window.trebuchet-modal .k-grid .portal-alt-row-style:hover {
  background-color: #d1d4da;
}

/*******************************\
	Kendo Editor Styles
	#676767
*******************************/

.trebuchet-editor .k-tool-icon {
  color: #676767;
  cursor: pointer;
}

/******************************************
	Checkbox generic styling
******************************************/

.checkbox-control label.k-checkbox-label {
  line-height: 16px;
  padding-left: 23px;
  font-size: 14px;
}

.checkbox-control .k-checkbox {
  margin: 0;
  padding-left: 0;
  position: absolute;
}

.checkbox-control .k-checkbox + .k-checkbox-label {
  color: #1c4054;
}

.checkbox-control .k-checkbox:hover + .k-checkbox-label,
.checkbox-control .k-checkbox:focus + .k-checkbox-label {
  color: #436c7c;
}

.checkbox-control .k-checkbox + .k-checkbox-label:before,
.checkbox-control .k-checkbox:checked + .k-checkbox-label:before,
.checkbox-control .k-checkbox:checked:active + .k-checkbox-label:before {
  background-color: transparent;
  border-color: #1c4054;
  color: #1c4054;
}

.checkbox-control .k-checkbox:hover + .k-checkbox-label:before,
.checkbox-control .k-checkbox:focus + .k-checkbox-label:before,
.checkbox-control .k-checkbox:checked:hover + .k-checkbox-label:before,
.checkbox-control .k-checkbox:checked:focus + .k-checkbox-label:before {
  background-color: transparent;
  border-color: #436c7c;
  color: #436c7c;
}

/******************************************
	Radio Button generic styling
******************************************/

.radio-control label.k-radio-label {
  line-height: 16px;
  padding-left: 23px;
  font-size: 14px;
}

.radio-control .k-radio {
  margin: 0;
  padding-left: 0;
  position: absolute;
}

/*Radio text label default color*/

.radio-control .k-radio + .k-radio-label,
.radio-control .k-radio:checked + .k-radio-label {
  color: #1c4054;
}

/*Radio text label hover/focus color*/

.radio-control .k-radio:hover + .k-radio-label,
.radio-control .k-radio:focus + .k-radio-label {
  color: #436c7c;
}

/*Radio border default style for checked/unchecked*/

.radio-control .k-radio + .k-radio-label:before,
.radio-control .k-radio:checked + .k-radio-label:before {
  background-color: transparent;
  border-color: #1c4054;
  color: #1c4054;
}

/*Radio border hover/focus for checked/unchecked*/

.radio-control .k-radio:hover + .k-radio-label:before,
.radio-control .k-radio:focus + .k-radio-label:before,
.radio-control .k-radio:checked:hover + .k-radio-label:before,
.radio-control .k-radio:checked:focus + .k-radio-label:before {
  border-color: #436c7c;
  color: #436c7c;
}

/*Radio fill default style for check*/

.radio-control .k-radio:checked + .k-radio-label:after {
  background-color: #1c4054;
}

/*Radio fill hover/focus style for check*/

.radio-control .k-radio:checked:hover + .k-radio-label:after,
.radio-control .k-radio:checked:focus + .k-radio-label:after {
  background-color: #436c7c;
}

/******************************************
	Slider control generic styling
******************************************/

.slider-control .k-slider-track {
  background-color: #D3DFE5;
}

.slider-control .k-slider-selection {
  background-color: #1c4054;
}
/*********  General Toolbar styles ***********/

/******************************************
	Appbar Toolbar
******************************************/

#appBar.k-toolbar {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 49px;
  background-image: none;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  background-color: #205d80;
  color: #fff;
  text-align: right;
  padding: 0 0 0 30px;
  border: 0 solid #323e48;
  border-bottom-left-radius: 30px;
  z-index: 501 !important;
}

/* Split buttons are compound widgets with two elements inside.
	We need to adjust both those 'top level' components as well as
	the inner components.
*/

#appBar.k-toolbar .k-split-button,
#appBar.k-toolbar .k-split-button-arrow,
#appBar.k-toolbar .k-button {
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0 0;
  background-color: transparent;
  background-image: none;
  border: 0;
}

#appBar.k-toolbar .k-split-button,
#appBar.k-toolbar .k-button,
#appBar.k-toolbar .k-icon {
  color: inherit;
  margin-top: 0;
  margin-bottom: 0;
}

/* Mainly for IE */

#appBar.k-toolbar .k-split-button-arrow.k-state-active {
  background-color: transparent;
}

/* 'top' level buttons on a toolbar */

#appBar.k-toolbar > .k-button,
#appBar.k-toolbar > .k-split-button {
  padding-left: 10px;
  padding-right: 10px;
}

/* split button inner components */

#appBar .k-split-button > .k-button {
  padding-left: 0;
  padding-right: 0;
}

#appBar .k-split-button > .k-split-button-arrow {
  padding-right: 0;
  padding-left: 5px;
}

#appBar.k-toolbar > .k-button:hover,
#appBar.k-toolbar > .k-button:focus,
#appBar.k-toolbar > .k-split-button:hover,
#appBar.k-toolbar > .k-state-border-down,
#appBar.k-toolbar > .k-split-button:focus {
  text-decoration: underline;
  box-shadow: 0 0 !important;
}

/* Toolbar split-button popup */

/* Ids here solves CSM-11679 and should be removed when toolbar css is reconciled. */

#LoginUserName_optionlist,
#languagePicker_optionlist,
#sites_optionlist,
#availableCultures_optionlist,
#platformCultures_optionlist,
#topLevelHelp-button_optionlist {
  background-color: #fff;
  border: 0px solid #485860;
  /* the two importants below deal with trebuchet-override */
  border-bottom-left-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
  color: #000;
  padding: 0 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: "Source Sans Pro";
}

/******** split button list items **********/

.k-split-container > li > .k-button {
  padding: 0 10px;
  line-height: normal;
}

/* spacing between icon and label on splitbutton list items. */

.k-split-container .k-image {
  margin-right: 10px !important;
}

/* Split button menu items */

.appbar-menuitem:hover,
.appbar-menuitem:focus {
  background-color: #9bafbf;
  color: white;
  box-shadow: 0 0 !important;
}
/****** Quick Search: Generic toolbar styles *******/

#quickSearch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0 solid transparent;
  margin: 0;
  padding: 10px 20px 10px 0;
  position: relative;
  font-family: "Source Sans Pro", sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

#quickSearch.k-toolbar .k-widget,
#quickSearch.k-toolbar .k-button,
#quickSearch.k-toolbar .k-split-button {
  margin: 0;
  position: relative;
  height: 30px !important;
}

#quickSearch .k-button {
  line-height: 1.72em !important;
}

#quickSearch .k-button:focus,
#quickSearch .k-button:hover,
#quickSearch .k-state-border-down {
  box-shadow: none !important;
}

#quickSearch .k-sprite.k-icon {
  font-size: 22px;
  display: inline-block;
  text-align: center;
  width: 100%;
  height: 17px;
  left: -2px;
}

/* Quick Search - Search Types toolbar item */

#quickSearch.k-toolbar .k-split-button {
  margin-left: 5px;
  padding: 0;
  height: 30px;
  border: 0;
}

#quickSearch.k-toolbar .k-split-button:focus {
  box-shadow: none;
}

#quickSearch .k-split-button > .k-button {
  text-align: left;
  background-color: #eff2f9;
  color: #323e48;
  background-image: none;
  border: none;
  height: inherit;
}

#quickSearch .k-split-button:hover > .k-button,
#quickSearch .k-split-button:focus > .k-button,
#quickSearch .k-split-button.k-state-border-down > .k-button {
  color: #436c7c;
}

#quickSearch .k-split-button > .k-split-button-arrow {
  border-radius: 0;
  padding: 0;
  padding-right: 3px !important;
}

#quickSearch .k-split-button-arrow > .k-i-arrow-60-down {
  color: #485860;
  margin: 2px 0 0 0;
}

#quickSearch .k-split-button.k-state-border-down > .k-button {
  border-bottom-left-radius: 0 !important;
}

#searchTypesSplitButton {
  font-weight: bolder;
  padding-left: 10px;
  min-width: 74px;
  border-radius: 3px 0 0 3px !important;
}

/* Quick Search - Search Types dropdown*/

#searchTypesSplitButton_optionlist.k-list-container {
  background-image: none;
  background-color: #fff;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  border: none;
  padding: 0;
  margin-top: 0;
}

ul#searchTypesSplitButton_optionlist,
#searchTypesSplitButton_optionlist.k-list-container > li:last-of-type > a {
  border-radius: 0 0 3px 3px !important;
}

#searchTypesSplitButton_optionlist.k-list-container .k-button {
  height: 30px;
  line-height: 30px;
  padding: 0 7px 0 10px;
  background-image: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: black;
}

#searchTypesSplitButton_optionlist.k-list-container .k-button:hover,
#searchTypesSplitButton_optionlist.k-list-container .k-button:focus {
  background-color: #9bafbf;
  color: #fff;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #searchTypesSplitButton_optionlist.k-list-container .k-button {
    word-break: break-all;
    white-space: normal;
  }
}

/* Quick Search - Wrench toolbar item */

#quickSearch #searchOptions-button {
  background-color: #fff;
  color: #9bafbf;
  height: 100%;
  width: 30px;
  background-image: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

#quickSearch #searchOptions-button:not(.k-state-disabled):hover,
#quickSearch #searchOptions-button:not(.k-state-disabled):focus,
#quickSearch #searchOptions-button.optionsOpen {
  background-color: #eff2f9;
  color: #1c4054;
}

#quickSearch #searchOptions-button.k-state-disabled,
#quickSearch #searchOptions-button.k-state-disabled.k-state-active,
#quickSearch #searchOptions-button.k-state-disabled:focus {
  background-color: #fff;
  color: #fff;
  border: none;
  box-shadow: none;
  opacity: 1 !important;
}

#quickSearch #searchOptions-button.k-state-disabled span {
  color: inherit;
}

/* Quick Search - Execute search toolbar item */

#quickSearch #searchGo-button,
#quickSearch #searchGo-button .k-state-disabled {
  background-color: #eff2f9;
  color: #436c7c;
  height: 100%;
  width: 30px;
  background-image: none;
  border: none;
  border-radius: 0 3px 3px 0 !important;
  box-shadow: none;
}

#quickSearch #searchGo-button:hover,
#quickSearch #searchGo-button:focus {
  background-color: #034470;
}

/* Quick Search:  MRU input combo */

#quickSearch .searchMenuMru {
  width: 190px;
  height: 30px;
}

#quickSearch .searchMenuMru:focus {
  border-color: #034470;
}

#quickSearch ::-webkit-input-placeholder {
  color: #9bafbf;
}

#quickSearch .k-dropdown-wrap {
  padding: 0;
  border: 0;
}

#quickSearch .k-dropdown-wrap.k-state-focused {
  box-shadow: none;
}

#quickSearch .k-dropdown-wrap .k-input {
  padding: 2px 0 2px 11px;
}

#quickSearch .k-dropdown-wrap span {
  visibility: hidden;
}

#quickSearch .k-dropdown-wrap.k-state-border-down {
  border-radius: 0;
}

/* Quick Search:  MRU dropdown list */

#searchMru-menu-list {
  width: 220px !important;
  padding: 0;
  border: 0;
  border-radius: 0 0 3px 3px !important;
  margin-top: 1px;
}

#searchMru-menu-list .k-lst-scroller {
  border-radius: 0 0 3px 3px !important;
}

#searchMru-menu_listbox .k-item {
  height: 30px;
  padding: 0 0 0 10px;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

/* MRU dropdown.  Rule order matters here, selected looks like normal, focused gets dark blue, and hover gets light blue */

#searchMru-menu_listbox .k-state-selected {
  color: #676767 !important;
  background-color: #fff !important;
  background-image: none !important;
}

#searchMru-menu_listbox .k-item:hover,
#searchMru-menu_listbox .k-state-focused.k-state-hover,
#searchMru-menu_listbox .k-state-selected.k-state-focused.k-state-hover {
  background-color: #436C7C !important;
  color: #fff !important;
  background-image: none !important;
  font-weight: 600;
}

#searchMru-menu_listbox .k-state-focused,
#searchMru-menu_listbox .k-state-focused.k-state-selected {
  background-color: #1c4054 !important;
  color: #fff !important;
  font-weight: 600;
}

/* last li in mru border styling  */

#searchMru-menu_listbox > li:last-of-type {
  border-radius: 0 0 3px 3px !important;
  height: 31px;
  /* workaround to extra whitespace poking through from #searchMru-menu-list*/
}

/****** Quick Search Options *******/

#searchOptionContainer {
  background-color: #EFF2F9;
  width: 220px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border: none !important;
  box-shadow: 2px 2px 3px rgba(0,0,0, 0.18);
  box-sizing: border-box;
  font-family: "Source Sans Pro", sans-serif;
}

.searchbar-container {
  font-size: 12px;
  color: #436c7c;
  margin: 20px;
  line-height: 1.48;
  background-color: #EFF2F9;
}

.searchbar-container h4 {
  font-size: 1.15em;
  color: #323e48;
  font-weight: bold;
  padding: 0;
  margin: 0 0 10px 0;
}

.searchbar-container .checkbox-control {
  margin-bottom: 10px;
}

.searchbar-container .searchbar-link,
.searchbar-container .searchbar-link:hover,
.searchbar-container .searchbar-link:focus,
.searchbar-container .searchbar-link:visited {
  color: #436C7C;
  font-weight: bolder;
  text-decoration: underline;
}

.searchbar-container .searchbar-link:hover,
.searchbar-container .searchbar-link:focus {
  color: #436C7C;
}

.searchbar-filter-group {
  margin-bottom: 15px;
}

.searchbar-filter-group .searchbar-label {
  display: block;
  margin-bottom: 8px;
}

/* Quick Search Options: Toggle buttons */

.searchOptionsButtonBar {
  margin-bottom: 10px;
}

.searchOptionsButtonBar .k-button-group {
  margin: 0;
  padding: 0;
}

.searchOptionsButtonBar .k-button-group .k-button {
  border: 1px solid #d3dfe5;
  border-radius: 0 0 !important;
  color: #9bafbf;
  background-color: transparent;
  background-image: none;
}

.searchOptionsButtonBar .k-button-group .k-button:focus,
.searchOptionsButtonBar .k-button-group .k-button:hover {
  color: #323e48;
  border: 1px solid #d3dfe5 !important;
  background-image: none;
  box-shadow: none !important;
}

.searchOptionsButtonBar.sort-options .k-button-group .k-button {
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0;
}

.searchOptionsButtonBar .k-button-group .k-icon {
  width: 25px;
  height: 25px;
  font-size: 23px;
}

/* Search option toggle button selected */

.searchOptionsButtonBar .k-toggle-button.k-state-active {
  color: #323e48;
  background-color: #d3dfe5;
}

/* Quick Search Options: Dropdowns */

.searchbar-container .k-dropdown {
  width: 180px;
}

.searchbar-container .k-dropdown .k-dropdown-wrap {
  height: 30px;
  padding: 0 10px;
  border-radius: 3px;
  border: 1px solid #9bafbf;
  background-color: #fff;
  box-shadow: none;
  background-image: none;
}

.searchbar-container .k-dropdown .k-dropdown-wrap:focus,
.searchbar-container .k-dropdown .k-dropdown-wrap:active {
  border: 1px solid #436c7c;
}

.searchbar-container .k-dropdown-wrap .k-input {
  padding: 0;
  margin-top: 4px;
  font-size: 1.1em;
}

.searchbar-container .k-dropdown-wrap .k-select .k-i-arrow-60-down {
  font-family: 'trebuchet-icons';
  font-size: 24px;
  color: #000;
  right: 5px;
  top: 2px;
}

.searchbar-container .k-dropdown-wrap .k-i-arrow-60-down:hover {
  color: #034470;
}

.searchbar-container .k-dropdown-wrap .k-i-arrow-60-down:before {
  content: "\6c";
}

/* Quick Search Options: Dropdowns popups */

#searchOptionContainer .k-animation-container .k-list-container.k-popup {
  border: 1px solid #1c4054;
  border-radius: 0 0 3px 3px !important;
  padding: 0;
  color: #000;
}

#searchOptionContainer .k-animation-container .k-state-selected,
#searchOptionContainer .k-animation-container .k-state-focused {
  background-image: none !important;
  color: #fff;
  background-color: #9bafbf;
}

#searchOptionContainer .k-animation-container li.k-state-hover {
  background-image: none !important;
  color: #fff;
  background-color: #9bafbf;
}

/* Quick Search Options: Button Styles */

.searchbar-save-container {
  text-align: right;
}

.searchbar-save-container .k-button {
  /*!important used here to override button classes in bundle.trebuchetoverrides.css*/
  border-radius: 3px !important;
  background-image: none !important;
  width: 100px;
  height: 30px !important;
  padding: 0;
  box-shadow: none;
  font-size: 14px;
  font-weight: bold;
  line-height: normal !important;
  transition: .2s all;
}

.searchbar-save-container .k-primary {
  background-color: #1c4054;
  color: #fff;
}

.searchbar-save-container .k-primary:hover,
.searchbar-save-container .k-primary:focus,
.searchbar-save-container .k-primary:active {
  background-color: #436c7c;
}

/*Scrollbar Styles*/

.k-animation-container ::-webkit-scrollbar {
  width: 10px;
  /* for vertical scrollbars */
  height: 10px;
  /* for horizontal scrollbars */
}

.k-animation-container ::-webkit-scrollbar-track {
  background: #fff;
}

.k-animation-container ::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  background: #9bafbf;
}
/* Styles for the browser client, main menu only */

/* somehwat unnecessary references to .techMenu as temporary scoping. */

/* Similar redundant class references to trump trebuchetoverrides.  */

/* menuContainer spans the width of the app, containng both the menu and search bar.
	kendoTopMenuContainer holds kendoTopMenu (<ul>) and is smaller, holds just the menubar.
	
	Both Portal and Browser Client share general layout, height and margin characterstics - these
	rules typically use just the .menuContainer selector.  Browser Client-specific rules are prefixed
	with .techMenu, a class added only for BC.
*/

.menuContainer {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.techMenu.menuContainer {
  min-height: 50px;
  background-color: #205d80;
  color: #fff;
}

.techMenu {
  font-family: "Source Sans Pro", sans-serif;
  height: inherit;
}

.kendoTopMenu {
  background-color: inherit;
}

#kendoTopMenuContainer .k-state-disabled span {
  /* correct disabled menu item color */
  color: #9bafbf !important;
}

/* top-menu-home icon */

.top-menu-home {
  text-align: center;
  line-height: 18px;
  font-size: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

/* the little arrows */

.techMenu .k-icon {
  color: inherit;
  background-color: inherit;
}

.menuContainer .k-i-arrow-60-down {
  font-size: 12px;
  margin: 2px 0 0 0 !important;
  padding-left: 2px;
  /* achieves a ~5px space between arrow and menu text */
}

/* Portal menuitem image alignment. Similar to Kendo's specs, but use padding to keep 10px menuitem left/right padding.  */

.menuContainer .menuImage {
  margin: -2px 0 0 0;
  padding: 0 4px 0 0;
}

/* Top level menu items */

.menuContainer .TopLevelMenuItem {
  height: inherit;
  background-image: none;
}

.techMenu .TopLevelMenuItem {
  color: #fff;
  font-size: 12px;
}

.menuContainer .kendoTopMenu > .k-item {
  height: 50px !important;
}

/* Similar to other .k-link below...*/

.menuContainer .kendoTopMenu > .k-item > .k-link {
  padding: 0 10px !important;
  /*  deals with trebuchetoverrides */
  height: inherit;
  /* line-height matches Kendo default.  Without, letters are clipped.  Or turn off overflow clipping.*/
  line-height: 1.34em !important;
  display: flex;
  align-items: center;
}

/* Top level menu hover/focus/expanded */

.techMenu .TopLevelMenuItem.k-state-hover > .k-link,
.techMenu .TopLevelMenuItem.k-state-active > .k-link,
.techMenu .TopLevelMenuItem.k-state-border-down > .k-link,
.techMenu .TopLevelMenuItem.k-state-focused > .k-link {
  color: #fff;
  background-color: inherit;
  background-image: none;
  border-color: transparent;
}

.techMenu .TopLevelMenuItem.k-state-hover > .k-link > .MenuItemLabel:not(.top-menu-home),
.techMenu .TopLevelMenuItem.k-state-active > .k-link > .MenuItemLabel:not(.top-menu-home),
.techMenu .TopLevelMenuItem.k-state-border-down > .k-link > .MenuItemLabel:not(.top-menu-home),
.techMenu .TopLevelMenuItem.k-state-focused > .k-link > .MenuItemLabel:not(.top-menu-home) {
  text-decoration: underline;
}

.techMenu .TopLevelMenuItem.k-state-hover > .k-link > .top-menu-home:before,
.techMenu .TopLevelMenuItem.k-state-active > .k-link > .top-menu-home:before,
.techMenu .TopLevelMenuItem.k-state-border-down > .k-link > .top-menu-home:before,
.techMenu .TopLevelMenuItem.k-state-focused > .k-link > .top-menu-home:before {
  text-decoration: underline;
}

.techMenu .TopLevelMenuItem.k-state-focused {
  box-shadow: none;
}

/* submenu and submenu items*/

.techMenu .k-menu .k-popup {
  background-color: #fff;
  border: 1px solid #ebebeb;
  color: #000;
}

/* Hide icons under New and all other menus */

.techMenu .k-menu .k-popup .k-image,
.techMenu .MenuIconLeft {
  display: none;
}

/* vertically center each submenu item */

#kendoTopMenuContainer .k-menu-group .k-item .k-link {
  font-size: 15px;
  padding: 0 10px !important;
  line-height: normal !important;
  height: 30px;
  display: flex;
  align-items: center;
}

/* submenu item hover/focus */

.techMenu .k-state-hover > .k-link,
.techMenu .k-state-border-right > .k-link,
.techMenu .k-state-focused > .k-link {
  color: #fff;
  background-color: #9bafbf;
  background-image: none;
  border-color: transparent;
}

/* Panel bar aka Hamburger Menu ============================================ */

.k-panelbar-expand::before {
  content: "\e005";
  /* glyphicon-chevron-right */
}

.k-panelbar-collapse::before {
  content: "\e006";
  /* glyphicon-chevron-down */
}

#panelBarContainer {
  z-index: 1000;
}

#kendoTopPanelBarContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* menu and submenu item styles for the portal */

#kendoTopPanelBarContainer .k-panelbar .k-item .k-link {
  font-size: 15px;
  padding: 0 10px !important;
  line-height: normal !important;
  min-height: 30px;
  display: flex;
  align-items: center;
}

#kendoTopPanelBarContainer .k-panelbar .k-item .k-link .MenuItemLabel {
  text-decoration: none;
}

.panelBarContainer {
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.techMenu .kendoTopPanelBarContainer {
  background-color: #205d80;
  color: #fff;
  overflow: auto;
}

.techMenu .kendoTopPanelBarContainer .SubItem.k-item > .k-link {
  color: #000000;
}

.k-widget {
  border: none;
}

.techMenu .kendoTopPanelBar,
.techMenu .k-header {
  background-image: none;
  background-color: inherit;
}

ul.kendoTopPanelBar {
  border: none;
  max-height: 95vh;
  max-width: 100vw;
}

.techMenu .k-group.k-panel {
  background-color: #fff;
  border-bottom: 1px solid #ebebeb;
  color: #323e48;
}

.techMenu .SubItem.k-item.k-state-default.k-state-active {
  border-top: 1px solid #ebebeb;
}

.techMenu .TopLevelMenuItem.k-item > .k-link.k-state-hover,
.techMenu .TopLevelMenuItem.k-item > .k-link.k-state-hover .top-menu-home {
  color: #323e48;
  background-color: #fff;
  background-image: none;
  border-color: transparent;
}

.techMenu .SubItem.k-item > .k-link.k-state-hover {
  color: #fff;
  background-color: #9bafbf;
  background-image: none;
  border-color: transparent;
}

.techMenu .panelBarContainer .k-panelbar .k-panel,
.techMenu .panelBarContainer .k-group .k-panel {
  background-color: #fff;
  border: 1px solid #ebebeb;
  color: #323e48;
}

.techMenu .k-panelbar > li.k-state-default > .k-link,
.techMenu .k-panelbar .k-link {
  line-height: 35px;
}

.techMenu .k-state-selected {
  background-image: none;
  background-color: inherit;
  color: inherit;
}

.TopLevelMenuItem .k-state-focused.k-state-selected {
  box-shadow: none;
}

.techMenu .TopLevelMenuItem.k-item,
.k-panelbar > li.k-item {
  background-color: #205d80;
  color: #fff;
}

.techMenu .TopLevelMenuItem.k-state-highlight,
.techMenu .TopLevelMenuItem.k-state-hover,
.techMenu .TopLevelMenuItem.k-state-border-down,
.techMenu .TopLevelMenuItem.k-state-focused,
.techMenu .TopLevelMenuItem.k-state-highlight > .k-link,
.techMenu .TopLevelMenuItem.k-state-border-down > .k-link,
.techMenu .TopLevelMenuItem.k-state-focused > .k-link,
.techMenu .k-panelbar > li.k-state-default > .k-link,
.techMenu .k-panelbar > li.k-state-default > .k-link.k-state-selected,
.techMenu .k-panelbar > li > .k-state-selected {
  background-color: inherit;
  color: #fff;
}

.techMenu .TopLevelMenuItem.k-item > .k-link.k-header {
  border-bottom: none;
}

.techMenu .panelBarContainer .SubItem.k-item,
.techMenu .k-panelbar > li.k-state-hover > .k-link,
.techMenu .k-panelbar > li.k-state-default > .k-link.k-state-hover,
.techMenu .panelBarContainer .SubItem.k-state-highlight,
.techMenu .panelBarContainer .SubItem.k-state-border-down,
.techMenu .panelBarContainer .SubItem.k-state-focused,
.techMenu .panelBarContainer .SubItem.k-state-highlight > .k-link,
.techMenu .panelBarContainer .SubItem.k-state-border-down > .k-link,
.techMenu .panelBarContainer .SubItem.k-state-focused > .k-link {
  color: #323e48;
  background-color: #fff;
}

#kendoTopPanelBarContainer .k-state-disabled span {
  /* correct disabled menu item color */
  color: #9bafbf !important;
}

.panelBarContainer .k-i-arrow-60-down {
  font-size: 12px;
  margin: 2px 0 0 0 !important;
  padding-left: 2px;
  /* achieves a ~5px space between arrow and menu text */
}

/* Portal menuitem image alignment. Similar to Kendo's specs, but use padding to keep 10px menuitem left/right padding.  */

.panelBarContainer .menuImage {
  margin: -2px 0 0 0;
  padding: 0 4px 0 0;
}

.techMenu .TopLevelMenuItem {
  color: #fff;
  font-size: 12px;
}

#kendoTopPanelBarContainer {
  display: none;
}

.techMenu .TopLevelMenuItem.k-item .quickSearchContainer {
  display: flex;
}

#panelBarButtons {
  line-height: 40px;
  max-width: 100%;
}

#panelBarMainMenuToggle {
  width: 25%;
  text-align: left;
}

#panelBarMainMenuToggle:before {
  left: 1em !important;
  margin: 0;
}

#panelBarUserMenuToggle {
  padding-right: 1em;
  float: right;
}

#panelBarBrand {
  position: fixed;
  top: 8px;
  width: 50%;
  text-align: center;
}

#panelBarBrand > img {
  height: 25px;
}

@media screen and (max-width: 768px) {
  .header,
  #menuContainer,
  #kendoTopMenuContainer,
  #appBar.k-toolbar,
  #searchOptions-button,
  .browser-client-header,
  .techMenu.menuContainer {
    display: none;
  }

  #fixedWrapper {
    top: 40px;
    border-bottom: none;
  }

  #kendoTopPanelBarContainer {
    display: block;
  }

  #quickSearch {
    display: block;
  }

  .kendoTopPanelBarList .quickSearchContainer > span {
    display: block;
    width: 100%;
    text-align: center;
  }

  .top-menu-home {
    margin-left: 0;
  }

  #searchTypesSplitButton_wrapper {
    display: none;
  }

  #searchMru-div .k-input.searchMenuMru {
    border-radius: 3px 0 0 3px !important;
  }

  #searchMru-div .k-dropdown-wrap.k-state-default,
  #searchMru-div .k-dropdown-wrap.k-state-hover,
  #searchMru-div .k-dropdown-wrap.k-state-focused {
    background-color: transparent;
    background-image: none;
  }

  #panelBarMainMenuToggle {
    cursor: pointer;
  }

  #panelBarUserMenuToggle .k-image {
    box-sizing: border-box;
    height: 30px;
    width: 30px;
    border: #FFFFFF solid 2px;
    background: #fefefe;
    border: #FFFFFF solid 2px;
    border-radius: 25px;
    vertical-align: middle;
    cursor: pointer;
  }
}