<template>
  <modal
    name="success-request-after-limit-exceeded"
    :scrollable="true"
    height="auto"
    :header-bg-variant="null"
    @closed="$emit('closed')"
    
  >
    <b-row class="d-flex justify-content-between mb-2 mt-1">
      <b-col class="d-flex modal-text-color ml-2" cols="8">
        <div class="d-flex align-self-center justify-content-center rounded-div mr-2 mt-1">
          <font-awesome-icon icon="exclamation-triangle" class="align-self-center" />
        </div>
        <div class="pt-1">
          <div class="inline-block akkurat-regular min-header-text">Alerta do Sistema </div>
          <div class="akkurat-bold max-header-text title">Solicitação de aumento de limite</div>
        </div>
      </b-col>
      <b-col class="d-flex justify-content-end mr-2 mt-1">
        <span class="close-icon" @click="closeModal">
          <font-awesome-icon icon="times" class="align-self-center" />
        </span>
      </b-col>
    </b-row>
    <div class="custom-body">

<div class="alert-msg">

<b-row >

<b-col md='12'>

<p class="text-center akkurat-bold">
Sua solicitação foi enviada com sucesso.

<br>

 Aguarde retorno!
</p>

</b-col>

</b-row>
</div>
    <b-row class="buttons">


<b-col md="12" class="text-center">

<b-button  class="btn btn-go-to-back  radius-theme btn-primary" @click="closeModal">
           Voltar
            </b-button>
</b-col>




    </b-row>
    </div>

  </modal>
</template>

<script>
 
export default {
    name: 'success-request-after-limit-exceeded',
    
    methods:{
      
        closeModal(){
            this.$modal.hide('success-request-after-limit-exceeded');
            this.$emit('closed');
        }
    }
}
</script>

<style scoped lang="scss">
@import "@/assets/css/main.scss";

.alert-msg{
    margin-top: 20px;
    padding: 0 40px;
    
}
.buttons{

    .btn-request-change-credit-limit{
        min-width: 100%;
color: #fff !important;
}

.btn-go-to-back{
    margin-left: 0px;
}

    }
.custom-body {
    margin: 10px;
}

.modal-text-color {
  color: #3e3e3e;
}

.min-header-text {
  letter-spacing: 0.2px;
  font-size: 9px;
}

.max-header-text {
  letter-spacing: 0.4px;
  font-size: 16px;
}

.close-icon {
  color: #979797;
  font-size: 20px;
}

.btn {
  margin: 10px;
  border-radius: 20px;
  width: 100%;
  max-width: 192px;
  height: 35px;
}

.btn-default {
  background: #ff9b64;
}

.rounded-div {
  background: #cb2d2d80 0% 0% no-repeat padding-box;
  svg {
    color: #cb2d2d;
  }
}

.close-icon {
  cursor: pointer;
}
</style>
