:root {
	/*color: #555;
  color: #949494;*/
	/*--color-main: #838383;*/
	--color-main: #000000;
	--color-active: rgba(255, 73, 51, 1);
	/*#2aa55d;*/
	--color-active-a15: rgba(42, 165, 93, 0.15);
	--color-hover: rgb(194, 194, 194);
	/*#3bac6a;*/
	--background-color: rgb(255, 255, 255);
	--btnprimaryback: rgba(255, 73, 51, 1);
	/*#3c4b64;*/
	--btnprimarybackhover: rgb(255, 96, 79);
	--btnprimaryselected: #FFE3DE;
	/* gray */
	/*
  --btnsecondarycolor: rgb(255, 255, 255);
  --btnsecondaryback: rgba(96, 96, 96, 1);
  --btnsecondarybackhover: rgb(194, 194, 194);
  */
	/* white */
	--btnsecondarycolor: rgba(52, 64, 84, 1);
	--btnsecondaryback: rgb(255, 255, 255);
	--btnsecondarybackhover: rgb(255, 255, 255);
	--btnsecondaryborder: rgba(231, 234, 238, 1);
	/*no background btn*/
	--btntranshover: #e5e5e5;

	--select-option-hover: var(--btntranshover);
	--select-option-active: var(--btnprimarybackhover);

	--projectimg: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='128.000000pt' height='128.000000pt' viewBox='0 0 128.000000 128.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cmetadata%3E%0ACreated by potrace 1.10, written by Peter Selinger 2001-2011%0A%3C/metadata%3E%3Cg transform='translate(0.000000,128.000000) scale(0.100000,-0.100000)'%0Afill='%23000000' stroke='none'%3E%3Cpath d='M155 1125 c-34 -33 -32 -70 5 -107 30 -29 30 -31 30 -141 1 -150 21%0A-177 139 -177 54 0 61 -2 61 -20 0 -17 -7 -20 -39 -20 -22 0 -42 -4 -45 -9%0A-10 -15 21 -32 51 -29 23 2 29 -1 31 -19 3 -22 0 -23 -71 -23 -72 0 -76 -1%0A-101 -31 -25 -29 -26 -37 -26 -141 0 -109 0 -110 -30 -138 -35 -33 -38 -67 -9%0A-104 34 -43 110 -32 129 20 12 29 -3 72 -30 91 -18 13 -20 26 -20 128 0 136 6%0A145 103 145 55 0 58 -1 55 -22 -2 -19 -8 -22 -31 -20 -30 3 -61 -14 -51 -29 3%0A-5 23 -9 45 -9 26 0 39 -4 39 -13 0 -16 42 -57 58 -57 6 0 12 -19 14 -43 4%0A-56 32 -59 36 -4 2 28 8 37 22 37 14 0 20 -9 22 -37 4 -52 32 -52 36 0 3 29 7%0A37 23 37 16 0 19 -7 19 -46 0 -38 -5 -51 -30 -74 -37 -35 -40 -77 -7 -108 50%0A-47 127 -15 127 53 0 30 -29 75 -49 75 -3 0 -6 23 -6 50 0 45 2 50 22 50 20 0%0A23 -5 23 -40 0 -29 4 -40 15 -40 11 0 15 11 15 40 0 35 3 40 24 40 20 0 23 -4%0A22 -37 -1 -28 3 -38 14 -38 10 0 16 12 18 38 3 29 9 40 31 51 15 8 32 26 39%0A40 8 19 20 25 49 28 26 2 38 8 38 18 0 11 -10 15 -37 14 -34 -1 -38 2 -38 22%0A0 22 4 24 55 24 46 0 60 -4 80 -25 23 -22 25 -31 25 -128 0 -103 0 -103 -30%0A-125 -58 -44 -26 -132 48 -132 71 0 99 86 42 133 -28 24 -29 27 -23 95 8 95%0A-3 159 -32 188 -21 21 -34 24 -95 24 -68 0 -70 1 -70 25 0 21 4 24 28 19 31%0A-5 58 8 48 25 -4 6 -23 11 -42 11 -27 0 -34 4 -34 19 0 16 9 19 69 23 111 6%0A132 39 126 203 -2 53 1 95 6 95 21 0 49 42 49 74 0 40 -37 76 -77 76 -34 0%0A-73 -42 -73 -80 0 -29 29 -70 50 -70 6 0 10 -43 10 -110 0 -137 -8 -150 -100%0A-150 -53 0 -60 2 -60 19 0 16 8 20 38 23 54 4 51 32 -5 36 -27 2 -43 8 -43 16%0A0 15 -42 56 -58 56 -7 0 -12 16 -12 39 0 22 -4 42 -9 45 -15 10 -32 -21 -29%0A-51 2 -22 -1 -29 -19 -31 -19 -3 -22 2 -25 38 -4 52 -22 52 -26 0 -3 -36 -6%0A-41 -25 -38 -18 3 -21 10 -22 52 0 41 4 51 28 68 38 27 39 87 1 117 -35 28%0A-69 26 -99 -4 -35 -34 -33 -76 5 -108 26 -22 30 -32 30 -76 0 -44 -3 -51 -20%0A-51 -17 0 -20 7 -20 39 0 24 -5 41 -14 44 -20 8 -26 -2 -26 -45 0 -31 -3 -38%0A-20 -38 -17 0 -20 7 -20 40 0 33 -3 40 -20 40 -17 0 -20 -7 -20 -38 0 -32 -5%0A-41 -25 -50 -14 -7 -30 -23 -37 -37 -9 -20 -18 -25 -50 -25 -31 0 -38 -3 -38%0A-20 0 -17 7 -20 40 -20 33 0 40 -3 40 -20 0 -18 -7 -20 -63 -20 -91 0 -97 9%0A-97 144 0 103 1 108 27 130 36 32 36 81 -1 113 -35 30 -71 29 -101 -2z m85%0A-30 c15 -19 4 -52 -21 -60 -38 -12 -65 35 -37 63 16 16 43 15 58 -3z m430 -4%0Ac13 -25 4 -48 -21 -56 -38 -12 -65 35 -37 63 18 18 46 14 58 -7z m430 0 c15%0A-28 -21 -71 -47 -55 -20 12 -28 37 -19 60 8 21 53 17 66 -5z m-272 -247 c21%0A-15 22 -20 22 -196 0 -155 -2 -184 -17 -200 -14 -16 -35 -18 -199 -18 -178 0%0A-183 1 -198 22 -13 18 -16 55 -16 195 0 160 2 175 20 193 18 18 33 20 193 20%0A140 0 177 -3 195 -16z m-584 -617 c16 -26 -27 -62 -55 -47 -19 10 -26 50 -12%0A64 13 12 56 2 67 -17z m430 0 c16 -26 -27 -62 -55 -47 -19 10 -26 50 -12 64%0A13 12 56 2 67 -17z m426 3 c15 -28 -22 -65 -49 -50 -24 13 -31 30 -19 53 12%0A23 55 22 68 -3z'/%3E%3Cpath d='M589 785 c-15 -8 -33 -32 -42 -53 -8 -21 -22 -44 -31 -51 -12 -10%0A-16 -32 -16 -86 0 -99 7 -105 138 -105 127 0 132 4 132 106 0 62 -3 77 -20 91%0A-11 10 -20 25 -20 35 0 53 -89 93 -141 63z m91 -45 c32 -32 24 -40 -40 -40%0A-64 0 -73 9 -43 42 21 24 58 23 83 -2z m54 -96 c3 -9 6 -35 6 -59 0 -32 -5%0A-47 -17 -53 -15 -7 -128 -9 -173 -3 -6 0 -10 30 -10 66 l0 65 94 0 c76 0 95%0A-3 100 -16z'/%3E%3Cpath d='M620 596 c0 -31 14 -40 30 -21 15 18 6 45 -15 45 -9 0 -15 -9 -15%0A-24z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.divSplit {
	display: flex;
	/*border: solid 1px red;*/
	padding: 5px;
	height: 90vh;
}

@media (min-width: 768px) {
	#divLeft {
		flex: 0 0 auto;
		width: 50%;
	}

	#divRight {
		flex: 0 0 auto;
		width: 50%;
	}
}

#divLeft {
	padding: 5px;
	height: 90vh;
	/*overflow: scroll; */
}

#divRight {
	padding: 5px;
	height: 90vh;
	display: none;
	/*overflow: scroll; */
}


/* #region GLOBAL */
/*
* ==========================================================
*     GLOBAL
* ==========================================================
*/
@-webkit-viewport {
	width: device-width;
}

@-moz-viewport {
	width: device-width;
}

@-ms-viewport {
	width: device-width;
}

@-o-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');*/

/* roboto-100 - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100;
	src: local('Roboto Thin'), local('Roboto-Thin'),
		url('../../fonts/Roboto/Roboto-Thin.ttf') format('truetype');
}

/* roboto-300 - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	src: local('Roboto Light'), local('Roboto-Light'),
		url('../../fonts/Roboto/Roboto-Light.ttf') format('truetype');
}

/* roboto-regular - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'),
		url('../../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

/* roboto-500 - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: local('Roboto Medium'), local('Roboto-Medium'),
		url('../../fonts/Roboto/Roboto-Medium.ttf') format('truetype');
}

/* roboto-700 - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: local('Roboto Bold'), local('Roboto-Bold'),
		url('../../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}

/* roboto-900 - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 900;
	src: local('Roboto Black'), local('Roboto-Black'),
		url('../../fonts/Roboto/Roboto-Black.ttf') format('truetype');
}

/* Inter-300 - latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	src: url('../../fonts/Inter/Inter-Light.ttf') format('truetype');
}

/* Inter-400 - latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('../../fonts/Inter/Inter-Regular.ttf') format('truetype');
}

/* Inter-500 - latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: url('../../fonts/Inter/Inter-Medium.ttf') format('truetype');
}

/* Inter-600 - latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url('../../fonts/Inter/Inter-SemiBold.ttf') format('truetype');
}

/* Inter-700 - latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url('../../fonts/Inter/Inter-Bold.ttf') format('truetype');
}

html {
	height: 100%;
	overflow-y: scroll;
	/* scroll always visible*/
	font-size: 14px;
}

body {
	height: 100%;
	margin: 0;
	line-height: 1.6;
	/*colors*/
	/*font-family: "Mulish","Roboto","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;*/
	font-size: 14px;
	font-family: "Inter", "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: var(--background-color);
	color: var(--color-main);
	font-weight: 300;
}

body {
	padding-right: 0 !important
}

/* FIX Bootstrap Modal */

body,
button,
input {
	-webkit-font-smoothing: antialiased;
}

a {
	text-decoration: none;
	color: var(--color-main);
}

a:hover {
	color: var(--color-hover);
}


/* Addresses `outline` inconsistency between Chrome and other browsers. */
a:focus {
	outline: 0 !important;
}

/*
* Improves readability when focused and also mouse hovered in all browsers.
* people.opera.com/patrickl/experiments/keyboard/test
*/
a:active,
a:hover,
input:focus,
textarea:focus,
select:focus,
button:focus {
	outline: 0 !important;
}

li {
	list-style-type: none;
	line-height: 40px;
}

img,
svg {
	vertical-align: middle;
}

aside {
	border-right: 1px solid rgba(241, 241, 242, 1);
}

main {
	padding: 0;
	margin: 0;
}

.app_wrapper {
	width: 100%;
	display: flex;
}

.wrapper {
	display: block;
	width: 100%;
}

/*#endregion*/

/* #region ScrollBAR */
/*
* ==========================================================
*     ScrollBAR
* ==========================================================
*/

/* width */
::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	/*colors*/
	background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
	/*colors*/
	background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	/*colors*/
	background: #555;
}

/*#endregion*/

/* #region Loading */
/*
* ==========================================================
*     LOADING
* ==========================================================
*/
.loadingOverlay {
	position: absolute;
	background: rgba(0, 0, 0, 0.0);
	z-index: 9999;
}

