.page-separator { margin: 20px 0; border-bottom: 1px solid #eee }  /* same horiz line as page-header */

.twitter-typeahead { /*width: auto;*/ float:none; }
div[contenteditable].form-control { height:auto; min-height:3.4rem }                   /* vertical expand editable div */
.form-control-static { padding: 6px 0px }                           /* vertical line up with other controls */
ul.dropdown-menu { max-height:500px; overflow-y:auto }
ul.dropdown-menu > li { cursor:default }
.form-group .form-group { margin-bottom:1px; }
input[type=number].form-control { min-width:7em; }      /* for prices */
body .progress-bar { -webkit-transition: none; -o-transition: none; transition: none; } /* no progress transitions */
body .progress-bar-zero { color:inherit; overflow-wrap:normal; margin-left:6px; }
.start-hidden { display: none }  /* not marked important so slidedown will work on it */

ul.decimal { list-style: decimal }

.amber { color: #FC922D }
.red { color:#CD0A0A }
.green { color:#0FBD00 }

/* buttons */
/* .btn-save::after { content:"Save" }  does not work! */
/* .btn-cancel::after { content:"Cancel" } */
.btn {
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.btn-tight { padding:1px 4px }  /*form use inline*/
.btn-popo { display:inline-block }  /*wrap button when want help even if disabled*/
.btn-group-vertical .btn-popo { display:block }
.btn-popo > .btn[disabled] {
  /* don't let button block mouse events from reaching wrapper */
  pointer-events: none;
}
.btn-link { cursor:pointer }
.btn.active, .btn:active {
    color: #337ab7 !important;
    font-weight: bold;
    /*text-decoration:underline;*/
}
.btn-preview  { color:#39b3d7 !important; }
.btn-plain {
    text-shadow: 0 1px 0 #fff;
    background-image: none;
    background-color: #fff;
    border-color: #fff;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
.btn-plain:hover:not(:disabled) {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-outline {
    background-color: transparent;
    background-image: none;
    color: inherit;
}
.btn-primary.btn-outline {
    color: #428bca;
}
.btn-success.btn-outline {
    color: #5cb85c;
}
.btn-info.btn-outline {
    color: #5bc0de;
}
.btn-warning.btn-outline {
    color: #f0ad4e;
}
.btn-danger.btn-outline {
    color: #d9534f;
}
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
    color: #fff;
}


.form-readonly {

}


.form-control-plain {
    border-color: rgba(0, 0, 0, 0);
    -webkit-box-shadow: none;
    box-shadow: none;
}
.has-error .form-control-plain:empty {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.08);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.08);
}
.form-control-boxed {
    width: auto;
    height: auto;
    padding-bottom: 1px;
    padding-right: 1px;
    display:inline-block;
    margin: 0px 5px 5px 0px;
}
.height-auto { height:auto }

.button-group .btn { margin-bottom:4px; }  /* space buttons when wrap */
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { cursor: default; }
button.close { padding: 0px 3px; }

.badge-success { background-color: #468847; }
.badge-danger { background-color: #d9534f; }
.badge.loader { height:auto; width:1.4em; }
.badge.loader::before,
.badge.loader::after { height:1rem; left:50%; top:50%; margin-left:-.7em; margin-top:-.5em; padding:0; }

/*key colours*/
.swatch { min-width:2.5rem; display:inline-block }
.swatch::after { content: "\00a0" } /*force height with nbsp*/

/*input within button group - not complete*/
/*.btn-group>.form-control:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
.btn-group-vertical>.form-control, .btn-group>.form-control {
    position: relative;
    float: left;
}
.btn-group > .form-control:first-child:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .form-control:last-child:not(:first-child),
.btn-group > .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group .form-control+.btn, .btn-group .form-control+.btn-group, .btn-group .btn-group+.form-control, .btn-group .btn-group+.btn-group {
    margin-left:-1px;
}*/

/* close button and highlight */
.text-close,
.text-close .form-control {
    color: #000
}


/* hide spinbox on number inputs */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}


/* validation */
.form-group.has-error label { color: #a94442; }
.form-group.has-error .btn { border-color:#a94442 }
.has-error .form-control,
.has-error .twitter-typeahead .form-control.tt-input { background-color:#f5e7e7 !important; }


/* ui switching */
.uix-switch-en .uix-de { display:none; }
.uix-switch-de .uix-en { display:none; }


/* utility */
.nowrap { white-space:nowrap }
.large, .large .form-control { font-size:20px }
.v-space { padding-top:6px; padding-bottom:6px; } /* use on div etc to give same spacing as tables, p etc */
.h-space { padding-left:6px; padding-right:6px; } /* use on div etc to give same spacing as tables, p etc */
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.instructions { margin:5px 0px; font-style:italic; font-size:12px; color:#999 }
.greyed { color:#999 }
.col-margin-double > .row { margin-left:0px }   /* col marging merge by default, this makes cols space double */


/*popover helpers*/
.popover { border-radius:4px; box-shadow:5px 5px 10px 6px rgba(0,0,0,.5) }
.popover-wide { max-width: 552px }
.popover.error .popover-title, .popover .popover-title.error { color: #a94442; background-color: #f2dede; border-color: #ebccd1 }
.popover.warning .popover-title, .popover .popover-title.warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc }
.popover.info .popover-title, .popover .popover-title.info { color: #4094BE; /*#50BBF0*/ background-color: #d9edf7; border-color: #bce8f1 }
.popover.success .popover-title, .popover .popover-title.success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6 }
.popover.black .popover-title, .popover .popover-title.black { color: #fff; background-color: #000 }
.popover.error, .popover.warning, .popover.info, .popover.success, .popover.black { padding:0 }
.popover.bottom.error > .arrow:after { border-bottom-color:#f2dede }
.popover.bottom.warning > .arrow:after { border-bottom-color:#fcf8e3 }
.popover.bottom.info > .arrow:after { border-bottom-color:#d9edf7 }
.popover.bottom.success > .arrow:after { border-bottom-color:#dff0d8 }
.popover.bottom.black > .arrow:after { border-bottom-color:#000 }
.popover .arrow { pointer-events:none }

.xmenu-contain { position:relative }
.xmenu-content { position:relative }
.xmenu-content.focus { z-index:8 }
.xmenu {
    position: absolute;
    top: -22px;
    right: 8px;
    padding: 2px;
    background-color: #fff;
    transition: all .15s linear;
    z-index: 9;
    border-radius: 4px;
    outline: 0;
    border: solid 1px #66afe9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
.xmenu > .btn { float: right; margin-left: 2px }
.xmenu > .btn:last-child { margin-left: 0 }
.xmenu.closed {
    background-color: transparent;
    border-color: transparent;
    top: -10px;
    right: 0px;
    z-index: auto;
    -webkit-box-shadow: none;
    box-shadow:none; 
}
.xmenu.closed > .btn:not(.active) { width:0px; padding-left:0px; padding-right:0px; margin-left:0px; margin-right:0px; overflow:hidden; border-left-width:0px; border-right-width:0px}
.xmenu.closed > .btn.active { padding:3px; margin:0; line-height:1; margin-top:.8rem }
.xmenu.closed > .btn.active:not(:hover) { background:transparent }


/* sandbox bar - if you change here also change in email redirect header */
.navbar-warning {
    background: repeating-linear-gradient( -45deg, #FAC261, #FAC261 20px, #ccc 20px, #ccc 40px );
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    border-bottom: solid 1px #e7e7e7;
    display: none;
}
.dev-site .navbar-warning, .test-site .navbar-warning { display: block }
.navbar-warning > span { display:inline-block; padding: 0px 2rem; background:#ccc; color:#e28d00 }
.dev-site .navbar-warning { background: repeating-linear-gradient( -45deg, #50BBF0, #50BBF0 20px, #ccc 20px, #ccc 40px ) }
.dev-site .navbar-warning > span { color:#317394 }
.navbar-default {
    background-image: -webkit-linear-gradient(top, #fff 0%, #d9f6ff 100%);
    background-image: -o-linear-gradient(top, #fff 0%, #d9f6ff 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d9f6ff));
    background-image: linear-gradient(to bottom, #fff 0%, #d9f6ff 100%);
}

/* li - limited view */
/* .li-xx gets added to html element by some public and all private pages */
html [li-su], html [li-te], html [li-bs], html [li-ip], html [li-ry] { display: none !important }
html.li-su [li-su=inline], html.li-te [li-te=inline], html.li-bs [li-bs=inline], html.li-ip [li-ip=inline], html.li-ry [li-ry=inline] { display: inline !important }
html.li-su [li-su=block], html.li-te [li-te=block], html.li-bs [li-bs=block], html.li-ip [li-ip=block], html.li-ry [li-ry=block] { display: block !important }
html.li-su [li-su=li], html.li-te [li-te=li], html.li-bs [li-bs=li], html.li-ip [li-ip=li], html.li-ry [li-ry=li] { display: list-item !important }
html.li-su [li-su=td], html.li-te [li-te=td], html.li-bs [li-bs=td], html.li-ip [li-ip=td], html.li-ry [li-ry=td] { display: table-cell !important }