body{ overflow-y:scroll; background-color:lightblue; font-family:"Times New Roman"; font-size:20px; }
h1{ color:black; text-align:center; }
h2{ color:black; text-align:left; }
h3{ color:black; text-align:left; }
/* p{ font-family:"Times New Roman"; font-size:20px; } */
smaller{ font-size:smaller; font-weight:lighter; }
larger{ font-size:larger; font-weight:lighter; }
small{ font-size:small; font-weight:lighter; }
large{ font-size:large; font-weight:lighter; }
img{ max-width:100%; height:auto; }

/* Text */
.tiny{ font-size:8px; }
.somewhat-tiny{ font-size:12px; }
.smaller{ font-size:smaller; font-weight:lighter; }
.larger{ font-size:larger; }
.large{ font-size:large; }
.x-large{ font-size:x-large; }
.xx-large{ font-size:xx-large; }
.slim-border{ border-style:solid; border-width:1px; border-color:rgb(160,160,255); }
.icons{ font-size:20px; }
.match{ border-style:solid; border-width:2px; }
.max-3-lines{ max-height:100px; overflow:scroll; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.center{ text-align:center; }
img.center{ text-align:center; margin-left:auto; margin-right:auto; display:block; }
img.center.slideshow{ text-align:center; margin-left:auto; margin-right:auto; display:block; height:520px; }
.left{ text-align:left; }
.right{ text-align:right; }
/* Tooltip */
/* Tooltip container */
.tooltip { position:relative; display:inline-block; }
.tooltip .tooltiptext { visibility:hidden; background-color:white; color:black; border-color:cyan; border-width:thick; border-style:solid; text-align:center; min-width:300px; padding:0.4em; border-radius:6px; position:absolute; z-index:5; left:50px; top:-50%; }
.tooltip:hover .tooltiptext { visibility:visible; }
.chat-wrap{ border:10px; margin-right:50px; }
.chatarea { border:3px; height:400px; overflow:scroll; background-color:white; }
.chat{ border:5px; position:relative; padding:5px; margin:0.1em 0.1em 0.1em; }
.chat.from_other{ background-color:lightblue; }
.chat.from_me{ background-color:lightgreen;  }
.chat.join, .chat.leave{ background-color:lightblue; font-style:italic; font-size:70%; }
.chat.tooltiptext{left:50%; bottom:50%;}
.notify.inactive{ opacity:0.0; visibility:hidden !important; color:rgba(0,0,0,0); overflow:hidden; }
.notify.active{ visibility:visible; background-color:white; padding:0.4em; border-radius:6px; z-index:6; border-color:red; border-width:thick; border-style:dotted; }
.flash{ padding:0.4em; border-radius:6px; border-color:green; border-width:thick; }
.page-arrow a{ color:unset; text-decoration:none; border:0; text-decoration-color:transparent; }
.hide{ visibility:hidden; }
.blur{ font-size:40px; color:transparent; text-shadow: 0 0 8px #000; }
.board{ border:5px solid black; background-color:white; z-index:10; text-align:center; }
.board > div{ z-index:20; }
.grid3x2{ display:grid; grid-template-columns:repeat(3, 1fr); grip-template-rows:repeat(2, 1fr); }
.grid3x3{ display:grid; grid-template-columns:repeat(3, 1fr); grip-template-rows:repeat(3, 1fr); }
.grid9x9{ display:grid; grid-template-columns:repeat(9, 1fr); grip-template-rows:repeat(9, 1fr); }
.grid9x1{ display:grid; grid-template-columns:repeat(9, 1fr); grip-template-rows:repeat(1, 1fr); }
.grid21x21{ display:grid; grid-template-columns:repeat(21, 1fr); grip-template-rows:repeat(21, 1fr); }
.mark{ text-decoration:bold; color:black; font-size:larger; }
.menuover { position:relative; display:inline-block; }
.menuover .menuovertext { visibility:hidden; display:grid; background-color:white; text-align:center; border-color:blue; border-width:medium; border-style:solid; min-width:1fr; padding:0.1em; border-radius:2px; position:absolute; z-index:100; left:0; top:0; }
.menuover:hover .menuovertext { visibility:visible; }
.menuovertext:hover { visibility:visible; }
.border-left0{ border-left:0px solid black; }
.border-right0{ border-right:0px solid black; }
.border-top10 border-top:0px solid black; }
.border-bot0{ border-bottom:0px solid black; }
.border-left1{ border-left:1px solid black; }
.border-right1{ border-right:1px solid black; }
.border-top1{ border-top:1px solid black; }
.border-bot1{ border-bottom:1px solid black; }
.border-left2{ border-left:2px solid black; }
.border-right2{ border-right:2px solid black; }
.border-top2{ border-top:2px solid black; }
.border-bot2{ border-bottom:2px solid black; }
.border-left3{ border-left:3px solid black; }
.border-right3{ border-right:3px solid black; }
.border-top3{ border-top:3px solid black; }
.border-bot3{ border-bottom:3px solid black; }
.cross-line{ background-color:grey; }
.background30{ position:relative; z-index: -30; }
.background20{ position:relative; z-index: -20; }
.background10{ position:absolute; z-index: -10; }
.grid11{ grid-row: 1/1; grid-column: 1/1; z-index: -10; }
.box3x3{ grid-row:span 3; grid-column:span 3; border: 30px solid black; z-index: 30; padding:3%; }

/* Images */
.soft-corner{ border-radius:8px; }
.rounded{ border-radius:50%; }
.thumbnail{ border:1px solid #ddd; border-radius:4px; padding:5px; width:150px; }
.thumbnail.linkiimg:hover{ box-shadow:0 0 2px 1px rgba(0, 140, 186, 0.5); }
.bg-image{ background-image:url('/images/background.jpg'); background-size:cover; background-repeat:no-repeat; }
.bg-image-fixed{ height:400px; overflow:scroll; }

*, ::before, ::after{ box-sizing:border-box; }
.row { display:flex; }
.column { flex:40%; }
.column { flex:40%; }
.flex-column { flex:40%; }
.table{ display:table; } /* <table> */
.thead{ display:table-header-group; }
.tcol{ display:table-column; } /* <col> */
.tr{ display:table-row; } /* <tr> */
.td{ display:table-cell; } /* <td> */
.two_column { colums: 2 auto; display:table; }
.tree_column { colums: 3 auto; float:left; width:40%; }
.four_column { colums: 4 auto; float:left; width:40%; }
.xtwo_column:after { content:""; display:table; clear:both; }
.vistable{ border-collapse:collapse; width: 100%; }
.vistable td, .vistable th{ border: 1px solid #ddd; padding: 8px; }
.vistable tr:nth-child(even){background-color: #f2f2f2;}
.vistable tr:hover{background-color: #ddd;}
.vistable th{ padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #4CAF50; color: white; }
.top_right{ float:right; width:30%; }
.top_right a{ text-decoration:none; }
.right_column { float:right; }
.right_column:after { content:""; display:table; clear:both; }
.border1 { width:300px; height:100px; border:1px solid blue; box-sizing:border-box; }
.base_icon { width:40px; height:40px; padding:5px; box-sizing:border-box; float:left; float:top; clear:left; }
.preview_image { width:100px; height:100px; box-sizing:border-box; }
input.selected{ background-color:grey; }

/* Level 0 - Top menu */
.top_menu { font-size:smaller; font-weight:normal; font-size:20px; line-height:20px; text-decoration:none; white-space:nowrap; }
/* Level 1 - Horisontal / Across - width 200px */
.top_menu ul{ height:50px; line-height:20px; list-style:none; margin:0; padding:0; }
.top_menu li{ float:left; width:200px; background:white; display:block; line-height:38px; text-align:center; text-decoration:none; }
.top_menu li a{ color:#0f0f0f; background:white; display:block; line-height:38px; text-align:center; text-decoration:none; }
.top_menu li a:hover{ background:url(/images/menu_hover.jpg) top left repeat-x; color:#000000; }
/* Level 2 - Vertical / Down - width 325px (wider texts) */
.top_menu li ul{ height:38px; background:#515151; display:none; height:auto; filter:alpha(opacity=95); opacity:0.95; position:absolute; width:325px; z-index:2000; }
.top_menu li:hover ul{ display:block; }
.top_menu li li { display:block; float:none; width:325px; }
.top_menu li ul a{ display:block; font-size:18px; font-style:normal; height:30px; line-height:30px; padding:5px 10px 5px 18px; text-align:left; }
.top_menu li ul a:hover{ background:#949494; color:#000000; opacity:1.0; filter:alpha(opacity=100); }
.top_menu li div{ color:#0c0c0c; background:white; display:block; line-height:38px; font-size:18px; text-align:center; text-decoration:none; }
/* Level 3 - Does not work */
/*
.top_menu li li ul{ display:none; }
.top_menu li li ul{ height:38px; background:#515151; display:none; height:auto; filter:alpha(opacity=95); opacity:0.95; position:absolute; width:325px; z-index:2000; }
.top_menu li li:hover { display:block; z-index:3000; }
.top_menu li li:hover li { float:none; width:300px; }
.top_menu li li:hover ul a{ font-size:18px; font-style:normal; height:30px; line-height:30px; padding:5px 10px 5px 18px; text-align:left; }
.top_menu li li a:hover{ background:url(/images/menu_hover.jpg) top left repeat-x; color:#000000; }
*/

/* Prevent the text contents of draggable elements from being selectable. */
[draggable] { -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; user-select:none; /* Required to make elements draggable in old WebKit */ -khtml-user-drag:element; -webkit-user-drag:element; }

/* Lexicalisation / selection */
.dk .da .en, .se { display:none; } /* hide all elements with a language class */
.dk:lang(da), .da:lang(da), .en:lang(en), .se:lang(se) { display:block; } /* show those elements that match their language class */

/* Ribbon corners */
.ribbon { width:170px; height:170px; overflow:hidden; position:absolute; z-index:-10; }
.ribbon::before, .ribbon::after { position:absolute; z-index:-20; content:''; display:block; border:5px solid #2980b9; border-top-color:transparent; border-left-color:transparent; }
.ribbon span { position:absolute; display:block; width:280px; padding:15px 0; background-color:#3498db; box-shadow:0 5px 10px rgba(0,0,0,.1); color:#fff; font:700 18px/1 'Lato', sans-serif; text-shadow:0 1px 1px rgba(0,0,0,.2); text-transform:uppercase; text-align:center; }
/* top left*/
.ribbon.top-left { top:-10px; left:-10px; }
.ribbon.top-left::before { top:0; right:0; }
.ribbon.top-left::after { bottom:0; left:0; }
.ribbon.top-left span { right:-25px; top:30px; transform:rotate(-45deg); }
/* top right*/
.ribbon.top-right { top:-10px; right:-10px; }
.ribbon.top-right::before { top:0; left:0; }
.ribbon.top-right::after { bottom:0; right:0; }
.ribbon.top-right span { left:-35px; top:40px; transform:rotate(45deg); }
/* bottom left*/
.ribbon.bottom-left { bottom:-10px; left:-10px; }
.ribbon.bottom-left::before { bottom:0; right:0; }
.ribbon.bottom-left::after { top:0; left:0; }
.ribbon.bottom-left span { right:-25px; bottom:30px; transform:rotate(45deg); }
/* bottom right*/
.ribbon.bottom-right { bottom:-10px; right:-10px; }
.ribbon.bottom-right::before { bottom:0; left:0; }
.ribbon.bottom-right::after { top:0; right:0; }
.ribbon.bottom-right span { left:-25px; bottom:30px; transform:rotate(-45deg); }

/* Another ribbon */
.ribbon-inline { padding:.34em 1em; margin:0; margin-top:5%; position:relative; color:#ffffff; font:32px 'Patua One', sans-serif; text-align:center; letter-spacing:0.1em; text-shadow:0px -1px 0px rgba(0,0,0,0.3); box-shadow:inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 20px rgba(0,0,0,0.1), 0px 1px 1px rgba(0,0,0,0.4); background:-webkit-linear-gradient(top,#1eb2df, #17a7d2); display:inline-block; }
.ribbon-inline:before, .ribbon-inline:after { content:""; width:.2em; bottom:-.5em; position:absolute; display:block; border:.9em solid #1eb2df; box-shadow:0px 1px 0px rgba(0,0,0,0.4); z-index:-2; }
.ribbon-inline:before { left:-1.35em; border-right-width:.75em; border-left-color:transparent; }
.ribbon-inline:after { right:-1.35em; border-left-width:.75em; border-right-color:transparent; }
.ribbon-inline.content:before, .content:after { content:""; bottom:-.5em; position:absolute; display:block; border-style:solid; border-color:#0675b3 transparent transparent transparent; z-index:-1; }
.ribbon-inline.content:before { left:0; border-width:.5em 0 0 .5em; }
.ribbon-inline.content:after { right:0; border-width:.5em .5em 0 0; }

/* Yancy adaption + forms / columns */
.form-group label,.columns label{ width:34%; margin-right:5%; text-align:right; clear:both; float:left; }
.form-group input,.columns input{ width:60%; }
.form-group input[type="submit"],.columns input[type="submit"]{ width:20%; }

.edit { min-width:60%; }
/* Input validation */
input.field-with-error, input:invalid { background-color:pink; border-color:red; }
input.signature{ border:0; border-bottom:1px solid #000; }

/* radio buttons for tabs, and content change */
/*
.tab{}
.tab-wrap {
}
*/
i.tab-wrap { -webkit-transition:0.3s box-shadow ease; transition:0.3s box-shadow ease; border-radius:6px; max-width:100%; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; position:relative; list-style:none; background-color:#fff; margin:40px 0; box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
.tab-wrap:hover { box-shadow:0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19); }
.tab { display:none; }
.tab-content { padding:10px 25px; background-color:transparent; position:absolute; width:100%; z-index:-1; opacity:0; left:0; -webkit-transform:translateY(-3px); transform:translateY(-3px); border-radius:6px; }
.tab:checked:nth-of-type(1) ~ .tab-content:nth-of-type(1) { opacity:1; -webkit-transition:0.5s opacity ease-in, 0.2s transform ease; transition:0.5s opacity ease-in, 0.2s transform ease; position:relative; top:0; z-index:1; -webkit-transform:translateY(0px); transform:translateY(0px); text-shadow:0 0 0; }
.tab:checked:nth-of-type(2) ~ .tab-content:nth-of-type(2) { opacity:1; -webkit-transition:0.5s opacity ease-in, 0.2s transform ease; transition:0.5s opacity ease-in, 0.2s transform ease; position:relative; top:0; z-index:1; -webkit-transform:translateY(0px); transform:translateY(0px); text-shadow:0 0 0; }
.tab:checked:nth-of-type(3) ~ .tab-content:nth-of-type(3) { opacity:1; -webkit-transition:0.5s opacity ease-in, 0.2s transform ease; transition:0.5s opacity ease-in, 0.2s transform ease; position:relative; top:0; z-index:1; -webkit-transform:translateY(0px); transform:translateY(0px); text-shadow:0 0 0; }
.tab:checked:nth-of-type(4) ~ .tab-content:nth-of-type(4) { opacity:1; -webkit-transition:0.5s opacity ease-in, 0.2s transform ease; transition:0.5s opacity ease-in, 0.2s transform ease; position:relative; top:0; z-index:1; -webkit-transform:translateY(0px); transform:translateY(0px); text-shadow:0 0 0; }
.tab:checked:nth-of-type(5) ~ .tab-content:nth-of-type(4) { opacity:1; -webkit-transition:0.5s opacity ease-in, 0.2s transform ease; transition:0.5s opacity ease-in, 0.2s transform ease; position:relative; top:0; z-index:1; -webkit-transform:translateY(0px); transform:translateY(0px); text-shadow:0 0 0; }
.tab:first-of-type:not(:last-of-type) + label { border-top-right-radius:0; border-bottom-right-radius:0; }
.tab:not(:first-of-type):not(:last-of-type) + label { border-radius:0; }
.tab:last-of-type:not(:first-of-type) + label { border-top-left-radius:0; border-bottom-left-radius:0; }
.tab:checked + label { background-color:#fff; box-shadow:0 -1px 0 #fff inset; cursor:default; }
.tab:checked + label:hover { box-shadow:0 -1px 0 #fff inset; background-color:#fff; }
.tab + label { float:left; width:100%; box-shadow:0 -1px 0 #eee inset; border-radius:6px 6px 0 0; cursor:pointer; display:block; text-decoration:none; color:#333; -webkit-box-flex:3; -webkit-flex-grow:3; -ms-flex-positive:3; flex-grow:3; text-align:center; background-color:#f2f2f2; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; text-align:center; -webkit-transition:0.3s background-color ease, 0.3s box-shadow ease; transition:0.3s background-color ease, 0.3s box-shadow ease; height:50px; box-sizing:border-box; padding:15px; }
@media (min-width:768px) {
  .tab + label { width:auto; }
}
.tab + label:hover { background-color:#f9f9f9; box-shadow:0 1px 0 #f4f4f4 inset; }
/* Media profiles (f.ex. print)  at end, so that it can override other settings */
@media print {
  .no_print, .no_print * { display:none; }
}
@page {
}
/* End */