/**
 * STYLE CSS
 *
 * Attention: These styles are only active if you are using the new blue Templates
 * All changes at your own risk!
 * © SECUDOS GmbH
 * V3.0 STYLE-D
 *
 * ========================================================================= */

/**
 *
 * Links
 *
 * ------------------------------------------------------------------------- */

a,
a:focus,
a:hover {
  color: var(--ct1-themecolor, #2f8ecd);
}

/**
 *
 * Base structure
 *
 * ------------------------------------------------------------------------- */

html,
body {
  height: 100%;
  background-color: white;
}

p {
  line-height: 1.3125rem;
}

/**
 *
 * Body structure
 *
 * ------------------------------------------------------------------------- */

body {
  display: -ms-flexbox;
  display: flex;
  color: #303030;
}

/**
 *
 * Set max width for main container
 *
 * ------------------------------------------------------------------------- */

.cover-container {
  max-width: 42em;
}

/**
 *
 * Main Header
 *
 * ------------------------------------------------------------------------- */

.masthead {
  background-color: var(--ct1-themecolor, #2f8ecd);
  padding: 10px;
}

.masthead-brand {
  margin-bottom: 0;
}

.nav-masthead .nav-link {
  padding: 0.25rem 0;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
  background-color: transparent;
  border-bottom: 0.25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #303030;
  border-bottom-color: #fff;
}

@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}

/**
 *
 * Cover
 *
 * ------------------------------------------------------------------------- */

.cover {
  padding: 0 1.5rem;
}

.cover .btn-lg {
  padding: 0.75rem 1.25rem;
  font-weight: 700;
}

/**
 *
 * Footer
 *
 * ------------------------------------------------------------------------- */

.mastfoot {
  color: rgba(0, 0, 0, 0.5);
}

.list-group-item {
  background-color: var(--ct1-themecolor, #2f8ecd);
  border: 1px solid rgba(0, 0, 0, 0.125);
  color: white;
}

/**
 *
 * Custom Button
 * You can customize these colors to use your own style. Simply change the background &
 * colors.
 * You can also create your own class. Remind to add class into HTML file.
 * ------------------------------------------------------------------------- */

.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: 0 none;
}

.btn-custom {
  background: var(--ct1-themecolor, #2f8ecd);
  color: #ffffff;
}

.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.open > .dropdown-toggle.btn-custom {
  background: #226896;
  color: white;
}

.btn-custom:active,
.btn-custom.active {
  background: #226896;
  box-shadow: none;
}

/**
 *
 * Custom Background for File Download
 *
 * ------------------------------------------------------------------------- */

.list-group-item-action:focus,
.list-group-item-action:hover {
  background-color: #f7f7f7;
}

.list-group-item.disabled,
.list-group-item:disabled {
  color: #6c757d;
  background-color: #fff;
  cursor: not-allowed;
}

/**
 *
 * Comment section for Download Page
 *
 * ------------------------------------------------------------------------- */

input,
textarea {
  outline: none;
  border: none;
  display: block;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  color: #555f77;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #ced2db;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #ced2db;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #ced2db;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #ced2db;
}

.comment-wrap {
  margin-bottom: 1.25rem;
  display: table;
  width: 100%;
  min-height: 5.3125rem;
}

/**
 *
 * Background for Icon in comment section
 *
 * ------------------------------------------------------------------------- */

.fa-user-bg {
  padding: 0.5em 0.6em;
  color: var(--ct1-themecolor, #2f8ecd);
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/**
 *
 * Icon for comment section
 *
 * ------------------------------------------------------------------------- */

.icocom {
  padding-top: 0.625rem;
  display: table-cell;
  width: 3.5rem;
}

.icocom .avatar {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 50%;
  background-size: contain;
}

.comment-block {
  padding: 1rem;
  background-color: #fff;
  display: table-cell;
  vertical-align: top;
  border-radius: 0.1875rem;
  box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.comment-block textarea {
  width: 100%;
  resize: none;
  min-height: 150px;
}

.comment-text {
  margin-bottom: 1.25rem;
  text-align: left;
  max-width: 400;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.bottom-comment {
  color: grey;
  font-size: 0.875rem;
}

.comment-date {
  float: left;
}

.comment-actions {
  float: right;
}

/**
 *
 * Show file name on download/upload pages in corrent length
 *
 * ------------------------------------------------------------------------- */

.filename {
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 *
 * If empty do not show error messages
 *
 * ------------------------------------------------------------------------- */

.bg-danger:empty {
  display: none;
}

/**
 *
 * Custom paddings/margins
 *
 * ------------------------------------------------------------------------- */

.paddingbottom5 {
  padding-bottom: 5px !important;
}

.paddingtop10 {
  padding-top: 10px !important;
}

.paddingtop20 {
  padding-top: 20px !important;
}

/**
 *
 * Styling for progress bar
 *
 * ------------------------------------------------------------------------- */

::-webkit-progress-bar {
  background-color: #f7f7f7;
  border: 1px solid #ced4da;
  box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
}

.progress-bar {
  background-color: #f7f7f7 !important;
}

.animated::-webkit-progress-value {
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
  background-color: var(--ct1-themecolor, #2f8ecd);
}

.animated::-moz-progress-bar {
  background-color: var(--ct1-themecolor, #2f8ecd) !important;
}

.animated::-ms-fill {
  background-color: var(--ct1-themecolor, #2f8ecd) !important;
}

/**
 *
 *  Modal Changes
 *
 * ------------------------------------------------------------------------- */

#successmodal .modal-dialog,
#errormodal .modal-dialog {
  -webkit-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  margin: 0 auto;
}

.modal-header {
  background-color: var(--ct1-themecolor, #2f8ecd);
}

/**
 *
 * Icon Upload Status
 *
 * ------------------------------------------------------------------------- */
.svg-box {
  display: inline-block;
  position: relative;
  width: 150px;
}

.green-stroke {
  stroke: #26c6da;
}

.red-stroke {
  stroke: #fc4b6c;
}

.yellow-stroke {
  stroke: var(--ct1-themecolor, #2f8ecd);
}

.rund circle.path {
  stroke-dasharray: 330;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  opacity: 0.4;
  animation: 0.7s draw-circle ease-out;
}

/**
 *
 * Checkmark
 *
 * ------------------------------------------------------------------------- */
.checkmark {
  stroke-width: 6.25;
  stroke-linecap: round;
  position: absolute;
  top: 56px;
  left: 49px;
  width: 52px;
  height: 40px;
}

.checkmark path {
  animation: 1s draw-check ease-out;
}

@keyframes draw-circle {
  0% {
    stroke-dasharray: 0, 330;
    stroke-dashoffset: 0;
    opacity: 1;
  }

  80% {
    stroke-dasharray: 330, 330;
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    opacity: 0.4;
  }
}

@keyframes draw-check {
  0% {
    stroke-dasharray: 49, 80;
    stroke-dashoffset: 48;
    opacity: 0;
  }

  50% {
    stroke-dasharray: 49, 80;
    stroke-dashoffset: 48;
    opacity: 1;
  }

  100% {
    stroke-dasharray: 130, 80;
    stroke-dashoffset: 48;
  }
}
/**
 *
 * Cross
 *
 * ------------------------------------------------------------------------- */
.cross {
  stroke-width: 6.25;
  stroke-linecap: round;
  position: absolute;
  top: 54px;
  left: 54px;
  width: 40px;
  height: 40px;
}

.cross .first-line {
  animation: 0.7s draw-first-line ease-out;
}

.cross .second-line {
  animation: 0.7s draw-second-line ease-out;
}

@keyframes draw-first-line {
  0% {
    stroke-dasharray: 0, 56;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 0, 56;
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dasharray: 56, 330;
    stroke-dashoffset: 0;
  }
}

@keyframes draw-second-line {
  0% {
    stroke-dasharray: 0, 55;
    stroke-dashoffset: 1;
  }

  50% {
    stroke-dasharray: 0, 55;
    stroke-dashoffset: 1;
  }

  100% {
    stroke-dasharray: 55, 0;
    stroke-dashoffset: 70;
  }
}
/**
 *
 * Alert and coloring
 *
 * ------------------------------------------------------------------------- */
.alert-sign {
  stroke-width: 6.25;
  stroke-linecap: round;
  position: absolute;
  top: 40px;
  left: 68px;
  width: 15px;
  height: 70px;
  animation: 0.5s alert-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.alert-sign .dot {
  stroke: none;
  fill: var(--ct1-themecolor, #2f8ecd);
}

@keyframes alert-sign-bounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

.svg-success {
  stroke-width: 2px;
  stroke: #8ec343;
  fill: none;
}

.svg-success path {
  stroke-dasharray: 17px, 17px;
  stroke-dashoffset: 0px;
  -webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards;
  animation: checkmark 0.25s ease-in-out 0.7s backwards;
}

.svg-success circle {
  stroke-dasharray: 76px, 76px;
  stroke-dashoffset: 0px;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  -webkit-animation: checkmark-circle 0.6s ease-in-out forwards;
  animation: checkmark-circle 0.6s ease-in-out forwards;
}

@keyframes checkmark {
  0% {
    stroke-dashoffset: 17px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes checkmark-circle {
  0% {
    stroke-dashoffset: 76px;
  }

  100% {
    stroke-dashoffset: 0px;
  }
}