:root {
	--gray-base: #202430;
	--gray-shade-60: #13161D;
	--gray-tint-30: #63666E;
	--gray-tint-50: #909298;
	--gray-tint-80: #D2D3D6;
	--gray-alpha-80: rgb(32 36 48 / .8); /* CSS Colors Level 4 */
	--gray-tint-90: #E9E9EA;

	--white-base: #fff;
	--primary-base: #358FE6;

	--extras-sun: #FFD371;
	--extras-moon: #7190FF;
	--extras-black-alpha-64: rgb(0 0 0 / .64);
	--extras-white-alpha-64: rgb(255 255 255 / .64);

	/* Main colors */
    --vBlackStrong: #0A0A0B;
    --vBlackMedium: #1C1C1E;
    --vBlackLight: #292929;
    --vBlackLighter: #403F3F;
    --vGreyStrong: #909798;
    --vGreyMedium: #ABADAD;
    --vGreyLight: #E7E7E7;
    --vWhiteStrong: #FFFFFF;
    --vWhiteMedium: #FAFAFA;
    --vWhiteLight: #F2F2F2;
    --vBlueStrong: #239EFF;
    --vBlueMedium: #6DB3FF;
    --vBlueLight: #BEDDFF;
    --vBlueSuperLight: #E1F1FD;
    --vGreenStrong: #34C765;
    --vGreenMedium: #82DEA1;
    --vGreenLight: #CEF2DA;
	--vOrangeStrong: #FF7800;
    --vOrangeMedium: #FFAE66;
    --vOrangeLight: #FFE0C4;
    --vYellowStrong: #FFEF98;
    --vYellowMedium: #FCF3C1;
    --vYellowLight: #FFFCE9;
    --vRedStrong: #FF0F65;
    --vRedMedium: #FF75A7;
    --vRedLight: #FFD7E5;

}

:root[data-theme="dark"] {
	--main-header-bg: var(--gray-shade-60);
	--top-bar-icon-fill: var(--gray-tint-80);
	--sidebar-bg: var(--gray-base);
	--sidebar-icon-fill: var(--gray-tint-50);
	--sidebar-icon-active-fill: var(--white-base);
	--sidebar-link-color: var(--gray-tint-50);
	--sidebar-link-active-color: var(--white-base);
	--sidebar-menu-heading-color: var(--gray-tint-30);
	--theme-switcher-bg: var(--gray-shade-60);
	--theme-switcher-indicator: var(--extras-moon);
	--theme-switcher-indicator-pos: 3.25rem;
	--sun-icon-fill: var(--gray-tint-30);
	--moon-icon-fill: var(--extras-white-alpha-64);
	--main-header-link-color: var(--gray-tint-80);
}

:root[data-theme="light"] {
	--main-header-bg: var(--gray-tint-80);
	--top-bar-icon-fill: var(--gray-base);
	--sidebar-bg: var(--gray-tint-90);
	--sidebar-icon-fill: var(--gray-tint-50);
	--sidebar-icon-active-fill: var(--gray-base);
	--sidebar-link-color: var(--gray-tint-50);
	--sidebar-link-active-color: var(--gray-base);
	--sidebar-menu-heading-color: var(--gray-tint-50);
	--theme-switcher-bg: var(--gray-tint-80);
	--theme-switcher-indicator: var(--extras-sun);
	--theme-switcher-indicator-pos: .25rem;
	--sun-icon-fill: var(--extras-black-alpha-64);
	--moon-icon-fill: var(--gray-tint-50);
	--main-header-link-color: var(--gray-base);
}



/* ================================================= */
/* General styles */
/* ================================================= */
html {
	font-size: 100%;
	line-height: 1.4;
}

