/* ********************************* */
/* WebView для работы max-бота        */
/* @id2635072153_bot                 */
/* ********************************* */
/*       https://t.me/fsanek         */
/* ********************************* */

/* разметка размерности элементов дизайна */

/* общие стили */
.panel {
    margin-top: 5vmin;
}

.deco-2-line {
    border-radius: 5vmin;
    border-top-width: 1vmin;
    border-top-style: solid;
    border-bottom-width: 1vmin;
    border-bottom-style: solid;
}
.deco-side {
    margin: 5px;
    padding: 1em;
    border-radius: 5vmin;
    border-width: 0.4vmin 3vmin;
    border-style: dashed solid;
}
.deco-panel {
    border-width: 0.5vmin 1.5vmin 1.5vmin 0.5vmin ;
    border-style: dashed solid solid dashed;
    border-radius: 5vmin;
}

.btn {
    width: 8vmin;
    height: 8vmin;
    min-width: 8vmin;
    min-height: 8vmin;
    margin: 0 1vmin;
    text-align: center;
    display: grid;
    align-items: center;
    justify-items: center;
    border-width: 0.8vmin;
    border-style: solid;
    border-radius: 2vmin;
}
.help-content > div {
    margin-top: 5vmin;
}
.help-content .hint {
    font-size: 0.8em;
    font-style: italic;
}
.help-content .btn,
.help-content .icon {
    display: inline-grid;
}

.header {
    text-align: center;
    font-weight: bold;
    min-height: 5vmin;
    display: grid;
    align-items: center;
}
/*.header.not-found {*/
/*    margin: 3vmin;*/
/*    padding-top: 2vmin;*/
/*    border-top-width: 0.5vmin;*/
/*    border-top-style: dotted;*/
/*}*/

.center {
    text-align: center;
}
.bold {
    font-weight: bold;
}
.small {
    font-size: small;
}
.red {
    color: red;
}

/* именованные стили */
body {
    margin-bottom: 17vmin;
    margin-left: 5vmin;
    margin-right: 5vmin;
}
body.platform-android {
    font-size: 14pt;
}
body.platform-ios {
    font-size: 32pt;
}
input {
    font-size: 1.6em;
}
input::-webkit-input-placeholder {
    font-size: 0.6em;
}

#panel-user,
#panel-addr {
    display: flex;
    flex-direction: row;
    min-height: 15vmin;
    padding: 2vmin 0;
    justify-content: space-between;
    align-items: center;
}
#panel-user .name,
#panel-addr .name {
    flex-grow: 1;
    text-align: center;
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2em;
}

#panel-action-lic {
    display: grid;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    padding: 2em 2em 0;
}
#panel-action-lic div {
    min-height: /*50px;*/ 12vmin;
    width: calc(100% - 4em);
    display: grid;
    justify-content: center;
    align-content: center;
    text-align: center;
}
#panel-action-faq {
    padding: 0 1em;
}
#panel-action-faq div {
    min-height: 12vmin;
    width: calc(100% - 4em);
    display: grid;
    align-content: center;
    text-align: center;
}
div.faq {
    font-family: Verdana, Tahoma, Arial;
}
.faq .btn{
    display: inline-grid;
}
.faq span.app-btn{
    padding: 2vmin;
    border-radius: 10vmin;
    margin: 1vmin;
    display: inline-block;
}               

#line-btn {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
.contr-line ,
.addr-line {
    display: grid;
    margin: 1em;
    padding: 10px;
    gap: 2vmin;
    justify-content: space-between;
}
.addr-line {
    grid-template-columns: 1fr auto auto 1fr;
}
.contr-line {
    grid-template-columns: 1fr 5fr 7fr;
}
.contr-line .contr-id,
.contr-line .contr-inn,
.addr-line .addr-id,
.addr-line .addr-sq {
    display: grid;
    align-items: end;
    justify-items: center;
    text-align: center;
}
.contr-line .contr-nm,
.addr-line .addr-nm {
    border-top-width: 1px;
    border-top-style: dashed;
    padding: 1vmin;
    text-align: center;
}
.addr-line .addr-nm {
    grid-column: span 4;
}
.contr-line .contr-nm {
    grid-column: span 3;
}
.addr-line .lic-choice.selected {
    opacity: 0;
}

