:root {
    --blue:#003366;
    --blue-accent:rgb(0, 50, 63);
    --grey:#F4F4F4;
    --text:#1C1C1C;
    --white:#FFFFFF;
    --shadow: 0 2px 8px rgba(0,0,0,.08);
    --bs-link-color: rgb(0, 149, 180);
    --bs-link-hover-color: rgb(0, 149, 180);
    --bs-pagination-active-bg: rgb(0, 149, 180);
    --bs-primary-rgb: 0, 149, 180;
    --bs-link-color-rgb: 0, 149, 180;
}
.pagination {
    --bs-pagination-active-bg: rgb(0, 149, 180);
    --bs-pagination-active-border-color: rgb(0, 149, 180);
}
.btn-primary {
    --bs-btn-hover-bg: rgb(0, 50, 63);
    --bs-btn-hover-border-color: rgb(0, 50, 63);
    --bs-btn-bg: rgb(0, 149, 180);
    --bs-btn-border-color: rgb(0, 149, 180);
}

.bg-blue { 
    background-image:  linear-gradient(90deg, rgb(0, 50, 63), rgb(0, 149, 180));
}
.bg-blue-accent { 
    background-color: var(--blue-accent); 
}
.bg-grey { background-color: var(--grey); }
.bg-white { background-color: var(--white); }

.text-blue { color: var(--blue); }
.text-blue-accent { color: var(--blue-accent); }
.text-grey { color: var(--grey); }
.text-white { color: var(--white); }
.text-dark { color: var(--text); }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.menu-wrapper .menu-item {
    text-decoration: none;
}

.menu-wrapper .nav-item a.menu-item {
    color: #fff;
}
.menu-wrapper .nav-item a.menu-item:hover, .menu-wrapper .nav-item a.menu-item.active {
    background: #eaf2ff;
    border-color: #cfe0ff;
    color: #0b2b4f;
}

a.user-control-link {
    text-decoration: none;
    color: inherit;
}

#dashboard-wrapper {
    max-height: 100vh;
    overflow: scroll;
}

#dashboard-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.response-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.response-wrapper > .response {
    width: 90%;
}

.response-wrapper.user {
    align-items: start;
}

.response-wrapper.user > .response,
.response-wrapper.user > .comment-detail {
    background-color: var(--bs-dark-bg-subtle);
}

.response-wrapper.user > .response {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

.response-wrapper.admin {
    align-items: end;
}

.response-wrapper.admin > .response,
.response-wrapper.admin > .comment-detail {
    background-color: var(--blue);
}

.response-wrapper.admin > .response {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
    color: white;
}

.comment-detail {
    display: block;
    height: 30px;
    width: 30px;
    transform: translateY(-50%) translateX(50%) rotate(45deg);
}

.response-wrapper.user .comment-detail {
    transform: translateY(-50%) translateX(-50%) rotate(45deg);
}

.response-wrapper.admin.comment > .response {
    background-color: var(--bs-secondary-bg-subtle);
    color: var(--bs-dark-text-emphasis);
    border-bottom-right-radius: var(--bs-border-radius);
}

.response-wrapper.admin.comment > .comment-detail {
    opacity: 0;
}

.response-wrapper.admin.comment > .response {
    width: 70%;
}

.client-option:hover {
    background-color: var(--bs-secondary);
    color: white;
    cursor: pointer;
}

.user-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}