:root {
    --vwPadder: 4vw;
    --buttonHeight: 8vh;
    --fontSize: 4vh;
    --fontSizeW: 4vw;
    --lineThickness: 0.35vw;
    --AudioContainer: 10vh;
    --AudioPlayerPalette: #68d3e7;
    --AudioPlayerPaletteD: #0d7c91;
    --VideoContainer: 2vw;
}


/*BLOG*/

.EmbedIframe {
    width: 100%;
    border-width: 0;
    border-style: none;
}

.BlogTextbox {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.BlogTextbox>a {
    text-decoration: underline;
    color: #f0639b;
}

.BlogTextbox>a:visited {
    text-decoration: underline!important;
    color: #f0639b;
}

.Highlight {
    -webkit-animation: blink-1 3s infinite forwards;
    animation: blink-1 3s infinite forwards;
    text-align: center;
    font-family: 'Fredoka One', cursive;
    -webkit-text-stroke: 0.2vw #f0639b;
    position: absolute;
    width: 100%;
    color: white;
    font-size: 6vh;
    top: 10%;
}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}


/* ----------------------------------------------
 * Generated by Animista on 2020-5-13 15:7:0
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */


/**
 * ----------------------------------------
 * animation blink-1
 * ----------------------------------------
 */

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-in {
    -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
    animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
}

@-webkit-keyframes blink-1 {
    0%,
    50%,
    100% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}

@keyframes blink-1 {
    0%,
    50%,
    100% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}

.BlogCenterAlign {
    display: flex;
    width: 100%;
    justify-content: center;
}

.BlogIMGItem>img {
    width: 100%;
}

.BlogIMGItem>div {
    border-top: var(--lineThickness) solid #f0639b;
    font-size: calc( 2vw / 1);
    color: #f0639b;
    font-family: 'Fredoka One', cursive;
    padding: 1vw;
    text-align: center;
}

.BlogIMGItem {
    width: 35%;
    border: var(--lineThickness) solid #f0639b;
    border-radius: var(--lineThickness);
    margin: 3vw;
}

.BlogText {
    padding: 1vw;
}

.BlogTextbox {
    position: absolute;
    margin-bottom: 15vh;
    left: calc( 12.5vw - 10px);
    top: 12.5vh;
    padding-bottom: calc( var(--fontSize) /2);
    width: 75%;
    border: var(--lineThickness) solid #f0639b;
    border-radius: 20px;
    background: rgb(255, 255, 255, 0.90);
    z-index: 100;
}

#BlogFooter {
    border-top: var(--lineThickness) solid #f0639b;
    display: flex;
    justify-content: space-between;
    padding: 1vw 10vw 1vw 10vw;
    font-family: 'Fredoka One', cursive;
    font-weight: lighter;
    color: white;
    -webkit-text-stroke: 0.15vw #f0639b;
    text-shadow: 0.35vw 0.35vw 0 #f0639b, -0.15vw -0.15vw 0 #f0639b, 0.15vw -0.15vw 0 #f0639b, -0.15vw 0.15vw 0#f0639b, 0.15vw 0.15vw 0 #f0639b;
    font-size: calc( 2vw * 2.5);
}

#blogtemplate {
    display: none;
}

.blogSplitter {
    position: absolute;
    top: 0;
    display: flex;
    height: 100%;
    width: 100%;
}

.blogFullWidth {
    width: 100%!important;
}

.blogSplitter>iframe:last-child {
    width: 0;
    transition: width 1s;
}

.iframeBlog {
    height: 100%;
    width: 100%;
}

.BlogFlex {
    display: flex;
}

.BlogSidebar {
    position: absolute;
    left: 100%;
    width: 100%;
    height: 100%;
}

.BlogText {
    word-break: break-word;
    color: #f0639b;
    font-size: calc( 2vw / 0.75);
    font-family: 'ABeeZee', sans-serif;
    padding-left: 1vw;
    padding-right: 1vw;
}

