/* Custom CSS for FYZICAL Front Desk Portal */
/* Dartmouth Data                           */

/* FYZICAL Front Desk App                   */
/*

-----------------------------------------
Logo Colors

#f7941d - orange
#2590ce - blue

#02aeef- fyzical blue

#e6ffe6 light green -- #cdffcd, #b3ffb3, #9aff9a
#B5D3E7 light Blue -- #7bb1d4, #8ebcdb, #a2c8e1  -xx-  #c8deed, #dceaf3, #eff5fa
#FFFFE0 light yellow 
#ffe6e6 light red

"Enter a NEW Lead" Button= #0091DA
"NEW LEADS"= #E5004B
"CALL PHASE"= #EC7723
"SCHEDULED PHASE"= #8CAC17
"APPT PASSED"= #71C5E8
"CONVERTED"= #0091DA
"NOT CONVERTED"= #1B365D

The FYZICAL green is: #8CAC17
The FYZICAL blue is: #0091DA

-----------------------------------------


*/
html, body {
  height: 100%;
  table-layout: fixed;
  width: 100%;
  background-color: #02aeef;
  color: #222222;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.jumbotron_image {
  background-image: url("../images/bi.jpeg");
  background-size: cover;
}
.clear {
  clear: both;
}
.clearfix {
  overflow: auto;
}
/* ========== Nav Bar ========== */
.bg-light {
  background-color: #f8f9fa !important
}
.navbar-brand {
   padding-right: 50px;    
}
.navbar {
  height: auto;
  padding: 0px 0px 0px 0px;
  border-radius: 0px;
  border-bottom: 1px solid #008dd2;
  box-shadow: 0px 2px 5px #aaa;
  background-color: #f8f9fa;
}
.navbar li {
  display: inline-block;
  font-size: 14px;
  padding: 0px;
  margin-right: 15px;
}
.navbar-nav li a {
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-weight: bold;
  color: #008dd2;
}
.navbar-nav li:hover a {
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-weight: bold;
  color: #ff8243;
}
.navbar-nav li:active a {
  color: #336699;
}
/* change the color of active or hovered links */
.nav-link {
  color: #ffffff;
  border-bottom: 2px solid #f8f9fa; /* add border-color */
}
.nav-link:hover {
  color: #336699;
  border-bottom: 2px solid #ff8243; /* add border-color */
}
/* ========== General ========== */
h1, h2, h3 {
  font-weight: bold;
  padding: 0;
  margin: 0;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
}
h4, h5 {
  font-weight: normal;
  padding: 0;
  margin: 0;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
}
hr {
  border-top: 1px solid #555555;
}
.hr_light {
  border-top: 1px solid #dddddd;
  padding: 8px 0px 4px 0px;
}
.hr_light2 {
  border-top: 1px solid #cccccc;
  padding: 4px 0px 4px 0px;
}
.hr40 {
    width: 40%;
        margin-left: auto;
        margin-right: auto;
    background-color: #565589;
        height:4px;
    
}
button {
  color: #008dd2;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 11px;
}


p, li, span, input {
  color: #222222;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
list {
  color: #222222;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
}
list11 {
  color: #222222;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 11px;
}
.size11 {
  color: #555555;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 11px;
}
.list12 {
  color: #555555;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
}

.list14 {
  color: #555555;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 14px;
}
.list16 {
  color: #555555;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 16px;
}
.size16 {
  color: #555555;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 16px;
  line-height: 24px;
}
.size16white {
  color: #fff;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 16px;
}
.mainmain_menupage {
  margin: 50px auto 0px auto;
  padding: 10px 5px 10px 5px;
  height: auto;
  min-height: 650px;
  border: solid 1px #706F6F;
  background-color: #ffffff;
}
.no_marginpadding {
  margin: 0px;
  padding: 0px;
}
.container {
  padding-top: 10px;
}
.container100 {
  width: 100%;
  height: auto;
  padding: 0px;
  margin: 0px;
}
/* ========== Table ========== */
table {
  width: 100%;
}
table, th, td {
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 11px;
  border: 1px solid #aaaaaa;
  border-collapse: collapse;
  line-height: 16px;
  text-align: center;
}
th {
  padding: 8px;
  color: #FFFFFF;
  background-color: #008dd2;
  border: 1px solid #222;
  line-height: 16px;
}
.th_sticky {
  text-align: center;
  padding: 8px;
  color: #FFFFFF;
  background-color: #008dd2;
  border: 1px solid #aaaaaa;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid #EB9486;
}
.th_sticky2 {
  text-align: center;
  padding: 8px;
  color: #FFFFFF;
  background-color: #008dd2;
  border: 1px solid #aaaaaa;
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
  z-index: 1;
}
#sticky_table {
  max-height: 600px;
  overflow: auto;
}


