html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend				{ margin: 0px;padding: 0px;	border: 0px;outline: 0px;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}
:focus 										{ outline: 0;}

*			{ 
	box-sizing: border-box;
	--gab-blue:#0099CC;
	--gab-blue-dark:#00465d;
	--gab-link: #00465d;
	--gab-blue-pale:aliceblue;
	--gab-orange:#FFCC00;
	--gab-green:#5dad0c;
	--gab-border-blocks:#dfe5eb;
	--gab-border-fields:#CCC;
	--gab-zebra-odd:rgba(253,  252,  228, 0.71);
	--gab-thead-bg:rgba(255, 204, 0, 0.58);
	--gab-thead-txt:#000;
	--gab-border-radius:6px;
	}
	
	
html 		{ -webkit-text-size-adjust: 100%; height: 100%;box-sizing: border-box;}
html,body	{ 
	width:100%;
	padding:0px;
	margin:0px;
	font-size:14px;
	font-weight: 400; 
	font-family : Verdana, Arial, Helvetica, sans-serif;
	background:#FFF;
	text-align:left;
	line-height:1.2;
	color:#111;
	box-sizing: border-box;
	height:100%;
	min-height: 100%;
	margin:0;
	padding:0;
	position: relative;
	}
body.modal									{ background: #FFF; background-image: none; padding:20px 30px;}									


strong										{ font-weight: bold;}
ol, ul 										{ margin:10px;}
li											{ margin-left:20px;}
a											{ color:var(--gab-link);text-decoration: none;	}
a:visited									{ }
a:hover 									{ color:#212121;text-decoration:underline;	}
p											{ padding:5px 0}
.warning									{ color: red; font-weight:500;text-align:center;}
hr											{ line-height: 1px;color:#999999;}
h1,h2,h3,h4,h5,h6  							{ text-rendering: optimizelegibility;}
input:not(.buttons),						
textarea,									
select										{ 
	font-size:1.0em;
	height:30px; 
	border:1px solid var(--gab-border-fields); 
	border-radius:3px;
	text-align: left;
	padding: 0 5px; 
	margin-top:0;
	font-family: inherit;
	-webkit-transition:  border-color 0.15s ease;
	-moz-transition:  border-color 0.15s ease;
	-o-transition: All 0.15s ease;
	-ms-transition:  border-color 0.15s ease;
	transition:  border-color 0.15s ease;
	background-repeat: no-repeat;
	vertical-align: top;
	box-sizing: content-box;
	}
select 										{ border-radius: 0;background-color: #fff;background-image: none;box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);}
option										{ -webkit-appearance : none; /* To gain control over the appearance on WebKit */ -moz-appearance : none; /* To gain control over the appearance on Gecko */}
input[type=checkbox],
input[type=radio]							{ height:20px;line-height:20px; vertical-align: middle;}
small, .small								{ }
em  										{ font-style: italic;}

input[type=file],
input[type=submit]							{  cursor: pointer;-webkit-appearance: none;}
input:hover,								
textarea:hover,								
input:focus,								
textarea:focus								{ background-color: #FFF;border-width:1px; /*opacity: 0.7;*/}
input[type=submit]:hover					{ background: #006699; color:#FFF;}															
input:focus,								
textarea:focus,								
select:focus								{ border:1px solid var(--gab-blue-dark); }
textarea:-moz-placeholder, 					
input:-moz-placeholder 						{ color:#0099CC; font-style:italic; font-family:Verdana;}
::-webkit-input-placeholder 				{ color:#0099CC; font-style:italic; font-family:Verdana;}							
input:-webkit-autofill 						{ -webkit-box-shadow:0 0 0 50px white inset;-webkit-text-fill-color: #333;}
input:-webkit-autofill:focus 				{ -webkit-box-shadow: 0 0 0 50px white inset;-webkit-text-fill-color: #333;} 
input:not([type=checkbox]):not([type=radio]) ,
textarea 									{ -webkit-appearance: none;}										
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }	


h1 {font-size:1.4em; font-weight: 600; margin:0 0 10px; overflow: hidden; position: relative;}

a		{ color: #000099; text-decoration: none;}
a:hover	{ color: #ff9900;text-decoration: underline;}
hr		{ color: #FFC402;height: 1pt;}
.right	{ text-align:right;}
.center	{ text-align:center;}
.left	{ text-align:left;}
.small	{ font-size:0.85em;}
.float_r{ float:right;}
.float_l{ float:left;}
#message{ border-top:1px solid #DDD;border-bottom:1px solid #DDD;background:#EEE;padding:5px 0px;width:600px;margin-bottom:10px;}
.note	{ font-size:1.0em; color:green; font-style: italic; margin-left:10px;}
.note.warning {color:red; /* font-weight: bold; */}

details						{ padding:10px 20px; margin-bottom:0; border-bottom:1px solid var(--gab-border-blocks);}
summary						{ cursor: pointer;color:var(--gab-link);}
details ul li {margin:5px 0 5px 20px;}
img		{}

table {
	width: 100%;
	border-spacing: 2px;
    border-collapse: separate;
    font-size:1.0em;
    table-layout: automatic;
}
table th,
table td		{ 
	padding:4px 6px;
	font-weight: normal;
	border-radius: 3px;
	text-align: left;
	font-weight: normal;
	min-height:30px;
	}
/*
td.data{
	display: flex;
	align-items: center;
	gap:5px;
}
*/
table#list .add{
	border: 0px ; 
	text-align:center;
	
	}
	
table#list caption, 
table#data caption, 
table#list .subtitle {
	color:#000; 
	text-align:left;
	font-size:140%;
	font-weight:bold; 
	}
table thead th,
table thead td,
table#list .title, table#data .title,
.list_title,
.form-col-title{
	text-align:center;
	background-color: #d4dcde;
	padding:5px 
	}
	
table#list td .side, 
table#data .side,
.side{
	background:#eee;
	width:200px;
	color:#666;
	}
table.narrow-side td.side{
	width:160px;
}
.side img	{ display: block; margin-right:10px;}
#dashboard .block .side{ width:auto; font-size:0.9em;}
#dashboard .block .num{ max-width:80px;width:80px !important; text-align: center;}


td.data{
	/*border-bottom:1px dashed var(--gab-border-blocks);*/
	}
.odd{
	background-color:#EEEEFF;
	}

table#list .spacer, table#data .spacer, .spacer{	
	border: 0px solid #ddd;
	background: #FFF;
	}



td.info 	{
	font-size: 1.2em;
	padding: 10px 20px;
	font-style: normal;
	color: #333;
	background:#ffffe7;
}
td.info:after				{ content: "\f129";}
tr.modified td	{ color:red; font-weight: bold;}
tr.deactivated td {opacity: 0.5;}

td.options	{ width:100px;}
td.state	{ width:80px;}


.list_title a{
	color:#06698a;
	}
.list_title a:hover{
	text-decoration: underline;
	}
caption{
	font-size:1.2em;
	text-align:left;
	color:var(--gab-blue);
	padding:5px 0;
	border-bottom:1px solid var(--gab-blue);
	}
.list_subtitle,
.subtitle{
	background-color: #FFF;
	font-weight : bold;
	padding:8px 9px 8px 0;
}
.subtitle img{ margin-right:5px;}
.list_smalltitle{
	font-size:0.9em;
	background:#F5E8BB;
	text-align:center;
	}
.row_subtitle{
	font-size:1.4em;
	font-weight:bold;
	}
	
	
	
/************** LOGIN ****************/
#login{
	margin:60px auto;
	width:440px;
	border-radius: 8px;
	background:#FFF;
	border:1px solid #CCCCCC;
	clear:both;
	padding:10px 30px 30px;
}
button[type="submit"]		{ color:#0099CC;}
button i.far,
button i.fas				{ margin-right:5px; color:#0099CC; }
button[type="submit"]:hover,
button:hover i.fas			{ color:green;}



.far,
.fas,
.fa{ color:#0099CC;}
.fa-trash-o{color:red;}
.fa-trash-alt{ color:#CCC;}
.fas:hover,
.fa:hover{color:#000;}
.fa-check{ color:green; font-size:1.4em;}
.fa-times{ color:red; font-size:1.4em;}

.fa-trash-alt:hover{ color:red;}
#login #logo{
/*	border:1px dashed red;*/

	background:#FFF;
	text-align:center;
/*	border:1px solid #336666;*/
	border:1px solid #CCCCCC;
	border-bottom:none;
	padding:10px 0;
}
#login #form{

	}
#login #form table{	

	}
#login #form table .side{
	text-align:right;
	}
#login #form h1{

	margin:0px;
	padding:4px;
	/*border-bottom:1px solid #DDDDDD;*/
	}
#login #warning{
	margin-top:10px;
	padding:4px;
	color:red;
	background:#FFF;
	border:1px solid #CCCCCC;
	overflow: hidden;
	}
/************* END LOGIN *****************/


/* warning messages */
.alert-msg {
  padding: 1em 1.5em;
  margin: 0 auto var(--margin-block);
  background: #ffffff;
  position: relative;
  overflow: hidden;
  border-radius: var(--gab-radius);
  border: 1px solid var(--gab-border);
transition:height 300ms ease-in;
}
.block .alert-msg {
  margin: 0;
  border: none;
  border-radius: 0;
}
.alert-msg__close{
	position: absolute;
	top:-5px;
	right:2px;
	padding:5px;
	font-size:.6em;
	cursor: pointer;
}
.alert-msg ul {
	margin:0;
	padding:0;
}
.alert-msg.hide{
	display:none;
}
.alert-msg .btn,
.alert-msg a {
  margin-left: 10px;
}
.alert-msg.info {
  background: #ffffe7;
}
.alert-msg.alert {
  background: #ffecec;
}
.alert-msg.advice {
  background: #ffffde;
}
.alert-msg.ok {
  background: #e2f1d6;
}
.alert-msg.question {
  background: #ecffc3;
}
.alert-msg.center {
  text-align: center;
}
.alert-msg li.selected {
  font-weight: 600;
}



/*
 * LAYOUT
 ********************/
#wrapper				{ display: flex;width:100%;margin:0 auto ; padding-top:60px; position:relative;}


#site-top-bar {
	background-color: #00465d ;
	border-bottom: 1px solid #FFF ;
	top: 0px ;
	height: 60px ;
	position: fixed ;
	width: 100% ;
	z-index: 5 ;
	padding:10px 0;
	display: flex;
	font-size: 0.9em;
	}

#header-nav,
#header-alerts			{ width:100%; text-align: center;}
#header-page-button		{ min-width:200px;width:200px;margin-right:20px;}
#site-top-bar #logo{
	min-width:220px; 
	max-width: 260px;
	text-align: center;
	}
#site-top-bar div#toggle{
	float:left;
	list-style: none;
	margin:0 0 0 20px;
	padding:0;
	}
.button_top_bar{
	border:1px solid #CCC;
	padding:3px 5px;
	float:left;
	margin:0 10px 0 0;
	position:relative;
	text-align: center;
	cursor: pointer;
	color:#000;
	background: #FFF;
	border:none;
	border-radius: 5px;
	}
.toggle_close 		{ position:absolute; right:5px; top:10px;}
.toggle_close img	{ width:10px; height:10px;}
.toggle_title{
	font-weight: bold;
	}
.button_top_bar:hover,
.button_top_bar:active{
	box-shadow:4px 4px 5px #666;
	-webkit-box-shadow:4px 4px 5px #666;
	-moz-box-shadow: 4px 4px 5px #666;
	}
	
input.buttons,
button.buttons,
span.buttons,
a.buttons					{ 
	cursor:pointer;
	font-size:1.0em;
	padding: 5px 10px; 
	border:1px solid #DDD; 
	border-radius: 5px; 
	background: var(--gab-orange); 
	color:#000; 
	display:inline-block; 
	margin-left:10px;
	font-style: normal;
	line-height: 20px;
}
.buttons .fa{ margin-right:10px; font-size: 1.2em;}
.buttons.green,
button.buttons.green,
span.buttons.green,
a.buttons.green				{
	background: green;
	color:#FFF
}

.buttons.blue,
button.buttons.blue,
span.buttons.blue,
a.buttons.blue				{
	background: #75d1f3;
	color:#FFF;
}
.buttons.whatsapp{
	background: #25D366;
	color:#000;
}
.buttons.whatsapp .fa {color:#FFF;}

.buttons.small{ 
	font-size:0.9em; padding:4px 8px;
}
.buttons .fa	{ color:#666;}


.toggle_title{ padding:5px; overflow: hidden;}
.top_panel{
	clear:both;
	overflow: hidden;
	padding:5px 2px 2px 2px;
	position:relative;
	text-align: left;
	border-top:1px dotted #CCC;
	display:none;
	}
	

	
#nav-toggle {
	display: block;
	position: relative; 
	color:#FFF;
	font-size:0.8em;
	z-index:100;
	width: 20px;
	height: 20px;
	margin: 4px 0 0 20px;
	
	cursor: pointer;
	-webkit-transform: rotate(0deg);
	   -moz-transform: rotate(0deg);
	   	 -o-transform: rotate(0deg);
	   	 	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
  	   -moz-transition: .5s ease-in-out;
  	   	 -o-transition: .5s ease-in-out;
  	   	 	transition: .5s ease-in-out;
	}

#nav-toggle span {
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	background: #FFF;
	border-radius: 3px;
	opacity: 1;
	left: 0;
	top:20px;
	-webkit-transform: rotate(0deg);
	   -moz-transform: rotate(0deg);
		 -o-transform: rotate(0deg);
		 	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	   -moz-transition: .25s ease-in-out;
	     -o-transition: .25s ease-in-out;
		 	transition: .25s ease-in-out;
}

#nav-toggle span:nth-child(1) {
	top: 16px;
}

#nav-toggle span:nth-child(2) {
	top: 22px;
}

#nav-toggle span:nth-child(3) {
	top: 28px;
}

#nav-toggle.open span:nth-child(1) {
	top: 20px;
	-webkit-transform: rotate(135deg);
	   -moz-transform: rotate(135deg);
	     -o-transform: rotate(135deg);
		 	transform: rotate(135deg);
}

