body {
    /*padding-top: 50px;
    padding-bottom: 20px;*/
    font-family: Arial;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

    body.login-page, body.start-page {
        background-color: #0000a0;
    }

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}


/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    /*max-width: 280px;*/
}


.icon {
    margin-right: 5px;
    color: #0000a0;
    
}

    .icon:hover {
        text-decoration: none;
        cursor: pointer;
    }

.icon.error {
    color: red;
}

.icon-last {
    margin-right: 0;
    text-decoration: none;
    color: #0000a0;
}

    .icon-last:hover {
        text-decoration: none;
    }

.icon.disabled {
    opacity: 0.5;
}

.marscard {
    width: 20px;
    height: 30px;
    border: 1px solid black;
    display: inline-block;
    margin-right: 5px;
    text-align: center;
}


.card-red {
    background-color: red;
}

.card-yellow {
    background-color: yellow;
}

.card-green {
    background-color: green;
}

.card-white {
    background-color: white;
}

#app-title {
    color: #0000a0;
    font-size: 1pt;
    padding-top: 60px;
    font-family: 'Arial Black';
}

#loginForm {
    padding-top: 100px;
}

    #loginForm .form-control {
        border-radius: 0;
        min-width: 280px;
        /*width: 100%;
        height: 50px;*/
        /*padding: 25px 40px 25px 40px;*/
        border: 1px solid #fff;
        color: #0000a0;
        text-align: center;
        font-size: 14pt;
    }

    #loginForm #login-message {
        color: #fff;
        font-size: 18pt;
        margin-bottom: 30px;
        font-family: Arial;
    }

    #loginForm #forgot-password {
        color: #00d7b9;
    }

.btn-login {
    background-color: #00d7b9;
    color: #0000a0;
    padding: 0px 15px 0px 15px;
    font-size: 14pt;
}

.white-text {
    color: #fff;
    font-family: Arial Black;
}
#start-page {
    background-color: #0000a0;
    color: #fff;
    padding: 0 40px 100px 40px;
    font-family: Arial Black;
}

    #start-page #choose-tile {
        padding: 30px 0px 30px 0;
        font-size: 20pt;
    }

.tile-img-home {
    background: url('/Content/img/tiles/Home.png');
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: center center;
    z-index: 100;
}
.tile-img-bibliotekaDokumentow {
    background: url('/Content/img/tiles/BibliotekaDokumentow.png');
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: center center;
    z-index: 100;
}
.tile-img-wiadomosci {
    background: url('/Content/img/tiles/Wiadomosci.png');
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: center center;
    z-index: 100;

}
.tile-img-firma {
    background: url('/Content/img/tiles/Firma.png');
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: center center;
    z-index: 100;
}
.tile-img-user {
    background: url('/Content/img/tiles/user.png');
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: center center;
    z-index: 100;
}
.tile {
    width: 100%;
    height: 250px;
    background-color: #fff;
    color: #000;
    font-family: Arial Black;
    text-align: center;
    position: relative;
    display: block;
}

    .tile h2 {
        position: absolute;
        bottom: 0;
        width: 100%;
        margin: 0px auto;
        font-size: 1.5vw;
        padding: 0 0 10px 0;
        color: #000;
    }

footer {
    background-color: #fff;
    padding-top: 18px;
}

.login-page footer, .start-page footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

header {
    background-color: #fff;
}

.navbar-nav .nav-item.icon-user{
    background-image: url('/Content/img/tiles/Firma.png');
    background-repeat: no-repeat;
    background-position: 5% 50%;
}

.navbar-nav .nav-item.icon-home {
    background-image: url('/Content/img/icons/Home_min.png');
    background-repeat: no-repeat;
    background-position: 5% 50%;
}
.navbar-nav .nav-item.icon-bibliotekaDokumentow {
    background-image: url('/Content/img/icons/BibliotekaDokumentow_min.png');
    background-repeat: no-repeat;
    background-position: 5% 50%;
}
.navbar-nav .nav-item.icon-wiadomosci {
    background-image: url('/Content/img/icons/Wiadomosci_min.png');
    background-repeat: no-repeat;
    background-position: 5% 50%;
}
.navbar-nav .nav-item.icon-ustawienia {
    background-image: url('/Content/img/icons/Ustawienia_min.png');
    background-repeat: no-repeat;
    background-position: 5% 50%;
}
.navbar-collapse.show .nav-item.icon-user {
    background-position: 20px 50%;
}


.preformatted {
    white-space: pre-wrap;
}

.card-header {
    padding:0.50rem 1.25rem
}

.required:after {
    content: "*";
    font-weight: bold;
    color: red;
    padding-left: 5px;
}

.button_margin_left {
    margin-left: 10px;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #000;
    display: none;
    opacity: 0.5;
}

.load {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    display: none;
}

    .load hr {
        border: 0;
        margin: 0;
        width: 40%;
        height: 40%;
        position: absolute;
        border-radius: 50%;
        animation: spin 2s ease infinite;
    }

    .load :first-child {
        background: #19A68C;
        animation-delay: -1.5s;
    }

    .load :nth-child(2) {
        background: #F63D3A;
        animation-delay: -1s;
    }

    .load :nth-child(3) {
        background: #FDA543;
        animation-delay: -0.5s;
    }

    .load :last-child {
        background: #193B48;
    }

@keyframes spin {
    0%, 100% {
        transform: translate(0)
    }

    25% {
        transform: translate(160%)
    }

    50% {
        transform: translate(160%, 160%)
    }

    75% {
        transform: translate(0, 160%)
    }
}
.spinInputCenter {
    text-align: center;
}

.js .load, .js #loader-wrapper {
    display: block;
}