@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/opensans-semibold-webfont.woff2') format('woff2'), url('./fonts/opensans-semibold-webfont.woff') format('woff'), url('./fonts/opensans-semibold-webfont.ttf') format('truetype'), url('./fonts/opensans-semibold-webfont.svg#open_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/opensans-light-webfont.woff2') format('woff2'), url('./fonts/opensans-light-webfont.woff') format('woff'), url('./fonts/opensans-light-webfont.ttf') format('truetype'), url('./fonts/opensans-light-webfont.svg#open_sanslight') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/opensans-regular-webfont.woff2') format('woff2'), url('./fonts/opensans-regular-webfont.woff') format('woff'), url('./fonts/opensans-regular-webfont.ttf') format('truetype'), url('./fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body {
    height: 100% !important;
    overflow-y: hidden !important;
    font-family: 'Open Sans';
}

.pt0 {
    padding-top: 0
}

.pb0 {
    padding-bottom: 0
}

.mt0 {
    margin-top: 0
}

.mb0 {
    margin-bottom: 0
}

.vocalcom-right-top-title h1 {
    display: block;
    font-size: 34px;
    line-height: 40px;
    font-weight: 400;
    color: #fff;
    letter-spacing: -1px;
    text-align: center;
    margin-top: 45px
}

.datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active:active {
    background-color: #055864;
    border-color: #055864
}

.datepicker.datepicker-orient-top {
    margin-top: -5px
}

.datepicker.datepicker-orient-bottom {
    margin-top: 10px
}

@media only screen and (max-width:1400px) {
    .vocalcom-right-top-title h1 {
        font-size: 28px
    }
}

@media only screen and (max-width:1200px) {
    .vocalcom-right-top-title h1 {
        font-size: 26px
    }
}

@media only screen and (max-width:1100px) {
    .vocalcom-right-top-title h1 {
        font-size: 24px
    }
}

.login-title {
    max-width: 80%;
    padding-left: 40px;
    font-weight: 200 !important
}

    .login-title h1 {
        font-weight: 200 !important
    }

    .login-title h1 {
        font-size: 35px;
        line-height: 120%;
        font-weight: 600;
        color: #fff
    }

    .login-title p, .login-title li {
        font-size: 18px;
        line-height: 130%;
        font-style: normal;
        font-weight: 300;
        color: #fff
    }

    .login-title ul {
        margin-top: 15px
    }

    .login-title li {
        margin-left: 20px;
        list-style-position: outside;
        margin-bottom: 5px
    }

.hide {
    display: none !important
}

#login {
    display: flex;
    justify-content: center;
    user-select: none;
}
    #login .language {
        position: absolute;
        right: 12px;
        top: 12px;
        cursor: pointer;
        margin: 0;
        color: #2c2c2c;
        font-size: 14px;
    }
        #login .language .mdi {
            position: absolute;
            pointer-events: none;
            left: 0;
            top: 1px;
        }
#login #culture {
    background: unset;
    border: unset;
    outline: none;
    text-align-last: right;
    padding-right: 6px;
    cursor: pointer;
}