#panel-client-counter,
#panel-client-edit,
#panel-data-add {
    display: grid;
    grid-template-columns: 1fr 10fr;
    gap: 2vmin;
}
#panel-client-counter,
#panel-client-edit {
    padding: 5vmin 0vmin;
}
#panel-data-add {
    padding: 5vmin;
}
#panel-client-counter .icon,
#panel-client-edit .icon,
#panel-data-add .icon {
    text-align: right;
    margin-top: 3vmin;
    /*font-size: 1.2rem;*/
}
#panel-client-counter .frame,
#panel-client-edit .frame {
    grid-column: span 2;
    margin: 1vmin;
    border-radius: 5vmin 5vmin 1vmin 1vmin;
    border-width: 0.8vmin;
    border-style: solid;
    padding-bottom: 0.8vmin;
}
#panel-client-counter .frame.label,
#panel-client-edit .frame.label {
    text-align: center;
    font-weight: bold;
    padding: 1rem;
    border-width: 0;
    border-bottom-width: 0.8vmin;
    border-bottom-style: solid;
    border-radius: 4.5vmin 4.5vmin 0 0;
    margin: 0;
}
#panel-client-counter .frame.data,
#panel-client-edit .frame.data {
    /*padding-left: 3rem;*/
    padding: 1vmin;
    border-width: 0;
}
#panel-client-counter .label,
#panel-client-edit .label,
#panel-data-add .label {
    margin-top: 3vmin;
    /*font-size: 1.2rem;*/
}
#panel-client-counter .input,
#panel-client-edit .input,
#panel-data-add .input {
    grid-column: span 2;
    margin-bottom: 3vmin;
    /*font-size: 2rem;*/
}
#panel-client-counter .label,
#panel-client-edit .label {
    padding: 0 4vmin;
}
#panel-client-counter .input,
#panel-client-edit .input {
    padding: 0 3vmin;
}
#panel-client-counter .input input,
#panel-client-edit .input input,
#panel-data-add .input input {
    /*font-size: 2rem;*/
    width: 100%;
    border-radius: 2vmin;
    border-width: 2px 5px 5px 2px;
    border-style: dashed solid solid dashed;
    text-align: center;
}
#panel-client-counter .input input.small {
    font-size: 0.8em;
}
#panel-client-counter .btn.save,
#panel-client-edit .btn.save,
#panel-data-add .btn.save,
#panel-data-add #btn-qr-code {
    grid-column: span 2;
    width: calc(100% - 3vmin);
    margin-top: 3vmin;
    display: flex;
    gap: 1em;
    flex-direction: row;
    justify-content: center;
    font-size: 1.3em;
}
/*#panel-client-counter .btn.save span,
#panel-client-edit .btn.save span,
#panel-data-add .btn.save span,
#panel-data-add #btn-qr-code {
    padding: 0 2vmin;
}*/

.switch-btn {
    display: inline-block;
    width: 20vmin; /* ширина */
    height: 8vmin; /* высота */
    border-radius: 19px; /* радиус скругления */
    z-index: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    transition-duration: 300ms; /* анимация */
    border-width: 0.5vmin;
    border-style: solid;
}
.switch-btn::after {
    content: "";
    height: 5vmin; /* высота кнопки */
    width: 5vmin; /* ширина кнопки */
    border-radius: 4vmin;
    top: 1vmin; /* положение кнопки по вертикали относительно основы */
    left: 1vmin; /* положение кнопки по горизонтали относительно основы */
    transition-duration: 300ms; /* анимация */
    position: absolute;
    z-index: 1;
    border-width: 1vmin;
    border-style: dashed;
}
.switch-on::after {
    left: 13vmin;
}

.peni {
    display: grid;
    grid-template-columns: 5fr 1fr;
    padding: 0 1em;
    justify-items: end;
    align-items: center;
    margin: 3vmin 0;
}
.peni .text {
    margin: 0 1em;
}

