/*
#################################################################
#
# Name:          mu3a_wp.css
#
# Purpose:       css for use within Wordpress
#                Dec 2024 onwards - reorganising this whole thing...
#
# Date      Who             Description
#
# Jan 2025  Aidan Lawrence  CR229 Contact Forms

*/

/*

Known to be in use


*/

/* Generic used extensively */
  
.clr {
    clear:both;
}

.left {
    float: left;
    margin-right: 10px;
    margin-top: 20px;
}

/* minutes and similar PDF listing pages */
.picleft {
    float: left;
}


/* 

To be confirmed 

*/


/* Hide Front page 'Home' */
h2.entry-title, .page .entry-title {
    display: none;
  }
  hr {
      background-color:black !important;
  }
  #comments {
       display: none;
  }
  fieldset {
      border:1px solid lightgray !important;
      padding: 5px;
  }
  legend {
      font-size: 16px;
  }
  /* Join! widget front page*/
  #custom_html-3 {
      background-color:#2886e6;
      color: white;
      padding:15px;
      text-align:center;
  }
  #custom_html-7 {
      background-color:#2886e6;
  
  }
  .widget-container {background-color:white;border-style:solid 1px black;} 
  
  input, select {
      border:1px solid darkgray !important;
  }
  

  /* draw a box */
  .box {
      padding: 10px;
      border: 1px solid lightgray;
  }
 
  
  /* for recorder pages*/
  .record {
      width:100px;
      margin: 10px;
      height: 175px;
      float: left;
  }

  .left270 {
      float: left;
      width: 270px;
    margin-right: 20px;
  }
  .left400 {
      float: left;
      width: 400px;
    margin-right: 10px;
  }
  .right {
      float:right;
  }
  
  optgroup { 
      font-size:16px;
  }
  
  
  /*--------------------
  table definitions
  ---------------------*/
  table, td {
      border: 1px solid lightgray !important;
  }
  
  table#spread {
      display: block;
      overflow:auto;
      height:300px;
      font-size: 14px;
  }
  table#spread td {
      padding:0px;
  }
  table#spread th {
      padding: 0px;
      text-indent: 5px;
  }
  
  table.grp-alpha th {
      background-color: #0087C1;
      color:white;
  }
  
  table.grp-alpha {
      border: 1px solid #CCCCCC;
      width: 260px;
  }
  table.grp-alpha td, table.grp-alpha th {
      border: 1px solid #CCCCCC;
  }
  
  table#sub td, table#sub th {
      padding: 5px;
  }
  
  
  /* CR-202 Accept Stripe Payments */
  /* CR-202 Start */
  
  
  /*-----------*/
  /* radio button */
  /*-----------*/
   /* Customize the label (the container) */
   .container {
      display: block;
      position: relative;
      padding-left: 35px;
      margin-bottom: 12px;
      cursor: pointer;
      font-size: 22px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    /* Hide the browser's default radio button */
    .container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
    
    /* Create a custom radio button */
    .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 25px;
      width: 25px;
      background-color: #eee;
      border-radius: 50%;
    }
    
    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
      background-color: #ccc;
    }
    
    /* When the radio button is checked, add a blue background */
    .container input:checked ~ .checkmark {
      background-color: #2196F3;
    }
    
    /* Create the indicator (the dot/circle - hidden when not checked) */
    .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }
    
    /* Show the indicator (dot/circle) when checked */
    .container input:checked ~ .checkmark:after {
      display: block;
    }
    
    /* Style the indicator (dot/circle) */
    .container .checkmark:after {
      top: 9px;
      left: 9px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white;
    } 
    
    /* tooltip */
    
    
    .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 350px;
      background-color: black;
      color: #fff;
      text-align:left;
      border-radius: 6px;
      padding: 10px 10px;
    
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
    
    input[type=continue] {
      background-color: lightgray;
      border: none;
      color: white;
      padding: 12px 22px;
      text-decoration: none;
      margin: 4px 2px;
        width : 100px;
    }
    input[type=submit] {
        cursor:pointer;
    }
    
    /* CR-202 End */
  
  /* CR-203 Group Codes */
  /* CR-203 Start */
  
  /* style the links - play with the colours as desired.... */
  
   /* unvisited link */
   a:link {
      color: red;
    }
    
    /* visited link */
    a:visited {
      color: green;
    }
    
    /* mouse over link */
    a:hover {
      color: hotpink;
    }
    
    /* selected link */
    a:active {
      color: blue;
    } 
    
      /* CR-203 End */
  
        /* CR-409 Start */
  
      /* Core class for displaying groups on category plages */ 
      .mu3a-cat-grp-tab {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 1px solid palevioletred; /* completely arbitrary colour */
      }
  
      
  
      /* 
      Specify width of each column 
      Do here to allow easy changes without having to go into the php snippet code 
      Combination should add up to 100% 
      */
      .mu3a-cat-grp-tab-grp-code {
        width: 10%;
        text-align: center;
      }
  
      .mu3a-cat-grp-tab-grp-name {
        width: 20%;
        text-align: left;
      }
  
      .mu3a-cat-grp-tab-venue {
        width: 20%;
        text-align: left;
      }
  
      .mu3a-cat-grp-tab-day {
        width: 15%;
        text-align: center;
      }    
  
      .mu3a-cat-grp-tab-time {
        width: 15%;
        text-align: center;
      }    
  
      .mu3a-cat-grp-tab-leader {
        width: 20%;
        text-align: left;
      }    
  
  /* CR-409 th */ 
  
    th.mu3a-cat-grp-tab-grp-code {
      background-color: #0087C1;
      color: white;
      text-align: center;
    }
  
    th.mu3a-cat-grp-tab-grp-name {
      background-color: #0087C1;
      color: white;
      text-align: left;
    }
    
    th.mu3a-cat-grp-tab-venue {
      background-color: #0087C1;
      color: white;
      text-align: left;
    }
  
    th.mu3a-cat-grp-tab-day {
      background-color: #0087C1;
      color: white;
      text-align: center;
    }    
  
    th.mu3a-cat-grp-tab-time {
      background-color: #0087C1;
      color: white;
      text-align: center;
    }    
  
    th.mu3a-cat-grp-tab-leader {
      background-color: #0087C1;
      color: white;
      text-align: left;
    }  
      
        /* CR-409 links */ 
  
      .mu3a-cat-grp-tab th a:link {
        background-color: #0087C1;
        color:white;
      }
  
        table.mu3a-cat-grp-tab th a:visited {
        background-color: #0087C1;
        color:white;
        }
  
        table.mu3a-cat-grp-tab th a:hover {
         background-color: #0087C1;
         color: hotpink;
      }
  
         table.mu3a-cat-grp-tab th a:active {
         color: yellow;
         background-color: #0087C1;
        }     
  
        /* CR-409 End  */
  
       /* CR-217 Start */
  
      /* Core class for displaying groups on category plages */ 
      .mu3a-subs-tab {
          table-layout: fixed;
          width: 100%;
          border-collapse: collapse;
          border: 1px solid palevioletred; /* completely arbitrary colour */
        }
        
        
        /* CR-401 Start */
  
      /* Core class for displaying groups by alphabet and leader */ 
      .mu3a-alpha-grp-tab {
          table-layout: fixed;
          width: 100%;
          border-collapse: collapse;
          border: 1px solid palevioletred; /* completely arbitrary colour */
        }
  
        /* 
        Specify width of each column 
        Do here to allow easy changes without having to go into the php snippet code 
        Combination should add up to 100% 
        */
        .mu3a-alpha-grp-tab-grp-code {
          width: 15%;
          text-align:center;
        }
    
        .mu3a-alpha-grp-tab-grp-name {
          width: 45%;
          text-align:center;
        }
    
        .mu3a-alpha-grp-tab-grp-leader {
          width: 40%;
          text-align:center;
        }
   
    /* CR-401 th */ 
    
      th.mu3a-alpha-grp-tab-grp-code {
        background-color: #0087C1;
        color: white;
        text-align:center;
      }
    
      th.mu3a-alpha-grp-tab-grp-name {
        background-color: #0087C1;
        color: white;
        text-align:center;
      }
      
      th.mu3a-alpha-grp-tab-grp-leader {
        background-color: #0087C1;
        color: white;
        text-align:center;
      }
        
          /* CR-401 links */ 
    
        .mu3a-alpha-grp-tab th a:link {
          background-color: #0087C1;
          color:white;
        }
    
          table.mu3a-alpha-grp-tab th a:visited {
          background-color: #0087C1;
          color:white;
          }
    
          table.mu3a-alpha-grp-tab th a:hover {
           background-color: #0087C1;
           color: hotpink;
        }
    
           table.mu3a-alpha-grp-tab th a:active {
           color: yellow;
           background-color: #0087C1;
          }     
    
          /* CR-401 End  */

