.avatar-upload {
  position: relative;
  max-width: 205px;
  margin: 0px auto;
}
.avatar-upload .avatar-edit {
  position: absolute;
  right: 12px;
  z-index: 1;
  top: 10px;
}
.avatar-upload .avatar-edit input {
  display: none;
}
.avatar-upload .avatar-edit input + label {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-bottom: 0;
  border-radius: 100%;
  background: #FFFFFF;
  border: 1px solid transparent;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}
.avatar-upload .avatar-edit input + label:hover {
  background: #f1f1f1;
  border-color: #d6d6d6;
}
.avatar-upload .avatar-edit input + label:after {
  content: "\f030";
  font-family: 'FontAwesome';
  color: #757575;
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
  font-size: 25px;
}

/*span#imageDelete:hover {*/
/*  background: #f1f1f1;*/
/*  border-color: #d6d6d6;*/
/*}*/

/*span#imageDelete:after {*/
/*  content: "\f1f8";*/
/*  font-family: 'FontAwesome';*/
/*  color: #ff0000;*/
/*  position: absolute;*/
/*  top: 6px;*/
/*  left: 0;*/
/*  right: 0;*/
/*  text-align: center;*/
/*  margin: auto;*/
/*  font-size: 25px;*/
/*}*/

/*.avatar-upload .avatar-edit span#imageDelete {*/
/*  display: inline-block;*/
/*  width: 50px;*/
/*  height: 50px;*/
/*  margin-bottom: 0;*/
/*  border-radius: 100%;*/
/*  background: #FFFFFF;*/
/*  border: 1px solid transparent;*/
/*  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);*/
/*  cursor: pointer;*/
/*  font-weight: normal;*/
/*  transition: all 0.2s ease-in-out;*/
/*}*/

.avatar-upload .avatar-preview {
  width: 192px;
  height: 192px;
  position: relative;
  border-radius: 100%;
  border: 6px solid #fff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.avatar-upload .avatar-preview > div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/*splashbg*/
 .splashbg
      {
          background-image: url('https://media.istockphoto.com/id/1160498007/vector/abstract-geometric-medical-cross-shape-medicine-and-science-concept-background.jpg?s=612x612&w=0&k=20&c=FNr-6L79lPkfPhhGWFf8TUqq4ePzl-md7BLdb08QAzA=');
          width: 100%;
          height: 100vh;
          background-size: cover;
          background-repeat: no-repeat;
          object-fit: cover;
         background-attachment : fixed;
      }
      #preloader {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 0.5); /* Transparent white background */
          z-index: 1000;
          justify-content: center;
          align-items: center;
      }

      .spinner-border {
          width: 3rem;
          height: 3rem;
          color: #007bff; /* Change the color as needed */
          position: absolute;
          top: 45%;
          left: 45%;
      }
      #preloader span {
          position: absolute;
          top: 55%;
          left: 40%;
      }