/* ver 2017-10-01
2017-10-06
2017-11-02 - CSS custom properties
2017-12-29

*/

:root {
	xx--link-color: #0730c0;
	--link-color: #0077dd;
	--button-color:#E0E0E0;
}

.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: var(--link-color);
    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-32em {width:32em !important;}
.j-16em {width:16em !important;}
.j-8em {width:8em !important;}
.j-4em {width:4em !important;}
.j-100 {width:100%;}
.j-100h {height:100%;}
.j-100wh {height:100%;width: 100%}

.j-full {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.j-stick-b {position:absolute;bottom:0;}
.j-stick-t {position:absolute;top:0;}
.j-stick-l {position:absolute;left:0;}
.j-stick-r {position:absolute;right:0;}



.j-float-right {float:right !important;}
.j-right {text-align:right !important;}
.j-float-left {float:left !important;}
.j-left {text-align:left  !important;}
.j-center {text-align: center  !important;}
.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: var(--link-color);
    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>div {
	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: 14px;
    font-family: 'Open Sans','Helvetica Neue',Helvetica,Roboto,Arial,sans-serif;
}

.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;
}

.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:#0078e7;
    color:#fff;    
}
.jos-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:#0078e7;
    color:#fff;
}


.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: #0078e7;
    color: #fff;
}
.jos-elem-tabs li a {
    padding: 4px 8px 0 8px;
    border-bottom: 2px solid #0078e7;
}

.jos-elem-pagination {
	text-align: center;	
}
.jos-elem-pagination span {
	padding: 4px 5px 0 5px;
    border-bottom: 2px solid #0078e7;    
	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: #0078e7;
    color:#fff;    
}


.jos-elem-tree {
  cursor: pointer;
  margin-left:-16px;
}
.jos-elem-tree ul {
  margin:0;
  padding:0 0 0 16px;
}
.jos-elem-tree li{  
  margin:0;
  padding:0;
  list-style-type: none;
  list-style-image: none;
  white-space: nowrap;  
}
.jos-elem-tree li .folder {
  color:#adad4d;
}
.jos-elem-tree li .file {
  color:#888;
}
.jos-elem-tree li>div>* {
  display:inline-block;
  vertical-align: middle;
}
.jos-elem-tree li .tree-title {
  padding:4px;
}

.jos-elem-tree .act>div .tree-title {
  background-color: #ccc;
}

/*
* utils
*/
.jos-app-name-popupMenu {
	border:1px solid #ccc;
	background-color: #fff;
}
.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;	
}



.jos-window {
	background-color: #fff;
	box-shadow: 0 2px 15px rgba(0,0,0,0.5);
	visibility:hidden;	/* turn on animation */
	outline:none;	
}
.jos-window-body {
	padding:8px; 
}
.jos-window-footer {	
	border-top:1px solid #ccc;
	padding:8px;
	background-color: #eee;
}
.jos-window-footer .uk-button {
	border: 1px solid #bbb;
	min-width:6em;
}
.jos-window-footer .uk-button-primary {
	margin-left:8px;
}
.jos-window >.title a:HOVER {
	text-decoration: none;
}
.jos-window >.title {
	font-size: 20px;
	font-weight: bold;
	padding:4px 8px;
	line-height: 36px;
	
	background-color: #0065BD;	
	border-bottom:1px solid #ddc;
	
	color:#fff;
		
	vertical-align: middle;
}
.jos-window >.title>.icons  {
	vertical-align: middle;
}
.jos-window >.title>.close{
	font-size:30px;
	padding:2px;
	position:absolute;
	top:0;
	right:0;
}
.jos-window >.title>.close a {
	padding-right:4px;
}
.jos-window >.title .gray {
	color:#d1e0e6;
}

.jos-window >.title .icons a {
	margin-left:10px;
	color: #fff; 
}

.jos-window >.title .icons a:HOVER {
	color:#4286f7;
}

.jos-window .list-picker {
	padding:8px;
	border:1px solid #ccc;
}
.jos-window .list-picker form>div {
	border-bottom:1px solid #eee;
	padding:4px 8px;
	white-space: nowrap;
}
.jos-window .list-picker form>div>.fa-check {
	margin-left:8px;
} 

.jos-window .list-picker form>div:HOVER {
	background-color: #ccc;
}
.jos-window .list-picker .active {
	background-color: #3165d6 !important;
	color:#fff;
	
}

.jos-animate-start {	
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
}

.jos-animate-end {        
	-webkit-transform: scale(1.0);
	-ms-transform: scale(1.0);
	transform: scale(1.0);
	transition:all 0.3s ease;	
}
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}