/*Customização dos controles dos videos*/
/*INICIO*/

:root {
    --video-white: #fff;
    --video-black: #000;
    --video-blue: #164194;
}

.fancybox-inner {
    overflow-y: hidden !important;
    background-color: var(--video-white);
    transition: background-color .5s ease;
}

.fancybox-inner .thumb.active {
    display: none;
}

.fancybox-inner:hover  > .custom-control-container{
    height: 3em;
    color: var(--video-black);
}
.fancybox-inner:hover > .custom-control-container #download i{
    color: var(--video-black);
}
.fancybox-inner:hover > .custom-control-container input[type="range"]::-webkit-slider-thumb{
    background-color: var(--video-blue);
}
.fancybox-inner:hover > .custom-control-container input[type=range]::-moz-range-track {
    background-color: var(--video-white);
}

.fancybox-inner:hover > .custom-control-container input[type="range"]::-moz-range-thumb{
    background-color: var(--video-blue);
}

.custom-control-container {
    /* color: transparent; */
    overflow: hidden;
    position: absolute;
    transition: height .5s ease;
    left:  0;
    right: 0;
    bottom: 5px;
    height: 0em;
    background-color: var(--video-white);
}
.seek-bar-container {
    display: flex;
    cursor: pointer;
    transition: all .2s ease-in;
    width: 100%;
    height: .25em;
}
.seek-bar-left {
    transition: height .1s ease-in;
    background-color: var(--video-blue);
    height: inherit;
    z-index: 1;
}
.seek-bar-right {
    position: absolute;
    transition: all .2s ease-in;
    height: inherit;
    width:0;
    background-color: var(--video-white);
}
.seek-bar-container:hover {
    height: .5em;
}
.seek-bar-container:hover  > .seek-bar-node{
    width: 1em;
    height: 1em;
    opacity: 1;
    margin-left: -.5em;
}
.seek-bar-node {
    opacity: 0;
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
    background-color: var(--video-blue);
    transition: inherit;
    z-index: 1;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.video-controllers {
    display: flex;
    align-items: center;
    /* height: inherit; */
    /*overflow: hidden;*/
    padding-top: 10px;
}
.vdeo-contollers button i{
    transition: transform .2s ease;
    background-color: var(--video-white);
}

.video-controllers input[type="range"] {
    border: none;
}

.video-controllers input[type="range"]:-moz-focusring {
    outline: none;
}
.video-controllers .playback {
    text-align: right;
    margin-left: auto;
    position: relative;
}
.video-controllers .playback:hover > .playbackrate-container{
    height: calc(4.2rem + 12px);;
}
.video-controllers .playbackrate-container button:hover {
    background-color: var(--video-black);
    color: var(--video-white);
}
.video-controllers .playbackrate-container {
    position: absolute;
    bottom: 2.5rem;
    background-color: var(--video-white);
    flex-direction: column-reverse;
    display: flex;
    -webkit-transition: height .5s ease;
    -moz-transition: height .5s ease;
    -ms-transition: height .5s ease;
    -o-transition: height .5s ease;
    transition: height .5s ease;
    overflow-y: hidden;
    height: 0px;

}

.video-controllers #volume-bar {
    width: 10%;
    transition: width ease .5s;
}

.video-controllers .playbackrate-container button {
    overflow-y: hidden;
}
.video-controllers #video-time {
    font-size: .8rem;
}
.video-controllers #playbackrate {
    font-size: 1.2rem;
}

.video-controllers #video-time .total {
    margin-right: 10px;
}
.video-controllers button{
    border: none;
    background-color: var(--video-white);
}

.video-controllers button:hover{
    color: var(--video-blue);
}

/*FIM*/
/*Customização dos controles dos videos*/