:root{
    --main-color: #3d3c3c;  /* FONDO LANDING Y FONDO DEL MENU PRINCIPAL */
    --second-color : #f05323; /* BOTONES, MARGENES Y ALGUNAS FUENTES */
    /* --third-color : #ffffff;  FONDO DE TODAS LAS PAGINAS Y ALGUNAS FUENTES */
    --third-color : #eff0f0;
    --fourth-color : #969393; /* FUENTES SECUNDARIAS */
    --dark-gray-color:#353535;
    --red-color:#fe0000;
    --ligth-gray-color: #c0c0c0;
    --ligther-gray-color: #e6e6e6;
    --black-color: #000;
    --white-95-percent: rgba(0,0,0,0.01);
    --white-95-percent: #fafafa;
    --gray-color: #646464;
    --white-color: #fff;
    /*ANCHO PARA WEB*/
    --web-general-width: 1024px;
    --social-media-width: 100%;
    --forms-width: 550px;
    /*ANCHO MOBILE*/
    --mobile-general-width: 320px;
    --mobile-game-width: 260px;
}


 /* FUENTE PRINCIPAL */
 
/*default version*/
/* @font-face {
	font-family: 'Helvetica-Neue';
	src:
		url('fonts/Helvetica/Helvetica-Neue-Regular.ttf') 
        format('truetype')
        ;
} */

/*bold version*/
/* @font-face {
	font-family: 'Helvetica-Neue';
	src:
		url('fonts/Helvetica/Helvetica-Neue-Bold.ttf') 
        format('truetype')
        ;
    font-weight: 800;
} */

/*semibold version*/
/* @font-face {
	font-family: 'Helvetica-Neue';
	src: 
		url('fonts/Helvetica/Helvetica-Neue-Regular.ttf') 
        format('truetype')
        ;
    font-weight: 400;
} */

/*light version*/
/* @font-face {
	font-family: 'Helvetica-Neue';
	src:
		url('fonts/Helvetica/Helvetica-Neue-Light.ttf') 
        format('truetype')
        ;
    font-weight: 100;
} */

/*default version*/
@font-face {
	font-family: 'whitney';
	src: 
		url('fonts/whitney/Whitney-Medium.otf') 
        format('opentype')
        ;
}

/*bold version*/
@font-face {
	font-family: 'whitney';
	src: 
		url('fonts/whitney/Whitney-Bold.otf') 
        format('opentype')
        ;
    font-weight: 800;
}

/*semibold version*/
@font-face {
	font-family: 'whitney';
	src: 
		url('fonts/whitney/Whitney-Book.otf') 
        format('opentype')
        ;
    font-weight: 400;
}

/*light version*/
@font-face {
	font-family: 'whitney';
	src: 
		url('fonts/whitney/Whitney-Light.otf') 
        format('opentype')
        ;
    font-weight: 100;
}


::-webkit-scrollbar {
    width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 3px grey; 
    border-radius: 15px; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background:var(--gray-color); 
    border-radius: 15px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--main-color); 
  }



/* NOTIFICACIONES FIJAS */

.ag-fix-message {
	width: 500px;
	min-height: 65px;
	color: var(--black);
	background: var(--white);
	right: -500px;
	border-radius: 10px 0px 0px 10px;
    text-align: justify;
    position: fixed;
    z-index: 10;
    /* margin-top: 350px; */
    margin: 20px 0px 0px 30%;
    transition: all 300ms linear;
    display: grid;
    grid-template-columns: 10% 90%;
    box-shadow: 0.5px 0.5px 2px var(--dark-gray);
    top: 30%;
    font-size: 14px;
}

.ag-active-notif {
	right: 0px;
}

.ag-f-icon {
	display: inline-block;
	font-size: 25px;
	color: var(--white);
	padding: 50% 30%;
	border-radius: 10px 0px 0px 10px;
}

.ag-f-msg { 
	display: inline-block;
	border-left: solid 1px var(--white);
    padding: 10px;
    margin: auto 10px;
}

.ag-f-msg div {
	display: inline-block;
}

.ag-alert {
    background: rgba(226, 252, 83, 0.99);
}

.ag-info {
    background: rgba(83, 183, 250, 0.99);
}

.ag-success {
    background: rgba(58, 238, 42, 0.99);
}

.ag-error {
    background: rgba(209, 24, 0, 0.99);
}

/* <--NOTIFICACIONES FIJAS */

#debugDiv { 
    height: 150px; 
    width: 90%; 
    border: 1px solid #333; 
    overflow:scroll; 
    margin: 0px auto;
    display: none;
}

#debugDiv.activate {
    display: block;
}


.ag-container .ag-grid.ag-faqs-container {
    text-align: justify;
}

#selectSrPagoCards {
    padding: 7px;
}
#selectAddBalanceTC {
    padding: 7px;
}



.percent-text {
    display: none;
    width: 300px;
    margin: auto;
    padding-top: 16px;
}

.modal-add-balance-form .close {
    cursor: pointer;
}
.modal-add-balance-form.show {
    right: 0;
}
.ag-container.container-modal-add-balance {
    width: 80%;
    padding: 60px 50px 0px 50px;
    margin: auto auto;
}
.modal-add-balance-form-background {
    height: 100%;
    width: 100%;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.45);
    top: 0;
    left: 0;
    position: fixed;
    z-index: 1;
    display: none;
}
.modal-add-balance-form .checkbox {
    display: grid;
    grid-template-columns: 10% auto;
    width: 300px;
    margin: auto;
}
.modal-add-balance-form-background.show {
    display: block;
}
.modal-add-balance-form {
    position: fixed;
    width: 800px;
    /* height: 60%; */
    background: #fff;
    padding: 20px 0px 40px 20px;
    z-index: 10;
    transition: all 300ms linear;
    right: -100%;
    top: 20px;
    box-shadow: -2px 2px 6px rgb(0 0 0 / 39%);
    border-radius: 4px;
}

.ag-menu-legal-container .section, .ag-grid {
    text-align: justify;
    padding-bottom: 32px;
}

.cursor-pointer {
    cursor: pointer;
}

.game-container .return-game {
    width: 850px;
    margin: -50px auto 0px auto;
    cursor: pointer;
}

.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

/* MODAL PARA EL LOADING */
.ag-modal, .ag-modal-message {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(255,255,255,0.8); /* Black w/ opacity */
}

.ag-modal-message {
    background-color: rgba(255,255,255,0.98);
}

.ag-modal-msg-content {
    min-width: 200px;
    max-width: 500px;
    height: 250px;
    align-items: center;
    margin: 20px auto;
    border: solid 1px var(--orange);
    padding: 30px;
}

.modal-msg-modal {
    display: grid;
    text-align: center;
    grid-template-columns: 1fr;
}

.modal-title {
    font-size: 30px;
    padding: 0px 0px 10px 0px;
}

.modal-text {
    font-size: 20px;
    font-weight: 100;
    padding: 10px 0px 30px 0px;
}

/* .modal-buttons {

} */

/* .btn-close-modal-msg {

} */



/* LOADING WITH GIF */
#loadingWrap{
    width: 100%;
    height: 100%;
    top: 0px;
    z-index: 250;
    background-color: rgba(255, 255, 255, 0.46);
}
#loadingIcon {
    position: absolute;
    bottom: 0px;
    background: url(../assets/icons/actions/loading.gif) no-repeat top center;
    width: 100%;
    height: auto;
    top: 35%;
    background-size: 100px;
}
/* END LOADING GIF */

#ag-voucher-form .detail .d-numbers-container .d-content {
    display: grid;
    grid-template-columns: 50% 50%;
}
#ag-voucher-form .detail .d-numbers-container {
    padding: 8px 0;
}
#ag-movements-form .detail .d-numbers-container {
    padding: 8px 0;
}
#ag-movements-form .detail span {
    padding: 0 4px;
}
#ag-movements-form .detail .d-numbers{
    display: grid;
    grid-template-columns: 5% auto;
}
#ag-voucher-form .detail .d-numbers{
    display: grid;
    grid-template-columns: 5% auto;
}
#ag-voucher-form .detail span{
    padding: 0 4px;
}

#footerApp .f-container .f-info{
    padding-right: 38px;
}
#footerApp .f-container .f-info-about{
    font-size: 12px;
    padding-bottom: 4px;
    cursor: pointer;
}

.legal-medcom {
    text-decoration: none;
    color: inherit;
}

