@define-color bg #0B0E1D;
@define-color selected_bg #101322;
@define-color hover_bg #191b27;
@define-color text #D8E2EA;
@define-color selected_text #a6a7ac;
@define-color border #7E01FF;
@define-color error #bd2828;
@define-color success #e89b0b;
@define-color accent #7E01FF;
@define-color unfocused #f85656;

* {
	font-size: 14px;
}

.notification {
	border-radius: 15px;
	background-color: @bg
}

.notification-content {
	padding: 10px;
	background-color: @bg;
}


.notification-default-action:hover,
.notification-action:hover {
	-gtk-icon-effect: none;
	background: @selected_bg;
}

.body-image {
	margin-top: 6px;
	background-color: @bg;
	border-radius: 12px;
}

.summary {
	color: @noti-text-color;
	text-shadow: none;
}

.time {
	color: @noti-text-color;
	text-shadow: none;
	margin-right: 18px;
}

.body {
	background: @bg;
	color: @text;
	text-shadow: none;
}

.control-center {
	border-radius: 15px;
	-gtk-outline-radius: 1.705rem;
	border: 1px solid @border;
	margin: 5px;
	background-color: @bg;
	padding: 5px;
}

.control-center-dnd {
	border-radius: 15px;
	background: @bg;
	border: 1px solid @border;
}



.control-center-dnd slider:checked {
	background: @border;
	border-radius: 15px;
}

/* title widget */

.widget-title {
	padding: 0.341rem;
	margin: unset;
}

.widget-title label {
	font-size: 1.364rem;
	color: @text;
	margin-left: 0.941rem;
}

.widget-title button {
	border: unset;
	background-color: unset;
	border-radius: 1.159rem;
	-gtk-outline-radius: 1.159rem;
	padding: 0.141rem 0.141rem;
	margin-right: 0.841rem;
}

.widget-title button label {
	font-size: 1.0409rem;
	color: @text;
	margin-right: 0.841rem;
	font-family: FiraCode Nerd Font;
}

.widget-title button:hover {
	background-color: @selected_bg;
}

.widget-title button:active {
	background-color: @selected_bg;
}

/* Buttons widget */

.widget-buttons-grid {
	border-radius: 15px;
	padding: unset;
	background-color: @selected_bg;
	font-family: FiraCode Nerd Font;
}

.widget-buttons-grid>flowbox {
	padding: unset;
}


.widget-buttons-grid>flowbox>flowboxchild>button {
	border: none;
	background-color: unset;
	min-width: 7.5rem;
	min-height: 2.9rem;
	padding: unset;
	margin: unset;
}

.widget-buttons-grid>flowbox>flowboxchild>button label {
	font-size: 20px;
	color: @text;

}

.widget-buttons-grid>flowbox>flowboxchild>button:hover {
	background-color: @hover_bg;
}

.widget-buttons-grid>flowbox>flowboxchild>button:checked {
	background-color: @accent;
}

.widget-buttons-grid>flowbox>flowboxchild>button:checked label {
	color: @bg;
}

/* Volume widget */

.widget-volume {
	background-color: @selected_bg;
	padding: 8px;
	margin: 8px;
	-gtk-outline-radius: 1.159rem;
	-gtk-outline-radius: 1.159rem;
	font-family: FiraCode Nerd Font;
}

.widget-volume trough {
	border: unset;
	background-color: @selected_text;
}


.widget-volume trough slider {
	color: unset;
	background-color: @border;
	border-radius: 100%;
	min-height: 1.25rem;
}


/* Mpris widget */

.widget-mpris {
	background-color: @selected_bg;
	padding: 8px;
	margin: 8px;
	border-radius: 15px;
}

.widget-mpris-player {
	padding: 0px;
	margin: 0px;
}

.widget-mpris-title {
	font-weight: bold;
	font-size: 18px;
}

.widget-mpris-subtitle {
	font-size: 15px;
}

.widget-menubar {
	font-family: FiraCode Nerd Font;
}

.powermode-buttons {
	background-color: @bg;
	padding: 8px;
	margin: 8px;
	border-radius: 15px;
}

.powermode-buttons>button {
	background: transparent;
	border: none;
}

.powermode-buttons>button:hover {
	color: @selected_text;
}