.BlogContainer {
    position: absolute;
    margin-bottom: 15vh;
    left: calc( 12.5vw - 10px);
    padding-bottom: calc( var(--fontSize) /2);
    width: 75%;
    top: 100%;
    border: var(--lineThickness) solid #f0639b;
    border-radius: 20px;
    background: rgb(255, 255, 255, 0.90);
    z-index: 100;
}

.BlogItem:first-child {
    border-top: none!important;
}

.BlogItem {
    border-top: var(--lineThickness) solid #f0639b;
}

.BlogHeader {
    text-align: center;
    border-bottom: var(--lineThickness) solid #f0639b;
    padding: 10px;
    color: white;
    -webkit-text-stroke: 0.15vw #f0639b;
    text-shadow: 0.35vw 0.35vw 0 #f0639b, -0.15vw -0.15vw 0 #f0639b, 0.15vw -0.15vw 0 #f0639b, -0.15vw 0.15vw 0#f0639b, 0.15vw 0.15vw 0 #f0639b;
    font-family: 'Fredoka One', cursive;
    font-weight: lighter;
    font-size: calc( 2vw * 2.5);
}

.BlogSmallHeader {
    text-shadow: 0.2vw 0.2vw 0 #f0639b, -0.07vw -0.07vw 0 #f0639b, 0.07vw -0.07vw 0 #f0639b, -0.07vw 0.07vw 0#f0639b, 0.07vw 0.07vw 0 #f0639b;
    text-align: left!important;
    font-size: calc( 2vw * 1.5);
    display: flex;
    justify-content: space-between;
}

.BlogSmallHeader>div:last-child {
    font-size: calc( 2vw * 1.2)!important;
}


/*DASHBOARD*/

.dashboardItem>a {
    text-decoration: none;
}

#template {
    display: none;
}

#PAGE {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboardItemHeaderSpan {
    word-break: break-all;
    text-decoration: none;
}

.dashboardItemImage {
    object-fit: scale-down;
    width: 100%;
    height: 100%;
}

::-webkit-scrollbar {
    width: 20px;
}


/* Track */

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: #f0639b;
    border-radius: 10px;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: #a12f5c;
}

.dashboardERROR {
    font-size: calc( var(--fontSize) * 2);
    color: white;
}

#topPadding {
    flex-basis: auto;
    opacity: 0.01;
    width: 100%;
}

.dashboardImageContainer {
    height: 100%;
    padding: calc(var(--lineThickness) * 2);
}

#MainTitle {
    flex-basis: auto;
    z-index: 10;
    font-family: 'Fredoka One', cursive;
    font-size: calc( var(--fontSize) * 2);
    color: white;
    text-align: center;
}

#mainDashboard {
    overflow-y: scroll;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
    justify-content: space-evenly;
}

.dashboardItemButtons {
    display: flex;
    border-bottom: var(--lineThickness) solid #f0639b;
    justify-content: space-evenly;
}

.dashboardItem {
    width: 15vw;
    margin: calc(var(--lineThickness) * 2);
    height: 22vw;
    border: var(--lineThickness) solid #f0639b;
    border-radius: 20px;
    background: rgb(255, 255, 255, 0.90);
    display: flex;
    flex-direction: column;
}

.dashboardItemHeader {
    padding-left: var(--lineThickness);
    padding-right: var(--lineThickness);
    color: #f0639b;
    font-family: 'Fredoka One', cursive;
    font-size: calc(calc((75vw - 4.5rem) / 7) / 8);
    word-wrap: break-word;
    border-bottom: var(--lineThickness) solid #f0639b;
    text-align: center;
}

#mainFlex {
    flex-basis: auto;
}

.GenericButtonDesignDashboard:hover {
    background: white;
    border: 3px solid #912f68;
    color: #912f68!important;
}

.GenericButtonDesignDashboard:hover>tbody>tr>td>span {
    color: #912f68!important;
}

.GenericButtonDesignDashboard {
    cursor: pointer;
    margin: calc( 0.6vw/ 1);
    z-index: 20;
    background: rgb(230, 99, 182);
    background: -moz-linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    background: linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e663b6", endColorstr="#e663b6", GradientType=1);
    border: 3px solid white;
    text-align: center;
    padding: calc( 0.6vw / 1);
    height: calc(1.2vw / 1);
    border-radius: calc(calc( 0.6vw / 1) + 15px);
    -webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    display: inline-block;
    color: white;
    text-decoration: none;
    font-family: 'Fredoka One', cursive;
    font-size: 1.2vw;
}


