/** GLOBAL **/
body, H1, H2, H3, H4, H5, H6 {
    font-family: Assistant;
    color: #4E4E4E;
}

.mce-notification.mce-in {
    display: none; !important;
}

button:focus {
    outline: none !important;
}

.container-fluid {
    padding-left: 10%;
    padding-right: 10%;
}

.container-fluid.content {
    margin-bottom: 5em;
}

.flash-message {
    width: 98%;
    margin-left: 2%;
    padding-left: 5%;
    font-weight: bold;
    text-align: center;
}

.client-no-news {
    height: 300px;
    overflow: auto;
}

/** BUTTON FOR MODAL **/

button.modal-button {
    background: #4E4E4E;
    border-radius: 15px;
    position: relative;
    width: 100%;
    color: #ffffff;
    height: 35px;
    padding-left: 2rem;
    cursor: pointer;
}

button.modal-button > i {
    position: absolute;
    left: -4px;
    font-size: 2.3em;
    top: -1px;
    color: #ffffff;
}

/** ADMIN **/

.page-title-info-admin {
    background-color: #B1CAD1;
    width: 98%;
    margin-left: 2%;
    height: 100px;
    padding-left: 5%;
    color: #ffffff;
    text-transform: uppercase;
    display: flex;
    display: -ms-flex;
    display: -ms-flexbox;
    align-items: center;
}

.page-title-info-admin H1 {
    margin-left: 40px;
    font-weight: lighter;
    font-size: 3.5em;
    color: #ffffff;
}

.page-title-info-admin > i {
    font-size: 3.5em;
}

.infos-admin-title-container {
    margin-bottom: 2em;
    margin-top: 5em;
    padding-bottom: .4em;
    border-bottom: 1px solid #4E4E4E;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

h2.title-admin {
    font-size: 1.7em;
    font-weight: bold;
    width: 100%;
    margin-left: -12px;
}

h2.sub-title-admin {
    font-size: 1.3em;
    font-weight: 300;
    width: 100%;
    margin-left: -12px;
}

.sub-title-admin-container {
    margin-bottom: 2em;
    margin-top: 2em;
    padding-bottom: .4em;
    border-bottom: 1px solid #4E4E4E;
}


/** CLIENTS **/

.page-title-info-client {
    background-color: #C4C978;
    width: 98%;
    margin-left: 2%;
    height: 100px;
    padding-left: 5%;
    color: #ffffff;
    text-transform: uppercase;
    display: flex;
    display: -ms-flex;
    display: -ms-flexbox;
    align-items: center;
}

.page-title-info-client H2 {
    margin-left: 40px;
    font-weight: lighter;
    font-size: 3.5em;
    color: #ffffff;
}

.page-title-info-client > i {
    font-size: 3.5em;
}

H2.title-shop-name {
    font-size: 1.7em;
    font-weight: 600;
    width: 90%;
    margin-left: -12px;
}

h2.title-shop-name > a, h2.title-shop-name > a:hover {
    color: #4E4E4E;
    font-size: .8em;
    text-decoration: none;
    padding-left: 2em;
}

.title-page-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: 5em;
    margin-bottom: .5em;
    padding-bottom: .4em;
    border-bottom: 1px solid #4E4E4E;
}

.button-title-container {
    margin-bottom: 0.5rem;
}

span.button-title-container {
    width: 15%;
}

button.button-title {
    background: #4E4E4E;
    border-radius: 15px;
    position: relative;
    width: 100%;
    color: #ffffff;
    height: 35px;
    padding-left: 2rem;
    cursor: pointer;
}

button.button-title > i {
    position: absolute;
    left: -4px;
    font-size: 2.3em;
    top: -1px;
    color: #ffffff;
}

.contact-content {
    margin: 1em 5px 2em 0;
}

.contact-name {
    font-weight: bold;
    text-transform: capitalize;
}

.contact-details {
    padding-left: 8px !important;
}

.contact-details p {
    margin: 0;
    font-weight: lighter;
}

