/* use this file to do all css changes related to NSW components for css 3.*/
/* Author @safwan*/

:root {
  /* Margins */
  --m-t0: 0;
  --m-r0: 0;
  --m-b0: 0;
  --m-l0: 0;
  --m-t1: 0.25rem;
  --m-r1: 0.25rem;
  --m-b1: 0.25rem;
  --m-l1: 0.25rem;
  --m-t2: 0.5rem;
  --m-r2: 0.5rem;
  --m-b2: 0.5rem;
  --m-l2: 0.5rem;
  --m-t3: 1rem;
  --m-r3: 1rem;
  --m-b3: 1rem;
  --m-l3: 1rem;
  --m-t4: 1.5rem;
  --m-r4: 1.5rem;
  --m-b4: 1.5rem;
  --m-l4: 1.5rem;
  --m-t5: 3rem;
  --m-r5: 3rem;
  --m-b5: 3rem;
  --m-l5: 3rem;

  /* Padding */
  --p-t0: 0;
  --p-r0: 0;
  --p-b0: 0;
  --p-l0: 0;
  --p-t1: 0.25rem;
  --p-r1: 0.25rem;
  --p-b1: 0.25rem;
  --p-l1: 0.25rem;
  --p-t2: 0.5rem;
  --p-r2: 0.5rem;
  --p-b2: 0.5rem;
  --p-l2: 0.5rem;
  --p-t3: 1rem;
  --p-r3: 1rem;
  --p-b3: 1rem;
  --p-l3: 1rem;
  --p-t4: 1.5rem;
  --p-r4: 1.5rem;
  --p-b4: 1.5rem;
  --p-l4: 1.5rem;
  --p-t5: 3rem;
  --p-r5: 3rem;
  --p-b5: 3rem;
  --p-l5: 3rem;
}

::placeholder {
  color: var(--bs-gray) !important}

/* Margin Classes */
.mt-0 {
  margin-top: var(--m-t0);
}

.mr-0 {
  margin-right: var(--m-r0);
}

.mb-0 {
  margin-bottom: var(--m-b0);
}

.ml-0 {
  margin-left: var(--m-l0);
}

.mt-1 {
  margin-top: var(--m-t1);
}

.mr-1 {
  margin-right: var(--m-r1);
}

.mb-1 {
  margin-bottom: var(--m-b1);
}

.ml-1 {
  margin-left: var(--m-l1);
}

.mt-2 {
  margin-top: var(--m-t2);
}

.mr-2 {
  margin-right: var(--m-r2);
}

.mb-2 {
  margin-bottom: var(--m-b2);
}

.ml-2 {
  margin-left: var(--m-l2);
}

.mt-3 {
  margin-top: var(--m-t3);
}

.mr-3 {
  margin-right: var(--m-r3);
}

.mb-3 {
  margin-bottom: var(--m-b3);
}

.ml-3 {
  margin-left: var(--m-l3);
}

.mt-4 {
  margin-top: var(--m-t4);
}

.mr-4 {
  margin-right: var(--m-r4);
}

.mb-4 {
  margin-bottom: var(--m-b4);
}

.ml-4 {
  margin-left: var(--m-l4);
}

.mt-5 {
  margin-top: var(--m-t5);
}

.mr-5 {
  margin-right: var(--m-r5);
}

.mb-5 {
  margin-bottom: var(--m-b5);
}

.ml-5 {
  margin-left: var(--m-l5);
}

/* Padding Classes */
.pt-0 {
  padding-top: var(--p-t0);
}

.pr-0 {
  padding-right: var(--p-r0);
}

.pb-0 {
  padding-bottom: var(--p-b0);
}

.pl-0 {
  padding-left: var(--p-l0);
}

.pt-1 {
  padding-top: var(--p-t1);
}

.pr-1 {
  padding-right: var(--p-r1);
}

.pb-1 {
  padding-bottom: var(--p-b1);
}