.legal-table-5 {
    display: grid;
    grid-template-columns: 15% auto 15% 15% 15%;
}
.legal-table-title {
    font-weight: 400;
    background-color: var(--fourth-color);
    text-align: center;
    /* font-family: inherit; */
    padding: 10px 0px;
}
.legal-table-data {
    font-weight: 100;   
    padding: 3px 10px;
    font-size: 14px;
}

#footerApp .f-fourth-section .f-images
    .mastercard,
    .visa,
    .loteria-nacional,
    .pronosticos,
    .segob,
    .gamming-labs,
    .geo-trust,
    .age
    {
    background-repeat: no-repeat;
    background-size: 32px;
    height: 32px;
    cursor: pointer;
    background-position: top center;
}

#footerApp .f-fourth-section .f-images .loteria-nacional {
    background-image: url("../assets/images/loteria-nacional-white2025.png");
    height: 80px;
    background-size: 80px;
}
#footerApp .f-fourth-section .f-images .pronosticos {
    background-image: url("../assets/images/pronos-white.png");
    height: 98px;
    background-size: 98px;
}
#footerApp .f-fourth-section .f-images .segob {
    background-image: url("../assets/images/segob-white.png");
    height: 92px;
    background-size: 92px;
}
#footerApp .f-fourth-section .f-images .gamming-labs {
    background-image: url("../assets/images/gaming-labs-white.png");
    height: 82px;
    background-size: 82px;
}
#footerApp .f-fourth-section .f-images .lottery {
    background-image: url("../assets/images/lottery-logo.png");
    height: 82px;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: top center;
}

/* #footerApp .f-fourth-section .f-images .geo-trust {
} */
#footerApp .f-fourth-section .f-images .age {
    background-image: url("../assets/images/mas-18-white.png");
}

#footerApp .f-fourth-section .f-images .age {
    display: inline-block;
}


#footerApp .f-fourth-section .f-images .visa {
    background-image: url("../assets/images/visa-white.png");
}
#footerApp .f-fourth-section .f-images .mastercard {
    background-image: url("../assets/images/master-card-white.png");
}

/* #footerApp .f-fourth-section .f-images div{
    margin: 0 8px;
} */

.godaddy-logo {
    height: 82px;
    margin: 0px auto;
}

.godaddy-logo img {
    height: 32px;
}

#footerApp .f-fourth-section .f-images {
    display: grid;
    /* grid-template-columns: repeat(7, auto); */
    /* grid-template-columns: 52px 52px 62px 118px 112px 100px 120px 90px 142px 52px;  */
    /* grid-template-columns: 52px 52px 62px 118px 100px 120px 90px 142px 52px;  */
    grid-template-columns: 52px 52px 118px 100px 120px 142px 52px;
    width: 636px;
    margin: 32px auto 0px auto;
}


#footerApp .t-third-section .f-social-media-container{
    display: grid;
    grid-template-columns: auto auto auto auto;
    width: 187px;
}

#footerApp .t-third-section{
    display: grid;
    grid-template-columns: 51% auto;
    text-align: left;
}
#footerApp .f-sub-title{
    padding-bottom: 8px;
    cursor: pointer;
}
#footerApp .f-title{
    text-align: left;
    font-size: 32px;
}
#footerApp .f-container{
    display: grid;
    grid-template-columns: 50% auto auto auto;
    grid-column-gap: 12px;
    text-align: left;
}
#footerApp {
    background-color: #3d3b3c;
    color: #fff;
    font-weight: 100;
}
#footerApp .f-apps {
    display: grid;
    grid-template-columns: 33% 34% 33%;
}
.f-apps-title {
    grid-column: 1/4;
    margin: 0px 0px 35px 0px;
}
.f-app-image img {
    width: 115px;
    cursor: pointer;
}
.f-logo-section {
    display: grid;
    grid-template-columns: auto 200px;
    padding: 30px 0px 0px 0px;
    border-top: solid 1px var(--white);
}
.f-medcom img {
    width: 90px;
}

.f-social-media-container {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}
.f-social-media-container .f-instagram{
    background-image: url("../assets/images/social-media-instagram.png");
}
.f-social-media-container .f-facebook{
    background-image: url("../assets/images/social-media-facebook.png");
}
.f-social-media-container .f-twitter{
    background-image: url("../assets/images/social-media-twitter.png");
}
.f-social-media-container .f-youtube{
    background-image: url("../assets/images/social-media-youtube.png");
}


.f-instagram, .f-facebook, .f-twitter, .f-youtube{
    background-repeat: no-repeat;
    background-size: 32px;
    height: 32px;
    cursor: pointer;
}

.f-segob-text {
    font-size: 12px;
}

/* ::-webkit-scrollbar {
    width: 5px;
} */
#totalPayFavoritesContainer .content-t{
    display: grid;
    grid-template-columns: auto auto;
    font-weight: 400;
    /* font-size: 28px; */
}
#totalPayFavoritesContainer {
    display: none;
}

/* SORTEOS TEC */
.st-message-name {
    padding: 10px 10px 10px 10px;
    background-color: var(--game-color);
    margin: 10px 0px 0px 0px;
    color: var(--third-color);
    border-radius: 5px;
    transition: visibility 0s linear 0.55s, opacity 0.33s linear;
    height: 0px;
    visibility: hidden;
    top: -500px;
    /* position: relative; */
}

.st-message-name.show {
    height: auto;
    visibility: visible;
    top: 0px;
}

.st-first-row .st-s-grid-row {
    display: grid;
    grid-template-columns: auto 155px;
}
.st-date-draw {
    /* grid-column: 1 / span 2; */
    text-align: left;
}
.st-body {
    padding-bottom: 132px;
}
.st-first-row .st-grid-row {
    display: grid;
    grid-template-columns: auto auto;
}
.st-second-row {
    padding-top: 28px;
}
.st-btn-get-numbers {
    background-color: var(--game-color);
    color: #fff;
    padding: 8px 0;
    margin: 8px;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    text-align: center;border-radius: 4px;
}
.st-container-numbers .st-ticket-number {
    border: solid 1px var(--game-color);
    border-radius: 4px;
    padding: 8px 16px;
    text-align: center;
    margin: 8px;
    font-weight: 600;
    font-size: 20px;
    cursor: pointer;
    transition: .3s ease all;
}
.st-ticket-number.selected {
    background-color: var(--game-color);
    color: #fff;
}
.st-container-numbers {
    display: grid;
    grid-template-columns: repeat(4, auto);
}
.st-find-numbers {
    display: grid;
    grid-template-columns: repeat(7, auto);
    padding-top: 16px;
}
.st-find-numbers .icon-random {
    margin: 8px 0;
}
.st-container-find-numbers {
    width: 290px;
    padding: 16px 8px;
}
.st-game-container .st-body .st-content .st-find-numbers input[type="number"]{
    width: 24px !important;
    height: 24px !important;
    padding: 4px !important;
    /* font-size: 12px; */
    border-radius: 4px;
    border: solid 1px var(--game-color) !important;
    margin: 0;
    -moz-appearance:textfield;
    text-align: center;
}

.st-game-container .st-body .st-content .st-find-numbers, input[type="number"]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.st-game-container .st-header .st-content .st-game-name {
    font-size: 48px;
}
.st-game-container .st-header .st-content, .st-price-ticket, .st-draw-date {
    font-size: 21px;
}
.st-total-purse {
    font-size: 48px;
    font-weight: 800;
}

.st-total-purse.grow{
    /* animation: blinker 0.5s linear 5; */
    -webkit-animation: purse-bounce 1.5s infinite ease-in-out;
    animation: purse-bounce 1.5s infinite ease-in-out;
}

.st-purse-subtitle {
    font-size: 20px;
    font-weight: 400;
}
.st-info {
    text-decoration: underline;
    cursor: pointer;
}
.st-second-info {
    padding: 10px 0px 0px 0px;
    grid-column: 1 / span 2;
}
.stec-game-subtitle {
    font-size: 24px;
}
.st-content {
    /* width: 1176px; */
    width: var(--web-general-width);
    margin: 0px auto 0px auto;
}
.st-header{
    /* background-color: var(--head-game-color);
    color: #fff; */
    /* padding: 32px 0; */
    padding: 0px 0px 10px 0px;
}
.st-header.bgcolor-game {
    background-color: var(--head-game-color);
    color: #fff;
    padding: 20px 0px 10px 0px;
}
.st-img-game.protouch {
    height: 102px;
    background-size: 118px;
}
.st-img-game.melate_retro {
    height: 120px;
    background-size: 105px;
}
.st-img-game.tris {
    height: 90px;
    background-size: 105px;
}
.st-img-game.chispazo {
    height: 100px;
    background-size: contain;
}
.st-img-game.gana_gato {
    height: 125px;
}
.st-img-game.sorteo-tec {
    background-size: 151px;
}
.st-img-game {
    margin-top: 0px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
}
.stec-voucher-url {
    text-align: center;
    padding: 5px 0px 5px 0px;
}
.stec-voucher-url a {
    text-decoration: none;
    color: var(--second-color);
    font-weight: 400;
}

