/* Move down content because we have a fixed navbar that is 3.5rem tall */
:root {
  --orange:#eb6608;
  --dunkelorange:#cd470a;
  --dunkelblau:#244669;
  --hellblau:#4a96d2;
  --sandgrau:#f1eeee;
  --navbar_top_height:75px;
  --navbar_bottom_height:3.5rem;
  --height_middle:calc(50vh - var(--navbar_bottom_height) / 2);
  --profile_image_height:200px;
  --main_table_text_size:19px;
  --table_text_size:15px;
  --table_padding:10px
;
}

body {
  padding-top: var(--navbar_top_height);
  padding-bottom: var(--navbar_bottom_height);
  background-color: var(--sandgrau);
}

.body-high_navbar {
  padding-top: 0;
}

.body-low_navbar {
  padding-top: var(--navbar_top_height);
}

.sticky-offset {
  top: var(--navbar_top_height);
}

.navbar {
  width: 100%;
  overflow: auto;
  height: var(--navbar_top_height);
  align-items: baseline;
  -webkit-box-shadow: 0 8px 10px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 8px 10px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0 8px 10px 0px rgba(0, 0, 0, 0.25);
}

.bottom_navbar a {
  float: left;
  height: var(--navbar_bottom_height);
  line-height: var(--navbar_bottom_height);
  color: var(--hellblau);
  background-color: var(--dunkelblau);
  text-decoration: none;
  font-size: 17px;
  width: 33.333%;
  text-align: center;
}

.bottom_navbar a.active {
  color: #ffffff;
  background-color: var(--dunkelblau);
}

.initiallyHidden {
  display: none;
}

.image_frame {
  background: white;
  padding: 8px;
  border: 2px solid #999999;
}

.display_jumbotron {
  position: relative;
  padding: 1rem 1rem;
  padding-top: 2rem;
  padding-bottom: 3px;
  margin-bottom: 2rem;
  color: var(--dunkelblau);
  background-color: #fff;
  border-radius: 0.3rem;
  min-height: 105px;
}

h4.header {
  margin: 0;
  font-weight: bold;
  color: var(--dunkelblau);
}

button, .btn {
  border-radius: 999px;
  padding: .18em 1em .22em;
  font-weight: 500;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.btn-primary {
  color: #fff;
  background-color: var(--hellblau);
  border-color: var(--hellblau);
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--hellblau);
  border-color: var(--hellblau);
}

.btn-secondary {
  color: var(--hellblau);
  background-color: #fff;
  border-color: var(--hellblau);
}

.btn-secondary:hover {
  color: var(--hellblau);
  background-color: #fff;
  border-color: var(--hellblau);
}

