.color1{ color: #A437DB; }
.color2{ color: #BB84E8; }
.color3{ color: #BB84E8; }
.color4{ color: #471AA0; }
.color5{ color: #FFFFFF; }
.color6{ color: #1a1a1a; }

@font-face {
    font-family: UbuntuArabicRegular;
    src: url(../fonts/UbuntuArabicRegular.ttf);
}

@font-face {
    font-family: TajawalRegular;
    src: url(../fonts/Tajawal-Regular.ttf);
}

*{
    direction: rtl;
    margin: 0;
    padding: 0;
    font-family: TajawalRegular;
}

.fontfamily1{font-family: TajawalRegular}
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

a{text-decoration: unset;}

.maincontents {
    /* nothing to put here */
}

.footer {
  margin-top: auto;
  background-color: green;
}

textarea, select, input, button { outline: none !important; outline-color: transparent; outline-style: none; }
input:focus {
    outline-color: transparent !important;
    outline-style: none !important;
    outline: none !important;
}

header{
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    background-color: #471AA0;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.header-logo{
    width: 80px;
    margin: 5px 10px 0 0;
}

nav{
    color: #FEB58A !important;
    margin-top: 25px;
    margin-left: 15px;
}

nav a {color: #FEB58A !important; font-size: 1.1rem;}
nav:hover a:hover {color: #1a1a1a !important; background-color: #FFB88C;}
nav div{margin: 10px 15px;}

button:focus {outline:0 !important;}

.header-ellipsis{
    color: aliceblue;
    margin: 25px 15px;
    font-size: 1.6rem;
}

header .btn:focus {outline:0 !important; color: #128C7E; outline: unset;}

.section-card, .section-list{
    width: 100%;
    margin: 0.5rem auto;
    border-bottom: #BB84E8 solid thin; 
    height: 100px;
    border-radius: 0px;
    padding: 15px;
    color: #A437DB;
    font-size: 1.5rem;
    text-align: center;
    cursor: pointer;
}

.section-list{
    color: #1a1a1a;
    height: 55px;
}

.section-list h2{
    margin-right: 20px;
}


.postion-80top{
    top: 80px;
    clear: both;
    margin-top: 80px;
}
.postion-100top{margin-top: 100px;}

.section-card h2{
    margin-top: 15px;   
}
.section-card h4{font-size: 1.0rem;}

.section-card p{
    font-size: 0.9rem;   
}

.img-avatar{
    border-radius: 10px;
    background-color: #BB84E8;
    border: #A437DB solid thin;
    width: 70px;
    height: 70px;
}

.w-70{
    width: calc(100% - 80px);
    max-width: calc(100% - 80px);
    min-width: 200px;
}

.w-30{
    width: 80px;
    max-width: 80px;
    min-width: 80px;
    float: left;
}

.star-rating, .price-rate, .has-offer{font-size: 0.7rem; color: lightgrey;}
.price-rate{color: #471AA0;}
.has-offer{color: #DE6262;}

.fstar{color: #000;}

.logo-wrap-login{text-align: center; background-color: unset;}
.login-logo{width: 30%; margin: 1rem auto;}

.register-wrap-login{text-align: center; background-color: unset;}
.register-logo{width: 45%; margin: 1rem auto;}

.form-check-input{
    height: 20px !important;
    float: right !important;
    margin-left: 0;
}

.form-check-label{
    margin-right: 30px;
}

.sp-title{
    font-size: 2.4rem;
    text-align: center;
    color: #471AA0;
    margin-top: 10px;
}

.home-btn{
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 1.4rem;
    color: #471AA0;
}

.image-avatar{
    width: 80px;
    height: 80px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    justify-items: center;
    padding: 0px;
}

.falign{text-align: start; margin-right: 10px !important;}

.login-form, .de-form{margin: 10px auto; width: 45%; min-width: 450px;}
.login-form input{text-align: center; outline: unset !important; height: 50px; font-size: 1.2rem;}
.login-form button{background-color: #471AA0; color: #fff; font-size: 1.4rem; border-color: #471AA0;} 
.login-btn{background-color: #471AA0; color: #fff; font-size: 1.4rem; border-color: #471AA0;} 
.de-btn{margin: 10px auto; width: 100%; min-width: 450px; text-align: center;}


.login-block{
    background: #DE6262;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #FFB88C, #DE6262);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #FFB88C, #DE6262); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
float:left;
width:100%;
padding : 50px 0;
}
.banner-sec{background:url(https://static.pexels.com/photos/33972/pexels-photo.jpg)  no-repeat left bottom; background-size:cover; min-height:500px; border-radius: 0 10px 10px 0; padding:0;}
.container{background:#fff; border-radius: 10px; box-shadow:15px 20px 0px rgba(0,0,0,0.1);}
.carousel-inner{border-radius:0 10px 10px 0;}
.carousel-caption{text-align:left; left:5%;}
.login-sec{padding: 50px 30px; position:relative;}
.login-sec .copy-text{position:absolute; width:80%; bottom:20px; font-size:13px; text-align:center;}
.login-sec .copy-text i{color:#FEB58A;}
.login-sec .copy-text a{color:#E36262;}
.login-sec h2{margin-bottom:30px; font-weight:800; font-size:30px; color: #DE6262;}
.login-sec h2:after{content:" "; width:100px; height:5px; background:#FEB58A; display:block; margin-top:20px; border-radius:3px; margin-left:auto;margin-right:auto}
.btn-login{background: #DE6262; color:#fff; font-weight:600;}
.banner-text{width:70%; position:absolute; bottom:40px; padding-left:20px;}
.banner-text h2{color:#fff; font-weight:600;}
.banner-text h2:after{content:" "; width:100px; height:5px; background:#FFF; display:block; margin-top:20px; border-radius:3px;}
.banner-text p{color:#fff;}


.font1{font-size: 2.0rem;}
.font2{font-size: 1.6rem;}
.font3{font-size: 1.2rem;}

.location-background{
    background-image: url(../images/background-op15.png);
    height: calc(100vh - 80px);
    overflow-y: scroll;
}

.mtop-10{margin-top: 15px !important; top:15px; position: inherit;}
.tabs-wrap{background-color: #ffffff9c;}
.tab-nav{font-family: TajawalRegular; margin-top: 25px; color: #471AA0;}
.tab-nav div{text-align: center; margin: 0 20px; font-size: 1.4rem; cursor: pointer;}
.activeTab{border-bottom: #471AA0 2px solid;}

.tab-body{
    width: 97%;
    margin: 10px auto;
    padding: 5px;
    min-height: 100px;
}

.inherit{position: inherit;}
.clear-both{clear: both;}
.comment{
    min-height: 100px;
    border-bottom: #1a1a1a solid thin;
}
.fitcontent{width: fit-content;}
.page-title{border-bottom: #471AA0 thick solid; padding: 10px; width: fit-content;}
.l-dir{direction: ltr;}
.form-error{color: red;}

.offer{
    border: #471AA0 solid thin;
    border-radius: 15px;
    width: 150px;
    height: 150px;
    padding: 10px;
    cursor: pointer;
    margin: 10px 10px 20px 20px;
    text-align: center;
    color: #471AA0;
}

.add-offer{
    background-color: #471AA0;
    color: wheat;
}


.home-page{
    color: #471AA0;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-top: 1rem;
}