style course list events

style course list events

.courselist_results {
	.make-sm-column(12);
	.make-xs-column(12);
	padding-bottom: 30px;

	.event_results {
		.make-sm-column(4);
		.make-lg-column(3);
		.make-xs-column(12);
		.no-padding;

		.course_event {
			margin: 8px;
			height: 200px;
		}
	}
}

.courselist_course {
	.no-padding;
	display: inline-block;
	width: 280px;
	height: 150px;
	border: 7px dashed @light-blue;
	margin: 10px 10px 10px 0;
	&:hover {
		h4 {
			color: @brand-primary;
		}
		color: @brand-primary;
		.box-shadow;
		.transition(0.5s);
	}
	h4 {
		.transition(0.5s);
		color: #333;
	}
	& > a:hover {
			text-decoration: none;
	}
	.yes {
		color: #407d5c;
		background-color: @brand-success;
		width: 100%;
		margin-bottom: 3px;
		text-align: center;
	}
	.no {
		color: #751313;
		background-color: @light-red;
		width: 100%;
		margin-bottom: 3px;
		text-align: center;
	}
	.yesyou {
		color: #751313;
		background-color: #fafc83;
		border-width: 3px;
		border-color: #fafc83;
		width: 100%;
		margin-bottom: 3px;
		text-align: center;
	}
	.course_content {
		background: @body-bg;
		padding-left: 10px;
	}
}

.courselist_course,
.course_main {
	&.hasupcomingevents {
		background: @light-blue;
		.course_content {
			background: @light-blue;

		}
	}
}

.courselist_course_info {
	right: -7px;
	top: -7px;
	padding: 0;
	width: 25%;
	background: @body-bg;
}

.course_eventlist_container {
	background: @brand-success;
	text-align: center;
	color: #333;
	max-height: 150px;
	& > div {
		padding-bottom: 2px;
		&:first-child {
			padding-top: 4px;
		}
		&:last-child {
			padding-bottom: 4px;
		}
		&.course_eventlist_location {
			padding-left: 4px;
			padding-right: 4px;
			word-wrap: break-word;
		}
	}
}

.course_categories {
	& > ul {
		line-height: 23px;
		li {
			display: inline-block;
			span {
				background: rgba(216, 216, 216, 0.5);
				padding: 0 2px 1px 2px;
			}
			// a {
			// 	color: @brand-primary;
			// 	background: rgba(216, 216, 216, 0.5);
			// 	padding: 0 2px 1px 2px;
			// 	&:hover {
			// 		text-decoration: underline;
			// 	}
			// }
		}
	}
}

.courselist_results {
	margin-top: 10px;
}

.courselist_course {
	display: inline-block;
	width: 280px;
	height: 150px;
	border: 7px dashed @light-blue;
	margin: 10px 10px 10px 0;
	padding-right: 0 !important;
	padding-left: 10px !important;
	&:hover {
		h4 {
			color: @brand-primary;
		}
		color: @brand-primary;
		.box-shadow;
		.transition;
	}
	h4 {
		-moz-transition: color 1s;
		color: #333;
	}
	& > a:hover {
			text-decoration: none;
	}
	.yes {
		color: #407d5c;
		background-color: @brand-success;
		width: 100%;
		margin-bottom: 3px;
		text-align: center;
	}
	.no {
		color: #751313;
		background-color: @light-red;
		width: 100%;
		margin-bottom: 3px;
		text-align: center;
	}
	.yesyou {
		color: #751313;
		background-color: #fafc83;
		border-width: 3px;
		border-color: #fafc83;
		width: 100%;
		margin-bottom: 3px;
		text-align: center;
	}
	.course_content {
		z-index: 2;
		background: @body-bg;
	}
}

.courselist_course,
.course_main {
	&.hasupcomingevents {
		background: @light-blue;
		.course_content {
			z-index: 999;
			background: @light-blue;
		}
	}
}

.courselist_course_info {
	right: -7px;
	top: -7px;
	padding: 0;
	width: 25%;
	background: @body-bg;
}

.course_eventlist_container {
	background: @brand-success;
	text-align: center;
	color: #333;
	max-height: 150px;
	& > div {
		padding-bottom: 2px;
		&:first-child {
			padding-top: 4px;
		}
		&:last-child {
			padding-bottom: 4px;
		}
		&.course_eventlist_location {
			padding-left: 4px;
			padding-right: 4px;
			word-wrap: break-word;
		}
	}
}

.course_categories {
	& > ul {
		line-height: 23px;
		li {
			display: inline-block;
			span {
				background: rgba(216, 216, 216, 0.5);
				padding: 0 2px 1px 2px;
			}
			// a {
			// 	color: @brand-primary;
			// 	background: rgba(216, 216, 216, 0.5);
			// 	padding: 0 2px 1px 2px;
			// 	&:hover {
			// 		text-decoration: underline;
			// 	}
			// }
		}
	}
}


[INTERNAL][FIX] sap.m.NotificationListItem: Text under 320px now renders correctly

Change-Id: I354e2178f3f4f4869bcdbf745055c9b277efd4f9


Fixed edit icon misplacement in New Instance

@import "../../colors";

.ek-choose-chart {
    & {
        background-color: @white;
        border: 1px solid @grey300;
        border-radius: 2px;
        width: 805px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.06);
    }

    &--active {
        .ek-choose-chart__toolbar {
            padding-bottom: 30px;
            border-bottom: 1px solid @grey350;
            &__step {
                &__number {
                    color: @cyan500;
                }
            }
            &__content {
                &__title {
                    color: @cyan500;
                }
            }
        }
    }

    &__toolbar {
        font-weight: bold;
        padding-bottom: 0;

        &__step {
            margin-left: 20px;

            &__number {
                font-size: 16px;
                font-weight: 500;
                margin: 30px 0 25px 10px;
            }
        }

        &__content {
            width: 100%;
            margin-left: 10px;
            margin-right: 30px;

            &__title {
                font-size: 16px;
                font-weight: 500;
                margin: 30px 30px 25px 0;
            }

            &__search {
                width: 100%;
                font-weight: normal;
            }

            &__charticon {
                height: 30px;
                width: 30px;
            }

            &__chartname {
                margin-left: 10px;
                font-size: 14px;
                font-weight: normal;
            }

            &__edit {
                color: @grey450;
                cursor: pointer;
            }
        }
    }

    &__grid{

        &__select {
            border-top: 1px solid @grey300;
            height: 70px;

            .md-button {
                height: 30px;
                min-height: 0;
                margin: 20px 20px 0 0;
                line-height: 29px;
            }
        }
    }
}

@import "../../colors";

.ek-choose-chart {
    & {
        background-color: @white;
        border: 1px solid @grey300;
        border-radius: 2px;
        width: 805px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.06);
    }

    &--active {
        .ek-choose-chart__toolbar {
            padding-bottom: 30px;
            border-bottom: 1px solid @grey350;
            &__step {
                &__number {
                    color: @cyan500;
                }
            }
            &__content {
                &__title {
                    color: @cyan500;
                }
            }
        }
    }

    &__toolbar {
        font-weight: bold;
        padding-bottom: 0;

        &__step {
            margin-left: 20px;

            &__number {
                font-size: 16px;
                font-weight: 500;
                margin: 30px 0 25px 10px;
            }
        }

        &__content {
            width: 100%;
            margin-left: 10px;
            margin-right: 55px;

            &__title {
                font-size: 16px;
                font-weight: 500;
                margin: 30px 30px 25px 0;
            }

            &__search {
                width: 100%;
                font-weight: normal;
            }

            &__charticon {
                height: 30px;
                width: 30px;
            }

            &__chartname {
                margin-left: 10px;
                font-size: 14px;
                font-weight: normal;
            }

            &__edit {
                color: @grey450;
                margin-right: 20px;
                cursor: pointer;
            }
        }
    }

    &__grid{

        &__select {
            border-top: 1px solid @grey300;
            height: 70px;

            .md-button {
                height: 30px;
                min-height: 0;
                margin: 20px 20px 0 0;
                line-height: 29px;
            }
        }
    }
}


[FIX] sap.ui.layout.Form: Header height issue fixed

Change-Id: I134f16d9c454020de0d756259f1b857eb6ad5e94
BCP: 1680328995

/* ========================================= */
/* CSS for control sap.ui.layout/FormLayout  */
/* Base theme                                */
/* ========================================= */

@sapUiFormTitleSize: ~"H4";
@sapUiFormSubTitleSize: ~"H5";

.sapUiFormLayout {
	border: 1px solid @sapUiGroupTitleBorderColor;
	font-size: @sapUiDesktopFontSize;
}

.sapUiFormLayout > .sapUiFormContainer {
	display: block;
}

.sapUiFormTitle {
	border-bottom: 1px solid @sapUiGroupTitleBorderColor;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
	width: 100%;
	color: @sapUiGroupTitleTextColor;
	margin: 0;
}

.sapUiForm .sapUiFormTitle {
	font-weight: @sapUiFontHeaderWeight;
	color: @sapUiGroupTitleTextColor;
	height: 3rem;
	line-height: 3rem;
}

.sapUiFormContainerTitle > .sapUiFormTitle {
	position: relative;
	border: none;
	box-sizing: border-box;
	margin-bottom: 0.5rem;
	height: 2rem;
	line-height: 2rem;
}

.sapUiFormTitle.sapUiFormTitleEmph {
	border-color: @sapUiGroupTitleBorderColor;
}

/* Title levels - can not use TextView CSS from commons, because also used in mobile */
.sapUiFormTitleH1 {
	font-size: @sapMFontHeader1Size;
	line-height: 122%;
}

.sapUiFormTitleH2 {
	font-size: @sapMFontHeader2Size;
	line-height: 122%;
}

.sapUiFormTitleH3 {
	font-size: @sapMFontHeader3Size;
	line-height: 122%;
}

.sapUiFormTitleH4 {
	font-size: @sapMFontHeader4Size;
}

.sapUiFormTitleH5 {
	font-size: @sapMFontHeader5Size;
}

.sapUiFormTitleH6 {
	font-size: @sapMFontHeader6Size;
	color: @sapUiGroupTitleTextColor;
}

.sapUiFormTitle> img {
	vertical-align: middle;
}

/* Toolbar */
.sapUiFormContainerToolbar > div:first-child {
	margin-bottom: 0.5rem;
}

.sapUiFormM .sapUiFormContainerTitle > .sapUiFormTitle {
	height: 3rem;
	line-height: 3rem;
}

.sapUiSizeCompact .sapUiFormContainerTitle > .sapUiFormTitle {
	height: 2rem;
	line-height: 2rem;
}

