:root {
    /* 
        be aware of the css edits in the bottom of this file, 
        when it was changed from design v1 to design v2!
    */
    
    
    /* old colors - design v1 */
    /*
    --navbarBackgroundColor: #000000;
    --navbarTextColor: #ffffff;
    --navbarWitoLogoColor: #ffffff;

    --userStatusActive: #006400;
    --userStatusInactve: #8b0000;

    --background: linear-gradient(180deg, #edeae8 0%, #f7f3ef 39.5%, #f1edf2 54%, #dfe6ef 100%);
    --scrollBarBackgroundColor: #282c32;
    --hoverColor: #909fb8;
    --textColor: #000000;

    --callBoardGardient: #28c76f;
    --chatMessageBackgroundColor: #282c32;
    --chatMessageTextColor: #ffffff;
    
    --boxBackgroundColor: #f6f7f9;
    --primayBoxHeaderBackgroundColor: #282c32;
    --secondaryBoxHeaderBackgroundColor: #909fb8;
    --primayBoxHeaderTextColor: #ffffff;
    --secondaryBoxHeaderTextColor: #ffffff;
    
    --boxShadow: rgba(0, 0, 0, 0.20) 0px 2px 5px;
    --borderRadius: .5vh;
   
    --borderColor: #e0e0e0;
    --seperatorColor: #e0e0e0;

    --ganttChartEvenRowBackgroundColor: #fbfbfc;
    --ganttChartOddRowBackgroundColor: #f6f7f9;
    --ganttChartRowTextColor: #000000;
    --ganttChartSelectedRowBackgroundColor: #e4f5ec;
    --ganttChartSelectedRowTextColor: #000000;

    --presenceStatusOfflineColor: #a5a5a5;
    --presenceStatusAwayColor: #000000;
    --presenceStatusAvailableColor: #48bd7e;
    --presenceStatusBusyColor: #a53334;

    --calendarBarColor: #dfdfde;
    --calendarBusyColor: #a53334;
    --calendarAwayColor: #daa520;

    --callActionButtonTextColor: #ffffff;
    --callActionButtonDial: #28c76f;
    --callActionButtonAnswer: #28c76f;
    --callActionButtonReject: #ea5455;
    --callActionButtonHangup: #ea5455;
    --callActionButtonTransfer: #0056d2;
    --callActionButtonHold: #ff9e3f;
    --callActionButtonResume: #282c32;

    --callStatusConnected: #28c76f;
    --callStatusHold: #ff9e3f;
    */


    /* new colors - design v2 */
    --boxShadow: rgba(0, 0, 0, 0.20) 0px 2px 5px;
    --borderRadius: .5vh;
    --background: linear-gradient(180deg, var(--backgroundColorOne) 0%, var(--backgroundColorTwo) 39.5%, var(--backgroundColorThree) 54%, var(--backgroundColorFour) 100%);

    --backgroundColorOne: #edeae8;
    --backgroundColorTwo: #f7f3ef;
    --backgroundColorThree: #f1edf2;
    --backgroundColorFour: #dfe6ef;

    

    --navbarBackgroundColor: #488ea3;
    --navbarTextColor: #ffffff;
    --navbarWitoLogoColor: #ffffff;

    --userStatusActive: #006400;
    --userStatusInactve: #8b0000;

    --scrollbarColor: #282c32;
    --hoverColor: #909fb8;
    --textColor: #000000;
    --borderColor: #d1e3e8;
    --seperatorColor: #e0e0e0;

    --boxBackgroundColor: #f6f7f9;
    --activeBoxHeaderBackgroundColor: #488ea3;
    --activeBoxHeaderTextColor: #ffffff;
    --inactiveBoxHeaderBackground: #d1e3e8;
    --inactiveBoxHeaderTextColor: #488ea3;

    --callGradientColor: #45cb85;
    --activeCallBagdeBackgroundColor: #1a1919;
    --activeCallBagdeTextColor: #ffffff;
    --callStatusConnectedColor: #28c76f;
    --callStatusHoldColor: #ff9e3f;

    --callActionButtonTextColor: #ffffff;
    --callActionButtonDial: #4e6c3d;
    --callActionButtonAnswer: #4e6c3d;
    --callActionButtonReject: #b56239;
    --callActionButtonHangup: #b56239;
    --callActionButtonTransfer: #488ea3;
    --callActionButtonHold: #1a1919;
    --callActionButtonResume: #dfdfde;

    --chatMessageBackgroundColor: #282c32;
    --chatMessageTextColor: #ffffff;

    --ganttChartEvenRowBackground: #fbfbfc;
    --ganttChartOddRowBackground: #f6f9fa;
    --ganttChartRowTextColor: #000000;
    --ganttChartSelectedRowColor: #d1e3e8;
    --ganttChartSelectedRowTextColor: #000000;

    --presenceStatusOffline: #a5a5a5;
    --presenceStatusAway: #1a1919;
    --presenceStatusAvailable: #4e6c3d;
    --presenceStatusBusy: #b56239;

    --calendarBarColor: #dfdfde;
    --calendarBusyColor: #b56239;
    --calendarAwayColor: #daa520;

    --employeeInformationHeader: #d1e3e8;
    --searchInputButtonColor: #dfdfde;
    --searchInputIconColor: #488ea3;
}

body, html {
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    /*font-family: "Open Sans", sans-serif;*/
    background: var(--background);
}

body > div {
    background: var(--background);
}

.blurWindow .call-action-shortcut-key {
    display: none;
}

.layout ::-webkit-scrollbar {
    width: 4px;
}

.layout ::-webkit-scrollbar-thumb {
    background: var(--scrollbarColor);
    border-radius: var(--borderRadius);
}

.call-center {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--background);
}

.call-information {
    position: relative;
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 1.5%;
    margin-left: 25px;
}

.call-queues {
    width: 100%;
    height: 100%;
    border: 1px solid var(--borderColor);
    box-shadow: var(--boxShadow);
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    background-color: var(--activeBoxBackgroundColor);
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
}

.call-queues > #layoutBoxHeader {
    background-color: var(--highlightActiveBoxHeader);
}

#call-queues {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 16px;
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 10px;
    margin-top: 5px;
}

#call-queue:last-child {
    margin-bottom: 10px;
}

