/* Fonts */
@font-face {
    font-family: Arial;
   
}

@font-face {
    font-family: Arial;
   
}

@font-face {
    font-family: Arial;
   
}

@font-face {
    font-family: Arial;

}


.material-icons.md-36 {
    margin-top: 0px;
}

.material-icons.md-inactive {
    color: rgba(52,183,228,1); /*Goldbeck hellblau*/
}

.material-icons.md-inactive:hover {
    cursor: pointer;
    color: rgba(55, 58, 54, 1); /* Graphite*/
}

html, body {
    position: relative;
    margin: 0px auto;
    height: 100%;
    font-family: 'Arial';
    font-weight: 300;
    font-size: 100%;
}

p {
    font-size: 0.9rem;
    line-height: 1.25rem;
    font-family: 'Arial';
    color: black;
}

h1 {
    font-weight: 100;
}

h2 {
    font-size: 0.9rem;
    line-height: 1.25rem;
    text-align: left;
    font-family: 'Arial';
    color: white;
}

h3 {
    font-size: 1.2rem;
    line-height: 1.25rem;
    text-align: left;
    font-family: 'Arial';
    color: white;
}

h4 {
    font-size: 0.9rem;
}

.logo {

}

.logo img {
    width: 230px;
    margin-bottom: 0rem;
}

.fullBrowserWidthDiv {
    width: 100%;
    justify-content: center;
    padding-left: 1em;
    padding-right: 1em;
}

.fullBrowserWidthDiv2 {
    width: 100%;
    justify-content: left;
    padding-left: 1em;
    padding-right: 1em;
}

.fullPageWidthDiv {
    width: 100%;
    max-width: 960px;
    min-width: 800px;
}

.fullPageWidthDiv2 {
    width: 100%;

    min-width: 800px;
}

.flex {
    display: flex;
    box-sizing: border-box;
}

.flex2 {
    display: flex;
    box-sizing: border-box;
    background: rgba(231, 234, 236, 1); /*Goldbeck hellgrau*/
}

.flexItemsCentered {
    align-items: center;
}

.flexSpaceBetween {
    justify-content: space-between;
}

.flexAlignItemsCenter {
    display: none;
    align-items: center;
}

.flexColumnViertel {
    flex: 1 0 auto;
    width: 25%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.flexColumnfuenftel {
    flex: 1 0 auto;
    width: 20%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.flexEnd {
    justify-content: flex-end;
}

.borderBottom {
    border-bottom: solid 0px rgba(231, 234, 236, 1);
}

.borderTop {
    border-Top: solid 1px rgba(0, 0, 0, 1);
}

.borderTopF {
    border-Top: solid 0px rgba(0, 0, 0, 1);
}

.marginTopA {
    margin-top: 0.5rem;
}

.marginTopB {
    margin-top: 1.5rem;
}

.marginTopC {
    margin-top: 3rem;
}

.paddingTopBottomA {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.paddingTopBottomB {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/*Dropdown*/
.dropdownLabel {
    margin-right: 0.8rem;
    font-size: 0.8rem;
}
.dropdownWrapper {
  position: relative;
    display: flex;
}
.dropdownWrapper p {

}
.dropdownArrow {
  height: 24px;
  margin-right: 0px;
}

.arrowDown {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);

  -webkit-transition: transform 300ms ease;
  -moz-transition: transform 300ms ease;
  -ms-transition: transform 300ms ease;
  -o-transition: transform 300ms ease;
  transition: transform 300ms ease;
}
.arrowUp {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);

  -webkit-transition: transform 300ms ease;
  -moz-transition: transform 300ms ease;
  -ms-transition: transform 300ms ease;
  -o-transition: transform 300ms ease;
  transition: transform 300ms ease;
}

.select-selected {
  display: flex;
  width: 200px;
  justify-content: space-between;
  align-items: center;
  color: black;
  padding: 0px 14px;
  cursor: pointer;
  user-select: none;
}

.select-selected p {
    color: black;
  font-size: 14px;
  font-family: 'Arial';
}
.select-shadow {
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
}

.select-hide {
  display: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: white;
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
}

/*style the items (options), including the selected item:*/
.select-items div {
  color: black;
  padding: 14px 14px;
  border: 0px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-family: 'Arial';
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(208, 209, 209, 1);
}


.dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    border: none;
    padding: 0.5em 1em 0.5em 1em;
    height: 29px;
    overflow: hidden;
    width: 160px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    color: black;
}

.dropdown select {
    background: black;
    border: none;
    font-size: 14px;
    font-family: 'Arial';
    height: 29px;
    padding: 5px; /* If you add too much padding here, the options won't show in IE */
    width: 268px;
}

.backgroundColorBrand {
    background-color: rgba(231, 234, 236, 1); /*Goldbeck hellgrau*/
}

.backgroundColorA {
    background: rgba(255, 255, 255, 1); /*weiss*/
}

.backgroundColorB {
    background: rgba(231, 234, 236, 1); /*Goldbeck hellgrau*/
}

.backgroundColorF {
    background: rgba(55, 58, 54, 1); /*Graphite*/
}

.fontColorBrand {
    color: rgba(218, 35, 35, 1); /*Mobiliar Color*/
}

/*Diese Klasse wird per Javascript (mixer.js) gezählt und gibt die Anzahl der Spuren wieder:*/
.wrapperSpur {
    display: flex;
    height: 4.5rem;
}

.spur {
    display: flex;
    height: 4.5rem;
    background: white;
    border-bottom: solid 1px rgba(150, 155, 160, 1);
}

.spurTitle {
    width: 8rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-items: center;
}

.spurTitle p {
    font-family: 'Arial';
    font-size: 0.8rem;
    font-weight: 300;
    color: rgba(66, 75, 80, 1);
}

.wrapperPlaybuttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: center;
}

