/**
 * Generic css file used for pages.  If there is a
 * need for a specific, targeted class for a page,
 * then that should be put in page-specific.css
 */

body, button, input, option, select, table, textarea {
   font-family: Arial, Verdana, Helvetica, sans-serif;
   font-size: 14px;
   font-style: normal;
   font-weight: normal;
}

body {
   background-color: #fff;
   margin: 0;
   color: #333333;
   min-width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

input, textarea, select, checkbox {
   border: 1px #D0D0CC solid;
   padding: 2px 4px;
   border-radius: 3px;
}

input[type="text"] {
   height: 17px;
}

input[type="text"] + span.label {
    margin-left: 10px;
}

input:enabled:hover:not([readonly]),
textarea:enabled:hover:not([readonly]),
select:enabled:hover:not([readonly]),
checkbox:enabled:hover {
   border-color: #33CCFF;
}

input[type="image"], input[type="file"] {
   border: none;
}

.timesheet-toggle-container {
   /* positions the toggle to be lined up with the page title */
   margin-top: -22px;
   margin-right: 30px;
   position: absolute;
   right: 0;
}

.timelist-toggle-container {
   margin-bottom: 10px;
}

.toggle-container {
   align-items: center;
   display: flex;
   justify-content: right;
   cursor: pointer;

    & * {
       cursor: pointer;
    }

   & input:checked + .toggle{
      background-color: rgb(58, 195, 58);
   }
   & input:checked + .toggle::before{
      transform: translateX(20px);
   }

   & .toggle-checkbox {
      display: none;
   }

   & .toggle-text {
      font-family: Roboto, Arial, Verdana, Helvetica, sans-serif;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      padding-left: 8px;
   }

   & .toggle {
      background-color: #d0d5dd;
      border-radius: 200px;
      height: 20px;
      padding: 1px;
      position: relative;
      transition: 0.2s;
      width: 36px;
   }

   & .toggle::before {
      background-color: white;
      border-radius: 50%;
      box-shadow: 0px 1px 3px 0px #1018281a;
      content: '';
      height: 18px;
      margin: 1px;
      position: absolute;
      transition: 0.2s;
      width: 18px;
   }
}

input[disabled][type="text"],
input[disabled][type="password"],
input[disabled][type="file"],
input[disabled][type="checkbox"],
input[readonly][type="text"],
input[readonly][type="password"],
input[readonly][type="file"],
input[readonly][type="checkbox"],
textarea[disabled],
textarea[readonly],
select[disabled] {
   background-color: #EDEDED !important;
}

textarea {
   white-space: pre-wrap;
}

td {
   vertical-align: top;
}

.td-red {
   vertical-align: top;
   color: #CD4747;
}

thead td, th {
   vertical-align: bottom;
}

#rightLink {
   list-style: none;
}

#tabs-and-links > #tabs + #action-links {
  position: absolute;
  top: 0;
  left: 300px;
}

#action-links a {
   padding-right: 18px;
   white-space: nowrap;
}

#action-links ul {
   list-style: none;
   margin-right: 3px;
   margin-bottom: 5px;
}

#action-links li {
   text-align: right;
   white-space: nowrap;
}

img {
   border: none;
   vertical-align: middle;
}

img[title="Move Up"]:hover,
img[title="Move Down"]:hover,
img[title="Calendar"]:hover {
   cursor: pointer;
}

form {
   padding: 0;
   margin: 0;
}

img#logo {
   height: 44px;
   width: 162px;
}

div.title,
div.noicon-title,
table.head td.title {
   color: #00134E;
   font-size: 20px;
   margin: 0px;
   white-space: nowrap;
}

div.title {
   padding: 20px 0 10px 0;
}

div.noicon-title {
   padding: 20px 0 10px 0;
}

div#body div.noicon-title span.section {
   margin-left: 0;
}

div.noicon-title span.section {
   margin-left: 15px;
}

div.title span.sub-title-sub {
   font-size: 11px;
}

/**
 * Example Ref: People Profile Password
 */
div.title-right.hint, div.noicon-title-right.hint {
   text-align: left;
   margin-top: 0px;
   float: right;
}

div.title-right {
   padding: 20px 10px 0 0;
}

div.noicon-title-right {
   padding: 20px 25px 0 0;
   z-index: 99;
}

div#page-title-cont {
  display: flex;
  justify-content: space-between;
}

div#page-title-right img {
   border: none;
   vertical-align: middle;
}

