/*
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 : 27/04/2017, 01:51:17 PM
    Author     : arturo.osorio
*/



body{
    font-family: Open Sans, Arial;

}
.artm_body{
    position: fixed;
    top:0px;left:0px;right:0px;bottom:0px;

}

a{
    text-decoration: none;
}


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

/* Track */
::-webkit-scrollbar-track {
    /*    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    background: rgba(240,240,240,0.8);
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 2px;

    background: rgba(140,140,140,0.8);
    /*    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); */
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(250,250,250,0.4);
}

/*HEADERS    ***************************************/
.artm_liteHeaders{
    position:fixed;
    top:0px;left: 0px; right:0px;
}
.artm_liteHeaders_Home{
    height: 100px;
    background: #ccc;
}
.artm_liteHeaders_nav{
    position:absolute;
    height: 40px; right:20px;bottom:0px;
    width: auto;

}
.artm_liteHeaders_nav_btn{
    position:relative;
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    /*margin-left: 10px;*/
    margin-left: 0px;
    border: none;
    display: inline-block;
    cursor: pointer;

    color:#445;


}
.artm_liteHeaders_nav_btn:hover{

}
.artm_liteHeaders_nav_btn:active{
    top:1px;
    outline: 0px;
}
.artm_liteHeaders_nav_btn:focus{
    outline: 0px;
}
.artm_liteHeaders_nav_rsControl{
    content:".";
    position:relative;
    height: 40px; width:40px;
    margin-left: 10px;
    border: none;
    display: inline-block;
    color:transparent;
    cursor: pointer;
}
.artm_liteHeaders_nav_rsControl:hover{

}
.artm_liteHeaders_nav_rsControl div{
    position:absolute;
    top:18px; /*10 + 9*/
    left: 10px; right:10px;
    height: 3px;
    border-radius:3px;

}
.artm_liteHeaders_nav_rsControl div:after{
    content: '';
    position:absolute;
    top:6px; /*10 + 9*/
    left: 0px; right:0px;
    height: 3px;
    border-radius:3px;

}
.artm_liteHeaders_nav_rsControl div:before{
    content: '';
    position:absolute;
    top:-6px; /*10 + 9*/
    left: 0px; right:0px;
    height: 3px;
    border-radius:3px;

}

.artm_panelHeader_Indigo{
    position:fixed;
    top:0px; left: 0px; right: 0px; height: 60px;
    background: #7986CB;
    color:#f90;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 20;
}
.artm_panelHeader_Black{
    position:fixed;
    top:0px; left: 0px; right: 0px; height: 60px;
    background: #212121;
    color:#f90;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 20;
}
.artm_panelHeader_White{
    position:fixed;
    top:0px; left: 0px; right: 0px; height: 60px;
    background: #fff;
    color:#f90;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 20;
}
.artm_panelHeader_Olive{
    position:fixed;
    top:0px; left: 0px; right: 0px; height: 60px;
    background: #51742B;
    color:#f90;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 20;
}




.artm_headUserInfo{
    position:absolute;
    right: 10px;
    top:20px;
    color:#fff;
    font-size: 13px;
}



/*MENUS  */


.artm_panelHeader_sideControler{
    position:absolute;
    left: 200px; top:20px; width: 20px; height: 20px;
    color:#fff;
    font-size: 20px;
    display: none;
}

.artm_panelMenu_General{
    position:fixed;
    top:60px; left: 0px; bottom: 0px; width: 220px;
    box-shadow: 2px 0px 5px rgba(0,0,0,0.2);
    z-index: 10;
    overflow-x: hidden;
    overflow-y: auto;
}

.artm_panelMenu_Indigo, .artm_panelMenu_Olive{
    background: #fff;
    color:#f90;
}

.artm_panelMenu_Black{
    background: #fff;
    color:#f90;
}

.artm_panelMenu_Indigo_side1, .artm_panelMenu_Black_side1, .artm_panelMenu_Olive_side1{
    position: absolute;
    top:0px; left: 0px; right: 0px; bottom: 0px;
}
.artm_panelMenu_Indigo_side2, .artm_panelMenu_Black_side2, .artm_panelMenu_Olive_side2{
    position: absolute;
    top:0px; left: 220px; right: 0px; bottom: 0px;
}


.panelMenuSide1Show{
    left: 0px; right: 0px;
    animation: panelMenuSide1Show 0.4s;
    -webkit-animation: panelMenuSide1Show 0.4s;
    -moz-animation: panelMenuSide1Show 0.4s;
    -o-animation: panelMenuSide1Show 0.4s;
    -ms-animation: panelMenuSide1Show 0.4s;
}
.panelMenuSide1HideFast{left: -220px; right: 220px;}
.panelMenuSide1Hide{
    left: -220px; right: 220px;
    animation: panelMenuSide1Hide 0.4s;
    -webkit-animation: panelMenuSide1Hide 0.4s;
    -moz-animation: panelMenuSide1Hide 0.4s;
    -o-animation: panelMenuSide1Hide 0.4s;
    -ms-animation: panelMenuSide1Hide 0.4s;
}

