@import url('https://api.opanel.net/source/fonts/font.css');
@import url('./op-ico.css');
h1 {
	font-size: 32px;
}
h2 {
	font-size: 28px;
}
h3 {
	font-size: 24px;
}
p {
	font-size: 16px;
}
b {
	font-size: 16px;
}
i {
	font-size: 16px;
}
a {
	text-decoration: none;
	color: var(--black);
}
body {
	background-color: var(--grey);
	font-family: "Montserrat", sans-serif;
}
body>.alert {
	max-width: min(600px, 95%);
	position: absolute;
	top: 85px;
	right: 10px;
	padding: 0px 10px;
}
img[alt="Logo"]{
	max-width: 150px;
	max-height:40px; 
}
.btn-success {
	background-color: var(--orange);
	color: var(--grey);
	border: 1px solid var(--orange);
	min-width: 10%;
	font-weight: 500;
}
.btn-success:active,
.btn-success:focus,
.btn-success:hover {
	background-color: var(--navy-blue)!important;
}
nav.navbar {
	background-color: var(--white)!important;
}
.navbar .navbar-brand {
	margin-right: auto;
	border-radius: 10px;
	border-bottom: 3px solid var(--orange);
}
.navbar .navbar-nav {
	margin-left: auto;
	display: flex;
	flex-direction: row;
}
.navbar-nav .nav-item .nav-link {
	color: var(--orange);
	padding: 17px 15px  15px;
	border-bottom: 3px solid transparent;
	font-weight: 600;
	border-radius: 10px;
	padding: 15px 20px!important;
}
.navbar-nav .nav-item .nav-link.active {
	color: var(--orange);
}
.navbar-nav .nav-item .nav-link:not(#languageDropdown):hover {
	border-bottom: 3px solid var(--orange);
}
@media (max-width: 991px) {
	.navbar {
		transition: none!important;
	}
	.navbar .navbar-brand {
		border: none;
	}
	.navbar .navbar-toggler {
		margin-left: 0.5rem;
		--bs-navbar-toggler-border-color: none;
		box-shadow: none;
	}
	.navbar .navbar-nav {
		margin-left: 0;
		display: block;
	}
	.navbar .navbar-collapse {
		height: 100vh;
	}
	.navbar-nav .nav-item .nav-link {
		margin-bottom: 8px;
		background-color: var(--grey);
	}
	.navbar-collapse {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		background-color: #ffffff;
		box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
		z-index: 1000;
		padding: 0 15px;
	}
	@keyframes slideInFromRight {
		0% {
			transform: translateX(100%);
		}
		100% {
			transform: translateX(0);
		}
	}
	@keyframes slideOutToLeft {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(100%);
		}
	}
	.navbar-collapse.show {
		display: block;
		animation: slideInFromRight 0.3s forwards ease-in-out;
	}
	.navbar-collapse.hide {
		animation: slideOutToLeft 0.3s forwards ease-in-out;
	}
}
.no-transition {
	-webkit-transition: height 0;
	-moz-transition: height 0;
	-ms-transition: height 0;
	-o-transition: height 0;
	transition: height 0;
}
.description {
	margin-top: 120px;
	position: relative;
	line-height: 5;
}
.description .img-back:before {
	content: '';
	position: absolute;
	top: -140%;
	right: 35%;
	bottom: -75%;
	left: 0;
	background-image: url(../images/home-top-right.webp);
	background-position: top right;
	background-repeat: no-repeat;
	z-index: -1;
}
.description .carousel {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
	border-radius: 10px;
}
.description .carousel .carousel-item img {
	border-radius: 10px!important;
}
.description .img-back > b {
	color: var(--grey);
	font-weight: bold;
}
.description .img-back > p {
	font-size: 14px;
	line-height: normal;
}
.description .img-back .btn {
	margin-right: 15px;
}
.description .img-back .outline-see-details {
	padding: 15px 25px;
	background-color: var(--blue);
	border-radius: 5px;
	border: 0;
	font-size: 14px;
	font-weight: bold;
	color: var(--white);
}
.description .img-back .outline-see-details:hover {
	background-color: var(--white);
	color: var(--orange);
}
.information {
	margin-top: 150px;
}
.information .card {
	padding: 50px;
	border: 0;
	border-radius: 10px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
	min-height: 358px;
}
.information .card>h2 {
	margin-bottom: 15px;
	color: var(--navy-blue);
}
.information .card .divider {
	background-color: var(--orange);
	width: 100px;
	height: 5px;
	border-radius: 10px;
	margin-bottom: 20px;
}
.oInfo>h3 {
	position: relative;
	color: #8399A2;
	font-weight: bold;
	font-size: 22px;
	margin: 15px auto 25px auto;
	text-align: center;
	color: var(--navy-blue);
}
.oInfo>h3>i {
	position: absolute;
	bottom: -15px;
	font-size: 11px;
	letter-spacing: 1px;
	display: block;
	width: -webkit-fill-available;
	font-weight: 700;
}
.oInfo>p {
	font-size: 13px;
	font-weight: 500;
	color: var(--navy-blue);
}
.carousel-control-prev-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.page-title {
	margin-top: 73px;
	text-align: center;
	background-color: var(--orange);
	padding: 30px 0;
	margin-bottom: 50px;
}
.page-title h1 {
	font-size: 60px;
}
.page-title .breadcrumb {
	display: flex;
	justify-content: center;
}
.page-title .breadcrumb a.breadcrumb-item {
	color: var(--white);
	font-weight: 500;
}
.page-title .breadcrumb .breadcrumb-item.active {
	max-width: 25%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.version {
	display: none;
}
/** PRICING **/
.pricing .card {
	background-color: var(--white);
	border: 0;
	padding: 30px 15px;
	border: 10px;
	margin-bottom: 25px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.pricing .card>* {
	text-align: center;
}
.pricing .card:hover {
	box-shadow: var(--bs-box-shadow) !important;
}
.pricing .card h2 {
	color: var(--orange);
	font-size: 30px;
	margin-bottom: 50px;
}
.pricing .card h2>b {
	display: block;
	color: var(--navy-blue);
	font-size: 11px;
	font-weight: 300;
}
.pricing .card span {
	font-size: 72px;
	line-height: 50px;
	margin-bottom: 50px;
}
.pricing .card span>sup {
	font-size: 32px;
	top: -25px;
}
.pricing .card span>b {
	display: block;
	color: var(--navy-blue);
	opacity: .3;
}
.pricing .card p {
	margin-bottom: 50px;
	text-align: justify;
}
.pricing .card i {
	margin-bottom: 5px;
}
.pricing .card a {
	border: 1px solid var(--orange);
	border-radius: 6px;
	line-height: 40px;
	font-size: 14px;
	font-weight: 500;
	color: var(--navy-blue);
}
.pricing .card a:hover {
	background-color: var(--orange);
	color: var(--white);
}
.pricing .card.disabled {
	cursor: no-drop;
	background: var(--gray);
	box-shadow: none!important;
}
.pricing .card a.disabled {
	pointer-events: none;
	background-color: var(--red);
	border-color: var(--grey);
	color: var(--grey);
}
.pricing .PriceCalc {
	display: flex;
	justify-content: center;
	margin-bottom: 25px;
	margin-top: -15px;
}
.pricing .PriceCalc>.btn-price {
	border: 0;
	background-color: #F0F0F0;
	padding: 10px 30px;
	font-weight: 500;
	font-size: 18px;
}
.pricing .PriceCalc>.btn-price.active {
	background-color: #FF6C2C;
}
.pricing .PriceCalc>.btn-price:first-of-type {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
.pricing .PriceCalc>.btn-price:last-of-type {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
/** PRICING **/
/** PARTNER **/
.partner {
	margin-bottom: 50px;
}
.partner #map {
	width: 100%;
	height: 400px;
}
.partner header {
	display: flex;
}
.partner .maps {
	margin-bottom: 50px!important;
}
.partner h2>b {
	font-size: unset;
	color: var(--orange);
}
.partner form label>b {
	color: var(--red);
	opacity: .7;
}
.partner .gridCheck {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
.partner .form-switch .form-check-input {
	margin-left: -60px;
	width: 50px;
	height: 25px;
}
.partner .form-switch .form-check-label {
	padding-top: 4px;
	white-space: nowrap;
}
.partner .form-switch .form-check-input:focus {
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FF6C2C'/%3e%3c/svg%3e");
	border-color: var(--orange);
	box-shadow: 0 0 0 .25rem rgba(255, 108, 44, .25);
}
.partner .form-switch .form-check-input:checked {
	background-color: var(--orange);
	border-color: var(--orange);
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")!important;
}
.partner .form-switch {
	padding-left: 60px;
}
/** PARTNER **/
/** DOCS **/
.docs {
	margin-bottom: 50px;
}
.docs .sidebar {
	background-color: #FFF;
	position: sticky;
	top: 110px;
	border-radius: 6px;
	margin-left: 20px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	overflow: hidden;
}
.docs .sidebar .list-group-item {
	position: relative;
	cursor: pointer;
	border: 0;
	padding: 10px 15px;
	background-image: linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc);
	background-repeat: no-repeat;
	background-size: 2px 51%, 22px 2px;
	background-position: left bottom;
}
.docs .sidebar>.list-group>.list-group-item,.docs .sidebar .list-group .list-group-item:not([aria-expanded=true]){
	background-size:0;
	z-index: 1;
}
.docs .sidebar>.list-group>.list-group-item::before {
	position: unset;
}
.docs .sidebar .list-group .list-group {
	position: relative;
	margin-left: 20px;
	padding-left: 20px;
	border-left: 2px solid #ccc;
	border-radius: 0;
}
.docs .sidebar .list-group-item::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -20px;
	width: 20px;
	height: 2px;
	background-color: #ccc;
	transform: translateY(-50%);
}
.docs .sidebar .list-group>button:last-of-type::after {
	content: '';
	position: absolute;
	top: calc(50% + 1px);
	left: -22px;
	width: 2px;
	height: 999px;
	background-color: #fff;
}
.docs .sidebar .collapse.show {
	display: block;
}
.docs .sidebar .collapse:not(.show) .list-group {
	display: none;
}
.docs .content {
	background-color: #FFF;
	border-radius: 6px;
	padding: 15px;
	min-height: 600px;
	margin-right: 20px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
/** DOCS **/
/** FOOTER **/
footer {
	background-color: var(--navy-blue);
	padding: 25px 0;
	color: #DDDDDD;
	margin-top: 25px;
}
.footer .hr {
	width: 80px;
	height: 2px;
	background-color: var(--grey);
	margin: 15px 0;
}
.footer .footer-item {
	display: block;
	color: var(--grey);
}
/** FOOTER **/
/** CONTACT **/
.contact .contact-form {
	width: 100%;
	margin-bottom: 50px;
	border-radius: 15px;
	background-color: var(--white);
}
.contact .contact-form .info,
.contact .contact-form .form {
	padding: 40px 50px;
	flex: 1 0 auto;
}
.contact .contact-form .info>h2 {
	font-size: 36px;
	font-weight: 500;
}
.contact .contact-form .info>span,
.contact .contact-form .form>span {
	margin-bottom: 15px;
	display: block;
}
.contact .contact-form .info .details>span {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 15px;
}
.contact .contact-form {
	display: flex;
	gap: 5px;
	width: 100%;
}
.contact .contact-form .form {
	max-width: 800px;
}
.contact .contact-form>.hr {
	width: 2px;
	height: 180px;
	background-color: var(--orange);
}
.form-control:focus {
	box-shadow: unset;
	border: var(--bs-border-width) solid var(--bs-border-color);
}
.contact button[type="submit"] {
	width: auto;
	margin-left: 15px;
}
/** CONTACT **/
/** Community **/
.community .card {
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	border: 0;
	border-radius: 10px;
}
.community .card .card-header {
	background-color: var(--white);
	border: 0;
	padding: 15px 25px;
	border-radius: 10px;
}
.community .card .hr {
	height: 2px;
	margin: 0 25px;
	background-color: var(--orange);
}
.community .card .card-body {
	padding: 15px 25px;
}
.community .card .card-body .card-item {
	background-color: var(--gray);
	border-radius: 10px;
	display: inline-flex;
	padding: 10px 25px 10px 12px;
	margin: 15px 15px 5px 0;
	width: calc(50% - 20px);
}
.community .card .card-body .card-item:hover {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.community .card .card-body .card-item .text>b {
	font-weight: 500;
} 
.community .card .card-body .card-item .text>span {
	font-size: 14px;
	color: var(--bs-gray-500);
}
.community .card.list-group {
	padding: 15px 25px;
}
.community .card.list-group>.list-group-item {
	border: 0;
	padding: 0;
	margin-top: 10px;
}
/** Community **/
/** Community Topics **/
.community_topics .new-post {
	display: flex;
	justify-content: end;
}
.community_topics .new-post>a {
	padding-right: 15px;
	gap: 5px;
}
.community_topics .card {
	padding: 15px 25px;
	border: 0;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.community_topics .card .card-item {
	display: inline-flex;
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ddd;
}
.community_topics .card .card-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}
.community_topics .card .card-item>.text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.community_topics .card .card-item>.text>b {
	font-weight: 600;
}
.community_topics .card .card-item>.text>span {
	color: var(--bs-gray-600);
}
.community_topics .card .card-item>.comments {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	align-items: center;
	font-size: 12px;
	justify-content: center;
}
/** Community Topics **/
/** Community Topic Details **/
.cTopic_content .card {
	padding: 25px 35px;
	border: 0;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.cTopic_content .card .publish {
	display: inline-flex;
	margin: 15px 0;
	align-items: center;
	justify-content: center;
}
.cTopic_content .card .publish>h3 {
	font-size: 16px;
	margin: 0 auto 0 0;
}
.cTopic_content .card .publish>span {
	margin-left: auto;
	background-color: var(--bs-gray-200);
	padding: 10px 15px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
}
.cTopic_content .card .publish>h3>img {
	margin-right: 10px;
}
.cTopic_content .card .card-body {
	padding: 0;
}
.cTopic_content .card .card-body .comments>h4 {
	margin: 25px 0 0;
	padding: 15px 0;
	display: block;
	border-top: 1px solid var(--bs-gray-300);
	border-bottom: 1px solid var(--bs-gray-300);
}
.cTopic_content .card .card-body .comments>h4>span {
	font-size: 13px;
	display: block;
	margin-top: 8px;
	color: var(--bs-gray-600);
}
.cTopic_content .card .comment-publish {
	display: inline-flex;
	margin: 15px 0;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.cTopic_content .card .comment-publish:not(:first-of-type) {
	border-top: 1px solid var(--bs-gray-300);
	padding-top: 15px;
}
.cTopic_content .card .comment-publish>h3 {
	font-size: 16px;
	margin: 0 auto 0 0;
}
.cTopic_content .card .comment-publish>span {
	margin-left: auto;
	background-color: var(--bs-gray-200);
	padding: 10px 15px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
}
.cTopic_content .card .comment-publish>h3>img {
	margin-right: 10px;
}
/** Community Topic Details **/
@media (max-width: 1400px) {
	.information {
		margin-top: 25px;
	}
	.homecard {
		padding: 35px 15px!important;
	}
}
@media (max-width: 1200px) {
	.pricing .card {
		min-height: 530px;
	}
}
@media (max-width: 991px) {
	.page-title {
		margin-top: 75px;
		margin-bottom: 25px;
	}
	.version {
		display: block;
	}
	footer {
		margin-top: 0;
	}
	.information {
		margin-top: 25px;
	}
	.img-back {
		line-height: 26px;
	}
	.description {
		margin-top: 90px;
	}
	.description .img-back:before {
		top: -140%;
		right: 0;
		bottom: -500px;
		left: 0;
	}
	.description .img-back .outline-see-details {
		font-size: 12px;
	}
	.information .col-priv:first-of-type {
		width: 100%;
	}
	.information .col-priv {
		width: 50%;
	}
	.pricing .col-priv {
		width: 50%;
	}
}
@media (max-width: 825px) {
	.description {
		margin-top: 90px;
	}
	.description .img-back:before {
		top: -80%;
		right: 0;
		bottom: -500px;
		left: 0;
	}
	.description .img-back .outline-see-details {
		font-size: 12px;
	}
}
@media (max-width: 768px) {
	.description .img-back:before {
		top: -60%;
		right: 0;
		bottom: -250px;
		left: 0;
	}
	.information {
		margin-top: 25px;
	}
	.information .card.homecard {
		padding: 24px 12px;
	}
	.pricing .col-priv {
		width: 100%;
	}
}
@media (max-width: 525px) {
	.page-title h1 {
		font-size: 36px;
	}
	.page-title .breadcrumb {
		font-size: 14px;
	}
	.partner header {
		display: block!important;
	}
	.form-floating>label {
		width: 100%;
	}
}
@media (max-width: 475px) {
	.information .col-priv {
		width: 100%;
	}
}