/*------------------BASE LAYOUT_______________________________________________________*/
@-ms-viewport     { width: device-width; }
@-o-viewport      { width: device-width; }
@viewport         { width: device-width; }

/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
  overflow:visible;
}


/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
  border: 0;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
@media (max-width: 767px) {
	.ui-datepicker{
		width:50vw;
	}
	.nodisplay {
		display: none;
	}
	.searchField
{
	position:fixed;
	display:block;
	top:1vh;
	right:45%!important;
	z-index:1100;
	width: 150px!important;
	
}
	
	.mob-set {
		left: 77%;
		top: 7px;
		position: absolute;
		color: white;
	}
	
	.mob-help {
		left: 53%;
		top: 7px;
		position: absolute;
		color: white;
	}
	
	.navbar-brand {
		display:none;
	}
	.menu_mobile {
		display: block!important;
	}
	.nav-sidebar
	{
		display:none;
	}
	.nav-sidebar > .active > a,
	.nav-sidebar > .active > a:hover,
	.nav-sidebar > .active > a:focus  {
	  color: white;
	  background-color:#cc66ff
;
	}
	.nav-sidebar > li > a,
	.nav-sidebar > li > a:hover,
	.nav-sidebar > li > a:focus
	{
		color:white;
		background-color: #444;
	}
	.has-sub > ul > li > a
	{
		color:white;
		text-decoration:none;
	}
	.has-sub > ul
	{
		background-color: #4c4c4c;
		font-size:9pt;
		padding-top:5px;
		padding-bottom:5px;
	}
	.sidebar
	{
		background-color: #444;
	}
	.menu_mobile > a
	{
		color:white!important;
		text-decoration:none;
		font-size:22px;
	}
	.menu_mobile
	{
		z-index:1100;
		background-color:#444;
		position:fixed;
		top:10px;
		left:10px;
	}

.dropdown {
    position: relative;
    display: inline-block;
	font-size: 22px;
}
	#navbar {
		display: block;
	}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
	font-size:10pt;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
}

@media (max-width: 321px) {
	.ui-datepicker{
		width:90vw;
	}
	.nodisplay {
		display: none;
	}
	
	.mob-set {
		left: 73%;
		top: 10px;
		position: absolute;
		color: white;
	}
	.searchField
{
	position:fixed;
	display:block;
	top:1vh;
	right:45%!important;
	z-index:1100;
	width: 150px!important;	
}
	
	.mob-help {
		left: 45%;
		top: 10px;
		position: absolute;
		color: white;
	}
	
	.navbar-brand {
		display:none;
	}
	.menu_mobile {
		display: block!important;
	}
	.nav-sidebar
	{
		display:none;
	}
	.nav-sidebar > .active > a,
	.nav-sidebar > .active > a:hover,
	.nav-sidebar > .active > a:focus  {
	  color: white;
	  background-color:#cc66ff
;
	}
	.nav-sidebar > li > a,
	.nav-sidebar > li > a:hover,
	.nav-sidebar > li > a:focus
	{
		color:white;
		background-color: #444;
	}
	.has-sub > ul > li > a
	{
		color:white;
		text-decoration:none;
	}
	.has-sub > ul
	{
		background-color: #4c4c4c;
		font-size:9pt;
		padding-top:5px;
		padding-bottom:5px;
	}
	.sidebar
	{
		background-color: #444;
	}
	.menu_mobile > a
	{
		color:white!important;
		text-decoration:none;
		font-size:22px;
	}
	.menu_mobile
	{
		z-index:1100;
		background-color:#444;
		position:fixed;
		top:10px;
		left:10px;
	}

.dropdown {
    position: relative;
    display: inline-block;
	font-size: 22px;
}
	#navbar {
		display: block;
	}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 110px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
	
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
	font-size:9pt;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
}



