.header .nav-icons-right {
	display: none;
	position: absolute;
}
.header .nav-icons-right.show {
	display: block;
	position: absolute;
	    z-index: 20;
}
.header .nav-icons-center li:first-child, .header .nav-icons-center li:nth-child(5) {
        display: block;
}

@media screen and (max-width: 320px) {
	    .sp-cols-2 .sp-col, .sp-cols-3 .sp-col, .sp-cols-4 .sp-col {
        width: 100%;
    }
	.priacy-type-select li .label {
    font-size: 9px;
}
.entry-list {
    grid-template-columns: 1fr;
}
}

@media screen and (min-width: 321px) and (max-width: 767px) {
a.button {
	 width: 100%;
}
		
 .header {
	 left: 0;
	 width: 100%;
	 top: 0;
 }
.header.shadow {
		overflow: visible;
		position: relative;
		background-color: transparent !important;
		box-shadow: none;
		
}
.header.shadow .nav-icons li a#nav-menu {
    background-color: #333432 !important;
    border-radius: 0;
}
.header .nav-icons li a#nav-menu {
    border-radius: 0;
}

.content .content-header {
    height: 60px;
}
.content .content-body {
    top: 60px;
}

ul.nav-icons.nav-icons-center.bg-color-a.hide {
	display: none;
}
.quick-add {
bottom: 30px;
left: auto;
right: 60px;
}
.map-style-select-wrapper {
bottom: 120px;
        left: auto;
        right: 10px;
}

/* Vertical Nav Bar */
.header .nav-icons-center {
    position: absolute;
    width: 60px;
    top: 60px;
    z-index: 1000000;
    left: 0;
    right: 60px;
    bottom: auto;
	border-radius: 0 0 0.5rem 0;
}

/* Add Spot */


#map.shifted {
        transform: translate(0, -30vh);
}

 .content:has(div.content-spot-form) {
        margin-top: 220px;
 } 
  .content:has(div.content-spot-form) .content-header {
	  display: none;
  }

  .content:has(div.content-spot-form)  .content-body {
	  top: 0;
  }
    .page-form .header, .page-detail .header {
	 margin: 0;
 }
 .page-default .header .title {
	 display: none;
 }
 
.logo img {
    max-width: 150px;
    max-height: 60px;
}
/* Login */
.auth-reset {
    position: relative;
    top: 0;
    left: 0;
    padding-left: 30px;
    line-height: 40px;
}
.short-info .left {
    font-size: 12px;
}

/* FILTER */
	
#filter-modal {
max-width: 90%;
    left: 0;
    top: 50%;
    margin-left: 1rem;
}

/* MODEL FLEX */
.modal-type-flex {
max-width: 90%;
    left: 0;
    top: 50%;
    margin-left: 1rem;
}

/* SPOT DETAIL VIEW*/
.entry-detail .left {
    position: relative;
    float: none;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}
.entry-detail .right {
    position: relative;
    float: none;
    width: 100%;
    padding: 0 15px 50px 15px;
    box-sizing: border-box;
}

sp-comment-list .comment-input-control .comment-input-button {
    position: relative;
	font-size: 16px;
}
sp-comment-list .comment-input-control .reply-to-target-owner {
    margin-bottom: 10px;
}
sp-comment-list .comment-input {
    margin: 15px 0 50px;
}
.entry-detail .right .community-bar {
    float: left;
	width: auto;
	margin-bottom: 10px;
}
.entry-detail .right .community-bar.shifted {
    margin-bottom: 10px;
}
.entry-detail {
    display: flex;
    flex-direction: column;
}
.entry-detail sp-ng-image-gallery-view {
    order: 0;
}
.entry-detail .right .desc {
    margin-bottom: 10px;
}
.entry-detail .right {
    order: 1;
	padding: 10px 15px 0 15px;
}
.entry-detail .left, .entry-detail .left.on-top {
    order: 2;
	padding-top: 0;
}
.entry-detail .right .detail-share-menu-button-open, .popup-menu-button-open {
    top: 15px;
}

.entry-detail .image {
        background-size: cover;
 }
 .entry-bullets {
        width: 100%;
        text-align: center;
        left: 0;
        margin: 0;
}
	
/* COMMENTS*/
sp-comment .comment-meta .comment-reply, sp-comment .comment-meta .comment-date {
	float: none;
}
sp-comment .comment-meta {
    position: relative;
	    bottom: 0;
		    float: right;
}
sp-comment .comment-flex {
    padding: 0 15px 0 79px;
}
	
/* LIST VIEWS */
.entry-list {
    grid-template-columns: 1fr 1fr;
}
.entry-list li .right {
    background-color: rgb(51 52 50 / 70%);
}
.entry-list li .right .category {
        color: #ffffff !important;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
    }
.entry-list li .right .user {
    bottom: 12px;
}
.entry-list li .right .datetime {
    bottom: -8px;
}


/* USER PROFILE */

.content-userdetail .userdetail-header .role-editor {
    left: 70px;
}
.content-userdetail .userdetail-header .bubbles {
    position: relative;
    top: 65px;
    right: 0;
}
    .content-userdetail .userdetail-header .edit-bubble {
        top: 80px;
        left: 10px;
    }
.content-userdetail .fade-out {
        top: 125px;
		z-index: 25;
    }
.content-userdetail .userdetail-header {
        height: 130px;
    }
.content-userdetail .userdetail-header .intro {
    bottom: 55px;
}
 .content-userdetail .swiper-slide {
        border-top: 105px solid transparent;
    }
.content-userdetail .userdetail-header .intro {
    position: absolute;
    right: 60px;
    bottom: 55px;
}

.content-userdetail .spots-list {
    grid-template-columns: 1fr 1fr;
}
.content-userdetail .userdetail-header .like-follow {
        left: 95px;
        top: 80px;
}

/* ADD SPOT */
.sp-imageselect-list li div span {
        font-size: 11px;
    }
.sp-cols-4 .sp-col {
    width: 50%;
}
.sp-cols-3 .sp-col {
width: 50%;
}
.sp-image-open.button {
	font-size: 12px;
}
.priacy-type-select li .label {
font-size: 12px;	
}

.sp-ng-checkbox {
    line-height: 16px;
	padding: 6px 10px;
}
.sp-ng-checkbox span {
    margin: 4px 10px 10px 0;
}
/* DVO */

.page-dvo .content {
        width: 100%;
        top: auto;
        bottom: 0;
        height: 310px;
}
.page-dvo #map.shifted {
        transform: translate(0, 0);
    }
.page-dvo .map-dov-frame-top {
    top: 0;
    bottom: auto;
}
 .page-dvo .content .content-body {
        top: 2px;
    }
 .page-dvo .content .content-header {
	 display: none;
 }
}
@media screen and (min-width: 481px) {
	    .sp-cols-3 .sp-col {
        width: 33.3%;
    }
}

@media screen and (min-width: 768px) {
.content {
    z-index: 999999996;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 560px;
    box-sizing: border-box;
    background-color: #ECECEC;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    margin-top: 0;
}
#map.shifted {
    -webkit-transform: translate3d(280px, 0, 0);
    transform: translate3d(280px, 0, 0);
}
.header {
position: absolute;
    left: 15px;
    top: 15px;
    width: 540px;
    height: 60px;
    z-index: 4;
    display: block;
    background-color: #6E6E6E;
    overflow: hidden;
    transition: .25;
    margin-top: 0;
}
    .page-form .header, .page-detail .header {
        top: 15px;
        margin-top: 0;
    }
}