form{
     margin: 0;
}

body{
  height: 100%;
  background-image:url('../images/background6.jpg');
	background-repeat: repeat;

     /*line-height: 1.4em;*/

     line-height: 1.2em;


  position: relative;
}


body {
  padding-top: env(safe-area-inset-top) !important;
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /*height: 100vh; */
}


.noglow, .noglow:focus
{
  outline: none !important;
  box-shadow: none !important;
}


.active-result.group-option
{
  padding-left: 25px !important;
}

.popover{
    min-width:250px;
}

.show{
     display: block;
}
.hide_me{
     display: none;
}
.hide_important{
     display: none !important;
}

.margin10{
     margin: 10px !important;
}

.bold{
     font-weight: bold;
}
.italic{
     font-style: italic;
}

.margin0{
     margin: 0px !important;
}

.margin2top
{
     margin-top: 2px !important;
}

.margin10topbottom{
     margin: 10px 0px 10px 0px !important;
}
.margin-10
{
     margin: -10px !important;
}

.margin10top{
     margin-top: 10px;
}
.margin5top{
     margin-top: 5px !important;
}
.margin5topbottom{
     margin: 5px 0px 5px 0px !important;
}
.margin5left{
     margin-left: 5px;
}

.margin10leftright{
     margin-left: 10px;
     margin-right: 10px;
}

.margin10leftright_minus{
     margin-left: -20px !important;
     margin-right: -20px !important;
}

.margin5leftright{
     margin-left: 5px;
     margin-right: 5px;
}


.margin10left{
     margin-left: 10px !important;
}

.margin10right{
     margin-right: 10px !important;
}
.margin5right{
     margin-right: 5px !important;
}

.margin10bottom{
     margin-bottom: 10px !important;
}
.margin5bottom{
     margin-bottom: 5px !important;
}

.padding5{
     padding: 5px !important;
}
.padding5topbottom{
     padding: 5px 0px 5px 0px;
}

.padding5top{
     padding-top: 5px;
}

.padding10{
     padding: 10px !important;
}
.padding1015{
     padding: 10px 15px !important;
}
.padding0{
     padding: 0px !important;
}
.padding10topbottom{
     padding-top: 10px;
     padding-bottom: 10px;
}

.padding10leftright
{
     padding: 0px 10px 0px 10px !important;
}

.padding5leftright{
     padding: 0px 5px 0px 5px !important;
}

.padding5left{
     padding-left: 5px !important;
}
.padding5right{
     padding-right: 5px !important;
}
.padding10top{
     padding-top: 10px;
}


.body_container{
     background-color:  #F6F6F6;
     border-right: 1px solid black;
     border-left: 1px solid black;


     /*margin-bottom: 30px;
     border-bottom: 1px solid black;
     */

}

.align_top
{
  vertical-align: top;
}

.container{
     padding: 0px !important;
}


.width100{
     width: 100% !important;
}


.width20{
     width: 20px !important;
}


.hover_class:hover{
  background: gainsboro !important;
  cursor: pointer !important;
}

.hover_class_silver:hover{
  background: silver !important;
  cursor: pointer !important;
}

.hover_class_yellow:hover{
  background: lightyellow !important;
  cursor: pointer !important;
}
.hover_class_yellow_delay:hover{
  background: lightyellow !important;
  cursor: pointer !important;
  transition-delay:250ms;
}


.hover_class_pink:hover{
  background: deeppink !important;
  cursor: pointer !important;
}

.hover_class_pink_white:hover{
  background: deeppink !important;
  cursor: pointer !important;
  color: white !important;
  transition:250ms;
}

.hover_class_color_pink:hover{
  color: deeppink !important;
  cursor: pointer !important;
}

.hover_class_color_darkslategrey:hover{
  background: darkslategrey !important;
  color: white !important;
  cursor: pointer !important;
}


.hover_class_opacity:hover
{
     opacity: 1 !important;
     cursor: pointer !important;
}


.hover_class_border{
    transition: 250ms background-color;
}

.hover_class_border:hover
{
     border: 1px solid silver;
     background-color: #F0F0F0;
     transition-delay:250ms;
}

.pointer_class{
     cursor: pointer;
}

.relative_class{
     position: relative;
}




/*----COLOR SCHEMES-------------------------------------------------------------------*/

.color_white{
     background: white !important;
}

.color_silver, .silver{
     background: silver !important;
}

.color_lightyellow{
  background: lightyellow !important;
}

.color_default{
     background-color:  #F6F6F6;
}

.color_gainsboro{
     background: gainsboro !important;
}


.border_grey
{
  border: 1px solid gainsboro;
}
.border_red
{
  border: 1px solid red;
}
.border_white
{
  border: 1px solid white;
}



.shadow
{
  -moz-box-shadow: 0px 3px 8px rgb(100,100,100);
  -webkit-box-shadow: 0px 3px 8px rgb(100,100,100);
  box-shadow: 0px 3px 8px rgb(100,100,100);
}


.shadow2
{
  -moz-box-shadow: 0 0 20px rgb(0 0 0 / 9%);
  -webkit-box-shadow: 0 0 20px rgb(0 0 0 / 9%);
  box-shadow: 0 0 20px rgb(0 0 0 / 9%)
}


/*----AUTOCOMPLETE STYLE--------------------*/
     .autocomplete_container{
          border: 1px solid silver;
          background: white;
          border-radius: 2px;

	  -moz-box-shadow: 0px 3px 8px rgb(100,100,100);
-webkit-box-shadow: 0px 3px 8px rgb(100,100,100);
box-shadow: 0px 3px 8px rgb(100,100,100);

	  /*
	   -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
          */
     }

     .autocomplete_header{
          background: gray;
          color: white;
          padding: 5px;
     }
     .autocomplete_suggested{
          text-align: left;
          font-weight: bold;
          /* padding: 5px; */
          color: black;
          border-bottom: 1px solid silver;
          font-size: 10px;
     }
     .autocomplete_suggested:last-child{
	border-bottom: 0px;
     }
     .autocomplete_selected{
          background: gainsboro;
          cursor: pointer;
     }
    .autocomplete_suggested strong{
          color: dodgerblue;
          font-weight: bold;
    }
    .autocomplete_left
     {
	display: inline-block;
	background: gainsboro;
	width: 10%;
        padding: 10 0 10 0;
	text-align: center;
	vertical-align: top;
	font-size: 12px;
    }
     .autocomplete_middle{
	display: inline-block;
	width: 70%;
	vertical-align: top;
	padding-left: 1%;
	font-size: 12px;
        padding: 10 0 10 1%;

    }
    .autocomplete_right{
	display: inline-block;
	width: 20% !important;
	text-align: right;
	font-size: 12px;
	vertical-align: top;
        padding: 10 1% 10 0;
    }
    .autocomplete_middle_full
    {
	display: inline-block;
	width: 90%;
	vertical-align: top;
	font-size: 12px;
	padding: 10 0 10 1%;


    }

    .autocomplete_full{
	display: inline-block;
	width: 100%;
	vertical-align: top;
	padding: 10px 0px 10px 1%;
	padding-left: 1%;
	font-size: 12px;

    }