* {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.selectable, .selectable * {
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -o-user-select: text;
  user-select: text;
}

.text-large {
  font-size: 250%;
}

.orange_grad {
  background-image: linear-gradient(to top right, var(--dunkelorange), var(--orange));
}

.height_middle {
  height: var(--height_middle);
}

.image-cropper {
  width: var(--profile_image_height);
  height: var(--profile_image_height);
  margin-top: -100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid white;
  background-color: white;
}

.none-image {
  padding: calc(var(--profile_image_height) / 5);
  background-color: #d1ecf1;
}

.table {
  margin-bottom: 0px;
  background-color: var(--sandgrau);
  font-size: var(--table_text_size);
}

.table td {
  border-bottom: 3px solid white;
  border-top: none;
  padding: var(--table_padding);
  color: #606060;
}

.table td.no_borders {
  border-bottom: none;
  border-top: none;
  padding: var(--table_padding);
  color: black;
}

.table_star {
  height: var(--main_table_text_size);
  fill: green;
}

.table td.no_entries {
  font-size: 19px;
  text-align: center;
  height: 80px;
  font-weight: 500;
  color: black;
}

.white_background {
  background-color: white;
}

.arrow_up {
  position: absolute;
  top: 83px;
  /* better to use bottom: 0px, but it is not rendered correctly by older browsers */
  width: 0;
  height: 0;
  margin-left: 20px;
  border-style: solid;
  border-width: 0 20px 23px 20px;
  border-color: transparent transparent var(--sandgrau) transparent;
  margin-left: 10px;
}

.arrow_foreign_currency {
  /* remove this class if we move from older browser, just use bottom: 0px (look class arrow_up) */
  top: 112px;
}

.main_text-table {
  color: var(--dunkelblau);
  font-weight: 500;
  font-size: var(--main_table_text_size);
}

.secondary_text-table {
  font-size: var(--table_text_size);
  color: #606060;
}

.profile-pic {
  margin: 0 auto;
  height: 100%;
  width: auto;
  background-color: white;
}

.text-block-login {
  position: absolute;
  bottom: calc(50vh + 20px);
  text-align: center;
  color: white;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.text-block-profile {
  position: absolute;
  bottom: calc(var(--height_middle) + var(--navbar_bottom_height) + var(--profile_image_height)/2 + 20px);
  text-align: center;
  color: white;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.text-block-grey_background {
  text-align: center;
  color: var(--dunkelblau);
  width: 80%;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.btn-middle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.shortening {
  text-overflow: ellipsis;
  width: 93vw;
  overflow: hidden;
  white-space: nowrap;
}

.wa_overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2501;
  cursor: pointer;
}

.overlay_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.noscroll {
  touch-action: none;
}

.push_message {
  margin: 0;
  padding: 0;
}

.modal-btn-margin {
  margin: 0.5em;
}

.btn-success.modal-btn-margin, .btn-danger.modal-btn-margin {
  background-color: white;
  color: var(--dunkelblau);
}

.swal2-close:focus {
  outline: none;
}

.small_text_left p {
  text-align: left !important;
  font-size: 16px !important;
}

.profile_button {
  background: var(--hellblau);
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 50%;
}

.profile_button_text {
  font-size: 12px;
}

.profile_buttons_div {
  position: absolute;
  bottom: calc(3vh + var(--navbar_bottom_height));
  line-height: 0.8;
}

.vpn-box {
  text-align: left;
  width: 100%;
  border: 1px solid #839cb0;
  background-color: #f4f7fb;
  padding: 0 15px;
  margin-bottom: 5px;
  border-radius: 6px;
}

.vpn-box .data {
  border: 1px solid #a4a4a4;
  color: #5e5e5e;
  border-radius: 4px;
  padding: 4px;
  padding-left: 6px;
  background-color: white;
  margin-bottom: 5px;
  font-size: 16px;
}

.body-high_navbar.original {
  display: none;
}

body.nu-style {
  padding-top: 0;
  background-color: #f6f7f9 !important;
  color: black;
  font-family: 'Helvetica', sans-serif;
}

body.nu-style .templates {
  display: none;
}

body.nu-style .yd-logo {
  font-size: 16px;
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.9px;
  color: black;
  position: absolute;
  top: 11px;
  z-index: 1000;
  left: 17px;
}

body.nu-style .yd-input {
  display: block;
  width: 100%;
  padding: 0.375rem 1rem;
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.42;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #3d424a;
  appearance: none;
  border-radius: 0.4356rem;
  transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

body.nu-style .border-gradient {
  background-image: none;
  background-color: white;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
}

body.nu-style .navbar.height_middle {
  height: calc(41vh - var(--navbar_bottom_height) / 2);
}

body.nu-style .navbar.height_middle.login {
  height: calc(62vh - var(--navbar_bottom_height) / 2);
}

body.nu-style #bottom_navbar {
  display: block;
  border-top: 1px solid #e9ecee;
  height: 57px;
}

body.nu-style #bottom_navbar .copy-snack {
  position: absolute;
  font-size: 16px;
  background-color: #d1f3ce;
  color: #097553;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 0%;
  overflow: hidden;
}

body.nu-style #bottom_navbar .navbar-item {
  background-color: white;
  font-size: 16px;
  color: #3d424a;
}

body.nu-style #bottom_navbar .navbar-item.active {
  color: #5843CE;
  font-weight: 600;
}

body.nu-style main .hello {
  font-size: 24px;
  font-weight: 600;
}

