/* Your app styles here */
body {
    font-size: 16px;
}
p {
    margin: 0 0 10px 0;
}
.asterisk_lg {
    font-size: 2rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}
.mr-1 {
    margin-right: 0.5em;
}
.mb-1 {
    margin-bottom: 0.5em;
}
.w-100 {
    width: 100%;
}
.h-auto {
    height: auto !important;
}
.rel {
    position: relative;
}
.statusbar {
    /* display: none !important; */
    background-color: #fff !important;
}
#btn_perfsets_reload {
    display: none;
}
textarea {
    /* font-size: 14px; */
    font-size: inherit;
    width: 100%;
}
.button {
    font-weight: bold;
}
.button.button-auto {
    height: auto !important;
    padding: 8px !important;
    line-height: 1.5;
}
.md .padding-left {
    padding-left: 10px !important;
}
.md .padding-right {
    padding-right: 10px !important;
}
.md .padding-top {
    padding-top: 10px !important;
}
.md .padding-bottom {
    padding-bottom: 10px !important;
}
.md .margin-left {
    margin-left: 10px !important;
}
.md .margin-right {
    margin-right: 10px !important;
}
.md .margin-top {
    margin-top: 10px !important;
}
.md .margin-bottom {
    margin-bottom: 10px !important;
}
.md .list {
    margin: 10px 0;
}
.md .list .item-content {
    padding-left: 10px;
}
.list .item-title {
    width: 100%;
    line-height: 1.5;
}
.checklist .checklist_values {
    display: none;
}
.checklist .list .item-title {
    white-space: pre-line;
    text-overflow: unset;
}
.checklist .list .item-after .item_num {
    display: none;
}
.block.checklist.invalid {
    outline: 2px solid red;
}
.block.checklist .title a.checklist_help, .block.question .title a.question_help {
    display: inline-block;
    color: #fff;
    padding: 6px 6px;
    margin-top: -6px;
    margin-right: -6px;
    z-index: 10;
    opacity: .5;
}
.block.checklist .title a.checklist_help.active-state, .block.question .title a.question_help.active-state {
    opacity: 1;
}
.block.checklist .checklist_description, .block.question .question_description {
    background-color: lightyellow;
}

.log_checklists .block.checklist .list .checklist_item .checklist_item_icon {
    display: block;
    font-size: 3.5rem;
    line-height: 1.2;
}
/* for firefox not supporting :has selector yet */
.log_checklists .block.checklist.icons .list ul 
/* .log_checklists .block.checklist .list ul:has(.checklist_item .checklist_item_icon) */
 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.5rem;
    padding-bottom: 0.75rem;
    gap: .75rem;
}
/* .log_checklists .block.checklist .list .checklist_item:has(.checklist_item_icon), */
/* for firefox not supporting :has selector yet */
.log_checklists .block.checklist.icons .list .checklist_item 
 {
    flex-basis: 30%;
    flex: 1;
    align-self: flex-start;
    text-align: center;
}
/* .log_checklists .block.checklist .list .checklist_item:has(.checklist_item_icon) .item-inner, */
.log_checklists .block.checklist.icons .list .checklist_item .item-inner
 {
    display: block;
    padding: 0;
}
/* .log_checklists .block.checklist .list .checklist_item:has(.checklist_item_icon) .item-inner::after, */
.log_checklists .block.checklist.icons .list .checklist_item .item-inner::after
 {
    display: none;
}
/* .log_checklists .block.checklist .list .checklist_item:has(.checklist_item_icon) label, */
.log_checklists .block.checklist.icons .list .checklist_item label
{
    display: block;
    text-align: center;
    margin: 0;
    padding: .25rem;
    cursor: pointer;
    outline: 0;
    border-radius: 8px;
    opacity: .85;
    color: #929fad;
}
/* .log_checklists .block.checklist .list .checklist_item:has(.checklist_item_icon) label i.icon, */
.log_checklists .block.checklist.icons .list .checklist_item label i.icon
 {
    position: absolute;
    visibility: hidden;
}
/* .log_checklists .block.checklist .list .checklist_item:has(.checklist_item_icon):has(input:checked) label, */
.log_checklists .block.checklist.icons .list .checklist_item.checked label
{
    outline: 2px solid;
    box-shadow: 1px 1px 15px currentColor;
    opacity: 1;
    color: var(--c-selected);
}
/* .log_checklists .block.checklist .list .checklist_item:has(input:checked) .item-title, */
.log_checklists .block.checklist.icons .list .checklist_item.checked .item-title
 {
    font-weight: bold;
}
/* .log_checklists .block.checklist .list .checklist_item[data-color]:has(input:checked),  */
/* .log_checklists .block.checklist .list .checklist_item[data-color]:has(input:checked) label, */
.log_checklists .block.checklist.icons .list .checklist_item[data-color].checked, 
.log_checklists .block.checklist.icons .list .checklist_item[data-color].checked label
 {
    color: var(--c-selected);
    opacity: 1;
}

