﻿/* TEMPORARY */
/** {outline: 1px solid black;}*/
/* *************************
   1. VARIABLES
   ************************ */
/* *************************
   2. MIXINS
   ************************ */
/* *************************
   2. MIXINS
   ************************ */
/* *************************
   3. GLOBAL STYLES
   ************************ */
html {
  font-size: 16px; }

html, body {
  height: 100%;
  margin: 0; }

body {
  background-color: #dbdbdb;
  color: #666666;
  font-family: "Open Sans";
  font-size: 1rem; }

/* text & fonts */
h1 {
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase; }
  h1.special {
    color: #336666;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
    font-size: 3rem; }

h2 {
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem; }
  h2.special {
    color: #336666;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
    font-size: 1.25rem; }

.font-size-0 {
  font-size: 0.75rem; }

p, .font-size-1 {
  font-size: 0.875rem; }

.font-size-2 {
  font-size: 1rem; }

.font-size-3 {
  font-size: 1.125rem; }

.font-size-4 {
  font-size: 1.25rem; }

.font-size-5 {
  font-size: 1.375rem; }

.font-size-7 {
  font-size: 1.75rem; }

.font-size-8 {
  font-size: 2.25rem; }

.font-size-9 {
  font-size: 3rem; }

.font-size-10 {
  font-size: 3.375rem; }

.font-size-largest {
  font-size: 6rem; }

.font-weight-semi-bold {
  font-weight: 600 !important; }

a, a:not([href]):not([tabindex]), a:not(.nav-link):not(.navbar-brand), .link {
  color: #339999;
  cursor: pointer;
  text-decoration: underline; }
  a:hover, a:not([href]):not([tabindex]):hover, a:not(.nav-link):not(.navbar-brand):hover, .link:hover {
    color: #006699;
    text-decoration: none; }

.icon-link {
  color: #339999;
  cursor: pointer;
  text-decoration: underline;
  text-decoration: none; }
  .icon-link:hover {
    color: #006699;
    text-decoration: none; }

.no-underline {
  text-decoration: none !important; }