#call-queue-head {
    height: 40px;
}

#call-queue {
    height: auto;
    padding: 11px 0;
}

#call-queue-head > * {
    margin-top: auto;
    margin-bottom: auto;
}

#call-queue-head:after, #call-queue:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0px;
    background-color: var(--seperatorColor);
    filter: brightness(0.90);
}

#call-queue {
    position: relative;
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: start;
    font-weight: normal;
    color: var(--textColor);
    font-size: 12px;
}

#call-queue-head {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: start;
    color: var(--textColor);
    position: relative;
    font-weight: 600;
    font-size: 12px;
}

#call-queue-head > div, #call-queue > div {
    margin-left: auto;
    display: flex;
    gap: 15px;
    flex-direction: row;
    justify-content: start;
    align-items: start;
}

#call-queue-head > div > span {
    text-overflow: ellipsis;
    overflow: hidden;
    justify-content: end;
}

#call-queue-head > div > span, #call-queue > div > span {
    display: flex;
    gap: 5px;
    justify-content: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: fit-content;
}

#call-queue-head > div > span {
    width: fit-content;
}

#call-queue-head > div > #attendents {
    width: 85px;
}
#call-queue > div > #attendents {
    width: 100px;
}

.attendents-presencestatus > span > i {
    font-size:12px;
}

#call-queue-head > div > #number, #call-queue > div > #number {
    width: 80px;
}

#call-queue-head > div > #total, #call-queue > div > #total {
    width: 45px;
}

@media screen and (max-width: 1425px) {
    #call-queue-head > div > #attendents, #call-queue > div > #attendents {
        display: none !important;
    }
}

@media screen and (max-width: 1000px) {
    #call-queue-head > div > #total, #call-queue > div > #total {
        display: none;
    }
}

#call-queue-head > span:first-child, #call-queue > span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.call-board {
    width: 100%;
    height: 100%;
    border: 1px solid var(--borderColor);
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    background-color: var(--activeBoxBackgroundColor);
}

.call-board > #layoutBoxHeader {
    justify-content: center;
    background-color: var(--highlightActiveBoxHeader);
}

.call-controls {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
}

.call-control {
    padding: 16px;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
}

.call-control:after {
    content: "";
    width: 2px;
    height: calc(100% - 32px);
    background-color: var(--seperatorColor);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.call-control > #callLayoutBoxHeader {
    position: absolute;
    top: -40px;
    left: 0;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.callLayoutBoxHeader-active {
    background: linear-gradient(90deg, var(--callGradientColor) 0%, transparent 90%);
}

.callLayoutBoxHeader-call {
    background: linear-gradient(90deg, var(--callGradientColor) 0%, transparent 20%);
}

.call-control:nth-child(1) > #callLayoutBoxHeader {
    border-top-left-radius: var(--borderRadius);
}

.call-control:nth-child(2) > #callLayoutBoxHeader {
    border-top-left-radius: var(--borderRadius);
    float: right;
    transform: scaleX(-1);
}

#callLayoutBoxHeader > span {
    background-color: var(--boxBackgroundColor);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 50px;
    font-weight: normal;
    border: 1px solid var(--borderColor);
    color: var(--textColor);
}

#callLayoutBoxHeader > span:has(#callStatusDot) {
    background-color: var(--activeBoxHeaderBackgroundColor);
    color: var(--activeBoxHeaderTextColor);
    border: 1px solid var(--seperatorColor);
    opacity: 65%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.call-control:nth-child(2) > #callLayoutBoxHeader > span {
    transform: scaleX(-1);
}

.cc-call {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

#cc-information {
    position: relative;
    width: 100%;
    height: 100%;
}

#cc-info-head {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    line-height: 20px;
    padding-top: 5px;
    padding-bottom: 2px;
    color: var(--textColor);
    gap: 5px;
}

#cc-info-head > div {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    font-weight: 600;
    color: var(--textColor);
    font-size: 13px;
    gap: 32px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 5px;
}

#cc-info-head > div > i {
    font-size: 15px;
}

#cc-info-head > div:not(#hubspotDiv) {
    border-bottom: 2px solid var(--seperatorColor);
    padding-bottom: 16px;
}

#cc-info-head > #hubspotDiv {
    padding-top: 16px;
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: calc(32px - 5px);
}

#cc-info-head > #hubspotDiv > img {
    width: 20px;
}

#cc-info-head > #hubspotDiv > #hubspotTextDiv {
    display: flex;
    flex-direction: column;
    bottom: 0;
    width: 100%;
    align-items: start;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#cc-info-head > #hubspotDiv > #hubspotTextDiv > #hubspotText {
    font-weight: normal;
    font-size: 13px;
    color: var(--textColor);
    display: flex;
}

#cc-info-head > #hubspotDiv > #hubspotTextDiv > #hubspotText:first-child {
    font-weight: 600;
    margin-bottom: 2px;
}

#cc-info-foot {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 56px;
    white-space: nowrap;
}

#cc-info-foot > span {
    color: var(--textColor);
    font-weight: normal;
    font-size: 13px;
    padding: 10px 0;
    position: relative;
    display: flex;
    background-color: var(--activeBoxBackgroundColor);
}

#cc-info-foot > span:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--seperatorColor);
}

#cc-info-foot > span > i {
    font-weight: 600;
    margin-left: auto;
    font-style: normal;
    display: flex;
    gap: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 5px;
    align-items: center;
}

#call-actions {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: absolute;
    bottom: 0;
}

#call-actions:before {
    content: "";
    position: absolute;
    top: -16px;
    width: 100%;
    height: 2px;
    background-color: var(--seperatorColor);
}

.call-action {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    height: 40px;
    width: 100%;
    color: var(--callActionButtonTextColor);
    border-radius: var(--borderRadius);
    font-weight: 600;
    gap: 5px;
    cursor: pointer;
}

.call-action:hover {
    filter: brightness(0.75);
}

.call-action > .call-action-shortcut-key {
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
}

.call-action-dial {
    background-color: var(--callActionButtonDial);
}

.call-action-answer {
    background-color: var(--callActionButtonAnswer);
}

.call-action-reject {
    background-color: var(--callActionButtonReject);
}

.call-action-hangup {
    background-color: var(--callActionButtonHangup);
}