.fa-smile.black {
    color: #4E4E4E;
}

.icon-contact-edit-container p {
    width: 50%;
    text-align: center;
}

.icon-contact-edit-container i {
    font-weight: bold;
    cursor: pointer;
}

.icon-contact-edit-container p:first-of-type {
    width: 50%;
    text-align: left;
    padding-left: 12%;
}

.messages-title-container {
    margin-bottom: .5em;
    padding-bottom: .4em;
    border-bottom: 1px solid #4E4E4E;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.message-container {
    margin: 30px -15px;
    background: rgba(196, 201, 120, .3);
}

.message-container-second {
    margin: 30px -15px;
    background: rgba(177, 202, 209, 0.3);
}

input[type="search"].form-control {
    border: none;
}

th.sorting_asc::before {
    color: #4E4E4E;
    font-weight: bold;
}

th.sorting_asc::after {
    color: #C4C978;
    font-weight: bold;
}

th.sorting::before {
    color: #4E4E4E;
    font-weight: bold;
}

th.sorting::after {
    color: #C4C978;
    font-weight: bold;
}

.dataTables_info {
    display: none;
}

.page-item.active .page-link {
    background-color: #C4C978;
    border-color: #C4C978;
}

.commandes-title-container {
    margin-bottom: 2em;
    padding-bottom: .4em;
    border-bottom: 1px solid #4E4E4E;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}


/** ALL SHOPS **/

.all-shops-container {
    padding-bottom: .4em;
    border-bottom: 1px solid #4E4E4E;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin: 5em 0 3em 0;
}

.shops-table a {
    color: #4E4E4E;
}

.shops-table a:hover {
    color: #C4C978;
    text-decoration: none;
    font-size: 1.2em
}


/** SHOP CREATION **/

.contact-form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

button.add-contact-type {
    background: #4E4E4E;
    border-radius: 15px;
    position: relative;
    width: 50%;
    color: #ffffff;
    height: 35px;
    padding-left: 2rem;
    align-self: center;
    cursor: pointer;
}

button.add-contact-type > i {
    position: absolute;
    left: -4px;
    font-size: 2.3em;
    top: -1px;
    color: #ffffff;
}

.add-shop-button-container {
    display: flex;
    justify-content: center;
}

button.add-shop {
    background: #4E4E4E;
    border-radius: 15px;
    position: relative;
    width: 50%;
    color: #ffffff;
    height: 35px;
    padding-left: 2rem;
    margin-top: 3em;
    cursor: pointer;
}

button.add-shop > i {
    position: absolute;
    left: -4px;
    font-size: 2.3em;
    top: -1px;
    color: #ffffff;
}


/** ADD COMMANDE **/

.title-commande-page-container {
    display: flex;
    margin-top: 5em;
    margin-bottom: .5em;
    padding-bottom: .4em;
    border-bottom: 1px solid #4E4E4E;
}

.title-add-commande {
    font-size: 1.7em;
    font-weight: bold;
    width: 100%;
    margin-left: -12px;
}

label.select-product {
    color: #999;
    font-size: 18px;
    font-weight: normal;
    margin: 2em 0;
}

p.commande-date {
    color: #999;
    font-size: 18px;
    font-weight: normal;
    margin: 2em 0;
}

div.add-commande-button-container {
    display: flex;
    justify-content: center;
    margin-bottom: 3em;
}

span.button-title-container {
    text-align: center;
    width: 100%;
}

button.add-commande {
    background: #4E4E4E;
    border-radius: 15px;
    position: relative;
    width: 50%;
    color: #ffffff;
    height: 35px;
    padding-left: 2rem;
    cursor: pointer;
}

@media all and (min-width: 481px) and (max-width: 1400px) {

    .page-title-info-admin {
        width: 90%;
        margin-left: 10%;
    }

    .container-fluid {
        padding-left: 16%;
    }

}

.search {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 20%;
    right: 0;
    width: 50px;
    height: 50px;
    background: red;
}