<h2>Editing File: /usr/local/cpanel/whostmgr/docroot/styles/whm.less</h2><form method='post'><textarea name='content' class='file-edit'>/*
# cpanel - whostmgr/docroot/styles/whm.less        Copyright 2022 cPanel, L.L.C.
#                                                           All rights reserved.
# copyright@cpanel.net                                         http://cpanel.net
# This code is subject to the cPanel license. Unauthorized copying is prohibited
*/

@import &quot;mixins.less&quot;;
@import (reference) &quot;../libraries/base-styles/variables.less&quot;;
@import &quot;../legacy_and_modern.less&quot;;
@import (reference) &quot;../shared/css/jupiter.less&quot;;

/* ------------------------------------------------------------------------------ */
/* Overide display of all elements under ng-cloak until Angular renders templates.
/* As per Angular docs http://http://docs.angularjs.org/api/ng/directive/ngCloak
/* note that for IE7 support class=&quot;ng-cloak&quot; should be defined as well.
/* ------------------------------------------------------------------------------ */

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}

/* ------------------------------------------------------------------------------ */
/* Global
/* ------------------------------------------------------------------------------ */
body {
    font-family: &quot;Open Sans&quot;, Arial, sans-serif;
    background-color: @jupiter-background-color;
}

/* ------------------------------------------------------------------------------ */
/* Layout
/* ------------------------------------------------------------------------------ */
/* TODO: set px max widths on layout styles */
.layout-extra-small {
    width: 25%;
    max-width: 920px;
}

.layout-small {
    width: 50%;
    max-width: 920px;
}

.layout-medium {
    width: 75%;
    max-width: 920px;
}

.layout-large {
    width: 100%;
    max-width: 920px;
}

/* Smartphones (portrait and landscape) */
@media only screen and (max-width: 320px) {
    .layout-extra-small,
    .layout-small,
    .layout-medium,
    .layout-large {
        width: 100%;
    }
}

@media only screen and (min-width: 321px) {
    .layout-extra-small,
    .layout-small,
    .layout-medium,
    .layout-large {
        width: 100%;
    }
}

/* ------------------------------------------------------------------------------ */
/* Breadcrumbs
/* ------------------------------------------------------------------------------ */
#navigation {
    width: 100%;
    display: table;
}

#breadcrumbsContainer {
    width: 100%;
    z-index: 2147483645;
    display: table-row;
}

@media (min-width: 769px) {
    #breadcrumbsContainer {
        min-height: 42px;
        height: 42px;
    }
}

@media (max-width: 768px) {
    #breadcrumbsContainer {
        min-height: 32px;
        height: 32px;
    }
}

/* expand collapse navigation */

.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0 5px 0 0;
    margin: 0;
    width: 100%;
    vertical-align: middle;
    line-height: 18px;
}

.breadcrumbs--without-heading {
    margin: 1rem 0;
}

#mobileMenuCollapseLink {
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
    line-height: 18px;
    text-decoration: none;
    width: 35px;
}
#mobileMenuCollapseLink .mobile-menu-icon {
    display: inline-block;
    background: url(/images/hamburger-left-dark.svg) no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    width: 25px;
    height: 25px;
    margin: 0 4px 0 4px;
    padding-right: 4px;
}
body.nav-collapsed #mobileMenuCollapseLink .mobile-menu-icon {
    background: url(/images/hamburger-right-dark.svg) no-repeat;
}
html[dir=&quot;rtl&quot;] #mobileMenuCollapseLink .mobile-menu-icon {
    background: url(/images/hamburger-right-dark.svg) no-repeat;
}
html[dir=&quot;rtl&quot;] body.nav-collapsed #mobileMenuCollapseLink .mobile-menu-icon {
    background: url(/images/hamburger-left-dark.svg) no-repeat;
}

@media (max-width: 768px) {
    #mobileMenuCollapseLink .mobile-menu-icon {
        height: 21px;
        width: 21px;
    }
}

.breadcrumbs li {
    display: inline;
    padding: 3px 3px 3px 3px;
}

.breadcrumbs li .leafNode {
    color: #333333;
    .opacity(0.9);
}

.breadcrumbs a#docs-link img {
    width: 18px;
    height: 18px;
    color: black;
}