.call-action-transfer {
    background-color: var(--callActionButtonTransfer);
}

.call-action-hold {
    background-color: var(--callActionButtonHold);
}

.call-action-resume {
    background-color: var(--callActionButtonResume);
}

.call-statistics {
    width: 100%;
    height: 100%;
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    background-color: var(--activeBoxBackgroundColor);
    overflow: auto;
}

.call-statistics > #layoutBoxHeader {
    background-color: var(--highlightActiveBoxHeader);
}

.call-statistics > #call-stats {
    width: 100%;
    height: 100%;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
}

#call-stats-header {
    width: 100%;
    font-size: 12px;
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    font-weight: 600;
}

#call-stats-header:after, #call-queue-stats:after, #call-queue-stats > div:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0px;
    left: 0;
    background-color: var(--seperatorColor);
    filter: brightness(0.90);
}

#call-queue-stats:first-child {
    margin-top: 5px;
}

#call-queue-stats {
    width: 100%;
    font-size: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: normal;
    padding: 11px 0;
    height: auto;
    color: var(--textColor);
}
 
#call-queue-stats > span {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#call-queue-stats > div {
    width: 100%;
    padding: 0 10px;
}

#call-queue-stats > div {
    width: 100%;
    padding: 6px 15px;
    display: flex;
    position: relative;
}

#call-queue-stats > div:after {
    width: calc(100% - 15px - 15px);
    transform: translateX(-50%);
    left: 50%;
}

#call-queue-stats > div:first-child {
    padding-top: 0;
}

#call-queue-stats > div:last-child {
    padding-bottom: 0;
}

#call-queue-stats > div:last-child:after {
    content: none;
}

#call-queue-stats > div > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#call-queue-stats > div > i {
    margin-left: auto;
    font-size: 13px;
    font-style: normal;
    padding-left: 5px;
}

.call-chat {
    width: 100%;
    height: 100%;
    border: 1px solid var(--borderColor);
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    background-color: var(--highlightBoxBackgroundColor);
}

#call-chat-header {
    width: 100%;
    display: flex;
    align-items: center;
    height: 50px;
    background-color: var(--highlightBoxHeaderBackgroundColor);
    filter: brightness(0.95);
    padding: 0 16px;
    overflow: hidden;
}

#call-chat-header > #call-chat-header-text {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    overflow: hidden;
}

#call-chat-header #cch-desc {
    font-size: 12px;
    color: var(--textColor);
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
}

#call-chat {
    overflow-y: hidden;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin-bottom: 10px;
    padding-top: 10px;
}

#call-chat > #chat-box {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2px;
    width: 100%;
    height: 100%;
}

#call-chat > #chat-box > #chats {
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    height: 97%;
    max-height: 97%;
    margin-bottom: 3%;
    display: flex;
    flex-direction: column-reverse;
    align-items: start;
    gap: 4px;
}

#call-chat > #chat-box > #chats > #chat-message {
    display: flex;
    flex-direction: column;
    width: fit-content;
    width: 100%;
    align-items: start;
    gap: 1px;
    padding: 5px 6%;

}

#call-chat > #chat-box > #chats > #chat-message > #data {
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    font-size: 12px;
    color: var(--textColor);
}

#call-chat > #chat-box > #chats > #chat-message > #content {
    font-size: 13px;
    padding: 5px 10px;
    border: 1px solid var(--borderColor);
    box-shadow: var(--boxShadow);
    white-space: pre-line;
    font-weight: normal;
    font-size: 13px;
    border-radius: var(--borderRadius);
}

#call-chat > #chat-box > #chats > #chat-message[data-message="sender"] {
    align-items: end;
}

#call-chat > #chat-box > #chats > #chat-message[data-message="receiver"] {
    align-items: start;
}

#call-chat > #chat-box > #chats > #chat-message[data-message="sender"] > #content {
    color: var(--chatMessageTextColor);
    background-color: var(--chatMessageBackgroundColor);
}

#call-chat > #chat-box > #chats > #chat-message[data-message="receiver"] > #content {
    color: var(--chatMessageTextColor);
    background-color: var(--chatMessageBackgroundColor);
}

#call-chat > #chat-box > #chat-controller {
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    display: flex;
    gap: 5px;
    align-items: center;
    padding-left: 10px;
    background-color: var(--boxBackgroundColor);
    width: calc(100% - 12%);
    margin-left: auto;
    margin-right: auto;
}

#call-chat > #chat-box > #chat-controller > input {
    width: 100%;
    outline: none;
    border: none;
    color: var(--textColor);
    background-color: transparent;
    padding: 10px 0;
    padding-right: 10px;
    text-overflow: ellipsis;
    font-size: 13px;
}

#call-chat > #chat-box > #chat-controller:has(input:disabled) {
    opacity: 0.25;
}

#call-chat > #chat-box > #chat-controller > #chatMessageSend, #chatMessageSending {
    width: auto;
    outline: none;
    border: none;
    font-size: 13px;
    color: var(--textColor);
    cursor: pointer;
    background-color: var(--boxBackgroundColor);
    height: 100%;
    width: 45px;
    filter: brightness(0.95);
    border-top-right-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
    display: flex;
    justify-content: center;
    align-items: center;
}

#call-chat > #chat-box > #chat-controller > #chatMessageSending > #chatMessageSendingLoading {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: var(--textColor);
    animation: spinner 1.2s linear infinite;
    opacity: 1.0;
    cursor: default;
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#call-chat > #chat-box > #chat-controller > #chatMessageSend:hover {
    color: var(--hoverColor);
}

#call-chat > #chat-box > #chat-controller > #chatMessageSend:disabled {
    opacity: 0;
    cursor: default;
}

#call-chat > #chat-box > #message-start, #message-loading {
    font-size: 13px;
    cursor: default;
    align-self: center;
    text-align: center;
    color: var(--textColor);
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

#call-chat > #chat-box > #message-start:hover {
    cursor: pointer !important;
    text-decoration: underline;
}

#call-chat > #mail-box {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 16px;
    width: 100%;
    height: 100%;
    padding: 0 6%;
    margin-top: 4px;
}

#call-chat > #mail-box > #mail-box-input {
    width: 100%;
    font-size: 13px;
    position: relative;

}

