/* Base theme */
.formlyWrapper-Base {
    color: #888;
    background: #eee;
    border: 1px solid #fff;
    padding: 10px;
    box-shadow: 0px 0px 3px #888;
    -moz-box-shadow: 0px 0px 3px #888;
    -webkit-box-shadow: 0px 0px 3px #888;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -khtml-border-radius: 4px;
    text-shadow: 0px 1px 0px #fff;
}

.formlyWrapper-Base input[type="text"], .formlyWrapper-Base input[type="password"], .formlyWrapper-Base select, .formlyWrapper-Base textarea {
    color: #444;
    border: 1px solid #ccc;
    padding: 5px 10px;
    box-shadow: 0px 1px 0px #fff;
    -moz-box-shadow: 0px 1px 0px #fff;
    -webkit-box-shadow: 0px 1px 0px #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -khtml-border-radius: 4px;
    margin: 5px 10px;
}

.formlyWrapper-Base input[type="submit"], .formlyWrapper-Base input[type="reset"], .formlyWrapper-Base input[type="button"] {
    border: 1px solid #bbb;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -khtml-border-radius: 3px;
    background: -moz-linear-gradient(100% 100% 90deg, #d5d5d5, #eee);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#d5d5d5));
    background: -webkit-linear-gradient(#eee, #d5d5d5);
    background: -o-linear-gradient(#eee, #d5d5d5);
    color: #232d3d;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 10px;
    margin: 15px 0px 10px 10px;
    text-shadow: 0px 1px 0px #fff;
    cursor: pointer;
    box-shadow: 0px 1px 2px #ccc;
    -moz-box-shadow: 0px 1px 2px #ccc;
    -webkit-box-shadow: 0px 1px 2px #ccc;
    float: right;
}

.formlyWrapper-Base input[type="submit"]:hover, .formlyWrapper-Base input[type="submit"]:active {
    color: #008ce5;
}

.formlyWrapper-Base input[type="reset"]:hover, .formlyWrapper-Base input[type="reset"]:active, .formlyWrapper-Base input[type="button"]:hover, .formlyWrapper-Base input[type="button"]:active {
    color: #d85054;
}

.formlyWrapper-Base input[type="submit"]:active, .formlyWrapper-Base input[type="reset"]:active, .formlyWrapper-Base input[type="button"]:active {
    box-shadow: inset 0px 1px 2px #ccc;
    -moz-box-shadow: inset 0px 1px 2px #ccc;
    -webkit-box-shadow: inset 0px 1px 2px #ccc;
}

.formlyWrapper-Base h1, .formlyWrapper-Base h2 {
    padding: 0;
    margin: 3px 0;
}

.formlyWrapper-Base h1 {
    font-size: 16px;
    color: #555;
}

.formlyWrapper-Base h2 {
    font-size: 13px;
    color: #666;
}

.formlyWrapper-Base hr {
    color: #ddd;
    border: 1px solid #ddd;
    border-bottom-color: #f9f9f9;
}

/* Light theme */
.formlyWrapper-Light {
    color: #888;
    background: #fff;
    border: 5px solid #ddd;
    padding: 10px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -khtml-border-radius: 8px;
    text-shadow: 0px 1px 1px #aaa;
    box-shadow: 0px 1px 0px #fff;
    -moz-box-shadow: 0px 1px 0px #fff;
    -webkit-box-shadow: 0px 1px 0px #fff;
}

.formlyWrapper-Light input[type="text"], .formlyWrapper-Light input[type="password"], .formlyWrapper-Light select, .formlyWrapper-Light textarea {
    background: #fffcf4;
    color: #444;
    border: 3px solid #efeadf;
    padding: 5px 10px;
    box-shadow: 0px 1px 0px #fff;
    -moz-box-shadow: 0px 1px 0px #fff;
    -webkit-box-shadow: 0px 1px 0px #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -khtml-border-radius: 4px;
    margin: 5px 0px;
}

.formlyWrapper-Light input[type="submit"], .formlyWrapper-Light input[type="reset"], .formlyWrapper-Light input[type="button"] {
    border: 3px solid #eee;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -khtml-border-radius: 20px;
    background: #fff;
    color: #232d3d;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 10px;
    margin: 15px 10px 10px 0px;
    cursor: pointer;
}

.formlyWrapper-Light input[type="submit"]:hover, .formlyWrapper-Light input[type="submit"]:active {
    color: #008ce5;
    border-color: #c3e8ff;
}

.formlyWrapper-Light input[type="reset"]:hover, .formlyWrapper-Light input[type="reset"]:active, .formlyWrapper-Light input[type="button"]:hover, .formlyWrapper-Light input[type="button"]:active {
    color: #d85054;
    border-color: #f7dbdc;
}

.formlyWrapper-Light input[type="submit"]:active, .formlyWrapper-Light input[type="reset"]:active, .formlyWrapper-Light input[type="button"]:active {
    box-shadow: inset 0px 1px 2px #ccc;
    -moz-box-shadow: inset 0px 1px 2px #ccc;
    -webkit-box-shadow: inset 0px 1px 2px #ccc;
}

.formlyWrapper-Light h1, .formlyWrapper-Light h2 {
    padding: 0;
    margin: 3px 0;
}

.formlyWrapper-Light h1 {
    font-size: 16px;
    color: #d53c35;
}

.formlyWrapper-Light h2 {
    font-size: 13px;
    color: #666;
}

.formlyWrapper-Light hr {
    color: #eee;
    border: 1px solid #eee;
}

/* Dark theme */
.formlyWrapper-Dark {
    color: #ddd;
    background: #303b2e;
    border: 1px solid #111;
    padding: 10px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -khtml-border-radius: 8px;
    text-shadow: 0px -1px 1px #000;
    box-shadow: 0px 2px 8px #000;
    -moz-box-shadow: 0px 2px 8px #000;
    -webkit-box-shadow: 0px 2px 8px #000;
}

.formlyWrapper-Dark input[type="text"], .formlyWrapper-Dark input[type="password"], .formlyWrapper-Dark input[type="checkbox"], .formlyWrapper-Dark select, .formlyWrapper-Dark textarea {
    color: #444;
    background: #C9E0D0;
    border: 2px solid #fff;
    padding: 5px 10px;
    box-shadow: 0px 1px 4px #000;
    -moz-box-shadow: 0px 1px 4px #000;
    -webkit-box-shadow: 0px 1px 4px #000;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -khtml-border-radius: 4px;
    margin: 5px 10px;
}

.formlyWrapper-Dark input[type="submit"], .formlyWrapper-Dark input[type="reset"], .formlyWrapper-Dark input[type="button"] {
    border: 1px solid #000;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -khtml-border-radius: 3px;
    background: -moz-linear-gradient(100% 100% 90deg, #222, #333);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#222));
    background: -webkit-linear-gradient(#333, #222);
    background: -o-linear-gradient(#333, #222);
    color: #ddd;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 10px;
    margin: 15px 0px 10px 10px;
    text-shadow: 0px -1px 1px #000;
    cursor: pointer;
    box-shadow: inset 0px 1px 0px #444;
    -moz-box-shadow: inset 0px 1px 0px #444;
    -webkit-box-shadow: inset 0px 1px 0px #444;
}

.formlyWrapper-Dark input[type="submit"]:hover, .formlyWrapper-Dark input[type="submit"]:active {
    color: #C9E0D0;
}

.formlyWrapper-Dark element.style {
    color: #000;
}

.formlyWrapper-Dark input[type="reset"]:hover, .formlyWrapper-Dark input[type="reset"]:active, .formlyWrapper-Dark input[type="button"]:hover, .formlyWrapper-Dark input[type="button"]:active {
    color: #d85054;
}

.formlyWrapper-Dark input[type="submit"]:active, .formlyWrapper-Dark input[type="reset"]:active, .formlyWrapper-Dark input[type="button"]:active {
    box-shadow: inset 0px 1px 2px #111;
    -moz-box-shadow: inset 0px 1px 2px #111;
    -webkit-box-shadow: inset 0px 1px 2px #111;
}

.formlyWrapper-Dark h1, .formlyWrapper-Dark h2 {
    padding: 0;
    margin: 3px 0;
}

.formlyWrapper-Dark h1 {
    font-size: 16px;
    color: #fff;
}

.formlyWrapper-Dark h2 {
    font-size: 13px;
    color: #ddd;
}

.formlyWrapper-Dark hr {
    background: #003300;
    color: #003300;
    border: 1px solid #222;
}

/* Standards for all themes */
.formlyPrefix {
    position: absolute;
    float: left;
    z-index: 9999;
    display: none;
}

.formlyInvalid, .formlyRequired {
    border-radius: 4px;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 12px;
    display: none;
    margin: 5px 0;
}

.formlyInvalid {
    background: #ef7971;
    color: #fff;
    border: 1px solid #e63125;
    box-shadow: inset 0px 1px 0px #f4a49f;
    text-shadow: 0px -1px 0px #e63125;
}

.formlyRequired {
    background: #f5972f;
    color: #fff;
    border: 1px solid #c76d09;
    box-shadow: inset 0px 1px 0px #f9c081;
    text-shadow: 0px -1px 0px #c76d09;
}