.pl-1 {
  padding-left: var(--p-l1);
}

.pt-2 {
  padding-top: var(--p-t2);
}

.pr-2 {
  padding-right: var(--p-r2);
}

.pb-2 {
  padding-bottom: var(--p-b2);
}

.pl-2 {
  padding-left: var(--p-l2);
}

.pt-3 {
  padding-top: var(--p-t3);
}

.pr-3 {
  padding-right: var(--p-r3);
}

.pb-3 {
  padding-bottom: var(--p-b3);
}

.pl-3 {
  padding-left: var(--p-l3);
}

.pt-4 {
  padding-top: var(--p-t4);
}

.pr-4 {
  padding-right: var(--p-r4);
}

.pb-4 {
  padding-bottom: var(--p-b4);
}

.pl-4 {
  padding-left: var(--p-l4);
}

.pt-5 {
  padding-top: var(--p-t5);
}

.pr-5 {
  padding-right: var(--p-r5);
}

.pb-5 {
  padding-bottom: var(--p-b5);
}

.pl-5 {
  padding-left: var(--p-l5);
}



button,
input,
select,
textarea,
textfield,
p,
.p,
.page_section p,
.section-diagonal-left p,
.section-diagonal-right p,
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: var(--nsw-font-family);
}

p, .p, .page_section p, .section-diagonal-left p, .section-diagonal-right p{
  color: inherit;
}

a, .a{
  font-size: inherit;
}

/* reset portal theme border-color on focus */
.form-control:focus{
  border-color: inherit !important;
}

/* copied from NSW site */
.nsw-docs__version {
  font-size: var(--nsw-font-size-xs-mobile);
  line-height: var(--nsw-line-height-xs-mobile);
  font-weight: var(--nsw-font-normal);
  padding: 0.125rem 1rem;
  border: 1px solid var(--nsw-brand-dark);
  border-radius: 1.5rem;
  color: var(--nsw-brand-dark);
  text-decoration: none;
  display: inline-block;
  margin-left: 1rem;
}

#content {
  background-color: var(--nsw-off-white);
}

.nsw-docs__wrapper {
  display: flex;
}

.nsw-side-nav {
  min-width: 15.75rem;
  border-right: 1px solid var(--nsw-grey-04);
  background-color: var(--nsw-white);
  padding: 1rem;
}

.nsw-docs__intro {
  padding: 3rem 3.25rem;
  background-color: var(--nsw-white);
}

.nsw-tabs {
  padding: 0 3.25rem;
  background-color: var(--nsw-white);
  margin-top: 0px;
}

.nsw-docs__main {
  background-color: var(--nsw-off-white);
  width: 100%;
  width: -webkit-fill-available;
}

.nsw-header__container {
  margin-left: 0px;
  max-width: 100%;
}

.nsw-form {
  padding: 1rem;
  background-color: var(--nsw-white);
  margin-top: 0.5rem;
}

.nsw-form__helper--error,
.nsw-form__helper--valid {
  padding: 0px;
}

p .nsw-form__helper--error,
p .nsw-form__helper--valid {
  margin-top: 0px;
}


.nsw-form__radio-input{
  width: auto;  /* prevent input to be super wide */
}

.nsw-form__radio-label{
  padding-right: 1rem; /* ensure there's some space for YES button to right */
}

.nsw-form__checkbox-input:first-child + .nsw-form__checkbox-label {
  width: max-content;
}

.nsw-form__checkbox-label[data-checked="true"]::after {
  background-color: var(--nsw-brand-dark);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23fff'%3E%3Cpath d='M29.362 3.742 10.495 22.946l-7.857-7.997L0 17.634l9.175 9.34 1.319 1.284 1.318-1.284L31.999 6.427z'/%3E%3C/svg%3E");
}

.nsw-button {
  text-decoration: none !important;
}

.nsw-button.nsw-button--dark {
  color: white;
}