#mail-box-input > input {
    padding: 6px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
    border: 2px solid var(--borderColor);
    border-radius: var(--borderRadius);
    background-color: var(--boxBackgroundColor);
    color: var(--textColor);
}

#mail-box-input > select {
    width: 100%;
    padding: 6px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
    border: 2px solid var(--borderColor);
    border-radius: var(--borderRadius);
    background-color: var(--boxBackgroundColor);
    color: var(--textColor);
}

#mail-box-input > select > option {
    font-size: 12px;
}

#mail-box-input > textarea {
    padding: 6px 5px;
    text-overflow: ellipsis;
    outline: none;
    border: 2px solid var(--borderColor);
    border-radius: var(--borderRadius);
    background-color: var(--boxBackgroundColor);
    color: var(--textColor);
    height: 100%;
}

#call-chat > #mail-box > #mail-box-input:has(textarea) {
    height: 100%;
}

#call-chat > #mail-box > #mail-box-input > input, textarea {
    width: 100%;
    resize: none !important;
}

#call-chat > #mail-box > button {
    width: 100%;
    font-size: 13px;
    padding: 6px 0;
    background-color: var(--boxBackgroundColor);
    border: 2px solid var(--borderColor);
    border-radius: var(--borderRadius);
    filter: brightness(0.95);
    color: var(--textColor);
    margin-top: auto;
    margin-bottom: 10px;
}

#call-chat > #mail-box > button:disabled {
    filter: brightness(0.85);
    background-color: var(--boxBackgroundColor) !important;
    text-decoration: none !important;
    pointer-events: none;
}

#call-chat > #mail-box > button:hover {
    background-color: var(--borderColor);
    text-decoration: underline;
}

.call-overview {
    display: none;
    margin-left: 25px;
    width: 100%;
    padding-bottom: 15px;
    height: 50%;
    bottom: 0;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 1.5%;
}

.call-overview-information {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: start;
    align-items: start;
}

#call-overview-search {
    position: relative;
    width: 100%;
    min-height: 50px;
    height: 50px;
    display: flex;
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    margin-bottom: 8px;
}

#call-overview-search > input {
    border-radius: var(--borderRadius);
    width: 100%;
    padding-right: 7px;
    height: 100%;
    font-size: 13px;
    outline: none;
    border: none;
    background-color: var(--boxBackgroundColor);
    color: var(--textColor);
    text-overflow: ellipsis;
}

#call-overview-search > input::placeholder {
    color: var(--textColor);
    user-select: none;
    opacity: 50%;
}

#call-overview-search > #search-icon {
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 2;
    font-size: 18px;
    color: var(--textColor);
    font-weight: bold;
    max-width: 50px;
    background-color: var(--boxBackgroundColor);
}

#call-overview-search > #filter-icon {
    z-index: 2;
    align-self: center;
    font-size: 18px;
    color: var(--textColor);
    font-weight: bold;
    margin-left: auto;
    background-color: var(--boxBackgroundColor);
    filter: brightness(0.95);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
    padding: 0 16px;
}

#call-overview-search > #filter-icon:hover {
    filter: brightness(0.90);
    cursor: pointer;
}

#call-overview-search > #clearSearch {
    z-index: 2;
    align-self: center;
    margin-left: auto;
    font-size: 13px;
    font-weight: normal;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
    padding: 0 16px;
    max-width: 50px;
    user-select: none;
    box-shadow: var(--boxShadow);
}

#call-overview-search > #clearSearch:hover {
    text-decoration: underline;
    cursor: pointer;
}

#call-overview-search > #filter-menu {
    position: absolute;
    right: 0px;
    top: 50px;
    background-color: var(--boxBackgroundColor);
    z-index: 3;
    border: 1px solid var(--borderColor);
    padding: 5px 10px 7px;
    border-radius: var(--borderRadius);
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--textColor);
}

#filter-menu > #filter-menu-head {
    font-size: 13px;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 20px;
    user-select: none;
    margin-bottom: 6px;
}

#filter-menu > #filter-menu-head > i {
    margin-left: auto;
}

#filter-menu > #filter-menu-head > i:hover {
    color: var(--hoverColor);
    cursor: pointer;
}

#filter-menu > label {
    font-size: 12px;
    display: flex;
    align-items: center;
    font-weight: normal;
    user-select: none;
    align-items: center;
    gap: 3px;
}

#filter-menu > label:hover {
    cursor: pointer;
    text-decoration: underline;
}

#filter-menu > label > input {
    appearance: none;
}

#filter-menu > label > #check {
    width: 20px;
    height: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}

#employee-info-menu {
    position: absolute;
    right: 10px;
    top: 45px;
    background-color: var(--boxBackgroundColor) !important;
    z-index: 5 !important;
    border: 1px solid var(--borderColor) !important;
    padding: 7px 10px 7px !important;
    border-radius: var(--borderRadius) !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--textColor) !important;
}

#employee-info-menu > .menu-head {
    font-size: 13px;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 20px;
    user-select: none;
    margin-bottom: 6px;
    color: var(--textColor) !important;
    opacity: 1;
    margin-bottom: -10px;
}

#employee-info-menu > .menu-head > i {
    margin-left: auto;
}

#employee-info-menu > .menu-head > i:hover {
    color: var(--hoverColor);
    cursor: pointer;
}

#employee-info-menu > div:not(.menu-head) > span, #employee-info-menu > label > span {
    font-size: 12px;
    font-weight: normal;
    font-weight: 600;
}

#employee-info-menu > div:not(.menu-head) {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#employee-info-menu > label > span > input {
    display: none !important;
}

#employee-info-menu label {
    font-size: 12px;
    display: flex;
    font-weight: normal;
    user-select: none;
    align-items: center;
    gap: 3px;
}

#employee-info-menu label:hover {
    cursor: pointer;
    text-decoration: underline;
}

#employee-info-menu label > input {
    appearance: none;
}

#employee-info-menu label > #check {
    width: 20px;
    height: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}

#call-overview-info {
    position: relative;
    width: 100%;
    height: calc(100% - 16px - 50px);
    min-height: calc(100% - 16px - 50px);
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
    border: 1px solid var(--borderColor);
    box-shadow: var(--boxShadow);
    background-color: var(--highlightBoxBackgroundColor);
    margin-top: 8px;
}

