/* ---- CSS BROUGHT FROM OTHER CSS FILES FOR MODIFICATION --------



/*ORIGIN: multipurpose_business_theme/css/base.css*/

/*this was edited to reduce space between form items*/
.form-item,
.form-actions {
    /*old values
    margin-top: 1em;
    margin-bottom: 1em;*/
    
    margin-top: 5px;
    margin-bottom: 5px;
}






/*------------ MOOD NEW CSS -----------------------------------

/*MOOD USER ACCOUNT BUTTONS*/
.mood_useraccountbutton {
    font-size:0.65em;
    background: inherit;
    border: 1px solid #C7C7C7;
    border-radius: 5px;
    padding: 3px;
    margin-left: 5px;
    /*max-height: 15px;*/
}

.mood_useraccountbutton:hover {
    background-color: Cornsilk;
    cursor: pointer;
}

.mood_userloginbutton {
    font-size:0.65em;
    background: inherit;
    border: 2px solid LightSalmon;
    border-radius: 5px;
    padding: 3px;
    margin-left: 5px;
    /*max-height: 15px;*/
}

.mood_userloginbutton:hover {
    background-color: Cornsilk;
    cursor: pointer;
}


/*MOOD CSS FOR INLINE FORM ELEMENT DISPLAY TO DISPLAY ELEMENTS HORIZONTALLY*/

/*Inline items with normal font*/
.mood-forminline {
  display: inline-block;
  vertical-align: top;
  padding-right: 10px;
  /*padding-bottom: 5px;*/ /*public_html value*/
}

/*Inline items with smaller font*/
.mood_inlinesmall {
    display: inline-block;
    border-radius: 5px;
    font-size: 0.8em;
    vertical-align: top;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}

/*Hide form element from display*/
.mood_hideelement {
    display: none;
}

/*Show hidden form element using its default display property*/
.mood_showelement {
    display: initial;
}


/*MOOD CENTER IMAGE */

.mood-centerimage {
  display: block;
  margin-left:auto;
  margin-right:auto;
}

/*MOOD THUMBNAIL IMAGE WITH ENLARGE ON HOVER */

.mood-thumbnail {
  width: 100px;
  height: auto;
  
  display:block;
  z-index:999;
  cursor: pointer;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
}

.mood-thumbnail:hover {
    position:relative;
    border-radius: 2px;
    transform: scale(4);
}

/*---NEW MOOD STYLES -------

/*MOOD CHANGE BACKGROUND COLORS OF SPECIFIC FORMS*/
.moodbg_light_blue {
    background-color: AliceBlue;
}

.moodbg_light_purple {
    background-color: LavenderBlush;
}

.moodbg_golden {
    background-color: Beige;
}

/*MOOD CURSOR STYLES */

.mood_cursor_pointer:hover {
  cursor:pointer;
}



/*MOOD FONT STYLING */

.mood_font_bold {
    font-weight: bold;
}

.mood_font_italic {
    font-style: italic;
}

.mood_font_bolditalic {
    font-weight: bold;
    font-style: italic;
}

.mood_font_underline {
    text-decoration: underline;
}

.mood_font_strikethrough {
    text-decoration: line-through;
}

.mood_font_overline {
    text-decoration: overline;
}

.mood_font_under_overline {
    text-decoration: underline overline;
}


/*MOOD STYLING SELECT BOXES */
.mood_selectbox_medium8em {
    /*border: 1px solid DarkGray;*/
    border-radius: 4px;
    font-size: 0.8em;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-left: 5px;
}

.mood_datebox_medium8em {
    border: 1px solid DarkGray;
    border-radius: 4px;
    font-size: 0.8em;
    margin-left: 5px;
}



/*MOOD STYLING HR LINE */

.mood_hrline {
  border: 1px solid white;
}

