html {
    position: relative;
    min-height: 100%;
}

body{
    /*background-color: #f5f5f5;*/
    background-image: url('/Game/public/images/t.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    font-size: 16px;
}

.swal-text{
    text-align: center;
}

.row{
    margin-left: 0;
}
.ajs-body{
    line-height: 1.7;
}

a:focus, a:hover{
    text-decoration: none;
}


*{
   font-family: 'Cairo', sans-serif;
}

.btn{
    text-align: inherit;
    white-space: pre-wrap;
}

.navbar{
    position: relative;
    top: 0;
    z-index: 2;
}

.showNav{
    position: absolute;
    width: 100px;
    height: 30px;
    background-color: #ececec;
    left: 50%;
    margin-left: -50px;
    clip-path: polygon(0 0, 100% 0%, 100% 50%, 50% 100%, 0% 50%);
    z-index: -1;
}

.alert{
    line-height: 1.8;
}

.text-click{
    font-weight: bold;
    color: #86466c;
}

.lead{
    line-height: 1.9;
    letter-spacing: 0.7px;
}

/* START BOX */
.box{
    height: 400px;
    overflow-y: scroll;
    background-color: #fefefe;
    padding: 20px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    box-shadow: 0 0 9px 0px #dadada;
    border-left: 7px solid #86466c;
    position: relative;
    background-image: url('/images/background-box.png');
    background-size: cover;
    background-origin: content-box;
    background-position: center;
}

.box:hover{ 
    box-shadow: 0 0 12px 0px #dadada;
}

.box::-webkit-resizer {
    background-color: #6b36a0;
}
.box::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
.box::-webkit-scrollbar-button {
    background-color: #6b36a0;
}
.box::-webkit-scrollbar-corner {
    background-color: #999;
}
.box::-webkit-scrollbar-thumb {
    height: 20px;
    background-color: #6b36a0;
    border-radius: 0;
}
.box::-webkit-scrollbar-track {
    background-color: #999;
}
.box::-webkit-scrollbar-track-piece {
    background-color: #fff;
}

.box .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio]{
    position: static;
}

.box .radio{
    margin: 10px 20px;
}

.box img{
    width: 50px;
    position: fixed;
    left: 50%;
    bottom: 0;
    margin-left: -25px;
}

.box img.mobile{
    visibility: hidden;
}

.ar .person{left: 190px;  }
.en .person{left: 80px;  }

.person{
    width: 250px;
    height: 350px;
    position: fixed;
    bottom: 10px;
}

/* END BOX */

.btn-custom{
    background-color: transparent;
    border: 1px solid #86466c;
    color: #6b36a0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    font-size: 18px;
    padding: 5px 20px;
}



.box-2 .btn-custom {
    margin: auto 3px;
}

.btn-custom:hover{
    background-color: #86466c;
    color: #fff;
}

@media (max-width: 768px){
    .btn-custom{
        font-size: 15px;
        padding: 4px 20px;
    }
}

/* Classess */
.margin-10{
    margin: 10px;
}
.margin-20{
    margin: 20px;
}
.margin-bottom-30{
    margin-bottom: 30px;
}
.margin-top-30{
    margin-top: 30px;
}

.margin-top-15{
    margin-top: 15px;
}

.white{
    color: #fff !important;
}

.break{
    word-break: break-word;
}

.clear{
    clear: both;
}

.hide-p{
    display: none;
}

.over-flow-hidden{
    overflow: hidden;
}

.middle{
    -webkit-vertical-align: middle;
    -moz-vertical-align: middle;
    vertical-align: middle;
}

.pointer{
    cursor: pointer;
}


footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.col-sm-7{
    float: right !important;
}

@media (max-width: 768px){
    .box{
        height: 260px;
    }
    .box p.lead{
        font-size: 15px;
    }
    .person{
        width: 125px;
        height: 150px;
    }
    .ar .person{left: 20px; bottom: -4px;}
    .en .person{left: 80px;  }
    .box img.mobile{
        visibility: visible !important;
    }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .person{
        width: 250px;
        height: 350px;
    }
    .ar .person{left: 10px; bottom: -4px;}
    .en .person{left: 80px;  }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .ar .person{left: 190px; bottom: -4px;}
    .en .person{left: 80px;  } 
}

/*Extra large devices (large desktops, 1200px and up)*/
/*
@media (min-width: 1200px) {
    
}*/