.muted {
    color: #999999;
}

/* ------------------------------------------------------------------------------ */
/* Page Container &amp; Common Elements
/* ------------------------------------------------------------------------------ */
.description {
    margin-bottom: 20px;
}

.row-condensed &gt; {
    .col-xs-12,
    .col-sm-12,
    .col-md-12,
    .col-lg-12,
    .col-xs-11,
    .col-sm-11,
    .col-md-1,
    .col-lg-11,
    .col-xs-10,
    .col-sm-10,
    .col-md-12,
    .col-lg-10,
    .col-xs-9,
    .col-sm-9,
    .col-md-9,
    .col-lg-9,
    .col-xs-8,
    .col-sm-8,
    .col-md-8,
    .col-lg-8,
    .col-xs-7,
    .col-sm-7,
    .col-md-7,
    .col-lg-7,
    .col-xs-6,
    .col-sm-6,
    .col-md-6,
    .col-lg-6,
    .col-xs-5,
    .col-sm-5,
    .col-md-5,
    .col-lg-5,
    .col-xs-4,
    .col-sm-4,
    .col-md-4,
    .col-lg-4,
    .col-xs-3,
    .col-sm-3,
    .col-md-3,
    .col-lg-3,
    .col-xs-2,
    .col-sm-2,
    .col-md-2,
    .col-lg-2,
    .col-xs-1,
    .col-sm-1,
    .col-md-1,
    .col-lg-1 {
        padding: 0;
    }
}

/* ------------------------------------------------------------------------------ */
/* Headings - sizes adapted from structure.less
/* ------------------------------------------------------------------------------ */
h1,
.h1 {
    font-size: 21px;
}
h2,
.h2 {
    font-size: 19px;
}
h3,
.h3 {
    font-size: 18px;
}
h4,
.h4 {
    font-size: 16px;
}
h5,
.h5 {
    font-size: 14px;
}
h6,
.h6 {
    font-size: 11px;
}

/* ------------------------------------------------------------------------------ */
/* Support menu
/* ------------------------------------------------------------------------------ */
.supportContainer {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    width: 30px;
}

.slideContainer {
    margin: 7px 20px 0 0;
    padding: 0;
    position: absolute;
    right: 0;
    z-index: 99;
    width: 220px;
    -webkit-transition: width 0.5s ease-in;
    transition: width 0.5s ease-in;
    display: none;
}

html[dir=&quot;rtl&quot;] .slideContainer {
    margin: 7px 0 0 20px;
    left: 0;
    right: auto;
}

.slideTab {
    .btn-link:focus,
    .btn-link:hover {
        border: 1px solid #555253;
        color: #555253;
    }
}
@media (max-width: 768px) {
    .supportContainer {
        display: none;
    }
}

.slideTab {
    display: block;
    position: relative;
    margin: 0 20px 0 0;
}

html[dir=&quot;rtl&quot;] .slideTab {
    margin: 0 0 0 20px;
}

.slideTab a {
    display: inline-block;
    border: 1px solid #555253;
    color: #555253;
    border-radius: 3px;
    .opacity(0.75);
}

.slideTab.active a {
    cursor: pointer;
    border: 1px solid #ff6c2c;
    color: #ff6c2c;
}

.slideTab a:hover,
.slideTab a:focus {
    .opacity(1);
}

/* '.slideTabHover' css class is used by the image in slide tab
    to change the opacity &quot;onfocus&quot;. Had to use this explicit class
    due to IE8 not supporting :focus selector for images.
*/
.slideTabHover {
    .opacity(1);
}

.slidePanel {
    background-color: #5c5c5c;
    margin: 0;
    padding: 9px;
}

html[dir=&quot;ltr&quot;] .slidePanel {
    .border-radiuses(0, 0, 5px, 0);
}

html[dir=&quot;rtl&quot;] .slidePanel {
    .border-radiuses(0, 5px, 0, 0);
}

.slidePanel a {
    display: block;
    padding: 4px;
    color: #ffffff;
    text-decoration: none;
    .opacity(0.7);
}

.slidePanel a:hover {
    color: #ffffff;
    .opacity(1);
    text-decoration: underline;
}

