body {
background-color: #010101;
font-family: 'Titillium Web';
background-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
font-weight: 300;
font-size: 1em;
}
html {
font-size: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Montserrat Alternates';
text-transform: uppercase;
font-weight: 600;
}
strong {
font-weight: 600
}
h1 {
font-size: 32px;
}
h1 {
color: #66caE1;
}
hr {
border-color: rgba(255, 255, 255, .6);
}
hr.color1 {
border-color: #fec019;
}
hr.color2 {
border-color: #204f6d;
}
hr.color3 {
border-color: #66caE1;
}
hr.color4 {
border-color: #27a962;
}
hr.color5 {
border-color: rgb(255, 255, 255);
}
hr.dashed {
border-style: dashed;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: 0;
}
span.flag {
display: inline-block;
}
.font-family1 {
font-family: 'Titillium Web';
}
.font-family2 {
font-family: 'Montserrat Alternates';
}
.fs-1 {
font-size: 1.1rem !important;
}
.fs-2 {
font-size: 1.2rem !important;
}
.fs-3 {
font-size: 1.5rem !important;
}
.fs-4 {
font-size: 1.8rem !important;
}
.fs-5 {
font-size: 2rem !important;
}
.op1 {
opacity: .1;
}
.op2 {
opacity: .2;
}
.op3 {
opacity: .3;
}
.op4 {
opacity: .4;
}
.op5 {
opacity: .5;
}
.op6 {
opacity: .6;
}
.op7 {
opacity: .7;
}
.op8 {
opacity: .8;
}
.op9 {
opacity: .9;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.clear {
clear: both;
}
.text-elipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.color1 {
color: #fec019 !important;
}
.color2 {
color: #204f6d !important;
}
.color3 {
color: #66caE1 !important;
}
.color4 {
color: #27a962 !important;
}
.color5 {
color: rgb(255, 255, 255) !important;
}
.white {
color: #fff !important;
}
.black {
color: #000 !important;
}
.m0 {
margin: 0;
}
.m1 {
margin: 5px;
}
.m2 {
margin: 10px;
}
.m3 {
margin: 15px;
}
.m4 {
margin: 25px;
}
.mt0 {
margin-top: 0;
}
.mt1 {
margin-top: 5px;
}
.mt2 {
margin-top: 10px;
}
.mt3 {
margin-top: 15px;
}
.mt4 {
margin-top: 25px;
}
.mb0 {
margin-bottom: 0;
}
.mb1 {
margin-bottom: 5px;
}
.mb2 {
margin-bottom: 10px;
}
.mb3 {
margin-bottom: 15px;
}
.mb4 {
margin-bottom: 25px;
}
.ml0 {
margin-left: 0;
}
.ml1 {
margin-left: 5px;
}
.ml2 {
margin-left: 10px;
}
.ml3 {
margin-left: 15px;
}
.ml4 {
margin-left: 25px;
}
.mr0 {
margin-right: 0;
}
.mr1 {
margin-right: 5px;
}
.mr2 {
margin-right: 10px;
}
.mr3 {
margin-right: 15px;
}
.mr4 {
margin-right: 25px;
}
.p0 {
padding: 0 !important;
}
.p1 {
padding: 5px;
}
.p2 {
padding: 10px;
}
.p3 {
padding: 15px;
}
.p4 {
padding: 25px;
}
.pt0 {
padding-top: 0;
}
.pt1 {
padding-top: 5px;
}
.pt2 {
padding-top: 10px;
}
.pt3 {
padding-top: 15px;
}
.pt4 {
padding-top: 25px;
}
.pb0 {
padding-bottom: 0;
}
.pb1 {
padding-bottom: 5px;
}
.pb2 {
padding-bottom: 10px;
}
.pb3 {
padding-bottom: 15px;
}
.pb4 {
padding-bottom: 25px;
}
.pl0 {
padding-left: 0;
}
.pl1 {
padding-left: 5px;
}
.pl2 {
padding-left: 10px;
}
.pl3 {
padding-left: 15px;
}
.pl4 {
padding-left: 25px;
}
.pr0 {
padding-right: 0;
}
.pr1 {
padding-right: 5px;
}
.pr2 {
padding-right: 10px;
}
.pr3 {
padding-right: 15px;
}
.pr4 {
padding-right: 25px;
}
.alert {
background-color: rgba(0, 0, 0, .06);
box-shadow: none;
border-radius: 10px;
border: 0;
}
.alert-light {
background-color: #fff;
}
.frame {
background-image: url(../img/fondo.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
.container {
position: relative;
overflow: visible;
}
.first-content {
padding-top: 120px;
min-height: 720px;
}
form span.required {
position: absolute;
right: -10px;
top: 6px;
color: #daab1f;
font-weight: 800;
font-family: "Oswald";
font-size: 1.8em;
}
span.required {
color: #daab1f;
font-weight: 800;
font-family: "Oswald";
vertical-align: -webkit-baseline-middle;
font-size: 1.8em;
padding: 0 5px
}
.form-control {
border-color: rgba(255, 255, 255, .3) !important;
}
.form-control:focus {
border-color: rgba(253, 220, 112, 0.78) !important;
}
.title {
position: relative;
text-align: center;
display: flex;
}
.title:before,
.title:after {
/* position: absolute;*/
content: ' ';
/*left: 0;
top: 0;
bottom: 0;
width: 30%;*/
flex-grow: 1;
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-size: 463px 15px;
background-position: left center;
background-repeat: no-repeat;
z-index: 1;
margin-right: 35px;
overflow: hidden;
}
.title:after {
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-position: right center;
left: auto;
right: 0;
margin-right: 0;
margin-left: 35px;
}
.title span {
z-index: 2;
display: inline-block;
font-weight: 800;
color: rgb(255, 255, 255);
font-family: 'Montserrat Alternates';
text-transform: uppercase;
padding: 0 .4em;
line-height: 3rem;
font-size: 78%;
position: relative;
background-color: transparent;
border: 0;
border-radius: 0;
background-size: auto 100%;
}
.title span:after {
content: '';
height: 100%;
width: 2rem;
position: absolute;
right: -1.9rem;
top: 0;
background-size: auto 100%;
background-position: right center;
}
.title span:before {
content: '';
height: 100%;
width: 2rem;
position: absolute;
left: -1.9rem;
top: 0;
background-size: auto 100%;
background-position: left center;
}
.title span {
color: rgb(255, 255, 255);
background-color: #007CC2;
}
.title span:after {
border-right: 16px solid transparent;
border-top: 3rem solid #007CC2;
}
.title span:before {
border-left: 16px solid transparent;
border-bottom: 3rem solid #007CC2;
}
.title.full-width:before,
.title.full-width:after {
display: none;
}
.title span:after,
.title span:before {
display: none;
}
.title.full-width span {
width: 100%;
}
.divisor-left {
background-image: url(../img/linea-divisor.png);
background-repeat: repeat-y;
background-size: 6px auto;
background-position: left top;
}
.divisor-right {
background-image: url(../img/linea-divisor.png);
background-repeat: repeat-y;
background-size: 6px auto;
background-position: right;
top;
}
.divisor-top {
background-image: url(../img/linea-divisor.png);
background-repeat: repeat-x;
background-size: 6px auto;
background-position: left top;
}
.divisor-bottom {
background-image: url(../img/linea-divisor.png);
background-repeat: repeat-x;
background-size: 6px auto;
background-position: left bottom;
}
.login-container div.fondo {
background-image: none;
}
.home-container div.fondo {
left: -146px;
}
.invitacion-container div.fondo {
left: -127px;
}
.invitacion-registro .row-premios {
display: none;
}
body.invitacion .form-control {
color: #ffda6b;
}
.footer {
position: relative;
height: 356px;
margin-top: 60px;
}
.footer .premios {
position: absolute;
z-index: 2;
margin-top: -16px
}
.footer .tp-logo {
margin-top: -130px;
float: right;
}
.footer .banda {
background-color: rgb(255, 255, 255);
height: 136px;
padding-top: 20px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
text-align: right;
margin: 0;
}
.footer .banda:before {
content: '';
position: absolute;
top: -60px;
left: 0;
right: 0;
height: 100px;
width: 100%;
background-image: url(../img/footer-border.png);
}
.footer .selector_drowpdown {
margin-top: -120px;
position: absolute;
}
.footer p {
font-size: .8em;
color: #999;
}
.footer .menu {
margin: 0;
padding: 0;
}
.footer .menu li {
display: inline-block;
}
.footer .menu li a {
display: inline-block;
padding: 8px 20px;
font-size: .9rem;
color: #888;
}
header .menu {
margin: 0;
padding: 0;
}
header .menu li {
display: inline-block;
}
header .menu li a {
background-color: rgba(0, 0, 0, .03);
border-radius: 20px;
display: inline-block;
padding: 8px 20px;
font-size: .9rem;
color: #888;
}
header .menu li.active a {
background-color: #aaa;
color: #fff;
}
header .menu li a:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, .08);
}
.top-nav {
padding: 10px 0;
}
.top-nav:after {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
/* IE6-9 */
content: ' ';
width: 100%;
position: absolute;
left: 0;
top: 0;
bottom: -3px;
right: 0;
display: block;
z-index: 1;
}
.top-nav .container {
z-index: 2;
position: relative;
}
.top-nav .menu {
list-style: none;
padding: 0;
margin: 23px 0;
display: inline-block;
}
.top-nav .menu li {
list-style: none;
display: inline-block;
font-weight: 700;
}
.top-nav .menu a {
padding: .4em .8em;
color: rgb(255, 255, 255);
display: inline-block;
}
.top-nav .menu a:hover {
text-decoration: none;
}
.top-nav .menu a {
z-index: 2;
display: inline-block;
font-weight: 700;
color: #fec019;
background-color: rgb(255, 255, 255);
padding: .6em 1.5em;
line-height: 1;
position: relative;
border: 0;
border-radius: 1rem;
background-size: auto 100%;
margin: 0;
}
.top-nav .menu a {
background-color: rgba(255, 255, 255, 0);
color: rgb(255, 255, 255);
}
.top-nav .menu a:hover {
background-color: rgba(255, 255, 255, .2);
}
.top-nav .menu li.active a:after,
.top-nav .menu li.active a:before {
opacity: 1;
}
.top-nav .menu li.active a {
background-color: rgba(255, 255, 255, 1);
color: #fec019;
}
.top-nav .instance-logo {
padding: 5px 45px 5px 0;
display: inline-block;
}
.top-nav .instance-logo img {
max-height: 65px;
max-width: 250px;
}
.nav-profile {
margin: 10px 0;
min-height: 60px;
position: relative;
}
.nav-profile .avatar {
width: 100px;
height: 100px;
float: left;
position: relative;
z-index: 10;
}
.nav-profile .avatar .img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 4px;
width: 80px;
height: 73px;
margin: 10px;
transform: scale(1, 1);
mask: url(../img/mask_avatar.png);
-webkit-mask: url(../img/mask_avatar.png);
-o-mask: url(../img/mask_avatar.png);
-ms-mask: url(../img/mask_avatar.png);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-o-mask-size: 100% 100%;
-ms-mask-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nav-profile .avatar:before {
width: 100px;
height: 100px;
left: 0;
top: 0;
content: '';
position: absolute;
background-image: url(../img/frame_avatar.png);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
z-index: 10;
}
.nav-profile .avatar:after {
opacity: 0;
background-color: rgba(0, 0, 0, .6);
position: absolute;
z-index: 1;
width: 100%;
top: 0;
left: 0;
bottom: 0;
content: '';
mask: url(../img/mask_avatar.png);
-webkit-mask: url(../img/mask_avatar.png);
-o-mask: url(../img/mask_avatar.png);
-ms-mask: url(../img/mask_avatar.png);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-o-mask-size: 100% 100%;
-ms-mask-size: 100% 100%;
transition: all .2s ease 0s;
-webkit-transition: all .2s ease 0s;
-moz-transition: all .2s ease 0s;
}
.nav-profile .avatar i {
opacity: 0;
font-size: 1.3em;
color: rgb(255, 255, 255);
z-index: 2;
text-shadow: 0 0 1px rgba(0, 0, 0, .3);
cursor: pointer;
padding: 10px;
left: 50%;
top: 50%;
position: absolute;
margin-left: -20px;
margin-top: -20px;
z-index: 20;
}
.nav-profile:hover .avatar:after,
.nav-profile:hover .avatar i {
opacity: 1
}
.nav-profile .puntajes {
padding-left: 84px;
cursor: pointer;
display: block;
color: inherit;
}
.nav-profile .puntaje {
width: 49%;
float: left;
}
.nav-profile .position {
width: 49%;
float: right;
}
.nav-profile .position,
.nav-profile .puntaje {
font-size: .75em;
text-transform: uppercase;
text-align: center;
}
.nav-profile .position span,
.nav-profile .puntaje span {
margin: 0 4px;
font-size: 1.7rem;
display: block;
font-weight: 700;
border-radius: 50px;
transition: all .2s ease 0s;
-webkit-transition: all .2s ease 0s;
-moz-transition: all .2s ease 0s;
border: 2px solid rgba(255, 255, 255, .8);
padding: 0 .1em;
line-height: .9;
}
.nav-profile:hover .position span,
.nav-profile:hover .puntaje span {
border: 2px solid rgba(255, 255, 255, 1);
}
.nav-profile .position span {
color: #66caE1;
}
.nav-profile .grupo {
clear: right;
margin-top: 2px;
float: right;
width: 100%;
}
.nav-profile .grupo span {
margin: 3px;
font-size: .9rem;
display: block;
color: #fec019;
background-color: rgb(255, 255, 255);
font-weight: 700;
border-radius: 50px;
padding: .2em .5em;
text-align: center;
line-height: 1.3;
}
.nav-profile .menu-perfil {
position: absolute;
left: 70px;
width: 100px;
top: 70px;
padding: 0;
list-style: none;
background: #FFF;
border-radius: 6px;
box-shadow: 0 5px 25px rgba(0, 0, 0, .5);
display: none;
z-index: 20;
min-width: 100px;
}
.nav-profile #btnMenuPerfil:hover .menu-perfil {
display: block;
}
.nav-profile .menu-perfil li {
clear: both;
float: none;
display: block;
border-bottom: 1px solid #eee;
}
.nav-profile .menu-perfil li:last-child {
border-bottom: 0;
}
.nav-profile .menu-perfil li a {
display: block;
padding: 6px 13px 7px;
font-size: .8rem;
font-weight: 800;
color: #555;
text-align: center;
text-decoration-color:
}
.nav-profile .menu-perfil li a:hover {
text-decoration: none;
color: #222;
}
.selector_drowpdown .block {
display: inline-block;
background: rgba(255, 255, 255, .3);
border-radius: 15px;
z-index: 2000;
}
.selector_drowpdown.with-name .block .current .text {
display: inline-block;
text-transform: capitalize;
color: #fff;
}
.selector_drowpdown.with-name .block:hover .current .text {
color: #222;
}
.selector_drowpdown.with-name .block .current .iso {
background-color: #fafafa;
color: #333;
}
.selector_drowpdown.with-name .block:hover .current .iso {
background-color: #eee;
}
.nav-profile .selector_drowpdown .block {
position: absolute;
left: -40px;
top: 50%;
margin-top: -20px;
}
.selector_drowpdown .block:hover {
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
background-color: #fff;
min-width: 130px;
text-align: left;
padding: 0 4px;
}
.selector_drowpdown .block .current {
transition: all .1s ease 0s;
-webkit-transition: all .1s ease 0s;
-moz-transition: all .1s ease 0s;
padding: 3px;
font-size: .8rem;
font-weight: 800;
display: inline-block;
color: #aaa;
text-align: center;
}
.selector_drowpdown .block .current .text {
display: none;
font-size: .8rem;
font-weight: 500;
padding: 5px 14px;
text-transform: capitalize;
}
.selector_drowpdown .block:hover .current .text {
display: inline-block;
}
.selector_drowpdown .block .current .iso {
transition: all .1s ease 0s;
-webkit-transition: all .1s ease 0s;
-moz-transition: all .1s ease 0s;
border-radius: 40px;
background: rgba(255, 255, 255, 0);
color: #c7c7c7;
display: inline-block;
width: 24px;
height: 24px;
line-height: 23px;
text-align: center;
text-transform: lowercase;
}
.selector_drowpdown .block:hover .current .iso {
background: rgba(0, 0, 0, .1);
color: #444;
}
.selector_drowpdown .block .selector {
display: none;
list-style: none;
padding: 0;
margin: 4px 0;
border-top: 1px solid rgba(0, 0, 0, .1);
}
.selector_drowpdown .block .selector a {
font-size: .8rem;
text-align: left;
display: block;
padding: 3px 15px;
font-weight: 800;
color: #777;
text-transform: capitalize;
}
.selector_drowpdown .block .selector a:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, .05);
}
.selector_drowpdown .block:hover .selector {
transition: all .1s ease 0s;
-webkit-transition: all .1s ease 0s;
-moz-transition: all .1s ease 0s;
display: block;
}
.selector_periodos {
position: absolute;
right: 0;
z-index: 1000;
}
.login-container {
padding-top: 66px;
}
.invitacion .logos,
.login-container .logos {
min-height: 130px;
}
.invitacion .logos.app-logo,
.login-container .logos.app-logo {
text-align: left;
}
.invitacion .logos.app-logo img,
.login-container .logos.app-logo img {
height: 100%;
}
.invitacion .logos.instance-logo img,
.login-container .logos.instance-logo img {
max-width: 100%;
}
.invitacion .logos .line,
.login-container .logos .line {
height: 80%;
width: 1px;
margin: 10% auto;
border: 0;
background-color: rgba(255, 255, 255, .5);
}
/* MODALS */
.modal {
z-index: 6000;
}
#modal-container-reconocimientos-grupales,
#modal-container-reconocimientos {
z-index: 6000;
}
.modal .modal-content {
color: #555;
background-size: cover;
}
.modal .form-control {
background-color: rgba(0, 0, 0, .01);
border-color: rgba(0, 0, 0, .15);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.07);
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.07);
color: #444;
}
.modal.rojo .form-control {
color: #fff;
}
.modal hr {
border-color: rgba(0, 0, 0, .15);
}
.modal.rojo .modal-content {
background-color: #c53131;
}
.modal.rojo .close {
color: rgb(255, 255, 255);
text-shadow: none;
opacity: 1;
font-size: 2em;
}
.modal.rojo .modal-content p {
color: rgb(255, 255, 255);
}
.modal.rojo hr {
border-color: rgba(255, 255, 255, .6);
}
.modal.azul .title span {
color: #fff;
}
.modal.azul hr {
border-color: rgba(255, 255, 255, .6);
}
.modal.azul .modal-content {
background-color: #66caE1;
color: #4e4525;
}
.modal.azul .close {
color: rgb(255, 255, 255);
text-shadow: none;
opacity: 1;
font-size: 2em;
}
.modal .modal-header {
border-bottom: 0;
z-index: 100;
min-height: 55px;
padding-bottom: 0;
}
.modal .modal-footer {
border-top: 0;
}
.modal .title {
margin: 0;
}
.modal .title span {
font-size: 1.6rem;
background-color: transparent;
color: #222;
line-height: 1.1;
}
.modal .title:before,
.modal .title:after {
opacity: 0;
}
.modal .modal-footer {
text-align: center;
background-color: rgba(0, 0, 0, .1);
}
.modal button.close {
padding: 6px 13px;
font-size: 32px
}
.modal .modal-body {
padding: 0 20px 20px 20px;
}
.modal .title span:after {
display: none;
}
.modal .title span:before {
display: none;
}
.modal.rojo .title span {
color: #fec019;
background-color: transparent;
}
.modal-canje .modal-dialog {
width: 900px;
max-width: 95%;
margin: 2% auto;
}
.modal-canje .modal-body {
width: 900px;
max-width: 98%;
}
.modal-canje .modal-body {
padding: 0;
}
.modal-canje hr {
border-color: #ccc;
}
.modal-canje .info {
background-color: #f0f0f0;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
position: relative;
}
.modal-canje .info,
.modal-canje .imagen {
min-height: 600px;
}
.modal-canje .btn-link {
border-color: #aaa;
color: #aaa;
}
.modal-canje .btn {
font-size: 1em;
/*margin: 5px 0;*/
}
.modal-canje .btn[disabled] {
background-color: #ddd;
}
.modal-canje h2 {
margin: 5px 0;
clear: both;
}
.modal-canje h2 span {
display: block;
font-size: .6em;
}
.modal-canje .buttons {
padding: 5px 10px;
margin: 15px 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.modal-canje .imagen {
padding: 20px 20px 20px 35px;
display: flex;
align-items: center;
justify-content: center;
}
.modal-canje .imagen img {
max-width: 100%;
max-height: 540px;
margin: 10px;
}
.modal-prediccion .equipo {
display: flex;
height: 100px;
justify-content: flex-start;
align-items: center;
color: #66caE1;
}
.modal-prediccion .equipo h2 {
display: flex;
align-items: center;
}
.modal-prediccion .equipo:first-child {
justify-content: flex-end;
}
.modal-prediccion .counters {
display: flex;
justify-content: space-around;
font-size: 1.2rem;
align-items: center;
color: #66caE1;
}
.modal-prediccion .counter {
text-align: center;
background-color: rgb(255, 255, 255);
border-radius: 7px;
display: flex;
flex-direction: column;
width: 60px;
margin: 0;
padding: 0;
}
.modal-prediccion .counter:first-child {
float: left;
}
.modal-prediccion .counter i {
background-color: #eee;
padding: 5px 0;
color: rgba(0, 0, 0, .4);
font-weight: 800;
font-size: 1.3rem;
cursor: pointer;
transition: all .1s ease 0s;
-webkit-transition: all .1s ease 0s;
-moz-transition: all .1s ease 0s;
}
.modal-prediccion .counter i:active {
background-color: #ccc;
}
.modal-prediccion .counter .plus {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.modal-prediccion .counter .minus {
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
.modal-prediccion .counter input {
line-height: 52px;
font-size: 2.8rem;
text-align: center;
color: #204f6d;
width: 100%;
font-family: Oswald;
border: 0;
border-radius: 7px;
padding: 0;
font-weight: 800;
}
.modal .has-success .help-block,
.modal .has-success .control-label,
.modal .has-success .radio,
.modal .has-success .checkbox,
.modal .has-success .radio-inline,
.modal .has-success .checkbox-inline,
.modal .has-success .form-control {
color: #66a427;
}
/* SALUDOS */
#modalSaludo .modal-dialog {
width: 750px;
}
#modalSaludo .swiper-container {
width: 100%;
padding-left: 15px;
padding-right: 15px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
#modalSaludo .swiper-button-next {
bottom: 50%;
right: -10px;
}
#modalSaludo .swiper-wrapper {
height: auto;
}
#modalSaludo .swiper-slide {
text-align: center;
font-size: 18px;
width: 25%;
background: #fff;
height: calc(33% - 10px);
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.tarjetas {
display: none;
}
.tarjetas .col {
padding: 0;
}
.tarjetas .col a {
border: 2px solid transparent;
border-radius: 8px;
overflow: hidden;
display: block;
opacity: .8;
transition: all .2s ease 0s;
-webkit-transition: all .2s ease 0s;
-moz-transition: all .2s ease 0s;
}
.tarjetas .col a:hover {
border-color: #aaa;
box-shadow: 0 0 22px rgba(0, 0, 0, .11);
opacity: 1;
}
.tarjetas .col a.active {
border-color: #c82141;
opacity: 1;
}
.tarjetas .col.no-card {
color: #aaa;
font-size: 13px !important;
text-align: center;
}
.tarjetas .col.no-card img {
width: 100%;
height: auto;
border-radius: 8px;
}
.tarjetas .col.no-card>a {
position: absolute;
display: flex;
align-content: center;
justify-content: center;
flex-direction: column;
color: #aaa;
width: 100%;
height: 100%;
text-decoration: none;
}
.tarjetas .col.no-card i {
font-size: 2.5em;
opacity: .4;
display: block;
margin: 0 5px;
}
.swiper-button-prev {
right: 25px;
left: auto;
top: auto;
bottom: 0;
}
.swiper-button-next {
right: 0;
bottom: 0;
top: auto;
}
:root {
--swiper-navigation-size: 20px;
}
:root {
--swiper-theme-color: #444;
}
/* FIN SALUDOS */
.podio {
font-weight: bold;
}
.user-toolbar .profile {
float: right;
margin-left: 20px;
margin-top: 10px;
}
.user-toolbar h1 {
margin-top: 0;
margin-bottom: 0;
}
.user-toolbar h3 {
margin-top: 0;
}
.user-toolbar .posiciones {
font-size: 18px;
margin: 0;
}
.user-toolbar .posiciones strong {
display: block;
font-size: 57px;
font-weight: 400;
float: right;
padding: 0 10px;
text-align: center;
}
.user-toolbar .posiciones strong.pos {
border-right: 1px solid rgba(255, 121, 0, 0.6);
}
.user-toolbar .posiciones span {
text-align: center;
display: block;
font-size: 13px;
font-weight: 400;
clear: both;
}
.profile .picture {
position: relative;
width: 130px;
height: 130px;
-webkit-border-radius: 65px;
-moz-border-radius: 65px;
border-radius: 65px;
position: relative;
overflow: hidden;
border: 5px solid #eee;
background-color: #000;
}
.profile .change {
position: absolute;
top: 50%;
left: 50%;
margin-top: -7px;
margin-left: -38px;
display: none;
}
.profile .picture:hover .change {
display: block;
}
.profile .image {
display: block;
width: 100%;
height: 100%;
background-size: 130px;
background-position: center;
background-repeat: no-repeat;
}
.user-toolbar .profile .picture {
border-color: #ff7800;
border-width: 8px;
}
.user-toolbar .profile .image {}
.cup-progress {
background-color: rgba(174, 207, 50, .1);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
position: relative;
border-radius: 10px;
padding: 10px 84px 48px 22px;
position: relative;
margin-top: 20px;
}
.cup-progress .copa {
position: absolute;
right: 20px;
bottom: 52px;
}
.cup-progress .meter {
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
position: relative;
border-radius: 18px;
border: 3px solid rgb(255, 255, 255);
overflow: hidden;
height: 30px;
background-color: #ff7900;
overflow: visible;
}
.cup-progress .meter .bar {
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0%;
background-color: #0C3706;
overflow: visible;
-webkit-border-radius: 0 18px 18px 0;
-moz-border-radius: 0 18px 18px 0;
border-radius: 0 18px 18px 0;
z-index: 9;
}
.cup-progress .meter .stop {
position: absolute;
top: 0;
bottom: 0;
width: 30px;
border-left: 3px solid rgb(255, 255, 255);
overflow: visible;
z-index: 10;
}
.cup-progress .meter .stop-grupos {
left: 25%;
border: 0;
}
.cup-progress .meter .stop-octavos {
left: 50%;
}
.cup-progress .meter .stop-cuartos {
left: 69%;
}
.cup-progress .meter .stop-semis {
left: 82%;
}
.cup-progress .meter .stop-final {
left: 100%;
border: 0;
}
.cup-progress .meter .stop span {
color: rgb(255, 255, 255);
text-transform: uppercase;
display: inline-block;
position: absolute;
width: 100px;
left: -50px;
text-align: center;
bottom: -28px;
}
.table {
border-radius: 0;
}
.table th.disabled,
.table td.disabled {
display: none !important;
pointer-events: none;
opacity: .5;
}
.table-grupos th {
background-color: #ff7800;
color: rgb(255, 255, 255) !important;
}
.table-grupos td {
cursor: pointer;
padding: 4px 10px;
font-weight: bold;
font-size: 16px;
vertical-align: middle;
}
.table-grupos td.flag {
padding: 3px 8px;
text-align: center;
width: 55px;
}
.table-grupos td.flag div span {
-webkit-border-radius: 36px;
-moz-border-radius: 36px;
position: relative;
border-radius: 36px;
width: 36px;
height: 36px;
display: inline-block;
background-size: auto 34px;
background-position: center;
display: inline-block;
}
.table-grupos td.flag div {
-webkit-border-radius: 36px;
-moz-border-radius: 36px;
position: relative;
border-radius: 36px;
width: 44px;
height: 44px;
border: 4px solid rgba(255, 255, 255, .1);
}
.lt-ie9 .table-grupos td.flag div {
border: 4px solid #425625;
}
.table-grupos td.nombre {
vertical-align: middle;
color: #ccff65;
line-height: 1;
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
}
.table-grupos td.check {
display: none;
}
.table-grupos td.selected {
background-color: rgba(240, 255, 0, .3);
}
.lt-ie9 .table-grupos td.selected {
background-color: transparent;
background-image: url(../img/bg_table_selected.png);
}
.table-grupos td.selected div {
border-color: rgba(0, 0, 0, .6);
}
.lt-ie9 .table-grupos td.selected div {
border-color: #283201;
}
.table-grupos tr.selected {}
.table-grupos td.selected {
color: rgb(255, 255, 255);
}
.table-partidos {
background-color: rgba(174, 207, 50, .2);
}
.table-partidos td {
padding: 6px !important;
vertical-align: middle !important;
cursor: default !important;
color: #85c930;
}
.puntos-normales,
.puntos-extra {
font-family: 'Open Sans';
font-weight: bold;
background-color: #238cc5;
border: 2px solid rgba(0, 0, 0, .5);
padding: 1px 2px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
position: relative;
border-radius: 30px;
color: rgb(255, 255, 255);
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
}
.puntos-extra {
background-color: #FF7900;
font-size: 18px;
height: 35px;
letter-spacing: -2px;
margin-left: -8px;
padding: 2px 2px 2px 0;
width: 36px;
}
.table-partidos .puntos {
padding: 3px !important;
}
.table-grupos .puntos-normales {
width: 30px;
height: 30px;
margin: 9px 0;
}
.table-partidos .puntos-normales {
margin: 0;
width: 28px;
height: 28px;
font-size: 15px;
padding: 1px 2px;
}
.table-partidos .ganador-mundial td {
font-size: 22px !important;
padding-left: 76px !important;
text-transform: uppercase;
position: relative;
}
.table-partidos .ganador-mundial .copa {
position: absolute;
left: 10px;
bottom: 10px;
}
.table-partidos .goles {
display: block;
font-size: 13px;
}
.partido-pending th {
opacity: .3;
}
.partido-pending td {
color: #94ad71;
background-color: rgba(0, 0, 0, .2) !important;
}
.partido-pending .favorito td {
color: #94ad71 !important;
background-color: rgba(0, 0, 0, .3) !important;
}
.partido-pending {
background-color: rgba(174, 207, 50, .1);
}
.partido-ganador td {
color: rgb(255, 255, 255) !important;
}
.acumulado .puntos-normales {
-webkit-border-radius: 54px;
-moz-border-radius: 54px;
position: relative;
border-radius: 54px;
display: inline-block;
font-size: 30px;
height: 63px;
letter-spacing: -2px;
line-height: 126%;
margin: 0 0 0 10px;
padding: 9px 2px 0 0;
text-align: center;
vertical-align: middle;
width: 64px;
}
.acumulado-total .puntos-normales {
width: 84px;
height: 83px;
-webkit-border-radius: 85px;
-moz-border-radius: 85px;
position: relative;
border-radius: 85px;
margin: 0 0 0 10px;
font-size: 33px;
letter-spacing: -2px;
background-color: #ff7900;
padding: 13px 2px 0 0;
display: inline-block;
vertical-align: middle;
text-align: center;
line-height: 155%;
}
.tabla-posiciones-win {
background-color: #010101;
font-family: 'Open Sans';
color: rgb(255, 255, 255);
font-weight: 300;
background-image: url(../img/fondo_pasto.jpg);
}
.row-premios .premios {
width: 100%;
}
.home-container .logo {
width: 200px;
margin: 0 auto;
display: block;
}
.row-premios .col-xs-12 {
padding-left: 0;
padding-right: 0;
}
.home-container div.fondo {
background-size: 80% auto;
background-position: center 0;
left: 0;
top: -60px;
}
.terminos a {
color: #ff0;
}
.terminos ul li {
color: #E2EDB6;
}
.bonus-block p {
text-shadow: 1px 1px 0 #003E66;
}
.bonus-block button {
margin: 8px 0;
}
.bonus-block form {
padding: 10px;
}
.foot-bonus {
background-image: url(../img/bonus-back_2.png);
background-repeat: no-repeat;
background-position: bottom right;
height: 52px;
padding: 0;
bottom: -1px;
position: absolute;
left: 0;
right: 0;
}
.bonus-minus,
.bonus-plus {
border-radius: 30px;
font-weight: bold;
font-size: 28px;
line-height: 27px;
width: 30px;
height: 30px;
padding: 0;
text-align: center;
margin: 0 5px;
display: inline-block;
top: -4px;
}
#tabla-equipos-bonus {
background-color: transparent;
border: 0;
}
#tabla-equipos-bonus .equipo {
background-color: rgba(255, 255, 255, .1);
border-radius: 7px;
cursor: pointer;
}
#tabla-equipos-bonus .equipo td {
color: #98E3FC;
border-bottom: 10px solid #006baf;
cursor: pointer;
}
.bonus-block .table>thead>tr>th,
.bonus-block .table>tbody>tr>th,
.bonus-block .table>tfoot>tr>th,
.bonus-block .table>thead>tr>td,
.bonus-block .table>tbody>tr>td,
.bonus-block .table>tfoot>tr>td {
border-top: 0;
}
#tabla-equipos-bonus .selected td {
color: #FDEF8E;
background-color: #2B9AC0;
}
#tabla-equipos-bonus .selected .check-item {
background-image: url(../img/check.png);
background-position: center;
background-repeat: no-repeat;
width: 50px;
}
#tabla-equipos-bonus .check-item input {
display: none;
}
#tabla-equipos-bonus td.flag div {
width: 26px;
height: 26px;
border-width: 2px;
}
#tabla-equipos-bonus td.flag div span {
width: 22px;
height: 22px;
background-size: auto 22px;
background-position: center 44px;
}
#tabla-equipos-bonus input {
margin-top: 10px;
}
.ganadores-octavos td {
padding: 5px 10px !important;
}
/* FILAS PARTIDOS */
.lista-partidos h4 {
padding: 6px 0;
margin: 30px 0 0 0;
font-size: 1.5em;
text-align: center;
}
.lista-partidos h4 i {
margin-right: 10px;
}
.lista-partidos .partido {
font-size: 1.5rem;
font-weight: 800;
text-transform: uppercase;
font-family: 'Oswald';
text-align: left;
}
.lista-partidos .equipos {
padding: 0;
position: relative;
text-align: center;
}
.lista-partidos .equipos .row {
z-index: 2;
width: 95%;
display: inline-block;
font-weight: 600;
color: rgb(255, 255, 255);
font-family: 'Oswald';
text-transform: uppercase;
padding: 6px 0;
margin: 8px 0;
line-height: 1;
position: relative;
background-color: transparent;
border: 0;
border-radius: 0;
background-size: auto 100%;
}
.lista-partidos.lista-partidos-final .equipos .row {
padding: 14px;
color: #333;
}
.lista-partidos.lista-partidos-final .equipos .row .col {
font-size: 1.8rem;
}
.lista-partidos.lista-partidos-final .equipos .row {
background-color: rgb(255, 246, 215);
}
.lista-partidos.lista-partidos-final .equipos .row:after {
background-image: url('data:image/svg+xml;charset=UTF-8,');
right: -2.1rem;
width: 2.1rem;
}
.lista-partidos.lista-partidos-final .equipos .row:before {
background-image: url('data:image/svg+xml;charset=UTF-8,');
left: -2.1rem;
width: 2.1rem;
}
.lista-partidos.lista-partidos-final .prediccion a,
.lista-partidos.lista-partidos-final .time {
padding-top: 2.5rem !important;
}
.lista-partidos.lista-partidos-semifinal .equipos .row {
background-color: rgb(255, 246, 215);
}
.lista-partidos.lista-partidos-semifinal .equipos .row:after {
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
.lista-partidos.lista-partidos-semifinal .equipos .row:before {
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
.lista-partidos.lista-partidos-final .time {
padding: 2.3rem 0;
}
.lista-partidos .equipos .row .col {
text-align: left;
padding-left: 5px;
padding-right: 0;
font-size: 1.3rem;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
.lista-partidos .equipos .row .col:first-child {
text-align: right;
background-image: url(../img/divisor-partidos.png);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: right;
padding-right: 17px;
padding-left: 2px;
}
.lista-partidos .equipos .row:after {
content: '';
height: 100%;
width: 2rem;
position: absolute;
right: -2rem;
top: 0;
bottom: 0;
display: block;
background-size: auto 100%;
background-position: right center;
}
.lista-partidos .equipos .row:before {
content: '';
height: 100%;
width: 2rem;
position: absolute;
left: -2rem;
top: 0;
bottom: 0;
display: block;
background-size: auto 100%;
background-position: left center;
}
.lista-partidos .equipos .row {
color: #777;
background-color: rgb(255, 255, 255);
}
.lista-partidos .predicho .equipos .row {
color: #204f6d;
}
.lista-partidos .equipos .resultado {
color: #66caE1 !important;
}
.lista-partidos .equipos .row:after {
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
.lista-partidos .equipos .row:before {
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
.lista-partidos .flag {
float: right;
margin-top: 6px;
}
.lista-partidos .equipos .row .col:first-child .flag {
float: left;
}
.lista-partidos .partido.predicho.jugado .equipos .col.error {
color: #fec019 !important;
}
.lista-partidos .partido.predicho.jugado .equipos .col.acierto {
color: #27a962 !important;
}
.lista-partidos .partido.predicho.jugado.level-1 .equipos .col.acierto .counter {
background-color: #66caE1;
}
.lista-partidos .counter {
border-radius: 4px;
background-color: #aaa;
color: rgb(255, 255, 255);
display: inline-block;
padding: 8px 6px;
line-height: 1;
margin: 5px;
text-align: center;
}
.lista-partidos .predicho .counter {
background-color: #204f6d;
}
.lista-partidos .partido.predicho.jugado .error .counter {
background-color: #fec019;
}
.lista-partidos .partido.predicho.jugado .acierto .counter {
background-color: #27a962;
}
.lista-partidos .time {
text-transform: uppercase;
color: rgb(255, 255, 255);
text-align: right;
font-size: .75em;
padding: 1.7rem 0;
padding-right: 2.5rem !important;
}
.lista-partidos .time i {
margin-right: 8px;
}
.lista-partidos .time.level-3 .ptos {
font-size: 1.3rem;
font-weight: 800;
color: #66caE1;
}
.lista-partidos .time.level-2 .ptos {
font-size: 1.2rem;
color: #66caE1;
}
.lista-partidos .partido.predicho.jugado .time {
padding: 1.5rem 2.5rem 1.7rem 0;
}
.lista-partidos .partido.predicho.jugado .ptos.level-3 {
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
color: #fec019;
padding: 5px 8px 5px 5px;
letter-spacing: -1px;
font-size: 1.3rem;
font-weight: 800;
}
.lista-partidos .partido.predicho.jugado .ptos.level-2,
.lista-partidos .partido.predicho.jugado .ptos.level-1 {
color: #66caE1;
font-size: 110%;
}
.lista-partidos .partido.predicho.jugado .ptos.level-2 {
background-color: #66caE1;
color: #494951;
border-radius: 100%;
display: inline-block;
width: 26px;
height: 26px;
text-align: center;
padding-right: 2px;
}
.lista-partidos .ptos.level-0 {
color: rgb(255, 255, 255, .4);
}
.lista-partidos .prediccion {
padding: 0;
}
.lista-partidos .prediccion a {
text-transform: none;
font-family: 'Titillium Web';
color: rgb(255, 255, 255);
text-align: left;
font-size: .6em;
font-weight: 400;
padding: 1.5rem 0;
line-height: 1;
padding-left: 2.5rem;
display: flex;
align-items: center;
}
.lista-partidos .prediccion .block {
padding: 1.5rem 0;
line-height: 1;
display: flex;
padding-left: 2.5rem;
}
.lista-partidos .prediccion a .icon {
display: inline-block;
color: rgb(255, 255, 255);
border-radius: 100%;
line-height: 24px;
width: 24px;
height: 24px;
font-size: 1.3em;
text-align: center;
float: left;
margin-right: 5px;
flex: 0 0 24px
}
.lista-partidos .prediccion a:hover {
text-decoration: none !important;
color: #ff0;
}
.lista-partidos .prediccion a .icon-alert {
font-weight: 800;
font-size: 1em;
background-color: #f11753;
color: rgb(255, 255, 255);
}
/* Tune para llaves */
.lista-partidos-llaves .equipos .row .col:first-child {
background-image: none;
padding-right: 0;
}
.lista-partidos-llaves .partido.predicho.jugado .time {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.lista-partidos-llaves>row {
position: relative;
}
html,
body {
height: 100%;
}
.is-table-row {
display: table;
}
.is-table-row [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
.lista-partidos-llaves .partido {
margin-bottom: 40px;
}
.lista-partidos-llaves .partido-left .partido>div {
text-align: center;
padding-right: 22%;
margin-right: 6%;
padding-bottom: 0;
padding-top: 0;
}
.lista-partidos-llaves .partido-right .partido>div {
text-align: center;
padding-left: 22%;
margin-left: 6%;
padding-bottom: 0;
padding-top: 0;
}
.lista-partidos-llaves .partido-left .counter {
float: right;
margin-left: 8px;
}
.lista-partidos-llaves .partido-right .counter {
float: left;
margin-right: 8px;
}
.lista-partidos-llaves .prediccion {
text-align: center !important;
}
.lista-partidos-llaves .prediccion>a {
text-align: center !important;
padding: 0;
display: inline-flex;
}
.lista-partidos-llaves .equipos {
padding-left: 30px;
background-image: url(../img/llave.png);
background-size: auto 100%;
background-position: right center;
background-repeat: no-repeat;
}
.lista-partidos-llaves .partido-right .equipos {
background-image: url(../img/llave2.png);
background-size: auto 100%;
background-position: left center;
background-repeat: no-repeat;
}
.lista-partidos-llaves .equipos .row {
line-height: 3rem;
display: inline-flex;
text-align: left;
}
.lista-partidos-llaves .partido-left .equipos .row {
text-align: right;
}
.lista-partidos-llaves .partido-left .equipos {
text-align: right;
}
.lista-partidos-llaves .partido-left .prediccion {
text-align: center;
}
.lista-partidos-llaves .partido-left .flag {
float: left;
}
.lista-partidos-llaves .equipos .row>div {
padding: 0;
}
.mylead {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
padding: 0 10px 10px 10px;
}
.leaderboard {
padding-bottom: 30px;
margin-left: 15px;
}
.sidebar .leaderboard,
.leaderboard.leaderboard-favs {
padding-bottom: 0;
}
.leaderboard table {
width: 100%;
line-height: 1;
text-align: left;
font-size: .9em;
margin-bottom: 15px;
color: #f9db72;
}
.leaderboard tr {
border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.leaderboard tr.last,
.leaderboard tr:last-child {
border-bottom: 0;
}
.leaderboard td {
padding: 3px 0;
transition: all .2s ease 0s;
-webkit-transition: all .2s ease 0s;
-moz-transition: all .2s ease 0s;
cursor: pointer;
line-height: 1.2;
}
.leaderboard th {
padding: 5px;
}
.leaderboard tbody tr:hover td {
background-color: rgba(255, 255, 255, .05);
}
.leaderboard tbody tr.me:hover td {
background-color: rgba(235, 235, 235, 1);
}
.leaderboard td:first-child {
width: 50px;
position: relative;
}
.leaderboard tr.divider {
border-bottom: 1px dashed rgba(255, 255, 255, .3);
border-top: 1px dashed rgba(255, 255, 255, .3);
background-image: url(../img/leaderboard-divider.png);
background-repeat: no-repeat;
background-position: center;
height: 50px;
}
.leaderboard tr.divider td {
text-align: center;
}
.leaderboard .podio td:last-child {
font-size: 1.1rem;
}
.leaderboard .sucursal,
.leaderboard .cargo {
display: inline-block;
font-weight: 400;
opacity: .8;
}
.leaderboard .grupo {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.leaderboard .me td {
background-color: rgba(235, 235, 235, 1);
position: relative;
color: #204f6d;
font-size: 1.1em;
font-weight: 800;
line-height: 1;
}
.leaderboard .me td strong {
letter-spacing: -.03em;
}
.leaderboard .me td .sucursal,
.leaderboard .me td .cargo {
font-size: .8em;
}
.leaderboard .item .level-logo {
display: block;
width: 48px;
height: auto;
position: absolute;
left: 0;
top: 2px;
z-index: 1000;
}
.leaderboard .me td:last-child:after {
content: ' ';
position: absolute;
right: -15px;
top: 0;
bottom: 0;
background-color: rgba(235, 235, 235, 1);
border-radius: 100%;
width: 31px;
z-index: 1;
}
.leaderboard .me td:first-child:before {
content: ' ';
position: absolute;
left: -15px;
top: 0;
bottom: 0;
background-color: rgba(235, 235, 235, 1);
border-radius: 100%;
width: 31px;
z-index: 1;
}
.leaderboard td.puntos {
text-align: right;
padding-right: 10px;
}
.leaderboard .me td.puntos strong {
z-index: 2;
position: relative;
font-size: 1.8em;
}
.leaderboard .me .position {
padding: 4px 8px;
line-height: 19px;
min-width: 28px;
height: 28px;
margin-left: -10px;
margin-top: -15px;
font-size: 1em;
color: rgb(255, 255, 255) !important;
background-color: #204f6d;
border-width: 2px;
border-color: rgb(255, 255, 255);
}
.leaderboard .picture {
display: inline-block;
width: 100%;
}
.leaderboard .picture .flag {
display: none;
}
.leaderboard .avatar {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
width: 50px;
height: 42px;
float: left;
transform: scale(.9, .9);
mask: url(../img/avatars/clip.svg);
-webkit-mask: url(../img/avatars/clip.svg);
-o-mask: url(../img/avatars/clip.svg);
-ms-mask: url(../img/avatars/clip.svg);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.leaderboard .position {
text-align: center;
font-weight: 800;
position: absolute;
left: -11px;
background-color: rgb(255, 255, 255);
border-radius: 40px;
padding: 4px;
font-size: 1.1em;
min-width: 23px;
height: 23px;
top: 50%;
line-height: 14px;
z-index: 200;
margin-top: -12px;
color: #204f6d;
border: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, .7);
/*border: 3px solid #4b4d59;*/
}
.leaderboard .podio {
color: rgb(255, 255, 255);
background-color: rgba(238, 255, 163, .17);
}
.leaderboard .podio .position {
padding: 5px;
width: 28px;
height: 28px;
margin-top: -15px;
font-size: 1.3em;
z-index: 200;
line-height: 1;
color: #fec019 !important;
}
.leaderboard .podio.me .position {
color: rgb(255, 255, 255);
font-size: 1.3rem;
width: 30px;
height: 30px;
line-height: 19px;
}
.leaderboard .podio .puntos {
font-size: 1.2em;
}
.leaderboard .avatar:after {
opacity: 0;
background-color: rgba(0, 0, 0, .6);
position: absolute;
z-index: 1;
width: 100%;
top: 0;
left: 0;
bottom: 0;
content: '';
transition: all .2s ease 0s;
-webkit-transition: all .2s ease 0s;
-moz-transition: all .2s ease 0s;
}
.leaderboard td.add-favorito:hover *,
.leaderboard td.rm-favorito:hover * {
color: rgb(255, 255, 255);
}
.leaderboard td.add-favorito,
.leaderboard td.rm-favorito {
min-width: 60px;
font-size: 1.4em;
}
.leaderboard td.add-favorito a,
.leaderboard td.rm-favorito a {
text-decoration: none;
}
.leaderboard td.add-favorito a:focus,
.leaderboard td.rm-favorito a:focus {
color: inherit;
}
.leaderboard td.add-favorito .icon-plus,
.leaderboard td.add-favorito .icon-minus,
.leaderboard td.rm-favorito .icon-plus {
display: none;
}
.leaderboard td.add-favorito:hover .icon-plus {
display: inline-block;
}
.leaderboard td.rm-favorito:hover .icon-minus {
display: inline-block;
}
.leaderboard td.rm-favorito:hover .icon-heart,
.leaderboard td.add-favorito:hover .icon-heart {
display: none;
}
.leaderboard-players {
/*height: 550px;*/
}
.leaderboard-scroll {
max-height: 500px;
min-height: 200px;
overflow-y: auto;
padding: 0 20px 0 15px;
margin: 0;
}
.leaderboard-search {
padding: 20px 20px 20px 0;
margin: 0;
}
div.leaderboard-scroll>div.no-result.text-center {
padding: 20px 0;
border-top: 1px dashed rgba(255, 255, 255, .8);
}
.leaderboard-search h3 {
margin-top: 5px;
}
.leaderboard-search .input-group {
margin-right: -65px;
}
.leaderboard-search .input-group-addon {
background-color: transparent;
border-color: rgba(255, 255, 255, .3);
padding: 5px 12px;
}
.leaderboard-search .input-group-addon {
color: rgb(255, 255, 255);
}
.leaderboard-search .input-group-addon.cancel {
font-size: 1.3em;
border-width: 0;
transition: opacity .2s ease 0s;
-webkit-transition: opacity .2s ease 0s;
-moz-transition: opacity .2s ease 0s;
opacity: 0;
cursor: pointer;
}
.leaderboard-search .form-control {
padding: 5px 12px;
border-color: rgba(255, 255, 255, .3);
border-width: 2px;
border-radius: 8px;
height: 40px;
}
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.leaderboard-search .form-control:focus {
border-color: #fddc70;
}
.leaderboard-groups {
padding-left: 30px;
}
.leaderboard.leaderboard-group .uppercase {
font-size: 1.3em;
font-weight: 600;
width: 100%;
}
.leaderboard.leaderboard-group .jugadores {
font-size: .6em;
padding: 3px 0;
opacity: .8;
font-weight: 600;
}
.leaderboard.leaderboard-group .podio .puntos {
font-size: 1.6em;
}
.leaderboard.leaderboard-group .me .puntos {
font-size: 1.2em;
padding-top: 4px;
}
.leaderboard.leaderboard-group th {
padding: 8px;
}
.leaderboard.leaderboard-group td {
padding: 8px;
min-width: 45px;
}
.leaderboard.leaderboard-group .podio .position {
width: 40px;
height: 40px;
font-size: 1.7em;
line-height: 30px;
margin-top: -20px;
left: 0;
}
.leaderboard.leaderboard-group .me .position {
color: rgb(255, 255, 255);
z-index: 100;
font-size: 1.5em;
}
.leaderboard-favs-total {
text-align: right;
font-size: 1em;
font-weight: 500;
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: row;
}
.leaderboard-favs-total .total {
font-size: 2em;
text-align: right;
font-weight: 800;
}
/* width */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #2f2e34;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #eee;
border: 1px solid #2f2e34;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(255, 255, 255);
}
.modal .modal-dialog {
max-width: 98%;
margin: 2% auto;
}
.modal-usuario .modal-dialog {
width: 780px;
max-width: 98%;
margin: 2% auto;
}
.modal-usuario .modal-content {
color: rgb(255, 255, 255);
}
.modal-usuario .avatar {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
width: 180px;
height: 151px;
float: left;
transform: scale(.9, .9);
mask: url(../img/avatars/clip.svg);
-webkit-mask: url(../img/avatars/clip.svg);
-o-mask: url(../img/avatars/clip.svg);
-ms-mask: url(../img/avatars/clip.svg);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.modal-usuario .level-badge {
position: absolute;
left: 18px;
top: 6px;
width: 70px;
z-index: 1000;
}
.modal-usuario .posicion,
.modal-usuario .puntaje {
background-color: rgba(235, 235, 235, 1);
border-radius: 10px;
padding: 0;
line-height: 2;
color: #fec019;
overflow: hidden;
}
.modal-usuario .posicion span {
color: #fec019;
font-size: 3rem;
font-weight: 800;
display: block;
line-height: 1;
letter-spacing: -2px;
padding: 8px 10px 10px;
background-color: rgb(255, 255, 255);
}
.modal-usuario .puntaje span {
color: #fec019;
font-size: 3rem;
font-weight: 800;
display: block;
line-height: 1;
letter-spacing: -2px;
padding: 8px 10px 10px;
background-color: rgb(255, 255, 255);
}
.modal-usuario .row.detalle .col-first {
clear: both;
}
.premios .premio {
position: relative;
background-color: #fff;
color: #666;
border-radius: 8px;
box-shadow: 0 0 25px rgba(0, 0, 0, .25);
transition: all .2s ease 0s;
-webkit-transition: all .2s ease 0s;
-moz-transition: all .2s ease 0s;
cursor: pointer;
margin-bottom: 25px;
position: relative;
overflow: hidden;
}
.premios .new {
background-color: #fff271;
color: #905050;
position: absolute;
z-index: 1000;
right: 8px;
padding: 4px 14px;
font-weight: 600;
text-transform: uppercase;
font-size: .75rem;
top: 7px;
border-radius: 2px;
}
.premios .info {
padding: 5px 15px;
}
.premios .premio:hover {
box-shadow: 0 0 25px rgba(0, 0, 0, .45);
}
.premios img {
z-index: 5;
position: relative;
}
.premios img.medalla {
position: absolute;
z-index: 10;
top: 0;
left: 15%;
width: 35%;
height: auto;
}
.premios img.prod {
position: relative;
z-index: 1;
/*max-height: 200px; */
margin: 0 auto;
/*border-top-right-radius: 8px;
border-top-left-radius: 8px;*/
}
.premios-secundarios {
border-top: 1px dashed rgba(255, 255, 255, .8);
}
.premios-secundarios img.premio {
max-height: 150px;
max-width: 100%;
margin: 0 20px 0 0;
float: right;
}
.premios-secundarios .premio {
text-align: left;
}
.premios-secundarios .imagen {
text-align: right;
}
.premios-secundarios img.medalla {
width: 100px;
right: 0;
left: auto
}
.premios .puntos {
float: right;
font-weight: 600;
text-align: right;
}
.premios .puntos span {
font-size: .6em;
font-weight: 300;
display: block;
}
.premios .dispo {
font-size: .8em;
font-weight: 600;
}
.premios hr {
margin-top: 10px;
margin-bottom: 10px;
}
.premios .nombre {
font-weight: 600;
font-size: 1em;
color: #66caE1;
margin-bottom: 0;
line-height: 1;
margin: 10px 0;
height: 35px;
text-transform: none;
}
.premios .premio button.btn-primary {
font-size: .9em;
margin: 10px auto;
display: block;
background-color: #eee;
}
.premios .premio button.btn-primary:hover {
background-color: #007CC2;
color: #fff;
}
.premios p {
font-weight: 400;
margin: 0 30px;
}
.premios p.posicion {
margin-left: 0;
margin-right: 0;
}
.premios-secundarios p {
margin: 0;
}
.premios .premios-header {
margin-top: 20px;
}
.premios .premios-header h3 {
font-weight: 300;
margin-top: 0;
font-size: 1.1rem;
}
.premios .premios-header h3 strong {
display: block;
font-weight: 600;
font-size: 1.6rem;
}
.premios .premios-header .input-group .form-control {
padding: 5px 14px 6px;
height: 36px;
border-color: rgba(255, 255, 255, .2);
}
.premios .premios-header .input-group .input-group-addon {
border-top-left-radius: 17px;
border-bottom-left-radius: 17px;
border: 0;
}
.premios .premios-header .input-group .input-group-addon:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
cursor: pointer;
}
.selector_categorias {
position: absolute;
right: 0;
left: 0;
z-index: 1000;
}
.selector_categorias .block .current .text {
font-size: .9rem;
}
.selector_categorias .block a {
font-size: .9rem;
padding: 5px 20px;
}
.selector_categorias .block {
width: 100%;
}
.premios .cats {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 10px;
z-index: 10;
font-size: 12px;
text-transform: uppercase;
font-weight: 800;
opacity: 0;
transition: all .2s ease 0s;
-webkit-transition: all .2s ease 0s;
-moz-transition: all .2s ease 0s;
}
.premios .cats:after {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
/* IE6-9 */
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200%;
content: '';
z-index: 1;
opacity: .4;
}
.premios .cats .tag {
padding: 1px 8px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
z-index: 100;
position: relative;
display: inline-block;
margin-top: 5px;
}
.premios .premio:hover .cats {
opacity: 1;
}
.sidebar .premio {
margin: 10px 0 19px;
padding: 9px 0 23px;
background-image: url(../img/line.png);
background-position: center bottom;
background-repeat: no-repeat;
}
.sidebar img.premio {
background: none;
padding-bottom: 5px;
float: left;
max-width: 38%;
}
.sidebar .onlyimage img.premio {
float: none;
max-width: 100%;
}
.sidebar .premios h2 {
font-size: 1.3em;
margin-bottom: 5px;
}
.sidebar .premios h3 {
font-size: .9em;
margin-top: 0;
}
.sidebar .premios p {
font-size: .9em;
padding: 0;
margin: 5px 0;
}
.sidebar .premio img.medalla {
top: 0;
left: -14px;
width: 24%;
}
.sidebar .premio div {
padding-left: 45%;
text-align: left;
}
.perfil-container {}
.perfil-container .avatar {
padding: 0;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
position: relative;
width: 100%;
margin: 20px;
overflow: hidden;
border-radius: 300px;
justify-content: center;
align-items: center;
display: flex;
overflow: visible;
}
.perfil-container .avatar img {
width: 100%;
height: auto;
}
.perfil-container .avatar a {
position: absolute;
display: block;
opacity: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
transition: all .2s ease 0s;
-webkit-transition: all .2s ease 0s;
-moz-transition: all .2s ease 0s;
z-index: 10;
}
.perfil-container .avatar:after {
opacity: 0;
background-color: rgba(0, 0, 0, .6);
position: absolute;
z-index: 1;
width: 100%;
top: 0;
left: 0;
bottom: 0;
content: '';
transition: all .2s ease 0s;
-webkit-transition: all .2s ease 0s;
-moz-transition: all .2s ease 0s;
border-radius: 100%;
}
.perfil-container .avatar:before {
content: ' ';
border: 10px solid rgba(0, 0, 0, .2);
position: absolute;
left: -10px;
top: -10px;
bottom: -10px;
right: -10px;
border-radius: 100%;
}
.perfil-container .modal .avatar:after {
display: none;
}
.perfil-container .modal .avatar {
width: 80%;
margin: 10px auto;
position: relative;
overflow: inherit;
}
.perfil-container .modal .avatar:before {
content: ' ';
border: 10px solid rgba(0, 0, 0, .1);
position: absolute;
left: -10px;
top: -10px;
bottom: -10px;
right: -10px;
border-radius: 100%;
}
.perfil-container .avatar i {
opacity: 1;
font-size: 3em;
color: #f00;
z-index: 2;
text-shadow: 0 0 1px rgba(0, 0, 0, .3);
cursor: pointer;
padding: 10px;
position: absolute;
left: 50%;
}
.perfil-container .avatar:hover:after {
opacity: .5;
}
.perfil-container .avatar:hover a {
opacity: 1;
}
.perfil-container h2 {
font-size: 2.7rem;
line-height: 1
}
.perfil-container h2 .grupo {
font-size: 1.2rem;
font-weight: 700;
display: inline-block;
line-height: 3rem;
vertical-align: top;
margin-left: 20px;
}
.perfil-container h2 .grupo span {
border-left: 2px solid rgba(255, 255, 255, .8);
color: rgb(255, 255, 255);
padding: 0 30px;
/*border-radius: 3rem;*/
}
.perfil-container .info {
padding-left: 20px;
}
.perfil-container .info hr {
opacity: .6;
border-color: rgb(255, 255, 255);
}
.perfil-container .info .item {
font-size: 1.5rem;
text-transform: uppercase;
text-align: center;
font-weight: 700;
font-family: 'Oswald';
}
.perfil-container .info .item .pill {
margin: 10px auto;
font-size: 2.2rem;
display: block;
font-weight: 700;
border-radius: 50px;
transition: all .2s ease 0s;
-webkit-transition: all .2s ease 0s;
-moz-transition: all .2s ease 0s;
background-color: rgb(255, 255, 255);
color: #204f6d;
padding: .25em;
max-width: 90%;
line-height: 1;
text-align: center;
line-height: 40px;
}
.perfil-container .info .item strong {
height: 70px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
line-height: 1;
}
.perfil-container .info .item .pill.grupo {
font-size: 1.5rem;
line-height: 1.1;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.perfil-container .info .item .btn-sm {
font-size: .6em;
padding: 4px 14px;
border-color: transparent;
}
.perfil-container .info .item:hover .btn-sm {
border-color: rgba(255, 255, 255, .8);
}
.perfil-container .logros h6 {
opacity: .7;
}
.nav-stacked {
display: flex;
flex-direction: column;
}
.nav-stacked li {
display: block;
}
.nav-stacked>li>a i {
width: 20px;
margin-right: 5px;
display: inline-block;
text-align: center;
}
.nav-stacked>li>a {
display: block;
color: #444;
background-color: transparent;
border-radius: 6px;
border: 0;
text-align: left;
padding-left: 10%;
}
.nav-stacked>li>a:hover {
background-color: rgb(0 0 0 / 2%);
border: 0;
}
.nav-stacked>li.active>a,
.nav-stacked>li.active>a:hover,
.nav-stacked>li.active>a:focus {
color: #222;
background-color: rgb(0 0 0 / 6%);
border: 0;
}
.avatares {
text-align: center;
}
.avatares h4 {
margin-bottom: 30px;
text-align: center;
}
.avatares .avatar {
display: inline-block;
margin: 10px !important;
width: 90px !important;
cursor: pointer;
}
.avatares .avatar:before {
border: 5px solid rgba(255, 255, 255, .3) !important;
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
left: -5px !important;
right: -5px !important;
top: -5px !important;
bottom: -5px !important;
}
.avatares .avatar:hover:before {
border: 5px solid rgba(255, 255, 255, .5) !important;
}
.noticias .noticia {
display: block;
max-width: 98%;
margin: 0 auto;
background-color: rgba(0, 0, 0, .3);
padding: 20px 5px;
border-radius: 10px;
}
.noticias p {
font-size: 1.15em;
color: rgb(255, 255, 255);
}
.noticias h2 {
font-size: 2.3em;
}
.noticias h5 {
font-weight: 400;
opacity: .8;
}
.noticias hr {
border-color: rgba(255, 255, 255, .5);
}
.noticias .image {
overflow: hidden;
border-radius: 8px;
box-shadow: 0 0 50px rgba(0, 0, 0, .5);
}
.noticias .image img {
max-width: 100%;
}
.noticias .btn-link {
border: 0;
color: rgba(255, 255, 255, .9);
letter-spacing: 0;
background-color: rgba(255, 255, 255, .2);
}
.noticias .contenido {
margin-bottom: 50px;
}
.noticias .contenido p {
font-size: 1rem
/* !important*/
;
}
.noticias .contenido iframe {
max-width: 100%;
}
body.home .noticias {
margin-bottom: 100px;
margin-top: 60px;
}
body.blog .noticias .image {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
margin: -10px -10px 20px -10px;
box-shadow: 0;
}
body.blog .noticias p {
font-size: 1.3rem;
}
body.blog .noticia {
margin-bottom: 50px;
}
.carousel-banners .carousel-indicators {
bottom: -10px;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-indicators .active {
width: 11px;
height: 11px;
}
.carousel-indicators li {
margin: 4px 4px !important;
}
.carousel-inner {
margin-bottom: 30px;
}
.carousel-inner img {
display: inline-block !important;
}
.carousel-indicators li {
transition: opacity .4s ease 0s;
-webkit-transition: opacity .4s ease 0s;
-moz-transition: opacity .4s ease 0s;
opacity: .5;
border-color: transparent;
background-color: rgb(255, 255, 255);
width: 8px;
height: 8px;
margin: 2px 3px;
}
.carousel-indicators li.active {
opacity: 1;
}
.carousel-banners .carousel-indicators {
bottom: -10px;
}
.carousel-indicators li {
background-color: #aaaaaa50;
}
.carousel-indicators .active {
background-color: #888888aa;
}
.carousel-control-prev {
background-image: url(../img/arrow-left.svg);
background-size: 2rem auto;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
position: absolute;
top: 0;
bottom: 30px;
width: 3rem;
left: 1rem;
opacity: .6;
transition: opacity .3s ease-in;
}
.carousel-control-next {
background-image: url(../img/arrow-right.svg);
background-size: 2rem auto;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
position: absolute;
top: 0;
bottom: 30px;
width: 3rem;
right: 1rem;
opacity: .6;
transition: opacity .3s ease-in;
}
.carousel-banners:hover .carousel-control-next,
.carousel-banners:hover .carousel-control-prev {
opacity: 1;
}
.vertical .carousel-inner {
height: 100%;
}
.vertical .carousel-inner>.item {
-webkit-transition: .6s ease-in-out top;
-o-transition: .6s ease-in-out top;
transition: .6s ease-in-out top;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
.vertical .carousel-inner>.item {
-webkit-transition: -webkit-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
.vertical .carousel-inner>.item.next,
.vertical .carousel-inner>.item.active.right {
top: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.vertical .carousel-inner>.item.prev,
.vertical .carousel-inner>.item.active.left {
top: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.vertical .carousel-inner>.item.next.left,
.vertical .carousel-inner>.item.prev.right,
.vertical .carousel-inner>.item.active {
top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.vertical .carousel-inner>.active {
top: 0;
}
.vertical .carousel-inner>.next,
.vertical .carousel-inner>.prev {
top: 0;
height: 100%;
width: auto;
}
.vertical .carousel-inner>.next {
left: 0;
top: 100%;
}
.vertical .carousel-inner>.prev {
left: 0;
top: -100%
}
.vertical .carousel-inner>.next.left,
.vertical .carousel-inner>.prev.right {
top: 0;
}
.vertical .carousel-inner>.active.left {
left: 0;
top: -100%;
}
.vertical .carousel-inner>.active.right {
left: 0;
top: 100%;
}
.vertical .carousel-indicators {
right: -14px;
left: auto;
width: 22px;
margin: 0;
top: 0;
vertical-align: middle;
bottom: 0;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.carousel-indicators li {
margin: 4px 3px;
}
.block-trivia {
margin-top: 50px;
background-color: rgba(238, 255, 163, .3);
border-radius: 10px;
padding: 0 20px 25px 20px;
}
.block-trivia h3 {
margin-top: -24px;
float: left;
width: 100%;
margin-bottom: 20px;
}
.block-trivia h4 {
clear: both;
font-size: 1.4rem;
text-shadow: 0 0 10px rgba(0, 0, 0, .6);
display: block;
}
.block-trivia .btn {
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.block-trivia .respondida {
font-style: italic;
}
/* ################################################################################################################################## */
/* ################################################################################################################################## */
/* MODULO DE MENSAJES y COMENTARIOS */
.block-muro {
margin-top: 50px;
border-radius: 10px;
padding: 0 20px 25px 20px;
}
.block-muro h3 {
margin-top: -24px;
float: left;
width: 100%;
margin-bottom: 20px;
}
.block-muro h4 {
clear: both;
font-size: 1.4rem;
text-shadow: 0 0 10px rgba(0, 0, 0, .6);
display: block;
}
.comentarios-empty {
margin-bottom: 15px;
}
.comentarios-empty .alert {
background-color: transparent;
padding: 0;
}
.comentarios-noticia {
border-top: 2px solid rgba(255, 255, 255, .2);
}
.comentarios-noticia .badge {
background-color: #fff;
color: #204f6d;
width: 20px;
height: 20px;
line-height: 20px;
padding: 0;
vertical-align: middle;
}
.comentarios-noticia .comentarios-add {
margin: 0 0 5px 0;
background-color: rgba(0, 0, 0, .06);
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 10px;
padding: 10px;
}
.comentarios-noticia .comments {
overflow-y: auto;
overflow-x: hidden;
margin-right: -15px;
padding-right: 10px;
max-height: 500px;
}
.comentarios-item {
color: #fff;
margin-bottom: 5px;
border-radius: 10px;
background-color: rgba(0, 0, 0, .06);
border: 1px solid rgba(0, 0, 0, 0);
padding: 10px 10px 10px 80px;
transition: ease-in-out .3s all;
}
.comentarios-item .btn-responder {
float: right;
opacity: 0;
font-size: .65rem !important;
margin: 0 10px;
}
.comentarios-item:hover .btn-responder {
opacity: 1;
}
.comentarios-item .autor {
margin-left: -69px;
}
.comentarios-item .respuestas .autor {
margin-left: 0;
}
.comentarios-item .respuestas .autor .avatar {
margin-right: 10px;
}
.comentarios-item p.contenido {
font-size: .9rem !important;
margin: 0 0 15px 0;
padding: 0 0 10px 0;
}
.comentarios-item p.contenido a {
color: #E2EDB6;
}
.comentarios-item p.contenido .image {
display: block;
}
.comentarios-item:hover {
background-color: rgba(0, 0, 0, .17);
/*border: 1px solid rgba(0,0,0,.35); */
}
.comentarios-item .avatar,
.modal-mensajes .avatar {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
width: 45px;
height: 45px;
float: left;
margin-right: 15px;
margin-left: 8px;
margin-top: 0;
transform: scale(.9, .9);
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.comentarios-item .name {
text-align: left;
display: block;
text-transform: none;
font-size: .9rem;
font-weight: 700;
padding-left: 60px;
color: #f9db72;
}
.comentarios-item .date {
font-size: .7rem;
font-weight: 400;
}
.comentarios-item .contenido p {
margin-bottom: 5px;
padding-left: 60px;
}
.comentarios-item .contenido {
font-family: 'Titillium Web';
font-size: 13px;
text-align: left;
font-weight: 400;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
}
.comentarios-item .btn-responder {
font-size: 12px;
line-height: 13px;
padding: 3px 10px;
margin-left: 5px;
border-color: transparent;
}
.comentarios-item:hover .btn-responder {
border-color: #fff;
}
.comentarios-item .btn-responder:focus {
color: #fff;
}
.comentarios-item .respuestas {
margin-left: 20px;
text-align: left;
position: relative;
}
.comentarios-item .respuestas:after {
content: '';
border-left: 1px solid rgba(255, 255, 255, .9);
/*border-bottom: 1px solid rgba(255,255,255,.9);*/
position: absolute;
top: 0;
bottom: 10px;
left: -10px;
/*height: 30px;*/
width: 10px;
}
.comentarios-item .respuestas .avatar {
margin: 0;
width: 33px;
height: 33px;
}
.comentarios-item .respuestas .contenido .name,
.comentarios-item .respuestas .contenido p {
padding-left: 40px;
}
.mensajes-item {
color: #fff;
margin-bottom: 5px;
border-radius: 10px;
background-color: rgba(0, 0, 0, .06);
border: 1px solid rgba(0, 0, 0, 0);
padding: 10px 10px 10px 10px;
transition: ease-in-out .3s all;
}
.mensajes-item .btn-responder {
float: right;
opacity: 0;
font-size: .65rem !important;
margin: 0 10px;
}
.mensajes-item:hover .btn-responder {
opacity: 1;
}
.mensajes-item .autor {
margin-left: -69px;
}
.mensajes-item .respuestas .autor {
margin-left: 0;
}
.mensajes-item .respuestas .autor .avatar {
margin-right: 10px;
}
.mensajes-item p.contenido {
font-size: .9rem !important;
margin: 0 0 15px 0;
padding: 0 0 10px 0;
}
.mensajes-item p.contenido a {
color: #E2EDB6;
}
.mensajes-item p.contenido .image {
display: block;
}
.mensajes-item:hover {
background-color: rgba(0, 0, 0, .17);
/*border: 1px solid rgba(0,0,0,.35); */
}
.mensajes-item .avatar,
.modal-mensajes .avatar {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
width: 45px;
height: 45px;
float: left;
margin-right: 15px;
margin-left: 8px;
margin-top: 0;
transform: scale(.9, .9);
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.mensajes-item .name {
text-align: left;
display: block;
text-transform: none;
font-size: .9rem;
font-weight: 700;
padding-left: 60px;
color: #f9db72;
}
.mensajes-item .date {
font-size: .7rem;
font-weight: 400;
}
.mensajes-item .contenido p {
margin-bottom: 5px;
padding-left: 65px;
}
.mensajes-item .contenido {
font-family: 'Titillium Web';
font-size: 13px;
text-align: left;
font-weight: 400;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
}
.mensajes-item .btn-responder {
font-size: 12px;
line-height: 13px;
padding: 3px 10px;
margin-left: 5px;
border-color: transparent;
}
.mensajes-item:hover .btn-responder {
border-color: #fff;
}
.mensajes-item .btn-responder:focus {
color: #fff;
}
.mensajes-item .respuestas {
margin-left: 20px;
text-align: left;
position: relative;
}
.mensajes-item .respuestas:after {
content: '';
border-left: 1px solid rgba(255, 255, 255, .9);
/*border-bottom: 1px solid rgba(255,255,255,.9);*/
position: absolute;
top: 0;
bottom: 10px;
left: -10px;
/*height: 30px;*/
width: 10px;
}
.mensajes-item .respuestas .avatar {
margin: 0;
width: 33px;
height: 33px;
}
.mensajes-item .respuestas .contenido .name,
.mensajes-item .respuestas .contenido p {
padding-left: 40px;
}
.modal-mensajes .modal-content {
color: #fff;
padding-bottom: 0;
}
/*.modal hr {
background-color: rgba(0, 0, 0, .1);
}*/
.modal-mensajes .modal-content .mensaje-parent {
background-color: rgba(255, 255, 255, .1);
border-radius: 10px;
padding: 10px;
margin-bottom: 15px;
text-align: left;
}
.modal-mensajes .modal-content .autor {
font-family: 'Titillium Web';
text-transform: none;
font-size: 16px;
}
.modal-mensajes .modal-content .date {
font-family: 'Titillium Web';
text-transform: none;
font-weight: 400;
font-size: 14px;
}
.modal-mensajes .avatar {
width: 60px;
height: 60px;
margin-right: 20px;
}
@-webkit-keyframes updated {
0% {
background-color: rgba(255, 255, 255, .25);
}
100% {
background-color: rgba(0, 0, 0, .15);
}
}
.updated {
-webkit-animation-name: updated;
-webkit-animation-duration: 900ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
}
/* ################################################################################################################################## */
/* ################################################################################################################################## */
/* Toast Tune */
#toast-container>div {
opacity: 1 !important;
}
.modal-grupo .modal-dialog {
width: 700px;
max-width: 98%;
margin: 2% auto;
}
.modal-grupo .modal-content {
background-color: rgba(0, 0, 0, .05);
}
.modal-grupo .modal-header {
background-color: rgba(255, 255, 255, .1);
padding: 25px;
}
.modal-grupo .modal-header span {
font-weight: 400;
}
.modal-grupo .leaderboard {
margin: 0;
padding-bottom: 20px;
}
.modal-grupo .leaderboard tr {
border: 0;
}
.modal-grupo .leaderboard td {
cursor: default;
padding-top: 5px;
padding-bottom: 5px;
}
.modal-grupo .leaderboard .name {
font-size: 1.6rem;
color: rgb(255, 255, 255);
}
.modal-grupo .leaderboard .cargo {
font-size: 1rem;
}
.modal-grupo .leaderboard .puntos {
font-size: 1.6rem;
font-weight: 500;
}
.modal-grupo .leaderboard .me {
border: 0;
}
.modal-grupo .leaderboard .me td,
.modal-grupo .leaderboard .me td:last-child:after,
.modal-grupo .leaderboard .me td:first-child:before,
.modal-grupo .leaderboard .me tr:hover td,
.modal-grupo .leaderboard .me tr:hover td:last-child:after,
.modal-grupo .leaderboard .me tr:hover td:first-child:before {
background-color: rgb(255, 255, 255, .3) !important;
}
.modal-grupo .leaderboard .me td.puntos strong {
font-size: 2rem;
color: rgb(255, 255, 255) !important;
}
.modal-grupo .leaderboard .me td .cargo {
color: rgb(255, 255, 255) !important;
font-size: 1rem;
}
.modal-grupo .leaderboard .position {
box-shadow: none;
background-color: rgb(224, 74, 68) !important;
color: rgb(255, 255, 255);
font-size: 1.5rem;
width: 34px;
height: 34px;
line-height: 25px;
margin-top: -17px;
}
.modal-grupo .leaderboard .avatar {
width: 65px;
height: 65px;
}
.modal-grupo .modal-header h2 img {
width: 112px;
float: left;
margin: -10px 24px 0 -14px;
box-shadow: 0 0 20px rgba(0, 0, 0, .4);
border-radius: 7px;
}
/* CONTENTS & MODAL CONTENTS */
.modal-terminos .modal-dialog {
width: 900px;
max-width: 98%;
margin: 2% auto;
}
.content-container {
padding-top: 0px;
}
.indicadores .indicador {
border-radius: 8px;
padding: 7px 7px 22px;
margin: 0 0 10px 20px;
}
.indicadores .badge {
float: left;
width: 70px;
display: block !important;
background-color: transparent;
}
.indicadores .data {
padding-left: 80px;
text-align: left;
text-transform: uppercase;
font-size: .8em;
}
.indicadores h3 {
margin: 0;
font-size: 1.8em;
font-weight: 800;
}
.indicadores small {
font-size: .5em;
font-weight: 500;
display: block;
float: left;
clear: both;
line-height: 0;
}
.indicadores .progreso {
width: 100%;
padding: 9px 0 2px;
display: block;
line-height: 10px;
font-size: 1.7em;
font-weight: 800;
}
.indicadores .progreso .bar {
border-radius: 10px;
width: 64%;
height: 9px;
background-color: rgba(0, 0, 0, .3);
background-image: none;
position: relative;
display: inline-block;
float: left;
margin-right: 10px;
}
.indicadores .progreso .bar span {
border-radius: 10px;
top: 0;
bottom: 0;
left: 0;
position: absolute;
background-color: rgba(255, 255, 255, 1);
display: inline-block;
}
.indicadores .alcance {
font-size: 2em;
font-weight: 800;
float: right;
}
body.juego table {
width: 100%;
}
body.juego table td {
border: 1px solid rgba(255, 255, 255, .4);
padding: 8px;
}
.modal-reconocimientos .title span {
font-size: 1.4em;
}
.modal-reconocimientos h5.title:before,
.modal-reconocimientos h5.title:after {
background-color: rgba(0, 0, 0, .1);
opacity: 1;
}
.modal-reconocimientos .modal-content {
background-color: rgb(250, 250, 250);
width: 880px;
}
.reconocimientos-list {
padding: 20px;
}
.reconocimientos-list .item {
text-align: center;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, .04);
border-radius: 10px;
position: relative;
margin: 7px -8px;
padding: 12px;
transition: all .2s ease 0s;
-webkit-transition: all .2s ease 0s;
-moz-transition: all .2s ease 0s;
}
.reconocimientos-list .insignia {
width: 58%;
margin: 0 auto;
}
.insignia .badge-grupal {
background-image: url(../img/badge-grupal.png);
background-position: center;
background-size: 100% auto;
display: block;
width: 70px;
height: 70px;
position: absolute;
right: 10px;
top: 10px;
;
}
.reconocimientos-list .item small {
line-height: 1;
font-style: italic;
display: inline-block;
font-weight: 800;
color: #aaa;
}
.reconocimientos-list .item.disabled .content {
opacity: .4;
}
.reconocimientos-list .item:hover {
border: 1px solid rgba(0, 0, 0, .1);
background-color: rgba(0, 0, 0, .08);
}
.reconocimientos-list .item.disabled:hover {
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, .04);
}
.reconocimientos-list .item .nombre {
text-transform: none;
font-size: 1.45em;
}
.reconocimientos-list .item .descripcion {
font-size: .9em;
}
.reconocimientos-list .item p {
line-height: 1;
}
.reconocimientos-list .item .btn {
background-color: #80d1f5;
color: #fff;
box-shadow: none;
font-size: 90%;
width: auto;
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
}
.reconocimientos-list .item .btn:hover {
background-color: #6bb9dc;
}
.modal-reconocimientos .btn {
background-color: #80d1f5;
color: #fff;
box-shadow: none;
}
.modal-reconocimientos .btn-link {
background-color: #fff;
border-color: #80d1f5;
color: #80d1f5;
}
.grupal-usuarios {
display: inline-block;
text-align: center;
cursor: pointer;
}
.grupal-usuarios.no-interaction {
cursor: default;
}
.grupal-usuarios .avatars {
display: flex;
align-items: center;
margin-bottom:
}
.grupal-usuarios .avatar {
width: 40px !important;
min-height: 40px !important;
display: inline-block !important;
border: 0 !important;
margin: 0 0 0 -8px !important;
position: relative !important;
}
.modal-usuario .grupal-usuarios .avatar {
height: auto !important;
}
.modal-usuario .grupal-usuarios .avatars {
margin-bottom: 10px;
}
.grupal-usuarios .avatar img {
min-height: auto !important;
}
.grupal-usuarios .avatar:before {
border-width: 4px;
left: -2px;
right: -2px;
bottom: -2px;
top: -2px;
border-color: #fff;
}
.grupal-usuarios .more {
background-image: url(../img/badge-grupal.svg);
background-size: 14px;
background-position: right center;
background-repeat: no-repeat;
width: 24px;
height: 29px;
display: inline-block;
font-size: 16px;
font-style: normal;
text-align: left;
color: #000;
opacity: .4;
line-height: 29px;
margin: 0 0 0 2px;
}
.grupal-usuarios .tooltip {
text-transform: none;
}
[data-toggle="detalle_reconocimiento"],
[data-toggle="user-detail"] {
cursor: pointer;
}
.modal-detalle-grupal .modal-dialog {
width: 850px;
background-image: url(../img/back-column.png);
background-position: left center;
border-radius: 20px;
background-repeat: repeat-y;
background-size: 31.333% 100%;
background-color: #fff;
}
.modal-detalle-grupal .modal-content {
background-color: transparent;
}
.modal-detalle-grupal .receptores .user {
padding: 20px 15px;
}
.modal-detalle-grupal .receptores .user:nth-child(5n+1) {
clear: both;
}
.modal-detalle-grupal .receptores .user .avatar {
margin-bottom: 15px !important;
width: 86%;
}
.modal-detalle-grupal .receptores .user .avatar:before {
border-width: 4px;
top: -7px;
bottom: -7px;
left: -7px;
right: -7px;
}
.modal-detalle-grupal .receptores .user h5 {
font-size: .64em;
}
.modal-detalle-grupal .receptores .user .flag {
width: 30px;
height: auto;
background: #fff;
z-index: 100;
position: relative;
margin-left: -21px;
}
.modal-detalle-grupal .dador {
padding-right: 30px;
}
.modal-detalle-grupal .dador .insignia {
max-width: 80% !important;
margin: -10px auto 0 !important;
width: 80% !important;
position: relative;
}
.modal-detalle-grupal .dador .descripcion {
font-size: .7em !important;
}
.modal-detalle-grupal .receptores .user .avatar {
width: 86% !important;
margin: 0 auto !important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
border-radius: 100%;
}
.modal-detalle-grupal .receptores .user .avatar img {
width: 100%;
height: auto;
}
.modal-detalle-grupal .receptores .user h5 {
font-size: 1rem;
}
.modal-detalle-grupal .receptores .user .flag {
width: 30px;
height: auto;
background: #fff;
z-index: 100;
position: relative;
margin-left: -21px !important;
position: absolute;
left: 8px;
top: 8px;
}
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.lds-ellipsis {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ellipsis div {
position: absolute;
top: 27px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis.dark div {
background: #666;
}
.lds-ellipsis div:nth-child(1) {
left: 6px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 6px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 26px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 45px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(19px, 0);
}
}
body.validar {
background-image: url(../img/fondo.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
body.clean-mode input {
text-align: center;
font-size: 26px;
font-weight: 800;
height: 43px;
}
body.clean-mode .form-group small {
line-height: 1.2;
display: inline-block;
margin: 5px 0;
}
body.clean-mode label {
font-size: 1.1em;
font-weight: 500;
}
body.clean-mode .info-block {
color: #2ca2ca;
}
body.clean-mode .text-success {
color: #6fad70;
}
body.clean-mode .dataTables_filter input {
font-size: 1rem;
margin-left: 15px;
border-radius: 6px;
}
body.clean-mode button,
body.clean-mode .btn {
padding: 15px 40px;
border-radius: 40px;
}
body.clean-mode button i,
body.clean-mode .btn i {
font-size: 1.8em;
vertical-align: middle;
margin-right: 10px;
}
body.clean-mode .btn-icon i {
margin-right: 0;
}
body.clean-mode .btn-xs {
padding: 5px 20px;
font-size: .6em;
line-height: 1;
}
body.clean-mode .btn-xs i {
font-size: 1.2em;
}
body.clean-mode table.dataTable {
background-color: #fff;
padding: 18px;
border-radius: 12px;
box-shadow: 0 0 30px rgba(0, 0, 0, .05);
}
body.clean-mode table.dataTable thead th,
body.clean-mode table.dataTable thead td {
border-bottom-color: #888;
}
body.clean-mode table.dataTable.no-footer {
border-bottom: 0;
margin-bottom: 20px;
}
body.clean-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.clean-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: #bbb;
color: #fff !important;
border-color: transparent;
}
body.clean-mode .dataTables_filter input:focus {
outline: none;
border-color: #222;
}
body.clean-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: #dadada;
color: #444 !important;
border-color: transparent;
}
body.validar .first-container {
margin-top: -10%;
}
body.validar .msg-error,
body.validar .msg-info {
color: #ffcc7f;
font-weight: 600;
font-size: 1.1em;
line-height: 42px;
display: none;
}
body.validar .msg-info {
color: #a6ffcd;
}
body.validar .msg-error i,
body.validar .msg-info i {
font-size: 20px;
vertical-align: text-bottom;
margin-right: 8px;
}
body.validar .btn-entregar {
border-radius: 90px;
height: 66px;
padding: 10px 31px 10px 11px;
line-height: 45px;
margin: 10px;
font-size: 15px;
color: #f49811;
}
.voucher-info {
display: none;
}
body.validar .btn-entregar i,
body.validar .btn-volver i {
font-size: 3em;
color: #f39200;
float: left;
margin-right: 12px;
margin-left: 3px;
}
body.validar .btn-volver i {
color: #fff;
font-size: 2.2em;
}
body.validar .btn-volver {
border-radius: 90px;
height: 69px;
padding: 16px 20px;
line-height: 45px;
margin: 10px;
font-size: 15px;
}
body.validar .btn-volver:hover i {
color: #333;
}
body.validar h4.valido {
background-color: #fff;
padding: 11px 25px;
border-radius: 5px;
color: #93c120;
display: inline-block;
}
body.validar h4.entregado {
background-color: #fff;
padding: 11px 25px;
border-radius: 5px;
color: #e30613;
display: inline-block;
}
.add-home-banner {
position: fixed;
bottom: -1000px;
right: 15px;
background-color: #575757;
color: #fff;
padding: 21px 29px;
font-size: .8em;
text-align: right;
z-index: 2000;
border-radius: 4px;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, .3);
text-align: right;
transition: bottom .4s ease 0s;
-webkit-transition: bottom .4s ease 0s;
-moz-transition: bottom .4s ease 0s;
}
.add-home-banner.show {
bottom: 15px;
}
.add-home-banner .desktop {
display: block;
}
.add-home-banner .mobile {
display: none;
}
.add-home-banner h4 {
text-align: left;
font-size: 1.18em;
margin: 7px 0 15px;
}
.add-home-banner .btn {
margin: 6px;
}
.add-home-banner.ios {
background-color: #f6fdff;
padding-right: 8px;
padding-bottom: 50px;
}
.add-home-banner.ios h4 {
text-align: left;
color: #333;
line-height: 25px;
font-size: 1.2em;
text-transform: none;
}
.add-home-banner.ios .btn-link {
box-shadow: none;
float: right;
background-color: transparent;
padding: 10px;
color: #a6a6a6;
font-size: 1.8em;
}
/* LIKES */
.likes-button-reconocimientos {
position: relative;
}
.likes-button-reconocimientos .icon {
background-image: url(../img/likes-unliked.png);
background-position: center;
background-repeat: none;
background-size: cover;
width: 30px;
height: 30px;
display: inline-block;
background-color: transparent;
}
.likes-button-reconocimientos.liked .icon {
background-image: url(../img/likes-liked.png);
}
.likes-button-reconocimientos.likeme .icon {
background-image: url(../img/likes-likeme.png);
}
.likes-button-reconocimientos .badge {
background-color: #ccc;
}
.likes-button-reconocimientos.liked .badge,
.likes-button-reconocimientos.likeme .badge {
background-color: #777;
}
.likes-button-reconocimientos .badge {
padding: 2px 4px;
font-size: 11px;
position: absolute;
right: -4px;
top: -4px;
border: 1px solid #fff;
}
.modal-reconocimientos-grupales .modal-dialog {
width: 1100px;
max-width: 100%;
background-image: url(../img/back-column-3.png);
background-position: left center;
border-radius: 20px;
background-repeat: repeat-y;
background-size: 24% 100%;
background-color: #fff;
}
.modal-reconocimientos-grupales .modal-header {
height: 43px;
}
.modal-reconocimientos-grupales .modal-content {
/*background-image: url(../img/back-column-2.png);
background-position: 60% 0;
border-radius: 20px;
background-repeat: repeat-y;*/
background-color: transparent;
}
.modal-reconocimientos-grupales .modal-body {
height: calc(100vh - 120px);
overflow-y: hidden;
padding-left: 0;
padding-right: 0;
}
.modal-reconocimientos-grupales .nav-profile {
width: 24%;
}
.modal-reconocimientos-grupales .selector {
width: 76%;
}
.modal-reconocimientos-grupales .title {
margin-bottom: 0 !important;
}
.modal-reconocimientos-grupales .leaderboard {
height: calc(100vh - 230px);
overflow-y: auto;
overflow-x: hidden;
margin: 0;
padding: 10px 0 0 0;
}
.modal-reconocimientos-grupales .right-panel {
padding-right: 0;
}
.modal-reconocimientos-grupales .leaderboard .actions {
display: none;
}
.modal-reconocimientos-grupales .leaderboard .badges {
display: none;
}
.modal-reconocimientos-grupales .leaderboard .item {
width: 100% !important;
clear: both;
padding-top: 0;
padding-bottom: 0;
border-bottom: 1px solid #eee;
}
.modal-reconocimientos-grupales .leaderboard .item .avatar {
float: left;
width: 60px;
margin-right: 10px;
border-width: 3px;
z-index: 1;
}
.modal-reconocimientos-grupales .leaderboard .item .picture {
width: auto;
float: left;
position: relative;
}
.modal-reconocimientos-grupales .leaderboard .item .picture .flag {
display: block;
width: 19px;
height: auto;
position: absolute;
left: 0px;
top: 50%;
margin-top: -7px;
z-index: 10;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.modal-reconocimientos-grupales .leaderboard .item.disabled .data {
opacity: 0.3 !important;
}
.modal-reconocimientos-grupales .leaderboard .item.disabled .add {
opacity: 0 !important;
}
.modal-reconocimientos-grupales .leaderboard .item .name {
text-align: left;
font-size: 1rem;
margin: 0;
padding-top: 10px;
}
.modal-reconocimientos-grupales .leaderboard .item .name * {
display: inline-block;
clear: none;
}
.modal-reconocimientos-grupales .leaderboard .item .cargo {
text-align: left;
font-size: .8rem;
margin: 0;
clear: none;
float: left;
padding-top: 3px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 65%;
}
.modal-reconocimientos-grupales .modal-body .col-sm-9 {
z-index: 1;
}
.modal-reconocimientos-grupales .selector-header {
color: #666;
line-height: 23px;
font-size: .8rem;
font-weight: bold;
text-align: left;
box-shadow: 0 10px 15px rgba(0, 0, 0, .08);
padding-bottom: 8px;
margin-left: -15px;
margin-right: -25px;
}
.modal-reconocimientos-grupales .selector-header .counter {
color: #666;
font-size: 1.8em;
vertical-align: middle;
}
.modal-reconocimientos-grupales .selector-footer {
color: #666;
line-height: 23px;
font-size: .8rem;
font-weight: bold;
text-align: left;
box-shadow: 0 -10px 15px rgba(0, 0, 0, .08);
width: 76%;
padding: 10px;
text-align: right;
position: absolute;
right: 0;
bottom: 0;
z-index: 10;
min-height: 54px;
}
.modal-reconocimientos-grupales .selector-footer .error {
color: #ce2b2b;
line-height: 20px;
}
/* width */
.modal-reconocimientos-grupales ::-webkit-scrollbar {
width: 10px;
border-radius: 100px;
}
/* Track */
.modal-reconocimientos-grupales ::-webkit-scrollbar-track {
background: #eee;
border-radius: 100px;
}
/* Handle */
.modal-reconocimientos-grupales ::-webkit-scrollbar-thumb {
background: #ccc;
border: 1px solid #eee;
border-radius: 100px;
}
/* Handle on hover */
.modal-reconocimientos-grupales ::-webkit-scrollbar-thumb:hover {
background: rgb(40, 40, 40);
}
.modal-reconocimientos-grupales .add {
float: right;
padding: 13px 15px;
display: inline-block;
opacity: .3;
font-size: 1.3em;
}
.modal-reconocimientos-grupales .item:hover .add {
opacity: 1
}
.modal-reconocimientos-grupales .remove-all,
.modal-reconocimientos-grupales .add-all {
float: right;
padding: 3px 15px;
cursor: pointer;
display: inline-block;
font-size: .9em;
display: flex;
align-items: center;
}
.modal-reconocimientos-grupales .remove-all i,
.modal-reconocimientos-grupales .add-all i {
font-size: 1.2rem;
margin: 0 5px;
}
/* Widget Likes noticias */
.noticias .widget-like {
float: right;
margin-left: 20px;
margin-bottom: 20px;
}
.noticias .widget-like .badge {
font-size: .8rem;
text-transform: uppercase;
padding: 5px 15px 4px;
font-weight: 600;
margin: 5px 0;
display: inline-block !important;
background-color: transparent;
}
.noticias .widget-like .badge i {
vertical-align: middle;
margin: 0 0 0 5px;
}
.noticias .widget-like .button,
.noticias .widget-like button {
font-size: .7rem;
text-transform: uppercase;
font-weight: 600;
line-height: 17px;
height: 28px;
display: inline-block !important;
background: transparent;
color: rgba(255, 255, 255, 0.45);
border-color: rgba(255, 255, 255, 0.4);
}
.noticias .widget-like .btn-like.active {
background-color: #fff;
color: #44ba32;
box-shadow: none;
}
.noticias .widget-like .btn-like.btn-outline i.fa {
display: none;
}
.table.likers {
margin: 0;
}
.table.likers tr {
border-top: 1px solid #ddd !important;
}
.table.likers td {
color: #333 !important;
padding: 10px 0 !important;
border: 0 !important;
}
.table.likers tr:last-child {
border-bottom: 1px solid #ddd;
}
body.blog-index .noticia {
transition: ease-in-out .2s all;
}
body.blog-index .noticia:hover {
background-color: rgba(255, 255, 255, .06);
}
body.blog-index .noticia h5 {
opacity: 1;
margin: 0 0 15px 0;
padding: 0 0 15px 0;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
body.blog-index .noticia p {
font-size: .9rem !important;
}
body.blog-index .noticia h5 .date {
display: block;
padding: 8px 0;
}
body.blog-index .widget-like {
margin: 0;
float: right;
}
body.blog-index .noticias .noticia {
padding: 5px;
}
.sidebar .noticia {
padding: 0;
}
.sidebar .noticia h3 {
font-size: 1.1rem;
}
.sidebar .noticia h5 {
font-size: .7rem;
}
.sidebar .noticia p {
font-size: .8rem !important;
}
#trivia-end>div,
#timeup>div {
transform: scale(.5);
transition: cubic-bezier(0, 0, 0.1, 1.01) .3s transform;
}
.zoomIn {
transform: scale(1) !important;
}
/* CLEAN MODE */
body.clean-mode>.container-fluid {
width: 100%;
height: 100%;
/* display: flex;
align-items: center;
justify-content: center;
flex-direction: column;*/
}
body.clean-mode.usuarios>.container-fluid {
height: auto !important;
}
body.clean-mode header {
margin: 40px 0;
}
body.clean-mode header .logo img {
width: 100%;
max-width: 180px;
}
body.clean-mode.acciones .form-control#user {
max-width: 250px;
}
body.clean-mode.acciones .form-control#monto {
max-width: 250px;
}
body.clean-mode .container-wrapper {
min-height: 100%;
margin-bottom: -200px;
}
body.clean-mode footer,
body.clean-mode .footer-push {
height: 200px;
margin: 0 -15px;
padding: 0;
}
/* LOOP - ONE2ONE */
body.loop .nav-tabs {
border-bottom: 0;
box-shadow: 0 10px 8px rgba(0, 0, 0, .03);
overflow: hidden;
display: flex;
justify-content: flex-start;
margin-left: -3px;
margin-right: -3px;
}
body.loop .nav-tabs * {
margin: 0;
}
body.loop .nav-tabs>li {
display: flex;
margin: 0 3px;
}
body.loop .tab-content {
background-color: rgba(255, 255, 255, .7);
padding: 15px;
}
body.loop .nav-tabs>li>a,
body.loop .nav-tabs>li>a:hover,
body.loop .nav-tabs>li>a:focus,
body.loop .nav-tabs>li.active>a,
body.loop .nav-tabs>li.active>a:hover,
body.loop .nav-tabs>li.active>a:focus {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: rgba(255, 255, 255, .2);
width: 100%;
border: 0;
padding: 8px 20px;
font-size: 1rem;
text-align: center;
text-transform: uppercase;
font-weight: 800;
background: fff;
color: #aaa;
display: block;
border-bottom: 0;
}
body.loop .nav-tabs>li.active>a,
body.loop .nav-tabs>li.active>a:hover,
body.loop .nav-tabs>li.active>a:focus {
color: #c82141;
background-color: rgba(255, 255, 255, .7);
}
.meetings-list {
margin: 0 -15px;
}
.meetings-list .row {
width: 100%;
margin: 0 0 7px 0;
border-radius: 10px;
padding: 9px;
background-color: #ffffff;
box-shadow: 0 0 4px rgb(0 0 0 / 8%);
transition: all .2s ease-in-out;
display: table;
}
.meetings-list .row.with-reuniones {
cursor: pointer;
}
.meetings-list .row:hover {
transform: translateY(-1px);
background-color: #ffffffaa;
box-shadow: 0 1px 10px rgb(0 0 0 / 12%);
}
.meetings-list .colaborador .name {
font-size: 1.05em !important;
}
.meetings-list [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
}
.meetings-list .picture {
width: 60px;
float: left;
margin: 10px 20px 10px 0;
position: relative;
}
.meetings-list .picture:after {
border-radius: 100%;
content: '';
position: absolute;
margin: -5px;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 5px solid rgba(0, 0, 0, .2);
z-index: 100;
}
.meetings-list .picture .avatar {
border-radius: 100%;
background-size: cover;
overflow: hidden;
background-position: center;
}
.meetings-list .picture .avatar img {
margin: -1px;
width: 100%;
height: auto;
}
#modal-reunion .modal-dialog {
width: 850px;
padding: 0;
}
#modal-reunion .modal-body,
#modal-reunion .modal-body iframe {
min-height: 680px;
}
#modal-reunion .modal-body {
padding: 0;
}
#modal-reunion .modal-content button.close {
top: 6px;
}
#modal-reunion .modal-footer {
margin-top: 0;
}
.detalle-one2one .avatar {
border: 7px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
width: 140px;
max-width: 100%;
margin: 0 25px 0 0;
float: left;
border-radius: 100%;
background-size: cover;
background-position: center;
}
.detalle-one2one .avatar img {
width: 100%;
height: auto;
display: block;
}
.sessions-list {
margin-top: 20px;
}
.sessions-list .item {
width: 100%;
margin: 0 0 20px 0;
border-radius: 10px;
padding: 22px;
background-color: #ffffff;
box-shadow: 0 0 30px rgb(0 0 0 / 10%);
transition: all .2s ease-in-out;
display: table;
}
.sessions-list .item:not(.current):hover {
box-shadow: 0 0 30px rgb(0 0 0 / 20%);
transform: translateY(-1px);
}
.sessions-list .item.completed {
position: relative;
}
.sessions-list .item .opener {
display: none;
}
.sessions-list .item.completed .opener {
cursor: pointer;
display: inline-block;
border-radius: 100%;
position: absolute;
bottom: 5px;
padding: 7px;
right: 15px
}
.sessions-list .item.completed:not(.opened) {
padding-bottom: 40px;
}
.sessions-list .item.completed .opener .up {
display: none;
}
.sessions-list .item.opened .opener .up {
display: inline-block;
}
.sessions-list .item.opened .opener .down {
display: none;
}
.sessions-list .item.completed .opener:hover {
color: #333;
}
.sessions-list .item.completed .more {
display: none;
}
.sessions-list p,
.sessions-list table td,
.sessions-list table th {
font-size: .9rem;
}
.sessions-list .compromisos {
border-radius: 5px;
padding: 0 20px;
border: 2px solid #eee;
}
.sessions-list table {
width: 100%;
}
.sessions-list table th {
padding: 12px 8px;
color: #222;
}
.sessions-list table td {
padding: 16px 4px;
font-weight: 400;
color: #777;
border-top: 2px solid #eee;
}
.sessions-list table td strong {
font-weight: 600;
color: #555;
}
.sessions-list table tr.completed td {
color: #27a962;
}
.sessions-list table tr:hover td {
color: #777;
}
.sessions-list table tr.completed:hover td {
color: #27a962;
}
.sessions-list table tr:first-child td {
border-top-color: transparent;
}
.sessions-list hr {
border-top: 2px solid #eee;
}
.sessions-list .icon {
font-size: 1.2rem;
}
.sessions-list .completion {
cursor: pointer;
text-align: center;
}
.sessions-list .completion .icon {
color: #ccc;
display: none;
}
.sessions-list .completion .icon.done {
color: #27a962;
}
.loop .progress-bar[aria-valuenow="0"] {
color: #666;
margin-left: 10px;
}
.loading-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
z-index: 5999;
}
.loading-backdrop .loader {
width: 7em;
height: 7em;
border-width: .8em;
border-left-color: #fff;
}
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 10px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(171, 171, 171, 0.2);
border-right: 1.1em solid rgba(171, 171, 171, 0.2);
border-bottom: 1.1em solid rgba(171, 171, 171, 0.2);
border-left: 1.1em solid #ababab;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.btn .loader,
.bnt .loader:after {
width: 2.5em;
height: 2.5em;
}
.btn .loader {
border-width: 0.3em;
display: inline-block;
vertical-align: middle;
margin: 0 10px 0 0;
border-left-color: #fff;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.waves {
display: flex !important;
justify-content: center;
align-items: center;
text-align: center;
height: auto !important;
margin: 10px auto !important;
width: auto !important;
top: auto !important;
position: relative !important;
}
.waves .wave {
text-align: center;
width: 3px;
height: 20px;
background: linear-gradient(45deg, #a6a6a6, #a0a0a0);
margin: 2px;
animation: wave 1s linear infinite;
border-radius: 5px;
}
.waves .wave:nth-child(2) {
animation-delay: 0.1s;
}
.waves .wave:nth-child(3) {
animation-delay: 0.2s;
}
.waves .wave:nth-child(4) {
animation-delay: 0.3s;
}
.waves .wave:nth-child(5) {
animation-delay: 0.4s;
}
.waves .wave:nth-child(6) {
animation-delay: 0.5s;
}
.waves .wave:nth-child(7) {
animation-delay: 0.6s;
}
.waves .wave:nth-child(8) {
animation-delay: 0.7s;
}
.waves .wave:nth-child(9) {
animation-delay: 0.8s;
}
.waves .wave:nth-child(10) {
animation-delay: 0.9s;
}
@keyframes wave {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
#usuarios-form .form-control {
font-size: 1.1rem;
text-align: left;
font-weight: 400;
}
/* CATEGORIAS PREMIOS & BENEFICIOS */
.categorias-grid .item .inner {
padding: 10px;
background-position: center;
background-size: cover;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 130px;
position: relative;
overflow: hidden;
}
.categorias-grid .item .inner:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
transition: all .3s ease-in-out;
background-color: rgba(0, 0, 0, .3);
z-index: 1;
}
.categorias-grid .item .inner:hover {
text-decoration: none;
}
.categorias-grid .item:hover .inner:after {
background-color: rgba(0, 0, 0, .5);
}
.categorias-grid .item .title {
text-transform: uppercase;
color: #fff;
text-align: center;
font-weight: 700;
font-size: 1.1rem;
margin: 0;
position: relative;
text-shadow: 0 0 4px rgba(0, 0, 0, .2);
z-index: 10;
}
.categorias-grid hr {
display: none;
}
.categorias-grid .item .description {
color: #fff;
text-align: center;
font-weight: 500;
font-size: 1rem;
margin: 10px 0 0 0;
position: relative;
text-shadow: 0 0 4px rgba(0, 0, 0, .2);
z-index: 9;
}
.br-theme-bars-pill .br-widget {
white-space: nowrap;
}
.br-theme-bars-pill .br-widget a {
padding: 7px 15px;
background-color: #e6e6e6;
color: #aaa;
text-decoration: none;
font-size: 13px;
line-height: 3;
text-align: center;
font-weight: 400;
}
.br-theme-bars-pill .br-widget a:first-of-type {
-webkit-border-top-left-radius: 999px;
-webkit-border-bottom-left-radius: 999px;
-moz-border-radius-topleft: 999px;
-moz-border-radius-bottomleft: 999px;
border-top-left-radius: 999px;
border-bottom-left-radius: 999px;
}
.br-theme-bars-pill .br-widget a:last-of-type {
-webkit-border-top-right-radius: 999px;
-webkit-border-bottom-right-radius: 999px;
-moz-border-radius-topright: 999px;
-moz-border-radius-bottomright: 999px;
border-top-right-radius: 999px;
border-bottom-right-radius: 999px;
}
.br-theme-bars-pill .br-widget a.br-active,
.br-theme-bars-pill .br-widget a.br-selected {
background-color: #ad2790;
color: white;
}
.br-theme-bars-pill .br-readonly a {
cursor: default;
}
.br-theme-bars-pill .br-readonly a.br-active,
.br-theme-bars-pill .br-readonly a.br-selected {
background-color: #a1007d;
}
.saludos-reconocimientos-list {
padding: 0;
margin: 0;
width: 100%;
display: none;
}
.saludos-reconocimientos-list ul {
padding: 0;
}
.saludos-reconocimientos-list li {
display: block;
text-align: left;
justify-content: center;
flex-direction: row;
color: #333;
font-size: .8em;
letter-spacing: 0;
padding: 8px;
border-top: 1px solid rgba(255, 255, 255, .2);
cursor: default;
}
.saludos-reconocimientos-list li:hover button {
opacity: 1;
}
.saludos-reconocimientos-list li button {
background-color: transparent;
opacity: .6;
border: 0;
outline: none;
font-size: .8rem;
float: right;
}
.saludos-reconocimientos-list li .user {
margin: 2px 0;
font-size: .78rem;
display: inline-block;
}
.saludos-reconocimientos-list li .msg {
margin-bottom: 2px;
font-weight: 400;
font-size: .9rem;
word-break: break-word;
padding-left: 64px;
}
.saludos-reconocimientos-list li .avatar {
flex-shrink: 0;
width: 53px;
height: 53px;
display: block;
margin-bottom: 2px;
}
.saludos-reconocimientos-list:hover .btn {
opacity: 1 !important;
}
.saludos-reconocimientos-list .body-list {
overflow: auto;
max-height: 200px;
}
.saludos-reconocimientos-list .body-list li {
padding-left: 10px !important;
padding-right: 10px !important;
}
.saludos-reconocimientos-list .foot-list .btn {
opacity: .6 !important;
position: relative !important;
color: #333 !important;
background-color: #fff !important;
top: auto !important;
left: auto !important;
margin: 0 !important;
display: inline-block !important;
font-size: .8rem;
line-height: 1.3;
}
.saludos-reconocimientos-list .foot-list {
background-color: rgba(255, 255, 255, .1);
padding: 10px;
}
.saludos-reconocimientos-list .loader {
width: 24px;
height: 24px;
border-width: 3px;
display: none;
}
@media print {
.br-theme-bars-pill .br-widget a {
border: 1px solid #b3b3b3;
border-left: none;
background: white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.br-theme-bars-pill .br-widget a.br-active,
.br-theme-bars-pill .br-widget a.br-selected {
border: 1px solid black;
border-left: none;
background: white;
color: black;
}
.br-theme-bars-pill .br-widget a:first-child {
border-left: 1px solid black;
}
}
.feed-reconocimientos .video-response {
height: 180px;
background-color: rgba(0, 0, 0, .1);
border-radius: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
background-size: cover;
background-position: center;
cursor: pointer;
position: relative;
}
.btn-opcion {
background-color: rgb(216 216 216 / 42%) !important;
color: #777;
border-radius: 22px !important;
display: flex;
justify-content: center;
align-items: center;
border: 0;
width: 100%;
max-width: 100%;
flex-direction: column;
margin: 20px auto;
padding: 20px 10px !important;
text-transform: none;
font-size: 1.1rem;
white-space: normal;
line-height: 1.2;
box-shadow: none !important;
}
.btn-opcion:hover {
background-color: #5a5a5a !important;
color: #fff !important;
}
.btn-opcion:hover h4 {
color: #fff !important;
}
.btn-opcion i {
font-size: 1.6rem;
opacity: .7;
margin-bottom: 0;
}
.modal-reconocimientos .btn-opcion {
height: 178px;
color: #777;
}
.modal-reconocimientos .btn-opcion i {
margin-bottom: 15px;
}
.modal-reconocimientos .video-enviado {
display: none;
}
.modal-reconocimientos .video-enviado i {
font-size: 2.4rem;
display: block;
margin: 15px auto;
}
.modal-reconocimientos .inforec {
cursor: pointer;
}
.modal-reconocimientos .descrec {
display: none;
}
.show-read-more .more-text {
display: none;
}
.modal-detalle-reconocimientos .picture {
padding: 15px 0 5px;
display: flex;
justify-content: center;
align-items: center;
}
.modal-detalle-reconocimientos .receptores {
padding: 15px 25px;
}
.modal-detalle-reconocimientos .swiper-button-prev {
left: 0;
top: 0;
bottom: 0;
position: absolute;
background-color: #ffffffd6;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 30px;
z-index: 100;
}
.modal-detalle-reconocimientos .swiper-button-next {
right: 0;
top: 0;
bottom: 0;
position: absolute;
background-color: #ffffffd6;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 30px;
z-index: 100;
}
/* Refactor Nav Profile */
.nav-user-profile {
float: right;
margin: 4px;
display: flex;
flex-direction: row;
}
.nav-user-profile .avatar {
width: auto;
float: none;
position: relative;
margin: 0 27px 0 0;
}
.nav-user-profile .avatar .picture {
border-radius: 100%;
width: 60px;
height: 60px;
margin: 0;
top: 0;
display: block;
background-position: center;
background-size: cover;
}
.nav-user-profile .texts a {
text-decoration: none;
}
.nav-user-profile .texts .name {
margin: 0;
padding: 0;
text-transform: none;
font-size: 1.2em;
text-align: left;
}
.nav-user-profile .texts .puntos {
padding: 0;
margin: 0;
display: inline-block;
line-height: 1;
font-size: 2.2em;
font-weight: 800;
text-transform: none;
letter-spacing: -.05em;
text-align: left;
position: relative;
top: 0;
left: 0;
}
.nav-user-profile .avatar .nav-menu {
position: absolute;
top: 0;
left: 17px;
bottom: 0;
right: -24px;
cursor: pointer;
}
.nav-user-profile .avatar .nav-menu i {
position: absolute;
top: 50%;
right: 8px;
margin-top: -10px;
font-size: 1.2rem;
}
.nav-user-profile .avatar .nav-menu:hover .menu-perfil {
display: block;
}
.nav-user-profile .avatar .nav-menu .menu-perfil {
position: absolute;
left: 41px;
width: 150px;
top: 66%;
padding: 0;
list-style: none;
background: #FFF;
border-radius: 6px;
box-shadow: 0 5px 23px rgb(0 0 0 / 19%);
display: none;
z-index: 20;
min-width: 150px;
}
.nav-user-profile .avatar .nav-menu .menu-perfil:after {
content: '';
position: absolute;
top: -5px;
left: 10px;
margin-left: -3px;
width: 0;
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #fff transparent;
}
.nav-user-profile .avatar .nav-menu .menu-perfil li {
clear: both;
float: none;
display: block;
border-bottom: 1px solid #eee;
}
.nav-user-profile .avatar .nav-menu .menu-perfil li:last-child {
border-bottom: 0;
}
.nav-user-profile .avatar .nav-menu .menu-perfil li a {
display: block;
padding: 6px 13px 7px;
font-size: .8rem;
font-weight: 800;
color: #555;
text-align: center;
}
.nav-user-profile .avatar .nav-menu .menu-perfil li a:hover {
text-decoration: none;
color: #222;
}
.nav-user-profile .nav-notificaciones {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 40px;
}
.nav-user-profile .nav-notificaciones .icon {
font-size: 14px;
color: #777;
border-radius: 100%;
background-color: #fff;
box-shadow: 0 0 5px rgb(0 0 0 / 15%);
cursor: pointer;
width: 22px;
height: 22px;
text-align: center;
line-height: 22px;
position: absolute;
left: -10px;
top: 50%;
z-index: 2000;
}
.nav-user-profile .nav-notificaciones .icon.unreads {
background-color: indianred;
color: #fff;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
.nav-user-profile .nav-notificaciones .icon.animated {
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
.nav-user-profile .nav-notificaciones .menu {
padding-top: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 15px;
right: 0;
z-index: 2001;
}
.nav-user-profile .nav-notificaciones .menu .frame {
position: absolute;
left: 50%;
width: 300px;
top: 14px;
padding: 0;
list-style: none;
background: #FFF;
border-radius: 6px;
box-shadow: 0 5px 23px rgb(0 0 0 / 19%);
z-index: 20;
margin-left: -162px;
border-bottom: 7px solid #eee;
}
.nav-user-profile .nav-notificaciones .menu .frame .content {
max-height: 450px;
overflow-y: auto;
}
.nav-user-profile .nav-notificaciones .menu .title {
font-size: 2rem;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.nav-user-profile .nav-notificaciones .menu .title h5 {
font-size: 1rem;
margin: 30px 0 10px;
}
.nav-user-profile .nav-notificaciones .menu .title .icon {
font-size: 1.6rem;
width: 37px;
height: 37px;
line-height: 37px;
position: absolute;
top: -40px;
left: 50%;
margin-left: -25px;
box-shadow: none;
}
.nav-user-profile .nav-notificaciones .menu .title .unread {
background: #777;
color: #fff;
border-radius: 100%;
font-size: .95rem;
line-height: 25px;
width: 25px;
padding: 0;
margin: 0 5px;
text-align: center;
min-height: auto !important;
}
.nav-user-profile .nav-notificaciones .notificaciones {
margin: 0;
padding: 0;
}
.nav-user-profile .nav-notificaciones .more {
line-height: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
font-size: 1rem;
padding: 10px;
text-align: center;
cursor: pointer;
}
.nav-user-profile .nav-notificaciones .more:hover {
color: #000;
}
.nav-user-profile .nav-notificaciones .notificaciones li {
display: block;
}
.nav-user-profile .nav-notificaciones .notificaciones li a {
border-bottom: 1px dashed #eee;
background-color: #f0f0f0;
color: #aaa;
display: block;
padding: 12px 16px;
display: flex;
flex-direction: row;
justify-content: left;
align-items: flex-start;
cursor: pointer;
}
.nav-user-profile .nav-notificaciones .notificaciones li.new a {
background-color: #fff;
color: #777;
}
.nav-user-profile .nav-notificaciones .notificaciones li a .not-title {
margin: 0 0 2px 0;
font-size: 1rem;
color: #777;
font-weight: 500;
letter-spacing: -.05rem;
}
.nav-user-profile .nav-notificaciones .notificaciones li.new a .not-title {
color: #333;
font-weight: 800;
}
.nav-user-profile .nav-notificaciones .notificaciones li a:hover {
border-bottom: 1px dashed #eee;
background-color: #f0f0f0;
}
.nav-user-profile .nav-notificaciones .notificaciones li a p {
margin: 0;
font-size: .9rem;
font-weight: 400;
color: #999;
}
.nav-user-profile .nav-notificaciones .notificaciones li.new a p {
color: #777;
}
.nav-user-profile .nav-notificaciones.mobile .menu .frame {
position: fixed;
right: 0;
left: auto;
top: 0;
bottom: 0;
width: 400px;
max-width: 50%;
border: 0;
border-radius: 0;
transform: translate3d(120%, 0, 0);
transition: all .3s ease-out;
}
.nav-user-profile .nav-notificaciones.mobile.show .menu .frame {
transform: translate3d(0, 0, 0);
}
.nav-user-profile .nav-notificaciones.mobile .menu .frame .title {
z-index: 10;
position: relative;
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-user-profile .nav-notificaciones.mobile .menu .frame .title h5 {
text-align: left;
margin: 0;
line-height: 60px;
font-size: 1.4rem;
letter-spacing: -.09rem;
flex: 1;
}
.nav-user-profile .nav-notificaciones.mobile .menu .frame .title .icon {
margin: 13px;
padding: 0;
top: auto;
left: 0;
opacity: .6;
position: relative;
}
.nav-user-profile .nav-notificaciones.mobile .menu .frame .title a {
padding: 13px 8px;
color: #444;
float: none;
font-size: 1.5rem;
}
.nav-user-profile .nav-notificaciones.mobile .menu .frame .content {
max-height: none;
position: absolute;
right: 0;
left: 0;
top: 64px;
bottom: 0;
z-index: 1;
}
.nav-lideres {
text-align: left !important;
}
.panel-lideres-resumen .reconocimientos {
margin: 0;
padding: 0;
}
.panel-lideres-resumen .reconocimientos li {
width: 21%;
margin: 2% 1%;
display: inline-block;
position: relative;
}
.panel-lideres-resumen .reconocimientos .count {
display: inline-block;
border-radius: 100%;
position: absolute;
top: 5px;
right: 0;
background-color: #666;
color: #fff;
font-size: .9rem;
font-weight: 800;
text-align: center;
line-height: 25px;
width: 25px;
box-shadow: 0 0 20px #fff;
}
.panel-lideres-resumen .usuarios .avatar,
.panel-lideres-equipo .usuarios .avatar {
width: 55px;
margin: 2px 16px 2px 0;
}
.panel-lideres .usuarios .count {
display: inline-block;
border-radius: 100%;
background-color: #666;
color: #fff;
font-size: 1.1rem;
font-weight: 800;
text-align: center;
line-height: 42px;
width: 42px;
box-shadow: 0 0 20px #fff;
}
.panel-lideres .filter-stats .form-control {
font-size: 14px;
background-color: #fafafa;
border: 1px solid rgba(0, 0, 0, .2) !important;
box-shadow: none;
}
.panel-lideres .alert {
background-color: #fafafa;
}
/*
.panel-lideres-resumen [data-filter-reconocimiento] {
cursor: pointer;
}
*/
.panel-lideres-resumen .usuarios .recs {
display: flex;
align-items: flex-start;
justify-content: left;
}
.panel-lideres-resumen .btn {
background-color: transparent;
}
.panel-lideres-resumen .usuario:hover .btn {
background-color: #fff;
}
.panel-lideres-resumen .btn-xs {
font-size: .7rem;
margin: .2rem;
}
.panel-lideres-resumen .form-control {
background-color: #fff;
border-color: #ddd;
}
.panel-lideres .usuarios {
margin-bottom: 15px;
border-radius: 10px;
border: 1px solid #eee;
overflow: hidden;
background-color: #fafafa;
}
.panel-lideres .usuarios .usuario {
position: relative;
z-index: 10;
}
.panel-lideres .usuarios .usuario:last-child {
border: 0;
margin-bottom: 0;
}
.panel-lideres .usuarios .usuario:hover,
.panel-lideres .usuarios .usuario.zoomed {
background-color: rgba(0, 0, 0, .03);
}
.panel-lideres .usuarios .usuario {
border-bottom: 1px solid #ffffff38;
}
.panel-lideres .usuarios .btn-ver-equipo .fa-plus {
display: inline-block;
}
.panel-lideres .usuarios .btn-ver-equipo .fa-minus {
display: none;
}
.panel-lideres .usuarios .btn-ver-equipo.zoomed .fa-plus {
display: none;
}
.panel-lideres .usuarios .btn-ver-equipo.zoomed .fa-minus {
display: inline-block;
}
.panel-lideres .usuarios .children {
margin: 10px;
position: relative;
display: none;
background-color: #0000000a;
border-radius: 10px;
padding: 0;
position: relative;
border: 1px solid #eee;
overflow: hidden;
}
.panel-lideres .usuarios .children:after {
content: '';
position: absolute;
left: 25px;
top: -8px;
width: 0;
height: 0;
border-width: 0 6.5px 7px 6.5px;
border-color: transparent transparent #0000000a transparent;
border-style: solid;
}
.panel-lideres .usuarios .usuario.zoomed>.children {
display: block;
}
.panel-lideres .usuarios .reconocimientos {
margin-left: 20px;
flex: 1;
}
.panel-lideres .usuarios .reconocimientos li {
width: 45px;
margin-bottom: 0;
margin-top: 0;
}
.panel-lideres .usuarios .reconocimientos .count {
font-size: .82rem;
line-height: 18px;
min-width: 18px;
padding: 0 3px;
width: auto;
right: -6px;
}
.panel-lideres-equipo .usuarios .avatar {
margin-left: 0;
flex: .8;
}
.panel-lideres-equipo .usuarios {
position: sticky;
top: 100px;
}
.panel-lideres-equipo .usuarios .datos {
display: flex;
align-items: center;
background-color: #f8f8f8;
border-radius: 10px;
padding-top: 11px;
padding-bottom: 11px;
}
.panel-lideres-equipo .usuarios .datos h4 {
flex: 2;
}
.panel-lideres-equipo .usuarios .row {
cursor: pointer;
}
.panel-lideres-equipo .usuarios .row.active .datos {
background-color: #e0e0e0;
}
.panel-lideres-equipo .usuarios .row.active:hover .datos {
background-color: #e0e0e0;
}
.panel-lideres-equipo .usuarios .row button {
opacity: 0;
width: 25px;
height: 25px;
line-height: 1;
padding-left: 0;
padding-right: 0;
font-size: .7rem;
}
.panel-lideres-equipo .usuarios .row:hover button {
opacity: 1;
}
.panel-lideres-equipo .usuarios .row:hover .datos {
background-color: #eee;
}
.panel-lideres-equipo .detalle-reconocimientos .insignia {
max-width: 100px;
margin: 0 auto;
}
.panel-lideres-equipo .detalle-reconocimientos .row.item {
border-bottom: 1px dashed #d6d6d6;
padding-bottom: 15px;
margin-bottom: 15px;
}
.panel-lideres-equipo .detalle-reconocimientos .row.item .grupal {
display: inline-flex;
flex-direction: row;
align-items: center;
font-size: .8rem;
font-weight: 600;
color: #777;
background-color: #f0f0f0;
border-radius: 100px;
padding: 4px;
}
.panel-lideres-equipo .detalle-reconocimientos .row.item .grupal-usuarios .avatar {
width: 28px !important;
height: 28px !important;
min-height: 28px !important;
margin: 0 1px !important;
}
.panel-lideres-equipo .detalle-reconocimientos .video-response {
height: 147px;
width: 255px;
background-size: cover;
border-radius: 12px;
position: relative;
}
.panel-lideres-detalle .reconocimientos {
margin: 0;
padding: 0;
}
.panel-lideres-detalle .reconocimientos li {
width: 21%;
margin: 2% 1%;
display: inline-block;
position: relative;
}
.panel-lideres-detalle .reconocimientos .count {
display: inline-block;
border-radius: 15px;
position: absolute;
top: 5px;
right: 0;
background-color: #666;
color: #fff;
font-size: .9rem;
font-weight: 800;
text-align: center;
line-height: 25px;
min-width: 25px;
box-shadow: 0 0 20px #fff;
padding: 0 5px;
}
.panel-lideres-detalle .filtros {
border-bottom: 1px solid #eee;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
}
.panel-lideres-detalle .recs {
padding-left: 58px;
}
.panel-lideres-detalle .count-position {
display: inline-block;
border-radius: 100%;
position: absolute;
top: 0px;
left: -13px;
right: auto;
background-color: #666;
color: #fff;
font-size: .8rem;
font-weight: 800;
text-align: center;
line-height: 30px !important;
width: 30px !important;
box-shadow: 0 0 20px #fff;
}
.panel-lideres-monitoreo .swiper-container-horizontal {
overflow: hidden;
position: relative;
}
.panel-lideres-monitoreo .swiper-container-horizontal:after {
position: absolute;
content: ' ';
right: -20px;
top: 0;
bottom: 0;
width: 140px;
pointer-events: none;
background: rgb(255, 255, 255);
background: linear-gradient(270deg, rgba(255, 255, 255, 1) 38%, rgba(255, 255, 255, 0) 100%);
z-index: 10;
}
.panel-lideres-monitoreo .swiper-container-horizontal:before {
position: absolute;
content: ' ';
left: -70px;
top: 0;
bottom: 0;
width: 140px;
pointer-events: none;
background: rgb(255, 255, 255);
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 38%, rgba(255, 255, 255, 0) 100%);
z-index: 10;
}
.panel-lideres-monitoreo .swiper-wrapper {
z-index: 9;
}
.panel-lideres-monitoreo table {
max-width: auto;
}
.panel-lideres-monitoreo table th {
vertical-align: top;
padding: 10px 5px;
}
.panel-lideres-monitoreo table tr th:first-child {
z-index: 1000;
}
.panel-lideres-monitoreo table td {
width: 110px;
height: 80px;
}
.panel-lideres-monitoreo table td.null {
background-color: transparent;
text-align: center;
font-size: 2rem;
color: rgba(0, 0, 0, .2);
}
.panel-lideres-monitoreo table .user {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.panel-lideres-monitoreo table .avatar {
width: 50px;
height: 50px;
margin: 0 auto 4px;
}
.panel-lideres-monitoreo table .indicador {
text-align: center;
font-size: 1.3rem;
font-weight: bold;
position: relative;
cursor: grab;
color: #666;
}
.panel-lideres-monitoreo .active .indicador {
color: #bbb
}
.panel-lideres-monitoreo table .indicador.active .counters {
background-color: #f0f0f0;
color: #555 !important;
}
.panel-lideres-monitoreo table .indicador:hover {
background-color: #f0f0f0;
}
.panel-lideres-monitoreo table .indicador:hover .counters {
background-color: #ddd !important;
border-radius: 5px !important;
}
.panel-lideres-monitoreo table .indicador .counters:after {
content: '';
left: 50%;
top: 10%;
height: 80%;
width: 1px;
background-color: #00000040;
position: absolute;
transform: rotate(-45deg);
}
.panel-lideres-monitoreo table .indicador .counters {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 2px solid #ffffff00;
}
.panel-lideres-monitoreo table .indicador .counters.ct-alert {
border-radius: 5px !important
}
.panel-lideres-monitoreo table .indicador .counters span:first-child {
position: absolute;
left: 0;
top: 49%;
width: 45%;
text-align: right;
line-height: 1;
}
.panel-lideres-monitoreo table .indicador .counters span:last-child {
position: absolute;
right: 0;
bottom: 49%;
width: 45%;
text-align: left;
line-height: 1;
}
.panel-lideres-monitoreo .tooltip-inner hr {
margin: 4px 0;
background-image: none;
background-color: #ffffff40;
height: 1px;
}
.panel-lideres-monitoreo #table-monitoreo-usuarios {
position: relative;
}
.panel-lideres-monitoreo #table-monitoreo-usuarios .left {
position: absolute;
left: 0;
top: 0;
z-index: 100;
}
.panel-lideres-monitoreo #table-monitoreo-usuarios .right {
margin-left: 63px;
padding-left: 27px;
padding-right: 60px;
position: relative;
z-index: 99;
}
.modal-detalle-reconocimientos .modal-content {
overflow-y: hidden;
}
.modal-detalle-reconocimientos .main-content {
display: flex;
align-items: center;
}
.modal-detalle-reconocimientos .modal-header {
background-color: #f0f0f0;
margin-bottom: 0;
padding-bottom: 15px;
}
.modal-detalle-reconocimientos .picture .avatar {
width: 52%;
float: none;
border-radius: 100%;
background-size: cover;
background-position: center;
float: left;
margin: 0 15px 0 0;
}
.modal-detalle-reconocimientos .picture .avatar img {
width: 100%;
height: auto;
margin: 0;
}
.modal-detalle-reconocimientos .picture .insignia {
width: 100px;
height: 100px;
display: inline-block;
margin-left: -50px;
}
.modal-detalle-reconocimientos .picture.grupal .insignia {
width: 150px;
height: 150px;
margin-left: 0;
margin-right: 0;
position: relative;
}
.modal-detalle-reconocimientos .picture.grupal .insignia .badge-grupal {
right: -25px;
top: 0;
}
.modal-detalle-reconocimientos .video-response {
height: 200px;
width: 372px;
background-size: cover;
margin: 0 auto;
border-radius: 12px;
}
.modal-detalle-reconocimientos .mensaje {
font-size: 1.1rem;
position: relative;
padding: 10px 16px;
margin-top: -10px;
font-weight: 500;
}
.modal-detalle-reconocimientos .mensaje .quote-left,
.modal-detalle-reconocimientos .mensaje .quote-right {
font-size: 3.1rem;
opacity: .1;
position: absolute;
}
.modal-detalle-reconocimientos .quote-left {
left: -45px;
top: 0;
}
.modal-detalle-reconocimientos .quote-right {
right: -10px;
bottom: -20px;
font-size: 2.8rem;
}
.modal-detalle-reconocimientos .comentarios .icon {
width: 45px;
height: 36px;
margin-top: 0;
margin-left: 4px;
background-image: url(../img/comments.svg);
display: inline-block;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.modal-detalle-reconocimientos .comentarios {
color: #3C3C3B;
font-size: 1rem;
font-weight: 700;
float: left;
display: flex;
justify-content: left;
align-items: center;
height: 47px;
cursor: pointer;
padding-right: 20px;
width: 100%;
}
.modal-detalle-reconocimientos .comentarios .count {
font-weight: 600;
}
.modal-detalle-reconocimientos .likes-button-reconocimientos .badge {
font-size: 1rem;
font-weight: 700;
color: #3C3C3B;
}
.modal-detalle-reconocimientos .saludos-reconocimientos-list {
display: block;
}
.modal-detalle-reconocimientos .saludos-reconocimientos-list li:first-child {
border-top: 1px dashed rgba(0, 0, 0, .1);
}
.modal-detalle-reconocimientos .saludos-reconocimientos-list li:last-child {
border-bottom: 0;
}
.modal-detalle-reconocimientos .saludos-reconocimientos-list li {
color: #555;
font-size: .95rem;
border-top: 0;
border-bottom: 1px dashed rgba(0, 0, 0, .1);
display: flex;
}
.modal-detalle-reconocimientos .saludos-reconocimientos-list li .editable-elements {
display: none;
}
.modal-detalle-reconocimientos .editar-reconocimiento-elements {
display: none;
}
.modal-detalle-reconocimientos .editar-reconocimiento-elements textarea {
line-height: 1.6;
}
.modal-detalle-reconocimientos .editar-reconocimiento-elements .counter-chars {
font-size: .8rem;
padding: 8px 0;
}
.modal-detalle-reconocimientos .saludos-reconocimientos-list li .removable-elements {
display: none;
float: right;
margin: 10px;
}
.modal-detalle-reconocimientos .saludos-reconocimientos-list li div.right {
flex: 1;
}
.modal-detalle-reconocimientos .saludos-reconocimientos-list .body-list {
max-height: 330px;
margin-bottom: 15px;
}
.modal-detalle-reconocimientos .saludos-reconocimientos-list li .avatar {
width: 42px;
height: 42px;
}
.modal-detalle-reconocimientos .saludos-reconocimientos-list li .user {
font-size: 1rem;
}
.modal-detalle-reconocimientos .saludos-reconocimientos-list li .date {
font-size: .9rem;
}
.modal-detalle-reconocimientos .saludos-reconocimientos-list .foot-list {
padding: 0;
}
.modal-detalle-reconocimientos .saludos-reconocimientos-list textarea {
font-size: .95rem;
line-height: 1.6;
padding: 10px;
}
.modal-detalle-reconocimientos .user {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.modal-detalle-reconocimientos .user:nth-child(6n+1) {
clear: both;
}
.modal-detalle-reconocimientos .user .avatar {
margin: 0;
width: 90%;
text-align: center;
}
.modal-detalle-reconocimientos .user h5 {
font-size: 1.3rem;
text-align: center;
margin-bottom: 0;
}
/* Estilos Tarjetas */
.modal-tarjetas .modal-dialog {
width: 900px;
max-width: 100%;
}
.modal-tarjetas .editor {
display: flex;
flex-direction: row;
}
.modal-tarjetas .sets {
height: 600px;
overflow-y: auto;
overflow-x: hidden;
}
.modal-tarjetas .sets .set {
clear: both;
margin-bottom: 15px;
}
.modal-tarjetas .sets .set hr {
margin: 0;
}
.modal-tarjetas .sets .images {
padding: 0;
margin: 0;
list-style: none;
clear: both;
}
.modal-tarjetas .sets .images .image {
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
float: left;
width: 33.3333%;
box-shadow: 0 0 10px rgba(0, 0, 0, .01) !important;
}
.modal-tarjetas .sets .images .no-image img {
width: 100%;
height: auto;
opacity: 0;
}
.modal-tarjetas .sets .images .no-image i {
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px;
font-size: 1.6rem;
color: #bbb;
}
.modal-tarjetas .sets .images .image span {
display: inline-block;
margin: 5px 3px;
border-radius: 5px;
transition: all .2s ease-in;
border: 1px solid #fafafa;
overflow: hidden;
cursor: pointer;
position: relative;
}
.modal-tarjetas .sets .images .image span:hover {
border-color: #aaa;
}
.modal-tarjetas .sets .images .image.selected span {
border-color: #ffb526;
}
.modal-tarjetas .sets .images .image img {
width: 100%;
border-radius: 4px;
height: auto;
}
.modal-tarjetas label {
display: block;
text-align: left;
margin-bottom: 10px;
}
.modal-tarjetas .vista-previa .inner {
border-radius: 12px;
padding: 15px;
border: 1px solid #eee;
box-shadow: 0 0 20px rgb(0 0 0 / 10%);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.modal-tarjetas .vista-previa .inner textarea {
border: 2px dashed #f0f0f0 !important;
box-shadow: none;
background-color: #fff;
}
.modal-tarjetas .vista-previa .inner textarea:focus {
background-color: #fafafa;
border: 2px dashed #d6d6d6 !important;
}
.modal-tarjetas .vista-previa .container-preview {
flex: 1;
}
.modal-tarjetas .vista-previa .container-preview .help {
font-size: 1.3rem;
color: #b7b7b7;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.modal-tarjetas .vista-previa .container-preview .help i {
font-size: 2rem;
}
.modal-tarjetas .vista-previa .container-preview .preview-image {
max-width: 100%;
height: auto;
}
.modal-tarjetas .btn.disabled {
pointer-events: none;
cursor: not-allowed;
opacity: .4;
}
.modal-tarjetas .modal-footer .alert-sending {
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
margin: 0 15px;
}
.modal-tarjetas .modal-footer .loader {
width: 2rem;
height: 2rem;
border-width: 4px;
margin: 10px;
}
.form-typeform-widget {
height: 500px;
}
.row.otorgamiento-form .col-xs-12 {
padding-left: 0;
padding-right: 0;
}
.select2-container--default .select2-selection--multiple {
padding: 3px 2px 4px 2px;
height: 41px;
border: 1px solid #d1d1d1;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
border: 1px solid #e4e4e4 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
font-weight: 800;
font-size: .9rem;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 42px;
height: 20px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.switch .slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 3px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
/* Rounded sliders */
.switch .slider.round {
border-radius: 34px;
}
.switch .slider.round:before {
border-radius: 50%;
}
.table.no-responsive td {
display: table-cell;
border-top: 1px solid #eee !important;
vertical-align: middle;
}
.table.no-responsive tbody td:before {
display: none;
}
.table.no-responsive tr td:first-child {
background-color: transparent;
}
.reconocimientos-subcategorias .reconocimientos-categoria {
display: none;
}
/* STYLES VALORACIONES ########################################################################################## */
#popupValoracionUsuario {
width: 320px;
height: 320px;
position: sticky;
top: 58vh;
left: 59vw;
z-index: 11;
border-radius: 12px;
box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
transition: all 0.2s ease-out;
background: #fff;
border: 1px solid #00000021;
}
#popupValoracionUsuario .card.sec {
display: none;
}
.card.sec .card-header {
padding: 0px 25px;
text-align: left;
}
#popupValoracionUsuario>*,
#popupValoracionUsuario .title {
text-align: center;
}
.card-center {
flex-direction: column;
display: flex;
align-items: center;
gap: 10px;
margin: 20px 0;
}
.card-actions {
margin-bottom: 15px;
}
button.decline {
background: none;
border: 1px dotted #44444452;
}
.rating-wrapper {
margin-top: 30px;
display: flex;
gap: 10px;
}
.rating-block {
padding: 10px 26px;
border-radius: 11px;
font-size: 2rem;
background-color: #f0f0f0;
font-weight: 600;
color: #595959;
cursor: pointer;
}
.rating-block:hover {
color: #fff;
background-color: #a1007d;
}
.rating-block.selected {
color: #fff;
background-color: #a1007d;
}
.rating-details {
margin-top: 20px;
font-size: 14px;
font-weight: 600;
width: 47%;
}
.rating-details>span {
display: none;
}
.rating-details>span:first-of-type {
display: block;
float: left;
}
.rating-details>span:last-of-type {
display: block;
float: right;
}
.modal-valoraciones {
width: 600px;
height: 600px;
position: sticky;
top: 58vh;
left: 59vw;
z-index: 11;
border-radius: 12px;
box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
transition: all 0.2s ease-out;
background: #fff;
border: 1px solid #00000021;
}
#modalValoracionUsuario {
display: block;
}
#valoracionesModal.mode-process .modal-header {
border: 0;
}
#valoracionesModal .modal-dialog {
width: 850px;
}
#valoracionesModal .modal-body {
min-height: 300px;
}
/*
#valoracionesModal .modal-footer a {
color: #8c8c8c;
font-weight: 700;
}
*/
#valoracionesModal .modal-footer div:first-of-type {
margin: 10px 0;
}
#valoracionesModal .modal-footer div:last-of-type {
float: right;
}
/*
#valoracionesModal .modal-footer a.btn {
color: #fff;
border-radius: 12px;
}
#valoracionesModal .modal-footer a.btn.disabled {
color: #fff;
background-color: #8c8c8c;
font-weight: 700;
}
*/
.options-title {
position: relative;
margin-bottom: 15px;
margin-top: 5px;
text-align: center;
font-size: 1.7rem;
}
.options-title span {
position: absolute;
top: 20px;
font-weight: 800;
font-size: 1.7rem;
right: 80px;
letter-spacing: -1px;
text-align: center;
opacity: .7;
text-align: center;
}
.options-subtitle {
text-align: center;
font-size: 1rem;
}
.options-heading {
margin: 0;
font-weight: 800;
line-height: 1;
text-transform: uppercase;
font-size: 1.5rem;
opacity: .5;
text-align: center;
}
#valoracionesModal .modal-header {
border-bottom: 2px dotted #e5e5e5;
padding-bottom: 10px;
}
#valoracionesModal .modal-header h4 {
color: #8c8c8c;
}
#valoracionesModal .modal-footer {
margin-top: 60px;
text-align: left;
background-color: unset;
align-items: center;
justify-content: center;
display: flex;
font-weight: 700;
background-color: #00000005;
}
#valoracionesModal .select {
display: flex;
gap: 18px;
margin-top: 56px;
}
.intro-options {
/* justify-content: space-between; */
display: flex;
min-height: 300px;
align-items: center;
padding-left: 10px !important;
padding-right: 10px !important;
flex-direction: column;
align-items: center;
justify-content: center;
}
.intro-options h2 {
font-size: 35px;
}
.intro-options h4 {
font-weight: 600;
opacity: .8;
}
.category-block {
margin: 0 0 10px 0 !important;
}
#category-subtitle-intro {
margin-top: 10px;
}
.intro-body {
margin: 20px 0;
min-height: 300px;
}
/*
.intro-options p {
text-align: center;
margin: 30px 0;
}*/
.intro-options .item {
border-radius: 8px;
background-color: #f0f0f0;
padding: 25px 35px;
margin: 10px auto !important;
cursor: pointer;
color: #a1007d;
width: 68%;
float: none;
}
.intro-options .item:hover {
color: #fff;
background-color: #a1007d;
}
.intro-options .item.selected {
color: #fff;
background-color: #a1007d;
}
.intro-options .title {
text-align: center;
font-weight: 800;
font-size: 1.8rem;
letter-spacing: -0.8px;
}
.intro-options .subtitle {
text-align: center;
font-weight: 700;
font-size: 1rem;
letter-spacing: -0.8px;
}
.answer-block {
padding: 10px 26px;
border-radius: 11px;
font-size: 1.2rem;
background-color: #f0f0f0;
font-weight: 600;
color: #595959;
min-width: 250px;
cursor: pointer;
margin: 14px 0;
position: relative;
}
.answer-block:hover {
color: #fff;
background-color: #a1007d;
}
.answer-block.selected {
color: #fff;
background-color: #a1007d;
}
.answer-block .check {
position: absolute;
top: 25%;
left: -3%;
opacity: 0;
padding: 5px;
border-radius: 100%;
transition: opacity .2s ease-in-out;
background-color: #a1007d;
border: 3px solid #eee;
font-size: 46%;
}
.answer-block.selected .check {
opacity: 1;
}
.categorias-grid .item .title {
/* text-transform: uppercase; */
color: #fff;
width: 100%;
text-align: center;
margin: 0;
position: relative;
text-shadow: 0 0 4px rgb(0 0 0 / 20%);
z-index: 10;
}
#popupValoracionUsuario .rating-block {
padding: 0px 14px;
}
#popupValoracionUsuario .card-center p {
padding: 0 33px;
text-align: left;
}
#popupValoracionUsuario .card-center {
gap: 6px;
}
#popupValoracionUsuario #popup-step-1 .card-header {
text-align: center;
}
#popup-step-3 .answer-block {
padding: 0px 29px;
margin: 10px 0;
font-size: 1.2rem;
}
#popupValoracionUsuario .avatar {
height: 65px;
}
#popupValoracionUsuario .card-header p:first-of-type {
margin: 0;
padding: 12px 0 0;
}
#popupValoracionUsuario .card-header p:last-of-type {
font-weight: 600;
}
#popupValoracionUsuario .card-header {
margin: 10px 0;
padding: 0px 25px;
text-align: left;
height: 57px;
}
#popup-step-4 {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
}
textarea.text-block {
width: 100%;
}
.btn-next {
float: right;
}
.btn-cancel-valoraciones {
border-color: #5e5763 !important;
color: #5e5763 !important;
}
.rating-scale {
padding: 10px 26px;
border-radius: 11px;
font-size: 2rem;
opacity: 0.4;
background-color: transparent;
font-weight: 600;
color: #595959;
cursor: pointer;
transition: transform .2s;
}
.rating-scale:hover {
color: #fff;
opacity: 1;
transform: scale(1.5) !important;
}
.rating-scale.selected {
color: #fff;
opacity: .8;
transform: scale(1.5);
}
.rating-scale.hover {
color: #fff;
opacity: 1;
transform: scale(1.5);
}
.three-columns-grid {
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
.three-columns-grid>* {
padding: 1rem;
}
.scale-help-left {
text-align: left;
padding-left: 0;
}
.scale-help-middle {
text-align: center;
}
.scale-help-right {
text-align: right;
padding-right: 0;
}
.date-wrapper {
display: flex;
flex-direction: row;
gap: 10px;
}
.date-wrapper .valoraciones-select {
background-color: #eee;
border-radius: 8px;
border: 0;
font-size: 1.2rem;
font-weight: 700;
flex: 1;
}
.encuestas-container .fadeOut,
.encuestas-container .fadeIn {
opacity: 1;
pointer-events: all;
transition: all .5s ease-in-out;
}
.encuestas-container {
overflow: hidden;
}
.encuestas-container .card-center.slideOut {
opacity: 0;
transform: translateX(-120%);
position: absolute;
}
.encuestas-container .slideOut:not(#step-0) {
animation: step-out .5s 1 ease-out;
}
.encuestas-container .silentOut:not(#step-0) {
pointer-events: none;
opacity: 0;
transform: translateX(-100%);
position: absolute;
}
@keyframes step-out {
0% {
opacity: 1;
transform: translateX(0%);
position: absolute;
}
100% {
pointer-events: none;
opacity: 0;
transform: translateX(-100%);
position: absolute;
}
}
.encuestas-container .slideOutRight:not(#step-0) {
animation: step-out-right .5s 1 ease-out;
}
.encuestas-container .silentOutRight:not(#step-0) {
pointer-events: none;
opacity: 0;
transform: translateX(100%);
position: absolute;
}
@keyframes step-out-right {
0% {
opacity: 1;
transform: translateX(0%);
position: absolute;
}
100% {
pointer-events: none;
opacity: 0;
transform: translateX(100%);
position: absolute;
}
}
.encuestas-container .slideIn:not(#step-0) {
animation: step-in .5s 1 ease-out;
}
.encuestas-container .silentIn:not(#step-0) {
opacity: 1;
display: flex;
pointer-events: all;
transform: translateX(0%);
}
@keyframes step-in {
0% {
opacity: 0;
display: flex;
transform: translateX(100%);
}
100% {
opacity: 1;
display: flex;
pointer-events: all;
transform: translateX(0%);
}
}
#valoracionesModal #totalSteps {
font-size: 1.1rem;
}
.encuestas-container .slideInLeft:not(#step-0) {
animation: step-in-left .5s 1 ease-out;
}
.encuestas-container .silentInLeft:not(#step-0) {
opacity: 1;
display: flex;
pointer-events: all;
transform: translateX(0%);
}
@keyframes step-in-left {
0% {
opacity: 0;
display: flex;
transform: translateX(-100%);
}
100% {
opacity: 1;
display: flex;
pointer-events: all;
transform: translateX(0%);
}
}
.encuestas-container .select-clasification .answer-block {
cursor: grab;
}
.encuestas-container .select-clasification .answer-block .index {
float: right;
font-size: 85%;
opacity: .7;
line-height: 1.8;
}
.encuestas-container .select-clasification .sort-handle {
margin-left: -10px;
margin-right: 10px;
}
/* FIN STYLES VALORACIONES ########################################################################################## */
/* STYLES NIVELES ########################################################################################## */
.nav-user-profile .level-progress {
height: 15px;
text-align: right;
font-size: 9px;
min-width: 90px;
max-width: 100%;
font-weight: 700;
text-transform: uppercase;
margin: 2px 0;
position: relative;
cursor: pointer;
}
.nav-user-profile .level-progress .progress-bar {
line-height: 16px;
background-image: none;
font-size: 9px;
}
.overflow-visible {
overflow: visible;
}
.level-progress .text {
color: #555;
display: inline-block;
padding: 2px 5px;
position: absolute;
right: 0;
text-align: right;
left: 0;
}
.level-progress .text .hover {
display: none;
}
.level-progress:hover .text .hover {
display: inline-block;
}
.level-progress:hover .text span:not(.hover) {
display: none;
}
.level-timeline {
margin-bottom: 100px;
}
.level-timeline .level {
margin-bottom: 30px;
padding-left: 60px;
position: relative;
}
.level-timeline .level .logo {
width: 70px;
height: auto;
}
.level-timeline .level .info {
display: flex;
align-items: start;
}
.level-timeline .level .number {
background-color: #eee;
display: inline-block;
text-transform: uppercase;
color: #777;
font-weight: 800;
font-size: .75em;
border-radius: 2px;
padding: 1px 10px;
}
.level-timeline .level .line {
position: absolute;
width: 10px;
background-color: #888;
top: 24px;
left: 20px;
bottom: -49px;
border-bottom-left-radius: 5px;
}
.level-timeline .level:last-child .line {
border-radius: 20px;
width: 0;
}
.level-timeline .level .line span {
width: 32px;
height: 32px;
left: -11px;
top: -1px;
border-radius: 100%;
position: absolute;
background-color: #888;
}
.level-user-resume {
text-align: left;
padding-left: 30px;
}
.level-user-resume .avatar {
float: none;
}
.level-user-resume .level-name {
font-size: 2.2rem;
}
.level-user-resume .level-number {
background-color: #444;
display: inline-block;
color: #fff;
font-size: 1.1em;
border-radius: 2px;
padding: 3px 20px;
}
.level-user-resume .level-progress-full {
display: flex;
flex-direction: row;
width: 100%;
}
.level-user-resume .level-progress-full .progress {
border-radius: 0;
height: 32px;
position: relative;
margin-bottom: 5px;
border-bottom: 1px solid #e2e2e2;
background-image: linear-gradient(to bottom, #ebebeb 0%, #fff 100%);
box-shadow: inset 0 2px 2px rgba(0, 0, 0, .16);
}
.level-user-resume .level-progress-full .progress .text {
left: 0;
right: auto;
padding-left: 10px;
text-transform: uppercase;
font-size: .7em;
font-weight: 800;
line-height: 28px;
border-left: 1px solid #00000020;
}
.level-user-resume .level-progress-full .level:last-child .progress {
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
.level-user-resume .level-progress-full .level:first-child .progress {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.level-user-resume .level-progress-full .marks {
text-align: left;
opacity: .7;
font-size: .9rem;
padding-left: 8px;
border-left: 1px solid #00000020;
}
.level-user-resume .level-progress-full .level {
flex: 1;
}
.level-user-resume .table {
font-size: .9rem;
border: 1px solid #eee;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, .01);
margin: 5px 0;
}
.level-user-resume .btn-more {
font-size: .8rem;
display: inline-block;
}
/* FIN STYLES NIVELES ########################################################################################## */
/* INICIO STYLES REACCIONES ########################################################################################## */
.reacciones-container {
position: relative;
display: inline-block;
}
.reaccion-button {
padding: 5px;
}
.reaccion-option-btn {
padding: 0;
}
.reaccion-button,
.reaccion-option-btn {
background-color: #d9d9d9;
color: #606770;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 5px;
position: relative;
/*z-index: 1;*/
font-weight: 300;
font-size: .8em;
/* font-family: 'Roboto', sans-serif;
font-weight: 400;
font-style: normal; */
}
.reaccion-option-btn .reaccion-icon {
padding: 10px 12px;
display: inline-block;
}
.reaccion-option-btn .reaccion-icon.hover {
display: none;
}
.reaccion-option-btn .reaccion-icon>img {
width: 16px;
height: 16px;
max-width: none !important;
margin-bottom: 4px !important;
}
.reaccion-button:hover,
.reaccion-option-btn:hover {
background-color: transparent;
border: none;
border-radius: 0;
}
.reaccion-option-btn:hover .reaccion-icon {
display: none;
}
.reaccion-option-btn:hover .reaccion-icon.hover {
display: inline-block;
}
.containerReacciones {
display: flex;
justify-content: end;
align-items: center;
white-space: nowrap;
word-break: break-word;
}
.reaccion-options {
padding: 0 3px;
right: 0;
}
.reaccion-options,
.reaccion-options-btn {
position: absolute;
bottom: 50px;
z-index: 5000;
display: none;
background-color: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
box-shadow: 0 1px 18px rgba(0, 0, 0, 0.1);
}
/* Conector */
.reaccion-options::before {
content: "";
position: absolute;
bottom: -5px;
right: 10%;
width: 10px;
height: 10px;
transform: translateX(-50%) rotate(45deg);
background-color: #fff;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
}
.reaccion-button.active+.reaccion-options,
.reaccion-option-btn.active+.reaccion-options-btn,
.reaccion-options-btn:hover {
display: flex;
flex-direction: column;
position: absolute;
bottom: 40px;
padding: 5px;
}
.reaccion-option,
.reaccion-option-btn {
color: #000;
cursor: pointer;
border: none;
font-size: 1rem;
position: relative;
background: transparent;
}
.reaccion-option:hover .reaccion-name,
.reaccion-option-btn:hover .reaccion-name {
display: block;
}
.reaccion-button {
padding-left: 10px;
padding-right: 10px;
border: 1px solid #e0e0e0;
background-color: #e5e5e5;
border-radius: 4px;
}
.reaccion-button:hover {
border-radius: 4px;
color: #c82141;
border: 1px solid #d0d0d0;
background-color: #e0e0e0;
}
.reaccion-option .reaccion-name,
.reaccion-option-btn .reaccion-name {
display: none;
position: absolute;
font-size: .7rem;
top: 100%;
transform: translateX(-50%);
background-color: #ffffff;
padding: 4px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: auto;
white-space: nowrap;
}
.reaccion-option:hover,
.reaccion-option-btn:hover {
color: #000;
transition: transform 0.2s ease-in-out;
/* Agregamos una transición solo para la propiedad transform */
/* Agregamos una transformación en el hover para simular una animación similar a la de Facebook o LinkedIn */
transform: scale(1.2);
}
.reaccion-option:hover .reaccion-name,
.reaccion-option-btn:hover .reaccion-name {
display: block;
top: 30px;
}
.contador-reacciones-container {
cursor: pointer;
line-height: 1;
}
#modalAllReacciones {
width: 700px;
overflow: hidden;
overflow-y: hidden;
top: 100px;
left: 35%;
}
#modalAllReacciones .nav-tabs {
font-size: .9rem;
border-color: #eee;
}
#modalAllReacciones .nav-tabs>li>a {
padding: 7px 18px;
}
.reaccionesZero {
margin-right: 100px !important;
}
.tablaReacciones {
background-color: #fafafa;
}
.tablaReacciones>thead>tr>th,
.tablaReacciones>tbody>tr>th,
.tablaReacciones>tfoot>tr>th,
.tablaReacciones>thead>tr>td,
.tablaReacciones>tbody>tr>td,
.tablaReacciones>tfoot>tr>td {
vertical-align: baseline;
font-size: .9rem;
}
.tablaReacciones .reaccion {
background-color: #fff;
border-radius: 100%;
width: 24px;
height: 24px;
display: block;
z-index: 100;
position: relative;
line-height: 25px;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
.tabsReacciones {
display: flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
list-style-type: none;
padding: 0;
margin: 0;
}
/* ******************************************************************************* */
/* * COMUNIDADES ***************************************************************** */
.comunidades-header {
background-color: rgba(255, 255, 255, 0.2);
background-size: cover;
background-position: center;
border-radius: 12px;
display: flex;
justify-content: flex-end;
flex-direction: column;
padding: 20px 30px;
overflow: hidden;
min-height: 200px;
color: #fff;
margin-bottom: 20px;
position: relative;
}
.comunidades-header * {
z-index: 20;
position: relative;
}
.comunidades-header:after {
content: '';
position: absolute;
background: linear-gradient(45deg, rgba(53, 7, 101, 0.6747421136423319) 0%, rgba(146, 150, 237, 0) 100%);
top: 0;
left: 0;
bottom: 0;
width: 100%;
z-index: 10;
}
.comunidades-feed-more {
display: none;
}
#comunidades-search-info {
display: none;
}
#comunidades-form-search .loader {
border-width: 2px;
width: 14px;
height: 14px;
border-color: rgba(0, 0, 0, .1);
border-left-color: rgba(0, 0, 0, .5);
position: absolute;
top: 50%;
margin-top: -8px;
right: 15px;
display: none;
}
.comunidades-loader,
.comunidades-loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.comunidades-loader {
margin: 10px auto;
font-size: 3px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(0, 0, 0, 0.2);
border-right: 1.1em solid rgba(0, 0, 0, 0.2);
border-bottom: 1.1em solid rgba(0, 0, 0, 0.2);
border-left: 1.1em solid #ababab;
border-left-color: #000000aa;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.comunidades-sidebar {
position: -webkit-sticky;
/* Safari */
position: sticky !important;
top: 100px;
z-index: 100;
}
.comunidades-sidebar .input-group-addon {
color: #333;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.comunidades-sidebar .input-group-addon.cancel {
background: transparent;
position: absolute;
top: 50%;
right: 15px;
margin-top: -13px;
border: 0;
cursor: pointer;
z-index: 100;
display: none;
}
.comunidades-canales-modal .lista-canales {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.comunidades-canales-modal .lista-canales li {
list-style: none;
padding: 0;
margin: 0;
width: 50%;
}
.comunidades-canales-modal .lista-canales li a {
padding: 10px;
margin: 10px;
justify-content: center;
align-items: center;
min-height: 100px;
display: flex;
background-size: cover;
background-position: center;
background-color: rgba(0, 0, 0, .03);
text-align: center;
border-radius: 12px;
color: #fff;
text-decoration: none;
font-size: 1.5rem;
overflow: hidden;
position: relative;
transition: all .2s ease-out;
}
.comunidades-canales-modal .lista-canales li a:hover {
box-shadow: 0 0 20px rgb(232 161 242 / 62%)
}
.comunidades-canales-modal .lista-canales li a:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: 1;
background-color: rgba(0, 0, 0, .2);
transition: all .2s ease-out;
}
.comunidades-canales-modal .lista-canales li a:hover:after {
background-color: rgba(0, 0, 0, .4);
}
.comunidades-canales-modal .lista-canales li a span {
position: relative;
text-shadow: 0 0 10px rgba(0, 0, 0, .1);
z-index: 20;
font-weight: 800;
}
.comunidades-canales-modal .lista-canales li a small {
font-size: .9rem;
font-weight: 500;
line-height: 1.2;
}
.comunidades-canales-lista {
list-style: none;
padding: 0;
margin: 0;
}
.comunidades-canales-lista li {
list-style: none;
padding: 0;
margin: 3px 0;
}
.comunidades-canales-lista li a {
background-color: #f8f8f8;
border-radius: 20px;
display: block;
color: #666;
font-weight: 700;
padding: 6px 10px 6px 50px;
position: relative;
overflow: hidden;
}
.comunidades-canales-lista li a span {
width: 30px;
line-height: 32px;
display: inline-block;
color: #fff;
font-weight: 800;
font-size: 1.3rem;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 40px;
text-align: center;
}
.comunidades-feed .post {
margin-bottom: 20px;
}
.comunidades-feed .post .inner {
background-color: #fff;
border-radius: 12px;
overflow: hidden;
font-size: 1rem;
box-shadow: 0 0 40px rgb(0 0 0 / 13%);
border-bottom: 4px solid rgba(0, 0, 0, .1);
}
.comunidades-feed .post .channel-name {
color: #888;
text-transform: lowercase;
font-size: .9rem;
}
.comunidades-feed .post .image {
height: 250px;
display: block;
background-position: center;
background-size: cover;
}
.comunidades-feed .post .btn-edit {
margin: 0 -5px 0 10px;
padding: 6px 25px;
font-size: .8rem;
border-radius: 27px;
}
.comunidades-feed .post .btn-remove {
font-size: .9rem;
padding: 4px;
}
.comunidades-feed .post .carousel-imagenes-post {
height: 250px;
}
.comunidades-feed .post .carousel-inner {
background-color: rgba(0, 0, 0, .04);
}
.comunidades-feed .post .carousel-indicators {
align-items: center;
display: flex;
justify-content: center;
bottom: -5px;
}
.comunidades-feed .post .carousel-indicators li {
background-color: #fff;
}
.comunidades-feed .post .carousel-indicators .active {
height: 10px;
width: 10px;
}
.comunidades-feed .post .carousel-control-next,
.comunidades-feed .post .carousel-control-prev {
background-size: 1.2rem auto;
width: 10%;
bottom: 0;
opacity: .3;
}
.comunidades-feed .post:hover .carousel-control-next,
.comunidades-feed .post:hover .carousel-control-prev {
opacity: 1;
}
.comunidades-feed .post .body {
padding: 15px;
margin-right: 20px;
display: flex;
gap: 10px;
flex-direction: row;
}
.comunidades-feed .post .foot {
display: flex;
padding: 0 20px 10px 20px;
margin-left: 80px;
justify-content: space-between;
}
.comunidades-feed .post .body .content {
flex-grow: 1;
}
.comunidades-feed .post .author {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 5px;
padding: 5px 10px;
flex-direction: column;
font-weight: 600;
font-size: .9rem;
color: rgb(40, 40, 40)
}
.comunidades-feed .post .author .avatar {
width: 60px;
margin: 0;
}
.comunidades-feed .post .body p {
font-size: .95rem;
margin-top: 5px;
line-height: 1.5;
}
.comunidades-feed .post .body p a {
color: #007CC2;
text-decoration: underline;
}
.comunidades-feed .post .date {
font-weight: 800;
font-size: .8rem;
color: rgba(0, 0, 0, .4);
}
.comunidades-feed .post .comments {
padding: 10px 25px;
background-color: rgba(0, 0, 0, .03);
}
.comunidades-feed .post .comments ul {
padding: 0;
margin: 0;
list-style: none;
}
.comunidades-feed .post .comments .list {
max-height: 480px;
overflow-y: auto;
padding-right: 15px;
margin-right: -5px;
}
.comunidades-feed .post .comments ul li {
padding: 0;
margin: 5px 0 10px 0;
gap: 15px;
display: flex;
list-style: none;
}
.comunidades-feed .post .comments ul.list li {
border-bottom: 1px solid rgba(0, 0, 0, .04);
}
.comunidades-feed .post .comments .avatar {
width: 42px;
height: 42px;
margin: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, .03);
float: none;
flex-shrink: 0;
}
.comunidades-feed .post .comments .comment .name {
font-weight: 600;
color: rgb(40, 40, 40);
}
.comunidades-feed .post .comments .comment .tools {
position: absolute;
right: 0;
top: 0;
}
.comunidades-feed .post .comments .comment .msg-edit {
display: none;
}
.comunidades-feed .post .comments .comment .msg-edit .btn {
box-shadow: none;
margin: 5px 3px;
display: inline-block;
}
.comunidades-feed .post .popover {
width: 200px;
text-align: center;
}
.comunidades-feed .post .popover .btn {
box-shadow: none;
margin: 5px 3px;
}
.comunidades-feed .post .popover-content {
font-size: .9rem;
line-height: 1.1;
}
.comunidades-feed .post .comments .comment .tools span {
cursor: pointer;
padding: 0 3px;
color: #333;
opacity: .6;
font-size: .8rem;
}
.comunidades-feed .post .comments .comment .tools span:hover {
opacity: 1;
}
.comunidades-feed .post .comments .comment {
display: flex;
font-size: .9rem;
flex-direction: column;
justify-content: flex-start;
position: relative;
flex-grow: 1;
transition: all .2s ease-out;
}
.comunidades-feed .post .comments .comment.new {
flex-direction: row;
gap: 15px;
}
.comunidades-feed .post .comments .comment.new .loader {
height: 0;
border-width: 3px;
width: 0;
opacity: 0;
display: none;
}
.comunidades-feed .post .comments .comment.new.sending .loader {
width: 30px;
height: 30px;
display: block;
opacity: 1;
}
.comunidades-feed .post .comments .comment.new.sending .btn {
display: none;
}
.comunidades-feed .post .comments .comment.new.sending .tagify {
pointer-events: none;
opacity: .6;
}
.comunidades-feed .post .comments .comment.new .btn {
box-shadow: none;
background-color: rgba(0, 0, 0, .3);
color: #fff;
padding: 4px 0;
border-radius: 4px;
font-size: .8rem;
transition: all .2s ease-out;
width: 0;
opacity: 0;
}
.comunidades-feed .post .comments .comment.new.filled .btn:hover {
background-color: rgba(0, 0, 0, .5);
}
.comunidades-feed .post .comments .comment.new.filled .btn {
width: auto;
padding: 4px 20px;
opacity: 1;
}
.comunidades-feed .post .comments .tagify {
background-color: rgba(0, 0, 0, .03);
border-radius: 4px;
border: 0;
padding: 6px 10px;
font-size: .9rem;
line-height: 1.4;
color: #555;
resize: none;
outline: rgba(0, 0, 0, .3);
flex-grow: 2;
transition: all .2s ease-out;
}
.comunidades-feed .post .comments .tagify--focus {
background-color: rgba(0, 0, 0, .05);
box-shadow: inset 0 0 10px rgb(0 0 0 / 5%);
}
.comunidades-feed .post .containerReacciones {
margin: 1px 0;
padding: 0 !important;
flex-direction: row-reverse;
align-items: center;
}
.comunidades-feed .post .reaccion-button {
border: transparent;
border-radius: 20px;
padding-left: 16px;
padding-right: 16px;
background-color: rgba(0, 0, 0, .04);
}
.comunidades-feed .post .reaccion-button:hover {
background-color: rgba(0, 0, 0, .06);
}
.comunidades-feed .post .reaccion-options {
border-radius: 80px;
padding-left: 14px;
padding-right: 14px;
}
.comunidades-feed .comments .ct {
display: flex;
gap: 10px;
justify-content: space-between;
}
.comunidades-feed .comments .ct .msg {
margin-top: 3px;
}
.comunidades-feed .comments .containerReacciones {
align-items: flex-start;
flex-direction: row;
gap: 0;
width: fit-content;
}
.comunidades-feed .comments .containerReacciones {
opacity: .3;
}
.comunidades-feed .comments .list li:hover .containerReacciones {
opacity: 1;
}
.comunidades-feed .comments .contador-reacciones-container {
font-size: .8rem;
}
.comunidades-feed .comments .contador-reacciones-container span {
display: none;
}
.comunidades-feed .comments .contador-reacciones-container span.reaccion-cantidad {
display: inline-block;
width: 15px;
height: 15px;
/*background-color: #7777772b;*/
border-radius: 100%;
text-align: center;
line-height: 15px;
font-size: .7rem;
font-weight: 800;
margin: 5px 0;
}
.comunidades-feed .comments .reaccion-button {
background-color: transparent;
padding-left: 5px;
padding-right: 5px;
}
.comunidades-feed .comments .reaccion-button:hover {
background-color: transparent;
}
/* width */
.comunidades-feed ::-webkit-scrollbar {
width: 6px;
}
/* Track */
.comunidades-feed ::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
.comunidades-feed ::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
.comunidades-feed ::-webkit-scrollbar-thumb:hover {
background: #555;
}
.modal-publicacion .alert {
display: none;
border: 0;
box-shadow: none;
}
.modal-publicacion .text-mute {
letter-spacing: 0;
font-weight: 500;
}
.modal-publicacion .modal-footer .loader {
font-size: 3px;
margin-right: 12px;
display: inline-block;
vertical-align: middle;
}
.modal-publicacion .dropzone {
border: 2px dashed #ccc;
justify-content: center;
display: flex;
align-items: center;
flex-flow: wrap;
}
.modal-publicacion .dropzone .dz-message .dz-button {
color: #aaa
}
.modal-publicacion .dropzone .dz-preview .dz-image {
border-radius: 12px;
}
.modal-publicacion .dropzone .dz-preview .dz-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
opacity: 0;
}
.modal-publicacion .dropzone .dz-size {
display: none;
}
.modal-publicacion .dropzone .dz-message {
cursor: pointer;
display: flex !important;
flex-basis: 100%;
margin: 10px 0;
align-items: center;
justify-content: center;
}
.modal-publicacion .dropzone .dz-preview.dz-image-preview {
background: #fff;
padding: 4px;
border-radius: 12px;
box-shadow: 0 0 31px rgba(0, 0, 0, .06);
}
.modal-publicacion .dropzone .dz-preview .dz-progress {
top: auto;
bottom: 33px;
}
.tox-tinymce-aux {
z-index: 7000 !important;
}
/* ******************************************************************************* */
/* Mentions Plugin Clases */
.with-mentions .tagify__tag,
.user-mention {
background-color: #e9dfee;
border-radius: 2px;
padding-left: 4px;
padding-right: 4px;
font-weight: 600;
}
.user-mention:hover {
background-color: #d8c7df;
}
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-column {
flex-direction: column;
}
.flex-column-reverse {
flex-direction: column-reverse;
}
/* justify content */
.justify-content-start {
justify-content: start;
}
.justify-content-end {
justify-content: end;
}
.justify-content-center {
justify-content: center;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-around {
justify-content: space-around;
}
/* align items */
.align-items-start {
align-items: flex-start;
}
.align-items-end {
align-items: flex-end;
}
.align-items-center {
align-items: center;
}
.align-items-baseline {
align-items: baseline;
}
.align-items-stretch {
align-items: stretch;
}
/* align content */
.align-content-start {
align-content: flex-start;
}
.align-content-end {
align-content: flex-end;
}
.align-content-center {
align-content: center;
}
.align-content-around {
align-content: space-around;
}
.align-content-between {
align-content: space-between;
}
.align-content-stretch {
align-content: stretch;
}
/* wrapping */
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
/* self align */
.align-self-start {
align-self: flex-start;
}
.align-self-end {
align-self: flex-end;
}
.align-self-center {
align-self: center;
}
.align-self-baseline {
align-self: baseline;
}
.align-self-stretch {
align-self: stretch;
}
/* fill equal spaces */
.flex-fill {
flex: 1 1 auto !important;
}
.d-inline-flex {
display: inline-flex;
}
.anchor {
display: block;
visibility: hidden;
position: relative;
}
/* ******************************************************************************* */
/* SEARCH ***********************/
#popupSearchNoticias .modal-header {
padding-bottom: 15px;
}
#popupSearchNoticias .modal-header button.close {
padding-top: 13px;
}
#popupSearchNoticias .modal-body .loading.loader {
display: none;
}
#popupSearchNoticias .modal-body #search-results .noticia {
margin: 8px 0;
border-bottom: 1px solid #eee;
background-color: transparent;
padding: 4px 0px;
}
#popupSearchNoticias .modal-body #search-results .noticia:last-child {
border-bottom: 0;
}
#popupSearchNoticias .modal-body {
padding-bottom: 0;
}
#popupSearchNoticias .modal-body #search-count {
font-family: 'Quicksand', sans-serif;
font-weight: 700;
font-style: normal;
text-align: left;
margin-bottom: 20px;
margin-top: 5px;
font-size: 13px;
opacity: .8;
}
#popupSearchNoticias .modal-body #search-results .noticia p {
margin: 10px 0;
color: #888;
font-size: .9rem;
font-weight: 500;
}
#popupSearchNoticias .modal-body #search-results .noticia a.content {
text-decoration: none;
color: inherit;
}
#popupSearchNoticias .modal-body #search-results .noticia h3 {
margin: 0 0 5px;
font-size: 20px;
color: #222;
}
#popupSearchNoticias .modal-body #search-results .noticia h6 {
margin: 0 0 5px;
font-size: 15px;
color: #444;
}
#popupSearchNoticias .modal-body #search-results .noticia p iframe,
#popupSearchNoticias .modal-body #search-results .noticia p video {
width: 100% !important;
height: auto !important;
}
#popupSearchNoticias .modal-body #search-results .error {
color: red;
}
#popupSearchNoticias .modal-body #search-results .error h3 {
margin: 10px 0;
}
#popupSearchNoticias .modal-body #search-results .noticia .highlight {
background-color: #fff6a4;
color: #222;
display: inline-block;
padding-left: 3px;
padding-right: 3px;
}
#loaderSearchCB {
margin-top: 0;
margin-bottom: 0;
font-size: 3px;
margin-left: 15px;
display: none;
}
/* ******************************************************************************* */
/* PUSH NOTIF. ***********************/
.optin-popup {
position: fixed;
top: -1000px;
left: 50%;
margin-left: -210px;
width: 420px;
max-width: 100%;
background-color: #939393;
color: #fff;
padding: 30px;
text-align: center;
font-size: .8em;
z-index: 2100;
border-radius: 12px;
box-shadow: 0 0 20px #2b2b2b26;
transition: top .4s ease 0s;
-webkit-transition: top .4s ease 0s;
-moz-transition: top .4s ease 0s;
}
.optin-popup .btn {
margin: 10px 5px;
background-color: #ffffff40;
color: #fff;
}
.optin-popup .btn-primary {
background-color: #fff;
border-color: #fff;
color: #555;
}
.optin-popup h4 .icon {
padding: 10px;
border-radius: 100%;
background-color: #fff;
color: #204f6d;
}
.optin-popup .icon svg {
width: 17px;
fill: #b9b9b9;
margin: 0 3px;
}
.optin-popup h4 {
display: flex;
gap: 20px;
align-items: center;
font-size: 1rem;
text-align: left;
text-shadow: 0 0 12px #00000038;
margin-bottom: 15px;
}
.optin-popup.show {
top: -20px;
}
.push-disabled,
.push-enabled {
display: none;
}
.pass-switch {
position: absolute;
right: 20px;
top: 20px;
margin-top: -15px;
}
.i-eye {
cursor: pointer;
display: inline-block;
width: 30px;
height: 30px;
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
opacity: .8;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.i-eye-close {
opacity: .5;
cursor: pointer;
display: inline-block;
width: 30px;
height: 30px;
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10C2 10 5.5 14 12 14C18.5 14 22 10 22 10' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 11.6445L2 14' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 14L20.0039 11.6484' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.91406 13.6797L8 16.5' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.0625 13.6875L16 16.5' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}