* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
html {
    border: 0;
    margin:0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right:0;
    z-index: 1;
    overflow:hidden;
  
  font-family: 'Work Sans', sans-serif;
  
  line-height: 1.4em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0px;
  text-rendering: optimizeLegibility;
  font-size: 16px;
    
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga" on;
  margin:0;
  padding:0;
}
h2 {
  font-size:1.2em;
  font-weight: bold;
}
h3 {
  font-size:1em;
  font-weight: bold;
}
mark {
  background-color: #ff0;
}
/*
material icons
 */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('https://umemo.ruleless.com/res/material/MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.material-icons.md-18 { font-size: 18px; }

*,
*::before,
*::after { 
  box-sizing: border-box;
}

a {
    text-decoration:none;
    color:#000;
    outline: none;
}
a:visited {
   color:#000;
   outline: none;
}
a:active {
  color:#000;
  outline: none;
}

.clickable-childs>* {
  cursor:pointer;
}
.clickable-childs>*:active {
  background-color:#cfc;
}
.clickable {
  cursor:pointer;
}
.clickable:active {
  background-color:#cfc !important;
}

button:active, a:active {
    background-color:#cfc !important;
}

/* standard field width*/
.width {
    display:inline-block;
    width:400px;
}

.loader {
  background-image: url('https://umemo.ruleless.com/res/img/loader.gif');
  border: 0 none;
  display: inline-block;
  width:160px;
  height:24px;
  margin:10px;
  position:absolute;
  bottom:0;
  right:0;
  background-color:#4286f7;
}

@media (max-width: 480px) {
  .width { width:100%; }
}


.bullet:before {
  content:'•';
  margin: 0 4px;
  opacity: 0.3;
}


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

.disabled {
  opacity: 0.5;
}

thead th {
  text-align:left;
}
td.r, th.r {
  text-align: right;
}


.ql-editor li > .ql-ui:before {
	margin-left: -2.5em;
}


/* ver 2017-10-01
2017-10-06
2017-11-02 - CSS custom properties
2018-02-26 - .j-middle
*/

:root {
	xx--link-color: #0730c0;
	--link-color: #0077dd;
	--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: 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-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: 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>* {  /* 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;
}

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










.jos-window {
	background-color: #fff;
	visibility:hidden;
}

.jos-window-modal {
  background-color: #fff;
  box-shadow: 0px 0px 6px 3px rgba(0,0,0, 0.4);  	
}

.jos-window-footer {	
	border-top:1px solid #ccc;
	padding:8px;
	background-color: #eee;
}
.jos-window-footer >button {
	min-width:6em;
}

.jos-window >.title {
	font-size: 120%;
	font-weight: bold;
	padding:4px 8px;
	background-color: #76A3B7;
	line-height: 36px;
	color:#fff;	
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

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

.jos-window:focus {
    outline: none;
}

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