/* END - SORTEOS TEC */

/* RESULTADOS */

.ag-result {
    display: grid;
    grid-template-columns: 150px auto;
    border-bottom: solid 1px var(--ligth-gray-color);
    width: 550px;
    margin: 0px auto;
    padding: 10px 0px;
}
.result-numbers {
    display: grid;    
}
.result-numbers.melate, .result-numbers.melate-revancha, .result-numbers.melate-revanchita, .result-numbers.melate-solo{
    grid-template-columns: repeat(7, 1fr);
    max-width: 240px;
}
.result-numbers.melate-retro {
    grid-template-columns: repeat(7, 1fr);
    max-width: 240px;
}
.result-numbers.chispazo, .result-numbers.ag4nar{
    grid-template-columns: repeat(5, 1fr);
    max-width: 200px;
}
.result-numbers.ag4nar{
    max-width: 220px;
}

.result-numbers.gana-gato {
    grid-template-columns: repeat(8, 1fr);
    max-width: 270px;
}
.result-numbers.tris {
    grid-template-columns: repeat(5, 1fr);
    max-width: 200px;
}

.r-title.melate, .r-title.melate-revancha, .r-title.melate-revanchita, .r-title.melate-solo{
    grid-column: 1 / span 7;
}
.r-title.melate-retro {
    grid-column: 1 / span 7;
}
.r-title.chispazo, .r-title.ag4nar {
    grid-column: 1 / span 5;
}
.r-title.gana-gato {
    grid-column: 1 / span 8;
}
.r-title.tris {
    grid-column: 1 / span 5;
}



.result-numbers.sorteo-aventurat, .result-numbers.sorteo-dinero-de-x-vida,.result-numbers.sorteo-dinero-de-x-vida-digital-love,  .result-numbers.sorteo-educativo, 
.result-numbers.sorteo-efectivo, .result-numbers.sorteo-lo-quiero, .result-numbers.sorteo-mi-sueno, .result-numbers.sorteo-tradicional {
    grid-template-columns: 45px 55px auto;
}

.r-drawtype.tris,  .r-drawtype.chispazo{
    grid-column: 1 / span 5;
}
.r-title.tris, .r-title.chispazo, .r-title.ag4nar {
    grid-column: 1 / span 5;
}

.result-numbers.progol {
    grid-template-columns: repeat(14, 1fr);
}
.result-numbers.progol-media-semana {
    grid-template-columns: repeat(9, 1fr);
    max-width: 315px;
}
.result-numbers.protouch {
    grid-template-columns: repeat(14, 1fr);
}

.r-title.progol {
    grid-column: 1 / span 14;
}
.r-title.progol-media-semana {
    grid-column: 1 / span 9;
}
.r-title.protouch {
    grid-column: 1 / span 14;
}


.r-number {
    margin: 2px 2px;
    width: 23px;
    border: solid 1px var(--main-color);
    padding: 3px 2px 1px 2px;
    border-radius: 100%;
    height: 23px;
    text-align: center;
}
.r-number.number-add {
    border: solid 1px var(--orange);
    background-color: var(--orange);
    color: var(--white);
}
.r-number.progol {
    margin: auto 0px;
    grid-column: 1 / span 2;
}
.num-in-circle {
    border: solid 1px var(--red-color);
    border-radius: 100%;
    text-align: center;
    padding: 2px 2px 2px 2px;
    width: 20px;
}
.results-stec-title {
    font-weight: 400;
}
.results-stec {
    font-weight: 100;
}
.results-stec-link {
    grid-column: 1 / span 3;;
}
.results-stec-link a{
    text-decoration: none;
    color: inherit;
    font-weight: 400;
}


/* END RESULTADOS */

.container-elements-cart {
   width: 21px;
   margin: 8px 0 0 175px;
}
.ag-button .ag-cart-logo {
    height: 25px;
    background-position: center center;
}
.ag-button .ag-white-cart-logo {
    height: 12px;
}
.ag-menu-profile {
    cursor: pointer;
    /* padding-top: 32px; */
    padding: 10px 0px 150px 30px;
}
.ag-menu-profile .img {
    /* height: 36px; */
    width: 25px;
}

.ag-menu-profile .img.games-menu {
    /* width: 35px;
    margin: 0px auto; */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 91px;
    height: 30px;
}

.ag-version {
    text-align: right;
    font-size: 10px;
    width: 25%;
    padding: 10px 0px 0px 0px;
}

.info-home-game{
    padding: 4px;
    margin: auto;
    text-align: center;
}
.info-home-game .name-game {
    font-size: 20px;
}
.info-home-game .draw-purse {
    font-size: 25px;
    font-weight: 800;
}

.info-home-game .draw-purse.grow{
    /* animation: blinker 0.5s linear 5; */
    -webkit-animation: purse-bounce 1.5s infinite ease-in-out;
    animation: purse-bounce 1.5s infinite ease-in-out;
}

@-webkit-keyframes purse-bounce {
    0%, 100% { 
        -webkit-transform: scale(1);
    }
    50% { 
        -webkit-transform: scale(1.1);
        color: var(--second-color); 
    }
}

@keyframes purse-bounce {
    0%, 100% {
        transform: scale(1);
        -webkit-transform: scale(1);        
    } 50% {
          transform: scale(1.1);
          -webkit-transform: scale(1.1);
          color: var(--second-color);
      }
}

.info-home-game .date-game {
    font-size: 20px;
}

.row-home-game{
    text-align: center;
    padding: 4px;
    border-bottom: solid 1px var(--ligther-gray-color);
}
.ag-menu {
    padding: 16px 0 16px 0;    
}
#ag-user-info {
    /* width: 382px; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    color: #fff;
    text-align: center;
    margin: auto;
    padding: 10px 0 0 0;
    font-size: 18px;
}

.ag-user-name {
    text-align: right;
    padding: 0px 15px 0px 0px;
}
.ag-user-balance {
    text-align: left;
    padding: 0px 0px 0px 15px;
}

.ag-container.footer-game {
    padding: 0;
}
.ag-container.ag-icons-menu {
    padding: 0;
}
.ag-icons-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.ag-icons-menu .img {
    height: 48px;
    cursor: pointer;
}
html, body {
    /* overscroll-behavior-y: contain; */
    --webkit-user-select: none;
    --webkit-tap-highlight-color: transparent;
    --webkit-touch-callout: none;
    /* font-family: 'Source Sans Pro', sans-serif;
    font-weight: 200; */
    /* font-family: 'Helvetica-Neue', Helvetica, sans-serif; */
    font-family: 'whitney', sans-serif;
}
.table-add-balance-cards .row {
    display: grid;
    grid-template-columns: 10% 40% 50%;
}
.ag-main-container {
    padding-top: 100px;
    min-height: 100vh;
}

.ag-main-container.landing {
    padding-top: 0px;
    min-height: auto;
}

.bday-title {
    font-size: 20px;
    font-weight: 100;
    color: var(--dark-gray-color);
    margin: 0px !important;
}

.ag-user-sidebar, .ag-games-sidebar {
    position: fixed;
    width: 700px;
    height: 100%;
    /* background: var(--white-color); */
    background-color: var(--white-95-percent);
    padding: 100px 0px 100px 0px;
    z-index: 1;
    transition: all 300ms linear;
    right: -1000px;
    top: 0;
    box-shadow: 2px 0px 4px rgba(0,0,0,0.8);
    overflow: scroll;
}

.ag-games-sidebar {
    width: 500px;
}

.ag-user-sidebar::-webkit-scrollbar, .ag-games-sidebar::-webkit-scrollbar{
    width: 0px;
}

.ag-user-sidebar.menu-active, .ag-games-sidebar.menu-active {
    right: 0;
}


.ag-index {
    background-image: url("../assets/images/new_index_image.png?v138");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    max-height: 95vh;
    min-height: 1080px;
}

.ag-index .buttons {
    width: 100%;
    bottom: 0px;
    position: absolute;
    display: grid;
    grid-template-columns: 50% 50%;
    background: rgba(0,0,0,0.40);
    padding: 30px 0px;
}

.ag-index .buttons .main-btn-left {
    width: 100%;
    padding: 0px 0px 0px 0px;
}

