@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-Medium.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}

html, body {
    height: 100%;
}

body {
  flex-direction: column;
  display: flex;
  /* background-color: #fff; */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Helvetica Neue, Apple Color Emoji, Segoe UI Emoji,
    Segoe UI Symbol, Meiryo UI, Arial, sans-serif !important;
  font-weight: normal;
  background: linear-gradient(to right, #0099d3 0%, #336699 50%, #1d3e57 100%);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  overflow: hidden;
  background-size: cover;
  isolation: isolate;
  z-index: -1;
  width: 100vw;
  height: 100vh;
}

body .product-title .product-logo {
    margin-bottom: 50px;
}

div.logoWebclient {
  background-image: url("../images/webclient/background.svg");
  mix-blend-mode: multiply;
  display: flex;
  height: 100%;
  overflow: auto;
  background-repeat: no-repeat;
  background-position: right center;
  isolation: isolate;
}

.version-webclient {
  /* position: absolute; */
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-style: normal;
  /* color: #fff; */
  /* //color: #c6cfda; */
  font-size: 20px;

  line-height: 1em;
  left: 154px;
  bottom: 5px;
  right: 10px;
  /* // text-overflow: ellipsis;
  // overflow: hidden; */
  white-space: nowrap;
  /* padding-left: 6px; */
  user-select: none;
  margin-top: 15px;
}

/* body#occ,
body#rtd {
  font: 400 12px/18px Segoe UI, Open Sans !important;
} */

#default {
  background-image: url("../images/default/background.svg");
}

#occ body {
  background: linear-gradient(to right, #fff3e0 0%, #94c6d4  50%, #369  100%) !important;
}

#occ div.logoOcc {
  background-image: url("../images/occ/background-occ.svg");
  mix-blend-mode: multiply;
  display: flex;
  height: 100%;
  overflow: auto;
  background-repeat: no-repeat;
  background-position: right center;
  isolation: isolate;
}

#rtd body {
  background: linear-gradient(to right, #fff3e0 0%, #94c6d4  50%, #369  100%) !important;
}

#rtd div.logoRtd {
  background-image: url("../images/occ/background-occ.svg");
  mix-blend-mode: multiply;
  display: flex;
  height: 100%;
  overflow: auto;
  background-repeat: no-repeat;
  background-position: right center;
  isolation: isolate;
}

#insight body {
  background: linear-gradient(to right, #fff3e0 0%, #94c6d4  50%, #369  100%) !important;
}

#insight div.logoInsight {
  background-image: url("../images/occ/background-occ.svg");
  mix-blend-mode: multiply;
  display: flex;
  height: 100%;
  overflow: auto;
  background-repeat: no-repeat;
  background-position: right center;
  isolation: isolate;
}

#tsam {
  background-image: url("../images/tsam/background.svg");
}

#mcs {
  background-image: url("../images/tsam/background.svg");
}

#customerportal body {
  background: linear-gradient(to right, #fff3e0 0%, #94c6d4  50%, #369  100%) !important;
}


#customerportal div.logoCustomerportal {
  background-image: url("../images/occ/background-occ.svg");
  mix-blend-mode: multiply;
  display: flex;
  height: 100%;
  overflow: auto;
  background-repeat: no-repeat;
  background-position: right center;
  isolation: isolate;
}

#customer-reserved-area {
    background-image: unset;
    background-position: top;
    background-size: contain;
    background-color: #E1EEF3;
    font-family: 'Barlow' !important;
}

#customer-reserved-area button {
    font-family: 'Barlow' !important;
}


#occ .ui .segment,
#insight .ui .segment,
#rtd .ui .segment,
#customerportal .ui .segment {
  /* background-color: #3c3c3b;
  color: white !important; */
  min-height: 560px;
  width: 480px;
  box-sizing: border-box;
  background-color: #fff;
  flex-direction: column;
  padding: 0 50px 20px;
  border-radius: 10px;
}

