@import url('https://fonts.googleapis.com/css?family=Roboto:400,500, 600, 700, 800, 900&display=swap"');

@font-face {font-family: 'RobotoRegular'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'RobotoMedium'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'RobotoBold'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root {
    --color-primary: #fe0065;
    --color-primary-1: #fe0065;
    --color-primary-2: #0098fd;

    --color-secondary-1: #2F0548;
    --color-secondary-2: #7604E0;
    --color-secondary-3: #111042;

    --color-highlighted-1: #C2F525;

    --color-dark-grey: #666666;
    --color-grey: #959595;
    --color-dark-text: #222222;

    --color-black: #000000;
    --color-white: #FFFFFF;

    --color-desktop-primary-1: #2F0548;

    --color-background-cashier-withdrawal: #FFFFFF;
    --color-background-cashier: #FFFFFF;

    --max-width: 1242px;
    --max-width-cashier-separator: 97%;
    --color-gradient: rgba(47, 5, 72, 0.6);
    --padding-btn: 0.75% 3%;

    --font-default: 'Roboto', sans-serif;
    /*Don't use in new developments*/
    --font-regular: 'RobotoRegular', sans-serif;
    --font-medium: 'RobotoMedium', sans-serif;
    --font-bold: 'RobotoBold', sans-serif;

    --height-header: 58px;

    --height-redirect-app: 50px;

    --color-form: #000;

    --color-btn-redirect-app: linear-gradient(180deg, #014F89 0, #0293FC 100%);
}

/* GENERAL */
.only_yb {display: block;}
b {
    font-family: var(--font-bold)
}

/* TABLES */
.table-border {margin: 0 auto 5% auto; border: 0}

/* CASHIER */
.separator_container {position:relative; width:100%;}
.separator {display: none}

/* CASHIER - HOME */
.cashier-action-row {background: initial; border-bottom: 0}
.cashier-configuration {display: none}
.cashier .cashier-action--deposit, .cashier .cashier-action--deposit:hover {background: #009045}
.cashier .cashier-action--withdraw, .cashier .cashier-action--withdraw:hover {background: #0099FE; border: 0}

/* CASHIER - DEPOSIT */
.safecharge #header #header_close{top: 12%;}
#deposit_cashier {width: 100%}
#deposit_cashier #promocode_container {width: 60%}
#promocode_container #promocode_message {background: var(--color-desktop-primary-1)}
#promocode_container #promocode_message {margin-top: 0}
#promocode_container #promocode_message .btn {font-size: 120%}
#maindata.deposit.is_not_mini { background: var(--color-white)}
html.deposit.is_mini { background: var(--color-white)}
.safecharge #desktop_header_cashier .wrapper {background: var(--main-primary-lilac) !important;}

.safecharge .login_container,
.safecharge .header_links,
.safecharge .hp_links_bg.not_hp,
.safecharge .logos_cards.not_hp,
.safecharge #footer_container,
.safecharge .menu_container,
.safecharge #back_btn { display: none;}
.safecharge #maindata { width: 100%; box-shadow: none; padding: 0; border-radius: 0; background: #ffffff;}
.safecharge .wrapper { width: 100%;}
.safecharge .wrapper #logo img {width: 145px;}
.safecharge #content { min-height: 0;}
.safecharge .title-container h4.title {font-size: 200%}
.safecharge #promocode_container #promocode_message h1{font-size: 180%}
.safecharge #promocode_container #promocode_message p{font-size: 115%;}
.safecharge #promocode_container #promocode_message .promocode_buttons button {font-size: 86%}
.safecharge #promocode_text p {font-size: 115%}
.safecharge .mainpanel_center_yb { margin: 0;}
.safecharge .separator { margin:auto; display:block; width: 65px; padding: 0;}
.safecharge #dni_not_sent_container button { font-size: 108%}
    /* CASHIER - PENDING WITHDRAWALS */
#pending-withdrawals_table { width: 75%; background-color: #68BADA; padding:1px; margin: 20px auto}
#pending-withdrawals_table th {text-align:center; background-color: #68BADA; color:#333333;}
#pending-withdrawals_table td {text-align:center; background-color:#FFFFFF;}
#result-pending-withdrawals h1 {color: var(--color-dark-grey); font-size: 140%; margin-bottom: initial}

/* CASHIER - MY BONUS */
.page-name {color:var(--color-desktop-primary-1); font-family: var(--font-bold); font-size: 150%}
.page-name-container { background: none; padding: initial; margin: 10px auto; border-bottom: initial}
.bonus_redeem{width:65%;border:solid 3px var(--color-primary-1);border-radius:10px;background-color:var(--color-desktop-primary-1);text-align:center;margin:0 auto;color:#FFF}
.bonus_redeem h2{padding-top:3%}
.bonus_redeem h2,.bonus_redeem h3{color:#FFF}
.bonus_redeem input[type=text]{margin:10px;width:80%;height:40px!important;border:2px solid var(--color-primary-1);text-align:center;border-radius:20px!important;color:var(--color-desktop-primary-1);font-weight:700}
.bonus_redeem .button_bonus_redeem{margin:10px;width:40%;padding:20px;color:#FFF;background-color:#009045;border-radius:15px;font-weight:700;font-size:20px}
.bonus_title_container{text-align:center}
.bonus_title_big{color:var(--color-desktop-primary-1);font-size:150%;font-weight:700}
.bonus_title_small{color:var(--color-desktop-primary-1);font-size:15px;font-weight:700;position:relative;top:-10px}
.transactions_table_container {width: 90%}
.transactions_table_container #transactions_table{color:var(--color-desktop-primary-1); border-collapse: collapse;max-width: var(--max-width) !important; font-size: 100%; min-width: 300px; margin: 0 auto; width: 100%;}
.table-border.my_bonuses { border: 2px solid var(--color-primary-1); margin: 10px auto;}
.transactions_table_container #transactions_table tbody tr {border-bottom: 2px solid var(--color-primary-1);}
.transactions_table_container #transactions_table tbody tr th {text-align:center;background-color:var(--color-desktop-primary-1); color:#fff;text-transform:uppercase;padding:4px;height:30px}
.transactions_table_container #transactions_table tbody tr td{text-align:center;background-color:#FFF; height:30px;border-top:solid 2px var(--color-primary-1); padding: 2px}
.bonus_container .transactions_table_container #transactions_table tbody tr td:nth-child(1) {color: var(--color-desktop-primary-1); font-weight: var(--font-bold);}
.bonus_container .transactions_table_container #transactions_table tbody tr td:nth-child(2) {color: var(--color-primary-1); font-weight: var(--font-bold);}
.bonus_container .transactions_table_container #transactions_table tbody tr td:nth-child(4) {color: var(--color-primary-1); font-weight: var(--font-bold);}
.bonus_container .transactions_table_container #transactions_table tbody tr td:nth-child(6) {color: var(--color-primary-1)}
.transactions_table_container #transactions_table .button { background: var(--color-desktop-primary-1);color: var(--color-white); border:none; text-shadow: none; text-transform: none}
.bonus_title_container.casino_bonus {margin-top: 20px}
.bonus_table_title { margin-top: 10px; color: var(--color-desktop-primary-1) }
.bonus_table_title.casino_bonus ~ .bonus_table_title.casino_bonus { margin-top: 20px;}
#help_casino {margin: 10px auto 0}
#help_bingo {margin: 0 auto;}
.not-data-message-container p {color: var(--color-black);}

/* CASHIER - WITHDRAWAL */
.title-container {background-color: initial}
.cashier-info-row {background: var(--color-white)}
.cashier-info--item {color: var(--color-black)}
.title-container h4.title {text-transform: none; color: var(--color-desktop-primary-1);}
.cashier-info-withdrawal {color: var(--color-white); background-color: initial;}
.cashier-info-message {color: var(--color-black)}
#content p.cashier-info-message { width: 60%; font-size: 100%}
.cashier-info--separator {width: 90%}
#withdrawal_cashier {text-align: left}
#withdrawal_cashier .cashier-info-withdrawal {background-color: var(--color-secondary-1) !important}

/* CASHIER - USER DATA MODIFICATION */
#box_container_standard .box_inputs_standard input, #box_container_standard .box_inputs_standard select {border: 1px solid var(--color-black)}

/* RESPONSIBLE GAMING */
.responsible-page-name-separator {display: none}
#content .responsible_container h1, #content .responsible_container :not(.jqmWindow) p,
#self-exclusion-form label, .responsible_container h4, .responsible_container h3 {color: var(--color-black)}
.responsible_container .page-name-separator img {width: 20%}
#self-exclusion-form label {font-size: 120%}
.responsible_container input {border-radius: 30px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); height: auto; border: none}
.responsible_container textarea {border: none; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);}
.responsible_container .btn.primary-button {border: 1px solid #77d5f7; background: #0078ae; border-radius: 5px; box-shadow: initial; padding: 0.4em 1em; font-size: 1em; font-family: var(--font-regular)}
#content .responsible_container .action_buttons button {margin: 15px auto; color:var(--color-white); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); border: none; padding: 10px 20px; background-image: -moz-linear-gradient(90deg, #0098fd 0%, #004c80 100%); background-image: -webkit-linear-gradient(90deg, #0098fd 0%, #004c80 100%); box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5), 0px 5px 0px 0px #002e4c; border-radius: 50px; text-transform: uppercase; font-size: 90%}
#content .responsible_container .action_buttons button:active {transform: translate(0px, 5px); -webkit-transform: translate(0px, 5px); box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5);}
#content .responsible_container .action_buttons button.button-back, #page .responsible_container .action_buttons button.button-back {background: initial; text-shadow: initial; box-shadow: initial; color: var(--color-black)}
#content #increase_limit_container_form .question {color: #000}
#content .responsible_container input[type="radio"] {border: 2px solid #000}
#content .responsible_container #deposit_limit_container .currents-limits span + span strong {color: var(--color-black)}
/* TODO uncomment when new modals being used */
/*#content .responsible_container .jqmWindow {background: var(--color-secondary-2); border: 1px solid var(--color-white); color: var(--color-white); text-align: center}*/
/*#content .responsible_container .jqmWindow .modal_button {font-size: 100%; padding: 10px 20px; margin: 10px 10px 0; text-transform: uppercase}*/
/*#content .responsible_container .jqmWindow .no_modal_button {background: initial; color: var(--color-white) !important; text-shadow: initial; border: none}*/
/*#content .responsible_container .jqmWindow .yes_modal_button {color:var(--color-white); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); border: none; padding: 10px 20px; background-image: -moz-linear-gradient(90deg, #0098fd 0%, #004c80 100%); background-image: -webkit-linear-gradient(90deg, #0098fd 0%, #004c80 100%); box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5), 0px 5px 0px 0px #002e4c; border-radius: 50px}*/
/*body.responsible_gaming .ui-dialog {background: var(--color-secondary-2); border: 1px solid var(--color-white); color: var(--color-white); text-align: center}*/
/*body.responsible_gaming .ui-dialog #system_messages_modal {padding: initial; min-height: initial !important;}*/
/*body.responsible_gaming .ui-dialog .ui-dialog-content {color: var(--color-white);padding: 10px}*/
/*body.responsible_gaming .ui-dialog .ui-dialog-content .system_message_content {font-family: var(--font-regular); margin: 0 auto; padding: 20px; width: 100%; text-align: center; box-sizing: border-box}*/
/*body.responsible_gaming .ui-dialog .ui-widget-content {background: initial; border: none}*/
/*body.responsible_gaming .ui-dialog .ui-dialog-buttonpane {background: initial; border: none; padding: initial; margin: 0 0 10px}*/
/*body.responsible_gaming .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {float: initial; text-align: center}*/
/*body.responsible_gaming .ui-dialog .ui-dialog-buttonpane .ui-button {color: var(--color-white); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); border: none; padding: 10px 30px; background-image: -moz-linear-gradient(90deg, #0098fd 0%, #004c80 100%); background-image: -webkit-linear-gradient(90deg, #0098fd 0%, #004c80 100%); box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5), 0px 5px 0px 0px #002e4c; border-radius: 50px; text-transform: uppercase; font-size: 90%}*/
/*body.responsible_gaming .ui-dialog .ui-dialog-buttonpane .ui-button:active {transform: translate(0px, 5px); -webkit-transform: translate(0px, 5px); box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5)}*/

/* LOGIN POPUP */
.user-icon, .pass-icon {
    width: 45px;
    left: 0;
    transform: translate(0, -50%);
    border-radius: 30px;
    height: auto;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
}

#logInPopUp {background: var(--color-reinforcement-dark)}
#logInPopUp #main_login_form #login_title {text-transform: none}
.login-top-back {background: none}
#usernamePopUp, #passwordPopUp {padding-left: 2.5em !important;}
#logInPopUp #main_login_form #password_box {
    position: relative;
    background-color: var(--color-white);
}
#logInPopUp #main_login_form #user_box {
    position: relative;
    background-color: var(--color-white);
}
#logInPopUp #user_remember_line .remember_user_box {border-radius: 100%; border: 2px #fff solid}
#logInPopUp {
    background: linear-gradient(180deg, #41175A 10.58%, #5A258C 52.99%, #41175A 94.52%);
    color: var(--color-white);
}
#logInPopUp #popUpContent .separator{
    background: url('/images/icons/separator.svg') no-repeat;
    background-size: 100px auto;
    width: 100%;
    height: 60px;
    background-position-x: center;
    background-position-y: center;
}

#logInPopUp #main_login_form #login-submit {
    padding: 15px 0;
    width: 200px;
    border-radius: 50px;
    background: linear-gradient(180deg, #014F89 0%, #0293FC 100%);
    box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.70) inset;
    border: none;
    font-size: 15px;
}

#logInPopUp #bottom_login_box.register_container a{
    padding: 15px 0;
    font-size: 15px;
    width: 200px;
}

#logInPopUp #bottom_login_box h3 a{
    display: inline-block;
    border-radius: 50px;
    background: linear-gradient(180deg, #108E4C 0%, #BAF126 100%);
    box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.70) inset;
    border: none;
    text-align: center;
    font-size: 15px;
    color: var(--color-white);
}

