/**
Update history
--------------

2022-06-14:



*/

:root {
    --navigation-height: 50px
}

html {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    font-family: Helvetica, Arial, sans-serif;
    scroll-behavior: smooth
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box
}

body {
    text-align: center;
    padding: 0;
    margin: 0;
    color: #ccc;
    background-color: #000;
    line-height: 1.4;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none
}

a {
    color: #fff;
    font-style: normal;
    text-decoration: none
}

a:hover {
    color: #ff0;
    font-weight: 700;
    text-decoration: none
}

a.x {
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 2px #666
}

a.x:hover {
    color: red;
    font-weight: 700;
    text-decoration: underline;
    text-shadow: 1px 1px 2px #000
}

.tt[data-tt] {
    position: relative;
    margin: 3px 0;
}

.tt[data-tt]:before {
    content: 'Hub: 'attr(data-tt);
    position: absolute;
    left: initial;
    right: 0;
    top: 125%;
    transform: none;
    text-align: left;
    color: #ccc;
    text-shadow: 0 0 0 #ccc;
    background-color: rgba(0, 0, 0, .8);
    padding: 5px;
    border: 1px solid #060;
    border-radius: 5px;
    z-index: 9;
    visibility: hidden;
}

.tt[data-tt]:hover:before {
    visibility: visible;
    animation: fade_in_and_out;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fade_in_and_out {
    0% {
        opacity: 0
    }
    5% {
        opacity: 1
    }
    80% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

p {
    padding: 5px 0;
    text-indent: 2rem
}

p::first-letter {
    font-size: 1.3rem;
    font-weight: 400;
    font-style: italic;
    margin-right: 2px
}

#main_flex_container {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #000
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10001;
    font-size: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--navigation-height);
    background-image: linear-gradient(to right, #fcc201, #dba514, #ff0);
    border-bottom: 1px solid #ff0
}

header>* {
    margin: 5px
}

header>.nosup_text {
    display: block;
    color: #ff0;
    font-weight: 700;
    text-shadow: 2px 2px 2px #b48a00
}

header>.nosup_text:hover {
    text-shadow: 2px 2px 2px #775b00
}

#menu_icon_container {
    display: inline-block;
    cursor: pointer;
    outline: 0
}

.menu_bar1,
.menu_bar2,
.menu_bar3 {
    width: 40px;
    height: 5px;
    background-color: #ff0;
    box-shadow: 1px 1px 1px #b48a00;
    margin: 5px 0;
    transition: .5s
}

.menu_closed .menu_bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 5px);
    transform: rotate(45deg) translate(5px, 10px)
}

.menu_closed .menu_bar2 {
    opacity: 0
}

.menu_closed .menu_bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(-45deg) translate(5px, -10px)
}

#footer_webinfo {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    padding: 10px;
    color: #fff
}

#footer_webinfo>div:first-child {
    text-align: left
}

#footer_webinfo>div:last-child {
    text-align: right
}

#form-simple-search {
    display: flex;
    flex-direction: row
}

#form-simple-search>* {
    /* margin: 0 5px; */
    margin: 5px;
}

#form-simple-search>:nth-child(3) {
    flex-grow: 1
}

#formpencarian {
    display: grid;
    grid-template-columns: auto 1fr
}

#formpencarian>h3 {
    grid-column: 1/3;
    display: block;
    font-size: 1.2rem;
    text-align: center
}

#formpencarian>* {
    margin: 5px
}

#formpencarian input,
#formpencarian select {
    padding: 5px
}

#formpencarian #btn_submit {
    grid-column: 1/3;
    padding: 10px
}

#header_logos {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding-top: 5px;
    padding-bottom: 10px
}

#header_logos>* {
    display: flex;
    justify-content: center;
    align-items: center
}

#nosup_title_container #nosup_text {
    font-size: 2rem;
    display: block;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 1px 1px 1px #222, 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de
}

