/*
@import url('https://fonts.cdnfonts.com/css/azonix');
@import url('https://fonts.cdnfonts.com/css/montserrat');
@import url('https://fonts.cdnfonts.com/css/hind-guntur');
@import url('https://fonts.cdnfonts.com/css/vic');
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:300,300i,400,400i,500,500i,600,600i,700,700i|Open+Sans:400,400i,600,700&display=swap");
*/

:root {
    --mediadraft-dark: #212529;
    --mediadraft-light: #ffffff;
    
    --mediadraft-dark-hover: #424649;
    --mediadraft-light-hover: #eeeeee;
    
    --mediadraft-pink: #ea2c5a;
    --mediadraft-pink-hover: #a31e3e;
    
    --mediadraft-purple: #321482;
}

body {
/*    font-family: 'VIC', sans-serif;*/
    font-family: "Open Sans", sans-serif;
}

[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-link-hover-color: var(--mediadraft-pink);
}

[data-bs-theme="light"] .mediadraft-dark,
[data-bs-theme="dark"] .mediadraft-light {
    display: none;
}

/* button */
[data-bs-theme="light"] .mediadraft-btn-default {
    background: var(--mediadraft-light);
    color: var(--bs-body-color);
    border-color: #ddd;
}
[data-bs-theme="light"] .mediadraft-btn-default:hover {
    background: var(--mediadraft-light-hover);
}
[data-bs-theme="dark"] .mediadraft-btn-default {
    background: var(--mediadraft-dark);
    color: #fff;
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .mediadraft-btn-default:hover {
    background: var(--mediadraft-dark-hover);
}

.mediadraft-btn-primary {
    background-color: var(--mediadraft-pink);
    color: #fff;
}
.mediadraft-btn-primary:hover,
.mediadraft-btn-primary:active,
.mediadraft-btn-primary:focus,
.mediadraft-btn-primary:focus-visible,
.mediadraft-btn-primary:disabled {
    background: var(--mediadraft-pink-hover) !important;
    color: #fff !important;;
    border-color: var(--bs-body-bg) !important;
}

.mediadraft-btn-outline-primary {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
.mediadraft-btn-outline-primary:hover {
    background: var(--mediadraft-pink) !important;
    color: #fff !important;
    border-color: var(--bs-body-bg) !important;
}

.mediadraft-collapse[data-bs-toggle="collapse"]:after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    float: right;
    content: "\f106";
}
.mediadraft-collapse[data-bs-toggle="collapse"].collapsed:after {
    content: "\f107";
}

/* common */
a,
a.nav-link {
    text-decoration: none;
    color: var(--bs-body-color);
}
a:not(.btn, .dropdown-item, .nav-link, .page-link):hover,
.mediadraft-menu-items li.active a {
    color: var(--bs-link-hover-color) !important;
}

.dropdown-item {
    --bs-dropdown-link-active-bg: var(--mediadraft-pink);
}
.page-link {
    --bs-pagination-active-bg: var(--mediadraft-pink);
    --bs-pagination-active-border-color: var(--mediadraft-pink);
    --bs-pagination-color: var(--bs-body-color);
}
.pagination li a {
    margin: 0 20px;
    min-width: 70px;
    height: 60px;
    border-radius: 30px !important;
    display: flex;    
    justify-content: center;
    align-items: center;
}

[data-bs-theme="light"] h1,
[data-bs-theme="light"] h2,
[data-bs-theme="light"] h3,
[data-bs-theme="light"] h4,
[data-bs-theme="light"] h5,
[data-bs-theme="light"] h5 a,
[data-bs-theme="light"] h6 {
    color: var(--mediadraft-purple) !important;
}
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h5 a,
[data-bs-theme="dark"] h6 {
    color: var(--mediadraft-light);
}

label {
    font-weight: bold;
}

a.disabled {
    pointer-events: none;
}

/* image */
.mediadraft-logo-header {
    height: 50px;
}
.mediadraft-logo-login {
    height: 150px;
}
.mediadraft-logo-footer {
    height: 50px;
    margin-top: 2px;
}


/* login */
.mediadraft-login-body::before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
/*    background-image: url("../img/bg.jpg");*/
    background-color: #364252;
    z-index: -1;
}
.mediadraft-login-body[data-bs-theme="dark"]::before {
/*    filter: invert(100%);*/
}

.mediadraft-login-body main {
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 992px) and (min-height: 800px) {
    .mediadraft-login-body main {
        height: 100vh;
    }
}

.mediadraft-login-body .mediadraft-login-container h5,
.mediadraft-login-body .mediadraft-login-container label,
.mediadraft-login-body .mediadraft-login-container .mediadraft-btn-xlg {
    /*
    font-family: "Azonix", sans-serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Hind Guntur', sans-serif;
    */
    font-weight: 500;
}

.mediadraft-login-body .mediadraft-login-container {
    padding: 40px 20px;
    max-width: 500px;
}
.mediadraft-login-body .mediadraft-login-container.mediadraft-login-request-password {
    width: 560px;
    max-width: 560px;
}
@media (min-width: 576px) {
    .mediadraft-login-body .mediadraft-login-container {
        margin: 50px 0;
    }
}
.mediadraft-login-body .mediadraft-login-container form {
    padding: 0 40px;
}
.mediadraft-login-body .mediadraft-login-container form input:not([type=checkbox]) {
    background: initial;
}
.mediadraft-login-body .mediadraft-login-container form .mediadraft-btn-xlg {
    font-size: 18px;
    padding: 20px;
    width: 100%;
}

