:root {
	--primary-color: #0a71b4;
	--secondary-color: #484848;
	--menubar-background: #EEEEEE;
	/*
		--dl-border-border: 1px solid red;
    	--dl-border-radius: 4px;
    	--dl-border-margin: 4px;
    	--dl-border-padding: 4px;
    */
}

p, ul, li {
    padding: inherit;
    margin: inherit;
}

.dl-sticky {
	position: sticky;
	top: 0px;
}

.dl-buttonBase {
    background: #dce5ea;
	color: #0a71b4;
}

.dl-border {
    border-color: #dce5ea;
}

.dl-item.gr-item {
    background: #0a71b4;
    color: white;
    padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	border-radius: 4px;
}

.dl-item.gr-item:hover {
    background: #0a71b4CC;
}

.dl-item.gr-item > img {
    filter: invert(1);
}

.gr-image {
	cursor: pointer;
	margin-top: auto;
	margin-bottom: auto;
}

.gr-button {
    background: #0a71b4;
    color: white;
    display: flex;
    margin: 8px;
}

.panel-app > .panel-body > .panel-menu {
    background: #dce5ea;
}

.panel-app > .panel-start {
    background: #0a71b4;
}

.panel-app > .panel-start > .dl-item > img {
    filter: invert(1);
}

.my-dialog .dialogTopCenterInner {
    color: #0a71b4;
}

fieldset.panel-fieldset.id > legend {
	color: #0a71b4;
}

.gwt-DecoratedStackPanel .stackItemMiddleCenterInner {
	background: #0a71b4;
}

.gwt-DecoratedStackPanel .gwt-StackPanelItem-selected .stackItemMiddleCenterInner {
	background: #0a71b4;
}

.panel-logo {
    display: flex;
    flex-direction: column;
    padding: 0px;
	background: white;
}

.panel-logo .panel-img > img {
    width: 100%;
    height: auto;
}

.panel-logo .label-title {
    margin: 8px;
	font-weight: bold;
	color: #0a71b4;
}

