:root {
  --height-topmenu-normal:45px;
}


* {box-sizing: border-box; padding: 0; margin: 0;}
body {font-family: monospace; font-size:9pt; padding: 0; margin: 0; }


/* general */
.link {color:inherit; text-decoration:none; cursor: pointer}
.link:not(.nodec):hover {text-decoration:underline;}
.pointer {cursor: pointer;}
.relative {position: relative;}
.sticky {position: sticky; top:0;}
.right {float: right;}
.left {float: left;}
.tcenter {text-align: center;}
.tright {text-align: right;}
.tleft {text-align: left;}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.border {border: 1px solid #ddd;}
.borderb {border-bottom: 1px solid #ddd;}
.blightgreen {background: #D2FFBC;}
.bgray {background: #F0F0F0;}
.bwhite {background: #FFF;}
.only-mobile {display: none;}
.dnone, .hidden {display: none;}
.unrollable, .unrollable-h {overflow:hidden; transition: 0.5s;}
.unrollable {max-height: 0;}
.unrollable-h {max-width: 0; display: inline-block;}
.nowrap {white-space: nowrap;}
.uppercase {text-transform: uppercase;}

.p0 {padding: 0 !important;}
.p3 {padding: 3px !important;}
.ph3 {padding-right: 3px; padding-left: 3px;}
.pv3 {padding-top: 3px; padding-bottom: 3px;}
.p5 {padding: 5px;}
.p10 {padding: 10px;}
.p20 {padding: 20px;}
.pl10 {padding-left: 10px;}
.pl20 {padding-left: 20px;}
.pl50 {padding-left: 50px;}

.m3 {margin:3px;}
.mr5 {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr20 {margin-right:20px;}
.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml20 {margin-left:20px;}
.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mh5 {margin-left:5px; margin-right:5px;}
.mh10 {margin-left:10px; margin-right:10px;}
.mv3 {margin-top: 3px; margin-bottom: 3px;}
.mv10 {margin-top:10px; margin-bottom:10px;}
.mv20 {margin-top:20px; margin-bottom:20px;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}

.w100 {width: 100% !important;}
.mw100 {max-width: 100%;}
.wauto {width: auto !important;}
.hauto {height: auto !important;}
.overauto {overflow: auto;}
.fsize100 {font-size: 100%;}

.green {color: #a3f0a2;}
.red {color: red;}
.lightred {color: #f2caca;}
.darkred {color:darkred;}

.valid {color:green;}
.invalid {color:red;}
.lightgray {opacity:0.3;}
.gray {text-decoration: none; opacity:0.6;}
.gray a {font-weight: bold; text-decoration: none;}
.gray a:hover {text-decoration: underline;}
.gray.link:hover {opacity:1;}
.mini {font-size: 80%;}
.white {color:#fff; text-decoration: none; opacity:0.6;}
.white.link:hover {opacity:1;}
.fh-200 {max-height: 200px; overflow-y: auto;}
.fh-100 {max-height: 100px; overflow-y: auto;}
.fw-100 {max-width: 100px;}
.fw-200 {max-width: 200px;}
.flex {display: flex;}
.flex-wrap {flex-wrap: wrap;}
.grid-container {display: grid;}
.grid-item {}
.fs120 {font-size: 120%;}
.fs150 {font-size: 150%;}
.fs200 {font-size: 200%;}
h1 {font-size: 150%; padding: 10px 0;}
h2 {font-size: 120%; padding: 0 0 10px 0;}
hr {border: none; border-top: 1px solid #ddd; padding:10px 0;}

#wrapper-all {}
#wrapper-top {}
#wrapper-central {position: relative;}
#wrapper-bottom {}
#div_all {min-height: calc(100vh - var(--height-topmenu-normal));}

.container {margin: 20px auto; padding:30px 40px; border:1px solid #d4d4d5; width: 80%; box-sizing: border-box;}
.box {padding:10px; border:1px solid #d4d4d5; box-sizing: border-box; width: 100%;}
.box-header, .box-footer {padding:10px; background: #f0f0f0; box-sizing: border-box; display: block !important; text-align:left; width: 100%; font-weight: bold; border-radius: 4px 4px 0 0; border-bottom:none;}
.box-header.darker {border: 1px solid #a8a3a3; background: #cecece;}
.box-footer {border-radius: 0 0 4px 4px; border-top:none; border-bottom: 1px solid #d4d4d5;}
.homepage.flex-item {flex-grow: 1; flex-basis: 0;}
@media screen and (max-width: 600px) {
  .only-mobile {display: block;}
  .nomobile {display: none !important;}
  .container {width:100%; padding: 10px 10px; border-left:none; border-right: none;}
  .mob-100.pl10, .mob-100.pl20 {padding-left: 0px; margin-top: 15px;}

  .homepage.flex {display:block;}
}


/* cols */
.col, .col-10, .col-20, .col-25, .col-30, .col-33, .col-40, .col-50, .col-60, .col-66, .col-70, .col-80, .col-90, .col-100 {display:inline-block; box-sizing:border-box; vertical-align:top;}
.col-0  {width: 0;}
.col-10 {width: 10%;}
.col-20 {width: 20%;}
.col-25 {width: 25%;}
.col-30 {width: 30%;}
.col-33 {width: 33%;}
.col-40 {width: 40%;}
.col-50 {width: 50%;}
.col-60 {width: 60%;}
.col-66 {width: 66%;}
.col-70 {width: 70%;}
.col-80 {width: 80%;}
.col-90 {width: 90%;}
.col-100 {width: 100%;}

@media screen and (max-width: 600px) {
  .mob-0  {width: 0;}
  .mob-10 {width: 10%;}
  .mob-20 {width: 20%;}
  .mob-30 {width: 30%;}
  .mob-33 {width: 33.33333%;}
  .mob-40 {width: 40%;}
  .mob-50 {width: 50%;}
  .mob-60 {width: 60%;}
  .mob-66 {width: 66.66666%;}
  .mob-70 {width: 70%;}
  .mob-80 {width: 80%;}
  .mob-100 {width: 100%;}
  .mob-100 {width:100%;}
  .mob-nofloat {float:initial;}
}


/* input */
.inp-line {padding:4px 0;}
.inp-line label {display: inline-block; line-height:2em;}
.inp-line input[type=checkbox] {margin-top: 3px; cursor: pointer;}
.inp-div {}
.inp-icon {box-sizing: initial; display: inline-block; background: #f0f0f0; border-radius: 3px 0 0 3px; padding: 3px 4px 2px 4px; height: 1.5em; max-width: 1em; vertical-align: top; border: 1px solid #d4d4d5; border-right: none;}
.inp {border: 1px solid #d4d4d5; height: 2.1em; padding: 2px 3px 3px 4px; vertical-align: top; width: calc(100% - (1em + 18px))}
.inp.large {height: 3em;}
textarea.inp {height: 200px;}
textarea.inp.small {height: 100px;}
.inp.small {width: 10em;}
.inp[type=number] {width: 10em;}
.inp[type=date] {width: 10em;}
.slugbox {max-width: initial; width:100%; text-align: right; box-sizing: border-box; padding: 4px 4px 19px 4px;}
select.inp {padding:0px 3px 0px 4px;}
.btn {border: 1px solid #d4d4d5; background: #f0f0f0; cursor: pointer; border-radius: 3px; padding: 3px 10px 2px 10px; height: 2.1em; display: inline-block; vertical-align: top;}
.btn.left-squared {border-radius: 0 3px 3px 0;}
.btn.large {height: 3em; padding: 0 25px;}
.btn:disabled {opacity: 0.7; cursor: initial;}
.btn:not([disabled]):not(.disabled):hover {filter: brightness(90%);}
.btn:not([disabled]):not(.disabled):active {filter: brightness(80%);}

.btn.red {background: #db3a3a; border: 1px solid #db3a3a; color:#fff;}
.btn.green {background: green; border: 1px solid green; color: #fff;}
.btn.green:disabled {background:#80c880; border: 1px solid #80c880; }
.btn.blue {background: blue; border: 1px solid blue; color: #fff;}
.btn.link {padding: 0; border: 0; background: transparent; height: auto;}
a.btn {text-decoration: none; color: inherit;}
a.btn.large {text-transform: initial; padding-top: 10px;}

.sel {border: 1px solid #d4d4d5; background: #fff; height: 2em; vertical-align: top;}
.noselect {background: transparent; border:none; border-bottom:1px solid #ddd; -webkit-appearance: none; cursor: pointer;}

.searchbar-container {position: relative; width: 100%;}
.inp.search, .btn.search {width: 100%; height: 2em; border-radius: 0; padding-right: calc(3em + 5px);}
.btn.search {width: 3em; position: absolute; right:0; padding: 0;}

.pwd-eye {position: absolute; right: 5px; top: 50%; transform: translateY(-50%);}
.searchbar-menu {height: 1.2em; display: block;}

/* slick */
.slickslide.fixed_height img {height: 100%;}


/* warning */
.done, .warning {padding: 15px 15px 15px 35px; transition: all .1s ease-out; transform-origin: top; transform: translate(0, -10px); margin: 10px 0 0 0;}
.done { background: #a3f0a2; color: #007d4f; font-weight: bold;}
.warning { background: #f2caca; color: #430808;}
.warning.soft {background: #e7e38f;}

/* menu - generic*/
.menulogo {position:absolute; top:0; left:0;}
.menulogo img {width: auto;}
.menu {margin: 0; list-style: none; background: inherit;}
.menu-item {background:inherit; display: inline-block; margin: 0px; box-sizing: border-box; position: relative;}
.menu > .menu-item {padding: 16px 25px; background: inherit;}
.menu-item > .menu-dropdown-content {position: absolute; padding: 0; right: 0; margin: 0px 0 0 0;}
.menu-item:hover > .menu-dropdown-content {display: block;}
.menu-dropdown-content .menu-item .menu-dropdown-content {top: 0; right: 100%;}
.menu-dropdown-content {transition:0.5s ease-out; background: inherit; display: none; position: absolute; min-width: 160px; z-index: 999; top: calc(100% - 3px); box-shadow: 0px 14px 16px 0px rgba(0,0,0,0.2);}
.menu-dropdown-content > .menu-item {padding: 16px 25px; display: block; border-bottom: 1px solid #ddd;}
.menu-dropdown-content > .menu-item:last-of-type {border-bottom:none;}

.menulink {color: #000; text-decoration:none; font-weight:bold; text-transform: uppercase; cursor:pointer; padding: 0px 0px;}
.menulink:hover {text-decoration:underline;}
.menulink.responsive-icon {font-size:200%; float:right; display: none; margin-right: 30px;}

/* mobile menu */
.mobilemenu {display: none;}
.mobilemenu-logo {position: relative;}

/* reponsive icon menu */
.responsive-icon {margin: 6px 2px 0 2px; width: 40px; padding:5px; padding: 6px 20px 5px 20px;}
.responsive-icon:after, .responsive-icon:before, .responsive-icon div { width:1em; background: #333; border-radius: 3px; content: ''; display: block; height: 3px; margin: 4px 0; transition: all .2s ease-in-out;}
.responsive-icon.responsive:before {transform: translateY(7px) rotate(135deg);}
.responsive-icon.responsive:after {transform: translateY(-7px) rotate(-135deg)}
.responsive-icon.responsive div {transform: scale(0);}


/* menu - topmenu*/
.topmenu {z-index: 300; max-width:100vw; position:sticky; top:0; height: var(--height-topmenu-normal); text-align:right; box-shadow: 0 -1px 5px #333; background: #fff;}
.logo-title {display: inline;}


/* menu - sidemenu */
.sidemenu {background:#fff; z-index: 800; width: 250px; height:100%; position: sticky; top:50px; float: left; overflow: visible; box-shadow: none; border-right: 1px solid #ddd; }
.sidemenu .menu-item {display: block;}
.sidemenu .menu-dropdown-content {left:100%; top:0;  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);}
.sidemenu .menulogo {position:relative; top:0; left:0;}
.sidemenu .responsive {position:relative; top:0; left:0;}
.sidemenu-mode #div_all {margin-left: 300px;}

/* menu - footer */
.footer {max-width: 100vw; background: #333; color:#f0f0f0; min-height: 10vh; box-sizing: border-box; padding: 30px; position: relative; z-index:99;}
.footer .menu-container {background: #333;}
.footer * {color: #f0f0f0; text-decoration:none; font-weight:bold; text-transform: initial;}
.footer .menulink { margin: 10px 30px; position: relative;}
.footer .menulink:hover {text-decoration:underline;}
.footer .menu li {display: block; margin: 0px 0px; padding:20px 0;}
.footer .menu li:hover > .menu-dropdown-content {display: block; width: max-content; top: initial; bottom: 100%; left: 0;}
.footer .menu-dropdown-content li:hover > .menu-dropdown-content {bottom: 0; left: 100%;}
.footer .menu li .search {background: #292929; width: auto;}
.copyright_string {background: #333; color: #f0f0f0; text-align: center; font-size: 90%;}
.copyright_string a {color: #f0f0f0;}

/* unroll*/
.menu-container.unroll {position:relative;}
.sidemenu.unroll {position: fixed; top: 50px; left: 0;}
.sidemenu.unroll .menu {display: block; overflow-y: auto; height: 100%; max-height: calc(100vh - 40px);}
.menu-container.unroll .menu-dropdown-content  {display: block; position:relative; left:0; top:100%; transition:0.5s; max-height: 0; overflow: hidden;}
.menu-container.unroll .menu-item .menu-dropdown-content {position:relative;}

/* both */
.page-content ul, .article-content ul {margin: 5px 0 5px 60px;}
.page-content, .article-content {text-align: justify;}

/* articles */
.article-title {font-size: 150%; padding: 10px 0;}

/* pages */
.page-title {font-size: 150%; padding: 10px 0;}



@media screen and (max-width: 600px) {
  /* all menus */
  .menu-item, .menu-dropdown-content {box-shadow: none;}
  .menu-dropdown-content .menu-item .menu-dropdown-content {right:0;}
  .menu-dropdown-content > .menu-item {border: none;}
  .menu-dropdown-content .menulink {padding:16px 40px;}
  .menu-dropdown-content .menulink:last-of-type {border-bottom: none;}
  .responsive-icon {display: block !important;}
  
  .searchbar-menu {height: 2.2em;}
  /* menu - responsive */
  .menu-container {width: 100%;}
  .menu {color:#333; transition: 0.5s; min-height:0px; height: 0; overflow: hidden; width:100vw;  position: relative; top: -1px; margin: 0; text-align: left; display: block; box-shadow: 0px 25px 20px #333;}
  .menu > li {margin: 0; font-size: 8pt; width: 100%; border-top: 1px solid #ddd; float: none; display: block; text-align: left; padding: 16px 20px;}
  .menu > li:last-of-type {border-bottom: 1px solid #ddd;}
  .menu .menu-item .menu-dropdown-content {display:block; width: 100%; margin-top:15px; position: relative; box-shadow: none;}
  .menu.responsive {height:100vh; overflow-y:scroll; top:3px;}
  .menu-container:not(.mobilemenu) {display: none;}
  .mobilemenu {display: block;}

  /* menu - sidemenu */
  ._sidemenu {display: none !important;}
  .sidemenu-mode #div_all {margin-left: 0px;}
  /* menu - footer */
  .footer .menu-dropdown-content {display: block; position:relative;}
  .footer .menu-container {display: block;}
  .footer .menu {color:#fff; height: initial; width: auto;}
  .footer .menu li {padding: 10px 0;}

}


/* breadcrumbs */
.breadcrumbs {text-align: right;}
.breadcrumbs ul li {list-style: none; display: inline-block;}
.breadcrumbs ul li:after {content: '/'; color: #333; margin: 0 10px;}
.breadcrumbs ul li:last-child:after {content: '';}

/* tabs */
.tab {overflow: visible; background: inherit; margin-bottom:15px;}
.tab:after {content: ''; display:block; border-bottom:1px solid #ddd; width: 100%;}
.tab button {background-color: #f0f0f0; float: none; border: 1px solid #ddd; margin-bottom:-1px; outline: none; cursor: pointer; padding: 10px 12px; transition: 0.3s; color: #000; }
.tab button:not(.dis):hover {background-color: #ccc; color: #000;}
.tab button.activetab {background-color: #fff; color: #000; border-bottom:1px solid #fff}
.tabcontent {padding: 6px 12px; animation: fadeEffect 0.4s;}
.tabcontent:not(.active) {display: none;} 
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}


@media screen and (max-width: 600px) {
 .tab_FALSE {width: calc(100% + 20px); margin: -10px;}
}

/* pagination */
.pagination {margin-top: 5px;}

/* table */
.table {border-collapse: collapse; border: 1px solid #ccc; font-size: 100%;}
.table thead, .tablethead {padding:10px; background: #212529; font-weight: bold; border-radius: 4px 4px 0 0; border-bottom:none; color:#c2c7d0;}
.table tbody tr:nth-of-type(2n+2) {background: #f2f2f2;}
.table tr {border-bottom: 1px solid #ccc;}
.table tr td {padding: 10px;}
.table.actions tr > td:last-child {white-space: nowrap; text-align: right;}


/* homepage */
.welcome-homepage-image {text-align: center; position: relative; max-height: 100vh;}
.welcome-titles {position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-weight: bold; text-shadow: 0 0 6px #333;}
.welcome-title {font-size: 30pt;}
.welcome-subtitle {font-size: 20pt;}

/* blog */
.article-subcontainer {margin:10px 0 100px 0; width:70%;}
.article-header-img {max-width: 100%; text-align: center; transition: 0.2s ease-out;}
.article-header-img img {max-width: 100%; max-height: 100vh;}
.article-content {font-size: 12pt;}
.article-content.single {margin:25px 0 0 0; line-height: 1.5em;}
.catbox-img img {max-width: 100%;}
.loadmore-btn-container {margin: 20px 0;}
/* flexbox */
.container-all-articles-flexbox {display: flex; flex-wrap: wrap; justify-content: center;}
.container-all-articles-flexbox .article-subcontainer {width: 33%; padding:20px; margin:10px 0;}
.container-all-articles-flexbox .article-subcontainer .article-header-img {cursor: pointer;}
.container-all-articles-flexbox .article-subcontainer .article-header-img:hover {opacity:0.9;}
@media screen and (max-width: 600px) {
  .article-subcontainer {width:100%; margin:10px 0;}
  .container-all-articles-flexbox .article-subcontainer {width: 100%;}
}

/*
.dropbtn { border: none; background: transparent;}
.dropdown {position: relative; padding: 16px 20px;}
.dropdown-content {display: none; position: absolute; min-width: 160px; z-index: 999; top: calc(100% - 3px); box-shadow: 0px 14px 16px 0px rgba(0,0,0,0.2);}
.dropdown-content .menulink {padding: 12px 25px; text-decoration: none; display: block; border-bottom: 1px solid #ddd;}
*/

/* comments */
.comment-box {border:1px solid #ddd; margin:5px 0; padding:15px;}
.comment-box.approval {background: #ffffc6; opacity: 0.6;}
.comment-approval {font-size: 80%; opacity:0.6; margin-bottom: 15px; font-weight: bold; color: red;}
.comment-author {opacity: 0.7; font-weight: bold; display: inline-block;}
.comment-datetime {opacity: 0.6; float: right}
.comment-text {border-top:1px solid #ddd; margin-top: 5px; padding-top: 15px;}


/* modals */
.gtmodal {display: none; position: fixed; z-index: 9999; padding: 80px 0; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5);}
.gtmodal-content {background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%;}
.gtmodal .close {color: #aaaaaa; float: right; font-size: 28px; font-weight: bold;}
.gtmodal .close:hover, .gtmodal .close:focus {color: #000; text-decoration: none; cursor: pointer;}

@media screen and (max-width: 600px) {
  .gtmodal {padding:0}
  .gtmodal-content {width: 100%; min-height: 100%;}
}


/* cols */
/* cols */