.table_style1
{
  table-layout: fixed;
  width: 100%;
  font-size: 0.8em;
}

.table_style1 td
{
  border: 1px solid silver;
  width: calc(100%/7);
}

.table_style2
{
	border-collapse: collapse;
	width:100%;
}

.table_style2 tr:nth-child(odd)    { background-color:#eee; }
.table_style2 tr:nth-child(even)    { background-color:#fff; }

/* looks like table formatting but is a div */
.div_style2:nth-child(odd)    { background-color:#eee; }
.div_style2 tr:nth-child(even)    { background-color:#fff; }






.table_style4{
  border-collapse: collapse;
  width:100%;
}
.table_style4 tr:nth-child(odd)    { background-color:#eee; }
.table_style4 tr:nth-child(even)    { background-color:#fff; }

.table_style4 tr:hover{
  background: silver;
  cursor: pointer;
}

.blue_and_white_tr:nth-child(odd)    { background-color: white; }
.blue_and_white_tr:nth-child(even)    { background-color:#F4F7FE; }

.tr_padding5 td 
{
  padding: 5px;
}


.table_style7{
  border-collapse: collapse;
  width:100%;
}
.table_style7 tr:nth-child(odd)    { background-color:#eee; }
.table_style7 tr:nth-child(even)    { background-color:#fff; }

.table_style7 tr:hover{
  background: gainsboro;
  cursor: pointer;
}

.table_style8{
  border-collapse: collapse;
  width:100%;
}

.table_style8 td 
{
  border: 1px solid gainsboro;
}

.table_style8 tr:nth-child(odd)    { background-color:#eee; }
.table_style8 tr:nth-child(even)    { background-color:#fff; }

.table_style8 tr:hover{
  background: gainsboro;
  cursor: pointer;
}



.normal_table_font td
{
  font-family: Helvetica;
  font-size: 14px;
}

     .table_style8{
	border-collapse: collapse;
	width:100%;
     }

     .table_style8 tr{
          border-top: 1px solid gainsboro;
          border-bottom: 1px solid gainsboro;
     }

     .table_inner_rows_only tr:first-child, .table_inner_rows_only tr:last-child
     {
          border-top: none !important;
          border-bottom: none !important;
     }

     .table_style0 tr:nth-child(odd)    { background-color: inherit !important; }
     .table_style0 tr:nth-child(even)    { background-color: inherit !important;}

     .table_style0 td
     {
       padding: 0px !important;;
       border: none !important;
     }


     .opacity50{
          opacity: 0.5;
     }


     .opacity50hover{
          opacity: 0.5;
     }

     .opacity50hover:hover{
	  opacity: 0.8;
     }


     .opacity70
     {
	  opacity: 0.7 !important;
     }
     .opacity70:hover{
	  opacity: 1 !important;
     }

     .opacity100
     {
	  opacity: 1 !important;
     }




/*--needed to prevent scroll in collapse navbar menu--*/
.navbar-collapse {
      max-height: none;
   }


.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate_table td, .truncate_row td{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/*try this instead for ellipsis dynamic size */

.contain_ellipsis_class
{
     width: 100%;
     display: table;
     table-layout: fixed;
}

.contain_ellipsis_class > div{
     display: table-cell;
}

.ellipsis_class
{
     text-overflow: ellipsis !important;
     overflow: hidden !important;
     white-space: nowrap;
}




.table_padding0 td{
  padding: 0px !important;
}

.table_padding5 td{
     padding: 5px;
}

.table_padding10 td{
     padding: 10px;
}

.table_padding15 td{
  padding: 15px;
}

.table_padding105 td
{
  padding: 10px 5px;
}

.header_selected
{
  /*background: #D3D8F4;*/
  background: dodgerblue;
  color: white;
  cursor: pointer;
}
.header_unselected:hover
{
  cursor: pointer;
  background: #f2f2f2;
}












.datefield * {
    display: inline-block;
}

.datefield input {
    width: 2.0em; /*1.7em; */
    padding: 0px 0px 0px 2px;
    border: none;
    font-size: 100%;
    background: none;
    color: #000;
}

.datefield input#year { width:3.0em; }
.datefield input:focus { outline:none; }



/* get rid of table stripes for child element */
.undo_stripes tr:nth-child(odd)    { background-color: inherit !important; }
.undo_stripes tr:nth-child(even)    { background-color:inherit !important; }

/* google table color with div */
.google_row_color:nth-child(odd)    { background-color: #f9f9f9 !important;}
.google_row_color:nth-child(even)    { background-color:white !important}

.google_row_color .google_row_inner
{
     padding: 8px;
     line-height: 1.42857143;

}

.google_row_color
{
     border-top: 1px solid #ddd;
}



#overlayer
{
  position: absolute;
  top: 0;
  bottom: 0;
  background: cornflowerblue;
  color: red;
  opacity: 0.4;
  z-index: 9999;
  height: 100%;
  width: 100%;
}

#lightbox
{
  position: absolute;
  
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.lightbox_backdrop
{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: black;
  opacity: 0.8;
  z-index: 100;
}

#underlayer
{
  position: fixed;
  top: 0;
  bottom: 0;
  background: cornflowerblue;
  color: red;
  opacity: 0.4;
  z-index: 10;
  height: 100%;
  width: 100%;
}




/*
 *https://github.com/twbs/bootstrap/issues/5704
 *was causing button to shift because of popover
 *this fixes it
 */
.btn-group > .tooltip + .btn,
.btn-group > .popover + .btn{
margin-left:-1px;
}



/*stye placeholder txt*/
::-webkit-input-placeholder {
   color: silver !important;
}

:-moz-placeholder { /* Firefox 18- */
   color: silver !important;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: silver !important;
}

:-ms-input-placeholder {
   color: silver !important;
}


/*do this so google places autocomplete can be viewed in modal*/
.modal{
  z-index: 20;
  margin-top: env(safe-area-inset-top);

}
.modal-backdrop{
    z-index: 19;
}


  .text-muted
  {
    opacity: 0.5;
  }
  .width0
  {
    width: 10%;
  }









/*---top of page navbars----*/


#navright
{
     margin: 0 !important;
}

.nav-tabs a{
     background: gainsboro;
     color: gray;
}

.last_tab{
     margin-right: 0 !important;
}

.nav-tabs .active a{
     background: #F6F6F6 !important;
}


.navbar-header{
     margin: 0 !important;
}




/*to fill empty spaces with dots to justify text*/
/*dl { width: 300px }*/
/*dd { float: left; width: 100px; overflow: hidden }*/
.fill_empty_space { float: left; width: 150px; overflow: hidden; white-space: nowrap }
.fill_empty_space:after { content: " .................................................................................." }











/*-----------to stripe elements ---------*/
.example.example1 {
  background-color: #6772e5;
}

.example.example1 * {
  font-family: Roboto, Open Sans, Segoe UI, sans-serif;
  font-size: 16px;
  font-weight: 500;

}

.example.example1
{
     margin: 0px !important;
}

.example.example1 fieldset {
  /*margin: 0 10px 20px;*/
  padding: 0;
  border-style: none;
  background-color: #7795f8;
  box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 #829fff;
  border-radius: 4px;
}

.example.example1 .rower {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 15px;
}

.example.example1 .rower + .rower {
  border-top: 1px solid #819efc;
}

.example.example1 label {
  width: 15%;
  min-width: 70px;
  padding: 11px 0;
  color: #c4f0ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.example.example1 input, .example.example1 button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border-style: none;
}

.example.example1 input:-webkit-autofill {
  -webkit-text-fill-color: #fce883;
  transition: background-color 100000000s;
  -webkit-animation: 1ms void-animation-out;
}

.example.example1 .StripeElement--webkit-autofill {
  background: transparent !important;
}

.example.example1 .StripeElement {
  width: 100%;
  padding: 11px 15px 11px 0;
}

.example.example1 input {
  width: 100%;
  padding: 11px 15px 11px 0;
  color: #fff !important;
  background-color: transparent;
  -webkit-animation: 1ms void-animation-out;
}


.example.example1 input::-webkit-input-placeholder {
  color: #87bbfd !important;
}

.example.example1 input::-moz-placeholder {
  color: #87bbfd !important;
}

.example.example1 input:-ms-input-placeholder {
  color: #87bbfd !important;
}



.example.example1 button:active {
  background-color: #d782d9;
  box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 #e298d8;
}

.example.example1 .error svg .base {
  fill: #fff;
}

.example.example1 .error svg .glyph {
  fill: #6772e5;
}

.example.example1 .error .message {
  color: #fff;
}

.example.example1 .success .icon .border {
  stroke: #87bbfd;
}

.example.example1 .success .icon .checkmark {
  stroke: #fff;
}

.example.example1 .success .title {
  color: #fff;
}

.example.example1 .success .message {
  color: #9cdbff;
}

.example.example1 .success .reset path {
  fill: #fff;
}
/*-----------end stripe elements-------------*/




.stripe_credit_card_class
{
     border-radius: 4px !important;
}

.cc_name_class:focus
{
    outline: none;
}




.custom_checkbox_container
{
     outline: none !important;
}
.custom_checkbox_container:hover
{
     /*background-color: gainsboro !important;*/
     cursor: pointer;
}

.custom_checkbox_container:active
{
     /*background-color: silver !important;*/
     border: 2px solid DimGray !important;
}



body.modal-open {
    overflow: hidden;
}




.custom_backdrop
{
    background: black;
    opacity: 0.3;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 15;
    top: 0px;
}



.show_lg, .show_md, .show_sm, .show_xs
{
     display: none;
}

@media (min-width:1200px)
{
  .show_lg{
    display: block;
  }
}
@media(max-width: 1200px) and (min-width : 990px)
{
  .show_md{
    display: block;
  }
  .my_pricing_text 
  {
    font-size: 0.9em;
  }
  
}
@media(max-width: 990px) and (min-width : 767px)
{
  .show_sm{
    display: block;
  }
}
@media(max-width: 767px)
{
  .show_xs{
    display: block;
  }
}




/* this is the CSS to make the switch/slider work */

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* end code to make slider switch work */

/* ------ my custom small slider ------- */
.myswitch 
{
  --switch-height: 24px;
  --switch-padding: 8px;
  --switch-width: calc((var(--switch-height) * 2) - var(--switch-padding));
  --slider-height: calc(var(--switch-height) - var(--switch-padding));
  --slider-on: calc(var(--switch-height) - var(--switch-padding));
}

.myswitch {
  position: relative;
  display: inline-block;
  width: var(--switch-width);
  height: var(--switch-height);
}

/* Hide default HTML checkbox */
.myswitch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.myslider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  border: 1px solid #18A4AC;
  -webkit-transition: .4s;
  transition: .4s;
}

.myslider:before {
  position: absolute;
  content: "";
  height: var(--slider-height);
  width: var(--slider-height);
  left: 4px;
  bottom: 4px;
  background-color: #18A4AC;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .myslider {
  background-color: white;
}

input:focus + .myslider {
  box-shadow: 0 0 1px #18A4AC;
}

input:checked + .myslider:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}

/* Rounded sliders */
.myslider.round {
  border-radius: 34px;
}

.myslider.round:before {
  border-radius: 50%;
}
/* ------ end my custom small slider ------- */


.myremove_class:hover
{
  color: grey !important;
  cursor: pointer;
}
.remove_this_email:hover
{
  cursor: pointer;
  color: red !important;
}

.lowernav_class
{
  color: silver;
}
.lowernav_class:hover
{
  color: white !important;
  cursor: pointer;
}


body
{
  /*background: lightslategrey !important; */


  /* background: black url("images/monkey3.png") no-repeat center center fixed !important; */
  background: white; /*#021B17;*/
  font-size: 15px;
  line-height: 1.5;
  font-family: Gotham,gotham,Verdana,sans-serif;




}

.container
{
  max-width: 900px;
}



@media only screen and (min-width: 900px)
{
  .title_container_class
  {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.shift_table tr:hover
{
  /*border: 1px solid darkcyan !important;*/
  /*background: silver !important;*/
}

.invite_display_container div:hover
{
  cursor: pointer;
  background: silver !important;;
}

.select_signup_type, .select_signup_type:active, .add_shift_button, .add_shift_button:active
{
  outline: none !important;
}
.signup_active, .signup_active:active, .signup_active:hover
{
  border: 1px solid #2640CC !important;
  background: #D3D8F4 !important;
  color: #2640CC !important;
  outline: none !important;
}

.toggle_staff_list:hover
{
  cursor: pointer;
  background: grey !important;
}

.select_signup_type, .select_signup_type:active
{
  outline: none;
}
.shift_active, .shift_active:active, .shift_active:hover
{
  border: 1px solid #2640CC !important;
  background: #D3D8F4 !important;
  outline: none !important;
}

.shift_container_display:hover
{
  cursor: pointer;
  background: silver !important;
}

.remove_date_class:hover
{
  cursor: pointer;
  color: grey !important;
}

/*
.condensed_event:hover
{
  background: lavender !important;
}
*/

.shift_info_icon
{
  color: silver;
}
.shift_info_icon:hover
{
  cursor: pointer;
  color: grey;
}

.myshifts_selected, .myinvites_selected
{
  background: darkcyan !important;
  color: white !important;
}
.myshifts_unselected, .myinvites_unselected
{
  background: #f2f2f2;
}
.myshifts_unselected:hover, .myinvites_unselected:hover
{
  cursor: pointer;
  background: gainsboro;
}

.edit_shifts_display_container:hover div
{
  cursor: pointer;
  background: silver !important;
}

.filter_inactive
{
  background: white;
  border: 1px solid silver;
}
.filter_active
{
  background: lavender;
  border: 1px solid purple;
}

.selected_shift_container
{
  background: yellow !important;
}
.selectable_shift_container:hover
{
  cursor: pointer;
  background: lightyellow;
}

.staff_header_container:hover, .messaging_display_container:hover
{
  cursor: pointer;
  background: silver !important;
}

.select_this_visibility:hover
{
  border: 1px solid purple;
}
.select_this_visibility_active
{
  border: 1px solid purple;
  background: lavender;
}

.calender
{
  table-layout: fixed ;
  width: 100% ;
}

.calendar td, .calendar th
{
  border: 1px solid white;
  width: 14.3% !important;
  /* font-size: 1vw; */
}

.mycalendar_class
{
  border-collapse: collapse;
  table-layout: fixed ;
  width: 100% ;
}

.mycalendar_class td
{
  border: 1px solid gainsboro;
  width: 14.3% !important;
  height: 80px;
  padding: 5px;
}

.mycal_class td, .mycal_class th
{
  border: 1px solid gainsboro;
  width: 14.3% !important;
  padding: 5px;
}

.maybe_color
{
  background: #FFD580;
}
.yes_color
{
  background: lightgreen !important;
}
.no_color
{
  background: salmon !important;
}
.assigned_color 
{
  background: pink !important;
}
.partial_color 
{
  /*background-color: lavender !important;*/
  background-color: hsl(270, 60%, 80%) !important;
}
.partial_active_class 
{
  background: purple !important; 
  color: white !important; 
}


.circle{
         display: inline-block;
         width: 10px;
         height: 10px;
         line-height: 10px;
         text-align: center;
         font-weight: bold;
         color: white;
         background: darkseagreen;
         font-size: 20px;
         -moz-border-radius: 10px;
         -webkit-border-radius: 10px;
         border-radius: 75px;
         text-indent: 0;
         margin: 5px;

  }
  .circle_container
  {
    margin-top: -45px;
    margin-bottom: 20px;
  }


  .circle_wrapper
  {
    width: 16px; height: 16px;
    border-radius: 50%;
    overflow: hidden;
    font-size: 0px;
    border: 2px solid darkcyan;
  }

  .circ_one
  {
    display: inline-block;
    background-color: darkcyan;;
    height: 14px; width:7px;
  }

  .circ_two
  {
    display: inline-block;
    background-color: #b9dfdf;
    height: 14px; width:7px;
  }
  .sticky_th
  {
    background: black;
    padding: 10px;
    z-index: 5;
    position: sticky;
    top: 54px; /* Don't forget this, required for the stickiness */
  }

  .closebt
  {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    cursor: pointer;
  }
  .closebt:hover
  {
    transform: rotate(90deg);
  }

  .stripes
  {
    background: silver;
    opacity: 0.5;
    /*
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 5px 5px;
    */
  }
  /*
  .deg45 {
    background-color: white;

    background-image: -webkit-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
  }
  */

  .remove_role_X:hover
  {
    cursor: pointer;
    background: deeppink !important;
    color: white;
  }

  .default_staff_role_class
  {
    background: white;
    border: 1px dashed darkcyan;
  }
  .selected_staff_role_class, .selected_staff_role_class:hover, .selected_staff_role_class:active, .selected_staff_role_class:focus
  {
    background: darkcyan;
    color: white;
  }

  .edit_name_class:hover
  {
    cursor: pointer;
    text-decoration: underline;
    color: deeppink !important;
  }

  /*
  not sure what this was doing? 
  .tooltip-arrow, .white_tooltip + .tooltip > .tooltip-inner
  {
    border: 1px solid black;
    background-color: white;
    color: black;
  }
  */

  /* this makes the tooltip wrap the text */
  .tooltip-inner
  {

    word-wrap: break-word;
    text-align: left;
    white-space: pre-line;
  }

  .role_header_container:hover
  {
    /*background: lightyellow !important;*/
  }

  .button_select_radio, .button_select_radio:hover, .button_select_radio:active
  {
    outline: none !important;
  }

  .edit_admin_signature:hover
  {
    cursor: pointer;
    color: darkcyan;
  }

  .recipient_section_display:hover
  {
    cursor: pointer;
    background: lavender !important;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -10px;
    margin-bottom: -10px;
    padding: 10px 15px;

    -webkit-transition: background 500ms ease;
    transition: background 500ms ease;
  }

  .invite_status_button:hover, .invite_status_button:active, .invite_status_button:focus
  {
    outline: none !important;
  }

  .invite_status_button:hover
  {
    background: white;
    border: 1px solid grey !important;
  }

  .assigned_pending_active, .assigned_pending_active:hover, .assigned_pending_active:active, .assigned_pending_active:focus
  {
    background: aliceblue;
    border: 2px solid dodgerblue !important;
    outline: none;
  }

  .inactive_message_type:hover, .inactive_message_type:active, .inactive_message_type:focus
  {
    outline: none !important;
    background: white !important;
    border: 1px solid silver !important;
  }
  .active_message_type, .active_message_type:hover, .active_message_type:active, .active_message_type:focus
  {
    background: aliceblue;
    border: 1px solid dodgerblue !important;
    outline: none !important;
  }

  .lava_lamp_container
  {
    width: 100%;
    background: linear-gradient(-45deg, pink, white, lightblue, white), linear-gradient(to bottom, yellow, black);
  }
  .fade_vertical_to_white
  {
    width: 100%;
    background: linear-gradient(to bottom, transparent, white);
  }

  .unviewed_message_class
  {
    border-left: 3px solid dodgerblue;
  }

  .clone_locations_header
  {
    opacity: 0.8;
  }
  .clone_locations_header:hover
  {
    cursor: pointer;
    opacity: 1;
  }

  .mycal_date_class:hover
  {
    cursor: pointer;
    color: purple !important;
  }

  .remove_this_admin
  {
    color: silver;
  }
  .remove_this_admin:hover
  {
    color: deeppink;
    cursor: pointer;
  }

  .event_calendar_class:hover, .view_event_info:hover
  {
    cursor: pointer;
  }

  .messaging_lmenu_class, .toggle_messaging_menu, .messaging_message_class
  {
    padding: 10px 15px;
    display: block;
    text-decoration: none !important;
    white-space: nowrap;
  }

  .messaging_lmenu_class:hover, .toggle_messaging_menu:hover
  {
    /*background: gainsboro;*/
    background: cadetblue;
    color: white;
    cursor: pointer;
  }
  .messaging_open_class
  {
    background: cadetblue !important;
    color: white;
  }
  .employer_lmenu_messaging_class
  {
    background: gainsboro;
  }

  .messaging_badge_class
  {
    background: silver;
    color: black;
  }

  .active_admin_class .messaging_badge_class
  {
    background: white !important;
    color: red !important;
  }

  .active_admin_class
  {
    background: darkcyan !important;
    color: white !important;
  }
  .active_admin_class a
  {
    color: white;
  }

  .landing_header_container a
  {
    color: black !important;
  }

  .landing_footer_container a
  {
    color: white !important;
  }

  .mobile_menu_row:hover, .mobile_menu_row a
  {
    cursor: pointer;
    background: lavender;
    color: purple !important;
    text-decoration: none !important;
  }

  /*
  .show_available_shifts_class:hover
  {
    cursor: pointer;
    background: deeppink !important;
    color: white !important;
  }
  */

  
  .availability_date_class:hover 
  {
    cursor: pointer;
    background: deeppink !important;
    color: white !important;
    transition: all .5s ease;
  }

  .remove_recipient_tr:hover
  {
    cursor: pointer;
    color: black !important;
  }

  .tooltip {
    pointer-events: none;
}

.StripeElement 
{
      box-sizing: border-box;

      height: 46px;

      padding: 12px 12px;

      border: 1px solid gainsboro;
      border-radius: 0px;
      background-color: white;

      /*
      box-shadow: 0 1px 3px 0 #e6ebf1;
      -webkit-transition: box-shadow 150ms ease;
      transition: box-shadow 150ms ease;
      */
    }

    .StripeElement--focus {
      /*box-shadow: 0 1px 3px 0 #cfd7df;*/
    }

    .StripeElement--invalid {
      border-color: #fa755a;
    }

    .StripeElement--webkit-autofill {
      background-color: #fefde5 !important;
    }


.staff_city_display:hover
{
  background: silver !important;
  cursor: pointer;
}

.inbox_select_class:hover
{
  cursor: pointer;
  border-bottom: 5px solid purple !important;
}

.right_menu_choice:hover
{
  cursor: pointer;
  background: deeppink !important;
  color: white !important;
}

.payment_modal_display:hover
{
  cursor: pointer;
  background: gainsboro !important;
}
.edit_event_name:hover
{
  cursor: pointer;
  color: darkcyan;
}

.footer-social a
{
  background: rgba(0, 0, 0, .15);
  color: #ccc;
  height: 37px;
  width: 37px;
  text-align: center;
  line-height: 37px;
  display: inline-block;
  transition: all .5s ease;
}

.footer-social a:hover
{
  cursor: pointer;
  transition: all .5s ease;
  background: #5cb85c;
}

.footer_link_class
{
  margin-bottom: 10px;
}
.footer_link_class a
{
  color: white;
}
.footer_link_class a:hover
{
  transition: all .5s ease;
  color: #5cb85c !important;
}

.landing_header_color_default
{
  transition: all .5s ease;
  background: transparent;
}

.landing_header_color
{
  transition: all .5s ease;
  background: #292929 !important;
  color: white !important;
}

.landing_header_color a
{
  color: white !important;
}

.scroll_top_chevron:hover
{
  cursor: pointer;
  transition: all .5s ease;
  background: deeppink !important;
}

.rowstyle_left
{
  padding-right: 5px !important;
}
.rowstyle_right
{
  padding-left: 5px !important;
}

.footer_button_class
{
  padding: 40px 30px;
}

.flip_card_style 
{
  max-width: calc((100vw - 240px - 40px) * .65);
}

.myswiper_class 
{
  max-width: calc(100vw - 240px - 40px);
}

.calendar_day_table td 
{
  height: 60px;
}

.business_reg_moreinfo 
{
  display: none;
}

/* show on xs */
@media(max-width: 767px)
{
  .business_reg_feature_title 
  {
    text-align: center;
  }
  .feature_section_class 
  {
    padding-left: 0px !important;
  }
  .business_reg_moreinfo 
  {
    width: 100%;
  }

  .flip_card_style 
  {
    max-width: calc(100vw - 40px);
  }
  .myswiper_class 
  {
    max-width: calc(100vw - 40px);
  }

  .calendar_day_table td 
  {
    height: 0px;
  }

  .addpadding_on_small
  {
    padding-left: 15px !important;
  }
  .copyright_small
  {
    text-align: left !important;
  }
  .footer_button_class
  {
    padding: 30px 15px;
  }

  .about_text_container{
    text-align: center;
  }
  .metric_sizing
  {
    font-size: 1.5em;
  }

  .rowstyle_left
  {
    padding: 0px !important;
    margin-top: 10px !important;
  }
  .rowstyle_right
  {
    padding: 0px !important;
    margin-top: 10px !important;
  }

  .select_this_setting:hover 
  {
    cursor: pointer;
    background: #f2f2f2; 
    transition: all .5s ease;
  }

  .select_this_companysetting:hover 
  {
    cursor: pointer;
    background: #f2f2f2; 
    transition: all .5s ease;
  }

}
.text-align-bottom
{
  vertical-align: text-bottom!important;
}

.event_table_td td
{
  vertical-align: middle !important;
}

.event_table_tr:hover
{
  cursor: pointer;
  transition: all .5s ease;
  background: Azure !important;
}

.lmenu_active
{
  color: blue !important;
  font-weight: bold !important;
  background: lavender;
}

.nav-link
{

      display: block;
      padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
      font-size: .9em;
      font-weight: var(--bs-nav-link-font-weight);
      color: var(--bs-nav-link-color);
      text-decoration: none;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.contact_address_box
{
  padding: 0px;
  padding-right: 5px;
}
.contact_email_box
{
  padding: 0px;
  padding-left: 5px;
}

.navbar_link_css
{
  color: white;
}
.navbar_link_css:hover
{
  cursor: pointer;
  transition: all .5s ease;
  color: deeppink !important;
  text-decoration: none;
}

.pricing_jumbotron
{

  background:linear-gradient(0deg, rgba(20, 70, 123, 0.8), rgba(20, 70, 123, 0.8)), url("../images/back4.jpeg");
  background-size:cover;
  color: white;
  margin: 0px;
}

.logout_button_class:hover
{
  border: 1px solid white !important;
}

.availability_row_class:hover
{
  cursor: pointer;
}

.update_daily_avail_td:hover
{
  cursor: pointer;
}

.plan_active_tr
{
  background: aquamarine !important;
}
.biz_account_tr:hover, .biz_account_tr_new:hover, .company_display_select:hover
{
  /*background: aquamarine !important;*/
  background: rgba(24, 164, 172, 0.2) !important;
  cursor: pointer;
  transition: background .250s ease-in-out;
}

.hover_class_custom_cyan:hover
{
  background: rgba(24, 164, 172, 0.2) !important;
  cursor: pointer;
  transition: background .250s ease-in-out;
}

.create_business_account_button:hover
{
  cursor: pointer;
  background: #98007C !important;
  /*background: #02676b !important;*/
}

.existing_company_container
{
  background: white;
  cursor: pointer;
}
/*
.existing_company_container:hover
{
  background: lightyellow;
}
*/
.existing_company_container_active
{
  border: 1px solid dodgerblue !important;
}

/*
.existing_payment_tr_active
{
  border-left: 1px solid dodgerblue !important;
  border-right: 1px solid dodgerblue !important;
}
.existing_payment_tr_active td
{
  border-top: 1px solid dodgerblue !important;
  border-bottom: 1px solid dodgerblue !important;
}
*/

.mobile_header_td 
{
  border: 1px solid gainsboro;
  color: black;
}
.mobile_header_td a
{
  color: black;
  text-decoration: none;
}

.mobile_header_td:hover, .report_outer_container:hover
{
  cursor: pointer; 
  background: #f2f2f2; 
  border: 1px solid dodgerblue;
}
.mobile_header_td_active
{
  cursor: pointer; 
  background: gainsboro !important; 
  color: black;
  border: 1px solid silver !important;
}

.event_info_toggle 
{
  background: #f2f2f2;
  border: 1px solid silver; 
  border-radius: 8px; 
  padding: 10px;
}

.edit_directions_button:hover, .event_info_toggle:hover
{
  cursor: pointer; 
  border: 1px solid darkorchid;
}

.report_helper_class:hover 
{
  cursor: pointer; 
  color: chartreuse;
}

.hover_color_black:hover 
{
  cursor: pointer; 
  color: black !important;
}

.input_error_class 
{
  border: 1px solid red;
}

.close_event_helper_class 
{
  border-radius: 5px; 
  border: 1px solid silver;
  padding: 2px 5px;
  color: silver;
}

.close_event_helper_class:hover 
{
  cursor: pointer;
  border: 1px solid black;
  background: #f2f2f2;
  color: black;
}
.plan_item_hover_class:hover 
{
  cursor: pointer;
  background: #f2f2f2;
}

.unselected_plan_class 
{
  opacity: 0.4; 
}
.unselected_plan_class:hover 
{
  cursor: pointer; 
  opacity: 1;
}
.selected_plan_class
{
  opacity: 1;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

.messaging_input_class:hover 
{
  cursor: pointer;
  background: rgba(248,249,250) !important;
}

.active_recipient_filter_class 
{
  background: #f2f2f2 !important; 
  /*border-bottom: 1px solid #f2f2f2 !important;*/
}

.email_opened_info_class:hover 
{
  cursor: pointer;
  color: black !important;
}

.event_message_container:hover 
{
  transition: background .5s ease-in-out;
  background: #f2f2f2;
}

.show_recipients_table_class:hover, .show_super_container_recipients_table_class:hover
{
  cursor: pointer; 
  color: deeppink;
}

.header_selected > .count_event_messages_container > .badge_alert_class
{
  background: white !important;
  color: black !important;
}

.table_align_middle td
{
  vertical-align: middle !important;
}

.outer_guest_section:hover 
{
  cursor: pointer;
}

.active_guest_class, .active_staff_class, .active_user_class
{
  /*
  background: #c1d8f0 !important; 
  color: dodgerblue !important;
  */
  background: lavender;
  color: purple; 
}

.guests_tab_class:hover, .staff_tab_class:hover, .user_tab_class:hover
{
  background: #f2f2f2;
  cursor: pointer;
}

.clear_guest_search:hover 
{
  cursor: pointer;
  opacity: 1 !important;
}

.date_events_button:hover 
{
  cursor: pointer;
  background: dodgerblue !important;
  color: white;
}


.availability_day:hover 
{
  cursor: pointer;
  /*border: 1px solid #e74c3c;*/
  background: #f2f2f2;
}

.availability_day_active
{
 
  background: #f2f2f2;
}


/* Add the bounceOut animation class from Animate.css */
.animate__bounceOut {
  animation-name: bounceOut;
}

.comp_cal_tr:hover .update_daily_avail_td, .comp_cal_tr:hover .update_daily_avail_td span
{
  color: white !important; 
  background: deeppink !important;
}

.inbox_circle:hover 
{
  cursor: pointer;
  background: gainsboro;
  transition: background .2s ease-in-out;
  
}
.inbox_caret_class:hover 
{
  cursor: pointer;
  background: gainsboro;
  transition: 
  background .2s ease-in-out;
}

.selected_inbox_row 
{
  background-color: #c2dbff !important;
  background: #c2dbff !important;
}

.shift_map_table td 
{
  border: 1px solid #f2f2f2;
}

.message_hover_class:hover 
{
  cursor: pointer;
  color: deeppink;
}

.set_publication_alert:hover
{
  cursor: pointer;
  color: deeppink !important;
}

.single_line_text {
  white-space: nowrap;         /* Prevents text from wrapping to the next line */
  overflow: hidden;            /* Hides overflowing text */
  text-overflow: ellipsis;     /* Displays ellipsis (...) when text overflows */
  width: 400px;                /* Set your desired fixed width */
}

.two_line_text 
{
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* Limit to two lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 400px;                /* Set your desired fixed width */
}

.edit_location_description:hover
{
  cursor: pointer;
  color: deeppink !important;
}
.location_image_class:hover 
{
  cursor: pointer;
  border: 1px solid deeppink !important;
}

.plan_item_hover_class:hover .plan_helper_icon 
{
  display: block;
} 

.plan_helper_icon:hover 
{
  cursor: pointer;
  color: deeppink;
}

.my_blue_button 
{
  background: dodgerblue !important; 
  color: white !important; 
  outline: none; 
}


.active_event_class 
{
  border-bottom: 3px solid black !important;
}

.partial_availability_class 
{
  background: powderblue !important;
  border: 1px solid powderblue !important;
}

.lower_nav_td a 
{
  color: black;
  text-decoration: none;
}

.active_mobile_lnav_icon, .active_mobile_lnav_icon a
{
  font-weight: bold; 
  color: mediumblue !important;
}

.select_this_setting .glyphicon-chevron-right, .select_this_companysetting .glyphicon-chevron-right
{
  color: silver;
}

.custom_setting_button{
  border-radius: 4px;
}
.custom_setting_button:hover 
{
  cursor: pointer;
  border: 1px solid mediumblue !important; 
  transform: all 0.5s ease;
}

.monthly_yearly_switch .slider
{
  background-color: white !important;
  border: 1px solid #18A4AC;
}

.monthly_yearly_switch .slider:before 
{
  background-color: #18A4AC;
}

.mypricing_table th, .mypricing_table thead
{
  position: sticky;
  top: 46px;
  background-color: white;
}

.copy_link_to_clipboard:hover 
{
  cursor: pointer;
  color: deeppink !important;
}


/*

.myswitch 
{
  --switch-height: 24px;
  --switch-padding: 8px;
  --switch-width: calc((var(--switch-height) * 2) - var(--switch-padding));
  --slider-height: calc(var(--switch-height) - var(--switch-padding));
  --slider-on: calc(var(--switch-height) - var(--switch-padding));
}

.myswitch {
  position: relative;
  display: inline-block;
  width: var(--switch-width);
  height: var(--switch-height);
}

.myswitch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.myslider
{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.myslider:before 
{
  content: "";
  position: absolute;
  height: var(--slider-height);
  width: var(--slider-height);
  left: calc(var(--switch-padding) / 2);
  bottom: calc(var(--switch-padding) / 2);
  background-color: #18A4AC;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.myslider:before {
  transform: translateX(var(14px));
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}



.slider.round {
  border-radius: var(--slider-height);
}

.slider.round:before {
  border-radius: 50%;
}
*/



.flip-card {
  min-width: calc(100vw - 40px);
  min-height: 400px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/*
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
*/

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  color: black;
}

.flip-card-back {

  transform: rotateY(180deg);
}

.pricing_details_button:hover  
{
  cursor: pointer;
  color: deeppink;
}

.set_login_alert:hover 
{
  cursor: pointer;
  color: deeppink;
}

.lightgreenhover:hover 
{
  cursor: pointer;
  background:rgba(24, 164, 172, 0.2);
  transition: .2s ease-in-out;
}


.link-preview {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  text-decoration: none !important;
  color: black !important;
  overflow: hidden;
}

.link-preview:hover 
{
  cursor: pointer;
  border: 1px solid black;
  transition: .2s ease-in-out;
}


.link-preview .preview-content p {
  font-size: 14px;
  color: #666;
}

.edit_shared_contact_info_class:hover, .edit_shared_contact_info_class:hover span
{
  cursor: pointer;
  color: deeppink !important;
}

.selected_phone_number_class:hover 
{
  background: gainsboro !important;
  cursor: pointer;
}

.shared_contact_info_helper:hover
{
  color: deeppink;
  cursor: pointer;
}



.mycalendar
{
  table-layout: fixed ;
  width: 100% ;
}

.mycalendar td, .mycalendar th
{
  border: 1px solid gainsboro;
  width: 14.3% !important;
  /* font-size: 1vw; */
}

.demo_calendar_td:hover, .demo_calendar_td:hover
{
  cursor: pointer;
}

.calendar_class_td:hover, .staff_calendar_td:hover
{
  cursor: pointer;
}

.calendar_class_active, .appointment_time_class_active, .dispo_class_active, .referral_select_class_active, .button_active_class
{
  background: darkcyan !important;
  color: white !important;
  outline: none !important;
  box-shadow: none;
}

.rangeShade 
{
  background: rgb(0, 139, 139, 0.7) !important;
}

.disableSelect 
{
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}

.content_outer_container 
{
  max-width: 100vw;
}

.myquestion_circle:before 
{
  vertical-align: top !important;
}


/* Style for the grey loading div */
.loading_effect {
  width: 100%;
  background: #f2f2f2; /* Grey background */
  position: relative;
  overflow: hidden;
}

/* Shimmer effect (ripping color wave) */
.loading_effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  animation: shimmer 1.5s infinite;
}

/* Keyframes for the shimmer animation */
@keyframes shimmer {
  0% {
      transform: translateX(-100%);
  }
  100% {
      transform: translateX(100%);
  }
}

/* --- floating label ----- */

.fixed_floating_label 
{
  position: absolute;
  font-size: 1.3rem;
  left: 10px;
  top: -10px;
  background: linear-gradient(to bottom, #f2f2f2 50%, white 50%);
  color: silver;
  padding: 0 0.3rem;
  margin: 0 0.5rem;
  pointer-events: none;
  font-weight: normal;
}

.fixed_floating_input 
{
  padding-top: 30px; 
  padding-bottom: 30px;
}

.fixed_floating_input:focus {
  border-color: dodgerblue; /*#6200ee;*/
}

.fixed_floating_input:focus+label {
  color: dodgerblue; /*#6200ee;*/
}





.floating_label_textfield {
  position: relative;
}

.floating_label {
  position: absolute;
  font-size: 1.3rem;
  left: 6;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(to bottom, #f2f2f2 50%, white 50%);
  color: gray;
  padding: 0 0.3rem;
  margin: 0 0.5rem;
  transition: 0.1s ease-out;
  transform-origin: left top;
  pointer-events: none;
  font-weight: normal;
}

.floating_label_input {
  font-size: 1.5rem;
  outline: none;
  border: 1px solid gray;
  border-radius: 5px;
  color: gray;
  transition: 0.1s ease-out;
}

.floating_label_input:focus {
  border-color: #6200ee;
}

.floating_label_input:focus+label {
  color: #6200ee;
  top: 0;
  transform: translateY(-50%) scale(0.9) !important;
}

.floating_label_input:not(:placeholder-shown)+label {
  top: 0;
  transform: translateY(-50%) scale(0.9) !important;
}

.floating_label_input:not(:focus)::placeholder {
  opacity: 0;
}

/* --- end floating label ---*/

.faceIDbutton:active 
{
  color: green !important;
}

.new_existing_toggle:hover, .new_existing_toggle:active, .reset_password_button:hover, .reset_password_button:active
{
  cursor: pointer;
  color: greenyellow;
}

.ios_topbuffer_space 
{
  height: env(safe-area-inset-top);
  position: fixed; 
  background: white;
  width: 100%; 
  top: 0px;
  z-index: 100;
}

.animatedModal 
{
  height: calc(100% - env(safe-area-inset-top)) !important;
}




/* Side menu */
.myside_menu {
  position: fixed;
  top: 0;
  right: -800px; /* Hidden off-screen initially */
  width: 100vw;
  max-width: 800px;
  height: 100vh;
  transition: transform 0.2s ease-in-out;
  z-index: 1000;
  flex-direction: column;
  background: #f2f2f2;
  padding-top: env(safe-area-inset-top);
}

/* When the side menu is open */
.myside_menu.open, .myside_menu_bottomnav.open {
  transform: translateX(-800px); /* Move into view */
  display: block;
}

/* Bottom navbar inside the side menu */
.myside_menu_bottomnav {
  position: fixed; /* Fixed to the bottom of the side menu */
  bottom: 0;
  right: -800px; /* Hidden off-screen initially */
  width: 100%; /* Full width of the side menu */
  background-color: #444;
  padding: 10px;
  justify-content: space-around;
  transition: transform 0.2s ease-in-out;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

/* Adds safe area inset on supported devices (iOS) */
/*
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .container {
      padding-bottom: calc(20px + env(safe-area-inset-bottom)); 
  }
}
*/

/* When the side menu is closed */
.myside_menu, .myside_menu_bottomnav {
    transform: translateX(0); /* Move both the side menu and navbar out of view */
}

.event_create_section_container 
{
  display: none;
}

.active_button_class 
{
  border: 1px solid purple !important;
  background-color: lavender !important;
}

.toggle_password_button:hover 
{
  cursor: pointer;
  color: deeppink;
}

.event_type_class:hover 
{
  cursor: pointer;
  border: 1px solid dodgerblue !important; 
  background-color: rgb(224, 242, 255) !important;
  transition: 0.2s ease-in-out;
}
.active_event_type_class 
{
  border: 1px solid dodgerblue !important; 
  background-color: rgb(224, 242, 255) !important;
}

.active_tab_class
{
  background: white !important; 
  border: 1px solid silver !important;
}

.hover_emphasis {
  opacity: 1 !important;
}




/* for the donuts ------------------ */

.svg-item {
  width: 100%;
  font-size: 16px;
  margin: 0 auto;
  animation: donutfade 1s;
}

@keyframes donutfade {
/* this applies to the whole svg item wrapper */
  0% {
      opacity: .2;
  }
  100% {
      opacity: 1;
  }
}

@media (min-width: 992px) {
  .svg-item {
      width: 80%;
  }
}

.donut-ring {
  stroke: #EBEBEB;
}

.donut-segment {
  transform-origin: center;
  stroke: #FF6200;
}

.donut-segment-2 {
  stroke: darkcyan;
  animation: donut1 3s;
}

.donut-segment-3 {
  stroke: orange;
  animation: donut2 3s;
}

.donut-segment-4 {
  stroke: #ed1e79;
  animation: donut3 3s;
}

.donut-segment-5 {
  stroke: dodgerblue;
  animation: donut4 3s;
}

.segment-1{fill:#ccc;}
.segment-2{fill:darkcyan;}
.segment-3{fill:orange;}
.segment-4{fill:#ed1e79;}

.donut-percent {
  animation: donutfadelong 1s;
}


@keyframes donutfadelong {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

/*
@keyframes donut1 {
  0% {
      stroke-dasharray: 0, 100;
  }
  100% {
      stroke-dasharray: 69, 31;
  }
}


@keyframes donut2 {
  0% {
      stroke-dasharray: 0, 100;
  }
  100% {
      stroke-dasharray: 30, 70;
  }
}

@keyframes donut3{
  0% {
      stroke-dasharray: 0, 100;
  }
  100% {
      stroke-dasharray: 1, 99;
  }
}
*/

.donut-text {
  font-family: Arial, Helvetica, sans-serif;
  fill: #FF6200;
}
.donut-text-1 {
  fill: darkcyan;
}
.donut-text-2 {
  fill: orange;
}
.donut-text-3 {
  fill: #ed1e79;
}
.donut-text-4 {
  fill: dodgerblue;
}

.donut-label {
  font-size: 0.28em;
  font-weight: 700;
  line-height: 1;
  fill: #000;
  transform: translateY(0.25em);
}

.donut-percent {
  font-size: 0.5em;
  line-height: 1;
  transform: translateY(0.5em);
  font-weight: bold;
}

.donut-data {
  font-size: 0.18em;
  line-height: 1;
  transform: translateY(0.5em);
  text-align: center;
  text-anchor: middle;
  color:#666;
  fill: #666;
  animation: donutfadelong 1s;
}

/*------ end donut section */

.dashboard_nav_div 
{
  border: 1px solid white; 
}
.dashboard_nav_div:hover 
{
  cursor: pointer; 
  border: 1px solid deeppink; 
  background: skyblue;
}


.sourcesans900 
{
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

.sourcesans700 
{
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.sourcesans400 
{
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.sourcesans300 
{
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.registration_button_class:hover
{
  cursor: pointer;
  background: deeppink !important;
  color: white;
  transition: 250ms;
}

.active_register_class
{
  background: #B0008E !important; 
  color: white !important; 
  font-weight: bold;
}

.StripeElement
{
  height: auto !important; 
  padding: 19px !important;
  
}

.existing_payment_container td 
{
  padding: 20px;
}

/*
.existing_payment_tr + .existing_payment_tr targets any .existing_payment_tr that immediately follows another .existing_payment_tr.

It skips the first one because there’s no .existing_payment_tr before it.
*/
.existing_payment_tr + .existing_payment_tr {
  border-top: 1px solid gainsboro; 
}



.benefit_chart {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* spacing between items */
  justify-content: start; /* left-align last row */

  /*justify-content: space-between;*/
}

.benefit_item {
  flex: 1 1 150px; /* flex-grow, flex-shrink, flex-basis */
  min-width: 150px; /* minimum size before wrapping */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.benefit_circle {
  width: 60px;
  height: 60px;
  margin-left: auto; 
  margin-right: auto;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}

.available .benefit_circle {
  background-color: #4CAF50; /* green */
  color: white;
}

.unavailable .benefit_circle {
  background-color: #ccc; /* grey */
  color: #777;
}

.benefit_label {
  font-size: 0.9em;
  color: #333;
}

.unavailable .benefit_label {
  color: #aaa; /* grey out label if unavailable */
}

.registration_section_container 
{
  padding-bottom: 200px;
}





.review-container {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  padding: 2em;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.rating-label {
  margin-bottom: 1em;
  font-size: 1.2em;
}

.stars {
  display: flex;
  gap: 0.5em;
  margin-bottom: 1.5em;
}

.star {
  width: 40px;
  height: 40px;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  background: #fff;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
  font-size: 1.2em;
  color: #ccc;
}

.star:hover,
.star.hovered,
.star.selected {
  background: darkcyan;
  border-color: darkcyan;
  color: #fff;
}

.user_review_comments {
  width: 100%;
  height: 100px;
  padding: 0.75em;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 1.5em;
}

.submit_review_button {
  background: darkcyan;
  color: #fff;
  padding: 0.75em 1.5em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1em;
}

.submit_review_button:hover {
  background: #007d7d;
}