/* ============================================
   Silkroad Online 2006 Theme
   ============================================ */

/* ---- Base ---- */
html, body {
    background-color: #837351;
    background-image: url('../images/pt_allpg.jpg');
    background-repeat: repeat;
    background-size: 230px 172px;
    color: #2A1800;
    font-family: arial, helvetica, sans-serif;
    font-size: 13px;
}

html {
    background-color: #C09840;
}

a { color: #C2A461; text-decoration: none; }
a:hover { color: #F7941C; }

/* ---- Navbar ---- */
nav.navbar {
    background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('../images/pt_allpg.jpg');
    background-repeat: repeat;
    background-size: 230px 172px;
    background-color: #5A4520;
    border-bottom: 2px solid #3A2800;
    min-height: 50px;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

nav.navbar .container {
    max-width: 955px;
}

.navbar-light .navbar-brand {
    color: #EDD9A7 !important;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.navbar-light .navbar-nav .nav-link {
    color: #D4B878 !important;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: #FFDD88 !important;
}

/* Pages dropdown */
.navbar .nav-item.dropdown .nav-link.dropdown-toggle {
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 13px !important;
    color: #D4B878 !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
}

.navbar .nav-item.dropdown .nav-link.dropdown-toggle:hover {
    color: #FFDD88 !important;
}

/* Login/Register image buttons */
a.nav-link[href*="login"] {
    background-image: url('../images/acc_01.jpg') !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    background-size: 55px 29px !important;
    border: none !important;
    box-shadow: none !important;
    width: 55px !important;
    height: 29px !important;
    display: inline-block !important;
    color: transparent !important;
    font-size: 0 !important;
    padding: 0 !important;
    margin: 9px 3px !important;
    text-shadow: none !important;
}

a.nav-link[href*="register"] {
    background-image: url('../images/acc_02.jpg') !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    background-size: 73px 29px !important;
    border: none !important;
    box-shadow: none !important;
    width: 73px !important;
    height: 29px !important;
    display: inline-block !important;
    color: transparent !important;
    font-size: 0 !important;
    padding: 0 !important;
    margin: 9px 3px !important;
    text-shadow: none !important;
}

/* ---- Frame images ---- */
.sro-frame-top,
.sro-frame-bottom {
    display: none;
}

#app {
    /* table, centered via align="center" attribute */
}

.sro-content-wrapper {
    background-color: #EAD898;
    background-image: url('../images/main_body.jpg');
    background-repeat: repeat-y;
    background-size: auto auto;
    background-position: top left;
    font-size: 13px;
    overflow: hidden;
}

/* ---- Layout ---- */
.sro-content-wrapper > main > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sro-content-wrapper > main > .container-fluid > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 50px !important;
    padding-right: 20px !important;
}

.col-xl-3.col-lg-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    padding-left: 5px !important;
    padding-right: 8px !important;
}

.col-xl-9.col-lg-9 {
    flex: 0 0 75% !important;
    max-width: 75% !important;
    padding-right: 12px !important;
}

/* ---- Sidebar ---- */
.list-group-item {
    background-color: #F0E4C0 !important;
    border-color: #B8984A !important;
    color: #3B2A0E !important;
    border-radius: 3px !important;
    margin-bottom: 2px !important;
}

.list-group-item:hover, .list-group-item.active {
    background-color: #D4B978 !important;
    color: #1A0E00 !important;
}

.col-xl-3 ul.list-unstyled li,
.col-lg-3 ul.list-unstyled li {
    color: #3B2A0E !important;
    padding: 5px 8px !important;
    background-color: #F0E4C0;
    border-radius: 3px !important;
    margin-bottom: 2px;
    border-bottom: none !important;
}

.col-xl-3 p.font-weight-bold,
.col-lg-3 p.font-weight-bold,
.col-xl-3 div.font-weight-bold,
.col-lg-3 div.font-weight-bold {
    color: #5A3A00 !important;
    border-bottom: 1px solid #B8984A;
    padding-bottom: 4px;
}

/* ---- Discord list dividers ---- */
.col-xl-3 ul.list-group li.border-bottom,
.col-lg-3 ul.list-group li.border-bottom {
    border-bottom-color: #B8984A !important;
}