.ag-index .buttons .main-btn-right {
    width: 100%;
    padding: 0px 0px 0px 0px;
}

.btn-mobile-legals {
    display: none;
}

.ag-new-index {
    background-image: url("../assets/images/index_image.png?v138");
    background-repeat: no-repeat;
    background-size: cover;
    /* background-size: contain; */
    /* background-position: top left; */
    /* min-height: 100vh; */
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: 'index-empty index-text'
        'index-empty index-text';
    grid-template-rows: auto 140px;
    position: relative;
    width: 100%;
    /* margin: 60px 0px 0px 0px; */
} 

.ag-new-index.mx {
    background-image: url("../assets/images/index_image_mx.png?v138");
}

/* HOME PARA PRONOSPORTS */
.ag-new-index.pronosports {
    background-image: url("../assets/images/index_ps.png?v138");
    grid-template-areas:
        'index-empty index-empty'
        'index-text index-text'
        'index-text index-text';
    grid-template-rows: 0px auto 850px;
    background-position: top center;
}

.ag-new-index .ag-empty {
    grid-area: index-empty;
}

.ag-empty.pronosports {
    background: var(--dark-gray);
    height: 120px;
    color: var(--white-color);
    font-size: 35px;
    display: flex;
    align-items: center;
    padding: 0px 0px 0px 30px;
    font-weight: 100;
}

.ag-empty.pronosports span {
    font-weight: 400;
    padding: 0px 0px 0px 10px;
}

.ag-new-index .ag-index-text {
    grid-area: index-text;
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
        'index-info'
        'index-buttons'
        'index-logo'        
        ;
    grid-template-rows: auto 100px auto;
}

/* HOME PARA PRONOSPORTS */
.ag-index-text.pronosports {
    grid-template-columns: 50% 50%;
    grid-template-areas: 
        'index-empty index-empty'
        'index-info index-logo'
        'index-buttons index-buttons'
        ;
    grid-template-rows: auto auto 150px;
}


.ag-index-text .ag-index-logo {
    grid-area: index-logo;  
    text-align: center;  
    padding: 10px 0px 20px 0px;
}
.ag-index-text .ag-index-logo img {
    width: 280px;    
}

/* HOME PARA PRONOSPORTS */
.ag-index-logo.pronosports {
    text-align: right;
    padding: 0px 30px 0px 0px;
    margin: -240px 0px 0px 0px;
}
.ag-index-logo.pronosports img {
    width: 100px;
    content: url("../assets/icons/logos/aganar_com.png");
}

.ag-index-text .ag-index-info {
    grid-area: index-info;
    text-align: center; 
    padding: 40px 0px 90px 0px;
}
.ag-index-text .ag-index-info img {
    width: 350px;
}

/* HOME PARA PRONOSPORTS */
.ag-index-info.pronosports {
    text-align: left;
    padding: 40px 0px 0px 30px;
}
.ag-index-info.pronosports img {
    /* width: 150px; */
    content: url("../assets/images/index_logo_ps.png");
}


.ag-new-index .buttons {
    grid-area: index-buttons;
    display: grid;
    grid-template-columns: 50% 50%;
    /* background: rgba(0,0,0,0.4); */
    align-content: center;
}



.ag-index-form {
    display: grid;
    grid-template-columns: auto auto;
    padding: 32px 0 32px 0;
}
.ag-index-form .buttons {
    position: absolute;
    bottom: 20%;
    bottom: 20%;
    right: 150px;
}
.ag-index-form .buttons .ag-button{
    background-color: transparent;
    border: solid 2px white;
    font-weight: 400;
    margin: 0px 5px;
    width: 190px;
}
.ag-index-form .buttons div{
    margin: 16px 0 16px 0;
}

#btn-sign-up-res, #btn-login-res {
    width: 220px;
    padding: 20px 0px;
    font-size: 20px;
}

#btn-sign-up-res {
    float: right;
    margin: 0px 10px 0px 0px;
}

#btn-login-res {
    margin: 0px 0px 0px 10px;
}



.ag-index-form .logo img {
    width: 132px;
    text-align: left;
}

.ag-index-form .description {
    color: #ffffff;
    font-size: 56px;
    font-weight: bold;
    margin: 64px 0 0 32px;
}



#drawsContentFastBuy {
    display: grid;
    grid-template-columns: 10% 50% 40%;
    grid-gap: 8px 0;
    padding: 16px 0 16px 0;
}

.element-cart .first {
    display: grid;
    grid-template-columns: 50% 40% 10%;
}
.element-cart .second {
    display: grid;
    grid-template-columns: auto auto;
}
#elementsCart {
    font-size: 12px;
    color: var(--white);;
    margin: 0;
    background-color: var(--orange);
    border-radius: 10px;
    border: 1px solid var(--orange);
}

#elementsCart .size{
    padding: 2px 0px 2px 7px;
    width: 14px;
    height: 15px;
}

.car-st-message {
    font-size: 12px;
    padding: 5px 0px 0px 0px;
}

#tableDetailFavoriteForm {
    display: grid;
    /* grid-template-columns: 10% 45% 15% 15% 15% */
    grid-template-columns: 10% 70% 10% 10%;
    margin: 16px;
}
/* #tableDetailScheduledGame{
} */
#tableDetailScheduledGame .first-row{
padding: 4px 0 4px 0;
display: grid;
grid-template-columns: 40% 40% 20%;
}
#tableDetailScheduledGame .third-row{
padding: 4px 0 4px 0;
display: grid;
grid-template-columns: auto auto;
}
#tableDetailScheduledGame .second-row >div{
padding: 4px 0 4px 0;
}
.select-ticket.completed {
border: 1px solid var(--game-color);
border-radius: 100px;
}
.button-content-form {
    text-align: center;
    /* padding: 32px 0 32px 0; */
    padding: 20px 0px;
}
.content-draw-numbers{
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.content-draw-numbers >div {
display: flex;
}
.number-draw {
margin: 2px 0px 8px 10px;;
}
.border-bottom-gray-light {
    border-bottom: solid 1px var(--ligth-gray-color);
}
.border-top-gray-light {
    border-top: solid 1px var(--ligth-gray-color);
}
.padding-bottom-8{
padding-bottom: 8px;
}
.padding-top-8{
padding-top: 8px;
}
.padding-bottom-16{
padding-bottom: 16px;
}
.padding-right-16 {
padding-right: 16px;
}
.padding-right-8 {
padding-right: 8px;
}
.table-bank-account-list {
display: grid;
grid-template-columns: 90% 10%;
}
.delete-card, .delete-favorite, .delete-scheduled-game {
    font-size: 20px !important;
    cursor: pointer;
}
/* CLASES GENERICAS */
.center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}
.text-justify {
    text-align: justify;
}
.text-user-menu {
    text-align: left;
    padding-left: 12px;
    margin: 15px 0px 0px 0px;
    font-size: 18px;
    font-weight: 100;
    border-bottom: solid 1px var(--ligth-gray-color);
    color: var(--black-color);
    display: flex;
    align-items: center;
}

.text-user-menu.game-menu {
    margin: 0px;
}

.cartElems {
    display: inline-block;
    /* background: var(--dark-gray-color); */
    /* color: var(--white-95-percent); */
    border-radius: 100%;
    /* width: 15px; */
    /* height: 25px; */
    text-align: center;
    /* font-size: 16px; */
    padding: 0px 0px 0px 10px;
    /* vertical-align: middle; */
    /* display: flex; */
    /* align-items: center; */
    font-weight: 800;
} 

.add-bank-account-form{
    padding: 20px 0 32px 0;
}
/* LOADING INICIAL */
.load-container {
    width: 100%;
    height: 100%;
    margin: auto auto;
}
.spinner {
    margin: 150px auto;
    width: 70px;
    height: 70px;
    position: fixed;
    text-align: center;
    z-index: 10;
    right: 50%;
    top: 20%;
    -webkit-animation: sk-rotate 2.0s infinite linear;
    animation: sk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
    width: 60%;
    height: 60%;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 20%;
    background-color: var(--black-color);
    border-radius: 100%;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot1 {
    background-color: var(--second-color);
}

.dot2 {
    top: auto;
    bottom: 0;
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sk-bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 50% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
      }
}
/* <-- LOADING FIN */

