/* Loading Overlay - START */

.blockUI.blockOverlay {

    width: 102% !important;
    height: 103% !important;

    margin: -1% 0 0 -1% !important;

}

/* Loading Overlay - END */


.plugin-beton {

    display: block;

    width: auto;
    height: auto;

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

}

.plugin-beton ul { list-style-type:none; }


/* Loading Styles - START */

/* Loading Styles - START */



/* Widget Heder - START */

.plugin-beton .beton-overlay {

    display: none;
    position: absolute;

    width: auto;
    height: auto;

    margin: -10px 0 0 -10px;

    background-color: #000;
    opacity: 0.3;

    z-index: 2;

}

.plugin-beton .beton-header {

    display: block;

    width: auto;
    height: 80px;

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

    background: linear-gradient(to right, var(--header-color-start), var(--header-color-end));
}

/* Loading Header */
.plugin-beton .beton-header.header-loading { background: rgb(240, 240, 240); cursor: not-allowed; }

.beton-header .header-table {

    display: table;
    float: left;
    
    width: auto;
    height: 80px;

    padding: 0 0 0 0;
}
.beton-header .header-table.hide-table { display: none; }

.header-table .header-row {

    display: table-row;

    width: auto;
    height: auto;
}

.header-row .header-cell {

    display: table-cell;

    width: auto;
    height: 80px;

    padding: 0 0 0 0;
    vertical-align: middle;

}

.header-cell.cell-logo { padding: 0 0 0 20px; }

.header-cell.cell-brand-name {

    padding: 0 0 0 10px;

    font-family: "Open Sans", sans-serif;
    font-size: 23px;
    color: #fff;
    font-weight: 700;

}

.header-cell.cell-vertical-line { padding: 0 0 0 20px; }
.header-cell.cell-vertical-line .c-vertical-line {

    display: inline-block;

    width: 1px;
    height: 66px;

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

    background-color: #fff;

}


.header-cell.cell-prize {

    padding: 0 0 0 20px;

    font-family: "Open Sans", sans-serif;
    font-size: 45px;
    color: #fff;
    font-weight: 800;

}

.header-cell.cell-prize .brand-prize { display: inline; }
.brand-prize .small-m {}

.header-cell.cell-prize .prize-text { display: inline; font-size: 32px; }
.header-cell.cell-prize .prize-text:before { content: " "; }

.header-cell.cell-timer { padding: 0 0 0 20px; }

.header-cell.cell-timer .c-timer {

    display: inline-block;

    width: auto;
    height: auto;

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

    font-family: "Open Sans", sans-serif;
    font-size: 17px;
    color: #fff;
    font-weight: 600;

    background: Transparent url(../images/clock.png) 0px 3px no-repeat;

}


.beton-header .header-command {

    display: inline-block;
    float: right;

    width: auto;
    height: 80px;
    
    margin: 0 0 0 0;
    padding: 0 0 0 0;

}

.header-command button {

    display: inline-block;
    
    width: auto;
    height: 80px;
    
    min-width: 80px;

    margin: 0 0 0 -2px;
    padding: 0 10px 0 10px;
    
    background-color: rgba(0, 0, 0, 0.3);
    
    background-repeat: no-repeat;
    background-position-x: center;
    
    border-radius: 0px;

}
.header-command button:first-child { 
    background-image: url(../images/btn-quick-pick.png); 
    background-position-y: 19px;
}
.header-command button:last-child { 
    background-image: url(../images/btn-clear.png); 
    background-position-y: 24px;
}

.header-command button:hover { background-color: rgba(0, 0, 0, 0.5); }

.header-command button div {
    
    display: inline-block;
    
    width: auto;
    height: auto;
    
    margin: 33px 0 0 0;
    padding: 0 0 0 0;
    
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    color: white;
    text-transform: uppercase;

}

.header-command button:disabled { cursor: not-allowed; }
.header-command button:disabled:hover { background-color: rgba(0, 0, 0, 0.3); }

/* Widget Heder - END */



/* Widget Play Area - START */

.plugin-beton .beton-play-area {

    display: block;

    width: auto;
    height: auto;

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

    border: none;

    /*border-left: 1px solid #c7c7c7;*/
    /*border-right: 1px solid #c7c7c7;*/
    /*border-bottom: 1px solid #c7c7c7;*/

}

