.msc-blue { color:#3372DF; }
.msc-lightblue { color:#BBDEFB; }
.msc-mediumblue { color:#2196f3; }
.msc-darkblue { color:#1976d2; }
.msc-yellow { color:#ffc107; }
.msc-white { color:#feffff; }
.msc-mediumblue2 { color:#1066bb; }


html,body{
    height: 100%;margin:auto;
}

body { background-color:#000a12;color:#fff;font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:400;
    background-repeat: no-repeat;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover; }

button { cursor: pointer; }

header { position: relative;
    width: 100%;
    min-height: 100%;
    background-repeat: no-repeat;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}
@media (max-width: 800px), (max-height: 800px) {
    header {
        background-image: url('/images/studio800.jpg');
    }
}
@media (min-width: 801px), (min-height: 801px) {
    header {
        background-image: url('/images/studio1440.jpg');
    }
}
@media (min-width: 1441px), (min-height: 958px) {
    header {
        background-image: url('/images/studio.jpg');
    }
}

.headdiv {
    font-size:16px;margin: auto;text-align:center;
    position: relative;z-index:100;
    width:94%;
}
.headdiv h1 { font-size:3.3em;line-height: 1.2;margin:0;text-align:center; }
.headdiv h2 { font-size:1.04em;line-height:1;white-space:nowrap;margin:0 0 2px 0;text-align:center; }

.mdl-menu__item a img { margin-top: -3px;padding-right:8px; }
.toplogo { width:220px;margin:2px 0 12px 0; }
#botinfo { position:relative;height:90px;max-width:600px;margin:auto;padding-bottom:8px; }
#botinfo p { color:#a0aabb;font-size:14px;line-height: 15px;text-align: left; }
.botinfotxt { height:80px;margin:auto;padding-bottom:8px;overflow: auto;font-size: 10px; }
.mainaudiochoose {
    padding: 6px 20px;margin-top:14px;
    background: #2196f3;

    font-size: 18px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-weight: 500;
    text-decoration: none;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    outline: none;
    line-height: inherit;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 8px;
    color: #FFF;
    --msc-ripple-fg-size: 0;
    --msc-ripple-left: 0;
    --msc-ripple-top: 0;
    --msc-ripple-fg-scale: 1;
    --msc-ripple-fg-translate-end: 0;
    --msc-ripple-fg-translate-start: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.mainaudiochoose img { padding:8px; }

/* intro file open */
#openProgressdiv { text-align: center; }
#openProgress { opacity: 0;margin-top:14px;width:100%;max-width:900px;margin:auto; }


progress.msc-progress {
    width: 100%;
    height: 6px;
    margin: 0 auto;
    display: block;
    /* Important Thing */
    -webkit-appearance: none;
    border: none;
    background-color:#fff;
}

progress.msc-progress::-webkit-progress-bar {
    background: #ffc107;
    border-radius: 0px;
    padding: 0px;

}

progress.msc-progress::-webkit-progress-value {
    border-radius: 0px;
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
    background:
            -webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
            -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
            -webkit-linear-gradient(left, #fff, #2196f3);

    background-size: 25px 14px, 100% 100%, 100% 100%;
    -webkit-animation: move 5s linear 0 infinite;
}
@-webkit-keyframes move {
    0% {background-position: 0px 0px, 0 0, 0 0}
    100% {background-position: -100px 0px, 0 0, 0 0}
}


.clear { height:0;width:100%; clear:both; }


#playerContainer {
    width: 100%;
    background-color:#1976d2;
    z-index:100;
    position:relative;
}

#fileContainer {
    padding-top:6px;padding-bottom:6px;
    background-color:#2196f3;
}

.fileleft { margin-left:0px;width:64px;text-align:left; }

.filetitle { margin-left: 64px; margin-right:128px;padding-top:10px;text-align:left;white-space: nowrap;overflow:hidden;text-overflow: ellipsis; }

.fileright { float:right;margin-right:12px;width:128px;text-align:right; }

.columns1 {
    float: left;
    text-align:left;
    width:64px;
}
.columns2 {
    text-align:center;white-space: nowrap;
    margin-left: 64px; margin-right:64px;
}
.columns3 {
    float: right;
    text-align:right;
    width:64px;margin:auto
}

.loadbutton { float:left; }

#repeatButton {margin-top:10px; }

.txtvertalign { float:left;padding-top:6px;vertical-align: middle; }

.pitchpad { margin-top:12px; }

#waveform {
    background-color:#2196f3;
    border-top:#1066bb solid 1px;
    border-bottom:#1066bb solid 1px;
}

#playerControlsContainer {
    /*display: none;*/
    height:100%;
    break-inside:avoid;
}

.playerSections {
    padding-top:4px;
}
.controlDisplay { padding:10px 12px 2px 12px; }

.controlDisplaydiv {
    border-bottom:#1b7fe2 1px solid;
}

#trackLoadInput {
    display: none;
}
#saveButton {
    display: none;
}

#saveProgress {
    opacity: 0;
    width: 100%;
}

#playContainer { padding:12px; }

#positionDisplay,#durationDisplay {
    padding-top:22px;
}
.zoomTrack { margin-top:-10px; }
.controlTrack { padding:20px 0;}
.controlDisplay:after {
    content: "";
    display: table;
    clear: both;
}

.controlNumbers {
    text-align: center;
    padding-bottom: 8px;
}

.adjustmentDisplay {
    border: none;
    outline: none;
    text-align: center;
    background-color:#BBDEFB;color:#212121;
    padding: 0;
    height: 36px;
    width:64px;
    vertical-align: middle;
    border-radius: 4px;
}
.adjustmentDisplayTime {
    border: none;
    outline: none;
    text-align: center;
    background-color:#BBDEFB;color:#212121;
    padding: 0;
    margin: 0 12px;
    height: 36px;
    width:54px;
    vertical-align: middle;
    border-radius: 4px;
}

.time-stretch-times div {
    display: grid;
    align-items: center;
    vertical-align: middle;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2px;
    background: #1066bb;
    outline: none;
    margin: 20px 0;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 28px;
    border-radius: 4%;
    background: #ffc107;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 44px;
    height: 28px;
    border-radius: 4%;
    background: #ffc107;
    cursor: pointer;
}


@media only screen and (min-width: 501px) and (max-width: 640px) {
    .headdiv h1 { font-size:2.8em; }
    .headdiv h2 { font-size:0.9em; }
}

@media only screen and (min-width: 401px) and (max-width: 500px) {
    .headdiv h1 { font-size:2.5em; }
    .headdiv h2 { margin-top:2px;font-size:0.9em;white-space: normal; }
}

@media only screen and (min-width: 375px) and (max-width: 400px) {
    .headdiv h1 { font-size:2.1em;margin-top:6px; }
    .headdiv h2 { margin-top:2px;font-size:0.9em;white-space:normal; }
}

@media only screen and (max-width: 374px) {
    .headdiv h1 { font-size:2em;margin-top:2px; }
    .headdiv h2 { margin-top:2px;font-size:0.9em;white-space:normal; }
}

#main { display: none;
    margin:auto;max-width: 1024px;min-width:350px;
    z-index:5;
}
@media only screen and (max-width : 329px)  {
    #main { min-width:320px; }
    .columns1 { width:44px; }
    .columns2 { margin-left: 44px; margin-right:54px; }
    .columns3 { width:54px }
    #loopButtonA { margin-left:10px; }
}
@media only screen and (min-width : 330px) and (max-width : 349px)  {
    #main { min-width:100%; }
    .columns1 { width:54px; }
    .columns2 { margin-left: 54px; margin-right:54px; }
    .columns3 { width:54px }
}

