:root {
  --list-hover-rgba:      rgba(245,    245,    245,    0.3);
  --thumb-hover-rgba:     rgba(120,   120,   120,   0.6);
  --main-hover-color: #bdbdbd;
  --main-hover-rgb:   #bdbdbd;
}

.profile-pic { box-shadow: 0 0 2px rgba(var(--main-hover-rgb), 0.5), 0 0 2px rgba(var(--main-hover-rgb), 0.5); z-index: 10; }
.profile-info { text-shadow: 0 0 2px rgba(var(--main-hover-rgb), 0.5), 0 0 5px rgba(var(--main-hover-rgb), 0.5); z-index: 10; }
.copy { color: #fff!important; text-shadow: 0 0 2px #bdbdbd, 0 0 5px #bdbdbd; z-index: 10; }
.copy a:hover { color: #bdbdbd; }
#lucky_list .list-row:hover { background: var(--list-hover-rgba) !important; }
#lucky_list.theme-gallery .hover-overlay { background: var(--thumb-hover-rgba) !important; }
#lucky_list.theme-gallery .hover-overlay .hover-title { color: #ffffff !important; text-shadow: 0 0 2px var(--thumb-hover-rgba), 0 0 2px var(--thumb-hover-rgba), 0 0 2px var(--thumb-hover-rgba), 0 0 2px var(--thumb-hover-rgba), 0 0 5px var(--thumb-hover-rgba), 0 0 5px var(--thumb-hover-rgba), 0 0 5px var(--thumb-hover-rgba), 0 0 5px var(--thumb-hover-rgba) !important; z-index: 10; }

html, body {
  color: #333333 !important;
  font-family: "" !important;
}

html body a { color: inherit; text-decoration: none; }
html body a:hover, html body a:focus, html body a:active { color: inherit; text-decoration: none; outline: none; }
html body, html body * { -webkit-tap-highlight-color: transparent; }


#bg {
  background-image: url('/lucky_basic/img/bg.jpg') !important;
  background-size: cover  !important;
  background-position: center  !important;
  background-attachment: fixed  !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

::selection { color: #ffffff; background: #bdbdbd  !important; }
::-moz-selection { color: #ffffff; background: #bdbdbd  !important; }

::-webkit-scrollbar { width: 4px; height: 4px; background: #ffffff  !important; }
::-webkit-scrollbar-thumb { width: 4px; background: #bdbdbd  !important; }

*, body, html, a, a:hover, img:hover, input, input:hover, label, label:hover, map, map:hover, area, area:hover { cursor: url(''), progress !important; }

#lucky_list .pagination a, #lucky_list .pagination strong, #lucky_guest .pagination a, #lucky_guest .pagination strong, #lucky_list .list-title, #lucky_view.theme-view .view-subject, #lucky_vc .cmt-mention, #lucky_vc .cmt-author, #lucky_vc .cmt-content, #lucky_view.theme-view .view-content { color: #333333 !important; }


.container { width: 1500px !important; }
.sidebar {
  width: 300px !important;
    background-color: /lucky_basic/img/sidebar.jpg  !important;
  }

.profile-pic {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50%;
  object-fit: cover;
    background-image: url('/lucky_basic/img/profile.png');
  background-size: cover;
  background-position: center;
  }
.profile-info { color: #333333; }
.menu-link { display: flex; align-items: center; color: #e7e7e7; text-decoration: none; font-family: sans-serif; font-size: 15px; cursor: pointer; }
.menu-link i { transition: color 0.2s ease-in-out; }
.menu-link:hover i { color: #bdbdbd; animation: spin 0.25s linear 1; }
.menu-link:active, .menu-link:focus { color: #bdbdbd !important; transform: none !important; outline: none !important; }
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.main { width: 1200px !important; }




#lucky_list .row-icon,
#lucky_list .category-link,
#lucky_list .category-bar .admin-toggle,
#lucky_view.theme-view .row-icon,
#lucky_view .cmt-icon-area i,
#lucky_w .options-group .option-content,
#lucky_w .file-wrap .file-insert,
#lucky_vc_w .comment-form-cell.icon,
[id^="edit_"] .comment-form-cell.icon,
[id^="reply_"] .comment-form-cell.icon,
#lucky_view.theme-view .view-buttons .ui-btn,
#lucky_list .options-group label,
#lucky_list .file-wrap .file-insert > label:first-child,
#lucky_view .view-buttons a i,
#lucky_view .view-actions a i,
#lucky_guest .memo-row .memo-meta .memo-secret-indicator i, #lucky_guest .memo-row .memo-icon,
#lucky_password_box h1 i {
  color: #adadad !important;
}

#lucky_list .category-link.active,
#lucky_list .category-link:hover,
#lucky_list .admin-toggle:hover,
#lucky_list .category-bar .admin-toggle:hover,
#lucky_list .pagination .pg_current,
#lucky_list .pagination .pg_control,
#lucky_list .pagination .pg_wrap .material-icons,
#lucky_guest .pagination .pg_current,
#lucky_guest .pagination .pg_control,
#lucky_guest .pagination .pg_wrap .material-icons,
#lucky_list .view-buttons a:hover i,
#lucky_list .view-actions a:hover i {
  color: #333333 !important;
}

#lucky_list .category-link.active,
#lucky_list .category-link:hover {
  border-bottom: 2px solid #333333  !important;
  font-weight: 600;
  background: none;
}






@media (max-width: 640px) {
  #bg {
      }
  html, body {
    display: block;
    height: auto;
  }
  .container { flex-direction: column; height: auto; width: 100% !important; padding-top: 10px!important; padding-left: 3%!important; padding-right: 3%!important; padding-bottom: 30px!important; background: transparent; box-shadow: none !important; border-radius: 0 !important; border: none; }
 .sidebar {
    width: 100% !important;
    height: 250px;
    margin: 20px auto 20px;
    border: 1px solid #e7e7e7;
    box-sizing: border-box;
    border-radius: 1rem;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);

      }
  .main { width: 100% !important; margin-top: 10px; padding: 20px; height: auto; border: 1px solid #e7e7e7; box-sizing: border-box; border-radius: 20px; box-shadow: 0 0 8px rgba(0,0,0,0.2); overflow: hidden; }
  .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
  .sidebar-overlay .overlay-menu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); list-style: none; padding: 0; margin: 0; text-align: center; z-index: 1001; }
}