Viewing File: /usr/local/cpanel/whostmgr/docroot/templates/backup/common.less

@import "mixins.less";

#contentContainer {
    #content {
        position: relative;
    }
    @media only screen and (max-width: 580px) {
        html #content .field,
        html #content .field-extra {
            width: 96%;
        }
    }
    /* HACK: webkit based browsers positioning of the open nav-action-container is off
       TODO: investigate this further and also review oher quicks noticed in IE */
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        #content .nav-action-container {
            top: 36px;
            right: 2px;
        }
        #content #nav_bottom .nav-action-container {
            top: -152px;
        }
    }

    /* ------------------------------------------------------------------------------ */
    /* Unified Style Workarounds
    /* ------------------------------------------------------------------------------ */
    #content button {
        min-width: 0;
        text-align: center;
    }
    /* TODO: remove this workaround once phpless is upgraded */
    #content button.secondary,
    #content .enable-action {
        filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
    }
    .cjt-wrapped-select > .cjt-wrapped-select-skin {
        background-color: #ffffff;
        padding: 7px 4px;
        min-width: 100%;
    }
    html[dir="ltr"] .cjt-wrapped-select > .cjt-wrapped-select-skin {
        text-align: left;
    }
    html[dir="rtl"] .cjt-wrapped-select > .cjt-wrapped-select-skin {
        text-align: right;
    }

    .field-text + .field-extra > p {
        margin-top: 16px;
    }
    .field-extra > p {
        margin-bottom: 0;
    }
    .field-extra > p + p,
    .field-extra > p + button {
        margin-top: 18px;
    }
    #content button:disabled {
        .box-shadow(none);
    }

    /* ------------------------------------------------------------------------------ */
    /* Backup Configuration Page
    /* ------------------------------------------------------------------------------ */
    #content input[type="text"],
    #content input[type="password"] {
        min-width: 0;
    }
    fieldset legend {
        text-indent: 1%;
    }
    fieldset legend h4 {
        margin-bottom: 0;
    }
    #content fieldset > div,
    .wide-options-container,
    .advanced-options-container {
        margin: 1% 10px;
        padding: 0;
    }
    #content .field {
        width: 46%;
    }
    #content .field-extra,
    #content fieldset div.field,
    #content fieldset div.inline {
        padding: 1%;
    }
    #content fieldset > div.cjt-notice {
        padding: 0px;
    }

    form.complex#destination_form,
    form.complex#key_form {
        border-top: none;
        margin-top: -1px;
        .border-radiuses(0, 4px, 4px, 0);
    }
    form.complex.extended {
        border-bottom: none;
        margin-bottom: 0;
        .border-radiuses(4px, 0, 0, 4px);
    }
    .field-left {
        float: left;
        margin-top: 7px;
    }
    .field-right {
        text-align: right;
    }
    .field-right * {
        text-align: left;
    }
    .form-actions-group {
        margin-bottom: 18px;
    }

    /* ------------------------------------------------------------------------------ */
    /* Calendar styles (currently building on yui-skin-sam)
    /* ------------------------------------------------------------------------------ */
    #content .yui-calcontainer {
        background-color: #e5e5e5;
        border-color: #d9d9d9;
        .border-radius(4px);
    }
    html #content .yui-calendar a.calnav {
        background-color: #ffffff;
        .border-radius(4px);
        border-color: #c1c1c1;
        padding: 5px 10px;
    }
    #content .yui-calendar td.calcell {
        padding: 4px 8px;
    }
    #content .yui-calendar td.selected {
        background-color: #808080;
    }
    #content .yui-calendar td.calcell a:focus {
        border: none;
    }

    #content .yui-calendar td.calcell.selected a,
    #content .yui-calendar td.calcell.calcellhover a {
        background: none;
        color: #ffffff;
    }
    #content .yui-calendar td.calcell.calcellhover {
        background-color: #0066cc;
    }

    /* ------------------------------------------------------------------------------ */
    /* Filter and pagination styles
    /* ------------------------------------------------------------------------------ */
    #content .filter {
        color: #7d7d7d;
        padding-left: 25px;
        background: #ffffff url(/images/mag-glass.png) no-repeat 5px center;
        box-shadow: 0 1px 1px rgba(0, 0, 1, 0.094) inset;
    }
    html[dir="rtl"] #content .filter {
        background-position: 99% center;
        padding-left: 0;
        padding-right: 25px;
    }
    .filter-container {
        position: relative;
        display: inline-block;
    }
    .filter-container input {
        padding-right: 24px;
    }
    .clear-filter {
        background: url(/images/filter-cancel.png) 0 0 no-repeat;
        cursor: pointer;
        position: absolute;
        top: 5px;
        height: 24px;
        width: 24px;
        display: none;
    }
    html[dir="ltr"] .clear-filter {
        right: 5px;
    }
    html[dir="rtl"] .clear-filter {
        left: 5px;
    }
    /* ------------------------------------------------------------------------------ */
    /* Notice Styles
    /* ------------------------------------------------------------------------------ */
    .cjt-pagenotice-container .cjt-notice {
        .border-radius(4px);
        .box-shadow(0 2px 2px #999999);
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#999999')"; /* For IE 8 */
        filter: progid:DXImageTransform.Microsoft.Shadow(
                Strength=2,
                Direction=135,
                Color="#999999"
            ); /* For IE 5.5 - 7 */
        margin-bottom: 18px;
    }
    .cjt-pagenotice-container .cjt-notice .bd {
        background: none no-repeat scroll 0 0 transparent;
        .border-radius(4px);
        border: none;
        color: #ffffff;
    }

    .cjt-pagenotice-container .cjt-notice-content {
        font-size: 15px;
        word-wrap: break-word;
    }
    .cjt-pagenotice-container .cjt-notice-content ul {
        margin-bottom: 0;
    }
    #content .cjt-pagenotice-container .cjt-notice .bd a:link,
    #content .cjt-pagenotice-container .cjt-notice .bd a:active,
    #content .cjt-pagenotice-container .cjt-notice .bd a:visited {
        text-decoration: underline;
        color: #ffffff;
    }
    #content .cjt-pagenotice-container .cjt-notice .bd a:hover {
        text-decoration: none;
    }
    .cjt-pagenotice-container .cjt-notice-error,
    div.error {
        .gradient(#DD5952, #BC3E33);
    }
    .cjt-pagenotice-container .cjt-notice-error .bd {
        background-image: url(/images/notice-error.png);
        border: 1px solid #990000;
    }
    .cjt-pagenotice-container .cjt-notice-error .close {
        text-shadow: 0 1px 0 #990000;
    }
    .cjt-pagenotice-container .cjt-notice-success {
        .gradient(#6cbd58, #5fa74e);
    }
    .cjt-pagenotice-container .cjt-notice-success .bd {
        background-image: url(/images/notice-success.png);
        border: 1px solid #006600;
    }
    .cjt-pagenotice-container .cjt-notice-success .close {
        text-shadow: 0 1px 0 #006600;
    }
    .cjt-pagenotice-container .cjt-notice-info {
        .gradient(#65b9d9, #4a9cbc);
    }
    .cjt-pagenotice-container .cjt-notice-info .bd {
        background-image: url(/images/notice-info.png);
        border: 1px solid #3c829e;
    }
    .cjt-pagenotice-container .cjt-notice-info .close {
        text-shadow: 0 1px 0 #3c829e;
    }
    .cjt-pagenotice-container .cjt-notice-warn {
        .gradient(#F6C167, #F3B03B);
    }
    .cjt-pagenotice-container .cjt-notice-warn .bd {
        background-image: url(/images/notice-warning.png);
        border: 1px solid #da961f;
    }
    .cjt-pagenotice-container .cjt-notice-warn .close {
        text-shadow: 0 1px 0 #da961f;
    }
    .cjt-pagenotice-container .cjt-notice-closable {
        cursor: pointer;
    }
    .close {
        color: #ffffff;
        cursor: pointer;
        font-size: 28px;
        .opacity(0.2);
        position: relative;
        top: 8px;
    }

    .close:hover {
        .opacity(0.4);
    }
    #destinations_table .cjt-pagenotice-container .cjt-notice {
        margin-bottom: 0;
    }

    /* ------------------------------------------------------------------------------ */
    /* Section Structure
    /* ------------------------------------------------------------------------------ */
    .section-heading {
        padding-top: 10px;
    }

    .section-body {
        border-top: 1px solid #cccccc;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 2px;
    }

    /* ------------------------------------------------------------------------------ */
    /* Button Styles
    /* ------------------------------------------------------------------------------ */
    button div.spinner {
        font-size: 14px;
        position: absolute;
        text-align: center;
        margin-left: -6px;
        display: none;
    }

    button div.button-text {
        .opacity(1);
        white-space: nowrap;
    }
    #content button.loading {
        background: #ffffff;
        border-color: #888888;
    }
    button.loading div.spinner {
        display: block;
    }
    button.loading div.button-text {
        color: #888888;
        .opacity(0.2);
    }
    .btn-cancel,
    .btn-cancel {
        min-width: 102px;
        display: inline-block;
        *display: inline; /* IE7 inline-block hack */
        *zoom: 1;
        padding: 0 5px 0 5px;
        margin: 10px 4px 7px 4px;
        text-align: center;
    }

    .enable-all-box {
        display: inline-block;
        vertical-align: middle;
        background: #ffffff;
        padding: 2px 3px;
        font-size: 12px;
        color: #999999;
        line-height: 12px;
        border: 1px solid #cccccc;
    }

    .arrow-toggle {
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 0;
        margin-left: 4px;
        margin-right: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #999999;
    }
    html[dir="rtl"] .arrow-toggle {
        margin-left: 0;
        margin-right: 4px;
    }

    /* ------------------------------------------------------------------------------ */
    /* Utility and Mask Styles
    /* ------------------------------------------------------------------------------ */
    .read-only {
        cursor: not-allowed;
    }
    .table-row-stripe-even {
        background-color: #f9f9f9;
    }
    .italic {
        font-style: italic;
    }
    .bold {
        font-weight: bold;
    }
    .focus {
        position: relative;
        z-index: 9000;
    }
    .center {
        text-align: center;
    }
    .hidden {
        display: none;
    }
    .block {
        display: block;
    }
    .inline-block {
        display: inline-block;
    }
    .float-content:after {
        content: ".";
        visibility: hidden;
    }
    .float-content > div {
        float: left;
    }
    html[dir="rtl"] .float-content > div {
        float: right;
    }
    .slideContainer {
        z-index: 9000;
    }
    #content div#focus_mask,
    #content div#table_mask {
        position: absolute;
        z-index: 8000;
        background-color: #f3f3f3;
        margin: 0;
        .opacity(0.6);
        padding: 0;
    }
    div#focus_mask,
    div#table_mask {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    div#table_mask img {
        display: none;
    }
    div#table_mask.loading img {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -18px;
        margin-top: -32px;
    }

    /* ------------------------------------------------------------------------------ */
    /* Error Styles
    /* ------------------------------------------------------------------------------ */
    #content div.error {
        color: #ffffff;
        .border-radius(4px);
    }
    div.error .error-messages {
        background: url(/images/notice-error.png) no-repeat left center;
        min-height: 28px;
        padding-left: 28px;
        padding-top: 1px;
        width: 100%;
    }
    div.error input[type="text"],
    div.error input[type="password"] {
        width: 98%;
    }
    .field.error > label {
        color: #ffffff;
    }
    div.error input {
        border: 1px solid #990000;
    }
    div.error-messages {
        margin: 5px 0 0;
        padding: 0;
    }
    div.error-messages * {
        display: none;
    }
    div.error-messages span.error {
        display: block;
        font-weight: bold;
        margin: 2px 2px 5px;
        padding: 2px 0;
    }

    /* ------------------------------------------------------------------------------ */
    /* Advanced/Wide Option Container Styles
    /* ------------------------------------------------------------------------------ */
    .advanced-options-container div.field,
    .wide-options-container div.inline {
        margin: 1%;
    }
    .advanced-options-container div.inline label:first-child {
        display: inline-block;
    }
    .advanced-options-container div.inline label:first-child {
        margin-left: 0px;
    }
    .advanced-options-container div.inline label {
        margin-left: 3%;
    }
    .wide-options-container h5 {
        padding: 7px 0 7px 32px;
        margin-bottom: 0;
    }
    .inactive {
        .opacity(0.4);
    }
    .collapsed div,
    .collapsed h5 {
        display: none;
    }
    .collapsed div:first-child {
        display: inline-block;
    }
    .collapsed div.inline:first-child {
        display: none;
    }

    /* ------------------------------------------------------------------------------ */
    /* Checkbox Dependent Inputs
    /* ------------------------------------------------------------------------------ */
    .dependent-checkbox .advanced-options-container.collapsed {
        display: none;
    }

    /* ------------------------------------------------------------------------------ */
    /* Table Styles
    /* ------------------------------------------------------------------------------ */
    .table td {
        vertical-align: middle;
    }
    .table td > img {
        vertical-align: text-bottom;
    }
    #content #new_destination_field {
        width: 96%;
    }
    #new_destination {
        vertical-align: top;
    }
    #destinations_table,
    #table_restore {
        table-layout: fixed;
    }
    #restore_name_header {
        width: 15%;
    }
    #restore_type_header {
        width: 25%;
    }
    #restore_source_header {
        width: 20%;
    }
    #restore_status_header {
        width: 20%;
    }
    #restore_actions_header {
        width: 15%;
        min-width: 120px;
    }
    html[dir="rtl"] #restore_actions_label {
        padding-left: 60px;
    }
    #destinations_notice.cjt-pagenotice-container .cjt-notice,
    #table_restore.cjt-pagenotice-container .cjt-notice {
        margin-top: 1%;
        margin-bottom: 0;
    }
    #destination_name_header {
        width: 20%;
    }
    #destination_type_header {
        width: 20%;
    }
    #destination_system_header {
        width: 10%;
    }
    #destination_status_header {
        width: 10%;
    }
    #destination_actions_header {
        width: 30%;
        text-align: center;
    }
    #destinations_table th,
    #destinations_table td {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    html[dir="rtl"] #destinations_table.table thead th,
    html[dir="rtl"] #destinations_table.table tbody td {
        text-align: right;
    }
    .edit-link,
    .validate-link,
    .predelete-link,
    .delete-link,
    .view-link {
        margin-right: 4px;
    }
    .row-actions button,
    .row-actions button:disabled {
        border: 0;
        cursor: pointer;
        width: auto;
        padding: 5px 4px 5px 20px;
        text-decoration: underline;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: 1px 4px;
        font-size: 13px;
        line-height: 16px;
        box-shadow: none;
    }
    html[dir="rtl"] .row-actions button,
    html[dir="rtl"] .row-actions button:disabled {
        background-position: right 4px;
        padding: 5px 20px 5px 4px;
    }

    .row-actions button:focus {
        border-collapse: separate;
        outline: none;
    }
    .row-actions button:focus,
    .row-actions button:hover {
        .border-radius(4px);
        text-decoration: none;
        background-color: #ffffff;
        .box-shadow(0px 0px 0px 1px #0066cc);
    }
    .row-actions .edit-link {
        background-image: url(/images/m-ico-edit.png);
    }
    .row-actions .validate-link {
        background-image: url(/images/m-ico-validate.png);
    }
    .row-actions .delete-link,
    .row-actions .predelete-link {
        background-image: url(/images/m-ico-delete.png);
    }
    .row-actions .view-link {
        background-image: url(/images/view-icon-24.png);
    }
    .row-actions .toggle-link,
    .row-actions .canceldelete-link {
        background-image: url(/images/m-ico-disable.png);
    }

    /* ------------------------------------------------------------------------------ */
    /* Key List Styles
    /* ------------------------------------------------------------------------------ */
    ul#key_list {
        background-color: #ffffff;
        border-color: #cccccc;
        border-style: solid;
        .border-radius(3px);
        border-width: 0 1px 1px 1px;
        color: #000000;
        max-height: 145px;
        overflow-y: auto;
        overflow-x: hidden;
        position: absolute;
        margin: 0;
        z-index: 10;
        list-style: none;
        padding-left: 5px;
    }
    ul#key_list li:first-child {
        border-top: none !important;
    }
    ul#key_list li {
        padding: 1% !important;
    }
    ul#key_list li.selected {
        background-color: #0066cc;
        color: #ffffff;
    }
    ul#key_list li.select-key:hover {
        background-color: #4c4c4c;
        cursor: pointer;
        color: #ffffff;
    }
    ul#key_list li.generate-key {
        text-align: center;
    }

    /* ------------------------------------------------------------------------------ */
    /* User Selection Styles
    /* ------------------------------------------------------------------------------ */
    .table-spinner {
        position: absolute;
        text-align: center;
        padding: 0;
        margin: 0;
        display: none;
        z-index: 8000;
    }
    #content .table-spinner-loading {
        display: block;
        background: url(/images/loading-arrows-64.gif) no-repeat center;
    }
    .selector a {
        .border-radius(4px);
    }
    .selector a:focus {
        .box-shadow(0px 0px 0px 2px #ABABAB);
    }
    #content select:focus + .cjt-wrapped-select-skin,
    .jumper:focus {
        border: 1px solid #0066cc;
        outline: none;
    }
    .nav-container {
        height: 42px;
        width: 100%;
        margin-bottom: 8px;
        display: table;
    }
    .nav-container button,
    .nav-container input,
    .nav-container select {
        vertical-align: middle;
    }
    .nav-container > div {
        margin-top: 8px;
    }
    .nav-action-container {
        display: none;
        position: absolute;
        z-index: 100;
        top: 34px;
        background: #ffffff;
        padding: 10px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        .box-shadow(0 1px 2px rgba(0,0,0,0.1));
    }
    html[dir="ltr"] .nav-action-container {
        right: 0;
    }
    html[dir="rtl"] .nav-action-container {
        left: 0;
    }
    .nav-action-container.open {
        display: block;
    }
    #nav_bottom .nav-action-container {
        top: -154px;
    }
    .nav-action-container ul {
        list-style: none;
        padding: 10px 0 0 0;
        margin: 0;
        width: 100%;
        text-align: right;
    }
    html[dir="rtl"] .nav-action-container ul {
        margin: 0;
        text-align: left;
    }
    .nav-action-container ul:first-child {
        border-bottom: 1px solid #dddddd;
        padding: 0 0 10px 0;
    }
    .backup-enable-all {
        background-color: transparent;
        padding: 0;
        margin: 0;
        text-align: right;
        border: none;
        box-shadow: none;
    }
    .backup-enable-all:hover {
        color: #598fff;
        box-shadow: none;
    }
    .nav-left {
        float: left;
    }
    html[dir="rtl"] .nav-left {
        float: right;
    }
    #content .nav-search {
        padding-left: 25px;
    }
    .nav-right {
        float: right;
        position: relative;
        text-align: center;
    }
    html[dir="rtl"] .nav-right {
        float: left;
    }
    .jumper {
        border: 1px solid #d9d9d9;
        .box-shadow(none);
        color: #7d7d7d;
        cursor: pointer;
        min-width: auto;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .nav-first {
        background: url(/images/dbl-left.png) no-repeat left;
        padding-left: 23px;
    }
    .nav-previous {
        background: url(/images/left.png) no-repeat left;
        width: 25px;
    }
    #content .nav-current {
        min-width: 50px;
        width: 50px;
        color: #7d7d7d;
        text-align: center;
    }
    .nav-next {
        background: url(/images/right.png) no-repeat right;
        width: 25px;
    }
    /* The next page button */
    .nav-last {
        background: url(/images/dbl-right.png) no-repeat right;
        padding-right: 23px;
    }
    #content .nav-show {
        .border-radius(4px);
        min-width: 100px;
    }

    #content .cjt-wrapped-select-skin {
        .border-radius(4px);
        border-color: #d9d9d9;
        background-image: none;
        behavior: none;
    }
    #content .cjt-wrapped-select-icon {
        background-image: url(/images/down.png);
    }
    html[dir="rtl"] #content .cjt-wrapped-select-icon {
        background-position: left center;
    }

    .nav-total {
        display: inline-block;
        vertical-align: middle;
        font-weight: bold;
    }
    a.slider-box {
        display: block;
    }
    a.slider-box:active,
    a.slider-box:visited,
    a.slider-box img {
        border: none;
        outline: none;
    }
    .sortable_row {
        cursor: pointer;
    }
    img.sliders {
        border: none;
        height: 27px;
        width: 94px;
    }
    #content .head_legacy_backup,
    #content .head_backup {
        width: 94px;
        text-align: center;
    }
    #user_selection_table {
        margin-bottom: 0;
    }

    /* ------------------------------------------------------------------------------ */
    /* Restore Page special styles
    /* ------------------------------------------------------------------------------ */
    #destination_select.disabled,
    #local_menuitem.disabled {
        opacity: 0.6;
    }
    #destination_container {
        margin-bottom: 10px;
    }
    #destination_container label {
        font-weight: normal;
    }
    #content td.calcell.restore-today {
        color: #000000;
    }
    #notice_area {
        padding: 0 10px;
    }
    html[dir="rtl"] #user_selection {
        margin-left: 4%;
    }
    #restore_options hr {
        border-top-color: #cccccc;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    html[dir="rtl"] #restore_selection {
        margin-left: 4%;
    }
    #restore_user {
        margin-top: 3px;
        height: 244px;
        min-width: 160px;
        display: block;
        margin-bottom: 4px;
        padding: 6px;
        font-size: 15px;
    }
    #user_selection,
    #restore_selection {
        margin-top: 7px;
    }
    #content td.unavailable a {
        color: #e0e0e0;
    }
    #incremental_select,
    #queue_add_user {
        margin-top: 3px;
    }
    #content .restore-button {
        margin-bottom: 50px;
    }
    #content button.add-to-queue:focus {
        .box-shadow(0px 0px 0px 1px #0066cc);
    }
    button.secondary.selected {
        background-color: #b3d4ff;
        background-image: none;
        border-color: #ffffff;
        color: #0066cc;
    }
    #restore_options {
        margin-top: 9px;
        min-height: 278px;
        max-width: 350px;
        position: relative;
    }
    #restore_confirmation {
        height: 124px;
        display: block;
    }
    html[dir="rtl"] #restore_table.table thead th,
    html[dir="rtl"] #restore_table.table tbody td {
        text-align: right;
    }
    #restore_table td.row-status img {
        margin-top: -3px;
        margin-right: 4px;
    }
    html[dir="rtl"] #restore_table td.row-status img {
        margin-left: 4px;
        margin-right: 0;
    }
    td.row-status img {
        display: inline;
    }
    td.row-actions img {
        display: none;
    }
    td.row-loading img {
        display: inline;
    }
    td.row-loading button {
        display: none;
    }

    #restore_table .row-actions {
        width: 72px;
    }
    td.cjt-notice-container .cjt-notice {
        margin-bottom: 4px;
    }
    .vertical-spacer-25 {
        min-height: 25px;
    }
    .vertical-spacer-52 {
        height: 52px;
    }
    .relative-div {
        position: relative;
    }
    .no-margins {
        margin: 0;
    }
    #content #user_selection.workflow-focus > div,
    #content #restore_calendar.workflow-focus {
        .box-shadow(0px 0px 0px 1px #0066cc);
    }
    #content input[type="checkbox"]:focus {
        .box-shadow(none);
    }
    #content a:focus {
        font-weight: bold;
        white-space: nowrap;
    }
    #content .calheader a:focus,
    #content th .relative-div a:focus {
        .box-shadow(0px 0px 0px 1px #0066cc);
    }
    .float-bottom {
        position: absolute;
        bottom: 0;
    }
    /* ------------------------------------------------------------------------------ */
    /* Restore Page Tab styles
    /* ------------------------------------------------------------------------------ */
    .tab-placer {
        position: absolute;
        z-index: 101;
        top: -5px;
    }
    .tab-style {
        display: inline-block;
        white-space: nowrap;
        margin: 0;
        padding: 10px;
        padding-left: 12px;
        padding-top: 12px;
        font-family: arial, helvetica;
        font-size: 14px;
        z-index: 49;
        color: #0066cc;
        cursor: pointer;
        border-color: none;
        border-color: #ffffff;
        border-top: 1px solid #ffffff;
        border-left: 1px solid #ffffff;
        border-right: 1px solid #ffffff;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border: none;
        height: 20px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        top: 4px;
    }
    html[dir="ltr"] .tab-style {
        margin-left: 8px;
    }
    html[dir="rtl"] .tab-style {
        margin-right: 8px;
    }
    .tab-style:hover {
        background-color: #dfdfdf;
        z-index: 0;
    }
    .active-tab {
        border-color: #dcdfe3;
        border-top: 1px solid #dcdfe3;
        border-left: 1px solid #dcdfe3;
        border-right: 1px solid #dcdfe3;
        height: 20px;
        margin-right: 0;
        padding: 10px;
        cursor: auto;
        color: #000000;
        background-color: #f3f3f3;
    }
    .active-tab:hover {
        background-color: #f3f3f3;
    }
    .tab-contianer {
        position: relative;
        height: 36px;
        margin-right: 5px;
    }
    .tab-content {
        margin-bottom: 60px;
    }
    /* ------------------------------------------------------------------------------ */
    /* Restore page select list styles.
    /* ------------------------------------------------------------------------------ */
    #user_filter {
        border: 1px solid #cccccc;
        .border-radius-bottom(0);
    }
    #restore_user_list {
        height: 242px;
        overflow: auto;
        background: #ffffff;
        padding: 5px;
        position: relative;
        cursor: pointer;
        font-size: 15px;
        .border-radius-top(0);
        .border-radius-bottom(4px);
        border: 1px solid #cccccc;
        box-shadow: 0 1px 1px rgba(0, 0, 1, 0.094) inset;
        margin-top: 0;
    }
    .restore-user-option {
        display: block;
    }
    .restore-user-option.hidden {
        display: none;
    }
    #content #restore_user_list .restore-user-option {
        padding: 6px;
        margin: 4px 0;
        color: #000000;
    }
    #content #restore_user_list .restore-user-option:hover,
    #content #restore_user_list .restore-user-option:focus {
        background: #0066cc;
        color: #ffffff;
    }
    #content #restore_user_list .selected-list {
        background-color: #808080;
        color: #ffffff;
    }
    #content #restore_user_list .disabled-list,
    #content #restore_user_list .disabled-list:hover,
    #content #restore_user_list .disabled-list:focus {
        color: #808080;
        background: #ffffff;
        cursor: auto;
    }
    #content .form-action-button-group {
        margin-top: 25px;
        position: absolute;
    }

    /* ------------------------------------------------------------------------------ */
    /* Restore page select action drop-down menu
    /* ------------------------------------------------------------------------------ */
    #content .gear {
        position: absolute;
        display: block;
        top: -3px;
        border: 1px solid #999999;
        border-radius: 3px;
        padding-top: 2px;
        padding-left: 6px;
        padding-right: 26px;
        padding-bottom: 2px;
        cursor: pointer;
        background: rgb(214, 214, 214);
        z-index: 10001;
    }
    html[dir="ltr"] #content .gear,
    html[dir="ltr"] #content .gear-active {
        right: 0;
    }
    html[dir="rtl"] #content .gear,
    html[dir="rtl"] #content .gear-active {
        left: 0;
    }
    #content .gear-active {
        top: -3px;
        border-top: 1px solid #999999;
        border-left: 1px solid #999999;
        border-right: 1px solid #999999;
        border-bottom: none;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .floating-menu {
        position: absolute;
        top: 22px;
        background: white;
        z-index: 10000;
        border: 1px solid #999999;
        width: 250px;
        padding: 3px;
        border-top-left-radius: 3px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        box-shadow: 1px 3px 4px #666666;
    }
    html[dir="ltr"] .floating-menu {
        right: 0;
    }
    html[dir="rtl"] .floating-menu {
        left: 0;
    }
    #content #remove_menu .menu-item {
        display: block;
        color: #222222;
        font-weight: normal;
        background: white;
        cursor: pointer;
        padding: 5px;
    }
    #content #remove_menu .menu-item:hover,
    #content #remove_menu .menu-item:focus {
        color: #ffffff;
        background: #0066cc;
        border-radius: 0;
        text-decoration: none;
        outline: none;
        box-shadow: none;
    }
    .arrow {
        display: inline-block;
        position: absolute;
        right: 8px;
        top: 3px;
        color: #969696;
        font-size: 8pt;
    }

    .zero-width {
        width: 0;
        padding: 0;
        border: 0;
    }
}

html[dir="ltr"] {
    #contentContainer {
        .cjt-pagenotice-container .cjt-notice .bd {
            background-position: 9px center;
            padding: 9px 45px 9px 45px;
            text-align: left;
        }

        .close {
            float: right;
            right: 4px;
        }
    }
}

html[dir="rtl"] {
    #contentContainer {
        .cjt-pagenotice-container .cjt-notice .bd {
            background-position: 99% center;
            padding: 9px 45px 9px 45px;
            text-align: right;
        }

        .close {
            float: left;
            left: 4px;
        }
    }
}