.nsw-form__predictive-list {
  overflow-y: auto;
  max-height: 18em;
}

.hidden {
  display: none !important;
}

.nsw-form__input:disabled,
.formField-text.muted,
.nsw-form__select:disabled {
  color: #767676;
}

.nsw-tag {
  color: var(--nsw-status-info) !important;
  font-size: 1.1rem;
}

.nsw-tag.nsw-status-completed {
  color: var(--nsw-status-success) !important;
}

.searchable-item {
  width: 100%;
}

.searchable-item a {
  text-decoration: none;
}

.searchable-item small {
  padding: 0.8rem;
}

.no-hover-affect:hover {
  background-color: initial;
  color: initial;
  cursor: not-allowed;
}

/*-------------------------------- NAVBAR --------------------------------*/
.navbar-end {
  position: absolute;
  top: 2rem;
  right: 1rem;
}

/* -------------------- TABLE  -------------------- */

.entitylist {
  border: none;
}

.grid-actions {
  border: none;
}

table thead {
  background: var(--nsw-hover);
}

table thead a,
table thead a:visited {
  color: var(--nsw-link) !important;
  text-decoration: none !important;
}

table input {
  height: 2rem;
}

/* reset table tr borer */
table td,
table th {
  border-bottom: none;
}

table tbody td a {
  font-weight: normal !important;
}

/* this will ensure the sort icon is in the same line on tables. */
th .fa-arrow-up{
  display: inline-flex !important;
}

/* entity list more action btn */
.entity-notes .note .toolbar.dropdown > a{
  min-width: 3.75rem !important;
  padding: 0;
}


.entitylist .dropdown.action .btn.btn-default{
  min-width: 3.75rem !important;
  padding: 0;
  border: 1px solid var(--nsw-grey-03) !important;
}

.entity-notes .note .toolbar.dropdown a:hover,
.entitylist .dropdown.action .btn.btn-default:hover{
  background-color: var(--nsw-brand-dark);
  border-color: var(--nsw-brand-dark);
  color: var(--nsw-white) !important;
}
.entity-notes .note .toolbar.dropdown a:focus,
.entitylist .dropdown.action .btn.btn-default:focus{
  outline: solid 3px var(--nsw-focus) !important;
  outline-offset: 3px !important;
  background-color: var(--nsw-brand-dark);
  color: var(--nsw-white) !important;
}

.note-actions.row .addnote{
  min-width: 9rem;
}

/* PAGINATION */
.pagination > li > a,
.pagination > .active > a {
  cursor: pointer !important;
  width: auto;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
  background-color: var(--nsw-hover);
  outline-width: 0;
  text-decoration: none;
}

.pagination > li > a:focus,
.pagination > li > span:focus {
}

.pagination > .active > a {
  color: var(--nsw-text-dark);
  border-radius: var(--nsw-border-radius) !important;
  background-color: white !important;
}