/* ========================================= */
/* CSS for control sap.ui.layout/FormLayout  */
/* Base theme                                */
/* ========================================= */

@sapUiFormTitleSize: ~"H4";
@sapUiFormSubTitleSize: ~"H5";

.sapUiFormLayout {
	border: 1px solid @sapUiGroupTitleBorderColor;
	font-size: @sapUiDesktopFontSize;
}

.sapUiFormLayout > .sapUiFormContainer {
	display: block;
}

.sapUiFormTitle {
	border-bottom: 1px solid @sapUiGroupTitleBorderColor;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
	width: 100%;
	color: @sapUiGroupTitleTextColor;
	margin: 0;
}

.sapUiFormContainerTitle > .sapUiFormTitle {
	position: relative;
	border: none;
	box-sizing: border-box;
	margin-bottom: 0.5rem;
	height: 2rem;
	line-height: 2rem;
}

.sapUiFormTitle.sapUiFormTitleEmph {
	border-color: @sapUiGroupTitleBorderColor;
}

/* Title levels - can not use TextView CSS from commons, because also used in mobile */
.sapUiFormTitleH1 {
	font-size: @sapMFontHeader1Size;
	line-height: 122%;
}

.sapUiFormTitleH2 {
	font-size: @sapMFontHeader2Size;
	line-height: 122%;
}

.sapUiFormTitleH3 {
	font-size: @sapMFontHeader3Size;
	line-height: 122%;
}

.sapUiFormTitleH4 {
	font-size: @sapMFontHeader4Size;
}

.sapUiFormTitleH5 {
	font-size: @sapMFontHeader5Size;
}

.sapUiFormTitleH6 {
	font-size: @sapMFontHeader6Size;
	color: @sapUiGroupTitleTextColor;
}

.sapUiFormTitle> img {
	vertical-align: middle;
}

/* Toolbar */
.sapUiFormContainerToolbar > div:first-child {
	margin-bottom: 0.5rem;
}

.sapUiForm .sapUiFormTitle {
	font-weight: @sapUiFontHeaderWeight;
	color: @sapUiGroupTitleTextColor;
	height: 3rem;
	line-height: 3rem;
}

.sapUiFormM .sapUiFormContainerTitle > .sapUiFormTitle {
	height: 3rem;
	line-height: 3rem;
}

.sapUiSizeCompact .sapUiFormContainerTitle > .sapUiFormTitle {
	height: 2rem;
	line-height: 2rem;
}


Fix busy cursor. Change loading indicator to gear.

@import "font-awesome/variables.less";
@import "bootstrap/mixins.less";
@import "bootstrap/variables.less";

@zindex-content-loading: 3; //for some reason inputs have a z-index of 2.

/*! Copyright 2014-2015 Tacklr, LLC */

html {
    position: relative;
    min-height: 100%;

    &.busy {
        cursor: wait !important;
    }
}

html,
body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    //-ms-user-select: none;
    //-moz-user-select: none;
    //-webkit-user-select: none;
    //user-select: none;
}

//If we aren't using fixed top this isn't needed.
//.navbar-fixed-top + .body-content {
//    margin-top: (50px + 20px); //20px temporary on here, this should be padding on the content or something
//}

.body-content {
    margin-bottom: 15px;
}

.delimiter {
    color: @brand-danger; //different color?
}

.break-all {
    -ms-word-break: break-all;
    word-break: break-all;
}

/*.panel-expand {
    //white-space: nowrap;
    min-width: 100%;
    width: inherit;
}*/

td .btn-group {
    white-space: nowrap;

    .btn {
        float: none;
    }
}

#detail-view .panel-heading {
    position: relative;
}

.tree-view {
    width: 100%;
    //margin-bottom: 15px;//Not sure why I had this.
    overflow-y: hidden; //Should we scroll instead of expanding?
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
}

//.table-view {
//    @media screen and (max-width: @screen-xs-max) {//why screen? responsive table has it for some reason
//        tbody td:nth-child(3),
//        thead th:nth-child(3) {
//            display: none;
//        }
//    }
//}

.space-btns {
    .btn:not(:last-child) {
        margin-bottom: 5px;
    }
}

.no-wrap {
    white-space: nowrap;
}

.col-fit {
    white-space: nowrap;
    width: 1px;
}

.btn-link {
    //default colors for serialize?
    .fa-trash-o {
        color: @brand-danger;
    }

    &:hover {
        .fa-trash-o {
            color: darken(@brand-danger, 15%);
        }
    }
}

//We want the textarea and pre versions of this to look the same.
.serialized-data {
    -ms-word-wrap: normal;
    word-wrap: normal;
    white-space: pre;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 140px;//Rows?
    resize: vertical;//This shouldn't be needed by the textarea version but it shouldn't hurt.

    textarea& {
        font-family: @font-family-monospace;
        font-size: (@font-size-base - 1);
        color: @pre-color;
        background-color: @pre-bg;
        border: 1px solid @pre-border-color;
        -moz-border-radius: @border-radius-base;
        -webkit-border-radius: @border-radius-base;
        border-radius: @border-radius-base;
    }

    pre& {
        padding: 2px;
        margin-bottom: 0;
        display: inline-block;
    }

    //from bootstrap pre tag, how much more of this do we want for textarea fallback?
    //display: block;
    //padding: ((@line-height-computed - 1) / 2);
    //margin: 0 0 (@line-height-computed / 2);
    //font-size: (@font-size-base - 1); // 14px to 13px
    //line-height: @line-height-base;
    //word-break: break-all;
    //word-wrap: break-word;
    //color: @pre-color;
    //background-color: @pre-bg;
    //border: 1px solid @pre-border-color;
    //border-radius: @border-radius-base;
}

.checkbox-inline.no-indent,
.checkbox-inline.no-indent + .checkbox-inline.no-indent {
    margin-left: 0;
    margin-right: 10px;
}

.checkbox-inline.no-indent:last-child {
    margin-right: 0;
}

.cursor-default {
    cursor: default;
}

input[type=radio],
input[type=checkbox] {
    cursor: pointer;
}

//.panel-title {
//    cursor: default;
//}

.content-javascript {
    overflow: hidden;
    display: block;
    //position: absolute;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: @zindex-content-loading;
    //background-color: @white;
    //background-color: rgba(255, 255, 255, 0.9);
    //z-index: 500;//This should be as high as possible, but lower than anything that overlaps it from outside (menus)
    &:before {
        //Probably not needed
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        //position: absolute;
        position: fixed;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 3rem; //better value?
        font-size: 2rem;
        font-weight: bold;
        color: @state-danger-text;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: 'CacheManager requires JavaScript.';
        //Fade in?
        //Make into a link? e.g. http://www.enable-javascript.com/ (can't be done with Content, would need markup)
    }
}

.content-loading {
    overflow: hidden;
    display: block;
    //position: absolute;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: @zindex-content-loading;
    //background-color: @white;
    //background-color: rgba(255, 255, 255, 0.9);
    //z-index: 500;//This should be as high as possible, but lower than anything that overlaps it from outside (menus)
    &:before {
        //Probably not needed
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        //position: absolute;
        position: fixed;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        //This affects the 'axis' of the spin.
        width: 1em;
        height: 1em;
        font: normal normal normal 4em/1 FontAwesome;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: @fa-var-gear;
        -webkit-animation: fa-spin 2s infinite linear;
        -moz-animation: fa-spin 2s infinite linear;
        -o-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
    }
}

//Make it cover only the content?
.refresh-loading {
    overflow: hidden;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: @zindex-content-loading;
    //background-color: @white;
    //background-color: rgba(255, 255, 255, 0.9);
    //z-index: 500;//This should be as high as possible, but lower than anything that overlaps it from outside (menus)
    &:before {
        //Probably not needed
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        //This affects the 'axis' of the spin.
        width: 1em;
        height: 1em;
        font: normal normal normal 4em/1 FontAwesome;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: @fa-var-refresh;
        -webkit-animation: fa-spin 2s infinite linear;
        -moz-animation: fa-spin 2s infinite linear;
        -o-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
    }
}

//.btn-panel-heading {
//    //ehhh, would like something better.
//    position: absolute;
//    top: 1px;
//    right: 22px;
//    border-top-left-radius: 0;
//    border-top-right-radius: 0;
//    border-top: 0;//ehh
//}

.btn-collapse {
    font: normal normal normal 18px/1 FontAwesome; //size needs to match btn-small
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &:before {
        content: @fa-var-chevron-up;
    }
    //Pure css "fake" disabled button
    + .btn-refresh {
        display: none;

        + .btn-refresh {
            display: block;
        }
    }

    &.collapsed {
        + .btn-refresh {
            display: block;

            + .btn-refresh {
                display: none;
            }
        }

        &:before {
            //Is it possible to animate this transition?
            content: @fa-var-chevron-down;
        }
    }
}

.btn-group-panel-heading {
    position: absolute;
    //top: 1px;
    top: 0;
    right: 8px; //ehh
    .btn {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: 0;
    }
}

.jumbo-error {
    font-size: 10rem; //px?
}

.panel {
    > .table-responsive {
        > table {
            > tbody {
                > tr:first-child {
                    th,
                    td {
                        border-top: 0;
                    }
                }
            }
        }
    }
}

#copyright {
    position: absolute;
    //right: 0;
    left: 0;
    bottom: 0;
    //background-color: @gray-light;//#f5f5f5;
    //border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 2px 4px;
    //color: #fff;//variable?
    z-index: @zindex-content-loading + 1;
    border: 1px solid @navbar-default-border;
    color: @navbar-default-link-hover-color;
    background-color: @navbar-default-bg;
    #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
    .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
    p {
        font-size: 1rem;
        margin: 0;
    }
}

#fork-me {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 110px;
    overflow: hidden;
    height: 110px;
    //z-index: 9999;
    //Why does the color shading change after load?
    a {
        z-index: @zindex-navbar + 1;
        //background: #000;
        //color: #fff;
        text-decoration: none;
        //font-family: arial, sans-serif;
        text-align: center;
        font-weight: bold;
        padding: 5px 40px;
        font-size: 1.1rem; //1rem
        line-height: 2rem;
        width: 200px;
        position: absolute;
        top: 28px;
        right: -60px;
        //.transition(0.5s);
        .rotate(45deg);
        color: @navbar-inverse-link-hover-color;
        background-color: @navbar-inverse-bg;
        border-color: @navbar-inverse-border;
        #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
        .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
        .box-shadow(inset 0 3px 9px rgba(0,0,0,.25));

        &:hover,
        &:focus {
            //background-color: @navbar-inverse-link-hover-bg;
            background-color: @brand-danger;
            #gradient > .vertical(@start-color: lighten(@brand-danger, 10%); @end-color: @brand-danger);
            .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
            .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
        }
    }

    a::before,
    a::after {
        content: '';
        width: 100%;
        display: block;
        position: absolute;
        top: 1px;
        left: 0;
        height: 1px;
        background: @navbar-default-border; //@navbar-inverse-link-hover-color?
    }

    a::after {
        bottom: 1px;
        top: auto;
    }
}

