/*---------------Small widgets go here-------------------
Examples:
-> Search
-> Language
-> Odds format
-> Date select
-> Coupon sorting
-> Button

*/
/*----------Input---------*/
#root input {
    background-color: var(--c-background-white);
    border: 1px solid var(--c-primary-c);
    color: var(--c-text-dark);
    border-radius:var(--r-10);
    min-height: 45px;
    width: 100%;
}

#root input i::before {
    background-color: var(--c-text-light);
}

#root input:focus {
}

#root input::placeholder {
    color: var(--c-text-light);
    opacity:.5;
}

/*----------Button---------*/
.button, button {
    padding: 8px 12px;
    color: var(--c-text-dark-blue);
    background-color:transparent;
    border:1px solid var(--c-dark-blue);
    /* min-height:40px; */
    border-radius:var(--r-10);
    font:var(--t-small-text-bold)
    /* margin: 0 5px; */
}

/*----------Button---------*/
.link {
    /* margin:0 5px; */
    cursor: pointer
}

/*---------Search------------*/
app-search .search-label {
    display: none;
}

 
#root .left-sidebar app-search input {
    height:50px;
    background-color:var(--c-site-shade-1);
    box-shadow:unset;
    border:0;
    background-image: url(/v1.011/r/images/in2bet/icons/search.svg);
    background-position: 24px 50%;
    background-repeat: no-repeat;
     background-size: 20px;
    text-indent:55px;
    border-radius:var(--r);
}
/*----------Dropdowns---------*/
#root .ui-dropdown {
    background: var(--c-shade-b);
    min-width: unset;
    border: unset
}

.ui-dropdown-label img, .ui-dropdown-item img {
    width: 24px;
    margin-right: 5px;
}

.ui-dropdown-item.ui-state-highlight {
    display: none;
}

#root .ui-dropdown-label {
    display: flex;
    align-items: center;
    background: unset;
    color: var(--c-text-light-e);
    border: unset
}
#root .ui-dropdown-label span {
    font:var(--t-small-text-bold);
    margin-left:5px;
}
body .ui-dropdown .ui-dropdown-trigger {
    background-color: unset;
}

.ui-dropdown .ui-dropdown-trigger .ui-dropdown-trigger-icon {
    color: var(--c-text-light);
    font-size: 1rem;
    margin:0;
    left:0px;
    transform:translate(0%,-50%)
}

#root select, #root .ui-dropdown {
    width: 100%;
    min-height: 30px;
    border-radius: var(--r);
    transition: .25s;
    text-indent: 2px;
    height: 100%;
    font-weight: 600;
    padding-right: 4px;
    position: relative;
    /* -webkit-appearance: none; */
    color: var(--c-text-dark-e);
    background-color: var(--c-background-white);
    font: var(--t-small-text-normal);
    border: 0;
    border-radius: var(--r-10);
}
#root app-markets-drop-down {
    position:relative;
}
/*#root app-markets-drop-down:not(.no-other-markets)::before,
#root app-bet-register .element.value::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0px;
    top: 50%;
    transform: translate(0%,-50%);
    background-size: 15px;
    background-image: url(/v1.011/r/images/site/icons/Arrow_Down.svg);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}*/

#root select option {
    text-indent: 2px;
}

/*----------Filter Language---------*/
app-language .filter-language-name {
    display: none;
}

/*----------Filter Odds---------*/
app-odds-format .filter-odds-name {
    display: none;
}

/*----------Menus---------*/
app-menu ul {
    margin: unset;
    padding: unset;
    list-style-type: none;
    height: 100%;
    display:flex;
}

app-menu li, app-menu li a {
    height: 100%;

}

#root app-menu li a {
    display: flex;
    align-items: center;
    flex-direction: row;
    background: unset
}
#root app-menu li a:not(.active):hover {
    color:var(--c-text-light-e)
}
/*----------Bets counter---------*/
#root app-openbets-counter .no-open-bets .bets-number {
    /* display: none; */
}

#root app-openbets-counter .openbets-counter-name {
    display: none;
}

/*----------Back Button ---------*/
#roo app-back-button {
    border-right: 1px solid var(--c-shade)
}

#root .back-button {
    background-color: unset;
    display: flex;
    align-items:center;
    width: 38px;
    height: 100%;
    background-image: url(/v1.02/r/images/site/icons/Arrow_Left.svg);
    padding: 0 !important;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    overflow: hidden;
    text-overflow: clip;
    border-radius: 0;
    font-size:0px;
}
#root a.back-button::before {
     content: "";
    width: 22px;
    height: 22px;
    filter: saturate(0) invert(1);
    background-repeat: no-repeat;
    background-image: var(--c-global-icon-spritesheet);
    display: block;
    margin-right: 5px;
    background-position: -404px -42px;
}
/*----------Form ---------*/