/* GAME CONTAINER */
#game_container #bingo_container #change_room_container_box #change_room_list_scroll #change_room_list_container .change_room_row {
    height: 19%;
}
#game_container #bingo_container #autobuy #autobuy_values #autobuy_offline_buttons #start_button {
    font-size: initial;
}

/* FORGOT */
.lineforgot .loginputs2 {margin-top: 3%}
.lineforgot input.button {
    color: rgb(255, 255, 255);
    margin-top: 3%;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(119, 213, 247);
    border-image: initial;
    background: rgb(0, 120, 174);
    padding: .4em 1em;
    border-radius: 5px;
}

/* SECURITY CHECK */
#login_form select {
    font-size: 120%;
}
#login_form select#dob_day {
    background: url(/images/registration/select_dropdown.png) 87% / 13% no-repeat #fff;
}
#login_form select#dob_month {
    background: url(/images/registration/select_dropdown.png) 93% / 7% no-repeat #fff;
}
#login_form select#dob_year {
    background: url(/images/registration/select_dropdown.png) 90% / 10% no-repeat #fff;
}

/* REGISTER */
body.registration {height: 100vh}
body.registration .ui-dialog button {color: #fff}
body.registration .button_validate_step_one, .button_validate_step_two, .button_validate_step_three {border: 1px solid var(--color-primary)}
body.registration .button_validate_step_one:hover, body.registration .button_validate_step_two:hover, body.registration .button_validate_step_three:hover {background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary)}
#content.registration select {box-shadow: none}
#content.registration p {color: #000; font-size: 100%}
#content.registration .main_content_registration {box-sizing: border-box; padding: 10px 10px 70px; margin: 0; background: #E6F5FC; border-radius: 10px}
#content.registration .circle_step {width: 3em; height: 3em}
#content.registration .circle_step span {font-size: 20px}
#content.registration .content_circle_step_inactive {background: var(--color-primary)}
body.registration .system_message_content {text-align: center; width: 100%}
.box_content_terms_conditions{background: rgba(47, 5, 72, 0.7); color: white !important}
.box_content_terms_conditions input {background: initial}
body.registration .embeddedServiceHelpButton {display: none}
body.registration #footer {background-image: none}
body.registration .phone_code select{width: 100%;}
#content.registration .dialog_help p {color: #fff}

