/* FONTS */

@font-face {
    font-family: 'TNOpenSans';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TNOpenSans';
    src: url('fonts/OpenSans-Italic-webfont.eot');
    src: url('fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'TNOpenSans';
    src: url('fonts/OpenSans-Semibold-webfont.eot');
    src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'TNOpenSans';
    src: url('fonts/OpenSans-SemiboldItalic-webfont.eot');
    src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('fonts/MaterialIcons-Regular.woff2') format('woff2'),
       url('fonts/MaterialIcons-Regular.woff') format('woff'),
       url('fonts/MaterialIcons-Regular.ttf') format('truetype');
}

@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;src:url(fonts/fa-brands-400.eot);src:url(fonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(fonts/fa-brands-400.woff2) format("woff2"),url(fonts/fa-brands-400.woff) format("woff"),url(fonts/fa-brands-400.ttf) format("truetype"),url(fonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;src:url(fonts/fa-regular-400.eot);src:url(fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(fonts/fa-regular-400.woff2) format("woff2"),url(fonts/fa-regular-400.woff) format("woff"),url(fonts/fa-regular-400.ttf) format("truetype"),url(fonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;src:url(fonts/fa-solid-900.eot);src:url(fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(fonts/fa-solid-900.woff2) format("woff2"),url(fonts/fa-solid-900.woff) format("woff"),url(fonts/fa-solid-900.ttf) format("truetype"),url(fonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900}

/* CSS */

body, html {
  top:0px;
  left:0px;
  margin:0px;
  padding:0px;
  background:white;
  color:#3b3b3b;
  font:16px "TNOpenSans",Verdana,sans-serif;
  line-height:1.75;
  text-align:left;
}

@media (max-width:1024px){
  body, html {
    font-size:15px;
  }
}

@media (max-width:640px){
  body, html {
    font-size:14px;
  }
}

a, a:link {
  color:#0d2f67;
  text-decoration:none;
}

a:visited {
  color:#0d2f67;
  text-decoration:none;
}

a:hover {
  color:#0d2f67;
  text-decoration:underline;
}

a:active {
  color:#0d2f67;
  text-decoration:none;
}

a.linkImage {
  display:block;
  position:relative;
}

a.linkImage>div::after {
  background:#0d2f67;
  transition:opacity .3s;
  content:'';
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  opacity:0;
}

a.linkImage:hover>div::after {
  opacity:.4;
}

a.linkImage i.fas {
  display:block;
  position:absolute;
  top:calc(50% - .5em);
  left:calc(50% - .5em);
  font-size:4em;
  color:white!important;
  opacity:0;
  transition:opacity .3s;
}

a.linkImage:hover i.fas {
  opacity:1;
}

button {
  font-size:.8em;
  text-transform:uppercase;
  background:rgba(13,47,103,.5);
  color:white;
  width:auto;
  padding:.3em .5em;
  border:none;
  font-family:"TNOpenSans",sans-serif;
  cursor:pointer;
}

button i.fas {
  opacity:1;
}

button.disabled {
  cursor:not-allowed;
  opacity:.5;
}

h1 {
  margin-top:0;
  color:#0d2f67;
  border-bottom:1px solid #0d2f67;
  display:inline-block;
  padding-right:1.5em;
  padding-left:1.5em;
  margin-bottom:1.5em;
  font-size:1.8em;
}

h1::after {
  content:"";
  clear:both;
  display:table;
}

h2 {
  margin:0;
  font-weight:bold;
}

h6 {
  font-size:.9em;
  font-weight:bold;
  text-transform:uppercase;
  margin:0 0 .5em 0;
  letter-spacing:-.5px;
}

header {
  width:100%;
  padding:.75em 10px;
  background-color:#0d2f67;
  box-sizing:border-box;
}

header .row {
  max-width:100%;
  width:1100px;
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
}

@media (max-width:480px){
  header .row>div {
    text-align:center!important;
  }
  header .row>div>img {
    margin:0 auto;
  }
}

header #header-logo {
  width:196px;
  height:48px;
  display:block;
  max-width:100%;
}

header p {
  text-transform:uppercase;
  font-weight:bold;
  color:white;
  margin:0;
  font-size:1.3em;
  line-height:48px;
}

i.fas.big {
  font-size:1.5em;
}

img {
  max-width:100%;
  height:auto;
}

p:first-child {
  margin-top:0;
}

section {
  padding:.5em 10px 2em 10px;
  width:1100px;
  max-width:100%;
  margin:0 auto;
  box-sizing:border-box;
}

.bg-dark {
  background:rgba(13,47,103,.1);
}

.bg-light {
  background:rgba(13,47,103,.05);
}

.clearfix::after {
  content:"";
  clear:both;
  display:table;
}

.color-success, .color-okay {
  color:green;
}

.color-error, .color-warning {
  color:red;
}

.color-attention {
  color:orange;
}

.fas, .far {
  opacity:.7;
  margin-right:5px;
}

.material-icons {
  font-family:'Material Icons';
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  text-transform:none;
  letter-spacing:normal;
  word-wrap:normal;
  white-space:nowrap;
  direction:ltr;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'liga';
}

.pointer {
  cursor:pointer;
}

.row {
	margin:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

.row-block {
	margin:0;
}

.row::after {
  content:"";
  clear:both;
  display:table;
}

.row>div, .row-block>div {
  padding:.3em;
  box-sizing:border-box;
}

@media (max-width:360px){
  .xs2 {
    width:16.666667%;
  }
  .xs4 {
    width:33.333333%;
  }
  .xs6 {
    width:50%;
  }
  .xs8 {
    width:66.666667%;
  }
  .xs12 {
    width:100%;
  }
}

@media (min-width:361px) and (max-width:480px){
  .s2 {
    width:16.666667%;
  }
  .s4 {
    width:33.333333%;
  }
  .s6 {
    width:50%;
  }
  .s8 {
    width:66.666667%;
  }
  .s12 {
    width:100%;
  }
}

@media (min-width:481px) and (max-width:768px){
  .m2 {
    width:16.666667%;
  }
  .m3 {
    width:25%;
  }
  .m4 {
    width:33.333333%;
  }
  .m5 {
    width:41.666667%;
  }
  .m6 {
    width:50%;
  }
  .m8 {
    width:66.666667%;
  }
  .m12 {
    width:100%;
  }
}

@media (min-width:769px){
  .l2 {
    width:16.666667%;
  }
  .l3 {
    width:25%;
  }
  .l4 {
    width:33.333333%;
  }
  .l5 {
    width:41.666667%;
  }
  .l6 {
    width:50%;
  }
  .l8 {
    width:66.666667%;
  }
  .l12 {
    width:100%;
  }
}

.center {
  text-align:center;
}

.row.center {
	justify-content:center;
}

.row.left {
	justify-content:flex-start;
}

.d-none {
  display:none;
}

.highlight-bg {
  background-color:rgba(13,47,103,.1);
}

.left {
  text-align:left;
}

.mb-half {
  margin-bottom:.5em;
}

.mb-1 {
  margin-bottom:1em;
}

.mb-2 {
  margin-bottom:2em;
}

.mt-half {
  margin-top:.5em;
}

.mt-1 {
  margin-top:1em;
}

.mt-2 {
  margin-top:2em;
}

.p-0 {
  padding:0!important;
}

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

.pt-l {
  padding-left:0!important;
}

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

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

.right {
  text-align:right;
}

.smaller {
  font-size:.8em;
}

.strike {
  text-decoration:line-through;
}

.textSuggestion {
  text-decoration:underline dotted;
  font-style:italic;
  cursor:pointer;
  margin-left:15px;
  opacity:.75;
  font-weight:normal;
}

.textSuggestion:before {
  content:'\f0c5';
  font-family:"Font Awesome 5 Free";
  font-style:normal;
  margin-right:5px;
  text-decoration:none;
}

.w-400 {
  max-width:400px!important;
}

label {
  text-align:right;
  display:block;
  padding:.5em 0;
  line-height:1.3em;
}

@media (max-width:480px){
  label {
    text-align:center;
  }
}

input, textarea {
  padding:.5em;
  font-family:'TNOpenSans',sans-serif;
  font-size:1em;
  border:none;
  color:#3b3b3b;
  background:rgba(13,47,103,.05);
  box-sizing:border-box;
  transition:all .3s;
  width:100%;
  max-width:100%;
  line-height:1.3em;
  border-radius:5px;
  height:36px;
}

textarea {
  resize:none;
  height:5em;
}

select {
  width:400px;
  max-width:100%;
  font-family:'TNOpenSans',sans-serif;
  font-size:1em;
  padding:5px;
}

select.eventListSelection {
  width:calc(100% - 160px);
  margin-left:10px;
  color:#666;
  border:none;
}

@media (max-width:1024px){
  select.eventListSelection {
    width:100%;
    display:block;
    margin-left:0;
    margin-top:10px;
  }
}

input:focus, select:focus, textarea:focus, button:focus {
  outline:none;
}

input:focus, textarea:focus {
  -webkit-box-shadow:inset 0px 0px 8px 0px rgba(0,0,0,0.3);
  -moz-box-shadow:inset 0px 0px 8px 0px rgba(0,0,0,0.3);
  box-shadow:inset 0px 0px 8px 0px rgba(0,0,0,0.3);
  background:rgba(13,47,103,.1);
}

input[type="checkbox"] {
  width:auto;
}

input[type="submit"] {
  font-size:.9em;
  text-transform:uppercase;
  background:rgba(13,47,103,.5);
  color:white;
  width:auto;
  padding:.5em 1em;
  cursor:pointer;
  -webkit-appearance:none;
}

input[type="submit"]:hover {
  background:rgba(13,47,103,.25);
  color:#0d2f67;
}

input[type="file"] {
  background:none;
  transition:none;
}

form#login {
  margin-top:2em;
}

#loginRow {
  margin-bottom:3em;
  text-align:right;
  font-size:.75em;
}

.hinweiskasten {
  border:1px solid #3b3b3b;
  padding:.5em 1em;
  display:inline-block;
  border-radius:3px;
}

.hinweiskasten.warnung {
  border:1px solid red;
  color:red;
}

.hinweiskasten.warnung a {
  color:red;
}

.hinweiskasten.erfolg {
  border:1px solid green;
  color:green;
}

.hinweiskasten.erfolg a {
  color:green;
}

.hinweiskasten>.fas {
  float:left;
  font-size:2em;
  line-height:2em;
  margin:0;
  text-shadow:2px 2px 2px rgba(100,100,100,0.8);
  opacity:1;
}

.hinweiskasten p {
  text-align:left;
  margin:0 0 0 50px;
}

#session-info {
  background:rgba(13,47,103,.1);
  display:inline-block;
  padding:.5em;
  font-size:.8em;
  float:right;
  line-height:1.5em;
  margin:0 0 2em 0;
  border-radius:3px;
}

#session-info p {
  margin:0 0 .3em 0;
}

#session-info>div>div {
  width:50%;
  float:left;
}

#session-info>div>div:last-child {
  text-align:right;
}