#occ .ui .segment .ui.horizontal.divider,
#insight .ui .segment .ui.horizontal.divider,
#rtd .ui .segment .ui.horizontal.divider,
#customerportal .ui .segment .ui.horizontal.divider {
  color: inherit !important;
}

main {
  flex-shrink: 0;
}

main.center-segment {
  margin: auto;
  display: flex;
  align-items: center;
}

main.center-segment > .ui.container.medium {
  max-width: 450px !important;
}

main.center-segment > .ui.container.large {
  max-width: 700px !important;
}

body:not(#customer-reserved-area) main.center-segment > .ui.container > .ui.segment {
  padding: 0px 50px 20px 50px;
  min-height: 520px;
  width: 480px;
}

/* main.center-segment > .ui.container > .ui.segment .segment-form .buttons {
  margin-top: 1em;
} */

main.center-segment
  > .ui.container
  > .ui.segment
  .segment-form
  .buttons.align-right
  button,
main.center-segment
  > .ui.container
  > .ui.segment
  .segment-form
  .buttons.align-right
  input {
  margin: 0 0 0 0.25em;
}

main.center-segment
  > .ui.container
  > .ui.segment
  .segment-form
  .column
  .buttons.align-left
  button.link-button,
main.center-segment
  > .ui.container
  > .ui.segment
  .segment-form
  .column
  .buttons.align-left
  input.link-button {
  padding: 0.78571429em 1.5em 0.78571429em 0;
}

main.center-segment > .ui.container > .ui.segment .segment-form {
  text-align: left;
}

main.center-segment > .ui.container > .ui.segment .segment-form .align-center {
  text-align: center;
}

main.center-segment > .ui.container > .ui.segment .segment-form .align-right {
  text-align: right;
}

.ui.segment {
    position: relative;
    background: #FFFFFF;
    box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
    margin: 1rem 0em;
    padding: 1em 1em;
    border-radius: 10px;
    border: 1px solid rgba(34, 36, 38, 0.15);
  }

.cookie-policy-message {
  font-size: 14px;
}

footer {
  padding: 2rem 0;
}

body .product-title .product-title-text {
  margin: 0;
}

body .center-segment .product-title .product-title-text {
  margin-top: 0em;
  margin-bottom: 2em;
}

.ui.menu.fixed.app-header .product-logo {
  padding-left: 0;
}

/* Table of content styling */

main #toc {
  position: sticky;
  top: 93px;
}

main .ui.segment.toc {
  padding: 20px;
}

main .ui.segment.toc ul.ui.list.nav > li.sub {
  margin-left: 20px;
}

main .ui.segment.toc ul.ui.list.nav > li > a {
  color: rgba(0, 0, 0, 0.87);
  text-decoration: none;
}

main .ui.segment.toc ul.ui.list.nav > li:before {
  content: "\2219";
  font-weight: bold;
  font-size: 1.6em;
  line-height: 0.5em;
  display: inline-block;
  width: 1em;
  margin-left: -0.7em;
}

main .ui.segment.toc ul.ui.list.nav > li.sub:before {
  content: "\2192";
  margin-left: -1em;
}

main .ui.segment.toc ul.ui.list.nav > li:hover a {
  color: #ff5000;
  text-decoration: none;
}

main .ui.segment.toc ul.ui.list.nav > li:hover:before {
  color: #ff5000;
}

#usernameUserInput,
#password {
  height: 40px;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #ddd !important;
}

#occ #usernameUserInput,
#occ #password {
    
}
/* #rtd #usernameUserInput,
#rtd #password,
#insight #usernameUserInput,
#insight #password,
#customerportal #usernameUserInput,
#customerportal #password {
  height: 40px;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent;
  color: ;
  border-bottom: 1px solid #ddd !important;
} */

#occ #usernameUserInput,
#occ #password {

}
#rtd #usernameUserInput,
#rtd #password {
  margin-left: 10px;
  padding-top: 10px;
  font: 400 12px/18px Segoe UI, Open Sans !important;
}

.ui.checkbox .box:before,
.ui.checkbox label:before {
  border-radius: 1px !important;
  border: 2px solid #888 !important;
}

