/** https://mycolor.space/?hex=%23B7CD00&sub=1 */
.modal {
    position: relative;
    z-index: 100000000;
}

.modal__overlay {
    z-index: 1;
}


/** @select2 update */
.select2-container {
    width: 100% !important;
    font-size: 1rem;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    padding: .3rem .7rem;
    border-color: #0074a3;
    color: #333;
}

.select2-container .fa {
    width: 2rem;
    padding: 0 0.3rem;
    text-align: center;
    color: #454a18;
}

.vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-primary {
    background-color: #0074a3;
}

.vex.vex-theme-plain .login-page .form {
    margin-top: 0;
}

.video-js {
    width: 100%;
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
}

.media-title {
    margin: 0;
    padding: 1rem;
    background: #333;
    font-weight: 300;
    font-size: 1.5rem;
    color: white;
}

.media-title .actions {
    float: right;
}

.media-title .actions button {
    border: none;
    font-size: 1.2rem;
    background: #2f4858;
    border-radius: 100%;
    color: white;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
}

.media-title .dropdown-menu {
    position: relative;
    float: right;
}

.session-title {
    margin: 0 -1rem 0 -1rem;
    padding: 1rem;
    background: #333;
    font-weight: 300;
    font-size: 1.5rem;
    color: white;
}

.session-title .back {
    display: inline-block;
    margin-right: .5rem;
    width: 2rem;
    height: 2rem;
    font-size: 1.3rem;
    line-height: 2rem;
    background-color: white;
    color: black;
    text-align: center;
    font-weight: 300;
}

.session-right-panel {
    display: none;
}

.session-right-panel {
    margin-left: 0;
    margin-right: 0;
}

.dashboard-calendar-state .session-calendar-dashboard,
.dashboard-statistics-state .session-statistics-dashboard,
.dashboard-configuration-state .session-configuration-dashboard {
    display: block;
}


/** 
 * Dropdown 
 */

.dropdown-toggle {
    display: block;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border: none;
    padding: 0;
    color: #fff;
    background-color: #545b62;
    border-radius: 100%;
    text-align: center;
}

.dropdown-menu [type="checkbox"] {
    display: none;
}

.dropdown-list {
    position: absolute;
    z-index: 10;
    right: 0;
    display: none;
    width: 10rem;
    padding: 0;
    font-size: 1rem;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 0 1rem rgba(0,0,0,.1);
    color: black;
}

.dropdown-list button {
    display: block;
    border: none;
    width: 100%;
    padding: .3rem 1rem;
    margin: 0;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    color: inherit;
    background-color: transparent;
    text-align: left;
}

.dropdown-menu [type="checkbox"]:checked ~ .dropdown-list {
    display: block;
}


/** 
 * Menu
 */
 
.menu {
    border-right: 1px solid #331e51;
    background-color: #381e5e;
    height: 100%;
    overflow-y: scroll;
}

.menu::-webkit-scrollbar {
    width: .25rem;
    background-color: #F5F5F5;
}

.menu::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 .5rem rgba(0,0,0,0.3);
    background-color: #b6ce33;
}

.menu::-webkit-scrollbar-thumb {
    background-color: #097f67;
}

.menu [type="radio"] {
    display: none;
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu ul ul {
    display: none;
}

.menu li {
    display: block;
    position: relative;
}

.menu label {
    display: block;
    text-decoration: none;
    cursor: pointer;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 400;
    color: white;
    padding: .85rem 1rem;
    line-height: 1.2;
}

.menu li:first-child label {
    font-weight: bold;
}


.menu ul ul label {
    font-size: 1rem;
}

.menu [type="radio"]:checked + label {
    background-color: #3F6400;
    color: #f0f0f0;
}

.menu [type="radio"]:checked + label .fa-folder:before {
    content: "\f07c";
}

.menu [type="radio"]:checked ~ ul {
    display: block;
}

.menu .folder-color {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2rem;
    height: auto;
    margin: 0;
    line-height: 1;
    border-radius: 0;
}


/** 
 * Pagination 
 */

.pagination {
    text-align: right;
}

.pagination ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    font-size: 0;
}

.pagination ul li {
    display: inline-block;
    vertical-align: top;
}

