/* ALERT MESSAGES STYLES */
.bp__new__alert, 
.bp__new__info {
    display: flex;
    align-items: center;
    background-color: #262626;
    border-radius: 10px;
    padding: 15px;
    font-size: 14px;
    text-align: left;
}
.bp__new__alert__margin {
    position: absolute;
    left: 0;
    height: 100%;
    width: 10px;
    background-color: #f4ab33;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.bp__new__info__margin {
    position: absolute;
    left: 0;
    height: 100%;
    width: 10px;
    background-color: #4169fc;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#playerPendingPayouts {
    display: flex;
    align-items: center;
    background-color: black;
    border-radius: 10px;
    padding: 15px;
    font-size: 14px;
}
#playerPendingPayouts p {
    text-align: left;
}
#pendingPayouts-margin {
    position: absolute;
    left: 0;
    height: 100%;
    width: 10px;
    background-color: #f4ab33;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* DEPOSITAR - RETIRAR DINERO MAIN PAGES */
#cashier-container {
    font-family: 'Gotham-Book';
    font-size: 10px;
    height: 75%;
    overflow: auto;
    width: 94%;
}
.payoutContainer .bp__new__alert,	
.payoutContainer .bp__new__info,	
.depositContainer .bp__new__alert,	
.depositContainer .bp__new__info, 	
.payoutBox .bp__new__alert, 	
.payoutBox .bp__new__info, 	
.depositBox .bp__new__alert, 	
.depositBox .bp__new__info {	
    background-color: black;	
}
#cashier-container .hide {
    display: none;
}
#cashier-container .show {
    display: block;
}
.cashierGrid__unit {
    border-radius: 5px;
    padding: 15px;
    font-size: 1.8em;
    display: flex;
    align-items: center;
    border: 1px solid white;
    max-height: 8vh;
    width: 100%;
}

.selectionTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}
.selectionTitle--deposit {
    margin-top: 20px
}
.selectionTitle--payout {
    margin-bottom: 40px;
}
#cashier-container .selectionTitle__text {
    display: inline-block;
    background-color: #262626;
    color: white;
    padding: 0;
    font-family: 'Gotham-Black';
    font-size: 2em;
}
.selectionTitle__infoBubble {
    height: 40px;
}

.cashierGrid__unit:not(.deposit-grid-container .cashierGrid__unit:last-child), 
.cashierGrid__unit:not(.payout-grid-container .cashierGrid__unit:last-child) {
    margin-bottom: 5px;
}
.cashierGrid__unit:not(.promoBox__unit):hover {	
    background-color: #514f50;	
    border: 1px solid #30d87b;	
}
.methodBlock {
    width: 100%;
}
.methodBlock__wrapper {
    display: flex;
    align-items: center;
}
.methodBlock__wrapper--large {
    width: 95%;
}
.methodBlock__wrapper--small {
    width: 5%;
}
.methodBlock__textContent {
    max-width: 250px;
}
.methodBlock__name {
    font-family: 'Gotham-Black';
    font-size: 16px;
    text-align: left;
}
.methodBlock__description {
    font-family: 'Gotham-Thin';
    font-size: 16px;
    text-align: left;
}
.methodBlock__background {
    background-color: white;
    border-radius: 5px;
    width: 65px;
    height: 45px;
}
.methodBlock__background:not(.methodBlock__background:last-child) {
    margin-right: 3px;
}
.methodBlock__img {
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.methodBlock__img--svg {
    height: 30px;
}

.depositContainer .disclaimerPanel,
.payoutContainer .disclaimerPanel {
    margin-top: 30px;
    padding: 20px 10px 5px;
    border: 1px dashed #30d87b;
    border-radius: 5px;
    text-align: left;
}
.depositContainer .disclaimerPanel__infoBubble, 
.payoutContainer .disclaimerPanel__infoBubble {
    height: 25px;
    margin-right: 10px;
}
.depositContainer .disclaimerPanel__text, 
.payoutContainer .disclaimerPanel__text {
    font-size: 1.4em;
}

/* DEPOSITAR DINERO MAIN PAGES - PROMO MODULE */
#bonus-code-module {	
    margin-top: 20px;	
}
.promoBox__unit {
    border: 1px solid white;
    background-color: #262626;
    margin-bottom: 20px;
}
.promoBox__form {
    display: flex;
    justify-content: space-between;
    align-items: inherit;
    width: 100%;
}
.promoBox__innerBlock {
    display: flex;
    align-items: inherit;
    justify-content: space-evenly;
}
.promoBox__form #promoblock-1 {
    width: 38%;
}
#promoblock-1 #promo-element1 {	
    margin-right: 5px;	
}	
#promoblock-1 #promo-element3 {	
    font-family: 'Gotham-Bold';	
    font-size: 1rem;	
    color: #30d87b;	
}
.promoBox__form #promoblock-2 {
    width: 62%;
}
#promoblock-2 #input-wrapper {
    width: 55%;
    font-family: "Gotham-Book";	
    font-size: 14px;
}
.promoBox__form #promoblock-2 input {
    margin: 0;
    color: white;
    border-color: #c8c8c8;
}
.promoBox__form #promoblock-2 input::placeholder {	
    font-family: "Gotham-Book";	
    border-color: #c8c8c8;	
    color: #c8c8c8;	
    text-align: center;	
    font-size: 12px;	
    bottom: 3px;	
}
.promoBox__form #promo-element2, 
.promoBox__form #promo-element4,
.promoBox__form #promo-element5 {
    display: none;
}

