*{
    font-family: 'Almarai', sans-serif;
}
.change::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #fff;
    opacity: 0.5;
}
.change:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #fff;
    opacity: 0.5;
}
.change::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff;
    opacity: 0.5;
}
.change:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #fff;
        opacity: 0.5;

}
.container{
  min-height: 450px;
}
.btn{
  border: 1px solid #000;
}
.btn.btn-increment{
  background: #28a745 !important;
  color: #fff !important;
  font-size: 21px;
	width: 40px;
	height: 40px;
	line-height: 20px;
}
.btn.btn-decrement{
  background: #dc3545 !important;
  color: #fff !important;
  font-size: 21px;
width: 40px;
height: 40px;
line-height: 20px;
}
.input-group {
  width: 75% !important;
  margin: 0 auto;
  margin-top: 2px;
  margin-bottom: 10px;
}
.input-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}
div>#state
{
  width: 50%;
  margin: 0 auto;
}
.btn-light{
  background: #fff !important;
}
div>#qazena
{
  font-size: 50px;
  text-align: center;
  font-weight: bold;
}
.lho{
  font-size: 100px;
  color:red;
  background: #ddd;
  width: auto;
  height: 130px;
  border: 5px solid #000;
  text-align: center;
  min-width: 300px;
}
.lho>span{
  line-height: 130px;
}
div.#nav
{
  margin: 20px auto !important;
}
.w_form{
  width: 50%;
}
div>#users
{
  margin: 0 auto;
  text-align: center;
  width: 60%;
}
div>#users>h1
{
  text-align: center;
  background: #5cb85c;
  border: 2px solid #000;
  border-radius: 10px;
  color: white;
  padding: 5px;
  line-height:40px;
}
#table
{
  /*background: #ffffff;*/
  margin: 0 auto;
}
td{
    vertical-align: middle !important;
}
tr{
   background: #fff;
}
#trg tr:hover
{
  background: red !important;
}
#delok
{
  width:50%;
  background:#fff;
  padding:50px;
  margin: 5px auto;
  border:2px #000 solid;
}
.modal {
  overflow-y: unset;
}
.close {
  float: left;
}
option{
  font-size: 30px;
  color: #000;
}
#table th
{
  text-align: center;
}
form{
  padding: 20px;
  background: #ffffff;
  text-align: right;
}
div>#pagenion
{
  margin-bottom: -45px;
  /*margin-bottom: -5px;*/
}
#bar{
  width: 100%;
  height: 60px;
  background: #000;
  position: absolute;
  clear: both;
  top: 100%;
}
#footer{
  margin-right: 42%;
  margin-top: -60px;
}
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.container{
    width: 100%;
    height: auto;
}

.hide{
  display: revert !important;
}
#ali{
  white-space: pre-wrap;
}

@media screen and (min-width: 360px)and (max-width: 740px)
{
  .w_form{
    width: 100% !important;
  }
  #footer{
    margin-right: 20%;
    margin-bottom: 2%;
  }
  div>#users
  {
    width: 100%;
  }
  #delok
  {
    width:100%;
  }
  .hide{
    display: none !important;
  }
  div>#state
  {
    width: 100%;
  }
  div>#pagenion
  {
    margin-bottom: -5px;
  }
}
@media screen and (min-width: 375px)and (max-width: 667px)
{
  .w_form{
    width: 100% !important;
  }
  #footer{
    margin-right: 20%;
    margin-bottom: 2%;
  }
  div>#users
  {
    width: 100%;
  }
  #delok
  {
    width:100%;
  }
  .hide{
    display: none !important;
  }
  div>#state
  {
    width: 100%;
  }
  div>#pagenion
  {
    margin-bottom: -5px;
  }
}
@media screen and (min-width: 414px)and (max-width: 736px)
{
  .w_form{
    width: 100% !important;
  }
  #footer{
    margin-right: 23%;
    margin-bottom: 2%;
  }
  div>#users
  {
    width: 100%;
  }
  #delok
  {
    width:100%;
  }
  .hide{
    display: none !important;
  }
  div>#state
  {
    width: 100%;
  }
  div>#pagenion
  {
    margin-bottom: -5px;
  }
}

@media screen and (min-width: 768)and (max-width: 1024px)
{

}