html,
body {
    font-family: "Roboto", "Helvetica", sans-serif;
}

button {
    border: none; /* Remove the border */
    background: none; /* Remove the background */
    padding: 0; /* Optional: remove any default padding */
    cursor: pointer; /* Optional: makes sure the cursor is a pointer when hovering over the button */
}

.flex-container {
    display: flex;
}

.cs-logon {
    width: 300px;
    height: 600px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.cs-logon .mdl-textfield {
    padding: 20px 0;
}

.cs-logon .mdl-textfield__input_cont {
    margin-bottom: 5px;
    padding: 4px;
}

.cs-logon .mdl-textfield__input {
    background-color: rgb(255, 255, 255, 0.1);
}

.cs-logon .mdl-textfield__label {
    color: rgb(255, 255, 255);
}

.cs-logon .mdl-button {
    position: inherit;
}

.cs-drawer {
    border: none;
}

.cs-drawer-header {
    margin: 10px;
}

.cs-logo {
    width: 100px;
    height: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.mdl-layout__header .mdl-layout__drawer-button {
    color: inherit;
}

.cs-navigation {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.cs-layout .cs-navigation .mdl-navigation__link {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.56);
    font-weight: 500;
}

.cs-layout .cs-navigation .mdl-navigation__link:hover {
    background-color: #e20613;
    color: #ffffff;
}

.cs-navigation .mdl-navigation__link .material-icons {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.56);
    margin-right: 32px;
}

.mdl-data-table th {
    font-size: 16px;
}

.cs-table .material-icons {
    font-size: 24px;
    color: rgba(40, 40, 40, 1);
}

.material-icons.toggleOn {
    color: rgb(20, 140, 30);
}

.material-icons.toggleOff {
    color: rgb(203, 14, 27);
}

.material-icons.default {
    color: rgb(40, 40, 40);
}

.material-icons.hacp {
    color: rgb(255, 144, 10);
}

.cs-articleFormContainer,
.cs-familleFormContainer,
.cs-pdvFormContainer,
.cs-hacpFormContainer,
.cs-statsLabelsContainer,
.cs-statsHacpContainer,
.cs-statsPhotosContainer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: visible;
    pointer-events: none;
}
.cs-articleFormContainer.is-visible,
.cs-familleFormContainer.is-visible,
.cs-pdvFormContainer.is-visible,
.cs-hacpFormContainer.is-visible,
.cs-statsLabelsContainer.is-visible,
.cs-statsHacpContainer.is-visible,
.cs-statsPhotosContainer.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.cs-articleForm {
    z-index: 6;
    opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    visibility: visible;
    margin: 0 auto;
    margin-top: 50px;
    padding: 10px;
    height: 90%;
    width: 800px;
    overflow: auto;
    border-radius: 8px;
}

.cs-familleForm {
    z-index: 6;
    opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    visibility: visible;
    margin: 0 auto;
    margin-top: 50px;
    padding: 10px;
    height: 90%;
    width: 500px;
    overflow: auto;
    border-radius: 8px;
}

.cs-pdvForm {
    z-index: 6;
    opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    visibility: visible;
    margin: 0 auto;
    margin-top: 50px;
    padding: 10px;
    height: 400px;
    width: 500px;
    overflow: auto;
    border-radius: 8px;
}

.cs-hacpForm {
    z-index: 6;
    opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    visibility: visible;
    margin: 0 auto;
    margin-top: 50px;
    padding: 10px;
    height: 400px;
    width: 500px;
    overflow: auto;
    border-radius: 8px;
}

.cs-labelStats {
    z-index: 6;
    opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    visibility: visible;
    margin: 0 auto;
    margin-top: 50px;
    padding: 10px;
    height: 90%;
    width: 90%;
    overflow: auto;
    border-radius: 8px;
}

.cs-hacpStats {
    z-index: 6;
    opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    visibility: visible;
    margin: 0 auto;
    margin-top: 50px;
    padding: 10px;
    height: 90%;
    width: 90%;
    overflow: auto;
    border-radius: 8px;
}

.cs-photosStats {
    z-index: 6;
    opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    visibility: visible;
    margin: 0 auto;
    margin-top: 50px;
    padding: 10px;
    height: 90%;
    width: 90%;
    overflow: auto;
    border-radius: 8px;
}

.cs-formTitleCont {
    display: flex;
    flex-direction: row;
    font-size: 24px;
}

.cs-formTitle {
    flex: 1;
    line-height: 26px;
}

.cs-form .mdl-textfield {
    padding: 5px 0;
    display: inline;
}

.mdl-card__title-text.btn {
    margin-left: 5px;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.cs-pricelistTable {
    border-spacing: 0;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.cs-pricelistHead {
    width: 200px;
}

.cs-hacpTypeHead {
    width: 20px;
}

.cs-pricelistCol {
    width: 50px;
}

.cs-barcodeCol {
    width: 100px;
}

.cs-pricelistRow {
    background-color: transparent;
    height: 20px;
}

.cs-pricelistRow:hover {
    color: #ffffff;
    background-color: #cb0e1b;
}

.cs-pricelistFamille {
}

.cs-pricelistArticle {
    font-size: x-small;
    font-size: 10px;
}

.cs-pricelistHacp {
    line-height: 25px;
    vertical-align: middle;
    display: flex;
}

.cs-pricelistPdv {
    line-height: 10px;
    font-size: x-small;
    font-weight: bold;
}

.cs-pricelistPrice {
    text-align: center;
}

.cs-pricelistPrice.error {
    color: #ffffff;
    background-color: rgba(255, 0, 0, 1);
}

.cs-pricelistPrice.awaiting {
    color: #ffffff;
    background-color: rgba(2253, 216, 53, 1);
}

.cs-pricelistPrice.none {
    color: #ffffff;
    background-color: rgba(10, 10, 10, 1);
}

.cs-pricelistPrice.modified {
    color: #ffffff;
    background-color: rgba(50, 150, 40, 1);
}