#nosup_title_container #nosup_text::before {
    content: 'Nomor Super'
}

#pasar_nocan {
    font-size: 1.4rem;
    color: #fff;
    display: block;
    text-shadow: 1px 1px 3px #fff
}

#pasar_nocan::before {
    content: 'Pasar Nomor Cantik Indonesia'
}

#melayani_sejak {
    font-size: .8rem;
    display: block;
    text-shadow: 1px 1px 3px #fff
}

#melayani_sejak::before {
    content: 'Melayani Komunitas Nomor Cantik Sejak 2007'
}

#bottom_links {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #666
}

#bottom_links a {
    padding: 5px 10px;
    color: #ccc;
    background-color: #1d2a3d;
    font-weight: 700;
    flex-grow: 1;
    text-decoration: none;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666
}

#bottom_links a:hover {
    color: #fff;
    background-color: #1671dc;
    text-decoration: none
}

#operator_list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: stretch;
    /* fill full height and width, for border */
}

#operator_list a {
    border-radius: 5px;
    background-color: rgba(100, 100, 100, .5);
    margin: 5px;
    width: 110px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center
}

#operator_list a:hover {
    background-color: #ccc;
    transition: background 1s
}

#operator_list img {
    filter: drop-shadow(0 0 15px #666);
    max-width: 100px;
    max-height: 50px
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 5px
}

td,
th {
    padding: 5px
}

table.gridlines {
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
    text-indent: 0
}

table.gridlines tr:nth-child(even) {
    background-color: #0f0f0f
}

table.gridlines tr:nth-child(odd) {
    background-color: #2f2f2f
}

table.gridlines th {
    background-color: #3f3f3f;
    color: #bbb;
    font-weight: 700
}

table.gridlines td {
    color: #ccc
}

table.gridlines td,
table.gridlines th {
    border: 1px solid #444;
    padding: 5px;
    text-align: center
}

.page_index {
    text-align: right;
    color: #ccc;
    background-color: #333;
    border: 1px solid #666;
    border-radius: 10px;
    padding: 10px;
    margin: 5px
}

#nomor_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: 5px 0;
    grid-auto-rows: minmax(min-content, max-content)
}

.box {
    text-align: right;
    line-height: 1.2;
    border: 2px solid #555;
    border-radius: 5px;
    padding: 0;
    margin: 0
}

.harga {
    color: #fff;
    text-shadow: 0 0 2px #000, 2px 2px 2px #000;
    padding: 5px;
    border-radius: 5px 5px 0 0;
    margin-bottom: 10px;
    text-align: right
}

button,
input[type=submit] {
    display: inline-block;
    border: 1px solid #aaa;
    border-radius: 0.5rem;
    padding: 0.75rem 2.5rem;
    margin: 0.5rem;
    cursor: pointer;
    /* font-weight: 700;
    text-decoration: none; */
    white-space: nowrap;
    color: #fff;
    /* #000; */
    background-color: #01c9ea;
    /* #ff0; */
    /* box-shadow: 3px 3px 3px #333; */
}

input[type=submit]:hover {
    color: #fff;
    background-color: #f00;
}

.btn_search_submit {
    margin-top: 1.0rem;
    /* width: 30%; */
    color: #fff;
    background-color: #01c9ea;
    display: inline-block;
    /* padding-top: 0.625rem;
    padding-right: 1.25rem;
    padding-bottom: 0.6875rem;
    padding-left: 1.25rem; */
    padding: 0.75rem 2.5rem;
    /* font-size: .875rem;
    line-height: 1.0625rem; */
    text-align: center;
    font-weight: bold;
    border-radius: 0.5rem;
    transition: background-color .2s, border .2s, color .2s;
}

.btn_search_submit:hover {
    color: #fff;
    background-color: #f00;
}

.page_index_container {
    /* display: inline-flex;  
  flex-wrap: wrap; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3.0rem, 1fr));
    gap: 5px;
    /* column and row gap */
}

