* {
    font-family: 'Century Gothic', sans-serif;
    margin: 0;
    padding: 0; }

.container {
    width: 100%;
    height: auto;
    max-width: 100%;
    padding-left: 65px;
    padding-right: 0px;
    box-sizing: border-box;
    background-color: #F8F8F8; }

.article {
    width: 100%;
    min-height: 100vh;
    float: left;
    padding: 5%;
    box-sizing: border-box;
    background-color: #FFFFFF; }

.navbarback {
    width: 100%;
    height: 100%;
    background-color: rgba(179, 179, 179, 0.8);
    position: fixed;
    z-index: 1;
    left: -100%; }

.navbar {
    width: 330px;
    height: 100vh;
    padding: 20px;
    background-color: rgba(193, 2, 48, 1);
    border-right: 1px white solid;
    color: white;
    position: fixed;
    z-index: 2;
    left: -270px;
    opacity: 0.85;
}

.navuser {
    width: 100%;
    height: 10px;}

.navicon {
    width: 45px;
    height: 45px;
    position: fixed;
    z-index: 2;
    border: 1px white solid;
    background-color: #c10230;
    color: white;
    left: 35px;
    top: 30px;
    border-radius: 100%;
    padding: 5px; }

ul {
    list-style: none; }

.navitem {
    width: 100%;
    height: auto;
    float: left;
    text-align: left;
    margin-bottom: 15px; }

.navitem label {
    width: 100%;
    padding: 2px;
    margin-bottom: 5px;
    transition: 0.3s; }

.navitemicon {
    position: absolute;
    right: 17px; }

.navitemtitle {
    font-size: 1.2em;
    margin-left: 5px; }

.navitemtitle a{
    color: white; }

.navitemsubtitle {
    font-size: 1.2em;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 50px; }

.navitemsubtitle a{
    color: white; }

.navitemsubsubtitle {
    font-size: 1.2em;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 80px; }

.navitemsubsubtitle a{
    color: white; }

.navitem a{
    text-decoration: none; }

::-webkit-scrollbar {
    display: none;
}


/*
body {
    overflow-y: hidden; 
    overflow-x: hidden; 
    }
*/

.login-container {
    width: 100%;
    height: 100%;
    background-color: #F8F8F8; }

.login {
    width: 400px;
    height: 600px;
    padding: 3%;
    border-radius: 10px;
    background-color: #FFFFFF; }

.login-img-border-botom {
    border-bottom: 5px white solid;
    padding-bottom: 5px; }

.login-h1 {
    padding: 20px;
    width: 200px;
    color: grey;
    text-align: center;
    border-bottom: 5px #c10230 solid; }

.login-button-modal {
    width: 150px;
    background-color: #c10230;
    color: white;
    padding: 10px;
    font-size: 1.3em;
    border: 2px white solid;
    border-radius: 30px; }

.bg-bar-red {
    width: 100%;
    height: 50vh;
    background-color: #c10230;
    position: absolute; z-index: 0; }

.bg-cover-layout {
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.0);
    position: absolute; z-index: 1; }

.footer {
    width: 100%;
    height: auto;
    float: left;
    padding: 20px;
    color: white;
    text-align: center;
    background-color: #c10230;
    /*background-image: url('/img/head-figures.png');*/
    background-position: right 0% bottom 0%;
    background-size: 40%;
    background-repeat: no-repeat; }

/******* Helpers *******/
.bg-red {
    background-color: #c10230; }

.w-50px {
        width: 50px; }    

.w-100px {
    width: 100px; }

.w-200px {
    width: 200px; }

.w-250px {
    width: 250px; }

.w-300px {
    width: 300px; }

.bold {
    font-weight: bold; }

.display-none {
    display: none; }

.input-style {
    width: 250px;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    border: 2px gray solid; }

h1, h2, h3, h4, h5 {
    color: black;
    text-align: left; }

p {
    color: gray;
    text-align: justify; }

.button-style {
    width: 120px;
    height: auto;
    padding: 6px;
    padding-left: 10px;
    padding-right: 10px;
    color: gray;
    font-size: 1.1em;
    border-radius: 5px;
    border: 2px gray solid;
    background-color: white;
    border-radius: 40px;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s; }

.button-style:hover {
    color: #c10230;
    font-size: 1.1em;
    color: white;
    border: 2px gray solid;
    background-color: gray; }

.dataTables_wrapper .dataTables_length label select {
    width: 55px;
    border: 2px gray solid;
    border-radius: 20px;
}

.dataTables_wrapper .dataTables_length label select select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    color:black;
    background: white;
    -webkit-appearance:none;
    -ms-appearance:none;
    -o-appearance:none;
    appearance:none;
}

.dataTables_wrapper .dataTables_filter input {
    border: 2px gray solid;
    border-radius: 20px;
    text-align: center;}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 2px gray solid;
    color: gray;
    border-radius: 20px; }

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: gray;
    color: white; }

.input-group {
    position: relative;
    text-align: left; }

a {
    color:gray; }

a:hover {
    color: white;
}

a:link { text-decoration: none; }


a:visited { text-decoration: none; }


a:hover { text-decoration: none; }


a:active { text-decoration: none; }

@media (max-width:1100px){
    .login {
        width: 100%;
        height: 450px;
        padding: 5%; }

    .article {
        padding-top: 30px; }

    .footer {
        padding-left: 90px;
        text-align: center;
        background-image: none;
        background-color: #c10230; }

    .navbarback {
        background-image: none;
        background-color: rgba(255, 255, 255, 0.5); }

    .gone {
        display: none; }

    .input-group {
        width: 100%; }
}
