@import url('./button.css');
@import url('./table.css');

/* Импорт локальных шрифтов */
@font-face {
    font-family: 'Rubik-Regular';
    src: url('../fonts/Rubik-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Rubik-Bold';
    src: url('../fonts/Rubik-Bold.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Rubik-Regular';
    font-size: 22.5px;
    color: #767676;
    outline: none;
    overflow: hidden;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23e5e5e5' fill-opacity='1'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Центрирование приложения */
main {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Размер приложения */
section {
    position: relative;
    max-width: 850px;
    min-width: 850px;
    background-color: #f5f5f5;
    border: 1.5px solid #d1d1d1;
    border-radius: 15px;
    padding: 5.3px;
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.15);
}

div {
    font-family: 'Rubik-Regular';
    display: grid;
    justify-content: center;
    text-decoration: none;
    text-align: center;
}

.panel-one {
    display: grid;
    text-align: center;
    grid-template-columns: 1fr;
}
.panel-two {
    display: grid;
    text-align: center;
    grid-template-columns: 1fr 1fr;
}
.panel-three {
    display: grid;
    text-align: center;
    grid-template-columns: 1fr 1fr 1fr;
}
.panel-four {
    display: grid;
    text-align: center;
    grid-template-columns: 28% 28% 28% 16%;
}

.panel-slider {
    display: grid;
    text-align: center;
    grid-template-columns: 12.5% 75% 12.5%;
}

.panel-link {
    display: grid;
    text-align: center;
    grid-template-columns: 77.5% 22.5%;
}

.panel-about {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 30px;
}

.panel-items {
    display: grid;
    grid-template-columns: auto 28px auto 28px auto 28px auto 28px auto 28px auto 28px auto;
}

.panel-items-grow {
    display: grid;
    grid-template-columns: auto 28px auto 28px auto 28px auto 28px auto 28px auto 28px auto 28px auto;
}

.item-about {
    font-size: 72%;
    align-self: center;
    color: #c0c0c0;
}

.separator-about {
    margin: 0px;
    color: #e6e6e6;
}

.panel-note {
    display: grid;
    text-align: center;
    grid-template-columns: 22.5% 77.5%;
}

.border {
    border: 1.5px solid #d1d1d1;
    background-color: #ededed;
    border-radius: 10px;
    margin: 5.3px;
    padding: 15px;
}

.num {
    font-family: 'Rubik-Bold';
    font-size: 300%;
    padding: 15px;
}

.green {
    color: #ffffff;
    background-color: #22c55e;
    border-color: #22c55e;
}

.blue {
    color: #ffffff;
    background-color: #38bdf8;
    border-color: #38bdf8;
}
.red {
    color: #ffffff;
    background-color: #f97316;
    border-color: #f97316;
}

.logo {
    cursor: default;
}

.disabled,
#billField:disabled {
    color: #cecece;
}

#output {
    font-size: 90%;
}
#currency {
    font-size: 90%;
}

#billField {
    background-color: #ededed;
    font-size: 90%;
    text-align: center;
    outline: none;
}