// Skin.less provides default styles to Admin UI components which appear on live site. It can be changed or overridden using particular site stylesheet.
//
// Import just references of these less files. It doesn't compile them into the CSS code
@import (reference) "./Skin/variables.less";
@import (reference) "./Skin/mixins.less";
@import (reference) "./Skin/utilities.less";
@import (reference) "./Skin/type.less";

// Import full less files
@import "./Skin/tooltip.less";
@import "./Skin/icons-core-ie7.css";

.ContentBody {
    @import "./Skin/icons-core.less";
    // General styles
    .RightAlign {
        float: right;
    }

    .LeftAlign {
        float: left;
    }

    .TextLeft, .DialogBody {
        text-align: left;
    }

    .TextRight, .DialogContent {
        text-align: right;
    }
    // Type - hide element accessibly
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }
    // Hide from screen-readers and browsers
    .hidden {
        display: none !important;
        visibility: hidden !important;
    }

    .clear {
        clear: both;
    }
    // Pagination
    // ----------
    .pagination-items-per-page {
        text-align: right;
        font-size: 0; // handles markup spaces
        font-family: Arial;

        label {
            font-size: @font-size-base;
        }

        select.form-control {
            margin-left: @base-unit * 0.5;
            width: 59px;
        }
    }

    .pagination-pages {
        float: left;
    }

    .pagination-list {
        list-style-type: none;
        .clearfix();

        li {
            float: left;
            margin: 5px;
            display: block;
        }
    }
    // Forms and filters
    // -----------------
    // General styles
    .form-horizontal {
        width: @screen-tablet;
    }

    .form-group {
        margin-bottom: 4px;
        .clearfix();
        clear: both;

        .editing-form-label-cell, .filter-form-label-cell, .filter-form-condition-cell, .filter-form-condition-cell-generated, .filter-form-value-cell {
            width: 33.33333333%;
            float: left;
        }

        .editing-form-value-cell {
            width: 66.66666667%;
            float: left;
        }

        .editing-form-label-cell {
            text-align: right;
        }

        .editing-form-value-cell-offset {
            margin-left: 33.33333333%;
        }
        // html markup of radios is not consistent (divs, tables)
        .radio {
            display: block;

            label {
                margin-right: 6px;
            }
        }

        .radio-list-vertical {
            margin-bottom: 10px;
        }
        // Full width for textarea column
        .textarea-full-width {
            width: 100%;

            .form-control {
                width: 100%;
            }
        }
    }
    // submit button row
    .form-group-submit {
        margin-left: 33.33333333%;
    }
    // buttons row in filter (e.g. report)
    .form-group-buttons {
        margin-left: 33.33333333%;
    }
    // Input widths across the site
    // e.g. in Phone number
    input[type="text"].input-width-15 {
        width: @base-unit * 2;
    }
    // e.g. in Phone number, select in image gallery
    input[type="text"].input-width-20,
    select.input-width-20 {
        width: @base-unit * 3;
    }
    // Specialties
    // Newsletter subscription form
    .NewsletterSubscription {
        .form-horizontal {
            width: 220px;

            .control-label {
                padding-right: 8px;
            }
        }
    }
    // Logon form
    .LogonDialog {
        tr {
            // mysteriously, it works in IE7 as well
            td:first-child {
                text-align: right;
            }
        }
    }
    // Registration form
    .registration-form {
        .form-horizontal {
            width: 400px;
        }
    }
    // Password strength indicator
    .password-strength {
        .password-strength-text {
            line-height: @line-height-100;
        }

        .passw-strength-indicator {
            margin-bottom: @base-unit * 0.25;
            max-width: @input-max-width;
            width: 100%;
            height: (@base-unit * 0.5);
            background-color: @color-gray-150;

            div {
                height: 100%;
            }
        }

        .password-strength-not-acceptable,
        .password-strength-weak,
        .password-strength-acceptable,
        .password-strength-average,
        .password-strength-strong,
        .password-strength-excellent {
            font-weight: bold;
        }

        .passw-indicator-not-acceptable {
            background-color: @color-red-70;
            width: 0;
        }

        .passw-indicator-weak {
            background-color: @color-red-70;
            width: 20%;
        }

        .passw-indicator-acceptable {
            background-color: @color-orange-80;
            width: 40%;
        }

        .passw-indicator-average {
            background-color: @color-blue-100;
            width: 60%;
        }

        .passw-indicator-strong {
            background-color: @color-green-120;
            width: 80%;
        }

        .passw-indicator-excellent {
            background-color: @color-green-100;
            width: 100%;
        }
    }
    // Magnifier watermark in filter/search box
    .form-search-container .icon-magnifier {
        position: relative;
        width: 16px;
        left: -8px;
        margin-left: -16px;
    }
    // Shopping cart
    // -------------
    .CartStepBody .currency-selector div {
        display: inline-block;
        vertical-align: top;
    }
    // Animations
    // ----------
    .spinning {
        display: inline-block;
        animation: spin 1.2s infinite linear;
    }

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

        100% {
            transform: rotate(359deg);
        }
    }
    // The dropdown menu (ul)
    // ----------------------
    .dropdown-menu {
        position: absolute;
        left: 0;
        z-index: @zindex-dropdown;
        display: none; // none by default, but block on "open" of the menu
        float: left;
        min-width: @dropdown-min-width;
        padding: 0;
        margin: 0; // override default ul
        list-style: none;
        font-size: @font-size-base;
        background-color: @dropdown-bg;
        border-radius: @border-radius-small;
        box-shadow: 0 6px 12px rgba(0,0,0,.175);
        background-clip: padding-box;
        font-family: Arial;
        // Aligns the dropdown menu to right
        &.pull-right {
            right: 0;
            left: auto;
        }

        &.pull-up {
            top: auto;
            bottom: 100%;
        }
        // Dividers (basically an hr) within the dropdown
        .divider {
            .nav-divider(@dropdown-divider-bg);
        }

        > li, > .jspContainer > .jspPane > li {
            word-wrap: break-word;
            width: 100%;
            box-sizing: border-box;
            // Links within the dropdown menu
            > a, > span > a {
                color: @dropdown-link-color;
                line-height: @line-height-100;
                padding: @padding-small-horizontal @padding-base-horizontal;
                display: block;
                clear: both;
                font-weight: normal;
                text-decoration: none;
                width: 100%;
                box-sizing: border-box;
            }
        }
    }
    // Button group has relative positioning
    .btn-group .dropdown-menu {
        top: 100%;
    }
    // Hover/Focus state
    .dropdown-menu > li > a,
    .dropdown-menu > li > span > a {
        &:hover,
        &:focus {
            text-decoration: none;
            color: @dropdown-link-hover-color;
            background-color: @dropdown-link-hover-bg;
        }
    }
    // Disable disabled hover
    .dropdown-menu > li.disabled > a,
    .dropdown-menu > li.disabled > span > a {
        background-color: @dropdown-bg;
    }
    // Active state
    .dropdown-menu > .active > a,
    .dropdown-menu > .active > span > a {
        &,
        &:hover,
        &:focus {
            color: @dropdown-link-active-color;
            text-decoration: none;
            outline: 0;
            background-color: @dropdown-link-active-bg;
        }
    }
    // Disabled state
    .dropdown-menu .disabled a {
        .dropdown-disabled();
    }
    // Open state for the dropdown
    .open {
        // Show the menu
        > .dropdown-menu {
            display: block;
        }
        // Remove the outline when :focus is triggered
        > a {
            outline: 0;
        }
    }
    // Breadcrumbs
    // -----------
    .breadcrumb {
        list-style: none;
        color: @breadcrumb-color;

        > li {
            display: inline-block;
            vertical-align: middle;

            & + li:before {
                font-family: @icon-font-name;
                content: @icon-chevron-right; // ">"
                .cms-icon-50;
                margin: 0 @base-unit * 0.25;
                text-align: center;
            }
        }

        a {
            color: @breadcrumb-color;
        }
    }
    // Alerts
    // ------
    .alert {
        padding: (@base-unit * 0.5) (@base-unit * 0.5) (@base-unit * 0.5) (@base-unit * 4);
        margin-bottom: @base-unit * 0.5;
        margin-right: @base-unit;
        display: inline-block;
        z-index: @zindex-alert;
        max-height: 90%;
        overflow: auto;
        position: relative;
        // Headings for larger alerts
        h4 {
            margin-top: 0;
            // Specified for the h4 to prevent conflicts of changing @headingsColor
            color: inherit;
        }
        // Main icon
        .alert-icon {
            position: absolute;
            top: @base-unit * 0.5;
            left: @base-unit;

            i {
                float: left;
                font-size: 30px;

                .RTL & {
                    float: right;
                    padding: 0 0 0 (@base-unit * 0.5);
                }
            }
        }
        // Text
        .alert-label {
            padding: @base-unit * 0.375 @base-unit * 0.5 @base-unit * 0.375 0;
            display: inline-block;
        }
    }

    .alert-success {
        .alert-variant(@alert-success-bg;
        @alert-success-text;
        @alert-success-icon-color;
        @alert-success-icon-close-color
        );
        z-index: @zindex-alert-info;
    }

    .alert-info {
        .alert-variant(@alert-info-bg;
        @alert-info-text;
        @alert-info-icon-color;
        @alert-info-icon-close-color
        );
    }

    .alert-warning {
        .alert-variant(@alert-warning-bg;
        @alert-warning-text;
        @alert-warning-icon-color;
        @alert-warning-icon-close-color
        );
    }

    .alert-error {
        .alert-variant(@alert-error-bg;
        @alert-error-text;
        @alert-error-icon-color;
        @alert-error-icon-close-color
        );
    }
    // Calendar
    // --------
    .datetime-ui-time-textbox {
        width: 45px;
        text-align: right;
        padding-right: 5px;
    }

    .datetime-ui-timeicon-s {
        background-position: -65px 0px;
    }

    .datetime-ui-datepicker-title a i {
        margin-top: 7px;
    }
    // Web parts
    .HiddenButton {
        display: none;
    }
    //Web parts - user contribution
    .EditContributionEdit, .EditContributionDelete {
        padding-right: 5px;
    }
    // Tabs
    // ----
    // Navigation (required by tabs)
    .nav {
        margin-bottom: 0;
        padding-left: 0; // Override default ul/ol
        list-style: none;
        &:extend(.cms-bootstrap .clearfix all);

        > li {
            position: relative;
            display: block;

            > a {
                position: relative;
                display: block;
                padding: @nav-link-padding;

                &:hover,
                &:focus {
                    text-decoration: none;
                    background-color: @nav-link-hover-bg;
                }
            }
            // Disabled state sets text to gray and nukes hover/tab effects
            &.disabled > a {
                color: @nav-disabled-link-color;

                &:hover,
                &:focus {
                    color: @nav-disabled-link-hover-color;
                    text-decoration: none;
                    background-color: transparent;
                    cursor: not-allowed;
                }
            }
        }
        // Open dropdowns
        .open > a {
            &,
            &:hover,
            &:focus {
                background-color: @nav-link-hover-bg;
                border-color: @link-color;
            }
        }
        // Dividers (basically an hr) within the dropdown
        .nav-divider {
            .nav-divider();
        }
        // Prevent IE8 from misplacing imgs
        // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
        > li > a > img {
            max-width: none;
        }
    }
    // Horizontal tabs
    .nav-tabs-container-horizontal .nav-tabs {
        min-height: 32px;
    }

    .nav-tabs {
        padding-top: @base-unit;

        > li {
            line-height: @line-height-200;
        }
            // Actual tabs (as links)
            > li > a, > li > div {
                padding: 0 @padding-base-horizontal;
                text-decoration: none;
                color: @text-color;
                cursor: pointer;

                &:hover, &:focus {
                    background-color: @nav-tabs-active-link-hover-bg;
                }
            }
        // Active state, and it's :hover to override normal :hover
        .active a, .active div {
            &,
            &:hover,
            &:focus {
                background-color: @nav-tabs-active-link-bg;
            }
        }

        .active .dropdown-menu a {
            background-color: @dropdown-bg;
            cursor: pointer;

            &:hover,
            &:focus {
                color: @dropdown-link-hover-color;
                background-color: @dropdown-link-hover-bg;
            }
        }

        .dropdown-menu {
            z-index: @zindex-tabs;
        }

        .dropdown-toggle .tab-title, .active .dropdown-toggle .tab-original-title {
            display: none;
        }

        .active .dropdown-toggle .tab-title, .dropdown-toggle .tab-original-title {
            display: inline;
        }
    }

    &.nav-tabs-bg {
        background: @nav-tabs-container-bg;
    }
    // Horizontal tabs specialities
    .nav-tabs-container-horizontal {
        background-color: @nav-tabs-container-bg;
        //height: @nav-tabs-horizontal-height;
        line-height: @line-height-200;
        padding: 0 @padding-base-horizontal;

        li {
            float: left;

            a > img {
                padding: @padding-small-horizontal;
            }
        }

        .caret {
            line-height: @base-unit * 0.5;
        }
    }
    // Blank site Tabs - commented for preserving existing site tab styles (uncomment or apply to site CSS for getting simple style for tabs on webparts)
    // ---------------
    /*
    @color-tabs-border: @color-gray-100;

    .TabsHeader, .TabContainer {
        margin-bottom: 10px;
    }

    .TabControl, .TabControlLeft, .TabControlRight {
        border-bottom: 1px solid @color-tabs-border;
    }

    .TabControlSelected, .TabControlSelectedLeft, .TabControlSelectedRight {
        border-top: 1px solid @color-tabs-border;
    }

    .TabControlSelectedLeft {
        border-left: 1px solid @color-tabs-border;
    }

    .TabControlSelectedRight {
        border-right: 1px solid @color-tabs-border;
    }
    */
    // UI Dialogs
    // ----------
    .dialog-header {
        background: @color-gray-50;
        padding-left: @base-unit;

        h2 {
            line-height: @dialog-header-height;
            font-weight: @headings-font-weight;
        }

        .dialog-header-title {
            position: relative;
            display: inline;
            font-size: @font-size-huge;
            color: @color-white;
        }

        .dialog-header-action-buttons {
            .pull-right;
            display: table;
            text-align: center;

            .action-button {
                display: table-cell;
                vertical-align: middle;
                height: @dialog-header-height;

                &:hover {
                    background-color: @color-gray-70;
                }

                a {
                    color: @color-gray-100;
                    text-decoration: none;
                    display: table-cell;
                    min-width: @base-unit * 2;
                    vertical-align: middle;
                    height: @base-unit * 2;
                }
            }

            .close-button {
                background-color: @color-gray-70;

                &:hover {
                    background-color: @color-gray-80;
                }
            }
        }
    }
    // Dialog footer
    .dialog-footer,
    .PageFooterLine {
        height: 64px;
        padding: 16px;
        background: #d6d9d6;
        box-sizing: border-box;

        .Buttons {
            .fix-white-space();

            .btn + .btn {
                margin-left: 4px;
            }
        }
    }
    // Columns row in Advanced Export Dialog
    .DialogPageContent {
        .form-group {
            .btn + .btn {
                margin-left: 4px;
            }
        }
    }
    // Adjust dialog form
    .checkbox,
    .radio {
        display: inline-block;
    }
    // UniGrid
    // -------
    .unigrid-actions .btn-icon {
        border: none;
        background: none;
        margin: 0;
        padding: @base-unit * 0.25;
    }

    .table .unigrid-selection {
        vertical-align: middle;
    }
    //
    // Tables
    // ------
    table {
        max-width: 100%;
        background-color: @table-bg;
    }

    th {
        text-align: left;
    }
    // UniMatrix first column
    .first-column {
        width: @table-first-column-width;
    }
    // Main column width 10%
    .main-column-10 {
        width: @main-column-10;
    }
    // Main column width 20%
    .main-column-20 {
        width: @main-column-20;
    }
    // Main column width 30%
    .main-column-30 {
        width: @main-column-30;
    }
    // Main column width 40%
    .main-column-40 {
        width: @main-column-40;
    }
    // Main column width 50%
    .main-column-50 {
        width: @main-column-50;
    }
    // Main column width 60%
    .main-column-60 {
        width: @main-column-60;
    }
    // Main column width 70%
    .main-column-70 {
        width: @main-column-70;
    }
    // Main column width 80%
    .main-column-80 {
        width: @main-column-80;
    }
    // Main column width 90%
    .main-column-90 {
        width: @main-column-90;
    }
    // Main column width 100%
    .main-column-100 {
        width: @main-column-100;
    }
    // Class used in empty columns for filling purposes
    .filling-column {
        width: @main-column-100;
    }
    // Baseline styles
    .table {
        width: 100%;
        white-space: nowrap;
        margin-bottom: @table-margin-bottom;
        font-family: @font-family-base;
        font-size: @font-size-base;
        border-collapse: collapse;

        &.rows-middle-vertical-align {
            td, td.unigrid-actions {
                vertical-align: middle;
            }
        }
        // Links
        a {
            text-decoration: underline;

            &:hover {
                text-decoration: none;
            }
        }

        .SelectableItem {
            color: @link-color;
            text-decoration: underline;
            cursor: pointer;

            &:hover {
                text-decoration: none;
            }
        }
        // Actions in the table header styled as standard links
        .table-header-action {
            color: @link-color;
        }
        // Cells
        thead,
        tbody,
        tfoot {
            > tr {
                > th,
                > td {
                    padding: @table-cell-padding;
                    vertical-align: top;
                    line-height: @table-line-height;
                    font-family: @font-family-base;
                    font-size: @font-size-base;
                }
            }
        }
        // Head cells
        thead {
            th {
                color: @table-th-text-color;
                font-weight: bold;
                background-color: @table-th-bg;
                border-bottom: none;
                // Icon only - obsolete
                &.unigrid-actions-header-empty {
                    .unigrid-menu-panel {
                        padding: @base-unit * 0.125; // (2px)
                    }
                }

                i {
                    color: @table-icon-head-color;
                    padding: 0 0 0 @padding-small-horizontal;
                    cursor: pointer;
                    vertical-align: baseline;
                    // Menu icon
                    &.icon-menu {
                        padding: 0 @padding-small-horizontal 0 0;
                    }
                    // Sorting icon
                    &.icon-caret-up {
                        vertical-align: bottom;
                    }
                }

                a {
                    cursor: pointer;
                    color: @table-th-link-color;

                    &:hover {
                        text-decoration: none;
                    }
                }
            }

            .with-filter th {
                line-height: @base-unit * 2;
            }
        }
        // Body cells
        tbody {
            > tr {
                border-bottom: 1px solid @table-border-color;
                border-top: 1px solid transparent;

                > td {
                    // Actions cell - buttons are styled lower in this less file
                    &.unigrid-actions {
                        vertical-align: top;
                        padding: @base-unit* 0.25 @base-unit * 0.5;
                    }
                    // Flags exception
                    &.Translated,
                    &.Outdated,
                    &.NotAvailable {
                        line-height: @base-unit;
                    }
                }
                // Row borders
                &:hover > td {
                    border-top: 1px solid @table-bg-hover-border;
                    border-bottom: 1px solid @table-bg-hover-border;
                }
                // Flags in pages listing exception
                &:hover td.Translated,
                &:hover td.Outdated,
                &:hover td.NotAvailable {
                    border: none;
                }
            }
            // Used in unimatrix
            .highlighted {
                background-color: @color-orange-100;
            }

            [class^="cms-icon-"], [class*=" cms-icon-"] {
                padding: 0;
            }

            input[type="text"] {
                height: @table-textbox-height;
                padding-top: 0;
                padding-bottom: 0;
            }
        }
        // Remove top border from thead by default
        caption + thead,
        colgroup + thead,
        thead:first-child {
            tr:first-child {
                th, td {
                    border-top: 0;
                }
            }
        }
        // Account for multiple tbody instances
        tbody + tbody {
            border-top: 1px solid @table-border-color;
        }
        // Nesting
        .table {
            background-color: @body-bg;
        }
        // Fix checkbox position in unigrid (bulk actions)
        .radio,
        .checkbox {
            margin: 0;
            padding: 0;

            label {
                margin: 0;
                padding: 0;

                &:before {
                    margin: 0;
                    vertical-align: middle;
                }

                &:before,
                &:after {
                    bottom: @base-unit * 0.125; // special alignment
                    top: auto;
                }
            }
        }
    }
        // Fix nested tables border
        .table table tbody > tr:hover > td {
            border: none;
        }

    .table-width-30 {
        width: 30%;
    }
    // Zebra-striping
    //
    // Default zebra-stripe styles (alternating gray and transparent backgrounds)
    .table-striped {
        > tbody {
            > tr:nth-child(odd) {
                > td,
                > th {
                    background-color: @table-bg-accent;
                }
            }
        }
    }
    // Hover effect
    //
    // Placed here since it has to come after the potential zebra striping
    .table-hover {
        > tbody {
            > tr:hover {
                > td,
                > th {
                    background-color: @table-bg-hover;
                }
            }
        }
    }
    // Table cell sizing
    //
    // Reset default table behavior
    table col[class*="col-"] {
        float: none;
        display: table-column;
    }

    table {
        td,
        th {
            &[class*="col-"] {
                float: none;
                display: table-cell;
            }
        }
    }
    // Table backgrounds
    //
    // Exact selectors below required to override `.table-striped` and prevent
    // inheritance to nested tables.
    .table > thead > tr,
    .table > tbody > tr,
    .table > tfoot > tr {
        > td.active,
        > th.active,
        &.active > td,
        &.active > th {
            background-color: @table-bg-active;
        }
    }
    // Responsive tables
    //
    // Wrap your tables in `.table-scrollable` and we'll make them mobile friendly
    // by enabling horizontal scrolling. Only applies <768px. Everything above that
    // will display normally.
    @media screen and (max-width: @screen-sm) {
        .table-responsive {
            width: 100%;
            margin-bottom: @base-unit;
            overflow-y: hidden;
            overflow-x: scroll;
            border: 1px solid @table-border-color;
            // Tighten up spacing and give a background color
            > .table {
                margin-bottom: 0;
                background-color: @color-white;
                // Ensure the content doesn't wrap
                > thead,
                > tbody,
                > tfoot {
                    > tr {
                        > th,
                        > td {
                            white-space: nowrap;
                        }
                    }
                }
            }
            // Special overrides for the bordered tables
            > .table-bordered {
                border: 0;
                // Nuke the appropriate borders so that the parent can handle them
                > thead,
                > tbody,
                > tfoot {
                    > tr {
                        > th:first-child,
                        > td:first-child {
                            border-left: 0;
                        }

                        > th:last-child,
                        > td:last-child {
                            border-right: 0;
                        }
                    }

                        > tr:last-child {
                            > th,
                            > td {
                                border-bottom: 0;
                            }
                        }
                }
            }
        }
    }
    // CMS buttons above the table
    .table-buttons {
        background-color: @color-gray-150;
        padding: @base-unit;
        margin-bottom: @base-unit * 0.125;
    }
    //Link to simple filter in the advanced filter above the table
    .table-filter-simple-link {
        padding-top: 2*@padding-base-vertical + 0.5*@base-unit + 1; // align the link with the button
    }
    // Width of column for bulk actions
    .table-bulk {
        width: @base-unit * 1.25;
    }
    // Centered checkboxes in permission-matrix
    .permission-matrix {
        & .content-before {
            background-color: @color-green-130;
        }

        & td:first-child, th:first-child {
            text-align: left;
        }

        & td, th {
            text-align: center;
        }

        .warning-icon {
            cursor: default;
            color: @color-warning;
            padding: 0;
        }
    }
    //
    // Unigrid document and file type icons
    // ------------------------------------
    .table {
        .icon-doctype,
        .icon-file-default,
        .icon-folder {
            padding-right: @padding-small-horizontal;
            color: @light-bg-icon-color;
        }
        // ImportGridView
        .warning-icon {
            margin-left: @margin-50;
        }
    }
    //
    // Media library- thumbnail view - file type icons
    // -----------------------------------------------
    .ThumbnailsView .icon-file-default {
        color: @light-bg-icon-color;
    }
    // New document type selection table with no borders and bg
    // .ContentNew class can be removed from here as soon as unigrid control will support .table-blank instead just .table-hover)
    .table-blank tbody > tr, .ContentNewClasses .table tbody > tr {
        border: none;

        &:hover td {
            border: none;
            background: none;
        }
    }
        // New doc type in Pages
        .ContentNewClasses .table tbody > tr td {
            padding: @base-unit * 0.125 @padding-small-horizontal;
        }
    // Unigrid icons
    .unigrid-actions {
        // Text before/after action button in unigrid
        .text-unigrid-action {
            display: inline-table;
            margin-top: @base-unit * 0.125;
        }
        // Unigrid buttons
        .btn-unigrid-action {
            height: auto;
            // Font icons
            &.icon-only {
                vertical-align: middle;
                padding: @base-unit * 0.25;
            }
            // Colors
            // Gray - default
            i {
                display: block;
                color: @color-gray-70;
            }
            // Green - e.g. add, play
            &.icon-style-allow {
                i {
                    color: @color-green-100;
                }
            }
            // Yellow - e.g. exlamation mark
            &.icon-style-warning {
                i {
                    color: @color-warning;
                }
            }
            // Red - e.g. remove, bin
            &.icon-style-critical {
                i {
                    color: @color-red-70;
                }
            }
            // Hover for all
            &:hover {
                i,
                .icon-style-allow,
                .icon-style-warning,
                .icon-style-critical {
                    color: @color-blue-70;
                }
            }
            // Disabled style for all
            &:disabled {
                i,
                .icon-style-allow,
                .icon-style-warning,
                .icon-style-critical {
                    color: @color-gray-70;
                }
            }
        }
        // Unigrid More actions button (...)
        .unigrid-actionmenu {
            display: inline-block;
        }
        // Unigrid image icons - customer can use images as well
        input[type="image"] {
            vertical-align: middle;
            padding: @base-unit * 0.25;
        }
        // Uploader in unigrid
        // Inline styles fix for indent
        >div {
            width: auto !important;
        }
        // Media library files
        .MediaView,
        // Attachements
        .update,
        // Form tab
        .direct-file-uploader,
        [class*="Uploader_"] {
            // Override inline styles - useful also for web dav margin
            width: @base-unit * 1.5 !important;
            height: @base-unit * 1.5 !important;

            i {
                cursor: pointer;
                padding: @base-unit * 0.25;
                margin: 0;
            }
            // disabled state
            & .uploader-button-disabled {
                color: @color-gray-70;

                &:hover {
                    i {
                        cursor: default;
                    }
                }
            }
        }
        // Special hover style
        .MouseOver {
            i:not(.icon-disabled) {
                color: @color-blue-70;
            }
        }
    }
    // Image editor
    // ------------
    .ImageEditorMain {
        border-bottom: 1px solid #999999 !important;
        border-left: 1px solid #999999 !important;
    }

        .ImageEditorMain .MenuHeaderItemSelected {
            border-bottom: 1px solid #999999 !important;
        }

        .ImageEditorMain .Divider {
            background-color: #999999 !important;
        }

    .ImageEditorFrame {
        border: 1px solid #999999 !important;
    }

    .ImageEditorMain .MenuHeaderItem, .ImageEditorMain .MenuHeaderItemSelected {
        text-decoration: none;
        color: #313131;
        height: 26px;
        background: url('../../CMSPages/GetResource.ashx?image=BackgroundImageEditor.png') repeat-x left bottom;
        border-top: 1px solid #999999 !important;
    }
    // Document library
    // ----------------
    // RTL styles
    &.RTL {
        .LibraryUploader {
            padding: 0 0 0 6px;
        }

        .RightAlign {
            float: left;
        }

        .LeftAlign {
            float: right;
        }

        .TextLeft, .DialogBody {
            text-align: right;
        }

        &.RTL .TextRight, .RTL .DialogContent {
            text-align: left;
        }
    }
    // Document library dialog
    .DialogPopupBackground {
        position: absolute;
        top: 0;
        left: 0;
        background-color: #888888;
        opacity: 0.7;
        z-index: 10000;
    }

    .DialogPopupContent {
        opacity: 1;
        background-color: White;
        border: solid 1px black;
        z-index: 10001;

        .EditForm {
            border-style: none;
        }
    }

    .PermissionsListBox {
        width: 276px;
        height: 252px;
    }
    // Document library context menu
    .ContextMenu {
        .LibraryContextMenu, .UserContextMenu {
            background: #403e3d;
            font-size: 14px;
            display: block;
            width: 192px;
            // "Update" item in the context menu
            .LibraryContextUploader {
                .btn {
                    background: #403e3d;
                    box-shadow: none;
                    font-weight: normal;
                    margin: 0px;
                    padding: 8px 16px;
                    min-width: 80px;
                    font-family: @font-family-base;
                    border-radius: 0;
                    width: 192px;
                }
            }
                // Items in the context menu
                .Item, .item-last, .LibraryContextUploader .btn {
                    line-height: 16px;
                    display: block;
                    text-decoration: none;
                    color: #FFFFFF;
                    overflow: hidden;
                }
            // Styles for Silverlight upload ("Update" item in the context menu)
            .LibraryContextUploader, .direct-file-uploader {
                height: 32px !important;
                width: auto !important;
                min-width: 80px;

                input {
                    box-sizing: border-box;
                    width: 100%;
                    text-align: left;
                }
            }

                .LibraryContextUploader .btn:hover, .direct-file-uploader.MouseOver .LibraryContextUploader .btn, .LibraryContextUploader .btn:active {
                    background: #504e4c;
                    color: #FFFFFF;
                    box-shadow: none;
                }



            .ItemPadding, .ItemPaddingDisabled {
                padding: 8px 16px;
                white-space: nowrap;
                display: block;
                vertical-align: middle;
                cursor: pointer;
                // Avoid empty spaces
                word-spacing: -4px;

                span {
                    word-spacing: 0;
                }
                // Hide buttons in context menu (WebDav edit)
                .btn {
                    display: none;
                }
            }

            .ItemPaddingDisabled {
                cursor: default;
            }


                .ItemPadding:hover, .ItemSelected .ItemPadding, .ItemPaddingDisabled:hover, .ItemSelected .ItemPaddingDisabled, .MouseOver {
                    display: block;
                }



            .MouseOver {
                padding: 0px;
            }

            .Item .Name, .ItemLast .Name, .item-last .Name, .Item .NameInactive, .ItemLast .NameInactive, .item-last .NameInactive {
                line-height: 22px;
                text-decoration: underline;
            }

            .Separator {
                height: 1px;
                background-color: #504e4c;
                overflow: hidden;
            }

            .webdav-edit-item {
                .fix-white-space();
                padding: 0;

                button {
                    display: none;
                }

                span {
                    padding: (0.5*@base-unit) @base-unit;
                    display: inline-block;
                    width: 100%;
                }
            }

            .webdav-edit-item-disabled {
                .dropdown-disabled() !important;
                cursor: not-allowed;
            }
        }
    }
    // Document Library uploader above the main unigrid - this sets silverlight dimensions
    .InnerDiv.LibraryUploader {
        .btn {
            -moz-user-select: none;
            border: medium none;
            border-radius: 3px;
            cursor: pointer;
            display: inline-block;
            font-size: 14px;
            .text-semibold();
            height: 32px;
            line-height: 32px;
            margin: 0 0 8px;
            padding: 0 16px;
            text-align: center;
            text-decoration: none;
            vertical-align: middle;
            white-space: nowrap;
            width: auto;
            font-family: Arial;
        }
    }
    // Document Library uploader in unigrid (document Properties) - this sets silverlight dimensions
    .InnerDiv.innerDiv {
        width: 24px;
        height: 24px;
    }
    // Document Library uploader in the context menu
    .InnerDiv.LibraryContextUploader {
        width: 192px;
        height: 32px;
    }

    .DocumentLibrary {
        .form-control {
            height: 2 * @base-unit;
            padding: (@base-unit * 0.25) (@base-unit * 0.5);
            font-size: @font-size-base;
            line-height: @line-height-100;
            color: @color-gray-50;
            vertical-align: baseline;
            background-color: @input-bg;
            border: @input-border-width solid @input-border;
            border-radius: @input-border-radius;
            box-sizing: border-box;
            width: 100%;
            max-width: 320px;
        }

        textarea.form-control {
            height: auto;
        }

        .form-group .control-label {
            padding-right: 16px;
            .text-semibold();
            color: #0f6194;
            display: inline-block;
        }

        .dl-permissions-dialog {
            .control-label {
                padding-right: 0;
            }
        }
        // Core button styles
        .btn {
            display: inline-block;
            padding: 0 @padding-base-horizontal;
            margin: 0 @padding-small-horizontal @padding-small-horizontal 0;
            font-size: @font-size-base;
            .text-semibold();
            line-height: @btn-line-height;
            width: auto;
            height: @btn-height;
            text-align: center;
            vertical-align: middle;
            text-decoration: none;
            cursor: pointer;
            border: none;
            border-radius: @border-radius-large;
            white-space: nowrap;
            font-family: Arial;

            &:focus {
                .tab-focus();
            }

            &:hover {
                color: @btn-default-color;
                text-decoration: none;
            }

            &:active,
            &.active {
                outline: 0;
                background-image: none;
            }
            // Disabled buttons - which are not icons
            &.btn-disabled {
                .action-disabled();
                text-shadow: none;
                box-shadow: none;
            }

            &.btn-icon {
                background: none;
                box-shadow: none;
                color: #403E3D;
                margin: 0;
                padding: 0 8px;
                height: auto;

                &[disabled], &.btn-disabled {
                    opacity: 0.5;
                }
            }
        }

        .uploader-button-disabled {
            opacity: 0.5;
        }

        .btn-group {
            margin: 0 @padding-small-horizontal @padding-small-horizontal 0;

            .btn {
                margin: 0;
            }
            // Line between buttons in btn-group
            > .btn:not(:last-child):not(.dropdown-toggle) {
                border-right: 1px solid @btn-default-border;

                &.active {
                    border-right: 1px solid @btn-secondary-bg;
                }
            }
        }
        // New document button margin
        .direct-file-uploader {
            margin-right: 8px;
        }
        // Default button
        .btn-default {
            color: @btn-default-color;
            background: @btn-default-bg;

            &:hover,
            &:active,
            &.active,
            .open .dropdown-toggle& {
                color: @btn-default-color;
                background-color: @btn-default-box-shadow;
            }

            box-shadow: @btn-default-box-shadow 0 -@btn-shadow-width 0 inset;
        }
        // Primary button
        .btn-primary {
            color: @btn-primary-color;
            background: @btn-primary-bg;

            &:hover,
            &:active,
            &.active,
            .open .dropdown-toggle& {
                color: @btn-primary-color;
                background-color: @btn-primary-box-shadow;
            }

            box-shadow: @btn-primary-box-shadow 0 -@btn-shadow-width 0 inset;
        }
        // Uploader styles
        .uploader {
            background: @uploader-background-color;
            min-width: @uploader-min-width;
            display: table;
            border: none;

            .IE & {
                width: auto;
                min-width: @uploader-min-width-IE;
            }
            // Current file
            .uploader-current-file {
                width: auto;
                color: @link-color;
                text-decoration: underline;
                margin-left: @uploader-margin-horizontal;

                .RTL & {
                    margin-left: auto;
                    margin-right: @uploader-margin-horizontal;
                }
            }
            // Actions for current file
            .uploader-action {
                vertical-align: middle;
            }

            .uploader-external-edit {
                .uploader-action;
                display: inline-block;
            }

            .uploader-delete {
                vertical-align: middle;
            }
            // Upload new file
            .uploader-upload {
                clear: both;
            }

            .uploader-label {
                margin-right: @uploader-margin-horizontal;

                .RTL & {
                    margin-right: auto;
                    margin-left: @uploader-margin-horizontal;
                }
            }
        }
        // Uploader button
        .ButtonUploaderContainer {
            padding: 0;
        }

        .ButtonUploader {
            height: @btn-height;

            img {
                display: none;
            }
        }

        .uploader-icon {
            padding: 0;
            // Fix the alignment in DL properties because uploader does not lie in a button
            margin-top: 4px;
        }

        .upload-control-button > div {
            margin-right: (@base-unit * 0.5); // Solves multiple button spacing
        }

        .MouseOver {
            .btn {
                background-color: @btn-default-box-shadow;
            }
            // Disabled style
            .uploader-button-disabled + .UploaderDiv {
                cursor: not-allowed;
            }
        }

        .btn-unigrid-action i {
            color: @color-gray-70;

            &:hover {
                color: @color-blue-70;
            }
        }

        .table table:not(.table) tbody > tr {
            border: none;

            td {
                padding: 0 8px;
            }
        }

        .table tbody > tr > td {
            &, .unigrid-action {
                vertical-align: middle;
            }
        }

        a {
            color: #0F6194;
            cursor: pointer;
            text-decoration: underline;
        }

        .dialog-header {
            background: #262524;
            padding-left: 16px;

            .dialog-header-title {
                font-size: 24px;
                line-height: 48px;
                font-weight: bold;
                color: #FFFFFF;
                margin: 0;
                padding: 0;
                display: block;
            }
        }

        .PageFooterLine {
            .Buttons {
                .btn {
                    margin-left: 0;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }

        .ModalPopupDialog .icon-file-default {
            padding-top: 4px;
        }
        // Calendar inside document properties
        .btn.btn-icon + .form-control-text {
            margin-left: 8px;
        }

        .form-control-text {
            margin-right: 8px;
            margin-top: 6px;
        }

        .btn-actions {
            margin-bottom: 16px;
            // Checkbox for notifications in the document properties
            .checkbox {
                margin-left: 8px;
            }

            .btn-dropdown {
                display: inline-block;
                margin: 0 8px 8px 0;
                vertical-align: top;

                > .btn.dropdown-toggle {
                    margin: 0;
                }
            }
        }

        .control-group-inline {
            .form-control {
                margin-right: 8px;
            }

            .btn {
                vertical-align: top;
            }

            .PermissionsListBox {
                height: 112px;
            }

            .btn-icon {
                padding-top: 8px;
                padding-bottom: 8px;
            }
        }
        // For upload icon in unigrid in DL Properties
        .unigrid-actions .InnerDiv {
            width: 24px;
            height: 24px;
        }
        // Delete modal dialog
        .dl-dialog-delete-document {
            line-height: 24px;
            // indent checkbox with default look and feel
            .checkbox input {
                margin-right: 8px;
            }
        }


        .cms-icon-80 {
            font-size: 16px;
            height: 16px;
            width: 16px;
            padding: 4px;
        }

        .unigrid-actions .btn-unigrid-action.icon-only {
            vertical-align: middle;
            padding: 4px;
        }

        .EditForm {
            border: none;
            padding: 0;
        }

        .DialogPageBody .PageHeader {
            padding: 0;
        }
        // Upload icons in the document properties
        .unigrid-actions .direct-file-uploader {
            margin-top: 2px;
        }
        // Pager
        .pagination-list {
            a, span:not(.sr-only) {
                position: relative;
                float: left;
                padding: 2px 8px;
                line-height: 20px;
                text-decoration: none;
                background-color: #e5e5e5;
                margin-right: 1px;
                color: #262524;
                z-index: 50;

                &:hover {
                    background-color: #bdbbbb;
                }
            }

            .active {
                a, span {
                    color: #ffffff;
                    background-color: #0f6194;
                    border-color: #0f6194;
                    cursor: default;
                }
            }

            li {
                margin: 0;

                &:first-child > a, &:last-child > a {
                    margin-left: 0;
                    padding: 4px;
                    height: 16px;
                }
            }
        }
    }

    .ModalPopupDialog .DialogPageContent {
        min-height: 80px;
        min-width: 475px;
        padding: 16px;
    }

    .ModalPopupDialog {
        background-color: #FFFFFF;
        height: 176px;
        left: 384px;
        position: fixed;
        top: 211px;
        width: 495px;
        z-index: 9998;
    }

    .WidgetTabsPageHeader .TextRight a {
        color: #ffffff;
    }

    .ModalBackground {
        background-color: #000;
        opacity: 0.35;
    }
    // Categories
    // ----------
    .Categories {
        .DialogLeftBlock {
            height: 100%;
            width: 251px;
            float: left;
            overflow: hidden;
        }

        .DialogRightBlock {
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .PageTitleBreadCrumbsPadding {
            border-bottom: 1px solid #CCCCCC;
            display: block;
            height: 15px;
            padding: 7px 10px;
            width: 100%;
        }
    }

    .DialogTreeAreaSeparator {
        background: url(../../CMSPages/GetResource.ashx?image=Design/Controls/FrameResizer/Horizontal/Resizer.png) repeat-y scroll left top transparent;
        float: left;
        height: 100%;
        width: 7px;
    }
    // Numeric spinner
    // ---------------
    .numeric-up-down {
        .numeric-updown-buttons {
            display: inline-block;
            left: -22px;
            position: relative;
            height: 18px;
            width: 16px;

            .btn {
                margin: 0;
                padding: 0;
                line-height: 8px;
                height: 8px;
                width: 16px;
                font-size: 12px;
                color: #403e3d;
                border: none;
                background: none;
                position: absolute;
                // Vertical position of the "bottom" button calculated from the input height
                top: 14px;
                // Vertical position of the "up" button
                &:nth-child(1) {
                    margin-bottom: 2px;
                    top: 6px;
                }
                // Icons within buttons
                i {
                    font-size: 12px;
                    line-height: 8px;
                    height: 8px;
                }
            }
        }
        // Textbox with up/down arrows
        .form-control {
            padding-right: 24px;
        }
    }
    // Slider
    // ------
    // Horizontal layout
    .slider-horizontal-rail {
        height: 1px;
        background-color: @color-gray-100;
        margin-bottom: 10px;
        margin-top: 10px;
        position: relative;
    }

    .slider-horizontal-handle {
        width: 10px;
        height: 10px;
        margin-top: -5px;
        cursor: pointer;
    }
    // Vertical layout
    .slider-vertical-rail {
        width: 1px;
        height: 150px;
        margin-left: 6px;
        position: relative;
        background-color: @color-gray-100;
    }

    .slider-vertical-handle {
        width: 10px;
        height: 10px;
        margin-left: -4px;
        cursor: pointer;
    }
    // Uniselector
    .UniSelector .btn-actions .btn {
        vertical-align: middle;
    }
    // Context menu
    // ------------
    // Context menu styles
    @context-menu-level0-bg: @color-gray-70;
    @context-menu-level0-hover-bg: @color-gray-80;
    @context-menu-level1-bg: @color-gray-80;
    @context-menu-level1-hover-bg: @color-gray-90;
    @context-menu-level2-bg: @color-gray-90;
    @context-menu-level2-hover-bg: @color-gray-100;

    @dropdown-divider-level0-bg: @dropdown-divider-bg;
    @dropdown-divider-level1-bg: @color-gray-90;
    @dropdown-divider-level2-bg: @color-gray-100;


    &.ContextMenu {
        border: none !important;
    }

    &.ContextMenu,
    .TreeContextMenu,
    .PortalContextMenu {
        border-radius: @border-radius-small;
        box-shadow: 0 6px 12px rgba(0,0,0,.175);
        background-clip: padding-box;
        background: @context-menu-level0-bg;

        .item-last,
        .Item {
            border: none !important;
            display: block;
            height: auto !important;
            text-decoration: none !important;
            text-align: left !important;

            .RTL & {
                text-align: right !important;
            }

            .Name,
            .NameInactive {
                border: inherit !important;
                text-decoration: inherit !important;
                font-size: @font-size-base;
                font-family: @font-family-base;
                line-height: @line-height-80 !important;
                color: @color-white !important;
            }
        }

        .ItemDisabled {
            cursor: not-allowed;

            .Name,
            .NameInactive {
                cursor: not-allowed;
            }
        }


        .ItemPadding {
            padding: (@base-unit * 0.5) @base-unit;
            border: none !important;
            cursor: pointer;
            line-height: @line-height-80;

            .ImgLoader {
                display: inline-block;
                padding: 0px (@base-unit * 0.5);
                height: 15px;
            }

            img {
                display: inline-block;
            }
        }

        .item-last:hover,
        .Item:hover,
        .ItemSelected {
            cursor: pointer;
            background: @context-menu-level0-hover-bg;
        }

        .Separator {
            .nav-divider(@dropdown-divider-level0-bg);
        }
    }

    .PortalContextMenu {
        min-width: @base-unit * 8;
    }

    .TreeContextMenu {
        min-width: @base-unit * 8;

        > .TreeContextMenu {
            box-shadow: none;
        }
    }

    .TreeNewContextMenu {
        min-width: @base-unit * 12;
    }

    .WebPartContextMenu,
    .ZoneContextMenu,
    .PlaceholderContextMenu {
        min-width: @base-unit * 10;
    }
    // Portal context menu - additional styles
    .PortalContextMenu .ItemDisabled {
        .dropdown-disabled() !important;
    }


    .PortalContextMenu.CPMenu {
        display: none;
    }


    &.ContextMenuLevel_1 {
        // extra styles for the second context menu level
        background: @context-menu-level1-bg;

        .Item:hover,
        .ItemSelected {
            background: @context-menu-level1-hover-bg;
        }

        .Separator {
            .nav-divider(@dropdown-divider-level1-bg);
        }
    }

    &.ContextMenuLevel_2 {
        // extra styles for the third context menu level
        background: @context-menu-level2-bg;

        .Item:hover,
        .ItemSelected {
            background: @context-menu-level2-hover-bg;
        }

        .Separator {
            .nav-divider(@dropdown-divider-level2-bg);
        }
    }
    // Button groups
    // --------------------------------------------------
    // Button carets
    //
    // Match the button text color to the arrow/caret for indicating dropdown-ness.
    .caret {
        .btn-default & {
            border-top-color: @btn-default-color;
        }

        .btn-primary & {
            border-top-color: @color-white;
        }
    }

    .dropup {
        & .btn-default .caret {
            border-bottom-color: @btn-default-color;
        }

        .btn-primary {
            .caret {
                border-bottom-color: @color-white;
            }
        }
    }
    // Make the div behave like a button
    .btn-group {
        position: relative;
        display: inline-block;
        vertical-align: middle; // match .btn alignment given font-size hack above
        > .btn {
            position: relative;
            float: left;
            // Bring the "active" button to the front
            &:hover,
            &.active {
                z-index: @zindex-btn-group-active;
            }

            &.active {
                background: @btn-secondary-bg;
                color: @btn-secondary-color;
                box-shadow: @btn-secondary-box-shadow 0 -@btn-shadow-width 0 inset;

                i, .badge {
                    color: @btn-secondary-color;
                }
            }

            &:focus {
                // Remove focus outline when dropdown JS adds it after closing the menu
                outline: none;
            }
            // No space between buttons in the button group
            & + .btn {
                margin-left: 0;
            }
        }
    }

        .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
            border-radius: 0;
        }
        // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
        .btn-group > .btn:first-child {
            margin-left: 0;

            &:not(:last-child):not(.dropdown-toggle) {
                .border-right-radius(0);
            }
        }
        // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
        .btn-group > .btn:last-child:not(:first-child),
        .btn-group > .dropdown-toggle:not(:first-child) {
            .border-left-radius(0);
        }
        // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
        .btn-group > .btn-group {
            float: left;
        }

            .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
                border-radius: 0;
            }

            .btn-group > .btn-group:first-child {
                > .btn:last-child,
                > .dropdown-toggle {
                    .border-right-radius(0);
                }
            }

            .btn-group > .btn-group:last-child > .btn:first-child {
                .border-left-radius(0);
            }
        // On active and open, don't show outline
        .btn-group .dropdown-toggle:active,
        .btn-group.open .dropdown-toggle {
            outline: 0;
        }
        // Negative space for dropdown toggle
        .btn-group > .btn + .dropdown-toggle {
            padding: 0 (@base-unit * 0.5);
        }

        .btn-group > .btn-lg + .dropdown-toggle {
            padding: 0 (@base-unit * 0.75);
        }
    // Checkbox and radio options
    [data-toggle="buttons"] > .btn > input[type="radio"],
    [data-toggle="buttons"] > .btn > input[type="checkbox"] {
        display: none;
    }
    // Fix dropdown toggler height on blank (non-styled) sites
    .dropdown-toggle i {
        line-height: normal;
    }
    // Vertical separated buttons
    // ----------------------
    .btns-vertical {
        display: inline-block;
        vertical-align: top;
        white-space: nowrap;

        .btn {
            margin-bottom: @base-unit * 0.5;
            display: block;
            // No horizontal space between buttons
            + .btn {
                margin-left: 0;
            }
            //
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    // Date time form control with calendar
    // ----------------------
    // Calendar button
    .date-time-picker .btn {
        margin: 0 5px;
    }

    input.datetime-ui-time-textbox {
        width: 27px;
        border: 1px solid #999993;
    }

    .datetime-ui-datepicker-title a {
        height: 22px;
    }

        .datetime-ui-datepicker-title a i.CalendarIcon {
            margin-top: 3px;
        }
    // Link Now
    .calendar-action {
        margin-right: 5px;
    }
    // Group polls
    .PollsEdit .control-label {
        display: inline-block;
    }
    // Width of New/Edit task modal window in the Project management
    .PageHeader.TaskEditModalDialog {
        min-width: 800px;
    }
    // Project list
    .project-list .Actions {
        width: 100%;
        float: left;
    }
    // Sets MultiFileUploader overlay and hides original input, does not affect DirecFileUploaderControl
    .uploader-overlay-div {
        background: rgba(0,0,0,0);
        overflow: hidden;
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;

        > input[type="file"] {
            display: none;
        }
    }
}