.liste {
  font-size:.8em;
  overflow-x:auto;
  overflow-y:hidden;
}

.liste table {
  width:100%;
  border-collapse:collapse;
}

.liste table thead tr {
  background:rgba(13,47,103,.75);
  color:white;
}

.liste table tbody tr:nth-of-type(2n) {
  background:rgba(13,47,103,.05);
  margin-bottom:5px;
}

.liste table tbody tr:nth-of-type(2n+1) {
  background:rgba(13,47,103,.1);
  margin-bottom:5px;
}

.liste_boxoffice table tbody tr.event {
  background:rgba(13,47,103,.1);
  margin-bottom:5px;
}

.liste_boxoffice table tbody tr.event-details {
  background:rgba(13,47,103,.05);
  margin-bottom:5px;
}

.liste th, .liste td {
  vertical-align:top;
  padding:.5em;
  position:relative;
}

.liste th {
  white-space:nowrap;
}

.liste_bestellungen td:nth-of-type(1) {
  width:15px;
}

.liste_bestellungen td:nth-of-type(2) {
  width:60px;
}

.liste_bestellungen td:nth-of-type(3) {
  width:65px;
}

.liste_bestellungen td:nth-of-type(4) {
  width:80px;
}

.liste_bestellungen td:last-child a {
  display:block;
  white-space:nowrap;
}