div#page-title-right a {
   text-decoration: none;
   color: #6692CD;
}

div#page-title-right a:hover {
   color: #335F9A;
}

@media print {
   a#print-unfriendly {
      display: none;
      visibility: hidden;
   }
}

div.body {
   margin: 0 0 15px 15px;
}

div.body a {
   text-decoration: none;
}

div.body a:link, div.body a:visited, .hotlink {
   color: #6692CD;
   font-weight: 400;
   cursor: pointer;
   font-size: 14px;
}

div.body a:hover, .hotlink:hover {
   color: #335F9A;
   cursor:pointer;
}

div.info, div.warning, div.error {
   width: 95%;
   min-width: 550px;
   border: 1px solid #DCDFED;
}

div.info, div.warning, div.error {
   margin: 10px 0px;
   padding: 5px 15px;
}

div.info {
    background-image: url(../images/information_large.png);
    background-position: 15px center;
    background-repeat: no-repeat;
}

div.info ul {
   display: inline-block;
   list-style-type: none;
}

div.info ul,
div.info p {
   padding-left: 40px;
}

div.info div.vspText {
   padding: 10px 0px 10px 40px;
}

div.info, div.info ul li {
   color: #335F9A;
   background-color: #DAE4F3;
}

div.info {
   border: none;
}

div.info-message {
   border: 1px solid #DCDFED;
   color: #335F9A;
   background-color: #DAE4F3;
   padding: 10px;
   padding-left: 50px;
   background-image: url(../images/information_large.png);
   background-position: 15px center;
   background-repeat: no-repeat;
   font-style: italic;
}

div.time-zone-text {
   background-image: url(../images/information_large.png);
   background-position: 15px center;
   background-repeat: no-repeat;
   margin: 0;
   padding: 1px 0 1px;
}

div.time-zone-text p {
   height: 14px;
   font-size: 12px;
   padding-left: 41px !important;
   margin: 12px 0px !important;
}

div.time-zone-text.not-visible {
   visibility: hidden;
}

div.warning, div.warning ul li {
   color: #E2760A;
   background-color: #FDE7D0;
}

div.warning {
   border: none;
}

div.error, div.error ul li {
   color: #CD4747;
   background-color: #F5E0E0;
}

div.error {
   border: 1px solid #CD4747;
}

div.error table td.item {
   font-weight: bold;
   white-space: nowrap;
   padding: 10px 0 3px 0;
}

div.error table td.item .task {
   margin-left: 15px;
}

div.error table td ul {
   margin-top: auto;
   margin-bottom: auto;
}

/*TODO: clean-up these table.* styles.  Timesheet is no longer using them for errors. VY */
table.body-main div.message {
   color: #CD4747;
   font-weight: bold;
   padding: 0 0.5em 0.5em 0.5em;
}

div.alerts {
   margin: 0px 0px 15px 0px;
}

div.alerts a {
    background: #FDE7D0;
    padding: 10px;
    display: block;
}

div.alerts span.label {
    color: #E2760A;
}

div.feedback {
   margin-left: 25px;
}

div.lr-status,
div.req-status {
   text-align: right;
   margin: -40px 30px 10px 0;
   float: right;
}

p.alert {
   color: #CD4747;
}

p.label {
   font-weight: 600;
   padding-left: 10px;
}

p.text {
   padding-left: 20px;
}

p.preview {
   text-align: center;
}

p.preview img {
   margin-left: auto;
   margin-right: auto;
}

div#footer-parent {
	position:sticky;
	bottom:0;
	width:100%;
	margin-top: auto;
}

div#footer-parent.sandbox {
	min-width: 1545px;
}

div#footer-parent.prod {
	min-width: 1360px;
}

div#page-footer {
   background-color: #10365A;
   color: #FFFFFF;
   margin-top: 0px;
   font-size: 12px;
   padding: 5px 20px 5px 15px;
   display: flex;
   justify-content: space-between;
}

div#page-footer div.about {
   display: flex;
   align-items: center;
   column-gap: 10px;
}

div#page-footer div.about img {
   height: 2rem;
}

div#page-footer div.copyright {
   display: flex;
   align-items: center;
   white-space: pre-wrap;
}

div#page-stats {
  font-size: 11px;
  margin-left: 10px;
  background-color: #fff;
}

div#page-footer div.about a, div#page-footer div.copyright a {
   color: white;
   text-decoration: none;
}

div#page-notice {
   color: #335F9A;
   background-color: #DAE4F3;
   border: none;
   position: fixed;
   bottom: 0px;
   width: 100%;
   text-align: center;
}