/* Widget Play Area - END */



/* ********************************************************************************************* */
/* Widget Tickets - START */
/* ********************************************************************************************* */

.beton-play-area .beton-tickets {

    display: inline-block;
    
    width: 770px;
    height: auto;

    margin: 0 0 0 0;
    padding: 25px 0 0 0;
    
    text-align: left;
    vertical-align: top;

}

.beton-tickets ul.tickets-container { vertical-align: top; }

ul.tickets-container li.ticket-container {

    float: left;

    width: auto;
    height: auto;

    margin: 0 0 0 0;
    /*padding: 0 0 25px 15px;*/
    padding: 0 15px 25px 0px;

}
ul.tickets-container li.ticket-container:hover { padding-bottom: 11px; }

ul.tickets-container li.ticket-container div.ticket {

    display: inline-block;

    width: 170px;
    height: auto;

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

    border: 1px solid #c7c7c7;
    background-color: #fff;

}

ul.tickets-container li.ticket-container:hover div.ticket {
    margin-top: -20px;

    -webkit-box-shadow: 3px 3px 5px 0px rgba(189,189,189,1);
    -moz-box-shadow: 3px 3px 5px 0px rgba(189,189,189,1);
    box-shadow: 3px 3px 5px 0px rgba(189,189,189,1);

}


/* Loading Ticket - START */

.beton-play-area.play-area-loading .beton-tickets ul.tickets-container li.ticket-container:hover {
    padding-bottom: 25px;
}

