/**
 * 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, #000548);
 }
 
 /**
  *
  * 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, #000548);
   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, #000548);
   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, #000548);
   color: #ffffff;
 }
 
 .btn-custom:hover,
 .btn-custom:focus,
 .btn-custom:active,
 .btn-custom.active,
 .open > .dropdown-toggle.btn-custom {
   background: #000548;
   color: white;
 }
 
 .btn-custom:active,
 .btn-custom.active {
   background: #000548;
   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, #000548);
   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, #000548);
 }
 
 .animated::-moz-progress-bar {
   background-color: var(--ct1-themecolor, #000548) !important;
 }
 
 .animated::-ms-fill {
   background-color: var(--ct1-themecolor, #000548) !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, #000548);
 }
 
 /**
  *
  * 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, #000548);
 }
 
 .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, #000548);
 }
 
 @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;
   }
 }