/*
 * $Id$
 * Copyright 2018-2021 Ellucian Company L.P. and its affiliates.
 */

html,body{height:100%;}

.container
{
    height:100%;
    padding-top: 1.25rem;
}

/* Add a white border to the navbar which is only visible when modals are open with backdrop */
/* This is to show a visual separation between the navbar and modal */
.navbar-ellucian
{
   border-bottom: 1px solid #FFFFFF;
}

#site-title
{
   vertical-align: top;
   padding-left: 10px;
   font-weight: 100;
   line-height: 20px;
   font-size: 1.1em;
   font-family: Nunito,Helvetica,Arial,sans-serif;
}

.product-title
{
    font-size: 1.75rem;
    font-family: Nunito,Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 400;
}
/* Set label inside h1 to have font consistent with normal h1, but "unset" doesn't work in IE 11, so we have to re-iterate EDS values here */
h1, h1 > label
{
   font-size: 1.5rem;
   font-weight: normal;
   font-family: Nunito,Helvetica,Arial,sans-serif;   
}
/* Style for side bar table row border */
.detail h2
{
   font-size: 1.5rem;
   padding-left: 20px;
   padding-top: 20px;
}

@media (min-width: 48rem)
{
   #site-title
   {
      line-height: 29px;
      font-size: 1.7em;
      padding-left: 20px;
   }
   .product-title
   {
       font-size: 2.25rem;
   }
   h1, .esg-page-header__title, h1 > label
   {
      font-size: 1.875rem;
   }
   .detail h2
   {
      font-size: 1.875rem;
      padding-left: 20px;
      padding-top: 20px;
   }
}

/* Set background to white to match UXD design */
body
{
   background-color: white;
}
/* Default style for links is to have underline only on hover */
a, a:not(.btn)
{
   text-decoration: none;
}

a:hover, a:focus
{
   text-decoration: underline;
}
/* Use a wait cursor for when an API is loading */ 
.wait, .wait input, .wait select
{
   cursor: wait !important;
}
/* Override default padding because our layout extends to the edges */
/* so that we don't have to continually adjust for it using negative margins on elements within this container */
.container-fluid
{
   padding-left: 0px !important;
   padding-right: 0px !important;
}

/* Style header for consistency with our UXD design */
.section-header
{
   padding: 0px;
   margin: 10px 20px 0px 20px;
   margin-top: 0;
}
.master
{
   margin-right: 0;
   padding-right: 0;
   padding-top: .5rem;
}
.section
{
   padding: 0px;
   margin: 10px 20px 0px 20px;
   margin-top: 14px;
}
.section.row
{
   padding-bottom: 15px;
}
/* Style link back to previous page for consistency with our UXD design */
.link-container
{
}
.link-icon
{
   margin-right:10px;
   width: 13px;
   height: 13px;
}

/* Add padding headers which are typically displayed in the master view area of the page */
/* Use font-size to match esg-page-header__title because our layout only works with esg-page-header on some pages, not all */


/* Decrease line height of heading tags so they don't take up so much vertical space on mobile where wrapping is likely to occur */
.table-header h1, .table-header h2, .table-header h3, .table-header h4, .table-header h5, .table-header h6
{
   line-height: 1.5;
}

/*
 * In UXD design, the only area with a background is the one immediately below the purple header,
 * it is the breadcrumb area but we don't have that,
 * so applying the background here seems the best compromise.
 */
 /* Use border-bottom from esg-page-header */
.page-header
{
   background-color: #f4f4f4;
   border-bottom: .0625rem solid #e2e2e2;
}

/* Below are several overrides to set the base style for our header on pages that don't have a sidebar */
.navbar-fixed-top
{
   left: 0px;
   position: relative;
   margin-left: 0px;
}

/* override a-not-btn conflict in ellucian-style.css */
.esg-header-bar__menu-link
{
   color: #fff !important;
   height: auto !important;
}

.logo
{
   height: 17px;
}

.logo-container
{
   padding-right: 14px;
   padding-bottom: 5px;
}