/* CR-228 Start */
  
      /* Core class for displaying venues */ 
      .mu3a-vnu-tab {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 1px solid palevioletred; /* completely arbitrary colour */
      }
 
      /* 
      Specify width of each column 
      Do here to allow easy changes without having to go into the php snippet code 
      Combination should add up to 100% 
      */
      .mu3a-vnu-tab-code {
        width: 15%;
        text-align: center;
      }
  
      .mu3a-vnu-tab-name {
        width: 65%;
        text-align: left;
      }
  
      .mu3a-vnu-tab-postcode {
        width: 20%;
        text-align: center;
      }    
  
 
    th.mu3a-vnu-tab-code {
      background-color: #0087C1;
      color: white;
      text-align: center;
    }
  
    th.mu3a-vnu-tab-name {
      background-color: #0087C1;
      color: white;
      text-align: left;
    }
 
    th.mu3a-vnu-tab-postcode {
      background-color: #0087C1;
      color: white;
      text-align: center;
    }    
  
    .mu3a-vnu-tab th a:link {
    background-color: #0087C1;
    color:white;
    }

    table.mu3a-vnu-tab th a:visited {
    background-color: #0087C1;
    color:white;
    }

    table.mu3a-vnu-tab th a:hover {
        background-color: #0087C1;
        color: hotpink;
    }

        table.mu3a-vnu-tab th a:active {
        color: yellow;
        background-color: #0087C1;
    }     


