@import "../mobile_history/components/elements.css";

span, div, h1, h2, h3, h4, h5, h6, h7, h8, h9 {
    color: var(--main-color);
}
h4, h5 {
    text-align: justify;
    width: 100%;
}
body {
    background: var(--white-color) !important;
}
.inner-page-header:before {
    background: var(--white-color);
    height: 5em;
    border-bottom: solid 4px var(--app-bg);
}
.inner-page-header {
    background: var(--white-color);
    height: 5em;
}
.new-popup {
    padding-top: 7rem;
}
.main_centerWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    align-self: center;
    flex-grow: 1;
    margin: 2em 0 8em 0;
    width: 50%;
    min-width: 400px;
    text-align: left;
}
.page_title {
    text-align: start;
    width: 100%;
    margin-bottom: 0.6em;
}
hr {
    width: 100%;
    border: none;
    border-bottom: solid 2px var(--app-bg);
    margin-top: 20px;
    margin-bottom: 20px;
}
.down-wrap {
    border-top: solid 1px var(--app-bg);
}
.big_round_icon {
    font-size: 60px;
    padding: 60px;
    background: var(--app-bg);
    border-radius: 50%;
}
.list_block > * {
    margin-bottom: 20px;
}
.list_block {
    margin-bottom: 10px;
}
.blue-when-checked:has(.radio-field):has(input:checked),
.blue-when-checked-checkbox:has(.radio-field):has(input[type="checkbox"]:checked) {
    border: 1px solid var(--main-color);
}
.with_down_button {
    padding-bottom: 9em;
}
.autofill {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: var(--h6);
    border: 1px solid var(--gray-inactive);
    border-radius: 10px;
    padding: 1em;
    background: rgba(255, 255, 255, 0.85);
}
.autofill .radio-field {
    margin-bottom: 0.1rem;
    width: 100%;
}
.autofill .radio-field-label {
    color: var(--main-color);
    min-height: 2rem;
    padding: 0;
}
.autofill .radio-field-label:before {
    margin-top: -1rem;
}
.autofill span {
    align-self: normal;
}
.radio-field-label strong {
    font-weight: 700;
}

/* Buttons */
.btn {
    text-transform: none !important;
}
.btn:disabled, .btn:disabled span {
    opacity: 0.5;
    filter: alpha(opacity = 50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}
.main-btn-wrap {
    position: fixed !important;
    padding: 1.4em;
    
    /* Try fix for iOS InAppBrowser : fixed elements disappearing */
    z-index: 1;
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
}
.main-btn-wrap.absolute {
    position: absolute !important;
}
.main-btn-wrap.small-btns {
    justify-content: space-between;
}
.main-btn-wrap.small-btns .btn {
    width: 12rem;
    font-size: var(--h6);
}
.btn.secondary {
    background: rgba(255, 255, 255, 0.85);
    border: solid 2px var(--main-color);
}
.btn.secondary:hover {
    border: solid 2px var(--light-blue-color);
}
.btn.secondary:hover span {
    color: var(--light-blue-color);
    opacity: 1;
}
.btn.valid,
.btn.valid span {
    color: var(--white-color);
    background: var(--valid-color);
}
.btn.add-btn {
    display: flex;
    align-items: center;
    color: var(--main-color);
    width: 100%;
    border: dashed 2px var(--main-color);
}
.btn.add-btn:hover {
    color: var(--light-blue-color);
    border: dashed 2px var(--light-blue-color);
}
.btn.add-btn > * {
    vertical-align: middle;
}
.btn.add-btn > strong {
    line-height: 25px;
    margin-right: 1em;
}
.btn.add-btn > span {
    line-height: 0;
}

/* Type selection */
.type_box {
    display: flex;
    padding: 1.6em;
    margin: 1em;
    width: 100%;
    border-radius: 10px;
    background-color: var(--app-bg);
    font-size: var(--h6);
    line-height: var(--h3);
}
.type_box div:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 45px;
    margin-right: 20px;
}
.type_box div:nth-child(2) {
    display: flex;
    flex-direction: column;
    text-align: start;
    flex-grow: 1;
}

/* Progress bar */
.progress_block {
    width: 100%;
    text-align: start;
    margin-top: 20px;
    margin-bottom: 20px;
}
a.progress_block .title {
    display: flex;
    align-items: center;
}
a.progress_block .title span {
    text-decoration: underline;
}
.progress_bar {
    height: 16px;
    background: var(--gray);
    border-radius: 8px;
    position: relative;
}
.progress_bar .progress {
    background: var(--main-color);
    display: block;
    height: 100%;
    border-radius: inherit;
}
.progress_bar .progress.done {
    background: var(--valid-color);
}
.progress_bar .progress.waiting {
    background: var(--sad-color);
}
.progress_bar .progress_text {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    text-align: center;
    color: var(--white-color);
    font-size: 14px;
    font-weight: 500;
    text-shadow: 1px 1px var(--main-color);
}

/* Hygiene */
.hygiene_product_block {
    display: flex;
    flex-direction: column;
    padding: 1.4em;
    margin-bottom: 1em;
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--gray-inactive);
}
.hygiene_product_block > *:not(:last-child) {
    margin-bottom: 1rem;
}

.fixed_btn {
    position: fixed;
    bottom: 1em;
    
    /* Try fix for iOS InAppBrowser : fixed elements disappearing */
    z-index: 1;
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
}
.fixed_btn.absolute {
    position: absolute !important;
}

/* Service temp */
.area_block .radio-field {
    min-width: 33%;
}
.area_block {
    padding-top: 2em;
}

/* Switch checkbox */
input[type=checkbox].switch {
    height: 0;
    width: 0;
    visibility: hidden;
}
label.switch {
    cursor: pointer;
    text-indent: -9999px;
    min-width: 40px;
    width: 40px;
    height: 20px;
    background: var(--gray-inactive);
    display: block;
    border-radius: 100px;
    position: relative;
}
label.switch:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--gray-color);
  border-radius: 18px;
  transition: 0.3s;
}
input.switch:checked + label.switch {
  background: var(--main-color);
}
input.switch:checked:disabled + label.switch {
  background: var(--disabled-color);
}
input.switch:checked + label.switch:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
  background: var(--white-color);
}
label.switch:active:after {
  width: 26px;
}
.has-file-link {
    cursor: pointer;
}

datalist#products_values  {
    position: absolute;
    border: 0 none;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 30px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
} 
datalist#products_values option {
    font-size: 1.5em;
    padding: 0.3em 1em;
    background-color: #ffffff;
    cursor: pointer;
    width: 100%;
}
datalist#products_values option:hover {
    background-color: #b6b5b5;
}

.ob_finished_module_finished_btns_wrapper {
    display: flex;
    flex-direction: column;

}

.ob_finished_module_finished_btns_wrapper a {
    height: 50px; 
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}