/** TOOL TIP */

.tooltip > .tooltip-inner
{
   
   
    color: white;
    font-size: 13px;
}

td.tds a:active{
  background: none !important;
}



.homeButton{
  margin-top: -70px;
  margin-left: 20px;
  margin-bottom: 20px;
  height: 35px;
  width: 200px;
  background-color:#658BB2 ;
  border-radius: 5px;
  
  cursor: pointer;
}
.homeButton:hover .hicon{
  color: white;
  
}
.homeButton:hover
{
  box-shadow: 0 2px 8px 0 rgba(101, 139, 178, .5), 0 5px 10px 0 rgba(101, 139, 178, .8);
}

.homebtText{
  margin-left: 40px;
  display: block;
  width: 150px;
  margin-top: -14px;
  font-size: 16px;
}

.hicon{
  color: black;
  position:relative;
  top: calc(50% - 10px);
 margin-left: 10px;


}
#logo {

  margin-top:0;


}


#logoContainer{
  width: 100%;
  height: 100px;
  margin-top:-6%;
  
}

.logoImage{
  display:inline;
  margin-left:15px;
}




.titleText{

  margin-left: auto;
  margin-right: auto;
  width: 65%;
}

#subTitleContainer{
  font-size: 24px;
  font-family: Verdana !important;
  width:100%;
  height: 50px;
  background-color : #E0E8F0;
  margin-bottom:.5%;
  margin-top: 2.5%;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;

}
#UnameContainer{
  
background-color: #BFCEDF;
  border-radius: 25px;
  align-items: center;

}

[contenteditable="true"].single-line {
    white-space: nowrap;
   
    overflow: hidden;
} 
[contenteditable="true"].single-line br {
    display:none;

}
[contenteditable="true"].single-line * {
    display:inline;
    white-space:nowrap;
}



.jumbotron {
  background-color : #E0E8F0;
  min-height: 78vh;
  background-size: cover;
}

html *
{
  
   font-family: Arial, Helvetica, sans-serif;
}

.modal-body {
  background-color : #E0E8F0;
}

