/* 
    THIS PAGE IS COMMON TO BOTH THE INTERNAL AND EXTERNAL SITES

    23/08/23    (David Ardis) Version 2 of the Style Sheet

    15/02/24    (David Ardis) added checkbox style to replace existing checkboxes.css

    11/03/24    (David Ardis) added style for dialog boxes

    19/03/24    (David Ardis) Amended table colours

    29/03/24    (David Ardis) amended styling for green_information, red_warning, yellow_warning boxes

    17/04/24    (David Ardis) 
        added new style .approve_dialog{min-width: 550px;}
        changed .approve_dialog_error_text{ to .approve_dialog_error_text, .message_dialog_error_text{

    30/04/24    (David Ardis) .page_loading{position: absolute; changed to .page_loading{position: fixed

    08/05/24    (David Ardis) added  border-radius: 50% 50% 100% 0% / 0% 100% 0% 100% ; to section h2

    12/02/25 (David Ardis remove styling for <button> as it was causing issues with google maps

    12/02/25 (David Ardis) added width: 16px; to .img_button{ this will control the size of the new icons as they are 48px x 48px

    18/04/2025 David Ardis changed textarea from height the min-height

    12/05/2025 David Ardis removed root elements and moved to new

    19/05/2025 David Ardis changed label::after{ to label:not(:empty)::after {

    28/05/2025 David Ardis added new class form_amended_warning

    26/06/2025 David Ardis adjusted h2 tag to prevent overflow

    17/07/2025 David Ardis added class .close_message_dialog to all button events

    THIS PAGE IS COMMON TO BOTH THE INTERNAL AND EXTERNAL SITES
    

***NB if you're updating this css remember to use developer toolbar on your page as it will clear the cached css file!!!
}
*/
 
*,
*::before,
*::after {
	box-sizing: border-box;
}

a:link {
    text-decoration: none;
}
  
a:visited {
    text-decoration: none;
}

form{
    margin: 0;
}


html {
    font-family: var(--default-font);
    font-size: 10pt;
    background-color: var(--site-background);
    /*background-image: url('/images/niwater_wt.png');
    background-size: 100px;
    background-blend-mode: luminosity;*/
}

body {
    width:1024px;
    margin: 0 auto;
}



header.cpmrbanner{
    background-color:var(--background-36);
    color: var(--font-colour-100);
    font-weight: bold;
    font-style: italic;
    font-size: 1rem;
}


/* Main Styling */
main {
    padding: 5px;
    background-color:white;
    min-height : calc(100vh - var(--header-height) - var(--nav-height) - var(--footer-height) - var(--nav-padding))
    
}

section{
    display:block;
    position: relative;
    background-color: var(--background-92);
    /* border:1px solid  var(--background-70); */
}

section::before{
    content: "";
    background-color:white;
    width: 100%;
    height: var(--heading-height);
    display: block;
    position:absolute;

}

section h2{
    font-weight: bold;
    font-size: 1rem;
    margin: 0px;
    color: white;
    height:var(--section-h2-height);
    background-color: var(--background-60);
    padding: 4px;
    border-radius: 50% 50% 100% 0% / 0% 100% 0% 100% ;
    position: relative;

    text-overflow:ellipsis;
    padding-right: 25%;
    white-space: nowrap;
    overflow:hidden;
}




section h2 span{
    font-size: .8rem;
}

section h2 span::before{
    content:" (";
}

section h2 span::after{
    content:")";
}

section h2 img {
    margin-right: 4px;
}

section h2 img:hover { 
    cursor: pointer;
}

/*Applies top margin to section if there is a previous section*/
section ~ section{
    margin-top: 5px
}

/* Fieldset & Legend Style */
fieldset {
    margin-top:5px;
	border:1px solid black;
	border-radius:3px;
    background-color: var(--background-80);
} 

/* Article is not required in current layout */
article {

}

legend {
	padding:0px 8px 0px 8px;
	background-color: var(--background-70);
	font-size: 1.1rem;
	font-weight: bold;
	border-radius:3px;
	border:1px solid black;
}

legend span{
    font-size: .8rem;
}

legend span::before{
    content:" (";
}

legend span::after{
    content:")";
}

legend img {                 /*Excel Button*/
    cursor:pointer;
}

