body {
    background-color: black;
    user-select: none;
}

.active {
    cursor: pointer;
}

.hidden {
    display: none;
}

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.background-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.space-bottom {
    margin-bottom: 25px;
}

.space-top {
    margin-top: 25px;
}

.space-top-large {
    margin-top: 50px;
}

.font-white-transparent {
    color: #ffffffd1
}

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

.custom-form-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.custom-form-layout .custom-form-layout-content {
  min-width: 0;
  flex-grow: 1;
}

.button-inactive {
    font-weight: bolder;
    font-size: 25px;
    border: 1px solid #ffffffb0;
    display: inline;
    padding: 0px 20px 5px;
    border-radius: 34px;
    color: #ffffffd1;
    text-align: center;
    background: #00000061;
    color: #ffffff7a;
    border-color: #ffffff7a;
}

.login-button {
    font-weight: bolder;
    font-size: 25px;
    border: 1px solid #ffffffb0;
    display: inline;
    padding: 0px 20px 5px;
    border-radius: 34px;
    color: #ffffffd1;
    text-align: center;
}

.button {

}

.button:hover {
    box-shadow: 0 0 20px #fff;
    /*background: #ffffff47;*/
    border: 1px solid #fff0;
    text-shadow: 0 0 2px white, 0 0 5px white, 0 0 5px white
}

.link {

}

.link:hover {
    text-shadow: 0 0 2px white, 0 0 5px white, 0 0 5px white;
    /*font-weight: bolder;*/
}

.login-body {
    background-image: url('../assets/img/login.jpg');
}

.error-body {
    background-image: url('../assets/img/error.jpg');
}

.gallery-body {
    background-image: url('../assets/img/gallery.jpg');
}

.registration-body {
    background-image: url('../assets/img/registration.jpg');
}

.verify-email-body {
    background-image: url('../assets/img/verify-email.jpg');
}

.home-body {
    background-image: url('../assets/img/home.jpg');
}

.unauthorized-body {
    background-image: url('../assets/img/error.jpg');
}

.file-manager-body {
    background-image: url('../assets/img/file-manager.jpg');
}

.game-body {
    background-image: url('../assets/img/game.jpg');
}

.lone-wolf-body {
    background-image: url('../assets/img/lone-wolf.jpg');
}

.sai-body {
    background-image: url('../assets/img/sai.jpg');
}

.vocabulary-trainer-body {
    background-image: url('../assets/img/vocabulary-trainer.jpg');
}

.admin-body {
    background-image: url('../assets/img/admin.jpg');
}

.background-transparent {
    background:  #000000a1;
}

.input-error::placeholder {
    color: rgba(255, 0, 0, 0.62);
}

.display-block {
    display: block;
}

.loader {
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 800px;
}

.inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid #EFEFFA;
}

.inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid #EFEFFA;
}

.inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid #EFEFFA;
}

@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}

.padding-top {
    padding: 4rem 0;
}

.data-table-wrapper {
    border: 2px solid #ffffffb0;
    /*border-radius: 10px;*/
    box-shadow: 0 0 20px #fff;
    background: #000000a1;
}

.data-table-wrapper td {
    padding: 0 0.5rem;
}

.data-table {
    background: transparent;
}

.data-table-close {
    display: inline;
    float: right;
}

.data-table tr {
    /*background: #00000096 !important;*/
    background:  transparent !important;
    border-top: 1px solid #dee2e6 !important;
}

.data-table td, th {
    border-top: 1px solid #dee2e6 !important;
    padding: 0 0.5rem;
}

.dataTables_length {
    color: #ffffffd1 !important;
}

.dataTables_length select {
    color: #ffffffd1 !important;
    background:  black !important;
}

.dataTables_filter {
    color: #ffffffd1 !important;
}

.dataTables_filter input {
    color: #ffffffd1 !important;
    box-shadow: 0 0 10px white;
}

.dataTables_filter input:focus {
    outline: none !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 0 10px white;
}

.dataTables_info {
    color: #ffffffd1 !important;
}

.paginate_button {
    color: #ffffffd1 !important;
}

