/* -----------------------------------------------------------------------------------------
   $Id: stylesheet.css 14528 2022-06-14 10:21:59Z GTB $

   modified eCommerce Shopsoftware
   http://www.modified-shop.org

   Copyright (c) 2009 - 2013 [www.modified-shop.org]
   -----------------------------------------------------------------------------------------
   Released under the GNU General Public License
   ---------------------------------------------------------------------------------------*/

/*
  font-family: 'Poppins', sans-serif;
  font-weights: 300,400,500,600,700,800

  Color 1 - magenta
  color: #b0377e;

  Color 2 - magenta dunkel
  color: #7c2759;

  Color 3 - magenta hell
  color: #eee5ea;

  Color 4 - rot
  color: #e74c3c;
*/


@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(''),
       url('css/fonts/poppins-v20-latin-300.woff2') format('woff2'), 
       url('css/fonts/poppins-v20-latin-300.woff') format('woff'); 
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('css/fonts/poppins-v20-latin-regular.woff2') format('woff2'), 
       url('css/fonts/poppins-v20-latin-regular.woff') format('woff'); 
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(''),
       url('css/fonts/poppins-v20-latin-500.woff2') format('woff2'), 
       url('css/fonts/poppins-v20-latin-500.woff') format('woff'); 
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local(''),
       url('css/fonts/poppins-v20-latin-600.woff2') format('woff2'), 
       url('css/fonts/poppins-v20-latin-600.woff') format('woff'); 
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(''),
       url('css/fonts/poppins-v20-latin-700.woff2') format('woff2'), 
       url('css/fonts/poppins-v20-latin-700.woff') format('woff'); 
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local(''),
       url('css/fonts/poppins-v20-latin-800.woff2') format('woff2'), 
       url('css/fonts/poppins-v20-latin-800.woff') format('woff'); 
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}


body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size:14px;
  background-color:#ddd;
  color:#555;
  line-height:22px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust:     100%;
}
.clearfix, .clear, .clearer {
  line-height:0px;
  height:0px;
  clear:both;
}

.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }

p {
  margin: 12px 0px;
}
p.main {
  text-align: left;
}

a, a:link, a:visited, a:active, a:hover {
  text-decoration:none;
  outline:none;
  cursor:pointer;
}
a:link {
  color:#6d2551;
  outline:none;
}
a:visited {
  color:#6d2551;
  outline:none;
}
a:hover, a:active {
  color:#6d2551;
  outline:none;
}
a:hover {
  color:#555;
  text-decoration:underline;
  outline:none;
}
a img {
  border:none;
  outline:none;
}

h2 {
  color:#555;
  font-size:14px;
  line-height:20px;
  font-weight:800;
  text-transform:uppercase;
  border-bottom: 1px solid #e1e1e1;
  padding: 0 0 5px 0;
  margin: 0 0 15px 0;
}



.wrap_installer {
  background:#fff;
  width:100%;
  max-width:840px;
  border: 0px solid #f5f5f5;
  padding: 0px 0px;
  margin: 20px auto;
  min-height:300px;
}
.wrap_installer_inner {

}

.installer_logo {
  position:relative;
  padding:20px 20px 20px 20px;
  text-align:center;
  background:#eee;
  display:flex;
  justify-content:center;
  align-items:center;
}
.installer_logo > img {
  display:inline-block;
  width:150px;
  height:42px;
}

.installer_languages {
  position:absolute;
  bottom:20px;
  right:20px;
  display:flex;
}
.installer_languages > a {
  display:flex;
  justify-content:center;
  align-items:center;
  width:30px;
  height: 30px;
  margin: 0 0 0 10px;
}
.installer_languages img {
  width:100%;
  height:auto;
  vertical-align:top;
}

.installer_languages img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);  
  opacity:0.7;
}
.installer_languages a:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);  
  opacity:1;
}

html[lang|="de"] .installer_languages img[alt~="flag_de"] { 
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  opacity:1;
}
html[lang|="en"] .installer_languages img[alt~="flag_en"] { 
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  opacity:1;
}

