html { overflow-y: scroll; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
* { padding: 0; margin: 0; }

body { font-family: Verdana, sans-serif; }
header, footer, nav, article, section, main { display: block; }


/***  Misc definitions ***/
.color-primary {  }
.color-secondary {  }

/*** Default HTML elements ***/
body{ max-width: 1200px; margin: auto; overflow: hidden; }
a, a:link, a:visited, a:active { text-decoration: none; color: #000; }
a { transition: border 1.00s; border-bottom: solid 1px transparent; font-style: italic; }
a:hover { border-bottom: solid 1px #000; }

a {}
img { border: 0; }


h1, h2, h3, h4 { margin: 10px 0; font-family: "Lato", sans-serif; }
h1 { letter-spacing: 5px; font-size: 32px; }
h2 { letter-spacing: 4px; font-size: 28px; }
h3 { letter-spacing: 3px; font-size: 24px; }
h4 { letter-spacing: 2px; font-size: 18px; }

p { margin: 10px 0;}

table {  border-spacing: 10px; border-collapse: collapse; }
table.full-width { width: 100%; }
th { background: #eee; }
th.rotate {  width: 50px; font-size: small; font-weight: bold; border-bottom: 1px solid #bbb;}
th.rotate span { margin-bottom: 15px; position: absolute; transform: rotate( -35deg );  white-space: nowrap; transform-origin: center left; padding: 3px; display: inline-block; margin-left: 5px; margin-top: -5px; background: #eee;}
td, th { padding: 5px 10px; text-align: left; }
td, tr { border-bottom: 1px solid #bbb; }

tr:nth-child(odd) { background: #eee; }
tr:hover { background: #ccc; }

pre { font-size: 16px; }
hr { border: none; border-bottom: 1px solid #000; margin: 20px 0;}

ul.bullet-none { list-style: none; }
li { margin-bottom: 5px; }


/*** Form elements ***/
input, button, select, textarea { padding: 8px 16px; display: inline-block; width: 320px; font-family: Verdana, sans-serif; font-size: 16px;
    border-radius: 5px; border: 1px solid #ccc; margin: 2px 0; font-weight: 500; }
select, button { background: #fff; }
button { width: initial; cursor: pointer; font-weight: bold; }
button:hover {  }
input[type="checkbox"] {  width: initial; }
/* input[type="checkbox"]:checked{ background-color: #0d6efd; border-color: #0d6efd;} */
input[type="radio"] {  width: initial; }
/* input[type="radio"]:checked{ background-color: #0d6efd; border-color: #0d6efd;} */


.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }

.nowrap { white-space: nowrap; }
.clear { clear: both; }
.inline { display: inline-block; }

.h-space, .space-after { margin-bottom: 50px; }

.info {  }
.notice {  }
.warning {  }
.error {  }

.link-icon { cursor: pointer;  color: #777; }
.link-icon:hover { color: #000; }


footer { margin-top: 200px; line-height: 25px; border-top: 1px solid #ddd; text-align: center; padding: 10px 0; }
footer a { }


.box { display: inline-block; width: 300px; border: 1px solid #ccc; min-height: 300px; vertical-align: top; padding: 20px; margin: 10px; }
.dashboard { text-align: center; }
.dashboard .box { width: 500px; background: #eee; min-height: 400px;}
/* Todo Accordion Modal Nav with Sub nav... */
/*** Components ***/
/*** Accordion ***/

.accordion { background-color: #fafafa; color: #444; border: 1px solid #aaa; text-align: left; font-size: 15px; transition: 0.4s;
    border-radius: 25px; margin: 10px; position: relative; }
.accordion-trigger { background: transparent; font-size: 17px; padding: 10px 40px 10px 20px; font-weight: bold; cursor: pointer; }
.accordion-trigger:before { content: '\f0d7'; position: absolute; right: 20px; top: 13px; font-family: "FontAwesome"; }
.accordion.active .accordion-trigger:before { content: '\f0d9'; }
.accordion.active, .accordion:hover { background-color: transparent; }
.accordion .panel { margin: 0px 20px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
.accordion .panel p { margin-bottom: 15px; }


/* NAV https://lightproject.at -> Einsatzgebite */
nav { padding: 40px 0; text-align: center; border-bottom: 1px solid #ddd; margin-bottom: 40px;}
nav a { display: inline-block; margin: 0 20px; }

nav span.sub { position: relative; cursor: pointer;  }
nav span.sub .sub-menu { display: none; position: absolute; z-index: 100000; background: #fff; left: -4px; padding: 18px 10px 5px 10px; }
nav span.sub:hover .sub-menu { display: block; }

/* Nav responsive Burger http://www.silverminers.net/*/

/* progress bar */
.progress { display: flex; border-radius: 5px; background-color: #e9ecef;}
.progress-bar { color: #fff; text-align: center; background-color: #007bff; transition: width .6s ease; border-radius: 5px;}

/* Modal */
.modal {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity .25s 0s, transform .25s; z-index: 9999998; }
.modal-container {position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; min-width: 540px; box-shadow: 0 0 50px #000; border-radius: 8px; }
.modal .close-button { position: absolute; top: 0px; right: 10px; cursor: pointer; padding: 5px; }
.modal .close-button:hover {color: #04aa6d}
.show-modal {opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity .25s 0s, transform .25s; }
.modal-container h2 { font-size: 20px; font-weight: bold; margin-top: 0;margin-bottom: 20px}
.modal hr { border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.modal button { border: 0; }
.modal-header { padding-top: 10px; }
.modal-content { text-align: left; padding: 10px 0; }
.modal-footer { padding-top: 10px; text-align: center; }


/* toggle button */
.switch { position: relative; display: inline-block; width: 60px; height: 34px;}
.switch input { opacity: 0; width: 0; height: 0;}
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;}
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}
input:checked + .slider { background-color: #007bff;}
input:focus + .slider { box-shadow: 0 0 1px #007bff;}
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);}
.slider.round { border-radius: 34px;}
.slider.round:before { border-radius: 50%;}


/* Custom
input, button, select, textarea { border-radius: initial; }
*/