/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Raleway:100,400,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan&display=swap');

/*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/


/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(font-awesome.min.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(swiper.min.css);
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
     box-sizing: border-box !important;
}

.container {
     /* max-width: 1170px; */
	max-width: 98%;
	margin: 0 auto;
	/* padding: 20px; */
	padding: 20px;
}

html {
     scroll-behavior: smooth;
}

body {
     color: #666666;
     font-size: 14px;
     font-family: 'Poppins', sans-serif;
     line-height: 1.80857;
     font-weight: normal;
}



a {
     color: #1f1f1f;
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     font-weight: normal;
     line-height: normal;
     color: #111111;
     margin: 0
}

h1 {
     font-size: 24px;
}

h2 {
     font-size: 22px;
}

h3 {

	font-size: 1.8em;
    color: #000;
    line-height: 50px;
}

h4 {
     font-size: 16px
}

h5 {
     font-size: 14px
}

h6 {
     font-size: 13px
}

.textAlignRight{
	text-align: right;
}

.paddingLeft20{
	padding-left: 20px;
}

input,
.ant-input {
    caret-color: #000;
}

.backgroundBrandLight{
	background-color: #E6F1FB !important;
}

.ant-picker-outlined:hover {
    border-color: #0EA5E9 !important;
    background-color: #E6F1FB !important;
}

.ant-picker-outlined.ant-picker-status-error:not(.ant-picker-disabled) {
    background: #E6F1FB;
    border-width: 0px;
    border-style: none;
}

.ant-select-selector{
	border: none;
	box-shadow: none !important;
}

.ant-select-selection {
  background-color: #E6F1FB !important; 
}

.ant-picker-input{
	background-color: #E6F1FB !important;
}

.ant-select-selection-wrap {
  background-color: #E6F1FB !important; 
}

.ant-modal-content{
	/* background-color: #9ad253 !important; */
	margin-top: 24px;
}

.ant-modal-header p {
	/* background-color: #9ad253 !important; */
	font-size: 22px !important;
	font-weight: bold;
}

