.modal {
  transition: var(--transition-duration, 0.2s);
  transition-property: opacity, width, height, left, top, margin, padding, bottom;
  width: 100%;
  height: 100%;
  z-index: 1051;
}

.modal-dialog {
  pointer-events: unset;
}

.modal.minimized {
  width: 41.07142857142857rem;
  height: 3rem;
  overflow: hidden;
  left: calc(100vw - 590px);
  top: unset;
  top: calc(100vh - 3rem);
  right: 1.0714285714285714rem;
  margin: 0;
  padding: 0;
  bottom: 0;
  z-index: 1049;
}

.modal-backdrop.fade {
  transition-duration: var(--transition-duration, 0.2s);
}

body.modal-open .modal.minimized {
  left: calc(100vw - 41.07142857142857rem);
  right: 0;
}

.approval-modal {
  height: 80%;
}

.minimized .approval-modal,
.minimized .proshop-modal {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.approval-modal-iframe,
.proshop-modal-iframe {
  height: calc(100% - 0.21428571428571427rem);
  width: 100%;
  border-width: 0px;
}

.minimized .approval-modal-iframe,
.minimized .proshop-modal-iframe {
  height: 100%;
}

.proshop-modal-header > .proshop-modal-close{
  font-size: 2rem;
}

#time-clock-modal .inner-modal {
  padding: var(--internal-member-spacing, 2rem) 0;
}

#time-clock-modal .inner-modal.inner-modal-padding {
  padding: 2rem;
}

#time-clock-modal .proshop-modal-body {
  padding: 2rem 0 0;
}

#time-clock-modal .timeclock-modal-text {
  margin-bottom: 0;
  line-height: 1.144rem;
}

.proshop-modal-header.proshop-modal-header-no-padding {
  padding: 0;
}

.proshop-modal-header > h3 {
  line-height: 1.7rem;
  padding: 0 2rem;
}

#time-clock-modal .proshop-modal-header > h3 {
  padding: 0;
}

.approval-modal-header,
.proshop-modal-header {
  --icon-size: 1.7rem;
  max-width: 100vw;
  padding: 1px;
  position: relative;
  color: #135899;
}

.approval-modal-header {
  width: 99.95%;
}

.approval-modal-header h3,
.proshop-modal-header h3 {
  font-weight: bold;
  padding: 0 1em;
  line-height: 2em;
  margin: 0;
  color: #092C4C;
  font-size: 1.7rem;
}

.approval-modal-header h3 input,
.proshop-modal-header h3 input {
    color: black;
    padding: 0.21428571428571427rem;
    font-weight: 500;
}

.approval-modal-minimize,
.proshop-modal-minimize,
.approval-modal-close,
a.proshop-modal-close {
  float: right;
  font-size: 1.4rem;
  min-width: 16px;
  text-align: center;
  position: absolute;
  color: inherit !important;
  fill: #135899;
  scale: 1.2;
  opacity: 1;
  transition: var(--transition-duration, 0.2s);
  transition-property: color, opacity, border-radius, box-shadow;
  font-weight: var(--font-weight-bold, 700);
  top: 50%;
  transform: translateY(-50%);
}

.modal.fade .modal-dialog {
  transition-duration: var(--transition-duration, 0.2s);
}

.approval-modal-minimize,
.proshop-modal-minimize {
  right: 2.7142857142857144rem;
}

.approval-modal-minimize .plus,
.proshop-modal-minimize .plus {
  display: inline-block;
  transform: scale(1.33333);
}

.modal:not(.minimized) .approval-modal-minimize .plus,
.modal:not(.minimized) .proshop-modal-minimize .plus {
  display: none;
}

.approval-modal-close,
.proshop-modal-close {
  right: 2.25rem;
}

#time-clock-modal .proshop-modal-close {
  right: 0;
}

.minimized .approval-modal-minimize,
.minimized .proshop-modal-minimize,
.minimized .approval-modal-close,
.minimized .proshop-modal-close {
  font-size: 0.9285714285714286rem;
  top: 0.7142857142857143rem;
}

.minimized .approval-modal-minimize,
.minimized .proshop-modal-minimize {
  right: 2.357142857142857rem;
}

.minimized .approval-modal-minimize .minus,
.minimized .proshop-modal-minimize .minus {
  display: none;
}

