/* --------------- VARIABLES --------------- */

:root {
    /* Accent */
    --accent-color: #009688;

    /* Text colors */
    --first-text-color: #222222;
    --second-text-color: #ffffff;
    --third-text-color: #374767;

    --footer-text-color: #444444;

    /* Backgound colors */
    --logo-bg-color: #0c0b0c;
    --header-bg-color: #2a3f54;
    --asside-bg-color: #010a0f;
    --page-header-bg-color: #ffffff;
    --page-bg-color: #ececec;
    --panel-header-bg-color: #e8f1f3;
    --footer-bg-color: #dedede;

    --first-hover-bg-color: #f5f5f5;

    --panel-header-bg-color: #e8f1f3;
    --panel-content-bg-color: #ffffff;

    --table-header-bg-color: #d9edf7;
    --table-first-bg-color: #f9f9f9;
    --table-second-bg-color: #ffffff;
    --table-hover-bg-color: #f5f5f5;

    --button-text-color: #fbfbfb;
    --button-add-bg-color: #009688;
    --button-add-hover-bg-color: rgba(0, 150, 135, 0.718);

    --button-del-bg-color: #e5343d;
}

/* --------------- RESET --------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

p {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

/* --------------- COMMON --------------- */

body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}

button {
    font-family: inherit;

    cursor: pointer;
}

.list {
    list-style: none;
}

.link {
    text-decoration: none;
    color: currentColor;
}

/* --------------- HEADER --------------- */

.header {
    display: flex;
    width: 100%;

    background-color: var(--header-bg-color);
}

.logo {
    display: flex;
    justify-content: center;
    min-width: 250px;
    padding-top: 15px;
    padding-bottom: 15px;

    background-color: var(--logo-bg-color);
}

.logo-link {
    font-size: 28px;
    text-transform: uppercase;
    color: var(--second-text-color);
}

.logo-accent {
    color: var(--accent-color);
}

.header-right {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: center;
    padding: 0px 30px;
}

.header-actions-list {
    display: flex;
    gap: 15px;
    height: 100%;
}

.header-actions-item {
    position: relative;

    width: 50px;
    /* height: 100%; */
}

.header-actions-button {
    width: 100%;
    height: 100%;
    font-size: 20px;

    color: var(--second-text-color);
    background-color: transparent;
    border: none;

    transition: color 150ms ease;
}

.header-actions-button:hover,
.header-actions-button:focus {
    color: var(--accent-color);
}

.header-user-menu-list {
    position: absolute;
    top: 100%;
    right: 0;

    display: flex;
    flex-direction: column;
    padding: 10px 0;
    min-width: 200px;

    background-color: #fff;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

.header-user-menu-list.is-hidden {
    display: none;
}

.header-user-menu-link {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 10px 15px;

    font-size: 14px;
    font-weight: 600;
    color: var(--third-text-color);

    transition: color 150ms ease, background-color 150ms ease;
}

.header-user-menu-link:hover,
.header-user-menu-link:focus {
    color: var(--accent-color);
    background-color: var(--first-hover-bg-color);
}

/* --------------- WRAPPER --------------- */

.wrapper {
    display: flex;
    flex-direction: column;

    min-height: 100%;
}

.content-wrapper {
    display: flex;
    flex: 1 1 auto;
}

/* --------------- ASSIDE --------------- */

.nav {
    width: 250px;
    min-height: 100%;

    background-color: var(--asside-bg-color);
}

.nav-list {
    display: flex;
    flex-direction: column;
}

.nav-link {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 10px 15px;

    font-weight: 500;
    line-height: 1.43;
    letter-spacing: 0.3px;
    color: var(--second-text-color);
}

.nav-icon {
    padding-right: 10px;
    font-size: 18px;
}

/* --------------- PAGE --------------- */

.page {
    flex-grow: 1;
    background-color: var(--page-bg-color);
}

.page-header {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 10px 20px;

    background-color: var(--page-header-bg-color);
    border-bottom: 1px solid #e1e6ef;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}

.page-icon {
    font-size: 40px;
    color: var(--accent-color);
}

.page-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--first-text-color);
}

.page-after-title {
    padding-left: 4px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.42;
}

.page-content {
    padding: 20px;
}

/* --------------- CUSTOMER PAGE --------------- */

.customer-table-activity {
    text-align: center;
    width: 110px;
}

.customer-table-status {
    text-align: center;
    width: 80px;
}

.customer-table-actions {
    text-align: center;
    width: 80px;
}

/* --------------- FOOTER --------------- */

.footer {
    display: flex;
}

.footer-left {
    width: 250px;

    background-color: var(--asside-bg-color);
}

.footer-right {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    padding: 15px;

    line-height: 20px;
    color: var(--footer-text-color);
    background-color: var(--footer-bg-color);
}

.footer-copy {
    font-weight: 700;
}

.footer-link {
    color: var(--accent-color);
}