/*MOOD STYLING SELECT BOXES */
.mood_selectbox_medium8em {
    /*border: 1px solid DarkGray;*/
    border-radius: 4px;
    font-size: 0.8em;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-left: 5px;
}

.mood_datebox_medium8em {
    border: 1px solid DarkGray;
    border-radius: 4px;
    font-size: 0.8em;
    margin-left: 5px;
}


/* ........... SYSTEM: PROJECTS HEADER STYLING xxxxxxx ............. */


/*HEADER: PROJECTS LIST SELECTION */

/*Main container for all project header items*/
.mood_projhead_maincontainer {
    display: flex;
    flex-flow: column;
    border:1px solid white;
    border-radius: 5px;
    margin: 1px;
    padding:1px;
}

/*Selection list for projects*/
.mood_projhead_projlistcontainer {
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
    align-items: baseline;
    /*border-bottom: 1px solid PowderBlue;*/
    margin: 1px;
    padding: 1px;
}


/*PROJECT TITLE FOR PAGE HEADER */
.mood_projclientinfo {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  /*align-items: left;*/
  margin: 1px;
  padding: 1px;
}

/*Container for Client logo and Project Logo on header*/
.mood_projlogogroup {
  display: flex;
  flex-flow: row;
  justify-content:flex-start;
  align-items: center;
  margin: 1px;
  padding: 1px;
}

/*Header: Project title Group*/
.mood_projtitlegroup {
    display: flex;
    flex-flow: column;
    justify-content:flex-start;
    /*align-items: left;*/
    flex-grow: 1;
    margin: 1px;
    padding: 1px;
}

/*Header: Project title*/
.mood_projtitledisplay {
    display: flex;
    flex-flow: row;
    justify-content:flex-start;
    flex-grow: 1;
    margin: 5px 1px;
    padding: 1px;
    border-top: none;
    border-top: 1px solid LightGray;
    border-bottom: 1px solid LightGray;
}

.mood_projcompanyname {
  font-size: 0.7em;
  font-weight: bold;
}

.mood_projcompanylogo {
    display: block;
    max-height: 100px;
    width: auto;
    height: auto;
    margin-right: 5px;
}

.mood_projpartnerlogo {
    display: block;
    max-height: 25px;
    width: auto;
    height: auto;
    margin-right: 10px;
}

.mood_projecttitle {
  font-size: 1.5em;
  color: green;
}

.mood_projdescription {
  font-size: 0.7em;
  font-style: italic;
}

.mood_projmoredescriptionbtn {
    font-size: 0.7em;
    font-style: italic;
    color: blue;
    padding: 1px;
    margin: none;
    background-color: inherit;
    border: none;
}


/*MOOD FLEX LAYOUT STYLING FOR CONTAINER */
.mood_flextopcontainer {
  display: flex;
  flex-flow: row wrap;
  background: deepskyblue;
  padding-left: 10px;
  padding-right: 10px;
  height: fit-content;
}

.mood_flextopitems {
    display: flex;
    vertical-align: top;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    margin: 0px;
    border: 0px solid blue;
    height: fit-content;
}


/*MOOD CONTAINER FOR PACKAGES, MODULES, AND SECTIONS */
.mood_modulescontainer {
    font-size:0.8em;
    border: 1px solid White;
    /*border: 1px solid LightSkyBlue;*/
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: PowderBlue;
    /*background-color: LightSkyBlue;*/
}

/*MOOD PANE CONTAINER STYLING */
.mood_panecontainer {
    display: flex;
    /*flex-flow: row wrap;*/
    flex-flow: row;
    flex-grow: 1;
    /*border: 1px solid red;*/
    margin-top: 10px;
    min-width: 200px;
    min-height: 200px;
}


/*MOOD LEFT PANE SIZING AND STYLING */
.mood_showfullleftpane {
    display: flex;
    flex-flow: column;
    /*position: relative;*/
    /*min-width: 250px;*/
    
    min-width: 150px;
    max-width: 250px;
    /*width: 250px;*/
    min-height: 200px;
    max-height: 100vh;
    /*border: 1px solid green;*/
    border-radius: 5px;
    padding-left: 2px;
    padding-right: 10px;
    padding-bottom: 10px;
    text-align: left;
}

