/* Support page */

.support-page {
	position: relative;
}
.support-page .aiosc-toolbar button,
.support-page .aiosc-filters button,
.support-page input#aiosc-form-submit {
	background: $mainColor;
	border: 0;
	color: $whiteColor;
}
.support-page input[type="checkbox"] {
	height: 10px;
}

/* RESPONSIVE */
@media only screen and (max-width:767px) {
	.aiosc-ticket-preview .aiosc-ticket-sidebar,
	.aiosc-ticket-preview .aiosc-ticket-main {
		width: 100% !important;
	}
	.aiosc-ticket-list table,
	.aiosc-ticket-list thead,
	.aiosc-ticket-list tbody,
	.aiosc-ticket-list th,
	.aiosc-ticket-list td,
	.aiosc-ticket-list tr {
		display: block;
	}
	.aiosc-ticket-list thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
		right: auto;
	}
	.aiosc-ticket-list tr {
		border: 1px solid #cccdce;
	}

	.aiosc-ticket-list td {
		border: none;
		border-bottom: 1px solid #eeeeef;
		position: relative;
		padding-left: 50%;
		padding-right: auto;
	}

	.aiosc-ticket-list td:before {
		position: absolute;
		top: 6px;
		left: 6px;
		right: auto;
		width: 4%;
		padding-right: 10px;
		padding-left: auto;
		white-space: nowrap;
	}

	/* Label the data */
	.aiosc-ticket-list td:nth-of-type(1):before {
		content: "ID";
	}

	.aiosc-ticket-list td:nth-of-type(2):before {
		content: "Subject";
	}

	.aiosc-ticket-list td:nth-of-type(3):before {
		content: "Status";
	}

	.aiosc-ticket-list td:nth-of-type(4):before {
		content: "Favorite Color";
	}

	.aiosc-ticket-list td:nth-of-type(5):before {
		content: "Priority";
	}

	.aiosc-ticket-list td:nth-of-type(6):before {
		content: "Department";
	}

	.aiosc-ticket-list td:nth-of-type(7):before {
		content: "Last Update";
	}

	.aiosc-ticket-list td:nth-of-type(8):before {
		content: "Date Created";
	}

	.aiosc-ticket-list td:before {
		display: inline-block;
	}

	.aiosc-ticket-list tfoot tr {
		display: none;
	}

	.aiosc-ticket-list table td {
		text-align: right !important;
		padding-left: 80px !important;
		padding-right: auto;
	}

	.aiosc-ticket-list table th {
		text-align: left !important;
		padding: none;
	}

	.aiosc-toolbar .aiosc-search-box input {
		width: 343px;
	}

	.aiosc-filters .aiosc-filters-container button,
	.aiosc-filters .aiosc-filters-container select {
		width: 100% !important;
		margin-bottom: 15px;
	}
}

@media only screen and (max-width:479px) {
	.aiosc-tabs li {
		float: none !important;
		padding: 10px 27px !important;
	}
}

.aiosc-cholder {
	.input-info {
		color: $mainTextColor;
	}

	input[type="text"] {
		@include box-sizing-border-box;
		@include default-shape();

		font-size: 14px;
		font-weight: 400;
		border: 1px solid $borderColor2;
		color: $headlinesColor3;
		width: 100%;
		max-width: 100%;
		line-height: 1;
		margin: 0;
		vertical-align: middle;
		outline: 0;
		box-shadow: none;
		appearance: none;
		background: $whiteColor;
		min-width: none;
		padding: 10px 30px 10px 20px;

		@include tablet {
			&:not([type=color]) {
				padding: 15px 15px;
			}
		}

		@include mobile {
			&:not([type=color]) {
				padding: 10px 15px;
			}
		}

		&:hover, &:focus{
			border-color: $mainTextColor;
		}

		&::placeholder {
			color: $headlinesColor2;
		}
	}

	label {
		font-size: 16px;
		font-weight: 600;
		color: $headlinesColor3;
		margin: 0 0 5px;

		small {
			color: $mainTextColor;
		}
	}

	.wp-editor-wrap {
		@include default-shape();

		border: 1px solid $borderColor2;

		&:hover, &:focus{
			border-color: $mainTextColor;
		}

		.wp-editor-container {
			border: 0;
		}
	}

	.aiosc-uploader-files {
		.aiosc-uploader-browse {
			@include default-shape;

			border: 1px solid $borderColor2;
			background: $grayBackground4;
		}

		li {
			i.dashicons.mainicon {
				color: $secondaryColor;
			}

			.aiosc-uploader-file-name {
				font-weight: 600;
				color: $mainTextColor;

				a {
					color: $mainColor;
				}
			}
		}
	}

	input[type="submit"] {
		@include default-shape();
		@include transition(all, 0.3s);

		display: inline-flex;
		border: none;
		outline: 0;
		background: $mainColor;
		font-size: 14px;
		font-weight: 600;
		padding: 12px 25px;
		min-width: 100px;
		color: $whiteColor;
		vertical-align: baseline;
		font-style: normal;
		text-align: center;
		text-decoration: none;
		box-shadow: none;
		cursor: pointer;
		text-align: center;
		align-items: center;
		align-content: center;
		justify-content: center;
		-webkit-tap-highlight-color: transparent;
		line-height: 1;
		transition: all 0.3s ease-out;

		&:hover,
		&:focus,
		&:active {
			color: $whiteColor;
			background: darken($mainColor, 7%);
		}
	}
}