/* rainbow animation */
@media (min-width: 576px) {
    .mediadraft-rainbow-container {
        position: relative;
        background: #fff;
    }
    .mediadraft-rainbow-container:before,
    .mediadraft-rainbow-container:after {
        content: "";
        position: absolute;
        left: -2px;
        top: -2px;
        background: linear-gradient(45deg, 
        #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, 
        #fb0094, #0000ff, #00ff00,#ffff00, #ff0000);
        background-size: 400%;
        z-index: -1;
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: rainbow 25s linear infinite;    
    }
    
    @keyframes rainbow {
        0% {
                background-position: 0 0;
        }
        50% {
                background-position: 400% 0;
        }
        100% {
                background-position: 0 0;
        }
    }
    .mediadraft-rainbow-container:after {
        filter: blur(50px);
    }    
}

/* menu */
.mediadraft-menu {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 10px 0;
    border-bottom: solid 1px var(--bs-border-color);
}

/* select2 */
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bs-body-bg) !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color) !important;    
}
.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;    
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected {
    color: #fff !important;
    background-color: var(--mediadraft-pink) !important;
}
[data-bs-theme="light"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option:not(.select2-results__option--selected):hover {
    background: #f8f9fa !important;
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option:not(.select2-results__option--selected):hover {
    background: #2b3035 !important;
}

/* checkbox */
.mediadraft-checkbox {
    position: relative;
    display: block;
    padding-left: 35px;
    cursor: pointer;
}
.mediadraft-checkbox label {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 2px;
    top: 2px;
}
[data-bs-theme="dark"] .mediadraft-checkbox label {
    background: var(--bs-tertiary-bg);
}
.mediadraft-checkbox label input[type="checkbox"] {
    display: none;
}
.mediadraft-checkbox label input[type="checkbox"]:checked + .arrow {
    display: block;
}
.mediadraft-checkbox label .arrow {
    display: none;
    position: absolute;
    width: 20px;
    height: 20px;
    top: -1px;
    left: -1px;
    border: solid 1px #ea2c5a;
    border-radius: 2px;
}
.mediadraft-checkbox label .arrow::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 8px;
    left: 3px;
    top: 3px;
    border-top: solid 2px #ea2c5a;
    border-right: solid 2px #ea2c5a;
    transform: rotate(135deg);
}

/* form */
.mediadraft-form-section {
    border-radius: var(--bs-border-radius);
    padding: 20px;
}
/*
.mediadraft-form-section hr {
    border-top-color: #ccc;
}
*/
[data-bs-theme="light"] .mediadraft-form-section {
    background: #eee;
}    
[data-bs-theme="dark"] .mediadraft-form-section {
    background: #1a1d20;        
}    

.mediadraft-logo,
.mediadraft-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 100%;
}
button .mediadraft-logo,
button .mediadraft-avatar {
    width: 20px  !important;
    height: 20px !important;    
}

.mediadraft-ad {
    border: 1px #eee solid;
    border-radius: 4px;
    width:150px;
}

.mediadraft-releasenotes-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}
.mediadraft-releasenotes-images > * {
    margin: 10px;
}
.mediadraft-releasenotes-images img {
    border: solid 1px var(--bs-border-color);
    border-radius: 4px;
    max-width: 100%;
}

.mediadraft-footer {
    margin-top: 20px;
    border-top: solid 1px var(--bs-border-color);    
}

/* grid */
body.mediadraft-grid {
    display: grid;
    grid-template-areas:
    'header'
    'menu'
    'main'
    'footer';

    height: 100vh;
    transition: grid-template-columns 0.35s ease;
}
body.mediadraft-grid header.mediadraft-grid-header {
    grid-area: header;
}
body.mediadraft-grid nav.mediadraft-grid-menu {
    grid-area: menu;
    display: none;
}
body.mediadraft-grid main {
    grid-area: main;
}
body.mediadraft-grid footer {
    grid-area: footer;
}

.mediadraft-feedback {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 30px);
    z-index: 9999;
    width: 320px;
}

@media (min-width: 992px) {
    body[data-mediadraft-menubar="full"].mediadraft-grid,
    body[data-mediadraft-menubar="minimal"].mediadraft-grid {
        grid-template-areas: 
        'header header'
        'menu main'
        'menu main'
        'menu footer';
    }

    body[data-mediadraft-menubar="full"].mediadraft-grid {
        grid-template-columns: 320px 1fr;
    }
    
    body[data-mediadraft-menubar="minimal"].mediadraft-grid {
        grid-template-columns: 120px 1fr;
    }
    
    [data-mediadraft-menubar="full"],
    [data-mediadraft-menubar="minimal"] {
        nav.mediadraft-grid-menu {
            display: block !important;
        }
    }
}

.mediadraft-menu-items ul li {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top-width: 0 !important;
}
.mediadraft-menu-items ul li:first-child {
    border-top-width: 1px !important;
}
.mediadraft-menu-items ul li ul li:last-child {
    border-bottom: 0 !important;
}
.mediadraft-menu-items ul li a {
    display: block;
    font-size: 16px;
    padding: 10px;
}
.mediadraft-menu-items ul li ul li a {
    padding-left: 40px;
}
.mediadraft-menu-items ul li:empty {
    height: 44px;
}

[data-mediadraft-menubar="full"] {
}

[data-mediadraft-menubar="minimal"] {
    nav.mediadraft-grid-menu .mediadraft-menu-items {
        text-align: center;
    }
    nav.mediadraft-grid-menu .mediadraft-menu-items ul li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
    }
    nav.mediadraft-grid-menu .mediadraft-menu-items ul li a i {
        font-size: 35px;
    }
    nav.mediadraft-grid-menu .mediadraft-menu-items ul li a span {
        font-size: 15px;
        word-break: break-word;
        margin-top: 4px;
    }
    nav.mediadraft-grid-menu .mediadraft-menu-items ul li:empty {
        height: 100px;
    }
}

.mediadraft-alert-admin {
    animation: blinker 1.5s infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}