﻿      .iconset {    position: absolute;
    top: -8px;
    right: 0px;
    z-index: 999;
    cursor:pointer;
    background: #fff;
    border: solid thin #ccc;
    border-radius: 10px;
    padding: 3px;
        }
        .iconset:hover{background:#96598a; color:#fff;
        }
        .imgbg { position:relative;margin-right:5px;
        }
            .imgbg img {cursor:pointer;
            }

.imgbg p{     max-width: 100px;
    overflow: hidden;
    display: inline-block;
    font-size: 12px;
    text-align: center;
    color: #96598a;
    text-overflow: ellipsis;
	white-space: nowrap;
}
            /*datepicker*/
.datepicker{
    padding:16px 25px;
    border-radius:2px;
    font-size:12px
}
.datepicker:after{
    border-bottom-color:#fafafa
}
.datepicker thead tr .datepicker-switch{
    color:#6f7b8a;
    font-size:13px
}
.datepicker thead tr .next,.datepicker thead tr .prev{
    color:#18AACC;
    content:'';
    font-size:0
}
.datepicker thead tr .next:before,.datepicker thead tr .prev:before{
    color:#6d5cae;
    font-family:fontawesome;
    font-size:10px
}
.datepicker thead tr .prev:before{
    content:"\f053"
}
.datepicker thead tr .next:before{
    content:"\f054"
}
.datepicker thead tr .dow, .ui-datepicker-calendar thead tr th{
    font-family:montserrat;
    color:#18AACC !important;
    text-transform:uppercase;
    font-size:11px
}

.ui-datepicker{ z-index:999 !important;}

.ui-datepicker-calendar tr td a{    text-align: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 4px !important;
    border: 0 !important; line-height:26px;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active
{ border:none !important; background:none !important;}

.ui-datepicker td span, .ui-datepicker td a{ text-align:center !important; font-size:13px;}
.ui-widget.ui-widget-content{width: auto !important;    border: 1px solid rgba(0,0,0,.2);
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;}
    /*.ui-datepicker-month, .ui-datepicker-year{*/    
    color: #6f7b8a;}
    .ui-widget-header{ border:none !important; background:none !important;}
    .ui-datepicker-calendar tr td:hover{background: #eee !important;border-radius: 5px;
    cursor: pointer;}
    .ui-priority-secondary, .ui-widget-content .ui-priority-secondary{ opacity:1 !important; color:#999 !important; }
    .ui-state-active, .ui-widget-content .ui-state-active{background:#18aacc !important; font-weight:bold !important; color:#fff !important;}
    .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
    background: #ffdb99 !important;
    color: #333 !important;}
    

.datepicker thead tr th{
    width:31px;
    height:29px
}
.datepicker tbody tr .odd{
    color:#d0d3d8
}
.datepicker table tr td{
    width:31px;
    height:29px
}
.datepicker table tr td.old,.datepicker table tr td.new{
    color:#e6e6e6
}
.datepicker table tr td.day:hover{
    background:#f0f0f0
}
.datepicker table tr td.active{
    background-color:#6d5cae!important
}
.datepicker table tr td.active,.datepicker table tr td.active:hover,.datepicker table tr td.active.disabled,.datepicker table tr td.active.disabled:hover{
    background-image:none;
    text-shadow:none;
    font-weight:600
}
.datepicker table tr td.today,.datepicker table tr td.today:hover,.datepicker table tr td.today.disabled,.datepicker table tr td.today.disabled:hover{
    background-color:#18AACC;
    background-image:none;
    color:#fff
}
.datepicker table tr td span{
    border-radius:4px;
    width:42px;
    height:42px;
    line-height:42px
}
.datepicker table tr td span.active{
    background-color:#18AACC!important
}
.datepicker table tr td span.active,.datepicker table tr td span.active:hover,.datepicker table tr td span.active.disabled,.datepicker table tr td span.active.disabled:hover{
    background-image:none;
    border:0;
    text-shadow:none
}
.datepicker.dropdown-menu{
    border-color:#e6e6e6;
    color:#626262
}
.datepicker.datepicker-dropdown.datepicker-orient-bottom:before{
    border-color:#e6e6e6
}
.datepicker-inline{
    width:auto
}
.select2-container {width:100% !important;
}
.select2-container .select2-selection--single {height: 34px; border: 1px solid #ced4da;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {top:4px;
}
body { overflow-x:hidden;
}
.select2-container--default .select2-results > .select2-results__options {max-height: 165px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #96598a;
  color:#fff;
}
#txtDescription {height: 138px;
}
.textareaFeedback {font-weight: bold;
    color: #96598a;
}
#ShowHeaderImages {min-height: 133px;
}
.alert {margin-top: 3px;
    line-height: 17px;
}

.pasteimgbg {
}
.img-responsive {
    width: 100%;
}
.pidDataSelect label {display:block;
}

.pidDataSelect label a{color:#96598a;
}
tfoot {background: #e4e4e4;
}

.bc1 {
    background-color: rgba(0,133,120,0.75);color: #fff;
    padding: 4px;
    border-radius: 5px;
}

#mdlFeedback h2 {    font-size: 20px;
    line-height: 27px;
    font-weight: bold;color: #654f97;    margin-bottom: 20px;
}
#mdlFeedback .col-md-5 {background: #f6f4f9; padding:15px;    
}
#mdlFeedback .modal-body {padding:0px; overflow:hidden;
}
#mdlFeedback .close {position: absolute;
    right: 8px;
    top: 5px;
    z-index: 999;

}
#mdlFeedback p {    color: #837696;    margin-bottom: 20px; line-height:24px;
}
#mdlFeedback .col-md-7 { padding:15px;    
}
.mlr15 {margin:0px 15px;
}
#mdlFeedback label {    font-size: 14px;
    color: #654f97;
    margin-bottom: 10px;
}
* {
  box-sizing: border-box;
}



