/* ********************************
   ** This file was autogenerated **
   **** DO NOT MANUALLY EDIT **** */


:root {
    /* Add MDST color / style overrides here. Colors are always safe to override
     * subject to legibility */
    --button-default-background-color: var(--indigo-200);
    --button-default-border-color: green;
    --button-default-text-color: black;
    --button-primary-background-color: var(--yellow-500);
    --button-primary-border-color: var(--yellow-500);
    --client-header-background-color: var(--yellow-800);
    --client-header-menu-item-active-background-color: var(--yellow-600);
    --client-header-menu-item-hover-background-color: var(--yellow-500);
    --client-header-submenu-background-color: #a87234;
    --client-header-submenu-item-active-background-color: var(--yellow-600);
    --client-header-submenu-item-hover-background-color: var(--yellow-500);
    --field-option-selected-background-color: var(--yellow-500);
    --progress-indicator-active-background-color: var(--yellow-500);
    --screen-header-primary-button-background-color: var(--yellow-500);
    --screen-header-primary-button-text-color: white;
}

.fa-app-colors {
    --fa-primary-color: hsl(165.69deg 100% 82%);
    --fa-secondary-color: hsl(52, 39%, 15%);
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 70%;
    font-size: 19px;
}
.button-button.animated {
    transition: transform 0.1s;
}

.button-button.animated.clicked {
    transform: scale(0.96);
}

.chat-bubble-root {
    display: flex;
    position: relative;
    width: 60%;
    padding: 2px;
}

.chat-bubble-root.right {
    float: right;
}

.chat-bubble-root.left {
    float: left;
}

.chat-bubble {
    width: 100%;
    max-width: 600px;
    cursor: pointer;
    z-index: 52;
}

.chat-bubble-text {
    display: flex;
    padding: 4px;
    border-radius: 6px;
}

.chat-bubble-text.reply {
    background-color: var(--gray-300);
    color: black;
}

.chat-bubble-text.message {
    background-color: var(--blue-700);
    color: white;
}

.chat-bubble-text.automated {
    background-color: #0c0;
    color: white;
}

.field-label.chat {
    width: 100%;
}

.file-uploader-root {
    min-width: 300px;
}

.left-bar-container {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 2px;
}
.left-bar-container.min-ucc {
    min-width: 180px !important;
}

.left-bar-graphic {
    z-index: 52;
    position: absolute;
    top: 0;
    left: 0;
}
.left-bar-graphic.min-ucc {
    background-color: linen;
    min-width: 180px !important;
}

.percentage-bar-label {
    width: 100%;
}

.percentage-bar-chart-div {
    margin-right: 8px;
    padding-right: 8px;
    width: 100%;
    height: 40px;
}

.percentage-bar-chart-bar {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 4px;
    width: calc(100% - 8px);
    height: 40px;
}

.percentage-bar-chart-legend {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 4px;
    width: 100%;
}

.percentage-bar-chart-legend-elt {
    height: 40px;
    margin-right: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 4px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    border-color: var(--field-border-color);
}

.percentage-bar-chart-legend-color {
    font-size: var(--text-sm);
    margin-left: 8px;
    margin-right: 8px;
    display: inline-block;
}

.qrcode-container {
    margin-right: 8px;
    padding-right: 8px;
    width: 100%;
}

.qrcode-canvas {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 4px;
    width: calc(100% - 8px);
}

/* add styles for project controls here */
.sms-character-count {
    margin-left: 1rem;
}

.sms-combined {
    display: block;
    max-width: 230px;
}

.sms-input-container {
    display: flex;
    align-items: flex-start;
}

.sms-text-area {
    color: var(--field-text-color);
    font-family: system-ui;
    font-size: var(--text-base);
    background-color: var(--field-background-color);
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    border-color: var(--field-border-color);
    padding: 8px;
    box-sizing: border-box;
    height: auto;
    width: 100%;
    resize: none;
}

.sms-text-box {
    flex-grow: 1;
}

.sms-echo-box {
    display: flex;
    min-width: 230px;
    max-width: 300px;
}

.sms-echo-box-color {
    background-color: var(--blue-700);
    color: white;
}
.sms-echo-box-droid {
    background-color: #0c0;
    color: white;
}

.sms-echo-box-url {
    background-color: antiquewhite;
    color: #00e;
}

.subscriber-file-uploader-progress {
    padding: 0.5rem;
    font-style: italic;
}

.subscriber-file-uploader-field-mapping-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.subscriber-file-uploader-field-mapping-preview-cell-container {
    padding: 0.5rem;
    flex: 1 1 0%;
}

.subscriber-file-uploader-field-mapping-preview-cell {
    height: 2.5rem;
    font-family: monospace;
    background-color: var(--gray-300);
}

.TextTableCell-root.left-bar {
    z-index: 53;
    position: absolute;
    top: 0;
    left: 0;
}

.TextTableCell-root.usage-cell {
    z-index: 51;
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    pointer-events: none;
}