/*** GENERAL ***/
body {
    background-color:#E3E8EE;
    font-family:'Roboto', Helvetica, sans-serif;
    font-weight:400;
    font-size:15px;
    color:#2b2d50;
}

h1,h2,h3 {
    margin:0;
    padding:0;
    line-height:1.2;
    font-weight:400;
}
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.467em; }

.left { float:left; }
.right { float:right; }
.noshow { display:none; }
.fontgray, .font-note { color:#999999; }

.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }

.font-success { color:#1ea672; }
.font-danger { color:#C23B36; }
.font-mono { font-family: 'Overpass Mono', monospace; }

a > i.material-icons { margin-right:5px; }

i.material-icons { vertical-align:middle; }
.req {
    color:#aaaaaa;
    font-size:12px;
}

.rules {
    font-size:12px;
    color:#808080;
    line-height:1.6;
    margin-top:10px;
}

.cursor-move { cursor:move; }

.boxed {
    background-color:#F7FAFC;
    padding:30px;
}

.data {
    background-color:#F7FAFC;
    padding:10px;
    border-radius:3px;
}
.label.label-lg {
    padding:15px;
    display:inline-block;
    width:100%;
}

/*** BOOTSTRAP ***/
.form-group > label {
    display:block;
    font-weight:400;
}
.form-group.form-check {
    margin:0;
}

.label-bold .form-group > label {
    font-weight:700;
}

.btn {
    padding:9px 15px;
}

.form-control,
.bootstrap-select > .btn {
    padding:12px 15px;
    border-color:#ced4da;
    background-color:#fff;
    font-size:15px;
    line-height:1;
    height:auto;
    vertical-align:middle;
}
textarea.form-control {
    resize:none;
    height:100px;
}

.alert {
    margin:0;
    border:0;
    padding:30px;
    line-height:1.2;
}
.alert-secondary {
    background-color:#f1f1f1;
}

.form-group > .alert {
    line-height:1.2;
    padding:12px 15px;
}
.table td > .alert {
    padding:5px;
    line-height:1.2;
    font-size:13px;
}

.alert h2 {
    margin-bottom:15px
}
.alert ul, .alert li {
    margin:0;
    padding:0;
}
.alert ul { margin-left:20px; }
.alert hr { margin:10px 0; }

.table th {
    border-top:0;
}

.table td, 
.table th {
    vertical-align:middle;
    line-height:1.2;
}

.table.table-hover tbody tr:hover {
    background-color:#F7FAFC;
}

.card {
    border-color:#E3E8EE;
}
.card-body {
    padding:30px;
}
.card-title {
    padding:15px 30px;
    margin:0;
    border-bottom:1px solid #E3E8EE;
}

a.ListIcon {
    display:inline-block;
    border:1px solid #E3E8EE;
    background-color:white;
    line-height:1;
    padding:0 5px;
    margin:0;
    vertical-align:middle;
    font-size:12px;
    line-height:28px;
    border-radius:4px;
    color:rgba(43,45,80,.70);
}
a.ListIcon:hover { color:#2b2d50; text-decoration:none; }
a.ListIcon i.material-icons { font-size:18px; margin:0; }

.dot {
    display:inline-block;
    width:10px;
    height:10px;
    background:#E3E8EE;
    border-radius:16px;
}

.form-text {
    line-height:1.6;
}

.bootstrap-maxlength {
    border-radius:0 0 4px 4px;
    line-height:1;
    font-size:11px;
    padding:7px 14px;
    font-weight:400;
    margin:0;
}
.bootstrap-maxlength.label-success {
    background-color:#80bdff;
    color:#fff;
}

.help-icon { color:#DADADA; cursor:default; }
.help-icon:hover { color:#999999; }

.tab-pane {
    padding:30px;
}
.tab-content {
    border:1px solid #ddd;
    border-top:0;
    background-color:white;
}

.popover {
    max-width:350px;
    border-color:#d8d8d8;
    border-radius:3px;
    box-shadow:0 2px 14px -7px black;
}
.popover-content {
    padding:20px;
    font-size:11px;
    line-height:1.6;
    color:#808080;
}
.popover.top .arrow,
.popover.bottom .arrow { border-top-color:#d8d8d8; border-bottom-color:#d8d8d8; }

.popover.right .arrow,
.popover.left .arrow { border-left-color:#d8d8d8; border-right-color:#d8d8d8; }

.pagination {
    margin-top:20px;
}
.pagination .page-note {
    font-size:13px;
    line-height:36px;
    opacity:.5;
    padding:0 20px;
}
.pagination .page-item.next .page-link {
    border-radius:0 .25rem .25rem 0;
}
.pagination .page-item.prev .page-link {
    border-radius:.25rem 0 0 .25rem;
}

pre {
    border:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:none !important;
}

.datepicker {
    padding:10px;
    font-size:13px;
}
.datepicker td,
.datepicker th {
    padding:5px;
    text-shadow:none !important;
}
.datepicker table td.active,
.datepicker table td.active:hover,
.datepicker table td span.active,
.datepicker .btn-primary {
    background-color:#94A4B6 !important;
    text-shadow:none !important;
}

.badge {
    border-radius:3px;
    font-weight:400;
    font-size:11px;
}

/*** CONTENT ***/

.pagecenter {
    max-width:1500px;
    margin:0 auto;
}

.website {
    padding:30px 0;
}

.website-title {
    margin-bottom:30px;
}

body.isHtmlViewer {
    background-color:#f1f1f1;
}
body.isHtmlViewer .website {
    padding:0;
}

.usermenu {
    display:inline-block;
    font-size:14px;
    line-height:1;
}
.usermenu > a {
    display:inline-block;
    margin-left:10px;
    padding-left:10px;
    border-left:1px solid #c1c1c1;
}

.main .content img {
    max-width:100%;
}
.main .title {
    padding:30px 50px;
    border-bottom:1px solid #E3E8EE;
}

form.filter {
    padding:30px;
    margin-bottom:30px;
    background-color:#F7FAFC;
}

.controls {
    float:right;
}
.controls a,
.controls .btn {
    display:inline-block;
    border:1px solid #e8e8e8;
    line-height:1;
    padding:10px 20px;
    border-radius:4px;
    margin-left:20px;
    text-decoration:none;
}
 controls a.cancel,
.controls .btn {
    border:0;
}

nav ul, nav li {
    padding:0;
    margin:0;
    list-style:none;
    vertical-align:top;
    display:inline-block;
}
nav ul {
    width:100%;
    border-bottom:1px solid #E3E8EE;
    font-size:0;
}
nav li a {
    display:block;
    font-size:13px;
    padding:12px 30px;
    border-right:1px solid #E3E8EE;
    color:#464646;
    text-decoration:none;
}
nav li:last-child a { border:0; }
nav li a:hover {
    color:#007bff;
    text-decoration:none;
}

.overview-menu,
.overview-menu li {
    padding:0;
    margin:0;
    list-style:none;
    display:inline-block;
    width:100%;
    vertical-align:top;
}
.overview-menu li {
    float:left;
    width:50%;
    padding:10px;
}
.overview-menu a {
    display:block;
    padding:30px;
    border:1px solid #E3E8EE;
    background-color:#F7FAFC;
    color:rgba(43,45,80,.70);
    font-size:15px;
    line-height:1.6;
    border-radius:5px;
    text-decoration:none;
    transition:background 300ms, border 300ms, color 300ms;
}
.overview-menu a:hover {
    color:#2b2d50;
}
.overview-menu b {
    display:block;
    font-size:22px;
    font-weight:500;
}
.overview-menu i {
    font-size:80px;
}

body.isLogin > .pagecenter {
    max-width:400px;
}
body.isLogin .main > .title {
    display:none;
}
body.isLogin .main .content {
    padding:30px;
}
body.isLogin .main .content .message {
    margin:0;
    margin-top:30px;
}

/* Applications */
.interfaces > .card {
    position:relative;
    margin-top:20px;
    transition:box-shadow 300ms;
}
.interfaces > .card:hover {
    box-shadow:0 0 25px -5px rgba(0,0,0,.20);
}
.interfaces .image {
    position:absolute;
    top:20px;
    right:20px;
    max-height:35px;
}
.interfaces .desc {
    font-size:14px;
    line-height:1.6;
    margin:10px 0;
}
.interfaces .form-check-label {
    font-size:18px;
}

.configure {
    margin-top:20px;
}
.configure .form-group > label > .badge {
    vertical-align:top;
    margin-top:2px;
    margin-right:5px;
}

/*** SPECIALS ***/
.ctrl > a {
    margin-left:30px;
}

.viewer-frame {
    border:1px solid #ddd;
    width:100%;
    height:350px;
    display:inline-block;
}
pre {
    border:1px solid #ddd;
    background-color:#f1f1f1;
    border-radius:0;
    padding:15px;
}

.numbox {
    color: #fff;
    background-color: #2b2d50;
    text-align: center;
    line-height: 1;
    padding: 1em;
    border-radius: .25em;
}
.numbox label {
    display: block;
    margin: 0;
    margin-bottom: .75em;
    text-transform: uppercase;
    font-size: .75em;
    letter-spacing: 1px;
    font-weight: 400;
}
.numbox .number {
    font-size: 2em;
    font-weight: 300;
}
.numbox .last {
    display: block;
    font-size: .75em;
    margin-top: .5em;
    color: rgba(255,255,255,.70);
}