/* 

CR-229 Styles for contact form 

https://contactform7.com/styling-contact-form/ 
https://contactform7.com/faq/can-i-add-id-and-class-attributes-to-a-form-element/ 

Basically create my own mu3a elements and add in - could  borry basic colours from siteworks

/*
mu3a overrides
*/

#mu3a_cf_your_name,
#mu3a_cf_your_email,
#mu3a_cf_your_telephone,
#mu3a_cf_your_subject,
#mu3a_cf_your_message
{
    color: #000;
    border: 1px solid #000;
    margin-top: 1%;
    margin-left: 2%;
    width: 60%;
    border-radius: 1;
    border: 1;
}

#mu3a_cf_your_name:focus,
#mu3a_cf_your_email:focus,
#mu3a_cf_your_telephone:focus,
#mu3a_cf_your_subject:focus,
#mu3a_cf_your_message:focus
{
    outline: 1px solid rgba(84, 222, 197, 0.9);
    outline-offset: 0;
}


#mu3a_cf_submit_button
{
    margin-left: 2%;
}

.wpcf7
{

    background-color: #ebeff5; /* Copied from main dashboard body */
    /* background-color: white; */
    border: 2px solid rgb(0, 0, 0);
}

.wpcf7-form input[type="text"], 
.wpcf7-form input[type="email"], 
.wpcf7-form input[type="url"], 
.wpcf7-form input[type="password"], 
.wpcf7-form input[type="search"], 
.wpcf7-form input[type="number"], 
.wpcf7-form input[type="tel"], 
.wpcf7-form textarea {
    background-color: white;
    color: black;
    width: 80%;
    padding: 6px 8px;
    border-radius: 1;
    border: 1;
    outline: 1px solid rgb(0,0,0);
    outline-offset: 0;
    margin-bottom: 1px;
}

.wpcf7-form p {
    margin: 0 0 28px;
}

.wpcf7-text 
{
    border-radius: 21px;
    border: 1px solid rgb(0, 0, 0);
    outline: 1px solid rgb(0,0,0);
    outline-offset: 0;
}

.wpcf7-text:focus, 
.wpcf7-textarea:focus {
    outline: 1px solid rgba(84, 222, 197, 0.9);
    outline-offset: 0;
}

.wpcf7-form .button {
    background-color: #14e2ae;
    border: 0;
    color: #fff;
    border-radius: 1px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 15px;
    width: auto;
    padding: 20px 42px;
    letter-spacing: 2px;
    font-size: 14px;
}

.wpcf7-form .button:hover {
    cursor: pointer;
    box-shadow: 0px 7px 16px -7px rgba(0, 0, 0, 0.4);
    border: 0;
}

div.wpcf7-mail-sent-ok {
    border: 0;
    background: #5471de;
    color: #fff;
    padding: 18px;
}

div.wpcf7-acceptance-missing,
div.wpcf7-validation-errors {
    border: 0;
    background: #f9443b;
    color: #fff;
    padding: 18px;
}

span.wpcf7-not-valid-tip {
    color: #f9443b;
}