/*GLOBAL COLOUR VARIABLES*/
:root {
    --cassiopeia-color-primary: #fff;
    --cassiopeia-color-link: #30638d;
    --cassiopeia-color-hover: #30638d;
    --brcf-color-text: #36454F;
    --brcf-color-hover: #30638d;
    --brcf-button-color: #3C7FB1;
    --brcf-checkbox-border-color: #3C7FB1;
}

/*Update the Phoca Gallery Simple theme - remove border around images*/
.pg-item-box, .pg-category-box.pg-category-box {
    border: none;
}
.pg-category-box-title {
    font-size: 1rem;
}

.container-header{
  background-image: none;
}
.footer{
  background-image: none;
}

/*GLOBAL TEXT STYLING*/
body{
   color: var(--brcf-color-text);
   font-family: "Open Sans", sans-serif;
   line-height: 1.25;
}

/* FONT SIZES AND WEIGHTS SITE WIDE */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
   font-weight: 400;
}
.h1, h1 {
   font-size: 1.6rem;
}
.h2, h2 {
   font-size: 1.4rem;
}
.h3, h3 {
   font-size: 1.3rem;
}
p {
   font-size:.9em;
}
a:link { 
   text-decoration: none; 
}
a:hover { 
   text-decoration: underline;
   color: var(--brcf-color-hover);
}
li{
   font-size: .9em;
}
legend{
   font-weight: 400;
   color: var(--brcf-color-hover);
}
fieldset{
   margin-bottom: 0;
}
dt, dd{
   color: var(--brcf-color-hover);
   font-size:.9em;
}

/*CUSTOM FIELD STYLING*/
.field-label{
   font-weight: 600;
}

.fields-container li{
  padding: 0.3em 0 0.3em 0;
}

/*Some pages use these custom image classes*/
.brcf-image{
   float: right;
   max-width: 8.5rem;
   height: auto;
   display: inline;
   padding: 0.2em 0.2em 0.2em 0.2em;
   margin: 0.3em 0.3em 0.3em 0.3em;
   border: 1px solid gray;
}

.brcf-image figcaption{
   text-align: center; 
}


/* MAIN MENU ADJUSTMENTS*/
.brcf-main-menu{
  margin-left: 0.3em;
}

.brcf-main-menu .metismenu.mod-menu .metismenu-item {
  padding-bottom: 0.4em;
  padding-left: 0.4em;
  padding-right: 0.9em;
  padding-top: 0.1em;
}

/* MAIN MENU - USER MENU ITEM AND ICON STYLING*/

.user-icon-class{
  margin-right: 1.2em;
  padding-left:1em;
}
.login-icon{
  width: 25px;
  height: auto;
}

/*Reduce the font size for all menu items */
.metismenu.mod-menu .metismenu-item {
   font-size: 1rem;
   color: var(--cassiopeia-color-link);
}

/*MAKE SURE THE DROPDOWN ARROW DISPLAYS*/
.metismenu.mod-menu .metismenu-item>a,.metismenu.mod-menu .metismenu-item>button,.metismenu.mod-menu .metismenu-item>span {
    overflow: visible;
}

/*MOBILE MENU TOGGLER */
.container-header .navbar-toggler{
   color: var(--cassiopeia-color-link);
   border: 1px solid var(--cassiopeia-color-link);
   margin-bottom: 0.5em;
}

/* APPLY THE SAME MARGIN TO ALL CONTAINERS*/
.container-component>*+*,.container-component>:first-child,.container-sidebar-right>*+*,.container-sidebar-right>:first-child {
    margin-top: 0.7em;
}

/*NEWSLETTER MENU SELECTOR COMPONENT*/
.container-component .choose-another-newsletter{
  margin-top: 0em;
  margin-bottom: 0;
}
/*NEWS LETTER MENU ITEMS*/
.choose-another-newsletter .metismenu.mod-menu .metismenu-item.parent {
    padding:0 0 0.5em .1em;
}

/* User greeting module*/
.dsp-username .card-body{
   margin:0 0 0.5em 0;
   padding:0.5em 0 0 1em;
}

