@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&display=swap);
@import url(https://fonts.googleapis.com/css?family=PT+Mono&display=swap);
@import url(https://fonts.googleapis.com/css?family=Comfortaa:300&display=swap);
.kiwip-rose {
    background: #e00074
}

.kiwip-jaune {
    background: #f8b232
}

.kiwip-turquoise {
    background: #009c97
}

.kiwip-bleu {
    background: #2171b8
}

.kiwip-violet {
    background: #951a81
}

.kiwip-gris {
    background: #777371
}

.kiwip-orange {
    background: #ff6f2b
}

.kiwip-vert {
    background: #20ce00
}

.kiwip-txt-rose {
    color: #e00074
}

.kiwip-txt-jaune {
    color: #f8b232
}

.kiwip-txt-turquoise {
    color: #009c97
}

.kiwip-txt-bleu {
    color: #2171b8
}

.kiwip-txt-violet {
    color: #951a81
}

.kiwip-txt-gris {
    color: #777371
}

.kiwip-txt-orange {
    color: #ff6f2b
}

.kiwip-txt-vert {
    color: #20ce00
}

.log-background {
    height: 100%!important;
    width: 100%;
    background-image: url(../img/Light-Blue-blur-background1.jpg);
    position: fixed;
    left: 0;
    top: 0;
    background-position: 100% 100%;
    background-size: cover
}

@-webkit-keyframes morph {
    0% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 50%
    }
    to {
        background-position: 0 50%
    }
}

@-moz-keyframes morph {
    0% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 50%
    }
    to {
        background-position: 0 50%
    }
}

@-o-keyframes morph {
    0% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 50%
    }
    to {
        background-position: 0 50%
    }
}

@keyframes morph {
    0% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 50%
    }
    to {
        background-position: 0 50%
    }
}

svg path {
    fill: inherit
}

::selection {
    color: #fff;
    background: #f8b232
}

html {
    height: auto;
    min-height: 100%;
    box-shadow: inset 0 -100px 150px -150px rgba(80, 117, 148, .3)
}

.wrapper {
    height: auto;
    margin: 0 auto;
    width: 100%;
    top: 0;
    left: 0
}

.min-vh-100 {
    min-height: calc(100vh - 56px)
}

.btn {
    text-decoration: none!important
}

body {
    background-color: #efefef;
    font-size: 15px;
    font-family: Open Sans, sans-serif;
    height: 100%;
    min-height: 100%
}

body header {
    background-color: #fff;
    padding: .5rem .7rem!important;
    box-shadow: 0 -60px 25px 50px rgba(0, 0, 0, .3);
    color: #fff;
    position: sticky!important;
    top: 0!important;
    left: 0;
    z-index: 1020;
    width: 100%;
    margin: auto
}

@media (min-width:992px) {
    body header .navbar-collapse {
        justify-content: flex-end;
        padding-right: 170px
    }
}

body header .navbar-collapse .navbar-nav .nav-item {
    background: #f3f3f3;
    border-radius: 20px;
    margin: .2rem 0;
    padding: 0
}

@media (min-width:992px) {
    body header .navbar-collapse .navbar-nav .nav-item {
        margin: 0 .25rem
    }
}

body header .navbar-collapse .navbar-nav .nav-item .nav-link {
    color: #202020;
    text-transform: uppercase;
    padding-right: 1.2rem;
    padding-left: 1.2rem;
    text-align: center;
    font-weight: 400
}

body header .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
    border-width: 0;
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .2);
    right: 0;
    left: unset
}

body header .navbar-collapse .navbar-nav .nav-item .dropdown-menu .dropdown-menu {
    right: 0;
    left: unset
}

body header .navbar-collapse .navbar-nav .nav-item .dropdown-menu.dropdown-menu-lang {
    min-width: 2rem
}

body header .btn-lang,
body header .btn-user {
    background: #f3f3f3;
    border-radius: 20px;
    padding: .5rem 1.2rem;
    font-size: 15px;
    height: 38px;
    line-height: 20px;
    color: #202020;
    text-transform: uppercase;
    margin: .2rem 0;
    width: 100%;
    font-weight: 400;
    border: none
}

@media (min-width:992px) {
    body header .btn-lang,
    body header .btn-user {
        margin: 0;
        width: auto
    }
}

body header .btn-lang.btn-user-login,
body header .btn-user.btn-user-login {
    background: #f8b232;
    color: #fff
}

body header .btn-lang.btn-user-login i,
body header .btn-user.btn-user-login i {
    background: #d69327;
    color: #fff
}

body header .btn-lang {
    margin: .2rem 0;
    background-image: url(../img/select-arrow.png);
    background-repeat: no-repeat;
    background-position: calc(100% - 15px)
}

body header .btn-lang:after {
    opacity: 0
}

@media (min-width:992px) {
    body header .btn-lang {
        margin: 0 .5rem
    }
}

body header .btn-lang .flag-img {
    display: none;
    top: -2px;
    position: absolute;
    top: 0;
    left: 0;
    background: #d8d8d8;
    height: 38px;
    width: 38px;
    padding: 9px;
    border-radius: 20px;
    transition: all .2s
}

body header .btn-lang[data-flag=flag-EN] .flag-uk-img,
body header .btn-lang[data-flag=flag-FR] .flag-fr-img {
    display: inline-block
}

body header .btn-lang:hover .flag-img {
    transform: rotate(-20deg);
    background: #202020;
    transition: all .2s
}

body header .btn-lang,
body header .btn-user,
body header .nav-item a {
    position: relative;
    padding-left: 50px!important
}

body header .btn-lang i,
body header .btn-user i,
body header .nav-item a i {
    position: absolute;
    left: 0;
    top: 0;
    background: #d8d8d8;
    color: #202020;
    height: 38px;
    width: 38px;
    border-radius: 20px;
    text-align: center;
    line-height: 38px;
    transition: all .2s
}

