.waypoint-popup, .add-new-media {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 35px;
    height: 35px;

    background-color: #0A334F;
    border-radius: 5px;

    cursor: pointer;
}

/* a.leaflet-popup-close-button */
.leaflet-container a.leaflet-popup-close-button {
    width: 24px !important;
    height: 24px !important;
    color: white !important;
    background-color: #0A334F !important;
    border-radius: 50% !important;
    margin: 2px !important;
    padding: 4px 0px 0 0 !important;
}

[data-waypointpopup] {
    width: 22px;
    height: 22px;
}

[data-wapointtype="poi"] {
    margin: 10px;
}

#marker-top-poi {
    justify-content: center;
}

#waypoint-popup-icon-add {
    width: 22px !important;
    height: 22px;
    margin: unset !important;
}

#waypoint-popup-icon-delete {
    background-color: #E52321;
}

.marker-container {
    display: flex;
    flex-direction: column;
}

#marker-container-extra {
    display: flex;
    flex-direction: column;
}

.marker-top, #marker-container-extra-icons {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.waypoint-coordinates-counter {
    color: #29ABE2;
}

.marker-bottom-details {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
}

.coordinate, .waypoint-title, .waypoint-note {
    display: flex;
    text-align: left;
}

.waypoint-note {
    text-align: left;
    margin-bottom: 5px;
    margin-top: 5px;
}

.waypoint-pauseduration-clock {
    width: 20px !important;
    margin-right: 5px !important;
}

.waypoint-icon-coordinates {
    margin-right: 3px;
}

.pauseduration-button {
    background-color: #0A334F;
    border: none;
    border-radius: 5px;
    height: 40px;
    width: 80%;
    color: white;
}

.marker-container .marker-bottom {
    width: 280px;
    text-align:center;
    min-height:50px;
}

.arrow-content {
    width: 22px;
    height: 22px;
    position: absolute;
    cursor: pointer;
    background-color: #0A334F;
    border-radius: 15px;
    border: none;

    display: flex;
    justify-content: center;
}

.arrow-content-outside {
    width: 35px;
    height: 35px;
    position: absolute;
    cursor: pointer;
    background-color: white;
    border-radius: 15px;
    border: 6px solid rgba(197, 227, 255, 0.1);

    display: flex;
    justify-content: center;
    align-items: center;
}

#arrow-content-right {
    right:-40px;
}

#arrow-content-left {
    left:-40px;
}

.arrow-right, .arrow-left {
    width: 8px !important;
}

.media {
    background-image: url("/images/waypoint-menu-v2/icons/media.svg");
}

/* sliderbox image */
#marker-top-images-sliderbox, #marker-top-images-imagelightbox {
    width: 100% !important;
    height: 180px !important;
}

/* Carousel */
.marker-top-images {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -14px;
    margin-bottom: 10px !important;
}

.carousel {
    background: #222;
}

.carousel-cell {
    width: 100%;
    /*height: 300px;*/
    margin-right: 10px;
    /* center images in cells with flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel.is-fullscreen .carousel-cell {
    height: 100%;
}

.carousel-cell-image {
    display: block;
    max-height: 100%;
    border-top-left-radius: 5%;
    border-top-right-radius: 5%;
}

.carousel.is-fullscreen .carousel-cell-image {
    max-width: 100%;
}

/*Flickity*/
.flickity-enabled {
    position: relative;
    border-top-left-radius: 5%;
    border-top-right-radius: 5%;
}

.slider {
    margin: unset !important;
    height: unset !important;
    width: inherit !important;
}

.slider .flickity-slider {
    left: unset !important;
    transform: unset !important;

    position: unset !important;
    width: unset !important;
    height: unset !important;
}

.slider .flickity-viewport {
    height: unset !important;
    touch-action: unset !important;
    overflow: unset !important;
    position: unset !important;
}

.flickity-page-dots {
    width: 321px !important;
    margin: unset !important;
    position: absolute !important;
    bottom: 5% !important;
}

.flickity-page-dots .dot {
    background: #F7931E !important;
}

.leaflet-container a.leaflet-popup-close-button {
    z-index: 1;
}

.deletemedia {
    left: 5px !important;
    right: unset !important;
    width: 18px !important;
    height: 18px !important;

    background-color: #0A334F;
    border-radius: 3px;
}

/* timepicker */
.ui-timepicker-wrapper {
    background: #0A334F !important;
    border: 1px solid #0A334F !important;
}

.ui-timepicker-am {
    color: white !important;
}

/* pauseduration */
.pauseduration-icon-selector-icons {
    text-align: left;
    margin: 10px;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 455px;
}

.break-column {
    flex-basis: 100%;
}

.pauseduration-div {
    display: flex;
    justify-content: left;
    align-items: center;
}

.pauseduration-div-button {
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background-color: #0A334F;
    border-radius: 5px;
    margin: 3px;
}

.pauseduration-div-button img {
    width: 20px;
    height: 20px;
}

.pauseduration-icon-selector {
    background: white;
    width: 100%;
    position: relative;
    border-radius: 10px;
    padding: 3px;

    display: flex;
    justify-content: center;
    flex-direction: column;
}

.test-tip {
    width: 40px;
    height: 20px;
    overflow: hidden;
    pointer-events: none;
    margin-left: 8%;
}

.test-tip-2 {
    background: white;
    color: #333;
    width: 17px;
    height: 17px;
    padding: 1px;
    margin: 10px auto 0;
    transform: rotate(45deg);
}

#register-button {
    cursor: pointer;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    background: linear-gradient(90deg, rgba(30,109,47,1) 0%, rgba(97,166,65,1) 100%);
}

#login-button {
    cursor: pointer;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    background: linear-gradient(90deg, rgba(8,113,184,1) 0%, rgba(43,171,226,1) 100%);
}

#media-registration-required {
    text-align: center;
}

.media-registration-required-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 10px;
}

#lightboximage img {
    width: unset;
    max-width: unset;
}

/* mobile / tablet */

@media(max-width: 1024px) {
    .marker-top-images {
        margin-left: -12px;
        margin-right: -12px;
    }

    #lightboximage img {
        width: 100%;
        max-width: 940px;
    }
}