//@import "../../../abstracts/abstracts";

.dbq-document {
	img {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		max-width: 100%;
	}
}

.opaque {
	background-color: white;
}

.semitransparent {
	background: rgba(255, 255, 255, 0.25);
	background-color: white;
}

.dbq-clearfix:after {
	content: "";
	clear: both;
	display: table;
}

.dropdown-toggle::after {
	display: none;
}

// .input-group {
// 	>.input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
// 	>.input-group-append:last-child > .input-group-text:not(:last-child),
// 	>.input-group-append:not(:last-child) > .btn, 
// 	>.input-group-append:not(:last-child) > .input-group-text,
// 	>.input-group-prepend > .btn,
// 	>.input-group-prepend > .input-group-text {
// 		border-top-right-radius: 0;
// 		border-bottom-right-radius: 0;
// 	}
// }

.dbq-property-container {
	width: calc(100% - 40px);
	float: left;
}

.dbq-document {
	.element[data-hidden-field='true'] {
		display: none !important;
	}

	.dbqdb-element {
		display: flex;
		margin: 0;
		margin-bottom: $margin-default;

		&.dbqdb-last-visible-element {
			margin-bottom: 0 !important;
		}

		&:has(> .dbqmd-col > .dbqdb-spacer) { // Exclude spacers from having a margin
			margin-bottom: 0;
		}
	}
}

.dbqdb-error-message {
	padding: ($padding-default * 2);
}

