/*This file is for Zake specific CSS in addition to bootstrap helper classes.*/
div.search input {width: auto; display: inline-block;}

/*Fixed width for first column of vertical tables*/
table.vertical-table tr th {width: 25%;}

/*Styles for Template/Element/organisation.ctp which prints an organisation*/
.office-details {background: #f8f8f8;}
.user-details {background: #f0f0f0;}

/*Access allowed or denied for links, see View/Helper/HtmlWithAccessHelper.php*/
nav.navbar a.access-denied {display: none;}
a.access-denied {color: red;}

/*For headings in sidenav*/
nav#actions-sidebar h5 {margin: 20px 0 5px 20px;}

/*For sub navigation in the menu*/
ul.navbar-nav > li {position: relative;}
ul.navbar-nav > li:hover > ul.dropdown-menu {display: block; margin-top: 0; background-color: #446E9B;}

/************************************ CLIENTS AND ADDRESS BOOK ************************************/
/*Don't extend tables across whole width*/
table, .table {width: auto;}
legend {color: black; font-size: 1.75rem; font-weight: 500;} /*make legend the same as h3*/
legend span, h3 span, h4 span, h5 span {color: #cccccc;}
h3 span.links, h4 span.links, h5 span.links {font-size: 0.875rem;}
h3 span.links a, h4 span.links a, h5 span.links a {font-size: 0.875rem;}
h3 span.links a.access-denied, h4 span.links a.access-denied, h5 span.links a.access-denied {color: #ff6666;}
div.organisations table {margin-bottom: 1.5rem;}
div.organisations table.organisation th, div.organisations table.office th, div.organisations table.user th {padding-left: 0;}
div.organisations table.organisation th {width: 250px;}
div.organisations .office {margin-left: 50px;}
div.organisations table.office th {width: 200px;}
div.organisations .user {margin-left: 100px;}
div.organisations table.user th {width: 150px;}
li.logo {text-align: center;}
li.logo img {max-width: 90%; max-height: 120px;} /*for client logos*/
td.logo img {max-width: 200px; max-height: 120px;}
/*td.repeated a {display: none;} */
td.repeated a, td.repeated span {display: none;}
td.repeated::after {content: "as above"; color: #eeeeee; font-style: italic;}
td.nouser::after {content: "none"; color: #cccccc; font-style: italic;}
th a.asc::after {content: "\25B2"; font-size: 60%; vertical-align: top;}
th a.desc::after {content: "\25BC"; font-size: 60%; vertical-align: top;}
span.rubbishbin::before {content: "\1F5D1";}

table.nicelooking {
    border-collapse: separate;
    border: 1px solid #cfcfd6;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius: 5px;
    border-bottom: none;
}
table.nicelooking thead th {
    font-weight: normal;
    background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#fbfbfc), to(#e5e5e9));
    background-image: linear-gradient(#fbfbfc, #e5e5e9);
    border-right: 1px solid #cfcfd6; 
    border-bottom: 1px solid #cfcfd6; 
}
table.nicelooking td {
    border-top: none;
    border-right: 1px solid #cfcfd6; 
    border-bottom: 1px solid #cfcfd6; 
}
table.nicelooking thead th:last-child {border-right: none;}
table.nicelooking td:last-child {border-right: none;}


/************************************ BETTER FORMS 24/8/2018 ************************************/
table, .table {width: auto;} /*Don't extend tables across whole width*/
.form-control, input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], input[type=file], select, textarea {width: 30%; min-width: 200px; max-width: 400px;}
label {width: 180px; padding-right: 20px; vertical-align: top; padding-top: 6px;}
div.checkbox label {width: 500px; padding-left: 20px; text-indent: -20px;} /*indent so text doesn't go underneath checkbox - see Template/Users/edit.ctp*/
/* From 20/10/2022, when using CakePHP's own multiple=checkbox to display multiple checkboxes View/Helper/FormWithExtrasHelper.php adds a div.checkboxwrapper div*/
div.checkboxwrapper {display: inline-block;}
div.checkboxwrapper div.checkbox label {width: auto;}
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], input[type=file], select, textarea {display: inline;}
select {min-width: 0; width: auto;}
input[type=number] {min-width: 50px; width: 100px;} /*number fields are narrow*/
div.required label::after {content: "*"; color: red;} /*required fields have an asterisk*/
p.requiredinstruction {font-size: 80%;}
p.requiredinstruction::before {content: "*"; color: red;}
span.showtooltip {padding-left: 2px; display: none;} /*see src/View/Helper/FormWithTooltipHelper.php, changed to inline by jQuery*/
span.showtooltip::after {content: "\2753";}
h3 span.showtooltip, h4 span.showtooltip {padding-left: 0; margin-left: -5px;}
::placeholder {color: #cccccc !important;} /*doesn't work*/
input.datepicker {min-width: 80px; width: 80px; font-size:12px; padding-left: 3px; padding-right: 3px;}
div.loadingafterpress {position: fixed; left: 50%; top: 50%; margin-left: -150px; margin-top: -80px; background: #3e648d; color: white; font-size: 300%; padding: 80px;}
div.paginator select[name=results_per_page] {font-size: 80%; padding:0; margin:0; height: auto;}
img.externallink {width: 25px; margin-top:-3px;}

/************************************ MULTI CHECKBOX WRAPPED ************************************/
div.multicheckboxwrapped {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    display: inline-block;
    width: auto;
    position: relative;
    background-image: linear-gradient(#dee4ea, white);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
div.multicheckboxwrapped > span {display: block; padding:5px;}
div.multicheckboxwrapped > div {
    padding: 3px 6px;
    display: none;
    position: absolute;
    background: white;
    opacity:1;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}
div.multicheckboxwrapped:hover > div {display: block;}
div.multicheckboxwrapped > div > div {display: block;}
div.multicheckboxwrapped > div > div > label {display: inline-block; width: auto;}


/************************ Modal Search Dialog for site alerts *****************************/
div.modalwindow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 300px;
    transform: translate(-50%, -50%); /*https://stackoverflow.com/a/38675442/4370999*/
    background: #3e648d;
    color: white;
    font-size: 150%;
    padding: 20px;
}
div.modalwindow button:first-of-type {position: absolute; bottom: 20px;}
div.modalwindow button:last-of-type {position: absolute; bottom: 20px; right: 20px;}