.headtext {
  background-color: #333;
  padding: 6px;
  color: white;
  margin-bottom: 20px;
  padding-top: 15px;
}

.headtext h2 {
  padding-left: 50px;
}

@media (max-width: 767px) {
  .headtext h2 {
    padding-left: 15px;
  }
}

.headtext p {
  padding-left: 60px;
  margin-top: 0;
}

@media (max-width: 767px) {
  .headtext p {
    padding-left: 25px;
  }
}

.headtext h4 {
  padding-left: 60px;
}

@media (max-width: 767px) {
  .headtext h4 {
    padding-left: 25px;
  }
}

.guideLayout {
  border: 1px solid #bdbbbb;
}

.contactPerson {
  margin-left: 30px;
}

@media (max-width: 767px) {
  .contactPerson {
    margin-left: 20px;
  }
}

.timeOfIncident {
  margin-left: 30px;
}

@media (max-width: 767px) {
  .timeOfIncident {
    margin-left: 0px;
  }
}

@media (max-width: 767px) {
  .timeOfIncident .guideFieldLabel.top {
    margin-left: 20px;
  }
}

.timeOfIncident .guideFieldWidget.textField {
  margin-left: 20px;
}

@media (max-width: 767px) {
  .timeOfIncident .guideFieldWidget.textField {
    margin-left: 10px;
    width: 55%;
  }
}

.timeOfIncident .guideFieldWidget.textField .guideFieldWidget input {
  width: 30%;
}

.dateOfIncident {
  margin-left: 30px;
}

@media (max-width: 767px) {
  .dateOfIncident {
    margin-left: 20px;
  }
}

.dateOfIncident .guideFieldWidget.dateTimeEdit {
  width: 35%;
  margin-left: 20px;
}

@media (max-width: 767px) {
  .dateOfIncident .guideFieldWidget.dateTimeEdit {
    width: 55%;
    margin-left: -10px;
  }
}

.nameOfInstitution,
.specifyNatureOfIncident,
.expectedRecoveryPeriod,
.listStakehOldersImpacted,
.listServicesImpacted,
.listPaymentSystemsImpacted,
.comments {
  margin-left: 30px;
}

@media (max-width: 767px) {
  .nameOfInstitution,
  .specifyNatureOfIncident,
  .expectedRecoveryPeriod,
  .listStakehOldersImpacted,
  .listServicesImpacted,
  .listPaymentSystemsImpacted,
  .comments {
    margin-left: 10px;
  }
}

.nameOfInstitution .guideFieldWidget.textField,
.specifyNatureOfIncident .guideFieldWidget.textField,
.expectedRecoveryPeriod .guideFieldWidget.textField,
.listStakehOldersImpacted .guideFieldWidget.textField,
.listServicesImpacted .guideFieldWidget.textField,
.listPaymentSystemsImpacted .guideFieldWidget.textField,
.comments .guideFieldWidget.textField {
  width: 60%;
  margin-left: 20px;
}