/* BUTTONS */
.quaternary-button, .ui-widget button.quaternary-button, .ui-button.quaternary-button, .ui-button.quaternary-button:hover, .ui-button.quaternary-button:focus, .ui-button.quaternary-button:active {
    border: 1px solid #77d5f7;
    background: #0078ae;
    border-radius: 5px;
    box-shadow: initial;
    font-family: var(--font-bold);
    text-transform: uppercase;
    padding: 10px 50px;
    margin: 10px auto;
}

/* INBOX */
#inbox_title {color: var(--color-secondary-1)}
.ui-widget-overlay.ui-front.inbox_modal_overlay { background: linear-gradient(180deg, rgba(47, 5, 72, 1) 0%, rgba(173, 0, 37, 1) 100%) !important; opacity: 0.85 !important;}
.separator_inbox:not(.only_yb) {display: none}
.separator_inbox.only_yb {width: 10%; margin: auto;display: block; border-bottom: initial}
.btn_ims {background: #009045;}

/* COOKIES */
#popUpCookies { background: var(--color-secondary-3); border: 2px solid var(--color-white) !important;}
#popUpCookies .config-button { background: var(--color-secondary-3); border: 2px solid var(--color-white) !important}
#popUpCookies .primary-button, #pop-up-cookies-configuration .primary-button { box-shadow: none; background-image: -moz-linear-gradient( 90deg, #0098fd 0%, #004c80 100%) !important; background-image: -webkit-linear-gradient( 90deg, #0098fd 0%, #004c80 100%) !important; background-image: -ms-linear-gradient( 90deg, #0098fd 0%, #004c80 100%) !important;}
#popUpCookies.ui-dialog-content a { text-decoration: none; }
#popUpCookies .btn { margin: 20px }

/* RISKY ACKNOWLEDGMENT */
#risky-acknowledgment-page {padding: initial}
.risky_acknowledgment_container .primary-button {
    border: 1px solid #77d5f7;
    background: #0078ae;
    border-radius: 5px;
    box-shadow: initial;
    font-family: var(--font-bold);
    text-transform: uppercase;
    padding: 10px 50px;
    margin: 10px auto;
    font-size: 16px;
}
.risky_acknowledgment_container .primary-button:disabled, .risky_acknowledgment_container .primary-button.primary-button[disabled] {opacity: 0.3}
.risky_acknowledgment_container #risky-acknowledgment-accordion .ui-widget-content,
.risky_acknowledgment_container #risky-acknowledgment-accordion .ui-accordion-content {padding: 0 5px 5px 56px;}

/* IMS: INTERNAL MESSAGES + ARTICLES */
#message_content table:not(#winners) {
    margin-left: 5%;
    border-width: 0 !important;
    width: 90% !important;
}
#message_content .btn a,
#message_content .btn a:hover,
.articles .btn a,
.articles .btn a:hover {
    text-decoration: none;
    color: var(--color-white);
    text-transform: uppercase;
}
#message_content p, #message_content td {
    color: #120F21;
}
#message_content h1,
#message_content h2,
#message_content h3,
#message_content h4,
#message_content ul,
#message_content ol {
    color: #120F21;
}
#message_content h1 {
    font-size: 183%;
    text-align: left;
    text-transform: uppercase;
}
#message_content h2 {
    font-size: 166%;
}
#message_content h3 {
    font-size: 150%;
}
#message_content h4 {
    font-size: 133%;
}
#message_content p {
    font-size: 125%;
    line-height: 200%;
    margin-bottom: 20px;
    width: 100%;
}

#message_content hr {
    margin-bottom: 5%;
    margin-top: 5%;
    width: 100%;
    border: 1px solid #959595;
}
#message_content .gray {
    color: #959595;
    font-size: 14px;
}
#message_content .gray p,
#message_content .gray ol,
#message_content .gray ul {
    color: #959595 !important;
    font-size: 100%;
}
#message_content .btn {
    display: inline-block;
}
#message_content p:has(span.btn) {
    text-align: center;
}
#message_content .btn_primary,
#message_content .btn_secondary,
#message_content .btn_tertiary,
#message_content .btn_quaternary,
#content .static-content .btn_primary,
#content .static-content .btn_secondary,
#content .static-content .btn_tertiary,
#content .static-content .btn_quaternary {
    display: var(--btn-display);
    border: var(--border-btn-default);
    border-radius: var(--border-radius-btn);
    padding: var(--padding-btn);
}
.btn_primary {
    background: linear-gradient(180deg, #014F89 0%, #0293FC 100%);
    box-shadow: 0px 0.70258px 0.70258px 0px rgba(255, 255, 255, 0.70) inset;
    color: var(--color-white);
}
.btn_secondary {
    background: linear-gradient(180deg, #FF0764 0%, #FEC52F 100%);
    box-shadow: 0px 0.70258px 0.70258px 0px rgba(255, 255, 255, 0.70) inset;
    color: var(--color-white);
}
.btn_tertiary {
    background: linear-gradient(180deg, #108E4C 0%, #BAF126 100%);
    box-shadow: 0px 0.70258px 0.70258px 0px rgba(255, 255, 255, 0.70) inset;
    color: var(--color-white);
}
.btn_quaternary {
    background: linear-gradient(180deg, #5E0073 0%, #F60065 100%);
    box-shadow: 0px 0.70258px 0.70258px 0px rgba(255, 255, 255, 0.70) inset;
    color: var(--color-white);
}
.btn_primary a,
.btn_secondary a,
.btn_tertiary a,
.btn_quaternary a
{
    display: var(--btn-display);
    color: var(--color-white);
}

h1 img {
    width: 100%;
    height: auto;
}

#message_content p {
    width: 100%;
}

#message_content ul, #message_content ol {
    width: 100%;
    padding-left: 16px;
    font-size: 125%;
    text-align: left;
    box-sizing: border-box;
}

#message_content table:not(#winners) {
    font-size: 120%;
    border-width: 0 !important;
    border-collapse: collapse;
    margin: 20px auto;
    width: 90% !important;
}

#message_content table:not(#winners) .tableheader {
    background-color: #877CA4;
    color: #FFFFFF;
}
#message_content table:not(#winners) tr.tableheader td {
    font-weight: bold;
    color: white;
}
#message_content table:not(#winners) td {
    padding: 5px;
    border-width: 0;
}

