/* spinnable glyphicon for waiting indicator
    will rotate any glyphicon but intended to be used with glyphicon-refresh
*/
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

/* button loading state - for long running buttons */
.btn.loading::before, .xs-loading::before {
    display: inline-block;
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    animation: spin 1s infinite linear;
    content: "\f1ce";
}

/*
 * Commenting this out since it was causing the spinner to wobble
 .btn.loading::before {
    transform-origin: calc(50% - .5px) calc(50% - .5px);
}
 *
 */

.xs-file-input-container input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.xs-loading::before {
    line-height:normal;
    transform-origin: 50% calc(50% - 1px);
}

.small .xs-loading::before {
    transform-origin: center;
}

/* selectize loading state - for long running lookups */
.xs-selectize-loading.loading::after, .xs-selectize-loading.xs-loading::after {
    display:inline-block;
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    animation: spin 1s infinite linear;
    content: "\f1ce";
    position: absolute;
    margin: 6px 0 0 -52px;
    z-index: 99;
}

.xs-selectize-loading.loading::after {
    margin-right: 5px;
    transform-origin: calc(50% - .5px) calc(50% - .5px);
}

.xs-selectize-loading.xs-loading::after {
    line-height:normal;
    transform-origin: 50% calc(50% - 1px);
}

/* Collapsible panels */
.panel .panel-heading a[data-toggle=collapse] {
    text-decoration: none !important;
    color: inherit;
}

.panel.panel-collapsible > .panel-heading > .panel-title > *::before,
.panel.panel-collapsible > .panel-heading > .panel-title::before,
.panel.xs-panel-collapsible > .panel-heading > .panel-title > *::before,
.panel.xs-panel-collapsible > .panel-heading > .panel-title::before  {
    font-family: 'Glyphicons Halflings';
    font-weight: normal;
    font-size: .9em;
    padding-right: 3px;
}

.panel.panel-collapsible > .panel-heading,
.panel.xs-panel-collapsible > .panel-heading {
    cursor: pointer;
}

.xs-input-disabled {
    cursor: not-allowed;
}

.panel.panel-collapsible > .panel-heading.collapsed > .panel-title::before,
.panel.xs-panel-collapsible > .panel-heading.collapsed > .panel-title::before {
    content: "\e080"; /* chevron right */
}

.panel.panel-collapsible > .panel-heading:not(.collapsed) > .panel-title::before,
.panel.xs-panel-collapsible > .panel-heading:not(.collapsed) > .panel-title::before {
    content: "\e114"; /* chevron down */
}


/* bordered tabs */
.bordered-tab-contents > .tab-content,  .xs-bordered-tab-contents > .tab-content {
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
}

.bordered-tab-contents > .nav-tabs, .xs-bordered-tab-contents > .nav-tabs {
    margin-bottom: 0;
}

.bordered-tab-contents, .xs.bordered-tab-contents {
    margin-bottom: 10px;
}



/* shade sorted column in tables */
.table.xs-table-sortable td.sorted, .table.xs-table-sortable td.rgSorted {
    /* setting a bg color directly would break the table striping, so shade with an bg image instead */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAcAAA0ACbYD1v4AAAAASUVORK5CYII=); /* 3% alpha pixel png */
    background-repeat:repeat;
}

/*hide telerik sort buttons*/
.rgSortAsc, .rgSortDesc {
    display:none
}

/* don't want the sort arrow on its own line, but link text must still be able to break */
.table.xs-table-sortable th.sort-asc, .table.xs-table-sortable th.sort-desc {
    white-space: nowrap;
}

.table.xs-table-sortable th.sort-asc::after, .table.xs-table-sortable th.sort-desc::after {
    font-family: "FontAwesome";
    margin-left:3px;
}
.table.xs-table-sortable th.sort-asc::after {
    content: "\f0de";
}
.table.xs-table-sortable th.sort-desc::after {
    content: "\f0dd";
}