@media (min-width: 768px) {
	.ui-datepicker{
		width:35%!important;
	}
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
	margin-top:-1px;
    z-index: 1100;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #444; /*#f5f5f5*/
    border-right: 2px solid #777;
	box-shadow: 2px 4px 2px #D2D2D2;
  }
  
  .mob-set{display: none;}
  .mob-help {display: none;}
  
  .menu_mobile {
	  display: none!important;
  }
 
  a{
	  color:white;
  }
  a:hover{
	  color:#cc66ff
 ;
  }
  
	 /* Sidebar navigation */
	.nav-sidebar {
	  margin-right: -21px; /* 20px padding + 1px border */
	  margin-bottom: 20px;
	  margin-left: -20px;
	  cursor:pointer!important;
	  display:block!important;
	}
	.nav-sidebar > li > a {
	  padding-right: 10px;
	  padding-left: 10px;
	  
	}
	.nav-sidebar > .active > a,
	.nav-sidebar > .active > a:hover,
	.nav-sidebar > .active > a:focus  {
	  color: #fff;
	  background-color:#cc66ff
 ; /* #428bca */
	  
	}

	/* submenu left */
	.active-sub > a, 
	.active-sub > a:hover,
	.active-sub > a:focus
	{
		color:rgba(225,36,79,1)!important;
		font-weight: bold;
		text-decoration:none;
		font-size:10pt;
	}

	.has-sub > ul
	{
		background-color:#4c4c4c;
		font-size:9pt;
		padding-top:5px;
		padding-bottom:5px;
	}
	.has-sub > ul > li
	{
		padding:3px 0px;
		
	}
	.has-sub > ul > li > a:hover
	{
		text-decoration:none;
	}
	.navbar-fixed-top > .container-fluid
	{
		border-bottom:2px solid #777;
		box-shadow: 4px 2px 2px #D2D2D2;
	} 

}


/*
 * Main content
 */

.main {
  padding: 20px;
}
@media (min-width: 768px) {
  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}
.main .page-header {
  margin-top: 0;
}


/*
 * Placeholder dashboard ideas
 */

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
}

.input-group-addon{
	width:20%;
	float:left;

}

.no-margin{
	margin:0!important;
}

.input-with-glyph{
	width:90%;
	float:left;

}

.btn-input{
	border-left:0px;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	max-width:9.9%;
	min-width:8.9%;
}


.nav-tabs li a {
	color:#cc66ff
 ;
}

.form-control:focus{
	border-color:#cc66ff
 ;
}

/*-------------------------LOGIN LAYOUT-------------------------------*/

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {

	
  width: 360px;
  padding: 8% 0 0 ;
  margin:auto;

}
.login-form-container {
  position: relative;
  z-index: 1;
  background: #555;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  min-height:300px;
  border-radius: 6px;
  
}

.login-form-container input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #888;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  padding-bottom: 5.5%;
  box-sizing: border-box;
  font-size: 14px;
  border-top-right-radius:8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  -webkit-transition: 0.7s;
	color: black;
}

::-webkit-input-placeholder
{
	color: black;
}

.login-form-container span {
	color: black;
}

.login-form div .glyphicon-user
{
	position: absolute;
	top:53px;
	padding: 10px;
	pointer-events: none;
}
.login-form div .glyphicon-lock
{
	position: absolute;
	top:117px;
	padding: 10px;
	pointer-events: none;
}

  
.login-form div input  
{ 
	padding-left:  30px; 
}

.login-form-container input:hover , .login-form-container input:focus 
{
	background: #aaa;
}


.login-form-container button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #cc66ff
;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  border-bottom:3px solid #c44dff;
  transition: all 0.3 ease;
  cursor: pointer;
  border-radius:8px;
  -webkit-transition-duration:0.7s;
}
.login-form-container button:hover,.login-form-container button:active,.login-form-container button:focus {
  background:  #bb33ff;
  border-bottom:1px solid #c44dff;
}

.empty{
	height:10vh;
}




.btn span.glyphicon {    			
	opacity: 0;				
}
.btn.active span.glyphicon {				
	opacity: 1;				
}


.iconSmall
{
	font-size:18px;
	margin-right:5px;
}

.iconSmallMenuLeft
{
	font-size:15px;
	margin-right:15px;
}

.iconSmallRightTop
{
	font-size:13px;
	margin-right:5px;
}


.h3titles
{
	padding-bottom:5px;
	border-bottom:1px solid grey;
}



.navbar-inverse
{
	background-color:#444;
	border-color:#999;
}

.tableOverflow
{
	overflow-x:hidden;
}

td.tdWidthCourse
{
	width:300px;
}

th.tdWidthComm
{
	width:170px;
}