/* DOCUMENT VERIFICATION */
#dni_form .page-name-container{
    margin-left: 1%;
    margin-bottom: 0;
    text-align: left;
    justify-content: left;
}
#dni_form .verification-info{
    margin-left: 1%;
}
#dni_form h2 {
    text-align: left;
    font-size: 110%;
}
#dni_form p {
    font-size: 80%;
}

/* INSTANT SESSION FORM */
body.instant_session_form #session_container { /* YB DESKTOP */
    font-size: 200%;
}
#session_container #logo_container {
    max-width: 400px
}
#session_container .btn{
    margin: 15px 0 10px;
}
#session_container span.ui-selectmenu-button {
    width: 100% !important;
}

.game_session_modal .ui-selectmenu-menu .ui-widget.ui-widget-content {
    padding: 0;
}
.game_session_modal .ui-state-disabled {
    opacity: 1;
}
.game_session_modal .ui-state-disabled .ui-state-active {
    background: #FE006522;
}

body #game_session_modal #session_container #responsible_gaming_message {
    border: 1px solid var(--color-primary-1);
}

/* BOTTOM SHEET */
#bottom-sheet {
    background-color: var(--color-desktop-primary-1);
    font-family: "Roboto", sans-serif;
}

#bottom-sheet #sheet-header {
    background-color: var(--color-desktop-primary-1);
    color: #fff;
}

#bottom-sheet #sheet-header .sheet-button {
    color: #FFF;
    background: linear-gradient(180deg, #108E4C 0%, #BAF126 100%);
}

/* BOTTOM SHEET INSTANT FRAME */
body.bottom_sheet {
    background: var(--color-desktop-primary-1);
}

body.bottom_sheet #session_info {
    background-color: var(--color-desktop-primary-1);
    border-bottom: 4px solid #0098FD;
    font-family: "Roboto", sans-serif;
}

body.bottom_sheet #session_info .inner {
    color: #0098FD;
}

body.bottom_sheet #game_frame {
    bottom: unset;
    position: absolute;
}

/* YOBOX */
#yobox-container {
    background: var(--color-secondary-2);
    border-radius: 20px;
}

#yobox-container .content {
    display: flex;
    justify-content: space-evenly;
}