.mood_showsmalleftpane {
    display: flex;
    flex-flow: column;
    max-width: 100px;
    min-height: 200px;
    max-height: 100vh;
    border-radius: 5px;
    padding-left: 2px;
    padding-right: 10px;
    padding-bottom: 10px;
    text-align: left;
}

/*LEFT PANE SHOW OR HIDE CONTAINER */
.mood_leftpaneshowhidecontainer {
    display: flex;
    flex-flow: row nowrap;
}

.mood_leftpaneshowhide {
    max-width: 25px;
    /*color: green;*/
    /*font-size:0.9em;*/
    font-weight: bold;
    border: 1px solid LightGray;
    border-radius: 5px;
    padding-left: 2px;
    padding-right: 2px;
    margin-right: 5px;
    max-height: 28px;
    background-color: inherit;
}

.mood_leftpaneshowhide:hover {
    background-color: Cornsilk;
    cursor: pointer;
}

/*MOOD SEARCH BOX FEATURES */
.mood_searchbox {
    font-size:0.65em;
    width:100%;
    max-height: 30px;
    border-radius: 5px;
}


/*MOOD CONTROL BUTTONS FOR NEXT AND PREVIOUS ITEMS */
.mood_controlbuttons {
    border: none;
    align-items: center;
    padding: 2px 4px;
    background-color: inherit;
    border-radius: 5px;
    /*font-size:0.8em;
    height: 25px;
    justify-content: center;
    margin-left: 5px;
    margin-right: 5px;*/
}

.mood_controlbuttons:hover {
    cursor: pointer;
    background-color: PeachPuff;
}


/*MOOD MAINPANE ROW SERIAL NUMBER FORMAT*/
/*Serial No form elements which can be clicked to drill to next submenu*/
.mood_mainpaneserialno {
    border: none;
    field-sizing: content;
    background-color: inherit;
    border-radius: 3px;
}

.mood_mainpaneserialno:hover {
    cursor: pointer;
    color: blue;
    background-color: Cornsilk;
    border: 1px solid Lavender;
}

/*Serial No form elements which do not have next submenu*/
.mood_mainpane_nodrill_sn {
    border: none;
    field-sizing: content;
    background-color: inherit;
    border-radius: 3px;
}

.mood_mainpane_nodrill_sn:hover {
    background-color: Cornsilk;
    border: 1px solid Lavender;
}


/*MOOD TEXT BUTTONS (GREEN BG) FOR ADD, SAVE, PRINT, ETC */
.mood_textbuttongreen {
    /*width: calc(100%);*/
    field-sizing: content;
    border: none;
    background: #3CB371;
    border-radius: 8px;
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
    padding: 5px 10px;
    font-size: 0.8em;
    margin-right: 10px;
}