.ui.secondary.button.text-light {
  padding-left: 40px;
  padding-right: 40px;
  font-family: "Barlow", sans-serif;
  font-size: 12px;
  height: 30px;
  /* text-align: center; */
  width: 150px;
}

#customer-reserved-area #usernameUserInput,
#customer-reserved-area #password {
    border-bottom: 1px solid #3b3b3b !important;
    padding-left: 2.5em !important;
}

#customer-reserved-area #usernameUserInput::placeholder,
#customer-reserved-area #password::placeholder {
    color: #3b3b3b;
    opacity: 0.75;
}

#customer-reserved-area .input.icon > .icon {
    opacity: 1;
    color: #3b3b3b;
}

.ui.checkbox .box:before, .ui.checkbox label:before {
    border-radius: 1px !important;
    border: 2px solid #888 !important; 
}

#occ .ui.secondary.button.text-light {
  background-color: #369;

  height: 30px;
  /* text-align: center; */
  width: 150px;
}
#rtd .ui.secondary.button.text-light {
  background-color: #4dd8c2 !important;
  color: #3c3c3b !important;

  height: 30px;
  /* text-align: center; */
  width: 150px;
}
#insight .ui.secondary.button.text-light {
  background-color: #3eb15b !important;
  color: #fff !important;

  height: 30px;
  /* text-align: center; */
  width: 150px;
}

#tvox-team .ui.secondary.button.text-light {
  background-color: rgb(32, 80, 117);
}

#registerLink {
  color: #888;
}

/* .product-title h2 {
    white-space: nowrap;
    text-align: center;
    color: #3c3c3c;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 35px;
    line-height: 18px;
   
} */

#occ .product-titleOCC {
  box-sizing: border-box;
  background-color: #fff;
  flex-direction: column;
  padding: 0 50px 20px;
  border-radius: 10px;
}
.login-title,
#occ .login-title,
#rtd .login-title,
#insight .login-title,
#customerportal .login-title {
  white-space: nowrap;
  text-align: center;
  color: #3c3c3c;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 35px;
  line-height: 18px;
}
.product-title h5 {
    font-size: 12px;
    margin-bottom: 40px;
    white-space: nowrap;
    text-align: center;
    color: #3c3c3c;
    font-family: Barlow Condensed sans-serif;
    font-weight: 700;
}

#occ .product-title h2,
#rtd .product-title h2,
#insight .product-title h2,
#customerportal .product-title h2 {
    white-space: nowrap;
    text-align: center;
    color: #3c3c3c;
    font-family: Barlow Condensed sans-serif !important;
    font-weight: 700;
    font-style: normal;
    font-size: 25px;
    line-height: 18px;
  /* line-height: 10px !important; */
}

#customer-reserved-area .product-title h2 {
  font-size: 28px;
  margin-top: 5px;
  line-height: 25px !important;
}

/* #occ .product-title h2,
#rtd .product-title h2 {
  font: 400 23px/18px Segoe UI, Open Sans !important;
} */

#tvox-team .product-title h2 {
  margin-top: 20px;
}

#occ .ui.fluid.left.icon.input i,
#occ .ui.checkbox label,
#insight .ui.fluid.left.icon.input i,
#insight .ui.checkbox label,
#rtd .ui.fluid.left.icon.input i,
#rtd .ui.checkbox label,
#customerportal .ui.fluid.left.icon.input i,
#customerportal .ui.checkbox label {
  color: white !important;
}

body:not(#customer-reserved-area) .ui.fluid.left.icon.input i {
    font-size: 17px;
}

.ui.fluid.left.icon.input input {
    font-family: "Barlow", sans-serif;
    font-size: 14px;
}

#occ .product-title h5,
#rtd .product-title h5,
#insight .product-title h5,
#customerportal .product-title h5,
#customer-reserved-area .product-title h5 {
  margin-top: 0px;
  margin-bottom: 20px;
  font-weight: 100;
}


