/* ------------------- ProShop Checkboxes & Checkmark SVG  ------------------- */

:root {
  --checkbox-colour: #0D3B66;
  --checkbox-disabled-colour: var(--disabled-bg-colour, #BFBFBF);
  --checkbox-display: inline-flex;
  --checkbox-margin: 0.35714285714285715rem;
  --checkbox-outline-width: 2px;
  --checkbox-outline: var(--checkbox-outline-width, 2px) solid;
  --checkbox-width-height: 1.25em;
  --checkbox-border-radius: 0.15em;
  --checkbox-checkmark-thickness: .2em solid #FFFFFF;
  --checkbox-checkmark-height: 0.42em;
  --checkbox-checkmark-width: 0.825em;
  --checkbox-hover-box-shadow: 0 0 .1em #1669b6;

  --checkbox-minus-width: 0.65em;
  --checkbox-minus-height: 0.19em;
  --checkbox-minus-top: calc((var(--checkbox-width-height) - var(--checkbox-minus-height)) / 2);
  --checkbox-minus-left: calc((var(--checkbox-width-height) - var(--checkbox-minus-width)) / 2);
}

/* 
------------------- 
ProShop Checkboxes 
------------------- 
*/


/* ------------------- Wrapper ------------------- */
.checkbox-wrapper {
  display: var(--checkbox-display, inline-flex);
  margin: var(--checkbox-margin, 0.35714285714285715rem) 0;
  align-items:center;
  font-size: 1rem;
}

td > .checkbox-wrapper {
  margin: 0;
}

td .percent-td-inner {
  display: flex;
  align-items: flex-start;
}
td .percent-td-inner > .checkbox-wrapper {
  margin: 0 0.5rem 0 0;
}

.messaging-module-datatable tbody tr td.messaging-checkbox-wrapper .checkbox-wrapper,
.query-resultPage-datatable tbody tr td .checkbox-wrapper {
  margin: 0;
  display: flex;
  justify-content: center;
}

.sysconfig-page-datatable tbody tr td .checkbox-wrapper,
.prefs-page-datatable tbody tr td .checkbox-wrapper {
  margin: 0;
  display: flex;
}

.checkbox-wrapper.no-margin {
  margin: 0
}

p.table-subheader .checkbox-wrapper label,
p.table-subheader .checkbox-wrapper input,
p.table-subheader .checkbox-wrapper {
  margin-top: 0;
  margin-bottom: 0;
}

.checkbox label, 
.checkbox-wrapper label {
  color: var(--text-colour, #000);
  font-size: inherit;
  padding-left: 0;
  line-height: initial;
}

.checkbox-wrapper input[type=checkbox] + .label-text,
.checkbox-wrapper .label-text + input[type=checkbox] {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.checkbox-wrapper input[type=checkbox] + .label-text {
  white-space: normal;
}

.checkmark-label-text {
  margin-left: 0.5rem;
}

.checkout-button-wrapper .btn[value="Cancel"] ~ .checkbox-wrapper {
  margin-left: 0.5rem;
}


/* ------------------- Checkbox ------------------- */

/* Hidden input */
span.checkbox-wrapper input[type="checkbox"]{
  position: relative;
  height:var(--checkbox-width-height, 1.25em);
  cursor:pointer;
  appearance:none;
  margin:0;
  accent-color: var(--checkbox-colour, #0D3B66);
  border:none;
  padding: 0;
}

/* Focus */
span.checkbox-wrapper input[type="checkbox"]:focus-visible {
  outline: solid 2px black;
  border-radius: var(--checkbox-border-radius, 0.15em)
}

/* Pseudo element, unchecked  */
span.checkbox-wrapper input[type="checkbox"]::before {
  border: var(--checkbox-outline-width, 2px) solid var(--checkbox-colour, #0D3B66);
  content: '';
  position: relative;
  display: inline-block;
  width: var(--checkbox-width-height, 1.25em);
  height: var(--checkbox-width-height, 1.25em);
  border-radius:var(--checkbox-border-radius, 0.15em);
  transition-duration: var(--transition-duration, 0.2s);
  transition-property: border, width, height, border-radius, background-color, box-shadow;
}

/* Pseudo element, hover */
span.checkbox-wrapper input[type="checkbox"]:hover::before {
  box-shadow: var(--checkbox-hover-box-shadow, 0 0 .1rem #1669b6)
}

/* Pseudo element, checked */
.checkbox-wrapper input[type="checkbox"]:checked::before {
  background-color: var(--checkbox-colour, #0D3B66);
}

/* Pseudo element, disabled  */
span.checkbox-wrapper input[type="checkbox"]:disabled{
  cursor:not-allowed;
}
span.checkbox-wrapper input[type="checkbox"]:disabled::before {
  --checkbox-colour: var(--checkbox-disabled-colour, #BFBFBF);
}
span.checkbox-wrapper input[type="checkbox"]:hover:disabled::before {
  box-shadow: none;
}


/* ------------------- Checkmark within Checkbox ------------------- */

.checkbox-wrapper input[type="checkbox"]::after {
  top: var(--checkbox-minus-top);
  left: var(--checkbox-minus-left);
  position: absolute;
  content: '';
  opacity: 0;
  border-bottom: 0 solid rgba(0,0,0,0);
  border-left: 0 solid rgba(0,0,0,0);
  width: 0;
  height: 0;
  transition-duration: var(--transition-duration);
  transition-property: transform, opacity, border, width, background-color;

}

.checkbox-wrapper input[type="checkbox"]:not([data-minus="true"]):checked::after {
  top: .3em;
  left: .2em;
  border-left: var(--checkbox-checkmark-thickness, .185em solid #FFFFFF);
  border-bottom: var(--checkbox-checkmark-thickness, .185em solid #FFFFFF);
  height: var(--checkbox-checkmark-height, 0.30em);
  width: var(--checkbox-checkmark-width, 0.65em);
  transform: rotate(-45deg);
  opacity: 1;
  transition-property: transform, opacity, border, width, height, background-color;
}


/* ------------------- Minus within Checkbox ------------------- */

.checkbox-wrapper input[type="checkbox"][data-minus="true"]::after {
  width: var(--checkbox-minus-width);
  height: 0;
  border-radius: 0;
  border-bottom: var(--checkbox-checkmark-thickness, .185em solid #FFFFFF);
  transform: translateY(-12.5%);
  opacity: 1;
  transition-property: transform, opacity, border, width, height, background-color;
}


/* ------------------- Special Cases ------------------- */

.table tr td.pref-perm-container .checkbox-wrapper{
  margin-top: 0;
  margin-bottom: 0;
  padding: .25rem 0;
  vertical-align: sub;
}



/* 
------------------- 
ProShop Checkmarks 
------------------- 
*/


/* Wrapper */
.checkmark-wrapper {
  display:inline-flex;
  align-items:center;
  margin: var(--checkbox-margin, 0.35714285714285715rem) 0;
}

/* Containers */
div.checkmark-container {
  height: var(--checkbox-width-height, 1.25em);
  width: var(--checkbox-width-height, 1.25em);
  margin: 0 2px;
}

span.checkmark-container {
  height: var(--checkbox-width-height, 1.25em);
  width: var(--checkbox-width-height, 1.25em);
  display: inline-block;
}

/* SVG */
svg.checkmark-svg {
  width:1em;
  overflow:visible;
}

svg.empty-checkbox-svg {
  width:1em;
  overflow:visible;
}

svg.checkmark-svg path,
svg.empty-checkbox-svg path {
  fill:var(--checkbox-colour, #0D3B66);
  stroke:var(--checkbox-colour, #0D3B66);
  stroke-width:.75em;
}

.checkmark-container.checkmark-disabled svg.checkmark-svg path{
  fill:var(--checkbox-disabled-colour, #BFBFBF);
}

/* ------------------- Special Cases ------------------- */

.pref-perm-container {
  display:-webkit-box;
}
.pref-perm-container a {
  margin-left: .25rem;
}

.access-module-prefs {
  display: inline-block;
}
.over-permission:not(:empty) {
  background: #FFE9E9;
  border-radius: 5px;
  padding: 2px;
  margin: 0 -2px;
}
#user-module-prefs .over-permission:not(:empty) {
  padding: 5px;
}
#mainEditingForm #user-module-prefs .over-permission:not(:empty) { /* if checked out */
  padding: 4px 9px;
}