/* custom input group that supports multiple inputs
    Changed this to display: table, as flex was causing issues with Edge.  Seems to be working fine as a table in all browsers.  Making it smaller isn't as pretty,
    but I'm not sure how to fix this other than to start creating browser specific CSS.

*/
.xs-input-group {
    display: table;
}

.xs-input-group-addon-less {
    display: flex;
}

.xs-input-group-addon-less .form-control {
    flex: 1;
}

.xs-input-group-addon-less .input-group-addon, .xs-input-group-addon-less .input-group-btn {
    width: auto;
}

.xs-input-group  .form-control {
   display:table-cell;
}

.xs-input-group  .input-group-addon, .xs-input-group  .input-group-btn {
    width: auto;
}

.xs-input-group *:not(:last-child) {
    border-right-width:0;
}


/* scrollable table body */
.xs-scrollable-table-body {
    overflow: auto;
    max-height: 50vh;
}
.xs-scrollable-table-body .table {
    margin-bottom:0;
}



/* standard buttons */
.btn::before {
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    margin-right: 3px;
    vertical-align: middle;
}

.btn::after {
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    margin-left: 3px;
    vertical-align: middle;
}

.xs-btn-refresh::before {
    content: "\e031";
}

.xs-btn-browse::before {
    content: "\e118";
}

.xs-btn-history::before {
    content: "\e023";
}

.xs-btn-upload::before {
    content: "\e027";
}
.xs-btn-download::before {
	content: "\e026";
}

.xs-btn-save::before {
    content: "\e013";
}

.xs-btn-ok-circle::before {
    content: "\e089";
}

.xs-btn-ban-circle::before {
    content: "\e090";
}

.xs-btn-save-floppy::before {
    content: "\e172";
    margin-right: 0;
}

.xs-btn-promote:before {
    content: "\e093";
}

.xs-btn-demote:before {
    content: "\e094";
}

.xs-btn-add::before {
    content: "\002b";
}

.xs-btn-cancel::before {
    content: "\e014";
}

.xs-btn-copy::before,
.xs-btn-duplicate::before {
    content: "\e224";
}

.xs-btn-edit::before {
    content: "\270f";
}

.xs-btn-margin-right {
    margin-right: 5px;
}

.xs-btn-search::before {
    content: "\e003";
}

.xs-btn-calendar::before {
    content: "\e109";
}

.xs-btn-pause::before {
    content: "\e073";
}

.xs-btn-view-report::before,
.xs-btn-play::before {
    content: "\e072";
}

.xs-btn-dropdown::after {
    content: "\e252";
}

.xs-btn-delete::before {
    content: "\2212";
}

.xs-btn-first::before {
    content: "\e070";
    margin-right:0;
}

.xs-btn-prev::before {
    content: "\e071";
    margin-right:0;
}

.xs-btn-next::before {
    content: "\e075";
    margin-right:0;
}

.xs-btn-download-alt::before {
    content: "\e025";
}

.xs-btn-print::before {
    content: "\e045";
}

.xs-btn-last::before {
    content: "\e076";
    margin-right:0;
}

.xs-btn-reset::before {
    font-family: FontAwesome;
    content: "\f0e2";
}

.xs-btn-back::before {
    content: "\e079";
}

.xs-btn-mail::before {
    content: "\2709";
}

.xs-btn-subscribe::before {
    content: "\e044";
}

.xs-checked {
    content: "\e013";
}

/* required form elements */
.form-group.xs-required .control-label::before, .control-label.xs-required::before {
    content: "*";
}

.form-group.xs-required.xs-has-error-null .control-label::after, .form-group.xs-has-error-null .control-label.xs-required::after {
    font-size: .85em;
    content: " Required";
}

.form-horizontal .form-group.xs-required.xs-has-error-null .control-label::after, .form-horizontal .form-group.xs-has-error-null .control-label.xs-required::after {
    display:block;
}

/* convenience classes */
.xs-noflex {
    flex: 0 !important;
}

.xs-flex-1 {
    flex:1;
}

.xs-flex-container {
    display:flex;
}

.xs-flex-container-column {
    display:flex;
    flex-direction: column;
}