.wrapperPlaybuttons .button {
    height: 2.5rem;
    border-radius: 10rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.wrapperPlaybuttons .button + .button {
    margin-left: 0rem;

}



.buttonWidth {
    width: 9rem;
}

.platzhalterButtons {
    font-family: 'Arial';
    font-size: 13px;
    font-weight: 300;
    text-align: center;
    border: none;
    cursor: pointer;
    color: rgba(52,183,228,1); /*Goldbeck hellblau*/
    background: rgba(255, 255, 255, 1);
    /*	border-right: solid 1px rgba(220, 220, 220, 1);*/
    /*	border-top: solid 1px rgba(220, 220, 220, 1);*/
}

.button {
    font-family: 'Arial';
    font-size: 0.8rem;
    font-weight: 300;
    text-align: center;
    border: none;
    cursor: pointer;
    color: rgba(0, 0, 0, 1); /*Graphite*/
    background: rgba(255, 255, 255, 1);
    border-radius: 0%;
    height: 75%;
}

#spur0-0 {
    background-color: #ffffff;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
#spur0-1 {
    background-color: #ffffff;
}
#spur0-2 {
    background-color: #ffffff;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

@keyframes Loading {
    0% {
        color: rgba(0, 0, 0, 1);
        background: rgba(186, 221, 231, 1); /*olor*/
    }
    50% {
        color: rgba(20, 20, 20, 1);
        background: rgba(186, 221, 231, 1); /*Color*/
    }
    100% {
        color: rgba(0, 0, 0, 1);
        background: rgba(186, 221, 231, 1); /*Color*/
    }
}

.button:hover {
    color: black;
    background: rgba(222, 222, 222, 1); /*Goldbeck hellblau*/
}

/* overwrite .button:hover defaults for placeholder */
.buttonPlaceholder {
    background: inherit !important;
    cursor: default !important;
}

.buttonInactiv {
    color: rgba(231, 234, 236, 1);
    background: rgba(255, 255, 255, 1);
}

.buttonLoading {
    font-size: 0.8rem;
    font-weight: 300;
    text-align: center;
    border: none;
    cursor: pointer;
    color: rgba(0, 0, 0, 1); /*// Font Color*/
    background: rgba(255, 255, 255, 1);
    animation: Loading 1s infinite;
    /*    background-image: url(../images/btn_loading.svg);*/
}

button:focus {
    outline: 0;
}

.buttonClicked {
    color: black;
    background: rgba(186, 221, 231, 1); /*Goldbeck hellblau*/
}

.buttonDownload {
    height: 100%;
    text-align: center;
    border: none;
    cursor: pointer;
    color: rgba(165, 173, 177, 1); /*// Font Color*/
    background: white;
}

.buttonDownloadAktiv {
    color: rgba(55, 58, 54, 1); /*Graphite*/
}

.buttonDownloadAktiv:hover {
    background: white; /*Goldbeck hellblau*/
    color: white;
}

.volume {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

.textSpalte {
    flex: 2;
    padding-right: 1rem;
}

.wrapperExportButtons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex: 2;
}

.exportButton {
    height: 10.5rem;
    width: 0.5rem;
    border-radius: 10rem;
    font-family: 'Arial';
    font-size: 1.2rem;
    font-weight: 300;
    color: black;
    border: none;
    background: rgba(186, 221, 231, 1); /*Goldbeck hellblau*/
    /*    text-align: center;*/
    cursor: pointer;
    margin: 0.1rem 12.1rem;
}