.dbq-element-header-5 {
	color: $text-color-default;
	//float: left; // To-do: remove if not needed, why float?
    margin: 0;
    padding: 0;
	width: 100%;
    font-weight: 600;
    line-height: 20px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hidden {
	display: none;
}

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ellipsis-2-lines {
	color: color(text-color-default);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: initial !important; /* We set this one since there might be a default ellipsis in use which has the white-space value set to nowrap. */
}

.ellipsis-3-lines {
	color: color(text-color-default);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	white-space: initial !important; /* We set this one since there might be a default ellipsis in use which has the white-space value set to nowrap. */
}

h3.tile-project-title {
	color: color(text-color-default);
	font-weight: 600 !important;
}

span.tile-project-subtitle {
	color: color(text-color-default);
	font-weight: 600 !important;
}

span.tile-project-attr-title {
	color: #797a7d;
	font-weight: 600 !important;
	padding: 5px 0 0 0;
}

p.tile-project-attr-description {
	color: #797a7d;
	font-weight: 400 !important;
	padding: 5px 0 0 0;
}

main {
	-ms-flex-line-pack: center;
	-ms-align-content: center;
	-webkit-align-content: center;
	align-content: center;
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 0 auto;
	&.embedded {
		padding: 0px;
		width: 100%;
		background-color: transparent;
		justify-content: flex-start;
		align-items: flex-start;
	}
	&.default {
		padding: 40px;
	}
}

.no-padding {
	padding: 0 !important;
}

.padding-bottom-20 {
	padding-bottom: 20px;
}

.flex-container-vertical {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	flex-direction: row;
	//margin-bottom: 0; 

	& > .dbq-column {
		display: flex;
		flex-direction: column;
		//gap: 15px;
		//margin-bottom: 0;

		& > .dbqdb-element  {
			//margin: 0;
		}

		.dbqdb-block {
			.flex-container {
				//margin-bottom: 0;

				.dbq-column {
					.flex-container {
						//margin-bottom: 0;
					}
				}
			}
		}
	}
}

// Column styling for dashboards
div[data-topic-type-code=Dashboard] {
	.flex-container {
		//margin-bottom: 15px;

		& > .dbq-column {
			//gap: 15px;
		}

		&:last-child {
			//margin-bottom: 0px;
		}
	}
}

// Read only styling for elevated block items
form[data-view-mode=View], 
form[data-view-mode=Delete] {
	.flex-container {
		& > .dbq-column {
			.dbqdb-block-elevated-background {
				.flex-container {
					.dbq-column {
						gap: 0;
					}
				}
			}
		}
	}
}

.flex-row {
	display: flex;
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	flex-direction: row;
}

.flex-item-1 {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	-webkit-flex: 1;
	flex: 1;
}

.flex-item-2 {
	-webkit-box-flex: 2;
	-ms-flex: 2;
	-webkit-flex: 2;
	flex: 2;
}

.flex-item-3 {
	-webkit-box-flex: 3;
	-ms-flex: 3;
	-webkit-flex: 3;
	flex: 3;
}

.flex-item-4 {
	-webkit-box-flex: 4;
	-ms-flex: 4;
	-webkit-flex: 4;
	flex: 4;
}

.flex-item-5 {
	-webkit-box-flex: 5;
	-ms-flex: 5;
	-webkit-flex: 5;
	flex: 5;
}

.flex-item-6 {
	-webkit-box-flex: 6;
	-ms-flex: 6;
	-webkit-flex: 6;
	flex: 6;
}

.flex-item-7 {
	-webkit-box-flex: 7;
	-ms-flex: 7;
	-webkit-flex: 7;
	flex: 7;
}

.flex-item-8 {
	-webkit-box-flex: 8;
	-ms-flex: 8;
	-webkit-flex: 8;
	flex: 8;
}

.flex-item-9 {
	-webkit-box-flex: 9;
	-ms-flex: 9;
	-webkit-flex: 9;
	flex: 9;
}

.flex-item-10 {
	-webkit-box-flex: 10;
	-ms-flex: 10;
	-webkit-flex: 10;
	flex: 10;
}

.flex-item-11 {
	-webkit-box-flex: 11;
	-ms-flex: 11;
	-webkit-flex: 11;
	flex: 11;
}

.flex-item-12 {
	-webkit-box-flex: 12;
	-ms-flex: 12;
	-webkit-flex: 12;
	flex: 12;
}

.flex-item-13 {
	-webkit-box-flex: 13;
	-ms-flex: 13;
	-webkit-flex: 13;
	flex: 13;
}

.flex-item-14 {
	-webkit-box-flex: 14;
	-ms-flex: 14;
	-webkit-flex: 14;
	flex: 14;
}

.flex-item-15 {
	-webkit-box-flex: 15;
	-ms-flex: 15;
	-webkit-flex: 15;
	flex: 15;
}

.flex-align-left {
	-ms-flex-item-align: start;
	align-self: flex-start;
	margin-right: auto;
}

.flex-align-right {
	-ms-flex-item-align: end;
	align-self: flex-end;
	margin-left: auto;
}

.flex-align-center {
	-ms-flex-item-align: center;
	align-self: center;
}

.rotate-90 {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.rotate-180 {
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.rotate-270 {
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
}

.flip {
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	transform: scaleX(-1);
}

.flip-and-rotate-90 {
	-moz-transform: rotate(90deg) scaleX(-1);
	-webkit-transform: rotate(90deg) scaleX(-1);
	-o-transform: rotate(90deg) scaleX(-1);
	transform: rotate(90deg) scaleX(-1);
}

.flip-and-rotate-180 {
	-moz-transform: rotate(180deg) scaleX(-1);
	-webkit-transform: rotate(180deg) scaleX(-1);
	-o-transform: rotate(180deg) scaleX(-1);
	transform: rotate(180deg) scaleX(-1);
}

.flip-and-rotate-270 {
	-moz-transform: rotate(270deg) scaleX(-1);
	-webkit-transform: rotate(270deg) scaleX(-1);
	-o-transform: rotate(270deg) scaleX(-1);
	transform: rotate(270deg) scaleX(-1);
}

.dbq-placeholder {
	color: $text-color-placeholder !important;
}

.dbq-elevated-background {
    background-color: color(gray-8);
    border-radius: $border-radius-default;
    -webkit-box-shadow: $global-box-shadow;
    -moz-box-shadow: $global-box-shadow;
    box-shadow: $global-box-shadow;
}