@charset "utf-8";

.pharmacy-container {
    display: flex;
    height: calc(100vh - 164px);
}

#pharmacy-map {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}
.pharmacy-list {
    width: 280px;
    flex: none;
    margin-left: 16px;
    overflow: auto;
    padding: 0px 8px 0 4px;
    position: relative;
}
.pharmacy-list-el {
    background: white;
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
    transition: background .5s, color .5s;
}
.pharmacy-list-el[blink] {
    background: #DDF0F3
}
.pharmacy-list-el:last-child { margin-bottom: 0px; }
.pharmacy-el-title {
    padding: 8px 0;
    margin: 0px 10px 0 10px;
    text-align: center;
    font-weight: 900;
}
.pharmacy-el-schedule { text-align: center; }
.pharmacy-list-el[select] .pharmacy-el-but { background: var(--green-color); }
.pharmacy-el-but {
    background: #455a64;
    color: white;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    border-top: 1px solid white;
}
.pharmacy-el-but:before {
    content: "Показать на карте";
}

.pharmacy-list::-webkit-scrollbar {
    width: 6px;
}
.pharmacy-list::-webkit-scrollbar-thumb {
    background-color: var(--green-color);
    border-radius: 4px;
}
.pharmacy-list::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
    border-radius: 4px;
}

.store-data-phone {
    padding-bottom: 8px;
    margin: 0 10px 10px 10px;
    text-align: center;
    border-bottom: 1px solid var(--light-gray-color);
    font-size: 13px;
}

.store-data-phone::before {
    content: '';
    display: inline-block;
    align-self: center;
    height: 11px;
    width: 11px;
    background: url(/public/img/phone-footer.svg) no-repeat center center;
    background-size: contain;
}

.store-data-phone-hidden{
    display: none;
}

.store-data-schedule {
    border: 1px solid #EFEFEF;
    border-radius: 2px;
    overflow: hidden;
}

.schedule-today {
    position: relative;
    background: #DDF0F3;
    color: var(--green-color);
    padding: 0 10px 8px 10px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
}

.pharmacy-list-el[dayoff] .schedule-today { color: var(--orange-color); }

.schedule-today-columns,
.schedule-today-columns-header {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.schedule-today-columns {
    padding-top: 4px;
}

.schedule-full {
    overflow: hidden;
    background: #FFFFFF;
}

.schedule-full-columns {
    width: 100%;
}

.schedule-row {
    display: flex;
    align-items: center;
    padding: 8px 10px 8px 10px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #EFEFEF;
}

.schedule-row:last-child {
    border-bottom: none;
}

.schedule-today-work-header{
    width: 66%;
    text-align: left;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 10px;
    color: #415B63;
}

.schedule-today-break-header{
    width: 38%;
    text-align: left;
    padding-right: 10px;
    box-sizing: border-box;
    font-size: 10px;
    color: #415B63;
}

.schedule-date {
    width: 28%;
    text-align: left;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 900;
}

.schedule-today-work,
.schedule-full-time {
    width: 40%;
    text-align: left;
    box-sizing: border-box;
    font-size: 12px;
}

.schedule-today-break,
.schedule-full-break {
    width: 40%;
    text-align: left;
    padding-right: 10px;
    box-sizing: border-box;
    font-size: 12px;
}

.highlight {
    background: #DDF0F3;
    border-radius: 2px;
    padding: 10px 0;
    box-sizing: border-box;
    width: 100%;
}

.pharmacy-choose-buttons {
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
}

.pharmacy-button,
.dlo-button {
    flex: 1;
    padding: 12px 24px;
    font-size: 16px;
    color: #415B63;
    background-color: #ffffff;
    cursor: pointer;
    border-radius: 3px;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pharmacy-button.active,
.dlo-button.active {
    background-color: #415B63;
    color: #ffffff;
    cursor: default;
}

.pharmacy-main-list,
.pharmacy-dlo-list {
    display: none;
}

.pharmacy-main-list.active,
.pharmacy-dlo-list.active {
    display: block;
    width: 100%;
}