.installer_content {
  padding: 20px 20px 20px 20px;
}



.cssButtonRow {
  text-align:center;
  margin: 40px -20px -20px -20px;
  background:#eee;
  padding: 20px 20px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  flex-direction:column-reverse;
}
@media only screen and (min-width: 420px) {
  .cssButtonRow { flex-direction:row; }
}





/* start for CSS Buttons */
.cssButton {
  position:relative;
  display:inline-block;
}

.cssButton input[type="submit"],
.cssButton button,
.cssButton a {
  position:relative;
  display:inline-block;
  font-size:12px;
  line-height:20px;
  font-weight:800;
  text-transform:uppercase;
  text-decoration:none;
	border-radius:4px;
  cursor:pointer;
  margin: 5px 5px;   
  padding: 8px 10px;
  min-width:180px;
  text-align:center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;  
}
.cssButton input[type="submit"]:hover,
.cssButton button:hover,
.cssButton a:hover {
  opacity:0.8;
  text-decoration:none !important;
}

/* Black Buttons */
.cssColor_1 input[type="submit"],
.cssColor_1 button,
.cssColor_1 a {
	border:1px solid #333;
	background-color:#333;
	color:#fff;
}
/* Grey Buttons */
.cssColor_2 input[type="submit"],
.cssColor_2 button,
.cssColor_2 a {
	border:1px solid #999;
	background-color:#999;
	color:#fff;
}
/* Green Buttons */
.cssColor_3 input[type="submit"],
.cssColor_3 button,
.cssColor_3 a {
	border:1px solid #80b31b;
	background-color:#80b31b;
	color:#ffffff;
}
/* Blue Buttons */
.cssColor_4 input[type="submit"],
.cssColor_4 button,
.cssColor_4 a {
	border:1px solid #2d98da;
	background-color:#2d98da;
	color:#fff;
}
/* Red Buttons */
.cssColor_5 input[type="submit"],
.cssColor_5 button,
.cssColor_5 a {
	border:1px solid #e75e4a;
	background-color:#e75e4a;
	color:#fff;
}
/* Yellow Buttons */
.cssColor_6 input[type="submit"],
.cssColor_6 button,
.cssColor_6 a {
	border:1px solid #f2a000;
	background-color:#f2a000;
	color:#fff;
}
/* end for CSS Buttons */


/* START messages */

.errormessage, .successmessage, .infomessage, .warningmessage {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  padding: 8px 10px 8px 65px;
  border-radius:4px;
  position:relative;
  font-size:13px;
  line-height:19px;
  font-weight:500;
  min-height:56px;
  margin: 0 0 20px 0;
}
.errormessage:after, .successmessage:after, .infomessage:after, .warningmessage:after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  width:44px;
  height:44px;
  border-radius:4px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:20px;
  position:absolute;
  left:6px;
  top:6px;
}
.errormessage .inline, .successmessage .inline, .infomessage .inline, .warningmessage .inline {

}
.errormessage p, .successmessage p, .infomessage p, .warningmessage p {
  text-align:left;
  margin: 0px 0px;
  padding: 0px 0px;
}
.errormessage a, .successmessage a, .infomessage a, .warningmessage a {
  text-decoration:none;
}
.errormessage a:hover, .successmessage a:hover, .infomessage a:hover, .warningmessage a:hover {
  opacity:0.8;
  text-decoration:none;
}

.errormessage {
  background: rgba(231,94,74,0.2); 
  border: 1px solid rgba(231,94,74,0.4);
  color: #e75e4a;
}
.errormessage:after {
  content: '\f071';
  font-weight: 900;
  background:rgba(255,255,255,0.5);
  color: #e75e4a;
}
.errormessage a {
  color: #e75e4a;
  border-bottom: 1px solid #e75e4a;
}

