/*
 * Pickup pages
 */
#dz-popup-pickup-date-content > form > button > p {
    font-weight:normal;
    display:block;
    margin:8px 0 0 0;
}

/*
 * Calendar
 */
/*#calendar-page .dz-popup-box {
    top: calc(50% - 20px) !important;
}*/

#calendar-page .dz-calendar {
    min-height:380px;
}

#calendar-page.dz-pickup-hours .dz-calendar {
    min-height:300px;
}

#calendar-page .dz-calendar:not(.active) {
    display:none;
}

#calendar-page .dz-calendar > div {
    width:100%;
    display:inline-block;
    float:left;
    color: var(--main-color);
}

#calendar-page .dz-calendar-header {
    margin:0;
    padding:5px 0 5px 0;
}

#calendar-page .dz-calendar-header ul,
#calendar-page .dz-calendar-content ul {
    list-style-type: none;
    width:100%;
    padding:0;
    margin:0;
}

#calendar-page .dz-calendar-header ul li,
#calendar-page .dz-calendar-content ul li {
    width:14.28%;
    min-width:14.28%;
    float:left;
    text-align:center;
    font-size:2vh;
    font-weight:800;
    color:#000;
}

#calendar-page .dz-calendar-content {
    margin:0 0 15px 0;
    padding:0;
}

#calendar-page .dz-calendar-title {
    text-align:center;
    font-size:3vh;
    font-weight:800;
    padding:5px 30px 10px 30px;
}

#calendar-page .dz-calendar-prev,
#calendar-page .dz-calendar-next {
    position:absolute;
    font-size:3vh;
    padding:15px;
    margin-top:-15px;
    color:var(--main-color);
}

#calendar-page .dz-calendar-prev {
    left:0;
}

#calendar-page .dz-calendar-next {
    right:0;
}

#calendar-page .dz-calendar-prev.disabled,
#calendar-page .dz-calendar-next.disabled {
    color:var(--main-disabled-color);
}

#calendar-page .dz-calendar-day {
    font-size:14px;
    height:40px;
    line-height:40px;
}

#calendar-page .dz-calendar-day a,
#calendar-page .dz-calendar-day a:active,
#calendar-page .dz-calendar-day a:visited {
    width: 44px;
    height: 44px;
    display: inline-block;
    line-height: 23px;
    padding: 9px 10px 10px 11px;
    border-style: solid;
    border-width: 2px;
    border-radius: 30px;
    border-color: transparent;
    font-family: 'Roboto', sans-serif;
}

#calendar-page .dz-calendar-day a.disabled {
    opacity:0.5;
}

#calendar-page .dz-calendar-day a.disabled:not(.enable-event) {
    pointer-events: none;
}

.dz-calendar-day a.is-today:not(.selected) {
    color:var(--main-color) !important;
    border-color:var(--main-color) !important;
}

.dz-calendar-day a.selected {
    color:var(--main-bg-color) !important;
    background-color:var(--main-color) !important;
    border-color:var(--main-color) !important;
}

#calendar-page .dz-calendar-day a.is-today.disabled {
    opacity:1;
    color: #fff !important;
    border-color: var(--main-disabled-color) !important;
    background-color: var(--main-disabled-color) !important;
}

#calendar-page .dz-calendar-date {
    font-size: 14px;
    text-align: center;
}

#calendar-page .dz-calendar-footer {
    bottom:0;
    padding:10px 0 0 0;
    text-align:center;
    width:100%;
}

#calendar-page .set-pickup-date-btn {
    margin-bottom:0 !important;
}

#calendar-page .dz-calendar-day-name {
    font-size: 14px;
    text-align: center;
    height:30px;
    font-weight: 700;
    color:var(--main-color);
}

/*
 * Hour picker
 */
.app {
  padding: var(--gutter) 0;
  display: grid;
  grid-gap: var(--gutter) 0;
  grid-template-columns: var(--gutter) 1fr var(--gutter);
  align-content: start;
}

.app > * {
  grid-column: 2 / -2;
}

.app > .full {
  grid-column: 1 / -1;
}

.hs {
  display: grid;
  grid-gap: calc(var(--gutter) / 2);
  grid-template-columns: 10px;
  grid-template-rows: minmax(150px, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - var(--gutter) * 2);

  overflow-x: scroll;
  scroll-snap-type: x proximity;
  padding-bottom: calc(.75 * var(--gutter));
  margin-bottom: calc(-.25 * var(--gutter));
}

.hs:before,
.hs:after {
  content: '';
  width: 10px;
}


#dz-calendar-hours-container {
    padding: 15px;
    text-align:center;
}

#dz-calendar-hours-container select {
    background: #ffffff;
    border-radius: 2px;
    border: 1px solid #c3c3c3;
    color: #000;
    font-weight: 700;
    height: 40px;
    margin: 0;
    outline: none;
    padding: 5px 5px 5px 7px;
    font-size: 16px;
}

/*
 * Manage
 */
.dz-pickup-manage #dz-popup-content-container {
    min-height:200px;
}
.dz-pickup-manage .dz-pickup-calendar-content {
    width:100%;
    height:70px;
    padding:20px 15px 15px 67px;
    position:relative;
    display:block;
    margin-bottom:15px;
}