.liste_printathome td:nth-of-type(1) {
  width:15px;
}

.liste_printathome td:nth-of-type(2) {
  width:60px;
}

.liste_printathome td:nth-of-type(3) {
  width:65px;
}

.liste_printathome td:last-child a {
  display:block;
  white-space:nowrap;
}

.liste_printathome .pagination {
  opacity:.7;
  margin-right:5px;
}

.liste_printathome .pagination:before {
  content:"(";
}

.liste_printathome .pagination:after {
  content:")";
}

.liste_boxoffice table tr td:first-child {
  width:15px;
}

.liste_layouts table tr td:first-child {
  width:15px;
}

.liste_layouts table tr td:last-child {
  width:60px;
}

.liste_layouts td>b {
  cursor:pointer;
}

.liste_layouts label {
  text-align:left;
  font-weight:bold;
}

.liste_layouts label input, .liste_layouts label textarea {
  width:100%;
  margin-top:.25em;
}

.liste_layouts label textarea {
  height:4.9em;
}

.liste_layouts .layout_grafik {
  padding:.5em 0;
  font-weight:bold;
}

.liste_layouts .layout_grafik div div {
  height:calc(30px + .6em);
  line-height:30px;
}

.liste_layouts .layout_grafik div div label {
  line-height:30px;
  padding-top:0;
  padding-bottom:0;
  font-weight:normal;
}