.list .item-title span.text-color-gray, #content_perfset span.text-color-gray, #log_edit span.text-color-gray, #log_new span.text-color-gray {
    font-size: 0.75rem;
}
.fs-1 {
    font-size: 1rem !important;
}
.list .item-title .log_num {
    color: #9e9e9e;
    display: inline-block;
    width: 25%;
}
.md .list .item-link .item-inner, .md .list .list-button .item-inner {
    padding-right: 32px;
}
.md .list .item-footer, .md .list .item-header {
    padding-top: 0.2em;
}
.md .list .item-media+.item-inner {
    margin-left: 10px;
}
.md .list .item-content {
    min-height: 32px;
}
.md .list .item-content.item-checkbox {
    min-height: 44px;
}
.md .list .item-content.item-radio {
    min-height: 44px;
}
.md .list .item-inner {
    min-height: 32px;
    padding-right: 10px;
}
.list .item-inner {
    padding-top: 5px;
    padding-bottom: 5px;
}
.md .block-title {
    color: rgba(0,0,0,0.25);
    margin: 10px 10px 10px;
}
.md .dialog-title + .dialog-text {
    margin: 10px 0;
    font-style: italic;
}
.md .dialog-input {
    color: #212121;
}
.md .block {
    margin: 10px 0;
    padding: 0 10px;
}
.md .block.block-strong {
    margin: 10px 0;
    padding: 10px;
}
.md label.item-checkbox>.icon-checkbox {
    margin-right: 10px;
}
.md label.item-radio>.icon-radio {
    margin-right: 10px;
}
.md .padding {
    padding: 10px !important;
}
.md .padding-small {
    padding: 5px !important;
}
.new_checklist_sortable .item-title {
    width: 100%;
}
.md .sortable-handler {
    width: 36px;
}
.md .list .item-media {
    min-width: 16px;
    align-self: start;
    padding-top: 16px;
}
#content_perfset .item-media {
    align-self: center;
    padding-top: 8px;
}
.accordion-item .accordion-icon-open {
    display: none;
}
.accordion-item.accordion-item-opened .accordion-icon-closed {
    display: none;
}
.accordion-item.accordion-item-opened .accordion-icon-open {
    display: inline;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.block.counter, .block.counter_cont, .block.counter_percentage {
    border-radius: 7px;
}
.counter p, .counter_cont p, .counter_percentage p {
    font-size: 16px;
}
.counter .button i.fa, .counter_cont .button i.fa, .counter_percentage .button i.fa {
    font-size: 24px;
}

.counter_cont .btn_counter_cont_reset {
    text-transform: lowercase;
    border-color: #fff;
    /* border: 1px solid rgba(255,255,255,.33) !important; */
    border: 0 !important;
    color: #fff !important;
    font-size: 16px !important;
    width: auto;
    margin-top: .5rem;
    opacity: .75;
}
.counter_cont .btn_counter_cont_reset:hover, .counter_cont .btn_counter_cont_reset:focus, .counter_cont .btn_counter_cont_reset:active {
    opacity: 1;
}
.counter_cont .btn_counter_cont_reset i.fa {
    font-size: 16px;
    margin-right: .5rem;
}
.counter_cont .counter_cont_serie_name {
    margin-top: .75rem;
    width: 100%;
    background-color: #fff;
    padding: .25em .5rem;
    font-size: 14px;
}
.input_counter, .input_counter_percentage {
    font-size: 32px;
    color: #fff;
    text-align: center;
    display: inline-block;
    width: 100%;
    font-weight: bold;
}
.new_checklist_sortable li:first-child .btn_delete_checklist_item {
    display: none;
}
.md .sortable-enabled .item-inner, .md .sortable-enabled .item-link .item-inner {
    padding-right: 32px !important;
}
.navbar .title {
    text-align: center;
}
.md .navbar .title {
    margin: 0 15px;
    font-weight: bold;
}
.navbar .title img.company_logo {
    padding-top: 3px;
    max-height: 50px;
    max-width: 100%;
    margin: 0 auto;
}
.page-content {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}
.md .badge {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 5px;
}
.md .color-theme-blue .navbar, .md .color-theme-blue.navbar {
    /* background-color: #f7f7f9; */
    /* color: #292b2c; */
}
.login-button {
    background-color: #2196f3 !important;
}
.md .navbar {
    font-size: 1rem;
}
.md .toolbar a {
    /* color: #292b2c; */
}
.md .color-theme-blue a {
    /* color: #FFCC00; */
    color: #2196f3;
}
.md .navbar a.link, .md .toolbar a.link {
    color: #fff;
    padding: 0 10px;
}
.md .navbar .right a.link, .md .toolbar .right a.link {
    padding: 0 !important;
    min-width: 44px;
}
.md .navbar a.link {
    opacity: .5;
}
.md .navbar a.link.active-state {
    opacity: 1;
}
.md .color-blue .button, .md .color-theme-blue .button {
    /* color: #FFCC00; */
    color: #2196f3;
}
.md .color-blue .button.button-active, .md .color-blue .button.button-fill, .md .color-blue .button.button-fill-md, .md .color-blue .button.tab-link-active, .md .color-theme-blue .button.button-active, .md .color-theme-blue .button.button-fill, .md .color-theme-blue .button.button-fill-md, .md .color-theme-blue .button.tab-link-active {
    background-color: #2196f3;
}
.md .color-theme-blue .button.button-fill.button-danger {
    background-color: #f44336;
}
.md .color-theme-blue .checkbox input[type=checkbox]:checked~i, .md .color-theme-blue label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox, .md .color-theme-blue label.item-checkbox input[type=checkbox]:checked~.icon-checkbox {
    background-color: #2196f3;
    border-color: #2196f3;
}
.md .color-theme-blue .radio input[type=radio]:checked~i, .md .color-theme-blue label.item-radio input[type=radio]:checked~* .icon-radio, .md .color-theme-blue label.item-radio input[type=radio]:checked~.icon-radio {
    background-color: #2196f3;
    border-color: #2196f3;
}
.md .color-theme-blue .radio input[type=radio]:checked~.icon-radio:after, .md .color-theme-blue label.item-radio input[type=radio]:checked~* .icon-radio:after, .md .color-theme-blue label.item-radio input[type=radio]:checked~.icon-radio:after {
    background-color: #fff;
}
.md .color-theme-blue .button.button-fill {
    color: rgba(255,255,255,.75);
}
.md .color-theme-blue .button.button-fill.active-state {
    color: #fff !important;
}
.block.counter, .block.counter_cont, .block.counter_percentage {
    background-color: #2196f3;
    margin: 1rem 0;
}
.badge.counter, .badge.counter_cont, .badge.counter_percentage {
    background-color: #2196f3;
}
.block.counter_cont {
    /* background-color: #212121 !important; */
    background-color: slategray !important;
}
.badge.counter_cont {
    /* background-color: #212121 !important; */
    background-color: slategray !important;
}
.badge.checklist {
    background-color: #2196f3;
}
.badge.question {
    background-color: #2196f3;
}
.block.checklist, .block.question {
    margin: 1rem 10px;
    border: 1px solid #2196f3;
    padding: 0;
    border-radius: 7px;
    overflow: hidden;
}
.block.checklist .block.title, .block.question .block.title {
    background-color: #2196f3;
    color: #fff;
    margin: 0;
}
.perfset_question {
    border-bottom: 1px solid rgba(0,0,0,0.15);
}
textarea.question_answer {
    border: 1px solid #ddd;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.25) inset;
    padding: .5em;
}
textarea.question_answer[required].input-invalid {
    outline: 2px solid red;
}
textarea.checklist_explanation {
    border: 1px solid #ddd;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.25) inset;
    padding: .5em;
}
textarea.checklist_explanation[required].input-invalid {
    outline: 2px solid red;
}
.required_asterisk {
    font-size: 1.75rem;
    line-height: 1;
    display: inline-block;
    vertical-align: top;
    opacity: .75;
    margin-left: .25rem;
}
/* textarea.checklist_explanation[required]:empty {
    outline: 1px solid red;
} */
.btn_question_na {
    border-width: 1px !important;
    border-color: #ccc !important;
}
.md .block.checklist .list {
    margin: 0;
}
.num {
    color: #2196f3;
    /* font-size: 24px; */
    font-size: 2rem;
}
.graph_bar_values {
    font-size: 0.5rem;
    /* position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%; */
}
.md .color-theme-blue .navbar, .md .color-theme-blue.navbar {
    background-color: #2196f3;
    color: #fff;
}
.md .color-theme-blue .toolbar:not(.messagebar), .md .color-theme-blue.toolbar:not(.messagebar) {
    background-color: #2196f3;
    color: #fff;
}
.md .color-theme-blue .fab > a {
    background-color: #2196f3;
    
    color: rgba(255,255,255,.75);
}
.md .color-theme-blue .fab > a.active-state {
    color: #fff;
}
.md .fab[class*="-bottom"] {
    bottom: 24px;
}
.md .view-main .navbar {
    /* background-color: #f7f7f9; */
    /* color: #292b2c; */
}
.md .dialog-inner {
    padding: 15px;
}
.md .dialog-button {
    color: #2196f3;
    border: 2px solid transparent;
    order: 2;
    border-radius: 7px;
    line-height: 32px;
}

.md .dialog-buttons {
    padding: .75rem;
    padding-top: 0;
    height: auto;
    -ms-flex-pack: start;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.md .dialog-button.dialog-button-bold {
    order: 1;
    border-radius: 7px;
    border: 2px solid;
}
.md .button.button-big, .md .button.button-big-md {
    border-radius: 12px;
    font-size: 1.25rem;
}
.md .toolbar  i.fa, .md .navbar  i.fa {
    font-size: 1.25rem;
}
.bg-faded {
    /* background-color: #f7f7f9; */
    background-color: #efefef;
}
.accordion_perfset_propperties, #wrapper_perfset_filters, #log_edit_properties {
    background-color: #efefef;
    border-radius: 7px;
    overflow: hidden;
    /* box-shadow: 0px 2px 3px rgba(0,0,0,0.2); */
    border: 1px solid #ddd;
}
.perfset_properties_toggle, .perfset_filters_toggle {
    padding: 0.5rem;
    /* background-color: #f7f7f9; */
    
    
}
.perfset_properties, .perfset_filters {
    /* background-color: #f7f7f9; */
    background-color: #efefef;
}
.pc_filters_list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    /* background-color: #f7f7f9; */
    background-color: #efefef;
    /* box-shadow: 0px 2px 3px rgba(0,0,0,0.2); */
    border: 1px solid #ddd;
    border-radius: 7px;
    overflow: hidden;
}
.pc_filters_list:empty {
    display: none;
}
.pc_filters_list .pc_filter_el {
    flex-shrink: 1;
    flex-grow: 1;
    /* background-color: #f7f7f9; */
    background-color: #efefef;
}
.pc_filters_list .pc_filter_el label {
    font-weight: bold;
    display: inline-block;
    margin-bottom: .25rem;
}
.pc_filters_list .pc_filter_el select {
    width: 100%;
    border: 1px solid rgba(0,0,0,0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    -webkit-appearance: menulist-button;
    -moz-appearance: menulist-button;
    appearance: menulist-button;    
}
#perfset_counters_checklists {
    border-top: 1px solid rgba(0,0,0,0.15);
}
#perfset_counters_checklists .row {
    border-bottom: 1px solid rgba(0,0,0,0.15);
    margin-bottom: 10px;
}
#perfset_instruments {
    border-top: 1px solid rgba(0,0,0,0.15);
}
#perfset_instruments .row {
    border-bottom: 1px solid rgba(0,0,0,0.15);
    margin-bottom: 10px;
}
#perfset_instruments .num {
    padding-left: .5rem;
}
#perfset_description {
    display: block;
}
#perfset_description img {
    max-width: 100%;
    height: auto !important;
    display: block;
}
.md .photo-browser-dark .navbar {
    background: #2196f3;
}
#btn_perfset_photo, #btn_perflog_new_photo, #btn_perflog_edit_photo {
    width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
