html, body {
  font-family: "Source Sans Pro", "Helvetica Neue", sans-serif;
  color: #777777;
  overflow-x: hidden;
}

.container {
  max-width: 55%; 
}

#questionnaireForm {
  margin: inherit !important;
}
#mainHeader {
  margin-bottom: unset !important;
}

@media (max-width: 1200px) {
  .container {
    max-width: 75%; 
  }
}

@media (max-width: 992px) {
  .container {
    max-width: 85%; 
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 95%; 
  }
  .btn-block {
    display: block;
    width: 100%;
}
}

@media (max-width: 576px) {
  .container {
    max-width: 100%; 
  }
}
.form-check-input{
  width: 20px;
  height: 20px;
}
#questionnaireForm .form-check-input:checked {
  background-color: #e54100 !important;
  border-color: #e54100 !important;
}

.form-control {
  margin-bottom: 10px;
}

.custom-btn-class {
  background-color: #e54100 !important;
  border-color: #e54100 !important;
  color: white !important;
}


.custom-btn-class-outline {
  background-color: transparent !important;
  border-color: #777777 !important;
  color: #777777 !important;
}

.custom-btn-class-outline:hover {
  background-color: transparent !important;
  border-color: black !important;
  color: black !important;
}

.modal-dialog {
  max-width: 90%;
}

.modal-content {
  height: 90%;
}

.modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90%;
  padding: 0; 
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  content: "";
  display: block;
  padding-top: 56.25%; 
}

.embed-responsive-item {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.youtube-icon {
  color: #e54100;
  font-size:48px;
}
.spaceBetweenButton{
  margin: 3px;
}
/* .accordion-header {
  border-bottom: solid 1px gray !important;
} */
.accordion{
  border: unset !important;
}
.accordion-item{
  border: unset !important;
}
.accordion-button .fa {
  width: 24px; 
  height: 24px; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.accordion-button {
  display: flex;
  align-items: center; 
  gap: 10px; 
  background-color: #dddada;
}

.accordion-button .fa {
  flex-shrink: 0; 
}

.accordion-button .spanSize {
  flex-grow: 1;
  text-align: left; 
}

.faSize {
  color: #777777;

}

.spanSize {
  font-size: 24px;
  color: #777777;

}

input[type="radio"] {
  opacity: 0;
}

label {
  margin-bottom: 10px;
}

input[type="radio"] + label {
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid #ccc;
  background: #efefef;
  color: #aaa;
  border-radius: 3px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
}

input[type="radio"]:checked + label {
  background: #e54100 !important;
  border: 1px solid #e54100 !important;
  color: white !important;
}

input[type="checkbox"] {
  color: gray;
}

.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color) !important;
  background-color: #d6dae1 !important;
  box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 #f01d10 !important;
}
.table th, .table td {
  text-align: left;
  vertical-align: middle;
}

.table-fixed {
  table-layout: fixed;
  width: 100%;
}

.fixed-width-column {
  width: 150px; 
}
.fixed-width-column-second {
  width: 50px; 
}

.custom-wrap-text {
  white-space: normal; 
  word-wrap: break-word; 
}

#mainHeader img {
  width: 150px; 
}

@media (max-width: 768px) {
  #mainHeader img {
      width: 100px;
  }
}

@media (max-width: 480px) {
  #mainHeader img {
      /* width: 80px;  */
      margin-top: -15px;
  }
}


.custom-btn-class-outline {
  position: relative;
  padding-right: 20px;
}

.custom-btn-class {
  position: relative;
  padding-right: 20px;
}



@media (max-width: 768px) {
  .btn {
    width: 100%; 
  }
}
label.btn {
  pointer-events: auto; 
}

.loader-overlay {
  display: none;
  position: fixed;
  z-index: 1050;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-content {
  text-align: center;
}
.spinner-border{
  color:#e54100
}

.toast-container {
  z-index: 1060;
}
.toast-success {
  border-left: 5px solid green;
}
.toast-error {
  border-left: 5px solid red;
}

.toast-container {
  z-index: 1060;
}

@media (max-width: 768px) {
  .toast-container {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: auto;
    right: auto;
  }
}