@import url("acec.css");

.modal-alert {		
  color: #636363;
  width: 325px;
  margin: 30px auto;
}
.modal-alert .modal-content {
  padding: 20px;
  border-radius: 5px;
  border: none;
}
.modal-alert .modal-header {
  border-bottom: none;   
      position: relative;
}
.modal-alert h4 {
  text-align: center;
  font-size: 26px;
  margin: 30px 0 -15px;
}
.modal-alert .form-control, .modal-alert {
  min-height: 20px;
  border-radius: 3px; 
}
.modal-alert .close {
      position: absolute;
  top: -5px;
  right: -5px;
}
.modal-alert .modal-footer {
  border: none;
  text-align: center;
  border-radius: 5px;
  font-size: 13px;
}
.modal-alert .icon-box {
  color: #fff;		
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: -70px;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  z-index: 9;
  background: #82ce34;
  padding: 15px;
  text-align: center;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.modal-alert .icon-box i {
  font-size: 58px;
  position: relative;
  top: 3px;
}
.modal-alert.modal-dialog {
  margin-top: 80px;
}

/**
<div id="idModal" class="modal fade">
  <div class="modal-dialog modal-alert">
    <div class="modal-content">
      <div class="modal-header">
        <div class="icon-box bg-warning">
          <img src="images/CampanaAlerta.svg" class="img-fluid" alt="ACEC - Alerta de comunicados"/>
        </div>				
        <h4 class="modal-title">Importante!</h4>	
      </div>
      <div class="modal-body">
        <p class="text-center">Your booking has been confirmed. Check your email for detials.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-acec" data-><i class="fas fa-times"></i> Cerrar</button>
      </div>
    </div>
  </div>
</div>