/*
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 : 01-mar-2018, 9:47:41
    Author     : AMicheloud
*/
body { margin: 0; padding: 0; }
body.no-scroll { overflow: hidden; }

textarea:focus, input:focus{
    outline: none;
}

*:focus {
    outline: none;
}

body.bg-teacher-groups{
    /*
    background: url(img/teacher/bg.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    */
}
body.bg-unit{
    background: url(img/adventure-unit/bg.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
body.bg-profile{
    background: url(img/student/profile/bg_perfil.png); 
}
body.bg-unit.stones2 {
    background: url(img/adventure/path_stones2.png);	
}
body.bg-unit.desert {
    background: url(img/adventure/path_desert.png);
}
body.bg-unit.grass2 {
    background: url(img/adventure/path_grass2.png);
}
body.bg-unit.grass {
    background: url(img/adventure/path_grass.png);
}
body.bg-unit.stones {
    background: url(img/adventure/path_stones.png);
}

/* LOADING */
.g-loading{ position: fixed; z-index: 10; top:0; left: 0; right: 0; bottom: 0; }
.g-loading .bg{ position: absolute;  z-index: 9; top:0; left: 0; right: 0; bottom: 0; background: #000; opacity: 0.7; }
.g-loading .animation{ position: absolute; z-index: 10; top: 50%; left: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; }
.g-loading .loading-message{ 
    position: absolute;
    z-index: 11;
    color: #fff;
    font-family: sans-serif;
    top: 50%;
    left: 50%;
    width: 200px;
    text-align: center;
    margin-left: -100px;
    margin-top: 50px;
}

.g-loading .animation{ 
    -webkit-animation: flickerAnimation 1.5s infinite;
    -moz-animation: flickerAnimation 1.5s infinite;
    -o-animation: flickerAnimation 1.5s infinite;
    animation: flickerAnimation 1.5s infinite;
}
/* END LOADING */

/* TOASTS */
.d-toasts { position: fixed; top: 5px; right: 0; z-index: 99999; padding-top: 5px; font-family: dimbo; }
.d-toasts .d-toast{ display: block; height: 55px; margin: 5px; cursor: pointer; }
.d-toasts .d-toast .area{ 
    float:right;
    margin-right: 10px;
    font-size: 25px;
    cursor: pointer;
    border-radius: 5px;
    background: #00a493;
    display: inline-block;
    padding: 5px 15px 9px 15px;
    color: #FFF;
    border-radius: 10px;
    border: 3px solid #ffd200;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    text-shadow: 2px 2px 0px rgb(49, 41, 41);
}
/* END TOASTS */

.g-container { margin:0; padding: 0; font-family: dimbo; font-size: 24px; overflow: auto; }
.g-container > .g-module { display: none; }

/* commons */
.g-container .btn{ cursor: pointer; border-radius: 5px; background: #00a493; display: inline-block; padding: 5px 10px; color: #FFF; }
.g-container .btn:hover{ background: #666; }

.g-container .bt-bitmap{ cursor: pointer; }
.g-container .bt-bitmap:hover{ 
    -webkit-animation: flickerAnimation .75s infinite;
    -moz-animation: flickerAnimation .75s infinite;
    -o-animation: flickerAnimation .75s infinite;
    animation: flickerAnimation .75s infinite;
}

.g-container .g-btn-back{ width: 51px; height: 50px; background: url(img/back-btn.png); background-size: cover; cursor: pointer; }
.g-container .g-btn-back:hover{ opacity: .8; }

.g-container .g-btn-close{width: 50px;height: 50px;background: url(img/btn-close.png);background-size: contain;background-repeat: no-repeat;cursor: pointer;}
.g-container .g-btn-close:hover{ opacity: .8; }

.g-container .module{display: none;}

.g-container .tx-shadow-1{text-shadow: 3px 3px 0px rgb(49, 41, 41);}
.g-container .tx-shadow-2{text-shadow: 2px 2px 0px rgb(49, 41, 41);}
.g-container .bx-shadow-bottom-line-1{-webkit-box-shadow: 1px 3px 0px -1px rgba(0,0,0,0.75); -moz-box-shadow: 1px 3px 0px -1px rgba(0,0,0,0.75); box-shadow: 1px 3px 0px -1px rgba(0,0,0,0.75);}

.g-container .modal{display: none; position: fixed; top:10px; left:50%; z-index: 5; background: #FFF; border: 3px solid #ffd200; border-radius: 10px; width: 500px; height: 400px; margin-left: -250px;
                    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
                    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
                    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
}
.g-container .modal-bg{display: none; position: fixed; top:0; left:0; right:0; bottom:0; z-index: 4; background: #000; opacity: .5;}

.g-container .modal.notify{ 
    height: 380px;
    top: 50%;
    margin-top: -190px;
    text-align: center;
    z-index: 13;
    width: 380px;
    margin-left: -190px;
}
.g-container .modal.notify .g-btn-close{ position: absolute; top: 10px; right: 10px; z-index: 3; }
.g-container .modal.notify .header{ 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px 8px 0px 0px;
    background: #fb8d02;
    background: -moz-linear-gradient(top, #fb8d02 0%, #ffd44e 100%);
    background: -webkit-linear-gradient(top, #fb8d02 0%,#ffd44e 100%);
    background: linear-gradient(to bottom, #fb8d02 0%,#ffd44e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb8d02', endColorstr='#ffd44e',GradientType=0 );
}
.g-container .modal.notify.level-up .header{ 
    bottom: 0;
    height: auto;
    border-bottom: 0;
}
.g-container .modal.notify .g-card-container .title{ 
    position: absolute;
    color: #FFF;
    top: 13px;
    left: 10px;
    right: 10px;
    text-align: center;
    font-size: 35px;
    letter-spacing: 1px;
    z-index: 3;
}
.g-container .modal.notify .g-card-container.coffer .title{ 

    top: 135px;
}
.g-container .modal.notify .group .group-avatar { 
    position: absolute; 
    top: 213px;
    left: 155px;
    background: url(img/groups/group_01.png); background-size: cover; width: 67px; height: 71px; z-index: 2; cursor: pointer; }
.g-container .modal.notify .group .group-avatar.a1{background: url(img/groups/group_01.png);background-size: cover; }
.g-container .modal.notify .group .group-avatar.a2{background: url(img/groups/group_02.png);background-size: cover; }
.g-container .modal.notify .group .group-avatar.a3{background: url(img/groups/group_03.png); background-size: cover;}
.g-container .modal.notify .group .group-avatar.a4{background: url(img/groups/group_04.png); background-size: cover;}
.g-container .modal.notify .group .group-avatar.a5{background: url(img/groups/group_05.png); background-size: cover;}
.g-container .modal.notify .group .group-avatar.a6{background: url(img/groups/group_06.png); background-size: cover;}
.g-container .modal.notify .group .group-avatar.a7{background: url(img/groups/group_07.png); background-size: cover;}
.g-container .modal.notify .group .group-avatar.a8{background: url(img/groups/group_08.png); background-size: cover;}
.g-container .modal.notify .group .group-avatar.a9{background: url(img/groups/group_09.png); background-size: cover;}
.g-container .modal.notify .group .group-avatar.a10{background: url(img/groups/group_10.png); background-size: cover;}
.g-container .modal.notify .group .group-avatar.a11{background: url(img/groups/group_11.png);background-size: cover; }
.g-container .modal.notify .group .group-avatar.a12{background: url(img/groups/group_12.png); background-size: cover;}
.g-container .modal.notify .group .group-avatar.a13{background: url(img/groups/group_13.png); background-size: cover;}
.g-container .modal.notify .group .group-avatar.a14{background: url(img/groups/group_14.png);background-size: cover; }
.g-container .modal.notify .group .group-avatar.a15{background: url(img/groups/group_15.png);background-size: cover; }
.g-container .modal.notify .group .group-avatar.a16{background: url(img/groups/group_16.png);background-size: cover; }

.g-container .modal.notify .g-card-container.points .points-big{ 
    position: absolute;
    top: 110px;
    left: 21px;
    background: url(img/points2.png);
    background-size: cover;
    width: 131px;
    height: 121px;
    z-index: 2;
    font-size: 70px;
    color: #FFF;
}
body.skin-magos .g-container .modal.notify .g-card-container.points .points-big{ 
    background: url(img/points-magos.png);
    background-size: cover;
    width: 131px;
    height: 131px;
    line-height: 140px;
}
body.skin-exploradores .g-container .modal.notify .g-card-container.points .points-big{ 
    background: url(img/points-exploradores.png);
    background-size: cover;
    width: 131px;
    height: 131px;
    line-height: 140px;
}
body.skin-colonizadores .g-container .modal.notify .g-card-container.points .points-big{ 
    background: url(img/points-colonizadores.png);
    background-size: cover;
    width: 131px;
    height: 131px;
    line-height: 140px;
}
body.skin-sofubis .g-container .modal.notify .g-card-container.points .points-big{ 
    background: url(img/points-sofubis.png);
    background-size: cover;
    width: 131px;
    height: 131px;
    line-height: 140px;
}
body.skin-titanes .g-container .modal.notify .g-card-container.points .points-big{ 
    background: url(img/points-titanes.png);
    background-size: cover;
    width: 131px;
    height: 131px;
    line-height: 140px;
}
body.skin-guardianes .g-container .modal.notify .g-card-container.points .points-big{ 
    background: url(img/points-guardianes.png);
    background-size: cover;
    width: 131px;
    height: 131px;
    line-height: 140px;
}
.g-container .modal.notify .g-card-container.points .points-big2{ 
    position: absolute;
    top: 90px;
    left: 21px;
    background: url(img/points2.png);
    background-size: cover;
    width: 131px;
    height: 121px;
    z-index: 3;
    font-size: 70px;
    color: #FFF;
    display: none;
}
body.skin-magos .g-container .modal.notify .g-card-container.points .points-big2{ 
    background: url(img/points-magos.png);
    background-size: cover;
    width: 131px;
    height: 131px;
}
body.skin-exploradores .g-container .modal.notify .g-card-container.points .points-big2{ 
    background: url(img/points-exploradores.png);
    background-size: cover;
    width: 131px;
    height: 131px;
}
body.skin-colonizadores .g-container .modal.notify .g-card-container.points .points-big2{ 
    background: url(img/points-colonizadores.png);
    background-size: cover;
    width: 131px;
    height: 131px;
}
body.skin-sofubis .g-container .modal.notify .g-card-container.points .points-big2{ 
    background: url(img/points-sofubis.png);
    background-size: cover;
    width: 131px;
    height: 131px;
}
body.skin-titanes .g-container .modal.notify .g-card-container.points .points-big2{ 
    background: url(img/points-titanes.png);
    background-size: cover;
    width: 131px;
    height: 131px;
}
body.skin-guardianes .g-container .modal.notify .g-card-container.points .points-big2{ 
    background: url(img/points-guardianes.png);
    background-size: cover;
    width: 131px;
    height: 131px;
}
.g-container .modal.notify .g-card-container.points .ilumination{ 
    position: absolute;
    top: 18px;
    left: 0px;
    background: url(img/ilumination.png) no-repeat;
    width: 309px;
    height: 322px;
    z-index: 1;
    background-position: -60px;
    background-size: 100%;
}
.g-container .modal.notify .g-card-container.points .points-container{ 
    position: absolute;
    top: 120px; 
    right: 35px;
    width: 130px;
    background: #093c3e;
    border-radius: 40px;
    height: 40px;
    z-index: 2;
}
.g-container .modal.notify .g-card-container.points .points-container .icon{ 
    width: 53px;
    height: 52px;
    background: url(img/points.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: -7px;
    left: 1px;
}
body.skin-magos .g-container .modal.notify .g-card-container.points .points-container .icon{ 
    height: 53px;
    background: url(img/points-magos.png) no-repeat;
    background-size: cover;
}
body.skin-exploradores .g-container .modal.notify .g-card-container.points .points-container .icon{ 
    height: 53px;
    background: url(img/points-exploradores.png) no-repeat;
    background-size: cover;
}
body.skin-colonizadores .g-container .modal.notify .g-card-container.points .points-container .icon{ 
    height: 53px;
    background: url(img/points-colonizadores.png) no-repeat;
    background-size: cover;
}
body.skin-sofubis .g-container .modal.notify .g-card-container.points .points-container .icon{ 
    height: 53px;
    background: url(img/points-sofubis.png) no-repeat;
    background-size: cover;
}
body.skin-titanes .g-container .modal.notify .g-card-container.points .points-container .icon{ 
    height: 53px;
    background: url(img/points-titanes.png) no-repeat;
    background-size: cover;
}
body.skin-guardianes .g-container .modal.notify .g-card-container.points .points-container .icon{ 
    height: 53px;
    background: url(img/points-guardianes.png) no-repeat;
    background-size: cover;
}
.g-container .modal.notify .g-card-container.points .points-container .value{ 
    position: absolute;
    top: 2px;
    right: 11px;
    color: #fff;
    font-size: 38px;
    left: 58px;
    text-align: center;
    line-height: 38px;
}
.g-container .modal.notify .g-card-container.coffer .coffer-icon{ 
    position: absolute;
    top: -18px;
    left: 101px;
    background: url(img/coffer/coffer-close.png);
    background-size: cover;
    width: 170px;
    height: 159px;
    z-index: 2;
    font-size: 70px;
    color: #FFF;
}
.g-container .modal.notify .g-card-container.coffer.open .coffer-icon{ 
    background: url(img/coffer/coffer-open.png);
    background-size: cover;
    width: 170px;
    height: 153px;
}
.g-container .modal.notify .g-card-container.coffer .ilumination{ 
    position: absolute;
    top: -80px;
    left: 30px;
    background: url(img/ilumination.png) no-repeat;

    width: 309px;
    height: 160px;
    z-index: 1;
    background-position: top;
    background-size: 80%;
}

.g-container .modal.notify .g-card-container.level .level{ 
    position: absolute;
    top: 137px;
    left: 52px;
    background: url(img/pergamino-big.png);
    background-size: cover;
    width: 121px;
    height: 169px;
    z-index: 3;
}
.g-container .modal.notify .g-card-container.level .ilumination{ 
    position: absolute;
    top: 38px;
    left: 0px;
    background: url(img/ilumination.png) no-repeat;
    width: 381px;
    height: 322px;
    z-index: 1;
    background-position: -70px;
}
.g-container .modal.notify .g-card-container.level .level-box{ 
    position: absolute;
    top: 60px;
    left: 26px;
    width: 330px;
    height: 70px;
    border-radius: 15px;
    z-index: 3;
}
.g-container .modal.notify .g-card-container.level .level-box .level-box-icon{ 
    position: absolute;
    top: -40px;
    left: -5px;
    width: 75px;
    height: 105px;
    background: url(img/adventure-battle/level-up.png);
    background-size: cover;
}
.g-container .modal.notify .g-card-container.level .level-box .level-box-text{ 
    position: absolute;
    top: 5px;
    left: 10px;
    color: #333;
    font-size: 30px;
    right: 10px;
    line-height: 30px;
    letter-spacing: 1px;
}
.g-container .modal.notify .g-card-container.level .level-container{ 
    position: absolute;
    top: 200px; 
    right: 35px;
    width: 130px;
    background: #093c3e;
    border-radius: 40px;
    height: 40px;
    z-index: 2;
}
.g-container .modal.notify .g-card-container.level .level-container .icon{ 
    width: 49px;
    height: 68px;
    background: url(img/pergamino.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: -12px;
    left: 11px;
}
.g-container .modal.notify .g-card-container.level .level-container .value{ 
    position: absolute;
    top: 2px;
    right: 11px;
    color: #fff;
    font-size: 38px;
    left: 58px;
    text-align: center;
    line-height: 38px;
}

.g-container .modal.notify .group .group-name{ 
    position: absolute;
    top: 280px;
    left: 10px;
    right: 10px;
}
.g-container .modal.notify .group .group-avatar-bg{ 
    cursor: pointer;
    position: absolute;
    top: 190px;
    left: 123px;
    background: url(img/teacher/bg-group.png);
    width: 136px;
    height: 92px;
    z-index: 1;
}
.g-container .modal.notify .bt-popup{ 
    position: absolute;
    top: 320px;
    right: 95px;
    cursor: pointer;
    border-radius: 5px;
    background: #119520;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    border-radius: 10px;
    border: 3px solid #ffd200;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    z-index: 2;
    left: 95px;
}
.g-container .modal.notify .message{ 
    font-size: 26px;
    top: 50px;
    left: 10px;
    text-align: center;
    position: absolute;
    right: 10px;
    z-index: 2;
}
.g-container .modal.notify .message .icon-points{ 
    display: block;
    background: url(img/points.png);
    width: 96px;
    height: 90px;
    margin: 10px auto;
}
.g-container .modal.notify .message .icon-coffer{ 
    display: block;
    background: url(img/teacher/coffer.png);
    width: 170px;
    height: 113px;
    margin: 10px auto;
}
.g-container .modal.notify .message .icon-level{ 
    display: block;
    background: url(img/level-ico.png);
    width: 65px;
    height: 55px;
    margin: 10px auto;
}
.g-container .modal-bg.notify{ z-index: 12; }


.g-container .g-menu-options{ 
    display: none;
    position: absolute;
    top: 40px;
    right: 9px;
    padding: 10px;
    border: 2px solid #DEDEDE;
    border-radius: 20px;
    background: #FFF;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    z-index: 5;
}
.g-container .g-menu-options .g-option{ 
    display: block;
    width: auto;
    height: auto;
    padding: 5px 15px;
    cursor: pointer;
    text-shadow: none;
    border-radius: 10px;
}
.g-container .g-menu-options .g-option:hover{ 
    background: #00a493;
    color: #fff;
    text-shadow: 2px 2px 0px rgb(49, 41, 41);
}

.g-container .modal.user-points-history{ 
    height: 600px; 
    top: 50%;
    margin-top: -300px;
    border-radius: 20px;
}
.g-container .modal.user-points-history .header{
    background: #078a96;
    border-radius: 20px 20px 0px 0px;
}
.g-container .modal.user-points-history .header .label{ 
    padding: 10px 20px;
    color: #fff;
    text-shadow: 4px 4px 0px #04535a;
    box-sizing: border-box;
}
.g-container .modal.user-points-history .g-btn-close{
    position: absolute;
    top: -17px;
    right: -17px;
    z-index: 3;
}
.g-container .modal.user-points-history .list{
    position: absolute; top: 55px; left: 5px; right: 5px; bottom: 5px; overflow-x: hidden; overflow-y: auto; 
}
.g-container .modal.user-points-history .list > span{
    text-align: center;
    float: left;
    margin: 130px;
}

.g-container .modal.user-points-history .list .notify {
    border-bottom: 1px solid #dedede;
    margin: 10px;
    padding: 10px;
    position: relative;
    height: 115px;
    box-sizing: border-box;
}

.g-container .modal.user-points-history .list .notify .points{ 	
    float: left;
    width: 60px;
    text-align: center;
    height: auto;
    color: #008891;
    font-size: 36px;
    font-family: 'dimbo', sans-serif;
    background-image: url(./img/gem.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 48px;
    padding-top: 53px;
    margin-right: 10px;
    margin-top: -6px;
}
body.skin-magos .g-container .modal.user-points-history .list .notify .points{ 	
    background-image: url(./img/points-magos.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 48px;
}
body.skin-exploradores .g-container .modal.user-points-history .list .notify .points{ 	
    background-image: url(./img/points-exploradores.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 48px;
}
body.skin-colonizadores .g-container .modal.user-points-history .list .notify .points{ 	
    background-image: url(./img/points-colonizadores.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 48px;
}
body.skin-sofubis .g-container .modal.user-points-history .list .notify .points{ 	
    background-image: url(./img/points-sofubis.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 48px;
}
body.skin-titanes .g-container .modal.user-points-history .list .notify .points{ 	
    background-image: url(./img/points-titanes.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 48px;
}
body.skin-guardianes .g-container .modal.user-points-history .list .notify .points{ 	
    background-image: url(./img/points-guardianes.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 48px;
}

.g-container .modal.user-points-history .list .notify.exit .points{ 
    color: red; 
}
.g-container .modal.user-points-history .list .notify .time{ 
    position: absolute;
    left: 90px;
    top: 86px;
    font-size: 21px;
    color: #999999;
    font-family: 'YanoneKaffeesatz_Regular', sans-serif;
}
.g-container .modal.user-points-history .list .notify .feedback{ 
    line-height: 23px;
    width: calc(100% - 146px);
    height: 49px;
    overflow: hidden;
    box-sizing: border-box;
    position: absolute;
    top: 32px;
    left: 90px;
    color: #3c3c3c;
}
.g-container .modal.user-points-history .list .notify.without-teacher .feedback{ 
}
.g-container .modal.user-points-history .list .notify .title{ 
    position: absolute;
    left: 90px;
    top: -1px;
    font-size: 24px;
    color: #078a96;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    right: 10px;
}

.g-container .modal.user-points-history  .list .notify .avatar{ 
    position: absolute;
    top: 30px;
    right: 10px;
    background: url(img/groups/group_01.png);
    background-size: cover;
    width: 47px;
    height: 51px;
    z-index: 2;
    cursor: pointer;
}

.g-container .modal.user-points-history  .list .notify .avatar-accesory{ 
    position: absolute;
    top: 30px;
    right: 10px;
    background: url(img/perch.png);
    background-size: cover;
    width: 51px;
    height: 51px;
    z-index: 2;
    cursor: pointer;
}
.g-container .modal.user-points-history  .list .notify .avatar.a1{background: url(img/groups/group_01.png);background-size: cover; }
.g-container .modal.user-points-history  .list .notify .avatar.a2{background: url(img/groups/group_02.png);background-size: cover; }
.g-container .modal.user-points-history  .list .notify .avatar.a3{background: url(img/groups/group_03.png); background-size: cover;}
.g-container .modal.user-points-history  .list .notify .avatar.a4{background: url(img/groups/group_04.png); background-size: cover;}
.g-container .modal.user-points-history  .list .notify .avatar.a5{background: url(img/groups/group_05.png); background-size: cover;}
.g-container .modal.user-points-history  .list .notify .avatar.a6{background: url(img/groups/group_06.png); background-size: cover;}
.g-container .modal.user-points-history  .list .notify .avatar.a7{background: url(img/groups/group_07.png); background-size: cover;}
.g-container .modal.user-points-history  .list .notify .avatar.a8{background: url(img/groups/group_08.png); background-size: cover;}
.g-container .modal.user-points-history  .list .notify .avatar.a9{background: url(img/groups/group_09.png); background-size: cover;}
.g-container .modal.user-points-history  .list .notify .avatar.a10{background: url(img/groups/group_10.png); background-size: cover;}
.g-container .modal.user-points-history  .list .notify .avatar.a11{background: url(img/groups/group_11.png);background-size: cover; }
.g-container .modal.user-points-history  .list .notify .avatar.a12{background: url(img/groups/group_12.png); background-size: cover;}
.g-container .modal.user-points-history  .list .notify .avatar.a13{background: url(img/groups/group_13.png); background-size: cover;}
.g-container .modal.user-points-history  .list .notify .avatar.a14{background: url(img/groups/group_14.png);background-size: cover; }
.g-container .modal.user-points-history  .list .notify .avatar.a15{background: url(img/groups/group_15.png);background-size: cover; }
.g-container .modal.user-points-history  .list .notify .avatar.a16{background: url(img/groups/group_16.png);background-size: cover; }

.g-container .modal.user-points-history  .list .notify.with-card .avatar{ display: none; }

.g-container .modal.user-points-history  .list .notify .card{ 
    position: absolute;
    top: 20px;
    right: 5px;
    width: 54px;
    height: 62px;
    background: url(img/cards/cromo_pasapal.png);
    background-size: cover;
}
.g-container .modal.user-points-history  .list .notify .card.c2{ 
    background: url(img/cards/cromo_energia.png);background-size: cover;
}
.g-container .modal.user-points-history  .list .notify .card.c3{ 
    background: url(img/cards/cromo_pista.png);background-size: cover;
}
body.skin-sofubis .g-container .modal.user-points-history  .list .notify .card{ 
    background: url(img/cards/sofubis/cromo_pasapal.png);
    background-size: cover;
}
body.skin-sofubis .g-container .modal.user-points-history  .list .notify .card.c2{ 
    background: url(img/cards/sofubis/cromo_energia.png);background-size: cover;
}
body.skin-sofubis .g-container .modal.user-points-history  .list .notify .card.c3{ 
    background: url(img/cards/sofubis/cromo_pista.png);background-size: cover;
}

.g-container .modal.user-points-history  .list .notify .card.c4{ 
    background: url(img/cards/cromo4.png);background-size: cover;
}
.g-container .modal.user-points-history  .list .notify .card.c5{ 
    background: url(img/cards/cromo5.png);background-size: cover;
}
.g-container .modal.user-points-history  .list .notify .card.c6{ 
    background: url(img/cards/cromo6.png);background-size: cover;
}
/* teacher groups */
.g-container .module.groups { width: 100%; }
.g-container .module.groups .title { color: #ffd200; font-size: 30px; font-family: woold; position: absolute; top: 20px; left: 50%; width: 200px; height: 40px; text-align: center; z-index: 2; margin-left: -100px; }
.g-container .module.groups .bt-exit-game { 
    display: none;
    text-decoration: none;
    position: absolute;
    top: 13px;
    left: 15px;
    cursor: pointer;
    background: #4e504e;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    border-radius: 10px;
    border: 3px solid #d4d4d4;
}
.g-container .module.groups .bt-config { 
    display: inline-block;
    width: 51px;
    height: 51px;
    background: url(img/bt-config.png) no-repeat;
    cursor: pointer;
    margin: 0px 5px -1px 15px;
    position: absolute;
    top: 13px;
    right: 10px;
}
.g-container .module.groups .g-container { padding-top: 70px; text-align: center; }
.g-container .module.groups .g-card {
    display: inline-block;
    margin: 10px;
    padding: 10px;
    position: relative;
    width: 300px;
    height: 250px;
    border: 3px solid #8cc876;
    border-radius: 20px;
    background: #FFF;
    vertical-align: top;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.5);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.5);
}
.g-container .module.groups .g-card .btn{ }
.g-container .module.groups .g-card .btn-options{ position: absolute; cursor: pointer; right: 10px; top: 10px; background: url(img/options.png) center center no-repeat #fff; width: 30px; height: 30px; border-radius: 50%; }
.g-container .module.groups .g-card .btn-options.active,
.g-container .module.groups .g-card .btn-options:hover{
    background: url(img/options.png) center center no-repeat #CFCFCF; 
}
.g-container .module.groups .g-card .avatar{ position: absolute; top: 42px; left: 124px; background: url(img/groups/group_01.png); background-size: cover; width: 67px; height: 71px; z-index: 2; cursor: pointer; }
.g-container .module.groups .g-card .avatar.a1{background: url(img/groups/group_01.png);background-size: cover; }
.g-container .module.groups .g-card .avatar.a2{background: url(img/groups/group_02.png);background-size: cover; }
.g-container .module.groups .g-card .avatar.a3{background: url(img/groups/group_03.png); background-size: cover;}
.g-container .module.groups .g-card .avatar.a4{background: url(img/groups/group_04.png); background-size: cover;}
.g-container .module.groups .g-card .avatar.a5{background: url(img/groups/group_05.png); background-size: cover;}
.g-container .module.groups .g-card .avatar.a6{background: url(img/groups/group_06.png); background-size: cover;}
.g-container .module.groups .g-card .avatar.a7{background: url(img/groups/group_07.png); background-size: cover;}
.g-container .module.groups .g-card .avatar.a8{background: url(img/groups/group_08.png); background-size: cover;}
.g-container .module.groups .g-card .avatar.a9{background: url(img/groups/group_09.png); background-size: cover;}
.g-container .module.groups .g-card .avatar.a10{background: url(img/groups/group_10.png); background-size: cover;}
.g-container .module.groups .g-card .avatar.a11{background: url(img/groups/group_11.png);background-size: cover; }
.g-container .module.groups .g-card .avatar.a12{background: url(img/groups/group_12.png); background-size: cover;}
.g-container .module.groups .g-card .avatar.a13{background: url(img/groups/group_13.png); background-size: cover;}
.g-container .module.groups .g-card .avatar.a14{background: url(img/groups/group_14.png);background-size: cover; }
.g-container .module.groups .g-card .avatar.a15{background: url(img/groups/group_15.png);background-size: cover; }
.g-container .module.groups .g-card .avatar.a16{background: url(img/groups/group_16.png);background-size: cover; }
.g-container .module.groups .g-card .avatar-bg{ cursor: pointer; position: absolute; top: 20px; left: 92px; background: url(img/teacher/bg-group.png); width: 136px; height: 92px; z-index: 1; }
.g-container .module.groups .g-card .name{cursor: pointer;position: absolute;top: 120px;left: 20px;font-size: 35px;color: #2e2e2e;}
.g-container .module.groups .g-card .amount-users{position: absolute;top: 175px;left: 20px;color: #5f6970;}
.g-container .module.groups .g-card .code{position: absolute;top: 211px;left: 20px;color: #5f6970;}
.g-container .module.groups .g-card .code span { background: #DEDEDE; border-radius: 10px; padding: 5px 20px; color: #000; margin-left: 15px; }
.g-container .module.groups .g-card .btn{
    cursor: pointer;
    border-radius: 5px;
    background: #119520;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    position: absolute;
    left: 77px;
    bottom: 7px;
    border-radius: 10px;
    border: 3px solid #ffd160;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    font-size:  24px;
    width:  135px;
}


.g-container .module.groups .g-card input{ position: absolute; top: 144px; left: 40px; font-family: 'dimbo', sans-serif; border: 0; color: #666666; font-size: 28px; display: block; border-bottom: solid #dcdcdc 2px; margin: 10px auto; }
.g-container .module.groups .g-card .avatar-select{position: absolute;top: 110px;left: 10px;right: 10px;text-align: center;color: #909090;}

.g-container .module.groups .g-modal {
    display: none; 
    position: fixed;
    top:0; left: 0; right: 0; bottom: 0;
    z-index: 3;
}
.g-container .module.groups .g-modal .icons-bg{
    background: #000;
    opacity: .5;
    z-index: 4;
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.g-container .module.groups .g-modal .icons{
    z-index: 5;
    position: absolute; top:50%; left:50%; z-index: 5; border-radius: 10px; 
    width: 465px; height: 500px; margin-left: -235px;
    margin-top: -250px;
    background: #FFF;
    border: 3px solid #ffd200;
    border-radius: 30px;
    text-align: center;
    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
}
.g-container .module.groups .g-modal .icons .g-btn-close{
    position: absolute;
    top: 6px;
    right: 10px;
}
.g-container .module.groups .g-modal .icons .g-title{
    margin: 20px;
    text-align: left;
}
.g-container .module.groups .g-modal .icons .list-icons .icon{
    display: inline-block;
    width: 80px; height: 80px;
    background-image: url(img/groups/group_01.png);
    background-size: cover;
    margin: 10px;
    cursor: pointer;
}
.g-container .module.groups .g-modal .icons .list-icons .icon:hover{
    -webkit-animation: flickerAnimation .75s infinite;
    -moz-animation: flickerAnimation .75s infinite;
    -o-animation: flickerAnimation .75s infinite;
    animation: flickerAnimation .75s infinite;
}
.g-container .module.groups .g-modal .icons .list-icons .icon.i2{background-image: url(img/groups/group_02.png);}
.g-container .module.groups .g-modal .icons .list-icons .icon.i3{background-image: url(img/groups/group_03.png);}
.g-container .module.groups .g-modal .icons .list-icons .icon.i4{background-image: url(img/groups/group_04.png);}
.g-container .module.groups .g-modal .icons .list-icons .icon.i5{background-image: url(img/groups/group_05.png);}
.g-container .module.groups .g-modal .icons .list-icons .icon.i6{background-image: url(img/groups/group_06.png);}
.g-container .module.groups .g-modal .icons .list-icons .icon.i7{background-image: url(img/groups/group_07.png);}
.g-container .module.groups .g-modal .icons .list-icons .icon.i8{background-image: url(img/groups/group_08.png);}
.g-container .module.groups .g-modal .icons .list-icons .icon.i9{background-image: url(img/groups/group_09.png);}
.g-container .module.groups .g-modal .icons .list-icons .icon.i10{background-image: url(img/groups/group_10.png);}
.g-container .module.groups .g-modal .icons .list-icons .icon.i11{background-image: url(img/groups/group_11.png);}
.g-container .module.groups .g-modal .icons .list-icons .icon.i12{background-image: url(img/groups/group_12.png);}
.g-container .module.groups .g-modal .icons .list-icons .icon.i13{background-image: url(img/groups/group_13.png);}
.g-container .module.groups .g-modal .icons .list-icons .icon.i14{background-image: url(img/groups/group_14.png);}
.g-container .module.groups .g-modal .icons .list-icons .icon.i15{background-image: url(img/groups/group_15.png);}
.g-container .module.groups .g-modal .icons .list-icons .icon.i16{background-image: url(img/groups/group_16.png);}

/* END teacher groups */

/* teacher group students */
.g-container .module.group-students .header{ 
    position: relative;
    width: 100%;
    height: 50px;
    z-index: 2;}
.g-container .module.group-students .header .g-btn-back{     width: 52px;
                                                             top: 10px;
                                                             left: 14px;
                                                             position: absolute;
                                                             height: 50px; }
.g-container .module.group-students .header .bt-config{ 
    display: inline-block;
    width: 51px;
    height: 51px;
    background: url(img/bt-config.png) no-repeat;
    cursor: pointer;
    margin: 0px 5px -1px 15px;
    position: absolute;
    top: 13px;
    right: 10px;
}
.g-container .module.group-students .header .group{ 
    position: absolute;
    top: 15px;
    left: 85px;
    font-size: 30px;
    color: #FFF;
}
.g-container .module.group-students .header .group .icon{ 
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(img/groups/group_01.png);
    background-size: cover;
}
.g-container .module.group-students .header .group .icon.i2{ background: url(img/groups/group_02.png); background-size: cover; }
.g-container .module.group-students .header .group .icon.i3{ background: url(img/groups/group_03.png); background-size: cover; }
.g-container .module.group-students .header .group .icon.i4{ background: url(img/groups/group_04.png); background-size: cover; }
.g-container .module.group-students .header .group .icon.i5{ background: url(img/groups/group_05.png); background-size: cover; }
.g-container .module.group-students .header .group .icon.i6{ background: url(img/groups/group_06.png); background-size: cover; }
.g-container .module.group-students .header .group .icon.i7{ background: url(img/groups/group_07.png); background-size: cover; }
.g-container .module.group-students .header .group .icon.i8{ background: url(img/groups/group_08.png); background-size: cover; }
.g-container .module.group-students .header .group .icon.i9{ background: url(img/groups/group_09.png); background-size: cover; }
.g-container .module.group-students .header .group .icon.i10{ background: url(img/groups/group_10.png); background-size: cover; }
.g-container .module.group-students .header .group .icon.i11{ background: url(img/groups/group_11.png); background-size: cover; }
.g-container .module.group-students .header .group .icon.i12{ background: url(img/groups/group_12.png); background-size: cover; }
.g-container .module.group-students .header .group .icon.i13{ background: url(img/groups/group_13.png); background-size: cover; }
.g-container .module.group-students .header .group .icon.i14{ background: url(img/groups/group_14.png); background-size: cover; }
.g-container .module.group-students .header .group .icon.i15{ background: url(img/groups/group_15.png); background-size: cover; }
.g-container .module.group-students .header .group .icon.i16{ background: url(img/groups/group_16.png); background-size: cover; }
.g-container .module.group-students .header .group .name{ 
    display: inline-block;
    vertical-align: top;
    margin-left: 10px; 
}
.g-container .module.group-students .header .bt-add-coffer{ 
    display: none;
    position: absolute;
    top: 10px;
    right: 15px;
    width: 52px;
    height: 52px;
    background: url(img/teacher/bt-coffer.png);
    background-size: cover;
    cursor: pointer;
}

.g-container .module.group-students .menu{ 
    width: 500px;
    text-align: center;
    margin: 20px auto;
    margin-bottom: 10px;
}
.g-container .module.group-students .menu .bt-adventure{
    position: relative;
    display: inline-block;
    width: 196px;
    height: 84px;
    background: url(img/teacher/bt-adventure.png) no-repeat center center;
    text-shadow: 3px 3px 0px #7f5d00;
    transition: background .5s linear;
}
.g-container .module.group-students .menu .bt-adventure:hover{
    transition: background .5s linear;
    background: url(img/teacher/bt-adventure-hover.png) no-repeat center center;
    cursor: pointer;
}
.g-container .module.group-students .menu .bt-adventure span{
    position: absolute;
    top: 26px;
    left: 72px;
    font-family: 'dimbo', sans-serif;
    font-size: 24px;
    color: #FFF;
    right: 10px;
    text-align: center;
}
.g-container .module.group-students .menu .bt-progress{
    position: relative;
    display: inline-block;
    width: 198px;
    height: 84px;
    background: url(img/teacher/bt-progress.png) no-repeat center center;
    margin-left: 10px;
    text-shadow: 3px 3px 0px #0d6f75;
    transition: background .5s linear;
}
.g-container .module.group-students .menu .bt-progress:hover{
    transition: background .5s linear;
    background: url(img/teacher/bt-progress-hover.png) no-repeat center center;
    cursor: pointer;
}
.g-container .module.group-students .menu .bt-progress span{
    position: absolute;
    top: 26px;
    left: 6px;
    font-family: 'dimbo', sans-serif;
    font-size: 24px;
    color: #FFF;
    right: 73px;
    text-align: center;
}
.g-container .module.group-students .bt-coffer{
    position: relative;
    width: 341px;
    height: 96px;
    background: url(img/coffer/coffer-bt.png);
    background-size: cover;
    margin: 0 auto;
    margin-bottom: 15px;
} 
.g-container .module.group-students .bt-coffer .bt-options{
    position: absolute;
    cursor: pointer;
    right: 10px;
    top: 7px;
    background: url(img/options.png) center center no-repeat;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    z-index: 1;
}
.g-container .module.group-students .bt-coffer .bt-options:hover,
.g-container .module.group-students .bt-coffer .bt-options.active{
    background: url(img/options.png) center center no-repeat #dedede;
}
.g-container .module.group-students .bt-coffer .label{
    color: #083e74;
    font-size: 22px;
    position: absolute;
    top: 7px;
    left: 115px;
}
.g-container .module.group-students .bt-coffer.open .label{
    left: 135px;
}
.g-container .module.group-students .bt-coffer .progress-bt{
    position: absolute;
    top: 40px;
    left: 100px;
    width: 225px;
    height: 45px;
    z-index: 4;
    cursor: pointer;
}
.g-container .module.group-students .bt-coffer .progress{
    position: absolute;
    top: 46px;
    left: 160px;
    right: 30px;
    text-align: left;
    color: #fff;
    z-index: 2;
}
.g-container .module.group-students .bt-coffer .progress-bar{
    position: absolute;
    top: 45px;
    left: 120px;
    right: 26px;
    height: 31px;
    border-radius: 10px;
}
.g-container .module.group-students .bt-coffer .progress-bar-mask{
    position: absolute;
    top: 42px;
    left: 117px;
    right: 24px;
    height: 31px;
    border: 3px solid #FFF;
    -webkit-box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    -moz-box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    border-radius: 10px;
}
.g-container .module.group-students .bt-coffer .points{
    width: 39px;
    height: 38px;
    position: absolute;
    top: 39px;
    left: 104px;
    background: url(img/points.png);
    background-size: cover;
    z-index: 3;
    cursor: pointer;
}
body.skin-magos .g-container .module.group-students .bt-coffer .points{
    left: 118px;
    height: 39px;
    background: url(img/points-magos.png);
    background-size: cover;
}
body.skin-exploradores .g-container .module.group-students .bt-coffer .points{
    left: 118px;
    height: 39px;
    background: url(img/points-exploradores.png);
    background-size: cover;
}
body.skin-colonizadores .g-container .module.group-students .bt-coffer .points{
    left: 118px;
    height: 39px;
    background: url(img/points-colonizadores.png);
    background-size: cover;
}
body.skin-sofubis .g-container .module.group-students .bt-coffer .points{
    left: 118px;
    height: 39px;
    background: url(img/points-sofubis.png);
    background-size: cover;
}
body.skin-titanes .g-container .module.group-students .bt-coffer .points{
    left: 118px;
    height: 39px;
    background: url(img/points-titanes.png);
    background-size: cover;
}
body.skin-guardianes .g-container .module.group-students .bt-coffer .points{
    left: 118px;
    height: 39px;
    background: url(img/points-guardianes.png);
    background-size: cover;
}
.g-container .module.group-students .bt-coffer .bt-open{
    display: none;
}
.g-container .module.group-students .bt-coffer.open .bt-open{
    display: block;
    background: #ff951a;
    padding: 5px 10px;
    color: #FFF;
    position: absolute;
    right: 13px;
    bottom: 10px;
    border-radius: 10px;
    border: 3px solid #ffd160;
    font-size: 24px;
    width: 162px;
    text-align: center;
    cursor: pointer;
    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
}
.g-container .module.group-students .bt-coffer.open .progress-bt,
.g-container .module.group-students .bt-coffer.open .progress,
.g-container .module.group-students .bt-coffer.open .progress-bar,
.g-container .module.group-students .bt-coffer.open .progress-bar-mask,
.g-container .module.group-students .bt-coffer.open .points{
    display: none;
}
.g-container .module.group-students .bt-coffer .icon{
    width: 93px;
    height: 88px;
    position: absolute;
    top: 0px;
    left: 5px;
    background: url(img/coffer/coffer-close.png);
    background-size: cover;
}
.g-container .module.group-students .bt-coffer.open .icon{
    width: 118px;
    height: 107px;
    position: absolute;
    top: -8px;
    left: 2px;
    background: url(img/coffer/coffer-open.png);
    background-size: cover;
}
.g-container .module.group-students .bt-add-coffer{
    position: relative;
    width: 340px;
    height: 91px;
    background: url(img/teacher/bg-coffer.png);
    background-size: cover;
    margin: 0 auto;
    margin-bottom: 15px;
} 
.g-container .module.group-students .bt-add-coffer .label{
    color: #083e74;
    font-size: 22px;
    position: absolute;
    top: 6px;
    left: 15px;
}
.g-container .module.group-students .bt-add-coffer .message{
    color: #083e74;
    font-size: 19px;
    border: 2px solid #ecac00;
    border-radius: 10px;
    background: #ffd200;
    position: absolute;
    top: 33px;
    left: 10px;
    right: 120px;
    line-height: 19px;
    box-sizing: border-box;
    padding: 4px;
    text-align: center;
}
.g-container .module.group-students .bt-add-coffer .icon{
    width: 62px;
    height: 58px;
    position: absolute;
    top: -10px;
    right: 47px;
    background: url(img/coffer/coffer-close.png);
    background-size: cover;
}
.g-container .module.group-students .bt-add-coffer .bt-options{
    position: absolute;
    cursor: pointer;
    right: 10px;
    top: 7px;
    background: url(img/options.png) center center no-repeat;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    z-index: 1;
}
.g-container .module.group-students .bt-add-coffer .bt-add{
    background: #119520;
    padding: 5px 10px;
    color: #FFF;
    position: absolute;
    right: 13px;
    bottom: -4px;
    border-radius: 10px;
    border: 3px solid #ffd160;
    font-size: 24px;
    width: 72px;
    text-align: center;
    cursor: pointer;
    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
}
.g-container .module.group-students .g-container{ 
    margin-left: 50px;
    margin-right: 50px;
    text-align: center;
}
.g-container .module.group-students .g-container .empty{ 
    display: inline-block;
    margin: 10px;
    padding: 10px;
    position: relative;
    width: 310px;
    height: 230px;
    border: 3px solid #8cc876;
    border-radius: 20px;
    background: #FFF;
    vertical-align: top;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.5);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.5);
}
.g-container .module.group-students .g-container .empty .icon{ 
    width: 125px;
    height: 90px;
    position: absolute;
    top: 10px;
    left: 10px;
    background: url(img/groups/new-clan.png);
}
.g-container .module.group-students .g-container .empty .title{ 
    position: absolute;
    top: 20px;
    left: 153px;
    text-align: left;
    font-size: 30px;
}
.g-container .module.group-students .g-container .empty .message{ 
    position: absolute;
    top: 110px;
    left: 20px;
    right: 20px;
    color: #666;
    text-align: left;
}
.g-container .module.group-students .g-container .empty .message .code{ 
    background: #DEDEDE;
    border-radius: 10px;
    padding: 5px 20px;
    color: #000;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 20px;
    text-align: center;
}
.g-container .module.group-students .g-container span{ 
    font-size: 30px;
}
.g-container .module.group-students .g-card { display: inline-block; width: 215px; height: 254px; background: url(img/teacher/bg-card.png); position: relative;
                                              margin-left: 2%;
                                              margin-bottom: 4%;
                                              margin-right: 2%;
}
.g-container .module.group-students .g-card .btn-options{ 
    position: absolute;
    cursor: pointer;
    right: 10px;
    top: 12px;
    background: url(img/options-white.png) center center no-repeat #008a90;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    z-index: 1;
}

.g-container .module.group-students .g-card .check-custom{
    float: left;
    margin: 15px 0px 0px 15px;
}

.g-container .module.group-students .g-card .btn-options.active, 
.g-container .module.group-students .g-card .btn-options:hover{ 
    background: url(img/options-white.png) center center no-repeat #05c5ce;
}
.g-container .module.group-students .g-card .level{ 
    color: #FFF;
    /* background: #006568; */
    position: absolute;
    top: 87px;
    left: 53px;
    padding: 1px 15px;
    border-radius: 20px;
    font-family: 'dimbo', sans-serif;
    font-size: 21px;
    box-sizing: border-box;
    padding-left: 50px;
    width: 77px;
    z-index: 3;
}
.g-container .module.group-students .g-card .level .icon{ 
    width: 32px;
    height: 44px;
    background: url(img/pergamino.png);
    background-size: cover;
    position: absolute;
    top: 0px;
    left: -1px;
    z-index: 2;
}
.g-container .module.group-students .g-card .level .value{ 
    font-size: 20px;
    position: absolute;
    top: -22px;
    left: -13px;
    background: #c3a365;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    z-index: 1;
}
.g-container .module.group-students .g-card .avatar{ 
    /* width: 100px; */
    /* height: 99px; */
    position: absolute;
    top: 52px;
    left: 60px;
    /* background: url(img/avatar-1.png); */
    z-index: 2;
    cursor: pointer;
}
.g-container .module.group-students .g-card .avatar .student-avatar-circle { 
    width: 100px;
    height: 100px;
    position: relative;
}
.g-container .module.group-students .g-card .avatar .student-avatar-circle .avatar-image{ 
    background-size: cover;
    border-bottom-left-radius: 130px;
    border-bottom-right-radius: 130px;
    width: 98px;
    height: 110px;
    background-position-y: -3px;
    background-repeat: no-repeat;
    z-index: 6;
    top: -31px;
    left: 1px;
    position: absolute;
}
.g-container .module.group-students .g-card .avatar .student-avatar-circle .ring{ 

}
.g-container .module.group-students .g-card .avatar .student-avatar-circle .ring-inner{ 

}
.g-container .module.group-students .g-card .avatar-bg{ 
    width: 138px;
    height: 101px;
    position: absolute;
    top: 40px;
    left: 40px;
    background: url(img/teacher/bg-student.png);
    z-index: 1;
    cursor: pointer;
}
.g-container .module.group-students .g-card .name{ 
    position: absolute;
    top: 199px;
    left: 10px;
    right: 10px;
    text-align: center;
    cursor: pointer;
    font-family: 'dimbo', sans-serif;
    font-size: 21px;
    color: #1e3839;;
}
.g-container .module.group-students .g-card.connected .name{ 
    top: 189px;
}
.g-container .module.group-students .g-card .status{ 
    position: absolute;
    top: 213px;
    left: 10px;
    right: 10px;
    text-align: center;
    cursor: pointer;
    font-family: 'dimbo', sans-serif;
    font-size: 21px;
    color: #00ff0a;
}
.g-container .module.group-students .g-card .points{ 
    width: 70px;
    height: 40px;
    position: absolute;
    top: 135px;
    right: 13px;
}
.g-container .module.group-students .g-card .points .icon{ 
    position: absolute;
    top: 0px;
    right: 0px;
    width: 35px;
    height: 32px;
    background: url(img/points.png);
    background-size: cover;
}
body.skin-magos .g-container .module.group-students .g-card .points .icon{ 
    height: 34px;
    background: url(img/points-magos.png);
    background-size: cover;
}
body.skin-exploradores .g-container .module.group-students .g-card .points .icon{ 
    height: 34px;
    background: url(img/points-exploradores.png);
    background-size: cover;
}
body.skin-colonizadores .g-container .module.group-students .g-card .points .icon{ 
    height: 34px;
    background: url(img/points-colonizadores.png);
    background-size: cover;
}
body.skin-sofubis .g-container .module.group-students .g-card .points .icon{ 
    height: 34px;
    background: url(img/points-sofubis.png);
    background-size: cover;
}
body.skin-titanes .g-container .module.group-students .g-card .points .icon{ 
    height: 34px;
    background: url(img/points-titanes.png);
    background-size: cover;
}
body.skin-guardianes .g-container .module.group-students .g-card .points .icon{ 
    height: 34px;
    background: url(img/points-guardianes.png);
    background-size: cover;
}
.g-container .module.group-students .g-card .points .label{ 
    color: #FFF;
    font-size: 30px;
    position: absolute;
    left: 0;
    top: 0;
    width: 31px;
    text-align: right;
}
.g-container .module.group-students .g-card .know{ 
    color: #FFF;
    font-size: 30px;
    position: absolute;
    top: 130px;
    left: 15px;
    font-size: 35px;
}
.g-container .module.group-students .g-card .know span{ 
    font-size: 20px;
}
.g-container .module.group-students .g-modal.feedback-bg { display: none; position: fixed; top:0; left:0; right:0; bottom:0; z-index: 2; background: #000; opacity: .5; }
.g-container .module.group-students .g-modal.feedbacks { 
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 500px;
    margin-left: -250px;
    background: #FFF;
    border: 3px solid #ffd200;
    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    border-radius: 30px;
    height: 600px;
    margin-top: -300px;
    z-index: 6;
}
.g-container .module.group-students .g-header .g-btn-close{ 
    position: absolute;
    top: 3px;
    right: 5px;
    width: 50px;
    height: 50px;
}
.g-container .module.group-students .g-modal.feedbacks .g-header{ 
    /*width: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    height: 164px;
    background: url(img/teacher/bg-header.png);
    background-size: cover;
    position: absolute;
    top: 0; left: 0; right:0;*/
}
.g-container .module.group-students .g-modal.feedbacks .g-header .g-users{ font-weight: bold; text-align: center; margin: 5px; }
.g-container .module.group-students .g-modal.feedbacks .g-header .g-title{
    text-align: center;
    font-family: 'dimbo', sans-serif;
    font-size: 30px;
    color: #2f2f2f;
    margin: 12px 0px 0px 0px;
}

.g-container .module.group-students .g-modal.feedbacks .g-header .g-btn-close{
    right: 4px;
    top: 10px;
    width: 52px;
    background: url(img/btn-close.png);
    background-size: cover;
}

.g-container .module.group-students .g-modal.feedbacks .g-header .btn.history{ 
    position: absolute;
    top: 80px;
    right: 10px;
}

.g-container .module.group-students .g-modal.feedbacks .g-header .avatar{
    width: 100px;
    height: 99px;
    position: absolute;
    top: 31px;
    left: 200px;
    background: url(img/avatar-1.png);
    z-index: 2;
}
.g-container .module.group-students .g-modal.feedbacks .g-header .avatar-bg{
    width: 138px;
    height: 101px;
    position: absolute;
    top: 31px;
    left: 180px;
    background: url(img/teacher/bg-student.png);
    z-index: 1;
}
.g-container .module.group-students .g-modal.feedbacks .g-feedbacks{ position: absolute; overflow-y: auto; overflow-x: hidden; top: 80px; left: 5px; right: 5px; bottom: 5px; }
.g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback{ 
    position: relative;
    width: 100%;
    height: 60px;
}
.g-container .module.group-students .g-modal.feedbacks .feedback.add{
    position: absolute;
    width: 45px;
    height: 45px;
    top: 6px;
    left: 6px;
    background-image: url(./img/plus.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}	
.g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .points{
    position: absolute;
    width: 88px;
    height: 57px;
    background-image: url(img/group/bt-premiar.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 5px;
    left: 5px;
    color: #fff;
    font-size: 35px;
    line-height: 45px;
}
.g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .points:before{
    content: '';
    width: 35px;
    height: 35px;
    background-image: url(img/gem.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 9px;
    left: 9px;
}
body.skin-magos .g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .points:before{
    background-image: url(img/points-magos.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
body.skin-exploradores .g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .points:before{
    background-image: url(img/points-exploradores.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
body.skin-colonizadores .g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .points:before{
    background-image: url(img/points-colonizadores.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
body.skin-sofubis .g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .points:before{
    background-image: url(img/points-sofubis.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
body.skin-titanes .g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .points:before{
    background-image: url(img/points-titanes.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
body.skin-guardianes .g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .points:before{
    background-image: url(img/points-guardianes.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .points span{ 
    position: absolute;
    top: 5px;
    right: 15px;
    font-family: 'dimbo', sans-serif;
    font-size: 26px;
    color: #ffffff;
    text-shadow: 2px 2px 0px #003f46;
}
.g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .name{
    position: absolute;
    top: 13px;
    left: 100px;
    font-family: 'YanoneKaffeesatz_Bold', sans-serif;
    font-size: 22px;
    color: #3c3c3c;
}

.g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .name div{
    color: #6f6f6f;
    font-family: 'YanoneKaffeesatz_Regular', sans-serif;
    font-size: 22px;
}

.g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .btn.edit{ 
    position: absolute;
    top: 9px;
    right: 10px;
}

.g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .options-gem{
    position: absolute;
    top: 20px;
    right: 10px;
    width: 20px;
    height: 22px;
    background: url(./img/group/options.png) no-repeat center center;
    cursor: pointer;
    background-size:  contain;
    z-index: 1;	
}

.g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .options-gem div{
    display: none;
    background: #fffada;
    width: 150px;
    padding: 7px 0px;
    box-sizing: border-box;
    position:  absolute;
    right: 21px;
    top: -11px;
    border-radius: 10px;
    -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
} 

.g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .options-gem div span{
    cursor: pointer;
    /* height: 30px; */
    line-height: 33px;
    color: #000000;
    font-family: 'YanoneKaffeesatz_Regular', sans-serif;
    font-size: 20px;
    padding: 2px 15px 0px;
    box-sizing: border-box;
    display: block;
} 

.g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback .options-gem div span:hover{
    background: #f2e8a8;
} 

.g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback.add .points{ 
    background: url(img/teacher/bt-add.png);
}

.g-container .module.group-students .g-modal.feedbacks .g-feedbacks .feedback.add .bt-add{ 
    color: #666;
    position: absolute;
    top: 14px;
    left: 102px;
}

.g-container .module.group-students .g-modal.feedback {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 6;
    width: 470px;
    height: 250px;
    margin-left: -235px;
    margin-top: -125px;
    background: #FFF;
    border: 3px solid #ffd200;
    border-radius: 30px;
    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
}

.g-container .module.group-students .g-modal.feedback .g-title{ 
    position: absolute;
    top: 15px;
    left: 20px;
    color: #2f2f2f;
}
.g-container .module.group-students .g-modal.feedback .g-points-label{ 
    position: absolute;
    top: 67px;
    left: 20px;
    color: #999;
}
.g-container .module.group-students .g-modal.feedback .g-feedback-label{ 
    position: absolute;
    top: 70px;
    left: 140px;
    color: #999;
    font-size: 21px;
}
.g-container .module.group-students .g-modal.feedback .g-form > .g-points{ 
    position: absolute;
    top: 100px;
    left: 20px;
    width: 81px;
    height: 50px;
    /*background: url(img/teacher/bt-points.png)*/
}
.g-container .module.group-students .g-modal.feedback .g-form > .g-points select{ 
    font-family: 'dimbo', sans-serif;
    border: 0;
    color: #ffffff;
    font-size: 25px;
    margin: 0;
    border-radius: 10px;
    width: 80px;
    height: 50px;
    position: absolute;
    top: 5px;
    left: -5px;
    background-image: url(img/group/count-gem.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    box-sizing: border-box;
    padding: 0px 0px 0px 12px;
    -moz-appearance: window;
    -webkit-appearance: none;
}

.g-container .module.group-students .g-modal.feedback .g-form > .g-points select::-ms-expand {
    display: none;
}

.g-container .module.group-students .g-modal.feedback .g-form > .g-points select option{
    color: #000000;
}
.g-container .module.group-students .g-modal.feedback .g-feedback{ 
    position: absolute;
    top: 100px;
    left: 128px;    
}
.g-container .module.group-students .g-modal.feedback .g-form{ }
.g-container .module.group-students .g-modal.feedback .g-form input{ 
    font-family: 'YanoneKaffeesatz_Regular', sans-serif;
    border: 0;
    color: #666666;
    font-size: 25px;
    display: inline-block;
    border-bottom: solid #16b5a6 2px;
    margin: 11px;
    line-height: 28px;
    width: 315px;
}
.g-container .module.group-students .g-modal.feedback .g-footer{ margin: 10px; }
.g-container .module.group-students .g-modal.feedback .g-footer .btn.remove{ 
    position: absolute;
    top: 201px;
    background: none;
    color: #b34949;
}
.g-container .module.group-students .g-modal.feedback .g-footer .btn.accept{ 
    position: absolute;
    top: 190px;
    background: #119520;
    padding: 5px 10px;
    color: #FFF;
    position: absolute;
    right: 10px;
    border-radius: 10px;
    border: 3px solid #ffd160;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    font-size: 24px;
    width: 91px;
    text-align: center;
    cursor: pointer;
}
.g-container .module.group-students .g-modal.history { 
    display: none; position: fixed; top:50%; left:50%; z-index: 5; border-radius: 10px; 
    width: 475px; height: 400px; margin-left: -235px;
    margin-top: -200px;
    background: #FFF;
    border: 3px solid #ffd200;
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
}

.g-container .module.group-students .g-modal.history .g-title{ 
    display: inline-block;
    font-family: woold;
    margin: 14px;
}
.g-container .module.group-students .g-modal.history .g-history{ position: absolute; top: 285px; left: 5px; right: 5px; bottom: 5px; overflow-x: hidden; overflow-y: auto; }

.g-container .module.group-students .g-modal.history .g-history .history {
    display: block;
    width: 100%;
    min-height: 50px;
    margin: 5px 10px;
    position: relative;
    padding: 5px 0 5px 0;
    /* background:  red; */
    border-bottom: 2px solid #e5e5e5;
    box-sizing: border-box;
    overflow: auto;
}
.g-container .module.group-students .g-modal.history .notify {
    border-bottom: 1px solid #dedede;
    margin: 10px;
    padding: 10px;
    position: relative;
    height: 115px;
    box-sizing: border-box;
}

.g-container .module.group-students .g-modal.history .notify .points{ 	
    float: left;
    width: 60px;
    text-align: center;
    height: auto;
    color: #008891;
    font-size: 36px;
    font-family: 'dimbo', sans-serif;
    background-image: url(./img/gem.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 48px;
    padding-top: 53px;
    margin-right: 10px;
    margin-top: -6px;
}
body.skin-magos .g-container .module.group-students .g-modal.history .notify .points{ 	
    background-image: url(./img/points-magos.png);
}
body.skin-exploradores .g-container .module.group-students .g-modal.history .notify .points{ 	
    background-image: url(./img/points-exploradores.png);
}
body.skin-colonizadores .g-container .module.group-students .g-modal.history .notify .points{ 	
    background-image: url(./img/points-colonizadores.png);
}
body.skin-sofubis .g-container .module.group-students .g-modal.history .notify .points{ 	
    background-image: url(./img/points-sofubis.png);
}
body.skin-titanes .g-container .module.group-students .g-modal.history .notify .points{ 	
    background-image: url(./img/points-titanes.png);
}
body.skin-guardianes .g-container .module.group-students .g-modal.history .notify .points{ 	
    background-image: url(./img/points-guardianes.png);
}
.g-container .module.group-students .g-modal.history .notify.exit .points{ 
    color: red; 
}
.g-container .module.group-students .g-modal.history .notify .time{ 
    position: absolute;
    left: 90px;
    top: 86px;
    font-size: 21px;
    color: #999999;
    font-family: 'YanoneKaffeesatz_Regular', sans-serif;
}
.g-container .module.group-students .g-modal.history .notify .feedback{ 
    line-height: 23px;
    width: calc(100% - 146px);
    height: 49px;
    overflow: hidden;
    box-sizing: border-box;
    position: absolute;
    top: 32px;
    left: 90px;
    color: #3c3c3c;
}

.g-container .module.group-students .g-modal.history .notify .title{ 
    position: absolute;
    left: 90px;
    top: -1px;
    font-size: 24px;
    color: #078a96;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    right: 10px;
}

.g-container .module.group-students .g-modal.history .notify .avatar{ 
    position: absolute;
    top: 30px;
    right: 10px;
    background: url(img/groups/group_01.png);
    background-size: cover;
    width: 47px;
    height: 51px;
    z-index: 2;
    cursor: pointer;
}

.g-container .module.group-students .g-modal.history .avatar-accesory{ 
    position: absolute;
    top: 30px;
    right: 10px;
    background: url(img/perch.png);
    background-size: cover;
    width: 51px;
    height: 51px;
    z-index: 2;
    cursor: pointer;
}
.g-container .module.group-students .g-modal.history .avatar.a1{background: url(img/groups/group_01.png);background-size: cover; }
.g-container .module.group-students .g-modal.history .notify .avatar.a2{background: url(img/groups/group_02.png);background-size: cover; }
.g-container .module.group-students .g-modal.history .notify .avatar.a3{background: url(img/groups/group_03.png); background-size: cover;}
.g-container .module.group-students .g-modal.history .notify .avatar.a4{background: url(img/groups/group_04.png); background-size: cover;}
.g-container .module.group-students .g-modal.history .notify .avatar.a5{background: url(img/groups/group_05.png); background-size: cover;}
.g-container .module.group-students .g-modal.history .notify .avatar.a6{background: url(img/groups/group_06.png); background-size: cover;}
.g-container .module.group-students .g-modal.history .notify .avatar.a7{background: url(img/groups/group_07.png); background-size: cover;}
.g-container .module.group-students .g-modal.history .notify .avatar.a8{background: url(img/groups/group_08.png); background-size: cover;}
.g-container .module.group-students .g-modal.history .notify .avatar.a9{background: url(img/groups/group_09.png); background-size: cover;}
.g-container .module.group-students .g-modal.history .notify .avatar.a10{background: url(img/groups/group_10.png); background-size: cover;}
.g-container .module.group-students .g-modal.history .notify .avatar.a11{background: url(img/groups/group_11.png);background-size: cover; }
.g-container .module.group-students .g-modal.history .notify .avatar.a12{background: url(img/groups/group_12.png); background-size: cover;}
.g-container .module.group-students .g-modal.history .notify .avatar.a13{background: url(img/groups/group_13.png); background-size: cover;}
.g-container .module.group-students .g-modal.history .notify .avatar.a14{background: url(img/groups/group_14.png);background-size: cover; }
.g-container .module.group-students .g-modal.history .notify .avatar.a15{background: url(img/groups/group_15.png);background-size: cover; }
.g-container .module.group-students .g-modal.history .notify .avatar.a16{background: url(img/groups/group_16.png);background-size: cover; }

.g-container .module.group-students .g-modal.history .notify.with-card .avatar{ display: none; }

.g-container .module.group-students .g-modal.history .notify .card{ 
    position: absolute;
    top: 20px;
    right: 5px;
    width: 54px;
    height: 62px;
    background: url(img/cards/cromo_pasapal.png);
    background-size: cover;
}
body.skin-sofubis .g-container .module.group-students .g-modal.history .notify .card{ 
    background: url(img/cards/sofubis/cromo_pasapal.png);
}
.g-container .module.group-students .g-modal.history .notify .card.c2{ 
    background: url(img/cards/cromo_energia.png);background-size: cover;
}
body.skin-sofubis .g-container .module.group-students .g-modal.history .notify .card.c2{ 
    background: url(img/cards/sofubis/cromo_energia.png);background-size: cover;
}
.g-container .module.group-students .g-modal.history .notify .card.c3{ 
    background: url(img/cards/cromo_pista.png);background-size: cover;
}
body.skin-sofubis .g-container .module.group-students .g-modal.history .notify .card.c3{ 
    background: url(img/cards/sofubis/cromo_pista.png);background-size: cover;
}
.g-container .module.group-students .g-modal.history .notify .card.c4{ 
    background: url(img/cards/cromo4.png);background-size: cover;
}
.g-container .module.group-students .g-modal.history .notify .card.c5{ 
    background: url(img/cards/cromo5.png);background-size: cover;
}
.g-container .module.group-students .g-modal.history .notify .card.c6{ 
    background: url(img/cards/cromo6.png);background-size: cover;
}
/*
.g-container .module.group-students .g-modal.history .g-history .history .gem-value {
    float: left;
    width: 60px;
    text-align: center;
    height: auto;
    color: #008891;
    font-size: 25px;
    font-family: 'dimbo', sans-serif;
    background-image: url(./img/gem.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 33px;
    padding-top: 32px;
    margin-right: 10px;
}

.g-container .module.group-students .g-modal.history .g-history .history .gem-description {
    float: left;
    font-family: 'YanoneKaffeesatz_Bold', sans-serif;
    font-size: 25px;
    color: #3c3c3c;
    width: calc(100% - 71px);
    margin: 7px 0px 7px 0px;
}

.g-container .module.group-students .g-modal.history .g-history .history .gem-description span {
    color: #6f6f6f;
    font-family: 'YanoneKaffeesatz_Regular', sans-serif;
}

.g-container .module.group-students .g-modal.history .g-history .history .gem-data {
    float: left;
    color: #999999;
    font-family: 'YanoneKaffeesatz_Regular', sans-serif;
    font-size: 20px;
}


*/
.g-container .module.group-students .g-modal.history {
    border-radius: 30px;
    height: 600px;
    margin-top: -300px;
}
.g-container .module.group-students .g-modal.history .g-header {
    width: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    height: 201px;
    background: url(img/teacher/bg-header.png);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: visible;
}

.g-container .module.group-students .g-modal.history .g-header .name {
    color: #1c3435;
    text-align: center;
    margin: 7px 0px 0px 0px;
    color: #FFF;
    font-size: 28px;
}

.g-container .module.group-students .g-modal.history .g-header .avatar {
    width: 100px;
    height: 99px;
    position: absolute;
    top: 57px;
    left: calc(50% - 50px);
    z-index: 2;
}

.g-container .module.group-students .g-modal.history .g-header .avatar .student-avatar-circle { 
    width: 100px;
    height: 100px;
    position: relative;
}
.g-container .module.group-students .g-modal.history .g-header .avatar .student-avatar-circle .avatar-image{ 
    background-size: cover;
    border-bottom-left-radius: 130px;
    border-bottom-right-radius: 130px;
    width: 98px;
    height: 110px;
    background-position-y: -3px;
    background-repeat: no-repeat;
    z-index: 6;
    top: -21px;
    left: 1px;
    position: absolute;
}

.g-container .module.group-students .g-modal.history .g-header .avatar-bg {
    width: 140px;
    height: 101px;
    position: absolute;
    top: 55px;
    left: calc(50% - 70px);
    background: url(img/teacher/bg-student.png);
    z-index: 1;
    background-position: center;
    background-repeat: no-repeat;
}

.g-container .module.group-students .g-modal.history .g-header .subtitle {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35px;
    background: #00b19a;
    border-bottom: 2px solid #666;
    line-height: 35px;
    color: #FFF;
    border-top: 2px solid #0b776f;
    text-align: center;
    text-shadow: 3px 3px 0px #006a5c;
    font-size: 25px;
    font-family: 'dimbo', sans-serif;
    padding-left: 20px;
}

.g-container .module.group-students .g-modal.history .g-header .subtitle span {
    width: 30px;
    height: 29px;
    background-image: url(./img/gem.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    margin-right: 5px;
    vertical-align: text-bottom;
}
body.skin-magos .g-container .module.group-students .g-modal.history .g-header .subtitle span {
    height: 30px;
    background-image: url(./img/points-magos.png);
}
body.skin-exploradores .g-container .module.group-students .g-modal.history .g-header .subtitle span {
    height: 30px;
    background-image: url(./img/points-exploradores.png);
}
body.skin-colonizadores .g-container .module.group-students .g-modal.history .g-header .subtitle span {
    height: 30px;
    background-image: url(./img/points-colonizadores.png);
}
body.skin-sofubis .g-container .module.group-students .g-modal.history .g-header .subtitle span {
    height: 30px;
    background-image: url(./img/points-sofubis.png);
}
body.skin-titanes .g-container .module.group-students .g-modal.history .g-header .subtitle span {
    height: 30px;
    background-image: url(./img/points-titanes.png);
}
body.skin-guardianes .g-container .module.group-students .g-modal.history .g-header .subtitle span {
    height: 30px;
    background-image: url(./img/points-guardianes.png);
}

/* SELECT T1 */

.select-custom-t1 {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 40px;
    width: 200px;
    border: 3px solid #ededed;
    border-radius: 10px;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(153,153,153,1);
    -moz-box-shadow: 5px 5px 5px 0px rgba(153,153,153,1);
    box-shadow: 3px 3px 0px 0px rgba(153,153,153,1);
    color: #797979;
    font-size: 21px;
    font-family: 'dimbo', sans-serif;
}
.select-custom-t1 select {
    -moz-appearance: window;
    -webkit-appearance: none;
    background-image: url(./img/elements/select-t1/select-arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;	
}
.select-custom-t1 select::-ms-expand {
    display: none;
}
.select-custom-t1 select {
    height: 100%;
    width: 100%;
    border: 0;
    color: #797979;
    font-size: 24px;
    font-family: 'YanoneKaffeesatz_Bold', sans-serif;
    border-radius: 10px;
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(153,153,153,1);
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(153,153,153,1);
    box-shadow: inset 0px 0px 10px 0px rgba(153,153,153,1);
    box-sizing: border-box;
    padding: 4px 0px 0px 8px;
}
.select-custom-t1 select option{
    padding: 10px 0px 0px 8px;
}

/* END SELECT T1 */

.g-container .module.group-students .g-modal.history .g-header .select-custom-t1 {
    position: absolute;
    top: 212px;
    left: 10px;
    height: 40px;
    width: 200px;
    border: 3px solid #ededed;
    border-radius: 10px;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(153,153,153,1);
    -moz-box-shadow: 5px 5px 5px 0px rgba(153,153,153,1);
    box-shadow: 3px 3px 0px 0px rgba(153,153,153,1);
    color: #797979;
    font-size: 21px;
    font-family: 'dimbo', sans-serif;
}

.g-container .module.group-students .g-modal.history .g-header .bt-premiar {
    cursor: pointer;
    border-radius: 5px;
    background: #119520;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    position: absolute;
    right: 10px;
    bottom: -54px;
    border-radius: 10px;
    border: 3px solid #ffd160;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    font-size: 24px;
    width: 91px;
    text-align: center;
    cursor: pointer;
}




.g-container .module.group-students.showing-modal-feedback .g-modal.feedback-bg, 
.g-container .module.group-students.showing-modal-history .g-modal.feedback-bg { z-index: 4;  }

.g-container .module.group-students .g-modal.coffer, 
.g-container .module.group-students .g-modal.coffer-history, 
.g-container .module.group-students .g-modal.coffer-status{ 
    display: none;
    position: fixed; top:50%; left:50%; z-index: 5; border-radius: 10px; 
    width: 475px; height: 400px; margin-left: -235px;
    margin-top: -200px;
    background: #FFF;
    border: 3px solid #fdfdfd;
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
}

.g-container .module.group-students .g-modal.coffer-history{
    width: 400px;
    height: 540px;
    margin-left: -200px;
    margin-top: -250px;
}

.g-container .module.group-students .g-modal.coffer{
    width:420px;
    margin-left: -210px;
    z-index: 5;
}
.g-container .module.group-students .g-modal.coffer-status{
    width: 400px;
    height: 540px;
    margin-left: -200px;
    margin-top: -250px;
}
.g-container .module.group-students .g-modal.coffer-bg,
.g-container .module.group-students .g-modal.coffer-history-bg,
.g-container .module.group-students .g-modal.coffer-status-bg{ 
    display: none; position: fixed; top:0; left:0; right:0; bottom:0; z-index: 3; background: #000; opacity: .5; 
}
.g-container .module.group-students .g-modal.coffer-bg{
    z-index: 4;
}
.g-container .module.group-students .g-modal.coffer .icon{ 
    position: absolute;
    top: 10px;
    left: 11px;
    width: 55px;
    height: 52px;
    background: url(img/coffer/coffer-close.png);
    background-size: cover;
    cursor: pointer;
}
.g-container .module.group-students .g-modal.coffer .g-title{ 
    color: #083e74;
    font-size: 24px;
    position: absolute;
    top: 20px;
    left: 75px;
}
.g-container .module.group-students .coffer .bt-help{ 
    position: absolute;
    top: 3px;
    right: 7px;
    color: #FFF;
    border: 2px solid #7ebbff;
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 5px;
    line-height: 23px;
    cursor: pointer;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.38);
}
.g-container .module.group-students .coffer .label{ 
    color: #FFF;
    font-size: 22px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 37px;
    background: #2587f6;
    box-sizing: border-box;
    padding: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-left: 10px;
    text-align: left;
}
.g-container .module.group-students .coffer .image{ 
    position: absolute;
    top: 172px;
    right: 20px;
    width: 150px;
    height: 160px;
    border: 3px solid #e2e9f2;
    border-radius: 10px;
    background: #f2f8ff;
    -webkit-box-shadow: 1px 2px 0px 2px rgba(0,0,0,0.28);
    -moz-box-shadow: 1px 2px 0px 2px rgba(0,0,0,0.28);
    box-shadow: 1px 2px 0px 2px rgba(0,0,0,0.28);
    text-align: center;
    box-sizing: border-box;
    padding-top: 40px;
}
.g-container .module.group-students .coffer .image .icon{ 
    position: relative;
    top: auto;
    left: auto;
    width: 100px;
    height: 100px;
    background: url(img/teacher/bg-add.png) no-repeat;
    background-size: contain;
    background-position: center;
    border-radius: 8px;
    display: inline-block;
}
.g-container .module.group-students .coffer .image .icon-container{ 
    border: 4px solid #FFF;
    border-radius: 10px;
    -webkit-box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    background: #FFF;
    display: inline-block;
}
.g-container .module.group-students .coffer .points{ 
    position: absolute;
    top: 172px;
    left: 20px;
    width: 195px;
    height: 160px;
    border: 3px solid #e2e9f2;
    border-radius: 10px;
    background: #f2f8ff;
    -webkit-box-shadow: 1px 2px 0px 2px rgba(0,0,0,0.28);
    -moz-box-shadow: 1px 2px 0px 2px rgba(0,0,0,0.28);
    box-shadow: 1px 2px 0px 2px rgba(0,0,0,0.28);
}
.g-container .module.group-students .coffer .points .icon{ 
    position: absolute;
    top: 42px;
    left: 69px;
    width: 55px;
    height: 54px;
    background: url(img/points.png);
    background-size: cover;
}
body.skin-magos .g-container .module.group-students .coffer .points .icon{ 
    height: 55px;
    background: url(img/points-magos.png);
    background-size: cover;
}
body.skin-exploradores .g-container .module.group-students .coffer .points .icon{ 
    height: 55px;
    background: url(img/points-exploradores.png);
    background-size: cover;
}
body.skin-colonizadores .g-container .module.group-students .coffer .points .icon{ 
    height: 55px;
    background: url(img/points-colonizadores.png);
    background-size: cover;
}
body.skin-sofubis .g-container .module.group-students .coffer .points .icon{ 
    height: 55px;
    background: url(img/points-sofubis.png);
    background-size: cover;
}
body.skin-titanes .g-container .module.group-students .coffer .points .icon{ 
    height: 55px;
    background: url(img/points-titanes.png);
    background-size: cover;
}
body.skin-guardianes .g-container .module.group-students .coffer .points .icon{ 
    height: 55px;
    background: url(img/points-guardianes.png);
    background-size: cover;
}
.g-container .module.group-students .coffer .name{ 
    position: absolute;
    top: 66px;
    left: 20px;
    right: 20px;
    border: 3px solid #e2e9f2;
    border-radius: 10px;
    background: #f2f8ff;
    -webkit-box-shadow: 1px 2px 0px 2px rgba(0,0,0,0.28);
    -moz-box-shadow: 1px 2px 0px 2px rgba(0,0,0,0.28);
    box-shadow: 1px 2px 0px 2px rgba(0,0,0,0.28);
}
.g-container .module.group-students .coffer input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #999999;
} 
.g-container .module.group-students .coffer input.tx-points{ 
    font-family: 'YanoneKaffeesatz_Regular', sans-serif;
    border: 0;
    color: #666666;
    font-size: 22px;
    display: inline-block;
    border-bottom: solid #2587f6 2px;
    margin: 11px;
    line-height: 28px;
    width: 140px;
    margin-top: 111px;
    text-align: center;
    margin-left: 28px;
}
.g-container .module.group-students .coffer input.tx-name{ 
    font-family: 'dimbo', sans-serif;
    border: 0;
    color: #666666;
    font-size: 22px;
    display: inline-block;
    border-bottom: solid #2587f6 2px;
    margin: 11px;
    line-height: 28px;
    width: 345px;
    font-family: 'YanoneKaffeesatz_Regular', sans-serif;
    margin-top: 48px;
}
.g-container .module.group-students .coffer .btn.accept{ 
    position: absolute;
    top: 347px;
    right: 21px;
    cursor: pointer;
    border-radius: 5px;
    background: #119520;
    display: inline-block;
    padding: 5px 20px;
    color: #FFF;
    border-radius: 10px;
    border: 3px solid #ffd160;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
}
.g-container .module.group-students .coffer .btn.remove{ 
    position: absolute;
    top: 350px;
    background: none;
    color: #b34949;
    left: 10px;
}

.g-container .module.group-students .g-modal.coffer-status .g-title{
    color: #FFF;
    position: absolute;
    top: 60px;
    left: 42px;
    background: url(img/coffer/coffer-title.png);
    z-index: 5;
    width: 320px;
    height: 50px;
    background-size: cover;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
}
.g-container .module.group-students .g-modal.coffer-status .g-header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border: none;
    background: none;
}
.g-container .module.group-students .g-modal.coffer-status .g-header .circle{
    position: absolute;
    top: -50px;
    left: 80px;
    width: 240px;
    height: 240px;
    border-radius: 120px;
    border: 2px solid #fb8d02;
    background: #fb8d02;
    background: -moz-linear-gradient(top, #fb8d02 0%, #ffd44e 100%);
    background: -webkit-linear-gradient(top, #fb8d02 0%,#ffd44e 100%);
    background: linear-gradient(to bottom, #fb8d02 0%,#ffd44e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb8d02', endColorstr='#ffd44e',GradientType=0 );
    z-index: 2;
}
.g-container .module.group-students .g-modal.coffer-status .g-header .circle-bg{
    position: absolute;
    top: -50px;
    left: 79px;
    width: 248px;
    height: 248px;
    border-radius: 120px;
    background: #888;
    z-index: 1;
}
.g-container .module.group-students .g-modal.coffer-status .g-header .premio{
    position: absolute;
    top: 103px;
    left: 160px;
    z-index: 4;
    font-size: 30px;
    color: #814600;
}
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon{ 
    position: absolute;
    top: 5px;
    left: 5px;
    width: 60px;
    height: 60px;
    background: url(img/groups/group_01.png);
    background-size: cover;
}
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i2{ background: url(img/groups/group_02.png); background-size: cover; }
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i3{ background: url(img/groups/group_03.png); background-size: cover; }
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i4{ background: url(img/groups/group_04.png); background-size: cover; }
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i5{ background: url(img/groups/group_05.png); background-size: cover; }
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i6{ background: url(img/groups/group_06.png); background-size: cover; }
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i7{ background: url(img/groups/group_07.png); background-size: cover; }
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i8{ background: url(img/groups/group_08.png); background-size: cover; }
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i9{ background: url(img/groups/group_09.png); background-size: cover; }
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i10{ background: url(img/groups/group_10.png); background-size: cover; }
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i11{ background: url(img/groups/group_11.png); background-size: cover; }
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i12{ background: url(img/groups/group_12.png); background-size: cover; }
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i13{ background: url(img/groups/group_13.png); background-size: cover; }
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i14{ background: url(img/groups/group_14.png); background-size: cover; }
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i15{ background: url(img/groups/group_15.png); background-size: cover; }
.g-container .module.group-students .g-modal.coffer-status .g-header .group-icon.i16{ background: url(img/groups/group_16.png); background-size: cover; }

.g-container .module.group-students .g-modal.coffer-status .g-header .icon {
    position: absolute;
    top: -59px;
    left: 125px;
    width: 154px;
    height: 145px;
    background: url(img/coffer/coffer-close.png);
    background-size: cover;
    z-index: 3;
}
.g-container .module.group-students .g-modal.coffer-status .g-header .ilumination {
    position: absolute;
    top: -109px;
    left: 85px;
    width: 224px;
    height: 195px;
    background: url(img/ilumination.png);
    background-size: cover;
    z-index: 2;
}
.g-container .module.group-students .g-modal.coffer-status .g-header .icon.open {
    position: absolute;
    top: -32px;
    left: 125px;
    width: 143px;
    height: 130px;
    background: url(img/coffer/coffer-open.png);
    background-size: cover;
    z-index: 4;
}
.g-container .module.group-students .g-modal.coffer-status .bt-edit {
    position: absolute;
    bottom: 10px;
    left: 140px;
    cursor: pointer;
    right: 140px;
    background: #FFF;
    display: inline-block;
    padding: 3px 15px;
    color: #2587f6;
    border-radius: 10px;
    border: 3px solid #2587f6;
    font-size: 25px;
    text-align: center;
}
.g-container .module.group-students .g-modal.coffer-status.open .bt-edit {
    display: none;
}
.g-container .module.group-students .g-modal.coffer-status .status {
    position: absolute;
    top: 272px;
    left: 0px;
    right: 0px;
    height: 100px;
    border: none;
}
.g-container .module.group-students .g-modal.coffer-status .status .coffer-label-message{
    font-size: 26px;
    color: #2587f6;
    margin: 15px 0px 0px 0px;
    border: 3px dotted #2587f6;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    line-height: 28px;
    max-height: 80px;
    overflow: hidden;
}
.g-container .module.group-students .g-modal.coffer-status.open .status .coffer-label-message{
    color: #333333;
    border: 3px solid silver;
    background: #dedede;
}
.g-container .module.group-students .g-modal.coffer-status .status .delivered{
    position: absolute;
    font-size: 35px;
    color: #1cb71b;
    border: 4px solid #1cb71b;
    box-sizing: border-box;
    padding: 5px 10px;
    top: 91px;
    left: 109px;
    transform: rotate(0deg);
    display: none;
    background: #fff;
    height: 60px;
    z-index: 5;
    width: 180px;
    text-align: center;
}
.g-container .module.group-students .g-modal.coffer-status.open .status .delivered{
    display:block;
}
.g-container .module.group-students .g-modal.coffer-status .status .coffer-completed-message{
    position: absolute;
    top: 43px;
    left: 10px;
    right: 10px;
    display: none;
    text-align: center;
    line-height: 20px;
}
.g-container .module.group-students .g-modal.coffer-status.open .status .coffer-completed-message{
    display: block;
}
.g-container .module.group-students .g-modal.coffer-status .status .value .icon-container{
    width: 130px;
    height: 130px;
    position: absolute;
    top: -100px;
    right: 20px;
    background: url(img/coffer/price-red.png);
    background-size: cover;
    z-index: 4;
}
.g-container .module.group-students .g-modal.coffer-status.open .status .value .icon-container{
    background: url(img/coffer/price-green.png);
    background-size: cover;
}
.g-container .module.group-students .g-modal.coffer-status .status .value .icon-container .label-value{
    font-size: 25px;
    color: #fff229;
    position: absolute;
    top: 20px;
    left: 5px;
    right: 5px;
    text-align: center;
}
.g-container .module.group-students .g-modal.coffer-status .status .value .icon{
    position: absolute;
    top: 50px;
    left: 68px;
    width: 42px;
    height: 40px;
    background: url(img/points.png);
    background-size: cover;
}
body.skin-magos .g-container .module.group-students .g-modal.coffer-status .status .value .icon{
    height: 42px;
    background: url(img/points-magos.png);
    background-size: cover;
}
body.skin-exploradores .g-container .module.group-students .g-modal.coffer-status .status .value .icon{
    height: 42px;
    background: url(img/points-exploradores.png);
    background-size: cover;
}
body.skin-colonizadores .g-container .module.group-students .g-modal.coffer-status .status .value .icon{
    height: 42px;
    background: url(img/points-colonizadores.png);
    background-size: cover;
}
body.skin-sofubis .g-container .module.group-students .g-modal.coffer-status .status .value .icon{
    height: 42px;
    background: url(img/points-sofubis.png);
    background-size: cover;
}
body.skin-titanes .g-container .module.group-students .g-modal.coffer-status .status .value .icon{
    height: 42px;
    background: url(img/points-titanes.png);
    background-size: cover;
}
body.skin-guardianes .g-container .module.group-students .g-modal.coffer-status .status .value .icon{
    height: 42px;
    background: url(img/points-guardianes.png);
    background-size: cover;
}
.g-container .module.group-students .g-modal.coffer-status .status .value .value{
    position: absolute;
    top: -55px;
    left: 270px;
    width: 42px;
    height: 40px;
    color: #fff;
    background-size: cover;
    z-index: 5;
    font-size: 45px;
}
.g-container .module.group-students .g-modal.coffer-status .status .progress-container{
    position: absolute;
    top: 111px;
    left: 10px;
    right: 10px;
    height: 90px;
    border-radius: 10px;
    border: 2px solid #DEDEDE;
    background: #f2f8ff;
    -webkit-box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
}
.g-container .module.group-students .g-modal.coffer-status .status .progress-container .total{
    position: absolute;
    top: 5px;
    left: 33px;
    color: #083e73;
}
.g-container .module.group-students .g-modal.coffer-status .status .progress-container .bt-donations{
    position: absolute;
    top: 7px;
    right: 25px;
    font-size: 20px;
    border: 2px solid #8888;
    background: #bedcff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 2px 15px;
    cursor: pointer;
    color: #083e73;
}
.g-container .module.group-students .g-modal.coffer-status.open .status .progress-container .bt-donations{
    top: 107px;
}
.g-container .module.group-students .g-modal.coffer-status .status .bt-deliver-coffer{
    background: #00878b;
    position: absolute;
    padding: 5px 10px;
    bottom: -52px;
    right: 180px;
    left: 20px;
    box-sizing: border-box;
    display: none;
    border-radius: 10px;
    color: #FFF;
    cursor: pointer;
    text-align: center;
}
.g-container .module.group-students .g-modal.coffer-status.open .status .bt-deliver-coffer{
    display: block;
}
.g-container .module.group-students .g-modal.coffer-status .status .image-container{
    border: 4px solid #FFF;
    border-radius: 10px;
    -webkit-box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    background: #FFF;
    position: absolute;
    top: -130px;
    left: 30px;
    z-index: 3;
    transform: rotate(-10deg);
}
.g-container .module.group-students .g-modal.coffer-status .status .image-container img{
    border-radius: 8px;
    max-width: 160px;
    max-height: 160px;
}
.g-container .module.group-students .g-modal.coffer-status .status .progress{
    position: absolute;
    top: 50px;
    left: 62px;
    right: 110px;
    text-align: left;
    color: #fff;
    z-index: 2;
}
.g-container .module.group-students .g-modal.coffer-status .status .points-icon{
    position: absolute;
    top: 40px;
    left: 15px;
    width: 42px;
    height: 40px;
    background: url(img/points.png);
    background-size: cover;
    z-index: 2;
}
body.skin-magos .g-container .module.group-students .g-modal.coffer-status .status .points-icon{
    height: 42px;
    background: url(img/points-magos.png);
    background-size: cover;
}
body.skin-exploradores .g-container .module.group-students .g-modal.coffer-status .status .points-icon{
    height: 42px;
    background: url(img/points-exploradores.png);
    background-size: cover;
}
body.skin-colonizadores .g-container .module.group-students .g-modal.coffer-status .status .points-icon{
    height: 42px;
    background: url(img/points-colonizadores.png);
    background-size: cover;
}
body.skin-sofubis .g-container .module.group-students .g-modal.coffer-status .status .points-icon{
    height: 42px;
    background: url(img/points-sofubis.png);
    background-size: cover;
}
body.skin-titanes .g-container .module.group-students .g-modal.coffer-status .status .points-icon{
    height: 42px;
    background: url(img/points-titanes.png);
    background-size: cover;
}
body.skin-guardianes .g-container .module.group-students .g-modal.coffer-status .status .points-icon{
    height: 42px;
    background: url(img/points-guardianes.png);
    background-size: cover;
}
.g-container .module.group-students .g-modal.coffer-status .status .progress-bar{
    position: absolute;
    top: 49px;
    left: 36px;
    right: 28px;
    height: 31px;
    border-radius: 10px;
}
.g-container .module.group-students .g-modal.coffer-status .status .progress-bar-mask{
    position: absolute;
    top: 46px;
    left: 33px;
    right: 25px;
    height: 31px;
    border: 3px solid #FFF;
    -webkit-box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    -moz-box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    border-radius: 10px;
}
.g-container .module.group-students .g-modal.coffer-status.open .status .total,
.g-container .module.group-students .g-modal.coffer-status.open .status .progress-bar,
.g-container .module.group-students .g-modal.coffer-status.open .status .progress,
.g-container .module.group-students .g-modal.coffer-status.open .status .points-icon,
.g-container .module.group-students .g-modal.coffer-status.open .status .progress-bar-mask
{
    display: none;    
}
.g-container .module.group-students .g-modal.coffer-status .modal-history {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 6;
}
.g-container .module.group-students .g-modal.coffer-status .modal-history .header .title{
    color: #FFF;
    position: absolute;
    top: 10px;
    left: 42px;
    background: url(img/coffer/coffer-title.png);
    width: 320px;
    height: 50px;
    background-size: cover;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
}
.g-container .module.group-students .g-modal.coffer-status .modal-history .header .points-icon{
    position: absolute;
    top: 70px;
    left: 15px;
    width: 42px;
    height: 40px;
    background: url(img/points.png);
    background-size: cover;
    z-index: 1;
}
body.skin-magos .g-container .module.group-students .g-modal.coffer-status .modal-history .header .points-icon{
    height: 40px;
    background: url(img/points-magos.png);
    background-size: cover;
}
body.skin-exploradores .g-container .module.group-students .g-modal.coffer-status .modal-history .header .points-icon{
    height: 40px;
    background: url(img/points-exploradores.png);
    background-size: cover;
}
body.skin-colonizadores .g-container .module.group-students .g-modal.coffer-status .modal-history .header .points-icon{
    height: 40px;
    background: url(img/points-colonizadores.png);
    background-size: cover;
}
body.skin-sofubis .g-container .module.group-students .g-modal.coffer-status .modal-history .header .points-icon{
    height: 40px;
    background: url(img/points-sofubis.png);
    background-size: cover;
}
body.skin-titanes .g-container .module.group-students .g-modal.coffer-status .modal-history .header .points-icon{
    height: 40px;
    background: url(img/points-titanes.png);
    background-size: cover;
}
body.skin-guardianes .g-container .module.group-students .g-modal.coffer-status .modal-history .header .points-icon{
    height: 40px;
    background: url(img/points-guardianes.png);
    background-size: cover;
}
.g-container .module.group-students .g-modal.coffer-status .modal-history .header .progress{
    position: absolute;
    top: 80px;
    left: 62px;
    right: 110px;
    text-align: left;
    color: #fff;
    z-index: 1;
}
.g-container .module.group-students .g-modal.coffer-status .modal-history .header .progress-bar{
    position: absolute;
    top: 79px;
    left: 36px;
    right: 28px;
    height: 31px;
    border-radius: 10px;
}
.g-container .module.group-students .g-modal.coffer-status .modal-history .header .progress-bar-mask{
    position: absolute;
    top: 76px;
    left: 33px;
    right: 25px;
    height: 31px;
    border: 3px solid #FFF;
    -webkit-box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    -moz-box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);

    box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    border-radius: 10px;
}
.g-container .module.group-students .g-modal.coffer-status .history {
    top: 128px;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0px 0px 8px 8px;
}
.g-container .module.group-students .g-modal.coffer-status .history .label{
    font-size: 22px;
    margin: 10px 20px;
    color: #333;
}
.g-container .module.group-students .g-modal.coffer-status .history .list-students{
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFF;
    border-radius: 0px 0px 8px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding-top: 20px;
}
.g-container .module.group-students .g-modal.coffer-status .history .list-students .student{
    width: 350px;
    background: #f2f2f2;
    border-radius: 10px;
    position: relative;
    margin: 10px;
    margin-left: 30px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    height: 50px;
    margin-bottom: 15px;
}
.g-container .module.group-students .g-modal.coffer-status .history .list-students .empty{
    color: #888;
    text-align: center;
    margin: 30px;
}
.g-container .module.group-students .g-modal.coffer-status .history .list-students .student .avatar{
    width: 60px;
    height: 59px;
    position: absolute;
    top: 18px;
    left: -21px;
    z-index: 2;
}
.g-container .module.group-students .g-modal.coffer-status .history .list-students .student .avatar .student-avatar-circle { 
    width: 100px;
    height: 100px;
    position: relative;
}
.g-container .module.group-students .g-modal.coffer-status .history .list-students .student .avatar .student-avatar-circle .avatar-image{ 
    background-size: cover;
    border-bottom-left-radius: 130px;
    border-bottom-right-radius: 130px;
    width: 58px;
    height: 60px;
    background-position-y: -2px;
    background-repeat: no-repeat;
    z-index: 6;
    top: -31px;
    left: 1px;
    position: absolute;
}
.g-container .module.group-students .g-modal.coffer-status .history .list-students .student .avatar .student-avatar-circle .ring{ 

}
.g-container .module.group-students .g-modal.coffer-status .history .list-students .student .avatar .ring-inner{ 

}
.g-container .module.group-students .g-modal.coffer-status .history .list-students .student .avatar .avatar-bg{ 
    width: 68px;
    height: 47px;
    position: absolute;
    top: -15px;
    left: -4px;
    background: url(img/teacher/bg-student.png);
    z-index: 1;
    background-size: cover;
}
.g-container .module.group-students .g-modal.coffer-status .history .list-students .student .name{
    position: absolute;
    top: 8px;
    left: 50px;
    font-size: 22px;
}
.g-container .module.group-students .g-modal.coffer-status .history .list-students .student .points{
    position: absolute;
    cursor: default;
    width: 90px;
    background: #81887e;
    border-radius: 40px;
    height: 33px;
    top: 6px;
    right: 3px;
}
.g-container .module.group-students .g-modal.coffer-status .history .list-students .student .points .label{
    position: absolute;
    top: -11px;
    right: 5px;
    color: #fff;
    font-size: 30px;
    left: 1px;
    text-align: center;
}
.g-container .module.group-students .g-modal.coffer-status .history .list-students .student .points .icon{
    width: 38px;
    height: 37px;
    background: url(img/points.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: -3px;
    left: 51px;
    cursor: pointer;
}

.g-container .module.group-students .g-modal.coffer-history .g-header .g-title{
    position: absolute;
    top: 14px;
    left: 80px;
    color: #083e74;
    font-size: 30px;
}
.g-container .module.group-students .g-modal.coffer-history .g-header .icon{
    position: absolute;
    top: 5px;
    left: 7px;
    width: 55px;
    height: 52px;
    background: url(img/coffer/coffer-close.png);
    background-size: cover;
    cursor: pointer;
}
.g-container .module.group-students .g-modal.coffer-history .g-coffer-list{
    position: absolute;
    top: 70px;
    left: 0;
    right: 3px;
    bottom: 3px;
    overflow-y: auto;
}
.g-container .module.group-students .g-modal.coffer-history .g-coffer-list .empty{
    margin: 20px;
    padding-top: 30px;
    text-align: center;
    color: #888;
}
.g-container .module.group-students .g-modal.coffer-history .g-coffer-list .g-coffer{
    width: 370px;
    height: 150px;
    border-bottom: 2px solid #dedede;
    margin: 5px 15px 0 5px;
    position: relative;
}
.g-container .module.group-students .g-modal.coffer-history .g-coffer-list .g-coffer .image-container{
    border: 4px solid #FFF;
    border-radius: 10px;
    -webkit-box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    background: #FFF;
    position: absolute;
    top: 5px;
    left: 10px;
}
.g-container .module.group-students .g-modal.coffer-history .g-coffer-list .g-coffer .image-container img{
    border-radius: 8px;
    max-width: 110px;
    max-height: 90px;
}
.g-container .module.group-students .g-modal.coffer-history .g-coffer-list .g-coffer .points{
    position: absolute;
    bottom: 0px;
    left: 10px;
}
.g-container .module.group-students .g-modal.coffer-history .g-coffer-list .g-coffer .points .label{
    display: inline-block;
    color: #14e213;
    font-size: 40px;
}
.g-container .module.group-students .g-modal.coffer-history .g-coffer-list .g-coffer .points .icon-points{
    display: inline-block;
    width: 37px;
    height: 34px;
    background: url(img/points.png);
    background-size: cover;
    vertical-align: top;
    margin-top: 5px;
}
body.skin-magos .g-container .module.group-students .g-modal.coffer-history .g-coffer-list .g-coffer .points .icon-points{
    height: 37px;
    background: url(img/points-magos.png);
    background-size: cover;
    margin-top: 2px;
}
body.skin-exploradores .g-container .module.group-students .g-modal.coffer-history .g-coffer-list .g-coffer .points .icon-points{
    height: 37px;
    background: url(img/points-exploradores.png);
    background-size: cover;
    margin-top: 2px;
}
body.skin-colonizadores .g-container .module.group-students .g-modal.coffer-history .g-coffer-list .g-coffer .points .icon-points{
    height: 37px;
    background: url(img/points-colonizadores.png);
    background-size: cover;
    margin-top: 2px;
}
body.skin-sofubis .g-container .module.group-students .g-modal.coffer-history .g-coffer-list .g-coffer .points .icon-points{
    height: 37px;
    background: url(img/points-sofubis.png);
    background-size: cover;
    margin-top: 2px;
}
body.skin-titanes .g-container .module.group-students .g-modal.coffer-history .g-coffer-list .g-coffer .points .icon-points{
    height: 37px;
    background: url(img/points-titanes.png);
    background-size: cover;
    margin-top: 2px;
}
body.skin-guardianes .g-container .module.group-students .g-modal.coffer-history .g-coffer-list .g-coffer .points .icon-points{
    height: 37px;
    background: url(img/points-guardianes.png);
    background-size: cover;
    margin-top: 2px;
}
.g-container .module.group-students .g-modal.coffer-history .g-coffer-list .g-coffer .date-archived-at{
    position: absolute;
    top: 5px;
    left: 140px;
    right: 15px;
    color: #888;
    font-size: 18px;
}
.g-container .module.group-students .g-modal.coffer-history .g-coffer-list .g-coffer .coffer-name{
    position: absolute;
    top: 35px;
    left: 140px;
    right: 15px;
}
/* END Coffer Teacher */

.g-container .module.group-students .multiple-select {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 155px;
    background: #ffffff;
    box-sizing: border-box;
    border-bottom: 3px solid #ffd200;
    -webkit-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.5);
    z-index: 3;
}

.g-container .module.group-students .multiple-select .close {
    width: 50px;
    height: 50px;
    background-image: url(img/back-btn.png);
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 30px;
}

.g-container .module.group-students .multiple-select .title {
    position: absolute;
    top: 15px;
    left: 115px;
    font-family: 'dimbo',sans-serif;
    font-size: 36px;
    color: #252525;
}

.g-container .module.group-students .multiple-select .title span {
}

.g-container .module.group-students .multiple-select .subtitle {
    position: absolute;
    top: 100px;
    left: 115px;
    font-family: 'dimbo',sans-serif;
    font-size: 21px;
    color: #929292;
    width: calc(100% - 500px);
}

.g-container .module.group-students .multiple-select .select-all {
    position: absolute;
    top: 100px;
    right: 240px;
    font-family: 'dimbo',sans-serif;
    font-size: 24px;
    color: #252525;
    /* background:  red; */
    width: 145px;
}

.g-container .module.group-students .multiple-select .select-all span {
}

.g-container .module.group-students .multiple-select .select-all .input {
    float: right;
}

.g-container .module.group-students .multiple-select .bt-reward {
    background: #119520;
    height: 53px;
    width: 140px;
    position: absolute;
    right: 35px;
    top: 80px;
    border: 3px solid #ffd200;
    border-radius: 15px;
    color: #ffffff;
    text-align: center;
    line-height: 46px;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-box-shadow: 2px 3px 4px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 2px 3px 4px 0px rgba(0,0,0,0.5);
    box-shadow: 2px 3px 4px 0px rgba(0,0,0,0.5);
}

/* END teacher group students */

/* teacher groups progress*/
.g-container .module.group-progress .header{ 
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #1a7a83;
    text-align: center;
    background: url(img/teacher/bg-header.png);
}
.g-container .module.group-progress .header .g-btn-back{     width: 52px;
                                                             top: 10px;
                                                             left: 14px;
                                                             position: absolute;
                                                             height: 50px; 
}
.g-container .module.group-progress .header .group{ 
    position: absolute;
    top: 15px;
    left: 85px;
    font-size: 30px;
    color: #FFF;
}

.g-container .module.group-progress .header .group .icon{ 
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(img/groups/group_01.png);
    background-size: cover;
}
.g-container .module.group-progress .header .group .icon.i2{ background: url(img/groups/group_02.png); background-size: cover; }
.g-container .module.group-progress .header .group .icon.i3{ background: url(img/groups/group_03.png); background-size: cover; }
.g-container .module.group-progress .header .group .icon.i4{ background: url(img/groups/group_04.png); background-size: cover; }
.g-container .module.group-progress .header .group .icon.i5{ background: url(img/groups/group_05.png); background-size: cover; }
.g-container .module.group-progress .header .group .icon.i6{ background: url(img/groups/group_06.png); background-size: cover; }
.g-container .module.group-progress .header .group .icon.i7{ background: url(img/groups/group_07.png); background-size: cover; }
.g-container .module.group-progress .header .group .icon.i8{ background: url(img/groups/group_08.png); background-size: cover; }
.g-container .module.group-progress .header .group .icon.i9{ background: url(img/groups/group_09.png); background-size: cover; }
.g-container .module.group-progress .header .group .icon.i10{ background: url(img/groups/group_10.png); background-size: cover; }
.g-container .module.group-progress .header .group .icon.i11{ background: url(img/groups/group_11.png); background-size: cover; }
.g-container .module.group-progress .header .group .icon.i12{ background: url(img/groups/group_12.png); background-size: cover; }
.g-container .module.group-progress .header .group .icon.i13{ background: url(img/groups/group_13.png); background-size: cover; }
.g-container .module.group-progress .header .group .icon.i14{ background: url(img/groups/group_14.png); background-size: cover; }
.g-container .module.group-progress .header .group .icon.i15{ background: url(img/groups/group_15.png); background-size: cover; }
.g-container .module.group-progress .header .group .icon.i16{ background: url(img/groups/group_16.png); background-size: cover; }

.g-container .module.group-progress .header .group .name{ 
    display: inline-block;
    vertical-align: top;
    margin-left: 10px; 
}
.g-container .module.group-progress .header .h-center{
    color: #FFF;
    font-family: woold;
    font-size: 30px;
    position: absolute;
    top: 18px;
    left: 50%;
    width: 150px;
    margin-left: -75px;
}
.g-container .module.group-progress .header .h-right{ position: absolute; top: 10px; right: 10px; }
.g-container .module.group-progress .header .h-right label{
    color: #fff;
    position: absolute;
    top: 10px;
    right: 230px;
}
.g-container .module.group-progress .header .h-right select{
    font-family: 'dimbo', sans-serif;
    border: 0;
    color: #323232;
    font-size: 23px;
    margin: 0;
    border-radius: 10px;
    width: 200px;
    line-height: 28px;
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 5px 38px 5px 5px;
    -moz-appearance: window;
    -webkit-appearance: none;
    background-image: url(./img/progress/dropdown_a.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    background-color: #ddf7f8;
    -webkit-box-shadow: 5px 5px 5px 0px #027073;
    -moz-box-shadow: 5px 5px 5px 0px #027073;
    box-shadow: 3px 3px 0px 0px #027073;
    border: 2px solid #ffffff;
}
.g-container .module.group-progress .header .h-right select::-ms-expand {
    display: none;
}
.g-container .module.group-progress .header .h-right select option.inactive{color: silver;}
.g-container .module.group-progress .menu{ 
    border-bottom: 2px solid #16747d;
    background: #078a96;
    padding-bottom: 0;
    text-align: center;
    padding-top: 5px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#23b6c4+1,078a96+19,078a96+100 */
    background: #23b6c4; /* Old browsers */
    background: -moz-linear-gradient(top, #23b6c4 1%, #078a96 19%, #078a96 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #23b6c4 1%,#078a96 19%,#078a96 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #23b6c4 1%,#078a96 19%,#078a96 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23b6c4', endColorstr='#078a96',GradientType=0 ); /* IE6-9 */
}
.g-container .module.group-progress .menu .btn{ background: none; border: none; color: #fff; opacity: .7; border-radius: 0; 
                                                margin-left: 10px;
                                                margin-right: 10px;
}
.g-container .module.group-progress .menu .btn.selected{ 
    border-bottom: 4px solid #1bdeea; opacity: 1;
}
.g-container .module.group-progress .g-container .tab-content{ display: none; }
.g-container .module.group-progress .g-card { display: inline-block; border: 1px solid; margin: 10px; padding: 10px; float: left; }
.g-container .module.group-progress .unit .g-card { float: none; display: block; }

.g-container .module.group-progress .g-container .tab-content.students{ 
    display: block;
    width: 600px;
    margin: 0 auto;
    text-align: center;
}
.g-container .module.group-progress .g-container .tab-content.students .order-by {
    margin: 10px;
    color: #999;
    font-size: 20px;
}
.g-container .module.group-progress .g-container .tab-content.students .order-by .label {
    display: inline-block;
}
.g-container .module.group-progress .g-container .tab-content.students .order-by .select {
    display: inline-block;
}
.g-container .module.group-progress .g-container .tab-content.students .order-by .select select {
    font-family: 'YanoneKaffeesatz_Bold', sans-serif;
    border: 2px solid #dedede;
    color: #272626;
    font-size: 20px;
    margin: 0;
    border-radius: 10px;
    line-height: 28px;
    margin-left: 5px;
    padding: 8px 5px 5px 5px;
    -moz-appearance: window;
    -webkit-appearance: none;
    background-image: url(./img/progress/dropdown_b.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    background-color: #f7f7f7;
    -webkit-box-shadow: 5px 5px 5px 0px #848484;
    -moz-box-shadow: 5px 5px 5px 0px #848484;
    box-shadow: 3px 3px 0px 0px #848484;
    border: 2px solid #ffffff;
    width: 130px;
}
.g-container .module.group-progress .g-container .tab-content.students .g-card.student { 
    border: none;
    width: 100%;
    height: 80px;
    margin: 10px;
    position: relative;
}
.g-container .module.group-progress .g-container .tab-content.students .g-card.student .name {
    font-family: woold;
    position: absolute;
    top: 35px;
    left: 110px;
}
.g-container .module.group-progress .g-container .tab-content.students .g-card.student .avatar {
    width: 100px;
    height: 99px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}
.g-container .module.group-progress .g-container .tab-content.students .g-card.student .avatar .student-avatar-circle { 
    width: 100px;
    height: 100px;
    position: relative;
}
.g-container .module.group-progress .g-container .tab-content.students .g-card.student .avatar .student-avatar-circle .avatar-image{ 
    background-size: cover;
    border-bottom-left-radius: 130px;
    border-bottom-right-radius: 130px;
    width: 90px;
    height: 100px;
    background-position-y: -3px;
    background-repeat: no-repeat;
    z-index: 6;
    top: -18px;
    left: -2px;
    position: absolute;
}
.g-container .module.group-progress .g-container .tab-content.students .g-card.student .avatar .student-avatar-circle .ring{ 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 80px;
    height: 80px;
    border-radius: 150px;
    border: 3px solid gold;
    z-index: 2;
    -webkit-box-shadow: 1px 3px 0px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 3px 0px 1px rgba(0,0,0,0.75);
    box-shadow: 1px 3px 0px -1px rgba(0,0,0,0.75);
}
.g-container .module.group-progress .g-container .tab-content.students .g-card.student .avatar .student-avatar-circle .ring-inner{ 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 80px;
    height: 80px;
    border-radius: 150px;
    border: 3px solid gold;
    z-index: 2;
    background: #FFFFFF;
    box-shadow: inset 1px 1px 31px #000;
}
.g-container .module.group-progress .g-container .tab-content.students .g-card.student.teacher .avatar {
    /*width: 100px;
    height: 99px;
    position: absolute;
    top: 20px;
    left: 0px;
    z-index: 2;
    background: url(img/teacher/bg-student.png) no-repeat;
    background-size: contain;*/
}
.g-container .module.group-progress .g-container .tab-content.students .g-card.student.teacher .name {
    color: #1da79b;
}
.g-container .module.group-progress .g-container .tab-content.students .g-card.student.teacher .teacher-label {
    position: absolute;
    top: 59px;
    left: 109px;
    color: #888;
    font-size: 18px;
}
.g-container .module.group-progress .g-container .tab-content.students .g-card.student .pie-chart { 
    height: 100px;
    width: 130px;
    position: absolute;
    top: 0px;
    right: 0px;
}
.g-container .module.group-progress .g-container .tab-content.difficult { 
    display: block;
    width: 600px;
    margin: 0 auto;
    text-align: center;
}
.g-container .module.group-progress .g-container .tab-content.difficult > .info { 
    color: #999;
    margin: 15px;
    font-size: 24px;
}
.g-container .module.group-progress .g-container .tab-content.difficult .g-card { 
    border: none;
    width: 450px;
    height: 80px;
    margin: 10px 0px 10px 90px;
    position: relative;
}
.g-container .module.group-progress .g-container .tab-content.difficult .g-unit-title{ 
    display: block;
}
.g-container .module.group-progress .g-container .tab-content.difficult .g-unit-title-text { 
    text-align: left;
    margin: 20px 0px 0px 10px;
    font-size: 35px;
    background: #078a96;
    color: #FFF;
    padding: 10px;
    border-radius: 20px 0px;
    float: left;
    width: 530px;
}
.g-container .module.group-progress .g-container .tab-content.difficult .g-card .chart { 
    height: 100px;
    width: 130px;
    position: absolute;
    top: 0px;
    left: 0px;
}
.g-container .module.group-progress .g-container .tab-content.difficult .g-card .term { 
    position: absolute;
    top: 0px;
    left: 140px;
}
.g-container .module.group-progress .g-container .tab-content.difficult .g-card .percent { 
    position: absolute;
    top: 25px;
    left: 140px;
    color: red;
    font-size: 35px;
}
.g-container .module.group-progress .g-container .tab-content.difficult .g-card .info { 
    position: absolute;
    top: 60px;
    left: 140px;
    color: #999;
    font-size: 22px;
}
.g-container .module.group-progress .g-container .tab-content.unit { 
    display: block;
    width: 600px;
    margin: 0 auto;
    text-align: center;
}
.g-container .module.group-progress .g-container .tab-content.unit .g-card{ 
    border-radius: 10px;
    border: 2px solid #dedede;
    text-align: left;
}
.g-container .module.group-progress .g-container .tab-content.unit .g-card.classify .term{ 
    background: #dbf4f6;
    padding: 10px;
    border-radius: 10px;
    text-transform: uppercase;
}
.g-container .module.group-progress .g-container .tab-content.unit .g-card.classify .concept-example{ 
    box-sizing: border-box;
    border-radius: 10px;
    border: 2px solid #dedede;
    padding: 15px;
    margin: 15px;
    position: relative;
}
.g-container .module.group-progress .g-container .tab-content.unit .g-card.classify .concept-example img{ 
    max-width: 70px;
    max-height: 70px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}
.g-container .module.group-progress .g-container .tab-content.unit .g-card .definition{ 
    color:#666;
    font-size: 20px;
    line-height: 1.5em;
}
.g-container .module.group-progress .g-container .tab-content.unit .g-card .definition img{ 
    max-width: 70px;
    max-height: 70px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}
.g-container .module.group-progress .g-container .tab-content.unit .g-unit-title-text{ 
    text-align: left;
    margin: 20px 0px 0px 10px;
    font-size: 35px;
    background: #078a96;
    color: #FFF;
    padding: 10px;
    border-radius: 20px 0px;
}
/* END teacher groups progress*/

/* adventure (student/teacher) UNITS */
.g-container .g-adventure .module.units { }
.g-container .g-adventure .module.units .music-config-toggle{ 
    width: 52px;
    height: 52px;
    background: url(img/musicon.png);
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    cursor: pointer;
}
.g-container .g-adventure .module.units .music-config-toggle.off{
    background: url(img/musicoff.png);
}
.g-container .g-adventure .module.units .header{ 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 75px;
    z-index: 2;
    background: url(img/bg-header_map.png) repeat-x;
    background-size: contain;
}
.g-container .g-adventure .module.units .header .bt-exit-game{ 
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 13px;
    left: 15px;
    cursor: pointer;
    background: #4e504e;
    padding: 5px 10px;
    color: #FFF;
    border-radius: 10px;
    border: 3px solid #d4d4d4;
}
.g-container .g-adventure .module.units .header .g-btn-back{ width: 51px; top: 10px; left: 14px; position: absolute; height: 50px; }
.g-container .g-adventure .module.units .header .h-left .student-profile{ 
    position: absolute; 
    top: 2px; 
    left: 10px; 
    width: 42px; 
    height: 52px; 
    background: none;
    cursor: pointer; 
    position:relative; 
}
.g-container .g-adventure .module.units .header .h-left .student-profile .student-avatar-circle { 
    width: 60px;
    height: 60px;
    position: relative;
}
.g-container .g-adventure .module.units .header .h-left .student-profile .student-avatar-circle .avatar-image{ 
    background-size: cover;
    border-bottom-left-radius: 130px;
    border-bottom-right-radius: 130px;
    width: 60px;
    height: 70px;
    background-position-y: -3px;
    background-repeat: no-repeat;
    z-index: 6;
    top: -12px;
    left: 0;
    position: absolute;
}
.g-container .g-adventure .module.units .header .h-left .student-profile .student-avatar-circle .ring{ 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 55px;
    height: 55px;
    border-radius: 150px;
    border: 3px solid gold;
    z-index: 2;
    -webkit-box-shadow: 1px 3px 0px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 3px 0px 1px rgba(0,0,0,0.75);
    box-shadow: 1px 3px 0px -1px rgba(0,0,0,0.75);
}
.g-container .g-adventure .module.units .header .h-left .student-profile .student-avatar-circle .ring-inner{ 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 55px;
    height: 55px;
    border-radius: 150px;
    border: 3px solid gold;
    z-index: 2;
    background: #FFFFFF;
    box-shadow: inset 1px 1px 31px #000;
}
.g-container .g-adventure .module.units .header .h-left .student-profile:hover{ opacity: .8; }
.g-container .g-adventure .module.units .header .h-left .student-profile span{ 
    display: none;
    background: url(img/notifications.png);
    background-size: cover;
    width: 30px;
    height: 28px;
    color: #FFF;
    position: absolute;
    top: 0;
    right: -27px;
    font-size: 18px;
    text-align: center;
    line-height: 27px;
    z-index: 7;
}
.g-container .g-adventure .module.units .header .h-left .student-profile span.active{ display: block; }
.g-container .g-adventure .module.units .header .h-left h3{ display: inline; }
.g-container .g-adventure .module.units .header .h-center{ color: #ffd200; font-size: 30px;     font-family: woold; position: absolute; top: 20px; left: 110px; width: 100px; height: 40px; text-align: center; }
.g-container .g-adventure .module.units .header .coffer{ 
    display: inline-block;
    /* top: 136px; */
    /* right: 14px; */
    width: 60px;
    height: 60px;
    background: url(img/btn-tienda.png);
    background-size: cover;
    vertical-align: top;
}
.g-container .g-adventure .module.units .header .h-right{ 
    position: absolute;
    top: 5px;
    right: 10px;
}
.g-container .g-adventure .module.units .header .points{ 
    display: inline-block;
    width: 100px;
    background: #093c3e;
    border-radius: 40px;
    height: 35px;
    position: relative;
    margin: 12px 10px 0px 0px;
}
.g-container .g-adventure .module.units .header .points .icon{ 
    width: 39px;
    height: 40px;
    background: url(img/points.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: -2px;
    left: 53px;
    cursor: pointer;
}
body.skin-magos .g-container .g-adventure .module.units .header .points .icon{ 
    height: 39px;
    background: url(img/points-magos.png) no-repeat;
    background-size: cover;
    position: absolute;
}
body.skin-exploradores .g-container .g-adventure .module.units .header .points .icon{ 
    height: 39px;
    background: url(img/points-exploradores.png) no-repeat;
    background-size: cover;
    position: absolute;
}
body.skin-colonizadores .g-container .g-adventure .module.units .header .points .icon{ 
    height: 39px;
    background: url(img/points-colonizadores.png) no-repeat;
    background-size: cover;
    position: absolute;
}
body.skin-sofubis .g-container .g-adventure .module.units .header .points .icon{ 
    height: 39px;
    background: url(img/points-sofubis.png) no-repeat;
    background-size: cover;
    position: absolute;
}
body.skin-titanes .g-container .g-adventure .module.units .header .points .icon{ 
    height: 39px;
    background: url(img/points-titanes.png) no-repeat;
    background-size: cover;
    position: absolute;
}
body.skin-guardianes .g-container .g-adventure .module.units .header .points .icon{ 
    height: 39px;
    background: url(img/points-guardianes.png) no-repeat;
    background-size: cover;
    position: absolute;
}
.g-container .g-adventure .module.units .header .points .label{ 
    position: absolute;
    top: 1px;
    right: 47px;
    color: #fff;
    font-size: 30px;
    left: 10px;
    text-align: center;
}
.g-container .g-adventure .module.units .header .cards{ 
    display: inline-block;
    width: 100px;
    background: #093c3e;
    border-radius: 40px;
    height: 35px;
    position: relative;
    margin: 12px 10px 0px 0px;
}
.g-container .g-adventure .module.units .header .cards .icon{ 
    width: 48px;
    height: 45px;
    background: url(img/cards.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: -4px;
    left: 51px;
}
.g-container .g-adventure .module.units .header .cards .label{ 
    position: absolute;
    top: 1px;
    right: 47px;
    color: #fff;
    font-size: 30px;
    left: 10px;
    text-align: center;
}
.g-container .g-adventure .module.units .g-container { 
    position: relative; 
    background: url(img/adventure/troll/troll_suelo.png); 
    width: 100%; 
    background-position: center; z-index: 1; 
    padding: 0px 0; 
    overflow: hidden;
}
body.skin-magos .g-container .g-adventure .module.units .g-container { 
    background: url(img/adventure/troll-magos/grass.png); 
    background-position: center; 
}
body.skin-exploradores .g-container .g-adventure .module.units .g-container { 
    background: url(img/adventure/troll-exploradores/grass.png); 
    background-position: center; 
}
body.skin-colonizadores .g-container .g-adventure .module.units .g-container { 
    background: url(img/adventure/troll-colonizadores/grass.png); 
    background-position: center; z-index: 1; 
}
body.skin-titanes .g-container .g-adventure .module.units .g-container { 
    background: url(img/adventure/titanes/suelo.png); 
    background-position: center; 
}
body.skin-guardianes .g-container .g-adventure .module.units .g-container { 
    background: url(img/adventure/guardianes/suelo.png); 
    background-position: center; 
}
.g-container .g-adventure .module.units .g-container .container-enemy-home { 
    position: relative;
    width: 100%;
    height: 900px;
    margin-bottom: 180px;
}
.g-container .g-adventure .module.units .g-container .container-enemy-home .sky { 
    position: absolute; 
    top: 0;
    left: 0px; 
    right: 0px;
    height: 500px;
    background: url(img/adventure/troll/troll_cielo.png);
    z-index: 0;
}
body.skin-magos .g-container .g-adventure .module.units .g-container .container-enemy-home .sky,
body.skin-exploradores .g-container .g-adventure .module.units .g-container .container-enemy-home .sky,
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .container-enemy-home .sky{ 
    display: none;    
}
.g-container .g-adventure .module.units .g-container .container-enemy-home .mountain { 
    position: absolute; 
    top: 90px;
    left: 0px; 
    right: 0px;
    height: 500px;
    background: url(img/adventure/troll/troll_montana.png);
    z-index: 2;
}
body.skin-magos .g-container .g-adventure .module.units .g-container .container-enemy-home .mountain { 
    top: 0px;
    height: 540px;
    background: url(img/adventure/troll-magos/bg.png);
}
body.skin-exploradores .g-container .g-adventure .module.units .g-container .container-enemy-home .mountain { 
    top: 0px;
    height: 620px;
    background: url(img/adventure/troll-exploradores/bg.png);
    background-position: top center;
}
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .container-enemy-home .mountain { 
    top: 0px;
    height: 527px;
    background: url(img/adventure/troll-colonizadores/bg.png);
    z-index: 0;
}
body.skin-titanes .g-container .g-adventure .module.units .g-container .container-enemy-home .mountain { 
    top: 0px;
    height: 575px;
    background: url(img/adventure/titanes/bg.png);
}
body.skin-guardianes .g-container .g-adventure .module.units .g-container .container-enemy-home .mountain { 
    top: 0px;
    height: 541px;
    background: url(img/adventure/guardianes/bg.png);
}
.g-container .g-adventure .module.units .g-container .container-enemy-home .moon { 
    position: absolute; 
    top: 0;
    left: 100px; 
    width: 219px;
    height: 236px;
    background: url(img/adventure/troll/troll_moon.png);
    z-index: 2;
}
body.skin-magos .g-container .g-adventure .module.units .g-container .container-enemy-home .moon,
body.skin-exploradores .g-container .g-adventure .module.units .g-container .container-enemy-home .moon,
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .container-enemy-home .moon,
body.skin-titanes .g-container .g-adventure .module.units .g-container .container-enemy-home .moon,
body.skin-guardianes .g-container .g-adventure .module.units .g-container .container-enemy-home .moon{
    display: none;
}
.g-container .g-adventure .module.units .g-container .container-enemy-home .stars { 
    position: absolute; 
    top: 0;
    left: 0px; 
    right: 0px;
    height: 500px;
    background: url(img/adventure/troll/troll_stars.png);
    z-index: 1;
}
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .container-enemy-home .stars { 
    display: none;
}
.g-container .g-adventure .module.units .g-container .container-enemy-home .enemy-home { 
    background: url(img/adventure/troll/troll_home.png);
    width: 640px;
    height: 461px;
    position: absolute;
    top: 330px;
    left: 50%;
    margin-left: -275px;
    z-index: 3;
    cursor: pointer;
}
body.skin-magos .g-container .g-adventure .module.units .g-container .container-enemy-home .enemy-home { 
    background: url(img/adventure/troll-magos/castle.png);
    width: 815px;
    height: 654px;
    position: absolute;
    top: 200px;
    left: 50%;
    margin-left: -457px;
    z-index: 3;
    cursor: pointer;
}
body.skin-exploradores .g-container .g-adventure .module.units .g-container .container-enemy-home .enemy-home { 
    background: url(img/adventure/troll-exploradores/catle.png);
    width: 742px;
    height: 374px;
    position: absolute;
    top: 320px;
    left: 50%;
    margin-left: -307px;
    z-index: 3;
    cursor: pointer;
}
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .container-enemy-home .enemy-home { 
    background: url(img/adventure/troll-colonizadores/castle.png);
    width: 680px;
    height: 606px;
    position: absolute;
    top: 160px;
    left: 50%;
    margin-left: -297px;
    z-index: 3;
    cursor: pointer;
}
body.skin-titanes .g-container .g-adventure .module.units .g-container .container-enemy-home .enemy-home { 
    background: url(img/adventure/titanes/castle.png);
    width: 1272px;
    height: 609px;
    position: absolute;
    top: 160px;
    left: 50%;
    margin-left: -595px;
    z-index: 3;
    cursor: pointer;
}
body.skin-guardianes .g-container .g-adventure .module.units .g-container .container-enemy-home .enemy-home { 
    background: url(img/adventure/guardianes/castle.png);
    width: 866px;
    height: 609px;
    position: absolute;
    top: 160px;
    left: 50%;
    margin-left: -433px;
    z-index: 3;
    cursor: pointer;
}
.g-container .g-adventure .module.units .g-container .container-enemy-home .path-enemy-home { 
    background-image: url(img/adventure/troll/trollway.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 438px;
    height: 671px;
    position: absolute;
    top: 644px;
    left: 50%;
    margin-left: -219px;
    z-index: 2;
}
body.skin-magos .g-container .g-adventure .module.units .g-container .container-enemy-home .path-enemy-home { 
    background-image: url(img/adventure/troll-magos/path.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 450px;
    height: 403px;
    position: absolute;
    top: 630px;
    left: 50%;
    margin-left: -19px;
    z-index: 2;
}
body.skin-exploradores .g-container .g-adventure .module.units .g-container .container-enemy-home .path-enemy-home { 
    background-image: url(img/adventure/troll-exploradores/path.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 450px;
    height: 403px;
    position: absolute;
    top: 670px;
    left: 50%;
    margin-left: -159px;
    z-index: 2;
}
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .container-enemy-home .path-enemy-home { 
    background-image: url(img/adventure/troll-colonizadores/path.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 450px;
    height: 403px;
    position: absolute;
    top: 630px;
    left: 50%;
    margin-left: -119px;
    z-index: 2;
}
body.skin-titanes .g-container .g-adventure .module.units .g-container .container-enemy-home .path-enemy-home { 
    background-image: url(img/adventure/titanes/path.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 450px;
    height: 403px;
    position: absolute;
    top: 710px;
    left: 50%;
    margin-left: -199px;
    z-index: 2;
}
.g-container .g-adventure .module.units .g-container .container-enemy-home .label-enemy-home {
    position: absolute;
    bottom: -55px;
    right: 50%;
    margin-right: -425px;
    width: 207px;
    height: 174px;
    background: url(img/adventure/cartel_u_left.png);
    z-index: 3;
}
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .container-enemy-home .label-enemy-home {
    position: absolute;
    bottom: 95px;
    right: 50%;
    margin-right: -425px;
    width: 136px;
    height: 179px;
    background: url(img/adventure/troll-colonizadores/signal.png);
    z-index: 3;
}
body.skin-magos .g-container .g-adventure .module.units .g-container .container-enemy-home .label-enemy-home {
    bottom: 115px;
    margin-right: -525px;
}
body.skin-magos .g-container .g-adventure .module.units .g-container .container-enemy-home .label-enemy-home.left {
    bottom: -55px;
    margin-right: -425px;
}
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .container-enemy-home .label-enemy-home.left {
    bottom: -45px;
    margin-right: -425px;
}
.g-container .g-adventure .module.units .g-container .container-enemy-home .label-enemy-home span{
    color: #f2d53c;
    position: absolute;
    top: 30px;
    left: 10px;
    right: 10px;
    text-align: center;
    font-size: 30px;
    letter-spacing: 2px;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
}
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .container-enemy-home .label-enemy-home span{
    color: #e6e5de;
    position: absolute;
    top: 56px;
    left: 10px;
    right: 10px;
    text-align: center;
    font-size: 22px;
    letter-spacing: 2px;
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -o-transform: rotate(1deg);
}
.g-container .g-adventure .module.units .g-container .container-enemy-home .label-enemy-home.left span{
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
}
body.skin-colonizadores  .g-container .g-adventure .module.units .g-container .container-enemy-home .label-enemy-home.left span{
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -o-transform: rotate(1deg);
}
.g-container .g-adventure .module.units .g-container .container-enemy-home .label-enemy-home.left {
    left: 50%;
    margin-left: -313px;
    margin-right: auto;
    background: url(img/adventure/cartel_u_right.png);
    bottom: -8px;
}
.g-container .g-adventure .module.units .g-container .container-enemy-home .rocks-left { 
    background: url(img/adventure/troll/troll_rocas2.png);
    width: 299px;
    height: 222px;
    position: absolute;
    top: 350px;
    left: 5px;
    z-index: 2;
}
body.skin-magos .g-container .g-adventure .module.units .g-container .container-enemy-home .rocks-left { 
    background: url(img/adventure/troll-magos/left.png);
    width: 331px;
    height: 323px;
    position: absolute;
    top: 490px;
    left: 5px;
    z-index: 3;
}
body.skin-exploradores .g-container .g-adventure .module.units .g-container .container-enemy-home .rocks-left,
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .container-enemy-home .rocks-left{ 
    display: none;
}
body.skin-titanes .g-container .g-adventure .module.units .g-container .container-enemy-home .rocks-left { 
    background: url(img/adventure/titanes/left.png);
    width: 650px;
    height: 450px;
    position: absolute;
    top: 290px;
    left: 5px;
    z-index: 2;
}
body.skin-guardianes .g-container .g-adventure .module.units .g-container .container-enemy-home .rocks-left { 
    background: url(img/adventure/guardianes/left.png);
    width: 623px;
    height: 733px;
    position: absolute;
    top: 60px;
    left: 5px;
    z-index: 3;
}

.g-container .g-adventure .module.units .g-container .container-enemy-home .rocks-right { 
    background: url(img/adventure/troll/troll_rocas1.png);
    width: 436px;
    height: 260px;
    position: absolute;
    top: 330px;
    right: 0px;
    z-index: 2;
}
body.skin-exploradores .g-container .g-adventure .module.units .g-container .container-enemy-home .rocks-right,
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .container-enemy-home .rocks-right{ 
    display: none;
}
.g-container .g-adventure .module.units .g-container .container-enemy-home .rocks-right { 
    background: url(img/adventure/troll-magos/right.png);
    width: 375px;
    height: 355px;
    position: absolute;
    top: 330px;
    right: 0px;
    z-index: 2;
}
.g-container .g-adventure .module.units .g-container .container-enemy-home .tree { 
    background: url(img/adventure/troll/troll_sauce.png);
    width: 323px;
    height: 380px;
    position: absolute;
    top: 290px;
    left: 10%;
    z-index: 2;
}
body.skin-titanes .g-container .g-adventure .module.units .g-container .container-enemy-home .rocks-right { 
    background: url(img/adventure/titanes/right.png);
    width: 735px;
    height: 439px;
    position: absolute;
    top: 330px;
    right: 0px;
    z-index: 2;
}
body.skin-guardianes .g-container .g-adventure .module.units .g-container .container-enemy-home .rocks-right { 
    background: url(img/adventure/guardianes/right.png);
    width: 609px;
    height: 711px;
    position: absolute;
    top: 87px;
    right: 0px;
    z-index: 3;
}
body.skin-magos .g-container .g-adventure .module.units .g-container .container-enemy-home .tree,
body.skin-exploradores .g-container .g-adventure .module.units .g-container .container-enemy-home .tree,
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .container-enemy-home .tree, 
body.skin-titanes .g-container .g-adventure .module.units .g-container .container-enemy-home .tree,
body.skin-guardianes .g-container .g-adventure .module.units .g-container .container-enemy-home .tree{ 
    display: none;
}
.g-container .g-adventure .module.units .g-container .g-unit-container{ 
    overflow: visible;
    padding-bottom: 10px;
    position: relative;
}
.g-container .g-adventure .module.units .g-container .g-unit-container.last-child{ 
    padding-bottom: 120px;
}
.g-container .g-adventure .module.units .g-container .g-unit-container .bg-transition{ 
    position:absolute; 
    top: -380px; 
    width: 100%;
    height: 480px;
    background: url(img/adventure/semigrass.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.stones .bg-transition{ 
    background: url(img/adventure/semistones.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.desert .bg-transition{ 
    background: url(img/adventure/semidesert.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.grass2 .bg-transition{ 
    background: url(img/adventure/semigrass2.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.stones2 .bg-transition{ 
    background: url(img/adventure/semistones2.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.snow .bg-transition{ 
    background: url(img/adventure/semisnow.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.space1 .bg-transition{ 
    background: url(img/stages/space1/semiespacial1.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.space2 .bg-transition{ 
    background: url(img/stages/space2/semiespacial2.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.space3 .bg-transition{ 
    background: url(img/stages/space3/semiespacial3.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.space4 .bg-transition{ 
    background: url(img/stages/space4/semiespacial4.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.space5 .bg-transition{ 
    background: url(img/stages/space5/semiespacial5.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.cave .bg-transition{ 
    background: url(img/stages/cave/semicueva.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.egypt .bg-transition{ 
    background: url(img/stages/egypt/semiegipto.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.ruins .bg-transition{ 
    background: url(img/stages/ruins/semiruinas.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.sea .bg-transition{ 
    background: url(img/stages/sea/semimar.png);
}
.g-container .g-adventure .module.units .g-container  .g-unit-container.urbano .bg-transition{ 
    background: url(img/stages/urbano/semiurbano.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container .unit-label{ 
    position: absolute;
    bottom: -30px;
    left: 50%;
    margin-left: -400px;
    width: 207px;
    height: 174px;
    background: url(img/adventure/cartel_u_right.png);
    z-index: 2;
}
.g-container .g-adventure .module.units .g-container .g-unit-container .unit-label.right{ 
    margin-left: 200px;
    background: url(img/adventure/cartel_u_left.png);
}
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .g-unit-container .unit-label
{ 
    position: absolute;
    bottom: -30px;
    left: 50%;
    margin-left: -400px;
    width: 157px;
    height: 202px;
    background: url(img/adventure/troll-colonizadores/signal.png);
    z-index: 2;
    background-size: cover;
    background-size: cover;
}
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .g-unit-container .unit-label.right { 
    margin-left: 200px;
    background: url(img/adventure/troll-colonizadores/signal.png);
    background-size: cover;
}

.g-container .g-adventure .module.units .g-container .g-unit-container .unit-label span{ 
    color: #f2d53c;
    position: absolute;
    top: 30px;
    left: 10px;
    right: 10px;
    text-align: center;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    font-size: 30px;
    letter-spacing: 2px;
}
.g-container .g-adventure .module.units .g-container .g-unit-container .unit-label.right span{ 
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
}
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .g-unit-container .unit-label span{ 
    color: #e6e5de;
    position: absolute;
    top: 70px;
    left: 10px;
    right: 10px;
    text-align: center;
    font-size: 22px;
    letter-spacing: 2px;
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -o-transform: rotate(1deg);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.grass{ 
    background: url(img/adventure/path_grass.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.stones{ 
    background: url(img/adventure/path_stones.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.desert{ 
    background: url(img/adventure/path_desert.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.stones2{ 
    background: url(img/adventure/path_stones2.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.grass2{ 
    background: url(img/adventure/path_grass2.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.snow{ 
    background: url(img/adventure/path_snow.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.urbano{ 
    background: url(img/stages/urbano/path_urbano.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.space1{ 
    background: url(img/stages/space1/path_espacial1.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.space2{ 
    background: url(img/stages/space2/path_espacial2.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.space3{ 
    background: url(img/stages/space3/path_espacial3.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.space4{ 
    background: url(img/stages/space4/path_espacial4.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.space5{ 
    background: url(img/stages/space5/path_espacial5.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.cave{ 
    background: url(img/stages/cave/path_cueva.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.egypt{ 
    background: url(img/stages/egypt/path_egipto.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.ruins{ 
    background: url(img/stages/ruins/path_ruinas.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.sea{ 
    background: url(img/stages/sea/path_mar.png);
}
.g-container .g-adventure .module.units .g-container .g-unit-container.urbano{ 
    background: url(img/stages/urbano/path_urbano.png);
}
.g-container .g-adventure .module.units .g-container .g-card.unit { 
    display: block; 
    width: 200px; 
    height: 215px; 
    margin: 0px auto; 
    cursor: pointer; 
    padding-top: 30px; 
}
.g-container .g-adventure .module.units .g-container .g-card.unit.no-active {  cursor: default; }
.g-container .g-adventure .module.units .g-container .g-card.unit .container{ display: block; width: 200px; height: 120px; margin: 20px auto; position: relative; }
.g-container .g-adventure .module.units .g-container .g-card.unit.left .container{ margin-left: -76px; }
.g-container .g-adventure .module.units .g-container .g-card.unit.right .container{     margin-left: 140px; }
.g-container .g-adventure .module.units .g-container .g-card.unit .number{ position: absolute; top: -30px; left: 41px; width: 60px; font-size: 50px; color: #b5a72d; text-align: center; z-index: 3; }
.g-container .g-adventure .module.units .g-container .g-card.unit .name{ 
    position: absolute;
    top: 98px;
    left: -50px;
    width: 250px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    z-index: 3;
    line-height: 24px;
    letter-spacing: 2px;
    font-family: 'dimbo', sans-serif;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.6), 0px 0px 20px rgba(0, 0, 0, 0.2);
}
.g-container .g-adventure .module.units .g-container .g-card.unit .name span{ 
    word-break: keep-all;
    white-space: nowrap;
}
.g-container .g-adventure .module.units .g-container .g-card.unit .number{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 185px;
    height: 160px;
    padding: 24px 17px 10px 5px;
    color: #ffffff;
    text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.4);
    left: -15px;
    top: -32px;
    box-sizing: border-box;
    font-size: 65px;
    transition: background 0.5s linear 0.1s;
}

.g-container .g-adventure .module.units .g-container .unit .unit.status_finalized .number{
    height: 140px
}

.g-container .g-adventure .module.units .g-container .unit .unit .number{background-image: url(./img/stages/grass/u_grass.png)!important;}
.g-container .g-adventure .module.units .g-container .unit .unit:hover .number{background-image: url(./img/stages/grass/u_grass_hover.png)!important;}
.g-container .g-adventure .module.units .g-container .unit .unit.status_finalized .number{background-image: url(./img/stages/grass/p_grass.png)!important;}
.g-container .g-adventure .module.units .g-container .unit .unit.status_finalized:hover .number{background-image: url(./img/stages/grass/p_grass_hover.png)!important;}

.g-container .g-adventure .module.units .g-container:after,
.g-container .g-adventure .module.units .g-container:before{
    content:'';
    width: calc(50% - 300px);
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 1;	
    background: -moz-linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    background: -webkit-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    background: -o-linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    background: -ms-linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0, 0, 0, 0.7)', endColorstr='rgba(0, 0, 0, 0)',GradientType=0 ); /* IE6-9 */  
}

.g-container .g-adventure .module.units .g-container:after{	
    left: auto;
    right: 0px;
    -webkit-transform: rotate(180deg);  
    -ms-transform: rotate(180deg);  
    transform: rotate(180deg);  
}

.g-container .g-adventure .module.units .g-container .g-unit-container .unit-label{
    margin-left: -260px;
}
.g-container .g-adventure .module.units .g-container .g-unit-container.last-child .unit-label{
    margin-bottom: 90px;
}

.g-container .g-adventure .module.units .g-container .g-unit-container .unit-label.right{
    margin-left: 90px;
}

.g-container .g-adventure .module.units .g-container .g-card.unit.status_pending .know-progress,
.g-container .g-adventure .module.units .g-container .g-card.unit.status_finalized .know-progress{
    display: none;
}

.g-container .g-adventure .module.units .g-container .bt-video-end,
.g-container .g-adventure .module.units .g-container .bt-video-intro{
    width: 203px;
    height: 82px;
    background: url(img/bt-video.png);
    display: block;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -100px;
}
.g-container .g-adventure .module.units .g-container .bt-video-end .label,
.g-container .g-adventure .module.units .g-container .bt-video-intro .label{
    position: absolute;
    top: 24px;
    left: 71px;
    right: 10px;
    text-align: center;
    color: #FFF;
}
.g-container .g-adventure .module.units .g-container .bt-video-end{
    bottom: 222px;
    margin-left: -123px;
}
body.skin-magos .g-container .g-adventure .module.units .g-container .bt-video-end{
    bottom: 292px;
    margin-left: 27px;
}
body.skin-exploradores .g-container .g-adventure .module.units .g-container .bt-video-end{
    bottom: 32px;
    margin-left: -123px;
}
body.skin-colonizadores .g-container .g-adventure .module.units .g-container .bt-video-end{
    bottom: 162px;
    margin-left: -104px;
}
.g-container .g-adventure .module.units .g-container .g-card.unit:hover .shield{}
.g-container .g-adventure .module.units .g-container .g-card.unit.no-active:hover .shield{ animation: none; }
.g-container .g-adventure .module.units .g-container .g-card.unit .bg{ 
    width: 301px; 
    height: 222px; 
    background: url(img/adventure/base_grass.png); 
    position: absolute; 
    top: -30px;
    left: -80px;
    z-index: 2;
}
.g-container .g-adventure .module.units .g-container .stones .g-card.unit .bg{ 
    background: url(img/adventure/base_stone.png); 
}
.g-container .g-adventure .module.units .g-container .desert .g-card.unit .bg{ 
    background: url(img/adventure/base_desert.png); 
}
.g-container .g-adventure .module.units .g-container .grass2 .g-card.unit .bg{ 
    background: url(img/adventure/base_grass2.png); 
}
.g-container .g-adventure .module.units .g-container .stones2 .g-card.unit .bg{ 
    background: url(img/adventure/base_stone2.png); 
}
.g-container .g-adventure .module.units .g-container .snow .g-card.unit .bg{ 
    background: url(img/adventure/base_snow.png); 
}
.g-container .g-adventure .module.units .g-container .space1 .g-card.unit .bg{ 
    background: url(img/stages/space1/base_espacial1.png); 
}
.g-container .g-adventure .module.units .g-container .space2 .g-card.unit .bg{ 
    background: url(img/stages/space2/base_espacial2.png); 
}
.g-container .g-adventure .module.units .g-container .space3 .g-card.unit .bg{ 
    background: url(img/stages/space3/base_espacial3.png); 
}
.g-container .g-adventure .module.units .g-container .space4 .g-card.unit .bg{ 
    background: url(img/stages/space4/base_espacial4.png); 
}
.g-container .g-adventure .module.units .g-container .space5 .g-card.unit .bg{ 
    background: url(img/stages/space5/base_espacial5.png); 
}
.g-container .g-adventure .module.units .g-container .cave .g-card.unit .bg{ 
    background: url(img/stages/cave/base_cueva.png); 
}
.g-container .g-adventure .module.units .g-container .egypt .g-card.unit .bg{ 
    background: url(img/stages/egypt/base_egipto.png); 
}
.g-container .g-adventure .module.units .g-container .ruins .g-card.unit .bg{ 
    background: url(img/stages/ruins/base_ruinas.png); 
}
.g-container .g-adventure .module.units .g-container .sea .g-card.unit .bg{ 
    background: url(img/stages/sea/base_mar.png); 
}
.g-container .g-adventure .module.units .g-container .urbano .g-card.unit .bg{ 
    background: url(img/stages/urbano/base_urbano.png); 
}
.g-container .g-adventure .module.units .g-container .g-card.unit .path-bg{ 
    width: 375px; 
    height: 253px; 
    background: url(img/adventure/sendero_grass.png); 
    position: absolute; 
    top: -164px;
    left: 11px;
}
.g-container .g-adventure .module.units .g-container .stones .g-card.unit .path-bg{ 
    background: url(img/adventure/sendero_stone.png); 
}
.g-container .g-adventure .module.units .g-container .desert .g-card.unit .path-bg{ 
    background: url(img/adventure/sendero_desert.png); 
}
.g-container .g-adventure .module.units .g-container .grass2 .g-card.unit .path-bg{ 
    background: url(img/adventure/sendero_grass2.png); 
}
.g-container .g-adventure .module.units .g-container .stones2 .g-card.unit .path-bg{ 
    background: url(img/adventure/sendero_stone2.png); 
}
.g-container .g-adventure .module.units .g-container .snow .g-card.unit .path-bg{ 
    background: url(img/adventure/sendero_snow.png); 
}
.g-container .g-adventure .module.units .g-container .space1 .g-card.unit .path-bg{ 
    background: url(img/stages/space1/sendero_espacial1.png); 
}
.g-container .g-adventure .module.units .g-container .space2 .g-card.unit .path-bg{ 
    background: url(img/stages/space2/sendero_espacial2.png); 
}
.g-container .g-adventure .module.units .g-container .space3 .g-card.unit .path-bg{ 
    background: url(img/stages/space3/sendero_espacial3.png); 
}
.g-container .g-adventure .module.units .g-container .space4 .g-card.unit .path-bg{ 
    background: url(img/stages/space4/sendero_espacial4.png); 
}
.g-container .g-adventure .module.units .g-container .space5 .g-card.unit .path-bg{ 
    background: url(img/stages/space5/sendero_espacial5.png); 
}
.g-container .g-adventure .module.units .g-container .cave .g-card.unit .path-bg{ 
    background: url(img/stages/cave/sendero_cueva.png); 
}
.g-container .g-adventure .module.units .g-container .egypt .g-card.unit .path-bg{ 
    background: url(img/stages/egypt/sendero_egipto.png); 
}
.g-container .g-adventure .module.units .g-container .ruins .g-card.unit .path-bg{ 
    background: url(img/stages/ruins/sendero_ruinas.png); 
}
.g-container .g-adventure .module.units .g-container .sea .g-card.unit .path-bg{ 
    background: url(img/stages/sea/sendero_mar.png); 
}
.g-container .g-adventure .module.units .g-container .urbano .g-card.unit .path-bg{ 
    background: url(img/stages/urbano/sendero_urbano.png); 
}
.g-container .g-adventure .module.units .g-container .g-card.unit.right .path-bg{ 
    top: -164px;
    left: -247px;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
}
.g-container .g-adventure .module.units .g-container .g-card.unit.first .path-bg{ 
    display: none;
}
.g-container .g-adventure .module.units .g-container .g-card.unit .rock-1{ width: 30px; height: 20px; background: url(img/adventure/rocks-1.png); background-size: cover; position: absolute; top: 0px; left: 120px; }
.g-container .g-adventure .module.units .g-container .g-card.unit .rock-2{ width: 46px; height: 30px; background: url(img/adventure/rocks-1.png); background-size: cover; position: absolute; top: 100px; left: -90px; }
.g-container .g-adventure .module.units .g-container .g-card.unit .know-progress{ 
    width: 115px;
    height: 14px;
    position: absolute;
    top: 71px;
    left: 12px;
    z-index: 3;
    border: 2px solid #ffed00;
    border-radius: 6px;
    -webkit-box-shadow: 0px 0px 2px 3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 2px 3px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 2px 3px rgba(0,0,0,0.75);
}
.g-container .g-adventure .module.units .g-container .g-card.unit .know-progress .progress{ 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    overflow: hidden;
}
.g-container .g-adventure .module.units .g-container .g-card.unit.no-active .number{ opacity: .5;} 
.g-container .g-adventure .module.units .g-container .g-card.unit.no-active .name{ opacity: .5;} 
.g-container .g-adventure .module.units .g-container .g-card.unit.no-active .shield{ opacity: .5;} 
.g-container .g-adventure .module.units .g-container .g-card.unit.no-active .know-progress{ opacity: .5;} 

.g-container .g-modal.coffer-status{ 
    display: none;
    position: fixed; top:50%; left:50%; z-index: 5; border-radius: 10px; 
    width: 475px; height: 400px; margin-left: -235px;
    margin-top: -200px;
    background: #FFF;
    border: 3px solid #fff;
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    z-index: 10;
}

.g-container .g-modal.coffer-status{
    width: 400px;
    height: 540px;
    margin-left: -200px;
    margin-top: -250px;
}
.g-container .g-modal.coffer-status-bg{ 
    display: none; position: fixed; top:0; left:0; right:0; bottom:0; z-index: 9; background: #000; opacity: .5; 
}
.g-container .g-modal.coffer-status .selector-coffer{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    background: #FFF;
    border-radius: 8px;
    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
}
.g-container .g-modal.coffer-status .g-btn-close{ z-index: 4 }
.g-container .g-modal.coffer-status .selector-coffer .list-coffers{
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.g-container .g-modal.coffer-status .selector-coffer .group{
    width: 380px;
    height: 60px;
    border: 2px solid #DEDEDE;
    border-radius: 10px;
    margin: 20px 10px;
    position: relative;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fb8d02+1,ffd44e+100 */
    background: #fb8d02; /* Old browsers */
    background: -moz-linear-gradient(left, #fb8d02 1%, #ffd44e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #fb8d02 1%,#ffd44e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #fb8d02 1%,#ffd44e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb8d02', endColorstr='#ffd44e',GradientType=1 ); /* IE6-9 */

    -webkit-box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    -moz-box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
}
.g-container .g-modal.coffer-status .selector-coffer .label{
    margin: 20px;
}
.g-container .g-modal.coffer-status .selector-coffer .group .name{ 
    color: #FFF;
    position: absolute;
    top: 10px;
    left: 80px;
    font-size: 30px; 
}
.g-container .g-modal.coffer-status .selector-coffer .group .coffer{ 
    width: 70px;
    height: 67px;
    position: absolute;
    top: -7px;
    right: 3px;
    background: url(img/coffer/coffer-close.png);
    background-size: cover;
}
.g-container .g-modal.coffer-status .selector-coffer .group .avatar{ 
    position: absolute;
    top: -11px;
    left: 5px;
    background: url(img/groups/group_01.png);
    background-size: cover;
    width: 67px;
    height: 71px;
    z-index: 2;
    cursor: pointer;
}
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a1{background: url(img/groups/group_01.png);background-size: cover; }
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a2{background: url(img/groups/group_02.png);background-size: cover; }
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a3{background: url(img/groups/group_03.png); background-size: cover;}
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a4{background: url(img/groups/group_04.png); background-size: cover;}
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a5{background: url(img/groups/group_05.png); background-size: cover;}
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a6{background: url(img/groups/group_06.png); background-size: cover;}
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a7{background: url(img/groups/group_07.png); background-size: cover;}
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a8{background: url(img/groups/group_08.png); background-size: cover;}
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a9{background: url(img/groups/group_09.png); background-size: cover;}
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a10{background: url(img/groups/group_10.png); background-size: cover;}
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a11{background: url(img/groups/group_11.png);background-size: cover; }
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a12{background: url(img/groups/group_12.png); background-size: cover;}
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a13{background: url(img/groups/group_13.png); background-size: cover;}
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a14{background: url(img/groups/group_14.png);background-size: cover; }
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a15{background: url(img/groups/group_15.png);background-size: cover; }
.g-container .g-modal.coffer-status .selector-coffer .group .avatar.a16{background: url(img/groups/group_16.png);background-size: cover; }

.g-container .g-modal.coffer-status .g-title{
    color: #FFF;
    position: absolute;
    top: 60px;
    left: 42px;
    background: url(img/coffer/coffer-title.png);
    z-index: 5;
    width: 320px;
    height: 50px;
    background-size: cover;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
}
.g-container .g-modal.coffer-status .g-header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border: none;
    background: none;
}
.g-container .g-modal.coffer-status .g-header .icon {
    position: absolute;
    top: -59px;
    left: 125px;
    width: 154px;
    height: 145px;
    background: url(img/coffer/coffer-close.png);
    background-size: cover;
    z-index: 3;
}
.g-container .g-modal.coffer-status .status{
    position: absolute;
    top: 272px;
    left: 0px;
    right: 0px;
    height: 100px;
    border: none;
}
.g-container .g-modal.coffer-status .status .progress-container {
    position: absolute;
    top: 111px;
    left: 10px;
    right: 10px;
    height: 90px;
    border-radius: 10px;
    border: 2px solid #DEDEDE;
    background: #f2f8ff;
    -webkit-box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
}
.g-container .g-modal.coffer-status .g-header .icon.open {
    position: absolute;
    top: -32px;
    left: 125px;
    width: 143px;
    height: 130px;
    background: url(img/coffer/coffer-open.png);
    background-size: cover;
    z-index: 4;
}
.g-container .g-modal.coffer-status .g-header .name {
    z-index: 3;
    position: absolute;
    top: 150px;
    left: 5px;
    right: 102px;
    font-size: 30px;
    color: #ff5722;
    text-align: center;
    font-family: woold;
    background: #FFF;
    height: 90px;
    line-height: 1.5em;
}
.g-container .g-modal.coffer-status .g-btn-close{
    position: absolute;
    top: 3px;
    right: 5px;
    width: 40px;
    height: 40px;
}
.g-container .g-modal.coffer-status .g-header .ilumination {
    position: absolute;
    top: -109px;
    left: 85px;
    width: 224px;
    height: 195px;
    background: url(img/ilumination.png);
    background-size: cover;
    z-index: 2;
}
.g-container .g-modal.coffer-status .g-header .circle{
    position: absolute;
    top: -50px;
    left: 80px;
    width: 240px;
    height: 240px;
    border-radius: 120px;
    border: 2px solid #fb8d02;
    background: #fb8d02;
    background: -moz-linear-gradient(top, #fb8d02 0%, #ffd44e 100%);
    background: -webkit-linear-gradient(top, #fb8d02 0%,#ffd44e 100%);
    background: linear-gradient(to bottom, #fb8d02 0%,#ffd44e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb8d02', endColorstr='#ffd44e',GradientType=0 );
    z-index: 2;
}
.g-container .g-modal.coffer-status .g-header .circle-bg{
    position: absolute;
    top: -50px;
    left: 79px;
    width: 248px;
    height: 248px;
    border-radius: 120px;
    background: #888;
    z-index: 1;
}
.g-container .g-modal.coffer-status .g-header .premio{
    position: absolute;
    top: 103px;
    left: 160px;
    z-index: 4;
    font-size: 30px;
    color: #814600;
}
.g-container .g-modal.coffer-status .g-header .group-icon{ 
    position: absolute;
    top: 5px;
    left: 5px;
    width: 60px;
    height: 60px;
    background: url(img/groups/group_01.png);
    background-size: cover;
}
.g-container .g-modal.coffer-status .g-header .group-icon.i2{ background: url(img/groups/group_02.png); background-size: cover; }
.g-container .g-modal.coffer-status .g-header .group-icon.i3{ background: url(img/groups/group_03.png); background-size: cover; }
.g-container .g-modal.coffer-status .g-header .group-icon.i4{ background: url(img/groups/group_04.png); background-size: cover; }
.g-container .g-modal.coffer-status .g-header .group-icon.i5{ background: url(img/groups/group_05.png); background-size: cover; }
.g-container .g-modal.coffer-status .g-header .group-icon.i6{ background: url(img/groups/group_06.png); background-size: cover; }
.g-container .g-modal.coffer-status .g-header .group-icon.i7{ background: url(img/groups/group_07.png); background-size: cover; }
.g-container .g-modal.coffer-status .g-header .group-icon.i8{ background: url(img/groups/group_08.png); background-size: cover; }
.g-container .g-modal.coffer-status .g-header .group-icon.i9{ background: url(img/groups/group_09.png); background-size: cover; }
.g-container .g-modal.coffer-status .g-header .group-icon.i10{ background: url(img/groups/group_10.png); background-size: cover; }
.g-container .g-modal.coffer-status .g-header .group-icon.i11{ background: url(img/groups/group_11.png); background-size: cover; }
.g-container .g-modal.coffer-status .g-header .group-icon.i12{ background: url(img/groups/group_12.png); background-size: cover; }
.g-container .g-modal.coffer-status .g-header .group-icon.i13{ background: url(img/groups/group_13.png); background-size: cover; }
.g-container .g-modal.coffer-status .g-header .group-icon.i14{ background: url(img/groups/group_14.png); background-size: cover; }
.g-container .g-modal.coffer-status .g-header .group-icon.i15{ background: url(img/groups/group_15.png); background-size: cover; }
.g-container .g-modal.coffer-status .g-header .group-icon.i16{ background: url(img/groups/group_16.png); background-size: cover; }

.g-container .g-modal.coffer-status .g-header .bt-donate {
    position: absolute;
    top: 63px;
    right: 40px;
    cursor: pointer;
    border-radius: 5px;
    background: #469d43;
    display: inline-block;
    padding: 5px 15px;
    padding-right: 40px;
    color: #FFF;
    border-radius: 10px;
    border: 3px solid #ffd200;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
}
.g-container .g-modal.coffer-status .g-header .bt-donate span {
    width: 38px;
    height: 37px;
    background: url(img/points.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: 0px;
    left: 64px;
    cursor: pointer;
}
.g-container .g-modal.coffer-status .status {
    position: absolute;
    top: 272px;
    left: 0px;
    right: 0px;
    height: 100px;
    border: none;
}
.g-container .g-modal.coffer-status .status .label{
    font-size: 22px;
    color: #2587f6;
    margin: 15px 0px 0px 20px;
}
.g-container .g-modal.coffer-status .status .value .icon{
    position: absolute;
    top: 7px;
    left: 229px;
    width: 42px;
    height: 40px;
    background: url(img/points.png);
    background-size: cover;
}
.g-container .g-modal.coffer-status .status .value .value{
    position: absolute;
    top: 7px;
    right: 200px;
    color: red;
    font-size: 35px;
}
.g-container .g-modal.coffer-status .status .ico-sorprise{
    position: absolute;
    top: 9px;
    right: 12px;
    width: 70px;
    height: 80px;
    background: url(img/sorprise.png);
    background-size: cover;
}
.g-container .g-modal.coffer-status .status .ico-sorprise.active{
    background-size: contain;
    width: 95px;
    height: 95px;
    border-radius: 15px;
    top: 0;
    border: 2px solid #999;
    right: 2px;
}
.g-container .g-modal.coffer-status .status .progress{
    position: absolute;
    top: 50px;
    left: 62px;
    right: 110px;
    text-align: left;
    color: #fff;
    z-index: 2;
}
.g-container .g-modal.coffer-status .status .points-icon{
    position: absolute;
    top: 40px;
    left: 15px;
    width: 42px;
    height: 40px;
    background: url(img/points.png);
    background-size: cover;
    z-index: 2;
}
body.skin-magos .g-container .g-modal.coffer-status .status .points-icon{
    height: 42px;
    background: url(img/points-magos.png);
    background-size: cover;
}
body.skin-exploradores .g-container .g-modal.coffer-status .status .points-icon{
    height: 42px;
    background: url(img/points-exploradores.png);
    background-size: cover;
}
body.skin-colonizadores .g-container .g-modal.coffer-status .status .points-icon{
    height: 42px;
    background: url(img/points-colonizadores.png);
    background-size: cover;
}
body.skin-sofubis .g-container .g-modal.coffer-status .status .points-icon{
    height: 42px;
    background: url(img/points-sofubis.png);
    background-size: cover;
}
body.skin-titanes .g-container .g-modal.coffer-status .status .points-icon{
    height: 42px;
    background: url(img/points-titanes.png);
    background-size: cover;
}
body.skin-guardianes .g-container .g-modal.coffer-status .status .points-icon{
    height: 42px;
    background: url(img/points-guardianes.png);
    background-size: cover;
}
.g-container .g-modal.coffer-status .status .progress-bar{
    position: absolute;
    top: 49px;
    left: 36px;
    right: 28px;
    height: 31px;
    border-radius: 10px;
}
.g-container .g-modal.coffer-status .status .progress-bar-mask{
    position: absolute;
    top: 46px;
    left: 33px;
    right: 25px;
    height: 31px;
    border: 3px solid #FFF;
    -webkit-box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    -moz-box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    border-radius: 10px
}
.g-container .g-modal.coffer-status .history {
    top: 128px;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0px 0px 8px 8px;
    position: absolute;
}
.g-container .g-modal.coffer-status .history .label{
    font-size: 22px;
    margin: 10px 20px;
    color: #333;
}
.g-container .g-modal.coffer-status .history .list-students{
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFF;
    border-radius: 0px 0px 8px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding-top: 20px;
}
.g-container .g-modal.coffer-status .history .list-students .empty{
    color: #666;
    text-align: center;
    margin: 30px;
}
.g-container .g-modal.coffer-status .history .list-students .student{
    width: 350px;
    background: #f2f2f2;
    border-radius: 10px;
    position: relative;
    margin: 10px;
    margin-left: 30px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    height: 50px;
    margin-bottom: 15px;
}

.g-container .g-modal.coffer-status .history .list-students .student .avatar{
    width: 60px;
    height: 59px;
    position: absolute;
    top: 18px;
    left: -21px;
    z-index: 2;
}
.g-container .g-modal.coffer-status .history .list-students .student .avatar .student-avatar-circle { 
    width: 100px;
    height: 100px;
    position: relative;
}
.g-container .g-modal.coffer-status .history .list-students .student .avatar .student-avatar-circle .avatar-image{ 
    background-size: cover;
    border-bottom-left-radius: 130px;
    border-bottom-right-radius: 130px;
    width: 58px;
    height: 60px;
    background-position-y: -2px;
    background-repeat: no-repeat;
    z-index: 6;
    top: -31px;
    left: 1px;
    position: absolute;
}
.g-container .g-modal.coffer-status .history .list-students .student .avatar .student-avatar-circle .ring{ 

}
.g-container .g-modal.coffer-status .history .list-students .student .avatar .ring-inner{ 

}
.g-container .g-modal.coffer-status .history .list-students .student .avatar-bg{ 
    width: 68px;
    height: 47px;
    position: absolute;
    top: 3px;
    left: -25px;
    background: url(img/teacher/bg-student.png);
    z-index: 1;
    background-size: cover;
}

.g-container .g-modal.coffer-status .history .list-students .student .name{
    position: absolute;
    top: 8px;
    left: 50px;
    font-size: 22px;
}
.g-container .g-modal.coffer-status .history .list-students .student .points{
    position: absolute;
    cursor: default;
    width: 90px;
    background: #81887e;
    border-radius: 40px;
    height: 33px;
    top: 6px;
    right: 3px;
}
.g-container .g-modal.coffer-status .history .list-students .student .points .label{
    position: absolute;
    top: -11px;
    right: 5px;
    color: #fff;
    font-size: 30px;
    left: 1px;
    text-align: center;
}

.g-container .g-modal.coffer-status .status .coffer-label-message {
    font-size: 26px;
    color: #2587f6;
    margin: 15px 0px 0px 0px;
    border: 3px dotted #2587f6;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    line-height: 28px;
    max-height: 80px;
    overflow: hidden;
}
.g-container .g-modal.coffer-status.open .status .coffer-label-message {
    color: #333333;
    border: 3px solid silver;
    background: #dedede;
}
.g-container .g-modal.coffer-status.open .status .total, 
.g-container .g-modal.coffer-status.open .status .progress-bar, 
.g-container .g-modal.coffer-status.open .status .progress, 
.g-container .g-modal.coffer-status.open .status .points-icon, 
.g-container .g-modal.coffer-status.open .status .progress-bar-mask {
    display: none;
}
.g-container .g-modal.coffer-status .status .value .icon{
    position: absolute;
    top: 50px;
    left: 68px;
    width: 42px;
    height: 40px;
    background: url(img/points.png);
    background-size: cover;
}
body.skin-magos .g-container .g-modal.coffer-status .status .value .icon{
    height: 42px;
    background: url(img/points-magos.png);
    background-size: cover;
}
body.skin-exploradores .g-container .g-modal.coffer-status .status .value .icon{
    height: 42px;
    background: url(img/points-exploradores.png);
    background-size: cover;
}
body.skin-colonizadores .g-container .g-modal.coffer-status .status .value .icon{
    height: 42px;
    background: url(img/points-colonizadores.png);
    background-size: cover;
}
body.skin-sofubis .g-container .g-modal.coffer-status .status .value .icon{
    height: 42px;
    background: url(img/points-sofubis.png);
    background-size: cover;
}
body.skin-titanes .g-container .g-modal.coffer-status .status .value .icon{
    height: 42px;
    background: url(img/points-titanes.png);
    background-size: cover;
}
body.skin-guardianes .g-container .g-modal.coffer-status .status .value .icon{
    height: 42px;
    background: url(img/points-guardianes.png);
    background-size: cover;
}
.g-container .g-modal.coffer-status .status .value .value {
    position: absolute;
    top: -55px;
    left: 270px;
    width: 42px;
    height: 40px;
    color: #fff;
    background-size: cover;
    z-index: 5;
    font-size: 45px;
    text-align: center;
}
.g-container .g-modal.coffer-status .value .icon-container .label-value{
    font-size: 25px;
    color: #fff229;
    position: absolute;
    top: 20px;
    left: 5px;
    right: 5px;
    text-align: center;
}
.g-container .g-modal.coffer-status .value .icon-container{
    width: 130px;
    height: 130px;
    position: absolute;
    top: -100px;
    right: 20px;
    background: url(img/coffer/price-red.png);
    background-size: cover;
    z-index: 4;
}
.g-container .g-modal.coffer-status .status .image-container{
    border: 4px solid #FFF;
    border-radius: 10px;
    -webkit-box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    background: #FFF;
    position: absolute;
    top: -120px;
    left: 30px;
    z-index: 3;
    -webkit-transform: rotate(-10deg);  
    -ms-transform: rotate(-10deg);  
    transform: rotate(-10deg); 
}
.g-container .g-modal.coffer-status .status .image-container img{
    border-radius: 8px;
    max-width: 160px;
    max-height: 160px;
}
.g-container .g-modal.coffer-status .status .progress-container .total {
    position: absolute;
    top: 5px;
    left: 33px;
    color: #083e73;
}
.g-container .g-modal.coffer-status .status .progress-container .bt-donations {
    position: absolute;
    top: 7px;
    right: 25px;
    font-size: 20px;
    border: 2px solid #8888;
    background: #bedcff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 2px 15px;
    cursor: pointer;
    color: #083e73;
}
.g-container .g-modal.coffer-status.open .status .progress-container .bt-donations{
    top: 107px;
}
.g-container .g-modal.coffer-status .status .coffer-completed-message{
    position: absolute;
    top: 23px;
    left: 10px;
    right: 10px;
    display: none;
    text-align: center;
    line-height: 20px;
}
.g-container .g-modal.coffer-status.open .status .coffer-completed-message{
    display: block;
}
.g-container .g-modal.coffer-status.open .status .value .icon-container{
    background: url(img/coffer/price-green.png);
    background-size: cover;
}
.g-container .g-modal.coffer-status  .delivered{
    position: absolute;
    font-size: 35px;
    color: #1cb71b;
    border: 4px solid #1cb71b;
    box-sizing: border-box;
    padding: 5px 10px;
    bottom: 20px;
    left: 50px;
    transform: rotate(-10deg);
    display: none;
    background: #fff;
}
.g-container .g-modal.coffer-status.open  .delivered{
    display:block;
}
.g-container .g-modal.coffer-status .bt-donate {
    position: absolute;
    bottom: -160px;
    left: 130px;
    cursor: pointer;
    right: 130px;
    background: #2587f6;
    display: inline-block;
    padding: 3px 15px;
    color: #fff;
    border-radius: 10px;
    border: 3px solid #ffd200;
    font-size: 25px;
    text-align: center;
    box-sizing: border-box;
    padding-right: 40px;
}
.g-container .g-modal.coffer-status .bt-donate .icon{
    position: absolute;
    top: 0px;
    right: 3px;
    width: 37px;
    height: 36px;
    background: url(img/points.png);
    background-size: cover;
}
body.skin-magos .g-container .g-modal.coffer-status .bt-donate .icon{
    height: 37px;
    background: url(img/points-magos.png);
    background-size: cover;
}
body.skin-exploradores .g-container .g-modal.coffer-status .bt-donate .icon{
    height: 37px;
    background: url(img/points-exploradores.png);
    background-size: cover;
}
body.skin-colonizadores .g-container .g-modal.coffer-status .bt-donate .icon{
    height: 37px;
    background: url(img/points-colonizadores.png);
    background-size: cover;
}
body.skin-sofubis .g-container .g-modal.coffer-status .bt-donate .icon{
    height: 37px;
    background: url(img/points-sofubis.png);
    background-size: cover;
}
body.skin-titanes .g-container .g-modal.coffer-status .bt-donate .icon{
    height: 37px;
    background: url(img/points-titanes.png);
    background-size: cover;
}
body.skin-guardianes .g-container .g-modal.coffer-status .bt-donate .icon{
    height: 37px;
    background: url(img/points-guardianes.png);
    background-size: cover;
}
.g-container .g-modal.coffer-status .bt-donate {
    display: none;
}
.g-container .g-modal.coffer-status .modal-history {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 6;
}
.g-container .g-modal.coffer-status .modal-history .header{
    position: relative;
    width: 100%;
    height: 50px;
    z-index: 2;
}
.g-container .g-modal.coffer-status .modal-history .header .title{
    color: #FFF;
    position: absolute;
    top: 10px;
    left: 42px;
    background: url(img/coffer/coffer-title.png);
    width: 320px;
    height: 50px;
    background-size: cover;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
}
.g-container .g-modal.coffer-status  .modal-history .header .points-icon {
    position: absolute;
    top: 70px;
    left: 15px;
    width: 42px;
    height: 40px;
    background: url(img/points.png);
    background-size: cover;
    z-index: 1;
}
.g-container .g-modal.coffer-status  .modal-history .header .progress {
    position: absolute;
    top: 80px;
    left: 62px;
    right: 110px;
    text-align: left;
    color: #fff;
    z-index: 1;
}
.g-container .g-modal.coffer-status  .modal-history .header .progress-bar {
    position: absolute;
    top: 79px;
    left: 36px;
    right: 28px;
    height: 31px;
    border-radius: 10px;
}
.g-container .g-modal.coffer-status  .modal-history .header .progress-bar-mask {
    position: absolute;
    top: 76px;
    left: 33px;
    right: 25px;
    height: 31px;
    border: 3px solid #FFF;
    -webkit-box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    -moz-box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    border-radius: 10px;
}
.g-container .g-modal.coffer-status .modal-history .header .points-icon{
    position: absolute;
    top: 70px;
    left: 15px;
    width: 42px;
    height: 40px;
    background: url(img/points.png);
    background-size: cover;
    z-index: 1;
}
body.skin-magos .g-container .g-modal.coffer-status .modal-history .header .points-icon{
    height: 42px;
    background: url(img/points-magos.png);
    background-size: cover;
}
body.skin-exploradores .g-container .g-modal.coffer-status .modal-history .header .points-icon{
    height: 42px;
    background: url(img/points-exploradores.png);
    background-size: cover;
}
body.skin-colonizadores .g-container .g-modal.coffer-status .modal-history .header .points-icon{
    height: 42px;
    background: url(img/points-colonizadores.png);
    background-size: cover;
}
body.skin-sofubis .g-container .g-modal.coffer-status .modal-history .header .points-icon{
    height: 42px;
    background: url(img/points-sofubis.png);
    background-size: cover;
}
body.skin-titanes .g-container .g-modal.coffer-status .modal-history .header .points-icon{
    height: 42px;
    background: url(img/points-titanes.png);
    background-size: cover;
}
body.skin-guardianes .g-container .g-modal.coffer-status .modal-history .header .points-icon{
    height: 42px;
    background: url(img/points-guardianes.png);
    background-size: cover;
}
.g-container .g-modal.coffer-status .modal-history .header .progress{
    position: absolute;
    top: 80px;
    left: 62px;
    right: 110px;
    text-align: left;
    color: #fff;
    z-index: 1;
}
.g-container .g-modal.coffer-status .modal-history .header .progress-bar{
    position: absolute;
    top: 79px;
    left: 36px;
    right: 28px;
    height: 31px;
    border-radius: 10px;
}
.g-container .g-modal.coffer-status .modal-history .header .progress-bar-mask{
    position: absolute;
    top: 76px;
    left: 33px;
    right: 25px;
    height: 31px;
    border: 3px solid #FFF;
    -webkit-box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    -moz-box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);

    box-shadow: 2px 1px 1px 2px rgba(0,0,0,0.28);
    border-radius: 10px;
}
/* END adventure (student/teacher) UNITS */

/* adventure (student/teacher) UNIT */
.g-container .g-adventure .modal-bg { opacity: .8; }
.g-container .g-adventure .modal-bg.disabled { visibility: hidden; }
.g-container .g-adventure .modal-unit {     position: fixed;
                                            z-index: 8;
                                            top: 0;
                                            left: 0;
                                            right: 0;
                                            bottom: 0; }
.g-container .g-adventure .modal-unit.disabled { visibility: hidden; }

.g-container .g-adventure .modal-unit .header .g-btn-close{    
    position: absolute;
    top: 10px;
    right: 10px; 
    z-index: 8;
}
.g-container .g-adventure .modal-unit .g-container-unit { }
.g-container .g-adventure .modal-unit .g-container-unit .unit-title{
    position: absolute;
    top: 10px;
    left: 50px;
    right: 50px;
    z-index: 8;
    color: #fff;
    text-align: center;
    font-size: 30px;
}

.g-container .g-adventure .modal-unit .g-container-unit .bt-oracle:hover{ 
    -webkit-animation: flickerAnimation .75s infinite;
    -moz-animation: flickerAnimation .75s infinite;
    -o-animation: flickerAnimation .75s infinite;
    animation: flickerAnimation .75s infinite;
}
.g-container .g-adventure .modal-unit .g-container-unit .bt-oracle{     
    cursor: pointer;
    width: 300px;
    height: 110px;
    background: url(img/adventure-unit/bt-oracle2.png);
    background-size: cover;
    display: block;
    position: absolute;
    bottom: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    left: 50%;
    margin-left: -331px;
    z-index: 8
}

.g-container .g-adventure .modal-unit .g-container-unit .bt-oracle .icon{ 
    position: absolute;
    top: 12px;
    right: 34px;
    width: 34px;
    height: 85px;
    background-image: url(img/adventure-oracle/energy.png);
    background-size: contain;
    z-index: 1;
    background-repeat: no-repeat;
}
.g-container .g-adventure .modal-unit .g-container-unit .bt-battle:hover{ 
    -webkit-animation: flickerAnimation .75s infinite;
    -moz-animation: flickerAnimation .75s infinite;
    -o-animation: flickerAnimation .75s infinite;
    animation: flickerAnimation .75s infinite;
}


.g-container .g-adventure .modal-unit .g-container-unit .bt-oracle.load-more-energy{
    background:  no-repeat;
    top: 550px;
    bottom: auto;
    text-align:  right;
    width: 150px;
    margin-left: -63px;
}

.g-container .g-adventure .modal-unit .g-container-unit .bt-oracle.load-more-energy .icon{
    background: url(img/adventure-oracle/concept-energy-active.png) no-repeat;
    left:  20px;
    top: 39px;
}

.g-container .g-adventure .modal-unit .g-container-unit .bt-oracle.load-more-energy .tx-shadow-1{
    top: 91px;
    left: -50px;
    color: #3cff00;
    width: 250px;
    text-align: center;
    text-shadow: 3px 3px 0px #000;
}

.g-container .g-adventure .modal-unit .g-container-unit .bt-oracle.load-more-energy .tx-shadow-1.text{
    top: 102px;
}

.g-container .g-adventure .modal-unit .g-container-unit .bt-oracle.load-more-energy .bar-energy{
    left:  0;
    right:  auto;
}

.g-container .g-adventure .modal-unit .g-container-unit .bt-oracle.load-more-energy .bar-energy .progressbar-text{
    left: 108px!important;
    font-size: 45px!important;
    text-shadow: 3px 3px 0px #000;
}

.g-container .g-adventure .modal-unit .g-container-unit .bt-battle{ 
    /*cursor: pointer;
    width: 300px;
    height: 110px;
    background: url(img/adventure-unit/bt-battle2.png);
    background-size: cover;
    display: block;
    position: absolute;
    bottom: 33px;
    background-size: contain;
    background-repeat: no-repeat;
    left: 50%;
    margin-left: 10px;
    z-index: 8;*/

    cursor: pointer;
    border-radius: 5px;
    background: #119520;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    position: absolute;
    left: 50%;
    top: 420px;
    border-radius: 10px;
    border: 3px solid #ffd160;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    font-size: 36px;
    width: 200px;
    margin-left: -100px;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 3px 3px 0px rgb(49, 41, 41);
    z-index: 8;
}
.g-container .g-adventure .modal-unit .g-container-unit .bt-battle.margin-t{
    margin-top: 55px;
}
.g-container .g-adventure .modal-unit .g-container-unit .bt-battle span {
    position: absolute;
    top: 42px;
    left: 100px;
    color: #FFF;
    font-size: 25px;
}
.g-container .g-adventure .modal-unit.without-energy .g-container-unit .bt-battle{ 
    display: none;
}
.g-container .g-adventure .modal-unit.without-energy .g-container-unit .bt-oracle{ 
    margin-left: -150px;
}
.g-container .g-adventure .modal-unit .g-container-unit .bt-oracle span{ position: absolute; top: 38px; left: 21px; color: #FFF; font-size: 30px; }
.g-container .g-adventure .modal-unit .g-container-unit .bt-oracle .bar-energy{
    position: absolute;
    top: 26px;
    right: 23px;
    width: 60px;
    height: 60px;
}
.g-container .g-adventure .modal-unit .g-container-unit .bt-oracle .bar-energy .progressbar-text{
    color: #fff !important;
    font-size: 29px !important;
    text-shadow: 2px 2px 3px rgb(6, 6, 6);
    position: absolute !important;
    top: 31px !important;
    left: -39px !important;
}


.g-container .g-adventure .modal-unit .g-container-unit .elements{ 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .g-btn-close{ 
    position: absolute;
    top: 10px;
    right: 10px;   
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .versus{ 
    width: 121px;
    height: 130px;
    background: url(img/adventure-battle/bg-versus.png);
    position: absolute;
    top: 141px;
    left: 50%;
    margin-left: -68px;
    z-index: 2;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .pergaminos{ 
    width: 129px;
    height: 99px;
    background: url(img/adventure-battle/pergaminos.png);
    position: absolute;
    top: 51px;
    left: 50%;
    margin-left: -71px;
    z-index: 2;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .versus-light{ 
    width: 254px;
    height: 255px;
    background: url(img/adventure-battle/ilumination.png);
    position: absolute;
    top: 71px;
    left: 50%;
    margin-left: -136px;
    z-index: 1;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .versus-light.animate{ 
    -webkit-animation:spin 20s linear infinite;
    -moz-animation:spin 20s linear infinite;
    animation:spin 20s linear infinite;
}

.g-container .g-adventure .modal-unit .g-container-unit .elements .user { 
    position: absolute;
    top: 127px;
    left: 50%;
    margin-left: -270px;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .user .student-avatar-circle { 
    width: 100px;
    height: 100px;
    position: relative;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .user .student-avatar-circle .avatar-image{ 
    background-size: cover;
    border-bottom-left-radius: 130px;
    border-bottom-right-radius: 130px;
    width: 160px;
    height: 170px;
    background-position-y: -3px;
    background-repeat: no-repeat;
    z-index: 6;
    top: -29px;
    left: -7px;
    position: absolute;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .user .student-avatar-circle .ring{ 
    position: absolute;
    top: -4px;
    left: -4px;
    width: 140px;
    height: 140px;
    border-radius: 150px;
    border: 7px solid #c3a707;
    z-index: 1;
    -webkit-box-shadow: 1px 3px 0px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 3px 0px 1px rgba(0,0,0,0.75);
    box-shadow: 1px 3px 0px -1px rgba(0,0,0,0.75);
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .user .student-avatar-circle .ring-inner{ 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 140px;
    height: 140px;
    border-radius: 150px;
    border: 3px solid gold;
    z-index: 2;
    background: #593e20;
    box-shadow: inset 1px 1px 31px #000;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .enemy{ 
    position: absolute;
    top: 127px;
    right: 50%;
    margin-right: -190px;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .enemy .enemy-avatar-circle { 
    width: 100px;
    height: 100px;
    position: relative;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .enemy .enemy-avatar-circle .avatar-image{ 
    background-size: cover;
    border-bottom-left-radius: 130px;
    border-bottom-right-radius: 130px;
    width: 137px;
    height: 170px;
    background-position-y: -3px;
    background-repeat: no-repeat;
    background-image: url(img/adventure-battle/troll.png);
    z-index: 6;
    top: -26px;
    left: 4px;
    position: absolute;
    background-position-x: -31px;
}
body.skin-magos .g-container .g-adventure .modal-unit .g-container-unit .elements .enemy .enemy-avatar-circle .avatar-image{ 
    background-image: url(img/adventure-battle/troll-magos.png);
    background-repeat: no-repeat;
    background-position-x: 1px;
    background-position-y: 5px;
}
body.skin-exploradores .g-container .g-adventure .modal-unit .g-container-unit .elements .enemy .enemy-avatar-circle .avatar-image{ 
    background-image: url(img/adventure-battle/troll-exploradores.png);
    background-repeat: no-repeat;
    background-position-x: -6px;
    background-position-y: 5px;
}
body.skin-colonizadores .g-container .g-adventure .modal-unit .g-container-unit .elements .enemy .enemy-avatar-circle .avatar-image{ 
    background-image: url(img/adventure-battle/troll-colonizadores.png);
    background-repeat: no-repeat;
    background-position-x: -3px;
    background-position-y: 5px;
}
body.skin-titanes .g-container .g-adventure .modal-unit .g-container-unit .elements .enemy .enemy-avatar-circle .avatar-image{ 
    background-image: url(img/adventure-battle/troll-titanes.png);
    background-repeat: no-repeat;
    background-position-x: -16px;
    background-position-y: 5px;
}
body.skin-guardianes .g-container .g-adventure .modal-unit .g-container-unit .elements .enemy .enemy-avatar-circle .avatar-image{ 
    background-image: url(img/adventure-battle/troll-guardianes.png);
    background-repeat: no-repeat;
    background-position-x: -25px;
    background-position-y: 5px;
}
body.skin-sofubis .g-container .g-adventure .modal-unit .g-container-unit .elements .enemy .enemy-avatar-circle .avatar-image{ 
    background-image: url(img/adventure-battle/troll-sofubis.png);
    background-repeat: no-repeat;
    background-position-x: -16px;
    background-position-y: 5px;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .enemy .enemy-avatar-circle .ring{ 
    position: absolute;
    top: -4px;
    left: -4px;
    width: 140px;
    height: 140px;
    border-radius: 150px;
    border: 7px solid #c3a707;
    z-index: 1;
    -webkit-box-shadow: 1px 3px 0px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 3px 0px 1px rgba(0,0,0,0.75);
    box-shadow: 1px 3px 0px -1px rgba(0,0,0,0.75);
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .enemy .enemy-avatar-circle .ring-inner{ 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 140px;
    height: 140px;
    border-radius: 150px;
    border: 3px solid gold;
    z-index: 2;
    background: #593e20;
    box-shadow: inset 1px 1px 31px #000;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .user-label{ 
    position: absolute;
    top: 155px;
    left: 50%;
    margin-left: -209px;
    color: #FFF;
    z-index: 7;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .user-label .name{
    background: url(img/adventure-battle/bg-label-center.png);
    background-size: contain;
    width: auto;
    height: 44px;
    position: relative;
    top: 111px;
    left: 0;
    right: 0;
    letter-spacing: 1px;
    font-size: 30px;
    display: inline-block;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .user-label .name::after{
    content: ' ';
    width: 52px;
    height: 44px;
    background: url(img/adventure-battle/bg-label-right.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    right: -52px;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .user-label .name::before{
    content: ' ';
    width: 52px;
    height: 44px;
    background: url(img/adventure-battle/bg-label-left.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: -51px;
}

.g-container .g-adventure .modal-unit .g-container-unit .elements .enemy-label{ 
    position: absolute;
    top: 155px;
    right: 50%;
    margin-right: -190px;
    color: #FFF;
    z-index: 7;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .enemy-label .name{
    background: url(img/adventure-battle/bg-label-center.png);
    background-size: contain;
    width: auto;
    height: 44px;
    position: relative;
    top: 111px;
    left: 0;
    right: 0;
    letter-spacing: 1px;
    font-size: 30px;
    display: inline-block;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .enemy-label .name::after{
    content: ' ';
    width: 52px;
    height: 44px;
    background: url(img/adventure-battle/bg-label-right.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    right: -52px;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .enemy-label .name::before{
    content: ' ';
    width: 52px;
    height: 44px;
    background: url(img/adventure-battle/bg-label-left.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: -51px;
}


.g-container .g-adventure .modal-unit .g-container-unit .elements .texts{ 
    position: absolute;
    top: 340px;
    color: #FFF;
    text-align: center;
    width: 500px;
    left: 50%;
    margin-left: -250px;
    letter-spacing: 1px;
    cursor: pointer;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .texts .title{ 
    font-size: 30px;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .texts .message{ 
    color: yellow;
    margin: 20px 0 20px 0;
}
.g-container .g-adventure .modal-unit .g-container-unit .elements .bar-bg{ 
    height: 80px;
    position: absolute;
    left: 0; 
    right: 0;
    top: 160px;
    border-top: 2px solid #59b9b0;
    border-bottom: 2px solid #59b9b0;
    background: rgba(0,148,133,1);
    background: -moz-linear-gradient(top, rgba(0,148,133,1) 0%, rgba(0,147,132,1) 50%, rgba(0,136,122,1) 51%, rgba(0,136,122,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,148,133,1)), color-stop(50%, rgba(0,147,132,1)), color-stop(51%, rgba(0,136,122,1)), color-stop(100%, rgba(0,136,122,1)));
    background: -webkit-linear-gradient(top, rgba(0,148,133,1) 0%, rgba(0,147,132,1) 50%, rgba(0,136,122,1) 51%, rgba(0,136,122,1) 100%);
    background: -o-linear-gradient(top, rgba(0,148,133,1) 0%, rgba(0,147,132,1) 50%, rgba(0,136,122,1) 51%, rgba(0,136,122,1) 100%);
    background: -ms-linear-gradient(top, rgba(0,148,133,1) 0%, rgba(0,147,132,1) 50%, rgba(0,136,122,1) 51%, rgba(0,136,122,1) 100%);
    background: linear-gradient(to bottom, rgba(0,148,133,1) 0%, rgba(0,147,132,1) 50%, rgba(0,136,122,1) 51%, rgba(0,136,122,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009485', endColorstr='#00887a', GradientType=0 );
    -webkit-box-shadow: 0px 0px 29px 0px rgba(255,255,255,1);
    -moz-box-shadow: 0px 0px 29px 0px rgba(255,255,255,1);
    box-shadow: 0px 0px 29px 0px rgba(255,255,255,1);
}



/* END adventure (student/teacher) UNIT */

/* adventure image zoom */
.g-container .g-adventure .wrap-extended-image{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: table;
    background: rgba(0,0,0,0.85);
    cursor: pointer;
    z-index: 6;
}
.g-container .g-adventure .wrap-extended-image div{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.g-container .g-adventure .wrap-extended-image div img{
    max-width: 90%!important;
    max-height: 90%!important;
}
/* END adventure image zoom */

/* adventure (student/teacher) ORACLE */
.g-container .g-adventure .module.oracle { }
.g-container .g-adventure .module.oracle .header{
    position: fixed; top: 0; left: 0; right: 0; height: 20px; z-index: 2;	
    background-image: url(img/bg-header.png);
    background-size: contain;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    width: 100%;
    height: 77px;
}
.g-container .g-adventure .module.oracle .header .g-btn-back{ width: 51px; top: 10px; left: 14px; position: absolute; height: 50px; }
.g-container .g-adventure .module.oracle .header .page-info{ 
    width: 51px;
    top: 18px;
    left: 80px;
    position: absolute;
    height: 50px;
    color: #fff;
    font-size: 30px;
}
.g-container .g-adventure .module.oracle .header .progress { 
    position: absolute;
    top: 13px;
    right: 13px;
    width: 50px;
    height: 50px;
    z-index: 2;
}
.g-container .g-adventure .module.oracle .header .progress .progressbar-text{ 
    color: #FFF !important;
    position: absolute ! important;
    top: 25px !important;
    right: -150px !important;
    font-size: 30px;
    text-shadow: 2px 2px 0px rgb(49, 41, 41);
}
.g-container .g-adventure .module.oracle .header .progress-bg { 
    width: 55px;
    top: 12px;
    right: 8px;
    position: absolute;
    height: 56px;
    background: url(img/adventure-oracle/bg-energy.png);
    background-size: cover;
    z-index: 1;
}
.g-container .g-adventure .module.oracle .container-concepts{ 
    width: 800px;
    margin: 0 auto;
    text-align: center;
    position: fixed;
    left: 50%;
    margin-left: -400px;
}
.g-container .g-adventure .module.oracle .container-concepts .g-card{ 
    padding-top: 80px;
    width: 800px;
    height: 566px;
    position: relative;
    cursor: pointer;
    left: 0;
    right: 0;
    -webkit-transition: all 500ms ;
    transition: all 500ms ; 
    opacity: 1;
    transform: rotate(0deg);
}

.g-container .g-adventure .module.oracle .container-concepts .g-card.ff_left_out{
    left: -550px;
    opacity: 0; 
    transform:rotate(-20deg);
}
.g-container .g-adventure .module.oracle .container-concepts .g-card.ff_left_out.ff_left_midle{
    left: 250px;
    transform:rotate(20deg);
}
.g-container .g-adventure .module.oracle .container-concepts .g-card.ff_left_out.ff_left_midle.ff_left_in{
    left: 0px;
    opacity: 1; 
    transform: rotate(0deg);
}

.g-container .g-adventure .module.oracle .container-concepts .g-card.ff_right_out{
    right: -550px;
    opacity: 0; 
    transform:rotate(20deg);
    left: auto;
}
.g-container .g-adventure .module.oracle .container-concepts .g-card.ff_right_out.ff_right_midle{
    right: 250px;
    transform:rotate(-20deg);
}
.g-container .g-adventure .module.oracle .container-concepts .g-card.ff_right_out.ff_right_midle.ff_right_in{
    right: 0px;
    opacity: 1; 
    transform: rotate(0deg);
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .front, 
.g-container .g-adventure .module.oracle .container-concepts .g-card .back{ 
    width: 800px;
    height: 566px;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.g-container .g-adventure .module.oracle .container-concepts .g-card .front .tx-concept{
    text-transform: uppercase;
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .front .tx-concept.no-transform{
    text-transform: none;
}

.g-container .g-adventure .module.oracle .container-concepts .g-card .front{
    background-image: url(img/adventure-oracle/termino.png);
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .back{ 
    background-image: url(img/adventure-oracle/definicion.png);
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .flip{ 
    color: #666;
    position: absolute;
    bottom: 40px; 
    right: 10px;
    left: 10px;
    text-align: center;
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .flip .icon{ 
    background: url(img/adventure-oracle/bt-turn.png);
    width: 14px;
    height: 27px;
    margin-left: 15px;
    vertical-align: middle;
    display: inline-block;
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .tx-concept{ font-size: 45px; }
.g-container .g-adventure .module.oracle .container-concepts .g-card .tx-concept,
.g-container .g-adventure .module.oracle .container-concepts .g-card .tx-definition{ 
    display: table;
    height: 450px;
    width: 760px;
    text-align: center;
    margin: 20px;
}
body.e-level-1 .g-container .g-adventure .module.oracle .container-concepts .g-card .tx-concept,
body.e-level-1 .g-container .g-adventure .module.oracle .container-concepts .g-card .tx-definition{ 
    font-family: 'edescolar';
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .tx-concept span,
.g-container .g-adventure .module.oracle .container-concepts .g-card .tx-definition span {
    display: table-cell;
    vertical-align: middle;
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .tx-definition span img{
    max-width: 430px;
    max-height: 430px;
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .tx-definition span .concept_and_img{
    /*text-align: left;*/
    padding-top: 30px;
}
.g-container .g-adventure .module.oracle .container-concepts .bt-footer.disabled{ 
    opacity: .3;
}
.g-container .g-adventure .module.oracle .container-concepts .bt-footer:hover{ 
    -webkit-animation: flickerAnimation .75s infinite;
    -moz-animation: flickerAnimation .75s infinite;
    -o-animation: flickerAnimation .75s infinite;
    animation: flickerAnimation .75s infinite;
}
.g-container .g-adventure .module.oracle .container-concepts .bt-footer.disabled:hover{ 
    opacity: .3;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
}
.g-container .g-adventure .module.oracle .container-concepts .bt-footer{ 
    cursor: pointer;
    width: 60px;
    height: 61px;
    background: url(img/adventure-oracle/bt-prev.png);
    cursor: pointer;
    width: 60px;
    height: 61px;
    background: url(img/adventure-oracle/bt-prev.png);
    position: fixed;
    top: 685px;

}
.g-container .g-adventure .module.oracle .container-concepts .bt-footer.bt-prev{ 
    left: calc(50% - 120px);
}
.g-container .g-adventure .module.oracle .container-concepts .bt-footer.bt-next{ 
    background: url(img/adventure-oracle/bt-next.png);
    right: calc(50% - 120px);
}

.g-container .g-adventure .module.oracle .container-finish{ 
    display: none; 
}

/* FLIP */
.g-container .g-adventure .module.oracle .container-concepts .g-card .flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 

}
.g-container .g-adventure .module.oracle .container-concepts .g-card .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .flip-container.hover .front {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .front,
.g-container .g-adventure .module.oracle .container-concepts .g-card .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateY(0deg);
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -o-transform: rotateY(0deg);
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    -ms-transform: rotateY(0deg);
    transition: 0.6s;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    position: fixed;
    top: 0;
    left: 0;
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .front {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .flip-container.hover .back {
    z-index: 3;
}
/* END FLIP */

.g-container .g-adventure .module.oracle .container-concepts .g-card .energy {
    position: absolute; top: 20px; right: 27px;
    width: 16px;
    height: 31px;
    background: url(img/adventure-oracle/concept-energy.png);
}
.g-container .g-adventure .module.oracle .container-concepts .g-card .energy.active {
    width: 20px;
    height: 35px;
    background: url(img/adventure-oracle/concept-energy-active.png);
}
.g-container .g-adventure .module.oracle .container-finish{
    display: block;
    width: 400px;
    margin: 20px auto;
    text-align: center;
    color: #FFF;
    font-size: 30px;
}
.g-container .g-adventure .module.oracle .container-finish .title-2{
    margin-top: 50px;
}
.g-container .g-adventure .module.oracle .container-finish .title-3{
    margin-top: 20px;
}
.g-container .g-adventure .module.oracle .container-finish .energy{
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px auto;
}
.g-container .g-adventure .module.oracle .container-finish .energy-bar{ z-index: 1; width: 80px; height: 80px; top: 18px; left: 5px; }
.g-container .g-adventure .module.oracle .container-finish .energy-bar .progressbar-text{ display: none !important; }
.g-container .g-adventure .module.oracle .container-finish .energy-icon{ width: 45px; height: 86px; background: url(img/adventure-oracle/energy.png); position: absolute; top: 0px; left: 25px; z-index: 2; }
.g-container .g-adventure .module.oracle .container-finish .energy-percent{ font-size: 80px; }
.g-container .g-adventure .module.oracle .container-finish .bt-battle{ 
    cursor: pointer;
    width: 300px;
    height: 115px;
    background: url(img/adventure-unit/bt-battle2.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 10px auto;
    position: relative;
}
.g-container .g-adventure .module.oracle .container-finish .bt-battle span{
	position: absolute;
    top: 29px;
    left: 99px;
    color: #FFF;
    font-size: 28px;
    height: 60px;
    line-height: 28px;
    display: flex;
    width: 198px;
    justify-content: center;
    align-items: center;
}
.g-container .g-adventure .module.oracle .container-finish .bt-battle:hover{
    -webkit-animation: flickerAnimation .75s infinite;
    -moz-animation: flickerAnimation .75s infinite;
    -o-animation: flickerAnimation .75s infinite;
    animation: flickerAnimation .75s infinite; }

.g-container .g-adventure .module.battle .stages_game,
.g-container .g-adventure .module.oracle .stages_game{
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); 
}
body.android-app .g-container .g-adventure .module.battle .stages_game,
body.android-app .g-container .g-adventure .module.oracle .stages_game{
    filter: none;
    -webkit-filter: none;
    -moz-filter: none; 
    -o-filter: none; 
    -ms-filter: none;
    filter: none; 
}

/* END adventure (student/teacher) ORACLE */

/* adventure (student/teacher) BATTLE */
.g-container .g-adventure .module.battle { }
.g-container .g-adventure .module.battle .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-image: url(img/bg-header.png);
    background-size: contain;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    width: 100%;
    height: 77px;
}
.g-container .g-adventure .module.battle .header .g-btn-back{ width: 51px; top: 10px; left: 14px; position: absolute; height: 50px; }
.g-container .g-adventure .module.battle .header .page-info{ 
    display: none;
    width: 51px;
    top: 18px;
    left: 80px;
    position: absolute;
    height: 50px;
    color: #fff;
    font-size: 30px;
}
.g-container .g-adventure .module.battle .header .energy { 
    position: absolute;
    top: 13px;
    right: 13px;
    width: 50px;
    height: 50px;
    z-index: 2;
}
.g-container .g-adventure .module.battle .header .energy .progressbar-text{ 
    color: #FFF !important;
    position: absolute ! important;
    top: 25px !important;
    right: -150px !important;
    font-size: 30px;
    text-shadow: 2px 2px 0px rgb(49, 41, 41);
}
.g-container .g-adventure .module.battle .header .energy-bg { width: 55px; top: 12px; right: 8px; position: absolute; height: 56px; background: url(img/adventure-oracle/bg-energy.png); background-size: cover; z-index: 1; }
.g-container .g-adventure .module.battle .header .progress { width: 417px; height: 38px; background: url(img/adventure-battle/bg-progress.png); margin: 15px auto; position: relative; }
.g-container .g-adventure .module.battle .header .progress-icon{ 
    position: absolute;
    top: 9px;
    left: 50%;
    width: 36px;
    height: 50px;
    background: url(img/pergamino.png) no-repeat;
    background-size: cover;
    z-index: 1;
    margin-left: 187px
}
.g-container .g-adventure .module.battle .header .progress .progress-bar{ position: absolute; top: 6px; left: 6px; width: 402px; height: 22px; border-radius: 8px; overflow: hidden; }

.g-container .g-adventure .module.battle .g-container { width: 805px; margin: 0px auto; margin-top: 70px; }
.g-container .g-adventure .module.battle .g-container .activity{  }
.g-container .g-adventure .module.battle .g-container .activity.disabled{ display: none; }
.g-container .g-adventure .module.battle .g-container .activity .feedbacks{ position: absolute; top: 220px; left: 10px; right: 10px; text-align: center; z-index: 2; font-size: 70px; color: #fff; font-family: 'dimbo', sans-serif; overflow: hidden;}
.g-container .g-adventure .module.battle .g-container .activity .feedbacks .ok{ color: #2fca15; }
.g-container .g-adventure .module.battle .g-container .activity .feedbacks .not-ok{ color: #ed3719; }

.g-container .g-adventure .module.battle .g-container .activity.multiple-choice{  }
.g-container .g-adventure .module.battle .g-container .activity.multiple-choice .card {
    position: relative;
    width: 804px;
    height: 328px;
    background-image: url(img/adventure-battle/pergamino_web_batalla.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
body.e-level-1 .g-container .g-adventure .module.battle .g-container .activity.multiple-choice .card {
    font-family: 'edescolar';
}
.g-container .g-adventure .module.battle .g-container .activity.multiple-choice .card .text{ 
    display: table;
    height: 278px;
    width: 100%;
    text-align: center;
    padding: 20px;
    z-index: 1;
    position: absolute;
    box-sizing: border-box;
}
.g-container .g-adventure .module.battle .g-container .activity.multiple-choice .card .text span{
    display: table-cell;
    vertical-align: middle;
}
.g-container .g-adventure .module.battle .g-container .activity .card .text span .concept_and_img{

}
.g-container .g-adventure .module.battle.classify .g-container .activity .card .text span .concept_and_img{
    margin-bottom: 0px;
}
.g-container .g-adventure .module.battle .g-container .activity.multiple-choice .card .text span img{
    max-width: 430px;
    max-height: 210px;
}
.g-container .g-adventure .module.battle.classify .g-container .activity.multiple-choice .card .text span img{
    max-height: 260px;
}
.g-container .g-adventure .module.battle .g-container .activity.multiple-choice .option{
    width: 523px;
    background: #FFF;
    display: block;
    border-radius: 15px;
    margin: 10px auto;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    -webkit-box-shadow: 2px 3px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 3px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 3px 0px 2px rgba(0,0,0,0.58);
}
.g-container .g-adventure .module.battle .g-container .activity.multiple-choice .option:first-letter {
    text-transform: uppercase;
}
body.e-level-1 .g-container .g-adventure .module.battle .g-container .activity.multiple-choice .option{
    font-family: 'edescolar';
}
body.pc-device .g-container .g-adventure .module.battle .g-container .activity.multiple-choice .option:hover{ background: #dedede; 
                                                                                                              -webkit-box-shadow: 2px 3px 0px 2px rgba(0,0,0,0.9);
                                                                                                              -moz-box-shadow: 2px 3px 0px 2px rgba(0,0,0,0.9);
                                                                                                              box-shadow: 2px 3px 0px 2px rgba(0,0,0,0.9);
}
.g-container .g-adventure .module.battle .g-container .activity.multiple-choice .option.disabled{ opacity: .75; cursor: default; }
.g-container .g-adventure .module.battle .g-container .activity.multiple-choice .option.disabled:hover{ opacity: .75; background: #fff; cursor: default;
                                                                                                        -webkit-box-shadow: 2px 3px 0px 2px rgba(0,0,0,0.58);
                                                                                                        -moz-box-shadow: 2px 3px 0px 2px rgba(0,0,0,0.58);
                                                                                                        box-shadow: 2px 3px 0px 2px rgba(0,0,0,0.58);}

.g-container .g-adventure .module.battle .g-container .activity.multiple-choice .option.ok,
.g-container .g-adventure .module.battle .g-container .activity.multiple-choice .option.ok.disabled:hover{ background: #2fca15; }
.g-container .g-adventure .module.battle .g-container .activity.multiple-choice .option.not-ok,
.g-container .g-adventure .module.battle .g-container .activity.multiple-choice .option.not-ok.disabled:hover{ background: #ed3719; }



.g-container .g-adventure .module.battle .g-container .activity.write{  }

.g-container .g-adventure .module.battle .g-container .activity.write .card{
    position: relative;
    width: 804px;
    height: 328px;
    background-image: url(img/adventure-battle/pergamino_web_batalla.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
body.e-level-1 .g-container .g-adventure .module.battle .g-container .activity.write .card{
    font-family: 'edescolar';
}
.g-container .g-adventure .module.battle .g-container .activity.write .card .text{ 
    display: table;
    height: 278px;
    width: 760px;
    text-align: center;
    padding: 20px;
    z-index: 1;
    position: absolute;
}
.g-container .g-adventure .module.battle .g-container .activity.write .card .text span{
    display: table-cell;
    vertical-align: middle;
}
.g-container .g-adventure .module.battle .g-container .activity.write .card .text span img{
    max-width: 430px;
    max-height: 210px;
}
.g-container .g-adventure .module.battle .g-container .activity.write .answer-label{
    color: #fff;
    font-size: 30px;
    width: 500px;
    margin: 15px auto 0px;
}
body.e-level-1 .g-container .g-adventure .module.battle .g-container .activity.write .write-container{
    font-family: 'edescolar';
}
.g-container .g-adventure .module.battle .g-container .activity.write .input{
    width: 523px;
    background: #FFF;
    display: block;
    border-radius: 15px;
    margin: 10px auto;
    text-align: center;
    height: 55px;
    cursor: pointer;
    -webkit-box-shadow: 2px 3px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 3px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 3px 0px 2px rgba(0,0,0,0.58);
    position: relative;
}
.g-container .g-adventure .module.battle.classify .g-container .activity.write .input{
    width: 613px;
    height: 110px;
}

.g-container .g-adventure .module.battle .g-container .activity.write .input:before {
    content: '';
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 15px;
    -webkit-box-shadow: inset 0px 0px 9px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 9px 2px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.1);
    z-index: 0;
}
.g-container .g-adventure .module.battle .g-container .activity.write .input input{
    font-family: 'dimbo', sans-serif;
    border: 0;
    color: #666666;
    font-size: 28px;
    display: inline-block;
    border-bottom: solid #16b5a6 2px;
    margin: 5px 11px 0px 0px;
    line-height: 43px;
    width: 385px;
    padding: 0px;
    box-sizing: border-box;
    z-index: 1;
    position: relative;
    margin-left: 5px;
}
body.e-level-1 .g-container .g-adventure .module.battle .g-container .activity.write .input input{
    font-family: 'edescolar', sans-serif;
}
.g-container .g-adventure .module.battle .g-container .activity.write .input input.part-b{
    margin-left: 10px;
}
.g-container .g-adventure .module.battle.classify .g-container .activity.write .input input{
    height: 38px;
    position: absolute;
    bottom: 10px;
    left: 10px;
	background: transparent;
}
.g-container .g-adventure .module.battle .g-container .activity.write .input input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: silver;
    opacity: 1; /* Firefox */
}

.g-container .g-adventure .module.battle .g-container .activity.write .input input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: silver;
}

.g-container .g-adventure .module.battle .g-container .activity.write .input input::-ms-input-placeholder { /* Microsoft Edge */
    color: silver;
}

.g-container .g-adventure .module.battle .g-container .activity.write .input.incorrect input{
    border-color: #ffffff;
    color: #ed3719;
}
.g-container .g-adventure .module.battle .g-container .activity.write .input.correct input{
    border-color: #ffffff;	
    color: #2fca15;
}
.g-container .g-adventure .module.battle .g-container .activity.write .input.write input{
    border-bottom: solid #ed3719 2px;
    color: #666666;
    width: 90% !important;
}
.g-container .g-adventure .module.battle.classify .g-container .activity.write .input.write input{    
    width: 460px !important;
}
.g-container .g-adventure .module.battle .g-container .activity.write .input.write-ok input{
    border-bottom: #ffffff;
    color: #2fca15;
    width: 90% !important;
}
.g-container .g-adventure .module.battle.classify .g-container .activity.write .input.write-ok input{
    width: 460px !important;
}
.g-container .g-adventure .module.battle .g-container .activity.write .input.incorrect:after,
.g-container .g-adventure .module.battle .g-container .activity.write .input.correct:after{
    content: '';
    position: relative;
    right: 15px;
    top: -42px;
    width: 40px;
    height: 40px;
    background-image: url(img/adventure-battle/ok.png);
    background-repeat: no-repeat;
    background-size: contain;
    float: right;
}
.g-container .g-adventure .module.battle.classify .g-container .activity.write .input.incorrect:after,
.g-container .g-adventure .module.battle.classify .g-container .activity.write .input.correct:after{
    position: absolute;
}

.g-container .g-adventure .module.battle .g-container .activity.write .input.incorrect:after{
    background-image: url(img/adventure-battle/not-ok.png);	
}
.g-container .g-adventure .module.battle .g-container .activity.write .write-container{
    display: inline-block;
}
.g-container .g-adventure .module.battle.classify .g-container .activity.write .write-container{
    display: inline-block;
    line-height: 40px;
    text-align: left;
    box-sizing: border-box;
    padding-top: 5px;
    width: 100%;
    height: 100%;
}
.g-container .g-adventure .module.battle.classify .g-container .activity.write .write-container .sentence{
    position: absolute;
    top: 3px;
    left: 20px;
    right: 10px;
    overflow: hidden;
    height: 99px;
    line-height: 25px;
    padding-top: 4px;
}
.g-container .g-adventure .module.battle .g-container .activity.write .correct-answer{
    display: none;
    position: absolute;
    bottom: 20px;
    left: 25px;
    z-index: 2;
}
.g-container .g-adventure .module.battle .g-container .activity.write .correct-answer .label{ color: #17a000; }
.g-container .g-adventure .module.battle .bt-response{
    cursor: pointer;
    display: inline;
    color: #00b19a;
    text-transform: uppercase;
    z-index: 1;
    position: relative;
}
.g-container .g-adventure .module.battle.classify .bt-response{
    position: absolute;
    bottom: 10px;
    right: 30px;    
}

.g-container .g-adventure .module.battle .multiple-choice .bt-not-know{
    position: relative;
    text-align: center;
    margin-top: 55px;
}

.g-container .g-adventure .module.battle .bt-not-know{
    font-family: 'dimbo_italic', sans-serif;
    font-size: 30px;
    color: #ffd200;
    cursor: pointer;
    position: absolute;
    top: -43px;
    right: 0;
    text-shadow: 2px 2px 0px #153940;
    z-index: 1;
}

.g-container .g-adventure .module.battle .bt-response.disabled{
    opacity: 0;
}
.g-container .g-adventure .module.battle .footer {
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    background: url(img/bg-header.png) repeat-x;
    background-size: 350px;
}
.g-container .g-adventure .module.battle .footer.hide{
    display: none;
}
.g-container .g-adventure .module.battle .footer .bt-continue{
    cursor: pointer;
    border-radius: 5px;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    background: #119520;
    border-radius: 10px;
    border: 3px solid #fcd66d;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}
.g-container .g-adventure .module.battle .footer .bt-continue.hide{
    display: none;
}
.g-container .g-adventure .module.battle .footer .bt-continue.disabled{
    opacity: 0;
}

.g-container .g-adventure .activity.finish{
    display: none;
    text-align: center;
    color: #FFF;
}
.g-container .g-adventure .activity.finish .points{
    font-size: 100px;
}
.g-container .g-adventure .activity.finish .label{
    font-size: 45px;
}
.g-container .g-adventure .activity.finish .feedback{
    font-size: 45px;
    margin-bottom: 10px;
}
.g-container .g-adventure .activity.finish .user{
    width: auto;
    height: 160px;
    position: relative;
    margin: 0 auto;
}
.g-container .g-adventure .activity.finish .user .icon{
    position: absolute;
    top: 17px;
    width: 100px;
    height: 99px;

    z-index: 1;
    margin-left: -50px;
    left: 50%;	

}
.g-container .g-adventure .activity.finish .user .student-avatar-circle { 
    width: 85px;
    height: 85px;
    position: relative;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: blink 1.5s linear infinite;
    -moz-animation: blink 1.5s linear infinite;
    -ms-animation: blink 1.5s linear infinite;
    -o-animation: blink 1.5s linear infinite;
    animation: blink 1.5s linear infinite;
}
.g-container .g-adventure .activity.finish .user .student-avatar-circle .avatar-image{ 
    background-size: cover;
    border-bottom-left-radius: 130px;
    border-bottom-right-radius: 130px;
    width: 90px;
    height: 100px;
    background-position-y: -3px;
    background-repeat: no-repeat;
    z-index: 6;
    top: -18px;
    left: -2px;
    position: absolute;
}
.g-container .g-adventure .activity.finish .user .student-avatar-circle .ring{ 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 80px;
    height: 80px;
    border-radius: 150px;
    border: 3px solid gold;
    z-index: 2;
    -webkit-box-shadow: 1px 3px 0px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 3px 0px 1px rgba(0,0,0,0.75);
    box-shadow: 1px 3px 0px -1px rgba(0,0,0,0.75);
}
.g-container .g-adventure .activity.finish .user .student-avatar-circle .ring-inner{ 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 80px;
    height: 80px;
    border-radius: 150px;
    border: 3px solid gold;
    z-index: 2;
    background: #FFFFFF;
    box-shadow: inset 1px 1px 31px #000;
}

@keyframes blink { 0% { box-shadow: 0 0 50px #ffd200; } 50% { box-shadow: none; } 100% { box-shadow: 0 0 50px #ffd200; } }
@-webkit-keyframes blink { 0% { box-shadow: 0 0 50px #ffd200; } 50% { box-shadow: 0 0 0; } 100% { box-shadow: 0 0 50px #ffd200; } }

.g-container .g-adventure .activity.finish .user .laureles{
    position: absolute;
    top: 13px;
    width: 116px;
    height: 99px;
    background: url(img/adventure-battle/laureles.png);
    background-size: cover;
    z-index: 2;
    margin-left: -66px;
    left: 50%;
}
.g-container .g-adventure .activity.finish .user .name{
    background: url(img/adventure-battle/bg-label-center.png);
    background-size: contain;
    width: auto;
    height: 44px;
    position: relative;
    top: 111px;
    left: 0;
    right: 0;
    letter-spacing: 1px;
    font-size: 30px;
    display: inline-block;
}
.g-container .g-adventure .activity.finish .user .name::after{
    content: ' ';
    width: 52px;
    height: 44px;
    background: url(img/adventure-battle/bg-label-right.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    right: -52px;
}
.g-container .g-adventure .activity.finish .user .name::before{
    content: ' ';
    width: 52px;
    height: 44px;
    background: url(img/adventure-battle/bg-label-left.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: -51px;
}
.g-container .g-adventure .activity.finish .concept-status{
    width: 210px;
    height: 40px;
    border-radius: 15px;
    background: #1a7a83;
    color: #FFF;
    text-align: left;
    line-height: 40px;
    letter-spacing: 1px;
    margin-bottom: 5px;
    margin: 9px auto;
}
.g-container .g-adventure .activity.finish .concept-status span{
    background: #4CAF50;
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 15px;
    text-align: center;
    margin-right: 10px;
    font-size: 30px;
    vertical-align: top;
}
.g-container .g-adventure .activity.finish .bt-finish-continue{
    cursor: pointer;
    border-radius: 5px;
    display: inline-block;
    padding: 0px 0px 0px 55px;
    color: #FFF;
    margin: 20px 50px 0px -50px;
    background-image: url(img/adventure-unit/bt-battle2.png);
    background-size: contain;
    background-repeat: no-repeat;
    line-height: 84px;
    text-align: center;
    width: 215px;
    box-sizing: border-box;
    text-shadow: 2px 2px 0px #266318;
    letter-spacing: 1px;
}
.g-container .g-adventure .activity.finish .bt-exit{
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    color: #ffd200;
    border-radius: 10px;
    margin-top: 20px;
    text-shadow: 2px 2px 0px #233101;
    letter-spacing: 1px;
    border: 3px solid #ffd200;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.7);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.7);
}

.g-container .g-adventure .module.battle .modal.energy {
    text-align: center;
    margin: 0px;
    width: 100%;
    height: 100%;
    left: auto;
    top: 0;
    border-radius: 0;
    border: 0;
}

.g-container .g-adventure .module.battle .modal.energy .stages_game:after{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    content:'';
}

.g-container .g-adventure .module.battle .modal.energy .g-btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 8;
    width: 50px;
    height: 50px;
    background: url(img/btn-close.png);
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

.g-container .g-adventure .module.battle .modal.energy .unit-number {
    background-image: url(img/stages/grass/circle_grass.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.4);
    color: #ffffff;
    width: 70px;
    height: 70px;
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 40px;
    line-height: 68px;
    text-align: center;
}

.g-container .g-adventure .module.battle .modal.energy .unit-name {
    position: absolute;
    top: 28px;
    left: 95px;
    font-family: dimbo;
    font-size: 28px;
    text-shadow: 2px 2px 0px rgb(49, 41, 41);
    color: #fff;
}

.g-container .g-adventure .module.battle .modal.energy .bar-bg {
    height: 80px;
    position: absolute;
    left: 0;
    right: 0;
    top: 293px;
    border-top: 2px solid #59b9b0;
    border-bottom: 2px solid #59b9b0;
    background: rgba(0,148,133,1);
    background: -moz-linear-gradient(top, rgba(0,148,133,1) 0%, rgba(0,147,132,1) 50%, rgba(0,136,122,1) 51%, rgba(0,136,122,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,148,133,1)), color-stop(50%, rgba(0,147,132,1)), color-stop(51%, rgba(0,136,122,1)), color-stop(100%, rgba(0,136,122,1)));
    background: -webkit-linear-gradient(top, rgba(0,148,133,1) 0%, rgba(0,147,132,1) 50%, rgba(0,136,122,1) 51%, rgba(0,136,122,1) 100%);
    background: -o-linear-gradient(top, rgba(0,148,133,1) 0%, rgba(0,147,132,1) 50%, rgba(0,136,122,1) 51%, rgba(0,136,122,1) 100%);
    background: -ms-linear-gradient(top, rgba(0,148,133,1) 0%, rgba(0,147,132,1) 50%, rgba(0,136,122,1) 51%, rgba(0,136,122,1) 100%);
    background: linear-gradient(to bottom, rgba(0,148,133,1) 0%, rgba(0,147,132,1) 50%, rgba(0,136,122,1) 51%, rgba(0,136,122,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009485', endColorstr='#00887a', GradientType=0 );
    -webkit-box-shadow: 0px 0px 29px 0px rgba(255,255,255,1);
    -moz-box-shadow: 0px 0px 29px 0px rgba(255,255,255,1);
    box-shadow: 0px 0px 29px 0px rgba(255,255,255,1);
}

.g-container .g-adventure .module.battle .modal.energy .center-character .center-character-msj {
    color: #ffffff;
    position: absolute;
    top: 21px;
    width: 195px;
    left: 24px;
}

.g-container .g-adventure .module.battle .modal.energy .center-character {
    background-image: url(img/energy/troll.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 245px;
    height: 280px;
    position: absolute;
    top: 138px;
    left: 50%;
    margin: 0px 0px 0px -115px;
}
body.skin-magos .g-container .g-adventure .module.battle .modal.energy .center-character {
    background-image: url(img/energy/troll-magos.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
body.skin-exploradores .g-container .g-adventure .module.battle .modal.energy .center-character {
    background-image: url(img/energy/troll-exploradores.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
body.skin-colonizadores .g-container .g-adventure .module.battle .modal.energy .center-character {
    background-image: url(img/energy/troll-colonizadores.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
body.skin-sofubis .g-container .g-adventure .module.battle .modal.energy .center-character {
    background-image: url(img/energy/troll-sufubis.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;	
}
.g-container .g-adventure .module.battle .modal.energy .text-character {
    position: absolute;
    top: 474px;
    left: 0px;
    text-align: center;
    width: 100%;
    font-family: dimbo;
    font-size: 25px;
    text-shadow: 2px 2px 0px rgb(49, 41, 41);
    color: #fed61b;
}

.g-container .g-adventure .module.battle .modal.energy .text-character span {
    display: block;
    font-size: 28px;
    color: #ffffff;
}

.g-container .g-adventure .module.battle .modal.energy .button-character {
    background-image: url(img/energy/button-reload.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 624px;
    left: 50%;
    color: #FFF;
    font-size: 30px;
    height: 99px;
    width: 290px;
    text-align: left;
    box-sizing: border-box;
    padding: 31px 0px 0px 20px;
    text-shadow: 2px 2px 0px rgb(49, 41, 41);
    cursor: pointer;
    margin: 0px 0px 0px -145px;
}

.g-container .g-adventure .module.battle .modal.energy .msg{ 
    margin: 10px;
    margin-top: 0;
    font-size: 30px;
}
.g-container .g-adventure .module.battle .modal.energy .icon{ 
    display: inline-block;
    width: 45px;
    height: 86px;
    background: url(img/adventure-oracle/energy.png);
    margin: 20px;
}
.g-container .g-adventure .module.battle .modal.energy .bt-accept{ 
    cursor: pointer;
    margin: 20px;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    background: #119520;
    border-radius: 10px;
    border: 3px solid #fcd66d;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}
.g-container .g-adventure .module.battle .cards-container{ 
    position: fixed;
    left: 0px;
    bottom: 10px;
    right: 0px;
    text-align: center;
    background: url(img/bg-header.png) repeat-x;
    background-position-y: 30px;
    /*margin-left: -48px;*/
}
.g-container .g-adventure .module.battle .cards-container.c2{ 
    /*margin-left: -96px;*/
}
.g-container .g-adventure .module.battle .cards-container.c3{ 
    /*margin-left: -144px;*/
}
.g-container .g-adventure .module.battle .cards-container .card { 
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.g-container .g-adventure .module.battle .cards-container .card.disabled { 
    opacity: .4;
}
.g-container .g-adventure .module.battle .cards-container .card .icon{ 
    width: 107px;
    height: 123px;
    background: url(img/cards/cromo_pasapal.png);
    cursor: pointer;
}
.g-container .g-adventure .module.battle .cards-container .card .icon.i2{ 
    background: url(img/cards/cromo_energia.png);
}
.g-container .g-adventure .module.battle .cards-container .card .icon.i3{ 
    background: url(img/cards/cromo_pista.png);
}
body.skin-sofubis .g-adventure .module.battle .cards-container .card .icon{ 
    background: url(img/cards/sofubis/cromo_pasapal.png);
}
body.skin-sofubis .g-container .g-adventure .module.battle .cards-container .card .icon.i2{ 
    background: url(img/cards/sofubis/cromo_energia.png);
}
body.skin-sofubis .g-container .g-adventure .module.battle .cards-container .card .icon.i3{ 
    background: url(img/cards/sofubis/cromo_pista.png);
}

.g-container .g-adventure .module.battle .cards-container .card .power{
    position: absolute;
    bottom: 10px;
    color: #FFF;
    font-size: 23px;
    text-align: center;
    left: 0;
    right: 0;
}


.g-container .g-adventure .module.battle .modal.spelling { height: 500px; top: 50%; margin-top: -250px; width: 400px; margin-left: -200px;}
.g-container .g-adventure .module.battle .modal.spelling .modal-header .section{ 
    background: #078a96;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #FFF;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-left: 20px;
    letter-spacing: 1px;
}
.g-container .g-adventure .module.battle .modal.spelling .modal-header .g-btn-close{ 
    position: absolute;
    top: 6px;
    right: 7px;
}
.g-container .g-adventure .module.battle .modal.spelling .spelling-container{ 
    position: absolute;
    overflow: auto;
    top: 70px;
    left: 15px;
    right: 10px;
    bottom: 10px;
    letter-spacing: 1px;
}
.g-container .g-adventure .module.battle .modal.spelling .spelling-container .you-write{ 
    border-bottom: 2px solid #dedede;
    margin-bottom: 10px;
    padding-bottom: 15px;
    color: silver;
}
.g-container .g-adventure .module.battle .modal.spelling .spelling-container .you-write .y-answer{ 
    font-size: 28px;
    color: #666;    
}
.g-container .g-adventure .module.battle .modal.spelling .spelling-container .correction{ 
    border-bottom: 1px solid #dedede;
    box-sizing: border-box;
    padding-bottom: 15px;
    display: list-item;
    margin-left: 35px;
    list-style-type: circle;  
}
.g-container .g-adventure .module.battle .modal.spelling .spelling-container .correction .word{ 
    font-size: 28px;
    text-transform: capitalize;
    color: #666;
}
.g-container .g-adventure .module.battle .modal.spelling .spelling-container .correction .word.error{ 
    color: red;
}
.g-container .g-adventure .module.battle .modal.spelling .spelling-container .correction .word.ok{ 
    color: #00ce11;
}
.g-container .g-adventure .module.battle .modal.spelling .spelling-container .correction .rule{ 
    color: #888;
}
.g-container .g-adventure .module.battle .modal.spelling .spelling-container .correction .rule .rule-name{ 
    color: #333;
}
.g-container .g-adventure .module.battle .modal.spelling .spelling-container .error{ 
    color: red;
}
.g-container .g-adventure .module.battle .modal.spelling .spelling-container .ok{ 
    color: #00ce11;
}
/* END adventure (student/teacher) BATTLE */

/* student profile */
.g-container .g-student .module.profile { width: 100%; min-height: 700px; 

}
.g-container .g-student .module.profile > .header{ position: fixed; top: 0; left: 0; right: 0; z-index: 3;}
.g-container .g-student .module.profile > .header .h-left{ float: left;     margin: 10px; }
.g-container .g-student .module.profile > .header .h-left h3{ display: inline; }
.g-container .g-student .module.profile > .header .h-center{ 
    color: #ffd200;
    font-size: 30px;
    width: 160px;
    text-align: center;
    margin: 14px auto;
    float: left;
}
.g-container .g-student .module.profile > .header .h-right{ float: right; margin: 10px; }
.g-container .g-student .module.profile > .header .h-right .btn-notifications{
    display: inline-block;
    width: 50px; 
    height: 47px; 
    background: url(img/notifications.png); 
    background-size: cover; 
    cursor: pointer;  
}
.g-container .g-student .module.profile > .header .h-right .btn-notifications:hover{ opacity: .8; }
.g-container .g-student .module.profile > .header .h-right .btn-notifications span{ color: #fff; float: right; margin-top: 6px; text-align: center; width: 100%; margin-right: 3px; }
.g-container .g-student .module.profile > .header .h-right .btn-config{ 
    display: inline-block;
    width: 51px;
    height: 51px;
    background: url(img/bt-config.png) no-repeat;
    cursor: pointer;
    margin: 0px 5px -1px 15px;
}
.g-container .g-student .module.profile .modal .list .notify{ border-bottom: 1px solid #dedede; margin: 10px; padding: 10px; position: relative;}
.g-container .g-student .module.profile .modal .list .notify.empty{ 
    margin-top: 60px;
    color: #999;
}
.g-container .g-student .module.profile .modal .list .notify .points{ 
    position: absolute;
    width: 81px;
    height: 50px;
    background: url(img/teacher/bt-points.png);
    top: 5px;
    left: 5px;
    color: #fff;
    font-size: 35px;
    line-height: 45px;
}
.g-container .g-student .module.profile .modal .list .notify .points:before{ 
    content: '';
    width: 35px;
    height: 35px;
    background-image: url(img/gem.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 5px;
    right: 5px;
}
body.skin-magos .g-container .g-student .module.profile .modal .list .notify .points:before{ 
    background-image: url(img/points-magos.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
body.skin-exploradores .g-container .g-student .module.profile .modal .list .notify .points:before{ 
    background-image: url(img/points-exploradores.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
body.skin-colonizadores .g-container .g-student .module.profile .modal .list .notify .points:before{ 
    background-image: url(img/points-colonizadores.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
body.skin-sofubis .g-container .g-student .module.profile .modal .list .notify .points:before{ 
    background-image: url(img/points-sofubis.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
body.skin-titanes .g-container .g-student .module.profile .modal .list .notify .points:before{ 
    background-image: url(img/points-titanes.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
body.skin-guardianes .g-container .g-student .module.profile .modal .list .notify .points:before{ 
    background-image: url(img/points-guardianes.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.g-container .g-student .module.profile .modal .list .notify.without-points .points{ 
    display: none;
}
.g-container .g-student .module.profile .modal .list .notify .points span{ 
    position: absolute;
    top: 0px;
    left: 7px;
}
.g-container .g-student .module.profile .modal .list .notify .time{ 
    position: absolute;
    left: 100px;
    top: 5px;
    font-size: 20px;
    color: #999;
}
.g-container .g-student .module.profile .modal .list .notify .feedback{ 
    padding-left: 90px;
    padding-top: 24px;
}


.g-container .g-student .module.profile .modal .list .notify .avatar{
    position: absolute;
    top: -2px;
    left: 11px;
    background: url(img/groups/group_01.png);
    background-size: cover;
    width: 63px;
    height: 67px;
    z-index: 2;
    cursor: pointer;
}
.g-container .g-student .module.profile .modal .list .notify .avatar.a1{background: url(img/groups/group_01.png);background-size: cover; }
.g-container .g-student .module.profile .modal .list .notify .avatar.a2{background: url(img/groups/group_02.png);background-size: cover; }
.g-container .g-student .module.profile .modal .list .notify .avatar.a3{background: url(img/groups/group_03.png); background-size: cover;}
.g-container .g-student .module.profile .modal .list .notify .avatar.a4{background: url(img/groups/group_04.png); background-size: cover;}
.g-container .g-student .module.profile .modal .list .notify .avatar.a5{background: url(img/groups/group_05.png); background-size: cover;}
.g-container .g-student .module.profile .modal .list .notify .avatar.a6{background: url(img/groups/group_06.png); background-size: cover;}
.g-container .g-student .module.profile .modal .list .notify .avatar.a7{background: url(img/groups/group_07.png); background-size: cover;}
.g-container .g-student .module.profile .modal .list .notify .avatar.a8{background: url(img/groups/group_08.png); background-size: cover;}
.g-container .g-student .module.profile .modal .list .notify .avatar.a9{background: url(img/groups/group_09.png); background-size: cover;}
.g-container .g-student .module.profile .modal .list .notify .avatar.a10{background: url(img/groups/group_10.png); background-size: cover;}
.g-container .g-student .module.profile .modal .list .notify .avatar.a11{background: url(img/groups/group_11.png);background-size: cover; }
.g-container .g-student .module.profile .modal .list .notify .avatar.a12{background: url(img/groups/group_12.png); background-size: cover;}
.g-container .g-student .module.profile .modal .list .notify .avatar.a13{background: url(img/groups/group_13.png); background-size: cover;}
.g-container .g-student .module.profile .modal .list .notify .avatar.a14{background: url(img/groups/group_14.png);background-size: cover; }
.g-container .g-student .module.profile .modal .list .notify .avatar.a15{background: url(img/groups/group_15.png);background-size: cover; }
.g-container .g-student .module.profile .modal .list .notify .avatar.a16{background: url(img/groups/group_16.png);background-size: cover; }



.g-container .g-student .module.profile .modal .g-btn-close{ position: absolute; top: 5px; right: 5px; z-index: 3; }
.g-container .g-student .module.profile .modal.notifications { height: 400px; top: 50%; margin-top: -200px; }
.g-container .g-student .module.profile .modal.notifications .list{ position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; overflow-x: hidden; overflow-y: auto; }
.g-container .g-student .module.profile .g-container { 

}
.g-container .g-student .module.profile .modal.avatar { height: 580px; top: 50%; margin-top: -290px; width: 460px; margin-left: -230px;}
.g-container .g-student .module.profile .modal.avatar .header .section{ 
    background: #078a96;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #FFF;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-left: 20px;
    letter-spacing: 1px;
}
.g-container .g-student .module.profile .modal.avatar .avatar { 
    position: relative;
}
.g-container .g-student .module.profile .modal.avatar canvas{ 
    position: absolute;
    top: 0; left: 0px;
    visibility: hidden;
}
.g-container .g-student .module.profile .modal.avatar .avatar .layers{ 
    width: 350px;
    height: 500px;
    top: -39px;
    left: 53px;
    position: relative;
}
.g-container .g-student .module.profile .modal.avatar .avatar .layers .layer{ 
    width: 350px;
    height: 500px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cuerpo{ 
    background: url(img/avatar/duendes/cuerpo.png);
    z-index: 1;
}
.g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cabeza{ 
    background: url(img/avatar/duendes/cabeza.png);
    z-index: 3;
}
body.skin-magos .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cuerpo{ 
    background: url(img/avatar/magos/cuerpo.png);
    z-index: 1;
}
body.skin-magos .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cabeza{ 
    background: url(img/avatar/duendes/cabeza.png);
    z-index: 3;
}
body.skin-exploradores .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cuerpo{ 
    background: url(img/avatar/exploradores/cuerpo.png);
    z-index: 1;
}
body.skin-exploradores .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cabeza{ 
    background: url(img/avatar/exploradores/cabeza.png);
    z-index: 3;
}
body.skin-colonizadores .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cuerpo{ 
    background: url(img/avatar/colonizadores/cuerpo.png);
    z-index: 1;
}
body.skin-sofubis .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cuerpo{ 
    background: url(img/avatar/sofubis/cuerpo.png);
    z-index: 1;
}
body.skin-colonizadores .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cabeza{ 
    background: url(img/avatar/colonizadores/cabeza.png);
    z-index: 3;
}
body.skin-sofubis .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cabeza{ 
    background: url(img/avatar/sofubis/cabeza.png);
    z-index: 3;
}
.g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.ropa{ 
    background: url(img/avatar/duendes/ropa1.png);
    z-index: 2;
}
.g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.boca{ 
    background: url(img/avatar/duendes/boca1.png);
    z-index: 4;
}
.g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.ojos{ 
    background: url(img/avatar/duendes/ojos1.png);
    z-index: 6;
}
.g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.pelo{ 
    background: url(img/avatar/duendes/pelo1.png);
    z-index: 5;
}

body.skin-magos .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cuerpo{ 
    background: url(img/avatar/magos/cuerpo.png);
    z-index: 1;
}
body.skin-magos .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cabeza{ 
    background: url(img/avatar/magos/cabeza.png);
    z-index: 3;
}
body.skin-magos .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.ropa{ 
    background: url(img/avatar/magos/ropa1.png);
    z-index: 2;
}
body.skin-magos .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.boca{ 
    background: url(img/avatar/magos/boca1.png);
    z-index: 4;
}
body.skin-magos .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.ojos{ 
    background: url(img/avatar/magos/ojos1.png);
    z-index: 6;
}
body.skin-magos .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.pelo{ 
    background: url(img/avatar/magos/pelo1.png);
    z-index: 5;
}

body.skin-titanes .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cuerpo{ 
    background: url(img/avatar/titanes/cuerpo.png);
    z-index: 1;
}
body.skin-titanes .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cabeza{ 
    background: url(img/avatar/titanes/cabeza.png);
    z-index: 3;
}
body.skin-titanes .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.ropa{ 
    background: url(img/avatar/titanes/ropa1.png);
    z-index: 2;
}
body.skin-titanes .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.boca{ 
    background: url(img/avatar/titanes/boca1.png);
    z-index: 4;
}
body.skin-titanes .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.ojos{ 
    background: url(img/avatar/titanes/ojos1.png);
    z-index: 6;
}
body.skin-titanes .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.pelo{ 
    background: url(img/avatar/titanes/pelo1.png);
    z-index: 5;
}

body.skin-guardianes .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cuerpo{ 
    background: url(img/avatar/guardianes/cuerpo.png);
    z-index: 1;
}
body.skin-guardianes .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.cabeza{ 
    background: url(img/avatar/guardianes/cabeza.png);
    z-index: 3;
}
body.skin-guardianes .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.ropa{ 
    background: url(img/avatar/guardianes/ropa1.png);
    z-index: 2;
}
body.skin-guardianes .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.boca{ 
    background: url(img/avatar/guardianes/boca1.png);
    z-index: 4;
}
body.skin-guardianes .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.ojos{ 
    background: url(img/avatar/guardianes/ojos1.png);
    z-index: 6;
}
body.skin-titanes .g-container .g-student .module.profile .modal.avatar .avatar .layers .layer.pelo{ 
    background: url(img/avatar/titanes/pelo1.png);
    z-index: 5;
}

.g-container .g-student .module.profile .modal.avatar .avatar .bt-buy{ 
    position: absolute;
    top: 464px;
    left: 162px;
    cursor: pointer;
    background: #119520;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    border-radius: 10px;
    border: 3px solid #ffd200;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    width: 120px;
    text-align: center;
    box-sizing: border-box; 
    padding-right: 44px;
}
.g-container .g-student .module.profile .modal.avatar .avatar .bt-buy.no-money{ 
    background: #999999;
    border: 3px solid #DEDEDE;
}
.g-container .g-student .module.profile .modal.avatar .avatar .bt-buy .icon{
    position: absolute;
    width: 37px;
    height: 34px;
    background: url(img/points.png);
    background-size: cover;
    top: 2px;
    right: 10px;
}
.g-container .g-student .module.profile .modal.avatar .avatar .combo-icon{ 
    position: absolute;
    top: 404px;
    left: -8px;
    color: #FFF;
    width: 160px;
    height: 123px;
    background: url(img/combo.png);
    text-align: center;
    box-sizing: border-box;
    font-size: 35px;
    line-height: 110px;
    color: yellow;
}
.g-container .g-student .module.profile .modal.avatar .avatar .combo-icon span{ 
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: rotate(-13deg);
    -moz-transform: rotate(-13deg);
    -ms-transform: rotate(-13deg);
    -o-transform: rotate(-13deg);
}
.g-container .g-student .module.profile .modal.avatar .avatar .bt-save{ 
    position: absolute;
    top: 464px;
    left: 162px;
    cursor: pointer;
    background: #119520;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    border-radius: 10px;
    border: 3px solid #ffd200;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    width: 110px;
    text-align: center;
}
.g-container .g-student .module.profile .modal.avatar .avatar .buttons .arrow{ 
    width: 60px;
    height: 61px;
    background: url(img/bt-next.png);
    position: absolute;
    top: 100px;
    z-index: 10;
}
.g-container .g-student .module.profile .modal.avatar .avatar .buttons .arrow.left{ 
    background: url(img/bt-prev.png);
    left: 10px;
}
.g-container .g-student .module.profile .modal.avatar .avatar .buttons .arrow.right{ 
    left: 391px;
}
.g-container .g-student .module.profile .modal.avatar .avatar .buttons .arrow.pelo{ 
    top: 100px;
}
.g-container .g-student .module.profile .modal.avatar .avatar .buttons .arrow.ojos{ 
    top: 180px;
}
.g-container .g-student .module.profile .modal.avatar .avatar .buttons .arrow.boca{ 
    top: 260px;
}
.g-container .g-student .module.profile .modal.avatar .avatar .buttons .arrow.ropa{ 
    top: 350px;
}

/* PROFILE MODAL CONFIG */
.user-profile-config .modal-bg.config { 
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    background: #000;
    opacity: .5;
}
.user-profile-config .modal.config { 
    display: none;
    position: fixed;
    top: 10px;
    left: 50%;
    z-index: 5;
    background: #FFF;
    border: 3px solid #ffd200;
    border-radius: 10px;
    width: 500px;
    height: 400px;
    margin-left: -250px;
    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    height: 500px; top: 50%; margin-top: -250px; width: 460px; margin-left: -230px;
}
.user-profile-config .modal.config.teacher { 
    height: 550px;
    margin-top: -275px;
}
.user-profile-config .modal.config .header .section {
    background: #078a96;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #FFF;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-left: 20px;
    letter-spacing: 1px;
    font-family: dimbo;
    font-size: 24px;
    text-shadow: 2px 2px 0px rgb(49, 41, 41);
}
.user-profile-config .modal.config .g-btn-close {
    width: 50px;
    height: 50px;
    background: url(img/btn-close.png);
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 3;
}

.user-profile-config .modal.config .config-list{
    padding:  20px;
    box-sizing:  border-box;
    padding-top: 15px;
}
.user-profile-config .modal.config .config-list .wrap-config-music{
    float:  left;
    width: 50%;
}
.user-profile-config .modal.config .config-list .wrap-config-music span{
    font-family: 'dimbo',sans-serif;
    font-size: 22px;
    color: #383838;
    padding-bottom:  10px;
}
.user-profile-config .modal.config .config-list .wrap-config-music > div{
    margin: 10px 0px 15px 0px;
}
.user-profile-config .modal.config .config-list .wrap-config-music-vol{
    float:  right;
    width: 50%;
    text-align: right;
}
.user-profile-config .modal.config .config-list .wrap-config-music-vol span{
    font-family: 'dimbo',sans-serif;
    font-size: 22px;
    color: #383838;
}
.user-profile-config .modal.config .config-list .wrap-config-music-vol > div{
    margin: 10px 3px 15px 0px;
    float: right;
}
.user-profile-config .modal.config .config-list .wrap-config-music-fx{
    float:  left;
    width: 50%;
    margin-top: 10px;
}
.user-profile-config .modal.config .config-list .wrap-config-music-fx span{
    font-family: 'dimbo',sans-serif;
    font-size: 22px;
    color: #383838;
}
.user-profile-config .modal.config .config-list .wrap-config-music-fx > div{
    margin: 10px 0px 15px 0px;
}
.user-profile-config .modal.config .config-list .wrap-config-music-vol-fx{
    float: right;
    width: 50%;
    text-align:  right;
    margin-top: 10px;
}
.user-profile-config .modal.config .config-list .wrap-config-music-vol-fx span{
    font-family: 'dimbo',sans-serif;
    font-size: 22px;
    color: #383838;
}
.user-profile-config .modal.config .config-list .wrap-config-music-vol-fx > div{
    margin: 10px 3px 15px 0px;
    float: right;
}
.user-profile-config .modal.config .config-list h3{
    margin: 0;
    padding: 10px 0px 2px 0px;
    font-family: 'dimbo',sans-serif;
    font-size: 22px;
    color: #383838;
    overflow: auto;
    width:  100%;
    text-align:  left;
    font-weight: normal;
    border-bottom: 2px solid #d5d5d5;
}
.user-profile-config .modal.config .config-list .notification-text{
    margin-top: 20px;
    color: #707070;
    font-family: 'YanoneKaffeesatz_Bold', sans-serif;
    font-size: 24px;
}
.user-profile-config .modal.config .config-list #event_feedback{
    float: right;
}
.user-profile-config .modal.config .config-list #event_coffer{
    float: right;
}
.user-profile-config .modal.config .config-list .bt-save-config{
    margin: 35px auto 0px;
    color: #078a96;
    border: 4px solid #0aadbc;
    text-align: center;
    padding: 5px 0px;
    border-radius: 10px;
    width: 145px;
    cursor: pointer;
    font-family: dimbo;
    font-size: 24px;
}
.user-profile-config .modal.config .config-list .bt-reset-config{
    float: right;
    background: #d04646;
    text-align: center;
    padding: 9px 0px;
    border-radius: 10px;
    width: 145px;
    cursor: pointer;
    font-family: dimbo;
    font-size: 20px;
    color: #FFF;
}



/* SLIDE VOLUME */
.slide-volume {
    position: relative;
    height: 27px;
    width: 135px;
    background: url(img/elements/slide-volume/all.png) no-repeat;
}
.slide-volume .ui-slider-range-min {
    height: 27px;
    width: 100%;
    position: absolute;
    background: url(img/elements/slide-volume/active.png) no-repeat;
    border: none;
    outline: none;
}
.slide-volume .ui-slider-handle {
    position: absolute;
    margin-left: -9px;
    margin-top: -3px;
    cursor: pointer;
    outline: none;
    -ms-touch-action: none;
    touch-action: none;
    background: url(img/elements/slide-volume/arrow.png) no-repeat;
    width: 19px;
    height: 35px;
    z-index: 1;
}
.slide-volume-boolean {
    position: relative;
    height: 25px;
    width: 55px;
    background: #757575;
    border-radius: 25px;
    -webkit-box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.5);
    box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.5);
    cursor: pointer;
}
.slide-volume-boolean .ui-slider-range-min {
    height: 25px;
    width: 100%;
    position: absolute;
    background: #00d9ed;
    border: none;
    outline: none;
    border-radius: 25px;
    -webkit-box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.5);
    box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.5);
    cursor: pointer;
}
.slide-volume-boolean .ui-slider-handle {
    position: absolute;
    cursor: pointer;
    outline: none;
    -ms-touch-action: none;
    touch-action: none;
    background: url(img/elements/slide-volume/circle.png) no-repeat;
    width: 31px;
    height: 31px;
    z-index: 1;
    margin: -2px 0px 0px -27px;
}

.slide-volume-boolean .ui-slider-handle[style="left: 0%;"]{
    margin-left: -3px;
}
/* END SLIDE VOLUME */



/* END PROFILE MODAL CONFIG */

/* PROFILE MODAL GROUP STUDENTS */
.g-container .g-student .module.profile .modal.group-students { 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    width: auto;
    height: auto;
    border: none;
    background: none;
    margin: 0;
    overflow-y: auto;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.g-container .g-student .module.profile .modal.group-students .header .section{ 
    background: url(img/bg-header_map.png) repeat-x;
    color: #FFF;
    height: 90px;
    line-height: 60px;
    box-sizing: border-box;
    padding-left: 80px;
    letter-spacing: 1px;
    background-size: contain;
}

.g-container .g-student .module.profile .modal.group-students .header .avatar { 
    position: absolute;
    top: 5px;
    left: 10px;
    background: url(img/groups/group_01.png);
    background-size: cover;
    width: 49px;
    height: 50px;
    z-index: 2;
}
.g-container .g-student .module.profile .modal.group-students .header .avatar.a1{background: url(img/groups/group_01.png);background-size: cover; }
.g-container .g-student .module.profile .modal.group-students .header .avatar.a2{background: url(img/groups/group_02.png);background-size: cover; }
.g-container .g-student .module.profile .modal.group-students .header  .avatar.a3{background: url(img/groups/group_03.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .header  .avatar.a4{background: url(img/groups/group_04.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .header  .avatar.a5{background: url(img/groups/group_05.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .header  .avatar.a6{background: url(img/groups/group_06.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .header  .avatar.a7{background: url(img/groups/group_07.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .header  .avatar.a8{background: url(img/groups/group_08.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .header  .avatar.a9{background: url(img/groups/group_09.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .header  .avatar.a10{background: url(img/groups/group_10.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .header  .avatar.a11{background: url(img/groups/group_11.png);background-size: cover; }
.g-container .g-student .module.profile .modal.group-students .header  .avatar.a12{background: url(img/groups/group_12.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .header  .avatar.a13{background: url(img/groups/group_13.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .header  .avatar.a14{background: url(img/groups/group_14.png);background-size: cover; }
.g-container .g-student .module.profile .modal.group-students .header  .avatar.a15{background: url(img/groups/group_15.png);background-size: cover; }
.g-container .g-student .module.profile .modal.group-students .header  .avatar.a16{background: url(img/groups/group_16.png);background-size: cover; }

.g-container .g-student .module.profile .modal.group-students .group-students-list{ 
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

.g-container .g-student .module.profile .modal.group-students .g-card { 
    display: inline-block;
    width: 171px;
    height: 236px;
    background: url(img/group-student/pergamino.png);
    position: relative;
    margin-left: 1%;
    margin-bottom: 2%;
    margin-right: 1%;
    background-size: contain;
}

.g-container .g-student .module.profile .modal.group-students .g-card .level{ 
    color: #FFF;
    position: absolute;
    top: 192px;
    left: 13px;
    padding: 1px 15px;
    border-radius: 20px;
    font-family: 'dimbo', sans-serif;
    font-size: 21px;
    box-sizing: border-box;
    padding-left: 50px;
    width: 77px;
    z-index: 3;
    width: 130px;
    background: #093c3e;
    border-radius: 40px;
    height: 32px;
    width: 71px;
    z-index: 2;
}
.g-container .g-student .module.profile .modal.group-students .g-card .level .icon{ 
    width: 27px;
    height: 39px;
    background: url(img/pergamino.png);
    background-size: cover;
    position: absolute;
    top: -7px;
    left: 3px;
    z-index: 2;
}
.g-container .g-student .module.profile .modal.group-students .g-card .level .value{ 
    font-size: 24px;
    position: absolute;
    top: 0px;
    left: 28px;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    z-index: 1;
}
.g-container .g-student .module.profile .modal.group-students .g-card .avatar{ 
    position: absolute;
    top: -22px;
    left: 26px;
    z-index: 2;
}
.g-container .g-student .module.profile .modal.group-students .g-card .avatar-base{ 
    width: 140px;
    height: 120px;
    background: url(img/background-themes/gnomo/base_avatar1.png);
    background-size: cover;
    position: absolute;
    bottom: 60px;
    left: 16px;
    z-index: 1;
}

.g-container .g-student .module.profile .modal.group-students .g-card .avatar  .avatar-image{ 
    background-size: cover;
    width: 121px;
    height: 170px;
    background-position-y: -3px;
    background-repeat: no-repeat;
    z-index: 6;
    top: 0px;
    left: 0px;
    position: absolute;
}

.g-container .g-student .module.profile .modal.group-students .g-card .name{ 
    position: absolute;
    top: 150px;
    left: 10px;
    right: 10px;
    text-align: center;
    font-family: 'dimbo', sans-serif;
    font-size: 21px;
    color: #FFF;
    line-height: 20px;
    height: 21px;
    text-overflow: ellipsis;
    overflow: hidden;
    text-shadow: 2px 2px 5px rgba(33, 26, 45, 1);
    z-index: 2;
}
.g-container .g-student .module.profile .modal.group-students .g-card .teacher{ 
    position: absolute;
    top: 15px;
    left: -7px;
    right: 10px;
    text-align: center;
    cursor: pointer;
    font-family: 'dimbo', sans-serif;
    font-size: 21px;
    color: yellow;
    width: 181px;
    height: 48px;
    background: url(img/group-student/fondo.png);
    background-size: cover;
    line-height: 38px;
}
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .name{ 
    top: 170px;
}
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar{ 

}

.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar { 
    position: absolute;
    top: 84px;
    left: 46px;
    background: url(img/groups/group_01.png);
    background-size: cover;
    width: 77px;
    height: 77px;
    z-index: 2;
}
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a1{background: url(img/groups/group_01.png);background-size: cover; }
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a2{background: url(img/groups/group_02.png);background-size: cover; }
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a3{background: url(img/groups/group_03.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a4{background: url(img/groups/group_04.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a5{background: url(img/groups/group_05.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a6{background: url(img/groups/group_06.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a7{background: url(img/groups/group_07.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a8{background: url(img/groups/group_08.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a9{background: url(img/groups/group_09.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a10{background: url(img/groups/group_10.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a11{background: url(img/groups/group_11.png);background-size: cover; }
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a12{background: url(img/groups/group_12.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a13{background: url(img/groups/group_13.png); background-size: cover;}
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a14{background: url(img/groups/group_14.png);background-size: cover; }
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a15{background: url(img/groups/group_15.png);background-size: cover; }
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar.a16{background: url(img/groups/group_16.png);background-size: cover; }

.g-container .g-student .module.profile .modal.group-students .g-card.teacher .avatar-bg { 
    position: absolute;
    top: 70px;
    left: 16px;
    background: url(img/teacher/bg-group.png);
    background-size: cover;
    width: 136px;
    height: 92px;
}

.g-container .g-student .module.profile .modal.group-students .g-card .status{ 
    position: absolute;
    top: 169px;
    left: 10px;
    right: 10px;
    text-align: center;
    cursor: pointer;
    font-family: 'dimbo', sans-serif;
    font-size: 19px;
    color: #1f9624;
}
.g-container .g-student .module.profile .modal.group-students .g-card.teacher .status{ 
    top: 189px;
}
.g-container .g-student .module.profile .modal.group-students .g-card .points{ 
    width: 70px;
    height: 40px;
    position: absolute;
    top: 192px;
    right: 13px;
    display: inline-block;
    width: 130px;
    background: #093c3e;
    border-radius: 40px;
    height: 32px;
    width: 71px;
    z-index: 2;
}
.g-container .g-student .module.profile .modal.group-students .g-card .points .icon{ 
    position: absolute;
    top: 0px;
    right: 0px;
    width: 35px;
    height: 32px;
    background: url(img/points.png);
    background-size: cover;
}
.g-container .g-student .module.profile .modal.group-students .g-card .points .label{ 
    color: #FFF;
    font-size: 24px;
    position: absolute;
    left: 0;
    top: 0;
    width: 31px;
    text-align: right;
}
.g-container .g-student .module.profile .modal.group-students .g-card .know{ 
    color: #FFF;
    font-size: 30px;
    position: absolute;
    top: 117px;
    left: 15px;
    font-size: 35px;
}
.g-container .g-student .module.profile .modal.group-students .g-card .know span{ 
    font-size: 20px;
}
/* END PROFILE MODAL GROUP STUDENTS */

/* PROFILE MODAL HISTORY */
.g-container .g-student .module.profile .modal.history { height: 500px; top: 50%; margin-top: -250px; width: 460px; margin-left: -230px;}

.g-container .g-student .module.profile .modal.history .header .section{ 
    background: #078a96;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #FFF;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-left: 20px;
    letter-spacing: 1px;
}
.g-container .g-student .module.profile .modal.history .history-list { 
    position: absolute;
    top: 70px;
    left: 0;
    right: 8px;
    bottom: 10px;
    overflow-y: auto;
}
.g-container .g-student .module.profile .modal.history .history-list .g-card { 
    position: relative;
    height: 120px;
    border-bottom: 2px solid #DEDEDE;
    margin-left: 10px;
    margin-right: 10px;
}
.g-container .g-student .module.profile .modal.history .history-list .g-card.empty { 
    color: #9999;
    margin-top: 70px;
    text-align: center;
}
.g-container .g-student .module.profile .modal.history .history-list .g-card .icon{ 
    width: 154px;
    height: 98px;
    background: url(img/stages/grass/p_grass.png);
    position: absolute;
    top: 10px;
    left: 0;
    text-align: center;
    font-size: 50px;
    line-height: 80px;
    color: #FFF;
    box-sizing: border-box;
    padding-right: 5px;
}
.g-container .g-student .module.profile .modal.history .history-list .g-card .unit-mission{ 
    position: absolute;
    top: 20px; 
    left: 160px;
    font-size: 24px;
    color: #078a96;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.g-container .g-student .module.profile .modal.history .history-list .g-card .unit-name{ 
    position: absolute;
    top: 50px;
    left: 160px;
    font-size: 24px;
    color: #333;
    text-overflow: ellipsis;
    overflow: hidden;
    right: 10px;
    height: 63px;
}
/* END PROFILE MODAL HISTORY */

.g-container .g-student .module.profile .g-container .my-profile {     
    color: #ffd200;
    font-size: 30px;
    width: 160px;
    text-align: center;
    margin: 14px auto;
}
.g-container .g-student .module.profile .g-container .user {     
    height: 400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.g-container .g-student .module.profile .g-container .user .avatar{ 
    width: 182px;
    height: 350px;
    background: url(img/student/profile/dummie.png);
    background-size: cover;
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -109px;
    z-index: 2;
}
.g-container .g-student .module.profile .g-container .user .avatar.with-avatar{ 
    background-size: contain;
    background-repeat: no-repeat;
    width: 260px;
    height: 370px;
    top: 65px;
    margin-left: -150px;
}
.g-container .g-student .module.profile .g-container .user .avatar span{ 
    position: absolute;
    bottom: -25px;
    left: 0;
    right: -10px;
    text-align: center;
    color: #FFF;
}
.g-container .g-student .module.profile .g-container .user .name{ 
    font-size: 30px;
    color: #fff;
    border-bottom: 3px solid #ffd200;
    position: absolute;
    left: 50%;
    width: 520px;
    z-index: 2;
    margin-left: -260px;
    text-align: center;
    margin-top: 15px;
}
.g-container .g-student .module.profile .g-container .user .level{ 
    display: inline-block;
    width: 130px;
    background: #093c3e;
    border-radius: 40px;
    height: 40px;
    position: absolute;
    right: 50%;
    top: 80px;
    z-index: 2;
    margin-right: 150px;
}
.g-container .g-student .module.profile .g-container .user .level .label{ 
    position: absolute;
    top: -2px;
    right: 10px;
    color: #fff;
    font-size: 38px;
    left: 60px;
    text-align: center;
}
.g-container .g-student .module.profile .g-container .user .level .number { 
    width: 49px;
    height: 68px;
    background: url(img/pergamino.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: -12px;
    left: 11px;
}
.g-container .g-student .module.profile .g-container .user .progress{ 
    width: 100px;
    height: 100px;
    margin: 30px;
    position: absolute;
    top: 118px;
    left: 50%;
    z-index: 2;
    margin-left: -270px;
}

.g-container .g-student .module.profile .g-container .user .progress .tooltip { 
    display:none;
}
.g-container .g-student .module.profile .g-container .user .progress .tooltip .arrow{ 
    color: #FFF;
    text-align: center;
    position: absolute;
    top: 131px;
    left: -45px;
    z-index: 2;
    width: 200px;
    cursor: pointer;
}
.g-container .g-student .module.profile .g-container .user .progress .tooltip .percent{
    color: #FFF;
    font-size: 30px;
    position: absolute;
    top: 36px;
    left: 35px;
}
.g-container .g-student .module.profile .g-container .user .progress .tooltip .arrow-tooltip {
    position: relative;
    background: #256669;
    border: 3px solid #24ebe9;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px
}
.g-container .g-student .module.profile .g-container .user .progress .tooltip .arrow-tooltip:after, 
.g-container .g-student .module.profile .g-container .user .progress .tooltip .arrow-tooltip:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.g-container .g-student .module.profile .g-container .user .progress .tooltip .arrow-tooltip:after {
    border-color: rgba(9, 60, 62, 0);
    border-bottom-color: #256669;
    border-width: 10px;
    margin-left: -10px;
}
.g-container .g-student .module.profile .g-container .user .progress .tooltip .arrow-tooltip:before {
    border-color: rgba(36, 235, 233, 0);
    border-bottom-color: #24ebe9;
    border-width: 14px;
    margin-left: -14px;
}

.g-container .g-student .module.profile .g-container .user .cards{ 
    position: absolute;
    width: 128px;
    background: #093c3e;
    border-radius: 40px;
    height: 41px;
    top: 160px;
    right: 50%;
    z-index: 2;
    margin-right: -230px;
}
.g-container .g-student .module.profile .g-container .user .cards .icon{ 
    width: 51px;
    height: 50px;
    background: url(img/cards.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: -4px;
    left: 4px;
}
.g-container .g-student .module.profile .g-container .user .cards .label{ 
    position: absolute;
    top: -1px;
    right: 5px;
    color: #fff;
    font-size: 38px;
    left: 50px;
    text-align: center;
}
.g-container .g-student .module.profile .g-container .user .progress .container { 
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    width: 107px;
    height: 108px;
}
.g-container .g-student .module.profile .g-container .user .progress .container .progressbar-text{ color: #FFF !important; font-size: 30px;  }
.g-container .g-student .module.profile .g-container .user .progress .bg { 
    background: url(img/student/profile/bg-progress.png);
    width: 119px;
    height: 117px;
    background-size: cover;
    position: absolute;
    top: -4px;
    left: -5px;
    z-index: 1;
}

.g-container .g-student .module.profile .g-container .user .points {
    display: inline-block;
    cursor: pointer;
    width: 130px;
    background: #093c3e;
    border-radius: 40px;
    height: 40px;
    position: absolute;
    right: 50%;
    top: 80px;
    z-index: 2;
    margin-right: -231px;
}
.g-container .g-student .module.profile .g-container .user .points:hover {opacity: .8;}
.g-container .g-student .module.profile .g-container .user .points .icon { 
    width: 53px;
    height: 52px;
    background: url(img/points.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: -7px;
    left: 1px;
}
body.skin-magos .g-container .g-student .module.profile .g-container .user .points .icon { 
    height: 53px;
    background: url(img/points-magos.png) no-repeat;
    background-size: cover;
}
body.skin-exploradores .g-container .g-student .module.profile .g-container .user .points .icon { 
    height: 53px;
    background: url(img/points-exploradores.png) no-repeat;
    background-size: cover;
}
body.skin-colonizadores .g-container .g-student .module.profile .g-container .user .points .icon { 
    height: 53px;
    background: url(img/points-colonizadores.png) no-repeat;
    background-size: cover;
}
body.skin-sofubis .g-container .g-student .module.profile .g-container .user .points .icon { 
    height: 53px;
    background: url(img/points-sofubis.png) no-repeat;
    background-size: cover;
}
body.skin-sofubis .g-container .g-student .module.profile .g-container .user .points .icon { 
    height: 53px;
    background: url(img/points-sofubis.png) no-repeat;
    background-size: cover;
}
body.skin-titanes .g-container .g-student .module.profile .g-container .user .points .icon { 
    height: 53px;
    background: url(img/points-titanes.png) no-repeat;
    background-size: cover;
}
body.skin-guardianes .g-container .g-student .module.profile .g-container .user .points .icon { 
    height: 53px;
    background: url(img/points-guardianes.png) no-repeat;
    background-size: cover;
}
.g-container .g-student .module.profile .g-container .user .points .number { 
    position: absolute;
    top: -2px;
    right: 11px;
    color: #fff;
    font-size: 38px;
    left: 58px;
    text-align: center;
}
.g-container .g-student .module.profile .g-container .user .left-icon{ 
    position: absolute;
    width: 393px;
    height: 497px;
    background: url(img/student/profile/leftbg.png);
    top: -64px;
    left: 0px;
    z-index: 1;
}

.g-container .g-student .module.profile .g-container .user .right-icon{ 
    position: absolute;
    width: 184px;
    height: 552px;
    background: url(img/student/profile/rightbg.png);
    top: -66px;
    right: 0px;
    z-index: 1;
}
.g-container .g-student .module.profile .g-container .user .bush{ 
    width: 761px;
    height: 205px;
    background: url(img/student/profile/bush.png);
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -377px;
    z-index: 0;
}
.g-container .g-student .module.profile .g-container .user .base-avatar{ 
    width: 462px;
    height: 397px;
    background: url(img/background-themes/gnomo/base_avatar1.png);
    position: absolute;
    bottom: -130px;
    left: 50%;
    margin-left: -248px;
    z-index: 1;
}
body.skin-magos .g-container .g-student .module.profile .g-container .user .base-avatar{ 
    width: 332px;
    height: 357px;
    background: url(img/background-themes/magos/base_avatar.png);
    bottom: -118px;
    margin-left: -186px;
}
body.skin-exploradores .g-container .g-student .module.profile .g-container .user .base-avatar{ 
    width: 326px;
    height: 345px;
    background: url(img/background-themes/exploradores/base_avatar.png);
    bottom: -120px;
    margin-left: -186px;
}
body.skin-colonizadores .g-container .g-student .module.profile .g-container .user .base-avatar{ 
    width: 321px;
    height: 374px;
    background: url(img/background-themes/colonizadores/base_avatar.png);
    bottom: -105px;
    margin-left: -166px;
}
body.skin-sofubis .g-container .g-student .module.profile .g-container .user .base-avatar{ 
    width: 321px;
    height: 374px;
    background: url(img/background-themes/sofubis/base_avatar.png);
    bottom: -105px;
    margin-left: -166px;
}
body.skin-titanes .g-container .g-student .module.profile .g-container .user .base-avatar{ 
    width: 332px;
    height: 357px;
    background: url(img/background-themes/titanes/base_avatar.png);
    bottom: -123px;
    margin-left: -183px;
}
body.skin-guardianes .g-container .g-student .module.profile .g-container .user .base-avatar{ 
    width: 237px;
    height: 288px;
    background: url(img/background-themes/guardianes/base_avatar.png);
    bottom: -83px;
    margin-left: -136px;
}

.g-container .g-student .module.profile .groups{ 
    text-align: center;
    padding-bottom: 50px;
    padding-top: 75px;
    z-index: 1;
    position: relative;
}
.g-container .g-student .module.profile .groups .g-card{ 
    display: inline-block;
    margin: 10px;
    padding: 10px;
    position: relative;
    width: 400px;
    height: 101px;
    border: 3px solid #8cc876;
    border-radius: 20px;
    background: #FFF;
    vertical-align: top;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
}

.g-container .g-student .module.profile .groups .g-card .avatar{ 
    position: absolute;
    top: 25px;
    left: 41px;
    background: url(img/groups/group_01.png);
    background-size: cover;
    width: 67px;
    height: 71px;
    z-index: 2;
    cursor: pointer;
}
.g-container .g-student .module.profile .groups .g-card .avatar.a1{background: url(img/groups/group_01.png);background-size: cover; }
.g-container .g-student .module.profile .groups .g-card .avatar.a2{background: url(img/groups/group_02.png);background-size: cover; }
.g-container .g-student .module.profile .groups .g-card .avatar.a3{background: url(img/groups/group_03.png); background-size: cover;}
.g-container .g-student .module.profile .groups .g-card .avatar.a4{background: url(img/groups/group_04.png); background-size: cover;}
.g-container .g-student .module.profile .groups .g-card .avatar.a5{background: url(img/groups/group_05.png); background-size: cover;}
.g-container .g-student .module.profile .groups .g-card .avatar.a6{background: url(img/groups/group_06.png); background-size: cover;}
.g-container .g-student .module.profile .groups .g-card .avatar.a7{background: url(img/groups/group_07.png); background-size: cover;}
.g-container .g-student .module.profile .groups .g-card .avatar.a8{background: url(img/groups/group_08.png); background-size: cover;}
.g-container .g-student .module.profile .groups .g-card .avatar.a9{background: url(img/groups/group_09.png); background-size: cover;}
.g-container .g-student .module.profile .groups .g-card .avatar.a10{background: url(img/groups/group_10.png); background-size: cover;}
.g-container .g-student .module.profile .groups .g-card .avatar.a11{background: url(img/groups/group_11.png);background-size: cover; }
.g-container .g-student .module.profile .groups .g-card .avatar.a12{background: url(img/groups/group_12.png); background-size: cover;}
.g-container .g-student .module.profile .groups .g-card .avatar.a13{background: url(img/groups/group_13.png); background-size: cover;}
.g-container .g-student .module.profile .groups .g-card .avatar.a14{background: url(img/groups/group_14.png);background-size: cover; }
.g-container .g-student .module.profile .groups .g-card .avatar.a15{background: url(img/groups/group_15.png);background-size: cover; }
.g-container .g-student .module.profile .groups .g-card .avatar.a16{background: url(img/groups/group_16.png);background-size: cover; }
.g-container .g-student .module.profile .groups .g-card .avatar-bg{
}

.g-container .g-student .module.profile .groups .g-card .avatar-bg{
    cursor: pointer;
    position: absolute;
    top: 5px;
    left: 10px;
    background: url(img/teacher/bg-group.png);
    width: 136px;
    height: 92px;
    z-index: 1;
}
.g-container .g-student .module.profile .groups .g-card.group .name{
    position: absolute;
    top: 5px;
    left: 165px;
    font-size: 35px;
    right: 35px;
    text-align: left;
    color: #008d91;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.g-container .g-student .module.profile .groups .g-card.group .bt-view-group{
    background: #00878b;
    position: absolute;
    bottom: 10px;
    right: 10px;
    box-sizing: border-box;
    padding: 6px 15px;
    border-radius: 10px;
    color: #FFF;
    cursor: pointer;
}
.g-container .g-student .module.profile .groups .g-card.group .amount-students{
    position: absolute;
    top: 43px;
    left: 164px;
    font-size: 25px;
    right: 15px;
    text-align: left;
    color: #888;
    cursor: pointer;
}
.g-container .g-student .module.profile .groups .g-card.group .code{
    position: absolute;
    top: 73px;
    left: 163px;
    color: #666;
}
.g-container .g-student .module.profile .groups .g-card.group .code span{
    background: #DEDEDE;
    border-radius: 10px;
    padding: 5px 20px;
    color: #000;
    margin-left: 15px;
}
.g-container .g-student .module.profile .groups .g-card.group .btn.unlink{
    cursor: pointer;
    border-radius: 5px;
    background: #00a493;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    position: absolute;
    bottom: 10px;
    left: 76px;
}
.g-container .g-student .module.profile .groups .g-card.group .btn-options{     position: absolute; cursor: pointer; right: 10px; top: 10px; background: url(img/options.png) center center no-repeat #fff; width: 30px; height: 30px; border-radius: 50%;     z-index: 2;}
.g-container .g-student .module.profile .groups .g-card.group .btn-options.active,
.g-container .g-student .module.profile .groups .g-card.group .btn-options:hover{
    background: url(img/options.png) center center no-repeat #CFCFCF; 
}
.g-container .g-student .module.profile .groups .g-card.link-group{ 
    display: inline-block;
    margin: 10px;
    padding: 10px;
    position: relative;
    width: 400px;
    height: 101px;
    border: 3px solid #8cc876;
    border-radius: 20px;
    background: #FFF;
    vertical-align: top;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
}
.g-container .g-student .module.profile .groups .g-card.link-group .title{ 
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 70px;
    right: 10px;
    color: #00a493;
}
.g-container .g-student .module.profile .groups .g-card.link-group input{ 
    font-family: 'dimbo', sans-serif;
    border: 0;
    color: #666666;
    font-size: 28px;
    display: block;
    border-bottom: solid #dcdcdc 2px;
    position: absolute;
    top: 63px;
    left: 152px;
}
.g-container .g-student .module.profile .groups .g-card.link-group .btn.create{ 
    position: absolute;
    top: 66px;
    left: 335px;
}

.g-container .g-student .module.profile .groups .g-card.link-group .avatar{ 
    background: url(img/teacher/group-add.png);
    background-size: cover;
}

.g-container .g-student .module.profile .arrow-box-group-container{
    display: block;
    margin: 0 auto;
    text-align: center;
    /*background: url(img/student/profile/bg_perfil.png);*/
    height: 100px;
}
.g-container .g-student .module.profile .arrow-box-group{
    position: relative;
    background: #bf1313;
    border: 3px solid #ffd200;
    color: #ffd200;
    width: 300px;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
}
.g-container .g-student .module.profile .arrow-box-group:after, 
.g-container .g-student .module.profile .arrow-box-group:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.g-container .g-student .module.profile .arrow-box-group:after {
    border-color: rgba(191, 19, 19, 0);
    border-bottom-color: #bf1313;
    border-width: 10px;
    margin-left: -10px;
}
.g-container .g-student .module.profile .arrow-box-group:before {
    border-color: rgba(255, 210, 0, 0);
    border-bottom-color: #ffd200;
    border-width: 14px;
    margin-left: -14px;
}
/* END student profile */


/* CARDS */
.g-container .g-cards { }
.g-container .g-cards .message { 
    color: #fff; 
    text-align: center; 
    margin-top: 90px;
}
.g-container .g-cards .header { 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 75px;
    z-index: 3;
    background: url(img/bg-header.png) repeat-x;
    background-size: contain;
}
.g-container .g-cards .header .h-right{ 
    position: absolute;
    top: 5px;
    right: 10px;
}
.g-container .g-cards .header .points{ 
    display: inline-block;
    width: 100px;
    background: #093c3e;
    border-radius: 40px;
    height: 35px;
    position: relative;
    margin: 12px 10px 0px 0px;
}
.g-container .g-cards .points .icon{ 
    width: 39px;
    height: 40px;
    background: url(img/points.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: -2px;
    left: 53px;
    cursor: pointer;
}
body.skin-magos .g-container .g-cards .points .icon{ 
    height: 39px;
    background: url(img/points-magos.png) no-repeat;
    background-size: cover;
}
body.skin-exploradores .g-container .g-cards .points .icon{ 
    height: 39px;
    background: url(img/points-exploradores.png) no-repeat;
    background-size: cover;
}
body.skin-colonizadores .g-container .g-cards .points .icon{ 
    height: 39px;
    background: url(img/points-colonizadores.png) no-repeat;
    background-size: cover;
}
body.skin-sofubis .g-container .g-cards .points .icon{ 
    height: 39px;
    background: url(img/points-sofubis.png) no-repeat;
    background-size: cover;
}
body.skin-titanes .g-container .g-cards .points .icon{ 
    height: 39px;
    background: url(img/points-titanes.png) no-repeat;
    background-size: cover;
}
body.skin-guardianes .g-container .g-cards .points .icon{ 
    height: 39px;
    background: url(img/points-guardianes.png) no-repeat;
    background-size: cover;
}
.g-container .g-cards .header .points .label{ 
    position: absolute;
    top: 1px;
    right: 47px;
    color: #fff;
    font-size: 30px;
    left: 10px;
    text-align: center;
}
.g-container .g-cards .header .cards{ 
    display: inline-block;
    width: 100px;
    background: #093c3e;
    border-radius: 40px;
    height: 35px;
    position: relative;
    margin: 12px 10px 0px 0px;
}
.g-container .g-cards .header .cards .icon{ 
    width: 48px;
    height: 45px;
    background: url(img/cards.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: -4px;
    left: 51px;
}
.g-container .g-cards .header .cards .label{ 
    position: absolute;
    top: 1px;
    right: 47px;
    color: #fff;
    font-size: 30px;
    left: 10px;
    text-align: center;
}
.g-container .g-cards .header .g-btn-back{ 
    width: 51px;
    top: 10px;
    left: 14px;
    position: absolute;
    height: 50px;
    z-index: 1;
}
.g-container .g-cards .list-cards { 
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
}
.g-container .g-cards .list-cards .g-card{ 
    width: 185px;
    height: 265px;
    display: inline-block;
    position: relative;

    margin: 20px 15px;
    padding: 0px;

    border: 3px solid #FFF;
    border-radius: 20px;
    background: #FFF;
    vertical-align: top;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
}
.g-container .g-cards .list-cards .g-card .inner-shadow{ 
    width: 185px;
    height: 265px;
    position: absolute;
    top: 0; left: 0;
    border-radius: 20px;
    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
}
.g-container .g-cards .list-cards .g-card .label{ 
    position: absolute;
    top: 190px;
    left: 5px;
    font-size: 26px;
    color: #333;
    text-align: center;
    width: 175px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}
.g-container .g-cards .list-cards .g-card .bt-buy{ 
    left: 38px;
    position: absolute;
    top: 235px;
    cursor: pointer;
    background: #119520;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    border-radius: 10px;
    border: 3px solid #ffd200;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    width: 90px;
    height: 30px;
}
.g-container .g-cards .list-cards .g-card .bt-buy span{ 
    position: absolute;
    left: 5px;
    top: 2px;
    right: 50px;
    font-size: 30px
}
.g-container .g-cards .list-cards .g-card .bt-buy .icon{ 
    position: absolute;
    top: 5px;
    left: 62px;
    width: 30px;
    height: 45px;
    background: url(img/points.png);
    background-repeat: no-repeat;
    background-size: contain;
}
body.skin-magos .g-container .g-cards .list-cards .g-card .bt-buy .icon{ 
    width: 40px;
    background: url(img/points-magos.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 40px;
    top: 0px;
}
body.skin-exploradores .g-container .g-cards .list-cards .g-card .bt-buy .icon{ 
    width: 40px;
    background: url(img/points-exploradores.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 40px;
    top: 0px;
}
body.skin-colonizadores .g-container .g-cards .list-cards .g-card .bt-buy .icon{ 
    width: 40px;
    background: url(img/points-colonizadores.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 40px;
    top: 0px;
}
body.skin-sofubis .g-container .g-cards .list-cards .g-card .bt-buy .icon{ 
    width: 40px;
    background: url(img/points-sofubis.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 40px;
    top: 0px;
}
body.skin-titanes .g-container .g-cards .list-cards .g-card .bt-buy .icon{ 
    width: 40px;
    background: url(img/points-titanes.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 40px;
    top: 0px;
}
body.skin-guardianes .g-container .g-cards .list-cards .g-card .bt-buy .icon{ 
    width: 40px;
    background: url(img/points-guardianes.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 40px;
    top: 0px;
}
.g-container .g-cards .list-cards .g-card.disabled .bt-buy{ 
    color: #DEDEDE;
    background: #999999;
    border: 3px solid #DEDEDE;
    cursor: default;
}
.g-container .g-cards .list-cards .g-card .amount{ 
    position: absolute;
    top: -10px;
    left: 138px;
    width: 46px;
    height: 53px;
    background: url(img/cards-2.png);
    color: #FFF;
    font-size: 35px;
    line-height: 50px;
    text-align: center;
    padding-left: 10px;
}
.g-container .g-cards .list-cards .g-card.wo-cards .amount{ 
    display: none;
}
.g-container .g-cards .list-cards .g-card .icon{ 
    position: absolute;
    top: 53px;
    left: 42px;
    width: 109px;
    height: 123px;
    background: url(img/cards/cromo_pasapal.png);
    z-index: 2;
    cursor: pointer;
}
.g-container .g-cards .list-cards .g-card .icon.copy{ 
    top: 64px;
    left: 51px;
    z-index: 1;
}
.g-container .g-cards .list-cards .g-card.disabled .icon{ 
}
.g-container .g-cards .list-cards .g-card.disabled.w-cards .icon{ 
    -webkit-filter: none;
    filter: none;
}
.g-container .g-cards .list-cards .g-card .icon.i2{ 
    background: url(img/cards/cromo_energia.png);
}
.g-container .g-cards .list-cards .g-card .icon.i3{ 
    background: url(img/cards/cromo_pista.png);
}
body.skin-sofubis .g-container .g-cards .list-cards .g-card .icon{ 
    background: url(img/cards/sofubis/cromo_pasapal.png);
}
body.skin-sofubis .g-container .g-cards .list-cards .g-card .icon.i2{ 
    background: url(img/cards/sofubis/cromo_energia.png);
}
body.skin-sofubis .g-container .g-cards .list-cards .g-card .icon.i3{ 
    background: url(img/cards/sofubis/cromo_pista.png);
}
.g-container .g-cards .list-cards .g-card .icon.i4{ 
    background: url(img/cards/cromo4.png);
}
.g-container .g-cards .list-cards .g-card .icon.i5{ 
    background: url(img/cards/cromo5.png);
}
.g-container .g-cards .list-cards .g-card .icon.i6{ 
    background: url(img/cards/cromo6.png);
}
.g-container .g-cards .list-cards .g-card .price{ 
    font-size: 36px;
    position: absolute;
    top: 3px;
    left: 10px;
    color: #4c4c4c;
}
.g-container .g-cards .list-cards .g-card.disabled .price{ 
    color: red;
}
.g-container .g-cards .list-cards .g-card .price-icon{ 
    position: absolute;
    top: 9px;
    left: 42px;
    width: 30px;
    height: 45px;
    background: url(img/points.png);
    background-repeat: no-repeat;
    background-size: contain
}
.g-container .g-cards .modal.card-detail{
    top: 50%;
    margin-top: -180px;
    height: 360px;
    width: 400px;
    margin-left: -200px;
}
.g-container .g-cards .modal.card-detail .g-btn-close{
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
}
.g-container .g-cards .modal.card-detail .amount{
    position: absolute;
    top: 4px;
    left: 10px;
    width: 46px;
    height: 53px;
    background: url(img/cards-2.png);
    color: #FFF;
    font-size: 35px;
    line-height: 50px;
    text-align: center;
    padding-left: 10px;
    z-index: 2;
}
.g-container .g-cards .modal.card-detail .card-title{
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 35px;
    background: #078a96;
    color: #ffffff;
    padding: 10px 0px 10px 80px;
    border-radius: 8px 8px 0px 0px;
    box-sizing: border-box;
    width: 100%;
    text-transform: uppercase;
}
.g-container .g-cards .modal.card-detail .bt-buy-card{ 
    position: absolute;
    right: 25px;
    top: 280px;
    cursor: pointer;
    font-size: 30px;
    background: #119520;
    display: inline-block;
    padding: 8px 25px;
    color: #FFF;
    border-radius: 10px;
    border: 3px solid #ffd200;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    text-shadow: 2px 2px 0px #444;
}
.g-container .g-cards .modal.card-detail .bt-buy-card.disabled{ 
    color: #DEDEDE;
    background: #999999;
    border: 3px solid #DEDEDE;
    cursor: default;
}
.g-container .g-cards .modal.card-detail .card-description{
    position: absolute;
    top: 76px;
    left: 190px;
    font-size: 25px;
    right: 15px;
    color: #666666;
    line-height: 1.5em;
}
.g-container .g-cards .modal.card-detail .card-cost{
    font-size: 40px;
    float: left;
    color: #666666;
    width: 50px;
    text-align: center;
}
.g-container .g-cards .modal.card-detail .wrap-card-detais{
    background: #eaeaea;
    position: absolute;
    top: 280px;
    left: 20px;
    width: 99px;
    padding: 5px 20px;
    border-radius: 30px;
}
.g-container .g-cards .modal.card-detail .card-cost-icon{
    width: 40px;
    height: 45px;
    margin: 3px 0px -4px 0px;
    background-image: url(img/points.png);
    background-size: contain;
    background-repeat: no-repeat;
    float: right;
}
body.skin-magos .g-container .g-cards .modal.card-detail .card-cost-icon{
    background-image: url(img/points-magos.png);
    background-size: contain;
    background-repeat: no-repeat;
}
body.skin-exploradores .g-container .g-cards .modal.card-detail .card-cost-icon{
    background-image: url(img/points-exploradores.png);
    background-size: contain;
    background-repeat: no-repeat;
}
body.skin-colonizadores .g-container .g-cards .modal.card-detail .card-cost-icon{
    background-image: url(img/points-colonizadores.png);
    background-size: contain;
    background-repeat: no-repeat;
}
body.skin-sofubis .g-container .g-cards .modal.card-detail .card-cost-icon{
    background-image: url(img/points-sofubis.png);
    background-size: contain;
    background-repeat: no-repeat;
}
body.skin-titanes .g-container .g-cards .modal.card-detail .card-cost-icon{
    background-image: url(img/points-titanes.png);
    background-size: contain;
    background-repeat: no-repeat;
}
body.skin-guardianes .g-container .g-cards .modal.card-detail .card-cost-icon{
    background-image: url(img/points-guardianes.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.g-container .g-cards .modal.card-detail .icon{
    position: absolute;
    top: 80px;
    left: 20px;
    width: 157px;
    height: 178px;
    background-image: url(img/cards/cromo_pasapal_big.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    cursor: pointer;
}
.g-container .g-cards .modal.card-detail .icon.i2{ 
    background: url(img/cards/cromo_energia_big.png);
}
.g-container .g-cards .modal.card-detail .icon.i3{ 
    background: url(img/cards/cromo_pista_big.png);
}
body.skin-sofubis .g-container .g-cards .modal.card-detail .icon{
    background-image: url(img/cards/sofubis/cromo_pasapal_big.png);
    background-size: contain;
    background-repeat: no-repeat;
}
body.skin-sofubis .g-container .g-cards .modal.card-detail .icon.i2{ 
    background: url(img/cards/sofubis/cromo_energia_big.png);
}
body.skin-sofubis .g-container .g-cards .modal.card-detail .icon.i3{ 
    background: url(img/cards/sofubis/cromo_pista_big.png);
}
.g-container .g-cards .modal-bg.card-detail{

}
/* END CARDS */


/* Avatar-selector */
.avatar-selector{ display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 6; font-family: dimbo; font-size: 24px;}

.avatar-selector .d-avatarselector .d-close{ 
    width: 50px;
    height: 50px;
    background: url(img/btn-close.png);
    background-size: cover;
    cursor: pointer;
    position: absolute; top: 5px; right: 5px; z-index: 8;
}
.avatar-selector .d-avatarselector .d-card{ 
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 7;
    background: #FFF;
    border: 3px solid #ffd200;
    border-radius: 10px;
    width: 400px;
    height: 480px;
    margin-left: -200px;
    margin-top: -240px;
    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
}
.avatar-selector .d-avatarselector .d-card .d-title{ width: 100%; height: 80px; border-bottom: 1px solid #e1ba88; position: relative; }
.avatar-selector .d-avatarselector .d-card .d-title .d-text{ 
    font-size: 22px;
    color: #4c4a48;
    position: absolute;
    top: 10px;
    left: 20px;
    font-family: woold;
}
.avatar-selector .d-avatarselector .d-card .d-title .d-help{ 
    font-size: 22px;
    color: #999;
    position: absolute;
    top: 40px;
    left: 20px;
    font-family: dimbo;
}
.avatar-selector .d-avatarselector .d-card .d-content{ height: 315px; position: relative; background: #000; }

.avatar-selector .d-avatarselector .crop-wrapper { background-color: rgba(255,255,255,1); position: relative; width: 100%; height: 330px; overflow: hidden; background: #000; }
.avatar-selector .d-avatarselector .resize-container { position: relative; display: inline-block; cursor: move; margin: 0 auto; }
.avatar-selector .d-avatarselector .resize-container-ontop { position:absolute; cursor:move; background-color:rgba(5,255,5,0); z-index:1000; width:100%; height:100%; }
.avatar-selector .d-avatarselector .crop-wrapper.disabled .resize-container-ontop { cursor: default; }
.avatar-selector .d-avatarselector .resize-container img { display: block; }
.avatar-selector .d-avatarselector .resize-container:hover img,
.avatar-selector .d-avatarselector .resize-container:active img { outline: 2px dashed rgba(0,0,0,.9); }
.avatar-selector .d-avatarselector .resize-handle-ne,
.avatar-selector .d-avatarselector .resize-handle-se,
.avatar-selector .d-avatarselector .resize-handle-nw,
.avatar-selector .d-avatarselector .resize-handle-sw { position: absolute; display: block; width: 10px; height: 10px; background: rgba(0,0,0,.9); z-index: 999; }
.avatar-selector .d-avatarselector .resize-handle-nw { top: -5px; left: -5px; cursor: nw-resize; }
.avatar-selector .d-avatarselector .resize-handle-sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.avatar-selector .d-avatarselector .resize-handle-ne { top: -5px; right: -5px; cursor: ne-resize; }
.avatar-selector .d-avatarselector .resize-handle-se { bottom: -5px; right: -5px; cursor: se-resize; }
.avatar-selector .d-avatarselector .top-overlay { z-index: 990; background-color: rgba(0,0,0,.7); width: 100%; height: 48px; margin-top: -13px; position: absolute; }
.avatar-selector .d-avatarselector .bottom-overlay { z-index: 990; background-color: rgba(0,0,0,.7); width: 100%; height: 47px; margin-bottom: -6px; position: absolute; bottom: 0; }
.avatar-selector .d-avatarselector .right-overlay { z-index: 990; background-color: rgba(0,0,0,.7); width: 50%; height: 254px; top: 50%; margin-top: -130px; margin-left: -125px; position: absolute;}
.avatar-selector .d-avatarselector .left-overlay { z-index: 990; background-color: rgba(0,0,0,.7); width: 50%; height: 254px; top: 50%; right: 0px; margin-top: -130px; margin-right: -128px; position: absolute; }
.avatar-selector .d-avatarselector .overlay {position: absolute; left: 50%; top: 50%; margin-left: -125px; margin-top: -130px; z-index: 999; width: 250px; height: 250px; border: solid 2px rgba(222,222,222,.9); box-sizing: content-box; pointer-events: none; }
.avatar-selector .d-avatarselector .overlay:before { top: 0; margin-left: -2px; margin-top: -40px; }
.avatar-selector .d-avatarselector .overlay:after { bottom: 0; margin-left: -2px; margin-bottom: -40px; }
.avatar-selector .d-avatarselector .overlay-inner:before { left: 0; margin-left: -40px; margin-top: -2px; }
.avatar-selector .d-avatarselector .overlay-inner:after{ right: 0; margin-right: -40px; margin-top: -2px; }
.avatar-selector .d-avatarselector .btn-crop img { vertical-align: middle; margin-left: 8px; }

.avatar-selector .d-avatarselector .d-card .d-content input{ position: absolute; top: -5000px;}
.avatar-selector .d-avatarselector .d-card .d-content .zoom{ width: 40px; height: 40px; position: absolute; top: 290px; background-position: center; z-index: 9999; cursor: pointer; }
.avatar-selector .d-avatarselector .d-card .d-content .crop-wrapper.disabled .zoom{ visibility: hidden; }
.avatar-selector .d-avatarselector .d-card .d-content .zoom-in{ background: url(img/ico-zoom-in.png) no-repeat; left: 130px; background-position: center;  }
.avatar-selector .d-avatarselector .d-card .d-content .zoom-out{ background: url(img/ico-zoom-out.png) no-repeat; left: 180px; background-position: center; }
.avatar-selector .d-avatarselector .d-card .d-content .crop-wrapper.disabled .rotate{ visibility: hidden; }
.avatar-selector .d-avatarselector .d-card .d-content .rotate{ background: url(img/ico-rotate.png) no-repeat; left: 230px; background-position: center;     width: 40px;
                                                               height: 40px;
                                                               position: absolute;
                                                               top: 290px;
                                                               background-position: center;
                                                               z-index: 9999; 
                                                               cursor: pointer; }
.avatar-selector .d-avatarselector .d-card .d-content .rotate.left{ background: url(img/ico-rotate-left.png) no-repeat; left: 260px; top: 294px; }
.avatar-selector .d-avatarselector .d-card .d-footer{ position: absolute; left: 10px; bottom: 10px; right: 10px; height: 40px; }
.avatar-selector .d-avatarselector .d-card .d-footer .btn.btn-change{ 
    text-decoration: none;
    position: absolute;
    bottom: 4px;
    left: 15px;
    cursor: pointer;
    background: #4e504e;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    border-radius: 10px;
    border: 3px solid #d4d4d4;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
}
.avatar-selector .d-avatarselector .d-card .d-footer .btn.btn-submit{ 
    text-decoration: none;
    position: absolute;
    bottom: 4px;
    right: 15px;
    cursor: pointer;
    background: #119520;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    border-radius: 10px;
    border: 3px solid #ffd200;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
}
.avatar-selector .d-avatarselector .d-card .d-footer .btn.btn-submit.disabled{ opacity: .3}
.avatar-selector .d-avatarselector .d-bg{ position: absolute; z-index: 5; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: .5; }
/* END Avatar-selector */

/* IMAGE-selector */
.image-selector{ display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 6; font-family: dimbo; font-size: 24px;}

.image-selector .d-imageselector .d-close{ 
    width: 50px;
    height: 50px;
    background: url(img/btn-close.png);
    background-size: cover;
    cursor: pointer;
    position: absolute; top: 5px; right: 5px; z-index: 8;
}
.image-selector .d-imageselector .d-card{ 
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 7;
    background: #FFF;
    border: 3px solid #ffd200;
    border-radius: 10px;
    width: 400px;
    height: 480px;
    margin-left: -200px;
    margin-top: -240px;
    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
}
.image-selector .d-imageselector .d-card .d-title{ width: 100%; height: 80px; border-bottom: 1px solid #e1ba88; position: relative; }
.image-selector .d-imageselector .d-card .d-title .d-text{ 
    font-size: 22px;
    color: #4c4a48;
    position: absolute;
    top: 10px;
    left: 20px;
    font-family: woold;
}
.image-selector .d-imageselector .d-card .d-title .d-help{ 
    font-size: 22px;
    color: #999;
    position: absolute;
    top: 40px;
    left: 20px;
    font-family: dimbo;
}
.image-selector .d-imageselector .d-card .d-content{ 
    height: 315px; 
    position: relative;     
    background: #dedede; 
    overflow: hidden;
}


.image-selector .d-imageselector .crop-wrapper { 
    position: relative;
    text-align: center;
    padding-top: 20px;
}
.image-selector .d-imageselector .crop-wrapper .image-container{ 
    border: 4px solid #FFF;
    border-radius: 10px;
    -webkit-box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 0px 2px rgba(0,0,0,0.3);
    background: #FFF;
    display: inline-block;
}
.image-selector .d-imageselector .crop-wrapper .image-container img{ 
    border-radius: 8px;
}
.image-selector .d-imageselector .btn-crop img { vertical-align: middle; margin-left: 8px; }

.image-selector .d-imageselector .d-card .d-content input{ position: absolute; top: -5000px;}
.image-selector .d-imageselector .d-card .d-content .rotate{ 
    background: url(img/ico-rotate.png) no-repeat;
    left: 180px;
    background-position: center;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 270px;
    background-position: center;
    z-index: 9999;
    cursor: pointer;
}
.image-selector .d-imageselector .d-card .d-content .rotate.left{ background: url(img/ico-rotate-left.png) no-repeat; left: 260px; top: 294px; }
.image-selector .d-imageselector .d-card .d-footer{ position: absolute; left: 10px; bottom: 10px; right: 10px; height: 40px; }
.image-selector .d-imageselector .d-card .d-footer .btn.btn-change{ 
    text-decoration: none;
    position: absolute;
    bottom: 4px;
    left: 15px;
    cursor: pointer;
    background: #4e504e;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    border-radius: 10px;
    border: 3px solid #d4d4d4;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
}
.image-selector .d-imageselector .d-card .d-footer .btn.btn-submit{ 
    text-decoration: none;
    position: absolute;
    bottom: 4px;
    right: 15px;
    cursor: pointer;
    background: #119520;
    display: inline-block;
    padding: 5px 10px;
    color: #FFF;
    border-radius: 10px;
    border: 3px solid #ffd200;
    -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
    box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.58);
}
.image-selector .d-imageselector .d-card .d-footer .btn.btn-submit.disabled{ opacity: .3}
.image-selector .d-imageselector .d-bg{ position: absolute; z-index: 5; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: .5; }
/* END IMAGE-selector */

/* CUSTOM CHECKBOX */
.check-custom {
    position: relative;
}

.check-custom [type="checkbox"]:not(:checked), .check-custom [type="checkbox"]:checked {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    opacity: 0;
    box-sizing: border-box;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.check-custom [type="checkbox"]:not(:checked) + label, .check-custom [type="checkbox"]:checked + label {
    position: relative;
    cursor: pointer;
}

/* checkbox aspect */
.check-custom [type="checkbox"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: url(./img/elements/checkbox/checkbox.png) no-repeat;
}

.check-custom [type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: url(./img/elements/checkbox/checkbox-check.png) no-repeat;
}

/* checked mark aspect */
.check-custom [type="checkbox"]:not(:checked) + label:after, .check-custom [type="checkbox"]:checked + label:after {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    width: 28px;
    height: 28px;
    background: url(./img/elements/checkbox/checkbox-item.png) no-repeat;
    transition: all .2s;
}

/* checked mark aspect changes */
.check-custom [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}

.check-custom [type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}

/* disabled checkbox */
.check-custom [type="checkbox"]:disabled:not(:checked) + label:before, .check-custom [type="checkbox"]:disabled:checked + label:before {
    opacity: 0.5;
    cursor: default;
}


.g-container .module.group-students .g-card.selected:after{
    content: '';
    width: 204px;
    height: 242px;
    position: absolute;
    top: 2px;
    left: 1px;
    border: 3px solid #ffffff;
    border-radius: 28px;
}

/* END CUSTOM CHECKBOX */


/* ONBOARDING TEACHER */
.g-container .modal.onboarding-teacher{ 
    display: none;
    position: fixed; top:50%; left:50%; z-index: 5; border-radius: 10px; 
    width: 350px; 
    height: 470px; 
    margin-left: -175px;
    margin-top: -225px;
    background: #FFF;
    border: 3px solid #fdfdfd;
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 0px 10px -1px rgba(0,0,0,0.75);
}
.g-container .modal.onboarding-teacher .g-container{ 
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.g-container .modal.onboarding-teacher .g-container .g-images .tab-image{
    display: none;
    width: 220px;
    height: 180px;
    position: absolute;
    left: 70px;
    top: 10px;
    background: url(img/onboarding-teacher/img1.png);
    background-size: contain;
}
.g-container .modal.onboarding-teacher .g-container .g-images .tab-image.t2{
    background: url(img/onboarding-teacher/img2.png);
    background-size: contain;
    height: 171px;
}
.g-container .modal.onboarding-teacher .g-container .g-images .tab-image.t3{
    background: url(img/onboarding-teacher/img3.png);
    background-size: contain;
}
.g-container .modal.onboarding-teacher .g-container .g-images .tab-image.active{
    display: block;
}
.g-container .modal.onboarding-teacher .g-container .g-images .tab-image .logo-image{
    width: 150px;
    height: 99px;
    position: absolute;
    left: 33px;
    top: 20px;
    z-index: 1;
    background: url(img/onboarding-teacher/logo-es.png);
    background-size: contain;
}
.g-container .modal.onboarding-teacher .g-container .g-steps{
    position: absolute;
    top: 180px; 
    left: 20px; 
    right: 20px;
    text-align: center;
}
.g-container .modal.onboarding-teacher .g-container .g-steps .g-step{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 10px;
    background: #cfcfcf;
    vertical-align: middle;
    margin: 0px 5px;
}
.g-container .modal.onboarding-teacher .g-container .g-steps .g-step.active{
    border: 2px solid #ffd722;
    background: #2587f6;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}
.g-container .modal.onboarding-teacher .g-container .g-title{
    position: absolute;
    top: 219px;
    left: 11px;
    width: 330px;
    height: 50px;
    background: url(img/onboarding-teacher/bg-title.png);
    background-size: cover;
}
.g-container .modal.onboarding-teacher .g-container .g-title span{
    text-align: center;
    position: absolute;
    top: 3px;
    left: 15px;
    right: 15px;
    color: #FFF;
    letter-spacing: 1px;
    font-size: 26px;
}
.g-container .modal.onboarding-teacher .g-container .g-message{
    position: absolute;
    top: 280px;
    left: 20px;
    right: 20px;
    text-align: center;
    font-size: 21px;
}
.g-container .modal.onboarding-teacher .g-container .g-footer{
    position: absolute;
    bottom: 13px;
    font-size: 27px;
    left: 0;
    right: 0;
    height: 45px;
}
.g-container .modal.onboarding-teacher .g-container .g-footer .btn.left{
    background: none;
    color: #2587f6;
}
.g-container .modal.onboarding-teacher .g-container .g-footer .btn.left span{
    display: inline-block;
    width: 24px;
    height: 22px;
    background: url(img/onboarding-teacher/ico-back.png);
    background-size: contain;
    margin-right: 10px;
}
.g-container .modal.onboarding-teacher .g-container .g-footer .btn.right{
    background: none;
    color: #2587f6;
    border: 2px solid #2587f6;
    position: absolute;
    top: 0px;
    right: 10px;
    border-radius: 11px;
}
/* END ONBOARDING TEACHER */