.photoAnimalThumbnail {
  width: 220px;
  height: 50px;
  border-radius: 10%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.menoAnimalThumbnail{
    margin-top: -10px;
    margin-bottom: 10px;	
}

.animal-wrapper {
	display: flex;
	flex-direction: column;  /* Forces stacking image (top) then icon (bottom) */
	/* align-items: center; */
	flex-wrap: wrap; /* Important if you have multiple lines */
	/* align-content: flex-start; /* Prevents stretching and removes bottom space */
}


.width100per100{
	width: 100%;
}

.animal-remove-icon {
	display: inline-block;
	margin-top: 3px;
	cursor: pointer;
	font-size: 16px;
	color: #d8889d  !important;
	/* Transition for color + scale */
	transition: color 0.25s ease, transform 0.25s ease;
}

.animal-remove-icon:hover {
	color: red  !important; /* turns red on hover */
	transform: scale(1.05); /* small zoom effect */
}

.clinic-visit:hover {
	color: blue  !important; /* turns red on hover */
	transform: scale(1.05); /* small zoom effect */
}

.clinic-visit {
	display: inline-block;
	margin-top: 3px;
	cursor: pointer;
	font-size: 16px;
	color: #0dcaf0  !important;
	/* Transition for color + scale */
	transition: color 0.25s ease, transform 0.25s ease;
}

.btnModalProfileIdentity{
    width: 50%;
   	background-color: rgb(9, 164, 232);
    font-size: 22px;
    font-weight: bold;
    height: 40px;
    border-radius: 10px;
	color: #fff !important;
	margin-top: 20px;
}

.btnModalProfileIdentity:hover {
    width: 50%;
    background-color: #00B063;
	color: #000 !important;
}

.borderBrandLight{
	border: 1px solid #0EA5E9;
}

.backgroundGreen01{
	background-color: #2eb34c;
	padding-top: 5px !important;
}

.backgroundGreen{
	background-color: #0EA5E9;
}

.backgroundBlack{
	background-color: #000;
}

.backgroundOlive{
	background-color: #b6ef6d;
}

.backgroundInactive01{
	background-color: #f5dff0;
}

.backgroundInactive02{
	background-color: #e5dfc0;
}

.backgroundInactive03{
	background-color: #f5ede3;
}

.backgroundEtablissement01{
	background-color: #2beded;
}

.backgroundAddAnimaux01{
	background-color: #c8e0ce;
}

.backgroundRed{
	background-color: #C1FF72;
}

/* Placeholder text for Ant Design Select */
.customAntselect .ant-select-selection-placeholder {
    color: #444 !important;       /* change color */
    /* font-weight: 600 !important;  make bold */
    opacity: 1 !important;        /* make it more visible */
}

.custom-select:hover {
	background-color: #E6F1FB !important;
}

.custom-select-rounded {
	border-radius: 10px !important; /* Adjust as needed */
	height: 40px;
	background-color: #E6F1FB !important;
	border: none;
}

/* Style for the checked checkbox background */
input[type="checkbox"] {
  accent-color: #0EA5E9; /* Brand blue for checked state */
}


input[type="checkbox"] {

  /* Remove default browser styles if necessary */
  /* appearance: none; */
  /* -webkit-appearance: none; */
  /* Add other styling like border, size, etc. */
  background-color: #E6F1FB !important;
  border: 1px solid #000;
  border-radius: 3px;
  height: 20px;
}

/* Style for the checked checkbox background */
input[type="checkbox"]:checked {
  background-color: #000; /* Green for checked state */
  border: 1px solid #000;
}

.ant-picker-outlined{
  border: 0px !important;
  box-shadow: none !important;	
}

.ant-select-focused .ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active,
.ant-select-open .ant-select-selector {
  border: 0px !important;
  box-shadow: none !important;
}

.birthdateField{
	margin-left: 0%;
}

.birthdateField > div {
    padding-top: 2%;
}

.marginTop1percent {
    padding-top: 1%;
}

.marginTop2percent {
    padding-top: 2%;
	margin-bottom: -10px;
}

.birthdateField .dateField{
    padding-top: 1%;
}

.invalid-class {
    margin-top: 3%;
	margin-left: 0%;
}

.ant-picker{
	width: 100%;
}

.ant-modal{

}

/* You might also need to target the panel itself */
.ant-picker {
	background: #E6F1FB;
	border-bottom: #0EA5E9 solid 1px;
    color: black;
}

/* Radio oPtions like checkbox */
.checkbox-like-radio .ant-radio-inner {
    width: 16px;
    height: 16px;
    border-radius: 3px !important; /* square like checkbox */
}

.checkbox-like-radio .ant-radio-inner::after {
    border-radius: 3px !important;
}

.checkbox-like-radio.ant-radio-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ant-radio-checked .ant-radio-inner {
    background-color: #1677ff;
    border-color: #1677ff;
}

.checkbox-grid .ant-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Desktop: 3 columns */
.checkbox-grid .ant-checkbox-group-item {
    width: 30%;
    display: flex;
    align-items: center;
    font-size: 18px;
}

/* Bigger checkbox */
.checkbox-grid .ant-checkbox-inner {
    width: 20px;
    height: 20px;
}
.checkbox-grid .ant-checkbox-inner::after {
    width: 12px;
    height: 12px;
}

/* Tablet: 2 columns */
@media (max-width: 992px) {
    .checkbox-grid .ant-checkbox-group-item {
        width: 45%;
    }
}

/* Mobile: 1 column */
@media (max-width: 576px) {
    .checkbox-grid .ant-checkbox-group-item {
        width: 100%;
    }
}


.profilePhotoContainer{
	width: 150px;
	height: 180px;
	border-radius: 5%; /* Makes a circular image */
	display: block;
	margin: 10px auto;
	object-fit: cover;
	border: 3px solid #eee;
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
	transition: transform 0.3s ease;
	transform: scale(1.05);
	max-width: 150px;
	max-height: 180px;
}

.profilePhotoVetoList{
	width: 90px;
	height: 70px;
	border-radius: 10%; /* Makes a circular image */
	display: block;
	margin: 10px auto;
	object-fit: cover;
	border: 0px;
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
	transition: transform 0.3s ease;
	transform: scale(1.05);
	max-width: 90px;
	max-height: 90px;
	margin-left: 1%;
}

.listVetoLine{
	width: 100%;
}

.listVetoImg{
	max-width: 90px;
	max-height: 70px;
    margin-top: 6px;
    margin-left: 20px;
	min-width: 53px;
}

.profilePhotoContainerModal{
	/* width: 150px; */
	/* height: 150px; */
	/* border-radius: 30%; Makes a circular image */
	display: block;
	margin: 5% auto;
	object-fit: cover;
	border: 3px solid #eee;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
	transform: scale(1.05);
	max-width: 90%;
	max-height: 350px;
	height: auto;
}

.searchButtonDiv {
	padding-top: 0.7%;
    cursor: pointer;
    text-decoration: none; /* If styled like a link */
}

.searchButtonDiv:hover {
    background-color: #FFC71C;
}

.rounded10{
	border-top-right-radius: 10px  !important;; 
	border-top-left-radius: 10px  !important;;
    border-bottom-right-radius: 10px  !important;;
    border-bottom-left-radius: 10px  !important;;
}

.ant-form-item-explain-error {
    position: absolute;
    left: 0;
    bottom: -5px;
    white-space: nowrap;
}

.borderRadius18 {
	border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.borderRightRadius18 {
	border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.borderLefttRadius18 {
	border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}


.customLabel01 {
	margin-left: 0px;
	margin-bottom: 10px;
}

.padding20px{
	padding: 20px;
}

.paddingLeft20px{
	padding-left: 20px;
}

.paddingLeft30px{
	padding-left: 30px;
}

.paddingLeft25px{
	padding-left: 25px;
}

.width100{
	width: 100% !important;
}

.colorWhite{
	color: #fff;
}

.colorBlack{
	color: #000;
}

.borderNone{
	border: none;
}

.sendBtnHoverBlack:hover {
	background-color: #0F172A;
	color: #fff;
}

.sendBtnHoverGreen:hover {
	background-color: #0EA5E9;
}

.colorGreen{
	color: #146f12
}

.vetos .card-body{
	padding: 1.5%;
}

.vetos .card-title {
    margin-bottom: 0px;
}

.smallTitleGreen{
	color: #146f12 !important;
	font-size: 16px;
	font-family: 'Verdana', 'Tahoma';
	font-weight: bold;
}

.smallGreen{
	color: #146f12;
	font-size: 18px;
	font-family: 'Verdana', 'Tahoma';

}

.smallBlack18px{
	color: #0F172A !important;
	font-size: 18px !important;
	font-weight: normal !important;
	text-align: justify !important;
}

.smallBlack14px{
	color: #0F172A !important;
	font-size: 14px !important;
	font-family: 'Verdana', 'Tahoma' !important;
	font-weight: normal !important;
}

.smallTitleBlack{
	color: #000;
	font-size: 16px;
	font-family: 'Verdana', 'Tahoma';
	font-weight: bold;
}


.smallBlack{
	color: #0F172A;
	font-size: 14px;
	font-family: 'Verdana', 'Tahoma';
}

.marginTop25px {
	margin-top: 25px;
}

.marginTop10px {
	margin-top: 10px;
}

.marginBottom5{
	margin-bottom: 5px;
}

.marginBottom10{
	margin-bottom: 10px;
}

.marginTop20{
	margin-top: 20px;
}

.marginTop2{
	margin-top: 2px;
}

.textJustifyCenter{
	justify-content: center;
}
/* Language flags (public/img/flags/*.svg) are plain rectangles with a white
   background — several (en.svg, the England/St George's cross, notably) go
   nearly invisible on a white header with nothing to contain them, leaving
   just their foreground mark floating. A thin border + a touch of rounding
   gives every flag a visible edge regardless of its own background color. */
.flag{
    width: 23px;
    height: 17px;
    object-fit: cover;
    margin-right: 4px;
    border: 1px solid #D9E1E8;
    border-radius: 3px;
    vertical-align: middle;
}

.paddingTop4px{
	padding-top: 4px;
}


.profileLanguageSelector .ant-select-selector {
    background-color: initial !important;
    width: 250px !important;
	height: 40px !important;
	border: 1px solid !important;
	border-color: #0EA5E9 !important;
}

/* Language selector*/
.languageSelector .ant-select {
  width: 100%;
  min-width: 90px;
}

.languageSelector{
	margin-right: 25px;
}

.languageSelector .ant-select-selector {
	background-color: #F1F5F9 !important;
	height: 30px !important;
	border: 1px solid #E2E8F0 !important;
}

.languageSelector .ant-select-selection,
.languageSelector .ant-select-selection-wrap {
	background-color: #F1F5F9 !important;
}

.languageSelector {
  display: flex;
  align-items: center;
  max-width: 140px;
}

.profilePaymentMethodIcon{
	height: 50px !important;
}

.ant-select-dropdown {
  z-index: 2000;
}

.header,
.header-row,
.nav-actions {
  overflow: visible;
}

/* Phone with flag */
.phoneRow {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 6px;
}

.phoneFlagSelect {
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  flex: 0 0 52px;
}

.phoneFlagSelect .ant-select-selector {
  padding: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  justify-content: center;
}

.phoneFlagImg {
  width: 20px;
  height: auto;
  display: block;
}

.phoneCode {
  white-space: nowrap;
  min-width: 40px;
  font-size: 14px;
}

.phoneInput {
  flex: 1;
  min-width: 0;
}

/* Align label with flag */
.phoneFormItem .ant-form-item-label {
  padding-left: 0 !important;
}

/* Move label left to match flag edge */
.phoneFormItem .ant-form-item-label > label {
  margin-left: -4px;
}

.phoneFlagSelect:hover,
.phoneFlagSelect:focus-within {
  cursor: pointer;
}

/* --- Profile - speciality */
.specialityFormItem .ant-form-item-label {
  padding-bottom: 4px;
}

.specialityRow {
  background: #E6F1FB;
  border-radius: 10px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.specialityLabel {
  font-size: 13px;
  font-weight: 500;
}

.specialitySelect {
  width: 100%;
}

.specialitySelect .ant-select-selector {
  padding: 0 !important;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.specialitySelect .ant-select-selection-overflow {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.specialitySelect .ant-select-selection-item {
  white-space: nowrap;
}


/* Hide scrollbar (mobile clean) */
.specialitySelect .ant-select-selection-overflow::-webkit-scrollbar {
  display: none;
}

/* Individual chip */
.specialitySelect .ant-select-selection-item {
  white-space: nowrap;
  background: #fff;
  border-radius: 8px;
  margin-right: 6px;
}

/* Profile - veto type */
.vetoTypeRow {
  display: flex;
  gap: 6%;
  width: 100%;
}

/* Brand-tint box */
.vetoTypeOption {
  background: #E6F1FB;
  border-radius: 10px;
  height: 40px;
  flex: 1;
  display: flex;
  align-items: center;      /* vertical centering */
  padding-left: 12px;
}

/* Radio itself */
.checkbox-like-radio {
  display: flex;
  align-items: center;
  line-height: 1;
}

input:-webkit-autofill,
/*input:-webkit-autofill:hover, */
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 60px #E6F1FB inset !important;
    -webkit-text-fill-color: #0F172A !important;
    caret-color: #0F172A !important;
}

input:focus {
    caret-color: #0F172A;
}


input::-webkit-input-placeholder{
    color:#666666 !important;
}

input::-moz-placeholder {
    color:#666666 !important;
}

input[type=text]:not(#signInEmailInput):hover {
    background-color: #FFC71C;
}

/* ===== 1. Kill Chrome autofill background ===== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #E6F1FB inset !important;
    -webkit-text-fill-color: #0F172A !important;
    caret-color: #0F172A !important;
    transition: background-color 9999s ease-out 0s;
}

/* Fix autofill yellow background & caret visibility */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #E6F1FB inset !important;
    -webkit-text-fill-color: #0F172A !important;
    caret-color: #0F172A !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ===== 2. Ant Design wrapper (email + password) ===== */
.ant-input-affix-wrapper.backgroundBrandLight,
.ant-input-affix-wrapper.backgroundBrandLight:hover,
.ant-input-affix-wrapper-focused.backgroundBrandLight,
.ant-input-affix-wrapper.backgroundBrandLight:focus,
.ant-input-affix-wrapper.backgroundBrandLight:focus-within {
    background-color: #E6F1FB !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ===== 3. Normal inputs (email field) ===== */
.ant-input.backgroundBrandLight,
.ant-input.backgroundBrandLight:focus,
.ant-input-focused.backgroundBrandLight {
    background-color: #E6F1FB !important;
	/* background-color: rgb(9, 164, 232) !important;  */
    box-shadow: none !important;
}

.gray{
	color: #787575;
	font-size: 12px;
}

.columnLabelText{
	width: 80%;
	text-align: left;
}
/* 
* {
  outline: 1px solid rgba(255,0,0,.1);
}
*/

/* ===== 4. Inner input must stay transparent ===== */
.ant-input-affix-wrapper input {
    background-color: transparent !important;
}

/* ===== 4b. backgroundBlue Input.Password wrapper (Sign Up: Password /
   Confirm password) — antd's own :hover / :focus-within background
   otherwise repaints the wrapper white, undoing the resting blue set by
   the plain .backgroundBlue class. Hover goes to a darker shade of the
   same brand blue (not yellow), with white text/placeholder/eye-icon so
   it stays readable. ===== */
.ant-input-affix-wrapper.backgroundBlue,
.ant-input-affix-wrapper.backgroundBlue:hover,
.ant-input-affix-wrapper-focused.backgroundBlue,
.ant-input-affix-wrapper.backgroundBlue:focus,
.ant-input-affix-wrapper.backgroundBlue:focus-within {
    background-color: var(--blue) !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.ant-input-affix-wrapper.backgroundBlue:hover,
.ant-input-affix-wrapper.backgroundBlue:focus-within {
    background-color: #0284C7 !important;
}

/* Text color is white at rest too (not just on hover/focus), matching the
   plain .backgroundBlue inputs (Name/First name/Email) — so hovering the
   Password/Confirm password fields has no effect on the text color. */
.ant-input-affix-wrapper.backgroundBlue input.ant-input {
    color: #fff !important;
}

.ant-input-affix-wrapper.backgroundBlue input.ant-input::placeholder {
    color: rgba(255, 255, 255, 0.85) !important;
}

.ant-input-affix-wrapper.backgroundBlue .ant-input-suffix {
    color: #333;
}

.ant-input-affix-wrapper.backgroundBlue:hover .ant-input-suffix,
.ant-input-affix-wrapper.backgroundBlue:focus-within .ant-input-suffix {
    color: #fff;
}


.alignCheckbox01 {
    padding-left: 4%;
    padding-top: 2%;
}


.textAlignCenter{
	text-align: center;
}

.singleFieldManager > div {
  height: 45px;
  padding-left: 5%;
  margin-bottom: 10px;

  display: flex;
  align-items: center;   /* vertical centering */
}


.radio-tile {
    display: flex;
    align-items: center;
    padding-left: 12px;   /* same visual inset as inputs */
}


/* Left block */
.singleFieldManager .dataDiv {
    flex: 1 1 auto;           /* allows shrink */
    min-width: 0;             /* REQUIRED for ellipsis */
    border-color: #0EA5E9 !important;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Right arrow block */
.buttonDiv {
    flex: 0 0 6em;             /* fixed width, no shrink */
    width: 6em;
}

/* Button behavior */
.buttonDiv {
    border: none !important;
    cursor: pointer;
}

/* Utility */
.textAlignLeft {
    text-align: left;
}

.identification {
    padding-left: 3%;
    margin-top: 3%;
	margin-bottom: 3%;
}

.buttonDiv:hover{
	background-color: #e8c333 !important;
}

.singleFieldManager > div{
    height: 45px;
    padding-left: 1%;
	margin-bottom: 10px;
}

.arrowWidth{
	width: 20%;
	cursor: pointer;
}

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

.myh2{
	font-size: 16px;
}

.displayNone{
	display: none;
}

.search_box input[type=text] {
	margin-top: 9%;
    width: 135% !important;
}

.search_box input::-webkit-input-placeholder{
	-webkit-text-fill-color: #0F172A !important; 
}

.marginTop5px{
	margin-top: 5px;
}

.visibleNone{
	visibility: hidden;
}

.formError{
	color: red;
	padding-left: 4%;
}

.textRed{
	color: red;
}

.letterSpacing5{
	letter-spacing: 5px;
}

.fontWeight{
	font-weight: bold
}

.fontWeightBold{
	font-weight: bold
}

.marginLeftRight2percent{
	margin-left: 2%;
	margin-right: 2%;
}

#animalPhotoId{
	/* max-width: 98%; */
	/* max-height: 100%; */
}

button[disabled]{
  border: 1px solid #999999;
  background-color: none;
  color: #666666;
}

button[disabled]:hover{
  border: 1px solid #999999;
  background-color: #none;
  color: #666666;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
     color: #212121;
     text-decoration: none!important;
     opacity: 1
}

button:focus {
     outline: none;
}

ul,
li,
ol {
     margin: 0px;
     padding: 0px;
     list-style: none;
}

p {
     margin: 0px;
     font-weight: 500;
     line-height: 24px;
}

a {
     color: #222222;
     text-decoration: none;
     outline: none !important;
}

a,
.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

/*
img {
     max-width: 100%;
     height: auto;
}
*/

.profile-img {
    border-radius: 50%;
    width: 100px;
    height: 100px !important;
    object-fit: cover;
}

.height15{
	height: 15px;
}

.width15{
	height: 15px;
}

.height40{
	height: 40px;
	padding-bottom: 1px !important;
}


.height45{
	height: 45px;
	padding-bottom: 1px !important;
}

.ant-form-item {
	margin-bottom: 15px !important;
}

.marginTop10{
	margin-top: 10px;
}

:focus {
     outline: 0;
}

.btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}

.lead {
     font-size: 18px;
     line-height: 30px;
     color: #767676;
     margin: 0;
     padding: 0;
}

.form-control:focus {
     border-color: #ffffff !important;
     box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.navbar-form input {
     border: none !important;
}

.badge {
     font-weight: 500;
}

blockquote {
     margin: 20px 0 20px;
     padding: 30px;
}

button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}

.full {
     float: left;
     width: 100%;
}

.full {
     width: 100%;
     float: left;
     margin: 0;
     padding: 0;
}


/**-- fontcing section --**/


/*---------------------------- preloader area ----------------------------*/

.loader_bg {
     position: fixed;
     z-index: 9999999;
     background: #fff;
     width: 100%;
     height: 100%;
}

.loader {
     height: 100%;
     width: 100%;
     position: absolute;
     left: 0;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
}

.loader img {
     width: 280px;
}


/*-- header area --*/


/*--------------------------------------------------------------------- top banner area ---------------------------------------------------------------------*/


/*-- navigation--*/
.navigation.navbar {
     padding: 0;
}

.navigation.navbar-dark .navbar-nav .nav-link {
     padding: 7px 0px 0px 0px;
     margin: 0 22px;
     color: #010101;
     font-size: 14px;
     line-height: 20px;
     font-weight: 500;
     text-transform: uppercase;
     border-bottom: #FFDE59 solid 2px;
}

.navigation.navbar-dark .navbar-nav .nav-link:focus,
.navigation.navbar-dark .navbar-nav .nav-link:hover {
     color: #000;
     border-bottom: #000 solid 2px;
}

.navigation.navbar-dark .navbar-nav .active>.nav-link,
.navigation.navbar-dark .navbar-nav .nav-link.active,
.navigation.navbar-dark .navbar-nav .nav-link.show,
.navigation.navbar-dark .navbar-nav .show>.nav-link {
     color: #0EA5E9;
     border-bottom: #0EA5E9 solid 3px;
}

.navbar-expand-md .navbar-nav {
     padding-right: 10px;
}

.navigation .navbar-nav {
  flex-wrap: nowrap;
}

.nav-link {
  white-space: nowrap;
}

.header {
    width: 100%;
    padding: 10px 0;     /* modern SaaS header: tight vertical rhythm, no forced min-height */
    background: #0EA5E9;
	position: relative;
}

/* Tighter inner spacing for the header only (doesn't affect .container elsewhere on the site). */
.header .container {
	padding: 6px 20px;
}

/* Tighter gap between the logo/nav row and the search bar row */
.header .marginTop10 {
	margin-top: 6px;
}

.headerDashboard {
    width: 100%;
    /* min-height: 150px;*/   /* ensures green bar is never too small */
    padding-bottom: 40px; /* creates space for the SearchBox */
    padding: 5px 0px 5px 0px;
    background: #0EA5E9;
	position: relative;
	/* top: 0; */
    /* z-index: auto; */
}


/* Header shrink.
   No max-width here: .header-row fills .header .container exactly (which is
   the same .container class, same 98vw/padding, used everywhere else on the
   page — including the hero). That's what lines the logo up with the hero
   text's left edge, and — since justify-content: space-between pushes the
   CTA button all the way to this row's own right edge — the CTA's right
   edge up with the hero photo's right edge, both edges of both rows landing
   on the exact same container box. (An earlier version capped this row's
   width to shrink the logo-to-nav gap; that fought the edge-alignment goal,
   so the gap is accepted as wider on very wide screens instead.) */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Left side shrinks if needed */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto; /* 👈 can shrink */
  min-width: 0;
}

/* Right side gets remaining space */
.header-right {
  display: flex;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;

}

/* Logo */
.logo-slogan {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Logo sizing (icon + wordmark) is self-contained and fully responsive in
   the Logo component itself (fluid clamp(), scales with viewport width) —
   see src/components/Logo.js. The fixed-breakpoint rules that used to live
   here only ever covered the icon <img>, not the wordmark, and only applied
   to the Header instance (Footer doesn't use .logo-wrap), which is why the
   wordmark kept overflowing on phones even after the icon shrank. */

/* Slogan block */
.slogan-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 768px) {
  .slogan-wrap {
    display: none; /* or keep only image */
  }
}

@media (max-width: 992px) {
  .slogan {
    opacity: 0;
    pointer-events: none;
  }
}

.slogan{
	padding-top: 2px;
	transition: opacity 150ms ease;
}
.slogan img{
	height: 34px;
	
}


/* Navbar */
.navbar {
  position: relative;
  z-index: 1000; /* base layer */
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-collapse {
  display: flex;
  align-items: center;
}

/* Right actions wrapper */
/* Wrapper becomes positioning context */
.nav-wrapper {
  position: relative;
}

/* Burger stays inline */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Mobile fine-tuning */
@media (max-width: 992px) {
  .nav-actions {
    gap: 10px;
  }
}

@media (max-width: 992px) {
  .nav-actions svg,
  .nav-actions img {
    width: 20px;
    height: 20px;
  }
}

/* Burger button */
.burger-btn {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.burger-btn span {
  display: block;
  height: 3px;
  width: 100%;
  background: #000; /* header is green */
  margin: 6px 0;
  border-radius: 2px;
}

/* Mobile */
@media (max-width: 992px) {
  .burger-btn {
    display: block;
  }

  @media (max-width: 992px) {
  .navbar-collapse {
    position: absolute;

    /* 🔑 stretch exactly like header */
    left: 0;
    right: 0;

    top: 100%;           /* just under header */
    width: 100%;

    background: #ffffff;
    border-radius: 0 0 12px 12px;

    transform: scaleY(0);
    transform-origin: top;
    transition: transform 180ms ease;

    z-index: 3000;
  }

  .navbar-collapse.open {
    transform: scaleY(1);
  }
}

/* Desktop */
@media (min-width: 993px) {
  .navbar-collapse {
    position: static;
    transform: none;
    display: flex;
  }
}

/* Mobile */
@media (max-width: 992px) {
  .navbar-collapse {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    transform: scaleY(0);
  }

  .navbar-collapse.open {
    transform: scaleY(1);
  }
}


  .navbar-collapse.open {
    transform: scaleY(1);
  }

  .navbar-collapse.open {
    transform: scaleY(1);
  }
}

/* Mobile menu = header width */
@media (max-width: 992px) {
  .mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background: #0EA5E9;
    border-radius: 0 0 12px 12px;

    transform: scaleY(0);
    transform-origin: top;
    transition: transform 180ms ease;

    z-index: 3000; /* above search */
  }

  .mobile-menu.open {
    transform: scaleY(1);
  }
}

.searchbox,
.marginTop10 {
  position: relative;
  z-index: 1;
}

/* ---------------- Responsive search */
/* COLORS */
:root {
  --green: #0EA5E9;
  --yellow: #FFE066;
  --black: #000;
}

/* Mobile trigger */
.search-toggle {
  display: none;
  width: 100%;
  background: var(--yellow);
  border: none;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}


/* Desktop: panel is visible */
.search-panel {
  display: flex;
  gap: 10px;
  background: var(--yellow);
  padding: 12px;
  border-radius: 999px;
}

/* Fields */
.search-field {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 999px;
  padding: 0 12px;
  flex: 1;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 14px;
}

/* Vertical separator */
.search-field.with-separator::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.25);
}

  .search-separator {
    display: block;
    width: 1px;
    height: 36px;
    background: rgba(0, 0, 0, 0.25);
    margin: 0 14px;
    flex-shrink: 0;
  }


@media (max-width: 992px) {
	.search-separator {
	  display: none;
	}
	  
  .spaceBeforeIcon {
	  display: none;
  }
  
  .spaceAfterNotificationBell{
	   display: none;
  }
}


/* Submit */
.search-submit {
  background: var(--black);
  color: white;
  border: none;
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

/* Wrapper itself must NOT add spacing */
.responsive-search {
  position: relative;
}

/* Panel is collapsed by default */
.search-panel {
  max-height: 0;
  overflow: hidden;

  transition: max-height 220ms ease, opacity 180ms ease;
  opacity: 0;
}

/* Open state */
.search-panel.open {
  max-height: 300px; /* large enough to fit content */
  opacity: 1;
}

/* ================= MOBILE ================= */
@media (max-width: 992px) {
  .search-panel {
    flex-direction: column;

    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;

    transition: max-height 220ms ease, opacity 180ms ease;
  }

  .search-panel.open {
    max-height: 300px;
    padding: 12px;
    opacity: 1;
    border-radius: 20px;
    margin-top: 10px;
	margin-bottom: 20px;
  }
}

  .spaceBeforeIcon {
	  width: 15px; 
  }
  
  .spaceAfterNotificationBell {
	  width: 5px; 
  }
  
/* ================= DESKTOP SEARCH ================= */
@media (min-width: 993px) {
  .search-toggle {
    display: none; /* no 🔍 button */
  }

  .search-panel {
    display: flex;
    max-height: none;
    opacity: 1;
    transform: none;
    overflow: visible;
    margin-top: 0;
  }
  
}

/* Mobile fake input */
.search-toggle {
  width: 100%;
  background: var(--yellow);
  border: none;
  border-radius: 10px;
  padding: 5px 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

/* Icon */
.search-toggle .search-icon {
  font-size: 18px;
}

/* Fake placeholder text */
.search-toggle .search-placeholder {
  color: #444;
  font-size: 15px;
  opacity: 0.8;
}

/* Desktop: hide the fake input */
@media (min-width: 993px) {
  .search-toggle {
    display: none;
  }
}

.search-toggle:active .search-placeholder {
  opacity: 1;
}

/* Wrapper spans header */
.search-wrapper {
  width: 100%;
  margin: 0 auto;
}

/* Panel */
.search-panel {
  display: flex;
  align-items: center;
  gap: 10px;

  background: var(--yellow);
  padding: 5px;
  border-radius: 10px;   /* 👈 as requested */
  width: 100%;
}

/* Fields */
.search-field {
  display: flex;
  align-items: center;
  /* gap: 10px; */
  width: 100%;
  border-radius: 10px;
  /* padding: 8px 12px; */
  flex: 1;
}

/* Yellow background
.backgroundBrandLight {
  background: var(--yellow);
} 
*/

/* Inputs */
.search-field input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 15px;
}

/* Icons */
.search_icon,
.map_icon,
.fa-map-signs {
  font-size: 2em;
  color: #000;
}



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

/* Change dropdown arrow color */
.notifications-dropdown
  .ant-dropdown-arrow::before {
  background: rgb(253, 221, 88);
}

/* Ensure dropdown background matches */
.notifications-dropdown
  .ant-dropdown-menu {
  background: rgb(253, 221, 88);
}

.notifications-dropdown
  .ant-dropdown-arrow::after {
  border-color: rgb(240, 210, 80);
}

.notifications-dropdown {
  z-index: 2000 !important;
}


.notificationsRigth{
	display: flex;
	alignItems: center;
	gap: 16px;
}

.notification-section {
    display: block;
    margin: 4px 0 2px;
    font-size: 12px;
    text-transform: uppercase;
    color: #999;
}

.notifications-popup {
  width: 360px;
  max-width: calc(100vw - 24px);
  padding: 12px;
  box-sizing: border-box;
  border-radius: 8px;
}

.notifications-popup a {
  display: block;
  white-space: normal;
  word-break: break-word;
}


.notifications-dropdown .ant-dropdown-arrow::before {
  background: #ffffff;
}

.notifications-dropdown .ant-dropdown-arrow::after {
  border-color: #ffffff;
}


.notifications-popup {
  border-radius: 8px;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

.notifications-popup .ant-list-item {
  padding: 0;
  border-bottom: 1px solid #f0f0f0;
}

.notifications-popup .ant-list-item:last-child {
  border-bottom: none;
}

.notifications-popup a:hover {
  background-color: #f5f5f5;
}

.titleStyle{
	text-align: center !important;
	/* font-weight: bold; */
	color: var(--navy);
	font-size: 16px;
}

/* Sticky stack */
.sticky-stack {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #0EA5E9;
  /* margin-bottom: 3%; */
}

/* Header */
.stick {
  /* position: sticky; */
  /* top: 0;  */
  /* index: 101;  */
}

/* Title */
.stickTitle {
  /* position: sticky; */
  /* top: var(--header-height); */
  /* z-index: 100; */
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  border-bottom: 0.2px solid var(--blue);
}

.page-content {
  margin-top: 20px; /* only visual breathing space */
}

.main-layout{
  background-color: #f7f8fa;
}

.App{
  background-color: #fff;
  /* margin-top: 2%; */
}

.afterSticky {
}

.itemStyle {
	height: 408px;
}

/** banner section **/

.banner_main {
     position: relative;
	 top: 0px;
}

.banner .carousel-indicators li {
     width: 20px;
     height: 20px;
     border-radius: 10px;
     background: #000;
}

.banner .carousel-indicators .active {
     background-color: #0EA5E9;
}

.booking_ocline {
     position: absolute;
     width: 100%;
     top: 50%;
     transform: translateY(-50%);
}

.book_room {
     background-color: #0F172Ac7;
     padding: 30px 35px;
     border-left: #0EA5E9 solid 5px;
}

.book_room h1 {
     font-weight: 500;
     font-size: 30px;
     line-height: 30px;
     color: #fff;
     padding-bottom: 20px;
     text-transform: uppercase;
     text-align: center;
}

.book_now span {
     display: block;
     color: #fff;
     font-size: 18px;
     padding-bottom: 5px;
}

.book_now .online_book {
     width: 100%;
     height: 50px;
     border: #fff solid 1px;
     background-color: transparent;
     color: #fff;
     padding: 0 10px;
     padding-right: 61px;
     margin-bottom: 25px;
     position: relative;
}

.date_cua {
     position: absolute;
     width: 29px;
     height: 29px;
     top: 48px;
     background-repeat: no-repeat;
     right: 30px;
}

.book_btn {
     background-color: #0EA5E9;
     max-width: 189px;
     width: 100%;
     margin: 0 auto;
     padding: 10px 0;
     border-radius: 10px;
     color: #fff;
     font-size: 20px;
     transition: ease-in 0.5s;
     display: block;
}

.book_btn:hover {
     background-color: #fff;
     color: #0EA5E9;
     transition: ease-in 0.5s;
}

.carousel-control-next,
.carousel-control-prev {
     display: none;
}

.carousel-indicators {
     right: inherit;
     bottom: 53px;
     margin-left: 9%;
}


/** end banner section **/

.titlepage {
     text-align: center;
     padding-bottom: 40px;
}

.titlepage h2 {
     font-size: 40px;
     color: #003366;
     line-height: 45px;
     font-weight: bold;
     text-transform: uppercase;
     padding: 0;
}

.titlepage h2::before {
     position: absolute;
     content: "";
     /** background-color: #0EA5E9; **/
     width: 20px;
     height: 4px;
     transform: rotate(-36deg);
}

.titlepage h2::after {
     position: absolute;
     content: "";
     /** background-color: #0EA5E9; **/
     width: 20px;
     height: 4px;
     transform: rotate(-36deg);
     bottom: 10px;
}

.d_flex {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
}

.read_more {
     font-size: 17px;
     background-color: #121212;
     color: #fff;
     padding: 8px 0px;
     width: 100%;
     max-width: 144px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     font-weight: 500;
     border-radius: 10px;
}

.read_more:hover {
     background: #0EA5E9;
     color: #fff;
     transition: ease-in all 0.5s;
}

/** about section **/

.about {
     background-color: #fff;
     padding-top: 0px;
	 margin-top: 0px;
}

.about .titlepage {
     text-align: left;
     padding-bottom: 0;
     max-width: 443px;
     width: 100%;
     float: right;
}

.about .titlepage h2 {
     margin-bottom: 35px;
}

.about .titlepage p {
     font-weight: 400;
     font-size: 17px;
     line-height: 28px;
     padding-bottom: 35px;
}

.about_img {
     margin-right: 40px;
     overflow: hidden;
}

.about_img figure {
     margin: 0;
}

.about_img figure img {
     width: 100%;
     transition: all .5s;
}

.about_img figure img:hover {
     transform: scale(1.2);
}
/** end about section **/

/** our_room section **/

.our_room {
     background-color: #f4f5f7;
     padding: 60px 0 30px 0;
     margin-top: 0px;
}

.our_room .titlepage {
     text-align: center;
}

.our_room .titlepage p {
     color: #121212;
     font-size: 17px;
     margin-top: 20px;
}

.our_room .room {
     text-align: center;
     background-color: #fff;
     margin-bottom: 30px;
     transition: ease-in all 0.5s;
}

.our_room .room .room_img {
     overflow: hidden;
}

.our_room .room .room_img figure {
     margin: 0;
}

.our_room .room .room_img figure img {
     width: 100%;
     transition: all .5s;
}

.our_room .room .room_img figure img:hover {
     transform: scale(1.2);
}

.our_room .room .bed_room {
     padding: 33px 30px;
}

.our_room .room .bed_room h3 {
     color: #121212;
     font-size: 25px;
     line-height: 20px;
     font-weight: 500;
     transition: ease-in all 0.5s;
     margin: auto;
}

#serv_hover:hover .room{
     cursor: pointer;
     box-shadow: 0px 0px 30px rgba(255, 9, 9, 0.15);
     transition: ease-in all 0.5s;
}


/** end our_room section **/


/** gallery  section **/

.gallery {
     padding-top: 60px;
}

.gallery .titlepage {
     text-align: center;
}

.gallery .gallery_img {
     overflow: hidden;
     margin-bottom: 30px;
}

.gallery .gallery_img figure {
     margin: 0;
}

.gallery .gallery_img figure img {
     width: 100%;
     transition: all .5s;
	height: 280px;
}

.gallery .gallery_img figure img:hover {
     transform: scale(1.2);
}


/** end gallery  section **/


/** blog section **/

.blog {
    background: url(../img/blog_bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
	padding: 0px 0% 0px 0%;
    margin-top: 0px;
}

.headerSlogan{
	color: #0F172A !important;
	font-size: 12px;
	font-family: 'Verdana', 'Tahoma';
	white-space: nowrap;
}

.blog .titlepage {
     text-align: center;
}

.blog .titlepage h2 {
     color: #fff;
}

.blog .titlepage p {
     color: #fff;
     font-size: 17px;
     margin-top: 20px;
}

.blog .blog_box {
     text-align: left;
     background-color: #fff;
     margin-bottom: 30px;
     transition: ease-in all 0.5s;
	 border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
}

.blog .blog_box .blog_img {
     overflow: hidden;
}

.blog .blog_box .blog_img figure {
     margin: 0;
}

.blog .blog_box .blog_img figure img {
     width: 100%;
     transition: all .5s;
}

.blog .blog_box .blog_img figure img:hover {
     transform: scale(1.2);
}

.blog .blog_box .blog_room {
     padding: 33px 30px;
     text-align: left;
	 height: 300px;
}

.blog .blog_box .blog_room h3 {
     color: #121212;
     font-size: 25px;
     line-height: 35px;
     font-weight: 500;
     padding-bottom: 5px;
     transition: ease-in all 0.5s;
     margin: auto;
}

.blog .blog_box .blog_room span {
     font-size: 15px;
     color: #ff0909;
     font-weight: bold;
     margin-bottom: 10px;
     display: block;
}

.blog .blog_box .blog_room p {
     font-size: 14px;
     line-height: 20px;
}


/** end blog section **/


/** contact section **/

.contact {
     background: #fff;
}

.main_form .contactus {
    border: #0EA5E9 solid 1px;
    padding: 0 15px;
    margin-bottom: 5px;
    width: 100%;
    height: 40px;
    background: #fff;
    color: #0F172A;
    font-size: 18px;
    font-weight: normal;
    border-radius: 10px;
}

.main_form .textarea {
	 border: #0EA5E9 solid 1px;
     margin-bottom: 25px;
     width: 100%;
     background: #fff;
     color: #0F172A;
     font-size: 18px;
     font-weight: normal;
     padding: 12px 15px 0 15px;
     height: 125px;
	 border-radius: 10px;
}

.main_form .send_btn {
     font-size: 22px;
     transition: ease-in all 0.5s;
     background-color: #0F172A;
     text-transform: uppercase;
     color: #fff;
     padding: 10px 0px;
     max-width: 193px;
     width: 100%;
     display: block;
     margin-top: 30px !important;
     font-weight: 500;
     border-radius: 50px;
}

.main_form .send_btn:hover {
     background-color: #0EA5E9;
     transition: ease-in all 0.5s;
     color: #fff;
}

#request *::placeholder {
     color: #0F172A;
     opacity: 1;
}

.map figure {
     margin: 0;
}

.map figure img {
     width: 100%;
}


/** end contact section **/


/** footer **/

.footer {
     background: #0f1521;
     margin-top: 90px;
     padding-top: 60px;
     text-align: center;
}

.footer h3 {
     font-weight: 600;
     font-size: 25px;
     line-height: 24px;
     text-align: left;
     color: #fff;
     margin-bottom: 15px;
     border-bottom: #0EA5E9 solid 3px;
     padding-bottom: 3px;
     display: table;
}

ul.conta li {
     color: #fff;
     text-align: left;
     padding-bottom: 20px;
     font-size: 16px;
}

ul.conta li i {
     padding-right: 15px;
     text-align: center;
     font-size: 20px;
}

ul.conta li a {
     color: #fff;
}

ul.link_menu li {
     display: block;
     text-align: left;
}

ul.link_menu li.active a {
     color: #0EA5E9;
}

ul.link_menu li a {
     color: #fff;
     font-size: 17px;
     line-height: 28px;
     display: block;
     width: -moz-max-content;
}

ul.link_menu li a:hover {
     color: #0EA5E9;
}

.bottom_form {
     display: flex;
     flex-wrap: wrap;
     margin-top: 32px;
}

.bottom_form h3 {
     font-weight: 600;
     font-size: 20px;
     line-height: 25px;
     text-align: left;
     color: #fff;
     padding-top: 12px;
     margin-right: 93px;
     text-transform: uppercase;
     border: inherit;
}

.bottom_form .enter {
     border: inherit;
     padding: 0px 19px;
     width: 100%;
     height: 45px;
     background: #fffffff2;
     color: #ccc8c8;
     font-size: 17px;
     font-weight: 300;
     float: left;
     margin-bottom: 20px;
}

.sub_btn {
     font-size: 17px;
     transition: ease-in all 0.5s;
     background-color: #fff;
     color: #0EA5E9;
     padding: 8px 0px;
     max-width: 147px;
     width: 100%;
     font-weight: 500;
     text-transform: uppercase;
     height: 47px;
}

.sub_btn:hover {
     background-color: #8449D9;
     transition: ease-in all 0.5s;
     color: #fff;
}

ul.social_icon {
     padding-top: 24px;
     width: 100%;
     float: left;
     text-align: left;
}

ul.social_icon li {
     display: inline-block;
}

ul.social_icon li a {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 27px;
     border-radius: 30px;
     margin: 0 9px;
     color: #fff;
}

ul.social_icon li a:hover {
     color: #0EA5E9;
}

.copyright {
     margin-top: 60px;
     padding-bottom: 20px;
     background-color: #fff;
     /* border: #0EA5E9 solid 3px; */
     border-right: inherit;
     border-left: inherit;
}

.copyright p {
     color: #000;
     font-size: 18px;
     line-height: 22px;
     text-align: center;
     border-top: #a3aec6 solid 1px;
     padding-top: 25px;
     font-weight: normal;
}

.copyright a {
     color: #000;
}

.copyright a:hover {
     color: #0EA5E9;
}


/** end footer **/


/**  inner page css **/
.back_re {
     /* background-color: #FFDE59; */
	 color: #000;
	 border-bottom: 1px solid var(--blue); /* Added bottom border */
	 border-top: 1px solid #fff; /* Added bottom border */
	 margin-top: 11.4%;
}
.back_re .title {
     text-align: center;
}
.back_re .title h2 {
	color: var(--navy);
	font-size: 18px;
	padding: 23px 0;
	/* font-weight: 600; */
	/* text-transform: uppercase; */
	line-height: 0px;
	background-color: white;
}
.margin_0 {
     margin:0 !important;
}

.padding10{
	padding: 10px;	
}

.padding20{
	padding: 20px;	
}

.inner_page .gallery {
     padding-top: 90px;
}
.inner_page .blog {
     margin-top: 90px;
}

.marginTopBottom10{
    margin-top: 10px;
    margin-bottom: 10px;
}

.marginTop10{
    margin-top: 10px;
}

.marginBottom20{
    margin-bottom: 20px;
}

.marginBottom30{
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .ant-form-item-explain-error {
        bottom: -5px;
    }
}

/* HEADER RESPONSIVE*/



/* header-responsive.css */

:root {
    --header-height: 180px;
}

/* Between 992px and 1125px */
@media (max-width: 1125px) {
    :root {
        --header-height: 165px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --header-height: 130px;
    }
}

/* Tablette and mini laptop */
/* Hide slogan when mobile menu appears */
@media (max-width: 992px) {
  .slogan {
    display: none;
  }
}

.navigation .navbar-nav {
  flex-wrap: nowrap;
}

/* Mobile nav bar */
@media (max-width: 1200px) {
  .nav-link {
    font-size: 13px;
  }
}

@media (max-width: 1050px) {
  .nav-link {
    font-size: 12px;
  }
}
@media (max-width: 1150px) {
  .nav-item.profile,
  .nav-item.logout {
    display: none;
  }

  .account-dropdown {
    display: block;
  }
}

/* My account */
.my-account-section {
  /* margin-bottom: 32px; */
  margin-left: 0px;
}

.singleFieldManager {
  width: 100%;
}

@media (max-width: 991px) {
  .my-account-section strong {
    font-size: 1.05rem;
  }
}

/* My animals */
.my-animals-section {
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.section-label {
  font-size: 0.95rem;
}

.section-description {
  color: #555;
  font-size: 0.95rem;
}

.animal-add-box {
  background: #f9fafb;
  border-radius: 10px;
  padding: 14px;
}

.animals-count {
  font-size: 0.85rem;
  color: #666;
}

.animals-list {
  margin-top: 12px;
}

/* Mobile */
@media (max-width: 768px) {
  .section-label {
    display: block;
    margin-bottom: 6px;
  }
}

.animal-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  width: 100%;
}

.animal-thumb {
  flex: 0 0 220px; /* lock image width */
}

.animal-content {
  flex: 1;
  min-width: 0; /* VERY important to prevent overflow */
}

.animal-actions {
  margin-top: 6px;
  display: flex;
  gap: 12px;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .animal-row {
    flex-direction: column;
  }

  .animal-thumb {
    width: 100%;
  }

  .photoAnimalThumbnail {
    width: 100%;
    height: 120px;
  }
}

.profile-page {
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 768px) {
  .profile-page {
    padding-left: 0;
    padding-right: 0;
  }
}

.profile-block {
  padding: 0 16px;
}

.profile-block-content {
  max-width: 520px;
}

@media (max-width: 768px) {
  .profile-block {
    padding: 0 12px;
  }

  .profile-block-content {
    max-width: 100%;
  }
}

/* ================= ANIMAL LIST ================= */

.animal-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.animal-thumb {
  flex: 0 0 90px;
}

.photoAnimalThumbnail {
  width: 90px;
  height: 60px;
  object-fit: cover;
  border-radius: 10px;
}

.animal-fields {
  flex: 1;
  max-width: 520px;
}

.animal-actions {
  margin-top: 6px;
  font-size: 13px;
  display: flex;
  gap: 12px;
  color: #777;
}

@media (max-width: 576px) {
  .animal-row {
    flex-direction: column;
  }

  .animal-thumb {
    width: 100%;
  }

  .photoAnimalThumbnail {
    width: 100%;
    height: 140px;
  }
}

/* ================= PET CARD ================= */

.pet-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Rows */
.pet-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pet-row-top,
.pet-row-bottom {
  width: 100%;
}

/* Photo */
.pet-photo {
  width: 64px;
  flex-shrink: 0;
}

.animal-photo-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
}

.animal-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.important-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: #faad14;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    margin-left: 6px;
    cursor: help;
}

.field-help-text {
    margin-top: 4px;
    font-size: 12px;
}

/* =================== Profesional IDs Verification component ========================*/

.verification-status-card {
    transition: all 0.3s ease;
}

.verification-status-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.verification-status-card .ant-steps-item-title {
    font-weight: 500;
}

.verification-status-card .ant-steps-item-description {
    font-size: 12px;
    color: #888;
}

.verification-status-card .ant-alert {
    border-radius: 8px;
}

.verification-status-card .ant-steps-item-process .ant-steps-item-icon {
    background-color: #faad14;
    border-color: #faad14;
}

.verification-status-card .ant-steps-item-finish .ant-steps-item-icon {
    background-color: #52c41a;
    border-color: #52c41a;
}

.verification-status-card .ant-steps-item-error .ant-steps-item-icon {
    background-color: #ff4d4f;
    border-color: #ff4d4f;
}

/* ================= PET ACTIONS ================= */

.pet-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Primary: name + edit */
.pet-actions-primary {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Neutralize AntD label offset */
.pet-actions-primary .ant-form-item {
  margin-bottom: 0;
  width: 100%;
}

.pet-actions-primary .ant-form-item-label {
  display: none;
}

.pet-actions-primary .ant-form-item-control {
  margin-left: 0 !important;
  width: 100%;
}

/* Secondary: buttons */
.pet-actions-secondary {
  display: flex;
  gap: 10px;
}

/* Buttons */
.btn-consultation {
  background: #c8e0ce;
  color: #333;
  border-radius: 10px;
  padding: 10px;
  font-weight: 500;
}

.btn-consultation:hover {
  background: #b6d5bd;
}

.btn-delete {
  background: #e74c3c;
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  font-weight: 600;
}

.btn-delete:hover {
  background: #d63c2f;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {
  .pet-row {
    flex-direction: column;
    align-items: stretch;
  }

  .pet-photo {
    width: 100%;
    max-width: 120px;
  }

  .pet-actions-secondary {
    padding: 0 8px;
  }

  .pet-actions-secondary button {
    flex: 1;
    width: 100%;
  }
}

@media (max-width: 576px) {
  .account-content,
  .profile-block,
  .pet-card {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ================= PROFILE / PANELS ================= */

.profile-page {
  padding-top: 15px;
}

.profile-block {
  max-width: 100%;
}

.profile-block-content {
  width: 100%;
}

.account-content,
.account-panel,
.animals-panel {
  max-width: 520px;
}

@media (max-width: 576px) {
  .profile-block {
    padding-left: 8px;
    padding-right: 8px;
  }
}


/* ================= VET NAME ================= */
/* Vet name styles */
.vet-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vet-name-link {
    color: inherit;
    transition: color 0.2s ease;
}

.vet-name-link:hover {
    color: #FFDE59;
    text-decoration: underline;
}

.vet-initials-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #FFDE59;
    color: #000;
    font-weight: bold;
    font-size: 14px;
}

/* Tooltip customization */
.ant-tooltip-inner {
    padding: 8px 12px;
}

/* For table/list displays */
.ant-table-cell .vet-name {
    font-weight: 500;
}



/* ===== Fix: invisible cursor on yellow inputs ===== */

/* Cursor on colored background issue */
.ant-input-outlined input,
.ant-input-affix-wrapper input,
.ant-input-affix-wrapper > input.ant-input,
.ant-input-outlined.backgroundBrandLight,
input.ant-input.backgroundBrandLight {
    caret-color: #0F172A !important;
    color: #0F172A !important;
}

/* Also fix the wrapper itself when yellow */
.ant-input-affix-wrapper.backgroundBrandLight,
.ant-input-outlined.backgroundBrandLight {
    caret-color: #0F172A !important;
    color: #0F172A !important;
}

/* Ensure focus state doesn't override it */
.ant-input-affix-wrapper:focus-within input,
.ant-input-outlined:focus input {
    caret-color: #0F172A !important;
    color: #0F172A !important;
}

/* ===== Fix: Password input yellow background on focus ===== */

/* The affix wrapper is the outer yellow box for Input.Password */
.ant-input-affix-wrapper.backgroundBrandLight,
.ant-input-affix-wrapper.backgroundBrandLight:hover,
.ant-input-affix-wrapper.backgroundBrandLight:focus,
.ant-input-affix-wrapper.backgroundBrandLight:focus-within,
.ant-input-affix-wrapper-focused.backgroundBrandLight {
    background-color: #E6F1FB !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* The inner <input> inside the password wrapper also needs it */
.ant-input-affix-wrapper.backgroundBrandLight > input.ant-input {
    background-color: #E6F1FB !important;
    color: #0F172A !important;
    caret-color: #0F172A !important;
}

/* ===== Fix: Prevent yellow bleed onto filter selects ===== */
/* ===== Fix: Prevent yellow bleed onto filter selects ===== */
.filter-select .ant-select-selector,
.filter-select .ant-select-selector:hover,
.filter-select.ant-select-focused .ant-select-selector,
.filter-select .ant-select-selection,
.filter-select .ant-select-selection-wrap,
.filter-select .ant-select-selection-search,
.filter-select .ant-select-selection-item,
.filter-select .ant-select-selection-placeholder {
    background-color: #E6F1FB !important;
    color: #0F172A !important;
}

/* Placeholder needs separate treatment */
.filter-select .ant-select-selection-placeholder {
    color: #0F172A !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: none !important;
}

/* The search input inside may be covering it with a white/yellow bg */
.filter-select .ant-select-selection-search {
    background-color: transparent !important;
}

.filter-select .ant-select-selection-search-input {
    background-color: transparent !important;
    opacity: 0 !important;  /* hides the input itself but keeps the placeholder visible */
}


/* ===== Fix: form label + inline badge (e.g. "auto-detected") wrapping to 2 lines ===== */
/* Prevents the label text and its inline badge/extra span from breaking onto
   separate lines by keeping them in a single nowrap flex row and letting the
   label column grow to fit its content instead of the badge dropping below. */
.ant-form-item-label > label {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  gap: 6px;
  max-width: 100%;
}

.ant-form-item-label > label > * {
  white-space: nowrap;
}

/* Let the row's columns size to their label content on wider screens so the
   badge has room, instead of forcing a fixed 50/50 split that's too narrow. */
@media (min-width: 768px) {
  .ant-row .ant-form-item-label {
    width: auto;
  }
}

/* Fallback for narrow viewports: allow the badge to wrap gracefully under the
   label rather than mid-word, and give a touch more breathing room. */
@media (max-width: 576px) {
  .ant-form-item-label > label {
    white-space: normal;
    flex-wrap: wrap !important;
  }
}

/* ================= SEPARATORS ================= */

.section-separator-wrapper {
  width: 100%;
  display: flex;
}

.section-separator {
  height: 2px;
  width: 100%;
  background: linear-gradient(
    to right,
    #1bbf6b 0%,
    #1bbf6b 70%,
    #ffd84d 70%,
    #ffd84d 100%
  );
  border-radius: 4px;
  margin: 5px 0;
}

@media (max-width: 576px) {
  .section-separator {
    height: 3px;
  }
}

.section-separator-label {
  position: absolute;
  top: -10px;
  left: 0;
  background: #fff;
  padding: 0 10px;
  font-weight: 600;
  color: #1bbf6b;
  font-size: 14px;
}

/* Desktop row layout */
.pet-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Left column */
.pet-info {
  flex: 1;
  min-width: 0; /* VERY important for AntD */
}

/* Keep SingleFieldManager contained */
.pet-actions-primary {
  width: 100%;
}

/* Photo column */
.pet-photo {
  flex: 0 0 72px;
}

/* Mobile stacking */
@media (max-width: 768px) {
  .pet-row {
    flex-direction: column;
  }

  .pet-photo {
    width: 100%;
    max-width: 120px;
  }
}

.pet-card {
  align-items: flex-start;
  text-align: left;
}

/* space between cards */
.pet-card + .pet-card {
  margin-top: 16px;
}


.pet-actions-primary {
  margin-bottom: 6px;
}

.pet-actions-secondary {
  margin-top: 6px;
}

@media (max-width: 768px) {
  .pet-card {
    padding-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .pet-card * {
    margin-left: 0 !important;
  }
}

.pet-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Mobile-specific layout */
@media (max-width: 768px) {

  .pet-actions-primary {
    width: 100%;
  }

  .pet-photo {
    width: 100%;
    max-width: 160px; /* keeps photo reasonable */
  }

  .pet-actions-secondary {
    display: flex;
    gap: 10px;
    width: 100%;
  }

  .pet-actions-secondary button {
    flex: 1;
  }
}

.pet-actions-primary .ant-form-item {
  margin-bottom: 0;
}

.pet-actions-primary .ant-form-item-control {
  margin-left: 0 !important;
  width: 100%;
}

/* Photo + description row */
.pet-photo-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Description block */
.pet-meta {
  flex: 1;
  font-size: 13px;
  color: #555;
}

.pet-meta-line {
  line-height: 1.4;
  margin-bottom: 4px;
}

/* Mobile behavior */
@media (max-width: 768px) {
  .pet-photo-row {
    align-items: center;
  }
}

.layout-container {
  /* max-width: 1200px; */
  margin: 0 auto;
  /* padding: 0 24px; */
}

body {
  background: #f7f8fa;
}

.page-content {
  background: #fff;
}

/*  Notifications */
@media (max-width: 480px), (pointer: coarse) {
  .notifications-dropdown {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .notifications-popup {
    width: 92vw;
    max-width: 92vw;
  }
}

@media (max-width: 520px) {
  .notifications-popup {
    width: 90vw;
  }
  .container {
	max-width: 100%;
  }
}

@media (max-width: 420px) {
  .notifications-popup {
    width: 100vw;
    border-radius: 0;
  }
}
@media (max-width: 420px) {
  .notifications-popup {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }
}

/* Base popup */
.notifications-popup {
  width: 360px;
  max-width: 90vw;
  background: #fff;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 8px;
}

/* MOBILE FIX */
@media (max-width: 420px) {
  .notifications-dropdown {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .notifications-popup {
    width: 90vw;
    max-width: 90vw;
  }
}

.notifications-dropdown .ant-dropdown-arrow::before {
  background: #ffffff;
}

.notifications-dropdown .ant-dropdown-arrow::after {
  border-color: #ffffff;
}

.notifications-popup a {
  display: block;
  white-space: normal;
  word-break: break-word;
}

/* Desktop arrow */
.notifications-dropdown .ant-dropdown-arrow::before {
  background: #ffffff;
}

.notifications-dropdown .ant-dropdown-arrow::after {
  border-color: #ffffff;
}

/* Mobile / touch devices: hide arrow */
@media (pointer: coarse) {
  .notifications-dropdown .ant-dropdown-arrow {
    display: none;
  }
}

@media (min-width: 768px) {
	.singleFieldManager {
	  width: 90%;
	  margin: 1%;
	}
}