.successmessage {
  background: rgba(128,179,27,0.2); 
  border: 1px solid rgba(128,179,27,0.4);
  color: #80b31b;
}
.successmessage:after {
  content: '\f058';
  font-weight: 900;
  background:rgba(255,255,255,0.5);
  color: #80b31b;
}
.successmessage a {
  color: #80b31b;
  border-bottom: 1px solid #80b31b;
}

.infomessage {
  background: rgba(45,152,218,0.2); 
  border: 1px solid rgba(45,152,218,0.4);
  color: #2d98da;
}
.infomessage:after {
  content: '\f05a';
  font-weight: 900;
  background:rgba(255,255,255,0.5);
  color: #2d98da;
}
.infomessage a {
  color: #2d98da;
  border-bottom: 1px solid #2d98da;
}

.warningmessage {
  background: rgba(255,187,55,0.2); 
  border: 1px solid rgba(255,187,55,0.4);
  color: #f2a000;
}
.warningmessage:after {
  content: '\f071';
  font-weight: 900;
  background:rgba(255,255,255,0.5);
  color: #ffbb37;
}
.warningmessage a {
  color: #f2a000;
  border-bottom: 1px solid #f2a000;
}



.processingmessage {
  border: 1px solid rgba(45,152,218,0.4);
  padding:20px 10px;
  font-size:12px;
  line-height:18px;
  color: #2d98da;
  background: rgba(45,152,218,0.2);
  margin-bottom:15px;
  text-align:center;
  border-radius:4px;
  font-weight:400;
}
.processingmessage p {
  margin: 0px 0px;
}
.processing_bar {
  vertical-align:top;
  text-align:center;
  padding: 0 0 10px 0;
  opacity:0.4;
}
#process_info_wait {
  text-transform:uppercase;
  font-weight:700;
  padding: 0 0 10px 0;
  font-size:14px;
  line-height:20px;
  text-align:center;
}
.process_wrapper {
  margin: 0px auto;
  width: 80%;
  height: 16px;
  display:block;
  text-align: left;
  border: 0px solid #fff;
}
.process_inner_wrapper {
  width: 100%;
  height: 16px;
  background: rgba(45,152,218,0.4);
  display:block;
  text-align: left;
  float:left;
  border-radius:4px;
}
#backup_process {
  width: 0;
  height: 16px;
  border-radius:4px;
  background: rgba(45,152,218,1.0);
}
#backup_precents{
  display:block;
  text-align:center;
  font-weight: 700;
  font-size:12px;
  line-height:20px;
  margin: 5px 0 10px 0;
}

/* END messages */



ul.modulelist {
  list-style-type:none;
  margin: -15px 0 0 0;
  padding: 0px;
}
ul.modulelist.topmargin {
  margin: 50px 0 0 0;
  border-top: 1px solid #e1e1e1;
}

ul.modulelist li {
  position:relative;
  border-bottom: 1px solid #e1e1e1;
  font-size:14px;
  line-height:20px;
  background:#fff;
  min-height:41px;
}
ul.modulelist li a {
  text-decoration:none;
  color:#333;
}
ul.modulelist li a:hover {
  text-decoration:none !important;
  color:#333;
}

ul.modulelist li .ml_row {
  position:relative;
  display:flex;
}
ul.modulelist li .ml_row .ml_counter {
  position:relative;
  width:30px;
  text-align:center;
  font-weight:800;
  padding: 10px 0px;
}
ul.modulelist li .ml_row .ml_title {
  flex:1;
  padding: 10px 20px 10px 5px;
}

ul.modulelist li .ml_row .ml_action {
  text-transform:uppercase;
  color: #333;
  font-size:12px;
  line-height:20px;
  text-decoration:none;
  font-weight:700;
  padding: 10px 5px;
  text-align:right;
  white-space:nowrap;
}

/*
ul.modulelist li .ml_row .ml_action .inner {
  text-transform:uppercase;
  font-size:12px;
  line-height:20px;
  text-decoration:none;
  font-weight:700;
  padding: 3px 3px 3px 3px;
  text-align:right;
  white-space:nowrap;
  border-radius: 4px;
  border: 1px solid #999;
  color: #333;
  min-width:135px;
  display:inline-block;
}
*/