/*RECENT NEWS AND EVENTS - TEXT ADJUSTMENTS*/
.recent-news-mod li{
   padding: 0;
   margin-top: 0;
}
.recent-news-mod p{
   margin-bottom: 0.8em;
}

/*For the dJ Classifieds title input form field*/
#name.inputbox.required{
  width:500px;
}

@media screen and (max-width:600px) {
  	#name.inputbox.required{
  	width:330px;
	}
}

/*CHANGE THE VERTICAL MENU (for tablets) TO THE MOBILE MENU STYLE
@media (min-width:768px) and (max-width:992px) {
   .container-header .mod-menu {
   display:flex;
   flex: 1 1 0%;
   flex-direction: row;
   padding-bottom:0;
   }
}
*/
/*
body.wrapper-fluid header>.grid-child {
    padding-right: 2em;
    padding-bottom: 0.2em;
}
*/

/*RESPONSIVE TITLE AND BANNER*/

/*Hide the top image banner and title/logo until we know what device the user is using*/
.logo-title-desktop, .image-banner-desktop, .logo-title-mobile, .image-banner-mobile, .image-banner-tablet{
   display: none;
}
/*Setup the initial styling*/
.container-banner{/*container for image-banner*/
   padding: 0 2rem 0 2rem;
   margin: 0 0 0.2em 0;
}
.container-topbar{ /*container for logo-title*/
   padding: 1rem 1rem 0 1rem;
   margin: 0 0 0 0;
}
.container-header .grid-child { /*Main menu positioning */
   margin: 0 0 0 0;
   padding: 0 0 0 1rem;
}
@media (max-width:768px) {
   .container-header .grid-child{
      padding-bottom:0.5em;
   }
}
body.wrapper-fluid .site-grid {/* Set the width of the left and right columns*/
   grid-gap: 0 2rem;
}	
/* Display the DESKTOP logo title and banner for desktop users*/
@media only screen and (min-width: 992px){
   .logo-title-desktop, .image-banner-desktop {
      display: inline-block;
   }
}
/*Logo and title For TABLETS users*/
@media only screen and (min-width:600px) and (max-width:991px){
  .logo-title-desktop, .image-banner-tablet {
  display: inline-block;
   }
}
/* Display the MOBILE logo title and banner for mobile users*/
@media only screen and (max-width: 599px){
   .logo-title-mobile, .image-banner-mobile {
       display: inline-block;
   }
  /*Banner positioning*/
   .container-banner{
      margin: 0 0 0 0;
      padding: 0 .8em 0 .8em;
   }  
  /*Logo/Title positioning*/
  .container-topbar{
     padding: 1.5em 4rem 0 0em;      
   }
  /* Tweak the left and right site columns*/
  body.wrapper-fluid .site-grid {
     grid-gap: 0 .8rem;
  }
  /* header for mobile view*/
  body.wrapper-fluid header>.grid-child {
     padding: 0 1.1rem 0 0.8rem;
     margin-top: -20px;
   }
}


/*Adjust positioning of last child in card displays
.card-body{
   padding-bottom: 0;
}
*/
/*Style the buy and sell blog pages*/
.brcf-box .blog-item, .brcf-box-lead .blog-item{
   border-collapse: collapse;
   font-size: 1em;
   min-width: 250px;
   border-radius: 5px 5px 0 0;
   overflow: auto;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
   margin-bottom: 10px;
   padding: 1em;
 
}

/*FLYING STATUS MODULE*/

.fly-status-header{
   background-color: rgba(0,0,0,.03);
   border-bottom: 1px solid #dfe3e7;
   border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
   padding: .3rem 0 .3rem .3rem;
   margin-top: 0.5em;
}
.fly-status .the-date{ 
   font-size: 1.1rem;
}
.fly-status{
   padding: 0.3rem 0 0 0;
   font-size:.9rem;
}
.mod-fly-status{
  margin-bottom: 0.25em;
}

/*Layout the flying status info using css grid*/
.fly-area-container{
  display: grid;
  grid-template-columns: 85px 15px 49px 230px;
}
.box1{
    justify-self: end;
  	padding-right:2px;
}

