.w200 {
    font-weight: 200
}

.w300 {
    font-weight: 300
}

.w400 {
    font-weight: 400
}

.w700 {
    font-weight: 700
}

.w800 {
    font-weight: 800
}

.w900 {
    font-weight: 900
}

body {
    -webkit-backface-visibility: hidden
}

.qr-wrapper {
    text-align: center
}

.qr-wrapper svg {
    margin: 0 auto;
    display: inline-block
}

.qr-wrapper--shadowed svg {
    box-shadow: 3px 7px 10px rgba(0, 0, 0, .45)
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 20%, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 20%, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(5%, 0, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(5%, 0, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(-5%, 0, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(-5%, 0, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

body.vspot, body.vspot .h1, body.vspot .h2, body.vspot .h3, body.vspot .h4, body.vspot .h5, body.vspot .h6, body.vspot .main-header .logo, body.vspot h1, body.vspot h2, body.vspot h3, body.vspot h4, body.vspot h5, body.vspot h6 {
    font-family: Nunito, Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif
}

p:last-of-type {
    margin-bottom: 0
}

p.text-fit-button-line {
    padding: 7px 12px
}

#logout-form {
    display: none
}

.text-wrap {
    overflow-wrap: break-word;
    word-wrap: break-word
}

.login-page, .register-page {
    background-color: #000;
    background: #fff url(/media/images/background_auth.jpg) no-repeat 50% fixed;
    background-size: cover
}

.login-page:before, .register-page:before {
    background: rgba(0, 0, 0, .8);
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    content: ""
}

.auth-box {
    z-index: 2;
    position: relative;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.login-logo svg, .register-logo svg {
    max-width: 160px;
    margin: 20px auto;
    display: block
}

.login-box-body, .register-box-body {
    border-radius: 3px;
    background: #fff;
    padding: 20px;
    border: none;
    color: #666;
    box-shadow: 3px 5px 20px 4px rgba(0, 0, 0, .2)
}

.backend-gate-form {
    margin-bottom: 20px
}

.label {
    padding: .4em .6em .2em;
    font-size: 75%;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .5)
}

.inline-form {
    display: inline-block
}

.pace .pace-progress {
    background: #c70038 !important
}

.logo-mini {
    font-size: 70%;
    font-weight: 100;
    font-stretch: condensed;
    background: #fff url(/media/branding/logo_padded.svg) no-repeat 50% scroll;
    background-size: cover;
    text-indent: -9999rem
}

.content-wrapper {
    background: #d6d6d6;
    background: rgba(34, 45, 50, .5) url(/media/images/background_backend.jpg) no-repeat 50% fixed;
    background-size: cover;
    background-blend-mode: darken
}

.vspot.skin-black .content-header {
    background-color: rgba(34, 45, 50, .7);
    box-shadow: none;
    padding: 15px;
    color: #fff
}

.vspot.skin-black .content-header h1 {
    font-weight: 100
}

.vspot.skin-black .content-header h1 small {
    font-size: 16px;
    font-weight: 900;
    color: #ffc107
}

.vspot.skin-black .sidebar-menu > li.active > a {
    font-weight: 600;
    border-left: 3px solid #c70038
}

.vspot.skin-black .sidebar-menu .fa-fw {
    margin-right: .5em
}

.vspot.skin-black .box {
    box-shadow: 5px 5px 14px rgba(0, 0, 0, .65)
}

.vspot.skin-black .box.box-default {
    border-top-color: #c70038
}

.alert:last-of-type {
    margin-bottom: 0
}

.panel .h2, .panel .h3, .panel h2, .panel h3 {
    margin: 0
}

.panel .user-status-labels .label {
    margin: 0 .25rem
}

.panel--channel .panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.panel--channel .panel-heading .badge {
    margin-left: 15px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2)
}

.panel--device .panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.panel--device .panel-heading .badge {
    margin-left: 15px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2)
}

.panel--channel .panel-heading .badge.label-default {
    background-color: #5c6367;
}

.panel--channel .panel-heading .label.label-default {
    background-color: #5c6367;
    color: #FFFFFF;
}

.panel-footer {
    background-color: #fff;
    background: linear-gradient(90deg, #f5f5f5 0, #fff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f5f5f5", endColorstr="#ffffff", GradientType=1)
}

.btn-link--delete-dropdown {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #777;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    background-color: transparent;
    border-radius: 0;
    transition: all .3s ease-out
}

.btn-link--delete-dropdown:hover {
    text-decoration: none;
    background-color: #dd4b39;
    color: #fff
}

.well.well--toolbar {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between
}

.box-title .icon {
    margin-right: 10px
}

.btn.btn-sm.has-icon-left .fa, .btn.btn-sm.has-icon-left .fas {
    margin-right: 4px
}

.btn.btn-sm.has-icon-right .fa, .btn.btn-sm.has-icon-right .fas {
    margin-left: 4px
}

.btn.has-icon-left .fa, .btn.has-icon-left .fas {
    margin-right: 5px
}

.btn.has-icon-right .fa, .btn.has-icon-right .fas {
    margin-left: 5px
}

.btn.btn-lg.has-icon-left .fa, .btn.btn-lg.has-icon-left .fas {
    margin-right: 6px
}

.btn.btn-lg.has-icon-right .fa, .btn.btn-lg.has-icon-right .fas {
    margin-left: 6px
}

.js-enhanced-select {
    visibility: hidden;
    transition: visibility .3s ease-out
}

.colorpicker.vspot-color-picker .colorpicker-saturation {
    width: 250px;
    height: 250px
}

.colorpicker.vspot-color-picker .colorpicker-alpha, .colorpicker.vspot-color-picker .colorpicker-hue {
    width: 40px;
    height: 250px
}

.colorpicker.vspot-color-picker .colorpicker-color, .colorpicker.vspot-color-picker .colorpicker-color div {
    height: 40px
}

.colorpicker.vspot-color-picker .colorpicker-selectors i {
    height: 17px;
    width: 17px
}

textarea.ql-container {
    resize: none
}