/* PageGear Styleguide Globals */

:root {
	--primary-color: #1477ea;

	--title-color: #0e2032;
	--text-color: #3f444a;

	--text-color-rgb: 63, 68, 74;

	--background-white: #feffff;

	--foreground-white: #f4f4f4;

	--default-color: #3f444a;
	--primary-color: #1597f6;
	--success-color: #21cb88;
	--error-color: #cb2151;

	--state-paused-color: #dadbdc;


	--btn-default-color: #262f39;
	--btn-default-color-rgb: 38, 47, 57;
	--btn-primary-color: #1597f6;
	--btn-primary-color-rgb: 21, 151, 246;
	--btn-warning-color: #FFA929;
	--btn-warning-color-rgb: 255, 169, 41;
	--btn-danger-color: #CB2151;
	--btn-danger-color-rgb: 203, 33, 81;
	--btn-success-color: #21cb88;
	--btn-success-color-rgb: 21, 151, 246;



	--grey-border: #d9d9d9;
}


/* start global table  */

.pagegear__table {
	position: relative;
	width: 100%;
}

.pagegear__table--header {
	display: flex;
	/* flex-direction: column; */
	justify-content: space-between;
	place-items: center;
	padding: 2rem 0;
}

.pagegear__table--header h2 {
	/* font-size: 4rem; */
	font-size: 3.2rem;
	font-weight: 900;
	color: var(--title-color);
	padding: 0 1.2rem;
}

.table__header-btns {
	display: flex;
	gap: 2rem;
}


.pagegear__table--body {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	width: 100%;
	margin-top: 2rem;
	overflow: auto;
}

.pagegear__table--body table {
	min-width: 80rem;
}


.pagegear__table--body  .table > thead > tr > th {
	border-bottom: none;
}

.pagegear__table--body  .table > thead > tr > th,
.pagegear__table--body .table > tbody > tr > td {
	font-family: "Inter", sans-serif;
}

.pagegear__table--body .table > tbody > tr > td {
	font-size: 15px;
	font-weight: 400;
	padding: 10px 8px;
	vertical-align: middle;
	border: none;
	background: #f8f8f8;
	border-bottom: 10px solid #fff;
	color: #242424;
}

.pagegear__table--body .table > tbody > tr:hover > td {
	transition: background 0.25s ease-in;
	background: #eaeaea;
}

.pagegear__table--body .table > thead > tr > th:first-child,
.pagegear__table--body .table > tbody > tr > td:first-child {
	padding-left: 28px;
	border-radius: 200px 0 0 200px;
}

.pagegear__table--body .table > thead> tr > th:last-child,
.pagegear__table--body .table > tbody > tr > td:last-child {
	padding-right: 28px;
	border-radius: 0 200px 200px 0;
}

.pagegear__table--body .table > thead> tr > th:last-child,
.pagegear__table--body .table > tbody > tr > td:last-child {
	text-align: end;
}

.pagegear__table--body .table > thead> tr > th {
	font-size: 14px;
	font-weight: 700;
	color: var(--title-color);
	margin: 0;
}

.table__body--buttons button {
	min-width: 3.2rem;
	max-width: 3.2rem;
	min-height: 3.2rem;
	max-height: 3.2rem;
	border-radius: 50%;
	border: none;
	background: transparent;
	position: relative;
	z-index: 9;
}

.table__body--buttons button:hover {
	background: rgb(63, 68, 74, 0.05);
}

.pagegear__table--footer {
	display: flex;
	place-content: center;
	place-items: center;
	width: 100%;
	margin: 2rem 1.2rem;
}




/* end global table  */


/* buttons */


.pagegear__form--search {
	position: relative;
	padding-right: 2rem;
	border-right: 1px solid var(--grey-border);
}

.pagegear__form--search input {
	min-width: 24rem;
	max-width: 24rem;
	height: 3.7rem;
	border-radius: 80px;
	border: none;
	background: var(--foreground-white);
	padding: 0.8rem 1.2rem 0.8rem 4.4rem;
	font-size: 13px;
	font-weight: 400;
	color: var(--text-color);
	box-shadow: none;
	min-height: 46px;
	max-height: 46px;
}

.pagegear__form--search input::placeholder {
	color: rgba(var(--text-color-rgb), 0.8);
}

.pagegear__btn--search {
	position: absolute;
	z-index: 4;
	left: 1.6rem;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: transparent;
}

.pagegear__btn {
	font-size: 15px;
	font-weight: 500;
	padding: 0.8rem 3.2rem;
	border-radius: 80px;
	display: flex;
	place-content: center;
	place-items: center;
	gap: 0.4rem;
	min-height: 46px;
	max-height: 46px;
	transition: background 0.25s ease-in, color 0.25s ease-in;
}

.pagegear__btn:hover {
	transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
}

.pagegear__btn--icon {
	padding: 0.8rem;
	min-height: 46px;
	max-height: 46px;
	min-width: 46px;
	max-width: 46px;
}

.pagegear__btn--basic {
	color: var(--btn-default-color);
	border: 1px solid transparent;
	background: transparent;
}

.pagegear__btn--basic:disabled {
	cursor: not-allowed;
	background: #ebebeb !important;
}

.pagegear__btn--basic:hover {
	background: rgba(var(--btn-default-color-rgb), 0.05);
	border-color: rgba(var(--btn-default-color-rgb), 0.05);
}


.pagegear__btn--default {
	color: var(--btn-default-color);
	border: 1px solid var(--grey-border);
	background: var(--background-white);
}

.pagegear__btn--default:disabled {
	cursor: not-allowed;
	background: #ebebeb !important;
}

.pagegear__btn--default:hover {
	background: rgba(var(--btn-default-color-rgb), 0.025);
}

.pagegear__btn--primary {
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	background: rgba(var(--btn-primary-color-rgb), 0.025);
}

.pagegear__btn--primary:hover {
	color: var(--background-white);
	background: var(--btn-primary-color);
}

.pagegear__btn--success {
	border: 1px solid var(--success-color);
	color: var(--success-color);
	background: rgba(var(--btn-success-color-rgb), 0.025);
}

.pagegear__btn--success:hover {
	color: var(--background-white);
	background: var(--btn-success-color);
}

.pagegear__btn--warning {
	border: 1px solid var(--btn-warning-color);
	color: var(--btn-warning-color);
	background: rgba(var(--btn-warning-color-rgb), 0.025);
}

.pagegear__btn--warning:hover {
	color: var(--background-white);
	background: var(--btn-warning-color);
}

.pagegear__btn--danger {
	border: 1px solid var(--btn-danger-color);
	color: var(--btn-danger-color);
	background: rgba(var(--btn-danger-color-rgb), 0.025);
}

.pagegear__btn--danger:hover {
	color: var(--background-white);
	background: var(--btn-danger-color);
}









/* buttons */





@media (min-width: 768px){


	



}