#coi-head {
    width: 100%;
    padding: 0 16px;
    height: 60px;
    min-height: 60px;
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: var(--boxBackgroundColor);
    filter: brightness(0.95);
    gap: 16px;
    color: var(--textColor);
}

#coi-head > #userPhoto, #coi-head > i {
    max-height: 35px;
    border-radius: 50%;
    font-size: 25px;
    color: var(--textColor);
}

#coi-head > div:not(.employeePresenceStatus) {
    width: fit-content;
    min-width: fit-content;
    display: flex;
    font-weight: normal;
    font-size: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    overflow: hidden;
}

#coi-head > div > span:first-child {
    font-weight: 600;
}

#coi-head > div:not(.employeePresenceStatus) > span {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#coi-head > .employeePresenceStatus {
    display: flex;
    font-weight: normal;
    align-items: center;
    font-size: 11px;
    background-color: var(--presenceBadgeBackgroundColor);
    border-radius: 50px;
    padding: 5px 12px;
    margin-left: auto;
    border: 1px solid var(--seperatorColor);
    white-space: nowrap;
    min-width: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: fit-content;
    max-width: 180px;
}

#coi-head > .employeePresenceStatus > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#coi-head > .employeePresenceStatus > span > span {
    margin-left: -3px;
}

#coi-head > .employeePresenceStatus > i {
    font-size: 12px;
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: 5px;
}

#coi-foot {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    width: 100%;
    color: var(--textColor);
    overflow: auto;
    padding: 0 16px 20px 16px;
    gap: 5px;
    background-color: var(--highlightBoxBackgroundColor);
}

#coi-foot > #coi-foot-group {
    width: 100%;
    height: auto;
    position: relative;
}

#coi-foot > #coi-foot-group > input {
    display: none;
}

#coi-foot > #coi-foot-group > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

#coi-foot > #coi-foot-group > div > #group-head {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--textColor);
    font-weight: 600;
    height: auto;
    user-select: none;
    position: sticky;
    top: 0;
    padding-bottom: 12px;
    background-color: var(--highlightBoxBackgroundColor);
    z-index: 2;
    padding-top: 20px;
    cursor: pointer;
}

#coi-foot > #coi-foot-group > div > #group-head > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 5px;
}

#coi-foot > #coi-foot-group > div > #group-head:hover > i {
    color: var(--hoverColor) !important;
}

#coi-foot > #coi-foot-group > div > #group-head:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--seperatorColor);
}

#coi-foot > #coi-foot-group > div > #group-head > #group-close, #coi-foot > #coi-foot-group > div > #group-head > #group-open {
    font-size: 17px;
    color: var(--textColor);
    margin-left: auto;
}

#coi-foot > #coi-foot-group > div > #group-head > #group-close {
    display: none;
}

#coi-foot > #coi-foot-group > input:checked ~ div > #group-head > #group-open {
    display: none;
}

#coi-foot > #coi-foot-group > input:checked ~ div > #group-head > #group-close {
    display: block;
}

#coi-foot > #coi-foot-group > div > #group-content {
    display: flex;
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms ease-out;
}

#coi-foot > #coi-foot-group > input:checked ~ div > #group-content {
    max-height: 1000px;
    transition: max-height 200ms ease-in;
}

#coi-foot > #coi-foot-group > div > #group-content:before {
    content: "";
    width: 100%;
    height: 0;
    background-color: transparent;
}

#coi-foot > #coi-foot-group > div > #group-content {
    font-weight: normal;
    display: flex;
    flex-direction: column;
}

#coi-foot > #coi-foot-group > div > #group-content > span {
    font-size: 12px;
    display: flex;
    flex-direction: row;
    color: var(--textColor);
    width: 100%;
    position: relative;
    padding: 12px 0;
    overflow: hidden;
    white-space: nowrap;
}

#coi-foot > #coi-foot-group > div > #group-content > span > i {
    color: var(--textColor);
    font-size: 12px;
    font-weight: 600;
    width: fit-content;
    margin-left: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 5px;
    font-style: normal;
}

#coi-foot > #coi-foot-group > div > #group-content > span:not(:last-child):after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--seperatorColor);
}

#coi-foot > #coi-foot-group #user-info-clickable {
    text-decoration: underline;
    cursor: pointer;
}

#coi-foot > #coi-foot-group #user-info-clickable:hover {
    color: var(--hoverColor);
}

#coi-foot > #coi-foot-group:last-child > div > #group-content > span > i {
    margin-left: 0;
    font-weight: normal !important;
}

#call-overview-persons {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: 1px solid var(--borderColor);
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    background-color: var(--activeBoxBackgroundColor);
    justify-content: start;
}

#cop-table {
    width: 100%;
    height: 100%;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    border-collapse: collapse;
    user-select: none;
    outline: none;
}

#cop-table > thead {
    position: sticky;
    top: 0px;
    width: 100%;
    height: fit-content;
    background-color: var(--ganttChartEvenRowBackground);
    z-index: 1;
}

#cop-table > thead > tr > th {
    height: 100%;
    text-align: left;
    align-self: center;
    color: var(--ganttChartRowTextColor);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    padding: 10px 5px;
}

div.presenceStatus {
    display: flex;
    align-items: center;
}

div.presenceStatus > .presence-dot {
    margin-right: 5px;
    font-size: 13px;
}

#cop-table > thead > tr > th:has(span), #cop-table > tbody > tr > td:has(span:not(.presenceStatus)) {
    text-align: center;
    text-overflow: unset;
    overflow: clip;
}

#cop-table > thead:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--seperatorColor);
    position: absolute;
    bottom: 0;
}

#cop-table > tbody {
    height: 100%;
    width: 100%;
}

#cop-table > tbody > tr {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid var(--seperatorColor);
    color: var(--ganttChartRowTextColor);
}

#cop-table > tbody > tr:hover {
    background-color: var(--ganttChartSelectedRowColor) !important;
    color: var(--ganttChartSelectedRowTextColor) !important;
}

#cop-table > tbody > tr:nth-child(even) {
    background-color: var(--ganttChartEvenRowBackground);
}

#cop-table > tbody > tr:nth-child(odd) {
    background-color: var(--ganttChartOddRowBackground);
}

