/* ver 2017-10-01
2017-10-06
2017-11-02 - CSS custom properties
2018-02-26 - .j-middle
2021-10-20 - j-link !important
*/

:root {
	--link-color: #16b;
	--button-color:#E0E0E0;
	--button-pri-color: #0078e7;
	--text-inv-color: #fff;		
}

.j-page-font {
    font-size: 14px;
    font-family: 'Open Sans','Helvetica Neue',Helvetica,Roboto,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;    
}

.j-page-links a {
    color: #16b;
    text-decoration: none;
    cursor: pointer;    
}
.j-page-links a:hover {
    text-decoration: none;
}

.j-pad { padding:8px;}
.j-pad2 { padding:16px;}
.j-pad-r {padding-right:8px;}
.j-pad-r2 {padding-right:16px;}
.j-pad-l {padding-left:8px;}
.j-pad-l2 {padding-left:16px;}
.j-pad-b {padding-bottom:8px;}
.j-pad-t {padding-top:8px;}
.j-pad-b2 {padding-bottom:16px;}
.j-pad-t2 {padding-top:16px;}

.j-mar { margin:8px;}
.j-mar2 { margin:16px;}

.j-mar-r {margin-right:8px;}
.j-mar-r2 {margin-right:16px;}
.j-mar-l {margin-left:8px;}
.j-mar-l2 {margin-left:16px;}
.j-mar-b {margin-bottom:8px;}
.j-mar-t {margin-top:8px;}
.j-mar-b2 {margin-bottom:16px;}
.j-mar-t2 {margin-top:16px;}
.j-100 {width:100%;}
.j-32em {width:32em !important;}
.j-16em {width:16em !important;}
.j-8em {width:8em !important;}
.j-4em {width:4em !important;}


.j-float-right {float:right !important;}
.j-right {text-align:right;}
.j-float-left {float:left !important;}
.j-left {text-align:left;}
.j-center {text-align: center;}
.j-nowrap {white-space: nowrap;}
.j-iblocks>* {display:inline-block;}

.j-clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}


.j-block {display: block;}
.j-iblock {display: inline-block;}
.j-hidden {display:none;}
.j-top {vertical-align: top;}
.j-middle {vertical-align: middle;}
.j-single-line {white-space: nowrap;overflow: hidden;}