body header .btn-lang:hover i,
body header .btn-user:hover i,
body header .nav-item a:hover i {
    transform: rotate(-20deg);
    background: #202020;
    color: #fff;
    transition: all .2s
}

body header .dropdown-menu {
    border-width: 0;
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .2);
    right: 0;
    left: unset;
    overflow: hidden;
    top: calc(100% + 5px)!important;
    color: #202020!important;
    background-color: #f3f3f3!important;
    border-radius: 20px!important
}

body header .dropdown-menu .dropdown-item:focus,
body header .dropdown-menu .dropdown-item:hover {
    background: #fff
}

body header .dropdown-menu img {
    top: -2px;
    position: relative
}

body header .navbar-toggler {
    background: #f3f3f3;
    height: 38px;
    width: 38px;
    padding: 0;
    border-radius: 20px;
    color: #202020;
    border: none
}

body header .navbar-toggler:focus {
    outline: none
}

body header .form-control.form-control-small {
    height: calc(1.75rem + 2px)!important;
    padding: .25rem .5rem;
    font-size: 90%
}

body header .link-to-website {
    background: #2171b8;
    height: 100%;
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px
}

body header .link-to-website a {
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    text-align: center
}

@media (max-width:991px) {
    body header .link-to-website {
        margin: .2rem 0;
        width: 100%;
        border-radius: 50px;
        position: relative;
        font-size: 15px;
        height: 38px;
        line-height: 20px
    }
    body header .link-to-website a {
        padding: .5rem 1.2rem;
        padding-left: 50px!important
    }
    body header .link-to-website a:hover i {
        transform: rotate(-20deg);
        background: #202020;
        color: #fff;
        transition: all .2s
    }
    body header .link-to-website i {
        position: absolute;
        left: 0;
        top: 0;
        background: #185f93;
        color: #fff;
        height: 38px;
        width: 38px;
        border-radius: 20px;
        text-align: center;
        line-height: 38px;
        transition: all .2s
    }
}

body .noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

body .fix {
    clear: both
}

body .last {
    margin-right: 0
}

body img {
    max-width: 100%
}

body .wrapper {
    margin: auto
}

body .wrapper h1 {
    padding: 4rem 0 1rem
}

body .wrapper h2 {
    padding: 2rem 0 1rem
}

body .modal {
    background: rgba(220, 240, 255, .45)
}

body .modal .modal-dialog {
    box-shadow: 0 10px 75px -25px rgba(0, 0, 0, .5);
    border-radius: 1rem
}

body .modal .modal-dialog .modal-content {
    border-radius: 1rem;
    overflow: hidden;
    border: none;
    background: transparent
}

body .modal .modal-dialog .modal-content.modal-full-height {
    height: calc(100vh - 1rem)
}

@media (min-width:576px) {
    body .modal .modal-dialog .modal-content.modal-full-height {
        height: calc(100vh - 3.5rem)
    }
}

body .modal .modal-dialog .modal-content .modal-header {
    border-bottom-width: 0;
    padding: .5rem 1rem;
    background-color: #202020
}

body .modal .modal-dialog .modal-content .modal-header h2 {
    color: #fff;
    font-size: 1rem;
    line-height: 2rem;
    display: inline-block;
    padding: 0;
    width: auto;
    font-weight: 100;
    letter-spacing: .1rem;
    text-transform: uppercase
}

body .modal .modal-dialog .modal-content .modal-header .close {
    margin: .2rem -.5rem .2rem auto;
    padding: 0;
    color: #fff;
    opacity: 1;
    font-weight: 100
}

body .modal .modal-dialog .modal-content .modal-header .close:active,
body .modal .modal-dialog .modal-content .modal-header .close:focus {
    outline: none!important
}

body .modal .modal-dialog .modal-content .modal-header .close span {
    position: relative;
    transition: all .2s;
    display: block;
    height: 25px;
    width: 25px
}

body .modal .modal-dialog .modal-content .modal-header .close span:active,
body .modal .modal-dialog .modal-content .modal-header .close span:focus {
    outline: none!important
}

body .modal .modal-dialog .modal-content .modal-header .close:hover span {
    transform: rotate(90deg);
    transition: all .2s
}

body .modal .modal-dialog .modal-content .modal-body {
    overflow: hidden;
    background: #fff
}

body .leftside {
    max-width: 100%;
    position: absolute;
    z-index: 999;
    transition: all .2s;
    height: 100%
}

@media (min-width:768px) {
    body .leftside {
        max-width: 290px
    }
}

body .leftside.toggled {
    transform: translateX(-290px);
    transition: all .2s
}

@media (max-width:767px) {
    body .leftside.toggled {
        transform: translateX(-100%)
    }
}

body .leftside.toggled .menu-toggler {
    left: 100%;
    height: 40px;
    width: 53px;
    top: 75px;
    border-radius: 0 20px 20px 0
}

body .leftside.toggled .menu-toggler span {
    display: inline-block;
    width: auto;
    background: #666;
    white-space: nowrap;
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: 0 0;
    position: relative;
    text-transform: uppercase;
    padding: 20px;
    height: 56px;
    line-height: 1;
    top: -40px;
    border-radius: 0 0 5px 5px;
    opacity: 1;
    transition: all .2s
}

@media (min-height:740px) {
    body .leftside.toggled .menu-toggler span {
        top: -55px
    }
}

body .leftside.toggled .menu {
    box-shadow: -15px 0 30px 20px transparent
}

body .leftside .menu {
    background: hsla(0, 0%, 58.8%, .65);
    padding-top: 15px!important;
    height: 100%;
    padding-right: 15px;
    backdrop-filter: blur(4px)
}

