/* font-family: 'Potta One', cursive; */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&family=Jaldi:wght@400;700&family=Potta+One&display=swap');

/* font-family: 'DM Sans', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100;0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,100;1,9..40,200;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,600&family=Inter:wght@100;200;300;400;500;600;700&family=Jaldi:wght@400;700&family=Potta+One&display=swap');

* {
	font-family: 'DM Sans', sans-serif;
}
body {
	font-family: 'DM Sans', sans-serif;
	background: #dfe6ed;
}
.dep-header {
	padding: 15px 30px 9px;
	border-bottom: 1px solid #bdc9d5;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.dep-header h1 {
	font-size: 28px;
	font-weight: 700;
	line-height: 29px;
	letter-spacing: 0em;
	text-align: left;
	color: #2f2f2f;
}
.dep-header .right-side {
	display: flex;
	gap: 28px;
	align-items: center;
}
.dep-header .right-side .bell {
	position: relative;
}
.dep-header .right-side .bell span {
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.004em;
	text-align: center;
	line-height: 20px;
	color: #fff;
	width: 20px;
	height: 20px;
	background-color: #573cfd;
	border-radius: 50%;
	transform: translate(-10px);
	position: absolute;
}
.dep-header .right-side .user {
	width: 40px;
	height: 40px;
	border-radius: 11px;
}
.dep-header .right-side .search {
	margin-right: 40px;
}
.dep-header .right-side .search input {
    font-size: 14px;
    color: #CACACA;
    width: 200px;
    height: 40px;
    padding: 0 10px 0 57px;
    border-radius: 30px;
    border: 1px solid #CACACA;
    background: url('data:image/svg+xml,<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.76701 11C4.76701 7.691 7.33261 5 10.4874 5C13.6422 5 16.2078 7.691 16.2078 11C16.2078 14.309 13.6422 17 10.4874 17C7.33261 17 4.76701 14.309 4.76701 11ZM19.7421 19.293L16.5053 15.897C17.5092 14.543 18.1146 12.846 18.1146 11C18.1146 6.589 14.6929 3 10.4874 3C6.28196 3 2.8602 6.589 2.8602 11C2.8602 15.411 6.28196 19 10.4874 19C12.2474 19 13.8653 18.365 15.1562 17.312L18.394 20.707C18.5799 20.902 18.824 21 19.0681 21C19.3121 21 19.5562 20.902 19.7421 20.707C20.1149 20.316 20.1149 19.684 19.7421 19.293Z" fill="%23757577"/></svg>') 22px 50% no-repeat;
    background-size: 22px 24px;
    background-color: #fff;
}


/* Login Rectangle */
.dep-director-container {
	margin-top: 8%;
}
.dep-rectangles,
.grid-container {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	min-width: 100%;
}
.dep-rectangles .rectangle-box,
.grid-container>li {
	flex-basis: 236px;
	flex-grow: 0;
	min-height: 236px;
	border-radius: 18px;
	background: #EEF1F6;
	box-shadow: 0px 4px 20px 0px #C4D3EB;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column-reverse;
	gap: 23px;
}
.grid-container.grid-container-list {
	flex-direction: column;
    justify-content: flex-start;
}
.grid-container.grid-container-list li {
	min-height: auto;
    flex-basis: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.dep-rectangles .rectangle-box .name-int {
	font-family: 'Potta One', cursive;
	font-size: 40px;
	font-weight: 400;
	line-height: 29px;
	letter-spacing: 0em;
	text-align: center;
	color: #CC924D;
	width: 81px;
	height: 72px;
	border-radius: 20px;
	background: #EFCAA8;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dep-rectangles .rectangle-box p {
	font-family: 'DM Sans', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0em;
	text-align: center;
	margin: 0;
}
.dep-rectangles .rectangle-box .name-int.p {
	background: #7FD6DB;
	color: #509CA1;
}
.dep-rectangles .rectangle-box .name-int.i {
	background: #BDB0F0;
	color: #8B75E4;
}
.dep-rectangles .rectangle-box .name-int.e {
	background: #8ABDEC;
	color: #267AC8;
}
.dep-rectangles .rectangle-box .name-int.b {
	background: #FAC3C0;
	color: #CD7671;
}

/* Dep Landing Page */
.dep-landing-container {
	display: flex;
	height: 100vh;
}
.dep-landing-sidebar {
	flex-basis: 264px;
	flex-grow: 0;
	background-color: #fff;
}
.dep-landing-body {
	flex: 1;
}
.dep-landing-body .dep-header {
	padding-top: 15px;
	padding-bottom: 15px;
}
.dep-landing-sidebar .dep-sidebar-logo {
	margin: 12px 0 20px;
	padding: 0 30px;
}
.dep-landing-sidebar ul li {
	margin: 9px 0;
}
.dep-landing-sidebar ul li a {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #313131;
	line-height: 42px;
	padding: 0 30px;
	display: flex;
	align-items: center;
}
.dep-landing-sidebar ul li a svg {
	margin-right: 8px;
}
.dep-landing-sidebar ul li a:hover,
.dep-landing-sidebar ul li a.current {
	color: #2261BC;

}
.dep-landing-sidebar ul li a:hover svg,
.dep-landing-sidebar ul li a.current svg {
	filter: invert(30%) sepia(95%) saturate(690%) hue-rotate(178deg) brightness(99%) contrast(93%);
}
.dep-landing-sidebar ul li a.current::after {
	content: "";
	background-image: url('data:image/svg+xml,<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 10L6 6L2 2" stroke="%232261BC" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	background-position: 0 0;
	background-repeat: no-repeat;
	width: 8px;
    height: 12px;
    margin-left: auto;
}
.dep-body-area {
	padding: 30px;
}
.dep-body-area h3 {
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
	color: #2f2f2f;
	margin: 0 0 20px;
}