.loader {
	position: relative;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	perspective: 800px;
}

.inner {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.inner.one {
	left: 0%;
	top: 0%;
	animation: rotate-one 1s linear infinite;
	border-bottom: 3px solid #d5d5dd;
}

.inner.two {
	right: 0%;
	top: 0%;
	animation: rotate-two 1s linear infinite;
	border-right: 3px solid #d5d5dd;
}

.inner.three {
	right: 0%;
	bottom: 0%;
	animation: rotate-three 1s linear infinite;
	border-top: 3px solid #d5d5dd;
}

.loadingBlur {
	filter: blur(2px);
}

@keyframes rotate-one {
	0% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}

	100% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@keyframes rotate-two {
	0% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}

	100% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@keyframes rotate-three {
	0% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}

	100% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

/* #endregion */

/* #region Languages */
.language-picker img {
	height: 20px;
	width: 20px;
}

.language-picker .flag-en {
	content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' class='iconify iconify--twemoji' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23B22334' d='M35.445 7C34.752 5.809 33.477 5 32 5H18v2h17.445zM0 25h36v2H0zm18-8h18v2H18zm0-4h18v2H18zM0 21h36v2H0zm4 10h28c1.477 0 2.752-.809 3.445-2H.555c.693 1.191 1.968 2 3.445 2zM18 9h18v2H18z'%3E%3C/path%3E%3Cpath fill='%23EEE' d='M.068 27.679c.017.093.036.186.059.277c.026.101.058.198.092.296c.089.259.197.509.333.743L.555 29h34.89l.002-.004a4.22 4.22 0 0 0 .332-.741a3.75 3.75 0 0 0 .152-.576c.041-.22.069-.446.069-.679H0c0 .233.028.458.068.679zM0 23h36v2H0zm0-4v2h36v-2H18zm18-4h18v2H18zm0-4h18v2H18zM0 9zm.555-2l-.003.005L.555 7zM.128 8.044c.025-.102.06-.199.092-.297a3.78 3.78 0 0 0-.092.297zM18 9h18c0-.233-.028-.459-.069-.68a3.606 3.606 0 0 0-.153-.576A4.21 4.21 0 0 0 35.445 7H18v2z'%3E%3C/path%3E%3Cpath fill='%233C3B6E' d='M18 5H4a4 4 0 0 0-4 4v10h18V5z'%3E%3C/path%3E%3Cpath fill='%23FFF' d='M2.001 7.726l.618.449l-.236.725L3 8.452l.618.448l-.236-.725L4 7.726h-.764L3 7l-.235.726zm2 2l.618.449l-.236.725l.617-.448l.618.448l-.236-.725L6 9.726h-.764L5 9l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L9 9l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L13 9l-.235.726zm-8 4l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L5 13l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L9 13l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L13 13l-.235.726zm-6-6l.618.449l-.236.725L7 8.452l.618.448l-.236-.725L8 7.726h-.764L7 7l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L11 7l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L15 7l-.235.726zm-12 4l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L3 11l-.235.726zM6.383 12.9L7 12.452l.618.448l-.236-.725l.618-.449h-.764L7 11l-.235.726h-.764l.618.449zm3.618-1.174l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L11 11l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L15 11l-.235.726zm-12 4l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L3 15l-.235.726zM6.383 16.9L7 16.452l.618.448l-.236-.725l.618-.449h-.764L7 15l-.235.726h-.764l.618.449zm3.618-1.174l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L11 15l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L15 15l-.235.726z'%3E%3C/path%3E%3C/svg%3E");
}

.language-picker .flag-pt {
	content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' class='iconify iconify--twemoji' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23060' d='M36 27a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v18z'%3E%3C/path%3E%3Cpath fill='%23D52B1E' d='M32 5H15v26h17a4 4 0 0 0 4-4V9a4 4 0 0 0-4-4z'%3E%3C/path%3E%3Cpath fill='%23FFCC4D' d='M15 10a8 8 0 0 0-8 8a8 8 0 1 0 16 0a8 8 0 0 0-8-8zm-6.113 4.594l1.602 1.602l-2.46 1.23a6.95 6.95 0 0 1 .858-2.832zm-.858 3.979l4.4 2.207l-2.706 1.804l.014.021a6.963 6.963 0 0 1-1.708-4.032zM14 24.92a6.945 6.945 0 0 1-2.592-.92H14v.92zM14 23h-3.099L14 20.934V23zm0-3.268l-.607.405L9.118 18l2.116-1.058L14 19.707v.025zm0-1.439l-3.543-3.543l3.543.59v2.953zm0-3.992l-4.432-.713A6.983 6.983 0 0 1 14 11.08v3.221zm7.113.293a6.95 6.95 0 0 1 .858 2.833l-2.46-1.23l1.602-1.603zM16 11.08a6.987 6.987 0 0 1 4.432 2.508L16 14.301V11.08zm0 4.26l3.543-.591L16 18.293V15.34zm0 4.367l2.765-2.765L20.882 18l-4.274 2.137l-.608-.405v-.025zm0 5.213V24h2.592a6.945 6.945 0 0 1-2.592.92zM16 23v-2.066L19.099 23H16zm4.264-.395l.014-.021l-2.706-1.804l4.4-2.207a6.976 6.976 0 0 1-1.708 4.032z'%3E%3C/path%3E%3Cpath fill='%23D52B1E' d='M11 13v7a4 4 0 0 0 8 0v-7h-8z'%3E%3C/path%3E%3Cpath fill='%23FFF' d='M12 14v6a3 3 0 0 0 6 0v-6h-6z'%3E%3C/path%3E%3Cpath fill='%23829ACD' d='M13 17h4v2h-4z'%3E%3C/path%3E%3Cpath fill='%23829ACD' d='M14 16h2v4h-2z'%3E%3C/path%3E%3Cpath fill='%23039' d='M12 17h1v2h-1zm2 0h2v2h-2zm3 0h1v2h-1zm-3 3h2v2h-2zm0-6h2v2h-2z'%3E%3C/path%3E%3C/svg%3E");
}

/* #endregion */

/*MARK: Notifications & Tasks
  */

.notifications,
.tasks {
	align-content: center;
}

.notifications #notificationsmenutitle,
.tasks #tasksmenutitle {
	padding: 0 0 0 10px;
	font-size: 14px;
	font-weight: 500;
}

.notifications #notificationsmenuoptions {
	margin-top: 5px;
	padding: 0 10px 0 10px;
}

.notifications #checkallnotifications,
.tasks #checkalltasks {
	color: var(--btnprimaryback);
	border-radius: 8px;
	width: 100%;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	height: 20px;
}

.notifications #checkallnotifications a,
.tasks #checkalltasks a {
	line-height: 17px;
}

.notifications #checkallnotifications:hover,
.tasks #checkalltasks:hover {
	background-color: var(--btnsecondarybackhover);
	color: var(--btnprimaryback);
	text-decoration: underline;
}

#notifications-img-container,
#tasks-img-container {
	position: relative;
	align-content: center;
	width: 30px;
	height: 30px;
}

#notifications-img-container #notificationsCounter,
#notifications-img-container #notificationsIcon,
#tasks-img-container #tasksCounter,
#tasks-img-container #tasksIcon {
	position: absolute;
}

#notificationsIcon,
#tasksIcon {
	width: 30px;
	height: 30px;
	z-index: 1;
	left: 0;
	top: 0;
}

#notificationsCounter,
#tasksCounter {
	display: none;
	width: 25px;
	height: 15px;
	background-color: var(--btnprimaryback);
	border: 1px solid var(--btnprimaryback);
	border-radius: 30%;
	z-index: 2;
	/* Ensure this is on top */
	color: white;
	right: -8px;
	top: -2px;
	font-size: x-small;
	text-align: center;
	line-height: normal;
}

#notificationsmenu,
#tasksmenu {
	min-width: 210px;
	max-height: 210px;
	min-height: 50px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #ccc white;
	padding: 0 5px;
	overflow-x: hidden;
}

#notificationsmenu::-webkit-scrollbar,
#tasksmenu::-webkit-scrollbar {
	width: 5px;
}

#notificationsmenu::-webkit-scrollbar-thumb,
#tasksmenu::-webkit-scrollbar-thumb {
	background-color: #999;
	border-radius: 4px;
}

#notificationsmenu::-webkit-scrollbar-track,
#tasksmenu::-webkit-scrollbar-track {
	background-color: white;
}

#notificationsmenu .noNotifications,
#tasksmenu .noTasks {
	display: none;
	padding: 0 10px;
	margin-top: 10px;
}

#notificationsmenu .noNotifications:hover,
#tasksmenu .noTasks:hover {
	background-color: white;
}

#notificationsmenu .noNotifications #noNotifsText,
#tasksmenu .noTasks #noTasksText {
	font-size: 12px;
	font-weight: 300;
	text-align: center;
}

#notificationsmenu .notification-options {
	height: 50px;
	align-content: center;
	padding-top: 10px;
}

#notificationsmenu .notification-options #notifications-checkall {
	float: left;
	padding-left: 10px;
}

#notificationsmenu .notification-options #notifications-checkall:hover {
	color: var(--btnprimarybackhover);
}

#notificationsmenu .notification-options #notifications-markall {
	float: right;
	padding-right: 10px;
	width: 120px;
	line-height: 18px;
}

#notificationsmenu .notification-options #notifications-markall:hover {
	color: var(--btnprimarybackhover);
}

#notificationsmenu .notification-container,
#tasksmenu .task-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 8px;
	padding: 5px 0;
}

#notificationsmenu .notification-container:hover,
#tasksmenu .task-container:hover {
	background-color: var(--btnprimaryselected);
}

#notificationsmenu .notification-container a:hover,
#tasksmenu .task-container a:hover {
	color: black;
}

#notificationsmenu .notification-item,
#tasksmenu .task-item {
	cursor: pointer;
	max-width: 210px;
	display: flex;
	align-items: center;
	gap: 2px;
}

#notificationsmenu .notification-item img,
#tasksmenu .task-item img {
	width: 40px;
	height: 40px;
}

#notificationsmenu .notification-item .notification-content,
#tasksmenu .task-item .task-content {
	max-width: 210px;
	height: 40px;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#notificationsmenu .notification-item .notification-content p,
#tasksmenu .task-item .task-content p {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 0;
}

#notificationsmenu .notification-item .notification-content .timeagotxt {
	font-size: 12px;
	font-weight: 300;
}

#notificationsmenu .notification-item .aConf {
	float: right;
}

#secNotifications>div:first-of-type {
	width: 100%;
}

#secNotifications .unread {
	background-color: var(--btnprimaryselected) !important;
}

#secNotifications .notificationsActionsDiv {
	display: flex;
	justify-content: flex-end;
	align-items: end;
}

#secNotifications .notificationsActionsDiv #markAllAsReadBtn {
	margin: 0;
	margin-left: 20px;
}

#secNotifications .notificationsActionsDiv #actionsBtn {
	margin-left: 20px;
	visibility: hidden;
}

#secNotifications .notificationsActionsDiv #selectedCount {
	margin-left: 20px;
	text-align: center;
	line-height: normal;
	visibility: hidden;
}

.row-select {
	appearance: none;
	/* Removes default checkbox */
	-webkit-appearance: none;
	/* Removes default checkbox in Safari */
	width: 20px;
	height: 20px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background-color: white;
	cursor: pointer;
	position: relative;
}

/* Style for the checked state */
.row-select:checked {
	background-color: var(--btnprimaryback);
	border: 1px solid white;
}