@import "font-awesome/variables.less";
@import "bootstrap/mixins.less";
@import "bootstrap/variables.less";

@zindex-content-loading: 3; //for some reason inputs have a z-index of 2.

/*! Copyright 2014-2015 Tacklr, LLC */

html {
    position: relative;
    min-height: 100%;
}

html[class^="busy-"],
html[class*=" busy-"] {
    cursor: wait !important;
}

html,
body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    //-ms-user-select: none;
    //-moz-user-select: none;
    //-webkit-user-select: none;
    //user-select: none;
}

//If we aren't using fixed top this isn't needed.
//.navbar-fixed-top + .body-content {
//    margin-top: (50px + 20px); //20px temporary on here, this should be padding on the content or something
//}

.body-content {
    margin-bottom: 15px;
}

.delimiter {
    color: @brand-danger; //different color?
}

.break-all {
    -ms-word-break: break-all;
    word-break: break-all;
}

/*.panel-expand {
    //white-space: nowrap;
    min-width: 100%;
    width: inherit;
}*/

td .btn-group {
    white-space: nowrap;

    .btn {
        float: none;
    }
}

#detail-view .panel-heading {
    position: relative;
}

.tree-view {
    width: 100%;
    //margin-bottom: 15px;//Not sure why I had this.
    overflow-y: hidden; //Should we scroll instead of expanding?
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
}

//.table-view {
//    @media screen and (max-width: @screen-xs-max) {//why screen? responsive table has it for some reason
//        tbody td:nth-child(3),
//        thead th:nth-child(3) {
//            display: none;
//        }
//    }
//}

.space-btns {
    .btn:not(:last-child) {
        margin-bottom: 5px;
    }
}

.no-wrap {
    white-space: nowrap;
}

.col-fit {
    white-space: nowrap;
    width: 1px;
}

.btn-link {
    //default colors for serialize?
    .fa-trash-o {
        color: @brand-danger;
    }

    &:hover {
        .fa-trash-o {
            color: darken(@brand-danger, 15%);
        }
    }
}

//We want the textarea and pre versions of this to look the same.
.serialized-data {
    -ms-word-wrap: normal;
    word-wrap: normal;
    white-space: pre;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 140px;//Rows?
    resize: vertical;//This shouldn't be needed by the textarea version but it shouldn't hurt.

    textarea& {
        font-family: @font-family-monospace;
        font-size: (@font-size-base - 1);
        color: @pre-color;
        background-color: @pre-bg;
        border: 1px solid @pre-border-color;
        -moz-border-radius: @border-radius-base;
        -webkit-border-radius: @border-radius-base;
        border-radius: @border-radius-base;
    }

    pre& {
        padding: 2px;
        margin-bottom: 0;
        display: inline-block;
    }

    //from bootstrap pre tag, how much more of this do we want for textarea fallback?
    //display: block;
    //padding: ((@line-height-computed - 1) / 2);
    //margin: 0 0 (@line-height-computed / 2);
    //font-size: (@font-size-base - 1); // 14px to 13px
    //line-height: @line-height-base;
    //word-break: break-all;
    //word-wrap: break-word;
    //color: @pre-color;
    //background-color: @pre-bg;
    //border: 1px solid @pre-border-color;
    //border-radius: @border-radius-base;
}

.checkbox-inline.no-indent,
.checkbox-inline.no-indent + .checkbox-inline.no-indent {
    margin-left: 0;
    margin-right: 10px;
}

.checkbox-inline.no-indent:last-child {
    margin-right: 0;
}

.cursor-default {
    cursor: default;
}

input[type=radio],
input[type=checkbox] {
    cursor: pointer;
}

//.panel-title {
//    cursor: default;
//}

.content-javascript {
    overflow: hidden;
    display: block;
    //position: absolute;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: @zindex-content-loading;
    //background-color: @white;
    //background-color: rgba(255, 255, 255, 0.9);
    //z-index: 500;//This should be as high as possible, but lower than anything that overlaps it from outside (menus)
    &:before {
        //Probably not needed
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        //position: absolute;
        position: fixed;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 3rem; //better value?
        font-size: 2rem;
        font-weight: bold;
        color: @state-danger-text;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: 'CacheManager requires JavaScript.';
        //Fade in?
        //Make into a link? e.g. http://www.enable-javascript.com/ (can't be done with Content, would need markup)
    }
}

.content-loading {
    overflow: hidden;
    display: block;
    //position: absolute;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: @zindex-content-loading;
    //background-color: @white;
    //background-color: rgba(255, 255, 255, 0.9);
    //z-index: 500;//This should be as high as possible, but lower than anything that overlaps it from outside (menus)
    &:before {
        //Probably not needed
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        //position: absolute;
        position: fixed;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        //This affects the 'axis' of the spin.
        width: 1em;
        height: 1em;
        font: normal normal normal 4em/1 FontAwesome;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: @fa-var-circle-o-notch;
        -webkit-animation: fa-spin 2s infinite linear;
        -moz-animation: fa-spin 2s infinite linear;
        -o-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
    }
}

//Make it cover only the content?
.refresh-loading {
    overflow: hidden;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: @zindex-content-loading;
    //background-color: @white;
    //background-color: rgba(255, 255, 255, 0.9);
    //z-index: 500;//This should be as high as possible, but lower than anything that overlaps it from outside (menus)
    &:before {
        //Probably not needed
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        //This affects the 'axis' of the spin.
        width: 1em;
        height: 1em;
        font: normal normal normal 4em/1 FontAwesome;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: @fa-var-refresh;
        -webkit-animation: fa-spin 2s infinite linear;
        -moz-animation: fa-spin 2s infinite linear;
        -o-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
    }
}

//.btn-panel-heading {
//    //ehhh, would like something better.
//    position: absolute;
//    top: 1px;
//    right: 22px;
//    border-top-left-radius: 0;
//    border-top-right-radius: 0;
//    border-top: 0;//ehh
//}

.btn-collapse {
    font: normal normal normal 18px/1 FontAwesome; //size needs to match btn-small
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &:before {
        content: @fa-var-chevron-up;
    }
    //Pure css "fake" disabled button
    + .btn-refresh {
        display: none;

        + .btn-refresh {
            display: block;
        }
    }

    &.collapsed {
        + .btn-refresh {
            display: block;

            + .btn-refresh {
                display: none;
            }
        }

        &:before {
            //Is it possible to animate this transition?
            content: @fa-var-chevron-down;
        }
    }
}

.btn-group-panel-heading {
    position: absolute;
    //top: 1px;
    top: 0;
    right: 8px; //ehh
    .btn {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: 0;
    }
}

.jumbo-error {
    font-size: 10rem; //px?
}

.panel {
    > .table-responsive {
        > table {
            > tbody {
                > tr:first-child {
                    th,
                    td {
                        border-top: 0;
                    }
                }
            }
        }
    }
}

#copyright {
    position: absolute;
    //right: 0;
    left: 0;
    bottom: 0;
    //background-color: @gray-light;//#f5f5f5;
    //border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 2px 4px;
    //color: #fff;//variable?
    z-index: @zindex-content-loading + 1;
    border: 1px solid @navbar-default-border;
    color: @navbar-default-link-hover-color;
    background-color: @navbar-default-bg;
    #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
    .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
    p {
        font-size: 1rem;
        margin: 0;
    }
}

#fork-me {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 110px;
    overflow: hidden;
    height: 110px;
    //z-index: 9999;
    //Why does the color shading change after load?
    a {
        z-index: @zindex-navbar + 1;
        //background: #000;
        //color: #fff;
        text-decoration: none;
        //font-family: arial, sans-serif;
        text-align: center;
        font-weight: bold;
        padding: 5px 40px;
        font-size: 1.1rem; //1rem
        line-height: 2rem;
        width: 200px;
        position: absolute;
        top: 28px;
        right: -60px;
        //.transition(0.5s);
        .rotate(45deg);
        color: @navbar-inverse-link-hover-color;
        background-color: @navbar-inverse-bg;
        border-color: @navbar-inverse-border;
        #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
        .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
        .box-shadow(inset 0 3px 9px rgba(0,0,0,.25));

        &:hover,
        &:focus {
            //background-color: @navbar-inverse-link-hover-bg;
            background-color: @brand-danger;
            #gradient > .vertical(@start-color: lighten(@brand-danger, 10%); @end-color: @brand-danger);
            .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
            .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
        }
    }

    a::before,
    a::after {
        content: '';
        width: 100%;
        display: block;
        position: absolute;
        top: 1px;
        left: 0;
        height: 1px;
        background: @navbar-default-border; //@navbar-inverse-link-hover-color?
    }

    a::after {
        bottom: 1px;
        top: auto;
    }
}


grid menu RTL positioning

grid menu RTL positioning

/*
* RTL Styles
*/

.ui-grid[dir=rtl] .ui-grid-header-cell,
.ui-grid[dir=rtl] .ui-grid-footer-cell,
.ui-grid[dir=rtl] .ui-grid-cell {
  float: right !important;
}

// .ui-grid[dir=rtl] .ui-grid-scrollbar-vertical {
//   right: inherit;
//   left: 4px;
// }

.ui-grid[dir=rtl] .ui-grid-scrollbar-horizontal {
  left: inherit;
  right: 0;
}

.ui-grid[dir=rtl] .ui-grid-native-scrollbar.vertical {
  left: 0;
  right: inherit;
}

.ui-grid[dir=rtl] .ui-grid-column-menu-button {
  position: absolute;
  left: 1px;
  top: 0;
  right: inherit;
}

.ui-grid[dir=rtl] .ui-grid-cell:first-child,
.ui-grid[dir=rtl] .ui-grid-header-cell:first-child,
.ui-grid[dir=rtl] .ui-grid-footer-cell:first-child {
  border-right: 0;
}

.ui-grid[dir=rtl] .ui-grid-cell:last-child {
  border-right: @gridBorderWidth solid;
  border-color: @borderColor;
}

.ui-grid[dir=rtl] .ui-grid-header-cell:first-child .ui-grid-vertical-bar,
.ui-grid[dir=rtl] .ui-grid-footer-cell:first-child .ui-grid-vertical-bar,
.ui-grid[dir=rtl] .ui-grid-cell:first-child .ui-grid-vertical-bar {
  width: 0;
}

