.Qr-titled { background-color: rgba(0,0,0,0.06); box-sizing: border-box; border-top: rgba(0,0,0,0.06) solid 2px; border-bottom: rgba(0,0,0,0.06) solid 2px; padding-top: calc((10px + 2vmin) * 2); padding-bottom: calc((10px + 2vmin) * 2); } @media (min-width: 500px) { .Qr-titled { border-top: rgba(0,0,0,0.06) solid 3px; border-bottom: rgba(0,0,0,0.06) solid 3px; } } .Qr-titled-nobg { padding-top: calc((10px + 2vmin) * 2); padding-bottom: calc((10px + 2vmin) * 2); -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.2s; /* Safari */ transition-duration: 0.2s; } .Qr-title { margin-top: 3em; } .Qr-subtitle { margin-top: -1em; margin-bottom: 0; } .Qr-s-subtitle { margin-top: 0.25em; margin-bottom: 0; } .Qr-s { overflow-x: scroll; overflow-y: hidden; overflow-scrolling: touch; width: 100vw; white-space: nowrap; display: flex; } .Qr-s::-webkit-scrollbar { display: none; } .Qr-s-title { font-size: 1.4em; } .title-margin { margin-bottom: 20px; } .Qr-box { white-space: nowrap; display: flex; padding: 0px 13px 0px 23px; } @media (min-width: 1000px) { .Qr-box { padding-left: calc((100vw - 1000px) / 2 + 23px); } } .Qr-item { user-select: none; float: left; display:block!important; margin-right: 10px; } .Qr-item-image { padding: 23px; background-color: white; width: calc((100vw - 56px) / 2); height: calc((100vw - 56px) / 2); border-radius: 10px; box-sizing: border-box; border: rgba(0,0,0,0.12) solid 2px; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.2s; /* Safari */ transition-duration: 0.2s; } @media (min-width: 500px) { .Qr-item-image { border: rgba(0,0,0,0.12) solid 3px; } } .Qr-item-image-inner { opacity: 0.36; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.2s; /* Safari */ transition-duration: 0.2s; -webkit-transform: translateZ(0); } @media (min-width: 500px) { .Qr-item-image { width: 200px; height: 200px; } } .Qr-item:hover .Qr-item-image { border-color: #44D7B6; } .Qr-item:hover .Qr-item-image-inner { opacity: 1; } .Qr-item:hover .Qr-item-detail { color: #000000; } .Qr-item-detail { color: rgba(0,0,0,0.3); margin-top: 5px; font-size: 1em; text-align: left; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.2s; /* Safari */ transition-duration: 0.2s; } tr { width: 100%; display: inline-flex; justify-content: space-between ; align-items: center; } td:nth-child(1) { font-size: 1em; white-space: nowrap; } td:nth-child(2) { white-space: nowrap; font-size: 1em; } td { padding-bottom: 10px; } table { margin-bottom: -10px; } .big-input { font-size: calc(10px + 2vmin); margin-top: calc((10px + 2vmin) * 2); margin-bottom: calc((10px + 2vmin) * 2); border: rgba(0,0,0,0.12) solid 2px; width: 20em; max-width: calc(100vw - 46px); } @media (min-width: 500px) { .big-input { border: rgba(0,0,0,0.12) solid 3px; } } .small-input { font-size: 0.9em; border: rgba(0,0,0,0.12) solid 2px; width: calc((100vw - 56px) / 2); } @media (min-width: 500px) { .small-input { border: rgba(0,0,0,0.12) solid 3px; } } @media (min-width: 500px) { .small-input { width: 200px; } } .Qr-input { caret-color: #44d7b6; padding: 0; line-height: 2em; box-sizing: border-box; border-radius: 3em; outline: none; text-indent: 1em; overflow: visible; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.2s; /* Safari */ transition-duration: 0.2s; -webkit-appearance: none; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: 'Futura', sans-serif; color: rgba(0,0,0,0.6); } .Qr-input::placeholder { font-family: 'Futura', sans-serif; color: rgba(0,0,0,0.18); } .Qr-Centered { padding-left: 23px; padding-right: 23px; max-width: 954px; text-align: -webkit-left; } .Qr-input:focus { border-color: #44D7B6; color: #000000; } .Qr-table { width: 100%; border-spacing: 0; margin-top: 23px; } .Qr-div-table { max-width: 410px; } .div-btn { white-space: nowrap; overflow-x: hidden; display: flex; justify-content: space-between; } .dl-btn { float: left; font-size: 1em; line-height: 1em; margin: 0; width: calc((100vw - 56px) / 2); height: 2em; border-radius: 3em; outline: none; padding: 0; box-sizing: border-box; border: rgba(0,0,0,0.12) solid 2px; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.2s; /* Safari */ transition-duration: 0.2s; -webkit-appearance: none; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: white; font-family: 'Futura', sans-serif; color: rgba(0,0,0,0.6); } @media (min-width: 500px) { .dl-btn { border: rgba(0,0,0,0.12) solid 3px; } } .dl-btn:hover { border-color: #44D7B6; color: #44D7B6; } .dl-btn:active { -webkit-transition-duration: 0s; /* Safari */ transition-duration: 0s; border-color: #3BBC9F; color: #3BBC9F; } @media (min-width: 500px) { .div-btn { max-width: 410px; } .dl-btn { width: 200px; height: 2em; } }