@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
  --primary0: #F5F5F5;
  --primary10: #C2C2C2;
  --primary05: #E3E3E3;
  --primary50: #1380E4;
  --primary-light-blue: #D9EBFC;
  --primary100: rgba(42, 42, 42, 0.9462);
  --alert: #DE1C22;
  --alert05: #FFD6D7;
  --warning05: #FFE1BE;
  --warning50: #E86825;
  --success05: #D6F3E2;
  --success30: #08dd00;
  --success50: #008556;
  --white: #ffffff;
  --black: #000000;
  --dark: #2A2A2A;
  --gray0: #F2F2F3;
  --gray4: #757575;
  --gray05: #EAEAEB;
  --gray10: #E5E5E5;
  --gray40: #BEC0C5;
  --gray60: #838791;
  --gray80: #50545E;
  --gray100: #202532;
  --purple: #3714EC;
  --ok-color: #FFC700;
  --nok-color: #FF7A00;

  font-size: 16px;
  font-family: Inter, sans-serif;
  color: var(--primary100);
}

a {
  text-decoration: none;
  color: var(--primary100);
}

.fib-logo {
  width: 238px;
  height: 36px;
  background: url('img/fib-logo.png') no-repeat;
  background-size: contain;
}

.list.margins {
  margin-bottom: 16px;
}

.list li {
  margin-bottom: 8px;
}

.text-center {
  text-align: center;
}

.full-width {
  width: 100%;
}

.subsection-title {
  margin-bottom: 22px;
}

/************************************/
/* TYPOGRAPHY
/************************************/

.h900 {
  font-style: normal;
  font-weight: bold;
  font-size: 72px;
  line-height: 108px;
}

.h800 {
  font-style: normal;
  font-weight: bold;
  font-size: 56px;
  line-height: 84px;
}

.h700 {
  font-style: normal;
  font-weight: bold;
  font-size: 40px;
  line-height: 60px;
}

.h600 {
  font-style: normal;
  font-weight: bold;
  font-size: 32px;
  line-height: 48px;
}

.h500 {
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 36px;
}

.h400 {
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 32px;
}

.h400.margins {
  margin: 16px 0 22px 0;
}

.h300 {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}

.h200 {
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}

.h100 {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}

.subtitle {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
}

.body-large {
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px;
}

.body-medium {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
}

.body-small {
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2px;
}

.body-small.margins {
  margin-bottom: 4px;
}

/************************************/
/* END of TYPOGRAPHY
/************************************/

/************************************/
/* BUTTONS
/************************************/

.button-primary,
.button-secondary,
.button-tertiary {
  box-shadow: 0px 6px 20px -2px rgba(26, 26, 26, 0.14), 0px 4px 6px rgba(26, 26, 26, 0.06);
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  background-color: var(--white);
  display: inline-block;
  color: var(--primary100);
}

.button-primary:not(.square-button),
.button-secondary:not(.square-button),
.button-tertiary:not(.square-button) {
  padding: 12px 24px;
}

.button-primary.h200:not(.square-button),
.button-secondary.h200:not(.square-button),
.button-tertiary.h200:not(.square-button) {
  padding: 10px 20px;
}

.button-primary.h100:not(.square-button),
.button-secondary.h100:not(.square-button),
.button-tertiary.h100:not(.square-button) {
  padding: 8px 12px;
  box-shadow: none;
}

.button-primary {
  background-color: var(--primary50);
  color: var(--white);
}

.button-primary:hover {
  background-color: var(--primary100);
  color: var(--white);
}

.button-primary:disabled,
.button-primary.disabled {
  background-color: var(--gray05);
  color: var(--gray60);
  pointer-events: none;
  box-shadow: none;
}

.button-secondary {
  border: solid 1px var(--primary50);
}

.button-secondary:hover {
  background-color: var(--primary0);
}

