:root {
    --animate-duration: 200ms;
    --bg-color: #ffffff;
    --bg-s-color: #d3d3d3;
    --bg-d-color: #222222;
    --bg-dd-color: #1c1c1c;
}

*{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html,
body{
    position: absolute;
    width: 100vw;
    height: 100vh;
}

div::-webkit-scrollbar,
textarea::-webkit-scrollbar {
    width: 6px;
    height: 8px;
}

div::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
    background: #00000017;
}

div::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
    background-color: #878787;
    border-radius: 2px;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}


.clear{
    clear: both;
}

.creditos-dev{
    position: absolute;
    bottom: 0;
    left: 0;
    color: black;
    font-size: 12px;
    width: 260px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    background-color: white;
    border-radius: 0 10px 0 0;
    border: 1px solid #515151;
    border-bottom: 0px;
    border-left: 0px;
}

.toast{
    display: block;
    position: fixed;
    min-width: 250px;
    min-height: 40px;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%, 0px);
    background-color: #1f1f1f;
    z-index: 9999;
    border-radius: 4px;
    padding: 10px 20px;
    text-align: center;
    color: white;
    font-size: 20px;
    transition: bottom 300ms;
}

.toast.active{
    bottom: 20px;
}

.acrylic {
    background: rgba(0,0,0,0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.back-shadow{
    background: rgb(0 0 0 / 32%);
    background: linear-gradient(0deg, rgba(0,0,0,1) 9%, rgba(255,255,255,0) 80%);
}

.shadow {
    border-radius: 1px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2);
}

.app{
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.app .panel-login .imgParallax{
    position: absolute;
    display: block;
    content: '';
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: url(../img/background_2.jpg);
    background-position: 50%;
    background-size: cover;
}

.app .panel-login,
.app .panel-home-apps{
    background-color: #586a7e;
    padding: 0;
}

.app .panel-home-apps:before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: #ffffffa6;*/
}

.app .panel-login .caja-panel-login {
    background-color: whitesmoke;
}

.icon-login-header ~ h3 {
    margin: 0;
    margin-bottom: 30px;
}

.app .panel-home-apps{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #efefef; /* #ffffff; */
}

.panel-home-apps .panel-user {
    position: relative;
    width: 100%;
    height: 284px;
    text-align: center;
    background-image: url(../img/background_3.jpg);
    background-position: 0% 55%;
    background-size: 150% auto;
}

.contenedor-op-cuenta{
    padding-top: 60px;
    padding-bottom: 20px;
}

.img-perfil img{
    display: block;
    width: 200px;
    margin: 0 auto;
}

.caja-bnt-cambiar-imagen{
    display: block;
}

.panel-home-apps .panel-user>img{
    position: relative;
    width: 106px;
    height: 106px;
    border: 5px solid #0000008f;
    transform: translate(0, 53px);
    z-index: 1;
}

.panel-home-apps .panel-user h3{
    /* border: 2px solid #4c4c4c; */
    background-color: #101010b0;
    border-radius: 5px;
    color: white;
    display: inline-block;
    margin: 20px 0;
    margin-bottom: 0;
    padding: 1px 30px 3px 30px;
    position: relative;
}

.panel-home-apps .panel-user p{
    margin-bottom: 0;
}

.panel-home-apps .panel-apps{
    position: absolute;
    width: 100%;
    top: 284px;
    height: calc(100% - 284px);
    text-align: center;
    overflow-y: auto;
    background-color: whitesmoke;
}

.panel-apps .app-box{
    background-color: inherit;
    box-shadow: inherit;
    width: 155px;
    height: 230px;
    cursor: pointer;
    padding: 25px;
    position: relative;
    display: inline-block;
    transform: scale(1);
    transition: all 200ms;
}

.panel-apps .app-box.app-disabled{
    pointer-events: none;
    filter: grayscale(1);
}

.panel-apps .app-box:hover {
    transform: scale(1.1);
}

.panel-apps .app-box .icon-box{
    width: 105px;
    height: 105px;
    margin: 0 auto;
    background-color: white;
    padding-top: 8px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,.08);
    transform: scale(1);
    transition: all 200ms;
}

.panel-apps .app-box .icon-box img{
    width: 85%;
}

.panel-apps .app-box .app-title{
    transform: scale(1);
    transform-origin: top;
    transition: all 200ms;
    color: #0c0c0c;
    display: block;
    position: absolute;
    top: 115px;
    width: calc(100% - 50px);
}

.background-h-move{
    animation-name: background-h-move;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}


/*Sobre-escritura de atributos thema uikit*/


/*Sobre-escritura de atributos thema uikit*/
.uk-table-hover tbody tr:hover, .uk-table-hover>tr:hover {
    background: #ffe8e8;
}

