@import "ansyn/less/common";
@import "ansyn/less/colors";
@import "ansyn/less/globals";
@import "../../less/status-bar-common";

:host {
	&:extend(.status-bar-panel);
	flex-direction: column !important;
	display: block;
	//min-width: 600px;
	padding-left: 20px;

	.close {
		margin-top: 1%;
		margin-right: 20px;
        cursor: pointer;
        height: fit-content;
	}

	.advanced-search {
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 95px;

		.advanced-search-text {
			width: 70px;
		}
	}

	.simple-search {
		display: flex;
		margin-top: 25px;
	}

	.box {
		margin: 0 15px;

		.button {
			&:extend(.status-bar-button-round);
			height: 35px;
			width: 165px;

			&.active {
				&:extend(.status-bar-button-active);
			}

			&:hover:not(.active) {
				&:extend(.status-bar-button-hover);
			}
		}

		&.timePickerBox {
			font-size: 13px;

			span.time-range {
				direction: ltr; // time fields remains the same in RTL mode

				span.title {
					outline: none;
					cursor: text;

					&::selection {
						background: @status-bar-panels;
					}

					&.error {
						color: red;
					}

					&:last-child {
						margin-left: 5px;
					}
				}
			}
		}

		&#geoPreSearch {
			width: 150px;

			&.component {
				width: 95px;
			}
			div {
				width: 100%;
				&:not(.component){
					overflow: hidden;
					text-overflow: ellipsis;
				}
				span {
					display: inline-block;
					margin: 0 1px;
				}
			}
		}

		&#dataInputsPreSearch {
			width: 110px;
		}

		.grid-item {
            text-align: center;
            padding: 20px;
            font-size: 30px;
          }


	}
	.expander {
		align-self: flex-start;
	}
}