.button.secondary:disabled,
.button.secondary.disabled {
  background-color: var(--white);
  border-color: var(--gray40);
  color: var(--gray60);
}

.button-tertiary {
  border: solid 1px var(--gray40);
}

.button-tertiary:hover {
  border-color: var(--gray100);
}

.button-tertiary:disabled,
.button-tertiary.disabled {
  border-color: var(--gray40);
  color: var(--gray60);
}

.button-primary [class^="icon-"]:first-child,
.button-primary [class*=" icon-"]:first-child,
.button-secondary [class^="icon-"]:first-child,
.button-secondary [class*=" icon-"]:first-child,
.button-tertiary [class^="icon-"]:first-child,
.button-tertiary [class*=" icon-"]:first-child {
  margin-left: 2px;
  margin-right: 14px;
  font-size: 20px;
}

.button-primary [class^="icon-"]:last-child,
.button-primary [class*=" icon-"]:last-child,
.button-secondary [class^="icon-"]:last-child,
.button-secondary [class*=" icon-"]:last-child,
.button-tertiary [class^="icon-"]:last-child,
.button-tertiary [class*=" icon-"]:last-child {
  margin-right: 2px;
  margin-left: 14px;
  font-size: 20px;
}

.button-primary.h200 [class^="icon-"]:first-child,
.button-primary.h200 [class*=" icon-"]:first-child,
.button-secondary.h200 [class^="icon-"]:first-child,
.button-secondary.h200 [class*=" icon-"]:first-child,
.button-tertiary.h200 [class^="icon-"]:first-child,
.button-tertiary.h200 [class*=" icon-"]:first-child {
  margin-left: 2px;
  margin-right: 10px;
  font-size: 16px;
}

.button-primary.h200 [class^="icon-"]:last-child,
.button-primary.h200 [class*=" icon-"]:last-child,
.button-secondary.h200 [class^="icon-"]:last-child,
.button-secondary.h200 [class*=" icon-"]:last-child,
.button-tertiary.h200 [class^="icon-"]:last-child,
.button-tertiary.h200 [class*=" icon-"]:last-child {
  margin-right: 2px;
  margin-left: 10px;
  font-size: 16px;
}

.button-primary.h200 [class^="icon-"]:first-child,
.button-primary.h200 [class*=" icon-"]:first-child,
.button-secondary.h200 [class^="icon-"]:first-child,
.button-secondary.h200 [class*=" icon-"]:first-child,
.button-tertiary.h200 [class^="icon-"]:first-child,
.button-tertiary.h200 [class*=" icon-"]:first-child {
  margin-left: 2px;
  margin-right: 8px;
  font-size: 12px;
}

.button-primary.h200 [class^="icon-"]:last-child,
.button-primary.h200 [class*=" icon-"]:last-child,
.button-secondary.h200 [class^="icon-"]:last-child,
.button-secondary.h200 [class*=" icon-"]:last-child,
.button-tertiary.h200 [class^="icon-"]:last-child,
.button-tertiary.h200 [class*=" icon-"]:last-child {
  margin-right: 2px;
  margin-left: 8px;
  font-size: 12px;
}

.square-button {
  display: inline-block;
  box-sizing: border-box;
  line-height: 40px;
  padding: 0;
  margin: 0;
  width: 40px;
  height: 40px;
  text-align: center;
  box-shadow: none;
  flex: 0 0 auto;
  padding: 0;
}

.square-button [class^="icon-"]:first-child:last-child,
.square-button [class*=" icon-"]:first-child:last-child {
  margin-left: 0;
  margin-right: 0;
  line-height: 40px;
}


/************************************/
/* END of BUTTONS
/************************************/

/************************************/
/* TEXT BUTTONS
/************************************/

.text-button-primary,
.text-button-secondary {
  cursor: pointer;
  display: inline-block;
  border: none;
  background: none;
}

