.text-csa-blue {
  color: #0085CA !important;
}

hr {
  background: #d5d9de !important;
}

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
}

/* this is included to prevent tiny sweetalert2 popups */
.swal2-popup {
  font-size: 1.3em !important;
}


.debug {
  border: none !important;
  /*border: 1px solid black !important;*/
}


/**************************************************************************************/
/*                                                                                    */
/*                                    login page                                      */
/*                                                                                    */
/**************************************************************************************/
.copyright {  
  text-align: center;
}



.login .login-content {
  padding: 64px 40px;
  color: #999;
  width: 450px;
  margin: 0 auto;
  text-align: center;
}

body .daterangepicker {
  z-index: 30000 !important;
}

/**************************************************************************************/
/*                                                                                    */
/*                                  weekday navigator                                 */
/*                                                                                    */
/**************************************************************************************/
.clock-day {
  display: flex !important;
  flex-flow: row !important;
  padding-bottom: 15px !important;
  width: 100% !important;
  color: #889097 !important;
  font-weight: bold !important;
}

  .clock-day .selected {
    color: #fff !important;
    background-color: #0085CA !important;
    border: 1px solid #0085CA !important;
  }

.clock-day-cell {
  width: 18% !important;
  border: 1px solid transparent !important;
  padding: 1px !important;
  text-align: center !important;
  line-height: 1.5em !important;
  height: 1.65em !important;
  border-radius: 3px !important;
}

a.clock-day-cell {
  color: #889097 !important;
}

  a.clock-day-cell:hover {
    background-color: #0085CA !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    cursor: pointer;
  }


.sidebar .nav > li.nav-profile {
  padding: 20px 0px 10px 0px !important;
  color: #1f2225 !important;
  overflow: hidden !important;
  border-bottom: 1px solid #bcc2c7 !important;
  margin-bottom: 10px !important;
}

.today {
  font-size: 1.1em !important;
}





/**************************************************************************************/
/*                                                                                    */
/*                               timesheet calendar                                   */
/*                                                                                    */
/**************************************************************************************/

/* Set basic day format */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  font-weight: normal;
  color: #222;
  background-color: #eee;
  border: 2px solid transparent !important;
}

/* Set "other" month format */
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
  font-weight: normal;
  color: #222;
  background-color: #fff;
  border: 2px solid transparent !important;
}



/* Set background color of entire calendar */
.ui-widget-content {
  background: inherit !important;
}





/**************************************************************************************/
/*                                                                                    */
/*                         Status Tick Marks on Calendar                              */
/*                                                                                    */
/**************************************************************************************/

/* Set calendar size, etc. */
.ui-datepicker {
  width: auto;
  height: auto;
  margin: .1em auto 0;
  border: none !important;
  padding-top: .75em !important;
}

  .ui-datepicker a {
    text-decoration: none;
  }

  .ui-datepicker th {
    font-size: 1.1em !important;
    padding: .5em .35em !important;
    text-transform: uppercase !important;
  }

    .ui-datepicker th:first-child {
      color: #ff5b57 !important;
    }

    .ui-datepicker th:last-child {
      color: #ff5b57 !important;
    }


  .ui-datepicker tbody td {
    line-height: 1.65em;
  }


  .ui-datepicker td a {
    font-size: 1.35em;
    padding: 0.27em !important;
    line-height: 1.77em;
    margin: 0.07em !important;
  }


    /* Set Calendar header title, etc. */
    .ui-datepicker td a:hover {
      color: #fff !important;
      font-weight: bold !important;
      background-color: #0085CA !important;
    }


  .ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.5em;
    font-size: 1.4em;
    font-weight: bolder !important;
    text-transform: uppercase !important;
    text-align: center;
  }


.ui-datepicker-header {
  border: 1px solid #aaa !important;
  color: #00000080 !important;
  font-weight: 500 !important;
  background: none !important;
  border: none !important;
}


/* Set previous and next buttons */
.ui-datepicker-prev, .ui-datepicker-next {
  display: inline-block !important;
  width: 30px !important;
  height: 30px !important;
  text-align: center !important;
  cursor: pointer !important;
  line-height: 600% !important;
  overflow: hidden !important;
}

/* Set current day of the month */
.ui-datepicker .ui-state-highlight {
  border: 2px solid #00000080 !important;
  color: #000 !important;
}

/* Set the active (selected) day of the month */
td.timesheet-calendar-pay-period-window a.ui-state-active {
  background-color: #0085CA !important;
  color: #fff !important;
  font-weight: bold !important;
}

/* EMPLOYEE MODIFIED */
td.timesheet-calendar-2-mod a {
  background-image: url('../../../images/calendar/upper_left_mod.png') !important;
  background-repeat: no-repeat !important;
  background-position: left top !important;
}
/* EMPLOYEE APPROVED */
td.timesheet-calendar-2-apr a {
  background-image: url('../../../images/calendar/upper_left_apr.png') !important;
  background-repeat: no-repeat !important;
  background-position: left top !important;
}



td.timesheet-calendar-4-mod a {
  background-image: url('../../../images/calendar/bottom_left_mod.png') !important;
  background-repeat: no-repeat !important;
  background-position: left bottom !important;
}

td.timesheet-calendar-4-apr a {
  background-image: url('../../../images/calendar/bottom_left_apr.png') !important;
  background-repeat: no-repeat !important;
  background-position: left bottom !important;
}

td.timesheet-calendar-4-rej a {
  background-image: url('../../../images/calendar/bottom_left_rej.png') !important;
  background-repeat: no-repeat !important;
  background-position: left bottom !important;
}



td.timesheet-calendar-8-mod a {
  background-image: url('../../../images/calendar/bottom_left_mod.png') !important;
  background-repeat: no-repeat !important;
  background-position: left bottom !important;
}

td.timesheet-calendar-8-apr a {
  background-image: url('../../../images/calendar/bottom_left_apr.png') !important;
  background-repeat: no-repeat !important;
  background-position: left bottom !important;
}

td.timesheet-calendar-8-rej a {
  background-image: url('../../../images/calendar/bottom_left_rej.png') !important;
  background-repeat: no-repeat !important;
  background-position: left bottom !important;
}



td.timesheet-calendar-16-mod a {
  background-image: url('../../../images/calendar/bottom_right_mod.png') !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
}

td.timesheet-calendar-16-rej a {
  background-image: url('../../../images/calendar/bottom_right_rej.png') !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
}

td.timesheet-calendar-16-apr a {
  background-image: url('../../../images/calendar/bottom_right_apr.png') !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
}


td.timesheet-calendar-16-fin a {
  background-image: url('../../../images/calendar/bottom_right_fin.png') !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
}

td.timesheet-calendar-16-prc a {
  background-image: url('../../../images/calendar/bottom_right_prc.png') !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
}

td.timesheet-calendar-none a {
  background-image: url('../../../images/calendar/upper_left_none.png') !important;
  background-repeat: no-repeat !important;
  background-position: left top !important;
}



/**************************************************************************************/
/*                                                                                    */
/*                                 Pay Period Styling                                 */
/*                                                                                    */
/**************************************************************************************/
/* Current Pay Period Styling */
td.timesheet-calendar-current-pay-period a {
  background-color: #BED12A90 !important;
}

  td.timesheet-calendar-current-pay-period a.ui-state-active {
    font-weight: bold !important;
    background-color: #0085CA !important;
    color: #fff !important;
  }

/* Pay Period Window Styling */
td.timesheet-calendar-pay-period-window a {
  background-color: #FCF3E2 !important;
}

  td.timesheet-calendar-pay-period-window a:hover {
    background-color: #0085CA !important;
  }

  td.timesheet-calendar-pay-period-window a.ui-state-active {
    background-color: #0085CA !important;
    color: #fff !important;
  }