body {
	font-family: 'Inter', sans-serif;
	color: var(--gray-base);
}
.colorPass {
 color:var(--vGreenStrong);
}
.colorFail {
	color:var(--vRedMedium);
}
.colorGrey {
	color:var(--vGreyStrong);
}
.colorLink {
	color:var(--vBlueStrong);
}
.colorSelected {
	color:var(--vBlackStrong);
	font-weight: 700;
}
.colorUnSelected {
	color:var(--vGreyStrong);
	font-weight: 400;
}
.loadingScreen {
	display:none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 9999;
	text-align: center;
	padding-top: 20%;
	color:var(--vWhiteStrong)
}
.checkbox-container {
	display: flex;
	align-items: center;
	gap: 5px;
	padding-bottom: 5px;
}
.checkbox-container input[type='checkbox'] {
	appearance: none;
	width: 20px;
	height: 20px;
	border: 1px solid var(--vBlackLighter);
	border-radius: 4px;
	cursor: pointer;
}
.checkbox-container input[type='checkbox']:checked {
	background-color: var(--vBlackLighter);
}
.checkbox-label {
	font-size: 12px;
}



/* ================================================= */
/* Main header */
/* ================================================= */
#main-header {
	background-color: var(--main-header-bg);
	padding: 1rem 1.5rem;
	transition: background-color .4s ease-in-out;
}

#main-header nav,
#main-header ul,
#main-header a {
	display: flex;
	align-items: center;
}

#main-header nav {
	justify-content: space-between;
}

#main-header nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2rem;
}

#main-header svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: var(--top-bar-icon-fill);
	transition: fill .4s ease-in-out;
}

.main-content__listAction svg {
	width: 32px;
	height: 32px;
	fill: var(--vBlackStrong);
	transition: fill .4s ease-in-out;
	padding-top: 5px;
}

.main-content__fieldInput svg {
	width: 24px;
	height: 24px;
	fill: var(--vGreyLight);
	transition: fill .4s ease-in-out;
	vertical-align: middle;
}

#main-header__sidebar-toggle {
	appearance: none;
	background-color: transparent;
	border: none;
}

#toggle-icon-close,
body.sidebar-open #toggle-icon-menu {
	display: none;
	
}

body.sidebar-open #toggle-icon-close {
	display: block;

}

#main-header__logo,
#main-header a span {
	display: none;
}



/* ================================================= */
/* Main */
/* ================================================= */
#main {
	position: relative;
}



/* ================================================= */
/* Sidebar */
/* ================================================= */
#sidebar {
	background-color: var(--sidebar-bg);
	padding: 1.5rem 0 1.5rem 1.5rem;
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 4rem;
	height: 100vh;
	align-items: flex-start;
	transform: translate3d(-100%, 0, 0);
	transition: transform .4s ease-in-out, background-color .4s ease-in-out;
}

#sidebar svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: var(--sidebar-icon-fill);
	transition: fill .4s ease-in-out;
}

#sidebar__collapse {
	display: none;
}

#sidebar__nav ul {
	list-style: none;
	padding: 0;
	margin: -1.5rem 0 0 0  ;
}

#sidebar__nav ul a {
	display: flex;
	padding: .4rem 0;
	gap: .75rem;
	align-items: center;
	text-decoration: none;
	color: var(--sidebar-link-color);
	padding-right: 3rem;
	transition: color .3s ease-in-out;
}

#sidebar__nav ul a.active {
	color: var(--sidebar-link-active-color);
	cursor: pointer;
}

#sidebar__nav ul a.active svg {
	fill: var(--sidebar-icon-active-fill);
	cursor: pointer;
}

#sidebar__nav ul a:hover {
	color: var(--sidebar-link-active-color);
	cursor: pointer;
}

#sidebar__nav ul a:hover svg {
	fill: var(--sidebar-icon-active-fill);
	cursor: pointer;
}

.menu-heading {
	color: var(--sidebar-menu-heading-color);
	font-size: 81.25%;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
	padding: .75rem 0;
}

#sidebar__theme-switcher {
	background-color: var(--theme-switcher-bg);
	border-radius: 50px;
	display: flex;
	align-items: center;
	padding: 0.875rem;
	gap: 1.75rem;
	position: relative;
	cursor: pointer;
	transition: background-color .4s ease-in-out;
}

#sidebar__theme-switcher::before {
	content: '';
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	background-color: var(--theme-switcher-indicator);
	border-radius: 50px;
	z-index: 0;
	left: 0;
	transform: translateX(var(--theme-switcher-indicator-pos));
	transition: transform .4s ease-in-out;
}

#sidebar__theme-switcher svg {
	z-index: 1;
}

#sidebar #sidebar__theme-switcher__sun {
	fill: var(--sun-icon-fill);
}