@media (min-width : 54.857em)
{
   .content-wrapper
   {
      left: 0px;
      margin-right: 0px;
      margin-left: 0px;
   }
}

@media ( min-width : 100em)
{
   .content-wrapper
   {
      left: 0px;
      margin-right: 0px;
   }
}

/* End Overrides for pages that don't have a sidebar */

/* Position the login modal below the header */
/* For mobile screen sizes, modal fills the screen */
.modal-login 
{
   top: 51px;
   height: 100%;
}

/* When screen gets larger than modal, put height back to default so it doesn't fill screen */
@media (min-width: 30em)
{
   .modal-login
   {
      height: auto;
   }
}

/* Override ellucian-style for margin-bottom because it makes input fields spaced differently than select dropdowns */
input
{
   margin-bottom: 0;
}

.master-detail
{
   margin: 0;
   height: 100%;
}

.table-header, .table-row
{
   margin-left: 0px;
   margin-right: 0px;
}

/* Add padding to rows at all screen sizes so they align vertically with table-header content, like search text box */
.master .table-row
{
   padding-left: 30px !important;
}

/* Give a reasonable max and min size for our dropdown select lists */
.dropdown
{
   display: inline-block;
   width: auto;
   min-width: 180px;
   max-width: 350px;
}

/* Style the audit frame width so that iFrameResizer will adjust the height dynamically */
#auditFrame
{
   width: 100%;
   min-width: 320px;
}

/* Style hr to match our wireframes */
hr 
{
   height: 1px;
   background-color: black;
   margin-top: 2px;
}

/* Style the title links that appear inside an ordered list */
.detail li a, .detail li a:not(.btn):visited
{
   font-size: 18px;   
   color: #333;
}
.detail li .disabled
{
   color: #a9a9a9 !important;
}
.detail li .disabled span
{
   font-size: 18px;   
}
/* Style the titles of items in the slider */ 
.itemTitle
{
   font-weight: bold;
   color: #333;
}
/* Style text that appears under title links in detail lists */
.detail li p
{
   font-style: italic;
}
.detail.collapse.in
{
   /* Set z-index higher than the datepicker's calendar svg icon */
   z-index: 100;
   display: block !important;
   height: auto !important;
   min-height: 700px;
}
.detail
{
   padding: 0;
   background-color: #f4faff;
   border-color: #CCE7FF;
}
/* On bootstrap medium and larger viewports, override collapse so sidebar is always displayed and height doesn't change */
@media (min-width: 992px)
{
   .detail.collapse
   {
      display: block !important;
      position: absolute;
      height: auto !important;
      min-height: 700px;
   }
   /* Equalize percentage width so detail doesn't overlap master */
   .detail.detail-25
   {
      right: 1px;
      width: 35%;
   }
   .master-75
   {
      width: 65%;
   }
}
.detail .detail
{
   position: inherit;
   width: 100%;
}

/* Decrease margin on to avoid causing it to overflow the detail sidebar */
.detail ol
{
   padding: 20px;
   margin-bottom: 16px;   
}

/* Special style for an icon that appears in a sidebar row */
.detail .row a:not(.btn), .detail .row a:not(.btn):visited
{
   float: right;
   color: #999;
}

.detail .grid-col-border
{
   padding: 10px !important;
   padding-right: 0 !important;
}
/* Give a checkbox in grid the appearance of being centered */
.row div.checkbox
{
   margin-top: 28px;
   margin-left: 37%;
}
.detail hr
{
   margin: 0 1.25rem;
   background-color: #CCE7FF;
}
.detail div.row  
{
   border: none;
   border-bottom: 1px solid #CCE7FF;
   background-color: #f4faff;
   width: 100%;
   margin:0;
   padding-right: 20px;
}
.detail div.row.section-header
{
   border-top: 1px solid #CCE7FF !important;
   background-color: #CCE7FF;
   /* #E4D3E8 */
   margin:0;
   padding:10px;
   padding-left: 20px !important;
}

