.wrapper {
    @apply w-full h-full bg-grey-600
    grid place-items-center
}
.container {
    @apply h-[99%] w-full;
}
.box {
    @apply bg-white-500 w-[50%] flex flex-col
    max-w-[25rem] h-[75%] rounded-xl
}
.container input, .input_wrapper input {
   @apply h-12 rounded w-[90%] transition-all font-Coda
   px-3 text-white-500 focus:border-red-500
   border-b-4 border-red-300 bg-transparent;

   /* @apply h-12 rounded w-[90%] border  border-grey-400
   px-3 mt-6 text-common-black focus:border-common-black; */
}
.input_wrapper {
    @apply w-[90%] border-red-300 border-b-4 rounded relative
}
.input_wrapper input {
    @apply rounded-none rounded-t border-b-0 float-left w-full;
}
.password_icon {
    @apply absolute right-0 z-0
}
.password_icon svg {
    @apply h-6 w-6 mt-5 cursor-pointer  text-white-500
    transition-all hover:brightness-90
}
.container input:first-child {
    @apply mt-2
}
.container input::placeholder {
    @apply text-white-500 opacity-50;
    user-select: none;
    -webkit-user-drag: none;
  }
  
  .container input:-ms-input-placeholder { 
    @apply text-white-500 opacity-50;
    user-select: none;
    -webkit-user-drag: none;
  }
  
  .container input::-ms-input-placeholder { 
    @apply text-white-500 opacity-50;
    user-select: none;
    -webkit-user-drag: none;
  }
.login {
    @apply text-white-500 disabled:cursor-not-allowed
    bg-green-500 active:bg-green-500 enabled:hover:bg-green-500
    enabled:hover:bg-opacity-90 font-Coda disabled:opacity-80
    outline-none  active:bg-opacity-80
    font-medium rounded-sm text-sm px-5 py-2.5 text-center
    w-[90%] mt-6 transition-all;
    user-select: none;
    -webkit-user-drag: none;
}
.logout {
    @apply text-white-500 disabled:cursor-not-allowed
    bg-red-500 active:bg-red-500 enabled:hover:bg-red-500
    enabled:hover:bg-opacity-90 font-Coda disabled:opacity-80
    outline-none  active:bg-opacity-80
    font-medium rounded-sm text-sm px-5 py-2.5 text-center
    w-[90%] mt-6 transition-all;
    user-select: none;
    -webkit-user-drag: none;
}
.login:disabled {
    @apply cursor-not-allowed brightness-90  bg-green-600 active:bg-green-600 hover:bg-green-600;
}
.divider_parent {
    @apply flex justify-between items-center w-[90%]
}
.divider {
    @apply w-full border-t border-grey-400
}
.divider_parent span {
    @apply p-2 text-grey-400 uppercase mb-1 font-Coda;
    user-select: none;
    -webkit-user-drag: none;
}
.icon {
    @apply w-8 h-8 mr-1 -mt-1  inline-block
}
/* .socials button {
    @apply text-white-500 hover:bg-opacity-90 outline-none
    active:bg-opacity-80 font-medium rounded-sm text-sm px-5
    py-2.5 text-center disabled:active:bg-opacity-100 disabled:hover:bg-opacity-100
    disabled:brightness-[.7] disabled:cursor-not-allowed
    inline-flex items-center
    w-[90%] font-Coda
    mr-2 mb-2 transition-all;
    user-select: none;
    -webkit-user-drag: none;
} */
.reddit {
    @apply bg-[#FF5700]
}
.google {
    @apply bg-[#4285F4]
}
.discord {
    @apply bg-[#7289DA]
}
.steam {
    @apply bg-[#171a21] enabled:hover:bg-[#171a21]/80 !important
}
.socials {
    @apply grid place-items-center
}
.continue {
    @apply w-[50%] mb-6 h-10 font-bold text-xl
    bg-red-400 rounded-sm hover:bg-red-500 transition-all
}
.cancel {
    @apply w-[50%] h-10 font-bold text-xl
    bg-green-400 rounded-sm hover:bg-green-500 transition-all
}

/* On smaller screens increase box width/height */
@media (max-width: 755px) {
    .container {
        @apply h-[96%]
    }
    .cancel, .continue {
        @apply w-full
    }

    .input_wrapper input {
        @apply w-[85%]
    }
}
@media (max-width: 455px) {
    .container {
        @apply h-[92%]
    }
    .input_wrapper input {
        @apply w-[80%]
    }
}