#sidebar #sidebar__theme-switcher__moon {
	fill: var(--moon-icon-fill);
}

#overlay {
	position: absolute;
	inset: 0;
	background-color: var(--gray-alpha-80);
	opacity: 0;
	transition: opacity .4s ease-in-out, visibility .4s ease-in-out;
	overflow: hidden;
	visibility: hidden;
}

body.sidebar-open #overlay {
	opacity: 1;
	visibility: visible;

}

body.sidebar-open #sidebar {
	transform: translate3d(0, 0, 0);
	z-index:99999;
}

.statusHolder_Fail {
	display:flex;
	flex:1;
	justify-content:center;
	align-items: center;
	background-color:var(--vRedMedium);
	font-size:16px;
	font-weight: 400;
	max-height:50px;
	min-height:50px;
	margin-bottom: 30px;
	display: none;
}
.statusHolder_Pass {
	display:flex;
	flex:1;
	justify-content:center;
	align-items: center;
	background-color:var(--vGreenMedium);
	font-size:16px;
	font-weight: 400;
	max-height:50px;
	min-height:50px;
	margin-bottom: 30px;
	display: none;
}

/* ================================================= */
/* Icons */
/* ================================================= */


.iconBlue__32{
	fill:var(--vBlueStrong);
	width:32px;
	height:32px;
	cursor:pointer;
  }
  .iconGreen__32{
	fill:var(--vGreenStrong);
	width:32px;
	height:32px;
	cursor:pointer;
  }
  .iconRed__32{
	fill:var(--vRedStrong);
	width:32px;
	height:32px;
	cursor:pointer;
  }
  .iconBlack__32{
	fill:var(--vBlackStrong);
	width:32px;
	height:32px;
	cursor:pointer;
  }


/* ================================================= */
/* Main content */
/* ================================================= */
#main-content {
	padding-left: 1.5rem;
	padding-top: 1.5rem;
	padding-right: 1.5rem;
	padding-bottom: 1.5rem;
	background-color: var(--vWhiteLight);
	height: 100vh; /* Adjust the maximum height as needed */
    overflow-y: auto; /* Add vertical scrollbars when content overflows */
}

#main-content__container {
	height: calc(100vh + 10rem);
	display: flex;
	flex-direction: column; /* Stack items vertically */
}

.main-content__statsContainer {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-around; /* Adjust this based on your preference */
}

.main-content__divider_15 {
	margin-top:15px
}
.main-content__divider_30 {
	margin-top:30px
}
.main-content__divider_50 {
	margin-top:50px
}

.main-content__top {
	display: flex;
	justify-content: space-between;
  	align-items:center;
	gap:15px;
	margin-bottom: 1rem;
}
.main-content__title {
	display: flex; /* Add flex display */
	align-items: center; /* Align text vertically */	
	font-weight: bold;
	font-size: 16px;
	gap:20px;
}

.main-content__subtitle{
	font-weight: bold;
	font-size: 14px; 
}

.main-content__actionLeft {
	display: flex; /* Add flex display */
	align-items: center; /* Align text vertically */
	justify-content: left; /* Align text horizontally */
	font-weight: bold;
	font-size: 18px; 
	width:100px;

}
.main-content__actionRight {
	display: flex; /* Add flex display */
	align-items: center; /* Align text vertically */
	justify-content: right; /* Align text horizontally */
	font-weight: normal;
	gap:10px;
	font-size: 16px; 
	cursor: pointer;
	width:100px;

}

.main-content__comment {
	font-size: 11px; 
	margin-bottom: 1rem;
}
.main-content__input {

	display: grid;
	align-items: start;
	margin-bottom:1rem;
}
.main-content__inputHelp {
	display: grid;
	align-items: start;
	margin-bottom:1rem;
	font-size:12px;
	font-weight: 400;
}
.main-content__form {
	display: grid;
  	align-items: center;
	margin-bottom: 1rem;
	gap:0.2rem;

}
.main-content__fieldDesc {
	font-size:11px;
	font-weight: 400;
	margin-top:0.5rem;
}
.main-content__fieldInput {
	display:flex;
	align-items: center;
	justify-content: center;
	
}

