.b{
    all : unset

}
.button_h {
  background-color:#F0FFFF;
  font-size:12px;
  text-decoration:none;
  color:#2F4F4F;
  position:relative;
  padding:10px 20px;
  border-left:solid 1px #404e50;
  margin-left:35px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: inset 0px 1px 0px #4b626a,
   0px 5px 0px 0px #4b6f70,
    0px 10px 5px #999;

}

.button_h:active {
  top:3px;
  box-shadow: inset 0px 1px 0px #4b626a, 0px 2px 0px 0px #4b6f70, 0px 5px 3px #999;
}

.button_h::before {
  content:"ح";
  width:35px;
  max-height:60px;
  height:100%;
  position:absolute;
  display:block;
  padding:auto;
  top:0px;
  left:-36px;
  font-size:16px;
  font-weight:bold;
  color:'#8fdea';
  border-right:solid 1px #505050;
  background-color: #8bc3c5;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow:inset 0px 1px 0px #6b6e6e, 0px 5px 0px 0px #4b6f70, 0px 10px 5px #999 ;
}

.button_h:active::before {
  top:-3px;
  box-shadow:inset 0px 1px 0px #4b626a, 
  0px 5px 0px 0px #4b6f70, 
  1px 1px 0px 0px #044a64, 
  2px 2px 0px 0px #044a64, 
  2px 5px 0px 0px #044a64, 
  6px 4px 2px #0b698b, 
  0px 10px 5px #999 ;
}

.button_ba {
  background-color:#fcd9d9;
  font-size:12px;
  text-decoration:none;
  color:#2F4F4F;
  position:relative;
  padding:10px 20px;
  border-left:solid 1px #583434;
  margin-left:35px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: inset 0px 1px 0px #834444,
   0px 5px 0px 0px #834444,
    0px 10px 5px #999;
}

.button_ba:active {
  top:3px;
  box-shadow: inset 0px 1px 0px #834444, 0px 2px 0px 0px #834444, 0px 5px 3px #999;
}

.button_ba::before {
  content:"ب.ع";
  width:35px;
  max-height:60px;
  height:100%;
  position:absolute;
  display:block;
  padding:auto;
  top:0px;
  left:-36px;
  font-size:16px;
  font-weight:bold;
  color:'#8fdea';
  border-right:solid 1px #fbfbfb;
  background-color: #f55656;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow:inset 0px 1px 0px #834444, 0px 5px 0px 0px #641b1b, 0px 10px 5px #999 ;
}

.button_ba:active::before {
  top:-3px;
  box-shadow:inset 0px 1px 0px #834444, 
  0px 5px 0px 0px #834444, 
  1px 1px 0px 0px #520000, 
  2px 2px 0px 0px #520000, 
  2px 5px 0px 0px #520000, 
  6px 4px 2px #c50404, 
  0px 10px 5px #999 ;
}
.button_a {
  background-color:#f7f2af;
  font-size:12px;
  text-decoration:none;
  color:#2F4F4F;
  position:relative;
  padding:10px 20px;
  border-left:solid 1px #504a16;
  margin-left:35px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: inset 0px 1px 0px #7a6e00, 0px 5px 0px 0px #7a6e00, 0px 10px 5px #999;
}

.button_a:active {
  top:3px;
  box-shadow: inset 0px 1px 0px #7a6e00, 0px 2px 0px 0px #7a6e00, 0px 5px 3px #999;
}

.button_a::before {
  content:"عذر";
  width:35px;
  max-height:60px;
  height:100%;
  position:absolute;
  display:block;
  padding:auto;
  top:0px;
  left:-36px;
  font-size:16px;
  font-weight:bold;
  color:'#8fdea';
  border-right:solid 1px #575506;
  background-color: #e0cc59;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow:inset 0px 1px 0px #7a6e00, 0px 5px 0px 0px #7a6e00, 0px 10px 5px #999 ;
}

.button_a:active::before {
  top:-3px;
  box-shadow:inset 0px 1px 0px #4b626a, 
  0px 5px 0px 0px #a79c3d, 
  1px 1px 0px 0px #7a6e00, 
  2px 2px 0px 0px #7a6e00, 
  2px 5px 0px 0px #7a6e00, 
  6px 4px 2px #cabf5d, 
  0px 10px 5px #999 ;
}

.button_t1 {
  background-color:#ffffff00;
  position:relative;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: none;
  text-decoration: none;
}

.button_t1:active {
  top:3px;
}


.button-17 {
  align-items: center;
  appearance: none;
  background-color: #fff;
  border-radius: 24px;
  border-style: none;
  box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
  box-sizing: border-box;
  color: #3c4043;
  cursor: pointer;
  display: inline-flex;
  fill: currentcolor;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  justify-content: center;
  letter-spacing: .25px;
  line-height: normal;
  max-width: 100%;
  overflow: visible;
  padding: 2px 24px;
  position: relative;
  text-align: center;
  text-transform: none;
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: auto;
  will-change: transform,opacity;
  z-index: 0;
  margin-right: 5px;
  margin: 5px;
}

.button-17:hover {
  background: #F6F9FE;
  color: #174ea6;
}

.button-17:active {

  box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
  outline: none;
}

.button-17:focus {

  outline: none;
  border: 2px solid #4285f4;
}

.button-17:not(:disabled) {
  background: #bddbec;

  box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}

.button-17:not(:disabled):hover {
  background: #ffffff;

  box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px;
}

.button-17:not(:disabled):focus {
  box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}

.button-17:not(:disabled):active {
  box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px;
}

.button-17:disabled {
  box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}