app-history {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

app-history form {
    min-height: 100%;
    max-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#root .history-from, #root .history-to {
    padding: 0;
}

#root app-history .history-content-wrapper {
    color: var(--c-black);
    max-width: 720px;
    margin-top: 8px;
}

#root app-history .no-history-records {
    text-align: center;
    margin: 5px 0px;
}

#root app-history .history-bet-wrapper {
    border-radius: var(--r-b);
    overflow: hidden;
    border: 0;
    box-shadow: var(--ds-2p), 0 0 1px 1px rgba(0, 0, 0, .1);
    margin: 0 4px 8px;
    display: flex;
    flex-direction: column;
    background-color: var(--c-white);
}

#root app-history .history-bet-wrapper .history-bet-header {
    align-items: center;
    border-bottom: var(--b-border);
    display: flex;
    flex-direction: row;
    padding: 6px 8px;
    position: relative;
    border-bottom: 1px solid var(--c-white-e);
}

#root app-history .history-bet-wrapper .history-bet-header .history-bet-toggle {
    align-items: center;
    border: solid;
    border-width: 1px;
    border-color: unset;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 24px;
    justify-content: center;
    margin-right: .5em;
    width: 24px;
    flex-shrink: 0;
}

#root app-history .history-bet-wrapper.expanded .history-bet-header .history-bet-toggle:before {
    content: "-";
}
#root app-history .history-bet-wrapper .history-bet-header .history-bet-toggle:before {
    content: "+";
}
#root app-history .history-bet-wrapper .history-bet-header .history-bet-toggle:after {
    content: "";
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

#root app-history .history-bet-wrapper .history-bet-header .history-bet-info {
    display: flex;
    line-height: 1.2rem;
}

#root app-history .history-bet-wrapper .history-bet-header .history-bet-info .history-bet-type {
    margin-right: 4px;
    font-size: 0.9rem;
}

#root app-history .history-bet-wrapper .history-bet-header .history-bet-info .history-bet-lines {
    font-weight: 600;
}

#root app-history .history-bet-lines.single {
    display: none;
}

#root app-history .history-bet-header .history-bet-stake {
    display: none;
}

#root app-history .history-bet-wrapper .history-bet-status {
    border-radius: var(--r);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-left: auto;
    padding: 2px 6px;
    background-color: #003d59;
    color:white;
    margin-right: 0;
}

#root app-history .history-bet-wrapper .history-bet-header .history-bet-status.won {
    background-color: var(--c-green-b);
    color:var(--c-black)
}

#root app-history .history-bet-wrapper .history-bet-header .history-bet-status.lost {
    background-color: rgb(173 173 173 / 46%);
    color:var(--c-black)
}
#root app-history .history-bet-wrapper .history-bet-header .history-bet-status.won-cashout {
    background-color: #34e08d7a;
    color:var(--c-black)
}
#root app-history .history-bet-time {
    white-space: nowrap;
}

#root app-history .history-bet-header .history-bet-date-time-id {
    display: none;
}

#root app-history .history-bet-wrapper .history-bet-content {
    display: flex;
    padding: 8px 10px;
}

#root app-history .history-bet-wrapper .history-bet-content {
    flex-direction: row;
}
#root app-history .history-bet-wrapper:not(.expanded) .history-bet-content app-bet-content{
    display:flex;
}
#root app-history .history-bet-wrapper.expanded .history-bet-content {
    flex-direction: column;
}

#root app-history .history-bet-wrapper .history-bet-content .history-bet-match-details {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
}

#root app-history .history-bet-wrapper.expanded .history-bet-content .history-bet-match-details:first-child {
    margin-top: 0;
}

#root app-history .history-bet-wrapper.expanded .history-bet-content .history-bet-match-details:last-child {
    border-bottom: 0;
}

#root app-history .history-bet-wrapper.expanded .history-bet-content .history-bet-match-details {
    padding-bottom: 0;
    font-size: 1.2rem;
    line-height: 1;
    position: relative;
    padding:8px 0px;
    border-bottom:1px solid var(--c-primary-d)
}

#root app-history .history-bet-wrapper .history-bet-content .history-bet-match-details:before {
    border: 0;
    border-radius: 50%;
    color: #fff;
    content: "";
    display: inline-block;
    height: 20px;
    margin-right: .5em;
    min-width: 20px;
}

#root app-history .history-bet-wrapper .history-bet-content .history-bet-match-details:before {
    background-color: var(--c-primary-b);
    background-image: url(/v1.002/r/images/site/icons/Tiny-open.svg);
}

#root app-history .history-bet-wrapper .history-bet-content .history-bet-match-details.lost:before {
    background-color: var(--c-red);
    background-image: url(/v1.002/r/images/site/icons/Close-tiny.svg);
}