.pagination ul li button {
    transition: 0.5s ease;
    padding: 1rem;
    background: #88dd88;
    color: white;
    border: none;
    outline: none;
    cursor: pointer;
    text-align: center;
    font-size: 1.5rem;
    user-select: none;
}

.pagination ul li button[disabled] {
    background-color: #f0f0f0;
    color: #333;
    pointer-events: none;
}


/* 
 * Placeholder tracked event 
 *
 * @see https://css-tricks.com/aspect-ratio-boxes/
 */
.thumbnail {
    position: relative;
    display: block;
    margin: 0 auto 1rem auto;
    border: 1px solid #ccc;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    background-color: #333;
    overflow: hidden;
}

.thumbnail img {
    max-width: 100%;
}

.thumbnail figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .5rem;
    background-color: rgba(0,0,0,.3);
    color: white;
    font-size: 0.875rem;
    line-height: 1.2;
}

.thumbnail-icon .fa {
    color: white;
    font-size: 4rem;
    text-align: center;
    background-color: transparent;
    line-height: 2;
    width: 100%;
}

.video-js {
    background-color: transparent;
}

.search-field-wrapper {
    position: relative;
}

.search {
    margin: 1rem 0;
    width: 100%;
    padding: .3rem .7rem;
    font-size: 1.25rem;
    border-radius: .25rem;
    border: 1px solid #ccc;
    line-height: 1.75;
}

.features-placeholder {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
}

.features-placeholder::-webkit-scrollbar {
    width: .25rem;
    background-color: #F5F5F5;
}

.features-placeholder::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

.features-placeholder::-webkit-scrollbar-thumb {
    background-color: #097f67;
}


.features {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #f0f0f0;
}

.features ul {
    list-style-type: none;
    margin: 0;
    padding: 0 0 3rem 0;
}

.features ul [type="checkbox"] {
    display: none;
    vertical-align: middle;
}

.features ul [type="checkbox"] + label {
    display: inline-block;
    vertical-align: middle;
    margin-left: .5rem;
    width: 1rem;
    height: 4rem;
    border-radius: .5rem;
    background-color: #2f4858;
    cursor: pointer;
}

.features ul [type="checkbox"]:checked + label {
    background-color: #58bc4d;
}

.features li a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: .5rem;
    padding: .75rem 1rem .75rem 1.5rem;
    width: calc(100% - 3.5rem);
    font-size: 1.1rem;
    cursor: pointer;
    color: #666;
    border-radius: 1rem;
    background-color: #f7f7f7;
    text-decoration: none;
    transition: all .3s ease-out;
}

.features.collapsed li a {
    padding: 0 .5rem;
    border-radius: 0;
    margin: 0 0 0 -5px;
}

.features.collapsed ul [type="checkbox"] + label {
    height: 1.3rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.features li a.is-loading {
    opacity: .3;
    pointer-events: none;
}

.features li a small {
    display: block;
    margin: .3rem 0;
    font-weight: 400;
    font-size: .75rem;
    line-height: 1.5;
}

.features li a:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: .5rem;
}

.features li a.is-selected {
    background-color: #3f6400;
    color: white;
    text-decoration: none;
}

.features-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    margin: 0;
    padding: 0.5rem;
    background-color: black;
    text-align: center;
    white-space: nowrap;
    border-top: 1px solid #333;
}

.features-actions button {
    width: 3rem;
    height: 3rem;
    margin: 0 0.25rem 0;
    font-size: 1rem;
}

.features-actions button.safe {
    background-color: #58bc4d;
    color: white;
}


.features-actions button.danger {
    background-color: #ff4165;
    color: white;
}


/** Speakers */
.speakers {
    list-style-type: none;
    margin: 0;
    background: #f0f0f0;
    padding: 1rem 1rem .5rem 1rem;
}

.speakers li {
    display: inline-block;
    vertical-align: top;
    margin: 0 .5rem .5rem 0;
}