.aiosc-ticket-preview {
	h2.aiosc-title {
		font-size: 32px;
		font-weight: 700;
		color: $headlinesColor3;

		@include mobile {
			font-size: 26px;
		}

		&.aiosc-title-sm {
			font-size: 20px;
			font-weight: 600;
		}

		span {
			font-size: 14px;
			color: $mainTextColor;
			font-weight: 400;
			font-style: normal;

			a {
				color: $mainColor;
			}
		}
	}

	.aiosc-ticket-content {
		text-align: left;

		p {
			color: $mainTextColor;
			line-height: 26px;
			font-size: 14px;
			margin: 0 0 30px;
			text-align: left;
		}
	}

	.aiosc-ticket-sidebar {
		h2.aiosc-title {
			font-size: 20px;
			font-weight: 600;
			display: block;
		}
	}

	.cholder {
		input[type="submit"] {
			@include default-shape();
			@include transition(all, 0.3s);

			display: inline-flex;
			border: none;
			outline: 0;
			background: $mainColor;
			font-size: 14px;
			font-weight: 600;
			padding: 12px 25px;
			min-width: 100px;
			color: $whiteColor;
			vertical-align: baseline;
			font-style: normal;
			text-align: center;
			text-decoration: none;
			box-shadow: none;
			cursor: pointer;
			text-align: center;
			align-items: center;
			align-content: center;
			justify-content: center;
			-webkit-tap-highlight-color: transparent;
			line-height: 1;
			transition: all 0.3s ease-out;

			&:hover,
			&:focus,
			&:active {
				color: $whiteColor;
				background: darken($mainColor, 7%);
			}
		}
	}
}

.aiosc-separator {
	background: $borderColor2;
}

.aiosc-eot span {
	@include default-shape;

	background: $grayBackground4;
	color: $mainTextColor;
	font-size: 13px;
	font-weight: 600;
}

.aiosc-replies {
	.aiosc-reply-content {
		text-align: left;
	}
}

.aiosc-form-response {
	p {
		color: inherit;
	}
}

.aiosc-ticket-sidebar {
	.aiosc-window.aiosc-window { // double specificity to override plugin's styles
		@include default-shape;

		padding: 20px 30px;
		border: 1px solid $borderColor2;
		background: $grayBackground4;
	}

	.aiosc-ticket-id.aiosc-ticket-id {
		background: $whiteColor;
	}

	.aiosc-ticket-details-table {
		text-align: left;
		color: $headlinesColor3;

		th {
			font-weight: 600;
		}

		.aiosc-priority-badge {
			@include default-shape;
			background: $whiteColor;
		}
	}

	.aiosc-attachment-table {
		text-align: left;
	}

	.aiosc-window {
		button {
			@include default-shape();
			@include transition(all, 0.3s);

			display: inline-flex;
			border: none;
			outline: 0;
			background: $mainTextColor;
			font-size: 13px;
			font-weight: 600;
			padding: 10px 15px;
			min-width: 70px;
			color: $whiteColor;
			vertical-align: baseline;
			font-style: normal;
			text-align: center;
			text-decoration: none;
			box-shadow: none;
			cursor: pointer;
			text-align: center;
			align-items: center;
			align-content: center;
			justify-content: center;
			-webkit-tap-highlight-color: transparent;
			line-height: 1;
			transition: all 0.3s ease-out;
			margin-right: 3px;
			margin-bottom: 3px;

			&:hover,
			&:focus,
			&:active {
				color: $whiteColor;
				background: darken($mainColor, 7%);
			}
		}
	}
}