@media (min-height:740px) {
    body .leftside .menu .stick {
        position: sticky;
        top: 71px;
        width: calc(100% + 15px);
        padding-right: 15px
    }
}

body .leftside .menu-toggler {
    position: absolute;
    top: 44px;
    left: calc(100% - 20px);
    background: #666;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 20px;
    overflow: visible;
    cursor: pointer;
    color: #fff;
    transition: all .2s
}

body .leftside .menu-toggler span {
    display: inline-block;
    width: 40px;
    background: #202020;
    white-space: nowrap;
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: 0 0;
    position: relative;
    text-transform: uppercase;
    padding: 20px;
    height: 40px;
    line-height: 1;
    top: -40px;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    opacity: 0
}

@media (max-width:767px) {
    body .leftside .menu-toggler {
        left: calc(100% - 55px)
    }
}

body .leftside .menu-toggler .fa-times,
body .leftside .menu-toggler:hover {
    transition: all .2s
}

body .leftside .profile .profile-img {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 1rem
}

body .leftside .profile .profile-img img {
    border-radius: 50%;
    max-width: 130px;
    margin: auto;
    z-index: 2;
    box-shadow: 0 5px 10px -2px rgba(0, 0, 0, .25)
}

body .leftside .profile .profile-img .btn-profile {
    background: #202020;
    height: 48px;
    width: 48px;
    display: inline-block;
    margin: 0 2px;
    text-align: center;
    font-size: 1.5rem;
    line-height: 48px;
    border-radius: 50%;
    color: #fff;
    position: relative
}

body .leftside .profile .profile-data {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: 1rem 0 0 1rem;
    text-align: center
}

body .leftside .profile .profile-data .user-info {
    background: #fcfcfc;
    padding: .5rem;
    margin-bottom: 15px;
    box-shadow: -5px 3px 10px -2px rgba(0, 0, 0, .1);
    border-radius: 50px;
    margin-top: -20px
}

body .leftside .profile .profile-data .user-info .sel-name {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1
}

body .leftside .profile .profile-data .user-info .sel-number {
    font-size: .8rem;
    color: #b9b9b9
}

body .leftside .profile .profile-data .sel-status {
    font-style: italic;
    font-size: .8rem;
    display: block;
    color: #fff
}

body .leftside .profile .profile-data .sel-status.offline .bullet {
    background: #b9b9b9;
    height: 26px;
    width: 26px;
    border-radius: 50%;
    display: inline-block;
    top: 17px;
    position: absolute;
    left: calc(50% + 38px);
    z-index: 9;
    border: 2px solid #fff
}

@media (min-height:740px) {
    body .leftside .profile .profile-data .sel-status.offline .bullet {
        top: 2px
    }
}

body .leftside .profile .profile-data .sel-status.offline .staco {
    display: none
}

body .leftside .profile .profile-data .sel-status.offline .stadeco {
    display: inline-block;
    font-weight: 700;
    font-style: normal
}

body .leftside .profile .profile-data .sel-status.online .bullet {
    background: #a1d568;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    display: inline-block;
    top: 17px;
    position: absolute;
    left: calc(50% + 35px);
    z-index: 9;
    border: 2px solid #fff
}

@media (min-height:740px) {
    body .leftside .profile .profile-data .sel-status.online .bullet {
        top: 2px
    }
}

body .leftside .profile .profile-data .sel-status.online .staco {
    display: inline-block;
    font-weight: 700;
    font-style: normal
}

body .leftside .profile .profile-data .sel-status.online .stadeco {
    display: none
}

body .leftside .profile .profile-data .sel-battery {
    font-style: italic;
    font-size: .8rem;
    display: block;
    color: #fff
}

body .leftside .profile .profile-data .sel-battery svg {
    height: 40px;
    width: 40px;
    margin: -10px -5px -15px -7px
}

body .leftside .profile .profile-data .sel-battery[data-battery="0"] .empty,
body .leftside .profile .profile-data .sel-battery[data-battery="0"] .sta1 {
    display: inline-block
}

body .leftside .profile .profile-data .sel-battery[data-battery="0"] .empty span,
body .leftside .profile .profile-data .sel-battery[data-battery="0"] .sta1 span {
    font-weight: 700;
    font-style: normal
}

body .leftside .profile .profile-data .sel-battery[data-battery="0"] .full,
body .leftside .profile .profile-data .sel-battery[data-battery="0"] .half,
body .leftside .profile .profile-data .sel-battery[data-battery="0"] .quarter,
body .leftside .profile .profile-data .sel-battery[data-battery="0"] .sta2,
body .leftside .profile .profile-data .sel-battery[data-battery="0"] .sta3,
body .leftside .profile .profile-data .sel-battery[data-battery="0"] .sta4,
body .leftside .profile .profile-data .sel-battery[data-battery="0"] .sta5,
body .leftside .profile .profile-data .sel-battery[data-battery="0"] .three-quarters {
    display: none
}

body .leftside .profile .profile-data .sel-battery[data-battery="33"] .quarter,
body .leftside .profile .profile-data .sel-battery[data-battery="33"] .sta2 {
    display: inline-block
}

body .leftside .profile .profile-data .sel-battery[data-battery="33"] .quarter i,
body .leftside .profile .profile-data .sel-battery[data-battery="33"] .quarter span,
body .leftside .profile .profile-data .sel-battery[data-battery="33"] .sta2 i,
body .leftside .profile .profile-data .sel-battery[data-battery="33"] .sta2 span {
    font-weight: 700;
    font-style: normal
}