#btn_perfset_photo + label, #btn_perflog_new_photo + label, #btn_perflog_edit_photo + label  {
    position: relative;
    top: -16px;
    background-color: #2196f3;
    color: #fff;
    padding: 0.75em;
    border-radius: 50%;
    font-size: 1.25em;
    cursor: pointer;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23);
    box-shadow: 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23);
}
#btn_perflog_new_photo + label, #btn_perflog_edit_photo + label {
    top: 0;
}
#btn_perfset_photo + label *, #btn_perflog_new_photo + label * , #btn_perflog_edit_photo + label * {
    pointer-events: none;
}
#perfset_photos, #perflog_new_photos, #perflog_edit_photos {
    justify-content: space-around;
    margin-top: 0.5em;
}
#perfset_photos .img_canvas, #perfset_photos .img_block {
    position: relative;
    /* padding: 0.5em; */
    /* margin-bottom: 1em; */
    /* background-color: #000; */
}
#perflog_new_photos .img_canvas, #perflog_new_photos .img_block {
    position: relative;
}
#perflog_edit_photos .img_canvas, #perflog_edit_photos .img_block {
    position: relative;
}
.btn_delete_photo {
    position: absolute;
    top:0;
    right:0;
    z-index: 10;
    width: auto;
    padding: 1em;
    background: red !important;
    color: #fff !important;
    width: 44px !important;
    min-width: 44px !important;
}
#perfset_photos canvas, #perflog_new_photos canvas, #perflog_edit_photos canvas {
    max-width: 100%;
    height: auto;
}
#perfset_photos img, #perflog_new_photos img, #perflog_edit_photos img {
    max-width: 100%;
    height: auto;
}
.block.perfset_checklist {
    padding: 0;
    margin: 10px;
    border: 1px solid #2196f3;
}
.perfset_checklist .checklist_title {
    margin: 0;
    background-color: #2196f3;
    color: #fff;
}
.perfset_checklist .checklist_title input {
    background-color: #fff;
}

