/**
* @author  Rolan Benavent
* @version 1.0
*/
@CHARSET "UTF-8";

:root{
        --shadow-color: #050505;

        /*menu*/
        --fontawesome: "Font Awesome 5 Free";

        /*general*/
        --font-family: 'Catamaran', sans-serif;
        --background-color: #333;
        --background-header: #ccc;
        --background-content-color: #f4f4f4;
        --text-color: #333;
        --text-color-hover: #fff;
        --background-color-hover: #333;
        --background-title: #023368;

        --disabled-color: #888;
}

* {
        font-family: var(--font-family);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}


body, html{
        margin: 0; padding: 0; width: 100%; height: 100%;
        background-color: var(--background-content-color);
}

.login_container{
        margin: 0; padding: 0; width: 100%; height: 100%;
        background-color: var(--background-color); display: table;
}
div.login{
        display: block; width: 400px; margin: 100px auto 200px auto;
        background-color: var(--background-content-color); padding: 10px 20px;
        border-radius: 10px; box-shadow: 5px 0px 10px 0px var(--shadow-color);
}
div.login img{
        display: block; margin: 10px auto 30px auto;
        max-width: 190px;
}
div.header img{
        max-width: 190px;
}
div.login form fieldset{
        border: none; width: 100%;
}
div.login form label{
        color: var(--text-color); display: block; width: 110px; float: left; text-transform: uppercase;
        line-height: 30px; font-size: 0.8em;
}
div.login form input{
        color: #000; display: block; width: calc(100% - 110px); float: left;
        padding: 5px 10px; border: 1px solid #2c55a2; border-radius: 5px;
        background-color: var(--background-content-color);
}
div.login form button{
        color: var(--background-content-color); display: block; width: calc(100% - 110px);
        margin: 10px auto; cursor: pointer;
        padding: 10px 10px; border: 1px solid #2c55a2; border-radius: 5px;
        box-shadow: 5px 0px 10px 0px var(--shadow-color); background-color: #2c55a2;
}
div.login form button:hover{
        background-color: #61c5e7; color: #2c55a2; border: 1px solid #61c5e7;
}

.general_container{
        margin: 0; padding: 0; width: 100%; height: 100%;
        background-color: var(--background-content-color); display: table;
}

.general_container header{
        display: -webkit-box; width: 100%; margin: 0;
        background-color: var(--background-header); padding: 0;
}

.general_container header .header{
        display: -webkit-box; width: 80%; margin: 0 auto; padding: 10px 20px;
}

.general_container header > img{
        display: block; float: left;
}

.general_container header > div.menu{
        display: block; float: right; margin-top: 10px;
}

div.menu ul{
        list-style: none;
}
div.menu ul li{
        cursor: pointer; display: inline-block; float: left;
}
div.menu ul li a{
        display: inline-block; padding: 10px 30px;
        text-decoration: none; color: var(--text-color);
}
div.menu ul li a:hover,
div.menu ul li a.active{
        color: var(--text-color-hover); background-color: var(--background-color-hover);
}
.general_container div.content{
        width: 80%; margin: 0 auto 20px auto; min-height: 100%;
        background-color: var(--background-content-color); padding: 10px 20px;
}
div.content table{
        padding: 0; margin: 0; width: 100%; font-size: 12px;
}
div.content tr:hover{
        color: var(--text-color-hover); background-color: var(--background-color-hover);
}
div.content tr td{
        padding: 5px;
}
div.content tr td i{
        cursor: pointer; font-size: 1.2em;
}
div.content tr td.numeric,
div.content tr td.bool{
        text-align: center;
}
i.fas.fa-times{
        color: #f00;
}
i.fas.fa-check-circle{
        color: #0a0;
}
i.fas.fa-link{
        color: #ccc; margin-left: 20px;
}
i.fas.fa-link:hover{
        color: #fff;
}

div.title{
        margin: 0 auto; line-height: 100px; font-weight: bold; font-family: 'Oswald', sans-serif;
        background-color: var(--background-title); height: 100px; display: table; width: 100%;
        text-align: center; text-transform: uppercase; color: var(--text-color-hover); vertical-align: middle;
        font-size: 2em;
}
div.title.h50{
        height: 50px; line-height: 50px; font-size: 1.2em;
}

form fieldset{
        border: none; text-align: center; font-size: 1.2em;
}
form fieldset.button button{
        padding: 5px 30px; font-size: 1.2em; background-color: var(--background-title); color: var(--text-color-hover); cursor: pointer;
        border: 1px solid var(--background-title); border-radius: 5px; display: inline-block;
}
form fieldset.button button:disabled{
        background-color: var(--disabled-color); border: 1px solid var(--disabled-color);
}

p.center{
        font-size: 1.2em; text-align: center;
}

@media only screen and (max-width:700px){
        div.title{
                line-height: 50px; height: 50px; font-size: 1.2em;
        }
        .general_container div.content{
                width: 100%; padding: 5px 8px; font-size: 0.9em;
        }
}