html, body{ height: 100%; margin: 0; padding: 0}

body {
    background: url("../images/bg.jpg");
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size:14px;
    font-style: normal;
    font-variant: normal;
}
a { will-change: all; transition: background 0.15s linear, color 0.2s ease-in-out; }
.loading-overlay{
    position: absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background-color:rgba(255, 255, 255, 0.7);
}
li {
    margin-bottom: 10px;
}
li:last-child {
    margin-bottom: 0;
}
.section{
    width:850px;
    margin-left: auto;
    margin-right: auto;
}

.positive { color:#27ae60; }
.negative { color:red; }

.warning {
    padding-left:30px;
    background: url("../images/icons/exclamation-triangle.svg") no-repeat left center;
    background-size: 20px;
}

.image{ float:right; margin:10px; }

#layout a{ color:#09c; }
#layout a:hover{ color:#F90; }

#layout a.ajaxlink{ color:#09c; border-bottom: dashed 1px #09c; text-decoration: none; }
#layout a.ajaxlink:hover{ color:#F90; border-bottom: dashed 1px #F90; }

#layout #header{ padding:25px 0; }
#layout #footer{ padding:20px 0; }

#layout #header .logo {
    padding-left: 220px;
    background: url("../images/logo.svg") no-repeat left center;
}

#layout #header .logo span {
    display:inline-block;
    font-size: 26px;
    color:#FFF;
    text-shadow: 0 1px 2px #000;
    padding-left:20px;
    border-left: solid 1px #77879c;
}

#langs {
    display: flex;
    float: right;
    margin: 5px 0 0 0;
}

#langs a.language {
    text-decoration: none;
    color:#7D929D;
    display: block;
}
#langs a.language  > img {
    display: block;
    height: 20px;
    filter: grayscale(0.8);
    opacity: 0.8;
    transition: all ease-in-out .2s;
}
#langs a.language:hover > img {
    opacity: 1;
}

#langs a.language + a.language {
    margin-left: 10px;
}

#langs a.selected > img {
    filter: grayscale(0);
}

#langs a:hover {
    color:#354247;
}

#layout #main{
    box-shadow: 0 0 18px #000;
    border-collapse: collapse;
}

#layout #sidebar{
    width:196px;
    background:#d0dee5;
    border-right: solid 1px #7d929d;
    padding:0;
}

#layout #sidebar #steps,
#layout #sidebar #steps li{ margin:0; padding:0; list-style: none; }

#layout #sidebar #steps li{
    height:40px;
    line-height:40px;
    padding:0 20px;
    color:#7d929d;
}

#layout #sidebar #steps li.active{
    color:#FFF;
    text-shadow: 0 1px 1px #000;
    background: rgb(125,146,157);
    background: linear-gradient(to right, rgba(125,146,157,1) 0%,rgba(89,106,114,1) 100%);
}

#layout #body{
    padding:20px;
    width:520px;
    background: #FFF;
    color:#7D929D;
    position: relative;
}

#layout #body h1,
#layout #body h2{
    font-size:24px;
    font-weight: normal;
    color:#354247;
    margin-bottom:10px;
}

#layout #body h1{
    margin-top: 0;
}

#layout #body h2{
    font-size:20px;
    margin-bottom: 0;
}

#layout #body p {
    line-height:22px;
}

#layout #body .license-text {
    height:330px;
    border: solid 1px #AAA;
    border-radius: 3px;
    padding: 4px;
    box-shadow: inset 0 1px 4px #DDD;
    color: #333;
    outline: none;
    font-size:12px;
    resize: vertical;
}
#layout #body .page {padding-bottom: 50px;}
#layout #body .grid{
    width:100%;
    border-top: solid 1px #ECECEC;
    font-size:13px;
    color:#666;
    border-collapse: collapse;
}

#layout #body .grid td,
#layout #body .grid th { padding:10px 0; border-bottom: solid 1px #ECECEC; }

#layout #body .grid .value { width:100px; text-align: center; background: #F9F9F9; }