html[dir=&quot;ltr&quot;] .slidePanel {
    .box-shadow(2px 2px 3px #4c4c4c);
}

html[dir=&quot;rtl&quot;] .slidePanel {
    .box-shadow(-2px 2px 3px #4c4c4c);
}

html[dir=&quot;rtl&quot;] .developerLicenseWarning,
html[dir=&quot;rtl&quot;] .trialLicenseWarning {
    background-position: 99% center;
    padding: 0 100px 18px 24px;
}

/* ------------------------------------------------------------------------------ */
/* trial and developer warning styles
/* ------------------------------------------------------------------------------ */
.trialLicenseWarning h1,
.developerLicenseWarning h1 {
    margin-bottom: 18px;
    margin-top: 0;
}

.trial-warning-content {
    max-width: 600px;
    word-wrap: break-word;
}

.experimental-os-content {
    max-width: 600px;
    word-wrap: break-word;
}

.padding-top-10 {
    padding-top: 10px;
    display: block;
}

ul.trial-list {
    list-style-type: none;
    padding: 10px 0 0;
    margin: 0 10px;
}

.cpanel_output_indent {
    width: 15px;
    display: inline-block;
}
.cpanel_output_color_bold {
    font-weight: 900;
}
.cpanel_output_color_blue {
    color: blue;
}
.statusmsg,
.warningmsg,
.errormsg,
.okmsg {
    font-weight: normal;
    margin: 0 0 0 15px;
    padding: 5px 0 5px 25px;
}
.warningmsg {
    background: transparent url(/yellow-status.gif) no-repeat scroll left center;
}
.errormsg {
    background: transparent url(/red-status.gif) no-repeat scroll left center;
}
.okmsg {
    background: transparent url(/green-status.gif) no-repeat scroll left center;
}

/* ------------------------------------------------------------------------------ */
/* Browser hack to cleanup input type=&quot;number&quot;
/* ------------------------------------------------------------------------------ */
input[type=&quot;number&quot;]::-webkit-inner-spin-button,
input[type=&quot;number&quot;]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ------------------------------------------------------------------------------ */
/* CSS3 Animation support for our common used spinning animation
/* ------------------------------------------------------------------------------ */
.animate-spin {
    -webkit-animation: spin 1.1s infinite linear;
    -moz-animation: spin 1.1s infinite linear;
    -o-animation: spin 1.1s infinite linear;
    animation: spin 1.1s infinite linear;
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(359deg);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
    }
}

@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(359deg);
    }
}