.stepper {
    display: flex;
}
.md .stepper-big, .md .stepper-big-md {
    width: 100%;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 8px;
    overflow: hidden;
}

.md .color-theme-blue .stepper-fill .stepper-button-minus {
    width: 25%;
    background-color: transparent;
    color: #fff;
    /* border: 1px solid #fff; */
    border: none;
}
.md .color-theme-blue .stepper-fill .stepper-button-minus.active-state {
    background-color: #fff;
}
.md .color-theme-blue .stepper-fill .stepper-button-plus.active-state {
    background-color: #fff;
}
.md .color-theme-blue .stepper-input-wrap {
    width: 50%;
    text-align: center;
    border: none;
    border-left: 1px solid rgba(255,255,255,.5);
    border-right: 1px solid rgba(255,255,255,.5);    
}
.md .color-theme-blue .stepper .stepper-input-wrap input {
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    /* background-color: #fff; */
    background: transparent;
    /* color: #2196f3; */
    color: #fff;
    border: none;
}
 .md .color-theme-blue .stepper-fill .stepper-button-plus {
     width: 25%;
     background-color: transparent;
     color: #fff;
     /* border: 1px solid #fff; */
     border: none;
 }
 .stepper-button-minus:after, .stepper-button-plus:after {
     width: 20px;
     height: 5px;
 }
 .stepper-button-plus:before {
     height: 20px;
     width: 5px;
 }

 .md .color-theme-blue .stepper-fill .stepper-button-minus:after, .md .color-theme-blue .stepper-fill .stepper-button-minus:before, 
 .md .color-theme-blue .stepper-fill .stepper-button-plus:after, .md .color-theme-blue .stepper-fill .stepper-button-plus:before, 
 .md .color-theme-blue .stepper-fill .stepper-button:after, .md .color-theme-blue .stepper-fill .stepper-button:before, 
 .md .color-theme-blue .stepper-fill-md .stepper-button-minus:after, .md .color-theme-blue .stepper-fill-md .stepper-button-minus:before, 
 .md .color-theme-blue .stepper-fill-md .stepper-button-plus:after, .md .color-theme-blue .stepper-fill-md .stepper-button-plus:before, 
 .md .color-theme-blue .stepper-fill-md .stepper-button:after, .md .color-theme-blue .stepper-fill-md .stepper-button:before {
     /* background-color: #e9ecef !important; */
     background-color: rgba(255,255,255,.5) !important;
 }


