.appointments{display:flex;flex-direction:column;gap:calc(var(--gap)*2)}@media screen and (max-width: 1479px){.appointments{gap:var(--gap)}}.appointments-item{display:flex;flex-direction:row;align-items:center;gap:calc(var(--gap)*1.5)}@media screen and (max-width: 767px){.appointments-item{flex-direction:column;align-items:unset;gap:var(--gap)}}.appointments-item__times{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:calc(var(--gap)*1)}.appointments-item-time{position:relative}.appointments-item-time:hover .appointments-item-time-panel,.appointments-item-time:focus .appointments-item-time-panel{transform:scale3d(1, 1, 1)}.appointments-item-time-label{display:flex;min-width:54px;min-height:20px;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--gap)/2) calc(var(--gap)*1);border-radius:var(--border-radius);background:var(--primary-bg-color)}.appointments-item-time-label--reserved{background:var(--quaternary-bg-color)}.appointments-item-time-label__link{color:var(--primary-color);font-weight:500;text-decoration:unset}.appointments-item-time-label__link:active,.appointments-item-time-label__link:hover{color:var(--primary-light-color);text-decoration:unset}.appointments-item-time-label__text{color:var(--secondary-text-color);font-weight:500}.appointments-item-time-panel{--panel-color: var(--black-color);position:absolute;z-index:10;bottom:calc(100% + 10px);left:50%;display:flex;flex-direction:column;align-items:center;padding:6px 10px;border-radius:var(--border-radius);background:var(--panel-color);color:var(--tertiary-text-color);gap:var(--gap);transform:scale3d(1, 0, 1);transform-origin:bottom;transition:transform .2s;translate:-50% 0}.appointments-item-time-panel::after{position:absolute;bottom:-12px;left:50%;border:6px solid rgba(0,0,0,0);border-top-color:var(--panel-color);content:"";translate:-50% 0}.appointments-item-time-panel--hidden{visibility:hidden}.appointments-item-time-panel--free{--panel-color: var(--green-dark-color)}.appointments-item-time-panel--reserved{--panel-color: var(--red-dark-color)}.appointments-item-time-panel .action-bar.action-bar{justify-content:center;margin-left:unset}.appointments-item .action-bar{margin-left:auto}@media screen and (max-width: 767px){.appointments-item .action-bar{justify-content:flex-start;margin-left:unset}}