div#page-notice div.banner {
   text-align: left;
   padding-top: 10px;
   padding-bottom: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
}

div#page-notice div.banner div.banner-text {
   margin-right: 20px;
   max-width: 80%;
}

div#nav-links-bottom, div#nav-links-top {
   text-decoration: none;
   color: #6692CD;
   background-color: #F2F3F9;
   padding: 0px 3px 0px 20px;
   font-size: 14px;
   height: 30px;
   line-height: 30px;
}


div#nav-links-top a, div#nav-links-bottom a {
   text-decoration: none;
   color: #6692CD;
   margin-right: 20px;
}

div#nav-links-top a:hover, div#nav-links-bottom a:hover {
   color: #335f9a;
}

.hint .footnote {
  display: inline-block;
  color: #6692CD;
  cursor: help;
  font-size: 12px;
}

div.button-bar,
div#buttons {
   padding: 10px 50px 10px 0;
}

div.button-bar-inner {
   padding-left: 15px;
   padding-bottom: 10px;
}

div.help {
   margin-top: -10px;
   text-align: right;
   float: right;
}

div.quicksearch table.list tr {
   border: none;
}

div.quicksearch tr.footer td {
   font-size: 10px;
   text-align: center;
   text-transform: uppercase;
}

div.quicksearch tr.input td {
   padding-top: 15px;
}

div.quicksearch table.list tr:hover {
   background-color: #FFFFFF;
}

html > body > div#page-menu + div.body {
   margin-bottom: 0px;
}

html > body > div#body {
   margin-bottom: 0px;
   padding-right: 10px;
}

body > div#footer {
   padding-left: 25px;
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: white;
   border-top: 2px solid #335F9A;
   position: fixed;
}

h2 {
   font-size: 16px;
   font-weight: 400;
   margin: 20px 5px 5px 5px;
   padding: 0;
}

th, label, legend, .label {
   font-size: 14px;
   color: #333333;
   font-weight: 400;
   padding-right: 0.5em;
}

.label-bold {
   font-size: 14px;
   font-weight: 600;
   padding-right: 5px;
}

fieldset legend {
   color: #333333;
   font-weight: 400;
   margin-left: 5px;
   text-align: left;
   text-transform: uppercase;
   font-size: 14px;
}

fieldset {
   border: 1px #D0D0CC solid;
   border-radius: 3px;
}

fieldset table {
   border-collapse: collapse;
   margin: 8px 8px 8px 0px;
}

.number {
   white-space: nowrap;
   text-align: right;
}

.section .section-title {
    font-weight: bold;
    font-size: 12px;
    color: #29457b;
 }

.section .add-link {
   font-weight: bold;
   color: #29457b;
   text-align: right;
}

.section .section-body {
   padding-bottom: 10px;
   padding-right: 10px;
}

.section label, .section .label {
   font-size: 16px;
}

.section thead tr {
   height: 40px;
}

.section thead tr td {
   vertical-align: middle;
}

.hint {
   color: #333333;
   font-size: 12px;
   text-transform: inherit;
}

.hint span {
    display: block;
    padding-bottom: 0;
}

.hint img + span {
    display: inherit;
    padding-left: 5px;
}

span.hint + div {
    margin-top: 10px;
}

.saved-msg {
   padding-bottom: 10px;
   color: #00134E;
   font-weight: 600;
}

/**
 * Project Edit Pay Codes
 */
td.label span.hint {
   display: inline-block;
}

tfoot td table.hint td,
table.hint tr td {
   border: none;
}

.float-left {
   float: left;
}

.float-right {
   float: right;
}

.right {
   text-align: right;
}

.left {
   text-align: left;
}

.center {
   text-align: center;
}

.nowrap {
   white-space: nowrap;
}

.error {
   color: #CD4747;
   font-weight: 400;
}

.info-space {
   margin-left: 3px;
}

.hidden {
   visibility: hidden;
   display: none;
}

.green {
   background-color: #a8e3ab;
}

.color-green {
   color: #00AD68;
}

.uppercase {
   text-transform: uppercase;
}

input.green[disabled][type="text"] {
   background-color: #cee8ca !important;
}

.color-red-orig {
   color: #ff0000;
}

.color-red,
.label-red,
.negative,
span.negative {
   color: #CD4747;
}

.warning-section {
   color: #CD4747;
   margin: 20px 0px 20px 10px;
}

