:root {
	--white-color:rgba(255, 255, 255, 1);
	--black-color:rgba(0, 0, 0, 1);
	--green-color:rgba(101, 183, 65, 1);/* #65b741 */
	--gray-color:rgba(255, 255, 255, .5);
	--red-color:rgba(255, 0, 0, 1);
}

::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

::-webkit-scrollbar-track {
	background: #d1d7e1;
}

::-webkit-scrollbar-thumb {
	background: #65B741;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--black-color);
}

html {
    scroll-behavior: smooth;
}

body {
	font-family: "Inter", sans-serif;
	font-size:16px;
	font-weight:400;
	overflow-x:hidden;
}

body.drop-shadow {
	overflow-y:hidden;
}

body.drop-shadow:before {
	content:"";
    position: fixed;
	z-index:2;
    inset: 0;
    background: rgba(0, 0, 0, .75);
}

a {
	color:var(--black-color);
    text-decoration:none;
    transition:all .5s;
}

.header a:not(.ratebook-btn):hover ,
.main a:not(.ratebook-btn, .red-text):hover {
	color:var(--green-color);
}

.main .green-bg a:not(.ratebook-btn):hover {
	color:var(--white-color);
}

.main a.ratebook-btn:hover,
.main input[type="submit"]:hover,
.main button.ratebook-btn:hover,
.footer a:hover {
	color:var(--gray-color);
}

.main button.ratebook-btn.white-bg:hover {
	color:var(--black-color);
}

.main input[type="submit"] {
	cursor:pointer;
}

.fixed {
	position:fixed;
}

.relative {
    position:relative;
}

.absolute {
    position:absolute;
}

.block {
    display:block;
}

.grid {
	display:grid;
}

.flex {
    display:flex;
}

.flex-col {
    flex-direction:column;
}

.flex-0-5 {
    flex:.5;
}

.flex-1 {
    flex:1;
}

.flex-2 {
    flex:2;
}

.grid-2-cols {
    grid-template-columns: 1fr 1fr;
}

.flex-vert-aligned {
    align-items:center;
}

.flex-hor-aligned {
    justify-content:center;
}

.full-width {
    width:100%;
}

.full-height {
	height:100%;
}

.height-10 {
	height:10px;
}

.max-height {
	max-height:100%;
}

.uppercase {
    text-transform:uppercase;
}

.light-text {
  font-weight: 300;
}

.medium-text {
  font-weight: 500;
}

.semibold-text {
  font-weight: 600;
}

.bold-text {
  font-weight: 700;
}

.black-text {
  font-weight: 900;
}

.fs-12 {
    font-size:12px;
}

.fs-14 {
    font-size:14px;
}

.fs-18 {
    font-size:18px;
}

.fs-21 {
    font-size:21px;
}

.fs-32 {
    font-size:32px;
}

.fs-41 {
    font-size:41px;
}

.fs-72 {
    font-size:72px;
}

.halftransparent-bg {
    background-color: rgba(236, 234, 234, .5);
}

.white-bg {
    background-color:var(--white-color);
}

.black-bg {
	background-color:var(--black-color);
}

.darkgray-bg {
	background-color:rgba(255, 255, 255, .3);
}

.green-bg {
	background-color:#65B741;
}

.blue-text {
	color: rgba(58, 139, 233, 1);
}

.white-text {
    color:rgba(255, 255, 255, 1);
}

.green-text {
	color:#65B741;
}

.red-text {
	color:#DE433F;
}

.gray-text {
	color:#C5C3C4;
}

