/* SHADOWED ECLIPSE DARK THEME OVERRIDE */
/* Place this file in /magelo/templates/default/dark-override.css */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Anton&family=Bebas+Neue&family=Fjalla+One&display=swap');

/* Force body and main backgrounds */
body, body.CB_Body {
   background-color: #111 !important;
   background-image: none !important;
   font-family: 'Oswald', Arial, sans-serif !important;
}

#charbrowser {
   background-color: #111 !important;
   background-image: none !important;
}

#charbrowser MAIN {
   background: #111 !important;
   background-image: none !important;
   color: #FFFFFF !important;
   font-family: 'Oswald', Arial, sans-serif !important;
}

/* Headers */
#charbrowser HEADER {
   background-color: #1a1a1a !important;
   background-image: none !important;
   border-bottom: 2px #66ccff solid !important;
   font-family: 'Oswald', Arial, sans-serif !important;
}

/* All windows */
#charbrowser .WindowSuperFancy,
#charbrowser .WindowSimple,
#charbrowser .WindowSimpleFancy,
#charbrowser .WindowComplex,
#charbrowser .WindowComplexFancy,
#charbrowser .WindowComplexGM { 
   background-color: #1a1a1a !important;
   background-image: none !important;
   border: 2px solid #444 !important;
   font-family: 'Oswald', Arial, sans-serif !important;
   color: #FFFFFF !important;
}

/* Title bars */
#charbrowser .WindowTitleBar {
   background-color: #222 !important;
   background-image: none !important;
   border: 1px solid #66ccff !important;
   border-radius: 10px !important;
   color: #66ccff !important;
   font-family: 'Bebas Neue', Arial, sans-serif !important;
   letter-spacing: 1px !important;
   text-transform: uppercase !important;
}

/* Tables */
#charbrowser TABLE.CB_Table {
   font-family: 'Oswald', Arial, sans-serif !important;
   color: #FFFFFF !important;
}

#charbrowser TABLE.CB_Table THEAD TR TH {
   font-family: 'Fjalla One', Arial, sans-serif !important;
   color: #66ccff !important;
   letter-spacing: 1px !important;
   text-transform: uppercase !important;
}

#charbrowser TABLE.CB_Table A:link,
#charbrowser TABLE.CB_Table A:visited,
#charbrowser TABLE.CB_Table A:active {
   color: #66ccff !important;
}

#charbrowser TABLE.CB_Table A:hover {
   color: #ffffff !important;
}

/* Row highlights */
#charbrowser TABLE.CB_Highlight_Rows TBODY TR:hover {
   background: linear-gradient(180deg, rgba(102,204,255,0.8) 0%, rgba(102,204,255,0.2) 50%, rgba(102,204,255,0.8) 100%) !important;
}

/* All links */
#charbrowser A { 
   color: #66ccff !important;
   font-family: 'Oswald', Arial, sans-serif !important;
}
#charbrowser A:link { 
   color: #66ccff !important;
}
#charbrowser A:visited { 
   color: #88aacc !important;
}
#charbrowser A:hover { 
   color: #ffffff !important;
}

/* Text */
#charbrowser P {
   font-family: 'Oswald', Arial, sans-serif !important;
   color: #e0e0e0 !important;
}

#charbrowser H2 {
   font-family: 'Bebas Neue', Arial, sans-serif !important;
   color: #66ccff !important;
   letter-spacing: 2px !important;
   text-transform: uppercase !important;
}

/* Buttons */
#charbrowser .CB_Button,
#charbrowser .CB_Button:link,
#charbrowser .CB_Button:visited {
   background-color: #1a1a1a !important;
   background-image: none !important;
   border: 1px solid #66ccff !important;
   color: #ffffff !important;
   font-family: 'Oswald', Arial, sans-serif !important;
}

#charbrowser .CB_Button:hover {
   background-color: #66ccff !important;
   color: #111 !important;
}

/* Input fields */
#charbrowser INPUT[type=text],
#charbrowser SELECT {
  border: 1px #444 solid !important;
  background-color: #222 !important;
  color: #FFFFFF !important;
  font-family: 'Oswald', Arial, sans-serif !important;
}

/* Form elements in header */
#charbrowser HEADER FORM INPUT[type=submit] {
    border: 1px solid #66ccff !important;
    background: none !important;
    color: #66ccff !important;
    font-family: 'Oswald', Arial, sans-serif !important;
}

#charbrowser HEADER FORM INPUT[type=submit]:hover {
    color: #ffffff !important;
    border: 1px dotted #ffffff !important;
    background-color: rgba(102, 204, 255, 0.2) !important;
}

#charbrowser HEADER FORM INPUT[type=text] {
   border: 2px #444 solid !important;
   background-color: #222 !important;
   color: #FFFFFF !important;
   font-family: 'Oswald', Arial, sans-serif !important;
}

#charbrowser HEADER FORM LABEL {
   color: #FFFFFF !important;
   font-family: 'Oswald', Arial, sans-serif !important;
}

/* Navigation */
#charbrowser HEADER NAV UL LI A:link,
#charbrowser HEADER NAV UL LI A:visited,
#charbrowser HEADER NAV UL LI A:active {
   color: #cccccc !important;
   font-family: 'Oswald', Arial, sans-serif !important;
}

#charbrowser HEADER NAV UL LI A:hover {
   color: #ffffff !important;
}

/* Scrollbars */
#charbrowser ::-webkit-scrollbar-thumb {
  background: #66ccff !important;
}

#charbrowser ::-webkit-scrollbar-thumb:hover {
  background: #88ddff !important;
}