/*!
 * Copyright (c) 2020. FixGroup B.V.
 */
/*!
 * Copyright (c) 2020. FixGroup B.V.
 */
.blue__main {
  color: #049ee2 !important; }

#customer_service_panel ul.categories {
  border-top: 1px solid #E9EBEC;
  border-bottom: 1px solid #E9EBEC; }

.panel {
  position: fixed;
  display: flex;
  flex-direction: column;
  right: 0;
  left: auto;
  width: 335px;
  max-width: calc(100% - 4rem);
  height: calc(100vh - 115px);
  background-color: #ffffff;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
  animation: animate-right-to-left .15s ease-out forwards;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  top: 115px;
  z-index: 1030; }
  @media (max-width: 359px) {
    .panel {
      width: 100%;
      max-width: 100%;
      max-height: 100vh !important; } }
  @media (max-width: 991px) {
    .panel {
      left: 0;
      right: auto;
      top: 95px;
      height: calc(100vh - 95px);
      animation: animate-left-to-right .15s ease-out forwards; }
      .panel.panel--closed {
        animation: animate-left-to-right--close .15s ease-out forwards; } }
  .panel--left {
    left: 0;
    right: auto;
    animation: animate-left-to-right .15s ease-out forwards; }
    .panel--left.panel--closed {
      animation: animate-left-to-right--close .15s ease-out forwards; }
  .panel--closed {
    animation: animate-right-to-left--close .15s ease-out forwards;
    box-shadow: none; }
  .panel__header {
    position: relative;
    height: 54px;
    min-height: 54px;
    background-color: #edf5fc;
    display: flex;
    align-items: center;
    color: #049ee2;
    border-bottom: 1px solid #CFDFEF; }
    .panel__header svg {
      width: 51px;
      height: 15px;
      cursor: pointer;
      height: 100%;
      padding: 16px 16px; }
    .panel__header h4 {
      color: inherit;
      font-size: 16px;
      font-family: 'Open Sans';
      margin: 0; }
  .panel__content {
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden; }
    @media (max-width: 359px) {
      .panel__content {
        padding: 10px; } }
    .panel__content input {
      width: 100%;
      margin-bottom: 1em; }
    .panel__content label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold; }
    .panel__content button {
      margin-top: 15px;
      width: 100%; }
    .panel__content form#faq {
      margin-bottom: 2em; }
  .panel__footer {
    margin-top: auto;
    width: 100%;
    padding: 20px;
    align-self: flex-end;
    border-top: 1px solid #E9EBEC;
    background-color: #ffffff; }
    .panel__footer a {
      text-align: center;
      display: block; }
      .panel__footer a.button span {
        color: #fff; }
  .panel.panel-customer-service .back-button {
    color: #049ee2;
    align-items: center;
    display: flex;
    flex-direction: row;
    cursor: pointer; }
    .panel.panel-customer-service .back-button span {
      margin-left: 5px;
      color: inherit;
      font-weight: bold; }
  .panel.panel-customer-service ul.results {
    list-style: none;
    padding-left: 0;
    margin-top: 10px; }
    .panel.panel-customer-service ul.results li p {
      cursor: pointer; }
  .panel.panel-customer-service span.categories_title {
    margin-top: 15px;
    margin-bottom: 5px;
    display: block; }
  .panel.panel-customer-service ul.categories {
    margin: 0 -25px 0 -20px;
    list-style-type: none;
    padding-left: 0; }
    .panel.panel-customer-service ul.categories li {
      position: relative;
      padding: 15px 45px 15px 25px;
      cursor: pointer; }
      .panel.panel-customer-service ul.categories li:hover {
        background-color: #edf5fc; }
      .panel.panel-customer-service ul.categories li svg {
        height: 20px;
        width: 20px;
        margin-right: 10px; }
      .panel.panel-customer-service ul.categories li:after {
        position: absolute;
        top: calc(50% - 10px);
        right: 25px;
        display: inline-block;
        content: url('data:image/svg+xml; utf8, <svg height="15" width="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>'); }
  .panel.panel-customer-service ul.questions__list {
    margin: 30px -25px 45px -20px;
    list-style-type: none;
    padding-left: 0; }
    .panel.panel-customer-service ul.questions__list > li {
      position: relative;
      padding: 15px 45px 15px 25px;
      cursor: pointer; }
      .panel.panel-customer-service ul.questions__list > li:not(.collapsed):after {
        transform: rotate(90deg); }
      .panel.panel-customer-service ul.questions__list > li:not(.collapsed), .panel.panel-customer-service ul.questions__list > li:hover {
        background-color: #edf5fc; }
      .panel.panel-customer-service ul.questions__list > li svg {
        height: 20px;
        width: 20px;
        margin-right: 10px; }
      .panel.panel-customer-service ul.questions__list > li:after {
        position: absolute;
        top: calc(50% - 10px);
        right: 25px;
        display: inline-block;
        content: url('data:image/svg+xml; utf8, <svg height="15" width="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>');
        transform: rotate(90deg);
        transition: all 0.2s ease-in-out; }
      .panel.panel-customer-service ul.questions__list > li + div {
        padding: 0 25px; }
    .panel.panel-customer-service ul.questions__list div {
      border-bottom: 1px solid #E9EBEC; }
      .panel.panel-customer-service ul.questions__list div p {
        font-size: 13px; }
  .panel.panel-customer-service .panel__content ul.categories p {
    margin: 0 25px 0 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E9EBEC; }
  .panel.panel-customer-service:not(#customer_service_panel) ul {
    margin-top: 0; }
    .panel.panel-customer-service:not(#customer_service_panel) ul li:not(.collapsed):after {
      transform: rotate(-90deg); }
  .panel.panel-customer-service .widget-title {
    font-weight: 600;
    margin-bottom: 0.5em;
    margin-top: 2em; }
  .panel.panel-customer-service .widget-content:first-of-type .widget-title {
    margin-top: 0; }
  .panel.panel-customer-service .widget-content ul {
    list-style: none;
    padding-left: 0; }
    .panel.panel-customer-service .widget-content ul li {
      margin-bottom: 4px; }
      .panel.panel-customer-service .widget-content ul li a {
        color: #0E1723; }
  .panel.panel-login p {
    margin-bottom: 10px; }
  .panel.panel-login .password-row {
    position: relative; }
    .panel.panel-login .password-row svg {
      color: #535E6D;
      position: absolute;
      right: 20px;
      height: 20px;
      width: 20px;
      bottom: calc(calc(50px / 2) - 15px);
      cursor: pointer; }
  .panel.panel-login .create-account__title {
    margin-top: 30px; }
  .panel.panel-login ul {
    padding-left: 0;
    margin-top: 20px; }
    .panel.panel-login ul li {
      list-style-type: none;
      font-size: 12px;
      margin-bottom: 5px; }
      .panel.panel-login ul li svg {
        color: #04B814;
        margin-bottom: 3px;
        margin-right: 1px; }
  .panel .panel_login_form label, .panel .panel_register_form label {
    font-size: 16px; }
  .panel .panel_login_form a, .panel .panel_register_form a {
    font-size: 13px; }
  .panel .panel_login_form .password-row label, .panel .panel_register_form .password-row label {
    display: inline-block; }
  .panel .panel_login_form .password-row a, .panel .panel_register_form .password-row a {
    float: right; }
  .panel .hidden {
    display: none; }

@keyframes animate-right-to-left {
  0% {
    transform: translateX(100%); }
  100% {
    transform: translateX(0); } }
@keyframes animate-left-to-right {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }
@keyframes animate-right-to-left--close {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(100%); } }
@keyframes animate-left-to-right--close {
  0% {
    transform: translateX(0%); }
  100% {
    transform: translateX(-100%); } }
@media (max-width: 991px) {
  .modal.panel-md {
    z-index: 1050; }

  .panel-md {
    position: fixed;
    display: flex;
    flex-direction: column;
    right: 0;
    left: auto;
    width: 335px;
    max-width: calc(100% - 4rem);
    height: calc(100vh - 115px);
    background-color: #ffffff;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
    animation: animate-right-to-left .15s ease-out forwards;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    top: 115px;
    z-index: 1030;
    border-radius: 0 !important; } }
  @media (max-width: 991px) and (max-width: 359px) {
    .panel-md {
      width: 100%;
      max-width: 100%;
      max-height: 100vh !important; } }
  @media (max-width: 991px) and (max-width: 991px) {
    .panel-md {
      left: 0;
      right: auto;
      top: 95px;
      height: calc(100vh - 95px);
      animation: animate-left-to-right .15s ease-out forwards; }
      .panel-md.panel--closed {
        animation: animate-left-to-right--close .15s ease-out forwards; } }
@media (max-width: 991px) {
    .panel-md--left {
      left: 0;
      right: auto;
      animation: animate-left-to-right .15s ease-out forwards; }
      .panel-md--left.panel--closed {
        animation: animate-left-to-right--close .15s ease-out forwards; }
    .panel-md--closed {
      animation: animate-right-to-left--close .15s ease-out forwards;
      box-shadow: none; }
    .panel-md__header {
      position: relative;
      height: 54px;
      min-height: 54px;
      background-color: #edf5fc;
      display: flex;
      align-items: center;
      color: #049ee2;
      border-bottom: 1px solid #CFDFEF; }
      .panel-md__header svg {
        width: 51px;
        height: 15px;
        cursor: pointer;
        height: 100%;
        padding: 16px 16px; }
      .panel-md__header h4 {
        color: inherit;
        font-size: 16px;
        font-family: 'Open Sans';
        margin: 0; }
    .panel-md__content {
      padding: 20px;
      overflow-y: auto;
      overflow-x: hidden; } }
    @media (max-width: 991px) and (max-width: 359px) {
      .panel-md__content {
        padding: 10px; } }
@media (max-width: 991px) {
      .panel-md__content input {
        width: 100%;
        margin-bottom: 1em; }
      .panel-md__content label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold; }
      .panel-md__content button {
        margin-top: 15px;
        width: 100%; }
      .panel-md__content form#faq {
        margin-bottom: 2em; }
    .panel-md__footer {
      margin-top: auto;
      width: 100%;
      padding: 20px;
      align-self: flex-end;
      border-top: 1px solid #E9EBEC;
      background-color: #ffffff; }
      .panel-md__footer a {
        text-align: center;
        display: block; }
        .panel-md__footer a.button span {
          color: #fff; }
    .panel-md .panel-content-md {
      overflow: auto; }
    .panel-md .modal-dialog {
      height: 100%;
      margin-top: 0; }
    .panel-md .modal-content {
      height: 100%;
      padding: 0;
      border-radius: 0; }
    .panel-md .modal-body {
      padding: 20px;
      overflow-y: scroll; } }
@media (max-width: 767px) {
  .panel-xs {
    position: fixed;
    display: flex;
    flex-direction: column;
    right: 0;
    left: auto;
    width: 335px;
    max-width: calc(100% - 4rem);
    height: calc(100vh - 115px);
    background-color: #ffffff;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
    animation: animate-right-to-left .15s ease-out forwards;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    top: 115px;
    z-index: 1030;
    border-radius: 0 !important; } }
  @media (max-width: 767px) and (max-width: 359px) {
    .panel-xs {
      width: 100%;
      max-width: 100%;
      max-height: 100vh !important; } }
  @media (max-width: 767px) and (max-width: 991px) {
    .panel-xs {
      left: 0;
      right: auto;
      top: 95px;
      height: calc(100vh - 95px);
      animation: animate-left-to-right .15s ease-out forwards; }
      .panel-xs.panel--closed {
        animation: animate-left-to-right--close .15s ease-out forwards; } }
@media (max-width: 767px) {
    .panel-xs--left {
      left: 0;
      right: auto;
      animation: animate-left-to-right .15s ease-out forwards; }
      .panel-xs--left.panel--closed {
        animation: animate-left-to-right--close .15s ease-out forwards; }
    .panel-xs--closed {
      animation: animate-right-to-left--close .15s ease-out forwards;
      box-shadow: none; }
    .panel-xs__header {
      position: relative;
      height: 54px;
      min-height: 54px;
      background-color: #edf5fc;
      display: flex;
      align-items: center;
      color: #049ee2;
      border-bottom: 1px solid #CFDFEF; }
      .panel-xs__header svg {
        width: 51px;
        height: 15px;
        cursor: pointer;
        height: 100%;
        padding: 16px 16px; }
      .panel-xs__header h4 {
        color: inherit;
        font-size: 16px;
        font-family: 'Open Sans';
        margin: 0; }
    .panel-xs__content {
      padding: 20px;
      overflow-y: auto;
      overflow-x: hidden; } }
    @media (max-width: 767px) and (max-width: 359px) {
      .panel-xs__content {
        padding: 10px; } }
@media (max-width: 767px) {
      .panel-xs__content input {
        width: 100%;
        margin-bottom: 1em; }
      .panel-xs__content label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold; }
      .panel-xs__content button {
        margin-top: 15px;
        width: 100%; }
      .panel-xs__content form#faq {
        margin-bottom: 2em; }
    .panel-xs__footer {
      margin-top: auto;
      width: 100%;
      padding: 20px;
      align-self: flex-end;
      border-top: 1px solid #E9EBEC;
      background-color: #ffffff; }
      .panel-xs__footer a {
        text-align: center;
        display: block; }
        .panel-xs__footer a.button span {
          color: #fff; }
    .panel-xs .panel-content-xs {
      overflow: auto; }
    .panel-xs .modal-dialog {
      height: 100%; }
    .panel-xs .modal-content {
      height: 100%; } }

/*# sourceMappingURL=panels.css.map */