.ui-grid[dir=rtl] .ui-grid-menu-button {
  z-index: 2;
  position: absolute;
  left: 0;
  right: auto;
  background: @headerBackgroundColor;
  border: @gridBorderWidth solid @borderColor;
  cursor: pointer;
  min-height: 27px;
  font-weight: normal;
}

.ui-grid[dir=rtl] .ui-grid-menu-button .ui-grid-menu {
  left: 0;
  right: auto;
}


Fix long URLs in updates breaking the table size.

Not sure if this is a new failure mode or a regression, but it looks
really bad.

.live-update > .content {
    padding-left: 10px;
}

body.embed .infobar.welcome {
    display: none !important;
}

.content > header {
    overflow: auto;

    h1 {
        float: left;
        font-size: 28px;
        padding: 10px 0 10px 0;
        margin-top: 0;
    }

    .tagline {
        clear: both;
        font-size: x-small;
        margin-left: 0;

        .state.live {
            color: #4f4f4f;
            text-transform: uppercase;
            font-weight: bold;
            font-size: medium;
            margin: 0 .8em 0 0;
        }

        .state.live:before {
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 6px;
            background: #ff4500;
            margin-right: 6px;
        }

        p {
            display: inline-block;
            margin-right: 1em;

            &#visitor-count {
                margin-right: 2em;
            }
        }

        ul {
            display: inline-block;
        }

        li {
            display: inline-block;
            margin: 0 .5em 0 0;

            a {
                margin-right: .1em;
            }

            &:after {
                content: " + ";
            }

            &:last-child:after {
                content: "";
            }
        }
    }
}

.liveupdate-listing {
    max-width: 600px;
    min-width: 300px;
    margin-top: 2em;

    &.loading {
        padding-bottom: 30px;
        background: url(../throbber.gif) center bottom no-repeat;
    }

    table {
        .embed & {
            width: 600px;
        }

        @transition-time: .3s;

        tr.initial + tr {
            th {
                font-size: medium;
            }

            td {
                font-size: large;
                padding-left: 1.2em;

                a.author {
                    font-size: small;
                }
            }
        }

        tr.stricken td.md {
            text-decoration: line-through;
        }

        th, td {
            vertical-align: top;
            padding-bottom: .5em;
        }

        th {
            font-size: small;
            width: 120px;
            max-width: 120px;
            text-align: left;
            overflow: hidden;

            time {
                font-size: smaller;
                display: inline-block;
                white-space: nowrap;
                color: #888;
                transition: color @transition-time;
            }
        }

        td {
            padding-left: 2em;

            &.md {
                overflow: hidden;
                max-width: 480px;
                word-break: break-word;
            }

            form, p {
                display: inline;
            }

            p:first-child {
                margin-top: 0;
            }

            a.author {
                color: #b6c6d6;
                transition: color @transition-time;
            }

            ul.buttonrow {
                display: none;
                font-size: small;
                margin: .2em 0 0 0;

                li {
                    display: inline-block;
                    margin: 0 1em 0 0;
                }

                button {
                    border: none;
                    background: inherit;
                    padding: 0;
                    font-size: small;
                    color: #369;
                }
            }
        }

        tr:hover {
            th time {
                color: black;
                transition: color @transition-time;
            }

            a.author {
                color: #369;
                transition: color @transition-time;
            }

            ul.buttonrow {
                display: block;
            }
        }

        tr.separator {
            font-size: small;

            td {
                font-size: smaller;
                padding: .7em 0;
                background: #fff url(../liveupdate-border.png) center left repeat-x;

                time {
                    background: white;
                    padding-right: 10px;
                }
            }
        }

        tr.initial {
            color: #888;
            border-bottom: 1px solid #888;

            td {
                padding: 0 0 .3em 0;
                min-height: 18px; /* for the throbber */

                &.connecting {
                    background: transparent url(../throbber.gif) no-repeat bottom right;
                }
            }
        }

        tr.final {
            font-size: small;
            color: #888;
            border-top: 1px solid #888;

            td {
                font-size: smaller;
                padding: 0 0 0 2.5em;
            }
        }
    }
}

#noresults {
    margin-top: 10px;
}

.main-content {
    max-width: 1000px;
    overflow: auto;
}

nav.nextprev {
    margin: 10px 0;
    font-size: small;
}

aside.sidebar {
    color: #333;
    width: 300px;
    float: right;
    margin-left: 30px;

    h1, h2, h3, h4, h5, h6 {
        color: #333;
        font-size: small;
    }

    h1 {
        font-size: large;
    }

    h2 {
        font-size: medium;
        font-weight: normal;
    }

    h3, h4, h5, h6 {
        font-weight: bold;
    }

    .md + #discussions {
        border-top: 1px dotted #999;
    }

    #discussions {
        margin-top: .7em;

        p {
            font-size: small;
            margin: .3em 0;
        }

        li {
            color: #888;
            background: white;
            font-size: grey;
            display: inline-block;
            border-right: 1px solid #888;
            padding: 0 .7em;

            a {
                color: #888;
            }
        }

        li:first-child {
            padding-left: 0;
        }

        li:last-child {
            border-right: none;
        }
    }
}

@media all and (max-width: 700px) {
    #new-update-form {
        margin-bottom: 1em;
    }

    .tagline {
        margin-bottom: 1em;
    }

    .live-update > .content {
        padding-left: 0;
    }

    aside.sidebar {
        float: none;
        margin: 0 0 2em 0;
        max-width: 700px;
        width: auto;

        section {
            border: 1px solid #369;
            background-color: #fafafa;
            padding: 10px;
            border-radius: 9px;
        }

        #discussions {
            border-top: 1px solid #369 !important;

            h1 {
                margin-top: 0;
            }

            li {
                color: black;
                background: #fafafa;
            }
        }
    }

    .liveupdate-listing tr.thing,
    .liveupdate-listing tr.final {
        display: block;

        th, td {
            display: block;
        }

        th {
            float: right;
            margin-left: 1em;
            text-align: right;
        }
    }

    // always display the buttons in tiny-screen mode since it's likely a touch
    // device and hover doesn't work so well there.
    ul.buttonrow {
        display: block !important; // make up for super-specificity of the other rule
    }

    ////////// hacks to clean up the header until the rest of reddit is responsive
    #sr-header-area,
    #header-bottom-right {
        display: none;
    }

    .pagename {
        display: block;
        margin-top: 5px;
    }
    //////////
}

.live-update > .content {
    padding-left: 10px;
}

body.embed .infobar.welcome {
    display: none !important;
}

.content > header {
    overflow: auto;

    h1 {
        float: left;
        font-size: 28px;
        padding: 10px 0 10px 0;
        margin-top: 0;
    }

    .tagline {
        clear: both;
        font-size: x-small;
        margin-left: 0;

        .state.live {
            color: #4f4f4f;
            text-transform: uppercase;
            font-weight: bold;
            font-size: medium;
            margin: 0 .8em 0 0;
        }

        .state.live:before {
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 6px;
            background: #ff4500;
            margin-right: 6px;
        }

        p {
            display: inline-block;
            margin-right: 1em;

            &#visitor-count {
                margin-right: 2em;
            }
        }

        ul {
            display: inline-block;
        }

        li {
            display: inline-block;
            margin: 0 .5em 0 0;

            a {
                margin-right: .1em;
            }

            &:after {
                content: " + ";
            }

            &:last-child:after {
                content: "";
            }
        }
    }
}

.liveupdate-listing {
    max-width: 600px;
    min-width: 300px;
    margin-top: 2em;

    &.loading {
        padding-bottom: 30px;
        background: url(../throbber.gif) center bottom no-repeat;
    }

    table {
        .embed & {
            width: 600px;
        }

        @transition-time: .3s;

        tr.initial + tr {
            th {
                font-size: medium;
            }

            td {
                font-size: large;
                padding-left: 1.2em;

                a.author {
                    font-size: small;
                }
            }
        }

        tr.stricken td.md {
            text-decoration: line-through;
        }

        th, td {
            vertical-align: top;
            padding-bottom: .5em;
        }

        th {
            font-size: small;
            width: 120px;
            max-width: 120px;
            text-align: left;
            overflow: hidden;

            time {
                font-size: smaller;
                display: inline-block;
                white-space: nowrap;
                color: #888;
                transition: color @transition-time;
            }
        }

        td {
            padding-left: 2em;

            &.md {
                overflow: visible;
                word-break: break-word;
            }

            form, p {
                display: inline;
            }

            p:first-child {
                margin-top: 0;
            }

            a.author {
                color: #b6c6d6;
                transition: color @transition-time;
            }

            ul.buttonrow {
                display: none;
                font-size: small;
                margin: .2em 0 0 0;

                li {
                    display: inline-block;
                    margin: 0 1em 0 0;
                }

                button {
                    border: none;
                    background: inherit;
                    padding: 0;
                    font-size: small;
                    color: #369;
                }
            }
        }

        tr:hover {
            th time {
                color: black;
                transition: color @transition-time;
            }

            a.author {
                color: #369;
                transition: color @transition-time;
            }

            ul.buttonrow {
                display: block;
            }
        }

        tr.separator {
            font-size: small;

            td {
                font-size: smaller;
                padding: .7em 0;
                background: #fff url(../liveupdate-border.png) center left repeat-x;

                time {
                    background: white;
                    padding-right: 10px;
                }
            }
        }

        tr.initial {
            color: #888;
            border-bottom: 1px solid #888;

            td {
                padding: 0 0 .3em 0;
                min-height: 18px; /* for the throbber */

                &.connecting {
                    background: transparent url(../throbber.gif) no-repeat bottom right;
                }
            }
        }

        tr.final {
            font-size: small;
            color: #888;
            border-top: 1px solid #888;

            td {
                font-size: smaller;
                padding: 0 0 0 2.5em;
            }
        }
    }
}

#noresults {
    margin-top: 10px;
}

.main-content {
    max-width: 1000px;
    overflow: auto;
}

nav.nextprev {
    margin: 10px 0;
    font-size: small;
}

aside.sidebar {
    color: #333;
    width: 300px;
    float: right;
    margin-left: 30px;

    h1, h2, h3, h4, h5, h6 {
        color: #333;
        font-size: small;
    }

    h1 {
        font-size: large;
    }

    h2 {
        font-size: medium;
        font-weight: normal;
    }

    h3, h4, h5, h6 {
        font-weight: bold;
    }

    .md + #discussions {
        border-top: 1px dotted #999;
    }

    #discussions {
        margin-top: .7em;

        p {
            font-size: small;
            margin: .3em 0;
        }

        li {
            color: #888;
            background: white;
            font-size: grey;
            display: inline-block;
            border-right: 1px solid #888;
            padding: 0 .7em;

            a {
                color: #888;
            }
        }

        li:first-child {
            padding-left: 0;
        }

        li:last-child {
            border-right: none;
        }
    }
}