.pagination > .active > a::after {
  background-color: var(--nsw-brand-accent);
  bottom: 0;
  content: "";
  height: 2px;
  left: 0.25rem;
  position: absolute;
  right: 0.25rem;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover {
  background-color: white !important;
  color: inherit;
}

/* -------------------- BS Buttons   -------------------- */
.btn {
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid transparent;
  border-radius: var(--nsw-border-radius);
  cursor: pointer;
  display: inline-block;
  font-size: var(--nsw-font-size-sm-mobile);
  font-weight: var(--nsw-font-bold);
  line-height: var(--nsw-line-height-sm-mobile);
  padding: 0.625rem 1.375rem;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  vertical-align: middle;
  white-space: normal;
}

.btn:hover {
  outline: none;
}

.btn:not(.nsw-button--flex) {
  min-width: 7.75rem;
}

.btn:focus {
  outline: solid 3px var(--nsw-focus) !important;
  outline-offset: 3px !important;
}

.btn-default,
.btn-default:hover {
  border-color: var(--nsw-grey-01) !important;
  color: black !important;
  border-radius: 0.25rem;
}

/* white bg btn */
.addnote.btn.btn-default,
.cancel.btn.btn-default,
.btn.btn-default.remove-value
{
    background-color: var(--nsw-white);
    border-color: var(--nsw-brand-dark);
    color: var(--nsw-brand-dark) !important;
}

/* nsw-button nsw-button--dark */
.primary.btn.btn-primary,
.cancel.btn.btn-default:hover,
.addnote.btn.btn-default:hover,
.btn.btn-default.remove-value:hover{
  background-color: var(--nsw-brand-dark);
  border-color: var(--nsw-brand-dark);
  color: var(--nsw-white) !important;
}
.btn-entitylist-filter-submit
/* APPLY FILTER BTN */
,
.create-related-record-link
/* Create Related BTN */
,
.submit-btn.btn

/* Submit BTN */ {
  color: var(--nsw-text-light) !important;
  background-color: var(--nsw-brand-dark) !important;
  border-color: transparent !important;
  margin-top: 1rem;
}

.primary.btn.btn-primary:hover,
.btn-entitylist-filter-submit:hover,
.create-related-record-link:hover,
.submit-btn.btn:hover {
  background-color: var(--nsw-brand-dark) !important;
  background-image: linear-gradient(
    rgba(var(--nsw-white-rgb), 0.15),
    rgba(var(--nsw-white-rgb), 0.15)
  ) !important;
  border-color: transparent !important;
  color: var(--nsw-text-light) !important;
}

.primary.btn.btn-primary:active,
.btn-entitylist-filter-submit:active,
.create-related-record-link:active,
.submit-btn.btn:active,
.cancel.btn.btn-default:active {
  background-color: var(--nsw-brand-dark) !important;
  background-image: linear-gradient(
    rgba(var(--nsw-white-rgb), 0.075),
    rgba(var(--nsw-white-rgb), 0.075)
  ) !important;
  border-color: transparent;
}

.primary.btn.btn-primary:focus,
.btn-entitylist-filter-submit:focus,
.create-related-record-link:focus,
.submit-btn.btn:focus,
.cancel.btn.btn-default:focus,
.addnote.btn.btn-default:focus,
.btn.btn-default.remove-value:focus {
  outline-color: var(--nsw-focus) !important;
  background-color: var(--nsw-brand-dark) !important;
  color: var(--nsw-text-light) !important;
}

/* nsw-button nsw-button--dark-outline-solid style*/

.btn.btn-default.btn-hg
/* LIST SEARCH BTN */
,
.dropdown.action .btn.btn-default.btn-xs.aria-exp

/* subgrid btn */ {
  background-color: var(--nsw-white);
  border-color: var(--nsw-brand-dark);
  color: var(--nsw-brand-dark);
}

.btn.btn-default.btn-hg:hover,
.dropdown.action .btn.btn-default.btn-xs.aria-exp:hover {
  background-color: var(--nsw-brand-dark) !important;
  border-color: transparent !important;
  color: var(--nsw-text-light) !important;
}

.btn.btn-default.btn-hg:active,
.dropdown.action .btn.btn-default.btn-xs.aria-exp:active {
  background-color: var(--nsw-brand-dark) !important;
  border-color: transparent !important;
  color: var(--nsw-text-light) !important;
}

.btn.btn-default.btn-hg:focus,
.dropdown.action .btn.btn-default.btn-xs.aria-exp:focus {
  outline-color: var(--nsw-focus) !important;
}

/* DOWNLOAD LIST BTN: nsw-button nsw-button--dark-outline */
.entitylist-download.btn.btn-info {
  color: var(--nsw-brand-dark);
  background-color: transparent;
  border-color: var(--nsw-brand-dark);
}

.entitylist-download.btn.btn-info:hover {
  background-color: var(--nsw-brand-dark);
  border-color: transparent;
  color: var(--nsw-text-light);
}

.entitylist-download.btn.btn-info:active {
  background-color: var(--nsw-brand-dark);
  border-color: transparent;
  color: var(--nsw-text-light);
}

.entitylist-download.btn.btn-info:focus {
  outline-color: var(--nsw-focus);
}

/* LIST SEARCH BTN */
.btn.btn-default.btn-hg {
  min-width: 1rem;
  padding: 0.75rem 1rem;
}



/* -------------------- Selectpicker  -------------------- */
.bootstrap-select > .dropdown-toggle {
  background-color: var(--nsw-white);
  border: 1px solid var(--nsw-grey-01);
  border-radius: var(--nsw-border-radius);
  color: var(--nsw-text-dark);
  font-size: var(--nsw-font-size-sm-mobile);
  line-height: var(--nsw-line-height-sm-mobile);
  padding: 0.6875rem 1rem;
  vertical-align: middle;
  width: 100%;
}

.bootstrap-select > .dropdown-toggle:hover {
  background-image: linear-gradient(var(--nsw-hover), var(--nsw-hover)) !important;
  background-color: unset !important;
  border-color: unset !important;
}

.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select > select.mobile-device:focus + .dropdown-toggle {
  outline: solid 3px var(--nsw-focus) !important;
  outline-offset: 3px !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: black;
  background-color: var(--nsw-palette-blue-04);
}

.bootstrap-select .dropdown-menu > li > a {
  color: black;
  border: none;
  padding: 0.6875rem 1rem;
}

.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li > a:focus {
  background-image: linear-gradient(var(--nsw-hover), var(--nsw-hover));
}

.bootstrap-select .dropdown-menu > li > a.selected {
  background-image: linear-gradient(var(--nsw-hover), var(--nsw-hover));
  color: black;
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  padding: 0.5rem 1rem;
}

/* footer color */
.nsw-footer__lower p {
  color: white;
}

/* -------------------- Input  -------------------- */
input,
.input,
input.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--nsw-white);
  border: 1px solid var(--nsw-grey-01);
  border-radius: var(--nsw-border-radius);
  color: var(--nsw-text-dark);
  font-size: var(--nsw-font-size-sm-mobile);
  line-height: var(--nsw-line-height-sm-mobile);
  padding: 0.6875rem 1rem;
  vertical-align: middle;
  width: 100%;
  height: 3rem;
}