/* FANCYBOX */
.fancybox-content .fancybox-close-button {
    position: absolute;
    top: 10px;
    left: 10px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.fancybox-content .fancybox-close-button img {
    width: 20px;
    height: 20px;
    display: block;
}

/* NEW MODALS */
.ui-dialog.ui-widget.modal-dialog{
    font-family: 'Roboto', sans-serif;
}
.modal-dialog .session_info{
    font-family: 'Roboto', sans-serif;
}
.modal-dialog .modal-dialog-buttonpane .modal-dialog-buttonset .btn.ui-button.ui-corner-all.ui-widget {
    font-family: 'Roboto', sans-serif;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
    margin: 5px;
    position: relative;
    display: inline-block;
    border: none;
}
.modal-dialog .modal-dialog-buttonpane .modal-dialog-buttonset .btn.primary-button{
    color: #fff;
    background-image: -moz-linear-gradient( 90deg, #0098fd 0%, #004c80 100%);
    background-image: -webkit-linear-gradient( 90deg, #0098fd 0%, #004c80 100%);
    background-image: -ms-linear-gradient( 90deg, #0098fd 0%, #004c80 100%);
    box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5), 0px 5px 0px 0px #002e4c;
    -moz-box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5), 0px 5px 0px 0px #002e4c;
    -webkit-box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5), 0px 5px 0px 0px #002e4c;
}

.modal-dialog .modal-dialog-buttonpane .modal-dialog-buttonset .btn.primary-button:hover {
    transition: linear 0.1s;
    background-image: -moz-linear-gradient( 90deg, #004c80 0%, #004c80 100%);
    background-image: -webkit-linear-gradient( 90deg, #004c80 0%, #004c80 100%);
    background-image: -ms-linear-gradient( 90deg, #004c80 0%, #004c80 100%);
}

.modal-dialog .modal-dialog-buttonpane .modal-dialog-buttonset .btn.secondary-button {
    color: #000000 !important;
    background: #fff;
}

.dynamic_promo img {
    margin: 10px;
}

/* ONLY DESKTOP */
@media only screen and (min-width: 541px) {
    /* RESPONSIBLE GAMING */
    /* TODO remove when unified */
    #content .responsible_container {width: 100% !important; max-width: initial}
    #content .responsible_container h1 {font-size: 25px; color: #3f0047; font-family: var(--font-bold); text-transform: initial}
    .responsible-page-name-separator, #content .page-name-separator {display: none}
    #content .responsible_container .action_buttons button {border: 1px solid #77d5f7; background: #0078ae; border-radius: 5px; box-shadow: initial}
    #content .responsible_container .action_buttons button:active {transform: initial; -webkit-transform: initial; box-shadow: initial}
    .responsible_container input {border-radius: 5px; height: 25px}
    .responsible_container textarea {border-radius: 5px}
    #content .responsible_container .jqmWindow {width: 600px !important; max-width: initial !important; box-sizing: initial}
    #content .responsible_container .jqmWindow p {color: #30004A; text-align: left; font-size: 110%}
    .jqmWindow .buttons {justify-content: space-between}
    #content .responsible_container .jqmWindow .modal_button {margin: 0}
    /* REGISTER */
    body.registration .main_content_register_banner_label {
        position: fixed;
        top: 17.3rem;
    }
    body.registration .main_content_register_banner {
        position: fixed;
        top: 13.5rem;
    }
    body.registration .loader_circle {
        border: 3px solid #000;
        border-bottom-color: transparent;
    }
}

/* "SMALL" DESKTOPS */
@media only screen and (min-width: 541px) and (max-height: 810px) {
    body.registration .main_content_register_banner_label {
        top: 17.1rem;
    }
}

/* MOBILE */
@media only screen and (max-width: 540px) {
    #nav-icon3 {
        width: 100%;
        margin: auto;
        height: 100%;
        top: 12%;
        position: relative;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
    }
    #nav-icon3 span {
        display: block;
        position: absolute;
        height: 13%;
        width: 100%;
        background: #fff;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }
    #nav-icon3 span:nth-child(1) {
        top: 17%;
    }
    #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
        top: 50%;
    }
    #nav-icon3 span:nth-child(4) {
        top: 83%;
    }
    #nav-icon3.open span:nth-child(1) {
        top: 18px;
        width: 0%;
        left: 50%;
    }
    #nav-icon3.open span:nth-child(2) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    #nav-icon3.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    #nav-icon3.open span:nth-child(4) {
        top: 18px;
        width: 0%;
        left: 50%;
    }
    /* HAMBURGER MENU */
     #floating_menu_desktop {
        background: linear-gradient(180deg,#1c0030,#6f1687,#1c0030);
        opacity: 0.90;
        border: 1px solid #2f004b;
        overflow: hidden;
         height: 91%;
    }
    #floating_menu_desktop.shown {
        z-index: 925;
        top: var(--height-header);
        height: calc(100vh - var(--height-header));
    }
    #floating_menu_desktop.hidden {
        display: block !important;
        top: var(--height-header);
    }
    .menu_container .cross_selling_logos .separator {
        border: 1px solid var(--color-white);
        display: block;
        width: 0;
        padding: 0;
    }
    .menu-item {
        font-size: 70%;
    }
    #page.game_container .menu-item {
        font-size: 35%;
    }

    .menu_container.not_logged_in .menu-item,
    .menu-footer-links {
        font-size: initial;
    }
    .menu_container .menu-footer-links a,
    .menu_container .menu-footer-links a:visited {
        line-height: 2;
        font-size: 70%;
    }
    .menu_container .menu-item div {
        color: var(--color-white);
    }
    .menu_container .menu-item .verify_account div {
        font-size: 100%;
        color: var(--color-white);
    }
    .menu-item.highlight div {
        color: #0098FD;
        font-family: var(--font-bold);
    }
    .menu-line-separator {
        height: 1px;
        background: var(--main-primary-fucsia);
        margin: 6px 0;
    }

    .menu_container .cross_selling_logos {
        border-bottom: 2px solid var(--main-primary-fucsia);
    }
    #floating_menu_desktop a {
        text-decoration: none;
    }
    /* H1 */
    .activity_summary{ font-size: 77%; }
    /* BUTTONS STYLES */
    .view_btn {
        font-weight: bold;
        margin: 10px auto;
        color: var(--color-white);
        text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
        border: none;
        padding: 10px 40px;
        border-radius: 50px;
        text-transform: uppercase;
        font-size: 90%;
        background-image: -moz-linear-gradient( 90deg, #0098FD 0%, #004C80 100%) !important;
        background-image: -webkit-linear-gradient( 90deg, #0098FD 0%, #004C80 100%) !important;
        background-image: -ms-linear-gradient( 90deg, #0098FD 0%, #004C80 100%) !important;
        box-shadow: inset 0px 2px 0px 0px rgb(255 255 255 / 50%), 0px 5px 0px 0px #002E4C !important;
    }

    .quaternary-button, .ui-widget button.quaternary-button, .ui-button.quaternary-button, .ui-button.quaternary-button:hover, .ui-button.quaternary-button:focus, .ui-button.quaternary-button:active {
        margin: 10px auto;
        color: var(--color-white);
        text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
        border: none;
        padding: 10px 20px;
        background-image: -moz-linear-gradient(90deg, #0098fd 0%, #004c80 100%);
        background-image: -webkit-linear-gradient(90deg, #0098fd 0%, #004c80 100%);
        box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5), 0px 5px 0px 0px #002e4c;
        border-radius: 50px;
        text-transform: uppercase;
        font-size: 90%;
    }

    /* REGISTER */
    #content.registration .register-wrap {margin: auto 1%}
    #content.registration .main_content_register {background: transparent; border-radius: 0}
    #content.registration p {font-size: 80%; color: var(--color-white)}
    #content.registration .circle_step {width: 2em; height: 2em}
    #content.registration h2.primary_color {font-size: 1.15rem}
    #content.registration input, #content.registration select {font-size: 75%}
    body.registration .icon_passw {width: 7% !important}
    body.registration .input_icon_help, body.registration .input_icon_help_half_box {margin-right: 5px}
    body.registration .ui-dialog-titlebar-close {display: none}
    body.registration #alert_message, #system_messages_modal {min-height: 0 !important; margin: 0; transform: initial; background: initial; border: 0}
    body.registration .ui-widget.ui-widget-content[aria-describedby="system_messages_modal"] {height: auto !important; top: 50% !important; z-index: 3005 !important}
    body.registration .ui-dialog[aria-describedby="system_messages_modal"] {background: var(--color-secondary-2); border: 2px solid white !important; width: 80% !important; left: 50% !important; transform: translateX(-50%)}
    body.registration .ui-dialog .ui-dialog-buttonpane {width: 100%; border-top: 0; margin: 0; overflow: hidden; background: initial; padding: 0}
    body.registration .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {float: initial; text-align: center}
    body.registration .ui-dialog .ui-dialog-buttonpane .ui-button {color: #000; background: white !important}
    body.registration #box_terms_conditions {font-size: 80%; width: 100% !important}
    #content.registration input[type=checkbox], #content.registration input[type=radio] {font-size: 100%}
    body.registration .embeddedServiceHelpButton {display: none}
    body.registration {
        position: relative;
        background-image: url(/images/mobile/login/bubblemorph-bg.svg), -moz-linear-gradient( rgba(28,0,48,95%), rgba(111,22,135,95%), rgba(28,0,48,95%));
        background-image: url(/images/mobile/login/bubblemorph-bg.svg), -webkit-linear-gradient( rgba(28,0,48,95%), rgba(111,22,135,95%), rgba(28,0,48,95%));
        background-image: url(/images/mobile/login/bubblemorph-bg.svg), -ms-linear-gradient( rgba(28,0,48,95%), rgba(111,22,135,95%), rgba(28,0,48,95%));
        background-repeat: no-repeat;
        background-position-x: center;
        background-position-y: center;
        background-size: cover;
    }
    body.registration h2.primary_color {font-size: 1em}
    body.registration .input_icon_box {border-radius: 50px}
    body.registration div.gender_option label {color: #fff; font-size: 80%}
    body.registration .input_icon_box input[type="text"],
    body.registration .input_icon_box input[type="email"],
    body.registration .input_icon_box input[type="password"],
    body.registration .input_icon_box select {padding: .5%; margin-left: 3%; font-size: 95%; border-radius: 50px}
    body.registration .content_step_one p.white_color {font-size: 80%; margin-top: 0}
    body.registration .input_icon_box.phone_code {width: 16%}
    body.registration #box_phone div:nth-child(2) {width: 83% !important}
    body.registration #box_mail .input_icon_help, body.registration #box_phone .input_icon_help {padding-right: 0}
    body.registration .main_content_register_banner_label {
        top: 11.5rem;
    }
    body.registration .main_content_register_banner {
        top: 8.5rem;
    }
    /* PASS CONFIRM */
    #header.show_form_pass_confirm #header_close{display:none;}
    #content.show_form_pass_confirm {height: 90% !important}
    #content.show_form_pass_confirm .main{
        /*background-image: url(../images/mobile/login/bubblemorph-bg.svg), -moz-linear-gradient( rgba(28,0,48,95%) 0%, rgba(111,22,135,95%) 50%, rgba(28,0,48,95%) 100%);*/
        /*background-image: url(../images/mobile/login/bubblemorph-bg.svg), -webkit-linear-gradient( rgba(28,0,48,95%) 0%, rgba(111,22,135,95%) 50%, rgba(28,0,48,95%) 100%);*/
        /*background-image: url(../images/mobile/login/bubblemorph-bg.svg), -ms-linear-gradient( rgba(28,0,48,95%) 0%, rgba(111,22,135,95%) 50%, rgba(28,0,48,95%) 100%);*/
        background-repeat: no-repeat;
        background-position-x: center;
        background-position-y: center;
        background-size: cover;
        height: 100%;
        text-align: center;
        margin: 0 auto;
        /*position: absolute;*/
    }
    #content.show_form_pass_confirm input[type="password"] {
        border-radius: 32px;
        border: 2px solid var(--main-primary-fucsia);
        padding: 4px;
        text-align: center;
        margin: 0.8em auto;
    }
    #content.show_form_pass_confirm input[type="submit"] {
        background-image: -moz-linear-gradient( 90deg, #0098fd 0%, #004c80 100%) !important;
        background-image: -webkit-linear-gradient( 90deg, #0098fd 0%, #004c80 100%) !important;
        background-image: -ms-linear-gradient( 90deg, #0098fd 0%, #004c80 100%) !important;
        box-shadow: inset 0px 2px 0px 0px rgb(255 255 255 / 50%), 0px 5px 0px 0px #002e4c !important;
        padding: 4% 16%;
        text-shadow: 0px 2px 2px rgb(0 0 0 / 60%);
        border-radius: 50px;
    }

    /* CASHIER */
    #back_btn {display: none}
    .separator_container {display: block}
    .separator_menu{
        width: 30%;
    }

    /* CASHIER - DEPOSIT */
    #promocode_container #promocode_message {background: var(--main-primary-purple); border: 1px solid var(--color-white)}
    #deposit_cashier .separator_container {display: block}
    #promocode_container #promocode_input {font-size: 86%; border: 2px solid var(--color-primary-1); border-radius: 20px}
    .title-container h4.title {color: var(--color-white); padding: 0;}
    .safecharge .title-container h4.title {font-size: 145% !important;}
    #deposit_cashier #promocode_container {width: 90%}
    #promocode_container #promocode_message h2 {font-size: 100%}
    #promocode_container #promocode_message_bottom .promocode_buttons button {
        font-size: 100%;
        width: 47%;
        border-radius: 50px;
        height: auto;
        padding: 3.5% 6.5%;
        line-height: 1;
        margin: 20px 0px;
    }
    #promocode_container #promocode_message .reject_button {
        background-image: -moz-linear-gradient(90deg, #0098fd 0%, #004c80 100%);
        background-image: -webkit-linear-gradient(90deg, #0098fd 0%, #004c80 100%);
        background-image: -ms-linear-gradient(90deg, #0098fd 0%, #004c80 100%);
        box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5), 0px 5px 0px 0px #002e4c;
    }
    #promocode_container #promocode_message .accept_button {
        background-image: -moz-linear-gradient(90deg, #c2f525 0%, #0c8a50 100%);
        background-image: -webkit-linear-gradient(90deg, #c2f525 0%, #0c8a50 100%);
        background-image: -ms-linear-gradient(90deg, #c2f525 0%, #0c8a50 100%);
        box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5), 0px 5px 0px 0px #074c2c;
    }
    .safecharge #dni_not_sent_container p {font-size: 73%;}
    #deposit_cashier button {font-size: 100%;}

    /* CASHIER - PENDING WITHDRAWALS */
    #result-pending-withdrawals{width: 100%; margin: 6% auto 0; text-align: center; padding-bottom: 20px;}
    #result-pending-withdrawals h1 {font-size: 100%; margin-bottom: 20px; font-family: var(--font-regular); color:var(--color-black)}
    #result-pending-withdrawals small{width: 85%; margin: 0 auto; color: #0078ff;}
    #result-pending-withdrawals #pending-withdrawals_table{ background: transparent; margin: 0 auto; width: 100%; border: #0098fd; border-spacing: 0}
    #result-pending-withdrawals #pending-withdrawals_table thead{border-top-left-radius: 10px;}
    #result-pending-withdrawals #pending-withdrawals_table thead th{background: #000; color: #fff; font-weight: 700; padding: 2%; font-size: 70%; text-transform: uppercase;}
    #result-pending-withdrawals #pending-withdrawals_table thead th:nth-of-type(1){border-top-left-radius: 5px; width: 20%;}
    #result-pending-withdrawals #pending-withdrawals_table thead th:nth-of-type(2){width: 25%;}
    #result-pending-withdrawals #pending-withdrawals_table thead th:nth-of-type(3){border-top-right-radius: 0px;width: 25%;}
    #result-pending-withdrawals #pending-withdrawals_table thead th:nth-of-type(4){visibility: visible; border-top-right-radius: 5px; width: 25%;}
    #result-pending-withdrawals #pending-withdrawals_table thead th, #result-pending-withdrawals #pending-withdrawals_table tbody tr td {border: 1px solid #000; padding: 4%}
    #result-pending-withdrawals #pending-withdrawals_table tbody tr{background: var(--color-secondary-3);}
    #result-pending-withdrawals #pending-withdrawals_table tbody tr td{font-family: var(--font-regular); background-color: #fff; color: #000; font-size: 70%; padding: 1%; box-sizing: border-box; text-align: center;}
    #result-pending-withdrawals #pending-withdrawals_table tbody tr td button{color: var(--color-primary-1); border: none; font-family: var(--font-bold); background: none; font-size: 100%;}
    #result-pending-withdrawals #pending-withdrawals_table tbody tr:first-child td:nth-of-type(4){border-top-right-radius: 0px;}
    #result-pending-withdrawals #pending-withdrawals_table tbody tr:last-child td:nth-of-type(1) {border-bottom-left-radius: 5px;}
    #result-pending-withdrawals #pending-withdrawals_table tbody tr:last-child td:nth-of-type(4) {border-bottom-right-radius: 5px;}

    .transactions_table_container_mobile  #transactions_table {font-size: 78%;  border-collapse: collapse;width: 100%;}
    .transactions_table_container_mobile #transactions_table tbody tr th {background: var(--color-primary); background-color: var(--color-secondary-2);border-bottom: 1px solid var(--color-primary);text-transform: uppercase;height: 30px;}
    .transactions_table_container_mobile #transactions_table .button { background: var(--color-secondary-3);color: var(--color-white); text-shadow: none; text-transform: none; padding:5px}
    .transactions_table_container_mobile #transactions_table tbody tr td{text-align:center;background-color:#FFF; height:30px;border-top:solid 2px var(--color-primary-1); padding: 2px}
    .transactions_table_container_mobile #transactions_table tbody tr td { color: var(--color-desktop-primary-1); font-weight: var(--font-bold); }
    .activity_summary{margin-bottom: 10%;}
    /* CASHIER - MY BONUS */
    .page-name-separator{text-align:center}
    .page-name-separator img{width:12%;padding:10px}
    .bonus_title_big {color: var(--color-white)}
    .not-data-message-container p {color: var(--color-white);}
    .page-name, body h2, body h3, .bonus_table_title {text-align: center; color: var(--color-white)}
    /* PROMOTIONS */
     body.promotions .not_logged_in h2,
     body.promotions .not_logged_in h3 {
         color: var(--color-dark-text);
     }
    .page-name-separator img{width: 25%}
    .transactions_table_container {width: 95%}
    .transactions_table_container #transactions_table {font-size: 60%}
    .transactions_table_container #transactions_table tbody tr th {background-color: var(--color-secondary-2)}
    .transactions_table_container #transactions_table tbody tr th {padding: 0 3px}
    .transactions_table_container #transactions_table .button { background: var(--color-secondary-3);color: var(--color-white); text-shadow: none; text-transform: none; padding:5px}
    .table-border {
        border-radius: 5px;
        margin: 20px auto;
        overflow-x: auto;
        max-width: var(--max-width);
    }
    .transactions_table_container #transactions_table .currency_value {
        color: var(--color-primary-1)!important;
        font-weight: var(--font-bold);
    }
     .transactions_table_container #transactions_table tbody tr td {
        color: var(--color-desktop-primary-1);
        font-weight: var(--font-bold);
    }


    .trans_history .btn, #activity_summary .btn {
        white-space: normal;
        font-size: 80%;
    }
    #activity_summary .line{
       margin-bottom: 3%;
    }
    .trans_history .line {
        margin: 10px;
    }
    .trans_history,#activity_summary{
        text-align: center;
    }


    #help_casino.bonus_help_text {padding-bottom: 5%}

    /* CASHIER - WITHDRAWAL */
    .cashier-info-withdrawal {width:100%; padding: 10px 5%; color: var(--color-white)}
    #content p.cashier-info-message { width: 95%; font-size: 73%}
    #withdrawal_cashier iframe,
    #deposit_cashier iframe {
        border: none;
        padding:initial;
        margin: initial;
        border-radius: initial;
        width: 100%;
        max-width: initial;
        box-sizing: border-box;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .cashier-info--separator {width: 100%; background: var(--color-secondary-2)}

    /* CASHIER - USER DATA MODIFICATION */
    .data_modification_form h2 {display: none}
    #box_container_standard p {font-size: 90%; text-align: center}
    #box_container_standard .box_inputs_standard .label {font-family: var(--font-regular); font-size: 100%; color: var(--color-primary-1);}
    #box_container_standard .box_inputs_standard input, #box_container_standard .box_inputs_standard select {
        border-radius: 15px;
        border: 2px solid var(--color-primary-1);
        color: var(--color-black);
    }
    .box_button_standard .btn {
        background-image: -moz-linear-gradient(90deg, #c2f525 0%, #0c8a50 100%);
        background-image: -webkit-linear-gradient(90deg, #c2f525 0%, #0c8a50 100%);
        background-image: -ms-linear-gradient(90deg, #c2f525 0%, #0c8a50 100%);
        box-shadow: inset 0px 2px 0px 0px rgb(255 255 255 / 50%), 0px 5px 0px 0px #074c2c;
        padding: 10px 20px;
        text-transform: uppercase;
        font-family: var(--font-bold);
        font-size: 100%;
    }

    /* LOGIN */
    .logInPopUp-dialog {top: 0 !important; left: 0 !important}
    #logInPopUp #popUpContent .separator {background-size: 60px auto; height: 20px}
    #logInPopUp #main_login_form #user_box, #logInPopUp #main_login_form #password_box {
        margin-bottom: 5% !important;
        height: 40px;
    }
    #logInPopUp #main_login_form .login_input {height: 100%;}
    #logInPopUp #main_login_form #password_box_img {top: 26%}
    div[aria-describedby="alert_message"] {z-index: 2001 !important}
    .ui-dialog #alert_message p a {color: var(--color-primary)}

    /* FORGOT */
    #content.forgot_password form h2 {margin-bottom: 2%; color: var(--main-primary-blue); font-size: 4.5vw}
    .lineforgot input.button {
        color: #fff;
        padding: 1%;
        border-radius: 5px;
        margin-top: 3%
    }
    div#content.forgot_password {
        height: 90% !important;
    }
    #content.forgot_password .main{
        background-image: url(../images/mobile/login/bubblemorph-bg.svg), -moz-linear-gradient( rgba(28,0,48,95%) 0%, rgba(111,22,135,95%) 50%, rgba(28,0,48,95%) 100%);
        background-image: url(../images/mobile/login/bubblemorph-bg.svg), -webkit-linear-gradient( rgba(28,0,48,95%) 0%, rgba(111,22,135,95%) 50%, rgba(28,0,48,95%) 100%);
        background-image: url(../images/mobile/login/bubblemorph-bg.svg), -ms-linear-gradient( rgba(28,0,48,95%) 0%, rgba(111,22,135,95%) 50%, rgba(28,0,48,95%) 100%);
        background-repeat: no-repeat;
        background-position-x: center;
        background-position-y: center;
        background-size: cover;
        height: 100% !important;
        padding-bottom: 0px;
    }
    #content.forgot_password input[type="submit"] {
        background-image: -moz-linear-gradient( 90deg, #0098fd 0%, #004c80 100%) !important;
        background-image: -webkit-linear-gradient( 90deg, #0098fd 0%, #004c80 100%) !important;
        background-image: -ms-linear-gradient( 90deg, #0098fd 0%, #004c80 100%) !important;
        box-shadow: inset 0px 2px 0px 0px rgb(255 255 255 / 50%), 0px 5px 0px 0px #002e4c !important;
        padding: 4% 16%;
        text-shadow: 0px 2px 2px rgb(0 0 0 / 60%);
        border-radius: 50px;
    }
    #content.forgot_password #main_login_form {
        margin: auto !important;
        background: none !important;
        border: none !important;
        padding-top: 10%;
    }
    #content.forgot_password .line {
        width: 100%;
        text-align: center;
        margin: 1% auto;
    }
    #content.forgot_password input[type="text"] {
        border-radius: 32px;
        border: 2px solid var(--main-primary-fucsia);
        padding: 4px;
        text-align: center;
        margin: 0.8em auto;
    }

    .safecharge #header {
        display: none;
    }

    body.safecharge #page #content.logged_in {
        top: 0 !important;
    }

    body.safecharge .title-container h4.title {
        padding: 20px;
    }

    html.safecharge, body.safecharge { background: #280036;}
    .safecharge .cashier-info--item p { font-size: 89%}
    .safecharge #promocode_container #promocode_message h1{font-size: 130%}
    .safecharge #promocode_container #promocode_message p{font-size: 84%}
    .safecharge #promocode_container #promocode_message .promocode_buttons button {font-size: 63%}
    .safecharge #dni_not_sent_container button {font-size: 78%;}
    .safecharge #promocode_text p {font-size: 84%}

    /* RESPONSIBLE GAMING */
    #page .page-name-separator {display: block}
    #page .responsible_container h1, #content .responsible_container :not(.jqmWindow) p, #self-exclusion-form label, .responsible_container h4, .responsible_container h3 {color: var(--color-white)}
    #page .responsible_container {width: 100% !important}
    #page .responsible_container h1 {text-transform: initial; margin: 0 auto 10px}
    #self-exclusion-form label {font-size: 90%}
    #page #self-exclusion-date {width: 60%; margin: 0 0 0 5px; background-image: url('/images/icons/icon_calendar.svg'); background-repeat: no-repeat; background-position: right 10px center; text-align: left; padding: 10px; height: auto; border-radius: 30px; border: none; cursor: pointer;}
    #page .responsible_container textarea {height: 200px; padding: 10px; text-align: left; border: none}
    #page .responsible_container textarea::placeholder {font-family: var(--font-regular)}
    #self-exclusion-form button {margin: 20px auto}
    #page .responsible_container input {border-radius: 30px; height: auto; border: none; padding: 10px 20px}
    #page .responsible_container #deposit_limit_container .currents-limits span + span strong,
    #page .responsible_container .action_buttons button.button-back, #page .responsible_container .action_buttons button.button-back {color: var(--color-white)}
    #page .responsible_container #increase_limit_container_form .question {color: #fff}
    #page .responsible_container input[type="radio"] {border: 2px solid #fff}
    .responsible_container .btn.primary-button {text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); border: none; padding: 10px 20px; background-image: -moz-linear-gradient(90deg, #0098fd 0%, #004c80 100%); background-image: -webkit-linear-gradient(90deg, #0098fd 0%, #004c80 100%); box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5), 0px 5px 0px 0px #002e4c; border-radius: 50px; text-transform: uppercase; font-size: 100%}

    /* TODO remove when unified */
    #content .responsible_container .jqmWindow {width: 80%; background: var(--color-secondary-2); border: 1px solid var(--color-white); color: var(--color-white); text-align: center}
    #content .responsible_container .jqmWindow {background: var(--color-secondary-2); border: 1px solid var(--color-white); color: var(--color-white); text-align: center}
    #content .responsible_container .jqmWindow .modal_button {margin: 10px 10px 0; text-transform: uppercase; color:var(--color-white); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); border: none; padding: 10px 20px; background-image: -moz-linear-gradient(90deg, #0098fd 0%, #004c80 100%); background-image: -webkit-linear-gradient(90deg, #0098fd 0%, #004c80 100%); box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5), 0px 5px 0px 0px #002e4c; border-radius: 50px}
    body.responsible_gaming .ui-dialog .ui-dialog-titlebar {display: none}
    body.responsible_gaming .ui-dialog #system_messages_modal {margin: 10px auto; padding: 0; color: #fff}
    body.responsible_gaming .ui-dialog .ui-widget-content {background: initial; border: initial}
    body.responsible_gaming .ui-dialog .ui-button { margin: 10px; text-transform: uppercase; color:var(--color-white); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); border: none; padding: 10px 20px; background-image: -moz-linear-gradient(90deg, #0098fd 0%, #004c80 100%); background-image: -webkit-linear-gradient(90deg, #0098fd 0%, #004c80 100%); box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5), 0px 5px 0px 0px #002e4c; border-radius: 50px}

    /* YOBOX: Start */
    #yobox-container {
        border-radius: unset;
    }
    #yobox-container .main-message {font-size: 50%; top: 20%; position: relative}
    /*   Collapsed   */
    #content #yobox-container .collapsed-content .main-message {
        font-size: 12px;
        top: -30%;
        left: 20px;
    }
    #content #yobox-container .collapsed-content img.icon-wheel {
        height: 130%;
        margin-right: -3%;
    }
    /* YOBOX: End */

    /* RISKY ACKNOWLEDGMENT */
    .risky_acknowledgment_container .primary-button {
        font-weight: bold;
        margin: 10px auto;
        color: var(--color-white);
        text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
        border: none;
        padding: 10px 40px;
        border-radius: 50px;
        text-transform: uppercase;
        font-size: 90%;
        background-image: -moz-linear-gradient(90deg, #ffc92f 0%, #fe0065 100%) !important;
        background-image: -webkit-linear-gradient(90deg, #ffc92f 0%, #fe0065 100%) !important;
        background-image: -ms-linear-gradient(90deg, #ffc92f 0%, #fe0065 100%) !important;
        box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5), 0px 5px 0px 0px #800033 !important;
    }
    #risky-acknowledgment-page {padding-bottom: 10px; color: var(--color-white)}

    /* INBOX */
    .separator_inbox.only_yb {width: 20%;}
    #inbox h3 {color: var(--color-white)}
    #inbox_title {color:var(--color-white); margin-top: initial}
    .message_subject {font-size: 85%;}
    .message_content_preview {font-size: 75%}
    #inbox .message_info .ribbon {position: absolute; top: -0.5%; right: -1px; width: 15%;}

    /* COOKIES */
    #popUpCookies .primary-button { border: none; text-shadow: none }
    .cookies_dialog .ui-dialog-titlebar { display: none}
    .ui-dialog.cookies_configuration_modal .inbox_modal_titlebar_close { top: 6px !important}

    /* NAVIGATION ICON */
    #header_mbl #home_icon_container {
        width: 7.5%;
        height: 100%;
        margin-left: 2%;
        display: flex;
        align-items: center;

    }

    #header_mbl #home_icon_container img {
        width: 90%;
    }

    #header > div:not(#balance) {
        line-height: 0;
    }
    #header #home_icon_container {
        width: 8%;
        margin-left: 2%;
    }

    #header #home_icon_container img {
        width: 90%;
    }

    #home_icon_container.home #back_icon{
        display: none;
    }

    #home_icon_container.back #home_icon{
        display: none;
    }

    .show_form_pass_confirm p {
        color: #FFF;
    }
}