/* Custom checkmark */
.row-select:checked::after {
	content: "";
	position: absolute;
	top: 2.3px;
	left: 6px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/*MARK: Tasks only
*/

/* progress bar */
progress[value] {
	--color: var(--btnprimaryback);
	/* the progress color */
	--background: rgba(234, 236, 240, 1);
	/* the background color */

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	width: 140px;
	height: 8px;
	margin: 0 12px 10px 0;
	border-radius: 4px;
	background: var(--background);
}

progress[value]::-webkit-progress-bar {
	/* webkit (chrome, etc) */
	border-radius: 10em;
	background: var(--background);
}

progress[value]::-webkit-progress-value {
	/* webkit */
	border-radius: 10em;
	background: var(--color);
}

progress[value]::-moz-progress-bar {
	/* firefox */
	border-radius: 10em;
	background: var(--color);
}

/* MARK: Header
*/
/*
* ==========================================================
*     Header
* ==========================================================
*/

.wrapper>header #baseLogoDiv {
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
}

.wrapper>header .header-nav {
	display: flex;
	flex-direction: row;
	margin: 0;
	list-style: none;
	padding-left: 0;
	align-items: center;
}

.wrapper>header #baseLogoDiv img {
	width: 200px;
}

.wrapper>.header.header-sticky {
	position: sticky;
	top: 0;
	z-index: 1029;
}

.wrapper>.header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	background-color: var(--background-color);
	/*line-height: 72px;*/
	/*2024_002*/
	height: 72px;
	border-bottom: 1px solid rgba(241, 241, 242, 1);
}

.wrapper .header-brand {
	margin-right: 1rem;
	text-decoration: none;
	white-space: nowrap;
}

.wrapper .header-brand>img {
	max-height: 60px;
	max-width: 200px;
	padding-left: 5px;
	width: auto;
}

.wrapper>.header>.container-fluid {
	padding: 0;
}

.wrapper>.header>.container-fluid>ul:nth-child(2) {
	/*   background: rgb(205, 255, 205);    */
}

.wrapper>.header>.container-fluid>ul:nth-child(3) {
	/*   background: rgb(255, 165, 165);*/
	margin-left: auto !important;
}

.wrapper>.header>.container-fluid>ul:nth-child(4) {
	/*  background: rgb(165, 165, 255);*/
	margin-left: 1rem !important;
}

.wrapper>.header .nav-link {
	padding: 0px 8px;
}

.nav-user {
	padding: 2px;
}

.configicon {
	display: inline-block;
	color: inherit;
	text-align: center;
	vertical-align: -0.125rem;
	fill: currentcolor;
	width: 1.25rem;
	height: 1.25rem;
	font-size: 1.25rem;
}

.configicon img {
	width: 100%;
	height: auto;
	/* border-radius: 50em; */
}

.nav-avatar {
	padding: 2px 8px;
}

.avatar {
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1rem;
	cursor: pointer;
}

.avatardropdown {
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1rem;
	margin-right: 10px;
}

.avatar img,
.avatar canvas,
.avatardropdown img,
.avatardropdown canvas {
	width: 35px;
	height: 35px;
	border-radius: 8px;
	margin-right: 5px;
	display: none;
	vertical-align: middle;
}

#topdropdownmenu {
	max-width: 264px;
	min-width: 132px;
	overflow: hidden;
}

#topdropdownmenu li {
	line-height: 16px;
}

#topdropdownmenu #changeDeptLi {
	display: none;
}

#topdropdownmenu li #versionnum{
    text-align: center;
    font-size: 12px;
    color: silver;
	font-style: italic;
}

#topdropdownmenu #versionLi {
	margin-top: 10px;
    line-height: 0px;
}

.dropdownmenuicons {
	margin-right: 10px;
}

.languageSelect {
	padding-left: 10px;
}

.dropdown-menu .dropdown-header {
	background-color: rgb(231, 231, 231);
}

.dropdown-menu .dropdown-item {
	display: block;
	width: 100%;
	padding: 5px 10px;
	clear: both;
	font-weight: 400;
	color: var(--cui-dropdown-link-color);
	text-align: inherit;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
	/*color: var(--cui-dropdown-link-hover-color);*/
	background-color: rgba(33, 37, 41, 0.22);
}

.user-picker {
	margin-right: 30px;
}

.dropdown-menu #dropdownuserinfo {
	align-items: center;
	display: flex;
}

.dropdown-menu #dropdownuserinfo:hover {
	background-color: white;
}

.dropdown-menu #dropdownuserinfo #dropdownname {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: left;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
	text-overflow: ellipsis;
}

.dropdown-menu #dropdownuserinfo #dropdownemail {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
	text-overflow: ellipsis;
}

#changeAccDeptList {
	cursor: pointer;
}

/* #endregion */

/* #region SubHeader */
/*
* ==========================================================
*     SubHeader
* ==========================================================
*/
.subheader {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	line-height: 24px;
}


.subheader>.container-fluid {
	display: flex;
	justify-content: center;
}

.header-nav .nav-item {
	border-radius: 8px;
	;
	display: flex;
	width: 50px;
	height: 50px;
	align-items: center;
	justify-content: center;
}

.guestNav {
    gap: 10px;
    padding-left: 10px !important;
}

.nav-item:hover {
	background-color: #eee;
}

.nav-item.active {
	background-color: #ddd;
}

.subheader .nav-item {
	border-top: solid;
	border-width: 0.1px;
}

.subsidebar {
	background-color: #F9FAFB;
	color: rgba(7, 20, 55, 1);
	height: 100vh;
	width: 200px;
	/*	overflow: hidden;
	padding-right: 5px;
	left: 0;
	margin-left: 0;
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 1030; */
}

.subsidebar .nav-item.active {
	background: rgba(255, 255, 255, 1);
}

.subsidebar .nav-item.active .nav-link {
	color: var(--btnprimaryback);
}

.subsidebar .nav-item .nav-link {
	font-weight: 600;
	font-size: 16px;
	color: rgba(102, 112, 133, 1);
}

/*
	background-color: rgba(212, 233, 255, 0.22);
	border-right: 1px solid #a8a8a8;
	 */
/* ##### ORIGINAL SUBSIDEBAR VERSION #####*/
/*.subsidebar {
	background-color: #3c4b64;
	color: #ffffffde;
	height: 100vh;
	width: 200px;
	  overflow: hidden; */

/*
	padding-right: 5px;
	left: 0;
	margin-left: 0;
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 1030;*/
/*   }
.subsidebar .nav-item:hover {
  background-color: #6d7687;
}
.subsidebar .nav-item.active {
  background-color: #ffffff0d;
  } */
.contentLeftSidebar {
	display: flex;

}

.pagecontent {
	padding-left: 5px;
	width: 100%;
}

/* #endregion */

/* #region Buttons */
header .aAdd {
	width: 155px;
	height: 44px;
	border-radius: 8px;
	background-color: var(--btnprimaryback);
	line-height: 40px;
	padding-left: 46px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0em;
	text-align: left;
	color: rgba(255, 255, 255, 1);
	margin-left: auto;

}

.btnRound {
	width: 26px;
	height: 26px;
	padding: 5px;
	/*color: #00549a;*/
	border-radius: 30px;
	text-align: center;
	vertical-align: middle;
}

.btnRoundLg {
	width: 40px;
	height: 40px;
	padding: 5px;
	/*color: #00549a;*/
	border-radius: 30px;
	text-align: center;
	vertical-align: middle;
}

.btnRound:hover,
.btnRoundLg:hover {
	background-color: var(--color-hover);
}

/*.btnRound.aDelete:hover{
	background-color: #ffaeae;
	/ *fill: red;* /
}*/

.btnRound.aInfo {
	content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='26px' height='26px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7C12.8284 7 13.5 6.32843 13.5 5.5C13.5 4.67157 12.8284 4 12 4C11.1716 4 10.5 4.67157 10.5 5.5C10.5 6.32843 11.1716 7 12 7ZM11 9C10.4477 9 10 9.44772 10 10C10 10.5523 10.4477 11 11 11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V10C13 9.44772 12.5523 9 12 9H11Z' fill='%23000000'/%3E%3C/svg%3E");
}

.btnRound.aEdit {
	content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='26px' height='26px' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000000' d='M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z'/%3E%3Cpath fill='%23000000' d='m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z'/%3E%3C/svg%3E");
}

.btnRound.aDelete {
	content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='26px' height='26px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M960 160h-291.2a160 160 0 0 0-313.6 0H64a32 32 0 0 0 0 64h896a32 32 0 0 0 0-64zM512 96a96 96 0 0 1 90.24 64h-180.48A96 96 0 0 1 512 96zM844.16 290.56a32 32 0 0 0-34.88 6.72A32 32 0 0 0 800 320a32 32 0 1 0 64 0 33.6 33.6 0 0 0-9.28-22.72 32 32 0 0 0-10.56-6.72zM832 416a32 32 0 0 0-32 32v96a32 32 0 0 0 64 0v-96a32 32 0 0 0-32-32zM832 640a32 32 0 0 0-32 32v224a32 32 0 0 1-32 32H256a32 32 0 0 1-32-32V320a32 32 0 0 0-64 0v576a96 96 0 0 0 96 96h512a96 96 0 0 0 96-96v-224a32 32 0 0 0-32-32z' fill='%23231815' /%3E%3Cpath d='M384 768V352a32 32 0 0 0-64 0v416a32 32 0 0 0 64 0zM544 768V352a32 32 0 0 0-64 0v416a32 32 0 0 0 64 0zM704 768V352a32 32 0 0 0-64 0v416a32 32 0 0 0 64 0z' fill='%23231815' /%3E%3C/svg%3E");
}

.btnRound.aAdd {
	content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='26px' height='26px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.25 12.75V18H12.75V12.75H18V11.25H12.75V6H11.25V11.25H6V12.75H11.25Z' fill='%23080341'/%3E%3C/svg%3E");
}

.btnRound.aImage {
	content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg fill="%23000000" width="26px" height="26px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M30 2.497h-28c-1.099 0-2 0.901-2 2v23.006c0 1.099 0.9 2 2 2h28c1.099 0 2-0.901 2-2v-23.006c0-1.099-0.901-2-2-2zM30 27.503l-28-0v-5.892l8.027-7.779 8.275 8.265c0.341 0.414 0.948 0.361 1.379 0.035l3.652-3.306 6.587 6.762c0.025 0.025 0.053 0.044 0.080 0.065v1.85zM30 22.806l-5.876-6.013c-0.357-0.352-0.915-0.387-1.311-0.086l-3.768 3.282-8.28-8.19c-0.177-0.214-0.432-0.344-0.709-0.363-0.275-0.010-0.547 0.080-0.749 0.27l-7.309 7.112v-14.322h28v18.309zM23 12.504c1.102 0 1.995-0.894 1.995-1.995s-0.892-1.995-1.995-1.995-1.995 0.894-1.995 1.995c0 1.101 0.892 1.995 1.995 1.995z"></path></svg>');
}

.btnRound.aReprocess {
	content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg fill='%23000000' width='26px' height='26px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Eretweet%3C/title%3E%3Cpath d='M8.013 22.033v-7.972h3.932l-5.902-6.892-6.026 6.893h3.947v11.896h17.468l-3.923-3.924h-9.496zM28.036 19.001v-11.958h-17.531l3.986 3.985h9.496v7.973h-3.932l5.901 6.893 6.026-6.893h-3.946z'%3E%3C/path%3E%3C/svg%3E");
}