body:not(#customer-reserved-area) .ui.form .field .ui.input,.ui.form .fields .field .ui.input,.ui.form .wide.field .ui.input {
  width: 104%;
  right: 15px;
}

.ui.form .field {
  margin-top: 21px;
}


#customer-reserved-area .product-title .product-logo > img {
  width: 100%;
}

#customer-reserved-area a {
    color: #368DAF;
}

#customer-reserved-area main.center-segment > .ui.container.medium {
    max-width: 550px !important;
}

#customer-reserved-area main.center-segment > .ui.container > .ui.segment {
    border-radius: 12px;
    padding: 2rem;
}

#customer-reserved-area main.center-segment > .ui.container > .ui.segment > .segment-form > .form {
    font-size: 14px;
}

#customerportal .ui.secondary.button.text-light {
  background-color: #675dc6;
  height: 30px;
  /* text-align: center; */
  width: 150px;
}

main.center-segment.no-margin {
  margin: 0;
}

main.center-segment .ui.segment.no-border {
  border: none;
  box-shadow: none;
  padding-top: 0 !important;
}

/* main.center-segment > .ui.container > .ui.segment {
    padding: 4rem !important;
} */

.pssw-eye {
  position: absolute;
  left: 90%;
  top: 10px;
  cursor: pointer;
}

.hide {
  display: none;
}

.show {
  display: block;
}

#label-chkRemember {
  cursor: pointer;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  right: 30px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  font-size: 13px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  top: 15px;
  left: 25px;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.btn-grey {
  background-color: #c2cad8 !important;
  border-color: #c2cad8 !important;
}

.cra-navbar {
  height: 60px;
  background-color: rgba(29, 63, 87, 1);
  border-bottom: 3px solid !important;
  border-left-width: 0;
  border-right-width: 0;
  border-image: linear-gradient(
      to right,
      rgb(202, 22, 26),
      rgb(249, 179, 52),
      rgb(148, 193, 31),
      rgb(0, 157, 212),
      rgb(2, 94, 162),
      rgb(229, 7, 126)
    )
    1 stretch;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cra-navbar > img {
  height: 35px;
}

.cra-header-container {
  position: relative;
  margin-top: -3px;
}

.cra-header-container > img {
  width: 100%;
}

.cra-header-container > .cra-header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cra-header-container > .cra-header > h1 {
  margin: 0;
  font-size: 50px;
  font-weight: 700;
  font-family: "Raleway";
  color: #4a4a49;
  font-style: normal;
}

button.cra-button{
    font-size: 15px;
    padding: 10px 20px !important;
    width: 48%;
    margin: 0 !important;
    box-shadow:  4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
}

button.cra-button[type=submit]{
    background-color: #368DAF;
    color: #fff;
}

button.cra-button[type=submit]:hover, 
button.cra-button[type=submit]:active, 
button.cra-button[type=submit]:focus {
    background-color: #307996;
    color: #fff;
}

button.cra-button#registerLink{
    font-weight: bold;
    background-color: #d2d2d2;
    color: #3b3b3b;
}

button.cra-button#registerLink:hover, 
button.cra-button#registerLink:active, 
button.cra-button#registerLink:focus {
    background-color: #b4b4b4;
    color: #3b3b3b;
}

.cra-login-title {
    text-align: center;
    color: #3b3b3b;
    font-size: 70px;
    font-weight: bold;
    margin-bottom: 70px;
}

.cra-login-message {
    text-align: center;
    color: #3b3b3b;
    font-size: 32px;
    margin-bottom: 32px;
}

.cra-login-message strong {
    font-weight: bold;
}

.cra-login-illustration {
    width: 42vw;
    height: 21.3vw;
    position: absolute;
    bottom: 0;
    right: 0;
}

.cra-login-illustration image {
    width: 42vw;
}

.copyright-container {
  text-align: center;
  margin-top: 30px;
  font-size: 12px;
  color: #3c3c3c;
  font-family: "Barlow", sans-serif;
  font-weight: 400;

}

