@font-face {
  font-family: 'Arabic Typesetting';
  src: url('../assets/fonts/Arabic Typesetting.eot');
  src: local('Arabic Typesetting'),
   url('../assets/fonts/Arabic Typesetting.woff') format('woff'), 
  url('../assets/fonts/Arabic Typesetting.ttf') format('truetype');
}
@font-face {
  font-family: 'SCRIPTBL';
  src: url('../assets/fonts/SCRIPTBL.eot');
  src: local('SCRIPTBL'),
   url('../assets/fonts/SCRIPTBL.woff') format('woff'), 
  url('../assets/fonts/SCRIPTBL.ttf') format('truetype');
}
/* use this class to attach this font to any element i.e. <p class="fontsforweb_fontid_12234">Text with this font applied</p> */
.fontsforweb_fontid_12234 {
  font-family: 'SCRIPTBL' !important;

 

}

/* Font downloaded from FontsForWeb.com */

body{
        font-family: 'XBYas' !important;
      }

@font-face {
font-family: 'BNazanin';
src: url('../assets/fonts/BNazaninBold.eot');
src: url('../assets/fonts/BNazaninBold.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BNazanin';
src: url('../assets/fonts/BNazaninBold.woff') format('woff'),
url('../assets/fonts/BNazaninBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BTitr';
src: url('BTitrBold.eot');
src: url('../assets/fonts/BTitr.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BTitr';
src: url('../assets/fonts/BTitr.woff') format('woff'),
url('../assets/fonts/BTitr.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
  font-family: 'BBCNassim';
  src: url('BBCNassim.eot');
  src: url('../assets/fonts/BBCNassim-Bold.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BBCNassim';
  src: url('../assets/fonts/BBCNassim-Bold.woff') format('woff'),
  url('../assets/fonts/BBCNassim-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'XBYas';
  src: url('../assets/fonts/XB Yas Bd.eot');
  src: url('../assets/fonts/XB Yas Bd.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'XBYas';
  src: url('../assets/fonts/XBYas-Bold.ttf') format('truetype'),
       url('../assets/fonts/XBYas-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


.cardBgStaff {
    background-image: url('../assets/images/ID-Staffcardbg.png') !important;
    width: 5.5cm;
    height: 8.5cm;
    background-size: 5.5cm 8.5cm  !important;
    margin: 0px 0px !important;
    border-radius: 20px;
    background-repeat: no-repeat !important;
    border: 1px solid #ddd;
    font-size: 10px;
}

b.staffcard{
  font-size: 11px !important;
  padding-left:6px !important;
  color:#000;
}
b.staffcardname{
   font-size: 14px !important;
   color:#0780B0  !important;
   margin-top:4px  !important;
   text-align: center !important;
}

b.staffcardname{
   font-size: 14px !important;
   color:#0780B0  !important;
   margin-top:4px  !important;
   text-align: center !important;
}

table#Staff-ID-card-table {
    text-align: left !important;
  direction:ltr !important;
    float: left;
    margin-top: 0px !important;
    margin-left: 10px;
  
}
table#Staff-ID-card-table>tbody>tr>td{
    padding-bottom: 5px !important;
  
}

tbody.idCard{
    padding: 0px 0px 0px 0px !important;
  border:none;
  background-color:transparent !important;
}

/*---------------start for input option ------------------------*/
     .option-input {
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      appearance: none;
      position: relative;
      top: 7px;
      right: 0px;
      bottom: 0;
      left: 0;
      height: 30px;
      width: 30px;
      transition: all 0.15s ease-out 0s;
      background: #cbd1d8;
      border: none;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      margin-right: 0.5rem;
      outline: none;
      position: relative;
      z-index: 1000;
    }
    .option-input:hover {
      background: #9faab7;
    }
    .option-input:checked {
      background: #40e0d0;
    }
    .option-input:checked::before {
      height: 30px;
      width: 30px;
      position: absolute;
      content: '✔';
      display: inline-block;
      font-size: 20.66667px;
      text-align: center;
      line-height: 35px;
    }
    .option-input:checked::after {
      -webkit-animation: click-wave 0.65s;
      -moz-animation: click-wave 0.65s;
      animation: click-wave 0.65s;
      background: #40e0d0;
      content: '';
      display: block;
      position: relative;
      z-index: 100;
    }

/*---------------end for input option ------------------------*/