:root {
    --main-main-color: #1e1e1e;
    --main-sub-color: #282828;
    --main-sub2-color: #2f2f2f;
    --main-border-color: #1c1c1c;
    --main-hover-color: #2e2e2e;
    --main-accent-color: #1c3c3c;

    --reg-tooltip-color:#2c1c3c;
    --reg-tooltip-border-color: #3c2c4c;

    --reg-low-diff-color: #1c5c2c;
    --reg-low-diff-hover-color: #1c5c2c90;
    --reg-medium-diff-color: #5c5c1c;
    --reg-medium-diff-hover-color: #5c5c1c90;
    --reg-hard-diff-color: #7c2c1c;
    --reg-hard-diff-hover-color: #7c2c1c90;

    --reg-mana-color: #2cBcAc;
    --reg-prana-color: #AcBcAc;
    --reg-faith-color: #AcBc2c;

    --reg-animation-speed: 0.4s;
    --reg-size-preview-data: 18px;
}

#main {height: 90vh; width: 100%; display: flex; justify-content: center; margin-top: -10px;}
span {user-select: none;}

.main-wrap {position: relative;}
.title-reg {display: flex; justify-content: center;}
.title-reg > span {font-size: 26px; font-weight: 600;}
.body-reg {height: 760px; padding: 4px; gap: 22px; display: flex; transition: opacity 0.3s ease;}

.left-block {width: 230px;}
.right-block {width: 680px;}
.left-block, .right-block {justify-content: start; align-items: start;}

.wrap-left-block, .wrap-right-block {height: 97.5%; width: 100%; padding: 6px; gap: 6px; display: flex; flex-direction: column;}
.label-title {font-size: 22px; justify-content: center; display: flex; font-weight: 600; border-bottom: 2px solid var(--main-sub-color); padding-bottom: 8px; font-family: "Tektur";}

/* Left block style */
.named-state, .population-select, .difficulty, .race-select, .genome-select, .peculiarity-select {padding-bottom: 6px; border-bottom: 2px solid var(--main-sub-color);}
.label-text {font-size: 16px; font-weight: 500; user-select: none; padding: 2px 4px;}   
/* Input name-state */
.wrap-left-block {background: var(--main-main-color); border: 2px solid var(--main-border-color); border-radius: 4px;}
.named-state-input {width: 97%; height: 24px; background: var(--main-sub-color); border: 2px solid var(--main-border-color); padding: none; color: var(--sub-text-color); font-family: "Tektur"; font-weight: 200; padding-left: 4px;}
.named-state-input:focus {outline: none; padding-left: 4px; border: 2px solid var(--main-accent-color);}

/* input count entity */
.population-select-input-range {width: 100%;}
.fine-tuning {display: flex; justify-content: space-between;}
.wrap-tuning {display: flex; gap: 4px;}
.button-step {background: var(--main-sub2-color); width: 32px;; color: var(--sub-text-color); user-select: none; cursor: pointer; justify-content: center; align-items: center; display: flex; border: 1px solid var(--main-border-color); border-radius: 3px; font-variant-numeric: tabular-nums; }
.button-step > svg {width: 18px; height: 18px; fill: var(--sub2-text-color);}
@keyframes slow_up_button_step {from {background: var(--main-sub2-color);} to {background: var(--main-accent-color);}}
.button-step:hover {background: var(--main-accent-color); animation: slow_up_button_step var(--reg-animation-speed) forwards;}
.button-step:hover > svg {fill: var(--sub-text-color);}
.button-step:active {opacity: 0.7;}
.count-human {font-size: 18px;}
input[type="range"] {width: 100%; height: 6px; background-color: transparent; accent-color: var(--sub-text-color); border: none;}

/* difficulty */
.difficulty {display: flex; flex-direction: column; justify-content: center;}
.difficulty > * {display: flex; align-items: center; padding: 2px; gap: 6px;}
.diff-button {appearance: none; width: 16px; height: 16px; background: var(--main-sub-color); border-radius: 2px; border: 1px solid var(--main-border-color);}
@keyframes slow_up_low {from {background: transparent;} to {background: var(--reg-low-diff-hover-color);}}
@keyframes slow_up_medium {from {background: transparent;} to {background: var(--reg-medium-diff-hover-color);}}
@keyframes slow_up_hard {from {background: transparent;} to {background: var(--reg-hard-diff-color);}}
.low:checked {background-color: var(--reg-low-diff-color);}
.low-l:hover {background-color: var(--reg-low-diff-hover-color); border-radius: 2px; animation: slow_up_low var(--reg-animation-speed) forwards;}
.medium:checked {background-color: var(--reg-medium-diff-color);}
.medium-l:hover {background-color: var(--reg-medium-diff-hover-color); border-radius: 2px; animation: slow_up_medium var(--reg-animation-speed) forwards;}
.hard:checked {background-color: var(--reg-hard-diff-color);}
.hard-l:hover {background-color: var(--reg-hard-diff-color); border-radius: 2px; animation: slow_up_hard var(--reg-animation-speed) forwards;}

/* Selects button */
.select {display: flex; flex-direction: column; gap: 4px; width: 100%;}
.select-button {padding-right: 6px; padding: 0 4px; display: flex; cursor: pointer;}
.select-button > span {padding: 2px 8px; background: var(--main-sub-color); font-size: 16px; border-radius: 4px; border: 2px solid var(--main-border-color); width: 100%; display: flex; justify-content: center; color: var(--sub2-text-color);}
@keyframes slow_up {from {background: var(--main-sub-color); color: var(--sub2-text-color);} to {background: var(--main-accent-color); color: var(--sub-text-color);}}
.select-button > span:hover {background: var(--main-accent-color); color: var(--sub-text-color); animation: slow_up var(--reg-animation-speed) forwards;}
.select-button > span:active {opacity: 0.7;}

/* count */
.count-SP {display: flex; justify-content: center; margin-top: 68%;}
.wrap-count-SP {display: flex; justify-content: space-between; align-items: center; border: 2px solid var(--main-border-color); width: 50%; background: var(--main-sub-color);} 
.wrap-count-SP > * {padding: 4px 8px; font-size: 22px;}
.wrap-count-SP > p {width: 12%; user-select: none;}
.wrap-count-SP > span {font-variant-numeric: tabular-nums;}


/* Right block style */
.wrap-right-block {background: var(--main-main-color); border: 2px solid var(--main-border-color); border-radius: 4px;}
.preview:not(:last-child) {padding-bottom: 6px; border-bottom: 2px solid var(--main-sub-color);}
.preview:last-child {padding-bottom: 6px;}
/* Preview-data */
.livespan-value {color: #8cAc2c; padding: 0 2px;}
/* The left block */
.data {height: 374px; display: flex;  gap: 4px; width: 100%;}
.data-left {display: flex; flex-direction: column; gap: 1px; align-items: center;}
.image-box {border: 2px solid var(--main-border-color); display: flex; flex-direction: column; background: var(--main-sub-color); border-radius: 4px; justify-content: center; align-items: center; overflow: hidden;}
.image-box > img {width: 232px; height: 232px;}
.image-box > span {font-size: 14px; padding: 2px; border-top: 2px solid var(--main-border-color); width: 100%; justify-content: center; display: flex; }
.l-data {display: flex; justify-content: center; align-items: center; width: 236px; border-radius: 4px; text-align: center; gap: 2px;}
.l-data > span {font-size: 14px; padding: 2px; background: var(--main-sub-color); border: 2px solid var(--main-border-color); width: 100%; display: flex; justify-content: center; align-items: center; gap: 2px; height: 18px;}
.advantage .symbol-advantage {width: 24px; height: 18px; color: #4cAc4c;}
.advantage > span {background: #1c2c1c; display: flex;}
.advantage > span > * {width: 100%;}
.advantage > span > span, .flaw > span > span {font-size: 14px;}
.flaw .symbol-flaw {width: 24px; height: 18px; color: #Ac4c4c;}
.flaw > span {background: #2c1c1c; display: flex;}
.flaw > span > * {width: 100%;}
/* The right block */
.data-right {display: flex; flex-direction: column; width: 90%; height: 100%;}
.r-data {display: flex; justify-content: center; align-items: center; width: 100%; border-radius: 4px; text-align: center;}
.r-data > span > span {width: 100%;}
.r-data > span > div {width: 26%; display: flex; gap: 6px; justify-content: center; align-items: center;}
.text-data {display: flex; justify-content: end; padding-right: 10px;}
.text-data-value {display: flex; justify-content: start;}
.r-data > span {background: var(--main-sub-color); border: 2px solid var(--main-border-color); width: 100%; padding: 2px; font-size: 10px; height: var(--reg-size-preview-data);}
.small > span {display: flex; justify-content: start; align-items: center; gap: 2px; }
.large > span {height: calc(var(--reg-size-preview-data) * 4); padding: 6px 2px 0 2px; font-size: 16px;}
.grand-balance {display: none; border-radius: 4px; transition: opacity 0.2s ease;}
.grand-balance > svg {width: 20px; height: 20px;}
.plus:hover {background: #3c6c3c90;}
.plus.on {background: #3c6c3c90;}
.plus > svg {fill: #5cBc5c;}
.minus:hover {background: #6c3c3c90;}
.minus.on {background: #6c3c3c90;}
.minus > svg {fill: #Bc5c5c;}
.energy {display: flex; justify-content: start;}
.energy > span {font-weight: 600;}
.energy > div {padding-right: 12px;}
.mana > span {color: var(--reg-mana-color);}
.prana > span {color: var(--reg-prana-color);}
.faith > span {color: var(--reg-faith-color);}
.old {text-decoration: line-through; opacity: 0.5;}
.energy > .value {margin-right: 6px;}
.text-data-value {display: flex; gap: 8px;}
.text-data-value > .balanced-value {border-radius: 4px; padding: 0 2px;}
.off {opacity: 0; pointer-events: none;}
.hide {display: none;}
.show-balanced .balanced * {display: flex;}

/* Peculiarity */
.label-text-p {font-size: 14px; padding-bottom: 4px;}
.peculiarity {display: flex; width: 100%; height: 140px; justify-content: space-around; gap: 4px;}
.peculiarity > * {width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.pecul-data {width: 100%;  height: 100%; display: flex; flex-direction: column; gap: 4px;}
.pecul-el {background: var(--main-sub-color); width: 100%; height: 50%; display: flex; flex-direction: column;border-radius: 2px; position: relative; overflow: hidden;}
.pecul-el > *:not(:last-child) {padding: 4px;}
.pecul-el .label {padding-left: 16px; height: 100%; display: flex; gap: 8px; justify-content: space-between; align-items: center;}
.pecul-el .label span {font-size: 16px; font-weight: 800;}
.pecul-el:not(:has(.none)) .label .encount-label {padding: 2px 6px; border: 1px solid var(--main-border-color); border-radius: 4px;}
.pecul-left .pecul-el:not(:has(.none)) .label .encount-label {background: #3c2c2c;}
.pecul-left .pecul-el:not(:has(.none)) .label .encount-label::before {content: "- ";}
.pecul-right .pecul-el:not(:has(.none)) .label .encount-label {background: #2c3c2c;}
.pecul-right .pecul-el:not(:has(.none)) .label .encount-label::before {content: "+ ";}
.none {position: absolute; top: 28%; left: 43%; font-size: 18px; opacity: 0.5; color: #6c8c2c90;}
.hide {display: none;}
.pecul-el:has(.none) {opacity: 0.5;}
.pecul-el:not(:has(.none)) > span:last-child {display: none;}

/* Genome und shop */
.genome-und-shop {height: 154px; display: flex;}
.genome-und-shop > div {width: 100%;}
.shopped > span, .genome > span {display: flex; justify-content: center;}
/* genome */
.content-genome {display: flex; flex-direction: column; gap: 2px; height: 85%;}
.selected-genome {width: 99.5%; display: flex; gap: 2px; margin-top: 6px;}
@keyframes slow_up_text {from {color: var(--sub2-text-color); background: var(--main-sub-color);} to {color: var(--sub-text-color); background: var(--main-accent-color); opacity: 0.8;}}
.faq-genome-b:hover > svg {color: var(--sub-text-color); animation: slow_up_text var(--reg-animation-speed) forwards;}
.selected-genome > .text {background: var(--main-sub-color); width: 100%; display: flex; justify-content: center; align-items: center; border: 2px solid var(--main-border-color); height: 26px; font-size: 16px;}
.desc-genome {background: var(--main-sub-color); width: 328px; height: 84px; border: 2px solid var(--main-border-color); padding: 4px;overflow-y: scroll;}
.desc-genome::-webkit-scrollbar {width: 6px;}
.desc-genome::-webkit-scrollbar-track {background: transparent;}
.desc-genome::-webkit-scrollbar-thumb {background-color: #4f4f4f;}
.desc-genome > span {font-size: 12px;}
.genome {position: relative;}
.none-box-genome {position: absolute; top: 54%; left: 26%; font-size: 26px; opacity: 0.5; color: #6c8c2c90;}
.genome:has(.none) > *:not(:first-child) {opacity: 0.5;}
.genome:has(.none) .faq-genome-b:hover > svg {animation: none; color: var(--sub2-text-color);}
.genome:not(:has(.none)) .none-box-genome {display: none; opacity: 0;}
/* Shop */
.content-shopped {margin-top: 6px; display: grid; height: 81%; grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(1, 1fr); width: 95.5%;}
.content-shopped > li {width: 100%; display: flex;}
.content-shopped > li > span {width: 100%; display: flex; justify-content: center; align-items: center;}
.item-shop {background: var(--main-sub-color); border: 2px solid var(--main-border-color); padding: 1px 6px; border-radius: 4px; width: auto; font-size: 12px; width: 100%; opacity: 1;}
.content-shopped:empty {background: var(--main-sub-color); border: 2px solid var(--main-border-color); opacity: 0.5;}
.content-shopped:not(:empty) .none-box-shopped > span {display: none;}
.shopped {position: relative;}
.none-box-shopped {position: absolute; top: 44%; left: 25%; font-size: 26px; opacity: 0.5; color: #6c8c2c90; display: flex;}
.shopped:has(.none) > *:not(:first-child) {opacity: 0.5;}
.shopped:has(.none) .faq-genome-b:hover > svg {animation: none; color: var(--sub2-text-color);}
.shopped:not(:has(.none)) > .none-box-shopped {display: none;}
.shopped:not(:has(.none)) .clear {opacity: 0.5;}

/* Tooltips */
.tooltip {position: relative;}
.tooltip .tooltip-text {visibility: hidden; width: 210px; background: var(--reg-tooltip-color); color: var(--reg-faith-color); text-align: center; border-radius: 4px; padding: 5px; position: absolute; z-index: 1; bottom: 115%; left: 28%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; border: 2px solid var(--reg-tooltip-border-color); font-size: 12px; transition: opacity 0.2s ease-in-out 0.2s, visibility 0.3s 0.2s; user-select: none;}
.tooltip:hover .tooltip-text { visibility: visible; opacity: 1; transition-delay: 0.45s;}


/* The modal style */
#main:has(.vissible) .wrap-left-block, #main:has(.vissible) > .footer, #main:has(.vissible) .wrap-right-block {opacity: 0.25; transition: opacity 0.3s ease;}
#main:has(.vissible) .modal {opacity: 1; position: fixed;}
#main:has(.vissible) .block-background {display: block; opacity: 1;}
#main:has(.vissible) {overflow: hidden;}
#main:has(.vissible) > *:not(:has(.modal)), body:has(.vissible) .title-reg {opacity: 0.1;}
.block-background {display: none; position: absolute; width: 105%; height: 102%; z-index: 2; opacity: 0;}
.modal {position: absolute; display: none; width: 50%; height: 50%; overflow: auto; margin: auto; top: 0; left: 0; bottom: 0; right: 0; z-index: 3; background: var(--main-sub-color); border: 2px solid var(--main-border-color); border-radius: 6px; padding: 4px; opacity: 0;}
.vissible {width: 600px; height: 800px; display: flex; opacity: 1; transition: opacity 0.3s ease; flex-direction: column;}

.m-header {display: flex; height: 30px; justify-content: end; align-items: center; gap: 8px; background: var(--main-sub2-color); border-radius: 4px; padding-right: 4px; position: relative;}
.m-faq > svg, .m-close > svg {display: flex; fill: var(--sub2-text-color); width: 26px; height: 26px; padding: 1px; transition: background 0.3s ease, fill 0.3s ease;}
.m-faq:hover > svg, .m-close:hover > svg {fill: var(--sub-text-color); background: var(--main-accent-color); border-radius: 4px; padding: 1px;}

/* Modal race selector style */
.m-text, .m-text-OV, .m-text-OV span {display: flex; justify-content: center; align-items: center;}
.m-text {font-size: 20px;}
.m-text-OV, .m-text-OV span {font-size: 18px; color: var(--sub2-text-color);}
.m-text-OV span {padding-left: 6px;}
.m-body {height: 100%; padding: 10px; gap: 10px; overflow-y: scroll;}
.m-race .m-body {display: grid; grid-template-columns: repeat(2, 1fr);}
.m-body::-webkit-scrollbar {width: 6px;}
.m-body::-webkit-scrollbar-track {background: transparent;}
.m-body::-webkit-scrollbar-thumb {background-color: #4f4f4f;}
@keyframes m-race-anim {from {opacity: 0.75; outline: 2px solid #2c4c2c;} to {opacity: 1;}}
.m-race-el {height: 320px; border-radius: 4px; border: 2px solid var(--main-border-color); overflow: hidden; background: var(--main-sub2-color); opacity: 0.5; transition: opacity 0.3s ease, outline 0.3s ease, font-weight 0.3s ease;}
.m-race-el:hover {outline: 2px solid #2c8c2c; opacity: 1; animation: m-race-anim var(--reg-animation-speed) forwards;}
.m-race-el > img {width: 100%; border-bottom: 2px solid var(--main-border-color);}
.m-race-el > span {display: flex; justify-content: center; align-items: center; font-size: 20px;}
.m-race-el:hover > span {font-weight: 800;}

/* Modal genome selector style */
.m-genome .m-body {display: flex; align-items: center; justify-content: start; flex-direction: column;}
.m-genome-el {width: 98%; border-radius: 4px; position: relative; z-index: 0; display: flex; flex-direction: column;}
.m-genome-el:last-child {justify-content: center;}
.m-genome-el .header {height: 28px; padding: 4px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--main-border-color); background: var(--main-sub2-color); border: 2px solid var(--main-border-color);}
.m-genome-el .header span {font-variant-numeric: tabular-nums; font-size: 20px;}
.m-genome-el .header .buy {padding: 1px 8px; transition: background 0.3s ease, fill 0.3s ease; background: #2c4c2c90; border-radius: 4px; border: 1px solid var(--main-border-color);}
.m-genome-el .header .buy:hover {background: #2c5c2c;}
.m-genome-el .header .buy:active {background: #2c5c2c90; padding: 0px 9px;}
.m-genome-el .header:has(.off) .buy {background: var(--main-sub-color);}
.m-genome-el .header:has(.taked) .buy {background: var(--main-accent-color);}
.m-genome-el .text {padding: 6px; min-height: 20px; background: var(--main-sub2-color); border: 2px solid var(--main-border-color); border-top: none; border-bottom: none;}
.m-genome-el .footer {height: 26px; border-top: 1px solid var(--main-border-color); display: flex; justify-content: end; align-items: center; padding: 4px 12px; flex-direction: row; background: var(--main-sub-color);  border: 2px solid var(--main-border-color);}
.m-genome-el .footer svg {width: 26px; height: 26px; padding: 2px 2px; fill: var(--sub2-text-color); display: flex; justify-content: start; align-items: start; transition: transform 0.3s ease;}
.m-genome-el .footer:not(:has(.active)) svg {transform: rotate(180deg);}
.m-genome-el .footer svg .active {transform: rotate(0deg);}
/* .m-genome-el .footer:hover svg {background: var(--main-accent-color); border-radius: 4px;} */
.m-genome-el .sub-data {opacity: 0; max-height: 0; z-index: -2; width: 96%; background: var(--main-sub2-color); border-top: none; transition: transform 0.25s ease, opacity 0.25s ease, max-height 0.25s ease; transform: translateY(-10px); border: 2px solid var(--main-border-color); position: relative; padding: 4px; border-top: none; left: 1%; overflow: hidden;}
.m-genome-el .sub-data.show {opacity: 1; max-height: 300px; transform: translateY(0);}
.m-genome-el .sub-data ol {padding-top: 4px; display: flex; width: 100%; gap: 3px; flex-direction: column;}
.m-genome-el .sub-data ol li {display: flex; align-items: center; justify-content: center; width: 100%; background: var(--main-sub-color); border: 1px solid var(--main-border-color); text-align: center; padding: 4px 0;}
.m-genome-el .sub-data ol li span {display: flex; align-items: center; font-size: 14px;}

/* Traits select */
.m-pecul .m-body {display: flex; flex-direction: column; align-items: center; overflow-y: scroll; overflow-x: hidden;}
.m-pecul-el {width: 100%; position: relative; display: flex; align-items: center; flex-direction: column;}
.m-pecul .m-body .box-select-trait {display: flex; min-height: 30px; width: 97%; background: var(--main-sub2-color); border-radius: 4px; border: 2px solid var(--main-border-color); overflow: hidden; }
.box-select-trait span {font-size: 16px;}
.box-select-trait .details {display: flex; justify-content: center; align-items: center; width: 40px; height: 100%; background: var(--main-sub-color); transition: background 0.3s ease;}
.box-select-trait .details:hover {background: var(--main-sub2-color);}
.box-select-trait svg {width: 36px; height: 36px; fill: var(--sub2-text-color); transition: fill 0.2s ease, transform 0.4s ease; rotate: 180deg;}
.box-select-trait .active svg {transform: rotate(180deg);}
.box-select-trait .details:hover svg {fill: var(--sub-text-color);}
.good-traits, .bad-traits {width: 100%; height: 100%; padding: 8px 14px; display: flex;}
.good-traits span {text-align: start;}
.bad-traits span {text-align: end;}
.good-traits {background: #2c5c2c; justify-content: start; border-right: 1px solid var(--main-border-color); transition: background 0.2s ease;}
.good-traits:hover {background: #2c8c2c;}
.bad-traits {background: #5c2c2c; justify-content: end; border-left: 1px solid var(--main-border-color); transition: background 0.2s ease;}
.bad-traits:hover {background: #8c2c2c;}
.traits-baff {display: flex; opacity: 0; width: 96%; justify-content: center; max-height: 0; transition: max-height 0.3s ease, opacity 0.3s ease; overflow: hidden;}
.traits-baff ol {min-width: 48%; display: flex; flex-direction: column; align-items: center; background: var(--main-sub2-color); border: 1px solid var(--main-border-color); border-top: none; gap: 2px; padding: 4px;}
.traits-baff span {font-size: 12px; padding: 2px; text-align: center;}
.traits-baff li {background: var(--main-sub-color); width: 100%; display: flex; justify-content: center; border: 1px solid var(--main-border-color);}
.open-t {opacity: 1; max-height: 300px;}
.traits-prices {background: var(--main-sub2-color); width: 95.1%; display: flex; justify-content: space-between;  border: 1px solid var(--main-border-color); border-top: none;}
.traits-prices .left {color: #Ac2c2c; border-right: 1px solid var(--main-border-color); background: #28202090}
.traits-prices .right {color: #2cAc2c; border-left: 1px solid var(--main-border-color); background: #20282090}
.traits-prices span {font-size: 14px; padding: 2px 36px; font-weight: 800; font-variant-numeric: tabular-nums;}
.m-pecul-el .taked {background: #3c4c5c;}
.m-pecul-el .taked:hover {background: #6c4c4c;}
.m-pecul-el .droped {background: #2c2c2c;}
.m-pecul-el .droped:hover {background: #2c2c2c;}


/* Modal shop */
.m-shop .m-body {overflow-y: scroll; overflow-x: hidden; display: flex; justify-content: start; align-items: center; flex-direction: column;}
.m-shop .m-body {height: 100%; width: 580px; gap: 8px;}
.slots {display: flex; gap: 4px; height: 40px; width: 100%; justify-content: center; align-items: end;}
.slots span {font-size: 18px;}
.slots > * {padding: 3px 16px; border: 1px solid var(--main-border-color); border-radius: 4px; transition: background 0.3s ease; width: 100%; display: flex; justify-content: center; background: var(--main-sub2-color);}
.slots .active {background-color: #1c3c3c;}
.slots > *:hover {background-color: #1c3c3c;}
.m-shop-el {display: flex; justify-content: center; flex-direction: column; align-items: center; width: 100%;}
.m-shop-el .header {display: flex; justify-content: space-between; align-items: center; background: var(--main-sub2-color); width: 96%; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--main-border-color);}
.m-shop-el .header * {display: flex; align-content: center; gap: 4px;;}
.m-shop-el .header * > span {font-size: 16px;}
.m-shop-el .header .name {display: flex; align-items: center; justify-content: center;}
.m-shop-el .sub-info-button {padding-left: 8px; display: flex; align-items: center;}
.m-shop-el .buy-button {padding: 2px 8px; background: #2c4c2c; border: 1px solid var(--main-border-color); border-radius: 4px; transition: background 0.3s ease;}
.m-shop-el .buy-button:hover:not(.deactive):not(.taked) {background: #2c6c2c;}
.m-shop-el .price {padding: 2px 8px; background: var(--main-sub-color); border: 1px solid var(--main-border-color); border-radius: 4px; font-weight: 800;}
.m-shop-el .sub-info-button svg {width: 24px; height: 24px; fill: var(--sub2-text-color); display: flex; transform: rotate(180deg); transition: transform 0.4s ease, fill 0.3s ease;}
.m-shop-el .sub-info-button svg:hover {fill: var(--sub-text-color);}
.m-shop-el .open svg {transform: rotate(0deg);}
.m-shop-el .sub-info {display: flex; justify-content: center;background: var(--main-sub2-color); width: 92%; padding: 4px 8px;  border: 1px solid var(--main-border-color); border-top: none; opacity: 0; max-height: 0; transition: opacity 0.3s ease, max-height 0.3s ease; overflow: hidden;}
.m-shop-el .sub-info > span {background: var(--main-sub-color); padding: 2px 4px; border: 1px solid  var(--main-border-color); border-radius: 4px; font-size: 14px; width: 100%; pointer-events: none;}
.m-shop-el .show {opacity: 1; max-height: 300px;}
.m-shop-el .deactive {background: var(--main-sub-color);}
.m-shop-el .taked {background: #3c4c5c;}
.m-shop-el .taked:hover {background: #5c3c3c;}

/* End */
.m-accept-reg {height: 180px; width: 440px; padding: 2px; align-items: center; justify-content: center; overflow: hidden;}
.m-accept-reg .warning {text-align: center; padding: 8px; display: flex; flex-direction: column;}
.m-accept-reg .warning span:first-child {font-size: 22px;}
.m-accept-reg .warning span:not(:first-child) {font-size: 16px; color: var(--sub2-text-color);}
.m-accept-reg .select {display: flex; flex-direction: row; padding: 8px; justify-content: space-around; align-items: center; height: 100%;}
.end-reg, .deciline-reg {padding: 4px 28px; border-radius: 8px; border: 1px solid var(--main-border-color); transition: background 0.3s ease;}
.end-reg {background: #1c5c1c90;}
.end-reg:hover {background: #2c5c2cF0;}
.deciline-reg {background: #5c1c1c90;}
.deciline-reg:hover {background: #5c2c2cF0;}
.end-reg span {font-size: 26px;}
.deciline-reg span {font-size: 26px;} 


/* Sended button und  */
.footer {display: flex; flex-direction: column; align-items: center; gap: 2px; padding-bottom: 12px; position: relative;}
.send-data {padding: 4px; border-radius: 4px; border: 2px solid var(--main-border-color); background: var(--main-sub-color);}
.UID {color: var(--sub-text-color); font-variant-numeric: tabular-nums;}
.send-data:hover {background: var(--main-hover-color);}
.footer:has(.end) .send-data:active {background: #3c4c3c;}
.footer:not(:has(.end)) .send-data {opacity: 0.35; pointer-events: none;}