.main-content__header {
	display: flex;
	justify-content: flex-start;
	
}
.main-content__header_item {
	
	padding-top: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	padding-right: 0px;
	border-bottom: 0.5px solid var(--vGreyMedium); /* light grey */
	font-size: 12px;
	letter-spacing: -0.5px;
	font-weight: 600;
	display: flex;
	align-items: center;
}
.main-content__header_item:last-child {
	flex: 1;
}
.main-content__header_item_select {
	cursor: pointer;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 6px;
	padding-right: 6px;
}
.main-content__header_item_select:hover {
	background-color: var(--vGreyLight); /* light grey */
	border-radius:4px;
}


.main-content__header_page {
	display: flex;
	justify-content: flex-start;
	gap:10px;
	
}
.main-content__header_page_item {
	display: flex;
	flex:1;
	gap:3px;
	align-items: flex-start;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid var(--vGreyMedium); /* light grey */
	border-radius:10px;
	font-size: 12px;
	letter-spacing: -0.5px;
	font-weight: 600;
	cursor:pointer;
	
}

.main-content__header_page_item_title {

	font-weight: 300;
	
	
}

.main-content__header_page_item_value{

	font-weight: 600;
	
}

.main-content__list_Header{
	display: flex;
	justify-content: space-between;
  	align-items: center;
	min-height:35px;
	/* Additional styling for your cards */

	box-sizing: border-box;
	border-radius: 5px;
	cursor: pointer;
	margin-bottom: 0.5rem; /* Add a margin to create a gap between cards and between rows */
	font-size:14px;
}


.main-content__list_nobox{
	display: flex;
	justify-content: space-between;
  	align-items: center;
	min-height:35px;

	/* Additional styling for your cards */
	background-color: var(--vWhiteStrong);
	border-bottom: 1px solid var(--vBlackLighter);
	padding: 0px 0px 0px 0px;
	margin-bottom: 0.3rem; /* Add a margin to create a gap between cards and between rows */
	font-size:14px;
	/*display: none;*/

}

.main-content__listPayments{
	display: flex;
	justify-content: space-between;
  	align-items: center;
	min-height:35px;

	/* Additional styling for your cards */
	/*background-color: var(--vWhiteStrong);*/
	border-bottom: 0.5px solid var(--vGreyMedium);
	padding: 0px 0px 0px 0px;
	/*box-sizing: border-box;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
	border-radius: 5px;
	cursor: pointer;*/
	margin-bottom: 0rem; /* Add a margin to create a gap between cards and between rows */
	font-size:14px;
	/*display: none;*/

}

.main-content__listRES {
    display: flex;
    flex-direction: column; /* Change flex direction to column */
    /* Remove justify-content and align-items properties */
    min-height: auto; /* Remove fixed height */
    /* Remove other styles not relevant to the text expansion */
    background-color: var(--vWhiteStrong);
    border: 0.5px solid #ddd;
    padding: 10px; /* Add padding */
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 0.5rem; /* Add a margin to create a gap between cards and between rows */
    font-size: 14px;
}

.main-content__listDataRES {
    /* Remove display and align-items properties */
    font-size: 12px;
    gap: 10px;
    padding: 0px 0; /* Add padding to create space between text and border */
    flex-grow: 1; /* Allow the div to grow within its container */
}



.main-content__list{
	display: flex;
	justify-content: space-between;
  	align-items: center;
	min-height:35px;

	background-color: var(--vWhiteStrong);
	border: 0.5px solid #ddd;
	padding: 0px 0px 0px 10px;
	box-sizing: border-box;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
	border-radius: 5px;
	cursor: pointer;
	margin-bottom: 0.5rem; 
	font-size:14px;
	

}

.main-content__list_checkboxes{
	display: flex;
	justify-content: space-between;
  	align-items:flex-start;
	height:auto;
	cursor: pointer;
	margin-bottom: 10px; 
	font-size:14px;
	

}

.main-content__listData {
    display: flex;
    align-items: start;
    font-size: 12px;
    gap: 10px;
}

.main-content__listData_Col1 {
	min-width: 60px;
    flex-shrink: 0; /* Prevent the first column from shrinking */
	font-weight: 700;
}
.main-content__listData_Col2 {
	min-width: 80px;
    flex-shrink: 0; /* Prevent the first column from shrinking */
	font-weight: 300;
	color: var(--vBlackLighter);
}

