/*
Custom CSS for the Thinkwise Universal GUI

Rename this file to custom.css. It will then get picked up by Universal, and it will not get overwritten when updating Universal in the future
*/
/* Hide the Options expand button at Login */
.card-options__login, .expand-button {

    display: none;

}

/* Add a background image */
.form__container {
  background-image: url('./background.JPG');
  background-position: TOP;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Hide the original logo */
.light .login__group--icon {
    display: none;
}

/* Display an alternative logo */
.light .login__group--icon-container {
    background: url('./INTERSHIP NAVIGATION - FINAL.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 100px;
    width: 450px;
    margin-bottom: 8px;
}

/* Hide the original title */
.light .login__group--title {
  display: none;
}


/* Display an alternative title */
.light .login__group--header::after {
  content: 'CMS Mobile App \ALogin';
  white-space: pre;
  font-weight: 500;
  font-size: 1.3125rem;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  padding-bottom: 9px;
  color: rgb(16,39,100);
  text-align: center;
}

/* Display a message 
.card-content__login::after {
  content: 'Maintenance is scheduled for Tuesday 27 September 2022 between 1000AM and 1300PM UTC(+3). \AThe application will not be available at the above mentioned time.
  content: '\A In case of any issue please clear Browser Cache.';';
  font-weight: 300;
  font-size: 0.9rem;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  color: #ba000d;
  display: inline-block;
  text-align: center;
} */

/* Section title */
.section-title .text {
    font-size:  1.5rem !important;
    font-weight: 600 !important;
    text-decoration-thickness: 2px;
}

/* Display the Maintenance message
.popup {
  position: absolute;
  top:1%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: red;
  color: white;
  padding: 10px 20px;
  z-index: 999999999999999999999999999999;
  opacity: 1;
  animation: fade-out 10s ease-in-out forwards;
}*/

.group-title {
    margin-top: 20px;
    margin-bottom: 0px;
}


.group-title .text {
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    color: rgb(16,39,100);
    /*text-decoration: underline;*/
    /*text-decoration-thickness: 2px;*/
}

    @media (hover: hover) {
    
        .MuiPaper-root .lookup-popup-button {
            visibility: hidden;
        }
    
        .MuiPaper-root:hover .lookup-popup-button {
            visibility: visible;
            opacity: 0%;
        }
    
        .form-field:hover .lookup-popup-button {
            visibility: visible;
            opacity: 100%;
        }
    
        .MuiPaper-root .edit-mode .lookup-popup-button {
            visibility: visible;
            opacity: 100%;
        }
    
    }

    /* move all sections up */
    [data-form="section"] { margin-top: -15px!important; }
        
    
    /* Compact grids - supported by all browsers*/
    .ag-root-wrapper { 
        height: 165.5%!important;
        width: 166.5%!important;
        transform: scale(0.6);
        transform-origin: left top;
    }
    
    .ag-overlay-no-rows-center { 
        font-size: 30px!important;
        color: rgb(16,39,100)!important;
    }
    
    /* header */
    .ag-root-wrapper .ag-header-cell-text { font-size: 18px; } 
    .ag-root-wrapper .ag-header-group-text { font-size: 18px; } 
    .ag-root-wrapper .group-title { font-size: 18px; } 
    

    /* cells */
    .ag-root-wrapper .ag-cell span { font-size: 20px; }
    
    /* edit mode */
    .ag-root-wrapper .MuiFormControl-root input { font-size: 18px; }
    
    /* fix gap between phone/emails fields */
    [data-testid="form-field__contact-tel__control"] .MuiFormControl-root { 
        margin-left: 4px; 
        width: 97.5%!important; 
    }

    [data-testid="form-field__contact-fax__control"] .MuiFormControl-root { 
        margin-left: 4px; 
        width: 97.5%!important; 
    }
    
    [data-testid="form-field__dms-file-count-2__control"] .MuiFormControl-root { 
        margin-left: 4px; 
        width: 97.5%!important; 
    }        



    @keyframes fade-out {
      0% {
        opacity: 1;
        z-index: 999999999999999999999999999999;
      }
      100% {
        opacity: 0;
        display: none;
        visibility: hidden;
        z-index: -1;
      }
    }

    /*Add border with white color*/
    .MuiPaper-root:
    {
        border-style: solid;
        border-width: 2px;
        border-color: rgb(255, 255, 255);
    }

    /*Add border with color during edit mode*/
    .MuiPaper-root:has(.input.edit-mode)
    {
        border-style: solid;
        border-width: 2px;
        border-color: rgb(237, 125, 49);
    }


    /* fix gap between phone/emails fields, family - next of kin - mobile*/
    [data-testid="form-field__kin-mobile__control"] .MuiFormControl-root
    {
        margin-right: 3px;
    }

    /* fix gap between phone/emails fields, family - next of kin - phone */
    [data-testid="form-field__kin-tel__control"] .MuiFormControl-root
    {
        margin-left: 3px;
    }

/*Deployment of 18 August*/

    /*Bigger font size for the bread crumbs*/
    .css-1k8bsjn
    {
        font-size: 15px;
    }	
	
    /* set grey fields with black font color characters*/
	/* Remove this if UAT is upgraded to the new SF platform*/
    .css-i1tedj 
    {
        color: black !important;
    }
    .css-1f3dkog    
    {
        color: black !important;
    } 
	
    /* dark mode group labels */   
    .dark .group-title .text
    {
        color: white;
    }
    
    /* Display an alternative logo in dark mode */
    .dark .login__group--icon-container 
    {
        background: url('./INTERSHIP NAVIGATION - FINAL WHITE.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        height: 100px;
        width: 450px;
        margin-bottom: 8px;
    }

    /* Display an alternative title in dark mode*/
    .dark .login__group--header::after 
    {
        content: 'CMS Mobile App \ALogin';
        font-weight: 500;
        font-size: 1.3125rem;
        font-family: Roboto, Helvetica, Arial, sans-serif;
        padding-bottom: 9px;
        color: white;
        text-align: center;
    }
    
    /* Add border color to grids */
    .ag-theme-material .ag-ltr .ag-cell 
    {
        border-top-color:   #eeeeee;
        border-left-color:  #eeeeee;  
    }
    
    /* width of horizontal scroll bar and height of the vertical scroll bar*/
    ::-webkit-scrollbar:vertical
    {
        width: 14px !important;
    }
    ::-webkit-scrollbar:horizontal
    {
        height:14px !important;
    }    

    /* Set the entire parent div of app-menu to blue-ish */
    /* Set the background of the open documents to blue-ish*/
    div:has(>div[data-testid='app-menu']),
    .tsf-open-document
    {
       background-color: rgb(3,41,106) !important;
    }
     
    /* Set the appliation menu itself to a different hue of blue-ish */
    div[data-testid='app-menu']
    {
       background-color: rgb(89,114,157) !important;
    }   
	
    /* Set text of every listbar (starts with listbar__) to white */	
    div[data-testid^='listbar__'],
    /* Set text of every listmenuitems (starts with treemenu__item) to white */	
	div[data-testid^='treemenu__item'],
    /* Set the close indicator to white */	
    svg[data-testid='CloseIcon'],
    /* Set the open document title to white */
    .document,
    /* Set the open documents label to white */
    .open-documents > li,
    /* Set the search text and search/close icon to white */
    .sidebar-item-search,
    .sidebar-item-search svg,
    /* Set the application menu title to white */	
    div:has(>div[data-testid='app-menu']) svg
    div[data-testid$='__active-application'] span,
    div[data-testid$='active-application'] span,
    /* Set the 'no .. found' to white */
    div:has(>div[data-testid='app-menu']) .no-rows
    {
       color: rgb(255, 255, 255) !important;
    }
        
    /* Force all icons in the menu to white */
    div:has(>div[data-testid='app-menu']) svg,
    div[data-testid='app-menu'] svg
    {
       fill: rgb(255, 255, 255) !important;
    }
       
    /* Set the dividers to white */
    div:has(>div[data-testid='app-menu']) hr
    {
        background-color: white !important;
    }
 
    /* Flip the badge colors in the menu. Background white, text blue-ish */
    div:has(>div[data-testid='app-menu']) .badge
    {
       background-color: white !important;
       color: rgb(89,114,157) !important;
    }

    /* Search bar input underline to white */
    .sidebar-item-search::before
    {
       border-bottom: 1px solid white;
    }
     
    .sidebar-item-search:hover:not(.Mui-disabled, .Mui-error)::before {
        border-bottom: 2px solid white
    }
    
/* css used for the timer */
    .timer {
      position: absolute;
      top: 0%;
      left: 50%;
      color: white;
    }

    #clock {
        color: white;
        font-family: 'Inconsolata', monospace;
        font-size: 20px;
    }
    
    #clockmenu {
        margin: 5px auto;
        padding-left:0px;
        font-weight: bold;
    }
    
    #clock,
    #clockmenu {
        max-width: 220px;
        text-align: center;
    }

    #clockmenu li.active {color:orange;}

    #clockmenu li {
        display: inline-block;
        padding-bottom: 3px;
        text-transform: uppercase;
        font-size: 10px;
        cursor: default;
    }
	
    #clockmenu li:not(.active):hover {
        color: #EDEDED;
        cursor: pointer;
    }
    
    /* Listed Version */
    .timezone {
        position: relative;
        overflow: hidden;
        padding: 0.5rem 0;
        margin: 0 1rem;
        border-top: 1px solid #fff;
        color: #0e2764;
        line-height: 1.2;
        border-bottom: 1px solid #c6c9ce;
    }
    .timezone:first-child {border-top: 0;}
    .timezone:last-child {border-bottom: 0;}
    .timezone span {display: block;}
    .timezone attr {
        font-size: 0.9rem;
        font-weight: 700;
        color: #878ea3;
        letter-spacing: 0.5px;
    }
    .timezone__location {
        margin: 0;
        font-size: 1.8rem;
        font-weight: 300;
    }
    .time {
        position: absolute;
        right: 0;
        top: 5px;
        font-size: 1.8rem;
        font-weight: 300;
    }
    .time small {
        font-size: 0.6em;
    }
    
    header
    {
        background-color: rgb(3,41,106) !important;  
    }