.caution-section {
   color: #E2760A;
   margin: 20px 0px 20px 10px;
}

.spacing-section {
   margin-bottom: 20px;
   margin-left: 10px;
}

.spacing-section td.label {
   vertical-align: middle;
}

.red {
   background-color: #ff8369;
}

input.red[disabled][type="text"] {
   background-color: #eabaa9 !important;
}

.yellow {
   background-color: #ffec86;
}

input.yellow[disabled][type="text"] {
   background-color: #eae8b7 !important;
}

/* Ensure we don't catch Exago buttons (classes starting with wr) */
button:not([class^='wr']) {
   display: inline-block;
   white-space: nowrap;
   font-weight: bold;
   color: #FFFFFF;
   border: 1px #D0D0CC solid;
   border-radius: 2px !important;
   margin: 5px 5px 5px 0;
   padding: 10px;
   background: #6692CD;
   text-align: center;
   min-width: 85px;
   height: 40px;
}

/* Ensure we don't catch Exago buttons (classes starting with wr) */
button:focus:not([class^='wr']),
button:hover:not([class^='wr']) {
   background: #335F9A;
   cursor: pointer;
}

button[disabled],
button[disabled]:hover,
button[disabled]:active {
   cursor: default;
   background: #D0D0CC;
}

button#button_cancel,
button#people_button_cancel,
button#cancelSubmit,
button#ts_cancel,
button#sub_cancel,
button#profilecancel,
button#button_dont_send {
    background: none;
    border: none;
    color: #797979;
    font-weight: 400;
}

button#button_cancel:hover,
button#people_button_cancel:hover,
button#cancelSubmit:hover,
button#ts_cancel:hover,
button#profilecancel:hover,
button#button_dont_send:hover {
    color: #00134E;
}

hr {
   border: none;
   border-top: 1px solid #D0D0CC;
}

table.inner {
    margin: 5px;
    border: none;
}

table.inner thead {
    background-color: #f2f3f9;
}

table.inner td.empty {
   text-align: center;
   vertical-align: middle;
   font-style: italic;
}

table.inner thead td {
   text-align: center;
   vertical-align: middle;
   color: #333;
   font-weight: 400;
   font-size: 14px;
   text-transform: uppercase;
}

table.inner td {
   padding: 0 6px 4px 0;
   vertical-align: middle;
}
table.inner td:last-of-type {
   padding-left: 10px;
}
table.inner td:nth-of-type(2) {
   padding-right: 10px;
}

table.inner td.innerLabel {
   padding-left: 0;
}

div.criteria td.label table.inner tbody td {
   width: inherit;
}

a[name="categorize"] {
    padding-right: 10px;
}

table#msp-exports td.label,
table#msp-imports td.label {
   white-space: nowrap;
}

table.properties tbody.section-header td {
   padding-top: 0.75em;
}

table.properties td.label {
   padding-left: 4em;
   white-space: nowrap;
}

div.startup {
   color: #29457b;
   float: right;
   margin-top: -1em;
}

table.details td.date {
   white-space: nowrap;
}

table.copy-fields {
   width: 100%;
   border-collapse: collapse;
   margin-left: 10px;
}

table.copy-fields td.fields,
table.copy-fields td.fields + td {
   padding: 10px 10px 20px 0px;
}

table.copy-fields fieldset {
   padding: 10px 10px;
}

table.alert-title {
   width: 100%;
}

table.alert-title td {
   vertical-align: middle;
   padding: 0px;
}

table.alert-title td.title-right {
   text-align: right;
}

div.person span.label {
   font-weight: 600;
}

table.entity-cont {
   width: auto;
   min-width: 750px;
}

table.entity-cont.small {
   width: 800px;
   min-width: 800px;
}

div.cat {
   padding: 10px 10px;
   margin: 2px;
   border: 1px solid #D0D0CC;
   flex: 1 1 auto;
}

div#cat2 {
   margin-right: 20px;
}

.hide {
   display: none;
   visibility: hidden;
}

.padding-left {
   padding-left: 10px;
}
.padding-right {
   padding-right: 10px;
}

.margin-top {
   margin-top: 10px;
}

.margin {
   margin: 10px;
}

.padding-bottom {
   padding-bottom: 5px;
}

.padding-top {
   padding-top: 10px;
}

div.cont {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: 5px;
}

div.cat-cont {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-justify-content: space-around;
   justify-content: space-around;
   margin: 5px;
}