.text-button-primary [class^="icon-"],
.text-button-primary [class*=" icon-"],
.text-button-secondary [class^="icon-"],
.text-button-secondary [class*=" icon-"] {
  display: inline-block;
  position: relative;
  top: 1px;
}

.text-button-primary.h300 [class^="icon-"]:first-child,
.text-button-primary.h300 [class*=" icon-"]:first-child,
.text-button-secondary.h300 [class^="icon-"]:first-child,
.text-button-secondary.h300 [class*=" icon-"]:first-child {
  margin-right: 16px;
}

.text-button-primary.h200 [class^="icon-"]:first-child,
.text-button-primary.h200 [class*=" icon-"]:first-child,
.text-button-secondary.h200 [class^="icon-"]:first-child,
.text-button-secondary.h200 [class*=" icon-"]:first-child {
  margin-right: 10px;
}

.text-button-primary.h100 [class^="icon-"]:first-child,
.text-button-primary.h100 [class*=" icon-"]:first-child,
.text-button-secondary.h100 [class^="icon-"]:first-child,
.text-button-secondary.h100 [class*=" icon-"]:first-child {
  margin-right: 8px;
}

.text-button-primary.h300 [class^="icon-"]:last-child,
.text-button-primary.h300 [class*=" icon-"]:last-child,
.text-button-secondary.h300 [class^="icon-"]:last-child,
.text-button-secondary.h300 [class*=" icon-"]:last-child {
  margin-left: 16px;
}

.text-button-primary.h200 [class^="icon-"]:last-child,
.text-button-primary.h200 [class*=" icon-"]:last-child,
.text-button-secondary.h200 [class^="icon-"]:last-child,
.text-button-secondary.h200 [class*=" icon-"]:last-child {
  margin-left: 10px;
}

.text-button-primary.h100 [class^="icon-"]:last-child,
.text-button-primary.h100 [class*=" icon-"]:last-child,
.text-button-secondary.h100 [class^="icon-"]:last-child,
.text-button-secondary.h100 [class*=" icon-"]:last-child {
  margin-left: 8px;
}

.text-button-primary {
  color: var(--primary50);
}

.text-button-secondary {
  color: var(--gray100);
}

.text-button-primary,
.text-button-secondary {
  text-decoration: none;
}

.text-button-primary:hover,
.text-button-secondary:hover {
  text-decoration: underline;
}

.disabled .text-button-secondary,
.disabled .text-button-primary,
.text-button-secondary:disabled,
.text-button-secondary.disabled,
.text-button-primary:disabled,
.text-button-primary.disabled {
  color: var(--gray60);
  pointer-events: none;
}

/************************************/
/* END of TEXT BUTTONS
/************************************/

/************************************/
/* INPUTS
/************************************/

select,
input[type]:not([type=radio]):not([type=checkbox]) {
  border: 1px solid var(--gray40);
  box-sizing: border-box;
  border-radius: 6px;
  background-color: var(--white);
}

sec-profile-password-change-form input,
input[type]:not([type=radio]):not([type=checkbox]).body-medium {
  padding: 10px 16px;
}

select.body-medium {
  padding: 12px 16px;
}

input[type]:not([type=radio]):not([type=checkbox]).body-large {
  padding: 12px 16px;
}

select.body-large {
  padding: 14px 16px;
}

input[type]:not([type=radio]):not([type=checkbox]).body-small {
  padding: 8px 12px;
}

select.body-small {
  padding: 10px 12px;
}

select:focus,
input[type]:not([type=radio]):not([type=checkbox]):focus {
  outline: none;
  border: solid 1px var(--primary50);
}

.error select,
select.error,
.error input[type]:not([type=radio]):not([type=checkbox]),
input[type]:not([type=radio]):not([type=checkbox]).error {
  outline: none;
  border: solid 1px var(--alert);
}

.input-icon-after input[type]:not([type=radio]):not([type=checkbox]).body-large {
  padding-right: 48px
}

.input-icon-after {
  position: relative;
}