input:hover,
.input:hover,
input.form-control:hover {
  background-image: linear-gradient(var(--nsw-hover), var(--nsw-hover));
}

input:focus,
.input:focus,
input.form-control:focus {
  outline: solid 3px var(--nsw-focus) !important;
  outline-offset: 3px;
}

.crmEntityFormView .form-control.readonly, .crmEntityFormView .form-control[readonly][disabled], .form-readonly .form-control{
  border: 1px solid var(--nsw-grey-01);
  border-radius: var(--nsw-border-radius);
  padding-left: 1rem;
}

.query.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--nsw-white) !important;
  border: 1px solid var(--nsw-grey-01) !important;
  border-radius: var(--nsw-border-radius) !important;
  color: var(--nsw-text-dark) !important;
  font-size: var(--nsw-font-size-sm-mobile) !important;
  line-height: var(--nsw-line-height-sm-mobile) !important;
  padding: 1.5rem 1rem !important;
  vertical-align: middle !important;
  width: 100% !important;
}

.query.form-control:hover {
  background-image: linear-gradient(var(--nsw-hover), var(--nsw-hover)) !important;
}

.query.form-control:focus {
  outline: solid 3px var(--nsw-focus) !important;
  outline-offset: 3px !important;
}

/* add space between entity list search and download btn */
.entitylist-search {
  margin-bottom: 1rem;
}

/* entity list search and downalod btn padding to look same as the filter container */
.pull-right.toolbar-actions {
  padding: 15px;
}

/* ====================================== FORM ============================================= */

.crmEntityFormView {
  border: none;
}

