/* Custom color theme properties */
:root {
  --f7-font-family: "Inter";

  --f7-swissdtx-denim-blue: #163973;
  --f7-swissdtx-dark-denim-blue: #21306b;
  --f7-swissdtx-off-blue: #2d4087;
  --f7-swissdtx-superlight-grey: #dbe1ef;
  --f7-swissdtx-grey-light: #dce1ee;
  --f7-swissdtx-blue-grey: #8392aa;
  --f7-swissdtx-light-blue-grey: #c5cedd;
  --f7-swissdtx-light-blue-grey-30: rgba(197,206,221,0.3);
  --f7-swissdtx-pale-grey: #f3f7ff;
  --f7-swissdtx-midnight: #020438;
  --f7-swissdtx-white: #FFFFFF;
  --f7-swissdtx-blue-active: #2A97FF;

  --f7-theme-color: #ffffff;
  --f7-theme-color-rgb: 255, 255, 255;
  --f7-theme-color-shade: #ebebeb;
  --f7-theme-color-tint: #ffffff;

  --f7-page-bg-color: #ffffff;

  --f7-navbar-height: 80px;

  /* Panel */
  --f7-panel-width: 100vw;

  /* Safe areas */
  --f7-safe-area-left: 40px;
  --f7-safe-area-right: 40px;
  --f7-safe-area-top: 20px;
  --f7-safe-area-bottom: 0px;
  --f7-safe-area-outer-left: 20px;
  --f7-safe-area-outer-right: 20px;

  /* block settings */
  --f7-block-padding-horizontal: 30px;
  --f7-block-padding-vertical: 16px;
  --f7-block-font-size: inherit;
  --f7-block-text-color: inherit;
  --f7-block-header-margin: 10px;
  --f7-block-footer-margin: 10px;
  --f7-block-header-font-size: 14px;
  --f7-block-footer-font-size: 14px;
  --f7-block-title-text-transform: none;
  --f7-block-title-white-space: nowrap;
  --f7-block-title-medium-text-transform: none;
  --f7-block-title-large-text-transform: none;
  --f7-block-inset-side-margin: 16px;
  --f7-block-title-medium-text-color: #000;
  --f7-block-title-large-text-color: #000;
  --f7-block-strong-bg-color: #fff;

  /* Navbar */
  --f7-navbar-title-text-align: center;
  --f7-navbar-title-font-size: 15px;
  --f7-navbar-title-font-weight: 300;
  --f7-navbar-text-color: white;
  --f7-navbar-height: 80px;
  --f7-navbar-hidden-transform: -102px;

  /* Progressbar */
  --f7-progressbar-height: 2px;
  --f7-progressbar-bg-color: rgba(255,255,255,0);

  /* Toolbar */
  --f7-toolbar-link-color: var(--f7-swissdtx-denim-blue);
  --f7-toolbar-bg-color-rgb: rgb(255,255,255);

  /* Context Menu */
  --f7-menu-bg-color: var(--f7-swissdtx-white);

  /* Dialogs */
  --f7-dialog-button-text-color: var(--f7-swissdtx-midnight);

  /* Lists */
  --f7-list-item-border-color: var(--f7-swissdtx-light-blue-grey);
  --f7-list-border-color: var(--f7-swissdtx-light-blue-grey);
  --f7-list-item-title-text-color: var(--f7-swissdtx-midnight);
}


#app {
  background:none;
}

.symbols-light {opacity: 0.6;}

.swiper-slide {height: auto;}

.hyphenate {hyphens: auto;}

/* Your app custom styles here */

/* Block big screen */
body {display: flex; justify-content: center; }
#app, .page { max-width: 500px; }

/* general */
.logo { width: 90%; }
.pull-left {float: left;}
.pull-right {float: right;}
.fullwidth {width: 100% !important;}
.clear {clear: both;}
.align-content-center {text-align: center;}

.header-spacing {padding-top: 120px;}
.header-spacing-small {padding-top: 70px;}
.header-spacing-none {padding-top: 0; margin-top: 0;}

.no-min-width {min-width: auto !important;}

.margin-top-none {margin-top: 0 !important}
.margin-top-half {margin-top: calc(var(--f7-typography-margin)/ 2) !important}
.margin-top-double {margin-top: calc(var(--f7-typography-margin)* 2) !important}
.margin-top-3x {margin-top: calc(var(--f7-typography-margin)* 3) !important}
.margin-top-large {margin-top: calc(var(--f7-typography-margin)* 4) !important}
.margin-top-hughe {margin-top: calc(var(--f7-typography-margin)* 6) !important}
.margin-top-55 {margin-top: 55px;}
.margin-bottom-none {margin-bottom: 0 !important}
.margin-bottom-half {margin-bottom: calc(var(--f7-typography-margin)/ 2) !important}
.margin-bottom-normal {margin-bottom: var(--f7-typography-margin) !important}
.padding-top-none {padding-top: 0 !important}
.padding-top-half {padding-top: calc(var(--f7-typography-margin) / 2) !important}
.padding-top-large {padding-top: calc(var(--f7-typography-margin)* 4) !important}
.padding-top-hughe {padding-top: calc(var(--f7-typography-margin)* 6) !important}
.padding-right-small {padding-right: 28px;}

.text-light {font-weight: 200}
.text-bold {font-weight: 600 !important;}
.text-copy {font-size: 18px; line-height: 1.33; }
.text-copy-small {font-size: 16px; line-height: 22px; }
.text-copy-very-small {font-size: 15px; line-height: 18px; font-weight: 500; }
.text-header {font-size: 40px; line-height: 1.14;}
.text-header-byline {font-size: 18px; line-height: 24px;}
.text-title {font-size: 32px; line-height: 1.14;}
.text-pagetitle {font-size: 39px; line-height: 1.14;}
.text-paneltitle {font-size: 22px; line-height: 1.14;}
.text-accordiontitle {font-size: 15px; line-height: 1.14; color: var(--f7-swissdtx-blue-grey); margin-bottom: 6px;}
.text-extrasmall {font-size: 14px;}
.text-style-light {font-weight: 300; font-size: 12px;}

.text-color-midnight {color: var(--f7-swissdtx-midnight) !important;}
.text-color-pale-grey {color: var(--f7-swissdtx-pale-grey) !important;}
.text-color-blue-grey {color: var(--f7-swissdtx-blue-grey) !important;}
.text-color-black {color: var(--f7-swissdtx-dark-denim-blue);}

.border-top {border-top: 1px solid rgba(255,255,255,0.3);}

.block-no-right-padding {padding-right: var(--f7-block-padding-horizontal);}
.block.no-padding-right {padding-right: 0;}

.seperator {display: block; border-bottom: 1px solid var(--f7-swissdtx-grey-light);}
.textlink {color: var(--f7-swissdtx-blue-active);}

/* Error */
.error {
  -webkit-animation-name: shake;
  -webkit-animation-duration: 0.5s;
  -webkit-transform-origin:50% 50%;
  -webkit-animation-iteration-count: 2;
}