.main-content__listData_Col3{
	flex-grow: 1;
	font-weight: 300;
	color: var(--vBlackLighter);

}

.main-content__listAction{
	font-size:12px;
}

.main-content__statsCard {

	flex: 1 0 calc(50% - 1rem); /* Equal size for all cards with a gap of 1rem */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* Additional styling for your cards */
		/*border: 1px solid #ddd;*/
		padding: 0.5rem;
		box-sizing: border-box;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 1rem;
		margin: 0rem; /* Add a margin to create a gap between cards and between rows */

		/*
	flex: 1 0 calc(25% - 1rem); 
	min-width:100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	border: 1px solid #ddd;
	padding: 0.5rem;
	box-sizing: border-box;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 1rem;
	cursor: pointer;
	margin: 0rem; */
}
.main-content__statsValue {
	font-weight: bold;
	font-size: 20px; 
	margin-bottom: 3px;
}
.main-content__statsDesc {
	font-size: 11px;
	text-align:center;
}

/* ITEMS */

.input__standard {
    border: 0.5px solid var(--gray-tint-50);
    box-sizing: border-box;
    padding: 10px;
    height:40px;
    width:335px;
    border-radius: 6px;
    font-size: 16px;
    color: var(--gray-shade-60);
	outline: none;
	background-color: var(--vWhiteStrong);
  }
  .main-content__input input:focus {
	border: 1px solid var(--gray-tint-30); /* Adjust the color and width as needed */
}


  .input__standardDefault {
	flex:1;
    border-top: 0.5px solid var(--gray-tint-50);
	border-bottom: 0.5px solid var(--gray-tint-50);
	border-left: 0.5px solid var(--gray-tint-50);
	border-right: 0.5px solid var(--gray-tint-50);
    box-sizing: border-box;
    padding: 5px;
    height:40px;
    border-radius: 6px 6px 6px 6px;
    font-size: 16px;
    color:var(--vBlackStrong);
	background-color: var(--vWhiteStrong);
	outline: none;
  }
 
.input__standardEdit {
	flex:1;
    border-top: 0.5px solid var(--gray-tint-50);
	border-bottom: 0.5px solid var(--gray-tint-50);
	border-left: 0.5px solid var(--gray-tint-50);
	border-right: 0px solid var(--gray-tint-50);
    box-sizing: border-box;
    padding: 5px;
    height:40px;
    border-radius: 6px 0px 0px 6px;
    font-size: 16px;
    color:var(--vBlackStrong);
	background-color: var(--vWhiteStrong);
	outline: none;
  }