#cop-table > tbody > tr.cop-selected:not(.no-selectable) {
    background-color: var(--ganttChartSelectedRowColor) !important;
    color: var(--ganttChartSelectedRowTextColor) !important;
}

#cop-table > tbody > tr > td {
    height: 100%;
    border-right: 1px solid var(--seperatorColor);
    text-align: left;
    align-self: center;
    color: var(--ganttChartRowTextColor);
    font-weight: normal;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 5px;
    user-select: none;
    padding: 5px 5px;
}

#cop-table > tbody > tr > td:last-child {
    border-right: 0;
}

.cop-selected-dot {
    font-size: 6px;
    display: flex;
    align-items: center;
}

.cop-selected-dot:before {
    vertical-align: 0;
}

.presence-dot {
    font-size: 6px;
    align-items: center;
    /*position: relative;
    top: -3px;*/
}

.column-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.presenceAvailable {
    font-weight: normal;
    color: var(--presenceStatusAvailable);
}

.presenceBusy {
    font-weight: normal;
    color: var(--presenceStatusBusy);
}

.presenceAway {
    font-weight: normal;
    color: var(--presenceStatusAway);
}

.presenceOffline {
    font-weight: normal;
    color: var(--presenceStatusOffline);
}

.presenceOutOfOffice {
    font-weight: normal;
    color: var(--presenceStatusOutOfOffice);
}

#cop-table > tbody > tr > td > span > i {
    font-size: 7px;
}

#cop-table > tbody > tr > td > span > i:before {
    vertical-align: 0;
}

#layoutBox[data-box='call'] {
    width: 50%;
}

#layoutBox[data-size='small'] {
    height: 50%;
}

#layoutBox[data-size='large'] {
    height: 100%;
}

#layoutBox[data-box='persons'][data-size='small'] {
    width: 50%;
    height: 50%;
}

#layoutBox[data-box='persons'][data-size='large'] {
    width: 75%;
    height: 50%;
}

#layoutBox[data-pos="1"] {
    display: flex !important;
    top: 0;
    left: 0;
}

#layoutBox[data-pos="2"] {
    display: flex !important;
    top: 0;
    left: 25%;
}

#layoutBox[data-pos="3"] {
    display: flex !important;
    top: 0;
    left: 50%;
}

#layoutBox[data-pos="4"] {
    display: flex !important;
    top: 0;
    left: 75%;
}

#layoutBox[data-pos="5"] {
    display: flex !important;
    bottom: 0;
    left: 0;
}

#layoutBox[data-pos="6"] {
    display: flex !important;
    bottom: 0;
    left: 25%;
}

#layoutBox[data-pos="7"] {
    display: flex !important;
    bottom: 0;
    left: 50%;
}

#layoutBox[data-pos="8"] {
    display: flex !important;
    bottom: 0;
    left: 75%;
}

#layoutBox[data-pos="9"] {
    display: none;
    align-items: start;
    top: 0;
    flex-direction: row;
    padding-right: 8px;
}

#layoutBox[data-pos="10"] {
    display: none;
    align-items: end;
    top: 0;
    flex-direction: row;
    padding-left: 8px;
}

#layoutBox[data-pos="11"] {
    display: none;
    align-items: start;
    bottom: 0;
    flex-direction: row;
    padding-right: 8px;
}

#layoutBox[data-pos="12"] {
    display: none;
    align-items: end;
    bottom: 0;
    flex-direction: row;
    padding-left: 8px;
}

#layoutBox > #slideButton:focus {
    outline: none;
}

#layoutBox[data-pos="9"] > #slideButton, #layoutBox[data-pos="11"] > #slideButton {
    right: 0;
    margin-right: -19px;
    border-left: none !important;
    border-top-right-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
    box-shadow: rgba(0, 0, 0, 0.20) 4px 2px 5px -3px;
}

#layoutBox[data-pos="10"] > #slideButton, #layoutBox[data-pos="12"] > #slideButton {
    left: 0;
    margin-left: -19px;
    border-right: none !important;
    border-top-left-radius: var(--borderRadius);
    border-bottom-left-radius: var(--borderRadius);
    box-shadow: rgba(0, 0, 0, 0.20) -4px 2px 5px -3px;
}

.layoutContainer {
    width: 100%;
    height: 100%;
    padding: 30px 30px;
    position: relative;
    background: var(--background);
    display: grid;
}


.layout {
    width: 100%;
    height: 100%;
    position: relative;
    background: var(--background);
}

#layoutBox {
    width: 25%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    position: absolute;
    gap: 0;
}

#layoutBox[data-slide="true"] {
    z-index: 5;
}

#layoutBox > #slideButton {
    width: 28px;
    height: fit-content;
    padding: 2% 0;
    position: absolute;
    top: 10%;
    writing-mode: vertical-lr;
    border: 1px solid var(--borderColor);
    background-color: var(--boxBackgroundColor);
    color: var(--textColor);
    font-size: 13px;
}

#layoutBox:has(.call-overview-information)[data-size='large'] > #slideButton {
    top: 15%;
}

#layoutBox:has(.call-overview-information)[data-size='small'] > #slideButton {
    top: 25%;
}

#layoutBox > #slideButton:hover {
    border: 2px solid var(--navbarBackgroundColor);
}

#layoutBox:has(#slideButton:hover) > div:not(.call-overview-information) {
    border: 1px solid var(--navbarBackgroundColor);
}

#layoutBox:has(#slideButton:hover) > div:is(.call-overview-information) > div {
    border: 1px solid var(--navbarBackgroundColor);
}

.audio-settings-dropdown {
    max-width: 207px;
}

#settings-dropdown, #language-settings-dropdown {
    position: absolute;
    background-color: var(--boxBackgroundColor);
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius);
    box-shadow: rgba(0, 0, 0, 0.35) var(--boxShadow);
    display: flex;
    flex-direction: column;
    z-index: 10;
    padding: 15px 15px 20px;
    width: fit-content;
    gap: 15px;
    top: 50px;
    color: var(--textColor) !important;
}

#settings-dropdown > div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
}

#settings-dropdown > div:first-child > span:last-child {
    margin-left: auto;
}

#settings-dropdown > div:first-child > span:last-child:hover {
    color: var(--hoverColor);
    cursor: pointer;
}