td.timesheet-calendar-current-pay-period.partial-start a {
  background-image: -webkit-linear-gradient(117deg, #BED12A 50%, #FCF3E2 50%) !important;
}

td.timesheet-calendar-current-pay-period.partial-end a {
  background-image: -webkit-linear-gradient(117deg, #FCF3E2 50%, #BED12A 50%) !important;
}

td.timesheet-calendar-pay-period-window.partial-start a {
  background-image: -webkit-linear-gradient(117deg, #BED12A 50%, #FCF3E2 50%) !important;
}

td.timesheet-calendar-pay-period-window.partial-end a {
  background-image: -webkit-linear-gradient(117deg, #FCF3E2 50%, #BED12A 50%) !important;
}







#alert-scroll-box {
  overflow-y: auto !important;
  height: 300px !important;
}




/**************************************************************************************/
/*                                                                                    */
/*                          LOGIN SCREEN SYSTEM CHECK WARNINGS                        */
/*                                                                                    */
/**************************************************************************************/
#login-alert-section {
  z-index: 20 !important;
  text-align: left !important;
}

#login-alert-scroll-box {
  z-index: 20 !important;
  color: #000 !important;
  font-size: 15px !important;
  /*overflow-y: auto !important;*/
  display: block !important;
}

.login-alert-title {
  font-size: 14px !important;
  font-weight: bolder !important;
  padding-bottom: 7px !important;
}

.login-alert-message {
  font-size: 13px !important;
  line-height: 15px !important;
}

.login-alert-notes {
  /*text-decoration: underline !important;*/
  font-variant: small-caps !important;
  margin-top: 5px !important;
  line-height: 15px !important;
}

.login-alert-payperiods {
}

.login-alert-instructions {
  font-size: 13px !important;
  margin-top: 10px !important;
  line-height: 15px !important;
  /*border: 1px solid #bbb !important;*/
  background-color: #f4f4f4 !important;
  border-radius: 3px !important;
  padding: 3px 5px !important;
}

.login-alert-item {
  border: 1px solid #ddd !important;
  padding: 5px !important;
}

  .login-alert-item:not(:last-child) {
    margin-bottom: 12px !important;
  }


.alert-icon {
  color: red !important;
  fill: rgb(77, 10, 235) !important;
  width: 24px !important;
  height: 24px !important;
  z-index: 50 !important;
  padding: 2px !important;
}





.login-alert-information {
  background-color: #bdf !important;
  color: #059 !important;
}

.login-alert-notice {
  background-color: #777 !important;
  color: #efefef !important;
}

.login-alert-warning {
  background-color: #000 !important;
  color: #fff !important;
}

.login-alert-error {
  background-color: rgb(248, 183, 0) !important;
  color: #000 !important;
}

.login-alert-critical {
  background-color: #eb0000 !important;
  color: #fff !important;
}




.btn-tiny-blue {
  background-color: #ccddff;
  border: 1px solid #bbccee;
  color: #667799;
  border-radius: 6px;
  font-size: 11px;
  line-height: 13px;
  padding: 2px 3px;
  font-weight: bolder;
  margin-top: 2px;
  margin-bottom: 2px;
}

.btn-tiny-green {
  background-color: #ccedd5;
  border: 1px solid #70e08e;
  color: #4c7056;
  border-radius: 6px;
  font-size: 11px;
  line-height: 13px;
  padding: 2px 3px;
  font-weight: bolder;
  margin-top: 2px;
  margin-bottom: 2px;
}

.btn-tiny-gray {
  background-color: #eeeeee;
  border: 1px solid #999;
  color: #999;
  border-radius: 6px;
  font-size: 11px;
  line-height: 13px;
  padding: 2px 3px;
  font-weight: bolder;
  margin-top: 2px;
  margin-bottom: 2px;
}



.small-action-button {
  display: flex !important;
  justify-content: flex-end !important;
}



/**************************************************************************************/
/*                                                                                    */
/*                                 Utility CSS Selectors                              */
/*                                                                                    */
/**************************************************************************************/

/* FA5 Font Awesome Overrides */
.fa-22x {
  font-size: 2.2em !important;
}

.fa-21x {
  font-size: 2.1em !important;
}

.fa-2x {
  font-size: 2em !important;
}

.fa-15x {
  font-size: 1.5em !important;
}

.fa-125x {
  font-size: 1.25em !important;
}

.fa-1x {
  font-size: 1em !important;
}

.fa, .fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

.fa, .fas, .far, .fal, .fad, .fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}


a.disabled {
  pointer-events: auto;
}

  a.disabled:active {
    pointer-events: auto;
  }

  a.disabled:hover {
    pointer-events: auto;
  }



/**************************************************************************************/
/*                                                                                    */
/*                               BIG CALENDAR CONTROL                                 */
/*                                                                                    */
/**************************************************************************************/

.fc-button-primary {
  color: #fff !important;
  background-color: #0085CA !important;
  border-color: #0085CA !important;
  font-weight: bold !important;
}

  .fc-button-primary:hover {
    color: #fff !important;
    background: #005C97 !important;
    border-color: #005C97 !important;
  }

.fc button.fc-state-active, body .fc button:active {
  background: #005C97 !important;
  border-color: #005C97 !important;
}

.fc-button-primary, .fc-button-primary.disabled,
.fc-button-primary.disabled:focus, .fc-button-primary.disabled:hover,
.fc-button-primary[disabled], .fc-button-primary[disabled]:focus,
.fc-button-primary[disabled]:hover {
  color: #fff !important;
  background: #0085CA !important;
  border-color: #0085CA !important;
}

.fc-button {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.fc-button-primary:not(:disabled):active, .fc-button-primary:not(:disabled).fc-button-active {
  color: #fff !important;
  background: #005C97 !important;
  border-color: #005C97 !important;
}


/***************************************************/
/*                                                 */
/*    Hijacked from fullcalendar/main.css: ~588    */
/*                                                 */
/***************************************************/

/*@font-face {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
}*/

.fc-icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  speak: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fc-icon-chevron-left:before {
  content: "\f060";
}

.fc-icon-chevron-right:before {
  content: "\f061";
}


.fc-button .fc-icon {
  vertical-align: middle;
  font-size: 1em;
  display: inline-block;
  text-align: center;
}




.common-header {
  color: #766 !important;
  font-weight: bolder !important;
  background: none !important;
  margin-top: 10px !important;
  margin-bottom: 7px !important;
  padding: 5px 0px !important;
  padding-bottom: 1px !important;
  /*border-bottom: 2px solid #f2f2f2 !important;
  border-radius: 3px !important;*/
  font-size: 1.15em;
  font-weight: bold;
}

.box-section {
  display: block !important;
  width: 100% !important;
  border: 1px solid #d9e0e7 !important;
  border-radius: 2px !important;
  padding: 0px 15px 14px !important;
  background: #fff !important;
}

#tree-highlight-count {
  color: #766 !important;
  padding: 10px !important;
  font-size: 12px !important;
  font-weight: bolder !important;
}

.space-between {
  display: flex !important;
  justify-content: space-between !important;
}

.tree-search {
  width: 25% !important;
}



.checked {
  color: #0085CA !important; /*#1bbcb3 #0085CA #005C97*/
  background-color: #D9E0E7 !important; /*#4ba0ff*/
  border: 1px solid #0085CA !important; /*#00acac */
  font-weight: bolder !important;
}


/*
[flat] {
  background-color: #fff !important;
  color: #555 !important;
  border: 1px solid #c1c1c1 !important;
  height: 2.9em !important;
  border-radius: 4px !important;
}

  [flat]:hover {
    background-color: #D9E0E7 !important;
    color: #000 !important;
    cursor: pointer;
  }

  [flat]:disabled:hover {
    background-color: #fff !important;
    color: #555 !important;
    cursor: default;
  }*/