/* Left Panel right border when it is visible by breakpoint */
.panel-left.panel-visible-by-breakpoint:before {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background: rgba(0,0,0,0.1);
  content: '';
  z-index: 6000;
}

/* Hide navbar link which opens left panel when it is visible by breakpoint */
.panel-left.panel-visible-by-breakpoint ~ .view .navbar .panel-open[data-panel="left"] {
  display: none;
}

/*
  Extra borders for main view and left panel for iOS theme when it behaves as panel (before breakpoint size)
*/
.ios .panel-left:not(.panel-visible-by-breakpoint).panel-active ~ .view-main:before,
.ios .panel-left:not(.panel-visible-by-breakpoint).panel-closing ~ .view-main:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background: rgba(0,0,0,0.1);
  content: '';
  z-index: 6000;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-style: italic;
    color: #9e9e9e;
}
::-moz-placeholder { /* Firefox 19+ */
    font-style: italic;
    color: #9e9e9e;
}
:-ms-input-placeholder { /* IE 10+ */
    font-style: italic;
    color: #9e9e9e;
}
:-moz-placeholder { /* Firefox 18- */
    font-style: italic;
    color: #9e9e9e;
}
::placeholder {
    font-style: italic;
    color: #9e9e9e;
}

#select_dashboard {
    -webkit-appearance: menulist-button;
    -moz-appearance: menulist-button;
    appearance: menulist-button;
}
#popup_qr_login_scanner {
    z-index: 1000000;
}

