.horizontal-menu .app-menu .menu-list > li:not(:last-child) {
    margin-right: 0px !Important;
}

.lightmode .form-switch {
    color: rgba(255, 255, 255, .6) !important;
}

.topbar  {
    position: absolute;
    top: 20px;
	display: flex;
	justify-content: space-between;
}

section {
    max-width: 1140px;
    width: calc(100% - 40px);
    margin: 0 auto;
    position: relative;
}

#subheader {
    padding: 60px 0px;
    padding-bottom: 60px;
    background: linear-gradient(278.54deg, #001DAC 15.93%, #000F57 98.7%);
    color: white;
    font-size: 50px;
    font-weight: 600;
    text-align: center;
}

.min {
	padding-bottom: 0;
	height: 50px;
}

#subheader p {
    font-size: 17px;
    font-weight: 300;
}

#order {
	background: #f6f6f6;
	padding-bottom: 80px;
	padding-top: 40px;
	color: black;
}

#order section {
	max-width: 1140px;
}

#order h2 {
	text-align: left;
	margin: 0px;
	font-size: 30px;
	font-weight: 600;
}

#order .step {
	font-size: 23px;
	font-weight: 600;
	padding: 20px 0px;
}

#order .hosting {
	color: #727586;
}

#order .hosting b {
	color: black;
}

#order .guarantee {
	font-weight: 600;
	line-height: 1.2;
	color: #1d1e20;
	float: right;
	text-align: right;
	font-size: 15px;
	padding-top: 10px;
}

#order .prices {
	display: flex;
	padding: 50px 0px;
	padding-bottom: 100px;
}

#order .prices .tag {
	width: 25%;
	background: white;
	border: 1px solid #dadce0;
	border-radius: 5px;
	padding: 25px 15px !important;
	margin: 15px;
	position: relative;
	cursor: pointer;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#order .noleft {
	margin-left: 0px !important;
}

#order .noright {
	margin-right: 0px !important;
}

#order .prices .tag h3 {
	font-size: 15px;
	line-height: 1.4;
	color: #1d1e20;
	font-weight: 600;
	text-align: center;
	padding: 0;
	margin: 0;
	text-transform: uppercase;
}

#order .prices .tag h4 {
	text-align: center;
	font-weight: 600;
	font-size: 45px;
	margin: 0;
}

#order .prices .tag h5 {
	text-align: center;
	font-weight: 600;
	font-size: 15px;
	margin: 0;
	text-align: center;
	color: #727586; 
}

#order .prices .tag p {
	text-align: center;
	font-weight: 500;
	font-size: 13px;
	margin: 0;
	padding: 0;
	padding-top: 15px;
	text-align: center;
	color: #727586; 
}

#order .prices .tag p i {
	font-size: 16px;
	
	transform: translateY(20%);
}

#order .hosting i {
	font-size: 16px;
	
	transform: translateY(20%);
}

#order .prices .cheaper {
	color: #36344d;
	background: #dadce0;
	border-radius: 100px;
    padding: 4px 12px;
    position: absolute;
	transform: translateY(-50%);
	transform: translateX(-50%);
	left: 50%;
	top: -15px;
	font-weight: 500;
}

#order .prices .cheaper_blue {
	background-color: #0039e4;
    background-image: -moz-linear-gradient(145deg, #0039e4, #04dbf1);
    background-image: -webkit-linear-gradient(145deg, #0039e4, #04dbf1);
    background-image: linear-gradient(145deg, #0039e4, #04dbf1);
	color: white;
	border-radius: 100px;
    padding: 4px 12px;
    position: absolute;
	transform: translateY(-50%);
	transform: translateX(-50%);
	left: 50%;
	top: -15px;
	font-weight: 500;
}

#order .prices .tag:before {
	content:"";
	width: 15px;
	height: 15px;
	border-radius: 20px;
	border: 1px solid #dadce0;
	position: absolute;
	top: 17px;
	left: 17px;
}

#order .prices .tag.active {
	border: 1px solid #0082F8;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

#order .prices .tag.active:after  {
	content:"Wybierając dłuższy okres \A oszczędzisz aż 62%!";
	width: calc(100% - 0px);
	position: absolute;
	bottom: -80px;
	left: 50%;
	transform: translateY(-50%);
	transform: translateX(-50%);
	padding: 15px;
	background: #0082F8;
	border-radius: 3px;
	color: white;
	font-weight: 500;
	text-align: center;
    opacity: 1.0;
 	cursor: default;
}

#order .prices .tag.active.noright:after  {
	content:"Brawo! Z tym planem oszczędzasz najwięcej!" !important;
	width: calc(100% - 0px);
	position: absolute;
	bottom: -80px;
	left: 50%;
	transform: translateY(-50%);
	transform: translateX(-50%);
	padding: 15px;
	background: #e1f7f3;
	border-radius: 3px;
	color:#1d1e20;
	font-weight: 500;
	text-align: center;
    opacity: 1.0;
 	cursor: default;
}