body .leftside .profile .profile-data .sel-battery[data-battery="33"] .empty,
body .leftside .profile .profile-data .sel-battery[data-battery="33"] .full,
body .leftside .profile .profile-data .sel-battery[data-battery="33"] .half,
body .leftside .profile .profile-data .sel-battery[data-battery="33"] .sta1,
body .leftside .profile .profile-data .sel-battery[data-battery="33"] .sta3,
body .leftside .profile .profile-data .sel-battery[data-battery="33"] .sta4,
body .leftside .profile .profile-data .sel-battery[data-battery="33"] .sta5,
body .leftside .profile .profile-data .sel-battery[data-battery="33"] .three-quarters {
    display: none
}

body .leftside .profile .profile-data .sel-battery[data-battery="50"] .half,
body .leftside .profile .profile-data .sel-battery[data-battery="50"] .sta3 {
    display: inline-block
}

body .leftside .profile .profile-data .sel-battery[data-battery="50"] .half i,
body .leftside .profile .profile-data .sel-battery[data-battery="50"] .half span,
body .leftside .profile .profile-data .sel-battery[data-battery="50"] .sta3 i,
body .leftside .profile .profile-data .sel-battery[data-battery="50"] .sta3 span {
    font-weight: 700;
    font-style: normal
}

body .leftside .profile .profile-data .sel-battery[data-battery="50"] .empty,
body .leftside .profile .profile-data .sel-battery[data-battery="50"] .full,
body .leftside .profile .profile-data .sel-battery[data-battery="50"] .quarter,
body .leftside .profile .profile-data .sel-battery[data-battery="50"] .sta1,
body .leftside .profile .profile-data .sel-battery[data-battery="50"] .sta2,
body .leftside .profile .profile-data .sel-battery[data-battery="50"] .sta4,
body .leftside .profile .profile-data .sel-battery[data-battery="50"] .sta5,
body .leftside .profile .profile-data .sel-battery[data-battery="50"] .three-quarters {
    display: none
}

body .leftside .profile .profile-data .sel-battery[data-battery="66"] .sta4,
body .leftside .profile .profile-data .sel-battery[data-battery="66"] .three-quarters {
    display: inline-block
}

body .leftside .profile .profile-data .sel-battery[data-battery="66"] .sta4 i,
body .leftside .profile .profile-data .sel-battery[data-battery="66"] .sta4 span,
body .leftside .profile .profile-data .sel-battery[data-battery="66"] .three-quarters i,
body .leftside .profile .profile-data .sel-battery[data-battery="66"] .three-quarters span {
    font-weight: 700;
    font-style: normal
}

body .leftside .profile .profile-data .sel-battery[data-battery="66"] .empty,
body .leftside .profile .profile-data .sel-battery[data-battery="66"] .full,
body .leftside .profile .profile-data .sel-battery[data-battery="66"] .half,
body .leftside .profile .profile-data .sel-battery[data-battery="66"] .quarter,
body .leftside .profile .profile-data .sel-battery[data-battery="66"] .sta1,
body .leftside .profile .profile-data .sel-battery[data-battery="66"] .sta2,
body .leftside .profile .profile-data .sel-battery[data-battery="66"] .sta3,
body .leftside .profile .profile-data .sel-battery[data-battery="66"] .sta5 {
    display: none
}

body .leftside .profile .profile-data .sel-battery[data-battery="99"] .full,
body .leftside .profile .profile-data .sel-battery[data-battery="99"] .sta5 {
    display: inline-block
}

body .leftside .profile .profile-data .sel-battery[data-battery="99"] .full i,
body .leftside .profile .profile-data .sel-battery[data-battery="99"] .full span,
body .leftside .profile .profile-data .sel-battery[data-battery="99"] .sta5 i,
body .leftside .profile .profile-data .sel-battery[data-battery="99"] .sta5 span {
    font-weight: 700;
    font-style: normal
}

body .leftside .profile .profile-data .sel-battery[data-battery="99"] .empty,
body .leftside .profile .profile-data .sel-battery[data-battery="99"] .half,
body .leftside .profile .profile-data .sel-battery[data-battery="99"] .quarter,
body .leftside .profile .profile-data .sel-battery[data-battery="99"] .sta1,
body .leftside .profile .profile-data .sel-battery[data-battery="99"] .sta2,
body .leftside .profile .profile-data .sel-battery[data-battery="99"] .sta3,
body .leftside .profile .profile-data .sel-battery[data-battery="99"] .sta4,
body .leftside .profile .profile-data .sel-battery[data-battery="99"] .three-quarters {
    display: none
}

body .leftside .header-devices {
    border-radius: 0 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .7rem 0 .7rem 1rem
}

body .leftside .header-devices h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    line-height: 1;
    color: #fff;
    text-transform: uppercase
}

body .leftside .header-devices a {
    height: 40px;
    width: 40px;
    position: relative;
    background: #fff;
    border: none;
    margin-left: 5px;
    transition: all .2s
}

body .leftside .header-devices a i {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 1rem;
    color: #202020
}

body .leftside .header-devices a svg {
    height: 46px;
    width: 46px;
    position: absolute;
    top: -3px;
    left: -3px
}

body .leftside .header-devices a:active,
body .leftside .header-devices a:focus,
body .leftside .header-devices a:hover {
    background: #fff!important;
    transition: all .2s
}

body .leftside .devices {
    box-shadow: -5px 3px 10px -2px rgba(0, 0, 0, .2);
    max-height: 350px;
    overflow: auto;
    border-radius: 0 20px 20px 0
}

body .leftside .devices ul {
    list-style-position: inside;
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin-bottom: 0;
    border-radius: 0 20px 20px 0;
    overflow: hidden
}

body .leftside .devices ul li {
    background-color: #fff;
    padding: .75rem;
    cursor: pointer;
    transition: .05s ease-out;
    position: relative;
    transition: all .2s
}

body .leftside .devices ul li .pic {
    width: 4rem;
    min-width: 4rem;
    float: left
}

