
@import "fileselect";

@function opencms-color-stops($color) {
	$opacity: 100%;
	$start: blend-overlay(rgba(#fff, $opacity/100%), $color);
	$end: $color;
	@return $start 2%, $end 98%;
}

@mixin o-visible-scrollbars {
	/* Makes OSX and iOS scrollbars always visible */
	::-webkit-scrollbar {
		-webkit-appearance: none;
	}
	::-webkit-scrollbar:vertical {
		width: 11px;
	}
	::-webkit-scrollbar:horizontal {
    	height: 11px;
	}
	::-webkit-scrollbar-thumb {
    	border-radius: 8px;
    	border: 2px solid white; /* should match background, can't be transparent */
    	background-color: rgba(0, 0, 0, .5);
	}
	::-webkit-scrollbar-track {
    	background-color: #fff;
    	border-radius: 8px;
	}
}

@mixin o-workplace-form-wide {
	.o-formlayout-workplace-main {
		.v-formlayout-row .v-formlayout-captioncell {
			width: 20% !important;
		}

		.v-formlayout-row .v-formlayout-contentcell {
			width: 80% !important;
		}

	}
}

@mixin o-workplace-form-narrow($stylename: o-formlayout-workplace-main) {
	.#{$stylename} {
		.v-formlayout-row .v-formlayout-captioncell {
			display: inline-block;
			margin-left: 0px !important;
			padding-left: 0px !important;
		}

		.v-formlayout-row .v-formlayout-errorcell {
			display: inline-block;
			margin-left: 0px !important;
		}

		.v-formlayout-row .v-formlayout-contentcell {
			display: block;
		}

		tr.v-formlayout-row {
			display: block;
			padding-left: 8px;
			padding-right: 8px;
		}

		.v-formlayout-row > td {
			padding-top: 0px !important;
		}
	}
}

@mixin opencms {
	@include valo;
  	.o-info-dialog-small{
		width:270px !important;
	}
  	.o-info-dialog {
  		width:400px;

		& p {
			margin:0px;
		}

  		& div{
  			overflow: hidden;
  			margin-bottom: 0px;
			line-height:1.3;
  			width:100%;
  		}

  		& div.o-info-dialog-name {
  			float:left;
  			white-space:normal;
  		}

  		& div.o-info-dialog-value {
  			text-align:right;
  		}

  	}
  	
    .o-info-panel{
		.v-panel-caption{
			font-weight: 700;
		}
	}
	
	.o-gallery-alert-in-use {
		color: white;
        background-color: $alkacon-red;
        background-image: linear-gradient(to bottom, $alkacon-red 0%, $alkacon-red 100%);
	}
	
	.o-optimize-gallery-warning {
		background-color: rgb(255, 255, 204);
	}
	
	.o-optimize-gallery-preview-panel.o-optimize-gallery-preview-panel.o-optimize-gallery-preview-panel {
		overflow: hidden !important;
	}
	
	.o-optimize-gallery-note {
		padding-top: 4px;
		padding-bottom: 4px;
		padding-left: 6px;
	}
	
	.o-optimize-gallery-header {
		.v-absolutelayout-margin {
			overflow: visible !important;
		}
	}

	
	.o-gallery-form .v-formlayout-contentcell, .o-gallery-form .v-formlayout-captioncell {
		padding-top: 4px;
	}
	
	.o-gallery-grid-row-odd {
		background-color: $gray-light;
	}

	.v-Notification.error {
		@include valo-notification-error-style(v-Notification);

	}

	div.v-Notification.warning {
		@include valo-notification-closable-style(v-Notification);
		&:after{
			top: 10px;
			border: 0px;
			margin-top:0px;
			font-size: 30px;
		}

		max-width: 600px;
		width:600px;
		text-align:left;
		padding: 0px 0px;
		border-color: #ac7c00;
		border-width: 2px;
		border-style: solid;

		.popupContent{

		}
		
		.o-broadcast-message { 
			background-color: white;
			padding: 10px;
		}

		.v-Notification-caption{
			visibility:hidden;
			position: absolute;
		}

		.v-Notification-description{
			visibility: hidden;
			position: absolute;
		}

		& p{
		border-top: 1px solid #c9c9c9;
		 background: #FFFFFF;
		 padding: 5px;
		 margin:0px;

		 	& img{
			float:left;
			margin-top: 3px;
    		margin-right: 10px;
    		background-color: white;
    		border: 2px solid;
    		border-radius: 3px;
    		padding: 1px;
			}

			& em{
			padding-top:20px;
			}

			&:nth-child(even){
			border-top: 0px solid #c9c9c9;
		 	position: relative;
		 	background: inherit;
		 	padding:10px;
			}

			&:last-child{
		 	visibility:hidden;
		 	position:absolute;
			}
		}
	}

	div.v-Notification {
		@include valo-notification-closable-style(v-Notification);
		&:after{
			top: 20px;
		}
		max-width: 600px;

		.v-Notification-caption{
			white-space: normal;
		}
	}

	div.v-label-success, div.v-label-failure{
		font-size: $v-font-size;
		padding-left: 10px;
		padding-right: 40px;
		position: relative;

		&:before{
			position: absolute;
			top: -1px;
			right: 8px;
			font-size: 32px;
			margin: 0;
		}
	}

	/* Overrides to the valo theme */
	div.v-panel-caption {
		@include valo-panel-caption-style($o-dark-background-color);
	}

	div.v-panel-v-disabled{
		background: $o-medium-background-color;
	}

	.v-formlayout .v-caption{
		font-size: $v-font-size;
	}

	.v-customcomponent-error input.v-textfield{
		@include valo-textfield-error-style;
	}

	/* Fixing inline icon position. */
	.v-caption-inline-icon{
		position: relative;
		.v-icon{
			top: 1px;
		}
	}

	/* Making scroll bars always visible on combo box selects */
	.v-filterselect-suggestpopup{
	 	 @include o-visible-scrollbars;
	}

	.v-filterselect-suggestpopup .gwt-MenuItem.v-filterselect-item-bold{
	 	font-weight: 800;
	 }

	/* Fix for disabled menu items - especially for non-collapsible table columns. */
	.gwt-MenuItem span.v-disabled {
		display: none;
	}

	/* Toolbar drop down */
	.v-popupview.v-popupview-o-navigator-dropdown{
		color: inherit;
	}

	div.v-popupview-popup.v-popupview-popup-o-navigator-dropdown{
		margin-top: 55px !important;
		margin-left: -10px !important;
		border: 4px solid $v-window-background-color;

		.popupContent{
			max-width: 352px;

			.v-button{
				margin-bottom: 3px;
			}
		}
	}

	.v-window.o-dropdown{
		overflow: visible !important;
		&:after {
			content: "";
			top: -2px;
			right: 12px;
			height: 40px;
			width: 40px;
			position: absolute;
			transform: rotate(45deg);
			background: $v-window-background-color;
			z-index: -1;
		}

		.v-window-closebox, .v-window-closebox:hover {
			position: fixed;
			top: -10000px;
			left: -10000px;
			width: 20000px;
			height: 20000px;
			color: transparent;
			z-index: -1;
		}

		.v-window-contents {
			overflow: hidden;
			border-radius: 4px;
			position: relative;
			z-index: 10;
			> .v-scrollable > div{
				background: $v-app-background-color;
			    color: valo-font-color($v-app-background-color);
			    margin: 4px;
			    padding: $v-overlay-padding-vertical $v-overlay-padding-horizontal;
			    width: auto !important;
			}
	    }
	}

	/* Toolbar menu pointy corner */
	div.o-toolbar-menu-corner{
		width: 40px;
		height: 10px;
		top: -14px;
		position: absolute;
		overflow: hidden;
		&:after {
			content: "";
			top: 8px;
			height: 40px;
			width: 40px;
			position: absolute;
			transform: rotate(45deg);
			background: $v-window-background-color;
		}
	}





	div.v-window {

		max-height: 95%;

		&.o-jspwindow {
	   		background-color: transparent;

	   		.v-browserframe {
	   		position: fixed !important;
	   		}
	   		.v-window-outerheader{
				display: none;
			}
		}

		&.o-close-on-background {
			overflow: visible !important;

			.v-window-closebox {
				position: absolute;
				color: transparent;
				top: -10000px;
				left: -10000px;
				right: -10000px;
				bottom: -10000px;
				width: auto;
				height: auto;
				z-index: -1;
			}
			.v-window-contents {
				position: relative;
				z-index: 2;

				>.v-scrollable:before {

				border-top:none;

				}
			}

		}

		.v-window-header, .v-window-closebox, .v-window-maximizebox, .v-window-restorebox {
			background-color: transparent;
			font-weight: bold;
			color: $gray-lighter;
			font-size: $v-font-size--large;
		}
		.v-window-closebox:hover, .v-window-maximizebox:hover, .v-window-restorebox:hover {
			color: $v-selection-color;
		}
		.v-window-outerheader{
			@include  linear-gradient(to bottom, opencms-color-stops($v-window-background-color), $v-window-background-color);

			&:after{
				border: none;
			}
		}

		.o-dialog > .v-spacing, .o-dialog > .v-expand> .v-spacing {
			height: $o-layout-window-margin;
		}

		.o-dialog-content, .v-window-contents > .v-scrollable > .o-dialog {
			padding: $o-layout-window-margin;
		}

		.o-sroll-x{
			overflow-x:auto;
		}
	}

	/* In case the window height is set explicitly, force dialog content height to 100% */
	.v-window[style~="height:"] .o-dialog{
		height: 100% !important;
	}

	div.o-full-width-padding {
		display: block;
		width: auto !important;
		padding: 2px;
	}

	.o-reduced-spacing > .v-spacing{
		height: $o-layout-reduced-spacing;
		width: $o-layout-reduced-spacing;
	}

	.o-padding-horizontal{
		padding: 0 10px;
	}

	.o-spacing-5 > .v-spacing {
		height: 5px;
		width: 5px;
	}

	.v-panel-content > .v-margin-left.o-reduced-margin {
		padding-left: $o-layout-reduced-margin;
	}

	.v-panel-content > .v-margin-top.o-reduced-margin {
		padding-top: $o-layout-reduced-margin;
	}

	.v-panel-content > .v-margin-right.o-reduced-margin {
		padding-right: $o-layout-reduced-margin;
	}

	.v-panel-content > .v-margin-bottom.o-reduced-margin {
		padding-bottom: $o-layout-reduced-margin;
	}

  	.v-panel-content > .o-no-padding{
  		padding: 0px !important;
  	}

	.o-responsive{
		display: block;
		background: $v-app-background-color;
	}

	.o-state-deleted {
		text-decoration: line-through;
	}

	.o-state-changed {
		color: $o-state-changed-color;
	}

	.o-state-new {
		color: $o-state-new-color;
	}

	.o-project-other {
		color: $o-state-other-project-color;
	}

	.o-expired {
		font-style: italic;
	}

	.v-formlayout.o-form-less-margin{
		@include valo-formlayout-margin(14px);
	}

	@include o-workplace-form-narrow(o-formlayout-narrow);

	.o-responsive[width-range~="1241px-"]{
		/* big screen styles */
		.o-toolbar{
			.o-toolbar-items-right{
				width: 520px;
			}
		}
		@include o-workplace-form-wide;
	}

	.o-responsive[width-range~="0-1000px"]{
		/* small screen styles */
		@include o-workplace-form-narrow;

		.o-toolbar{
			.o-toolbar-inner{
				margin: 0 5px;
			}
			.o-toolbar-items-right{
				width: 350px;
			}
			.o-toolbar-items-left{
				margin-left: -10px;

				.o-toolbar-app-indicator{
					display: none;
				}
			}
			div.o-toolbar-center {
				span.o-toolbar-logo{
					display: none;
				}
			}
		}
		.o-app-info{
			padding: 0;
			height: 42px;
		}
		.v-margin-left{
			padding-left: $o-layout-window-margin;
		}
		.v-margin-right{
			padding-right: $o-layout-window-margin;
		}
		.v-margin-bottom{
			padding-bottom: $o-layout-window-margin;
		}
		.v-margin-top{
			padding-top: $o-layout-window-margin;
		}

		.o-workplace-maxwidth {
			&.v-margin-left{
				padding-left: $o-layout-window-margin;
			}
			&.v-margin-right{
				padding-right: $o-layout-window-margin;
			}
		}
	}

	.o-responsive[width-range~="1001px-1240px"]{
		/* medium screen styles */
		@include o-workplace-form-wide;

		.o-toolbar{
			.o-toolbar-items-right{
				width: 400px;
			}
		}
	}

	.o-resource-icon{
		display: inline-block;
		height: 32px;
		width: 32px !important;
		position: relative;
		padding: 4px !important;
		box-sizing: border-box;
		vertical-align: middle;

		.o-icon-overlay, .o-page-icon-overlay{
			display: block;
			height: 16px;
			width: 16px;
			position: absolute;
			z-index: 2;
			margin: 0;
		}
		.o-icon-overlay{
			top: 10px;
			left: 8px;
		}

		.o-page-icon-overlay{
			top: 14px;
			left: 16px;
		}

		.o-lock-shared, .o-lock-user, .o-lock-other, .o-lock-publish, .o-state-changed, .o-state-new, .o-online-folder, .o-sibling{
			position: absolute;
			color: transparent;
			z-index:2;
		}
		.o-lock-shared, .o-lock-user, .o-lock-other, .o-lock-publish{
			bottom: 0;
			right: 0;
		}
		.o-sibling{
			bottom: 0;
			left: 0;
		}
		.o-state-changed, .o-state-new, .o-online-folder {
			top: 0;
			right: 0;
		}
	}

	.o-richtextarea-reduced {

		.gwt-RichTextToolbar div:nth-child(4),
		.gwt-RichTextToolbar div:nth-child(5),
		.gwt-RichTextToolbar div:nth-child(6),
		.gwt-RichTextToolbar div:nth-child(7),
		.gwt-RichTextToolbar div:nth-child(8),
		.gwt-RichTextToolbar div:nth-child(9),
		.gwt-RichTextToolbar div:nth-child(10),
		.gwt-RichTextToolbar div:nth-child(11),
		.gwt-RichTextToolbar div:nth-child(12),
		.gwt-RichTextToolbar div:nth-child(13),
		.gwt-RichTextToolbar div:nth-child(15),
		.gwt-RichTextToolbar select:nth-child(1),
		.gwt-RichTextToolbar select:nth-child(3){
				display:none;
			}

	}

	textarea.o-shell-terminal, .o-shell-terminal.o-report{
		    display: block;
    		font-family: monospace;
    		background: #300a24;
    		color: white;
    		white-space: pre;
		}

	.o-app-info{
		display: block;
		width: 100%;
		height: 48px;
		padding: 0 12px;
		border-bottom: valo-border($border: $v-border, $color: $v-app-background-color, $strength: 1);
	}

	.o-app-content{
		display: block;
		background: $v-background-color;
	}

	.o-main{
		position: absolute;
		top: $toolbar-height;
		left: 0;
		right: 0;
		bottom: 0;
		/* override the size-full setting required by vaadin layout manager */
		height: auto !important;
	}

	.o-hidden-toolbar .o-main {
		top: 0;
	}

	/* Resource info box */
	.v-panel.o-resource-info{
		@include linear-gradient(to bottom, $v-app-background-color 0%, $v-app-background-color 48%, $o-medium-background-color 52%, $o-medium-background-color 100%);

		.v-panel-content-o-resource-info > .v-horizontallayout {
			padding-left: 4px;
		}
	}


	.o-resourceinfo-directlink .o-resinfo2 {
		 @include linear-gradient(to bottom,#fffae8 0%,#fffae8 48%,#fbdaac 52%,#fbdaac 100%);
	}

	*[location="buttonContainer"] > * > * > .o-resinfo2 {
		margin-top: -1px;
	}
	
	.o-broken-links .o-deleted .o-resinfo2 .o-resinfo-top > * {
		text-decoration: line-through;
	}

	.o-resinfo2 {
		 border: 1px solid #ccc;
		 border-radius: 4px;
		 @include linear-gradient(to bottom, $v-app-background-color 0%, $v-app-background-color 48%, $o-medium-background-color 52%, $o-medium-background-color 100%);
		 height: 38px;
		 display: -ms-flex;
		 display: flex;

		 .o-resinfo-top, .o-resinfo-bottom {
			vertical-align: middle;
			line-height: 18px;
			font-face: Open Sans,sans-serif;
			color: $v-font-color;
		}

		.o-resinfo-top > *, .o-resinfo-bottom > * {
			white-space: nowrap;
			overflow: ellipsis;
		}

		.o-resource-icon {
			margin-top: 2px;
		}

		.o-resource-icon.o-notranslation {
			color: $alkacon-red;
			font-size: 24px;
			margin-top: -10px;
			margin-left: -2px;
		}

		.o-resinfo-top {
		  font-size: 14px;
		  font-weight: bold;
		  
		  input {
		    height: 18px;
        margin: 0;
        padding: 0;
        padding-bottom: 2px;
        font-weight: bold;
        font-size: 14px;
        width: 50%;
        border: 1px solid white;
        box-shadow: none;
		  }
		  
		  input:focus {
        border-radius: 2px;
        border: 1px solid black;
		  }
		}

		.o-resinfo-bottom {
		  font-size: 12px;
		}

		.o-resourceinfo-toolbar {
			visibility: hidden;
			color: #999;
		}

		.o-resourceinfo-toolbar:hover, .o-resourceinfo-toolbar:hover * {
			color: $v-font-color !important;
		}

		.o-resourceinfo-toolbar:hover .v-menubar.v-menubar-o-toolbar-button > .v-menubar-menuitem:hover {
			color: inherit;
		}

		.o-resourceinfo-toolbar * {
			font-size: 24px !important;
		}
		
		.o-toolbar-button .v-menubar-menuitem {
			padding: 2px !important;
		}

		.o-resourceinfo-toolbar .v-icon.opencms-font {
			font-size: 20px !important; 
		}

		&:hover .o-resourceinfo-toolbar {
			visibility: visible !important;
		}

		.o-resinfo-lines {
			overflow: hidden;
			flex: 1;
			padding-left: 5px;
			margin-top: 1px;
		}

		.o-resinfo-fav-lines {
			overflow: ellipsis;
			width: 250px;
			margin-top: 1px;

			.o-resinfo-project {
				font-size: 12px;
			}

			.o-resinfo-site {
				font-size: 14px;
			}

			& > * {
				vertical-align: middle;
				line-height: 17px;
				font-face: Open Sans,sans-serif;
				color: $v-font-color;
			}
		}

		.o-button-container {
			& > * {
				margin-right: 5px;
				margin-top: 7px;
			}
		}


		.o-resinfo-hidden-icon {
			margin-top: 8px;
			margin-right: 10px;
		}

	 }

	 .o-resourceinfo-weak .o-resinfo2 {
	 	  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 48%, rgba(240, 240, 242, 0.4) 52%, rgba(240, 240, 242, 0.4) 100%);
		  .o-resinfo-lines > * {
			color: rgba(71,71,71,0.4);
		  }
		  .o-resource-icon {
			opacity: 0.4;
		  }
	 }

	.o-resinfo2:hover .o-resinfo-hidden-icon {
		visibility: visible;
    }

    .o-resinfo2 .o-resinfo-hidden-icon {
    	cursor:pointer;
    }

	.o-resinfo2 .o-resinfo-top .o-internal-type-name { 
		font-weight: normal;
		font-size: 12px; 
		line-height: 18px;
		display: inline-block;
		&::before {
			content: "\00a0[";
		}
		&::after {
			content: "]";
		}
	}

    .v-menubar-menuitem-o-sitemap-notranslation {
      &, & * {
      	visibility: visible !important;
      	color: orange !important;
      }
    }

    .o-sitemap-notranslation {
    	color: orange !important;
    	font-size: 20px !important;
    	margin-top: 9px;
    }

     .v-filterselect-suggestpopup-o-sitemap-localeselect .v-icon {
    	color: #474747 !important;
    	font-size: 11px !important;
    }

    .o-sitemap-localeselect .v-icon {
    	color: #474747 !important;
    	font-size: 12px !important;
    	padding-top: 0.13em !important;
    }
    
    .o-sitemap-localeselect {
		width: 225px;
	}

    .o-pointer {
    	cursor: pointer;
    }

    .o-sitemap-tree-node-content .v-menubar-menuitem {
    	min-width: 24px !important;
    	padding-left: 0px !important;
    	padding-right: 0px !important;
    	&, & * {
    		font-size: 20px !important;
    	}
    }

    .o-sitemap-tree-node-content .v-menubar.v-menubar-o-toolbar-button {
    	padding-left: 6px;
    	padding-right: 6px;
    }


    .o-sitemap-locale-bar {

    	padding-left: 42px;

    	.v-filterselect {
    		margin-right: 30px;
    		vertical-align: middle;
    	}

    	.v-caption {
    		.v-captiontext {
    			vertical-align: middle;
				font-size: 16px;
				line-height: normal;
    		}
    		margin-right: 10px;
    		position: relative;
    		margin-top: -1px;
    	}
    }

   .o-wrap .v-checkbox{
   		white-space:normal !important;
   	}

    #sitemap-ui-overlays {
		.v-context-menu, div.v-menubar-submenu {
			.v-context-menu-item-basic-icon-container {
				width: 16px;
			}

			.v-context-menu-item-basic-text {
				padding: 0 0px 0 0px;
			}
		}

		.v-context-menu-item-basic, .v-context-menu-item-basic-submenu {
			padding-right: 11px;
		}
	}


	/* explorer bread crumb path input styles */
	.o-crumb-wrapper{
		position: relative;
		overflow: hidden; 

		.o-crumbs {
			white-space: nowrap;
			position: absolute;
			top:0;
			left: ceil($v-unit-size/6 + 2);

			.v-button-link {
				padding: 0 2px;
				color: $v-font-color;
				text-decoration: none;

				&:hover {
					color: lighten($v-link-font-color, 10%);
				}

				&:focus:after {
					box-shadow: none;
					border-color: transparent;
				}
			}

			&.o-crumbs-hidden{
				display: none;
			}
		}

		.v-textfield {
			color: transparent;
			transition: color 0.1s ease-in-out;

			&:focus {
				color: $v-font-color;
				transition: color 0.3s ease-in-out;
			}
		}
	}

	/* login form styles */
	.cmslogin-parent .cmslogin-box {
		position: absolute;
		left: 0;
		right: 0;
		top:0;
		bottom: 0;

		.o-dialog-button-bar .v-button {
  			min-width: 150px;
		}
	}

	.cmslogin-form {
		height: 100%;
	}
	
	.o-login-qr-code {
        border: 1px solid #d9d9d9; 
    }

	.o-login-form .o-login-logo{
		text-align: center;

		> span {
			vertical-align: top;
			display: inline-block;
  			height: 42px;
  			width: 170px;
  			background: $o-opencms-logo;
		}
	}

	.o-login-additional{

	padding-bottom: 10px;
	border-bottom: 1px solid #d9d9d9;
	}

	div.o-upload-drop{
		position: relative;
		background-color: $v-selection-color;

		> * {
			opacity: 0.6;
		}
	}
	
	#login-app-overlays #VAADIN_COMBOBOX_OPTIONLIST { 
		position: fixed !important;
	}

	/* fixes tooltip issues */
	.v-tooltip {
		z-index: 20001 !important;
	}

	.o-fake-window .v-window-outerheader {
		float: left;
		position: static;
		width: 100%;
		border-radius: 4px;

		&:after {
			border: none !important;
		}
	}

	@for $i from 1 through 40 {
		.o-max-height-#{$i*20} {
			max-height: 0px + ($i*20);
			overflow-y: auto;
		}
	}

	.login-dialog {
		background: $v-background-color;
	}

	.v-label.o-label-error {
		color: $red;
	}

	.o-dialog-form {
		.v-formlayout-row .v-formlayout-captioncell {
			width: 20% !important;
		}

		.v-formlayout-row .v-formlayout-contentcell {
			width: 80% !important;
		}
	}

	.v-horizontallayout.o-center-vertical{

			.v-expand{
				display: flex;
  				align-items: center;
  				justify-content: center;
			}
			.v-slot{

				height:unset;
			}
	}

	.o-error-dialog{
		.o-error-icon{
			padding-left: 12px;
			color: $red;
			font-size: 36px;
		}

		.o-warning-checkbox{
		    margin-left: 35px;
    		padding-left: 25px;
		}

		.o-warning-icon{
			padding-left: 12px;
			color: $orange;
			font-size: 36px;
		}
		.o-ok-icon{
			padding-left: 12px;
			color: $green;
			font-size: 36px;
		}
		.o-error-message {
			white-space: normal;
		}
		.o-error-details{
			position: relative;

			pre {
				white-space: pre-wrap;
				padding: 0 5px;
			}
		}

		.o-stacktrace-container {
			display: inline-block;
		}

		.o-hidden {
			display: none;
		}
	}

	.o-resource-info-horizontal {
		& > .v-spacing, & > .v-expand > .v-spacing {
			width: 6px;
		}
	}

	.o-workplace-maxwidth {
		max-width: 1200px;

		&.v-margin-left{
			padding-left: $toolbar-padding;
		}
		&.v-margin-right{
			padding-right: $toolbar-padding;
		}
	}

	.o-resource-info:hover .o-resinfo-hidden-icon {
		visibility: visible;
	}

	.o-resinfo-hidden-icon {
		visibility: hidden;
	}

	.o-resinfo-pointer .o-resource-info:hover {
		cursor: pointer;
	}

	.o-resource-info-title {
		margin-top: -1px;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: keep-all;
	}

	.o-resource-info-subtitle {
		margin-top: -1px;
	}

	.o-quicklaunch > .v-slot {
		margin-bottom: 10px;
	}
	
        .o-quicklaunch-editor .v-button-wrap > img {
            pointer-events: none; /* Fix for weird Chrome Drag/Drop bug with buttons that use images instead of font icons) */
        }

	.o-sitemap-tree-node {
		display: flex;
		margin-top: 2px;

		.o-sitemap-tree-node-right {
			-ms-flex: 1;
			flex: 1;
			min-width: 0px;
		}

		.o-sitemap-tree-node-children {
			display: block;
			padding-left: 4px;
		}

		.v-button:focus:after {
			box-shadow: none;
		}

		.o-sitemap-tree-opener {
			margin-top: 10px;
			color: #888888 !important;
			&:hover {
				color: #474747 !important;
			}
		}
	}

	.v-button.o-button-invisible {
		visibility: hidden;
	}

	/* history compare dialog styles */
	
	.o-text-diff {
		line-height: 1;
		margin: 0px;
	}

	div.df-add {
		font-family: monospace;
		font-size: 12px;
		background-color: #ccffcc;
		border-left: 4px solid darkgreen;
		display: inline;
	}
	div.df-rem {
		font-family: monospace;
		font-size: 12px;
		background-color: #fdc6c6;
		border-left: 4px solid darkred;
		display: inline;
	}
	div.df-skp {
		font-family: monospace;
		font-size: 12px;
		background-color: #fdfdc6;
		border-left: 4px solid olive;
		display: inline;
	}
	div.df-unc {
		font-family: monospace;
		font-size: 12px;
		border-left: 4px solid lightgrey;
		display: inline;
	}
	span.df-add {
		font-family: monospace;
		font-size: 12px;
		background-color: #58ff87;
	}
	span.df-rem {
		font-family: monospace;
		font-size: 12px;
		background-color: #ff8686;
		text-decoration: line-through;
	}
	span.df-unc {
		font-family: monospace;
		font-size: 12px;
	}

	.diffTypeChanged {

	}

	.diffTypeUnchanged {
		color: lightgray;
	}

	.diffTypeAdded {
		color: green;
	}

	.diffTypeDeleted {
		color: red;
	}

	.v-formlayout .o-form-row div.v-caption{
		position: absolute;
		top: 0;
		left: -($v-font-size + 2);
	}

	.o-security{
		position:relative;
		&:after{
			font-family: opencms-font;
    		font-size: 16px;
		    position: absolute;
    		right: 6px;
		    top: 2px;
		}
		&.o-security-invalid:after{
			content: "\e63f";
			color: $red;
		}
		&.o-security-weak:after{
			content: "\e61f";
			color: $orange;
		}
		&.o-security-strong:after{
			content: "\e61f";
			color: $green;
		}
		div.v-caption{
			position: absolute;
			top: 0;
			left: -($v-font-size + 2);
		}
	}

	.o-report-overlay {

		@include o-loading-overlay;
		z-index: 200000;

		.o-report-window{
			visibility: hidden;
			position: absolute;
			top: 40px;
			left: 20%;
			width: 60%;
		}
	}


	.o-report-show .o-report-overlay{
		.oc-spin-center{
			display: none;
		}
		.o-report-window{
			visibility: visible;
		}
	}

	.o-report {
		box-sizing: border-box;
		padding: 10px;
		margin: 0;
		background-color: $v-app-background-color;
		font-size: $v-font-size;
		white-space: nowrap;
		overflow-y: auto;
		border-radius: $v-border-radius;

		&.o-report-hidden {
			display: none;
		}
		&.o-report-popup-view {
			@include valo-overlay-style($animate-in: v-popup-animate-in 120ms, $animate-out: (valo-animate-out-fade 120ms));
			position: fixed;
			top:10%;
			left: 20%;
			height: 80%;
			width: 60%;
		}
		&.o-report-wrap{
			white-space: normal;
		}

		.o-report-content {
			@include user-select(text);
			.o-report-headline {
				color: $blue;
				font-weight: bold;
			}
			.o-report-note {
				color: $gray-dark;
			}
			.o-report-ok {
				color: $green;
			}
			.o-report-warn {
				color: $red;
				padding-left: 40px;
			}
			.o-report-error {
				color: $red;
				font-weight: bold;
				padding-left: 40px;
			}
			.o-report-exception {
				color: $red;
				font-weight: bold;
			}
			.o-report-stacktraceline {
				margin-left: 6ex;
			}
		}
	}

	.o-center {
		text-align: center !important;
	}

	.o-label-with-padding{
		padding:4px;
	}

  .o-module-complex-row .o-formrow-remove-button {
	margin-top: 8px;
  }

   .o-newmodule-folder-checkboxes {
   		padding-left: 0px;
   		padding-right: 0px;
   	}


	.o-measuring-height.o-dialog {
		&, .o-dialog-content-panel {
			height: auto !important;
		}
	}

	@include fileselect;

	.o-editablegroup-errorlabel {
		color: #ed473b;
	}

	.o-font-load-panel {
		position: absolute;
		left: -9999px;
		top: -9999px;

		*:nth-child(1)::after {
			content: "A";
			color: white;
			font-family: "Open Sans", sans-serif;
			font-weight: 800;
		}

	}

	.v-table, .v-table * {
	    /* Turn off Chrome scroll anchoring because it doesn't work with Vaadin tables and produces weird "jumping" effects when updating a table. */
		overflow-anchor: none;
	}
	& ~ .mce-tooltip, .mce-fullscreen {
		z-index: 200000 !important;
	}

	.o-dnd-area {
		min-height: 78px;
	}

	.v-progressbar{
		.v-progressbar-indicator{
			background-color: $cyan;
			border-color: $cyan;
			background-image:none;
		}
		&.v-disabled .v-progressbar-indicator{
			background-color: #AAAAAA;
    			border-color: #AAAAAA;
    			background-image: none;
		}

		&.o-full .v-progressbar-indicator{
			background-color: $alkacon-red;
    			border-color: $alkacon-red;
    			background-image: none;
		}

		&.o-nearlyfull .v-progressbar-indicator{
			background-color: $alkacon-orange;
    			border-color: $alkacon-orange;
    			background-image: none;
		}

	}

	.o-bookmarks-placeholder {
		display: -ms-flex;
		display: flex;
		flex-direction: column;
		height: 100%;

		& > * {
			&:nth-child(2) {
				text-align: center;
			}

			&:nth-child(1), &:nth-child(3) {
				flex: 1;
			}
		}
	}


	.o-setuptest-green {
		color: $green;
	}

	.o-setuptest-red {
		color: $alkacon-red;
	}

	.o-setuptest-yellow {
		color: $orange;
	}

	.o-logo-alkacon {
		background-image: url(img/alkacon-logo.svg);
		background-repeat: no-repeat;
		display: inline-block;
		width: 129px;
		height: 42px;
	}

	.o-logo-opencms {
		background-image: url(img/opencms-logo.svg);
		background-repeat: no-repeat;
		display: inline-block;
		width: 170px;
		height: 42px;
	}
	
	.o-resinfo-button-container {
		display: flex; 
		align-items: center; 
	}
	
	.o-gwt-contextmenu-button {
		& > *[role="button"] {
			vertical-align: middle;
		}
	}
	
	.o-gwt-contextmenu-button-margin {
		margin-right: 5px;
	}
	
	.o-resinfo2 .o-gwt-contextmenu-button {
		visibility: hidden;
	}
	
	.o-resinfo2:hover .o-gwt-contextmenu-button {
		visibility: visible;
	}

    .o-label-wrap { 
        white-space: normal !important;
    }
    
    .o-userdata-or {
        font-style: italic;
    }
    
    .o-res-site-info img {max-width: 24px;}
    
    .o-type-select-box {
		& > .v-icon {
			max-width: 16px;
			max-height: 16px;
		}
	}
	
	.o-userinfo-box .o-resource-icon > img {
		width: 23px;
		height: 23px;
	}
    
    .v-filterselect-suggestpopup-o-type-select-box {
		
		.gwt-MenuItem {
			display: flex;
			align-items: center;
		}
		
		.gwt-MenuItem .v-icon {
			max-width: 16px;
			max-height: 16px;
		}
		
	}
	
	.o-category-label {
		&, & * {
			white-space: nowrap;
		}
		
		.o-category-label-category {
			display: inline-block;
			background-color: lightgrey;
			border: 1px solid darkgrey;
			color: black !important;
			border-radius: 4px;
			margin-left: 2px;
			margin-right: 2px;
			padding: 4px;
		}
	}
	
	.v-tree-node-caption span.o-online-folder { 
		padding-right: 0px;
	}
	
	
}

.waggle{
	animation: waggle 0.1s 2;
}

@keyframes waggle {
    0% { transform: rotate(0deg); }
   33% { transform: rotate(3deg); }
   66% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