#order .prices .tag.active.noleft:after  {
	content:"Wybierając plan roczny \A otrzymasz 2 miesiące za darmo!";
    white-space: pre;
	width: calc(100% - 0px);
	position: absolute;
	bottom: -80px;
	left: 50%;
	transform: translateY(-50%);
	transform: translateX(-50%);
	padding: 15px;
	background: #0082F8;
	border-radius: 3px;
	color: white;
	font-weight: 500;
	text-align: center;
    opacity: 1.0;
 	cursor: default;
}

#order .prices .tag.active .cheaper {
	background-color: #0039e4;
    background-image: -moz-linear-gradient(145deg, #0039e4, #04dbf1);
    background-image: -webkit-linear-gradient(145deg, #0039e4, #04dbf1);
    background-image: linear-gradient(145deg, #0039e4, #04dbf1);
	color: white;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

#order .prices .tag.active:before {
	width: 17px;
	height: 17px;
	border: 0px;
	border-radius: 20px;
	background-color: #0039e4;
    background-image: -moz-linear-gradient(145deg, #0039e4, #04dbf1);
    background-image: -webkit-linear-gradient(145deg, #0039e4, #04dbf1);
    background-image: linear-gradient(145deg, #0039e4, #04dbf1);
}

#order .prices .tag.active .circle2 {
	position: absolute;
	left: 22px;
	top: 22px;
	width: 7px;
	height: 7px;
	background: white;
	border-radius: 20px;
	z-index: 2;
}

#order #payments .payment.active .circle2 {
	position: absolute;
	left: 22px;
	top: 22px;
	width: 7px;
	height: 7px;
	background: white;
	border-radius: 20px;
	z-index: 2;
}

#order #payments {
	display: flex;
	padding-bottom: 40px;
}

#order #payments .payment {
	width: 25%;
	padding: 12px 15px;
	padding-left: 50px;
	margin: 15px;
	background: white;
	border: 1px solid #dadce0;
	border-radius: 5px;
	position: relative;
	cursor: pointer;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#order .payment:before {
	content:"";
	width: 15px;
	height: 15px;
	border-radius: 20px;
	border: 1px solid #dadce0;
	position: absolute;
	top: 17px;
	left: 17px;
}

#order .payment.active {
	border: 1px solid #0082F8 !important;
    -webkit-transition: all 0.2s ease-in !important;
    transition: all 0.2s ease-in !important;
}

#order .payment.active:before {
	width: 17px;
	height: 17px;
	border: 0px;
	border-radius: 20px;
	background-color: #0039e4;
    background-image: -moz-linear-gradient(145deg, #0039e4, #04dbf1);
    background-image: -webkit-linear-gradient(145deg, #0039e4, #04dbf1);
    background-image: linear-gradient(145deg, #0039e4, #04dbf1);
}


#order .payment h3 {
	margin: 0;
	padding: 0;
	font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    padding-bottom: 10px;
}

.cols {
	display: flex;
	justify-content: space-between;
}

#summary {
	width: calc(70% - 50px);
	padding: 15px;
	border: 1px solid #dadce0;
	border-radius: 5px;
}

#summary h2 {
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    margin: 0;
    padding: 0;
}

#summary .line {
	border-top: 1px solid #dadce0;
	margin: 20px 0px;
}

#summary .price {
	float: right;
}

#summary .old-price {
	margin-right: 8px;
    color: #727586;
    display: inline-block;
    font-weight: 500;
    text-decoration: line-through;
}

#features {
	width: calc(30% - 20px);
	padding: 15px 10px;
}

#summary .price2 {
	padding-bottom: 20px;
}

#features b {
	font-size: 22px;
	font-weight: 600;
}

#features i {
	color: #1877f2;
	width: 28px;
	text-align: center;
}

.cta_order {
	margin: 0 auto;
	margin-top: 20px;
	transform: translateX(-50%);
	position: absolute;
	left: 50%;
}

.feature {
	padding: 10px 0px;
	padding-bottom: 5px;
}

#order input {
	padding: 10px;
    background: white;
    border: 1px solid #dadce0;
    border-radius: 5px;
    padding: 11px 16px;
    font-size: 16px;
	font-family: "Mulish", sans-serif;
	margin-bottom: 5px;
}

.fbor {
	display: inline-block;
	padding: 5px 0px;
	text-transform: uppercase;
	font-weight: 600;
	width: 100px;
	text-align: center;
}

.emailstep {
	padding-top: 20px;
	padding-bottom: 80px;
	height: 100px;
}

.emailstep input[type=email] {
    -webkit-transition: all 0.2s ease-in !important;
    transition: all 0.2s ease-in !important;
    float: left;
}

