/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */
.cal {
  background-color: white;
  display: block;
  width: 216px;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  border-collapse: collapse;
  border-spacing: 0;
}

.cal a {
  text-decoration: none;
}

.cal tr, .cal th, .cal td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.cal caption {
  line-height: 32px;
  font-weight: bold;
  color: #e2e2e2;
  text-align: center;
  text-shadow: 0 -1px black;
  background: #333;
  //background: rgba(0, 0, 0, 0.35);
  border-top: 1px solid #333;
  border-bottom: 1px solid #313131;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}
.cal caption a {
  display: block;
  line-height: 32px;
  padding: 0 10px;
  font-size: 15px;
  color: #e2e2e2;
}
.cal caption a:hover {
  color: white;
}
.cal caption .prev {
  float: left;
}
.cal caption .next {
  float: right;
}
.cal th, .cal td {
  width: 30px;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.8);
}
.cal th:first-child, .cal td:first-child {
  border-left: 0;
}
.cal th {
  line-height: 20px;
  font-size: 8px;
  color: #696969;
  text-transform: uppercase;
  background: #f3f3f3;
  border-left: 1px solid #f3f3f3;
}
.cal td {
  font-size: 11px;
  font-weight: bold;
  border-top: 1px solid #c2c2c2;
  border-left: 1px solid #c2c2c2;
}
.cal td a {
  clear: both;
  display: block;
  position: relative;
  width: 30px;
  line-height: 28px;
  color: #666;
  background-image: -webkit-linear-gradient(top, #eaeaea, #e5e5e5 60%, #d9d9d9);
  background-image: -moz-linear-gradient(top, #eaeaea, #e5e5e5 60%, #d9d9d9);
  background-image: -o-linear-gradient(top, #eaeaea, #e5e5e5 60%, #d9d9d9);
  background-image: linear-gradient(to bottom, #eaeaea, #e5e5e5 60%, #d9d9d9);
  -webkit-box-shadow: inset 1px 1px rgba(255, 255, 255, 0.5);
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.5);
}
.cal td a:hover, .cal td.off a {
  background: #f3f3f3;
}
.cal td.off a {
  color: #b3b3b3;
}
.cal td.active a, .cal td a:active {
  margin: -1px;
  color: #f3f3f3;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  background: #6dafbf;
  border: 1px solid #598b94;
  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}
.cal td.active:first-child a, .cal td:first-child a:active {
  border-left: 0;
  margin-left: 0;
}
.cal td.active:last-child a, .cal td:last-child a:active {
  border-right: 0;
  margin-right: 0;
}
.cal tr:last-child td.active a, .cal tr:last-child td a:active {
  border-bottom: 0;
  margin-bottom: 0;
}
/*Now the CSS*/
* {margin: 0; padding: 0;}

.tree ul {
  padding-top: 20px; position: relative;
  
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  float: left; text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
  content: '';
  position: absolute; top: 0; right: 50%;
  border-top: 1px solid #ccc;
  width: 50%; height: 20px;
}
.tree li::after{
  right: auto; left: 50%;
  border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
  display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #ccc;
  width: 0; height: 20px;
}

.tree li a{
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
  background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
  border-color:  #94a0b4;
}

/*Thats all. I hope you enjoyed it.
Thanks :)*/
.scrollable {
  float:left;
  max-height: 100px;
  width: 100%;
  overflow-y: auto;
}
.scrollable1 {
  float:left;
  max-height: 500px;
  width: 100%;
  overflow-y: auto;
}
.loader {
  border: 16px solid orange;
  border-radius: 50%;
  border-top: 16px solid #0073b7;
  border-right: 16px solid orange;
  border-bottom: 16px solid #0073b7;
  border-left: 16px solid orange;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin:auto;
  
}

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
* {
  box-sizing: border-box;
}
/* Create three columns of equal width */
.pfixing {
  float: center;
  width: 100%;
}
/* Create three columns of equal width */
.columns {
  float: left;
  width: 23.3%;
  padding: 5px;
}

/* Style the list */
.price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* Add shadows on hover */
.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.price .header {
  background-color: #0073b7;
  color: white;
  font-size: 25px;
}

/* Pricing header */
.price .header2 {
  background-color: #0073b7;
  color: white;
  font-size: 14px;
}

/* List items */
.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

/* Grey list item */
.price .grey {
  background-color: orange;
  font-size: 20px;
}

/* Grey list item */
.price .grey2 {
  background-color: orange;
  font-size: 17px;
}

/* The "Sign Up" button */
.button {
  background-color: #0073b7;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}

/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}