@import url("../font/fontiran.css");
body,p,h1,h2,h3,h4,h5,h6,a,div,a,span,strong {
    font-family: IRANSans;
}

.spinner {
    width: 40px;
    height: 40px;
    background-color: rgba(101, 131, 142,100);

    /* margin: 100px auto; */
    position: absolute;
    top: 48%;
    left: 48%;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

.spinner-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 999999;
}

.box {
    transition: box-shadow .3s;
    width: 300px;
    height: 150px;
    margin: 50px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: lightgrey;
    float: left;
    box-shadow: 0px 5px 5px rgba(33, 33, 33, .3);
}

.box:hover {
    box-shadow: 0px 15px 15px rgba(33, 33, 33, .2);
}

.MyHeader {
    background: lightgrey;
    width: 100%;
    height: 300px;
}

.Shadow {
    transition: box-shadow .3s;
    box-shadow: 0px 5px 5px rgba(33, 33, 33, .5);
}

.Shadow:hover {
    box-shadow: 0px 15px 15px rgba(33, 33, 33, .4);
}

.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: rgba(170, 150, 100,100)
}

#myBtn {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 99;
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  float: right;
}

.navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0
    margin-bottom: 0;
    list-style: none;
    text-align: right;
    padding-right: 0px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0,0,0,.5);
}

.overlay:hover {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.img-overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
}

.img-overlay:before {
            content: ' ';
            display: block;
            /* adjust 'height' to position overlay content vertically */
            height: 80%;
        }

.card-body {
    background-color: rgba(253,253,253) !important;
}
    
.card {
    border-radius: 0px !important;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: rgba(0,0,0,.0);
}


/* @font-face {
    font-family: 'irsans';
    src: url('../font/irsans.ttf') format('truetype');
}

@font-face {
    font-family: 'BYekan';
    src: url('../font/BYekan.ttf') format('truetype');
}

a, p, h1, h2, h3, h4, h5, h6 {
    font-family: BYekan;
} */