/* Custom Stylesheet hash:16563805001562507733 dated 30 Sep, 2024 13:53:03+Europe/London */
/* Add custom CSS here */
.p-tooltip {
    position: absolute;
    background: #40364D;
    color: #fff;
    padding: 4px 10px;
    border-radius: 3px;
    max-width: 230px;
    margin-left: 15px;
    transform: translateY(-30%);
    opacity: 0;
    visibility: hidden;
    transition: 0.1s;
}

.p-tooltip:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-color: transparent;
    border-right-color: #40364D;
    border-width: 6px;
    margin-top: -6px;
}

td:hover > .p-tooltip {
  opacity: 1;
  visibility: visible;
}

.footer {
  padding: 0 1em 2em;
}

.footer .icon {
  margin-top: 2.2em;
  display: inline-block;
}

/* 'This is for Kayako Classic banner */ 
article .graybar--slim.kayako4 {
  background-color: #40364D !important;
  color: white !important;
  box-shadow: 0 0 0 rgba(64,54,77, 0.5);
  animation: pulse 2s 3;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(64,54,77, 0.5);
  }
  70% {
      -webkit-box-shadow: 0 0 0 13px rgba(64,54,77, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(64,54,77, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(64,54,77, 0.5);
    box-shadow: 0 0 0 0 rgba(64,54,77, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 13px rgba(64,54,77, 0);
      box-shadow: 0 0 0 13px rgba(64,54,77, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(64,54,77, 0);
      box-shadow: 0 0 0 0 rgba(64,54,77, 0);
  }
}

.info-bar {
  background: #2d3138;
  text-align: center;
  padding: 18px 10px;
    font-size: 16px;
    color: #fff;
}

.info-bar a{
  color: #f1703f;  
}

.close-info-bar {
      position: absolute;
    right: 20px;
    cursor: pointer;
}

.graybar--slim.kayakoClassic {
  background-color: #f0f0f0 !important;
  box-shadow: 0 0 0 rgba(64,54,77, 0.5);
}

.tweets {
  display: flex;
  margin: 0;
  list-style: none;
}

.tweets li {
  width: calc(33.33% - 10px);
  margin-right: 10px;
}

article pre {
  white-space: pre-wrap;
}

.planbar {
	display: flex;
	color: #2D3138;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(44, 48, 56, 0.09);
	border-radius: 3px;
	padding: 9px 15px;
	margin-bottom: 5px;
	font-size: 14px;
	align-items: center;
}

.planbar-title {
	text-transform: uppercase;
	color: #838D94;
	flex-grow: 1;
}

.planbar-note {
  display: flex;
  font-size: 13px;
  margin-bottom: 15px;
}

.planbar-plan-container {
	display: flex;
	align-items: center;
	margin-right: 18px;
}

.planbar-plan-container i {
	line-height: 11px;
	display: block;
	margin-right: 9px;
}

/* Used in placeholders article for small code samples. */
code.small { font-size: .90em;
}

/* Prevents article tags from displaying to customers. */
.js-tags { display:none;
}

.search--home {
  padding: 4em 2.5% .1em;
  background-color:white;
  border-bottom:none;
}

.kc-banner {
  background-color:#f0f0f0;
  margin-bottom: 4em !important;
}

.header-button {
    background-color: #F48C66;
}

.header-button:hover {
    background-color: #f1703f;
}
.header-button:active {
    background-color: #f1703f;
}

.test-container{
  width: 40%;
  text-align: center;
  margin:auto;
border: 1px solid #F0F0F0;
margin-top: 30px;
}
.accordion {
  background-color: white;
  color: #f1703f;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: 1px solid #F0F0F0;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}


.active, .accordion:hover {
  background-color: white; 
}

.test-ref{
  color: #f1703f;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.test-sign{
  float: right;
}

.test-header{
  margin: auto;
  margin-top: 20px;
  width: 40%;
  text-align: center;
  color: #2D3138;
}
html, .select, .drill-default {
	font-family: Source Sans Pro, sans-serif;
}
a, a:hover, a:focus, a:active, .u-visuallink, .u-visuallink:hover,
.heading--blue,
.fr-toolbar .fr-command.fr-btn.fr-active,
.fr-popup .fr-command.fr-btn.fr-active,
.fr-desktop .fr-command.fr-active:hover,
.fr-desktop .fr-command.fr-active:focus,
.fr-desktop .fr-command.fr-active.fr-selected,
.fr-popup .fr-colors-tabs .fr-colors-tab:hover,
.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab,
.tab__notCurrent a:hover {
	color: #f1703f;
}

.button--primary,
.button--primary:hover:enabled,
.button--primary:focus:enabled,
.button--primary:active:enabled,
.nav__menu a:hover, .nav__menu a:active, .dd__link:hover,
.fr-popup .fr-checkbox input:checked + span,
.fr-popup .fr-colors-tabs .fr-colors-tab[data-param1="background"]::after,
.fr-image-resizer .fr-handler,
.fr-image-progress-bar-layer > div.fr-loader span,
.autocomplete--field__item:hover, .autocomplete--field__item.is-selected {
	background-color: #f1703f;
}

.textfield:focus,
.search-wrapslim .inputaddon__field:focus,
.file-btn:focus, .file-btn.is-active, .dz-drag-hover {
	border-color: #f1703f;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 4px -1px #f1703f;
}

.button--primary:focus:enabled, .button--primary:active:enabled,
.select:focus, .drill-default:focus, .drill-default.drill-focus {
	box-shadow: 0 0 3px 0 #f1703f;
}

.tab > li,
.textfield.picker__input--active,
.textfield--heading:focus,
.pager__selected,
.tab__notCurrent:hover,
.picker__select--month:focus, .picker__select--year:focus,
.picker__day--highlighted, .picker__day--selected:hover,
.picker--focused .picker__day--selected, .picker__button--clear:focus,
.picker__button--close:focus,
.fr-popup .fr-input-line input[type="text"]:focus,
.fr-popup .fr-input-line textarea:focus,
.fr-popup .fr-checkbox input:checked + span,
.fr-popup .fr-checkbox input:focus + span,
.fr-image-resizer, .fr-image-upload-layer.fr-drop,
table td.fr-selected-cell, table th.fr-selected-cell,
.fr-table-resizer div,
.fr-popup .fr-table-size .fr-select-table-size > span.hover > span {
	border-color: #f1703f;
}

input[type="checkbox"].switch:focus + div {
	box-shadow: 0 0 .2em 1px #f1703f, 0 1px 1px hsla(0,0%,100%,.6);
}

.picker__day--today:before,
.picker__button--today:before {
	border-top-color: #f1703f;
}