span.pending {
   color: #CD4747;
   text-transform: none;
   vertical-align: middle;
   padding-left: 15px;
}

form[name="mailAbout"] > div {
   margin-top: 20px;
}

table.tight tbody td.label {
   white-space: nowrap;
   font-weight: 600;
}

/**
 * Example Ref: Projects Expense Plans Grid
 */
div.info-header {
   margin-bottom: 10px;
}
div.info-header span.hint {
   padding-left: 5px;
}

.audit-link {
   float: right;
   text-transform: initial;
}


/**
 * table.history in Timesheet, Expense Report and Leave Preview
 */
table.history {
   border-collapse: collapse;
   margin: 10px 20px 20px 0px;
}

table.history td,
table.history th {
   padding: 3px 6px;
   line-height: 14px;
}

table.history thead {
   background-color: #F2F3F9;
}

table.history thead tr {
   border: 1px #D0D0CC solid;
   height: 40px;
}

table.history thead td,
table.history thead th,
table.history tfoot td {
   vertical-align: middle;
   text-transform: uppercase;
}

table.history tbody tr {
   height: 30px;
   border: 1px solid #D0D0CC;
}

table.history tbody tr.reviewed {
   color: #485490;
}

table.history tbody td {
   white-space: nowrap;
   vertical-align: top;
   padding-top: 10px;
}

table.history tbody tr:hover {
   background-color: #DCDFED;
}

table.history tbody td.status-date {
   white-space: nowrap;
   text-align: right;
}

table.history tbody td.status,
table.history tbody td.comments {
   white-space: normal;
}

table.history tbody td.empty {
   font-style: italic;
   padding: 0.5em 1em;
   text-align: center;
}

/**
 * Quick Links
 */
table.body-main td.reports a {
   color: #797979;
   font-size: 12px;
   font-weight: 400;
   text-decoration: none;
   display: block;
}
table.body-main td.reports a:hover {
   color: #335F9A;
}
table.body-main td.reports {
   width: 15%;
   padding: 20px 0 0 0;
   margin: 0;
   border-right: 1px solid #E7E9F3;
}
table.body-main td.reports ul {
   margin-bottom: 3px;
}
td.reports + td.body {
    padding-left: 20px;
}
/* TEMP */
div#my_reports, div#my_lists, div#shared_reports, div#quick_links, div#quick_reports div#analytics_links {
   margin-bottom: 10px;
   padding: 3px 6px;
   border-radius:3px;
}
/* TEMP */
div#my_reports label, div#my_lists label, div#shared_reports label, div#quick_links label, div#quick_reports label, div#analytics_links label, div#tips label {
   color: #797979;
   line-height: 26px;
   font-size: 14px;
}
ul.links {
   margin: 3px 0px 10px 10px;
   color:  #29457b;
   list-style-type: none;
   padding: 0;
}
ul.links li {
   min-width: 150px;
   background-repeat: no-repeat;
   background-position: 0 5px;
   padding-left: 10px;
   margin-bottom: 10px;
}

/**
 * Example Ref: Project/Forecast - People Planner/Assigner
 */
div label.label-bold,
div span.label-bold {
   padding-left: 0px;
}


/**
 * Move page copyright on resize
 */
@media (min-width: 720px) {
   div#page-copyright {
      max-width: calc(100vw - 50px);
   }
}
@media (max-width: 720px) {
   div#page-copyright {
      width: 670px;
   }
}

@media print {
   body {
      display: block;
   }
}

a.accessiblity-skip-main {
    left:-999px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;
}
a.accessiblity-skip-main:focus, a.accessiblity-skip-main:active {
    color: #FFF;
    background-color:#00AD68;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow:auto;
    padding:5px;
    border-radius: 1px;
    border:1px solid #00134E;
    text-align:center;
    font-size:1em;
    z-index:999;
}

.personalization-container {
    padding: 10px 20px;
    background-color: #DCDFED;
}

.alert-flex-grid {
   display: flex;
   align-items: center;
}

.alert-flex-grid .list ul {
   margin: 5px 0;
   list-style-type: none;
   padding-left: 10px;
}

.alert-flex-grid .list li {
   margin: 5px 0;
}

div.personalization-container span.label-bold {
    padding-left: 5px;
}

.alert-flex-grid .list ul li a.warning-links:link,
.alert-flex-grid .list ul li a.warning-links:visited {
   color: #E2760A;	
}

.alert-flex-grid .list ul li a.warning-links:hover {
   text-decoration: underline;
   color: #E2760A;	
}