/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 26/09/2018, 01:18:30 PM
    Author     : SFS
*/

@import url("https://use.fontawesome.com/releases/v5.7.1/css/all.css");

.responsive-desktop{
    display: block;
}
.responsive-mobil{
    display: none;
}
@media all and (max-width: 500px) {
    .responsive-desktop{
        display: none !important;
    }
    .responsive-mobil{
        display: block !important;
    }
}


input[type=checkbox].css-checkbox {
    position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=checkbox].css-checkbox + label.css-label {
    padding-left:29px;
    height:24px; 
    display:inline-block;
    line-height:24px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:24px;
    vertical-align:middle;
    cursor:pointer;

}
input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -24px;
}
label.css-label {
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_4f6bc9a7cc47504b9c36e04aa489f19e.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

.fixer {
    max-width: 1200px;
    margin:auto;
}

body {
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.template-foot {
    height: 20px;
    text-align: center;
    position: fixed;
    bottom: 10px;
    width: 100%;
    padding: 5px;
}
.locker{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000;
    background-color: #00000087;
    padding: 50px;
}
.state-busy {
    opacity: 0.5;
}
.hoja { 
    margin-top: 10px;
    position: relative; 
} 
.hoja, 
.hoja:after, 
.hoja:before { 
    background: #fff; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
        0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}

.card-no-shadow{
    box-shadow: none !important;
}

.sys-warn {
    border: gainsboro solid 1px;
    background-color: rgba(242, 241, 239, 0.61);
    border-radius: 10px;
    padding: 10px;
    overflow: hidden;

    margin: 5px 5px 0 5px;
    background: linear-gradient(272deg, #ff0000, #ffab00, yellow);
    background-size: 400% 400%;
    -webkit-animation: color_warn 19s ease infinite;
    -moz-animation: color_warn 19s ease infinite;
    -o-animation: color_warn 19s ease infinite;
    animation: color_warn 19s ease infinite;
}
.sys-warn>* {
    color: white;
    mix-blend-mode: difference;
}
@-webkit-keyframes color_warn { 0%{background-position:0% 54%} 50%{background-position:100% 47%} 100%{background-position:0% 54%} }
@-moz-keyframes color_warn { 0%{background-position:0% 54%} 50%{background-position:100% 47%} 100%{background-position:0% 54%} }
@-o-keyframes color_warn { 0%{background-position:0% 54%} 50%{background-position:100% 47%} 100%{background-position:0% 54%} }
@keyframes color_warn { 0%{background-position:0% 54%} 50%{background-position:100% 47%} 100%{background-position:0% 54%} }