.mood_textbuttongreen:hover {
    cursor: pointer;
    background: #ffa431;
    background-image: -webkit-linear-gradient(top, #ffab40 0%, #ff9b1c 100%);
    background-image: -o-linear-gradient(top, #ffab40 0%, #ff9b1c 100%);
    background-image: linear-gradient(to bottom, #ffab40 0%, #ff9b1c 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffab40', endColorstr='#ffff9b1c', GradientType=0);
    color: white;
    outline: none;
}

/*MOOD BUTTONS FOR ADD, SAVE, PRINT, ETC */
.mood_actionbuttons {
    /*border-color: rgba(0, 0, 0, 0.1);*/
    border-color: white;
    background: #3CB371;
    border-radius: 8px;
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
    padding: 5px 10px;
    font-size: 0.8em;
    margin-right: 10px;
    
    /*border: none;
    align-items: center;
    padding: 2px 4px;
    background-color: inherit;
    font-size:0.8em;
    height: 25px;
    justify-content: center;
    margin-left: 5px;
    margin-right: 5px;*/
}

.mood_actionbuttons:hover {
    border-color: white;
    background: #ffa431;
    background-image: -webkit-linear-gradient(top, #ffab40 0%, #ff9b1c 100%);
    background-image: -o-linear-gradient(top, #ffab40 0%, #ff9b1c 100%);
    background-image: linear-gradient(to bottom, #ffab40 0%, #ff9b1c 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffab40', endColorstr='#ffff9b1c', GradientType=0);
    color: white;
    outline: none;
    
    /*cursor: pointer;
    background-color: #ffa431;*/
}


/*MOOD LEFT PANE SIZING AND STYLING */
.mood_itemlistpane {
    /*height: 70vh;*/
    /*width: 100%;*/
    min-width: 100px;
    /*max-width: 300px;*/
    min-height: 200px;
    /*max-height: 80vh;*/
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    text-align: left;
    overflow-y: auto;
    
    /*border-radius: 5px;
    border: 1px solid #ccc;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    background-color: AliceBlue;
    max-height: 500px;*/
}




/*FORMAT Listed Items in Leftpane. i.e. the TextAreas */
.mood_leftpaneitemlist {
  font-size: 0.8em;
  vertical-align: middle;
  width: 100%;
  resize: vertical; /* Allows only vertical resizing */
  border: 2px solid LightGray;
  /*border: 2px solid SkyBlue;*/
  border-radius: 8px;
  background-color: transparent;
  padding: 5px 10px;
  cursor: pointer;
  margin: none;
  overflow: hidden;
  
  /*
  min-height: 50px;
  margin-bottom: 5px;
  
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  background: #3CB371;
  border-radius: 8px;
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  font-size: 0.8em;*/
}

.mood_leftpaneitemlist:hover {
    background-color: Cornsilk;
}

.mood_leftpaneitemlist:active {
    background-color: yellow;
}


/*MOOD MAIN DISPLAY PANE SIZING AND STYLING */
.mood_mainpane {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    min-width: 200px;
    min-height: 200px;
    max-height: 105vh; /*was 90vh*/
    
    /*position: relative; */
}

/*MOOD CONTROLS ON TOP OF MAIN DISPLAY AREAS*/
.mood_mainpaneviewcontrols {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    flex-grow: 0; /*do not expand to length */
    background-color: White;
    margin-bottom: 5px;
    /*margin: 2px 5px;2px top bottom, 5px left right*/
    padding-left: 10px;
    /*border-bottom: 1px solid LightGray;*/
}


/*MAIN PANE GROUP OF 'Show Rows', 'Sort by', 'Show Deleted', etc*/
.mood_mpeditcontrols {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    flex-grow: 0; /*do not expand to length */
    background-color: White;
    margin-bottom: 5px;
    padding-left: 10px;
}


/*MOOD SYS: MAIN PANE BUTTONS OF REPORT AND EDIT*/
.mood_mainviewcontrols {
    width: 100px;
    /*color: green;*/
    font-size:0.65em;
    border: 2px solid LightGray;
    border-radius: 5px;
    margin-right: 5px;
    max-height: 25px;
}

.mood_mainviewcontrols:hover {
    background-color: Cornsilk;
    cursor: pointer;
}

.mood_mainviewcontrols:active {
    background-color: yellow;
}

/*MOOD SUB-MENU CONTROLS ON TOP OF MAIN DISPLAY AREAS*/

.mood_mainpanesubmenucontainer {
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 0; /*do not expand to length */
    flex-shrink: 0; /*do not shrink the elements */
    background-color: White;
    margin-bottom: 5px;
    padding-left: 10px;
    border-top: 1px solid LightGray;
    border-bottom: 1px solid LightGray;
    /*border: 1px solid LightGray;
    box-shadow: 0 0 3px rgba(0,0,0,0.8);*/
    overflow-x: auto; /* Adds horizontal scrollbar when content overflows */
    overflow-y: hidden; /* Hides vertical scrollbar */
}

/*MAIN PANE SUB-MENU item properties i.e.  for each form element*/
.mood_headersubmenuitems {
    width: auto;
    max-width: 200px;
    font-size:0.65em;
    border: 1px solid LightGray;
    border-radius: 3px;
    /*margin-right: 5px;*/
    height: 30px;
}

.mood_headersubmenuitems:hover {
    background-color: Cornsilk;
    cursor: pointer;
}

.mood_headersubmenuitems:active {
    background-color: yellow;
}



/*MOOD MAINPANE HEADER: SELECTED RECORD TITLE CONTAINER*/
/*To display title of selections made by user i.e. section, leftpane items, submenu, etc*/
.mood_mp_disptitlecontainer {
    display: flex;
    flex-flow: column wrap;
    flex-grow: 0; /*do not expand to length */
    margin-bottom: 5px;
    padding-left: 10px;
}


/*MOOD CONTROLS OF PREV NEXT FOR MAIN PANE DISPLAY*/
.mood_mpscrollbuttons {
    display: flex;
    flex-flow: row nowrap;
    /*align-items: center;*/
    flex-grow: 0; /*do not expand to length */
    background-color: White;
    margin-bottom: 5px;
    padding-left: 10px;
}

/*MOOD BUTTONS USED FOR RECORD SERIAL NUMBERS (SN)*/
.mood_mainpane_snbuttons {
    border: none;
    background-color: transparent;
}


/*MOOD REPORTS AND DATA EDIT DISPLAY IN MAIN PANE */
.mood_mainpanedisplay {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    
    background-color: White;
    border: 1px solid LightGray;
    /*border: 1px solid #ccc;*/
    border-radius: 4px;
    /*box-shadow: 0 0 6px rgba(0,0,0,0.8);*/
    min-width: 200px;
    min-height: 200px;
    /*max-height: 80vh;*/
    /*max-height: 600px;*/
    padding-left: 10px;
    padding-bottom: 10px;
    text-align: left;
    overflow-x: auto;
    overflow-y: auto;
    
    /*padding-right: 10px;
    max-width: 1000px;*/
}

/*Data Edit boxes within the mainpane data container*/
.mood_mpedittableitems {
    border: none;
    /*border: 1px solid Gainsboro;*/
    border-radius: 3px;
}


/*MOOD BUTTONS AT BOTTOM OF MAIN PANE 
i.e. Add Rows, Save Changes, Export, etc*/
.mood_mainpanebuttons {
    display: flex;
    flex-flow: row wrap;
    flex-grow: 0; /*do not expand to length */
    margin-left: 10px;
    margin-top: 10px;
}


/*ADJUST SCREEN RESIZING DEPENDING ON SCREEN SIZE OR USER RESIZES SCREEN*/
/*resize to allow row wrap when below 1200px*/
@media (max-width: 1200px){
    /*allow header info to wrap and center logo and project details*/
    .mood_projclientinfo {
      flex-flow: row wrap;
      justify-content: center;
    }
    
    .mood_projtitledisplay {
        text-align: center;
    }

    /*allow main container to wrap*/
    .mood_panecontainer {
        flex-flow: row wrap;
        justify-content: center;
    }
    
    /*resize leftpane container to 100%*/
    .mood_leftpane {
        width: 100%;
        text-align: center;
    }
    
    .mood_itemlistpane {
        height: 20vh;
        width: 100%;
        max-height: 300px;
    }
}






/*TABLE MODIFICATIONS by MOOD*/

table{
    width:100%;
    /*width:auto; this affected many items which were filling in spaces. Tables can be set individually using attribute: '#attributes' => ['style' => 'width:auto;']*/
    margin:0 0 10px;
}

caption{
    text-align:left;
    font-size: 0.6em;
    font-style: italic;
}

th{
    font-weight:bold;
    text-align:left;
    padding:5px 5px;
    
    border-top:1px solid gray; 
    border-bottom:1px solid gray; 
}

thead th{
    background:#f5f5f2;
    border:solid #bfbfba;
    border-width:1px 0;
    /*color:#333;*/
    text-transform:none;
    
    /*these are to be checked with BID tool report if it works well */
    font-size: 0.8em;
    color:green; 
    border-top: 1px solid gray;
    border-bottom:1px solid gray;
    border-right:1px solid WhiteSmoke;
    background-color:Lavender;
    /*make table header sticky. This replaces the drupals table property of #sticky*/
    position: sticky;
    top: 0;
    z-index: 10;
}

tr{
    /*border-bottom:1px solid #e6e4df;*/
    padding:0.1em 0.6em;
    border-bottom:1px solid LightGray; 
}
thead>
tr{
    border-bottom:1px solid #000;
}

tbody tr:hover,tbody tr:focus{
    background:#f7fcff
}

tbody tr:focus-within {
  background:GhostWhite
}

tbody tr.color-warning:hover,tbody tr.color-warning:focus{
    background:#fdf8ed
}

tbody tr.color-error:hover,tbody tr.color-error:focus{
    background:#fcf4f2
}

td,th{
    vertical-align:middle
}

td{
    padding:5px 5px;
    text-align:left;
    /*font-size: 18px;*/
    font-size: 0.9em;
    
    /*old values*/
    /*padding:10px 12px;
    text-align:left;
    font-size: 18px; */
}

th>a{
    position:relative;
    display:block
}

th>a:after{
    content:'';
    display:block;
    position:absolute;
    top:0;
    bottom:-10px;
    left:0;right:0;
    border-bottom:2px solid transparent;
    -webkit-transition:all 0.1s;
    transition:all 0.1s
}

th.is-active>a{
    color:#004875
}

th.is-active img{
    position:absolute;
    right:0;top:50%
}

th.is-active>a:after{
    border-bottom-color:#004875
}

th>a:hover,th>a:focus,th.is-active>a:hover,th.is-active>a:focus{
    color:#008ee6;
    text-decoration:none
}

th>a:hover:after,th>a:focus:after,th.is-active>a:hover:after,th.is-active>a:focus:after{
    border-bottom-color:#008ee6
}

td .item-list ul{
    margin:0
}

td.is-active{
    background:none
}

th.select-all{
    width:1px
}
.caption{
    margin-bottom:1.2em
}

@media screen and (max-width: 37.5em){
    th.priority-low,td.priority-low,th.priority-medium,td.priority-medium{
        display:none
    }
}

@media screen and (max-width: 60em){
    th.priority-low,td.priority-low{
        display:none
    }
} 


/*MOOD FONT SIZE OPTIONS
This should be put last in the CSS file to avoid being overridden by other settings*/

.mood_font05 {
  font-size: 0.5em;
}

.mood_font06 {
  font-size: 0.6em;
}

.mood_font07 {
  font-size: 0.7em;
}

.mood_font08 {
  font-size: 0.8em;
}

.mood_font09 {
  font-size: 0.9em;
}


/*Highlighting style for items selected by user. This style should be put at the end of this stylesheet so that its not overriden by styles put earlier in this file. This is due to execution order*/  
.mood_highlightitem {
    border: 2px solid SkyBlue;
    background-color: MintCream;
}

.mood_highlightbybolding {
    border: 2px solid SkyBlue;
    font-weight: bold;
    /*color: green; 
    background-color: HoneyDew;*/
}

/*partially highlight items. For use when system loads and user has not selected an item but there was a recall of previous selection from database*/
.mood_partialhighlightitem {
    border: 2px solid Plum;
}