.rating {
  display: flex;
  width: 100%;
  justify-content: center;
  overflow: hidden;
  flex-direction: row-reverse;
  height: 150px;
  position: relative;
}

.rating-0 {
  filter: grayscale(100%);
}

.rating > input {
  display: none;
}

.rating > label {
  cursor: pointer;
  width: 40px;
  height: 40px;
  margin-top: auto;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 76%;
  transition: 0.3s;
}

.rating > input:checked ~ label,
.rating > input:checked ~ label ~ label {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}

.rating > input:not(:checked) ~ label:hover,
.rating > input:not(:checked) ~ label:hover ~ label {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23d8b11e' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}

.emoji-wrapper {
  width: 100%;
  text-align: center;
  height: 100px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.emoji-wrapper:before,
.emoji-wrapper:after {
  content: "";
  height: 15px;
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 1;
}

.emoji-wrapper:before {
  top: 0;
  background: linear-gradient(to bottom, white 0%, white 35%, rgba(255, 255, 255, 0) 100%);
}

.emoji-wrapper:after {
  bottom: 0;
  background: linear-gradient(to top, white 0%, white 35%, rgba(255, 255, 255, 0) 100%);
}

.emoji {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.3s;
}

.emoji > svg {
  margin: 15px 0;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

#rating-1:checked ~ .emoji-wrapper > .emoji {
  transform: translateY(-100px);
}

#rating-2:checked ~ .emoji-wrapper > .emoji {
  transform: translateY(-200px);
}

#rating-3:checked ~ .emoji-wrapper > .emoji {
  transform: translateY(-300px);
}

#rating-4:checked ~ .emoji-wrapper > .emoji {
  transform: translateY(-400px);
}

#rating-5:checked ~ .emoji-wrapper > .emoji {
  transform: translateY(-500px);
}

.feedback {
  max-width: 320px;
  background-color: #fff;
  width: 100%;
  padding: 30px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}