/* Buttons CSS
 * /css/buttons.css
 * Thomas Sullinger
 * Created: 4/14/2024
 * Modified: 6/24/2024
 *
 *
 * Parts:
 *   General Button Style
 *   Button Containers
 *   Predefined Widths
 *   Login/Logoff Buttons
 *   Whiteout Buttons
 *   Little Buttons on the Pages
 *   Predefine Section Buttons
 *   Save/Cancel Trays (and Filter)
 *   Action Trays
 *   Cursor
 *   Specific Buttons
 *   Result Sub Action Buttons
 *   Disabled Buttons
 */






/* General Button Style
 */
button {
  border:none;
  border-radius:4px;
  padding-block-start:0;
  padding-block-end:0;
  padding-inline-start:0;
  padding-inline-end:0;
  background:none;
  font-size:18px
}
button, .buttonCont a {font-family:Arial,sans-serif}

input:is([type="button"], [type="submit"], [type="reset"]),
input[type="file"]::file-selector-button, button {}

/*.buttonCont input[type="submit"] {background-color:#ffd700;height:47px;border:1px solid rgb(118, 118, 118);border-radius:2px;cursor:pointer}
.buttonCont button {padding:0 6px;line-height:45px;font-size:21px;border:1px solid rgb(118, 118, 118);cursor:pointer}*/


#submitButtonCont > button {margin-right:12px}

#submitButtonCont > button:focus {margin-right:12px}

.bigDetailsResultsOuter .actionTray button::before,
.bigDetailsResultsOuter .actionTray a::before,
.buttonCol button::before,
.buttonCol a::before {
  content:none
}
.bigDetailsResultsOuter .actionTray button,
.bigDetailsResultsOuter .actionTray a,
.buttonCol button,
.buttonCol a,
td button,
td a {
  display:inline-block;
  height:30px;
  margin-right:5px;
  padding:0 10px;
  font-weight:bold;
  line-height:30px;
  border-radius:4px
}
.buttonCol button,
.buttonCol a,
td button,
td a {
  height:24px;
  line-height:24px
}

.blueButton, .dkBlue2Button, .clearButton, .grayButton, .redButton,
.mainButton, .delButton, .orangeButton, .whiteButton,
.clearGrayButton, .clearRedButton, .clearBlueButton, .clearDkBlue2Button,
.yellowButton, .clearYellowButton, .chartButton, .violetButton,
.clearVioletButton, .inviteButtons, .sectionAddButtons, .dismissButtons,
.editButton, .sectionEditButtons, .sectionPrintButtons, .deleteButtons,
.cancelButtons {
  position:relative;
  display:block;
  border-radius:4px;
  text-align: center;
  vertical-align: baseline;
  font-weight: bold
}


.paymentMethodsOuter .buttonCont .configureButtons::before,
.resultsRowInner .buttonCont .configureButtons::before {
  background-image:url(../img/cogw.svg);
  background-size:20px
}
.paymentMethodsOuter .buttonCont .editButtons::before,
.resultsRowInner .buttonCont .editButton::before {
  background-image:url(../img/editw.svg)
}
.paymentMethodsOuter .buttonCont .deleteButtons,
.resultsRowInner .buttonCont .deleteButtons,
.resultsRowInner .buttonCont .archiveButtons {
  width:110px;
}

.paymentMethodsOuter .buttonCont .deleteButtons::before,
.resultsRowInner .buttonCont .deleteButtons::before,
.singleButtonFlex .buttonCont .deleteButtons::before {
  background-image:url(../img/trashw.svg)
}
.resultsRowInner .buttonCont .archiveButtons::before {
  background-image:url(../img/archivew.svg)
}















/* Button Containers
 */
form .fieldContainer.buttonCont,
#userLogin #submitButtonCont {padding-top:50px}
/*.buttonCont a:focus, .buttonCont button:focus {filter:brightness(125%)}*/

.actionTray.top {margin-bottom:10px}
.actionTray.bottom {margin-top:10px}


















/* Predefined Widths
 */
.button30px {
  display:block;
  padding:0 10px;
  font-size:18px;
  line-height:30px
}
.button50px {
  display:block;
  height:50px;
  padding:0 15px;
  font-size:1em;
  line-height:50px
}
.button70 {
  display:block;
  height:auto;
  padding:0 15px;
  font-size:27px;
  line-height:70px;
  border:none
}


















/* Login/Logoff Buttons
 */