.btnRound.aSendMail {
	content: url("data:image/svg+xml,%3Csvg fill='%23000000' height='26px' width='26px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M501.801,139.942H171.312c-5.633,0-10.199,4.566-10.199,10.199v19.235h-97.21c-5.633,0-10.199,4.566-10.199,10.199 c0,5.633,4.566,10.199,10.199,10.199h97.21v132.452h-58.101c-5.633,0-10.199,4.566-10.199,10.199s4.566,10.199,10.199,10.199 h58.101v19.235c0,5.633,4.566,10.199,10.199,10.199h330.489c5.633,0,10.199-4.566,10.199-10.199V150.141 C512,144.508,507.434,139.942,501.801,139.942z M476.641,160.34l-140.07,114.985L197.14,160.34H476.641z M491.602,351.661h-310.09 v-177.77l148.556,122.51c1.884,1.553,4.186,2.331,6.489,2.331c2.295,0,4.591-0.772,6.471-2.316L491.602,174.45V351.661z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M119.673,244.768H10.199C4.566,244.768,0,249.334,0,254.967c0,5.633,4.566,10.199,10.199,10.199h109.474 c5.633,0,10.199-4.566,10.199-10.199C129.873,249.334,125.306,244.768,119.673,244.768z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M69.355,322.227h-5.451c-5.633,0-10.199,4.566-10.199,10.199c0,5.633,4.566,10.199,10.199,10.199h5.451 c5.633,0,10.199-4.566,10.199-10.199C79.554,326.793,74.988,322.227,69.355,322.227z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.btnRound.aNdelete {
	content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 -0.5 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.96967 16.4697C6.67678 16.7626 6.67678 17.2374 6.96967 17.5303C7.26256 17.8232 7.73744 17.8232 8.03033 17.5303L6.96967 16.4697ZM13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697C12.7374 11.1768 12.2626 11.1768 11.9697 11.4697L13.0303 12.5303ZM11.9697 11.4697C11.6768 11.7626 11.6768 12.2374 11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303L11.9697 11.4697ZM18.0303 7.53033C18.3232 7.23744 18.3232 6.76256 18.0303 6.46967C17.7374 6.17678 17.2626 6.17678 16.9697 6.46967L18.0303 7.53033ZM13.0303 11.4697C12.7374 11.1768 12.2626 11.1768 11.9697 11.4697C11.6768 11.7626 11.6768 12.2374 11.9697 12.5303L13.0303 11.4697ZM16.9697 17.5303C17.2626 17.8232 17.7374 17.8232 18.0303 17.5303C18.3232 17.2374 18.3232 16.7626 18.0303 16.4697L16.9697 17.5303ZM11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697L11.9697 12.5303ZM8.03033 6.46967C7.73744 6.17678 7.26256 6.17678 6.96967 6.46967C6.67678 6.76256 6.67678 7.23744 6.96967 7.53033L8.03033 6.46967ZM8.03033 17.5303L13.0303 12.5303L11.9697 11.4697L6.96967 16.4697L8.03033 17.5303ZM13.0303 12.5303L18.0303 7.53033L16.9697 6.46967L11.9697 11.4697L13.0303 12.5303ZM11.9697 12.5303L16.9697 17.5303L18.0303 16.4697L13.0303 11.4697L11.9697 12.5303ZM13.0303 11.4697L8.03033 6.46967L6.96967 7.53033L11.9697 12.5303L13.0303 11.4697Z' fill='%23000000'/%3E%3C/svg%3E");
}

#secDepartments .btnRound.aConf {
	content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='26px' height='26px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12.6111L8.92308 17.5L20 6.5' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.btnRound.aConf {
	content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='26px' height='26px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12.6111L8.92308 17.5L20 6.5' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pinDevice {
    content: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='-2.64 -2.64 29.28 29.28' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%23000000' transform='rotate(0)' stroke-width='0.9600000000000002'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'/%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M19.1835 7.80516L16.2188 4.83755C14.1921 2.8089 13.1788 1.79457 12.0904 2.03468C11.0021 2.2748 10.5086 3.62155 9.5217 6.31506L8.85373 8.1381C8.59063 8.85617 8.45908 9.2152 8.22239 9.49292C8.11619 9.61754 7.99536 9.72887 7.86251 9.82451C7.56644 10.0377 7.19811 10.1392 6.46145 10.3423C4.80107 10.8 3.97088 11.0289 3.65804 11.5721C3.5228 11.8069 3.45242 12.0735 3.45413 12.3446C3.45809 12.9715 4.06698 13.581 5.28476 14.8L6.69935 16.2163L2.22345 20.6964C1.92552 20.9946 1.92552 21.4782 2.22345 21.7764C2.52138 22.0746 3.00443 22.0746 3.30236 21.7764L7.77841 17.2961L9.24441 18.7635C10.4699 19.9902 11.0827 20.6036 11.7134 20.6045C11.9792 20.6049 12.2404 20.5358 12.4713 20.4041C13.0192 20.0914 13.2493 19.2551 13.7095 17.5825C13.9119 16.8472 14.013 16.4795 14.2254 16.1835C14.3184 16.054 14.4262 15.9358 14.5468 15.8314C14.8221 15.593 15.1788 15.459 15.8922 15.191L17.7362 14.4981C20.4 13.4973 21.7319 12.9969 21.9667 11.9115C22.2014 10.826 21.1954 9.81905 19.1835 7.80516Z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E");
    width: 20px;
}


/* iPhone switch */
.form-switch {
	/*  display: inline-block;*/
	display: flex;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.form-switch i {
	position: relative;
	display: inline-block;
	margin-right: .5rem;
	width: 43px;
	/* 46 */
	height: 23px;
	/* 26 */
	background-color: #e6e6e6;
	border-radius: 23px;
	/* 23 */
	vertical-align: text-bottom;
	transition: all 0.3s linear;
}

.form-switch i::before {
	content: "";
	position: absolute;
	left: 0;
	width: 39px;
	/* 42 */
	height: 19px;
	/* 22 */
	background-color: #fff;
	border-radius: 11px;
	transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
	transition: all 0.25s linear;
}

.form-switch i::after {
	content: "";
	position: absolute;
	left: 0;
	width: 19px;
	/* 22 */
	height: 19px;
	/* 22 */
	background-color: #fff;
	border-radius: 11px;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
	transform: translate3d(2px, 2px, 0);
	transition: all 0.2s ease-in-out;
}

.form-switch:active i::after {
	width: 28px;
	transform: translate3d(2px, 2px, 0);
}

.form-switch:active input:checked+i::after {
	transform: translate3d(16px, 2px, 0);
}

.form-switch input {
	display: none;
}

.form-switch input:checked+i::before {
	transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}

.form-switch input:checked+i::after {
	transform: translate3d(22px, 2px, 0);
}

.form-switch input:checked+i {
	background-color: var(--btnprimaryback);
}

/* END iPhone switch */

/* #endregion*/



/*.secMain,*/
.secMain {
	padding: 0 10px 0 10px;
	/* EM max-width: 1280px; */
	margin: auto;
}

.divFlex,
.secMain header,
.secMain .subHeader {
	display: flex;
	flex-wrap: wrap;
}


.spanTitle {
	display: inline-block;
	min-width: 200px;
	font-size: 36px;
	font-weight: 600;
	line-height: 44px;
	letter-spacing: -0.02em;
	text-align: left;
	padding-bottom: 20px;
}

.spanSubTitle {
	display: inline-block;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	text-align: left;
}

.spanSubTitleHeader {
	display: inline-block;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	text-align: left;
	padding-bottom: 15px;
}

.primaryTable {
	width: 100%;
}

/*
xinput, select, textarea {
  -webkit-appearance: none;
  border-radius: 0;
  background-color: #FFFFFF;

  border-style: solid;
  border-width: 1px;
  border-color: #cccccc;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.75);
  display: block;
  font-size: 0.875rem;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  height: 2.3125rem;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: box-shadow 0.45s, border-color 0.45s ease-in-out;
}
*/
.selectImgPreview {
	display: block;
}

#infoSaved {
	color: green;
	font-weight: 400;
	font-size: 0.9rem;
	margin-right: 10px;
}

.swal-result {
	font-size: 0.7rem;
}


#btnQRCode {
	content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='26px' height='26px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 4C23 2.34315 21.6569 1 20 1H16C15.4477 1 15 1.44772 15 2C15 2.55228 15.4477 3 16 3H20C20.5523 3 21 3.44772 21 4V8C21 8.55228 21.4477 9 22 9C22.5523 9 23 8.55228 23 8V4Z' fill='%230F0F0F'/%3E%3Cpath d='M23 16C23 15.4477 22.5523 15 22 15C21.4477 15 21 15.4477 21 16V20C21 20.5523 20.5523 21 20 21H16C15.4477 21 15 21.4477 15 22C15 22.5523 15.4477 23 16 23H20C21.6569 23 23 21.6569 23 20V16Z' fill='%230F0F0F'/%3E%3Cpath d='M4 21C3.44772 21 3 20.5523 3 20V16C3 15.4477 2.55228 15 2 15C1.44772 15 1 15.4477 1 16V20C1 21.6569 2.34315 23 4 23H8C8.55228 23 9 22.5523 9 22C9 21.4477 8.55228 21 8 21H4Z' fill='%230F0F0F'/%3E%3Cpath d='M1 8C1 8.55228 1.44772 9 2 9C2.55228 9 3 8.55228 3 8V4C3 3.44772 3.44772 3 4 3H8C8.55228 3 9 2.55228 9 2C9 1.44772 8.55228 1 8 1H4C2.34315 1 1 2.34315 1 4V8Z' fill='%230F0F0F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6C11 5.44772 10.5523 5 10 5H6C5.44772 5 5 5.44772 5 6V10C5 10.5523 5.44772 11 6 11H10C10.5523 11 11 10.5523 11 10V6ZM9 7.5C9 7.22386 8.77614 7 8.5 7H7.5C7.22386 7 7 7.22386 7 7.5V8.5C7 8.77614 7.22386 9 7.5 9H8.5C8.77614 9 9 8.77614 9 8.5V7.5Z' fill='%230F0F0F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 13C18.5523 13 19 13.4477 19 14V18C19 18.5523 18.5523 19 18 19H14C13.4477 19 13 18.5523 13 18V14C13 13.4477 13.4477 13 14 13H18ZM15 15.5C15 15.2239 15.2239 15 15.5 15H16.5C16.7761 15 17 15.2239 17 15.5V16.5C17 16.7761 16.7761 17 16.5 17H15.5C15.2239 17 15 16.7761 15 16.5V15.5Z' fill='%230F0F0F'/%3E%3Cpath d='M14 5C13.4477 5 13 5.44772 13 6C13 6.55229 13.4477 7 14 7H16.5C16.7761 7 17 7.22386 17 7.5V10C17 10.5523 17.4477 11 18 11C18.5523 11 19 10.5523 19 10V6C19 5.44772 18.5523 5 18 5H14Z' fill='%230F0F0F'/%3E%3Cpath d='M14 8C13.4477 8 13 8.44771 13 9V10C13 10.5523 13.4477 11 14 11C14.5523 11 15 10.5523 15 10V9C15 8.44772 14.5523 8 14 8Z' fill='%230F0F0F'/%3E%3Cpath d='M6 13C5.44772 13 5 13.4477 5 14V16C5 16.5523 5.44772 17 6 17C6.55229 17 7 16.5523 7 16V15.5C7 15.2239 7.22386 15 7.5 15H10C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13H6Z' fill='%230F0F0F'/%3E%3Cpath d='M10 17C9.44771 17 9 17.4477 9 18C9 18.5523 9.44771 19 10 19C10.5523 19 11 18.5523 11 18C11 17.4477 10.5523 17 10 17Z' fill='%230F0F0F'/%3E%3C/svg%3E");
}

#btnRefresh {
	content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='40px' height='40px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.06189 13C4.02104 12.6724 4 12.3387 4 12C4 7.58172 7.58172 4 12 4C14.5006 4 16.7332 5.14727 18.2002 6.94416M19.9381 11C19.979 11.3276 20 11.6613 20 12C20 16.4183 16.4183 20 12 20C9.61061 20 7.46589 18.9525 6 17.2916M9 17H6V17.2916M18.2002 4V6.94416M18.2002 6.94416V6.99993L15.2002 7M6 20V17.2916' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#btnCreateCertificate {
	content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M11 4H6C4.89543 4 4 4.89543 4 6V14C4 15.1046 4.89543 16 6 16H18C19.1046 16 20 15.1046 20 14V12' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M18 3V6M18 9V6M18 6H15M18 6H21' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M12 16V20' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M8 20H16' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

/* #region TABS */
.tabs {
	z-index: 1000;
	display: table;
	border-collapse: separate;
	table-layout: auto;
	padding-bottom: 10px;
}

.tabs.tabs-center {
	margin: auto;
}

.tabs.tabs-justify {
	width: 100%;
	table-layout: fixed;
}

.tabs a {
	text-decoration: none;
	text-align: center;
}

/* tab with animation */
.tabs a.tab {
	position: relative;
	display: table-cell;
	transition: all ease 0.3s;
	padding: 1em 1.6em;
	transform: translate3d(0, 0, 0);
	white-space: nowrap;
	cursor: pointer;
}

.tabs a.tab:after {
	transition: all 0.3s cubic-bezier(1, 0, 0, 1);
	will-change: transform, box-shadow, opacity;
	position: absolute;
	content: "";
	height: 3px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	border-radius: 2px 2px 0px 0px;
	background: var(--color-active);
	box-shadow: 0px 4px 10px 3px var(--color-active-a15);
	opacity: 0;
	transform: scale(0, 1);
}

.tabs a.tab.active:after {
	opacity: 1;
	transform: scale(1, 1);
}

.tab-md {
	width: 80%;
	margin: auto;
}

/* #endregion TABS */


/* dataTables Search input box */
.dataTable {
	cursor: pointer;
}

.dataTables_wrapper {
	font-size: 1.0rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_filter {
	font-size: 0.9rem;
}

.single-page .dt-paging {
	display: none;
}

/*
.dataTables_wrapper table.dataTable,
.dataTables_wrapper table.dataTable th{
	border-bottom: 1px solid #ebebeb;
	font-weight: 400;
}*/
/*new2024core*/
.dataTables_wrapper table.dataTable thead {
	color: rgba(78, 90, 109, 1);

	border-bottom: 1px solid #ebebeb;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: 0em;
	text-align: left;

}

.dataTables_wrapper .dataTable tbody td,
.dataTables_wrapper .dataTable.compact tbody td {
	padding: 0px;
	font-size: 14px;
	font-weight: 500;
	line-height: 64px;
	letter-spacing: 0em;
	text-align: left;
	/* padding: 8px 10px; */
}

.dataTables_wrapper .dataTable .btnRound {
	/*display: block;*/
	display: flex;
}

.dataTables_wrapper .dataTable tbody th,
.dataTables_wrapper .dataTable tbody td,
.dataTables_wrapper .dataTable.compact tbody td {
	padding: 0px;
	line-height: 32px;
	/* padding: 8px 10px; */
}

/*core*/

.dataTables_wrapper .active {
	background-color: #f9f9f9;
}


.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
	/* display: block;
width: 100%;*/
	height: 29px;
	padding: 6px 6px;

	line-height: 1.42857143;
	color: #555555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ebebeb;
	border-radius: 3px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

	/* width: 250px;
  height: 32px;
  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
  text-indent: 10px;*/
}


.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: transparent;
	padding: 0.3em 0.8em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	background: transparent;
	padding: 0.3em 0.8em;
}


