/*
 * UHVideoPlayer - jQuery plugin 1.0.0
 *
 * Copyright (c) 2017 YmNIK13
 *
 * UHVideoPlayer.css
 * Styles for the UHVideoPlayer
 *
 */

/* base styles */
.uhvp-video-player {
}

.uhvp-video-play, .uhvp-volume-button {
    cursor: pointer;
}

.uhvp-video-timer {
    cursor: default;
}


.uhvp-video-display {
    width: 100%;
}


.uhvp-video-player {
}





    /* Start of simpledark default theme */
    .uhvp-video-player.simpledark {
        float: left;
        position: relative;
        padding: 10px;
        border-color: #61625d;
        border-style: solid;
        border-width: 5px;
        font-family: Arial, Helvetica, sans-serif;
        -moz-border-radius: 5px; /* FF1+ */
        -webkit-border-radius: 5px; /* Saf3+, Chrome */
        border-radius: 5px; /* Opera 10.5, IE 9 */
        background: #000000;
        background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #313131),color-stop(1, #000000)); /* Saf4+, Chrome */
        box-shadow: inset 0 15px 35px #535353;
    }


        /*Фон*/
        .uhvp-video-player.simpledark .uhvp-back-icon {
            padding: 40px;
            /*border-radius: 50%;
            border: 5px solid #fff;
            background: rgba(0, 0, 0, 0.8);
            */
			position: absolute;
            top: calc(50% - 104px);
            left: calc(50% - 104px);
            z-index: 0;
        }

            .uhvp-video-player.simpledark .uhvp-back-icon.uhvp-paused-back {
                display: none;
            }

        .uhvp-video-player.simpledark .uhvp-back-triangle {
            width: 0;
            height: 0;
            margin-left: 15px;
            border-style: solid;
            border-width: 50px 0 50px 81px;
            border-color: transparent transparent transparent #ffffff;
        }


        .uhvp-video-player.simpledark .uhvp-video-controls {
            position: relative;
            padding-top: 5px;
            float: left;
            clear: both;
            width: 100%;
            visibility: visible;
            opacity: 0.7;
        }

            .uhvp-video-player.simpledark .uhvp-video-controls.uhvp-floating-panel {
                position: absolute;
                bottom: 20px;
                left: calc(50% - 160px);
                width: 320px;
                padding: 10px;
                border-color: #2E2E2E;
                border-style: solid;
                border-width: 1px;
                -moz-border-radius: 5px; /* FF1+ */
                -webkit-border-radius: 5px; /* Saf3+, Chrome */
                border-radius: 5px; /* Opera 10.5, IE 9 */
                -moz-transition: all 0.1s ease-in-out; /* Firefox */
                -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
                -o-transition: all 0.1s ease-in-out; /* Opera */
                transition: all 0.1s ease-in-out;
                /*display: none !important;*/
            }


        .uhvp-video-player.simpledark:hover .uhvp-video-controls.uhvp-floating-panel {
            /*display: block !important;*/
        }


        .uhvp-video-player.simpledark .uhvp-video-controls.uhvp-floating-panel .uhvp-video-seek {
            width: 200px;
        }

        .uhvp-video-player.simpledark .uhvp-video-controls.uhvp-floating-panel .uhvp-volume-box {
            bottom: 10px;
        }

            .uhvp-video-player.simpledark .uhvp-video-controls.uhvp-floating-panel .uhvp-volume-box:hover {
                height: 85px;
            }

        .uhvp-video-player.simpledark .uhvp-video-controls.uhvp-floating-panel .uhvp-volume-slider {
            height: 50px;
        }




        .uhvp-video-player.simpledark .uhvp-video-play,
        .uhvp-video-player.simpledark .uhvp-video-seek,
        .uhvp-video-player.simpledark .uhvp-volume-box,
        .uhvp-video-timer {
            float: left;
        }

        /* play, pause */
        .uhvp-video-player.simpledark .uhvp-video-play {
            display: block;
            width: 22px;
            height: 22px;
            margin-right: 15px;
            background: url(img/play-icon.png) no-repeat;
            opacity: 0.7;
            -moz-transition: all 0.2s ease-in-out; /* Firefox */
            -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
            -o-transition: all 0.2s ease-in-out; /* Opera */
            transition: all 0.2s ease-in-out;
        }

        .uhvp-video-player.simpledark .uhvp-paused-button {
            background: url(img/pause-icon.png) no-repeat;
        }


        .uhvp-video-player.simpledark video {
            float: left;
        }


        .uhvp-video-player.simpledark .uhvp-video-play:hover {
            opacity: 1;
        }

        /* seek */
        .uhvp-video-player.simpledark .uhvp-video-seek {
            position: relative;
            width: calc(100% - 110px);
            height: 10px;
            margin-top: 8px;
            border-color: #494949;
            border-style: solid;
            border-width: 1px;
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            border-radius: 15px;
            background: #535353;
            background-image: -moz-linear-gradient(top, #535353, #333333);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333));
            box-shadow: inset 0 -3px 3px #333333;
        }

            .uhvp-video-player.simpledark .uhvp-video-seek .ui-slider-handle {
                width: 15px;
                height: 15px;
                border-width: 1px;
                top: -4px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border-radius: 10px;
                background: #e6e6e6;
                background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
                background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
                box-shadow: inset 0 -3px 3px #d5d5d5;
            }

                .uhvp-video-player.simpledark .uhvp-video-seek .ui-slider-handle.ui-state-hover {
                    background: #fff;
                }

            .uhvp-video-player.simpledark .uhvp-video-seek .ui-slider-range {
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
                background: #4cbae8;
                background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce);
                background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce));
                box-shadow: inset 0 -3px 3px #39a2ce;
            }


        /* timer */
        .uhvp-video-player.simpledark .uhvp-video-timer {
            margin-top: 5px;
            margin-left: 10px;
            color: #999;
            font-size: 0.7em;
            font-weight: bold;
        }

        /* volume */
        .uhvp-video-player.simpledark .uhvp-volume-box {
            position: absolute;
            bottom: 0px;
            right: 0px;
            overflow: hidden;
            width: 20px;
            height: 30px;
            color: #fff;
            padding: 0px 10px;
            -moz-transition: all 0.1s ease-in-out; /* Firefox */
            -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
            -o-transition: all 0.2s ease-in-out; /* Opera */
            transition: all 0.1s ease-in-out;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
        }

            .uhvp-video-player.simpledark .uhvp-volume-box:hover {
                height: 135px;
                padding-top: 5px;
            }


                .uhvp-video-player.simpledark .uhvp-volume-box:hover .uhvp-volume-slider {
                    position: relative;
                    visibility: visible;
                    opacity: 1;
                }

        .uhvp-video-player.simpledark .uhvp-volume-slider {
            position: relative;
            height: 100px;
            width: 7px;
            left: 4px;
            visiblity: hidden;
            opacity: 0;
            border-color: #444;
            border-style: solid;
            border-width: 1px;
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            border-radius: 15px;
            background: #535353;
            background-image: -moz-linear-gradient(top, #535353, #333333);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333));
            box-shadow: inset 0 3px 3px #333333;
            -moz-transition: all 0.1s ease-in-out; /* Firefox */
            -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
            -o-transition: all 0.1s ease-in-out; /* Opera */
            transition: all 0.1s ease-in-out;
        }

            .uhvp-video-player.simpledark .uhvp-volume-slider .ui-slider-handle {
                width: 12px;
                height: 12px;
                left: -4px;
                margin-bottom: -0.6em;
                margin-left: 0;
                border-color: #333;
                border-style: solid;
                border-width: 1px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border-radius: 10px;
                background: #e6e6e6;
                background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
                background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
                box-shadow: inset 0 3px 3px #d5d5d5;
            }

                .uhvp-video-player.simpledark .uhvp-volume-slider .ui-slider-handle.ui-state-hover {
                    background: #fff;
                }

            .uhvp-video-player.simpledark .uhvp-volume-slider .ui-slider-range {
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
                background: #e6e6e6;
                background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
                background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
                box-shadow: inset 0 3px 3px #d5d5d5;
            }

        /* volume button */

        .uhvp-video-player.simpledark .uhvp-volume-button {
            position: absolute;
            bottom: 0px;
            display: block;
            width: 22px;
            height: 22px;
            background: url(img/volume-full-icon.png) no-repeat;
            text-indent: -9999px;
            opacity: 0.8;
        }

            .uhvp-video-player.simpledark .uhvp-volume-button:hover {
                opacity: 1;
            }

        .uhvp-video-player.simpledark .uhvp-volume-mute {
            background: url(img/volume-mute-icon.png) no-repeat;
        }




/* needed jquery ui styles
 * using these, we don't depend on jQuery UI's stylsheet
 */
.ui-slider-handle {
    position: absolute;
    z-index: 2;
    display: none;
    margin-left: -0.6em;
    cursor: default;
    outline: none;
}

.ui-slider-range {
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border: 0 none;
    position: absolute;
    z-index: 1;
}