.profile_wrapper{
float:right;
width:100%;
background-color:var(--background-color)
}
/* --- Add VIP fancy borders to profile_wrapper --- */
.profile_wrapper.vip {
border:5px solid var(--main-color);
border-radius:15px
}
.profile_wrapper .title{
float:right;
width:100%;
text-align:center;
color:var(--main-color);
font-size:46px;
margin:20px 0 10px 0;
padding:0 0 10px 0;
border-bottom:2px solid var(--main-color)
}
.profile_wrapper .section{
float:right;
width:100%;
color:var(--main-color);
font-size:24px
}
.profile_wrapper .section .subtitle{
float:right;
width:100%;
text-align:center;
color:var(--main-color);
font-size:28px;
margin:20px 0 10px 0
}
.profile_wrapper .section .form-group{
float:right;
width:CALC(100% - 50px);
margin:0 25px 10px
}
.profile_wrapper .section .form-group.required{
position:relative
}
.profile_wrapper .section .form-group.required::after{
content:"*";
position:absolute;
top:0;
right:0px;
color:var(--main-color);
font-size:24px
}
.profile_wrapper .section .form-group label{
float:right;
width:100%;
color:var(--secondary-color);
font-size:24px;
margin:0 20px 10px 0
}
.profile_wrapper .section .form-group input{
float:right;
width:100%;
padding:10px;
border:1px solid var(--main-color);
border-radius:5px;
background-color:var(--background-color);
color:var(--secondary-color);
font-size:18px;
margin:0 0 10px 0;
box-sizing:border-box
}
.profile_wrapper .section .submit{
float:right;
width:CALC(100% - 40px);
text-align:center;
margin:20px 20px;
padding:10px 0;
color:var(--secondary-color);
background-color:var(--main-color);
border-color:var(--main-color);
font-size:24px;
box-sizing:border-box;
border-radius:15px;
text-decoration:none
}
.profile_wrapper .section.profile_punchcards{
color:var(--secondary-color)
}
/* --- Umbrellas for VIPs --- */
.umbrella {
width:50px;
/* Adjust size as needed */
height:50px;
/* Adjust size as needed */
background-image:url(../../../design/tozeret/css/umb1.png);
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
position:absolute;
top:-60px;
/* Start above the viewport */
left:50%;
opacity:0.8;
/* Optional:slight transparency */
animation:fall linear infinite;
animation-duration:10s;
/* Adjust duration as needed */
display:none
}
.umbrella:nth-child(2) {
background-image:url(../../../design/tozeret/css/umb2.png)
}
.umbrella:nth-child(3) {
background-image:url(../../../design/tozeret/css/umb3.png)
}
.umbrella:nth-child(4) {
background-image:url(../../../design/tozeret/css/umb4.png)
}
.umbrella:nth-child(5) {
background-image:url(../../../design/tozeret/css/umb5.png)
}
@keyframes fall {
to {
transform:translateY(110vh) rotate(540deg);
/* Move from top to bottom and rotate */
}
}