/*.ui-selected td { */
table.dataTable tbody tr.ui-selected {
	background-color: #2176a752;
	font-weight: 500;
}

/* #region TESTE MENU CARD */
h4 {
	width: 100%;
	margin: 2em auto 0;
	font-size: 20px;
	text-align: center;
}

h4 small {
	text-transform: uppercase;
	display: block;
	margin: 10px 0;
	font: 300 10px "QuickSand", sans-serif;
	color: #999;
}

.main-content {
	display: flex;
	flex-wrap: wrap;
	margin: 3em auto 0;
	max-width: 1000px;
	justify-content: space-around;
	align-items: center;
}

.palette__wrapper {
	flex: 1;
	padding: 20px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.palette {
	width: 150px;
	height: 150px;
	position: relative;
	display: inline-block;
	perspective: 800px;
}

.palette__cover {
	border-radius: 6px;
	width: inherit;
	height: inherit;
	position: absolute;
	top: 0;
	z-index: 2;
	transition: 0.3s ease;
	transform-origin: top left;
	font: 900 16px/0.9 "Poppins", sans-serif;
	text-transform: uppercase;
	color: #fff;
	overflow: hidden;
}

.palette__cover__border {
	width: 80%;
	height: 80%;
	border: 7px solid #fff;
	margin: 10%;
}

.palette__cover span {
	display: inline-block;
	position: absolute;
	bottom: 7.5px;
	left: 10px;
	padding: 10px;
	max-width: 50%;
}

.palette__cover__top {
	position: absolute;
	left: 0;
	/*width: calc(100% + 64px);
	margin-left: -32px;*/
	width: calc(100% + 36px);
	margin-left: -18px;
	z-index: 4;
	border-radius: 3px 3px 4px 4px;
	opacity: 0;
}

.palette__base {
	background: #222;
	width: inherit;
	height: inherit;
	position: absolute;
	top: 0;
	border-radius: 8px;
	padding: 15px;
	grid-gap: 8px;
}

.palette:hover .palette__cover {
	transform: rotateX(78deg);
}

.palette:hover .palette__cover__top {
	animation: startTransition 0.17s forwards 0.1s;
}

@keyframes startTransition {
	0% {
		opacity: 0;
		top: 150px;
		transform: scale(0.5);
		height: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		top: 21px;
		opacity: 1;
		transform: scale(1);
		height: 15px;
		box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.2);
	}
}

.palette__shade {
	border-radius: 4px;
	box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.9);
}

