﻿.ModDVIDSVideoPlayerC {
    font-family: "Roboto", "RobotoLocal", sans serif;
}


.DVIDSFilter {
    margin: 0 0 .5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.DVIDSUpNextDropdown, .DVIDSSearchBox{margin:0 0 1rem;width:100%;}
.DVIDSUpNextDropdown { }
.DVIDSSearchBox{}

@media(min-width: 768px){
    .ModDVIDSVideoPlayerC {
        margin: 0 auto;
    }

  .DVIDSUpNextDropdown, .DVIDSSearchBox {max-width: 40%; margin:0;}

}

.DVIDSVideo { display: flex; flex-wrap: wrap; }

.DVIDSVideo article, .DVIDSVideo .video-list-wrap {
    width: 100%;
    position: relative;
}

.DVIDSVideo h1{font-size:2rem; color: #003b4f; line-height: 2.5rem;}
.DVIDSVideo article{margin-bottom:30px;}
.DVIDSVideo .video-wrap-container{position:relative;margin:.5rem 0;}

.DVIDSVideo .DVIDSShareBar { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.9); z-index: 9999; }
.DVIDSVideo .DVIDSShareBar .close { top: 10px; right: 1rem; color: #fff; opacity: .8; box-shadow: none; font-size: 1.5rem; position: absolute; }
.DVIDSVideo .DVIDSShareBar .close:hover{background:none;opacity:1;}
.DVIDSVideo .DVIDSShareBar .close i { }
[id^="playerEmbedInfo-"], [id^="playerShareInfo-"] {
    display: none;
    padding: 1rem;
    min-height: 3rem;
}
    [id^="playerEmbedInfo-"] label {
        color: #fff;
        margin-bottom: 5px;
    }
    [id^="playerEmbedInfo-"] textarea {
        display: block;
        width: 90%;
    }
    [id^="playerShareInfo-"] a {
        box-shadow: none;
        margin-bottom: 0;
    }
        [id^="playerShareInfo-"] a:hover {
            background-color: none;
        }


.DVIDSVideo .video-utility { margin: 0 0 1rem; display: flex; justify-content: flex-end; }
.DVIDSVideo .video-utility li { list-style: none; margin: 0 0 0 1.5rem; text-transform: uppercase; font-size: .85rem; }
.DVIDSVideo .video-utility a { box-shadow: none; color: #5d5d5d; }
.DVIDSVideo .video-utility a i{margin-right:10px;}
.DVIDSVideo .video-utility a:hover { }
.DVIDSVideo hr {margin: 0 0 1rem; }


.DVIDSVideo .meta {
    margin: 20px 0;
}
.DVIDSVideo .meta li { list-style: none; display: inline-block; margin-right: 1rem; font-size: .9rem; color: #5d5d5d; }

#txtDVIDSSearch::-webkit-input-placeholder { text-transform: uppercase; }
#txtDVIDSSearch::-moz-placeholder { text-transform: uppercase; }
#txtDVIDSSearch::placeholder { text-transform: uppercase; }

.video-list-wrap li a {
    display: flex;
    flex-direction: column;
}

.video-list-wrap li .image-wrap, .video-list-wrap li .title-wrap {
    width: 100%;
}

.video-list-wrap li .image-aspect { padding-top: 56.25%; background-position: center center; background-size: cover; }
.video-list-wrap li .image-wrap img.thumbnail { position:absolute;left:-999em; }
.video-list-wrap .DVIDSNowPlaying, .video-list-wrap .DVIDSDurationOverylay, .video-list-wrap .DVIDSOverlay { position: absolute; }
.video-list-wrap .DVIDSNowPlaying { bottom: 0; right: 0; left: 0; text-align: center; text-transform: uppercase; color: #fff; background: #003b4f; padding: 2px 5px; font-size:17px;}
.video-list-wrap .DVIDSOverlay { top: 50%; left: 50%; height: 2rem; width: 2rem; margin: -1rem 0 0 -1rem; opacity: 0; transition: opacity .2s; }
.video-list-wrap a:hover .DVIDSOverlay { display: block; opacity: 1; }

.video-list-wrap li .title-wrap {
    height: 2.6em;
    margin: 2px 0 15px;
    overflow: hidden;
}

.video-list-wrap li .title-wrap h2 {
    line-height: 1.3;
    font-size: 1rem;
}

.video-scroll-wrap{ width:100%;display:none;justify-content:flex-end;}
.video-scroll-button { width: 30%; text-align: center; font-size: 3.5rem; padding: 5px; cursor: pointer; color: #5d5d5d }
.video-scroll-button i{position:relative;transition:all .2s;top:0;}
.video-scroll-button:hover i{top:5px;}
.video-list-wrap .video-duration{bottom:8px;right:8px;font-size:17px;}
.DVIDSVideo .video-list-wrap .smallVideoOverlay{display:none;}
.DVIDSVideo .video-list-wrap a:hover .smallVideoOverlay { display:block; }

.styled-form input[type=submit],
.styled-form input[type=reset],
.styled-form input[type=button],
.styled-form button,
.styled-form .btn {
    min-height: 2.5rem;
    display: inline-block;
    padding: .5rem 1rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.3rem;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #fff;
    background-color: #003b4f;
    border: 1px solid #003b4f;
    border-radius: 4px;
    width: auto;
    transition: all 0.2s;
}

.styled-form .btn:hover {
    background-color: #fff;
    color: #003b4f;
}

.styled-form .input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .form-control:last-child, 
.input-group-addon:last-child, 
.input-group-btn:last-child > .btn, 
.input-group-btn:last-child > .btn-group > .btn, 
.input-group-btn:last-child > .dropdown-toggle, 
.input-group-btn:first-child > .btn:not(:first-child), 
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.input-group-btn:last-child > .btn, 
.input-group-btn:last-child > .btn-group {
    margin-left: -1px;
}

-form select, .styled-form textarea, 
.styled-form input[type=text], 
.styled-form input[type=password], 
.styled-form input[type=datetime], 
.styled-form input[type=datetime-local], 
.styled-form input[type=date], 
.styled-form input[type=month], 
.styled-form input[type=time], 
.styled-form input[type=week], 
.styled-form input[type=number], 
.styled-form input[type=email], 
.styled-form input[type=url], 
.styled-form input[type=search], 
.styled-form input[type=tel], 
.styled-form input[type=color], 
.styled-form .uneditable-input {
    display: inline-block;
    height: 2.5rem;
    padding: .5rem 1rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.1rem;
    color: #696969;
    border-radius: 4px;
    vertical-align: middle;
    font-family: 'Lato', sans-serif;
}

.input-group .form-control:first-child, 
.input-group-addon:first-child, 
.input-group-btn:first-child > .btn, 
.input-group-btn:first-child > .btn-group > .btn, 
.input-group-btn:first-child > .dropdown-toggle, 
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), 
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.btn-primary.focus, .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(248, 186, 1, 0.20) !important;
}

.btn.focus, .btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(248, 186, 1, 0.20) !important;
}

.form-control:focus {
    border-color: rgba(248, 186, 1, 0.20) !important;
    box-shadow: 0 0 0 0.2rem rgba(248, 186, 1, 0.20) !important;
}

.video-duration {
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 1rem;
    background: rgba(0,0,0,.75);
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
}

@media(max-width: 990px) {
    .video-duration {
        font-size: 17px;
    }
}

.mejs__overlay-button {
    display: none;
}

.mejs-overlay-button {
    display: none;
}

.video-wrap-container {
    position: relative;
}

    .video-wrap-container img.defaultVideoOverlay {
        max-width: 140px;
        min-width: 60px;
        border: none !important;
        background: none !important;
        z-index: 10;
        left: 50% !important;
        width: 16% !important;
        top: 50% !important;
        transform: translate(-50%,-50%);
        position: absolute;
        cursor: pointer;
    }

    .video-wrap-container:hover img.defaultVideoOverlay {
        display: none;
    }

    .video-wrap-container img.hoverVideoOverlay {
        max-width: 140px;
        min-width: 60px;
        border: none !important;
        background: none !important;
        z-index: 10;
        left: 50% !important;
        width: 16% !important;
        top: 50% !important;
        transform: translate(-50%,-50%);
        position: absolute;
        cursor: pointer;
        display: none;
    }

    .video-wrap-container:hover img.hoverVideoOverlay {
        display: block;
    }

.video-player .mediaCredits {
    display: inline-block;
    position: relative;
    top: -5px;
    font-size: .8em;
    font-style: italic;
}

@media (max-width: 450px) {
    .video-wrap-container img.defaultVideoOverlay {
        width: 22% !important;
    }

    .video-wrap-container img.hoverVideoOverlay {
        width: 22% !important;
    }
}

@media(min-width: 992px) {
  .DVIDSVideo article { width: 85%; padding-right: 1.5rem; }
  .DVIDSVideo .video-list-wrap { width: 15%; overflow: hidden; }

  .video-list-wrap:after {
      content: '';
      position: absolute;
      bottom: -1px;
      right: 0;
      left: 0;
      height: 3rem;
      background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255.85) 100%)
  }
  .video-list-wrap-inner { position: absolute; left: 0; right: 0; overflow: auto; max-height: 100%; height: 100%; }
  .video-list-wrap ul { margin: 0; }
  .video-scroll-wrap { display: flex; }
}
/*IE11 bugfix for short shorter lists*/
@media (min-width: 992px) and (-ms-high-contrast:none) {
  *::-ms-backdrop, .video-list-wrap-inner { height: 100%; }
}
@media(min-width: 1200px) {
  .DVIDSVideo article { width: 85%;  }
  .DVIDSVideo .video-list-wrap {
      width: 15%;
  }
}

@media(max-width: 991px) {
    .video-list-wrap li .image-wrap{width:30%;}
    .video-list-wrap li .title-wrap{width:70%;}
    .video-list-wrap li .title-wrap h2{font-size:20px;}
    .DVIDSSearchBox{max-width:48%;}
    .DVIDSVideo .video-utility li{font-size:1.2rem;}
    .video-list-wrap .DVIDSNowPlaying{font-size:1.2rem;}

    .DVIDSFilter {
        flex-direction: column-reverse;
        margin: 20px auto 0;
        align-items: center;
        justify-content: center;
    }

    .dropdown.DVIDSUpNextDropdown {
        width: auto;
    }

    .video-info {
        padding: 0 20px;
    }

    .video-list-wrap-inner ul li a {
        flex-direction: row;
        align-items: center;
    }

    .video-list-wrap-inner ul li a .title-wrap {
        padding: 10px;
        height: 65px
    }

    .video-list-wrap-inner ul {
        list-style: none;
    }

}
@media(max-width: 776px) {
  .video-list-wrap li .image-wrap { width: 50%; }
  .video-list-wrap li .title-wrap { width: 50%; }
  .video-list-wrap li .title-wrap h2 { font-size: 17px; }
  
    .video-list-wrap-inner ul li a .title-wrap {
        height: 80px;
    }
}
@media(max-width: 650px) {
  .DVIDSUpNextDropdown, .DVIDSSearchBox { max-width: none; }
}
@media(min-width: 992px) {
  .DVIDSVideo .video-list-wrap .smallVideoOverlay { transform: scale(.5) }
}

@media(max-width: 575px) {
    .DVIDSVideo .video-wrap-container.fixed {
        margin: 0;
        position: fixed;
        top: 0;
        z-index: 100;
    }
}