/* Variables  ________________________________________________________ */


:root {
 /*  --primary: #a30000; */
 --subbic: #3bbea2;
 --primary: #0d7685;
 --secondary: #ff7700;
 --positive: #006600;
 --grey: #EFEFEF;
}

.red { color: red; }
.brand, .subbic { color: var(--subbic); }


/* Globals  ________________________________________________________ */


body { 
	background: white; 
	font-family: neue-haas-grotesk-text, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
}

a { color: var(--primary); }

input, select, textarea, .callout { border-radius: 3px; font-size: 0.9rem; }

a:hover, button:hover, .button:hover {
	opacity: 0.75;
}

h1, h2, h3, h4, h5, h6 { 
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 700;
	font-style: normal;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; color: var(--subbic);  }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }

.text-large { font-size: 125%; }


.wp-template {
    position: fixed;
    left: 10px;
    top: 100px;
    z-index: 11;
    font-weight: bold;
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #000;
    color: #fff;
}

.wp-template span {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}


.callout { border: none;  background: #EEE; }
.callout.success { background: #DFD; }
.callout.warning, .callout.info { background: #FFD; }
.callout.error { background: #FDD; }

.callout a { text-decoration: underline; }


section { padding-top: 5rem;  padding-bottom: 5rem; }
section.grey { background: var(--grey); }





/* Lists ________________________________________________________ */

ul.twocol { columns: 2; }
ul.three { columns: 3; }





/* Screenshots ________________________________________________________ */

.entry-content img.screenshot, .entry-content .screenshots img, .screenshots .entry-content  img {
  display: block;
  height: auto;
  border: 2px solid #3bbea2;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  margin: 1.5em auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  max-width: 80%;
}

.screenshot:hover, .screenshots img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

figure.screenshot {
  text-align: center;
}

figure.screenshot figcaption {
  font-size: 0.9em;
  color: #555;
  margin-top: 0.5em;
}




/* Icons  ________________________________________________________ */

h2 svg { background: var(--subbic);  color: white;  padding: 5px; margin-right: 0.25rem;  border-radius: 3px; }

button svg, a.button svg, a.btn svg { margin-right: 0.25rem; }



/* Buttons  ________________________________________________________ */

button, .button, a.button, a.btn, p.gv-back-link a, input[type=button], input[type=submit], .button-primary, 
.wpdt-c .btn:not(.btn-link), 
.wpdt-c.wdt-skin-light .wpDataTablesWrapper button.DTTT_button, .button-wrapper a  {
	background: var(--subbic);
	color: white;
	border: none;
	padding: 0.75rem 1rem;
	font-weight: 600;
	font-size: 1.1rem;
	border-radius: 3px; 
	text-decoration: none;
}


.wpdt-c .btn:not(.btn-link), .wpdt-c.wdt-skin-light .wpDataTablesWrapper button.DTTT_button {
	background: var(--primary) !important;
	color: white !important;
	border-radius: 3px !important; 
	margin-left: 0.1rem;
	font-size: 0.9em !important;
	padding: 0.75rem 1rem !important;
}

.wpDataTablesWrapper .dataTables_length .bootstrap-select .dropdown-toggle {
	color: var(--subbic) !important;
	border: solid 1px var(--subbic) !important;
	padding: 0.2rem !important;
}



.button-primary {
	background: var(--primary);
}

.gform_footer input[type=submit] {
	background: var(--positive);
}

button:hover, .button:hover, p.gv-back-link a:hover, input[type=button]:hover, input[type=submit]:hover, .button-primary:hover, .wpdt-c.wdt-skin-light .wpDataTablesWrapper button.DTTT_button:hover {
	background: var(--subbic);
	opacity: 0.75;
	cursor: pointer;
}

button.ghost, .button.ghost {
	background: white;
	color: var(--primary);
	border: solid 1px var(--primary);
}


button.positive, .button.positive {
	background: #006600;
}

button.negative, .button.negative {
	background: #CC0000;
}
a.negative { color: #CC0000; }

p.gv-back-link a { display: inline-block; }

button.sqe, a.button.sqe { background: #d1453c; }


button.nobutton {
  background: none!important;
  border: none;
  cursor: pointer;
  color: var(--primary);
  padding: 0.5em !important;
  font-size: inherit;
}

/* Blocks  ________________________________________________________ */

.block {
	box-shadow: 0 0.2rem 0.4rem 0 rgb(0 0 0 / 20%);
	border: solid 1px #EEE;
    border-bottom: 0.5rem solid var(--primary);
    transition: all .3s ease;
    background-color: #fff;
    padding: 0.5rem;
}

.block h2 { font-size: 1.6rem; }
.block h2 i, .block h2 svg { margin-right: 0.25rem; }

.block h3 { font-size: 1.2rem; }

.block img { }

.block a {
	/* color: black; */
}





/* Header  ________________________________________________________ */

header.header { margin-bottom: 3rem; }

.top-bar, .top-bar ul { background: white; }

.top-menu { background: var(--primary); }
.top-menu li, .top-menu li a { color: white; }
.top-menu li .nolink { padding: 0.7rem 1rem;  line-height: 1; }

.logo-wrapper a { font-weight: 700;  font-size: 1.4rem;  color: black; }

img.logo { width: 160px; height: 40px; }


ul#main-nav li a {
	color: black;
}

ul#main-nav li a:hover {
	color: var(--subbic);
}

ul#main-nav > li > a {
	font-weight: bold; 
	padding: 5px 15px;
	font-size: 18px;
	margin-left: 1em;
}

ul#main-nav li li a:hover {
	background: #EEE;
	color: black;
	font-weight: bold;
}



.menu .active>a, ul#main-nav li.active a { background: none; color: var(--subbic); }


/* Breadcrumbs ________________________________________________________ */


.breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    text-transform: none;
}
.breadcrumbs a, .breadcrumbs span, .breadcrumbs [aria-hidden="true"] { 
    font-size: 14px; 
    text-decoration: none; 
    
}
.breadcrumbs a {
    text-decoration: underline;
    color: #3bbea2 
}
.breadcrumbs a:hover {
    color: black;
}

.breadcrumbs .fa-house,
.breadcrumbs .fa-solid,
.breadcrumbs i {
    color: $primary-color!important;
    font-size: 0.9em;
}
.breadcrumbs [aria-current="page"] {
    font-weight: 500;
}
/* Separator spacing */
.breadcrumbs [aria-hidden="true"] {
    margin: 0 8px;
}


.breadcrumbs li:not(:last-child)::after { content: none; }


/* Dark mode  ________________________________________________________ */

.text-white {
  .breadcrumbs {
    a {
      color: $white;

      &:hover {
        color: $white;
        border-color: $white;
      }
    }

    .separator {
      color: $white;
    }
  }
}



/* Main content  ________________________________________________________ */

.content { padding: 1rem 0 3rem; }

section.primary { background: var(--primary);  color: white; }

.single .wp-post-image { float: right;  width: 33%;  margin: 0 0 1rem 1rem; }


/* Footer  ________________________________________________________ */

footer.footer { margin-top: 6rem; }




/* Home  ________________________________________________________ */

.home h1 { font-size: 2.4rem;  line-height: 1.1;  margin-bottom: 3rem; }
.home h1 span { color: var(--subbic); font-size: 3.6rem;  display: block;  margin-top: 0.5rem;  }


.customers h2 { font-size: 2.2rem; margin-bottom: 1rem; }
.customers img { height: 60px; width: auto;   filter: grayscale(1); }
.customers img:hover { filter: grayscale(0); }





/* Archive  ________________________________________________________ */

.blog article { margin-bottom: 3rem; }
.blog article img.wp-post-image { 
	border: solid 1px #CCC;  
	 -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }



/* Dashboard  ________________________________________________________ */


table.schemas { margin-bottom: 3rem; }

table.schemas th, table.schema td { text-align: left; }

table.schemas .counts-headers th, table.schemas .counts td { text-align: center; }

table.schemas .counts td a { display: inline-block;  padding: 0.25rem 0.5rem;  border: solid 1px var(--subbic);  font-weight: bold;  background: #FFE;  }
table.schemas .counts th a { font-weight: normal; }

table.schemas .schema.featured {
	
	border: solid 3px var(--subbic);
	background: #FFD;

}


/* Schema  ________________________________________________________ */

.menu.actions a { padding: 0.5rem; }

.menu.actions li.disabled a { color: #CCC; }

/* .add-area-wrapper .related-individuals { display: none; } */


/* Filters  ________________________________________________________ */

.filter-wrapper { margin-bottom: 2rem; }

.filter-wrapper .button, .filter-wrapper select, .filter-wrapper input { margin: 0; }


/* Gravity Forms  ________________________________________________________ */

.gfield, body .gform_wrapper.gravity-theme fieldset { margin-bottom: 1.5rem; }

.gsection { margin-top: 1.5rem; }


.gform_body .gfield_html ul { list-style: disc;  padding: 0 0 0 1.5rem;  margin: 0 0 1.5rem; }

[type=checkbox], [type=file], [type=radio] { margin-bottom: 0; }

.gform_wrapper.gravity-theme .gform_footer {
	margin-bottom: 1rem !important;
}

.gform_wrapper.gravity-theme .gv-button-delete {
	background-color: red;
}

div#publishing-action { width: 100%; }

tbody tr.gv-section { background: #666;  color: white; }


.gv-button-update { background: green;  }
.gv-button-cancel { background: #666; }
.gv-button-delete { background: red; }

.gravityview-template.postid-4758 .gv-button-delete { /* Hide Delete submission button on Referees view */
	display: none;
}

.user-role-barrister .manager-only, .user-role-lawyer .manager-only { display: none; } /* Hide manager-only fields when logged in as barrister or lawyer */


/* Fix issue with color picker going off bottom of screen */

.mce-floatpanel {
	position: fixed !important; 
	top: 160px !important;
}


.test-form .gfield_repeater_item {
	float: left;
	width: 95%;
	background: #EEE;
}

.test-form .gfield_repeater_item > .gfield_repeater_cell { 
	float: left;
	width: 31%;
	margin: 0 1%;
}

.gform_wrapper.gravity-theme .gfield_repeater_items .gfield_repeater_cell:not(:first-child) {
	padding-top: 0; 
}

.test-form .gfield_repeater_item > .gfield_repeater_cell:nth-child(4) {
	
	width: 100%;
}

.gform_wrapper.gravity-theme .gfield_repeater_cell label { color: #222; }

.gform_wrapper.gravity-theme .gfield_repeater_cell > .gfield_repeater_wrapper {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 1em 0 0 0;
}

.gfield, body .gform_wrapper.gravity-theme .gfield_repeater_wrapper fieldset {
	margin-bottom: 0; 
}

.gform_wrapper.gravity-theme .gfield > .gfield_repeater_wrapper > .gfield_repeater > .gfield_repeater_items > .gfield_repeater_item > .gfield_repeater_buttons {
	float: left;  width: 100%;
	padding: 1em 0;
}


.gform_wrapper.gravity-theme .field_sublabel_above .description, .gform_wrapper.gravity-theme .field_sublabel_above .gfield_description, .gform_wrapper.gravity-theme .field_sublabel_above .gsection_description {
	margin-top: 0 !important;
	padding-top: 0 !important;
	color: #666;
}




.ts-dropdown .option.case-library-item,
.ts-control .item.case-library-item {
  display: block;
  align-items: flex-start;
  line-height: 1.4;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #eee;
}

.case-library-item h4 {
  display: inline-block;
  color: #3bbea2;
  margin: 0;
  font-weight: 600;
}

.case-library-item .year {
  color: black;
  font-weight: 400;
}

.case-library-item .details {
  display: block;
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.15rem;
}

.case-library-item .areas {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #333;
  opacity: 0.9;
}



body .gpnf-modal .tingle-modal-box {
width: clamp(900px, 90%, 90%) !important;
}



/* Sortable ________________________________________________________ */

.ui-sortable tr:hover {
	cursor: pointer;
}




/* Pagination  ________________________________________________________ */

.pagination-links a { display: inline-block;  padding: 0.1rem 0.5rem;  background: #EEE;  margin-right: 0.25rem; }

.pagination-links a.current { background: var( --subbic);  color: white; }

/* People  ________________________________________________________ */

.people { margin-bottom: 1.5rem; }


/* Tables  ________________________________________________________ */

table.submissions { font-size: 0.9rem; }

tr.dummy { opacity: 0.5; }

tr.sub img { width: 48px;  height: 48px;  float: left;  margin: 0 1rem 0 0; }

tr.sub ul.menu a { padding: 0.5rem; }

table.wpDataTable {}
table.wpDataTable svg { color: var(--subbic); }

table.wpDataTable .actions svg { margin: 0 0.1rem; }




/* Referees  ________________________________________________________ */

.referees tbody td {  }
.single-referee th { text-align: left; }
.referees ul.menu a { padding: 0.25rem; }


/* Labels  ________________________________________________________ */

.label { }
.live .label { background: green; }
.dummy .label { background: #CCC; }



/* Sort-filter  ________________________________________________________ */

/* Make radio buttons inline */
.sort-options label.inline-radio {
    display: inline-block;
    margin-right: 15px; /* Space between options */
}

/* Bold "Sort by" label */
.sort-options legend.bold-label {
    font-weight: bold;
}








/* Support button  ________________________________________________________ */

a.support.button {
	background: #0d7685;
	position: fixed;
	bottom: 10px;
	right: 10px;
	
}


/* People  ________________________________________________________ */

p.last-seen { font-size: 12px;  margin-top: 1.5rem; }

/* Media queries  ________________________________________________________ */


/* Small __________________ */

@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

/* Medium __________________ */

@media only screen and (min-width: 40.063em) {
	
	.dropdown.menu.medium-horizontal>li.is-dropdown-submenu-parent>a::after {
		border-color: white transparent transparent;
	}
	
	 } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* Large __________________ */

@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/* X Large __________________ */

@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XX Large __________________ */

@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */