.cp_tile-calculator {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin-bottom: 20px;
}

.cp_tile-calculator__button {
    position: relative;

    width: fit-content;

    color: var(--brand-color);
    cursor: pointer;
}

.cp_tile-calculator__button[data-tooltip="true"]:before {
    content: attr(data-tooltip-text);
    position: absolute;
    z-index: 1;

    width: 290px;
    padding: 10px 5px;
    top: 50%;
    left: -10px;
    transform: translateX(-100%) translateY(-50%);

    color: var(--accent-color);
    text-align: center;
    line-height: normal;

    border-radius: 6px;
    border: 2px solid var(--accent-color);
    background: var(--brand-color);
    box-shadow: 3px 3px 10px 0 rgb(0 0 0 / 0.3);
}

.cp_tile-calculator__button[data-tooltip="true"]:after {
    content: "";
    position: absolute;
    z-index: 1;

    top: 50%;
    left: 0;
    margin-left: -10px;
    border-width: 7px;
    transform: translateY(-6px);

    border-style: solid;
    border-color: transparent transparent transparent var(--accent-color);
}

.cp_tile-calculator__body {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
}

.cp_tile-calculator__info {
    flex: 1 1 100%;

    color: var(--brand-color);
    line-height: normal;
    font-size: 13px;
    cursor: pointer;
}

.cp_tile-calculator__info:hover {
    text-decoration: underline;
}

.cp_tile-calculator__element {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    width: fit-content;

    color: #666;
    font-size: 13px;
}

.cp_tile-calculator__input {
    max-width: 122px;
    background: #f3f3f5;
    border: none;
    border-radius: 2px;
    color: #666;
    height: 38px;
    font-size: 13px;
    padding: 8px 13px 7px;
    outline: none;
    text-align: center;
}

/* Chrome, Safari, Edge, Opera */
.cp_tile-calculator__input::-webkit-outer-spin-button,
.cp_tile-calculator__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.cp_tile-calculator__input[type=number] {
    -moz-appearance: textfield;
}

.cp_tile-calculator-reverse {
    display: flex;
    gap: 7px;
}

.cp_tile-calculator-reserve__input {
    display: none;
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.cp_tile-calculator-reserve__label {
    width: 38px;
    height: 38px;
    margin: 0;

    cursor: pointer;

    background-color: #fff;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;

    -webkit-transition: background .3s ease;
    transition: background .3s ease;

}

.cp_tile-calculator-reserve__label--straight {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%23c4c4c4'%3E %3Cpath d='M1 1h16v16H1zM1 17h16v16H1zM1 33h16v16H1zM17 1h16v16H17zM17 17h16v16H17zM17 33h16v16H17zM33 1h16v16H33zM33 17h16v16H33zM33 33h16v16H33z'/%3E %3C/svg%3E");
}

.cp_tile-calculator-reserve__input:checked + .cp_tile-calculator-reserve__label--straight {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%232e3092'%3E %3Cpath d='M1 1h16v16H1zM1 17h16v16H1zM1 33h16v16H1zM17 1h16v16H17zM17 17h16v16H17zM17 33h16v16H17zM33 1h16v16H33zM33 17h16v16H33zM33 33h16v16H33z'/%3E %3C/svg%3E");
}

.cp_tile-calculator-reserve__label--diagonal {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%23c4c4c4'%3E %3Cmask id='a' maskUnits='userSpaceOnUse' x='1' y='1' width='48' height='48'%3E %3Cpath fill='%23C4C4C4' d='M1 1h48v48H1z'/%3E %3C/mask%3E %3Cg mask='url(%23a)' fill='%23fff' stroke-width='1.0386'%3E %3Cpath d='M-21.999 25.0001l11.75-11.75 11.75 11.75-11.75 11.75z'/%3E %3Cpath d='M-10.2505 36.75L1.4995 25l11.75 11.75-11.75 11.75zM1.5 48.5l11.75-11.75L25 48.5 13.25 60.25z'/%3E %3Cpath d='M13.2495 60.2501l11.75-11.75 11.75 11.75-11.75 11.75zM-10.2505 13.25L1.4995 1.5l11.75 11.75L1.4995 25zM1.5 25l11.75-11.75L25 25 13.25 36.75z'/%3E %3Cpath d='M13.2495 36.75L24.9995 25l11.75 11.75-11.75 11.75zM25 48.5l11.75-11.75L48.5 48.5 36.75 60.25zM1.5 1.5l11.75-11.75L25 1.5 13.25 13.25z'/%3E %3Cpath d='M13.2495-10.25L24.9995-22l11.75 11.75-11.75 11.75zM13.2495 13.25l11.75-11.75 11.75 11.75L24.9995 25zM25 1.5l11.75-11.75L48.5 1.5 36.75 13.25zM25 25l11.75-11.75L48.5 25 36.75 36.75z'/%3E %3Cpath d='M36.7495 36.75L48.4995 25l11.75 11.75-11.75 11.75zM36.7495 13.25l11.75-11.75 11.75 11.75L48.4995 25zM48.5 25l11.75-11.75L72 25 60.25 36.75z'/%3E %3C/g%3E %3Cpath d='M1 1h48v48H1z'/%3E %3C/svg%3E");
}

.cp_tile-calculator-reserve__input:checked + .cp_tile-calculator-reserve__label--diagonal {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%232e3092'%3E %3Cmask id='a' maskUnits='userSpaceOnUse' x='1' y='1' width='48' height='48'%3E %3Cpath fill='%23C4C4C4' d='M1 1h48v48H1z'/%3E %3C/mask%3E %3Cg mask='url(%23a)' fill='%23fff' stroke-width='1.0386'%3E %3Cpath d='M-21.999 25.0001l11.75-11.75 11.75 11.75-11.75 11.75z'/%3E %3Cpath d='M-10.2505 36.75L1.4995 25l11.75 11.75-11.75 11.75zM1.5 48.5l11.75-11.75L25 48.5 13.25 60.25z'/%3E %3Cpath d='M13.2495 60.2501l11.75-11.75 11.75 11.75-11.75 11.75zM-10.2505 13.25L1.4995 1.5l11.75 11.75L1.4995 25zM1.5 25l11.75-11.75L25 25 13.25 36.75z'/%3E %3Cpath d='M13.2495 36.75L24.9995 25l11.75 11.75-11.75 11.75zM25 48.5l11.75-11.75L48.5 48.5 36.75 60.25zM1.5 1.5l11.75-11.75L25 1.5 13.25 13.25z'/%3E %3Cpath d='M13.2495-10.25L24.9995-22l11.75 11.75-11.75 11.75zM13.2495 13.25l11.75-11.75 11.75 11.75L24.9995 25zM25 1.5l11.75-11.75L48.5 1.5 36.75 13.25zM25 25l11.75-11.75L48.5 25 36.75 36.75z'/%3E %3Cpath d='M36.7495 36.75L48.4995 25l11.75 11.75-11.75 11.75zM36.7495 13.25l11.75-11.75 11.75 11.75L48.4995 25zM48.5 25l11.75-11.75L72 25 60.25 36.75z'/%3E %3C/g%3E %3Cpath d='M1 1h48v48H1z'/%3E %3C/svg%3E");
}

.add_mistake {
    margin-top: 15px;
}

@media (max-width: 460px) {
    .add_mistake .btn {
        overflow: visible;
        width: 100%;
        text-wrap: wrap;
    }
}