#root form .required {
    color: var(--c-red);
    font-weight: bold;
}

#root form app-date-field ngx-combo-datepicker {
    display: flex;
}

#root form select {
    max-height: 30px;
    text-indent: 6px
}

#root form tel-input {
    display: flex;
}

#root form input {
    background-color: unset;
    text-indent: 12px;
}

#root form input:disabled {
    border: 1px solid var(--c-shade)
}

#root form .form-element-error {
    padding: 2px 0px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    color: var(--c-red);
    font:var(--t-small-text-normal)
}

#root form .form-element-error span.clear-error {
    min-width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
   
}

.desktop form .form-label {
    /* width: 30%; */
    /* min-width: 200px; */
}

#root .mobile form .form-row:not(.checkbox-wrapper) {
    display: flex;
    flex-direction: column
}

#root form textarea {
    min-height: 200px;
}

/*----------Upload documents ---------*/
#root app-user-documents-upload .upload-wrapper {
    padding: 15px;
    background-color: var(--c-text-light);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#root app-user-documents-upload app-label-value:first-child {
    margin-bottom: 10px;
    display: block;
}

#root app-user-documents-upload app-label-value > div {
    height: unset;
    align-items: center;
}

#root app-user-documents-upload .element.label {
    width: 40%;
}

#root app-user-documents-upload app-set-value {
    width: 60%;
}

#root .required-inline-field {
    margin: 0 3px;
    position: relative;
    /* height: 5px; */
    /* color: transparent; */
}

#root .required-inline-field::before {
    width: 5px;
    height: 5px;
    position: absolute;
    top: 0;
    left: 0;
    /* content: ""; */
    background-color: red;
    border-radius: 50%;
}

#root app-user-documents-upload app-set-value .element.value {
    display: flex;
    align-items: center;
}

#root app-user-documents-upload app-set-value .element.value .value-input {
    width: calc(100% - 11px);
}
.responsive-table {
    display:flex;
    flex-direction:column;
}
.responsive-table table:not(.ui-datepicker-calendar){
    display:flex;
    flex-direction:column;
    width:100%;
    border-spacing:0;
    font:var(--t-small-text-bold);
    border-radius:var(--r-10);
    overflow:hidden
}
#root .responsive-table table:not(.ui-datepicker-calendar) tr {
      display:flex;
    width:100%;
    flex-direction:row;
    border:0;
    background-color:unset
}
#root .responsive-table table:not(.ui-datepicker-calendar) tr:nth-child(even) {
    background-color: var(--c-dark-blue-10)
}
body#root .responsive-table table:not(.ui-datepicker-calendar) tr td,
body#root .responsive-table table:not(.ui-datepicker-calendar) tr th{
     display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    flex:1;
    border:0;
    background-color:unset;
    
}
.responsive-table table:not(.ui-datepicker-calendar) thead {
     display:flex;
    width:100%;
     background-color:var(--c-accent-color);
    
    
}
.responsive-table table:not(.ui-datepicker-calendar) tbody {
    display:flex;
    flex-direction:column;
    background-color:var(--c-off-white)
}
#root .responsive-table table:not(.ui-datepicker-calendar) thead th {
   color:var(--c-text-light-e);
    padding:10px;
}
#root .responsive-table table:not(.ui-datepicker-calendar) td {
    padding:10px;
   
}

@media screen and (max-width:1230px) {
    .responsive-table table:not(.ui-datepicker-calendar) thead {
        display:none;
    }
    body#root .responsive-table table:not(.ui-datepicker-calendar) tr {
        flex-direction:column;
        padding:10px;
    }
    
    body#root .responsive-table table:not(.ui-datepicker-calendar) td {
        width:unset;
        flex:1;
         justify-content:space-between;
    
    }
     body#root .responsive-table table:not(.ui-datepicker-calendar) td:not(:last-child) {
         border-bottom:1px solid var(--c-dark-blue-10)
     }
    #root .responsive-table table:not(.ui-datepicker-calendar) td::before {
    content:attr(data-column);
        margin-right:auto;
}
}
#root .statement-content table:not(.ui-datepicker-calendar) th:first-child {
    width: 20%!important;
}


#root .ui-paginator {
    background-color: unset;
}



/*----------Filter Schedule ---------*/
#root .filter-schedule {
    margin-bottom: 4px;
    /* background-color: var(--c-primary-c); */
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    font-size: 13px;
    padding: 0px;
    overflow-x:auto;
    margin:0px 10px
}

