/*#region Global*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
	--dg-blue: #315EF7;
	--dg-red: #FF0844;
	--dg-btn-blue: #3880FF;
	--dg-btn-red: #EB445A;
	--dg-btn-green: #008000;
	--dg-text-gray: #686868;
	--dg-background-gray: #D4D4D4;
	--dg-title: #313131;
	--opacity-bg: #0000005c;
	--bg-main: #fbfbfd;
	--bg-gray: #e7eaef8f;
	--title-color: #202c4b;
	--text-color: #6a7287;
	--text-gray-color: #9CA1AF;
	--white: #ffffff;
	--dark-white: #ffffff;
	--box-shadow: 0px 4.4px 12px -1px #dedede5c;
	--border: 1px solid #e7e7e7;
	--border-radius-5: 5px;
	--border-radius-10: 10px;
	--border-radius-15: 15px;
	--border-radius-20: 20px;
	--border-radius-round: 50%;
	--green-light: #e8f8e7;
	--green-dark: #1ABE17;
	--blue-light: #e7f1fc;
	--blue-dark: #0F65CD;
	--yellow-light: #fef8ea;
	--yellow-dark: #EAB300;
	--red-light: #fde9ed;
	--red-dark: #E82646;
	--dg-blue: #315ef7;
	--dg-light-blue: #4771fd;
	--bar-blue: #7c97f2;
	--bar-green: #56d47f;
	--bar-red: #f67062;
	--img-filter: invert(46%) sepia(7%) saturate(1129%) hue-rotate(186deg) brightness(93%) contrast(87%);
	--black: #000000;
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-family: Poppins, Calibri;
	text-decoration: none;
}

ul, ol {
	list-style-type: none;
}

i {
	color: black;
}

main {
	padding: 30px;
}

section {
	background: var(--background-color);
	border-radius: 18px;
	padding: 25px;
}
/*#endregion*/

.btn {
	--btn-color: white;
	color: var(--btn-color);
	border: 0;
	font-size: 15px;
	font-weight: 700;
	border-radius: 12px;
	padding: 10px 20px;
	cursor: pointer;
	background: var(--btn-bg);
	box-shadow: 0 4px var(--btn-shadow);
}

	.btn:active {
		box-shadow: none;
		transform: translateY(3px);
	}

.btn-blue {
	--btn-bg: var(--dg-btn-blue);
	--btn-shadow: #3273E6;
}

.btn-red {
	--btn-bg: var(--dg-btn-red);
	--btn-shadow: #CF3C4F;
}
.btn-green {
	--btn-bg: var(--dg-btn-green);
	--btn-shadow: #0080002b;
}

.btn-gray {
	--btn-color: black;
	--btn-bg: #F1F1F1;
	--btn-shadow: #9C9C9C;
}

.btn-orange {
	--btn-color: white;
	--btn-bg: #ff7c07;
	--btn-shadow: #cf701c;
}

/*#region Notification*/
:is(#Notification, #JsNotification) {
	position: fixed;
	bottom: 50px;
	right: -2000px;
	z-index: 100;
	min-width: 350px;
	display: flex;
	gap: 20px;
	padding: 20px;
	align-items: center;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	transition: 700ms ease;
	background: white;
	color: black;
	font-weight: 500;
	box-shadow: 0 6px 15px 0 #315ef778;
}

	:is(#Notification, #JsNotification) i {
		border-radius: 50%;
		padding: 7px;
		font-size: 20px;
		color: white;
	}

		:is(#Notification, #JsNotification) i.failed {
			background: var(--dg-red);
		}

		:is(#Notification, #JsNotification) i.success {
			background: var(--dg-blue);
		}

	:is(#Notification, #JsNotification) p {
		margin: 0;
	}

	:is(#Notification, #JsNotification) b.failed {
		color: var(--dg-red);
	}

	:is(#Notification, #JsNotification) b.success {
		color: var(--dg-blue);
	}
/*#endregion*/

/*#region Popup*/
.popup {
	z-index: 99;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	background: rgba(0, 0, 0, 0.4);
	display: none;
}

	.popup > * {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
/*#endregion*/

/*#region SessionExpired*/
#SessionExpired {
	z-index: 999;
	position: fixed;
}

	#SessionExpired > div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 15px;
		background: #fff;
		border-radius: 10px;
	}

		#SessionExpired > div * {
			margin: 0 30px;
		}

		#SessionExpired > div > h4 {
			border-bottom: 1px solid #80808087;
			width: 100%;
			padding: 20px;
			text-align: center;
			font-size: 17px;
			color: var(--dg-title);
			font-weight: 600;
		}

		#SessionExpired > div > p {
			color: var(--dg-title);
			font-size: 14px;
			font-weight: 500;
		}

		#SessionExpired > div > button {
			color: #fff;
			background: var(--dg-red);
			padding: 5px 24px;
			border-radius: 25px;
			font-size: 15px;
			cursor: pointer;
			border: none;
			margin-bottom: 20px;
		}
