/* Setup a few global properties that can
   be reused to help with consistency */

   :root {
    --tm-white: #efefef;
    --tm-lightgray: #ddd;
    --tm-darkgray: #333;
    --tm-accent: #ee6352;

    --tm-select-btn: darkslateblue;
    --tm-select-header: darkslateblue;

        --tmdark: darkslateblue;
        --tmlight: #227dc7;

    --tm-niceblue: #227dc7;

    --icon-plus: "\f067";
    --icon-check: "\f00c";
  }


    /*for all boxes where user selects stuff*/
    .card-header-tm {
        background-color: var(--tm-niceblue);
        color: var(--tm-white);
    }
    .card-header-tm-select {
        background-color: orange;
        color: black !important;
    }
    .card-header-tm-search {
        background-color: darkslateblue;
        color: var(--tm-white);
    }
    .card-body-tm {
        background-color: var(--tm-white) ;
        color: var(--tm-darkgray) ;
    }
    .card-body-tm-emp {
        background-color: var(--tm-white) !important ;
        color: var(--tm-darkgray) ;
    }
    /*dark versions*/
    .card-header-tm-select-dark {
        background-color: slateblue;
        color: white !important;
    }
    .card-body-tm-dark {
        background-color: var(--tm-darkgray) ;
        color: var(--tm-white) ;
    }




.tm-fancy-white {

        background-color: rgb(255, 255, 255) !important;

    }

.tm-fancy-white:hover {
        color: rgb(255, 255, 255);
        background-color: slateblue !important;
        border-color: #ffffff;
    }

.tm-fancy:hover {
    color: rgb(255, 255, 255);
    background-color: slateblue !important;
    border-color: #ffffff;
}


/* buttons */


  .btn-tm {
    display: inline-block;
    font-weight: 400;
    color: #000000;
    text-align: center !important;
    vertical-align: top !important;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;



    border: 1px solid white;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.6;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.35s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-tm {
      transition: none;

    }
  }
  .btn-tm:hover {
    color: #fff;
    background-color: #3490dc;
    border-color: #3490dc;

  }
  .btn-tm:focus, .btn-tm.focus {
    outline: 2;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
  }
  .btn-tm.disabled, .tmbtn:disabled {
    opacity: 0.65;
  }
  .btn-tm:not(:disabled):not(.disabled) {
    cursor: pointer;
  }
  a.btn-tm.disabled,
  fieldset:disabled a.tmbtn {
    pointer-events: none;
  }


  /*buttons in suggesting/selection   (active=pressing, focus=pressed)*/
  .btn-tm-suggest {
    color: darkslateblue !important ;
    background-color: #ffffff;
    border-color: #ffffff;
    border: 1px solid var(--tm-lightgray) ;
    text-align: center !important;
}
.btn-tm-suggest:hover {
    background-color: slateblue !important ;
    border: 1px solid white;
    color: white !important;
    box-shadow: 0 0 0 .2em rgba(250, 255, 223, 0.2) !important;
}
.btn-tm-suggest:focus, .btn-tm-suggest.focus {
    color: white !important;
    background-color: var(--tm-select-btn) !important;
    box-shadow: 0 0 0 .2em rgba(250, 255, 223, 0.2) !important;
  }

  .btn-tm-suggest:active {
    box-shadow: 0 0 .2rem .3em white !important;
  }


  .btn-tm-outline {
    color: #3490dc;
    border-color: #3490dc;
  }
  .btn-tm-outline-primary:hover {
    color: #fff;
    background-color: #3490dc;
    border-color: #3490dc;
  }
  .btn-tm-outline-primary:focus, .btn-tm-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.5);
  }
  .btn-tm-outline-primary.disabled, .btn-tm-outline-primary:disabled {
    color: #3490dc;
    background-color: transparent;
  }
  .btn-tm-outline-primary:not(:disabled):not(.disabled):active, .btn-tm-outline-primary:focus:not(:disabled):not(.disabled).active, .show > .btn-tm-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: #3490dc;
    border-color: #3490dc;
  }
  .btn-tm-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-tm-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-tm-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.5);
  }







  /* styling each component by defining the custom properties */

  .introduction {
    --title-size: calc(2rem + 5vw);
    --title-color: var(--tm-accent);

    padding: 5em 15vw;
  }

  .cta {
    --title-color: white;
    --list-icon: var(--icon-check);
    --list-icon-color: white;
    --button-bg: white;
    --button-text: var(--tm-darkgray);
    --button-scale: 2;

    background: var(--tm-accent);
    padding: 2em 15vw;
    margin-bottom: 3em;
  }

  .plans {
    --title-weight: 300;
    text-align: center;
  }

  .pricing {
    --list-icon: var(--icon-plus);

    background: var(--background);
    color: var(--text);
    padding: 3em 2em;
  }

  .pricing-basic {
    --background: var(--tm-white);
    --list-icon-color: var(--button);
  }

  .pricing-dark {
    --background: var(--tm-darkgray);
    --text: var(--tm-white);
  }

  .pricing-accent {
    --background: var(--tm-accent);
    --text: white;
    --button-bg: var(--tm-darkgray);
    --list-icon-color: var(--tm-darkgray);
  }

  .pricing-rainbow {
    /* you can do pretty much anything you want */
    --background: linear-gradient(-45deg, red, orange, yellow, green, blue, indigo, violet);
    --text: white;
    --list-icon: "\f75b";
    --list-icon-color: purple;
    --button-bg: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
    --button-text: red;
  }

  footer {
    --title-color: var(--tm-accent);
    --title-weight: 300;

    color: var(--tm-lightgray);
    background: var(--tm-darkgray);
    padding: 3em 15vw;
    margin-top: 5em;
  }

  /* setting everything up */


  .title {
    color: var(--title-color, var(--tm-darkgray));
    font-size: var(--title-size, 2.5rem);
    font-weight: var(--title-weight, 700);

    margin: 0 0 .15em;
    grid-column: 1 / -1;
    line-height: 1;
  }



  .icon-list {
    text-align: left;
    margin: 0 0 2em;
    padding: 0;
    list-style: none;
  }

  .icon-list li:before {
    content: var(--list-icon);
    color: var(--list-icon-color);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .65em;
    float: left;
    margin: .5em 1em 0 0;
  }

  .category {
    margin: 0 0 .5em;
    text-transform: uppercase;
    font-weight: 300;
    font-size: .85rem;
    color: var(--tm-text);
    letter-spacing: 3px;
    line-height: .8;
  }

  .price {
    font-size: 4rem;
    margin: .25em 0;
  }



  /* generic styling that's not important
     for the demo */

  *, *::before, *::after {
    box-sizing: border-box;
  }

  body {
    font-family: basic-sans, sans-serif;
    min-height: 100vh;
    font-size: 1.125em;
    line-height: 1.6;
    color: var(--tm-darkgray);
    background: var(--tm-lightgray);
  }

  .plans {
    background: white;
    width: 80vw;
    margin: 0 auto;
    padding: calc(.5em + 3vw);
    box-shadow: 0 0 3em rgba(0,0,0,.15);
    display: grid;
    grid-gap: 1em;
    grid: auto / repeat(auto-fit, minmax(250px, 1fr));
  }

  code {
    background: rgba(238, 99, 82, .2);
  }