.palette--1 .palette__base {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

.palette--1 .palette__shade:nth-child(1) {
	grid-row: 1/span 2;
	grid-column: 2/span 1;
	margin: 20px 0;
	background: #fadc89;
}

.palette--1 .palette__shade:nth-child(2) {
	background: #fce95b;
}

.palette--1 .palette__shade:nth-child(3) {
	background: #ffd03a;
}

.palette--1 .palette__shade:nth-child(4) {
	background: #fde008;
}

.palette--1 .palette__shade:nth-child(5) {
	background: #fec309;
}

.palette--1 .palette__cover {
	background: #ffc303;
}

.palette--1 .palette__cover__top {
	background: #ecb404;
}

.palette--1 .palette__cover span {
	max-width: 50%;
	background: #ffc303;
}

.palette--2 .palette__base {
	display: grid;
	grid-gap: 12px;
	justify-self: center;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

.palette--2 .palette__cover {
	background: #ee4266;
}

.palette--2 .palette__cover__top {
	background: #e23a5d;
}

.palette--2 .palette__cover span {
	max-width: 62%;
	background: #ee4266;
}

.palette--2 .palette__shade:nth-child(1) {
	background: #ee898d;
}

.palette--2 .palette__shade:nth-child(2) {
	background: #ec6b73;
}

.palette--2 .palette__shade:nth-child(3) {
	background: #d25980;
}

.palette--2 .palette__shade:nth-child(4) {
	background: #c24d88;
}

.palette--3 .palette__cover {
	background: #0075c4;
}

.palette--3 .palette__cover__top {
	background: #016cb4;
}

.palette--3 .palette__cover span {
	max-width: 48%;
	background: #0075c4;
}

.palette--3 .palette__base {
	display: grid;
	grid-gap: 8px;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
}

.palette--3 .palette__shade:nth-child(1) {
	grid-row: 1/span 2;
	grid-column: 1/span 2;
	background: #93dfe3;
}

.palette--3 .palette__shade:nth-child(2) {
	grid-row: 3/span 2;
	background: #01c0f3;
}

.palette--3 .palette__shade:nth-child(3) {
	grid-row: 1/span 2;
	grid-column: 3/span 2;
	background: #21d0e5;
}

.palette--3 .palette__shade:nth-child(4) {
	grid-row: 3/span 2;
	grid-column-start: 4;
	background: #00aae7;
}

.palette--3 .palette__shade:nth-child(6) {
	background: #69b3cd;
}

.palette--3 .palette__shade:nth-child(5) {
	background: #4ad1eb;
}

.palette--3 .palette__shade:nth-child(8) {
	background: #0983d5;
}

.palette--3 .palette__shade:nth-child(7) {
	background: #149ecb;
}

.palette--4 .palette__base {
	display: grid;
	grid-template-columns: 50% auto;
	grid-template-rows: auto 20% 20%;
}

.palette--4 .palette__shade:nth-child(1) {
	grid-row: 1/span 2;
	background: #bfbfbf;
}

.palette--4 .palette__shade:nth-child(2) {
	grid-row: 3/span 1;
	background: #a1a1a1;
}

.palette--4 .palette__shade:nth-child(3) {
	background: #717171;
}

.palette--4 .palette__shade:nth-child(4) {
	background: #585858;
}

.palette--4 .palette__shade:nth-child(5) {
	background: #4b4b4b;
}

.palette--4 .palette__cover {
	background: #2a2e45;
}

.palette--4 .palette__cover__top {
	background: #171926;
}

.palette--4 .palette__cover span {
	max-width: 59%;
	background: #2a2e45;
}

/* #endregion */

/*MARK: Components */
/* #region 2024 - Components */
.comp_text-label {
	background: rgba(255, 255, 255, 1);
	height: 56px;
	padding: 2px 15px;;
	margin-bottom: 20px;
}

.comp_text-field,
.comp_text-input,
.comp_datepicker,
.comp_select {
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(229, 229, 229, 1);
	border-radius: 4px;
	height: 56px;
	padding: 2px 15px;
	margin: 10px;
}

.comp_text-label label {
	margin: 0;
	height: 20px;
	line-height: 20px;
	font-weight: 600;
	font-size: 14px;
	width: 100%;
	color: rgba(71, 84, 103, 1);
}

.comp_text-field label,
.comp_text-input label,
.comp_text-area label,
.comp_datepicker label,
.comp_select label {
	margin: 0;
	height: 16px;
	line-height: 16px;
	font-weight: 400;
	font-size: 12px;
	width: 100%;
	color: rgba(106, 106, 106, 1);
}

.comp_text-field {
	background: rgba(242, 242, 242, 1);
}

.comp_text-label span {
	display: block;
	margin: 0;
	margin-top: 8px;
	height: 24px;
	line-height: 24px;
	font-weight: 600;
	font-size: 16px;
	width: 100%;
	border: 0;
	color: rgba(52, 64, 84, 1);
	white-space: pre;
	overflow: hidden;
}

.comp_text-field span {
	display: block;
	margin: 0;
	height: 24px;
	line-height: 24px;
	font-weight: 500;
	font-size: 16px;
	width: 100%;
	border: 0;
	color: rgba(102, 112, 133, 1);
	white-space: pre;
	overflow: hidden;
}

.comp_text-input input {
	display: block;
	margin: 0;
	padding: 0;
	height: 24px;
	line-height: 24px;
	font-weight: 500;
	font-size: 16px;
	width: 100%;
	color: rgba(26, 26, 26, 1);
	border: 0;
}

.comp_select {
	position: relative;
}

.comp_select label {
	z-index: 1;
}

.comp_select select {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	padding: 15px 15px 0 15px;
	border: 0px solid #ccc;

	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	outline: 0;
	line-height: 24px;
	font-weight: 500;
	font-size: 16px;

	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L12 15L17 10' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	/* #fff */
	background-repeat: no-repeat;
	/*background-position: 99% 50%;*/
	background-position: right 10px top 15px;
	background-size: 25px;
	background-color: transparent;
	/*background-color: #fff;*/
	border-width: 0;

}

select option:hover,
select option:active {
	background-color: var(--select-option);
}


.comp_select select:-moz-focusring {
	/* Fixing Outline in Mozilla Firefox */
	color: transparent;
	text-shadow: 0 0 0 #000;
}

.comp_datepicker .datepicker {
	line-height: 24px;
	font-weight: 500;
	font-size: 16px;
	width: 100%;
	color: rgba(26, 26, 26, 1);
	border: 0;
}


.comp_text-area {
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(229, 229, 229, 1);
	border-radius: 4px;
	height: auto;
	padding: 2px 15px;
	margin: 10px;
}

.comp_text-area textarea {
	line-height: 24px;
	font-weight: 500;
	font-size: 16px;
	width: 100%;
	color: rgba(26, 26, 26, 1);
	border: 0;
	margin-bottom: 4px;
}

.comp_buttonunderline {
	width: fit-content;
	height: 44px;
	border-radius: 6px;
	background-color: white;
	/*padding-left: 46px;*/
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0em;
	color: var(--btnprimaryback);
	margin-left: auto;
	text-align: left;
	padding: 1px 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.comp_buttonunderline a {
	width: 100%;
	text-decoration: none;
	color: var(--btnprimaryback);
	line-height: 40px;
}

.comp_buttonunderline svg {
	text-decoration: none;
	fill: var(--btnprimaryback);
	stroke: var(--btnprimaryback);
	width: 20px;
	height: 20px;
	min-width: 20px;
	line-height: 40px;
	padding-right: 3px;
}

.comp_buttonunderline path {
	fill: var(--btnprimaryback);
	stroke: var(--btnprimaryback);
}

.comp_buttonunderline:hover {
	color: var(--btnprimaryback);
	text-decoration: underline;
}

.comp_button {
	/*width: auto; 155px;*/
	width: fit-content;
	height: 44px;
	border-radius: 6px;
	background-color: var(--btnprimaryback);
	/*padding-left: 46px;*/
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0em;
	color: rgba(255, 255, 255, 1);
	margin-left: auto;
	text-align: left;
	padding: 1px 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.comp_button div:first-child {
	padding: 9px;
	width: 42px;
	height: 42px;
}

.comp_button img {
	width: 24px;
}

.comp_button a {
	width: 100%;
	text-decoration: none;
	color: rgba(255, 255, 255, 1);
	line-height: 40px;
}

.comp_button svg {
	text-decoration: none;
	fill: rgba(255, 255, 255, 1);
	stroke: rgba(255, 255, 255, 1);
	width: 20px;
	height: 20px;
	min-width: 20px;
	line-height: 40px;
	padding-right: 3px;
}

.comp_button path {
	fill: rgba(255, 255, 255, 1);
	stroke: rgba(255, 255, 255, 1);
}

.comp_button:hover {
	background-color: var(--btnprimarybackhover);
	color: rgba(255, 255, 255, 1);
}

.comp_button.secondary {
	background-color: rgba(255, 255, 255, 1);
	border: 1px solid rgba(231, 234, 238, 1);
	border-radius: 8px;
}

.comp_button.secondary a {
	color: rgba(52, 64, 84, 1);
	vertical-align: middle;
}

.comp_checkbox {
	background: rgba(255, 255, 255, 1);
	height: 56px;
	padding: 3px 7px;
	margin: 10px;
}

.comp_checkbox div {
	float: left;
}

.comp_checkbox input[type="checkbox"] {
	visibility: hidden;
}

.comp_checkbox input[type="checkbox"]:checked+label {
	background-color: var(--btnprimaryback);
	border-color: var(--btnprimaryback);
}

.comp_checkbox input[type="checkbox"]:checked+label:after {
	opacity: 1;
}

.comp_checkbox_chk {
	position: relative;
	padding-right: 10px;
	height: 56px;
}

.comp_checkbox_chk label {
	margin-top: 15px;
	background-color: #fff;
	border: 1px solid rgba(208, 213, 221, 1);
	border-radius: 4px;
	cursor: pointer;
	left: 0;
	position: absolute;
	top: 0;
	height: 18px;
	width: 18px;
}

.comp_checkbox_chk label:after {
	border: 2px solid #fff;
	border-top: none;
	border-right: none;
	content: "";
	opacity: 0;
	position: absolute;
	transform: rotate(-45deg);
	height: 7px;
	left: 3px;
	top: 3px;
	width: 10px;
}

.comp_checkbox_label {
	margin-left: 10px;
}


.comp_checkbox_label label:nth-of-type(1) {
	margin: 0;
	height: 24px;
	line-height: 24px;
	font-weight: 500;
	font-size: 16px;
	width: 100%;
	color: rgba(26, 26, 26, 1);
}

.comp_checkbox_label label:nth-of-type(2) {
	margin: 0;
	height: 17px;
	line-height: 14px;
	font-weight: 400;
	font-size: 14px;
	width: 100%;
	color: rgba(144, 144, 144, 1);
}

.comp_nav-pills {
	height: 44px;
	background-color: rgb(249, 250, 251);
	border: 1px solid rgba(238, 240, 243, 1);
	border-radius: 8px;
}

.comp_nav-pills li {
	padding: 0 3px;
}

.comp_nav-pills .nav-link {
	margin-top: 3px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0em;
	text-align: left;
	color: rgba(102, 112, 133, 1);
}

.comp_nav-pills .nav-link.active {
	background: rgba(255, 255, 255, 1);
	color: rgba(52, 64, 84, 1);
	box-shadow: 0px 3px 1px 0px rgba(16, 24, 40, 0.1);

}

.comp_nav-pills .nav-link:not(.active):hover {
	background-color: #adb5bd;
	color: #fff;
}

.comp_nav-pills .nav-link.active:hover {
	background-color: inherit;
	color: inherit;
}

.comp_nav-pills.style1 {
	height: 40px;
	background-color: rgba(255, 255, 255, 1);
	border-width: 0px;
	border-bottom: 1px solid rgba(241, 241, 242, 1);
}

.comp_nav-pills.style1 .nav-link {
	font-size: 16px;
	line-height: 24px;
}

.comp_nav-pills.style1 .nav-link.active {
	border-bottom: 2px solid var(--btnprimaryback);
	/*rgba(255, 73, 51, 1)*/
	border-radius: 0;
	background: rgba(255, 255, 255, 1);
	color: var(--color-active)
		/* rgba(237, 30, 12, 1) */
	;
	box-shadow: none;
}

.comp_nav-pills.style1 .nav-link:hover {
	color: var(--color-active)
		/* rgba(237, 30, 12, 1) */
	;
	background-color: white;
}



.comp_image {
	background: rgba(242, 242, 242, 1);
	border: 1px solid rgba(229, 229, 229, 1);
	border-radius: 4px;
	height: 56px;
	padding: 22px 7px;
	margin: 10px;
	min-height: 80px;
}

.comp_image span {
	display: table;
	margin: 0 auto;
	/*  height: 24px;
    line-height: 24px;
    font-weight: 500;
    font-size: 16px;
    width: 100%;
    border: 0;
    color: rgba(102, 112, 133, 1);
    white-space: pre;*/
}

.comp_image .fileinput-button {
	position: relative;
	overflow: hidden;
	width: 198px;
	height: 40px;
	line-height: 40px;
	border-radius: 6px;
	background-color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0em;
	color: #1a1a1a;
	/*color: rgba(255, 255, 255, 1);*/
	text-align: center;
}

.comp_image .fileinput-button:hover {
	background-color: var(--btnprimaryback);
	color: rgba(255, 255, 255, 1);
}

.comp_image .fileinput-button input {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	opacity: 0;
	-ms-filter: 'alpha(opacity=0)';
	font-size: 200px !important;
	direction: ltr;
	cursor: pointer;
}

/*@media screen\9 {
    .comp_image .fileinput-button input {
        filter: alpha(opacity=0);
        font-size: 100%;
        height: 100%;
}*/

/* #endregion 2024 - Components */






/* #region 2024 - Changes */

label,
.CardInfoTitle {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0em;
	text-align: left;
	color: rgba(106, 106, 106, 1);

}

p,
.form-control,
.form-select,
input,
select {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0em;
	text-align: left;
	color: rgba(26, 26, 26, 1);

}

.modal-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0em;
	text-align: left;
	color: rgba(7, 20, 55, 1);
}

.btn-modal-cancel {
	width: 47%;
	height: 44px;
	float: left;
	margin-right: 10px;
	background-color: var(--btnsecondaryback);
	color: var(--btnsecondarycolor);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0em;
	text-align: center;
	border: var(--btnsecondaryborder) 1px solid
}

.btn-modal-cancel:active,
.btn-modal-cancel:hover {
	background-color: var(--btnsecondarybackhover);
	color: var(--btnsecondarycolor);
	border-color: var(--btnsecondarycolor);
}

.btn-modal-confirm {
	width: 47%;
	height: 44px;
	margin-left: 10px;
	background-color: var(--btnprimaryback);
	border-color: var(--btnprimaryback);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0em;
	text-align: center;
	color: rgba(255, 255, 255, 1);
}

.btn-modal-confirm:active,
.btn-modal-confirm:hover {
	background-color: var(--btnprimarybackhover);
	border-color: var(--btnprimarybackhover);
}

.modal-footer {
	justify-content: center;
	border-top: 0;
}

/* #end region 2024 - Changes */

/* #region datatable - sort buttons */


/* header outline */
table.dataTable thead>tr>th.dt-orderable-asc:hover,
table.dataTable thead>tr>th.dt-orderable-desc:hover,
table.dataTable thead>tr>td.dt-orderable-asc:hover,
table.dataTable thead>tr>td.dt-orderable-desc:hover {
	outline-width: 0;
	/*	outline: 2px solid rgba(0, 0, 0, 0.05);
	outline-offset: -2px;*/
}

/* orderable */
table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order {
	right: auto;
	margin-left: 5px;

}

table.dataTable th.dt-type-date {
	text-align: left;
}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order::after,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order::after {
	/*content: "-";
	display: block;*/
	display: none;
}

/* before */
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order::before {
	content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.33268 0.666016V8.78268L1.59935 5.04935L0.666016 5.99935L5.99935 11.3327L11.3327 5.99935L10.3993 5.04935L6.66602 8.78268V0.666016H5.33268Z' fill='%234E5A6D'/%3E%3C/svg%3E");
	display: block;
}

table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order::before {
	display: none;
}

/* after */
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order::after {
	display: none;
}

table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order::after {
	content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.33268 0.666016V8.78268L1.59935 5.04935L0.666016 5.99935L5.99935 11.3327L11.3327 5.99935L10.3993 5.04935L6.66602 8.78268V0.666016H5.33268Z' fill='%234E5A6D'/%3E%3C/svg%3E");
	display: block;
}

/*MARK: Templates*/

#secTemplates #divEditor {
	flex: 0 0 100%;
	height: 20px;
	box-sizing: border-box;
}

#secTemplates #divLeft {
	height: 55vh;
}

#secTemplates #divRight {
	height: 55vh;
}

#secTemplates #editor {
	width: 100%;
	height: 300px;
	display: none;
}

/* entire editor */
#secTemplates #divEditor .ck.ck-editor {
	padding: 0 10px 0 10px;
}

/* editor toolbar */
#secTemplates #divEditor .ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
	border-radius: 4px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;

}

#secTemplates #divEditor .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
	border: solid rgba(229, 229, 229, 1);
	border-width: 1px 1px 0;
}

/* toolbar end*/
/* editor */
#secTemplates #divEditor .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
	border-color: rgba(229, 229, 229, 1);
}

#secTemplates #divEditor .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable,
.ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners {
	border-radius: 4px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

#secTemplates #divEditor .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel-visible {
	display: flex;
	flex-direction: column;
}

#secTemplates #divEditor #templateSaveBtn {
	margin: 10px 10px auto auto;
}

/*MARK: invite alerts page*/
.inviteAlerts {
	padding: 100px 30%;
	text-align: center;
}

/*invite alerts page start button */
#returnHome {
	margin: 50px auto auto auto;
}

/*MARK: Button colors*/

/*TODO make a class for all of these buttons, instead of naming all of them */
#addAccount,
#addUser,
#addDepartment,
#inviteUserBtn,
#addRole,
#addPermission,
#editDevice,
#addPrimary,
#addTemplates,
#create_test,
#forceSend,
#btnChangePassword,
#btnChangeUsername,
#btnChangePin,
#btnConnectGoogle,
#btnConnectMicrosoft,
#register {
	background-color: transparent;
	transition: background-color 0.3s ease, color 0.3s ease;
}

