/*******
 * @package xbCommon Files
 * @filesource media/css/xbcommon.css
 * @version xbmusic-J5 0.0.59.15 14th December 2025
 * @author Roger C-O
 * @copyright Copyright (c) Roger Creagh-Osborne, 2025
 * @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 ******/
/****
 Contents
 1. Atum admin template changes
 2. Joomla core css changes
 
****/

/* reduce Atum bottom margin on details */
#xbcomponent details {
	margin: 0 0 0.5rem 0;
}

/* disable Joomla5 Atum template target hinting arrow-out-box using a:before */
#xbcomponent a[target="_blank"]:before {
    content:unset;
}
/* disable Joomla5 Atum component forced underline on a inside table */
#xbcomponent table a {
	text-decoration:none;
}

/* fix for annoying change in Atum template which destroys white text in labels and badges */
#xbcomponent a.xblabel, #xbcomponent a.xbbadge {
	color: #fff; 
}

/* restore Joomla j5 template styles missing */
.pull-right {
	float: right;
}
.pull-left {
	float: left;
}
.hide {
	display: none;
}
.show {
	display: block;
}

/* Joomla system overrides/improvements */ 

/* set width to 100% for controls in subform) */
.subform-repeatable-group .controls .chzn-container.chzn-container-single {
  width: 100% !important;
}

/* inline list */
ul.inline {
    margin-left: 0;
    padding: 0;
    list-style: none;
}

/*adjust default margins round labels for tags and cats */
.xblabel, .xbbadge { 
	margin:2px;
}
ul.inline > li {
	margin: 0;
	display: inline-block;
}

/*adjust spacing between tag labels in tag layout */
#content .well .module-title.nav-header {
    padding-left: 4px;
}

/*give visual hint to presence of tooltips*/
.hasTooltip {
  	text-decoration-line: underline; 
	text-decoration-color: #a0a0a0;
	text-decoration-style: dotted; 
    text-underline-position: under;
}
.hasPopover {
  	text-decoration-line: underline; 
	text-decoration-color: #a0a0a0;
	text-decoration-style: dashed; 
    text-underline-position: under;
}
.xbhover, .xbhover:hover {text-decoration: underline dotted;} 
.xbfocus, .xbfocus:hover {text-decoration: underline dashed;}
.xbclick, .xbclick:hover {text-decoration: underline solid;}

/* override the annoying default transparency on bootstrap tooltips */
.tooltip.in {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}
/* Popover styles - these override the defaults*/
  .popover {max-width:50% !important;}
  .popimg {max-width:40vw;}

/* border around popover */
 .xbcultpop + .popover {
    border: 2px solid;
}
/* Popover Title */
.xbcultpop + .popover > .popover-title {
    padding: 4px 5px 3px 5px;
    border-bottom: 1px solid;
    font-size: 1.0em;
    text-align:center;
}
/* Popover Body */
.xbcultpop  + .popover > .popover-content {
    font-size: 0.95em;
    padding: 4px 8px 4px 8px;
}
.xbcultpop  + .popover > .popover-content > a {
  font-weight:bold;
}
/* for popover colours see XbGeneral::popstylecolours() Arrows */

/* use an empty custom button as a toolbar spacer (22px is minimum width*/
#toolbar- .btn {
	visibility:hidden; width:22px;
}
/* add spacing in toolbar to group buttons */
#toolbar-publish,  #toolbar-batch {
	margin-left:25px;
}
 
/* make tab titles a bit more prominent */
ul.nav-tabs { 
	font-weight:bold;
	font-size:1.1em;
}
	
/* style accordions */
.xbaccordion .accordion-heading {
	background-color:#eee;	
}
.xbaccordion .accordion-body {
	background-color:aliceblue;
}

/** classes to reduce label width on horizontal form layout **/
.xblblcompact .control-group .control-label {
	width: unset;
}

/** reduce width for controls label and input/select - use this on parent div wraping the control(s) */
.xbctl150 .control-label, .xbctl150 input, .xbctl150 select {
	max-width: 150px;
}

/* end of joomla system overrides */