ul.modulelist li .ml_row .ml_action .fas {
  width: 24px;
  text-align: center;
  padding: 5px 0px;
  border-radius: 4px;
  background: #b0377e;
  color: #fff;
  margin: -1px 0 -1px 6px;
  line-height: 12px;
}

                      
ul.modulelist li .ml_row .ml_action .fas.fa-exclamation-triangle {
  background: #e75e4a !important;
}
ul.modulelist li .ml_row .ml_action .fas.fa-check {
  background: #80b31b !important;
}


ul.modulelist li:nth-child(odd) {
  background:#fafafa;
}  
ul.modulelist li:nth-child(even) {
  background:#fff;
}
ul.modulelist li:hover {
  background: #f2f2f2;
}
ul.modulelist li.installed {

}

vul.modulelist li label {
  display:block;
  width:100%;
}


ul.modulelist li.updated .ml_row .ml_action .fas {
    background: #80b31b;
    color: #fff;
}
ul.modulelist li.updated .ml_row .ml_counter:after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f00c';
  color:#80b31b;
  text-align:center;
  position:absolute;
  left:0px;
  right:0px;
  top:10px;
}
ul.modulelist li.updated .ml_row .ml_counter {
  color:transparent;
}

ul.modulelist li .ml_column {
  position:relative;
  display:flex;
} 
ul.modulelist li .ml_column > label {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  padding: 10px 5px 10px 35px;
  width:100%;
}
ul.modulelist li .ml_column input[type="checkbox"] ~ label:before {
  top: 11px;
  left: 6px;
}  
ul.modulelist li .ml_column input[type="checkbox"] ~ label:after {
  top: 11px;
  left: 6px;
}
ul.modulelist li .ml_column input[type="radio"] ~ label:before {
  top: 11px;
  left: 6px;
}  
ul.modulelist li .ml_column input[type="radio"] ~ label:after {
  top: 11px;
  left: 6px;
}


@media only screen and (min-width: 690px) {
  ul.modulelist li .ml_column > label { flex-direction:row; }
}

.mlc_1 { flex:initial; width:100%;  }
.mlc_2 { width:100%; font-size:11px; text-align:left; padding: 0 0 0 0; }
.mlc_3 { width:100%; font-size:11px; text-align:left; padding: 0 0 0 0; }
.mlc_mobile { display:inline-block; padding: 0 5px 0 0; font-weight:700; }

@media only screen and (min-width: 690px) {
  .mlc_1 { flex:1;  }
  .mlc_2 { width:120px; text-align:right; padding: 0 0 0 20px; }
  .mlc_3 { width:140px; text-align:right; padding: 0 0 0 20px; }
  .mlc_mobile { display:none; }
}

.ml_column.head {
  display:flex;
}
.ml_column.head > span{
  padding: 0px 5px;
}
.ml_column.head > span:first-child{
  padding: 0px 0px;
}

.ml_column.head .mlc_2 { display:none; }
.ml_column.head .mlc_3 { display:none; }

@media only screen and (min-width: 690px) {
  .ml_column.head .mlc_2 { display:initial; }
  .ml_column.head .mlc_3 { display:initial; }
}













/* start input & textrea */
input {
  font-family: 'Poppins', sans-serif;
  font-size:14px;
  line-height:20px;
}
textarea {
  font-family: "Courier New", Courier, monospace;
  font-size:14px;
  line-height:20px;
  background-color:#fafafa;
  border-color: #dddddd;
  color: #666;
  border-style: solid;
  border-width: 1px;
  vertical-align: middle;
	padding: 8px 8px;
	border-radius: 4px;
  width:100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;  
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;  
}
input[type=text], input[type=password], input[type=email], input[type=tel] {
  background-color:#fafafa;
  border-color: #dddddd;
  color: #666;
  border-style: solid;
  border-width: 1px;
  vertical-align: middle;
	padding: 8px 8px 8px 8px;
	border-radius: 4px;
  width:100%;
  height:38px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;  
}