body.nu-style .flexy {
  display: flex;
  align-items: center;
}

body.nu-style .strong {
  font-weight: 600;
}

body.nu-style .swal2-popup {
  border-radius: 10px;
}

body.nu-style .swal2-close {
  scale: 0.8;
}

body.nu-style .swal2-content,
body.nu-style .swal2-content .modal-template {
  text-align: left;
  font-size: 20px;
  color: black;
}

body.nu-style .swal2-content h4,
body.nu-style .swal2-content .modal-template h4 {
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 10px;
}

body.nu-style .swal2-content p,
body.nu-style .swal2-content .modal-template p {
  font-size: 16px;
  line-height: 1.3em;
}

body.nu-style .confirm-buttons {
  padding-top: 14px;
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 15px;
}

body.nu-style .confirm-buttons .btn {
  font-size: 15px;
  padding: 7px 20px;
  min-width: 80px;
  color: #3d424a;
  border: 1px solid black;
  background-color: white;
  margin: 0;
}

body.nu-style .confirm-buttons .btn.btn-primary {
  color: white;
  background-color: #3d424a;
}

body.nu-style .list-view {
  color: black;
}

body.nu-style .list-view .display_jumbotron {
  background-color: #f6f7f9;
  color: black;
}

body.nu-style .list-view .display_jumbotron .secondary_text-table {
  text-align: right;
  font-size: 18px;
}

body.nu-style .list-view .display_jumbotron h3 {
  margin-left: 3px;
}

body.nu-style .list-view .list-item {
  color: black;
  border: none;
  border-bottom: 8px solid #f6f7f9;
  background-color: white;
  font-size: 18px;
}

body.nu-style .list-view .list-item.info {
  text-align: left;
  padding: 20px;
  line-height: 1.2em;
  color: black;
}

body.nu-style #vpn-list .display_jumbotron,
body.nu-style #account .display_jumbotron,
body.nu-style #planning .display_jumbotron {
  color: #696e75;
  font-size: 23px;
  min-height: 68px;
  padding-top: 15px;
  padding-left: 20px;
}

body.nu-style #vpn-list.live .display_jumbotron {
  padding-top: 8px;
}

body.nu-style #vpn-list.live .display_jumbotron .back-bt {
  height: 50px;
}

body.nu-style #vpn-list .display_jumbotron .back-bt {
  cursor: pointer;
  padding: 5px;
}

body.nu-style #vpn-list .display_jumbotron .arrow {
  margin-right: 15px;
  display: inline-block;
  height: 10px;
  position: relative;
  width: 10px;
  transform: rotate(135deg);
}

body.nu-style #vpn-list .display_jumbotron .arrow::after {
  border-bottom-style: solid;
  border-bottom-width: 3px;
  border-right-style: solid;
  border-right-width: 3px;
  border-color: #3d424a;
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  left: 0;
  position: absolute;
  top: 0;
}

body.nu-style #vpn-list .list-item.vpn {
  font-size: 19px;
  background-color: white;
  line-height: 1.4em;
  padding: 15px 20px;
  border-bottom: 15px solid #f6f7f9;
  color: #3d424a;
}

body.nu-style #vpn-list .list-item.vpn .icon {
  cursor: pointer;
}

body.nu-style #vpn-list .list-item.vpn .head {
  color: black;
}

body.nu-style #vpn-list .list-item.vpn .line {
  justify-content: space-between;
  margin-top: 15px;
}

body.nu-style #vpn-list .list-item.vpn .line .label {
  color: #3d424a;
  font-size: 16px;
}

body.nu-style #vpn-list .list-item.vpn .line .value {
  font-size: 20px;
  color: black;
}

body.nu-style #planning .list-item.planning {
  font-size: 16px;
  padding: 15px 20px 18px 20px;
  color: #3d424a;
}

body.nu-style #planning .list-item.planning.info {
  font-size: 18px;
  text-align: left;
  padding: 20px;
  line-height: 1.2em;
  color: black;
}

body.nu-style #planning .list-item.planning .head {
  justify-content: space-between;
  margin-bottom: 8px;
}