/* dialog item previews */
.xbpveye { color:#44c; }
.xbpveye:hover { 
	cursor:pointer;
	color:#2ac;
}
.xbpvitem {
	padding:15px 30px;  
}
.xbpvitem .joomla-dialog-header h3 {
	font-size:1.1rem; 
	font-weight:normal; 
	color:gray;}
.xbpvitem .joomla-dialog-header .buttons-holder {
	font-size:0.8rem;
}
/* ext link icons */
.xbicomag {
  color:#828;
}
.xbicomag:hover {
  color:#c4c;
}


/* boxes with rounded corner border and gradient shading */
.xbbox {
	padding: 8px 7px 7px 15px;
	margin: 0 0 8px;
	list-style: none;
	border: solid 1px #777777;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.xbboxshadow {
	-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
}
.xbbox > legend {
    float: none;
    color: #000;
    background-color: var(--body-bg);
    width: auto;
    padding: 0 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.xbboxwht, .xbbgwht {
	background-color: #f7f7f7; /* to lift from pure white bckgrnd */
}

/* box gradientbackgrounds */
.gradpurple { background-image: linear-gradient(#ffffff, #df7fff); }
.gradpink { background-image: linear-gradient(#ffffff, #ffc0c0); }
.gradyellow { background-image: linear-gradient(#ffffff, #ffffaf); }
.gradgreen { background-image: linear-gradient(#ffffff,#ccffcc); }
.gradcyan { background-image: linear-gradient(#ffffff,#8fffff); }
.gradblue { background-image: linear-gradient(#ffffff,#90a0ff); }
.gradmag { background-image: linear-gradient(#ffffff,#ffc0ff); }
.gradgrey { background-image: linear-gradient(#ffffff,#dddddd); }
.gradcat { background-image: linear-gradient(#ffffff,#8c8); }
.gradtag { background-image: linear-gradient(#ffffff,#88c); }

/* vertical scrolling for boxes - use with max-height (.xbmhxxx) */
.xbyscroll {
	overflow-y:scroll;
}

/* badges and labels 
.xbbadge and xblabel are provided for j5 consistency with j3 isis and prostar templates */

.xblabel,
.xbbadge {
	display: inline-block;
	font-weight: bold;
	color: #fff;
	vertical-align: baseline;
	white-space: nowrap;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #999;
    border: solid 1px #777;
}
#xbcomponent a.xblabel {
	color: #fff; /* fix for annoying change in Atum template */
}
.xblabel {
	font-size: 0.8rem;
	line-height: 1.0rem;
	padding: 4px 6px 5px 6px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.xbbadge {
	font-size: 0.8rem;
	line-height: 1.0rem;
	padding: 4px 9px;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
}
.xblabel:empty,
.xbbadge:empty {
	display: none;
}
a.xblabel, a.xbbadge {text-decoration: none !important; }
a.xblabel:hover,
a.xblabel:focus,
a.xbbadge:hover,
a.xbbadge:focus {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}
.xbbadge-large, .xblabel-large {
   line-height:1.5em !important; 
   padding:0 12px !important; 
   font-size:1.2em !important;
}
.xbbadge, .xblabel {
	text-shadow: none;
}

.label-important,
.badge-important {
	background-color: #a94442;
}
.label-important[href],
.badge-important[href] {
	background-color: #843534;
}
.label-warning,
.badge-warning {
	background-color: #f89406;
}
.label-warning[href],
.badge-warning[href] {
	background-color: #c67605;
}
.label-success,
.badge-success {
	background-color: #3c763d;
}
.label-success[href],
.badge-success[href] {
	background-color: #2b542c;
}
.label-info,
.badge-info {
	background-color: #31708f;
}
.label-info[href],
.badge-info[href] {
	background-color: #245269;
}
.label-inverse,
.badge-inverse {
	background-color: #333;
}
.label-inverse[href],
.badge-inverse[href] {
	background-color: #1a1a1a;
}
.badge-pink, .label-pink {
	background-color: rgb(255, 170, 174)!important;
}
.badge-red, .label-red {
	background-color: #e70000 !important;
}
.badge-yellow, .label-yellow {
	background-color: #f7f78f !important; 
}
.badge-gold, .label-gold {
	background-color: #FFB514;
}
.badge-orange, .label-orange {
	background-color: #e66100 !important;
}
.badge-ltgreen, .label-ltgreen {
	background-color: #ccffcc !important;
}
.badge-green, .label-green {
	background-color: #009900 !important;
}
.badge-cat, .label-cat {
	background-color: #007700 !important;
}
.badge-cyan, .label-cyan {
	background-color: #5fffff !important;
}
.badge-drkcyan, .label-drkcyan {
	background-color: #00a0a0 !important;
}
.badge-ltblue, .label-ltblue {
	background-color: #99c1f1!important;
}
.badge-blue, .label-blue{
	background-color: #0000cf !important;
}
.badge-tag, .label-tag {
	background-color: #3f61db !important;
}
.badge-aoy, .label-aoy {
	background-color: #d36383 !important;
}
.badge-ltmag, .label-ltmag {
	background-color: #ffbbff !important;
}
.badge-mag, .label-mag {
	background-color: #7f007f !important;
}
.badge-white, .label-white {
	background-color: #ffffff !important;
}
.badge-ltgrey, .label-ltgrey {
	background-color: #ccc !important;
}
.badge-grey, .label-grey {
	background-color: #777777 !important;
}
.badge-black, .label-black {
	background-color: #000 !important;
}
.extlinklabel {
	border: solid 1px #d36383;
}

.badge-yellow, .label-yellow, .badge-ltgreen, .label-ltgreen,
.badge-cyan, .label-cyan, .badge-ltblue, .label-ltblue,
.badge-ltmag, .label-ltmag, .badge-ltgrey, .label-ltgrey,
.badge-pink, .label-pink, .badge-white, .label-white {
	color: #555 !important;
}

/* xb classes for simple styles 
some common combinations are also defined 
	xbnit - normal weight,italic, 5px left pad
	xbcredit - xbr08 & xbit
	xbtitle - xbr12 & xbbold
	xbsubtitle - xbr11 
	xbnote - xbr09 xbnorm xbit
	xbnit - xbnorm xbit
*/

/* centre div or table cell */
.xbcentre { margin-left:auto; margin-right:auto;}

/*vcentre with flex - container must have specified height */
.xbflexvc {display:flex; align-items: center; }

/* text alignment */
.xbtc, .xbcredit {text-align:center;}
.xbtr {text-align:right;}
.xbvc {vertical-align:middle;}

/* text decoration */
.xbnotdec {
	text-decoration: none !important;
} 

/* font sizes in em */
/* xbNN are deprecated - use xbrNN instead */
.xb15 { font-size:1.5em; }
.xb12 { font-size:1.2em; }
.xb11 { font-size:1.1em; }
.xb10 { font-size:1.0em; }
.xb095 { font-size:0.95em; }
.xb09 { font-size:0.9em; }
.xb085 { font-size:0.85em; }
.xb08 { font-size:0.8em; }

/* font sizes in rem */
.xbr15 { font-size:1.5rem; }
.xbr12, .xbtitle { font-size:1.2rem; }
.xbr11, .xbsubtitle { font-size:1.1rem; }
.xbr10 { font-size:1.0rem; }
.xbr095 { font-size:0.95rem; }
.xbr09, .xbnote { font-size:0.9rem; }
.xbr085 { font-size:0.85rem; }
.xbr08, .xbcredit { font-size:0.8rem; }

/* font weights and styles */
.xbnorm, .xbnit, .xbnote { font-weight: normal; }
.xbbold, .xbtitle { font-weight: bold; }
.xbit, .xbnit, .xbcredit, .xbnote { font-style:italic; }
.xbfw300, .xbsubtitle {font-weight:300;}

/* margins */
.xbm0 { margin:0 !important; } /*flagged important as used to override any template margins*/
.xbm5 { margin: 5px; }
.xbml10, .xbsubtitle { margin-left:10px; }
.xbml15 { margin-left:15px; }
.xbml20 { margin-left:20px; }
.xbml50 { margin-left:50px; }
.xbml100 { margin-left:100px; }

.xbmr10 { margin-right:10px; }
.xbmr20 { margin-right:20px; }
.xbmr50 { margin-right:50px; }

.xbmt2 { margin-top:2px; }
.xbmt5 { margin-top:5px; }
.xbmt10 { margin-top:10px; }
.xbmt20 { margin-top:20px; }

.xbmb0 { margin-bottom:0; }
.xbmb5 { margin-bottom:5px; }
.xbmb8, .xbtitle { margin-bottom:8px; }
.xbmb12 { margin-bottom:12px; }
.xbmb20 { margin-bottom:20px; }

/* padding */
.xbp10-20 {padding: 10px 20px;}
.xbpb10 { padding-bottom:10px;}
.xbpl5 {padding-left:5px;}
.xbpl10 {padding-left:10px;}
.xbpl15 {padding-left:15px;}
.xbpl20 {padding-left:20px;}
.xbpl30 {padding-left:30px;}
.xbpl50 {padding-left:50px;}
.xbpr5, .xbnit { padding-right:5px; }
.xbpr10 { padding-right:10px;}
.xbpr20 { padding-right:20px;}
.xbpt5 { padding-top:5px;}
.xbpt10 { padding-top:10px;}
.xbpt17 { padding-top:17px;}

/* heights */
.xbht200 {height:200px;}
.xbht150 {height:150px;}

/* maxheights */
.xbmh200 {max-height:200px; }
.xbmh300 {max-height:300px; }
.xbmh400 {max-height:400px; }
.xbmh800 {max-height:800px; }
.xbmh30dvh {max-height:30dvh; }
.xbmh50dvh {max-height:50dvh; }
.xbmh60dvh {max-height:60dvh; }

/* widths */
.xbw18 {width: 18px; }
.xbw100 {width:100px; }
.xbw125 {width:125px; }
.xbw150 {width:150px; }
.xbw600 {width: 600px;}

.xbwi125 {width: 125px !important;}

.xbwp100 {width:100%; }
.xbwp60 {width:60%; }
.xbwp50 {width:50%; }
.xbwp40 {width:40%; }

/* maxwidth eg for divs */
.xbmw450 { max-width:450px; }
.xbmw600 { max-width:600px; }
.xbmw1000 { max-width:1000px; }
.xbmw1100 { max-width:1100px; }
.xbmw1200 { max-width:1200px; }
.xbmw1400 { max-width:1400px; }

.xbmwp100 {max-width:100%; }
.xbmwp60 {max-width:60%; }
.xbmwp50 {max-width:50%; }
.xbmwp40 {max-width:40%; }


/* borders */
.xbbb1 { border-bottom:solid 1px gray;}

/* some colour things */
.xbhlt {
	background-color: #f7f78f;
	color: #444;
}
/* bg colours */
.xbbgltgrey .xbdim {background-color: #ddd; }
.xbbgltgreen {background-color: #dfd; }
.xbbgltred {background-color: #faa; }
.xbbgwhite {background-color: #fff; }
.xbbggy {background-color: #eee; }

/* fg colours */
.xbgold { color:#edc500; }
.xbred { color:#c00000; }
.xbblue, .xbhelp { color: #22d;}
.xbbook, .xbgreen { color: #008040;}
.xbdarkgrey { color: #555;}
.xbgrey, .xbnote, .xbdim {color:#888;}
.xbinfo {color: #88e;}
.xblightgrey { color: #CCC;}
.xbaoycol {color: #e56b8e !important;}

/* buttons */
.xbabtn {
	padding: 4px 10px;
	margin-bottom: 0;
	vertical-align:middle;
	cursor:pointer;
	background-color: #f3f3f3;
	color: #333;
	border: 1px solid #b3b3b3;
	moz-border-radius: 3px;
    border-radius: 3px;
}
.xbabtn:hover {
	background-color: #457D54;
	color: #fff;
}

#xbcomponent .xbcompacttable td {
	padding: 4px 10px;	
}

.xbnobullets {
	list-style: none;
}

/* definition list with term and definition on same line (NB overflow will not be indented */
/* use class="xbdl" in the dl element */
dl.xbdl dt{
  /*display: inline-block;*/
	float: left;
    clear: left; 
	font-weight:normal;
	font-style:italic;
	min-width: 120px;
	text-align:right;
}
dl.xbdl dt:after{
	content:' : ';
}
dl.xbdl dd:before {
  margin-left:10px;
  content:'';
}
dl.xbdl dd {
	padding: 0 0 2px 0;
	margin:0;
}

/* definition list using grid layout and enabling nested list
/* nested list should appear in a dd element of the parent list 
*/
dl.xbgl {
  display: grid;
  grid-template-columns: max-content 1fr;
}

dl.xbgl dt {
  grid-column: 1;
  font-style: italic;
  font-weight: normal;
  text-align: right;
  padding-left:20px;
}
dl.xbgl dt:after {
  content:' :';
}
dl.xbgl dd {
  grid-column: 2;
  margin-left:15px;
}

dl.xbgl dd dl{
  display: grid;
  grid-template-columns: max-content 1fr;
}

/** table freeze header row. wrap table in <div class="table-scroll and <table class="table-freeze **/
.table-scroll {
	max-height:80vh;
	overflow:auto;
	width:100%;
}
.table-freeze {
	text-align: left;
	position: relative;
}
.table-freeze th {
	position: sticky;
	top: 0;
}

/** xbtags field specific modifications to choicesjs **/
.xbtags .choices__list--multiple .choices__item {
    color: #fff;
    background-color: #3f61db;
    /** original  choicesjs settings
    border: 1px solid #00a5bb;
    border-radius: 20px;
    margin-bottom: 3.75px;
    margin-right: 3.75px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    **/
    display: inline-block;
    font-size: 0.8rem;
	line-height: 1.0rem;
	padding: 4px 6px 5px 6px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px; 
}

.xbtags .is-selected { 
   	color: #9b9;
       background-color: #f7f7f7;
       cursor: none;
   }
   .xbtags .choices__item { 
       padding: 3px 10px;
   }

/** styles for ordering column, make order visible */
.xborderip {
	text-align:right;
	width:60px;
	border:1px solid #888;
	background-color:#f7f7f7;
} 

/** simple table with row and cell h padding and horizontal separator lines**/
.xbtablehgrid tbody tr {
	border-bottom: 1px solid #888;
	padding: 10px 0;
}
.xbtablehgrid td {
	padding-right: 10px;
}

/** table header background and border **/
#xbcomponent th {
  background-color: #e0ffff;
  border-top: 1px solid #7dbfbf;
  border-bottom: 1px solid #7dbfbf;
}

/*****subforms *****/
/*shade background of subform headings */
.subform-repeatable thead { 
	background-color:aliceblue;
}
.subform-repeatable .table th {
  font-weight:normal;
  font-style:italic;
}

/** subform compact apply to control **/
.xbsubformcompact table tbody td {
  padding:1px;
}
.xbsubformcompact table tbody td .btn-group { 
	margin: 4px 0;
}
.xbsubformcompact table tbody td .control-group {
  margin-bottom:2px;
}

joomla-field-subform .table .control-group .controls {
	min-width: unset;
}
joomla-field-subform .table  td .form-control {
	width:100%;
}

/** subform text fields width **/
joomla-field-subform .table td input[type="text"],
joomla-field-subform .table td input[type="url"] 
joomla-field-subform .table td input[type="search"] 
joomla-field-subform .table td input[type="tel"] {
	width:100%;
}

/** for use to hide columns in table, need to apply to th and td **/
@media (min-width: 768px) and (max-width: 979px) {
	.hidden-desktop {
		display: inherit !important;
	}
	.visible-desktop {
		display: none !important ;
	}
	.visible-tablet {
		display: inherit !important;
	}
	.hidden-tablet {
		display: none !important;
	}
	.hidden-tab-phone {
		display: none !important;	
	}
}

@media (max-width: 767px) {
	.hidden-desktop {
		display: inherit !important;
	}
	.visible-desktop {
		display: none !important;
	}
	.visible-phone {
		display: inherit !important;
	}
	.hidden-phone {
		display: none !important;
	}
	.hidden-tab-phone {
		display: none !important;	
	}
}