#logoAndServicesHeader.gridWrap {
	margin: 0;
   	grid-template-areas:
    	"h1 h2 h3 h4 h5"
    	"h6 h7 h8 h9 h10"; 
grid-template-areas: "grid1 grid1 grid5 grid5 grid5" "grid6 grid6 grid6 grid6 grid6"; 
}
.divfoot_navigation_portal.gridWrap {
	margin: 0;
  	padding: 0;
   	grid-template-areas:
    	"f1 f2 f3 f4 f5"
    	"f6 f6 f6 f6 f10"; 
grid-template-areas: "grid11 grid12 grid13 grid14 grid15" "grid16 grid16 grid16 grid16 grid16"; 
}

#logoAndServicesHeader.gridWrap,
.gridWrap {
	align-items: center;
	display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(5, 1fr);
    gap: 0px 0px;
}

@media screen and (max-width: 768px){ 
	#logoAndServicesHeader.gridWrap, .gridWrap {
	padding:5px 0;
	}
}

.gridWrap {
	position:relative;
}

.editNavigationframe .alert {
	z-index:1103;
}
.editNavigationframe .alert-modal {
	z-index:1102;
}
.editNavigationframe .overlayContainer, .editNavigationframe .fullPopupContainer {
	z-index: 1101;
}

/*@media screen and (max-width: 1024px){ 
	#logoAndServicesHeader {
		grid-template-columns: repeat(4, 1fr);
	  	grid-template-columns: repeat(4, 25%);
	}
}*/

#logoAndServicesHeader .navbar-toggle {
	position:relative;
	top:0; left:0;
	margin:0 10px;
}
.editNavigationframe .gridElement,
.gridElement * { 
	pointer-events:all;
}
.gridElement {
	display:flex;
	justify-content: flex-start;
	align-content:flex-start;
	align-items:center;
	justify-self: flex-start;
	
	/*flex-wrap:wrap;*/
	align-content: center;
	
	height:100%;
	min-width:100%;
	
	pointer-events: none;

}
.gridElement:nth-child(3),
.gridElement:nth-child(4),
.gridElement.gridElementRight,
.gridElement:nth-child(5n+5) {
    align-self: center;
    justify-self: flex-end;
	justify-content: flex-end;
}

.divfoot_navigation_portal .sLink {
	font-size: 80%;
	text-transform: uppercase;
}

.divfoot_navigation_portal a.sLink {
	text-decoration:underline dotted;
	display:inline-block;
}

@media screen and (max-width: 768px){	
	 .divfoot_navigation_portal a.sLink, .divfoot_navigation_portal .sLink {
/* 		display:block; */
	margin-left:10px;
	}
}

.editNavigationframe .draggableEl {
	cursor:move !important;	
}
.editNavigationframe .draggableEl * {
	pointer-events:none;
}
.editNavigationframe .gridElement {
	outline:var(--border1);
}
.editNavigationframe .gridElement {
	outline:var(--border1);
	min-height:30px;
}
.editNavigationframe .gridElement.dragover {
	opacity:0.5;
	outline-color:var(--backgroundColor7);	
}
.onthedrag {
	opacity:0.2;
}

.js-dragClone {
	opacity:1;
	z-index:9000;
	position:absolute;
	pointer-events:none;
}

#gridElement_1 {
	grid-area:grid1;
}
#gridElement_2 {
	grid-area:grid2;
}
#gridElement_3 {
	grid-area:grid3;
}
#gridElement_4 {
	grid-area:grid4;
}
#gridElement_5 {
	grid-area:grid5;
}
#gridElement_6 {
	grid-area:grid6;
}
#gridElement_7 {
	grid-area:grid7;
}
#gridElement_8 {
	grid-area:grid8;
}
#gridElement_9 {
	grid-area:grid9;
}
#gridElement_10 {
	grid-area:grid10;
}

#gridElement_11 {
	grid-area:grid11;
}
#gridElement_12 {
	grid-area:grid12;
}
#gridElement_13 {
	grid-area:grid13;
}
#gridElement_14 {
	grid-area:grid14;
}
#gridElement_15 {
	grid-area:grid15;
}
#gridElement_16 {
	grid-area:grid16;
}
#gridElement_17 {
	grid-area:grid17;
}
#gridElement_18 {
	grid-area:grid18;
}
#gridElement_19 {
	grid-area:grid19;
}
#gridElement_20 {
	grid-area:grid20;
}

.gridWrapConfiguration {
	grid-template-areas: "h1 h2 h3 h4 h5" "h6 h7 h8 h9 h10";
	grid-template-rows: repeat(2, 50%);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
	transition: transform 0.2s;
}
.gridHeader .gridWrapConfiguration {
	transform: translateY(-100%);
}
.gridFooter .gridWrapConfiguration {
	transform: translateY(100%);
}
.gridFooter .gridWrapConfiguration.visible,
.gridHeader .gridWrapConfiguration.visible {
	transform: translateY(0);
}

.gridWrapConfiguration .gridElement {
	outline:1px dotted var(--backgroundColor38);
	background:rgb(255 255 255 / 80%);
	justify-content: center;
	position:relative;
	cursor:pointer;
}
.gridWrapConfiguration .gridElement:hover { 
	background:rgb(222 255 241 / 80%);
}
.gridWrapConfiguration .gridElementSelected {
	position:absolute;
	left:0;
	top:0;
	height:100%;
	min-height:45px;
	width:100%;
	z-index:1;
    background: rgb(195 211 219 / 85%);
    /*transition: width 0.2s;*/
    outline: 2px solid var(--backgroundColor1);
    outline-offset: -4px;
    padding:0.9em 20px;
	text-align:right;
	cursor:default;
}