#addAccount svg path,
#addUser svg path,
#addDepartment svg path,
#inviteUserBtn svg path,
#addRole svg path,
#addPermission svg path,
#editDevice,
#addPrimary svg path,
#addTemplates svg path,
#create_test svg path,
#forceSend svg path {
	stroke: var(--btnprimaryback);
	fill: var(--btnprimaryback);
}

#addAccount:hover,
#addUser:hover,
#addDepartment:hover,
#inviteUserBtn:hover,
#addRole:hover,
#addPermission:hover,
#editDevice:hover,
#addPrimary:hover,
#addTemplates:hover,
#create_test:hover,
#forceSend:hover,
#btnChangePassword:hover,
#btnChangeUsername:hover,
#btnChangePin:hover,
#btnConnectGoogle:hover,
#btnConnectMicrosoft:hover,
#register:hover {
	background-color: var(--btntranshover)
}

#addAccount a,
#addUser a,
#addDepartment a,
#inviteUserBtn a,
#addRole a,
#addPermission a,
#editDevice a,
#addPrimary a,
#addTemplates a,
#create_test a,
#forceSend a,
#btnChangePassword a,
#btnChangeUsername a,
#btnChangePin a,
#btnConnectGoogle a,
#btnConnectMicrosoft a,
#register a {
	color: var(--btnprimaryback);
}

/*MARK: checkbox*/
/* Remove browser default appearance */
.checkBox {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 15px;
	height: 15px;
	border: 2px solid #ccc;
	border-radius: 4px;
	background-color: #fff;
	cursor: pointer;
	display: inline-block;
	position: relative;
	margin-top: 4px;
}

/* When checked, change background color */
.checkBox:checked {
	background-color: var(--btnprimaryback);
	border-color: var(--btnprimaryback);
}

/* Add a checkmark that looks like the default */
.checkBox:checked::after {
	content: '';
	position: absolute;
	left: 3px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/*MARK: SweetAlert2
important tags are necessary to override sweetalert css
*/
.showConfirm-custom-actions {
	display: flex !important;
	width: 95% !important;
	justify-content: center !important;
	flex-wrap: nowrap !important;
	background-image: none !important;
}

.showConfirm-custom-confirm-button {
	width: 47% !important;
	margin-left: 10px !important;
	background-color: var(--btnprimaryback) !important;
	border-color: var(--btnprimaryback) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	letter-spacing: 0em !important;
	text-align: center !important;
	color: rgba(255, 255, 255, 1) !important;
	height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.showConfirm-custom-cancel-button {
	width: 47% !important;
	float: left !important;
	margin-right: 10px !important;
	background-color: var(--btnsecondaryback) !important;
	color: var(--btnsecondarycolor) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	letter-spacing: 0em !important;
	text-align: center !important;
	height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: var(--btnsecondaryborder) 1px solid !important;
}

.showConfirm-custom-confirm-button:hover,
.showConfirm-custom-confirm-button:active {
	background-color: var(--btnprimarybackhover) !important;
	border-color: var(--btnprimarybackhover) !important;
	background-image: none !important;
}

.showConfirm-custom-cancel-button:hover,
.showConfirm-custom-cancel-button:active {
	background-color: transparent !important;
	color: var(--btnsecondarycolor) !important;
	border-color: var(--btnsecondarycolor) !important;
	background-image: none !important;
}

.showConfirm-custom-cancel-button:focus {
	outline: 0 solid #ffffff !important;
	outline-offset: 0 !important;
	display: none !important;
}

.showConfirm-custom-confirm-button:focus {
	outline: 0 solid white !important;
	outline-offset: 0 !important;
	display: none !important;
}

.ok-custom-button {
	background-color: transparent !important;
	transition: background-color 0.3s ease, color 0.3s ease !important;
	color: var(--btnprimaryback) !important;
}

.ok-custom-button:hover {
	background-color: var(--btntranshover) !important;
}

.ok-custom-button:focus {
	outline: 0 solid white !important;
	outline-offset: 0 !important;
	display: none !important;
}

/*MARK: secRoles
*/
#secRoles #permissionsSave {
	margin-top: 10px;
}

/*MARK: bottomspacer
*/
.bottomspacer {
	height: 30px;
}


/*MARK: listgroup
Change dept dropdown*/

.list-group-item {
	border: 0;
	margin: 3px 0;
}

.list-group-item.active {
	background-color: var(--btnprimaryselected) !important;
	border-color: var(--btnprimaryselected) !important;
	border-radius: 8px !important;
	color: var(--color-main);
}

.list-group-item:hover {
	border-radius: 8px !important;
	background-color: var(--btntranshover) !important;
}

/*MARK: Profile page
*/

#secProfile {
	width: 100%;
	padding: 0 72px;
}

#secProfile .contentProfile {
	max-width: 860px;
	margin: auto;
}

#secProfile .spanTitle {
	margin-top: 64px;
}

#secProfile .basicInfoContainer,
#secProfile .securityContainer {
	padding: 15px;
	border: 1px solid var(--btnsecondaryborder);
	border-radius: 8px;
}

#secProfile .accountsContainer {
	margin-bottom: 50px;
}

#secProfile .basicInfoContainer #currentTime {
	margin: 0;
}

#secProfile .comp_text-field,
#secProfile .comp_select,
#secProfile .comp_text-input {
	margin: 0 0 10px 0;
}

#secProfile #btnCancelPassword,
#secProfile #btnCancelPin,
#secProfile #btnSavePassword,
#secProfile #btnChangeUsername {
	margin-bottom: 10px;
}

#secProfile .spanSubSubTitle {
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
	line-height: 32px;
	text-align: left;
}

#secProfile .line {
	padding: 15px;
	border: 1px solid var(--btnsecondaryborder);
	border-radius: 8px;
	display: flex;
	align-items: center;
}

#secProfile #microsoftimg {
	margin-right: 10px;
	width: 40px;
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48px' height='48px'%3E%3Cpath fill='%23ff5722' d='M6 6H22V22H6z' transform='rotate(-180 14 14)'/%3E%3Cpath fill='%234caf50' d='M26 6H42V22H26z' transform='rotate(-180 34 14)'/%3E%3Cpath fill='%23ffc107' d='M26 26H42V42H26z' transform='rotate(-180 34 34)'/%3E%3Cpath fill='%2303a9f4' d='M6 26H22V42H6z' transform='rotate(-180 14 34)'/%3E%3C/svg%3E");
}

#secProfile #googleimg {
	margin-right: 10px;
	width: 40px;
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48px' height='48px'%3E%3Cpath fill='%23FFC107' d='M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z'/%3E%3Cpath fill='%23FF3D00' d='M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z'/%3E%3Cpath fill='%234CAF50' d='M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z'/%3E%3Cpath fill='%231976D2' d='M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z'/%3E%3C/svg%3E");
}

#secProfile .labeledHeader {
	padding-bottom: 20px;
}

#secProfile .labeledHeader label {
	width: 100%;
	height: 39px;
	font-size: 22px;
	font-weight: 600;
	line-height: 50px;
	text-align: left;
	color: var(--color-main);
	display: block;
}

#secProfile .labeledHeader span {
	width: 100%;
	height: 19px;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
	color: rgba(144, 144, 144, 1);
	display: inline-block;
}

#secProfile .profileFormBtns {
	display: flex;
	margin-bottom: 10px;
}

#secProfile #btnCancelPassword,
#secProfile #btnCancelPin,
#secProfile #btnCancelUsername {
	margin-right: 10px;
}

#secProfile #btnSavePassword,
#secProfile #btnSavePin,
#secProfile #btnSaveUsername {
	margin-left: 0;
}

#btnCancelPassword,
#btnCancelPin,
#btnCancelUsername,
#backToLogin {
	height: 44px;
	float: left;
	margin-right: 10px;
	background-color: var(--btnsecondaryback);
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0em;
	text-align: center;
	border: var(--btnsecondaryborder) 1px solid
}

#google,
#microsoft {
	height: 44px;
	background-color: var(--btnsecondaryback);
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0em;
	border: var(--btnsecondaryborder) 1px solid
}

#btnCancelPassword a,
#btnCancelPin a,
#backToLogin a,
#btnCancelUsername a {
	color: var(--btnsecondarycolor);
}

#google a,
#microsoft a {
	color: var(--btnsecondarycolor);
}

#btnCancelPassword:hover,
#btnCancelPin:hover,
#backToLogin:hover,
#btnCancelUsername:hover {
	background-color: var(--btnsecondarybackhover);
	color: var(--btnsecondarycolor);
	border-color: var(--btnsecondarycolor);
}

#google:hover,
#microsoft:hover {
	background-color: var(--btnsecondarybackhover);
	color: var(--btnsecondarycolor);
	border-color: var(--btnsecondarycolor);
}

/*MARK: Login page
*/

#oAuthForm {
	margin-top: 15px;
}

#oAuthForm .comp_button {
	width: 300px;
	text-align: center;
	margin: auto;
	margin-bottom: 5px;
}

#loginForm .invalid-feedback {
	margin-bottom: 10px;
}

#loginButton .comp_button {
	width: 300px;
	text-align: center;
	margin: auto;
	margin-bottom: 5px;
}

#loginButton {
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}

#loginBottom h6 {
	text-align: center;
	margin-bottom: 0;
}

#loginBottom .comp_button {
	width: 300px;
	text-align: center;
	margin: auto;
	margin-bottom: 15px;
}

#loginFormInputs {
	margin: auto;
	width: 300px;
	margin-bottom: 5px;
}

#loginFormInputs .subRow {
	padding: 0;
}

#loginFormInputs .comp_text-input {
	margin: 0 0 10px 0;
}

#loginForm .comp_error {
	text-align: center;
}

.card-body {
	padding: 0;
}

.card-body hr {
	margin-left: auto;
	margin-right: auto;
	max-width: 300px;
}

.card {
	border: 0;
}

#loginForm #google img {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48px' height='48px'%3E%3Cpath fill='%23FFC107' d='M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z'/%3E%3Cpath fill='%23FF3D00' d='M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z'/%3E%3Cpath fill='%234CAF50' d='M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z'/%3E%3Cpath fill='%231976D2' d='M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z'/%3E%3C/svg%3E");
}

#loginForm #microsoft img {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48px' height='48px'%3E%3Cpath fill='%23ff5722' d='M6 6H22V22H6z' transform='rotate(-180 14 14)'/%3E%3Cpath fill='%234caf50' d='M26 6H42V22H26z' transform='rotate(-180 34 14)'/%3E%3Cpath fill='%23ffc107' d='M26 26H42V42H26z' transform='rotate(-180 34 34)'/%3E%3Cpath fill='%2303a9f4' d='M6 26H22V42H6z' transform='rotate(-180 14 34)'/%3E%3C/svg%3E");
}

#microsoft a,
#google a {
	text-align: left;
	padding-left: 40px;
	width: 100%;
}

#register {
	margin: auto;
}

/*MARK: Devices
*/

#secDevices #refreshDiv {
	display: flex;
	align-items: center;
}



/*MARK: password recovery
*/
#resetForm .comp_text-input {
	margin: 0;
}


#resetForm #forgotpwButtons {
	margin-top: 10px;
}

/*MARK: Register page
*/

#registerForm .invalid-feedback {
	padding-left: 10px;
}

/*MARK: ChangeDeptModal
*/

.deptSelector {
	display: flex;
	align-items: center;
}

.deptSelectoracc {
	line-height: 18px;
}

.deptSelectorInfo {
	line-height: 18px;
	padding-left: 10px;
	display: flex;
	flex-direction: column;
}

.deptSelectordept {
	font-weight: 500;
}

.accDeptImg {
	width: 40px;
	height: 40px;
	border-radius: 5px;
}

/*MARK: Vertical sidebar*/

.sidebar-nav {
	padding: 16px;
}

.sidebar-nav li {
	margin: 0 0 8px 0;
	padding: 0;
	width: 48px;
	height: 48px;
	border: 0px solid rgba(229, 229, 229, 1);
	border-radius: 8px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
}

.sidebar-nav li svg {
	margin: 14px;
	width: 20px;
	height: 20px;

}

