/* Made with help of colours.joomla.com */
		/* If you feel like it, you can help support */
        /* me by donating to paypal@coolcat-creations.com or even just */
		/* paying it forward and helping out another Joomler in need. */
		/* Either way, have a great day! */



		/* new color variables modified by PMW after being generated by Coolcat's colours.joomla.com */
        :root {
            
          	--secondary-background-pmw: #4c83fa
          	--link-colour-pmw: #1c07e1;
            --secondary-color: #22262abf;
          	--dark-color: #181818;
            --light-color:#a2a2a2;
            --main-background: #cccccc;
            --primary-background: #b9b9b9;
            --secondary-background: #4c83fa;
            --accent-background: #007cff;
            --primary-gradient: linear-gradient(90deg, #c8c8c8, #8c8c8c);
            --secondary-gradient: linear-gradient(90deg, #c8c8c8, #8c8c8c);
        }

        body {
            background: var(--main-background); 		/* background of your website */
          background-image: var(--primary-gradient);
            color: var(--main-color); 	            /* color of your website */
        }

        a {
            color: var(--link-colour-pmw); /* color of your links */
        }

        .container-header {
          background-color: var(--primary-background);  /* Solid background of your header */
            background-image: var(--primary-gradient);  /* Set to none if you want to disable the gradient */
          
		}


        .mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
            background-color: var(--primary-background); /* Solid background of your articlesnews or newsflash modules */
            color: var(--primary-color);  /* Color of your articlesnews or newsflash modules */
			border: 1px solid var(--primary-background); /* Border of your articlesnews or newsflash modules */
        }

        .btn.btn-primary {
            background-color: var(--accent-background); /* background of your primary buttons */
            border-color: var(--accent-background); /* border color of your primary buttons */
            color: var(--accent-color); /* text color of your primary buttons */

        }

        .btn.btn-secondary {
            background-color: var(--secondary-background-pmw); /* background of your secondary buttons */
            border-color: var(--secondary-background-pmw); /* border color of your secondary buttons */
            color: var(--secondary-color); /* text color of your secondary buttons */
        }

        .card {
            border: 1px solid var(--primary-background); /* border color of your cards */
	        border-radius: 0; /* border radius of your cards */
	        background-color: var(--primary-background); /* background color of your cards */
        }

        .card-header {
            background-color: var(--primary-background); /* background color of your card headers */
            border-bottom: 1px solid var(--primary-background); /* border color of your card headers */
            color: var(--primary-color); /* text color of your card headers */
        }

        .card-body {
            background-color: var(--primary-background); /* background color of your card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--accent-background); /* border color of your card bodies */
            color: var(--primary-color); /* text color of your card bodies */
        }

        .card-body a {
            color: var(--primary-color); /* text color of your card body links */
        }

        .plg_system_webauthn_login_button svg {
            fill: var(--primary-color); /* color of your webauthn login button icon */
        }

        .footer {
            background-color: var(--secondary-background); /* background color of your footer */
            background-image: var(--secondary-gradient);  /* Set to none if you want to disable the gradient */
            color: var(--secondary-color); /* text color of your footer */
        }

        ::selection {
	        background-color: var(--accent-background); /* background color of your text selection */
			color: black ; /* text color of your text selection  changed from var(--accent-color)*/
        }

        .metismenu.mod-menu .metismenu-item > ul {
			background-color: var(--secondary-background); /* background color of your dropdown menu */
			border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
	        color: var(--secondary-color); /* text color of your dropdown menu */
		}

        .metismenu.mod-menu .metismenu-item > ul a {
	        color: var(--secondary-color); /* text color of your dropdown menu links */
        }

        .main-top.card.colorpicker-module {
	        background-color: #383838; /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            border: 1px solid #383838;
        }

        .colorpicker-module .card-header, .colorpicker-module .card-body  {
            background-color: #383838;
            border: 1px solid #383838;

        }

        .article-info {
	        background-color: var(--main-background); /* background color of your article info */
	        padding: 15px 20px; /* padding of your article info */
        }

        .article-info dd {
	        color: var(--main-color); /* text color of your article info */
		}

        .btn.btn-info {
	        background-color: var(--primary-background); /* background color of your info buttons */
	        border-color: var(--primary-background); /* border color of your info buttons */
	        color: var(--primary-color); /* text color of your info buttons */
        }

        .form-control {
	        background-color: var(--main-background); /* background color of your form controls */
	        border: 1px solid var(--main-color); /* border color of your form controls */
	        color: var(--primary-color); /* text color of your form controls */
	        border-radius: 0; /* border radius of your form controls */
        }

        label {
	        font-weight: bold; /* font weight of your labels */
        }

/* Added by PMW after coolcat's colours.joomla.com generator and other stuff*/

.float-center.item-image {
 	 text-align: center;      /* to center the image in the blog layout cards */
}

.card {
    box-shadow: 14px 16px 19px 4px rgba(0,0,0,0.85);    /* add a box shadow to the cards */
-webkit-box-shadow: 14px 16px 19px 4px rgba(0,0,0,0.85);
-moz-box-shadow: 14px 16px 19px 4px rgba(0,0,0,0.85);
}

.boxed .blog-item {
    box-shadow: 14px 16px 19px 4px rgba(0,0,0,0.85);    /* add a box shadow to the cards */
-webkit-box-shadow: 14px 16px 19px 4px rgba(0,0,0,0.85);
-moz-box-shadow: 14px 16px 19px 4px rgba(0,0,0,0.85);
}
  
.container-header .site-description {
  font-size: 1rem;  
  color: black;
  white-space: normal; 
}  
  

.container-header .mod-menu {
    color: var(--secondary-color); 
      
  } 

/* to center stuff */

.pmw-center {
  margin: auto;
  width: 100%;
  padding: 10px;
}

.footer {
   background: transparent;
}

}
.header {
   background: transparent;
}

.btn.btn-secondary {
    background-color: #009aff;
    border-color: #009aff;
    color: var(--secondary-color);
}