.gridElementSelected.ui-resizable-resizing,
.gridWrapConfiguration .gridElementSelectedActive {
	/*pointer-events:none;		*/
	outline-color: var(--borderColor4);
}

.gridWrapConfiguration .gridElementSelected a { 
		pointer-events:all;
		text-decoration:none;
}
/*.gridWrapConfiguration .gridElementSelected a:before { 
	color:#fff;	
}*/
.gridConfigurationPanel {
	position:fixed;
	left:20px; top:50%;
	z-index:1101;
	transform: translateY(-50%);
	background:var(--backgroundColor2);
	border:2px solid var(--backgroundColor1);
	border-radius:5px;
	padding:10px 15px;	
}

.gridConfigurationPanel a {
	display:block;
	text-decoration:none;
	margin:0 0 0.7em;
}
.gridConfigurationPanel [class^="iconfont-"], .gridConfigurationPanel [class*=" iconfont-"] {
	margin-right: 7px;
	vertical-align:bottom;
}

.gridConfigurationPanel .overlay {
	position:fixed;
	left:-2px; top:-25%;
}

.gridConfigurationPanel button[disabled] {
	opacity:0.3;
}
.gridConfigurationPanel button {
	border:none;
}

.triggerAllGridAreasSelectedMessage {
	display:none;
}

.gridConfigurationPanelFooter {
	margin-top:1.5em;	
	display:flex;
}

.gridConfigurationPanel button,
.gridConfigurationPanel button span {
	text-decoration:none;
}
.gridConfigurationPanelFooter .iconfont-arrow_rotate_back {
	margin-right:20px;
}
.gridConfigurationPanelFooter button.iconfont-tick:before {
	display:none;
}

.gridConfigurationPanelFooter > button.submit_image_text:disabled,
.gridConfigurationPanelFooter > button {
	position:relative;
	padding-left:21px;
	margin-left:17px;
}
.gridConfigurationPanelFooter > button:before {
	position:absolute;
	left:0;
	top:0.35em;
}

#gridForm button.iconfont-arrow_rotate_back, #gridForm button.iconfont-delete {
	margin-top:0.8em;
}

#gridForm\:confsrcSelect_panel {
	z-index:1101 !important;
}

.draggableEl_loggedin {
	display:none !important;
}
.editNavigationframe.loggedin .draggableEl_loggedin,
.editNavigationframe_loggedinView .draggableEl_loggedin {
	display:block !important;
}
.editNavigationframe.loggedin .draggableEl_loggedout,
.editNavigationframe_loggedinView .draggableEl_loggedout {
	display:none !important;
}
.editNavigationframe_loggedinView.loggedin .draggableEl_loggedin {
	display:none !important;
}
.editNavigationframe_loggedinView.loggedin .draggableEl_loggedout {
	display:block !important;
}

.gridDDZoneWrap {
	position:fixed;
	right:20px; top:50%;
	z-index:1100;
	transform: translateY(-50%);
	width:500px;	
}
#gridDDZone .draggableEl_loggedin,
#gridDDZone .draggableEl_loggedout {
	display:block !important;
}

#gridDDZone {	
	background:var(--backgroundColor2);
	border:2px dotted var(--backgroundColor1);
	border-radius:5px;
	padding:10px 15px;	
	overflow:auto;
	height:200px;
}

#gridDDZone * {
	float:none !important;
}
#gridDDZone .draggableEl {
	border-bottom:1px solid var(--backgroundColor1);
	margin:0.5em 0;
	padding-bottom:0.5em;
}
#gridDDZone .draggableEl {
	width:100%;
	max-height:100px;
	overflow:hidden;
}
#gridDDZone.dragover {
	border-color:var(--backgroundColor7);
}

.gridDDZone-hide {
	opacity:0.2;	
	pointer-events:none;
}

.ui-resizable-handle {
	position:absolute;	 
	top:2px;
	width:10px; 
	height:calc(100% - 4px); 
	background-color:var(--backgroundColor1);	
	cursor:e-resize;
}
.ui-resizable-w {
	left:0;
	border-radius:5px 0 0 5px;
}

.ui-resizable-e {
	right:0;
	border-radius:0 5px 5px 0;
}

.editNavigationframe {
	overflow:hidden !important;
	margin:0 !important;
}
.editNavigationframe .contentFrameInnerWrap {
	height:50vh;
	overflow:hidden;
}
.editNavigationframe .contentFrameInnerWrap > form > *:not(.messages-infobox-container),
.editNavigationframe .contentFrameInnerWrap > *:not(form) {
	display:none;
}

.editNavigationframe .content_portal_hisinone {
	height:50vh;
}

.editNavigationframe .navbandWrap {
	display:none;
}

body.editNavigationframe .wrapper {
	border:none;
}

.editNavigationframe .curtainBoxCallBackBackground {
	z-index:1102;
}



@keyframes bye {
  0% {
    transform: scale(1) rotate(-1deg)
  }
  50% {
    transform: scale(1.1) rotate(-2deg)
  }
  100% {
    transform: scale(0) rotate(3deg)
  }
}

@keyframes begindrag {
  0% {
    transform: rotate(0deg)
  }
  10% {
    transform: rotate(-8deg)
  }
  30% {
    transform: rotate(6deg)
  }
  55% {
    transform: rotate(-3deg)
  }
  80% {
    transform: rotate(1deg)
  }
  100% {
    transform: rotate(-1deg)
  }
}
 


.onthedrag.js-dragClone {
	animation: begindrag .8s ease forwards;
	transform: rotate(-1deg);

}

.onthedrag.js-dragClone.bye {
  animation: bye .4s ease forwards;
}