th.tdWidthDebtsComm
{
	width:260px;
}

.logo{
	position:absolute;
	display:block;
	top:6%;
	left:1%;
	max-width:70px;
	height:auto;
}


#search_results
{
	list-style-type:none;
	background-color:#444;
	border:0;
	max-height:210px;
	overflow-y:scroll;
	box-shadow:2px 2px 7px #444;
	font-size:16px;
	text-decoration:none;
}

#search_results a:hover
{
	color:#cc66ff
;
	text-decoration:none;
	font-weight:bold;
}

.searchField
{
	position:fixed;
	display:block;
	top:1vh;
	right:35%;
	z-index:1100;
	
}

option:hover{
	background-color: #cc66ff
;
}

.img-responsive{
    height: 100%;
    width: 100%;
}

.btn-danger
{
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #cc66ff
;
  border: 0;
  color: #FFFFFF;
  border-bottom:3px solid #c44dff;
  transition: all 0.3 ease;
  cursor: pointer;
  -webkit-transition-duration: 0.7s;
}

.btn-danger:hover
{
	background:  #bb33ff;
	border-bottom: 1px solid  #bb33ff;
}

ul{
	list-style-type:none;
}

/*Preloader*/
.preloader{
	display:block;
	position:fixed;
	top:0;
	height:100vh;
	width:100vw;
	z-index:1500;
	background-color:white;
}
.preloader-img{
	position:relative;
	top:42vh;
	left:45vw;
	z-index:1600;
}
.overflow{
	  overflow:hidden!important;
}

.close
{
	color:#cc66ff
!important;
	opacity:1;
}
.close:hover,
.close:focus,
.close:active
{
	color: #bb33ff!important;
	opacity:1;
}

.btn-default
{
	border-bottom:3px solid #aaa;
	-webkit-transition-duration: 0.7s;
}

.btn-default:hover
{
	background-color:#cc66ff
;
	color:white;
	border:1px solid #cc66ff
;
}



button {
  outline: none;
  cursor: pointer;
  margin: 0;
}

/*-----------------------Delete Button--------------*/
.pen-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  float:left;
}
@media screen and (min-width: 768px) {
  .pen-wrapper {
    flex-direction: row;
  }
}


.buton-cover {
  position: relative;
}

.btn--primary , .btn--gray, .btn--gray-drk {
  display: block;
  min-width: 120px;
  border: none;
  padding: 0 1em;
  font-size: 12px;
  color: #fff;
  line-height: 40px;
  text-align: center;
  transition: background-color 0.7s ease;
}

.btn--primary {
  background-color: #cc66ff
;
  border-radius:4px;
}
.btn--primary:hover {
  background-color:  #bb33ff;
  color:#ffffff;
  border-radius:4px;
}

.btn--gray {
  background-color: #9c9c9c;
  border-radius:0;
  border-top-left-radius:4px;
  border-bottom-left-radius:4px;
}
.btn--gray:hover {
  background-color: #808080;
  border-radius:0;
  border-top-left-radius:4px;
  border-bottom-left-radius:4px;
  color:#ffffff;
}

.btn--gray-drk {
  background-color: #cc66ff
;
  border-radius:0;
  border-top-right-radius:4px;
  border-bottom-right-radius:4px;
}
.btn--gray-drk:hover {
  background-color:  #bb33ff;
  border-radius:0;
  border-top-right-radius:4px;
  border-bottom-right-radius:4px;
  color:#ffffff;
}


.button-set {
  display: flex;
  margin-top: 1px;
}
.button-set .btn {
  display: block;
  min-width: initial;
  width: 50%;
  padding: 0;
}

.button-slide-up {
  position: relative;
  overflow: hidden;
  min-width: 120px;
}
.button-slide-up .button-set {
  margin-top: 0;
}

.button-slide-up__button {
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.7s ease;
}
.is_active .button-slide-up__button {
  transform: translateY(-100%);
}

