:root {
    --game-color: #d9e0e7;
    --active-color: #7856fe;
}



.us-widget-beton-form {

    display: block;
    box-sizing: border-box;

    width: auto;
    height: auto;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

}

.us-widget-beton-form .widget-container {

    display: block;

    width: auto;
    height: auto;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

    background: #e7eef6;

    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;

    font-family: 'Axiforma';
    font-size: 14px;
    color: #000;

    text-align: center;

}
.us-widget-beton-form .widget-container div,
.us-widget-beton-form .widget-container span {

    font-family: 'Axiforma';

}

.us-widget-beton-form.loading .widget-container { min-height: 350px; background: linear-gradient(to bottom, rgb(231, 238, 246), #fff); }

.us-widget-beton-form .widget-container .form-title {

    display: none;

    width: auto;
    height: auto;

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

    background-color: var(--game-color);

    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-align: center;

}

.us-widget-beton-form .widget-container .form-loading {

    display: inline-block;

    width: 100px;
    height: 100px;

    margin: 100px auto;

    background-image: url(/Media/widgets/jp-us-beton/pyo/images/tube-spinner.svg);
    background-repeat: no-repeat;

}

.us-widget-beton-form .widget-container .widget-section {

    display: block;

    width: 375px;
    height: auto;

    margin: 0 auto;
    padding: 40px 0 0 0;

}
.widget-section.section-play-form { }

.widget-section.section-my-lines:not([data-item-count]),
.widget-section.section-my-lines[data-item-count="0"] { padding-top: 10px !important; }

.widget-section.section-pay-period-form[data-md="0"],
.widget-section.section-multiplier-form[data-mp="0"],
.widget-section.section-dblplay-form[data-dbl="0"] { display: none; }

.widget-section .section-title {

    display: block;

    width: auto;
    height: auto;

    margin: 0 0 0 0;
    padding: 0 5px 0 5px;

    font-size: 16px;
    font-weight: 700;
    color: #041A17;
    
}
.widget-section .section-title.a-left { text-align: left; }
.widget-section .section-title.a-center { text-align: center; }
.widget-section .section-title.a-right { text-align: right; }

.widget-section .section-subtitle {

    display: block;

    width: auto;
    height: auto;

    margin: 5px 0 0 0;
    padding: 0 5px 0 5px;

    font-size: 14px;
    font-weight: 400;
    color: #041A17;
    
    line-height: 20px;

}


.widget-section .section-title span { display: inline-block; padding-top: 10px; }
.widget-section .section-title .title-actions {

    display: inline-block;
    float: right;

    width: auto;
    height: auto;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

    text-align: left;
    vertical-align: top;

}

.widget-section .section-title button {

    width: auto;
    height: 40px;

    min-width: 40px;

    margin: 0 0 0 0;
    padding: 0 5px 0 5px;

    background-color: #fff;

    border: 1px solid #041A17;
    border-radius: 4px;

    font-size: 14px;
    font-weight: 700;
    color: #041A17;

    background-repeat: no-repeat;
    background-position-y: center;

}

.widget-section .section-title button.my-quick-pick-button {

    padding-left: 35px;
    padding-right: 10px;

    background-image: url(../images/btn-quick-pick.svg);
    background-position-x: 5px;

}

.widget-section .section-title button.my-delete-button {

    background-image: url(../images/btn-delete.svg);
    background-position-x: center;

}

.widget-section .section-title button:disabled { cursor: not-allowed; }


.us-widget-beton-form .widget-container .play-form {

    display: block;

    width: auto;
    height: auto;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

}

.play-form .my-comb-container {

    display: block;

    width: auto;
    height: auto;

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

    text-align: center;

}

.my-comb-container > ul { margin: 0 auto; }

.my-comb-container > ul[data-num-count="10"] { width: 220px; }
.my-comb-container > ul[data-num-count="12"] { width: 260px; }

.my-comb-container > ul > li {

    display: inline-block;

    width: 35px;
    height: 35px;

    margin: 0 6px 6px 0;
    padding: 7px 0 0 0;

    border-style: solid;
    border-width: 1px;
    border-radius: 50%;
        
    font-size: 16px;
    font-weight: 700;

}
.my-comb-container > ul > li:last-child { margin-right: 0px; }

.my-comb-container > ul[data-num-count="10"] > li:nth-child(5n+5) { margin-right: 0px; }
.my-comb-container > ul[data-num-count="12"] > li:nth-child(6n+6) { margin-right: 0px; }


.my-comb-container > ul > li.number { color: #041a17; background-color: #fff; border-color: #5f5f60; }
.my-comb-container > ul > li.joker { background-color: var(--game-color); color: #fff; border-color: var(--game-color); }



.play-form .my-ticket-container {

    display: block;

    width: auto;
    height: auto;

    margin: 25px 0 0 0;
    padding: 0 0 0 0;

    text-align: center;

}

.my-ticket-container .my-ticket {

    display: inline-block;

    width: auto;
    height: auto;

    text-align: left;

}

.my-ticket > ul { }
.my-ticket > ul.my-numbers { margin-top: 10px; margin-bottom: 20px; }
.my-ticket > ul.my-jokers { margin-top: 10px; margin-bottom: 20px; }

.my-ticket > ul > li {

    display: inline-block;

    width: auto;
    height: auto;

    margin: 0 0 0 0;
    padding: 4px 0 4px 4px;

    text-align: center;

}


.my-ticket > ul > li > button {

    width: 46px;
    height: 46px;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

    background-color: #fff;
    border-radius: 4px;

    font-size: 16px;
    font-weight: 700;
    color: #041A17;

}
.my-ticket > ul > li > button:disabled { cursor: not-allowed; }

.my-ticket > ul > li > button[data-active="1"] { 
    
    background-color: var(--active-color); 
    color: #fff;

}


.my-ticket .my-add-line-command {

    display: block;

    width: auto;
    height: auto;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

}

.my-ticket .my-add-line-command button {

    display: none;

    width: 100%;
    height: auto;

    margin: 0 0 0 0;
    padding: 14px 0 12px 0;

    background-color: #fff;

    border: 2px solid #58ce70;
    border-radius: 8px;

    font-family: 'Axiforma';
    font-size: 16px;
    font-weight: 700;
    color: #041a17;

    text-align: center;

}

/*.my-ticket:not([data-id]) .my-add-line-command button.my-add-line-button { display: block; }
.my-ticket[data-id] .my-add-line-command button.my-update-line-button { display: block; }*/

.us-widget-beton-form[data-mode="play"] .my-ticket .my-add-line-command button.my-add-line-button { display: block; }
.us-widget-beton-form[data-mode="edit"] .my-ticket .my-add-line-command button.my-update-line-button { display: block; }


.my-ticket .my-add-line-command button:disabled { 

    background-color: #d7dbdb;
    border-color: #d7dbdb;
    color: #5f5f60;

    cursor: not-allowed;

}





.us-widget-beton-form .widget-container .pay-form,
.us-widget-beton-form .widget-container .multiplier-form,
.us-widget-beton-form .widget-container .dblplay-form {

    display: block;

    width: auto;
    height: auto;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

}

.pay-form .pay-box,
.multiplier-form .multiplier-box,
.dblplay-form .dblplay-box {

    display: block;

    width: auto;
    height: auto;

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

    border-radius: 8px;

    background-color: #fff;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .1);
}

.pay-form .pay-box.md-week > div,
.multiplier-form .multiplier-box > div,
.dblplay-form .dblplay-box > div {
    display: inline-block;
    width: 50%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
.pay-form .pay-box.md-week > div:first-child,
.multiplier-form .multiplier-box > div:first-child,
.dblplay-form .dblplay-box > div:first-child {text-align: left; }

.pay-form .pay-box.md-week > div:last-child,
.multiplier-form .multiplier-box > div:last-child,
.dblplay-form .dblplay-box > div:last-child {text-align: right; }

.pay-form .pay-box.disabled > div,
.multiplier-form .multiplier-box.disabled > div,
.dblplay-form .dblplay-box.disabled > div { color: #d7dbdb; }


.pay-form .select-box.md-draws {

    display: block;

    width: auto;
    height: auto;

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

}
.pay-form .select-box.md-draws select {
    
    width: calc(100% - 40px);
    height: auto;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

    border: none;
    outline: none;

}

.pay-form .select-box.md-draws .select2-container { width: 100% !important; }

.pay-form .select-box.md-draws .select2-container .select2-selection--single,
.pay-form .select-box.md-draws .select2-container--open .select2-selection--single,
.pay-form .select-box.md-draws .select2-container--focus .select2-selection--single {
    
    width: auto !important;
    height: auto !important;

    padding: 21px 20px 19px 20px;
    margin: 0 0 0 0;

    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .1) !important;

    text-align: left;

}

.pay-form .select-box.md-draws .select2-container .select2-selection--single span {

    font-family: 'Axiforma';
    font-size: 14px;
    font-weight: 400;
    color: #041A17;

}


.pay-form .select-box.md-draws .select2-dropdown {

    border: none !important;

    
    
}

.pay-form .select-box.md-draws .select2-dropdown--above { 
    
    margin-top: 5px !important; 

    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;

    box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, .1) !important;
}

.pay-form .select-box.md-draws .select2-dropdown--below { 
    
    margin-top: -5px !important; 

    border-top-left-radius: 0px;
    border-top-right-radius: 0px;

    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;

    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1) !important;

}

.pay-form .select-box.md-draws .select2-dropdown .select2-results__option--highlighted[aria-selected] { background-color: var(--game-color) !important; color: #fff !important; }
.pay-form .select-box.md-draws .select2-dropdown .select2-results__option { 
    
    padding: 7px 20px 7px 20px !important;

    font-family: 'Axiforma';
    font-size: 14px;
    font-weight: 400;
    color: #041A17;

    text-align: left;

}

.pay-form .select-box.md-draws .select2-container--disabled .select2-selection { background-color: #fff !important; }

.pay-form .select-box.md-draws .select2-container--disabled .select2-selection--single span { color: #d7dbdb; }




 .section-command-form button {

    width: 100%;
    height: auto;

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

    background-color: #58ce70;

    border: 1px solid #58ce70;
    border-radius: 8px;

    font-size: 16px;
    font-weight: 700;
    color: #041A17;

}

.section-command-form button:disabled {
    background-color: #d7dbdb;
    border-color: #d7dbdb;
    color: #5f5f60;
    cursor: not-allowed;
}

/* NY Lotto - "Add To Cart" helper tooltip (shown while the CTA is disabled) */
.section-command-form.has-cart-info {
    position: relative;
}

.section-command-form.has-cart-info .my-cart-info-tooltip {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);

    width: max-content;
    max-width: 280px;
    margin-bottom: 4px;
    padding: 10px 14px;

    background-color: #041A17;
    color: #ffffff;
    border-radius: 8px;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 10;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
}

.section-command-form.has-cart-info .my-cart-info-tooltip:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #041A17;
}

.section-command-form.has-cart-info.show-cart-info:hover .my-cart-info-tooltip,
.section-command-form.has-cart-info.show-cart-info:focus-within .my-cart-info-tooltip {
    opacity: 1;
    visibility: visible;
}





.widget-section.section-my-lines { display: block; }
.widget-section.section-template { display: none !important; }


.section-my-lines .my-line-container {

    display: block;

    width: auto;
    height: auto;

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

    background-color: #fff;

    border-radius: 8px;

}
.section-my-lines .my-line-container:last-child { margin-bottom: 0px; }

.us-widget-beton-form[data-mode="edit"] .my-line-container { opacity: 0.5; }
.us-widget-beton-form[data-mode="edit"] .my-line-container.edit-line { opacity: 1; }


.section-my-lines .my-line-container .my-line-header {

    display: block;

    width: auto;
    height: 47px;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

    background-color: var(--game-color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    font-size: 16px;
    font-weight: 700;
    color: #fff;

    text-align: left;
    vertical-align: top;
}

.my-line-header > div {

    display: inline-block;

    width: calc(50% - 2px);
    height: 31px;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

    line-height: 16px;
    vertical-align: top;

}
.my-line-header > div:first-child { padding-left: 10px; padding-top: 17px; text-align: left; }
.my-line-header > div:last-child { padding-top: 12px; padding-right: 10px; text-align: right; }

.my-line-header .btn-line-command { background-repeat: no-repeat; }
.my-line-header .btn-line-command:disabled { cursor: not-allowed; }

.my-line-header .btn-line-command.btn-remove-line {

    width: 24px;
    height: 24px;
    
    background-image: url(../images/btn-remove-line.svg);
    background-color: transparent;
    background-position-y: 0px;

}

.my-line-header .btn-line-command.btn-edit-line {

    width: 24px;
    height: 24px;
    
    background-image: url(../images/btn-edit-line.svg);
    background-color: transparent;
    background-position-y: 2px;

    margin-right: 2px;
}

.my-line-header .btn-line-command.btn-cancel {

    width: 24px;
    height: 24px;
    
    background-image: url(../images/btn-cancel.svg);
    background-color: transparent;

    margin-right: 2px;
}

.my-line-container .my-line-header .btn-line-command.btn-edit-line { display: inline-block; }
.my-line-container.edit-line .my-line-header .btn-line-command.btn-edit-line { display: none; }

.my-line-container .my-line-header .btn-line-command.btn-cancel { display: none; }
.my-line-container.edit-line .my-line-header .btn-line-command.btn-cancel { display: inline-block; }

.section-my-lines .my-line-container ul.my-line-comb {

    display: block;

    width: auto;
    height: auto;

    min-height: 60px;

    margin: 0 0 0 0;
    padding: 12px 0 8px 20px;

    background-color: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;

    text-align: left;

}
.section-my-lines[data-num-count="10"] .my-line-container ul.my-line-comb { width: 260px; }
.section-my-lines[data-num-count="12"] .my-line-container ul.my-line-comb { width: 285px; }

ul.my-line-comb li {

    display: inline-block;

    width: 35px;
    height: 35px;

    padding: 7px 0 6px 0;
    margin: 0 5px 5px 0;

    border-radius: 50%;
    border: 1px solid #5f5f60;

    font-size: 16px;
    font-weight: 700;
    color: #041A17;

    text-align: center;

}
ul.my-line-comb li:last-child { margin-right: 0px; }

ul.my-line-comb li.joker { border-color: var(--game-color); background-color: var(--game-color); color: #fff; }

.widget-overlay {

    display: block;
    position: absolute;

    width: auto;
    height: auto;

    margin: 58.56px 0 0 0;
    padding: 0 0 0 0;

    background-color: #000;
    opacity: 0.5;

    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;

    z-index: 2;

}

.us-widget-beton-form .blockUI.blockOverlay { border-radius: 8px; }
.us-widget-beton-form .blockUI.blockMsg { top: calc(50% - 21px) !important; }