#login .screen-wrapper {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 60px 36px;
    padding-bottom: 0;
    max-width: 450px;
    width: 90vw;
}

    #login .logo {
        margin: 0 auto;
        display: inline-block
    }

    #login .copyright {
        text-align: center;
        font-size: 12px;
        color: #888;
    }

    #login .login-form {
        border-radius: 2px;
        background: #fff;
        padding: 24px;
    }

    #login .form-group {
        margin-bottom: 16px;
        position: relative;
    }
    #login .form-group.buttons {
        margin: 0;
    }

    #login label {
        font-size: 12px;
        font-weight: 400;
        color: #5a5a5a;
        padding: 0;
    }

        #login label.remember {
            font-size: 14px
        }

    #login .form-group input, #login .form-group select {
        height: 44px;
        font-size: 12px;
        border: 1px solid #ccc;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 4px
    }

    #login .moreParam {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-weight: bold;
    }
        #login .moreParam .mdi {
            font-size: 22px;
            transition: .2s linear;
        }
            #login .moreParam .mdi.rotate {
                transform: rotate(-180deg);
            }
    #login .more{
        display: none;
    }

        #login .form-group input[type=text], #login .form-group input[type=password], #login .form-group input[type=email] {
            width: 100%
        }

    #login .radio-inline {
        cursor: pointer
    }

    #login .form-group input[type=checkbox] {
        height: auto;
        vertical-align: middle;
        width: auto;
        float: left;
        margin-right: 12px;
    }

    #login .form-group .desc {
        margin-bottom: 12px;
        font-size: 13px;
        line-height: 140%;
        text-align: left
    }

    #login #viewPassword {
        position: absolute;
        right: 8px;
        top: calc(50% - 7px);
        font-size: 17px;
        cursor: pointer;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .2s linear;
    }
    #login #viewPassword:hover {
        background: rgb(0 0 0 / 10%);
    }

    #login button, #login input.send, .hermes-form button {
        text-align: center;
        background-color: #0BBCCB;
        color: #fff;
        font-weight: 500;
        letter-spacing: .5px;
        border: none;
        cursor: pointer;
        font-size: 14px;
        width: 100% !important;
        line-height: 17px;
        padding: 12px 24px;
        border-radius: 4px;
        transition: .2s linear;
    }

        #login input.send:hover, #login button:hover{
            background-color: #055864;
        }

        #login button[disabled], #login input.send[disabled] {
            opacity: .4
        }

        #login button.waiting, .hermes-form button.waiting {
            background-color: #fff;
            color: #ccc;
            border: 1px solid #ccc;
            cursor: wait;
            height: 44px;
        }

    #login .error {
        color: #C23934;
        background: #fff;
        margin-bottom: 12px;
        font-size: 13px;
        line-height: 140%;
        text-align: left
    }

        #login .error a {
            color: #C23934;
            text-decoration: underline
        }

            #login .error a:hover {
                text-decoration: none
            }

    #login .not-customer {
        margin-top: 25px;
        color: #16325c;
        font-size: 14px;
        font-weight: 500
    }

.btn-style, a.button {
    background-color: #fff;
    border: 1px solid #D8DDE6;
    color: #0070d2;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500
}

    .btn-style:active, .btn-style:hover {
        text-decoration: none;
        background-color: #f4f6f9
    }

    #login .btn-style:hover, a.button:hover {
        background-color: #f4f6f9
    }

#login .btn-style, a.button {
    background-color: #fff;
    border: 1px solid #D8DDE6;
    color: #0070d2;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500
}

    #login .btn-style:hover, a.button:hover {
        background-color: #f4f6f9
    }

#login .btn-style {
    margin-left: 15px
}
#login .title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

    #login .title .mdi {
        font-size: 22px;
        color: #0bbccb;
        cursor: pointer;
        transition: .2s linear;
    }
        #login .title .mdi:hover {
            color: #055864;
        }

        #login .forgot-psw-frame {
            font-size: 12px;
            position: absolute;
            right: 0;
            top: calc(100% + 2px);
        }
        #login .forgot-psw-frame a {
            color: #0bbccb;
        }
            #login .forgot-psw-frame a:hover {
                color: #055864;
            }

        #resetPswForm {
            text-align: left;
            font-size: 12px
        }

    #resetPswForm .pass-tests ul {
        padding-left: 20px
    }

    #resetPswForm .pass-tests li {
        text-align: left;
        list-style: none;
        background: url(../img/icon-check-untick.png) no-repeat 20px center;
        background-size: 20px;
        line-height: 24px;
        padding-left: 50px;
        margin-top: 1px
    }

        #resetPswForm .pass-tests li:first-child {
            margin-top: 10px
        }

        #resetPswForm .pass-tests li.pass {
            background-image: url(../img/icon-check-tick-ok.png)
        }