/* sticky columns -------------- */
/* ----------------------------- */
.sticky_div_col {
  height: auto;
  overflow: scroll;
  border-collapse: collapse;
}
.sticky_table_col {
  overflow: scroll;
  border-collapse: collapse;
  color: white;
}
.sticky_col {
  width: 170px;
  white-space: nowrap;
  text-align: center;
  padding: 8px;
  color: #FFFFFF;
  background-color: #7bb1d4;
  border: 1px solid #eee;
  position: -webkit-sticky;
  position: sticky;
}

.first_col {
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  left: 0px;
}
.other_col {
  width: 130px;
  min-width: 130px;
  max-width: 130px;
  left: 0px;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {	
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
	  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);   
}

/* 
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
}
*/
/* ----------------------------- */
/* ----------------------------- */



.table_size_frame {
  height: auto;
  display: block;
  overflow-y: auto
}
.noRLpadding {
  padding: 8px 0px 8px 0px;
}
th.noBackgroundColor {
  background-color: #fff;
  color: #008dd2;
}
td {
  padding: 8px;
  color: #000000;
}
.td_sticky {
  position: relative;
  top: 60px;
}
td.text10 {
  color: #222222;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 10px;
}
td.left {
  text-align: left;
}
td.right {
  text-align: right;
}
td.center {
  text-align: center;
}
.center {
  text-align: center;
}
/*
tr:nth-child(even) {
  background-color: #eeeeee;
}
*/
/* ========== Fontawesome ========== */
.fa_white {
  color: #ffffff;
}
.fa_white:hover, a.list12:highlighted {
  color: #FF9900;
}
.fa_blue, a.listblue {
  color: #008dd2;
  text-decoration: none;
}
.fa_blue:hover, a.listblue:hover {
  color: #FF9900;
  text-decoration: none;
}
.fa_hover:hover {
  color: #FF9900;
}
.fa_active, .fa_active:hover {
  color: #FF9900;
  text-decoration: none;
}
/* ========== Links ========== */
a {
  color: #008dd2;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 14px;
}
a:hover {
  color: #FF9900;
  text-decoration: underline;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 14px;
}
a.main_page {
  color: #008dd2;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 22px;
    line-height: 36px;
}
a.main_page:hover {
  color: #FF9900;
  text-decoration: underline;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 22px;
    line-height: 36px;
}

a.active {
  color: #FF9900;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 14px;
}
a.list {
  color: #008dd2;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 8px;
}
a.list:hover {
  color: #FF9900;
  text-decoration: underline;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 8px;
}
a.list12 {
  color: #008dd2;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
}
a.list12:hover, a.list12_active {
  color: #FF9900;
  text-decoration: underline;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
  display: inline;
}

a.list16 {
  color: #008dd2;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 16px;
}
a.list16:hover {
  color: #FF9900;
  text-decoration: underline;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 16px;
  display: inline;
}
a.list16active {
  color: #FF9900;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 16px;
  display: inline;
}
a.list16active:hover {
  color: #FF9900;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 16px;
  display: inline;
}
a.th_title {
  color: #fff;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
       text-align: center;
}
a.th_title:hover {
  color: #FF9900;
  text-decoration: underline;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
       text-align: center;
}