.counter {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1vmin;
    margin: 2vmin 0;
    padding: 0.7vmin 0;
}
.counter-name,
.counter-num {
    grid-column: span 2;
    text-align: center;
}
.counter-place {
    display: grid;
    align-items: center;
    justify-items: end;
    padding-right: 5px;
    text-align: center;
}
.counter-val {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-items: center;
}

.check-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 3vmin;
    padding: 1vmin;
    align-items: center;
}
.check {
    text-align: center;
}
.check .btn {
    display: inline-grid;
}
.check.summa {
    text-align: right;
}

.serv {
    display: grid;
    grid-template-columns: auto auto;
    margin: 2vmin 0;
}
.serv div {
    padding: 2px 5px;
}
.serv-name {
    text-align: center;
    font-weight: bold;
    margin: 5px 2px;
    grid-column: span 2;
}
.serv-owner {
    grid-column: span 2;
    text-align: right;
    margin-right: 1vmin;
}
.serv-type {
    grid-column: span 2;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
}
.serv-data {
    text-align: right;
}

.pay-month {
    display: grid;
    grid-template-columns: 3vmin repeat(8, 1fr);
    gap: 0px;
    margin: 2vmin 0;
    padding: 10px;
    font-size: normal;
}
.pay-month .pay-M {
    grid-column: span 6;
}
.pay-month .pay-S {
    grid-column: span 3;
    text-align: right;
}
.pay-month .pay-M,
.pay-month .pay-S {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
.pay-month .pay-D {
    grid-column: span 1;
    align-content: center;
    padding: 1px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.pay-month .pay-W {
    grid-column: span 4;
    padding: 1px;
    border-width: 0 1px 1px 1px;
    border-style: solid;
}
.pay-month .pay-P {
    grid-column: span 3;
    text-align: right;
    align-content: center;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

#panel-help-btn {
    width: 100%;
    height: 11vmin;
    /*min-width: 11vmin;*/
    min-height: 11vmin;
    position: fixed;
    right: 2vmin;
    bottom: 4.5vmin;
    opacity: 0.6;
    margin: 0 1vmin;
    text-align: center;
    display: grid;
    align-items: center;
    justify-items: end;
    border-width: 0;
    border-style: solid;
    border-radius: 2vmin;
    font-size: 2em;
    z-index: 1;
}

#panel-help {
    margin-top: 0;
    /*border-width: 1px;
    border-style: solid;
    border-radius: 5vmin;*/
    /*width: calc(100% - 8vmin);
    height: calc(100% - 10vmin);*/
    /*top: 0;
    left: 0;*/
    /*align-items: center;
    font-weight: bold;*/
    text-align: center;
    z-index: 2;
}
.help-caption {
    margin-top: 18vmin;
}
.help-content {
    text-align: left;
    font-weight: normal;
}

#panel-load,
#panel-result,
#panel-error {
    position: absolute;
    margin: 4vmin 3vmin;
    border-width: 1vmin;
    border-style: solid;
    border-radius: 5vmin;
    width: calc(100% - 8vmin);
    height: calc(100% - 10vmin);
    top: 0;
    left: 0;
    align-items: center;
    font-weight: bold;
    text-align: center;
}

#panel-result {
    z-index: 10;
}
#panel-load {
    z-index: 50;
}
#panel-error {
    z-index: 100;
}

#panel-result #img,
#panel-load #img {
    font-size: 3em;
}

#panel-help .close,
#panel-error .close {
    float: right;
    margin: 2vmin;
}
#panel-error #text {
    margin-top: 12vmin;
}

#ver {
    position: fixed;
    width: calc(100% - 4vmin);
    bottom: 0;
    left: 2vmin;
    right: 2vmin;
    font-size: 0.8em;
    z-index: 1;
    opacity: 0.6;
    border-top-width: 1px;
    border-top-style: dashed;
    font-weight: bold;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
}
/*#ver #tg-api-ver {*/
/*    text-align: left;*/
/*}*/
/*#ver #token {*/
/*    text-align: center;*/
/*}*/
#ver #app-ver {
    text-align: right;
}