.btn-fast-buy {
    color: var(--third-color);
    margin: 0px 5px;
    width: 100px;
    /* height: 11px; */
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    background: var(--second-color);
    border: solid 1px var(--second-color);
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-weight: 100;
}
.ag-header-container{
    margin: auto;
    background-color: var(--main-color);
    transform: translate(-50%, 0);
    position: fixed;
    left: 50%;
    width: 100%;
    top: 0;
    z-index: 2;
}
.ag-header-container.in-game{
    background-color: var(--game-color);
}
.ag-container {
    padding: 16px 0px;
    font-size: 16px;
    width: var(--web-general-width);
    margin: auto;
}

.homeMenu {
    padding: 0px 0px 1px 0px;
    background: var(--main-color);
}

.margin-auto {
    margin: auto;
}
.margin-20 {
    margin: 20px 0;
}

.font-size-10 {
    font-size: 10px;
}

.padding-4{
    padding: 4px;
}

.text-light {
    font-weight: 200;
}

.ag-icon-menu.about_us {
    background-image: url("../assets/icons/logos/aganar_black.png"); 
}
.ag-icon-menu.secure_platform {
    background-image: url("../assets/icons/actions/secure_platform.png");
}
.ag-icon-menu.notice_privacy {
    background-image: url("../assets/icons/actions/notice_privacy.png");
}
.ag-icon-menu.terms_and_conditions {
    background-image: url("../assets/icons/actions/terms_and_conditions.png");
}
.ag-icon-menu.responsible_gaming {
    background-image: url("../assets/icons/actions/responsible_gaming.png");
}
.ag-icon-menu.permission_segob {
    background-image: url("../assets/icons/actions/permission_segob.png");
}
.ag-icon-menu {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 36px;
}


.ag-profile-logo-black,
    .ag-profile-logo,
    .ag-menu-logo,
    .ag-cart-logo,
    .ag-white-cart-logo,
    .ag-icon-movements-black,
    .ag-icon-cart-logo-black,
    .ag-icon-profile-logo-black,
    .ag-icon-add-balance-black,
    .ag-icon-card-admin-black,
    .ag-icon-retirement-account-black,
    .ag-icon-withdraw-prizes-black,
    .ag-icon-favorites-black,
    .ag-icon-scheduled-purchases-black,
    .ag-icon-pass-change,
    .ag-icon-legal-black,
    .ag-icon-logout,
    .ag-icon-user-unsubscribe-black,
    .ag-icon-balance-scheduled,
    .ag-icon-cards-debit-credit,
    .ag-icon-promotion-code,
    .ag-icon-reference-deposit,
    .ag-icon-results-black
{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 36px;
}

.ag-icon-trash-black,
.ag-icon-scheduled-black,
.ag-icon-add-favs-black
{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 24px;
    cursor: pointer;
}
.img-game-home{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 91px;
    height: 59px;
    cursor: pointer;
}
.img-game-home.game-menu {
    height: 30px;
}

.border-bottom-none {
    border-bottom: none !important;
}
.ag-icon-results-black {
    background-image: url("../assets/icons/actions/results_menu_black.png");
    background-position: bottom;
}
.ag-icon-reference-deposit{
    background-image: url("../assets/icons/actions/reference_deposit.png");
    background-position: bottom;
}
.ag-icon-promotion-code{
    background-image: url("../assets/icons/actions/promotion_code.png");
    background-position: bottom;
}
.ag-icon-balance-scheduled{
    background-image: url("../assets/icons/actions/balance_scheduled.png");
    background-position: bottom;
}
.ag-icon-cards-debit-credit{
    background-image: url("../assets/icons/actions/cards_debit_credit.png");
    background-position: bottom;
}
.ag-icon-logout{
    background-image: url("../assets/icons/actions/logout-black.png");
    background-position: bottom;
}
.ag-icon-user-unsubscribe-black{
    background-image: url("../assets/icons/actions/user-unsubscribe-black.png");
    background-position: bottom;
}
.ag-icon-legal-black{
    background-image: url("../assets/icons/actions/legal-black.png");
    background-position: bottom;
}
.ag-icon-pass-change{
    background-image: url("../assets/icons/actions/pass-change-black.png");
    background-position: bottom;
}
.ag-icon-scheduled-purchases-black{
    background-image: url("../assets/icons/actions/scheduled-purchases-black.png");
    background-position: bottom;
}
.ag-icon-favorites-black{
    background-image: url("../assets/icons/actions/favorites-black.png");
    background-position: bottom;
}
.ag-icon-withdraw-prizes-black{
    background-image: url("../assets/icons/actions/withdraw-prizes-black.png");
    background-position: bottom;
}
.ag-icon-retirement-account-black {
    background-image: url("../assets/icons/actions/retirement-accounts-black.png");
    background-position: bottom;
}
.ag-icon-card-admin-black {
    background-image: url("../assets/icons/actions/card-admin-black.png");
    background-position: bottom;
}
.ag-icon-add-balance-black {
    background-image: url("../assets/icons/actions/add-balance-black.png");
    background-position: bottom;
}
.ag-icon-movements-black {
    background-image: url("../assets/icons/actions/movements-black.png");
    background-position: bottom;
}
.ag-icon-cart-logo-black {
    background-image: url("../assets/icons/actions/cart-black.png");
    background-position: bottom;
}

.ag-icon-profile-logo-black {
    background-image: url("../assets/icons/actions/profile-black.png");
    background-position: bottom;
}
.ag-profile-logo{
    background-image: url("../assets/icons/actions/profile-white.png");
    background-position: bottom;
    background-size: 25px;
}
.ag-menu-logo{
    background-image: url("../assets/icons/logos/aganar_t.png");
    background-position: bottom;
}

.ag-white-cart-logo{
    background-image: url("../assets/icons/actions/cart-white.png");
    background-position: bottom;
    background-size: 30px;
}

.ag-white-games-logo {
    background-image: url("../assets/icons/actions/i-games-white.png");
    background-position: bottom;
    background-size: 30px;
    background-repeat: no-repeat;
}

.img.ag-menu-logo {
    height: 48px;
}

.back-mobile {
    background: none;
    color: var(--white);
    font-size: 25px;
    /* visibility: visible; */
}

.ag-cart-logo{
    background-image: url("../assets/icons/actions/cart-black.png");
    background-size: 20px;
    background-position: top center;
}
/* .ag-cart-black-logo{
    background-image: url("../assets/icons/actions/cart-black.png");
} */
.ag-icon-trash-black{
    background-image: url("../assets/icons/actions/i-trash-black.png");
}
.ag-icon-scheduled-black{
    background-image: url("../assets/icons/actions/i-sched-black.png");
}
.ag-icon-add-favs-black{
    background-image: url("../assets/icons/actions/i-add-favs.png");
}
.ag-gana-gato-icon{
    background-image: url("../assets/icons/games/gana-gato-icon.png");
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center;
}

.ag-container .ag-grid {
    padding: 16px 0 16px 0;
    text-align: center;
}
.text-semibold {
    font-weight: 400;
}
.text-bold {
    font-weight: bold;
}

body {
    width: 100%;
    margin: 0px;
    /* background-color: var(--third-color); */
    background-color: var(--white-95-percent);
}

.grid-row-template-3{
    display: grid;
    grid-template-columns: repeat(3, auto);
}

.grid-row-template-3-home{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    padding: 10px 0px 30px 0px;
}

.ag-result-info {
    grid-column: 1 / span 3;
    color: var(--orange);
    text-align: right;
    font-size: 14px;
    text-decoration: underline;
    text-underline-position: under;
    padding: 10px 0px 0px 0px;
    cursor: pointer;
}

.grid-row-template-5{
    display: grid;
    grid-template-columns: repeat(5, auto);
}

.grid-row-template-2.width-50{
    grid-template-columns: 50% 50%
}

.grid-row-template-2.width-75{
    grid-template-columns: 75% 25%
}
.grid-row-template-2.w-15.w-75{
    grid-template-columns: 15% 75%
}

/*flechas*/
.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/*fin flechas*/

.grid-row-template-2{
    display: grid;
    grid-template-columns: repeat(2, auto);
}
.grid-row-template-4{
    display: grid;
    grid-template-columns: repeat(4, auto);
}

.ag-button{
    background: var(--second-color);
    border: solid 1px var(--second-color);
    padding: 15px 20px;
    border-radius: 5px;
    margin: 0px 10px;
    width: 150px;
    color: var(--third-color);
    cursor: pointer;
    font-size: 18px;
    text-align: center;
    display: inline-block;
}

.ag-button-link {
    padding: 10px 20px;
    color: var(--black-color);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

.ag-button-link:hover {
    font-weight: bold;
}

.ag-btn-detail-pdf {
    font-size: 14px;
    padding: 10px 15px;
}

#ag-header-img {
    background-color: var(--main-color);
    height: 100vh;
}

