@import url("colors.css");

.ev-notification-panel--container {
	width: 35rem;
}

.ev-notification-panel--contentContainer {
	overflow-y: auto;
	height: 85vh;
	margin-bottom: 1.5rem;
}

.ev-notification-panel--footer {
	position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; 
    padding: 0 1rem 0.5rem 0;
    text-align: right;
}

.ev-notification-panel--readBtn:hover {
	background-color: var(--dim-blue) !important;
}

.ev-notification-panel--noDataVector {
	height: 136px;
}

.ev-notification-panel--noDataContainer {
	display:flex;
	height: 85vh;
	justify-content: center;
    align-items: center;
}

.ev-notification-panel--noSearchDataContainer {
	display:flex;
	height: 70vh;
	justify-content: center;
    align-items: center;
}

.ev-notification-panel--moreBtn {
	padding: 4px !important;
}

.ev-notification-panel--moreBtn .ui-button-text {
	padding: 0 !important;
}

.ev-notification-panel--moreBtn:hover {
	background-color: var(--dim-blue) !important;
}

.ev-notification-container {
	border-bottom: 1px solid var(--gray-500);
}

.ev-notification-iconContainer {
	background-color: var(--dim-orange);
	height: 36px;
    width: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-self: center;
    min-width: 36px;
    justify-content: center;
}

.ev-notification-icon {
	color: var(--warning-orange);
}

.ev-notification-chip--new {
	font-size: 12px !important;
	font-style: normal;
	font-weight: 400;
	display: flex;
	padding: 2px 12px;
	justify-content: center;
	align-items: center;
	gap: 4px;
	border-radius: 32px;
	background-color: var(--success-green);
	color: var(--white);
}

.ev-notification-contentContainer {
	width: 100%;
}

.ev-notification-readMore--dialogFooter {
	text-align: right;
	padding-top: 1.5rem;
}

.ev-notification-readMore--dialog {
	overflow-y: auto;
	max-height: 600px;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.ev-notification-panel--container {
		width: unset !important;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	
}