/* .sidebar-nav li:first-child {  home
    background-color: #FFE3DE !important;
} */

.sidebar-nav li.active {
	background-color: var(--btnprimaryselected);
}

.sidebar-nav li:hover {
	background-color: #eee;
}

.sidebar-nav a {
	display: block;
}

aside {
	width: 80px;
	height: 100vh;
}

/* .wrapper {
    margin-left: 80px;
} */

/*MARK: Default image*/

img[src=""] {
	content: var(--projectimg);
	padding: 10px;
}


/*MARK: EM components
*/



/*MARK: comp_item
*/
.comp_item {
	width: 100%;
	height: 40px;
	display: flex;
}

.comp_item .img {
	width: 40px;
	height: 40px;
	margin-right: 12px;
	justify-content: center;
}

.comp_item img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.comp_item .text_container {
	flex-basis: 0;
	/* Allow flex items to shrink */
	flex-grow: 1;
	/* Allow to take up remaining space */
	max-width: calc(100% - 52px);
	/* Adjust based on your layout */
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: 12px;
	overflow: hidden;
	/* Ensures any overflow is hidden */
}

.comp_item label {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: rgba(7, 20, 55, 1);
}

.comp_item span {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
	color: rgba(144, 144, 144, 1);
	white-space: nowrap;
	/* Prevents text from wrapping */
	overflow: hidden;
	/* Hides any text that overflows the container */
	text-overflow: ellipsis;
	/* Adds an ellipsis (...) to indicate overflow */
}

/*MARK: comp_search
*/

.comp_search {
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(229, 229, 229, 1);
	border-radius: 6px;
	height: 44px;
	display: flex;
}

.comp_search svg {
	margin: 10px 0px 10px 12px;
	width: 24px;
}

.comp_search input {
	display: inline;
	margin: 0;
	padding: 2px 6px;
	height: 40px;
	line-height: 40px;
	font-weight: 600;
	font-size: 14px;
	color: var(--fontcolorprimary);
	border: 0;
}

.comp_search input::placeholder {
	color: rgba(144, 144, 144, 1);
	opacity: 1;
	/* Firefox */
}

.comp_search input::-ms-input-placeholder {
	/* Edge 12 -18 */
	color: rgba(144, 144, 144, 1);
}

/*MARK: comp_header/headerimg
*/

.comp_header,
.comp_headerimg {
	margin-top: 44px;
	margin-bottom: 24px;
}

.comp_header label,
.comp_headerimg label {
	width: 100%;
	height: 39px;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	text-align: left;
	color: rgba(7, 20, 55, 1);
	display: block;
}

.comp_header span,
.comp_headerimg span {
	width: 100%;
	height: 19px;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
	color: rgba(144, 144, 144, 1);
	display: inline-block;
}

.comp_header {
	padding: 0px 15px 0px 15px;
}

.comp_headerimg {
	display: flex;
}


.comp_headerimg img {
	width: 48px;
	height: 48px;
	border-radius: 4px;
}

.comp_headerimg .comp_headerimg_txt {
	display: flex;
	flex-direction: column;
	padding-left: 15px;
}

.comp_headerimg label {
	color: black;
	font-size: 18px;
	font-weight: 600;
	text-align: left;
}

.comp_headerimg span {
	line-height: 0;
}

/*MARK: comp_wizard
*/

.comp_wizard .comp_wizard_tab {
	display: none;
	background-color: transparent;
}

.comp_wizard .activeStep {
	display: block;
	/* background-color: red; */
}

.comp_wizard_buttons {
	display: flex;
	width: 100%;
	justify-content: space-around;
	margin-top: 32px;
	gap: 32px;
}

.comp_wizard_buttons .comp_button {
	flex-grow: 1;
	text-align: center;
}

.comp_wizard {
	padding: 0px 15px 0px 15px;
}

.comp_wizard_buttons {
	padding: 0px 15px 0px 15px;
}


/*MARK: comp_selector
*/

.comp_selector {
	cursor: pointer;
	width: 100%;
	position: relative;
	/* Ensure the button can be positioned relative to this container */
}

.comp_selector label {
	cursor: pointer;
}

.comp_selector.lt-tabs {
	height: 52px;
	border-bottom: 1px solid #E5E5E5;
}

.comp_selector>ul {
	padding-left: 0;
	list-style: none;
}

.comp_selector.lt-tabs>ul {
	margin-bottom: 0;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	padding-right: 60px;
	/* Add extra padding to avoid overlap with the button */
}

.comp_selector.lt-list>ul {
	display: block;
}

.comp_selector>ul::-webkit-scrollbar {
	height: 6px;
}

.comp_selector>ul::-webkit-scrollbar-track {
	background-color: white;
}

.comp_selector>ul::-webkit-scrollbar-thumb {
	background-color: #E0E0E0;
	border-radius: 10px;
}

.comp_selector>ul::-webkit-scrollbar-thumb:hover {
	background-color: #FFE3DE;
	/* Color when hovered */
}


.comp_selector.lt-tabs>ul li {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.comp_selector.lt-list>ul li {
	display: flex;
	max-width: 440px;
	height: 72px;
	align-items: center;
	flex-shrink: 0;
	margin-bottom: 16px;
	border: 2px solid rgba(249, 250, 251, 1);
	border-radius: 8px;
}

.comp_selector.lt-tabs li {
	width: 260px;
	height: 52px;
	display: flex;
	align-items: center;
	padding-top: 5px;
	padding-right: 6px;
	padding-bottom: 7px;
	padding-left: 6px;
}

.comp_selector.lt-list li img {
	margin: 0 0 0 16px;
}

.comp_selector.lt-list li .text_container {
	margin: 0 0 0 12px;
}

.comp_selector.lt-tabs li:hover {
	background-color: rgba(249, 250, 251, 1);
}

.comp_selector.lt-list li:hover {
	background-color: rgba(249, 250, 251, 1);
}

.comp_selector.lt-tabs li.active {
	background-color: rgba(249, 250, 251, 1);
	border-bottom: 2px solid red;
}

.comp_selector.lt-list li.active {
	border: 2px solid var(--btnprimaryback);
	border-radius: 8px;
}

#addOption_button {
	background-color: white;
	border: none;
	display: flex;
	align-items: center;
	cursor: pointer;
	position: absolute;
	/* Fix position of the button */
	right: 0;
	top: 0;
	height: 100%;
	/* Make it take the full height */
	padding-left: 8px;
	transition: background-color 0.3s ease, color 0.3s ease;
}

#addOption_button:hover {
	background-color: #FFE3DE;
}

#addOption_button span {
	padding-left: 8px;
	align-items: center;
}

/* Change the color of the SVG on hover */
#addOption_button:hover span {
	color: #FF0000;
	/* Change text color on hover */
}

#addOption_button svg {
	width: 14px;
	height: 14px;
	font-weight: 700;
	transition: color 0.3s ease;
	/* Smooth transition for color change */

}

#addOption_button:hover path {
	fill: #FF0000;
	/* Change SVG color on hover */
}

/*MARK: cropper*/


.cropper-view-box {
	outline: 1px solid var(--btnprimaryback) !important;
	/* Bright green line */
}

.cropper-point {
	background-color: var(--btnprimaryback) !important;
	/* Red handles */
	border: 1px solid var(--btnprimaryback) !important;
	/* White border for handles */
}

/*MARK: Tooltip*/

/* Tooltip container */
[data-tooltip] {
	position: relative;
	cursor: default;
}

/* Tooltip text */
[data-tooltip]:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 5px 10px;
	border-radius: 4px;
	white-space: nowrap;
	z-index: 10;
	opacity: 0;
	transition: opacity 0.2s;
}

/* Only show the tooltip when the attribute is not empty */
[data-tooltip]:not([data-tooltip=""]):hover::after {
	opacity: 1;
}

#resendBtn {
	margin: auto;
	margin-top: 15px;
	width: 200px;
	text-align: center;
}

#resetpwForm #resetPassword {
	margin: auto;
}

#resetpwForm .comp_text-input {
	margin: auto;
	margin-bottom: 15px;
	width: 400px;
}

#resetpwForm .comp_text-field {
	margin: auto;
	margin-bottom: 15px;
	width: 400px;
}

/* MARK::comp_selectplus */
#resetpwForm #resetPassword {
	margin: auto;
}

#resetpwForm .comp_text-input {
	margin: auto;
	margin-bottom: 15px;
	width: 400px;
}

#resetpwForm .comp_text-field {
	margin: auto;
	margin-bottom: 15px;
	width: 400px;
}


.comp_selectplus {
	position: relative;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(229, 229, 229, 1);
	border-radius: 4px;
	height: 56px;
	padding: 2px 15px;
	margin: 10px;
}

.comp_selectplus label {
	margin: 0;
	height: 16px;
	line-height: 16px;
	font-weight: 400;
	font-size: 12px;
	width: 100%;
	color: rgba(106, 106, 106, 1);
	z-index: 1;
}

.comp_selectplus select {
	display: none;
	/*hide original SELECT element:*/
}

.comp_selectplus .custom-select {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	padding: 15px 15px 0 15px;
	border: 0px solid #ccc;

	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	outline: 0;
	line-height: 24px;
	font-weight: 500;
	font-size: 16px;

	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L12 15L17 10' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	/* #fff */
	background-repeat: no-repeat;
	background-position: right 10px top 15px;
	background-size: 25px;
	background-color: transparent;
	border-width: 0;
}

.comp_selectplus .select-selected {
	padding-top: 10px;
}

/*point the arrow upwards when the select box is open (active):*/
.comp_selectplus .select-arrow-active {
	background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='26px' height='26px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12.6111L8.92308 17.5L20 6.5' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px top 15px;
	background-size: 25px;
	background-color: transparent;
	border-width: 0;
}

/*hide the items when the select box is closed:*/
.comp_selectplus .select-hide {
	display: none;
}

/*style the items (options), including the selected item:*/
.comp_selectplus .select-items div {
	/*color: #ffffff;*/
	padding: 8px 16px;
	border: 1px solid transparent;
	/*border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;*/
	cursor: pointer;
	user-select: none;
}

/*style items (options):*/
.select-items {
	position: absolute;
	background-color: rgba(255, 255, 255, 1);
	border: 1px solid rgba(229, 229, 229, 1);
	top: 100%;
	left: -1px;
	right: -1px;
	z-index: 99;

}

.select-items div:hover,
.same-as-selected {
	background-color: rgba(0, 0, 0, 0.1);
}

.comp_select select:-moz-focusring {
	/* Fixing Outline in Mozilla Firefox */
	/*    color: transparent;
    text-shadow: 0 0 0 #000*/
}


#sendResetLink {
	margin: auto;
}

#resetForm .comp_error {
	text-align: center;
}

#sendResetLink {
	width: 215px;
	text-align: center;
}

#backToLogin {
	width: 215px;
	text-align: center;
}

#registerButtons .comp_button {
	text-align: center;
	margin: auto;
	margin-top: 15px;
}

#submitRegisterForm {
	width: 150px;
}


#registerFormBody {
	width: 400px;
	margin: auto;
}

.tasksDiv {
	gap: 40px;
	display: flex;
}

.profilebtn {
	margin-left: 0;
}

#secInterfaces #divBottom {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 10px;
}

/*MARK: Packages*/

#secPackages .manageBtnsDiv {
    display: flex;
    margin-left: auto;
}

#secPackages .manageBtns {
    margin: 5px 20px auto 0px;
}

#secPackages #btnRefresh {
    margin: 5px 0 0 0;
}

#secPackages #lift,
#secPackages #enter {
	display: none;
}

#secPackages #upload,
#secPackages #run,
#secPackages #remove {
    background-color: var(--btnprimaryback);
    border-color: var(--btnprimaryback);
}

#secPackages #upload:hover,
#secPackages #run:hover,
#secPackages #remove:hover {
    background-color: var(--btnprimarybackhover);
    border-color: var(--btnprimarybackhover);
}