#layout #body .buttons{
    background:#F9F9F9;
    border-top:solid 1px #ECECEC;
    padding:10px;
    padding-top:8px;
    text-align:right;
    position:absolute;
    left: 0;
    right:0;
    bottom:0;
}

#layout #body .buttons input{
	padding: 10px 15px;
	line-height: 100%;
	border-radius: 5px;
	cursor: pointer;
	width: auto;
    font-size: 1.2em;
	text-shadow: 0 1px 3px #FFF;
	color: #333;
	text-decoration: none;
	vertical-align: middle;
	border: 1px solid #CCC;
	background: linear-gradient(to right, rgba(246, 246, 246, 1) 0%,rgba(224, 224, 224, 1) 100%);
}

#layout #body .buttons input:hover{
	border: 1px solid #BBB;
	background: linear-gradient(to right, rgba(246, 246, 246, 1) 0%,rgba(237, 237, 237, 1) 100%);
}

#layout #body .buttons input:active{
    box-shadow: inset 0 2px 3px #ccc;
}

#layout #footer{
    color:#FFF;
    overflow: hidden;
}

#layout #footer #copyright{ float:left; }
#layout #footer #copyright a { color: #FFF; }
#layout #footer #copyright a:hover { color:#F90; }
#layout #footer #version{ float:right; }

form .field{
    margin-bottom:10px;
}

form .field:last-child{
    margin-bottom: 0;
}

form fieldset{
    padding:10px 15px 15px;
    border-radius:4px;
    border:solid 1px #D0DEE5;
    margin-bottom:12px;
}

form fieldset legend{
    color:#354247;
    font-size:14px;
}

form .field label {
    display:block;
    font-size:14px;
    color:#697D87;
}

form .opt-group{
    margin:6px 0;
}

form .opt-group label{
    color:#666;
}

.input, textarea{
    border: solid 1px #aaa;
    border-radius:3px;
    padding:4px;
    box-shadow: inset 0 2px 8px #DDD;
    color:#333;
    outline:none;
    width:100%;
    box-sizing: border-box;
    line-height: 1.5;
    display: block;
    margin: 6px 0 0;
    font-family: inherit;
    font-size: inherit;
    transition: border-color .25s ease-in-out,box-shadow .25s ease-in-out;
}
.input:focus, textarea:focus {
    border-color: #a9beca;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(125,146,157,.4);
}
.input{
    height: 30px;
}

.input-icon{
    padding-left: 28px;
    background: no-repeat 4px center;
    background-size: auto 18px;
}
.swal2-popup .swal2-styled:focus {
    outline: 0!important;
    box-shadow: none!important;
}
.swal2-popup {
    width: 30em !important;
    border-radius: 0 !important;
}
.icon-folder { background-image:url("../images/icons/folder.svg"); }
.icon-url { background-image:url("../images/icons/link.svg"); }
.icon-email { background-image:url("../images/icons/envelope.svg"); }
.icon-user { background-image:url("../images/icons/user.svg"); }
.icon-password { background-image:url("../images/icons/key.svg"); }
.icon-password2 { background-image:url("../images/icons/key.svg"); }
.icon-db { background-image:url("../images/icons/database.svg"); }
.icon-db-server { background-image:url("../images/icons/server.svg"); }
.icon-db-prefix { background-image:url("../images/icons/divide.svg"); }
.icon-db-table { background-image:url("../images/icons/table.svg"); }
.icon-text { background-image:url("../images/icons/text-width.svg"); }

.hint{
    font-size:13px;
    color:#999;
    float:right;
}

pre, code {
    display:block;
    overflow: auto;
    border: 1px solid #CCCCCC;
    border-radius: 2px;
    box-shadow: inset 0 0 .5em #CCCCCC;
    padding: 10px 15px;
    margin:0;
    color:#666;
    white-space: pre-wrap;
}

select.input {
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 8px;
}

span.root-path{
    font-weight:bold;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

a.root-path-change{
    margin-left:10px;
    font-size:12px;
}
.sk-circle {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #f6ab2f;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }
@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.animated {
    animation-duration: .3s
}
@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}