.panelMenuSide2ShowFast{left: 0px; right: 0px;}
.panelMenuSide2Show{
    left: 0px; right: 0px;
    animation: panelMenuSide2Show 0.4s;
    -webkit-animation: panelMenuSide2Show 0.4s;
    -moz-animation: panelMenuSide2Show 0.4s;
    -o-animation: panelMenuSide2Show 0.4s;
    -ms-animation: panelMenuSide2Show 0.4s;
}
.panelMenuSide2Hide{
    left: 220px; right: -220px;
    animation: panelMenuSide2Hide 0.4s;
    -webkit-animation: panelMenuSide2Hide 0.4s;
    -moz-animation: panelMenuSide2Hide 0.4s;
    -o-animation: panelMenuSide2Hide 0.4s;
    -ms-animation: panelMenuSide2Hide 0.4s;
}

@keyframes panelMenuSide1Show{0%{left:-220px; right:220px;}100%{left:0px; right:0px;}}
@-webkit-keyframes panelMenuSide1Show{0%{left:-220px; right:220px;}100%{left:0px; right:0px;}}
@-moz-keyframes panelMenuSide1Show{0%{left:-220px; right:220px;}100%{left:0px; right:0px;}}
@-ms-keyframes panelMenuSide1Show{0%{left:-220px; right:220px;}100%{left:0px; right:0px;}}
@-o-keyframes panelMenuSide1Show{0%{left:-220px; right:220px;}100%{left:0px; right:0px;}}

@keyframes panelMenuSide1Hide{0%{left:0px; right:0px;}100%{left:-220px; right:220px;}}
@-webkit-keyframes panelMenuSide1Hide{0%{left:0px; right:0px;}100%{left:-220px; right:220px;}}
@-moz-keyframes panelMenuSide1Hide{0%{left:0px; right:0px;}100%{left:-220px; right:220px;}}
@-ms-keyframes panelMenuSide1Hide{0%{left:0px; right:0px;}100%{left:-220px; right:220px;}}
@-o-keyframes panelMenuSide1Hide{0%{left:0px; right:0px;}100%{left:-220px; right:220px;}}

@keyframes panelMenuSide2Show{0%{left:220px; right:-220px;}100%{left:0px; right:0px;}}
@-webkit-keyframes panelMenuSide2Show{0%{left:220px; right:-220px;}100%{left:0px; right:0px;}}
@-moz-keyframes panelMenuSide2Show{0%{left:220px; right:-220px;}100%{left:0px; right:0px;}}
@-ms-keyframes panelMenuSide2Show{0%{left:220px; right:-220px;}100%{left:0px; right:0px;}}
@-o-keyframes panelMenuSide2Show{0%{left:220px; right:-220px;}100%{left:0px; right:0px;}}

@keyframes panelMenuSide2Hide{0%{left:0px; right:0px;}100%{left:220px; right:-220px;}}
@-webkit-keyframes panelMenuSide2Hide{0%{left:0px; right:0px;}100%{left:220px; right:-220px;}}
@-moz-keyframes panelMenuSide2Hide{0%{left:0px; right:0px;}100%{left:220px; right:-220px;}}
@-ms-keyframes panelMenuSide2Hide{0%{left:0px; right:0px;}100%{left:220px; right:-220px;}}
@-o-keyframes panelMenuSide2Hide{0%{left:0px; right:0px;}100%{left:220px; right:-220px;}}

.panelMenuSec{
    display: none;
}
.panelMenuSecShow{
    display: inline;
}


.artm_panelMenu_Indigo_button, .artm_panelMenu_Indigo_hbutton, .artm_panelMenu_Black_button, .artm_panelMenu_Black_hbutton, .artm_panelMenu_Olive_button, .artm_panelMenu_Olive_hbutton{
    position: relative;
    width: 100%;
    height: 48px;
    color:#3F51B5;
    font-size: 11px;
    border-bottom: 2px solid #f5f5f5;
    text-align: left;
    line-height: 48px;
    padding-right: 20px;
    padding-left: 60px;


}

 .artm_panelMenu_Olive_button, .artm_panelMenu_Olive_hbutton{
    position: relative;
    width: 100%;
    height: 48px;
    color:#364E1D;
    font-size: 11px;
    border-bottom: 2px solid #f5f5f5;
    text-align: left;
    line-height: 48px;
    padding-right: 20px;
    padding-left: 60px;


}

