/*
*
* Melos studios
*
* Most of the contents of this file are joomla overides
* 
*
*/


@font-face {
    font-family: 'Agdasima-Bold';
    src: url('./fonts/Agdasima-Bold.ttf');
    font-weight: bolder;
    font-style: normal;
}

@font-face {
    font-family: 'LexendDeca';
    src: url('./fonts/LexendDeca-ExtraBold.ttf');
    font-weight: bolder;
    font-style: normal;
}

@font-face {
    font-family: 'Yeshuah';
    src: url('./fonts/Yeshuah.ttf');
    font-weight: bolder;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('./fonts/Quicksand-Light.ttf');
    font-weight: bolder;
    font-style: normal;
}

:root{
    --site-bg :  rgb(31, 31, 31);
    --main-bg : rgb(0, 212, 159);
    --header-color-1 : color-mix(in srgb,var(--main-bg) 50%, rgb(0,0,0));
    --header-color-2 : rgba(15, 0, 29, 0);
    --breadcrumb :color-mix(in srgb,var(--main-bg) 20%, transparent);
    --card : color-mix(in srgb,var(--main-bg) 50%, transparent);
    --border-radius: 8px;
    --link-color : #fff;
    --tinyMce-bg : #2c2c2c;
    --tinyMce-color : #fff;
}

body{
    background-color:var(--site-bg);
    color: #f1f1f1;
    background-image: url(../../../../../images/bg4.png);
    background-position: top right;
    background-size: cover;
    min-width: 195px;
    font-family: 'Quicksand';
    font-size: 1.01em;
    font-weight: bolder;
}

a{
    text-decoration: none !important;
    color :var(--link-color);
}

body.wrapper-fluid .site-grid {
    grid-gap: 0 1em;
    grid-template-columns: [full-start]minmax(0,1fr)[main-start]repeat(4,minmax(0,25%))[main-end]minmax(0,1fr)[full-end];
}


/*
* Header
*/

.logo-container{
    display: flex;
    gap: 10px;

}

.logo{
    max-height: 80px;
    max-width: 80px;
    object-fit: contain;
}

.container-header{
    background-color: unset;
    background-image: linear-gradient(220deg,var(--header-color-2)0%,var(--header-color-1)50%,var(--header-color-2)100%);
    backdrop-filter: blur(1px);
}

.brand-logo{
    text-decoration: none;
    font-family: 'Yeshuah';
    letter-spacing: 3px;
}

.container-header .navbar-brand {
    color: #fff;
    margin-inline-end: auto;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    font-size: 2rem;
    display: inline-block;
    position: relative;
    padding-left: 15px;
}

.header-patch{
    display:flex;
    justify-content: space-between;
}


/*
* NAV
*/

.navbar {
    --navbar-padding-x: 0;
    --navbar-padding-y: .5rem;
    --navbar-color: rgba(var(--emphasis-color-rgb), .65);
    --navbar-hover-color: rgba(var(--emphasis-color-rgb), .8);
    --navbar-disabled-color: rgba(var(--emphasis-color-rgb), .3);
    --navbar-active-color: rgba(var(--emphasis-color-rgb), 1);
    --navbar-brand-padding-y: .3125rem;
    --navbar-brand-margin-end: 1rem;
    --navbar-brand-font-size: 1.25rem;
    --navbar-brand-color: rgba(var(--emphasis-color-rgb), 1);
    --navbar-brand-hover-color: rgba(var(--emphasis-color-rgb), 1);
    --navbar-nav-link-padding-x: .5rem;
    --navbar-toggler-padding-y: .25rem;
    --navbar-toggler-padding-x: .75rem;
    --navbar-toggler-font-size: 1.25rem;
    --navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2834, 38, 42, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --navbar-toggler-border-color: rgba(var(--emphasis-color-rgb), .15);
    --navbar-toggler-border-radius: .25rem;
    --navbar-toggler-focus-width: .25rem;
    --navbar-toggler-transition: box-shadow .15s ease-in-out;
    padding: var(--navbar-padding-y) var(--navbar-padding-x);
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    display: flex;
    position: relative;
    text-align: start;
}

.container-header .container-nav {
    flex-wrap: wrap;
    justify-content: end;
    align-items: center;
    padding-bottom: 1em;
    margin-right: 30px;
    max-width: fit-content !important;
}

.container-header .navbar-toggler {
    color: #fff;
    cursor: pointer;
    outline: unset;
    border: 1px solid var(--main-bg);
}

