Dark - Free Purple

/*Makes all borders sharp*/
* {
   border-radius: 0 !important;
}

/*Change website background and colour*/
body {
    background-image: none;
    background-color: var(--dark);
}

/*Remove border on featured horse scrollbox*/
div.featuredscroll {
    border: none !important;
}

/*Makes up and downvote images in the suggestion forum more visible*/
tr.quatro td font img, tr.forumalt td font img, td.forumpost table tbody tr td div font img {
    filter: saturate(5);
}

/*Character count under messages that you are typing in the mailbox*/
.counter {
    background-color: var(--dark);
}

/*--------------------------------------------------
  Variables <-- CHANGE COLOURS HERE. Do not change colours elsewhere or you will break the code! Only mess with these if you know what you are doing. Each variable is defined with a comment ABOVE it. Send me a PM or post in my guide (linked in the post this code is found in) for help.
 --------------------------------------------------*/

:root {

/*Changes the font used for the navigation*/
    --font: Ink Free, times;

/*Page, barn symbol and forum quote background colour*/
    --light: #790F83;

/*Table and status bar background colour*/
    --medium: #5C0B64;

/*Website and text field background colour*/
    --dark: #3B0641;

/*Colour for site borders, dropdown selection background and navigation text*/
    --borderColor: #B81EC6;

/*Forums container colour (changes the edges and the header)*/
    --forums: #3B0641;

/*Forum main colour*/
    --forumMain: #5C0B64;

/*Forum alternate colour*/
    --forumAlt: #790F83;

/*Sales chat posts*/
    --sales: #93169E;

/*Forum post body colour*/
    --forumPost: #93169E;

/*Light text, like on the navbar and inside buttons*/
    --lightText: #B81EC6;

/*Main page text*/
    --pageText: #000;

/*Links*/
    --link: #000;

/*Links on hover*/
    --linkHov: #B81EC6;

/*Scrollbar track*/
    --scrollTrack: #2A042E;

/*Scrollbar handle, dropdown background colour and selected tab at bottom of barn page*/
    --scrollHandle: #790F83;

/*Glowing effect on page*/
    --glowShadow: 0 0 5px 5px rgba(184, 30, 198, 0.6);

/*Page headers*/
    --header: #000;

/*Inactive tabs on horse info panels (Managed Shows and Associations for example)*/
    --horseInactive: #2A042E;

/*Loss in the accountant*/
    --loss: #6F0707;

/*Online text on stable pages*/
    --online: #E992F1;

/*Form field text colour*/
    --formText: #ffffff;

/*Dropdown content background colour*/
    --dropCont: 42, 4, 46;

}

/*--------------------------------------------------
  Overall Site Colors
 --------------------------------------------------*/

/*Forums container*/
.secondary {
    background-color: var(--forums);
}

/*Symbols in barn pages (like E for entered into regular show)*/
.tertiary {
    background-color: var(--light);
}

/*Success messages*/
.validmsg {
   border: 1px dashed var(--borderColor);
}

/*--------------------------------------------------
  Set the quote colors for the forum
 --------------------------------------------------*/

blockquote {
    background-color: var(--light);
    border-left: 10px double var(--dark);
    border-radius: 20px 0px 0px 20px !important;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6);
}

/*--------------------------------------------------
  Set the forum colors
 --------------------------------------------------*/

/*Forum main colour*/
.quatro {
    background-color: var(--forumMain);
}

/*Forum alternate colour*/
.forumalt {
    background-color: var(--forumAlt);
}

/*Forum post body colour*/
.forumpost {
    background: var(--forumPost);
}

.anycolorsmall.primary.whitefont {
    color: var(--lightText);
    background: var(--light);
    box-shadow: none;
    text-decoration: none;
    margin: 0 !important;
}

.anycolorsmall.primary.whitefont:hover {
    text-decoration: underline;
}

/*Selected page on forum posts*/
.anycolorsmall.tertiary.blackfont {
    color: var(--lightText);
    background: var(--forumPost);
    box-shadow: none;
    margin: 0 !important;
    border: 1px dashed var(--borderColor);
}

