body {
    background-color: #748CAB;
    font-family: Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#body-login {
    background: #425985;
}

@media (min-width: 992px) {
    #body-login {
        background: linear-gradient(45deg, #75A5B4, #425985, #566e99);
        background-size: 300% 300%;
        animation: loginbg 26s ease infinite;
    }

    @keyframes loginbg {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }
}


#login-bar {
    background: rgb(13,19,33);
    background: linear-gradient(62deg, rgba(13,19,33,1) 0%, rgba(116,140,171,1) 100%); 
}

#logout:hover {
    opacity: .7;
}

#admin-container {
    border: 1px solid #1D2D44;
}

#content-container {
    min-height: 720px;
}

footer {
    background: #1D2D44;
}


.pblue-border {
    border: 2px solid #1D2D44;
}

.pblue-bg {
    background: #1D2D44;
}

.deblue-bg {
    background: #304F6A;
}

#content-container a {
    color: #1D2D44;
}

#content-container a:hover {
    opacity: .7;
}

.hr-pblue {
    opacity: 1;
    border: 0;
    height: 4px;
    background: #1D2D44;
    background: linear-gradient(36deg, #1D2D44 0%, #a9b7c4 100%);
    border-radius: 2px;
}

.steel-gradient {
    background: rgb(13,19,33);
    background: linear-gradient(62deg, rgba(13,19,33,1) 0%, rgba(116,140,171,1) 100%);
}

label:not([for='']) {
    cursor: pointer;
}

/* Bootstrap - Navigation */

nav {
    background: #1D2D44;
}

nav a {
    color: #fff;
    text-decoration: none;
}

nav a {
    border-bottom: 2px solid transparent;
}

nav li a:hover {
    background-color: #354863;
    border-bottom: 2px solid #748CAB;
}

.navbar-toggler {
    color: #fff;
}

/* SIZING */

 .w-90px {
    width: 90px !important;
 }

 .w-5 {
    width: 5% !important;
}

.w-10 {
    width: 10% !important;
}

 .w-15 {
    width: 15% !important;
 }

 .w-20 {
    width: 20% !important;
 }

/* BOOTSTRAP - Form elements */
.btn-primary {
    background: #46576E;
}

.btn-primary:hover {
    background: #46576Ede;
}

.btn-primary {
    color: #fff;
    border-color: #46576E;
}

.btn-primary:hover {
    border-color: #3E5C76de;
}

.btn-primary:active {
    background: #46576Ede !important;
}

.btn-secondary {
    background: #1D2D44;
}

.btn-secondary:hover {    
    background: #1D2D44cc;
}

.hamburger {
    background: #1D2D44ed;
    padding: 20px
}

.input-group-text {
    border-radius: .215rem;
    background: #46576E;
    color: #fff;
    border-color: #46576E;
}


.input-group>.form-control {
    border-bottom-right-radius: .215rem;
    border-top-right-radius: .215rem;
}

.form-control {
    border-color: #46576E;
}

input[type=range] {
    accent-color: #fff !important;
}

input:hover {
    cursor: pointer;
}

.breadcrumb a:hover {
    background: transparent;
    color: #fff;
    text-decoration: none;
}

#files-toolbar #search {
    margin-top: 2px;
}

/* TAB NAVIGATION */

.tab-content {
    border: 1px solid #ccc;
    border-top: 0;
}

/*  FILES */

.files-container .breadcrumb-item a {
    color: #fff !important;
}

.files-container .breadcrumb-item a:hover {
    opacity: 1 !important;
}

.folder-path-link:hover {
    text-decoration: underline !important;
    opacity: 1;
}

#upload-dropzone {
    border: 2px dotted #F0EBD8; 
}

#upload-dropzone:hover {
    background: #F0EBD833;
    cursor: pointer;
}

.folder-icon {
    color: #FFD76A;
}

.folder-link {
    z-index: 1;
}

.folder-link:hover {
    opacity: .7;
}

.file-listing .card {
    border: 0;
}

.file-listing .card-header {
    z-index: 2;
}

.file-listing .card-header a:hover {
    opacity: .7;
}

.file-listing .card-body {
    padding-top: 0;
    padding-bottom: 0;
}

.ratings-star {
    color: #FFD76A;
}

.image {
    max-width: 178px !important;
    max-height: 128px !important;
}

.file-listing a {
    text-decoration: none;
}

/* Files - Details icons TODO */
/* Files - Medium icons TODO */

/* Files - Large icons */
.file-listing-lg .card-header {
    position: absolute;
    top: 0;    
    right: 0;
    background: #00000052;
}

.file-listing-lg > i {    
    opacity: .5;
}

.file-listing-lg > i:hover {
    opacity: 1;
}

.figure.file-lg,
.figure.folder-lg
{
    width: 200px;
    height: 200px;
}

.file-lg img {
    max-height: 200px !important;
    max-width: 200px !important;
    margin-left: 15px;
    margin-right: 15px
}

.folder-lg {
    height: 200px !important;
    width: 200px !important;
    margin-left: 15px;
    margin-right: 15px
}

#image-modal .modal-body {
    background: #354863;
}

#image-modal .modal-header,
#delete-modal .modal-header {
    border-top-right-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
}   

#image-modal .modal-footer,
#delete-modal .modal-header {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}   

#image-modal .modal-body {
    background: transparent;
}

/* ANIMATIONS */
.fadein {
    animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeout {
    animation: fadeout 2s;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}