.wrapper {
    width: 100%;
    height: calc(100% - 3.5em);
    min-width: 768px;
    background: url('../static/dash_background.jpg') no-repeat center center;
    background-size: contain;
}

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 1fr auto;
    height: 100%;
    width: 100%;
}

.header-dashboard {
    grid-column: 1 / -1;
    height: 3.5em;
    padding: 15px;
    border-bottom: 1px solid black;
}

.main-dashboard {
    grid-column: 1 / -1;
    overflow-y: auto;
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 50px;
    grid-auto-flow: dense;
    align-content: flex-start;
    gap: 15px;
}

.component-container {
    background-color: #f9f9f9;
    padding: 15px;
    gap: 15px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    grid-column: span 3;
    grid-row: span 1;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    transition: box-shadow 0.3s ease;
}

.component-container:hover {
    box-shadow: 0 1px 5px rgba(0, 0, 255, 0.4);
}

.component-container .c-body {
    font-size: 18px;
    font-weight: 400;
}

.lead-container,
.contact-container,
.account-container,
.deal-container {
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: space-between;
    padding: 0px 30px;
}

span .icon {
    font-size: 20px;
}

.c-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

#Pipeline-container {
    grid-column: span 6;
    grid-row: span 3;
    position: relative;
    height: 400px;
}

#Pipeline-container .c-title {
    height: 5%;
    width: 100%;
}

#Pipeline-container .c-body {
    height: 95%;
    width: 100%;
}

#pipeline {
    height: 100%;
    width: 100%;
}

#select-pipeline {
    cursor: pointer;
    font-size: 14px;
    position: relative;
    padding: 5px 10px;
}