/* Small height mobile like Iphone 11 pro */
@media only screen and (max-width : 540px) and (max-height : 700px) {
    /* Register */
    body.registration .main_content_register_banner_label {
        top: 10.5rem;
    }
    body.registration .main_content_register_banner {
        top: 6.35rem;
    }
}

/* Iphone 14 */
@media only screen and (max-width : 540px) and (max-height : 531px) {
    /* Register */
    body.registration .main_content_register_banner_label {
        top: 8.5rem;
    }
    body.registration .main_content_register_banner {
        top: 6.5rem;
    }
}

@media only screen and (max-height: 780px) {
    .menu-line-separator {
        height: 1px;
        background: var(--main-primary-fucsia);
        margin: 1px 0;
    }
}
@media only screen and (min-width: 1679px) and (min-height: 1049px) and (max-width:2200px){
    .user_password_confirmation .system_message_content {
        color: var(--color-white);
        font-weight: bold;
        font-size: 125%;
    }
}

#content.user_password_confirmation input {
    margin: 6% auto;
}

@media only screen and (min-width: 1001px) {
    #content.user_password_confirmation form {
        width: 70%;
    }

    #content.user_password_confirmation input {
        margin: 6% auto 4%;
    }
}

@media only screen and (max-width: 540px) {
    .user_password_confirmation .system_message_content {
        color: var(--color-white);
        font-weight: bold;
        font-size: 125%;
    }
}

body.promotions #page {
    background: #fff;
}