#logoffButton, #respLogoffButton {cursor:pointer}
#respLogoffButton:focus {background-color:#e5e5e5}


















/* Whiteout Buttons
 */
#whiteout #closeButtonCont {
  position:relative;
  display:block;
  width:100%;
  height:auto;
  padding-bottom:50px;
  font-size:18px;
  line-height:20px;
  text-align:center
}
#whiteout #closeButton {
  position:relative;
  height:55px;
  padding:27px 6px 1px 6px;
  background-color:#efefef;
  cursor:pointer
}
#whiteout #closeButton::before {
  position:absolute;
  content:' ';
  width:25px;
  height:25px;
  top:5px;
  left:50%;
  -webkit-transform:translateX(-50%);
  -moz-transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  transform:translateX(-50%);
  background-image:url(../img/ex.svg);
  background-repeat:no-repeat;
  background-size:20px;
  background-position:center;
}
#whiteout #closeButton:hover,
#whiteout #closeButton:focus {
  filter:brightness(110%)
}


















/* Little Buttons on the Pages
 */
.pageButtons {
  display:block;
  width:max-content;
  padding:0 10px;
  font-size:18px;
  line-height:30px
}


















/* Predefine Section Buttons
 */
.sectionAddButtons,
.sectionSetButtons,
.sectionPrevButtons,
.sectionPrintButtons,
.sectionEditButtons {
  position:relative;
  min-width:54px;
  padding:32px 10px 4px 10px;
  line-height:18px
}

.sectionAddButtons::before,
.sectionSetButtons::before,
.sectionPrevButtons::before,
.sectionPrintButtons::before,
.sectionEditButtons::before {
  content:"";
  position:absolute;
  width:25px;
  height:25px;
  top:4px;
  left:50%;
  background-size:20px;
  background-repeat:no-repeat;
  background-position:center;
  -webkit-transform:translateX(-50%);
  -moz-transform:translateX(-50%);
  -o-transform:translateX(-50%);
  transform:translateX(-50%);
  pointer-events:none
}
.sectionAddButtons::before {
  background-image:url(../img/plusw.svg)
}
.sectionSetButtons::before {
  background-image:url(../img/cogw.svg)
}
.sectionAddButtons#inviteApplicantButton { width:168px }
.sectionAddButtons#inviteApplicantButton::before {
  background-image:url(../img/plus.svg)
}
.sectionPrevButtons { width:99px }
.sectionPrevButtons::before {
  background-image:url(../img/preview.svg)
}
.sectionPrintButtons::before {
  background-image:url(../img/print.svg)
}


















/* Save/Cancel Trays (and Filter)
 */
#submitButtonCont {}
.saveCancelTray {}
.saveCancelTray a,
.saveCancelTray button,
#submitButton {
  margin-top:18px;
  padding:0 15px;
  line-height:70px;
  border:none
}
.saveCancelTray .cancelButtons {width:100%;text-align:left}
#submitButton,
.saveCancelTray #submitButton {width:100%;font-size:18px}

@media screen and (min-width:420px) {
  #submitButton,
  .saveCancelTray #submitButton {font-size:27px}
}
@media screen and (min-width:600px) {
  .saveCancelTray {
    display:flex;
    flex-direction:row;
    gap:5px;
    justify-content:space-between
  }
  .saveCancelTray a,
  .saveCancelTray button,
  #submitButton {
    height:70px;
    margin-top:0
  }
  .saveCancelTray .cancelButtons {
    flex-basis:30%;
    max-width:max-content
  }
}

/* CANCEL BUTTONS */
.saveCancelTray .cancelButtons {
  position:relative;
  display:block;
  height:inherit;
  padding-left:32px;
  line-height:70px;
  border:none;
  font-size:18px
}
.saveCancelTray .cancelButtons::before {
  content:'';
  position:absolute;
  width:15px;
  height:15px;
  top:50%;
  transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -o-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  left:10px;
  background-image:url(../img/exw.svg);
  background-repeat:no-repeat
}


















/* Action Trays
 */
.actionTray a,
.actionTray .delButton,
.actionTray .addButton {
  width:max-content;
  height:30px;
  margin-top:5px;
  padding:0 10px;
  font-size:18px;
  line-height:30px;
  border:none
}
@media screen and (min-width:575px) {
  .actionTray > a,
  .actionTray > button,
  .actionTray .delButton { display:inline-block;margin-top:0 }
}


















/* Cursor
 */
button:enabled {cursor:pointer}


















