/*******
 * @package xbLibrary
 * @filesource media/css/xblib.css
 * @version 1.0.0.0 4th January 2024
 * @author Roger C-O
 * @copyright Copyright (c) Roger Creagh-Osborne, 2023
 * @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 ******/

/* Joomla system overrides/improvements */ 

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

/* allow width to be set on joomla text area controls
.controls textarea {
	width: unset !important;
}
 */
/*adjust default margins round labels for tags and cats */
.label { margin:2px;}
.tags ul.inline > li {
	margin:0;
}

/*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*/
/* 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 spacer or empty custom button as a toolbar spacer (22px is minimum width) */
#toolbar-spacer .btn,
#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;
}
	
/*shade background of subform headings */
.subform-repeatable thead { 
	background-color:aliceblue;
}
.subform-repeatable .table th {
  font-weight:normal;
  font-style:italic;
}

/* style accordions */
.xbaccordion .accordion-heading {
	background-color:#eee;	
}
.xbaccordion .accordion-body {
	background-color:aliceblue;
}

/*hide default icon in admin toolbar */
.page-title>.icon-generic {display:none;}

/* end of joomla system overrides */

/* badges and labels 
-important(reddish) -warning(orange) -success(green) -info(blue) -inverse(darkgrey) 
are defined in template with slightly darker colour when href and white bold text
adding here some more named colours, the lighter ones with grey border and text 
green and blue are used for categories and tags
*/

.badge-pink, .label-pink {
	background-color: #ffafaf!important;
}
.badge-red, .label-red {
	background-color: #e70000 !important;
}
.badge-yellow, .label-yellow {
	background-color: #f7f78f !important; 
}
.badge-orange, .label-orange {
	background-color: #e66100 !important;
}
.badge-ltgreen, .label-ltgreen {
	background-color: #ccffcc !important;
}
.badge-green, .label-green, .badge-cat, .label-cat {
	background-color: #009900 !important;
}
.badge-cyan, .label-cyan {
	background-color: #5fffff !important;
}
.badge-drkcyan, .label-drkcyan {
	background-color: #00a0a0 !important;
}
.badge-ltblue, .label-ltblue {
	background-color: #c0c0ff !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;
    border: solid 1px #777;
}
.badge-large, .label-large {
   line-height:1.5em !important; 
   padding:0 12px !important; 
   font-size:1.2em !important;
}


/* 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);
}
.xbboxwht, .xbbgwht {
	background-color: #f7f7f7; /* to lift from pure white bckgrnd */
}

/* box gradientbackgrounds */
.gradpink { background-image: linear-gradient(#ffffff, #ffc0c0); }
.gradyellow { background-image: linear-gradient(#ffffff, #ffffaf); }
.gradgreen, .gradcat { background-image: linear-gradient(#ffffff,#ccffcc); }
.gradcyan { background-image: linear-gradient(#ffffff,#8fffff); }
.gradblue, .gradtag { background-image: linear-gradient(#ffffff,#7a7aff); }
.gradmag { background-image: linear-gradient(#ffffff,#ffc0ff); }
.gradgrey { background-image: linear-gradient(#ffffff,#dddddd); }

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

/* the preview eye button */
.xbeye {
	color:#fff; 
	background-color:#689fcc; 
	text-align:center; 
	padding:2px 4px 1px 4px;
	border-radius: 4px;
}
.xbeye:hover {
	background-color:#185b91;
}

/* icomoon eye */
.xbimeye {
	outline: #888 solid 1px; 
	padding:0 5px 0 5px;
}

/* xb classes for simple styles 
some common combinations are also defined (eg xbnit - normal weight,italic, 5px left pad)
*/

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

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

/* font sizes in em */
.xb15 { font-size:1.5em; }
.xb12, .xbtitle { font-size:1.2em; }
.xb11, .xbsubtitle { font-size:1.1em; }
.xb10 { font-size:1.0em; }
.xb095 { font-size:0.95em; }
.xb09, .xbnote { font-size:0.9em; }
.xb085 { font-size:0.85em; }
.xb08, .xbcredit { font-size:0.8em; }

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

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

.xbmr10 { margin-right:10px; }
.xbmr15 { margin-right:15px; }
.xbmr20 { margin-right:20px; }
.xbmr25 { margin-right:25px; }

.xbmt2 { margin-top:2px; }
.xbmt10 { margin-top:10px; }
.xbmt16 { margin-top:16px; }
.xbmt20 { margin-top:20px; }
.xbmt25 { margin-top:25px; }

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

/* padding */
.xbpl10 {padding-left:10px;}
.xbpl20 {padding-left:20px;}

.xbpr5, .xbnit { padding-right:5px; }
.xbpr10 { padding-right:10px;}
.xbpr20 { padding-right:20px;}
.xbpt17 { padding-top:17px;}

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

/* maxheights */
.xbmh200 {max-height:200px; }
.xbmh300 {max-height:300px; }
.xbmh400 {max-height:400px; }

/* widths */
.xbw18 {width: 18px; }
.xbw50 {width: 50px; }
.xbw100 {width:100px; }

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

/* maxwidth eg for divs */
.xbmw400 {max-width:400px; }
.xbmw1000 { max-width:1000px; }
.xbmw1100 { max-width:1100px; }
.xbmw1200 { max-width:1200px; }
.xbmw1400 { max-width:1400px; }

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

/* some colour things */
.xbhlt {
	background-color: #f7f78f;
	color: #444;
}
.xbdim {
	background-color: #ccc;
	color: #888;
}
.xbgold { color:#edc500; }
.xbred { color:#c00000; }
.xbblue, .xbinfo, .xbhelp { color: #44f;}
.xbbook, .xbgreen { color: #008040;}
.xbdarkgrey { color: #555;}
.xbgrey, .xbnote {color:#888;}
.xbaoycol {color: #e56b8e !important;}

/* may also need the bootstrap chosen styles from xbculture.css */

/* xb Modal for images popup */
/* The Modal (background) */
.xbmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content (image) */
.xbmodal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 5px;
  border: 2px solid #000;
  width: min-content;
  display: grid;
}

/* the image div */
.xbmodimg img {
	max-width:500px;
}

/* The Close Button */
.xbmodimg, .xbclosediv {
	grid-area: 1/ 1;
    }

.xbclosediv {
  color: #888;
  text-align: right;
  font-size: 28px;
  font-weight: bold;
}
.xbclosebtn {
   background-color: rgba(0,0,0,0.2);  
}

.xbclosediv:hover,
.xbclosebtn:focus {
  color: #444;
  text-decoration: none;
  cursor: pointer;
}

/* table cell for image preview */
.xbtdimg {
	padding:10px;
	text-align:center;
}
/* make file and folder controls wide enough for longer path and name */
.xbfilecontrol, .xbfoldercontrol {width:400px !important; }

/* definition lists on single line per item */
/* .xbdlinline has min width 50px and no colon */
/* .xbdl has min width 100px and colon */
dl.xbdlinline dt,
dl.xbdl dt {
	display:inline-block;
	font-style:italic;
}
dl.xbdlinline dt {
	min-width:50px;
}
dl.xbdl dt {
	min-width:100px;
}
dl.xbdlinline dd {
	display:inline;
	margin: 0 0 5px 15px;
}
dl.xbdl dd:before{
	content:' : ';
}
dl.xbdlinline dd:after, 
dl.xbdl dd:after {
	display:block;
	content:'';
}

/* unordered list with no bullet and margins adjusted */
ul.xblist {
	margin: 0 0 9px 10px;
}
ul.xblist li {
	list-style-type: none;
}