/* ------------------------------------------- */
/* Style definitions for the TransdatiX Portal */
/* ------------------------------------------- */


.panel-title {
  color: rgb(80, 78, 77);
}

.border {
  border: 1px solid blue;
}

.v-center {
  display: flex;
  align-items: center;
}

.full-width {
  width: 100%;
}

.full-height {
  height: 100%;
}

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

body {
  font-family: "Segoe UI", Tahoma, Arial;
  font-size: 11pt;
  color: rgb(80, 78, 77);
}

.header {
  height: 86px;
  position: relative;
}

  .header .customer-logo {
    position: absolute;
    left: 0px;
    top: 0px;
  }

    .header .customer-logo img {
      margin-left: 30px;
      margin-right: 30px;
      margin-top: calc( (86px - 60px) / 2);
      height: 60px;
    }

  .header .logo {
    position: absolute;
    right: 0px;
    top: 0px;
  }

    .header .logo img {
      margin-top: 10px;
      margin-left: 30px;
      margin-right: 30px;
    }

.header-content-right {
  text-align: right;
}

div#portal-container > .transdatix-table {
  overflow: visible !important;
}

.background-logo {
  background-image: url("/Img/portal_background.jpg");
  background-repeat: no-repeat;
  /* background-position: -454px -1180px;*/
  background-position: -370px -1180px;
  background-attachment: fixed;
  background-clip: border-box;
  background-size: 120%;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left bottom;
  -o-mask-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
  -o-mask-size: 100%;
  -o-mask-repeat: no-repeat;
  -o-mask-position: left bottom;
  -moz-mask-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
  -moz-mask-size: 100%;
  -moz-mask-repeat: no-repeat;
  -moz-mask-position: left bottom;
  mask-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: left bottom;
  background: -ms-linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
}

.toolbar {
  height: 43px;
  background-color: rgb(110, 105, 104);
  color: white;
  font-size: 1.2em;
}

  .toolbar .icon {
    margin-left: 15px;
    margin-right: 15px;
    cursor: pointer;
  }

  .toolbar a.toolbar-icon:hover {
    text-decoration: none;
  }

/*
  .toolbar .icon-bigger {
    margin-left: 15px;
    margin-right: 15px;
    font-size: 1.2em;
  }
*/
  .toolbar a {
    color: white;
  }

.content {
  height: calc(100% - 86px - 43px - 26px);
}

.tree {
  background-image: linear-gradient(to bottom, rgb(210, 210, 210), white 50%);
  padding-top: 40px;
  padding-left: 0px;
  overflow: auto;
}

  .tree ol, .tree ul {
  }

  .tree > ol > li, .tree > ul > li {
    margin-bottom: 5px;
  }

    .tree > ol > li > ol, .tree > ul > li > ul, .tree > ol > li > ul {
      padding-left: 15px;
    }

.body {
  font-size: 12pt;
  background-image: linear-gradient(to right, rgb(220, 220, 220), white 25px);
  padding: 40px;
  padding-left: 60px;
  padding-top: 20px;
  overflow: auto;
}

  .body ol, .body ul {
    margin-left: 10px;
  }

a {
  color: #0069B4;
}

h1 {
  font-weight: bold;
  margin-bottom: 20px;
}

h2 {
  margin-top: 30px;
  margin-bottom: 0px;
  font-size: 18pt;
  color: #0069B4;
  font-weight: bold;
}

h3 {
  font-size: 16pt;
  margin-bottom: 20px;
  font-weight: bold;
}

.header-content-right {
  margin-top: 10px;
  text-align: right;
}

.header-separator {
  border-top-width: 1px;
}

.footer {
  height: 26px;
  background-color: rgb(110, 105, 104);
  color: white;
  font-size: 0.9em;
  padding-left: 15px;
  padding-right: 15px;
}

/* --- Forms -------------------*/

.form-horizontal hr {
  margin-bottom: 0px;
}


.inline {
  display: inline;
}

.form-control.auto {
  width: auto;
  max-width: 100%;
}

.form-control.xxl {
  width: 100%;
  max-width: 100%;
}

.form-control.xl {
  width: 700px;
  max-width: 100%;
}

.form-control.l {
  width: 500px;
  max-width: 100%;
}

.form-control.m {
  width: 300px;
  max-width: 100%;
}

.form-control.s {
  width: 200px;
  max-width: 100%;
}

.form-control.xs {
  width: 100px;
  max-width: 100%;
}

.form-control.xxs {
  width: 75px;
  max-width: 100%;
}

.form-control.xxxs {
  width: 50px;
  max-width: 100%;
}

.inline-svg {
  display: inline-block;
  vertical-align: -12%;
}

  .inline-svg svg {
    display: block;
    margin: auto;
  }


/* --------------------- */
/* Status                */
/* --------------------- */

#status-icon {
  width: 15px;
  margin-right: 10px;
}

#status-bar.warning {
  background-color: yellow !important;
  color: black !important;
}

#status-bar.error {
  background-color: red !important;
  color: black !important;
}

#progress-bar,
#progress-bar-total {
  display: table;
  width: 100%;
}

.progress-bar-title {
  display: table-cell;
  vertical-align: middle;
  padding-right: 10px;
}

.progress {
  display: table-cell;
  vertical-align: middle;
  margin-bottom: 0px;
  width: 100%;
}

.progress-bar-percentage {
  display: table-cell;
  vertical-align: middle;
  padding-left: 10px;
}

.progress-bar {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}

.loading {
  display: none;
  cursor: wait;
}

.no-border {
    border: 0;
    box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
    outline: none;
}

.green{
  color: green;
}

.yellow{
  color: yellow;
}

.red{
  color: red;
}