/* FORMULARIOS GENERALES */
.ag-form-container {
    width: var(--forms-width);
    /* margin: auto; */
    margin: 0px auto 0px auto;
}

.ag-form-container .detail{
    padding: 16px 0 16px 0;
    border-bottom: solid 1px var(--ligth-gray-color);
    border-top: solid 1px var(--ligth-gray-color);
}

.ag-form-title {
    width: 100%;
    text-align: center;
    font-size: 35px;
    margin: 10px 0px;
    font-weight: 400;
}

.ag-form-subtitle {
    width: 100%;
    text-align: center;
    font-size: 20px;
    margin: 40px 0px 20px 0px;
}

.showPassword {
    display: inline-block;
}

#ag-movements-form .ag-row{
    cursor: pointer;
}

.ag-row-menu.selected {
    background-color: #efefef;
}
.ag-row-menu {
    display: grid;
    grid-template-columns: 40px auto;
    /* border-bottom: solid 1px var(--ligth-gray-color); */
    padding: 3px 0px 0px 0px;
    cursor: pointer;
    transition: .3s ease all;
}

.ag-row-menu.games-menu {
    grid-template-columns: 100px auto;
    height: 45px;
}

.ag-row-menu.games-menu div {
    /* margin: 0px auto; */
    display: flex;
    align-content: center;
    margin: 0;
}

.ag-balance-option {
    width: 400px;
    text-align: justify;
    padding: 10px 0px;
    font-size: 20px;
    vertical-align: middle;
    margin: 0px auto;
    cursor: pointer;
}

.ag-row {
    width: 100%;
    border: none;
    border-bottom: solid 1px var(--ligth-gray-color);
    /* padding: 8px 0 8px 0; */
    margin: 0px 0px 20px 0px;
}

.ag-row.no-border {
    border: none;
}

.ag-row.no-margin {
    margin: 0px;
}

input[type=text]:disabled,input[type="tel"]:disabled,input[type="number"]:disabled,input[type="email"]:disabled, input[type="password"]:disabled{
    color: var(--fourth-color);
    -webkit-text-fill-color: var(--fourth-color);
    opacity: 1;
}

input[type=text]:disabled::placeholder,
input[type="tel"]:disabled::placeholder,
input[type="number"]:disabled::placeholder,
input[type="email"]:disabled::placeholder::placeholder,
input[type="password"]:disabled::placeholder{
    color: var(--fourth-color);
}

input[type=text],input[type="tel"],input[type="number"],input[type="email"], input[type="password"], select, textarea {
    font-size: 20px;
    /* font-weight: lighter; */
    border: none;
    /*border-bottom: solid 1px var(--black-color); */
    background: transparent;
    padding: 10px;
    width: 90%;
    color: var(--dark-gray-color);
    /* text-align: center; */
    outline: none;
    font-family: inherit;
    /* text-transform: uppercase; */
}

select {
    background: url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right;
    -webkit-appearance: none;
    background-size: 8px;
    background-position: 95% center;
}

/* option:first-child {
    color: var(--gray-color);
}  */

#cardToken {
    text-align-last: center;
}

input[type=text]:focus, input[type="password"]:focus, textarea:focus {
    outline: none;
}

input[type="checkbox"]{
    display:none;
    font-family: 'Helvetica-Neue', sans-serif; 
}

input[type="checkbox"] + label.fa {
    cursor: pointer;
    content:"\f111";
    padding: 5px 0px 5px 0px;
    color: transparent;
    font-size: 16px;
    /* -webkit-text-stroke: 1px var(--second-color); */
    color: var(--ligth-gray-color);
}

input[type="checkbox"]:checked +label.fa{
    color: var(--second-color);
}
 
input[type="checkbox"] + label.fa:before {
    display:inline-block;
    content: "\f111";
    cursor:pointer;
    left: -6px;
    padding-left: 6px;
    position: inherit;
    font-size: 18px;
}
  
input[type="checkbox"]:checked +label.fa:before{
    content:"\f111";
    left: -6px;
    padding-left: 6px;
    position: inherit;
    font-size: 18px;
}

input[type="radio"]{
    display:none; 
    font-family: 'Helvetica-Neue', sans-serif;
}

input[type="radio"] + label.fa {
    cursor: pointer;
    content:"\f111";
    padding: 2px 0 8px 0;
    color: transparent;
    font-size: 20px;
    /* -webkit-text-stroke: 1px var(--second-color); */
    color: var(--ligth-gray-color);
}

input[type="radio"]:checked +label.fa{
    color: var(--second-color);
}
 
input[type="radio"] + label.fa:before {
    display:inline-block;
    content: "\f111";
    cursor:pointer;
    left: -6px;
    padding-left: 6px;
    position: inherit;
}
  
input[type="radio"]:checked +label.fa:before{
    content:"\f111";
    left: -6px;
    padding-left: 6px;
    position: inherit;
    font-size: 20px;
}

/* EVITA EL COLOR AZUL DEL PRELLENADO */
input:-webkit-autofill, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px var(--white-95-percent) inset !important; 
    background-color: var(--white-95-percent) !important;
    background-clip: content-box !important;
}

.ag-select {
    padding: 5px 0px 15px 0px;
}

.ag-select select {
    /* width: 180px; */
    /* border-radius: 10px; */
    cursor: pointer;
    /* max-width: 100%; */
}

.ag-checkbox {
    font-size: 16px;
    display: grid;
    /* grid-template-columns: auto auto; */
    grid-template-columns: 6% 94%;
}

.ag-checkbox div {
    /* width: 85%; */
    display: inline-block;
    padding: 4px 0px 0px 0px;
    text-align: justify;
}

.ag-checkbox div a {
    text-decoration: none;
    color: inherit;
    font-weight: 800;
}

.ag-user-date select{
    width: 32%;
    display: inline-block;
    padding: 5px 0px 5px 3px;
}

#gender {
    padding: 5px 0px 5px 3px;
    width: 100%;
}

.user-date-title {
    text-align: center;
    font-size: 18px;
    padding: 0px 0px 10px 0px;
}

.hidden {
    visibility: hidden;
}

/* NOTIFICATIONS  */
.ag-notifications {
    width: 50%;
    border-radius: 5px;
    background: transparent;
    color: #ffffff;
    padding: 10px 15px;
    margin: 20px 0px 0px 30%;
    position: fixed;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.33s, opacity 0.33s linear;
    top: 30%;
    font-size: 14px;
    z-index: 90;
}

.ag-show {
    visibility: visible;
    opacity: 1;
    -webkit-transition: 1.5s;
    -moz-transition:  1s;
    -ms-transition:  1s;
    -o-transition:  1s;
    transition:  1s;
}

.ag-alert {
    background: rgba(219, 245, 72, 0.98);
}

.ag-info {
    background: rgba(90, 182, 243, 0.98);
}

.ag-success {
    background: rgba(112, 223, 102, 0.98);
}

.ag-error {
    background: rgba(236, 115, 100, 0.98);
}

/* END NOTIFICATIONS */



/* GRID PARA MOVIMIENTOS */
.grid-row-movement {
    display: grid;
    grid-template-columns: 30% 30% 30% 10%;
    grid-template-areas: 'movement-title movement-title movement-balance movement-detail-icon'
                        'movement-date movement-id movement-amount movement-detail-icon';
    /* font-size: 14px; */
    font-weight: 100;
    padding: 10px 0px 10px 0px;
    /* margin: 0px 0px 10px 0px; */
    grid-gap: 5px 0px;
    text-transform: uppercase;
}

.cell-movement-title {
    grid-area: movement-title;
    /* padding: 0px 0px 5px 0px; */
    overflow: hidden;
    max-width: 35ch;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cell-movement-id {
    grid-area: movement-id;
    overflow: hidden;
}
.cell-movement-date {
    grid-area: movement-date;
    /* padding: 0px 0px 5px 0px; */
}
.cell-movement-amount {
    grid-area: movement-amount;
    /* padding: 0px 10px 0px 0px; */
    text-align: right;
}
.cell-movement-amount.red {
    color: var(--red-color);    
}
.cell-movement-balance {
    grid-area: movement-balance;
    /* padding: 0px 0px 5px 0px; */
    text-align: right;
}
.cell-movement-detail-icon {
    grid-area: movement-detail-icon;
    margin: auto auto;
}

.detail-movement {
    font-weight: 100;
    width: 90%;
    margin: 0px auto;
    /* font-size: 14; */
    /* color: var(--gray-color); */
    padding: 10px 0px 40px 0px;
    display: none;
    text-transform: uppercase;
}
.detail-show {
    display: block;
}


#btnGenerateReferenceDeposit {
    width: 180px;
}

