/* $hinge-default-error-color: #CB0029;
$hinge-default-error-background: #FFFFFF;
$hinge-default-focus-color: $aig-blue; */
.dbp-toggle {
  position: relative;
  display: inline-block;
}
.dbp-toggle input[type=checkbox] {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.dbp-toggle input[type=checkbox] ~ label {
  font-weight: 500;
  margin: 0;
  padding: 0;
  display: inline-block;
  padding-left: 4.5rem;
  padding-right: 1.5rem;
  color: #20113E;
  height: calc(1.5rem + 4px);
  -webkit-transition: 280ms all cubic-bezier(0.115, 0.065, 0, 1);
  -o-transition: 280ms all cubic-bezier(0.115, 0.065, 0, 1);
  transition: 280ms all cubic-bezier(0.115, 0.065, 0, 1);
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
}
.dbp-toggle input[type=checkbox] ~ label:before, .dbp-toggle input[type=checkbox] ~ label:after {
  border-radius: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}
.dbp-toggle input[type=checkbox] ~ label:before {
  margin-top: -5px;
  width: calc(4rem);
  height: calc(2rem);
  border: 1px solid #B9C6D4;
  background: #F2F6FB;
}
.dbp-toggle input[type=checkbox] ~ label:after {
  -webkit-transition: 280ms all cubic-bezier(0.115, 0.065, 0, 1);
  -o-transition: 280ms all cubic-bezier(0.115, 0.065, 0, 1);
  transition: 280ms all cubic-bezier(0.115, 0.065, 0, 1);
  margin-top: -3px;
  margin-left: 3px;
  width: calc(1.5rem + 4px);
  height: calc(1.5rem + 4px);
  border: 1px solid #B9C6D4;
  background: #FFFFFF;
}
.dbp-toggle input[type=checkbox] ~ label:hover:before {
  border-color: #8037ED;
}
.dbp-toggle input[type=checkbox] ~ label:hover:after {
  border-color: #8037ED;
}
.dbp-toggle input[type=checkbox]:checked + label {
  -webkit-transition: 280ms all cubic-bezier(0.115, 0.065, 0, 1);
  -o-transition: 280ms all cubic-bezier(0.115, 0.065, 0, 1);
  transition: 280ms all cubic-bezier(0.115, 0.065, 0, 1);
}
.dbp-toggle input[type=checkbox]:checked + label:before {
  content: "";
  background-color: #4F00CA;
  border-color: #E0E5EB;
  left: 0;
}
.dbp-toggle input[type=checkbox]:checked + label:after {
  background: #fff;
  border: none;
  left: calc(2rem - 2px);
}
.dbp-toggle input[type=checkbox][disabled] + label {
  cursor: not-allowed;
}
.dbp-toggle input[type=checkbox][disabled] + label::before {
  background-color: #F2F6FB;
}
.dbp-toggle input[type=checkbox][disabled]:checked + label:before {
  background: #F2F6FB;
}
.dbp-toggle input[type=checkbox][disabled]:checked + label:after {
  border: 1px solid #B9C6D4;
}
.dbp-toggle input[type=checkbox]:focus + label {
  outline: 2px solid #C053EF !important;
  outline-offset: 5px;
}
.dbp-toggle.disabled {
  pointer-events: none;
}
.dbp-toggle.disabled input[type=checkbox] ~ label {
  color: #B9C6D4;
  pointer-events: none;
}
.dbp-toggle.disabled input[type=checkbox] ~ label:hover {
  cursor: not-allowed;
}
.dbp-toggle.has-error input[type=checkbox] + label:before {
  border: 1px solid #CB0029;
  background: #FEFBFB;
}
.dbp-toggle.has-error input[type=checkbox] + label:after {
  border-color: #CB0029;
}
.dbp-toggle.has-error input[type=checkbox]:checked + label:before {
  background-color: #CB0029;
  border-color: #CB0029;
}

.dbp-bookmark {
  position: relative;
  display: inline-block;
}
.dbp-bookmark button {
  height: 3rem;
  /* &:after{
  	content: '';
  	display: block;
  	width: 2.5rem;
  	height: 2.5rem;
  	position: absolute;
  	top: 0.25rem;
  	left: 0;
  	background-repeat: no-repeat;
  }
  &[aria-checked=false]:after {
  	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' data-name='Layer 1' viewBox='0 0 48 48'%3E%3Cpath fill='%234f00ca' d='M10 0v48l13.51-4.93L38 48V0H10zm26 45.13l-12.51-4.2L12 45V2h24v43.13z'/%3E%3C/svg%3E");
  }
  &[disabled]:after {
  	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' data-name='Layer 1' viewBox='0 0 48 48'%3E%3Cpath fill='%23b9c6d4 ' d='M10 0v48l13.51-4.93L38 48V0H10zm26 45.13l-12.51-4.2L12 45V2h24v43.13z'/%3E%3C/svg%3E");
  }
  &[aria-checked="true"]:after {
  	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' viewBox='0 0 48 48'%3E%3Cg%3E%3Ctitle%3Ebackground%3C/title%3E%3Crect fill='none' id='canvas_background' height='602' width='802' y='-1' x='-1'/%3E%3C/g%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath id='svg_1' d='m10,0l0,48l13.51,-4.93l14.49,4.93l0,-48l-28,0zm26,45.13l-12.51,-4.2l-11.49,4.07l0,-43l24,0l0,43.13z' fill='%234F00CA'/%3E%3Crect id='svg_5' height='41.904255' width='26.812301' y='-0.203318' x='10.433299' stroke-width='1.5' fill='%234F00CA'/%3E%3Cpath transform='rotate(-179.73712158203125 30.215194702148438,43.760490417480476) ' id='svg_6' d='m23.0706,46.329336l0,-5.137688l14.28919,5.137688l-14.28919,0z' stroke-width='1.5' fill='%234F00CA'/%3E%3Cpath stroke='null' transform='rotate(-1.680219292640686 18.188421249389773,43.28311538696296) ' id='svg_7' d='m11.043828,40.876967l0,4.812295l14.28919,-4.812295l-14.28919,0z' stroke-width='1.5' fill='%234F00CA'/%3E%3C/g%3E%3C/svg%3E");
  } */
}
.dbp-bookmark button img, .dbp-bookmark button svg {
  height: 2.5rem;
  width: 2.5rem;
}
.dbp-bookmark button[disabled] {
  cursor: not-allowed;
}
.dbp-bookmark button[disabled] img, .dbp-bookmark button[disabled] svg {
  opacity: 0.75;
}
.dbp-bookmark button[disabled] svg path {
  fill: #B9C6D4;
}
.dbp-bookmark button[disabled] svg.bookmarked rect {
  fill: #B9C6D4;
}
.dbp-bookmark.has-error svg path {
  fill: #CB0029;
}
.dbp-bookmark.has-error svg.bookmarked rect {
  fill: #CB0029;
}
.dbp-bookmark .spinner-modal {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  padding-bottom: 0.75rem;
  padding-left: 2.5rem;
  background: none 0% 0% repeat scroll rgba(43, 20, 20, 0.2);
  border-radius: 0.125rem;
}
.dbp-bookmark .spinner-modal .dbp-loading-spinner svg {
  width: 2rem;
  height: 2rem;
  position: absolute;
  left: 3px;
  top: 6px;
}