/*DROPZOME*/


/*FILE UPLOAD*/

.ui-tooltip,
.arrow:after {
    background: linear-gradient(0deg, rgba(15, 178, 221, 1) 0%, rgba(24, 150, 173, 1) 35%, rgba(24, 150, 173, 1) 65%, rgba(15, 178, 221, 1) 100%);
    border: calc(var(--lineThickness) / 2) solid var(--AudioPlayerPalette);
}

.ui-tooltip-content {
    filter: drop-shadow(0px 0px 5px rgba(27, 118, 135, 1));
}

.ui-tooltip {
    padding: 7px 15px;
    border: calc(var(--lineThickness) / 2) solid var(--AudioPlayerPalette);
    border-radius: 20px;
    color: var(--AudioPlayerPalette);
    font-size: calc(var(--VideoContainer) / 2);
    font-family: 'ABeeZee', sans-serif;
    box-shadow: 0 0 7px radial-gradient(circle, rgba(15, 178, 221, 1) 0%, rgba(15, 178, 221, 1) 50%, rgba(24, 150, 173, 1) 100%);
}

.arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
}

.arrow.top {
    top: -16px;
    bottom: auto;
}

.arrow.left {
    left: 20%;
}

.arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.arrow.top:after {
    bottom: -20px;
    top: auto;
}

#videoPlayBarOuterContainer {
    width: 100%;
    align-items: center;
    display: flex;
}

#videoTimeStamp {
    color: var(--AudioPlayerPalette);
    font-size: calc(var(--VideoContainer) / 2);
    filter: drop-shadow(0px 0px 5px rgba(27, 118, 135, 1));
    font-family: 'ABeeZee', sans-serif;
    margin-right: calc(var(--lineThickness) * 2);
}

#videoPlayBar {
    width: 100%;
    border: 2px var(--AudioPlayerPaletteD) solid;
}

#epic {
    align-items: center;
    display: flex;
    padding-left: var(--lineThickness);
    padding-right: var(--lineThickness);
}

#videoCaret {
    height: calc(calc(var(--VideoContainer) / 2.5) - calc(var(--lineThickness) / 2))!important;
    width: calc(calc(var(--VideoContainer) / 2.5) - calc(var(--lineThickness) / 2))!important;
    border: calc(var(--lineThickness) / 1) var(--AudioPlayerPalette) solid!important;
    background: rgba(24, 150, 173, 1);
    border-radius: 50%;
}

#VolumeBarVideoLine {
    width: 3.5vw;
    border: 2px var(--AudioPlayerPaletteD) solid;
}

#VolumeBarVideoMarker {
    height: calc(calc(var(--VideoContainer) / 2) - calc(var(--lineThickness) / 3.5));
    width: var(--lineThickness);
    background: var(--AudioPlayerPalette);
    filter: drop-shadow(0px 0px 5px rgba(27, 118, 135, 1));
}

#volumeBarOuterContainer {
    align-items: center;
    display: flex;
}

.FullscreenVideo {
    filter: drop-shadow(0px 0px 5px rgba(27, 118, 135, 1));
}

.VolumeVideo {
    filter: drop-shadow(0px 0px 5px rgba(27, 118, 135, 1));
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.videoPlaying {
    border: calc(calc(var(--VideoContainer) / 2) - calc(var(--lineThickness) / 1)) solid var(--AudioPlayerPalette)!important;
    margin-left: calc(var(--lineThickness) / 1.1)!important;
    margin-top: calc(var(--lineThickness) / 8.35)!important;
}

.volumeMuted>div>img.VolumeVideo:nth-child(2) {
    display: none;
}

.volumeUnMuted>div>img.VolumeVideo:first-child {
    display: none;
}

.VolumeVideo {
    padding-right: calc(var(--lineThickness) / 1);
}

.volumeMuted {}

.volumeUnMuted {}

#fullMyScreen {
    padding-left: var(--lineThickness);
    padding-right: var(--lineThickness);
    border-left: solid var(--lineThickness) var(--AudioPlayerPalette);
}