/* filter magic */
/* filter: invert(49%) sepia(85%) saturate(2059%) hue-rotate(159deg) brightness(92%) contrast(101%); */

/*.checked.recolor-toggle:hover {
  color: #c8c9c7 !important;
}*/





/* Delegate Area */
#delegate-alert-modal-btn-div {
  margin-bottom: 5px !important;
}

  #delegate-alert-modal-btn-div > a > i {
    color: #fce1ba !important;
    background-color: #7b4e0e !important;
    margin-right: 5px !important;
    padding: 5px 5px !important;
    border-radius: 5px !important;
  }

  #delegate-alert-modal-btn-div > a.btn {
    color: #7b4e0e !important;
    background-color: #fce1ba !important;
    border: 1px solid #dbbfaa !important;
  }


#delegate-alert > ul {
  margin-bottom: 5px !important;
  padding-left: 15px !important;
  list-style-type: disc;
  list-style-position: inside;
}

  #delegate-alert > ul > li {
    padding-top: 9px !important;
    padding-bottom: 0px !important;
    margin: 0 !important;
  }



/* Quicktasks */
.quicktasks-container {
  align-content: space-between !important;
  padding-left: 5px !important;
}

#qtdefaults {
  padding: 0 !important;
  /*justify-content: flex-start !important;*/
}

#qtdefaults-buttons {
  width: 100% !important;
}

#qtdefaults-dropdown {
  padding-bottom: 5px !important;
}

#quick-task-pay-period-window-selector {
  width: auto !important;
}


#quick-task-front-desk {
  padding: 0 !important;
  padding-left: 5px !important;
}

#qtfrontdesk-info {
  padding-bottom: 5px !important;
  width: 100% !important;
}

#qtfrontdesk-buttons {
  width: 100% !important;
}






.nowrap {
  /*white-space: nowrap;*/
}









/* main menu (sidebar) */
.sidebar {
  top: 23px !important;
}





/* top menu (navbar) */
/* leave / messages drop down */
.dropdown-menu.media-list .dropdown-header {
  padding: 10px 20px !important;
  background: #005C97 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600;
}

.header .navbar-nav > li > a, .header .navbar-nav > li .dropdown-toggle {
  padding: 10px !important;
}

.text-muted {
  color: #667 !important;
  font-weight: 500 !important
}

.header .navbar-nav > li > a .label, .header .navbar-nav > li .dropdown-toggle .label {
  right: 6px !important;
  padding: 0.3em 0.4em 0.3em !important;
}

.header .navbar-brand {
  padding: 9px 12px !important;
  width: 300px !important;
}

.fa-navbar {
  font-size: 1.9em !important;
}




/* tabs override */
.nav-tabs > li.active > a {
  background-color: #005C97 !important;
  color: #fff !important;
}



/* dropdown link override */
.dropdown-item:hover, .dropdown-item:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  text-decoration: none !important;
  background: #f2f4f7 !important;
}



.text-good {
  color: #0f9e3e !important;
}

a.text-good:hover,
a.text-good:focus {
  color: #0f9e3e !important;
}






/**************************************************************************************/
/*                                                                                    */
/*                                    login page                                      */
/*                                                                                    */
/**************************************************************************************/
.login-select {
  color: #495057 !important;
  background-color: #fff !important;
}





/************************************************
  Timesheet Edit Entries and Use Defaults Dialog 
*************************************************/
.form-horizontal.form-bordered .form-group > div > div > input[type="text"] {
  width: 280px !important;
  max-width: 280px !important;
}


.form-horizontal.form-bordered .form-group {
  border: 0 !important;
}

  .form-horizontal.form-bordered .form-group > div {
    border: 0 !important;
  }

  .form-horizontal.form-bordered .form-group > .control-label {
    padding-top: 10px !important;
    margin-top: 6px !important;
    border: 0 !important;
  }

  .form-horizontal.form-bordered .form-group > div.form-group-span-text {
    padding: 9px 0px 7px 13px !important; /* !!! Change 25px to 15px to remove indent */
    margin: 0px 0px 15px 0px !important;
    text-align: left !important;
    max-width: 40% !important;
    color: #555 !important;
  }

  .form-horizontal.form-bordered .form-group > div > div > span > span > span > span {
    color: #555 !important;
  }


  .form-horizontal.form-bordered .form-group > div > input[type="checkbox"] {
    margin-top: 2px !important;
  }




.date-selector {
  width: 170px !important;
}

#report-list {
  width: auto !important;
}



i[entry-item] {
  margin-left: 0px !important;
}




/*******************************************************************
*      ___ __  __   _   _    _      ____  _____   ___ ___ ___  
*     / __|  \/  | /_\ | |  | |    / /\ \/ / __| | _ \ __|   \ 
*     \__ \ |\/| |/ _ \| |__| |__ / /  >  <\__ \ |   / _|| |) |
*     |___/_|  |_/_/ \_\____|____/_/  /_/\_\___/ |_|_\___|___/ 
*                                                              
*******************************************************************/
@media ( max-width: 575px) {

  /************************************************
    Timesheet Edit Entries and Use Defaults Dialog 
  *************************************************/
  /*background-color: lightcoral !important;*/

  .form-horizontal.form-bordered .form-group > .control-label {
    margin: 0px 0px 0px 0px !important;
    text-align: left !important;
  }

  .form-horizontal.form-bordered .form-group > div > input[type="checkbox"] {
  }

  .form-horizontal.form-bordered .form-group > div > div > input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .form-horizontal.form-bordered .form-group > div {
    padding: 0 15px 15px !important;
  }


  /************************************************
    That flipping tree / panel
  *************************************************/
  .jstree-default-responsive .jstree-node, .jstree-default-responsive .jstree-icon, .jstree-default-responsive .jstree-node > .jstree-ocl, .jstree-default-responsive .jstree-themeicon, .jstree-default-responsive .jstree-checkbox {
    background-size: 80px 160px;
  }

    .jstree-default-responsive .jstree-icon, .jstree-default-responsive .jstree-icon:empty {
      width: 25px !important;
      height: 25px !important;
      line-height: 25px !important;
    }

  .jstree-default-responsive .jstree-closed > .jstree-ocl {
    background-position: 0px -25px !important;
  }

  .jstree-default-responsive .jstree-node {
    min-height: 27px !important;
    line-height: 27px !important;
  }

  .jstree-default-responsive .jstree-anchor {
    font-weight: 300 !important;
    color: #566 !important
  }

  #jstree-search {
    padding-top: 15px !important;
  }

  .form-horizontal.form-bordered .form-group > div {
    padding: 0 13px 15px !important;
  }

    /* splitting out dialog options from action buttons */
    .form-horizontal.form-bordered .form-group > div.split-footer {
      display: flex !important;
      justify-content: space-between !important;
      padding: 15px 0 5px 0px !important;
    }

      .form-horizontal.form-bordered .form-group > div.split-footer:first-child {
        margin-left: 0 !important;
      }

      .form-horizontal.form-bordered .form-group > div.split-footer:last-child {
        margin-right: 0 !important;
      }

  /************************************************
    That flipping tree properties panel (tabs)
  *************************************************/
  div.tree-item-property-panel {
    padding: 20px 0px 0px !important;
  }

    div.tree-item-property-panel > div > div.tab-content.scrollable {
      height: auto !important;
      margin-bottom: 20px !important;
    }

    div.tree-item-property-panel > div > ul {
      display: none !important;
    }

  div.jstree-panel > div > div > div > div.radio {
    padding-top: 0 !important;
  }

  div.jstree-panel > div > div > div > div > div > div.jstree-dropdown-group {
    padding-top: 0 !important;
  }


  /*********************************************************************************************************************
    REPORTS
  **********************************************************************************************************************/

  .reports-selection-container {
    /*background-color: lightcoral !important;*/
  }

  #reports-selectors-div {
    margin-bottom: 25px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 0px 30px !important;
  }

    #reports-selectors-div > div.radio > label > input {
      background-color: red !important;
      margin-top: 10px !important;
    }

  #reports-controls {
    padding-bottom: 10px !important;
    display: inline !important;
  }

  .reports-dropdown-group {
    display: inline-block;
    padding: 5px !important;
  }

    .reports-dropdown-group label {
      margin-top: 0px !important;
    }

  #reports-date-range {
    display: inline !important;
  }

  #reports-drop-pay-period-start-end-dates-div {
    margin-left: 23px !important;
    margin-bottom: 10px !important;
  }

  .reports-dropdown-label {
    display: block;
    padding-left: 0px !important;
  }

  .reports-selection-container > div > div.radio {
    margin: 0 !important;
  }

  .report-selection {
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px 10px !important;
  }

    .report-selection > div.report-name-list {
      padding: 0 !important;
    }

    .report-selection div.report-type-buttons {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      align-content: center !important;
      gap: 15px 5px !important;
    }

  .reports-date-range-controls {
    padding-bottom: 10px !important;
    display: inline !important;
  }

    .reports-date-range-controls > label {
      display: none !important;
      padding-bottom: 10px !important;
    }


  /* Entry Item in Timesheet Edit Mode */
  i[entry-item] {
    margin-left: 15px !important;
  }


  .quicktasks-container {
    /*background-color: lightcoral !important;*/
  }
}