.launcher {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%
}

    .launcher > .launcher-left {
        width: 50%;
        height: 100%;
        position: relative;
        background: #f4f6f9;
    }

    .launcher > .launcher-right {
        width: 50%;
        height: 100%;
        position: relative;
        background: url(../img/nuage.png) no-repeat center center,linear-gradient(to top,#009dc2,#0977a5);
        background-size: cover;
        display: grid;
        align-items: center;
        grid-template-rows: 1fr 5fr 1fr;
        grid-gap: 10%;
        padding: 20px
    }

@media (max-width:1200px) {
    .launcher > .launcher-left {
        width: 100%;
        min-width: 350px;
    }

    .launcher > .launcher-right {
        display: none
    }
}
@media (max-width:500px) {
    #login .screen-wrapper {
        padding: 60px 12px 0 12px;
        width: 100vw;
        min-width: 350px;
    }
    #login .screen-wrapper img {
        width: 90%;
    }
}

    .img-right {
        height: 100%;
        background: url(../img/illu.png) no-repeat center center;
        background-size: contain
    }

    #hermes {
        padding-left: 50px;
        height: 100%
    }

        #hermes.not-login {
            position: absolute;
            width: 50px;
            top: 0;
            left: 0
        }

        #hermes .rounded {
            border-radius: 4px
        }

        #hermes .grey-border, .modal .grey-border {
            border: 1px solid #D8DDE6
        }

        #hermes .full-width-size {
            width: 100%
        }

        #hermes .half-width-size {
            width: 49.9%;
            float: left
        }

        #hermes .flex-panels, .modal .flex-panels {
            display: flex
        }

        #hermes .left-menu {
            background: #055864;
            font-size: 10px;
            color: #e7e7e7;
            width: 50px;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            text-align: center;
            z-index: 3
        }

            #hermes .left-menu > ul {
                padding: 0;
                padding-top: 50px;
                background: url('../img/vocalcom-icon-128.png') no-repeat center 12px;
                background-size: 26px;
            }

                #hermes .left-menu > ul > li {
                    list-style: none;
                    padding: 15px 0;
                    line-height: 14px;
                    cursor: pointer;
                    border-right: 4px solid transparent;
                    border-left: 4px solid transparent;
                    position: relative
                }
            #hermes .left-menu .site-list .dropdown-toggle {
                display: block;
                padding: 15px 0;
                margin: -15px -4px;
            }

                    #hermes .left-menu > ul > li.active, #hermes .left-menu > ul > li:hover {
                        background: rgba(255,255,255,.1)
                    }

                    #hermes .left-menu > ul > li.active {
                        border-right-color: #0BBCCB
                    }

                    #hermes .left-menu > ul > li.vocalcom a {
                        display: inline-block;
                        background: url(../img/vocalcom-icon-128.png) no-repeat center transparent !important;
                        background-size: 30px !important;
                        height: 40px !important;
                        width: 40px !important;
                        text-indent: -999px
                    }

                    #hermes .left-menu > ul > li > a > .icon, #hermes .left-menu > ul > li > .icon {
                        display: block;
                        width: 20px;
                        height: 20px;
                        background-size: contain !important;
                        margin: 0 auto;
                        font-size: 24px
                    }

                        #hermes .left-menu > ul > li > a > .icon.mdi {
                            font-size: 20px;
                            color: #e7e7e7;
                            line-height: 22px
                        }

                    #hermes .left-menu > ul > li.home > a > .icon, #hermes .left-menu > ul > li.home > .icon {
                        background: url(../img/icon-home.png) no-repeat center
                    }

                    #hermes .left-menu > ul > li.workspace > a > .icon, #hermes .left-menu > ul > li.workspace > .icon {
                        background: url(../img/icon-apps-2.png) no-repeat center
                    }

                    #hermes .left-menu > ul > li.apps > a > .icon, #hermes .left-menu > ul > li.apps > .icon {
                        background: url(../img/icon-configuration.png) no-repeat center
                    }

                    #hermes .left-menu > ul > li.configuration > a > .icon, #hermes .left-menu > ul > li.configuration > .icon {
                        background: url(../img/icon-apps-admin.png) no-repeat center
                    }

                    #hermes .left-menu > ul > li.site-list > a > .icon, #hermes .left-menu > ul > li.site-list > .icon {
                        background: url(../img/icon-nav-sites-list-2.png) no-repeat center
                    }

                    #hermes .left-menu > ul > li.logout > a > .icon, #hermes .left-menu > ul > li.logout > .icon, #hermes .left-menu > ul > li.logout2 > a > .icon, #hermes .left-menu > ul > li.logout2 > .icon {
                        background: url(../img/icon-logout.png) no-repeat center
                    }

                    #hermes .left-menu > ul > li.callbar .icon {
                        background: url(../img/icon-apps.png) no-repeat center
                    }

                    #hermes .left-menu > ul > li.callbar {
                        position: absolute;
                        bottom: 30px;
                        width: 100%
                    }

            #hermes .left-menu .rightMenu {
                position: absolute;
                left: 46px;
                top: 0;
                padding: 0
            }

                #hermes .left-menu .rightMenu > li {
                    padding: 0;
                    margin: 5px 0
                }

        #hermes .screen {
            padding: 20px;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: grid;
            grid-template-rows: auto 1fr 1fr 1fr;
            grid-gap: 20px;
        }

    .modal .flex-panels .vc-panel {
        margin: 0 0 0 20px;
        width: 100%;
        background: #fff;
        position: relative
    }

        .modal .flex-panels .vc-panel:first-child {
            margin-left: 0
        }

    #hermes .screen .flex-panels .vc-panel {
        margin: 0 0 20px 20px;
        width: 100%;
        background: #fff;
        position: relative
    }

        #hermes .screen .flex-panels .vc-panel.row-free {
            padding: 20px
        }

        .modal .flex-panels .vc-panel.col-2, #hermes .screen .flex-panels .vc-panel.col-2 {
            width: 50%
        }

        .modal .flex-panels .vc-panel.row-3, #hermes .screen .flex-panels .vc-panel.row-3 {
            height: 100%;
        }

        #hermes .screen .flex-panels .vc-panel.row-free {
            height: auto
        }

        #hermes .screen .flex-panels .vc-panel.square:before {
            content: "";
            display: block;
            padding-top: 100%
        }

        #hermes .screen .flex-panels .vc-panel:first-child {
            margin-left: 0
        }

        #hermes .screen .flex-panels .vc-panel .panel-content, .modal .flex-panels .vc-panel .panel-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            align-items: center;
            text-align: center;
            display: flex
        }

        #hermes .screen .flex-panels .vc-panel.row-free .panel-content {
            position: relative;
            top: auto;
            left: auto;
            right: auto;
            bottom: auto
        }

    #hermes .screen .wrap, .modal .wrap {
        margin: 0 auto;
        font-size: 24px;
        line-height: 32px;
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center
    }

        #hermes .screen .wrap > span, .modal .wrap > span {
            width: 100%
        }

    #hermes .screen .button-panel span, .modal .button-panel span, #hermes .screen .vc-panel.with-icon span, .modal .vc-panel.with-icon span {
        display: block;
        white-space: nowrap
    }

    #hermes .screen .inline-box {
        display: inline-block
    }

    #hermes .tests-list {
        font-size: 14px;
        padding: 20px 10px;
        margin: 15px 0
    }

        #hermes .tests-list .form-group {
            margin-top: 10px
        }

            #hermes .tests-list .form-group:first-child {
                margin-top: 0
            }

    #hermes button {
        width: auto !important
    }

    #hermes .screen.tests .icon {
        display: block;
        width: 128px;
        height: 128px;
        background-size: contain !important;
        margin: 0 auto
    }

    #hermes .screen.tests .proxy .icon {
        background: url(../img/icon-tests-proxy.png) no-repeat center
    }

    #hermes .screen.tests .softphone .icon {
        background: url(../img/icon-tests-softphone.png) no-repeat center
    }

    #hermes .screen.tests .webservice .icon {
        background: url(../img/icon-tests-webservices.png) no-repeat center
    }

    #hermes .screen.tests .sharing .icon {
        background: url(../img/icon-tests-sharing.png) no-repeat center
    }

    #hermes .screen .button-panel img, #hermes .screen .vc-panel.with-icon img {
        width: auto;
        height: auto;
        max-height: 100%
    }

    #hermes .screen .button-panel.disabled img, #hermes .screen .button-panel.disabled .button-name, #hermes .screen .button-panel.disabled .icon-image {
        filter: grayscale(100%)
    }