label {
    white-space: nowrap;	/*Prevents Wrapping of label*/
    font-weight: bold;
}

/* add : to all labels */
/* label::after{ */
label:not(:empty)::after {
    content: ":";
}

/* remove : from checkbox labels*/
label.checkbox::after{
    content: "";
}

label,  input{
	vertical-align: middle;
}

/*Add a left margin to a label if there is a the previous element was an input of type text*/
input[type=text] + label{
	margin-left: 12px;
}

/*Add a left margin to a label if there is a the previous element was an input of type image*/
input[type=image] + label{
	margin-left: 12px;
}

/*Add a left margin to a label if there is a the previous element was an select*/
select + label{
	margin-left: 12px;
}


img{
	vertical-align: middle;
}

/*Class to change cursor to pointer */
.img_button{
    width: 16px;
    cursor: pointer;
    transition: all 0.5s;
}

.img_button:hover { 
    transform: scale(1.2); 
    transition: all 0.5s 
}

/*End of default element style*/

.form_horizontal{
    margin-top:5px;
}

.form_horizontal img{
    vertical-align: middle;
}

.form_vertical label {
    display: block;
}
    
.form_vertical input {
    display: inline-block;
}

.flex-container{
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.flex-container div{
	flex-basis: 100%;		/*Evenly space containers across available space*/
}

/* Buttons*/
input[type=button], input[type=submit],.close_message_dialog {
    background-color: hsl(213, 45%, 40%);
    color: var(--font-colour-100);
    cursor: pointer; 
	min-width: 135px;
    margin:3px;
    height: 28px;
    border:none;
    border-radius: 6px;  
}


/* style for disabled buttons with a class of navigation */
.navigationButton:disabled {
	pointer-events:none;
	color:#d2d2d2;
	background-color: var(--background-70);
}

input[type=button]:hover, input[type=submit]:hover, .close_message_dialog:hover{
	/* background-color: var(--button-75); */
    background-color:hsl(213, 45%, 50%);
    /* border-color: var(--background-20); */
    /* box-shadow: 0 0 0 3px var(--background-60); */
    transition: 0.3s;
}

input[type=button]:disabled, input[type=submit]:disabled, .close_message_dialog:disabled {
    pointer-events:none;
	color:#d2d2d2;
	background-color: var(--background-70);
}

.support{
    background-color: red;
}

/*Input Box Text*/
input[type=text] {
	padding: 3px;
	border: 1px solid var(--button-20);
	border-radius: 3px;
	resize: none;
	background-color: var(--input-edit);
    /* filter: blur(3px); */
}

/*Input Box Number*/
input[type=number] {
    padding: 3px;
    border: 1px solid var(--button-20);
    border-radius: 3px;
    resize: none;
    background-color: var(--input-edit);
    -moz-appearance: textfield;
}

/* disable the up and down arrows for input numbers */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*Set Background Colour for read only boxes*/
input[readonly]{
    background-color: var(--input-readonly);
    height: 1.75rem  /* added 18/4/25 */
}

/*Input Box date*/
input[type=date] {
	padding: 3px;
	border: 1px solid var(--button-20);
	border-radius: 3px;
	resize: none;
	background-color: var(--input-edit);
}

/*Set Background Colour for read only boxes*/
input[readonly]{
    background-color: var(--input-readonly);
}

.admin[type=text],.admin[type=submit] {
    background-color: #febcc2;
}

input[type=text]:focus, input[type=date]:focus, input[type=number]:focus, textarea:focus, select:focus {
    background-color: hsl(60, 100%, 85%);
    outline: none !important;
    border:1px solid var(--background-20);
    box-shadow: 0 0 10px var(--background-30);
}

input[readonly]:focus{
    background-color: var(--input-readonly);
    box-shadow: none;
}

textarea[readonly]:focus{
    background-color: var(--input-readonly);
    box-shadow: none;
}

/*Text counter at the bottom of the textarea*/
textarea + span {
    float:right;
    color:gray;
  }



/*Select Box*/
select {
	padding: 3px;
	border: 1px solid var(--button-20);
	border-radius: 3px;
	resize: none;
	background-color: var(--input-edit);
}

select:disabled {
    border: 1px solid var(--button-20);
    background-color: var(--input-readonly);
    color: var(--font-colour-0);
    appearance: none;
    opacity: 1;
}

textarea {
	width: 100%;
	/* margin-top:3px;  Removed 18/04/25*/
	min-height: 150px;
	padding: 3px;
	box-sizing: border-box;
	border: 1px solid #033568;
	border-radius: 3px;
	resize: none;
	background-color: var(--input-edit);
	white-space: pre-wrap;
    /* filter: blur(3px); */
    field-sizing: content; /*added 18/04/25 removes scrollbar*/
}

textarea[readonly]{
    background-color: var(--input-readonly);
}

/* Common dialog style added 08/03/24 David Ardis */
dialog{
    max-width: 60%;
    font-size: 1rem;
    padding:6px;
    border: none;
    border-radius: 6px;
    /* background-color:transparent; */
}

dialog p{
    padding: 0px;
    margin:3px;
}

dialog h2{
    margin: 0px;
}

dialog h3{
    margin: 0px;
}

dialog section{          
    /* box-shadow: 0px 0px 30px 6px var(--page-shadow); */
}

dialog::backdrop{
    background: black;
    opacity: 0.8;
}

.approve_dialog{
    min-width: 550px;
}

/*error class is added by javascript*/
.error_dialog{
   background-color: hsl(0, 100%, 80%);
}

.error section{
    background-color: hsl(0, 100%, 80%);
}

.approve_dialog_error_text, .message_dialog_error_text{
    display: none;
    font-weight: bold;
    font-size: 1.1rem;
}

/* checkbox style added 15-02-24 David Ardis */
.checkbox{
    display:inline-flex;
    align-items: center;
  }
  
  .checkbox__input {
    display: none;
  }
  
  .checkbox__box {
    width: 1.25em;
    height: 1.25em;
    border: 1px solid black;
    border-radius: 2px;
    display:flex;
    align-items: center;
    justify-content: center;
    margin: 2px 5px;
    flex-shrink: 0;
    background: var(--input-edit);
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
  
  }
  
  .checkbox__box::after {
    content:'\2714';
    color: var(--input-edit);
  }
  
  .checkbox__input[disabled] + .checkbox__box {
    background: var(--input-readonly);
    cursor: default;
  }
  
  .checkbox__input + .checkbox__box {                   /*Required to reset any previous flex-basis that might be on page*/
   flex-basis: auto;
  }
  
  .checkbox__input[disabled] + .checkbox__box::after {
    color: var(--input-readonly);
  }
  
  /*.checkbox__input:checked + .checkbox__box {
    background: #2266dc;
    border-color: #2266dc;
  }*/
  
  .checkbox__input:checked + .checkbox__box::after {
    color: Black;
  }
  
  @media print {
    .checkbox__box{
      background-color: white;
    }
  }

/* Search at the top of pages */
.textsearch {
    font-size: 1rem;
    margin: 5px;
}

.textsearch input[type=text] {
    width:450px;
    padding: 3px;
    border: 1px solid var(--button-20);
    border-radius: 3px;
}

/* Search at the top of pages with Icons at the end */
.text-search-icon{
    background-color:var(--input-edit);
    border: 2px solid var(--background-20);
    margin-bottom:5px;
    width: 400px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.text-search-icon button svg {
    color: var(--font-colour-0);
    fill: currentColor;
    }

.text-search-icon::placeholder {
    color: var(--font-colour-100);
    opacity: 0.7; 
    }

.text-search-icon input {
    color: var(--font-colour-0);
    border:none;
    width: 100%;
}

.text-search-icon input:focus {
    outline: none;
    box-shadow: none;
    border:none;
}

.text-search-icon button {
    all: unset;
    cursor: pointer;
    width:1.2rem;
    padding-right:0.5rem;
    padding-top:0.3rem;
}

.report_filters{
    margin-top: .5rem;
    margin-bottom: .5rem;
}

/* Footer Styling */
.footerbanner{
    clear: both;                                        /* Clear the float left fron the menu */ 
    background-color:var(--background-36);  
    height: var(--footer-height);
    
    font-size: 1rem;
}

.footerbanner div.footerleft{
    float: left;
    width: 200px;
    /*height: 60px;*/
}

.footerbanner div.footerleft h2:first-letter {
    color:var(--first-letter);
}

.footerbanner div.footerleft h2 {
    font-size: .8rem;
    text-align: left;
    color:var(--font-colour-100);
    margin: 3px;

}

.footerbanner div.footerright{
    float: right;
    width: 200px;
    /*height: 60px;*/
}

.footerbanner div.footerright p{
    color:var(--font-colour-100);
    font-weight: bold;
    text-align: right;
    margin: 3px;
    margin-top: 20px;
}

.warning {
	color: red;
	font-weight: bold;
}

/* Red Warning Box */
.red_warning {
    display: block;
    position: relative;
    margin-top: .4rem;
    margin-bottom: .4rem;
    padding: .5rem .5rem .5rem 2.5rem;
    background-color: hsl(7, 89%, 90%);
    border: 1px solid hsl(7, 89%, 50%);
    border-left: 4px solid hsl(7, 89%, 50%);
    border-radius: 3px;  
}


.red_warning::before{
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 17px;
    left: .3rem;
    background-image: url(/images/red_warning.svg);
    background-size: 20px;
}

/* Amber Warning Box */
.amber_warning {
    display: block;
    position: relative;
    margin-top: .4rem;
    margin-bottom: .4rem;
    padding: .5rem .5rem .5rem 2.5rem;
    height: 30px;
    background-color: hsl(48, 100%, 80%);
    border: 1px solid hsl(48, 100%, 58%);
    border-left: 4px solid hsl(48, 100%, 58%);
    border-radius: 3px;  
}


.amber_warning::before{
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 17px;
    left: .3rem;
    background-image: url(/images/yellow_warning.svg);
    background-size: 20px;
}

/* Amber Warning Box if form has been amended */
.form_amended_warning {
    display: none;
    margin-top: .4rem;
    margin-bottom: .4rem;
    padding: .5rem .5rem .5rem 2.5rem;
    height: 30px;
    background-color: hsl(48, 100%, 80%);
    border: 1px solid hsl(48, 100%, 58%);
    border-left: 4px solid hsl(48, 100%, 58%);
    border-radius: 3px;  
}

.form_amended_warning::before{
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 17px;
    left: .3rem;
    background-image: url(/images/yellow_warning.svg);
    background-size: 20px;
}

/* Green information Box */
.green_information {
    display: block;
    position: relative;
    margin-top: .4rem;
    margin-bottom: .4rem;
    padding: .5rem .5rem .5rem 2.5rem;
    background-color: hsl(120, 100%, 90%);
    border: 1px solid hsl(120, 100%, 25%);
    border-left: 4px solid hsl(120, 100%, 25%);
    border-radius: 3px;  
}

.green_information::before{
    content: '';
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: .5rem;
    background-image: url(/images/green_information.svg);
    background-size: 16px;
    
}

.message {
	color: green;
	font-weight: normal;
}

.blue_text {
	color: blue;
	font-weight: normal;
}

.lightseagreen_text {
	color: lightseagreen;
	font-weight: normal;
}

.red_text {
	color: red;
	font-weight: normal;
}

.orange_text {
	color: orange;
	font-weight: normal;
}

.green_text {
	color: green;
	font-weight: normal;
}

/*Hide Parent Page for modal forms*/
#divBackground {
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    left:0;
    background-color: Black;
    filter: alpha(opacity=60);
    opacity: 0.6;
    -moz-opacity: 0.8;
    display:none
}

/*Loading page popup*/
.page_loading{
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    background-color: rgba(0,0,0,0.8);
    transition: visibility 0s .5s, opacity .5s linear;

}

.page_loading::after{
    content:"";
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 400px;
    height: 200px;
    
    background-color: white;
    background-image: url("/images/loading.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;

    border-style: solid;
    /*border-color: var(--background-20);*/
    border-width: 3px;
    border-radius: 7px;
}

.usermessage{
    border:1px solid black;
    background-color: #ffdddd;
    margin: 2px;
    padding: 2px;
    border-radius: 3px;
    display: none;
}

/*Hides administator Element);*/
.admin_elememt{
    display: none;
}

.admin_elememt-tr{
    display: none;
}

.admin_elememt-input{
    display: none;
}

/*Power Users Element;*/
.poweruser_elememt{
    display: none;
}