@media all and (max-width: 700px) {
    #new-update-form {
        margin-bottom: 1em;
    }

    .tagline {
        margin-bottom: 1em;
    }

    .live-update > .content {
        padding-left: 0;
    }

    aside.sidebar {
        float: none;
        margin: 0 0 2em 0;
        max-width: 700px;
        width: auto;

        section {
            border: 1px solid #369;
            background-color: #fafafa;
            padding: 10px;
            border-radius: 9px;
        }

        #discussions {
            border-top: 1px solid #369 !important;

            h1 {
                margin-top: 0;
            }

            li {
                color: black;
                background: #fafafa;
            }
        }
    }

    .liveupdate-listing tr.thing,
    .liveupdate-listing tr.final {
        display: block;

        th, td {
            display: block;
        }

        th {
            float: right;
            margin-left: 1em;
            text-align: right;
        }
    }

    // always display the buttons in tiny-screen mode since it's likely a touch
    // device and hover doesn't work so well there.
    ul.buttonrow {
        display: block !important; // make up for super-specificity of the other rule
    }

    ////////// hacks to clean up the header until the rest of reddit is responsive
    #sr-header-area,
    #header-bottom-right {
        display: none;
    }

    .pagename {
        display: block;
        margin-top: 5px;
    }
    //////////
}


Added bolder font weight on primary buttons