.detail .section
{
   padding:10px;
   color: #999;
}

/* Override usual link styling now that our close buttons are links */
.close
{
   color: #333 !important;
   text-decoration: none !important;
}
/* Position a close button inside a slider to match a page's close button */
.detail .esg-modal-dialog__close
{
   padding-top: 1rem;
   padding-right: 1rem;
}

/* For the editTransferWorkForm to be inline */
.inline-form
{
   display: inline;
}

/* For showing the icons as enabled */
.icon-enabled
{
  opacity: 1;  
}

/* For showing the icons as disabled */
.icon-disabled
{
   pointer-events: none;
   opacity: 0.25;
}

/* For School tile on class selection, and class information pages */
.school-title
{
   padding-top: inherit;
}


/* For the right look and feel of the trash icon */
.btn-grey-noborder
{
   color: grey;
   border: none;
}

/* Spinner backdrop */
.loadingBackdrop
{
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   
   /* Use 4th argument for opacity that will not be inherited by loadingIndicator for original spinner colors */
   background-color: rgba(0, 0, 0, 0.1);
   
   /* Use opacity which loadingIndicator will inherit for a white-on-grey effect */  
   /*
   background-color: #000;
   opacity: .25;
   */
   /* z-index positions this above all modals which are at 1040 */
   z-index: 1100;  
   -webkit-transition: .3s linear all;
   transition: .3s linear all;
}
/* Spinner fade-out animation */
.loadingBackdrop.ng-hide
{
   opacity: 0;
}

.row-centered
{
    text-align:center;
    margin-left: 20px;
    margin-right: 20px;
}
.col-centered
{
    display:inline-block;
}

