/*
March 11, 2023  10:44
Downloaded APril 22 2024
BCTC css
*/

/*disable login notice*/
.alert.alert-success.alert-dismissable {
    display: none;
}

/*hides edit button on articels for Super Users*/
.float-end {
    display: none !important;
}

/*hides edit button on modules for Super Users*/
.jmodedit{
    display: none !important;
}

/*Set custom colours here*/
/*:root{--color-white:#ffff;--color-black:#000000;--color-primary: #C60200 ;--color-link:   #C60200;--color-hover: #fc0200;--color-buttontext: #ffff;--color-pagination: #f1f2f2;--color-majorth:#000000;--color-minorth:#dbdbdb;--color-module: #99C9E2;--cassiopeia-color-primary: #FFFFFF;--color-white: #FFFFFF
--cassiopeia-color-link: #FFFFFF;    --cassiopeia-color-hover: #FFFFFF}*/
/*Set custom colours here*/
:root{--color-white:#ffff;--color-black:#000000;--color-primary: #582D8D ;--color-link:   #582D8D;--color-hover: #AC88BE;--color-buttontext: #ffff;--color-pagination: #582D8D;--color-majorth:#AC88BE;--color-minorth:#dbdbdb;--color-module: #99C9E2;--cassiopeia-color-primary: #FFFFFF;--color-white: #FFFFFF
--cassiopeia-color-link: #FFFFFF;    --cassiopeia-color-hover: #FFFFFF}


p {
  font-size: 18px;
  line-height: 1.5;
  font-family: Arial, sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
}

   h1, .h1 {
  font-size: calc(1.325rem + 0.9vw);
}
h4, h4{
  font-size: calc(1.2rem);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2rem;
  }

}
.card {
   
    border: 2px solid var(--color-primary)!important;
}
.card-header {
    background-color: var(--color-minorth)!important;
    border: 1px solid #dfe3e7;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    text-align: center;
}

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.2;
    color: #333;
    background-color: #fff;
}



/* link- does not apply to the button class*/
a {
		color: var(--color-link)!important;
	font-weight: bold !important;
}
/* visited link- does not apply to the button class*/
a:not([class*="button btn btn-primary cbButton cbNewButton"]):visited {
  color: var(--color-primary)!important;
}

/* mouse over link- does not apply to the button class*/
a:not([class*="button btn btn-primary cbButton cbNewButton"]):hover 
 {
color: var(--color-hover)!important;
	font-weight: bold !important;  
   
}
/* text on button color*/

.btn-primary {
    color: var(--color-buttontext)!important;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 25%);
    background-color:  var(--color-primary);
    background-image: -moz-linear-gradient(top,backgroundvar(--color-primary),var(--color-primary));
    background-image: -webkit-gradient(linear,0 0,0 100%,from(var(--color-primary)),to(var(--color-primary)));
    background-image: -webkit-linear-gradient(top,background: var(--color-primary),background: var(--color-primary));
    background-image: -o-linear-gradient(top,var(--color-primary),var(--color-primary));
    background-image: linear-gradient(to bottom,background: var(--color-primary),background: var(--color-primary));
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--color-primary)', endColorstr'=var(--color-primary)', GradientType=0);
    border-color: var(--color-primary) var(--color-primary)var(--color-primary);
      filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
      color: #fff;
  background: var(--color-hover)!important; 
  
}
  
  .btn-primary:hover {
    color: #fff;
    /*background-color: var(--color-hover);
    border-color: var(--color-hover);*/
    background-color: var(--color-hover);
    border-color: var(--color-hover);
}

/* specific styling for the data tables*/
.dataTables_wrapper .dataTables_filter {
            float: right;
            text-align: right;
            visibility: hidden;
        }

        #search_wrapper{
            width: 98%;
        }

        table.dataTable > tbody > tr.child span.dtr-title{
            display: none;
        }
		
	input,
		textarea,
		.uneditable-input {
			width: 80%;
		}
		
		
		
		
	.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}
.pagination>li{display:inline}.pagination>li>a,
.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#FFFFFF;text-decoration:none;background-color:#fff;border:1px solid #ddd}
.pagination>li:first-child>a,
.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}
.pagination>li:last-child>a,
.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}
.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,
.pagination>li>span:hover{z-index:2;color:var(--color-pagination);background-color:#eee;border-color:#ddd}
.pagination>.active>a,.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:var(--color-pagination);border-color:var(--color-pagination)}
.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}
.pagination-lg>li>a,
.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}
.pagination-lg>li:first-child>a,
.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}
.pagination-lg>li:last-child>a,
.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}
.pagination-sm>li>a,
.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}
.pagination-sm>li:first-child>a,
.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}
.pagination-sm>li:last-child>a,
.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}.

table.heading {
			width: 100%; background-color: var(--color-primary)!important;color: #ffffff;
			
		}
		td.y{ padding-left: 10px;}
		