a.noline {
    text-decoration: none !Important;
}

/*--------------------------------------------------
  Change the scrollbars
 --------------------------------------------------*/

/*Width*/
::-webkit-scrollbar {
   width: 15px;
}

/*Track*/
::-webkit-scrollbar-track {
   background: var(--scrollTrack);
}

/*Handle*/
::-webkit-scrollbar-thumb {
   background: var(--scrollHandle);
   border-radius: 0;
}

/*Handle on hover*/
::-webkit-scrollbar-thumb:hover {
   background: var(--borderColor);
}

/*--------------------------------------------------
  Set the page background color
 --------------------------------------------------*/

/*Add spacing between chatbox and main page*/
.primary {
    margin-right: 15px !important;
}

/*Page and chatbox background*/
.pgbg, .primary {
    background: var(--light);
    box-shadow: var(--glowShadow);
    border: 1px solid var(--borderColor) !important;
}

/*Game header image, set to 880px wide by 210px high by default*/
.gameheader {
    background-color: transparent;
    border: none !important;
    background-image: url(https://i.postimg.cc/2jnF3PBg/purplefreeheader.png);
}

/*Change header height*/
div.gameheader div[style]:first-child {
    height: 200px !important;
}

/*Make navbar transparent*/
.gameheader div[style]:nth-child(2) {
    border: 0 !important;
    background: transparent !important;
}

/*Navbar width*/
div.gameheader {
    width: 880px !important;
}

/*Add space between navbar and header*/
div.gameheader div {
    margin-bottom: 20px;
    background: none;
}

.divheader2 {
    color: var(--lightText);
    text-shadow: 3px 3px 5px black;
}

/*Remove borders from news page*/
div.newsdiv td.tablebg {
    border: none !important;
}

/*--------------------------------------------------
  Set the table background color
 --------------------------------------------------*/

/*Table background colour*/
.tablebg {
    background-color: var(--medium);
    border: 1px dashed var(--borderColor) !important;
}

/*Table headers on barn pages*/
.brownbox2 {
    border: 1px dashed var(--borderColor) !important;
    background-color: var(--light);
    margin-bottom: 10px;
}

/*Dividers in header*/
.bgtableheader {
    background: var(--dark);
}

/*--------------------------------------------------
   Page Name text
 --------------------------------------------------*/

.headline {
    color: var(--header);
}

.greybox {
    background-color: var(--horseInactive);
}

/*--------------------------------------------------
  Other site text
 --------------------------------------------------*/

/*Red text in accountant*/
.loss {
   color: var(--loss);
}

/*Easy show enter highlight*/
.easyshow {
    border: 1px solid var(--borderColor);
    background: var(--dark);
    padding-right: 7px;
    padding-top: 1px;
    padding-bottom: 1px;
}

/*Online text on stable pages*/
.mainlinegreen {
    color: var(--online);
}

/*--------------------------------------------------
  Set the chatbox color
 --------------------------------------------------*/

/*Both of the chat posts*/
.sales, .main {
    border: none !important;
    margin-bottom: 5px;
}

/*Sales chat only*/
.sales {
    background-color: var(--sales);
}

/*Main chat only*/
.main {
    background-color: var(--medium);
}

/*Remove season chatbox image*/
div.primary div img:first-child {
    display: none;
}

/*Force quest images to appear*/
tr.mainlineblack td img {
    display: inline !important;
}

/*--------------------------------------------------
  Set the form field color
 --------------------------------------------------*/

.iclass {
    background-color:var(--dark);
    color: var(--formText);
    border: 1px solid var(--borderColor);
}

/*--------------------------------------------------
  Tabs on Stable Page
  --------------------------------------------------*/

/*Tabs on hover*/
.tab button:hover {
    background-color: var(--medium);
}

/*Selected tab*/
.tab button.active {
    background: var(--scrollHandle);
}

/*--------------------------------------------------
  Tabs on Mail Page, Blogs
  --------------------------------------------------*/

ul.tabbernav li a {
    background: var(--forums);
}

.tabberlive .tabbertab {
    background-color: var(--medium);
 }

ul.tabbernav li a:hover {
    color: var(--pageText);
    background: var(--medium);
}

ul.tabbernav li.tabberactive a {
    background: var(--medium);
}

ul.tabbernav li.tabberactive a:hover {
    color: var(--pageText);
    background: var(--medium);
}

/*New message marker in mailbox*/
.new {
    background: var(--dark);
    border: 1px solid var(--borderColor);
}

/*--------------------------------------------------
  Set the color and font of the button text, currently in Art Editor
 --------------------------------------------------*/

/*Buttons*/
.heebutton {
    font-family: arial, sans-serif;
    font-size: 15px;
    color: var(--lightText) !important;
    background-color: var(--dark);
    padding: 4px;
    border: 1px solid var(--borderColor);
    border-radius: 0;
    text-decoration: none;
}

/*Buttons on hover*/
.heebutton:hover {
    border: 1px outset var(--borderColor);
    color: var(--linkHov);
    background-color: var(--medium);
}

/*Links in buttons*/
.heebutton a:visited, .heebutton a:link, .heebutton a {
    font-family: arial, sans-serif;
    font-size: 15px;
    color: var(--lightText) !important;
    background-color: transparent;
    padding:4px;
}

.heebutton a:hover {
    font-family:arial,sans-serif;
    font-size:15px;
    background: none;
}

/*Small buttons*/
.heebuttonsmall {
    font-family: arial, sans-serif;
    font-size: 15px;
    color: var(--lightText);
    background-color: var(--dark);
    padding: 0;
    border: 1px solid var(--borderColor);
    border-radius: 0;
    text-decoration: none;
}

/*Small button links*/
.heebuttonsmall a:visited, .heebuttonsmall a:link {
    font-family: arial, sans-serif;
    font-size: 12px;
    color: var(--lightText);
    background-color: transparent;
    padding: 5px;
}

/*Small buttons on hover*/
.heebuttonsmall a:hover {
    font-family: arial, sans-serif;
    font-size: 12px;
    color: var(--lightText);
    text-decoration: underline;
    background-color: transparent;
    padding: 5px;
}



/*--------------------------------------------------
  Set the color of the side bar Header text (Chatbox/Quests)
 --------------------------------------------------*/

.sidebar {
    color: var(--lightText);
    font-family: var(--font);
    padding: 0;
}

/*--------------------------------------------------
  Set the color of the side bar header
 --------------------------------------------------*/

.sidebarheader {
    margin-top: 0 !important;
    background: var(--dark);
    border: 0 !important;
}

/*--------------------------------------------------
  Set the color and font of the status bar text
 --------------------------------------------------*/

.statusbar {
    background-color: var(--medium);
    border-bottom: 1px dashed var(--borderColor) !important;
}

/*--------------------------------------------------
  Set the color of the text on the site
 --------------------------------------------------*/

.mainlineblack {
    font-family:arial,sans-serif;
    font-size:15px;
    color: var(--pageText);
}

.mainlineblack a:visited, .mainlineblack a:link {
    font-family: arial,sans-serif;
    font-size: 15px;
    color: var(--link);
    text-decoration: underline;
}

.mainlineblack a:hover {
    font-family: arial, sans-serif;
    font-size: 15px;
    color: var(--linkHov);
}

.mainlineblacksmall {
    font-family: arial,sans-serif;
    font-size: 13px;
    color: var(--pageText);
}

.mainlineblacksmall a:visited, .mainlineblacksmall a:link {
    font-family: arial, sans-serif;
    font-size: 13px;
    color: var(--link);
    text-decoration: underline;
}

.mainlineblacksmall a:hover {
    font-family: arial, sans-serif;
    font-size: 13px;
    color: var(--linkHov);
}

.smalltextblack {
    font-family:arial,sans-serif;
    font-size:12px;
    color: var(--pageText);
}

.smalltextblack a:visited, .smalltextblack a:link {
    font-family: arial, sans-serif;
    font-size: 12px;
    color: var(--link);
    text-decoration: underline;
}

.smalltextblack a:hover {
    font-family: arial, sans-serif;
    font-size: 12px;
    color: var(--linkHov);
}

.veryblack {
    font-family: arial,sans-serif;
    font-size: 15px;
    color: var(--pageText);
}

.veryblack a:link, .veryblack a:visited {
    font-family:arial,sans-serif;
    font-size:15px;
    color: var(--link);
    text-decoration: underline;
}

.veryblack a:hover {
    font-family: arial, sans-serif;
    font-size: 15px;
    color: var(--linkHov);
}

/*--------------------------------------------------
  Set the alternate color of the text on the site
 --------------------------------------------------*/

.mainline {
    font-family: arial, sans-serif;
    font-size: 15px;
    color: var(--pageText);
}

.mainline a, .mainline a:visited, .mainline a:link {
    font-family: arial, sans-serif;
    font-size:15px;
    color: var(--link);
    text-decoration: underline;
}

.mainline a:hover {
    font-family: arial, sans-serif;
    font-size: 15px;
    color: var(--linkHov);
    text-decoration: underline;
}

/*--------------------------------------------------
  Set the small text color in chat (time)
 --------------------------------------------------*/

.bsmalltext a:link, .bsmalltext a:visited, .bsmalltext a {
    text-decoration: underline !important;
    font-family:arial,sans-serif;
    font-size:12px;
    color: var(--link);
}

.bsmalltext {
    color: var(--dark);
}

.bsmalltext a:hover { font-family:arial,sans-serif; font-size:12px; color: var(--linkHov);}

/*--------------------------------------------------
  Set the small text color in chat (posts)
 --------------------------------------------------*/

.smalltext {
    font-family: arial, sans-serif;
    font-size: 12px;
    color: var(--pageText);
}

.smalltext a:visited, .smalltext a:link {
    font-family: arial, sans-serif;
    font-size: 12px;
    color: var(--link);
    text-decoration: underline;
}

.smalltext a:hover {
    font-family: arial,sans-serif;
    font-size: 12px;
    color: var(--linkHov);
}

/*--------------------------------------------------
  Settings for the Select/Search dropdown menu
 --------------------------------------------------*/

/*Dropdown background colour*/
 .select2-container--default .select2-selection--single {
    background-color: var(--scrollHandle);
    border: 1px solid var(--borderColor);
 }

/*Dropdown List background and unselected item color*/
 .select2-dropdown {
    background-color: var(--medium);
    font-family: arial, sans-serif;
    border: 1px solid var(--borderColor);
}

/*Selected option in list*/
.select2-container--default .select2-results__option--selected {
    background-color: var(--medium);
}

/* Highlighted option in list */
 .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--borderColor);
    color: black;
}

/*Change dropdown text input border*/
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--borderColor);
}


/*--------------------------------------------------
  Set the color and font of the menu bar text
 --------------------------------------------------*/
.navbar {
    background: transparent;
}

/*Navbar content text colour*/
.navbar a {
    color: var(--lightText);
    background: transparent;
}

.dropdown:hover .dropbtn {
    background: transparent;
}

/*Navbar header text*/
.dropdown .dropbtn {
    font-weight: bold;
    color: var(--borderColor);
    font-family: var(--font);
    background: transparent;
}

/*Dropdown content links*/
.dropdown-content a {
    color: var(--borderColor);
    font-family: var(--font);
    padding: 5px 10px;
    margin-top: 0 !important; /*Prevent content from moving*/
}

/*Dropdown content background*/
.dropdown-content {
    background: rgba(var(--dropCont), 0.7) !Important;
    box-shadow: none;
}

.dropdown-content a:hover {
    background: rgba(var(--dropCont), 1) !Important;
}

/*Make navbar headers move when hovered*/
.navbar a:hover, .dropdown:hover .dropbtn {
    margin-top: 5px;
}