@media only screen and (max-height : 340px) {
    .headdiv { width:96%;top: 12px; }
}


#bottspace {
    z-index:1;
    position:relative;
    margin:auto;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#mscwbottomad { display: flex;
    justify-content: center;
    align-items: center; }
.adsbygoogle {margin:auto;}

@media (orientation: portrait) {
    @media only screen and (max-height: 520px) {
        #bottspace {
            height: 110px;
        }

        #googlead {
            height: 100px;
        }

        .controlDisplay {
            padding: 4px 12px 0px 12px;
        }

        .slider {
            margin: 20px 0;
        }

        .headdiv {
            width: 96%;
            top: 20px;
        }

        .toplogo {
            margin: 8px 0 8px 10px;
            width: 130px;
        }

        .headdiv h1 {
            font-size: 2.8em;
            padding-top: 8px;
        }

        .headdiv h2 {
            white-space: normal;
        }

        .mainaudiochoose {
            margin-top: 4px;
        }
        .shareappbut { display: none;visibility: hidden; }
    }
    @media only screen and (min-height: 521px) and (max-height: 535px) and (max-width: 467px) {
        .controlDisplay {
            padding: 4px 12px 0px 12px;
        }

        .slider {
            margin: 20px 0;
        }

        .headdiv {
            top: 12px;
        }
    }
    @media only screen and (min-height: 536px) and (max-height: 595px) {
        .headdiv {
            top: 18px;
        }
        #botinfo { height:60px;overflow:scroll; }
        .botinfotxt  { height:50px; }
        #bottspace {
            position: fixed;
            height: 60px;
            bottom: 0;
        }

        #googlead {
            height: 50px;
        }
    }
    @media only screen and (min-height: 596px) and (max-height: 700px) {
        #main {
            padding-bottom: 110px;
        }

        #bottspace {
            position: fixed;
            height: 110px;
            bottom: 0;
        }

        #googlead {
            height: 100px;
        }
        .headdiv {
            top: 18px;
        }
    }
    @media only screen and (min-height: 701px) and (max-height: 800px) {
        #main {
            padding-bottom: 110px;
        }

        #bottspace {
            position: fixed;
            height: 110px;
            bottom: 0;
        }

        #googlead {
            height: 100px;
        }
        .headdiv {
            position: absolute;
            top: 45%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    }
    @media only screen and (min-height: 801px) and (max-height: 1159px) {
        #header {
            margin-bottom: -160px;
        }

        #bottspace {
            height: 160px;
        }

        #googlead {
            height: 150px;
        }

        .toplogo { width:220px;margin:2px 0 22px 0; }
        .headdiv {
            position: absolute;
            top: 45%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    }
    @media only screen and (min-height: 1160px) and (min-width: 920px) {
        #header {
            margin-bottom: -200px;
        }

        #bottspace {
            height: 200px;
        }

        #googlead {
            height: 180px;
            width: 1200px;
        }

        .toplogo { width:220px;margin:2px 0 22px 0; }
        .headdiv {
            position: absolute;
            top: 45%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    }
}