#sheet_audio_recorder .toolbar {
    font-size: 1rem;
}
.btn_sheet_audio {
    padding: .5rem;
    display: block;
    text-align: left;
}
.btn_sheet_audio i.fa {
    font-size: 1.25rem;
}
.btn_sheet_audio.button-small {
    margin-bottom: .5rem;
}
.btn_sheet_audio.button-small i.fa {
    font-size: 1rem;
}
.sheet-backdrop {
    z-index: 12000;
}
.sheet-modal {
    z-index: 12010;
}
#btn_close_audio_recorder {
    opacity: .5;
}
#btn_close_audio_recorder:hover, #btn_close_audio_recorder:focus {
    opacity: 1;
}

#btn_audio_record {
    border-radius: 50%;
    color: rgba(255,255,255,.5);
    /* background-color: #cc0000; */
    width: 5rem;
    height: 4.75rem;
    font-size: 2.5rem;
    outline-offset: 0;
    outline: 0px solid #cc0000;
    animation-name: none;
    animation-duration: .75s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: paused;
}
#btn_audio_record .fa-spinner, #btn_audio_record .fa-stop {
    display: none;
}
#btn_audio_record.active {
    box-shadow: 0 0 15px 3px rgba(0,0,0,.15);
    animation-play-state: running;
    animation-name: anim_audio_recording;
    font-size: 2rem;
}
#btn_audio_record.loading {
    background-color: lightgray !important;
    color: #fff;
}
#btn_audio_record.active .fa-microphone, #btn_audio_record.active .fa-spinner {
    display: none;
}
#btn_audio_record.active .fa-stop {
    display: inline-block;
}
#btn_audio_record.loading .fa-spinner {
    display: inline-block;
}
#btn_audio_record.loading .fa-microphone, #btn_audio_record.loading .fa-stop {
    display: none;
}
#audio_recorder_progress {
    margin-top: .75rem;
    width: 200%;
    left: -50%;
    height: 12px;
    /* background-color: lightgray; */
    background-color: #efefef;
    border-radius: 11px;
}
.mejs__container {
    max-width: 100%;
    width: 100%;
    /* background: slategray; */
    background-color: #efefef;
    border-radius: 7px;
    flex-grow: 1;
    /* box-shadow: 0px 2px 3px rgba(0,0,0,0.2); */
    border: 1px solid #ddd;
}
.mejs__controls {
    background: transparent;
    padding: 0 .25rem;
}
.mejs__controls:not([style*="display: none"]) {
    background: transparent;
}
.mejs__button > button {
    color: #212121;
}
.mejs__time-total {
    background-color: rgba(0,0,0,.2);
}
.mejs__time {
    color: #212121;
}
.mejs__time-current, .mejs__time-handle-content {
    background-color: rgba(0,0,0,.75);
}

