﻿
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.timeline-block-full {
    width: 100%;
    display: flex;
    justify-content: center; /* orizontal */
    align-items: center; /* vertical */
    z-index: 100; 
    background-color: white; 
}

.time-show-btn-start {
    margin: 0 auto;
}

.footer {
    position: fixed;
    bottom: 0;
    /* left: 0;
    width: 100%;  să ocupe toată lățimea */
}

/* Overlay vizual când un modal e deschis, dar fără să capteze click-urile */
body.modal-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5); /* transparența fundalului */
    pointer-events: none; /* clicurile trec prin overlay */
    z-index: 1049; /* sub modal, peste restul paginii (funcționează și în BS4/BS5) */
}

/******************************************** APPOINTMENT CHAT *********************/
.chat-button {
    position: fixed;
    bottom: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #0f6bf5;
    color: #fff;
    padding: 12px;
    border: 1px solid #0f6bf5;
    border-radius: 9999px;
    box-shadow: 0 14.4px 19.2px -4.8px rgba(16, 24, 40, .08), 0 4.8px 7.2px -2.4px rgba(16, 24, 40, .03);
    cursor: pointer;
    transition: transform .3s, box-shadow .3s;
    gap: 8px;
    z-index: 2147483646;
    font-family: "Roboto", "Open Sans", "Arial", sans-serif;
}

/******************************************** APPOINTMENT CHAT *********************/

.video-properties {
    padding-bottom: 10px;
    border-radius: 5px !important;
    border: solid 1px #cdcdcd;
}

.video-toolbar-buttons {
    margin: 10px 0px;
    padding: 10px 10px;
    border-radius: 5px !important;
    border: solid 1px #cdcdcd;
}

.modal-50fullscreen {
    width: 50vw !important;
    height: 50vh !important;
}

.modal-75fullscreen {
    width: 75vw !important;
    height: 75vh !important;
}

.modal-100fullscreen {
    width: 100vw !important;
    height: 100vh !important;
}

.services-body {
    background-color: #f9eebf;
}
.btn-service {
    background-color: #ecc92b !important;
}
.btn-contributor {
    background-color: #e099c2 !important;
}
.btn-pharma {
    background-color: #93e59e !important;
}

.contributors-body {
    background-color: #fef2f9;
}

.contributors-ac-option {
    border-bottom: solid 1px #cdcdcd;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    font-size: 12px !important;
}

    .contributors-ac-option:hover {
        background-color: #f56e50 !important;
        color: #ffffff;
    }

        .contributors-ac-option:hover b.active {
            background-color: #fff !important;
        }

.badge-pro {
    --bs-badge-padding-x: 0.4em;
    --bs-badge-padding-y: 0.25em;
    --bs-badge-font-size: 75%;
    --bs-badge-font-weight: 700;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: var(--bs-border-radius);
    display: inline-block;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    font-size: var(--bs-badge-font-size);
    font-weight: var(--bs-badge-font-weight);
    /* line-height: 1; */
    color: var(--bs-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--bs-badge-border-radius);
}

a.menu-gp-container {
    width: 80% !important;
    border: solid 1px #ffffff !important;
    border-radius: 3px !important;
    margin-left: 25px; 
}

.menu-gp-logo {
    width: 100%;
}

.menu-gp-qr {
    width: 100%; 
}

.pharma-numbers {
    padding-left: 10px;
    padding-right: 3px;
    color: #ffffff;
    border-radius: 3px !important;
}

.pharma-edits {
    padding-left: 10px; 
    padding-right: 3px; 
    border: solid 1px #0576b9; 
}

.numeric {
    text-align: right;
}

.pharma-ac-option {
    border-bottom: solid 1px #cdcdcd;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    font-size: 12px !important;
}

    .pharma-ac-option:hover {
        background-color: #f56e50 !important;
        color: #ffffff; 
    }

        .pharma-ac-option:hover b.active {
            background-color: #fff !important;
        }

.ui-menu.ui-widget.ui-widget-content {
    min-height: 300px !important;
}

.pharma-title {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}

.btn-button-left {
    float: right !important;
}

.pharma-body {
    background-color: #f0fff2;
}

.uploadButton {
    width: 200px;
}