/* Language-Wheel  */
.languagescroller {-webkit-mask-image: linear-gradient(0deg, transparent 16px, white 166px);}
.languagescroller .element_container {height: 60vh; overflow: scroll; -webkit-mask-image: linear-gradient(0deg, white calc(100% - 166px), transparent calc(100% - 16px)); -ms-overflow-style: none; scrollbar-width: none;}
.languagescroller .element_container::-webkit-scrollbar {display: none;}
.languagescroller .element_container .element {font-weight: 600; font-size: 39px; line-height: 1.3; opacity: 0.6;}
.languagescroller .element_container .element.highlight {opacity: 1;}
a.btn_language_confirm.standard-button-large {position: relative; bottom: 40px; display: none;}

/* SwissDTx-Icons */
.swissdtx-icon {display: inline-block; width: 40px; height: 40px;}
.swissdtx-icon.center-block {display: block; margin: auto;}
.swissdtx-icon.icon-mainmenu {background-image: url('/assets/images/user-interface/ui-hamburger.svg');}
.swissdtx-icon.icon-notification {background-image: url('/assets/images/user-interface/icon-notification-outline.svg');}
.swissdtx-icon.icon-lock {background-image: url('/assets/images/user-interface/icon-lock.svg');}
.swissdtx-icon.icon-lock-white {background-image: url('/assets/images/user-interface/icon-lock-white.svg');}
.swissdtx-icon.icon-lock-grey {background-image: url('/assets/images/user-interface/icon-lock-grey.svg');}

.settings-icons {width: 40px; height: 40px;}
.settings-icon-profile {background-image: url('/assets/icons/menu/icon-profile.svg');}
.settings-icon-contacts {background-image: url('/assets/icons/menu/icon-contacts.svg');}
.settings-icon-brightness {background-image: url('/assets/icons/menu/icon-brightness.svg');}
.settings-icon-wearables {background-image: url('/assets/icons/menu/icon-wearables.svg');}
.settings-icon-key {background-image: url('/assets/icons/menu/icon-passwort.svg');}
.settings-icon-security {background-image: url('/assets/icons/menu/icon-security.svg');}
.settings-icon-question {background-image: url('/assets/icons/menu/icon-faq.svg');}
.settings-icon-scale {background-image: url('/assets/icons/menu/icon-legal.svg');}
.settings-icon-bell {background-image: url('/assets/icons/menu/icon-notification.svg');}
.settings-icon-clock {background-image: url('/assets/icons/menu/icon-clock-blue.svg'); background-size: 50px !important;}