/* GENERALES  */

/* MARGIN  */
.m-10-0 {
    margin: 10px 0px;
}

/* PADDING  */
.p-10-0 {
    padding: 10px 0px;
}

/* BORDER */
.b-bottom-orange {
    border-bottom: solid 1px var(--orange);
}

/* DEPOSITO SPEI */
.spei-data {
    font-size: 20px;
    padding: 20px 0px 0px 0px;
}

.t-uppercase {
    text-transform: uppercase;
}

#selectBank {
    padding: 7px; 
}

/* GLOBOS DE CUMPLEAÑOS */
#balloon-container {
    /* height: 90vh; */
    padding: 1em;
    box-sizing: border-box;
    /* display: flex; */
    display: initial;
    flex-wrap: wrap;
    overflow: hidden;
    top: 0px;
    position: relative;
    width: 100%;
    margin: 0px auto;
    z-index: 12;
  }
  
  .balloon {
    height: 125px;
    width: 105px;
    border-radius: 75% 75% 70% 70%; 
    position: absolute;
  }
  
  .balloon:before {
    content: "";
    height: 75px;
    width: 1px;
    padding: 1px;
    background-color: var(--red-color);
    display: block;
    position: absolute;
    top: 125px;
    left: 0;
    right: 0;
    margin: auto;
  }
  
  .balloon:after {
      content: "";
      text-align: center;
      display: block;
      position: absolute;
      color: inherit;
      top: 120px;
      left: 0;
      right: 0;
      margin: auto;
  }

  #balloon-container.fade-out {
    animation: fadeOut ease 30s;
  }
  
  @keyframes float {
    from {transform: translateY(0vh);
    opacity: 1;}
    to {transform: translateY(-500vh);
    opacity: 0;}
  }

  @keyframes fadeOut {
    0% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }

  /* <-- GLOBOS */

  /* IPAD PRO */
@media only screen 
and (min-device-width: 1024px) 
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {
    .ag-new-index .ag-index-text {
        grid-area: index-text;
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas:
            'index-info'
            'index-buttons'
            'index-logo';
        grid-template-rows: auto 250px;
    }

    .ag-index-text .ag-index-logo {
        padding: 0px;
    }

    .ag-index-text .ag-index-logo img {
        width: 150px;
    }

    .ag-index-text .ag-index-info {
        padding: 20px 0px 0px 0px;
    }

    .ag-index-text .ag-index-info img {
        width: 350px;
    }

}

/* IPAD NORMALES */
@media only screen 
and (min-width: 813px) 
and (max-width:1024px) 
and (-webkit-min-device-pixel-ratio: 1) {
    .ag-new-index .ag-index-text {
        grid-area: index-text;
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas:
            'index-info'
            'index-buttons'
            'index-logo';
        grid-template-rows: auto 160px;
    }

    .ag-index-text .ag-index-logo {
        padding: 0px;
    }

    .ag-index-text .ag-index-logo img {
        width: 100px;
    }

    .ag-index-text .ag-index-info {
        padding: 20px 0px 0px 0px;
    }

    .ag-index-text .ag-index-info img {
        width: 300px;
    }

}