.input__standardRead {
	flex:1;
    border-top: 0.5px solid var(--gray-tint-50);
	border-bottom: 0.5px solid var(--gray-tint-50);
	border-left: 0.5px solid var(--gray-tint-50);
	border-right: 0px solid var(--gray-tint-50);
    box-sizing: border-box;
    padding: 5px;
    height:40px;
    border-radius: 6px 0px 0px 6px;
    font-size: 16px;
	outline: none;
	color:var(--vBlackLighter);
	background-color: var(--vWhiteLight);
}
.input__standardRead.noButton {
    border: 0.5px solid var(--gray-tint-50);
	border-radius: 6px 6px 6px 6px;
}
.main-content__inputEdit input:focus {
	border: 1px solid var(--gray-tint-30); /* Adjust the color and width as needed */
}
.input__standard_button_edit {
    border-top: 0.5px solid var(--gray-tint-50);
	border-bottom: 0.5px solid var(--gray-tint-50);
	border-left: 0px solid var(--gray-tint-50);
	border-right: 0.5px solid var(--gray-tint-50);
	background-color: var(--vGreyMedium);
    box-sizing: border-box;
    padding: 0px;
    height:40px;
    width:40px;
    border-radius: 0px 6px 6px 0px;
    font-size: 16px;
    color: var(--vBlueMedium);
	outline: none;
	cursor: pointer;
}
.input__standard_button_delete {
    border-top: 0.5px solid var(--gray-tint-50);
	border-bottom: 0.5px solid var(--gray-tint-50);
	border-left: 0px solid var(--gray-tint-50);
	border-right: 0.5px solid var(--gray-tint-50);
	background-color: var(--vRedMedium);
    box-sizing: border-box;
    padding: 0px;
    height:40px;
    width:40px;
    border-radius: 0px 6px 6px 0px;
    font-size: 16px;
    color: var(--vBlueMedium);
	outline: none;
	cursor: pointer;
}
.input__standardDelete {
	flex:1;
    border-top: 0.5px solid var(--gray-tint-50);
	border-bottom: 0.5px solid var(--gray-tint-50);
	border-left: 0.5px solid var(--gray-tint-50);
	border-right: 0px solid var(--gray-tint-50);
    box-sizing: border-box;
    padding: 5px;
    height:40px;
    border-radius: 6px 0px 0px 6px;
    font-size: 16px;
	outline: none;
	color:var(--vBlackLighter);
	background-color: var(--vWhiteLight);
}
.input__standard_button_search {
    border-top: 0.5px solid var(--gray-tint-50);
	border-bottom: 0.5px solid var(--gray-tint-50);
	border-left: 0px solid var(--gray-tint-50);
	border-right: 0.5px solid var(--gray-tint-50);
	background-color: var(--vBlueStrong);
    box-sizing: border-box;
    padding: 0px;
    height:40px;
    width:40px;
    border-radius: 0px 6px 6px 0px;
    font-size: 16px;
    color: var(--vWhiteLight);
	outline: none;
	cursor: pointer;
}
.input__standard_button_save {
	border-top: 0.5px solid var(--gray-tint-50);
	border-bottom: 0.5px solid var(--gray-tint-50);
	border-left: 0px solid var(--gray-tint-50);
	border-right: 0.5px solid var(--gray-tint-50);
	background-color: var(--vGreenStrong);
    box-sizing: border-box;
    padding: 0px;
    height:40px;
    width:40px;
    border-radius: 0px 6px 6px 0px;
    font-size: 16px;
	outline: none;
	cursor: pointer;
}
.input__standard_button_cancel {
	border-top: 0.5px solid var(--gray-tint-50);
	border-bottom: 0.5px solid var(--gray-tint-50);
	border-left: 0.5px solid var(--gray-tint-50);
	border-right: 0.5px solid var(--gray-tint-50);
	background-color: var(--vGreyMedium);
    box-sizing: border-box;
    padding: 0px;
    height:40px;
    width:40px;
    
	border-radius: 0px 0px 0px 0px;
    font-size: 16px;
	outline: none;
	cursor: pointer;
}

.input__standard_button_promote {
	border-top: 0.5px solid var(--gray-tint-50);
	border-bottom: 0.5px solid var(--gray-tint-50);
	border-left: 0px solid var(--gray-tint-50);
	border-right: 0.5px solid var(--gray-tint-50);
	background-color: var(--vGreenStrong);
    box-sizing: border-box;
    padding: 0px;
    height:40px;
    width:40px;
    font-size: 16px;
	outline: none;
	cursor: pointer;
}
.input__standard_button_demote {
	border-top: 0.5px solid var(--gray-tint-50);
	border-bottom: 0.5px solid var(--gray-tint-50);
	border-left: 0px solid var(--gray-tint-50);
	border-right: 0.5px solid var(--gray-tint-50);
	background-color: var(--vRedMedium);
    box-sizing: border-box;
    padding: 0px;
    height:40px;
    width:40px;
		border-radius: 0px 6px 6px 0px;
    font-size: 16px;
	outline: none;
	cursor: pointer;
}

.input__standardEdit_button:active {
	
	background-color: var(--vBlueStrong);
}
.slider__container {
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	align-items: center;
	width: 100%;
	height: 50px;
	background-color: var(--vWhiteStrong);
	border:0.5px solid var(--gray-tint-50);
	border-radius: 6px;
	overflow: hidden;
	gap: 4px;
	padding-top:6px;
	padding-bottom:6px;
	padding-left:6px;
	padding-right:6px;
}

.slider__button {
	flex: 1;
	height: 38px;
	line-height: 38px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 6px;
	transition: background-color 0.3s ease;
	padding:0px;
}

.slider__button:hover {
	background-color: var(--vBlueMedium);
}

.slider__input {
	display: none;
}

.slider__input:checked + .slider__button {
	background-color: var(--vBlueMedium);
	color: var(--vWhiteLight);
}