#root app-history .history-bet-wrapper .history-bet-content .history-bet-match-details.won:before {
    background-color: var(--c-green);
    background-image: url(/v1.002/r/images/site/icons/Tick-tiny.svg);
}
#root app-history .history-bet-wrapper .history-bet-content .history-bet-match-details.void:before {
    background-color: #187ba4;
    background-image: url(/v1.002/r/images/site/icons/Tick-tiny.svg);
}
#root app-history .history-bet-wrapper:not(.expanded) .history-bet-content .history-bet-match-details div {
    display: none;
}

#root app-history .history-bet-wrapper.expanded .history-bet-content .history-bet-match-details div {
    display: block;
}

#root app-history .history-bet-wrapper.expanded .history-bet-content .history-bet-match-details .history-bet-match-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#root app-history .history-bet-wrapper.expanded .history-bet-content .history-bet-match-details .selection-and-odds {
    padding-top: 4px;
    line-height: 1;
    display: flex;
    flex-direction: row;
    font-weight: bold;
    justify-content: space-between;
}

#root app-history .history-bet-wrapper.expanded .history-bet-content .history-bet-match-details .market-name {
    display: flex;
    text-indent: -1px;
    font-style: normal;
    font-size: 1.1rem;
    margin-top: 4px;
}

#root app-history .history-bet-wrapper.expanded .history-bet-content .history-bet-match-details .history-bet-match-wrapper .match-and-time {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 16px 0;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
    padding-top: 12px;
    /* text-transform: uppercase; */
}

#root .right-sidebar app-history .history-bet-wrapper .history-bet-content .history-bet-match-details .history-bet-match-wrapper .match-and-time {
    align-items: flex-start;
    flex-direction: column;
}
.history-bet-content .history-bet-match-details .match-and-time .history-match-score {
    color:var(--c-primary-c)
}
#root app-history .history-bet-wrapper.expanded .history-bet-content .history-bet-match-details .match-date-code-wrapper{
    font-size:1.1rem;
    /* display:none; */
}
#root app-history .history-bet-wrapper.expanded .history-bet-content .history-bet-match-details .match-date-code-wrapper .betslip-match-code {
    display:none
}
#root app-history .history-bet-wrapper .history-bet-footer {
    border-top: 1px solid var(--c-white-e);
    display: flex;
    flex-direction: row;
}
#root app-history .history-bet-wrapper .history-systems-wrapper {
    display:none;
}
#root app-history .history-bet-wrapper.expanded .history-systems-wrapper {
    display:block;
}
#root app-history .history-systems-wrapper .history-system-wrapper.history-bet-header {
    padding: 0;
}
#root app-history .history-bet-wrapper .history-bet-footer, #root .history-bet-wrapper .history-systems-wrapper {
    background-color: rgba(0, 0, 0, 0.06);
}
#root app-history .history-bet-wrapper .history-system-wrapper .history-system-type {
    display: none;
}
#root app-history .history-systems-wrapper .history-system-wrapper {
    display: flex;
}
#root app-history .history-systems-wrapper .history-system-wrapper > div {
    flex: 1;
}
#root app-history .history-systems-wrapper .history-system-wrapper span {
    display: block;
}
#root app-history .history-systems-wrapper .history-system-wrapper > div:not(:first-child) {
    text-align: center;
}
#root app-history .history-systems-wrapper .history-system-wrapper:not(.history-bet-header) > div span:first-child {
    display: none;
}
#root app-history .history-bet-wrapper .history-bet-footer > div:not(.history-bet-possible-winnings), .history-bet-wrapper .history-system-wrapper > div {
    border-right: 1px solid var(--c-white-e);
}

#root .history-bet-wrapper .history-bet-footer > div, .history-bet-wrapper .history-system-wrapper > div {
    display: flex;
    flex: 1 1 25%;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px 8px;
}

#root app-history .history-bet-wrapper .history-system-wrapper > div,#root app-history .history-bet-wrapper .history-bet-footer > div span {
    font-size: 1rem;
}

#root app-history .history-bet-wrapper .history-system-wrapper > div span:last-child,#root app-history .history-bet-wrapper .history-bet-footer > div span:last-child {
    font-weight: bold;
    font-size: 1.1rem;
}

#root app-history .history-bet-wrapper .history-bet-possible-winnings, #root app-history .history-bet-wrapper .history-bet-winnings {
    flex: 1 1 60%;
    flex-direction: row;
}

#root .history-bet-wrapper .history-bet-footer .history-bet-odds {
    display: none;
}

#root .history-bet-wrapper .history-system-wrapper > div:last-child,#root .history-bet-wrapper .history-bet-footer > div:last-child {
    border-color: transparent;
}

#root app-history .history-bet-wrapper .history-bet-stake {
    flex: 1 1 40%;
    flex-direction: row;
}

#root app-history .bet-infos-title-wrapper {
    align-items: center;
    border-top: 1px solid lightgray;
    display: flex;
    justify-content: flex-end;
    padding: 4px 8px;
}

#root app-history .bet-infos-title-wrapper {
    display: none;
}

