body {
  display: flex;
  color: #333333;
  background-color: #e1e1e1; 
  flex-direction: column;
  padding: 0;
  margin: 10px 0;
  min-height: 100vh;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.account__container {
  box-sizing: border-box;
  max-width: 1200px;
  background-color: #ededed;
  padding: 20px;
  margin: 0 auto;
  min-width: 300px;
  height: 100%;
}

.account__logo {
  height: 120px;
  width: auto;
}

a {
  font-size: larger;
}

/* basic */

select.form-control {
  display: flex;
  height: 32px;
  border:0px;
  outline:0px;
  border-radius: 5px;
  background-color: #fff;
  -moz-box-sizing: content-box;
  -webkit-box-sizing:content-box;
  box-sizing:content-box;
}

.content-between {
  display:flex;
  justify-content: space-between;
}

h1 {
  font-size: 1.7em;
  font-weight: bolder;
  letter-spacing: 1px;
  line-height: 1.1; 
  margin: 0 0 10px; 
}

hr {
  width: 90%;
  margin-top: 20px;
  border-bottom: 1px solid 1px solid #ccc;

}

.d-none {
  display: none;
}

.d-flex {
  display:flex!important;
}

form {
  margin: 0;
}

nav {
  display: none;
}

.ml-0 {
  margin-left: 0rem!important;
}

.ml-1 {
  margin-left: .5rem!important;
}

.ml-2 {
  margin-left: 1rem!important;
}

.ml-3 {
  margin-left: 1.5rem!important;
}

.mr-1 {
  margin-right: .5rem!important;
}

.mr-2 {
  margin-right: 1rem!important;
}

.mr-3 {
  margin-right: 1.5rem!important;
}

.mt-1 {
  margin-top: .5rem!important;
}

.mt-2 {
  margin-top: 1rem!important;
}

.mt-3 {
  margin-top: 1.5rem!important;
}

.mb-1 {
  margin-bottom: .5rem!important;
}

.mb-2 {
  margin-bottom: 1rem!important;
}

.mb-3 {
  margin-bottom: 1.5rem!important;
}

.text-link {
  color: #1aa6eb;
  cursor: pointer;
}

.text-link:hover {
  text-decoration: underline!important;  
}

a:link {
  color: #00a7ff;
}

a:visited {
  color: #00a7ff;
}

a:hover {
  text-decoration: underline!important;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* body */

.account__group {
  text-align: center;
  margin: 20px 0 20px 0;
}

/* forum */

.account__form { 
  display: flex;
  flex-direction: column;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 5px;
}

.account__form .site-logo {
  display: block;
  text-align: center;
}

.account__form .input {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.account__form label {
  display: block;
  margin-bottom: 5px;
}

.account__form input[type="email"],
.account__form input[type="text"] {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;  
  height: 32px;
  outline:0px;
  background-color: #fff;
  -moz-box-sizing: content-box;
  -webkit-box-sizing:content-box;
  box-sizing:content-box;
}

.account__form input[type="submit"] {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

ul.userinfo {
  display: flex;
  flex-direction: column;
  padding-left: 0;  
}

ul.userinfo > li {
  display: flex;  
  padding: 5px 0;
  border-bottom: 1px solid #b5b5b5;
  width: 100%;
}

ul.userinfo > li > span {
  display: flex;  
  width: 50%;
}

ul.userlist {
  display: flex;
  flex-direction: column;
  padding-left: 0;  
}

ul.userlist > li {
  display: flex;  
  border-bottom: 1px solid #b5b5b5;
  padding: 5px 0;
  width: 100%;
}

ul.userlist > li > span {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 5px;
  width: 70%;
}

ul.userlist > li > span:first-child { 
  width: 30%;
}

ul.userlist > li.role-disabled {
  background-color: #c9c9c9;
  opacity: 0.7;
}

.role-administrator {
  display: inline-flex;
  background-color: #ff3434;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 3px;
  color: #ffffff;
}

.role-moderator {
  display: inline-flex;
  background-color: #eb8d00;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 6px;
  color: #ffffff;
}

.role-user {
  display: inline-flex;
  background-color: #ffffff;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 6px;  
  color: #222;
}


ul.userlist > li > span > a {
 text-decoration: underline;
 font-weight: bolder;
}

ul.userlist > li > span > a:hover {
  text-decoration: none;
}

.btn-uploader {
  margin: auto;
  display: flex;
  justify-content: center;
  width: 100px;
  border: 1px solid #cecece;
  background-color: aliceblue;
  border-radius: 5px;
  cursor: pointer;
  padding: 2px 10px;
}

.forum__logo {
  height: 120px;
  width: auto;
  text-align: center;
  margin: auto;
}

.img-fluid {  
  text-align: center;
  margin: auto;
}

.icon-arrow-left { 
  padding: 2px; 
  width: 30px;
  height: 30px;
  content: url('../images/icon-arrow-left.svg');
  cursor: pointer;
}

/* --- FLAT MODERN AUTH DESIGN --- */

body {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  color: #222;
}

.account__container {
  background: rgba(255,255,255,0.98);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
  border-radius: 24px;
  padding: 40px 32px 32px 32px;
  margin: 40px auto 0 auto;
  max-width: 500px;
  min-width: 300px;
  width: 100%;
  transition: box-shadow 0.3s;
}

.account__container:hover {
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.18);
}

.account__form {
  background: none;
  border-radius: 18px;
  padding: 0;
  box-shadow: none;
}

.account__form h1 {
  font-size: 2em;
  font-weight: 700;
  margin-bottom: 24px;
  color: #222;
  letter-spacing: 1px;
}

.account__form .input {
  margin-bottom: 18px;
}

.account__form label {
  font-size: 1em;
  color: #555;
  margin-bottom: 6px;
}

.account__form input[type="email"],
.account__form input[type="text"],
.account__form input[type="password"] {
  border: none;
  border-radius: 12px;
  background: #ededed;
  padding: 12px 16px;
  font-size: 1em;
  color: #222;
  transition: box-shadow 0.2s, border 0.2s;
  outline: none;
}

.account__form input[type="email"]:focus,
.account__form input[type="text"]:focus,
.account__form input[type="password"]:focus {
  box-shadow: 0 0 0 2px #6ec1e4;
  background: #fff;
}

.account__form input[type="submit"] {
  background: #1e78e7;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 0;
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 10px; 
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.account__form input[type="submit"]:hover {
  background: #3791ff; 
  transform: translateY(-2px) scale(1.03);
}

.account__form a {
  color: #1e78e7;
  font-size: 1em;
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s;
}

.account__form a:hover {
  color: #217dbb;
  text-decoration: underline;
}

.icon-arrow-left {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin-right: 8px;
  filter: grayscale(1) brightness(0.5);
  transition: filter 0.2s;
}
.icon-arrow-left:hover {
  filter: none;
}

@media (max-width: 600px) {
  .account__container {
    padding: 18px 6vw 18px 6vw;
    margin: 16px 0 0 0;
    border-radius: 12px;
    box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.10);
  }
  .account__form h1 {
    font-size: 1.3em;
  }
}

/* --- END FLAT MODERN AUTH DESIGN --- */