/* misc. basic styles */
.bg-gray {
  background-color: #999999; }

.bg-gray-darker {
  background-color: #333333; }

.bg-gray-light {
  background-color: #cccccc; }

.bg-gray-lighter {
  background-color: #dbdbdb; }

.bg-gray-lightest {
  background-color: #f2f2f2; }

.bg-teal {
  background-color: #339999; }

.bg-teal-dark {
  background-color: #336666; }

.border-color-gray-light {
  border-color: #cccccc !important; }

.border-color-gray-lighter {
  border-color: #dbdbdb !important; }

.border-color-gray-lightest {
  border-color: #f2f2f2 !important; }

.border-color-gray {
  border-color: #999999 !important; }

.border-color-gray-dark {
  border-color: #666666 !important; }

.border-color-gray-darker {
  border-color: #333333 !important; }

.border-color-white {
  border-color: #ffffff !important; }

.border-color-teal-dark {
  border-color: #336666 !important; }

.border {
  border: 1px solid #999999; }

.border-bottom {
  border-bottom: 1px solid #999999; }

.border-top {
  border-top: 1px solid #999999; }

.border-right {
  border-right: 1px solid #999999; }

.border-radius-small {
  border-radius: 5px; }

.color-gray {
  color: #999999 !important; }

.color-gray-light {
  color: #cccccc !important; }

.color-pink {
  color: #cc6699; }

.color-purple {
  color: #6666cc !important; }

.color-teal {
  color: #339999; }

.color-teal-important {
  color: #339999 !important; }

.color-teal-dark {
  color: #336666; }

.color-blue {
  color: #006699; }

.color-blue-light {
  color: #3399FF; }

.color-blue-royal {
  color: #3366FF; }

.color-white {
  color: #ffffff !important; }

.color-red {
  color: #cc0000; }

.color-green {
  color: #4DC458; }

.color-gray-lightest {
  color: #f2f2f2 !important; }

.color-gray-darker {
  color: #333333 !important; }

.color-red-bright {
  color: #ff0000; }

.color-gold {
  color: #ff9900; }

.color-black {
  color: #000000; }

.flush {
  font-size: 0; }

.indent-largest {
  margin: 0 60px; }

.indent1 {
  margin-left: 30px; }

.indent2 {
  margin-left: 60px; }

.margin {
  margin: 10px; }

.margin-large {
  margin: 15px; }

.margin-bottom-large {
  margin-bottom: 15px; }

.margin-bottom-larger {
  margin-bottom: 30px; }

.margin-larger {
  margin: 30px; }

.margin-left-smaller {
  margin-left: 2px; }

.margin-left-small {
  margin-left: 5px; }

.margin-left {
  margin-left: 10px; }

.margin-left-large {
  margin-left: 15px; }

.margin-left-negative {
  margin-left: -10px; }

.margin-right-smaller {
  margin-right: 2px; }

.margin-right-small {
  margin-right: 5px; }

.margin-right {
  margin-right: 10px; }

.margin-right-negative {
  margin-right: -10px; }

.margin-right-large {
  margin-right: 15px; }

.margin-right-largest {
  margin-right: 60px !important; }

.margin-top-small {
  margin-top: 5px; }

.margin-top-8px {
  margin-top: 8px; }

.margin-top-smallest-negative {
  margin-top: -5px; }

.margin-top {
  margin-top: 10px !important; }

.margin-top-large {
  margin-top: 15px !important; }

.margin-top-large-negative {
  margin-top: -15px !important; }

.margin-top-larger {
  margin-top: 30px; }

.margin-top-largest {
  margin-top: 60px !important; }

.margin-bottom-none {
  margin-bottom: 0; }

.margin-bottom-small {
  margin-bottom: 5px; }

.margin-bottom {
  margin-bottom: 10px !important; }

.margin-bottom-large {
  margin-bottom: 15px; }

.padding-bottom-large {
  padding-bottom: 15px; }

.padding-bottom-larger {
  padding-bottom: 30px; }

.padding-top-none {
  padding-top: 0 !important; }

.padding-top-small {
  padding-top: 5px; }

.padding-top {
  padding-top: 10px; }

.padding-top-large {
  padding-top: 15px; }

.padding-top-larger {
  padding-top: 30px; }

.padding-right-none {
  padding-right: 0 !important; }

.padding-right-small {
  padding-right: 5px !important; }

.padding-right {
  padding-right: 10px !important; }

.padding-right-negative {
  padding-right: -10px !important; }

.padding-right-large {
  padding-right: 15px !important; }

.padding-right-larger {
  padding-right: 30px !important; }

.padding-right-50px {
  padding-right: 50px; }

.padding-left-none {
  padding-left: 0 !important; }

.padding-left-small {
  padding-left: 5px; }

.padding-left {
  padding-left: 10px !important; }

.padding-left-large {
  padding-left: 15px !important; }

.padding-left-larger {
  padding-left: 30px !important; }

.padding-bottom-none {
  padding-bottom: 0 !important; }

.padding-bottom-small {
  padding-bottom: 5px; }

.padding-bottom {
  padding-bottom: 10px; }

.overflow-auto {
  overflow: auto; }

.overflow-x-hidden {
  overflow-x: hidden; }

.overflow-y-auto {
  overflow-y: auto !important; }

.position-relative {
  position: relative; }

.position-absolute {
  position: absolute; }

.inline-block {
  display: inline-block !important; }

.block {
  display: block !important; }

.line-height-0 {
  line-height: 0.75rem; }

.line-height-1 {
  line-height: 0.875rem; }

.line-height-2 {
  line-height: 1rem; }

.line-height-3 {
  line-height: 1.125rem; }

.line-height-4 {
  line-height: 1.25rem; }

.height-500px {
  height: 500px; }

.min-height-800px {
  min-height: 800px; }

.max-height-300px {
  max-height: 300px; }

.vh-75 {
  height: 75vh; }

.vertical-align-bottom {
  vertical-align: bottom; }

.line-height-5 {
  line-height: 1.375rem; }

.line-height-7 {
  line-height: 1.75rem; }

.width-20px {
  width: 20px !important; }

.width-270px {
  width: 270px !important; }

.width-70px {
  width: 70px !important;
  min-width: 70px; }

.width-40px {
  width: 40px !important;
  min-width: 40px; }

.min-width-20px {
  min-width: 20px !important; }

.min-width-40px {
  min-width: 40px !important; }

.r90 {
  transform: rotate(90deg); }

.r225 {
  transform: rotate(225deg); }

.fake-row {
  margin: 0 -15px; }

/* icons */
.icon {
  display: block;
  width: 20px;
  height: 20px; }

.icon-largest {
  font-size: 6.2rem; }

.no-data, .no-data:hover {
  color: #339999 !important;
  opacity: 0.5; }

/* data styles */
.data-text-large {
  font-size: 1.25rem;
  font-weight: bold; }

.data-text-larger {
  font-size: 2.25rem;
  font-weight: bold; }

.data-text-largest {
  font-size: 3.375rem;
  font-weight: bold; }

/* anchors */
.anchor-top {
  position: absolute;
  top: 0; }

.anchor-bottom {
  position: absolute;
  top: 0; }

@media (max-width: 992px) {
  .margin-top-lg {
    margin-top: 10px !important; } }

/* responsive line breaks & other behavior */
@media (max-width: 576px) {
  .line-break-sm {
    margin-top: -12px; }
    .line-break-sm > * {
      display: inline-block;
      margin-top: 10px; }
    .line-break-sm:before {
      content: '\A';
      white-space: pre; } }

@media (max-width: 768px) {
  .line-break-md {
    margin-top: -12px; }
    .line-break-md > * {
      display: inline-block;
      margin-top: 10px; }
    .line-break-md:before {
      content: '\A';
      white-space: pre; } }

@media (max-width: 992px) {
  .line-break-lg {
    margin-top: -12px; }
    .line-break-lg > * {
      display: inline-block;
      margin-top: 10px; }
    .line-break-lg:before {
      content: '\A';
      white-space: pre; } }

@media (max-width: 1200px) {
  .line-break-xl {
    margin-top: -12px; }
    .line-break-xl > * {
      display: inline-block;
      margin-top: 10px; }
    .line-break-xl:before {
      content: '\A';
      white-space: pre; } }

@media (max-width: 768px) {
  .no-border-md {
    border: none; } }

@media (max-width: 992px) {
  .no-border-lg {
    border: none; } }

/* generic box styles */
.box-white {
  padding: 15px;
  background-color: #ffffff !important;
  border: 1px solid #cccccc;
  box-shadow: 0px 5px 5px rgba(153, 153, 153, 0.4); }

.box-gray-lightest, #surveyTabStrip .k-content {
  padding: 15px;
  background-color: #f2f2f2; }

/* *************************
   4. HEADER, NAV, & CTA BAR
   ************************ */
.header-placeholder {
  height: 125px; }
  @media (min-width: 576px) and (max-width: 1200px) {
    .header-placeholder {
      height: 150px; } }

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200000;
  width: 100%;
  background-color: #333333; }
  @media (max-width: 768px) {
    header {
      min-width: 768px;
      position: absolute; } }
  header a {
    text-decoration: none; }
    header a span {
      background-color: #339999;
      color: #ffffff;
      cursor: pointer;
      font-size: 0.875rem;
      font-weight: 700;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      background-color: transparent;
      text-transform: none; }
      header a span:hover {
        background-color: #666666;
        color: #ffffff; }
      header a span a {
        color: #ffffff;
        text-decoration: none; }
        header a span a:hover {
          color: #ffffff;
          text-decoration: none; }
  header .navbar-light .navbar-nav .nav-link {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: normal;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #333333 !important; }
    header .navbar-light .navbar-nav .nav-link:hover {
      color: #33d8a1; }
    header .navbar-light .navbar-nav .nav-link.disable {
      color: #999999; }
    header .navbar-light .navbar-nav .nav-link.dropdownitem {
      color: #ffffff; }
    header .navbar-light .navbar-nav .nav-link.dropdownitem:hover {
      color: #33d8a1; }
    header .navbar-light .navbar-nav .nav-link.logout {
      font-weight: bold;
      color: #339999;
      padding-right: 0; }
    header .navbar-light .navbar-nav .nav-link.logout:hover {
      color: #33d8a1; }
  header .dropdown-menu {
    background-color: #333333; }
  header .show .dropdown-toggle {
    color: #33d8a1 !important; }

.cta-bar {
  background-color: #339999;
  color: #ffffff;
  font-size: 1rem;
  padding: 10px; }
  .cta-bar span {
    color: #ffffff; }
  .cta-bar button, .cta-bar .button, .cta-bar a[role=button], .cta-bar a {
    background-color: #339999;
    color: #ffffff;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border: none;
    border-radius: 2px;
    display: inline-block;
    min-width: 200px;
    background-color: #336666;
    min-width: 0;
    width: 100%; }
    .cta-bar button:hover, .cta-bar .button:hover, .cta-bar a[role=button]:hover, .cta-bar a:hover {
      background-color: #666666;
      color: #ffffff; }
    .cta-bar button a, .cta-bar .button a, .cta-bar a[role=button] a, .cta-bar a a {
      color: #ffffff;
      text-decoration: none; }
      .cta-bar button a:hover, .cta-bar .button a:hover, .cta-bar a[role=button] a:hover, .cta-bar a a:hover {
        color: #ffffff;
        text-decoration: none; }

.relay-badge {
  background-image: url("images/relay-logo.png");
  position: relative;
  width: 150px;
  height: 97px;
  top: 0;
  margin: -51px auto; }
  @media (min-width: 768px) and (max-width: 1200px) {
    .relay-badge {
      background-image: url("images/relay-logo-small.png");
      margin-top: -71px;
      width: 70px; } }

footer {
  margin-top: 15px; }

/* *************************
   5. FORMS
   ************************ */
label, .label {
  font-weight: bold;
  text-transform: uppercase; }

.normal-case {
  text-transform: none !important; }

button:not(.close):not(.navbar-toggler), .button {
  background-color: #339999;
  color: #ffffff;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  display: inline-block;
  min-width: 200px; }
  button:not(.close):not(.navbar-toggler):hover, .button:hover {
    background-color: #666666;
    color: #ffffff; }
  button:not(.close):not(.navbar-toggler) a, .button a {
    color: #ffffff;
    text-decoration: none; }
    button:not(.close):not(.navbar-toggler) a:hover, .button a:hover {
      color: #ffffff;
      text-decoration: none; }
  button:not(.close):not(.navbar-toggler).slim, .button.slim {
    padding: 7px !important; }

/* *************************
   6. CENTERS & SPECIFIC PAGES
   ************************ */
.center {
  margin-top: 15px; }
  .center .title-block {
    border-bottom: 1px solid #999999;
    display: block;
    padding: 10px 0 30px 0;
    text-align: center; }
  .center .content-block .row {
    padding-top: 25px; }
    .center .content-block .row:last-child {
      border-bottom: 1px solid #999999; }
  .center h1 {
    color: #336666;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
    font-size: 3rem; }
  .center h2 {
    margin: 0; }
  .center p, .center h2 {
    font-size: 1.125rem; }
  .center .subtitle {
    font-size: 1.75rem; }

.subcenter {
  margin-top: 15px; }
  .subcenter h1 {
    color: #336666;
    font-size: 2.25rem;
    margin-top: 10px;
    display: inline-block; }
  .subcenter a {
    display: inline-block; }

.account-subcenter {
  margin-left: 350px; }

/*IE 6-10 & EDGE*/
@media screen\9, screen\0 {
  .account-subcenter {
    margin-left: unset !important; } }

.client-list {
  top: 0;
  bottom: 0;
  position: fixed;
  width: 350px;
  z-index: 200001;
  margin-top: 125px; }
  .client-list .tab-column {
    display: flex;
    flex-flow: column;
    background-color: #f2f2f2;
    height: 100%; }
    .client-list .tab-column .nav-item {
      flex: 0 1 auto;
      border-bottom: 1px solid #999999;
      font-size: 0.875rem;
      border-right: 1px solid #999999;
      padding: 5px 0; }
      .client-list .tab-column .nav-item.active {
        background-color: #ffffff;
        border-right: none;
        font-size: 1rem; }
      .client-list .tab-column .nav-item a {
        font-weight: bold;
        color: #333333;
        text-decoration: none; }
  .client-list .spacer {
    flex: 1 1 auto;
    border-right: 1px solid #999999;
    display: flex;
    flex-direction: column; }
  .client-list h1 {
    margin: 10px; }
  .client-list .client-scrollable {
    overflow-x: hidden;
    overflow-y: auto; }
  .client-list .tab-column {
    background-color: #ffffff;
    height: 100%;
    border: 1px solid #999999; }
    .client-list .tab-column .nav-item {
      border-right: none;
      padding: 5px 10px;
      /*&:first-child {
                border-top: $border $gray;
            }*/ }
      .client-list .tab-column .nav-item .button {
        background-color: #339999;
        color: #ffffff;
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 700;
        padding: 10px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        border: none;
        border-radius: 2px;
        display: inline-block;
        min-width: 200px;
        background-color: #336666;
        min-width: 0; }
        .client-list .tab-column .nav-item .button:hover {
          background-color: #666666;
          color: #ffffff; }
        .client-list .tab-column .nav-item .button a {
          color: #ffffff;
          text-decoration: none; }
          .client-list .tab-column .nav-item .button a:hover {
            color: #ffffff;
            text-decoration: none; }
        .client-list .tab-column .nav-item .buttona {
          color: #ffffff; }

.login-footer, .reset-password-footer {
  position: absolute;
  bottom: 30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }
  @media (max-width: 768px), (max-height: 900px) {
    .login-footer, .reset-password-footer {
      position: relative;
      bottom: 0;
      top: 200px;
      margin: auto; } }

/* *************************
   7. WIDGETS
   ************************ */
.adminWidget {
  padding: 15px;
  background-color: #ffffff !important;
  border: 1px solid #cccccc;
  box-shadow: 0px 5px 5px rgba(153, 153, 153, 0.4);
  display: inline-block;
  font-size: 0.875rem;
  margin-top: 30px;
  position: relative;
  text-align: left; }
  .adminWidget .widget-content {
    overflow: hidden;
    margin-bottom: 30px; }
  .adminWidget .widget-category-title {
    color: #336666;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
    font-size: 3rem;
    font-size: 1.375rem; }
  .adminWidget .widget-icon-bar {
    position: absolute;
    height: 20px;
    top: 15px;
    right: 15px; }
  .adminWidget .widget-footer {
    background-color: #cccccc;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0;
    width: 100%;
    min-height: 41px; }
    .adminWidget .widget-footer a {
      background-color: #339999;
      color: #ffffff;
      cursor: pointer;
      font-size: 0.875rem;
      font-weight: 700;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      background-color: #339999;
      display: block;
      text-align: center;
      width: 50%;
      float: left;
      padding: 10px; }
      .adminWidget .widget-footer a:hover {
        background-color: #666666;
        color: #ffffff; }
      .adminWidget .widget-footer a a {
        color: #ffffff;
        text-decoration: none; }
        .adminWidget .widget-footer a a:hover {
          color: #ffffff;
          text-decoration: none; }
      .adminWidget .widget-footer a:first-child {
        border-right: 1px solid #cccccc; }

.widget {
  padding: 15px;
  background-color: #ffffff !important;
  border: 1px solid #cccccc;
  box-shadow: 0px 5px 5px rgba(153, 153, 153, 0.4);
  width: 500px;
  height: 315px;
  display: inline-block;
  font-size: 0.875rem;
  margin-top: 30px;
  position: relative;
  text-align: left; }
  .widget .widget-content {
    height: 190px;
    overflow: hidden; }
  .widget h1 {
    margin: 0; }
  .widget .widget-application-bar {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    width: 100%; }
  .widget .widget-application-icon {
    padding-left: 15px;
    padding-right: 15px; }
  .widget .widget-application-name {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff; }
  .widget .widget-icons {
    position: absolute;
    right: 10px;
    top: 5px; }
  .widget .widget-title-bar {
    margin-top: 30px; }
  .widget .widget-footer {
    background-color: #cccccc;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0;
    width: 100%;
    min-height: 41px; }
    .widget .widget-footer a {
      background-color: #339999;
      color: #ffffff;
      cursor: pointer;
      font-size: 0.875rem;
      font-weight: 700;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      background-color: #339999;
      display: block;
      text-align: center;
      width: 50%;
      float: left;
      padding: 10px; }
      .widget .widget-footer a:hover {
        background-color: #666666;
        color: #ffffff; }
      .widget .widget-footer a a {
        color: #ffffff;
        text-decoration: none; }
        .widget .widget-footer a a:hover {
          color: #ffffff;
          text-decoration: none; }
      .widget .widget-footer a:first-child {
        border-right: 1px solid #cccccc; }

/* Probably belongs in _kendo overrides, but other call activity report stuff us here*/
.PPU-schedule-box-NoResponse {
  background: #3399FF;
  border-radius: 18px;
  color: white;
  font-size: 0.875rem;
  text-align: center; }

.PPU-schedule-box-ContactAttempted {
  background: #cc0000;
  border-radius: 18px;
  color: white;
  font-size: 0.875rem;
  text-align: center; }

.PPU-schedule-box-Completed {
  background: teal;
  border-radius: 18px;
  color: white;
  font-size: 0.875rem;
  text-align: center; }

.PPU-schedule-box-Skipped {
  background: #999999;
  border-radius: 18px;
  color: white;
  font-size: 0.875rem;
  text-align: center; }

.PPU-schedule-box-Scheduled {
  background: #e5990f;
  border-radius: 18px;
  color: white;
  font-size: 0.875rem;
  text-align: center; }

.PPU-schedule-box-New {
  background: #7a25d0;
  border-radius: 18px;
  color: white;
  font-size: 0.875rem;
  text-align: center; }

.today-calendar-header {
  border-radius: 5px 5px 0px 0px;
  color: white;
  width: 100%;
  background: #6666cc; }

.today-calendar-day {
  border-radius: 0px 0px 5px 5px;
  font-size: 60px;
  font-weight: bold;
  color: #6666cc; }

/* *************************
   8. REPORTS & GRIDS
   ************************ */
.export-row {
  background-color: #339999;
  color: #ffffff;
  padding: 5px 7px;
  text-align: right;
  text-transform: uppercase; }
  .export-row a, .export-row a:not([href]):not([tabindex]) {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: bold; }

.table-container {
  overflow-x: auto; }

.table-bordered.border-color-gray th, .table-bordered.border-color-gray td {
  border: 1px solid #999999; }

.header-row {
  background-color: #336666;
  padding: 10px; }

.activity-header {
  padding: 3px;
  background-color: #65b4ba;
  color: white;
  text-shadow: none; }

.activity-detail-row {
  border-style: solid;
  border-width: 1px;
  border-color: #e6e6e6;
  background-color: white; }

.activity-detail-cell {
  padding: 3px; }

.activity-detail-value {
  border-style: solid;
  border-width: 0px 1px 0px 1px;
  border-color: #e6e6e6; }

.express-command-detail-value {
  border-style: solid;
  border-width: 1px;
  border-color: #e6e6e6;
  background-color: #b5e6e6; }

/* Probably belongs in _kendo overrides, but other call activity report stuff us here*/
#callActivityDetailsReport .k-widget *, #smsActivityDetailsReport .k-widget *, #webActivityDetailsReport .k-widget *, #builderActivityDetailsReport .k-widget * {
  box-sizing: border-box; }

#callActivityDetailsReport .k-toolbar .container, #smsActivityDetailsReport .k-toolbar .container, #webActivityDetailsReport .k-toolbar .container, #builderActivityDetailsReport .k-toolbar .container {
  padding-right: 0px; }

#callActivityDetailsReport .k-toolbar .col-3, #smsActivityDetailsReport .k-toolbar .col-3, #webActivityDetailsReport .k-toolbar .col-3, #builderActivityDetailsReport .k-toolbar .col-3 {
  padding-right: 0px; }

/* *************************
   9. MODALS
   ************************ */
.special-menu {
  border-radius: 0; }
  .special-menu .page-header {
    padding: 25px;
    background-color: #339999; }
    .special-menu .page-header a {
      color: #ffffff; }
    .special-menu .page-header .close {
      color: #ffffff;
      min-width: 25px;
      opacity: 1;
      text-shadow: none;
      width: 25px; }
    .special-menu .page-header h1 {
      color: #ffffff;
      margin: 0; }
  .special-menu .modal-body {
    padding: 0; }
    .special-menu .modal-body .tab-column {
      display: flex;
      flex-flow: column;
      background-color: #f2f2f2;
      height: 100%; }
      .special-menu .modal-body .tab-column .nav-item {
        flex: 0 1 auto;
        border-bottom: 1px solid #999999;
        font-size: 0.875rem;
        border-right: 1px solid #999999;
        padding: 5px 0; }
        .special-menu .modal-body .tab-column .nav-item.active {
          background-color: #ffffff;
          border-right: none;
          font-size: 1rem; }
        .special-menu .modal-body .tab-column .nav-item a {
          font-weight: bold;
          color: #333333;
          text-decoration: none; }
    .special-menu .modal-body .spacer {
      flex: 1 1 auto;
      border-right: 1px solid #999999;
      display: flex;
      flex-direction: column; }
    .special-menu .modal-body .content {
      display: block;
      margin: 30px 30px 30px 0; }
      .special-menu .modal-body .content h1, .special-menu .modal-body .content h2 {
        margin: 0; }
      .special-menu .modal-body .content h2 {
        font-size: 0.875rem; }
      .special-menu .modal-body .content p, .special-menu .modal-body .content span, .special-menu .modal-body .content label, .special-menu .modal-body .content input {
        font-size: 0.875rem; }

.modal-header > h3 {
  margin-bottom: unset !important; }

.eula-text {
  white-space: pre-wrap;
  overflow-x: hidden;
  height: 50vh;
  overflow-y: scroll; }

.messageBox > .modal-footer {
  justify-content: center; }

/* *************************
   10. OTHER
   ************************ */
.dashboardWidgetItem {
  white-space: nowrap; }

.loading-overlay {
  height: 170px;
  border-radius: 0px;
  text-align: center;
  color: #cccccc;
  font-size: 2.25rem;
  font-weight: 900;
  display: block;
  pointer-events: none;
  /*margin-left: -($spacer-large);*/ }

#systemStatustWidget ul {
  list-style: none;
  margin-bottom: 0px;
  min-width: 250px; }

/* Pointed Breadcrumb */
.pointed-breadcrumb {
  list-style: none;
  overflow: hidden; }

.pointed-breadcrumb li {
  float: left;
  width: 100%; }

.pointed-breadcrumb li a {
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  float: left;
  text-decoration: none !important;
  text-align: center;
  width: 100%; }

.pointed-breadcrumb li a.navigable {
  text-decoration: underline !important;
  cursor: pointer !important; }

.pointed-breadcrumb li a.non-navigable {
  cursor: default !important; }

.pointed-breadcrumb li:not(:last-child) a:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid;
  border-left-color: inherit;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2; }

.pointed-breadcrumb li:not(:last-child) a:before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 30px solid #f2f2f2;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 1px;
  left: 100%;
  z-index: 1; }

/* Long Dash */
.border-dashed {
  background: linear-gradient(to right, #999999 66%, transparent 0%) top/15px 1px repeat-x, linear-gradient(#999999 66%, transparent 0%) right/1px 15px repeat-y, linear-gradient(to right, #999999 66%, transparent 0%) bottom/15px 1px repeat-x, linear-gradient(#999999 66%, transparent 0%) left/1px 15px repeat-y;
  /* left */ }

.border-dashed-top {
  background: linear-gradient(to right, #999999 66%, transparent 0%) top/15px 1px repeat-x, linear-gradient(#999999 0%, transparent 0%) right/1px 15px repeat-y, linear-gradient(to right, #999999 0%, transparent 0%) bottom/15px 1px repeat-x, linear-gradient(#999999 0%, transparent 0%) left/1px 15px repeat-y;
  /* left */ }

.border-dashed-bottom {
  background: linear-gradient(to right, #999999 0%, transparent 0%) top/15px 1px repeat-x, linear-gradient(#999999 0%, transparent 0%) right/1px 15px repeat-y, linear-gradient(to right, #999999 66%, transparent 0%) bottom/15px 1px repeat-x, linear-gradient(#999999 0%, transparent 0%) left/1px 15px repeat-y;
  /* left */ }

.border-dashed-left {
  background: linear-gradient(to right, #999999 0%, transparent 0%) top/15px 1px repeat-x, linear-gradient(#999999 0%, transparent 0%) right/1px 15px repeat-y, linear-gradient(to right, #999999 0%, transparent 0%) bottom/15px 1px repeat-x, linear-gradient(#999999 66%, transparent 0%) left/1px 15px repeat-y;
  /* left */ }

.border-dashed-right {
  background: linear-gradient(to right, #999999 0%, transparent 0%) top/15px 1px repeat-x, linear-gradient(#999999 66%, transparent 0%) right/1px 15px repeat-y, linear-gradient(to right, #999999 0%, transparent 0%) bottom/15px 1px repeat-x, linear-gradient(#999999 0%, transparent 0%) left/1px 15px repeat-y;
  /* left */ }

#mmSaveBtnIVR {
  min-width: 0px;
  width: 100%; }

/* Bootstrap tweaks */
.card-block {
  padding: 1.25em; }

.modal {
  z-index: 200020;
  overflow-y: auto; }

.modal-backdrop {
  z-index: 200019; }

@media (min-width: 1200px) {
  .container {
    width: 1200px;
    max-width: 100%; } }

@media (max-width: 1200px) {
  .d-none-xl-down {
    display: none !important; } }

@media (max-width: 992px) {
  .indent-clear-md {
    margin-right: 0;
    margin-left: 0; }
  .container {
    max-width: unset; }
  .subcenter {
    margin-top: unset !important; }
  .d-none-lg-down {
    display: none !important; } }

@media (max-width: 768px) {
  .widget {
    width: 90%; } }

.navbar-brand {
  margin-left: -40px; }

.navbar-light .navbar-toggler {
  background-color: #999999;
  cursor: pointer; }

.selecTXT {
  text-transform: none; }

.action-button {
  min-width: 0; }

.action-popup {
  width: 100%; }

button[disabled] {
  background-color: #999999 !important;
  pointer-events: none; }

a[disabled] {
  color: #999999 !important;
  pointer-events: none; }

.collapsible {
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: 1px solid grey;
  font-size: 15px; }
  .collapsible-subsection {
    cursor: pointer;
    width: 97%;
    padding: 0;
    font-weight: bold; }
    .collapsible-subsection-content {
      padding: 0 18px;
      display: none;
      overflow: hidden;
      background-color: white; }
  .collapsible-content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: white;
    border: 1px solid grey; }

.w-48 {
  width: 48% !important; }

.w-60 {
  width: 60% !important; }

.dataSourceFTPLabel {
  display: inline-block;
  float: left;
  clear: left;
  text-align: right; }

.dataSourceFTPInput {
  display: inline-block;
  float: left; }

.custom-file-label.custom-file-label-button-left::after {
  display: none !important;
  content: none !important; }

.custom-file-label.custom-file-label-button-left {
  text-transform: none;
  font-weight: normal;
  justify-content: flex-end; }

.custom-file-label.custom-file-label-button-left::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: 2.25rem;
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  content: "Browse...";
  background-color: #e9ecef;
  border-right: 1px solid #ced4da;
  border-radius: 0.25rem 0 0 0.25rem;
  text-transform: none;
  font-weight: normal; }

/* ***************************
    Imports
   *************************** */
/* *************************
   2. MIXINS
   ************************ */
#campaignInstancesGrid .k-grouping-row td {
  background-color: #999999 !important;
  border: 1px solid black !important; }
  #campaignInstancesGrid .k-grouping-row td .k-icon.k-i-collapse {
    color: white; }
  #campaignInstancesGrid .k-grouping-row td .k-icon.k-i-expand {
    color: white; }
  #campaignInstancesGrid .k-grouping-row td .k-i-collapse:before {
    content: "\e015";
    font-size: 32px; }
  #campaignInstancesGrid .k-grouping-row td .k-i-expand:before {
    content: "\e014";
    font-size: 32px; }
  #campaignInstancesGrid .k-grouping-row td .k-reset a {
    position: absolute;
    right: 0px;
    width: 32px;
    height: 32px;
    margin-bottom: 5px; }

#campaignInstancesGrid .k-group-cell {
  display: none; }

#campaignInstancesGrid .k-toolbar::before {
  height: unset; }

#campaignInstancesDatePickers .k-picker-wrap.k-state-disabled input {
  background-color: lightgray !important; }

#campaignInstancesDatePickers .k-tooltip-validation.k-invalid-msg {
  border-color: transparent;
  background-color: transparent;
  color: red;
  display: block; }
  #campaignInstancesDatePickers .k-tooltip-validation.k-invalid-msg .k-i-warning:before {
    color: red; }

#campaignInstancesGrid .k-widget.k-dropdown {
  min-width: 175px; }

#campaignsGrid .k-grouping-row td {
  background-color: #999999 !important;
  border: 1px solid black !important; }
  #campaignsGrid .k-grouping-row td .k-icon.k-i-collapse {
    color: #ffffff; }
  #campaignsGrid .k-grouping-row td .k-icon.k-i-expand {
    color: #ffffff; }
  #campaignsGrid .k-grouping-row td .k-i-collapse:before {
    content: "\e015";
    font-size: 32px; }
  #campaignsGrid .k-grouping-row td .k-i-expand:before {
    content: "\e014";
    font-size: 32px; }
  #campaignsGrid .k-grouping-row td .k-reset a {
    position: absolute;
    right: 0px;
    width: 32px;
    height: 32px;
    margin-bottom: 5px; }

#campaignsGrid .k-group-cell {
  display: none; }

#campaignsGrid .k-group-col {
  display: none; }

#campaignsGrid .k-grid-content {
  overflow-y: hidden; }

#campaignsGrid .k-grid-header {
  padding-right: 0px !important;
  overflow-x: hidden; }

#addEditUser .km-switch {
  width: 8em !important; }

#addEditUser .km-switch-background {
  background-position: 0em 4em !important;
  width: 8em; }

#addEditUser .km-switch-label-on {
  left: -400%; }

#addEditUser .km-switch-label-on,
#addEditUser .km-switch-label-off {
  white-space: nowrap; }

#addEditUser .km-switch-label-off {
  left: 25px; }

#addEditUser .km-switch-label-on {
  right: 20px; }

#outboundCallStatisticsNumbers {
  border-right: 1px solid #999999; }
  @media (max-width: 992px) {
    #outboundCallStatisticsNumbers {
      border-right: none;
      padding-bottom: 15px;
      margin-bottom: 15px;
      border-bottom: 1px solid #999999; } }
  #outboundCallStatisticsNumbers #totalCalls {
    margin-top: 60px; }
    @media (max-width: 992px) {
      #outboundCallStatisticsNumbers #totalCalls {
        margin-top: 0; } }

#callStatisticsCountChart {
  border-right: 1px solid #999999; }
  @media (max-width: 992px) {
    #callStatisticsCountChart {
      border-right: none;
      padding-bottom: 15px;
      margin-bottom: 15px;
      border-bottom: 1px solid #999999; } }
  #callStatisticsCountChart #callStatisticsTotalCount {
    margin-top: 60px; }
    @media (max-width: 992px) {
      #callStatisticsCountChart #callStatisticsTotalCount {
        margin-top: 0; } }

#ivrLanguageCountChart {
  border-right: 1px solid #999999; }
  @media (max-width: 992px) {
    #ivrLanguageCountChart {
      border-right: none;
      padding-bottom: 15px;
      margin-bottom: 15px;
      border-bottom: 1px solid #999999; } }
  #ivrLanguageCountChart #ivrLanguageTotalCount {
    margin-top: 60px; }
    @media (max-width: 992px) {
      #ivrLanguageCountChart #ivrLanguageTotalCount {
        margin-top: 0; } }

@media (max-width: 992px) {
  #sideNavContentWidget.modal-dialog {
    width: 100%;
    max-width: none;
    margin: 30px auto; }
  #manageDashboard.modal-dialog {
    width: 90%;
    max-width: none;
    margin: 30px auto; } }

/* Survey Widget */
#surveyWidget ul {
  padding-left: 0; }

#surveyWidget .manual-legend-item {
  line-height: 12px; }

#surveyTabStrip {
  background-color: transparent;
  box-shadow: none;
  border-style: none; }
  #surveyTabStrip .k-content {
    padding: 0em; }
    #surveyTabStrip .k-content.k-state-active.truncate-nowidth {
      padding: 5px; }
  #surveyTabStrip .k-tabstrip-items {
    padding: 0em;
    text-align: center; }
    #surveyTabStrip .k-tabstrip-items .k-tabstrip-items .k-loading.k-complete {
      border: none; }
    #surveyTabStrip .k-tabstrip-items .k-link {
      padding: 2px; }
    #surveyTabStrip .k-tabstrip-items .k-item.k-state-default {
      border-right: 1px solid #cccccc;
      cursor: pointer;
      font-weight: bold;
      margin-right: 0; }
    #surveyTabStrip .k-tabstrip-items .k-item {
      border: none;
      border-right: 1px solid #cccccc; }
      #surveyTabStrip .k-tabstrip-items .k-item * {
        border: none;
        box-sizing: border-box !important; }
  #surveyTabStrip .k-state-active {
    background-color: #f2f2f2; }
    #surveyTabStrip .k-state-active .k-link {
      color: #000000; }

#surveyChart {
  position: relative;
  top: -20px;
  left: -15px; }

#surveyResponses {
  position: relative;
  top: -40px; }

.manual-legend-item {
  font-size: 0.875rem;
  font-family: "Open Sans";
  margin: 2px; }

.manual-legend-marker {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px; }

.truncate-nowidth {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

/* System Status Widget */
#systemEventList {
  border: none; }

/* Grids */
.k-header, .k-toolbar {
  background-color: #336666;
  /*padding: $spacer;*/ }

.report_grid .k-toolbar::before {
  height: unset; }

.k-grid {
  border: none !important; }
  .k-grid table {
    font-size: 0.875rem; }

.custom-k-grid:not(.border-top-0) {
  border-top: 1px solid lightgray !important; }

.custom-k-grid:not(.border-left-0) {
  border-left: 1px solid lightgray !important; }

.custom-k-grid:not(.border-right-0) {
  border-right: 1px solid lightgray !important; }

.custom-k-grid:not(.border-bottom-0) {
  border-bottom: 1px solid lightgray !important; }

#docManagerDocsTable table tbody tr:hover {
  background: none; }

.survey-response-grid {
  /* To override border none from .k-grid */
  border-color: #e6e6e6 !important;
  border-style: solid !important;
  border-width: 1px 1px 0 1px !important; }
  .survey-response-grid .k-grid-header {
    padding: 0 !important; }
  .survey-response-grid .k-grid-content {
    overflow-y: visible; }

.k-widget .row, .k-widget .row > * {
  box-sizing: border-box !important; }

.k-grid-toolbar {
  padding: 10px !important;
  box-sizing: border-box;
  overflow-x: hidden; }
  .k-grid-toolbar input, .k-grid-toolbar button {
    min-width: 100px; }

.k-grid-content {
  min-height: 150px; }

/* Calendar / Datepicker / Timepicker / Other inputs */
.k-font-icon, .k-font-icon.k-icon, .k-font-icon.k-tool-icon, .k-icon, .k-icon:not(.no-data) {
  color: #444444; }

.color-black .k-icon {
  color: #000000; }

.k-calendar .k-content .k-link, .k-calendar .k-content .k-link th {
  text-align: center; }

.k-calendar .k-header {
  background-color: #339999; }
  .k-calendar .k-header .k-state-hover {
    background-color: #336666; }

.k-timepicker.k-header {
  background-color: transparent; }

.dialog-button-bar {
  background-color: #fafafa;
  border-top: 1px solid #cccccc; }
  .dialog-button-bar .k-button {
    text-transform: uppercase;
    font-size: 0.875rem; }

.k-timepicker .k-input {
  background-color: #ffffff; }

.k-picker-wrap.k-state-default {
  border-color: #c5c5c5; }

.k-select {
  background-color: #f2f2f2;
  border-left: 1px solid #c5c5c5; }

/*  Office Holidays, lifted from the previous version of portal and sassified */
@media (max-width: 1024px) {
  #holidayScheduler .k-nav-today, #holidayScheduler .k-nav-prev, #holidayScheduler .k-nav-next {
    display: none; } }

#holidayScheduler .k-i-arrow-e {
  /*something is stepping in and changing the offset to a different (UP) glyph instead of RIGHT glyph*/
  background-position: -16px -16px !important; }

#holidayScheduler .k-scheduler-toolbar {
  background-color: #009eaa !important; }

#holidayScheduler button {
  min-width: 20px;
  background: none; }

#holidayScheduler .agenda-event-button {
  font-size: medium !important;
  margin-top: 2px;
  margin-right: 4px;
  background-color: #339999; }

#holidayScheduler table table .k-state-selected > .k-link {
  text-shadow: none !important; }

#holidayScheduler .add-holiday-btn:hover {
  cursor: pointer; }

#holidayScheduler .add-holiday-btn {
  position: absolute;
  z-index: 1;
  margin-left: 24em;
  margin-top: 14px; }
  @media (max-width: 1024px) {
    #holidayScheduler .add-holiday-btn {
      margin-left: 10em; } }

#holidayScheduler .add-holiday-ul {
  position: relative;
  z-index: 3; }

#holidayScheduler .k-scheduler-toolbar .k-nav-current {
  color: white;
  text-decoration: none !important; }

#holidayScheduler .k-scheduler-toolbar .k-nav-current:hover {
  color: #f2f2f2 !important; }

#holidayScheduler .k-scheduler-monthview .k-scheduler-table td {
  height: 6em !important; }

#holidayScheduler tr > td > .k-task .k-event-delete {
  /* Hide schedular hover 'delete' X to force Edit+Delete */
  display: none; }

#holidayScheduler table table .k-link {
  cursor: default; }

#holidayScheduler .k-scheduler-toolbar > ul li:first-child, #holidayScheduler #holidayScheduler .k-scheduler-toolbar > ul li:first-child .k-link, #holidayScheduler #holidayScheduler .k-scheduler-toolbar > ul.k-scheduler-views li:first-child + li, #holidayScheduler #holidayScheduler .k-scheduler-toolbar > ul.k-scheduler-views li:first-child + li .k-link {
  border-radius: 0px 0px; }

#holidayScheduler .k-view-month.k-state-selected, #holidayScheduler .k-view-list.k-state-selected {
  color: #cccccc !important;
  text-decoration: underline !important; }

#holidayScheduler .k-icon {
  color: inherit; }

#holidayScheduler .k-nav-next, #holidayScheduler .k-nav-prev {
  height: 40px !important;
  line-height: 0px; }

#holidayScheduler .k-view-month:hover, #holidayScheduler .k-view-list:hover, #holidayScheduler .k-icon:hover, #holidayScheduler .k-nav-today:hover, #holidayScheduler .k-nav.current:hover, #holidayScheduler .k-nav-next:hover, #holidayScheduler .k-nav-prev:hover {
  color: #dbdbdb !important; }

#holidayScheduler .k-scheduler-content {
  height: auto !important;
  overflow: visible; }

#holidayScheduler .k-scheduler-monthview .k-scheduler-content .k-scheduler-table {
  height: auto; }

#holidayScheduler #addHolidayButton {
  text-decoration: none; }

#holidayScheduler #addHolidayButton:hover {
  text-decoration: none;
  color: #dbdbdb; }

#holidayScheduler table > tbody > tr:nth-child(2) > td > div > div.k-event.k-state-selected > div > div {
  color: #ffffff; }

#holidayScheduler table > tbody > tr:nth-child(2) > td > div > div.k-event.k-state-selected > div > div:hover {
  color: #f2f2f2; }

#holidayScheduler table > tbody > tr:nth-child(2) > td > div > table > tr.k-state-selected {
  color: #ffffff; }

#holidayScheduler table > tbody > tr:nth-child(2) > td > div > table > tr.k-state-selected:hover {
  color: #f2f2f2; }

div.k-animation-container > div > div > div.k-header.k-hstack > a.k-nav-fast.k-button.k-flat.k-flex {
  color: #ffffff; }

div.k-animation-container > div > div > div.k-header.k-hstack > a.k-nav-fast.k-button.k-flat.k-flex:hover {
  color: #cccccc; }

.k-edit-form-container > .k-edit-buttons > button {
  min-width: 120px; }

.k-edit-form-container > .k-edit-buttons > .k-scheduler-delete {
  background-color: #cc0000; }

#timeValidator #end-error {
  visibility: hidden !important;
  display: none !important;
  height: 0px !important; }

/* Windows & Dialogs (Global) */
.k-window {
  z-index: 200100 !important;
  border: 1px solid #999999;
  border-radius: 0; }

div.k-window-content {
  overflow: visible;
  padding: 0; }

.k-window-action .k-icon {
  color: #ffffff; }

.k-window-titlebar {
  font-size: 1rem;
  border: none;
  border-radius: 0; }

.k-grid-toolbar {
  padding: 10px !important;
  box-sizing: border-box;
  font-size: 0.875rem;
  overflow-x: hidden; }
  .k-grid-toolbar input, .k-grid-toolbar button {
    min-width: 100px; }

/* Misc. Controls */
.k-dropdown {
  min-width: 125px; }

.k-picker-wrap .k-input {
  padding: 0.2rem; }

.k-picker-wrap.k-state-default > .k-select {
  /*background-color: $gray-lighter;*/ }

@media (max-width: 1024px) {
  .kendo-picker-responsive {
    width: 120px; } }

.k-top-scroll {
  overflow-y: hidden;
  overflow-x: scroll; }

.k-top-scroll > div {
  height: 1px; }

#departmentTree div.k-top, #departmentTree div.k-mid, #departmentTree div.k-bot {
  border-bottom: 1px dashed #cccccc;
  border-left: 1px dashed #cccccc; }

#departmentTree .k-state-selected {
  background-color: #D7F2EB; }

.k-callout-e {
  border-left-width: 7px; }

.k-input.is-invalid {
  background-color: #ffcccc; }

.k-listbox-toolbar .k-button {
  color: #ffffff;
  background-color: #339999; }

.k-listbox-toolbar .k-button.k-state-disabled {
  color: #ffffff;
  background-color: #999999; }

.k-listbox-toolbar .k-icon {
  color: #ffffff; }

#manageDashboard .k-listbox {
  height: 525px; }
  #manageDashboard .k-listbox .k-list > .k-item.k-state-highlight,
  #manageDashboard .k-listbox .k-list > .k-item.k-state-selected,
  #manageDashboard .k-listbox .k-list > .k-item.k-state-selected.k-state-hover,
  #manageDashboard .k-listbox .k-list > .k-item.k-state-selected.k-state-focused,
  #manageDashboard .k-listbox .k-list > .k-item.k-state-hover,
  #manageDashboard .k-listbox .k-list > .k-item.k-state-focused,
  #manageDashboard .k-listbox .k-list > .k-item:hover,
  #manageDashboard .k-listbox .k-list > .k-item:focus {
    color: #444444;
    background-color: #ebebeb;
    border-color: #ebebeb; }

#manageDashboard #activeWidgetsColumn .k-listbox {
  width: 390px; }
  @media (max-width: 768px) {
    #manageDashboard #activeWidgetsColumn .k-listbox {
      width: 340px; } }

#manageDashboard #inactiveWidgetsColumn .k-listbox {
  width: 350px; }
  @media (max-width: 768px) {
    #manageDashboard #inactiveWidgetsColumn .k-listbox {
      width: 300px; } }

#manageDashboard .custom-text-truncate {
  text-overflow: clip;
  overflow: hidden;
  white-space: nowrap; }

#manageDashboard .dashboardText {
  height: 65px;
  overflow-y: hidden; }

.upcoming-countdown-box {
  padding: 3px 0px 0px 0px;
  background: #cc6699;
  height: 36px;
  border-radius: 18px;
  color: white;
  font-size: 1.125rem;
  text-align: center; }

.empty-upcoming-countdown-box {
  margin-top: 20px;
  background: #cccccc;
  padding: 10px 40px;
  color: white;
  height: 100px;
  border-radius: 80px;
  font-size: 1.125rem;
  text-align: center; }

.upcoming-countdown {
  font-weight: bold;
  font-size: 1rem; }

.empty-upcoming-countdown {
  font-weight: bold;
  font-size: 2.25rem; }

.contener_general {
  -webkit-animation: animball_two 1s infinite;
  -moz-animation: animball_two 1s infinite;
  -ms-animation: animball_two 1s infinite;
  animation: animball_two 1s infinite;
  width: 44px;
  height: 44px; }

.contener_mixte {
  width: 44px;
  height: 44px;
  position: absolute; }

.ballcolor {
  width: 20px;
  height: 20px;
  border-radius: 50%; }

.ball_1, .ball_2, .ball_3, .ball_4 {
  position: absolute;
  -webkit-animation: animball_one 1.5s infinite ease;
  -moz-animation: animball_one 1.5s infinite ease;
  -ms-animation: animball_one 1.5s infinite ease;
  animation: animball_one 1.5s infinite ease; }

.ball_1 {
  background-color: #009eaa;
  top: 0;
  left: 0; }

.ball_2 {
  background-color: #48cfad;
  top: 0;
  left: 24px; }

.ball_3 {
  background-color: #8cc152;
  top: 24px;
  left: 0; }

.ball_4 {
  background-color: #888888;
  top: 24px;
  left: 24px; }

@-webkit-keyframes animball_one {
  0% {
    position: absolute; }
  50% {
    top: 12px;
    left: 12px;
    position: absolute;
    opacity: 0.5; }
  100% {
    position: absolute; } }

@-moz-keyframes animball_one {
  0% {
    position: absolute; }
  50% {
    top: 12px;
    left: 12px;
    position: absolute;
    opacity: 0.5; }
  100% {
    position: absolute; } }

@-ms-keyframes animball_one {
  0% {
    position: absolute; }
  50% {
    top: 12px;
    left: 12px;
    position: absolute;
    opacity: 0.5; }
  100% {
    position: absolute; } }

@keyframes animball_one {
  0% {
    position: absolute; }
  50% {
    top: 12px;
    left: 12px;
    position: absolute;
    opacity: 0.5; }
  100% {
    position: absolute; } }

@-webkit-keyframes animball_two {
  0% {
    -webkit-transform: rotate(0deg) scale(1); }
  50% {
    -webkit-transform: rotate(360deg) scale(1.3); }
  100% {
    -webkit-transform: rotate(720deg) scale(1); } }

@-moz-keyframes animball_two {
  0% {
    -moz-transform: rotate(0deg) scale(1); }
  50% {
    -moz-transform: rotate(360deg) scale(1.3); }
  100% {
    -moz-transform: rotate(720deg) scale(1); } }

@-ms-keyframes animball_two {
  0% {
    -ms-transform: rotate(0deg) scale(1); }
  50% {
    -ms-transform: rotate(360deg) scale(1.3); }
  100% {
    -ms-transform: rotate(720deg) scale(1); } }

@keyframes animball_two {
  0% {
    transform: rotate(0deg) scale(1); }
  50% {
    transform: rotate(360deg) scale(1.3); }
  100% {
    transform: rotate(720deg) scale(1); } }

/* limited to the builder center right now. */
/* Ribbon styles */
.ribbon-item {
  width: 80px;
  line-height: 1.2rem; }

.ribbon-item-enabled {
  color: #ffffff; }

.ribbon-item-enabled:hover {
  cursor: pointer; }

.ribbon-item-disabled {
  color: #cccccc; }

.ribbon-item-disabled:hover {
  cursor: default; }

/* Tree styles */
.tree-menu label {
  margin-bottom: 0; }

.tree-row {
  border-bottom: 1px dashed #cccccc;
  border-left: 1px dashed #cccccc; }

.tree-row.selected {
  background-color: #D7F2EB; }

.tree-row-selected {
  background-color: #D7F2EB; }

.tree-row-selected > .k-state-hover, .k-state-focused {
  background-color: inherit !important; }

.tree-menu {
  border-top: 3px solid #999999; }

.tree-menu-box {
  border: 3px solid; }

.tree-menu-lvl2 {
  background-color: #d7d7d7; }

.tree-menu-lvl3 {
  background-color: #f2f2f2; }

/* Inactive */
.inactive {
  color: #cccccc; }

.tree-menu .inactive {
  color: #999999; }

.inactive * {
  border-color: #cccccc !important; }

.tree-message {
  background-color: #3399FF;
  color: #ffffff; }

/* Tree icons */
.tree-basic {
  color: #3399FF; }

.inactive .tree-basic {
  color: #B8DAFF; }

.tree-icon-disabled {
  color: #cccccc; }

.tree-chain {
  color: #00CC33; }

.tree-doc {
  color: #ff9900; }

.tree-main {
  color: #000000; }

.tree-transfer {
  color: #FF6633; }

.tree-folder {
  color: #CC9966;
  text-shadow: -1px 0 #FFF, 0 1px #FFF, 1px 0 #FFF, 0 -1px #FFF; }

.tree-warning {
  color: #ff0000; }

.tree-delete {
  color: #cc3333; }

.tree-edit {
  color: #339999; }

.tree-copy {
  color: #999999; }

.details-prompt-edit:hover {
  cursor: pointer; }

/* Specific icon styles */
/* lg */
.icon-container_lg {
  text-align: center;
  height: 50px;
  margin-right: 5px; }

.icon-container_lg_root {
  height: 50px;
  margin-right: 5px; }

.menu-icon_lg {
  position: relative;
  top: -25px;
  left: 8px; }

.menu-icon_lg i {
  font-size: 1.6rem; }

.transfer-icon-phone_lg {
  position: relative;
  left: -13px;
  top: 5px;
  font-size: 2.5rem; }

.chain-icon-chain_lg {
  position: relative;
  left: 0px;
  top: 5px;
  font-size: 2.5rem; }

.transfer-icon-arrow_lg {
  position: relative;
  top: -26px;
  left: 11px;
  font-size: 1.4rem; }

/* md */
.transfer-icon-arrow_md {
  position: relative;
  top: -5px;
  left: -5px;
  font-size: 1.45rem; }

/* sm */
.expand-container_sm {
  text-align: center;
  width: 22px;
  margin-right: 5px; }

.icon-container_sm {
  text-align: center;
  width: 26px;
  height: 27px;
  margin-right: 5px; }

.icon-container_sm i {
  padding: 2px 0 0 1px;
  font-size: 1.5rem; }

.icon-container_sm i.fa-times {
  margin-top: -4px;
  font-size: 1.9rem; }

.icon-inline_sm {
  font-size: 1.4rem;
  padding: 2px 0 0 2px; }

.transfer-icon-phone_sm {
  position: relative;
  left: -8px; }

.transfer-icon-arrow_sm {
  position: relative;
  top: -32px;
  left: 4px; }

.transfer-icon-arrow_sm i {
  font-size: 0.7rem; }

.menu-icon_sm {
  position: relative;
  top: -21px;
  left: 4px; }

.warning-icon_sm {
  position: relative;
  top: -21px;
  left: 4px; }

.menu-icon_sm i, .warning-icon_sm i {
  font-size: 0.9rem; }

/* xs */
.icon-inline_xs {
  font-size: 1rem;
  height: 20px;
  width: 20px;
  padding-top: 3px; }

.transfer-icon-phone_xs {
  position: relative;
  top: -7px;
  left: -5px;
  font-size: 0.9rem; }

.transfer-icon-arrow_xs {
  position: relative;
  top: -31px;
  left: 9px;
  font-size: 0.5rem; }

.blinking {
  animation: blinkingText 1.5s infinite; }

@keyframes blinkingText {
  0% {
    opacity: inherit; }
  40% {
    opacity: 0.7; }
  60% {
    opacity: 0.7; }
  100% {
    opacity: inherit; } }

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */ }

.insert-before {
  margin-top: 48.4px; }

.insert-after {
  margin-bottom: 48.4px; }

.insert-before::before {
  font-family: WebComponentsIcons;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  content: '';
  width: 100%;
  height: 48.4px;
  background: #ffffeb;
  position: relative;
  top: 0px;
  border: 1px dashed #cccccc;
  border-top: none;
  margin-bottom: -5px; }

.insert-after::after {
  font-family: WebComponentsIcons;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  content: '';
  width: 100%;
  height: 48.4px;
  background: #ffffeb;
  position: relative;
  bottom: 0px;
  border: 1px dashed #cccccc;
  border-top: none;
  margin-bottom: -5px; }

.insert-within div:first-child, .insert-before div:first-child, .insert-after div:first-child {
  font-weight: bold; }

.insert-within .k-group li div, .insert-before .k-group li div, .insert-after .k-group li div {
  font-weight: unset; }

.k-drag-status {
  font-size: 2.0em;
  color: white !important;
  opacity: 1.0; }

.k-drag-clue div:last-child {
  color: white;
  font-size: 1.2em !important; }

.k-drag-clue {
  opacity: 0.7;
  display: flex;
  align-items: center; }

.k-top:not(.tree-row-selected):hover, .k-bot:not(.tree-row-selected):hover, .k-mid:not(.tree-row-selected):hover {
  background-color: #ebebeb; }

ul.k-group > li.k-item > div:first-child {
  display: flex;
  flex-direction: row;
  align-items: center; }

ul.k-group > li.k-item > div:first-child > span:not(.k-icon) {
  width: 100% !important;
  display: flex; }

ul.k-group > li.k-item > div:first-child > span:not(.k-icon) > div:last-child {
  display: flex; }

#departmentTree .k-in {
  margin-left: unset;
  padding-left: unset;
  padding-right: unset; }

.tree-row-warning {
  text-align: left;
  min-width: 350px; }

.tree-row-description {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; }

.tree-row-remaining {
  min-width: 85px;
  overflow: hidden; }

.tree-row-inactive {
  opacity: .5; }

.node-inactive {
  color: silver; }

@media (max-width: 1200px) {
  .tree-row-warning {
    text-align: right !important; }
  .tree-row-remaining {
    display: none !important; } }

@media (max-width: 992px) {
  div[data-view$="builderCenter/ribbon"] > div > div:last-child {
    display: none !important; }
  div[data-view$="builderCenter/ribbon"] > div > div:nth-child(3) {
    border-right: 1px solid #999999; }
  div[data-bind$="builderCenter/ribbon'"], div[data-bind$="builderCenter/ribbon'"] + div {
    margin-left: unset !important;
    margin-right: unset !important; }
  #departmentTree *:not([class*="icon-container"]):not([class*="fa-"]), div[data-view$="builderCenter/details"] *:not([class*="icon-container"]):not([class*="fa-"]) {
    font-size: 0.8rem; }
  .icon-container_lg {
    transform: scale(0.6);
    transform-origin: center center;
    height: 30px !important; }
  .tree-row-warning-callout {
    display: none !important; } }

@media (max-width: 768px) {
  .tree-row-warning {
    min-width: 260px !important; } }

.modalHost {
  top: 35%;
  left: 50%;
  position: fixed;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transition: opacity 0.1s linear;
  -moz-transition: opacity 0.1s linear;
  -o-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear; }

.messageBox {
  min-width: 300px;
  width: 450px; }