.xs-auto-width, .xs-width-auto {
    width: auto !important;
}


/* style guide warnings */
.xs-style-guide-warning {
    font-size: .8em;
    font-weight: bold;
    background-color: magenta;
    color: white;
    padding: 5px 10px 5px 10px;
}
.xs-style-guide-warning a {
    color: white;
    text-decoration: underline;
}

.xs-style-warning-toast .toast-error {
    background-color: magenta !important;
    color: white !important;
}

.xs-panel-condensed h1, .xs-panel-condensed h2, .xs-panel-condensed h3, .xs-panel-condensed h4, .xs-panel-condensed h5 {
    margin: 0;
}
.xs-panel-condensed .form-group:last-child {
    margin-bottom: 0;
}

.xs-min-width-med {
    min-width: 150px!important;
}

.xs-min-width-lg {
    min-width: 200px!important;
}

.xs-no-padding {
    padding: 0px !important;
}

.xs-no-margin {
    margin: 0px !important;
}
.xs-no-bottom-margin {
    margin-bottom: 0px !important;
}

.xs-alert-no-margin {
    margin: 0;
}

.xs-alert-sm-padding {
    padding: 3px;
}

.xs-btn-no-background-primary {
    background-color: #4c721d !important;
    color: white;
    border: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
}

.xs-btn-no-background-primary:hover {
    background-color: #4c721d !important;
    color: white;
    border: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
}

.xs-alert-info-no-margin {
    border-color: #f8f8f8;
}

.align-middle {
    vertical-align: middle !important;
}


.xs-form-group-static-text {
    margin-bottom:0;
}

.xs-tableheader-default {
    background-color: white !important;
    color: #4c721d !important;
    border-color: #666 !important;
}

.xs-tableheader-light-green {
    background-color: #a7ce57 !important;
    color: #666 !important;
    border-color: #666 !important;
}

.xs-tableheader-gray {
    background-color: #d6e9c6 !important;
    color: #666 !important;
    border-color: #666 !important;
}

.xs-table-no-bottom-margin {
    margin-bottom: 0px !important;
}

.breadcrumb.xs-wizard > .active > span {
    color:black;
    text-decoration:underline;
}

.breadcrumb.xs-wizard {
    padding-left:0px;
}

.breadcrumb.xs-wizard > li + li:before {
    font-family: 'Glyphicons Halflings';
    content: "\e080"; /* chevron right */
 }

.xs-ellipsis {
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}


.xs-control-group > .xs-control-size-1-12 {
    width: 8%;
}
.xs-control-group > .xs-control-size-2-12 {
    width: 16%;
}
.xs-control-group > .xs-control-size-3-12 {
    width: 25%;
}
.xs-control-group > .xs-control-size-4-12 {
    width: 32%;
}
.xs-control-group > .xs-control-size-5-12 {
    width: 41%;
}
.xs-control-group > .xs-control-size-6-12 {
    width: 49%;
}
.xs-control-group > .xs-control-size-7-12 {
    width: 58%;
}
.xs-control-group > .xs-control-size-8-12 {
    width: 65%;
}
.xs-control-group > .xs-control-size-9-12 {
    width: 75%;
}
.xs-control-group > .xs-control-size-10-12 {
    width: 83%;
}
.xs-control-group > .xs-control-size-11-12 {
    width: 91%;
}
.xs-control-group > .xs-control-size-12-12 {
    width: 99%;
}

.xs-control-group select {
    padding: 0px 0px 1px 0px;
    display: inline;

}
.xs-control-group input {
    padding: 4px 0px 5px 12px;
    display: inline;
}

.xs-bootbox-btn-right {
	float: right !important;
	margin-left: 3px;
}

/* used by CheckboxList displaying columns */
.xs-control-columns {
    display:block;
    margin-left:-15px;
    clear:both;
}

.xs-modal-level-2 {
    z-index: 1150;
}
.xs-modal-level-2 + .modal-backdrop {
    z-index: 1140;
}

.xs-icon-flipped {
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}