h4styles.css

/**
 * h4styles.css - Global stylesheet for Heurist Version 4.
 *
 * @fileOverview This file provides the global CSS styles for the Heurist academic knowledge management system, Version 4.
 * It includes styles for layout, typography, forms, search results, and various UI components.
 * @project     Heurist academic knowledge management system
 * @package Core
 * @link https://HeuristNetwork.org
 * @copyright (C) 2005-2023 University of Sydney, (C) 2024 onwards Heurist Network
 * @license https://www.gnu.org/licenses/gpl-3.0.txt GNU License 3.0
 * @author      Tom Murtagh
 * @author      Kim Jackson
 * @author      Stephen White
 * @author Artem Osmakov <osmakov@gmail.com>
 * @author Ian Johnson <ian.johnson.heurist@gmail.com>
 * @since 4.0
 */

* {
    -moz-box-sizing: border-box;
}
/*
* {
    margin: 0;
    padding: 0;
}
*/
body {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 14px;
}
.ui-widget {
    font-size: 0.8em;
}
a{
    outline: 0;
}

.logo {
    background-image: url("hclient/assets/branding/h4logo_small.png");
    background-repeat: no-repeat !important;
    background-size: contain;
    width: 190px;
    height: 38px;
}

.db-list {
    
    -webkit-column-width:   250px;
    -moz-column-width:      250px;
    -o-column-width:        250px;
    -ms-column-width:       250px;
    column-width:           250px;
/*
    -webkit-column-rule-style:  solid;
    -moz-column-rule-style:     solid;
    -o-column-rule-style:       solid;
    -ms-column-rule-style:      solid;
    column-rule-style:      solid;*/
}

.db-list li {
    list-style: none;
    background-image: url(hclient/assets/database.png);
    background-position: left;
    background-repeat: no-repeat;
    padding-left: 30px;
    line-height: 17px;
}
.db-list li a{
    text-decoration: none;
}

/*  LAYOUT */
.ui-layout-pane {
    padding: 0px !important;
    border:none !important;
}

.ui-layout-content {
    overflow:hidden !important;
    /* height: 100%; */
    /* width: 100%; */
}
.ui-layout-content2 {
    padding: 0px !important;
}

/* fix overflow issue in menu   */
.ui-selectmenu-menu > .ui-menu .ui-menu-item, .ui-selectmenu-menu > .ui-menu .ui-state-active{
    margin: 1px;
}

/* TODO: opacity=20 appears to be wrong, ? should be opacity 20 */
.ui-layout-mask {
    background: #C00 !important;
    opacity: .20 !important;
    filter: alpha(opacity=20) !important;
}

/* layout toggler icon from jquery ui */
.ui-layout-toggler {
    opacity:        .60;
    filter: alpha(opacity=60); /* IE 8,9 */
}
.ui-layout-resizer-open-hover .ui-layout-toggler, 
.ui-layout-toggler-closed,
.ui-layout-toggler-hover {
    opacity:        1;
    filter: alpha(opacity=100);
}
.ui-layout-toggler-west-open .ui-icon,
.ui-layout-toggler-east-open .ui-icon  { margin-left:   -5px; }   /*tweak arrow horizontal-center */

.ui-layout-toggler-south-open  .ui-icon{
    background-position: -64px -20px;
    width:16px;
    margin-left:12px;
}
.ui-layout-toggler-south-closed  .ui-icon{
    background-position: 0px -20px;  /* ui-icon-triangle-1-n  */
    width:16px;
    margin-left:12px;
}

/*
#layout_panes{
    height: 100%;
    width: 100%;
    position:absolute;
}
*/


.tab_ctrl{
    position: absolute;
}

/* -------------------------------------------- */

.logged-in-only{
    /*visibility: hidden;*/
}
.logged-out-only{
    /*visibility: visible;*/
}
.menu-or-popup{
    z-index: 990;
}

.frame_container{
    padding: 0.2em !important;
    /*
    height:100%;
    z-index:2;*/
    bottom: 0px;
    position: absolute;
    top: 0px;
    width: 99%;
    min-height:300px;
}

iframe {
    width:100%;
    height:100%;
    border:none;
}

input[type=checkbox], input[type=radio]{
    vertical-align:-0.3em;
    margin-right:0.2em;

}

/* special input elements in editing_input */
input.rec_URL {
    text-decoration: underline;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 2px 0px;
    padding: 3px;
}

input.Temporal, .list_div {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 2px 0px;
    padding: 3px;
}

.entity_selector {
    cursor: hand;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0px 10px 0px 30px;
    overflow-y: auto;
    line-height: 18px;
    max-height: 120px;
    height: auto;
    min-height: 20px;    
}

/* RECORD VIEWER ----------------------------------   */
H2.rec_title {
    color: #6A7C99;
    font-size: 14px;
    line-height: 25px;
    margin: 0;
} 

/* INPUT FORM ----------------------------------   */
fieldset {
    padding:5px;
    border:0;
}
.editForm > h4{
    margin:0;
}

fieldset > div, .input-row{
    padding-top:0.2em;
    display:table-row;
    /*padding-bottom:0.2em;*/
}
fieldset.sysBugReport > div{
    padding-top: 1em;
    display: block;
}

fieldset input:focus,
fieldset textarea:focus,
fieldset button:focus,
.btnset_radio:focus,
.ui-fancytree,
.outline_suppress {
    outline: none;
    outline-style:none;
    box-shadow:none;
    border-color:transparent;    
}

fieldset > div > input.text, fieldset > div > select.text, fieldset > div > .ui-selectmenu-button{
    margin-top: 0.3em;
    margin-bottom: 0.5em;
}
fieldset > div > input[type=radio]{
    vertical-align:-0.3em;
    margin: 0.5em 0.2em 0.2em 0.2em;
}
fieldset > div > input[type=checkbox], .ent_search_cb input[type=checkbox], .ent_search_cb input[type=radio]{
    margin: 0 0.5em 0 1em;
}
fieldset > div > .header,
fieldset > div > .header_narrow{
    display:table-cell;
    text-align:right;
    padding:4px 0.4em 0 0;
}
fieldset.ontop > div > .header{
    display:block;
    text-align:left;
}


fieldset > div > .header{
    width:150px;
    min-width:150px;
}
fieldset.narrow > div > .header{
    width:60px;
    min-width:60px;
}

fieldset > div > .input-cell{
    display:table-cell;
    min-width:120px;
    padding-bottom:0.5em;
}
fieldset.ontop > div > .input-cell{
    display:block;
}
.input-cell > input{
    margin-right: 0.4em;
}

div.input-div{
    padding-right:55px;
    padding-bottom:2px;
}
div.input-div:has(> select){
    padding-right: 100px;
}

div.input-div:hover > .show-onhover, .show-onhover:hover {
    display: inline-block;
}
div.input-div > .show-onhover, .show-onhover {
    display: none;
}

div.input-div > .btn_input_move, .btn_input_move {
    display: none;
    cursor: grab;

    vertical-align: top;
    margin-top: 3px;
}
div.input-div:active > .btn_input_move, .btn_input_move:active {
    cursor: grabbing;
}

div.image_input{
    min-width: 120px;
    min-height: 120px;
    display: inline-block;
    position: relative;  
    cursor: pointer;
}
img.image_input{
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto;
    left: 0px;
    right: 0px;
    max-width: 120px;
    max-height: 120px;
}
/* fieldset for search*/
.fieldset_search > div, .input-row{
    display:block;
}
.fieldset_search > div > .header{
    display:block;
    text-align:left;
    width: 200px;
}

.fieldset_search > div > div  > div > input.text, .fieldset_search > div > div >  div > select.text {
    max-width: 200px;
    min-width: 200px;
}