.filter-schedule .filter-schedule-item {
    align-items: center;
    border: 0;
    border-radius:0px;
    color: var(--c-text-light);
    display: flex;
    height: 32px;
    justify-content: center;
    margin-left: 4px;
    width: 100%;
    white-space:nowrap;;
    margin-right:5px;
}

.filter-schedule .filter-schedule-item:first-child {
    margin-left: 0px;
}

#root .filter-schedule span.selected {
    color: var(--c-accent-color);
    background:transparent;
}

#root .filter-schedule span {
    border-color: var(--c-primary-d);
}
#root .filter-schedule span:last-child {
    order:-1;
}
#root .filter-schedule span:nth-last-child(2){
    /* display:none; */
}

/*--------Betslip Check----------*/
#root app-betslip-check > div {
    margin: 4px 0px;
}

#root app-betslip-check form {
    display: flex;
}

#root app-betslip-check form .betslip-check-form-code, #root app-betslip-check form .betslip-check-form-code input {
    height: 100%;
}

#root app-betslip-check form button {
    margin: unset;
    background-color: var(--c-emphasis);
    border-radius: var(--r)
}

/*--------League Date Filter--------*/
.content-top app-league-time-filter {
    margin-left: auto
}

app-league-time-filter ul {
    margin: 0;
    padding: 0;
    display: flex;
}

app-league-time-filter ul li a {
    color: var(--c-text-light)
}

app-league-time-filter ul li {
    background-color: var(--c-shade-b);
    border-top-left-radius:2px;
    border-top-right-radius:2px;
}

app-league-time-filter ul li.sortBySelected {
    background-color: var(--c-emphasis);
}

app-league-time-filter ul li.sortBySelected a {
    color: var(--c-text-light-e)
}