.navbar-toggler {
    padding: var(--navbar-toggler-padding-y) var(--navbar-toggler-padding-x);
    font-size: var(--navbar-toggler-font-size);
    color: var(--navbar-color);
    border: var(--border-width) solid var(--navbar-toggler-border-color);
    border-radius: var(--navbar-toggler-border-radius);
    transition: var(--navbar-toggler-transition);
    background-color: #0000;
    line-height: unset;
}

@media only screen and (max-width: 760px) {

    .navbar-collapse{
        margin-top: 15px !important;
        background-color: color-mix(in srgb, var(--main-bg) 50%, transparent);
        padding: 10px;
        border-radius: 8px;
        box-shadow: #00000085 2px 2px 5px;
        backdrop-filter: blur(5px);      
    }

    .logo-container{
        display: block;
        gap: 10px;
    
    }

    .header-patch{
        display:flex;
        flex-direction: column;
    }
}

@media only screen and (min-width: 760px) {
    .navbar-collapse{
        margin-top: unset;
        background-color: unset;
        padding: unset;
        border-radius: unset;
        box-shadow: unset;
        backdrop-filter: unset;
    }
    
}

@media only screen and (max-width: 400px) {

    .header-patch{
        display:flex;
        flex-direction: column;
    }

    .container-header .container-nav {     
        justify-content: end;
        /* padding-right: 50px; */
    }

    
}


/*
* breadcrumb
*/

.breadcrumb {
    background-color: var(--breadcrumb);
    margin-bottom: 0;
    border-radius: var(--border-radius);
    font-size: 12px;
    padding: 3px;
}

.breadcrumb-item.active {
    color: #fff;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: var(--breadcrumb-item-padding-x);
    color: unset;
    content: var(--breadcrumb-divider, "/");
  }


/*
* Joomla alerts
*/

#system-message-container joomla-alert .alert-heading {
    color: var(--alert-heading-text);
    background: var(--main-bg, transparent);
    flex-direction: column;
    place-content: center;
    padding: .8rem;
    display: flex;
}

#system-message-container joomla-alert[type="info"], #system-message-container joomla-alert[type="notice"] {
    --alert-accent-color: var(--info);
    --alert-heading-text: #fffffff2;
    --alert-close-button: var(--info);
    background-color: #00662a;
}

#system-message-container joomla-alert[type="error"], #system-message-container joomla-alert[type="danger"] {
    --alert-accent-color: var(--danger);
    --alert-heading-text: #fffffff2;
    --alert-close-button: var(--danger);
    background-color: #3d0000;
}

#system-message-container joomla-alert[type="success"], #system-message-container joomla-alert[type="message"] {
    --alert-accent-color: var(--success);
    --alert-heading-text: #fffffff2;
    --alert-close-button: var(--success);
    background-color: #00662a;
}

#system-message-container joomla-alert[type="warning"] {
    --alert-accent-color: var(--warning);
    --alert-heading-text: #fffffff2;
    --alert-close-button: var(--warning);
    background-color: #3d0000;
}



/*
* LOGIN
*/

.com-users-login-wrapper{
    display: flex;
    width: 100%;
    justify-content: center;
}

.com-users-login{
    align-self: center;
    background-color: color-mix(in srgb,var(--main-bg) 20%, transparent);
    padding: 20px;
    border-radius: 8px;
    box-shadow: rgba(0,0,0,0.3) 0px 0px 15px;
}

.com-users-login .header{
    font-size: 22px;
    font-weight: bold;
}


/*
* CARD
*/

.card{
    background-color: var(--card);
    color: #f1f1f1;
    border-color: unset;
    border-width: 0;
    box-shadow: #00000085 2px 2px 5px;
    border-radius: var(--border-radius);
}

.card-header {
    font-size: 16px;
    border-bottom: var(--card-border-width)solid var(--site-bg);
    background-image: linear-gradient(135deg,var(--header-color-1)0%,var(--header-color-2)90%);
}


/*
* Custom button
*/

.button{
    display: flex;
    gap : 10px;
    background-color: color-mix(in srgb, var(--main-bg) 50%, rgb(0,0,0));
    border: none;
    color: #fff;
    max-width: 90px;
    border-radius: 8px;
    padding: 10px;
    box-shadow: rgba(0,0,0,0.1) 0 0 5px;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
    text-align: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.button:hover{
    transform: scale(1.05);
}

.button img{
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.btn-primary{
    background-color: color-mix(in srgb, var(--main-bg) 50%, rgb(0,0,0));
}

.btn-primary:hover{
    transform: scale(1.05);
    background-color: color-mix(in srgb, var(--main-bg) 30%, rgb(0,0,0));
}