body .leftside .devices ul li .pic img {
    border-radius: 100%;
    width: inherit;
    position: relative
}

body .leftside .devices ul li .data {
    padding-left: 20px
}

body .leftside .devices ul li .data .status {
    border-radius: 100%;
    width: 1.2rem;
    height: 1.2rem;
    top: 3.5rem;
    left: 4.1rem;
    display: block;
    position: absolute;
    transition: all .2s
}

body .leftside .devices ul li .data .status.online {
    background: #a1d568
}

body .leftside .devices ul li .data .status.offline {
    background: #b9b9b9
}

body .leftside .devices ul li .data .battery svg {
    position: absolute;
    left: 3.55rem;
    top: 0;
    width: 40px;
    transition: all .2s;
    height: 40px
}

body .leftside .devices ul li .data .name {
    font-size: 1.1rem;
    color: #000;
    font-weight: 700;
    line-height: 1
}

body .leftside .devices ul li .data .phone {
    color: #b9b9b9;
    font-size: .9rem
}

body .leftside .devices ul li:nth-child(2n) {
    background: #fcfcfc
}

body .leftside .devices ul li:hover {
    padding-left: 1.25rem;
    padding-right: .25rem;
    transition: all .2s
}

body .leftside .devices ul li:hover .data .status {
    left: 4.6rem;
    transition: all .2s
}

body .leftside .devices ul li:hover .data .battery svg {
    left: 4.05rem;
    transition: all .2s
}

body .leftside .devices ul li.sel {
    background-color: #202020
}

body .leftside .devices ul li.sel .data * {
    color: #fff
}

body .leftside .devices ul li.sel .data .status {
    box-shadow: 0 3px 11px -4px rgba(0, 0, 0, .8)
}

body .leftside .devices ul li.sel .pic img {
    box-shadow: 0 3px 11px -4px rgba(0, 0, 0, .5)
}

body .leftside .big-add-contact {
    width: 100%;
    text-align: center;
    display: block;
    padding-left: 1rem
}

body .leftside .big-add-contact i {
    background: #fff;
    height: 60px;
    width: 60px;
    font-size: 30px;
    text-align: center;
    line-height: 60px;
    border-radius: 30px;
    color: #202020;
    transition: all .2s;
    cursor: pointer
}

body .leftside .text-add-device {
    text-align: center;
    padding-left: 1rem;
    color: #fff;
    font-size: .8rem;
    margin-top: .2rem
}

body .leftside .assistance,
body .leftside .buy-device {
    display: block;
    text-align: left;
    margin: 15px auto auto 15px;
    color: #fff;
    text-decoration: none;
    font-size: .8rem;
    border: 1px solid transparent;
    padding: .25rem;
    line-height: 16px;
    transition: all .2s
}

body .leftside .assistance i,
body .leftside .buy-device i {
    font-size: 1.5rem;
    display: block;
    width: 45px;
    margin-right: 20px;
    float: left;
    border-right: 2px solid #fff;
    height: 35px;
    line-height: 35px;
    transition: all .2s
}

body .leftside .assistance span,
body .leftside .buy-device span {
    display: block;
    font-weight: 700;
    transition: all .2s
}

body .leftside .assistance:hover,
body .leftside .buy-device:hover {
    color: #fff;
    transition: all .2s
}

body .leftside .assistance:hover i,
body .leftside .assistance:hover span,
body .leftside .buy-device:hover i,
body .leftside .buy-device:hover span {
    transition: all .2s
}

body .rightside #map-marker {
    position: absolute
}

body .rightside #map-marker .marker-wrap {
    overflow: hidden;
    width: 70px;
    height: 70px;
    margin-top: -14px;
    border-radius: 100% 100% 0;
    padding: 4px;
    transform: rotate(45deg)
}

body .rightside #map-marker:after {
    background: #b9b9b9
}

body .rightside #map-marker.online:after,
body .rightside #map-marker:after {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    top: -13px;
    right: -2px;
    border-radius: 50%;
    border: 2px solid #fff
}

body .rightside #map-marker.online:after {
    background: #a1d568
}

body .rightside #map-marker img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    margin: 0;
    padding: 2px;
    transform: rotate(-45deg);
    display: block;
    box-shadow: 0 0 0 50px #666
}

body .rightside .zoom {
    text-align: center;
    width: 100%;
    display: inline-block;
    position: relative;
    margin-top: 1rem;
    margin-bottom: 2rem
}

body .rightside .zoom span {
    background: #f3f3f3;
    padding: 0 1.5rem;
    z-index: 2;
    position: relative;
    color: #b9b9b9
}

body .rightside .zoom:after {
    content: "";
    height: 1px;
    width: 100%;
    left: 0;
    top: 60%;
    position: absolute;
    background: #b9b9b9;
    opacity: .25
}

body .rightside .custom-cols>* {
    padding-left: 7.5px!important;
    padding-right: 7.5px!important
}

body .rightside .custom-cols>* .dock {
    border-radius: 15px;
    max-width: 330px;
    margin: auto!important
}

@media (min-width:768px) {
    body .rightside .custom-cols>* .dock {
        max-width: 660px
    }
}

@media (min-width:1200px) {
    body .rightside .custom-cols>* .dock {
        max-width: 1140px
    }
}

body .rightside .custom-cols>* .dock>* {
    display: flex;
    flex-direction: column;
    align-items: center
}