/* Facebook button styles from https://lipis.github.io/bootstrap-social/ */
.btn-social
{
   position: relative;
   padding-left: 44px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.btn-social>:first-child
{
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 32px;
   line-height: 34px;
   font-size: 1.6em;
   text-align: center;
   border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.btn-facebook .badge
{
   color: #3b5998;
   background-color: #fff
}

/* Add padding to the default to accomodate the increased height of our buttons */
.btn-social>:first-child
{
   padding: 5px;
}

/* Fix input-group button size to agree with EDS */
.input-group-btn:last-child>.btn
{
   height: 43px !important;
   font-size: 14px;
}

/* Style control labels to be aligned right */
.control-label
{
   font-weight: bold;
   text-align: right;
   white-space: nowrap;
}
.control-label.for-text-input
{
   padding-top: 5px;
   padding-right: 15px;
}
/* Color buttons like the debug tag copy button when it is active even though the field is readonly */
.readonly-active-button
{
   fill: #0074db !important;
}

.esg-header-bar__menu
{
   height: 0;
   line-height: 0;
}
/* override header styles to handle no sidebar here, and height discrepancies */
/* Layer header under Bootstrap's modal overlay */
.esg-header-bar
{
   margin-left: 0px !important;
   width: 100%;
   position: relative;
   height: 3.25rem;
   z-index: 1000;
}
@media (min-width: 48rem)
{
   .esg-header-bar
   {
      height: 3.75rem;
   }
}

.table-row:hover, .table-row:focus, .table-row.active
{
   background-color: #f4faff;
}

.not-allowed
{
   cursor: not-allowed !important;
}

/* Override background for page header because we already have a header in this app */
.esg-page-header
{
   background-color: #fff;
   padding-top: 1rem;
   padding-bottom: 1rem;
}
/* But go back to defined esg-page-header background for the primary header */
.page-header
{
   background-color: #f4f4f4;
   padding-top: 1rem;
   padding-left: 1rem;
   margin: 0px;
}
/* Can't figure out how to fire ng-click on reset button to make it functional, so style it to look the same as search button */
.esg-form__icon--reset svg
{
   width: 1.25rem;
}
/* Align back arrow button text because they are like breadcrumbs in location, but not appropriate to use breadcrumb style. */
.section-header .esg-icon__container
{
   margin-left: -6px;
   vertical-align: text-bottom;
}

/* EDS recommends 25% opacity */
.modal-backdrop.in
{
   opacity: 0.25;
}
/* Override bottom value from Bootstrap because it was causing modals to be too large */
.esg-modal-dialog
{
   bottom: unset;
   overflow-y: auto;
}
/* Layer header bar and sidebar so notifications can display over modals */
.esg-modal-dialog__header, .esg-modal-wizard__header, .esg-modal__header
{
   padding: .8rem;
   background-color: #f7f7f7;
}
.esg-modal-dialog__body
{
   margin-top: 4rem;
}
@media only screen and (min-width: 62rem)
{
   .esg-modal-dialog
   {
      margin-left: 0;
   }
   .esg-modal-dialog__header, .esg-modal-wizard__header, .esg-modal__header
   {
      top: 0;
   }
   .esg-modal-dialog__body, .esg-modal-wizard__body, .esg-modal__body
   {
      margin-top: 0;
   }
}

.esg-form__feedback-text
{
   vertical-align: middle;
}

/* Give some margin to center checkboxes in transfer.html detail sidebar and align with item title. */
.col-xs-2 .esg-checkbox
{
   margin-left: .3rem;
   margin-top: 0;
}

/* Override header logo text color to match ellucian logo for "University Name" */
.esg-header-bar__logo
{
   color: #fff;
}

.datepicker-days table.table-condensed th.prev, .datepicker-days table.table-condensed th.next, .datepicker-months table.table-condensed th.prev, .datepicker-months table.table-condensed th.next, .datepicker-years table.table-condensed th.prev, .datepicker-years table.table-condensed th.next
{
   color: #0074DB; 
}

.datepicker table tr td.active, .datepicker table tr td.active.highlighted, .datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled
{
   background-color: #0074DB;
}

.datepicker table tr td.day:hover, .datepicker table tr td.focused
{
    background: #E5F3FF;
    color: #333;
}

.datepicker-days table.table-condensed tbody td, .datepicker-days table.table-condensed tbody span.year, .datepicker-days table.table-condensed tbody span.month, .datepicker-months table.table-condensed tbody td, .datepicker-months table.table-condensed tbody span.year, .datepicker-months table.table-condensed tbody span.month, .datepicker-years table.table-condensed tbody td, .datepicker-years table.table-condensed tbody span.year, .datepicker-years table.table-condensed tbody span.month
{
   border-left: 1px solid #efefef !important;
   border-bottom: 1px solid #efefef !important;
}

.datepicker-days table.table-condensed thead tr:nth-child(3), .datepicker-months table.table-condensed thead tr:nth-child(3), .datepicker-years table.table-condensed thead tr:nth-child(3)
{
   border-bottom: 1px solid #80C3FF !important;
}

table tbody tr:hover, table tbody tr:focus, table tbody tr.active, .table tbody tr:hover, .table tbody tr:focus, .table tbody tr.active
{
   background-color: #fff !important;
}

th.dow
{
   background-color: #f4faff;
}

/* Move error icon to the left so it won't overlap browser-specific dropdown control */
.esg-form__feedback-icon, .esg-form__icon
{
   width: 2.5rem;
}

/* About modal styles */
.modal-about-header-label
{
   font-size: 1.65rem !important;	
}

.modal-about-privacyUrl
{
   text-decoration: none;
}

.modal-about-privacyUrl:hover
{
   text-decoration: underline;
}

.modal-about-divider
{
    border: 0;
    width: 90%;
    height: .5px;
    background-image: -webkit-linear-gradient(left, rgb(255 255 255), rgb(48 48 48 / 75%), rgb(255 255 255));
    background-image:    -moz-linear-gradient(left, rgb(255 255 255), rgb(48 48 48 / 75%), rgb(255 255 255));
    background-image:     -ms-linear-gradient(left, rgb(255 255 255), rgb(48 48 48 / 75%), rgb(255 255 255));
    background-image:      -o-linear-gradient(left, rgb(255 255 255), rgb(48 48 48 / 75%), rgb(255 255 255));
}