/*******************************************************************
*      __  __ ___ ___ ___ _   _ __  __    ___ ___ ___ ___ _  _ 
*     |  \/  | __|   \_ _| | | |  \/  |  / __| _ \ __| __| \| |
*     | |\/| | _|| |) | || |_| | |\/| | | (_ |   / _|| _|| .` |
*     |_|  |_|___|___/___|\___/|_|  |_|  \___|_|_\___|___|_|\_|
*                                                              
*******************************************************************/
@media (min-width: 576px) and ( max-width: 767px) {

  /************************************************
    Timesheet Edit Entries and Use Defaults Dialog 
  *************************************************/
  /*background-color: lightgreen !important;*/

  .form-horizontal.form-bordered .form-group > .control-label {
    margin: 0px 0px 0px 0px !important;
    text-align: left !important;
  }

  .form-horizontal.form-bordered .form-group > .form-group-span-text.checkbox {
    padding: 3px 23px !important;
  }

  .form-horizontal.form-bordered .form-group > div > div > input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
  }


  /************************************************
    That flipping tree
  *************************************************/
  .jstree-default-responsive .jstree-node, .jstree-default-responsive .jstree-icon, .jstree-default-responsive .jstree-node > .jstree-ocl, .jstree-default-responsive .jstree-themeicon, .jstree-default-responsive .jstree-checkbox {
    background-size: 80px 160px;
  }

    .jstree-default-responsive .jstree-icon, .jstree-default-responsive .jstree-icon:empty {
      width: 25px !important;
      height: 25px !important;
      line-height: 25px !important;
    }

  .jstree-default-responsive .jstree-closed > .jstree-ocl {
    background-position: 0px -25px !important;
  }

  .jstree-default-responsive .jstree-node {
    min-height: 27px !important;
    line-height: 27px !important;
  }

  .jstree-default-responsive .jstree-anchor {
    font-weight: 300 !important;
    color: #566 !important
  }

  .form-horizontal.form-bordered .form-group > div {
    padding: 0 13px 15px !important;
  }

    /* splitting out dialog options from action buttons */
    .form-horizontal.form-bordered .form-group > div.split-footer {
      display: flex !important;
      justify-content: space-between !important;
      padding: 15px 0 5px 0px !important;
    }

      .form-horizontal.form-bordered .form-group > div.split-footer:first-child {
        margin-left: 0 !important;
      }

      .form-horizontal.form-bordered .form-group > div.split-footer:last-child {
        margin-right: 0 !important;
      }

  /************************************************
    That flipping tree properties panel (tabs)
  *************************************************/
  div.tree-item-property-panel {
    padding: 20px 0px 0px !important;
  }

    div.tree-item-property-panel > div > div.tab-content.scrollable {
      height: auto !important;
      margin-bottom: 20px !important;
    }

    div.tree-item-property-panel > div > ul {
      display: none !important;
    }

  div.jstree-panel > div > div > div > div.radio {
    padding-top: 0 !important;
  }

  div.jstree-panel > div > div > div > div > div > div.jstree-dropdown-group {
    padding-top: 0 !important;
  }

  /*********************************************************************************************************************
    REPORTS
  **********************************************************************************************************************/
  .reports-selection-container {
    /*background-color: lightgreen !important;*/
  }

  #reports-selectors-div {
    margin-bottom: 25px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 0px 30px !important;
  }

    #reports-selectors-div > div.radio > label > input {
      margin-top: 10px !important;
    }

  #reports-controls {
    padding-bottom: 10px !important;
    display: inline !important;
  }

  .reports-dropdown-group {
    display: inline-block;
    padding: 5px !important;
  }

    .reports-dropdown-group label {
      margin-top: 0px !important;
    }

  #reports-date-range {
    display: inline !important;
  }

  #reports-drop-pay-period-start-end-dates-div {
    margin-left: 23px !important;
    margin-bottom: 10px !important;
  }

  .reports-dropdown-label {
    display: block;
    padding-left: 0px !important;
  }

  .reports-selection-container > div > div.radio {
    margin: 0 !important;
  }

  .report-selection {
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px 10px !important;
  }

    .report-selection > div.report-name-list {
      padding: 0 !important;
    }

    .report-selection div.report-type-buttons {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      align-content: center !important;
      gap: 15px 5px !important;
    }

  .reports-date-range-controls {
    padding-bottom: 10px !important;
    display: inline !important;
  }

    .reports-date-range-controls > label {
      display: none !important;
      padding-bottom: 10px !important;
    }

  i[entry-item] {
    margin-left: 5px !important;
  }


  .quicktasks-container {
    /*background-color: lightgreen !important;*/
  }
}