textarea {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--nsw-white);
  border: 1px solid var(--nsw-grey-01);
  border-radius: var(--nsw-border-radius) !important;
  color: var(--nsw-text-dark);
  font-size: var(--nsw-font-size-sm-mobile);
  line-height: var(--nsw-line-height-sm-mobile);
  padding: 0.6875rem 1rem;
  vertical-align: middle;
  width: 100%;
  font-family: var(--nsw-font-family);
}

textarea:hover {
  background-image: linear-gradient(var(--nsw-hover), var(--nsw-hover));
}

textarea.form-control:focus {
  outline: solid 3px var(--nsw-focus) !important;
  outline-offset: 3px !important;
}

.entity-notes .attachment{
  margin-right: 9rem; /* add margin otherwise the div comes across the action button. */
}

/* adjust style of search button for lookups */
.input-group-btn button,
.input-group button:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){
align-items: center;
border-bottom-left-radius: 0 !important;
border-top-left-radius: 0 !important;
border-width: 1px;
display: flex;
justify-content: center;
margin: 0;
white-space: nowrap;
border-color: var(--nsw-grey-01) !important;
border-left-width: 0;
min-width: 3.75rem !important;
padding: 0;
color: var(--nsw-text-light) !important;
background-color: var(--nsw-brand-dark);
height: 3rem;
}

.input-group-btn button:hover,
.input-group button:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):hover{
  color: white !important;
  background-color: var(--nsw-brand-dark) !important;
  background-image: linear-gradient(rgba(var(--nsw-white-rgb), .15), rgba(var(--nsw-white-rgb), .15));
}

.input-group-btn button:focus,
.input-group button:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):focus{
  background-color: var(--nsw-brand-dark) !important;
  color: white !important;
  outline: solid 3px var(--nsw-focus) !important;
  outline-offset: 3px !important;
}

.input-group .input-group-text,
.input-group .form-control,
.input-group .form-select{
  padding: 0.6875rem 1rem;
}

.input-group-addon.btn.active {
  line-height: 2.3 !important;
}

/* datepicker lookup */
.input-append.input-group.datetimepicker .input-group-addon.btn{
    border: 1px solid black;
    border-left: 0;
    line-height: 1.65; /* Daniel Change from 1.2*/
}





.customControl .msos-container{
  border-radius: var(--nsw-border-radius);
  border: 1px solid black !important;
  padding: 0.5rem 0.5rem 0.5rem 0.1rem !important;
}

.msos-container.msos-disabled{
  padding: 0.5rem 0.5rem 0.5rem 1rem !important;
}

.customControl .msos-container:hover{
  border: 1px solid black !important;
  box-shadow: none;
}

.msos-container.msos-focused{
  outline: solid 3px var(--nsw-focus) !important;
  outline-offset: 3px;
}

.msos-input-container{
  padding: 4px !important;
}

.msos-container .msos-input:focus{
  outline: none !important;
}

/* ====================================== MOBILE ============================================= */
@media screen and (max-width: 767px) {
  .navbar-end {
    top: 1rem;
    right: 1rem;
  }

  /* ensure filter container is left */
  .entitylist-filter .pull-right {
    float: left !important;
  }

  /* entity list downalod btn align left */
  .entitylist-download {
    margin-left: 0 !important;
  }

  .table-fluid tr {
    border-top: none !important;
    border: 2px solid var(--nsw-grey-04);
    margin: 1rem 0;
    border-radius: 0.25rem;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  }

  .table-fluid td {
    border-bottom: none;
  }
}

/* ====================================== TABS ============================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar-end {
    top: 1rem;
  }
}

/* icon rotate */
@keyframes icon-rotate {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

.icon-rotate {
    animation: icon-rotate 2s linear infinite;
    width: 1px;
    display: inline-table;
    font-size: 2rem;
}


/* rich text */
[dir="ltr"]{
  font-family: unset !important;
  font-size: unset !important;
}