@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);



audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
    display: none;
}

audio::-webkit-media-controls,
video::-webkit-media-controls {
    display: none;
}


.floatOptionCenter {
    width: 50%;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -13%);
    -ms-transform: translate(-50%, -13%);
    background-color: #00000080;
    color: white;
    font-size: 16px;
    padding: 2px;
    border: none;
    cursor: pointer;
    text-align: center;
}

.optionItems {
    padding: 5px;
}

    .optionItems:hover {
        background-color: #00ff613b;
        z-index: 2;
    }

.floatBottomRight {
    position: absolute;
    bottom: 1%;
    right: 1%;
    background-color: #00f50099;
    color: white;
    font-size: 15px;
    padding: 2px 10px;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    text-align: center;
}

    .floatBottomRight:hover {
        background-color: #00a200ed;
    }

.floatBottomLeft:hover {
    background-color: #00a200ed;
}

.floatBottomLeft {
    position: absolute;
    bottom: 1%;
    left: 11.5%;
    background-color: #00f50099;
    color: white;
    font-size: 16px;
    padding: 2px;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    text-align: center;
}

.sceneTitle {
    position: absolute;
    top: 1%;
    left: 1%;
    background-color: #0606065c;
    color: white;
    font-size: 16px;
    padding: 5px;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    text-align: center;
}

.points {
    position: absolute;
    top: 1%;
    right: 1%;
    background-color: #0606065c;
    color: white;
    font-size: 16px;
    padding: 5px;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    text-align: center;
}

.selectodOption {
    background-color: #00ff005c;
}


#snackbar {
    visibility: hidden;
    position: absolute;
    top: 5%;
    left: 50%;
    background-color: #b3000091;
    color: white;
    font-size: 16px;
    padding: 5px;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    text-align: center;
    z-index: 20;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

    #snackbar.showSnack {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

.linkCol {
    max-width: 340px;
    overflow-x: auto;
}

.playPause {
    position: absolute;
    bottom: 1%;
    left: 8%;
    background-color: #00000080;
    color: white;
    font-size: 16px;
    z-index: 5;
    padding: 2px;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    text-align: center;
}

.skipVideo {
    position: absolute;
    bottom: 1%;
    left: 4.5%;
    background-color: #00000080;
    color: white;
    font-size: 16px;
    z-index: 5;
    padding: 2px;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    text-align: center;
}

#fullScreen {
    position: absolute;
    bottom: 1%;
    left: 1%;
    background-color: #00000080;
    color: white;
    font-size: 16px;
    padding: 2px;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    text-align: center;
}
@media( max-width : 500px )and (min-width:351px) {
    .linkCol {
        max-width: 75px;
        overflow-x: auto;
    }
}

@media( max-width : 350px ) {
    .linkCol {
        max-width: 40px;
        overflow-x: auto;
    }
}

@media( max-width : 800px )and (min-width:501px) {
    .linkCol {
        max-width: 150px;
        overflow-x: auto;
    }
}

@-webkit-keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 5%;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 5%;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        top: 5%;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        top: 5%;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 0;
    }
}

/*
    progress bar css
*/

progress[value] {
    appearance: none;
    border: none;
    border-radius: 3px;
    color: dodgerblue;
    display: inline;
    order: 1;
    width: 70%;
    position: absolute;
    bottom: 3%;
    height: 5px;
    left: 50%;
    transform: translate(-50%, -50%);
}


    /* WebKit styles */
    progress [value]::-webkit-progress-bar {
        background-color: whiteSmoke;
        border-radius: 3px;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
    }

    progress[value]::-webkit-progress-value {
        background-image: linear-gradient(to right, #ff8a00, #e52e71);
        border-radius: 3px;
        position: relative;
        transition: width 1s linear;
    }

    /* Firefox styles */
    progress[value]::-moz-progress-bar {
        background-image: -moz-linear-gradient(to right, #ff8a00, #e52e71);
        border-radius: 3px;
        position: relative;
        transition: width 1s linear;
    }

/*
    progress bar css ends
*/