/* GLOBAL STYLES
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}

/* LAYOUT STYLES
-------------------------------------------------- */
.page-title { margin-top: 0px; }

.navbar { border-radius: 0px; }
.navbar-form label { color: #9d9d9d; }

/* non-full page padding for footer*/
.internal-page { padding-bottom: 30px; }

.footer { background: #000000; color: #9a9a9a; padding: 15px 0; position: absolute; bottom: 0; width: 100%; height: 60px; }
.footer a { color: #9a9a9a; }


/* COMMON STYLES
-------------------------------------------------- */
/* hide deleted records eg table rows */
.deleted { display: none; }
/* indicate record has deleted parent */
.deleted-parent { /*background-color: #f2dede;*/ color: #d20400; text-decoration: line-through; }
/* select box deleted item style (best to match .deleted-parent) */
.selectpicker-deleted-option { color: #d20400 !important; /*background-color: #f2dede; */ }
.selectpicker-deleted-option .text { text-decoration: line-through !important; }
/* prevent element for having border radius */
.no-border-radius { border-radius: 0px; }
/* table column action buttons to prevent them from wrapping */
.actions-1 { width: 50px; min-width: 50px; }
.actions-2 { width: 85px; min-width: 85px; }
.actions-3 { width: 120px; min-width: 120px; }
.actions-4 { width: 130px; min-width: 130px; }
.actions-5 { width: 160px; min-width: 160px; }


/* BOOTSTRAP AMENDMENTS
-------------------------------------------------- */
/* hack to colour button group with input state class */
.has-success .input-group-btn .btn.btn-default { color: #3c763d; background-color: #dff0d8; border-color: #3c763d; }
/* hack to colour button group with input state class - for clear filter button */
.has-success .input-group-btn .btn.clear-filter { color: #a94442; background-color: #f2dede; border-color: #a94442; }


/* SPINNING ANIMATION
-------------------------------------------------- */
.glyphicon.spinning { animation: spin 1s infinite linear;  -webkit-animation: spin2 1s infinite linear; }
@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}
@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}





/* PAGE SPECIFIC STYLES
-------------------------------------------------- */


/* the map at the top of the table of records */
.table-top-map {
  width: 100%;
  height: 250px;
  margin: 10px 0 0 0;
}

.table-top-map-large {
  width: 100%;
  height: 550px;
  margin: 0 0 10px 0;
}



/* https://bootsnipp.com/snippets/featured/material-design-switch */
.material-switch > input[type="checkbox"] {
    display: none;
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative; 
    width: 40px;  
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}











/* LOGIN LANDING STYLES
-------------------------------------------------- */


/* COLOURED HEADER
-------------------------------------------------- */
.landing-header {
  background: #360033;
  background: -webkit-linear-gradient(to right, #360033, #0b8793);
  background: linear-gradient(to right, #360033, #0b8793);
}

/* NAV/MENU
-------------------------------------------------- */

.navbar-logo {
  height: 65px;
}

.navbar-custom {
  background-color: transparent;
  border: none;
  font-size: 16px;
  margin: 30px 0 50px 0;
}
.navbar-custom .navbar-brand {
  color: #ecf0f1;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
  color: #ffffff;
}
.navbar-custom .navbar-text {
  color: #ecf0f1;
}
.navbar-custom .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
  /*color: #ffffff;*/
  font-weight: bold;
  background-color: transparent;
}
.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
  /*color: #ffffff;*/
  background-color: #360033;
}
.navbar-custom .navbar-nav > .open > a,
.navbar-custom .navbar-nav > .open > a:hover,
.navbar-custom .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #360033;
}
.navbar-custom .navbar-toggle {
  border-color: #ecf0f1;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: #360033;
}
.navbar-custom .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
  border-color: #ecf0f1;
}
.navbar-custom .navbar-link {
  color: #ecf0f1;
}
.navbar-custom .navbar-link:hover {
  color: #ffffff;
}

@media (max-width: 767px) {
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    /*background-color: #360033;*/
  }
}

/* INTRO
-------------------------------------------------- */
.intro {
  /*margin-bottom: 50px;*/
}

.sale-pitch {
  margin-bottom: 70px;
}

.sale-pitch h2 {
  color: #ecf0f1;
  font-size: 47px;
  line-height: 55px;
  margin: 0 0 20px 0;
}

.sale-pitch p {
  color: #ecf0f1;
  font-size: 20px;
  line-height: 32px;
  opacity: 0.7;
  margin: 0 0 30px 0;
}

/* LOGIN FORM
-------------------------------------------------- */

.login-form {
  background: #ffffff;
  padding: 30px;
  margin-bottom: 70px;
}

.login-form h3 {
  margin: 0 0 15px 0;
}
.login-form h3 span {
  color: #EEEEEE;
}

.login-form .checkbox {
  font-size: 16px;
  margin: 0 0 10px 0;
}

.login-form input[type="email"], .login-form input[type="password"] {
  width: 100%;
  margin-bottom: 20px;
  padding: 0 15px;
  height: 50px;
  border-radius: 0;
  font-size: 15px;
  color: #000;
  border: 2px solid #ddd;
}



/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  /*margin-bottom: 60px;*/
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}




.landing-pricing {
  margin-bottom: 60px;
  
}



.landing-darkbox {
  padding: 50px 0;
  background: #333333;
  color: #ecf0f1;
}

.landing-darkbox h3 {
  margin: 0 0 20px 0;
}

.landing-darkbox p {
  font-size: 16px;
  color: #7f8287;
  line-height: 27px;
  margin: 0 0 30px;
}

.contact-form {
  margin-bottom: 20px;
}

.contact-form input[type="email"], .contact-form input[type="text"], .contact-form textarea {
  width: 100%;
  margin-bottom: 15px;
  padding: 0 15px;
  height: 50px;
  border-radius: 0;
  font-size: 15px;
  color: #000;
  border: none;
}

.contact-form textarea {
  padding: 15px;
  height: 120px;
}

.company-logo img {
  height: 55px;
  margin-right: 10px;
}