.uk-card-primary.uk-card-body .uk-button-primary, .uk-card-primary>:not([class*=uk-card-media]) .uk-button-primary, .uk-card-secondary.uk-card-body .uk-button-primary, .uk-card-secondary>:not([class*=uk-card-media]) .uk-button-primary, .uk-light .uk-button-primary, .uk-offcanvas-bar .uk-button-primary, .uk-overlay-primary .uk-button-primary, .uk-section-primary:not(.uk-preserve-color) .uk-button-primary, .uk-section-secondary:not(.uk-preserve-color) .uk-button-primary, .uk-tile-primary:not(.uk-preserve-color) .uk-button-primary, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary {
    background-color: #fff;
    color: #393939;
}

.uk-card-primary.uk-card-body .uk-button-primary:hover, .uk-card-primary>:not([class*=uk-card-media]) .uk-button-primary:hover, .uk-card-secondary.uk-card-body .uk-button-primary:hover, .uk-card-secondary>:not([class*=uk-card-media]) .uk-button-primary:hover, .uk-light .uk-button-primary:hover, .uk-offcanvas-bar .uk-button-primary:hover, .uk-overlay-primary .uk-button-primary:hover, .uk-section-primary:not(.uk-preserve-color) .uk-button-primary:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-button-primary:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary:hover {
    background-color: #f2f2f2;
    color: #2d2d2d;
}

.uk-button {
    border-radius: 3px;
}

.uk-light .uk-form-danger, .uk-light .uk-form-danger:focus {
    color: #f0506e;
    border-color: #f0506e;
}

.uk-notification .uk-notification-message {
    background-color: #141414;
    font-size: 1.1rem;
    border-radius: 3px;
}

.uk-form-width-xmsmall {
    width: 70px;
}

.uk-card-title:not(.uk-text-default, .uk-text-large, .uk-text-small) {
    font-size: 2rem;
}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
    margin: 0 0 20px 0;
    font-family: Montserrat, ProximaNova,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-weight: 300;
    color: #222;
    text-transform: none;
}

.uk-text-semi-bold {
    font-weight: 500;
}

.uk-input, 
.uk-select, 
.uk-textarea {
    border-radius: 3px;
}

.uk-input:not(.uk-form-danger, .uk-form-success), 
.uk-select:not(.uk-form-danger, .uk-form-success), 
.uk-textarea:not(.uk-form-danger, .uk-form-success) {
    border: 1px solid #b4b4b4;
}

.uk-dropdown-nav>li>a{
    color: var(--bg-d-color);
    font-weight: 500;
}

.uk-button{
    font-weight: 500;
    text-transform: capitalize;
}

.uk-table th {
    font-weight: 600;
    color: #292929;
}

.uk-size-100-100{
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.uk-no-resizable{
    resize: none;
}

/* usar mejor .full-container-auto-scroll */

.uk-only-resizable-vertical{
    resize: vertical;
}


.uk-dropdown.uk-open {
    box-shadow: 0 5px 12px 5px rgb(0 0 0 / 30%);
    border-radius: 3px;
    min-width: 150px;
    padding: 15px;
}

.uk-min-height-33{
    min-height: 33px;
}

.uk-scrolleable{
    overflow-x: auto;
    overflow-y: auto;
}

.uk-scrolleable-y{
    overflow-x: hidden;
    overflow-y: auto;
}

.uk-scrolleable-x{
    overflow-x: auto;
    overflow-y: hidden;
}

.acciones-usuario button {
    margin-right: 5px;
}


/* ESTILOS PARA TEMA OSCURO*/

body.uk-light .app .panel-login .caja-panel-login{
    background-color: #252525;
    color: darkgrey;
}

body.uk-light .uk-section-default {
    background: initial;
}

body.uk-light .uk-card-default{
    background-color: initial;
}

body.uk-light .uk-card-default .uk-card-title{
    color: #e3e3e3;
}

body.uk-light .uk-modal-dialog{
    background-color: var(--bg-dd-color);
}

body.uk-light .uk-modal-header{
    background-color: var(--bg-dd-color);
    border-bottom: 1px solid #494949;
}

body.uk-light .uk-modal-footer{
    background-color: var(--bg-dd-color);
    border-top: 1px solid #494949;
}


body.uk-light .toast{
    background-color: white;
    color: #393939;
    font-weight: 500;
}

body.uk-light .panel-apps{
    background-color: #1a1a1a;
    border-top: 2px solid #212121;
}

body.uk-light .panel-apps .app-box .app-title{
    color: #dfdfdf;
}

body.uk-light .creditos-dev{
    background-color: #353535;
    color: #9b9b9b;
}

body.uk-light .panel-apps .app-box .icon-box{
    background-color: #333333;
}


/* FIN DE EDICION ESTILOS PARA TEMA OSCURO*/


@keyframes background-h-move {
    0% {
        background-position-x: 0;
    }
  
    100% {
        background-position-x: 100%;
    }
  }