#root app-history .bet-infos-toggle {
    align-items: center;
    border-radius: 50%;
    color: black;
    cursor: pointer;
    display: flex;
    height: 24px;
    justify-content: center;
    margin-left: .5em;
    width: 24px;
    background: rgba(0, 0, 0, .2) url(/v1.17/r/images/site/icons/Arrow_Down.svg) center center no-repeat;
    transform: rotate( 90deg );
}

#root app-history .bet-infos-content {
    align-items: center;
    border-top: 1px solid var(--c-tint);
    display: flex;
    justify-content: space-between;
    padding: 4px;
}

#root app-history .bet-infos-content .history-bet-date-time {
    align-items: center;
    display: flex;
}

#root app-history .bet-infos-content .history-bet-date-time .history-bet-date {
    margin-right: .5em;
}

#root app-history .history-bet-wrapper .bet-infos-content .history-bet-id {
    align-items: center;
    border: 0;
    display: flex;
    margin: 0;
    padding: 0;
}

#root app-history .history-bet-wrapper .bet-infos-content .history-bet-id:before {
    content: 'ID: ';
    margin-right: 4px;
}

#root app-history .history-bet-wrapper .history-actions-wrapper {
    display: flex;
}

#root app-history .history-bet-wrapper .history-actions-wrapper .history-bet-action {
    flex: 1;
    padding: .5em;
    margin: unset;
}

#root app-history .history-bet-wrapper .history-bet-cashout,
#root app-history .history-bet-wrapper .history-actions-wrapper .history-bet-confirm,
#root app-history .history-bet-wrapper .history-actions-wrapper .history-bet-cancel{
    background-color: #18a460;
    color: #fff;
    padding: .5em;
    text-align: center;
    font-size: 15px;
    width: 100%;
    border-radius: 0 0 4px 4px;
    font-weight: bold;
    margin: unset;
    flex: 1;
}

#root app-history .history-bet-wrapper .history-actions-wrapper .history-bet-confirm {
    background: var(--c-green);
    /* color: var(--c-black); */
}

#root app-history .history-bet-wrapper .history-actions-wrapper .history-bet-cancel {
    background: var(--c-shade-b);
    position: relative;
    color: var(--c-text-light-e);
}

#root app-history .history-bet-wrapper .history-actions-wrapper .history-bet-cancel:before {
    border: 1px solid var(--c-red);
    border-radius: 50%;
    content: '';
    height: 10px;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 10px;
}

#root app-history .history-bet-wrapper .history-actions-wrapper .history-bet-cancel:after {
    color: var(--c-red);
    content: 'X';
    position: absolute;
    right: 7px;
    top: 5px;
    font-size: 10px;
    line-height: 10px;
}
#root .desktop tfoot .history-bet-footer {
    color: var(--c-primary-c);
    display: flex;
    justify-content: space-between;
    padding: 5px 0px;
}
#root .desktop app-history tfoot .history-bet-footer div span {
    padding-right: 5px;
}
#root .desktop app-history .history-bet-footer-dates span{
    white-space:nowrap
}
#root .desktop app-history .history-bet-footer-dates span:first-child::after {
    display: inline-block;
    content: "-";
    padding-left: 5px;
}
#root .desktop app-history .history-bet-footer-dates span:last-child::after {
    display: inline-block;
    content: ":";
}
#root .positive {
    color: var(--c-green);
}
#root .mobile tfoot .history-bet-footer div {
    color: var(--c-primary-c);
    display: flex;
    padding: 8px;
    justify-content: space-between;
}

/*--------- Last Betslip----------*/
/* Last betslip is a variant of bet history and needs very little additional styling as is*/
/* Though since it's just the last one, a more compact version of a bet history item could help to differentiate it from the actual bet history
   in which case it would be better to add all styling below to a separate file*/
app-last-betslip:empty{

}
app-last-betslip:empty + .last-betslip-heading {
    display:none;
}
app-last-betslip + .last-betslip-heading {
    order:-1
}
div.last-betslip form {
    display:none;
}
div.last-betslip {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;

}
.last-betslip a {
    order:3;
    width: 45px;
    position:relative;
    color:transparent;
}
.last-betslip a::before {
    content:'';
    color:var(--c-white);
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:var(--c-primary);
    background-image:url(/v1.002/r/images/site/icons/Close-tiny.svg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:24px;
}
.last-betslip app-history + div {
    width:calc(100% - 45px)
}
.last-betslip .last-betslip-reload-selections {
    margin:0;
    width:100%;
    background-color:var(--c-primary-c);
}
#root app-last-betslip .last-betslip .history-content-wrapper {
    margin-top:0
}
.last-betslip-heading div {
    padding:10px;
    text-align:center;
    font-size:1.1rem;
    background-color:var(--c-primary-c);
    color:var(--c-white);
    border-top:1px solid var(--c-tint-b)
}
#root .last-betslip .history-bet-wrapper {
    margin:0px
}
/*--------------------------------*/
.history-bet-status-refresh {
    width:100%;
    margin:0px;
    background-color:var(--c-primary-b)
}
.history-bet-content .history-bet-match-details .match-and-time .betslip-match-locked {
    filter:invert(1)
}