/* ---- Tables ---- */
.table { color: #1A0E00 !important; }
.table thead th {
    background-color: #C8A850 !important;
    border-color: #B8984A !important;
    color: #1A0E00 !important;
    font-weight: bold !important;
}
.table td, .table th { border-color: #C8A850 !important; color: #1A0E00 !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(200,168,80,0.15) !important; }
.table-hover tbody tr:hover { background-color: rgba(200,168,80,0.35) !important; }
.table tfoot th, .table tfoot td {
    background-color: #D4B978 !important;
    border-color: #B8984A !important;
    color: #3B2A0E !important;
}
.table tbody td a { color: #5A3A00 !important; font-weight: bold !important; }
.table tbody td a:hover { color: #C25000 !important; }

/* ---- Cards ---- */
.card {
    background-color: #F5EDD0 !important;
    border: 1px solid #B8984A !important;
    color: #3B2A0E !important;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.2) !important;
}
.card-header {
    background-color: #D4B978 !important;
    border-bottom: 1px solid #B8984A !important;
    color: #1A0E00 !important;
    font-weight: bold !important;
}
.card-footer {
    background-color: #E8D8A0 !important;
    border-top: 1px solid #B8984A !important;
}

/* ---- Post-box (news kachel) ---- */
.post-box {
    position: relative !important;
    height: 160px !important;
    width: 480px !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    border: 2px solid #8A6820 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 15px !important;
}

.post-link {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: rgba(61,40,0,0.82) !important;
    border-top: 1px solid #C2A461 !important;
    border-radius: 0 0 10px 10px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.post-link a {
    display: block !important;
    color: #EDD9A7 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
    box-shadow: none !important;
}

.post-link a:hover {
    color: #FFE890 !important;
    background: none !important;
}

/* ---- Buttons ---- */
.btn-primary, .btn-secondary, .btn-success, .btn-warning, .btn-danger {
    background-image: linear-gradient(to bottom, #B8B8A0, #888870) !important;
    border: 1px solid #606050 !important;
    border-radius: 3px !important;
    color: #F0F0E0 !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5) !important;
}

.btn-primary:hover, .btn-secondary:hover {
    background-image: linear-gradient(to bottom, #C8C8B0, #989880) !important;
    color: #FFFFFF !important;
}

/* ---- Footer ---- */
footer {
    background: linear-gradient(to bottom, #E8CC80, #C09840) !important;
    border-top: 2px solid #8A6820 !important;
    color: #3B2A0E !important;
    text-align: center !important;
}

footer a { color: #5A3A00 !important; }
footer a:hover { color: #C25000 !important; }

footer .container, footer .row, footer div, footer ul, footer li, footer p, footer h5, footer span {
    background: transparent !important;
    border: none !important;
    padding: revert;
}

/* ---- DataTables ---- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: #F5EDD0 !important;
    border: 1px solid #B8984A !important;
    color: #3B2A0E !important;
    border-radius: 3px !important;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info {
    color: #3B2A0E !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: linear-gradient(to bottom, #D4B978, #B8984A) !important;
    border: 1px solid #8A6820 !important;
    color: #1A0E00 !important;
    border-radius: 3px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: linear-gradient(to bottom, #E4C988, #C8A85A) !important;
    color: #1A0E00 !important;
    border: 1px solid #8A6820 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(to bottom, #5A3A00, #3B2A0E) !important;
    color: #EDD9A7 !important;
    border: 1px solid #3A2800 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #E8D8A0 !important;
    color: #A08040 !important;
    border: 1px solid #C8A850 !important;
}

.dt-buttons .btn {
    background: linear-gradient(to bottom, #D4B978, #B8984A) !important;
    border: 1px solid #8A6820 !important;
    color: #1A0E00 !important;
    border-radius: 3px !important;
}

.dt-buttons .btn:hover {
    background: linear-gradient(to bottom, #E4C988, #C8A85A) !important;
}

/* ---- Pagination buttons ---- */
.page-item .page-link {
    background-color: #D4B978 !important;
    border-color: #8A6820 !important;
    color: #1A0E00 !important;
}

.page-item .page-link:hover {
    background-color: #E4C988 !important;
    border-color: #8A6820 !important;
    color: #1A0E00 !important;
}

.page-item.active .page-link {
    background-color: #5A3A00 !important;
    border-color: #3A2800 !important;
    color: #EDD9A7 !important;
}

.page-item.disabled .page-link {
    background-color: #E8D8A0 !important;
    border-color: #C8A850 !important;
    color: #A08040 !important;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #E8D8A0;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #D4B978, #8A6820);
    border-radius: 4px;
    border: 1px solid #5A3A00;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #E4C988, #A07830);
}

/* ---- Discord Join link ---- */
.col-xl-3 a[href*="discord"],
.col-lg-3 a[href*="discord"] {
    color: #F7941C !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

.col-xl-3 a[href*="discord"]:hover,
.col-lg-3 a[href*="discord"]:hover {
    color: #FFB400 !important;
}

/* ---- Scrollbar Firefox ---- */
* {
    scrollbar-width: thin;
    scrollbar-color: #8A6820 #E8D8A0;
}

/* ---- Form inputs ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
    background-color: #F5EDD0 !important;
    border: 1px solid #B8984A !important;
    color: #3B2A0E !important;
    border-radius: 3px !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    background-color: #FFF8E8 !important;
    border-color: #8A6820 !important;
    box-shadow: 0 0 4px rgba(138,104,32,0.4) !important;
    outline: none !important;
}

input[type="checkbox"] {
    accent-color: #8A6820 !important;
}

/* ---- Login button - use acc_01.jpg image ---- */
form button[type="submit"],
form input[type="submit"],
.btn-login {
    background-image: url('../images/acc_01.jpg') !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    background-size: 55px 29px !important;
    border: none !important;
    box-shadow: none !important;
    width: 55px !important;
    height: 29px !important;
    color: transparent !important;
    font-size: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-shadow: none !important;
}

/* ---- Forgot password link ---- */
.forgot-password a,
a[href*="password"] {
    color: #C2A461 !important;
    font-weight: bold !important;
}

a[href*="password"]:hover {
    color: #F7941C !important;
}

/* ---- Login button hover fix ---- */
form button[type="submit"]:hover,
form input[type="submit"]:hover,
.btn-login:hover {
    background-image: url('../images/acc_01.jpg') !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0.85 !important;
}