.emailstep #response {
	width: 100%;
	float: left;
	padding: 10px;
	color: #0083f8;
}

#loginBtn {
	background: #1877f2 url(facebook.svg) 10px center no-repeat;
	background-size: 25px;
	padding: 10px;
	padding-left: 42px;
	border-radius: 4px;
    color: #fff;
    border: 0px;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}


.emailstep input:focus {
	border: 1px solid #0082F8;
	outline: 0px;
}



#cta_blue {
	background: linear-gradient(95.45deg, #0082F8 0.64%, #1C40F2 98.23%);
	padding: 16px 32px;
	display: inline-block;
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
    border-radius: 5px;	
    color: white;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1
}

#cta_empty {
	outline: 1px solid #ffffff;
    padding: 16px 32px;
	display: inline-block;
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
    border-radius: 5px;	
    color: white;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1
}
#cta_blue:hover, #cta_empty:hover {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    padding: 16px 32px;
    outline: 0px;
}

#cta_blue:after, #cta_empty:after {
	content:"";
	background: linear-gradient(95.45deg, #1C40F2 98.23%, #0082F8 0.64%);
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    width: 102%;
    height: 100%;
    right: -2px;
    top: 0px;
    position: absolute;
    z-index: -1;
    opacity: 0;
}

#cta_blue:hover:after, #cta_empty:hover:after {
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
	content:"";
    width: 102%;
    height: 100%;
    right: -2px;
    top: 0px;
    opacity: 1;
}
#order .nav-tabs .nav-link.active {
    color: #27323f !important;
}

/* Tło całego edytora */
.darkmode .note-editor.note-frame {
    background-color: #18191c; /* Tło w stylu panelu */
    border: 1px solid #1f2124; /* Ramka dopasowana do stylu panelu */
}

/* Tło i kolor tekstu w polu edytora */
.darkmode .note-editable {
    background-color: #18191c; /* Tło pola tekstowego zgodne z panelem */
    color: #d1d4dc; /* Jasny kolor tekstu panelu */
}

/* Pasek narzędzi */
.darkmode .note-toolbar {
    background-color: #212327; /* Dopasowane tło paska narzędzi */
    border-bottom: 1px solid #2a2c31;
}

/* Ikony na pasku narzędzi */
.darkmode .note-toolbar button i,
.darkmode .note-toolbar .dropdown-item,
.darkmode .note-toolbar .note-btn {
    color: #d1d4dc; /* Kolor ikon zgodny z panelem */
}

/* Zastosowanie białych ikon dla wszystkich klas note-icon */
.darkmode [class*="note-icon"]:before, 
.darkmode [class^=note-icon]:before {
    color: #8e98a5; /* Białe ikony */
}

/* Tło i ramka dla elementów interaktywnych (przyciski, dropdowny) */
.darkmode .note-toolbar button,
.darkmode .note-toolbar .dropdown-item,
.darkmode .note-toolbar .note-btn {
    background-color: #1f2124; /* Ciemniejsze tło dla przycisków */
    border: 1px solid #2a2c31; /* Ramka dopasowana do stylu panelu */
}

/* Podświetlenie najechania na przycisk */
.darkmode .note-toolbar button:hover,
.darkmode .note-toolbar .dropdown-item:hover,
.darkmode .note-toolbar .note-btn:hover {
    background-color: #2a2c31; /* Tło podczas najechania */
    border-color: #33363b; /* Ramka podczas najechania */
}

/* Style dla aktywnych elementów (np. pogrubienie, podkreślenie, itd.) */
.darkmode .note-toolbar button.active {
    background-color: #33363b; /* Tło dla aktywnego przycisku */
    border-color: #3e4248;
}

/* Dropdowns */
.darkmode .note-dropdown-menu {
    background-color: #212327; /* Tło zgodne z panelem */
    border: 1px solid #2a2c31; /* Ramka dla dropdown */
}

.darkmode .dropdown-item {
    background-color: #212327; /* Tło dla elementów dropdown */
    color: #d1d4dc; /* Tekst dropdown */
}

.darkmode .dropdown-item:hover {
    background-color: #2a2c31; /* Tło podczas najechania */
}

/* Tło podpowiedzi (tooltip) */
.darkmode .note-popover {
    background-color: #1f2124; /* Tło podpowiedzi */
    color: #d1d4dc; /* Kolor tekstu podpowiedzi */
    border: 1px solid #2a2c31; /* Ramka podpowiedzi */
}

.darkmode .mailbox-open-content-email {
	border-bottom: 1px solid #2d2d3f !important;
}

.chat img {
	max-width: 30%;
}

.note-modal {
	z-index: 99999 !important;
}

.row_float {
	display: block;
}

.row_float .col-4 {
	float: left;
}

.darkmode .accordion-button.collapsed::after {
    filter: invert(1);
}

.app-content {
	margin-top: 0px !important;
}