.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100px;
  height: 100px;
  background-color: whitesmoke;
}

#app_wrapper {
    border-top: 1px solid #a1a8b5;
	border-bottom: 2px solid #a1a8b5;
	width: 33%;
	margin: 25px auto;
	height: 685px;
	transition: height 0.5s;
	transition: width 0.5s;
	overflow: hidden;
	background-color: #f5f5f5;
}

#input_box{ 
    font-family: 'Open Sans Condensed', arial, sans;
    width: 500px;
    padding: 30px;
    background: #FFFFFF;
    margin: 4% auto 0 auto;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
    -webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);
}

/* Text Input Styling */
input[type="text"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="time"],
input[type="url"],
input[type="password"],
textarea,
select 
{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    display: block;
    width: 100%;
    padding: 7px;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    margin-bottom: 10px;
    font: 16px Arial, Helvetica, sans-serif;
    height: 45px;
}

textarea{
    resize:none;
    overflow: hidden;
}

input[type="button"], 
input[type="submit"]{
    -moz-box-shadow: inset 0px 1px 0px 0px #45D6D6;
    -webkit-box-shadow: inset 0px 1px 0px 0px #45D6D6;
    box-shadow: inset 0px 1px 0px 0px #45D6D6;
    background-color: #2CBBBB;
    border: 1px solid #27A0A0;
    display: inline-block;
    cursor: pointer;
    color: #FFFFFF;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 14px;
    padding: 8px 18px;
    text-decoration: none;
    text-transform: uppercase;
	margin-top: 20px;
}

input[type="button"]:hover, 
input[type="submit"]:hover {
    background:linear-gradient(to bottom, #34CACA 5%, #30C9C9 100%);
    background-color:#34CACA;
}

/*** Table Styles **/
.dataframe {
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  margin: auto;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
 
.dataframe th {
  color:#D5DDE5;;
  background:#1b1e24;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:12px;
  font-weight: 100;
  padding:6px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

.dataframe th:first-child {
  border-top-left-radius:3px;
}
 
.dataframe th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}
  
.dataframe tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:12px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
 
.dataframe tr:first-child {
  border-top:none;
}

.dataframe tr:last-child {
  border-bottom:none;
}
 
.dataframe tr:nth-child(odd) td {
  background:#EBEBEB;
}

.dataframe tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
.dataframe tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
.dataframe td {
  background:#FFFFFF;
  padding:12px;
  text-align:left;
  vertical-align:middle;
  font-weight:300;
  font-size:12px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

.dataframe td:hover {
  background:#4E5066 !important;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}

.dataframe td:last-child {
  border-right: 0px;
}

.dataframe th.text-left {
  text-align: left;
}

.dataframe th.text-center {
  text-align: center;
}

.dataframe th.text-right {
  text-align: right;
}

.dataframe td.text-left {
  text-align: left;
}

.dataframe td.text-center {
  text-align: center;
}

.dataframe td.text-right {
  text-align: right;
}


/*** Style Loading Animation Div ***/
#loader {
	display: none;
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #222; /* Blue */
    border-radius: 50%;
    width: 125px;
    height: 125px;
    animation: spin 2s linear infinite;
	position: absolute;
	left: 50%;
	top: 30%;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Checkboxes */
/* Default setup */
.app-checkbox {
  display: inline-block;
  padding: 0;
  margin: 0;
}


/* UL container horizontal list items */
ul.app-checkbox.horizontal > li {
  display: inline-block;
  padding-top: 0;
  margin-right: .5em;
}

/* Hide input element */
.app-checkbox input {
  display: none;
}

/* Basic styling of label */
.app-checkbox label, label {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  cursor: pointer;
  user-select: none;
  margin-right: .5em;
  line-height: 1em !important;
  font-weight: normal;
}


/* Default back plate (label:before) */
.app-checkbox label:before {
  content: '';
  display: inline-block;
  background-color: #FFF;
  border: 1px solid #CCC;
  height: 1em;
  width: 1em;
  color: #CCC;
  margin-right: .3em;
  transition: background-color ease-out 100ms;
  position: relative;
  top: .15em;
  box-sizing: border-box;
}


/* Checked backplate color fill */
.app-checkbox input:checked + label:before {
  border-color: #5fcced;
  background-color: #5fcced;
}


/* Checked checkbox checkmark (label:after) */
.app-checkbox input:checked + label:after {
  content: '';
  position: absolute;
  top: .34em;
  left: .15em;
  width: .75em;
  height: .45em;
  border-left: .18em solid #fff;
  border-bottom: .18em solid #fff;
  transform: rotate(-45deg);
  box-sizing: border-box;
}