.input-icon-after input {
  width: 100%;
}

.input-icon-after [class^="icon-"],
.input-icon-after [class*=" icon-"] {
  position: absolute;
  right: 16px;
  top: 12px;
  font-size: 20px;
}

.input-icon-after.body-large [class^="icon-"],
.input-icon-after.body-large [class*=" icon-"] {
  right: 39px;
  top: 16px;
}

/************************************/
/* END of INPUTS
/************************************/

/************************************/
/* LOADER
/************************************/

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

.loader-mini,
.loader-small,
.loader-medium,
.loader-big {
  display: inline-block;
  border: solid 3px var(--primary05);
  border-right-color: var(--primary50);
  animation: rotation 0.8s linear infinite;
}

.loader-big {
  width: 40px;
  height: 40px;
  border-radius: 40px;
}

.loader-medium {
  width: 20px;
  height: 20px;
  border-radius: 20px;
}

.loader-small {
  width: 16px;
  height: 16px;
  border-radius: 16px;
}

.loader-mini {
  width: 12px;
  height: 12px;
  border-radius: 12px;
}


/************************************/
/* END of LOADER
/************************************/

/************************************/
/* GRID
/************************************/

.hbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.center {
  justify-content: center;
}

.vbox {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.hbox.margins>* {
  margin-right: 10px;
}

.hbox.margins>*:last-child {
  margin-right: 0;
}

.left {
  align-items: flex-start;
  justify-content: flex-start;
}

.grid {
  box-sizing: border-box;
  --grid-margin-size: 24px;
  --grid-box-size: 94px;
  display: flex;
  max-width: calc(var(--grid-box-size) * 12 + var(--grid-margin-size) * 13);
}

.grid>* {
  margin-left: var(--grid-margin-size);
}

.grid>*:last-child {
  margin-right: var(--grid-margin-size);
}

.box1 {
  width: var(--grid-box-size);
}

.box2 {
  width: calc(var(--grid-box-size) * 2 + var(--grid-margin-size))
}

.box3 {
  width: calc(var(--grid-box-size) * 3 + var(--grid-margin-size) * 2)
}

.box4 {
  width: calc(var(--grid-box-size) * 4 + var(--grid-margin-size) * 3)
}

.box5 {
  width: calc(var(--grid-box-size) * 5 + var(--grid-margin-size) * 4)
}

.box6 {
  width: calc(var(--grid-box-size) * 6 + var(--grid-margin-size) * 5)
}

.box7 {
  width: calc(var(--grid-box-size) * 7 + var(--grid-margin-size) * 6)
}

.box8 {
  width: calc(var(--grid-box-size) * 8 + var(--grid-margin-size) * 7)
}

.box9 {
  width: calc(var(--grid-box-size) * 9 + var(--grid-margin-size) * 8)
}

.box10 {
  width: calc(var(--grid-box-size) * 10 + var(--grid-margin-size) * 9)
}

.box11 {
  width: calc(var(--grid-box-size) * 11 + var(--grid-margin-size) * 10)
}

.box12 {
  width: calc(var(--grid-box-size) * 12 + var(--grid-margin-size) * 11)
}

/************************************/
/* END of GRID
/************************************/


/************************************/
/* WELL
/************************************/

.well {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  border-radius: 6px;
  box-sizing: border-box;
  background-color: var(--white);
  text-decoration: none;
  color: var(--primary100);
  border: solid 1px transparent;
}

.well span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.well.disabled a,
.well.disabled {
  color: var(--gray60);
}

.well:hover:not(.unselectable) {
  box-shadow: 0px 6px 20px -2px rgba(26, 26, 26, 0.14);
  filter: drop-shadow(0px 4px 6px rgba(26, 26, 26, 0.06));
  border: 1px solid var(--gray40);
  cursor: pointer;
}

.well.active {
  background-color: var(--primary-light-blue);
  border: solid 2px var(--primary50);
}

.well.active [class^="icon-"],
.well.active [class*=" icon-"] {
  color: var(--primary50);
}

.well .icon-check {
  display: none;
}

.well.active .icon-check {
  display: inline-block;
}

.well .list-action {
  display: none;
}

.well:hover .list-action {
  display: inline-block;
}

.well.active:hover .icon-check {
  display: none;
}

.well.h300 {
  padding: 0 22px;
}

.well.body-large {
  padding: 0 19px;
}

/************************************/
/* END of WELL
/************************************/

/************************************/
/* SPIDER LIST
/************************************/

.spider-list li {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  position: relative;
  margin-left: 12px;
}

.spider-list li:before {
  content: ' ';
  display: block;
  width: 12px;
  height: 55px;
  border: solid 1px var(--gray40);
  border-right: none;
  border-top: none;
  position: absolute;
  top: 25px;
  left: -13px;
}

.spider-list li:first-child:before {
  border-top: solid 1px var(--gray40);
  border-radius: 6px 0 0 0;
}

.spider-list li:nth-last-child(2):before {
  border-radius: 0 0 0 6px;
}

.spider-list li:first-child:nth-last-child(2):before {
  border-radius: 6px 0 0 6px;
}

.spider-list li:last-child:before {
  border: none;
}

/************************************/
/* END of SPIDER LIST
/************************************/

/************************************/
/* CHIPS
/************************************/

.chip {
  border-radius: 500px;
  background-color: var(--gray05);
  color: var(--gray100);
  cursor: pointer;
}

.chip:hover {
  background-color: var(--primary05);
}

.chip.active {
  background-color: var(--primary-light-blue);
  border: solid 1px var(--primary50);
  color: var(--primary100);
}

.chip.disabled,
.chip:disabled {
  color: var(--gray60);
}

.chip.body-large {
  padding: 12px 20px;
}

.chip.body-medium {
  padding: 10px 16px;
}

.chip.body-small {
  padding: 8px 12px;
}

/************************************/
/* END of CHIPS
/************************************/

/************************************/
/* BADGES
/************************************/

.badge-red {
  background-color: var(--alert05);
}

.badge-red.badge-labeled:before {
  background-color: var(--alert);
}

.badge-orange {
  background-color: var(--warning05);
}

.badge-orange.badge-labeld:before {
  background-color: var(--warning50);
}

.badge-green {
  background-color: var(--success05);
}

.badge-green.badge-labeled:before {
  background-color: var(--success50);
}

.badge-stroked {
  background-color: var(--white);
  border: solid 1px var(--gray40);
}

.badge-stroked.badge-labeled:before {
  background-color: var(--primary50);
}

.badge-gray {
  background-color: var(--gray05);
}

.badge-gray.badge-labeled:before {
  background-color: var(--gray80);
}

.badge-blue {
  background-color: var(--primary05);
}

.badge-blue.badge-labeled:before {
  background-color: var(--primary50);
}

.badge-red,
.badge-orange,
.badge-green,
.badge-stroked,
.badge-gray,
.badge-blue,
.badge-gray80 {
  border-radius: 6px;
  display: inline-block;
  align-items: center;
  cursor: default;
  color: var(--gray100);
  white-space: nowrap;
}

.badge-red.body-large,
.badge-orange.body-large,
.badge-green.body-large,
.badge-stroked.body-large,
.badge-gray.body-large,
.badge-blue.body-large,
.badge-gray80.body-large {
  padding: 8px;
}

.badge-red.body-medium,
.badge-orange.body-medium,
.badge-green.body-medium,
.badge-stroked.body-medium,
.badge-gray.body-medium,
.badge-blue.body-medium,
.badge-gray80.body-medium {
  padding: 6px 8px;
}

.badge-red.body-small,
.badge-orange.body-small,
.badge-green.body-small,
.badge-stroked.body-small,
.badge-gray.body-small,
.badge-blue.body-small,
.badge-gray80.body-small {
  padding: 4px 8px;
}

.badge-labeled:before {
  content: ' ';
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 8px;
  margin-right: 8px;
}

.badge-removable:after {
  content: ' ';
  background-color: var(--gray80);
  display: block;
  cursor: pointer;
}

.badge-removable.body-large:after {
  width: 12px;
  height: 12px;
  margin-left: 12px;
}

.badge-removable.body-medium:after {
  width: 10px;
  height: 10px;
  margin-left: 11px;
}

.badge-removable.body-small:after {
  width: 8px;
  height: 8px;
  margin-left: 10px;
}

.badge-gray80 {
  background: var(--gray80);
  color: var(--white);
}

/************************************/
/* END of BADGES
/************************************/

/************************************/
/* MODAL
/************************************/


.modal-backdrop {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: rgba(80, 84, 94, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.modal-wrapper,
.modal {
  width: 826px;
  /* margin-top: 10vh; */
  max-height: 80vh;
  background-color: var(--gray0);
  border-radius: 8px;
  padding: 38px 36px;
  box-sizing: border-box;
  overflow: auto;
  position: fixed;
  z-index: 1010;
  left: 50%;
  right: 50%;
  margin-left: -413px;
  margin-right: -413px;
}

.modal-wrapper .modal-header .modal-header-icon,
.modal .close-button {
  position: absolute;
  right: 36px;
  top: 36px;
}

.modal-wrapper .modal-header-content {
  font-weight: bold;
  font-size: 20px;
  line-height: 32px;
  margin-bottom: 42px;
}

.modal-wrapper .modal-footer-content {
  margin-top: 42px;
  text-align: right;
}

.modal-wrapper .modal-footer-content .button {
  margin-left: 8px;
}

.modal-title {
  margin-bottom: 42px;
}

.modal-body-content input {
  width: 90%;
  height: 40px;
  font-size: large;
}

/************************************/
/* END of MODAL
/************************************/

/************************************/
/* FORM ELEMENT
/************************************/

form .actions {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 34px;
}

form fib-license {
  margin-bottom: 20px;
  display: block;
}

form fib-license:last-child {
  margin-bottom: 0;
}

form .form-title {
  margin-bottom: 34px;
}

form .checkbox-list p {
  margin-bottom: 20px;
}

form .checkbox-list .form-element {
  margin-bottom: 10px;
}

form .actions>* {
  margin: 0 5px;
}

.form-element {
  margin-bottom: 20px;
}

.form-element .previously {
  margin-top: 6px;
  color: var(--purple);
}

.form-element.error {
  margin-bottom: 0;
}

.form-element:last-child {
  margin-bottom: 0;
}

fib-org-select .form-element:last-child {
  margin-bottom: 20px;
}

.form-element label {
  display: inline-block;
  width: 100%;
  margin-bottom: 8px;
}

.form-element.checkbox-element label {
  margin-bottom: 0;
}

.form-element .small {
  width: 117px;
}

form p.error-message,
.form-element .error {
  color: var(--alert);
  margin-top: 4px;
}

.form-element .checkbox-medium {
  margin-right: 12px;
}

/************************************/
/* END of FORM ELEMENT
/************************************/

/************************************/
/* CHECKBOX
/************************************/

.checkbox-small,
.checkbox-medium,
.checkbox-big {
  background-color: var(--white);
  border: 1px solid var(--gray40);
  box-sizing: border-box;
  border-radius: 6px;
  flex: 0 0 auto;
  position: relative;
}

.checkbox-small:hover,
.checkbox-medium:hover,
.checkbox-big:hover {
  background-color: var(--primary0);
  border-color: var(--primary50);
}

.checkbox-small:disabled,
.checkbox-small.disabled,
.checkbox-medium:disabled,
.checkbox-medium.disabled,
.checkbox-big:disabled,
.checkbox-big.disabled {
  background-color: var(--gray05);
  border-color: var(--gray40);
}

.checkbox-small.active,
.checkbox-medium.active,
.checkbox-big.active {
  background-color: var(--primary50);
  border-color: transparent;
  text-align: center;
}

.checkbox-small.active:after,
.checkbox-medium.active:after,
.checkbox-big.active:after {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  content: "\e929";
  font-size: 10px;
  ;
  color: var(--white);
  position: absolute;
  right: 2px;
  top: 4px;
}

.checkbox-small.active:after {
  font-size: 8px;
  right: 1px;
  top: 2px;
}

.checkbox-big {
  width: 24px;
  height: 24px;
}

.checkbox-medium {
  width: 20px;
  height: 20px;
}

.checkbox-small {
  width: 16px;
  height: 16px;
}

/************************************/
/* END of CHECKBOX
/************************************/

/************************************/
/* SWITCH
/************************************/

.switch-small,
.switch-medium,
.switch-big {
  background-color: var(--gray80);
  padding: 2px 3px;
  position: relative;
  cursor: pointer;
  margin: 0 10px;

}

.switch-big {
  width: 40px;
  min-width: 40px;
  height: 20px;
  margin: 4px;
  border-radius: 20px;
}

.switch-medium {
  width: 32px;
  height: 16px;
  margin: 4px;
  border-radius: 16px;
}

.switch-small {
  width: 24px;
  height: 12px;
  margin: 3px;
  border-radius: 12px;
}

.switch-small:after,
.switch-medium:after,
.switch-big:after {
  content: ' ';
  display: block;
  background-color: var(--white);
  position: absolute;
}

.switch-big:after {
  width: 20px;
  height: 20px;
  border-radius: 20px;
}

.switch-medium:after {
  width: 16px;
  height: 16px;
  border-radius: 16px;
}

.switch-small:after {
  width: 12px;
  height: 12px;
  border-radius: 12px;
}

.switch-on {
  background-color: var(--primary50);
}

.switch-on.switch-alt {
  background-color: var(--success50);
}

.switch-on:after {
  right: 3px;
}

.switch-small:hover,
.switch-medium:hover .switch-big:hover {
  margin: 0;
  border: solid 4px var(--primary05);
}

.switch-small:hover {
  border-size: 3px;
}

.switch-alt.disabled,
.switch-alt:disabled,
.switch-small.disabled,
.switch-small:disabled .switch-medium.disabled,
.switch-medium:disabled .switch-big.disabled,
.switch-big:disabled {
  background-color: var(--gray05);
  pointer-events: none;
  cursor: default;
}

.switch-small.disabled:after,
.switch-small:disabled:after,
.switch-medium.disabled:after,
.switch-medium:disabled:after,
.switch-big.disabled:after,
.switch-big:disabled:after {
  background-color: var(--gray60);
}

.switch-on.disabled,
.switch-on:disabled {
  background-color: var(--primary10);
}

.switch-on.disabled:after,
.switch-on:disabled:after {
  background-color: var(--white);
}

/************************************/
/* END of SWITCH
/************************************/

/************************************/
/* CONTAINER
/************************************/

.container {
  background-color: var(--white);
  border-radius: 6px;
  padding: 36px;
  box-sizing: border-box;
  margin-bottom: 16px;
}

/************************************/
/* END of CONTAINER
/************************************/

/************************************/
/* TABLE
/************************************/

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

thead th {
  background-color: var(--primary05);
  border-radius: 4px 0px 0px 4px;
  padding: 14px 16px;
  border-right: solid 2px var(--gray0);
}

thead th:last-child {
  border-right: none;
}

thead th .icon-sort-down {
  font-size: 0.8em;
  cursor: pointer;
}

tbody tr {}

tbody td {
  background-color: var(--white);
  padding: 12px 16px;
  border: solid 1px transparent;
}

tbody td:first-child {
  border-radius: 4px 0 0 4px;
}

tbody td:last-child {
  border-radius: 0 4px 4px 0;
}

tbody .date {
  color: var(--gray4);
}

thead th:last-child,
tbody td:last-child {
  width: 148px;
}

tbody tr:hover .buttons {
  display: block;
}

tbody tr:hover .date {
  display: none;
}

tbody tr td {
  border: solid 1px transparent;
  border-right: none;
  border-left: none;
}

tbody tr:hover td {
  border: solid 1px var(--primary50);
  border-right: none;
  border-left: none;
}

tbody tr:hover {
  box-shadow: 0px 6px 20px -2px rgba(26, 26, 26, 0.14), 0px 4px 6px rgba(26, 26, 26, 0.06);
}

tbody tr td:first-child {
  border-left: solid 1px transparent;
}

tbody tr:hover td:first-child {
  border-left: solid 1px var(--primary50);
}

tbody tr td:last-child {
  border-right: solid 1px transparent;
}

tbody tr:hover td:last-child {
  border-right: solid 1px var(--primary50);
}

tbody .buttons {
  display: none;
}

tbody .buttons li {
  display: inline-block;
  margin-right: 41px;
}

tbody .buttons button,
tbody .buttons a {
  font-size: 19px;
  line-height: 19px;
}

/************************************/
/* END of TABLE
/************************************/

/************************************/
/* FLASH MESSAGES
/************************************/

.flash-message-container {
  position: fixed;
  right: 32px;
  top: 80px;
  display: flex;
  flex-direction: column;
  z-index: 2147483647;
}

.flash-message {
  display: flex;
  justify-content: space-between;
  backdrop-filter: blur(3px);
  margin-bottom: 8px;
  cursor: pointer;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 40px;
  height: 40px;
  box-sizing: border-box;
  width: 580px;
}

.flash-message:after {
  content: '\e908';
  font-size: 12px;
  padding: 14px 14px 0 0;
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.flash-message-container .content {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--gray80);
  padding: 10px 16px;
}

.flash-message-container .info-message {
  background-color: var(--primary05);
}

.flash-message-container .warning-message {
  background-color: var(--warning05);
}

.flash-message-container .success-message {
  background-color: var(--success05);
}

.flash-message-container .error-message {
  background-color: var(--alert05);
}

.flash-message-container .flash-message.flash-message-show {
  animation-name: fade-in;
  animation-duration: 0.3s;
  animation-timing-function: normal;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
}

.flash-message-container .flash-message.flash-message-hide {
  opacity: 0;
  animation-name: fade-out;
  animation-duration: 0.3s;
  animation-timing-function: normal;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/************************************/
/* END of FLASH MESSAGES
/************************************/

/************************************/
/* DROPDOWN
/************************************/

.dropdown-trigger {
  position: relative;
}

.dropdown-trigger .dropdown {
  position: absolute;
  right: 0;
  padding-top: 5px;
  display: none;
}

.dropdown-trigger:hover .dropdown {
  display: block;
  z-index: 99;
  width: max-content;
}

/************************************/
/* END of DROPDOWN
/************************************/

sec-profile-password-change-form {
  color: var(--primary100);
}

sec-profile-password-change-form label {
  font-weight: bold;
}

sec-profile-password-change-form .button,
.cancel-button {
  padding: 12px 24px;
  box-shadow: 0px 6px 20px -2px rgb(26 26 26 / 14%), 0px 4px 6px rgb(26 26 26 / 6%);
  border-radius: 6px;
  border: solid 1px var(--gray40);
  cursor: pointer;
  text-decoration: none;
  background-color: var(--white);
  display: inline-block;
  color: var(--primary100);
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}

.cancel-button:hover {
  border-color: var(--gray100);
}

sec-profile-password-change-form .button {
  background-color: var(--primary50);
  color: var(--white);
}

sec-profile-password-change-form .button:hover {
  background-color: var(--primary100);
  color: var(--white);
}