.hover app-league-time-filter ul li:hover a {
    color: var(--c-text-light-e)
}
.custom-page-breadcrumbs {
    background-color:var(--c-primary-d);
    display:flex;
}
.custom-page-breadcrumbs .link {
    padding:5px;
    text-transform:capitalize;
    background-color:var(--c-primary-b);
    color:var(--c-text-light);
    margin-right:3px;
}
.custom-page-breadcrumbs .link:last-child{
    color:var(--c-text-light-e);
    background-color:var(--c-primary);
}
.custom-page-breadcrumbs .link.disabled {
    opacity:0.5
}
.documentation {
    color:var(--c-text-light);
    margin:3px;
}
/*----------Last Betslip-----------*/
#root app-last-betslip app-history .history-content-wrapper {
    margin-top:0px;
}
.last-betslip-reload-selections {
    width:100%;
    background-color:var(--c-emphasis);
    color:var(--c-text-light-e);
    border-radius:3px;
    margin:0px;
}
.close-last-betslip-button {
    width:calc(100% - 6px);
    margin:0 auto;
    display:flex;
    justify-content:center;
    padding:8px;
    color:var(--c-text-light-e);
    background-color:var(--c-primary-d)
}
.last-betslip-heading {
    color:var(--c-text-light);
    padding:8px;
    text-align:center;
    font-size:1.1em
}
app-last-betslip:empty ~ .last-betslip-heading {
   display:none;
}
.theme_display_switcher .theme_display {
    position:fixed;
    bottom:0px;
    width:auto;
    min-width:320px;
    left:50%;
    transform:translate(-50%);
    background-color:white;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    z-index:1000
}
.theme_display_switcher .theme_display_scrollable {
    display:flex;
    justify-content:center;
    padding:15px 15px;
}
.theme_display_switcher .theme_display_scrollable > div {
    width:100px;
    height:75px;
    color:black;
    background-repeat:no-repeat;
    background-position:center top;
    display:flex;
    justify-content:center;
    cursor:pointer;
}
.theme_display_switcher .theme_display_scrollable > div:not(:last-child){

    margin-right:8px;
}
.theme_display_switcher .theme_display_scrollable > div > div {
    margin-top:auto;
    text-align:center;

}
.theme_display_switcher .theme_display_scrollable > div.theme_7 {
    background-image:url(/v1.011/r/images/site/themeswitcher/theme_7.PNG);
    
}
.theme_display_switcher .theme_display_scrollable > div.theme_8 {
    background-image:url(/v1.011/r/images/site/themeswitcher/theme_8.PNG);
}
.theme_display_switcher .theme_display_scrollable > div.theme_9 {
    background-image:url(/v1.011/r/images/site/themeswitcher/theme_9.PNG);
}
.theme_display_switcher.collapsed .theme_display {
    display:none;
}
.theme_display_switcher.collapsed .open_switch {
    position:fixed;
    width:80px;
    height:30px;
    background-color:white;
    bottom:0px;
    left:50%;
    transform:translate(-50%);
    display:flex;
    align-items:center;
    justify-content:space-evenly;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
}
.theme_display_switcher.collapsed .open_switch div {
    width:15px;
    height:15px;
    background-color:gray;
    border-radius:50%;
}
app-fastbet-adder {
    color:var(--c-text-light);
}
app-fastbet-adder .fastbet-adder-container {
    display:flex;
    align-items:center;
}
app-fastbet-adder .fastbet-adder-container .fastbet-title {
    padding:0 5px;
}
#root app-fastbet-adder .fastbet-adder-container input {
    max-width:100px;
    margin-right:8px;
}
app-terminal-login {
    max-width:400px;
    display:flex;
    width:100%;
}
app-terminal-login .terminal-login-container {
    display:flex;
    flex-direction:column;
    width:100%;
}
app-terminal-login .terminal-login-container app-set-value {
    margin-bottom:8px;
}
app-terminal-login .terminal-login-container button {
    margin:0px;
    background-color:var(--c-green)
}
app-terminal-login-pin {
    display:flex;
    width:100%;
    max-width:500px;
    color:var(--c-text-light);
    
}
app-terminal-login-pin .terminal-login-pin-container {
    width:100%
}
app-terminal-login-pin .terminal-login-pin-container .pin-code {
    text-align:center;
    font-size:1.2rem;
    margin:5px 0px
}
app-terminal-login-pin .label-value-container .label{
    align-items:center;
    display:flex;
    justify-content:center;
    width:30%;
}
app-terminal-login-pin .label-value-container app-set-value {
    width:70%;
}
#root app-terminal-login-pin  app-num-pad .num-pad-container .elements.numbers{
    width:100%;
    margin-bottom:0px;
    justify-content:center
}
#root app-terminal-login-pin  app-num-pad .num-pad-container .elements.numbers .element {
    width:calc(33% - 4px)
}
#root app-terminal-login-pin  app-num-pad .num-pad-container .elements.other .button-0{
    position:unset;
    transform:none;
}
#root app-terminal-login-pin  app-num-pad .num-pad-container .elements.other .element {
    width:calc(33% - 4px);
}
#root app-terminal-set-id {
    display:flex;
    color:var(--c-text-light)
}
#root app-terminal-set-id .terminal-set-id-container {
    display:flex;
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
    width:100%;
}
#root app-terminal-set-id .terminal-set-id-container .not-set {
    width:100%;
    margin:8px 0px;
    text-align:center;
}
#root app-terminal-set-id .terminal-set-id-container input {
    min-height:unset;
    height:100%;
}
#root app-terminal-set-id .terminal-set-id-container .element.value {
    height:100%;
}
.chat-button {
    order:0;
    margin-right:5px;
}
.chat_button {
    width:24px;
    height:24px;
    filter:saturate(0) invert(1);
    background-repeat:no-repeat;
    background-image:var(--c-global-icon-spritesheet);
    background-position: -295px -74px;
    background-color:transparent;
    border:0;
}
.chat_button:hover {
    border:0;
}
.chat-button span {
    display:none;
    
}
.desktop .header app-language .ui-dropdown-label, .desktop .header app-odds-format .ui-dropdown-label {
    height: 35px;
    padding-right:5px;
}
 app-language .ui-dropdown-label {
    padding-right:.429em
}
 app-language .ui-dropdown-label img {
    margin-right:0px;
    width:22px;
    height:22px;
    border-radius:50%;
}

 app-language .ui-dropdown .ui-dropdown-trigger{
    display:none;
}
 app-language .ui-dropdown .ui-dropdown-item img {
    margin-right:0px;
    width:22px;
    height:22px;
     border-radius:50%;
}
 app-language .ui-dropdown .ui-dropdown-item:not(.ui-state-highlight) {
     display:flex;
     /* justify-content:center; */
     padding:5px;
}
 app-language .ui-dropdown .ui-dropdown-item {
    padding:0;
    align-items:center;
   
    
}
 app-language .ui-dropdown .ui-dropdown-item span {
    /* display:none; */
    font: var(--t-small-text-bold);
    margin-left: 5px;
}
.left-sidebar app-language .ui-dropdown .ui-dropdown-label{
     padding-left:16px;
 }
.left-sidebar app-language .ui-dropdown .ui-dropdown-item {
    padding-left:14px;
     text-transform:uppercase;
}
#root .left-sidebar app-language .ui-dropdown .ui-dropdown-label span{
    font:var(--t-small-text-normal);
    text-transform:uppercase;
}