.liste_layouts .layout_grafik input {
  vertical-align:middle;
  width:auto;
  margin:0 10px 0 0;
}

.liste_layouts .layout_grafik img {
  height:30px;
  vertical-align:middle;
}

.liste_layouts .saveTicketLayout, .liste_layouts .viewCurrentLayout {
  text-align:center;
  margin:.5em 0;
}

.liste_qrcode .ticket_usable .validity {
	cursor:auto;
	font-size:5em;
}

.liste_qrcode .ticket_usable div:last-child {
	font-weight:bold;
}

.liste_qrcode tr td {
	text-align:left;
}

.liste_qrcode tr td:first-child {
	font-weight:bold;
	width:25%;
}

.liste_vorverkauf tr td:nth-last-child(2),
.liste_vorverkauf tr td:last-child,
.liste_vorverkauf tr th:nth-last-child(2),
.liste_vorverkauf tr th:last-child {
	text-align:right;
}

.liste_vorverkauf tfoot td {
	font-weight:700;
}

.liste_vorverkauf_varianten>div {
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
	column-gap:30px;
	margin-bottom:10px;
}

#events .liste table thead tr:first-child th:nth-last-child(+1), #events .liste table td:nth-last-child(+1), #events .liste table thead tr:first-child th:nth-last-child(+2), #events .liste table td:nth-last-child(+2), #events .liste table thead tr:first-child th:nth-last-child(+3), #events .liste table td:nth-last-child(+3) {
  text-align:center;
}

.order-thread p,
.order-state-history p {
	line-height:1.2em;
	font-size:.9em;
}

.order-thread p>span,
.order-state-history p>span {
	font-size:.9em;
	text-transform:uppercase;
	font-weight:bold;
}

.order-thread p:last-child,
.order-state-history p:last-child {
	margin-bottom:0;
}

