/* Installer CSS */

/* Main tags */
body {background:#5ba3b9 url(splash.jpg) no-repeat center -250px; font-size:75%; min-width:260px; margin:0}
body, input, select, textarea, table {font-family:arial, helvetica, sans-serif}

/* Links */
a {text-decoration:none; color:#00f}
a:hover {text-decoration:underline; color:#000}
a.external::after {content:''; height:10px; width:10px; margin-left:3px; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5Ljk1MiA5Ljk4NSI+CiAgPHBhdGggZmlsbD0iIzAwZiIgZD0iTTkuNDQ5LjAwOEg1LjU1NHMuNTM3LjU0NS44NTIuODZjNi4wNjIgNi4wNDgtNS4xLTUuMDk1IDIuNjg2IDIuNjgyLjMxNS4zMTQuODYuODcyLjg2Ljg3Mkw5Ljk0MiAwcy0uMjE1LjAwOC0uNDkzLjAwOHoiLz4KICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMGYiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMSIgZD0iTTE2LjcxLS42OGgtMy4wN3Y3LjUxNmg3LjQ4M1YzLjg2NW0tNC44Ni4zNDcgNS40Ni01LjQ2IiB0cmFuc2Zvcm09Im1hdHJpeCgxLjA3NDg4IDAgMCAxLjA3Mzg1IC0xNC4xNiAyLjE0NSkiLz4KPC9zdmc+') no-repeat center; background-size:contain; display:inline-block; -webkit-filter:drop-shadow(0 1px 0 #fff); filter:drop-shadow(0 1px 0 #fff)}
a.external:hover:after {-webkit-filter:saturate(0) drop-shadow(0 1px 0 #fff); filter:saturate(0) drop-shadow(0 1px 0 #fff)}

/* Misc */
#loading {font-size:120%; padding:5px 15px; position:fixed; right:25px; top:0; z-index:10000; background:#dcff52; border:solid #d4e58f; border-width:0 1px 1px 1px; box-shadow:rgba(0, 0, 0, 0.2) 0 0 3px; -webkit-box-shadow:rgba(0, 0, 0, 0.2) 0 0 3px}
input, select, textarea {font-size:100%}
#container {margin:50px auto; width:55em; background:#f5f5ff; background:rgba(245, 245, 255, 0.75); box-shadow:1px 2px #96b3c9; padding:20px; border-radius:5px; line-height:1.4; text-shadow:0 1px 0 rgb(255 255 255 / 0.75)}
h1 {margin:0 0 10px; font-size:175%; font-weight:normal; color:#32517e}
h1 img {vertical-align:middle; height:30px; margin:-5px 10px auto auto; -webkit-filter:drop-shadow(0 1px 0 rgb(255 255 255 / 0.75)); filter:drop-shadow(0 1px 0 rgb(255 255 255 / 0.75))}
.progress {display:block; margin:15px -20px 0 -20px}
.progress .step {display:inline-block; height:15px; width:calc(33.33% - 2px); margin-right:3px; background-color:#97b3c8; background-color:rgba(50,81,126,0.25); box-shadow:0 1px 0 rgb(255 255 255 / 0.75)}
.progress .step:last-child {margin-right:0}
.progress .step.active {background-color:#32517e}
p.lead {font-size:110%; margin:10px 0}
pre {overflow:auto; padding-bottom:5px}
li {margin-bottom:1em}
hr.aboveToggle {margin-top:3px; border:solid #96b3c9; border:solid rgba(50,81,126,0.25); border-width:1px 0 0}

/* Inputs and other form elements */
form, .form {margin:0; padding:0}
input.text, textarea {background:#fff; border:1px solid #aaa; box-shadow:inset 0 1px 3px #ccc; padding:2px}
input.text:focus, textarea.text:focus {border-color:#777}
input::placeholder {color:#aaa}
.placeholder {color:#aaa}
input.checkbox, input.radio {padding:0; margin:0 5px 1px 0; vertical-align:-2px}
label.checkbox, label.radio {cursor:pointer}
.form label {width:16em; float:left; text-align:right; margin:0 1em 1px 0}
.form div label {float:none; width:auto; text-align:left; margin:0}
.form label.long {width:100%; text-align:left}
.form label.radio {text-align:left; cursor:pointer}
.form input.text, .form select {width:17em; margin:0; float:left; font-size:130%}
.form div {float:left}
.form div input.text, .form div select {float:none}
.form li {margin-bottom:4px; overflow:hidden; list-style:none; display:block; zoom:1}
.form small {color:#888; font-size:90%}
.form small a {color:#55f}
.form small a:hover {text-decoration:underline; color:#000}
.form small a.external:after {height:9px; margin-left:2px}

/* Fieldsets */
fieldset {margin:10px 0 10px 0; padding:0 15px 15px; border:1px solid #96b3c9; border:1px solid rgba(50,81,126,0.25); box-shadow:inset 0 1px 0 rgb(255 255 255 / 0.75), 0 1px 0 rgb(255 255 255 / 0.75)}
fieldset p {margin:0 0 1em}
legend {font-size:140%; font-weight:bold; padding:5px 10px 10px; color:#000}
fieldset legend {-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px)}
fieldset legend a {color:#000}
fieldset.hidden {margin:10px 0 5px 0; padding:0 16px 0; border-width:1px 0 0; box-shadow:inset 0 1px 0 rgb(255 255 255 / 0.75)}
fieldset.hidden legend a {color:#32517e}
fieldset li:last-child {border-bottom:none!important; margin-bottom:0!important}
fieldset > .warning:last-child {margin:0}

/* Messages */
#messages {box-shadow:0 1px 3px 0 rgba(0,0,0,0.3); margin:0}
#messages .msg {margin:0}
.msg .close {float:right; padding:0 5px; margin:-2px -4px 0 5px; border:1px solid #000; color:#000; text-decoration:none}
.msg .close:hover {background:#fff; color:#000; text-decoration:none}
.msg .close:active {background:#aaa}
.msg {margin:0 0 1em 0; padding:5px 10px; background:#ddd; text-shadow:rgba(255,255,255,0.5) 0 1px; box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); line-height:1.4}
.msg code {background:none}
.form .msg {font-size:95%; padding:3px 5px; margin:0; margin-left:204px; float:left; clear:left; width:19em; width:calc(17rem - 11px)}
.info {background:#fad163}
.success {background:#cf0}
.warning {background:linear-gradient(to bottom, #e36c63, #c00); color:#fff; text-shadow:rgba(0,0,0,0.3) 0 -1px; box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.3)}
.warning a, .warning a:hover {color:#fff; text-decoration:underline}
.warning .close {border-color:#fff; color:#fff}

/* Footer and buttons */
hr.separator {color:#bbf; border:dashed #96b3c9; border:dashed rgba(50,81,126,0.25); border-width:1px 0 0; height:1px; margin:15px -20px 0 -20px}
#version {font-size:90%; font-weight:bold; text-transform:uppercase; color:#32517e; margin:5px 0 0}
#footer .button {font-size:130%; margin-bottom:0}
#footer input.button, #footer .button del {display:inline-block; padding:2px 10px 1px 10px; height:25px; font-weight:normal}
#footer input.button {color:#fff; text-shadow:#046b9e 0 -1px; background:linear-gradient(#9dcade 25%, #44a2c9 50%, #1e77af 50%, #37dcee 100%); border:1px solid #1a6b9d; border-radius:5px; box-shadow:inset 0 1px 0 #eeeeee,0 1px 0 rgb(255 255 255 / 0.75)}
#footer input.button:hover {text-decoration:none; box-shadow:inset 0 0 0 2px rgba(255, 255, 255, 0.5),inset 0 1px 0 #eeeeee, 0 1px 0 rgb(255 255 255 / 0.75)}
#footer input.button:active {box-shadow:inset 0 0 25px 2px rgba(0, 0, 0, 0.25),inset 0 1px 0 #eeeeee, 0 1px 0 rgb(255 255 255 / 0.75)}
#footer .button del, #footer input.button.disabled, #footer input.button.disabled:hover, #footer input.button.disabled:active {color:#999; text-decoration:none; cursor:not-allowed; text-shadow:#fff 0 1px; background:linear-gradient(#e9ebe8 25%, #d8dad6 50%, #cbceca 50%, #f8faf7 100%); border:1px solid #b2b4b1; border-radius:5px; box-shadow:inset 0 1px 0 #eeeeee, 0 1px 0 rgb(255 255 255 / 0.75)}
/* Other styles */
/*.overflowDiv {margin-top:3px}*/
#emailConfig > a {width:16em; text-align:right; margin:2px 1em 0 0; display:block}
#advanced input.text {font-size:100%; width:22em}

/* Mobile support */
@media only screen and (max-width:800px) {
  body {margin:0}
  #container {width:unset; margin:unset; background:#f5f5ff; border-radius:0; text-shadow:0 1px 0 #ffffff}
  h1 img {-webkit-filter:drop-shadow(0 1px 0 #ffffff); filter: drop-shadow(0 1px 0 #ffffff)}
  .progress .step {box-shadow:0 1px 0 #ffffff}
  #footer input.button {box-shadow:inset 0 1px 0 #eeeeee,0 1px 0 #ffffff}
  #footer input.button:hover {box-shadow:inset 0 0 0 2px rgba(255, 255, 255, 0.5),inset 0 1px 0 #eeeeee, 0 1px 0 #ffffff}
  #footer input.button:active {box-shadow:inset 0 0 25px 2px rgba(0, 0, 0, 0.25),inset 0 1px 0 #eeeeee, 0 1px 0 #ffffff}
  #footer .button del, #footer input.button.disabled, #footer input.button.disabled:hover, #footer input.button.disabled:active {box-shadow:inset 0 1px 0 #eeeeee, 0 1px 0 #ffffff}
  fieldset {box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #ffffff}
  fieldset.hidden {box-shadow:box-shadow:inset 0 1px 0 #ffffff}
}

@media only screen and (max-width:650px) {
  .form input.text, .form select, .form div {clear:left}
  .form label {text-align:left; width:auto}
  .form .msg {margin:0}
  #emailConfig a {width:auto; text-align:left}
}

@media only screen and (max-width:400px) {
  .form input.text {width:100%!important; width:-moz-fill-available!important; width:-webkit-fill-available!important; width:stretch!important}
  .form select {width:100%}
  .form .msg {width:auto; width:-moz-fill-available; width:-webkit-fill-available; width:stretch}
}