#volumeButtonVideo {
    display: flex;
    padding: calc(var(--VideoContainer) / 8);
    border-right: var(--lineThickness) solid var(--AudioPlayerPalette);
}

#playButtonContainer {
    width: var(--VideoContainer);
    height: var(--VideoContainer);
    background: rgb(15, 178, 221);
    background: radial-gradient(circle, rgba(15, 178, 221, 1) 0%, rgba(15, 178, 221, 1) 50%, rgba(24, 150, 173, 1) 100%);
    border-right: var(--lineThickness) solid var(--AudioPlayerPalette);
}

#playButtonVideo {
    cursor: pointer;
    width: 0;
    height: 0;
    border-top: calc(calc(var(--VideoContainer) / 2) - calc(var(--lineThickness) / 2)) solid transparent;
    border-bottom: calc(calc(var(--VideoContainer) / 2) - calc(var(--lineThickness) / 2)) solid transparent;
    border-right: 0 solid transparent;
    border-left: calc( calc(calc(var(--VideoContainer) / 2) - calc(var(--lineThickness) / 2)) / 0.75) solid var(--AudioPlayerPalette);
    transition: border 0.5s, margin 0.5s, filter 0.2s;
    margin-left: calc(var(--VideoContainer) / 4);
    filter: drop-shadow(0px 0px 5px rgba(27, 118, 135, 1));
}

.previewable {
    transition: filter 0.2s;
    cursor: pointer;
}

.previewable:hover {
    filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.2))!important;
}

#videoPlayerContainer {
    border: var(--lineThickness) solid var(--AudioPlayerPalette);
    border-radius: var(--lineThickness);
}

#videoPreviewPlayer {
    height: 20vw;
}

#playbarMain {
    display: flex;
    height: var(--VideoContainer);
    width: 100%;
    border-top: var(--lineThickness) solid var(--AudioPlayerPalette);
    background: rgb(24, 150, 173);
    background: linear-gradient(0deg, rgba(24, 150, 173, 1) 0%, rgba(15, 178, 221, 1) 35%, rgba(15, 178, 221, 1) 65%, rgba(24, 150, 173, 1) 100%);
}

.audioBar {
    pointer-events: none;
    width: 0.3vw;
    height: 8vh;
    background: rgb(104, 211, 231);
    background: linear-gradient(90deg, rgba(104, 211, 231, 1) 0%, rgba(104, 211, 231, 1) 50%, rgba(27, 118, 135, 1) 100%);
    -webkit-box-shadow: 0px 0px 2px 2px rgba(27, 118, 135, 1);
    -moz-box-shadow: 0px 0px 2px 2px rgba(27, 118, 135, 1);
    box-shadow: 0px 0px 2px 2px rgba(27, 118, 135, 1);
    transition: height 1s;
}

#fileImagePreview {
    object-fit: scale-down;
    border: var(--lineThickness) solid #f0639b;
    border-radius: var(--lineThickness);
}

#audioOverlay {
    pointer-events: none;
    height: var(--AudioContainer);
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.19931722689075626) 50%, rgba(0, 0, 0, 0) 100%);
    margin-left: var(--lineThickness);
}

#fileImagePreviewIMG {}

#playpadding {}

#audioPreviewPlayer {
    display: none;
}

#playButtonAudio {
    width: 0;
    height: 0;
    border-top: calc( calc( var(--AudioContainer) / 2.5) - 1vh) solid transparent;
    border-bottom: calc( calc( var(--AudioContainer) / 2.5) - 1vh) solid transparent;
    border-right: 0 solid transparent;
    border-left: calc( calc( calc( var(--AudioContainer) / 2.5) - 1vh) / 0.75) solid var(--AudioPlayerPalette);
    transition: border 0.5s, margin 0.5s;
    margin-left: calc(var(--AudioContainer) / 3);
    filter: drop-shadow(0px 0px 5px rgba(27, 118, 135, 1));
}

