/* Global Definitions
   ========================================================================== */

/* The width and height properties (and min/max properties) includes content, padding and border, but not the margin*/
/** { box-sizing: border-box; }*/

/**
 * See http://pxtoem.com/ to easily convert px to em.
 * Globally set the default font size.  1em=16px is the default size if a
 * font size is not specified.
 * Note that previously we defaulted to 12px.
 */
html { font: 400 14px Arial, Helvetica, sans-serif;}
body { color:#444444; min-width: 400px; margin: 0;}
html.NoMinWidthPage body {min-width: 0;} /*For cases we do not want a min width */
a { color: #004485;}
a:hover { color:#2d83ed; }
.visited {color: #682792;}

.h3 {font-size: 1.4em; font-weight: bold; padding-bottom: 20px;}

th { color:#274E9E; border:1px solid #BAD9FF; background-color:#E8F2FF; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
textarea {
    width: 100%;
    height: 4em;
    box-sizing:border-box;
    padding: 5px;
    /*background-color: #FFF;*/
    border-radius: 3px;
    transition: border .5s;
    border: 1px solid #b7b7b7;
}

textarea.larger {
    height: 10em;
}

input[type=text]:not(.k-input)
{
    padding: 5px;
    border-radius: 3px;
    transition: border .5s;
    border: 1px solid #b7b7b7;
    box-sizing:border-box;
}

input[type=text]:focus:not(.k-input),
textarea:focus,
.k-combobox:focus
{
    border: 1px solid #3498DB;
    box-shadow: 0 0 5px #3678cd;
    outline: none;
}

/*Make kendo combobox styling match styling of other inputs*/
.k-dropdown-wrap .k-input, .k-picker-wrap .k-input {
    /*For IE 11 since line height does not work on inputs.
    This does seem to work on all browsers so not using line-height*/
    height: 1.85em !important;
    /*line-height: 1.5em !important;*/

    text-indent: 0.3em !important;
}

.k-select .k-icon {
    vertical-align: baseline !important;
}

.k-dropdown-wrap.k-state-focused:not(.k-item) {
    border: 1px solid #3498DB !important;
    box-shadow: 0 0 5px #3678cd !important;
}

/* Increased width to fit date and time without cropping text*/
.k-datepicker {
    box-sizing: border-box;
    width: 14em;
}

/*Had to overwrite blue font color.  This is for showing items needing attention in dashboard*/
.k-panelbar .k-panelbar-content .sr_container {
    color: #333;
}

/*Insure the drop section shows when in modal windows for select2 component*/
.select2-drop {
    z-index: 20010 !important;
}

/*Size the select2 for selecting collections in the search result filter to fit available width*/
.sr_filter_container .select2-container {
    width: 100% !important;
    padding-right: 5px;
}

.select2-container.select2-dropdown-open {
    min-width: 350px !important;
}

/*Resize the height on the search or collections page*/
/*.CollectionsPage .select2-container,
.CollectionsPage .select2-choice,
.CollectionsPage .select2-chosen {
    height: 20px !important;
    line-height: 20px !important;
}

.CollectionsPage .select2-container .select2-choice .select2-arrow b {
    background-position: 0 -1px !important;
}*/

/*Blue bar around collection choice select2 drop box.  Adjust padding so it looks even.*/
/*.collectionChoiceHeading {
    padding: 3px 5px 2px !important;
}*/

/**
 * Insure SweetAlert2 dialogs do not fall behind.
 */
.swal2-container {
    z-index: 20100 !important;
}

/**
 * If message in SweetAlert dialog contains list justify it left.
 */
.swal2-content ul {
    text-align: left; padding-left: 75px;
}

/**
 * JQuery ui dialogs were falling behind jquery ui windows in vrm context when editing item
 * and then cancelling so overriding z-index so it is always in front.
 */
.ui-dialog { z-index: 20100 !important ;}

/**
 * Kendo Editor styles
 */
 /*Change buttons in the editor toolbar to be 24x24 instead of 32x32*/
.k-editor .k-button-group .k-tool {
    width: 24px;
    height: 24px;
    line-height: 24px;
}

/*Change drop down menu heights to 24 instead of 32 in the editor toolbar*/
.k-editor .k-dropdown-wrap .k-input {line-height: 24px; padding-top:0; padding-bottom:0;}
.k-editor .k-dropdown-wrap .k-select {line-height: 24px;}


/********************/
/** Main Site Page **/
/********************/
.site_content { width:100%; box-sizing: border-box; padding-left: 10px; padding-right: 10px; }
.site_header_container { /*margin-bottom: 3px;*/}
.site_header { background:url(../images/logos/metacat_logo_small.png) no-repeat 10px 10px; white-space:nowrap; height:45px; }
.site_header_table { width: 100%; height:41px;}

.site_header_cell_top_left { width:100%; height: 1.5em; min-height: 25px; }
.site_header_cell_top_right {  }
.site_header_cell_bottom_left { white-space:nowrap ;padding-left: 10px; }
.site_header_cell_bottom_right { padding-left:20px; padding-right:70px; white-space:nowrap; }

.site_header_label { /*font-size:1.60em; color:#2D83ED; font-weight:bold;*/ display:none;}
.site_header_description { display:none; }

.site_header_links {
    color: #FFFFFF;
    border-bottom-left-radius: 30px;
    position:absolute; top:0; right:0;
    padding-bottom:3px;
    background: #4c96f0; /* old browsers */
    background: linear-gradient(to bottom, #4c96f0, #70aaf2);
}
/*.site_header_links { background:url("../images/header_links_bg_fs8.png") no-repeat bottom left; color:white;
    position:absolute; top:0; right:0; padding-bottom:3px; *//*border-top:3px solid #2d84ef;*//*}*/

/*Needed for IE6 so words don't wrap*/
.site_header_links span { white-space:nowrap; }
.site_header_links a { text-decoration: none; color:white; }
.site_header_links a:hover { text-decoration: underline; }
.site_header_links .logout_link { font-weight:bold; }
.site_header_links .toolbar .separator {  padding-left: 2px; padding-right: 2px;}
.site_header_links .toolbar .separator:before { content: "|"; }
.collectionToolbar .toolbar .separator {  padding-left: 4px; padding-right: 4px;}

.site_header_table .text {}
.site_header_table .account_name {}

.slide_link { font-weight:bold; }
.slide_link:hover {  }
/*************************/

form .button_bar{ text-align: right;}
td.selected { font-weight: bold; }
.tab-row td.selected { font-weight: normal; }

/* Hover highlights for tables with collapsed border. */
.rowSelectable tbody tr:hover {
    /*outline: 1px solid #2d83ed;*/
}

.rowSelectable tr:hover:not(.rowSelected) td:not(.norecords-td) td:not(.not-selectable-td) {
    background-color: #fdf4b5;
}

.rowSelected {
    /*background-image: none,linear-gradient(to bottom,rgba(255,255,255,.2) 0,rgba(255,255,255,.0) 100%);
    background-color: #ff9d00;*/

    /*background-image:linear-gradient(to bottom,rgba(255,255,255,.6) 0,rgba(255,255,255,.0) 100%);
    background-color: #2d83ed;
    color: white;*/

    outline: 1px solid #2d83ed;
    background-color: rgb(194, 215, 255);
}

.rowHighlight {
    background-color: rgb(207, 255, 183);
}

.odd.rowHighlight {
    background-color: rgb(207, 255, 183);
}

.data_table .rowSelected a {
    /*color: white;*/
}

/** Force content to new page when printing.  page-break-after works, as well
 *  To use add empty div or span where you want the page break.  <span class="page_break" />
**/
.page_break_after { page-break-after: always; }
.page_break_before { page-break-before: always; }

/*When using floats a child can be taller than the element containing it.
Add this to the parent to fix.*/
.clearFix {
    overflow: auto;
}

/*Will vertically center any element without knowing height.*/
.verticalCenter {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

/**
Highlights text field or select when it contains a value.
Note that for this to work the attribute required="true"
needs to be set to the input or select tag.
**/
.required:after {
    content: "*";
    color: red;
    padding-left: 3px;
}

.required {
    font-style: italic;
}

input:valid.highlight_border, select:valid.highlight_border {
    border: #ffba4e solid 1px;
    border-radius: 5px;
    box-shadow: 0 0 3px darkorange;
    z-index: 1;
}

/* Removes the highlight above if empty */
input:invalid.highlight_border, select:invalid.highlight_border {
    box-shadow: 0 0 0 white;
    z-index: 1;
}

/*button:focus, button:active, input:focus, input:active, select:focus, select:active, textarea:focus, textarea:active .tool_cell {
    box-shadow: 0 0 7px #0066FF;
    z-index: 1;
}*/

/*textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
    outline: 0 none;
}*/

/*textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] {

    background-clip: padding-box;
    background-color: #FFFFFF;
    border-color: #848484 #C1C1C1 #E1E1E1;
    border-image: none;
    border-radius: 0 0 0 0;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    font-family: Arial,sans-serif;
    font-size: 13px;
}*/

/*Fix for IE8 and 9. Must be wrapped in div to keep it from actually displaying inline.*/
.fieldset_auto_width {
    display: inline-block;
}

/** Mimics fieldset border */
.fieldset {
    border: 2px groove threedface;
    /*border-top: none;*/
    padding: 0.5em;
    margin: 1em 2px;
}


/** Style for helping align text with a checkbox. **/
.checkbox_label {
    display: inline-block;
    padding-left: 15px;
    text-indent: -15px;
}

.checkbox {
   /* width: 13px;
    height: 13px;*/
    /*padding: 0;
    margin:0;*/
    vertical-align: middle;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

/*To have a DIV shrink and enlarge based on its content.  To use <div class="auto_size">*/
div.auto_size { display: table; width: 1px; }
div.auto_size > div { display: table-cell; }

/*******************/
/** Common Styles **/
/*******************/
input[type=text].form_field, div.form_field { min-width: 250px; }
.form_field_name { text-align: right; white-space: nowrap}
.form_container { width: 50em; max-width: 100%; }

/*Styles for aligning labels and fields in a table.*/
.formFieldTableColumn {
    width: 100%;
}

.formLabelTableColumn {
    white-space: nowrap;
}

.formFieldLabel {
    display: inline-block;
    width: 100%;
    text-align: right;
}

.formFieldValidRange {
    font-size: 0.625rem;
    min-font-size: 0.625rem;
}

.searchFormField {
    margin-bottom: 3px;
}

.datetext { color:#336699; }
.date_story { color: #777777; font-family: Verdana,sans-serif; }
.subtext { font-weight:normal; font-size:0.563em; }
.name_text { font-weight: bold; }
.nametext { font-weight: bold; }
.valuetext { font-weight: bold; color:#0950B5; }
.largetext { font-weight: bold; font-size:1.25em; }
.pastDue {color: red;}
.shortLabel {width: 80px; display: inline-block; font-weight: bold;}

/*table.data_table > thead > tr.navigation > td { font-size: 1rem; }*/

/*Hack for Firefox to get the border to display correctly for tables with no records*/
/*@-moz-document url-prefix() {
    .norecords-td div {
        width:inherit;
        height: inherit;
        border-bottom: 1px solid #c5c5c5;
        *//*border: 1px solid #c5c5c5;*//*
       *//* margin-left: -1px;
        margin-top: -1px;*//*
        *//*padding: .4em .6em;*//*
        padding: 3px;
    }

    table.data_table > tfoot > tr > td.norecords-td, table.data_table > tfoot > tr.norecords-tr {
        border: none;
        padding: 0;
    }
}*/

.tree_table_container {border: 1px solid #BCD2E6; }
.tree_table_container table { }
.tree_table_container th { padding-left: 5px; padding-right: 5px; border: 1px solid #ffffff; border-radius: 0;}
.tree_table_container td {
    vertical-align:top;
    padding-left: 5px !important;
    padding-right: 5px !important;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    white-space: nowrap;
}

th.wicket_orderUp { padding-right: 15px; background-position:right center; background-repeat:no-repeat;
    background-image: url(../images/triangle_white_down_10.png); background-color: #BAD9FF;}
th.wicket_orderDown { padding-right: 15px; background-position:right center; background-repeat:no-repeat;
    background-image: url(../images/triangle_up_white_10.png); background-color: #BAD9FF;}
th.orderNone { padding-right: 15px; background-position:right center; background-repeat:no-repeat;
    background-image:url( ../images/arrow_off.png);
}

table .row_column {
    font-weight: bold;
}

.lg_border { border: 1px solid #EEEEEE; border-radius: 5px;}
.border { border: 1px solid #ccc; }
.border_top { border-top: 1px solid #ccc; }
.border_rounded { border: 1px solid #ccc; border-radius: 5px;}
.highlight_border {padding: 5px; border: #ffba4e solid 1px; border-radius: 5px;}
.even {  }
.odd { background: #f5f5f5; }
div.even { padding: 5px; }
div.odd { border-top: #CCCCCC solid 1px; border-bottom: #CCCCCC solid 1px; padding: 5px; }
div.odd:first-child { border-top:none; }
.selected_row { font-weight:bold; }

.indent_small { padding-left: 25px; }
.indent_medium { padding-left: 50px; }
.indent_large { padding-left: 75px; }

.iconRemove {
    background:url(../images/delete_16.png) no-repeat;
    width:16px;
    height:16px;
    float:left;
    margin-right:2px;
}

.iconRemoveDisabled {
    background:url(../images/delete_disabled_16.png) no-repeat;
    width:16px;
    height:16px;
    float:left;
    margin-right:2px;
}

.link_decoration_none a { text-decoration:none;}

.MetacatHeadingPanel {
    padding-bottom: 5px;
    padding-top: 3px;
}

.MetacatHeadingPanel .headingTableCell{
    white-space:nowrap;
}

.MetacatHeadingPanel .headingToolbarTableCell{
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    text-align: right;
}

/*This is for CollectionFilterChoiceGetAllPanel looks better algined left.*/
.MetacatHeadingPanel .headingToolbarTableCell .collectionToolbar {
    text-align: left !important;
}

/* Custom heading style */
.heading_background {
    border-radius: 3px;
    background: #70aaf2; /* old browsers */
    background: linear-gradient(to bottom, #4c96f0, #70aaf2);
    border-collapse: collapse;
    border-spacing: 0;
}

/*.h_base { color:#FFFFFF;
    background: #70aaf2; *//* old browsers *//*
    background: linear-gradient(to bottom, #4c96f0, #70aaf2);
}

.h_bcolor {
    *//*box-shadow: 0 4px 2px -2px #59c4d7;*//*
    background-color: #70aaf2;
    background: #70aaf2; *//* old browsers *//*
    background: linear-gradient(to bottom, #4c96f0, #70aaf2);
}*/

/*Image based background*/
/*.heading_background { background:url("../images/heading_background.png") repeat-x; }*/

.dashboard-accordion {
    overflow: hidden;
}

.h_base {
    color: #ffffff;
    font-weight:bold;
    font-size: 1.1em;
    padding: 5px 5px 3px;
    white-space:nowrap;
    border-top-left-radius: 5px; border-top-right-radius: 5px;
}

.h_base2 {
    /*color: #576f98;*/
    /*color: #ffffff;*/
    font-weight:bold;
    font-size: 1.1em;
    padding: 5px 5px 3px;
    white-space:nowrap;
    border-top-left-radius: 5px; border-top-right-radius: 5px;
}

/* No padding needed in the accordion*/
.dashboard-accordion table.h_base {
    padding: 0;
}

.h_bcolor {
    background: linear-gradient(to bottom, #4c96f0, #70aaf2);
}

.h_bcolor2 {
    background-color:#BAD9FF;
}

.h_bcolor a:hover {
    color: #0067c9;
}

/*There is no title above table it is in the accordion tab so the color no longer makes sense
as it was used to high light the heading or title. */
.dashboard-accordion table.h_bcolor {
    background: none;
}

.head_base { font-family: arial,sans-serif;font-size: 1.1em; }

.heading_large {
    font-weight:bold;
    font-size: 1.1em;
    padding: 5px 5px 3px;
    white-space:nowrap;
    color:#FFFFFF;
    border-radius: 5px;
}
/* Designed to be used in combination with h_base */
.h_decr { font-size: 1em; }
.h_incr { font-size: 1.5em; }

.h_border, .h_border2 { border:1px solid #BAD9FF; border-bottom-width: 0px; }
.h_content, .h_content2 { padding: 5px; border:1px solid #BAD9FF; }

.panel_content { width: 100%; min-width: 200px; border: 1px solid #FFC466;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

.invisible {
    display: none;
}

.fixed_toolbar {
    /*box-shadow: 0 0 7px #0066FF;
    border: #5cb0ff solid 1px;
    background-color: #BAD9FF;*/
    box-shadow: 0 0 7px darkorange;
    border: #ffba4e solid 1px;
    background-color: #ffeecf;
    border-radius: 5px;
    position:fixed;
    _position:absolute;
    right: 10px;
    bottom: 15px;
    z-index: 10;
    line-height: normal;
    padding: 5px;
}

.true-value:before {
    content: '';
    display: inline-block;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    margin-right: 3px;
    background: green;
    background: radial-gradient(circle at 2px 2px, #00ff00, #21800b);
}

.false-value:before {
    content: '';
    display: inline-block;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    margin-right: 3px;
    background: lightgrey;
    background: radial-gradient(circle at 2px 2px, lightgrey, grey);
    /*background: red;
    background: radial-gradient(circle at 2px 2px, red, #a70000);*/
}

/********************************/
/** Styles to mimic tables     **/
/********************************/
/** <div class="form">
        <span class="category">Basic</span>
        <div class="row">
            <div class="label"> Label1 </div>
            <div class="formw">
                <div class="element">
                    <input type="text" size="50">
                </div>
            </div>
            <div class="clear"> </div>
        </div>
        <div class="row">
            <div class="label"> Label2 </div>
            <div class="formw">
                <div class="element">
                    <input type="text" size="50">
                </div>
            </div>
            <div class="clear"> </div>
        </div>
    </div>  **/
div.form {
    border: 1px solid #e7e7e7;
    clear: both;
    margin: 20px 2px 2px;
    padding: 10px;
    border-radius: 5px;
}
div.form span.category {
    background-color: #FFFFFF;
    color: #4271B5;
    font-weight: bold;
    padding: 0 5px;
    position: relative;
    top: -20px;
}

div.row {
    clear: both;
    margin-bottom: 5px;
    padding-top: 5px;
}

div.row div.label {
    color: #565656;
    float: left;
    font-weight: bold;
    overflow: hidden;
    text-align: right;
    width: 18%;
}

[dir="ltr"] div.row div.label, [dir="rtl"] div.row div.formw {
    float: left;
    text-align: right;
}

[dir="rtl"] div.row div.label, [dir="ltr"] div.row div.formw {
    float: right;
    text-align: left;
}

div.row div.form_header {
    background-color: #E5EDF9;
    border: 1px solid #4271B5;
    padding: 2px;
    white-space: nowrap;
}

div.row div.formw {
    float: left;
    text-align: left;
    width: 80%;
}

div.row div.element {
    float: left;
}

.clear {
    clear: both;
    font-size: 0;
    height: 0;
    line-height: 0;
}

/*******************************/
/** Feedback, Warning, etc... **/
/*******************************/
.feedback { width: 100%; padding: 0px 0px 0px 0px; }
.feedbackPanelINFO { color: green; font-weight:bold; list-style-image:none; list-style-type:circle; }
.feedbackPanelERROR { color:red; font-weight:bold; list-style-image:none; }

.support_panel {position: fixed; bottom: 0; left: 0; width: 100%;}
.requirement_container { background-color:#FFFF99;  padding:3px 15px 3px 10px;
    border:1px solid #676767; text-align: center; }
.requirement_container ul { text-align: left; display: inline-block; }
.requirement_text { color: red; font-size:1.5em; font-weight: bold;}
.warning_label { width: 100%; color: white; background-color: #ff6b6b; font-weight: bold; text-align: center; border-radius: 3px;}

/*Style Templates for Forms*/
.defaultFormStyle {
    /* font-family: 'Open Sans', arial;*/
    /*font-family: 'Museo For Dell', 'Trebuchet MS', Arial, Helvetica, sans-serif;*/
    font-family: Arial,serif;
    background: #f1f1f1;
    width: 600px;
    padding: 25px;
    border-radius: 4px;
    border: 1px solid #dddddd;
}

.defaultFormStyle p {
    font-size: 0.938em;
    line-height: 1.3;
}

.defaultFormStyle input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.defaultFormStyle select,
.defaultFormStyle textarea
{
    box-sizing: border-box;
    width: 200px;

    background-color: #FFF;
    border-radius: 3px;
    padding: 5px;
    transition: border .5s;
    border: 1px solid #dddddd;
}

.defaultFormStyle input:focus:not([type=submit]):not([type=checkbox]):not([type=radio]),
.defaultFormStyle select:focus,
.defaultFormStyle textarea:focus {
    border: 1px solid #3498DB;
    box-shadow: 0 0 5px #3678cd;
    outline: none;
}

.defaultFormStyle input[type=submit] {
    font-size: 1.2em;
    font-weight: 200;
    transition: border .5s;
    padding: 5px;
}

.defaultFormStyle .submit-feedback-row .feedbackPanel {
    display: inline-block;
    margin: 0;
}

/************************************/
/** Metacat Quiz/Presentation **/
/************************************/
.quizSlideViewNavigator {
    font-size: 1.5em;
}

.quizSlideViewNavigator .prev {
    /*background:url(../images/bullet_triangle_blue_left.png) no-repeat center;*/
    /*background-color: #e6efff;*/
    /*width:16px;
    height:16px;*/
    transform: scale(-1, 1);
    display: inline-block;
    text-decoration: none;
    color: #378de5;

    border-radius:6px;
    border:1px solid #c1e3f3;
    padding:3px 8px;
}

.quizSlideViewNavigator .prev:hover {
    background-color:  #e6efff;
    border:1px solid #84bbf3;
    transition: all .5s;
}

.quizSlideViewNavigator span.prev {
    /*background:url(../images/bullet_triangle_grey_left.png) no-repeat center;*/
    background-color: #f4f4f4 !important;
    border:1px solid #dcdcdc !important;
    color: #dcdcdc !important;
}

.quizSlideViewNavigator span.prev em {
    font-style: normal;
}

.quiz-slide-view-item-container { padding-left: 2%; padding-right: 2%; }

.statBar {
    border-radius: 4px 4px 0 0; /* Remember vendor prefixes */
    box-shadow: 0 1px 0 0 rgba(255,255,255,.6) inset; /* Remember vendor prefixes */
    display: block;
    height: 35px;
    padding: 0 1em 5px 1em;
    text-align: center;
    vertical-align: bottom;
    white-space: nowrap;
}

.statBar .label, .statBar .time-remaining-label {
    /*background: #eaeaea;*/
    /*margin: -.6em 0 65px 0;*/
    font-weight: bold;
    opacity: .6;
    font-size: 0.8em;
}

.statBar .percent, .statBar .numberUnanswered, .statBar .time-remaining {
    font-size: 20px;
    letter-spacing: -1px;
    width: 100%;
}

.statBar .unanswered {
    float: right;
}

.statBar .progress {
    float: left;
}

.statBar .time-remaining-container {
    display: inline-block;
}

.statBar .label {
    text-overflow: ellipsis;
    overflow:hidden;
    min-width: 25px;
}

.statBar .teal {
    background: #4ecdc4 linear-gradient(#76d8d1, #4ecdc4 70%);
    background: -moz-linear-gradient(top,  #76d8d1 0%, #4ecdc4 70%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #76d8d1 0%,#4ecdc4 70%);
    border: 1px solid #4ecdc4;
}

.quiz-slide-view-controller {max-width: 350px; min-width: 225px; }
.quiz-slide-view-controller .questionStatusScrollContainer { max-height: 20em; min-height: 1em; /*min-width: 18em;*/ overflow-y: auto; border: 1px solid #dddddd;}
.quiz-slide-view-controller .ui-selectable .ui-selecting { background: #FECA40; }
.quiz-slide-view-controller .ui-selectable .ui-selected { background: #CCCCCC !important; box-shadow: 1px 2px 4px rgba(0,0,0,0.3); border-bottom-color: #CCCCCC; position: relative; border-left: 4px solid #007cb8 !important;}
.quiz-slide-view-controller .ui-selectable { list-style-type: none; padding: 0;  cursor: pointer; margin: 0}
.quiz-slide-view-controller .ui-selectable li { height: 2.5em; line-height: 2.5em; padding-left: 1em; white-space: nowrap; border-bottom: 1px solid #dddddd; border-left: 4px solid transparent;}
.quiz-slide-view-controller .ui-selectable li:hover { background-color: #ececec; }
.quiz-slide-view-controller .ui-selectable li.answered {background-color: #f7f7f7; border-left: 4px solid #666666;}
.quiz-slide-view-controller .ui-selectable li.answered:hover {background-color: #ececec;}
.quiz-slide-view-controller .ui-widget-content { border: none;}

@-moz-document url-prefix() {
    .quiz-slide-view-controller {
        min-width: 250px;
    }
}

/* This is needed for the old status panel.*/
.quiz_status_content { border: 1px solid #BCD2E6; background: #EEEEEE; border-radius: 5px;}

.quiz_submit_button {
    font-weight:bold;
    font-size: 1.5em;
}
.quiz_floating_status { position:fixed; _position:absolute; right: 20px; bottom: 20px; z-index: 10;
    padding: 5px; line-height: normal; text-align: center;}
.quiz_question_status_panel { border: 1px solid #BCD2E6; background: #FFFFFF;}
.quiz_question_status {
    float: left;
    padding: 2px;
    width: 1.5em;
    overflow: hidden;
    border: 1px solid #BCD2E6;
    text-align: center;}
.quiz_percent_correct {
    border-radius: 5px; padding: 5px; border: 3px solid #98ACD8; display: inline-block;}

.quizPasswordForm {
    -webkit-animation-name: highlightPulse 2s;
    -webkit-animation-iteration-count: infinite;
    animation: highlightPulse 2s;
    animation-iteration-count: infinite;
    padding: 10px;
    border: 1px solid #BCD2E6; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

.quizPasswordFeedback .feedbackPanel  {
    list-style: none;
}

.quizPasswordInstruction {
    display: block;
    font-weight: bold;
    padding-bottom: 10px;
}

.presentationViewActionContainer {
    padding: 0 25px;
    text-align: center;
}

.presentation_toolbar .tool_cell {
    display: inline-block;
    width: 60px;
    text-align: center;
    vertical-align: top;
}

.presentation_toolbar .separator {
    background:url(../images/dots.gif) no-repeat;
    width: 1px;
    height: 41px;
    display: inline-block;
}

.viewPresentationLink {
    font-size: 2em;
    white-space: nowrap;
}

.presentation_rename_form label {
    display: block;
    padding: 5px;
}

.presentationDescription, .quizScoreMessage {
    padding: 10px;
    font-family: Arial,serif;
    font-size: 0.938em;
    max-width: 800px;
    line-height: 1.3;
}

/************************************/
/** Metacat Assessment Item Styles **/
/************************************/
.quesnum { font-weight: bold; color: #0950B5; /*color:#A90A08;*/ display: inline-block; padding-right: 15px;}
.modTextContainer { max-width: 1000px; }
.modTextContainer div:last-of-type {padding-bottom: 1em;}
.mod_text:empty {display: none;}
.sectionTextContainer { max-width: 1000px; }
.sectionTextContainer div:last-of-type {padding-bottom: 1em;}
.section_text:empty{display: none;}
.itemTextContainer { max-width: 1000px; }
.itemText { border: 2px solid #3366cc;  padding: 3px 5px; display: inline-block; box-sizing:border-box; }
.itemText.editable-max-width {width: 100%;} /*Used to expand textarea to 100% when all fields are shown when editing item*/
.foils {  max-width: 850px; padding: 15px 15px 0 15px; }
.foils .row_spacing { height: 5px; }
.foil textarea { width: 95%; }
.foil_text { padding: 0 3px 0 3px; width: 100%; vertical-align: inherit !important;}
.testQuestionPreviewLink {font-size: smaller;}
.highlight_correct_answer_text {font-size: x-small; opacity: 0.65;}

/*Kendo ui editor sizing for mod, section, item, and foils text.*/
/*Use height 100% for the editable editor if using a resizable editor.*/
.modTextContainer table.k-editor,
    .sectionTextContainer table.k-editor,
    .itemTextContainer table.k-editor { height: 150px;}
.modTextContainer .k-editor .k-editable-area,
    .sectionTextContainer .k-editor .k-editable-area,
    .itemTextContainer .k-editor .k-editable-area {/*height: 130px;*/height: 100%;}
.foil_text table.k-editor { height: 100px;}
.foil_text .k-editor .k-editable-area {/*height: 80px;*/height: 100%;}

/*Todo This is a hack that will prevent using p and br tags inside a MC foil.*/
/*.foil p { display: inline; }
.foil br { display: none; }*/

/*Keep from underlining in IE and Opera.*/
.foil a {text-decoration:none;}
.modTextContainer a { text-decoration:none; }
.sectionTextContainer a { text-decoration:none; }
.itemTextContainer a { text-decoration:none; }

.correct_answer { color: green; font-weight: bold; }
.success { color: #0069c7; font-weight: bold; }
.fail, .incorrect_answer { color: red; font-style: italic; font-weight: bold; }

.qfib_separator_left { border-left:1px solid #CCCCCC; padding-left: 10px;}
.qfib_separator_right { border-right:1px solid #CCCCCC; padding-right: 10px;}
.qfib_preceding_field { width: 125px; }
.qfib_range_field { width: 75px; }

.background_image_controls { font-weight: bold; color: #777777; }
.background_image_controls a { text-decoration:none; }

.region_border {
    position: absolute;
    border:1px dotted blue;
    z-index: 98;
    margin: -1px;
    text-align: right;
}

.region_label {
    position: absolute;
    color: #ffffff;
    background-color: royalblue;
    border:1px solid #0950B5;
    font-size: 0.375em;
    border-radius: 3px;
    display: inline-block;
    padding-left: 2px;
    padding-right: 2px;
    vertical-align: top;
    margin-top: -13px;
}

.crossContainer {position:absolute;visibility:hidden;z-index:1;}
.positionedCrossContainer {position:absolute;visibility:visible;z-index:10;}
.positionedCrossContainer img { display: block; }

.token_image_controls { font-weight: bold; color: #777777; }
.token_image_controls a { text-decoration:none; }
.tokens {
    width: 125px;
    border-radius: 5px;
    border:1px solid #BAD9FF;
    padding-top: 10px;
    padding-bottom: 10px;
    border-spacing: 5px;
}

/* Style inline-block will shrink fit the div to the image otherwise you will see the
 * token shift effect.
 * Style align top is also need to keep the token shift effect from happening on drop.
 */
.token {
    z-index: 99;
    display: inline-block;
    position: relative;
    vertical-align: top;
}

/*Add display block so the surrounding div can determine the images height and shrink fit to it.
Otherwise there will be added space below the image and you will get a token shift effect on drop.*/
.token img {
    display: block;
}

.token.ui-draggable {
    cursor: move;
}

.token_label {
    position: absolute;
    font-size: 0.375em;
    border-radius: 3px;
    font-weight: bold;
    color: #ffffff;
    margin: -2px;
    background-color: royalblue;
    border:1px solid #0950B5;
    line-height: 0.95;
}

.token_correct {

}

.token_correct .token_label {
    background-color: green;
    border:1px solid darkgreen;
}

.token_incorrect {
    border:1px solid red;
    margin: -1px;
}

.token_incorrect .token_label  {
    background-color: red;
    border:1px solid darkred;
}

.token_trash_can {
    width: 125px; height: 125px;
    border:3px dotted #777777;
    border-radius: 5px;
    color: #777777;
    text-align: center;
}

/**
 *<div>
 *    <label class="align_label"><input type="checkbox" class="align_input"/> Label text</label>
 *</div>
 * Css to align a label to its checkbox.
 */
.align_label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
    padding-bottom: 5px;
}
.align_input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: middle;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

/**Property Type Highlighting**/
.discussion {
    background-color: #fff4c4;
}

.system {
    background-color: #ffc8c8;
}

.workflow_milestone,
.milestone_status,
.milestone_reviewer_status,
.milestone_owner_status,
.milestone_approver_status {
    background-color: #d6ffd4;
}

.PropertyTypeLegendPanel {
    padding-top: 15px;
}

.PropertyTypeLegendPanel div {
    padding: 2px;
}

/**********************/
/*Search Result Styles*/
/**********************/
/*Search result container*/
.slide_view_container {
    padding-top: 1px;
    padding-left: 1px;
    padding-bottom: 1px;
}

.slide_view_container .navigator_top {
    /*text-align: center;*/

    /*Float to the right*/
    position: absolute;
    float: right;
    right: 0px;
    margin-right: 30px;
    margin-left: 5px;
    margin-top: 5px;
    z-index: 1;
    /*background-color: #BAD9FF;
    border-radius: 5px;*/
    /*background-color: rgba(246, 246, 246, 0.2);*/
}

/*Since we are now floating this on the right need to have a fixed width as the number
navigated increases digits to remains centered on actions panel*/
.slide_view_container .navigator_top .nav_links_center {
    width: 85px;
}

.slide_view_container .nav_links_left {
    width: 60px;
}

.slide_view_container .nav_links_right {
    width: 60px;
}

.sr_container {
    width: 100%;
}

/*Filter container in search result*/
.sr_filter_container {
    vertical-align: top;
    padding-right: 3px;
    overflow: hidden;
}

/*Tabs container is search result*/
.sr_tabs_container {
    vertical-align: top;
    width: 100%;
}

/*Align toolbar to the right*/
.sr_tabs_container .tabs_toolbar_container {
    text-align: right;
    width: 100%;
}

.SearchResultFilterPanel {
    white-space: nowrap;
    width: 175px;
}

.SearchResultHelpFilterPanel {
    width: auto;
}

.SearchResultFilterPanel .choices_container div {
   padding: 2px;
   overflow: hidden;
}

.SearchResultFilterPanel .content {
    padding-right: 20px;
}

.SearchResultFilterPanel .search_value_tree {
    overflow-x: hidden;
}

.SearchResultFilterPanel .ui-resizable-e {
    color: #fff;
    margin-right: 2px;
}

.no-touch .SearchResultFilterPanel .ui-resizable-e {
    width: 5px;
}

.no-touch .SearchResultFilterPanel .ui-resizable-e:hover {
    border-right: solid #ffda8b 3px;
}

/**
 * Making the handle larger for touch screens.  The larger handle
 * then covers the toggle button so need to clear it by moving down
 * from the top.
 */
.touch .SearchResultFilterPanel .ui-resizable-e {
    width: 20px;
    top: 16px;
}

/*For touch screens active acts as hover*/
.touch .SearchResultFilterPanel .ui-resizable-e:active  {
    border-right: solid #ffda8b 3px;
    top: 0;
}

.SearchResultFilterPanel .ui-resizable-s  {
    display: none !important;
}

.SearchResultFilterPanel .ui-resizable-se  {
    display: none !important;
}

/**START Makes the filter panel widen to show all text**/
/*.SearchResultFilterPanel {
    overflow: hidden;
    max-width: 175px;
    white-space: nowrap;
}

.SearchResultFilterPanel:hover {
    max-width:100%;
}

.SearchResultFilterPanel .content {
    padding-right: 20px;
}*/
/*END*/

.SearchResultFilterPanel .heading_label {
    color: #999999;
    font-size: 1.125em;
    padding-bottom: 2px;
}

.SearchResultFilterPanel .collection_label {
    font-weight: bold;
    /*color: #000000;*/
    padding-bottom: 6px;
    overflow: hidden;
}

.SearchResultFilterPanel hr {
    background-color: transparent;
    border-top: 1px solid #e7e7e7;
    border-width: 1px 0 0;
    display: block;
    height: 1px;
    line-height: 19px;
}

.SearchResultFilterPanel input[type=checkbox] {
    margin-left: 0;
}

.SearchResultFilterPanel .uncheckable_content {
    font-weight: bold;
}

.SearchResultFilterToolbarPanel {
    display: inline-block;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
}

.SearchResultFilterToolbarPanel .filterMenu {
    display: inline-block;
    width: 100px;
    font-size: 0.8em;
}

.SearchResultFilterToolbarPanel .filterValue {
    display: inline-block;
    border: solid 1px #2d83ed;

    background-color: #2d83ed;
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #67c1f5 0%, #2d83ed 100%) repeat scroll 0 0;
    border-radius: 2px;
    color: #ffffff;
    margin: 0 4px 0 0;
    padding: 0 9px 0 9px;
    white-space: nowrap;
    font-size: 0.95em;
}

.SearchResultFilterToolbarPanel .filterValueLabel {

}

.SearchResultFilterToolbarPanel .removeFilterValue {
    display: inline-block;
    background: rgba(0, 0, 0, 0) url("../images/delete_search_term.png") no-repeat scroll ;
    cursor: pointer;

    margin-bottom: -1px;
    margin-left: 8px;
    width: 12px;
    height: 12px;
}

.filter-clear-all-container a {
    text-decoration: none;
    color: #008ac6;
}

.filter-clear-all-container a:hover {
    color: #004485;
    text-decoration: underline;
}

.TextSizePanel span {
    font-size: 0.8em;
}

.TextSizePanel .button {
    padding:0 0.2em;
    line-height: 0.9em;
    font-weight: bold;
}

.item_view_table {
    width: 100%;
}

/* Size editing components when editing an item. */
.item_view_table input[type=text]:not(.k-input),
.item_view_table select,
.item_view_table textarea,
.item_view_table .select2-container,
.item_view_table .k-combobox,
.item_view_table .item_details_container .k-datepicker
{
    box-sizing:border-box;
    width: 100%;
}

/* Create separation between multivalue components */
.property_value li
{
    padding-bottom: 1px;
}

/*Needed for long urls or text with no spaces so it wraps within its container.
 This was a problem in the slide view of a search result.*/
.item_details_panel .property_value {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 300px;
}

.property_value ul ol,
.property_value ul ul
{
    padding-left: 20px;
}

.item_details_container {
    vertical-align: top;
    width: 20%;
    max-width: 20%;
    min-width: 200px;
    padding-top: 5px;
    padding-left: 5px;
}

.item_details_container .item_details_panel {
    clear: both;
}

.item_components_panel {
    padding-top: 1em;
}

.item_comments_panel {
    padding-top: 1em;
}

.commentTitleTable {
    background-color:#EEEEEE;
    width:100%;
}

.item_actions_spacer {
    height: 2.2em;
}

.itemTitleLabel {
    margin-bottom: 5px;
}

/**
This was needed for test questions to indent the item slightly.
 */
.item_panel {
    padding-left: 5px;
}

.item_panel_container {
    width: 100%;
    min-width: 200px;
    vertical-align: top;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 230px;
}

.item_actions_column{
    /*To float on the right side of page*/
    position: absolute;
    float: right;
    right: 30px;
    max-width: 200px;
    min-width: 200px;
    vertical-align: top;
}

.item_workflow_container {
    padding-bottom: 5px;
    padding-top: 5px;
}

.item_actions_container {
    padding-bottom: 5px;
}

.item_property_container {
    /*padding-bottom: 5px;*/
}

.item_property_container td {
    padding-left: 3px;
    padding-right: 3px;
}

.item_property_panel {
    background-color: #F2F5F7;
    border:1px solid #BAD9FF;
}

.item_actions_panel {
    background-color: #F2F5F7;
}

.propertyViewer table {
    border-spacing: 5px;
}

.PresentationViewContentsPage .propertyViewer table {
    border-spacing: 0;
}

.PresentationViewContentsPage .propertyViewer .nametext,
.PresentationViewContentsPage .propertyViewer .property_value
{
    /*font-size: 0.85em;
    min-font-size: 0.625rem;*/
    padding-right: 5px;
    padding-top: 1px;
    padding-bottom: 1px;
}

/******************************/
/** Metacat Heap Book styles **/
/******************************/
.heapbook_navpanel { background-color: #F2F5F7; width: 100%; font-weight: bold;}
.heapbook_navpanel a:hover {  }

.heapbook_propertyvalue { padding-left:20px; }
.heapbook_propertyvalue .property_name {font-family: arial,sans-serif; font-size: 1.2em; font-weight:bold;
    white-space:nowrap; letter-spacing: 0; color:#3366CC; }
.book_title_image_alt {font-weight:bold; font-size:1.4em;}

/***************************/
/** Metacat Report Styles **/
/***************************/
h1.report { font-family: sans-serif; font-size: 1.125em; background-color: #2E6397; padding: 3px; margin: 0px }
h2.report { color: #000000; font-size: 0.875em; background-color: #F0F0F0; padding: 1px; margin: 0px }
h3.report { color: #000000; font-size: 0.750em; background-color: #C0D4E0; padding: 1px; margin: 0px; border-radius: 5px; }
h4.report { color: #000000; font-size: 0.750em; background-color: #FFFFFF; padding: 1px; margin: 0px }

.reports .foil { padding: 0 0 10px 50px; }
tr.report_heading { background-color: #CCCCCC; }
tr.report_totals { background-color: #EEEEEE; }
tr.report_grandtotals { background-color: #CCCCCC; }

tr.totalRow { background-color: #95EE6B; }

/*Collection Reports*/
.DefaultCollectionReportsPage .SearchResultFilterPanel,
.CollectionCreateReportAndChartPage .SearchResultFilterPanel {
    border-right: 1px solid #e7e7e7;
    padding-right: 2px;
}

.toolbar_simple {
    background: linear-gradient(to bottom, #f6f6f6, #dadada);
    border: 1px solid #CCCCCC;
    border-top: none;
}

/** Bread crumb classes **/
.bread_crumb_bar {
    padding-top: 5px;
}

.wicketExtensionsBreadCrumbBar {
    background:url("../images/heading_background.png") repeat-x;
    border-radius: 3px;
    padding:2px 0 2px 5px;
}

.wicketExtensionsBreadCrumbBarCrumb {
    display: inline-block;
    vertical-align: middle;
}

.wicketExtensionsBreadCrumbBarCrumb span {
    font-size: 1.2em;
    color:#FFFFFF;
    font-weight:bold;
}

.wicketExtensionsBreadCrumbBarCrumb a, .wicketExtensionsBreadCrumbBarCrumb a:hover {
    color:#FFC466;
}

/*Move the debug link so it does not cover buttons*/
#wicketDebugLink {
    bottom: -10px !important;
    opacity: 0.5 !important;
}

/****************/
/*Account Styles*/
/****************/

.edit_account_form input[type="text"], .edit_account_form input[type="password"],
.edit_account_form textarea, .edit_account_form .password select
{
    box-sizing: border-box;
    width: 350px;
}

.account_selected_label {
    font-size: 1.2em;font-weight: bold;padding-left: 5px;
}

/**
 * Used by wicket data tables in the navigation toolbar.
 */
.navigator {
    text-align: right;
}

.navigatorLabel {
    float: left;
}

/******************/
/** Login Styles **/
/******************/
.LoginPage input[type=text],
.LoginPage input[type=password] {
    text-align: center;
    background-color: #ECF0F1;
    border: 1px solid #ECF0F1; /* Default border */
    padding: 10px 0;
    font-size: 16px;
    width: 250px;
    border-radius: 4px; /* Rounded corners */
}

.LoginPage input[type=submit] {
    border: 2px solid transparent;
    font-size: 16px;
    font-weight: 200;
    width: 252px;
    transition: border .5s;
    padding: 10px 0;
}

.LoginPage input[type=text]:focus,
.LoginPage input[type=password]:focus {
    border-color: #66afe9; /* Focus border color */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 5px rgba(102, 175, 233, 0.6); /* Focus shadow */
}

.LoginPage .body_wrapper {
    /*Uncommnet if a login background is wanted.*/
    /*top: 0;
    left: 0;
    position: absolute;
    background: #d2e8ff url(../images/backgound_fadeout_050.png) no-repeat center bottom;
    background-size: 100%;*/

    min-height: 100%;
    min-width: 100%;
    width: 100%;
    height: 100%;
}

.LoginPage .site_header {
    background: url(../images/logos/archive/mc_logo_tp.png) no-repeat 50% 15px;
    height:50px;
}

.LoginPage .site_content {
    width:100%;
    margin: 0;
}

.login_panel_container {

}

.login_panel {
    padding-top: 20px;
    text-align: center;
}

.sign_in_panel {
    text-align: center;
    margin:0 auto;
    max-width: 31em;
    box-shadow: 0 0 25px #3678cd;
    border: 1px solid #79bbff;
    border-radius: 5px;
    background: #ffffff;
}

.SignInPanel-footer-label {
    font-size: 0.8em;
    width: 325px;
    margin: 0 auto;
}

.login_form {
    display: inline-block;
    padding-bottom: 3em;
}
.login_form_heading {
    /*font-weight:bold;
    background-color:#BAD9FF;
    color:#274E9E;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 5px 5px 3px;
    font-size: 1.1em;
    white-space:nowrap;*/

}
.login_form_content {
    /*display: inline-block;
    border:1px solid #BAD9FF;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;*/
    padding: 5px;
    border:none;
}

.login_form_content input {
    margin: 2px;
}

.login_forgot_password_container {
    /*width: 100%;*/ /*Will force the button container to the line below.*/
    font-size: 0.8em;
    text-align: center;
    padding-left: 3px;
    padding-top:0.5em;
}

.login_submit_button_container {
    font-size: 1.2em;
    padding-right: 3px;
}

.login_feedback_container {
    height: 3em;
}

.login_feedback_container .feedbackPanel {
    list-style: none; /*Keeps the bullet from showing up.*/
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    margin: 0;
}

.powered_by_label { text-align: center; padding-top: 25px;}
.powered_by_label a { display:inline; font-weight:bold; text-decoration:none; font-size:0.9em; text-align: center; }

/**
 * ListPanel.html styles
 * SlidePanel.html styles
 */

.ajax_loading_bar {
    position:fixed;
    _position:absolute;
    border: 1px solid #BAD9FF;
    box-shadow: 0 0 7px #0066FF;
    left: 10px;
    bottom: 10px;
    z-index: 10;
    padding: 5px;
    line-height: normal;
    width: 10em;
    background-color: white;
    text-align: center;
    color: #0950B5;
    font-weight: bold;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

.ajax_error_bar {
    position:fixed;
    _position:absolute;
    border: 1px solid red;
    box-shadow: 0 0 7px red;
    left: 10px;
    bottom: 10px;
    z-index: 10;
    padding: 5px;
    line-height: normal;
    width: 10em;
    background-color: white;
    text-align: center;
    color: red;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

.fixed_bottom_right {
    position:fixed;
    _position:absolute;
    right: 0px;
    bottom: 0px;
    z-index: 10;    
    line-height: normal;
}

/**
* DownloadFilePanel.html
*/
.download_file_panel {
    padding: 15px 15px 15px 15px;
}

/**
 * TreePage.html styles
 */

.tree_content {
    width: 20em;
    overflow: auto;
}

.tree_content_border {
    border:1px solid #BAD9FF;
}

.heading_content_info {
    border:1px solid #BAD9FF;
    border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
}

/**
 * StyledPagingNavigator.html styles
 */
.nav_links_left {
    width: 100px;
    white-space: nowrap;
    text-align: right;
}

.nav_links_center {
    text-align: center;
    white-space: nowrap;
}

.nav_links_right {
    width: 100px;
    white-space: nowrap;
    text-align: left;
}

.nav_headline {
    color:#ff3939;
    font-weight: bold;
    font-size: 1.3em;
}

.nav_headline_small {
    color: #ff3939;
    font-weight: bold;
}

.nav_page_link {
    color:#0950B5;
    font-weight: bold;
}

.img_link {
    border: none;
}

/**
 * WarningPanel.html styles
 */
.warning_panel {
    width: 600px;
    padding: 10px 10px 10px 10px;
}

.warning_goback_link {    
    font-weight: bold;
}

/**
 * ScorePanel.html styles
 */
.test_score {
    font-size: 1.5em;
    font-weight: bold;
    white-space:nowrap;
}

.test_score_small {
    font-size: 1.2em;
    font-weight: bold;
    white-space:nowrap;
}

.cut_score_message {
    font-size: 1.15em;
}

.score_short_message {

}

.test_score_passed {
    color: green;
}

.test_score_failed {
    color:red;
}


.quizResultsTable table.data_table {
    width: auto;
}

.quizResultsTable .outerViewContainer {
    display: inline-block;
    padding: 10px 10px 10px 10px;
}

/**
 * AccountManagementPanel.html styles
 */
.toolbar { border-collapse: collapse; white-space: nowrap; }
.toolbar a { text-decoration: none; }
.toolbar span { text-decoration: none; }
.toolbar a:hover span { text-decoration: underline;}
.toolbar a:hover { text-decoration: none;}
.toolbar td { text-align: center; padding-left:2px; padding-right:2px; }
.toolbar_top { background:url("../images/nav_toolbar_top.gif") repeat; }
.toolbar_bottom { background:url("../images/nav_toolbar_bottom.gif") repeat; }
.toolbar .horizontal_spacer { display: inline-block; width: 16px;}

.taskbar { border-collapse: collapse; white-space: nowrap; }
.taskbar a { text-decoration: none; }
.taskbar span { text-decoration: none; }
.taskbar a:hover span { text-decoration: underline;}
.taskbar a:hover { text-decoration: none;}
.taskbar td { padding-left:2px; padding-right:2px; }

.account_actions_column { width: 12em;}

.AccountsPrintablePage .account_actions_column {width: 0;}

/**
 * ItemFeedbackPanel.html styles
 */
.score_comment {
    font-style: italic;
}

/**
 * GradingResponsePanel.html styles
 */
.user_header {
    background:#C0D4E0;   
}

.conresponse {
    background: #EEEEEE;
    border-style: solid;
    border-color: #cccccc;
    border-width: 1px;
}

.comment_field {
    width: 100%;
    height: 50px;
}

/**
 * PropertyValueSelectionPanel.html styles
 */
.search_value_tree table.wicket-tree-content.selected  {
    background-color: #FFFFFF;
}

.search_result_norecords_label {
    font-weight:bold;
}

/*CollectionSearchPanel.html styles*/
.basic_search_property_panel {
    float: left;
    padding: 5px 10px 0px 10px;
    width: 275px;
    border: 1px solid #EEEEEE;
}

/* Editing */
.editable_value {
    display:inline-block;
    padding: 0 3px 0 3px;
    margin: 1px 0 1px 0;
    border:1px dotted #FFC466;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

.editable_value:hover {
    border:1px solid #FFC466;
    padding: 0 3px 0 3px;
    margin: 1px 0 1px 0;
    background-color: #FFFFD7;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
/*.editable_value:hover { padding-top: 1px; padding-bottom: 1px; background-color: #FFFFD7; }*/
.add_new_value { color: #0950B5; font-size: 0.8em; }
.add_new_value:hover {  }
.item_panel .add_new_value_field { width: 300px; }

.wysiwyg_textarea {
    width: 600px;
    height: 315px;
}

.horizontal-layout-choice {
    float: left;
}

.gallery_thumbnail_panel {
    float: left;
    padding: 3px;
    width: 150px;
    height: 250px;
    overflow: hidden;
    border: 1px solid #EEEEEE;
    text-align: center;
}

/*Sizing icons that show a system file icon when there is no thumbnail of the file*/
.gallery_thumbnail_panel img.system_icon {
    width: 64px;
}

.gallery_thumbnail_panel .propertyViewer {
    text-align: left;
    font-size: 0.9em;
}

.collection_gallery_icon_panel {
    float: left;
    padding: 5px 10px 5px 10px;
    width: 600px;
    height: 125px;
    overflow: hidden;
    border: 1px solid #EEEEEE;
}

.list_thumbnail_panel img.system_icon {
    width: 100px;
}

.list_thumbnail_panel .propertyViewer {
    font-size: 0.9em;
}

/* Align property names to the right of the cell*/
.list_thumbnail_panel .propertyViewer table td:first-child {
    /*text-align: right;*/
}

.list_thumbnail_panel .itemCheckBoxTableCell {
    white-space:nowrap;
    vertical-align:center;
    padding-right: 8px;
}

.itemsPerPage {
    display: inline-block;
    padding: 3px;
}

/******************************/
/** Overridden wicket styles **/
/******************************/
/* Styles for auto complete text field */
div.wicket-aa {
    background-color: white;
    border: 1px solid #cccccc;
    padding: 2px;
    margin: 1px 0 0 0;
    text-align:left;
}
div.wicket-aa ul { list-style:none; padding: 2px; margin:0; }
div.wicket-aa ul li.selected { background-color: #E1EDFF; padding: 2px; margin:0; }

/* Styles for a wicket tree */
.mc_tree  {background-color: #fafafa; overflow-y: auto;}
.mc_tree table.wicket-tree-content table.icon-panel a  { color: #004485; }
.mc_tree table.wicket-tree-content table.icon-panel a:hover { color:#008ac6; }
.mc_tree table.wicket-tree-content.selected  { background-color: #E1EDFF; }

.search_value_tree table.wicket-tree-content table.icon-panel a { color: #008ac6; }
.search_value_tree table.wicket-tree-content table.icon-panel a:hover { color: #004485; }

.property_tree_border .ui-corner-bottom {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

/***************************************************/
/* Begin bi-directionality settings (do not change) */
/***************************************************/
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

/****************/
/** Tab Styles **/
/****************/
div.tab-row {
    float:left;
    font-size:0.9em;
    line-height:normal;
}

div.tab-row ul {
    margin: 0 0 0 -1px;
    padding: 0 10px 0 0;
    list-style:none;
}

div.tab-row li {
    display:inline;
    margin:0;
    padding:0;
}

div.tab-row a {
    float:left;
    margin:0;
    padding:0 1px 0 1px;
    text-decoration:none;
}

div.tab-row a span {
    display:block;
    padding:4px 14px 4px 10px;
    color:#777;

    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-left: 1px solid #bec3c8;
    border-right: 1px solid #bec3c8;
    border-top: 1px solid #bec3c8;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e9eef3+0,bec3c8+20,bec3c8+30,e9eef3+100 */
    background: #e9eef3; /* Old browsers */
    background: -moz-linear-gradient(top,  #e9eef3 0%, #bec3c8 20%, #bec3c8 30%, #e9eef3 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #e9eef3 0%,#bec3c8 20%,#bec3c8 30%,#e9eef3 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #e9eef3 0%,#bec3c8 20%,#bec3c8 30%,#e9eef3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9eef3', endColorstr='#e9eef3',GradientType=0 ); /* IE6-9 */
}

div.tab-row a:hover span,
div.tab-row .selected a span {
    color: black;
    font-weight: normal;
    transition: all 0.25s;

    border-left: 1px solid #ffc466;
    border-right: 1px solid #ffc466;
    border-top: 1px solid #ffc466;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffeac8+0,ffc466+20,ffc466+30,ffeac8+100 */
    background: #ffeac8; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffeac8 0%, #ffc466 20%, #ffc466 30%, #ffeac8 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffeac8 0%,#ffc466 20%,#ffc466 30%,#ffeac8 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffeac8 0%,#ffc466 20%,#ffc466 30%,#ffeac8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffeac8', endColorstr='#ffeac8',GradientType=0 ); /* IE6-9 */
}

/* Surrounds components in the search result tabbed panel for Table, List and Gallery views.*/
.tab-panel > .outerViewContainer:first-child {
    padding-left:5px; padding-top:5px; padding-right: 5px;
}

/** Class defined within wicket tab component. */
.tab-panel {
    width: 100%;
    min-width: 400px;
    clear: both;
    border: 1px solid #FFC466;
    border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-right-radius: 5px;
}

/*Used in CollapsibleBorder component*/
.collapsible_border_toggle_container {
    display: table;
    width: 100%;
}

.collapsible_border_toggle {
    display: block;
    width: 100%;
    text-decoration:none;
    vertical-align: middle;
    outline: 0;
    white-space: nowrap;

    padding-top: 3px;
    padding-bottom: 3px;

    /*color:#274E9E;*/
    background:#BAD9FF;
    border-top-left-radius: 5px; border-top-right-radius: 5px;
}

.collapsible_border.collapsed .collapsible_border_toggle {
    border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
}

/*This is used in slide view for workflow, and property panels on the left.*/
a.collapsible_border_toggle {
    background:#BAD9FF;
}

.collapsible_border_label {
    display: table-cell;
    width: 100%;
    max-width: 175px;
    text-overflow: ellipsis;
    overflow: hidden;

    padding-left: 5px;
    font-weight:bold;
    font-size: 1.1em;
}

.collapsible_border_indicator {
    display: table-cell;
    bottom: -3px;
    padding-right: 10px;
    font-size: 0.8em;

    /*If using &#10092; and &#10093;*/
    /*transform: rotate(90deg);
    position: relative;
    left: -10px;*/
}

.collapsible_border_content {
    border: 1px solid #dadada;
    /*border:1px solid #BAD9FF;*/
    border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
    background-color: #fafafa;
}

.collapsible_border_content .collapsible_border_content {
    border: none;
}

.collapsible_border.collapsed.hoverable .collapsible_border_content {
    transition: max-height 1s, border-color 0.5s ease-out;
    max-height: 0;
    overflow: hidden;
    border: 1px solid transparent;
    margin-bottom: -1px;
}

.collapsible_border.collapsed.hoverable:hover .collapsible_border_content {
    max-height: 1000px;
    border:1px solid #BAD9FF;
}

.collapsible_border.collapsed.hoverable:hover .collapsible_border_toggle {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

/**
 * Styling for rounded corners
 * http://www.html.it/articoli/nifty/index.html
 *
 * USAGE:
 * <div id="container">
 *      <b class="rtop">
 *          <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
 *      </b>
 *      <!--content goes here -->
 *      <b class="rbottom">
 *          <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
 *      </b>
 * </div>
 */

.inputFormDialog .feedbackPanelERROR{
    font-size: 0.95em;
}

.rtop,.artop{display:block}
.rtop *,.artop *{display:block;height:1px;overflow:hidden;font-size:1px}
.artop *{border-style: solid;border-width:0 1px}
.r1,.rl1,.re1,.rel1{margin-left:5px}
.r1,.rr1,.re1,.rer1{margin-right:5px}
.r2,.rl2,.re2,.rel2,.ra1,.ral1{margin-left:3px}
.r2,.rr2,.re2,.rer2,.ra1,.rar1{margin-right:3px}
.r3,.rl3,.re3,.rel3,.ra2,.ral2,.rs1,.rsl1,.res1,.resl1{margin-left:2px}
.r3,.rr3,.re3,.rer3,.ra2,.rar2,.rs1,.rsr1,.res1,.resr1{margin-right:2px}
.r4,.rl4,.rs2,.rsl2,.re4,.rel4,.ra3,.ral3,.ras1,.rasl1,.res2,.resl2{margin-left:1px}
.r4,.rr4,.rs2,.rsr2,.re4,.rer4,.ra3,.rar3,.ras1,.rasr1,.res2,.resr2{margin-right:1px}
.rx1,.rxl1{border-left-width:5px}
.rx1,.rxr1{border-right-width:5px}
.rx2,.rxl2{border-left-width:3px}
.rx2,.rxr2{border-right-width:3px}
.re2,.rel2,.ra1,.ral1,.rx3,.rxl3,.rxs1,.rxsl1{border-left-width:2px}
.re2,.rer2,.ra1,.rar1,.rx3,.rxr3,.rxs1,.rxsr1{border-right-width:2px}
.rxl1,.rxl2,.rxl3,.rxl4,.rxsl1,.rxsl2,.ral1,.ral2,.ral3,.ral4,.rasl1,.rasl2{border-right-width:0}
.rxr1,.rxr2,.rxr3,.rxr4,.rxsr1,.rxsr2,.rar1,.rar2,.rar3,.rar4,.rasr1,.rasr2{border-left-width:0}
.r4,.rl4,.rr4,.re4,.rel4,.rer4,.ra4,.rar4,.ral4,.rx4,.rxl4,.rxr4{height:2px}
.rer1,.rel1,.re1,.res1,.resl1,.resr1{border-width:1px 0 0;height:0px !important;height /**/:1px}

/**
*  Styling for wicket wizard.
*/
.wicketExtensionsWizardInnerTable {
	width: 100%;
	border: thin solid #BAD9FF;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

.wicketExtensionsWizardOuterTable {
    width: 100%;
}

.wicketExtensionsWizardHeaderRow {
	height: 20px;
}
.wicketExtensionsWizardHeader {
	border: thin solid #BAD9FF;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.wicketExtensionsWizardView {
	border: thin solid #BAD9FF;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.wicketExtensionsWizardViewInner {
	margin: 10px;
}
.wicketExtensionsWizardViewRow {
	height: 140px;
}
.wicketExtensionsWizardButtonBar {
	text-align: right;
}
.wicketExtensionsWizardButtonBar input {
	width: 7em;
}
.wicketExtensionsWizardHeaderTitle {
	margin: 10px 5px 10px 15px;
	font-weight: bold;
}
.wicketExtensionsWizardHeaderSummary {
	margin: 10px 5px 5px 5px;
	font-style: italic;
}

.wicketExtensionsWizardFeedbackRow .feedbackPanel {
    display: inline-block;
    margin: 5px 0 0 0;
    position: absolute;
}

.CollectionWizardPage .list_title {
    padding-top: 1em;
    font-weight: bold;
}

.CollectionWizardPage .property_actions_container {
    white-space: nowrap;
}

.CollectionWizardPage .collection_property_tree {
    width: 20em;
    overflow: auto;
}

.CollectionWizardPage .authorityTreeContainer {
    width: 35%;
}

.CollectionWizardPage .authorityTree {
    min-width: 200px;
    width: 100%;
}

.CollectionWizardPage .authorityTree .linkedAuthorityLabel {
    padding: 5px;
}

.CollectionWizardPage .editPropertyForm .k-combobox,
.CollectionWizardPage .editPropertyForm input[type=text],
.CollectionWizardPage .editPropertyForm select,
.CollectionWizardPage .editPropertyForm textarea {
    width: 100%;
    box-sizing: border-box;
}

.CollectionWizardPage .newAuthorityValueForm input[type=text] {
    width: 275px;
}

.CollectionWizardPage .identifiableId {
    font-size: 0.825em;
    color: #999999;
    font-weight: normal;
}

.CollectionWizardPage select {
    width: 100%;
}

.ImportAuthorityWizardPage body {
    min-width: 0;
}

.RatingCommentContainer {
    padding-top: 20px;
    width: 98%;
}

.RatingCommentContainer .roundLabel, .HofsteeQuestionPanel .roundLabel {
    color: #4271B5;
    font-weight: bold;
}

.PresentationViewContentsPage .RatingCommentContainer .round1 {

}

.PresentationViewContentsPage .RatingCommentContainer .round2 {

}

.PresentationViewContentsPage .tab-panel .slide-view {
    padding-top: 5px;
}

.SearchResultHelpPage .search_value_tree table.wicket-tree-content table.icon-panel a {
    color: #333; text-decoration: none;}
.SearchResultHelpPage .search_value_tree table.wicket-tree-content table.icon-panel a:hover {
    color: #333; text-decoration: underline; }
.SearchResultHelpPage table.wicket-tree-content.selected .content {
    background-color: #E1EDFF;}

/** Style the title property value.  The title will be the first property. */
.SearchResultHelpPage .property_value.first_property_value {
    font-weight: bold;
}

.RatingCommentPanel table {
    width: 100%;
    border-radius: 5px;
    border: thin solid #BAD9FF;
    padding: 10px;
}

.RatingCommentPanel textarea {
    height: 3.5em;
}

.RatingCommentPanel input[type=text] {
    width: 3.5em;
}

.RatingCommentPanel .feedbackPanel {
    display: inline-block;
    white-space: nowrap;
    margin: 0;
    list-style-type: none;
}

.ReportFormPanel form {
    max-width: 2000px;
}

.ReportFormPanel .settings-label {
    font-weight: bold;
}

.ReportFormPanel .settings-values {
    font-style: italic;
}

.hofsteeForm {
    /*border-radius: 5px;
    border: thin solid #BAD9FF;*/
    padding: 10px;
}

.hofsteeForm input[type=text] {
    width: 3em;
}

.jsonObjectTableContainer {
    max-width: 185px;
}

.FormSubmitPage .submissionFormContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
}

.FormSubmitPage .innerSubmissionFormContainer {
    min-width: 250px;
    width: 500px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    text-align: left;
}

.FormSubmitPage .itemSubmitFormSuccessContainer {
    text-align: center;
    font-size: 1.25em;
}

.FormSubmitPage .itemSubmitFormSuccessLabel {
    font-weight: bold;
}

.FormSubmitPage .MetacatHeadingPanel .headingToolbarTableCell {
    text-align: left !important;
}

.FormSubmitPage .itemEditSaveCancelButtonContainer {
    font-size: 1.5em;
}

.FormSubmitPage .property_value input[type=text]
{
    width: 100%;
}

/*AddEditDataObjectPanel save cancel buttons*/
.itemEditSaveCancelButtonContainer {
    text-align: center;
}

/* Corner radius css3 */
.ui-corner-tl { border-top-left-radius: 5px;}
.ui-corner-tr { border-top-right-radius: 5px;}
.ui-corner-bl { border-bottom-left-radius: 5px;}
.ui-corner-br { border-bottom-right-radius: 5px;}
.ui-corner-top { border-top-left-radius: 5px; border-top-right-radius: 5px;}
.ui-corner-bottom { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.ui-corner-right { border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
.ui-corner-left { border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.ui-corner-all { border-radius: 5px;}

/* Use <figure class="circle"></figure>*/
.red_circle {
    display: block;
    background: red;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin: 0;
    background: radial-gradient(circle at 10px 10px, red, #a70000);
}

.redCircleSmall {
    display: inline-block;
    background: red;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    margin: 0;
    background: radial-gradient(circle at 2px 2px, red, #a70000);
}

.yellow_circle {
    display: block;
    background: yellow;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin: 0;
    background: radial-gradient(circle at 10px 10px, #ffff00, #b79910);
}

.yellowCircleSmall {
    display: inline-block;
    background: yellow;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    margin: 0;
    background: radial-gradient(circle at 2px 2px, #ffde00, #ffae00);
}

.green_circle {
    display: block;
    background: green;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin: 0;
    background: radial-gradient(circle at 10px 10px, #00ff00, #21800b);
}

.greenCircleSmall {
    display: inline-block;
    background: green;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    margin: 0;
    background: radial-gradient(circle at 2px 2px, #00ff00, #21800b);
}

.greyCircleSmall {
    display: inline-block;
    background: grey;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    margin: 0;
    background: radial-gradient(circle at 2px 2px, #a09fa4, #696265);
}

/* Use <figure class="ball"><span class="shadow"></span></figure>*/
.ball {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 50%;
    position: relative;
    background: -webkit-gradient(radial, 50% 120%, 0, 50% 120%, 100, color-stop(0%, #81e8f6), color-stop(10%, #76deef), color-stop(80%, #055194), color-stop(100%, #062745));
    background: -webkit-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
    background: -moz-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
    background: -o-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
    background: radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
.ball:before {
    content: "";
    position: absolute;
    top: 1%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: -webkit-gradient(radial, 50% 0px, 0, 50% 0px, 58, color-stop(0%, #ffffff), color-stop(58%, rgba(255, 255, 255, 0)));
    background: -webkit-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
    background: -moz-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
    background: -o-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
    background: radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
    -webkit-filter: blur(5px);
    z-index: 2;
}

.ball .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0)));
    background: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
    background: -moz-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
    background: -o-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
    background: radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
    -webkit-transform: rotateX(90deg) translateZ(-150px);
    -moz-transform: rotateX(90deg) translateZ(-150px);
    -ms-transform: rotateX(90deg) translateZ(-150px);
    -o-transform: rotateX(90deg) translateZ(-150px);
    transform: rotateX(90deg) translateZ(-150px);
    z-index: -1;
}

.highlightGreen {
    padding: 1px 2px;
    min-width: 4em;
    display: inline-block;
    text-align: center;
    background-color: #77DD77;
    outline: solid 1px green;
    /*border-radius: 3px;*/
}

.highlightYellow {
    padding: 1px 2px;
    min-width: 4em;
    display: inline-block;
    text-align: center;
    background-color: #fdf978;
    outline: solid 1px orange;
    /*border-radius: 3px;*/
}

.highlightRed {
    padding: 1px 2px;
    min-width: 4em;
    display: inline-block;
    text-align: center;
    background-color: #ff6961;
    outline: solid 1px red;
    /*border-radius: 3px;*/
}

.in-active {color: #858585;}

.in-active .highlightGreen,
.in-active .highlightYellow,
.in-active .highlightRed {
    opacity: 0.5;
    outline: none;
    color: #1d1d1d;
}

.in-active .greenCircleSmall,
.in-active .yellowCircleSmall,
.in-active .redCircleSmall,
.in-active .true-value:before {
    opacity: 0.4;
}

.in-active a { opacity: 0.7; }
.in-active a:hover { opacity: 0.7; }

table.data_table .in-active td a { color: #444444; }
table.data_table td a:hover { color: #004485; }

/*http://www.bestcssbuttongenerator.com*/
input[type=button], input[type=submit], .button {
    -webkit-box-shadow: 0px 1px 0px 0px #bbdaf7 inset, 0px -1px 0px 0px #378de5 inset;
    -moz-box-shadow: 0px 1px 0px 0px #bbdaf7 inset, 0px -1px 0px 0px #378de5 inset;
    box-shadow: 0px 1px 0px 0px #bbdaf7 inset, 0px -1px 0px 0px #378de5 inset;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
    background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
    background-color:#79bbff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #84bbf3;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-weight:bold;
    padding:3px 12px;
    text-decoration:none;
    text-shadow:0px 1px 0px #528ecc;
}
input[type=button]:hover, input[type=submit]:hover, .button:hover {
    /*background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
    background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
    background-color:#378de5;*/

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #79bbff), color-stop(100%, #3678cd));
    background:-moz-linear-gradient(top, #79bbff 0%, #3678cd 100%);
    background:-webkit-linear-gradient(top, #79bbff 0%, #3678cd 100%);
    background:-o-linear-gradient(top, #79bbff 0%, #3678cd 100%);
    background:-ms-linear-gradient(top, #79bbff 0%, #3678cd 100%);
    background:linear-gradient(to bottom, #79bbff 0%, #3678cd 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
    background-color:#79bbff;
}
input[type=button]:enabled:active, input[type=submit]:enabled:active, .button:enabled:active, .button:active {
    /*position:relative;
    top:1px;*/
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
    background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
    background-color:#378de5;
}

.input[type=button]:disabled, input[type=submit]:disabled, .button:disabled,
.input[type=button]:disabled:hover, input[type=submit]:disabled:hover, .button:disabled:hover {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
    background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    cursor:pointer;
    color:#bdbdbd;
    font-family:arial;
    font-weight:bold;
    padding:3px 12px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
}

/*Overwrite default link color*/
.button:hover {
    color: #ffffff;
}

.highlightedButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
    -webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
    box-shadow:inset 0px 1px 0px 0px #fce2c1;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25));
    background:-moz-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
    background:-webkit-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
    background:-o-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
    background:-ms-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
    background:linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25',GradientType=0);
    background-color:#ffc477;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #eeb44f;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-weight:bold;
    padding:3px 12px;
    text-decoration:none;
    text-shadow:0px 1px 0px #cc9f52;
}
.highlightedButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477));
    background:-moz-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
    background:-webkit-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
    background:-o-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
    background:-ms-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
    background:linear-gradient(to bottom, #fb9e25 5%, #ffc477 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477',GradientType=0);
    background-color:#fb9e25;
}
.highlightedButton:active {
    position:relative;
    top:1px;
}

/* Standard syntax */
@keyframes orangePulse {
    from { box-shadow: none; }
    50% { border:1px solid orange; box-shadow: 0 0 18px #FF7C00; }
    to { box-shadow: none; }
}

/* Chrome, Safari, Opera */
@-webkit-keyframes orangePulse {
    from { -webkit-box-shadow: none; }
    50% { border:1px solid orange; -webkit-box-shadow: 0 0 18px #FF7C00; }
    to { -webkit-box-shadow: none; }
}

/* Standard syntax */
@keyframes greenPulse {
    from { box-shadow: none; }
    50% { border:1px solid #00cc00; box-shadow: 0 0 10px #009b00; }
    to { box-shadow: none; }
}

/* Chrome, Safari, Opera */
@-webkit-keyframes greenPulse {
    from { -webkit-box-shadow: none; }
    50% { border:1px solid #00cc00; -webkit-box-shadow: 0 0 18px #009b00; }
    to { -webkit-box-shadow: none; }
}

/* Standard syntax */
@keyframes highlightPulse {
    from { box-shadow: none; }
    50% { border:1px solid #BAD9FF; box-shadow: 0 0 10px #3678cd; }
    to { box-shadow: none; }
}

/* Chrome, Safari, Opera */
@-webkit-keyframes highlightPulse {
    from { -webkit-box-shadow: none; }
    50% { border:1px solid #BAD9FF; -webkit-box-shadow: 0 0 18px #3678cd; }
    to { -webkit-box-shadow: none; }
}

/* Chrome, Safari, Opera */
@-webkit-keyframes pulse {
    0% {-webkit-transform: scale(0.95, 0.95); /*opacity: 0.0;*/}
    50% {-webkit-transform: scale(1.0, 1.0);}
    100% {-webkit-transform: scale(0.95, 0.95); /*opacity: 0.0;*/}
}

/* Standard syntax */
@keyframes pulse {
    0% {transform: scale(0.95, 0.95); /*opacity: 0.0;*/}
    50% {transform: scale(1.0, 1.0);}
    100% {transform: scale(0.95, 0.95); /*opacity: 0.0;*/}
}

/********************************/
/*Creates a buffer around the menu
that will keep the menu open when
the mouse is hovering on it.*/
/*#menu .menu_container {
    width: 1.9em;
    height: 1.7em;
    position:absolute;
    margin-top: -1.7em;
    margin-left: -0.2em;
}

#menu .menu_container:hover {
    position: absolute;
    width: 13em;
    height: 6em;
    padding: 50px;
    margin-top: -50px;
    margin-left: -50px;
}*/
/*****************************************************************/
/**Styling used for the hover menu when editing a property value**/
.hover_edit_menu #menu li {
    display: inline;
}

.hover_edit_menu #menu li ul {
    margin-left: -3px;
}

.hover_edit_menu #menu .editable_value {
    display: inline;
    padding: 0 3px;
    color:inherit;
    cursor: default;
}

.hover_edit_menu #menu .menu_container {
    position: relative;
    display: inline;
    margin-top: auto;
    margin-left: auto;
    width: 0;
    height: 0;
}

.hover_edit_menu #menu .menu_container:hover {
    position: relative;
    width: 0;
    height: 0;
    padding: 0;
    margin-top: 0;
    margin-left: 0;
}
/****************************************************************/

/****/
.toggleVisibilityLinkPanel a {
    width: 16px; height: 16px;
    outline: 0;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid transparent;
}

.toggleVisibilityLinkPanel a:hover {
    border: 1px solid #d0d0d0;
    border-radius: 3px;
}

.toggleVisibilityLinkPanel .linkImageContainer {
    width: 16px; height: 16px;
    display:inline-block;
    text-align: center;
}

.triangleRight16, .triangleDown16 {
    width: 16px;
    display:flex;
    align-items: center; /* Vertically align the text */
    justify-content: center; /* Horizontally align the text (optional) */

    color: #b0b0b0;
    font-size: larger;
}

.triangleRight16 {
    height: 14px;
}

.triangleDown16 {
    height: 16px;
    padding-left: 1px;
}

.triangleRight16:before,
.triangleDown16:before {
    content: "▸";
}

.triangleDown16:before {
    transform: rotate(90deg); /* Rotate the text 90 degrees */
}