#nav-toggle.open span:nth-child(2) {
	opacity: 0;
	left: -60px;
}

#nav-toggle.open span:nth-child(3) {
	top: 20px;
	-webkit-transform: rotate(-135deg);
	   -moz-transform: rotate(-135deg);
	     -o-transform: rotate(-135deg);
		 	transform: rotate(-135deg);
}
	
	
/*
 * SIDE MENU
 ******************/
#nav					{ 
	flex: 0 0 260px;
	background-color:#eee;
	
}
#nav-toggle	{ 
	
	}
#nav-toggle .fa	{ color:#FFF;}
#nav-toggle.hidden{
	/*left:10px;*/
}
#nav {
 	/*
	 position: fixed;
 	left: -261px;
 	top: 40px;
 	transition: all ease 1s;
 	*/
}
#nav.show{
	left:0;
}

.close-menu {
  float: right;
  min-height: 30px;
  padding-right: 18px;
  padding-top: 23px;
  cursor: pointer;
}





#menu 					{ width:100%;font-size: 0.85em; padding-top:10px;}
#menu ul				{width:100%; margin:0;padding:0;list-style:none;}
#menu ul li				{ text-align: left;color:#0099cc;padding:0;margin:5px 0;}
#menu ul li span.group	{ font-weight:bold;text-align: left; padding-left:10px;}
#menu ul li li			{ font-weight:normal;border-bottom:none;text-align: left;margin: 0;padding: 0;}
#menu ul li a 			{ display:block;padding: 2px 10px 2px 25px; }
#menu ul li li a:hover	{ background:#0099cc;color:#FFF;color:#FFF;text-decoration: none; }	
#menu ul li.selected a 	{ color:#000; background: #FFF; }