.playButtonPause {
    border: calc( calc( var(--AudioContainer) / 2.5) - 1vh) solid var(--AudioPlayerPalette)!important;
    margin-left: calc(var(--AudioContainer) / 5.25)!important;
}

#audioBox {
    height: var(--AudioContainer);
    border: var(--lineThickness) var(--AudioPlayerPalette) solid;
    border-radius: 50%;
    cursor: pointer;
    width: var(--AudioContainer);
    background: rgb(15, 178, 221);
    background: radial-gradient(circle, rgba(15, 178, 221, 1) 0%, rgba(15, 178, 221, 1) 50%, rgba(24, 150, 173, 1) 100%);
    filter: drop-shadow(0px 0px 5px rgba(27, 118, 135, 1));
}

#audioBox:hover {}

#audioWaveForm {
    display: flex;
    justify-content: center;
    align-items: center;
}

#audioProgress {
    margin-left: calc(var(--lineThickness) / 1);
    border-left: var(--lineThickness) #065563 solid;
    padding: calc(var(--lineThickness) / 1);
    display: inline-block;
    border-top: calc(var(--lineThickness) /1.2) solid #065563;
    border-right: calc(var(--lineThickness) /1.2) solid #065563;
    font-family: 'ABeeZee', sans-serif;
    font-size: 2vh;
    color: white;
    background: rgb(24, 150, 173);
    background: linear-gradient(0deg, rgba(24, 150, 173, 1) 0%, rgba(15, 178, 221, 1) 35%, rgba(15, 178, 221, 1) 65%, rgba(24, 150, 173, 1) 100%);
}

#audioWaveForm {
    padding: var(--lineThickness);
    background: rgb(24, 150, 173);
    background: linear-gradient(0deg, rgba(24, 150, 173, 1) 0%, rgba(15, 178, 221, 1) 35%, rgba(15, 178, 221, 1) 65%, rgba(24, 150, 173, 1) 100%);
    border-left: var(--lineThickness) #065563 solid;
}

#audioContainer {
    opacity: 1;
    display: flex;
    /* transition: opacity 0.5s; */
    border: calc(var(--lineThickness) * 1.25) solid #065563;
    background: var(--AudioPlayerPaletteD);
    border-radius: 5px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.audioContainerinactive:hover {
    opacity: 1;
}

.audioContainerinactive {
    opacity: 0.8;
}

#filePreview {
    border-bottom: calc( var(--lineThickness) / 1.5) solid #f0639b;
}

#filePreviewText {
    padding: calc( var(--fontSize) / 2);
    font-family: 'ABeeZee', sans-serif;
    font-size: calc( var(--fontSize) / 1.1);
    color: red;
}

#Filespan {
    font-size: calc( var(--fontSize) / 2);
}

.GenericButtonDesign:hover {
    background: white;
    border: 3px solid #912f68;
    color: #912f68!important;
}

.GenericButtonDesign:hover>tbody>tr>td>span {
    color: #912f68!important;
}

.GenericButtonDesign {
    margin: calc( var(--fontSize) / 4);
    z-index: 20;
    background: rgb(230, 99, 182);
    background: -moz-linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    background: linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e663b6", endColorstr="#e663b6", GradientType=1);
    border: 3px solid white;
    text-align: center;
    padding: calc( var(--fontSize) / 4);
    height: calc(var(--fontSize) * 2);
    border-radius: calc(calc( var(--fontSize) / 1) + 15px);
    -webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    display: inline-block;
    color: white;
    text-decoration: none;
    font-family: 'Fredoka One', cursive;
    font-size: var(--fontSize);
}

#mainFlex {
    display: flex;
    width: 100%;
    height: 100%;
}

#fileContainerTop {
    border-bottom: var(--lineThickness) solid #f0639b;
    padding: 10px;
    color: #f0639b;
    font-family: 'Fredoka One', cursive;
    font-weight: lighter;
    font-size: calc( 2vw * 1.5);
}

#mylittlefilecontainer {
    padding-bottom: calc( var(--fontSize) /2);
    width: 100%;
    border: var(--lineThickness) solid #f0639b;
    border-radius: 20px;
    background: rgb(255, 255, 255, 0.90);
}