.speakers ul {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.speakers label {
    position: relative;
    display: block;
    cursor: pointer;
    background-color: transparent;
}

.speakers input[type="checkbox"] {
    display: none;
}

.speakers input[type="checkbox"] + label {
    opacity: .5;
    transition: opacity .3s ease-out;
}

.speakers input[type="checkbox"]:checked + label {
    opacity: 1;
}

  
/** Button */
.button {
    position: relative;
    display: block;
    width: 100%;
    border: none;
    padding: .7rem .7rem;
    margin: 0 0 1rem 0;
    background: #58bc4d;
    color: white;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    border-radius: .5rem;
    z-index: 2;
}

.button[disabled] {
    background-color: #777;
    pointer-events: none;
}

.button.danger {
    background-color: #af1a2e;
}

/** Hide the input file to avoid to show the name */
.button input[type="file"] {
    display: none;
}


/** Forms */
.form-label {
    display: block;
    margin: 0 0 .5rem 0;
}

.form-label > div {
    line-height: 1;
    font-size: 1rem;
    display: block;
    margin: 0 0 .3rem 0;
    color: white;
}

.form-label textarea,
.form-label input {
    width: 100%;
    padding: .3rem .7rem;
    font-size: 1.3rem;
    color: #333;
    font-family: inherit;
}

.form-label input:focus {
    background-color: #999;
}


/** States */
.configuration-wrapper {
    margin: 0;
}

.form {
    position: relative;
    z-index: 1;
    background: #ffffff;
    padding: 1rem;
}

.form label {
    display: block;
    margin: 0 0 1rem 0;
}

.form select,
.form textarea,
.form input[type="number"],
.form input[type="text"],
.form input[type="password"],
.form input[type="email"] {
    font-family: inherit;
    outline: 0;
    background: #dbf9d8;
    width: 100%;
    border: 0;
    margin: 0;
    padding: .75rem;
    font-size: 1rem;
    border-radius: .5rem;
    box-shadow: inset 0 0.125rem 0.125rem rgba(0,0,0,.1);
}

.form select[readonly],
.form textarea[readonly],
.form input[type="number"][readonly],
.form input[type="text"][readonly],
.form input[type="password"][readonly],
.form input[type="email"][readonly] {
    background-color: #f0f0f0;
    color: #333;
}

.select2-container--default .select2-selection--single {
    margin: 0 0 1rem;
    border: 0;
    padding: 0.5rem 0;
    height: auto;    
    background: #dbf9d8;
}

.form input:focus {
    background-color: #e7e7e7;
}

.form .message {
    margin: 15px 0 0;
    color: #b3b3b3;
    font-size: 12px;
}

.form .message a {
    color: #394955;
    text-decoration: none;
}

.login-form-register {
    display: block;
    margin: 1rem 0;
    font-size: 1rem;
}

.login-form-register a {
    color: #394955;
}


/** Video */
.results {
    display: none;
    position: absolute;
    top: 1rem;
    left: 0;
    right: 1rem;
    z-index: 1000;
    padding: 0;
    list-style-type: none;
    height: 19.6rem;
    overflow-y: scroll;
    background-color: #3e4a3d;
    color: white;
}

.results.is-active {
    display: block;
}

.results li {
    border-bottom: 1px solid #ccc;
}

.results a {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: .7rem;
}

.results a:hover {
    background-color: #a1afa0;
}

.results small {
    display: block;
    text-align: right;
}


/** Control wrapper */
.controls-wrapper {
    margin-left: -1rem;
}

/** Transcription */
.transcription {
    background-color: #efeae2;
    margin: 0 0 0 -1rem;
    padding: 0;
    list-style-type: none;
    border: none;
    height: calc(100vh - 19rem);
    overflow-y: scroll;
}

.transcription::-webkit-scrollbar {
    width: .5rem;
    background-color: #F5F5F5;
}

.transcription::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

.transcription::-webkit-scrollbar-thumb {
    background-color: #097f67;
}

.transcription li {
    padding: .5rem 1rem;
    overflow: hidden;
}

.transcription li.hide {
    display: none;
}

.transcription li span {
    position: relative;
    display: inline-block;
    padding: .7rem;
    opacity: 1;
    max-width: 80%;
    border-radius: .25rem;
    line-height: 1.2;
    float: right;
    cursor: pointer;
    transition: opacity .3s ease-out;
    background-color: #333;
    color: white;
}

.transcription li span + span {
    margin: 1rem 1rem 0 1rem;
}

.transcription li span:hover {
    opacity: .9;
}

.transcription li span.speaker + span:after {
    content: "";
    position: absolute;
    width: 100%;
    height: .25rem;
    display: none;
    background-color: #333;
    bottom: 0;
    right: -1.5rem;
    border-radius: 0;
    left: 0;
}

.transcription li.is-active span.speaker + span:after {
    display: block;
}

.transcription li span + span:before {
    content: "";
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    border-color: transparent;
    border-style: solid;
    border-width: .5rem;
    border-top-color: #333;
    margin-left: auto;
    margin-right: -.5rem;
}

.transcription li span.speaker {
    background-color: transparent;
    border-radius: 100%;
}

.transcription li[data-speaker-index="1"] span {
    float: left;
}

.transcription li[data-speaker-index="1"] span + span:before {
    left: 0;
    right: auto;
    margin-left: -.5rem;
    margin-right: auto;
    border-top-color: #474838;
}

.user-card {
    position: relative;
    padding: 1rem;
    background-color: #413116;
    color: white;
    margin: 0 0 1rem -1rem;
    border: 1px solid white;
    border-radius: 0.25rem;
    font-size: 1.25rem;
}

.user-card:before {
    content: "";
    position: absolute;
    top: .5rem;
    left: .5rem;
    right: .5rem;
    bottom: .5rem;
    border: 1px dashed white;
    border-radius: 0.25rem;
}

.user-card-name {
    
}

.user-card-phone {
    position: relative;
    float: right;
}

.user-card-phone a {
    color: inherit;
}

#fallacious:checked ~ ul mark {
    background: #ff9043;
    color: #333;
}


