#minidelivery { position: relative; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; overflow: auto; margin: 10px; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" on; width: 95%; } #minidelivery .agreement { margin-top: 1em; font-size: .7em; color: rgba(155,155,155,.4); } #minidelivery .agreement a{ color: rgba(155,155,155,.4); } #minidelivery * { margin: 0; padding: 0; box-sizing: border-box; font-family:Roboto !important; } #minidelivery .invoice-result{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 80vh; width: 100%; } #minidelivery .invoice-actions{ margin-top: 20px !important; display: flex; flex-direction: row; justify-content: space-around; align-items: center; } #minidelivery .invoice-actions button{ font-size: 1.2em !important; margin: 10px !important; } #minidelivery .error-container{ width: auto; height: 100%; margin: auto; display: flex; flex-direction: column; justify-content: space-around; height: 90vh; } #minidelivery .error-message{ font-weight: 600; font-size: 2rem; align-self: center; text-align: center; } #minidelivery .loading-container{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 90vh; } #minidelivery .carbis-footer{ font-size: 11px; font-weight: 200; color: #888; /*background-color: silver;*/ width: 100%; height: auto; margin-top: 20px !important; margin-bottom: 10px !important; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 10px !important; } #minidelivery .info-block a { font-weight: 200; color: #888; text-decoration: none; } #minidelivery .lds-facebook { display: inline-block; position: relative; width: 80px; height: 80px; align-self: center; } #minidelivery .lds-facebook div { display: inline-block; position: absolute; left: 8px; width: 16px; background-color: #f39c12; animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite; } #minidelivery .lds-facebook div:nth-child(1) { left: 8px; animation-delay: -0.24s; } #minidelivery .lds-facebook div:nth-child(2) { left: 32px; animation-delay: -0.12s; } #minidelivery .lds-facebook div:nth-child(3) { left: 56px; animation-delay: 0; } @keyframes lds-facebook { 0% { top: 8px; height: 64px; } 50%, 100% { top: 24px; height: 32px; } } #minidelivery .menu-head{ position: absolute; padding: 10px; line-height: 2em; left: 0px; top:0; background: background-color:#fd2e2e !important; display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; z-index: 3; } #minidelivery .fixed{ position: fixed; width: 100%; top:0; } #minideilvery .cart-widget{ position: relative; } #minidelivery .cart-widget-button{ margin: 2px ; padding: 5px 8px; line-height: 1em; font-size: 1em; background-color: #fefefe; text-decoration: none; color: black; white-space: nowrap; height: 3em; border:none; outline: none; cursor: pointer; } #minidelivery .cart-widget-button svg{ height: 90%; width: auto; } #minidelivery .cart-widget-window{ position: absolute; top: 10px; right: 10px; width: 660px; height: auto; background-color: #fefefe; padding: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.5); } #minidelivery .cart-widget-actions { display: flex; flex-direction: row; justify-content: space-around; align-items: center; margin-bottom: 10px; } #minidelivery .cart-widget-window button{ outline: none; border: none; /*background-color: #fefefe;*/ padding: 10px; border-radius: 8px; line-height: 1em; height: 45px; } #minidelivery .cart-widget-window .apply:hover{ background-color: #27ae60; color: #fefefe; } #minidelivery .cart-widget-window .deny:hover{ background-color: #c0392b; color: #27ae60; } #minidelivery .cart-widget-window ul { max-height: 60vh; overflow-y: auto; } #minidelivery .cart-widget-window li { display: flex; flex-direction: row; justify-content: space-around; align-items: center; align-self: center; margin:auto; list-style: none; margin-bottom: 8px; } #minidelivery .cart-widget-window span { flex-grow: 3; width: 100% } #minidelivery .menu-categories { height: auto; z-index: 1000; } #minidelivery .menu-categories li { display: inline-block; } #minidelivery .checkview { margin-top: 10px; width: auto; } #minidelivery .checkview table { width: 100%; } #minidelivery .menu-category-link{ margin: 2px ; padding: 5px 8px; background-color: #27ae60; text-decoration: none; line-height: 1em; color: black; display: inline-block; white-space: nowrap; } #minidelivery .menu-category-link:hover{ background-color: #27ae60; } #minidelivery .check-data tr td{ font-weight: 600; white-space: nowrap; } #minidelivery .guest-container{ position: relative; display: flex; flex-direction: column; justify-content: space-between; padding-top: 10px; width: 80%; } #minidelivery .guest-row-block { display: flex; flex-direction: row; justify-content: space-between; } #minidelivery .guest-input-block{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; margin-top: 1.5em; } #minidelivery .form__input { font-family: inherit; color: #27ae60; font-size: 1rem; margin: 0 10px; padding: 10px 15px; border-radius: 0.2rem; /*background-color: rgb(255, 255, 255);*/ border: none; width: 100%; display: flex; border-bottom: 0.3rem solid transparent; transition: all 0.3s; border-bottom: 2px solid silver; outline: none; } #minidelivery .form__input:focus { border-bottom: 2px solid black; } #minidelivery .form__input:invalid { border-bottom: 2px solid red; } #minidelivery hr{ margin-bottom: 5px; } #minidelivery h1{ margin-top: 10px; } #minidelivery .radio { padding-left: 10px; cursor: pointer; } #minidelivery .radio input { opacity: 0; position: absolute; } #minideluvery .radio-label{ cursor: pointer; } #minidelivery .radio input[type="radio"] + .radio-label:before { margin: auto; content: ''; background: #f4f4f4; border-radius: 100%; border: 1px solid #b4b4b4; display: inline-block; width: 1.4em; height: 1.4em; position: relative; top: -0.2em; margin-right: 1em; vertical-align: top; cursor: pointer; text-align: center; -webkit-transition: all 250ms ease; transition: all 250ms ease; } #minidelivery .radio input[type="radio"]:checked + .radio-label:before { background-color: black; box-shadow: inset 0 0 0 4px #f4f4f4; } #minidelivery .radio input[type="radio"]:focus + .radio-label:before { outline: none; border-color: black; } #minidelivery .radio input[type="radio"]:disabled + .radio-label:before { box-shadow: inset 0 0 0 4px #f4f4f4; border-color: #b4b4b4; background: #b4b4b4; } #minidelivery .radio input[type="radio"] + .radio-label:empty:before { margin-right: 0; } #minidelivery .menu-items-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) ); grid-gap: 5px; } #minidelivery .menu-item { background-color: #fefefe; display: flex; flex-direction: column; justify-content: top; align-items: center; width: 250px; min-width: 250px; min-height: 300px; margin: 0 auto; padding: 10px; position: relative; z-index: 1; border-radius: 5px; box-shadow: 0 0 2px rgba(0,0,0,0.5); transition: all 0.2s ease; } #minidelivery .menu-item:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.5); } #minidelivery .menu-item-image-container { align-self: center; max-height: 150px; margin: 0; } #minidelivery .menu-item-image-container img { height: auto; max-height: 150px; max-width: 230px; border-radius: 999px; } #minidelivery .menu-item-name{ font-size: 1.2rem; font-weight: 300; margin: 10px; max-width: calc(100% - 10px); overflow-wrap: break-word; /* не поддерживает IE, Firefox; является копией word-wrap */ word-wrap: break-word; word-break: keep-all; /* не поддерживает Opera12.14, значение keep-all не поддерживается IE, Chrome */ line-break: auto; /* нет поддержки для русского языка */ hyphens: manual; /* значение auto не поддерживается Chrome */ text-align: center; min-height: 3.3em; } #minidelivery .menu-item-price{ font-size: 1.2rem; font-weight: 300; margin: 10px; max-width: calc(100% - 10px); overflow-wrap: break-word; /* не поддерживает IE, Firefox; является копией word-wrap */ word-wrap: break-word; word-break: keep-all; /* не поддерживает Opera12.14, значение keep-all не поддерживается IE, Chrome */ line-break: auto; /* нет поддержки для русского языка */ hyphens: manual; /* значение auto не поддерживается Chrome */ text-align: center; } #minidelivery .menu-item-recipe{ max-width: 230px; white-space: pre-line; text-overflow: ellipsis; overflow: hidden; margin: 8px 0; z-index: 2; background-color: white; } #minidelivery .menu-item-footer { z-index: 2; /*display: flex;*/ flex-direction: row; justify-content: space-between; position: relative; bottom: 10px; width: 100%; padding: 10px; display: none; } #minidelivery .menu-item-hover{ position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 2; background-color: white; border-radius: 5px; padding-bottom: 10px; display: flex; opacity: 0; flex-direction: column; justify-content: space-between; align-items: center; transition: opacity 0.1s ease ; } #minidelivery .exceptor{ display: none; } #minidelivery .menu-item:hover .exceptor:not(:empty) + .menu-item-hover{ display: flex; opacity: 1; height: 100%; } #minidelivery .menu-item:hover .exceptor:not(:empty) + .menu-item-hover > .menu-item-footer{ display: flex; } #minidelivery .deliveryzone{ box-sizing: border-box !important; position: relative; width: 100%; margin: 0 10px; padding: 5px; border-radius: .2rem; display: block; flex-direction: column !important; justify-content: flex-start; align-items: flex-start; } #minidelivery .deliveryzone pre{ white-space: pre-line; } @media (max-width: 542px){ #minidelivery .menu-item { width: 100%; display: flex; flex-direction: row; justify-content: left; min-height: 150px; max-height: 180px; /*height: auto;*/ font-size: 1.3em !important; } #minidelivery .menu-item-image-container { width: 40%; margin: auto 0; } #minidelivery .menu-item img { height: auto; width: 100%; } #minidelivery .menu-item > .menu-item-name { display: none; } #minidelivery .menu-item > .menu-item-spin { display: none; } #minidelivery .menu-item-hover { display: flex; opacity: 1; height: 100%; width: 60%; left: 40%; font-size: inherit; } #minidelivery .menu-item-hover .menu-item-name { /*white-space: nowrap;*/ font-size: .9em !important; margin: 3px 3px 3px 3px; } #minidelivery .menu-item-recipe { display: none; } #minidelivery .menu-item-footer { display: flex; flex-direction: column; align-items: center; } } #minidelivery .menu-item-spin { display: flex; flex-direction: row; justify-content: space-around; align-items: center; font-weight: 500; font-size: 1.1em; width: 100%; padding: auto; } #minidelivery .button-container{ /*background-color: #ecf0f1;*/ background-color: #Dce0e1; border-radius: 10px; white-space: nowrap; } #minidelivery .sum-container{ opacity: 0; margin-right: 20px; } #minidelivery .spin-button { outline: none; cursor: pointer; background-color: #ecf0f1; border:none; border-radius: 8px; min-width: 40px; padding: 5px; font-weight: 500; font-size: 1.1em; } #minidelivery .spin-button:hover { background-color: #Dce0e1; } #minidelivery .spin-value { margin: 10px; color: black; } #minidelivery .visible{ opacity: 1; } #minidelivery .menu-category-container{ margin: 5px; } #minidelivery .menu-category-button{ display: none; margin: 2px ; padding: 5px 8px; line-height: 1em; font-size: 1em; background-color: #fefefe; text-decoration: none; color: black; white-space: nowrap; height: 3em; border:none; outline: none; cursor: pointer; } #minidelivery .validate-container{ position: relative; min-height: 70vh; } #minidelivery .validate-table-scroller { display: flex; flex-direction: row; justify-content: center; max-height: 40vh; overflow-y: auto; } #minidelivery .validate-container table td { padding-left: 2em; padding-bottom: 5px; } #minidelivery .validate-actions { width: 100%; display: flex; flex-direction: row; justify-content: center; margin-top: 20px; } #minidelivery .validate-actions button { white-space: nowrap; margin-left: 3em; margin-right: 3em; } #minidelivery .validate-container button{ outline: none; border: none; /*background-color: #fefefe;*/ padding: 10px; border-radius: 8px; line-height: 1em; height: 45px; } #minidelivery .validate-container .apply:hover{ background-color: #27ae60; color: #fefefe; } #minidelivery .validate-container .deny:hover{ background-color: #c0392b; color: #fefefe; } #minidelivery .shoplist-page{ height: 90vh; width: 100%; display: flex; flex-direction: column; } #minidelivery .shoplist-container { font-size: 1.3em; margin:auto; height: 100%; max-width: 800px; width: 100%; /*display: flex;*/ flex-direction: column; justify-content: space-around; align-items: center; overflow-y: auto; } #minidelivery .shoplist { margin-top: 2em; padding: 10px; display: grid; grid-template-columns: repeat( auto-fill, minmax(300px, 350px) ); grid-gap: 10px; } #minidelivery .shop { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 20px; cursor: pointer; } #minidelivery .shop:hover { box-shadow: 0 0 10px rgba(0,0,0,0.5); } #minidelivery .shop-offline{ cursor: default; background-color: rgba(0,0,0,0.05); box-shadow: 0 0 10px inset rgba(0,0,0,0.5); } #minidelivery .central-block { display: flex; flex-direction: row; justify-content: space-around; align-items: center; } #minidelivery .shop-offilne-span{ color: #c0392b; } #minidelivery .shop-online-span{ color: #27ae60; } #minidelivery .shop-offline:hover{ cursor: default; box-shadow: 0 0 10px inset rgba(0,0,0,0.5); } #minidelivery .hidden { display: none; } #minidelivery .shop .shopname{ white-space: nowrap; font-size: 1.4em; font-weight: 500; } #minidelivery .shop .shopaddr{ font-size: .9em; font-weight: 300; white-space: normal; } #minidelivery .shop .shopdesc{ margin-top: 10px; font-size: .8em; font-weight: 100; white-space: pre-wrap; } #minidelivery .validate-blocks { display: flex; flex-direction: row; justify-content: space-around; } @media (max-width: 700px) { #minidelivery .cart-widget-window{ width: 480px; } } @media (max-width: 800px) { #minidelivery .guest-row-block { display: flex; flex-direction: column; justify-content: space-between; } } @media (max-width: 1100px) { #minidelivery .allowvertical{ flex-direction: column; align-items: stretch; } } @media (max-width: 630px){ #minidelivery .validate-blocks { display: flex; flex-flow: column-reverse; justify-content: space-around; } } @media (max-width: 500px) { #minidelivery .spin-button, .spin-value { font-size:.8em; } #minidelivery .validate-container { height: auto; } #minidelivery .guest-container{ width: 100%; } #minidelivery .menu-head{ width: 100%; } #minidelivery .menu-item-recipe{ font-size: .7em; } #minidelivery .radio{ padding-right: 10px; } #minidelivery .validate-blocks { display: flex; flex-flow: column-reverse; justify-content: space-around; } #minidelivery .allowvertical{ flex-direction: column; align-items: stretch; } #minidelivery .allowvertical label{ margin-top: 10px; } #minidelivery .guest-row-block { display: flex; flex-direction: column; justify-content: space-between; } #minidelivery .shop .shopname{ white-space: initial; } #minidelivery .menu-category-button{ display: block; margin: 2px ; padding: 5px 8px; line-height: 1em; font-size: 1em; background-color: #fefefe; text-decoration: none; color: black; white-space: nowrap; height: 3em; border:none; outline: none; cursor: pointer; } #minidelivery .menu-categories { position: fixed; left: 5px; top: auto; right: 5px; height: auto; overflow-y: auto; bottom: 5px; background-color: #fefefe; display: flex; flex-direction: column; justify-content: start; align-items: center; box-shadow: 0 0 10px rgba(0,0,0,0.5); } #minidelivery .cart-widget-window ul { max-height: 60vh; } #minidelivery .menu-categories li a{ font-family:'Arsenal', sans-serif; text-transform:uppercase; background-color:#ffffff !important; background-repeat:repeat; border-top-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; padding-left:12px !important; padding-right:12px !important; padding-top:8px !important; padding-bottom:8px !important; font-weight:700; border-style:solid; border-width:1px; } #minidelivery .menu-category-link{ margin: 2px ; padding: 5px 8px; background-color: #fefefe; font-size: 1.5em; text-decoration: none; line-height: 1em; color: black; display: block; white-space: nowrap; } #minidelivery .cart-widget-window{ position: fixed; top: auto; left: 5px; right: 5px; bottom: 10px; width: auto; } #minidelivery .cart-widget-actions { margin-top: 10px; } #minidelivery .menu-item { font-size: 1.5em; } #minidelivery .menu-category-link:hover{ background-color: initial; } #minidelivery .invoice-actions { flex-direction: column; } #minidelivery .spin-button:hover { background-color: none; } #minidelivery .validate-container table td{ padding-left: 0; } #minidelivery .sum-container{ margin-right: 1px; } }