button.list12 {
  color: #008dd2;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
  border: 1px solid #ddd;
  padding: 2px 7px;
  background: #FAF9F6;
}
button.list12:hover {
  color: #FF9900;
  text-decoration: underline;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
  display: inline;
  border: 1px solid #ddd;
  padding: 2px 7px;
  background: #FAF9F6;
}
button.list12_active {	
  color: #008dd2; 
  padding: 2px 7px;
  font-size: 12px;  
  background-color: #e6ffe6;
  border: 1px solid #ddd;
}


a.listwhite {
  color: #ffffff;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
}
a.listwhite:hover {
  color: #FF9900;
  text-decoration: underline;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
}
a.menulinks {
  color: #ffffff;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
}
a.menulinks:hover {
  color: #aaaaaa;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
}
a.lock {
  color: #50C878; /* == green lock == */
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
}
a.lock:hover {
  color: #FF9900;
  text-decoration: underline;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
}
.success {
  color: #31B806;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  margin: auto;
  display: block;
}
.error {
  color: #FA0105;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  margin: auto;
  display: block;
}
.appt_form_message, .contact_form_message {
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  display: block;
}
.form_success {
    color: green;
}
.form_error {
    color: red;
}
.input_error {
    box-shadow: 0 0 5px red;
}
.no_msg {
  color: #fff;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  margin: auto;
  display: block;
}
.message_center {
  color: #565589;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  margin: auto;
  display: block;
}
.message_container {
  margin: 0px auto 0px auto;
  width: 300px;
  height: 50px;
}
.row {
  padding: 0 !important;
  margin: 0 !important;
}
/* --  FYZICAL Radio Buttons ========== */
input[type="radio"] {
	border: 1px;
    width: 20px;
    height: 10px;
    background-color: #ccc;
    }	
	
input[type="radio"].inc:checked {
    background-color: #008dd2;
    border: 1px solid green;
    }

input[type="radio"].dni:checked {
    background-color: #ff6666;
    border: 1px solid red;
    }
