﻿:root {
    --text-color: #282830;
    --text-color-hover: #fff;
    --border-color: #282830;
    --background-color: #fff;
    --background-color-hover: #282830;
}

.services-items,
.services-selection,
.locationSites {
    gap: 16px;
    margin-top: 16px;
}

#clearSelectedServiceItem {
    background: var(--background-color-hover);
    color: var(--text-color-hover);
    border: 1px solid var(--border-color);
}

#clearSelectedServiceItem:hover {
    opacity:0.8;
}

.serviceItem.aService {
   
    background-color: #FFF;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    align-items: center;
    color: #1f2937;
}

.serviceItem.aService,
.btnSite,
.eventType .s-content .h3 a {
    padding: 24px;
}

.locationSites .selectSiteDiv .selectSiteBTN,
.serviceItem,
.eventType:not(.active) .s-content .h3 a {
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.07), 1px 2px 5px 0 rgba(0, 0, 0, 0.06);
    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.07), 1px 2px 5px 0 rgba(0, 0, 0, 0.06);
}

.locationSites,
.services-items,
.services-selection {
    display: grid;
    grid-template-columns: 100%;
}

.locationSites .selectSiteDiv {
    width: 100%;
    float: none !important;
    padding: 0 !important;
}

.serviceItem.aService,
.eventType .s-content .h3 a {
    color: var(--text-color);
    border: 1px solid var(--border-color) !important;
    background-color: var(--background-color);
}

.eventType .s-content .h3,
.serviceItem.aService {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

.locationSites .selectSiteDiv .selectSiteBTN {
    color: var(--text-color-hover);
    background-color: var(--background-color-hover);
    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.07), 1px 2px 5px 0 rgba(0, 0, 0, 0.06);
    opacity: 1;
    margin: 0 !important
}

.locationSites .selectSiteDiv .selectSiteBTN:hover {
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    background-color: var(--background-color) !important;
}

.locationSites .selectSiteDiv .selectSiteBTN .btnSiteTitle,
.serviceItem,
.eventType:not(.active) .s-content .h3 a {
    font-size: 28px;
    font-weight: 600;
}

.serviceItem.aService:hover,
.eventType .s-content .h3 a:hover {
    color: var(--text-color-hover);
    background-color: var(--background-color-hover);
    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.07), 1px 2px 5px 0 rgba(0, 0, 0, 0.06);
    opacity: 1;
}

.eventTypeTitleLink {
    float: none !important;
    display: block;
}


.eventType {
    width: 100% !important;
    justify-content: center;
    align-items: center !important;
    height: auto;
    padding: 0 !important;
    float: none !important;
}

.eventType .s-content .h3 {
    display: flex;
    min-height: 100px;
    align-items: center;
    align-items: stretch;
    justify-content: center;
}

.eventType .s-content .h3 a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.eventType.Horizontal {
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center !important;
}

.select-datetime .eventType.active {
    justify-content: space-between !important;
}


.eventType.active .s-content .h3 a {
    background-color: var(--background-color-hover) !important;
}


.select-datetime .eventType .s-content .h3,
.select-datetime .eventType .s-content .h2 {
    text-align: start;
}


.eventType .s-content .h2 {
    text-align: center;
}


.eventType .s-content .h3 a {
    color: var(--text-color) !important;
}


.eventType .s-content .h3 a:hover,
.eventType.active .s-content .h3 a {
    color: var(--text-color-hover) !important;
    text-decoration: none !important;
}

.serviceItem[tati="JL0XvWxYwD"],
.serviceItem[tati="9hWMr5dgCQ"],
.s-title-ref[s-tati='9hWMr5dgCQ'],
.s-title-ref[tati='WUGPmnBaA8'],
.s-title-ref[tati='atGYfez4mP'] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.serviceItem[tati="JL0XvWxYwD"] .service-item-title,
.serviceItem[tati="9hWMr5dgCQ"] .service-item-title,
.s-title-ref[s-tati='9hWMr5dgCQ'] .s-title,
.s-title-ref[tati='WUGPmnBaA8'] .s-title,
.s-title-ref[tati='atGYfez4mP'] .s-title {
    display: none !important;
}

.serviceItem[tati="JL0XvWxYwD"]:before,
.serviceItem[tati="9hWMr5dgCQ"]:before,
.s-title-ref[s-tati='9hWMr5dgCQ']:before,
.s-title-ref[tati='WUGPmnBaA8']:before,
.s-title-ref[tati='atGYfez4mP']:before {
    content: "HHC בדיקת סוללה היברידית/";
}

.serviceItem[tati='JL0XvWxYwD']:after,
.serviceItem[tati='9hWMr5dgCQ']:after,
.s-title-ref[s-tati='9hWMr5dgCQ']::after,
.s-title-ref[tati='WUGPmnBaA8']:after,
.s-title-ref[tati='atGYfez4mP']:after {
    content: "הארכת שירות לסוללה היברידית";
}

@media screen and (max-width: 988px) {
    .eventType.Horizontal {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (min-width: 768px) {
    .services-items, .locationSites, .services-selection:not(.select-datetime) {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
}