:root {
    --main-color: #81d4fa;
    --main-color-hover: #69b7da;

}

html {
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 100%;
    background-color: #e1f5fe;  
}
.app {
    display: flex;
    min-height: 90vh;
    flex-direction: column;
}
nav, .btnAction, footer {
    background-color: var(--main-color) !important;
}
.btnAction:hover {
    background-color: var(--main-color-hover) !important;
}
.btnCancel {
    background-color: #dadada !important;
}
.btnCancel:hover {
    background-color: #cfcfcf !important;
}
.btn.red:hover {
    background-color: #d1392d !important;
}
blockquote {
    border-left: 5px solid var(--main-color-hover);
}

/* Sidenav mobile */
#slide-out .background {
    background-color: var(--main-color);
}


.homepage section {
    margin-top: 7%;
}
.homepage .collection-item i {
    color: #000000;
}
.homepage .collection-item:last-child div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.homepage .collection-item.delete button {
    display: flex;
}
.homepage .collection-item.delete i {
    color: #FFFFFF;
}


/* Create Product Page */
.createProductPage .flex-row {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.createProductPage #product_description, .createProductPage #product_description:focus {
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
}
.createProductPage #product_description:focus {
    border-bottom: 1px solid var(--main-color) !important;
    -webkit-box-shadow: 0 1px 0 0 var(--main-color) !important;
    box-shadow: 0 1px 0 0 var(--main-color) !important;
}


/* Edit Product Page */
.editPage .flex-row {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.editPage form label {
    color: #444;
}
.editPage .btnFileUpload label {
    color: #FFF;
}
.editPage #product_description, .editPage #product_description:focus {
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
}
.editPage #product_description:focus {
    border-bottom: 1px solid var(--main-color) !important;
    -webkit-box-shadow: 0 1px 0 0 var(--main-color) !important;
    box-shadow: 0 1px 0 0 var(--main-color) !important;
}
.editPage .row-flex-img {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.editPage .file-field {
    display: flex;
    flex-direction: column-reverse;
}
.editPage .file-field #product_imageFile_delete {
    position: relative;
    z-index: 1;
    opacity: 1;
    pointer-events: inherit;
}
.editPage .file-field label[for=product_imageFile_delete] {
    position: relative;
    z-index: 1;
}
.editPage .file-field input[type=file] {
    z-index: 1;
}
.editPage .img-box-edit {
    display: flex;
    justify-content: center;
}
.file-field .vich-file a {
    display: none;
}


/* Liste des produits */
.card .flex-row-product-reveal {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    gap: 8px;
}
.card .flex-row-product-reveal i {
    margin: 0;
}
table td.td-actions {
    /* display: grid; */
    display: flex;
    justify-items: center;
    justify-content: start;
    gap: 5px;
}
table td .material-placeholder img {
    max-width: 50px;
}
#materialbox-overlay {
 background-color: #292929d1;   
}

.card .btn.red {
    width: 100%;
}
.card .card-content a {
    color: black;
    font-weight: bold;
    text-underline-offset: 10px;
    text-decoration: underline;
}

/* Flashes Error Success Messages */
.flash-nav {
    background-color: #c7c7c7c4 !important;
    box-shadow: none;
    -webkit-box-shadow: none;
    opacity: 1;
    animation: hideMessage 5s forwards;
}
@keyframes hideMessage {
    0%   { opacity: 1; }
    50%   { opacity: 1; }
    60%   { opacity: 0.7; }
    70%   { opacity: 0.4; }
    100%  { opacity: 0.1; display: none;}
  }


/* Product Page - Render */
.row-product-content {
    display: flex;
    align-items: center;
}


/* Login Page - Connexion */
.row-login-infos {
    margin-top: 20px;
}

/* Contact Page */
.contactPage #contact_message, .contactPage #contact_message:focus {
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
}
.contactPage #contact_message:focus {
    border-bottom: 1px solid var(--main-color) !important;
    -webkit-box-shadow: 0 1px 0 0 var(--main-color) !important;
    box-shadow: 0 1px 0 0 var(--main-color) !important;
}
.contactPage .flex-row {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}


/*Materialize Forms*/
input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid var(--main-color) !important;
    -webkit-box-shadow: 0 1px 0 0 var(--main-color) !important;
    box-shadow: 0 1px 0 0 var(--main-color) !important;
}
input:not([type]):focus:not([readonly])+label,input[type=text]:not(.browser-default):focus:not([readonly])+label,input[type=password]:not(.browser-default):focus:not([readonly])+label,input[type=email]:not(.browser-default):focus:not([readonly])+label,input[type=url]:not(.browser-default):focus:not([readonly])+label,input[type=time]:not(.browser-default):focus:not([readonly])+label,input[type=date]:not(.browser-default):focus:not([readonly])+label,input[type=datetime]:not(.browser-default):focus:not([readonly])+label,input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label,input[type=tel]:not(.browser-default):focus:not([readonly])+label,input[type=number]:not(.browser-default):focus:not([readonly])+label,input[type=search]:not(.browser-default):focus:not([readonly])+label,textarea.materialize-textarea:focus:not([readonly])+label {
    color: var(--main-color);
}
[type="checkbox"].filled-in:checked+span:not(.lever):after {
    border: 2px solid var(--main-color);
    background-color: var(--main-color);
}

.error-row-form {
    color: red;
}
.error-row-form ul {
    margin: 5px 0;
}
.btnFileUpload {
    background-color: var(--main-color) !important;
}
.btnFileUpload label {
    color: #FFF;
}


/* Dropdrown flags */
.nav-item.dropdown {
    position: relative;
}
#dropdown-language {
    background-color: transparent;
    box-shadow: none;
}
#dropdown-language::after {
    content: '\25bc';
    padding-left: 0.1em;
    color: var(--main-color-hover);
}
#dropdown-language:hover {
    box-shadow: inset 0 0 10px var(--main-color-hover);
}
.dropdown-content {
    width: 100% !important;
    height: auto !important;
}
.dropdown-content .dropdown-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.dropdown-content .dropdown-item .flag-img {
    max-width: 25px;
    border-radius: 5px;
}
.dropdown-content .dropdown-item span {
    color: var(--main-color);
}

/* Queries */
@media (max-width: 1500px) {
    .editPage .row-flex-img {
        flex-direction: column;
    }
}
@media (min-width: 993px) {
    #dropdown-language {
        height: auto;
        margin-top: unset;
        vertical-align: baseline;
    }
}
@media (max-width: 992px) {
    #slide-out .lang-mobile li {
        float: left !important;
        width: 100%;
    }
    #slide-out .lang-mobile li.divider {
        margin: 0;
    }
    #slide-out .lang-mobile li a.btn {
        margin: 0;
        color: rgba(0,0,0,0.87);
        text-align: left;
    }

    h1 {
        font-size: 3rem;
    }

    table.responsive-table {
        display: flex;
    }
}
@media (max-width: 600px) {
    .row-product-content {
        display: flex;
        flex-direction: column;
    }
}