#fileSplice {
    flex-grow: 3;
    z-index: 20;
    margin-left: 5%;
    margin-top: 5%;
}

#imageSplice {
    flex-grow: 1;
    z-index: 10;
    margin-left: -15%;
    margin-right: -10%;
}

#siiva {
    width: 30vw;
    filter: drop-shadow(10px 0px 10px black);
}

.CenterTable {
    width: 100%;
    height: 100%;
    color: inherit;
    font-size: inherit;
    border-spacing: 0px;
}

.CenterTable>tbody>tr {
    vertical-align: middle;
    text-align: center;
}


/*ENDOF FILE UPLOAD*/

#logouttext {
    text-decoration: none;
}

#logouttext:visited {
    color: white;
}

#logouttext {
    color: white;
}

#logouttext:hover {
    color: #912f68;
}

#dashboardtext {
    text-decoration: none;
}

#dashboardtext:visited {
    color: white;
}

#dashboardtext {
    color: white;
}

#dashboardtext:hover {
    color: #912f68;
}

#logmein {
    font-size: calc( var(--fontSize) * 1);
}

#logmein:hover {
    color: #912f68;
}

#clearlink {
    text-decoration: none;
    color: white!important;
}

#logintext {
    text-decoration: none;
}

#logintext {
    color: white;
}

#logintext:visited {
    color: white;
}

#logintext:hover {
    color: #912f68;
}

#divLogin {
    top: 80%;
    z-index: 20;
    background: rgb(230, 99, 182);
    background: -moz-linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    background: linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e663b6", endColorstr="#e663b6", GradientType=1);
    border: 3px solid white;
    text-align: center;
    padding: calc( var(--fontSize) / 4);
    height: calc(var(--fontSize) * 2);
    border-radius: calc(calc( var(--fontSize) / 1) + 15px);
    -webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    position: absolute;
    color: white;
    text-decoration: none;
    font-family: 'Fredoka One', cursive;
}

#divLogin:hover {
    background: white;
    border: 3px solid #912f68;
    color: #912f68!important;
}

#divLogin:hover>tbody>tr>td>span {
    color: #912f68!important;
}

#divLogout {
    background: rgb(230, 99, 182);
    background: -moz-linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    background: linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e663b6", endColorstr="#e663b6", GradientType=1);
    border: 3px solid white;
    text-align: center;
    padding: 15px;
    border-radius: calc(calc( var(--fontSize) / 2) + 15px);
    -webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
}

#divLogout:hover {
    background: white;
    border: 3px solid #912f68;
}

#divdashboard {
    background: rgb(230, 99, 182);
    background: -moz-linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    background: linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e663b6", endColorstr="#e663b6", GradientType=1);
    border: 3px solid white;
    text-align: center;
    padding: 15px;
    border-radius: calc(calc( var(--fontSize) / 2) + 15px);
    -webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
}

#divdashboard:hover {
    background: white;
    border: 3px solid #912f68;
}

.logMeOut {
    z-index: 50;
    text-align: right;
    color: white;
    font-family: 'Fredoka One', cursive;
    font-size: calc( var(--fontSize) / 2);
}

#mainform {
    top: 80vh;
    position: absolute;
    z-index: 70;
    width: 500px;
    height: var(--buttonHeight);
    font-size: var(--fontSize);
    font-family: 'Fredoka One', cursive;
    padding-top: calc( calc( var(--buttonHeight) - var(--fontSize)) / 2);
    text-align: center;
}

#Banner {
    z-index: 150;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 3px solid white;
    background: rgb(254, 161, 219);
    background: -moz-linear-gradient(180deg, rgba(254, 161, 219, 1) 0%, rgba(254, 180, 218, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(254, 161, 219, 1) 0%, rgba(254, 180, 218, 1) 100%);
    background: linear-gradient(180deg, rgba(254, 161, 219, 1) 0%, rgba(254, 180, 218, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#fea1db", endColorstr="#feb4da", GradientType=1);
}

#minorLogo {
    font-size: 5vh;
}

#Logo {
    text-align: center;
    font-size: 10vh;
    font-family: 'Roundhand-Regular';
    color: white;
    margin-left: 15px;
}