#tablist				{ margin:0; padding: 5px 0;font: bold 0.8em;text-align:center;background-color:#0099CC;}
#tablist li				{ list-style: none;display: inline;margin: 0 10px 0 0;}
#tablist li a			{ padding: 6px 4px;font-size: 1.1em; display: inline-block; width:20px;}
#tablist li a .fa		{ color:#FFF;}
#tablist lia :hover 	{ font-size: 0.9em; color:#000;}
#tablist li a:hover .fa	{ color:#000;}
#tabcontentcontainer	{ width: 100%;text-align:right;background-color:#eee;border-top:1px solid #FFF; overflow-y: auto;}
.tabcontent				{ width: 100%;background-color:#eee ; padding-bottom:20px;}

ul.nav-side-search{
	 list-style:none; 
	 padding:0;
	 margin:0;
	}
ul.nav-side-search form	{
	display: flex;
	margin:0;
	padding:0;
}
ul.nav-side-search input[type=text]{
	padding:6px 8px;
	border-radius: 5px;
	flex-grow: 1;
	width:160px;
}
ul.nav-side-search button.nav-side-search	{ 
	flex:0 0 40px;
	padding: 12px 10px;
	border: 1px solid #FFF;

	border-radius: 5px;
	background: #ca005d;
	 color:#FFF;
	 float:right;
}
ul.nav-side-search li	{ margin-left:0;}

ul.nav-side-search button.nav-side-search .fa 			{ color:#FFF;}
ul.nav-side-search button.nav-side-search .fa:hover	{ background: #820640;}

#contents				{ max-width:1200px;width:100%;margin:0 20px; background: #FFF; padding:10px 20px; }
#contents.full			{ margin-left:0; }


ul#nav_dashboard{
	list-style:none;
	columns: 3;
  -webkit-columns: 3;
  -moz-columns:3;
  overflow:hidden;
}
ul#nav_dashboard li{
	margin:3px;
	display: inline-block;

}
ul#nav_dashboard li a {
	padding:10px 15px;
	width:270px;
	border:1px solid #DDD;
	display: block;
	text-align: center;
	font-size: 1.2em;
	background: #15c9ff;
	color:#FFF;
	text-decoration: none;
	border-radius: 5px;
	
}
ul#nav_dashboard li a:hover{
	background: #0099CC;
}
.rounded					{
	-webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius:5px;
            }