/* Report */
.report-wrapper {
    margin: 2rem 0 0 0;
}

.report-wrapper-title {
    overflow: hidden;
}

.report-placeholder {
    position: relative;
    background-color: #f0f0f0;
    padding: 1rem 2rem;
}

.report {
    background-color: white;
    padding: 2rem;
    border: 1px solid #ccc;
    box-shadow: 0 0 1rem rgba(0,0,0,.3);
    line-height: 1.5;
}

.report-title {
    text-align: center;
    margin: 0 0 1rem 0;
    border-bottom: 1px solid #ccc;
}

.report-subtitle {
    text-align: center;
    font-weight: 400;
    font-size: 1.2rem;
}

.report-subtitle small {
    display: block;
    font-size: .75em;
}

.report-section {
    margin: 0 0 1rem 0;
}

.report-section-title {
    margin: 0 0 1rem 0;
    border-bottom: 1px solid #ccc;
    text-transform: uppercase;
}

.report-actions {
    float: none;
    text-align: right;
    margin: 0 1rem;
}

.report-actions .button {
    display: inline-block;
    vertical-align: top;
    width: auto;
}

.report-feature-evidences ul {
    list-style: none;
    padding: 1rem;
    margin: 1rem;
    border-left: .25rem solid #cccc;
    background: #f0f0f0;  
    columns: 2;
}

.report-feature-evidences li {
    border-bottom: 1px solid #ccc;
    padding: .3rem 0;
}

.report-feature-evidences li small {
    font-weight: bold;
    text-transform: uppercase;
}


/** @var device */
.device-wrapper {
    padding: 5rem 0;
    margin: auto;
}

.device {
    position: relative;
    width: 11rem;
    height: 11rem;
    margin: auto;
    background: #f0f0f0;
    border-radius: 100%;
    font-size: 0;
    border: 1px solid #666;
}

.device button {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    z-index: 1000;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    border-radius: 100%;
    background: #b7cd00;
    color: white;
    box-shadow: none;
    border-color: #777;
    border-width: 1px;
    cursor: pointer;
    outline: none;
}

.device button:focus {
    outline: none;
}

.device .speakers {
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    color: black;    
}

.device-inner {
    position: absolute;
    width: calc(100% - 1.5rem);
    height: calc(100% - 1.5rem);
    top: 50%;
    left: 50%;
    border: 1px solid #ccc;
    background: #fcfcfc;
    border-radius: 100%;
    transform: translate(-50%,-50%);
}

