/* To display cards in a smaller size use page='other' */
/* General column and row setting  */
.row {
   display: inline-flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
}

.column {
   display: block;
   float: left;
}

.row:after {
   content: "";
   display: table-column-group;
   clear: both;
}

/* Services text style */

.single-line {
   line-height: 0.9;
   display: inline-block;
   vertical-align: middle;
   font-size: 16px;
   color: #3b5068;
}

.multiple-line {
   line-height: 0.9;
   display: inline-block;
   vertical-align: middle;
   font-size: 16px;
   color: #3b5068;
}

/* Icon setting */
.iconbox {
   display: inline-block;
   height: 100px;
   width: 120px;
   overflow: hidden;
   border-radius: 5%;
   border: solid 3px #7D9BC0;
   background-color: #7D9BC0;
   background-image:
    radial-gradient(
      circle at center,
      white,
      #7D9BC0
    );

}

.icon70 {
   margin-top: 8px;
   width: 90px;
   height: 70px;
}

.icon {
   background-image: url('/wp-content/plugins/sm-services/img/services_spritesheet_2021_spritesheet.png');
   background-size: 769% 100%;
}

.telecom-icon   {background-position: 0 0px; margin-left: 15px; margin-top: 5px}
.merchant-icon  {background-position: calc(-115px * 0.75) 0;  margin-left: 12px; margin-top: 5px}
.shipping-icon  {background-position: calc(-230px * 0.75) 0;  margin-left: 12px; margin-top: 5px }
.waste-icon {background-position: calc(-345px * 0.75) 0; margin-left: 12px; margin-top: 5px}
.eld-icon {background-position: calc(-460px * 0.75) 0;  margin-left: 12px; margin-top: 3px}
.esignature-icon {background-position: calc(-580px * 0.75) 0; margin-top: 3px; margin-left: 12px;}
.utilities-icon {background-position: calc(-685px * 0.75) 0; margin-top: 5px; margin-left: 10px;} 
.fuel-icon {background-position: calc(-810px * 0.75) 0; margin-top: 5px; margin-left: 17px;} 


/* Style the counter cards */
.card {
   border-radius: 0px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   padding: 14px;
   text-align: center;
   width: 170px;
   height: 170px;
   margin: 3px;
   background-color: #e4eaf2; 
}

.card:hover { 
   background-color: #7d9bc0 !important;
} 

/** 
* This is to display the sm service cards at the size of 140px - 140px. This should only be used to display
* in smaller sections. Do not use on the homepage.
*/

/* General row setting*/
.other .row {
   display: inline-flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
}

/* Column card styling */
.other .card {
  border-radius: 0px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: #e4eaf2; 
  padding: 3px;
  text-align: center;
  width: 100px;
  height: 100px;
  margin: 3px;
}

/* Line setting */
.other .single-line {
  line-height: 1.2;
  display: inline-block;
  vertical-align: middle;
  font-size: 70%;
  color: #3b5068;
}

.other .multiple-line {
  line-height: 1.2;
  display: inline-block;
  vertical-align: middle;
  font-size: 70%;
  color: #3b5068;
}

/* Icon settings */
.other .iconbox {
   display: inline-block;
   height: 60px;
   width: 80px;
   overflow: hidden;
   border-radius: 5%;
   border: solid 3px #7D9BC0;
   background-color: #7D9BC0;
   background-image:
    radial-gradient(
      circle at center,
      white,
      #7D9BC0
    );

}

.other .icon70 {
  width: 70px;
  height: 50px;

}

.other .icon {
  background-image: url('/wp-content/plugins/sm-services/img/services_spritesheet_2021_spritesheet.png');
  background-size: 785% 99%;
  position:absolute;
  margin-left: 0px;

}


.other .merchant-icon  {
  background-position: calc(-80px * 0.85) ,0;
}
.other .telecom-icon   {background-position: 0 0px; margin-left: 5px; }
.other .shipping-icon  {background-position: calc(-184px * 0.75) 0; margin-left: 4px;}
.other .waste-icon {background-position: calc(-275px * 0.75) 0;margin-left: 4px; }
.other .eld-icon {background-position: calc(-365px * 0.75) 0; }
.other .esignature-icon {background-position: calc(-460px * 0.75) 0; margin-left: 4px; }
.other .utilities-icon {background-position: calc(-550px * 0.75) 0; margin-top: 0px;margin-left: 5px; }
.other .fuel-icon {background-position: calc(-645px * 0.75) 0; margin-top: 0px; margin-left: 7px; }

.other .card:hover { 
   background-color: #7d9bc0 !important;
} 

/* Responsive layout */

/* Tablet/small devices */
/* @media screen and (max-width: 991px) { 

} */

/* Mobile devices */
@media screen and (max-width: 400px) {

   /* General row setting*/
   .row {
      display: inline-flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
   }

   /* Column card styling */
   /* Change card size to 140px */
   .card {
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   background-color: #e4eaf2; 
   padding: 14px;
   text-align: center;
   width: 140px;
   height: 140px;
   margin: 10px;
   }

   /* Line setting */
   .single-line {
   line-height: 1.2;
   display: inline-block;
   vertical-align: middle;
   font-size: 90%;
   color: #3b5068;
   }

   .multiple-line {
   line-height: 1.2;
   display: inline-block;
   vertical-align: middle;
   font-size: 88%;
   color: #3b5068;
   }

   /* Icon settings */
   .iconbox {
      display: inline-block;
      height: 80px;
      width: 90px;
      overflow: hidden;
      border-radius: 50%;
      border: solid 3px #7D9BC0;
      background-color: white;
   }

   .icon70 {
   margin-top: 3px;
   width: 90px;
   height: 90px;
   }

 


}