/*******************************************************************
*      _      _   ___  ___ ___  __   _____ _    _    _____      __
*     | |    /_\ | _ \/ __| __| \ \ / / __| |  | |  / _ \ \    / /
*     | |__ / _ \|   / (_ | _|   \ V /| _|| |__| |_| (_) \ \/\/ / 
*     |____/_/ \_\_|_\\___|___|   |_| |___|____|____\___/ \_/\_/  
*                                                                 
*******************************************************************/
@media (min-width: 768px) and ( max-width: 979px) {

  /************************************************
    Timesheet Edit Entries and Use Defaults Dialog 
  *************************************************/
  /*background-color: yellow !important;*/

  .form-horizontal.form-bordered .form-group > .control-label {
    padding: 2px 0px 0px 0px !important;
    margin: 0px 0px 0px 0px !important;
    text-align: left !important;
  }

  .form-horizontal.form-bordered .form-group > .form-group-span-text.checkbox {
    padding: 3px 23px !important;
  }

  .form-horizontal.form-bordered .form-group > div > div > input[type="text"] {
    width: 251px !important;
    max-width: 251px !important;
  }

  .form-horizontal.form-bordered .form-group > div {
    padding: 0 13px 15px !important;
  }

    /* splitting out dialog options from action buttons */
    .form-horizontal.form-bordered .form-group > div.split-footer {
      display: flex !important;
      justify-content: space-between !important;
      padding: 15px 0 5px 0px !important;
    }

      .form-horizontal.form-bordered .form-group > div.split-footer:first-child {
        margin-left: 0 !important;
      }

      .form-horizontal.form-bordered .form-group > div.split-footer:last-child {
        margin-right: 0 !important;
      }


  /************************************************
    That flipping tree properties panel (tabs)
  *************************************************/
  div.tree-item-property-panel {
    padding: 20px 0px 0px !important;
  }

    div.tree-item-property-panel > div > div.tab-content.scrollable {
      height: auto !important;
      margin-bottom: 20px !important;
    }

    div.tree-item-property-panel > div > ul {
      display: none !important;
    }

  div.jstree-panel > div > div > div > div.radio {
    padding-top: 0 !important;
  }

  div.jstree-panel > div > div > div > div > div > div.jstree-dropdown-group {
    padding-top: 0 !important;
  }


  /*********************************************************************************************************************
    REPORTS
  **********************************************************************************************************************/
  .reports-selection-container {
    /*background-color: yellow !important;*/
  }

  #reports-selectors-div {
    margin-bottom: 25px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 0px 30px !important;
  }

    #reports-selectors-div > div.radio > label > input {
      margin-top: 10px !important;
    }

  #reports-controls {
    padding-bottom: 10px !important;
    display: inline !important;
  }

  .reports-dropdown-group {
    display: inline-block;
    padding: 5px !important;
  }

    .reports-dropdown-group label {
      margin-top: 0px !important;
    }

  #reports-date-range {
    display: inline !important;
  }

  #reports-drop-pay-period-start-end-dates-div {
    margin-left: 23px !important;
    margin-bottom: 10px !important;
  }

  .reports-dropdown-label {
    display: block;
    padding-left: 0px !important;
  }

  .reports-selection-container > div > div.radio {
    margin: 0 !important;
  }

  .report-selection {
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px 10px !important;
  }

    .report-selection > div.report-name-list {
      padding: 0 !important;
    }

    .report-selection div.report-type-buttons {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      align-content: center !important;
      gap: 15px 5px !important;
    }

  .reports-date-range-controls {
    padding-bottom: 10px !important;
    display: inline !important;
  }

    .reports-date-range-controls > label {
      display: none !important;
      padding-bottom: 10px !important;
    }

  i[entry-item] {
    margin-left: 5px !important;
  }


  .quicktasks-container {
    /*background-color: yellow !important;*/
  }
}



/*******************************************************************
*     __  ___      _   ___  ___ ___  _      _____   ___   _  _ 
*     \ \/ / |    /_\ | _ \/ __| __|| |_   / __\ \ / /_\ | \| |
*      >  <| |__ / _ \|   / (_ | _|_   _| | (__ \ V / _ \| .` |
*     /_/\_\____/_/ \_\_|_\\___|___||_|    \___| |_/_/ \_\_|\_|
*                                                              
*******************************************************************/
@media (min-width: 980px) { /* and ( max-width: 1199px) */

  /************************************************
    Timesheet Edit Entries and Use Defaults Dialog 
  *************************************************/
  /*background-color: cyan !important;*/

  .form-horizontal.form-bordered .form-group > .control-label {
    padding: 2px 0px 0px 0px !important;
    margin: 0px 0px 0px 0px !important;
    text-align: left !important;
    line-height: 34px !important;
  }

  .form-horizontal.form-bordered .form-group > .form-group-span-text.checkbox {
    padding: 3px 23px !important;
  }

  .form-horizontal.form-bordered .form-group > div > div > input[type="text"] {
    width: 251px !important;
    max-width: 251px !important;
  }

  .form-horizontal.form-bordered .form-group > div > input[type="text"] {
    padding-top: 8px !important;
  }

  .form-horizontal.form-bordered .form-group > div {
    padding: 0 13px 15px !important;
  }

    /* splitting out dialog options from action buttons */
    .form-horizontal.form-bordered .form-group > div.split-footer {
      display: flex !important;
      justify-content: space-between !important;
      padding: 15px 0 5px 0px !important;
    }

      .form-horizontal.form-bordered .form-group > div.split-footer:first-child {
        margin-left: 0 !important;
      }

      .form-horizontal.form-bordered .form-group > div.split-footer:last-child {
        margin-right: 0 !important;
      }


  /************************************************
    That flipping tree properties panel (tabs)
  *************************************************/
  div.tree-item-property-panel {
    padding: 20px 0px 0px 15px !important;
  }

    div.tree-item-property-panel > div > div.tab-content.scrollable {
      height: auto !important;
    }

    div.tree-item-property-panel > div > ul {
      display: none !important;
    }

  div.jstree-panel > div > div > div > div.radio {
    padding-top: 0 !important;
  }

  div.jstree-panel > div > div > div > div > div > div.jstree-dropdown-group {
    padding-top: 0 !important;
  }


  /*********************************************************************************************************************
    REPORTS
  **********************************************************************************************************************/
  .reports-selection-container {
    /*background-color: cyan !important;*/
  }

  #reports-selectors-div {
    margin-bottom: 15px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 0px 30px !important;
  }

    #reports-selectors-div > div.radio > label > input {
      margin-top: 10px !important;
    }

    #reports-selectors-div > div.radio {
      margin: 0 !important;
    }

  #reports-controls {
    padding-bottom: 10px !important;
    display: inline !important;
  }

  .reports-dropdown-group {
    display: inline-block;
    padding: 5px !important;
  }

    .reports-dropdown-group label {
      margin-top: 0px !important;
    }

  #reports-date-range {
    display: inline !important;
  }

  #reports-drop-pay-period-start-end-dates-div {
    margin-left: 23px !important;
    margin-bottom: 10px !important;
  }

  .reports-dropdown-label {
    display: block;
    padding-left: 0px !important;
  }

  .reports-selection-container > div > div.radio {
    margin: 0 !important;
  }

  .report-selection {
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px 10px !important;
  }

    .report-selection > div.report-name-list {
      padding: 0 !important;
    }

    .report-selection div.report-type-buttons {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      align-content: center !important;
      gap: 15px 5px !important;
    }

  .reports-date-range-controls {
    padding-bottom: 10px !important;
    display: inline !important;
  }

    .reports-date-range-controls > label {
      display: block !important;
      padding-bottom: 10px !important;
    }

  i[entry-item] {
    margin-left: 5px !important;
  }
}




/*******************************************************************
      ___ ___ ___ ___ ___ ___ _   ___ _      ___ _   _   _ ___ 
     |_  ) _ )_ _/ __|_  ) __/_\ |_ _| |    | _ ) | | | | | __|
      / /| _ \| | (_ |/ /| _/ _ \ | || |__  | _ \ |_| |_| | _| 
     /___|___/___\___/___|_/_/ \_\___|____| |___/____\___/|___|
                                          
*******************************************************************/
@media (min-width: 1148px) { /* and ( max-width: 1199px) */

  /************************************************
    Timesheet Edit Entries and Use Defaults Dialog 
  *************************************************/
  /*background-color: #007bff !important;*/

  .form-horizontal.form-bordered .form-group > .control-label {
    padding: 2px 0px 0px 0px !important;
    margin: 0px 0px 0px 0px !important;
    text-align: left !important;
    line-height: 34px !important;
  }

  .form-horizontal.form-bordered .form-group > .form-group-span-text.checkbox {
    padding: 3px 23px !important;
  }

  .form-horizontal.form-bordered .form-group > div > div > input[type="text"] {
    width: 251px !important;
    max-width: 251px !important;
  }

  .form-horizontal.form-bordered .form-group > div > input[type="text"] {
    padding-top: 8px !important;
  }

  .form-horizontal.form-bordered .form-group > div {
    padding: 0 13px 15px !important;
  }

    /* splitting out dialog options from action buttons */
    .form-horizontal.form-bordered .form-group > div.split-footer {
      display: flex !important;
      justify-content: space-between !important;
      padding: 15px 0 5px 0px !important;
    }

      .form-horizontal.form-bordered .form-group > div.split-footer:first-child {
        margin-left: 0 !important;
      }

      .form-horizontal.form-bordered .form-group > div.split-footer:last-child {
        margin-right: 0 !important;
      }


  /************************************************
    That flipping tree properties panel (tabs)
  *************************************************/
  div.tree-item-property-panel {
    padding: 20px 0px 0px 15px !important;
  }

    div.tree-item-property-panel > div > div.tab-content.scrollable {
      height: auto !important;
    }

    div.tree-item-property-panel > div > ul {
      display: none !important;
    }

  div.jstree-panel > div > div > div > div.radio {
    padding-top: 0 !important;
  }

  div.jstree-panel > div > div > div > div > div > div.jstree-dropdown-group {
    padding-top: 0 !important;
  }


  /*********************************************************************************************************************
    REPORTS
  **********************************************************************************************************************/
  .reports-selection-container {
    /*background-color: #007bff !important;*/
  }

  #reports-selectors-div {
    margin-bottom: 15px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 0px 30px !important;
  }

    #reports-selectors-div > div.radio > label > input {
      margin-top: 10px !important;
    }

  #reports-controls {
    padding-bottom: 10px !important;
    display: inline !important;
  }

  .reports-dropdown-group {
    display: inline-block;
    padding: 5px !important;
  }

    .reports-dropdown-group label {
      margin-top: 0px !important;
    }

  #reports-date-range {
    display: inline !important;
  }

  #reports-drop-pay-period-start-end-dates-div {
    margin-left: 23px !important;
    margin-bottom: 10px !important;
  }

  .reports-dropdown-label {
    display: block;
    padding-left: 0px !important;
  }

  .reports-selection-container > div > div.radio {
    margin: 0 !important;
  }

  .report-selection {
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px 10px !important;
  }

    .report-selection > div.report-name-list {
      padding: 0 !important;
    }

    .report-selection div.report-type-buttons {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      align-content: center !important;
      gap: 15px 5px !important;
    }
}