@media (max-width: 767px) {
  .nameOfInstitution .guideFieldWidget.textField,
  .specifyNatureOfIncident .guideFieldWidget.textField,
  .expectedRecoveryPeriod .guideFieldWidget.textField,
  .listStakehOldersImpacted .guideFieldWidget.textField,
  .listServicesImpacted .guideFieldWidget.textField,
  .listPaymentSystemsImpacted .guideFieldWidget.textField,
  .comments .guideFieldWidget.textField {
    width: 100%;
    margin-left: 0;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .nameOfInstitution .guideFieldWidget.textField,
  .specifyNatureOfIncident .guideFieldWidget.textField,
  .expectedRecoveryPeriod .guideFieldWidget.textField,
  .listStakehOldersImpacted .guideFieldWidget.textField,
  .listServicesImpacted .guideFieldWidget.textField,
  .listPaymentSystemsImpacted .guideFieldWidget.textField,
  .comments .guideFieldWidget.textField {
    width: 70%;
  }
}

@media (max-width: 767px) {
  .nameOfInstitution .guideFieldLabel.top,
  .specifyNatureOfIncident .guideFieldLabel.top,
  .expectedRecoveryPeriod .guideFieldLabel.top,
  .listStakehOldersImpacted .guideFieldLabel.top,
  .listServicesImpacted .guideFieldLabel.top,
  .listPaymentSystemsImpacted .guideFieldLabel.top,
  .comments .guideFieldLabel.top {
    margin-left: 10px;
  }
}

.fullNameText,
.jobPositionText,
.businessUnitText,
.contactNumberText,
.emailAddressText {
  margin-left: 45px;
}

@media (max-width: 767px) {
  .fullNameText,
  .jobPositionText,
  .businessUnitText,
  .contactNumberText,
  .emailAddressText {
    margin-left: 40px;
  }
}

@media (max-width: 767px) {
  .fullNameText .guideFieldWidget .textField,
  .jobPositionText .guideFieldWidget .textField,
  .businessUnitText .guideFieldWidget .textField,
  .contactNumberText .guideFieldWidget .textField,
  .emailAddressText .guideFieldWidget .textField {
    margin-left: 20px;
  }
}

.fullNameText p,
.jobPositionText p,
.businessUnitText p,
.contactNumberText p,
.emailAddressText p {
  display: flex;
  white-space: nowrap;
  margin: 20px 0;
}

@media (max-width: 767px) {
  .fullNameText p,
  .jobPositionText p,
  .businessUnitText p,
  .contactNumberText p,
  .emailAddressText p {
    margin: 0;
  }
}

@media (max-width: 767px) {
  .fullName,
  .jobPosition,
  .businessUnit,
  .contactNumber,
  .emailAddress {
    margin-left: 20px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .fullName .guideFieldWidget.textField,
  .jobPosition .guideFieldWidget.textField,
  .businessUnit .guideFieldWidget.textField,
  .contactNumber .guideFieldWidget.textField,
  .emailAddress .guideFieldWidget.textField {
    width: 130%;
    margin-left: 30px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .fullName .guideFieldWidget input,
  .jobPosition .guideFieldWidget input,
  .businessUnit .guideFieldWidget input,
  .contactNumber .guideFieldWidget input,
  .emailAddress .guideFieldWidget input {
    margin-left: 25px;
  }
}

.incidentDescription,
.causeOfIncident,
.sourceOfTheIncident,
.describeImpactStakeholders,
.describeCriticalServices,
.resolutionActionPlan,
.systemicImpactDetails {
  margin-left: 30px;
}

@media (max-width: 767px) {
  .incidentDescription,
  .causeOfIncident,
  .sourceOfTheIncident,
  .describeImpactStakeholders,
  .describeCriticalServices,
  .resolutionActionPlan,
  .systemicImpactDetails {
    margin-left: 10px;
  }
}

.incidentDescription .guideFieldWidget.textField,
.causeOfIncident .guideFieldWidget.textField,
.sourceOfTheIncident .guideFieldWidget.textField,
.describeImpactStakeholders .guideFieldWidget.textField,
.describeCriticalServices .guideFieldWidget.textField,
.resolutionActionPlan .guideFieldWidget.textField,
.systemicImpactDetails .guideFieldWidget.textField {
  width: 60%;
  margin-left: 20px;
}

@media (max-width: 767px) {
  .incidentDescription .guideFieldWidget.textField,
  .causeOfIncident .guideFieldWidget.textField,
  .sourceOfTheIncident .guideFieldWidget.textField,
  .describeImpactStakeholders .guideFieldWidget.textField,
  .describeCriticalServices .guideFieldWidget.textField,
  .resolutionActionPlan .guideFieldWidget.textField,
  .systemicImpactDetails .guideFieldWidget.textField {
    width: 100%;
    margin-left: 0;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .incidentDescription .guideFieldWidget.textField,
  .causeOfIncident .guideFieldWidget.textField,
  .sourceOfTheIncident .guideFieldWidget.textField,
  .describeImpactStakeholders .guideFieldWidget.textField,
  .describeCriticalServices .guideFieldWidget.textField,
  .resolutionActionPlan .guideFieldWidget.textField,
  .systemicImpactDetails .guideFieldWidget.textField {
    width: 70%;
  }
}

@media (max-width: 767px) {
  .incidentDescription .guideFieldLabel.top,
  .causeOfIncident .guideFieldLabel.top,
  .sourceOfTheIncident .guideFieldLabel.top,
  .describeImpactStakeholders .guideFieldLabel.top,
  .describeCriticalServices .guideFieldLabel.top,
  .resolutionActionPlan .guideFieldLabel.top,
  .systemicImpactDetails .guideFieldLabel.top {
    margin-left: 10px;
  }
}

.natureOfIncident,
.otherStakeholdersImpacted,
.incidentCriticalServices,
.impacttoPaymentSystems,
.systemicImpact {
  margin-left: 30px;
}

@media (max-width: 767px) {
  .natureOfIncident,
  .otherStakeholdersImpacted,
  .incidentCriticalServices,
  .impacttoPaymentSystems,
  .systemicImpact {
    margin-left: 10px;
  }
}

.natureOfIncident .guideFieldWidget.dropDownList,
.otherStakeholdersImpacted .guideFieldWidget.dropDownList,
.incidentCriticalServices .guideFieldWidget.dropDownList,
.impacttoPaymentSystems .guideFieldWidget.dropDownList,
.systemicImpact .guideFieldWidget.dropDownList {
  width: 35%;
  margin-left: 20px;
}

@media (max-width: 767px) {
  .natureOfIncident .guideFieldWidget.dropDownList,
  .otherStakeholdersImpacted .guideFieldWidget.dropDownList,
  .incidentCriticalServices .guideFieldWidget.dropDownList,
  .impacttoPaymentSystems .guideFieldWidget.dropDownList,
  .systemicImpact .guideFieldWidget.dropDownList {
    width: 60%;
    margin-left: 0;
  }
}

.natureOfIncident .guideFieldWidget.dropDownList select option,
.otherStakeholdersImpacted .guideFieldWidget.dropDownList select option,
.incidentCriticalServices .guideFieldWidget.dropDownList select option,
.impacttoPaymentSystems .guideFieldWidget.dropDownList select option,
.systemicImpact .guideFieldWidget.dropDownList select option {
  background-color: #333;
  color: #fff;
}

@media (max-width: 767px) {
  .natureOfIncident .guideFieldLabel.top,
  .otherStakeholdersImpacted .guideFieldLabel.top,
  .incidentCriticalServices .guideFieldLabel.top,
  .impacttoPaymentSystems .guideFieldLabel.top,
  .systemicImpact .guideFieldLabel.top {
    margin-left: 10px;
  }
}

#guideContainer-rootPanel-submit_copy___widget {
  margin: 25px 0 31px 60px;
  background-color: #333;
  border-color: #333;
}

#guideContainer-rootPanel-submit_copy___widget .iconButton-label {
  padding: 0 10px;
}

@media (max-width: 767px) {
  .guideFieldNode.guideCaptcha {
    margin: 0 50px;
  }
}

.guideFieldNode.guideCaptcha .guide-af-captcha {
  padding: 0px 15px 15px;
}

.guideFieldNode.guideCaptcha .guide-af-captcha .afcaptcha-img {
  padding: 5px;
  margin-bottom: 0;
}

.guideFieldNode.guideCaptcha .guide-af-captcha input.afcaptcha-refresh-btn:hover {
  background-color: #333;
  color: #fff;
  border: none;
}

.datepicker-calendar-icon {
  margin: 8px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  border: 1px solid #888;
  width: 50%;
}

@media (max-width: 767px) {
  .modal-content {
    width: 75%;
  }
}

.modal-content .modal-header {
  display: block;
  padding: 20px;
  color: white;
  background: #333;
}

.modal-content .modal-header h2 {
  padding-left: 20px;
}

@media (max-width: 767px) {
  .modal-content .modal-header h2 {
    font: size 1.5rem;
  }
}

.modal-content .modal-header .close {
  font-size: 35px;
  margin-top: -11px;
  color: white;
}

@media (max-width: 767px) {
  .modal-content .modal-header .close {
    font-size: 25px;
  }
}

.modal-content .modal-body p {
  margin-left: 30px;
  font-size: 20px;
  font-weight: bold;
}

.modal-content .modal-footer {
  display: flex !important;
  justify-content: flex-start;
}

.modal-content .modal-footer #okButton {
  margin-left: 20px;
  padding: 10px 25px;
}

.modal-content .modal-footer #okButton:hover {
  background: #333;
  border: none;
}

.close,
#okButton {
  cursor: pointer;
}

input::placeholder,
textarea::placeholder {
  font-family: Arial;
}