#settings-dropdown > div {
    display: flex;
    flex-direction: column;
    min-width: 175px;
    max-width: 175px;
    width: 175px;
    gap: 1px;
}

#settings-dropdown > div > span {
    color: var(--textColor);
    height: fit-content;
    width: fit-content;
    padding: 0;
    font-size: 13px;
    user-select: none;
    white-space: nowrap;
}

#settings-dropdown > div > button {
    color: var(--textColor);
    height: fit-content;
    width: 100%;
    padding: 0;
    margin-top: 5px;
    user-select: none;
    text-align: center;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: start;
}

#settings-dropdown > div > button > div {
    margin-top: 2px;
    width: 34px;
    height: 20px;
    background-color: var(--backgroundColorOne);
    border: 1px solid var(--borderColor);
    box-shadow: var(--boxShadow);
    border-radius: 50px;
    display: flex;
    align-items: center;
    position: relative;
}

#settings-dropdown > div > button > div > span {
    width: 35%;
    height: 60%;
    background-color: var(--hoverColor);
    border-radius: 50px;
    display: flex;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    transition: left ease-in-out 150ms;
}

#settings-dropdown > div > button > span {
    color: var(--textColor);
    font-size: 13px;
}

#settings-dropdown > div > button:hover > span {
    color: var(--hoverColor);
    cursor: pointer;
    text-decoration: underline;
}

#settings-dropdown > div > select {
    text-overflow: ellipsis;
    outline: none;
    font-size: 13px;
    padding-right: 10px;
    background-color: var(--boxBackgroundColor);
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius);
    user-select: none;
    color: var(--textColor);
}

#settings-dropdown > div > select > option {
    color: var(--textColor);
    font-size: 12px;
    background-color: var(--boxBackgroundColor);
}

.hid-devices {
    flex-wrap: wrap;
    overflow: hidden;
    gap: 2px !important;
}

.hid-devices > .hid-devices-title {
    font-weight: 600;
}

.hid-devices > .no-hid-devices {
    margin-left: auto;
    margin-right: auto;
}

.hid-devices > div {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    cursor: pointer;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    gap: 5px;
    align-items: center;
}

.hid-devices > div > span {
    text-overflow: ellipsis;
    overflow: hidden;
}

.hid-devices > div > i {
    font-size: 15px !important;
}

.hid-devices > div > span, .hid-devices > div > i {
    color: var(--textColor) !important;
}

.hid-devices > div:hover > span, .hid-devices > div:hover > i {
    color: var(--hoverColor) !important;
    text-decoration: underline;
}

.hid-devices > span:not(:first-child):hover > i {
    color: var(--hoverColor) !important;
}

#layoutBoxHeader {
    width: 100%;
    height: 40px;
    background-color: var(--activeBoxHeaderBackgroundColor);
    color: var(--activeBoxHeaderTextColor);
    font-size: 12px;
    padding: 0px 16px;
    display: flex;
    justify-content: start;
    align-items: center;
    font-weight: normal;
    box-shadow: var(--boxHeaderShadow);
    min-height: 40px;
    max-height: 40px;
    border-bottom: 1px solid var(--boxHeaderBorder);
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
    position: relative;
}

#layoutBoxHeader > i, #layoutBoxHeader > select {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    user-select: none;
    background-color: transparent;
    color: var(--activeBoxHeaderTextColor);
    font-size: 12px;
    border: none;
    outline: none;
    font-weight: normal;
}

#layoutBoxHeader > select option {
    color: var(--textColor);
    background-color: var(--boxBackgroundColor);
    font-size: 12px;
}

.inactiveLayoutBox > #layoutBoxHeader > i {
    background-color: var(--inactiveBoxHeaderBackground) !important;
    opacity: var(--inactiveBoxHeaderOpacity) !important;
}

#layoutBoxHeader > i {
    font-size: 16px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    right: 0;
    position: absolute;
    background-color: var(--activeBoxHeaderBackgroundColor);
}

#layoutBoxHeader > i:hover {
    filter: brightness(0.85) !important;
    cursor: pointer;
}

#call-overview-info > #noneSelected, .call-chat > #nochat, #call-overview-persons > #nopersons {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    font-weight: normal;
    font-style: italic;
    font-size: 14px;
    user-select: none;
    text-align: center;
    padding: 0 5px;
    color: var(--textColor);
}

#callStatusDot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    margin-right: -3px;
    background-color: transparent;
}

#callStatusDot:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 100%;
    opacity: 40%;
    border-radius: 50%;
    z-index: 1;
}

#callStatusDot:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 45%;
    height: 45%;
    border-radius: 50%;
    z-index: 1;
}

.callStatusConnected:before, .callStatusConnected:after {
    background-color: var(--callStatusConnectedColor);
}

.callStatusHold:before, .callStatusHold:after {
    background-color: var(--callStatusHoldColor);
}

#cc-info-foot #callStatusDot {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0.9);
}





/* design v1 */
/*
.inactiveLayoutBox {
    opacity: 65%;
}
*/



/* design v2 */
.inactiveLayoutBox {
    position: relative;
    background-color: transparent !important;
}

.inactiveLayoutBox:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
    background-color: var(--inactiveBoxBackgroundColor);
    opacity: var(--inactiveBoxHeaderOpacity);
}

.inactiveLayoutBox > #layoutBoxHeader {
    background-color: var(--inactiveBoxHeaderBackground);
    opacity: var(--inactiveBoxHeaderOpacity);
}

.inactiveLayoutBox > #layoutBoxHeader > i {
    color: var(--inactiveBoxHeaderTextColor) !important;
    filter: brightness(1);
}

.inactiveLayoutBox > i:not(#layoutBoxHeader) {
    z-index: 2;
    opacity: 65%;
}

#coi-head {
    background-color: var(--highlightBoxHeaderBackgroundColor);
    filter: brightness(0.99);
}

.call-action-resume {
    color: var(--textColor);
}

#clearSearch {
    color: var(--textColor) !important;
    box-shadow: none !important;
}

#callLayoutBoxHeader > span:has(#callStatusDot) {
    background-color: var(--activeCallBagdeBackgroundColor);
    opacity: 100%;
    color: var(--activeCallBagdeTextColor);
}