.tm-location-color {
    background-color: green;
    color: white;
}












  .fubutton {
    display: inline-block;
    border-radius: 4px;
    background-color: #f4511e;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    width: 200px;
    transition: all 1.5s;
    cursor: pointer;
    margin: 5px;
  }

  .fubutton span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 1.5s;
  }

  .fubutton span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 1.5s;
    background-color: #f41e9b;
  }
  .fubutton:focus, .btn-primary.focus {
    color: #fff;
    background-color: #227dc7;
    border-color: #2176bd;
    box-shadow: 0 0 0 0.2rem rgba(82, 161, 225, 0.5);
  }

  .fubutton:hover span {
    padding-right: 25px;
  }

  .fubutton:hover span:after {
    color: #2176bd;
    opacity: 1;
    right: 0;
  }

  .fubutton:hover {
    color: #fff;
    background-color: #22c746;
    border-color: #2176bd;
    padding-right: 125px;
    border-radius:30px;
    font-weight: 800;
  }

  .fubutton:before {
    content: "";
    height: 0;
    width: 0;
    background: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 25px;
    transition: height 0.3s ease-in, width 0.7s ease-in 0.3s, border-radius 0.6s ease-in 0.3s, left 0.7s ease-in 0.3s, top 0.3s ease-in;
}













.nav-tm {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }

  .nav-tm-link {
    display: block;
    padding: 0.5rem 1rem;
  }
  .nav-tm-link:hover, .nav-tm-link:focus {
    text-decoration: none;
  }
  .nav-tm-link.disabled {
    color: #6c757d;
    pointer-events: none;
    cursor: default;
  }

  .nav-tm-tabs {
    border-bottom: 1px solid #dee2e6;
  }
  .nav-tm-tabs .nav-tm-link {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }
  .nav-tm-tabs .nav-tm-link:hover, .nav-tm-tabs .nav-tm-link:focus {
    border-color: #e9ecef #cd05ff #dee2e6 !important;
  }
  .nav-tm-tabs .nav-tm-link.disabled {
    color: #299657 !important;
    background-color: transparent;
    border-color: transparent;
  }
  .nav-tm-tabs .nav-tm-link.active,
  .nav-tm-tabs .nav-tm-item.show .nav-tm-link {
    color: #3478bd !important;
    background-color: #205e9b !important;
    border-color: #dee2e6 #dee2e6 #f8fafc;
  }
  .nav-tm-tabs .dropdown-menu {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .nav-tm-pills .nav-tm-link {
    border-radius: 0.25rem;
  }
  .nav-tm-pills .nav-tm-link.active,
  .nav-tm-pills .show > .nav-tm-link {
    color: #fff !important;
    background-color: #ff11f3 !important;
  }

  .nav-tm-fill > .nav-tm-link,
  .nav-tm-fill .nav-tm-item {
    flex: 1 1 auto;
    text-align: center;
  }

  .nav-tm-justified > .nav-tm-link,
  .nav-tm-justified .nav-tm-item {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
  }





  .rightbottomfloaty{
	position: fixed;
	bottom:0;
    right:0;
	height: 12em;
	width: 4em;
    z-index: 1000;
}


/* floaty buttons */

.fbtn {
    display: inline-block;
    border-radius: 4px;
    background-color: #f4511e;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 14px;
    padding: 20px;
    width: 200px;
    transition: all 1.5s;
    cursor: pointer;
    margin: 5px;

}
.fbtn.fbtn-round {
    border-radius: 30px;
}

.fbtn-success {
    color: #ffffff;
    background-color: #4caf50;
    border-color: #4caf50;
    box-shadow: none;
}
.fbtn-info {
    color: #ffffff;
    background-color: slateblue;
    border-color: #4caf50;
    box-shadow: none;
}

.fbtn.fbtn-just-icon {
    font-size: 0.7rem;
    height: 4em;
    min-width: 4em;
    width: 4em;
    padding: 0;
    overflow: hidden;
    position: relative;
    line-height: 4em;
    border-color: #000000 !important;
    border-radius: 60px;
  }