@media only screen and (max-width:812px) {


    .ag-fix-message {
		width: 90%;
		right: -900px; 
		grid-template-columns: 40px auto;
	}
	
	.ag-active-notif {
		right: 0px;
	}
	
	.ag-f-icon {
		font-size: 20px;
	}
	
	.ag-f-msg {
		font-size: 12px; 
	}

    #loadingIcon {
        top: 45%;
        background-size: 60px;
    }

    .img-game-home{
        width: 60px;
        height: 43px;
    }

    .img-game-home.game-menu {
        height: 25px;
    }

    .ag-main-container {
        padding-top: 80px;
        /* width: 100vw; */
    }

    .ag-user-sidebar, .ag-games-sidebar {
        width: 310px;
        padding: 40px 0px 0px 10px;
    }

    .ag-games-sidebar {
        width: 300px;
        margin: 20px 0px 0px 0px;
    }

    .ag-games-sidebar .ag-container{
        width: 100%;
    }

    .ag-row-menu.games-menu {
        grid-template-columns: 75px auto;
    }

    .ag-row-menu.games-menu {
        height: 40px;
    }

    .ag-container {
        width: var(--mobile-general-width);
        /* font-size: 14px; */
        margin: 0px auto 30px auto;
        padding: 36px 0px;
    }

    .ag-container.in-game { 
        width: var(--mobile-game-width);
    }

    .ag-balance-option {
        width: 100%;
        font-size: 16px;
    }

    .ag-balance-icon {
        padding: 0px 12px;
    }

    .ag-result-info {
        font-size: 10px;
    }

    .grid-row-template-3-home {
        padding: 10px 0px;
    }

    .ag-button-link {
        font-size: 12px;
    }

    .ag-init-logo {
        display: block;
        top: 90px;
        width: 100%;
        margin: 0px auto;
        position: absolute;
        text-align: center;

    }

    .ag-init-logo img {
        width: 126px;
    }

    .btn-signup-res, .btn-login-res {
        width: 250px;
        padding: 20px 0px;
        margin: 10px auto;
        font-size: 20px;
    }

    .ag-menu {
        /* width: 280px; */
        margin: auto;
        padding: 10px 0px 0px 0px;
    }

    .ag-icons-menu {
        width: 100%;
        margin: 10px 0px 10px 0px;
    }

    .table-bank-account-list {
        font-size: 14px;
    }

    /* .ag-button .ag-cart-logo { */
        /* height: 8px; */
    /* } */

    .ag-button .ag-white-cart-logo {
        height: 8px;
    }

    .ag-icons-menu .img {
        height: 30px;
        width: 30px;
        margin: 0px auto 0px auto;
    }

    .img.ag-menu-logo {
        height: 40px;
        margin: -10px auto 0px auto;
    }

    #ag-user-info {
        font-size: 12px;
        width: 100%;
        padding: 0 0 5px 0;
    }

    .ag-user-name {
        padding: 0px 5px 0px 0px;
    }

    .ag-user-balance {
        padding: 0px 0px 0px 5px;
    }

    .percent-text {
        width: 300px;
    }

    .ag-form-container .row {
        padding: 4px 0 4px 0;
    }

    .ag-form-container {
        width: 100%;
    }

    .bday-title {
        font-size: 14px;
    }

    .ag-form-title {
        font-size: 20px;
        margin: 10px auto 20px auto;
    }

    .game-container .return-game {
        margin: 0px auto 0px auto;
        width: 100%;
    }

    .ag-menu-profile {
        padding: 0;
    }

    .ag-menu-profile .img {
        /* height: 22px; */
        width: 20px;
    }

    .ag-menu-profile .img.games-menu {
        display: flex;
        align-content: center;
        height: 25px;
        width: 60px;
    }

    .ag-menu-legal .img {
        width: 20px;
    }

    .text-user-menu {
        font-size: 16px;
        padding-left: 0px;
        color: var(--black-color);
    padding: 0px 0px 5px 0px;
    }


    .ag-form-subtitle {
        padding: 0px;
        margin: 0px;
        font-size: 14px;
        /* font-weight: bold; */
    }

    input[type=text], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], select, textarea {
        width: 85%;
        font-size: 14px; 
        padding: 7px;
        margin: 0px auto;
    }

    .ag-checkbox {
        font-size: 13px;
        line-height: 18px;
        width: 80%;
        margin: 10px auto;
        grid-template-columns: 15% 85%;
    }

    .ag-notifications {
        width: 90%;
        top: 20%;
        margin: auto;
    }

    .ag-select select {
        width: 90%;
    }

    /* .ag-button {
        font-size: 14px;
    } */

    #tableDetailFavoriteForm {
        grid-template-columns: 10% 60% 15% 15%;
        margin: 0px auto 20px auto;
        font-size: 14px;
    }

    #tableDetailFavoriteForm .ag-icon-scheduled-black {
        height: 20px;
        background-size: contain;
        margin: auto auto;
    }

    #tableDetailScheduledGame {
        font-size: 14px;
    }

    .ag-container-home-game img {
        width: 32px;
    }

    .info-home-game {
        font-size: 12px;
    }

    .info-home-game .name-game {
        font-size: 16px;
    }

    .info-home-game .draw-purse {
        font-weight: 800;
        font-size: 18px;
    }

    .info-home-game .date-game {
        font-size: 14px;
    }

    .btn-fast-buy {
        width: 70px;
        font-size: 12px;
        margin: 0px;
        padding: 10px 8px;
    }


    .ag-index-form {
        grid-template-columns: auto;
        padding: 8px;
    }

    .ag-index-form .buttons {
        margin: 0px auto 30px auto;
        /* float: none; */
        position: unset; 
    }

    .ag-index-form .logo img {
        width: 125px;
    }

    .ag-index-form .logo {
        text-align: center;
        margin-top: 62px;
    }

    .ag-index-form .description {
        display: none;
    }

    .ag-index-form .second {
        bottom: 0;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .ag-index {
        background-image: url("../assets/images/new_index_image_r.png?v138");
        /* background-color: var(--gray-color); */
        background-size: 100%;
        height: 100vh;
    }
    .ag-index .buttons {
        background: transparent;
        grid-template-columns: 100%;
        padding: 0px 0px 60px 0px;
        text-align: center;
    }

    .ag-index .buttons .main-btn-left {
        float: none;
    }

    .ag-index-form .buttons .ag-button {
        background: var(--second-color);
        border: solid 1px var(--second-color);
        margin: 5px auto;
    }


    .ag-new-index {
        background-image: url(../assets/images/index_image_r.png?v138);
        background-size: cover;
        grid-template-columns: 100%;
        grid-template-areas: 
            'index-text'
            'index-legals'
            'index-empty';
        grid-template-rows: auto 30px 0px 0px;
        height: 100vh;
    }

    .ag-new-index.mx {
        background-image: url(../assets/images/index_image_r_mx.png?v138);
    }

    /* HOME PRONOSPORTS  */
    .ag-new-index.pronosports {
        background-image: url(../assets/images/index_ps_r.png?v138);
        grid-template-areas:
        'index-text'        
        'index-legals'
        'index-empty';
        grid-template-rows: auto 0px 30px 0px;
    }

    .ag-new-index .ag-index-text {
        grid-template-columns: 100%;
        grid-template-areas: 
            'index-info'
            'index-buttons'
            'index-logo'            
            ;
        grid-template-rows: 65% 20% auto;
    }

    /* HOME PRONOSPORTS  */
    .ag-index-text.pronosports {
        grid-template-areas: 
            'index-logo index-info'
            'index-buttons index-buttons'
            ;
        grid-template-columns: 50% 50%;
        grid-template-rows: 75% 20% auto;
    }

    .ag-index-text .ag-index-info {
        text-align: right;
        padding: 70px 45px 0px 0px;
    }
    .ag-index-text .ag-index-info img {
        width: 190px;
    }

    /* HOME PRONOSPORTS  */
    .ag-index-info.pronosports {
        text-align: right;
        padding: 20px 20px 0px 0px;
    }
    .ag-index-info.pronosports img {
        width: 150px;
    }

    .ag-index-text .ag-index-logo {
        padding: 0px 0px 0px 0px;
    }
    .ag-index-text .ag-index-logo img {
        width: 180px;
    }

    /* HOME PRONOSPORTS  */
    .ag-index-logo.pronosports {
        text-align: left;
        padding: 20px 0px 0px 20px;
        margin: 0px;
    }

    .ag-new-index .buttons {
        grid-template-columns: 100%;
        background: transparent;
        text-align: center;
        align-content: baseline;
    }

    .ag-new-index .ag-empty {
        display: block;
    }

    .ag-empty.pronosports {
        height: 0px;
        display: none;
    }


    #btn-sign-up-res, #btn-login-res {
        width: 200px;
        padding: 15px 0px;
        margin: 5px auto;
        font-size: 18px;
        float: none;
        font-weight: 100;
    }

    .btn-mobile-legals {
        grid-area: index-legals;
        display: block;
        text-align: center;
        /* font-size: 18px; */
        /* color: var(--dark-gray-color); */
        margin: 0px auto 0px auto;
        cursor: pointer;
        /* position: absolute; */
        bottom: 10px;
        width: 100%;
        /* text-shadow: 0 0 black; */
        padding: 0px;
        color: var(--ligth-gray);
    }

    #elementsCart {
        font-size: 10px;
    }

    #elementsCart .size {
        padding: 2px 4px 2px 4px;
        width: 9px;
        height: 12px;
    }

    .container-elements-cart {
        width: 18px;
        margin: -9px 0 0 51%;
        text-align: center;
    }
    .st-game-container {
        margin: -7px 0px 0px 0px;
    }

    .st-header {
        padding: 10px 0px 15px 0px;
    }

    .st-content {
        /* width: 280px; */
        width: var(--mobile-general-width);
    }

    /* .st-content a {
        text-decoration: none;
        color: inherit;
        font-weight: 800;
    } */

    .st-first-row {
        border-bottom: solid 0.5px var(--ligther-gray-color);
        padding: 0px 0px 10px 0px;
    }

    .st-first-row.s-tec-game {
        border: none;
    } 

    .st-content.bingo-content {
        width: 100%;
    }

    .st-first-row.bingo-f-row {
        width: var(--mobile-general-width);
        margin: 0px auto;
    }

    .st-container-numbers {
        display: grid;
        grid-template-columns: repeat(2, auto);
    }

    .st-body {
        padding-bottom: 82px;
    }
    .st-total-purse {
        font-size: 22px;
        padding-bottom: 10px;
    }
    .st-purse-subtitle {
        font-size: 16px;
    }
    .st-img-game.sorteo-tec {
        height: 39px;
        background-size: 90px;
    }
    .st-img-game {
        height: 50px;
        background-size: contain;
        margin-top: 0px;
    }
    .st-img-game.melate_retro {
        height: 55px;
        background-size: 50px;
    }
    .st-img-game.chispazo {
        height: 50px;
        background-size: 90px;
    }
    .st-img-game.tris {
        height: 47px;
        background-size: 55px;
    }
    .st-img-game.protouch {
        height: 55px;
        background-size: 60px;
    }
    .st-img-game.gana_gato {
        height: 65px;
    }
    .st-img-game.prono_sports {
        width: 75px;
    }
    .st-first-row .st-grid-row {
        grid-template-columns: auto;
    }
    .st-date-draw {
        font-size: 12px;
    }
    .st-second-row {
        padding-top: 12px;
    }    
    .st-game-container .st-header .st-content .st-game-name {
        font-size: 32px;
    }
    .st-game-container .st-header .st-content, .st-price-ticket, .st-draw-date {
        font-size: 12px;
    }
    .st-draw-date,.st-price-ticket {
        font-size: 16px;
    }
    .st-first-row .st-s-grid-row {
        grid-template-columns: 70% auto;
    }
    .st-second-info > div {
        padding: 0px 5px;
    }
    .stec-game-subtitle {
        font-size: 16px;
        grid-column: 1 / span 3;
        padding: 5px 0px 0px 0px !important;
    }
    .st-message-name {
        font-size: 14px;
    }

    .stec-voucher-message {
        text-align: center;
        padding: 10px 0px;
        font-weight: 400;
        font-size: 16px;
    }

    #footerApp {
        display: none;
    }
    #ag-voucher-form .detail .d-numbers-container .d-content {
        grid-template-columns: auto;
        padding: 4px 0;
    }
    .modal-add-balance-form {
        width: 90%;
        /* height: 80%; */
    }

    .grid-row-movement {
        font-size: 14px;
    }

    .cell-movement-title {
        max-width: 20ch;
    }

    .detail-movement {
        font-size: 14px;
    }


    /* RESULTADOS */
    .ag-result {
        width: 100%;
        grid-template-columns: 70px auto;
    }

    .result-numbers.progol .r-number, 
    .result-numbers.progol-media-semana .r-number,
    .result-numbers.protouch .r-number
     { 
        width: auto;
        border: none;
    }

    .result-numbers.progol .r-number.number-add {
        border: none;
        background-color: transparent;
        color: var(--second-color);
        font-weight: 400;
    }

    /* NUEVOS TERMINOS Y CONDICIONES */
    #btnAcceptLegals, #btnReadLegals {
        grid-column: 1 / span 2;
        margin: 10px auto;
    }

    .balloon {
        height: 85px;
        width: 70px;
    }

    .balloon:before {
        height: 55px;
        top: 85px;
    }

    .balloon:after {
        top: 90px;
    }

}

/* PARA IOS */
/* @media only screen and (min-height: 350px) and (max-height: 500px) and (orientation: landscape) {
    body {
        width: 100vh;
        height: 100vw;
        transform-origin: 0 0;
    }

    body.rotation-90 {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: 230px 230px;
    }

    body.rotation90 {
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: 160px 160px;
    }

} */