/**************************************************************************************/
/*                                                                                    */
/*                 FORM GROUP FOOTER (TIMESHEET/DEFAULTS ENTRY DIALOGS                */
/*                                                                                    */
/**************************************************************************************/
.form-horizontal.form-bordered .form-group > div.form-group-footer {
  float: right !important;
  margin: 20px 10px 10px 0px !important;
  padding: 0px 0px 0px 0px !important;
}

.modal-content {
  padding: 10px 10px 0px 15px !important; /* added */
  margin-left: 15px !important;
}

/* Get rid of the annoying "double border" on select dropdowns */
.select2-container {
  border: 0 !important;
}

.modal-footer {
  text-align: right !important;
}






/* TEST */
div.copy-timesheet > form > div > label {
  padding: 0 !important;
  background-color: red !important;
}

div.copy-timesheet > form > div > div {
  padding: 0 !important;
  background-color: red !important;
}

/*div#modal-copy-timesheet > div > div > div.modal-footer {
  display: flex !important;
  align-content: end !important;
}*/





.sidebar > div > div ul.nav > li a {
  cursor: pointer !important;
  /*background-color: red !important;*/
}






.fg-blue {
  color: #0085CA !important;
}

.btn.btn-scroll-to-top {
  background-color: #0085CA !important;
}



.table-responsive {
  border: 0 !important;
}


.disabler {
  opacity: 0.5;
}



/*
.reports-selection-container {
  border: 1px solid red !important;
}

.reports-selectors-div {
  border: 1px solid blue !important;
}

.report-selection {
  border: 1px solid orange !important;
}

.report-name-list {
  border: 3px solid #dc3545 !important;
}

.report-type-buttons {
  border: 2px solid #007bff !important;
}
*/

.error-content {
  background-color: #005C97 !important
}

.dropdown-item.disabled, .dropdown-item:disabled {
  color: #6c757d;
  background-color: transparent;
}

  .dropdown-item.disabled:hover {
    color: #6c757d !important;
    background-color: transparent;
  }

.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
  background: #0085CA !important;
  border-color: #0085CA !important;
  color: #fff !important;
}



/********************************************************************************************/
/********************************************************************************************/

/* Google Material Design Icons */
/* https://fonts.google.com/icons?icon.set=Material+Icons&icon.query=read&icon.style=Filled */

/********************************************************************************************/
/********************************************************************************************/

.btn {
  font-size: 13px;
}


/*************/
/*  REGULAR  */
/*************/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/materialicons-regular.ttf') format('truetype');
}


.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 0 !important; /* changed */
  vertical-align: middle; /* changed */
  position: relative; /* changed */
  top: 0px; /* changed -1 */
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

  .material-icons.ugly-override {
    top: -1px !important;
  }

  /* Rules for sizing the icon. */
  .material-icons.md-18 {
    font-size: 18px;
  }

  .material-icons.md-22 {
    font-size: 22px;
  }

  .material-icons.md-20 {
    font-size: 22px;
  }

  .material-icons.md-24 {
    font-size: 24px;
  }

  .material-icons.md-26 {
    font-size: 26px;
  }

  .material-icons.md-36 {
    font-size: 36px;
  }

  .material-icons.md-48 {
    font-size: 48px;
  }

  /* Rules for using icons as black on a light background. */
  .material-icons.md-dark {
    color: rgba(0, 0, 0, 0.54);
  }

    .material-icons.md-dark.md-inactive {
      color: rgba(0, 0, 0, 0.26);
    }

  /* Rules for using icons as white on a dark background. */
  .material-icons.md-light {
    color: rgba(255, 255, 255, 1);
  }

    .material-icons.md-light.md-inactive {
      color: rgba(255, 255, 255, 0.3);
    }


/************/
/* OUTLINED */
/************/
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/MaterialIconsOutlined-Regular.otf') format('opentype');
}


.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 0 !important; /* changed */
  vertical-align: middle; /* changed */
  position: relative; /* changed */
  top: 0px; /* changed -1 */
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}


  /* Rules for sizing the icon. */
  .material-symbols-outlined.md-18 {
    font-size: 18px;
  }

  .material-symbols-outlined.md-20 {
    font-size: 22px;
  }

  .material-symbols-outlined.md-22 {
    font-size: 22px;
  }

  .material-symbols-outlined.md-24 {
    font-size: 24px;
  }

  .material-symbols-outlined.md-26 {
    font-size: 26px;
  }

  .material-symbols-outlined.md-36 {
    font-size: 36px;
  }

  .material-symbols-outlined.md-48 {
    font-size: 48px;
  }

  /* Rules for using icons as black on a light background. */
  .material-symbols-outlined.md-dark {
    color: rgba(0, 0, 0, 0.54);
  }

    .material-symbols-outlined.md-dark.md-inactive {
      color: rgba(0, 0, 0, 0.26);
    }

  /* Rules for using icons as white on a dark background. */
  .material-symbols-outlined.md-light {
    color: rgba(255, 255, 255, 1);
  }

    .material-symbols-outlined.md-light.md-inactive {
      color: rgba(255, 255, 255, 0.3);
    }



/*************/
/*  ROUNDED  */
/*************/
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/MaterialIconsRound-Regular.otf') format('opentype');
}


.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 0 !important; /* changed */
  vertical-align: middle; /* changed */
  position: relative; /* changed */
  top: 0px; /* changed -1 */
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}


  /* Rules for sizing the icon. */
  .material-symbols-rounded.md-18 {
    font-size: 18px;
  }

  .material-symbols-rounded.md-20 {
    font-size: 22px;
  }

  .material-symbols-rounded.md-22 {
    font-size: 22px;
  }

  .material-symbols-rounded.md-24 {
    font-size: 24px;
  }

  .material-symbols-rounded.md-26 {
    font-size: 26px;
  }

  .material-symbols-rounded.md-36 {
    font-size: 36px;
  }

  .material-symbols-rounded.md-48 {
    font-size: 48px;
  }

  /* Rules for using icons as black on a light background. */
  .material-symbols-rounded.md-dark {
    color: rgba(0, 0, 0, 0.54);
  }

    .material-symbols-rounded.md-dark.md-inactive {
      color: rgba(0, 0, 0, 0.26);
    }

  /* Rules for using icons as white on a dark background. */
  .material-symbols-rounded.md-light {
    color: rgba(255, 255, 255, 1);
  }

    .material-symbols-rounded.md-light.md-inactive {
      color: rgba(255, 255, 255, 0.3);
    }