#VPimg {
    image-rendering: pixelated;
    height: 100%;
    width: 100%;
    z-index: -3;
}

.Vaporwave {
    z-index: -3;
    top: 5%;
    width: 100%;
    overflow: hidden;
    height: 100%;
    position: fixed;
    image-rendering: pixelated;
    transform: matrix3d(2, 0, 0.00, 0, 0.00, 0.84, 0.91, -0.005, 0, -0.91, 0.42, 0, 0, 0, 2, 1);
    -webkit-transform: matrix3d(2, 0, 0.00, 0, 0.00, 0.84, 0.91, -0.005, 0, -0.91, 0.42, 0, 0, 0, 2, 1);
}

body {
    background: rgb(255, 161, 220);
    background: -moz-linear-gradient(180deg, rgba(255, 161, 220, 1) 0%, rgba(252, 241, 215, 1) 50%);
    background: -webkit-linear-gradient(180deg, rgba(255, 161, 220, 1) 0%, rgba(252, 241, 215, 1) 50%);
    background: linear-gradient(180deg, rgba(255, 161, 220, 1) 0%, rgba(252, 241, 215, 1) 50%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#ffa1dc", endColorstr="#fcf1d7", GradientType=1);
}

#GradientOverlay {
    z-index: -1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: fixed;
    background-image: -moz-linear-gradient(180deg, rgba(255, 161, 220, 1) 0%, rgba(252, 241, 215, 1) 51%, rgba(252, 241, 215, 0) 67%);
    background-image: -webkit-linear-gradient(180deg, rgba(255, 161, 220, 1) 0%, rgba(252, 241, 215, 1) 51%, rgba(252, 241, 215, 0) 67%);
    background-image: linear-gradient(180deg, rgba(255, 161, 220, 1) 0%, rgba(252, 241, 215, 1) 51%, rgba(252, 241, 215, 0) 67%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#fcf1d7", endColorstr="#fcf1d7", GradientType=1);
}

.BoxImg {
    position: absolute;
}

#BoxBackground {
    position: absolute;
    z-index: -20;
}

.tapePadding {
    margin-bottom: 2%;
    margin-top: 2%;
    height: var(--vwPadder);
    width: 100%;
}

.LocationBinder {
    padding: 0.25vw;
}

.hide-scrollbar {
    overflow-x: none;
    overflow-y: auto;
    -ms-overflow-style: none;
    /* IE 11 */
    scrollbar-width: none;
    /* Firefox 64 */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

#invisibleScrollTop {
    top: 0;
}

#invisibleScrollBottom {
    top: calc(100% - var(--vwPadder));
}

.invisisbleScroll {
    z-index: 500;
    width: 25%;
    position: absolute;
    height: var(--vwPadder);
}

#tapeboundary {
    position: absolute;
    background-color: white;
    z-index: 1;
}

.tracker {
    background-color: red;
    position: absolute;
    height: 10px;
    width: 10px;
}

#tapeCanvas {
    position: absolute;
    top: 0;
    left: 0;
}

.tapeImgTest {
    width: 100%;
}

.tapeSidebarTest {
    height: 100%;
}

.protoBinder {
    display: none;
}

.protoTape {
    display: none;
}

.3dspace {
    border: 1px solid #CCC;
    margin: 80px;
    perspective: 50px;
}

.TapeDefinition {
    z-index: 50;
    top: 50%;
    left: 50%;
    position: absolute;
    transform-style: preserve-3d;
    transform: translateZ(-50px);
}

.TapeSide {
    position: absolute;
    z-index: 11;
    font-size: 40px;
    font-weight: bold;
    color: white;
    text-align: center;
}

.show-front {
    transform: rotateY( 180deg) translateZ( -50px);
}

.show-back {
    transform: rotateY(0deg) translateZ( -50px);
}

.show-right {
    transform: rotateY(-90deg) translateZ(-150px);
}

.show-left {
    transform: rotateY(90deg) translateZ(-150px);
}