.device-north {
    position: absolute;
    z-index: 1;
    bottom: .5rem;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -1rem;
    border: 1rem solid #666;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

.consolidating-state {
    opacity: .3;
    pointer-events: none;
}

.recording-state .device-north {
    bottom: none;
    top: 50%;
    left: 50%;
    border: 1rem solid #666;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: #666;
    transform-origin: center center;
    margin-top: -1rem;
    margin-left: -1rem;
    transition: all .3s ease-out;
}

.speaker-selector {
    text-align: center;
    margin: 4rem 0;
    font-size: 0;
}

.speaker-selector span {
    display: block;
    text-align: center;
    font-size: 0.875rem;
    background: #333;
    color: white;
    padding: .3rem .7rem;
    border-radius: .25rem;
    margin: 0 0 1rem 0;
}

.speaker-selector input[type="radio"] {
    display: none;
}

.speaker-selector input[type="radio"] ~ * {
    opacity: .3;
}


.speaker-selector input[type="radio"]:checked ~ * {
    opacity: 1;
}


.speaker-selector label {
    display: inline-block;
    margin: 0 1.5rem;
}

.speaker {
    width: 4rem;
    height: 4rem;
    margin: auto;
    border-radius: 100%;
    font-size: 0;
    transform-origin: center;
    transform: rotate(0) translate(0);
    transition: all .3s ease-out;
    background-color: transparent;
    background-image: none;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    will-change: transform;
}

.device-wrapper .speaker {
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 50%;
    margin-left: -2rem;
    margin-top: -2rem;
}

.transcription li[data-role="user"] span.speaker + span {
    background-color: #58bc4d;
}

.transcription li[data-role="user"] span + span:before {
    border-top-color: #58bc4d;
}

.transcription li[data-role="bot"] span.speaker + span {
    background-color: #333;
}

.transcription li[data-role="bot"] span + span:before {
    border-top-color: #333;
}

.transcription [data-speaker-index$="user"] span.speaker + span,
.speaker-role-user,
.speaker-role-1 {
    background-image: url(avathar.png?v=1);
}

.speaker-role-bot,
.speaker-role-2 {
    background-image: url(bot.png);
}

:root {
    --rotation: 5deg;
}

.recording-session .speaker {
    transform: rotate(var(--rotation)) translate(8rem) rotate(calc(-1 * var(--rotation)));
}



/** @var recording sessions */
.recording-session {
    position: relative;
    padding: 2rem;
    background-color: #eee1d0;
    margin: 1rem;
    border-radius: .5rem;
}

.recording-session[data-speaker-scheme]:after {
    content: attr(data-speaker-scheme);
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: block;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    color: white;
    background-color: #8f7344;
    text-align: center;
    border-radius: 100%;
}

.recording-session:before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    border: 1px solid #f0f0f0;
    border-radius: .5rem;
}

.recording-session-controls {
    text-align: right;
    margin: 1rem 0 0 0;
}

.recording-session .button {
    background-color: #8f7344;
}

.modal__container {
    max-width: none;
    background-color: #fff;
    width: 900px;
}

.modal__content {
    margin: 0;
}

.modal__container .login-page {
    margin: 0;
}

.modal__container .login-page .form {
    margin: 0;
}

.modal__container .button {
    margin-top: 1rem;
}


/** @calendar */
#calendar {
    max-width: 110rem;
    margin: 0 auto;
}


.fc .fc-toolbar.fc-header-toolbar {
    margin: 1rem 0;
}

.fc .fc-toolbar-title {
    padding-left: 1rem;
    font-weight: 300;
    font-size: 1rem;
}

.fc-col-header-cell {
    background-color: #381e5e;
    color: white;
}

.fc .fc-scroller-liquid-absolute {
    position: static !important;
}

.fc .fc-col-header-cell-cushion {
    padding: .75rem 0;
}

.fc tbody {
    background-color: #f0f0f0;
}

.fc-theme-standard td {

}

.fc-daygrid-event-dot {
    display: none;
}