.slider__input:not(:checked) + .slider__button {
	background-color: transparent;
	color: var(--vGreyStrong);
}
.ticketMain {
	display: flex;
    flex-direction: row;
    width: 100%;
	margin-top: 0px;
	margin-bottom: 20px;
}
.ticketContainer {
	display: flex;
    flex-direction: column;
    width: 100%;
}
.ticketRow {
	display: flex;
    flex-direction: row;
    width: 100%;
    border-bottom: 1px solid #ccc; /* Optional: Add border between rows */
}
.ticketTitle {
	display: flex;
    flex: 1;
	max-height:30px;
	font-weight: bold;
	margin-top:15px;
}
.ticketColumn {
	padding: 5px 0; /* top and bottom */
	font-size:12px;
}
.ticketColumn.left {
	flex: 0 0 100px; /* Fixed size for column 1 */
}
.ticketColumn.right {
	flex: 1; /* Allow column 2 to stretch */
}

.orgImage {
	width:24px;
	height:24px;
	border-radius:50%;
}
.imageBlack_n_White {
	filter: grayscale(100%);
}


/* ================================================= */
/* Large screens */
/* ================================================= */
@media screen and (min-width: 768px) {
	#main-header__sidebar-toggle {
		display: none;
	}

	#main-header__logo {
		padding-top:0px;
		display: block;
	}

	#main-header svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	#main-header__logo svg {
		width: 2rem;
		height: 2rem;
	}

	#main-header a {
		text-decoration: none;
	}

	#main-header a span {
		display: inline-block;
		font-size: 81.25%;
		color: var(--main-header-link-color);
		transition: color .4s ease-in-out;
	}

	#main-header a {
		gap: .5rem;
	}

	#sidebar {
		position: relative;
		transform: none;
	}

	#main {
		display: grid;
		grid-template-columns: auto 1fr;
	}

	#sidebar__collapse {
		display: flex;
		align-items: center;
		gap: .75rem;
		padding: .75rem 0;
		appearance: none;
		background: transparent;
		border: none;
		font-size: 81.25%;
		color: var(--primary-base);
		cursor: pointer;
	}

	#sidebar__collapse svg {
		fill: var(--primary-base);
	}

	body.sidebar-collapsed .menu-heading,
	body.sidebar-collapsed #sidebar span {
		display: none;
	}

	body.sidebar-collapsed #sidebar__theme-switcher {
		display: none;
	}

	body.sidebar-collapsed #sidebar {
		padding-right: 1.5rem;
	}

	body.sidebar-collapsed #sidebar a,
	body.sidebar-collapsed #sidebar__collapse {
		width: 2.75rem;
		padding-right: 0;
		justify-content: center;
	}

	body.sidebar-collapsed #sidebar__collapse svg {
		transform: rotate(180deg);
	}

	.main-content__statsContainer{
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: space-around; /* Adjust this based on your preference */
		}
	
	.main-content__top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1rem;
	}

	.main-content__title{
		font-weight: bold;
		font-size: 18px; 
		margin-bottom: 5px;
	}

	.main-content__subtitle{
		font-weight: bold;
		font-size: 18px; 
	}

	.main-content__action{
		font-weight: bold;
		font-size: 18px; 
		margin-bottom: 3px;
	}
	.main-content__comment{
		font-size: 14px; 
		margin-bottom: 1rem;
	}

	.main-content__statsCard {
		flex: 1 0 calc(25% - 1rem); /* Equal size for all cards with a gap of 1rem */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* Additional styling for your cards */
		/*border: 1px solid #ddd;*/
		padding: 0.5rem;
		box-sizing: border-box;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 1rem;
		margin: 0rem; /* Add a margin to create a gap between cards and between rows */
	}
	.main-content__statsValue {
		font-weight: bold;
		font-size: 30px; 
		margin-bottom: 5px;
	}
	.main-content__statsDesc {
		font-size: 12px;
		text-align:center;
	}

}

.search-container {
    position: relative;
}

.users-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background-color: white;
    border: 1px solid rgba(50, 50, 50, 1);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
}

.users-list.active {
    display: block;
}

.user-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.user-item:hover {
    background-color: var(--vGreyLight);
}