/* modal bg */
#modal-hodein{
  display: none;
  z-index: 9999999999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.75);


  -webkit-transition: all ease-out 500ms;
  -moz-transition: all ease-out 500ms;
  -o-transition: all ease-out 500ms;
  transition: all ease-out 500ms;
}

#modal-hodein.dark-theme{
  background-color: rgba(33, 33, 33, 0.75);
}

/* modal area */

#modal-hodein > div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 550px;
  max-width: 90%;
  background: #f9f9f9;
  color: #333;
  box-shadow: 3px 3px 5px #4d4747;
  border-radius: .3rem;
}

#modal-hodein.dark-theme > div{
  background: #333;
  color: #f9f9f9;
  box-shadow: 3px 3px 5px #1e1d1d;
}

#modal-hodein > div.large{
  width: 950px;
}

/* modal head */

#modal-hodein .modal-head{
  position: relative;
  padding: 1.2rem;
  background: #d2d2d2;
  color: #333;
}

#modal-hodein.dark-theme .modal-head{
  background: #222;
  color: #fafafa;
}

#modal-hodein .modal-head button{
  float: right;
  background: transparent;
  border: 0;
  border-radius: .6rem;
  padding: .3rem;
  margin-left: 1rem;
  line-height: normal;
}

/* modal body */

#modal-hodein .modal-body{
  list-style: none;
  max-height: 450px;
  overflow: auto;
}


/* modal footer */

#modal-hodein .modal-footer{
  position: relative;
  padding: 1.2rem;
  height: 5.8rem;
  line-height: 3.4rem;
  border-top: 1px solid #ddd;
  color: #828282;
  font-size: 80%;
  text-align: right;
}

#modal-hodein.dark-theme .modal-footer{
  border-top: 1px solid #222;
  color: #fafafa;
}

#modal-hodein .modal-footer span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  color: #828282;
}

#modal-hodein .modal-footer button{
  float: left;
  background: transparent;
  border: 0;
  border-radius: .6rem;
  padding: .8rem 2rem;
  margin-left: 1rem;
  line-height: normal;
}

#modal-hodein .modal-footer button:first-child{
  margin-left: 0;
}

#modal-hodein .modal-footer button.modal-close{
  float: left;
  background: #ff0000;
  border: 1px solid #aa0000;
  color: #fff;
  font-weight: 700;
}

#modal-hodein .modal-footer button.modal-close-force{
  float: left;
  border: 1px solid #aa0000;
  color: #aa0000;
  font-weight: 700;
}

#modal-hodein.dark-theme .modal-footer button.modal-close-force{
  color: #fff;
}