#hermes .screen .admin-console.disabled {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.4;
}

#hermes .screen .button-panel, .modal .button-panel {
    cursor: pointer
}

    #hermes .screen .inside-button-panel {
        transition: all 0.2s ease-in-out;
        cursor: pointer;
        display: inline-block;
        width: 100%;
        height: auto;
        max-height: 100%
    }

    #hermes .screen.tests .test.active {
        background: rgba(11,188,203,.1)
    }

    #hermes .screen .action-panel .wrap, .modal .action-panel .wrap, #hermes .screen .button-panel .wrap, .modal .button-panel .wrap {
        transition: all 0.2s ease-in-out;
        padding: 0 10px 0
    }

    #hermes .screen .action-panel.enable:hover .wrap, .modal .button-panel:hover .wrap, #hermes .screen .button-panel:hover .wrap, #hermes .screen .inside-button-panel:hover {
        transform: scale(.9)
    }

    #hermes .screen .button-panel.disabled .wrap {
        opacity: .4
    }

    #hermes .screen .button-panel.disabled:hover .wrap {
        transform: none
    }

    #hermes .screen.tests .action-panel {
        background: #0bbccb;
        color: #fff
    }

        #hermes .screen.tests .action-panel.enable {
            cursor: pointer;
            opacity: 1
        }

        #hermes .screen.tests .action-panel .wrap {
            height: auto;
            padding: 0 !important
        }

        #hermes .screen.tests .action-panel .action-label {
            position: relative
        }

        #hermes .screen.tests .action-panel .progress {
            display: none;
            position: absolute;
            bottom: -30px;
            font-size: 20px;
            font-style: italic;
            width: 100%
        }

        #hermes .screen.tests .action-panel.in-progress .progress {
            display: block
        }

        #hermes .screen.tests .action-panel.in-progress .start {
            display: none
        }

        #hermes .screen.tests .action-panel .stop {
            display: none
        }

        #hermes .screen.tests .action-panel.in-progress .stop {
            display: inline-block
        }

    #hermes .screen.tests .vc-panel.test-status .panel-content {
        text-align: left
    }

    #hermes .screen.tests .vc-panel.test-status .wrap {
        padding: 20px;
        text-align: center
    }

    #hermes .screen.tests .vc-panel.test-status li {
        text-align: left;
        list-style: none;
        font-size: 24px;
        margin-top: 10px;
        padding-left: 50px;
        position: relative;
        background: url(../img/icon-check-untick.png) no-repeat left center;
        background-size: 34px
    }

        #hermes .screen.tests .vc-panel.test-status li:first-child {
            margin-top: 0
        }

        #hermes .screen.tests .vc-panel.test-status li.ok {
            background-image: url(../img/icon-check-tick-ok.png)
        }

        #hermes .screen.tests .vc-panel.test-status li.error {
            background-image: url(../img/icon-check-tick-error.png)
        }

    #hermes .screen.tests .vc-panel.test-status i {
        font-size: 14px;
        position: absolute;
        top: 9px;
        left: 30px
    }

    #hermes .screen.tests .test-status .name {
        margin-bottom: 15px
    }

    #hermes .vc-panel.log-as-agent {
        overflow: hidden;
        font-size: 14px;
        line-height: 1.42
    }

        #hermes .vc-panel.log-as-agent .wrap {
            max-height: 100%;
            display: grid;
            align-items: center;
            justify-items: center;
            grid-template-rows: 3fr 1fr;
            grid-template-columns: 1fr;
        }

    @media only screen and (max-height:650px) {
        #hermes .vc-panel.log-as-agent .wrap {
            grid-template-rows: 1fr;
            grid-template-columns: 1fr 1fr;
        }
    }

    #hermes .vc-panel.log-as-agent .form-group {
        margin-bottom: 0
    }

    #hermes .vc-panel.log-as-agent .close {
        font-size: 30px
    }

    #hermes .vc-panel.log-as-agent .panel-content.toggled .wrap {
        display: block;
        padding: 10px
    }

    #hermes .vc-panel.log-as-agent .panel-content {
        transition: all 0.2s ease-in-out;
        bottom: 0
    }

        #hermes .vc-panel.log-as-agent .panel-content.normal, #hermes .vc-panel.log-as-agent.toggled .panel-content.toggled {
            top: 0;
            bottom: 0
        }

    #hermes .vc-panel.log-as-agent.toggled .panel-content.normal {
        top: -100%;
        bottom: 100%
    }

    #hermes .vc-panel.log-as-agent .panel-content.toggled {
        top: 100%;
        bottom: -100%
    }

    #hermes .vc-panel.log-as-agent .users-table {
        font-size: 14px;
        line-height: 1.42;
        display: inline-block;
        width: 100% !important;
        max-height: Calc(((100vh - 80px)/ 3) - 65px)
    }

        #hermes .vc-panel.log-as-agent .users-table .status {
            text-align: left
        }

        #hermes .vc-panel.log-as-agent .users-table tbody > tr:hover {
            cursor: pointer
        }

        #hermes .vc-panel.log-as-agent .users-table .status .mdi {
            color: #D8DDE6;
            font-size: 10px;
            margin-right: 5px
        }

        #hermes .vc-panel.log-as-agent .users-table .status.connected .mdi {
            color: #0BBCCB
        }

        #hermes .vc-panel.log-as-agent .users-table td, #hermes .vc-panel.log-as-agent .users-table th {
            vertical-align: middle
        }

            #hermes .vc-panel.log-as-agent .users-table td:first-child, #hermes .vc-panel.log-as-agent .users-table th:first-child {
                line-height: 25px
            }

        #hermes .vc-panel.log-as-agent .users-table .select-wrapper {
            width: 98%
        }

        #hermes .vc-panel.log-as-agent .users-table select {
            padding: 2px 5px;
            height: auto;
            width: auto;
            display: inline-block
        }

    #hermes .screen .icon-image {
        background: no-repeat center;
        background-size: contain;
        height: 16vh;
        margin: 0 auto 0;
        width: 100%
    }

    #hermes .screen .vc-panel.with-icon.with-input .icon-image {
        height: 15vh
    }

    #hermes .screen .vc-panel.with-icon.with-input .vocalcom-form .form-group {
        padding-top: 5px
    }

    #hermes .screen .reporting-test {
        padding: 0 !important
    }

        #hermes .screen .reporting-test .wrap {
            padding-top: 0 !important;
            height: auto
        }

        #hermes .screen .reporting-test span {
            background: url(../img/icon-reporting.png) top center no-repeat;
            padding-top: 16vh;
            background-size: 16vh
        }

    #hermes .screen span.button-name, .modal span.button-name {
        background: top center no-repeat;
        padding-top: 16vh;
        background-size: 16vh;
        font-weight: 300
    }

    .modal .supervisior span.button-name, #hermes .screen .supervisior span.button-name {
        background-image: url(../img/icon-supervision.png)
    }

    #hermes .screen .quality-management span.button-name {
        background-image: url(../img/icon-quality-monitoring-2.png)
    }

    .modal .agent-desktop span.button-name, #hermes .screen .agent-desktop span.button-name {
        background-image: url(../img/icon-agent-workspace-4.png)
    }

    #hermes .screen .reporting span.button-name {
        background-image: url(../img/icon-reporting.png)
    }

    #hermes .screen .analytics span.button-name {
        background-image: url(../img/icon-analytics.png)
    }

    #hermes .screen .flow-designer span.button-name {
        background-image: url(../img/icon-flow-designer.png)
    }

    #hermes .screen .ivr-studio span.button-name {
        background-image: url(../img/icon-ivr-6.png)
    }

    #hermes .screen .admin-console span.button-name {
        background-image: url(../img/icon-console-4.png)
    }

    #hermes .screen .survey-manager span.button-name {
        background-image: url(../img/icon-survey.png)
    }

    #hermes .screen .taxation span.button-name {
        background-image: url(../img/icon-taxation.png)
    }

    #hermes .screen .language span.button-name {
        background-image: url(../img/icon-language-2.png)
    }

    #hermes .screen .network span.button-name {
        background-image: url(../img/icon-network.png)
    }

    #hermes .screen .time-zone span.button-name {
        background-image: url(../img/icon-timezone.png)
    }

    #hermes .screen .site-list span.button-name {
        background-image: url(../img/icon-sites-list-4.png)
    }

    #hermes .screen .cti-monitoring span.button-name {
        background-image: url(../img/icon-cti-monitoring.png)
    }

    #hermes .screen .proxy span.button-name {
        background-image: url(../img/icon-tests-proxy.png)
    }

    #hermes .screen .softphone span.button-name {
        background-image: url(../img/icon-tests-softphone.png)
    }

    #hermes .screen .webservice span.button-name {
        background-image: url(../img/icon-tests-webservices.png)
    }

    #hermes .screen .sharing span.button-name {
        background-image: url(../img/icon-tests-sharing.png)
    }

    #hermes .screen .station span.button-name {
        background-image: url(../img/icon-tests-station.png)
    }

    .vocalcom-form .login-form {
        padding: 20px;
        border-radius: 4px;
        border: 1px solid #D8DDE6;
        color: #16325c;
        background: #fff;
        margin-top: 20px
    }

    .vocalcom-form .form-group {
        text-align: left;
        padding: 10px 10px 0
    }

    .vocalcom-form label {
        font-size: 12px;
        font-weight: 400
    }

        .vocalcom-form label.remember {
            font-size: 14px
        }

    .vocalcom-form.field {
        width: 100%
    }

    .vocalcom-form .form-group select, .vocalcom-form .form-group input {
        font-size: 14px;
        padding: 0 10px;
        border: 1px solid #ccc;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 4px
    }

        .vocalcom-form .form-group input[type=text], .vocalcom-form .form-group input[type=password], .vocalcom-form .form-group input[type=email] {
            width: 100%
        }

    .vocalcom-form .radio-inline {
        cursor: pointer
    }

    .vocalcom-form .form-group input[type=checkbox] {
        height: auto;
        vertical-align: middle
    }

    select.form-control {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
    }

    .vocalcom-form button {
        text-align: center;
        background-color: #0BBCCB;
        color: #fff;
        font-weight: 500;
        letter-spacing: .5px;
        border: none;
        cursor: pointer;
        font-size: 14px;
        width: 100% !important;
        line-height: 17px;
        padding: 12px 24px;
        border-radius: 4px;
        transition: all 0.5s ease-in-out
    }

        .vocalcom-form button.waiting {
            background-color: #fff;
            color: #ccc;
            border: 1px solid #ccc;
            cursor: wait
        }

        .vocalcom-form button.with-addon {
            position: relative;
            overflow: hidden;
            padding-right: 60px
        }

            .vocalcom-form button.with-addon.left {
                position: relative;
                overflow: hidden;
                padding-right: 24px;
                padding-left: 60px
            }

            .vocalcom-form button.with-addon:focus, .vocalcom-form button.with-addon:hover {
                color: #fff
            }

            .vocalcom-form button.with-addon:hover {
                opacity: .8
            }

        .vocalcom-form button.centered {
            margin-right: auto;
            margin-left: auto
        }

        .vocalcom-form button .addon {
            display: block;
            width: 40px;
            background-color: #055864;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            line-height: 44px
        }

            .vocalcom-form button .addon.left {
                left: 0;
                right: auto;
            }

            .vocalcom-form button .addon .mdi {
                font-size: 20px
            }

    .vocalcom-form .error {
        color: #C23934;
        background: #fff;
        margin-bottom: 12px;
        font-size: 13px;
        line-height: 140%;
        text-align: left
    }

        .vocalcom-form .error a {
            color: #C23934;
            text-decoration: underline
        }

            .vocalcom-form .error a:hover {
                text-decoration: none
            }

    .vocalcom-form .btn-style {
        background-color: #fff;
        border: 1px solid #D8DDE6;
        color: #0070d2;
        display: inline-block;
        box-sizing: border-box;
        text-align: center;
        padding: 12px 24px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500
    }

        .vocalcom-form .btn-style:hover {
            background-color: #f4f6f9
        }

    .vocalcom-form .btn-style {
        margin-left: 15px
    }

    /* Test dans page d'options */