table.blkborder {
  width: 100%; 
  vertical-align:top; 
  padding: 5px;  
  font-weight: bold;
  border: 1px solid black;
   
}

td.blkborder
{
  vertical-align:top; 
  padding: 5px;  
  font-weight: bold;
  border: 1px solid black;
  
}

th.blkborder{
  vertical-align:top; 
  padding: 5px;  
  font-weight: bold;
  border: 1px solid black;
  
 }

th.major{
  vertical-align:top; 
  padding: 5px;  
  font-weight: bold;
  border: 1px solid black;
  background-color: var(--color-majorth)!important;
  color: var(--color-buttontext)!important;
}

th.majorpro{
  vertical-align:top; 
  padding: 5px;  
  font-weight: bold;
  text-align: left;
  border: 1px solid black;
  background-color: var(--color-majorth)!important;
  color: var(--color-buttontext)!important;
}

th.minor{
  vertical-align:top; 
  padding: 5px;  
  font-weight: bold;
  border: 1px solid black;
  background-color: var(--color-minorth)!important;
  color: var(--color-majorth)!important;
}
td.minor{
  vertical-align:top; 
  padding: 5px;  
  font-weight: bold;
  border: 1px solid black;
  background-color: var(--color-minorth)!important;
  color: var(--color-majorth)!important;
}
td.photo{
   padding: 5px;  
  font-weight: bold;
  border: 1px solid black;
}
table.group, th.group,td.group {
  width: 100%; 
  vertical-align:middle; 
  padding: 10px; 
border-spacing: 10px;  
  font-weight: bold;
  border: 0px solid black;
}

.group button {
  background-color: var(--color-primary)!important; 
   border: 1px solid black; 
  border-radius: 10px;
  color: #FEFEFE; 
  padding: 12px 20px ; 
  cursor: pointer; 
  margin-left :40px

}

.group button:hover {
	color: #fff;
  background: var(--color-hover)!important; 
}

table.white {
  background-color: white;
  width: 100%; 
  vertical-align:top; 
  padding: 5px;  
  font-weight: bold;
 
}
table.th{
text-align: center;
}

td.center {
   text-align: center;
}
th.center {
  text-align: center;
 max-width: 200px;
   word-wrap: break-word;
white-space: normal;
}

.wrapper-class input[type="radio"] {
  width: 15px;
}

.wrapper-class label {
  display: inline;
  margin-left: 5px;
  }


.nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus {
    
    background-color: var(--color-minorth)!important;}



/*select,
text,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
	display: inline-block;
	height:50px;
	padding: 4px 6px;
	margin-bottom: 9px;
	font-size: 20px;
   font-weight:bold;
	line-height: 18px;
	color: #222;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	vertical-align: middle;
}*/



/* convert table properties to div Dec 2023 */

/* Div code for the user Application and your Marks buttons on the home page etc. */

.homepagecontainer{
 display: flex;
          flex-wrap: wrap; /* allows the flex items to wrap onto multiple lines if necessary */
          width: 70%; /* sets the width of the container to 80% of the parent element */
          align-items: center; /* Vertically center the child element within the parent element */
   max-width: 750px;
   justify-content: center;
  margin: auto;
}

.logincontainer{
 display: flex;
          flex-wrap: wrap; /* allows the flex items to wrap onto multiple lines if necessary */
          width: 70%; /* sets the width of the container to 80% of the parent element */
          align-items: center; /* Vertically center the child element within the parent element */
   max-width: 650px;
   justify-content: center;
  margin: auto;
   padding: 10px;
   border: 5px solid var(--color-primary)!important;
         
           border-radius: 10px;
  
}
        .buttoncontainer {
          display: flex;
          flex-wrap: wrap; /* allows the flex items to wrap onto multiple lines if necessary */
          width: 100%; /* sets the width of the container to 80% of the parent element */
          align-items: center; /* Vertically center the child element within the parent element */
        }
        
        .buttoncolumn1 {
          flex: 0 0 40%; /* occupy 40% of the width */
          min-width: 300px; /* sets a minimum width for the column */
          height: 60px; /* set a fixed height */
          text-align: right;
          padding-right: 20px; /* adds 10px of right padding to the container */
          /*border: 1px solid black*/
          
        }
        .buttoncolumn2 {
          flex: 0 0 60%; /* occupy 40% of the width */
          min-width: 300px; /* sets a minimum width for the column */
          height: 60px; /* set a fixed height */
              font-weight: bold;
             font-size: 16px;
          text-align: left;
          
          /*border: 1px solid black*/
          
        }
        
        /* mobile styles */
        @media screen and (max-width: 768px) {
          .buttoncolumn1 {
            flex: 0 0 100%; /* makes the columns stack vertically on mobile */
            align-items: center;
            text-align: center;
          }
          .buttoncolumn2 {
            flex: 0 0 100%; /* makes the columns stack vertically on mobile */
            align-items: center;
            text-align: center;
          }
        }
          