.aligned-controls-bottom-left {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.aligned-controls-bottom-right {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.aligned-controls {
    display: flex;
    align-items: center;
}

.tobe-aligned {
    margin-left: 5px;
}

.commentColumn {
    display: block;
    word-wrap: break-word;
    /*width: 50px;*/
    white-space: normal;
}

a.workday.active {
    background-color: #47bce8 !important;
    color: #ffffff !important;
}

a.vacation.active {
    background-color: #f56e50 !important;
    color: #ffffff !important;
}

.vertical-scroll {
    overflow-y: auto !important;
}

.fc-time-grid-container {
    overflow-y: auto !important;
}

.ui-autocomplete {
    z-index: 2147483647 !important;
}

.apexcharts-tooltip {
    z-index: 2147483647 !important;
}

.min-vh-50 {
    min-height: 50vh;
}

.min-vh-20 {
    min-height: 20vh !important;
}

.table-responsive {
    min-height: 50vh;
}

.table-responsive-20 {
    min-height: 20vh;
}

.list-menu-wrapper {
    /*position: fixed;*/
}

.list-menu {
    z-index: 2147483647 !important;
    /*position: fixed;*/
}

.btn-menu {
    border-width: 1px !important;
    border-color: gray !important;
    border-radius: 10px !important;
    padding: 0.2rem 0.5rem !important;
}

.cmd-popup {
    position: absolute;
    border: 1px solid gray;
    z-index: 2147483647;
    border-radius: 10px;
    padding: 3px;
}

.container__mirror {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    color: transparent;
}

.error-background {
    background-color: #ffffff;
    background-clip: border-box;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
}

.error-pages {
    min-height: 0vh !important;
}

.sunColor {
    color: #fdb813 !important;
}

.moonColor {
    color: #7296ab !important;
}

.neutralOption {
    /*padding-left: 5px !important;*/
    color: #cdcdcd;
    font-weight: bold !important;
    text-align: center;
}

.switchExtra {
    margin-left: 0px !important;
}

.changedSelection {
    background-color: #54E0C7;
    color: #fff;
    font-weight: bold !important;
}

.downArrow {
    text-align: left;
    min-width: 10rem;
    width: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='20' height='20' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.downArrowForFlags {
    text-align: left;
    min-width: 2rem;
    width: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='20' height='20' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/********************** TIMERS COLORS ********************/

.badgeX.timer-Start {
    background-color: #2cb57e;
}

.badgeX.text-timer-Start {
    color: #fff;
    font-size: 12px;
}

.badgeX.timer-Stop {
    background-color: #f56e50;
}

.badgeX.text-timer-Stop {
    color: #fff;
    font-size: 12px;
}

.badgeX.timer-Resume {
    background-color: #f5bd58;
}

.badgeX.text-timer-Resume {
    color: #fff;
    font-size: 12px;
}

.badgeX.timer-Reset {
    background-color: #47bce8;
}

.badgeX.text-timer-Reset {
    color: #fff;
    font-size: 12px;
}

/********************** ROLES COLORS ********************/
.badgeX.role-Doctor {
    background-color: #24c4dc;
    color: #fff;
    font-size: 80%;
}

.badgeX.role-DoctorAssistant {
    background-color: #fcc474;
    color: #fff;
    font-size: 80%;
}

.badgeX.role-Receptionist {
    background-color: #a4645e;
    color: #fff;
    font-size: 80%;
}

.badgeX.role-HospitalManager {
    background-color: #acacc4;
    color: #fff;
    font-size: 80%;
}

.badgeX.role-Patient {
    background-color: #f15994;
    color: #fff;
    font-size: 80%;
}

.badgeX.role-SuperAdmin {
    background-color: #57a4a2;
    color: #fff;
    font-size: 80%;
}

/********************** ROLES COLORS ********************/

/********************** NOTIFICATION TYPES COLORS ********************/

.badgeX.type-DocumentUpload, .type-DocumentUpload {
    background-color: #A8D5BA !important;
    color: #fff;
    font-size: 80%;
}

.badgeX.type-DocumentComment, .type-DocumentComment {
    background-color: #57a4a2 !important;
    color: #fff;
    font-size: 80%;
}

.type-text-DocumentUpload {
    color: #A8D5BA !important;
}

.type-text-DocumentComment {
    color: #57a4a2 !important;
}

/********************** NOTIFICATION TYPES COLORS ********************/
.logoHospital {
    background-color: rgb(300, 300, 300);
}

.apexcharts-legend-text {
    /*width: 200px !important;
    word-wrap: break-word !important;*/
}

.currencyHeading {
    font-size: 70% !important;
}

.auth-logo .auth-logo-light, .auth-logo .auth-logo-dark {
    margin: 0px !important;
}

.clockpicker-popover, .ui-datepicker {
    z-index: 99999 !important;
}

.ultra-light {
    font-weight: 300 !important;
}

.air-top-right {
    top: 0;
    right: 0;
}

.air {
    position: absolute;
    z-index: 5;
}



.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.container-full-video-tab {
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    /*pointer-events: none;*/
    -ms-user-select: none;
    border-radius: 0.5rem;
    /*background: #f0f0f1;*/
    height: 100%;
    margin-top: 5px;
}

    .container-full-video-tab video {
        /*top: 50px;*/
        border-radius: 0.5rem;
    }

.videoColumn {
    width: 100%;
    object-fit: cover;
    position: absolute; /* magic sauce */
}

.videoColumnGallery {
    width: 100%;
    object-fit: cover;
    position: absolute; /* magic sauce */
    top: -100px;
}

.video-tab-toolbar {
    /*position: relative;
    clear: left;*/
    padding: 0px; 
}
.row-buttons {
    display: flex;
    gap: 5px;          /* spațiu între butoane (opțional) */
    margin-bottom: 5px; 
}

    .row-buttons button {
        flex: 1;        /* fiecare buton ocupă spațiu egal */
        font-size: 16px;
        cursor: pointer;
    }

​
.videoToolbarButton {
    margin: 3px;
    width: 100%;
}

.btn-large-icon {
    /*padding-left: 30px;
    padding-right: 30px;
    width: 24%;*/
}

.btn-close-canvas {
    font-size: 18px;
}

.deleteSnapshotItem {
    cursor: pointer;
}

.draggable-header {
    cursor: move;
}

.galleryFullScreen {
    height: 800px !important;
    overflow: auto;
}

.container-full-video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    -ms-user-select: none;
    border-radius: 0.5rem;
    background: #f0f0f1;
}

    .container-full-video video {
        border-radius: 0.5rem;
    }

.modal-header-transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: rgba(255,255,255,0.2);
    padding: 10px;
    cursor: move;
}

.modal-footer-transparent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: rgba(255,255,255,0.2);
    /*padding: 10px;
    cursor: move;*/
}

.modal-video {
    height: 100% !important;
    position: relative !important; /* magic sauce II */
    min-height: 100px !important;
}

.modal-resize {
    min-width: 400px;
    max-width: 3000px !important;
}

.modal-drag {
    width: auto !important;
    height: auto !important;
}

.modal-content-size {
    min-width: 400px;
    min-height: 300px;
    width: 700px;
    height: 600px;
}

@media screen and (min-width: 1400px) {
    .modal-float-right {
        margin-right: 0 !important;
        margin-top: 0 !important;
    }
}

.modal-float-right {
    /*position: fixed;
    margin: auto;
    min-width: 520px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);*/
    /*margin-right: 0 !important;
    margin-top: 0 !important;*/
}
/*    .modal-float-right.fade .modal-dialog {
        right: -2020px;
        -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
        -o-transition: opacity 0.3s linear, right 0.3s ease-out;
        transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal-float-right.fade.in .modal-dialog {
        right: 0;
    }*/

.flipImage {
    transform: scale(-1,1);
    webkitTransform: scale(-1,1);
}

/*video::-webkit-media-controls-panel {
    transform: scale(-1,1);
}*/
.galleryItem {
    width: 150px !important;
    float: left;
    margin-left: 10px;
}

/************************ video filter ***********************/
.none {
    -webkit-filter: none;
    filter: none;
}

.blur {
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

.grayscale {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.invert {
    -webkit-filter: invert(1);
    filter: invert(1);
}

.sepia {
    -webkit-filter: sepia(1);
    filter: sepia(1);
}
/************************ video filter ***********************/

.selectedItem {
    font-weight: bold;
}

.galleryImage {
    width: 149px !important;
    margin-left: 0px !important;
}

.galleryVideo {
    width: 149px !important;
    margin-left: 0px !important;
}

.videoInsert {
    /*object-fit: fill;*/
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute; /* magic sauce */
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right !important;
}

/********************************************* TABLES GENERIC SETTINGS ****************/
table tr th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table tbody {
    display: block;
    max-height: 75vh;
}

    table thead, table tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

/********************************************* CALENDAR FIXES FOR TABLES ****************/
div.fc table tbody {
    display: table-row-group;
    max-height: none;
}
    div.fc table tbody tr {
        display: table-row;
        /*max-height: none;*/
        width: auto;
        table-layout: auto; 
    }
div.fc table thead {
    display: table-header-group;
    /*max-height: none;*/
    width: auto;
    table-layout: auto;
}

div.fc table tr th {
    /*white-space: normal;
    overflow: visible;
    text-overflow: clip;*/
}

/********************************************* CALENDAR FIXES FOR TABLES ****************/

/********************************************* CALENDAR FIXES ****************/

.calendar-settings-dropdown {
    width: 400px; 
}

.calendarWrapper {
    max-height: 100dvh; /* sau 80vh / 600px etc. */
    overflow: hidden; /* taie ce iese, fără scroll */
    position: relative;
}

td.fc-day.fc-past {
    background-color: #EEEEEE;
}

.fc-time, .fc-title {
    padding: 3px 2px 2px 4px;
    line-height: 16px;
    font-weight: 700;
    font-size: 11px;
    box-sizing: border-box;
}

.fc-event .fa {
    font-size: 11px;
    margin-top: 4px;
    margin-right: 3px;
    margin-left: 3px;
}
.calendar-filter {
    padding-bottom: 0.25rem !important; 
}

.fc-button-primary {
    background-color: #0576b9 !important;
    border-color: #0576b9 !important;
    color: #fff !important;
}
    .fc-button-primary:hover {
        background-color: #04649d !important;
        border-color: #04598b !important;
        color: #333333 !important;
    }
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0.5em !important;
}
.fc-bs-tooltip .tooltip-inner {
    max-width: 280px; /* limitează lățimea */
    text-align: left;
    background-color: #fff;
    border: solid 1px #04649d; 
}
/********************************************* CALENDAR FIXES ****************/
#feedback-form-wrapper #floating-icon > button {
    position: fixed;
    right: 0;
    top: 50%;
    transform: rotate(-90deg) translate(50%, -50%);
    transform-origin: right;
}

.titleTag, button.titleTag {
    font-size: 18px !important;
    font-weight: bold !important;
}

.sectionTag, a.sectionTag {
    font-size: 16px !important;
}

    .sectionTag.active {
        font-size: 16px !important;
        font-weight: bold !important;
    }

.tabTag, a.tabTag {
    font-size: 16px;
}

    .tabTag.active {
        font-size: 16px;
        font-weight: bold;
    }

.tabTitle {
    font-size: 18px;
    font-weight: bold;
}

a.btn-icon {
    text-decoration: none !important;
}
/*
        .modal-backdrop {
            background-color:none !important; 
        }
*/
.form-control-noborder {
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}

.badgeY {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #cecece;
    border-radius: 10px;
}

.btn-rounded-sm {
    border-radius: 15px;
    padding: 6px 10px;
    margin-left: 10px;
}

.btn-rounded-md {
    border-radius: 25px;
}

.btn-rounded-lg {
    border-radius: 35px;
}

html body .container.body-content {
    position: absolute;
    top: 77px;
    bottom: 60px;
    right: 0;
    left: 0;
    overflow-y: auto;
}

.rating-symbol-background, .rating-symbol-foreground {
    font-size: 24px;
}

.rating-symbol-foreground {
    top: 0px;
}

.rating-star > span {
    display: inline-block;
    vertical-align: middle;
}

    .rating-star > span.badge {
        margin-right: 4px;
    }

/**********************************************/
.blob {
    /*            background: black;*/
    border-radius: 50%;
    /*margin: 10px;
            height: 20px;
            width: 20px;*/
    box-shadow: 0 0 0 0 rgba(247, 248, 250, 1);
    transform: scale(1);
    animation: pulse 2s infinite;
}

.text-white {
    color: rgb(247, 248, 250) !important;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(247, 248, 250, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(247, 248, 250, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(247, 248, 250, 0);
    }
}

table.sortableTable tbody td:hover {
    cursor: move;
}

.badgeX {
    --bs-badge-padding-x: 0.4em;
    --bs-badge-padding-y: 0.25em;
    --bs-badge-font-size: 75%;
    --bs-badge-font-weight: 700;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: 0.25rem;
    /*font-size: 80%;*/
    padding: 0.25em;
    line-height: 1;
    color: #fff;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem !important;
}

    .badgeX.Text {
        background-color: #ffc09f;
    }

    .badgeX.text-Text {
        color: #99735f;
        font-size: 12px;
    }

    .badgeX.Bool {
        background-color: #ffee93;
    }

    .badgeX.text-Bool {
        color: #998e58;
        font-size: 12px;
    }

    .badgeX.Number {
        background-color: #6fa8dc;
    }

    .badgeX.text-Number {
        color: #426484;
        font-size: 12px;
    }

    .badgeX.Textarea {
        background-color: #a0ced9;
    }

    .badgeX.text-Textarea {
        color: #607b82;
        font-size: 12px;
    }

    .badgeX.Catalogue {
        background-color: #adf7b6;
    }

    .badgeX.text-Catalogue {
        color: #67946d;
        font-size: 12px;
    }

    .badgeX.MultiCatalogue {
        background-color: #eb5e55;
    }

    .badgeX.text-MultiCatalogue {
        color: #8d3833;
        font-size: 12px;
    }

    .badgeX.Button {
        background-color: #d79732;
    }

    .badgeX.text-Button {
        color: #7b4b00;
        font-size: 12px;
    }

    .badgeX.QuestionButton {
        background-color: #FFC727;
    }

    .badgeX.text-QuestionButton {
        color: #7b4b00;
        font-size: 12px;
    }

    .badgeX.Section {
        background-color: #e3618c;
    }

    .badgeX.text-Section {
        color: #811236;
        font-size: 12px;
    }

    .badgeX.MonthCatalogue {
        background-color: #c6d8d3;
    }

    .badgeX.text-MonthCatalogue {
        color: #636c69;
        font-size: 12px;
    }

    .badgeX.TabCatalogue {
        background-color: #daedbd;
    }

    .badgeX.text-TabCatalogue {
        color: #6d765e;
        font-size: 12px;
    }

    .badgeX.SectionTitle {
        background-color: #bbc37d;
    }

    .badgeX.text-SectionTitle {
        color: #5d613e;
        font-size: 12px;
    }

    /********************* STATUSES FOR EXAMINATIONS *********/
    .badgeX.Opened {
        background-color: #0576b92e;
    }

    .badgeX.text-Opened {
        color: #0576b9;
        font-size: 12px;
    }

    .badgeX.ProcedureStarted {
        background-color: #2cb57e2e;
    }

    .badgeX.text-ProcedureStarted {
        color: #2cb57e;
        font-size: 12px;
    }

    .badgeX.ConclusionStarted {
        background-color: #f5bd582e;
    }

    .badgeX.text-ConclusionStarted {
        color: #f5bd58;
        font-size: 12px;
    }

    .badgeX.Media {
        background-color: #d8b2d8;
    }

    .badgeX.text-Media {
        color: #730073;
        font-size: 12px;
    }

    .badgeX.Closed {
        background-color: #f56e502e;
    }

    .badgeX.text-Closed {
        color: #f56e50;
        font-size: 12px;
    }

    /**************** voice command types ******************/
    .badgeX.CmdText {
        background-color: #B4E6F2;
    }

    .badgeX.text-CmdText {
        color: #01343f;
        font-size: 12px;
    }

    .badgeX.CmdVideo {
        background-color: #b2d8b2;
    }

    .badgeX.text-CmdVideo {
        color: #005900;
        font-size: 12px;
    }

    .badgeX.CmdShortcut {
        background-color: #f0c808;
    }

    .badgeX.text-CmdShortcut {
        color: #483c02;
        font-size: 12px;
    }

    .badgeX.CmdAction {
        background-color: #f15994;
    }

    .badgeX.text-CmdAction {
        color: #30111d;
        font-size: 12px;
    }

    /**************** voice command types ******************/
    .badgeX.KeySystem {
        background-color: #B4E6F2;
    }

    .badgeX.text-KeySystem {
        color: #01343f;
        font-size: 12px;
    }

    .badgeX.KeyVoiceCommand {
        background-color: #b2d8b2;
    }

    .badgeX.text-KeyVoiceCommand {
        color: #005900;
        font-size: 12px;
    }

.top-dropdown {
    height: 300px;
    overflow-y: auto;
    z-index: 9999999;
}

.nav-tabs {
    border-bottom: 1px solid #0576b9 !important;
}

.left-tabs.nav-tabs {
    border-right: 1px solid #0576b9 !important;
    border-bottom: 0px solid #0576b9 !important;
}

.drop-wrapper {
    border: 1px solid #0576b9 !important;
    border-radius: 0.5rem;
    height: 30px;
}

.drop-button {
    display: flex;
}

.voiceCommandItem {
    font-size: 14px;
    font-weight: bold;
}

.nav-bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    /*border-top: 1px solid rgba(255,255,255,.6);*/
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*************************************************************/
.padding-y-xs {
    padding: 0 .25em;
}

.padding-y-sm {
    padding: 0 .5em;
}

.padding-y-md {
    padding: 0 1em;
}

.padding-y-lg {
    padding: 0 1.5em;
}

.padding-y-xl {
    padding: 0 3em;
}