/* Negative */
.ui.visible.negative.message {
  height: 55px;
  border-radius: 5px;
  background-color: rgba(255, 0, 0, 0.15);
  padding-left: 15px;
  color: #e74b5b;
  font-family: "Barlow", sans-serif;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 40px;
  position: relative;
  top: 5px;
}

.ui.grid {
  margin-bottom: 120px !important;
  justify-content: flex-end;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

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

.flex-justify-space-between {
    justify-content: space-between;
}

@media only screen and (max-width: 768px) {
  html {
      overflow: hidden;
  }

  body {
      display: block;
      background-image: none;
  }

  body#tvox-team {
      touch-action: pan-x pan-y;
  }

  main.center-segment {
      height: 100%;
  }

  main.center-segment > .ui.container.medium {
      height: 100%;
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      max-width: unset !important;
  }
  
  main.center-segment > .ui.container > .ui.segment {
      min-height: 100%;
      display: flex;
      flex-direction: column;
      padding: 1rem;
      border-radius: 0;
      border: none;
  }

  main.center-segment > .ui.container > .ui.segment > .product-title {
      margin-top: 0;
  }

  main.center-segment > .ui.container > .ui.segment > .product-title > .theme-icon {
      width: 65vw;
  }

  main.center-segment > .ui.container > .ui.segment > .segment-form {
      flex: 1;
      display: flex;
      flex-direction: column;
  }

  main.center-segment > .ui.container > .ui.segment > .segment-form > .form {
      display: flex;
      flex-direction: column;
      padding-top: 1em;
      font-size: 1.3rem;
  }

  main.center-segment > .ui.container > .ui.segment > .segment-form > .form > .two.column.stackable.grid {
      flex: 1;
      display: flex;
      padding-top: 1em;
      padding-bottom: 1em;
      justify-content: space-between;
  }

  main.center-segment > .ui.container > .ui.segment > .segment-form > .form > .two.column.stackable.grid > div {
      width: unset !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
  }

  main.center-segment > .ui.container > .ui.segment > .segment-form > .form > .two.column.stackable.grid > div > button[type="submit"] {
      margin: 0;
      font-size: 1.2rem;
      padding-left: 45px;
      padding-right: 45px;
  }

  main.center-segment > .ui.container > .ui.segment > .segment-form > .form > .two.column.stackable.grid > div > .field > .fluid > input {
      font-size: 1.3rem !important;
  }

  main.center-segment > .ui.container > .ui.segment > .segment-form > .form > .two.column.stackable.grid > div > .field > .checkbox {
      font-size: 1.2rem;
      margin-left: 10px;
  }

  main.center-segment > .ui.container > .ui.segment > .segment-form > .form > .two.column.stackable.grid > div:first-child {
      margin-top: 8px !important;
  }

  main.center-segment > .ui.container > .ui.segment > .segment-form > .form > .two.column.stackable.grid > div:last-child {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-left: 1rem !important;
      padding-right: 1rem !important;
      /* width: 100% !important; */
  }

  main.center-segment > .ui.container > .ui.segment > .segment-form > .ui.divider.hidden {
      display: none;
  }

  main.center-segment > .ui.container > .ui.segment > .segment-form > .field .ui.icon.button.fluid {
      font-size: 1.2em;
  }

  #customer-reserved-area main.center-segment > .ui.container {
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
  }

  #customer-reserved-area main.center-segment > .ui.container > .ui.segment {
      overflow-y: auto;
      overflow-x: hidden;
      max-height: 100vh;
  }

  .cra-header-container > .cra-header > h1 {
      font-size: 40px;
  }

  .cra-login-title {
      min-height: unset;
      margin-bottom: 50px;
      font-size: 60px;
      line-height: 1.1em;
  }

  .cra-login-message {
      font-size: 25px;
  }
}

/* @media (prefers-color-scheme: dark) {
    #tvox-team body {
      color: #fff;
      background-color: #000;
    }

    #tvox-team main.center-segment > .ui.container > .ui.segment {
        background-color: #000;
    }
  } */