@font-face {
    font-family: 'DB-Helvethaica-X';
    src: url('db_helvethaica_x.eot');
    src: url('db_helvethaica_x.eot?#iefix') format('embedded-opentype'),
    url('db_helvethaica_x.woff') format('woff'),
    url('db_helvethaica_x.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: "DB-Helvethaica-X";
    background-color: white;
    background: url('../images/bg.jpg') no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.spector{
    margin-top: 40px;
}
.headtxt{
    font-family: "DB-Helvethaica-X";
    /*color: #4e5356;*/
    color: red;
    font-size: 5em;
    font-style: italic;
}
.subheadtxt {
    font-family: "DB-Helvethaica-X";
    /*color: #4e5356;*/
    color: red;
    font-size: 2.8em;
}
.attentxt{
    color: red;
    font-size: 1.9em;
}
.nopadding{
    padding:0px;
    margin:0px;
}
.background-fix{
    background-size:100% 100%;
    background-position:center top;
    background-repeat:no-repeat;
}
.text-blue{
    color:#004990;
    text-indent: 22px;
    font-weight:bold;
    font-size:14px;
}
.text-blue-pc{
    color:#004990;
    text-indent: 22px;
    font-weight:bold;
    font-size:25px;
}
.text-green{
    color:#50803B;
}
.rule {
    padding-bottom: 70px;
}
.rule h1{
    padding-top: 20px;
    font-size: 4em;
    color: red;
}
.rule p{
    font-size: 2.8em;
    color: red;
}
.rule img{
    width: 80%;
}
.rule x{
    font-size: 1.6em;
}
.rule x1{
    font-size: 2.3em;
}
.ranking h1 {
    padding-top: 20px;
    font-size: 4em;
}
.ranking p {
    font-size: 2.8em;
}
.pink-line {
    height: 5px;
    background: linear-gradient(to right, #C43F40, #C46A73); /* Standard syntax (must be last) */
}
/*-------- Color 7 day --------*/
/*-------- monday --------*/
.mon-button {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.mon-button input{
    position: absolute;

    opacity: 0;
    cursor: pointer;
}
.mon-checkmark {
    position: absolute;
    top: 6px;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #eee;
    border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.mon-button:hover input ~ .mon-checkmark {
    background-color: #ccc;
}
/* When the radio button is checked, add a color background */
.mon-button input:checked ~ .mon-checkmark {
    background: linear-gradient(90.17656578780088deg, rgba(245, 217, 90,1) 23.064453125%,rgba(244, 216, 89,1) 23.064453125%,rgba(240, 175, 83,1) 73.767578125%);
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.mon-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the indicator (dot/circle) when checked */
.mon-button input:checked ~ .mon-checkmark:after {
    display: block;
}
/* Style the indicator (dot/circle) */
.mon-button .mon-checkmark:after {
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
}
/*-------- tuesday --------*/
.tue-button {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.tue-button input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.tue-checkmark {
    position: absolute;
    top: 6px;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #eee;
    border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.tue-button:hover input ~ .tue-checkmark {
    background-color: #ccc;
}
/* When the radio button is checked, add a color background */
.tue-button input:checked ~ .tue-checkmark {
    background: linear-gradient(90deg, rgba(238, 172, 164,1) 20.09375%,rgba(237, 171, 163,1) 20.09375%,rgba(212, 94, 84,1) 80.09375%);
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.tue-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the indicator (dot/circle) when checked */
.tue-button input:checked ~ .tue-checkmark:after {
    display: block;
}
/* Style the indicator (dot/circle) */
.tue-button .tue-checkmark:after {
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
}
/*-------- wednesday --------*/
.wed-button {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 22px;
    color: white;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.wed-button input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.wed-checkmark {
    position: absolute;
    top: 6px;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #eee;
    border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.wed-button:hover input ~ .wed-checkmark {
    background-color: #ccc;
}
/* When the radio button is checked, add a color background */
.wed-button input:checked ~ .wed-checkmark {
    background: linear-gradient(90deg, rgba(89, 132, 111,1) 20.09375%,rgba(88, 131, 110,1) 20.09375%,rgba(0, 79, 56,1) 80.09375%);
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.wed-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the indicator (dot/circle) when checked */
.wed-button input:checked ~ .wed-checkmark:after {
    display: block;
}
/* Style the indicator (dot/circle) */
.wed-button .wed-checkmark:after {
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
}
/*-------- thursday --------*/
.thu-button {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.thu-button input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.thu-checkmark {
    position: absolute;
    top: 6px;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #eee;
    border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.thu-button:hover input ~ .thu-checkmark {
    background-color: #ccc;
}
/* When the radio button is checked, add a color background */
.thu-button input:checked ~ .thu-checkmark {
    background: linear-gradient(90deg, rgba(255, 173, 5,1) 20.09375%,rgba(254, 172, 5,1) 20.09375%,rgba(183, 80, 28,1) 80.09375%);
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.thu-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the indicator (dot/circle) when checked */
.thu-button input:checked ~ .thu-checkmark:after {
    display: block;
}
/* Style the indicator (dot/circle) */
.thu-button .thu-checkmark:after {
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
}
/*-------- thursday --------*/
.thu-button {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.thu-button input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.thu-checkmark {
    position: absolute;
    top: 6px;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #eee;
    border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.thu-button:hover input ~ .thu-checkmark {
    background-color: #ccc;
}
/* When the radio button is checked, add a color background */
.thu-button input:checked ~ .thu-checkmark {
    background: linear-gradient(90.17656578780088deg, rgba(245, 217, 90,1) 23.064453125%,rgba(244, 216, 89,1) 23.064453125%,rgba(240, 175, 83,1) 73.767578125%);
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.thu-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the indicator (dot/circle) when checked */
.thu-button input:checked ~ .thu-checkmark:after {
    display: block;
}
/* Style the indicator (dot/circle) */
.thu-button .thu-checkmark:after {
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
}
/*-------- friday --------*/
.fri-button {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 22px;
    color: white;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.fri-button input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.fri-checkmark {
    position: absolute;
    top: 6px;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #eee;
    border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.fri-button:hover input ~ .fri-checkmark {
    background-color: #ccc;
}
/* When the radio button is checked, add a color background */
.fri-button input:checked ~ .fri-checkmark {
    background: linear-gradient(90deg, rgba(79, 170, 164,1) 20.09375%,rgba(78, 169, 163,1) 20.09375%,rgba(22, 77, 110,1) 80.09375%);
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.fri-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the indicator (dot/circle) when checked */
.fri-button input:checked ~ .fri-checkmark:after {
    display: block;
}
/* Style the indicator (dot/circle) */
.fri-button .fri-checkmark:after {
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
}
/*-------- saturday --------*/
.sat-button {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 22px;
    color: white;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.sat-button input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.sat-checkmark {
    position: absolute;
    top: 6px;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #eee;
    border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.sat-button:hover input ~ .sat-checkmark {
    background-color: #ccc;
}
/* When the radio button is checked, add a color background */
.sat-button input:checked ~ .sat-checkmark {
    background: linear-gradient(90deg, rgba(134, 90, 157,1) 20.09375%,rgba(133, 89, 156,1) 20.09375%,rgba(108, 55, 130,1) 80.09375%);
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.sat-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the indicator (dot/circle) when checked */
.sat-button input:checked ~ .sat-checkmark:after {
    display: block;
}
/* Style the indicator (dot/circle) */
.sat-button .sat-checkmark:after {
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
}
/*-------- sunday --------*/
.sun-button {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 19px;
    color: white;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.sun-button input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.sun-checkmark {
    position: absolute;
    top: 6px;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #eee;
    border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.sun-button:hover input ~ .sun-checkmark {
    background-color: #ccc;
}
/* When the radio button is checked, add a color background */
.sun-button input:checked ~ .sun-checkmark {
    background: linear-gradient(90deg, rgba(202, 103, 93,1) 20.09375%,rgba(201, 102, 92,1) 20.09375%,rgba(189, 63, 50,1) 80.09375%);
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.sun-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the indicator (dot/circle) when checked */
.sun-button input:checked ~ .sun-checkmark:after {
    display: block;
}
/* Style the indicator (dot/circle) */
.sun-button .sun-checkmark:after {
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
}
.mon-curve {border: 1px transparent;border-radius: 40px;padding-top:5px;padding-left:20px;padding-bottom:5px;padding-right:10px;background: linear-gradient(179.00653114371744deg, rgba(245, 217, 90,1) 16.34297520661157%,rgba(244, 216, 89,1) 16.34297520661157%,rgba(240, 175, 83,1) 64.00137741046832%);}
.tue-curve{border: 1px transparent;border-radius: 40px;padding-top:5px;padding-left:20px;padding-bottom:5px;padding-right:10px;background: linear-gradient(179.74704014462918deg, rgba(238, 172, 164,1) 12.579201101928376%,rgba(237, 171, 163,1) 12.579201101928376%,rgba(212, 94, 84,1) 74.9758953168044%);}
.wed-curve{border: 1px transparent;border-radius: 40px;padding-top:5px;padding-left:20px;padding-bottom:5px;padding-right:10px;background: linear-gradient(179.74704014462918deg, rgba(89, 132, 111,1) 12.579201101928376%,rgba(88, 131, 110,1) 12.579201101928376%,rgba(0, 79, 56,1) 74.9758953168044%);}
.thu-curve{border: 1px transparent;border-radius: 40px;padding-top:5px;padding-left:20px;padding-bottom:5px;padding-right:10px;background: linear-gradient(179.74704014462918deg, rgba(255, 173, 5,1) 12.579201101928376%,rgba(254, 172, 5,1) 12.579201101928376%,rgba(183, 80, 28,1) 74.9758953168044%);}
.fri-curve{border: 1px transparent;border-radius: 40px;padding-top:5px;padding-left:20px;padding-bottom:5px;padding-right:10px;background: linear-gradient(179.74704014462918deg, rgba(79, 170, 164,1) 12.579201101928376%,rgba(78, 169, 163,1) 12.579201101928376%,rgba(22, 77, 110,1) 74.9758953168044%);}
.sat-curve{border: 1px transparent;border-radius: 40px;padding-top:5px;padding-left:20px;padding-bottom:5px;padding-right:10px;background: linear-gradient(179.74704014462918deg, rgba(134, 90, 157,1) 12.579201101928376%,rgba(133, 89, 156,1) 12.579201101928376%,rgba(108, 55, 130,1) 74.9758953168044%);}
.sun-curve{border: 1px transparent;border-radius: 40px;padding-top:5px;padding-left:20px;padding-bottom:5px;padding-right:10px;background: linear-gradient(179.74704014462918deg, rgba(202, 102, 92,1) 12.579201101928376%,rgba(201, 101, 91,1) 12.579201101928376%,rgba(188, 61, 48,1) 74.9758953168044%);}
/*-------- End Color 7 day --------*/
#blackAlpha{
    background-color:#000000;
    opacity:0.5;
    z-index:999998;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    display:none;
}
#popmodal {
    position : fixed;
    top: 0px;
    left: 0px;
    z-index: 999999;
}
#popmodalpc {
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    z-index:999999;
}

#popmodalmobile{
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    z-index:999999;
}
#picDay{
    padding-top: 20px;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
    .headtxt{
        font-family: "DB-Helvethaica-X";
        color: #4e5356;
        font-size: 3.5em;
        font-style: italic;
    }
    .subheadtxt {
        font-family: "DB-Helvethaica-X";
        color: #4e5356;
        font-size: 1.6em;
    }
}
/* Responsive Mobile Size  */
/* เนƒเธซเน‰เนƒเธŠเน‰เธ„เนˆเธฒเธ™เธตเน‰เน€เธกเธทเนˆเธญเธกเธตเธซเธ™เน‰เธฒเธˆเธญเธ‚เธ™เธฒเธ” 320 px เน„เธ›เธˆเธ™เธ–เธถเธ‡ 736px เธ‚เธ™เธฒเธ”เธ‚เธญเธ‡เธˆเธญ iPhone 5 - iPhone 8 Plus */
@media only screen and (min-device-width : 320px) and (max-device-width : 736px) {
    .headtxt{
        font-family: "DB-Helvethaica-X";
        color: #4e5356;
        font-size: 5em;
        font-style: italic;
    }
    .subheadtxt {
        font-family: "DB-Helvethaica-X";
        color: #4e5356;
        font-size: 2.5em;
    }
    .mon-checkmark {
        top: 20px;
    }
    .tue-checkmark {
        top: 20px;
    }
    .wed-checkmark {
        top: 20px;
    }
    .thu-checkmark {
        top: 20px;
    }
    .fri-checkmark {
        top: 20px;
    }
    .sat-checkmark {
        top: 20px;
    }
    .sun-checkmark {
        top: 20px;
    }
}

.tbl-ranking{
    font-size:18px;
}

table img{
    border-radius: 50%;
    width:35px;
    padding:5px;
}

#thisUserContent{
    font-size:20px;
}