input[type=text]:hover, input[type=password]:hover, input[type=email]:hover, input[type=tel]:hover, textarea:hover {
    background-color:#ffffff;
    border-color: #dddddd;
    color: #666666;
}    
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus {
    background-color:#ffffff;
    border-color: #659EC9;
    color: #333333;
    outline: 0 none;
}

.sql_textarea textarea {
  height:180px;
  line-height:18px;
}

input[type="checkbox"] {
  position: absolute !important;
  visibility:hidden;
  opacity: 0;
}
input[type="checkbox"] ~ label {
  padding-left: 30px;
  position: relative;
  cursor: pointer;
  display: block;
  box-sizing: border-box;
  margin: 0 0 0px 0;
}
input[type="checkbox"] ~ label:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f0c8";
  font-weight:400;
  font-size: 18px;
  line-height:18px;
  position: absolute;
  top: 1px;
  left: 3px;
  color:#ccc;
  transition: background .15s;
}
input[type="checkbox"]:disabled ~ label {
  color: #ccc;
}
input[type="checkbox"]:disabled ~ label,
input[type="checkbox"]:disabled ~ label:before,
input[type="checkbox"]:disabled ~ label:after {
  cursor: not-allowed;
}
input[type="checkbox"]:disabled,
input[type="checkbox"]:disabled ~ label:before,
input[type="checkbox"]:disabled:checked ~ label:before {
  opacity:0.5;
}
input[type="checkbox"] ~ label:after {
  font-family: 'Font Awesome 5 Free';
  content: '\f14a';
  font-weight:900;
  font-size: 18px;
  line-height:18px;
  position: absolute;
  top: 1px;
  left: 3px;
  color:#80b31b;
  transition: transform .15s;
  transform: scale(0) rotate(90deg);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input[type="checkbox"]:checked ~ label:after {
  transform: scale(1) rotate(0deg);
}
input[type="checkbox"]:checked ~ label {
  color:#80b31b;
}

input[type="radio"] {
  position: absolute;
  visibility:hidden;
  opacity: 0;
}
input[type="radio"] ~ label {
  padding-left: 30px;
  position: relative;
  cursor: pointer;
  display: block;
  box-sizing: border-box;
  margin: 0 0 0px 0;
}
input[type="radio"] ~ label:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f111";
  font-weight:400;
  font-size: 18px;
  line-height:18px;
  position: absolute;
  top: 1px;
  left: 3px;
  color:#ccc;
  transition: background .15s; 
}  
input[type="radio"]:disabled ~ label {
  color: #ccc;
}
input[type="radio"]:disabled ~ label,
input[type="radio"]:disabled ~ label:before,
input[type="radio"]:disabled ~ label:after {
  cursor: not-allowed;
}
input[type="radio"]:disabled,
input[type="radio"]:disabled ~ label:before,
input[type="radio"]:disabled:checked ~ label:before {
  opacity:0.5;
}
input[type="radio"] ~ label:after {
  font-family: 'Font Awesome 5 Free';
  content: '\f192';
  font-weight:900;
  font-size: 18px;
  line-height:18px;
  position: absolute;
  top: 1px;
  left: 3px;
  color:#80b31b;
  transition: transform .15s;
  transform: scale(0) rotate(90deg);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input[type="radio"]:checked ~ label:after {
  transform: scale(1) rotate(0deg);
}
input[type="radio"]:checked ~ label {
  color:#80b31b;
}
/* end input & textrea */


/* start select dropdown */
select {
  font-family: 'Poppins', sans-serif;
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  height:38px;
  color: #666;
  padding: 8px 8px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fafafa;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAeCAYAAACBkybCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs190NwiAQAGBwA1dwBVZwhfrAAHYFR9AR6AAsUUdgBWdwBL1LMCEN5acvd+pdQtrQQu6DlIIOIbwUhDFGqy+PnfqhEIxgBCMYwQgGw1p7hLLvbHOAYlhhICEHlxnKo5Zc0uaM70MJ8Z4eEyGfZHBm5hooJu+SKgd1A4eZWY5qEZSBrPVDgrlk6rKgAgTjRo7x3mMSUw1UgYzQzz33QFMcARbfThrPOOrXAmRitTRDQmNhhjZBSH+aBdAmCPkOoBHUBGGxnamAmiFs9mYroC4Iq41mBOF/CJfdUy+EbGmWI4BgBCMYwfwN5i3AABmbYhLK6zqHAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-position: right 12px top 50%, 0 0;
  background-size: 26px auto, 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
select::-ms-expand {
  display: none;
}
select:hover {
  border-color: #999;
}
select:focus {
  border-color: #aaa;
  color: #222; 
  outline: none;
}
select option {
  margin:10px 0 0 0;
  font-weight:normal;
}
select:hover {
  background-color:#ffffff;
  border-color: #dddddd;
  color: #666666;
}    
select:focus {
  background-color:#ffffff;
  border-color: #659EC9;
  color: #333333;
  outline: 0 none;
}
/* end select dropdown */



.field_row {
  margin: 0px -20px 0px -20px;
  display:flex;
  flex-wrap:wrap;
}
.field_item {
  width:100%;
  padding: 5px 20px 5px 20px;
  position:relative;
}

@media only screen and (min-width: 690px) {
  .field_item { width:50%; }
}



.field_item:focus-within .field_heading {
  color:#659EC9 !important
}
.field_item .errormessage, 
.field_item .successmessage, 
.field_item .infomessage, 
.field_item .warningmessage {
  margin: 0 0 10px 0;
}


.field_heading {
  font-size:12px;
  line-height:16px;
  font-weight:700;
  margin: 0 0 4px 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.field_directory_suggest {
  font-family: "Courier New", Courier, monospace;
  margin: 0 0 0 0;
  font-size:13px;
  line-height:13px;
  white-space:nowrap;
  border-bottom:1px solid #999;
  margin-bottom:8px;
  display:inline-block;
  cursor:pointer;
}

.field_eye {
  position:absolute;
  bottom: 5px;
  right:20px;
  width:40px;
  height:38px;
  line-height:40px;
  text-align:center;
  cursor:pointer;
  display:block;
  font-size:14px;
}
.field_eye:after {
  content:'';
  display:block;
  border-right:1px solid #ccc;
  width:1px;
  height:16px;
  position:absolute;
  left:0px;
  bottom:0px;
  top:0px;
  margin: auto;
}
.fa-eye {
  color:#ccc;
}
.fa-eye-slash {
  color:#555;
}








/* old */



.info_require_box {
  margin: 0 0 20px 0;
}
.info_require_list {
  margin: -15px 0 0 0;
  padding: 0px;
}
.info_require_line {
  position:relative;
  display:flex;
  flex-wrap:wrap;
  padding: 10px 5px;
  border-bottom: 1px solid #e1e1e1;
  font-size:12px;
  line-height:18px;
  background:#fff;
  font-weight:400;
}
.info_require_line.head {
  padding: 8px 5px;
  font-size:12px;
  line-height:18px;
  font-weight:700;
}
.icol_1 { flex:1; font-weight:600; padding-right:10px;}
.icol_2 { width:70px;}
.icol_3 { width:50px; }
.icol_4 { width:50px;}

@media only screen and (min-width: 690px) {
  .icol_1 { width:35%;}
  .icol_2 { width:25%;}
  .icol_3 { width:20%;}
  .icol_4 { width:20%;}
}


.info_require_heading {
  font-size:11px;
  font-weight:700;
  color:#555;
  border-bottom: 1px solid #e1e1e1;
}
.stat_ok {
  background: rgba(128,179,27,0.1); 
  color: #80b31b;
}
.stat_fail {
  background: rgba(231,94,74,0.1); 
  color: #e75e4a;
}

.stat_ok .icol_1,
.stat_fail .icol_1 { 
  position:relative;
  padding-left:30px;
} 
.stat_ok .icol_1:before,
.stat_fail .icol_1:before {
  width:30px;
  text-align:center;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position:absolute;
  left:-5px;
  top:0px;
}
.stat_ok .icol_1:before {
  content: '\f00c';
}
.stat_fail .icol_1:before {
  content: '\f071';
}







.info_red_box {
  margin: 30px 0px;
  color: #e75e4a;
}
.info_red_box h2 {
  margin-bottom:10px;
}

.info_ftp_box {
  margin: 30px 0px;
}
.info_ftp_box h2 {
  margin-bottom:10px;
}

.info_ftp_box .cssButton {
  width:100%;
}
.info_ftp_box .cssButton input[type="submit"], 
.info_ftp_box .cssButton button, 
.info_ftp_box .cssButton a {
  display: block;
  margin: 0px 0px;
  width: 100%;
}

.copyright {
  text-align:center;
  margin: -10px auto 5px auto;
  width:100%;
  max-width:500px
  text-align:center;
  font-size:11px;
  line-height:15px;
}



.start_row {
  display:flex;
  flex-direction:column;
}
@media only screen and (min-width: 690px) {
  .start_row { flex-direction:row; }
}


.start_item {
  flex:1;
  padding: 20px;
}
.start_item > a{
  display:flex;
  height:100%;
  color:#fff;
  text-decoration:none;
  opacity:0.8;
}
.start_item > a:hover{
  opacity:1.0;
}


.start_item_inner {
  text-align:center;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.si_bg_1 {
  background:#999;
  color:#fff;
}
.si_bg_2 {
  /* background:#333; */
  background:#2d98da;
  color:#fff;
}
.si_bg_3 {
/*  background:#80b31b; */
  background:#b0377e;
  color:#fff;
}

.start_item_icon {
  font-size:30px;
  line-height:30px;
}
.start_item_headline {
  text-transform:uppercase;
  font-size:14px;
  line-height:18px;
  font-weight:800;
  padding: 15px 0px;
}
.start_item_text {
  font-size:12px;
  line-height:18px;
  font-weight:400;
  flex:1;
}

.start_item_action {
  padding:15px 0 0 0;
  text-align:center;
}
.start_item_action > span {
  display:inline-block;
  line-height:40px;
  height:40px;
  width:40px;
  background:rgba(255,255,255,0.2);
  color:#fff;
  font-size:30px;
  border-radius:4px;
}

.installer_mode {
  padding: 10px 20px;
  color:#fff;
  font-weight:800;
  text-transform:uppercase;
  font-size:14px;
  line-height:20px;
}
.installer_mode.update {
  background:#2d98da;
}
.installer_mode.install {
  background:#b0377e;
}
.installer_mode.autoupdate {
  background:#f2a000;
}


 


.downloadmessage {
  display:flex;
  margin: 0 0 20px 0;
}
.downloadmessage a {
  display:block;
  width:100%;
  padding: 8px 10px 8px 65px;
  border-radius:4px;
  position:relative;
  font-size:13px;
  line-height:19px;
  font-weight:500;
  min-height:56px;
  text-decoration:none;
  background: rgba(0,0,0,0.1); 
  border: 1px solid rgba(0,0,0,0.2);
  color: #222;
}
.downloadmessage a:after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  width:44px;
  height:44px;
  border-radius:4px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:20px;
  position:absolute;
  left:6px;
  top:6px;
  content: '\f019';
  font-weight: 900;
  background:rgba(255,255,255,0.5);
  color: #222;
}
.downloadmessage a:hover {
  opacity:0.8;
  text-decoration:none;
}
.dl_nowrap { 
  white-space:nowrap;
}

.fas.fa-clock.fa-spin {
  padding: 0px 0px !important;
  background: transparent !important;
  color: #999 !important;
  margin: 0px 0 0px 0px !important;
  line-height: 24px !important;
  font-size:24px !important;
  position: absolute;
  top: 8px;
  right: 5px;
}