/* margin-bottom:2px; */
input.text, select.text {
    padding-bottom: 0.2em;
}

.required, .required>label, .recommended {
    font-weight: 800;
}

/* for tabs, accordions, treeview */
.separator2{
    text-transform: uppercase;
    font-weight:bold;
    /* background: #ECF1FB !important; */
}

.separator {
    padding: 5px 0 0 20px;
    text-align:left;
}

.smallbutton, .smallicon{
    width: 16px !important;
    height: 16px !important;
    margin-left: 0.4em;
}
.smallicon{
    display: inline-block;
    vertical-align:middle;
}

/* FOR SELECT */

/* not used since hmtl select replaced to seletmenu */
optgroup {
    font-style: normal;
    font-weight:bold;
    padding:0px;
    margin-top:5px;
    text-indent: 5px;
}

/* -------------------------------------------- */
/*  SEARCH RESULT */

.tagDiv {
    display: inline-block;
    cursor: pointer;
    border: none;
    background: none !important;
    margin: 3px;
    padding: 3px;
    text-decoration: underline;
}

.tagDiv > label{
    cursor: pointer;
}

/*-------------------------------------------------------------------------------*/
/* main element for various lists it may be in 4 states list, icon, thumb, thumbs3 */
.recordDiv {
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    background:#EEE;
    background:-moz-linear-gradient(top, #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EEEEEE));
}

/* highlight on hover */
div.recordDiv:hover {
    -moz-box-shadow:0 1px 4px #000;
    -webkit-box-shadow:0 1px 4px #000;
    box-shadow:0 1px 4px #000;
    z-index: 2;
    background:-moz-linear-gradient(top, #EFEFEF, #DDDDDD) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#DDD));
}

/*  alternate color schme for entities other than usual Records */
.list div.recordDiv_blue, .list div.recordDiv_blue:hover{
    background:-moz-linear-gradient(top, #EDF5FF, #EDF5FF) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, left top, left bottom, from(#EDF5FF), to(#EDF5FF));
}

/*
rec_edit_link
rec_actions  see specific manage entities
*/

div.recordDiv:hover .rec_actions_button 
{
    display: table-cell;
    visibility: visible;
}
div.recordDiv .rec_actions_button 
{
    display: table-cell;
    visibility: hidden;
}
div.recordDiv .selection_pointer{
    display: table-cell;
    visibility: hidden;
}
div.recordDiv.selected .selection_pointer{
    display: table-cell;
    visibility: visible;
}

div.recordDiv.white-borderless{
    background: white;
    border: none;
}
.list div.recordDiv.densed{
    padding:0;
}

div.groupHeader:hover > .action-button-container{
    display:table-cell;
}
div.recordDiv:hover > .action-button-container,
div.recordDiv:hover .rec_actions 
{
    display: block;
}
div.groupHeader > .action-button-container,
div.recordDiv > .action-button-container,
div.recordDiv  .rec_actions {
    display: none;
}

div.recordDiv.public  > .action-button-container{
    display: none;
}

.list .recordDiv:hover .recordTitle{
    right:96px;
}

.list .recordDiv.public:hover .recordTitle{
    right:2px;
}


.list .recordDiv > .item{
    display: table-cell;
    vertical-align: middle;
    padding: 0 2px;
}
.thumbs .recordDiv > .item{
    max-width: 130px !important;
}

.recordDiv > .description_term{
    position: absolute;
    top: 6px;
    left: 355px;
    right: 2px;
    font-size: smaller;
    font-style: italic;
    padding-top: 4px;
}

.thumbs .recordDiv > .label_term{
    width:130px;
    max-width: 130px;
}
.thumbs .recordDiv > .description_term{
    top: 22px;
    left: 2px;
    width:130px;
    max-width: 130px;
    font-size: smaller;
    font-style: italic;
}


.recordDiv > .description{
    font-style:italic;
    font-size:smaller;
}
.thumbs .recordDiv > .description{
    position: absolute;   
    max-width: 130px !important;
    max-height: 130px;
    overflow: hidden;
}
.list .recordDiv > .description{
    display:inline-block;
    max-width:400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align:middle;
}

div.recordDiv .action-button {
    height: 16px;
    width: 16px;
    margin-left: 6px;
    color: gray;
}
.thumbs div.recordDiv .action-button {
    margin-left: 0px;
}

div.recordDiv > .action-button-container
/*div.recordDiv .rec_actions*/
{
    position: absolute;
    top: 4px;
    right: 2px;
}

.list .action-button-container {
    top: 5px !important;
}

div.recordDiv .ui-button-text{
    display: none;    
    font-size: 9px;
    vertical-align: bottom;    
}
.list div.recordDiv.public .ui-button-text,
.thumbs div.recordDiv.public .ui-button-text,
.thumbs3 div.recordDiv .ui-button-text{
    display: none !important;    
}

/* show button text for public mode */
.icons div.recordDiv.public .ui-button-text{
    display: inline-block;    
    line-height: 16px;
    padding: 0px 4px;
}
.icons div.recordDiv.public .action-button{ 
    width: 68px;
    padding: 2px;
    margin: 2px;
}
div.recordDiv.public .action-button{ 
    text-align:left;
    color: black;
    /* slightly bigger buttons */
    width: 20px;
    padding: 2px;
}
div.recordDiv.public .action-button > .ui-button-icon-primary{
    padding: 3px;
}
.icons div.recordDiv.public .action-button > .ui-button-icon-primary{
    padding: 0px;
}

.icons div.recordDiv.public .action-button-container {
    top:6px !important;
    max-width:160px;
}
div.recordDiv.public .rec_edit_link_ext, .thumbs .rec_edit_link_ext{
    display:none;
}
/* hide bookmark icons for public */
div.recordDiv.public > .recordIcons > span {
    display: none !important;    
}

div.recordDiv:hover > .rec_action_link2{
    visibility:visible;
    vertical-align: bottom;
}
div.recordDiv > .rec_action_link2{
    visibility:hidden;
    display: inline-block;
}
.list div.recordDiv > .rec_action_link2{
    left:355px;
}
.thumbs div.recordDiv > .rec_action_link2{
    position:absolute;
    right:2px;
    top:6px;
}

/*
div.expanded.recordDiv > .rec_action_link2{
    display: none;   
}
*/
.rec_action_link2 > .rec_actions_button{
    padding: 5px 2px;
}



/* actions for user list */
div.recordDiv:hover > .rec_action_link{
    visibility:visible;
}
div.recordDiv > .rec_action_link{
    visibility:hidden;
    display: inline-block;
    height: 16px;
    width: 16px;
    right: 0px;
}

div .veiled{
    position: absolute; 
    z-index: 99; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    background-color: rgb(200,200,200,0.7);    
}


/* @todo to avoid !important put these classes at the very end of styles */
div .selected, div.selected:hover{
    background: -moz-linear-gradient(top , #E6F8FD, #BEE4F8) repeat scroll 0 0 transparent !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#E6F8FD), to(#BEE4F8)) !important;
    border-color: #62A7F8;
}

div.collected, div.collected_perm, div.collected:hover, div.collected_perm:hover {
    background: -moz-linear-gradient(top , #e6fdeb, #bef8cd) repeat scroll 0 0 transparent !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#e6fdeb), to(#bef8cd)) !important;
    /* > .recordTitle
    text-shadow: 0px 0px 9px #00ff00 !important;*/
}
div.collected.selected {
    background: -moz-linear-gradient(top , #c1e8e3, #80e8da) repeat scroll 0 0 transparent !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#c1e8e3), to(#80e8da)) !important;
}

div.collected  span.toadd {
    display:none !important;   
}
div.collected  span.toremove {
    display:inline-block !important;   
}

div .selected_last{
    border: 3px solid #62A7F8 !important;
}


.recordDiv .recordIcons {
    /*
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain; 
    */
}

.recordDiv .rec_owner{
    display: none;
    vertical-align: top;
}

.recordDiv .recTypeThumb {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain; 
    position: absolute;
    text-align: center;
    margin: 0px;
    left: 0px;
    right: 0px;
    top: 22px;
    height: 96px;
}

.recordDiv.rl-not-logged-in .recTypeThumb{
    top: 0px;
}

.recordDiv .recordTitle, .recordDiv .recordDescription {
    color: #666666;
    position: absolute;
    text-align: left;
    overflow: hidden;
    text-shadow: 3px 3px 5px white;

    /*line-height: 12px;*/
}

.smaller{
    width: 110px !important;
} 
.smaller:hover{
    width: 112px !important;
} 


/* THUMBS VIEW */
.thumbs .recordDiv, .thumbs3 .recordDiv, .horizontal .vertical .recordDiv{
    -moz-user-select: none;
    border: 3px solid #FFFFFF;
    border-collapse: collapse;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 2px 4px #BBBBBB;
    display: inline-block; /* !important; */
    font-size: 0.9em !important;
    margin: 6px;

    height: 154px;
    width: 128px;
    overflow: visible;
    padding: 0px;
    position: relative;
}
.thumbs .recordDiv.rl-not-logged-in {
    height: 134px;
}

.thumbs .recordDiv:hover {
    z-index:10;
    -moz-box-shadow:0px 3px 8px #666;
    -webkit-box-shadow:0px 3px 8px #666;
    box-shadow:0px 3px 8px #666;
    height:158px;
    width:132px;
    margin:6px;
}
.thumbs .recordDiv.rl-not-logged-in:hover {
    height: 138px;
}

.thumbs .recordDiv .recordTitle {
    bottom: 1px;
    left: 3px;
    right: 3px;
    font-size: 9px;
    line-height: 10px;
    height: 30px;    
}

.thumbs .recordDiv .recordSelector {
    bottom: 1px;
    right: 3px;
    position: absolute;
}

.thumbs .recordDiv .recordIcons {
    top: 1px;
    left: 3px;
    position: absolute;
    /*width: 20px;*/
}
.thumbs .recordDiv.rl-not-logged-in .recordIcons,
.thumbs3 .recordDiv.rl-not-logged-in .recordIcons {
    display: none;
}

.thumbs .recordDiv .rec_owner{
    display: inline;
    /*padding-left:5px;*/
}

/* landscape option */
.thumbs .landscape.recordDiv {
    width: 274px;
}
.thumbs .landscape.recordDiv:hover {
    width: 280px;
}
.thumbs .landscape.recordDiv .recordTitle {
    left: 114px;
    top: 4px;
    right: 2px;
    width: auto;
    height:20px;
    font-weight:bold;
}
.thumbs .landscape.recordDiv .recTypeThumb{
    width:100px;
    top:2px;
    height:100px
}
.thumbs .dashboard.recordDiv .recTypeThumb{
    width:75px;
    top:2px;
    height:75px
}

.thumbs .landscape.recordDiv .recordDescription {
    left: 114px;
    right: 3px;
    top: 26px;
    bottom: 24px;
}
.thumbs .landscape.recordDiv .recordIcons {
    display:none;
}

div.icons,div.thumbs,div.thumbs3{
    padding-left:3px;    
}

/* special mode for dahsboard */
div.div-result-list-content.icons_list{
    text-align: left;
}
.icons_list .recordDiv, .icons_list .recordDiv:hover {
    -moz-user-select: none;
    box-shadow: none;
    display: inline-block;
    font-size: 0.9em !important;

    min-width: 50px;
    width : auto;
    padding: 0;
    position: relative;
    background: none;
    
    border: none;
    height: 36px;
    border-right: 1px solid lightgray;
    margin: 0;    
}
.icons_list .recordDiv .recTypeThumb{
    top:10px;
    left:10px;
    width: 16px;
    height: 16px;
}
.icons_list .recordDiv .recordTitle {
    position:relative;
    /*top: 12px;
    left: 38px;*/
}
.icons_list .recordDiv .recordTitle > .item {
    /*max-width:110px;*/
    padding: 12px 10px 8px 31px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.icons_list .recordDiv .recordDescription,
.icons_list .recordDiv .recordIcons
{
    display: none;
}


/* ICONS VIEW */
.icons .recordDiv {
    border: 3px solid #FFFFFF;
    border-collapse: collapse;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 2px #BBBBBB;
    display: block; /*inline-block !important; */
    font-size: 0.8em !important;
    margin: 6px;
    position: relative;
    height: 70px;
    /*
    height: 36px;
    width: 128px;*/
}
.icons div.recordDiv:hover{
    z-index:10;
/*    
    -moz-box-shadow:0px 3px 8px #666;
    -webkit-box-shadow:0px 3px 8px #666;
    box-shadow:0px 1px 8px #666;
    height:68px;
*/    
    -moz-box-shadow:0px 1px 2px #666;
    -webkit-box-shadow:0px 1px 2px #666;
    box-shadow:0px 1px 1px #666;
    height:70px;
    /*
    height:42px;
    width:144px;   -2px */
    margin:4px;
}
.icons div.recordDiv.expanded{
    height:auto;
    border:none;
    box-shadow:none;
    background:none;
}
.icons div.recordDiv.expanded:hover{
    z-index:10;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    height:auto;
    margin: 6px;
}

.icons div.recordDiv.expanded .action-button-container{
    left:2px;
    width:60px;
}
.icons div.recordDiv.expanded .action-button{
    width: 58px;
    padding: 0px;
    margin: 2px;
}
.icons div.recordDiv.expanded .action-button .ui-button-text{
    position: absolute;
    left:2px;
    right:18px;
    top: 3px;
    display:block;
}
.icons div.recordDiv.expanded .action-button .ui-button-icon-primary{
    top: 3px;
    right:2px;   
    position: absolute;
}

.icons div.recordDiv.expanded .recTypeThumb {
    display: none;
}


.icons .recordDiv .recTypeThumb {
    /*
    top:2px;
    height: 30px;
    width: 30px;
    */
    top:2px;
    height: 58px;
    width: 58px;
}
.icons .recordDiv:hover .recTypeThumb {
    /*height:36px;*/
    width: 60px;
}

.icons .recordDiv .recordTitle {
    bottom: 0.1em;
    /*top: 0.3em;*/
    top: 22px;
    left: 64px;
    right: 1px;

    white-space: normal;
    font-size:1.2em;
}
    
.icons .recordDiv .recordSelector {
    bottom: 1px;
    right: 3px;
    position: absolute;
}

.icons .recordIcons {
   /* display: none; */
   position: absolute;
   left: 64px;
   top: 3px;
}
.icons .recordDiv.rl-not-logged-in .recordIcons .ui-icon-bookmark,
.icons .recordDiv.rl-not-logged-in .recordIcons .rec_owner,
.icons .recordDiv.rl-not-logged-in .recordIcons .rec_visibility{
    display: none !important;
}

.icons .rt-icon{
    vertical-align: middle;
}

.rt-icon{
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* LIST VIEW */

.list .recordDiv {
    border-bottom: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-radius: 0 0 0 0;
    /*border-top: 1px solid #FFFFFF;*/
    display: block; /* !important; */
    /*height: 2.6em;*/
    
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0.4em 0.8em;
    position: relative;
    text-align: left;

    font-size: 0.9em !important;
}

.list .recordDiv .rec_owner{
    display: inline;
}

.list .recordDiv .recTypeThumb {
    display: none;
}
.list .recordDiv .recordTitle {
    left: 86px;
    right: 3px;
    top: 8px;

    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.list .recordDiv.rl-not-logged-in .recordTitle{
    left: 46px;
}
.list .recordDiv.public .recordTitle {
    left: 38px;
}
.list .recordDiv .recordTitle2 {
    left: 54px;
}
.list .landscape.recordDiv .recordTitle {
    max-width: 200px;
}
.list .landscape.recordDiv .recordDescription {
    left: 280px;
    right: 3px;
    top: 8px;

    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.icons .recordDiv .recordTitle .inlist, .thumbs .recordDiv .recordTitle .inlist{
    display:none;
}
.icons .landscape.recordDiv .recordDescription {
    display:none;
}

.list .recordDiv .recordTitle .item {
    width:150px;
    display:inline-block;
    vertical-align:middle;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list .recordDiv .recordTitle .item.inlist {
    display:inline-block;

    white-space: normal;
    min-height:2.5em;
    max-height:2.5em;
}


.list .recordDiv .recordIcons {
    padding-left:0px;
    min-width: 20px;
    display: inline-block;
}
.list .recordDiv .recordSelector {
    display: inline-block; 
    padding-top:5px;
}

/* THUMBS (another mode) VIEW FOR DIGITAL HARLEM */
.thumbs2 .recordDiv .recordIcons {
    display: none;
}
.thumbs2 .recordDiv {
    -moz-user-select: none;
    border: 3px solid #2C547A;
    border-collapse: collapse;
    box-shadow: 0 2px 4px #BBBBBB;
    display: inline-block; /* !important; */
    margin: 6px;

    height: 109px;
    width: 180px;
    overflow: visible;
    padding: 0px;
    position: relative;
}
.thumbs2 .recordDiv:hover {
    z-index:10;
    border: 3px solid #E77A27;
    -moz-box-shadow:0px 3px 8px #666;
    -webkit-box-shadow:0px 3px 8px #666;
    box-shadow:0px 3px 8px #666;
    height:113px;
    width:184px;
    margin:3px;
}

.thumbs2 .recordDiv .recordTitle {
    color: white;
    text-shadow: 2px 2px #000;
    font-size: 1.2em !important;
    bottom: 3px;
    left: 2px;
    right: 2px;
    height: 25px;
/*    width: 180px; */
}

.thumbs2 .recordDiv .recTypeThumb{
    height: 100%;
}

/*   */

.thumbs3 .recordDiv {
    height: 212px;
    width: 178px;
}
.thumbs3 .recordDiv.rl-not-logged-in {
    height: 192px;
}

.thumbs3 .recordDiv .recTypeThumb{
    height: 148px
}

.thumbs3 .recordDiv:hover {
    z-index:10;
    -moz-box-shadow:0px 3px 8px #666;
    -webkit-box-shadow:0px 3px 8px #666;
    box-shadow:0px 3px 8px #666;
    height:216px;
    width:184px;
    margin:3px;
}
.thumbs3 .recordDiv.rl-not-logged-in:hover{
    height: 195px;
}

.thumbs3 .recordDiv .recordTitle {
    bottom: 1px;
    left: 3px;
    right: 3px;
    font-size: 10px;
    line-height: 12px;
    height: 38px;    
}

.thumbs3 .recordDiv .recordSelector {
    bottom: 1px;
    right: 3px;
    position: absolute;
}

.thumbs3 .recordDiv .recordIcons {
    top: 1px;
    left: 3px;
    position: absolute;
    /*width: 20px;*/
}

.thumbs3 .recordDiv .rec_owner{
    display: inline;
    padding-left:5px;
}

/* landscape option */
.thumbs3 .landscape.recordDiv {
    width: 440px;
    border: none;
}

.thumbs3 .landscape.recordDiv .recordTitle {
    left: 180px;
    top: 4px;
    right: 2px;
    width: auto;
    font-weight:bold;
    font-size:1.2em;
}
.thumbs3 .landscape.recordDiv .recTypeThumb{
    right:270px;
    top:5px;
    left:5px;
    height:160px;
    width:160px;
}
.thumbs3 .landscape.recordDiv .recordDescription {
    left: 180px;
    right: 3px;
    top: 30px;
    bottom: 2px;
}
.thumbs3 .landscape.recordDiv .recordIcons {
    display:none;
}
/* horizontal */
.horizontal .div-result-list-content{
    overflow-y: hidden;
    overflow-x: auto;
}
.horizontal::-webkit-scrollbar-thumb{
    background-color: lightblue;
    outline: 1px solid blue;    
}
.horizontal.div-result-list-content > div{
    display: table;
    border-spacing: 2px;
    padding-top: 5px;
}

.horizontal .recordDiv {
    height: 200px;
    min-width: 200px;
    display: table-cell;
    border: 1px solid lightblue;
    padding: 3px;
}

.vertical .recordDiv {
    min-height: 200px;
    width: 200px;
    display: block;
    border: 1px solid lightblue;
    padding: 3px;
    border-spacing: 2px;
}

.horizontal .recordDiv .recTypeThumb,
.vertical .recordDiv .recTypeThumb{
    top:0px;
    position: relative;
    width: 100%;
    height: 100%;
}

.horizontal .recordDiv:hover,
.vertical .recordDiv:hover,
 {
    z-index:10;
    -moz-box-shadow:0px 3px 8px #666;
    -webkit-box-shadow:0px 3px 8px #666;
    box-shadow:0px 3px 8px #666;
}

.horizontal .recordTitle,
.horizontal .recordSelector,
.horizontal .recordIcons,
.horizontal .rec_owner,
.horizontal .action-button-container,
.vertical .recordTitle,
.vertical .recordSelector,
.vertical .recordIcons,
.vertical .rec_owner,
.vertical .action-button-container
{
    display:none !important;    
}

.horizontal .recordTitleInPlaceOfThumb{
    height: 95%;
    position: relative;
    display: inline-block !important;
    font-weight: bold;
    font-size: larger;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis    
}
.vertical .recordTitleInPlaceOfThumb{
    height: 95%;
    padding: 20px;
    display: block !important;
    font-weight: bold;
    font-size: larger;
    text-align: center;
    position: relative;
}
.rectypeThumb{
    opacity: 0.5;
}
.realThumb{
    opacity: 1;
}


/* dashboard */
.thumbs .dashboard.recordDiv .recordTitle {
    left: 92px;
}
.thumbs .dashboard.recordDiv .recordDescription {
    text-overflow: ellipsis;
    left: 92px;
    bottom: 2px;
}
.thumbs .dashboard.recordDiv, .thumbs .dashboard.recordDiv:hover {
    height: 80px; /* 114, 440 */
    width: 370px;
}
.thumbs3 .dashboard.recordDiv:hover {
    height:180px;
    width: 440px;
}
.thumbs .dashboard.recordDiv, .thumbs .dashboard.recordDiv:hover,
.thumbs3 .dashboard.recordDiv, .thumbs3 .dashboard.recordDiv:hover,
.thumbs .dashboard.recordDiv.selected, .thumbs .dashboard.recordDiv.selected:hover,
.thumbs3 .dashboard.recordDiv.selected, .thumbs3 .dashboard.recordDiv.selected:hover{
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow: none !important;
    border: none;
    background: none !important;
    margin:10px 5px 10px 20px !important;
    outline: none;
    outline-style:none;
}
div .dashboard.selected_last{
    border: none !important;
}
/* END RESULT LIST ---------------------------------------- */


/* SAVED SEARCHES */
div.saved-search:hover > .edit-delete-buttons, .recordDiv:hover > .edit-delete-buttons {
    display: inline-block;
}
div.saved-search > .edit-delete-buttons, .recordDiv > .edit-delete-buttons {
    display: none;
    position:absolute;
    right: 0.3em;
}
.edit-delete-buttons > .ui-button{
    height: 15px;
    width: 15px;
    padding-right:2px;
}

.saved-search .name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:95%;
    display:inline-block;
    cursor: pointer;
}
.saved-search .name:hover{
    text-decoration:underline;
}

/* for yox viewer */
.thumbnails a
{
    display: block;
    margin: 4px;
}
.thumbnails a img{ border: solid 1px Black; }
.thumbnails a:hover img{ border: solid 1px #aaa }

/* Tag cloud */
.tagsCloud ul{
    text-align:center;
    /*
    margin:1em 0;
    padding:.5em 10px;
    background:#71b5e9 url(bg_tags.gif) repeat-x;*/
}
.tagsCloud li{
    margin:0px;
    padding:0px;
    list-style:none;
    display:inline-block;
}
.tagsCloud li a{
    /*text-decoration:none;
    color:#fff;*/
    padding:0 2px;
}
.tagsCloud li a:hover{
    /*color:#cff400;*/
}

.tag1{font-size:0.8em;}
.tag2{font-size:0.9em;}
.tag3{font-size:1em;}
.tag4{font-size:1.1em;}
.tag5{font-size:1.2em;}

.facet-item {
    line-height:1.5em; /* was 1.8 */
}
.facet_link {
    text-decoration: none;
}
.facet_link span:first-child{
    text-decoration: none;
    font-style: italic;
    display: inline-block;
}

.heuristFacetHistogram{
    display: flex;
    flex-direction: row;

    height: 50px;
    max-height: 50px;
}
.heuristFacetHistogramColumn{
    cursor: pointer;

    display: inline-block;
    margin-top: auto;

    background-color: gray;
}
.heuristFacetHistogramColumn:hover{
    background-color: lightgray;
    border: 1px solid black;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.width5{width:5px;max-width:5px;}
.width10{width:10px;max-width:10px;}
.width20{width:20px;max-width:20px;}
.width50{width:50px;max-width:50px;}
.width100{width:100px;max-width:100px;}
.width200{width:200px;max-width:200px;}
.width300{width:300px;max-width:300px;}
.width400{width:400px;max-width:400px;}
.width500{width:500px;max-width:500px;}

.horizontalmenu {
    border:none !important;
    background:none !important;
    padding:0;
}

.horizontalmenu > .ui-menu-item {
    float: left;
    width: auto;
    margin: 0px 2px;
}

.horizontalmenu  a.ui-state-active{
    margin:0px;
}

/* List view - Datatable */
table.dataTable th{
    text-align: left;
}

table.dataTable tr.ui-highlight{
    background:-moz-linear-gradient(top, #EDF5FF, #EDF5FF) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, left top, left bottom, from(#EDF5FF), to(#EDF5FF));
}

/* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon
Remove the jQuery UI Icon
Remove the jQuery UI Text Indent
Bump it up - jQuery UI is -8px

Bump it - jQuery UI is -8px
Allow use of icon-large to be properly aligned
*/
/*
.ui-icon[class*=" icon-"] {
    background: none repeat scroll 0 0 transparent;
    text-indent: 0;
    margin-top: -0.5em;
}
*/
.ui-button-icon-only .ui-icon[class*=" icon-"] {
    /*margin-left: -7px;*/
}
.ui-icon.icon-large {
    margin-top: -0.75em;
}

/* FancyTree */
.fancytree-container{
    overflow:hidden !important;
}
.fancytree-title{
    margin:0px !important;
    padding-right: 0px !important;
    padding-right: 5px !important;
}
.fancytree-edit-input{
    min-width: 12em !important;
}
li.fancytree-hidden{
    display:none !important;
}

span.fancytree-checkbox{
    width:16px;
}

.fancytree-ext-filter{
    color: black !important;
}
.fancytree-ext-filter .fancytree-node.fancytree-match .fancytree-title{
    font-weight: normal !important;
}
.fancytree-ext-filter .fancytree-node .fancytree-title{
    color: black !important;
}

/* JQuery UI Menu within fancytree node */
.fancytree-submenu.horizontalmenu{
    display: inline-block;

    vertical-align: middle;

    font-size: 0.7em;

    margin-left: 5px !important;
    padding-left: 0px !important;
}
.fancytree-submenu ul{
    min-width: 60px;

    padding: 0px !important;

    box-shadow: 0px 2px 5px 2px #333;
}
.fancytree-submenu .ui-menu-item-wrapper{
    padding-right: 15px;
    padding-left: 0px !important;
}
.fancytree-submenu .ui-menu-item .ui-menu .ui-menu-item{
    padding: 5px;
}
.fancytree-submenu .ui-menu-item .ui-menu .ui-menu-item:hover{
    background: #95A7B7;
}
.fancytree-submenu .ui-menu-icon{
    font-size: 0.9em;

    top: 2px;
}

/* Map */
.tree-map{
    padding:0px;
}
.tree-map .fancytree-checkbox{
    margin-left:0px;
}
.tree-map .fancytree-expander{
    width:14px*;
}
.tree-map ul.fancytree-container ul{
    padding: 0px 0px 0px 8px !important;
}

/* CMS */
.tree-cms > ul > li > .fancytree-node > .fancytree-title{
    font-weight: bold;
}

/* CSV Export, Facet Filter Builder and Record Title Mask */
.tree-csv span:not(.fancytree-has-children) span.fancytree-expander,
.tree-facets span:not(.fancytree-has-children) span.fancytree-expander {  /* Hide expander for nodes without children */
    display: none;
}
.tree-csv .fancytree-has-children span.fancytree-checkbox,
.tree-facets .fancytree-has-children span.fancytree-checkbox {  /* Hide checkbox */
    display: none;
}
.tree-csv span.fancytree-icon,
.tree-facets span.fancytree-icon {  /* Hide icon */
    display: none;
}

/* Filter Builder */
.tree-filter.hidden_checkboxes span.fancytree-checkbox{  /* Hide checkbox for nodes without children */
    display:none;
}
.tree-filter .fancytree-has-children span.fancytree-checkbox{  /*Replace checkbox for nodes with children */
    background-position: -4px -80px;/* white triangle */
    display: inline-block;
    width: 8px;
    margin-left: 0px !important;    
}
.tree-filter .fancytree-expanded.fancytree-has-children span.fancytree-checkbox{
    background-position: -36px -80px; /* black triangle  */
    display: inline-block;
}
.tree-filter .fancytree-has-children.fancytree-partsel span.fancytree-checkbox{
    background-position: -64px -176px;
}
.tree-filter .fancytree-has-children.fancytree-selected span.fancytree-checkbox:hover{
    background-position: -64px -48px;
}
.tree-filter .fancytree-expander{
    display:none;
}

/* Record structure and CMS editor */
.tree-rts .fancytree-folder > .fancytree-title{
    text-transform: uppercase;
    font-weight: bold !important;
}
.tree-rts .required, a.required{
    color:#CC0000 !important;
}
.tree-rts .recommended, a.recommended{
    color:#6A7C99 !important;
}
.tree-rts .forbidden, a.forbidden, .tree-rts .forbidden span{
    color:black !important;
    text-decoration: line-through;
}
.tree-rts .optional, a.optional, .optional{
    color:black !important;
}
.tree-rts span.fancytree-expander{
    display: none;
}
.tree-rts .fancytree-has-children span.fancytree-expander,
.tree-rts .separator2 span.fancytree-expander{
    display: inline-block;
}

/* Custom report */
.rtt-tree span.fancytree-expander{
    display: none;
}
.rtt-tree .fancytree-has-children span.fancytree-expander{
    display: inline-block;
    transform: scale(1.5) translate(1px, -1px);
}

/* Fancytree: Change individual checkboxes to radio buttons */
span.fancytree-checkbox.fancytree-radio{
    background-position: 0px -47px;
}
span.fancytree-checkbox.fancytree-radio:hover{
    background-position: -16px -47px;
}
.fancytree-selected span.fancytree-checkbox.fancytree-radio{
    background-position: -32px -47px;
}
.fancytree-selected span.fancytree-checkbox.fancytree-radio:hover{
    background-position: -48px -47px;
}

/* Allow horizontal scrolling of trees */
.tree-csv .fancytree-container, .tree-facets .fancytree-container, 
.tree-filter .fancytree-container, .tree-rts .fancytree-container, 
.rtt-tree .fancytree-container{
	display: inline-block;
	min-width: 95%;
}

.forbidden > label{
    color:black !important;
    text-decoration: line-through;
}

/* indent for folders 
ul.fancytree-container ul{
    padding: 0 0 0 26px !important;
}
*/

/* beginner level */
.heurist-helper2{
    font-style: italic;
    font-size: 0.8em;
}

/* intermediate level */
.heurist-helper1, .heurist-helper3{
    font-style:italic;
    font-size: 0.9em;
    vertical-align:top;
}
.heurist-helper1{
    font-style:normal;
}


/* nearly same as helper but nor affected to help status*/
.heurist-prompt{
    font-size:0.9em;
    opacity: 0.55;
}

.prompt {
    font-size: 10px;
    font-weight: normal;
    padding-top: 0.3em;
}
/* h6
.svs-acordeon{
    font-size: 0.97em;
    margin-left: 7px;
}
*/
.svs-acordeon{
    font-size: 1em;
}

.svs-acordeon > h3 > .ui-accordion-header-icon{
    top:40% !important;
}
.svs-acordeon > h3.with_supplementals > .ui-accordion-header-icon{
    top:9px !important;
}
.svs-acordeon-group{
    padding-top:1em;
    font-size: 1em;
    font-weight:bold;
}

.svs-contextmenu{

}
.svs-type-icon{
    display:inline-block;
    height:1em;
    top:0px;
    font-size:0.9em;
    width:1em;
    color:orange;
}

ul > li:hover > div.svs-contextmenu{ /*, ul > li.leaves:hover > div.svs-contextmenu2*/
    display: inline-block;
} 
div:hover > .svs-contextmenu {
    display: inline-block;
}
ul > li > .svs-contextmenu {
    display: none;
    cursor: pointer;
    position:absolute;
    top: 4px;
    right: 2px;
    /*width:15px;
    padding-right:2px;*/
}
ul > li > .fancytree-node > .svs-contextmenu2 {
    display: none;
    cursor: pointer;
    padding-top: 6px;
    position:absolute;
    right:10px;
}
div > .svs-contextmenu {
    display: none;
    cursor: pointer;
    float:right;
}


            span.fancytree-node,
            span.fancytree-title,
            div.svs-contextmenu3 > span.ui-icon{
                vertical-align:bottom;
                padding-left:2px;
            }
            div.svs-contextmenu3{
                cursor:pointer;
                position:absolute;
                right:5px;
                margin: 1px;
                padding: 2px 2px 0px 2px;
                display:none;
                color:black !important;
                border-radius:2px;
            }
            span.fancytree-node{
                /*min-width: 300px;*/
                padding:2px !important;
                border: none !important;
                display: block;
                width:100%;
                cursor: pointer;
            }
            
            div.svs-contextmenu4{
                cursor:pointer;
                position:absolute;
                right:7px;
                width: 16px;
                height: 16px;
                margin-top: -16px;
                display: none;
                background-position: 0 0; 
                background-image: url(external/jquery.fancytree/skin-themeroller/loading.gif);
            }           




/*
::-webkit-scrollbar-button {
background: #8ea9b9
}*/
.div-table-cell{
    display: table-cell;
    vertical-align: middle;
}
.div-table-cell > div.header4{
    width: 3em;
    display: inline-block;
    text-align: right;
}
.div-table-cell.header{
    padding-right:0.5em;
    text-align:right
}

.loading{
   background: url('hclient/assets/loading-animation-white.gif') no-repeat center center !important;
}

.labelBold{
    font-weight:bold;
}

#helper p, #helper h2, #helper h4{
    padding:10px;
}

.popup_content_div{
    padding:10px;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:1.5em
}
.popup_buttons_div{
    position:absolute;
    bottom:0px;left:0px;right:0px;
    /*height:1.5em;*/
    text-align: right;
    padding: 4px;
}

.ent_wrapper{position:absolute;top:0px;bottom:0px;left:0px;right: 0px;overflow:hidden;}
.ent_header, .ent_footer, .ent_content, .ent_content_full{position:absolute; left:0px; right:0px;}
.ent_header{top:0px;height:2.2em; padding:0.2em 0.5em;}
.ent_content{top:2.8em;bottom:3.5em; overflow-y:auto;}

.ent_content_full{position:absolute;top:2.8em;bottom: 0px;left:0px;right: 1px;overflow-y:auto;}
.ent_footer{bottom:0px;height:2.6em;}
/* Additional stylings for CSS footers */
.static_footer{position: static;}
.ent_footer #main-host,
.static_footer #main-host {
    display: flex;
    align-items: center;
}
.static_footer #main-host > *,
.ent_footer #main-host > * {
    padding: 0 0.25rem;
}
.ent_footer #main-host {
    justify-content: start;
}
.static_footer #main-host {
    justify-content: center;
}


.ent_wrapper.editor fieldset > div{
    display: table;
    padding-top: 0.5em;
}
.ent_wrapper.editor .text{
    margin: 2px 0px;
    padding: 3px;    
}
.ent_wrapper.editor .text.grayed,
.ent_wrapper.editor .sel_link2.grayed, 
.ent_wrapper.editor .link-div.grayed, 
.ent_wrapper.editor .ui-selectmenu-button.grayed{
    background: rgb(233 233 233) !important;
}
.ent_wrapper.editor .heurist-helper1{
    font-style: normal;
    font-size: 10px;
    font-weight: normal;
    padding-top: 0.1em;    
}
.ent_wrapper.editor .separator{
    text-transform: uppercase;
    margin-top: 5px;
    padding-top: 10px;    
}


.div-result-list-toolbar{
    padding:0px;
    /*padding:0.2em 0.5em*/
}
/*
.ent_editor{position:absolute; top:0;bottom:0;left:1px;right:1px;font-size:0.9em;overflow:auto;
    display:none;background-color:green} 
*/
.center-message{
    width: 100%;
    text-align: center;
    margin: 20% auto;    
}


/*
.ent_help_buttons{
    position:absolute; 
    top:0.2em;right:1em;
}
*/
.ent_select_multi{
    /*width: 270px;*/
    position: absolute;
    right: 11px;
    top: 0px;    
    text-align:right;
}
.dialog-title-button{
    position:absolute;
    top: 50%;
    margin: -10px 0px 0px 0px;
    padding: 1px;
    height: 20px;
    width: 20px;
}

.semitransparent{
    /*background-color: rgba(150, 150, 150, 0.6);*/
    background:-moz-linear-gradient(top , rgba(150, 150, 150, 0.2), rgba(150, 150, 150, 0.5)) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, left top, left bottom, from(rgba(150, 150, 150, 0.2)), to(rgba(150, 150, 150, 0.5)));
}

/* reports in import terms,csv */
.tbmain th
{
    border-left: 1px solid lightgray;
    border-bottom: none;
    padding:2px;
}                           
.tbmain td
{
    border-left: 1px solid lightgray;
    padding:2px;
}
.tbmain
{
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: 1px solid gray;
    font-size: 1em;
}        
.rt_arrow{
    display: inline-block;
    vertical-align: middle;
    padding:0 0.5em;
}
.id_fieldname{
   font-size: 0.9em;
   font-style:italic;
   font-weight: normal;
   color:brown;
   padding-left:2em;
}
.rename{
    cursor: pointer;
}
 
/* for popup on map for renderRecordData.php */
#recID {
    float: right;
}
.detailType {
    width: 100px;
    display: table-cell;
    color: #999999;
    vertical-align: top;
    padding: 0px 10px 0px 0px;
    text-align: right;
    text-transform: none;
}
.detail a, .detail {
    word-wrap: break-word;
    /*white-space: nowrap;*/
    word-break: break-word;
    min-width: 300px;
    max-width: 300px;
/*
    overflow: hidden;
    text-overflow: ellipsis;
*/    
}
.detail {
    display: table-cell;
    padding-right: 5px;
    text-transform: none;
    color: #333;
}

.map_popup{
    display:table;
    width:100%;
    border-spacing: 0px 5px;
}
.map_popup .detailType{
    line-height:14px;
    font-style:italic;
}
.map_popup .detail, .map_popup .detail > a{
    max-width: 250px;
    min-width: 250px;
    line-height: 16px;
    vertical-align:top;    
}
.detailRowHeader{
    padding: 5px 0px 5px 0px;
    width: 100%;
    border-top: 1px solid #7D9AAA;
    font-size: 1em;
    overflow: visible;
    text-align: left;
    color: #7D9AAA;
    text-transform: uppercase;    
}
.thumbnail{
    margin-left: 80px;
}
/*end for map popup*/


.span_for_radio{
    display: inline-block;
    vertical-align: middle;
}

.ui-iconalign { display: inline-block; vertical-align: text-bottom; padding-right:1em }


.ui-icon-gear-crossed{ 
    background-image: url(hclient/assets/gear_crossed.png) !important; 
    width: 25px;
    height: 24px;
}

.ui-icon-eye-open { 
    background-image: url(hclient/assets/eye.svg) !important; 
    width: 18px;
    height: 18px;
    background-size: contain;
}

.ui-icon-eye-crossed { 
    background-image: url(hclient/assets/eye_crossed.svg) !important; 
    width: 18px;
    height: 18px;
    background-size: contain;
}

.ui-icon-eye-explore {
    background-image: url(hclient/assets/eye_explore.svg) !important; 
    width: 18px;
    height: 18px;
    background-size: contain;
}

.ui-icon-date-range { 
    background-image: url(hclient/assets/date_range.svg) !important; 
    width: 18px;
    height: 18px;
    background-size: contain;
}

.ui-icon-clear-formatting { 
    background-image: url(hclient/assets/clear_formatting.svg) !important; 
    width: 18px;
    height: 18px;
    background-size: contain;
}

.ui-icon-opacity { 
    background-image: url(hclient/assets/opacity.svg) !important; 
    width: 18px;
    height: 18px;
    background-size: contain;
}

.ui-icon-network{
    background-image: url(hclient/assets/network.svg) !important; 
    width: 18px;
    height: 18px;
    background-size: contain;
}

.ui-icon-aa { 
    background-image: url(hclient/assets/Aa.png) !important; 
    width: 18px;
    height: 18px;
}

/* for faceted search wizard */
.ui-icon-input-slider { 
    background-image: url(hclient/assets/input_slider.png) !important; 
    width: 18px;
    height: 18px;
}

.ui-icon-input-dropdown { 
    background-image: url(hclient/assets/input_dropdown.png) !important; 
    width: 18px;
    height: 18px;
}

.ui-icon-list-column { 
    background-image: url(hclient/assets/list_column.png) !important; 
    width: 18px;
    height: 18px;
}

.ui-icon-list-inline { 
    background-image: url(hclient/assets/list_inline.png) !important; 
    width: 18px;
    height: 18px;
}

.ui-icon-up-down { 
    background-image: url(hclient/assets/up-down-arrow.png) !important; 
    width: 24px;
    height: 24px;
}

.ui-icon-iiif { 
    background-image: url(hclient/assets/iiif_logo.png) !important; 
    width: 18px;
    height: 18px;
    background-size: contain;
    filter: grayscale(100%);
}

.ui-icon-mirador { 
    background-image: url(hclient/assets/mirador_logo.png) !important; 
    width: 18px;
    height: 18px;
    background-size: contain;
}


.tooltip-inner{
    /*background:black;
    color:white;*/
    text-align:center;
}

div.coverall-div, div.coverall-div-bare 
{
    position: absolute;
    left:0px;
    top: 0px;
    height:100%;
    width:100%;
    border: 0;
    padding: 0px;
    margin: 0px;
}
div.coverall-div {
    background-color: rgb(0, 0, 0);
    opacity: 0.6;
    /*filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);*/
    background-image: url(hclient/assets/loading-animation-white.gif);
    background-repeat: no-repeat;
    background-position: center;     
    cursor:wait;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}
    
/* classes taken from expernation design*/
.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px;
    margin:0px 4px;
    /*7px; font-size: 12px;
    font-weight: bold;*/
    color: white;
    line-height: 1;
    vertical-align: baseline;
    white-space: nowrap;
    text-align: center;
    background-color: #999999;
    border-radius: 10px;
}
.bor-toggler{
    text-align:left;
    cursor:pointer;
    color: #999999;
    padding-top:6px;
    padding-left:5px;
}
.bor-toggler > span >span{
    display:inline-block;
}
.bor-toggler-second-arrow{
    display:none !important;
}
.bor-toggler > span > .ui-icon{
    vertical-align:sub;  
} 

label.small-header{
    min-width: 80px;
    display: inline-block;
    text-align: right;
    padding-right: 0.4em;
}

.resultList-helper{
    position: absolute;
    bottom: -24px;
    font-style: italic;
    font-size: 0.9em;
    left: 14px;
}
option {padding-left:15px;}

.ui-state-error{
    color:red;
    font-weight: bold;
    opacity: 1;
}

.recordList > .table_header{
    height: 1.5em;
    font-size: 0.9em;
    font-weight: bold;
    width: 100%;
    position: absolute;    
    background: #D8D8DA;
}
.recordList > .table_header > div{
    border-right: 1px solid gray;
    display: inline-block;
    padding:2px;
    /*
    height: 1.5em;
    display: table-cell;
    padding-left:4px;
    */
}

/* always visible */
.list div.recordDiv > .user-list, .list div.recordDiv > .user-list-member {
    display:block;
}

/*  rounded gray element to edit user role/membership see manageSysUsers, manageSysGroups */
.user-list > div, .user-list-member > div{
    display:inline-block;
}
.user-list-edit{
    border-radius:8px;
    color:white;
    background-color:gray;
    cursor:pointer;
    text-align:center;
}
.list .user-list-count{
     position: absolute;
     top: 4px;
     width:40px;
     right: 180px;
     height: 16px;
}
.list .user-list-edit{
     position: absolute;
     top: 4px;
     right: 145px;
     height: 16px;
}
.list .user-list-member{
     right: 70px !important;
     background:none;
}
.list .user-list-member label,
.icons .user-list-count,
.thumbs .user-list-count,
.thumbs3 .user-list-count
{
     display:none;
}

.icons .user-list-edit, 
.thumbs .user-list-edit, 
.thumbs3 .user-list-edit
{
    position: absolute;
    bottom: 2px;
    height: 16px;
    right: 2px !important;
    max-width:120px;
    font-size:10px;
}
/* 2025-04-04
A:link {
    text-decoration: underline;
}
A:hover {
    text-decoration: underline;
}
*/
a.bare {
    color: black;
    text-decoration: none;
}
a.link2 {
    color: blue;
    text-decoration: underline;
}


body.popup {
    padding: 10px;
    background-color:white;
    font-size: 11px;
}
.banner, body.popup #page-inner {
    padding: 6px;
}
body.popup table{
    font-size:11px;   
}
/*
body.popup A:link {
    color: #6A7C99;    
}
*/
/* h3 styles */
body.popup h3 {
    color: #DC8501;
    font-size: 12px;    
    height: auto;
    padding-bottom: 10px;
    padding-top: 10px;
    margin: 10px 0px 0px 0px;
}
.separator_row {
    height: 1px;
    border-bottom: 1px solid #A4B4CB;
}
.dotted-link { border-bottom: 1px dotted #6A7C99;}

.yellow_star{
    background-image: url(hclient/assets/star-yellow.png);
    display:block;
    height:14px;
}

.h3button {
    text-transform: uppercase !important;
    display: inline-block !important;
    color: #666;
    cursor: pointer !important;
    border: 1px solid RGBA(0,0,0,0.2) !important;
    padding: 0 3px;
    height: 20px !important;
    line-height: 19px !important;
    font-weight: bold !important;
    font-family: Arial,helvetica,clean,sans-serif;
}

input[type="file"] {
    background: transparent !important;
    border-color:RGBA(255,255,255,0);
    color:#6A7C99;
    border:1px solid rgba(0, 0, 0, 0.2) !important;
    font-size: 0.9em;
    padding: 4px !important;
}

.mce-path{
    display:none !important;   
}

.ui-map-document { background-image: url('hclient/assets/mapdocument.png') !important;}
.ui-map-layer { background-image: url('hclient/assets/maplayer.png') !important;}

/* bih red opem layout pane button */
.prominent-cardinal-toggler{
    background: none !important; 
    color: black;
}
.prominent-cardinal-toggler div.ui-icon{
    font-size:32px;
    width:32px;
    height:32px;
}

.tree-accordeon-header{
    background:transparent !important;
    border: none !important;
    font-weight:bold !important;
    padding-bottom: 0 !important;
    padding-left: 8px !important;
}

.tree-accordeon-header > .ui-accordion-header-icon{
    left: 0px !important;
    margin-top: -4px !important;
}

/*  UI BASE THEME FIX */
.ui-accordion .ui-accordion-content {
    padding: 0.1em;
}
.ui-menu{
    z-index: 199 !important;
}

.ui-button .ui-button-text {
    line-height: 1em;
}
.ui-selectmenu-button span.ui-selectmenu-text{
    padding: 0.1em 1em 0.2em 0.2em;
}
.ui-front{
    z-index: 59999; /*999999;*/
}
.ui-tabs-panel {
    overflow: auto;
    clear:both;
    /*position: absolute;
    top: 46px;
    bottom: 2px;*/
    padding: 0px !important;
}

.ui-tabs{
    padding: 0px;
}
.ui-tabs .ui-tabs-nav{
    padding: 0px;
    border: none;
}
.ui-tabs .ui-tabs-nav li a {
    font-size: 1.2em;
    font-weight: bold;
    outline: none;
    /*padding: 5px 10px 9px 10px !important;*/
    /*was padding: 0.2em 0.5em !important; */
}

.ui-resizable-resizing {
    z-index: 99999 !important;
}

.ui-dialog .ui-dialog-buttonpane{
    margin-top:0.1em;
}

.ui-menu-item  > div{  /*heurist*/
    font-weight: normal;
    line-height: 1.5;
    min-height: 0px;
    padding: 2px 0.4em;
} 
.ui-menu .ui-menu-item{
    position: relative;
    min-height: 0;    
}
.ui-menu .ui-menu-item a { /*heurist*/
    display: block;
    /* padding: 3px 1em 3px .4em; */
    font-weight: normal;
    line-height: 1.5;
    min-height: 0px;
    padding: 2px 1em;
    text-decoration: none;
}
.ui-menu .ui-menu-divider { /*heurist*/
    height: 1px;
    margin: 5px -2px;    
}
.ui-menu .ui-menu-search {
    margin: 1px;
    position: relative;
    min-height: 0;
}
.ui-accordion .ui-accordion-header {
    padding: .5em .5em .5em 2.2em;
}
.ui-accordion-header{
    outline: none;
}

.ui-resizable-w {
    left: 0px; /* was -5px */
}

/* chrome, safari - size of scrollbar  todo: MOVE to theme!!!! */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #bac4cb;
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);*/
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(142,169,185,0.4); 
}
/* tab control for edit form */
.edit-form-tabs{
    margin-bottom:4px;
}
.edit-form-tabs .ui-tabs-panel{
    padding-bottom: 10px !important;    
}
.edit-form-tabs li.ui-tabs-active{
    background: #ECF1FB; /* !important */
}
li.edit-form-tab {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;    
}
li.edit-form-tab > a{
    width: 30ex;
    max-width: 30ex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*   */
.ui-tabs-paging-next { 
    float: right !important;
}
.ui-tabs-paging-prev,
.ui-tabs-paging-next {
    background: transparent !important;
    border: 0 !important;
    margin-bottom: 1px !important;
}
.ui-tabs-paging-prev a,
.ui-tabs-paging-next a {
    display: block; 
    position: relative; 
    top: 1px; 
    border: 0;
    z-index: 2; 
    padding: 0px;
    /* color: #444; */ 
    text-decoration: none;
    background: transparent !important; 
    cursor: pointer;
}
.ui-tabs-paging-next a:hover,
.ui-tabs-paging-next a:focus,
.ui-tabs-paging-next a:active,
.ui-tabs-paging-prev a:hover,
.ui-tabs-paging-prev a:focus,
.ui-tabs-paging-prev a:active { 
    background: transparent; 
}
.ui-tabs-paging-disabled {
    visibility: hidden;
}

.ui-drag-drop{
    border: 2px solid blue !important;
}

.tox-tinymce-aux {
    z-index: 999999!important;
}

.fake_link {
    color: blue !important;

    text-decoration: underline;

    cursor: pointer;
}

/* Configure CMS widgets popup/elements */
.cms-widget-config i.help-text,
.cms-widget-config i.help-text-block{
    display: inline-block;

    line-height: 12px;
    padding-left: 5px;
}
.cms-widget-config i.help-text-block{
    display: block;

    padding-left: 0px;
    padding-bottom: 5px;
}

.cms-widget-config .header{
    font-size: 10px !important;

    width: 115px !important;
    min-width: 115px !important;

    text-align: right;
}
.cms-widget-config .header.header_narrow{
    width: 100px !important;
    min-width: 100px !important;
}
.cms-widget-config .header.header_wide{
    width: 135px !important;
    min-width: 135px !important;
}

/* widget config tabs */
.cms-widget-config .ui-tabs-nav li a{
    font-size: 1em;
    font-weight: normal;

    padding: 5px !important;
}
.cms-widget-config .ui-tabs-nav li.ui-state-disabled{
    display: none;
}

.cms-widget-config .ui-tabs-panel select:not(.truncate){
    width: auto;
    max-width: 240px;
    min-width: unset;
}

.cms-widget-config .ui-tabs-panel .ui-selectmenu-button,
.cms-widget-config .ui-tabs-panel select.truncate{
    font-size: 1em !important;
    width: 240px !important;
}

.input-with-invisible-text{color:transparent !important;}
.input-with-invisible-text::selection {background: transparent;}
.input-with-invisible-text::-moz-selection {background: transparent;}


.table {
    display: table;
    width: 100%;
}
.t-row {
    display: table-row;
}
.cell {
    display: table-cell;
    padding: 8px;
}