.radiobutton {
  display:block;
  position:relative;
  padding-left:35px;
  cursor:pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

/* Hide the browser's default radio button */
.radiobutton input {
  position:absolute;
  opacity:0;
  cursor:pointer;
  height:0;
  width:0;
}

/* Create a custom radio button */
.radiobutton .checkmark {
  position:absolute;
  top:4px;
  left:0;
  height:22px;
  width:22px;
  background-color:white;
  border-radius:50%;
}

/* On mouse-over, add a grey background color */
.radiobutton:hover input ~ .checkmark {
  background-color:#ccc;
}

/* When the radio button is checked, add a blue background */
.radiobutton input:checked ~ .checkmark {
  background-color:rgba(13,47,103,.75);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiobutton .checkmark:after {
  content:"";
  position:absolute;
  display:none;
}

/* Show the indicator (dot/circle) when checked */
.radiobutton input:checked ~ .checkmark:after {
  display:block;
}

/* Style the indicator (dot/circle) */
.radiobutton .checkmark:after {
  top:6px;
  left:6px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:white;
}

.checkbutton-negative {
  display:block;
  position:relative;
  padding-left:25px;
  cursor:pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.checkbutton-negative.disabled {
	opacity:.2;
}

/* Hide the browser's default checkbox */
.checkbutton-negative input {
  position:absolute;
  opacity:0;
  cursor:pointer;
  height:0;
  width:0;
}

/* Create a custom checkbox */
.checkbutton-negative .checkmark {
  position:absolute;
  top:5px;
  left:0;
  height:19px;
  width:19px;
  background-color:white;
}

/* On mouse-over, add a grey background color */
.checkbutton-negative:hover input ~ .checkmark {
  background-color:#ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbutton-negative input:checked ~ .checkmark {
  background-color:rgba(13,47,103,.75);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbutton-negative .checkmark:before, .checkbutton-negative .checkmark:after {
  content:"";
  position:absolute;
  /*display:none;*/
  display:block;
}

/* Show the checkmark when checked
.checkbutton-negative input:checked ~ .checkmark:before, .checkbutton-negative input:checked ~ .checkmark:after {
  display:block;
} */

.checkbutton-negative .checkmark:before {
  width:0;
  height:0;
}

.checkbutton-negative .checkmark:after {
  left:6px;
  top:2px;
  width:5px;
  height:10px;
  border:solid rgba(13,47,103,.75);
  border-width:0 3px 3px 0;
  -webkit-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  transform:rotate(45deg);
}

/* Style the checkmark/indicator */
.checkbutton-negative input:checked ~ .checkmark:before, .checkbutton-negative input:checked ~ .checkmark:after {
  width:17px;
  height:3px;
  background:white;
  position:absolute;
  top:8px;
  left:1px;
  border:none;
}

.checkbutton-negative input:checked ~ .checkmark:before {
  -webkit-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

.checkbutton-negative input:checked ~ .checkmark:after {
  -webkit-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  transform:rotate(45deg);
}

/* The switch - the box around the slider */
.switch {
  position:relative;
  display:block;
  width:45px;
  height:24px;
  padding:0;
}

/* Hide default HTML checkbox */
.switch input {
  opacity:0;
  width:0;
  height:0;
}

/* The slider */
.slider {
  position:absolute;
  cursor:pointer;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#ccc;
  -webkit-transition:.4s;
  transition:.4s;
}

.slider:before {
  position:absolute;
  content:"";
  height:16px;
  width:16px;
  left:4px;
  bottom:4px;
  background-color:white;
  -webkit-transition:.4s;
  transition:.4s;
}

input:checked + .slider {
  background-color:rgba(13,47,103,.75);
}

input.pending:checked + .slider {
  background-color:#ccc;
}

input:checked + .slider:before {
  -webkit-transform:translateX(20px);
  -ms-transform:translateX(20px);
  transform:translateX(20px);
}

/* Rounded sliders */
.slider.round {
  border-radius:24px;
}

.slider.round:before {
  border-radius:50%;
}

.notefield, .purposefield {
  width:250px;
  margin:0;
}

.notefield::placeholder, .purposefield::placeholder {
  opacity:.5;
}

.validity {
  font-size:1.5em;
  cursor:pointer;
}

.info_validity {
  font-size:1.5em;
}

.validity.valid, .info_validity.valid {
  color:green;
}

.validity.invalid, .info_validity.invalid {
  color:red;
}

.info_validity.undetermined {
  color:orange;
}

.validity.various {
  color:#333;
  cursor:default;
}

.redemption {
  font-size:2em;
  color:rgba(13,47,103,.75);
  opacity:1;
}

.opendetails {
  font-size:1.7em;
  padding:.15em 0 0 0;
  color:#0d2f67;
  cursor:pointer;
}

input.filtern {
  width:150px;
  background-color:white;
}

span.list_valid_tickets {
  margin-right:8px;
}

.list_invalid_tickets {
  opacity:.5;
}

.toggle_more_details {
  cursor:pointer;
  transition:all .2s;
}

.toggle_more_details.open {
  transform:rotate(90deg);
}

.more_details {
  display:none;
  padding:.5em;
  margin:.5em .5em .5em 0;
  background:rgba(13,47,103,.05);
}

.more_details p {
  margin:0 0 .5em 0;
}

.more_details .ticketnumber {
  margin-bottom:6px;
}

.more_details .ticketnumber:last-child {
  margin-bottom:0;
}

.more_details i.validity {
  vertical-align:text-bottom;
  margin-left:10px;
}

.more_details label.switch {
  display:inline-block;
  vertical-align:bottom;
  margin-left:10px;
}

.more_details .redeem_date {
  display:inline-block;
  margin-left:5px;
}

#picPreview {
  width:602px;
  max-width:100%;
  margin:0 auto;
  border:1px solid #3b3b3b;
  padding:0;
}

#picPreview img {
  max-width:100%;
  display:block;
}

.uploadedpic {
  border:1px solid #3b3b3b;
  display:block;
  box-sizing:border-box;
}

@-moz-keyframes progress {
    from { width:100%; }
    to { width:0%; }
}
@-webkit-keyframes progress {
    from { width:100%; }
    to { width:0%; }
}
@keyframes progress {
    from { width:100%; }
    to { width:0%; }
}

.progress-line {
	width:100%;
}

.progress-line div {
	height:2px;
}

.progress-line.run div {
	background:#0d2f67;
	-webkit-animation-name:progress;
	-webkit-animation-duration:20000ms;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function:linear;
	-moz-animation-name:progress;
	-moz-animation-duration:20000ms;
	-moz-animation-iteration-count:1;
	-moz-animation-timing-function:linear;
	-ms-animation-name:progress;
	-ms-animation-duration:20000ms;
	-ms-animation-iteration-count:1;
	-ms-animation-timing-function:linear;
	animation-name:progress;
	animation-duration:20000ms;
	animation-iteration-count:1;
	animation-timing-function:linear;
}

#ticket_quantity .result {
	background-color:rgba(13,47,103,.1);
}

#ticket_quantity .heading {
  background: #0d2f67;
  color:white;
  padding:0 10px;
  text-transform:uppercase;
  font-weight:bold;
  font-size:.9em;
  margin-bottom:.5em;
  text-align:center;
}

#ticket_quantity .content {
  padding:0 10px;
  margin-bottom:1em;
  text-align:center;
  font-weight:700;
}

