@charset "utf-8";
/* CSS Document */


/*LOADER*/
/* .content_loading{height:100%; position:fixed; top:0; left:0; background:var(--black); transition:all 0.5s ease-in-out; z-index:9999; opacity:1;}
.content_loading.hide{opacity:0; pointer-events:none;} */

/*FONTS*/
@font-face {
    font-family: 'OPTIBalloon';
    src: url('fonts/OPTIBalloon-Bold2.woff2') format('woff2'),
        url('fonts/OPTIBalloon-Bold2.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/*COLORS*/
:root{

	/*White*/
	--white-01:rgba(250,250,250,0.1);
	--white-02:rgba(250,250,250,0.2);
	--white-03:rgba(250,250,250,0.3);
	--white-04:rgba(250,250,250,0.4);
	--white-05:rgba(250,250,250,0.5);
	--white-06:rgba(250,250,250,0.6);
	--white-07:rgba(250,250,250,0.7);
	--white-08:rgba(250,250,250,0.8);
	--white-09:rgba(250,250,250,0.9);
	--white:#FFFFFF;

	/*Black*/
	--black-01:rgba(0,0,0,0.1);
	--black-02:rgba(0,0,0,0.2);
	--black-03:rgba(0,0,0,0.3);
	--black-04:rgba(0,0,0,0.4);
	--black-05:rgba(0,0,0,0.5);
	--black-06:rgba(0,0,0,0.6);
	--black-07:rgba(0,0,0,0.7);
	--black-08:rgba(0,0,0,0.8);
	--black-09:rgba(0,0,0,0.9);
	--black:#000000;

	--soft-gray:#D2D2D2;
	--gray:#999999;

	--soft-white:#E8E8E8;
	--soft-gray02: #F3F3F3;
	--medium-gray:#D9D9D9;
	--dark-gray: #5E5E5E;
	--dark-gray02: #131313;
	--blue: #00547E;
	--blue01: #2DCCFC;
	--blue02: #1B7996;
	--green: #B7D562;
	--yellow: #FFD167;
	--mustard: #DBA934;
	--custom-light-green: #176D39;
	--custom-light-green-01: rgb(23, 109, 58, 0.1);
	--custom-dark-green: #0C4222;
	--custom-dark-green-04: rgb(12, 66, 34, 0.4);
	--custom-darker-green: #1B281E;
	--custom-warn: #9C281D;

	--custom-button-gray: #4A4A4A;
	--custom-lighter-gray: #F2F2F2;
	--custom-light-gray: #D9D9D9;

	--warning:#d22c1d;
	--warning-toast:#dd6464;
}


/*GENERICS*/

html{width:100%; height:100%}
html.no_overflow{overflow: hidden;}

body{width:100%; height:100%; background:var(--white); font-size:1rem; font-family:'Nunito', sans-serif; font-weight:400; color:var(--black); -webkit-font-smoothing:antialiased;}

a{color:var(--black); text-decoration:none; transition: all 0.35s ease-in-out;}

header, section, article, aside, footer, nav, figure, div, a{box-sizing:border-box; position:relative;}

	/*Form*/
		/*Input*/
		input{border-radius: 12px; height: 50px; border: 1px solid var(--soft-white); background: var(--soft-gray02); width: 100%;}
		select{border-radius: 12px; height: 50px; border: 1px solid var(--soft-white); background: var(--soft-gray02); width: 100%; padding: 0 15px;}

		/*TextArea*/
		textarea{border-radius: 12px; height: auto; border: 1px solid var(--soft-white); background: var(--soft-gray02); width: 100%; padding: 15px;}


		/*Select*/
		.select_style{height:50px; border-bottom:var(--green) 1px solid; border-right:none; border-left:none; border-top:none;}
		.select_style::before{width:17px; height:17px; position:absolute; top:0; bottom:0; right:0; margin:auto 0; background:url(../../img/bg_arrow.svg) no-repeat; pointer-events:none; content:''}

			.select_style select{border:none; background:var(--white); height:100%; color:var(--black); box-sizing:border-box; -webkit-box-sizing:border-box;}

		/*Floating Label*/
		label.floating_label{position:absolute; top:14px; left:0;  font-family:'Muli', sans-serif; font-weight:400; color:var(--gray); pointer-events:none; z-index:10; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; will-change:font-size, color, top; touch-action:manipulation;}

			input:not(:placeholder-shown) + label,
			input:focus + label {top:0px; font-size:0.750rem;}

			input:not(:placeholder-shown),
			input{padding:0 15px !important;}

			select:focus + label, 
			select:not([value=""]):valid + label{top:0px; font-size:0.750rem;}

			textarea:not(:placeholder-shown) + label,
			textarea:focus + label {top:0px; font-size:0.750rem;}

				textarea:not(:placeholder-shown),

		/*Checkbox*/
		.label-check {float:left; position:relative; cursor:pointer; margin:0;}
	    .label-check input[type="checkbox"] { opacity:0; position:absolute; left:0; top:0; margin:0; z-index:1; cursor:pointer; width:24px; height:24px;}
	    .label-check span.label_check { position:relative; top:-2px; background:var(--gray-02); display:inline-block; vertical-align:bottom; margin-right:5px; width:24px; height:24px; border-radius:2px; box-shadow:inset 0 2px 1px 0 rgba(0, 0, 0, 0.1);}
	    .label-check input[type="checkbox"]:checked + span:after { content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; width:24px; height:24px; background-image:url(../../img/bg_check.svg); background-color:var(--green); background-repeat:no-repeat; border-radius:2px; background-position:center;}

	    /*Warning*/

			/*Input*/
			.warning input{border:var(--warning) 1px solid}

			/*Input*/
			.warning textarea{border:var(--warning) 1px solid}

			/*Select*/
			.warning .select_style{border-bottom:var(--warning) 1px solid}

			/*Label*/
			.warning label{color:var(--warning);}

			/*CheckBox*/
			.warning .label-check span.label_check{background:var(--warning);}

			/*Terms*/
			.warning .terms{color:var(--warning);}

/* BUTTON */
.button{height: 50px; border-radius: 25px; cursor: pointer;}

	/*Enter button*/
	.button.enter{background-color: var(--custom-darker-green);}
	.button.enter:hover{background-color: var(--custom-light-green);}

	/*Warn button*/
	.button.warn{background-color: var(--custom-warn);}
	.button.warn:hover{background-color: var(--warning);}

	/*Grey button*/
	.button.secondary{background-color: var(--custom-button-gray);}
	.button.secondary:hover{background-color: var(--dark-gray);}

	.button span{justify-content: center; align-items: center; color: var(--white); font-size: 1.25rem; font-weight: 700;}

/* ROUND BUTTON */
.round_button{width: 14px; height: 14px; background: var(--medium-gray); border-radius: 50%; margin: 0 10px 0 0;}
.round_button.active{background: var(--dark-gray);}

.round_button:last-child{margin: 0;}

/*LAYOUT*/
.row{width:100%; display:flex; flex-wrap:wrap;}

.center_content{width:1200px; margin:0 auto; display:flex; flex-wrap:wrap;}

/* BUTTON FIXED */
.button_fix{position: fixed; z-index: 4; bottom: 25px; left: 0; justify-content: center;}

	.button_fix .button.enter{background: var(--custom-dark-green); width: 350px;}

	.button_fix .button.enter:hover{background: var(--custom-light-green);}

/* Modal */
.modal{position: fixed; justify-content: center; align-items: center; height: 100dvh;  z-index: 100; opacity: 0; transition: opacity .5s ease-in-out;}

.modal.hide{visibility: hidden;}
.modal.show{visibility: visible; opacity: 1;}

	.modal .modal_background{position: absolute; height: 100dvh; background-color: var(--black-07);}
	
	.modal .modal_content{justify-content: center; max-height: calc(100dvh - 40px); max-width: 700px; align-items: center; background-color: var(--white); margin: 20px; padding:0 25px 50px 25px; border-radius: 15px; overflow-y: auto; z-index: 10;}

		.modal .modal_content .cross{height: 50px; align-items: center; justify-content: end; cursor: pointer;}

		.modal .modal_content .modal_body{padding-bottom: 20px; justify-content: center;}

			.modal .modal_content .modal_body input{height: 42px;}
			.modal .modal_content .modal_body h2{font-size: 1.5rem; font-weight: 700; line-height: 32px; padding-bottom: 20px; text-align: center;}
			.modal .modal_content .modal_body p{font-size: 1rem; font-weight: 400; line-height: 23px;}
				.modal .modal_content .modal_body p span{font-weight: 700;}

		/*Modal buttons*/
		.modal .modal_content .buttons_container{width: 100%;}
		.modal .modal_content .buttons_container .content_button:not(:first-child){margin-top: 15px;}
			.modal .modal_content .content_button .button span{font-size: 1rem;}
	
		/*Profile detail modal*/
		.modal.profile_pet_image .modal_content{background-color: transparent; position: relative; padding: 0; max-width: 400px; aspect-ratio: 320/360;}
			.modal.profile_pet_image .modal_content .modal_body{width: 100%; height: 100%; padding: 0;}

				.modal.profile_pet_image .modal_content .cross{position: absolute; top: 0; right: 20px; z-index: 10;}
					.modal.profile_pet_image .modal_content .cross svg path{fill: var(--white);}

				.modal.profile_pet_image .modal_content .modal_body figure{width: 100%; height: 100%;}
					.modal.profile_pet_image .modal_content .modal_body figure img{width: 100%;  height: 100%; object-fit: cover;}


		/*Associate modal*/
		.modal.associate_modal .modal_content .modal_body figure{margin-top: 20px; width: 150px; height: 150px;}
			.modal.associate_modal .modal_content .modal_body figure img{width: 100%; height: 100%; object-fit: contain;}

		.modal.associate_modal .modal_content .modal_body label{font-size: .6rem; font-weight: 700; color: black; justify-content: center;}

/*Heading content*/
/* Logo */
.center_content{padding: 50px 25px;}
.heading_logo{justify-content: center; align-items: center; height: fit-content;}

	.heading_logo figure{height: 50px; width: 180px; margin-bottom: 45px;}

		.heading_logo figure img{width: 100%; height: 100%; object-fit: contain;}

.content_heading .heading_text{align-items: center; padding: 0 25px 30px;}
.home .content_heading .heading_text{height: fit-content;}
	.content_heading .heading_text h2{font-size: 1.5rem; font-weight: 700; line-height: 25px; justify-content: center; text-align: center;}
	.content_heading .heading_text h3{font-size: 1.1rem; font-weight: 400; line-height: 25px; justify-content: center; text-align: center;}

/*Alert*/
.alert{position: fixed; top: 0; left: 0; justify-content: center; align-items: center; min-height: 75px; padding: 20px 50px 20px 20px; border-bottom: 1px solid var(--white-03); color: var(--white); z-index: 100; opacity: 0; clip-path: inset(0 0 100% 0); transition: all .5s ease-in-out; z-index: 200;} 
	.alert span{text-align: center;} 

	.alert .cross{position: absolute; display: flex; align-items: center; right: 20px; transform: translateY(1px);}
		.alert .cross svg{width: 12px;} 
		.alert .cross svg path{fill: var(--white);}

.alert.warning{background-color: var(--custom-warn);} 
.alert.warning.active{clip-path: inset(0 0 0 0); opacity: 1;} 
.alert.success{background-color: var(--custom-light-green); opacity: 0;} 
.alert.success.active{clip-path: inset(0 0 0 0); opacity: 1;} 

/*View passowrd eye*/
form .password_container{position: relative; height: fit-content;}
	form .password_container .eye_logo{position: absolute; right: 15px; top: calc(50% + 2px); width: 33px; height: 33px; transform: translateY(-50%) scale(.9); opacity: 0; pointer-events: none; cursor: pointer;}
	form .password_container .eye_logo svg{width: 100%; height: 100%;}

	form .password_container.visible_password .eye_logo.open_eye{opacity: 1; pointer-events: all;}
	form .password_container.visible_password .eye_logo.closed_eye{opacity: 0; pointer-events: none;}
	form .password_container:not(.visible_password) .eye_logo.open_eye{opacity: 0; pointer-events: none;}
	form .password_container:not(.visible_password) .eye_logo.closed_eye{opacity: 1; pointer-events: all;}

/* FORGOT PASSWORD */
	.forgot_password .go_back_button:hover{background-color: var(--soft-gray);}
	.forgot_password .go_back_button span{color: var(--black);}

/* FORM PAGE CONTENT */

		/* Elements */	
		.form_page_content .content_elements{background-color: var(--white); border-radius: 30px 30px 0 0;}

			/* Form */
				.form_page_content .content_elements .form .data{margin: 0 0 25px;}
				.form_page_content .content_elements .form .data:last-child{margin: 0;}

					.form_page_content .content_elements .form .data label{font-size: 1.25rem; color: var(--black); margin: 0 0 10px;}
					.form_page_content .content_elements .form .data input{padding: 0 15px;}

			/* Buttons */
			.form_page_content .content_buttons{align-items: center;}

				.form_page_content .content_buttons .button.enter{background: var(--custom-darker-green); margin: 25px 0;}

				.form_page_content .content_buttons .button.enter:hover{background: var(--custom-light-green);}

				.form_page_content .content_buttons .round_buttons{justify-content: center; margin: 40px 0 0;}

/* LOGIN */

	.home .content_login .center_content{padding: 50px 0 0 0; background-color: var(--custom-light-green)}
	
		.home .content_login .heading_text h1{font-family: "OPTIBalloon"; font-size: 1.25rem; color: var(--white); justify-content: center; text-align: center;}

		.home .content_login .center_content{max-height: 100vh; padding: 50px 0 0 0; background-color: var(--custom-light-green)}
		
		.home .content_login .center_content .content_elements{padding: 35px 20px 0; height: 100%;}

			/* Buttons */
			.home .content_login .content_buttons{height: auto; width: 100%; align-items: start;}
			.home .content_login .content_buttons .button.enter{background: var(--custom-dark-green); margin: 25px 0;}
			.home .content_login .content_buttons .button.signup{background: var(--custom-darker-green)}
			
			.home .content_login .content_buttons .button.enter:hover,
			.home .content_login .content_buttons .button.signup:hover{background: var(--custom-light-green);}

			/* Sign Up */
			.home .content_login .content_elements .create label{justify-content: center; text-align: center; font-size: 1.125rem; color: var(--black); padding: 25px 0;}
			.home .content_login .content_elements .create label:last-child{margin: 0;}

				.home .content_login .content_elements .create label a{color: var(--blue); margin: 0 0 0 2px;}
				.home .content_login .content_elements .create label a:hover{text-decoration: underline;}
					
/* NAVIGATION */
.content_navigation{position: absolute; top: 0; left: 0; align-items: flex-start; z-index: 5;}
.content_navigation .center_content{padding: 15px 15px 0;}

	/* BTN Burger */
	.content_navigation .burger_menu{width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; background: var(--white); border-radius: 12px; cursor: pointer;}

	.content_navigation .btn_burger{display: block; width: 15px; height: 15px; position: relative;}
	.content_navigation .btn_burger::after{width:100%; height:1px; position:absolute; top:0; right:0; background:var(--black); content:'';}
	.content_navigation .btn_burger::before{width:100%; height:1px; position:absolute; bottom:0; right:0; background:var(--black); content:'';}

		.content_navigation .btn_burger span{width:100%; height:1px; position:absolute; top:0; bottom:0; right:0; margin:auto; background:var(--black); font-size:0;}
		.content_navigation .btn_burger span::before{width:15px; height:1px; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; background:var(--black); content:'';}

		/*Animations*/
		.content_navigation .btn_burger::before,
		.content_navigation .btn_burger::after{transition:all 0.35s ease-in-out; -webkit-transition:all 0.35s ease-in-out; will-change:opacity; transition-delay:0.5s; -webkit-transition-delay:0.5s;}

		.content_navigation .btn_burger.open::before,
		.content_navigation .btn_burger.open::after{opacity:0; transition-delay:0s; -webkit-transition-delay:0s;}

		.content_navigation .btn_burger span{transition:all 0.35s ease-in-out; -webkit-transition:all 0.35s ease-in-out; will-change:transform; transition-delay:0.35s; -webkit-transition-delay:0.35s;}
		.content_navigation .btn_burger.open span{transform:rotate(45deg); -webkit-transform:rotate(45deg);}

			.content_navigation .btn_burger span::before{transition:all 0.35s ease-in-out; -webkit-transition:all 0.35s ease-in-out; will-change:transform; transition-delay:0.35s; -webkit-transition-delay:0.35s;}
			.content_navigation .btn_burger.open span::before{transform:rotate(-90deg); -webkit-transform:rotate(-90deg);}

	/* Menu */
	.content_navigation .menu_wrapper{position: absolute; top: calc(100% + 5px); background: var(--white); border-radius: 12px;  display: grid; grid-template-rows: 0fr; opacity: 0; transition: all .5s ease-in-out; box-shadow: 0 0 30px 0px var(--black-04); }
	.content_navigation .menu{overflow: hidden; padding: 0 15px; row-gap: 5px; display: flex; flex-wrap: wrap; width: 157px;}
		.content_navigation .menu li:first-child{padding-top: 15px;}
		.content_navigation .menu li:last-child{padding-bottom: 15px;}

		.content_navigation .menu .item{font-size: 1.125rem; font-weight: 700; color: var(--black);}
		.content_navigation .menu .item::before{position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background: var(--black); transform: scaleX(0); transition: all 0.35s ease-in-out; content: '';}

		.content_navigation .menu .item:hover::before{transform: scaleX(1.0);}

		/* Open */
		.content_navigation.open .menu_wrapper{grid-template-rows: 1fr; opacity: 1; pointer-events: all;}

/* PROFILE DETAIL */
	/* Button fixed */
	.profile_detail .button_fix svg{ margin-right: 10px;}

	/* Modal align */
	.profile_detail .modal .modal_content{align-self: end;}

	/* Hero */
	.profile_detail .content_hero .center_content,
	.profile .content_hero .center_content,
	.reported .content_hero .center_content{background-color: var(--custom-light-green); padding: 80px 0 70px;}

		/* Pic */
		.profile_detail .content_hero .profile_pic,
		.profile .content_hero .heading{justify-content: center;}

			.profile_detail .content_hero .profile_pic figure{height: 165px; width: 165px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer;}
			.profile_detail .content_hero .profile_pic figure::before{height: 100%; width: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; background: var(--black); content: ''; }

				.profile_detail .content_hero .profile_pic figure img{height: 95%; width: 95%; object-fit: contain; border-radius: 50%; position: relative;}

		/*Lost pet warning*/
		.profile_detail .lost_pet_warning{position: absolute; bottom: -20px; display: flex; justify-content: center; align-items: center; padding: 10px 15px; background-color: var(--custom-warn);}
			.profile_detail .lost_pet_warning span{font-size: 1.125rem; font-weight: 700; color: var(--white); margin-left: 10px;}

	/* Detail */
	.profile_detail .content_detail .center_content{padding: 0 20px 150px;}

	.profile_detail .content_detail .center_content::before,
	.profile .content_pets .center_content::before{height: 50px; width: 100%; position: absolute; top: -35px; left: 0; background: var(--white); border-radius: 30px 30px 0 0; content: ''; }

		/* Pet */
		.profile_detail .content_detail .intro h3{font-weight: 700; color: var(--black); font-size: 1.5rem;}
		.profile_detail .content_detail .intro h4{font-weight: 400; margin-top: 10px;}
		
		/* Divider */
		.profile_detail .content_detail .divider{margin: 25px 0;}
		.profile_detail .content_detail .divider svg{width: 100%; min-height: 5px;}

		/* Details */
		.profile_detail .content_detail .details{justify-content: space-between;}

			.profile_detail .content_detail .details .data{width: 33%; align-content: center; border-radius: 12px;}

				.profile_detail .content_detail .details .data label{justify-content: center; font-size: 1.5rem; font-weight: 700; margin: 0 0 5px;}

		/* Parents */
		.profile_detail .content_detail .parents{row-gap: 20px;}

			.profile_detail .content_detail .parents .ppl_data .phone{width: calc(100% - 120px);}

				.profile_detail .content_detail .parents .ppl_data .phone label{font-size: 1.25rem; font-weight: 700;}
				.profile_detail .content_detail .parents .ppl_data .phone span{font-size: 1.125rem;}

			.profile_detail .content_detail .parents .ppl_data .call{column-gap: 10px; width: 120px; justify-content: flex-end;}

			.profile_detail .content_detail .parents .ppl_data .call a:hover{opacity: 0.5;}

		/* Address */
		.profile_detail .content_detail .address{margin-bottom: 25px;}

			.profile_detail .content_detail .address label{font-size:1.25rem; font-weight: 700; margin: 0 0 10px;}
			.profile_detail .content_detail .address span{font-size: 1.125rem;}

		/* Behaviour Slider */
			/* Item */
			.profile_detail .content_slider .item{padding: 20px; border-radius: 12px; height: 225px; display: flex}
			.profile_detail .content_slider .item.green{background: var(--green);}
			.profile_detail .content_slider .item.yellow{background: var(--yellow);}

				.profile_detail .content_slider .item h6{justify-content: center; text-align: center; font-size: 1.25rem; font-weight: 700;}
				.profile_detail .content_slider .item p{text-align: center;}

			/*Dots*/
			.profile_detail .slick-dots{width:100%; position:absolute; bottom: -50px; left:0; display:flex; justify-content:center; align-items:center; z-index:3;}

				.profile_detail .slick-dots li{margin:0 10px 0 0;}
				.profile_detail .slick-dots li:last-child{margin:0;}

						.profile_detail .slick-dots li button{width:14px; height:14px; border-radius:50%; padding:0; background:var(--medium-gray); font-size:0; border:none;}

							.profile_detail .slick-dots li.slick-active button{background:var(--dark-gray);}

		/* Gallery Slider */
		.profile_detail .gallery_slider{height: fit-content; margin-top: 80px;}
			.profile_detail .gallery_slider .item{height: 100%; width: fit-content; padding: 0 15px; display: flex; justify-content: center;}

				/*Item image*/
				.profile_detail .gallery_slider .item .item_image{max-height: 225px; aspect-ratio: 500/400; padding: 0}
					.profile_detail .gallery_slider .item .item_image img{ width: 100%; height: 100%; object-fit: cover; border-radius: 12px;}

/* PROFILE */
	/* Heading */
	.profile .content_hero .heading h2{justify-content: center; padding: 0 20px; font-size: 2rem; font-weight: 700; color: var(--white);}

	/* Add */
	.profile .content_hero .content_button{justify-content: center;}

		.profile .content_hero .content_button .button_add{display: flex; align-items: center; justify-content: space-evenly; height: 30px; background: var(--custom-dark-green); border: 1px solid transparent; border-radius: 15px; width: 120px; align-content: center; margin: 20px 0 0;}

			.profile .content_hero .content_button .button_add span{font-weight: 700; color: var(--white); justify-content: center; transition: all .5s ease-in-out;}

		/* Hover */
		.profile .content_hero .content_button .button_add:hover{border: 1px solid var(--custom-dark-green); background-color: var(--custom-darker-green); backdrop-filter: blur(10px)}

			.profile .content_hero .content_button .button_add:hover span{color: var(--custom-light-green);}
		
	/* Pets */
	.profile .content_pets .center_content{padding: 0 25px 150px;}
	
		.profile .content_pets .list{row-gap: 65px; padding: 25px 0 0;}

		/* Pet */
		.profile .content_pets .list li{position: relative;  background-color: var(--custom-lighter-gray); border: 1px solid var(--custom-light-gray); border-radius: 10px; transition: all .5s ease-in-out;}

			.profile .content_pets .list li .pet{padding: 60px 20px 10px; justify-content: center; align-items: center;}

				/* Figure */
				.profile .content_pets .list li .pet figure{position: absolute; top: -45px; left: calc(50% - 45px); height: 90px; width: 90px; display: flex; align-items: center; justify-content: center;}
				.profile .content_pets .list li .pet figure::before{height: 100%; width: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; background: var(--black); content: ''; transition: all .5s ease-in-out;}

					.profile .content_pets .list li .pet figure img{height: 100%; width: 100%; object-fit: cover; border-radius: 50%; position: relative; clip-path: circle(48% at 50% 50%);}

				/* Name */
					.profile .content_pets .list li .pet .name label{font-size: 1.25rem; font-weight: 700; color: var(--black); justify-content: center; text-align: center;}

				/*Buttons*/
				.profile .content_pets .list li .pet .content_buttons{justify-content: center; gap: 10px; margin-top: 10px;}
					.profile .content_pets .list li .pet .content_buttons .pets_button{flex: 1; height: 40px; max-width: 170px; padding: 0 14px; border-radius: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer;}
					.profile .content_pets .list li .pet .content_buttons .pets_button svg{padding-bottom: 2px;}

					/*Button outline*/
					.profile .content_pets .list li .pet .content_buttons .pets_button.outline{border: 1px solid var(--custom-dark-green);}
						.profile .content_pets .list li .pet .content_buttons .pets_button.outline svg{fill: var(--custom-dark-green);  padding-right: 5px; }
						.profile .content_pets .list li .pet .content_buttons .pets_button.outline label{font-family: 'Nunito'; font-size: .8rem; font-weight: 700; color: var(--custom-dark-green);cursor: pointer;}

					/*Button associate*/
					.profile .content_pets .list li .pet .content_buttons .pets_button.associate{background-color: var(--custom-warn);}
					.profile .content_pets .list li .pet .content_buttons .pets_button.associate:hover{background-color: var(--warning);}
						.profile .content_pets .list li .pet .content_buttons .pets_button.associate svg{fill: var(--white); padding-right: 5px;}
						.profile .content_pets .list li .pet .content_buttons .pets_button.associate label{font-family: 'Nunito'; font-size: .8rem; font-weight: 700; color: var(--white);cursor: pointer;}

		/* Warning */
		.profile .content_pets .warning{justify-content: center; padding: 0 25px;}

			.profile .content_pets .warning svg path{stroke: var(--custom-dark-green);}

			.profile .content_pets .warning h2{font-size: 1.5rem; color: var(--black); justify-content: center; text-align: center; padding-top: 25px;}

/* EDIT PET */ 
	/* Pic */
	.edit_pet .form_page_content .center_content .pet_pic_content{margin: 5px 0 35px;}
	.edit_pet .form_page_content .center_content .pet_pic_content,
	.edit_pet .form_page_content .center_content .pet_pic_content .pet_pic{justify-content: center;}

		.edit_pet .form_page_content .center_content .pet_pic_content .pet_pic figure{height: 165px; width: 165px; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
		.edit_pet .form_page_content .center_content .pet_pic_content .pet_pic figure::before{height: 100%; width: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; background: var(--black); content: ''; z-index: 10;}

			.edit_pet .form_page_content .center_content .pet_pic_content .pet_pic figure img{height: 100%; width: 100%; object-fit: cover; clip-path: circle(48% at 50% 50%); position: relative; z-index: 20;}

	/* Input */
	.edit_pet .form_page_content .center_content .pet_pic_content input{display: none;}
	.edit_pet .form_page_content .center_content .pet_pic_content label{position: absolute; top: 150px; display: flex; align-items: center; justify-content: center; width: 125px; height: 32px; border: 1px solid transparent; border-radius: 16px; background-color: var(--custom-dark-green); cursor: pointer; z-index: 30; transition: all .5s ease-in-out;}

		.edit_pet .form_page_content .center_content .pet_pic_content label span{color: var(--white); font-size: 1rem; font-weight: 700; padding-left: 5px; transition: color .5s ease-in-out;}
		.edit_pet .form_page_content .center_content .pet_pic_content label:hover span{color: var(--custom-light-green);}

	/*Add image item*/	
	.edit_pet .add_image{border: 2px dashed var(--dark-gray02); background-color: var(--soft-gray02); border-radius: 12px; margin-bottom: 25px;}
		.edit_pet .add_image .hidden_input{display: none;}
			.edit_pet .add_image label{justify-content: center; align-items: center; gap: 35px; padding: 20px; cursor: pointer;}
				.edit_pet .add_image label h3{font-size: 1.25rem; font-weight: 400;}
				.edit_pet .add_image label .logo{width: 100px; height: 100px;}

	/*Loading image item*/
	.edit_pet .loading_item{flex-direction: column; justify-content: center; align-items: center; border: 2px dashed var(--dark-gray02); background-color: var(--soft-gray02); border-radius: 12px; margin-bottom: 25px; height: 148px;}
		/*Counter*/
		.edit_pet .loading_item .progress_count{display: flex; justify-content: space-between; width: 70%; font-size: 1.25rem; font-weight: 400;}
		/*Progress Bar*/
		.edit_pet .loading_item .loading_bar_container{display: flex; justify-content: center; width: 70%; height: 8%; border: 2px solid var(--black); border-radius: 30px; z-index: 10;}
			.edit_pet .loading_item .loading_bar_container .progress_bar{position: absolute; top: -2px; left: -2px; width: 100%; max-width: 0%; height: 100%; background-color: var(--custom-dark-green); border: 2px solid var(--custom-darker-green); border-radius: 30px; transition: all .5s ease-in-out; box-sizing: content-box;}

	/* Gallery Slider */
		/* Gallery Slider */
		.edit_pet .edit_gallery_slider{height: fit-content; margin: 0px 0 60px;}

		/*Put slider on left*/
		.edit_pet .edit_gallery_slider .slick-list {justify-content: flex-start !important;}
		.edit_pet .edit_gallery_slider .slick-list .slick-track{margin-left: 0 !important;}

			.edit_pet .edit_gallery_slider .item{height: calc(100% + 15px); padding: 15px 15px 0px; display: flex; justify-content: center;}

			/*Delete logo*/
			.edit_pet .edit_gallery_slider .item .delete{position: absolute; top: -15px; left: -15px; width: 20%; cursor: pointer; z-index: 20; transition: all .5s ease-in-out;}
			.edit_pet .edit_gallery_slider .item .delete svg circle{fill: var(--custom-warn); transition: fill .35s ease-in-out;}
			.edit_pet .edit_gallery_slider .item .delete:hover svg circle{fill: var(--warning);}

			/*Item image*/	
			.edit_pet .edit_gallery_slider .item .item_image{position: relative; max-height: 225px; height: 100%; aspect-ratio: 500/400; padding: 0}
				.edit_pet .edit_gallery_slider .item .item_image img{ width: 100%; height: 100%; object-fit: cover; border-radius: 12px;}
				.edit_pet .edit_gallery_slider .item .item_image svg{ width: 100%; height: 100%; object-fit: contain;}
		
			/*Dots*/
			.edit_pet .slick-dots{width:100%; position:absolute; bottom: -50px; left:0; display:flex; justify-content:center; align-items:center; z-index:3;}

				.edit_pet .slick-dots li{margin:0 10px 0 0;}
				.edit_pet .slick-dots li:last-child{margin:0;}

						.edit_pet .slick-dots li button{width:14px; height:14px; border-radius:50%; padding:0; background:var(--medium-gray); font-size:0; border:none;}

							.edit_pet .slick-dots li.slick-active button{background:var(--dark-gray);}

	/*Lost report*/
	.edit_pet .lost_report{justify-content: center; align-items: center; border: 2px solid var(--dark-gray02); background-color: var(--soft-gray02); border-radius: 12px; margin-top: 25px; min-height: 75px; padding: 20px; cursor: pointer;}
		.edit_pet .lost_report .report_content{display: flex; justify-content: end; align-items: center; width: 280px; gap: 35px;}
			.edit_pet .lost_report .report_content p{font-size: 1.25rem; color: var(--black);}
				.edit_pet .lost_report .report_content p span{font-weight: 700;}
			.edit_pet .lost_report .report_content .item_image svg{width: 34px;}
			.edit_pet .lost_report .report_content .item_image svg path{fill: #535353}

		/*Warning colors*/
		.edit_pet .lost_report.warning{background-color: var(--custom-warn);}
			.edit_pet .lost_report.warning .report_content p{color: var(--white);}
				.edit_pet .lost_report.warning .report_content .item_image svg path{fill: var(--white)}



/*FIRST STEP*/
.first_step .content_heading h3{padding-top: 25px;}

	.first_step .first_step_content{justify-content: center; padding: 40px 20px 0;}
		.first_step .body_content{max-width: 400px; justify-content: center;}

		/*Profile modal*/
		.first_step .body_content label{font-size: 1.1rem; font-weight: 400;}
		.first_step .body_content figure{margin-top: 20px; width: 118px; height: 118px;}
		.first_step .body_content figure img{width: 100%; height: 100%; object-fit: cover;}

		.first_step .body_content p{font-size: .6rem; font-weight: 700; color: black; justify-content: center;}
	
		.first_step .first_step_content .content_button{justify-content: center; margin-top: 30px;}
			.first_step .first_step_content .content_button .button.enter{background: var(--custom-dark-green); width: 400px;}
			.first_step .first_step_content .content_button .button.enter:hover{background: var(--custom-light-green);}

/* REPORTED */
	/* Heading */
	.reported .content_hero .heading h2{justify-content: center; padding: 0 20px 20px; font-size: 2rem; font-weight: 700; color: var(--white); text-align: center;}

	/* Pets */
	.reported .content_pets .center_content{padding: 0 25px 150px;}
	.reported .content_pets .center_content::before{height: 50px; width: 100%; position: absolute; top: -35px; left: 0; background: var(--white); border-radius: 30px 30px 0 0; content: ''; }
	
		.reported .content_pets .list{row-gap: 65px; padding: 25px 0 0;}

		/* Pet */
		.reported .content_pets .list li{position: relative;  background-color: var(--custom-lighter-gray); border: 1px solid var(--custom-light-gray); border-radius: 10px; transition: all .5s ease-in-out;}

			.reported .content_pets .list li .pet{padding: 65px 20px 10px; justify-content: center; align-items: center;}

				/* Figure */
				.reported .content_pets .list li .pet figure{position: absolute; top: -45px; left: calc(50% - 45px); height: 90px; width: 90px; display: flex; align-items: center; justify-content: center;}
				.reported .content_pets .list li .pet figure::before{height: 100%; width: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; background: var(--black); content: ''; transition: all .5s ease-in-out;}

					.reported .content_pets .list li .pet figure img{height: 100%; width: 100%; object-fit: cover; border-radius: 50%; position: relative; clip-path: circle(48% at 50% 50%);}
				
				/*Text*/
				.reported .content_pets .list li .pet .name,
				.reported .content_pets .list li .pet .reported_date{justify-content: center;}

					/* Name */
						.reported .content_pets .list li .pet .name label{font-size: 1.25rem; font-weight: 700; color: var(--black); justify-content: center; text-align: center;}

					/* Reported Date */
						.reported .content_pets .list li .pet .reported_date{font-size: .6rem; font-weight: 400; color: var(--black); justify-content: center; text-align: center; margin: 5px 0;}

					/* Reported Date */
					.reported .content_pets .list li .pet .comment{font-size: 1rem; font-weight: 400; color: var(--black); justify-content: center; text-align: center;}

				/*Buttons*/
				.reported .content_pets .list li .pet .content_buttons{justify-content: center; gap: 10px; margin-top: 20px;}
					.reported .content_pets .list li .pet .content_buttons .pets_button{flex: 1; height: 40px; max-width: 170px; padding: 0 14px; border-radius: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer;}
					.reported .content_pets .list li .pet .content_buttons .pets_button svg{padding-bottom: 2px;}

					/*Button outline*/
					.reported .content_pets .list li .pet .content_buttons .pets_button.outline{border: 1px solid var(--custom-dark-green);}
						.reported .content_pets .list li .pet .content_buttons .pets_button.outline svg{fill: var(--custom-dark-green);  padding-right: 5px; }
						.reported .content_pets .list li .pet .content_buttons .pets_button.outline label{font-family: 'Nunito'; font-size: .8rem; font-weight: 700; color: var(--custom-dark-green);cursor: pointer;}

		/* Warning */
		.reported .content_pets .warning{justify-content: center; padding: 0 25px;}

			.reported .content_pets .warning svg path{stroke: var(--custom-dark-green);}

			.reported .content_pets .warning h2{font-size: 1.5rem; color: var(--black); justify-content: center; text-align: center; padding-top: 20px;}

/*Media Query Ipad Portrait General*/
@media (max-width: 1200px) {

.center_content{width: 100%;}

/*Loading image item*/
		.edit_pet .edit_gallery_slider .item .item_image .loading_bar_container .progress_count{font-size: 1.5vw;}
}

/*Media Query Ipad Portrait General*/
@media (max-width: 1000px) {

/* BUTTON ENTER */
.home .content_login .content_elements .content_buttons .button.enter:hover{background: var(--custom-dark-green) !important;}
.home .content_login .content_elements .content_buttons .button.signup:hover{background: var(--custom-darker-green) !important;}
.button.enter:hover{background-color: var(--custom-darker-green) !important;}

/* BUTTON FIX */
.button_fix{padding: 0 20px;}

	.button_fix .button.enter{width: 100%;}

	/*Delete logo*/
	.edit_pet .edit_gallery_slider .item .delete:hover svg circle{fill: var(--custom-warn);}
}

/*Media Query Ipad Portrait General*/
@media (max-width: 750px) {

	/*Add image item*/	
	.edit_pet .add_image label{gap: 20px;}
		.edit_pet .add_image label h3{font-size: 1rem; font-weight: 400;}
		.edit_pet .add_image label .logo{width: 55px; height: 55px;}

	/*Loading image item*/
	.edit_pet .loading_item{height: 103px;}
		/*Counter*/
		.edit_pet .loading_item .progress_count{font-size: 1rem;}
		/*Progress Bar*/
		.edit_pet .loading_item .loading_bar_container{height: 10px;}
		
	/*Lost report*/
	.edit_pet .lost_report{justify-content: center; align-items: center; border: 2px solid var(--dark-gray02); background-color: var(--soft-gray02); border-radius: 12px; margin-top: 25px; min-height: 75px; padding: 20px; cursor: pointer;}
		.edit_pet .lost_report .report_content{width: 215px; gap: 20px;}
			.edit_pet .lost_report .report_content p{font-size: 1rem;}
			.edit_pet .lost_report .report_content .item_image svg{width: 30px;}

	/*Delete item*/
	.edit_pet .edit_gallery_slider .item .delete{top: -8px; left: -8px;}

	/* Gallery Slider */
		.edit_pet .edit_gallery_slider .item{padding: 15px 8px 0px;}
			/*Dots*/
			.edit_pet .slick-dots{bottom: -35px;}

			.edit_pet .slick-dots li button{width:10px; height:10px;}

			/*Loading image item*/
			.edit_pet .edit_gallery_slider .item .item_image .loading_bar_container .progress_count{font-size: 2vw; top: 250%;}
	/* Behaviour Slider */
		/* Item */
		.profile_detail .content_slider .item{margin: 0 8px; max-width: calc((500/400) * 225px);}

	/* Gallery Slider */
		.profile_detail .gallery_slider .item{height: 100%; padding: 0; margin: 0 8px;}

		.profile_detail .slick-dots li button{width:10px; height:10px;}
			
}