#checkbox, .radio{
	border: none;
}



.list-item{
	border:1px solid #0099CC; 
	margin:10px 0 30px; 
	 border-radius:var(--gab-border-radius);
}
.list-item-header{
	background-color:#ffffe7;
	border-bottom:1px solid #CCC; 
	display:flex; 
	flex-direction: row;
	line-height:30px;
	padding-right:10px;
}
.list-item-header .fa {font-size:1.4em; padding-top: 10px;}
.list-item .block-columns > div.list-item-img{
	flex-basis:160px;
	max-width: 140px;
}
.list-item-title{
	flex-basis:100%; 
	display: flex;
	padding:5px 10px;
	font-size:1.2em;
}
.list-item-name	{
	font-weight: bold;
}
ul.list-item-opciones	{
	flex:1;
	display: inline-block;
	list-style: none;
	margin:0;
	padding:20px 0 0 0;
	text-align: right;
}
ul.list-item-opciones li {
	display: inline;
	margin:0;
	padding:0 10px;
	/*border-left:1px solid #DDD;*/
}
ul.list-item-opciones li:first-of-type{
	border-left:none;
}
.item-list-state{
	flex:0 0 60%;
	text-align: center;
	}
.item-list-options{
	flex:0 0 35%;
	margin-left:5px;
	text-align: center;
}
.list-item h2{
	padding:5px 10px;
	background:var(--gab-blue-pale); 
	text-align:center;
}
.list-item-img				{ flex-basis:50px;}
.list-item-img img		{ display: block;}
.list-item table{ 
	font-size:0.9em;
}
.list-item .row_subtitle{
	border-bottom:1px solid var(--gab-border-blocks);
}
.list-item .side	{ width:120px;min-width: 120px; max-width: 120px;}
.list-item.source-xml{
	border-color:green; 
}
.list-item .item-note{
	padding:5px 10px;
}
.list-item.source-gabino .item-note{
	background: rgba(0, 153, 204, 0.50);
	
}
.list-item.ad-type-want  .item-note{
	background: rgba(0, 128, 0, 0.50);
}
.list-item.source-xml .item-note{
	background: rgba(0, 128, 0, 0.50);
	color:#FFF;
}
.list-item.user-verified{
	border:1px solid  green;
}
.list-item.user-verified .item-note{
	background: rgba(0, 128, 0, 0.50);
}

/*
.side{
	background-color: orange;
	width:30%;
	text-align:right;
	padding:2px;
}
*/

/*******  STATS  **********/
.stat_table{
	background-color:#ffffcc;
	border: 1px solid #999999;
}




th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
  font-size: 0.9em;
  background: #d4dcde;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(2px, 70px)
    /* 45 is really 360 - 45 */
    rotate(270deg);
  width: 30px;
}
th.rotate > div > span {
  padding: 0;
}




.verticle{
	background-color: #d4dcde;
	font-size:8pt;

	padding:2px;
	width:20px;
	position:relative;
	height:160px;
	text-align: left;
	}
.verticle p{
	 transform:rotate(7deg);
    -ms-transform:rotate(270deg); /* IE 9 */
    -moz-transform:rotate(270deg); /* Firefox */
    -webkit-transform:rotate(270deg); /* Safari and Chrome */
    -o-transform:rotate(270deg); /* Opera */
    text-align: left;
	}

.option_sidetitle2{
	background-color: #ffffcc;
	color: #000000;
	text-align:right;
}
.list_data2{
	border:1px solid #ccffcc;
	font-size:7pt;
}
.list_verticle{
	font-size:7pt;
	writing-mode: tb-rl;
	filter: flipv fliph;
	border:1px solid #eeeeee;
	
	
}
.admin_data td{
	font-size:7pt;
	width:180px;
	background: #ffffcc;
	height:50px;
}

table tr:nth-child(even),
table.list tr:nth-child(even) {background: rgba(248, 248, 248, 0.86)}

.list-item table tr:nth-child(even){ background: #FFF;}
.list-item table table tr:nth-child(even){ background: rgba(248, 248, 248, 0.86)}
table.list tr:hover{ background: #fffff3}
table.list .data {border:none;}

#sortable tr:nth-child(even) {background: #f8f8f8}
#sortable tr:hover{ background: #fffff3}
#sortable .data {border:none;}


div#form{
	text-align:center;
}



/*
common table css
NEW ADMIN STYLES
**************/

	/*
fieldset#warning{
	color:red;
	padding:10px;
	border: 2px solid red;
	text-align:center;
}
fieldset#warning legend{
	font-size:140%;
	color:red;
}*/

ul.quick_menu{
	list-style: none;
	overflow: auto;
	margin:0;
	padding:0;
	position:fixed; top:60px; right:2px;
	}
ul.quick_menu li{
	/*float:left; */
	margin-bottom:2px;
	border:1px solid #DDD;
	background: #DDD;
	
	font-size:0.8em;
	}
ul.quick_menu li:hover{
	
	}
ul.quick_menu li a{ display:block;color:#666;padding:4px;}
ul.quick_menu li a:hover{
	background:#111;
	color:#FFF;
	text-decoration:none;
	}
/*
pagination
**********/
#pages{
	width:90%;
	margin:10px auto;
	
	}
#pages form{
	margin:0px;
	padding:0px;
	width:120px;
	float:right;
	}