#ticket_quantity .counter {
	font-size:3em;
	line-height:1;
	font-weight:400;
}

/* LEGENDE */

.legend {
  border:1px solid #3b3b3b;
  padding:.7em;
  text-align:left;
}

.legend dl {
  margin:0;
  font-size:.9em;
  line-height:1.4;
}

.legend dt {
  float:left;
  clear:both;
}

.legend dd {
  margin-left:20px;
  margin-bottom:.5em;
  letter-spacing:-.5px;
}

.legend p {
  margin:0;
  font-size:.9em;
}

/* TUTORIAL */

.code {
	background:rgba(13,47,103,.05);
    font-family:monospace;
    padding:1em;
    border-radius:4px;
    margin:0 1em;
}

/* INFO-TEXT */

p.info-text {
  font-size:.9em;
  letter-spacing:-.5px;
}

/* WAITING & SPINNING */

.waiting {
  text-align:center;
  width:100%;
}

.waiting .spinning {
  font-size:5em;
  line-height:1em;
  margin:.1em 0 .5em 0;
}

@-moz-keyframes spin {
    from { -moz-transform:rotate(0deg); }
    to { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform:rotate(0deg); }
    to { -webkit-transform:rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.waiting .spinning i {
  -webkit-animation-name:spin;
  -webkit-animation-duration:1500ms;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -moz-animation-name:spin;
  -moz-animation-duration:1500ms;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
  -ms-animation-name:spin;
  -ms-animation-duration:1500ms;
  -ms-animation-iteration-count:infinite;
  -ms-animation-timing-function:linear;
  -o-transition:rotate(3600deg);
  margin:0;
}

.window_modal {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  box-sizing:border-box;
}

.window_modal .background {
  background:rgba(0,0,0,.5);
  width:100%;
  height:100%;
  position:absolute;
}

.window_modal .container {
  width:60%;
  height:80%;
  background:white;
  padding:20px;
  box-sizing:border-box;
  position:absolute;
  left:20%;
  top:10%;
}

@media (max-width:1400px){
  .window_modal .container {
    width:90%;
    height:90%;
    left:5%;
    top:5%;
  }
}

.window_modal .container .close_window_modal {
  position:absolute;
  top:-15px;
  right:-15px;
  width:30px;
  height:30px;
  cursor:pointer;
}

.window_modal .container .close_window_modal span {
  display:block;
  width:30px;
  height:30px;
  background-color:white;
  border:2px solid #0d2f67;
  border-radius:50%;
}

.window_modal .container .close_window_modal span:before, .window_modal .container .close_window_modal span:after {
  content:"";
  width:2px;
  height:20px;
  background:#0d2f67;
  display:block;
  position:absolute;
  left:16px;
  top:7px;
}

.window_modal .container .close_window_modal span:before {
  transform:rotate(45deg);
}

.window_modal .container .close_window_modal span:after {
  transform:rotate(-45deg);
}

.window_modal .container .inner {
  width:100%;
  height:100%;
  background-color:rgba(13,47,103,.1);
  overflow:auto;
}

.window_modal .container .inner h2 {
  background:#0d2f67;
  color:white;
  text-align:center;
}

.window_modal .container .inner .heading {
  background: #0d2f67;
  color:white;
  padding:0 10px;
  text-transform:uppercase;
  font-weight:bold;
  font-size:.9em;
  margin-bottom:.5em;
  text-align:center;
}

.window_modal .container .inner .content {
  padding:0 10px;
  margin-bottom:1em;
  text-align:center;
}

.window_modal .container .inner .content .switch {
  margin-left:auto;
  margin-right:auto;
}

/* ANGULAR */

.ng-hide:not(.ng-hide-animate) {
  display:none;
}

/* QR CODE SCANNER */

#qrcode-error {
	display:none;
	background:rgba(255,0,0,.3);
	padding:10px;
}

button#qrcode_cancel_scan {
	display:none;
}