.subtaskForm{
  background: linear-gradient(to right, #128c7e, #075e54);
  background: linear-gradient(to left,  #128c7e, #075e54);
  background: linear-gradient(to bottom,  #128c7e, #075e54);
  background: linear-gradient(to top,  #128c7e, #075e54); 

}

.atasks, .asubtasks{
  color: black;
  
}

.tasksInnerContainer, .subtasksInnerContainer{

  
  color: black;

}

.tsheadings
{
  background-color : #658BB2;
  font-weight: normal;
  border-radius: 5px;
  /* 14px*/
}
.tsnameheadings
{
  background-color: #658BB2;
}

ol, li {
  margin-bottom: 0rem !important;
}



/* The check box container */
.checkBoxContainer {
  position: relative;
  cursor: pointer;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkBoxContainer input {
 /* height: 0;
  width: 0; */
  display:none;
}


.checkmarkSub {
  position: absolute;
  height: 15px;
  width: 15px;
  background-color: white;
  border-radius: 4px;
}
.checkmarkkpi{
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: white;
  border-radius: 4px;
    margin-top:-10px;
}
.checkmarksprint{
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;

}

/* On mouse-over, add a grey background color */
.checkBoxContainer:hover input ~ .checkmarkSub {
  background-color: #BFCEDF;
}
.checkBoxContainer:hover input ~ .checkmarkTask {
  cursor: default !important;
}

.checkBoxContainer:hover input ~ .checkmarkkpi {
  background-color: #92ADC8;
}





/* When the checkbox is checked, add a blue background */
.checkBoxContainer input:checked ~ .checkmark {
  background-color: #658BB2;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkBoxContainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkBoxContainer .checkmark:after {
  left: 5.5px;
  top: 1px;
  width: 4px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.addTaskButton, .addSubTaskButton
{
  background-color : #658BB2;
  

}

.checkBoxContainerSprint
{
    padding: 50%;
}


.card-header{
  

  background-color:#BFCEDF !important;
  color: black;
  border-color: white;


}

.card-body{
  background-color:#BFCEDF !important;
  border-radius: 0 0 4px 4px;
}

.headtable{
  background-color:#92ADC8 !important ;


}


OL { counter-reset: item }


.modal-content{
  border-radius: 20px;
}

.modal-confirm {		
color: #636363;
width: 400px;
}
.modal-confirm .modal-content {
	padding: 20px;
	border-radius: 25px;
	border: none;
	text-align: center;
	font-size: 14px;
}
.modal-confirm .modal-header {
	border-bottom: none;   
	position: relative;
}
.modal-confirm h4 {
	text-align: center;
	font-size: 26px;
	margin: 30px 0 -10px;
}
.modal-confirm .close {
	position: absolute;
	top: -5px;
	right: -2px;
}
.modal-confirm .modal-body {
	color: #999;
}
.modal-confirm .modal-footer {
	border: none;
	text-align: center;		
	border-radius: 5px;
	font-size: 13px;
	padding: 10px 15px 25px;
}
.modal-confirm .modal-footer a {
	color: #999;
}		
.modal-confirm .icon-box {
	width: 80px;
	height: 80px;
	margin: 0 auto;
	border-radius: 50%;
	z-index: 9;
	text-align: center;
	border: 3px solid #f15e5e;
}
.modal-confirm .icon-box i {
	color: #f15e5e;
	font-size: 46px;
	display: inline-block;
	margin-top: 13px;
}

.modal-confirm .btn, .modal-confirm .btn:active {
	color: #fff;
	border-radius: 4px;
	background: #60c7c1;
	text-decoration: none;
	transition: all 0.4s;
	line-height: normal;
	min-width: 120px;
	border: none;
	min-height: 40px;
	border-radius: 3px;
	margin: 0 5px;
}
.modal-confirm .btn-secondary {
	background: #c1c1c1;
}
.modal-confirm .btn-secondary:hover, .modal-confirm .btn-secondary:focus {
	background: #a8a8a8;
}
.modal-confirm .btn-danger {
	background: #f15e5e;
}
.modal-confirm .btn-danger:hover, .modal-confirm .btn-danger:focus {
	background: #ee3535;
}
.trigger-btn {
	display: inline-block;
	margin: 100px auto;
}

a:hover {
  color: white;
  
}
a:active {
  background-color: #658BB2;
  color: white;
}


table, th, td {
  border:.5px solid white;
  border-bottom: none !important;
}

.card-body table tr:nth-last-child(1){
  border-bottom:.5px solid white !important;
}



th {
  padding: 5px;
}



.badge-sm {
    min-width: 1.8em;
    padding: .25em !important;
    color: white !important;
    cursor: pointer;
}

.card{
  border: none;
}
.alt {
  background-color: #BFCEDF;
  height: 20px;
  
  border-radius:15px;
  box-shadow:0 4px 7px -5px #000 inset;
}

.ProgressBarHeadAlt {
  background-color: #BFCEDF;
  height: 25px;
  border-radius:20px;
  box-shadow:0 4px 7px -5px #000 inset;
}

.ProgressBarHead{
    height: 25px;
    background-color: #658BB2;
    border-radius:20px;
    box-shadow:0 4px 7px -5px #000 inset;
}

.ProgressBarKPI{
  height: 25px;
  background-color: #FFA500;
  border-radius:20px;
  box-shadow:0 4px 7px -5px #000 inset;

}

.progressBarI
{
  min-width:2em;
  height: 20px;
  background-color: #658BB2;
  border-radius:15px;
  box-shadow:0 4px 7px -5px #000 inset;
}

[contenteditable]:focus {
  outline: 1px solid;
}

.kpiColor
{
  background-color: #FFA500 !important;
}



.dropbtn {
 
  color: white;
  border: none;
  cursor: pointer;
  border-radius:15px;
}

.kpiddb{
  background-color: #FFA500;

}

.sprintb{
  background-color: #658BB2;
  padding-left: 10px;
  padding-top: 1.5px ;
}
.dropdown:hover .sprintb {
  background-color: #92ADC8;
}

.dropbtnstatus{
  width: 25px !important;
  height: 30px !important;
  border-radius: 0px 3px 3px 0px;
  background-color: #658BB2 !important;
  margin-left: 11px;
  margin-top: -3px;

}
.dropdownForInput
{
  margin-top:37.5px;
  margin-left:-38px;
}

.bi-arrow-down{
  margin-left: 3px;
  font-size: large;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #E0E8F0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

 
}

.dropdown-contentStatus{
  display: none;
  position: absolute;
  background-color: white;
  min-width: 150px !important;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius:5px;

}






.dropdown-contentStatus .a{
  font-size: 12.5px;
  border-bottom: .01px #343a40 !important;
  
 
}
.dropdown-content .a {
  color: black;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 4px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-bottom: .2px solid white !important;
  line-height:1.4em;
 
  
}

.dropdown-content table.td{
  border:none !important;
}

.dropdown-content .a:hover {background-color: #BFCEDF; cursor: pointer;}

.dropdown:hover .dropdown-content {
  display: block;
  
}

.dropdown:hover .kpiddb {
  background-color: #3e8e41;
}

.dropdown:hover .dropbtnstatus {
  background-color: #92ADC8;
}

.Nichtbegonnen{
  background-color:#dc3545;
  padding: 2px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 10px;

}

.InArbeit{
  background-color:#007bff;
  padding: 2px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 10px;
  
}

.Abgeschlossen{
  
    background-color:#28a745;
    padding: 2px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 10px;
  }

  .Verschoben{
  
    background-color:#ffc107;
    padding: 2px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 10px;
  }
  
  .up
  {
    font-size:.84vw;
    /*17px?*/
  }

  .stageHeading
  {
    font-size: 1vw;
    font-weight: bold;
  }
  


  .footerContainer{

    margin-top: 2%;
     height: 5vh;
    
   }
   
   
   
    .footer {
    
   
     color: black !important;
     display: flex;
     justify-content: center;
     align-items: center;
     white-space: nowrap;
     font-size: 13px !important;
     margin-top: 1.4vh;
   
   }
   
   .hline{ 
   
   
   
     margin-left: 25%;
     margin-right: 25%;
     height:.1px;
     background: #C0C0C0;
	 opacity:.5;
	 margin-bottom:0 !important;
    
   }
   
   
   
   .footer a:active{
     background-color: #E0E8F0 !important;
   }
   
   .footer a:hover{
     color: #4d4d4d !important;
   }
   
   
   
   .year{
     margin-left: 0%;
   }
   
   .imagineai{
     margin-left: 50px;
   }
   
   .datenschutz{
   
   margin-left: 50px;
   color: black !important;
   
   }
   
   
   .impressum{
   
     margin-left: 50px;
   }
   
   .impText{
     font-size: 1vw;
     padding-left: 5%;
     padding-right: 5%;
     
   }
   
   .boxContainer{
     
     border: 2px solid black;
     padding: 25px;
     margin: 20px;
   }
   
   .email
   {
     color: black !important;
     text-decoration: underline !important;
   
   }

   .cookiealert {

    
    background: rgba(50,50,58,1) !important;
    font-size: 15px;
 
   }

   
   .btn-nav
   {
     background: white;
   }
   .btn-nav:hover
  {
    background: #E0E8F0;
  }

  .badgeSmall{

    width: 18px;
    height: 18px;
    background-color: #E0E8F0;
    border-radius: 5px;
  }

  label
  {
    margin-bottom: .15rem !important;
  }

  .sprint{
    right: 0;
  }

  .drp-selected
  {
    display: none !important;
  }

  .addSprint{
    float: right;
    margin-right: 10px;
    background-color: #658BB2;
    border-radius: 5px;
  }

  .addSprintIcon
  {
    color: white;
  }

  .addSprint:hover{
    background-color:#92ADC8 ;
  }

  .addSprint:hover .bi{
   color: white !important;
  }

  .sprintDropdown
  {
    float: right;
   
  }
  .sprintDropdownContent
  {
    min-width: 250px !important;
  }

  .bi:hover
{
  color : #bebebe;

}
.sprintBadge{
  background-color: #658BB2;
  border-radius: 8px;
  margin-right: 6px;
  margin-top: 5px;
  margin-bottom:4px;
  float: right;
}

.sprintBadgeClose
{
  cursor: pointer;
}


.sprintIconBlack {
  background: url("../images/sprint.jpg") no-repeat;
  background-size: 17px;
  padding-left: 35px !important;
  background-position: 8px 5px;
}

.responsibleIcon {
  background: url("../images/person-circle.svg") no-repeat;
  background-size: 16px;
  padding-left: 35px;
  background-position: 8px 6px;
}

.calenderIcon {
  background: url("../images/calendar.svg") no-repeat;
  background-size: 16px;
  padding-left: 35px !important;
  background-position: 8px 6px;
}

.levelIcon {
  background: url("../images/level.png") no-repeat;
  background-size: 16px;
  padding-left: 35px;
  background-position: 8px 6px;
}

.taskIcon {
  background: url("../images/task.svg") no-repeat;
  background-size: 16px;
  padding-left: 35px;
  background-position: 8px 6px;
}

.kpiIcon {
  background: url("../images/KPIIcon.png") no-repeat;
  background-size: 35px;
  padding-left: 35px;
  background-position: 0px 3.5px;
}

.subtaskIcon {
  background: url("../images/subtask.png") no-repeat;
  background-size: 16px;
  padding-left: 35px;
  background-position: 5px 8px;
}

.outputIcon {
  background: url("../images/output.png") no-repeat;
  background-size: 16px;
  padding-left: 35px;
  background-position: 8px 6px;
}

.passwordIcon {
  background: url("../images/password.png") no-repeat;
  background-size: 16px;
  padding-left: 35px;
  background-position: 8px 9px;
}



.input-field {
  width: 90%;
  height: 30px;
  border-radius: 5px;
  padding: 10px;
  margin-left:10px;
  outline: none;
  border:none;
}

.input-field:focus {
  border: 2px solid dodgerblue;
}
input{
  background-color: white !important;
}

.datepicker
{
  margin-top: 10px !important;
}

.tooltipp {
  position: relative;
  display: inline-block;
 
}

.tooltipp .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -70px;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 13px !important;
  font-weight: normal !important;
 
}

.tooltipp .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltipp:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltipp .tooltiptext:hover {
  visibility: hidden;
}



progress::-moz-progress-bar {
  background: #FFA500;
  border-radius: 8px;
}

/* For Chrome or Safari */
progress::-webkit-progress-value {
  background: #FFA500;
  border-radius: 8px;
}

/* For IE10 */
progress {
  background: #FFA500;
  border-radius: 8px;
  height: 5px;
}

/* ------------------------------ modified ---------------------------------*/

/* For top nav bar */
nav
{ 
    background-color: white !important;
   padding-top: 0% !important;
    padding-bottom: 0% !important;
    padding-right: 70px !important;
}

nav a:active {
    background-color: white !important;
  }


.jumboToolpage
{
    max-width:100%; 
    height:100vh;
    font-size:.9vw !important; 
    border-radius:25px;
    padding: 20px;
}



td{
  padding-top: 0px;
  padding-bottom: 0px !important;
  padding-left: .3vw;
}


.tds{
  border:none !important;
  border-right: .5px solid white !important;
  padding-top: 0 !important;
  padding-bottom: 2px !important;
  padding-right: 5px !important;
  font-size: .8vw;
}

.titleToolpage
{
  font-size: 1.4vw;
  font-weight: bold;
}

.usecaseToolpage
{
 
  font-weight: bold;
  right: 0; 
  display:flex;
  justify-content:right; 
  max-width:50%;
}

.kpibadge
{
  background-color: #FFA500;
  border-radius: 8px;
  margin-left: 4px;
  padding-left: 3px;
  padding-right: 3px;
  color: white;
  font-weight:550;
  font-size: .7vw;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmarkTask {
  position: absolute;
  height: 15px;
  width: 15px;
  background-color: #BFCEDF;
  border-radius: 4px;
 
}

.TitleContainer{
  width:100%;
  background-color : #E0E8F0;
  margin-bottom:.5%;
  border-radius: 20px;
  padding: 2%;

}

.nav-item{
  padding:5px;
}

.sprintImage{
  margin-bottom: 2px;
}










