:root {
    --headerHeight: 3rem;
    --footerHeight: 1.2rem;
    --navBackgroundColor: rgb(58,68,82);
    --darkestBlue: rgb(2, 24, 44);
    --darkBlue: rgb(2, 24, 44);
    --mediumDarkBlue: rgb(2, 44, 87);
    --blue: rgb(3, 64, 120);
    --brightBlue: rgb(5, 92, 173);
    --brighterBlue: rgb(8, 112, 209);
    --brightestBlue: rgb(0, 131, 255);
    --lightBlue: rgb(224, 240, 255);
    --lighterBlue: rgb(237, 246, 255);
    --red: rgb(209, 0, 0);
    --brightRed: rgb(225, 0, 0);
    --pink: rgb(209, 0, 126);
    --yellow: rgb(255, 190, 11);
    --brightYellow: rgb(255, 213, 0);
    --green: rgb(71, 160, 37);
    --darkGray: rgb(34,41,51);
    --mediumDarkGray: rgb(51,60,72);
    --gray: rgb(105, 111, 119);
    --lightMediumGray: rgb(162, 167, 174);
    --lightGray: rgb(218, 222, 230);
    --lighterGray: rgb(230,233,239);
    --lightestGray: rgb(248,248,250);
    --offWhite: rgb(250,252,254);
    --badgeColor: rgb(250,62,62);
}

/*.btn {
    -- background-color: DodgerBlue;*/ /* Blue background */
    /*-- border: none;*/ /* Remove borders */
    /*-- color: white;*/ /* White text */
    /*-- padding: 12px 16px;*/ /* Some padding */
    /*-- font-size: 16px;*/ /* Set a font size */
    /*cursor: pointer;*/ /* Mouse pointer on hover */
/*}

.btn-icon {
    background: none;*/
    /* border: 1px solid;
    padding: 2px;*/
    /*border-spacing: 2px;*/
    /* border: none;*/
/*}*/

.no-border {
    border: none;
}

.tone-list-container {
    display: flex;
    padding: 0px;
    border: 0px;
}

    .tone-list-container > * {
        /*height: 400px;*/
        width: 250px;
        border: 0px;
        font-size: 1rem;
        padding: 4px 6px 3px;
    }

.tone-slider-container {
    /*display: flex;*/
    padding: 10px 0px 15px 0px;
}

    .tone-slider-container > * {
        width: 250px;
        font-size: 1rem;
        padding: 4px 6px 4px;
    }

.textArea-tone * {
    padding: 0px !important;
}

.writing-style-tone * {
    padding: 0px !important;
    /*font-size: 1rem;*/
}

.writing-style .dx-item-content {
    padding: 0px !important;
    /*font-size: 1rem;*/
}

.writing-style-tone .dx-item {
    padding: 7px 0px 0px 4px !important;
}

.writing-style-tone .dx-checkbox-text {
    padding-left: 5px !important;
}

.writing-style-tone .writing-style-tone-textbox {
    padding: 10px 0px 0px 4px !important;
}

.writing-style-tone input {
    padding: 20px 16px 14px !important;
}

.writing-style-instructions {
    font-size: 1rem;
    padding: 20px;
}

.persona {
    display: grid;
    grid-template-columns: 100px minmax(100px, 1fr) minmax(0, 170px) minmax(0, 80px);
    grid-template-rows: min-content 1fr;
    gap: 10px;
    /*border: 1px solid red;*/
    padding: 10px;
}

    .persona .persona-picture {
        grid-column: 1;
        grid-row: 1 / span 2;
        /*border: 1px solid green;*/
    }

        .persona .persona-picture img {
            object-fit: cover;
            width: 100%;
            max-height: 100%;
            /*border: 1px solid gray;*/
        }

    .persona .persona-name {
        font-weight: 600;
        grid-column: 2;
        grid-row: 1;
        /*border: 1px solid blue;*/
    }

    .persona .persona-description {
        grid-column: 2 / span 1;
        grid-row: 2 / span 1;
        word-wrap: break-word;
        overflow-wrap: break-word;
        /*border: 1px solid yellow;*/
        white-space: break-spaces !important;
    }

    .persona .persona-styles {
        grid-column: 3 / span 1;
        grid-row: 2 / span 1;
        word-wrap: break-word;
        overflow-wrap: break-word;
        /*border: 1px solid green;*/
        white-space: break-spaces !important;
    }

    .persona .persona-languages {
        grid-column: 4 / span 1;
        grid-row: 2 / span 1;
        word-wrap: break-word;
        overflow-wrap: break-word;
        /*border: 1px solid black;*/
        white-space: break-spaces !important;
    }




.dx-list-item-content {
    font-size: 1em;
    padding: 4px 6px 3px;
}

.dx-slider {
    margin-top: 15px;
}

.dx-slider-label {
    position: absolute;
    font-size: 1rem;
}

.btn-link {
    background: none !important;
    border: none;
    padding: 0 !important;
    /*optional*/
    font-family: arial, sans-serif;
    /*input has OS specific font-family*/
    color: #069;
    text-decoration: underline;
    cursor: pointer;
    text-align: left;
}