.page_index_container>* {
    border: 1px solid #666;
    /* center */
    padding: 0.5rem 0;
    text-align: center;
    border-radius: 0.5rem;
}

.page_index_container>a {
    color: #fff;
    background-color: transparent;
    border: 1px solid #ccc;
}

.page_index_container>a:hover {
    color: #f00;
    background-color: transparent;
    border: 1px solid #fff;
}

.page_index_container>span {
    color: #f00;
    background-color: #fff;
    /* border: 1px solid #f00; */
}

#content_title {
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    color: #a6afba;
    background-color: #1e2834;
    font-weight: 400;
    border-top: 1px solid #454f5c;
    border-bottom: 1px solid #454f5c
}

#content_body {
    padding: 10px;
    text-align: left;
    color: #ccc;
    background-color: #000
}

.content_sub_title {
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    color: #a6afba;
    background-color: #1e2834;
    font-weight: 400;
    border-top: 1px solid #454f5c;
    border-bottom: 1px solid #454f5c
}

em {
    font-style: italic;
    font-weight: 700
}

ol {
    counter-reset: none
}

ol,
ul {
    list-style-position: outside;
    margin: 1.5em 10px 1.5em 15px
}

li:not(:last-child) {
    margin-bottom: .5rem
}

ol.nested {
    counter-reset: myol;
    list-style-type: none;
    margin-left: 0
}

ol.nested>li:before {
    counter-increment: myol;
    content: counter(myol) ". "
}

ol.nested>li>ol {
    counter-reset: myol2;
    list-style-type: none
}

ol.nested>li>ol>li:before {
    counter-increment: myol2;
    content: counter(myol) "."counter(myol2) ". "
}

ol.nested>li>ol>li>ol {
    counter-reset: myol3;
    list-style-type: none
}

ol.nested>li>ol>li>ol>li:before {
    counter-increment: myol3;
    content: counter(myol) "."counter(myol2) "."counter(myol3) ". "
}

.height_separator {
    height: 10px
}

#wisdom_words {
    text-align: center;
    padding: 10px;
    color: #a6afba;
    background-color: #1e2834;
    font-weight: 400;
    border-top: 1px solid #454f5c;
    border-bottom: 1px solid #454f5c;
    margin-bottom: 10px
}

#operatorTabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 0;
    /* border-top: 1px solid #294a6f */
}

.tabContent.widergrid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    /* grid-gap: 5px 5px !important; */
}

.tabContent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: 5px 0;
    padding: 10px 0;
    background-color: #000
}

.tabContent>a {
    color: #ccc;
    background-color: #000;
    text-align: right;
    display: block;
    margin: 0
}

.tabContent>a:hover {
    background-color: #333;
    text-shadow: none
}

.tabContent>a>span {
    color: #0f0;
    text-shadow: none;
    font-weight: 700;
    font-size: .8rem;
    background-color: #282c34;
    border: 1px solid #666;
    display: inline-block;
    padding: 3px;
    margin-left: 3px
}

.tabContent>a>span.rb::after {
    content: ' rb'
}