/***********/
/*  SHARP  */
/***********/
@font-face {
  font-family: 'Material Symbols Sharp';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/MaterialIconsSharp-Regular.otf') format('opentype');
}


.material-icons-sharp {
  font-family: 'Material Symbols Sharp';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 0 !important; /* changed */
  vertical-align: middle; /* changed */
  position: relative; /* changed */
  top: 0px; /* changed -1 */
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}


  /* Rules for sizing the icon. */
  .material-icons-sharp.md-18 {
    font-size: 18px;
  }

  .material-icons-sharp.md-20 {
    font-size: 22px;
  }

  .material-icons-sharp.md-22 {
    font-size: 22px;
  }

  .material-icons-sharp.md-24 {
    font-size: 24px;
  }

  .material-icons-sharp.md-26 {
    font-size: 26px;
  }

  .material-icons-sharp.md-36 {
    font-size: 36px;
  }

  .material-icons-sharp.md-48 {
    font-size: 48px;
  }

  /* Rules for using icons as black on a light background. */
  .material-icons-sharp.md-dark {
    color: rgba(0, 0, 0, 0.54);
  }

    .material-icons-sharp.md-dark.md-inactive {
      color: rgba(0, 0, 0, 0.26);
    }

  /* Rules for using icons as white on a dark background. */
  .material-icons-sharp.md-light {
    color: rgba(255, 255, 255, 1);
  }

    .material-icons-sharp.md-light.md-inactive {
      color: rgba(255, 255, 255, 0.3);
    }



#front-desk-buttons {
  /*Reserved*/
}

#process-payperiod-buttons {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 5px !important;
  padding-bottom: 15px !important;  
}

  #process-payperiod-buttons div:first-child {
    padding-right: 10px;
  }




.single-tab-button-container a.btn-sm {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}



.alert-colors {
  color: #7b4e0e !important;
  background-color: #fce1ba !important;
  border: 1px solid #dbbfaa !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
}



#qtfrontdesk-buttons {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px 5px !important;
  display: flex !important;
}




/************************************************************* 
 *************************************************************

  Normal Flex Buttons (DEF)

 *************************************************************
**************************************************************/
.inner-button-group {
  align-items: flex-start;
  display: inline-flex;
}





.timesheet-summary-button-bar-space-dropout {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  padding-top: 15px !important;
}

.timesheet-summary-button-bar-space {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
}

  .timesheet-summary-button-bar-space .middle-button-group {
    justify-content: center !important;
    display: none !important;
  }

  .timesheet-summary-button-bar-space .right-button-group {
    align-items: flex-start !important;
    gap: 5px 5px !important;
    justify-content: flex-end !important;
    display: flex !important;
  }

@media (min-width: 320px) and ( max-width: 575px) {
  .timesheet-summary-button-bar-space {
  }

    .timesheet-summary-button-bar-space .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space .middle-button-group {
      display: none !important;
    }

    .timesheet-summary-button-bar-space .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-dropout {
    display: flex !important;
  }
}


@media (min-width: 576px) and ( max-width: 767px) {
  .timesheet-summary-button-bar-space {
  }

    .timesheet-summary-button-bar-space .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space .middle-button-group {
      display: none !important;
    }

    .timesheet-summary-button-bar-space .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-dropout {
    display: flex !important;
  }
}

@media (min-width: 768px) and ( max-width: 979px) {
  .timesheet-summary-button-bar-space {
  }

    .timesheet-summary-button-bar-space .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space .middle-button-group {
      display: none !important;
    }

    .timesheet-summary-button-bar-space .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-dropout {
    display: flex !important;
  }
}

@media (min-width: 980px) { /* and ( max-width: 1199px) */
  .timesheet-summary-button-bar-space {
  }

    .timesheet-summary-button-bar-space .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space .middle-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-dropout {
    display: none !important;
  }
}

@media (min-width: 1148px) { /* and ( max-width: 1199px) */
  .timesheet-summary-button-bar-space {
  }

    .timesheet-summary-button-bar-space .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space .middle-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-dropout {
    display: none !important;
  }
}





/************************************************************* 
 *************************************************************

  Timesheet List Entries (ENT)

 *************************************************************
**************************************************************/
.inner-button-group {
  align-items: flex-start;
  display: inline-flex;
}




.timesheet-summary-button-bar-space-ent-dropout {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  padding-top: 15px !important;
}


.timesheet-summary-button-bar-space-ent {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
}

  .timesheet-summary-button-bar-space-ent .middle-button-group {
    justify-content: center !important;
    display: none !important;
  }

  .timesheet-summary-button-bar-space-ent .right-button-group {
    align-items: flex-start !important;
    gap: 5px 5px !important;
    justify-content: flex-end !important;
    display: flex !important;
  }


@media (min-width: 320px) and ( max-width: 575px) {
  .timesheet-summary-button-bar-space-ent {
  }

    .timesheet-summary-button-bar-space-ent .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space-ent .middle-button-group {
      display: none !important;
    }

    .timesheet-summary-button-bar-space-ent .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-ent-dropout {
    display: flex !important;
  }
}


@media (min-width: 576px) and ( max-width: 767px) {
  .timesheet-summary-button-bar-space-ent {
  }

    .timesheet-summary-button-bar-space-ent .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space-ent .middle-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-ent .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-ent-dropout {
    display: none !important;
  }
}

@media (min-width: 768px) and ( max-width: 979px) {
  .timesheet-summary-button-bar-space-ent {
  }

    .timesheet-summary-button-bar-space-ent .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space-ent .middle-button-group {
      display: none !important;
    }

    .timesheet-summary-button-bar-space-ent .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-ent-dropout {
    display: flex !important;
  }
}

@media (min-width: 980px) { /* and ( max-width: 1199px) */
  .timesheet-summary-button-bar-space-ent {
  }

    .timesheet-summary-button-bar-space-ent .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space-ent .middle-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-ent .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-ent-dropout {
    display: none !important;
  }
}

@media (min-width: 1148px) { /* and ( max-width: 1199px) */
  .timesheet-summary-button-bar-space-ent {
  }

    .timesheet-summary-button-bar-space-ent .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space-ent .middle-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-ent .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-ent-dropout {
    display: none !important;
  }
}



/************************************************************* 
 *************************************************************

  Leave Request (LRQ)

 *************************************************************
**************************************************************/
.inner-button-group {
  align-items: flex-start;
  display: inline-flex;
}




.timesheet-summary-button-bar-space-lrq-dropout {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  padding-top: 15px !important;
}


.timesheet-summary-button-bar-space-lrq {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
}

  .timesheet-summary-button-bar-space-lrq .middle-button-group {
    justify-content: center !important;
    display: none !important;
  }

  .timesheet-summary-button-bar-space-lrq .right-button-group {
    align-items: flex-start !important;
    gap: 5px 5px !important;
    justify-content: flex-end !important;
    display: flex !important;
  }

@media (min-width: 320px) and ( max-width: 575px) {
  .timesheet-summary-button-bar-space-lrq {
  }

    .timesheet-summary-button-bar-space-lrq .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space-lrq .middle-button-group {
      display: none !important;
    }

    .timesheet-summary-button-bar-space-lrq .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-lrq-dropout {
    display: flex !important;
  }
}


@media (min-width: 576px) and ( max-width: 800px) {
  .timesheet-summary-button-bar-space-lrq {
  }

    .timesheet-summary-button-bar-space-lrq .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space-lrq .middle-button-group {
      display: none !important;
    }

    .timesheet-summary-button-bar-space-lrq .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-lrq-dropout {
    display: flex !important;
  }
}

