/** POD V3 **/

/*** Esup Pod custom CSS ***/
:root {
    /*** Theme primary color ***/
    --pod-primary: #3C3577;
    --pod-primary-lighten: #49408f;
    --pod-primary-darken: #2A2E46;
    --pod-primary-rgb: 42, 46, 70;
    /* Base colors mode sombre */
    --pod-primary-dark: #E84E0F;
    --pod-primary-lighten-dark: #f57b20;
    --pod-primary-darken-dark: #f7521f;
    /* First recup custom */
    --primary: var(--pod-primary);
    --secondary: var(--link-color);
    --font-color: #2C2947;
    --uga-color: #ff4e02 !important;
    /* Fonts */
    --font-size-badge-info: 10px;
    --font-size-thin: 13px;
    --font-size-semi-thin: 14px;
    --font-size-semi-medium: 16px;
    --font-size-medium: 20px;
    --font-size-semi-bold: 24px;
    --font-size-bold: 28px;
    --font-size-close-btn: 34px;
    --font-family: "Open Sans", sans-serif;
    --card-min-width: 200px;
    --danger: var(--uga-color) !important;
    --red-color: var(--uga-color) !important;
    --green-color: rgb(13 158 0) !important;
    --warning-color: #866a3b !important;
    --light: #e9ecef;
    /* Second recup custom */
    --background-dark-color: #1f2937;
    --link-color: #3C3577;
    --block-color: #171f2b;
    --block-dark-color: #0e141e;
    --dark-primary-color: var(--primary);
    --comment-color: #aaa;
    --dark-secondary: var(--link-color) !important;
    --dark-primary: var(--dark-primary-color) !important;
    --dark-shadow-color: #131212;
    --dark-select-category-video-color: rgb(255 205 186 / 30%);
}

.required { color: var(--uga-color) !important}
a {
    color: var(--pod-link-color);
    text-decoration: none !important;
}

/* Home Page */
.container-info{
    display:flex;
    z-index:2;
    margin: 1.5em 0.8rem;
}

.custom-add-video{
    display: flex;
    align-items: center;
    text-align: center;
}

.custom-add-video i{
    font-size: 80px;
    width: auto;
    vertical-align: center;
    margin-right: 4%;
}

.custom-block{
    display: flex;
    box-sizing: border-box;
    align-items: stretch;
    padding: 4px;
    font-size:13px;
}

.custom-block:nth-child(1),
.custom-block:nth-child(2){
    border-right: 1px solid rgba(0,0,0,0.1);
}

.custom-block{
    border-right: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.container-info .content{
    padding: 5% 10%;
    overflow: hidden;
}

.container-info .content h5,
.container-info .content p{
    text-align: center;
}

.container-info .picto{
    text-align: center;
    transition: ease-in-out 200ms;
}

.container-info .custom-block:hover .picto{
    transform: scale(1.2);
}

.info-link,
.container-info .picto i{
    color: var(--link-color);
    transition: ease-in-out 200ms;
}

[data-theme="dark"] .info-link,
[data-theme="dark"] .container-info .picto i{
    color: var(--light);
}

.container-info .picto i{
    font-size: 70px;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.39);
}

.info-link{
    font-size: 25px;
    font-weight: bold;
}

/* Navbar */
.navbar-brand strong {
    display: none;
}

[data-theme="light"] .pod-navbar__brand img,
[data-theme="light"] .pod-footer-logo{
    filter: brightness(0%);
}

[data-theme="dark"] .pod-navbar__brand img{
    filter: none;
}

.pod-footer-logo {
    background-size: contain;
}

.navbar label {
    display: flex;
}

/* Search bar */
#s:focus{
    height: 100%;
    box-shadow: 0 0 2px 2px rgb(13 110 253 / 25%) inset;
}

@media (max-width: 992px){
    #s:focus{
        width: calc(100% - 5em);
        margin-left: 5em;
    }
}

/* Channels on home page */
.poster>.preview{
    max-width: 100%;
}

/* Channel modal */
.list-group-item{
    background: transparent !important;
}

/* Primary Btn */
.btn.btn-primary {
    background-color: var(--pod-link-color);
    border: 1px solid var(--pod-link-color);
    transition: opacity .3s;
}

.btn.btn-share.btn-success.btn-add:hover,
.btn.btn-primary:hover {
    opacity: .8;
}

/* Outline btn (collapse Aside, "audio", "video", "statistiques", etc...) */
[data-theme="dark"] .btn-outline-primary{
    background-color: transparent;
}

.btn.btn-outline-primary:not(.navbar-toggler),
.btn.btn-light {
    padding: .4em !important;
    margin: .2em .4em !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--pod-link-color);
    border: 1px solid var(--pod-link-color);
    border-radius: 4px !important;
}

.btn.btn-outline-primary:not(.navbar-toggler):hover{
    color: #FFF;
    background-color: var(--pod-link-color);
}

/* Collapse Aside */
@media (max-width: 992px){
    .pod-aside.show{
        overflow-y: auto;
        overscroll-behavior: contain;
        height: calc(100vh - 40px);
    }
    .pod-aside-collapse{
        top: 60px;
    }
}
.pod-aside.show{
    top: 43px;
    left: 0;
}
.pod-aside-collapse{
    z-index: 10;
}

.pod-aside .form-check{
    min-height: auto !important;
}
/* Uga logo on player */
.vjs-logo-button{
    background-position:100%;
    filter: none!important;
}

.vjs-logo-button:hover, .vjs-logo-button:focus{
    transform: none;
}

/* Videos list */
.card-header{
    border: none;
}

/* Video card item */
.card-header, .card-body{
    background-color: var(--pod-background-neutre2-bloc);
}

/* Category
.checked_overlay{

}*/

#cat_mod_vid_list .card-body{
    padding: 0;
}

/* Fix color on dark mode select2 and sizes */
.select2{
    width: 100%!important;
}

[data-theme="dark"] .django-select2{
    background-color: var(--pod-background)!important;
    color: var(--pod-font-color)!important;
}

[data-theme="dark"] .select2-container--default .select2-results>.select2-results__options{
    background-color: var(--pod-background-neutre1-bloc);
}

.select2-selection__rendered{
    line-height: inherit!important;
}

/* Fix calendar Dark Mode */
[data-theme="dark"] #calendarin0 > table{
    background-color: var(--pod-background-neutre1-bloc);
}

[data-theme="dark"] #calendarin0 > table > caption{
    color: var(--pod-font-color);
}

/* Fix background color on clocks module */
.clockbox{
    background-color: var(--pod-background);
}