body .rightside .custom-cols>* .dock>* .kiwip-rose {
    background: #8a084c;
    background: -moz-linear-gradient(45deg, #8a084c 0, #b70662 33%, #e00074 66%, #f165ad 100%);
    background: -webkit-linear-gradient(45deg, #8a084c, #b70662 33%, #e00074 66%, #f165ad);
    background: linear-gradient(45deg, #8a084c, #b70662 33%, #e00074 66%, #f165ad);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="$rose-darkest", endColorstr="$rose-light", GradientType=1);
    background-position: 100%!important;
    background-size: 200%!important
}

body .rightside .custom-cols>* .dock>* .kiwip-jaune {
    background: #ba7a1c;
    background: -moz-linear-gradient(45deg, #ba7a1c 0, #d69327 33%, #f8b232 66%, #ffca76 100%);
    background: -webkit-linear-gradient(45deg, #ba7a1c, #d69327 33%, #f8b232 66%, #ffca76);
    background: linear-gradient(45deg, #ba7a1c, #d69327 33%, #f8b232 66%, #ffca76);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="$jaune-darkest", endColorstr="$rose-light", GradientType=1);
    background-position: 100%!important;
    background-size: 200%!important
}

body .rightside .custom-cols>* .dock>* .kiwip-turquoise {
    background: #005b52;
    background: -moz-linear-gradient(45deg, #005b52 0, #007c76 33%, #009c97 66%, #66c4c1 100%);
    background: -webkit-linear-gradient(45deg, #005b52, #007c76 33%, #009c97 66%, #66c4c1);
    background: linear-gradient(45deg, #005b52, #007c76 33%, #009c97 66%, #66c4c1);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="$turquoise-darkest", endColorstr="$rose-light", GradientType=1);
    background-position: 100%!important;
    background-size: 200%!important
}

body .rightside .custom-cols>* .dock>* .kiwip-bleu {
    background: #144e72;
    background: -moz-linear-gradient(45deg, #144e72 0, #185f93 33%, #2171b8 66%, #4995ce 100%);
    background: -webkit-linear-gradient(45deg, #144e72, #185f93 33%, #2171b8 66%, #4995ce);
    background: linear-gradient(45deg, #144e72, #185f93 33%, #2171b8 66%, #4995ce);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="$bleu-darkest", endColorstr="$bleu-light", GradientType=1);
    background-position: 100%!important;
    background-size: 200%!important
}

body .rightside .custom-cols>* .dock>* .kiwip-violet {
    background: #510b4f;
    background: -moz-linear-gradient(45deg, #510b4f 0, #6d156b 33%, #951a81 66%, #bf58bf 100%);
    background: -webkit-linear-gradient(45deg, #510b4f, #6d156b 33%, #951a81 66%, #bf58bf);
    background: linear-gradient(45deg, #510b4f, #6d156b 33%, #951a81 66%, #bf58bf);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="$violet-darkest", endColorstr="$violet-light", GradientType=1);
    background-position: 100%!important;
    background-size: 200%!important
}

body .rightside .custom-cols>* .dock>* .kiwip-orange {
    background: #b94c19;
    background: -moz-linear-gradient(45deg, #b94c19 0, #dc662e 33%, #ff6f2b 66%, #ff8b54 100%);
    background: -webkit-linear-gradient(45deg, #b94c19, #dc662e 33%, #ff6f2b 66%, #ff8b54);
    background: linear-gradient(45deg, #b94c19, #dc662e 33%, #ff6f2b 66%, #ff8b54);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="$orange-darkest", endColorstr="$orange-light", GradientType=1);
    background-position: 100%!important;
    background-size: 200%!important
}

body .rightside .custom-cols>* .dock>* .kiwip-vert {
    background: #197200;
    background: -moz-linear-gradient(45deg, #197200 0, #1e9b00 33%, #20ce00 66%, #77f958 100%);
    background: -webkit-linear-gradient(45deg, #197200, #1e9b00 33%, #20ce00 66%, #77f958);
    background: linear-gradient(45deg, #197200, #1e9b00 33%, #20ce00 66%, #77f958);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="$vert-darkest", endColorstr="$vert-light", GradientType=1);
    background-position: 100%!important;
    background-size: 200%!important
}

body .rightside .custom-cols>* .dock>.has-notif:before {
    content: "";
    position: absolute;
    top: 7px;
    left: calc(50% + 15px);
    width: 16px;
    height: 16px;
    background: #ff2c53;
    z-index: 9;
    border-radius: 50%;
    border: 2px solid #f3f3f3;
    animation: newnotif 4s infinite
}

@keyframes newnotif {
    0% {
        transform: scale(1)
    }
    5% {
        transform: scale(1)
    }
    8% {
        transform: scale(1.3)
    }
    10% {
        transform: scale(.8)
    }
    12% {
        transform: scale(1.3)
    }
    15% {
        transform: scale(1)
    }
    to {
        transform: scale(1)
    }
}

body .rightside .custom-cols>* .dock>* i {
    font-size: 1.5rem;
    color: #fff;
    height: 3.5rem;
    width: 3.5rem;
    text-align: center;
    line-height: 3.5rem;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    transition: all .2s
}

body .rightside .custom-cols>* .dock>* svg {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    transition: all .2s;
    padding: .2rem
}

body .rightside .custom-cols>* .dock>* span {
    background: #efefef;
    padding: .5rem 1rem;
    border-radius: 20px;
    margin-top: -.3rem;
    color: #000;
    text-transform: uppercase;
    font-size: .7rem;
    text-align: center;
    box-shadow: 0 10px 20px -15px rgba(0, 0, 0, .35), inset 5px 10px 5px -10px #fff, inset -3px -10px 5px -10px #cecece;
    white-space: nowrap
}

body .rightside .custom-cols>* .dock>:hover {
    cursor: pointer
}

body .rightside .custom-cols>* .dock>:hover i,
body .rightside .custom-cols>* .dock>:hover svg {
    transition: all .2s;
    transform: rotate(-20deg)
}

body .rightside .custom-cols>* .dock>:hover i.kiwip-bleu,
body .rightside .custom-cols>* .dock>:hover i.kiwip-jaune,
body .rightside .custom-cols>* .dock>:hover i.kiwip-orange,
body .rightside .custom-cols>* .dock>:hover i.kiwip-rose,
body .rightside .custom-cols>* .dock>:hover i.kiwip-turquoise,
body .rightside .custom-cols>* .dock>:hover i.kiwip-vert,
body .rightside .custom-cols>* .dock>:hover i.kiwip-violet,
body .rightside .custom-cols>* .dock>:hover svg.kiwip-bleu,
body .rightside .custom-cols>* .dock>:hover svg.kiwip-jaune,
body .rightside .custom-cols>* .dock>:hover svg.kiwip-orange,
body .rightside .custom-cols>* .dock>:hover svg.kiwip-rose,
body .rightside .custom-cols>* .dock>:hover svg.kiwip-turquoise,
body .rightside .custom-cols>* .dock>:hover svg.kiwip-vert,
body .rightside .custom-cols>* .dock>:hover svg.kiwip-violet {
    background-position: 0!important
}

body .rightside .featured {
    background: #000;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, .15);
    height: 100%;
    color: #fff
}

body .rightside .featured.activity-feat {
    background: linear-gradient(45deg, #2171b8, #144e72)
}

body .rightside .featured.messages-feat {
    background: linear-gradient(45deg, #009c97, #005b52)
}

body .rightside .featured h3 {
    font-size: 2rem;
    font-weight: 100;
    background: hsla(0, 0%, 100%, .2);
    padding: .5rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem
}

body .rightside .featured h4 {
    font-size: 1.5rem;
    font-weight: 100
}

body .rightside .featured h4 span {
    font-weight: 700
}

body .rightside .featured p span {
    font-weight: 700;
    font-size: 3rem
}

body .rightside .featured hr {
    opacity: .2
}

body .rightside .featured a {
    color: #202020;
    background: #fff;
    display: inline-block;
    position: relative;
    float: right;
    text-decoration: none;
    line-height: 40px;
    margin-bottom: 1.5rem;
    margin-top: 10px;
    padding: 0 1.5rem;
    border-radius: 20px;
    box-shadow: 0 15px 25px -15px rgba(0, 0, 0, .5)
}

body .col {
    padding: 0 .5rem
}

body hr {
    margin-top: .75rem;
    margin-bottom: .75rem;
    border: 0;
    border-top: 1px solid #e8e8e8;
    width: 100%
}

body .navbar-nav>li {
    padding: 0 1rem
}

body .btn {
    border-radius: 5rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    font-weight: 100;
    font-size: 95%
}

body .cnt-center {
    margin: 10vh auto 3rem;
    width: calc(100% - 30px);
    min-width: 290px;
    max-width: 800px;
    background: #fff;
    background: -moz-linear-gradient(0deg, #fff 0, #f2f2f2 100%);
    background: -webkit-linear-gradient(0deg, #fff, #f2f2f2);
    background: linear-gradient(0deg, #fff, #f2f2f2);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e8e8e8", endColorstr="#f2f2f2", GradientType=1);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
    border-radius: 20px;
    padding: 0 2rem 2rem;
    position: relative
}

body .cnt-center.login {
    max-width: 500px
}

body .cnt-center.login h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #f8b232;
    font-family: Comfortaa, cursive
}

body .cnt-center.login .img-wrap {
    width: 100px;
    height: 100px;
    margin: -50px 0 -10px;
    padding: 25px;
    border-radius: 50%;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .25);
    display: inline-flex;
    background-color: #e9e9e9;
    box-shadow: inset 5px 10px 10px -5px #fff, inset 0 -10px 20px -10px rgba(0, 0, 0, .15), 0 12px 20px -10px rgba(0, 0, 0, .12)
}

body .cnt-center.login a {
    font-weight: 700;
    text-decoration: underline;
    color: #2171b8
}

body .cnt-center.login label {
    display: inline-block;
    margin-bottom: .5rem;
    font-size: .8rem;
    font-weight: 100;
    margin-left: 1rem;
    line-height: 1.2;
    color: #202020
}

body .cnt-center.login label input {
    top: 1px;
    position: relative;
    margin-left: -1rem
}

body .cnt-center.login .btn-login {
    font-size: 1.2rem;
    padding: .5rem 2rem;
    font-weight: 600;
    color: #fff;
    background: #f8b232;
    border: none
}

body .cnt-center.login .btn-login:focus,
body .cnt-center.login .btn-login:hover {
    background: #d69327
}

body .cnt-center form {
    margin-bottom: 1.5rem
}

body .cnt-center form label.chbx {
    display: inline
}

body .cnt-center form ul.form-errors {
    list-style: none inside;
    padding-left: 0;
    color: #d00
}

body .cnt-center form .error>input {
    border-color: #d00
}

body .cnt-center form .form-group label {
    color: #9c9c9c
}

body .cnt-center form .form-group input {
    background: #ececec;
    border: none;
    border-radius: 50px;
    box-shadow: inset 5px 10px 15px -10px rgba(0, 0, 0, .15), 5px 8px 7px -7px #fff;
    padding: .375rem 1rem
}

body .cnt-center form .form-group input:focus {
    box-shadow: 0 0 0 1px #d69327, 0 0 0 4px #ffca76
}

body .form-group .text-muted {
    color: #c1c1c1!important;
    font-style: italic;
    margin-left: 1rem
}

footer {
    background-color: #eaebec;
    padding: .5rem;
    font-size: .7rem;
    color: #000;
    text-align: center;
    position: relative;
    width: calc(100% + 1rem);
    margin-left: -.5rem;
    margin-right: -.5rem
}

footer img {
    height: 44px;
    width: auto;
    opacity: .6
}

footer span {
    opacity: .6
}

footer a {
    color: #000!important;
    text-decoration: underline!important;
    margin: .25rem .5rem
}

.my-kiwipi a {
    text-decoration: underline;
    color: #007f78
}

.my-kiwipi a:hover {
    color: #004c46
}

.my-kiwipi .disabled {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 200;
    display: none
}

.my-kiwipi .disabled-over {
    display: none
}

.my-kiwipi .map {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    margin-left: -7.5px;
    margin-right: -7.5px;
    background: #f2f1f0;
    box-shadow: 10px -50px 10px 50px hsla(0, 0%, 100%, .8)
}

.my-kiwipi .map:after {
    bottom: 0;
    height: 30px;
    box-shadow: inset 0 -20px 20px -30px rgba(0, 0, 0, .5)
}

.my-kiwipi .map:after,
.my-kiwipi .map:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #dde1e4;
    pointer-events: none
}

.my-kiwipi .map:before {
    top: 100%;
    height: 20px;
    box-shadow: inset 0 -24px 20px -30px rgba(0, 0, 0, .5)
}

.my-kiwipi #map {
    height: calc(100vh - 200px);
    min-height: 30rem
}

@media (min-height:740px) {
    .my-kiwipi #map {
        min-height: 40rem
    }
}

.my-kiwipi #mapButtons {
    z-index: 99;
    background: #fff;
    border: 0;
    margin: 15px 10px;
    padding: 0;
    position: absolute;
    cursor: pointer;
    user-select: none;
    border-radius: 2px;
    height: 45px;
    width: 45px;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, .3);
    overflow: hidden
}

.my-kiwipi #mapButtons a {
    width: 45px;
    height: 45px;
    display: flex;
    float: left;
    color: #666;
    align-items: center;
    justify-content: center
}

.my-kiwipi #mapButtons a>i {
    font-size: 155%;
    padding: 0
}

.menu-label {
    opacity: .7;
    background-color: #666;
    color: #fff;
    font-weight: 100;
    font-size: 100%;
    border-radius: 0 0 1rem 1rem;
    width: 8rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    text-transform: uppercase;
    z-index: 150;
    transform: rotate(-90deg);
    position: relative;
    left: 16.25rem;
    top: 6rem;
    display: none;
    box-shadow: 0 4px 5px 1px rgba(0, 0, 0, .3)
}

@media (max-width:1000px) {
    .menu-label {
        display: block
    }
    .my-kiwipi .col-lf {
        margin: 1rem 0 0 -20.25rem!important;
        z-index: 200;
        position: relative;
        border-radius: 0 .5rem .5rem 0;
        padding: 0
    }
    .my-kiwipi .col-lf.open {
        right: -20rem
    }
    .my-kiwipi .col-1p2 {
        padding-right: .25rem
    }
    .my-kiwipi .col-lf .cnt.cnt-1 {
        border-radius: 0 .5rem .5rem 0
    }
    .my-kiwipi .cnt {
        margin-bottom: .25rem
    }
    .my-kiwipi .col-lf h2.h2cnt,
    .my-kiwipi h2.h2cnt {
        display: none
    }
    .my-kiwipi .col-rg {
        width: 100%
    }
    .my-kiwipi .txt-lbl {
        display: none
    }
    .my-kiwipi #map {
        min-height: 30rem
    }
    .my-kiwipi .disabled-over {
        display: block
    }
}

input[readonly=true],
input[readonly=true]:focus {
    opacity: .5!important;
    color: #b5b5b5;
    cursor: not-allowed
}

.alert-confirm {
    padding: 0;
    color: #a1d568;
    background: transparent;
    border: none
}

.mail-confirmation,
.phone-confirmation {
    background: #e8e8e8;
    border-radius: 15px;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    color: #202020;
    box-shadow: inset 4px 8px 30px -30px rgba(0, 0, 0, .5), 4px 6px 5px -5px #fff
}

.mail-confirmation .confirm-title,
.phone-confirmation .confirm-title {
    font-size: 1.5rem;
    position: relative;
    z-index: 2;
    line-height: 1.8rem;
    margin-bottom: 10px
}

.mail-confirmation a,
.phone-confirmation a {
    background: #202020;
    color: #fff!important;
    border: none;
    margin-top: 10px
}

.mail-confirmation a:hover,
.phone-confirmation a:hover {
    background: #000
}

.mail-confirmation i,
.phone-confirmation i {
    position: absolute;
    top: -15px;
    left: -20px;
    font-size: 110px;
    font-weight: 100;
    color: #fff;
    opacity: .35
}

.mail-confirmation form,
.phone-confirmation form {
    margin-bottom: 5px!important
}

.mail-confirmation .form-group input,
.phone-confirmation .form-group input {
    background: #e0e0e0!important;
    z-index: 9;
    margin-top: 15px;
    position: relative
}

.mail-confirmation .form-group label,
.phone-confirmation .form-group label {
    display: none!important
}

.mail-confirmation.ok,
.phone-confirmation.ok {
    background: #a1d568;
    color: #fff
}

.stepwrap {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: calc(100% - 30px);
    max-width: 500px;
    background: rgba(0, 0, 0, .05);
    margin: 8vh auto -6vh;
    padding: 15px 0;
    border-radius: 15px;
    box-shadow: inset 6px 8px 20px -20px #000, 5px 6px 9px -10px #fff
}

.stepwrap .step-one,
.stepwrap .step-two {
    margin: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    color: #fff;
    font-size: 13px;
    opacity: .4
}

.stepwrap .step-one.active-step,
.stepwrap .step-two.active-step {
    opacity: 1
}

.stepwrap .step-one span,
.stepwrap .step-two span {
    background: #f8b232;
    height: 30px;
    width: 30px;
    display: inline-block;
    line-height: 26px;
    margin-right: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    color: #fff;
    font-weight: 600;
    font-size: 15px
}