/* last edit 18 sep 2019 by Erik Schylander
#id only use for JQuery


******************************************/
/* HTML */
html{box-sizing:border-box;overflow-x:hidden;font-size:14px;} /* responsive - font-size:calc(1em + 1vw); */
*, *:before, *:after{box-sizing:inherit}

body{margin:0; font-family: Helvetica, Arial, sans-serif; line-height:1.3}
/*body,h1,h2,h3,h4,h5,h6,p {"Roboto", sans-serif;}*/
.serif{font-family:serif;}

hr{border-top: 1px solid #ccc; margin:4px 0}
h1{font-size:2em}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}
p{font-size:14px}
h1,h2,h3,h4,h5,h6,p{font-weight:400;margin:4px 8px}

.divider{margin:4px 0; background-color:silver; height:1px;}

/*** NAV ***/
a.link{color:blue;}
a.btn, a.menuitem, a.baritem, a.link:hover{color:inherit;text-decoration:none;text-transform: uppercase;}

/*** TABLE Class***/
.table {display:table;table-layout:auto;width:100%;margin:0;}
.table .header{font-weight:bold; color:#000!important;background-color:#fff!important}
.table .tr {display:table-row;width:100%;} 
.table .td {display:table-cell;height:auto;}

.striped div.tr:nth-child(odd) {background-color: #eee;}
.striped div.td {border-bottom:1px solid #ccc;}
.list div.tr:nth-child(odd) {background-color: #f0f0f0;}
.td{padding:4px;word-wrap:break-word;vertical-align:top;}

table{margin:0;border-collapse:collapse;width:100%;background-color:inherit;}
table, th, td {border:solid thin transparent;}
th{padding:0 8px;font-weight:bold;font-size:14px;}
td{padding:0 8px; vertical-align:top;text-align:left;overflow-wrap:break-word;}
td.hand:hover {text-decoration: underline; color: #F22 }

table.form{background: #fff; table-layout:auto;}
table.form th{background: #ffb; border-color: #ccc;}
/*table.form th:first-child { max-width: 180px; }*/
table.form td{border-color: #ccc; }
table.form td:first-child{text-align:right; font-size:12px; font-weight:bold; max-width:160px;}
table.form td h3 { background-color: #ffb; }

table.data{ background: #ffe;  margin: 10px 0px;}
table.data th{ background: #ffb;  border-color: #ccc;}
table.data tr.select { background: #ffc; }
table.data td{ border-color: #ccc; }


/************ INPUT ******************************/
select,input,textarea{background-color:#ffe;}
select{margin:2px 4px;text-transform:none}
.input-select{padding:4px 8px;width:100%;border:none;border-bottom:1px solid #ccc;}
.radio,.check{margin-right:8px; font-weight:normal;}

.form-input{margin:4px 8px;}
input{vertical-align: middle; margin:0; width:100%; box-sizing: border-box;}
input[type=checkbox], input[type=radio]
 {margin-left:8px; margin-right:16px;width:24px;height:24px;position:relative;}
input[type=file], input[type=text], input[type=password], textarea
 {border:1px solid #aaa;border-radius:4px; padding:4px 8px;}
input[type=file]:hover, input[type=text]:hover, input[type=password]:hover,textarea:hover
 {border-color:#000;background-color:#fff;}
input[type=submit]
 {margin-left:16px;padding:8px 16px;border-radius:4px;width:100%;}
input[type=pincode]
 {padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width: 4em}
 

input.error, textarea.error, .datum.error, .error{border: 2px solid red !important;}
input.valid, textarea.valid, .datum.valid{border: 2px solid green !important;}

textarea{resize: vertical; min-height: 32px; width:100%; overflow:auto; }

/*** TEXT and FONTS ***/
label{font-weight:bold;}
/* label[type=radio] {border:2px solid black;} */

.text-help{margin:0 8px;font-style:italic;font-size:12px;}
.text-error{color:red;font-style:italic;font-size:12px;}
.text-right{text-align: right;}
.text-center{text-align: center!important;}
.text-left{text-align: left;}
.text-indent{text-indent:8px;}
.text-title{color: #221;font-weight:bold;font-size:16px;padding:5px 5px; margin-top:10px;}
.view-title { color: #221;  font-weight:bold; font-size:16px; padding:5px 5px; margin:0;}

sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
.tiny{font-size:10px!important}
.small{font-size:12px!important}
.medium{padding:0 8px;font-size:14px!important}
.large{padding:0 8px; font-size:18px!important}
.xlarge{padding:0 8px;font-size:24px!important}

.caps{text-transform:uppercase;}
.wide{letter-spacing:4px;}
.thick{font-weight:bold;}
.italic{font-style: italic;}

/*** POSITION ***/
.top {vertical-align: top;}
.middle{vertical-align: middle;}
.bottom{vertical-align: bottom;}
.right{float:right !important;} 
.left{float:left !important;}
.center{margin:0 auto;}

/*** NEW ***/
.resize{resize:vertical;overflow:auto;}  
/*.disabled{color:#444 !important; background-color:#ddd !important;}*/
.disabled,.btn:disabled,.bar-btn:disabled{cursor:not-allowed;opacity:0.9;}

.container:before,.container:after, .bar:before,.bar:after, .row:before,.row:after{content:"";clear:both; display:table;} /* Clear floats */
.container{display:block;text-align:left; max-width:100%;}
.container > img{max-height:800px;margin:4px 8px;}

/*** IMAGE ***/
img{height:auto;overflow-x:hidden;max-width:100%;display:block;}
img.responsive{max-height:680px; margin:0 auto;}
img.size-5 {max-width:100%}
img.size-4 {max-height: 480px;}
img.size-3 {max-height: 320px;}
img.size-2 {max-height: 160px;}
img.size-1 {max-height: 80px;}
img.size-0 {max-height: 40px;}
img.logo {max-height: 40px !important;}
/*.image{float:left;vertical-align:top;margin:5px 10px 5px 5px;background-color:#aaa;}*/	
.display-block{max-height:680px;display:block;margin:0 auto;}

/** DIV views, buttons **/
.circle{border-radius:50%}
.round-small{border-radius:2px}
.round{border-radius:4px}
.round-large{border-radius:8px}
.round-xlarge{border-radius:16px}
.round-xxlarge{border-radius:32px}

.padding{padding:8px 16px !important;}
.padding-left {padding-left:8px !important;}
.padding-right {padding-right:8px !important;}
.padding-bottom{padding-bottom:8px !important;}
.padding-large {padding:12px 24px !important;}
.padding-small {padding:4px 8px !important;}
/* padding:0.01em 16px; */

.margin{margin:8px !important;}
.margin-left{margin-left:8px !important;}
.margin-right{margin-right:8px !important;}
/* */
.max-height{vertical-align: middle; width:auto; height: 100%; padding: 2px;}


/*** BUTTONS (.button only used to hover) ***/
.button,.btn,.navBtn{cursor:pointer;}
button,.button,.btn{line-height:28px;font-size:14px;text-decoration: none;text-transform:uppercase;transition: all 0.2s;}
.btn{display:inline-block}
button{background-color: transparent;}
button,.btn{min-height:36px;margin:2px 4px;padding:2px 16px;border:1px solid transparent;border-radius:4px;}
	


/*** BORDER ***/
.border{border:1px solid #bbb;}
.border-after:after{height:2px; width:100%; border-bottom:1px solid red; content:' ';}
.border-row{padding:4px 8px; border-top:2px solid #aaa;border-bottom:2px solid #444;}
.border-bottom{border-bottom:1px solid #aaa;}
.border-top{border-top:1px solid #aaa;}
.border-right{border-right:1px solid #aaa;}
.border-left{border-left:1px solid #aaa;}


/*** CARD / FRAME / PANEL ***
.card{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);}
.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover{box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
.card{box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
*/
.card{box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}
.frame{border:2px solid #aaa;}
.panel{margin:16px; padding:16px;}
.box{margin:4px; padding:8px;}
.section{margin:24px 0 0 0;}

.banner{margin:0; padding:8px 16px;} // 
.banner > .text { margin:8px; padding:0; font-size:14px;} // 

header{padding:8px 16px;min-height:8px; font-size:20px;}
footer{min-height:2px;}

.card, .frame{margin: 8px; padding:0;}
.card, .frame {text-align:left;} /* border-radius:4px; */
.card header, .frame header{margin:0;padding:4px 8px;font-size:18px;} /* border-radius:2px 2px 0 0; */
.card footer, .frame footer{margin:0;padding:0;} /* border-radius:0 0 2px 2px; */

/*** HOR BAR height 40px ***/
.bar{width:100%;font-size:14px;text-align:left;}
.bar .item {display:inline-block;float:left;min-height:40px;line-height:40px;}
.baritem{line-height:40px;margin:0;padding:0 1.0vw;text-align:center;display:inline-block;}
.baritem > img{height: 36px; margin-top:2px; margin-right: 8px; border:1px solid #aaa;}
.bar-icon{height:40px;min-width:42px;padding:0;margin:0;line-height:40px;font-size:26px;color:inherit;background-color:inherit;}

/*** VERTICAL MENU ***/


/*** DROPDOWN ***/
.hidden{display:none;}
.visible{display:block;}
.pos-right{right:0;}

/* The container <div> - needed to position the dropdown content */
.dropdown-hover, .dropdown-click{position:relative;display:inline-block;cursor:pointer;}
/* Dropdown content (use hidden to hide ) */
.dropdown-content, .dropdown-content-right{display:none; text-align:left;margin:0;padding:0;width:280px;z-index:1;}
.dropdown-content{position:absolute;box-shadow:4px 4px 4px #888;}
.dropdown-content-right{position:absolute;right:0px;box-shadow:-4px 4px 4px #888;}
/* Show the dropdown menu on hover */
.dropdown-hover:hover .dropdown-content{display:block;}
.dropdown-hover:hover .dropdown-content-right{display:block;}

/*** Vertical block NAV item ***/
/*img.menuitem{ vertical-align: -6px; max-width: 32px; max-height: 24px; margin: 0 2px 0 2px;}*/
/*** Horisontal row NAV item ***/
.nav-item{margin:0;padding:4px 8px;display:inline-block;} /* used in footer */

/*** MENU ***/
.menu {float:left;}
.menuitem{padding:4px;display:block; width:100%;border-bottom:1px solid #ccc;}
.striped a:nth-child(even) {background-color: #eee;}

/*** row / cols ***/
.row{margin:0; padding:0; width:100%;text-align:left;word-wrap:break-word;}
.col{display:table-cell;}
.colitem{float:left; padding:0 2px; height:60px;line-height:60px;overflow:hidden;}
[class*="col-"] {width:100%;} /* -25, -50, -75 */
.col-25{text-align:left;margin-top:0;}

.cell-25{float:left; width:25%;}
.cell-33{float:left; width:33%;}
.cell-50{float:left; width:50%;}


/******************* PAGE ***************************************/
#page{max-width:1080px; margin:0 auto; padding:0;}
/*#page-header { max-width:1080px; position:fixed; top:0px; z-index:100; }
#page-content{clear:both; min-height: 500px; border: solid thin silver; text-align: left; margin-top: 200px;}
*/
#page-title{padding:8px;width:100%;text-transform:uppercase;font-size:calc(1.0em + 0.5vw);}
.page-title{padding:16px;width:100%;text-transform:uppercase;font-size:calc(1.0em + 0.5vw);}
#page-bottom{clear:both; margin:4px 0;}
#page-footer{background-color: #ddd; padding:8px; border: solid thin silver;}
#back-to-top{margin: 8px; padding:5px;}

ul{margin:4px 24px;padding:0;}

/************** SIDE MENU ***********
#nav-menu { padding-top: 0; }
#nav-menu ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #003366; display: none; }
#nav-menu ul li { margin: 0; padding: 0; border-bottom: 1px solid #003366; background-color:#006666; text-align: left; }
#nav-menu ul li#selected { background-color: #069; }
#nav-menu ul li  a { display: block; padding: 5px 10px; text-decoration: none; color: #eee; font-size: 14px;}
#nav-menu ul li  a:hover { text-decoration: underline; background-color: #069;}
*/

/****************** IMAGES ***********************/
	
/***************** TEXTBOX ***************************/
.textbox {margin:5px 5px 10px 5px;border:thin solid transparent;text-align:left;zoom:1;} /* border-radius: 5px;  */
.textbox::before,
.textbox::after { content:""; display:table;clear:both; }
.textbox > .title{color: #221;font-weight:bold;font-size:16px;text-align:left;padding:5px;margin:0;} /* border-radius: 2px 2px 0 0; */

#view-content { width: auto; margin-left: 280px; padding: 0 8px 16px 8px; float: left; }
#view-leftbar { padding: 8px; margin:0; width: 280px; min-height: 100px; float: left; }


/************************************************************************************
MEDIA QUERY screen 
*************************************************************************************/
 /* Rules for tablets and bigger viewports */
@media only screen and (min-width: 768px) {
/*	[type=submit] {float:left;} */
/* col-grids */	
	.col-25{float:left; width:25%;}
	.col-33{float:left; width:33%;}
	.col-50{float:left; width:50%;}
	.col-75{float:left; width:75%;}
/* disable webkit text size adjust (for iPhone) */
	html { -webkit-text-size-adjust: none; }
/* nav-menu */
	#nav-menu-toggle { display: block; }
	#nav-menu { padding: 4px; display: none; width: 100%; background-color: inherit; border-top: 0 none inherit;}
	#nav-menu ul li { border-bottom: 1px solid #003366; width: 100%; text-align: left; padding-left: 8px; }
	#side-panel { display: none; }
}


@media only screen and (max-width:600px) { /*  small screen */
	[class*="cell-"] {width:100%;} /* -25, -33, -50 */
	.hide-small{display:none;}
	#admin-menu-toggle{display:none;} /* in case admin not possible on very small screens */
	.menu{float:none;}	
/*	body{font-size: 12px;}; */
}
@media only screen and (min-width:600px) {
	.hide-large{display: none;}
}	


/*** HOVER ***/
button:hover, .menuitem:hover, .btn:hover, .button:hover, .navBtn:hover{
	color:#000!important;background-color:#ccc!important;}
.btn:hover {border:1px solid #888;}	

/*********** COLORS ****************/
body {color:#000; background-color:#f8f8f8}
.page{background-color:#fff;
	box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 4px 8px 0 rgba(0,0,0,0.19);}
	
.border-section{border-top: 3px solid red;}
.border-alert{border: 2px solid red;}
.border-success{border: 2px solid green;}

.button-normal {color:#fff !important; background-color:#009688 !important}
.button-cancel {color:#fff!important;background-color:#000!important;}
.button-alert {color:#fff!important;background-color:#f44336!important}

/*** THEME COLORS ***/
.theme {color:#fff !important; background-color:#066 !important}
.theme-l5{color:#000 !important; background-color:#e9fffd !important}
.theme-light {color:#000 !important; background-color:#b7fff8  !important}
.theme-dark {color:#fff !important; background-color:#004a43 !important}

.theme-view {color:#000 !important; background-color:#fff !important}
.theme-form {color:#000 !important; background-color:#e9fffd !important}
.theme-canvas {color:#000; background-color:#ffefbb;}
.theme-menu{color:#000!important;background-color:#fdf5e6!important} /* sand */

.theme-submit {color:#fff !important; background-color:#009688 !important}
.theme-cancel {color:#fff!important;background-color:#000!important;}
.theme-select {color:#fff;background-color: #4CAF50;}
.theme-admin {color:#fff!important;background-color:#f44336!important}
.theme-webmaster {color:#fff!important;background-color:#000!important}
.theme-input {color:#000; background-color:#fffbe8}

.theme-border {border: 2px solid #009688 !important}
.theme-text {color:#004a43 !important}
.theme-adminbar{border:2px solid red; color:#222;background-color:#fff;}
.theme-footer {border-top:1px solid #ddd;color:#000!important;background-color:#eee!important;}



/*** ALT colors ***/
.alt-theme {color:#fff!important;background-color:#2196F3!important}
.alt-header{}
.alt-border {border: 2px solid #260!important}

.hover-theme:hover {color:#fff !important; background-color:#009688 !important}
.hover-theme-text:hover {color:#009688 !important}
.hover-theme-frame:hover {border-color:#009688 !important}

/**** custom text colors ****/
.amber,.hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.aqua,.hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.blue,.hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.light-blue,.hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.brown,.hover-brown:hover{color:#fff!important;background-color:#795548!important}
.cyan,.hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.blue-grey,.hover-blue-grey:hover,.blue-gray,.hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.green,.hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.light-green,.hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.indigo,.hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.khaki,.hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.lime,.hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.orange,.hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.deep-orange,.hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.pink,.hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.purple,.hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.deep-purple,.hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.red,.hover-red:hover{color:#fff!important;background-color:#f44336!important}
.sand,.hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.teal,.hover-teal:hover{color:#fff!important;background-color:#009688!important}
.yellow,.hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.white,.hover-white:hover{color:#000!important;background-color:#fff!important}
.black,.hover-black:hover{color:#fff!important;background-color:#000!important}
.grey,.hover-grey:hover,.gray,.hover-gray:hover{color:#000!important;background-color:#bbb!important}
.light-grey,.hover-light-grey:hover,.light-gray,.hover-light-gray:hover{color:#000!important;background-color:#fafafa!important}
.dark-grey,.hover-dark-grey:hover,.dark-gray,.hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.pale-red,.hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.pale-green,.hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.pale-yellow,.hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.pale-blue,.hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.text-red,.hover-text-red:hover{color:#f44336!important}
.text-green,.hover-text-green:hover{color:#4CAF50!important}
.text-blue,.hover-text-blue:hover{color:#2196F3!important}
.text-yellow,.hover-text-yellow:hover{color:#ffeb3b!important}
.text-white,.hover-text-white:hover{color:#fff!important}
.text-black,.hover-text-black:hover{color:#000!important}
.text-grey,.hover-text-grey:hover,.text-gray,.hover-text-gray:hover{color:#757575!important}
.text-amber{color:#ffc107!important}
.text-aqua{color:#00ffff!important}
.text-light-blue{color:#87CEEB!important}
.text-brown{color:#795548!important}
.text-cyan{color:#00bcd4!important}
.text-blue-grey,.text-blue-gray{color:#607d8b!important}
.text-light-green{color:#8bc34a!important}
.text-indigo{color:#3f51b5!important}
.text-khaki{color:#b4aa50!important}
.text-lime{color:#cddc39!important}
.text-orange{color:#ff9800!important}
.text-deep-orange{color:#ff5722!important}
.text-pink{color:#e91e63!important}
.text-purple{color:#9c27b0!important}
.text-deep-purple{color:#673ab7!important}
.text-sand{color:#fdf5e6!important}
.text-teal{color:#009688!important}
.text-light-grey,.hover-text-light-grey:hover,.text-light-gray,.hover-text-light-gray:hover{color:#f1f1f1!important}
.text-dark-grey,.hover-text-dark-grey:hover,.text-dark-gray,.hover-text-dark-gray:hover{color:#3a3a3a!important}
.border-red,.hover-border-red:hover{border-color:#f44336!important}
.border-green,.hover-border-green:hover{border-color:#4CAF50!important}
.border-blue,.hover-border-blue:hover{border-color:#2196F3!important}
.border-yellow,.hover-border-yellow:hover{border-color:#ffeb3b!important}
.border-white,.hover-border-white:hover{border-color:#fff!important}
.border-black,.hover-border-black:hover{border-color:#000!important}
.border-grey,.hover-border-grey:hover,.border-gray,.hover-border-gray:hover{border-color:#bbb!important}