//	=================
//    	Imports
//	=================

@import '../../base/color_variables';   	// Color Variables
@import '../../base/fonticons';   			// Fonticons Variables
@import '../../base/urls';   				// URLS Variables
@import '../../base/utilities_variables';  // Utilities Variables

h4 {
	color: $color_2;
	margin-bottom: 20px;
	font-size: 21px;
}
/*Basic*/
.portlet-basic {
	h4 {
		color: $color_47;
	}
	p {
		color: $color_2;
	}
}
.portlet-danger {
	.caption-subject.white {
		color: $additional-color-11;
	}
	p {
		color: $color_2;
	}
	h4 {
		color: $color_51;
	}
	background-color: $white;
	padding: 20px;
	margin-bottom: 0px;
	min-height: 55px;
	.caption {
		i {
			color: $additional-color-6;
			font-size: 18px;
		}
	}
}
.portlet-warning {
	.caption-subject.white {
		color: $color_86;
	}
	p {
		color: $color_2;
	}
	h4 {
		color: $additional-color-5;
	}
	background-color: $white;
	padding: 20px;
	margin-bottom: 0px;
	min-height: 55px;
}
.portlet-success {
	.caption-subject.white {
		color: $additional-color-11;
	}
	p {
		color: $color_2;
	}
	h4 {
		color: $additional-color-5;
	}
	background-color: $white;
	padding: 20px;
	margin-bottom: 0px;
	min-height: 55px;
	.caption {
		i {
			color: $additional-color-6;
			font-size: 18px;
			font-weight: normal;
			margin-top: 3px;
			margin-right: 2px;
		}
	}
}
.portlet-secondary {
	.portlet-body {
		h4 {
			color: $white;
			font-weight: 600;
			text-transform: uppercase;
		}
		padding: 20px;
	}
	.portlet-title {
		border-bottom: 1px $solid #675fbe;
		padding: 20px;
	}
}
.content {
	padding: 30px;
	background: #f1f3fa;
}
.margin-bottom-30 {
	margin-bottom: 30px;
}
/*Dropdown*/
.portlet-dropdown {
	p {
		color: $color_2;
	}
	h4 {
		color: $color_55;
	}
	.dropdown-item {
		&:focus {
			color: $color_13;
			text-decoration: none;
			background-color: $color_54;
		}
		&:hover {
			color: $color_13;
			text-decoration: none;
			background-color: $color_54;
		}
	}
}
/*Switch*/
.portlet-switch {
	h4 {
		color: $success;
	}
	p {
		color: $color_2;
	}
}
/*Scroll*/
.portlet-scroll {
	h4 {
		color: $additional-color-8;
		padding: $p-0 15px;
	}
	p {
		color: $color_2;
		padding: $p-0 15px;
	}
}
.portlet-bordered {
	p {
		color: $color_2;
	}
}
.portlet-functional {
	p {
		color: $color_2;
	}
	background-color: $color_47;
	padding: 8px;
	margin-bottom: 0px;
	min-height: 55px;
	background-color: $color_84;
	padding: 20px;
	margin-bottom: 0px;
	min-height: 55px;
}
.widget.portlet-widget {
	.portlet-basic {
		.portlet-title {
			span.caption-subject {
				color: $additional-color-11;
				font-size: 18px;
			}
			padding: 20px;
		}
		.portlet-body {
			.scroll-portlet  {
				height: 260px;
				padding: 10px;
			}
		}
	}
	.portlet-dark {
		background-color: $additional-color-11;
		.portlet-title {
			i {
				color: $white;
				font-size: 18px;
			}
			span.caption-subject {
				color: $white;
				font-size: 18px;
			}
		}
		.portlet-body {
			color: $white;
			h4 {
				color: $light-gray;
			}
		}
	}
	.portlet-scroll {
		.portlet-title {
			padding: 20px;
			span.caption-subject {
				color: $black;
			}
			i {
				font-size: 18px;
			}
		}
		.portlet-body {
			overflow-y: auto;
			height: 260px;
			padding: 20px;
			&::-webkit-scrollbar {
				width: 5px;
				height: 5px;
			}
			&::-webkit-scrollbar-button {
				&:start {
					&:decrement {
						height: 0px;
						display: block;
						background-color: $color_148;
						background-color: $light-gray;
					}
				}
				&:end {
					&:increment {
						height: 0px;
						display: block;
						background-color: $color_148;
						background-color: $light-gray;
					}
				}
			}
			&::-webkit-scrollbar-track-piece {
				background-color: $color_none;
				-webkit-border-radius: 6px;
			}
			&::-webkit-scrollbar-thumb {
				&:vertical {
					height: 50px;
					background-color: $color_148;
					background-color: $light-gray;
					-webkit-border-radius: 6px;
				}
				&:horizontal {
					width: 50px;
					background-color: $color_148;
					background-color: $light-gray;
					-webkit-border-radius: 3px;
				}
			}
		}
	}
	.portlet-switch {
		.portlet-title {
			padding: 20px;
			span.caption-subject {
				color: $black;
			}
			i {
				font-size: 18px;
			}
			.p-action-switch {
				.custom-control.material-switch {
					color: $success;
					padding-left: 0;
					.material-switch-control-input {
						display: none;
						&:checked {
							&~.material-switch-control-indicator {
								&::after {
									background-color: $success;
									left: 17px;
								}
							}
						}
					}
					.material-switch-control-indicator {
						display: inline-block;
						position: relative;
						margin: 0 10px;
						top: 4px;
						width: 32px;
						height: 16px;
						background: #ddd;
						border-radius: 16px;
						transition: .3s;
						cursor: pointer;
						&::after {
							content: '';
							display: block;
							position: absolute;
							width: 18px;
							height: 18px;
							border-radius: 50%;
							transition: .3s;
							top: -1px;
							left: -1px;
							background: $color_42;
							box-shadow: 0 2px 10px #aaa;
						}
					}
				}
			}
		}
		.portlet-body {
			padding: 20px;
		}
	}
	.portlet-dropdown {
		.portlet-title {
			padding: 20px;
			margin-bottom: 0;
			span.caption-subject {
				color: $black;
				color: $additional-color-11;
				font-size: 18px;
			}
			.p-caption {
				i {
					font-size: 22px;
				}
			}
			.p-action-dropdown {
				.dropdown {
					button.dropdown-toggle {
						&:after {
							display: none;
						}
					}
				}
			}
		}
		.portlet-body {
			padding: 20px;
		}
	}
	.portlet-vertical-ribbon {
		.ribbon.ribbon-vertical-l {
			clear: none;
			padding: 0 5px;
			height: 40px;
			width: 30px;
			line-height: 40px;
			text-align: center;
			position: absolute;
			left: 0px;
			top: 0;
		}
		.portlet-title {
			padding: 46px 20px 0 20px;
			margin-bottom: 0;
			span.caption-subject {
				color: $black;
				color: $additional-color-11;
				font-size: 18px;
			}
			.p-caption {
				i {
					font-size: 22px;
				}
			}
		}
		.portlet-body {
			padding: 20px;
		}
		.portlet-footer {
			padding: 20px;
			border-top: 1px $solid $light-gray;
			span {
				a {
					&:hover {
						border-bottom: 1px $solid #000;
					}
				}
			}
		}
	}
	.portlet-ribbon {
		.ribbon.ribbon-r {
			padding: 0 20px;
			height: 30px;
			line-height: 30px;
			clear: left;
			position: absolute;
			top: -15px;
			right: -4px;
			&:before {
				position: absolute;
				top: 0;
				display: block;
				width: 0;
				height: 0;
				content: '';
				border: 15px $solid #805dca;
				border-left-color: $color_none;
				right: 100%;
				border-right: 15px $solid #805dca;
			}
		}
		.portlet-title {
			padding: 20px 20px 0 20px;
			margin-bottom: 0;
			span.caption-subject {
				color: $black;
				color: $additional-color-11;
				font-size: 18px;
			}
			.p-caption {
				i {
					font-size: 22px;
				}
			}
		}
		h4 {
			color: $additional-color-3;
		}
		.portlet-body {
			padding: 20px;
		}
		.portlet-footer {
			padding: 20px;
			border-top: 1px $solid $light-gray;
			span {
				a {
					&:hover {
						border-bottom: 1px $solid #000;
					}
				}
			}
		}
	}
}
/* Dark*/
.portlet-dark {
	p {
		color: $color_38;
	}
	.portlet-title {
		border-bottom: 1px $solid #484d6b;
		padding: 20px;
	}
	.portlet-body {
		padding: 20px;
	}
}
.portlet-vertical-ribbon {
	h4 {
		color: $color_47;
	}
	.dropdown-item {
		&:focus {
			color: $color_13;
			text-decoration: none;
			background-color: $color_54;
		}
		&:hover {
			color: $color_13;
			text-decoration: none;
			background-color: $color_54;
		}
	}
}
/* Portlet Tab */
.portlet-tabs {
	.portlet-title {
		padding: 20px 20px 0 20px;
	}
	.portlet-body {
		padding: 20px;
	}
}
.portlet-widget {
	.widget-content-area {
		padding: 0;
	}
}
/* Portlet */
.portlet {
	background: #fff;
	label {
		input[type="radio"] {
			position: absolute;
			clip: rect(0,0,0,0);
			pointer-events: none;
		}
	}
}
.portlet.portlet-gray {
	background: #f4f4f4;
}
.portlet.portlet-bordered {
	border: 1px $solid #eee;
}
.portlet-rounded {
	border-radius: 5px;
	.portlet-title {
		padding: 8px;
		min-height: 50px;
		margin: 0;
	}
	.portlet-body {
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
}
.portlet.portlet-primary {
	border: none;
	padding: 0px;
}
.portlet.portlet-danger {
	border: none;
	padding: 0px;
	label {
		input[type="radio"] {
			position: absolute;
			clip: rect(0,0,0,0);
			pointer-events: none;
		}
	}
}
.portlet.portlet-warning {
	border: none;
	padding: 0px;
}
.portlet.portlet-success {
	border: none;
	padding: 0px;
}
.portlet.portlet-secondary {
	background-color: $color_86;
	color: $white;
}
/* Portlet Title */
.portlet-title {
	min-height: 40px;
	border-bottom: 1px $solid $light-gray;
	>.nav-tabs {
		border: 0;
		>li {
			background: none;
			margin: 0;
			border: 0;
			display: inline-flex;
			>a {
				background: none;
				border: 0;
				padding: 0 7px 24px;
				color: $additional-color-2;
				font-weight: 600;
			}
			>a.active {
				border-bottom: 2px $solid $color_56;
				position: relative;
				color: $color_56;
				background: #fff;
			}
			&:hover {
				>a {
					color: $color_56;
					background: #fff;
				}
			}
		}
	}
	.inputs {
		.input-group {
			.form-control {
				width: 185px;
				border-radius: 30px;
				margin-top: -7px;
			}
		}
	}
}
.portlet-primary {
	background-color: $color_59;
	padding: 20px;
	margin-bottom: 0px;
	min-height: 55px;
}
.portlet-inverse {
	background-color: $color_48;
	color: $white;
}
.portlet-common-body {
	background-color: $white;
	padding: 20px;
}
.caption.caption-green {
	.caption-subject {
		font-weight: 200;
	}
	i {
		font-weight: 200;
	}
}
.caption.caption-red {
	.caption-subject {
		color: $additional-color-2;
	}
	i {
		color: $additional-color-2;
	}
}
.caption.caption-purple {
	.caption-subject {
		color: $color_453;
		font-weight: 400;
	}
	i {
		color: $color_453;
		font-weight: 400;
	}
}
.caption {
	i {
		color: $white;
		font-size: 18px;
		font-weight: normal;
		margin-top: 3px;
	}
	i.white {
		color: $white;
	}
}
.caption-subject {
	color: $color_321;
	font-size: 18px;
	font-weight: 600;
}
.caption-subject.white {
	color: $white;
	font-size: 18px;
}
.caption-helper {
	padding: 0;
	margin: 0;
	line-height: 13px;
	color: $white;
	font-size: 13px;
	font-weight: 400;
}
.caption-helper.darkgray {
	color: $color_43;
}
/* Actions */
.actions {
	a {
		margin-left: 3px;
	}
	.btn {
		color: $additional-color-11;
		padding: 4px 14px;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.5;
		background-color: $white;
		border-color: $light-gray;
		border-radius: 50px;
		i {
			font-size: 17px;
		}
		&:hover {
			background: #f2f2f2;
		}
	}
	.btn.btn-circle {
		width: 30px;
		height: 30px;
		padding: 5px 5px;
		text-align: center;
		line-height: 20px;
		width: 26px;
		height: 26px;
		padding: 3px 4px;
		text-align: center;
		line-height: 20px;
		i {
			font-size: 14px;
			font-weight: 600;
		}
	}
	.btn.grey-salsa {
		border: none;
		margin-left: 3px;
		box-shadow: none;
		border-radius: 50px !important;
	}
	.btn.grey-salsa.active {
		color: $color_454;
		outline: none;
		background: #8e9bae;
	}
	.grey-salsa.btn {
		&:hover {
			color: $white;
			outline: none;
			background: #3862f5;
			padding: 8px 20px;
		}
		&:focus {
			color: $white;
			outline: none;
			background: #3862f5;
			padding: 8px 20px;
		}
		&:active {
			color: $white;
			outline: none;
			background: #3862f5;
			padding: 8px 20px;
		}
	}
	.grey-salsa.btn.active {
		color: $white;
		outline: none;
		background: #3862f5;
		padding: 8px 20px;
	}
	.btn.btn-red.active {
		color: $white;
		box-shadow: none;
		background: #816cfd;
		border-color: $color_86;
	}
	.btn.btn-red {
		&:hover {
			color: $white;
			box-shadow: none;
			background: #816cfd;
			border-color: $color_86;
		}
	}
	.btn.btn-purple.active {
		color: $white;
		box-shadow: none;
		background: #8775a7;
		border-color: $color_453;
	}
	.btn.btn-purple {
		&:hover {
			color: $white;
			box-shadow: none;
			background: #8775a7;
			border-color: $color_453;
		}
	}
}
/* Pagination */
.pagination {
	border-radius: 50px;
	>li {
		>a {
			padding: 4px 10px;
			font-size: 12px;
			color: $white;
			background: #e95f2b;
		}
		>span {
			padding: 4px 10px;
			font-size: 12px;
			color: $white;
			background: #e95f2b;
		}
		&:hover {
			>a {
				color: $white;
				background: #3b3f5c;
				border-color: $additional-color-11;
			}
		}
	}
	>li.active {
		>a {
			color: $white;
			background: #3b3f5c;
			border-color: $additional-color-11;
		}
		&:hover {
			>a {
				color: $white;
				background: #3b3f5c;
				border-color: $additional-color-11;
			}
		}
	}
}
ul.pagination {
	li {
		a {
			&:hover {
				&:not(.active) {
					background-color: $additional-color-11;
					color: $white;
				}
			}
		}
	}
}
.input-inline {
	display: inline-block;
	vertical-align: middle;
}
.column {
	float: left;
}
.portlet-header {
	margin-bottom: 0.5em;
	position: relative;
	cursor: move;
}
.portlet-toggle {
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -8px;
}
.portlet-content {
	padding: 0.4em;
}
.portlet-placeholder {
	border: 1px dotted black;
	margin: 0 1em 1em 0;
	height: 50px;
}
.portlet.portlet-functional {
	border: none;
	padding: 0px;
}
@media (max-width: 400px) {
	.portlet {
		padding: 12px;
	}
	.actions {
		.btn {
			padding: 4px 6px;
			font-size: 10px;
		}
	}
	ul.pagination {
		li {
			a {
				padding: 5px 8px;
			}
		}
	}
	.portlet-title {
		.inputs {
			.input-group {
				.form-control {
					width: 114px;
				}
			}
		}
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.portlet {
		padding: 15px;
	}
	.portlet-title {
		>.nav-tabs {
			>li {
				>a {
					padding: 2px 2px 12px;
				}
			}
		}
	}
}