.exportButtonText {
    /*	display: flex;*/
    /*	vertical-align: middle;*/
    /*	align-items: center;*/
    text-align: center;
}

.exportButton:hover {
    background: rgba(186, 121, 231, 1); /*Goldbeck hellblau*/
}

.exportButtonAnimation {
    animation: Loading 1s infinite;
}

.wrapperEffekteSection {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0px auto;
    width: 95%;
    max-width: 1000px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.wrapperEffekt {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    padding-right: 2rem;
    /*    justify-content: space-between;*/
    width: 15rem;
    /*    flex: 1;*/
}

.effektButton {
    margin-right: 0.25rem;
}

.effektButtonClicked {
    color: grey;
}

.effektName {
    margin-left: 1rem;
}

.stopButton {
    margin-right: 0.5rem;
}

/*Start Weiche*/
.wrapperWeiche {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: rgba(218, 35, 35, 1); /*Color*/
}

.weicheText {
    text-align: center;
    margin: 0;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.weicheText h1 {
}

.weicheText p {
    max-width: 25rem;
}

/*Ende Weiche*/


.downloadItem {
    height: 50px;
}

.lastDownloadItem {
    height: 49px;
}

.downloadItemControls {
    width: 268px;
    height: 48px;
}

.header {
    background: rgba(255, 255, 255, 1);
}
.header div {
    justify-content: space-between;
}

.headerButton {
    border: none;
    height: 29px;
    overflow: hidden;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    padding: 5px;
    margin-left: 5px;
    cursor: pointer;
}

.help {
    min-width: 90px;
    cursor: pointer;
    color: black;
    text-decoration: none;
}

.help a {
    display: inline-flex;
}

.helpImage {
    margin: 0px !important;
    width: 40px !important;
    height: 40px !important;
}

.help label {
    align-self: center;
    cursor: pointer;
    margin-left: 5px;
}

.buttonDisabled {
    cursor: default !important;
}

.downloadImage {
    width: 50px;
}

.videoElementContainer {
    width: 600px;
    background: black;
}

.videoElement {
    width: 100%;
    background: rgba(231, 234, 236, 1)
}

.videoUploadButton {
    width: 100px;
    margin-top: 7rem;
    align-self: center;
    cursor: pointer;
}

/* Help Style */
.overlay {
    position: fixed;
    margin: 48px auto;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(25, 30, 43, 0.9);
    overflow-x: hidden;
    z-index: 100 !important;
    color: white;
}

.helpWrapper {
    color: white;
    padding: 60px 6.5vw;
    margin: auto;
    font-size: larger;
    background-color: rgba(0, 0, 0, 0.2);
    min-height: 100%;
    text-align: left;
}

.helpWrapper p {
    color: white;
    font-family: 'Arial';
}

.videoOverlay {
    text-align: center;
}

.videoWrapper {
    color: white;
    padding: 20px 30px;
    margin: auto;
    font-size: larger;
    background-color: rgba(0, 0, 0, 0.2);
    text-align: center;
    min-height: 100vh;
}

.videoWrapper video {
    position: relative;
    max-width: 80vw;
    cursor: pointer;
}

.videoPlayButton {

    position: absolute;
    background-color: transparent;
    color: red;
    border: none;
    top: 0;
    left: 0;
    display: block;
    margin-top: 25%;
    margin-left: 50%;
}

.videoPlayButton i {
    font-size: 32pt;
    cursor: pointer;
}

.help, .helpWrapper h3 {
    color: white;
    font-weight: 500;
}

.helpWrapper img {
    width: 100%;
    margin: 20px 0px;
}

.helpCloseButton {
    color: white;
    position: fixed;
    right: 20px;
    top: 120px;
}

.helpCloseButton i {
    font-size: 32pt;
    cursor: pointer;
}

.helpWrapper video {
    max-width: 100%;
    max-height: 100%;
}

.helpButton, .helpButton label {
    cursor: pointer;
    padding-left: 30px;
}

.imageIcon {
  width: 32px;
  height: 32px;
  padding-right: 3px;
  padding-left: 3px;
}

.imageIconHelp {
  width: 64px;
  height: 64px;
  padding-right: 3px;
  padding-left: 3px;
}

input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    background: rgba(222, 222, 222, 1);
    height: 5px;
}

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    background: rgba(0, 222, 111, 255);
    cursor: pointer;
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
    border-radius: 50%;
    height: 15px;
    width: 15px;
    background: rgba(0, 164, 153, 255);
    cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
    border-radius: 50%;
    height: 15px;
    width: 15px;
    background: rgba(0, 164, 153, 255);
    cursor: pointer;
}

input[type=range]:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;

    /* Hides the slider so custom styles can be added */
    background: transparent;
    border-color: transparent;
    color: transparent;
}