.underlined-text {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.lh-normal {
    line-height:normal;
}

.nowrap {
	white-space:nowrap;
}

.opacity-0 {
	opacity:0;
}

.pt-50 {
    padding-top:50px;
}

.pb-50 {
    padding-bottom:50px;
}

.pt-40 {
    padding-top:40px;
}

.pb-40 {
    padding-bottom:40px;
}

.pt-25 {
    padding-top:25px;
}

.pb-25 {
    padding-bottom:25px;
}

.pt-20 {
    padding-top:20px;
}

.pb-20 {
    padding-bottom:20px;
}

.pt-10 {
    padding-top:10px;
}

.pt-5 {
    padding-top:5px;
}

.pl-60 {
	padding-left:60px;
}

.pr-60 {
	padding-right:60px;
}

.pl-40 {
	padding-left:40px;
}

.pr-40 {
	padding-right:40px;
}

.pl-30 {
	padding-left:30px;
}

.pr-30 {
	padding-right:30px;
}

.pl-20 {
	padding-left:20px;
}

.pr-20 {
	padding-right:20px;
}

.padding-5 {
    padding:5px;
}

.pl-15 {
	padding-left:15px;
}

.pr-15 {
	padding-right:15px;
}

.padding-10 {
    padding:10px;
}

.padding-20 {
    padding:20px;
}

.padding-30 {
    padding:30px;
}

.padding-40 {
    padding:40px;
}

.padding-50 {
    padding:50px;
}

.center-aligned {
    text-align:center;
}

.object-fit-cover {
    object-fit:cover;
}

.border-1-green {
	border:1px var(--green-color) solid;
}

.border-1-red {
	border:1px #DE433F solid;
}

.border-1-black {
	border:1px var(--black-color) solid;
}

.border-1-lightgray {
	border:1px rgba(0, 0, 0, .1) solid;
}

.border-rad-10 {
	border-radius:10px;
}

.border-rad-20 {
	border-radius:20px;
}

.border-rad-30 {
	border-radius:30px;
}

.border-rad-top-inherit {
	border-top-left-radius:inherit;
	border-top-right-radius:inherit;
}

.overflow-hidden {
	overflow:hidden;
}

.item-pic {
	width:125px;
	height:100px;
	border-radius:5px;
}

.item-pic.middle {
	width:160px;
	height:160px;
}

.item-pic.larger {
	width:220px;
	height:220px;
}

.wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.footer {
	margin-top:auto;
}

.overflow-y-auto {
	overflow-y: auto;
}

.ratebook-btn {
	height:50px;
	border-radius:40px;
	display:inline-flex;
	place-items: center;
	place-content: center;
	text-align:center;
	text-transform: uppercase;
}

.ratebook-btn.alt {
	border-radius:5px;
	text-transform: initial;
}

.ratebook-oval {
	height:40px;
	border-radius:30px;
    display: inline-flex;
    align-items: center;
	justify-content: center;
	@media screen and (max-width:1024px) {
		width: fit-content;
	}
}

.hor-sep-btm {
	border-bottom:1px transparent solid;
}

.hor-sep-btm.black {
	border-bottom-color:var(--black-color);
}

.hor-sep-btm.lightgray {
	border-bottom-color:rgba(0, 0, 0, .1);
}

.vert-border-on-right {
	border-right:1px transparent solid;
}

.vert-border-on-right.white {
	border-right-color:var(--white-color);
}

.vert-border-on-right.green {
	border-right:1px #65B741 solid;
}

.transition-5 {
	transition:all .5s;
}

.mt-auto {
	margin-top:auto;
}

.mb-auto {
	margin-bottom:auto;
}

.ml-auto {
	margin-left:auto;
}

.grid-gap-5 {
	grid-gap: 5px;
}

.grid-gap-10 {
	grid-gap: 10px;
}

.grid-gap-20 {
	grid-gap: 20px;
}

.grid-gap-30 {
	grid-gap: 30px;
}

.grid-gap-40 {
	grid-gap: 40px;
}

.grid-gap-50 {
	grid-gap: 50px;
}

.grid-gap-100 {
	grid-gap: 100px;
}

.has-shadow {
	box-shadow:0 4px 14px 0 rgba(0, 0, 0, .25);
}

input:not([type="image"]),
button,
textarea,
select {
    border:0;
    outline:0;
	font-family: "Inter", sans-serif;
	border-radius:10px;
	height:40px;
	padding-left:10px;
	padding-right:10px;
	font-size:18px;
}

.nav input:not([type="image"]) {
	border:0;
}

.main input:not([type="image"], [type="checkbox"], [type="radio"]),
select {
	width:100%;
	height:50px;
	padding-left:20px;
	padding-right:20px;
	border:1px #C5C3C4 solid;
}

.main input[type="file"] {
	height:100%;
	border:0;
}

.main textarea {
	padding:20px;
	height:200px;
	resize:none;
	border:1px #C5C3C4 solid;
}

.select-box-icon {
	position:absolute;
    right: 33px;
    top: 40%;
}

.select-box-icon ~ select {
	appearance: none;
    position: relative;
    background-color: transparent;
}

input[type="checkbox"],
input[type="radio"] {
	margin:0;
	width:20px;
	height:20px;
}
	
input,
select,
textarea,
input::placeholder,
textarea::placeholder {
	color:rgba(0, 0, 0, .5);
}


.main input,
.main label,
.main label:after {
	transition:all .5s;
}

.main label.error {
	font-size:12px;
	color:var(--red-color);
}

/* experimental appoach for the form validation on login-signin.html page */
.login-signin input:focus,
.login-signin textarea:focus {
	border-color:var(--green-color);
}

.login-signin input:user-invalid,
.login-signin input.required.error,
.login-signin textarea.required.error {
	border-color:var(--red-color);
}

.login-signin .login-form label:has(input:placeholder-shown) > span,
.login-signin .login-form label:has(input[type="checkbox"]) > span {
	color:var(--white-color);
}

.login-signin label:has(input:not(:placeholder-shown)) > span,
.login-signin label:has(textarea:not(:placeholder-shown)) > span {
	color:var(--green-color);
}

.login-signin label:has(input:user-invalid):after {
	content:"Please, insert a valid value";
	font-size:12px;
	color:var(--red-color);
}

.login-signin label:has(input:user-invalid) > span {
	color:var(--red-color) !important;
}
/**/

button {
    cursor:pointer;
	background-color:transparent;
	transition:all .5s;
}

.main button:hover {
	color:var(--green-color);
}

.nav {
	padding-top:25px;
	padding-bottom:25px;
	position:sticky;
	top:0;
	left:0;
	right:0;
	z-index:4;
}

	.logo a {
		/**width:208px;
		height:40px;**/
		width:261px;
		height:49px;
	}
	
	.logo a {
		background-image:url('../images/ratebook-logo.svg');
	}
	
	.search-bar {
		height:50px;
	}
	
		.search-bar-inner {
			padding:7px;
		}
		
		.search-bar input,
		.search-bar .ratebook-oval {
			height:36px;
		}
		
		.search-bar input {
			background-color: transparent;
		}
		
		.search-bar .ratebook-oval {
			width:50px;
		}
		
		.focused-within-list {
			position: absolute;
			top: 65px;
			right:0;
			opacity: 0;
			visibility: hidden;
			transition: all .5s;
		}
		
		.has-bubble-arrow:before {
			content:"";
			width: 0;
			height: 0;
			border-top: 15px solid transparent;
			border-right: 15px solid transparent;
			border-bottom: 15px solid var(--white-color);
			border-left: 15px solid transparent;

			position: absolute;
			top: -30px;
			right: calc(50% - 73px);
		}
		
		.focused-within:focus-within ~ .focused-within-list,
		.focused-within-list:has(a:focus){
			opacity:1;
			visibility:visible;
			z-index:1;
		}

		    /*
			.focused-within-list-inner {
				max-height:calc(100vh - 200px);
			}
			*/
			.focused-within-list-inner .ul-descendant {
                max-height: calc(100vh - 167px);
                overflow-y: auto;
			}
			
				.focused-within-list a:hover {
					color:var(--green-color);
				}
				
				.focused-within-list a .fa-chevron-right {
					opacity:0;
					transition:opacity .5s;
				}
				
				.focused-within-list a:hover .fa-chevron-right {
					opacity:1;
				}

.header {
    height:calc(100vh - 100px);
	background-size: cover;
	background-position: center;
	position:relative;
}

.has-larger-header .header {
	height:auto;
}

.header:before {
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	background-image:url("../images/header-bg.png");
	background-size: cover;
	background-position: center;
}

.login-form {
	background-image:url("../images/login-bg.svg");
	background-size: cover;
	background-position: center;
}

.main ul {
	padding-left:20px;
	margin-bottom:20px;
	list-style:disc;
}

.main ul:last-of-type {
	margin-bottom:0;
}

.main li,
p {
	line-height:normal;
}

p:nth-child(n):has(+ ul) {
	margin-bottom: 15px;
}

p:not(:only-of-type) {
	margin-bottom:20px;
}

p:last-of-type {
	margin-bottom:0;
}

strong,
p strong {
	font-weight:700;
}

.main {
	background-color:#FDFDFD;
}

.container {
    width:100%;
	max-width:1400px;
	height:inherit;
    margin:auto;
    padding-left: 20px;
    padding-right: 20px;
}
	
	.hor-progress-bar-container {
		top:0;
		height: 2px;
		z-index: 5;
	}
	
		.hor-progress-bar {
			  height: inherit;
			  width: 0%;
			  transition:all .5s;
		}
	
	.single-slider [class ^= "swiper-button-"],
	.polls-slider [class ^= "swiper-button-"] {
		background-image:none;
	}

	.file-attach-comp {
		border: 1px #C5C3C4 solid;
		cursor:pointer;
		min-height: 200px;
	}
	
	.rate-now-block .bigstar {
		margin-top:0;
	}
	
	.pagination {
		place-items: center;
		& a {
			display: block;
			border: 1px var(--black-color) solid;
			padding: 5px;
			&:hover {
				border-color:#65B741;
			}
		}
		& .green-text,
		& .activ-page {
			border: 1px #65B741 solid;
			padding: 5px;
			color: #65B741
		}
		.pager {
			display: flex;
			justify-content: center;
			grid-gap: 10px;
		}
	}

	
@media screen and (min-width:1025px) {		
.focused-within-list-inner {
	min-width:647px;
    overflow: hidden;
}
	
	.ul-ancestor li .ul-descendant {
		position: absolute;
		right: 0;
		left:50%;
		top: 0;
		bottom: 0;
		opacity:0;
		visibility:hidden;
		transition-delay: .25s;
	}
	
	.ul-ancestor li:hover .ul-descendant {
		opacity:1;
		visibility:visible;
	}
}

@media screen and (max-width:1024px) {
	.hide-on-mobile {
		display:none;
	}
	
	.flex-on-mobile {
		display:flex;
	}
	
	.flex-col-on-mobile {
		flex-direction: column;
	}
	
	.grid-gap-20-on-mobile {
		grid-gap: 20px;
	}
	
	.grid-gap-10-on-mobile {
		grid-gap: 10px;
	}
	
	.grid-gap-5-on-mobile {
		grid-gap: 5px;
	}
	
	.full-width-on-mobile {
		width:100%;
	}
	
	.fs-14-on-mobile {
		font-size:14px;
	}
		
	.fs-26-on-mobile {
		font-size:26px;
	}
	
	.fs-36-on-mobile {
		font-size:36px;
	}
	
	.no-ml-auto-on-mobile {
		margin-left:0;
	}
	
	.mr-auto-on-mobile {
		margin-right:auto;
	}
		
	.pt-25-on-mobile {
		padding-top:25px;
	}
		
	.pb-25-on-mobile {
		padding-bottom:25px;
	}
	
	.pl-25-on-mobile {
		padding-left:25px;
	}
	
	.pr-25-on-mobile {
		padding-right:25px;
	}
	
	.pl-10-on-mobile {
		padding-left:10px;
	}
	
	.pb-10-on-mobile {
		padding-bottom:10px;
	}
	
	.pt-0-on-mobile {
		padding-top:0;
	}
	
	.pl-0-on-mobile {
		padding-left:0;
	}
	
	.pr-0-on-mobile {
		padding-right:0;
	}
	
	.padding-15-on-mobile {
		padding:15px;
	}
	
	.padding-25-on-mobile {
		padding:25px;
	}
	
	.center-aligned-on-mobile {
		text-align:center;
	}
	
	.order--1-on-mobile {
		order:-1;
	}
	
	.focused-within-list {
		left:0;
	}
	
		.has-bubble-arrow:before {
			right: calc(50% + 10px);
		}
	
	header.header {
		height:auto;
	}

	.focused-within-list-inner {
	    max-height: calc(100vh - 260px);
	}

	.focused-within-list-inner .ul-descendant {
	    max-height: none;
	}
	
	
	
	.breadcrumb-holder {
		place-items: flex-start;
		overflow-x: auto;
		margin-bottom: 10px;
	}
	
		#breadcrumb * {
			white-space: nowrap;
		}
	
	#chart_div div,
	#chart_div svg {
		/*width: 100% !important;*/
	}
	
	.single-slider .swiper-button-next {
		right: 0;
	}
	
	.single-slider .swiper-button-prev {
		left: 0;		
	}
	
	#otherratingspan > div.flex {
		flex-direction: column;
		grid-gap: 10px;
		align-items: flex-start;
		border-bottom: 1px #ccc solid;
		margin-bottom: 10px;
	}
}