body {
  margin: 0;
  padding: 0;
}


.fdn {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  font-family: Arial;
  background-color: #ffa300;
}




.box-login {
  position: relative;
  width: 430px;
  height: 640px;
  left: calc(50% - 215px);
  right: 0px;
  top: calc(50% - 320px);
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

.login {
  position: relative;
  width: 400px;
  height: 580px;
  left: calc(50% - 200px);
  top: calc(50% - 270px);
  background-color: #fff;
  overflow: hidden;
}

.logo-login {
  position: relative;
  width: 350px;
  height: 90px;
  left: calc(50% - 175px);
  top: 50px;
  margin-bottom: 140px;
}

.controle-inputs {
  position: relative;
  width: 90%;
  height: auto;
  padding-left: 5%;
  padding-top: 10px;
}

.custom-input {
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  transition: all 0.3s ease-in-out;
  width: 91%;
}

.check-boxs {
  position: relative;
  float: left;
  width: 60%;

}

.controle-checkbox {
  position: relative;
  display: block;
}

.controle-checkbox label {
  position: relative;
  top: -1px;
  font-size: 11px;
}

.controle-inferior {
  position: relative;
  margin-top: 40px;
  height: 43px;
}

.esqueceu {
  position: relative;
  top: 0px;
  left: 21px;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}


/* Gira só o arco */
#g11 {
  animation: spin 2.4s linear infinite;
  /* garante que o centro de rotação seja o centro do próprio elemento */
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}