a.approval-modal-minimize:hover,
a.approval-modal-close:hover,
a.approval-modal-minimize:link:hover,
a.approval-modal-close:link:hover,
a.approval-modal-minimize:visited:hover,
a.approval-modal-close:visited:hover,
a.approval-modal-minimize:focus,
a.approval-modal-close:focus,
a.approval-modal-minimize:link:focus,
a.approval-modal-close:link:focus,
a.approval-modal-minimize:visited:focus,
a.approval-modal-close:visited:focus,
a.proshop-modal-minimize:hover,
a.proshop-modal-close:hover,
a.proshop-modal-minimize:link:hover,
a.proshop-modal-close:link:hover,
a.proshop-modal-minimize:visited:hover,
a.proshop-modal-close:visited:hover,
a.proshop-modal-minimize:focus,
a.proshop-modal-close:focus,
a.proshop-modal-minimize:link:focus,
a.proshop-modal-close:link:focus,
a.proshop-modal-minimize:visited:focus,
a.proshop-modal-close:visited:focus {
  text-decoration: none;
  opacity: .6;
}

a.approval-modal-minimize:focus,
a.approval-modal-close:focus,
a.approval-modal-minimize:link:focus,
a.approval-modal-close:link:focus,
a.approval-modal-minimize:visited:focus,
a.approval-modal-close:visited:focus,
a.proshop-modal-minimize:focus,
a.proshop-modal-close:focus,
a.proshop-modal-minimize:link:focus,
a.proshop-modal-close:link:focus,
a.proshop-modal-minimize:visited:focus,
a.proshop-modal-close:visited:focus {
  box-shadow: inset 0 0 2px 1px rgba(150, 200, 255, 0.25);
  border-radius: 50%;
  outline: none;
}

.approval-modal-header h3.subtitle,
.proshop-modal-header h3.subtitle {
    font-weight: 400;
    margin: 1.0714285714285714rem 0px 0.7142857142857143rem;
    font-size: 1.4285714285714286rem;
    text-align: center;
    border-bottom: 1px solid lightgray;
    padding-bottom: 0.7142857142857143rem;
}

.approval-modal-header h3.subtitle span,
.proshop-modal-header h3.subtitle span {
 margin: 0px 1.0714285714285714rem;
}

.approval-modal-body,
.proshop-modal-body {
  padding: 2.142857142857143rem 2% 1.4285714285714286rem;
  font-size: 1.0714285714285714rem;
}

.approval-modal-body {
  min-height: calc(100vh - 7.142857142857143rem);
}

.approval-modal-body .panel > .panel-heading,
.proshop-modal-body .panel > .panel-heading {
  background-color: #FDFCFE;
}

.approval-modal-body .panel-body,
.proshop-modal-body .panel-body {
  padding: 0;
}

.approval-modal-body .cke,
.proshop-modal-body .cke {
    height: 25rem;
    overflow: auto;
}

.approval-rationale input,
.proshop-rationale input {
 width: 100%;
}

.approval-modal-rows,
.proshop-modal-rows {
 margin: 0 3%;
}

.approval-modal-row-1,
.proshop-modal-row-1 {
  display: flex;
  width: auto;
  justify-content: initial;
  margin-bottom: 2.142857142857143rem;
  position: relative;
}

.approval-modal-row-1 *,
.proshop-modal-row-1 *,
.approval-modal-row-2 *,
.proshop-modal-row-2 * {
 margin: auto 0;
}

.approval-modal-row-1-1,
.proshop-modal-row-1-1 {
 width: 27.5%;
 flex-basis: 27.5%;
 border-bottom: 1px solid black;
 position: relative;
 margin: 0;
}

.approval-modal-row-1-1 h5,
.proshop-modal-row-1-1 h5 {
 position: absolute;
 top: 1.4285714285714286rem;
 font-size: 1rem;
}

.approval-modal-row-1-2,
.proshop-modal-row-1-2 {
  width: 7%;
  flex-basis: 7%;
}

.approval-modal-row-1-3,
.proshop-modal-row-1-3 {
 width: 65%;
 flex-basis: 65%;
}

.approval-modal-row-1-3 > *,
.proshop-modal-row-1-3 > * {
  width: 50%;
  min-width: 17.857142857142858rem;
}

.approval-modal-row-2-3,
.proshop-modal-row-2-3 {
 width: 20%;
 flex-basis: 20%;
 display: flex;
 position: relative;
 top: -0.7142857142857143rem;
}

