html,
body {
  height: 100%;
  background-color: #121c20;
}

.flex-center-items {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.check-button {
  margin: 0;
}

.form-checkbox {
  margin: 0 20px;
}

.form-checkbox:checked {
  background-color: #67C23A;
}

.input-form {
  text-indent: 0px;
  font-size: 16px !important;
  background: #2c2c2c;
  color: white;
  height: 42px;
}

.google-button:hover {
  background: #bac2cf9e;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}


.input-form:focus {
  background-color: #2c2c2c21;
}

.footer-logo:hover {
  color: #2c2c2c;
}

form label {
  text-align: left;
  color: #fff;
}

.background-image {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/auth/assets/img/background-2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
}

.register-form {
  border-radius: 3px;
  padding-bottom: 1.4rem;
  box-shadow: inset 0px 0px 20px 1px #8b8b8bd4;
  background-color: #28282800 !important;
}

button:hover {
  color: #2c2c2c !important;
  background-color: #E8F0FE !important;
}

.button-google {
  margin: 20px 0 0 0;
}

.icon-box {
  background: #E8F0FE;
  color: #403f3ff2;
  font-size: 18px;
  display: flex;
  cursor: pointer;
  position: relative;
  top: 38px;
  width: 31px;
  height: 37px;
  margin-right: 228px;
  font-weight: 600;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

input {
  margin-bottom: -35px;
  background-color: #2c2c2c;
  max-width: 260px;
  text-indent: 35px;
  padding: 10px 0;
  border-radius: 0px;
}

.logo-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.login {
  color: white;
  margin: 10px 0 10px 0;
  font-family: 'Poppins', sans-serif;
}

.card .card-header {
  margin: 10px 0 0 0;
}

.footer {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
}

.background-image {
  color: #ece6e6;
}

.complete-button {
  margin: 65px 0 0 0;
}

.round-1 {
  border-radius: 1px;
}

.role-card {
  border-radius: 3px;
  padding-bottom: 1.4rem;
  box-shadow: inset 0px 0px 20px 1px #8b8b8bd4;
  background-color: #28282800 !important;
  margin: 0 -10px;
}

.role-title {
  font-size: xx-large;
}

.tab-clicked {
  border: 1px solid #67C23A;
}


.tab-role {
  transition: all 0.5s ease;
}

.tab-role:hover {
  background-color: #67C23A !important;
}

.tab-clicked-kalathos {
  border: 1px solid #F2711C;
}

.tab-role-kalathos {
  transition: all 0.5s ease;
}


.tab-role-kalathos:hover {
  background-color: #F2711C !important;
}


.message-card {
  border-radius: 3px;
  box-shadow: inset 0px 0px 20px 1px #8b8b8bd4;
  background-color: #28282800 !important;
  padding: 10rem;
}

.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-width {
  margin: 0 auto;
  width: 75%;
}

.signup-card {
  border-left: 1px solid #ffefef;
  background: #1818188f;
}

.sign-in {
  background-color: #67C23A;
  margin: 35px 0;
}

.access-button {
  position: absolute;
  top: 70px;
  width: 105px;
  text-align: center;
  background-color: #67C23A;
  border: none;
  left: 160px;
}

.access-button:hover{
  color: #2c2c2c !important;
  background-color: #E8F0FE !important;
}
.prev-next:hover {
  background-color: #2c2c2c !important;
  color: #E8F0FE !important;
  cursor: pointer;
  
}
@media only screen and (max-width: 380px) {
  .card-width {
    width: 100%;
  }

  .message-card {
    padding: 5rem;
  }

  .role-card {
    width: 340px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
  }

  form {
    padding: 15px 13px 0 0 !important;
  }
  .access-button{
    margin: 7px 0 0 -16px !important;
  }
  .responsive-page-buttons {
    width: 238px;
    margin: 0 0 0 -93px;
}
  
  
}

@media only screen and (max-width: 800px) {
  
  .responsive {
    width: 100%;
  }

  .responsive-card {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
  }

  .responsive-organisation {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .card-organisation{
    margin: 10px auto !important;
    height: 125px !important;
    width: 100% !important;
  }
  .sm-card {
    margin: 900px 0 0 0 !important;
    width: 100%;
  }
  .footer{
    position: absolute !important;
    bottom: -195% !important;
  }
  .responsive-paginate{
    margin: 0 auto !important;
  }
  .responsive-page-buttons {
    width: 300px;
    margin: 0 0 0 -20px;
}
}