.j-bold {font-weight: bold;}
.j-shadow {box-shadow: 0 2px 15px rgba(0,0,0,0.3);}
.j-shadow-b {box-shadow: 0 8px 6px -4px rgba(0,0,0,0.3);}
.j-border {border:1px solid  #ccc;}
.j-border-b {border-bottom:1px solid  #ccc;}
.j-border-t {border-top:1px solid  #ccc;}
.j-caption {background-color:#e0e0e0; padding:8px;color:#444;}
.j-red {color:#c00;}
 
.j-hover:HOVER {
    cursor: pointer;
    background: rgba(0,0,0,0.03); 
}
.j-link {
    color: #16b !important;
    text-decoration: none;
    cursor: pointer;    
}

/*
 * tables
*/
.j-lines td, .j-lines th {
    border-bottom:1px solid rgba(0,0,0,0.09); 
}
.j-hover-tr tr:HOVER td {
    cursor: pointer;
    background: rgba(0,0,0,0.03); 
}
.j-hover-td td:HOVER {
    cursor: pointer;
    background: rgba(0,0,0,0.03); 
}

.j-table {
    border-collapse: collapse;
    border-spacing: 0;
}
.j-table td {
    padding: 6px 8px;
}
.j-table th {
    padding: 10px 8px;
}
.j-table-condensed td {
    padding: 2px 8px;
}  
 .j-table-condensed th {
     padding: 4px 8px;
 } 
 
.j-grid-table {
    border-top: 1px solid rgba(0,0,0,0.09); 
    border-left:1px solid rgba(0,0,0,0.09); 
}
.j-grid-table td, .j-grid-table th {
    border-bottom:1px solid rgba(0,0,0,0.09); 
    border-right:1px solid rgba(0,0,0,0.09); 
}
/*
* div emulated table
*/
.j-tbl {
	display:table;
}
.j-tbl>div {
	display:table-row;
}
.j-tbl>div>* {  /* 2020-01 */
	display:table-cell;
}
.j-tbl>div>div>div {
	vertical-align: middle;	/* td content */
}

/*
 * forms
*/


.j-input input, .j-input select, .j-input textarea, .j-input button {
    font-size: 17px;
    font-family: 'Open Sans','Helvetica Neue',Helvetica,Roboto,Arial,sans-serif;
    outline:none;
}

.j-input .xblock
{       
    display:block;
    width:100%;
    padding-left: 4px;
    box-sizing: border-box;    
}

.j-input select, input, textarea {
    border:1px solid #ccc;	
    border-collapse: collapse;
}

.j-input .jos-elem.yblock,
.j-input .jos-elem.yblock input,
.j-input .jos-elem.yblock select {
    height:2.4em;
    white-space: nowrap;
}


/*
.j-input input[type="text"], .j-input input[type="password"], .j-input  select, .j-input .jos-elem-switch, .j-input textarea {       
    display:block;
    width:100%;
    padding-left: 4px;
    box-sizing: border-box;    
}

.j-input input[type="text"], .j-input input[type="password"], .j-input select,  .j-input .jos-elem-switch {
	line-height: 2.4em;
    height:2.4em;
    white-space: nowrap;
}
*/
.j-input textarea {
    height:5em;
}

/*
<div class="j-form-horizontal">
 <div class="j-input">
   <label>xxx</label>
   <input>
 </div>
</div>

*/
.j-form-horizontal {
	display:table;
	border-collapse: separate;
  	border-spacing: 10px
}
.j-form-horizontal .j-input{
	display:table-row;	
}
.j-form-horizontal .j-input>*{
	display:table-cell;
	vertical-align: middle;	
}
.j-form-horizontal .j-input>*:first-child{	/* label */
	white-space: nowrap;
	text-align: right;
}

/*
 * j-form-right
*/
.j-form-right .j-input {
  display:block;
  text-align:right;
  white-space: nowrap;
  padding-bottom: 4px;
  padding-top: 4px;
  margin-bottom:4px;
}
.j-form-right .j-input label {
  display:inline-block;
  vertical-align: middle;    
}

.j-form-right .xblock {
  display:inline-block;
  width:16em;
  vertical-align: middle;
  margin-left: 8px;
}

/*
.j-form-right .j-input input[type="text"], 
.j-form-right .j-input input[type="password"],
.j-form-right .j-input textarea,
.j-form-right .j-input select {
  display:inline-block;
  width:16em;
  vertical-align: middle;
  margin-left: 8px;
}
*/

.j-form-right .jos-elem-icon-frame {
	display:inline-block;
}
/*
 * j-form-top
*/
.j-form-top .j-input {
  display:block;
  text-align:left;
  padding-bottom: 4px;
  margin-bottom:8px;
}
.j-form-top .j-input label {
  display:block;
  margin-bottom:4px;
}
.j-form-top .j-input input {    /* checkbox, radio (inside label) */
  vertical-align: middle;
}
.j-form-top .jos-elem-icon-frame {
	display:block;
}

/*
* jos elem (jos-elem-* classes are automatically inserted by JosElem)
*/
.jos-elem-label {
	border-bottom:1px solid #ccc;
	line-height: 2.4em;
}

.jos-elem-button {
    padding: 0.66em 1em;
    border: 0;
    color: rgba(0, 0, 0, 0.80);    
    background-color: var(--button-color);
    text-decoration: none;
    border-radius: 2px;
}
.jos-elem-button.pri {
    background-color:var(--button-pri-color);
    color:var(--text-inv-color);    
}
.xxxjos-elem-button:HOVER {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
    background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
    background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.jos-elem-button:focus {
    outline:none;
}
.jos-elem-switch {
    border:1px solid  #ccc; 
    cursor: pointer;
    background-color: #fff;
    line-height: 2.4em;
}
.jos-elem-switch span {
    padding:4px;
    margin-right: 4px;
    background-color: #e0e0e0;    
}
.jos-elem-switch .act {
    background-color:var(--button-pri-color);
    color:var(--text-inv-color);
}


.jos-elem-tabs ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.jos-elem-tabs li {
    text-align: center;
    display: inline-block;
    list-style-position: outside;
    margin-right: 8px;
}

.jos-elem-tabs li.active a {
    background-color: var(--button-pri-color);
    color: var(--text-inv-color);
}
.jos-elem-tabs li a {
    padding: 4px 8px 0 8px;
    border-bottom: 2px solid var(--button-pri-color);
}

.jos-elem-pagination {
	text-align: center;	
}
.jos-elem-pagination span {
	padding: 4px 5px 0 5px;
    border-bottom: 2px solid var(--button-pri-color);    
	margin-right: 4px;
	margin-left: 4px;
}
.jos-elem-pagination span.arrow {
    border-bottom-color:rgba(0,0,0,0);    	
}
.jos-elem-pagination .act {
    background-color: var(--button-pri-color);
    color:var(--text-inv-color);    
}




/*
* utils
*/
.jos-app-name-popupMenu {
	border:1px solid #ccc;
	background-color: #fff;
	xxxoverflow: auto;
}
.jos-app-name-popupMenu a {
	display:block;
	padding:0.4em 1.8em 0.4em 1em;	
	white-space: nowrap;
}
.jos-app-name-popupMenu a:hover {
	background-color: #e0e0e0;
	text-decoration: none;	
}

.jos-app-name-popupMenu a i {
	margin-right:0.7em;
}


.jos-app-name-listPicker {
	border:1px solid #ccc;
}
.jos-app-name-listPicker form>div {
	padding:4px 4px;
	border-bottom:1px dotted #ccc;
}
.jos-app-name-listPicker .active {
	background-color: #0078e7;
	color:#fff;	
}