/* CFF Numbers - Lottery Machine History Panels
   Use this CSS for the panels that hold Lottery Games, Years, Months, Results, and Pager links.
*/

/* main panel shells */
[id$='pnlYears'],
[id$='pnlMonths'],
[id$='pnlResults'],
[id$='pnlNumberFeature']{
    box-sizing:border-box;
    position:relative;
    overflow:hidden;
    margin:18px 0;
    padding:20px;
    border:1px solid rgba(15,35,65,.22);
    border-radius:20px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.98), rgba(255,255,255,0) 32%),
        linear-gradient(180deg, #f9fbff 0%, #eaf1fb 58%, #dce7f5 100%);
    box-shadow:
        0 18px 38px rgba(20,38,66,.16),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(15,35,65,.08);
}

/* colored lottery-machine top rail */
[id$='pnlYears']::before,
[id$='pnlMonths']::before,
[id$='pnlResults']::before,
[id$='pnlNumberFeature']::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:8px;
    background:linear-gradient(90deg,#d71920 0%,#d71920 18%,#f8d449 18%,#f8d449 38%,#1674d1 38%,#1674d1 62%,#38a169 62%,#38a169 82%,#d71920 82%,#d71920 100%);
}

/* soft shine */
[id$='pnlYears']::after,
[id$='pnlMonths']::after,
[id$='pnlResults']::after,
[id$='pnlNumberFeature']::after{
    content:"";
    position:absolute;
    right:-60px;
    top:-70px;
    width:190px;
    height:190px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,0) 66%);
    pointer-events:none;
}

/* lottery name, year, month, and pager buttons */
[id$='pnlYears'] a,
[id$='pnlMonths'] a,
[id$='pnlPager'] a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    margin:6px;
    padding:9px 17px;
    border-radius:999px;
    border:1px solid rgba(15,35,65,.24);
    background:
        radial-gradient(circle at 30% 20%, #ffffff 0%, #ffffff 18%, #edf4fd 55%, #cbd9ea 100%);
    color:#17365d;
    text-decoration:none;
    font-size:15px;
    font-weight:800;
    letter-spacing:.02em;
    box-shadow:
        inset 3px 3px 8px rgba(255,255,255,.95),
        inset -5px -6px 12px rgba(40,60,90,.13),
        0 7px 14px rgba(18,35,61,.16);
    transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

[id$='pnlYears'] a:hover,
[id$='pnlMonths'] a:hover,
[id$='pnlPager'] a:hover{
    transform:translateY(-2px);
    filter:brightness(1.04);
    color:#111;
    background:
        radial-gradient(circle at 30% 20%, #ffffff 0%, #fff8d7 24%, #f8d449 72%, #d49b19 100%);
    box-shadow:
        inset 3px 3px 8px rgba(255,255,255,.85),
        inset -5px -6px 12px rgba(80,50,10,.18),
        0 11px 22px rgba(18,35,61,.22);
}

/* selected tab/page */
.is-active,
[id$='pnlPager'] .is-active{
    color:#fff!important;
    border-color:#8f0b10!important;
    background:
        radial-gradient(circle at 30% 20%, #fff 0%, #ffd5d7 14%, #d71920 62%, #8f0b10 100%)!important;
    text-shadow:0 1px 2px rgba(0,0,0,.48);
}

/* result table, if your repeater renders a table */
[id$='pnlResults'] table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 10px;
}

[id$='pnlResults'] tr{
    background:linear-gradient(180deg,#ffffff,#f3f7fc);
    box-shadow:0 8px 18px rgba(18,35,61,.12);
}

[id$='pnlResults'] th,
[id$='pnlResults'] td{
    padding:12px 14px;
    border-top:1px solid rgba(18,35,61,.12);
    border-bottom:1px solid rgba(18,35,61,.12);
    vertical-align:middle;
}

[id$='pnlResults'] th:first-child,
[id$='pnlResults'] td:first-child{
    border-left:1px solid rgba(18,35,61,.12);
    border-radius:15px 0 0 15px;
}

[id$='pnlResults'] th:last-child,
[id$='pnlResults'] td:last-child{
    border-right:1px solid rgba(18,35,61,.12);
    border-radius:0 15px 15px 0;
}

/* number balls */
.cff-num-ball{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    margin:3px;
    border-radius:50%;
    border:1px solid rgba(36,54,78,.28);
    background:radial-gradient(circle at 32% 24%,#fff 0%,#f7fbff 28%,#d9e5f4 70%,#aebed2 100%);
    box-shadow:
        inset 3px 3px 7px rgba(255,255,255,.95),
        inset -4px -6px 10px rgba(35,54,78,.18),
        0 5px 10px rgba(18,35,61,.20);
    color:#111;
    font-weight:900;
    font-size:16px;
    line-height:1;
    text-align:center;
}
/*
.cff-ball-power{
    color:#fff;
    border-color:#8f0b10;
    background:radial-gradient(circle at 32% 24%,#fff 0%,#ffd9db 24%,#d71920 72%,#8f0b10 100%);
    text-shadow:0 1px 2px rgba(0,0,0,.45);
}

.cff-ball-mega{
    color:#fff;
    border-color:#0b3f83;
    background:radial-gradient(circle at 32% 24%,#fff 0%,#dbeafe 24%,#1674d1 72%,#0b3f83 100%);
    text-shadow:0 1px 2px rgba(0,0,0,.45);
}

.cff-ball-lucky{
    color:#fff;
    border-color:#11632f;
    background:radial-gradient(circle at 32% 24%,#fff 0%,#dcfce7 24%,#25a55a 72%,#11632f 100%);
    text-shadow:0 1px 2px rgba(0,0,0,.45);
}
*/
[id$='pnlNumberFeature']{
    text-align:center;
    background:radial-gradient(circle at top,#fffbe7 0%,#eef6ff 58%,#dde8f5 100%);
}

[id$='pnlNumberFeature'] .cff-num-ball{
    width:48px;
    height:48px;
    font-size:20px;
    margin:5px;
}

[id$='pnlPager']{
    margin:18px 0;
    text-align:center;
}

@media(max-width:700px){
    [id$='pnlYears'],
    [id$='pnlMonths'],
    [id$='pnlResults'],
    [id$='pnlNumberFeature']{
        padding:14px;
        border-radius:14px;
    }

    [id$='pnlResults'] table,
    [id$='pnlResults'] tbody,
    [id$='pnlResults'] tr,
    [id$='pnlResults'] td{
        display:block;
        width:100%;
    }

    [id$='pnlResults'] tr{
        margin:0 0 12px;
        border-radius:14px;
        overflow:hidden;
    }

    [id$='pnlResults'] td{
        border-left:1px solid rgba(18,35,61,.12);
        border-right:1px solid rgba(18,35,61,.12);
        border-radius:0!important;
    }

    .cff-num-ball{
        width:34px;
        height:34px;
        font-size:15px;
    }
}