/* Mobile */

#my-kol-label,
#my-x-size-label,
#my-y-size-label {
    display: none;
}


@media (max-width: 1069px) {
    html {
        height: auto;
    }
    #head-menu {
        margin-top: 0;
    }
    #left-head-logo img{
        width: 165px;
        height: 90px;
    }
    .background {
        position: inherit;
    }
    #content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 60px;
        margin-top: 180px;
    }
    #main,
    #head-menu,
    #footer,
    #content {
        width: 100% !important;
        height: auto !important;
    }
    #buy,
    #create {
        width: 80%;
        height: auto;
        aspect-ratio: 1;
        margin-left: 0;
        margin-top: 0;
    }
    #buy {
        margin-top: 20%;
    }
    #center-block {
        margin-top: 0;
    }
    #right-head-info-blue-button {
        margin-right: 10px;
        margin-top: 0;
    }
    #top-header {
        width: auto;
        margin-right: 0;
        margin-top: 0;
        float: none;
        justify-self: center;
    }
    #right-buttons {
        margin-right: 10px;
        margin-top: -144px;
        width: 120px;
        font-size: 12px;
    }
    .button.callback {
        width: 100%;
    }

    #main #text-desc #left-head-bottom-text1,
    #main #text-desc #left-head-bottom-text2 {
        font-size: 30px;
    }
    #top-header h1,
    #top-header h1 strong {
        font-size: 35px;
    }
    #create h2 strong,
    #buy h2 strong {
        display: inline;
    }
    #create h2 strong::after,
    #buy h2 strong::after {
        content:"\a";
        white-space: pre;
    }
    
    #right-head-info2,
    #right-head-info1 {
        display: none;
    }
    #text-desc {
        display: none;
    }
    #left-head-logo {
        margin-top: 0;
        margin-left: 10px;
    }

    a:has(div.button.ask) {
        display: none;
    }
    .right-arrow {
        display: none !important;
    }
    #buy-footer,
    #buy-top {
        width: auto;
    }

    #buy-footer-right {
        margin: 10px;
    }

    #center-block {
        background-color: #1691cc;
        border-radius: 20px;
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
        padding: 20px;
    }
    #buy,
    #create {
        border-radius: 20px;
    }

    #create-main {
        width: auto;
    }
    #create-main-right {
        margin-right: 10px;
    }

    .box-bottom.right {
        margin-bottom: 20px;
    }
    #action-text-head {
        right: -31px;
    }
    #create-main-left,
    #buy-top-right,
    #buy-footer-left {
        width: 30%;
        /* aspect-ratio: 1; */
        height: auto;
        align-items: center;
        display: flex;
    }
    #create-main-left img,
    #buy-top-right img,
    #buy-footer-left img {
        width: 100%;
        height: 40%;
    }

    #footer {
        display: flex;
        flex-direction: column;
    }
    #left-footer {
        padding-top: 0;
        margin-top: 10px;
        margin-left: 0;
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }
    #right-footer {
        float: none;
        width: 100%;
        height: 100%;
        margin-top: 0;
        text-align: center;
    }

    .contact-form {
        width: 80%;
    }
    .featherlight-content{
        width: 90%;
    }
    .contact-form.featherlight-inner > div {
        margin-bottom: 20px;
    }

    figure.table {
        margin-left: -20px;
    }

    .contacts-content .org-card{
        font-size: 15px;
    }

    /* Flagi pages */
    #flag-rossii,
    #flag-rossii-other {
        width: 90%;
        height: auto;
        margin-left: 0;
        border-radius: 20px;
    }
    #flag-rossii h2,
    #flag-rossii-other h2 {
        font-size: 32px;
    }
    #auto-flag-v-tomske {
        margin-right: 0;
    }
    #auto-flag-russia,
    #auto-flag-tomsk,
    #auto-flag-other {
        width: 100%;
        margin-top: 0;
        float: none;
        margin-right: 0;
        justify-items: center;
    }

    #under-table-other {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
    }
    
    #under-table-other #result-text.float-left1 {
        margin-top: 0 !important;
    }
    #under-table-other #result-my-text.float-left2 {
        margin-top: 15px !important;
    }

    #under-table-other .my-size-border {
        border: 2px solid gray;
        padding: 10px;
    }
    #under-table-other h3 {
        margin: 1px;
    }
    #under-table-other #my-size {
        width: 90%;
        display: flex;
        padding: 2px;
        align-items: flex-start;
        gap: 5px;
        flex-direction: column;
    }
    #my-kol-label,
    #my-x-size-label,
    #my-y-size-label {
        display: inline;
    }

    .button-other-blue {
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 24 24'><rect x='0' fill='none' width='24' height='24'/><g><path d='M18.36 19.78L12 13.41l-6.36 6.37-1.42-1.42L10.59 12 4.22 5.64l1.42-1.42L12 10.59l6.36-6.36 1.41 1.41L13.41 12l6.36 6.36z'/></g></svg>"); 
        background-repeat:no-repeat;
        background-position:center center;
        background-size: 100% 100%, auto;
    }
    .button-other-blue img {
        display: none;
    }
    .my-size-block-div {
        text-align: center;
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }
    #under-table-other #my-size > a {
        width: 100%;
    }
    #under-table-other div.button {
        margin-left: 10px;
        width: 33px;
        float: right !important;
    }
    #buy-button-other {
        background-color: #cccccc;
    }
    #under-table-other .under-span {
        display: none;
    }
    #under-table div.all-buy {
        margin-left: 17%;
    }

    #common-buy {
        align-self: center;
        float: none;
    }
    #sort-flag{
        width: 80%;
    }

    #list {
        width: 90%;
        margin-left: 20px !important;
        margin-bottom: 50px;
    }
    #action-text-head {
        width: 200px;
    }

    /* Адаптивные стили для таблиц флагов */
    .flag-table {
        font-size: 16px;
        margin-bottom: 20px;
        display: block;
    }
    
    tr.column-names th {
        writing-mode: vertical-lr;
    }
    
    .flag-table thead {
        display: none;
    }

    /* Табличка флагов */
    .up_down-arrows {
        display: none;
    }
    .kolich {
        width: 25px;
        align-self: center;
        margin-top: 4px;
    }
    .flag-table td.td-razmer,
    .flag-table th.td-razmer {
        width: 120px;
    }
    .flag-table td.td-button,
    .flag-table th.td-button {
        width: 50px;
    }
    .flag-table td.td-itogo,
    .flag-table td.td-itogo-blue{
        width: 100px;
        display: table-cell !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .td-kol {
        padding-bottom: 1em !important;
        padding-top: 1em !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .td-kol .plus-minus-buttons {
        display: flex;
        flex-direction: column-reverse;
    }
    .td-kol .plus-minus-buttons button {
        border: 1px solid black;
    }
    
    .td-kol .plus-minus-buttons button:focus {
        background-color: #00a0e3;
    }

    .buy-span {
        display: none;
    }
    td.td-button .buy-button,
    td.td-button .buy-button-blue{
        width: 30px;
        border: 2px solid gray;
        justify-self: center;
    }
    td.td-button .buy-button {
        background-color: #cccccc;
    }
    .flag-table td.td-button {
        background-color: transparent;
    }

    #buy-button-other {
        border: 2px solid gray;
    }

    /**/

    #layout-tree.background,
    #layout-main.background {
        display: none;
    }

    .background {
        background-image: url('/images/background-grad-4.png');
        background-repeat: no-repeat;
        background-size: cover;

    }

    .button.callback img {
        margin: 2px;

    }
    .button.callback span {
        margin: 1px;
    }

    #my-x-size-value,
    .size-input {
        width: 80px;
        height: 25px;
    }
    
    
    
}