.artm_panelMenu_Indigo_hbutton{font-weight: bold; background: #5C6BC0; color:#fff;}
.artm_panelMenu_Black_hbutton{font-weight: bold; background: #424242; color:#fff;}
.artm_panelMenu_Olive_hbutton{font-weight: bold; background: #364E1D; color:#fff;}
.artm_panelMenu_Indigo_hbutton span{cursor:pointer;color:#fff !important;}
.artm_panelMenu_Black_hbutton span{cursor:pointer;color:#fff !important;}
.artm_panelMenu_Olive_hbutton span{cursor:pointer;color:#fff !important;}

.artm_panelMenu_Indigo_button span, .artm_panelMenu_Indigo_hbutton span{
    position:absolute;
    width: 16px; height: 16px;
    top:16px; left: 16px;
    font-size: 18px;
    color:#5C6BC0;
}
.artm_panelMenu_Black_button span, .artm_panelMenu_Black_hbutton span{
    position:absolute;
    width: 16px; height: 16px;
    top:16px; left: 16px;
    font-size: 18px;
    color:#424242;
}

.artm_panelMenu_Olive_button span, .artm_panelMenu_Olive_hbutton span{
    position:absolute;
    width: 16px; height: 16px;
    top:16px; left: 16px;
    font-size: 18px;
    color:#364E1D;
}
.artm_panelMenu_Indigo_button:hover, .artm_panelMenu_Black_button:hover{
    background: #f5f5f5;
    cursor: pointer;
}
.artm_panelMenu_Indigo_button:active, .artm_panelMenu_Black_button:active{
    background: #e5e5e5;

}
.artm_panelMenu_Olive_button:active, .artm_panelMenu_Olive_button:active{
    background: #CBE2B1;

}



.artm_panelMenu_Black_button, .artm_panelMenu_Black_hbutton{
    position: relative;
    width: 100%;
    height: 48px;
    color:#424242;
    font-size: 11px;
    border-bottom: 2px solid #f5f5f5;
    text-align: left;
    line-height: 48px;
    padding-right: 20px;
    padding-left: 60px;


}
.artm_panelMenu_Black_hbutton{font-weight: bold; background: #424242; color:#fff;}
.artm_panelMenu_Black_hbutton span{cursor:pointer;color:#fff !important;}

.artm_panelMenu_Black_button span, .artm_panelMenu_Indigo_hbutton span{
    position:absolute;
    width: 16px; height: 16px;
    top:16px; left: 16px;
    font-size: 16px;
    color:#424242;
}








.artm_panelMenu_Indigo_button:hover{
    background: #f5f5f5;
    cursor: pointer;
}
.artm_panelMenu_Indigo_button:active{
    background: #e5e5e5;

}

.artm_panelMenu_Olive_button:hover{
    background: #E0EED0;
    cursor: pointer;
}
.artm_panelMenu_Olive_button:active{
    background: #D0DEc0;

}


/*CONTENTS  */

.artm_panelBody{
    position:absolute;
    top:60px; left: 220px; right: 0px; bottom: 0px;
    background: none;
    overflow-y: auto;
    padding-bottom: 20px;
}
.artm_panelBodyFull{
    position: fixed;
    top:0px;bottom:0px; left: 0px;right: 0px;
    background: none;
    display: none;
    z-index: 999;
    overflow-y: auto;
    padding-bottom: 20px;
}
.artm_panelBody_container{
    position: relative;
    width: 90%;
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    width: -o-calc(100% - 40px);
    width: -ms-calc(100% - 40px);
    font-size: 11px;
    color:#474757;
    padding: 20px;


    background: #fff;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 5px;
    border:1px solid #ddd;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.1);

}
.artm_panelBody_containerInvisible{
    background: none;
    box-shadow: none;
    border:none;
}
.artm_panelBody_containerHalf{
    position: relative;
    width: 50%;
    width: calc(50% - 40px);
    width: -webkit-calc(50% - 40px);
    width: -moz-calc(50% - 40px);
    width: -o-calc(50% - 40px);
    width: -ms-calc(50% - 40px);
    font-size: 13px;
    color:#474757;
    padding: 20px;


    background: #fff;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 5px;
    border:1px solid #ddd;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.1);

}

.artm_panelBody_container_tagTit{
    position: relative;
    width: 100%;
    color:#474757;
    padding: 5px 0px;
    margin: 5px auto;
    font-size:15px;
    font-weight: 800;
}
.artm_panelBody_container_tag{
    position: relative;
    width: 100%;
    font-size: 11px;
    color:#474757;
    padding: 5px 0px;
    margin: 5px auto;
}


/* HIDES*************/
.artm_rsHide_0001{
    display:none;
}
.artm_rsHide_1110{

}



/*BACKGROUNDS *************/

.artm_bgWhite, .artm_bgWhite:after, .artm_bgWhite:before{
    background: #fff;
}
.artm_bgGray, .artm_bgGray:after, .artm_bgGray:before{
    background: #9E9E9E;
}

/*Background Hover Transparent Dark*/
.artm_bgHT_D{
    background: rgba(0,0,0,0);

    transition: background 0.2s;
    -webkit-transition: background 0.2s;
    -moz-transition: background 0.2s;
    -ms-transition: background 0.2s;
    -o-transition: background 0.2s;
}
.artm_bgHT_D:hover{
    background: rgba(0,0,0,0.2);

    transition: background 0.2s;
    -webkit-transition: background 0.2s;
    -moz-transition: background 0.2s;
    -ms-transition: background 0.2s;
    -o-transition: background 0.2s;

}
/*Background Hover Transparent Light*/
.artm_bgHT_L{
    background: rgba(255,255,255,0);

    transition: background 0.2s;
    -webkit-transition: background 0.2s;
    -moz-transition: background 0.2s;
    -ms-transition: background 0.2s;
    -o-transition: background 0.2s;
}
.artm_bgHT_L:hover{
    background: rgba(255,255,255,0.2);

    transition: background 0.2s;
    -webkit-transition: background 0.2s;
    -moz-transition: background 0.2s;
    -ms-transition: background 0.2s;
    -o-transition: background 0.2s;

}

.artm_bgIndigo{
    background: #3F51B5;
}
.artm_bgIndigoSub{
    background: #9FA8DA!important;
}
.artm_bgOlive{
    background: #51742B;
}
.artm_bgOliveSub{
    background: #B1D48B!important;
}
.artm_bgBlack{
    background: #424242!important;
}
.artm_bgBlackSub{
    background: #999!important;
}
.artm_bgBlue{
    background: #2196F3;
}
.artm_bgIndigoSec{
    background: #E8EAF6!important;
}
.artm_bgOliveSec{
    background: #E8EAF6!important;
}
.artm_bgBlackSec{
    background: #f5f5f5!important;
}



/* COLORS *******************/
.artm_txtCoWhite{
    color:#fff
}

/* CONTAINERS *********/
.artm_containerCentered{
    position:relative;
    margin: 0 auto;
    margin-top: 50px;
    width: 300px;
    height: auto;
    padding-bottom: 20px;
    background: #f5f5f5;
    box-shadow: 0px 0px 60px rgba(0,0,0,0.3), 0px 0px 8px rgba(0,0,0,0.6);

}



.artm_containers_headerWhiteIndigo{
    position:relative;
    width:100%;
    height: 80px;

    background: #7986CB;
    color:#fff;
    font-weight: 500;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
}

.artm_containers_inputBoxWhiteIndigo{
    position: relative;
    margin: 0 auto;
    width: 80%;
    height: 60px;


    border-bottom: 3px solid #7986CB;
}
.artm_containers_inputBoxWhiteIndigo .artm_sub_inputBoxIcon{
    position:absolute;
    top:20px; left: 20px; width: 20px; height: 20px;

    font-size: 20px;
    text-align: center;
    color:#7986CB;
    z-index: 2;
}





.artm_containers_headerWhiteBlue{
    position:relative;
    width:100%;
    height: 80px;

    background: #2196F3;
    color:#fff;
    font-weight: 500;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
}
.artm_containers_headerWhite{
    position:relative;
    width:100%;
    height: 111px;

    background-position:center center !important;
    background-repeat: no-repeat !important;
    background: #fff;
    color:#fff;
    font-weight: 500;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
}

.artm_containers_inputBoxWhiteBlue{
    position: relative;
    margin: 0 auto;
    width: 80%;
    height: 60px;


    border-bottom: 3px solid #3F51B5;
}
.artm_containers_inputBoxWhiteBlue .artm_sub_inputBoxIcon{
    position:absolute;
    top:20px; left: 20px; width: 20px; height: 20px;

    font-size: 20px;
    text-align: center;
    color:#3F51B5;
    z-index: 2;
}

.artm_containers_inputBoxWhiteOlive{
    position: relative;
    margin: 0 auto;
    width: 80%;
    height: 60px;


    border-bottom: 3px solid #51742B;
}
.artm_containers_inputBoxWhiteOlive .artm_sub_inputBoxIcon{
    position:absolute;
    top:20px; left: 20px; width: 20px; height: 20px;

    font-size: 20px;
    text-align: center;
    color:#51742B;
    z-index: 2;
}









.artm_containers_input30Icon{
    position:absolute;
    top:0px; left: 0px; right: 0px; bottom:0px;


}
.artm_containers_input30Icon input{
    position: absolute;
    top:0px; bottom:0px;
    left: 0px; width: 100%;
    background: none;
    padding: 20px;
    padding-left:60px;
    font-size: 13px;
    color:#474757;
    border:none;
}
.artm_containers_input30Icon input:focus{
    outline: 0px;
    background: rgba(255,255,255,0.7);
}





.artm_containers_inputBoxMessagesIndigo{
    position: relative;
    margin: 0 auto;
    width: 80%;
    height: 30px;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    color: #7986CB;
    color: #F44336;
    font-size: 12px;
}

.artm_containers_inputButtonIndigo{
    position: relative;
    background: #7986CB;
    margin: 0 auto;
    width: 80%;
    height: 60px;
    text-align: center;
    vertical-align:bottom;
    line-height: 60px;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
}
.artm_containers_inputButtonIndigo:hover{
    background: #3F51B5;
}

.artm_containers_inputButtonIndigo:active{
    background: #3F51B5;
    top: 1px;
}






.artm_containers_inputBoxMessagesBlue{
    position: relative;
    margin: 0 auto;
    width: 80%;
    height: 30px;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    color: #2196F3;
    color: #F44336;
    font-size: 12px;
}

.artm_containers_inputButtonBlue{
    position: relative;
    background: #3F51B5;
    margin: 0 auto;
    width: 80%;
    height: 60px;
    text-align: center;
    vertical-align:bottom;
    line-height: 60px;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
}

.artm_containers_inputButtonBlue:hover{
    background: #2F41a5;
}

.artm_containers_inputButtonBlue:active{

    top: 1px;
}




.artm_containers_inputButtonOlive{
    position: relative;
    background: #51742B;
    margin: 0 auto;
    width: 80%;
    height: 60px;
    text-align: center;
    vertical-align:bottom;
    line-height: 60px;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
}
.artm_containers_inputButtonOlive:hover{
    background: #51742B;
}

.artm_containers_inputButtonOlive:active{

    top: 1px;
}





.artm_yOverFlowDiv{

    position: relative;
    width: 100%;
    overflow-y: auto;
}













.artm_divLoadingW{
    color:transparent;
}
.artm_divLoadingW div{
    position: absolute;
    top:20%;
    top:calc(50% - 5px);top:-webkit-calc(50% - 5px);top:-moz-calc(50% - 5px);top:-o-calc(50% - 5px);top:-ms-calc(50% - 5px);
    left:calc(50% - 8px);left:-webkit-calc(50% - 8px);left:-moz-calc(50% - 8px);left:-o-calc(50% - 8px);left:-ms-calc(50% - 8px);
    width: 4px; height: 10px;
    background: #fff;

    animation: artm_divLoadingW 0.8s infinite;
    -webkit-animation: artm_divLoadingW 0.8s infinite;
    -moz-animation: artm_divLoadingW 0.8s infinite;
    -o-animation: artm_divLoadingW 0.8s infinite;
    -ms-animation: artm_divLoadingW 0.8s infinite;
}
.artm_divLoadingW div:before{
    content:"";
    position: absolute;
    top:0px;
    left:8px;
    width: 4px; height: 10px;
    background: #fff;

    animation: artm_divLoadingW_Before 0.8s infinite;
    -webkit-animation: artm_divLoadingW_Before 0.8s infinite;
    -moz-animation: artm_divLoadingW_Before 0.8s infinite;
    -o-animation: artm_divLoadingW_Before 0.8s infinite;
    -ms-animation: artm_divLoadingW_Before 0.8s infinite;
}
.artm_divLoadingW div:after{
    content:"";
    position: absolute;
    top:0px;
    left:16px;
    width: 4px; height: 10px;
    background: #fff;

    animation: artm_divLoadingW_After 0.8s infinite;
    -webkit-animation: artm_divLoadingW_After 0.8s infinite;
    -moz-animation: artm_divLoadingW_After 0.8s infinite;
    -o-animation: artm_divLoadingW_After 0.8s infinite;
    -ms-animation: artm_divLoadingW_After 0.8s infinite;
}

@keyframes artm_divLoadingW{
    0%{opacity:0}15%{opacity:0}30%{opacity:1}95%{opacity:1}100%{opacity:0}
}
@-webkit-keyframes artm_divLoadingW{
    0%{opacity:0}15%{opacity:0}30%{opacity:1}95%{opacity:1}100%{opacity:0}
}
@-moz-keyframes artm_divLoadingW{
    0%{opacity:0}15%{opacity:0}30%{opacity:1}95%{opacity:1}100%{opacity:0}
}
@-ms-keyframes artm_divLoadingW{
    0%{opacity:0}15%{opacity:0}30%{opacity:1}95%{opacity:1}100%{opacity:0}
}
@-o-keyframes artm_divLoadingW{
    0%{opacity:0}15%{opacity:0}30%{opacity:1}95%{opacity:1}100%{opacity:0}
}



@keyframes artm_divLoadingW_Before{
    0%{opacity:0}35%{opacity:0}50%{opacity:1}100%{opacity:1}
}
@-webkit-keyframes artm_divLoadingW_Before{
    0%{opacity:0}35%{opacity:0}50%{opacity:1}100%{opacity:1}
}
@-moz-keyframes artm_divLoadingW_Before{
    0%{opacity:0}35%{opacity:0}50%{opacity:1}100%{opacity:1}
}
@-ms-keyframes artm_divLoadingW_Before{
    0%{opacity:0}35%{opacity:0}50%{opacity:1}100%{opacity:1}
}
@-o-keyframes artm_divLoadingW_Before{
    0%{opacity:0}35%{opacity:0}50%{opacity:1}100%{opacity:1}
}



@keyframes artm_divLoadingW_After{
    0%{opacity:0}55%{opacity:0}70%{opacity:1}100%{opacity:1}
}
@-webkit-keyframes artm_divLoadingW_After{
    0%{opacity:0}55%{opacity:0}70%{opacity:1}100%{opacity:1}
}
@-moz-keyframes artm_divLoadingW_After{
    0%{opacity:0}55%{opacity:0}70%{opacity:1}100%{opacity:1}
}
@-ms-keyframes artm_divLoadingW_After{
    0%{opacity:0}55%{opacity:0}70%{opacity:1}100%{opacity:1}
}
@-o-keyframes artm_divLoadingW_After{
    0%{opacity:0}55%{opacity:0}70%{opacity:1}100%{opacity:1}
}

/* COMPLEMENTS  ************/

.artm_bcBS{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -o-box-sizing:border-box; /* Firefox */
    -ms-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

/*INPUTS ***************/

.artm_inputContainer_std{
    position: relative;
    width: 100%; height: 80px;
    margin-bottom: 10px;

}
.artm_inputContainer_std_tag{
    position:absolute;
    top:0px; left: 0px; right:0px; height: 40px;
    padding-bottom: 5px;
    line-height: 50px;

}
.artm_inputContainer_std_inputBox{
    position:absolute;
    top:40px; left: 0px; right:0px; bottom:0px;

}

.artm_inputContainer_full{
    position: relative;
    width: 100%;

    height: 80px;
    margin-bottom: 10px;
    display: inline-block;

}
.artm_inputContainer_hlfl{
    position: relative;
    width: 50%;
    width: -webkit-calc(50% - 5px);
    height: 80px;
    margin-bottom: 10px;
    display: inline-block;

}
.artm_inputContainer_hlfr{
    position: relative;
    width: 40%;
    width: -webkit-calc(50% - 5px);
    margin-left: 5px;
    height: 80px;
    margin-bottom: 10px;
    display: inline-block;
}

.artm_inputContainer_hlfl_tag{
    position:absolute;
    top:0px; left: 0px; right:0px; height: 40px;
    padding-bottom: 5px;
    line-height: 50px;
    text-align: left;
}
.artm_inputContainer_hlfr_tag{
    position:absolute;
    top:0px; left: 0px; right:0px; height: 40px;
    padding-bottom: 5px;
    line-height: 50px;
    text-align: right;
}
.artm_inputContainer_hlf_inputBox{
    position:absolute;
    top:40px; left: 0px; right:0px; bottom:0px;

}
.artm_inputContainer_200{
    position: relative;

    height: 40px;
    margin: 0 auto;
    margin-bottom: 10px;

    width: 200px;


}
.artm_inputContainer_response{

    position: relative;
    width: 40%;
    width: -webkit-calc(50% - 5px);
    margin-left: 5px;
    height: 30px;
    margin-bottom: 10px;
    display: inline-block;
}







.artm_inputContainer_std_input{
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border:1px solid #e5e5e5;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    padding: 10px;
    color:#474757;
}
.artm_inputContainer_std_inputTemp{
    width: 100%;
    width: calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
    height: 40px;
    border-radius: 5px;
    border:1px solid #e5e5e5;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    padding: 10px;
    color:#474757;
}




.artm_buttonContainer_std{
    position: relative;
    width: 100%; height: auto;
    margin-bottom: 10px;

}
.artm_bottonContainer_std_buttonIndigo{
    position: relative;
    display: inline-block;
    height: 40px; padding: 0 20px;
    background: #5c6bc0;
    color:#fff;
    border-radius: 5px;
    line-height: 40px;
    cursor:pointer;

    -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;


}
.artm_bottonContainer_std_buttonIndigo:hover{
    background: #6c7be0;
}
.artm_bottonContainer_std_buttonIndigo:active{
    top: 1px;
}
.artm_bottonContainer_std_buttonBlack{
    position: relative;
    display: inline-block;
    height: 40px; padding: 0 20px;
    background: #424242;
    color:#fff;
    border-radius: 5px;
    line-height: 40px;
    cursor:pointer;

    -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;


}
.artm_bottonContainer_std_buttonBlack:hover{
    background: #616161;
}
.artm_bottonContainer_std_buttonBlack:active{
    top: 1px;
}


.artm_bottonContainer_std_buttonOlive{
    position: relative;
    display: inline-block;
    height: 40px; padding: 0 20px;
    background: #51742B;
    color:#fff;
    border-radius: 5px;
    line-height: 40px;
    cursor:pointer;

    -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;


}
.artm_bottonContainer_std_buttonOlive:hover{
    background: #41641B;
}
.artm_bottonContainer_std_buttonOlive:active{
    top: 1px;
}


/*Retro Big Button*/
.artm_bottonRetroBigGreen{
    position: relative;
    display: inline-block;
    width: 180px;height: 180px; padding: 0 20px;
    opacity: 0.8;
    background-image: url(../..//img/greenb.png);
    background-size: 100%;
    background-position: 0px 0px;
    color:#222;
    border-radius: 100%;

    font-size: 14px;
    font-weight: bold;
    cursor:pointer;
}
.artm_bottonRetroBigGreen div{
    width: 180px; text-align: center;
    position:absolute;
    top:190px;left: 0px;

}
.artm_bottonRetroBigGreen:hover{
    opacity: 1;
}
.artm_bottonRetroBigGreen:active{
    background-position: 0px -180px;
}

.artm_bottonRetroBigRed{
     position: relative;
    display: inline-block;
    width: 180px;height: 180px; padding: 0 20px;
    opacity: 0.8;
    background-image: url(../..//img/redb.png);
    background-size: 100%;
    background-position: 0px 0px;
    color:#222;
    border-radius: 100%;

    font-size: 14px;
    font-weight: bold;
    cursor:pointer;
}
.artm_bottonRetroBigRed div{
    width: 180px; text-align: center;
    position:absolute;
    top:190px;left: 0px;

}
.artm_bottonRetroBigRed:hover{
    opacity: 1;
}
.artm_bottonRetroBigRed:active{
    background-position: 0px -180px;
}












/*ALIGNS *******/
.artm_alr{
    text-align: right !important;
}
.artm_all{
    text-align: left !important;
}
.artm_alc{
    text-align: center !important;
}

.artm_floatRight{
  position:absolute;
  right:10px;
  top:8px !important;
}


/*OTHERS  ************/
.artm_hrGlass{
    opacity: 0.3;
    margin-bottom: 20px;
}


/*TABLES  ***********/

.artm_basicReportTable{
    font-size: 11px;
    width: 100%;
    min-width: 500px;
}
.artm_basicReportTable th{
    text-align: left;
    padding: 10px;
    border-radius:5px;
}
.artm_basicReportTable td{
    text-align: left;
    padding: 10px;
    border-radius:5px;
}
.artm_basicReportTable thead tr{


}

.artm_basicReportTable tr:nth-child(even) {
    background-color: #eee;
}
.artm_basicReportTable tr:nth-child(even):hover {
    background-color: #e5e5e5;
}

.artm_basicReportTable tr:nth-child(odd) {
    background-color: #fff;
}
.artm_basicReportTable tr:nth-child(odd):hover {
    background-color: #f5f5f5;
}

.artm_bordR5Indigo{
    border-right: 5px solid #5C6BC0;
}
.artm_bordR5Olive{
    border-right: 5px solid #6F9E3A;
}
.artm_bordR5Black{
    border-right: 5px solid #424242;
}






.headLogo{
    position:absolute; top:10px; bottom: 10px; left: 10px; width: 112px;background: none; background-repeat: no-repeat;
    background-image: url(../..//img/demo/ashilogoPanel112.png)

}
.headLogoCBCells{
    position:absolute; top:10px; bottom: 10px; left: 10px; width: 112px;background: none; background-repeat: no-repeat;
    background-image: url(http://cbcells.focosoftec.com/resources/img/cbcellsGeneral/logoBlanco112.png);
}

.headLogoCryo{
    position:absolute; top:10px; bottom: 10px; left: 10px; width: 112px;background: none; background-repeat: no-repeat;
    background-image: url(http://cryovida.focosoftec.com/resources/img/cbcellsGeneral/logoBlanco112.png);
}



.artm_fullModalPanel{
    position: fixed;
    top:0px;bottom:0px; left: 0px;right: 0px;
    background:#f5f5f5;
    z-index: 999;
    display: none;
    overflow-y: auto;
}
.artm_vitroBg{
    background: rgba(0,0,0,0.7) !important;
}

.artm_asistenciaCardForm{
    position: relative;
    width:30%; height: 80px;
    border-bottom: 5px solid #444;
    text-align: center; line-height: 80px;
    border-radius: 5px;
    box-shadow: 0px 0px 1px rgba(0,0,0,0.2), 1px 1px 1px rgba(0,0,0,0.2);
    display: inline-block; margin: 5px;
    cursor: pointer;
    opacity: 1;
}
.artm_asistenciaCardFormSelected{
    box-shadow: 0px 0px 5px rgba(100,100,100,1), 0px 0px 5px rgba(100,100,100,1);
    opacity: 1;
    background: #eee;
}


.artm_notifySide{
    position: absolute;
    top:15px; right: 15px;
    width: 20px; height: 20px;
    background: #F44336;
    color:#fff;
    font-weight: bold;
    font-size: 10px;
    border-radius:100%;
    line-height: 18px;
    text-align: center;
}














/*WIDGETS  *********************/
/*******************************/


.artm_2colsArticle{
    position: relative;
    width: 100%;
    height: auto;

    padding-bottom: 40px;
}
.artm_2colsArticleTit{
    position: relative;
    width: 100%;
    padding: 60px 20px;
    text-align: center;
    font-size:42px;
    color:#474757;
    font-weight: 200;
}
.artm_2colsArticleT1{
    position: relative;
    width: 49%;
    padding: 20px 40px;
    display: inline-block;
    text-align: center;
    font-size:18px;
    color:#474757;
    font-weight: 200;
}

.artm_2colsArticleT2{
    position: relative;
    width: 49%;
    padding: 20px 40px;
    display: inline-block;
    text-align: center;
    font-size:18px;
    color:#474757;
    font-weight: 200;
}
.artm_2colsArticleReadMore{
    position:relative;
    padding: 20px;
    width: 100%;

}


.artm_1colArticle{
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 40px;
}
.artm_1colArticleTit{
    position: relative;
    width: 100%;
    padding: 60px 20px;
    text-align: center;
    font-size:42px;
    color:#474757;
    font-weight: 200;
}
.artm_1colArticleT1{
    position: relative;
    width: 100%;
    padding: 20px 40px;
    display: inline-block;
    text-align: center;
    font-size:18px;
    color:#474757;
    font-weight: 200;
}


.artm_brilloTemp{
  background:none;

  animation: artm_brilloTemp 3s ;
  -webkit-animation: artm_brilloTemp 3s;
  -moz-animation: artm_brilloTemp 3s;
  -o-animation: artm_brilloTemp 3s;
  -ms-animation: artm_brilloTemp 3s;
}



@keyframes artm_brilloTemp{
    0%{background:yellow}50%{background:yellow}100%{background:none}
}
@-webkit-keyframes artm_brilloTemp{
    0%{background:yellow}50%{background:yellow}100%{background:none}
}
@-moz-keyframes artm_brilloTemp{
    0%{background:yellow}50%{background:yellow}100%{background:none}
}
@-ms-keyframes artm_brilloTem
    0%{background:yellow}50%{background:yellow}100%{background:none}
}
@-o-keyframes artm_brilloTemp{
    0%{background:yellow}50%{background:yellow}100%{background:none}
}



.spanAbierto{
font-size:16px; margin-left:5px; color:blue;cursor:pointer; color:#474757;
}

.spanCerrado{
  font-size:16px; margin-left:5px; color:blue;cursor:pointer; display:none;color:#474757;
}

.spanCerradoDiv{
  display:none;
}

.spanAbiertoDiv{
  display:inline;
}


/*BOTONERA FLOTANTE*/
.floatController{
  position:fixed;
  top:60px;right:26px;
  z-index: 2;

  opacity:0.3;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;

}
.floatController:hover{
  opacity:1;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
}

.floatController .artm_panelBody_container{
  padding:7px;
  width:auto;
}

.floatControllerFull{
  position:fixed;
  top:0px;right:26px;
  z-index: 2;

  opacity:0.3;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
}

.floatControllerFull:hover{
  opacity:1;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
}

.floatControllerFull .artm_panelBody_container{
  padding:7px;
  width:auto;
}


/* MODAL loadingModal */
.loadingModal{
  position: fixed;

  top:0px;right: 0px; bottom:0px; left:0px;
  padding-top: calc(50% - 50px);
  padding-top: -webkit-calc(50% - 50px);
  padding-top: -ms-calc(50% - 50px);
  padding-top: -moz-calc(50% - 50px);
  padding-top: -o-calc(50% - 50px);
  padding-top: 200px;




  background: rgba(0,0,0,0.6);

  z-index: 99999;




}