/* login */
.panel-superlogin > .logo {
    width: 100%;
    height: 80px;
    background: center;
    background-image: url("/BancAliments/images/logo.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.panel-superlogin > .logo > img {
    display: none;
}

/* floating-label-widget */
.floating-label-widget {
	position: relative;
	margin: 4px 16px;
	padding-top: 8px;
	padding-bottom: 12px;
	display: flex;
	align-items: center;
}

.floating-label-widget > *::placeholder {
	color: transparent;
}

.floating-label-widget > select {
	margin: 0px;
	margin-top: 0px;
	padding-left: 0px;
	padding-right: 30px;
	padding-top: 4px;
	padding-bottom: 4px;
	border: none;
	border-bottom: 2px solid #0a71b450;
	transition: border-color 250ms;
	background-color: transparent;
	outline: unset;
	height: 34px;

	&:focus {
		outline: none;
		border-bottom-color: #0a71b4;
	}

	&::placeholder {
		color: transparent;
	}
}

.floating-label-widget > input {
	padding: 16px 0px;
	padding-right: 30px;
	border: none;
	border-bottom: 2px solid #0a71b450;
	transition: border-color 250ms;
	background-color: transparent;

	&:focus {
		outline: none;
		border-bottom-color: #0a71b4;
	}

	&::placeholder {
		color: transparent;
	}
}

.floating-label-widget > .label {
	position: absolute;
	top: 24px;
	left: 0;
	color: #0a71b450;
	pointer-events: none;
	transform-origin: left center;
	transition: transform 250ms;
}

.floating-label-widget > .label-error {
	position: absolute;
	left: 4px;
	bottom: 0px;
	font-size: x-small;
	color: #FF0000;
}

.floating-label-widget > textarea {
	padding: 16px 0px;
	padding-right: 30px;
	border: none;
	border-bottom: 2px solid #0a71b450;
	transition: border-color 250ms;
	background-color: transparent;

	&:focus {
		outline: none;
		border-bottom-color: var(--primary-color);
	}

	&::placeholder {
		color: transparent;
	}
}

.floating-label-widget > input:focus + .label, .floating-label-widget > input:not(:placeholder-shown) + .label {
	transform: translateY(-150%) scale(0.75);
	color: var(--primary-color);
}

.floating-label-widget > select:focus ~ label, .floating-label-widget > select:not([value=""]):valid ~ .label {
	transform: translateY(-150%) scale(0.75);
	color: var(--primary-color);
}

.floating-label-widget > textarea:focus + .label, .floating-label-widget > textarea:not(:placeholder-shown) + .label {
	transform: translateY(-150%) scale(0.75);
	color: var(--primary-color);
}

.floating-label-widget > textarea:focus + .label, .floating-label-widget > span + .label {
	transform: translateY(-150%) scale(0.75);
	color: var(--primary-color);
}

.floating-label-widget > input[type="checkbox"] {
	height: initial;
	width: initial;
}

.floating-label-widget > input[type="number"] {
	text-align: right;
}

.floating-label-widget > input[type="date"] {
    width: 140px;
}

.floating-label-widget > input.calendar {
    width: 140px;
	background-repeat: no-repeat;
    background-size: 24px;
    background-image: url("images/date.png");
    background-position: right;
    padding-right: 26px;
}

.floating-label-widget > input[type="tel"] {
    width: 140px;
    background-repeat: no-repeat;
    background-size: 24px;
    background-image: url("images/phone.png");
    background-position: right;
    padding-right: 26px;
}

.floating-label-widget > input[type="email"] {
    background-repeat: no-repeat;
    background-size: 24px;
    background-image: url("images/email.png");
    background-position: right;
    padding-right: 26px;
}

.floating-label-widget > input[type="color"] {
    background-repeat: no-repeat;
    background-size: 24px;
    background-image: url("images/palette.png");
    background-position: right;
    padding: 0px 35px 0px 0px;
    height: 40px;
}

.floating-label-widget > input[list] {
    background-repeat: no-repeat;
    background-size: 24px;
    background-image: url("images/menu.png");
    background-position: right;
    padding-right: 26px;
}

.floating-label-widget > input[type=date]::-webkit-datetime-edit, .floating-label-widget > input[type=datetime-local]::-webkit-datetime-edit {
    opacity: 0;
}

.floating-label-widget > input[type=date]:focus::-webkit-datetime-edit, .floating-label-widget input[type=datetime-local]:focus::-webkit-datetime-edit, .floating-label-widget > input input:not([value=""])::-webkit-datetime-edit {
    opacity: 1;
}

.floating-label-widget > input[required] + .label:after, .floating-label-widget > select[required] + .label:after {
	content: "*";
}

.floating-label-widget > .required + .label:after {
  content: "*";
}

.floating-label-widget > input:disabled, .floating-label-widget > input[readonly=true] {
    border-bottom: 2px solid transparent;
}

.floating-label-widget > input.error {
    border-bottom: 2px solid #FF000050;
}

/* label-value */
.label-value {
	margin: 4px 16px;
	padding-top: 4px;
	display: flex;
	flex-direction: column;
}

.label-value > .label {
	color: #0a71b4;
	font-size: x-small;
}

.label-value > .value {
	white-space: pre;
	max-width: fit-content;
	min-width: 120px;
	padding-top: 4px;
	padding-bottom: 4px;
	white-space: break-spaces;
}

/* form-voluntari */
.voluntariat-panel .gwt-CheckBox {
	color: #0a71b4;
}

.voluntariat-panel {
    max-width: 800px;
    width: 100%;
    margin: auto;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.voluntariat-panel > .caption-panel {
    background: #0a71b4;
    color: white;
    display: flex;
}

.voluntariat-panel > .caption-panel > .content {
	margin: 8px;
	flex: 1;
}

.voluntariat-panel > .caption-panel > .content > .caption {
	display: flex;
	align-items: center;
}

.voluntariat-panel > .caption-panel > .content > .caption > .image-icon {
	filter: invert(1);
	width: 32px;
	cursor: pointer;
}

.voluntariat-panel > .caption-panel > .content > .caption > .label-caption {
    font-size: x-large;
    font-weight: bold;
	padding-left: 8px;
}

.voluntariat-panel > .caption-panel > .content > .label-description {
    padding-top: 8px;
}

.voluntariat-panel > .caption-panel > .image-logo {
    height: 48px;
    width: auto;
    margin: auto 8px;
}

.voluntariat-panel > .label-step {
    margin-top: -8px;
    margin-bottom: 4px;
}

.voluntariat-panel > .caption-panel > .content > .panel-path {
    display: flex;
	font-size: smaller;
}

.voluntariat-panel > .caption-panel > .content > .panel-path > .label-path, .voluntariat-panel > .caption-panel > .content > .panel-path > .label-separator {
    color: white;
    padding: 2px;
}

.voluntariat-panel > .caption-panel > .content > .panel-path > .label-path.dl-link:hover {
    color: #dbdbdb;
}

/*panel-fieldset */
.panel-fieldset {
	border-color: #0a71b450;
}

.panel-fieldset > legend {
	color: #0a71b4;
}

.panel-fieldset.header > legend {
    font-size: large;
    font-weight: bold;
	-webkit-user-select: text;
	user-select: text;
}

.voluntariat-panel .buttons-panel {
	display: flex;
	gap: 16px;
}

/* panel-gr */
.panel-gr > .panel-header {
    color: white;
    background: #0a71b4;
    background: linear-gradient(90deg, rgba(10,113,180,1) 5%, rgb(74 175 255) 100%);
    display: flex;
	font-weight: bold;
	padding: 8px;
}

.panel-gr > .panel-header > .image-icon {
    filter: invert(1);
    cursor: pointer;
	padding: 4px;
}

.panel-gr > .panel-header > .label-caption {
	margin: auto 8px;
	cursor: default;
	flex: 1;
}

/* mode-voluntari */
.mode-voluntari .window.login {
	display: none;
}

.mode-voluntari .panel-app > .panel-start {
	display: none;
}

/* panel-options */
.panel-options .option {
    background: #0a71b4;
    color: white;
}

.panel-options .option.grup_ca:after {
	content: "GRUP";
	position: absolute;
	top: 4px;
	left: 24px;
    bottom: 0px;
    font-size: x-small;
    padding: 2px;
}

.panel-options .option.grup_es:after {
	content: "GRUPO";
	position: absolute;
	top: 4px;
	left: 24px;
    bottom: 0px;
    font-size: x-small;
    padding: 2px;
}

/* panel-keyword */
.panel-keyword {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

.panel-keyword > .label-value {
    flex: 1;
}

.panel-keyword > .label-keyword:before {
    content: 'Keyword: ';
}

.panel-keyword > .label-keyword {
    position: absolute;
    left: 0;
    bottom: -12px;
    font-size: x-small;
}

/* slider */
.slider.absolute {
    background: #0a71b450;
}

.slider.absolute .header {
    color: #0a71b4;
}

.slider.absolute .body {
    border: 4px solid #b2d2e7;
    box-shadow: 0px 0px 8px #b2d2e7;
}

/* gr-panel-menu */
.panel-options.gr-panel-menu {
    display: flex;
    gap: 8px;
    flex-direction: row;
}

.panel-options.gr-panel-menu > .option {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 12px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.20);
    flex: none;
}

.panel-options.gr-panel-menu > .option:not(:first-child) {
    margin-top: 8px;
}

.panel-options.gr-panel-menu > .option > .img {
    cursor: pointer;
    filter: invert(1);
    margin: auto;
    padding: 4px 8px;
}

.dl-cellfooter {
	padding: 8px;
	cursor: pointer;
	border-top: 2px solid #0a71b4;
	white-space: nowrap;
	overflow: hidden;
}

.dl-cellheader {
	cursor: pointer;
	border-bottom: 2px solid #0a71b4;
	border-radius: 0px;
	white-space: nowrap;
	overflow: hidden;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 8px;
}

.panel-fieldset.filter > .panel-items {
	padding-bottom: 48px;
}

.panel-incident {
    -max-width: 600px;
    max-height: 600px;
}

.panel-incident .label-incident {
    font-size: x-small;
}

.panel-incident .incident {
    
}

.panel-incident .label-description {
    font-size: x-small;
    margin-top: 16px;
}

.panel-incident .description {
    
}

/* panel-columns */
.panel-columns .label-log {
	display: none;
}

.panel-columns > .panel-content .column-draggable:hover {
	border-color: #0a71b4;
}

/* panel-register */
.panel-register {
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.panel-register > .label-caption {
    font-size: large;
}

.panel-register > .option {
    position: relative;
    border-radius: 4px;
    padding: 16px;
    cursor: pointer;
    flex: 1;
    background: #0a71b4;
    color: white;
    width: 100px;
    margin: auto;
}

/* panel-tabs */
.voluntari .panel-tabs > .tabs > .tab {
    border: none;
    border-radius: inherit;
    border-bottom: 4px solid #CCC;
    background: inherit;
}

.voluntari .panel-tabs > .tabs > .tab:hover, .panel-tabs > .tabs > .tab.select:hover {
    background: #EEE;
}

.voluntari .panel-tabs > .tabs > .tab.select {
    border-color: #0a71b4;
    background: inherit;
    color: inherit;
}

.voluntari .dl-button-vol {
	margin-top: 8px;
    margin-bottom: 8px;
    padding: 12px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.20);
    flex: none;
}

@media screen and (max-width: 400px) {
    .panel-options.gr-panel-menu > .option {
        padding: 8px;
        /* background: transparent; */
        /* color: blue; */
        /* box-shadow: inherit; */
        /* text-decoration: underline; */
        margin-bottom: 2px;
        margin-top: 2px;
    }
    
    .panel-options.gr-panel-menu {
        gap: 2px;
		flex-wrap: wrap;
    }
    
    .panel-options.gr-panel-menu > .option:not(:first-child) {
        margin-bottom: 2px;
        margin-top: 2px;
    }
}