*{
	box-sizing: border-box;
  }
body {
	 font-family: 'Source Sans Pro', Arial, sans-serif;
	 font-size: 18px;
	 background: #eee;
	 color: #000000;
	 height: 100%;
	 width: 100%;
	 margin: 0;
}

.arabic_right
{
    float:right;
}

 ul {
	 list-style-type: none;
	 margin: 0;
	 padding: 0;
}
.rating--item p{
	font-size:12px;
	transition: all 100ms ease;
	color:#808080;
}
 .feedback--wrapper{
	width: 534px;
    min-width: 534px;
	margin: 0 auto;
	min-height: calc(100vh - 220px);
}
 .rating--title {
	 text-align: center;
	 font-weight: 700;
	 display: block;
}
 .rating--list {
	
	 margin: auto;
	 display: flex;
	 justify-content: space-between;
	 padding: 1em 0;
}
 .rating--input {
	 display: none;
}
 .rating--label {
	 padding: 5px 3px;
	 font-size: 26px;
	 /*filter: grayscale(1);*/
	 opacity:1;
	 cursor: pointer;
	 transition: all 100ms ease;
}
.top--line{
	border-bottom-width: 1px;
	  border-bottom-style: solid;
	  border-bottom-color: #800080;
	  border-top-width: 6px;
	  border-top-style: solid;
	  border-top-color: #800080;
	  background-color: #800080;
  }
  .logo{
	max-width: 190px;
	margin:20px auto;
	
  }
  footer,
  header{
	background: #FFFFFF;
	  height: 95px;
	  width: 100%;
  }
  
 .rating--label.active {
	 filter: grayscale(0);
	 opacity: 1;
	 	 transform: scale(1.3);
	 transition: all 100ms ease;
}
 .rating--label:hover {
	 filter: grayscale(0.84);
	 transition: 100ms ease;
}
.rating--label:hover + p{
	color:#000000;
	transition: all 100ms ease;
}
 .reason--wrapper{
	 width: 100%;
	 display: none;
}
 .reason--wrapper textarea{

	 width: 100%;
	 display: block;
	 margin: 0.5em auto;
	 padding: 0.5em;
	 font-family: inherit;
	 border: 1px solid #d1d2d7;
	 border-radius: 3px;
}
 .reason--wrapper textarea:focus,  .reason--wrapper textarea:active {
	 border-color: #c80000;
	 box-shadow: 0px 0px 0px 3px rgba(200, 0, 0, .2);
	 transition: 100ms;
	 outline: 0;
}
 .reason--wrapper textarea {
	 height: 100px;
}
 .reason--wrapper button {
	 margin: 1em auto;
	 display: table;
	 text-align: center;
}
 .reason--wrapper button:focus, .reason--wrapper button:active {
	 outline: 0;
}
.store--wrapper,
.send--message--log--wrapper,
.reporting--wrapper {
    width: 900px;
    min-width: 900px;
    margin: 0 auto;
    min-height: calc(100vh - 220px);
}
.range--wrapper > label{
  font-size: 20px;
  font-weight: 400;
}
.range--wrapper > button{
  margin-top: 33px;
}
.range--wrapper{
  padding-top: 10px;
  padding-bottom: 10px;
}

@media  screen and (max-width:767px){
	.feedback--wrapper,.reporting--wrapper ,.send--message--log--wrapper,.store--wrapper {
		width: 100%;
		min-width: 100%;
		padding: 0 15px;
}
.rating--list {
    margin: 0 auto;
    display: block;
    /* justify-content: space-between; */
    padding: 1em 0;
    max-width: 320px;
}
.rating--title{
	font-size:20px;
}
}

.em{
    height: 1.5em;
    width: 1.5em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
}
 

.em-detractor {
    background-image: url(../img/detractor.png);
}

.em-passives {
    background-image: url(../img/passives.png);
}

.em-promotors {
    background-image: url(../img/promotors.png);
}

table.dataTable tbody th, table.dataTable tbody td
{
    padding: 8px 10px;
    font-size: 0.7em;
}
.btn
{
    margin: 1%;
}
.filter--wrapper a
{
    font-size : 0.8em;
}

.mobile--version{
    display:none;
}


@media  screen and (max-width:767px){
    .feedback--date,
    .feedback-body{
        float:left;
    }
     .bar--wrapper .col-md-3{
         margin-bottom:15px;
     }
    .bar--wrappper{
            overflow-x: auto;
    width: 100%;
    }
    
    input.form-control.datepicker{
        margin-top:15px;
    }
    .reporting--wrapper {
    width: 100% !important;
    min-width: 100% !important;
        
    }
    .mobile--version{
    display:block;
}
.input-group-addon{
        display: table-column;

}
.form-control{

}
.m1--wrapper, .dataTables_wrapper {

    overflow-x: auto;
}
    .desktop--version{
    display:none;
}
}
.length_selection .dataTables_length
{
    margin-top:2%;
}
.dataTables_wrapper .dataTables_filter input
{
    border: 1px solid lightgrey;
    border-radius: 5px;
}
.dataTable  thead tr th{
    font-size: 0.9em;
    font-weight: normal;
}
.feedback--wrapper h1 {
    font-size: 26px;
}
.dataTables_wrapper .dataTables_filter label , .dataTables_length label
{
    font-weight: normal;
    font-size: 0.8em;
}
.dataTables_length label select
{
	padding: 4px 7px;
}
table.dataTable.no-footer
{
    border-bottom: none;
}
.dataTables_paginate .paginate_button
{
	font-size: 0.8em;
	padding: 0.3em 0.8em !important;
    margin-left: 10px !important;
}



table.dataTable tbody td.control:before {
    content: '+'; /* Default collapsed icon */
    display: inline-block;
    margin-right: 10px;
    color: #007bff;
    cursor: pointer;
    text-align: center;
}

table.dataTable tbody tr.parent td.control:before {
    content: '-'; /* Expanded icon */
    color: #dc3545;
}
/* Ensure the control column is hidden when not needed */
@media (min-width: 768px) {
    table.dataTable tbody td.control {
        display: none;
    }
}





 .dataTable {
    border-collapse: separate; /* Allows border radius */
    border-spacing: 0; /* Removes gaps between cells */
    border-radius: 10px; /* Adjust to your preference */
    overflow: hidden; /* Ensures rounded corners work properly */
}

.dataTable thead th:first-child {
    border-top-left-radius: 5px; /* Top-left corner */
}

.dataTable thead th:last-child {
    border-top-right-radius: 5px; /* Top-right corner */
}

.dataTable tbody tr:last-child td:first-child {
    border-bottom-left-radius: 5px; /* Bottom-left corner */
}

.dataTable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 5px; /* Bottom-right corner */
}
.length_selection .dataTables_length
{
    margin-top:2%;
}
.dataTables_wrapper .dataTables_filter input
{
    border: 1px solid lightgrey;
    border-radius: 5px;
}
.dataTable  thead tr th{
    font-size: 0.9em;
    font-weight: normal;
}
.feedback--wrapper h1 {
    font-size: 26px;
}
.dataTables_wrapper .dataTables_filter label 
{
    font-weight: normal;
    font-size: 0.8em;
}
table.dataTable.no-footer
{
    border-bottom: none;
}