body{
    font-family: 'Cairo', sans-serif;
}
h2{
    color: #4b82be;
    font-weight: bold;
    margin-bottom: 1.2em;
    margin-top: 0.2em;
}
h2:after {
    content: "";
    display: block;
    width: 190px;
    background-color: #e1e1e1;
    height: 8px;
    position: absolute;
    margin-top: 9px;
    text-align: center;
    margin-bottom: 14px;
}
.form-group {
    margin-bottom: 15px;
    margin-top: 30px;
}
.btns-container{
    clear: both;
    text-align: center;
    padding-top: 60px;
}
.btns-container button:first-child{
    margin-left: 20px;
}
.btns-container a{
    text-decoration: none;
    margin-right: 25px;
}
/*.page-form-container .form-page-second,.page-form-container .form-page-third{
  display: none;
}*/

.form-page{
    display: none;
}
.form-page-first{
    display: block;
}
.rating {
    overflow: hidden;
    display: block;
    width: 51%;
    margin-right: 38px;
}

.rating-input {
    float: left;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0 0 0 -16px;
    opacity: 0;
}

.rating-star {
    cursor: pointer;
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    background: url('img/star.png') 0 -16px;
}

.rating-star:hover {
    background-position: 0 0;
}
.rating-star {
    position: relative;
    float: left;
    display: block;
    width: 16px;
    height: 16px;
    background: url('img/star.png') 0 -16px;
}

.rating-star:hover,
.rating-star:hover ~ .rating-star {
    background-position: 0 0;
}
.rating-star:hover,
.rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
    background-position: 0 0;
}
.rating:hover .rating-star:hover,
.rating:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
    background-position: 0 0;
}

.rating-star,
.rating:hover .rating-star {
    position: relative;
    float: left;
    display: block;
    width: 16px;
    height: 16px;
    background: url('img/star.png') 0 -16px;
}
.error{
    border: 2px solid red;
}
label[for="KnowledgeValue"],
label[for="NeedsValue"]
{
    position: absolute;
}
.knowledge-descripton-container,.needs-descripton-container{
    display: none;
    position: absolute;
    margin: 0;
    width: 320px;
    top: 58%;
    left: 40px;
    z-index: 15
}
.needs-descripton-container{

    top: 91%;
}
textarea.form-control{
    /*display: none;*/
    /*  position: absolute !important;
      top: 112px;
      width: 333px;
      z-index: 99;*/
}
.close-txtarea{
    padding: 3px 16px;
    position: absolute;
    left: 0;
    top: 23px;
}
textarea.form-control.needs-reason{
    /*top: 160px;*/
}
.close-needs-area{
    /*top: 186px !important;*/
    /*  z-index: 999;*/
}
.test-css-xss{
    background-color: red !important;
}
header{
    padding: 0 8px;
    z-index: 15;
    position: absolute;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    height: 45px;
}

header ul{
    list-style: none;
    display: block;
    width: calc(100vw - 18em);
    clear: both;
}

header ul li{
    display: inline-block;
    float: right;
}
header ul li a{
    padding: 8px 25px;
    font-size: 18px;
    font-weight: bold;
    background-color: #4b82be;
    margin-left: 15px;
    color: #fff;
    transition: all 0.5s ease;
    text-decoration: none;
}
header ul li a:hover{
    text-decoration: none;
    color: #fff;
    background-color: rgba(75, 130, 190, 0.61);
}
.active-menu{
  text-decoration: none;
    color: #fff;
    background-color: rgba(75, 130, 190, 0.61);
}
.results-header{
    padding: 8px;
    z-index: 15;
    position: absolute;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    padding-right: 27em;
}


/*ragaey styles*/
.km-header{
    position: relative;
        height: 49px;
    
}
.know-more-header{
    width: 100%;
    text-align: right;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}
.know-more-header li{
    float: none;   
    margin-bottom: -8px;
}
.know-more-header li a{
    float: right;
}
.know-more-header ul li a:hover,
.know-more-header ul li a:focus,
.submit-btn:hover,
.submit-btn:focus
{
    text-decoration: none;
    color: #fff;
    background-color: rgba(75, 130, 190, 0.61);
}
.Km-main{
    direction: rtl;
}
.evaluation{
    font-size: 18px;
    display: inline-block;
    font-weight: bold;
    padding-left: 25px;
}
.overflow-auto{
    overflow-y: auto;
}
.heading {
    margin-bottom: 30px;
}
.sub-menu{
    padding-top: 15px;
    padding-bottom: 15px;  
}
.sub-menu li{
    padding: 5px 0;
}

.more-info {
    font-size: 14px;
    display: inline-block;
    font-weight: bold;
}
.submit-btn{
    padding: 5px 40px;
    font-size: 18px;
    font-weight: bold;
    background-color: #4b82be;
    color: #fff;
    transition: all 0.5s ease;
    text-decoration: none;
}
.submit-wrapper{
    position: relative;
    height: 100%;
    margin: 15px auto;
}
.content-wrapper{
    padding-bottom: 20px;
    padding-top: 20px;
}
.content-wrapper > li{
    padding-bottom: 40px;
}
.sub-heading{
    font-size: 15px;
}
body{
  overflow-x: hidden;
}