#hermes .screen .wrap.testPanel {
    font-size: 14px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 24px;
    text-align: left;
    align-items: start;
    line-height: 1.2;
}

.testPanel .head, .testPanel .tests {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 6px;
}
.testPanel .tests {
    gap: 10px;
}
.testPanel .test-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    .testPanel .test-item .labelConfig {
        flex-shrink: 9;
        margin-right: 12px;
    }

    .testPanel .test-item .resultZone {
        height: 28px;
        width: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        margin: -5px 0;
    }
    .testPanel .test-item .result {
        font-size: 20px;
        border-radius: 50%;
    }
        .testPanel .test-item .result.error {
            color: #e51b1f;
            cursor: pointer;
        }
            .testPanel .test-item .result.error:hover {
                background: rgb(229 27 31 / 10%);
            }
        .testPanel .test-item .result.alert {
            padding: unset;
            margin: unset;
            border: unset;
            color: #f6a31a;
            cursor: pointer;
        }
            .testPanel .test-item .result.alert:hover {
                background: rgb(246 163 26 / 10%);
            }
        .testPanel .test-item .result.ok {
            color: #4caf50;
        }
            .testPanel span {
        white-space: break-spaces !important;
    }
    .testPanel .head .title {
        font-weight: 200;
        font-size: 24px;
        line-height: 1;
    }
    .testPanel .head .description {
        color: #757575;
        font-size: 12px;
    }