.approval-modal-row-2-3 > div,
.proshop-modal-row-2-3 > div {
  padding: 0.7142857142857143rem;
  border: 2px dotted #5b78ab;
  text-align: center;
  margin-left: calc(100% - 8.214285714285714rem);
}

.approval-modal-row-2-3 div p,
.proshop-modal-row-2-3 div p {
    margin: 0;
}

.larger-checkbox {
 transform: scale(1.3);
}

.approval-modal-row-2,
.proshop-modal-row-2 {
  display: flex;
  margin-bottom: 1.0714285714285714rem;
}

.approval-modal-row-2-1,
.proshop-modal-row-2-1 {
  width: 33%;
  flex-basis: 33%;
  position: relative;
}

.approval-modal-row-1-1 p,
.proshop-modal-row-1-1 p,
.approval-modal-row-2-1 p,
.proshop-modal-row-2-1 p,
.approval-modal-row-2-2 p,
.proshop-modal-row-2-2 p {
  text-align: left;
  padding: 0;
}

.approval-modal-row-2-2,
.proshop-modal-row-2-2 {
  width: 45%;
  flex-basis: 45%;
}

.approval-modal-row-2-2 textarea,
.proshop-modal-row-2-2 textarea {
  width: 100%;
}

.approval-modal-body .panel table,
.proshop-modal-body .panel table {
 width: 100%;
 text-align: center;
}

.approval-modal-body .panel table thead,
.proshop-modal-body .panel table thead {
 background-color: #5b78ab;
 color: white;
 font-weight: 500;
}

.approval-modal-body .panel table textarea,
.proshop-modal-body .panel table textarea {
 width: 90%;
 resize: none;
 min-width: 17.857142857142858rem;
}

.approval-modal-body .panel-heading,
.proshop-modal-body .panel-heading {
text-align: left;
  padding: 2px 1.0714285714285714rem;
}

.approval-modal-body .panel-heading h3.subtitle,
.proshop-modal-body .panel-heading h3.subtitle {
    margin: 0px;
    padding: 0.5em 0px;
    font-weight: 400;
    font-size: 1rem;
  }

.approval-modal-body .panel-heading h3.subtitle span,
.proshop-modal-body .panel-heading h3.subtitle span {
 font-weight: bold;
}

.approval-modal-body .panel-body tbody tr td,
.proshop-modal-body .panel-body tbody tr td {
 vertical-align: middle;
}

.approval-modal-rows h5,
.proshop-modal-rows h5 {
  position: absolute;
  top: -1.4285714285714286rem;
  font-size: 1rem;
  font-weight: bold;
}

.approval-modal-submit,
.proshop-modal-submit {
 text-align: left;
 margin-top: 1.4285714285714286rem;
}

#approval-iframe-link-wrapper,
#proshop-iframe-link-wrapper {
    text-decoration: inherit;
    color: inherit;
    cursor: pointer;
   }


.proshop-modal .modal-footer {
  border-top: none;
}


.proshop-modal .display-alerts-bar {
  padding: 0.428571rem 0.714286rem;
}


/* Space for remove from COTS modal */


.remove_from_cots_div {
	width: 100%;
}

.remove_from_cots_div > table.table {
  margin: 0 auto;
}

.remove_from_cots_div > table > tbody > tr:first-child th {
	text-align: center;
	padding: 0.7142857142857143rem;
}

.remove_from_cots_div > table > tbody > tr:not(:first-child) td {
	padding: 0.35714285714285715rem 1.4285714285714286rem;
}

.remove_from_cots_div > table > tbody > tr th:nth-child(3) *, .remove_from_cots_div > table > tbody > tr td:nth-child(3) * {
	display: block;
	width: 100%;
}

.remove_from_cots_div > table > tbody > tr th:nth-child(4), .remove_from_cots_div > table > tbody > tr td:nth-child(4) {
	text-align: center;
}

.remove_from_cots_div > table > tbody > tr th:nth-child(4) input, .remove_from_cots_div > table > tbody > tr td:nth-child(4) input {
	margin-left: 0.7142857142857143rem;
}

.remove_from_cots_div > input {
	margin-top: 2.142857142857143rem;
	margin-left: auto;
	margin-right: auto;
	display: block;
	padding: 0.5714285714285714rem 1.8571428571428572rem;
}