/* ========== Form Layout ========== */
label {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  line-height: 14px;
  padding-bottom: 0;
  margin-bottom: 0;
  margin-left: 10px;
  color: #333;
}
input, select, option {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #555;
  background: #ffffff;
  border: 1px solid #ccc;
  display: inline-block;
  /* min-width: 220px; */ 
  /* max-width: 220px; */
}
textarea {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #555;
  background: #ffffff;
  border: 1px solid #0091DA;
  display: inline-block;
}
input, select, option {
  display: inline-block;
  padding: 2px 5px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  margin: 0px;
}
input[type=submit] {
  display: inline-block;
  cursor: pointer;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type=submit]:hover, input[type=submit].active {
  display: inline-block;
  background: #008dd2;
  color: #fff;
  cursor: pointer;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type=file] {
  border:none;  
  display: inline-block;
  background: #efefef;
  color: #555;
  cursor: pointer;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

select, option  {
    /* padding:0px;*/
    /* display: none;*/
    -webkit-appearance: listbox;
    /* -moz-appearance: none;*/
    /*  appearance: none;*/
    /* Remove default arrow */
    /* background-image: url("../images/Fyzical_Avatar_Blue.png"); */
    /* Add custom arrow */
}

textarea {
  width: 100%;
  height: auto;
  padding: 5px 15px;
  box-sizing: border-box;
  border-radius: 4px;
  resize: vertical;
  overflow: visible;
}

/* ========== Data Bubbles ========== */
span.list12w {
  color: #008dd2;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
      line-height: 12px;
      text-align: center; 
}
span.list12w:hover {
  color: #fff;
  text-decoration: underline;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
  display: inline;
      line-height: 12px;
      text-align: center; 
}


.data_bubble_con {
  width: 40px; 
  display: inline-block; 
  margin: 0px 0px 0px 0px; 
  padding: 1px; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  text-align: center; 
  font-size:9px;
  line-height: 12px;
  background-color: #ffffff;
}
.data_bubble_con:hover {
  width: 40px; 
  display: inline-block; 
  margin: 0px 0px 0px 0px; 
  padding: 1px; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  text-align: center; 
  font-size:9px;
  line-height: 12px;
  background-color: #e6ffe6;
}
.data_bubble_con_active {
  width: 40px; 
  display: inline-block; 
  margin: 0px 0px 0px 0px; 
  padding: 1px; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  text-align: center; 
  font-size:9px;
  line-height: 12px;	
  background-color: #e6ffe6;
}
.data_bubble_con_active:hover {
  width: 40px; 
  display: inline-block; 
  margin: 0px 0px 0px 0px; 
  padding: 1px; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  text-align: center; 
  font-size:9px;
  line-height: 12px;	
  background-color: #ffe6e6;
}


.data_bubble {
  width: 90px; 
  display: inline-block; 
  margin: 0px 10px 0px 0px; 
  padding: 8px; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  background-color: #ffffff;
}
.data_bubble:hover {
  width: 90px; 
  display: inline-block; 
  margin: 0px 10px 0px 0px; 
  padding: 8px; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  background-color: #e6ffe6;
}


.data_bubble_active {
  width: 90px; 
  display: inline-block; 
  margin: 0px 10px 0px 0px; 
  padding: 8px; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  background-color: #e6ffe6;
}
.data_bubble_active:hover {
  width: 90px; 
  display: inline-block; 
  margin: 0px 10px 0px 0px; 
  padding: 8px; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  background-color: #ffe6e6;
}


/* ----------------------------- */
.menu_bubble {
  margin: 0px 0px 0px 5px; 
  padding: 5px; 
  border: 1px solid #eeeeee; 
  border-radius: 10px; 
  text-align: center; 
  display: inline-block; 
  width: 60px; 
  line-height: 13px;
}
.menu_bubble_active, .menu_bubble:hover {
  margin: 0px 0px 0px 5px; 
  padding: 5px; 
  border: 1px solid #eeeeee; 
  border-radius: 10px; 
  text-align: center; 
  display: inline-block; 
  width: 60px; 
  line-height: 13px;
  background-color: antiquewhite;
}
.menu_bubble_blank {
  margin: 0px 0px 0px 5px; 
  padding: 5px; 
  border: 1px solid #fff; 
  border-radius: 10px; 
  text-align: center; 
  display: inline-block; 
  width: 100px; 
  line-height: 13px;
}
/* ----------------------------- */

/* ========== Footer Layout ========== */
.footer_style {
  background-color: #86A6B9;
  color: #d5d5d5;
  font-size: 12px;
  padding: 30px 20px 30px 20px;
}
.footer_box1 {
  float: left;
  text-align: left;
  border-right: 1px solid #d5d5d5;
}
.footer_box2 {
  float: left;
  text-align: center;
  padding: 0px;
}
.footer_box3 {
  float: left;
  text-align: center;
  padding: 0px;
}
.footer_box4 {
  float: left;
  text-align: center;
  padding: 0px;
  padding-right: 0px;
}
.footer {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
}
a.footer {
  color: #d5d5d5;
  text-decoration: none;
  font-size: 12px;
}
a.footer:hover {
  color: #ffffff;
  text-decoration: underline;
  font-size: 12px;
}

/* ========== Video Guides ========== */
.com_video {
  min-width: 250px;
}
.small-img-row {
  display: flex;
  background: #efefef;
  margin: 20px 0px;
  align-items: top;
  border-radius: 10px;
  border: 1px solid #555;
  overflow: hidden;
  width: 100%;
}
.small-img {
  position: relative;
  border-right: 1px solid #555;
}
.small-img img {
  width: 200px;
  height: 150px;
}
.small-img .overlay {
  position: absolute;
  top: 0px;
  left: 0px;
}
.small-img-row p {
  margin: 20px;
  color: #707070;
  line-height: 1.3;
  font-size: 15px;
}
.video-player {
  width: 65%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  border: 2px solid #aaaaaa;
  -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(85, 85, 85, 0);
  box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(85, 85, 85, 0);
  background: #FFFFFF;
}
video:focus {
  outline: none;
}
.closeVideo-btn {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 100px;
  cursor: pointer;
}
/* ========== END ========== */
/* ========== END ========== */
/* ========== END ========== */