@media (min-width: 801px) and ( max-width: 979px) {
  .timesheet-summary-button-bar-space-lrq {
  }

    .timesheet-summary-button-bar-space-lrq .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space-lrq .middle-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-lrq .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-lrq-dropout {
    display: none !important;
  }
}

@media (min-width: 980px) { /* and ( max-width: 1199px) */
  .timesheet-summary-button-bar-space-lrq {
  }

    .timesheet-summary-button-bar-space-lrq .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space-lrq .middle-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-lrq .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-lrq-dropout {
    display: none !important;
  }
}

@media (min-width: 1148px) { /* and ( max-width: 1199px) */
  .timesheet-summary-button-bar-space-lrq {
  }

    .timesheet-summary-button-bar-space-lrq .left-button-group {
      display: flex !important;
      flex-wrap: nowrap !important;
    }

    .timesheet-summary-button-bar-space-lrq .middle-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-lrq .right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-lrq-dropout {
    display: none !important;
  }
}





/************************************************************* 
 *************************************************************

  Timesheet Navigator (SUM)

 *************************************************************
**************************************************************/

.timesheet-summary-button-bar-space-sum-dropout {
  padding-top: 10px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-around !important;
  gap: 5px 5px !important;
}


.timesheet-summary-button-bar-space-sum {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 0px 3px !important;
}

  .timesheet-summary-button-bar-space-sum > div.middle-button-group {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    flex-grow: 4;
  }

  .timesheet-summary-button-bar-space-sum > div.left-button-group {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 0px 3px !important;
  }

  .timesheet-summary-button-bar-space-sum > div.right-button-group {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 0px 3px !important;
  }


  /*DEBUG*/
  .timesheet-summary-button-bar-space-sum > div {
  }

  .timesheet-summary-button-bar-space-sum > a {
  }


@media (min-width: 300px) {
  .timesheet-summary-button-bar-space-sum {
  }

    .timesheet-summary-button-bar-space-sum div.left-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-sum div.middle-button-group {
      display: none !important;
    }

    .timesheet-summary-button-bar-space-sum div.right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-sum-dropout {
    display: flex !important;
  }
}

@media (min-width: 660px) {
  .timesheet-summary-button-bar-space-sum {
  }

    .timesheet-summary-button-bar-space-sum div.left-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-sum div.middle-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-sum div.right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-sum-dropout {
    display: none !important;
  }
}

@media (min-width: 770px)  {
  .timesheet-summary-button-bar-space-sum {
  }

    .timesheet-summary-button-bar-space-sum div.left-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-sum div.middle-button-group {
      display: none !important;
    }

    .timesheet-summary-button-bar-space-sum div.right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-sum-dropout {
    display: flex !important;
  }
}

@media (min-width: 910px)  {
  .timesheet-summary-button-bar-space-sum {
  }

    .timesheet-summary-button-bar-space-sum div.left-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-sum div.middle-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-sum div.right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-sum-dropout {
    display: none !important;
  }
}

@media (min-width: 990px) {
  .timesheet-summary-button-bar-space-sum {
  }

    .timesheet-summary-button-bar-space-sum div.left-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-sum div.middle-button-group {
      display: none !important;
    }

    .timesheet-summary-button-bar-space-sum div.right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-sum-dropout {
    display: flex !important;
  }
}

@media (min-width: 1210px) {
  .timesheet-summary-button-bar-space-sum {
  }

    .timesheet-summary-button-bar-space-sum div.left-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-sum div.middle-button-group {
      display: flex !important;
    }

    .timesheet-summary-button-bar-space-sum div.right-button-group {
      display: flex !important;
    }

  .timesheet-summary-button-bar-space-sum-dropout {
    display: none !important;
  }
}




/* Responsive Login Screen Logo */

.small-logo {
  display: flex;
  justify-content: center;
}

.login-logo-image {
  display: inline;
}

.small-logo-image {
  display: inline;
  margin-bottom: 15px;
  opacity: .55;
  width: 400px;
}


@media (min-width: 576px) {
  .brand {
    /*background-color: lightcoral;*/
  }

  .login-logo-image {
    display: none;
  }

  .small-logo-image {
    display: inline;
  }

  .login-header .icon {
    display: none;
  }
}


@media (min-width: 768px) {
  .brand {
    /*background-color: lightgreen;*/
  }

  .login-logo-image {
    display: inline;
    width: 375px;
  }

  .small-logo-image {
    display: none;
  }

  .login-header .icon {
    display: inline;
  }
}


@media (min-width: 992px) {
  .brand {
    /*background-color: lightskyblue;*/
  }

  .login-logo-image {
    display: inline;
    width: 450px;
  }
}


@media (min-width: 1200px) {
  .brand {
    /*background-color: lightskyblue;*/
  }

  .login-logo-image {
    display: inline;
    width: 554px;
  }
}







/************************************/
/*        A B O U T   B O X         */
/************************************/
.split-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; /* flex-start */ 
  color: #999;
}

.release-notes {
  color: #777;
}

  .release-notes h1,
  .release-notes h2,
  .release-notes h3,
  .release-notes h4,
  .release-notes h5,
  .release-notes h6 {
    color: #777;
  }

  .release-notes h4 {
    margin-top: 10px;
    margin-bottom: 5px;
  }

  .release-notes h5 {
    display: inline;
    color: #7b4e0e !important;
    background-color: #fce1ba !important;
    border: 1px solid #dbbfaa !important;
    padding: 3px 5px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 3px;
  }

  .release-notes h3 {
    margin-top: 0;
    margin-bottom: 25px;
  }





/**************************************************************************************/
/*                                                                                    */
/*                             login page: re-revisted                                */
/*                                                                                    */
/**************************************************************************************/
.small-caption-title {
  display: flex;
  justify-content: center;
  font-size: 60px;
  font-weight: 600;
  opacity: 50%;
  width: 100%;
}

.login.login-with-news-feed .login-header .icon {
  top: 180px;
  right: 40px;
}



.login.login-with-news-feed {
  overflow: initial;
}



@media(max-width: 766px) {
  .login.login-with-news-feed {
    overflow-x: hidden;
  }

    .login.login-with-news-feed .login-header {
    }

  .small-caption-title {
    display: flex;
    justify-content: center;
    font-size: 60px;
    font-weight: 600;
    opacity: 50%;
    width: 100%;
  }
}


@media(min-width: 767px) {
  .small-caption-title {
    display: none;
  }

  .login.login-with-news-feed {
    overflow-x: hidden;
  }

    .login.login-with-news-feed .login-header {
      width: 360px;
      padding-left: 45px;
      padding-right: 45px;
    }

  .login-header .icon {
    display: none;
  }

  .login.login-with-news-feed .login-content {
    padding-right: 45px;
  }
}

@media(min-width: 979px) {
  .small-caption-title {
    display: none;
  }

  .login.login-with-news-feed {
    overflow-x: hidden;
  }

    .login.login-with-news-feed .login-header {
      width: 360px;
      padding-left: 45px;
      padding-right: 45px;
    }

  .login-header .icon {
    display: none;
  }

  .login.login-with-news-feed .login-content {
    padding-right: 45px;
  }
}

@media(min-width: 1025px) {
  .login.login-with-news-feed .login-header .icon {
    top: 96px;
    right: 40px;
  }

  .small-caption-title {
    display: none;
  }

  .login.login-with-news-feed {
    overflow-x: initial;
  }

    .login.login-with-news-feed .login-header {
      width: 486px;
      padding-left: 60px;
      padding-right: 45px;
    }

  .login-header .icon {
    display: inline;
  }

  .login.login-with-news-feed .login-content {
    padding-right: 60px;
  }
}





.junk {
  padding-top: 30px;
}