/*-------------------------------------------------------------- */

/* STYLESHEET ELEMENTS TO CONTROL LOOK AND FEEL OF THE SCROLLBAR */

/*-------------------------------------------------------------- */

a {
    text-decoration: none;
}

::-webkit-scrollbar {
    width: 5px;
    padding-right: 5px;
}

::-webkit-scrollbar-track {
    background-color: #DDD;
}

::-webkit-scrollbar-thumb {
    background-color: #666;
}

::-webkit-scrollbar-button {
    height: 0px;
}

::-webkit-scrollbar-corner {
    background-color: black;
}

.table-sortable>thead>tr>td {
    cursor: pointer;
    position: relative;
}

.sort-default, .sort-false, .sort-true {
    padding-left: 5px;
}

.sort-default {
    color: #777 !important;
}

.sort-default:after {
    content: '\25B2';
    height: 10px;
    width: 10px;
}

.sort-false:after {
    content: '\25B2';
    height: 10px;
    width: 10px;
}

.sort-true:after {
    content: '\25BC';
    height: 10px;
    width: 10px;
}

.disabled {
    pointer-events: none;
}

/* ------------------------------------------------------------ */

/* STYLESHEET ELEMENTS TO CONTROL ALL COLORS IN THE APPLICATION */

/* ------------------------------------------------------------ */

/*
	COLOR1		DARK BLUE		#2D435A
	COLOR2		WHITE			#FFF
	COLOR3		LIGHT BLUE		#5BA7D2
	COLOR4		MEDIUM GRAY		#DDD
	COLOR5		LIGHT GRAY		#EEE
	COLOR6		DARK GRAY		#222
	COLOR7		TR ORANGE		#FF9100
	COLOR8		RED				#FF0000
	COLOR9		MAROON			#661010
	COLOR10		DARK MED GRAY	#AAA

*/

.Color1BG {
    background-color: #2D435A;
    color: #FFF;
}

.Color1FG {
    color: #2D435A;
}

.Color1Border {
    border: 1px solid #2D435A;
}

.Color1BG:disabled {
    background-color: #CCC;
    color: #AAA;
}

.Color2BG {
    background-color: #FFF;
}

.Color2FG {
    color: #FFF;
}

.Color2BGHover:hover {
    background-color: #FFF;
}

.Color3FG {
    color: #5BA7D2;
}

.Color3FGHover:hover {
    color: #5BA7D2;
}

.Color3BGHover:hover {
    background-color: #5BA7D2;
    color: #FFF;
}

.Color4BG {
    background-color: #DDD;
}

.Color4BorderBottom {
    border-bottom: 1px solid #DDD;
}

.Color5BG {
    background-color: #EEE;
}

.Color5FG {
    color: #EEE;
}

.Color5BGHover:hover {
    background-color: #EEE;
}

.Color5Border {
    border: 1px solid #EEE;
}

.Color5BorderBottom {
    border-bottom: 1px solid #EEE;
}

.Color6BG {
    background-color: #222;
}

.Color6FG {
    color: #222;
}

.Color7FG {
    color: #FF9100;
}

.Color8FG {
    color: red;
}

.Color9FG {
    color: #661010;
}

.Color10Border {
    border: 1px solid #AAA;
}

.Color10BorderBottom {
    border-bottom: 1px solid #AAA;
}

.Color10BorderHover:hover {
    border: 1px solid #AAA;
}

.app-body {
    display: flex;
    flex-direction: column;
    background: #FFF;
}

.splashScreen {
    display: flex;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 30000;
}

.loading-text {
    text-transform: uppercase;
    position: absolute;
    top: 300px;
    left: calc(50% - 32px);
    font-size: 15px;
    color: #43586d;
    font-weight: bold;
 }

.main-img-splash {
    position: absolute;
    top: 320px;
    left: calc(50% - 78px);
}

.main-column {
    flex: 1 1 auto;
    position: relative;
    /* need this to position inner content */
    overflow-y: hidden;
}


div.typecontainer {
  height:70px;
  position:absolute;
  top: calc(50% - 35px);
  width:100%;
  display: flex;
  justify-content: center;
}

.typewriter {
  font-family: 'Segoe UI',Verdana,Geneva,sans-serif;
  font-size:16px;
  font-weight:800;  
}

.typewriter h1 {
  padding-bottom:4px;
  color:#FFF;
  font-family: 'Segoe UI',Verdana,Geneva,sans-serif;
  font-size:30px;
  font-weight:600;
  overflow: hidden;
  text-shadow:1px 1px 1px #222;
  border-right: 2px solid #222; 
  white-space: nowrap;
  margin: 0 auto;
  animation: 
    typing 2s steps(30, end),
    blink-caret  .5s step-end infinite;
}

.splashScreenPlanner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 30000;
    position: absolute;
	background-color: #CCC;
}

div.typecontainerPlanner {
    height: 100%;
    position: relative;
    /* top: calc(50% - 35px); */
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
	
.typewriterPlanner {
    font-family: 'Segoe UI',Verdana,Geneva,sans-serif;
    font-size: 16px;
    font-weight: 800;
	text-align: center;
    top: calc(50% - 32px);
}

.typewriterPlanner h1 {
    padding-bottom:4px;
    color:#FFF;
    font-family: 'Segoe UI',Verdana,Geneva,sans-serif;
    font-size:30px;
    font-weight:600;
    overflow: hidden;
    text-shadow:1px 1px 1px #222;
    border-right: 2px solid #222; 
    white-space: nowrap;
    margin: 0 auto;
    animation: 
      typingPlanner 3s steps(30, end),
      blink-caret  .5s step-end infinite;
  }

@keyframes typing {
  from { width: 0 }
  to { width: 400px; }
}

@keyframes typingPlanner {
    from { width: 0 }
    to { width: 625px; }
  }
  

@keyframes blink-caret {
  from, to { border-color: transparent }
  30% { border-color: orange; }
}