@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

	body {
		margin: 0;
		padding: 0;
		font-family: Arial, sans-serif;
		background-color: #FBF4EA;
		text-align: center;
		font-family: "Poppins", sans-serif;
		font-weight: 600;
		font-style: normal;
	}
	.container { 
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.termsCheckbox{
		margin-right: 10px;
	}
	
	.termsText{
		font-size: 13px;
		font-weight: normal;
	}
	
	.termsLink{
		font-size: 13px;
		color: #C95D43;
		font-weight: bold;
		cursor: pointer;
		text-decoration: underline;
	}
	
	.termsLink:hover{
		text-decoration: none;
	}
	
	.termsLinkDialog{
		display: none;
	}
    
    .jobDescriptionDialog{
		display: none;
	}
	
	.alertText{
		font-size: 14px;
		font-weight: normal;
		margin-bottom: 0px;
	}
	
	.h2Terms{
		margin-top: 50px;
		margin-bottom: 20px;
		font-weight: 550;
	}
	
	.termsCloseDiv{
		margin-bottom: 20px;
		margin-top: 20px;
	}
	
	.h3Terms{
		margin-top: 30px;
		margin-bottom: 20px;
	}
	
	.textTerms{
		font-size: 16px;
		text-decoration: none;
		font-weight: normal;	
	}
	
	.termsTitle{
		margin-bottom: 40px; 
		font-size: 26px; 
		text-decoration: underline;
		font-weight: 600;
	}
	/*.logos {
		margin-top: 15vh; 
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap; /* Allow logos to wrap 
	}
	.logos img {
		max-width: 12vw;  Adjusted for responsiveness
		width: auto;
		height: auto;
		margin: 0 10px; Adjusted for spacing
	}*/
	.logo {
		display: block;
		margin-bottom: 4vh; /* Adjusted for spacing */
		margin-left: auto;
		margin-right: auto;
		margin-top: 2vh;
		-webkit-transform: translate(0%,0%);
	}
	.logo img {
		max-width: 20vw; /* Adjusted for responsiveness */
		min-width: 160px; /* Adjusted for responsiveness */
		width: auto;
		height: auto;
	}
	.buttons-container {
		display: flex;
		align-items: center;
		flex-wrap: wrap; /* Allow buttons to wrap */
		justify-content: center; /* Center buttons */
		margin-top: 3vh; /* Adjust spacing */
	}

	.buttonMenu {
		border: solid 1px #faa93d;
		border-radius: 5px;
		cursor: pointer;
		margin: 0.5vw;
		min-width: 300px !important;
		width: 75vw;
		background-color: #faa93d;
	}
	.buttonMenu span {
		display: inline-block;
		padding: 0.1vh 0.1vw;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		font-size: min(5.5vw, 19px);
		margin: 1vh;
		color: #06262d;
		text-decoration: none; /* Remove default underline */
		transition: background-color 0.3s; /* Smooth transition for hover effect */
	}

	.buttonSubmit {
		border: none;
		border-radius: 5px;
		cursor: pointer;
		margin: 1vh; /* Adjusted margin */
		width: 110px;
		background-color: #6A7732;
	}
	.buttonOrder span {
		display: inline-block;
		padding: 0.1vh 0.1vw;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		font-size: min(5.5vw, 19px);
		margin: 1vh;
		text-decoration: none; /* Remove default underline */
		color: #06262d; /* Text color */
		transition: background-color 0.3s; /* Smooth transition for hover effect */
	}
	
	.buttonOrderPartner {
		display: inline-flex;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		font-size: min(1.8vw, 15.8px);
		text-decoration: none; /* Remove default underline */
		color: #faa93d; /* Text color */
		transition: background-color 0.3s; /* Smooth transition for hover effect */
		margin-right: 10px;
		flex-grow: 1;
		height: auto;
		min-height: 80px;
	}

	.buttonOrderPartner:last-child {
		margin-right: 0px;
	}

	.buttonOrderPartner span {
		border: 1px solid #CCE3C3;
		border-radius: 2px;
		background-color: #FFFFFF;
		cursor: pointer;
		height: auto;
		width: 100%;
		display: inline-flex;
	}
	
	.buttonPartnerContainer{
		display: flex;
		flex-direction: row;  /* Arrange buttons horizontally */
		font-size: 2.2vh; /* Adjusted font size */
		margin-top: 1vh; /* Adjusted margin */
		margin-bottom: 1.3vh; /* Adjusted margin */
		min-width: 300px !important;
		width: 75vw;
		justify-content: center;
	}
	
	.partnerImage{
		width: max(calc(10vw + 1em), 4rem);
		padding: 5px;
		margin: auto;
	}
	

	.buttonSocial {
		border: solid 1px #faa93d;
		border-radius: 5px ;
		cursor: pointer;
		margin: 1vh 1vh 0.3vh 1vh; /* Adjusted margin */
		min-width: 300px !important;
		width: 75vw;
		background-color: #F7DDC0;
	}
	.buttonSocial span {
		display: inline-block;
		padding: 0.1vh 0.1vw;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		/*font-size: min(5.5vw, 19px);*/
		margin: 1vh;
		text-decoration: none; /* Remove default underline */
		color: #06262d; /* Text color */
		transition: background-color 0.3s; /* Smooth transition for hover effect */
	}

	.buttonWIFI {
		border: solid 1px;
		border-radius: 5px;
		cursor: pointer;
		margin: 1.3vh 1vh 1vh 1vh;
		min-width: 300px !important;
		width: 75vw;
		background-color: #F7DDC0;
		display: table;
	}

	.buttonWIFI a {
		display: inline-block;
		padding: 0.1vh 0.1vw;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		font-size: min(5.5vw, 19px);
		margin: 1vh;
		text-decoration: none;
		color: #06262d;
		transition: background-color 0.3s;
	}
  
	.right-pad{
		margin-right:1vh;
	}

	.divider {
		height: 2.5vh; /* Adjusted divider height */
		margin: 0 2vw; 
	}
	.Logodivider {
		font-size: 2.5vh !important; 
	}

	.resize{
		max-width:100%;
		height: auto;
	}

	.QRCodeModal{
		margin-top: 15px !important;
		color: #FAA93D !important;
	}

	.WifiDetails {
		padding: 0 18px;
		background-color: #f1f1f1;
		max-height: 0;
		transition: max-height 0.6s ease-out;
		display: table-row;
	}
	
	.orSeparator{
		width: 40%; 
		text-align: center; 
		border-bottom: 1px solid #d3d3d3; 
		line-height: 0.1em;
		margin: 10px 0 10px
	}
	
	.orSeparator span{
		background:#fff; 
		padding:0 10px; 
	}

	
	.rightSideReviewButton {
		position: absolute;  /* Makes the button stay in one place on the screen */
		top: 50%;         /* Positions the button vertically in the middle */
		right: -81px;       /* Sets the distance from the right edge of the screen */
		transform: rotate(-90deg);
		min-width: 180px;
		background-color: #FFEDBD;
		border: 1px dashed #0B2429;
		padding: 5px;
	}
	
	.rightSideReviewButton.hidden {
		position: fixed;  /* Makes the button stay in one place on the screen */
		top: 50%;         /* Positions the button vertically in the middle */
		right: -70px;       /* Sets the distance from the right edge of the screen */
		transform: rotate(-90deg);
		height: max(calc(0.8vw + 0.8em), 1.5rem);
		background-color: #FFEDBD;
		border: 1px dashed #0B2429;
		padding: max(calc(0.001vw + 0.001em), 0.3rem);
		opacity: 0.2; /* Set opacity to 20% (80% hidden) */
	}
	
	.rightSideReviewButton .unHidden {
		opacity: 1; /* Set opacity to 20% (80% hidden) */
		transform: translateX(80%); /* Slide the sticker 80% to the left */
	}
	
	.rightSideReviewButtonInner{
		display: table;
		height: 100%;
		width: 100%;
	}
	
	.rightSideReviewButtonInner p{
		text-align:center; 
		vertical-align: middle;
		display: table-cell; 
		font-size: 1rem;
		font-weight: 300;
	}
	
	.rightSideReviewButtonInner a{
		color: #0B2429;
		text-decoration: none;
		font-style: italic;
	}
	
	.reviewHeart{
		width: max(calc(0.5vw + 1em), 0.8rem);
		height: max(calc(0.5vw + 1em), 0.8rem);
		margin-right: max(calc(0.1vw + 0.1em), 0.1rem);
		filter: invert(72%) sepia(70%) saturate(1175%) hue-rotate(331deg) brightness(106%) contrast(96%);
	}
	
	.footer{
		position: absolute;
		border: none;
		font-size: min(2.5vw, 10px);
		color: #0B2429; /* Text color */
		transition: background-color 0.3s; /* Smooth transition for hover effect */
		height: auto;
		font-style: italic;
		font-weight: 300;
		bottom: 10px;
		width: 100%;
	}
	
	.note{
		font-size: min(4vw, 12px);
		color: #0B2429; /* Text color */
		transition: background-color 0.3s; /* Smooth transition for hover effect */
		height: auto;
		font-weight: bold;
	}
	
	
	.form-control{
		font-size: 16px;
	}
	
	.form-control::-moz-placeholder {
		font-size: 14px !important;
		font-style: italic;
		font-weight: 300;
	}
	.form-control:-ms-input-placeholder {
		font-size: 14px !important;
		font-style: italic;
		font-weight: 300;
	}
	.form-control::-webkit-input-placeholder {
		font-size: 14px !important;
		font-style: italic;
		font-weight: 300;
	}
	
	.couponCodeList{
	    width: 400px;
	    margin-left: auto;
        margin-right: auto;
	}
	.couponCodeButton{
        align-items: center;
        border: 1px solid #DFDFDF;
        border-radius: 16px;
        box-sizing: border-box;
        color: #000000;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        font-family: Inter, sans-serif;
        justify-content: center;
        line-height: 28px;
        max-width: 100%;
        padding: 14px 22px;
        text-decoration: none;
        transition: all .2s;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        width: 100%;
        margin-bottom: 20px;
        background-color: #FFEDBD;
    }
    
    .couponCodeButtonUsed{
        border: 1px solid #999999 !important;
        background-color: #cccccc !important;
        color: #666666 !important;
        cursor: default !important;
    }
    
    .confirmPassword{
        align-items: center;
        border: 1px solid #DFDFDF;
        cursor: pointer;
        font-family: Inter, sans-serif;
        justify-content: center;
        line-height: 28px;
        max-width: 100%;
        padding: 5px 5px;
        text-decoration: none;
        transition: all .2s;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        width: 100px;
        background-color: #CCE3C3;
    }
    
    .confirmAdminPassword{
        align-items: center;
        border: 1px solid #DFDFDF;
        cursor: pointer;
        font-family: Inter, sans-serif;
        justify-content: center;
        line-height: 28px;
        max-width: 100%;
        padding: 5px 5px;
        text-decoration: none;
        transition: all .2s;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        width: 100px;
        background-color: #CCE3C3;
    }

    .couponCodeButton:active,
    .couponCodeButton:hover {
        outline: 0;
    }
    
    .couponCodeButton:hover {
        border-color: rgba(0, 0, 0, 0.19);
        background-color: #FFFFFF;
    }
    
    .couponButtonOuterElements{
        display: inline-block;
    }
    
    .couponButtonElements{
        display: inline-block;
        width: inherit;
    }
    
	.couponButtonTitle{
        font-size: 18px;
        font-weight: bold;
    }
    
	.couponButtonTitle{
        font-size: 16px;
    }
	
	.captcha{
		margin-bottom: 20px;
	}
	
	.thankYouBox{
		width: 321px;
	}
	
	.alertBox{
		width: 430px;
		padding: 8px 7px 8px 7px;
		display: grid;
		align-items: center;
	}
	
	.alert-warning{
		width: 321px !important;
		padding: 8px 7px 8px 7px;
		height: auto !important;
	}
	
	.alert-success{
		width: 321px !important;
		padding: 8px 7px 8px 7px;
		height: auto !important;
	}
    
    .modal-content {
        max-width: 100%;
        line-height: 1.5;
        color: #333;
    }
    h1 {
        margin-top: 20px !important;
        font-size: 24px;
        margin-bottom: 20px;
        color: #2c5282;
    }
    h2 {
        font-size: 24px;
        margin-top: 60px;
        margin-bottom: 10px;
        color: #4a5568;
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
    }
    .section-title {
        font-weight: bold;
        margin-top: 12px;
        margin-bottom: 8px;
        text-align: left !important;
    }
    ul {
        padding-left: 20px;
        margin-top: 5px;
        margin-bottom: 15px;
        text-align: left !important;
    }
    li {
        margin-bottom: 4px;
        font-weight: 500 !important;
    }
    .job-section {
        margin-bottom: 20px;
    }