﻿/*********************************************************************************/
/* GIF ANIMATOR                                                                     */
/*********************************************************************************/

.loadingAnimation, .overlay-loading {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100002;
    top: 0;
    left: 0;
    background-color: rgba(61,61,61,0.3);
    opacity: 1;
}

.overlay-loading {
    z-index: 99999 !important;
}

.fullOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100004;
    top: 0;
    left: 0;
    background-color: #333;
    opacity: .7;
    display: none;
}

.loadingAnimation img {
    border-radius: 5px;
    opacity: .8;
    top: 50%;
    right: 50%;
    position: absolute;
    margin-top: -40px;
    margin-right: -40px;
    max-height: 100px;
}



/*********************************************************************************/
/* OVERLAY SOBRE DIV                                                                      */
/*********************************************************************************/

.outer-box {
    display: block;
    position: relative;
}
    /* line 9, ../sass/style.scss */
    /*.outer-box img {
  width: 300px;
  height: auto;
}*/
    /* line 14, ../sass/style.scss */
    .outer-box .inner-box {
        background: #f0ad4e;
        height: 100%;
        width: 100%;
        opacity: 0;
        top: 0;
        left: 0;
        position: absolute;
        padding: 0;
        transition: opacity .5s;
    }
        /* line 25, ../sass/style.scss */
        .outer-box .inner-box p {
            color: #fff;
            line-height: 150px;
            font-family: 'arial';
            text-align: center;
        }
    /* line 34, ../sass/style.scss */
    .outer-box:hover .inner-box {
        opacity: .9;
        transition: opacity .5s;
    }

/*********************************************************************************/
/* ERROR RFV                                                                     */
/*********************************************************************************/
.bubble {
    background: #FFC3D1;
    border-radius: 3px;
    color: #000000;
    position: absolute;
    border: 1px solid #DA1A21;
    margin-top: 0px;
    padding: 2px;
    color: #DA1A21;
    max-width: 100px;
}

    .bubble:after {
        content: "";
        display: block;
        position: absolute;
        width: 0;
        bottom: auto;
        left: -10px;
        top: 5px;
        border-color: transparent #DA1A21;
        border-style: solid;
        border-width: 5px 10px 5px 0;
    }


/************************************************************/
/*  CSS para el fileupload  */
.myfileupload-buttonbar input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    border: solid transparent;
    border-width: 0 0 100px 200px;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -o-transform: translate(250px, -50px) scale(1);
    -moz-transform: translate(-300px, 0) scale(4);
    direction: ltr;
    cursor: pointer;
}

.myui-button {
    position: relative;
    cursor: pointer;
    text-align: center;
    overflow: visible;
    background-color: none;
    overflow: hidden;
    text-align: center;
}




/************************************************************/
/*  CSS imagen de LOGIN*/
.img-users-grid {
    max-height: 50px;
}


.circular {
    width: 70px;
    height: 70px;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    background: url(../img/boy.png) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 8px rgba(255, 255, 255, .8);
    -webkit-box-shadow: 0 0 8px rgba(255, 255, 255, .8);
    -moz-box-shadow: 0 0 8px rgba(255, 255, 255, .8);
    background-position: center;
    /*background-repeat: no-repeat;
    background-attachment: fixed;*/
}


.circular-sm {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    background: url(../img/boy.png) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 8px rgba(255, 255, 255, .8);
    -webkit-box-shadow: 0 0 8px rgba(255, 255, 255, .8);
    -moz-box-shadow: 0 0 8px rgba(255, 255, 255, .8);
}

/************************************************************/
/*  FOTO CIRCULAR */
/************************************************************/
.circular-photo-sm {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    background: url(../img/boy.png) no-repeat center;
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    box-shadow: 0 0 10px rgba(136, 8, 0, .8);
    -webkit-box-shadow: 0 0 10px rgba(136, 8, 0, .8);
    -moz-box-shadow: 0 0 10px rgba(136, 8, 0, .8);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    display: inline-block;
    margin: 0 5px;
}

.transition-circular {
    position: absolute;
    z-index: 10;
    -webkit-transform: scale(3);
    -moz-transform: scale(3);
    -o-transform: scale(3);
    transform: scale(3);
}

.circular-photo {
    width: 70px;
    height: 70px;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    background: url(../img/boy.png) no-repeat center;
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    box-shadow: 0 0 10px rgba(136, 8, 0, .8);
    -webkit-box-shadow: 0 0 10px rgba(136, 8, 0, .8);
    -moz-box-shadow: 0 0 10px rgba(136, 8, 0, .8);
}

.circular-photo-lg {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    background: url(../img/boy.png) no-repeat center;
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    box-shadow: 0 0 10px rgba(136, 8, 0, .8);
    -webkit-box-shadow: 0 0 10px rgba(136, 8, 0, .8);
    -moz-box-shadow: 0 0 10px rgba(136, 8, 0, .8);
}
/*********************************************************************************/
/* PAGER GRIDS                                                                   */
/*********************************************************************************/

.pagerGrids {
    width: 100%;
    background-color: #131313;
    color: #ccc;
    font-size: 23px;
    font-weight: bold;
}

    .pagerGrids:hover {
        background-color: #131313;
        color: #ccc;
    }

    .pagerGrids table:hover td:hover {
        background-color: #131313;
        color: #ccc;
    }

    .pagerGrids a {
        color: #ccc;
        font-size: medium;
        padding: 5px;
    }

/*********************************************************************************/
/* RATON MANITA                                                                   */
/*********************************************************************************/

.raton-manita {
    cursor: pointer;
}

/*********************************************************************************/
/* TEXTOS PEQUEÑOS                                                                   */
/*********************************************************************************/
.text-small {
    font-size: small;
}

.text-xsmall {
    font-size: x-small;
}

.text-xxsmall {
    font-size: xx-small;
}

/*********************************************************************************/
/* espaciado                                                                   */
/*********************************************************************************/
.space-20 {
    padding: 0 20px 0 20px;
}

.space-10 {
    padding: 0 10px 0 10px;
}

.space-5 {
    margin: 0 5px;
}

/*********************************************************************************/
/* LOGO EMPRESA                                                                   */
/*********************************************************************************/
@media (min-width: 768px) {
    .posicion-licencia {
        position: fixed;
        margin: 10px 40%;
    }
}
@media (max-width: 767px) {
    .posicion-licencia {
        position: fixed;
        margin: 10px 40%;
    }
}