.fc .fc-daygrid-event {
    z-index: 6;
    margin-top: 1px;
    background-color: #333;
    color: white;
    padding: 0.3rem 0.3rem 0.3rem 0.25rem;
    margin: 0 0.5rem 1px 0.5rem !important;
    font-size: 0;
}

.fc .fc-daygrid-event.confirmed {
    background: #b7cd00;
}

.fc .fc-daygrid-event.cancelled {
    background: #ff4666;
}

.fc-daygrid-day.fc-day:hover {
    background-color: #ccc;
    cursor: pointer;
}


/** 
 * Avathar 
 *
 * @link https://codepen.io/mfucek1/pen/egBPwO
 */
.avatar-wrapper {
    position: relative;
    height: 12rem;
    width: 12rem;
    margin: 3rem auto;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 1px 1px 15px -5px black;
    transition: all .3s ease;
}

.avatar-wrapper:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.avatar-wrapper:hover .profile-pic:after {
    opacity: 0;
}

.avatar-wrapper:hover .profile-pic {
    opacity: .5;
}

.avatar-wrapper .profile-pic {
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.avatar-wrapper .profile-pic:after {
  font-family: "Font Awesome 5 Free";
  content: "\f007";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: 8rem;
  background: #ecf0f1;
  color: #34495e;
  text-align: center;
}

.avatar-wrapper .upload-button {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.avatar-wrapper .upload-button .fa-arrow-circle-up {
  position: absolute;
  font-size: 8rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 12rem;
  text-align: center;
  opacity: 0;
  transition: all .3s ease;
  color: #34495e;
}

.avatar-wrapper .upload-button:hover .fa-arrow-circle-up {
  opacity: .9;
}

/** ... */
.helper-box {
    width: 100%;
    background: #f0f0f0;
    padding: 1rem;
    margin: 1rem 0;
    height: calc(100vh - 14rem);
}

.helper-box-title {
    background: #3f6400;
    color: white;
    margin: -1rem -1rem 1rem -1rem;
    padding: 1rem;
}


.helper-box::-webkit-scrollbar {
    width: .5rem;
    background-color: #F5F5F5;
}

.helper-box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

.helper-box::-webkit-scrollbar-thumb {
    background-color: #097f67;
}

.dashboard-title {
    text-align: center;
    font-weight: 300;
    font-size: 1.5rem;
    color: #333;
    margin: 0;
    padding: 0.75rem 0;
}

.session-navigation {
    position: relative;
    margin: 0;
    text-align: left;  
    white-space: nowrap;
    overflow: scroll;
    text-align: center;
}

.session-navigation-container {
    max-width: 60rem;
    margin: 0 auto;
    font-size: 0;
}

.session-navigation button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 1rem;
    border: none;
    cursor: pointer;
    vertical-align: middle;
    background-color: rgba(0,0,0,.4);
    font-weight: 300;
    font-size: 1rem;
    color: white;
}

.session-navigation button:hover {
    background-color: rgba(0,0,0,.7);
}

.session-navigation button.is-active {
    background-color: #58bc4d;
}


/** Dashboard and KPIs */
.dashboard {
    padding: 1rem;
}

.kpi {
    margin: 0;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    overflow: hidden;
}

.kpi-title {
    height: 2rem;
    padding: 0 0.7rem;
    margin: 0;
    background-color: #3f6400;
    color: white;
    font-size: 1rem;
    line-height: 2;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

.kpi-content {
    height: calc(100% - 2rem);
    background-color: #333;
}

/** Range */
#timeline {
    display: block;
    position: relative;
    width: 12rem;
    height: 3rem;
    margin: 5rem auto 0 auto;
}

#timeline .range {
    position: relative;
    width: 100%;
    height: 0.5rem;
    background: #2f4858;
}

#timeline .range input {
    width: 100%;
    position: absolute;
    top: 2px;
    height: 0;
    -webkit-appearance: none;
}

#timeline .range input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: -8px 0  0;
    border-radius: 100%;
    background: #3f6400;
    cursor: pointer;
    border: 0 !important;
}

#timeline .range-labels {
    display: none;
}

#timeline .range input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    margin: -8px 0  0;
    border-radius: 0;
    background: #3f6400;
    cursor: pointer;
    border: 0 !important;
}

