@charset "UTF-8";
/* CSS Document */

/* Phones */
@media only screen and (max-width: 768px) {
	
	.desktop-hide { 
		display: block; 
	}
	.mobile-hide {
		display: none;
	}
	.mobile-navbar {
		display:block;
		margin:0 auto;
		width: 100%;
		height: 60px;
		padding:15px;
		overflow: auto;
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.navbar-text {
		text-align: center;
		margin: auto auto auto 1rem;
	}
	.topbar-web {
		height: 90px;
	}
	.topbar-web .text {
		text-align: left;
		padding-left: 10px;
		line-height: 1.5em;
		font-size: 1.1em;
	}
	.topbar-web .button {
		padding: 10px 15px;
		border-radius: 4px;
		margin-right: 10px;
		height: auto;
	}
	.website-template {
		margin-top: 85px;
	}
	.nav {
		overflow-x: hidden;
		height: 100%;
		position: fixed;
		left: 0;
  		transform: translate3d(-100%, 0, 0);
		visibility: hidden;
		z-index: 9999;
		margin-top: 45px;
		padding-top: 30px;
		box-shadow: 27px 33px 30px 0 rgba(0, 0, 0, 0.2);
	}
	.nav.isvisible {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.bottombar {
		max-width: 180px;
		z-index: 888;
	}
	#main {
		margin-left: 0;
		margin-top: 45px;
	}
	.container-normal {
		padding: 40px 0 !important;
		width: 340px;
		max-width: 80%;
	}

	.container-widemode {
		padding: 40px 0 !important;
		max-width: 80%;
	}

	.container-normal h1:lang(de), .container-widemode h1:lang(de) {
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}

	.container-video-normal, .container-video-wide {
		padding: 20px 0;
		width: 100%;
		max-width: 340px;
	}
	.uk-width-1-2 {
		width: 100%;
	}

	.nav-menuitem [class*=ico-]:not(.icon-pagehidden) {
		display: inline;
	}
}

/* Grid line items for all screens smaller than 1024px */
@media only screen and (max-width : 1024px) {

	.pt-lineitem .uk-width-1-1 {
		grid-column: 1 / span 3;
	}

	.pt-lineitem .uk-width-1-2.uk-padding-x-small {
		grid-row: 1;
		grid-column: 2;
	}

	.pt-lineitem.uk-grid {
		display: grid;
		grid-template-columns: 10% 48% 42%;
		grid-template-rows: auto auto;
	}

	.pt-lineitem.uk-grid .pt-col90.uk-padding-x-small {
		grid-column: span 2;
	}

	.pt-col40, .pt-col60 {
		grid-row: 1;
		grid-column: 2 / span 2;
	}

	.pt-col30 {
		grid-row: 2;
		grid-column: 1 / span 2;
	}

	.pt-col20 {
		grid-row: 2;
		grid-column: 3;
	}

	.lineitem-contenteditable-label, .lineitem-contenteditable-description {
		width: 100%;
	}

	.pt-col50 { width: 100%;}
	.pt-col10, .pt-col20, .pt-col30, .pt-col40, .pt-col60, .pt-col70, .pt-col80 { width: auto;}
	.pt-price {font-size: 1em;}

	.table-responsive {
		overflow: auto !important;
		overflow-y: hidden;
	}

	.pt:not(.uk-sortable) .pt-lineitem {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: auto auto;
	}

	.pt:not(.uk-sortable) .pt-lineitem .pt-col50,
	.pt:not(.uk-sortable) .pt-lineitem .pt-col70,
	.pt:not(.uk-sortable) .pt-lineitem .pt-col80 {
		grid-row: 1;
		grid-column: 1 / span 2;
	}

	.pt:not(.uk-sortable) .pt-lineitem .pt-col30 {
		grid-row: 2;
		grid-column: 1;
	}

	.pt:not(.uk-sortable) .pt-lineitem .pt-col20 {
		grid-row: 2;
		grid-column: 2;
	}

	.pt .totals {
		display: flex !important;
		flex-direction: column;
		align-items: end;
	}
    
    .totals.hidden {
        display: none !important;
    }

	.pt .totals .pt-col60,
	.pt.table-summary-wrapper .pt-lineitem .pt-col60 {
		display: none;
	}

	.pt .totals > div > div,
	.pt.table-summary-wrapper .pt-lineitem > div > div {
		line-height: 24px;
	}

	.pt .totals .pt-col20:not(.pt-lineitem-total),
	.pt.table-summary-wrapper .pt-lineitem .pt-col20:not(.pt-lineitem-total) {
		position: absolute;
		right: 9.5rem;
	}

	.pt.table-summary-wrapper .pt-lineitem {
		display: flex;
		flex-direction: column;
		align-items: end;
	}

	.pt-choice-button {
		word-break: normal;
		padding: 3px 9px;
		margin-left: -30px;
	}

}

/* iPads (portrait) & up to 1200px */
@media only screen and (min-width : 768px) and (max-width : 1200px) {
/* Styles */
	.container-normal, .container-widemode {
		padding-left: 40px;
		padding-right: 40px;
		max-width: 100%;
	}
}

/* Screen width up to 1500px */
@media only screen and (min-width : 1200px) and (max-width: 1500px) {
	.container-normal, .container-widemode {
		padding-left: 30px;
		padding-right: 30px;
		max-width: 100%;
	}
}

@media (max-width: 767px) {
    .topbar .button.white.wider.cancel {
        padding:0.5rem;
        width:43px;
    }

    .container-normal table {
        width: 100% !important;
    }

    .sidebar.slider-open {
        z-index: 1049;
    }

    .comment-popup {
        left: 50% !important;
        transform: translateX(-50%) !important;
        min-width: 90vw;
    }  

    .comment-popup .comment-name .timestamp {
        display: block;
        text-align: left;
        margin-top: 3px;
    }

    .comment-popup .comment {
        margin-top:8px;
    }

    .swal-modal {
        width: calc(100% - 20px);
    }

    .desktop-hide.d-flex {
        display:flex;
    }

    .lineitem-menuitems {
        position: relative;
        padding-top: .5rem;
        align-items: start !important;
    }

    .lineitem-menuitems.gap-05 {
        gap:.35rem;
    }

    .topbar .button:not(.tooltipText).mobile-hide {
        display:none;
    } 

    .topbar .ico-hamburger, .topbar .ico-close {
        font-size: 2rem;
        align-self: center;
        height:100%;
        display: flex;
        align-items: center;
    }

    .topbar .ico-hamburger::before, .topbar .ico-close::before {
        top: -1px;
    }

    .block-menuitems {
        left: 5px;
        top:5px;
    }

    #comment-insert-popup {
        max-width: 90% !important;
        width: 90% !important;
        left:5% !important;
        right:5% !important;
        min-width: unset;
      }

    /*PRICING TABLE RESPONSIVE STYLES*/
    .pt-container .addblock a:not(.restore).ico-editor-line-item, .pt-container .addblock a:not(.restore).ico-editor-section-title, .pt-container .addblock a:not(.restore).ico-discounts {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 80%;
        margin: 0rem auto !important;
        padding: 10px;
    }

    .select2.select2-container {
        width: 100% !important;
    }

    .mobile-col {
        display: flex;
        flex-direction: column;
    }

    .mobile-col .form-textbox.half {
        width:100%;
    }

    .show-addblock .uk-width-1-1:not(.open):has(.add-menu-block:not(.opened)) {
        height:0;
    }

    .pt-lineitem.uk-grid:not(:first-of-type):not(.pt-section-title) {
        padding-top:1rem;
    }

    .tox-dialog {
        top:53px;
    }
}

@media (min-width: 768px) {
    .topbar .button:not(.tooltipText).desktop-hide {
        display:none;
    }
}