/* Mobile Styles */
/* ALERT MESSAGES STYLES */
@media screen and (max-width: 500px) {
    #playerPendingPayouts {
        font-size: 12px;
    }
    #pendingPayouts-margin {
        top: 0;
    }
}

@media screen and (max-width: 350px) {
    .bp__new__alert {
        font-size: 10px;
    }
    .bp__new__alert img {
        width: 50px;
    }
}

@media screen and (max-width: 1400px) {	
    /* DEPOSITAR - RETIRAR DINERO MAIN PAGES */	
    #popupContent {	
        width: 80% !important;	
    }	
}
@media screen and (max-width: 768px) {
    /* DEPOSITAR - RETIRAR DINERO MAIN PAGES */
    #popupWindow {
        overflow: hidden;    
    }
    #popupContent {	
        width: 100% !important;	
    }
    #cashier-container {
        height: unset;
        top: 0;
    }
    .payoutContainer .bp__new__alert,	
    .payoutContainer .bp__new__info,	
    .depositContainer .bp__new__alert,	
    .depositContainer .bp__new__info, 	
    .payoutBox .bp__new__alert,	
    .payoutBox .bp__new__info, 	
    .depositBox .bp__new__alert,	
    .depositBox .bp__new__info,	
    #playerPendingPayouts {	
        background-color: #262626;	
    }
    
    .cashierGrid__unit {
        padding: 10px;
        font-size: 1.3em;
    }
    .cashierGrid__unit--tall {
        min-height: 150px;
    }

    .selectionTitle--payout {
        margin-bottom: 30px;
    }
    #cashier-container .selectionTitle__text {
        font-size: 1.4em;
        background-color: black;
    }
    .selectionTitle__infoBubble {
        display: none;
    }
    .cashierGrid__unit:not(.promoBox__unit) {
        max-height: 15vh;
    }
    .cashierGrid__unit:not(.deposit-grid-container .cashierGrid__unit:last-child), 
    .cashierGrid__unit:not(.payout-grid-container .cashierGrid__unit:last-child) {
        margin-bottom: 5px;
        align-items: center;
    }
    .methodBlock__wrapper {	
        gap: 3px;	
    }
    .methodBlock__wrapper--large {
        width: 85%;
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    .methodBlock__wrapper--small {
        width: 15%;
    }
    .methodBlock__wrapper--paymentMethods {
        flex-wrap: wrap;
    }
    .methodBlock__textContent {
        max-width: 200px;
    }
    .methodBlock__name {
        margin-top: 10px;
    }
    .methodBlock__name, 
    .methodBlock__description {
        font-size: 12px;
    }
    .methodBlock__background:not(.methodBlock__background:last-child) {
        margin-right: 0;
    }
    
    .depositContainer .disclaimerPanel, 
    .payoutContainer .disclaimerPanel {
        margin-bottom: 200px;
    }

    /* DEPOSITAR DINERO MAIN PAGES - PROMO MODULE */
    #bonus-code-module {	
        margin-top: 5px;	
    }
    .promoBox__form, .promoBox__form #promoblock-2 {
        flex-direction: column;
    }
    .promoBox__unit, .folded {
        border: 1px solid white;
        background-color: black;
    }
    .unfolded {
        background-color: transparent;
    }
    .promoBox__form #promoblock-1,
    .promoBox__form #promoblock-2, 
    #promoblock-2 #input-wrapper,	
    #promoblock-2 #btn-wrapper,	
    #promoblock-2 #btn-wrapper button {
        width: 100%;
    }
    .promoBox__form #promoblock-2, 
    .promoBox__form #promo-element1, 
    .promoBox__form #promo-element3 {
        display: none;
    }
    .promoBox__form #promo-element2, 
    .promoBox__form #promo-element4,
    .promoBox__form #promo-element5 {
        display: block;
    }
    .promoBox__form #promo-element4 {
        font-family: 'Gotham-Black';
        color: #30d87b;
        margin: 0 5px;
    }
    .promoBox__form #promoblock-2 input {
        margin: 10px 0;
    }
    .promoBox__form #promoblock-2 input::placeholder {	
        color: #c8c8c8;	
    }
    .promoBox__form #promoblock-2 input,
    .promoBox__form #promoblock-2 a {
        width: 100%;
    }
}