#pages ul{
	list-style: none;
	margin:0 0 10px 0px;
	float:left;
	padding:0px;
	}
#pages ul li{
	float:left;
	border:1px solid #DDD;
	margin:1px;
	 -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-align: center;
	background:#EEE;
	padding:6px;
	}
#pages ul li:hover{
	background:#006699;
	}
#pages ul li.current_page{
	background:#000;
	color:#FFF;
	}
#pages a,
#pages span{
	padding:10px 6px;
	
	}
#pages a:hover{
	color:#FFF;
	text-decoration: none;
	}
#pages form{
	border:1px solid #DDD;
	margin:1px;
	 -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding:2px 6px;
	}


/*
=SLIDE PANEL
************/
#panel			{
	width:100%;
	margin-top:-10px;
	z-index:10;
	overflow: hidden;
	}
#panel h2		{ 
	margin:0px; 
	font-size: 1.2em; 
	font-style: italic; 
	color:#FFF;
	}
#search-box h3{
	font-size:1.2em;
	margin:10px 0 0 10px;
}
#search-box		{
	border-radius: 0 0 12px 12px;
	background:#0099CC;
	overflow: hidden;
	color:#FFF;
	padding:10px 20px;
	}
#search-box a	{
	color:#FFF;
	}
#search-box strong	{ color:#FFF; font-size:1.2em;}
#search-toggle	{
	background:#0099CC;
	text-align:center;
	float:right;
	width:auto;
	color:#FFF;
	border-radius: 0 0 8px 8px;
	padding:0 20px 5px;
	margin:-1px 20px 0 0;
	font-size: 1.2em;
	}
#search-toggle .fa {color:#FFF; font-size:1.6em;}
/* new look form
******************************/
div#search-box ul{
	margin:0 20px;
	padding:10px;
	}
div#search-box form{
	padding:10px;
	margin:0;
	}
div#search-box form:last-of-type{border-bottom: none;}
div#search-box table thead th,
div#search-box table thead td,
div#search-box .list_title 		{ background: #0c8db8;}
div#search-box table td{
	color:#FFF;
	}
	
div#search-box table tr:nth-child(even){
	background: transparent;
}

div#search-box table td.side{
	background: #0099CC;
	color:#FFF;
	width:130px;
font-style:normal;
	}
div#search-box table td.data{
	border:0px solid #3AA7CB;
	}
.tbl_search{
	width:100%;
	}
.tbl_search caption{
	margin-bottom:0px;
	background-color: #FFFFFF;
	padding-left:0px;
	padding:4px;
	}
div#search-box td {border:none;}	
div#search-box  ul{
	list-style: none;
	padding:0;
	margin:10px 0;
	}
div#search-box  ul li{  

  
	margin:5px 0;}

#search-box input:not([type=checkbox]):not([type=radio]):not([type=submit]),
#search-box select	{ 
	padding:0 5px;
	font-size:1.0em;
	border-radius: 3px;
	width:300px;
	}
#search-box select{
	width:310px;
}
#search-box input[type=submit],
#search-box input.bt_submit{
	 padding:2px 10px;
	 background: #ca005d;
	 color:#FFF;
	 width:120px;
	 text-align: center;
}	
#search-box input.bt_submit:hover{	
	 background: #820640;
	}
#search-box input.date-picker{
	max-width:140px;
}
	
.bt_icon{
    display:block;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #DDDDDD;
    border-left:1px solid #DDDDDD;
	text-decoration:none;
 
    font-size:1.0em;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    /*float:left;*/
}
.bt_icon button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.bt_icon button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.bt_icon img, .bt_icon a img{
    margin:0 6 -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}
.handles{
	background:#FFF url("/assets/images/handle.png") no-repeat ;
	width:12px;
	border:0px solid #FFF;
	cursor:row-resize;
	}
	
input.bt_translate{
	font-size:0.9em;
	background-color:#DDD;
	margin:0 2px;
	color:#333;
	border:1px solid #CCC;
	border-radius: 3px;
	}
input.bt_translate:hover{
	background: #FFcc00;
}
/*loading mask*/
div#loading_mask {    
    position: fixed;
    top: 0;
    left:0;
    z-index: 1;
    display:none;
    background-color: #006699;
    width: 100%;
    height:100%;
    opacity: .3;
    text-align:center;
}
div#loading_mask span{
	display:block;
	width:200px;
	margin:10% auto;
	font-size:3.0em;
	color:#FFF;
	font-weight: bold;
	}
div#loading_mask.show {
    display:block;
    z-index: 9999;
    background: red;
}
div#loading_mask {
    
}



.bt_load_data,
.toggle-block{ cursor: pointer;}

/* STYLED SELECT LIST */
/*
.styled-select 								{ width: 100%; height: 30px;overflow: hidden;border-radius: 3px;border: 1px solid #DCDCDC;  background: #FFF url("https://www.gabinohome.com/assets-web/images/arrow-select-down.png") no-repeat; background-position: right 10px center}
.styled-select select 						{ background: transparent;width: 100%; text-indent:10px;padding: 3px; border: 0; height: 26px;-webkit-appearance: none;margin:0;box-shadow: none;}
.styled-select select:focus 				{ }
*/
.styled-select select 	{ width:100%;}