#timeline .range input::-ms-thumb {
    width: 18px;
    height: 18px;
    margin: -8px 0  0;
    border-radius: 0;
    background: #3f6400;
    cursor: pointer;
    border: 0 !important;
}

#timeline .range input::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: #b2b2b2;
}

#timeline .range input::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: #b2b2b2;
}

#timeline .range input:focus {
    background: none;
    outline: none;
    border: 0;
}

#timeline .range input:focus-outer {
    background: none;
    outline: none;
    border: 0;
}

#timeline .range::-moz-focus-outer {
    background: none;
    outline: none;
    border: 0;
}


#timeline .current-value {
    text-align: center;
    font-weight: bold;
    margin-top: -3rem;
    font-size: 1.15rem;
}

.vex.vex-theme-plain.suggest-popup .vex-content {
    max-width: 60rem;
    width: 100%;
}

.vex.vex-theme-plain.suggest-popup .vex-dialog-message {
    font-size: 2rem;
    font-weight: 300;
}
 
.chatbot-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.chatbot-list-item {
    border-bottom: 1px solid #ccc;
}

.chatbot-list-anchor {
    position: relative;
    display: block;
    padding: .3rem 5rem .3rem .7rem;
    background-color: #f0f0f0;
    text-decoration: none;
    line-height: 1.5;
    color: #333;
    transition: background-color .1s ease-out;
}

.chatbot-list-anchor:hover {
    background-color: #e0e0e0;
}

.chatbot-list-name {
    font-weight: bold;
}

.chatbot-list-description {
    display: block;
    font-style: italic;
    font-size: .85em; 
    overflow: hidden;

    display: -webkit-box;    
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.chatbot-list-state {
    position: absolute;
    top: 50%;
    right: 1rem;
    margin-top: -0.5rem;
    display: inline-block;
    vertical-align: middle;
    background-color: #ff2a61;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
}

.chatbot-list-state.is-running {
    background-color: #58bc4d;
}

.chatbots-search-label {
    position: relative;
    margin-bottom: 1rem;
}

.chatbots-search-label > i {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    font-size: 1.5rem;
    color: #777;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -0.75rem;
}

.chatbot-list-deploy {
    position: absolute;
    right: 3rem;
    top: 50%;
    margin-top: -1rem;
}

.chatbot-list-deploy > i {
    display: none;
    font-size: 2rem;
    color: #acac9a;
}

.chatbot-search {
    margin-bottom: 0 !important;
}

.create-chatbot-action {
    font-size: 2rem;
    text-decoration: none;
    transition: background-color .3s ease-out;
}

.create-chatbot-action:hover {
    background-color: #333;
}

.toggle {
    cursor: pointer;
    display: inline-block;
}

.toggle-switch {
    display: inline-block;
    background: #ccc;
    border-radius: 16px;
    width: 58px;
    height: 32px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
}

.toggle-switch:before, .toggle-switch:after {
    content: "";
}

.toggle-switch:before {
    display: block;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    width: 24px;
    height: 24px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: left 0.25s;
}

.toggle:hover .toggle-switch:before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.toggle-checkbox:checked + .toggle-switch {
    background: #56c080;
}

.toggle-checkbox:checked + .toggle-switch:before {
    left: 30px;
}

.toggle-checkbox {
    position: absolute;
    visibility: hidden;
}

.toggle-label {
    margin-left: 5px;
    position: relative;
    top: 2px;
}


/** RASA WEB CHAT */
/** As chat is open by default, we do not need the chat button */
.micromodal-slide .css-vurnku {
    display: none;
}
 
#rasa-chat-ph {
    min-height: 35rem;   
0}

.port_pid {
    display: block;
    margin-top: -0.825rem;
    margin-bottom: .5rem;
    color: #eee;
}

.port_pid > i {
    padding-right: .5rem;
    color: white;
}

.show-asterisk-help {
    display: block;
    color: white;
    font-size: 1.5rem;
    text-align: center;
}

details summary {
  cursor: pointer;
}

details summary > * {
  display: inline;
}

.configuration-drawer {
    background: #222;
    margin: 1em 0;
    padding: 1em;
    border-radius: 1em;
}