body{
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
}
/* Custom CSS styles can be added here */
.required_fields {
    color: red;
}

.name-invalid,
.photo-invalid {
    margin-top: 5px;
}

.custom-form-container {
  box-sizing: border-box; 
  border: 1px solid lightgrey; 
  padding: 10px; 
  border-radius: 10px;       
  margin: 0;
  overflow-x: hidden; 
  overflow-y: hidden;
  height: 80vh;
}

/* Partition-like border style */
.partition-border {
    border-bottom: 1px solid #cdcccc;
    margin-bottom: 20px;
}

/* Responsive image styling */
.responsive-img {
    max-width: 100%;
    height: auto; 
    display: block; 
    margin: 0 auto;
}

/* Responsive form fields */
.form-group label {
    margin-bottom: 5px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding-bottom: 8px;
    box-sizing: border-box;
}
 .red-box {
    border: 2px solid red;
    background-color: red;
    padding: 10px;
    color: white;
    font-style: italic;
}

.template-logo {
  max-width: 30%;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 30px;
}
.template-logo img {
  max-width:100%;
}
.main-template {
  max-width:1140px;

  width: 100%;
      border: 1px solid #cdcccc;
      border-radius: 10px;
      margin: 0 auto;
      overflow: hidden;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: none;
}

.form-control.is-valid, .was-validated .form-control:valid {
    background-image: none;
}

.loading{
    background:transparent url(loadinggif.gif) center center no-repeat;
}

.loading-spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 20px auto; /* Center the spinner */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner-container {
    position: relative;
}

.loading-spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 20px auto; /* Center the spinner */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.header  {
display: flex;
align-items: center;
padding: 20px 15px 20px;
}
.header .logo{
    max-width:200px;
}
.header .logo img{
    max-width:100%;
}
.formbox{
    max-width: calc(100% - 300px);
} 
.birthdayimg{
    position: relative; 
    max-height: 433px;
    min-height: 433px;
}
.birthdayimg img{
        max-height: inherit;
max-width: 100%;
object-fit: contain;
}
textarea{
        display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
outline: none !important;
    }



    /* start banner css */

    .template-container {
        position: relative;
        width: 600px;
        height: 600px;
        margin: auto;
        /* background: url("{% static 'images/template_2.jpg' %}") no-repeat center center; */
        background-size: cover;
    }

    .crop-container {
        position: absolute;
        top: 79px;
        left: 173px;
        width: 190px;
        height: 190px;
        overflow: hidden;
        border-radius: 50%;
        /* border: 2px solid #ccc; */
        /* clip-path: circle(125px at center); */
    }

    #upload-demo {
        width: 192px;
        height: 189px;
    }

    .cr-slider-wrap {
        display: none;
    }
    .cr-boundary {
        border-radius: 100%;
    }
    /* .croppie-container {
        position: absolute;
        top: 80px;
        left: 142px;
    } */
    .cr-viewport.cr-vp-circle {
        border: none ;
    }
    /* .croppie-container .cr-image{
        alt: none !important;
    } */
    /* end banner css */

#image{
    font-weight: 400;
    padding-bottom: 0px;
    height: 40px;
    user-select: none;
    text-decoration:line-through;
    font-style: italic;
    font-size: x-large;
    border: red 2px solid;
    margin-left: 10px;

}
#user-input{
    width:auto;
    margin-right: 10px;
    padding-bottom: 0px;
    height: 40px;
    border: red 0px solid;
    box-sizing: content-box;
}
.inline{
    display:inline-block;
}
#btn{
    color: aqua;
    margin: 10px;
    background-color: brown;
}

#regard_div label {
    margin-right: 10px;
}
//.img-hide .cr-boundary .cr-image {
//    display: none;
//}

.image-hide {
    display: none;
}