.btn-icon-inverted {
    border: inset;
}

.btn-icon-active {
    background-color: rgb(0, 0, 0);
}

.btn-icon-inactive {
    color: rgb(160, 160, 160);
}

.btn-icon-disabled {
    color: rgb(195, 195, 195);
}
    .btn-icon-disabled:hover {
        color: rgb(130, 130, 130);
    }


.flag-icon {
    color: red;
}

    .flag-icon:hover {
        color: rgb(224, 127, 127);
    }

.flag-icon-disabled {
    color: #e8e8e8;
}

    .flag-icon-disabled:hover {
        color: rgb(254, 186, 186);
    }

.eye-slash-icon {
    color: rgb(92, 92, 92);
}

    .eye-slash-icon:hover {
        color: rgb(0, 0, 0);
    }

.eye-slash-icon-disabled {
    color: rgb(195, 195, 195);
}

    .eye-slash-icon-disabled:hover {
        color: rgb(130, 130, 130);
    }



.safe-icon {
    color: green;
}

    .safe-icon:hover {
        color: rgb(136, 209, 169);
    }

.safe-icon-disabled {
    color: #e8e8e8;
}

    .safe-icon-disabled:hover {
        color: #258325;
    }


.trash-icon {
    color: rgb(128, 128, 128);
}

    .trash-icon:hover {
        color: rgb(92, 92, 92);
    }

.safe-icon-disabled {
    color: rgb(195, 195, 195);
}

    .safe-icon-disabled:hover {
        color: rgb(116, 116, 116);
    }

.reply-icon {
    color: #258325;
}

    .reply-icon:hover {
        color: #00ad00;
    }

.reply-icon-yellow {
    color: rgb(235 180 0);
}

    .reply-icon-yellow:hover {
        color: #00ad00;
    }

.reply-icon-disabled {
    color: rgb(195, 195, 195);
}

    .reply-icon-disabled:hover {
        color: rgb(130, 130, 130);
    }

.reply-responded-link {
    color: var(--dx-color-primary, #337ab7);
    text-decoration: underline;
    cursor: pointer;
}

    .reply-responded-link:hover {
        text-decoration: none;
    }

.comment-response-popup {
    display: grid;
    /*grid-template-columns: min-content auto;*/
    grid-template-rows: auto auto;
    /*grid-template-areas:
        "a a"
        "b c";*/
    /*border: 1px solid red;*/
}

    .comment-response-popup .comment-response-popup-label {
        grid-row: 1 / 1;
        /*grid-area: a;*/
        white-space: nowrap;
        font-weight: 600;
        padding-bottom: 4px;
        /*border: 1px solid green;*/
    }

    .comment-response-popup .comment-response-popup-comment {
        grid-row: 2 / 2;
        /*border: 1px solid black;*/
        padding-bottom: 20px;
    }

.header-profile-link  img {
    width: 30px;
    height: auto;
}


@media screen and (max-width: 1099.99px) {
    .toolbar-button .dx-button-content, .toolbar-button .dx-button-has-text {
        padding: 0px;
        min-width: 32px;
    }
}

@media screen and (min-width: 1100px) {
    .toolbar-button .dx-button-content, .toolbar-button .dx-button-has-text {
        padding: 6px 16px;
        min-width: 64px;
    }
}

@media screen and (max-width: 1099.99px) {
    .toolbar-button-text {
        display: none;
    }
}
@media screen and (min-width: 1100px) {
    .toolbar-button-text {
        display: contents;
    }
}


/*@media screen and (max-width: 1099.99px) {
    .header-logo {
        background-image: url('/images/S.png');
        height: 36px;
        width: auto;
    }
}

@media screen and (min-width: 1100px) {
    .header-logo {
        background-image: url('/images/Logo_100h.png');
        height: 36px;
        width: auto;
    }
}*/


.writing-style-instructions .dx-list-item-after-bag,
.writing-style-instructions .dx-list-item-before-bag {
    vertical-align: top !important;
    padding-top: 50px !important;
}

.automatic-actions {
    padding-left: 20px;

}

.automatic-actions-description {
    padding-top: 25px;
    padding-bottom:25px;
}

.automatic-actions-label {
    font-weight: 900;
    padding-top: 20px;
    font-size: 1rem;
    /*display: grid;
    grid-template-columns: 1fr minmax(100px, 1fr) minmax(0, 170px) minmax(0, 80px);
    grid-template-rows: min-content 1fr;
    gap: 10px;*/
    /*border: 1px solid red;*/
    /*padding: 10px;*/
}

.automatic-actions-group-title {
    color: var(--gray);
    font-size: .9rem;
    font-weight: 900;
    /*text-decoration: underline;*/
}

.automatic-actions-grid {
    display: grid;
    /*grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr);*/
    grid-template-columns: min-content min-content;
    /*grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr);*/
    /*grid-template-rows: 1fr 1fr;*/
    gap:60px;
    /* border: 1px solid red; */
    padding-left: 20px;
    padding-top: 15px;
    padding-bottom: 20px;
    overflow: hidden;
    white-space: nowrap;
}