.show-top {
    transform: rotateX( -90deg) translateZ(-100px);
}

.show-bottom {
    transform: rotateX(90deg) translateZ(-100px);
}

.descriptionAdd {
    font-size: calc( var(--fontSize) / 2);
    color: var(--AudioPlayerPalette);
    font-family: 'Fredoka One', cursive;
    cursor: pointer;
}

.dropItems {
    padding-top: calc(var(--lineThickness)*1.5);
    text-align: center
}

.dropItems>a {
    text-decoration: none;
}

.funny {
    font-size: calc( var(--fontSize) / 1.5);
    color: #f0639b;
    font-family: 'Fredoka One', cursive;
}

.errorcode {
    font-size: calc( var(--fontSize) / 1.5);
    color: red;
    font-family: 'Fredoka One', cursive;
}

#dropTop {
    text-align: center;
    padding: calc(var(--lineThickness)*4);
    color: #f0639b;
    text-decoration: none;
    font-family: 'Fredoka One', cursive;
    font-size: calc( var(--fontSize) / 1);
    border-bottom: var(--lineThickness) solid #f0639b;
    border-radius: 20px;
}

#dropMain {
    padding: calc( var(--fontSize) /2);
    border: var(--lineThickness) solid #f0639b;
    border-radius: 20px;
    background: rgb(255, 255, 255, 0.90);
    display: inline-block;
}

#errorLine {
    width: 100%;
    z-index: 20;
    position: absolute;
    top: 25%;
    text-align: center;
    color: red;
    font-size: calc( var(--fontSize) / 1);
    font-family: 'Fredoka One', cursive;
}

#siteFooter {
    background: rgb(230, 99, 182);
    background: -moz-linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    background: linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e663b6", endColorstr="#e663b6", GradientType=1);
    border-top: 3px solid white;
    -webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.75);
    position: fixed;
    top: 95%;
    height: 5%;
    width: 100%;
    display: flex;
}

#bottomText {
    border-top: white 4px solid;
    font-size: 3vh;
    text-decoration: none;
    font-family: 'Fredoka One', cursive;
    color: white;
    background: rgb(230, 99, 182);
    background: -moz-linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    background: linear-gradient(180deg, rgba(230, 99, 182, 1) 0%, rgba(245, 119, 199, 1) 50%, rgba(230, 99, 182, 1) 100%);
    justify-content: center;
    height: 5%;
    top: 95%;
    position: fixed;
    width: 100%;
    display: flex;
}

.BottomText:hover {
    color: #671846;
    background: rgb(145, 47, 104);
    background: -moz-linear-gradient(0deg, rgba(145, 47, 104, 1) 0%, rgba(184, 76, 139, 1) 50%, rgba(145, 47, 104, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(145, 47, 104, 1) 0%, rgba(184, 76, 139, 1) 50%, rgba(145, 47, 104, 1) 100%);
    background: linear-gradient(0deg, rgba(145, 47, 104, 1) 0%, rgba(184, 76, 139, 1) 50%, rgba(145, 47, 104, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#912f68", endColorstr="#912f68", GradientType=1);
    border-left: 0.25vw #671846 solid;
    border-right: 0.25vw #671846 solid;
}

#bottomText>a {
    color: white;
    text-decoration: none;
}

.BottomText {
    cursor: pointer;
    padding: 0 2vw 0 2vw;
    border-left: 0.25vw transparent solid;
    border-right: 0.25vw transparent solid;
}

.volumeSlider {
    /* display: flex; */
    border: calc(var(--lineThickness) * 1.25) solid #065563;
    background: var(--AudioPlayerPaletteD);
    border-left: none;
    width: 20px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.sliderBottom {
    height: 20px;
    border-top: calc(var(--lineThickness) * 1.25) solid #065563;
}

.sliderTop {
    position: relative;
    height: 100%;
}

.audioVolumeMarker {
    height: 100%;
    width: 5px;
    background-color: rgba(24, 150, 173, 1);
    margin-left: 7.5px;
}

.audioVolumeLine {
    position: absolute;
    background-color: #00c1e5;
    height: 5px;
    width: 20px;
    top: 0px;
}