.remove_from_cots_div #removeFromCotsToggleAllChk {
  color: rgb(90,90,90);
}



/* Fancy Styling for label buttons*/

.approval-modal-body .group,
.proshop-modal-body .group {
 position:relative;
}

.approval-modal-body .group input,
.proshop-modal-body .group input {
 display:block;
}

.approval-modal-body .group input:focus,
.proshop-modal-body .group input:focus {
   outline:none;
}

 /*Specific styling for Various input types*/

/*Textarea*/

.approval-modal-row-1-3 textarea,
.proshop-modal-row-1-3 textarea {
  width: 100%;
  max-width: 125%;
}

/*Checkbox & Radio*/

.approval-modal-row-no-border,
.proshop-modal-row-no-border {
  border: none;
}

.approval-modal-row-1-half-width,
.proshop-modal-row-1-half-width {
  width: 50%;
  margin-right: auto;
}

/*Option List*/

.approval-modal-row-1 select,
.proshop-modal-row-1 select {
  width: 100%;
  max-width: 17.857142857142858rem;
}
.larger-icon {
  transform: scale(1.5);
}

/* Styling for Popup Confirmation of Exit */

.confirm-close-modal .modal-dialog {
    top: 25%;
    max-width: 32.142857142857146rem;
}

.confirm-close-modal .modal-content {
  background-color: #5b78ab;
  color: white;
  text-align: left;
}

.confirm-close-modal .modal-content .modal-header h3 {
  font-weight: bold;
  font-size: 1.2857142857142858rem;
}

.confirm-close-modal .modal-content .modal-body {
  padding-top: 1.4285714285714286rem;
}

.confirm-close-modal .modal-content .modal-body p {
  font-size: 1rem;
  line-height: 1.4;
  white-space: normal;
}

.confirm-close-modal .modal-content .modal-footer button {
  color: white;
}

.confirm-close-modal .btn-danger:hover {
  background-color: red !important;
  color: white !important;
}

.proshop-modal .buttons-wrapper,
.modal-content .buttons-wrapper {
  display: flex;
  justify-content: space-between;
}

.proshop-modal #add-remove-body {
  margin-bottom: 1rem;
}

.proshop-modal #component-list-target {
  margin-bottom: 1.25rem;
}

.button-wrapper.print-btn {
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
}

/*-----------------------------------*/
/*
/* IN PROGRESS MODAL
/*
/*-----------------------------------*/
#in-progress-modal {
  text-align: center;
}

#in-progress-modal .inner-modal {
  padding: 2rem;
}

#in-progress-modal .proshop-modal-header {
  border-bottom: 0;
}

#in-progress-modal .proshop-modal-header h3 {
  font-weight: var(--font-weight-normal, 400);
  font-size: 1.5rem;
  text-align: center;
}

#in-progress-modal .proshop-modal-body {
  padding: 0;
}

#in-progress-modal p {
  line-height: 1.5625em;
}

#in-progress-modal .time-remaining {
  font-size: 1em;
  font-weight: var(--font-weight-bold, 700);
  margin-bottom: 1.5em;
}

#in-progress-modal .sync-svg {
  height: 3.75rem;
  max-height: unset;
  width: 3.75rem;
  max-width: unset;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes rotate-progress {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/****************************/
/* Integration Config Modal */
/****************************/

#paperlessPartsModal .proshop-modal, #acctgModal .proshop-modal, #sageModal .proshop-modal, #xeroModal .proshop-modal{
  max-width: 32.87rem;
}

#paperlessPartsModal .proshop-modal-close svg {
  max-height: 2rem;
}

#modal-form-paperlessParts {
  margin-top: 1.5rem;
}

#acctgModal .proshop-modal-header,
#sageModal .proshop-modal-header,
#paperlessPartsModal .proshop-modal-header,
#xeroModal .proshop-modal-header{
	border-bottom: 0px;
}

#paperlessPartsModal .proshop-modal-header > h3,
#sageModal .proshop-modal-header > h3,
#acctgModal .proshop-modal-header > h3,
#xeroModal .proshop-modal-header > h3 {
  border-bottom: 0px;
  text-align: left;
  padding: 0 7%;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--title-text-colour);
}

#paperlessPartsModal .proshop-modal-body {
	padding: 0 10% 1rem;
}