.current {
    background: linear-gradient(to bottom, #585858 0%, #111 100%) !important;
}

/*
.chart {
    width: 300px;
    height: 150px;
}
 */

.demo-container {
    background: #ffffff85 !important;
}

.dataTables_wrapper {
    /*
    overflow: scroll;
    height: 350px;
     */
}

.align-right {
    text-align: right;
}

.inactive {
    cursor: default;
}

.file-manager-tile {
    background-image: url('../assets/img/file-manager-tile.png');
    background-repeat: no-repeat;
    min-height: 3.1rem;
    background-size: contain;
    background-position: center;
}

.tile {
    padding: 1rem;
    margin: 1rem;
    /*border: 2px solid rgba(255, 255, 255, 0);*/
    max-width: 9rem;
}

.tile:hover {
    background: #ffffffa1;
    /*
    border: 2px solid #ffffffb0;
    border-radius: 10px;
    box-shadow: 0 0 20px #fff;
     */
}

.profile-tile {
    background-image: url('../assets/img/profile-tile.png');
    background-repeat: no-repeat;
    min-height: 3.1rem;
    background-size: contain;
    background-position: center;
}

.game-tile {
    background-image: url('../assets/img/ad_and_d.png');
    background-repeat: no-repeat;
    min-height: 3.1rem;
    background-size: cover;
    background-position: center;
}

.vocabulary-trainer-tile {
    background-image: url('../assets/img/vocabulary-trainer-tile.jpg');
    background-repeat: no-repeat;
    min-height: 3.1rem;
    background-size: contain;
    background-position: center;
}

.sai-tile {
    background-image: url('../assets/img/sai-tile.jpg');
    background-repeat: no-repeat;
    min-height: 3.1rem;
    background-size: contain;
    background-position: center;
}

.lone-wolf-tile {
    background-image: url('../assets/img/lone-wolf-tile.jpg');
    background-repeat: no-repeat;
    min-height: 3.1rem;
    background-size: contain;
    background-position: center;
}

.admin-tile {
    background-image: url('../assets/img/admin-tile.jpg');
    background-repeat: no-repeat;
    min-height: 3.1rem;
    background-size: contain;
    background-position: center;
}

.scrollable-container {
    overflow: scroll;
    max-height: 45rem;
}

.margin-right {
    margin-right: 0.6rem;
}

.file-manager-button {
    max-width: 12.3rem;
}

.folder {
    background-image: url('../assets/img/folder.png');
    min-height: 3rem;
    /**max-width: 3.5rem;**/
    margin: auto;
    min-width: 4rem;
}

.create-folder {
    background-image: url('../assets/img/create-folder.png');
    min-height: 4rem;
    min-width: 4rem;
    border: 2px solid rgba(255, 255, 255, 0);
    padding: 0 0.2rem;
    text-align: center;
}

.create-folder:hover {
    border: 2px solid #ffffffb0;
    border-radius: 10px;
    box-shadow: 0 0 20px #fff;
}

.upload {
    background-image: url('../assets/img/upload.png');
    min-height: 4rem;
    min-width: 4rem;
    border: 2px solid rgba(255, 255, 255, 0);
    padding: 0 0.2rem;
    text-align: center;
    margin-right: 1rem;
}

.upload:hover {
    border: 2px solid #ffffffb0;
    border-radius: 33px;
    box-shadow: 0 0 20px #fff;
}

.document {
    background-image: url('../assets/img/document.png');
    min-height: 3rem;
    max-width: 3.5rem;
    margin: auto;
}

.file {
    border: 2px solid rgba(255, 255, 255, 0);
    padding: 0 0.2rem;
    min-width: 4rem;
    text-align: center;
    max-height: 4.8rem;
}

.file:hover {
    border: 2px solid #ffffffb0;
    border-radius: 10px;
    box-shadow: 0 0 20px #fff;
}

.file-manager-image {
    max-width: 30rem;
}

.file-dialog {
    margin: 0 0.3rem;
    padding: 0 0.3rem;
    background: #00000096;
}

.edit-name-dialog {
    max-height: 7.5rem;
}

.underlined {
    border-bottom: 1px solid #ffffffb0;
}