/*----SlideBar----*/
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #6b6b6b;
  border: 0px none #ffffff;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #858585;
}
::-webkit-scrollbar-thumb:active {
  background: #868686;
}
::-webkit-scrollbar-track {
  background: #a6a6a6;
  border: 0px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
  background: #adadad;
}
::-webkit-scrollbar-track:active {
  background: #c1c1c1;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

.search_modal
{
	opacity:0.5;
	transition:1.0s;
}
.search_modal:hover
{
	opacity:1;
	cursor:pointer;
	transition:1.0s;
}
.activeD > .search_modal 
{
	opacity:1;
}

.wrapD {
  z-index:1000;
  position: fixed;
  margin-top:21px;
  transform: translateY(-50%) translateX(-50%);
  width:70%;
}


.modal-containerD {
  position: relative;
  width: 100%;
}
.modal-containerD * {
  color: black;
}
.modal-containerD .modal-buttonD {
  width: 100%;
  height: 60px;
  line-height: 30px;
  font-size: 20px;
  border: none;
  outline: none;
  background-color: transparent;
}

.modal-containerD .modalD {
	opacity:1!important;
  position: absolute;
  background-color: #DDD;
  width: 100%;
  font-size: 16px;
  box-sizing: border-box;
  padding: 15px 25px;
  transform-origin: center top;
  transform: rotateX(-90deg);
  transition: transform 0.5s;
}

.activeD .modalD {
  transform: perspective(2000px) rotateX(0deg);
}



::selection {
	background: rgba(255,36,79,0.7); /* WebKit/Blink Browsers */
	color:white;
  }



/*DatePicker*/
.ui-datepicker {
	background-color: #444;
	color:#fff;
	border: 2px solid #cc66ff
;
	border-radius: 4px;
	box-shadow: 4px 4px 8px rgba(102,175,233,.6);
	display: none;
	margin-top: 4px;
	padding: 10px;
	z-index:2110;
	position:absolute;
	
	
}
.ui-datepicker a,
.ui-datepicker a:hover {
	text-decoration: none;
	color:#fff;
}
.ui-datepicker a:hover,
.ui-datepicker td:hover a {
	color: #cc66ff
;
	-webkit-transition: color 0.1s ease-in-out;
	   -moz-transition: color 0.1s ease-in-out;
	     -o-transition: color 0.1s ease-in-out;
	        transition: color 0.1s ease-in-out;
}
.ui-datepicker .ui-datepicker-header {
	margin-bottom: 4px;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title {
	font-weight: 700;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	cursor: default;
	font-family: 'Glyphicons Halflings';
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-weight: normal;
	height: 20px;
	line-height: 1;
	margin-top: 2px;
	width: 30px;
}
.ui-datepicker .ui-datepicker-prev {
	float: left;
	text-align: left;
}
.ui-datepicker .ui-datepicker-next {
	float: right;
	text-align: right;
}
.ui-datepicker .ui-datepicker-prev:before {
	content: "\e079";
}
.ui-datepicker .ui-datepicker-next:before {
	content: "\e080";
}
.ui-datepicker .ui-icon {
	display: none;
}
.ui-datepicker .ui-datepicker-calendar {
  table-layout: fixed;
	width: 100%;
}
.ui-datepicker .ui-datepicker-calendar th,
.ui-datepicker .ui-datepicker-calendar td {
	text-align: center;
	padding: 4px 0;
	font-size:12pt;
}
.ui-datepicker .ui-datepicker-calendar td {
	border-radius: 4px;
	
	-webkit-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
	   -moz-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
	     -o-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
	        transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}
.ui-datepicker .ui-datepicker-calendar td:hover {
	background-color: #eee;
	
	cursor: pointer;
}
.ui-datepicker .ui-datepicker-calendar td a {
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-current-day {
	background-color: #cc66ff
;
}
.ui-datepicker .ui-datepicker-current-day a {
	color: #fff;
}
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable:hover {
	background-color: #fff;
	cursor: default;
}

.ui-datepicker-other-month{
	color:#000;
}


.calendar_toggle{
	position:fixed;
	/*background-color:#cc66ff;*/
	color:#cc66ff;
	bottom:10px;
	right:10px;
	width:auto;
	height:40px;
	z-index:1110;
	border:1px solid black; 
	border-radius:5%;
}
.calendar_toggle span{
	z-index:1111;
	color:white!important;
}
body{
	overflow-x:hidden;
}
container-fluid{
	overflow-x:visible;
}

.bold_class_hover:hover
{
	font-weight:bold;
}