/*#endregion*/


/*#region DataTable*/
.even {
	background-color: var(--bg-gray) !important;
}

.table.dataTable tbody tr:hover {
	background-color: #e4ebff !important;
}

.darkMode .table.dataTable tbody tr:hover {
	background-color: #31285d !important;
}

.table.dataTable > thead {
	background: var(--bg-gray);
	color: black;
}

.table.dataTable tbody tr {
	background-color: transparent;
	height: 50px;
}

.paginate_button current {
	background-color: var(--blue-dark);
}

.dataTables_wrapper .dataTables_length {
	margin-bottom: 15px;
	margin-left: 1rem;
	float: left;
}

.dataTable-btn {
	display: inline-flex;
	width: 30px;
	height: 30px;
	border-radius: var(--border-radius-round);
	border: var(--border);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	gap: 10px;
	padding: 10px;
	font-size: 13px;
	transition: 200ms;
}

	.dataTable-btn:hover {
		background: var(--bg-gray);
	}

	.dataTable-btn > i {
		font-size: 11px;
	}

.dataTables_info {
	display: none;
}

#DataTable_paginate {
	font-size: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
	color: var(--dark-white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background-color: var(--dg-light-blue);
	color: white !important;
	border: none;
	padding: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 0 !important;
	border-radius: var(--border-radius-5);
	cursor: pointer;
	transition: 200ms;
}

	.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
		border: var(--white) !important;
		background: var(--dg-light-blue) !important;
	}

.paginate_button {
	min-width: 28px !important;
	height: 28px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 12px;
}

.previous, .next {
	cursor: pointer !important;
	width: 65px;
}

#MiniLogo {
	z-index: 12;
	height: 30px;
	position: absolute;
	top: 10px;
	left: 22px;
	cursor: pointer;
}

table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting_asc_disabled, table.dataTable thead > tr > th.sorting_desc_disabled, table.dataTable thead > tr > td.sorting, table.dataTable thead > tr > td.sorting_asc, table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting_asc_disabled, table.dataTable thead > tr > td.sorting_desc_disabled {
	font-size: 12px;
	color: var(--title-color);
	border: 0;
	font-weight: 500;
}

table.dataTable.no-footer {
	border-bottom: 0;
}

.dataTables_wrapper .dataTables_length select {
	width: max-content;
	color: inherit;
	height: 32px;
	background: transparent;
	border: var(--border);
	padding: 5px;
	border-radius: var(--border-radius-5);
}

table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:before, table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:after {
	display: none;
}

.dataTables_wrapper .dataTables_filter input {
	height: 32px;
	background: transparent;
	border: var(--border);
	padding: 5px;
	border-radius: var(--border-radius-5);
}

div.dataTables_wrapper {
	margin: 1rem 0;
}

td {
	font-size: 13px;
	color: var(--title-color);
	border-bottom: var(--border);
}


.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
	color: inherit;
	margin-right: 1rem;
}

.dataTables_wrapper .dataTables_paginate {
	color: inherit;
	margin: 10px 1rem 0 1rem;
}

#DataTable_filter label {
	float: right;
}
/*Yatay Scroll*/
.dataTables_scrollBody, .dataTables_wrapper.no-footer .dataTables_scrollBody {
	border: 0;
}

	.dataTables_scrollBody::-webkit-scrollbar {
		height: 4px;
	}

	.dataTables_scrollBody::-webkit-scrollbar-thumb {
		background-color: #bdbdbd61;
		border-radius: 6px
	}

	.dataTables_scrollBody::-webkit-scrollbar-track {
		background-color: transparent;
		border-radius: 20px;
		height: 5px
	}
/*#endregion*/

/*#region ticket*/
.ticketGreen, .ticketRed, .ticketYellow, .ticketGray {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: var(--border-radius-5);
	width: max-content;
}

	.ticketYellow > i, .ticketRed > i, .ticketGreen > i, .ticketGray > i {
		font-size: 5px;
	}

.ticketGreen {
	background: var(--green-light);
	color: var(--green-dark);
}

	.ticketGreen > i {
		color: var(--green-dark);
	}

.ticketRed {
	background: var(--red-light);
	color: var(--red-dark);
}

	.ticketRed > i {
		color: var(--red-dark);
	}

.ticketGray {
	background: #e0e0e0;
	color: #555;
}

	.ticketGray > i {
		color: #555;
	}
.ticketBlue {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: var(--border-radius-5);
	width: max-content;
	background: var(--dg-blue);
	color: var(--dark-white);
}

	.ticketBlue > i {
		font-size: 5px;
		color: var(--dark-white);
	}




.ticketYellow {
	background: var(--yellow-light);
	color: var(--yellow-dark);
}

	.ticketYellow > i {
		color: var(--yellow-dark);
	}
/*#endregion */


@media(max-width:1200px) {

	section {
		padding: 20px;
	}

	body {
		padding: 2rem 0rem !important;
		width: 90dvw !important;
	}
}


@media(max-width:992px) {
}