/*************/
/* Call Flow */
/*************/

.call-flow-bar {
    background-color: #FFFFFF;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: 0px 0px 16px rgb(140, 140, 140);
    z-index: 1;
}

.call-type-container {
    height: 100%;
    padding: 0.5em;
    font-size: 1rem;
}

.call-flow-index {
    font-size: 1.5rem;
    color: var(--color-space);
}

@media (max-width: 600px) {
    .call-flow-wrapper {
        flex-wrap: wrap !important;
    }

    .flow-caller-id {
        margin-top: 6px;
    }

    .call-flow-bar {
        width: 100%;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .call-type-header {
        width: 100% !important;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .flow-link-bar-bottom {
        height: 100% !important;
        top: 0% !important;
    }
}

.call-type-header {
    width: 200px;
    color: #FFFFFF;
    padding: 0.5em;
    background-color: var(--color-space);
}

.call-type-header-sub-type {
    letter-spacing: 1px;
    font-size: 0.65rem !important;
}

.call-subtype-header {
    letter-spacing: 1px;
    font-size: 0.85rem !important;
    font-weight: bold;
}

.styled-double-header-container {
    overflow: hidden !important;
}

.styled-double-header-mid-container {
    align-items: stretch !important;
}

.call-flow-trough {
    border-top: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    padding: 8px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.styled-double-header-sub-title-line {
    width: 100%;
    height: 1px;
    background-color: #888888
}

.flow-link-bar-top {
    border-left-width: 4px !important;
    margin-left: 72px;
    border-color: rgb(128, 128, 128);
    z-index: 0;
    height: 50%;
    bottom: 50%;
    position: absolute;
}

.flow-link-bar-bottom {
    border-left-width: 4px !important;
    margin-left: 72px;
    border-color: rgb(128, 128, 128);
    z-index: 0;
    height: 50%;
    top: 50%;
    position: absolute;
}

.flow-caller-id {
    border: 1px solid white;
    border-radius: 8px;
    font-size: 1rem;
    color: #000000;
    min-height: 70px;
    box-shadow: 0px 0px 16px rgb(140, 140, 140);
    z-index: 1;
}

.icon-circle {
    border-radius: 50%;
    padding: 5px;
}

/***************/
/* Type Colors */
/***************/

/************************ OPERATOR ************************/

.color-operator {
    color: var(--operator-color);
}

.background-color-operator {
    background-color: var(--operator-color);
}

.icon-circle.color-operator {
    color: var(--operator-color-dark);
    background-color: var(--operator-color);
}

.border-color-operator {
    border: 1px solid var(--operator-color);
    background-color: var(--operator-color-light);
    border-radius: 5px;
}

.dm-operator {
    border-bottom: 5px solid var(--operator-color);
}

.dm-operator-background::after {
    background: var(--operator-color);
}

/************************ USER EXTENSION ************************/

.color-user-extension {
    color: var(--user-extension-color);
}

.background-color-user-extension {
    background-color: var(--user-extension-color);
}

.icon-circle.color-user-extension {
    color: var(--user-extension-color-dark);
    background-color: var(--user-extension-color);
}

.border-color-user-extension {
    border: 1px solid var(--user-extension-color);
    background-color: var(--user-extension-color-light);
    border-radius: 5px;
}

.dm-user-extension {
    color: #ffffff;
    border-bottom: 5px solid var(--user-extension-color);
}

.dm-user-extension-background::after {
    background: var(--user-extension-color);
}

/************************ HUNT GROUP ************************/

.color-hunt-group {
    color: var(--hunt-group-color);
}

.background-color-hunt-group {
    background-color: var(--hunt-group-color);
}

.icon-circle.color-hunt-group {
    color: var(--hunt-group-color-dark);
    background-color: var(--hunt-group-color);
}

.border-color-hunt-group {
    border: 1px solid var(--hunt-group-color);
    background-color: var(--hunt-group-color-light);
    border-radius: 5px;
}

.dm-hunt-group {
    border-bottom: 5px solid var(--hunt-group-color);
}

.dm-hunt-group-background::after {
    background: var(--hunt-group-color);
}

/************************ CONFERENCE ************************/

.color-conference {
    color: var(--conference-color);
}

.background-color-conference {
    background-color: var(--conference-color);
}

.icon-circle.color-conference {
    color: var(--conference-color-dark);
    background-color: var(--conference-color);
}

.border-color-conference {
    border: 1px solid var(--conference-color);
    background-color: var(--conference-color-light);
    border-radius: 5px;
}

.dm-conference-room {
    color: #ffffff;
    border-bottom: 5px solid var(--conference-color);
}

.dm-conference-room-background::after {
    background: var(--conference-color);
}

/************************ OUTSIDE ACCESS ************************/

.color-outside-access {
    color: var(--outside-access-color);
}

.background-color-outside-access {
    background-color: var(--outside-access-color);
}

.icon-circle.color-outside-access {
    color: var(--outside-access-color-dark);
    background-color: var(--outside-access-color);
}

.border-color-outside-access {
    border: 1px solid var(--outside-access-color);
    background-color: var(--outside-access-color-light);
    border-radius: 5px;
}

.dm-outside-access {
    border-bottom: 5px solid var(--outside-access-color);
}

.dm-outside-access-background::after {
    background: var(--outside-access-color);
}

/************************ PARK/UNPARK ************************/

.color-park,
.color-unpark {
    color: var(--park-color);
}

.background-color-park,
.background-color-unpark {
    background-color: var(--park-color);
}

.icon-circle.color-park,
.icon-circle.color-unpark {
    color: var(--park-color-dark);
    background-color: var(--park-color);
}

.border-color-park {
    border: 1px solid var(--park-color);
    background-color: var(--park-color-light);
    border-radius: 5px;
}

.dm-park-location {
    border-bottom: 5px solid var(--park-color);
}

.dm-park-location-background::after {
    background: var(--park-color);
}

/************************ AUTO ATTENDANT ************************/

.color-auto-attendant {
    color: var(--auto-attendant-color);
}

.background-color-auto-attendant {
    background-color: var(--auto-attendant-color);
}

.icon-circle.color-auto-attendant {
    color: var(--auto-attendant-color-dark);
    background-color: var(--auto-attendant-color);
}

.border-color-auto-attendant {
    border: 1px solid var(--auto-attendant-color);
    background-color: var(--auto-attendant-color-light);
    border-radius: 5px;
}

.dm-auto-attendant {
    border-bottom: 5px solid var(--auto-attendant-color);
}

.dm-auto-attendant-background::after {
    background: var(--auto-attendant-color);
}

/************************ EMERGENCY ************************/

.color-emergency {
    color: var(--emergency-color);
}

.background-color-emergency {
    background-color: var(--emergency-color);
}

.icon-circle.color-emergency {
    color: var(--emergency-color-dark);
    background-color: var(--emergency-color);
}

.border-color-emergency {
    border: 1px solid var(--emergency-color);
    background-color: var(--emergency-color-light);
    border-radius: 5px;
}

.dm-emergency-number {
    border-bottom: 5px solid var(--emergency-color);
}

.dm-emergency-number-background::after {
    background: var(--emergency-color);
}

/************************ ACD QUEUE ************************/

.color-acd-queue {
    color: var(--acd-queue-color);
}

.background-color-acd-queue {
    background-color: var(--acd-queue-color);
}

.icon-circle.color-acd-queue {
    color: var(--acd-queue-color-dark);
    background-color: var(--acd-queue-color);
}

.border-color-acd-queue {
    border: 1px solid var(--acd-queue-color);
    background-color: var(--acd-queue-color-light);
    border-radius: 5px;
}

.dm-acd-queue {
    border-bottom: 5px solid var(--acd-queue-color);
}

.dm-acd-queue-background::after {
    background: var(--acd-queue-color);
}

/************************ GROUP VOICEMAIL ************************/

.color-group-voicemail {
    color: var(--group-voicemail-color);
}

.background-color-group-voicemail {
    background-color: var(--group-voicemail-color);
}

.icon-circle.color-group-voicemail {
    color: var(--group-voicemail-color-dark);
    background-color: var(--group-voicemail-color);
}

.border-color-group-voicemail {
    border: 1px solid var(--group-voicemail-color);
    background-color: var(--group-voicemail-color-light);
    border-radius: 5px;
}

.dm-group-voicemail {
    border-bottom: 5px solid var(--group-voicemail-color);
}

.dm-group-voicemail-background::after {
    background: var(--group-voicemail-color);
}

/************************ USER VOICEMAIL ************************/

.color-user-voicemail {
    color: var(--user-voicemail-color);
}

.background-color-user-voicemail {
    background-color: var(--user-voicemail-color);
}

.icon-circle.color-user-voicemail {
    color: var(--user-voicemail-color-dark);
    background-color: var(--user-voicemail-color);
}

.border-color-user-voicemail {
    border: 1px solid var(--user-voicemail-color);
    background-color: var(--user-voicemail-color-light);
    border-radius: 5px;
}

.dm-voicemail-boxes {
    color: #ffffff;
    border-bottom: 5px solid var(--user-voicemail-color);
}

.dm-voicemail-boxes-background::after {
    background: var(--user-voicemail-color);
}

/************************ UNKNOWN TYPE ************************/

.color-unknown {
    color: var(--unknown-color);
}

.background-color-unknown {
    background-color: var(--unknown-color);
}

.icon-circle.color-unknown {
    color: var(--unknown-color-dark);
    background-color: var(--unknown-color);
}

.border-color-unknown {
    border: 1px solid var(--unknown-color);
    background-color: var(--unknown-color-light);
    border-radius: 5px;
}

.dm-unknown {
    border-bottom: 5px solid var(--unknown-color);
}

.dm-unknown-background::after {
    background: var(--unknown-color);
}

/**************************************************************/

.icon-circle.color-blocked,
.icon-circle.color-monitor,
.icon-circle.color-denied,
.icon-circle.color-echo-test,
.icon-circle.color-unmapped,
.icon-circle.color-external,
.icon-circle.color-fax,
.icon-circle.color-hot-desk,
.icon-circle.color-test-tone,
.icon-circle.color-multiserver,
.icon-circle.color-push-to-mobile,
.icon-circle.color-directory,
.icon-circle.color-music-on-hold,
.icon-circle.color-music-on-hold,
.icon-circle.color-monitor,
.icon-circle.color-invalid-number,
.icon-circle.color-transfer {
    color: var(--unknown-color-dark);
    background-color: var(--unknown-color);
}

.background-color-blocked,
.background-color-monitor,
.background-color-denied,
.background-color-echo-test,
.background-color-unmapped,
.background-color-external,
.background-color-fax,
.background-color-hot-desk,
.background-color-test-tone,
.background-color-multiserver,
.background-color-push-to-mobile,
.background-color-directory,
.background-color-music-on-hold,
.background-color-music-on-hold,
.background-color-monitor,
.background-color-invalid-number,
.background-color-transfer {
    background-color: var(--unknown-color);
}