ul.tickets-container li.ticket-container div.ticket-loading {

    display: inline-block;

    width: 170px;
    height: 300px;

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

    border-top: 1px solid #c7c7c7;
    border-left: 1px solid #c7c7c7;
    border-right: 1px solid #c7c7c7;

    background: linear-gradient(to bottom, rgb(240, 240, 240), #fff);

    cursor: not-allowed;

    /*animation-name: ticket-loading-key;
    animation-duration: 1s;
    animation-iteration-count: infinite;*/
}

@keyframes ticket-loading-key {

    0% { opacity: 1; }

    100% { opacity: 0; }
    
}

/* Loading Ticket - END */


/* Ticket Header - START */

li.ticket-container .ticket .ticket-header {

    display: block;

    width: 100%;
    height: auto;

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

}


.ticket-header .ticket-header-top {

    display: none;

    width: 100%;
    height: 34px;

    margin: 0 0 0 0;
    padding: 3px 0 0 0;

    font-family: Arial;
    font-size: 12px;
    color: #fff;
    text-align: center;

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

}
ul.tickets-container li.ticket-container:hover div.ticket .ticket-header .ticket-header-top {
    display: block;
}

.ticket-header .ticket-header-top button {
    width: auto;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-family: Arial;
    font-size: 12px;
    color: #fff;
    text-align: center;
}

.ticket-header .ticket-header-top button.btn-ticket-magic {
    
    min-width: 100px;

    padding: 3px 8px 2px 8px;
    margin: 3px 0 0 0;

    background-color: #FF8000;

}

.ticket-header .ticket-header-top button.btn-ticket-clear {
    
    position: absolute;

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

    background-color: transparent;

    font-size: 14px;

}


.ticket-header .ticket-header-bottom {

    display: block;

    width: 100%;
    height: 26px;

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

    font-family: Arial;
    font-size: 13px;
    color: gray;
    text-align: center;

    background: transparent;

}

.ticket-header .ticket-header-bottom i.fa-check-circle { font-size: 14px; color: #FF9300; margin-left: 3px; }

/* Ticket Header - END */


/* Ticket Body - START */

li.ticket-container .ticket .ticket-body {

    display: inline-block;

    width: auto;
    height: auto;

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

}

.ticket-body .ticket-numbers {}
.ticket-body .ticket-jokers {}

.ticket-body .ticket-field {

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

    width: 24px;
    height: 24px;

    margin: 3px 2px 3px 0;
    padding: 3px 0 0 0;

    border: 1px solid #bcbec0;
    border-radius: 6px;

    text-align: center;
    vertical-align: top;

    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ccc;

    cursor: pointer;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;

    text-decoration: none;

}

.ticket-body .ticket-numbers .ticket-field {}
.ticket-body .ticket-numbers .ticket-field:not([data-checked="0"]):before {

    position: absolute;

    content: "\f00d";
        
    font-family: 'FontAwesome';
    font-size: 19px;
    font-weight: normal;
    color: var(--brand-color);
    
    text-shadow: 1px 1px 1px #999999;
    z-index: 4;

    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    opacity: 0.7;

}

.ticket-body .ticket-numbers .ticket-field[data-checked="1"]:before { margin-left: 3px; margin-top: 7px; }
.ticket-body .ticket-numbers .ticket-field[data-checked="2"]:before { margin-left: 6px; margin-top: 7px; }


.ticket-body .ticket-jokers .ticket-field:not([data-checked="0"]) {
    background-color: var(--brand-color);
    color: #fff;
}

.ticket-body .ticket-jokers .ticket-field {
    border-color: var(--brand-color);
    color: var(--brand-color);
}

ul.tickets-container li.ticket-container:hover .ticket-body .ticket-numbers .ticket-field {
    color: var(--brand-color);
}


.beton-tickets ul.tickets-container {counter-reset: section;}
li.ticket-container .ticket .ticket-body:before {
    
    width: auto;
    height: auto;

    position: absolute;

    margin-left: 50px;
    margin-top: 100px;

    counter-increment: section;
    content: counter(section);
    
    font-size: 70px;
    font-family: sans-serif, 'Open Sans';
    color: #000;
    opacity: 0.1;

    text-shadow: 2px 1px #000;
    text-align: center;

}
ul.tickets-container li.ticket-container:hover .ticket .ticket-body:before {
    visibility: hidden;
}

/* Ticket Body - END */

/* ********************************************************************************************* */
/* Widget Tickets - END */
/* ********************************************************************************************* */



/* ********************************************************************************************* */
/* Widget Payment - START */
/* ********************************************************************************************* */

.beton-play-area .beton-payment {

    display: inline-block;
    
    /*width: 364px;*/
    width: 366px;
    height: auto;

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

    text-align: right;
    vertical-align: top;

}


.beton-play-area .beton-payment .beton-payment-box {

    display: inline-block;

    width: 350px;
    height: auto;

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

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

}

.beton-payment-box .section-title {

    display: block;

    width: auto;
    height: auto;

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

    text-align: center;

    font-family: 'Open Sans', sans-serif, Arial;
    font-size: 17px;
    color: #000;
    font-weight: 600;

    text-transform: uppercase;

}


/* Min Number of lines - START */

.beton-payment-box .min-number-of-lines {

    display: block;

    width: auto;
    height: auto;

    margin: 0 0 0 0;
    padding: 10px 0 12px 0;

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

}

.beton-payment-box .min-number-of-lines-arrow {

    display: block;

    width: auto;
    height: auto;

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

    text-align: center;

}

.beton-payment-box .min-number-of-lines-arrow div {
    
    display: inline-block;

    content: " ";
    position: absolute;
    
    padding: 0 0 0 0;
    margin: 0 0 0 0;

    border-top: 12px solid var(--brand-color);
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    border-bottom: none;
}

.min-number-of-lines .nol-title {

    display: block;

    width: auto;
    height: auto;

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

    text-align: center;

    font-family: 'Open Sans', sans-serif, Arial;
    font-size: 17px;
    color: #fff;
    font-weight: 600;

    text-transform: uppercase;

}

.min-number-of-lines ul { text-align: center; margin: 10px 0 0 0; }
.min-number-of-lines ul li { display: inline-block; padding: 0 2px 8px 2px; }

.min-number-of-lines ul li a {

    display: inline-block;

    width: 86px;
    height: 40px;

    margin: 0 0 0 0;
    padding: 10px 0 0 0;

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

    border: 1px solid #fff;
    border-radius: 20px;

    font-family: Arial;
    font-size: 15px;
    color: #fff;

}
.min-number-of-lines ul li a[data-checked="1"] { color: #000; background-color: #fff; cursor: text; }

.min-number-of-lines ul li a:hover { background-color: #fee9cc; color: #000; }
.min-number-of-lines ul li a[data-checked="1"]:hover { color: #000; background-color: #fff; }

.min-number-of-lines[data-lines-count="4"] ul li a {
    width: 75px;
}

.min-number-of-lines[data-lines-count="5"] ul li a {
    width: 60px;
}

/* Min Number of lines - END */



/* Draw Days - START */

.beton-payment-box .draw-days {

    display: block;

    width: auto;
    height: auto;

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

    border-bottom: 1px solid #c7c7c7;
}

.beton-payment-box .draw-days[data-min-number-of-lines="false"] {
    margin-top: 0px;
}

.draw-days .days-title {}

.draw-days ul { text-align: center; margin: 10px 0 0 0; }
.draw-days ul li { display: inline-block; padding: 0 2px 8px 2px; }

.draw-days ul li a {

    display: inline-block;

    width: 86px;
    height: 40px;

    margin: 0 0 0 0;
    padding: 10px 0 0 0;

    background-color: #fff;

    border: 1px solid #ff8003;
    border-radius: 20px;

    font-family: Arial;
    font-size: 13px;
    color: #333;

}
.draw-days ul li a[data-checked="1"] { color: #000; background-color: #fee9cc; cursor:text; }

.draw-days[data-days-count = "3"] ul li a { width: 80px; }
.draw-days[data-days-count = "7"] ul li a { width: 80px; }

.draw-days ul li a:hover { background-color: #fee9cc; color: #000; }
.draw-days ul li a[data-checked="1"]:hover { background-color: #fee9cc; color: #000; }

/* Draw Days - END */



/* Payment Weeks (MD) - START */

.beton-payment-box .payment-draws {

    display: block;

    width: auto;
    height: auto;

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

}
.beton-payment-box .payment-draws[data-draws-count="1"] { display: none; }

.payment-draws .draws-title { }

.payment-draws ul { text-align: center; margin: 10px 0 0 0; }
.payment-draws ul li { display: inline-block; padding: 0 2px 8px 2px; }

.payment-draws ul li a {

    display: inline-block;

    width: 62px;
    height: 40px;

    margin: 0 0 0 0;
    padding: 10px 0 0 0;

    background-color: #fff;

    border: 1px solid #ff8003;
    border-radius: 20px;

    font-family: Arial;
    font-size: 13px;
    color: #333;

}
.payment-draws ul li a[data-checked="1"] { color: #000; background-color: #fee9cc; cursor:text; }
.payment-draws ul li a[data-action="0"] { 
    
    color: #c4c2c0; 
    
    border-color: #c4c2c0;
    background-color: #fff; 
    cursor: not-allowed; 

}

.payment-draws ul li a[data-action="1"]:hover { background-color: #fee9cc; color: #000; }
.payment-draws ul li a[data-checked="1"][data-action="1"]:hover { background-color: #fee9cc; color: #000; }

.payment-draws[data-draws-count="3"] ul li a { width: 86px; }
.payment-draws[data-draws-count="4"] ul li a { width: 76px; }

.payment-draws[data-draws-count="6"] ul li { padding-left: 0px; padding-right: 0px; }
.payment-draws[data-draws-count="6"] ul li a { width: 55px; }

/* Payment Weeks (MD) - END */


/* Payment Separator - START */
.beton-payment-box .payment-separator {

    display: block;

    width: auto;
    height: auto;

    margin: 10px 0 10px 0;
    padding: 0 0 0 0;

    text-align: center;

    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #333;
    font-weight: 500;

}
/* Payment Separator - END */


/* Payment Subs - START */

.beton-payment-box .payment-subs {

    display: block;

    width: auto;
    height: auto;

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

}
.beton-payment-box .payment-subs[data-md="false"] { margin-top: 20px; }

.payment-subs button.btn-subs {

    width: 100%;
    height: auto;

    margin: 0 0 0 0;
    padding: 8px 0 8px 0;

    background-color: #fff;

    border: 1px solid #ff8003;
    border-radius: 20px;

    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000;
    font-weight: 600;

}
.payment-subs button.btn-subs[data-checked="1"] { background-color: #fee9cc; }

.payment-subs button.btn-subs i {

    position: absolute;

    right: 30px;

    font-size: 21px;
    color: #FF8000;
    
}

.payment-subs button.btn-subs .info-effect {

    animation-name: btn-info-key;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

@keyframes btn-info-key {

    0% {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    50% {
        -webkit-transform: scale(0.6);
        opacity: 0.25;
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }

}

.payment-subs .subs-note {

    display: block;

    width: auto;
    height: auto;

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

    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #333;
    text-align: center;

}


.payment-subs .subs-panel {
    display: none;
    width: auto;
    height: auto;
    margin: 10px 0 0 0;
    padding: 15px 15px 15px 15px;
    background-color: #efedee;
    border: 1px solid #afadae;
}

.payment-subs .subs-panel ul { margin: 0 0 0 0; }

.payment-subs .subs-panel ul li {

    padding: 7px 0 7px 0;
    border: none;

}


.payment-subs .subs-panel ul li {}

.payment-subs .subs-panel ul li a {

    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #333;

}

.payment-subs .subs-panel ul li a div { display: inline-block;  }

.payment-subs .subs-panel ul li a div.subs-checkbox {

    display: inline-block;
    float: left;

    width: 20px;
    height: 20px;

    margin: -1px 10px 0 0;
    padding: 0 0 0 0;

    border: 1px solid #afadae;
    border-radius: 50%;

    background-color: #fff;

}

.payment-subs .subs-panel ul li a[data-checked="1"] div.subs-checkbox:before {

    display: inline-block;
    content: " ";

    width: 12px;
    height: 12px;

    margin: 3px 0 0 3px;
    padding: 0 0 0 0;

    border: none;
    border-radius: 50%;

    background-color: #000;

    font-family: FontAwesome;
    color: #000;
    font-size: 11px;

}

.payment-subs .subs-panel ul li a div.subs-checkbox-text {

    display: inline-block;

    width: auto;
    height: auto;

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

    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #333;

}

.payment-subs .subs-panel ul li a[data-checked="1"] div.subs-checkbox-text { font-weight: 600; }


.payment-subs .subs-panel .subs-actions {

    display: block;

    width: auto;
    height: auto;

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

}

.payment-subs .subs-panel .subs-actions button {

    width: calc(50% - 8px);
    height: auto;

    margin: 0 0 0 0px;
    padding: 8px 10px 8px 10px;

    background-color: #999999;

    border: none;

    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    color: #fff;
    font-weight: 500;

}

.payment-subs .subs-panel .subs-actions button.btn-subs-save {
    margin-right: 8px;
    background-color: #000;
}

.payment-subs .subs-panel .subs-actions button.btn-subs-cancel {
    
}

.payment-subs .subs-panel .subs-actions button:hover { background-color: #FF8000; }

/* Payment Subs - END */



/* Payment Amount - START */

.beton-payment-box .payment-box-errors {

    display: block;

    width: auto;
    height: auto;

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

    border: 1px solid red;


    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: red;

}

.beton-payment-box .payment-amount {

    display: block;

    width: auto;
    height: auto;

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

}

.payment-amount .amount-section {

    display: block;

    width: auto;
    height: auto;

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

}

.amount-section.amount-lines {
    
    padding-top: 10px;
    border-top: 1px solid #c7c7c7;

}

.amount-section.amount-discount {
    padding-bottom: 10px;
    border-bottom: 1px solid #c7c7c7;
}

.amount-section.amount-total {
    
    padding-top: 10px;
    
}

.amount-section .amount-section-title {

    display: inline-block;
    float: left;

    width: auto;
    height: auto;

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

    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #333;
    font-weight: 600;

    text-transform: uppercase;

}
.amount-section.amount-discount .amount-section-title { color: #ff8003; }

.amount-section .amount-section-value {

    display: inline-block;
    float: right;

    width: auto;
    height: auto;

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

    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #333;
    font-weight: 600;

}
.amount-section.amount-discount .amount-section-value { color: #ff8003; }

.amount-section.amount-lines .amount-section-value.line-through {
    text-decoration: line-through;
    text-decoration-color: red;
}

/* Payment Amount - END */



/* Beton Actions - START */

.beton-payment-box .beton-actions {

    display: block;

    width: auto;
    height: auto;

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

}

.beton-payment-box .beton-actions button.btn-add-to-cart {

    width: 100%;
    height: auto;

    margin: 0 0 0 0;
    padding: 10px 40px;

    font-family: "Open Sans", sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #fff;

    background-color: #FF8000;

}

.beton-payment-box .beton-actions button.btn-add-to-cart:disabled {

    background-color: #c4c0be;
    cursor: not-allowed;
    color: #e6e6e6;

}

/* Beton Actions - END */


/* ********************************************************************************************* */
/* Widget Payment - END */
/* ********************************************************************************************* */