.aiosc-ticket-list {
	.aiosc-toolbar {
		.aiosc-tabs {
			border: 0;
			display: flex;
			flex-wrap: wrap;

			li {
				border-radius: 15px;
				display: inline-flex;
				align-items: center;
				padding: 9px 20px;
				background: $grayBackground4;
				flex-wrap: wrap;
				margin: 0;
				margin-bottom: 7px;
				font-size: 13px;
				font-weight: 600;
				color: $mainTextColor;
				line-height: 100%;
				cursor: pointer;
				transition: color 0.2s ease-out, background-color 0.2s ease-out;
				margin-right: 7px;

				span {
					border-radius: 8px;
					display: inline-flex;
					height: 15px;
					align-items: center;
					padding: 0 6px;
					background: $whiteColor;
					color: $mainTextColor;
					font-size: 10px;
					font-weight: 600;
				}

				&.active {
					background: $mainColorBackground;
					color: $mainColorText;

					span {
						background: $mainColor;
						color: $whiteColor;
					}
				}
			}
		}

		.aiosc-search-box {
			height: 36px;

			input[type="text"] {
				@include box-sizing-border-box;
				@include default-shape();

				font-size: 14px;
				font-weight: 400;
				border: 1px solid $borderColor2;
				color: $headlinesColor3;
				width: 100%;
				max-width: 100%;
				line-height: 1;
				margin: 0;
				vertical-align: middle;
				outline: 0;
				box-shadow: none;
				appearance: none;
				background: $whiteColor;
				min-width: none;
				padding: 10px 30px 10px 20px;

				@include tablet {
					&:not([type=color]) {
						padding: 15px 15px;
					}
				}

				@include mobile {
					&:not([type=color]) {
						padding: 10px 15px;
					}
				}

				&:hover, &:focus{
					border-color: $mainTextColor;
				}

				&::placeholder {
					color: $headlinesColor2;
				}
			}

			button {
				background: none;
				color: $mainTextColor;
				border: 0;
				outline: 0;
				cursor: pointer;
			}
		}
	}
}

.aiosc-filters {
	.aiosc-filters-container {
		.aiosc-filter-cholder {
			select {
				@include default-shape;

				border: 1px solid $borderColor2;
				color: $headlinesColor3;
				height: 36px;
			}
		}
	}
}

.aiosc-filters .select2-container--default .select2-selection--single .select2-selection__rendered.select2-selection__rendered {
	line-height: 36px;;
}

.aiosc-filters .select2-container .select2-selection--single.select2-selection--single {
	@include default-shape;
	height: 36px;
	box-shadow: none;
}

.select2-container--default .select2-selection--single.select2-selection--single {
	@include default-shape;
	border: 1px solid $borderColor2;
}

.select2-container--default .select2-selection--single .select2-selection__arrow.select2-selection__arrow {
	height: 36px;
}

.aiosc-filter-cholder.aiosc-filter-checks {
	label {
		font-weight: 600;
		color: $headlinesColor3;
	}
}

.aiosc-filter-buttons,
.aiosc-window {
	.button {
		@include default-shape();
		@include transition(all, 0.3s);

		display: inline-flex;
		border: none;
		outline: 0;
		background: $mainTextColor;
		font-size: 13px;
		font-weight: 600;
		padding: 10px 15px;
		min-width: 70px;
		color: $whiteColor;
		vertical-align: baseline;
		font-style: normal;
		text-align: center;
		text-decoration: none;
		box-shadow: none;
		cursor: pointer;
		text-align: center;
		align-items: center;
		align-content: center;
		justify-content: center;
		-webkit-tap-highlight-color: transparent;
		line-height: 1;
		transition: all 0.3s ease-out;
		margin-right: 3px;
		margin-bottom: 3px;

		&:hover,
		&:focus,
		&:active {
			color: $whiteColor;
			background: darken($mainColor, 7%);
		}

		&.button-primary {
			background: $secondaryColor;
			color: $whiteColor;
		}
	}
}

.aiosc-tickets-table {
	@include default-shape;

	border: 1px solid $borderColor2;
}

.aiosc-tickets-table,
.aiosc-ticket-details-table {
	.aiosc-status {
		&.aiosc-status-open {
			background: $blueColor;
		}
		&.aiosc-status-queue {
			background: $mainColor;
		}
		&.aiosc-status-closed {
			background: $redColor;
		}
	}
}

/* Login page */
.aiosc-window {
	.aiosc-form-response {
		max-width: 460px;
		border-radius: 6px;
		margin: 0 auto 20px auto;
	}

	p {
		text-align: center;
	}
}

@media only screen and (max-width:479px) {
	.aiosc-window .aiosc-form-response {
		max-width: 300px;
	}
}