/* Div code for the user links on the home page pdf's etc. */
       
        .flex-container-list{
           	display: flex;
            flex-wrap: wrap;
           	padding: 5px;  
            font-weight: bold;
              font-size: 1.5rem;
            	white-space: -o-pre-wrap; word-wrap: break-word;
        }

/* Code for the section headings*/
.major{
  display: flex;
  flex-wrap: wrap;
   width: 100%;
  padding: 5px;  
  font-weight: bold;
  align-items: center;
   justify-content: center;
  border: 1px solid  var(--color-majorth)!important;;
   background-color: var(--color-majorth)!important;
  color: var(--color-buttontext)!important;
    height:50px;
border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.minor{
  display: flex;
  flex-wrap: wrap;
   width: 100%;
  padding: 5px;  
  font-weight: bold;
     border: 1px solid black;
   font-size: 1.25rem;
  

}

/* End of  Code for the section headings*/

div.majorpro{
  vertical-align:top; 
  padding: 5px;  
  font-weight: bold;
  text-align: left;
  border: 1px solid black;
  background-color: var(--color-majorth)!important;
  color: var(--color-white)!important;
}

/*Code for the main Artist listing section with the photo and main items*/
.listingcontainer {
  display: flex;
  flex-wrap: wrap;
}

 .photo{
            display: flex;
         width: 34%;
          height: 500px;
   		 
                      align-items: center;
           justify-content: center;
    	  padding: 25px;  
  		 
  		  
         
 		 }
 .listingcontainercolumn {
            
         width: 65%;
    	display: flex;
    	flex-direction: column;
          }

 .listingcontainercolumn100 {
            
         width: 99%;
    	display: flex;
    	flex-direction: column;
          }

.listingcontainercolumncenter{
            
         width: 99%;
    	display: flex;
    	flex-direction: column;
  justify-content: center;
  align-items: center;
          }

.artistcategory-artistcategorydata-container {
       display: flex;
  flex-direction: row;
    justify-content: space-between;
    padding: 10px;
  
  		 
  }
      	
.artistcategory, .artistcategorydata
{
 
  width: 50%;
  
}

.artistcategorydata
{
  padding-left: 20px;
  
}

  .artistcategory-artistcategorydata-container:nth-of-type(even) {
    background-color: #f2f2f2;
  }



@media only screen and (max-width:980px) {
    .photo {
      width: 100%;
      height: auto;
    }

    .listingcontainercolumn {
      width: 100%;
    }

    .artistcategory-artistcategorydata-container {
      flex-direction: column;
    }

    .artistcategory, .artistcategorydata {
      width: 100%;
      padding: 10px 0;
    }
  }

/*End of Code for the main Artist listing section with the photo and main items*/


/* Code for the video container portion*/
.videocontainer{
   display: flex;
  flex-wrap: wrap;
   width: 99%;
  padding: 5px;  
  font-weight: bold;
  
 }

.artistvideocontainer {
       display: flex;
  flex-direction: row;
     padding: 10px;
  
  		 
  }

.artistvideo
{
  display: flex;
  justify-content: center;
  width: 50%;
 
}

.suppcontainer{
   display: flex;
  flex-wrap: wrap;
   width: 99%;
  padding: 5px;  
  font-weight: bold;
    justify-content: center;
  
 }

/* Div code for the Group buttons on Artist listing page*/

.group button {
  background-color: var(--color-primary)!important; 
   border: 1px solid black; 
  border-radius: 10px;
  color: #FEFEFE; 
  padding: 12px 20px ; 
  cursor: pointer; 
  margin-left :40px

}

.group button:hover {
	color: #fff;
  background: var(--color-hover)!important; 
}
       
        @media (max-width: 768px) {
          .group{
              display: flex;
               align-items: center;
            flex-direction: column;
              row-gap: 5px; /* Adds 10px of space between elements */
          }
          
}

@media only screen and (max-width: 1441px) {

  html {
        font-size: 80%; /* Reduces the base font size by 20% */
    }
    
    h1, .h1 {
    font-size: calc(1.325rem + 0.9vw); /* This will now be based on the adjusted rem */
}

  h2, .h2 {
    font-size: calc(1.0rem + 0.5vw); /* This will now be based on the adjusted rem */
}

  h3, .h3 {
    font-size: calc(1.0rem + 0.4vw); /* This will now be based on the adjusted rem */
}

h4, .h4 {
    font-size: calc(1.0rem); /* This too will be scaled down by the new rem */
}

  h5, .h5 {
    font-size: calc(1.0rem)!important; /* This too will be scaled down by the new rem */
}
  p {
  font-size: 14px;
  line-height: 1.25;
  font-family: Arial, sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
}

   p1 {
  font-size: 12px;
     
}