.tablerow_submit_button_wrapper {
  position: sticky;
  bottom: 0;
  display: block;
  background: white;
  z-index: 2;
  left: 0;
  max-width: calc(100vw - var(--scrollbar-width, 0px));
}

div.integrations-settings-modal-body form div.tablerow_submit_button_wrapper {
	padding-top:1.25rem;
  margin-bottom: var(--modal-border-width, 1px)
}


.integrations-settings-modal-body h4 {
  margin: 1rem 0rem;
  font-weight: var(--font-weight-bold, 700);
  font-size: 1.25rem;
  color: var(--title-text-colour);
}

.integrations-settings-modal-body > p {
  margin-bottom: 0.26666666666666666rem;
  margin-top: 0.8rem;
  max-width: 26.666666666666668rem;
  margin-left: 0;
}

.integrations-settings-modal-body form {
  font-size:1rem;
}

.integrations-settings-modal-body > form > input, .integrations-settings-modal-body > input, .integrations-settings-modal-body > select {
  border: 1px solid rgb(175, 175, 175);
  padding: 0.21428571428571427rem 0.5rem;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
  margin-bottom: 0.75rem;
  border-radius: 3px;
}

.integrations-settings-modal-body > form > input, .integrations-settings-modal-body > input {
  width: 100%;
}

.integrations-settings-modal-body label {
  margin-bottom:.25rem;
  font-size:1rem;
  /* font-weight: var(--font-weight-title, 400) */
}

.integrations-settings-modal-body form .config-card-switch {
  font-size: 2.5rem;
}

.integrations-settings-modal-body form .config-card-switch input:checked + .slider-checkbox:before {
  height: 0.55em;
  width: 0.55em;
  left: -8px;
  top: 2px;
}

.integrations-settings-modal-body form .config-card-switch .slider-checkbox:before {
  height: 0.55em;
  width: 0.55em;
  left: 2px;
  top: 2px;
}

.integrations-settings-modal-body form a[title="Popup Help"] {
  display: inline-flex;
  vertical-align: initial;
  min-height: 9px;
  min-width: 9px;
  margin-left: -1px;
  font-size: smaller;
}

.integrations-settings-modal-body span.material-icons.help, .integrations-settings-modal-body img.help-img.help-icon,
.integrations-settings-modal-body span.material-icons.help, .integrations-settings-modal-body svg.help-svg.help-icon {
 padding: 3px;
}

/* ------------------------ Time Clock Modal --------------------------- */

.timeclock-modal-form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.timeclock-modal-form > .proshop-input-form-field{
  margin: 2rem 0;
}

.timeclock-modal-form > .proshop-input-form-btn-container{
  margin-top: 0;
}

@media only screen and (min-width: 576px) {
  .timeclock-modal-form > .proshop-input-form-field > div > input{
    margin: auto 4rem;
    height: 2.25rem;
    width: 25.8125em;
  }

  .timeclock-modal-form > .timeclock-modal-text{
    font-size: 1rem;
    color: #000000DE;
  }
}

@media only screen and (min-width: 768px){
  .timeclock-modal-form > .timeclock-modal-text{
    font-size: 1.144rem;
  }
}

.modal .warning-message .warningSign-svg {
  height:2.5rem;
  width: 3.5rem;
  max-width: 3.5rem;
	max-height: 2.5rem;
}

/* ------------- new record modal ------------------ */

#newModalRecordCreation .select2-dropdown input,
#duplicate-id-error-message{
  width: 15.25rem;
}

#newModalRecordCreation .select2,
#newModalRecordCreation .select2-selection,
#newModalRecordCreation input {
  width: 17.2rem;
  height: 1.95571429rem;
}

#newModalRecordCreationButtonClose .proshop-modal {
  top: 25%;
}

#newModalRecordCreation .attachment-buttons-container {
  min-width: 3.375rem;
}

#duplicate-id-warning-icon svg {
  max-width: 1em;
}

a img.svg-icon {
  max-width: var(--icon-size, 1.5em);
  max-height: var(--icon-size, 1.5em);
  overflow:visible;
}

.part-number-auto-fill {
  top: 0.35rem;
  right: -1.5rem;
}

@media (min-width: 768px){
  .new-modal-record-input-container {
    min-width: 27rem;
  }
  #newModalRecordCreation .modal-content {
    min-width: 54rem;
  }
}

@media (max-width: 767.98px){
  #newModalRecordCreation .modal-content {
    overflow-x: scroll;
  }
}