#b,
#footer,
#header,
#logo,
#text,
.search-form {
    max-width: 600px
}

#collapse .opener,
.search-form {
    padding: 15px;
    box-sizing: border-box
}

#collapse .opener+div,
#text p,
ul {
    line-height: 24px;
    text-align: justify
}

body,
input {
    font-family: Arial, sans-serif
}

#b,
#text,
.search-form {
    margin: 0 auto 30px
}

#text p,
ul {
    margin: 15px 0 0
}

#footer,
#logo {
    text-align: center
}

#footer,
#header {
    margin: 0 auto;
    padding: 15px 0
}

body {
    font-size: 14px;
    margin: 0
}

.dark body {
    background-color: #13192d
}

table,
table td,
table th {
    border: 1px solid #ccc
}

.dark table,
.dark table td,
.dark table th {
    border-color: #616a8a
}

#header {
    color: #111;
    border-bottom: 1px solid #f3f1f1;
    display: flex;
    justify-content: space-between
}


.search-form #progress,
input[type=text] {
    color: #494949;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box
}

#footer a,
#header a {
    color: #111;
    text-decoration: none;
    margin-right: 15px
}

.dark #header a,
.dark #text h1,
.dark .trending-title {
    color: #fff
}

#footer a:last-of-type,
#header a:last-of-type,
.search-form div:nth-of-type(2) a:last-of-type {
    margin-right: 0
}

#header #theme {
    color: #0086e7;
    font-weight: 700
}

#logo {
    margin: 15px auto
}

.search-form {
    color: #707070;
    border-radius: 3px
}

html:not(.dark) #collapse .opener,
html:not(.dark) .search-form {
    background-image: linear-gradient(#fff, #f4f4f4);
    border: 1px solid #f3f1f1
}

.search-form div:nth-of-type(2) a,
input {
    border-radius: 3px;
    height: 48px;
    font-size: 16px
}

.dark #collapse .opener,
.dark .search-form {
    color: #fff;
    background-color: #0e1323
}

.search-form div:nth-of-type(2) {
    margin-top: 15px;
    display: flex
}

.search-form div:nth-of-type(2) a {
    color: #fff;
    background-color: #0086e7;
    line-height: 48px;
    text-decoration: none;
    margin-right: 15px;
    padding: 0 15px;
    display: block
}

.search-form div:nth-of-type(3) {
    text-align: right
}

.search-form div:nth-of-type(3) a {
    color: #0086e7;
    font-weight: 700;
    text-decoration: none
}

.dark .search-form #progress,
.dark input[type=text] {
    color: #959ebd;
    background-color: #1d243d
}

.search-form #progress,
html:not(.dark) input[type=text] {
    border: 1px solid #0086e7
}

.search-form .input {
    position: relative;
    flex: 1
}

input[type=text] {
    padding: 0 1.754385964912281%;
    outline: 0
}

#b iframe,
.dark input[type=text] {
    border: none
}

.dark input[type=submit],
input[type=submit] {
    color: #fff;
    background-color: #0086e7
}

input[type=submit] {
    font-weight: 400;
    width: 15.78947368421053%;
    border: none;
    margin-left: 2.631578947368421%;
    padding: 0;
    cursor: pointer;
    appearance: none
}

.search-form #progress {
    font-size: 16px;
    line-height: 48px;
    height: 48px;
    border-radius: 3px;
    align-items: center;
    justify-content: center
}

.search-form i {
    border: 3px solid #fff;
    border-top: 3px solid #0086e7;
    border-bottom: 3px solid #0086e7;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: 2s linear infinite spin;
    margin-left: 5px;
    display: block
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

#b {
    height: 78px
}

#text h1 {
    color: #111;
    font-size: 24px;
    font-weight: 400;
    margin: 0
}

#text span,
ul p {
    font-weight: 700
}

.dark #collapse .opener+div,
.dark #collapse .opener+div a,
.dark #footer a,
.dark #text,
.dark #text a,
.dark ul {
    color: #616a8a
}

#collapse .opener+div a,
#text a,
html:not(.dark) #text p,
ul {
    color: #494949
}

#collapse .opener {
    color: #111;
    font-size: 16px;
    font-weight: 700;
    border-radius: 3px;
    margin-top: 15px;
    cursor: pointer;
    user-select: none
}

