body {
    font-size: 15px;
    color: #fff;
    background-color: var(--bs-gray-900) !important;
}

#bm-left-bottom a {
    color: var(--bs-info-bg-subtle);
}

.h-10 {
  height: 10%;
}
.h-80 {
  height: 80%;
}


#bm-left {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.05));
}
#bm-left-top {

}
#bm-left-top h3 {
    margin: 15px 0 0 5px;
}
#bm-left-center {

}
#bm-left-center video {
    width: 50vw;
    background-color: rgba(0, 0, 0, 0.5);
}
#bm-left-bottom {
    background-color: rgba(0, 0, 0, 0.5);
}
#bm-left-bottom button {
    margin: 0 5px 0px 10px;
}
#bm-left-bottom a {
    margin: 0 5px 0px 10px;
}
#bm-right {
    
}
div#bm-right .row>* {
    padding: 0;
    background-color: #fff;
}
#bm-right-top {

}
#bm-right-bottom {

}



.pagination .step-links {
    margin: 0 auto;
}




#user-list .user {
/*    cursor: pointer;*/
/*    cursor: text;*/
}

button#btn-send {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

div.text span.small {
    font-style: italic;
    opacity: 0.4;
}

div#controls-list {
    margin-top: 30px;
}

.page-header {
    margin-bottom: 30px;
}

.form-signin input#username {
    margin-bottom: 15px;
}

.manage-list {
    margin-bottom: 15px;
}

.card-header {
    height: 6vh;
}
.card-footer {
    height: 10vh;
    padding-top: 2.8vh;
}

.messages {
    background-image: linear-gradient(180deg, rgb(0 0 0 / 10%),rgb(0 0 0 / 0%));
    position: relative;
    padding: 10px 10px 0 10px;
    margin: 0 0 0 0;
/*    height: 350px;*/
    height: 59vh;
    overflow-x: hidden;
    overflow-y: scroll;
}

#messages video {
    width: 19vw;
}

.messages .message {
    clear: both;
    overflow: hidden;
    margin-bottom: 20px;
}

.messages .message.left .avatar {
/*    background-color: var(--bs-purple);*/
    float: left;
}

.messages .message.left .text_wrapper {
/*    background-color: #ffe6cb;*/
    background-color: #f6f7f9;
    margin-left: 20px;
}

.messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
    right: 100%;
    border-right-color: #f6f7f9;
}

.messages .message.left .text {
    color: #656e83;
}

.messages .message.right .avatar {
/*    background-color: var(--bs-teal);*/
    float: right;
}

.messages .message.right .text_wrapper {
    background-color: #058fff;
    margin-right: 20px;
    float: right;
}

.messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
    left: 100%;
    border-left-color: #058fff;
}

.messages .message.right .text {
    color: #ffffff;
}

.messages .message .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    color: white;
/*    padding-top: 18px;*/
}

.messages .message .text_wrapper {
    display: inline-block;
    padding: 20px;
    border-radius: 17px;
    width: 70%;
    min-width: 100px;
    position: relative;
}

.messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
    top: 18px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.messages .message .text_wrapper::after {
    border-width: 13px;
    margin-top: 0;
}

.messages .message .text_wrapper::before {
    border-width: 15px;
    margin-top: -2px;
}

.messages .message .text_wrapper .text {
    font-size: 20px;
    font-weight: 300;
}

.message b {
    font-weight: 700;
}

.plaintiff-bg {
    background-color: var(--bs-teal);
}

.defendant-bg {
    background-color: var(--bs-purple);
}

#user-list span {
    font-style: italic;
    opacity: .5;
    /* display: block; */
    /* margin-left: 20px; */
    float: right;
}

#mediation-progress {
    width: 200px;
}

#graphModal, #endModal, #suggestionModal, #bracketModal, #waitingModal, #openingModal {
    color: var(--bs-body-color);
}

#endModal .modal-footer {
    justify-content: space-between;
}

#proposal-box {
    justify-content: space-evenly;
    display: flex;
    margin-top: 10px;
}

#proposal-box span#timer {
    font-weight: bold;
}

#bracketContainer .col {
    margin-bottom: 30px;
    border-radius: 10px;
}

.range-p input, .range-d input {
    border-radius: 14px;
    padding: 0 7px;
}

.range-p input {
    background: linear-gradient(0.25turn, var(--bs-teal), var(--bs-white), var(--bs-white));
}

.range-d input {
    background: linear-gradient(0.25turn, var(--bs-white), var(--bs-white), var(--bs-purple));
}

.bg-darkorange {
    background-color: rgb(255,140,0) !important;
}

#suggestionContainer .progress, #suggestionContainer .progress-stacked {
    height: 1.5rem;
    font-size: 14px;
}

#suggestionContainer .progress-stacked {
    background: linear-gradient(0.25turn, #198754, #ffc107, #fd7e14);
}

#suggestionContainer .progress {
    background: transparent;
}

/*#graphModal, .modal-backdrop {
    width: 66.66666667%;
}*/

span.asteriskField {
    color: red;
}

.message-tooltip {
    --bs-tooltip-bg: var(--bs-green);
    --bs-tooltip-color: var(--bs-white);
}
.message-tooltip .tooltip-arrow {
    display: none;
}

.monospace {
    font-family: monospace;
}

.form-text {
    color: var(--bs-gray-500);
}