@media (min-width: 930px) {
  .content {
    width: 960px;
  }
}

@media (min-width: 1200px) {

  .col-xl-8 {
    flex: 0 0 auto;
    width: 81%;
  }
}



.form-label {
  color: #521e40;
  font-weight: 800;
}

.form-check-label {
  color: #521e40;


  font-size: 15px;
}

.bton {
  font-size: 25px;
  width: 211px;
  color: white;
  font-size: 20px !important;

  font-weight: bold !important;
  background-color: #521e40 !important;
  text-decoration: none;
}

.bton:hover {
  font-size: 25px;
  width: 211px;
  color: white;
  font-size: 20px !important;

  font-weight: bold !important;
  background-color: #521e40 !important;
  text-decoration: none;
}

.ImfG {
  width: 110px;
}

.form-footer {
  display: block;
  text-align: center;
  opacity: 52%;

}

.skills-container {
  column-count: 2;
  column-gap: 10px;
}



.charCount {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #999;
}

.charCountMax {
  color: red;
  font-size: 12px;
}



/* Add a custom scrollbar */
#txtinterAssit::-webkit-scrollbar {
  width: 8px;
}


#txtinterAssit::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.bannerC {
  height: 21.75rem;
  background-color: hsl(267, 82%, 96%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bannerC h2 {
  display: flex;
  font-size: 3.5625rem;
  font-weight: 800;
  color: hsl(291, 41%, 42%);
}

.bannerC img {
  position: absolute;
  max-width: 250px;
  top: 0;
  left: 0;
}

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);

}

#loading-spinner {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite, color-change 4s linear infinite;
}

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

  100% {
    transform: rotate(360deg);
  }
}

#spinner-text {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: bold;
  font-size: 25px;
}

#spinner-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

@keyframes color-change {
  0% {
    border-top-color: #34db7e;
  }

  25% {
    border-top-color: #7e34db;
  }

  50% {
    border-top-color: #db7e34;
  }

  75% {
    border-top-color: #34db7e;
  }

  100% {
    border-top-color: #34db7e;
  }
}

.form-select,
.form-control {
  border: 1px solid #aaacaf6b !important;
}

.input-field .email-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #b4b4b4;
}

.input-field {
  position: relative;
  height: 50px;
  width: 280px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.input-field input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 6px;
  padding: 0 15px;
  font-size: 15px;
  font-weight: 400;
  color: #333;
}

input::placeholder {
  color: #b4b4b4;
}

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

  100% {
    transform: rotate(360deg);
  }
}

.loadingIconc {
  animation: spin 1s linear infinite;
  font-size: 25px;
}

i.validIconc {
  color: green;
  font-size: 25px;
}

i.ErrorIconc {
  color: red;
  font-size: 25px;
}

span.emailMessage {
  font-size: 13px;
  color: red;
}

.hidden {
  display: none;
}

@media (min-width: 930px) {

  .content {
    width: 900px;
  }
}

/***  Form Build  ***/


.form-group.ui-sortable-handle {

  margin-left: 20px;
  margin-right: 20px;
}

/*
.form-group {
  margin-bottom: 5px;
  margin-left: 20px;
  margin-right: 20px;
} */

.readaceepted {
  display: flex;

  font-size: 18px;
  justify-content: center;
}

.error-message {
  color: red;
  font-size: 12px;
  display: block;
}

small#EMAIL_ADDRESS-error {
  position: absolute;
  margin-top: 30px;
}

.refecode {
  width: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: auto;
  margin-bottom: 10px;
  margin-top: 10px;
}

.labckckTerms {
  font-size: 12px;
}

.drag-file-area {
  border: 2px dashed #ccc;
  border-radius: 5px;
  background-color: aliceblue;
  padding: 20px;
  text-align: center;
  height: 10vh;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drag-file-area label {
  cursor: pointer;
}

.file-input {
  display: none;
}

.drag-file-area:hover {
  border-color: #4CAF50;
}

.uploadcomponent {
  display: flex;
  justify-content: center;
}