body.nu-style #planning .list-item.planning .time {
  font-size: 18px;
  color: black;
}

body.nu-style #planning .list-item.planning .service {
  line-height: 1.3;
}

body.nu-style #planning .list-item.planning .take {
  font-size: 16px;
  color: #5843CE;
  cursor: pointer;
}
body.nu-style #planning .list-item.planning .cancel {
  font-size: 16px;
  color: #5843CE;
  cursor: pointer;
}

body.nu-style #planning .list-item.planning.date {
  font-size: 20px;
  background-color: #f6f7f9;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #3d424a;
}

body.nu-style #planning .list-item.planning.chapter {
  font-size: 20px;
  background-color: #f6f7f9;
  color: #696e75;
  padding-top: 33px;
  padding-bottom: 0px;
}

body.nu-style #planning .list-item.planning.no-entries {
  padding: 20px;
}

body.nu-style #account #balance_jumbotron {
  color: black;
}

body.nu-style #account #balance_jumbotron #foreign_currency_text {
  font-size: 18px;
  text-align: right;
  margin-bottom: 3px;
}

body.nu-style #account #balance_jumbotron #gross {
  font-size: 15px;
}

body.nu-style #account .list-item.balance {
  padding: 5px 10px;
}

body.nu-style #account .list-item.balance.info {
  font-size: 18px;
  text-align: left;
  padding: 20px;
  line-height: 1.2em;
}

body.nu-style #account .list-item.balance .icon {
  width: 0;
}

body.nu-style #account .list-item.balance .content {
  width: 100%;
}

body.nu-style #account .list-item.balance .content .colmn {
  padding: 5px 10px;
}

body.nu-style #account .list-item.balance .content .colmn.up {
  padding-top: 7px;
  padding-bottom: 0;
  justify-content: space-between;
  font-size: 18px;
}

body.nu-style #account .list-item.balance .content .colmn.dn {
  color: #3d424a;
  font-size: 16px;
  padding-top: 0;
}

body.nu-style #account .list-item.balance .content .colmn.dn .time {
  margin-right: 15px;
}

body.nu-style #account #disclaimer_container {
  margin: 20px;
  margin-top: 15px;
  color: #3d424a;
  font-size: 15px;
}

body.nu-style #account #disclaimer_container #table_disclaimer {
  width: calc(100% - 40px);
}

body.nu-style .btn-lg {
  padding: 7px 20px;
  font-size: 17px;
}

body.nu-style #login {
  font-size: 19px;
}

body.nu-style #login #text-block-login2 .btn-primary {
  font-weight: 600;
}

body.nu-style #login .btn-lg {
  background-color: #5843CE;
  border: none;
}

body.nu-style #login .btn-lg.code {
  background-color: unset;
  border: 1px solid #3d424a;
  color: #3d424a;
  margin-top: 15px;
}

body.nu-style #login .text-block-login {
  color: black;
  bottom: calc(45vh + 0px);
}

body.nu-style #login .text-block-login #text-block-login1 {
  margin-top: 32px;
}

body.nu-style #login .text-block-login #text-block-login2 {
  margin-top: 45px;
}

body.nu-style #login .text-block-grey_background {
  margin-top: 12%;
  color: black;
}

body.nu-style #login .text-block-grey_background input {
  margin-bottom: 5px;
  border-radius: 10px;
}

body.nu-style #profile .image-cropper {
  scale: 0.66;
}

body.nu-style #profile .text-block-profile {
  color: black;
  bottom: calc(var(--height_middle) + var(--navbar_bottom_height) + var(--profile_image_height)/2 + 60px);
  height: 90px;
  top: 9vh;
  z-index: 1;
  background-color: #ffffffb0;
}

body.nu-style #profile .text-block-profile #display_name {
  margin-top: 12px;
  font-size: 18px;
}

body.nu-style #profile .profile-buttons {
  position: absolute;
  width: 100vw;
  height: 40vh;
  top: 52vh;
}

body.nu-style #profile .profile-buttons .profile_buttons_div {
  position: relative;
  margin-top: 8px;
  bottom: unset;
}

