/*
  SHARING CSS
*/   
                                              
:root
{
 --lwblue:     #0C4964;
 --lwltblue:   #3C7994;
 --postit:     #fff9dd;
 --lwgrey:     #999;
 --verygrey:   #bbb;
 --xgrey:      #eee;
 --darkred:    #ab0000;
 --reddish:    #cf3d29;
 --redback:    #ffd3d3;
 --clicked:    #870000;
}

.sharemodal
 {
  background-color: #fff;
  border-style: solid;
  border-color: #0C4664;
  border-width: thin;
  margin-top: 5px;
  margin-left: 15px;
  text-align: left;
  padding: 5px;
  position: absolute;
  left: -50px;
  top: 14px;
  width: 90px;
  display: none;
 }   

.indexsharemodal
 {
  background-color: #fff;
  border-style: solid;
  border-color: #0C4664;
  border-width: thin;
  margin-top: 18px;
  margin-left: -10px;
  text-align: left;
  padding: 5px;
  position: absolute;
  left: -50px;
  top: 14px;
  width: 90px;
  display: none;
 }

.sharebuttonbox
 {
  padding: 0px;
  background-color: white; 
  z-index: 999;
 }

.fabutton
{
 background-color: DodgerBlue;
 border: none;
 color: white;
 padding: 12px 16px;
 font-size: 16px;
 cursor: pointer;
}
.fabutton:hover
{
 background-color: RoyalBlue;    
}
.fabutton span.icon
{
 background: url(pplib/gfx/hyperlink40.png) no-repeat;
 float: left;
 height: 40px;
}

.linkbutton
{
 background: url('https://www.locationworks.com/pplib/gfx/hyperlink20.png') left center no-repeat;
 background-size: 20px;
 background-origin: content-box;
 background-color: var(--reddish);
 padding: 5px 5px 5px 5px;
 border-radius: 8px;
 border-style: none;
 box-shadow: 2px 2px 3px 0 rgb(0, 0, 0, 0.2);
 color: #fff;
 width: 100px;
 height: 30px;
 font-size: 16px;
 padding-left: 15px;
}
.linkbutton:hover { background-color: var(--darkred); }
.linkbuttontext
{
 padding: 0 0 0 10px;
}                 

.qrbutton
{
 background-color: var(--lwltblue);
 padding: 5px 5px 5px 5px;
 border-radius: 8px;
 border-style: none;
 box-shadow: 2px 2px 3px 0 rgb(0, 0, 0, 0.2);
 color: #fff;
 width: 150px;
 height: 26px;
 font-size: 13px;
 /* padding-left: 15px; */
}
.qrbutton:hover { background-color: var(--lwblue); }
.qrbuttontext
{
 padding: 0 0 0 10px;
}

/*
.sharebutton
 {
  padding: 1px 0px 1px 0px;
  background-color: white;
  cursor: pointer;
  font-size: 13px;    
 }
.sharebutton:hover
 {
  background-color: #eee;
 }
*/ 

.shareicon
{
 vertical-align: top;
/* padding: 6px 0 0 0; */
}   

.hmshareicon
{
 vertical-align: top;
 padding: 6px 0 0 0; 
 z-index: 999;
}

.shareurlicon
{
 vertical-align: top;
 padding: 2px 0 0 0;
}

.indexshare
{
 color: #888;
 background-color: white;
 cursor: pointer;
}

.sharehighlight
{
 color: white;
 background-color: #ab0000;
 cursor: pointer;      
}



/*  MIDI - larger than 599px ///////////////////////////////////////////////// */
@media screen and (min-width: 599px)
{
 .indexsharemodal
  {
   background-color: #fff;
   border-style: solid;
   border-color: #0C4664;
   border-width: thin;
   margin-top: 18px;
   margin-left: 5px;
   text-align: left;
   padding: 5px;
   position: absolute;
   left: -50px;
   top: 14px;
   width: 90px;
   display: none;
   z-index: 999;
  }              
}  



/*  MIDI - larger than 750px ///////////////////////////////////////////////// */
@media screen and (min-width: 750px)
{
 .indexsharemodal
  {
   background-color: #fff;
   border-style: solid;
   border-color: #0C4664;
   border-width: thin;
   margin-top: 18px;
   margin-left: 10px;
   text-align: left;
   padding: 5px;
   position: absolute;
   left: -50px;
   top: 14px;
   width: 90px;
   display: none;
   z-index: 999;
  }              
}