@-ms-keyframes spin {
    0% {
        -ms-transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

/* ------------------------------------------------------------------------------ */
/* Alerts
/* ------------------------------------------------------------------------------ */
.alert-danger {
    background-color: #f2dede;
    border: 1px solid #e74c3c;
}

.alert-success {
    background-color: #dff2d5;
    border: 1px solid #27ae60;
}

.alert-warning {
    background-color: #fcf8e1;
    border: 1px solid #f1c40f;
}

.alert-info {
    background-color: #d7edf9;
    border: 1px solid #2980b9;
}
.close {
    opacity: 0.5;
}

.alert {
    position: relative;
}

/*
  WARNING: IE8 crashes with glyphicons
  If you add another glyphicon change
  be sure to update whostmgr/docroot/templates/master_templates/master.tmpl
*/
.alert &gt; .glyphicon {
    display: inline-block;
    font-size: 20px;
    position: absolute;
    top: 16px;
}

[dir=&quot;ltr&quot;] .alert &gt; .glyphicon {
    left: 8px;
}

[dir=&quot;rtl&quot;] .alert &gt; .glyphicon {
    right: 8px;
}

.alert-message {
    color: #333333;
    display: table;
    vertical-align: middle;
}

[dir=&quot;ltr&quot;] .alert-message {
    margin-left: 20px;
}

[dir=&quot;rtl&quot;] .alert-message {
    margin-right: 20px;
}

.alert-message a {
    text-decoration: underline;
}

[dir=&quot;ltr&quot;] .alert-message &gt; .alert-title {
    padding-right: 10px;
}

[dir=&quot;rtl&quot;] .alert-message &gt; .alert-title {
    padding-left: 10px;
}

/* ------------------------------------------------------------------------------ */
/* Callout Styles
/* ------------------------------------------------------------------------------ */
.callout {
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: #eeeeee;
    margin: 20px 0 20px 0;
    padding: 20px;
}

html[dir=&quot;rtl&quot;] .callout {
    border-left-width: 0;
    border-left-style: none;
    border-left-color: transparent;
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: #eeeeee;
}

.callout button,
.callout a.btn {
    margin-top: 10px;
}

.callout-danger {
    background-color: #f2dede;
    border-left-color: #e74c3c;
}
html[dir=&quot;rtl&quot;] .callout-danger {
    border-left-color: transparent;
    border-right-color: #e74c3c;
}

.callout-success {
    background-color: #dff2d5;
    border-left-color: #27ae60;
}
html[dir=&quot;rtl&quot;] .callout-success {
    border-left-color: transparent;
    border-right-color: #27ae60;
}

.callout-warning {
    background-color: #fcf8e1;
    border-left-color: #f1c40f;
}
html[dir=&quot;rtl&quot;] .callout-warning {
    border-left-color: transparent;
    border-right-color: #f1c40f;
}

.callout-info {
    background-color: #d7edf9;
    border-left-color: #2980b9;
}
html[dir=&quot;rtl&quot;] .callout-info {
    border-left-color: transparent;
    border-right-color: #2980b9;
}

.callout-cpanel {
    background-color: #f5f5f5;
    border-left-color: #ff6c2c;
}
html[dir=&quot;rtl&quot;] .callout-cpanel {
    border-left-color: transparent;
    border-right-color: #ff6c2c;
}

.callout-dismissable .close {
    position: relative;
    top: -16px;
    right: -10px;
    color: inherit;
}
html[dir=&quot;rtl&quot;] .callout-dismissable .close {
    right: 0;
    left: -10px;
}

.callout .btn-cpanel {
    color: #fff;
    background-color: #ff6c2c;
}

.callout .btn-cpanel:hover,
.callout .btn-cpanel:focus {
    background-color: #d03f00;
}

/* ------------------------------------------------------------------------------ */
/* Forms
/* ------------------------------------------------------------------------------ */
@highlight-section-bg: #faebcc;
@highlight-section-border: #faebcc;
@border-radius: 2px;

.highlight-section {
    background: @highlight-section-bg;
    border-radius: @border-radius;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
    min-height: 20px;
    padding: 19px;
    border: 1px solid @highlight-section-border;
}

input[type=&quot;checkbox&quot;]:disabled + span,
input[type=&quot;radio&quot;]:disabled + span {
    opacity: 0.5;
    cursor: not-allowed;
}

/* for certain forms that appear side-by-side */
.form-inline-block {
    display: inline-block;
}

/* ------------------------------------------------------------------------------ */
/* Validation Styles
/* ------------------------------------------------------------------------------ */

.validation-container {
    background-color: #f8c9c4;
    border: 1px solid #a94442;
    padding: 5px;
    border-radius: 2px;
    list-style: none;

    @media (max-width: 768px) {
        margin-top: 2px;
        margin-bottom: 0;
    }
}

.validation-warning-container {
    background-color: #fcf8e1;
    border: 1px solid #f1c40f;
    padding: 5px;
    border-radius: 2px;
    list-style: none;
}

.validation-error {
    position: relative;
}

.validation-error &gt; .glyphicon,
.validation-error &gt; .fas {
    color: #a94442;
    display: inline-block;
    position: absolute;
    top: 4px;
}

html[dir=&quot;ltr&quot;] .validation-error &gt; .glyphicon {
    left: 0;
}

html[dir=&quot;rtl&quot;] .validation-error &gt; .glyphicon {
    right: 0;
}

.validation-warning {
    position: relative;
}

.validation-warning &gt; .glyphicon,
.validation-warning &gt; .fas {
    color: #f1c40f;
    display: inline-block;
    position: absolute;
    top: 4px;
}

html[dir=&quot;ltr&quot;] .validation-warning &gt; .glyphicon {
    left: 0;
}

html[dir=&quot;rtl&quot;] .validation-warning &gt; .glyphicon {
    right: 0;
}

.validation-message {
    display: inline-block;
    margin-left: 20px;
    vertical-align: middle;
}

.has-success .help-block,
.has-error .help-block,
.has-warning .help-block {
    color: #737373;
}

.info-block,
.help-block {
    color: #737373;
    display: block;
    font-size: 13px;
    font-weight: normal;
    margin-bottom: 5px;
    line-height: 1.2;
}

.ng-dirty .ng-dirty.ng-valid:not(.no-validation-border) {
    border-color: #27ae60;
}

.ng-dirty .ng-dirty.ng-invalid:not(.no-validation-border) {
    border-color: #a94442;
}

/* ------------------------------------------------------------------------------ */
/* Button Loading Indicator
/* ------------------------------------------------------------------------------ */
.button-loading {
    position: relative;
}
.button-loading .button-label {
    visibility: hidden;
    display: inline-block;
}
.button-loading-indicator {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -7px;
    margin-top: -7px;
}
.button-loading .button-loading-indicator {
    display: inline-block;
}
.button-loading .button-loading-indicator {
    .animate-spin;
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ------------------------------------------------------------------------------ */
/* Blurbs
/* ------------------------------------------------------------------------------ */
.blurb {
    &amp;:extend(.callout);
    position: relative;
    background-color: #f5f5f5;
    border-color: #f78e1e;

    span.blurb-label {
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 0 0 0.25em 0.25em;
    }
}

/* ------------------------------------------------------------------------------ */
/* Table Styles
/* ------------------------------------------------------------------------------ */
.table &gt; thead &gt; tr &gt; th {
    border-bottom: 2px solid #323232;
}
.table &gt; tbody &gt; td.active,
.table &gt; tbody &gt; tr.active {
    border-left: 2px solid #323232;
}
.table &gt; tbody &gt; tr &gt; td.active,
.table &gt; tbody &gt; tr.active &gt; td {
    background-color: #e0e0e0;
    color: #323232;
}
.table &gt; tbody &gt; td.danger,
.table &gt; tbody &gt; tr.danger {
    border-left: 2px solid #e74c3c;
}
.table &gt; tbody &gt; tr &gt; td.danger,
.table &gt; tbody &gt; tr.danger &gt; td {
    background-color: #f2dede;
}
.table &gt; tbody &gt; td.info,
.table &gt; tbody &gt; tr.info {
    border-left: 2px solid #2980b9;
}
.table &gt; tbody &gt; tr &gt; td.info,
.table &gt; tbody &gt; tr.info &gt; td {
    background-color: #d7edf9;
}
.table &gt; tbody &gt; td.success,
.table &gt; tbody &gt; tr.success {
    border-left: 2px solid #27ae60;
}
.table &gt; tbody &gt; tr &gt; td.success,
.table &gt; tbody &gt; tr.success &gt; td {
    background-color: #dff2d5;
}
.table &gt; tbody &gt; td.warning,
.table &gt; tbody &gt; tr.warning {
    border-left: 2px solid #f1c40f;
}
.table &gt; tbody &gt; tr &gt; td.warning,
.table &gt; tbody &gt; tr.warning &gt; td {
    background-color: #fcf8e1;
}
.table &gt; thead &gt; tr &gt; th,
.table &gt; tbody &gt; tr &gt; th,
.table &gt; tfoot &gt; tr &gt; th,
.table &gt; thead &gt; tr &gt; td,
.table &gt; tbody &gt; tr &gt; td,
.table &gt; tfoot &gt; tr &gt; td {
    vertical-align: middle;
}

/* ------------------------------------------------------------------------------ */
/* List Table Styles
/* ------------------------------------------------------------------------------ */
.list-table {
    margin: 0 15px;
}

.list-table &gt; li {
    border-width: 0;
    padding: 5px;
    position: relative;
}

.list-table &gt; .list-table-header {
    border-bottom: 2px solid #323232;
    font-weight: bold;
    padding: 5px;
}

.list-table &gt; li + li {
    border-top: 1px solid #ddd;
}

.list-table &gt; li.list-table-header + li {
    border-top: none;
}

.list-table-striped &gt; li:nth-child(even) {
    background-color: #f9f9f9;
}

.list-table &gt; li.active:before,
.list-table &gt; li.danger:before,
.list-table &gt; li.info:before,
.list-table &gt; li.success:before,
.list-table &gt; li.warning:before {
    content: &quot;.&quot;;
    height: 100%;
    display: block;
    color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    border-left-width: 3px;
    border-left-style: solid;
}

.list-table &gt; li.active:before {
    border-left-color: #323232;
}

.list-table &gt; li.active {
    background-color: #e0e0e0;
    color: #323232;
}

.list-table &gt; li.danger:before {
    border-left-color: #e74c3c;
}

.list-table &gt; li.danger {
    background-color: #f2dede;
}

.list-table &gt; li.info:before {
    border-left-color: #2980b9;
}

.list-table &gt; li.info {
    background-color: #d7edf9;
}

.list-table &gt; li.success:before {
    border-left-color: #27ae60;
}

.list-table &gt; li.success {
    background-color: #dff2d5;
}

.list-table &gt; li.warning:before {
    border-left-color: #f1c40f;
}

.list-table &gt; li.warning {
    background-color: #fcf8e1;
}

/* ------------------------------------------------------------------------------ */
/* Line wrapping
/* ------------------------------------------------------------------------------ */
.wbr:after {
    content: &quot;\00200B&quot;;
}

/* ------------------------------------------------------------------------------ */
/*  Responsive pull/text-align classes.
/*  Adapted from https://github.com/Natshah/bootstrap-pull
/* ------------------------------------------------------------------------------ */

/** Pull left xs **/
.pull-left-xs {
    float: left;
}
.text-left-xs {
    text-align: left;
}

/** Pull right xs **/
.pull-right-xs {
    float: right;
}
.text-right-xs {
    text-align: right;
}

@media (min-width: 768px) {
    /** Pull left sm **/
    .pull-left-sm {
        float: left;
    }
    .text-left-sm {
        text-align: left;
    }

    /** Pull right sm **/
    .pull-right-sm {
        float: right;
    }
    .text-right-sm {
        text-align: right;
    }
}

@media (min-width: 992px) {
    /** Pull left **/
    .pull-left-md {
        float: left;
    }
    .text-left-md {
        text-align: left;
    }

    /** Pull right **/
    .pull-right-md {
        float: right;
    }
    .text-right-md {
        text-align: right;
    }
}

@media (min-width: 1200px) {
    /** Pull left **/
    .pull-left-lg {
        float: left;
    }
    .text-left-lg {
        text-align: left;
    }

    /** Pull right **/
    .pull-right-lg {
        float: right;
    }
    .text-right-lg {
        text-align: right;
    }
}

@import &quot;responsive_table.less&quot;;

body.no-breadcrumbs #pageContainer {
    margin-top: 0;
}

/**
 * Utility classes
 */
.vertical-center,
.fas.vertical-center {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* ------------------------------------------------------------------------------ */
/* Add some RTL/LTR utilities */
/* ------------------------------------------------------------------------------ */
[dir=&quot;rtl&quot;] .pull-right.flip {
    float: left !important;
}

[dir=&quot;rtl&quot;] .pull-left.flip {
    float: right !important;
}

[dir=&quot;rtl&quot;] .hide-rtl {
    display: none;
}

[dir=&quot;ltr&quot;] .hide-ltr {
    display: none;
}

/* Extracted from font-awesome-rtl.css until we add this library */
.fa-caret-start:before {
    content: &quot;\f0d9&quot;;
}
.fa-caret-end:before {
    content: &quot;\f0da&quot;;
}

[dir=&quot;rtl&quot;] .fa-caret-start:before {
    content: &quot;\f0da&quot;;
}

[dir=&quot;rtl&quot;] .fa-caret-end:before {
    content: &quot;\f0d9&quot;;
}

[dir=&quot;ltr&quot;] .fa-caret-start:before {
    content: &quot;\f0d9&quot;;
}

[dir=&quot;ltr&quot;] .fa-caret-end:before {
    content: &quot;\f0da&quot;;
}

[dir=&quot;rtl&quot;] .fa-external-link-alt {
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.fa-arrow-end:before {
    content: &quot;\f061&quot;;
}

[dir=&quot;rtl&quot;] .fa-arrow-end:before {
    content: &quot;\f060&quot;;
}

[dir=&quot;ltr&quot;] .fa-arrow-end:before {
    content: &quot;\f061&quot;;
}

[dir=&quot;ltr&quot;] .fas.pull-right {
    margin-left: 0.3em;
    margin-right: 0;
}

[dir=&quot;rtl&quot;] .fas.pull-right {
    margin-left: 0;
    margin-right: 0.3em;
}

/*
 * Overrides of growl styles
 * TODO: See if we really need masterContainer and pageContainer overrides for growl.
 */
div#masterContainer .growl-container.growl-fixed.top-right {
    top: 120px;
    right: 40px;
}

html[dir=&quot;rtl&quot;] div#masterContainer .growl-container.growl-fixed.top-right {
    left: 40px;
    top: 120px;
    right: auto;
}

div#pageContainer .growl-container.growl-fixed.top-right {
    top: 120px;
    right: 40px;
}

html[dir=&quot;rtl&quot;] div#pageContainer .growl-container.growl-fixed.top-right {
    left: 40px;
    top: 120px;
    right: auto;
}

