html {
        height: 100%;
        width: 100%;
        }

    body {
        z-index: 1;
        position: absolute;
        margin: 0;
        padding: 0;
        overflow: auto;
        -ms-overflow-style: scrollbar; /* stops ie10+ from displaying auto-hiding scroll bar on top of the body content (the domain selector, specifically) */
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        text-align: center;
        background: #6c89b5;
background: -ms-linear-gradient(top, #6c89b5 0%, #144794 100%);
background: -moz-linear-gradient(top, #6c89b5 0%, #144794 100%);
background: -o-linear-gradient(top, #6c89b5 0%, #144794 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6c89b5), color-stop(1, #144794));
background: -webkit-linear-gradient(top, #6c89b5 0%, #144794 100%);
background: linear-gradient(to bottom, #6c89b5 0%, #144794 100%);
        background-repeat: no-repeat;
        background-attachment: fixed;
        webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
        background-size:cover;
        }

        pre {
        white-space: pre-wrap;
        }

    div#footer {
        display: inline-block;
        width: 100%;
        background: rgba(0,0,0,0.1);
        text-align: center;
        vertical-align: middle;
        margin-bottom: 60px;
        padding: 8px;
                -moz-border-radius: 0px 0px 4px 4px;
        -webkit-border-radius: 0px 0px 4px 4px;
        -khtml-border-radius: 0px 0px 4px 4px;
        border-radius: 0px 0px 4px 4px;
                }

    div#footer_login {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background: rgba(0,0,0,0.1);
        text-align: center;
        vertical-align: middle;
        padding: 8px;
        }

    .footer {
        font-size: 11px;
        font-family: arial;
        line-height: 14px;
        color: rgba(255,255,255,0.3);
        white-space: nowrap;
        }

    .footer > a:hover {
        color: rgba(255,255,255,0.3);
        }

/* MENU: BEGIN ******************************************************************/

    /* main menu container */
    .navbar {
                    background: rgba(0,0,0,0.90);
                -webkit-box-shadow: 0 0 5px #000000;
        -moz-box-shadow: 0 0 5px #000000;
        box-shadow: 0 0 5px #000000;
        border: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        -khtml-border-radius: 0;
        border-radius: 0;
        }

    /* main menu logo */
    .navbar-logo {
        border: none;
        height: 27px;
        width: auto;
        margin: 11px 0 0 7px;
        padding-right: 13px;
        cursor: pointer;
        float: left;
        display: inline;
        }

    /* menu brand text */
    .navbar-header > div > a.navbar-brand {
        color: rgba(255,255,255,0.80);
        white-space: nowrap;
        }

    .navbar-header > div > a.navbar-brand:hover {
        color: rgba(255,255,255,1.0);
        }

    /* main menu item */
    .navbar .navbar-nav > li > a,
    .navbar .navbar-nav > li.current-menu-item > a {
        font-family: arial;
        font-size: 10.25pt;
        color: #fff;
        padding-right: 10px;
        padding-left: 10px;
        }

    .navbar .navbar-nav > li:hover > a,
    .navbar .navbar-nav > li:focus > a,
    .navbar .navbar-nav > li:active > a {
        color: #fd9c03;
        background: rgba(0,0,0,1.0)        }

    .navbar .navbar-nav > li > a > span.glyphicon {
        margin: 1px 2px 0 0;
        }

    @media(min-width: 768px) {
        .dropdown:hover .dropdown-menu {
            display: block;
            }
        }

    /* sub menu container */
    .navbar-nav > li > .dropdown-menu {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 10px;
        border: 0;
        background: rgba(0,0,0,0.90);
        -webkit-box-shadow: 0 0 5px #000000;
        -moz-box-shadow: 0 0 5px #000000;
        box-shadow: 0 0 5px #000000;
                -moz-border-radius: 0px 0px 4px 4px;
        -webkit-border-radius: 0px 0px 4px 4px;
        -khtml-border-radius: 0px 0px 4px 4px;
        border-radius: 0px 0px 4px 4px;
                }

    /* sub menu item */
    .dropdown-menu > li > a {
        font-family: arial;
        color: #fff;
        font-size: 10pt;
        margin: 0;
        padding: 3px 15px;
        }

    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus,
    .dropdown-menu > li > a:active {
        color: #fd9c03;
        background: #141414;
        outline: none;
        }

    .dropdown-menu > li > a > span.glyphicon {
        display: inline-block;
        font-size: 8pt;
        margin: 0 0 8px 8px;
        opacity: 0.30;
        text-align: top;
        }

    /* domain name/selector */
    a.domain_selector_domain {
        display: inline-block;
        white-space: nowrap;
        font-size: 9.5pt;
        color: rgba(255,255,255,0.8);
        padding: 16px 0 14px 0;
        }

    a.domain_selector_domain:hover,
    a.domain_selector_domain:focus,
    a.domain_selector_domain:active {
        color: rgba(255,255,255,1.0);
        text-decoration: none;
        }

    /* logout icon */
    a.logout_icon {
        display: inline-block;
        color: rgba(255,255,255,0.8);
        font-size: 11pt;
        padding: 16px 10px 13px 10px;
        margin-left: 10px;
        }

    a.logout_icon:hover,
    a.logout_icon:focus,
    a.logout_icon:active {
        color: rgba(255,255,255,1.0);
        text-decoration: none;
        }

    /* xs menu toggle button */
    .navbar-inverse .navbar-toggle {
        background: transparent;
        border: none;
        padding: 16px 7px 17px 20px;
        margin: 0 8px;
        }

    .navbar-inverse .navbar-toggle:hover,
    .navbar-inverse .navbar-toggle:focus,
    .navbar-inverse .navbar-toggle:active {
        background: transparent;
        }

    .navbar-inverse .navbar-toggle .icon-bar {
        background: rgba(255,255,255,0.8);
        }

    .navbar-inverse .navbar-toggle:hover > .icon-bar {
        background: rgba(255,255,255,1.0);
        }

/* BUTTONS ********************************************************************/

    /* buttons */
    input.btn,
    input.button {
        height: 28px;
        padding: 5px 8px;
        border: 1px solid #242424;
                -moz-border-radius: 3px 3px 3px 3px;
        -webkit-border-radius: 3px 3px 3px 3px;
        -khtml-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px;
                        background: #4f4f4f;
        background-image: -ms-linear-gradient(top, #4f4f4f 0%, #000000 100%);
        background-image: -moz-linear-gradient(top, #4f4f4f 0%, #000000 100%);
        background-image: -o-linear-gradient(top, #4f4f4f 0%, #000000 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4f4f4f), color-stop(1, #000000));
        background-image: -webkit-linear-gradient(top, #4f4f4f 0%, #000000 100%);
        background-image: linear-gradient(to bottom, #4f4f4f 0%, #000000 100%);
                font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
        text-align: center;
        text-transform: uppercase;
        color: #ffffff;
        font-weight: bold;
        font-size: 11px;
        vertical-align: middle;
        }

    input.btn:hover,
    input.btn:active,
    input.btn:focus,
    input.button:hover,
    input.button:active,
    input.button:focus {
        cursor: pointer;
        border-color: #000000;
                background: #000000;
        background-image: -ms-linear-gradient(top, #000000 0%, #000000 100%);
        background-image: -moz-linear-gradient(top, #000000 0%, #000000 100%);
        background-image: -o-linear-gradient(top, #000000 0%, #000000 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000000), color-stop(1, #000000));
        background-image: -webkit-linear-gradient(top, #000000 0%, #000000 100%);
        background-image: linear-gradient(to bottom, #000000 0%, #000000 100%);
                color: #ffffff;
        }

    /* default bootstrap buttons - not currently used */
    button.btn-default {
        font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
        padding: 4px 8px;
        color: #fff;
        font-weight: bold;
        font-size: 8pt;
        border: 1px solid #26242a;
        background: #3e3e3e;
        background-image: -moz-linear-gradient(top, #000 0%, #3e3e3e 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #000), color-stop(1, #3e3e3e));
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        text-align: center;
        text-transform: uppercase;
        text-shadow: 0px 0px 1px rgba(0,0,0,0.9);
        opacity: 0.9;
        -moz-opacity: 0.9;
        }

    button.btn-default:hover,
    button.btn-default:active,
    button.btn-default:focus {
        cursor: pointer;
        color: #ffffff;
        border: 1px solid #26242a;
        box-shadow: 0 0 5px #cddaf0;
        -webkit-box-shadow: 0 0 5px #cddaf0;
        -moz-box-shadow: 0 0 5px #cddaf0;
        opacity: 1.0;
        -moz-opacity: 1.0;
        }

    /* control icons (must be defined after the default bootstrap buttons) */
    button.list_control_icon,
    button.list_control_icon_disabled {
        width: 24px;
        height: 24px;
        padding: 2px;
        margin: 1px;
        border: 1px solid #242424;
                -moz-border-radius: 3px 3px 3px 3px;
        -webkit-border-radius: 3px 3px 3px 3px;
        -khtml-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px;
                        background: #4f4f4f;
        background-image: -ms-linear-gradient(top, #4f4f4f 0%, #000000 100%);
        background-image: -moz-linear-gradient(top, #4f4f4f 0%, #000000 100%);
        background-image: -o-linear-gradient(top, #4f4f4f 0%, #000000 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4f4f4f), color-stop(1, #000000));
        background-image: -webkit-linear-gradient(top, #4f4f4f 0%, #000000 100%);
        background-image: linear-gradient(to bottom, #4f4f4f 0%, #000000 100%);
                color: #ffffff;
        font-size: 10.5pt;
        text-align: center;
        -moz-opacity: 0.3;
        opacity: 0.3;
        }

    button.list_control_icon:hover,
    button.list_control_icon:active,
    button.list_control_icon:focus {
        cursor: pointer;
        border-color: #000000;
                background: #000000;
        background-image: -ms-linear-gradient(top, #000000 0%, #000000 100%);
        background-image: -moz-linear-gradient(top, #000000 0%, #000000 100%);
        background-image: -o-linear-gradient(top, #000000 0%, #000000 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000000), color-stop(1, #000000));
        background-image: -webkit-linear-gradient(top, #000000 0%, #000000 100%);
        background-image: linear-gradient(to bottom, #000000 0%, #000000 100%);
                color: #ffffff;
        -moz-opacity: 1.0;
        opacity: 1.0;
        }

/* ICONS *********************************************************************/

    span.icon_glyphicon_body {
        width: 16px;
        height: 16px;
        color: rgba(0,0,0,0.25);
        border: 0;
        }

    span.icon_glyphicon_body:hover {
        color: rgba(0,0,0,0.5);
        }

/* DOMAIN SELECTOR ***********************************************************/

    #domains_container {
        z-index: 99990;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 360px;
        overflow: hidden;
        display: none;
        }

    #domains_block {
        position: absolute;
        right: -300px;
        top: 0;
        bottom: 0;
        width: 340px;
        padding: 20px 20px 100px 20px;
        font-family: arial, san-serif;
        font-size: 10pt;
        overflow: hidden;
        background-color: #fff;
        -webkit-box-shadow: 0 0 10px #888888;
        -moz-box-shadow: 0 0 10px #888888;
        box-shadow: 0 0 10px #888888;
        }

    #domains_header {
        position: relative;
        width: 300px;
        height: 55px;
        margin-bottom: 20px;
        text-align: left;
        }

    #domains_list {
        position: relative;
        overflow: auto;
        width: 300px;
        height: 100%;
        padding: 1px;
        background-color: #fff;
        border: 1px solid #a4aebf;
        }

    div.domains_list_item {
        text-align: left;
        border-bottom: 1px solid #c5d1e5;
        padding: 5px 8px 8px 8px;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        }

    div.domains_list_item span.domain_list_item_description {
        color: #999;
        font-size: 11px;
        }

    div.domains_list_item:hover a,
    div.domains_list_item:hover span {
        color: #5082ca;
        }

/* DOMAIN SELECTOR: END ********************************************************/

    #default_login {
        position: fixed;
        top: 50%;
        left: 50%;
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -khtml-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        padding: 30px;
                background: rgba(255,255,255,0.3);
                -moz-border-radius: 4px 4px 4px 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        -khtml-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
                                        -webkit-box-shadow: 0 1px 20px rgba(140,140,140,0.3);
        -moz-box-shadow: 0 1px 20px rgba(140,140,140,0.3);
        box-shadow: 0 1px 20px rgba(140,140,140,0.3);
        }

    #login_logo {
        width: 250px;
        height: auto;
        }

    a.login_link {
        color: #004083;
        font-size: 11px;
        font-family: Arial;
        text-decoration: none;
        }

    a.login_link:hover {
        color: #5082ca;
        cursor: pointer;
        text-decoration: underline;
        }

    
    #main_content {
        display: inline-block;
        width: 100%;
        padding: 5px 10px 10px 10px;margin-top: 65px;        text-align: left;
        color: #5f5f5f;
        font-size: 12px;
        font-family: arial;
        }

    /* default body padding */
    .container-fluid {
        width: 90%;
        }

    /* maximize viewport usage on xs displays */
    @media(min-width: 0px) and (max-width: 767px) {
        .container-fluid {
            width: calc(100% - 20px);
            }

        #main_content {
            padding: 8px;
            }
        }

/* GENERAL ELEMENTS *****************************************************************/

    img {
        border: none;
        width: 100%;
        max-width: 400px;
        }

    .title, b {
        color: #952424;
        font-size: 15px;
        font-family: arial;
        font-weight: bold
        }

    a {
        color: #004083;
        text-decoration: none;
        }

    a:hover {
        color: #5082ca;
        text-decoration: underline;
        }

    form {
        margin: 0;
        }

    /* style placeholder text (for browsers that support the attribute) - note: can't stack, each must be seperate */
        ::-webkit-input-placeholder { color: #999999; opacity: 1.0; } /* chrome/opera/safari */
    ::-moz-placeholder { color: #999999; opacity: 1.0; } /* ff 19+ */
    :-moz-placeholder { color: #999999; opacity: 1.0; } /* ff 18- */
    :-ms-input-placeholder { color: #999999; opacity: 1.0; } /* ie 10+ */
    ::placeholder { color: #999999; opacity: 1.0; } /* official standard */

    select.txt,
    textarea.txt,
    input[type=text].txt,
    input[type=number].txt,
    input[type=password].txt,
    label.txt,
    select.formfld,
    textarea.formfld,
    input[type=text].formfld,
    input[type=number].formfld,
    input[type=password].formfld,
    label.formfld {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
        text-align: left;
        height: 28px;
        padding: 4px 6px;
        margin: 1px;
        border-width: 1px;
        border-style: solid;
        border-color: #c0c0c0;
        background: #ffffff;
        -webkit-box-shadow: 0 0 3px #cddaf0 inset;
-moz-box-shadow: 0 0 3px #cddaf0 inset;
box-shadow: 0 0 3px #cddaf0 inset;
                -moz-border-radius: 3px 3px 3px 3px;
        -webkit-border-radius: 3px 3px 3px 3px;
        -khtml-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px;
                vertical-align: middle;
        }

    textarea.txt,
    input[type=text].txt,
    input[type=number].txt,
    input[type=password].txt,
    textarea.formfld,
    input[type=text].formfld,
    input[type=number].formfld,
    input[type=password].formfld {
        transition: width 0.25s;
        -moz-transition: width 0.25s;
        -webkit-transition: width 0.25s;
        max-width: 500px;
        }

    select.txt,
    select.formfld {
        padding: 4px 2px;
        }

    textarea.txt:hover,
    input[type=text].txt:hover,
    input[type=number].txt:hover,
    input[type=password].txt:hover,
    label.txt:hover,
    textarea.formfld:hover,
    input[type=text].formfld:hover,
    input[type=number].formfld:hover,
    input[type=password].formfld:hover,
    label.formfld:hover {
        border-color: #c0c0c0;
        }

    textarea.txt:focus,
    input[type=text].txt:focus,
    input[type=number].txt:focus,
    input[type=password].txt:focus,
    label.txt:focus,
    textarea.formfld:focus,
    input[type=text].formfld:focus,
    input[type=number].formfld:focus,
    input[type=password].formfld:focus,
    label.formfld:focus {
        border-color: #c0c0c0;
        /* first clear */
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
                            -webkit-box-shadow: 0 0 5px #cddaf0;
            -moz-box-shadow: 0 0 5px #cddaf0;
            box-shadow: 0 0 5px #cddaf0;
                }

    input.login {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
        border-width: 1px;
        border-color: #c0c0c0;
        background: #ffffff;
        /* first clear */
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -webkit-box-shadow: 0 0 3px #cddaf0 inset;
-moz-box-shadow: 0 0 3px #cddaf0 inset;
box-shadow: 0 0 3px #cddaf0 inset;
                -moz-border-radius: 3px 3px 3px 3px;
        -webkit-border-radius: 3px 3px 3px 3px;
        -khtml-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px;
                }

    input.login:hover {
        border-color: #c0c0c0;
        }

    input.login:focus {
        border-color: #c0c0c0;
        /* first clear */
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
                            -webkit-box-shadow: 0 0 5px #cddaf0;
            -moz-box-shadow: 0 0 5px #cddaf0;
            box-shadow: 0 0 5px #cddaf0;
                }

    /* style placeholder text (for browsers that support the attribute) - note: can't stack, each must be seperate */
        input.login::-webkit-input-placeholder { color: #999999; opacity: 1.0; } /* chrome/opera/safari */
    input.login::-moz-placeholder { color: #999999; opacity: 1.0; } /* ff 19+ */
    input.login:-moz-placeholder { color: #999999; opacity: 1.0; } /* ff 18- */
    input.login:-ms-input-placeholder { color: #999999; opacity: 1.0; } /* ie 10+ */
    input.login::placeholder { color: #999999; opacity: 1.0; } /* official standard */

    input[type=password].formfld_highlight_bad,
    input[type=password].formfld_highlight_bad:hover,
    input[type=password].formfld_highlight_bad:active,
    input[type=password].formfld_highlight_bad:focus {
        border-color: #aa2525;
        -webkit-box-shadow: 0 0 3px #aa2525 inset;
        -moz-box-shadow: 0 0 3px #aa2525 inset;
        box-shadow: 0 0 3px #aa2525 inset;
        }

    input[type=password].formfld_highlight_good,
    input[type=password].formfld_highlight_good:hover,
    input[type=password].formfld_highlight_good:active,
    input[type=password].formfld_highlight_good:focus {
        border-color: #2fb22f;
        -webkit-box-shadow: 0 0 3px #2fb22f inset;
        -moz-box-shadow: 0 0 3px #2fb22f inset;
        box-shadow: 0 0 3px #2fb22f inset;
        }

    /* removes spinners (increment/decrement controls) inside input fields */
    input[type=number] { -moz-appearance: textfield; }
    ::-webkit-inner-spin-button { -webkit-appearance: none; }
    ::-webkit-outer-spin-button { -webkit-appearance: none; }

    /* disables text input clear 'x' in IE 10+, slows down autosizeInput jquery script */
    input[type=text]::-ms-clear {
        display: none;
    }

    input.fileinput {
        padding: 1px;
        display: inline;
        }

    textarea {
        min-height: 75px;
        }

    label {
        font-weight: normal;
        vertical-align: middle;
        }

    label input[type=checkbox],
    label input[type=radio] {
        vertical-align: -2px;
        margin: 0;
        padding: 0;
        }

    span.playback_progress_bar {
        background-color: #b90004;
        width: 17px;
        height: 4px;
        margin-bottom: 3px;
        display: block;
        -moz-border-radius: 0 0 6px 6px;
        -webkit-border-radius: 0 0 6px 6px;
        -khtml-border-radius: 0 0 6px 6px;
        border-radius: 0 0 6px 6px;
        -webkit-box-shadow: 0 0 3px 0px rgba(255,0,0,0.9);
        -moz-box-shadow: 0 0 3px 0px rgba(255,0,0,0.9);
        box-shadow: 0 0 3px 0px rgba(255,0,0,0.9);
        }

    td.playback_progress_bar_background {
        padding: 0;
        border-bottom: none;
        background-image: -ms-linear-gradient(top, rgba(0,0,0,0.15) 0%, transparent 100%);
        background-image: -moz-linear-gradient(top, rgba(0,0,0,0.15) 0%, transparent 100%);
        background-image: -o-linear-gradient(top, rgba(0,0,0,0.15) 0%, transparent 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.15)), color-stop(1, transparent));
        background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.15) 0%, transparent 100%);
        background-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, transparent 100%);
        overflow: hidden;
        }

    div.pwstrength_progress {
        display: none;
        }

    div.pwstrength_progress > div.progress {
        max-width: 200px;
        height: 6px;
        margin: 1px 0 0 1px;
        background: rgb(245, 245, 245);
                -moz-border-radius: 3px 3px 3px 3px;
        -webkit-border-radius: 3px 3px 3px 3px;
        -khtml-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px;
                }

    div.pwstrength_progress_password_reset > div.progress {
        margin: 0 auto 4px auto;
        width: 200px;
        max-width: 200px;
        background: #ffffff;
        border-width: 1px;
        border-color: #c0c0c0;
        }

/* TABLES *****************************************************************/

    table {
        border-collapse: separate;
        border-spacing: 0;
        }

    th {
        padding: 4px 7px 4px 0;
        padding: 4px 7px;
        text-align: left;
        color: #3164ad;
        font-size: 12px;
        font-family: arial;
        background: none;
        border-bottom: 1px solid #a4aebf;
        }

    th a, th a:visited, th a:active {
        color: #3164ad;
        text-decoration: none;
        }

    th a:hover {
        color: #3164ad;
        text-decoration: underline;
        }

    td {
        color: #5f5f5f;
        font-size: 12px;
        font-family: arial;
        }

    table.tr_hover tr {
        cursor: default;
        }

    table.tr_hover tr:hover td,
    table.tr_hover tr:hover td a {
        color: #5082ca;
        cursor: pointer;
        }

    table.tr_hover tr.tr_link_void:hover td {
        color: #000;
        cursor: default;
        }

    table.tr_hover tr td.tr_link_void {
        cursor: default;
        }

    td.list_control_icons {
        width: 52px;
        padding: none;
        padding-left: 2px;
        text-align: right;
        vertical-align: top;
        white-space: nowrap;
        }

    td.list_control_icon {
        width: 26px;
        padding: none;
        padding-left: 2px;
        text-align: right;
        vertical-align: top;
        white-space: nowrap;
        }

    /* form: label/field format */
    .vncell { /* form_label */
        background: #e5e9f0;
                -moz-border-radius: 4px 4px 4px 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        -khtml-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
                border-right: 3px solid #e5e9f0;
        border-bottom: 1px solid #ffffff;
        padding: 7px 8px;
        text-align: right;
        color: #000000;
        font-family: Arial;
        font-size: 9pt;
        vertical-align: top;
        }

    .vncellreq { /* form_label_required */
        background: #e5e9f0;
                -moz-border-radius: 4px 4px 4px 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        -khtml-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
                border-right: 3px solid #cbcfd5;
        border-bottom: 1px solid #ffffff;
        padding: 7px 8px;
        text-align: right;
        color: #000000;
        font-family: Arial;
        font-size: 9pt;
        font-weight: bold;
        vertical-align: top;
        }

    .vtable { /* form_field */
        background: #ffffff;
                -moz-border-radius: 0px 0px 0px 0px;
        -webkit-border-radius: 0px 0px 0px 0px;
        -khtml-border-radius: 0px 0px 0px 0px;
        border-radius: 0px 0px 0px 0px;
                border-bottom: 1px solid #e5e9f0;
        padding: 6px;
        text-align: left;
        vertical-align: middle;
        color: #666666;
        font-family: Arial;
        font-size: 8pt;
        }

    /* form: heading/row format */
    .vncellcol { /* form_heading */
        background: #e5e9f0;
                -moz-border-radius: 4px 4px 4px 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        -khtml-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
                border-bottom: 3px solid #e5e9f0;
        padding: 8px 8px 4px 8px;
        text-align: left;
        color: #000000;
        font-family: Arial;
        font-size: 9pt;
        }

    .vncellcolreq { /* form_heading_required */
        background: #e5e9f0;
                -moz-border-radius: 4px 4px 4px 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        -khtml-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
                border-bottom: 3px solid #cbcfd5;
        padding: 8px 8px 4px 8px;
        text-align: left;
        color: #000000;
        font-family: Arial;
        font-size: 9pt;
        font-weight: bold;
        }

    .vtablerow { /* form_row */
                height: 36px;
        background: #ffffff;
                -moz-border-radius: 0px 0px 0px 0px;
        -webkit-border-radius: 0px 0px 0px 0px;
        -khtml-border-radius: 0px 0px 0px 0px;
        border-radius: 0px 0px 0px 0px;
                border-bottom: 1px solid #e5e9f0;
        padding: 3px 0;
        text-align: left;
        vertical-align: middle;
        color: #666666;
        font-family: Arial;
        font-size: 9pt;
        }

    .row_style0 {
        border-bottom: 1px solid #c5d1e5;
        background: #e5e9f0;
        color: #000;
        font-family: arial;
        font-size: 12px;
        text-align: left;
        padding: 4px 7px;
        }

    .row_style1 {
        border-bottom: 1px solid #c5d1e5;
        background: #fff;
        color: #000;
        font-family: arial;
        font-size: 12px;
        text-align: left;
        padding: 4px 7px;
        }

    .row_style_slim {
        padding-top: 0;
        padding-bottom: 0;
        white-space: nowrap;
        }

    .row_stylebg {
        border-bottom: 1px solid #c5d1e5;
        background: #f0f2f6;
        color: #000;
        font-family: arial;
        font-size: 12px;
        text-align: left;
        padding: 4px 7px;
        }

/* RESPONSE MESSAGES *******************************************************/

    #message_container {
        z-index: 99998;
        position: absolute;
        top: -80px;
        left: 0;
        right: 0;
        filter: alpha(opacity=0);
        opacity: 0;
        -moz-opacity:0;
        -khtml-opacity: 0;
        padding: 15px 0;
    }

    #message_text {
        z-index: 99999;
        position: absolute;
        top: -80px;
        left: 0;
        right: 0;
        filter: alpha(opacity=0);
        opacity: 0;
        -moz-opacity:0;
        -khtml-opacity: 0;
        margin: 0 auto;
        vertical-align: middle;
        padding: 15px 0;
        text-align: center;
        font-family: arial, san-serif;
        font-size: 10pt;
    }

    .message_container_mood_default {
        background: #ccffcc;
        }

    .message_container_mood_negative {
        background: #ffcdcd;
        }

    .message_container_mood_alert {
        background: #ffe585;
        }

    .message_text_mood_default {
        color: #004200;
        }

    .message_text_mood_negative {
        color: #670000;
        }

    .message_text_mood_alert {
        color: #d66721;
        }

/* MESSAGES STACK *******************************************************/

    #messages_container {
        z-index: 99998;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 0;
        }

    .message_text {
        z-index: 99999;
        margin: 0 auto;
        padding: 0.5em 0;
        text-align: center;
        font-family: arial, san-serif;
        font-size: 10pt;
        display: block;
        border-bottom: solid 1px;
        color: #004200;
        background: #ccffcc;
        border-bottom-color: #004200;
        }

    .message_mood_positive {
        color: #004200;
        background: #ccffcc;
        border-bottom-color: #004200;
        }

    .message_mood_negative {
        color: #670000;
        background: #ffcdcd;
        border-bottom-color: #670000;
        }

    .message_mood_alert {
        color: #d66721;
        background: #ffe585;
        border-bottom-color: #d66721;
        }

/* OPERATOR PANEL ****************************************************************/

    div.op_ext {
        float: left;
        width: 235px;
        margin: 0px 8px 8px 0px;
        padding: 0px;
        border-style: solid;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 0 3px #e5e9f0;
        -moz-box-shadow: 0 0 3px #e5e9f0;
        box-shadow: 0 0 3px #e5e9f0;
        border-width: 1px 3px;
        border-color: #b9c5d8 #c5d1e5;
        background-color: #e5eaf5;
        cursor: default;
        }

    div.op_state_active {
        background-color: #baf4bb;
        border-width: 1px 3px;
        border-color: #77d779;
        }

    div.op_state_ringing {
        background-color: #a8dbf0;
        border-width: 1px 3px;
        border-color: #41b9eb;
        }

    table.op_ext {
        width: 100%;
        height: 60px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background-color: #e5eaf5;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        }

    td.op_ext_icon {
        vertical-align: middle;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        }

    img.op_ext_icon {
        cursor: move;
        width: 39px;
        height: 42px;
        border: none;
        }

    td.op_ext_info {
        text-align: left;
        vertical-align: top;
        font-family: arial;
        font-size: 10px;
        overflow: auto;
        width: 100%;
        padding: 3px 5px 3px 7px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background-color: #f0f2f6;
        }

    td.op_state_ringing {
        background-color: #d1f1ff;
        }

    td.op_state_active {
        background-color: #e1ffe2;
        }

    table.op_state_ringing {
        background-color: #a8dbf0;
        }

    table.op_state_active {
        background-color: #baf4bb;
        }

    .op_user_info {
        font-family: arial;
        font-size: 10px;
        display: inline-block;
        }

    .op_user_info strong {
        color: #3164AD;
        }

    .op_caller_info {
        display: block;
        margin-top: 4px;
        font-family: arial;
        font-size: 10px;
        }

    .op_call_info {
        display: inline-block;
        padding: 0px;
        font-family: arial;
        font-size: 10px;
        }

    #op_btn_status_available {
        background-image: -moz-linear-gradient(top, #8ec989 0%, #2d9c38 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8ec989), color-stop(1, #2d9c38));
        background-color: #2d9c38;
        border: 1px solid #006200;
        }

    #op_btn_status_available_on_demand {
        background-image: -moz-linear-gradient(top, #abd0aa 0%, #629d62 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #abd0aa), color-stop(1, #629d62));
        background-color: #629d62;
        border: 1px solid #619c61;
        }

    #op_btn_status_on_break {
        background-image: -moz-linear-gradient(top, #ddc38b 0%, #be8e2c 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ddc38b), color-stop(1, #be8e2c));
        background-color: #be8e2c;
        border: 1px solid #7d1b00;
        }

    #op_btn_status_do_not_disturb {
        background-image: -moz-linear-gradient(top, #cc8984 0%, #960d10 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cc8984), color-stop(1, #960d10));
        background-color: #960d10;
        border: 1px solid #5b0000;
        }

    #op_btn_status_logged_out {
        background-image: -moz-linear-gradient(top, #cacac9 0%, #8d8d8b 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cacac9), color-stop(1, #8d8d8b));
        background-color: #8d8d8b;
        border: 1px solid #5d5f5a;
        }

/* DASHBOARD **********************************************************************/

    /* login message */
    div.login_message {
        border: 1px solid #bae0ba;
        background-color: #eeffee;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        padding: 20px;
        margin-bottom: 15px;
        }

    /* hud boxes */
    div.hud_box {
        height: auto;
        vertical-align: top;
        text-align: center;
                background: #f9fbfe;
        background-image: -ms-linear-gradient(left, #edf1f7 0%, #f9fbfe 30%, #f9fbfe 70%, #edf1f7 100%);
        background-image: -moz-linear-gradient(left, #edf1f7 0%, #f9fbfe 30%, #f9fbfe 70%, #edf1f7 100%);
        background-image: -o-linear-gradient(left, #edf1f7 0%, #f9fbfe 30%, #f9fbfe 70%, #edf1f7 100%);
        background-image: -webkit-gradient(linear, left, right, color-stop(0, #edf1f7), color-stop(0.30, #f9fbfe), color-stop(0.70, #f9fbfe), color-stop(1, #edf1f7));
        background-image: -webkit-linear-gradient(left, #edf1f7 0%, #f9fbfe 30%, #f9fbfe 70%, #edf1f7 100%);
        background-image: linear-gradient(to right, #edf1f7 0%, #f9fbfe 30%, #f9fbfe 70%, #edf1f7 100%);
                        -webkit-border-radius: 5px 5px 5px 5px;
        -moz-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
                border: 1px solid #dbe0ea;
        overflow: hidden;
        margin: -1px;
        }

    div.hud_box:hover {
        border: 1px solid #cbd3e1;
        }

    span.hud_title {
        display: block;
        width: 100%;
        font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
        text-shadow: 0px 1px 2px #000;
        letter-spacing: -0.02em;
        color: #fff;
        font-size: 12pt;
                line-height: 26.25pt;
        text-align: center;
        background: #8e96a5;
        border-bottom: 1px solid #737983;
        overflow: hidden;
        }

    span.hud_title:hover {
        color: #fff;
        text-shadow: 0px 1px 2px #000;
        background: #969dab;
        cursor: pointer;
        }

    span.hud_stat {
        display: block;
        clear: both;
        text-align: center;
        text-shadow: 0px 2px 2px #737983;
        width: 100%;
        color: #fff;
        font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
        font-size: 60pt;
                line-height: 77pt;
        font-weight: normal;
        background: #a4aebf;
        border-top: 1px solid #c5d1e5;
        overflow: hidden;
        }

    span.hud_stat:hover {
        color: #fff;
        text-shadow: 0px 2px 2px #737983;
        background: #aeb7c5;
        cursor: pointer;
        }

    span.hud_stat_title {
        display: block;
        clear: both;
        width: 100%;
        height: 30px;
        cursor: default;
        text-align: center;
        text-shadow: 0px 1px 1px #737983;
        color: #fff;
        font-size: 14px;
        padding-top: 4px;
        white-space: nowrap;
        letter-spacing: -0.02em;
        font-weight: normal;
        font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
        background: #a4aebf;
        border-bottom: 1px solid #909aa8;
        margin: 0;
        overflow: hidden;
        }

    span.hud_stat:hover + span.hud_stat_title {
        color: #fff;
        text-shadow: 0px 1px 1px #737983;
        background: #aeb7c5;
        }

    div.hud_details {
        -moz-box-shadow: inset 0 7px 7px -7px #737983, inset 0 -8px 12px -10px #737983;
        -webkit-box-shadow: inset 0 7px 7px -7px #737983, inset 0 -8px 12px -10px #737983;
        box-shadow: inset 0 7px 7px -7px #737983, inset 0 -8px 12px -10px #737983;
        padding-top: 3px;
        padding-bottom: 15px;
        }

    @media(min-width: 0px) and (max-width: 1199px) {
        div.hud_details {
            display: none;
            height: auto;
            }
        }

    @media(min-width: 1200px) {
        div.hud_details {
            height: 350px;
            display: block;
            }
        }

    th.hud_heading {
        text-align: left;
        font-size: 11px;
        font-family: arial        color: #3164ad;
        }

    td.hud_text {
        font-size: 11px;
        color: #000;
        text-align: left;
        vertical-align: middle;
        }

    span.hud_expander {
        display: block;
        clear: both;
        background: #e5e9f0;
        padding: 4px 0;
        text-align: center;
        width: 100%;
        height: 25px;
        font-size: 13px;
        line-height: 5px;
        color: #a4aebf;
        border-top: 1px solid #fff;
        }

    span.hud_expander:hover {
        color: #a4aebf;
        background: #ebeef3;
        cursor: pointer;
        }

/* PLUGINS ********************************************************************/

    /* bootstrap colorpicker  */
    .colorpicker-2x .colorpicker-saturation {
        width: 200px;
        height: 200px;
        }

    .colorpicker-2x .colorpicker-hue,
    .colorpicker-2x .colorpicker-alpha {
        width: 30px;
        height: 200px;
        }

    .colorpicker-2x .colorpicker-color,
    .colorpicker-2x .colorpicker-color div{
        height: 30px;
        }

    /* jquery ui autocomplete styles */
    .ui-widget {
        margin: 0px;
        padding: 0px;
        }

    .ui-autocomplete {
        cursor: default;
        position: absolute;
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
        white-space: nowrap;
        width: auto;
        border: 1px solid #c0c0c0;
        }

    .ui-menu, .ui-menu .ui-menu-item {
        width: 350px;
        }

    .ui-menu .ui-menu-item a {
        text-decoration: none;
        cursor: pointer;
        border-color: #fff;
        background-image: none;
        background-color: #fff;
        white-space: nowrap;
        font-family: arial;
        font-size: 12px;
        color: #444;
        }

    .ui-menu .ui-menu-item a:hover {
        color: #5082ca;
        border: 1px solid white;
        background-image: none;
        background-color: #fff;
        }

	#display-inline-block-btn {
        display: none;
        margin: 0 auto 8px;
    }

@media only screen and (max-width: 1219px) {
    .call-detail-records-searching .formfld, .call-detail-records-searching input {
        width: 100%;
        }

    .call-detail-records-searching, .extension-summary {
        width: 49%;
        display: inline-block;
        }

    .call-detail-records-searching td.vncell, .call-detail-records-searching td.vtable,
    .extension-summary td.vncell, .extension-summary td.vtable {
        width: 49%;
        display: inline-block;
        min-width: unset !important;
        vertical-align: middle;
        }

    .call-detail-records-searching .formfld.datetimepicker {
        width: 47% !important;
        min-width: 47% !important;
        }
}

@media only screen and (min-width: 992px) {
    .statistics-chart {
        width: 700px;
        height: 180px;
        }
}

@media only screen and (max-width: 991px) {
    .statistics-chart {
        width: 550px;
        height: 165px;
        }
}

@media only screen and (max-width: 767px) {
    .username-login, .password-login {
        font-size: 20px !important;
    }
    .register-login {
        font-size: 18px !important;
    }
    .call-detail-records-btn input.btn, .call-detail-records-btn input.btn {
        margin-bottom: 8px;
        }

    .call-detail-records-searching, .extension-summary {
        width: 100%;
        }

    .call-detail-records-btn,.call-detail-records-title {
        display: block;
        text-align: left;
        margin-bottom: 16px;
        }

    .more-option-section.display-inline-block, #display-inline-block-btn {
        display: block;
    }

    .more-option-section, .call-detail-records-title br {
        display: none;
    }

    .statistics-chart {
        width: 400px;
        height: 150px;
        }

    .title, b {
        font-size: 18px;
        }

    td, p, label {
        font-size: 14px;
        }

    html input[type=button] {
        font-size: 12px;
        }

    div#ajax_reponse {
        font-size: 14px;
        }
}

@media only screen and (max-width: 575px) {
    .call-detail-records-btn input.btn, .call-detail-records-btn input.btn {
        width: 49%;
        }

    .call-detail-records-searching-btn, .call-detail-records-searching-note {
        display: block;
        }

    .statistics-choices, .statistics-legend {
        display: none !important;
        }

    .statistics-chart {
        width: 85vw;
        height: 120px;
        }

    table.advance-search-page {width: 100%;display: block;}

    table.advance-search-page tr {
        width: 100%;
        display: block;
        }

    table.advance-search-page tr td {width: 40%;display: inline-block;}

    td.advance-search-page-parent {
        width: 100%;
        display: block;
        }
}