/*Write your custom css in this file.*/
.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #9d9d9d;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1)
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 10px;
    line-height: 20px;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease
}

td .progress {
    box-shadow: none !important;
    height: 15px;
    margin: 10px 10px 10px 10px;
}

#help-search-box{
    border: 1px solid #8a8a8a;
}


/* or use CSS */
.rotate90 {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

#sidebar-menu li ul > li > a {
    background-color: #141c27;
    padding-left: 25px;
    font-weight: normal;
    font-size: 13px;
    color: yellow;
}
#sidebar-menu li ul > li > a:hover {
    color: yellow;
    background-color: dimgray;
}

span {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}



/* Radio input */
.rotate90 {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

*{font-family: 'Roboto', sans-serif;}

@keyframes click-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}

.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 13.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 40px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1000;
}
.option-input:hover {
  background: #9faab7;
}
.option-input:checked {
  background: #40e0d0;
}
.option-input:checked::before {
  height: 40px;
  width: 40px;
  position: absolute;
  content: '✔';
  display: inline-block;
  font-size: 26.66667px;
  text-align: center;
  line-height: 40px;
}
.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #40e0d0;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}
.option-input.radio {
  border-radius: 50%;
}
.option-input.radio::after {
  border-radius: 50%;
}

$accentcolor: #fcae2c;
$lightcolor: #fff;
$darkcolor: #444;

form {
	max-width: 250px;
	position: relative;
	margin: 50px auto 0;
	font-size: 15px;
}
.radiobtn {
	position: relative;
	display: block;
	label {
		display: block;
		background: lighten($accentcolor, 30%);
		color: $darkcolor;
		border-radius: 5px;
		padding: 10px 20px;
		border: 2px solid lighten($accentcolor, 20%);
		margin-bottom: 5px;
		cursor: pointer;
		&:after,
		&:before {
			content: "";
			position: absolute;
			right: 11px;
			top: 11px;
			width: 20px;
			height: 20px;
			border-radius: 3px;
			background: lighten($accentcolor, 15%);
		}
		&:before {
			background: transparent;
			transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s,
				0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;
			z-index: 2;
			overflow: hidden;
			background-repeat: no-repeat;
			background-size: 13px;
			background-position: center;
			width: 0;
			height: 0;
			background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+);
		}
	}
	input[type="radio"] {
		display: none;
		position: absolute;
		width: 100%;
		appearance: none;
		&:checked + label {
			background: lighten($accentcolor, 15%);
			animation-name: blink;
			animation-duration: 1s;
			border-color: $accentcolor;
			&:after {
				background: $accentcolor;
			}
			&:before {
				width: 20px;
				height: 20px;
			}
		}
	}
}

@keyframes blink {
	0% {
		background-color: lighten($accentcolor, 15%);
	}
	10% {
		background-color: lighten($accentcolor, 15%);
	}
	11% {
		background-color: lighten($accentcolor, 20%);
	}
	29% {
		background-color: lighten($accentcolor, 20%);
	}
	30% {
		background-color: lighten($accentcolor, 15%);
	}
	50% {
		background-color: lighten($accentcolor, 20%);
	}
	45% {
		background-color: lighten($accentcolor, 15%);
	}
	50% {
		background-color: lighten($accentcolor, 20%);
	}
	100% {
		background-color: lighten($accentcolor, 15%);
	}
}


#sidebar-menu li ul > li > a {
    background-color: #141c27;
    padding-left: 25px;
    font-weight: normal;
    font-size: 13px;
    color: yellow;
}
#sidebar-menu li ul > li > a:hover {
    color: yellow;
    background-color: dimgray;
}

.app-alert-message {
    display: inline-block;
    margin-right: 5px;
    max-width: 100%;
    min-width: 165px;
    font-size: 18px;
    font-weight: bold; 
}

/*label*/
.label.xlarge{
    font-size: 120%;
    font-weight: normal;
}

.list-group-item {
    padding: 2px 10px;
}

/*widget*/
.widget-icon {
    font-size: 60px;
    min-height: 60px;
}

table.dataTable.fixedHeader-floating {
     display: none !important; /* Hide the fixedHeader since we dont need it*/
}
 
 
.dataTables_scrollHeadInner{
    margin-left: 0px;
    width: 100% !important;
    position: fixed;
    display: block;
    overflow: hidden;
    margin-right: 30px;
    background: white;
    z-index: 1000;
}
 
.dataTables_scrollBody{
    padding-top: 60px;
}

/*table*/
.table-responsive-fixed {
    width: 100%;
    max-width: 100%;
    border: none !important;
    height: 700px;
    overflow-y: auto;
}

.general-form textarea {
    height: 100px;
}

.text-span{
  display:inline-block;
  font-size:1em;
  width:2.5em;
  height:2.5em;
  line-height:2.5em;
  text-align:center;
  border-radius:50%;
  vertical-align:middle;
  margin-right:1em;
  color:white;
}


.text-lg-span{
  display:inline-block;
  font-size:2em;
  width:3em;
  height:3em;
  line-height:3em;
  text-align:center;
  border-radius:50%;
  vertical-align:middle;
  margin-right:1em;
  color:white;
}

[data-letters]:before {
  content:attr(data-letters);
  display:inline-block;
  font-size:1em;
  width:2.5em;
  height:2.5em;
  line-height:2.5em;
  text-align:center;
  border-radius:50%;
  background:#FFB2A4;
  vertical-align:middle;
  margin-right:1em;
  color:white;
}

.label-new {background-color:#d8710f}.label-new[href]:focus,.label-new[href]:hover{background-color:#d8710f}