#filter-icon, #clearSearch {
    background-color: var(--searchInputButtonColor) !important;
    filter: brightness(1) !important;
}

#filter-icon:hover, #clearSearch:hover {
    filter: brightness(0.90) !important;
}

#search-icon {
    color: var(--searchInputIconColor) !important;
}

#call-queue > div > #attendents {
    display: flex;
    flex-direction: column;
}

#call-queue-head > div > #attendents, #call-queue > div > #attendents {
    justify-content: start !important;
    white-space: nowrap;
}

.modalContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
    z-index: 200;
}

.modalContainer > .modal {
    filter: brightness(0.95);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    width: 500px;
    height: auto;
    flex-direction: column;
    background-color: var(--boxBackgroundColor);
    border: 2px solid var(--borderColor);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    padding: 0 16px;
    z-index: 1;
}

.modalContainer > .modal:nth-child(1) {
    z-index: 2;
}

.modalContainer > .modal > .modal-head {
    position: relative; 
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textColor);
    font-size: 13px;
    font-weight: 600;
}

.modalContainer > .modal > .modal-head:has(i) {
     justify-content: start;
}

.modalContainer > .modal > .modal-head > i {
    margin-left: auto;
    font-size: 15px;
}

.modalContainer > .modal > .modal-head > i:hover {
    color: var(--hoverColor);
    cursor: pointer;
}

.modalContainer > .modal > .modal-head:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--seperatorColor);
    filter: brightness(0.90);
}

.modalContainer > .modal > .modal-content {
    position: relative; 
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align:center;
    color: var(--textColor);
    font-size: 13px;
    background-color: transparent;
    outline: none;
    border: none;
}

.modalContainer > .modal > .modal-actions {
    position: relative;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textColor);
    font-size: 13px;
    gap: 20px;
}

.modalContainer > .modal > .modal-actions > span {
    background-color: red;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 30px;
    background-color: var(--boxBackgroundColor);
    filter: brightness(0.9);
    border-radius: var(--borderRadius);
}

.modalContainer > .modal > .modal-actions > span:hover {
    filter: brightness(0.75);
    cursor: pointer;
    color: var(--hoverColor);
}

.modalContainer > .modal > .modal-actions:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--seperatorColor);
    filter: brightness(0.90);
}

.toastNotificationContainer {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: auto;
    z-index: 100;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
    padding: 25px 0;
}

.toastNotificationContainer > .toastNotification {
    display: flex;
    width: 500px;
    padding: 16px 16px;
    box-shadow: rgba(0, 0, 0, 0.25) 2px 3px 5px 1px;
    background-color: var(--boxBackgroundColor);
    filter: brightness(0.95);
    border-radius: var(--borderRadius);
    border: 1px solid var(--borderColor);
    color: var(--textColor);
    align-items: center;
    gap: 10px;
}

.toastNotificationContainer > .toastNotification > i {
    font-size: 17px;
    margin-bottom: auto;
}

.toastNotificationContainer > .toastNotification > span {
    font-size: 14px;
}

.toastNotificationContainer > .toastNotification > p {
    margin: 0;
    margin-bottom: auto;
    margin-left: auto !important;
    font-size: 15px;
    padding-left: 0px;
}

.toastNotificationContainer > .toastNotification > p:hover {
    color: var(--hoverColor);
    cursor: pointer;
}

.call-log-box {
    width: 100%;
    height: 100%;
    border: 1px solid var(--borderColor);
    box-shadow: var(--boxShadow);
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    background-color: var(--activeBoxBackgroundColor);
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
}

 .call-log-box > #layoutBoxHeader {
    background-color: var(--highlightActiveBoxHeader);
}

.call-logs {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 16px;
    width: 100%;
    height: auto;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 10px;
    margin-top: 5px;
}

.call-log-container {
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    height: auto;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.call-log-head {
    min-height: 40px;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    color: var(--textColor);
    font-weight: 600;
    font-size: 12px;
    position: sticky;
    top: 0;
    background-color: var(--activeBoxBackgroundColor);
}

.call-log-head:after, .call-log:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0px;
    background-color: var(--seperatorColor);
    filter: brightness(0.90);
}

.call-log-head > span, .call-log > span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: fit-content;
    margin-right: 10px;
}

.call-log-head > span:last-child, .call-log > span:last-child {
    margin-right: 0;
}

.call-log {
    position: relative;
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: start;
    font-weight: normal;
    color: var(--textColor);
    font-size: 12px;
    padding: 11px 0;
}

#call-log-caller, #call-log-receiver {
    min-width: 20%;
    max-width: 20%;
    width: 20%;
}

#call-log-queue {
    max-width: 35%;
}

#call-log-duration {
    margin-left: auto;
    min-width: 15%;
    max-width: 15%;
    width: 15%;
}

#call-log-time {
    min-width: 10%;
    max-width: 10%;
    width: 10%;
}

.call-log-clickable {
    text-decoration: underline;
}

.call-log-clickable:hover {
    color: var(--hoverColor);
    cursor: pointer;
}

/*.call-log {
    overflow-y: auto;
    overflow-x: hidden;
    width: calc(100% - 32px);
    height: auto;
    max-height: 100%;
    align-items: start;
    margin-bottom: 10px;
    margin-top: 5px;
}

.call-log > thead {
    position: sticky;
    top: 0;
}

.call-log > thead > tr {
    height: 40px;
    width: 100%;
}

.call-log > thead > tr > th {
    font-weight: 600 !important;
    color: var(--textColor);
    font-size: 12px;
}

.call-log tr:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0px;
    left: 0;
    background-color: var(--seperatorColor);
    filter: brightness(0.90);
}

.call-log > tbody > tr {
    width: 100%;
    position: relative;
}

.call-log > tbody > tr > td {
    padding: 11px 0;
    font-weight: normal;
    font-size: 12px;
}

#call-log-caller {
    max-width: 85px;
    min-width: 85px;
    width: 85px;
}

#call-log-queue, #call-log-attendant {
    width: auto;
    padding-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

#call-log-time {
    max-width: 35px;
    min-width: 35px;
    width: 35px;
}

#call-log-duration {
    max-width: 60px;
    min-width: 60px;
    width: 60px;
}*/