#collapse .opener+div {
    color: #494949;
    margin: 15px 0;
    padding: 0 15px;
    display: none
}

ul {
    padding: 0 0 0 15px;
    list-style-type: lower-alpha
}

ul li {
    margin-bottom: 15px
}

ul li:last-of-type {
    margin-bottom: 0
}

ul li ul {
    list-style-type: lower-roman;
    padding-left: 15px
}

ul p {
    color: #111 !important;
    text-align: center !important;
    margin: 15px 0
}

.dark ul p {
    color: #fff !important
}

.nomargin {
    margin-top: 0 !important
}

#footer {
    border-top: 1px solid #f3f1f1
}

.dark #footer {
    border-color: #0e1323
}

@media only screen and (max-width:600px) {
    #header {
        width: 100%;
        border: none;
        padding: 0;
        flex-wrap: wrap-reverse;
        justify-content: center
    }

    #header div {
        text-align: center;
        width: 100%;
        border-bottom: 1px solid #f3f1f1;
        padding: 15px 0
    }

    .dark #header div {
        border-color: #0e1323
    }

    #header div:first-of-type a:nth-child(3) {
        display: none
    }

    input[type=submit] {
        width: 20.78947368421053%
    }

    #text {
        width: 92%
    }

    #footer a {
        font-size: 12px
    }
}

.list a,
li a {
    text-decoration: none
}

#ajax-results .loader,
#footer,
#header div:first-child {
    display: flex;
    justify-content: center
}

.list,
.search-list {
    flex-direction: column;
    gap: 1rem
}

table {
    width: 100%;
    border-collapse: collapse
}

table th {
    text-align: left
}

table td,
table th {
    padding: 7px 10px
}

.suggest-results {
    position: absolute;
    z-index: 100;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 198px;
    margin: 0;
    padding: 5px 0;
    overflow: auto;
    list-style: none;
    line-height: auto;
    background: #fff;
    -webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, .1);
    box-shadow: 0 10px 15px rgba(0, 0, 0, .1);
    -webkit-border-radius: 2px;
    border-radius: 2px
}

.convert-iframe,
.suggest-results li.active,
.suggest-results li:hover {
    background: #f5f5f5
}

.suggest-results.hidden {
    display: none
}

.suggest-results li {
    margin: 0;
    padding: 2px 15px;
    line-height: auto;
    cursor: pointer
}

#text h1.center {
    text-align: center
}

.trending-title {
    margin-top: 1rem;
    padding-left: .75rem;
    font-size: 18px;
    font-weight: 400;
    border-left: 3px solid #0086e7
}

.list {
    display: flex;
    margin: 1.5rem 0
}

.list>div,
.search-list .primary {
    display: flex;
    align-items: center;
    gap: 12px
}

.list img {
    width: 48px;
    height: 48px;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-border-radius: 4px;
    border-radius: 4px
}

.list h2 {
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 700
}

.list>div>div {
    font-size: 12px
}

#ajax-results {
    margin-top: 1.5rem
}

.dark #ajax-results .loader {
    color: #fff
}

.search-list {
    display: flex
}

.search-list>div {
    display: flex;
    flex-direction: column
}

.search-list img {
    width: 64px;
    height: 64px;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-border-radius: 4px;
    border-radius: 4px
}

.search-list .info {
    flex: 1;
    overflow: hidden
}

.search-list h2 {
    margin: 0 0 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 400
}

.search-list button {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
    padding: 0 12px;
    height: 32px;
    cursor: pointer;
    background: #0086e7;
    border: none;
    color: #fff;
    -webkit-border-radius: 3px;
    border-radius: 3px
}

.dark .list h2 a,
.dark .search-list h2 {
    color: #fff !important
}

.convert-iframe iframe {
    display: block;
    width: 100%;
    margin: 0;
    border: none
}

#footer {
    justify-content: center
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

li a {
    color: #777;
    padding: 0 10px
}

@media(max-width:767px) {
    .footer-nav-area .footer-nav li a {
        display: block;
        padding: 10px 0
    }
}

.footer-nav-area .footer-nav li a:hover {
    text-decoration: underline
}

table,
td,
th {
    border: 1px solid
}

td,
th {
    padding: 5px
}

.tengah {
    text-align: center
}