html {
   background-color: #3a3a3aa2;
   height: 100%;
   touch-action: none;    
}

body {
   height: 100%;
   margin: 0;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

::-webkit-scrollbar {
   width: 5px;
}


/* Handle */

::-webkit-scrollbar-thumb {
   background: #888;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
   background: #555;
}

/* Text Align */

.text-c {
   text-align: center;
}

.text-l {
   text-align: left;
}

.text-r {
   text-align: right
}

.text-j {
   text-align: justify;
}

/* Text Color */

.text-whitesmoke {
   color: whitesmoke
}

.text-darkyellow {
   color: rgba(255, 235, 59, 0.432)
}

/* Lines */

.line-b {
   border-bottom: 1px solid #FFEB3B !important;
}

/* Buttons */

.button {
   border-radius: 3px;
}

.form-button {
   background-color: rgba(30, 121, 241, 0.24);
   border-color: rgba(30, 121, 241, 0.24);
   color: #e6e6e6;
   height: 40px;
   border-radius: 10px;
}

.form-button:hover, .form-button:focus, .form-button:active, .form-button.active, .form-button:active:focus, .form-button:active:hover, .form-button.active:hover, .form-button.active:focus {
   background-color: rgba(255, 235, 59, 0.473);
   border-color: rgba(255, 235, 59, 0.473);
   color: #e6e6e6;
}

.button-l {
   width: 100% !important;
}

/* Margins g(global) - l(left) - r(right) - t(top) - b(bottom) */

.margin-g {
   margin: 15px;
}

.margin-g-sm {
   margin: 10px;
}

.margin-g-md {
   margin: 20px;
}

.margin-g-lg {
   margin: 30px;
}

.margin-l {
   margin-left: 15px;
}

.margin-l-sm {
   margin-left: 10px;
}

.margin-l-md {
   margin-left: 20px;
}

.margin-l-lg {
   margin-left: 30px;
}

.margin-r {
   margin-right: 15px;
}

.margin-r-sm {
   margin-right: 10px;
}

.margin-r-md {
   margin-right: 20px;
}

.margin-r-lg {
   margin-right: 30px;
}

.margin-t {
   margin-top: 15px;
}

.margin-t-sm {
   margin-top: 10px;
}

.margin-t-md {
   margin-top: 20px;
}

.margin-t-lg {
   margin-top: 30px;
}

.margin-b {
   margin-bottom: 15px;
}

.margin-b-sm {
   margin-bottom: 10px;
}

.margin-b-md {
   margin-bottom: 20px;
}

.margin-b-lg {
   margin-bottom: 30px;
}

/* Bootstrap Form Control Extension */

.form-control, .border-line {
   background-color: #5f5f5f;
   background-image: none;
   border: 1px solid #424242;
   border-radius: 1px;
   color: inherit;
   display: block;
   padding: 6px 12px;
   transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
   width: 100%;
}

.form-control:focus, .border-line:focus {
   border-color: #FFEB3B;
   background-color: #616161;
   color: #e6e6e6;
}

.form-control, .form-control:focus {
   box-shadow: none;
}

.form-control::-webkit-input-placeholder {
   color: #BDBDBD;
}

/* Container */

.container-content {
   background-color: #3a3a3aa2;
   color: inherit;
   padding: 15px 20px 20px 20px;
   border-color: #FFEB3B;
   border-image: none;
   border-style: solid solid none;
   border-width: 1px 0;
}

/* Backgrounds */

.main-bg {
   background: #424242;
   background: linear-gradient( #424242, #212121);
}

/* Login & Register Pages*/

.login-container {
   max-width: 400px;
   z-index: 100;
   margin: 0 auto;
   padding-top: 50px;
}

.login.login-container {
   width: 300px;
}

.wrapper.login-container {
   margin-top: 140px;
}

.logo-badge {
   color: #e6e6e6;
   font-size: 80px;
   font-weight: 800;
   letter-spacing: -10px;
   margin-bottom: 0;
}