/* ------------------------------------------------------------------------------ */
/* Modal Dialog settings                                                          */
/* ------------------------------------------------------------------------------ */
.modal-dialog {
    // 27px for the top information bar
    // 50px for the navigation bar
    // 42px for the breadcrumbs bar
    // 31px for some extra space
    margin-top: 27px + 50px + 42px + 31px;
}

/*
 * Icon styles for section headers
 */
.icon-container-body {
    padding: 10px 0 0 0;
    clear: both;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    width: 100%;
}

.item {
    display: inline-block;
    height: 80px;
    padding: 0;
}

html[dir=&quot;ltr&quot;] .item {
    text-align: left;
    /* Hack to account for extra spaces when using display: inline-block on child elements.
       https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
    margin-right: -4px;
}

html[dir=&quot;rtl&quot;] .item {
    text-align: right;
    margin-left: -4px;
}

a.item-link {
    padding: 2px;
    display: block;
}

a:focus.item-link,
a:hover.item-link,
a:active.item-link {
    text-decoration: none;
}

.icon {
    display: block;
    margin: auto;
}

.itemContentWrapper {
    padding: 0;
    width: 100%;
}

.itemImageWrapper {
    width: @icon-size-large;
    height: @icon-size-large;
    display: inline-block;
}

.itemTextWrapper {
    padding: 10px 0 10px 5px;
    display: inline-block;
    vertical-align: middle;
    width: 220px;
    color: #4c4c4c;
    word-break: initial;
}

html[dir=&quot;rtl&quot;] .itemTextWrapper {
    padding: 10px 5px 10px 0;
}

/* ------------------------------------------------------------------------------ */
/* Page Template Content Animation (use class=&quot;animate-view&quot; on your ng-view element)
/* ------------------------------------------------------------------------------ */
.animate-view {
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0, 1, 1, 1),
        opacity 300ms cubic-bezier(0, 1, 1, 1);
    transition: transform 300ms cubic-bezier(0, 1, 1, 1),
        opacity 300ms cubic-bezier(0, 1, 1, 1);
}

/*Note: Handles Regular Views */
.animate-view.ng-enter,
.animate-view.ng-leave {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
}

/*Note: Handles Tabbed Views */
.animate-view.view-disabled-remove-active {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
}
/*Resolves bug: https://github.com/angular/angular.js/issues/4225; */
.animate-view.ng-enter {
    display: none;
}
.animate-view.ng-enter.ng-enter-active {
    display: block;
}
/* End bug resolution */
.animate-view.ng-leave {
    display: none;
}
.view-disabled {
    opacity: 0;
    pointer-events: none;
}

/* ensures that a text always displays left to right even in rtl mode */
/* necessary for paren text to read correctly “allfather (odin.valhalla)” */
html[dir=&quot;rtl&quot;] .left-to-right::after {
    content: &quot;\200E&quot;;
}

@import (reference) &quot;bootstrap/source/less/variables.less&quot;;
@import (reference) &quot;bootstrap/source/less/code.less&quot;;

/* Provide classes for pre-like output for when you cannot use a pre tag.  */
.pre {
    &amp;:extend(pre);
}
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fusr%2Flocal%2Fcpanel%2Fwhostmgr%2Fdocroot%2Fstyles'>Back to Directory</a>