:root{
    --primary-color: #0000FF;
    --menu: #0000FF;
    --menu-hover: #0000e3;
}

.margin-middle{
    margin-top: 3vh;
}

.login-bg{
    background-color: var(--primary-color);
}

.login-bg{
    background-color: var(--primary-color);
}

.content{
    background-color: #f4f4f4;
}


@media only screen and (max-width: 1000px) {
    .margin-middle{
        margin-top: 10px;
    }
    .thumbnail.tile:not(.small){
        height: 120px;
        width: 120px;
    }

    .thumbnail.tile.small{
        height: 100px;
        width: 100px;
    }

    a.icon>i {
        font-size: 2.3em;
    }
}

@media only screen and (min-width: 1000px) {
    .margin-middle{
        margin-top: 3vh;
    }

    .thumbnail.tile:not(.small){
        height: 170px;
        width: 170px;
    }

    .thumbnail.tile.small{
        height: 120px;
        width: 120px;
    }

    a.icon>i {
        font-size: 4em;
    }

    .border-right {
        border-right: 1px solid var(--dark);
    }
}


#app{
    min-height: 100vh;
}

.thumbnail.tile{
    background-color: var(--menu);
    display: block;
    padding: 4px;
    line-height: 1.428571429;
    border-radius: 0;
    transition: all .2s ease-in-out;
    color:white;
    margin: 0 auto 20px auto;
    text-align:center;
    cursor: pointer;
}



.tile>a {
    text-decoration: none!important;
}

.thumbnail.tile:hover{
    animation: fallPerspective .4s ease-in-out forwards;
}

@keyframes fallPerspective {
    100% { transform: scale(1.05); background-color: var(--menu-hover); }
}


a.icon>i {
    margin-top: .5em;
    left: 50%;
    display: block;
    padding-bottom: 15px;
}

a.icon{
    text-align: center;
    cursor: pointer;
}



legend{
    border-bottom: 1px solid #e5e5e5;
}

a:active, a:focus {
    outline: 0;
    border: none;
}

.dataTables_paginate{
    text-align:right!important;
}

.pagination {
    display: inline-flex!important;
}

td>b{
    font-size: 1.6em;
    cursor: pointer;
}

.card, .breadcrumb{
    background-color: rgba(250, 255, 255, 1) !important;
}

.breadcrumb-item>a{
    color:black!important;
}

.nav-link{
    background-color: white;!important;
    color: grey!important;
}


.nav-link.active{
    background-color: var(--primary-color);!important;
    color: white!important;
}

.spinner {
    display: inline-block;
    opacity: 0;
    max-width: 0;

    -webkit-transition: opacity 0.25s, max-width 0.45s;
    -moz-transition: opacity 0.25s, max-width 0.45s;
    -o-transition: opacity 0.25s, max-width 0.45s;
    transition: opacity 0.25s, max-width 0.45s;
}

.has-spinner.active {
    cursor:progress;
}

.has-spinner.active .spinner {
    opacity: 1;
    max-width: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hidden{
    display:none;
}

.removePseuso{
    padding: 6px 0px!important;
}

.removePseuso::after{
    content: '' !important;
}

.removePseuso::before{
    content: '' !important;
}

td.details-control {
    background: url('/images/details_open.png') no-repeat center center;
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('/images/details_close.png') no-repeat center center;
}

.table td {
    vertical-align: middle!important;
}

.hover:hover {
    color: red;
}

ol.breadcrumb {
    border: 1px solid rgba(0, 0, 0, 0.125)!important;
    border-radius: 0!important;
}