/* Specific Buttons
 *
 * Main (Light Blue)
 * Cancel (Dark Gray)
 * Add (Blue)
 * Notes (Violet)
 * Mark QB (Green)
 * Mark Co-Op (Green Shade 2)
 * Mark Paid (Green Shade 3)
 * View All (Gray)
 * Invite (Clear Dark Blue 2)
 * Delete/Archive (Red)
 * Reset Password
 * Skip
 * Edit (Orange)
 * Dismiss (Clear Gray)
 * Print (Med Gray)
 * Yellow
 * Clear Yellow
 * Chartreuse
 * White
 * Dark Blue 2
 * Brown
 * Clear Violet
 * Clear Blue
 * Gray Red
 * Clear Red
 * Clear Buttons
 */

 /* Main (Light Blue) */
 .mainButton {
   width: 100%;
   background-color: #0E4C92;
   color: #fff;
   text-transform: uppercase
 }
 .mainButton:hover, .mainButton:active, .mainButton:focus {filter:brightness(110%)}

 .mainButton.deact {background-color:rgba(71,51,41,.5);cursor:default}
 .mainButton.deact:hover, .mainButton.deact:active, .mainButton.deact:focus {
   filter:brightness(110%)
 }
 .buttonCont .mainButton:disabled {color:#fff}




 /* Table Row Buttons
  */
  .buttonCol button,
  .buttonCol a,
  td button,
  td a {
    vertical-align:baseline
  }




 /* Cancel (Dark Gray) */
 .grayButton:link, .grayButton:visited, .grayButton,
 .cancelButtons:link, .cancelButtons:visited, .cancelButtons {
   color:#fff;
   background-color:#555
 }
 .grayButton:hover, .grayButton:active, .grayButton:focus,
 .cancelButtons:hover, .cancelButtons:active, .cancelButtons:focus {filter:brightness(160%)}




 /* Add (Blue) */
 .blueButton, .blueButton:link, .blueButton:visited,
 .sectionAddButtons, .sectionAddButtons:link, .sectionAddButtons:visited {
   background-color: #0B80D6;
   color: #fff
 }
 .blueButton:hover, .blueButton:active, .blueButton:focus,
 .sectionAddButtons:hover, .sectionAddButtons:active, .sectionAddButtons:focus {filter:brightness(130%)}




 /* Notes (Violet) */
 .violetButton, .violetButton:link, .violetButton:visited,
 .notesButtons, .notesButtons:link, .notesButtons:visited {
   background-color:#7F00FF;
   color:#fff
 }
 .violetButton:hover, .violetButton:active, .violetButton:focus,
 .notesButtons:hover, .notesButtons:active, .notesButtons:focus {
   filter:brightness(170%)
 }




 /* Mark Paid (Green) */
 .markPaidButton, .markPaidButton:link, .markPaidButton:visited {
   background-color:#009900;
   color:#fff
 }
 .markPaidButton:hover, .markPaidButton:active, .markPaidButton:focus {
   filter:brightness(130%)
 }




 /* Mark QB (Green Shade 2) */
 .markQBButton, .markQBButton:link, .markQBButton:visited {
   background-color:#008800;
   color:#fff
 }
 .markQBButton:hover, .markQBButton:active, .markQBButton:focus {
   filter:brightness(130%)
 }




 /* Mark Co-Op (Green Shade 3) */
 .markCoOpButton, .markCoOpButton:link, .markCoOpButton:visited {
   background-color:#007700;
   color:#fff
 }
 .markCoOpButton:hover, .markCoOpButton:active, .markCoOpButton:focus {
   filter:brightness(130%)
 }




 /* View All (Gray) */
 .subRowActions .viewAllButtons:hover:enabled, .subRowActions .viewAllButtons:active:enabled, .subRowActions .viewAllButtons:focus:enabled {
   color:#fff;
   background-color:#22661C;
   filter:brightness(135%)
 }




/* Invite (Clear Dark Blue 2) */
.clearDkBlue2Button:link, .clearDkBlue2Button:visited,
.subRowActions .inviteButtons:link, .subRowActions .inviteButtons:visited {
  color:#000;
  border:none;
  background-color:rgba(0,0,0,0)
}
.clearDkBlue2Button:hover, .clearDkBlue2Button:active, .clearDkBlue2Button:focus,
.subRowActions .inviteButtons:hover:enabled, .subRowActions .inviteButtons:active.enabled, .subRowActions .inviteButtons:focus:enabled {
  color:#fff;
  background-color:#013963;
  filter:brightness(210%)
}




/* Delete/Archive (Red) */
.redButton:link, .redButton:visited, .redButton,
.deleteButtons:link, .deleteButtons:visited, .deleteButtons,
.archiveButtons:link, .archiveButtons:visited, .archiveButtons {
  background-color:#990000;
  color:#fff
}
/* Notes delete buttons */
.noteInfo .deleteButtons {
  height:24px;
  margin-bottom:10px;
  padding:0 10px;
  line-height:24px;
  vertical-align:baseline
}
.redButton:hover, .redButton:active, .redButton:focus,
.deleteButtons:hover, .deleteButtons:active, .deleteButtons:focus,
.archiveButtons:hover, .archiveButtons:active, .archiveButtons:focus {filter:brightness(160%)}
/*.buttonCont .redButton:focus,
.buttonCont .deleteButtons:focus {filter: brightness(160%)}*/
.redButton:disabled,
.deleteButtons:disabled,
.archiveButtons:disabled {color:#fff;background-color:rgba(150,0,0,.25);cursor:default;filter:brightness(100%)}

.delButton {
  color: #fff;
  background-color: #990000
}
.delButton:hover, .delButton:active, .delButton:focus {filter:brightness(160%)}
.delButton:disabled {color:#fff;background-color:rgba(150,0,0,.25);cursor:default;filter:brightness(100%)}




/* Reset Password */
.resetPassButton {
  width:max-content;
  height:30px;
  margin-top:25px;
  padding:0 10px;
  font-size:18px;
  line-height:30px;
  border:none
}




/* Skip */
.skipButtons {
  line-height:30px;
  padding:0 11px;
  font-size:15px;
  font-weight:bold;
  border:2px solid #999
}
#skipButtonCont {
  margin-top:22px;
  margin-bottom:22px
}

.skipButtons, .skipButtons:link, .skipButtons:visited {
  color:#000;
  background-color:#efefef;
}
.skipButtons:hover, .skipButtons:active, .skipButtons:focus {
  filter:brightness(110%)
}




/* Edit (Orange) */
.editButton {
  position: relative;
  height: 40px;
  /*padding: 0 15px 0 35px;*/
  line-height: 40px;
  font-weight: bold
}
.editButton::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0;
  left: 0;
  background-image: url(../img/editw.svg);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .1s linear;
}
.orangeButton:link, .orangeButton:visited, .orangeButton,
.editButton:link, .editButton:visited, .editButton,
.sectionEditButtons:link, .sectionEditButtons:visited, .sectionEditButtons {
  color:#fff;
  background-color:#dd6600
}
.orangeButton:hover, .orangeButton:active, .orangeButton:focus,
.editButton:hover, .editButton:active, .editButton:focus,
.sectionEditButtons:hover, .sectionEditButtons:active, .sectionEditButtons:active {filter:brightness(125%)}




/* Dismiss (Clear Gray) */
.clearGrayButton,
.clearGrayButton:link,
.dismissButtons,
.dismissButtons:link {
  display:block;
  /*padding-right: 25px;
  padding-left: 25px;*/
  color:#000;
  text-align:center
}
#priNotificationArea .dismissButtons {margin-block-start:6px;padding:0 6px;line-height:22px;font-weight:normal;border:1px solid #000}
.clearGrayButton:hover,
.clearGrayButton:active,
.clearGrayButton:focus,
.dismissButtons:hover,
.dismissButtons:active,
.dismissButtons:focus {
  background-color:rgba(0, 0, 0, 0.1);
  color:#000
}




/* Print (Med Gray) */
.sectionPrintButtons,
.sectionPrintButtons:link,
.sectionPrintButtons:visited {
  color:#000;
  background-color:#ccc;
}

.sectionPrintButtons:hover,
.sectionPrintButtons:active,
.sectionPrintButtons:focus {
  background-color:#dfdfdf
}

.sectionPrintButtons:disabled {opacity:.3}
.sectionPrintButtons:disabled::before {}




/* Yellow */
.yellowButton {
  color:#000;
  background-color:#fceb68
}
.yellowButton:hover, .yellowButton:active, .yellowButton:focus {filter:brightness(107%)}




/* Clear Yellow */
.clearYellowButton {
  color:#000;
  background-color:#fff
}
.clearYellowButton:hover, .clearYellowButton:active, .clearYellowButton:focus {
  background-color:#fceb68;
  filter:brightness(107%)
}




/* Chartreuse */
.chartButton, .chartButton:link, .chartButton:visited, {
  color:#000;
  background-color:#dfff00
}
.chartButton:hover, .chartButton:active, .chartButton:focus {filter:brightness(140%)}




/* White */
.whiteButton:link, .whiteButton:visited, .whiteButton {
  color:#000;
  background-color:#fff
}
.whiteButton:hover, .whiteButton:active, .whiteButton:focus {filter:brightness(80%)}




/* Dark Blue 2 */
.dkBlue2Button, .dkBlue2Button:link, .dkBlue2Button:visited,
.invoiceButton, .invoiceButton:link, .invoiceButton:visited {
 background-color:#013963;
 color:#fff
}
.dkBlue2Button:hover, .dkBlue2Button:active, .dkBlue2Button:focus,
.invoiceButton:hover, .invoiceButton:active, .invoiceButton:focus {filter:brightness(210%)}




/* Brown */
.brownButton:hover, .brownButton:active, .brownButton:focus {filter:brightness(170%)}




/* Clear Violet */
.clearVioletButton, .clearVioletButton:link, .clearVioletButton:visited {
  color:#000;
  background-color:#fff
}
.clearVioletButton:hover, .clearVioletButton:active, .clearVioletButton:focus {
  color:#fff;
  background-color:#7F00FF;
  filter:brightness(160%)
}




/* Clear Blue */
.clearBlueButton, .clearBlueButton:link, .clearBlueButton:visited {
  color:#000;
  border:none;
  background-color:#fff
}
.clearBlueButton:hover, .clearBlueButton:active, .clearBlueButton:focus {
  color:#fff;
  background-color:#0B80D6;
  filter:brightness(130%)
}




/* Gray Red */
.grayRedButton:hover, .grayRedButton:active, .grayRedButton:focus {
  color:#fff;
  background-color:#990000;
  filter:brightness(160%)
}




/* Clear Red */
.clearRedButton:link, .clearRedButton:visited {
  color:#000;
  border:none;
  background-color:rgba(0,0,0,0)
}
.clearRedButton:hover, .clearRedButton:active, .clearRedButton:focus {
  color:#fff;
  background-color:#990000;
  filter:brightness(160%)
}




/* Clear Buttons */
.clearButton {
 padding:0 15px;
 line-height:40px;
 color:#000
}
.clearButton:link, .clearButton:visited {
 color:#000;
 border:none;
 background-color:rgba(0,0,0,0)
}
.clearButton:hover, .clearButton:active, .clearButton:focus {
 color:#000;
 background-color:rgba(0, 0, 0, 0.1)
}
.clearButton:disabled {color:rgba(16,16,16,.3);background-color:rgba(0,0,0,0);cursor:default}
.clearButton:disabled::before {opacity:.3}



















/* Result Sub Action Buttons
 * The button sections inside result row divs */
.subRowActions {
  padding-top:10px;
  vertical-align:top
}
.subRowActions a,
.subRowActions div,
.subRowActions button {
  margin-bottom:6px;
  padding:0 10px;
  font-size:18px;
  font-weight:normal;
  border-radius:4px;
  text-align:center;
  vertical-align:top
}
.subRowActions a,
.subRowActions button {
  line-height:26px
}
.subRowActions div {
  background-color:#e5e5e5;
  line-height:30px
}

.subRowActions > div,
.subRowActions > a,
.subRowActions > button {width:110px}
.subRowActions > button:last-of-type {margin-bottom:0}

.subRowActions .yellowButton {border:2px solid #fceb68}
.subRowActions .clearYellowButton {border:2px solid #fceb68}
.subRowActions .clearDkBlue2Button,
.subRowActions .inviteButtons {border:2px solid #013963}
.subRowActions .clearRedButton {border:2px solid #990000}
.subRowActions .viewAllButtons {border:2px solid #22661C}

.subRowActions > button:disabled {
  border: 2px solid rgba(1,57,99,.3);
}

@media screen and (min-width:333px) {
  .subRowActions div,
  .subRowActions a,
  .subRowActions button {
    display:inline-block;
    margin:0 6px 6px 0
  }
}
@media screen and (min-width:450px) {
  .subRowActions div,
  .subRowActions a,
  .subRowActions button {
    margin-bottom:0
  }
}

















/* Disabled Buttons
 */
button:disabled,
a:disabled {
  pointer-events:none;
  cursor:default
}

/*.actionTray a:disabled,
.actionTray button:disabled {
  color:rgba(16,16,16,.3);
  background-color:rgba(0,0,0,0)
}*/