.dz-pickup-manage .dz-pickup-calendar-content > a > div:first-child {
    position:absolute;
    top:16px;
    left:15px;
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
    padding-top:4px;
    font-size: 16px;
}

.dz-pickup-manage .dz-pickup-calendar-content > a > div:first-child:before {
    font-size:36px;
}

.dz-pickup-manage .dz-pickup-calendar-content span.dz-pickup-hour {
    display:block;
    font-size:12px;
    font-weight:normal;
}

.dz-pickup-manage #dz-pickup-add-btn {
    position:relative;
    text-align:center;
    display:block;
    margin-top:100px;
}

.dz-pickup-manage #dz-pickup-add-btn .dz-icon {
    font-size: 45px !important;
    border-radius:50%;
    width: 80px;
    height:80px;
    line-height:90px;
    padding:0;
    margin:0;
}

.dz-pickup-manage #dz-pickup-add-btn.disabled {
    opacity:0.5;
}

.dz-pickup-manage #dz-pickup-add-btn > p {
    font-weight:800;
    margin-top:10px;
    font-size:16px;
    color:var(--main-color) !important;
}

.dz-pickup-manage .dz-popup-content {
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0px 7px 27px 0 rgba(0, 0, 0, 0.11);
    font-weight:800;
}

.dz-pickup-manage .dz-pickup-manage-action {
    position:absolute;
    top:0;
    right:0;
}

.dz-pickup-manage .dz-pickup-manage-action a {
    display:none;
}

.dz-pickup-manage .dz-pickup-manage-action a:first-child {
    display:inline-block;
    width:70px;
    height:70px;
    border-radius:0 5px 5px 0;
    background-color:transparent;
}

@media (max-width: 767px) {
    #calendar-page .set-pickup-date-btn {
        border-radius:0 !important;
    }
    #calendar-page .dz-calendar-footer {
        position:fixed;
    }
}
@media (max-width: 413px) {
    #calendar-page .dz-popup-title {
        display:none;
    }
    #calendar-page .dz-pickup-manage .dz-popup-box {
        padding-left:10px !important;
        padding-right:10px !important;
    }
    .dz-pickup-manage #dz-pickup-add-btn {
        margin-top:20px;
    }
    #calendar-page .dz-calendar-date {
        font-size: 12px;
    }
    
    #calendar-page .dz-calendar-day a,
    #calendar-page .dz-calendar-day a:active,
    #calendar-page .dz-calendar-day a:visited {
        width: 36px;
        height: 36px;
        line-height: 36px;
        padding: 0;
    }
}

@media (min-width: 768px) {
    /*
     * Calendar
     */
    #calendar-page .dz-popup-content {
        display:grid;
        box-shadow: 0px 7px 27px 0 rgba(0, 0, 0, 0.11);
    }

    #calendar-page .dz-calendar {
        padding:30px 60px 0px 60px;
    }

    #calendar-page .dz-calendar-header ul li,
    #calendar-page .dz-calendar-content ul li {
        font-size:14px;
    }

    #calendar-page .dz-calendar-title,
    #calendar-page .dz-calendar-prev,
    #calendar-page .dz-calendar-next {
        font-size:22px;
    }

    #calendar-page .dz-calendar-prev {
        left:60px;
    }

    #calendar-page .dz-calendar-next {
        right:60px;
    }

    #calendar-page .dz-calendar-footer {
        padding:15px;
        border-radius:0 0 5px 5px;
        background-color: var(--second-bg-color);
    }

    #calendar-page .dz-calendar-date {
        border-top:1px solid #c3c3c3;
        padding:15px 0 15px 0;
        font-weight:800;
    }

    #calendar-page .dz-calendar-day {
        height:45px;
        line-height:45px;
    }

    #dz-calendar-hours-container {
        border-top: 1px solid #c3c3c3;
    }

    /*
     * Manage
     */
    .dz-pickup-manage .dz-pickup-manage-action a {
        display:inline-block;
        margin-left:15px;
    }

    .dz-pickup-manage .dz-pickup-calendar-content {
        height:100px;
    }

    .dz-pickup-manage .dz-pickup-manage-action {
        right:20px !important;
        top:11px !important;
    }

    .dz-pickup-manage .dz-pickup-calendar-content > a > div:first-child {
        width:70px;
        height:70px;
        line-height:70px;
        color:var(--main-color) !important;
    }

    .dz-pickup-manage .dz-pickup-calendar-content > a > div:first-child:before {
        font-size:48px;
    }

    .dz-pickup-manage .dz-pickup-calendar-content > a > div > span {
        top:25px;
        font-size:30px;
    }

    .dz-pickup-manage .dz-pickup-calendar-content {
        font-size:24px !important;
        padding: 26px 10px 10px 105px;
    }

    .dz-pickup-manage .dz-pickup-calendar-content span.dz-pickup-hour {
        font-size: 16px;
        margin-top:5px;
    }

    .dz-pickup-manage .dz-pickup-manage-action a:first-child {
        display:none;
    }
}