body.nu-style #profile .profile-buttons .profile_buttons_div .pro-bt {
  cursor: pointer;
  margin: 0;
  padding: 0;
  display: flex;
  max-width: unset;
  flex-direction: column;
  align-items: center;
}

body.nu-style #profile .profile-buttons .profile_buttons_div #actions {
  display: flex;
  justify-content: space-around;
  height: 15vh;
  min-height: 110px;
}

body.nu-style #profile .profile-buttons .profile_buttons_div .profile_button_text {
  margin-top: 5px;
  line-height: 1.2em;
  font-size: 14px;
}

body.nu-style #profile .profile-buttons .profile_buttons_div .row {
  margin-top: calc(15vh - 50px);
}

body.nu-style #profile .profile-buttons .profile_buttons_div .row#logout {
  margin-top: 0;
}

body.nu-style #profile .profile-buttons .profile_buttons_div input {
  margin-bottom: 4px;
}

body.nu-style #profile .profile-buttons .profile_buttons_div .profile_button {
  background-color: #3d424a;
}

body.nu-style #profile .profile-buttons .profile_buttons_div .profile_button.lite {
  background-color: #f6f7f9;
  border: 1px solid black;
}

.cancel-buttons {
  font-size: 15px;
  padding: 7px 20px;
  min-width: 80px;
  background-color: white;
  margin: 0;
  color: black;
  border: 1px solid black;
}
.cancel-buttons:hover {
  border: 1px solid black;
  background-color: white;
  margin: 0;
  color: black;
}
.cancel-shift-buttons {
  font-size: 15px;
  padding: 7px 20px;
  min-width: 80px;
  color: white;
  background-color: #3d424a;
  border: 1px solid black;
}

.cancel-shift-buttons:hover {
  color: white;
  background-color: #3d424a;
  border: 1px solid black;
}

select {
  appearance: none;
      user-select: none;
      overflow: hidden;
      min-height: 28px;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      max-width: 740px;
      font-size: inherit;
}

select.swal2-select:required:valid {
 background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 6" style="enable-background:new 0 0 16 6;" xml:space="preserve"><polyline points="0,0 16,0 8,6 "/></svg>') right 10px center/8px no-repeat,url('data:image/svg+xml;charset=UTF-8,<svg width="4" height="26" viewBox="0 0 4 26" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="4" height="26" rx="2" fill="%2351ca73"/></svg>') 4px 4px no-repeat #fff!important;
}

select.swal2-select:required:invalid {
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 6" style="enable-background:new 0 0 16 6;" xml:space="preserve"><polyline points="0,0 16,0 8,6 "/></svg>') right 10px center/8px no-repeat,url('data:image/svg+xml;charset=UTF-8,<svg width="4" height="26" viewBox="0 0 4 26" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="4" height="26" rx="2" fill="%23fe5a44"/></svg>') 4px 4px no-repeat #fff!important;
}

.content-select .swal2-select {
    display: inline-block!important;
    /* display: flex; */
    flex: 0 0 auto;
    /* width: auto; */
    padding: 0.375rem 3rem 0.375rem 1rem;
    display: block;
    width: 100%;
    padding: 0.375rem 3rem 0.375rem 1rem;
    -moz-padding-start: calc(1rem - 3px);
    font-size: 0.94rem;
    font-weight: 400;
    line-height: 1.42;
    color: #212529;
    background-clip: padding-box;
    background-color: #fff;
    border-radius: 0.4356rem;
    height: 40px;
      
}
    


.content-select .swal2-select:focus {
  outline: none;
}

.header-select {
  align-items: normal !important;
}

.shift-title {
  font-size: 18px !important;
  line-height: 135% !important;
  font-weight: 700 !important;
  padding-bottom: 10px !important;
  color: black !important;
}

.content-select  {
  font-weight: 400 !important;
  font-size: 15px !important;
}

.content-dialog  {
  font-weight: 400 !important;
  font-size: 15px !important;
}

.shift-dialog-action {
  justify-content: end !important;
}