/*WEATHER WIDGET STYLING*/
.weathr_wig{
   float: right; 
   margin-left: 20px;
   margin-top: -55px;
   border: 1px solid #dfe3e7;
   padding: 0 .3em .5em .2em;
   display: inline;
}

/*reposition for mobile devices*/
@media screen and (max-width: 420px){
   .weathr_wig{
      margin-top: 0;
   }
}

/*FOOTER STYLING*/
.footer{
   color: var(--brcf-color-text);
   font-size: .9em;
}
.footer .grid-child {
   padding-bottom: 3em;
   padding-top:0em;
}


/*Video iFrame styling*/

.video-grid-parent{
  max-width: 950px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 15px;
}

.video-grid{
  display: grid;
  grid-template-columns: 1fr;
}

.video-descr-item{
  padding:5px;
  background-color: rgb(255,255,255);
  color: rgb(90,90,90);
}

.video-item{
  position: relative;
  display: block;
  /*width: 98%;*/
  padding: 0px;
  overflow: hidden;
  box-shadow: 5px 5px 8px #888888;
  border-radius: 8px;
  &::before{
    padding-top: 56.25%;
    display: block;
    content: "";
    box-sizing: border-box;
  }
  iframe{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/*TABLE STYLING*/
/*WE HAVE 2 DIFFERENT CLASSES DEFINED. ARTICLE TABLES CLASS (brcf_tbl) JOOMLA LIST TABLES CLASS(mylist-tbl)*/
.brcf_tbl table{
   min-width: 75%;
}
.mylist-tbl table{
   max-width: 85%;
}

.mylist-tbl .table{
  --table-bg: var(--table-bg);
  --table-color: #fff;
}

.brcf_tbl table, .mylist-tbl table  {
   border-collapse: collapse;
   font-size: 1rem;
   /*min-width: 250px;*/
   border-radius: 5px 5px 0 0;
   overflow: auto;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
   caption-side: top;
   /*width: 80%;*/
   margin: 10px 0 30px 0;
   padding:0 5rem 0 0;
}
.brcf_tbl caption {
   font-size: 1.5em;
}
.brcf_tbl thead, .mylist-tbl thead{
   background-color: #71797E;
   color: white;
   text-align: left;
   font-weight: 400;
}
.mylist-tbl .table>:not(:first-child) {
   border: 1px solid #ddd;
}
.mylist-tbl thead a { 
   color: #fff;
}
.mylist-tbl thead a:hover { 
   color: #fff;
}
.mylist-tbl td{
  color: #000;
}
.brcf_tbl tbody tr{
   border-bottom: 1px solid #ddd;
}
.brcf_tbl td, .brcf_tbl th {
   padding: 10px 20px;
}
.brcf_tbl td:first-child {
   font-weight: 500;
}
.brcf_tbl tbody tr:nth-of-type(even){
   background-color: #f3f3f3;
}
.brcf_tbl tbody tr:last-of-type{
   border-bottom:2px solid #71797E;
}

/*MOBILE VIEW FOR TABLES*/
@media screen and (max-width: 710px) {
   .tbl-newsletter table td{
      font-size: .9rem; 
   }  
   .tbl-newsletter table a{
      font-size: .9rem;     
   }  
   .brcf_tbl table {
     width: 100%;
   }    
   .brcf_tbl tr:hover {
     background-color: #ddd;
   }  
   .brcf_tbl td, .brcf_tbl tr{
     display: block;
   }  
   .brcf_tbl td{
      border-bottom: 1px solid #ddd;
      text-align: left;
      padding: 0.5em 0.5em 0.5em 0.5em;
   }  
   .brcf_tbl td:last-of-type{
      border-bottom: 1px solid #71797E;
   } 
   .brcf_tbl tbody tr:last-of-type{
  	  border-bottom:1px solid #71797E;
   }

  /*JOOMLA LIST TABLES*/
   .mylist-tbl table {
      border-style: none;
      border-collapse: collapse;
      max-width: inherit;
   }
   .mylist-tbl table caption {
      display: none;
   }  
   .mylist-tbl table thead {
      display: none;
   }  
   .mylist-tbl table tr{
      display: block;
      margin-bottom: 0;
   }
   .mylist-tbl table th {
      display: block;
      font-size: 1em;
      font-weight: 500;
      text-align: left;
      padding: 0.5em 0 0.5em 1em;
   }  
   .mylist-tbl table td {
      display: block;
      font-size: .9em;
      text-align: left;
      padding: 0 0 0.5em 1em;
   }
   .mylist-tbl tbody tr:last-of-type{
  	  border-bottom:1px solid #71797E;
   }
}

/*GOOGLE MAPS*/
.google-maps iframe{
  border: 1px solid black;
  padding: 0.1em;
}

/*GOOGLE MAPS - for mobile devices*/
@media screen and (max-width: 600px) {
   .google-maps {
      position: relative;
      padding-bottom: 75%;
      height: 0;
      overflow: hidden;
      margin-bottom: 25px;
   }
   .google-maps iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
   }
}

/*USER LOGIN PAGE*/
.com-users-login__options {
   margin-top:0em;
   margin-bottom: 1em;
}
.com-users-login__options .list-group-item{
   border-style: none;
   padding:.2em 0 .2em 0;
   margin:0;
}


/*CONTACT FORMS*/
.contact-form{
   padding-left:1em;
   width:80%;
}
.contact-form legend {
   display:none;
}
.contact-form .control-label{
   font-size:0.9em;
}
.contact-form textarea{
   height: 200px;
}

/* Add a background color and some padding around the form */
.contact-form  {
   padding-left: 10px;
   padding-bottom: 0;
   margin-bottom:0;
   width: 80%;
   color: var(--brcf-color-text);
   font-size: 1em;
}
/* Style inputs with type="text", select elements and textareas */
.contact-form input[type=text], input[type=email], textarea {
   padding: 4px; /* Some padding */ 
   border: 1px solid #ccc; /* Gray border */
   border-radius: 5px; /* Rounded borders */
   box-sizing: border-box; /* Make sure that padding and width stays in place */
   margin-top: 0px; /* Add a top margin */
   margin-bottom: 0px; /* Bottom margin */
   resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/*Style the contact form checkbox*/
.brcf-contact-form .form-check-input:checked[type=checkbox]{
    border-color: var(--brcf-checkbox-border-color);
    background-color: #3C7FB1;
}

/*Tighten up the spacing on the contact form.*/
.brcf-contact-form .control-group{
    margin-bottom: 0;
}

/* Style the submit button with a specific background color etc */
.btn-primary, a.btn-primary, .btn-danger {
   background-color: var(--brcf-button-color);
   /*--cassiopeia-color-primary: #3C7FB1;*/
   --cassiopeia-color-hover: var(--brcf-color-hover);
   border: 1px solid #eee;
   border-radius: 10px;
   box-shadow: 5px 5px 5px #eee;
   text-shadow: none;
   text-decoration: none;
}

.btn-danger {
   background-color: #3C7FB1;
   border-color: #eee;  
}

/* Style the paga-nation active button to match the BRCF colour scheme*/
.page-item.active .page-link {  	
    background-color: var(--brcf-button-color);
    border-color: var(--brcf-button-color);
}

.mylist-tbl a.btn.btn-primary{
  display: none;
}

/*Contact form for mobile devices*/
@media screen and (max-width: 600px) {
   .contact-form  {
      padding-left: 0px;
      width: 100%;
   }
}

/*PDFs*/
@media screen and (max-width: 1024px){
   .pdf-mobile{
      display: inline;
  }
   .pdf-desktop{
      display:none;
   }
}
/*Don't need the pdf download link on desktop*/
@media screen and (min-width: 1025px){
   .pdf-desktop{
      display:inline;
  }
  .pdf-mobile{
      display: none;
   }
}
/*SYSTEM ALERTS*/
#system-message-container joomla-alert[type=info], #system-message-container joomla-alert[type=notice] {
    --alert-accent-color: var(--info);
    --alert-heading-text: hsla(0,0%,100%,.95);
    --alert-close-button: var(--info);
    background-color: #fff;
    margin-bottom: 1em;
    width: 75%;
}

/*Maintainence Message*/
.header {
    color: var(--brcf-color-text);
}
.logo-icon{
  display:none;
}