body {
	margin: 0;
}

.btn-ophelia-new,
.btn-ophelia-status {
	background: #2ECC71;
	border-radius: 28px;
	color: white;
	border: none;
	height: 30px;
	padding: 0 15px;
	transition: all 0.1s ease-out;
}

.btn-ophelia-new:disabled {
    background: #dadada;
    color: #5d5d5d;
}

.btn-ophelia-status {
	font-size: 1.5rem;
}

.btn-coord-ophelia {
	background: linear-gradient(90deg, #FF7F18 50%, rgba(255, 127, 24, 0.75) 100%);
	border-radius: 28px;
	color: white;
	border: none;
	padding: 0 15px;
	font-family: "Roboto", sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	height: 45px;
	color: #FFFFFF;
}

a {
	text-decoration: none;
}

.header-ophelia {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.geoport-title-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position:relative;
	margin: 8px 0;
}

.page-header {
	border-bottom: 2px solid #1C3D4A;
}

.btn-add-to-coord {
	padding: 0 20px;
	border: 3px solid #2BBA00;
	box-sizing: border-box;
	border-radius: 28px;
	text-align: center;
	height: 45px;
	width: 115px;
	font-family: "Roboto", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	color: #000000;
}

.btn-remove-to-coord {
	padding: 0 2px;
	border: 3px solid #E62020;
	box-sizing: border-box;
	border-radius: 28px;
	text-align: center;
	height: 45px;
	width: 115px;
	font-family: "Roboto", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	color: #000000;
}

.breadcrumbs-ophelia {
	grid-area: breadcrumbs;
	height: 29px;
	margin: 0 20% 0 2%;
	background: #C4C4C4;
}

span.state {
	width: 10px;
	height: 40px;
	border-radius: 100px;
}

.state-active {
	background-color: #2ECC71;
}

.state-inactive {
	background-color: #E47833;
}

.infos-ophelia {
	grid-area: info;
	background: #C4C4C4;
}

.menu-ophelia {
	background: #C4C4C4;
	height: 62px;
	grid-area: menu;
}