/* Active Notification */
.notification-active .icon-notification {transform: rotate(-20deg);}
.notification-active .bubble {width: 8px; height: 8px; background-color: #fb0; border-radius: 50%; margin-top: -30px; margin-left: 30px; position: absolute;}

/*  Navbar */
.navbar .navbar-inner {flex-wrap: wrap;}
.navbar .navbar-inner .title {width: calc(100% - 140px);}
.navbar .navbar-progress {width: 100%; background-color: rgba(255,255,255,0.5); box-sizing: border-box; margin-left: 10px; margin-right: 18px; height: 1px;}
.navbar.navbar-hidden {transform: translate3d(0, var(--f7-navbar-hidden-transform),0)}
.navbar.exercise-navbar {background-image: url('/assets/skins/illustration-exercise-wave-connector.svg') !important; background-size: 100%; background-position: left bottom; background-repeat: no-repeat;}

.no-gradient {background-color: none !important; background: none !important;}

/* Special header variants */
.block.header {height: 250px; margin-top: 0; background-color: #765da1; background: linear-gradient(150deg, rgba(17,81,138,1) 1%, rgba(208,233,252,1) 49%));}
.block.block-next-button {text-align: right; position: relative; bottom: 0; width: 100%;}
.block.block-next-button .backarea {float: left; width: 140px; height: 80px;}
.stretched .block.block-next-button { position: absolute;}

/* Heading */
h3 {padding-top: 36px;}

/* AGB - Block */
.block-accept .wrap {background-color: var(--f7-swissdtx-pale-grey);border-radius: 8px; padding: 25px 15px;}
.block-accept a {color: var(--f7-swissdtx-blue-active);}
.block-accept .left {float: left; width: 20%;}
.block-accept .right {float: right; width: 75%;}

/* Avatar Block */
.block-avatar {min-height: 160px;}
.block-avatar .avatar {width: 138px; height:138px; display: inline-block; margin-top: 20px; margin-bottom: -90px; overflow: hidden;  position: relative;}
.block-avatar .avatar .imagewrap {width: 130px; height: 130px; border-radius: 50%; overflow: hidden; border: 4px solid white;}
.block-avatar .avatar img {width: 100%; min-height: 100%;}
.block-avatar .avatar .upload {position: absolute; bottom: 5px; right: 0px; width: 40px; height: 40px; border: 1px solid #D9D9D9; border-radius: 50%; background-color: #D9D9D9;}
.block-avatar .avatar .upload i {line-height: 40px;}
.block-avatar .avatar .upload input {position: absolute; top: 0; left: 0; height: 40px; width: 40px; visibility: hidden;}


  /* User Menu */
a.panel-pseudo-close {display: inline-block; width: 40px; height: 40px; background-image: url('/assets/images/user-interface/ui-btn-close-white-transparent.svg'); background-repeat: no-repeat; background-position: center; margin-left: 10px;}
a.panel-pseudo-close.tint-close {background-image: url('/assets/images/user-interface/ui-btn-close-white-tint.svg');}
.panel-pseudo .avatar {width: 138px; height:138px; display: inline-block; margin-top: 20px; margin-bottom: -90px; overflow: hidden; border: 4px solid white; border-radius: 50%;}
.panel-pseudo .avatar img {width: 100%; min-height: 100%; }
.panel-pseudo .menu-icon-block {display: flex; flex-wrap: wrap; justify-content: center; max-width: 400px; margin: auto;}
.panel-pseudo .menu-icon-block .menu-item {width: 98px; height: 98px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px 0 rgba(64, 79, 90, 0.12); margin: 10px 10px 10px 10px; background-position: center 20px; background-repeat: no-repeat; opacity: 0.4;}
.panel-pseudo .menu-icon-block a .menu-item {opacity: inherit;}
.panel-pseudo .menu-icon-block .menu-item h5 {font-weight: 500; font-size: 15px; text-align: center; padding-top: 40px; color: var(--f7-swissdtx-midnight);}
.panel-pseudo .menu-icon-block .menu-item.menu-therapy {background-image: url('/assets/icons/menu/icon-therapie.svg');}
.panel-pseudo .menu-icon-block .menu-item.menu-exercises {background-image: url('/assets/icons/menu/icon-exercises.svg');}
.panel-pseudo .menu-icon-block .menu-item.menu-notes {background-image: url('/assets/icons/menu/icon-notes-feather.svg');}
.panel-pseudo .menu-icon-block .menu-item.menu-activity {background-image: url('/assets/icons/menu/icon-activity.svg');}
.panel-pseudo .menu-icon-block .menu-item.menu-files {background-image: url('/assets/icons/menu/icon-folder.svg');}
.panel-pseudo .menu-icon-block .menu-item.menu-settings {background-image: url('/assets/icons/menu/icon-security-blue.svg');}
.panel-pseudo .menu-icon-block .menu-item.menu-contacts {background-image: url('/assets/icons/menu/icon-hearth.svg');}
.panel-pseudo .menu-icon-block .menu-item.menu-help {background-image: url('/assets/icons/menu/icon-help.svg');}
.panel-pseudo .menu-icon-block .menu-item.menu-sos {background-image: url('/assets/icons/menu/icon-SOS.svg');}
.panel-pseudo .menu-icon-block .menu-item.menu-chat {background-image: url('/assets/icons/menu/icon-chat-blue.svg');}

/* Lists (Settings etc.) */
.list-title {color: var(--f7-swissdtx-blue-grey); font-size: 15px;}
.list ul {background: none; border-bottom: 1px solid var(--f7-swissdtx-blue-grey);}
.list ul.no-top-bar:before {background-color: inherit;}
.list ul li .item-content, .list ul li.item-content {padding-left: 0; border-top: 1px solid var(--f7-swissdtx-blue-grey)}
/*.list ul li .item-content.item-input, .list ul li.item-content.item-input {border-top: none;}*/
.list .item-media + .item-inner {margin-left: 0;}
.list ul li .item-content .item-title {font-size: 15px; color: var(--f7-swissdtx-midnight)}
.list ul li .item-content .item-title .icon.settings-icons {width: 35px; height: 35px;}
.list .item-link.item-bold .item-title {font-weight: 600;}
.list .item-link .item-inner::before {right: 0;}
.list .item-link .item-inner {padding-right: 40px;}
.list.toggle-list li {border-top: 1px solid var(--f7-swissdtx-blue-grey)}

/* Panels */
/* User Menu */
/*.panel a.panel-close {display: inline-block; width: 40px; height: 40px; background-image: url('/assets/images/user-interface/ui-btn-close-dark.svg'); background-repeat: no-repeat; background-position: center; margin-left: 10px;}*/
.panel .avatar {width: 134px; height:134px; display: inline-block; margin-top: 20px; margin-bottom: -90px; overflow: hidden;}
.panel .avatar img {width: 90%; border-radius: 100px; border: 4px solid white;}
.panel .menu-icon-block {display: flex; flex-wrap: wrap; justify-content: center; max-width: 400px; margin: auto;}
.panel .menu-icon-block .menu-item {width: 98px; height: 98px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px 0 rgba(64, 79, 90, 0.12); margin: 10px 10px 10px 10px; background-position: center 20px; background-repeat: no-repeat;}
.panel .menu-icon-block .menu-item h5 {font-weight: 500; font-size: 15px; text-align: center; padding-top: 40px; color: var(--f7-swissdtx-midnight);}

.block-content .menu-icon-block {display: flex; flex-wrap: wrap; justify-content: center; max-width: 400px; margin: auto;}
.block-content.block-light .menu-icon-block {background-color: inherit;}
.block-content .menu-icon-block.menu-icon-2x .menu-item {width: 150px; height: 150px;  background: linear-gradient(150deg, rgba(17,81,138,1) 1%, rgba(208,233,252,1) 99%); border-radius: 8px; box-shadow: 0 2px 10px 0 rgba(64, 79, 90, 0.12); margin: 10px 10px 10px 10px;}
.block-content .menu-icon-block.menu-icon-2x .menu-item h4 {font-weight: 600; font-size: 18px; padding-top: 0; padding-left: 16px; margin-top: 30px; margin-bottom: 0;  color: white;}
.block-content .menu-icon-block.menu-icon-2x .menu-item h5 {display: none; font-weight: 500; font-size: 15px; padding-top: 0; padding-left: 16px; margin-top: 0; margin-bottom: 0; color: var(--f7-swissdtx-light-blue-grey);}
.block-content .menu-icon-block.menu-icon-2x .menu-item span {display: inline-block; width: 40px; height: 40px; padding: 10px; background-repeat: no-repeat;background-position: center;}

.block-content .menu-icon-block.menu-icon-4x .menu-item {width: 70px; height: 70px;  background: linear-gradient(150deg, rgba(17,81,138,1) 1%, rgba(208,233,252,1) 99%); border-radius: 8px; box-shadow: 0 2px 10px 0 rgba(64, 79, 90, 0.12); margin: 7px 7px 7px 7px;}
.block-content .menu-icon-block.menu-icon-4x .menu-item h4 {font-weight: 500; font-size: 15px; padding-top: 0; padding-left: 0; margin-top: 0; margin-bottom: 0; text-align: center; color: var(--f7-swissdtx-midnight);}
.block-content .menu-icon-block.menu-icon-4x .menu-item span {display: inline-block; width: 70px; height: 70px; padding: 0; background-repeat: no-repeat;background-position: center;}

.block-content .menu-icon-block .menu-item.menu-notes span {background-image: url('/assets/icons/menu/icon-notes-feather-white.svg');}
.block-content .menu-icon-block .menu-item.menu-mood span {background-image: url('/assets/icons/menu/icon-activity-white.svg');}
.block-content .menu-icon-block .menu-item.menu-therapies span {background-image: url('/assets/icons/menu/icon-steps-white.svg');}
.block-content .menu-icon-block .menu-item.menu-files span {background-image: url('/assets/icons/menu/icon-folder-white.svg');}
.block-content .menu-icon-block .menu-item.menu-chat span {background-image: url('/assets/icons/menu/icon-chat-white.svg');}
.block-content .menu-icon-block .menu-item.menu-contacts span {background-image: url('/assets/icons/menu/icon-heart-white.svg');}
.block-content .menu-icon-block .menu-item.menu-help span {background-image: url('/assets/icons/menu/icon-help-white.svg');}
.block-content .menu-icon-block .menu-item.menu-sos span {background-image: url('/assets/icons/menu/icon-SOS-white.svg');}
.block-content .menu-icon-block .menu-item.menu-logout span {background-image: url('/assets/images/user-interface/icon-lock-white.svg');}

/* Notes-Panel */
.btn-notes-add {width: 63px; height: 63px; background-color: var(--f7-swissdtx-denim-blue); border-radius: 100%; background-image: url('/assets/images/user-interface/icon-note-white.svg'); background-repeat: no-repeat; background-position: center; }
.btn-notes-add.sticky-bottom {position: fixed; bottom: 25px; right: 25px; z-index: 10;}
textarea.notes {padding: 0; border: 1px solid var(--f7-swissdtx-superlight-grey) !important; background-color: white !important;}
.notes-container {padding-bottom: 20px;}
.notes-container .card-expandable {box-shadow: none; height: 150px; margin-left: 27px; margin-right: 27px; margin-top: 12px;}
.notes-container .card-expandable.card-opened {margin-top: 0;}
.notes-container .card-expandable.card-opened.first {margin-top: 12px;}
.notes-container .card-expandable a.panel-pseudo-close {background-size: 30px; width: 30px; height: 30px;}
.notes-container .card-expandable .card-content .card-header-wrapper {height: 120px}
.notes-container .card-expandable .card-content .card-header-wrapper a.link.card-close {position: absolute; left: 30px; top: 30px; color: var(--f7-swissdtx-midnight);}
.notes-container .card-expandable .card-content .card-header {font-size: 15px; font-weight: normal; color: var(--f7-swissdtx-midnight); line-height: 1.3; width: 85%; padding: 14px;}
.notes-container .card-expandable .card-content small {display: block; margin-top: 15px; color: var(--f7-swissdtx-blue-grey)}
.notes-container .card-expandable.card-opened .card-content .card-header-wrapper {height: 0;}
.notes-container .card-expandable.card-opened .card-header {display: none !important;}
.notes-container .card-expandable.card-opened .card-content h4 {text-align: center; margin-top: -8px; margin-bottom: 0;}
.notes-container .card-expandable.card-opened .card-content small {text-align: center; margin-top: 6px; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--f7-swissdtx-blue-grey);}
.notes-container .card-expandable.card-opened .card-content-padding {padding-top: 40px; padding-left: 30px; padding-right: 30px; font-size: 15px;}
.notes-container .card-expandable.card-connect:not(.card-opened) {margin-top: 0; margin-bottom: 2px; border-radius: 0 !important;}
.notes-container .card-expandable.card-connect.first:not(.card-opened) {margin-top: 12px; border-top-left-radius: 6px !important; border-top-right-radius: 6px !important;}
.notes-container .card-expandable.card-connect.last:not(.card-opened) {border-bottom-left-radius: 6px !important; border-bottom-right-radius: 6px !important; margin-bottom: 30px;}

/* Messages panel */
.messages, .messages-content {background: none;}
.messages-content {height: calc(100vh - 260px); overflow: scroll;}
.messages {padding-bottom: 90px; min-height: auto;}
.message-sent {margin-right: 0 !important;}
.message-sent .message-bubble {color: var(--f7-swissdtx-midnight);}
.message-received {margin-left: 0 !important;}
.ios .message + .message:not(.message-first) {margin-top: 20px;}
.area-new-message {width: 100%; max-width: 500px; min-height: 80px; background-color: var(--f7-swissdtx-white); position: fixed; bottom: 0; z-index: 1}
.area-new-message .textarea[contenteditable] {width: 80%; display: inline-block; min-height: 60px; padding-left: 30px; padding-top: 30px; margin-bottom: 20px; box-sizing: border-box; border: 1px solid white !important;}
.area-new-message .textarea[contenteditable]:active,
.area-new-message .textarea[contenteditable]:focus,
.area-new-message .textarea[contenteditable]:focus-visible {border: none; outline: none;}
.area-new-message .textarea[contenteditable]:empty::before {content: "Neue Nachricht verfassen"; color: gray;}
.area-new-message .btn-message-send {width: 63px; height: 63px; background-color: var(--f7-swissdtx-white); border-radius: 100%; background-image: url('/assets/images/user-interface/icon-send-message-blue.svg'); background-repeat: no-repeat; background-position: center; position: absolute; right: 15px; bottom: 8px; }

/*  SOS-Panel + SOS-Pages */
.google-maps-header {height: 250px; width: 100%; position: absolute; top: 0; opacity: 0.4; overflow: hidden;}
.google-maps-header .google-maps {height: 270px; width: 100%;}

.google-maps-header-detail {height: 350px; width: 100%; position: absolute; top: 0; opacity: 1; overflow: hidden;}
.google-maps-header-detail .google-maps {height: 370px; width: 100%;}

/* Exercise Panel */
.panel-exercise-container-outer { padding-left: 0; min-height: 180px; }
.panel-exercise-container-outer .exercise {  float: left; background-color: white; border-radius: 8px; padding: 20px; width: 42%; margin-left: 20px; margin-bottom: 20px; box-sizing: border-box;}

/* Exercise Result Panel*/
.panel-exercise-result .block {padding-right: 30px;}

/* Contact-Panel */
.contact-container .card {margin-left: 27px; margin-right: 27px; margin-top: 12px;}
.contact-container .card .avatar {overflow: inherit; margin-top: 0; width: 140px; height: 140px; margin-bottom: inherit;}
.contact-container a.contact-message {display: inline-block; width: 48%; height: 40px; background-image: url('/assets/images/user-interface/ui-btn-chat.svg'); background-repeat: no-repeat; background-position: center; background-size: 40px;}
.contact-container a.contact-phone {display: inline-block; width: 48%; height: 40px; background-image: url('/assets/images/user-interface/ui-btn-call.svg'); background-repeat: no-repeat; background-position: center; background-size: 40px;}

/* Therapy Menu */
.menu-item {background-color: inherit;}
.menu-item.menu-item-dropdown-opened {background-color: var(--f7-swissdtx-white);}
.menu-item.menu-item-dropdown-opened i.icon {color: var(--f7-swissdtx-dark-denim-blue);}
.menu-item .menu-dropdown .menu-dropdown-content {padding: 10px; color: var(--f7-swissdtx-dark-denim-blue)}
.menu-item .menu-dropdown .menu-dropdown-content a {font-size: 15px; font-weight: 300; padding-top: 2px; padding-bottom: 2px; color: var(--f7-swissdtx-dark-denim-blue)}
.ios .navbar .left a + a, .ios .navbar .right a + a {margin-left: 0; color: var(--f7-swissdtx-dark-denim-blue)}
.menu-item-dropdown .menu-item-content::after {display: none;}

/* Therapy */
.therapy-session-welcome .avatar {width: 134px; height:134px; display: inline-block; margin-top: 120px; overflow: hidden;}
.therapy-session-welcome .avatar img {width: 90%; border-radius: 100px; border: 4px solid white;}
.therapy-container-outer { padding-left: 28px; min-height: 200px; }
.therapy-session {float: left; background-color: var(--f7-swissdtx-off-blue); border-radius: 8px; padding: 20px; width: 80%; }

.therapy-session.swiper-slide.active .therapy-session-name {background-image: url("/assets/images/user-interface/ui-btn-play-session.svg"); background-position: top right; background-repeat: no-repeat;}
.therapy-session.swiper-slide.finished .therapy-session-name {background-image: url("/assets/images/user-interface/ui-btn-done-session.svg"); background-position: top right; background-repeat: no-repeat;}
.therapy-session.swiper-slide.locked .therapy-session-name {background-image: url("/assets/images/user-interface/ui-btn-locked-session.svg"); background-position: top right; background-repeat: no-repeat;}

.therapy-session-name { font-size: 14px; color: var(--f7-swissdtx-white); margin-bottom: 50px; opacity: 0.7; line-height: 40px;}
.therapy-session-description {opacity: 0.9; hyphens: auto; font-size: 22px;}
.therapy-session-start {margin-top: 15px;}
.therapy-session-start .left { width: 100%; float: left; padding-top: 8px; font-size: 14px; opacity: 0.5; }
.therapy-session-start .right {float: right; margin-top: -20px; opacity: 0.8; display: none;}

.therapy-session-step { background-color: white; border-radius: 8px; margin-bottom: 20px; min-height: 55px; display: table; width: 100%}
.therapy-session-step .step-nr {background-color: white; border-right: 1px solid var(--f7-swissdtx-superlight-grey); border-radius: 8px 0 0 8px; width: 18%; display: table-cell; text-align: center; vertical-align: middle; color: var(--f7-swissdtx-denim-blue);}
.therapy-session-step .step-nr span {color: white; border: 1px solid var(--f7-swissdtx-superlight-grey); border-radius: 100px; display: inline-block; width: 28px; height: 28px; text-align: center; line-height: 28px;  color: var(--f7-swissdtx-denim-blue);}
.therapy-session-step .step-name {padding-left: 4%; width: 60%; display: table-cell; vertical-align: middle; color: var(--f7-swissdtx-denim-blue);}
.therapy-session-step .step-start {width: 20%; display: table-cell; background-repeat: no-repeat !important; background-position: center !important; background-size: 50% !important; cursor: pointer;}
.therapy-session-step.done { background-color: rgba(255,255,255,0.7);}
.therapy-session-step.done .step-start {background: url('/assets/images/user-interface/ui-btn-checkmark-done.svg'); }
.therapy-session-step.active .step-start {background: url('/assets/images/user-interface/ui-btn-play-chapter-green.svg'); }

.therapy-session-step.locked {background-color: var(--f7-swissdtx-off-blue);}
.therapy-session-step.locked .step-nr {background-color: var(--f7-swissdtx-denim-blue); border-right: 1px solid var(--f7-swissdtx-denim-blue); color: white;}
.therapy-session-step.locked .step-nr span {color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.7);}
.therapy-session-step.locked .step-name {background-color: var(--f7-swissdtx-off-blue); color: rgba(255,255,255,0.7);}
.therapy-session-step.locked .step-start {background: url('/assets/images/user-interface/ui-btn-locked-superlightgrey.svg'); background-color: var(--f7-swissdtx-off-blue);}

.therapy-progress {border-top: 1px solid white; margin-top: -1px;}

.therapy-content h1 {font-size: 28px; line-height: 34px; margin-top: 0; padding-top: 0; font-weight: 600;}
.therapy-content h2 {font-size: 25px; line-height: 30px; margin-top: 0; padding-top: 0; font-weight: 600;}
.therapy-content h3 {font-size: 22px; line-height: 28px; margin-top: 0; padding-top: 0; font-weight: 600;}
.therapy-content p {font-size: 20px; line-height: 26px;}

/* Exercise */
.page.exercise, .page.exercise .page-content {background-color: var(--f7-swissdtx-pale-grey) !important; background-image: none !important; background-repeat: no-repeat; background-position: top right;}
.exercise-container-outer { padding-left: 28px; min-height: 180px; }
.exercise-container-outer.width-100 {padding-left: 0;}
.exercise {  float: left; background-color: white; border-radius: 8px; padding: 20px; width: 65%;}
.exercise.margin-right {margin-right: 15px;}
.exercise.width-100 {width: calc(100% - 40px) !important;}
.exercise .border-top {border-color: var(--f7-swissdtx-midnight);}
.exercise-name { font-size: 14px; margin-bottom: 2px; color: var(--f7-swissdtx-blue-grey); visibility: hidden} /*margin-bottom: 30px;*/
.exercise-description {opacity: 0.9; color: var(--f7-swissdtx-midnight)}
/*.exercise-start.border-top {display: none;}*/
.exercise-start {margin-top: 15px;}
.exercise-start .left {width: 74%; float: left; padding-top: 8px; font-size: 14px; color: var(--f7-swissdtx-midnight) }
.exercise-start .right {float: right; padding-top: 8px; color: var(--f7-swissdtx-midnight)}
.exercise.width-100 .exercise-start .right {padding-top: 0; margin-top: -16px;}
.exercise p a {color: var(--f7-swissdtx-midnight);}
.exercise-container-past .block.block-past-exercises { background-color: white; border-radius: 8px;}
.exercise-container-past { margin-top: 40px}
.exercise-container-past .block.block-past-exercises { margin-top: 0; padding: 0;}
.exercise-container-past > p {color: var(--f7-swissdtx-blue-grey); font-weight: 300;}
.exercise-container-past .block.block-past-exercises a .item-past-exercise  {color: var(--f7-swissdtx-blue-grey); padding: 10px 20px; border-bottom: 1px solid var(--f7-swissdtx-light-blue-grey)}
.exercise-container-past .block.block-past-exercises a:last-child .item-past-exercise {border-bottom: none;}

/* Skin-Switcher */
.skin-switcher {padding-top: 60px;}
.skin-switcher .skin {background-color: var(--f7-swissdtx-off-blue); border-radius: 8px; float: left; width: 30%; margin-right: 10px; margin-bottom: 10px; height: 110px; color: white; line-height: 160px; text-align: center; background-image: url('/assets/images/forms/forms-radio-unselected.svg'); background-repeat: no-repeat; background-position: center 25px;}
.skin-switcher .skin:nth-child(3n+3) {margin-right: 0;}
.skin-switcher .skin.active {background-color: var(--f7-swissdtx-pale-grey); color: var(--f7-swissdtx-midnight); background-image: url('/assets/images/forms/forms-radio-selected.svg');}

/* Forms */
.form-element {text-align: left;}
label {font-size: 13px; line-height: 18px; font-weight: 200;}
.item-input-wrap input[type="text"], .item-input-wrap input[type="password"] {border-bottom: 1px solid #ffffff; padding-bottom: 4px; font-size: 15px; font-weight: 200; width: 100%}
.item-input-wrap.input-pin {float: left; width: 20%;}
.item-input-wrap.input-pin:not(first) {margin-left: 5%;}
.item-input-wrap.input-pin input {text-align: center;}

.item-input-wrap.input-pin-invitation {float: left; width: 8%;}
.item-input-wrap.input-pin-invitation:not(first) {margin-left: 4%;}
.item-input-wrap.input-pin-invitation input {text-align: center;}

.item-input-wrap.input-pin-pwreset {float: left; width: 12%;}
.item-input-wrap.input-pin-pwreset:not(first) {margin-left: 4%;}
.item-input-wrap.input-pin-pwreset input {text-align: center; font-size: 20px;}

/* Therapy-Content */
.block-radio-options { background-color: var(--f7-swissdtx-off-blue); border-radius: 8px; overflow: hidden; }
.block-radio-options .form-control {display: flex; color: white; font-size: 16px; padding: 20px; width: 100%; line-height: 22px; box-sizing: border-box; padding-left: 60px; padding-bottom: 14px;}
.block-radio-options .form-control:not(:last-child) {border-bottom: 1px solid var(--f7-swissdtx-light-blue-grey-30);}
.block-radio-options input[type="radio"] { -webkit-appearance: none; appearance: none; margin: 0; }
.block-radio-options input[type="radio"]::before { display: flex; content: ""; width: 30px; height: 30px; background-image: url('/assets/images/forms/forms-radio-unselected.svg'); background-repeat: no-repeat; background-size: 30px;  margin-left: -42px; margin-top: -4px;}
.block-radio-options input[type="radio"]:checked::before {background-image: url('/assets/images/forms/forms-radio-selected.svg');}

.exercise .block-radio-options { background-color: var(--f7-swissdtx-white); border: 1px solid var(--f7-swissdtx-grey-light)}
.exercise .block-radio-options .form-control { color: var(--f7-swissdtx-dark-denim-blue);}
.exercise .block-radio-options .form-control:not(:last-child) {border-bottom: 1px solid var(--f7-swissdtx-grey-light);}
.exercise .block-radio-options input[type="radio"]::before { background-image: url('/assets/images/forms/forms-radio-white-unselected.svg'); background-color: white; }
.exercise .block-radio-options input[type="radio"]:checked::before {background-image: url('/assets/images/forms/forms-radio-white-selected.svg');}

.block-check-options { background-color: var(--f7-swissdtx-off-blue); border-radius: 8px; overflow: hidden; }
.block-check-options .form-control {display: flex; color: white; font-size: 16px; padding: 20px; width: 100%; line-height: 22px; box-sizing: border-box; padding-left: 60px; padding-bottom: 14px;}
.block-check-options .form-control:not(:last-child) {border-bottom: 1px solid var(--f7-swissdtx-light-blue-grey-30);}
.block-check-options input[type="checkbox"] { -webkit-appearance: none; appearance: none; margin: 0; }
.block-check-options input[type="checkbox"]::before { display: flex; content: ""; width: 30px; height: 30px; background-image: url('/assets/images/forms/forms-checkbox-unselected.svg'); background-repeat: no-repeat; background-size: 30px; margin-left: -42px; margin-top: -4px;}
.block-check-options input[type="checkbox"]:checked::before {background-image: url('/assets/images/forms/forms-checkbox-selected.svg');}

.exercise .block-check-options { background-color: var(--f7-swissdtx-white); border: 1px solid var(--f7-swissdtx-grey-light);}
.exercise .block-check-options .form-control { color: var(--f7-swissdtx-dark-denim-blue);}
.exercise .block-check-options .form-control:not(:last-child) {border-bottom: 1px solid var(--f7-swissdtx-grey-light);}
.exercise .block-check-options input[type="checkbox"]::before { background-image: url('/assets/images/forms/forms-checkbox-white-unselected.svg'); background-color: white; }
.exercise .block-check-options input[type="checkbox"]:checked::before {background-image: url('/assets/images/forms/forms-checkbox-white-selected.svg');}

.block-multitag-options button {display: inline; width: auto; padding-left: 15px; padding-right: 15px; color: white; border: none; height: 40px; line-height: 34px; margin-right: 12px; margin-bottom: 12px; min-width: auto; }
.block-multitag-options button.active {color: var(--f7-swissdtx-off-blue); background-color: white;}

.exercise .block-multitag-options button { background-color: white; border: 1px solid var(--f7-swissdtx-grey-light); color: var(--f7-swissdtx-dark-denim-blue); min-width: auto; }
.exercise .block-multitag-options button.active {color: white; background-color: var(--f7-swissdtx-dark-denim-blue);}

.block-input input, .block-input textarea {background-color: rgba(255,255,255,0.3); border-radius: 8px; padding: 16px; width: 100%; font-size: 18px;}
.block-input textarea {min-height: 140px;}
.block-input input:focus, .block-input input.input-with-value, .block-input textarea:focus, .block-input textarea.input-with-value {background-color: white; color: var(--f7-swissdtx-midnight);}
.block-input input::placeholder, .block-input textarea::placeholder {color: white; opacity: 1; -moz-opacity: 1; font-size: 18px;}
.block-input .fake-textinput {background-color: white; border: 1px solid var(--f7-swissdtx-grey-light); border-radius: 8px; padding: 16px;}

.exercise .block-input input, .exercise .block-input textarea {background-color: var(--f7-swissdtx-white); border: 1px solid var(--f7-swissdtx-grey-light);}
.exercise .block-input input:focus, .exercise .block-input input.input-with-value, .block-input textarea:focus, .block-input textarea.input-with-value {background-color: white; color: var(--f7-swissdtx-midnight);}
.exercise .block-input input::placeholder, .exercise .block-input textarea::placeholder {color: var(--f7-swissdtx-midnight);}

.block-chat-dialog {display: block; width: 100%; color: white;}
.block-chat-dialog .chat-message-wrap { margin-bottom: 40px;}
.block-chat-dialog .chat-message-wrap .chat-message {background-color: var(--f7-swissdtx-off-blue); display: inline-block; border-radius: 8px 8px 8px 0; padding: 16px; font-size: 16px; line-height: 22px; }
.block-chat-dialog .chat-message-wrap .chat-user {display: block; margin-top: 10px; font-size: 15px;}

.block-chat-dialog .chat-message-wrap.message-align-right {text-align: right;}
.block-chat-dialog .chat-message-wrap.message-align-right .chat-message {border-radius: 8px 8px 0 8px;}
.block-chat-dialog .chat-message-wrap.message-align-info {text-align: center; margin-left: auto; margin-right: auto; width: 75%;}
.block-chat-dialog .chat-message-wrap.message-align-info .chat-message {border-radius: 8px 8px 8px 8px; padding: 10px; background-color: var(--f7-swissdtx-pale-grey); text-align: center; font-size: 15px; font-weight: 300; color: var(--f7-swissdtx-midnight)}

.block-info .inner {background-color: var(--f7-swissdtx-pale-grey); color: var(--f7-swissdtx-midnight); border-radius: 8px; padding-right: 32px; padding-left: 32px;}
.block-info .inner .info-area {padding-top: 20px; padding-bottom: 10px; }
.block-info .inner .info-icon {display: block; height: 40px; background-image: url('/assets/images/user-interface/icon-info.svg'); background-repeat: no-repeat; background-position: center center;}
.block-info .inner h3.info-title {text-align: center; font-size: 18px; line-height: 24px;}
.block-info .inner .info-header { border-bottom: 1px solid var(--f7-swissdtx-superlight-grey);}
.block-info .inner .info-content { padding-bottom: 10px;}
.block-info .inner .info-content p {font-size: 18px; line-height: 22px;}

.block-cta .inner {background-color: var(--f7-swissdtx-pale-grey); color: var(--f7-swissdtx-midnight); border-radius: 8px; padding-right: 32px; padding-left: 32px; padding-bottom: 20px;}
.block-cta .avatar {width: 74px; height:74px; display: inline-block; margin-top: -37px; overflow: hidden;}
.block-cta .avatar img {width: 90%; border-radius: 100px; border: 4px solid white;}
.block-cta .inner .info-area {padding-top: 20px; padding-bottom: 10px; }
.block-cta .inner .info-icon {display: block; height: 40px; background-image: url('/assets/images/user-interface/icon-info.svg'); background-repeat: no-repeat; background-position: center center;}
.block-cta .inner h3.info-title {text-align: center; font-size: 18px; line-height: 22px;}
.block-cta .inner .info-header { border-bottom: 1px solid var(--f7-swissdtx-superlight-grey);}
.block-cta .inner .info-content { padding-bottom: 10px;}
.block-cta .inner .info-content p {font-size: 18px; line-height: 22px;}
.stretched .block.block-cta { position: absolute; bottom: 0; width: 100%;}

.block-timer {}
.block-timer .timer-wrap {text-align: center; padding: 0; margin-top: 80px;}
.block-timer .timer-wrap .base-timer {position: relative;}
.block-timer .timer-wrap .base-timer__circle {fill: none;stroke: none;}
.block-timer .timer-wrap .base-timer__path-elapsed {stroke-width: 5px; stroke: var(--f7-swissdtx-dark-denim-blue);}
.block-timer .timer-wrap .base-timer__label {position: absolute; width: 100%; height: 100%; top: 0; display: flex; align-items: center; justify-content: center; font-size: 48px;}

.block-timer .timer-wrap .base-timer__path-remaining {
  /* Just as thick as the original ring */
  stroke-width: 5px;

  /* Rounds the line endings to create a seamless circle */
  stroke-linecap: round;

  /* Makes sure the animation starts at the top of the circle */
  transform: rotate(90deg);
  transform-origin: center;

  /* One second aligns with the speed of the countdown timer */
  transition: 1s linear all;

  /* Allows the ring to change color when the color value updates */
  stroke: var(--f7-swissdtx-white);
}

.base-timer__svg {
  /* Flips the svg and makes the animation to move left-to-right */
  transform: scaleX(1);
}

.block-endscreen.block {margin-bottom: 0;}
.block-endscreen .inner {}
.block-endscreen .inner p {font-size: 18px;}
.block-endscreen .avatar {width: 134px; height: 134px; display: inline-block; margin-top: 0; overflow: hidden;}
.block-endscreen .avatar img {width: 90%; border-radius: 100px; border: 4px solid white;}
.block-endscreen .exercise-container {margin-top: 40px; background-color: var(--f7-swissdtx-off-blue); margin-left: -30px; margin-right: -30px; padding-top: 20px;}

a.thesaurus {text-decoration: inherit; border-bottom: 2px dotted rgba(255,255,255,0.2);}
/* Block styles */
.block-light {background-color: var(--f7-swissdtx-pale-grey);}
.block-video {padding-left: 0; padding-right: 0; padding-top: 100px !important; margin-top: 0 !important; position: absolute; top: 0; width: 100%; height: 100vh; background-color: black; box-sizing: border-box}
.block-video .video-wrapper {padding:177.78% 0 0 0;position:relative;}
.block-video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

audio::-webkit-media-controls-panel, audio {
  background-color: var(--f7-swissdtx-off-blue);
  width: 100%;
  border-radius: 10px;
}

/* Video Native */
.block-video-native {text-align: center;}
video {height: 60vh; width: auto;}

video::-webkit-media-controls-panel {
  border-radius: 10px;
  display: flex !important;
  opacity: 1 !important;
}


/* Slide to unlock */
.slideToUnlock .text {color: #fff;}
.locked {color: #fff; font-size: 15px; background-color: var(--f7-swissdtx-off-blue);}
.unlocked {background-color: var(--f7-swissdtx-dark-denim-blue); color: var(--f7-swissdtx-denim-blue);}
.unlocked_handle .drag {margin-left: inherit;}

/* Modal-Sheet (Thesaurus) */
.sheet-modal {border-top-left-radius: 15px; border-top-right-radius: 15px; color: var(--f7-swissdtx-midnight);}
.sheet-modal .toolbar {border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom: 1px solid var(--f7-swissdtx-superlight-grey); height: 60px;}
.sheet-modal .toolbar .toolbar-inner {display: block; font-size: 18px;}
.sheet-modal .toolbar .toolbar-inner div {text-align: center; padding-top: 20px; color: var(--f7-swissdtx-midnight);}
.sheet-modal .sheet-modal-inner .block {margin-top: 20px; font-size: 15px;}
.sheet-modal .sheet-modal-inner .block a.standard-button {margin-top: 35px;}

/* Modal-Sheet Value-Picker */
.sheet-modal.picker-sheet .toolbar {}
.sheet-modal.picker-sheet .toolbar .toolbar-inner div {text-align: inherit; padding-top: inherit;}

/* Footers */
.footer-wave {background-image: url('/assets/skins/illustration-skin_big_wave.svg'); background-repeat: no-repeat; background-position: bottom; background-size: 100%;}
.footer.swissdtx {border-top: 1px solid var(--f7-swissdtx-light-blue-grey); height: 104px; background-image: url('/assets/logos/logo-grey.svg'); background-repeat: no-repeat; background-size: 35%; background-position: center 40px;}
.footer.logout {border-top: 1px solid var(--f7-swissdtx-light-blue-grey); padding-top: 40px;}
.footer.logout a {color: var(--f7-swissdtx-midnight);}

/* Wave connectors */
.wave-connector-dark:before {content: ""; display: block; width: 100%; height: 45px; background-image: url(/assets/skins/skin_global_wave.svg) !important; background-repeat: no-repeat !important; background-position: top center !important; background-size: 110%; transform: rotate(180deg) }
.wave-connector-dark:after, .wave-connector-dark-bottom:after {content: ""; display: block; width: 100%; height: 45px; background-image: url(/assets/skins/skin_global_wave.svg) !important; background-repeat: no-repeat !important; background-position: top center !important; background-size: 110%;}
.wave-connector {background-color: #6872b0 !important; background-image: url(/assets/images/wave-connector-dark-light.jpg) !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: bottom center !important;}
.wave-connector-top {background-image: url(/assets/images/wave-connector-dark-light.jpg) !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: top center !important; padding-top: 20px;}

.block.block-vertical-line-white {background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,1)) no-repeat 70px/2px 100%;}

/* fullscreen styles */
.fullscreen { width: 100vw; height: 100%; padding: 0 0 0; background: linear-gradient(150deg, rgba(17,81,138,1) 1%, rgba(208,233,252,1) 89%); }
.fullscreen .page-content { background: linear-gradient(150deg, rgba(17,81,138,1) 1%, rgba(208,233,252,1) 89%); position: relative; min-height: 100vh;}
.fullscreen.fullscreen-white {background-color: var(--f7-swissdtx-pale-grey);}
.fullscreen.fullscreen-white .page-content { background: none; }

/* links */
a.small-link {margin-top: 30px; text-align: center; width: 100%; display: inline-block; font-size: 16px;}

/* buttons */
.switch-button, .standard-button, .standard-button-large {background-color: var(--f7-swissdtx-off-blue); border-radius: 35px; min-width: 70%; height: 55px; line-height: 55px; font-size: 15px; font-weight: 200; margin-left: auto; margin-right: auto; text-align: center; display: block; }
.standard-button-large {width: 100%;}
.standard-button.align-left {margin-left: 0;}
.standard-button.min-padding {display: inline-block; width: auto; padding-left: 12px; padding-right: 12px;}
.exercise .switch-button, .exercise .standard-button {background-color: white; color: var(--f7-swissdtx-off-blue); border: 1px solid var(--f7-swissdtx-pale-grey);}


.segmented .button {border-right: 1px solid var(--f7-swissdtx-light-blue-grey);}
.segmented .button:last-child {border-right: none; !important;}
.segmented .button.button-active {border-right: 1px solid var(--f7-swissdtx-light-blue-grey); background-color: white; color: var(--f7-swissdtx-dark-denim-blue);}

.exercise .segmented .button:not(.button-outline):first-child {border-left: 1px solid var(--f7-swissdtx-grey-light);}
.exercise .segmented .button {border: 1px solid var(--f7-swissdtx-grey-light); border-right: 1px solid white; background-color: white;}
.exercise .segmented .button.button-active {border-right: 1px solid var(--f7-swissdtx-dark-denim-blue); background-color: var(--f7-swissdtx-dark-denim-blue); color: white;}
.exercise .segmented .button:last-child {border-right: 1px solid var(--f7-swissdtx-grey-light);}

.segmented.sos-buttons {box-shadow: 1px 1px 5px 0 var(--f7-swissdtx-light-blue-grey); margin-bottom: 38px;}
.segmented.sos-buttons .button {border-right: 1px solid var(--f7-swissdtx-light-blue-grey); background-color: var(--f7-swissdtx-white); height: auto;}
.segmented.sos-buttons .button:last-child {border-right: none;}
.segmented.sos-buttons .button.button-active {border-right: 1px solid var(--f7-swissdtx-off-blue); background-color: var(--f7-swissdtx-light-blue-grey); color: var(--f7-swissdtx-dark-denim-blue);}
.segmented.sos-buttons .button i {display: block;}
.segmented.sos-buttons .button span {display: block; color: var(--f7-swissdtx-midnight);}
.segmented.sos-buttons .button span.sos-number {font-weight: 600; font-size: 36px; line-height: 36px;}
.segmented.sos-buttons .button span.sos-caption {font-size: 15px; line-height: 32px; margin-bottom: 10px; text-transform: none;}
.segmented.sos-buttons .button span.icon-sos {width: 100%; text-align: center; padding-top: 16px; padding-bottom: 12px;}
.segmented.sos-buttons .button span.icon-sos .icon-sos-phone {border-radius: 100%; width: 40px; height: 40px; background-color: var(--f7-swissdtx-dark-denim-blue); margin: auto; background-image: url('/assets/icons/menu/icon-phone-white.svg'); background-position: center;}

/* sonar button */
.sonar-button {display: inline-block; width: 80px; height: 80px;}

.sonar-button > .sonar-waves:nth-of-type(1) {position: absolute; animation-name: sonar-waves; animation-duration: 6s; animation-timing-function: ease-out; animation-direction: normal; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; animation-delay: 0s; stroke-opacity: 0; }
.sonar-button > .sonar-waves:nth-of-type(2) {position: absolute; animation-name: sonar-waves; animation-duration: 6s; animation-timing-function: ease-out; animation-direction: normal; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; animation-delay: 1.5s; stroke-opacity: 0; }
.sonar-button > .sonar-waves:nth-of-type(3) {position: absolute; animation-name: sonar-waves; animation-duration: 6s; animation-timing-function: ease-out; animation-direction: normal; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; animation-delay: 3s; stroke-opacity: 0; }
.sonar-button > .sonar-waves:nth-of-type(4) {position: absolute; animation-name: sonar-waves; animation-duration: 6s; animation-timing-function: ease-out; animation-direction: normal; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; animation-delay: 4.5s; stroke-opacity: 0;}

/* Timeline */
.timeline {margin-bottom: 0; padding-bottom: 24px;}
.timeline-item-content {min-width: 65%;}
.timeline-item-content .timeline-item-time {margin-bottom: 6px;}
.timeline-item-content .timeline-item-subtitle {margin-bottom: 6px;}
.timeline-item-content .timeline-item-title {margin-top: 8px; margin-bottom: 12px;}

.timeline-item.timeline-therapy .timeline-item-content .timeline-item-inner {background-color: var(--f7-swissdtx-off-blue); color: white;}
.timeline-item.timeline-therapy .timeline-item-content .timeline-item-inner .timeline-item-time {color: white;}


@keyframes sonar-waves {
  0% {
    transform: scale(0.22);
    opacity: 0.5;
    stroke-opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
    stroke-opacity: 0;
  }
}

/* Wave-Animation */
.fullscreen .wave {
  display: none;
  position: absolute;
  overflow: hidden;
  bottom: 20px;
  width: 100%;
  height: 25vh;
}
.waves {
  position:relative;
  width: 140%;
  height: 80px !important;
  transform: rotate(-10deg);
  overflow: none;
  margin-left: -55px;
  min-height:100px;
  max-height:150px;
}

.waves2  {
  position:relative;
  width: 100%;
  max-height: 170px;
}
.parallax {

}

.parallax > use {
  animation: 10s linear infinite move-forever;
}
.parallax1 > use {
  animation-delay: -1s;
  animation-duration: 28s;
}
.parallax2 > use {
  animation-delay: -10s;
  animation-duration: 40s;
}
.parallax3 > use {
  animation-delay: -20s;
  animation-duration: 50s;
}
.parallax4 > use {
  animation-delay: -10s;
  animation-duration: 80s;
}
@keyframes move-forever {
  0% {
    transform: translate3d(-90px,0,0);
  }
  100% {
    transform: translate3d(85px,0,0);
  }
}

@-webkit-keyframes shake {
  0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
  10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
  20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
  30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
  70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
  90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}


/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}

/* Special tweeks for iPad */
@media (min-height: 1000px) {
    .block.block-next-button {bottom: 120px;}
  .btn-notes-add.sticky-bottom {right: inherit; left: 400px;}
}