/* Your app styles here */
body {
    font-size: 16px;
}
p {
    margin: 0 0 10px 0;
}
.mr-1 {
    margin-right: 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;
}
.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: 10%;
}
.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;
}
.counter p, .counter_cont p {
    font-size: 16px;
}
.counter .button i.fa, .counter_cont .button i.fa {
    font-size: 24px;
}
.input_counter {
    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;
}
.navbar .title img.company_logo {
    padding-top: 3px;
    max-height: 50px;
    max-width: 100%;
    margin: 0 auto;
}
.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 10px;
    min-width: 44px;
}
.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: #FFCC00; */
    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: #FFCC00; */
    background-color: #2196f3;
    /* border-color: #FFCC00; */
    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: #FFCC00; */
    background-color: #2196f3;
    /* border-color: #FFCC00; */
    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;
}
.block.counter, .block.counter_cont {
    /* background-color: #FFCC00; */
    background-color: #2196f3;
    margin: 1rem 0;
}
.badge.counter, .badge.counter_cont {
    /* background-color: #FFCC00; */
    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: #FFCC00; */
    background-color: #2196f3;
}
.badge.question {
    background-color: #2196f3;
}
.block.checklist, .block.question {
    margin: 1rem 10px;
    border: 1px solid #2196f3;
    padding: 0;
}
.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 {
    border: 1px solid darkred;
}
.btn_question_na {
    border-width: 1px !important;
    border-color: #ccc !important;
}
.md .block.checklist .list {
    margin: 0;
}
.num {
    /* color: #FFCC00; */
    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: #FFCC00; */
    background-color: #2196f3;
    color: #fff;
}
.md .color-theme-blue .toolbar:not(.messagebar), .md .color-theme-blue.toolbar:not(.messagebar) {
    /* background-color: #FFCC00; */
    background-color: #2196f3;
    color: #fff;
}
.md .color-theme-blue .fab > a {
    background-color: #2196f3;
    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: #FFCC00; */
    color: #2196f3;
}
.md .button.button-big, .md .button.button-big-md {
    border-radius: 5px;
    font-size: 1.25rem;
}
.md .toolbar  i.fa, .md .navbar  i.fa {
    font-size: 1.25rem;
}
.bg-faded {
    background-color: #f7f7f9;
}
.perfset_properties_toggle {
    padding: 0.5rem;
    background-color: #f7f7f9;
}
.perfset_properties {
    background-color: #f7f7f9;
}
#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_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: darkred !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%;
}
.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-input-wrap {
    width: 50%;
    text-align: center;
    border: none;
}
.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;
 }

/* 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;
}