.tabContent>a>span.jt {
    color: #fff;
    text-shadow: none;
    background: linear-gradient(to right bottom, red, #600, #c00);
    border-radius: 5px 0 5px 0;
    border: 1px solid #a00
}

.tabContent>a>span.jt::after {
    content: ' jt'
}

.tabContent>a>span.xx {
    color: #000;
    text-shadow: none;
    background-color: red;
    border-radius: 3px;
    background: linear-gradient(to right bottom, gold, khaki, #daa520);
    border: 1px solid #ff0
}

.tabContent>a>span.m {
    color: #000;
    text-shadow: none;
    background-color: red;
    border-radius: 3px;
    background: linear-gradient(to right bottom, gold, khaki, #daa520);
    border: 1px solid #ff0
}

.tabContent>a>span.m::after {
    content: ' M'
}

.tabContent>a>h4 {
    color: #0f0;
    text-shadow: none;
    font-weight: 700;
    font-size: .8rem;
    background-color: #282c34;
    border-radius: 0;
    border: 1px solid #666;
    display: inline-block;
    padding: 3px;
    margin-left: 3px
}

.tabContent>a>h4::after {
    content: ' rb'
}

.tabContent>a>h3 {
    color: #fff;
    text-shadow: none;
    font-weight: 700;
    font-size: .8rem;
    background: linear-gradient(to right bottom, red, #600, #c00);
    border-radius: 5px 0 5px 0;
    border: 1px solid #a00;
    display: inline-block;
    padding: 3px;
    margin-left: 3px
}

.tabContent>a>h3::after {
    content: ' jt'
}

.tabContent>a>h2 {
    color: #000;
    text-shadow: none;
    background-color: red;
    border-radius: 3px;
    background: linear-gradient(to right bottom, gold, khaki, #daa520);
    border: 1px solid #ff0;
    font-weight: 700;
    font-size: .8rem;
    display: inline-block;
    padding: 3px;
    margin-left: 3px
}

.tabContent>a>h2::after {
    content: ' jt'
}

.tabContent>a>h1 {
    color: #000;
    text-shadow: none;
    background-color: red;
    border-radius: 3px;
    background: linear-gradient(to right bottom, gold, khaki, #daa520);
    border: 1px solid #ff0;
    font-weight: 700;
    font-size: .8rem;
    display: inline-block;
    padding: 3px;
    margin-left: 3px
}

.tabContent>a>h1::after {
    content: ' M'
}

#all_out_nomor_list_container {
    display: grid
}

#nomor_tabs #nomor_list_container>*,
#operatorTabs input[type=radio],
input[type=radio].op_selector {
    display: none
}

#operatorTabs>* {
    flex: 1 1 0;
    padding: 7px 0;
    color: #fff;
    background-color: #0b3361;
    background: linear-gradient(to bottom, #036, #025, #014);
    /* border-radius: 0; */
    border: 1px solid #294a6f;
    outline: 0;
    width: 100%;
    height: 100%
}

#radio_op_10:checked~#operatorTabs>label:nth-child(10),
#radio_op_11:checked~#operatorTabs>label:nth-child(11),
#radio_op_12:checked~#operatorTabs>label:nth-child(12),
#radio_op_13:checked~#operatorTabs>label:nth-child(13),
#radio_op_14:checked~#operatorTabs>label:nth-child(14),
#radio_op_15:checked~#operatorTabs>label:nth-child(15),
#radio_op_1:checked~#operatorTabs>label:first-child,
#radio_op_2:checked~#operatorTabs>label:nth-child(2),
#radio_op_3:checked~#operatorTabs>label:nth-child(3),
#radio_op_4:checked~#operatorTabs>label:nth-child(4),
#radio_op_5:checked~#operatorTabs>label:nth-child(5),
#radio_op_6:checked~#operatorTabs>label:nth-child(6),
#radio_op_7:checked~#operatorTabs>label:nth-child(7),
#radio_op_8:checked~#operatorTabs>label:nth-child(8),
#radio_op_9:checked~#operatorTabs>label:nth-child(9) {
    background-color: #1671dc;
    /* background: linear-gradient(to right bottom, red, #600, red); */
    background: linear-gradient(to bottom, #f00, #a00, #600);
    /* border: 1px solid #cc0 */
}

label[data-opid="110"]:before {
    content: 'Ooredoo IM3'
}

label[data-opid="120"]:before {
    content: 'Ooredoo Mentari'
}

label[data-opid="150"]:before {
    content: 'Telkomsel Kartu As'
}

label[data-opid="160"]:before {
    content: 'XL Pasca'
}

label[data-opid="180"]:before {
    content: 'XL Prabayar'
}

label[data-opid="190"]:before {
    content: 'Three Prabayar'
}

label[data-opid="195"]:before {
    content: 'Three Pasca'
}

label[data-opid="577"]:before {
    content: 'Telkomsel Simpati'
}

label[data-opid="580"]:before {
    content: 'Smartfren Prabayar'
}

label[data-opid="581"]:before {
    content: 'AXIS'
}

label[data-opid="585"]:before {
    content: 'Smartfren Pasca'
}

label[data-opid="600"]:before {
    content: 'Telkomsel Kartu Halo'
}

label[data-opid="610"]:before {
    content: 'Ooredoo Matrix'
}

label[data-opid="630"]:before {
    content: 'Telkomsel Loop'
}

label[data-opid="900"]:before {
    content: 'Indosat Ooredoo'
}

label.tab {
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #999;
    border-radius: 10px 10px 0 0;
}

label.tab:hover {
    background-color: #1671dc;
    /* background: linear-gradient(to right bottom, #090, #060, #090); */
    background: linear-gradient(to bottom, #090, #060, #090);
    border: 1px solid #f0f
}

#radio_op_10:checked~#nomor_list_container>.tabContent:nth-child(10),
#radio_op_11:checked~#nomor_list_container>.tabContent:nth-child(11),
#radio_op_12:checked~#nomor_list_container>.tabContent:nth-child(12),
#radio_op_13:checked~#nomor_list_container>.tabContent:nth-child(13),
#radio_op_14:checked~#nomor_list_container>.tabContent:nth-child(14),
#radio_op_15:checked~#nomor_list_container>.tabContent:nth-child(15),
#radio_op_1:checked~#nomor_list_container>.tabContent:first-child,
#radio_op_2:checked~#nomor_list_container>.tabContent:nth-child(2),
#radio_op_3:checked~#nomor_list_container>.tabContent:nth-child(3),
#radio_op_4:checked~#nomor_list_container>.tabContent:nth-child(4),
#radio_op_5:checked~#nomor_list_container>.tabContent:nth-child(5),
#radio_op_6:checked~#nomor_list_container>.tabContent:nth-child(6),
#radio_op_7:checked~#nomor_list_container>.tabContent:nth-child(7),
#radio_op_8:checked~#nomor_list_container>.tabContent:nth-child(8),
#radio_op_9:checked~#nomor_list_container>.tabContent:nth-child(9) {
    display: grid
}

div[data-op]:not([data-op=""]) {
    border-radius: 10px;
    display: block;
    padding: 5px 3px;
    border: none !important;
    color: #ccc;
    text-shadow: 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000
}

div[data-op="110"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_110.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

div[data-op="110"]:hover {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_110.svg) 3px center/30px no-repeat, linear-gradient(to right, #ccc, #000 60px)
}

div[data-op="120"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_120.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

div[data-op="150"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_150.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

div[data-op="150"]:hover {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_150.svg) 3px center/30px no-repeat, linear-gradient(to right, #ccc, #000 60px)
}

div[data-op="160"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_160.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

div[data-op="160"]:hover {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_160.svg) 3px center/30px no-repeat, linear-gradient(to right, #ccc, #000 60px)
}

div[data-op="180"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_180.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

div[data-op="180"]:hover {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_180.svg) 3px center/30px no-repeat, linear-gradient(to right, #ccc, #000 60px)
}

div[data-op="190"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_190.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

div[data-op="190"]:hover {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_190.svg) 3px center/30px no-repeat, linear-gradient(to right, #ccc, #000 60px)
}

div[data-op="195"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_195.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

div[data-op="195"]:hover {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_195.svg) 3px center/30px no-repeat, linear-gradient(to right, #ccc, #000 60px)
}

div[data-op="577"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_577.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

div[data-op="577"]:hover {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_577.svg) 3px center/30px no-repeat, linear-gradient(to right, #ccc, #000 60px)
}

div[data-op="580"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_580.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

div[data-op="580"]:hover {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_580.svg) 3px center/30px no-repeat, linear-gradient(to right, #ccc, #000 60px)
}

div[data-op="581"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_581.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

div[data-op="585"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_585.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

div[data-op="585"]:hover {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_585.svg) 3px center/30px no-repeat, linear-gradient(to right, #ccc, #000 60px)
}

div[data-op="600"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_600.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

div[data-op="600"]:hover {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_600.svg) 3px center/30px no-repeat, linear-gradient(to right, #ccc, #000 60px)
}

div[data-op="610"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_610.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

div[data-op="610"]:hover {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_610.svg) 3px center/30px no-repeat, linear-gradient(to right, #ccc, #000 60px)
}

div[data-op="630"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_630.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

div[data-op="900"] {
    background: url(https://storage.googleapis.com/nomorsuper-static/images/svg/operator_logo_900.svg) 3px center/30px no-repeat, linear-gradient(to right, #666, #000 60px)
}

a[data-m] {
    color: #ccc
}

a[data-m]:hover {
    color: #ff0
}

#sortbynomor:checked+label,
#sortbyoperator:checked+label,
#sortbypriceasc:checked+label,
#sortbypricedesc:checked+label {
    background-color: #1671dc;
    background: linear-gradient(to right bottom, red, #600, red);
    border: 1px solid #cc0
}

@media screen and (max-width:480px) {
    body {
        padding-top: 0
    }
    #operator_list a {
        width: 70px;
        height: 45px
    }
    #operator_list img {
        max-width: 60px;
        max-height: 35px
    }
}

@media screen and (max-width:640px) {
    #footer_webinfo {
        flex-flow: column nowrap;
        align-items: center
    }
    #footer_webinfo>div {
        text-align: center !important;
        padding: 5px 0
    }
}

#boxes_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: 5px 0;
    grid-auto-rows: minmax(min-content, max-content)
}

.box_price {
    display: flex;
    flex-flow: column nowrap
}

.box_price>* {
    display: block;
    text-align: right;
    /* 2022-06-15: confirmed, fix Google error "Clickable elements too close together" */
    padding: 10px 5px 2px 0;
    border-right: 1px solid #333
}

.box_price>:last-child {
    border-bottom: 1px solid #333
}

.rp:before,
.rpjt:before,
.rpxx:before {
    content: 'Rp '
}

.rpxx {
    color: #000;
    text-shadow: none;
    background-color: gold;
    background: linear-gradient(to right bottom, gold, khaki, #daa520);
    border-radius: 3px;
    padding: 0 5px
}

.rpjt {
    color: #fff;
    text-shadow: none;
    background-color: red;
    background: linear-gradient(to right bottom, red, #600, #c00);
    border-radius: 5px 0 5px 0;
    padding: 0 5px
}

.rp {
    color: #0f0;
    text-shadow: none;
    font-weight: 700;
    font-size: .8rem;
    background-color: #282c34;
    border-radius: 0;
    border: 1px solid #666;
    display: inline-block;
    padding: 3px;
    margin-left: 3px
}

.margin-top-bottom {
    margin: 10px 0
}

.adsense_box {
    margin: 10px 0
}

.this_nomor_asli_big {
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    text-shadow: 2px 2px 2px red
}

.this_nomor_formatted_price {
    color: #ff0;
    font-weight: 700
}

#nav-content {
    left: 100%;
    top: var(--navigation-height);
    height: calc(100vh - var(--navigation-height));
    width: 100%;
    position: fixed;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, .9);
    overflow-x: hidden;
    transition: .5s
}

#search_button {
    margin: 5px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 490 490'><path fill='none' stroke='%23630' stroke-width='33' stroke-linecap='round' d='m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110'/></svg>");
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: center
}

#search_button.menu_closed {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='25' height='21' viewBox='0 0 434 364'><g transform='matrix(-1 0 0 1 434.42519 0)'><path id='A' d='M182-.5h100L100 182H0z' fill='%23630'/><use transform='matrix(1 0 0 -1 0 363.5)' width='434' height='364' xlink:href='%23A'/><path d='M66.73 132h367.696v100H66.73z' fill='%23630'/></g></svg>")
}

#scroll_to_top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: #fff;
    background-image: linear-gradient(30deg, #fcc201, #dba514, #ff0);
    box-shadow: 0 0 5px #000;
    width: var(--navigation-height);
    height: var(--navigation-height);
    border-radius: 50%
}

#scroll_to_top>img {
    filter: drop-shadow(1px 1px 2px #630)
}

#scroll_to_top:hover {
    box-shadow: 0 0 5px #ff0
}

#parent_container_recent_viewed_nomor_list {
    flex-grow: 4
}

#parent_container_recent_viewed_nomor_list>:nth-child(1) {
    display: block;
    font-size: 1.2rem;
    text-align: center
}

#menu_footer {
    color: #fff;
    background-color: #666;
    padding: 1rem 0
}


/* 2021-08-06: new styling */

#main-search-container {
    padding: 5px;
    margin: 5px;
    border: 1px solid #777;
    border-radius: 10px;
}

.cbs_image_container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 10px;
    margin: 10px 0 !important;
}

.a_cb_container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    /* always put padding for border-radius when 'checked' */
}

.a_cb_container>input {
    float: right;
}

.a_cb_container>label {
    /* float: left; */
    width: 100px;
    margin-left: 5px;
    /* do not touch checkbox */
    text-align: left;
    /* push image to left (not center) */
}

input[type="checkbox"][class="inp_cb_img"]+label>img {
    padding: 0;
    margin: 0;
    /* background-color: #f00; */
    /* filter to glow to make sure to make BLACK color visible */
    /* filter: grayscale(100%) drop-shadow(0 0 3px #fff) !important; */
    /* filter: drop-shadow(0 0 2px #aaa) !important; */
    filter: none !important;
    /* filter: none !important; */
    /* filter: grayscale(100%) !important; */
    /* max-width: 100px;
    max-height: 50px; */
}

input[type="checkbox"][class="inp_cb_img"]:checked+label>img {
    padding: 0;
    margin: 0;
    /* background-color: #0f0; */
    filter: drop-shadow(0 0 10px #ff0) !important;
}

input[type="checkbox"][class="inp_cb_img"]+label>img:hover {
    filter: drop-shadow(0 0 10px #0f0) !important;
}

.choose_operator_label {
    text-align: center;
    padding: 10px 0 5px 0;
}

.choose_operator_label>* {
    border: 1px solid #666;
    border-radius: 10px;
    margin: 0;
    padding: 5px 10px;
}

.checked_cb_parent {
    border: 1px solid #ff0;
    border-radius: 10px;
    margin: -1px;
    /* avoid increase width/height when use border: 1px */
}

#operator_list {
    display: grid !important;
    /* 90px = 3 columns in 320px width screen */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
}

.a_cb_container {
    display: block !important;
    /* make Checkbox float right */
    border: 1px solid #222;
    border-radius: 7px;
    margin: 0 !important;
    justify-content: unset !important;
    /* same like grid item width */
    width: unset !important;
    /* make sure all items same height regardless which position */
    height: 50px !important;
    padding: 2px !important;
    background-image: none;
    /* allow children to use position: absolute; */
    position: relative;
}

a.a_cb_container.checked_cb_parent[data-id="150"] {
    /* Kartu As */
    /* background-image: url(images/svg/gradient_red_to_dark_red.svg); */
    /* background: linear-gradient(to bottom, #c33 30%, #a33); */
    background-color: #a00;
}

a.a_cb_container.checked_cb_parent[data-id="577"] {
    /* Simpati */
    /* background-image: url(images/svg/gradient_red_to_white.svg); */
    background: linear-gradient(to bottom, #c00 50%, #fff 50%);
}

a.a_cb_container.checked_cb_parent[data-id="600"] {
    /* Kartu Halo */
    /* background-image: url(images/svg/gradient_kartu_halo.svg); */
    /* background: linear-gradient(to bottom, #f00 30%, #a00); */
    background: linear-gradient(to bottom, #700 40%, #f55 40%, #700 80%);
    /* background: linear-gradient(217deg, rgba(255,0,0,1), rgba(255, 0, 0, 0) 50.71%),
                linear-gradient(127deg, rgba(0,255,0,1), rgba(0, 255, 0, 0) 50.71%),
                linear-gradient(336deg, rgba(0,0,255,1), rgba(0,0,255, 0) 50.71%); */
    /* background: linear-gradient(red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); */
}

a.a_cb_container.checked_cb_parent[data-id="180"] {
    /* XL prabayar */
    background-color: #fff;
}

a.a_cb_container.checked_cb_parent[data-id="581"] {
    /* AXIS */
    background-color: #326;
}

a.a_cb_container.checked_cb_parent[data-id="110"] {
    /* IM3 */
    background-color: #ff0;
}

a.a_cb_container.checked_cb_parent[data-id="190"] {
    /* Tri prabayar */
    background-color: #f0f;
}

a.a_cb_container.checked_cb_parent[data-id="580"] {
    /* smartfren prabayar */
    background-color: #55f;
}

a.a_cb_container.checked_cb_parent[data-id="160"] {
    /* XL Prioritas pascabayar */
    background: linear-gradient(to bottom, white 30%, black);
}

a.a_cb_container.checked_cb_parent[data-id="610"] {
    /* Matrix */
    background: linear-gradient(to bottom, #ff0 30%, black);
}

a.a_cb_container.checked_cb_parent[data-id="195"] {
    /* Tri Elite pascabayar */
    background: linear-gradient(to bottom, #f0f 30%, #303);
    /* background: linear-gradient(217deg, rgba(255,0,0,1), rgba(255, 0, 0, 0) 50.71%),
            linear-gradient(127deg, rgba(0,255,0,1), rgba(0, 255, 0, 0) 50.71%),
            linear-gradient(336deg, rgba(0,0,255,1), rgba(0,0,255, 0) 50.71%); */
}

a.a_cb_container.checked_cb_parent[data-id="585"] {
    /* Smartfren pascabayar */
    background: linear-gradient(to bottom, #55f 30%, #006);
}

.a_cb_container input {
    /* float: right;
    margin: 5px; */
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 5;
    /* when overlapped, make it on top */
}

.a_cb_container>label {
    /* float: left; */
    display: unset !important;
    white-space: nowrap;
    width: 100% !important;
    /* 100% to make it clickable outside text */
    /* margin left -- separate from checkbox */
    /* margin-left: 5px !important; */
    margin: 0 !important;
}

.a_cb_container>label>img {
    display: block !important;
    /* horizontal/vertical center and keep aspect ratio */
    margin: auto !important;
    width: 100% !important;
    height: 100% !important;
    /* fill all space and keep aspect ratio */
    max-width: unset !important;
    max-height: unset !important;
}

.a_cb_container>label>span {
    display: none;
}

input[type="checkbox"][class="inp_cb_img"]:checked+label>img {
    /* reset */
    filter: none !important;
}

.checked_cb_parent {
    border: 1px solid #ff0 !important;
    /* border-radius: 10px; */
    /* margin: -1px; */
    margin: 0 !important;
    /* border: unset !important;  */
    /* take place 1 pixel but no color */
    /* border: 1px solid rgba(0, 0, 0, 0) !important; */
}

.cbs_image_container {
    gap: 5px !important;
}

form>input[type="number"] {
    padding: 5px;
}

form>select {
    padding: 5px;
}