.block-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(420px,1fr));
	gap: 1em;
}
.block-grid > *{
	margin:0 !important;
}
/* new block system - copied from website css */
.block														{ margin-bottom:10px;background: #FFF;clear:both;padding:0 0 5px; border-bottom:1px solid var(--gab-border-blocks); overflow: hidden; position: relative; /*border:1px solid var(--gab-border-blocks);*/ border-radius:var(--gab-border-radius);}
.block.transparent											{ background: transparent; border:none;} /*use to position elements within blocks but with no background or border  eg buttons*/
.block.center												{ text-align: center;}
.block.right												{ text-align: right;}
.block.single												{ max-width:600px;margin:0 auto;}
.block.narrow												{ width:300px;}
.block h2													{ 
	margin:10px 0 5px;
	padding:10px 0; 
	border-bottom:1px solid var(--gab-border-blocks); 
	color:#111;
/*
	background:var(--gab-blue-pale); 
	
	
*/
	font-weight: bold;
	font-size: 1.16em; 
	}
.block h2 img			{margin-top: 3px;margin-right: 10px;} /*flags*/
.block h2 .buttons											{ float:right; font-weight: normal; margin-top:-10px;}
.block h2 .buttons .fa										{ color:#000;font-size:0.9em;}
.block-inner												{ overflow: hidden; padding:20px; }
.block-inner ul ul											{  list-style:circle;}
.block-inner ul li											{ text-align: left;}
.block-inner ul li a										{ padding:6px 10px; display: block;-webkit-transition: All 0.15s ease;-moz-transition: All 0.15s ease;-o-transition: All 0.15s ease;-ms-transition: All 0.15s ease;transition: All 0.15s ease;}
.block-inner ul li a:hover									{ color:#000;}
.block table	{ }
.block-columns												{ display: flex; flex-direction: row;flex-wrap:wrap; justify-content: space-around;align-items: top;justify-content: center; }
.block-columns > div										{ flex:1;  margin-right:5px;}
.block-columns > div:last-of-type							{ border-right:none; margin-right:0;}
.block .instructions 										{ background: rgba(255, 254, 240, 0.8); padding:10px 20px;}
.block-flex										{ display: flex; flex-direction: row;justify-content:space-evenly;}
.block-flex div												{ flex: 1;}
.block-flex div	div.col { margin-left: 20px;}	/**left margin to all but first */
.block-footer												{ text-align:right;padding:8px 10px; overflow:hidden;margin-top:5px;border-top: 1px solid var(--gab-border-blocks); /*background:rgba(238, 238, 238, 0.5);*/}
.block-footer input		{}
.block-footer.form_warning									{ margin-bottom:0; text-align: left;border-radius: 0;}
.block-button												{ text-align: right; margin-bottom:20px; overflow:hidden;}
.block .form_warning	{ margin:0; padding:10px 20px; border:0;border-radius: 0; /*border-bottom:1px solid var(--gab-border-blocks);*/}
/* responsive form fields */
.block-buttons		{ text-align:center; margin: 0 0 10px; overflow: hidden;}
input.with-floating-label									{ padding-left:20px; }	/* careful adjusting the left padding as this is used in all the website forms */
/* note - in admim we will show them "out" rather than moving them via js */
label.floating-label-dates,
label.floating-labels										{ position: absolute; background:#FFF; padding:0 6px;font-size: 0.85em;top: -12px;left:10px; color:var(--gab-blue);/*padding:0 10px 0 5px;text-indent:5px;color:#888;position: absolute;left: 10px;top: 16px;font-size: 1.0em;line-height:1.0em;z-index: 3;-webkit-transition: all 50ms ease-out;transition: all 50ms ease-out;pointer-events: none;max-height: 24px;overflow: hidden;background: #FFF;*/}
label.floating-label-dates 									{ }
label.floating-labels.out 									{ }
label.floating-labels .oblig								{ color:red; font-size: 1.0em; padding:10px 5px 0 0 ;}
label.floating-labels.required:after{
	 content: "*"; 
	 color: red;  
	 position: absolute; 
	 top: 2px; 
	 left: -5px;
}
.form-fields.error-label label.floating-labels,
.form-fields.error-label label.floating-labels.out			{ color:red;}
.validation_error_message									{ color:red;}
.form-fields												{ width:100%; margin-bottom:20px; position:relative;}
td .form-fields	{ margin-bottom:0} /*no bottom margin required if held within table cell*/
.form-fields.form-data										{ text-align:left; margin-bottom:10px;}

.form-fields.form-data label								{ display:inline-block;width:25px;}
.form-fields.form-data .data								{ font-weight: 500;}
.hidden,
.form-fields.hidden											{ display:none;}
.form-fields .fa											{}
.form-fields input,
.form-fields select,
.form-fields textarea										{ width:100%;}
.form-fields.flex											{ display:flex; flex-direction: row; }
.form-fields.flex .field									{ flex:2;}
.form-fields span.spinner								{ height:45px; line-height: 45px;}
#publish-ad .form-fields span.spinner input			{ height:40px; width:50px;-moz-appearance: textfield;}
.form-fields .spinner-label							{ margin-left:10px; line-height: 45px; color:var(--gab-blue);}
.form-fields span.spinner > .sub, 
.form-fields span.spinner > .add									{ line-height:45px; min-width:25px; display:block;}
.form-fields.checkbox				{ text-align: left;}
.form-fields.checkbox input			{ width:auto; height:auto;}
.form-fields.checkbox label			{ display:inline; margin:0; padding:0;}

.form-fields.data	{ line-height:30px; margin-bottom:10px;}

.flex-fields 									{ display: flex; flex-direction: row; width:100%; }
.flex-fields > div								{ flex:1 1 auto; position:relative; margin-right:10px;}
.flex-fields > div:last-of-type					{ margin-right:0;}

.field-column-titles						{ border-bottom:1px solid var(--gab-border-blocks);}
.field-column-titles > div 					{ flex:1;line-height:40px;text-align: center;font-weight: 600;}
.field-column-titles						{ }
.field-column-title.xml-options{ background: #FFF;}


.td-translate								{ width:195px;}
.field-translate							{ display:flex; flex-direction: row; margin-left:5px; float:right;}
.field-translate input						{ text-align: center; width:120px;}
.field-translate.all input						{ width:100%;}
.field-translate .styled-select				{}
.field-translate .bt-save-txt				{ display: inline-block; padding: 10px 0 0 5px;}
form-fields textarea.lang-field,
form-fields input.lang-field,
textarea.lang-field,
input.lang-field							{ padding-left:35px; background-position: 10px center;background-repeat: no-repeat;}


.buttons.bt_translate		{ background: #DDD;color:#333; font-size: 0.8em; line-height: 20px;margin-right:5px;}
.field-translate.all .buttons.bt_translate	{ margin-right:0; padding:5px;}
.buttons.bt_translate .fa	{display:none;line-height: 20px; }

ul.dashboard-buttons	{ margin:0 0 10px; padding:0; cursor: pointer;overflow: hidden;}
ul.dashboard-buttons li { display: inline-block; padding:10px 20px;margin:0 10px 0 0; font-size: 1.2em; border:1px solid #DDD; border-radius: 5px; background:#EFEFEF;}
ul.dashboard-buttons li:last-of-type{margin:0;}


ul.client-xml-details li span.label	{ display:inline-block;width:80px; margin-right:5px;}

ul.list-buttons{ margin:10px; padding:0; cursor: pointer;}
ul.list-buttons li { display: inline; padding:10px 20px;margin-left:10px; font-size: 1.2em; border:1px solid #DDD; border-radius: 5px;}
.q_type_1 {background: #f1f8fc;}
.q_type_3 {background: #fffff5;}
.q_type_2 {background: #f8fff8;}

.list-services h3									{ }
ul.list-services									{ list-style:none;padding:5px 0; margin:0 0 10px 0; border-bottom:1px dashed #DDD; column-count: 3;list-style-type: none;}
ul.list-services									{ margin:0 0 10px 0; padding:0;}
ul.list-services li								{ text-align: left; display: inline-block;width: 100%; padding:0; margin:0;}
ul.list-services li.selected						{ }


.checkbox-list h3											{ font-weight: 400;font-size: 1.0em; margin:10px 0 4px 0;}
.checkbox-list ul 											{ list-style: none;padding:0;margin:0 0 10px; columns:3;-webkit-columns: 3;-moz-columns: 3;columns: 3 ;-webkit-column-gap: 1em;-moz-column-gap: 1em;column-gap: 1em;}
.checkbox-list ul li										{ display: inline-block;width:100%;padding:0 0 10px;}
.checkbox-list ul li label									{ width:100%; cursor: pointer;font-size:1.0em; }
.checkbox-list ul li.selected label							{ color:var(--gab-green); font-weight: 400;}
.checkbox-list ul li label:hover 							{ color:var(--gab-blue)}
.checkbox-list input 										{}
.checkbox-list ul li.check-terms a						{ display: inline-block; padding:0; margin:0;}
.checkbox-list ul.terms label	{font-size:0.9em;}


.messages{
	margin-bottom:20px;
	border:1px solid #DDD;
}
.messages.not-replied{
	background-color:rgba(255, 204, 204, 0.50);
	border-color:red;
}
.messages .messages-data{
	display:flex;
	padding:10px 20px 0; 
	border-bottom:1px solid #DDD;
	background: aliceblue;
	
}
.messages .messages-data > div{
	flex:0 0 50%;
}



ul.msg-replies{
	list-style: none;
	margin:10px 0 0 0;
	padding:0 20px;
}

ul.msg-replies li{
	padding:0 0 5px;
	margin:0 0 2px;
	position: relative;
}
ul.msg-replies li .user-data { border-bottom:1px solid #FFF; padding-bottom:10px; margin-bottom:10px;}
/*
ul.msg-replies li.user .msg-date{
	text-align: center;
	width:130px;
	margin:10px auto 5px auto;
	padding:2px 10px;
	color:#666;
	background: #EEE;
	border-radius: 8px;
	}
*/
ul.msg-replies li .msg-data{
	padding:5px 16px;
	color:#000;
	line-height:25px;
	max-width:90%;
	min-width: 55%;
	display:inline-block;
	text-align:left;
	border-radius: 8px;
	}
ul.msg-replies li .msg-data .msg-date{
	color:#666;
}
	
ul.msg-replies li.advertiser{
	text-align:right;
}


ul.msg-replies li.user .msg-data{
	
	background-color:rgba(173, 222, 147, .5);
/* 	border-radius: 8px 8px 0 8px; */
	}
ul.msg-replies li.advertiser .msg-data{
	background-color:rgba(113, 190, 238, 0.5);

	text-align:right;
/* 	border-radius: 8px 8px 8px 0; */
	}
/*
ul.msg-replies li.advertiser.not-replied .msg-data{
	background-color:#ffCCCC;
}
*/

	
/*
	
ul.msg-replies .chat-triangle{
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	bottom:5px;
}
ul.msg-replies li.user .msg-triangle{
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent rgba(113, 190, 238, 0.5) transparent;
    left:-10px;
}
ul.msg-replies li.advertiser .msg-triangle{
    border-width: 10px 10px 0 10px;
    border-color: transparent transparent transparent rgba(173, 222, 147, .5);
    right:-20px;
}
*/


/*SURVEY*/
ul.survey-stats-answers{
	padding:0; 
	margin:0; 
	list-style:none;
}
ul.survey-stats-answers li{
	border:1px solid #DDD; 
	padding:10px; 
	margin: 0 0 5px 0;
}
ul.survey-stats-answers label{
	display: inline-block; min-width:200px; background: #EEE; padding:10px;
}


svg{border:solid}

.demo {
  flex-direction: column;
  display: flex;
  width: 120px;
}

.progress__meter{
    fill: none;
}

.progress__meter {
    stroke: grey;
}
/*** <--- CIRCLE STYLES ---> ***/
.wrap-circles {
  display: flex;
  
}

.circle {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0.5rem;
  border-radius: 50%;

}

.circle .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 115px;
  height: 115px;
  background: aliceblue;
  border-radius: 50%;
  font-size: 1.0em;
  font-weight: 300;
  color: #000;
  text-align: center;
}

.stats-bars{
	display: flex;
	margin-bottom: 10px;
}
.animated-progress {
	flex:0 0 300px;
  width: 300px;
  height: 30px;
  border-radius: 5px;
  margin: 0 10px 0 0;
  border: 1px solid #00465d;
 overflow:hidden;
  position: relative;
}

.animated-progress span {
  height: 100%;
  display: block;
  width: 0;
  color: rgb(255, 251, 251);
  line-height: 30px;
  position: absolute;
  text-align: end;
  padding-right: 5px;
  background: #0099CC;
}
.stats-bars .progress-answer{
	line-height: 30px;
}


#bt_news						{ width:200px;}
#bt_incidents					{ width:140px;}
#bt_chat						{ width:350px;}


#panel_incidents ul				{ list-style:none;margin:0;padding:0;}
#panel_incidents ul li 			{ margin:0;padding:0;}
#panel_incidents ul li a		{ color:#666;display: block;padding:2px 4px; border:1px solid #DDD; margin-bottom:1px;}
#panel_incidents ul li a:hover	{ background: #0099CC; color:#FFF; text-decoration: none;}

ul.list_items								{ margin:0;padding:0; list-style: none;}
ul.list_items li 							{ }
ul.list_items li label			{ margin-left:5px;}
ul.list_items li label:hover	{font-weight: bold;}

ul.block_list 				{ list-style: none; margin:0; padding:0; overflow: hidden; }
ul.block_list li 			{ display: inline-block; margin:2px 1px 0 0; padding:6px; background: #EEE; border-radius: 2px;}
ul.block_list li.checked 	{ background:#0fc3ff; }
ul.block_list li.checked_ajax_OK{ background:#05ad48; color:#FFF;}
ul.block_list li.checked_ajax_KO{ background:red; color:#FFF;}
ul.block_list li label 		{ padding-left:2px;}


ul.list_admin_users{ list-style:none; margin:0; padding:0;}

ul.list_admin_users li { padding:5px 10px; border:1px solid #dcf1ff; border-radius: 4px;  margin:2px;}
ul.list_admin_users li.selected{ background: #dcf1ff; }
div.graph{
	width:100%;
	position: relative;
	margin-bottom:10px;
	overflow: hidden;
	height:270px;
	}
ul.verticalBarGraph {
	border-bottom: 1px solid #DDD;
	height: 200px;
	margin: 0;
	padding: 1px;
	position: relative;
	width:100%;
	}
	
ul.verticalBarGraph li {
	border: 1px solid #CCC;
	border-bottom: none;
	bottom: 0;
	
	list-style:none;
	margin: 0;
	padding: 0;
	position: absolute;
	text-align: center;
	width: 6px;
	font-size: 0.7em;
	}
li.viewed{
	background: #EEE;
	}
li.edit{
	background: #FFCC00;
	/*margin-left:2px;*/
	}
li.clients{
	background: #00CC99;
	/*margin-left:2px;*/
	}
ul.verticalBarGraph_dates{
	list-style:none;
	position: relative;
	height:14px;
	}
ul.verticalBarGraph_dates li{
	position: absolute;
	text-align: center;
	width: 25px;
	font-size: 0.7em;
	border-left:1px solid #CCC;
	border-right:1px solid #CCC;
	}
ul.graph_key{
	list-style:none;
	clear:both;
	margin:5px 0 0 0 ;
	padding:0;
	font-size: 0.7em;
	position: relative;
	}
ul.graph_key li{
	float:left;
	margin-right:5px;
	border:1px solid #DDD;
	text-align: center;
	width:110px;
	padding:4px;
	}
#admin-news a .fa{
	padding:7px;
}
#admin-news a { color:#0099CC;}
#admin-alerts {
	
	display: inline-block;
}
#admin-alerts a .fa		{ 
	padding:7px;
	-webkit-animation: pulse2 1s linear infinite;
	   -moz-animation: pulse2 1s linear infinite;
	    -ms-animation: pulse2 1s linear infinite;
			animation: pulse2 1s linear infinite;
	}
@keyframes "pulse2" {
 	0% {
    	-webkit-transform: scale(1.1);
		   -moz-transform: scale(1.1);
		     -o-transform: scale(1.1);
			-ms-transform: scale(1.1);
				transform: scale(1.1);
		}
	50% {
		-webkit-transform: scale(0.8);
		   -moz-transform: scale(0.8);
		     -o-transform: scale(0.8);
			-ms-transform: scale(0.8);
				transform: scale(0.8);
		}
 100% {
    -webkit-transform: scale(1);
   	-moz-transform: scale(1);
   	-o-transform: scale(1);
   	-ms-transform: scale(1);
   	transform: scale(1);
   	color:red;
 	}
}

@media all and (max-width:560px) 		{
	#login					{ width:340px;padding:10px 20px 20px; }		
	.no-show-mobi 			{ display:none;}
	#contents				{ min-width:auto; width:100%; padding:20px; margin:0;}
	.block-columns			{ flex-direction: column;}
	.block-columns > div	{ margin-right:0; border-right:0; }
	table#list td .side, 
	table#data .side,
	.side					{ width:150px; font-size:0.9em;}
	.td-translate			{ width:90px;}
	.td-translate .all .buttons.bt_translate{ padding:5px 20px; text-align: center;}
	.buttons.bt_translate .fa	{display:block;}
	#panel						{ margin-top:-20px;}
	
	.list-item-title		{ flex-direction: column; line-height:1.2em; font-size:1.0em;}
	.list-item-title ul		{ margin-top:10px;}
	.list-item-img			{ display:noneS;}
	.item-list-state,
	.item-list-options{padding-bottom:10px;}
	
	.messages .messages-data{flex-direction: column;}
	.messages .messages-data > div{flex:0 0 100%;}
	
	ul.dashboard-buttons li	{ display: block; margin:0 0 10px;}
}