/* .mejs__overlay-button {
	background-image: url("/libs/mediaelement/mejs-controls.svg");
}
.mejs__overlay-loading-bg-img {
	background-image: url("/libs/mediaelement/mejs-controls.svg");
}
.mejs__button > button {
	background-image: url("/libs/mediaelement/mejs-controls.svg");
} */
.list_audio_items {
    position: relative;
}
.list_audio_items:not(:empty) {
    margin-bottom: 1rem;
}
.list_audio_items .audio_item {
    margin: .75rem 0;
    display: flex;
    align-items: center;
    gap: 0;
}

.md .button.btn_delete_audio_item {
    width: 44px;
    min-width: 44px;
    font-size: 1.25rem;
    color: #212121 !important;
    opacity: .5;
}
.md .button.btn_delete_audio_item.active-state {
    color: #cc0000 !important;
    opacity: 1;
}
.popover_sort {
    margin-top: 56px;
}

#btn_popup_perfset_streak {
    line-height: 1;
    display: none !important;
}
#btn_popup_perfset_streak .icon_streak_empty {
    display: none;
}
#perfset_streak_calendar {
    text-align: center;
}
#perfset_streak_calendar .color-calendar.basic {
    box-shadow: none;
    border: 0;
    margin-top: 2rem;
}

#perfset_streak_calendar .color-calendar.basic .calendar__header, 
#perfset_streak_calendar .color-calendar.basic .calendar__body {
    padding: 0;
}
#perfset_streak_calendar .calendar__day.calendar__day-no-event {
    color: darkgrey;
}
#perfset_streak_calendar .color-calendar .calendar__weekdays .calendar__weekday {
    opacity: 1;
}
#perfset_streak_calendar .color-calendar .calendar__weekdays .calendar__weekday:nth-child(6), #perfset_streak_calendar .color-calendar .calendar__weekdays .calendar__weekday:nth-child(7) {
    background-color: #eee;
}
#perfset_streak_calendar .color-calendar .calendar__days .calendar__day:nth-child(7n), #perfset_streak_calendar .color-calendar .calendar__days .calendar__day:nth-child(7n-1) {
    background-color: #eee;
}
#perfset_streak_calendar .color-calendar.basic .calendar__days .calendar__day-other {
    color: darkgray;
    opacity: 1;
}
#perfset_streak_calendar .color-calendar.basic .calendar__days .calendar__day-active {
    color: #212121;
    opacity: 1;
}
#perfset_streak_calendar .color-calendar.basic .calendar__days .calendar__day-event {
    background-color: orangered !important;
    background-image: linear-gradient(145deg, orange, orangered);
    color: white;
}

@keyframes anim_audio_recording {
    0% {
        outline-offset: 0;
        outline: 0px solid #cc0000;
        background-color: #cc0000;
        color: rgba(255,255,255,.5);
    }
    25% {
        /* outline: 3px solid #cc0000; */
        color: rgba(255,255,255,1);
    }
    66% {
        color: rgba(255,255,255,.75);
    }
    100% {
        outline-offset: 5px;
        outline: 5px solid red;
        background-color: red;
        color: rgba(255,255,255,1);
    }
}
@media (min-width: 800px) {
    .popup:not(.popup-tablet-fullscreen) {
        width: 80vw;
        height: 80vh;
        left: 50%;
        top: 50%;
        margin-left: -40vw;
        margin-top: -40vh;
    }
}
@media (min-width: 800px) and (min-height: 720px) {
    .popup:not(.popup-tablet-fullscreen) {
        width: 80vw;
        height: 720px;
        left: 50%;
        top: 50%;
        margin-left: -40vw;
        margin-top: -360px;
    }
}