.page-stand-card { width: calc(100% - 40px); display: flex; flex-direction: column; align-items: center; margin: 20px 20px 0 20px; } .page-stand-card details { border-radius: var(--border-radius); width: 100%; display: flex; flex-direction: column; align-items: stretch; margin-bottom: 20px; background: var(--ColorThemes1); color: var(--ColorThemes3); border: 1px solid var(--ColorThemes2); box-shadow: var(--shadow-l1); } .page-stand-card>details summary::-webkit-details-marker, .page-stand-card>details summary::marker { display: none; content: ""; } .page-stand-card summary { width: calc(100% - 40px); cursor: pointer; color: var(--ColorThemes3); border-radius: var(--border-radius); font-size: var(--FontSize5); padding: 20px; position: relative; display: flex; justify-content: space-between; align-items: center; } .page-stand-card summary span { font-weight: 500; width: 100%; } #stand-info div { display: flex; flex-direction: row; display: flex; flex-direction: row; padding: 0 20px 10px 20px; color: var(--ColorThemes3); align-items: center; } #stand-info div span { font-weight: 500; font-size: var(--FontSize3); margin-right: 5px; } #stand-info div p { opacity: 0.9; font-weight: 400; font-size: var(--FontSize3); } #stand-info img { position: relative; display: inline-block; width: calc(100% - 20px); border-radius: calc(var(--border-radius) - 8px); margin: 10px; height: auto; aspect-ratio: 16 / 9; background-color: #f2e5c9; display: none; } #stand-info img::before { content: "Приклад розташування"; display: block; color: #555; text-align: center; padding: 10px; } #stand-schedule { width: 100%; /* min-height: calc(100vh - 40px - 50px); */ height: fit-content; margin: 0 10px 15px; border-radius: var(--border-radius); display: flex; flex-direction: column; overflow: hidden; background: var(--ColorThemes1); color: var(--ColorThemes3); border: 1px solid var(--ColorThemes2); box-shadow: var(--shadow-l1); transition: all .2sease 0s; } #stand-schedule>.mess-list { height: 200px; display: none; flex-direction: column; align-items: center; justify-content: space-evenly; } #stand-schedule>.mess-list[data-visible="true"] { display: flex; } #stand-schedule>.mess-list>svg { width: 100px; height: 100px; fill: var(--ColorThemes3); opacity: 0.7; } #stand-schedule>.mess-list>h3 { font-size: var(--FontSize5); color: var(--ColorThemes3); opacity: 0.7; } #stand-schedule>.block-day { display: flex; flex-direction: column; width: calc(100% - 20px); margin: 10px; padding: 10px 0; border: 1px solid var(--PrimaryColor); background-color: var(--ColorThemes2); border: 1px solid var(--ColorThemes0); min-height: 100px; justify-content: center; position: relative; border-radius: calc(var(--border-radius) - 5px); overflow-x: auto; } #stand-schedule>.block-day h3 { font-size: var(--FontSize6); font-weight: 500; padding: 20px; text-transform: capitalize; width: calc(100% - 40px); text-align: center; } #stand-schedule>.block-day div { display: flex; flex-direction: row; padding: 5px 0; margin: 0 10px; align-items: center; min-width: calc(100% - 20px); width: fit-content; } #stand-schedule>.block-day div span { padding: 0 5px; font-size: var(--FontSize4); white-space: nowrap; } #stand-schedule>.block-day div select { width: 100%; min-width: 140px; padding: 0 5px; margin: 0 5px; border-radius: calc(var(--border-radius) - 5px - 4px); height: 30px; background-color: var(--ColorThemes0); color: var(--ColorThemes3); font-size: var(--FontSize4); } #stand-schedule>.block-day div select:disabled { opacity: 0.9 !important; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2217%2010%2038%2050%22%3E%3Cpath%20fill%3D%22%23F2BD53%22%20d%3D%22M%2036%2010%20C%2028.28%2010%2022%2016.28%2022%2024%20L%2022%2028.587891%20C%2019.069798%2029.775473%2017%2032.643974%2017%2036%20L%2017%2052%20C%2017%2056.418%2020.582%2060%2025%2060%20L%2047%2060%20C%2051.418%2060%2055%2056.418%2055%2052%20L%2055%2036%20C%2055%2032.643974%2052.930202%2029.775473%2050%2028.587891%20L%2050%2024%20C%2050%2016.28%2043.72%2010%2036%2010%20z%20M%2036%2018%20C%2039.309%2018%2042%2020.691%2042%2024%20L%2042%2028%20L%2030%2028%20L%2030%2024%20C%2030%2020.691%2032.691%2018%2036%2018%20z%22%2F%3E%3C%2Fsvg%3E); } #stand-schedule>.block-day div:nth-child(2n) { background: var(--ColorThemes0); border-radius: 8px; } #stand-schedule>.block-day div:nth-child(2n) select { background-color: var(--ColorThemes2); } #stand-schedule>#stand-new-button { border-radius: 6px; background: var(--PrimaryColor); color: var(--PrimaryColorText); width: calc(100% - 20px); height: 40px; font-size: var(--FontSize3); font-weight: 400; margin: 10px; text-transform: uppercase; cursor: pointer; }