@media (orientation: landscape) {

    @media only screen and (max-height: 520px) {
        #header {
            margin-bottom: -60px;
        }

        #bottspace {
            height: 60px;
        }

        #googlead {
            height: 50px;
        }

        .controlDisplay {
            padding: 4px 12px 0px 12px;
        }

        .slider {
            margin: 20px 0;
        }

        .headdiv {
            width: 96%;
            top: 18px;
        }

        .toplogo {
            margin: -2px -8px 0 10px;
            width: 80px;
            float: left;
        }

        .headdiv h1 {
            font-size: 2.8em;
            padding-top: 8px;
        }

        .headdiv h2 {
            white-space: normal;
        }
        #openProgressdiv { break-after: right;  }
        .mainaudiochoose {
            margin-top: 4px;
        }

        @media only screen and (min-width: 700px) {
            .toplogo {
                margin: -12px -108px 0 10px;
                width: 110px;
            }
        }
    }

    @media only screen and (max-height: 330px) {
        .shareappbut { display: none;visibility: hidden; }
        .toplogo {
            margin: 0px -16px 0 10px;
        }
    }
    @media only screen and (max-height: 400px) {
        #botinfo { display: none; }
        .toplogo {
            margin: 6px -16px 0 10px;
        }
    }
    @media only screen and (min-height: 521px) and (max-height: 595px) {
        .shareappbut { display: none;visibility: hidden; }
        #header { margin-bottom:-60px; }
        #bottspace {
            height: 60px;position:absolute;
        }
        .toplogo {
            margin: 0 0 -10px 0;
            width: 130px;
        }
        .headdiv {
            top: 20px;
        }
    }
    @media only screen and (min-height: 596px) and (max-height: 829px) {
        #main {
            padding-bottom: 110px;
        }

        #bottspace {
            position: fixed;
            height: 110px;
            bottom: 0;
        }

        #googlead {
            height: 100px;
        }
        .toplogo { width:220px;margin:2px 0 12px 0; }
        .headdiv {
            position: absolute;
            top: 45%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    }
    @media only screen and (min-height: 830px) and (max-height: 1159px) {
        #header {
            margin-bottom: -160px;
        }

        #bottspace {
            height: 160px;
        }

        #googlead {
            height: 150px;
        }

        .toplogo { width:220px;margin:2px 0 22px 0; }
        .headdiv {
            position: absolute;
            top: 45%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    }
    @media only screen and (min-height: 1160px) and (min-width: 920px) {
        #header {
            margin-bottom: -200px;
        }

        #bottspace {
            height: 200px;
        }

        #googlead {
            height: 180px;
            width: 1200px;
        }

        .toplogo { width:160px;margin:2px 0 22px 0; }
        .headdiv {
            position: absolute;
            top: 45%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    }
}