#qrcode-reader {
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	padding:0;
}

#qrcode-reader video {
	display:block;
}

#qrcode-reader>div:first-child>span:first-child:before {
	content:'QR-Code-Scanner';
}

#qrcode-reader>div:first-child>span:first-child a {
	display:none;
}

#qrcode-reader__status_span:before {
	content:'Status: ';
}

#qrcode-reader__dashboard_section {
	box-sizing:border-box;
}

#qrcode-reader__dashboard_section>div:last-child {
	margin-top:1em;
	font-size:.9em;
}

#qrcode-reader #qrcode-reader__scan_region canvas {
	width:100%!important;
	height:auto!important;
}

/* COMPANION LINKS */

.liste-begleitpersonen table tbody td {
	line-height:3em;
}

.liste-begleitpersonen .clipboard-link {
	overflow:hidden;
	width:20px;
}

.liste-begleitpersonen .clipboard-link div {
	width:40px;
	position:relative;
	transition:all .3s;
	left:0;
}

.liste-begleitpersonen .clipboard-link i {
	width:20px;
	margin:0;
	font-size:1.5em;
	cursor:pointer;
}

.liste-begleitpersonen .clipboard-link i.fa-check {
	color:green;
}

.liste-premium-tickets table tbody td {
	padding:1em .5em;
}

.liste-premium-tickets table tbody td i.fas.fa-file-pdf:before {
	font-size:1.5em;
}