.btn-primary {
  .button-variant(#ffffff; @call-to-action-mid; @call-to-action-mid);
  font-weight: bold;
}

.btn-default {
  .button-variant(@call-to-action-mid; #ffffff; @call-to-action-mid);
}

.btn-primary-dark {
  .button-variant(#ffffff; @cc-brand-low; @cc-brand-low);
}

.btn-danger {
  .button-variant(@cc-att-neg-mid; #ffffff; @cc-att-neg-mid);
}

.btn-purple {
  .button-variant(white; @cc-dark-cool-accent-mid; darken(@cc-dark-cool-accent-mid, 5));
}

.btn-full-width {
  width: 100%;
}

.btn-primary {
  .button-variant(#ffffff; @call-to-action-mid; @call-to-action-mid);
}

.btn-default {
  .button-variant(@call-to-action-mid; #ffffff; @call-to-action-mid);
}

.btn-primary-dark {
  .button-variant(#ffffff; @cc-brand-low; @cc-brand-low);
}

.btn-danger {
  .button-variant(@cc-att-neg-mid; #ffffff; @cc-att-neg-mid);
}

.btn-purple {
  .button-variant(white; @cc-dark-cool-accent-mid; darken(@cc-dark-cool-accent-mid, 5));
}

.btn-full-width {
  width: 100%;
}


A different darker pink colour

A different darker pink colour

/**
*    Copyright 2015 ppy Pty. Ltd.
*
*    This file is part of osu!web. osu!web is distributed with the hope of
*    attracting more community contributions to the core ecosystem of osu!.
*
*    osu!web is free software: you can redistribute it and/or modify
*    it under the terms of the Affero GNU General Public License version 3
*    as published by the Free Software Foundation.
*
*    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
*    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
*    See the GNU Affero General Public License for more details.
*
*    You should have received a copy of the GNU Affero General Public License
*    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
*
*/
// main: compiled.less
@import "app";

@purple-lighter: #eeeeff;
@purple-light: #aa88ff;
@purple: #8866ee;
@purple-dark: #6644cc;
@purple-darker: #441188;

@pink-lighter: #ffddee;
@pink-light: #ff99cc;
@pink: #ff66aa;
@pink-dark: #ee3399;
@pink-darker: #cc5288;

@blue-lighter: #ddffff;
@blue-light: #99eeff;
@blue: #66ccff;
@blue-dark: #44aadd;
@blue-darker: #2299bb;

@yellow-lighter: #ffffdd;
@yellow-light: #ffdd55;
@yellow: #ffcc22;
@yellow-dark: #eeaa00;
@yellow-darker: #cc6600;

@green-lighter: #eeffcc;
@green-light: #b3d944;
@green: #88b300;
@green-dark: #668800;
@green-darker: #445500;

@red: #fc4549; // random :D

@home_colour: @purple;
@news_colour: @yellow;
@beatmaps_colour: @pink;
@ranking_colour: @green;
@community_colour: @blue;
@store_colour: @pink;

// https://about.twitter.com/press/brand-assets
@twitter-colour: #55acee;

// https://www.facebookbrand.com
@facebook-colour: #3b5998;

// just for reference, from bootstrap's variables.less
// @gray-base:              #000;
// @gray-darker:            lighten(@gray-base, 13.5%); // #222
// @gray-dark:              lighten(@gray-base, 20%);   // #333
// @gray:                   lighten(@gray-base, 33.5%); // #555
// @gray-light:             lighten(@gray-base, 46.7%); // #777
// @gray-lighter:           lighten(@gray-base, 93.5%); // #eee

@grey-0: #000;
@grey-1: #111;
@grey-2: #222;
@grey-3: #333;
@grey-4: #444;
@grey-5: #555;
@grey-6: #666;
@grey-7: #777;
@grey-8: #888;
@grey-9: #999;
@grey-a: #aaa;
@grey-b: #bbb;
@grey-c: #ccc;
@grey-d: #ddd;
@grey-e: #eee;
@grey-f: #fff;

.colours(@name) {
  @lighter: "@{name}-lighter";
  @light: "@{name}-light";
  @dark: "@{name}-dark";
  @darker: "@{name}-darker";

  .@{name}-lighter { color: @@lighter !important; }
  .@{name}-light { color: @@light !important; }
  .@{name}-normal { color: @@name !important; }
  .@{name}-dark { color: @@dark !important; }
  .@{name}-darker { color: @@darker !important; }
}

.colours(~"pink");
.colours(~"green");
.colours(~"blue");
.colours(~"yellow");
.colours(~"purple");

/**
*    Copyright 2015 ppy Pty. Ltd.
*
*    This file is part of osu!web. osu!web is distributed with the hope of
*    attracting more community contributions to the core ecosystem of osu!.
*
*    osu!web is free software: you can redistribute it and/or modify
*    it under the terms of the Affero GNU General Public License version 3
*    as published by the Free Software Foundation.
*
*    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
*    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
*    See the GNU Affero General Public License for more details.
*
*    You should have received a copy of the GNU Affero General Public License
*    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
*
*/
// main: compiled.less
@import "app";

@purple-lighter: #eeeeff;
@purple-light: #aa88ff;
@purple: #8866ee;
@purple-dark: #6644cc;
@purple-darker: #441188;

@pink-lighter: #ffddee;
@pink-light: #ff99cc;
@pink: #ff66aa;
@pink-dark: #ee3399;
@pink-darker: #bb1177;

@blue-lighter: #ddffff;
@blue-light: #99eeff;
@blue: #66ccff;
@blue-dark: #44aadd;
@blue-darker: #2299bb;

@yellow-lighter: #ffffdd;
@yellow-light: #ffdd55;
@yellow: #ffcc22;
@yellow-dark: #eeaa00;
@yellow-darker: #cc6600;

@green-lighter: #eeffcc;
@green-light: #b3d944;
@green: #88b300;
@green-dark: #668800;
@green-darker: #445500;

@red: #fc4549; // random :D

@home_colour: @purple;
@news_colour: @yellow;
@beatmaps_colour: @pink;
@ranking_colour: @green;
@community_colour: @blue;
@store_colour: @pink;

// https://about.twitter.com/press/brand-assets
@twitter-colour: #55acee;

// https://www.facebookbrand.com
@facebook-colour: #3b5998;

// just for reference, from bootstrap's variables.less
// @gray-base:              #000;
// @gray-darker:            lighten(@gray-base, 13.5%); // #222
// @gray-dark:              lighten(@gray-base, 20%);   // #333
// @gray:                   lighten(@gray-base, 33.5%); // #555
// @gray-light:             lighten(@gray-base, 46.7%); // #777
// @gray-lighter:           lighten(@gray-base, 93.5%); // #eee

@grey-0: #000;
@grey-1: #111;
@grey-2: #222;
@grey-3: #333;
@grey-4: #444;
@grey-5: #555;
@grey-6: #666;
@grey-7: #777;
@grey-8: #888;
@grey-9: #999;
@grey-a: #aaa;
@grey-b: #bbb;
@grey-c: #ccc;
@grey-d: #ddd;
@grey-e: #eee;
@grey-f: #fff;

.colours(@name) {
  @lighter: "@{name}-lighter";
  @light: "@{name}-light";
  @dark: "@{name}-dark";
  @darker: "@{name}-darker";

  .@{name}-lighter { color: @@lighter !important; }
  .@{name}-light { color: @@light !important; }
  .@{name}-normal { color: @@name !important; }
  .@{name}-dark { color: @@dark !important; }
  .@{name}-darker { color: @@darker !important; }
}

.colours(~"pink");
.colours(~"green");
.colours(~"blue");
.colours(~"yellow");
.colours(~"purple");


JFUIE-90 - Unable to click on context menu in grid's actions

body {
  font: 14px 'Open Sans', 'Helvetica', 'Arial', sans-serif;
}
// Typography
h1 {
  color: @black;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.5px;
}

h2 {
  font-size: 16px;
  font-weight: 600;
}

.alert {
  position: relative;
  border-radius: 0;
  background: #f9f8f8;
  border: 0 none;
  padding: 14px 30px 14px 49px;
  color: black;
  font-weight: 500;

  a {
    text-decoration: none;
    font-weight: 600;

    &:hover{
      text-decoration: underline;
    }

    i:before {color: inherit;}

    &.pull-right {
      text-decoration: none;
      color: inherit;
    }
  }

  b {
    font-weight: 600;
  }

  &:before {
    font-family: "artifactory" !important;
    font-size: 24px;
    font-weight: normal;
    position: absolute;
    left: 14px;
    top: 48%;
    margin-top: -12.5px;
  }

  // Success
  &.alert-success {
    border-left: 3px solid #50ac59;
    &:before {
      content: "\e97f";
      color: #50ac59;
    }
  }

  // Warning
  &.alert-warning {
    border-left: 3px solid #fb8c00;
    &:before {
      content: "\e97e";
      color: #fb8c00;
      left: 14px;
    }
  }

  // Error
  &.alert-danger {
    border-left: 3px solid #d7593e;
    &:before {
      content: "\e97a";
      color: #d7593e;
    }
  }

  // Info
  &.alert-info {
    border-left: 3px solid #006cab;
    padding-left: 49px;
    &:before {
      content: "\e97d";
      color: #006cab;
      left: 14px;
    }
  }

  &.alert-static {
    border-left: 3px solid gray;
    padding-left: 20px;
    &:before {
      display: none;
    }
  }

  &.special-locked-user:before {
    content: "\e902" !important;
    font-size: 30px;
    top: 4px;
    left: 17px;
  }

  ul {
    margin: 4px 20px;
  }

  &.stripped {
    margin-bottom: 0;
  }

  &.xray-alert {
    display: table;
    width: 100%;
    &:before {
      content: '\e911';
    }
    & > div {
      display: table-cell;
      vertical-align: top;
      &.button-wrapper {
        width: 95px;
        vertical-align: middle;
      }
    }
  }
}

a, .alert a {
  &.jf-link {
    text-decoration: underline;
    text-decoration-color: @jfColorSmokedGrey;
    color: @jfColorBlack;
    &:active, &:focus, &:hover {
      text-decoration: underline;
    }
  }
}

#context-menu-layer {
  z-index: 9999999998 !important;
}

.context-menu-root {
  z-index: 9999999999 !important;
}

.spinner-msg-local .icon-hourglass-local {
  background-image: url('data:image/png;base64,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');
  background-repeat: no-repeat;
  animation: spin 0.8s infinite linear;

  background-size: 20px 20px;
  width: 20px;
  height: 20px;
}

.jf-back-link {
  color: @jfColorBlack;
  &:hover {
    color: @jfColorGreen;
    i:before {
      color: @jfColorGreen;
    }
  }
  i:before {
    font-size: 10px;
    position: relative;
    top: -1px;
  }
  &:before {
    margin-right: 5px;
    font-size: 10px;
    position: relative;
    top: -1px;
    content: "\e92e";
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: artifactory !important;
  }
}

label {
  margin-bottom: 3px;
}

body {
  font: 14px 'Open Sans', 'Helvetica', 'Arial', sans-serif;
}
// Typography
h1 {
  color: @black;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.5px;
}

h2 {
  font-size: 16px;
  font-weight: 600;
}

.alert {
  position: relative;
  border-radius: 0;
  background: #f9f8f8;
  border: 0 none;
  padding: 14px 30px 14px 49px;
  color: black;
  font-weight: 500;

  a {
    text-decoration: none;
    font-weight: 600;

    &:hover{
      text-decoration: underline;
    }

    i:before {color: inherit;}

    &.pull-right {
      text-decoration: none;
      color: inherit;
    }
  }

  b {
    font-weight: 600;
  }

  &:before {
    font-family: "artifactory" !important;
    font-size: 24px;
    font-weight: normal;
    position: absolute;
    left: 14px;
    top: 48%;
    margin-top: -12.5px;
  }

  // Success
  &.alert-success {
    border-left: 3px solid #50ac59;
    &:before {
      content: "\e97f";
      color: #50ac59;
    }
  }

  // Warning
  &.alert-warning {
    border-left: 3px solid #fb8c00;
    &:before {
      content: "\e97e";
      color: #fb8c00;
      left: 14px;
    }
  }

  // Error
  &.alert-danger {
    border-left: 3px solid #d7593e;
    &:before {
      content: "\e97a";
      color: #d7593e;
    }
  }

  // Info
  &.alert-info {
    border-left: 3px solid #006cab;
    padding-left: 49px;
    &:before {
      content: "\e97d";
      color: #006cab;
      left: 14px;
    }
  }

  &.alert-static {
    border-left: 3px solid gray;
    padding-left: 20px;
    &:before {
      display: none;
    }
  }

  &.special-locked-user:before {
    content: "\e902" !important;
    font-size: 30px;
    top: 4px;
    left: 17px;
  }

  ul {
    margin: 4px 20px;
  }

  &.stripped {
    margin-bottom: 0;
  }

  &.xray-alert {
    display: table;
    width: 100%;
    &:before {
      content: '\e911';
    }
    & > div {
      display: table-cell;
      vertical-align: top;
      &.button-wrapper {
        width: 95px;
        vertical-align: middle;
      }
    }
  }
}

a, .alert a {
  &.jf-link {
    text-decoration: underline;
    text-decoration-color: @jfColorSmokedGrey;
    color: @jfColorBlack;
    &:active, &:focus, &:hover {
      text-decoration: underline;
    }
  }
}

#context-menu-layer {
  z-index: 9999999999 !important;
}

.spinner-msg-local .icon-hourglass-local {
  background-image: url('data:image/png;base64,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');
  background-repeat: no-repeat;
  animation: spin 0.8s infinite linear;

  background-size: 20px 20px;
  width: 20px;
  height: 20px;
}

.jf-back-link {
  color: @jfColorBlack;
  &:hover {
    color: @jfColorGreen;
    i:before {
      color: @jfColorGreen;
    }
  }
  i:before {
    font-size: 10px;
    position: relative;
    top: -1px;
  }
  &:before {
    margin-right: 5px;
    font-size: 10px;
    position: relative;
    top: -1px;
    content: "\e92e";
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: artifactory !important;
  }
}

label {
  margin-bottom: 3px;
}


use brand colors in cf-buttons vars

use brand colors in cf-buttons vars

/* ==========================================================================
   Capital Framework
   Button Styling
   ========================================================================== */

//
// Theme variables
//

// Color variables

// .btn
@btn-text:                      @white;
@btn-bg:                        @pacific;
@btn-bg-hover:                  @pacific-80;
@btn-bg-active:                 @navy-80;

// .btn__secondary
@btn__secondary-text:           @white;
@btn__secondary-bg:             @gray;
@btn__secondary-bg-hover:       @gray-80;
@btn__secondary-bg-active:      @dark-gray;

// .btn__warning
@btn__warning-text:             @white;
@btn__warning-bg:               @red;
@btn__warning-bg-hover:         @red-80;
@btn__warning-bg-active:        @dark-red;

// .btn__disabled
@btn__disabled-text:            @gray;
@btn__disabled-bg:              @gray-20;
@btn__disabled-outline:         @gray-20;

// Sizing variables

// .btn
@btn-font-size:                 @base-font-size-px;
@btn-border-radius-size:        4px;
@btn-v-padding:                 8px;
@btn-h-padding:                 14px;
@btn-v-padding-modifier-ie:     0.8;

// .btn__super
@btn__super-font-size:          18px;

// Import external dependencies

@import '../../cf-core/src/cf-core.less';
@import '../../cf-icons/src/cf-icons.less';

// Import atomic components of cf-buttons

@import 'atoms/buttons.less';
@import 'atoms/button-links.less';
@import 'atoms/buttons-with-icons.less';
@import 'molecules/button-groups.less';

/* ==========================================================================
   Capital Framework
   Button Styling
   ========================================================================== */

//
// Theme variables
//

// Color variables
// `$color-` variables referenced in comments are from 18F's U.S. Web Design Standards
// https://github.com/18F/web-design-standards/blob/staging/src/stylesheets/core/_variables.scss)

// .btn
@btn-text:                      #ffffff; // $color-white
@btn-bg:                        #0071bc; // $color-primary
@btn-bg-hover:                  #205493; // $color-primary-darker
@btn-bg-active:                 #112e51; // $color-primary-darkest

// .btn__secondary
@btn__secondary-text:           #212121; // $color-base
@btn__secondary-bg:             #9bdaf1; // $color-primary-alt-light
@btn__secondary-bg-hover:       #02bfe7; // $color-primary-alt
@btn__secondary-bg-active:      #00a6d2; // $color-primary-alt-dark

// .btn__warning
@btn__warning-text:             #ffffff; // $color-white
@btn__warning-bg:               #e31c3d; // $color-secondary
@btn__warning-bg-hover:         #cd2026; // $color-secondary-dark
@btn__warning-bg-active:        #981b1e; // $color-secondary-darkest

// .btn__disabled
@btn__disabled-text:            darken( greyscale( #c7336e ), 10% );
@btn__disabled-bg:              lighten( greyscale( #c7336e ), 40% );
@btn__disabled-outline:         greyscale( #c7336e );

// Sizing variables

// .btn
@btn-font-size:                 @base-font-size-px;
@btn-border-radius-size:        4px;
@btn-v-padding:                 8px;
@btn-h-padding:                 14px;
@btn-v-padding-modifier-ie:     0.8;

// .btn__super
@btn__super-font-size:          18px;

// Import external dependencies

@import '../../cf-core/src/cf-core.less';
@import '../../cf-icons/src/cf-icons.less';

// Import atomic components of cf-buttons

@import 'atoms/buttons.less';
@import 'atoms/button-links.less';
@import 'atoms/buttons-with-icons.less';
@import 'molecules/button-groups.less';


[FIX] Slider HCB Bar Borders

[FIX] Slider HCB Bar Borders

Change-Id: If704245b007d2f65078aacff953497162eeff4ed

/* ================================================= */
/* CSS for control sap.ui.commons/Slider.control     */
/* HCB Theme                                         */
/* ================================================= */

.sapUiSli{
	border: none;
	font-size: @sapUiDesktopFontSize;
}

.sapUiSliHori.sapUiSli{
	padding: 16px 0 0 0;
	height: 16px;
}

.sapUiSliVert.sapUiSli{
	padding: 0 0 0 30px;
	width: 16px;
}

.sapUiSliR,
.sapUiSliL{
	border-style: solid;
	border-color:  @sapUiMediumBorder;
}

.sapUiSliHori > .sapUiSliR,
.sapUiSliHori .sapUiSliL{
	height: 2px;
}

.sapUiSliVert > .sapUiSliR,
.sapUiSliVert .sapUiSliL{
	width: 2px;
}

.sapUiSliHori > .sapUiSliR {
	border-width: 1px 0px 1px 0;
	margin-right: 6px;
	margin-left: 6px;
}

.sapUiSliVert > .sapUiSliR {
	border-width: 0px 1px 0px 1px;
	margin-top: 6px;
	margin-bottom: 6px;
}

.sapUiSliHori .sapUiSliL {
	border-width: 1px 1px 1px 1px;
	top: -1px;
}

.sapUiSliVert .sapUiSliL {
	border-width: 1px 1px 1px 1px;
	left: -1px;
}

.sapUiSliHori .sapUiSliBar,
.sapUiSliHori .sapUiSliHiLi {
	border-top: 1px solid;
	border-bottom: 1px solid;
	height: 2px;
	top: -1px;
}

.sapUiSliVert .sapUiSliBar,
.sapUiSliVert .sapUiSliHiLi {
	border-left: 1px solid;
	border-right: 1px solid;
	width: 2px;
	left: -1px;
}

.sapUiSliHori .sapUiSliBar {
	border-top-color: @sapUiMediumBorder;
	border-bottom-color: @sapUiMediumBorder;
	border-left-color: @sapUiMediumBorder;
	background-color: @sapHCStandardBG;
}

.sapUiSliHori.sapUiSliDsbl .sapUiSliBar {
	border-top-color: @sapUiMediumLine;
	border-bottom-color: @sapUiMediumLine;
	border-left-color: @sapUiMediumLine;
	background-color: @sapUiMediumLine;
}

.sapUiSliVert .sapUiSliBar {
	border-left-color: @sapUiMediumBorder;
	border-right-color: @sapUiMediumBorder;
	border-bottom-color: @sapUiMediumBorder;
	background-color: @sapHCStandardBG;
}

.sapUiSliVert.sapUiSliDsbl .sapUiSliBar {
	border-left-color: @sapUiMediumLine;
	border-right-color: @sapUiMediumLine;
	border-bottom-color: @sapUiMediumLine;
	background-color: @sapUiMediumLine;
}

.sapUiSliHori .sapUiSliHiLi{
	left: -1px;
}

.sapUiSliVert .sapUiSliHiLi{
	bottom: -1px;
}

.sapUiSliStd .sapUiSliHiLi,
.sapUiSliRo .sapUiSliHiLi {
	background-color: @sapHCStandardFG;
}

.sapUiSliStd.sapUiSliHori  .sapUiSliHiLi,
.sapUiSliHori.sapUiSliRo .sapUiSliHiLi {
	border-top-color: @sapHCStandardFG;
	border-bottom-color: @sapHCStandardFG;
	border-left-color: @sapHCStandardFG;
}

.sapUiSliStd.sapUiSliVert .sapUiSliHiLi,
.sapUiSliVert.sapUiSliRo .sapUiSliHiLi {
	border-left-color: @sapHCStandardFG;
	border-right-color: @sapHCStandardFG;
	border-bottom-color: @sapHCStandardFG;
}

.sapUiSliHori.sapUiSliDsbl .sapUiSliHiLi {
	border-top-color: @sapUiMediumLine;
	border-bottom-color: @sapUiMediumLine;
	border-left-color: @sapUiMediumLine;
	background-color: @sapUiMediumLine;
}

.sapUiSliVert.sapUiSliDsbl .sapUiSliHiLi {
	border-left-color: @sapUiMediumLine;
	border-right-color: @sapUiMediumLine;
	border-bottom-color: @sapUiMediumLine;
	background-color: @sapUiMediumLine;
}

.sapUiSliGrip {
	border-style: solid;
	border-width: 2px;
}

.sapUiSliHori .sapUiSliGrip {
	height: 12px;
	width: 6px;
	top: -7px;
}

.sapUiSliVert .sapUiSliGrip {
	height: 6px;
	width: 12px;
	left: -7px;
}

.sapUiSliHori.sapUiSliRo .sapUiSliGrip {
	width: 0px;
}

.sapUiSliVert.sapUiSliRo .sapUiSliGrip {
	height: 0px;
}

.sapUiSliStd .sapUiSliGrip,
.sapUiSliRo .sapUiSliGrip {
	background-color: @sapHCStandardBG;
	border-color: @sapHCStandardFG;
}

.sapUiSliStd .sapUiSliGrip:hover {
	background-color: @sapHCHighlightBG;
	border-color: @sapHCStandardFG;
	border-width: 1px;
	padding: 1px;
}

.sapUiSliStd .sapUiSliGrip:focus,
.sapUiSliStd .sapUiSliGrip:active {
	border-color: @sapHCStandardFG;
	background-color: @sapHCHighlightBG;
	border-width: 1px;
	padding: 1px;
	outline: none;
}

.sapUiSliDsbl .sapUiSliGrip {
	border-color: @sapUiContentDisabledTextColor;
	background-color: @sapUiExtraLightBG;
}

.sapUiSliRo .sapUiSliGrip:focus {
	outline: none;
}

.sapUiSliHori .sapUiSliTick {
	height: 4px;
	width: 0;
	top: -5px;
	border-left: 1px solid @sapUiMediumBorder;
}

.sapUiSliHori.sapUiSliDsbl .sapUiSliTick {
	border-left: 1px solid @sapUiMediumLine;
}

.sapUiSliVert .sapUiSliTick {
	height: 0;
	width: 4px;
	left: -5px;
	border-top: 1px solid @sapUiMediumBorder;
}

.sapUiSliVert.sapUiSliDsbl .sapUiSliTick {
	border-top: 1px solid @sapUiMediumLine;
}

.sapUiSliRo .sapUiSliText {
	color: @sapUiBaseText;
}

.sapUiSliDsbl .sapUiSliText {
	color: @sapUiContentDisabledTextColor;
}

.sapUiSliHori .sapUiSliText {
	top: -20px;
}

.sapUiSliVert .sapUiSliText {
	right: 10px;
}

html[data-sap-ui-browser="ie9"] .sapUiSliHori .sapUiSliText {
	top: -19px;
}

.sapUiSliHori .sapUiSliTextLeft {
	left: -2px;
}

.sapUiSliVert .sapUiSliTextLeft {
	bottom: -2px;
}

.sapUiSliHori .sapUiSliTextRight {
	right: -1px;
}

.sapUiSliVert .sapUiSliTextRight {
	top: -1px;
}

/* ================================================= */
/* CSS for control sap.ui.commons/Slider.control     */
/* HCB Theme                                         */
/* ================================================= */

.sapUiSli{
	border: none;
	font-size: @sapUiDesktopFontSize;
}

.sapUiSliHori.sapUiSli{
	padding: 16px 0 0 0;
	height: 16px;
}

.sapUiSliVert.sapUiSli{
	padding: 0 0 0 30px;
	width: 16px;
}

.sapUiSliR,
.sapUiSliL{
	border-style: solid;
	border-color:  @sapUiMediumBorder;
}

.sapUiSliHori > .sapUiSliR,
.sapUiSliHori .sapUiSliL{
	height: 2px;
}

.sapUiSliVert > .sapUiSliR,
.sapUiSliVert .sapUiSliL{
	width: 2px;
}

.sapUiSliHori > .sapUiSliR {
	border-width: 1px 0px 1px 0;
	margin-right: 6px;
	margin-left: 6px;
}

.sapUiSliVert > .sapUiSliR {
	border-width: 0px 1px 0px 1px;
	margin-top: 6px;
	margin-bottom: 6px;
}

.sapUiSliHori .sapUiSliL {
	border-width: 1px 0 1px 0px;
	top: -1px;
}

.sapUiSliVert .sapUiSliL {
	border-width: 0px 1px 0px 1px;
	left: -1px;
}

.sapUiSliHori .sapUiSliBar,
.sapUiSliHori .sapUiSliHiLi {
	border-top: 1px solid;
	border-bottom: 1px solid;
	height: 2px;
	top: -1px;
}

.sapUiSliVert .sapUiSliBar,
.sapUiSliVert .sapUiSliHiLi {
	border-left: 1px solid;
	border-right: 1px solid;
	width: 2px;
	left: -1px;
}

.sapUiSliHori .sapUiSliBar {
	border-top-color: @sapUiMediumBorder;
	border-bottom-color: @sapUiMediumBorder;
	border-left-color: @sapUiMediumBorder;
	background-color: @sapHCStandardBG;
}

.sapUiSliHori.sapUiSliDsbl .sapUiSliBar {
	border-top-color: @sapUiMediumLine;
	border-bottom-color: @sapUiMediumLine;
	border-left-color: @sapUiMediumLine;
	background-color: @sapUiMediumLine;
}

.sapUiSliVert .sapUiSliBar {
	border-left-color: @sapUiMediumBorder;
	border-right-color: @sapUiMediumBorder;
	border-bottom-color: @sapUiMediumBorder;
	background-color: @sapHCStandardBG;
}

.sapUiSliVert.sapUiSliDsbl .sapUiSliBar {
	border-left-color: @sapUiMediumLine;
	border-right-color: @sapUiMediumLine;
	border-bottom-color: @sapUiMediumLine;
	background-color: @sapUiMediumLine;
}

.sapUiSliHori .sapUiSliHiLi{
	left: -1px;
}

.sapUiSliVert .sapUiSliHiLi{
	bottom: -1px;
}

.sapUiSliStd .sapUiSliHiLi,
.sapUiSliRo .sapUiSliHiLi {
	background-color: @sapHCStandardFG;
}

.sapUiSliStd.sapUiSliHori  .sapUiSliHiLi,
.sapUiSliHori.sapUiSliRo .sapUiSliHiLi {
	border-top-color: @sapHCStandardFG;
	border-bottom-color: @sapHCStandardFG;
	border-left-color: @sapHCStandardFG;
}

.sapUiSliStd.sapUiSliVert .sapUiSliHiLi,
.sapUiSliVert.sapUiSliRo .sapUiSliHiLi {
	border-left-color: @sapHCStandardFG;
	border-right-color: @sapHCStandardFG;
	border-bottom-color: @sapHCStandardFG;
}

.sapUiSliHori.sapUiSliDsbl .sapUiSliHiLi {
	border-top-color: @sapUiMediumLine;
	border-bottom-color: @sapUiMediumLine;
	border-left-color: @sapUiMediumLine;
	background-color: @sapUiMediumLine;
}

.sapUiSliVert.sapUiSliDsbl .sapUiSliHiLi {
	border-left-color: @sapUiMediumLine;
	border-right-color: @sapUiMediumLine;
	border-bottom-color: @sapUiMediumLine;
	background-color: @sapUiMediumLine;
}

.sapUiSliGrip {
	border-style: solid;
	border-width: 2px;
}

.sapUiSliHori .sapUiSliGrip {
	height: 12px;
	width: 6px;
	top: -7px;
}

.sapUiSliVert .sapUiSliGrip {
	height: 6px;
	width: 12px;
	left: -7px;
}

.sapUiSliHori.sapUiSliRo .sapUiSliGrip {
	width: 0px;
}

.sapUiSliVert.sapUiSliRo .sapUiSliGrip {
	height: 0px;
}

.sapUiSliStd .sapUiSliGrip,
.sapUiSliRo .sapUiSliGrip {
	background-color: @sapHCStandardBG;
	border-color: @sapHCStandardFG;
}

.sapUiSliStd .sapUiSliGrip:hover {
	background-color: @sapHCHighlightBG;
	border-color: @sapHCStandardFG;
	border-width: 1px;
	padding: 1px;
}

.sapUiSliStd .sapUiSliGrip:focus,
.sapUiSliStd .sapUiSliGrip:active {
	border-color: @sapHCStandardFG;
	background-color: @sapHCHighlightBG;
	border-width: 1px;
	padding: 1px;
	outline: none;
}

.sapUiSliDsbl .sapUiSliGrip {
	border-color: @sapUiContentDisabledTextColor;
	background-color: @sapUiExtraLightBG;
}

.sapUiSliRo .sapUiSliGrip:focus {
	outline: none;
}

.sapUiSliHori .sapUiSliTick {
	height: 4px;
	width: 0;
	top: -5px;
	border-left: 1px solid @sapUiMediumBorder;
}

.sapUiSliHori.sapUiSliDsbl .sapUiSliTick {
	border-left: 1px solid @sapUiMediumLine;
}

.sapUiSliVert .sapUiSliTick {
	height: 0;
	width: 4px;
	left: -5px;
	border-top: 1px solid @sapUiMediumBorder;
}

.sapUiSliVert.sapUiSliDsbl .sapUiSliTick {
	border-top: 1px solid @sapUiMediumLine;
}

.sapUiSliRo .sapUiSliText {
	color: @sapUiBaseText;
}

.sapUiSliDsbl .sapUiSliText {
	color: @sapUiContentDisabledTextColor;
}

.sapUiSliHori .sapUiSliText {
	top: -20px;
}

.sapUiSliVert .sapUiSliText {
	right: 10px;
}

html[data-sap-ui-browser="ie9"] .sapUiSliHori .sapUiSliText {
	top: -19px;
}

.sapUiSliHori .sapUiSliTextLeft {
	left: -2px;
}

.sapUiSliVert .sapUiSliTextLeft {
	bottom: -2px;
}

.sapUiSliHori .sapUiSliTextRight {
	right: -1px;
}

.sapUiSliVert .sapUiSliTextRight {
	top: -1px;
}


[INTERNAL] sap.m.DateTimePicker: fix compact mode and landscape issue

Change-Id: I7a500e67f1a45fdb76d504de7319439fdfca0e9a

/* ===================================== */
/* CSS for control sap.m/DateTimePicker  */
/* ===================================== */

/* styles for popup */
.sapMDateTimePopupCont{
	height: 23rem;
	min-width: 40.0625rem;
}

html[data-sap-ui-browser^=ie]:not(.sapUiMedia-Std-Phone) .sapMDateTimePopupCont{
	min-width: 40.07rem; /* because of IE rounding issues*/
}

.sapMDateTimePopupCont > .sapUiCal,
.sapMDateTimePopupCont > .sapMTimePickerContainer{
	float: left;
}

.sapMTimePickerSwitch{
	width: 100%;
	text-align: center;
}

.sapMTimePickerSep{
	height: ~'calc(100% - 2rem)';
	width: 0px;
	margin-top: 1rem;
	margin-bottom: 1rem;
	border-left: 1px solid @sapUiGroupContentBorderColor;
	box-sizing: border-box;
	float: left;
}

/* Compact mode*/
.sapUiSizeCompact .sapMDateTimePopupCont{
	height: 15.25rem;
	min-width: 34.0625rem;
}

html[data-sap-ui-browser^=ie]:not(.sapUiMedia-Std-Phone) .sapUiSizeCompact .sapMDateTimePopupCont{
	min-width: 34.07rem; /* because of IE rounding issues*/
}

/* Phone mode use device and media selector to support small desktop and large phones*/
.sapMDateTimePopup.sapUiPopupWithPadding > .sapMDialogSection > .sapMDialogScroll > .sapMDialogScrollCont{
	padding: 0;
}

.sap-phone .sapMDateTimePopupCont,
.sapUiMedia-Std-Phone .sapMDateTimePopupCont{
	height: 100%;
	min-width: 20rem;
}

.sap-phone .sapUiSizeCompact .sapMDateTimePopupCont,
.sapUiMedia-Std-Phone .sapUiSizeCompact .sapMDateTimePopupCont{
	min-width: 17rem;
}

.sap-phone .sapMTimePickerSep,
.sapUiMedia-Std-Phone .sapMTimePickerSep{
	display: none;
}

.sap-phone .sapMDateTimePopupCont > .sapUiCal,
.sapUiMedia-Std-Phone .sapMDateTimePopupCont > .sapUiCal{
	width: 100%;
}

.sap-phone .sapMDateTimePopupCont.sapMTimePickerDropDown .sapMTimePickerContainer,
.sapUiMedia-Std-Phone .sapMDateTimePopupCont.sapMTimePickerDropDown .sapMTimePickerContainer{
	height: 23rem;
	width: 100%;
}

.sap-phone.sapUiSizeCompact .sapMDateTimePopupCont.sapMTimePickerDropDown .sapMTimePickerContainer,
.sap-phone .sapUiSizeCompact .sapMDateTimePopupCont.sapMTimePickerDropDown .sapMTimePickerContainer,
.sapUiMedia-Std-Phone.sapUiSizeCompact .sapMDateTimePopupCont.sapMTimePickerDropDown .sapMTimePickerContainer,
.sapUiMedia-Std-Phone .sapUiSizeCompact .sapMDateTimePopupCont.sapMTimePickerDropDown .sapMTimePickerContainer{
	height: 15.25rem;
	width: 100%;
}

/* ===================================== */
/* CSS for control sap.m/DateTimePicker  */
/* ===================================== */

/* styles for popup */
.sapMDateTimePopupCont{
	height: 23rem;
	min-width: 40.0625rem;
}

html[data-sap-ui-browser^=ie]:not(.sapUiMedia-Std-Phone) .sapMDateTimePopupCont{
	min-width: 40.07rem; /* because of IE rounding issues*/
}

.sapMDateTimePopupCont > .sapUiCal,
.sapMDateTimePopupCont > .sapMTimePickerContainer{
	float: left;
}

.sapMTimePickerSwitch{
	width: 100%;
	text-align: center;
}

.sapMTimePickerSep{
	height: ~'calc(100% - 2rem)';
	width: 0px;
	margin-top: 1rem;
	margin-bottom: 1rem;
	border-left: 1px solid @sapUiGroupContentBorderColor;
	box-sizing: border-box;
	float: left;
}

/* Compact mode*/
.sapUiSizeCompact .sapMDateTimePopupCont{
	height: 15.25rem;
}

/* Phone meode*/
.sapMDateTimePopup.sapUiPopupWithPadding > .sapMDialogSection > .sapMDialogScroll > .sapMDialogScrollCont{
	padding: 0;
}

.sapUiMedia-Std-Phone .sapMDateTimePopupCont{
	height: 100%;
	min-width: 20rem;
}

.sapUiMedia-Std-Phone .sapMTimePickerSep{
	display: none;
}

.sapUiMedia-Std-Phone .sapMDateTimePopupCont > .sapUiCal{
	width: 100%;
}

.sapUiMedia-Std-Phone .sapMDateTimePopupCont.sapMTimePickerDropDown .sapMTimePickerContainer{
	height: 23rem;
	width: 100%;
}

.sapUiMedia-Std-Phone.sapUiSizeCompact .sapMDateTimePopupCont.sapMTimePickerDropDown .sapMTimePickerContainer,
.sapUiMedia-Std-Phone .sapUiSizeCompact .sapMDateTimePopupCont.sapMTimePickerDropDown .sapMTimePickerContainer{
	height: 15.25rem;
	width: 100%;
}


SDC-7829. Missing license header for downloadExecutable.less.

Change-Id: Iba5699cede888e4af479eca25086825facbc0639
Reviewed-on: https://review.streamsets.net/11242
Reviewed-by: Madhukar Devaraju <d22477479bbf55ba62bd822f4112c80f292c7805@streamsets.com>

/**
 * Copyright 2017 StreamSets Inc.
 *
 * Licensed under the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.download-executable-modal-form {
  .stepper {
    .title {
      margin-bottom: 10px;
    }
  }
}


[LESS] Changed the color set.

[LESS] Changed the color set.

/******************** paths ********************/

/******************** gutter ********************/
@ptn-util__gutter_smallest: 6px;
@ptn-util__gutter_smaller: 12px;
@ptn-util__gutter_small: 18px;
@ptn-util__gutter_medium: 24px;
@ptn-util__gutter_large: 30px;
@ptn-util__gutter_larger: 36px;
@ptn-util__gutter_largest: 48px;

/******************** size ********************/
@ptn__size_page-loader: 60px;

/******************** color ********************/
@ptn-util__color_selago: #e6dde4;
@ptn-util__color_pastel-blue: #afccca;
@ptn-util__color_gulf-stream: #77aeab;
@ptn-util__color_tonys-pink: #eba190;
@ptn-util__color_apricot: #f5d1ae;
@ptn-util__color_blanched-almond: #ffedcb;

/******************** z-index ********************/
@ptn__z-index_page-loader: 1000;

/******************** paths ********************/

/******************** gutter ********************/
@ptn-util__gutter_smallest: 6px;
@ptn-util__gutter_smaller: 12px;
@ptn-util__gutter_small: 18px;
@ptn-util__gutter_medium: 24px;
@ptn-util__gutter_large: 30px;
@ptn-util__gutter_larger: 36px;
@ptn-util__gutter_largest: 48px;

/******************** size ********************/
@ptn__size_page-loader: 60px;

/******************** color ********************/
@ptn-util__color_white: #fff;
@ptn-util__color_black: #000;
@ptn-util__color_gray-2: #222;
@ptn-util__color_gray-4: #444;
@ptn-util__color_gray-6: #666;
@ptn-util__color_gray-8: #888;
@ptn-util__color_gray-9: #999;
@ptn-util__color_gray-a: #aaa;
@ptn-util__color_gray-b: #bbb;
@ptn-util__color_gray-c: #ccc;
@ptn-util__color_gray-d: #ddd;
@ptn-util__color_gray-e: #eee;
@ptn-util__color_brown: #795548;
@ptn-util__color_magenta: #e91e63;
@ptn-util__color_red: #f44336;
@ptn-util__color_coral: #ff7f50;
@ptn-util__color_lightcoral: #f08080;
@ptn-util__color_deeporange: #ff5722;
@ptn-util__color_orange: #ff9800;
@ptn-util__color_amber: #ffc107;
@ptn-util__color_yellow: #ffeb3b;
@ptn-util__color_lime: #cddc39;
@ptn-util__color_lightgreen: #8bc34a;
@ptn-util__color_green: #4caf50;
@ptn-util__color_teal: #009688;
@ptn-util__color_cyan: #00bcd4;
@ptn-util__color_lightblue: #03a9f4;
@ptn-util__color_blue: #2196f3;
@ptn-util__color_indigo: #3f51b5;
@ptn-util__color_deeppurple: #673ab7;
@ptn-util__color_purple: #9c27b0;
@ptn-util__color_bluegray: #607d8B;

/******************** z-index ********************/
@ptn__z-index_page-loader: 1000;