/*
transition:all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-ms-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;-webkit-transition:all 0.5s ease 0s;
*/
/* You can add global styles to this file, and also import other style files */
@import './theme';

@font-face {
  font-family: 'Montserrat-Bold';
  src: url('../assets/fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/Montserrat-Bold.woff') format('woff'), url('../assets/fonts/Montserrat-Bold.ttf') format('truetype'), url('../assets/fonts/Montserrat-Bold.svg#Montserrat-Bold') format('svg');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat-SemiBold';
  src: url('../assets/fonts/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/Montserrat-SemiBold.woff') format('woff'), url('../assets/fonts/Montserrat-SemiBold.ttf') format('truetype'), url('../assets/fonts/Montserrat-SemiBold.svg#Montserrat-SemiBold') format('svg');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat-Medium';
  src: url('../assets/fonts/Montserrat-Medium.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/Montserrat-Medium.woff') format('woff'), url('../assets/fonts/Montserrat-Medium.ttf') format('truetype'), url('../assets/fonts/Montserrat-Medium.svg#Montserrat-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat-Regular';
  src: url('../assets/fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/Montserrat-Regular.woff') format('woff'), url('../assets/fonts/Montserrat-Regular.ttf') format('truetype'), url('../assets/fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat-Black';
  src: url('../assets/fonts/Montserrat-Black.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/Montserrat-Black.woff') format('woff'), url('../assets/fonts/Montserrat-Black.ttf') format('truetype'), url('../assets/fonts/Montserrat-Black.svg#Montserrat-Black') format('svg');
  font-weight: 900;
  font-style: normal;
}

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  font-size: @body-font-size;
  color: @body-fore-color;
  font-family: @body-font-family  !important;
  line-height: 1.5;
  background-color: @body-back-color;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  font-weight: normal !important;
  letter-spacing: 0.15px;
}

// .public-page-body {
//     text-align: center;
// }

xap-root,
xap-dashboard-layout {
  height: 100%;
  display: block;
}

// .ant-layout {height: 100%;}
th {
  font-weight: normal;
}

.row,
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
  margin: 0;
  padding: 0
}

.default {
  color: @default-color
}

.default-hover-color {
  background-color: @default-hover-color;
}

.in-active-row-color {
  background-color: @row-hover-color  !important;
}

.default-color-dark {
  color: @default-color-dark;
}

.primary {
  color: @primary-color  !important;
}

.primary .dx-checkbox-text {
  color: @primary-color  !important;
}

.primary-fore-color {
  color: @primary-fore-color;
}

.fore-color {
  color: @body-fore-color
}

.success {
  color: @success-color  !important;
}

.row-selected-color {
  color: @row-selected-color  !important;
}

.row-selected-back-color {
  background-color: @row-selected-color  !important;
}

.card-shadow {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.tab-border-shadow {
  box-shadow: @tab-border-shadow;
  -webkit-box-shadow: @tab-border-shadow;
  -o-box-shadow: @tab-border-shadow;
  -ms-box-shadow: @tab-border-shadow;
  -moz-box-shadow: @tab-border-shadow;
}

.white_box_shadow,
.only-block-content-no-grid .content-wrapper {
  border-radius: 4px;
  position: relative;
  border: 0 !important;
}

.white_box_shadow:before,
.only-block-content-no-grid .content-wrapper:before {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px !important;
  position: absolute;
  overflow: hidden;
  border: 0 !important;
  content: "";
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.width50.padding_right5.white_box_shadow:before {
  right: 5px;
}

.width50.padding_left5.white_box_shadow:before {
  left: 5px;
}

.white_box_shadow .white_box_title {
  color: @body-fore-color;
  font-family: @semi-bold-font-family;
  font-size: 14px;
  letter-spacing: 0.15px;
  line-height: 16px;
  padding-bottom: 2px !important;
  padding-top: 2px !important;
  padding-left: 10px;
  padding-right: 10px;
}

.only-block-content-no-grid .content-wrapper .content-wrapper:before {
  display: none
}

.in-active-row-color .dx-widget:hover,
.in-active-row-color .dx-widget input:hover,
.in-active-row-color .dx-widget textarea:hover,
.in-active-row-color .dx-checkbox.dx-state-hover .dx-checkbox-icon {
  border-color: @primary-hover-bubble-control-color  !important;
}

// sandip: don't remove below commented code
// .in-active-row-color .dx-datagrid-checkbox-size { opacity: 0.5; }
// .in-active-row-color .dx-checkbox-icon { border: 2px solid @body-fore-color-opacity2 !important; background: @primary-hover-bubble-control-color !important; opacity: 0.4 !important;}
// .in-active-row-color .dx-checkbox-checked .dx-checkbox-icon { border-color:@body-fore-color-opacity2 !important;background: @primary-hover-bubble-control-color !important; opacity: 0.4 !important;}

ul li,
ol li {
  list-style: none;
}

ul {
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-weight: normal;
  color: @body-fore-color;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 30px;
  line-height: 40px;
}

a {
  text-decoration: none !important;
  color: @primary-color;
}

a:hover {
  text-decoration: none;
}

a:hover,
a:focus,
a.active {
  outline: none;
}

a:active,
a:hover {
  color: @primary-color  !important;
}

.validation-icon {
  display: contents;
  color: @body-fore-color;
  font-family: @semi-bold-font-family;
  font-size: 11px;
  letter-spacing: 0.15px;
  line-height: 11px;
}

.cf:after {
  clear: both;
  display: block;
  content: "";
}

input:focus {
  box-shadow: none;
  outline: none;
}

.body-container {
  max-width: 1237px;
  margin: 0 auto;
  padding: 0 15px;
}

.body-back-color,
.ant-layout {
  background-color: transparent !important;
}

input[type=text]::-ms-clear {
  display: none;
}

.right {
  float: right !important;
}

.left {
  float: left !important;
}

.float-none {
  float: none !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text_decoration_line_through {
  text-decoration: line-through !important;
}

.dotted-border {
  border-style: dotted !important;
}

.max-height20px {
  max-height: 20px !important;
}

.max-width100 {
  max-width: 100% !important;
}

.max-width100Minus40 {
  max-width: calc(100% - 40px) !important;
}

.max-width150px {
  max-width: 150px !important;
}

.max-width200px {
  max-width: 200px !important;
}

.max-width300px {
  max-width: 300px !important;
}

.width-auto {
  width: auto !important;
}

.width25 {
  width: 25% !important;
}

.width15 {
  width: 15% !important;
}

.width20 {
  width: 20% !important;
}

.width30 {
  width: 30% !important;
}

.width33 {
  width: 33.33% !important;
}

.width33-5px {
  width: calc(33.33% - 5px) !important;
}

.width40 {
  width: 40% !important;
}

.width50 {
  width: 50% !important;
}

.width50-5px {
  width: calc(50% - 5px) !important;
}

.width50-10px {
  width: calc(50% - 10px) !important;
}

.width50-15px {
  width: calc(50% - 15px) !important;
}

.width50-20px {
  width: calc(50% - 20px) !important;
}

.width50-25px {
  width: calc(50% - 25px) !important;
}

.width50-30px {
  width: calc(50% - 30px) !important;
}

.width60 {
  width: 60% !important;
}

.width66 {
  width: 66.66% !important;
}

.width66-5px {
  width: calc(66.66% - 5px) !important;
}

.width70 {
  width: 70% !important;
}

.width75 {
  width: 75% !important;
}

.width80 {
  width: 80% !important;
}

.width87 {
  width: 87.4% !important;
}

.width100 {
  width: 100% !important;
}

.width100-30px {
  width: calc(100% - 30px) !important;
}

.width100-40px {
  width: calc(100% - 40px) !important;
}

.width100-50px {
  width: calc(100% - 50px) !important;
}

.width100-65px {
  width: calc(100% - 65px) !important;
}

.width100-100px {
  width: calc(100% - 100px) !important;
}

.width100-150px {
  width: calc(100% - 150px) !important;
}

.width30px {
  width: 30px !important;
}

.width40px {
  width: 40px !important;
}

.width50px {
  width: 50px !important;
}

.width60px {
  width: 60px !important;
}

.width65px {
  width: 65px !important;
}

.width75px {
  width: 75px !important;
}

.width70px {
  width: 70px !important;
}

.width80px {
  width: 80px !important;
}

.width85px {
  width: 85px !important;
}

.width90px {
  width: 90px !important;
}

.width95px {
  width: 95px !important;
}

.width100px {
  width: 100px !important;
}

.width110px {
  width: 110px !important;
}

.width115px {
  width: 115px !important;
}

.width120px {
  width: 120px !important;
}

.width130px {
  width: 130px !important;
}

.width145px {
  width: 145px !important;
}

.width150px {
  width: 150px !important;
}

.width165px {
  width: 165px !important;
}

.width170px {
  width: 170px !important;
}

.width180px {
  width: 180px !important;
}

.width190px {
  width: 190px !important;
}

.width195px {
  width: 195px !important;
}

.width200px {
  width: 200px !important;
}

.width210px {
  width: 210px !important;
}

.width250px {
  width: 250px !important;
}

.width275px {
  width: 275px !important;
}

.width300px {
  width: 300px !important;
}

.width325px {
  width: 325px !important;
}

.width390px {
  width: 390px !important;
}

.width440px {
  width: 440px !important;
}

.width450px {
  width: 450px !important;
}

.width490px {
  width: 490px !important;
}

.width500px {
  width: 500px !important;
}

.width600px {
  width: 600px !important;
}

.width640px {
  width: 640px !important;
}

.width700px {
  width: 700px !important;
}

.width760px {
  width: 760px !important;
}

.width790px {
  width: 790px !important;
}

.width762px {
  width: 762px !important;
}

.width805px {
  width: 805px !important;
}

.width100-100px {
  width: calc(100% - 100px) !important;
}

.width100-110px {
  width: calc(100% - 110px) !important;
}

.standard-field-box-width {
  width: 398px !important;
}

.height100 {
  height: 100% !important;
}

.height20px {
  height: 20px !important;
}

.height25px {
  height: 25px !important;
}

.height30px {
  height: 30px !important;
}

.height40px {
  height: 40px !important;
}

.height45px {
  height: 45px !important;
}

.height80px {
  height: 80px !important;
}

.height100px {
  height: 100px !important;
}

.height200px {
  height: 200px !important;
}

.height300px {
  height: 300px !important;
}

.min-hight29px {
  min-height: 29px !important;
}

.padding5px {
  padding: 5px;
}

.letter-spacing-minus2 {
  letter-spacing: -0.2px;
}

.bold-label {
  padding-bottom: 20px;
  width: 100%;
  float: left;
  font-family: @semi-bold-font-family  !important;
}

.bold-label_padding_top {
  padding-left: 20px;
  padding-top: 20px;
  width: 100%;
  float: left;
  font-family: @semi-bold-font-family  !important;
}

.bold-font {
  font-family: @semi-bold-font-family  !important;
  font-weight: normal;
}

.bold-sub-title-wrapper {
  padding-bottom: 20px;
}

.italic-font {
  font-style: italic !important;
}

.body-font-size {
  font-size: @body-font-size
}

.body-font-family {
  font-family: @body-font-family;
  font-weight: normal;
}

.semi-bold-font-family {
  font-family: @semi-bold-font-family;
  font-weight: normal;
}

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-none {
  cursor: not-allowed !important;
}

.cursor-default {
  cursor: default !important
}

.no-border,
.border0 {
  border: 0 !important;
}

.border_top0 {
  border-top: 0 !important;
}

.border-top0_5 {
  border-top: 0.5px solid @control-border-color  !important;
}

.border-top1 {
  border-top: 1px solid @control-border-color  !important;
}

.border_bottom1 {
  border-bottom: 1px solid @control-border-color  !important;
}

.border-color-flat {
  border-color: @flat-hover-color  !important;
}

.border-radius4 {
  border-radius: 4px !important;
}

.border-radius8 {
  border-radius: 8px !important;
}

.border-radius10 {
  border-radius: 10px !important;
}

.border-radius16 {
  border-radius: 16px !important;
}

.border-radius20 {
  border-radius: 20px !important;
}

.hide {
  display: none;
}

.visibility-hidden {
  visibility: hidden;
}

.min-height-auto {
  min-height: auto;
}

.color-transparent {
  color: transparent !important;
}

.color3 {
  color: @body-fore-color-opacity3  !important;
}

.color4 {
  color: @body-fore-color-opacity4  !important;
}

.color5 {
  color: @body-fore-color-opacity5  !important;
}

.color6 {
  color: @body-fore-color-opacity6  !important;
}

.color8 {
  color: @body-fore-color-opacity8  !important;
}

.color9 {
  color: @body-fore-color-opacity9  !important;
}

.green {
  color: @success-color  !important;
}

.gray {
  color: @default-color  !important;
}

.orange {
  color: @orange-color  !important;
}

.red {
  color: @red-color  !important;
}

.white {
  color: @content-back-color  !important;
}

.white-fill-color {
  fill: @content-back-color  !important;
}

.back-color-primary-selected-color {
  background-color: @primary-selected-color  !important;
}

.back-color-transparent {
  background-color: transparent !important;
}

.back-color-white {
  background-color: #ffffff !important;
}

.back-color-f2f3ff {
  background-color: #f2f3ff !important;
}

.back-color-e9faf5 {
  background-color: #e9faf5 !important;
}

.back-color-fff0f0 {
  background-color: #fff0f0 !important;
}

.back-color-f1f9ff {
  background-color: #f1f9ff !important;
}

.back-color-FFF1F9 {
  background-color: #FFF1F9 !important;
}

.back-color-f8f8f8 {
  background-color: #f8f8f8 !important;
}

.btn-block {
  width: 100% !important;
}

.text_align_center {
  text-align: center !important;
}

.text_align_right {
  text-align: right !important;
}

.font-size0 {
  font-size: 0px !important;
}

.font-size8 {
  font-size: 8px !important;
}

.font-size9 {
  font-size: 9px !important;
}

.font-size10 {
  font-size: 10px !important;
}

.font-size11 {
  font-size: 11px !important;
}

.font-size12 {
  font-size: 12px !important;
}

.font-size14 {
  font-size: 14px !important;
}

.font-size15 {
  font-size: 15px !important;
}

.font-size16 {
  font-size: 16px !important;
}

.font-size18 {
  font-size: 18px !important;
}

.font-size20 {
  font-size: 20px !important;
}

.font-size22 {
  font-size: 22px !important;
}

.font-size24 {
  font-size: 24px !important;
}

.left0 {
  left: 0px !important;
}

.top3 {
  top: 3px !important;
}

.margin0_auto {
  margin: 0 auto !important;
}

.margin0 {
  margin: 0 !important;
}

.margin5 {
  margin: 5px !important;
}

.margin_left0 {
  margin-left: 0px !important;
}

.margin_left2 {
  margin-left: 2px !important;
}

.margin_left5 {
  margin-left: 5px !important;
}

.margin_left10 {
  margin-left: 10px !important;
}

.margin_left15 {
  margin-left: 15px !important;
}

.margin_left20 {
  margin-left: 20px !important;
}

.margin_left-10 {
  margin-left: -10px !important;
}

.margin_left-20 {
  margin-left: -20px !important;
}

.margin_left100 {
  margin-left: 100px !important;
}

.margin_left_right_auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.margin_top0 {
  margin-top: 0px !important;
}

.margin_top2 {
  margin-top: 2px !important;
}

.margin_top3 {
  margin-top: 3px !important;
}

.margin_top5 {
  margin-top: 5px !important;
}

.margin_top6 {
  margin-top: 6px !important;
}

.margin_top8 {
  margin-top: 8px !important;
}

.margin_top10 {
  margin-top: 10px !important;
}

.margin_top-10 {
  margin-top: -10px !important;
}

.margin_top15 {
  margin-top: 15px !important;
}

.margin_top18 {
  margin-top: 18px !important;
}

.margin_top19 {
  margin-top: 19px !important;
}

.margin_top20 {
  margin-top: 20px !important;
}

.margin_top25 {
  margin-top: 25px !important;
}

.margin_top30 {
  margin-top: 30px !important;
}

.margin_top40 {
  margin-top: 40px !important;
}

.margin_top50 {
  margin-top: 50px !important;
}

.margin_top55 {
  margin-top: 55px !important;
}

.margin_right0 {
  margin-right: 0px !important;
}

.margin_right5 {
  margin-right: 5px !important;
}

.margin_right10 {
  margin-right: 10px !important;
}

.margin_right20 {
  margin-right: 20px !important;
}

.margin_right30 {
  margin-right: 30px;
}

.margin_right55 {
  margin-right: 55px;
}

.margin_right85 {
  margin-right: 85px;
}

.margin_right95 {
  margin-right: 95px;
}

.margin_bottom0 {
  margin-bottom: 0px !important;
}

.margin_bottom3 {
  margin-bottom: 3px !important;
}

.margin_bottom4 {
  margin-bottom: 4px !important;
}

.margin_bottom5 {
  margin-bottom: 5px !important;
}

.margin_bottom10 {
  margin-bottom: 10px !important;
}

.margin_bottom15 {
  margin-bottom: 15px !important;
}

.margin_bottom20 {
  margin-bottom: 20px !important;
}

.margin_bottom30 {
  margin-bottom: 30px !important;
}

.margin_bottom40 {
  margin-bottom: 40px !important;
}

.margin_bottom55 {
  margin-bottom: 55px !important;
}

.margin_bottom60 {
  margin-bottom: 60px !important;
}

.no-top-margin .margin_top20 {
  margin-top: 0px !important;
}

.padding_0 {
  padding: 0px !important;
}

.padding_5 {
  padding: 5px !important;
}

.padding_10 {
  padding: 10px !important;
}

.padding_15 {
  padding: 15px !important;
}

.padding_20 {
  padding: 20px !important;
}

.padding_30 {
  padding: 30px !important;
}

.padding_y5 {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.padding_y10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.padding_y15 {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.padding_y25 {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

.padding_y30 {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.padding_x5 {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.padding_x10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.padding_x15 {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.padding_x20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.padding_left_right10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.padding_top0 {
  padding-top: 0px !important;
}

.padding_top1 {
  padding-top: 1px !important;
}

.padding_top2 {
  padding-top: 2px !important;
}

.padding_top4 {
  padding-top: 4px !important;
}

.padding_top3 {
  padding-top: 3px !important;
}

.padding_top5 {
  padding-top: 5px !important;
}

.padding_top7 {
  padding-top: 7px !important;
}

.padding_top8 {
  padding-top: 8px !important;
}

.padding_top10 {
  padding-top: 10px !important;
}

.padding_top15 {
  padding-top: 15px !important;
}

.padding_top18 {
  padding-top: 18px !important;
}

.padding_top20 {
  padding-top: 20px !important;
}

.padding_top25 {
  padding-top: 25px !important;
}

.padding_top30 {
  padding-top: 30px !important;
}

.padding_top35 {
  padding-top: 35px !important;
}

.padding_top40 {
  padding-top: 40px !important;
}

.padding_top50 {
  padding-top: 50px !important;
}

.padding_right0 {
  padding-right: 0px !important;
}

.padding_right3 {
  padding-right: 3px !important;
}

.padding_right5 {
  padding-right: 5px !important;
}

.padding_right10 {
  padding-right: 10px !important;
}

.padding_right15 {
  padding-right: 15px !important;
}

.padding_right20 {
  padding-right: 20px !important;
}

.padding_right25 {
  padding-right: 25px !important;
}

.padding_right30 {
  padding-right: 30px !important;
}

.padding_right40 {
  padding-right: 40px !important;
}

.padding_left0 {
  padding-left: 0px !important;
}

.padding_left4 {
  padding-left: 4px !important;
}

.padding_left5 {
  padding-left: 5px !important;
}

.padding_left7 {
  padding-left: 7px !important;
}

.padding_left10 {
  padding-left: 10px !important;
}

.padding_left12 {
  padding-left: 12px !important;
}

.padding_left15 {
  padding-left: 15px !important;
}

.padding_left20 {
  padding-left: 20px !important;
}

.padding_left25 {
  padding-left: 25px !important;
}

.padding_left30 {
  padding-left: 30px !important;
}

.padding_left40 {
  padding-left: 40px !important;
}

.padding_bottom0 {
  padding-bottom: 0px !important;
}

.padding_bottom2 {
  padding-bottom: 2px !important;
}

.padding_bottom3 {
  padding-bottom: 3px !important
}

.padding_bottom5 {
  padding-bottom: 5px !important
}

.padding_bottom4 {
  padding-bottom: 4px !important
}

.padding_bottom8 {
  padding-bottom: 8px !important
}

.padding_bottom10 {
  padding-bottom: 10px !important
}

.padding_bottom15 {
  padding-bottom: 15px !important
}

.padding_bottom20 {
  padding-bottom: 20px !important
}

.padding_bottom30 {
  padding-bottom: 30px !important
}

.padding_bottom50 {
  padding-bottom: 50px !important
}

.no-top-padding .padding_top20 {
  padding-top: 0px !important;
}

.line-height_normal {
  line-height: normal !important;
}

.line-height0 {
  line-height: 0 !important;
}

.line-height1 {
  line-height: 1 !important;
}

.line-height10 {
  line-height: 10px !important;
}

.line-height15 {
  line-height: 15px !important;
}

.line-height16 {
  line-height: 16px !important;
}

.line-height18 {
  line-height: 18px !important;
}

.line-height20 {
  line-height: 20px !important;
}

.line-height25 {
  line-height: 25px !important;
}

.line-height24 {
  line-height: 24px !important;
}

.line-height26 {
  line-height: 26px !important;
}

.line-height30 {
  line-height: 30px !important;
}

.line-height35 {
  line-height: 35px !important;
}

.font-family-semi-bold {
  font-family: @semi-bold-font-family  !important;
}

.font-family-bold {
  font-family: @bold-font-family  !important;
}

.font-family-medium {
  font-family: @medium-font-family  !important;
}

.border_top {
  border-top: 1px solid @dark-border-color
}

.border_bottom {
  border-bottom: 1px solid @dark-border-color  !important;
}

.border_left {
  border-left: 1px solid @dark-border-color
}

.border1 {
  border-width: 1px !important
}

.control-border {
  border: 1px solid @control-border-color  !important
}

.dark-border {
  border: 1px solid @control-border-color  !important
}

.content-card {
  display: block;
  padding: 10px;
  min-height: calc(100vh - 140px);
  margin: 15px;
  .card-shadow();
}

.content-wrapper {
  float: left;
  width: 100%;
  border: 1px solid @grid-border-color;
  border-radius: 1px;
}

.header-title-wrapper {
  padding: 15px 19px 14px;
  border-radius: 0 1px 1px 0;
  background-color: @header-fore-color;
  width: 100%;
  display: block;
}

.header-title-wrapper .page-title {
  margin-bottom: 0;
  line-height: 1.2;
  font-size: 18px;
  color: @body-fore-color;
  font-family: @body-font-family;
}

.absolute {
  position: absolute !important;
}

.grid-display-none {
  display: none !important;
}

.display-inline-block {
  display: inline-block !important;
}

.display-block {
  display: block !important;
}

.display-inline-flex {
  display: inline-flex !important;
}

.display-flex {
  display: flex !important;
}

.display-grid {
  display: grid !important;
}

.display-grid-column-auto {
  display: grid !important;
  grid-auto-flow: column;
}
.display-grid-column-1 {
  display: grid;
  grid-template-columns: 1fr;
}
.display-grid-column-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.display-grid-column-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.display-grid-column-7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.display-grid-gap-5 {
  grid-gap: 5px;
}
.display-grid-gap-10 {
  grid-gap: 10px;
}

.display-none {
  display: none !important;
}

.display-contents {
  display: contents !important
}

.display-table {
  display: table !important;
}

.display-table-cell {
  display: table-cell !important;
  vertical-align: middle;
}

.display-inline-table {
  display: inline-table !important;
}

.custom-circle-icon {
  border: 1px solid @primary-color;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background-color: @primary-color;
  color: @content-back-color;
  line-height: 25px;
}

.disable-content {
  pointer-events: none;
  opacity: 0.7; // previous it is 0.4
}

.disable-content .action-icon {
  pointer-events: none !important;
}

.block-shadow {
  box-shadow: inset 0 -1px 0 @default-border-color;
}

.bg-white {
  background-color: @content-back-color;
  border-radius: 4px;
}

.last-list-item {
  border-top: 1px solid @control-border-color;
}

.btn.focus,
.btn:focus {
  box-shadow: none !important;
}

.text_uppercase {
  text-transform: uppercase !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-align-right {
  text-align: right;
}

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

.clearBoth {
  clear: both;
}

.clearRight {
  clear: right;
}

.no-bg-color {
  background-color: transparent !important;
}

.no-opacity {
  opacity: 1 !important;
}

.no-hover-color:hover {
  color: initial !important;
}

.no-hover-color.color6:hover {
  color: @body-fore-color-opacity6  !important;
}

.z-index8 {
  z-index: 8 !important;
}

.opacity0 {
  opacity: 0 !important;
}

.opacity3 {
  opacity: 0.3 !important;
}

.opacity4 {
  opacity: 0.4 !important;
}

.opacity6 {
  opacity: 0.6 !important;
}

.opacity8 {
  opacity: 0.8 !important;
}

.vertical-middle-display-table-cell {
  vertical-align: middle;
  height: 100%;
  display: table-cell;
  float: none;
  width: 100%;
}

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

.vertical-top {
  vertical-align: top;
}

.vertical-text-bottom {
  vertical-align: text-bottom;
}

// give height in div check reference in guardian dashboatf
.vertical-centre-horizontal-centre-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vertical-centre-horizontal-left-flex {
  display: flex;
  justify-content: left;
  align-items: center;
}

.control-value {
  font-size: 12px !important;
  font-family: @medium-font-family  !important;
  word-break: break-word
}

.control-value-smalltext {
  font-size: 10px;
  line-height: 15px;
}

.rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.rotate180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rotate270 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.rotate290 {
  -webkit-transform: rotate(290deg);
  -moz-transform: rotate(290deg);
  -o-transform: rotate(290deg);
  -ms-transform: rotate(290deg);
  transform: rotate(290deg);
}

.label-text {
  width: 100%;
  float: left;
  padding-bottom: 5px;
  color: @body-fore-color-opacity6;
  font-family: @medium-font-family;
  font-size: 10px;
  letter-spacing: 0.15px;
  line-height: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  white-space: pre;
}

.value-text {
  width: 100%;
  float: left;
  padding-bottom: 20px;
  color: @body-fore-color-opacity9;
  font-family: @medium-font-family;
  font-size: 12px;
  letter-spacing: 0.05px;
  line-height: 16px;
  word-break: break-word;
}

.character-count-wrapper {
  font-size: 10px;
  float: right;
  padding-top: 5px
}

.white-space-inherit {
  white-space: inherit !important;
}

.white-space-normal {
  white-space: normal !important;
}

.white-space-pre-wrap {
  white-space: pre-wrap !important;
  line-height: initial;
}

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

.dx-tag {
  max-width: none !important;
}

.menu-close-icon {
  display: inherit;
  top: 2px;
  position: relative;
  max-height: 15px
}

.full-height {
  height: calc(100vh - 143px);
}

.dropdown-texteditor-input-padding_right25 .dx-texteditor-input {
  padding-right: 0px;
}

.left-pane-back-color {
  background-color: @left-pane-color
}

.default-role {
  margin-left: 10px !important;
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: url(images/dafult-user-role-icon.png) no-repeat;
  width: 14px;
  height: 11px;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.card_body_padding_top0 .ant-card-body {
  padding-top: 0px !important;
}

.control-label.bold-font {
  .bold-font();
}

.infoIcon.with-form-label {
  padding-top: 1px;
  font-size: 12px;
}

.crisp-client #crisp-chatbox .crisp-kquevr,
.crisp-client #crisp-chatbox .cc-unoo {
  display: none !important;
}

.sub-container .multiple-item-field-box {
  padding-left: 15px;
  padding-right: 25px;
}

.add-multiple-item-wrapper {
  float: right;
  padding-bottom: 0px;
}

.add-multiple-item-wrapper .btn {
  width: 30px;
  height: 30px;
  position: relative;
}

.add-multiple-item-wrapper .btn svg {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.add-multiple-item-wrapper .btn.red {
  background: @default-grayout-color  !important;
  border: 0 !important;
}

.add-multiple-item-wrapper .btn.primary svg path {
  fill: @primary-color
}

.add-multiple-item-wrapper .btn.red svg path {
  fill: @red-color
}

.add-multiple-item-wrapper .btn.red svg {
  transform: translateY(-50%) rotate(45deg);
  -moz-transform: translateY(-50%) rotate(45deg);
  -ms-transform: translateY(-50%) rotate(45deg);
  -o-transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
}

.add-multiple-item-wrapper .btn.dx-state-hover {
  background-color: transparent;
  border-color: @default-grayout-color  !important;
}

.add-multiple-item-wrapper .btn .dx-button-content {
  padding: 0 !important;
}

.add-multiple-item-conatiner {
  width: 40px;
  float: right;
}

.add-multiple-item-previous-control-wrapper {
  width: calc(100% - 40px) !important;
  float: left;
}

.days-selection-wrapper .dx-checkbox.dx-state-disabled {
  background-color: @default-grayout-color
}

.days-display-table .days-selection-wrapper .checkbox-group {
  display: table !important;
}

.days-display-table .days-selection-wrapper .checkbox-group .dx-checkbox {
  padding: 0 5px;
}

.multiple-item-bg-white-wrapper .label-text-wrapper {
  width: calc(100% - 40px);
  height: 30px;
  line-height: 30px;
}

.action-icon {
  cursor: pointer;
  pointer-events: initial !important;
  font-style: normal;
}

.action-icon svg {
  display: inline-block;
  vertical-align: middle
}

.action-icon svg g {
  opacity: 1;
}

.action-icon svg path {
  fill: @body-fore-color-opacity3;
}

.action-icon.stroke svg path {
  fill: transparent;
  stroke: @body-fore-color-opacity3;
}

.action-icon.stroke svg circle {
  stroke: @body-fore-color-opacity3;
}

.action-icon.stroke svg text {
  fill: @body-fore-color-opacity3;
}

.action-icon.primary svg path,
.action-icon.primary:hover svg path,
.action-icon.primary svg g {
  fill: @primary-color;
}

.action-icon.white svg path,
.action-icon.white:hover svg path,
.action-icon.white svg g {
  fill: @white-color;
}

.action-icon.stroke.white svg path,
.action-icon.stroke.white:hover svg path,
.action-icon.stroke.white svg g,
.action-icon.stroke.white svg g polyline {
  fill: transparent;
  stroke: @white-color;
}

.action-icon.stroke.color6 svg path,
.action-icon.stroke.color6:hover svg path,
.action-icon.stroke.color6 svg g,
.action-icon.stroke.color6 svg g polyline {
  fill: transparent;
  stroke: @body-fore-color-opacity6;
}

.action-icon.disabled,
.action-icon.read-only-icon {
  cursor: default;
}

.action-icon:hover svg g {
  opacity: 1;
}

.action-icon:hover svg path {
  fill: @primary-color;
  opacity: 1;
  fill-opacity: 1
}

.action-icon.black svg path {
  fill: #000;
}

.action-icon.color6 svg path {
  fill: @body-fore-color-opacity6;
}

.action-icon.color6:hover svg path {
  fill: @primary-color;
}

.action-icon.color3 svg path {
  fill: @body-fore-color-opacity3;
}

.action-icon.color3:hover svg path {
  fill: @primary-color;
}

.action-icon.success svg path,
.action-icon.success:hover svg path {
  fill: @success-color;
}

.action-icon.red svg path,
.action-icon.red:hover svg path {
  fill: @red-color;
}

.action-icon.red.stroke svg circle {
  stroke: @red-color;
}

.action-icon.red.stroke svg text {
  fill: @red-color;
}

.action-icon.purple svg path,
.action-icon.purple:hover svg path {
  fill: @purple-color;
}

.action-icon.disabled svg path,
.action-icon.disabled:hover svg path {
  fill: inherit;
}

.action-icon.read-only-icon svg path,
.action-icon.read-only-icon:hover svg path {
  fill: @body-fore-color-opacity6;
}

.action-icon.color3 svg polygon,
.action-icon.color3:hover svg polygon {
  fill: @body-fore-color-opacity3;
}


.action-icon.color_960893 svg path {
  fill: #960893;
  opacity: 0.3;
}

.action-icon.color_960893:hover svg path {
  fill: #960893;
  opacity: 1;
}

.action-icon.color_02af48 svg path {
  fill: #02af48;
  opacity: 0.3;
}

.action-icon.color_02af48:hover svg path {
  fill: #02af48;
  opacity: 1;
}

.action-icon.color_2cd1a1 svg path {
  fill: #2cd1a1;
  opacity: 0.3;
}

.action-icon.color_2cd1a1:hover svg path {
  fill: #2cd1a1;
  opacity: 1;
}

.action-icon.color_2556e3 svg path {
  fill: #2556e3;
  opacity: 0.3;
}

.action-icon.color_2556e3:hover svg path {
  fill: #2556e3;
  opacity: 1;
}

.action-icon.color_9b00ff svg path {
  fill: #9b00ff;
  opacity: 0.3;
}

.action-icon.color_9b00ff:hover svg path {
  fill: #9b00ff;
  opacity: 1;
}

.action-icon.color_399bf3 svg path {
  fill: #399bf3;
  opacity: 0.3;
}

.action-icon.color_399bf3:hover svg path {
  fill: #399bf3;
  opacity: 1;
}

.action-icon.color_ffb700 svg path {
  fill: #ffb700;
  opacity: 0.3;
}

.action-icon.color_ffb700:hover svg path {
  fill: #ffb700;
  opacity: 1;
}

.action-icon.color_ff1aa2 svg path {
  fill: #ff1aa2;
  opacity: 0.3;
}

.action-icon.color_ff1aa2:hover svg path {
  fill: #ff1aa2;
  opacity: 1;
}

.action-icon.color_ff2365 svg path {
  fill: #ff2365;
  opacity: 0.3;
}

.action-icon.color_ff2365:hover svg path {
  fill: #ff2365;
  opacity: 1;
}

.action-icon.color_f67444 svg path {
  fill: #f67444;
  opacity: 0.3;
}

.action-icon.color_f67444:hover svg path {
  fill: #f67444;
  opacity: 1;
}

.action-icon.size_height_8 svg {
  height: 8px;
}

.action-icon.size8 svg {
  height: 8px;
  width: 8px
}

.action-icon.size10 svg {
  height: 10px;
  width: 10px
}

.action-icon.size11 svg {
  height: 11px;
  width: 11px
}

.action-icon.size12 svg {
  height: 12px;
  width: 12px
}

.action-icon.size15 svg {
  height: 15px;
  width: 15px
}

.action-icon.size20 svg {
  height: 20px;
  width: 20px
}

.action-icon.size24 svg {
  height: 24px;
  width: 24px
}

.ant-dropdown-menu-icon {
  cursor: pointer;
  pointer-events: initial !important;
}

.ant-dropdown-menu-icon svg {
  display: inline-block;
  vertical-align: middle;
  height: 15px;
  width: 15px
}

.ant-dropdown-menu-icon.size30 svg {
  height: 30px !important;
  width: 30px !important;
}

.ant-dropdown-menu-icon svg path,
.ant-dropdown-menu-icon.primary svg path {
  fill: @primary-color;
}

.ant-dropdown-menu-icon.white svg path,
.ant-dropdown-menu-icon.white svg path {
  fill: @white-color;
}

.ant-dropdown-menu-icon.color3 svg path {
  fill: @body-fore-color-opacity3;
}

.ant-dropdown-menu-icon.disabled {
  cursor: default;
}

.ant-dropdown-menu-icon:hover svg g {
  opacity: 1;
}

.ant-dropdown-menu-icon:hover svg path {
  fill: @primary-color;
  opacity: 1;
  fill-opacity: 1
}

.ant-dropdown-menu-icon.white:hover svg path {
  fill: @white-color;
}

.color6 .ant-dropdown-menu-icon svg path,
.color6 .ant-dropdown-menu-icon:hover svg path {
  fill: @body-fore-color-opacity6;
}

.color3 .ant-dropdown-menu-icon svg path,
.color3 .ant-dropdown-menu-icon:hover svg path {
  fill: @body-fore-color-opacity3;
}

.red .ant-dropdown-menu-icon svg path,
.red .ant-dropdown-menu-icon:hover svg path {
  fill: @red-color;
}

.loader-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  z-index: 99;
  background: @overly-back-color;
  opacity: 0.6;
  margin: 0;
  padding: 0;
}

.loader-indicator {
  background: url(images/loading.gif) center center no-repeat;
  background-size: 30px;
}

.right-panel-back-color {
  background-color: @right-panel-back-color  !important;
}

.grid-tag-template-column {
  height: auto !important;
  line-height: 18px !important;
  display: flow-root;
}

.context-menu-top-border {
  border-top: 1px solid @dark-border-color;
  margin: 8px 0;
}

ul li.context-menu-top-border:first-child,
ul li.context-menu-top-border:last-child {
  display: none;
}

.file-icon {
  color: @default-color-dark  !important;
  margin-right: 15px;
}

.documentLink {
  text-decoration: underline !important;
  height: 16px;
  color: @body-fore-color-opacity6;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.05px;
  cursor: pointer;
  float: left;
}

.no-records-wrapper {
  border: 1px solid @dark-border-color;
  border-top: 0px;
  border-radius: 1px;
}

.dx-radio-value-container {
  padding-right: 5px;
  vertical-align: top !important;
  padding-top: 2px !important;
}

.dx-list-group-header {
  padding-top: 10px;
}

.grid-group-row-icon-width100-wrapper .dx-datagrid-group-opened,
.grid-group-row-icon-width100-wrapper .dx-datagrid-group-closed {
  width: 100% !important;
}

.dx-show-clear-button .dx-icon-clear,
.dx-datebox-list .dx-dropdowneditor-icon {
  color: @dark-border-color;
  opacity: 1;
  width: 100%;
}

.remaining-tag-count-wrapper:hover {
  opacity: 1 !important;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  float: left;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-visible {
  overflow: visible !important;
}

.smallText-multiline {
  white-space: normal !important;
  line-height: 14px !important;
  color: @body-fore-color-opacity6  !important;
  font-family: @body-font-family  !important
}

.two-line-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: initial !important;
}

.three-line-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: initial !important;
}

.no-scrollbar .dx-scrollable-scrollbar {
  display: none;
}

.scroll_margin_left15 .dx-scrollable-scroll {
  margin-left: 15px;
}

.link-fore-color {
  color: @link-fore-color
}

.button-outside-sub-container {
  padding-right: 25px !important;
  padding-top: 10px !important;
}

.configured-value {
  font-family: @body-font-family;
  text-decoration: underline;
  font-style: italic;
}

.auto-width-radio-group .button-group .dx-radiobutton {
  column-width: auto !important;
}

.white_box_shadow .dx-scrollable-scrollbar.dx-scrollbar-vertical,
.white_box_shadow .dx-scrollable-scrollbar.dx-scrollbar-vertical.dx-state-hover {
  border-radius: 0 0 4px 0;
}

.dx-checkbox-indeterminate .dx-checkbox-icon:before {
  display: none
}

.allow-multiline.dx-checkbox .dx-checkbox-text {
  white-space: pre-wrap !important;
}

.dx-checkbox.font-size11 .dx-checkbox-text {
  font-size: 11px !important;
}

.kiosk-code-wrapper [type="password"] {
  font-size: 15px;
  font-family: auto;
  padding: 0;
  padding-left: 10px;
}

.kiosk-code-wrapper.password-mode .icon-inside-text {
  top: 10px !important;
}

// Set grid and content fix width
.grid-half-width .dx-datagrid,
.grid-half-width .no-data-image-container {
  max-width: 1100px !important;
}

.grid-half-width .top-filter {
  max-width: 1100px !important;
}

.grid-half-width .dx-datagrid-headers {
  max-width: 1100px !important;
}

// Block Content
.block-wrapper {
  width: 100%;
  float: left;
  margin-bottom: 10px;
}

.block-wrapper .header {
  height: 30px;
  background-color: @content-back-color;
  padding: 5px 0px;
  line-height: 20px;
  border-bottom: 1px solid @dark-border-color
}

.block-wrapper .details {
  border: 0px solid @dark-border-color;
  border-top: 0px;
  border-radius: 0px;
  float: left;
  width: 100%;
}

.block-wrapper .details.dx-accordion {
  border: 0
}

// .block-wrapper .header .column{padding: 5px 10px}
// .block-wrapper .header .text-column {font-size: 18px;}
.block-wrapper .header .action-column {
  width: 50px;
  position: relative;
  padding: 0 5px 0 0 !important;
  text-align: right;
}

.block-wrapper .header .action-column .button-wrapper {
  background-color: @success-color;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.block-wrapper .header .action-column .link-action {
  padding-left: 5px;
  line-height: 30px;
  vertical-align: text-bottom;
  cursor: pointer;
}

.block-wrapper .header .action-column .rotate180 {
  padding-left: 0;
  padding-right: 5px;
}

.block-wrapper .details {
  background-color: @content-back-color  !important;
}

.block-wrapper .details.back-color-gray {
  background-color: @right-panel-back-color;
}

.block-wrapper .details.content-wrapper {
  padding: 20px !important;
}

.block-wrapper.tag-wrapper .details.content-wrapper {
  padding-bottom: 15px !important;
}

.block-wrapper .details.dx-accordion .status-text {
  float: left;
  line-height: 30px;
  font-size: 12px;
  padding-left: 20px;
}

.block-wrapper .header .status-text {
  float: left;
  padding-left: 20px;
  height: 16px;
  font-family: @semi-bold-font-family;
  font-size: @label-font-size;
  letter-spacing: 0.15px;
  line-height: 16px;
  height: 16px;
}

.block-wrapper .no-records-wrapper {
  width: 100%;
  float: left;
  background-color: @content-back-color;
  height: 28px;
  line-height: 28px;
  padding-left: 10px;
  border: 1px solid @dark-border-color;
  border-top: 0px;
  border-radius: 1px;
}

.block-wrapper .details .detail-container {
  padding: 20px 10px;
  float: left;
  width: calc(100% - 30px);
}

// it has right padding 0
.block-wrapper .details .details-content-seperator {
  border-top: 1px solid @default-hr-color;
  float: left;
  width: 100%;
  padding: 0px 0px 20px 0px;
  margin: 0;
}

.block-wrapper .details .details-content-seperator-padding10 {
  border-top: 1px solid @default-hr-color;
  float: left;
  width: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0;
}

.block-wrapper .details .details-sub-content-seperator {
  border-top: 1px solid @default-hr-color;
  float: left;
  width: 100%;
  padding: 0px 0px 5px 0px;
  margin: 0;
}

.block-wrapper .details .tag-wrapper {
  float: left;
  width: 100%;
  margin-bottom: 5px;
}

.block-wrapper .details .tag-wrapper nz-tag {
  margin-bottom: 5px;
}

.block-wrapper .details .control-value-wrapper {
  float: left;
  width: 100%;
}

.block-wrapper .details .control-value-wrapper:last-child .value-text {
  padding-bottom: 0;
}

.block-wrapper .details .control-value-wrapper .col1,
.block-wrapper .details .control-value-wrapper .col2 {
  display: inline-block;
  vertical-align: top;
}

.block-wrapper .details>.detail-container+.right.column.action-column {
  margin: 20px 10px 0 0;
}

.white_box_shadow.block-wrapper .header .left.column {
  width: calc(100% - 30px);
}

.white_box_shadow.block-wrapper .header .action-column {
  width: 20px !important;
}

.white_box_shadow.block-wrapper .header .status-text {
  float: right;
  padding-left: 0;
  padding-right: 16px;
}

// End Block Content

.tag-wrapperin10px {
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-bottom: 17px !important;
}

// custom radio group
.custom-radio-group .outer-div {
  background-color: @content-back-color;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  border: 1px solid @dark-border-color;
}

.custom-radio-group .outer-div.active,
.custom-radio-group .outer-div:hover {
  background-color: @primary-color;
  border-color: @primary-color;
}

.custom-radio-group .inner-div {
  border-radius: 50%;
  height: 10px;
  width: 10px;
  margin-top: 5px;
  margin-left: 5px;
  display: none;
}

.custom-radio-group .inner-div.active {
  background-color: @content-back-color;
  display: block;
}

// End custom radio group

// custom radio button group
.custom-radio-button-group {
  line-height: normal;
}

.custom-radio-button-group .outer-div {
  background-color: @content-back-color;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  border: 1px solid @dark-border-color;
}

.custom-radio-button-group .outer-div.active {
  background-color: @primary-color;
  border-color: @primary-color;
}

.custom-radio-button-group .outer-div:hover {
  border-color: @primary-border-color;
}

.custom-radio-button-group .inner-div {
  border-radius: 10px;
  height: 6px;
  width: 6px;
  margin-top: 3px;
  margin-left: 3px;
  display: none;
}

.custom-radio-button-group .inner-div.active {
  background-color: @content-back-color;
  display: block;
}

.custom-radio-button-group .display-inline-block:first-child {
  width: 14px;
  vertical-align: top;
  float: left;
}

.custom-radio-button-group .display-inline-block.parent-label {
  width: calc(100% - 14px);
  vertical-align: top;
  padding-left: 5px;
  float: left;
  padding-bottom: 5px;
  cursor: pointer !important;
}

// End custom radio button group

// Checkbox
.checkbox {
  position: relative;
  margin-bottom: 10px;
}

.checkbox:last-child {
  margin-bottom: 0;
}

.checkbox input[type="checkbox"] {
  display: none;
}

.checkbox input[type="checkbox"]+label {
  padding-left: 19px;
  cursor: pointer;
  color: @body-fore-color;
  font-family: @body-font-family;
  font-size: 12px;
  line-height: 20px;
  margin-bottom: 0;
  letter-spacing: 0.05px;
}

.checkbox input[type="checkbox"]+label:after {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid @default-color;
  background-color: @content-back-color;
  position: absolute;
  top: 0px;
  left: 0;
  display: block;
  content: "";
}

.checkbox input[type="checkbox"]+label:before {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid @primary-border-color;
  background-color: @primary-color;
  background: @primary-color url(../assets/images/check.png) no-repeat center center;
  position: absolute;
  top: 0px;
  left: 0;
  display: block;
  content: "";
  opacity: 0;
  visibility: hidden;
  background-position: 1px center;
}

.checkbox input[type="checkbox"]:checked+label:after {
  opacity: 0;
  visibility: hidden;
}

.checkbox input[type="checkbox"]:checked+label:before {
  opacity: 1;
  visibility: visible;
}

.checkbox-required-icon {
  top: 8px;
  display: inline-block;
  padding-left: 3px;
}

// End Checkbox


/* content placeholder start */
@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0
  }

  100% {
    background-position: 468px 0
  }
}

.animated-background {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, @grid-border-color 8%, #dddddd 18%, @grid-border-color 33%);
  background-size: 800px 104px;
  // height: 96px;
  color: transparent;
  position: relative;
}

.background-masker {
  background: @primary-fore-color;
  position: absolute;
}

/* content placeholder end */

nz-form-control .radio-button-group {
  width: 100%;
}

nz-form-control .ant-radio-button-wrapper {
  text-align: center;
}

nz-form-control .ant-radio-button-wrapper-checked {
  background: @primary-color;
  color: @primary-fore-color;
}

nz-form-control .ant-radio-button-wrapper-checked:hover {
  color: @primary-fore-color;
}

.page-container {
  background-color: @content-back-color;
}

.guardian-login.dashboard-container .page-container {
  background-color: @body-back-color;
}

.page-container:after {
  content: "";
  display: table;
  clear: both;
}

.mainCard {
  padding-top: 15px;
}

.wide-steps-content {
  max-width: 100% !important;
}

.wide-detail-form {
  max-width: 100% !important;
}

.actionRow {
  line-height: 40px;
}

.actionRow .right .ant-form-item-control {
  float: right;
}

.actionRow span {
  line-height: initial;
  display: block;
}

.main-wrapper {
  width: 100%;
  display: inline-block;
}

.cf {
  clear: both;
  display: block;
}

.page {
  min-height: 100%;
  position: relative;
}

img {
  max-width: 100%;
  display: block;
  border: none;
}

// Content
.content-start {
  background-color: @body-back-color;
}

.layout-fixed-width {
  position: absolute;
  left: 40px;
  right: 0;
  top: 0;
}

.ant-layout-sider {
  position: fixed;
}

.ant-tabs-content {
  margin: 0;
}

.ant-tabs-nav-scroll {
  background-color: @tab-back-color;
  overflow: hidden !important;
}

.single-tab-item .ant-tabs-nav-scroll {
  display: none;
}

.profile-img.upload-img {
  cursor: pointer;
  transition: all 0.3s linear;
}

.profile-img.upload-img:hover {
  .camera-icon {
    opacity: 0.6;
  }

  .profile-picture-img {
    opacity: 0.3;
  }

  .img:before {
    opacity: 0.3;
  }
}

.profile-img {
  margin: 0 auto;
  max-width: 100px;
  width: 100%;
  position: relative;
}

.profile-img .img {
  transition: all 0.3s linear;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  border: solid 3px @content-back-color;
  box-sizing: content-box;
}

.user-profile-thumb {
  line-height: 60px !important;
}

.profile-img .img img {
  width: 100%;
  height: 100%;
}

.profile-img .img.blur-img:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: @body-fore-color;
  opacity: 0;
}

.user-profile-thumb .img-wrapper-text {
  font-family: @semi-bold-font-family
}

.profile-picture-img.user-profile-thumb::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.camera-icon p {
  color: @content-back-color;
  margin: 0;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.05px;
  margin-top: 5px;
  display: none;
}

.basic-details-wrapper .image-container .name-info h6 {
  color: @body-fore-color;
  font-family: @semi-bold-font-family;
}

.basic-details-wrapper .image-container .name-info h6 span {
  color: @body-fore-color-opacity4;
  font-family: @semi-bold-font-family;
  font-size: @label-font-size;
  letter-spacing: 0.28px;
  line-height: 12px;
  height: 14px;
  margin-left: 1px;
  position: relative;
  top: -1px;
}

.basic-details-wrapper .image-container .name-info .pro-other-info {
  color: @body-fore-color-opacity6;
  font-family: @medium-font-family;
}

/* Header */
.search-form {
  position: relative;
}

.search-form>img,
.search-form>svg {
  position: absolute;
  left: 0px;
  top: 6px;
}

.search-form .dx-textbox {
  border: 0 !important;
  background: transparent;
  color: @primary-fore-color;
  font-family: @body-font-family;
  width: 100%;
  box-sizing: border-box;
  height: 28px;
  font-size: 12px;
  letter-spacing: 0.15px;
  line-height: 12px;
  padding: 0 0 0 0
}

.search-form .dx-texteditor-input {
  background-color: transparent;
  color: @primary-fore-color;
  padding-left: 10px;
}

.search-form .dx-textbox .dx-placeholder {
  color: @primary-fore-color;
  opacity: 0.5;
  font-family: @body-font-family;
  padding-left: 0px;
}

.global-search .search-form .dx-selectbox {
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  margin-right: 10px;
}

.global-search .search-form .dx-selectbox .dx-dropdowneditor-icon:before {
  background: url(images/search_icon.png) !important;
  width: 18px !important;
  height: 14px;
}

.btn-white {
  background: @content-back-color;
  font-size: 12px;
  color: @primary-color;
  font-family: @body-font-family;
  padding: 5px 10px 5px 30px;
  border-radius: 4px;
  display: block;
  height: 30px;
  width: 98px;
  box-sizing: border-box;
  line-height: 20px;
  position: relative;
  letter-spacing: 0.1px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.btn-white.plus:before,
.btn-white.plus:after {
  position: absolute;
  display: block;
  content: "";
  background: @primary-color;
}

.count {
  display: inline-block;
  min-width: 17px;
  width: auto;
  height: 13px;
  font-size: 8px;
  letter-spacing: 0.04px;
  line-height: 9px;
  background: @primary-color;
  position: absolute;
  top: -5px;
  left: 6px;
  text-align: center;
  color: @primary-fore-color;
  font-family: @semi-bold-font-family;
  border-radius: 7px;
  padding-top: 1px;
  box-sizing: border-box;
  border: 1px solid @content-back-color;
}

.header-top-right>div.address-box address span.location {
  color: @primary-selected-color;
}

.header-top-right>div.address-box .address-box-inner {
  cursor: pointer;
}

.header-top-right>div.address-box .thumb {
  color: @primary-color;
  background-color: @content-back-color;
}

.ant-layout-header {
  height: auto;
  line-height: normal;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  display: inline-block;
  border-bottom: solid 1px @default-color;
  padding: 8px 0 7px;
  position: relative;
  background: @content-back-color;
  z-index: 1;
}

.ant-layout-header .need-help {
  line-height: normal;
  padding: 18px 0 17px;
}

.ant-layout-header .need-help a {
  color: @primary-color;
}

.info-box,
.notification,
.message-box {
  height: 18px;
}

.add-new .plus {
  width: 30px;
  height: 30px;
  position: relative;
  display: block;
  text-align: center;
  line-height: 30px;
}

.add-new .plus:before {
  content: "";
  background: @content-back-color;
  opacity: 0.16;
  display: block;
  z-index: 51;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
}

.add-new .plus img,
.add-new .plus svg {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.ant-layout-header.header-inner,
.ant-layout-header.header-inner:after {
  border: 0 none;
}

.ant-layout-header.header-inner:after {
  display: none;
}

.ant-layout-header.header-inner {
  background: @primary-color;
  padding: 10px 0;
  line-height: 30px;
}

.ant-layout-header.header-inner .need-help {
  color: @header-fore-color;
  padding: 0;
}

.ant-layout-header.header-inner .need-help a {
  color: @header-fore-color;
}

.ant-layout-header.header-inner .logo a {
  color: @header-fore-color;
  font-size: 18px;
  font-family: @body-font-family;
  line-height: 1;
  margin: 0;
  padding: 0;
  vertical-align: middle
}

.ant-layout-header.header-inner .logo a img {
  display: inline-block;
}

.ant-layout-header.header-inner .button-secondary {
  border-radius: 4px;
  border: 1px solid @header-fore-color;
  background-color: @primary-color;
  font-size: 12px;
  font-family: @body-font-family;
  color: @header-fore-color;
  padding: 8px 7px;
  display: inline-block;
  height: 30px;
  line-height: 1;
  box-sizing: border-box;
  margin-left: 20px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.ant-layout-header.header-inner .button-secondary:hover {
  background: @primary-hover-color;
}

nz-sider {
  z-index: 7;
}

.user-profile.ant-menu-item-selected {
  border-color: rgba(255, 255, 255, 0) !important;
}

header {
  height: auto;
  line-height: normal;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  ;
  display: inline-block;
  border-bottom: solid 1px @default-color;
  padding: 8px 0 7px;
  position: relative;
  background: @content-back-color;
  z-index: 1;
}

header .need-help {
  line-height: normal;
  padding: 18px 0 17px;
}

header .need-help a {
  color: @primary-color;
}

/* Header inner */
header.header-inner,
header.header-inner:after {
  border: 0 none;
}

header.header-inner:after {
  display: none;
}

header.header-inner {
  background: @primary-color;
  padding: 5px 0 5px 7px;
  // line-height: 30px;
  z-index: 99;
}

header.header-inner .need-help {
  color: @header-fore-color;
  padding: 0;
  padding-top: 6px;
}

header.header-inner .need-help a {
  color: @header-fore-color;
}

header.header-inner .logo a {
  color: @header-fore-color;
  font-size: 18px;
  font-family: @body-font-family;
  line-height: 1;
  margin: 0;
  padding: 0;
  vertical-align: middle
}

header.header-inner .logo a img {
  display: inline-block;
  width: 40px;
  height: 40px;
}

.create-organisation-layout header.header-inner .logo a img {
  height: 100%;
  width: 100%;
}

.environment_storypark .create-organisation-layout header.header-inner .logo a img {
  height: 40px;
  width: 40px;
}

.dashboard-layout-wrapper header.header-inner .logo a img {
  height: 30px;
  width: 38px;
}

.environment_storypark .dashboard-layout-wrapper header.header-inner .logo a img {
  width: 30px;
}

header.header-inner .logo a:hover,
header.header-inner .need-help a:hover {
  color: @header-fore-color  !important;
}

header.header-inner .button-secondary {
  border-radius: 4px;
  border: 1px solid @header-fore-color;
  background-color: @primary-color;
  font-size: 12px;
  font-family: @body-font-family;
  color: @header-fore-color;
  padding: 8px 7px;
  display: inline-block;
  height: 30px;
  line-height: 1;
  box-sizing: border-box;
  margin-left: 20px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

header.header-inner .button-secondary:hover {
  background: @primary-hover-color;
}


/* Footer */
footer {
  padding-top: 30px;
  background-color: transparent;
  text-align: center;
}

footer img {
  margin: 0 auto;
}

footer .copyright-container {
  background: @footer-back-color;
  color: @footer-fore-color;
  padding: 6px 0;
  line-height: normal;
}

.stand-alone-page .ant-card-body {
  border: 0px;
  padding: 0px;
}

.stand-alone-page .contentCard {
  padding: 30px 38px;
  background: @content-back-color;
}

.stand-alone-page .content {
  display: inline-block;
  font-family: @body-font-family  !important;
  color: @body-fore-color  !important;
}

.stand-alone-page .dx-button-content .dx-button-text {
  width: 100%;
}

.stand-alone-page .ant-input,
.stand-alone-page .ant-input-number,
.stand-alone-page .ant-select-selection--single {
  height: 40px;
}

.stand-alone-page .ant-input-number-input {
  height: 38px;
}

.stand-alone-page .ant-select-selection__rendered {
  line-height: 38px;
  font-weight: normal;
}

.stand-alone-page .formItem {
  min-height: 58px;
  margin-bottom: 0px;
}

.stand-alone-page .form-field .formItem {
  min-height: 40px
}

.stand-alone-page .ant-btn-primary {
  min-width: 150px;
  height: 40px;
}

.stand-alone-page .actionRow {
  min-height: auto
}

;

.stand-alone-page h1 {
  font-size: 30px;
  margin-bottom: 10px;
}

.stand-alone-page h2 {
  font-size: 24px;
}

.stand-alone-page .ant-select-selection--multiple .ant-select-selection__rendered>ul>li,
.stand-alone-page .ant-select-selection--multiple>ul>li {
  margin-top: 7px;
}

.stand-alone-page .ant-select-selection--multiple .ant-select-selection__clear:before {
  margin-top: 5px;
}

.stand-alone-page .dx-widget,
.stand-alone-page .dx-widget input,
.stand-alone-page .dx-widget textarea {
  font-size: @body-font-size-standAlone;
}

.stand-alone-page .dx-button {
  padding: 3px 15px !important;
}

.stand-alone-page .dx-texteditor-input {
  height: 40px !important;
}

.stand-alone-page .button-group .dx-radiobutton {
  height: 40px !important;
  line-height: 40px;
}

.stand-alone-page .dx-placeholder {
  font-size: @body-font-size-standAlone;
  color: @body-fore-color-opacity3;
}

.stand-alone-page .control-label {
  font-size: @body-font-size-standAlone  !important;
}

.stand-alone-page .steps-content .dx-tag-container .dx-tag .dx-tag-content {
  top: 6px !important;
}

:host ::ng-deep .ant-back-top {
  bottom: 15px;
  right: 15px;
}

.scrollToTop {
  background: @primary-color;
  color: @primary-fore-color;
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  font-size: 30px;
  text-align: center;
  line-height: 36px;
  border-radius: 250px;
}

.confirmPwdMsg {
  color: @control-validation-color;
}

.validationMsg {
  color: @red-hover-color;
}

// Nav bar menu css
.sidebar {
  background: @sidebar-back-color;
}

.sidebar-nav ul li a span.menu-name {
  color: @menu-fore-color;
}

.sidebar-nav ul li a.active,
.sidebar-nav ul li a:hover {
  opacity: 1;
  border-left-color: @primary-color  !important;
}

.sidebar-nav ul li a.active-replica {
  opacity: 1;
  border-left-color: @primary-color  !important;
}

.sidebar-nav ul li a:before {
  display: block !important;
  content: "";
  background: @menu-selected-color;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  border-radius: 0 4px 4px 0 !important;
  width: 36px;
  transition: all 0.2s ease 0s;
  -moz-transition: all 0.2s ease 0s;
  -ms-transition: all 0.2s ease 0s;
  -o-transition: all 0.2s ease 0s;
  -webkit-transition: all 0.2s ease 0s;
}

.sidebar-nav ul li a {
  position: relative;
}

.sidebar-nav ul li a.active:before {
  opacity: 1;
}

.sidebar-nav ul li a.active-replica:before {
  opacity: 1;
}

.sidebar-nav ul li a:hover:before {
  opacity: 1;
}

// Sandip: now we have removed menu expand on menu hover, so removed below line
// .full-view .sidebar:hover
.sidebar-active-width {
  width: 230px !important;
}

// Sandip: in mobile view no hover effect, width remain same no nee to open sidebar
.full-view .sidebar:hover .sidebar-top {
  width: 230px;
  max-width: 230px;
}

// Sandip: in mobile view no hover effect, width remain same no nee to open sidebar
.sidebar:hover .sidebar-nav ul li a.active:before,
.sidebar:hover .sidebar-nav ul li a:hover:before {
  width: 100%;
  opacity: 1;
}

.sidebar:hover .sidebar-nav ul li a.active-replica:before {
  width: 100%;
  opacity: 1;
}

.sidebar-nav ul li a.active .menu-name,
.sidebar-nav ul li a:hover .menu-name {
  color: @content-back-color;
}

.sidebar-nav ul li a.active-replica .menu-name {
  color: @content-back-color;
}

.mobile-view .sidebar-nav ul li a.active .menu-name,
.mobile-view .sidebar-nav ul li a:hover .menu-name {
  color: @menu-fore-color;
}

.mobile-view .sidebar-nav ul li a.active-replica .menu-name {
  color: @menu-fore-color;
}

.sidebar-top {
  background: @menu-selected-color;
}

.pro-img {
  border: 1px solid @dark-border-color;
}

.pro-img .img-wrapper-text {
  color: @content-back-color
}

.pro-detail .name {
  color: @content-back-color;
}

.pro-detail .position {
  color: @content-back-color;
}

.menu-icon.size15 svg {
  height: 15px;
  width: 15px;
}

.sidebar-nav ul li a span.menu-icon path {
  fill: #647179;
}

.sidebar-nav ul li a.active span.menu-icon path,
.sidebar-nav ul li a:hover span.menu-icon path {
  fill: @content-back-color;
}

.sidebar-nav ul li a.active-replica span.menu-icon path {
  fill: @content-back-color;
}

.mobile-view .sidebar-nav ul li a.active span.menu-icon path,
.mobile-view .sidebar-nav ul li a:hover span.menu-icon path {
  fill: #647179;
}

.mobile-view .sidebar-nav ul li a.active-replica span.menu-icon path {
  fill: #647179;
}

/* Page title */
.page-title.title-home {
  text-align: center;
}

.page-title h1 {
  margin: 22px 0 10px;
}

.page-title p {
  margin: 0;
}

.page-title a {
  display: inline-block;
}

/* Content */
.content {
  width: 100%;
  display: inline-block;
}

.content h2 {
  margin-bottom: 27px;
}

.content .list {
  padding-left: 100px;
  padding-right: 30px;
  padding-top: 30px;
  width: 59.82%;
}

.content .list ul {
  margin: 0;
}

.content .list ul li {
  margin-bottom: 15px;
  position: relative;
  padding-left: 31px;
}

.content .list ul li:before {
  content: '\f00c';
  font-family: 'FontAwesome';
  color: @success-color;
  position: absolute;
  left: 0;
  top: 1px;
}

.content .list ul li:last-child {
  margin-bottom: 0;
}

.content .sign-up-form {
  width: 40.18%
}

.vertical-checkbox-group {
  label {
    display: block;
  }

  .ant-checkbox-wrapper+.ant-checkbox-wrapper {
    margin-left: 0;
  }
}

.vertical-checkbox-list-container .label-wrapper {
  width: 100%;
  padding-bottom: 10px;
}

.vertical-checkbox-list-container .vertical-checkbox-list-wrapper {
  width: 100%;
  padding-top: 5px;
}

// DevExpress Controls
.dx-widget,
.dx-widget input,
.dx-widget textarea,
.dx-overlay-wrapper,
.dx-box-item-content,
.ant-menu-inline .ant-menu-item {
  font-family: @medium-font-family;
  font-size: @body-font-size;
  color: @body-fore-color;
  letter-spacing: 0.24px;
  line-height: 18px;
}

.dx-widget,
.dx-widget input,
.dx-widget textarea,
.dx-texteditor,
.ant-btn,
.dx-checkbox-icon,
.ant-input-group-compact,
.ant-select,
.ant-input,
.ant-select-selection {
  border-color: @control-border-color  !important;
}

.ant-input-group.ant-input-group-compact>:last-child {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

.ant-input-group.ant-input-group-compact>:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.range-dropdown-select .ant-select-selector {
  border: 2px solid @control-border-color  !important;
  height: 30px !important;
  width: 87px !important;
  border-right-width: 2px !important;
}

.ant-select-item,
.ant-select-item-empty {
  font-size: @body-font-size;
}

.ant-select-focused.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  border-color: @control-border-color  !important;
  box-shadow: none !important;
  border-right-width: 2px !important;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background-color: @list-hover-color;
  color: @body-fore-color;
  font-weight: normal;
}

.ant-select-single .ant-select-selector .ant-select-selection-item,
.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
  line-height: 26px;
}

.dx-calendar-navigator .dx-calendar-caption-button.dx-button .dx-button-content,
.dx-calendar-navigator-previous-view.dx-button .dx-icon,
.dx-calendar-navigator-previous-month.dx-button .dx-icon,
.dx-calendar-navigator-next-view.dx-button .dx-icon,
.dx-calendar-navigator-next-month.dx-button .dx-icon {
  color: @primary-color
}

.ant-menu-inline .ant-menu-item,
.ant-menu-inline .ant-menu-submenu-title,
.ant-menu-vertical .ant-menu-item,
.ant-menu-vertical .ant-menu-submenu-title,
.ant-menu-vertical-left .ant-menu-item,
.ant-menu-vertical-left .ant-menu-submenu-title,
.ant-menu-vertical-right .ant-menu-item,
.ant-menu-vertical-right .ant-menu-submenu-title {
  height: auto !important;
  font-size: 12px;
  color: @body-fore-color-opacity6  !important;
  width: 100%;
}

.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
  border-right: 0px;
}

.ant-menu-submenu-arrow {
  display: none;
}

.ant-menu-inline .ant-menu-item.ant-menu-item-disabled,
.ant-menu-inline .ant-menu-item.ant-menu-submenu-disabled {
  pointer-events: none;
  color: @body-fore-color-opacity3  !important;
}

.dx-htmleditor {
  min-height: 250px;
}

// when scheduler popup close it leaves one horizontal line, which is of inbuild popup having auto height and we don't show that inbuild popup, so i have set visibility as hidden
// we have also hide that popup from component level but we have to place that code on every click, so better we handle by css.
// if we have to show inbuild popup in future we have to remove this css and have to handle by code.
.dx-scheduler-appointment-popup {
  visibility: hidden !important;
}

.dx-overlay-wrapper:not(.dx-datebox-wrapper-time) {
  width: auto !important;
}

.dx-overlay-wrapper.dx-popup-wrapper {
  // width: auto !important; // Sandip: removed as it don't set width for time picker
  height: auto !important;
}

​​ .dx-overlay-wrapper.dx-datebox-wrapper-time {
  min-width: 90px;
}

// hide date place holder shown at top of datepicker popup like (DD/MM/YYYY)
.dx-datebox-wrapper.dx-datebox-wrapper-calendar .dx-popup-title {
  display: none !important;
}

.dynamic-createPanel .colwidth100 .formItem.input-box .dx-checkbox-container {
  padding-top: 0;
}

.dynamic-section .sub-container .left.form-field.dynamic-control span.control-label {
  margin-bottom: 4px !important;
}

.dynamic-section .dynamic-control .tooltip-wrapper {
  top: 1px;
  font-size: 12px;
  cursor: pointer;
}

.sidebar-form .dynamic-control.form-field {
  padding-left: 10px !important;
  padding-right: 0px !important;
}

.dynamic-control-sub-container {
  padding: 20px 30px 0px 10px;
}

.remove-top-padding-from-sub-container .dynamic-control-sub-container {
  padding-top: 0px;
}

.dx-checkbox.no-other-padding-in-container .dx-checkbox-container {
  padding: 0px !important;
}

/** Focus & Hover Border *****/
.dx-datagrid .dx-checkbox.dx-state-focused,
.dx-datagrid .dx-checkbox.dx-state-focused .dx-checkbox-icon,
.dx-datagrid .dx-checkbox.dx-state-active {
  border-color: @control-hover-border-color  !important;
}

.dx-widget:hover,
.dx-widget input:hover,
.dx-widget textarea:hover,
.dx-checkbox.dx-state-hover .dx-checkbox-icon {
  border-color: @control-hover-border-color  !important;
}

.dx-widget:active,
.dx-widget input:active,
.dx-widget textarea:active {
  border-color: @control-hover-border-color  !important;
}

.dx-texteditor.dx-state-active,
.dx-texteditor.dx-state-focused {
  border-color: @control-hover-border-color  !important;
}

.dx-checkbox.dx-state-hover.dx-checkbox-checked .dx-checkbox-icon,
.dx-checkbox.dx-state-focused.dx-checkbox-checked .dx-checkbox-icon {
  border-color: @primary-color  !important;
}

.dx-checkbox-checked .dx-checkbox-icon {
  border-color: @primary-color  !important;
  color: @content-back-color  !important;
  background-color: @primary-color  !important;
  font-size: 8px !important
}

.dx-checkbox-checked .dx-checkbox-icon:before {
  content: "" !important;
  background-image: url(images/Checkbox-tick-icon.svg);
  background-repeat: no-repeat;
  background-size: 10px 9px;
  width: 10px;
  height: 9px;
  display: inline-block;
  margin-top: -4px !important;
  margin-left: -5px !important;
}

.dx-state-disabled .dx-checkbox-text {
  opacity: 1;
}

.dx-state-disabled.dx-checkbox .dx-checkbox-icon,
.dx-state-disabled .dx-checkbox .dx-checkbox-icon {
  opacity: 1;
  background: @primary-hover-bubble-control-color  !important;
  border-color: transparent !important;
}

.dx-state-disabled.dx-checkbox.dx-checkbox-checked .dx-checkbox-icon,
.dx-state-disabled .dx-checkbox.dx-checkbox-checked .dx-checkbox-icon {
  background: @body-fore-color-opacity6  !important;
}

.dx-checkbox.dx-state-hover .dx-checkbox-icon,
.dx-checkbox.dx-state-focused .dx-checkbox-icon {
  border-width: 2px !important;
}

.dx-button {
  box-shadow: none;
  border-width: 2px !important;
  font-family: @semi-bold-font-family;
  letter-spacing: 0.05px !important;
  line-height: 12px !important;
}

.dx-texteditor.dx-editor-outlined {
  border: 2px solid @control-border-color;
  box-sizing: border-box;
}

.dx-texteditor-input {
  margin: 0;
  padding: 5px 10px 5px;
  background: @content-back-color;
  color: @default-color;
  font-size: @body-font-size;
  border-radius: 4px;
  min-height: 26px;
}

.top-filter .dx-texteditor.dx-editor-outlined {
  height: 30px;
  border-radius: 4px;
  border: 2px solid @control-border-color;
  background-color: @content-back-color;
}

.flat-back-color.dx-state-disabled.dx-button {
  opacity: 1 !important;
  border-color: @flat-hover-color  !important;
  background: @flat-hover-back-color;
}

.flat-back-color.dx-state-disabled.dx-button .dx-button-text,
.flat-back-color.dx-state-disabled .dx-button .dx-button-text {
  color: @body-fore-color  !important;
}

.primary-back-color.dx-state-disabled.dx-button {
  opacity: 1 !important;
  border-color: transparent !important;
  background-color: @control-border-color  !important;
}

.primary-back-color.dx-state-disabled.dx-button .dx-button-text,
.primary-back-color.dx-state-disabled .dx-button .dx-button-text {
  color: @body-fore-color-opacity4  !important;
}

.dx-state-disabled.dx-widget .dx-radiobutton:before {
  border: transparent !important;
  background: @body-fore-color-opacity2;
}

.dx-state-disabled.dx-widget .dx-radiobutton:first-child:before {
  border-left: 0 !important;
}

.dx-state-disabled.dx-widget .dx-radiobutton:last-child:before {
  border-right: 0 !important;
}

.dx-state-disabled.dx-widget .dx-radiobutton:before {
  left: 0;
  right: 0;
  border-left: 1px solid #ced8e7 !important;
  border-right: 1px solid #ced8e7 !important;
  opacity: 1;
}

.dx-state-disabled.dx-widget .dx-item-content {
  color: @body-fore-color-opacity5;
}

.dx-state-disabled.dx-widget .dx-radiobutton.dx-radiobutton-checked:before {
  border: transparent !important;
  background: @body-fore-color-opacity4;
}

.dx-state-disabled.dx-widget .dx-radiobutton.dx-radiobutton-checked {
  background: transparent !important;
}

.dx-state-disabled.dx-widget .dx-radiobutton.dx-radiobutton-checked .dx-item-content {
  color: @body-fore-color;
  opacity: 1;
}

.dx-field-item-label {
  margin-bottom: 5px;
}

.dx-checkbox-container {
  padding: 0;
}

.formItem .dx-checkbox .dx-checkbox-container .dx-checkbox-icon,
.formItem .dx-checkbox-container .dx-checkbox-text {
  display: inline-block;
  vertical-align: top;
}

.formItem .dx-checkbox .dx-checkbox-container .dx-checkbox-icon {
  color: transparent;
  margin-top: 2px;
}

.formItem .dx-checkbox-container .dx-checkbox-text,
.sidebar-box-sec .dx-checkbox-text {
  color: @body-fore-color;
  font-family: @medium-font-family;
  font-size: @label-font-size;
  line-height: @line-height18
}

.dx-list.dx-widget .dx-checkbox-container .dx-checkbox-text {
  display: inline;
}

.view-mode .dx-checkbox .dx-checkbox-container .dx-checkbox-icon {
  background-color: @body-fore-color;
}

.view-mode .dx-checkbox-checked .dx-checkbox-icon {
  background-color: @body-fore-color;
}

// .dx-checkbox-indeterminate .dx-checkbox-icon:before {background-color: transparent} // set to transparent as it location is not accurate
.dx-checkbox-icon {
  width: 14px;
  height: 14px;
}

.dx-datebox-wrapper-time .dx-overlay-content {
  height: auto !important;
  max-height: 300px;
}

.dx-selectbox-popup-wrapper .dx-overlay-content,
.ant-dropdown-menu {
  border-top-width: 1px !important;
  border-radius: 4px;
  -webkit-box-shadow: @setting-panel-box-shadow;
  -moz-box-shadow: @setting-panel-box-shadow;
  box-shadow: @setting-panel-box-shadow;
  border: 0;
  background-color: @content-back-color;
  margin-top: 0px !important;
  border: 1px solid #e5e5e5;
}

.dx-selectbox-popup-wrapper .dx-list {
  border-radius: 4px;
}

.dx-selectbox-popup-wrapper .dx-list .dx-scrollable-scrollbar.dx-scrollbar-vertical {
  border-radius: 0 4px 4px 0;
}

.ant-dropdown-menu {
  padding: 0;
}

.dx-dropdownmenu-popup-wrapper .dx-dropdownmenu-list .dx-list-item {
  background-color: @content-back-color;
}

.dx-list-item.dx-state-hover,
.dx-list-item.dx-state-active {
  background-color: @list-hover-color  !important;
  color: @body-fore-color  !important;
}

.dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-hover .dx-checkbox-icon {
  border-color: @primary-border-color
}

.dx-dropdowneditor-icon {
  color: @input-icon-color
}

// .dx-selectbox .dx-dropdowneditor-icon:before {content: "keyboard_arrow_down"; font-family: 'Material Icons';}
.dx-datebox-date .dx-dropdowneditor-icon {
  font-size: 17px !important;
}

.dx-datebox-date .dx-dropdowneditor-icon:before {
  color: transparent;
}

.dx-datebox-date .dx-dropdowneditor-icon:before {
  content: "" !important;
  background-image: url(images/Datepicker-icon.svg);
  background-size: 13px 14px;
  width: 13px;
  height: 14px;
  display: inline-block;
  margin-top: -7px;
  margin-left: -7px !important;
}

.dx-dropdowneditor-button {
  width: 32px !important;
}

.dx-dropdowneditor.dx-state-hover:not(.dx-custom-button-hovered) .dx-dropdowneditor-icon,
.dx-dropdowneditor.dx-state-active .dx-dropdowneditor-icon {
  background-color: transparent;
}

.dx-selectbox .dx-dropdowneditor-icon:before {
  left: 50%;
}

.dx-texteditor-buttons-container span.dx-clear-button-area span.dx-icon.dx-icon-clear:before {
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  padding: 0 !important;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.dx-selectbox .dx-dropdowneditor-icon:before {
  content: "" !important;
  background: url(images/Dropdown-icon.svg);
  width: 10px;
  height: 7px;
  margin: 0 auto !important;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  margin-left: 0px !important;
}

.dx-tagbox .dx-texteditor-container:before {
  content: "" !important;
  pointer-events: none;
  background: url(../assets/images/Dropdown-icon.svg);
  width: 10px;
  height: 7px;
  transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  position: absolute;
  display: block;
  top: 50%;
  right: 10px;
  margin-left: -9px;
  z-index: 1;
}

.dx-tagbox:not(.dx-texteditor-empty) .dx-texteditor-input {
  margin-left: 0;
  padding-left: 10px;
}

// .dx-tagbox .dx-selectbox-container {padding-right: 25px;} // sandip: as it put extra right space in create child (Person to whom the order relates)
.dx-tagbox .dx-texteditor-container {
  padding-right: 25px;
}

.dx-tag-container.dx-texteditor-input-container {
  padding-bottom: 0px;
}

.dx-tag-container.dx-texteditor-input-container .dx-texteditor-input {
  padding-bottom: 0px;
  min-height: 26px;
}

.dx-tagbox .dx-texteditor-buttons-container {
  right: 20px
}

// hide tagbox select all option where we restrict to select up to n number of records
#tagbox-hide-all-container .dx-list-select-all {
  display: none;
}

#tagbox-hide-all-container .selected-dropdown-items-reached .dx-item.dx-list-item:not(.dx-list-item-selected) {
  opacity: 0.4;
  pointer-events: none;
}

.dx-dropdowneditor.dx-state-hover .dx-dropdowneditor-icon,
.dx-dropdowneditor.dx-state-active .dx-dropdowneditor-icon {
  background-color: transparent;
}

.dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon,
.dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon {
  color: @default-color;
  background-color: transparent;
}

.dx-dropdowneditor-overlay .dx-popup-content {
  padding: 0;
}

.dx-list-item.dx-list-item-selected {
  background-color: @list-hover-color  !important;
  color: @body-fore-color  !important;
}

.checkbox-list .dx-list-item.dx-list-item-selected {
  background-color: transparent !important;
}

.dx-list {
  min-height: 10px;
}

.dx-list .dx-empty-message {
  padding: 6px 5px 6px 5px;
}

.dx-list .dx-list-item-content {
  padding: 6px 5px 6px 5px;
}

.dx-list-item-before-bag .dx-list-select-checkbox {
  margin-top: 0;
}

.dx-list-item-before-bag .dx-list-select-radiobutton {
  margin-top: -2px;
  margin-left: 0px;
}

.dx-list-item-before-bag.dx-list-select-checkbox-container {
  width: 27px;
}

.dx-list-item-before-bag.dx-list-select-radiobutton-container {
  width: 16px;
}

.checkbox-list .dx-list-item-before-bag,
.checkbox-list .dx-list-item-after-bag {
  display: inline-block;
  vertical-align: top;
  margin-top: 2px;
}

.checkbox-list .dx-list-item-content {
  overflow: visible;
  white-space: normal;
  display: inline-block;
  vertical-align: top;
  padding-top: 0px !important;
}

.checkbox-list .dx-list-item-before-bag .dx-list-select-checkbox {
  margin-left: 0px;
}

.checkbox-list .dx-list-item-before-bag.dx-list-select-checkbox-container {
  width: 16px;
}

.dx-radiogroup-vertical .dx-item-content {
  padding-top: 2px;
  color: @body-fore-color;
  font-family: @medium-font-family;
  font-size: @label-font-size;
  letter-spacing: 0.15px;
  line-height: 16px;
}

.button-group.dx-radiogroup.dx-radiogroup-horizontal {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.onboarding-flow .button-group.dx-radiogroup.dx-radiogroup-horizontal.yes-no-switch {
  width: 160px;
}

.dx-tagbox-popup-wrapper .dx-list-select-all {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected {
  background-color: @list-hover-color  !important;
  color: @body-fore-color  !important;
  font-family: @body-font-family;
}

.no-bg-color.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected {
  background-color: transparent !important;
}

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused {
  background-color: @list-hover-color;
  color: @body-fore-color;
}

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-hover {
  color: @body-fore-color
}

.dx-placeholder {
  color: @body-fore-color-opacity3;
  font-size: 12px;
  font-family: @medium-font-family;
  letter-spacing: 0.05px;
  line-height: 10px;
  width: 100%; // Sandip: I have set width to 100%, let me know before change it (if set to auto it leave some space at right side and text show with ellipsis)
}

.dx-textarea .dx-placeholder {
  line-height: 15px;
}

.dx-placeholder:before {
  padding: 8px 5px 8px 10px !important
}

.dx-button-content .dx-button-submit-input {
  display: none;
}

.dx-button .dx-button-content {
  padding: 5px 9px 6px
}

.dx-calendar .dx-button .dx-button-content {
  padding: 0
}

.dx-button .dx-loadindicator {
  height: 17px;
  width: 17px;
  vertical-align: middle;
  margin-right: 5px;
}

.dx-button .dx-loadindicator .dx-loadindicator-icon .dx-loadindicator-segment {
  background-color: @content-back-color
}

.dx-button.dx-state-focused {
  background-color: transparent
}

.dx-selectbox-popup-wrapper .dx-button {
  min-width: auto;
}

.dx-selectbox-popup-wrapper .dx-button.dx-state-hover {
  background-color: inherit !important;
}

// .dx-selectbox-popup-wrapper .dx-toolbar-button:first-child {float: right; padding-left: 10px; padding-right: 0px;}
.dx-selectbox-popup-wrapper .dx-toolbar-button .dx-popup-done.dx-button,
.dx-selectbox-popup-wrapper .dx-popup-done.dx-button:hover {
  background-color: @primary-color  !important;
  border-color: @primary-color  !important;
  color: @content-back-color  !important
}

// .dx-selectbox-popup-wrapper .dx-toolbar-button:last-child {float: right;}
.dx-selectbox-popup-wrapper .dx-toolbar {
  padding: 10px;
}

.dx-selectbox-popup-wrapper .dx-toolbar-items-container {
  height: 30px !important;
}

// .dx-selectbox-popup-wrapper .dx-toolbar-center {float: right !important;}
.dx-selectbox-popup-wrapper .dx-popup-content,
.dx-tagbox-popup-wrapper .dx-list-select-all {
  border-bottom: 1px solid @control-border-color
}

.dx-selectbox-popup-wrapper .dx-popup-content {
  max-height: inherit;
}

.dx-tag-content {
  font-size: 10px;
  border: 1px solid @control-border-color;
  border-radius: 4px;
  background-color: @default-tag-back-color;
  margin: 3px 0px 0px 4px;
  padding: 6px 25px 4px 6px;
}

.dx-tagbox .dx-tag-content {
  background-color: @body-fore-color-opacity1;
  border: 1px solid @content-back-color;
  padding-right: 24px;
  color: @body-fore-color;
  font-family: @medium-font-family;
  font-size: 11px;
  letter-spacing: 0.05px;
  line-height: 20px;
  padding: 0 7px;
  height: 20px;
  box-sizing: content-box;
  top: -1px !important;
}

.dx-tagbox .dx-tag-content .dx-tag-remove-button {
  position: relative;
  width: 11px !important;
  display: inline-block;
  height: auto !important;
  line-height: normal;
  margin-left: 5px;
}

.dx-tagbox .dx-tag-content .dx-tag-remove-button:before {
  position: relative;
  margin: 0;
  top: -1px !important;
  right: 0;
}

.dx-tagbox .dx-placeholder {
  right: 31px;
  overflow: hidden;
}

.dx-tagbox .dx-tag-content span {
  display: inline-block;
  vertical-align: middle;
}

.dx-tag-remove-button:before {
  content: "";
  background: url(../assets/images/popup_close_icon_black.svg);
  width: 11px;
  height: 11px;
  display: inline-block;
  vertical-align: middle;
  transform: scale(.83333333) rotate(0);
  -moz-transform: scale(.83333333) rotate(0);
  -ms-transform: scale(.83333333) rotate(0);
  -o-transform: scale(.83333333) rotate(0);
  -webkit-transform: scale(.83333333) rotate(0);
}

/*.dx-tag-remove-button:before {right: 9px; margin-top: -4px; width: 1px; height: 9px; background: @body-fore-color; opacity: 0.5;}
.dx-tag-remove-button:after { right: 5px; margin-top: 0px; height: 1px; width: 9px; background: @body-fore-color; opacity: 0.5;}*/
.dx-tag-remove-button:after {
  display: none
}

.dx-numberbox-spin-up-icon,
.dx-numberbox-spin-down-icon {
  color: @default-color  !important;
  background-color: transparent !important
}

.checkbox-list .dx-list-item-content,
.dx-list .dx-empty-message {
  padding: 3px;
}

.checkbox-list .dx-list-item,
.dx-list .dx-empty-message {
  border-top: none;
}

.checkbox-list .dx-checkbox {
  width: 100%;
}

.checkbox-list .dx-checkbox-text {
  white-space: normal !important;
  display: inline-block !important;
}

.checkbox-list .dx-scrollable-scrollbar {
  display: none;
}

// hide checkbox list scroll -- sandip
.dx-calendar-body .dx-state-hover,
.dx-calendar-body .dx-state-active,
.dx-calendar-body .dx-state-focused {
  border-color: transparent !important;
}

.dx-calendar .dx-button.dx-state-hover {
  background-color: @row-hover-color  !important;
}

.dx-calendar-cell.dx-state-hover {
  box-shadow: inset 0px -1px 0px 1000px @row-hover-color;
}

.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-contoured-date,
.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today.dx-calendar-contoured-date,
.dx-calendar-cell.dx-calendar-selected-date,
.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today {
  -webkit-box-shadow: inset 0 0 0 1000px @primary-color;
  -moz-box-shadow: inset 0 0 0 1000px @primary-color;
  box-shadow: inset 0 0 0 1000px @primary-color;
}

.dx-calendar-navigator .dx-calendar-caption-button.dx-button .dx-button-content,
.dx-calendar-navigator-previous-view.dx-button .dx-icon,
.dx-calendar-navigator-previous-month.dx-button .dx-icon,
.dx-calendar-navigator-next-view.dx-button .dx-icon,
.dx-calendar-navigator-next-month.dx-button .dx-icon {
  color: @primary-color
}

.dx-datebox-wrapper-calendar .dx-calendar {
  margin: 5px;
}

.dx-calendar-cell {
  font-size: 12px;
  padding: 4px;
  width: 30px;
}

.dx-calendar-cell.dx-calendar-empty-cell {
  opacity: 0.6;
  background-size: 13px;
  font-size: 11px;
  background-position-y: 8px;
}

.dx-calendar-navigator .dx-calendar-caption-button {
  font-size: 14px;
}

.dx-list .dx-empty-message {
  padding: 10px;
}

.form-field .dx-checkbox-text {
  white-space: nowrap
}

.form-field {
  max-width: 200px !important;
}

.form-field.width25 {
  max-width: 100px !important;
}

.form-field .formItem {
  width: 100%;
}

.multilineText {
  display: block !important;
  white-space: initial !important;
}

.form-field.width100,
.form-field.width66,
.form-field.col-span,
.form-field.width640px,
.form-field.standard-field-box-width,
.organisation-creation-wrapper .form-field,
.on-boarding-body .form-field {
  max-width: 100% !important;
  width: 100%;
}

.form-field.only-label-width100 {
  max-width: 100% !important;
  width: 100%;
}

.report-name-wrapper.form-field,
.viewPanel.sidebar-form.detail-setting-view .form-field {
  max-width: 100% !important;
}

.dx-button-primary-fore-color {
  color: @primary-color;
  border-color: @primary-color
}

.dx-numberbox-spin-down,
.dx-numberbox-spin-up {
  width: 100% !important;
  height: 50% !important;
  display: block !important;
}

.button-group .dx-radiobutton {
  position: relative;
  background: @content-back-color  !important;
  padding: 0;
}

.button-group .dx-radiobutton:before {
  content: "";
  border: 2px solid @control-border-color  !important;
  position: absolute;
  left: -1px;
  right: -1px;
  top: 0;
  bottom: 0;
  z-index: 0;
  ;
}

.button-group .dx-radiobutton:first-child:before {
  border-radius: 4px 0 0 4px;
  left: 0;
}

.button-group .dx-radiobutton:last-child:before {
  border-radius: 0 4px 4px 0;
  right: 0;
}

.button-group .dx-radiobutton {
  border-left: 0px !important;
  border-color: @control-border-color  !important;
}

.button-group .dx-radiobutton:first-child {
  border: 0;
  box-shadow: none !important;
}

.button-group.dx-invalid .dx-radiobutton:before {
  border-color: @control-validation-color  !important;
}

.button-group .dx-radiobutton.dx-radiobutton-checked {
  background: @primary-color  !important;
}

.button-group .dx-radiobutton.dx-radiobutton-checked.dx-state-hover,
.button-group .dx-radiobutton.dx-radiobutton-checked.dx-state-hover {
  background: @primary-color  !important;
}

.button-group .dx-radiobutton.dx-radiobutton-checked:before {
  border-color: @primary-color  !important;
  z-index: 2;
}

.button-group .dx-radiobutton.dx-state-hover:before,
.button-group .dx-radiobutton.dx-state-focused:before {
  border-color: @control-hover-border-color  !important;
  z-index: 2;
}

.button-group .dx-radiobutton.dx-radiobutton-checked.dx-state-hover:before,
.button-group .dx-radiobutton.dx-radiobutton-checked.dx-state-focused:before {
  border-color: @primary-color  !important;
  z-index: 2;
}

.custom-control-create-panel-wrapper.dynamic-fields .width25,
.custom-control-create-panel-wrapper.dynamic-fields .width50,
.custom-control-create-panel-wrapper.dynamic-fields .width75,
.custom-control-create-panel-wrapper.dynamic-fields .width100 {
  margin: 0;
}

// .button-group .dx-item-content {column-width: calc(100vw);}

.checkbox-group .dx-checkbox-container .dx-checkbox-icon {
  display: none !important;
}

.checkbox-group .dx-checkbox-container .dx-checkbox-text {
  vertical-align: initial !important;
}

.checkbox-group .dx-checkbox {
  border-left: 0px !important;
  border-color: @control-border-color  !important;
  border-radius: 0px !important;
}

.checkbox-group .dx-checkbox-checked {
  border-color: @primary-color  !important;
  box-shadow: -1px 0 0 0 @primary-color;
}

.checkbox-group .dx-checkbox-checked .dx-checkbox-text {
  color: @content-back-color;
}

.checkbox-group .first-child.dx-checkbox {
  border: 1px solid @control-border-color  !important;
  box-shadow: none !important;
  border-radius: 4px 0px 0px 4px !important;
}

// added custom 'first-child' class check create centre reference
.checkbox-group .first-child.dx-checkbox.dx-invalid {
  border-color: @control-validation-color  !important;
}

.checkbox-group .last-child.dx-checkbox {
  border-radius: 0px 4px 4px 0px !important;
}

// added custom 'last-child' class check create centre reference
.checkbox-group .dx-invalid {
  border-color: @control-validation-color  !important;
  border-left: 1px solid @control-validation-color  !important;
}

.checkbox-group .dx-invalid~.dx-invalid {
  border-left: 0px solid @control-validation-color  !important;
}

.dx-texteditor-buttons-container .dx-clear-button-area,
.dx-texteditor-buttons-container .dx-dropdowneditor-button,
.dx-texteditor-buttons-container .dx-numberbox-spin-container {
  width: 25px !important;
  padding: 0;
  margin: 0;
  min-width: 25px;
}

.dx-texteditor-buttons-container .dx-dropdowneditor-button .dx-dropdowneditor-icon {
  width: 25px;
  position: relative;
}

.dx-clear-button-area {
  min-width: 5px !important;
}

// .dx-datebox-date .dx-clear-button-area {margin-right: 5px;} Sandip: if you give right margin, check add session from onboarding, term date not fitt in textbox
.dx-show-clear-button .dx-icon-clear {
  color: @body-fore-color-opacity2;
  padding-right: 0px;
  padding-left: 0px;
}

.dx-tagbox-single-line .dx-tag-container {
  overflow: hidden !important;
}

.dx-tag-container .dx-tag:first-child {
  padding-left: 5px;
}

.dx-widget textarea {
  min-height: 80px;
}

.dx-accordion-item {
  border: 0px;
  width: 100%;
  border: 0px solid @dark-border-color;
  min-height: 30px;
}

.dx-accordion-item.dx-state-hover>.dx-accordion-item-title {
  background-color: @content-back-color  !important;
}

.dx-accordion-item.dx-state-hover,
.dx-accordion-item.dx-state-focused,
.dx-accordion-item.dx-state-active {
  background-color: @content-back-color  !important;
}

.dx-accordion-item-title {
  float: left;
  width: 100%;
  font-size: 14px;
  padding: 0;
  height: 30px;
  border-top: 1px solid @dark-border-color;
  padding-right: 10px;
  background-color: @content-back-color  !important;
}

.default-title-all-border .dx-accordion-item-title {
  border: 1px solid @dark-border-color  !important;
}

.default-title-all-border .dx-accordion-item-opened .dx-accordion-item-body {
  border: 1px solid @dark-border-color  !important;
  border-bottom: 0px !important;
}

.default-title-all-border .dx-accordion-item-opened>.dx-accordion-item-title {
  border-bottom: 0px !important;
}

.dx-accordion-item-title h1 {
  float: left;
  line-height: 30px;
  padding: 0px 10px;
  font-family: @semi-bold-font-family;
  font-size: 12px;
  letter-spacing: 0.05px;
}

.dx-accordion-item-title .link-action.status-text {
  font-family: @semi-bold-font-family;
  font-size: @label-font-size;
  letter-spacing: 0.15px;
  line-height: 30px;
  height: 30px;
  padding-right: 10px;
}

.dx-accordion-item-title:before {
  display: none;
}

.dx-accordion-item-body {
  padding: 0;
  width: 100%;
  font-size: 12px;
}

.dx-accordion-item-opened {
  border-color: @dark-border-color;
  border-top: 0 !important;
}

.dx-accordion-item-opened>.dx-accordion-item-title {
  border-bottom: 1px solid @dark-border-color  !important;
}

.dx-accordion-item-closed {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.dx-state-focused.dx-accordion-item {
  border-color: @dark-border-color;
}

.dx-accordion .dx-empty-message {
  padding: 10px;
}

.dx-dropdownlist-popup-wrapper .dx-list-select-all {
  padding: 5px 0px;
}

.dx-list-select-all .dx-list-select-all-checkbox {
  margin: 2px 0px -3px 10px;
}

.dx-list-select-all-label {
  padding-left: 7px;
}

.dx-radiogroup .dx-radiobutton {
  margin: 0;
}

// Profile Pic Icon with text
.description-line.break-line {
  white-space: normal !important;
}

.table_tr_img+span {
  vertical-align: middle;
}

.table_tr_img {
  width: 30px;
  height: 30px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  left: 0;
}

.table_tr_img img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  border-radius: 50%;
  cursor: default
}

.table_tr_img.no-border-radius,
.table_tr_img.no-border-radius img {
  border-radius: 0%;
}

.table_tr_img span.noimgname {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  top: 0;
  line-height: 30px;
  text-align: center;
  color: @content-back-color;
  font-family: @Regular-font-family;
  font-size: 12px;
  letter-spacing: 0.05px;
  text-transform: uppercase;
  cursor: default;
}

.table_tr_img.size25 {
  height: 25px;
  width: 25px;
}

.table_tr_img.size25 span.noimgname {
  line-height: 25px;
  font-size: 12px;
}

.table_tr_img.size40 {
  height: 40px;
  width: 40px;
}

.table_tr_img.size40 span.noimgname {
  line-height: 40px;
  font-size: 14px;
}

.table_tr_img.size60 {
  height: 60px;
  width: 60px;
}

.table_tr_img.size60 span.noimgname {
  line-height: 60px;
  font-size: 22px
}

.table_tr_img.size70 {
  height: 70px;
  width: 70px;
}

.table_tr_img.size70 span.noimgname {
  line-height: 70px;
  font-size: 22px
}

.table_tr_img.size80 {
  height: 80px;
  width: 80px;
}

.table_tr_img.size80 span.noimgname {
  line-height: 80px;
  font-family: @bold-font-family;
  font-size: 24px
}

.table_tr_img.size84 {
  height: 84px;
  width: 84px;
}

.table_tr_img.size84 span.noimgname {
  line-height: 84px;
  font-family: @bold-font-family;
  font-size: 24px
}

.table_tr_img.image-centre-align {
  float: none;
}

.table_tr_img.rectangle-100h-85w {
  height: 100px;
  width: 85px;
}

.table_tr_img.rectangle-100h-85w span.noimgname {
  font-size: 20px;
  line-height: 100px;
}

.table_tr_img.border-radius10 img {
  border-radius: 10px !important;
}

.grid-profile-pic-container .name-text-wrapper {
  width: calc(100% - 40px)
}

// apply in case we show profile image
.grid-profile-pic-container .name-text-wrapper.size60 {
  width: calc(100% - 70px)
}

.grid-profile-pic-container .name-text-wrapper.size70 {
  width: calc(100% - 80px)
}

.grid-profile-pic-container .name-text-wrapper.size80 {
  width: calc(100% - 90px)
}

.profile-image .table_tr_img {
  overflow: visible;
}

.profile-image .table_tr_img span.noimgname {
  border-radius: 50%;
}

.profile-image span.edit_profile_icon {
  background: @primary-color;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  position: absolute;
  z-index: 88;
  top: -2px;
  right: -2px;
  border: 2px solid @content-back-color;
  cursor: pointer;
}

.profile-image .size60 span.edit_profile_icon {
  width: 23px;
  height: 23px;
}

.profile-image span.edit_profile_icon svg {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  width: 10px;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.profile-image span.edit_profile_icon svg path {
  fill: @content-back-color;
}

.two-line-wrapper .primary-column {
  height: 17px;
}

.two-line-wrapper .secondary-column {
  padding-bottom: 0 !important;
  color: @body-fore-color-opacity8;
  cursor: default;
  line-height: 12px;
}

.single-line-wrapper {
  padding-top: 7px;
}

.address-selection-container .dx-texteditor-buttons-container .dx-clear-button-area {
  width: 16px !important
}

// create account
.account_profile_pic {
  width: 120px;
  height: 60px;
  border-radius: 4px;
}

.viewPanel-accordian .dx-item.dx-accordion-item.dx-accordion-item-closed {
  height: 70px !important;
}

.viewPanel-accordian.title-height70 .dx-accordion-item-title {
  min-height: 70px !important;
  border-top: 0px;
}

.viewPanel-accordian .dx-accordion-item-opened {
  padding-bottom: 0px !important;
}

.viewPanel-accordian.title-height70 .dx-accordion-item-title:before {
  top: 25px !important;
}

//Panel Accordion
.accordion-panel .dx-accordion {
  background-color: transparent;
}

.accordion-panel .dx-accordion-item {
  background-color: @content-back-color;
  border: 0px;
  margin: 10px 0px;
  padding: 10px 0px;
}

.accordion-panel .dx-accordion-item-title {
  border-bottom: 0px !important;
  padding-top: 10px;
}

.accordion-panel .dx-accordion-item-title:before {
  display: block;
  position: absolute;
  right: 35px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  font-size: @label-font-size;
}

// Child Enrolment session
.view-enrolment-sessions .dx-accordion-item-title {
  min-height: 80px !important;
  box-sizing: border-box;
  border-top: 0px;
}

.view-enrolment-sessions .session-table {
  width: 100%;
}

.view-enrolment-sessions .session-table tr {
  line-height: 20px;
}

.view-enrolment-sessions .session-table tr td {
  vertical-align: top;
  padding: 0px 5px;
}

.view-enrolment-sessions .session-table thead tr td {
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.05px;
  opacity: 0.6;
  font-size: 10px;
  margin-bottom: 3px;
}

// .dx-radiogroup .dx-radiobutton, .dx-radiogroup .dx-radiobutton-icon { margin: 2px 0;}
// Dev Extrem POP Over Styles
.dx-formdialog-form .dx-box {
  padding: 20px;
  padding-bottom: 0;
}

.dx-popup-content {
  padding: 0;
}

.dx-popup-title.dx-toolbar .dx-toolbar-label {
  font-size: 17px;
}

.dx-formdialog-field-target .dx-field-item-content {
  text-align: left;
}

.dx-formdialog-field-target .dx-field-item-content .dx-checkbox {
  width: 100%;
}

/*Validation*/
.dx-invalid-message {
  min-width: 150px;
  text-align: left;
  z-index: 9;
  transform: none !important;
}

.small-validation-message .dx-invalid-message {
  min-width: 80px;
}

.validation-message-width350px .dx-invalid-message {
  min-width: 350px !important;
}

.validation-message-width350px .dx-invalid-message>.dx-overlay-content {
  max-width: 350px !important;
}

.dx-invalid.dx-texteditor .dx-texteditor-input-container:after {
  display: none;
}

// hide default invalid error icon
.dx-invalid.dx-texteditor {
  border-color: @control-validation-color  !important;
}

.dx-invalid .dx-checkbox-container .dx-checkbox-icon {
  border: 1px solid @control-validation-color  !important;
}

.dx-invalid-message>.dx-overlay-content {
  background-color: @control-validation-overlay-color;
  border: 1px solid @control-validation-color;
  color: @control-validation-color;
  padding: 7px;
  white-space: normal;
}

// Sandip: I have add white-space: normal as in waitlist health section validation not show in multiple lines, I have removed max-width: 100% !important as in some case (add billing profile care selection validation message cut)
.dx-invalid-message .dx-overlay-wrapper:before {
  content: "\f0d8";
  border-top-color: @control-validation-color;
  color: @control-validation-color;
  top: -4px;
  left: 10px;
  position: absolute;
  font-family: 'fontawesome';
}

.dx-invalid-message>.dx-overlay-content {
  transform: translate(0px, 6px) !important;
  max-width: 100%;
}

.dx-datagrid .dx-error-row {
  display: none;
}

.dx-datagrid .dx-error-row .dx-error-message {
  background-color: @control-validation-overlay-color;
  color: @control-validation-color
}

.dx-datagrid .dx-error-row .dx-closebutton:before {
  color: @control-validation-color
}

.dx-checkbox .dx-invalid-message {
  position: absolute;
  min-width: 150px;
}

.dx-datebox.dx-auto-width.dx-dropdowneditor-button-visible .dx-texteditor-input {
  padding-right: 0px !important;
}

.overflow-validation-message-wrapper .dx-list-item {
  overflow: visible;
}

.overflow-validation-message-wrapper .dx-scrollable-content {
  overflow: visible !important;
}

// .dx-invalid-message.dx-overlay {position: relative;}
/* Validation message on Hover */
.dx-state-hover.dx-invalid .dx-invalid-message-auto .dx-overlay-wrapper,
.dx-lookup.dx-dropdowneditor-active .dx-invalid-message-auto .dx-overlay-wrapper,
.dx-invalid-message-always .dx-overlay-wrapper {
  visibility: visible;
}

.dx-texteditor.dx-invalid .dx-texteditor-input {
  padding-right: 10px !important;
}

/*cutom validation message for check box*/
.dx-checkbox-error-container.dx-invalid-message.dx-overlay {
  left: 100px;
  bottom: 10px;
}

.dx-checkbox-error-message.dx-resizable.dx-overlay-content {
  width: auto;
  height: auto;
  z-index: 1510;
  margin: 0px;
  left: 0px;
  top: 0px;
  transform: translate(-1px, -5px);
  max-width: 200px;
}

span.check-box-span:hover+.dx-checkbox-error-container.dx-invalid-message.dx-overlay .dx-invalid-message.dx-overlay-wrapper {
  visibility: visible !important;
}

// Grid
dx-data-grid {
  max-width: 100% !important;
}

.dx-datagrid-columns-separator {
  top: 0 !important;
  height: 100px !important;
  background-color: transparent !important;
}

.dx-datagrid-columns-separator:focus {
  outline-color: transparent !important;
}

.dx-datagrid-tracker {
  height: auto !important;
}

.dx-datagrid .dx-column-indicators {
  float: none !important;
}

// sort icon near to column
.dx-datagrid .dx-column-indicators {
  position: relative;
  top: -1px;
  height: 10px;
}


// .dx-datagrid-headers .dx-datagrid-table .dx-row > td {position: absolute;}
.dx-datagrid-nowrap .dx-header-row>td>.dx-datagrid-text-content {
  float: none;
  padding-right: 3px;
}

.dx-datagrid-nowrap .dx-header-row>td>.dx-text-content-alignment-left {
  float: left;
}

.dx-datagrid-nowrap .dx-header-row>td>.dx-text-content-alignment-right {
  width: 100%
}

.dx-datagrid {
  border: 1px solid @grid-border-color;
  border-top: 0px;
  border-radius: 0 0 1px 0;
  width: 100%;
}

// .no-border .dx-datagrid { border:0px}
.dx-datagrid {
  border: none;
  background-color: transparent !important;
}

.dx-datagrid-rowsview {
  border: 0;
}

.dx-datagrid-borders .dx-datagrid-rowsview,
.dx-datagrid-headers+.dx-datagrid-rowsview {
  border-top: 0;
}

.dx-datagrid-pager {
  border-top: 0px solid @default-border-color;
  padding-top: 10px !important;
}

.dx-datagrid-headers {
  border-bottom: 0;
  background: @content-back-color;
  padding-bottom: 0px;
  border-radius: 0 0 0 0;
  color: @body-fore-color;
  font-weight: @semi-bold-font-family;
  font-size: 10px;
  letter-spacing: 0.14px;
  // box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.03); // Remove shadow from grid header
}

// in fixed column header bottom border was cut, so apply below css
.grid-with-fixed-column .dx-datagrid-headers {
  overflow-y: hidden;
}

.grid-data-loading .dx-datagrid-headers tr {
  opacity: 0;
}

.dx-datagrid-headers .dx-select-count .dx-template-wrapper {
  font-style: italic;
  margin-left: 2px;
  color: @table-count-color;
  font-family: @medium-font-family;
  font-size: 10px;
  letter-spacing: 0.14px;
  line-height: 10px;
}

/*.dx-datagrid .dx-datagrid-content .dx-datagrid-table {border-collapse: separate !important;}*/
.dx-datagrid .dx-datagrid-rowsview .dx-row {
  border-top: 0px;
  border-bottom: 0;
  background: @content-back-color;
  opacity: 1 !important;
}

// in fixed column header bottom border was cut, so apply below css
.grid-with-fixed-column .dx-datagrid-headers {
  overflow-y: hidden;
}

// fixed-column grid content has z-index 2, so fixed header goes back of fixed content. To solve this we have to set fixed header z-index higher than fixed-content
[class*="grid-with-sticky-header-"].grid-with-fixed-column .dx-datagrid-headers {
  z-index: 3;
}

.grid-with-fixed-column .dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none,
.grid-with-fixed-column .dx-datagrid .dx-datagrid-rowsview .dx-data-row td.dx-pointer-events-none {
  border-left: 0px;
  border-right: 0px;
}

.dx-datagrid .dx-datagrid-rowsview .dx-data-row>td {
  border: 1px solid @control-border-color;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

// used in custom grid
.dx-datagrid .dx-datagrid-table.with-border .dx-header-row>td,
.dx-datagrid .dx-datagrid-table.with-border .dx-data-row>td {
  border: 1px solid @control-border-color  !important;
}

.dx-datagrid-rowsview .dx-row>td,
.dx-datagrid-rowsview .dx-row>tr>td {
  position: relative;
}

.dx-datagrid .dx-datagrid-rowsview .dx-row>td:first-child {
  border-radius: 0;
  border-left: 0px solid @control-border-color  !important;
}

.dx-datagrid .dx-datagrid-rowsview .dx-row>td:last-child {
  border-radius: 0;
  border-right: 0px solid @control-border-color  !important;
}

// set min height as in guardian list if only one row and invalid kioskcode enter it cut validation message
dx-data-grid.content-min-height-100px .dx-datagrid .dx-datagrid-rowsview .dx-scrollable-content {
  min-height: 100px;
}

.no-record-found-wrapper .no-record-found {
  color: @default-color;
}

/*.dx-datagrid .dx-datagrid-rowsview .dx-data-row:last-child > td:first-child{border-radius: 0 0 0 4px;}
.dx-datagrid .dx-datagrid-rowsview .dx-data-row:last-child > td:last-child{border-radius: 0 0 4px 0;}*/

.dx-datagrid .dx-datagrid-rowsview .dx-row:nth-last-child(2)>td:first-child {
  border-radius: 0 0 0 4px;
}

.dx-datagrid .dx-datagrid-rowsview .dx-row:nth-last-child(2)>td:last-child {
  border-radius: 0 0 4px 0;
}

.dx-datagrid-rowsview .dx-row:hover {
  background-color: @row-hover-color  !important;
}

.dx-datagrid-rowsview .dx-selection.dx-row:hover>td,
.dx-datagrid-rowsview .dx-selection.dx-row>tr>td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover>tr>td {
  background-color: @row-selected-color
}

.dx-datagrid .dx-column-lines>td {
  border: 0;
}

.dx-datagrid-rowsview .dx-selection.dx-row {
  background-color: @row-selected-color;
  background-image: -moz-linear-gradient(left, @row-selected-color 0%, @content-back-color 100%);
  background-image: -webkit-linear-gradient(left, @row-selected-color 0%, @content-back-color 100%);
  background-image: -ms-linear-gradient(left, @row-selected-color 0%, @content-back-color 100%);
  background-image: linear-gradient(to right, @row-selected-color 0%, @content-back-color 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@row-selected-color, endColorstr=@content-back-color, GradientType=1);
  background-attachment: fixed;
}

.dx-datagrid-rowsview .dx-selection.dx-row>td {
  background: transparent !important;
  color: @body-fore-color
}

.dx-datagrid .dx-row>td {
  padding: 0px 0px 0px 20px;
  opacity: @grid-text-opacity;
  vertical-align: middle !important;
  height: 50px;
}

.grid-row-height30 .dx-datagrid .dx-row>td {
  height: 30px;
}

.dx-datagrid .dx-row>td span {
  font-weight: normal !important;
}

.no-checkbox-selection .dx-datagrid .dx-data-row>td {
  padding: 3px 0px 3px 20px;
  font-weight: normal !important;
}

.dx-datagrid .dx-row>td.highlight-text,
.dx-datagrid .dx-row>td.highlight-text-wrapper,
.dx-datagrid .dx-row>td.dx-command-select,
.dx-header-row>td {
  opacity: @grid-highlight-text-opacity  !important;
}

// .dx-datagrid .dx-datagrid-rowsview .dx-row > td.link-action:hover {color: @primary-border-color; cursor: pointer;}
.dx-datagrid .dx-datagrid-rowsview .dx-row>td.link-action:hover {
  color: @primary-border-color;
}

// remove cursor property as it is confusing in family grid
.dx-datagrid-headers .dx-datagrid-table .dx-row>td {
  border: 0px;
  height: 30px;
  color: @body-fore-color-opacity9;
  font-family: @semi-bold-font-family;
  font-size: 10px;
  letter-spacing: 0.14px;
  line-height: 14px;
}

.multi-line-header .dx-datagrid .dx-datagrid-headers .dx-datagrid-table .dx-row>td {
  vertical-align: top !important;
  padding-top: 0px !important;
}

.dx-datagrid {
  background-color: @content-back-color;
  color: @body-fore-color;
  font-family: @medium-font-family;
  font-size: 12px;
  letter-spacing: 0.05px;
}

.dx-datagrid .dx-row>td.highlight-text,
.dx-datagrid .dx-row>td.highlight-text-wrapper,
.dx-datagrid .dx-row>td.dx-command-select,
.dx-header-row>td {
  font-family: @semi-bold-font-family;
}

.dx-datagrid-rowsview.dx-empty {
  background: @content-back-color;
}

.dx-checkbox-icon {
  border: 2px solid @body-fore-color-opacity2;
  background: @content-back-color
}


// fixed column
.dx-datagrid .dx-sort {
  color: @primary-color
}

.dx-datagrid .dx-sort .dx-sort-index-icon {
  display: none;
}

.dx-datagrid .dx-sort-none {
  color: @body-fore-color-opacity4;
  display: inline-block !important;
  font: 14px/1 DXIcons;
}

.dx-datagrid .dx-sort-up:before,
.dx-datagrid .dx-sort-none::before {
  content: '\f0d8';
  font-family: 'FontAwesome';
}

.dx-datagrid .dx-sort-down:before {
  content: '\f0d7';
  font-family: 'FontAwesome';
}

.dx-header-row .dx-sort-indicator.dx-text-content-alignment-left,
.dx-header-row .dx-header-filter-indicator.dx-text-content-alignment-left {
  margin-right: 0px;
}

.dx-header-row .dx-sort-indicator,
.dx-header-row .dx-header-filter-indicator {
  max-width: calc(100% - 10px);
}

.dx-checkbox.dx-state-readonly .dx-checkbox-icon {
  border-color: @control-default-border-color
}

.dx-datagrid td.actionColumn-wrapper {
  padding-left: 0 !important;
}

.dx-datagrid .actionColumn {
  cursor: pointer;
}

// set display none here to hide icons as default
.dx-datagrid-rowsview .dx-row:hover .actionColumn {
  display: block;
}

.dx-datagrid .actionColumn .column-icon,
.dx-datagrid .actionColumn i {
  vertical-align: middle;
  padding-left: 20px;
}

.dx-datagrid .dx-datagrid-table[style*="table-layout: fixed"] .actionColumn .column-icon,
.dx-datagrid .dx-datagrid-table[style*="table-layout: fixed"] .actionColumn i {
  padding-left: 20px;
}

.dx-datagrid-group-panel .dx-group-panel-message,
.dx-datagrid-group-panel .dx-group-panel-item {
  padding: 5px;
  font-size: 12px;
}

.dx-datagrid-drop-highlight td {
  background: @primary-fore-color  !important;
}

.dx-toolbar .dx-toolbar-menu-container {
  padding: 0px 5px;
}

.dx-toolbar-after .dx-toolbar-item:first-child {
  padding: 0px 5px;
}

.dx-datagrid-content .dx-datagrid-table .dx-row .dx-command-select {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  text-align: left !important;
  padding-left: 10px;
}

.dx-datagrid-checkbox-size {
  line-height: 50%
}

.dx-datagrid-checkbox-size .dx-checkbox-icon {
  height: 14px;
  width: 14px;
  font-size: 8px !important;
  border-radius: 2px;
}

.dx-datagrid .dx-checkbox-container {
  padding: 0;
}

.dx-datagrid .dx-context-menu {
  display: none;
}

.dx-datagrid .ant-tag {
  cursor: default;
}

.dx-datagrid .read-more-action {
  vertical-align: middle;
  height: 10px;
}

.dx-datagrid .read-more-action .ant-progress-text {
  display: none;
}

.dx-datagrid-headers .dx-texteditor-input,
.dx-datagrid-rowsview .dx-texteditor-input {
  padding: 0px 5px;
  min-height: 26px;
}

// .dx-datagrid-checkbox-size.dx-checkbox-indeterminate .dx-checkbox-icon:before {left: 3px; top: 3px;}

// Grid all page size
// .gridPageSizes_all .dx-page-sizes .dx-page-size:last-child {
//     font-size: 1px;
//     color: transparent
// }

// .gridPageSizes_all .dx-page-sizes .dx-page-size:last-child:after {
//     content: @gridMaxRecordsCountText;
//     min-width: 20px;
//     width: auto;
//     height: 20px;
//     line-height: 22px;
//     text-align: center;
//     border: 0;
//     color: @page-number-color;
//     font-family: @medium-font-family;
//     font-size: 10px;
//     letter-spacing: 0.04px;
// }

// END Grid all page size

.dx-datagrid-nodata {
  color: transparent;
  font-size: 0 !important;
  display: none;
}

.dx-datagrid-nodata:after {
  content: 'No records found';
  color: @default-color;
  margin-left: -70px;
  font-size: 17px !important;
}

.with-select-count .dx-command-select {
  width: 24px !important;
  min-width: 24px !important;
}

.with-select-count .dx-command-select {
  line-height: 12px;
}

.with-select-count .dx-select-count {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  padding: 7px 0 7px 3px !important;
  vertical-align: middle !important;
}

.dx-datagrid .cellImage {
  font-size: 14px;
  cursor: pointer;
  opacity: 0.3
}

.celltooltip.ant-tooltip {
  font-size: 11px;
  font-weight: normal;
}

.dx-datagrid .dx-freespace-row {
  display: none
}

.dx-pager {
  padding: 0;
}

.dx-pager .dx-pages .dx-info {
  display: inline-block;
  margin-right: 8px;
  color: @page-number-color;
  font-family: @medium-font-family;
  font-size: 10px;
  letter-spacing: 0.04px;
  line-height: 20px;
  height: 20px;
  vertical-align: top;
  opacity: 1 !important;
}

.dx-pager .dx-pages .dx-page {
  margin: 0 0 0 4px !important;
}

.dx-pager .dx-page-sizes .dx-page-size {
  margin: 0 4px 0 0 !important;
}

.dx-pager .dx-pages .dx-page,
.dx-pager .dx-page-sizes .dx-page-size {
  padding: 0 5px 0 4px;
  min-width: 20px;
  width: auto;
  height: 20px;
  line-height: 22px;
  text-align: center;
  border: 0;
  color: @page-number-color;
  border-radius: 4px;
  font-family: @medium-font-family;
  font-size: 10px;
  letter-spacing: 0.04px;
}

.dx-pager .dx-pages .dx-separator {
  padding-left: 8px;
  padding-right: 7px;
  font-family: @medium-font-family;
  font-size: 10px;
  color: @page-number-color;
  letter-spacing: 0.04px;
  height: 20px;
  line-height: 13px;
  display: inline-block;
  vertical-align: top;
  margin-left: 4px;
}

.dx-pager .dx-pages .dx-page:hover,
.dx-pager .dx-page-sizes .dx-page-size:hover {
  background: @page-number-back-color;
  color: @page-number-active-color
}

.dx-pager .dx-pages .dx-selection,
.dx-pager .dx-page-sizes .dx-selection {
  background-color: @page-number-back-color;
  color: @page-number-active-color
}

.gridPageSizes_all .dx-page-sizes .dx-page-size.dx-selection:last-child:after {
  color: @page-number-active-color
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-lines)>td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover:not(.dx-row-lines)>td {
  border-top: 0px;
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-lines):first-child>td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover:not(.dx-row-lines):first-child>td {
  border-top: 0px solid rgba(35, 36, 38, 0.1) !important;
}

.dx-datagrid .dx-scrollable-wrapper {
  display: contents;
}

// .dx-datagrid .dx-template-wrapper {height: 16px; line-height: 16px;}
.dx-datagrid .dx-template-wrapper .highlight-text {
  opacity: @grid-highlight-text-opacity  !important;
}

.dx-datagrid .dx-template-wrapper .img {
  height: 13px;
}

.grid-with-grouping .dx-datagrid .dx-group-row td {
  padding: 4px 0px 3px 0px;
  height: 30px;
}

.grid-with-grouping .dx-datagrid-headers td.dx-select-count {
  position: absolute;
  left: 25px;
}

.grid-with-grouping .dx-select-count .dx-template-wrapper {
  line-height: 15px;
}

.grid-with-grouping-no-selection .dx-datagrid .dx-scrollable-wrapper .dx-row td.dx-datagrid-group-space {
  padding: 7px 0px 7px 20px !important;
}

.grid-with-grouping-no-selection .dx-datagrid .dx-scrollable-wrapper .dx-row td.dx-datagrid-group-space.dx-datagrid-expand {
  padding: 0 !important;
}

.grid-with-grouping.one-level-group colgroup col:nth-child(1) {
  width: 30px !important;
}

.grid-with-grouping.two-level-group colgroup col:nth-child(1),
.grid-with-grouping.two-level-group colgroup col:nth-child(2) {
  width: 30px !important;
}

.grid-with-grouping.two-level-group.with-checkbox-selection colgroup col:nth-child(3) {
  width: 30px !important;
}


.dx-datagrid .dx-group-cell {
  color: @body-fore-color;
  text-transform: uppercase;
}

.dx-datagrid .dx-datagrid-table .dx-row .dx-command-expand.dx-datagrid-group-space {
  padding-top: 0;
}

.dx-datagrid-editable-input {
  width: 53px;
  height: 20px !important;
  border-radius: 4px;
}

.dx-datagrid-main-text {
  float: left;
  width: 100%;
}

.dx-datagrid-sub-text {
  float: left;
  margin: 0 !important;
  line-height: 10px !important;
  width: 100%;
}

.dx-datagrid-sub-text.inline-sub-text {
  float: left;
  margin: 0 !important;
  line-height: 15px !important;
  width: 67px;
  font-size: 10px;
}

.dx-datagrid-button {
  max-width: 85px;
  height: 20px;
  border-radius: 4px;
}

.dx-datagrid-button.dx-button.dx-state-hover {
  background-color: transparent !important;
  border-color: inherit !important
}

.dx-datagrid-success-button {
  background-color: @success-fore-color;
  border: 1px solid @success-border-color  !important;
  color: @success-color
}

.dx-datagrid-default-button {
  background-color: @primary-fore-color;
  border: 1px solid @primary-color  !important;
  color: @primary-color
}

.dx-datagrid-error-button {
  background-color: @primary-fore-color;
  border: 1px solid @red-color  !important;
  color: @red-color
}

.dx-datagrid-button .dx-button-content {
  padding: 0 9px !important;
}

.dx-datagrid-rowsview .dx-row.dx-group-row:not(.dx-row-focused) {
  color: @body-fore-color;
}

.group-cell-main-data {
  letter-spacing: 0.05px;
  margin-right: 10px;
  font-family: @semi-bold-font-family;
}

.group-cell-sub-data {
  color: @body-fore-color-opacity5;
  letter-spacing: 0.05px;
}

.dx-datagrid-focus-overlay {
  border: 0;
}

.dx-datagrid-group-opened,
.dx-datagrid-group-closed {
  width: 18px;
  font-size: 25px;
  padding-top: 2px;
}

// .dx-dropdowneditor-overlay .dx-overlay-content::before {content: '\f00c'; font-family: 'FontAwesome'; font-size: 10px; color: red; }
//.dx-datagrid-scroll-container {display: none;}

//dx-tree
.dx-treeview .dx-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened {
  text-align: center;
  line-height: 15px;
  color: @default-color-dark  !important;
}

.dx-treeview .dx-treeview-toggle-item-visibility {
  line-height: 15px;
  color: @default-color-dark  !important;
}

.dx-treeview-item-without-checkbox.dx-state-focused>.dx-treeview-item {
  background-color: transparent;
  color: @body-fore-color-opacity9;
}

.dx-treeview-item.dx-state-hover {
  background-color: transparent;
}

//End dx-tree

// grid header fix
/*.dx-datagrid.dx-gridbase-container .dx-datagrid-headers.dx-datagrid-nowrap {position: fixed;background: @content-back-color;z-index: 2;width: calc(100% - 60px);}
.dx-datagrid.dx-gridbase-container .dx-datagrid-rowsview {
    padding-top: 29px;
    z-index: 3;
}*/
.content-table-data-only .dx-datagrid.dx-gridbase-container .dx-datagrid-headers.dx-datagrid-nowrap {
  top: 155px;
}

// .single-tab-item .dx-datagrid.dx-gridbase-container .dx-datagrid-headers.dx-datagrid-nowrap {top: 200px;}
// .single-tab-item .dx-datagrid.dx-gridbase-container .dx-datagrid-headers.dx-datagrid-nowrap {top: 0px;}
.single-tab-item .content-table-data-only .dx-datagrid.dx-gridbase-container .dx-datagrid-headers.dx-datagrid-nowrap {
  top: 155px;
}

.fullHeight .dx-datagrid {
  min-height: calc(100vh - 175px);
}

.onboarding-flow .fullHeight .dx-datagrid {
  min-height: 358px
}

.single-tab-item .fullHeight .dx-datagrid {
  min-height: calc(100vh - 136px);
}

.tab-inside-tab-item {
  padding-top: 40px;
}

.tab-inside-tab-item .fullHeight .dx-datagrid {
  min-height: calc(100vh - 217px);
}

.fullHeight .dx-datagrid .dx-datagrid-rowsview {
  background-color: @content-back-color;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 0 0 5px 5px;
}

.content-table-data-only .dx-datagrid.dx-gridbase-container .dx-datagrid-rowsview {
  padding-top: 0px;
}

.grid-with-applied-filters .dx-datagrid.dx-gridbase-container .dx-datagrid-headers.dx-datagrid-nowrap {
  top: 270px;
}

.grid-content-scroll .dx-datagrid.dx-gridbase-container .dx-datagrid-headers.dx-datagrid-nowrap {
  position: relative;
  width: 100%;
  top: 0px;
}

.grid-content-scroll .dx-datagrid.dx-gridbase-container .dx-datagrid-rowsview {
  padding-top: 0;
}

.grid-content-scroll .dx-datagrid {
  width: 100%;
}

.single-tab-item-in-tab-control .dx-datagrid-headers {
  top: 5px;
  padding-bottom: 0px;
}

.single-tab-item-in-tab-control .grid-content-scroll .dx-datagrid.dx-gridbase-container .dx-datagrid-rowsview {
  padding-top: 0px;
}

.grid-with-grouping .dx-datagrid.dx-gridbase-container .dx-datagrid-rowsview {
  padding-top: 0px;
}

// .grid-with-grouping .dx-datagrid.dx-gridbase-container .dx-datagrid-headers.dx-datagrid-nowrap {padding-top: 8px;}
.grid-with-grouping .dx-datagrid-headers {
  padding-bottom: 0px;
}

.grid-without-border .dx-datagrid {
  border: 0;
}

// .no-checkbox-selection .dx-datagrid-headers {padding-bottom: 0px;padding-top: 8px;}


// Grid progress view
.dx-popover-wrapper .dx-overlay-content {
  position: static;
}

.grid-progress-view-wrapper {
  padding: 20px;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
}

.grid-progress-view-wrapper i {
  font-size: 13px;
  margin-right: 10px;
  color: @body-fore-color-opacity2;
}

.grid-progress-view-wrapper .progress-complete {
  opacity: 1;
  float: left;
}

.grid-progress-view-wrapper .progress-incomplete {
  color: @body-fore-color-opacity6;
  float: left;
}

.grid-progress-view-wrapper i.progress-complete {
  opacity: 1;
  color: @success-color;
}

.grid-progress-view-wrapper i.progress-incomplete {
  opacity: 0.2;
  color: @success-color;
}

.grid-progress-view-wrapper .item-wrapper {
  padding-top: 10px;
}

.grid-progress-view-wrapper .item-wrapper:first-child {
  padding-top: 0px;
}

// End Grid progress view

// Grid tooltip css
.grid-tooltip-border-bottom {
  border-bottom: 1px solid @dark-border-color;
}

.grid-tooltip-sub-text {
  font-size: 10px;
  opacity: 0.5;
  letter-spacing: 0.04px;
}

//date-box start
.dx-datebox {
  width: 100% !important
}

//date-box End

// Scroll
.dx-scrollable-scroll-content {
  background-color: @scroll-content-color;
  border-radius: 4px;
}

.dx-scrollbar-vertical .dx-scrollable-scroll {
  width: 8px;
  min-height: 35px;
  border-radius: 4px;
}

.dx-scrollbar-hoverable.dx-state-hover,
.dx-scrollbar-hoverable.dx-scrollable-scrollbar-active {
  background-color: transparent
}

.dx-scrollable-native.dx-scrollable-native-ios .dx-scrollable-content {
  min-height: 100% !important;
  padding: 0 !important;
}

.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-vertical .dx-scrollable-content,
.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-content {
  padding-right: 0px !important;
}

.dx-scrollbar-hoverable.dx-scrollable-scrollbar-active .dx-scrollable-scroll-content {
  background-color: @scroll-content-color
}

.dx-scrollbar-vertical.dx-scrollbar-hoverable.dx-state-hover .dx-scrollable-scroll,
.dx-scrollbar-vertical.dx-scrollbar-hoverable.dx-scrollable-scrollbar-active .dx-scrollable-scroll {
  width: 12px;
}

.dx-scrollbar-vertical.dx-scrollbar-hoverable.dx-state-hover,
.dx-scrollbar-vertical.dx-scrollbar-hoverable.dx-scrollable-scrollbar-active {
  width: 12px;
}

.dx-scrollbar-horizontal.dx-scrollbar-hoverable.dx-state-hover,
.dx-scrollbar-horizontal.dx-scrollbar-hoverable.dx-scrollable-scrollbar-active {
  height: 12px;
}

.dx-scrollbar-horizontal.dx-scrollbar-hoverable.dx-state-hover,
.dx-scrollbar-horizontal.dx-scrollbar-hoverable.dx-scrollable-scrollbar-active {
  height: 12px;
}

.dx-scrollbar-horizontal.dx-scrollbar-hoverable.dx-state-hover .dx-scrollable-scroll,
.dx-scrollbar-horizontal.dx-scrollbar-hoverable.dx-scrollable-scrollbar-active .dx-scrollable-scroll {
  height: 12px;
}

.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-horizontal .dx-scrollable-content,
.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-content {
  padding-bottom: 0px !important
}

.dx-scrollable-scrollbar.dx-scrollbar-vertical,
.dx-scrollable-scrollbar.dx-scrollbar-vertical.dx-state-hover {
  background-color: @content-back-color;
  border: solid 1px @default-border-color  !important;
  width: 14px !important;
  border-top: none;
  border-bottom: none;
}

.dx-datagrid-rowsview .dx-scrollable-scrollbar.dx-scrollbar-vertical,
.dx-datagrid-rowsview .dx-scrollable-scrollbar.dx-scrollbar-vertical.dx-state-hover {
  display: none;
}

.grid-content-scroll .dx-datagrid-rowsview .dx-scrollable-scrollbar.dx-scrollbar-vertical,
.grid-content-scroll .dx-datagrid-rowsview .dx-scrollable-scrollbar.dx-scrollbar-vertical.dx-state-hover {
  display: block;
}

.dx-scrollbar-vertical .dx-scrollable-scroll {
  width: 12px !important;
}

// .dx-scrollable-native.dx-scrollable-vertical, .dx-scrollable-native.dx-scrollable-vertical .dx-scrollable-container {width: 100%;}
// End Scroll

.popover-wrapper {
  margin-top: 4px;
  margin-left: 5px;
  height: 11px;
}

.profilepic-circle-small {
  background: @overly-back-color;
  font-size: 10px;
  color: @content-back-color;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  text-align: center;
  line-height: 15px;
  font-family: @bold-font-family;
}

.priority-one {
  background: @priority-one-color;
}

.priority-two {
  background: @priority-two-color;
}

.priority-three {
  background: @priority-three-color;
}

.progress-wrapper {
  padding-right: 30px;
  cursor: pointer;
}

.progress-outer {
  background: @default-border-color;
  width: 55px;
  border-radius: 100px;
  display: inline-block;
}

.progress-bg {
  height: 6px;
  background: @primary-color;
  border-radius: 100px;
  opacity: 0.5;
}

.ant-progress-text {
  color: @body-fore-color;
  opacity: @grid-text-opacity;
  font-size: @body-font-size;
}

// Ant Forms and Controls
button .anticon-spin {
  float: left;
}

.ant-input-number:focus,
.ant-input-number:hover,
.ant-input:focus,
.ant-input:hover,
.ant-select:focus,
.ant-select:hover,
.ant-select-focused .ant-select-selection,
.ant-select-selection:active,
.ant-select-selection:focus,
.ant-select-open .ant-select-selection {
  border-color: @primary-color  !important;
  box-shadow: none !important;
}

.top-filter span.control-label {
  height: 10px;
  line-height: 10px !important;
  margin-bottom: 4px !important;
  display: block;
  position: relative;
  top: -1px;
  color: @body-fore-color-opacity6  !important;
  font-size: 10px;
}

.ant-card,
.ant-form,
.ant-form-item,
.control-label,
.ant-input-number,
.ant-input,
.ant-select,
.ant-popover,
.ant-popover-message,
.ant-radio,
.ant-radio-group,
.ant-radio-wrapper,
.ant-checkbox,
.ant-checkbox-wrapper,
.ant-mention-dropdown,
.ant-menu,
.ant-menu-submenu-title,
.ant-dropdown-menu-submenu-title,
.ant-btn,
.ant-tabs,
.ant-tabs-nav-container,
.ant-tag,
.ant-time-picker-panel,
.ant-notification {
  font-family: @medium-font-family  !important;
  color: @body-fore-color  !important;
  font-size: @label-font-size;
  letter-spacing: 0.15px !important;
  line-height: @line-height14  !important;
}

.ant-dropdown-menu {
  min-width: 150px;
  padding: 8px 0
}

.ant-dropdown-menu-item {
  font-family: @medium-font-family  !important;
  color: @body-fore-color  !important;
  font-size: 12px;
  letter-spacing: 0.17px !important;
  line-height: 12px !important;
  position: relative;
  padding: 8px 24px 8px 56px !important;
}

.ant-dropdown-menu-item span.ant-dropdown-menu-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.ant-dropdown-menu-item span.ant-dropdown-menu-icon svg {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.ant-card {
  border-radius: 1px;
}

.ant-card-bordered {
  border: 0px;
}

.ant-select-search--inline {
  height: 99%;
}

.ant-btn-primary {
  background-color: @primary-color
}

.ant-btn-primary:focus,
.ant-btn-primary:hover {
  background-color: @primary-hover-color;
  border-color: @primary-border-color  !important;
  color: @content-back-color;
}

.ant-popover-message-title {
  line-height: 16px;
}

.ant-popover-message {
  padding-top: 0px;
}

.ant-popover-inner {
  box-shadow: none;
}

.ant-popover-inner-content {
  max-width: 300px;
  border: 1px solid @red-color;
  border-left-width: 4px;
  padding: 10px;
}

.ant-popover-message>.anticon {
  color: @red-color;
  font-size: 13px;
  line-height: 1;
  top: 1px
}

.ant-popover-placement-bottom .ant-popover-arrow,
.ant-popover-placement-bottomLeft .ant-popover-arrow,
.ant-popover-placement-bottomRight .ant-popover-arrow {
  border-left: 0;
  border-bottom: 0
}

.ant-popover-placement-top>.ant-popover-content>.ant-popover-arrow,
.ant-popover-placement-topLeft>.ant-popover-content>.ant-popover-arrow,
.ant-popover-placement-topRight>.ant-popover-content>.ant-popover-arrow {
  border-color: transparent @red-color @red-color transparent;
}

.ant-popover-arrow:before {
  content: "";
  position: absolute;
  background: @content-back-color;
  left: -7px;
  top: -7px;
  width: 10px;
  height: 10px;
}

.ant-popover-placement-left>.ant-popover-content>.ant-popover-arrow {
  border-left: 0;
  border-bottom: 0;
}

.ant-popover-placement-right>.ant-popover-content>.ant-popover-arrow {
  border-right: 0;
  border-top: 0;
}

.ant-popover-buttons .ant-btn {
  height: 30px;
  line-height: 15px;
  padding: 7px 18px 6px;
  background-color: @primary-color  !important;
  color: @content-back-color  !important;
}

.ant-popover .ant-btn-primary {
  background-color: @content-back-color  !important;
  color: @body-fore-color  !important;
}

.ant-btn:focus,
.ant-btn:hover {
  color: @primary-color;
}

.ant-input-number {
  width: 100%;
}

.ant-form-item {
  margin-bottom: 0px;
}

.ant-form-item.min-height-auto {
  min-height: 45px;
  margin-bottom: 0px;
}

.ant-form-item-control {
  line-height: inherit;
}

.has-error .ant-form-explain,
.ant-form-explain,
.ant-form-extra {
  font-size: 12px;
  font-weight: normal;
  margin-top: 0px;
}

.scrollToTop:focus,
.scrollToTop:hover {
  background: @primary-hover-color  !important;
  color: @primary-fore-color;
}

.ant-dropdown {
  margin-top: 0px !important;
  min-width: 130px;
}

.anticon-down:before {
  color: @default-color
}

.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-submenu-title:hover,
.manual-menu-item:hover {
  background-color: @list-hover-color;
}

.ant-input-group-compact .ant-input {
  width: 125px;
  text-align: center;
}

.ant-input-group-compact .ant-input-disabled {
  pointer-events: none;
  background-color: @content-back-color;
  width: 30px;
  border-left: 0px;
  border-right: 0px;
}

.ant-input-group.ant-input-group-compact>* {
  border-right-width: 1px;
}

.ant-select-selection__rendered {
  margin: 0;
  line-height: 28px;
}

.ant-select-selection-selected-value {
  padding-left: 10px;
  padding-right: 15px;
}

.ant-select-selection .ant-select-arrow {
  right: 5px;
}

.ant-select-dropdown-menu-item {
  font-family: @body-font-family;
  font-weight: normal;
  font-size: @body-font-size
}

.ant-select-dropdown-menu-item:hover {
  background-color: @row-hover-color  !important;
}

.ant-select-dropdown-menu-item-selected {
  background-color: @list-hover-color;
  font-weight: normal !important;
}

.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
  background-color: @list-hover-color  !important;
}

// Tab control
.manage-tab .ant-card-body {
  padding: 0;
  padding-top: 40px;
  background-color: @body-back-color;
}

.report-top-filter-container .ant-card-body {
  background-color: @white-color  !important;
  padding-top: 0px !important;
}

// .single-tab-item .ant-card-body {padding-top: 70px !important;}
.single-tab-item .ant-card-body {
  padding-top: 0px !important;
}

.manage-tab .ant-tabs-nav {
  padding-left: 0;
}

.ant-tabs-nav .ant-tabs-tab:hover {
  color: @primary-color;
}

.ant-tabs-nav .ant-tabs-tab {
  padding: 14px 10px !important;
  position: relative;
  height: 40px;
  border-radius: 0 !important;
  border: 0 !important;
  background: @content-back-color  !important;
  margin-right: 0px !important;
  vertical-align: top;
  margin-bottom: 0 !important;
  color: @body-fore-color-opacity9;
  font-family: @medium-font-family;
  font-size: 12px;
  letter-spacing: 0.24px;
  line-height: 12px !important;
}

// .ant-tabs-nav .ant-tabs-tab { padding: 14px 10px !important; position: relative; height: 40px; border-radius: 0 !important; border: 0 !important; background:@content-back-color !important;  margin-right: 0px !important; vertical-align: top; margin-bottom: 0 !important; color:@body-fore-color-opacity9; font-family:@medium-font-family; font-size: 12px;letter-spacing: 0.24px;line-height: 12px !important; max-width: 300px; float: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.family-details-tab-container .child-tab-start-3 .ant-tabs-nav .ant-tabs-tab:nth-child(3)+.ant-tabs-tab,
.family-details-tab-container .child-tab-start-2 .ant-tabs-nav .ant-tabs-tab:nth-child(2)+.ant-tabs-tab,
.family-details-tab-container .child-tab-start-1 .ant-tabs-nav .ant-tabs-tab:nth-child(1)+.ant-tabs-tab {
  margin-left: 20px !important;
  position: relative;
}

.family-details-tab-container .child-tab-start-3 .ant-tabs-nav .ant-tabs-tab:nth-child(3)+.ant-tabs-tab:before,
.family-details-tab-container .child-tab-start-2 .ant-tabs-nav .ant-tabs-tab:nth-child(2)+.ant-tabs-tab:before,
.family-details-tab-container .child-tab-start-1 .ant-tabs-nav .ant-tabs-tab:nth-child(1)+.ant-tabs-tab:before {
  content: "";
  background: #d8d8d8;
  position: absolute;
  left: -10px;
  top: 11px;
  width: 1px;
  height: 18px;
  border-radius: 2px;
}

.family-details-tab-container .child-tab-start-3 .tab-control .ant-tabs-nav .ant-tabs-tab:nth-child(3)+.ant-tabs-tab,
.family-details-tab-container .child-tab-start-2 .tab-control .ant-tabs-nav .ant-tabs-tab:nth-child(2)+.ant-tabs-tab,
.family-details-tab-container .child-tab-start-1 .tab-control .ant-tabs-nav .ant-tabs-tab:nth-child(1)+.ant-tabs-tab {
  margin-left: 0px !important;
}

.family-details-tab-container .child-tab-start-3 .tab-control .ant-tabs-nav .ant-tabs-tab:nth-child(3)+.ant-tabs-tab:before,
.family-details-tab-container .child-tab-start-2 .tab-control .ant-tabs-nav .ant-tabs-tab:nth-child(2)+.ant-tabs-tab:before,
.family-details-tab-container .child-tab-start-1 .tab-control .ant-tabs-nav .ant-tabs-tab:nth-child(1)+.ant-tabs-tab:before {
  content: none;
}

.no-vertical-line .ant-tabs-nav .ant-tabs-tab:nth-child(3)+.ant-tabs-tab {
  margin-left: 0px !important;
}

.no-vertical-line .ant-tabs-nav .ant-tabs-tab:nth-child(3)+.ant-tabs-tab:before {
  display: none;
}

.ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active {
  height: 40px;
  background: @primary-fore-color  !important;
  border: 0 !important;
  border-bottom: 4px solid @primary-color  !important;
  padding: 12px 10px !important;
  color: @primary-color  !important;
  font-size: 12px;
  letter-spacing: 0.24px;
  line-height: 12px !important;
  font-family: @semi-bold-font-family;
}

.ant-tabs-nav-wrap {
  margin-bottom: 0 !important;
}

.ant-tabs-ink-bar {
  background-color: @primary-color;
  height: 3px;
  opacity: 0;
}

.ant-tabs-bar {
  margin: 0 0 0;
  border: 0;
}

.ant-tabs-bar {
  position: fixed;
  top: 40px;
  z-index: 5;
  left: 40px;
  padding: 0 0 0 10px;
  right: 0;
  width: auto;
  background: @content-back-color;
  opacity: 1;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.ant-tabs-nav-container {
  margin-bottom: 0px;
}

.single-tab-item .ant-tabs-bar {
  border: 0
}

.content-tab {
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
}

.buttom-primary {
  font-size: 12px;
  padding: 9px 7px;
  background: @primary-color;
  font-family: @body-font-family;
  color: @primary-fore-color;
  border-radius: 4px;
  height: 30px;
  line-height: 1;
  display: inline-block;
  box-sizing: border-box;
  border: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.button-purple,
.primary-back-color.dx-state-focused {
  background-color: @purple-color;
  color: @primary-fore-color  !important;
  border-color: @purple-color  !important;
}

.button-group {
  width: 100%;
  display: table;

  &.custom-button-layout {
    .dx-radiobutton {
      -webkit-column-width: auto;
      /* Chrome, Safari, Opera */
      -moz-column-width: auto;
      /* Firefox */
      column-width: auto;
    }
  }

  .dx-collection {
    display: table-row;
  }

  .dx-radiobutton {
    margin-right: 0px;
    margin: 0;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    border: 0;
    border-left: 0;
    background: transparent;
    padding: 0px 5px !important;
    border-left: 1px solid @control-border-color;
    text-align: center;
    display: table-cell;
    float: none;
    // -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    // -moz-column-width: 100px; /* Firefox */
    // column-width: 100px;
  }

  .dx-radiobutton:first-child {
    border-radius: 4px 0 0 4px;
  }

  .dx-radiobutton:last-child {
    border-radius: 0 4px 4px 0;
  }

  .dx-radiobutton-checked {
    border-color: @primary-border-color;
    background: @primary-color;
    color: @primary-fore-color;
  }

  .dx-radio-value-container {
    display: none;
    padding-right: 6px;
  }

  .dx-item-content {
    width: 100%;
  }
}

.checkbox-group {
  width: 100%;
  display: contents;

  .dx-collection {
    display: table-row;
  }

  .dx-checkbox {
    margin-right: 0px;
    margin: 0;
    height: 28px;
    line-height: 26px;
    cursor: pointer;
    border: 1px solid @control-border-color;
    border-left: 0;
    background: @content-back-color;
    padding: 0 15px;
    border-left: 1px solid @control-border-color;
    text-align: center;
    display: table-cell;
    float: none;
    // -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    // -moz-column-width: 100px; /* Firefox */
    // column-width: 100px;
  }

  .dx-checkbox:first-child {
    border-radius: 4px 0 0 4px;
  }

  .dx-checkbox:last-child {
    border-radius: 0 4px 4px 0;
  }

  .dx-checkbox-checked {
    border-color: @primary-border-color;
    background: @primary-color;
    color: @primary-fore-color;
  }

  .dx-checkbox-icon {
    display: none;
    border-radius: 2px;
  }

  .dx-checkbox-text {
    margin-left: 0;
    padding-left: 0;
  }
}

.setting-radio-group {
  .dx-radiobutton-icon {
    height: 14px;
    width: 14px;
  }

  .dx-radiobutton-icon:before {
    box-sizing: border-box;
    height: 14px;
    width: 14px;
  }

  .dx-radiobutton-icon-checked .dx-radiobutton-icon-dot {
    margin-top: -10px;
    margin-left: 4px;
    width: 6px;
    height: 6px;
    background: @header-fore-color;
    border-radius: 10px;
  }

  .dx-radiobutton-icon-checked.dx-radiobutton-icon:before {
    border: 4px solid @primary-color;
    background-color: @content-back-color;
  }

  .dx-radiobutton.dx-state-focused:not(.dx-state-active) .dx-radiobutton-icon:before {
    border: 4px solid @primary-color;
  }

  // When user click on radio button and same time drag mouse without lifting and lift mouse from other outside area then this item got focused and focus class added to item and seems two values are selected
  // Bug 29979: when archiving the kinderpre session system is allow to select 2 radio button some time
  .dx-radiobutton.dx-state-focused:not(.dx-item-selected) .dx-radiobutton-icon:before {
    border: 2px solid @control-border-color;
  }

  .dx-radiobutton.dx-state-hover .dx-radiobutton-icon:before {
    border-color: @primary-color;
  }
}

// End Ant Forms and Controls

// Breadcrumb
.breadcrumb-wrapper {
  cursor: pointer;
  position: relative;
  top: 0;
  z-index: 6;
  background-color: transparent;
  padding: 0;
  font-size: 10px;
  font-family: @body-font-family;
  height: auto;
  min-height: inherit;
  line-height: 10px;
  color: @primary-fore-color;
  margin-left: 16px;
  letter-spacing: 0.14px;
}

.breadcrumb-wrapper .breadcrumb-text {
  cursor: pointer;
}

.breadcrumb-wrapper .breadcrumb-item-wrapper:last-child {
  color: @primary-fore-color;
  font-family: @body-font-family;
}

.breadcrumb-wrapper .left {
  font-family: @medium-font-family;
  letter-spacing: 0.14px;
}

.breadcrumb-wrapper .left.breadcrumb-text {
  font-family: @body-font-family;
  opacity: 0.8;
  letter-spacing: 0.14px;
}

.breadcrumb-wrapper .breadcrumb-item-wrapper:last-child .breadcrumb-text {
  cursor: default;
  font-family: @medium-font-family;
  font-size: 12px;
  opacity: 1;
}

.breadcrumb-wrapper .home-link {
  cursor: pointer;
}

.breadcrumb_arrow_main {
  padding: 0 5px 0 6px
}

// End Breadcrumb

// Filter table
// .top-filter { box-sizing: border-box; z-index: 4; width: calc(100% - 89px); padding: 20px 0px 0 0; margin: 0 0px 0 20px; position: fixed;  background-color: @body-back-color}
.top-filter .form-field a:hover {
  box-shadow: 0 4px 8px rgba(57, 155, 243, 0.2);
}

.top-filter .table-header {
  padding: 20px 10px 10px 10px;
  background-color: @content-back-color;
  border: 0px;
  border-radius: 0 4px 0px 0;
  display: inline-block;
  width: 100%;
}

.top-filter .form-field {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
  width: 190px;
}

.top-filter .form-field.no-label .formItem {
  width: auto !important;
}

.top-filter .form-field .formItem.filter-container {
  width: auto !important;
}

.top-filter .form-field .formItem.applied-filter-container {
  width: auto !important;
}

.top-filter .form-field a {
  margin-right: 20px;
  font-size: 12px;
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

.top-filter .form-field a:last-child {
  margin-right: 0;
}

.top-filter .form-field button {
  min-width: 80px;
  text-align: center;
  margin-right: 10px;
}

.top-filter .no-label {
  margin-top: 15px;
  vertical-align: top;
  margin-left: 10px;
}

.grid-with-sticky-header .top-filter {
  margin-top: 30px;
}

.grid-with-sticky-header-top80 .dx-datagrid-headers {
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
  z-index: 1;
  border-bottom: 1px solid @control-border-color ;
}

.grid-with-sticky-header-top90 .dx-datagrid-headers {
  position: -webkit-sticky;
  position: sticky;
  top: 90px;
  z-index: 1;
  border-bottom: 1px solid @control-border-color ;
}

.grid-with-sticky-header-without-tab-top40 .dx-datagrid-headers {
  position: -webkit-sticky;
  position: sticky;
  top: 40px;
  z-index: 1;
  border-bottom: 1px solid @control-border-color ;
}

.grid-with-sticky-header-top80 .dx-datagrid-rowsview .dx-datagrid-headers,
.grid-with-sticky-header-top90 .dx-datagrid-rowsview .dx-datagrid-headers,
.grid-with-sticky-header-without-tab-top40 .dx-datagrid-rowsview .dx-datagrid-headers {
  top: 0;
  height: 31px;
}

.bulk-action.query-button a.ant-dropdown-trigger {
  pointer-events: none;
}

.top-filter div.right .ant-btn {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}

.top-filter .fa {
  font-size: 14px;
}

.top-filter .select-drop-down .select2-container {
  width: 100% !important;
}

.top-filter div.right {
  display: inline-block;
  padding-right: 5px;
}

.top-filter div.right .form-field {
  text-align: right;
  margin-right: 0px;
}

.top-filter .bulk-action {
  text-align: left;
}

.top-filter .bulk-action .bulk-dropdown {
  height: 30px;
  border-radius: 4px;
  background-color: @primary-color;
  font-family: @semi-bold-font-family;
  text-align: center;
  padding: 0;
  color: @primary-fore-color;
  font-size: 12px;
  letter-spacing: 0.05px;
  line-height: 12px;
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.top-filter .bulk-action .bulk-dropdown a.ant-dropdown-trigger {
  padding: 8px;
  display: block;
  min-width: 30px;
}

.top-filter .bulk-action .bulk-dropdown:before {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: 0 5px 10px @primary-color;
  border-radius: 4px;
  opacity: 0.5;
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

.top-filter .bulk-action .bulk-dropdown .anticon-down:before {
  color: @primary-color;
}

.top-filter .button-wrapper .dx-button-content {
  padding: 0px 2px 0px 6px !important;
  height: 25px !important;
}

.bulk-dropdown-content {
  margin-top: 9px !important;
  left: 10px;
}

.top-filter .bulk-action ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-filter .bulk-btn {
  height: 30px;
  background-color: @content-back-color;
  display: inline-block;
  min-width: 110px;
  text-align: center;
  line-height: 30px;
  color: @body-fore-color;
  font-family: @body-font-family;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.05px;
  box-sizing: border-box;
}

.top-filter .bulk-btn:hover {
  color: @primary-color;
}

.top-filter .bulk-action {
  position: relative;
  display: inline-block;
}

.top-filter .plus-button-sec {
  display: inline-block;
  vertical-align: top;
  padding-left: 5px;
}

.action-column.small-plus-btn {
  width: 20px !important;
  padding: 0 5px 0 0 !important;
  box-sizing: content-box;
}

.summary-content-action-column .vertical-middle-display-table-cell {
  vertical-align: inherit;
  height: inherit;
  display: inherit;
}

.summary-content-action-column .plus-button-sec,
.small-plus-btn .plus-button-sec {
  display: inline-block;
  vertical-align: top;
}

.summary-content-action-column .plus-button-sec,
.small-plus-btn .plus-button-sec {
  padding-right: 0;
  height: 20px;
}

.summary-content-action-column .plus-btn,
.small-plus-btn .plus-btn {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background-color: @success-color;
  display: inline-block;
  position: relative;
}

.summary-content-action-column .plus-btn:before,
.small-plus-btn .plus-btn:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: 0 3px 7px @success-color;
  border-radius: 4px;
  opacity: 0.5;
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

.summary-content-action-column .plus-btn,
.small-plus-btn .plus-btn {
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

.summary-content-action-column .plus-btn:hover:before,
.small-plus-btn .plus-btn:hover:before {
  box-shadow: none;
}

.summary-content-action-column .plus-btn:after,
.small-plus-btn .plus-btn:after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 10px;
  height: 10px;
  content: "";
  background: url(../assets/images/summary-plus-icon.svg);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.plus-btn {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background-color: @success-color;
  display: inline-block;
  position: relative;
}

.plus-btn:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: 0 5px 10px @success-color;
  border-radius: 4px;
  opacity: 0.5;
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

.plus-btn:after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 15px;
  height: 14px;
  content: "";
  background: url(../assets/images/plus-icon-white.svg);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.top-filter .bulk-action .bulk-dropdown,
.plus-btn {
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

.top-filter .bulk-action .bulk-dropdown:hover:before,
.plus-btn:hover:before {
  box-shadow: none;
}

// .top-filter .plus-btn:before, .summary-content-action-column .plus-btn:before, .block-wrapper .header .plus-btn:before{ position: absolute; top: 50%; left: 50%; display: block; width: 16px; height: 2px; content: ""; background: @content-back-color; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); }
.top-filter .applied-filter-wrapper {
  margin-right: 10px;
}

.top-filter .filter-tag-wrapper {
  float: left;
}

.top-filter .filter-tag-wrapper .filter-tag-grouptext-wrapper {
  font-size: 10px;
  display: block;
  clear: both;
  opacity: 0.6;
}

.top-filter .filter-label {
  padding-right: 20px;
  padding-top: 10px;
}

.top-filter .ant-btn:focus,
.ant-btn:hover {
  border-color: @default-border-color
}

.top-filter .dx-button .dx-button-content {
  padding: 0px 17px;
  height: 28px;
  line-height: 25px;
  letter-spacing: 0.4px;
}

.top-filter .reset-wrapper {
  margin-left: 20px;
}

.top-filter .ant-tag {
  background-color: @default-tag-back-color;
  opacity: 0.6 !important;
}

.top-filter .applied-filter-tag {
  padding-left: 10px;
  padding-right: 10px
}

.top-filter .applied-filter-tag .ant-tag {
  background-color: @primary-selected-color;
  color: @primary-color  !important;
  border: 0;
  opacity: 1 !important;
}

.top-filter .filter-btn {
  background-color: @content-back-color;
  color: @primary-color  !important;
  border-color: @content-back-color  !important;
}

.top-filter .filter-btn .dx-button-content {
  padding: 0px 20px 0px 0px
}

.top-filter .filter-btn .dx-icon {
  font-size: 10px;
  color: @primary-color;
  width: 0;
  margin-right: 13px;
}

.top-filter .applied-filter-btn {
  background-color: @primary-selected-color;
  border-color: @primary-selected-color  !important;
  margin-right: 10px;
}

.top-filter .applied-filter-btn .dx-button-content {
  padding-left: 7px;
  padding-right: 10px;
}

.top-filter .bulk-action a.ant-dropdown-link:hover {
  color: @content-back-color  !important;
}

.top-filter .form-field a.search-wrapper,
.top-filter .form-field a.filter-wrapper,
.top-filter .form-field a.reset-wrapper {
  width: 40px;
  height: 30px;
  display: inline-block;
  vertical-align: top;
  margin: 0;
  position: relative;
}

.top-filter .form-field a.search-wrapper img,
.top-filter .form-field a.filter-wrapper img,
.top-filter .form-field a.reset-wrapper img,
.top-filter .form-field a.search-wrapper svg,
.top-filter .form-field a.filter-wrapper svg,
.top-filter .form-field a.reset-wrapper svg {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.top-filter .bulk-action .bulk-dropdown a.ant-dropdown-link span {
  display: none;
  vertical-align: middle;
  margin-right: 6px;
}

.top-filter .bulk-action .bulk-dropdown.only-icon a.ant-dropdown-link span {
  margin-right: 0px !important;
}

.top-filter .bulk-action .bulk-dropdown a.ant-dropdown-link img {
  display: inline-block;
  vertical-align: middle;
}

.search_line {
  width: 1px;
  height: 20px;
  border-radius: 4px;
  background-color: #212529;
  opacity: 0.2;
  vertical-align: top;
  margin: 5px 20px 0 20px;
  display: inline-block;
}

.top-filter .form-field a.filter-wrapper,
.top-filter .form-field a.reset-wrapper {
  margin-right: 10px;
}

.top-filter .form-field a.filter-wrapper span.count {
  right: 0px;
  top: 5px;
  position: absolute;
  left: auto;
}

// End Filter table
// Start Filter With Relative Position
.top-filter.relative-position {
  position: relative;
  top: 0;
  background-color: @content-back-color;
  padding: 0;
  margin: 0;
  width: 100%;
}

.top-filter.relative-position .table-header {
  border: 0;
  padding: 0;
}

// End Filter With Relative Position

// Filter Panel
.filterPanel,
.filterPanel .dx-scrollable-content {
  background-color: @right-panel-back-color
}

.filterPanel .right-pane {
  width: 440px;
  float: right;
}

.filterPanel .sub-container {
  padding-left: 15px;
}

.filterPanel hr.partition {
  width: 200%;
  margin-left: -40px;
  margin-top: 0px;
  border-color: @default-border-color
}

.filterPanel .dx-list-item.dx-state-hover {
  background-color: transparent !important
}

.filterPanel .filterRadioGroup {
  margin-top: 5px;
}

.filterPanel .filterRadioGroup .dx-radiobutton .dx-item-content {
  min-width: 82px;
}

.filterPanel .filterRadioGroup .ant-radio-group {
  margin-left: 10px
}

.filterPanel .filterRadioGroup .ant-radio-checked .ant-radio-inner {
  border-color: @primary-color
}

.filterPanel .filterRadioGroup .ant-radio-inner:after {
  background-color: @primary-color
}

.filterPanel .nz-group-filter-with-min-max .ant-input-number {
  width: 41px;
  text-align: center;
  padding: 0;
  border-width: 0 !important;
  border-color: #eaeaea;
}

.filterPanel .nz-group-filter-with-min-max .ant-input-number .ant-input-number-handler-wrap {
  display: none;
}

.filterPanel .nz-group-filter-with-min-max .filter-group-max-input-number {
  border-left: none;
  border-right-width: 1px;
}

.filterPanel .nz-group-filter-with-min-max .filter-group-min-max-seprator {
  width: 15px;
  border: 0px;
  pointer-events: none;
  background-color: rgb(255, 255, 255);
  text-align: center;
  padding: 0;
}

.filterPanel .nz-group-filter-with-min-max .ant-input-number-input {
  padding: 0 7px;
}

.range-input-control {
  width: calc(50% - 3px);
  border: 0px !important;
  height: 26px;
  float: left;
}

.range-input-wrapper {
  border: 2px solid @control-border-color;
  display: inline-flex;
  height: 30px;
  border-right-width: 2px !important;
  width: calc(100% - 87px);
}

.range-till-wrapper {
  height: 26px;
  color: @default-color;
  background-color: @content-back-color;
  line-height: 26px;
  float: left;
}

.filterPanel .nz-group-filter-with-min-max .ant-select-selection {
  border: none;
  border-right-width: 1px;
  width: 90px;
}

.filterPanel .ant-select-selection:focus {
  border-right: 1px solid @primary-border-color  !important;
}

.filterPanel .ant-input-group.ant-input-group-compact>.ant-select>.ant-select-selection {
  border-right: 2px solid;
}

.filterPanel .ant-select-selection {
  border: 2px solid #d9d9d9;
  border-top-width: 2px;
}

.filterPanel .ant-select-selection-selected-value {
  min-width: 88px;
}

.filterPanel .ant-select-selection--single {
  height: 30px;
}

.filterPanel .ant-calendar-picker {
  width: 100%;
}

.filterPanel .chk-filter-verticle-group {
  width: 100%;
  float: left;
}

.filterPanel .chk-filter-verticle-group .form-field {
  margin-bottom: 5px;
}

.filterPanel .chk-filter-verticle-group .form-field .dx-checkbox {
  width: 100%;
}

.filterPanel .chk-filter-verticle-group .form-field .dx-checkbox .dx-checkbox-text {
  white-space: pre-wrap
}

.filterPanel .dx-checkbox-indeterminate .dx-checkbox-icon {
  font-size: 8px
}

// set to transparent as it location is not accurate
.filterPanel .dx-checkbox-indeterminate .dx-checkbox-icon:before {
  color: @control-border-color;
  display: block;
}

// End Filter Panel

// Create Panel
.createPanel,
.createPanel .dx-scrollable-content {
  background-color: @right-panel-back-color
}

.createPanel .right-pane {
  width: 440px;
  float: left;
}

.createPanel hr.partition {
  width: 200%;
  margin-left: -40px;
  border-color: @default-border-color
}

.createPanel .dx-list-item.dx-state-hover {
  background-color: transparent !important
}

.createPanel .sub-container {
  padding-left: 15px;
}

.ant-input-group {
  border: 0px solid @control-border-color;
  border-radius: 4px;
}

.ant-input-group .dx-texteditor.dx-editor-outlined {
  border: 0px !important;
}

.ant-input-group:hover {
  border-color: @control-hover-border-color  !important;
}

.readonly-admin-contact-view {
  width: 100%;
  display: table;
  position: relative;
}

.readonly-admin-contact-view .profile-image-container {
  border-radius: 50%;
  object-fit: cover;
  background-color: @content-back-color;
  display: inline-block;
  font-size: 40px;
  line-height: 100px;
  text-align: center
}

.readonly-admin-contact-view .profile-image-container .img-wrapper {
  opacity: 0.4;
}

.profile-image-container {
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  font-size: 40px;
  line-height: 100px;
  text-align: center
}

.profile-image-container .img-wrapper {
  opacity: 0.4;
}

.readonly-admin-contact-view .user-detail-container {
  width: calc(100% - 100px);
  padding: 9px 10px 0px 20px;
  float: left;
}

.readonly-admin-contact-view .delete-details i {
  position: absolute;
  font-size: 14px;
  color: @red-color;
  cursor: pointer;
  right: 0
}

.readonly-admin-contact-view .user-detail-container .main-details {
  clear: both;
  float: left;
  width: 100%;
  line-height: 12px;
}

.readonly-admin-contact-view .user-detail-container .sub-details {
  font-size: 10px;
  opacity: 0.8;
  clear: both;
  float: left;
  width: 100%;
  line-height: 10px;
  margin-top: 4px;
}

.readonly-admin-contact-view .user-detail-container .primary-contact-wrapper {
  padding-top: 10px;
  display: inline-block;
  width: 100%;
}

.readonly-admin-contact-view .user-detail-container .primary-contact-wrapper-viewmode {
  padding-top: 4px;
  display: inline-block;
  width: 100%;
}

.readonly-admin-contact-view .user-detail-container .dx-checkbox {
  width: 100%;
}

.readonly-admin-contact-view .multiple-item-hr {
  margin-top: 20px !important;
}

.createPanel .read-only-group .create-panel-range-input.dx-invalid {
  border: 1px solid @control-validation-color  !important;
}

.range-input-control.single-input {
  width: 100% !important;
}

.createPanel .input-group-text {
  font-family: @body-font-family;
  font-size: 12px;
  color: @body-fore-color;
  border-color: @control-border-color
}

.input-group-with-readonly-text {
  background-color: @primary-fore-color;
  width: 87px;
  height: 30px;
  padding: 2px 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  min-width: 65px;
  display: inline-grid;
  border: 2px solid @control-border-color  !important;
}

.createPanel .input-group-prepend {
  margin: 0;
}

.createPanel .ant-select-selection--single {
  height: 30px;
}

// End Create Panel

.sidebar-box-sec {
  background-color: @right-panel-back-color;
  font-size: @label-font-size;
}

.sidebar-box-sec .viewPanel {
  border: 0;
}

.dynamic-createPanel {
  background-color: @right-panel-back-color;
  width: 100%;
  float: left;
}

.left-pane {
  width: 200px;
  float: left;
  height: 100vh;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  background: @left-pane-color;
}

.left-pane .tag-wrapper span.control-label {
  font-family: @semi-bold-font-family  !important;
  margin: 0;
}

ul.group-title {
  background: transparent
}

ul.group-title li {
  padding: 8px 20px 7px 20px !important;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: @body-fore-color-opacity6  !important;
  background: transparent;
  cursor: pointer;
  min-height: 30px;
  font-family: @medium-font-family  !important;
  font-size: 12px !important;
  letter-spacing: 0.05px !important;
  margin-top: 0 !important;
  line-height: 12px !important;
  margin-bottom: 2px !important;
  position: relative !important;
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

ul.group-title.multiline-menu li:before {
  bottom: 0;
}

ul.group-title li:before {
  content: "";
  min-height: 30px;
  position: absolute;
  left: -4px;
  top: 0;
  background: @primary-color;
  width: 4px;
  opacity: 0;
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

ul.group-title li:after {
  content: "";
  min-height: 30px;
  position: absolute;
  left: -4px;
  top: 0;
  box-shadow: 2px 0 6px @primary-color;
  width: 4px;
  opacity: 0;
  transition: all 0.5s ease 0s !important;
  -moz-transition: all 0.5s ease 0s !important;
  -ms-transition: all 0.5s ease 0s !important;
  -o-transition: all 0.5s ease 0s !important;
  -webkit-transition: all 0.5s ease 0s !important;
  transform: scaleY(1) !important;
  -moz-transform: scaleY(1) !important;
  -ms-transform: scaleY(1) !important;
  -o-transform: scaleY(1) !important;
  -webkit-transform: scaleY(1) !important;
  border: 0 !important
}

ul.group-title li:hover {
  background-color: @content-back-color;
  color: @body-fore-color;
}

ul.group-title li:hover:before {
  left: 0;
  opacity: 0;
}

ul.group-title li:hover:after {
  left: 0;
  opacity: 0;
}

ul.group-title li.ant-menu-item-selected,
ul.group-title li.ant-menu-submenu-open {
  background-color: @content-back-color  !important;
  color: @body-fore-color  !important;
  font-family: @semi-bold-font-family  !important;
}

ul.group-title li.ant-menu-item-selected:before,
ul.group-title li.ant-menu-submenu-open:before {
  left: 0;
  opacity: 1;
}

ul.group-title li.ant-menu-item-selected:after,
ul.group-title li.ant-menu-submenu-open:after {
  left: 0;
  opacity: 0.5;
}

ul.group-title li.ant-menu-submenu-open span {
  color: @body-fore-color  !important;
  font-family: @semi-bold-font-family  !important
}

ul.group-title li.padding_right0 {
  padding-right: 0px !important;
}

ul.group-title .ant-menu-submenu>.ant-menu {
  background-color: transparent;
}

ul.group-title.ant-menu li .ant-menu-submenu-title {
  height: auto !important;
  line-height: normal !important;
  margin: 0;
  padding: 0 !important;
}

ul.group-title .ant-menu-submenu.ant-menu-submenu-open>.ant-menu>ul>li:first-child {
  margin-top: 8px !important;
}

ul.group-title .ant-menu-submenu ul>li.ant-menu-item-selected:before {
  left: 0;
  opacity: 0;
}

ul.group-title .ant-menu-submenu ul>li.ant-menu-item-selected:after {
  left: 0;
  opacity: 0;
}

ul.group-title .ant-menu-item {
  line-height: normal !important;
  margin-top: 0 !important;
}

.dynamic-createPanel .right-pane {
  width: 440px;
  float: left;
  box-shadow: @setting-panel-box-shadow;
}

.dynamic-createPanel .sub-container {
  float: left;
  padding: 20px 25px 0px 10px;
}

.dynamic-section-sub-container,
.dynamic-createPanel .sub-container.dynamic-section-sub-container {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.waiting-list-formwithout-auth .dynamic-section-sub-container,
.waiting-list-formwithout-auth .sub-container.dynamic-section-sub-container {
  padding-left: 10px !important;
  padding-right: 30px !important;
}

.create-child-wrapper .dynamic-section-sub-container,
.create-child-wrapper .sub-container.dynamic-section-sub-container {
  padding-left: 10px !important;
  padding-right: 30px !important;
}

.dynamic-createPanel .colwidth25 {
  width: 25%;
  display: inline-block;
  vertical-align: top;
  padding: 0px 0px 20px 10px;
}

.dynamic-createPanel .colwidth33 {
  width: 33.33% !important;
  display: inline-block;
  vertical-align: top;
  padding: 0px 0px 20px 10px;
}

.dynamic-createPanel .colwidth50 {
  width: 50%;
  display: inline-block;
  vertical-align: top;
  padding: 0px 0px 20px 10px;
}

.dynamic-createPanel .colwidth66 {
  width: 66.66% !important;
  display: inline-block;
  vertical-align: top;
  padding: 0px 0px 20px 10px;
}

.dynamic-createPanel .colwidth75 {
  width: 75%;
  display: inline-block;
  vertical-align: top;
  padding: 0px 0px 20px 10px;
}

.dynamic-createPanel .colwidth100 {
  width: 100%;
  display: inline-block;
  vertical-align: top;
  padding: 0px 0px 20px 10px;
}

.dynamic-createPanel .sub-title {
  float: left;
  width: 100%;
}

.dynamic-createPanel .sub-title.margin_top0 {
  margin-top: 0px !important;
}

.dynamic-createPanel hr.partition {
  width: 200%;
  margin-left: -40px;
  border-color: @default-border-color;
  display: inline-block;
}

.dynamic-createPanel .multiple-item-hr {
  float: left;
  width: 150%;
  border-top-width: 1px;
  margin: 20px 0px 0px -40px !important;
}

.dynamic-createPanel .multiple-item-hr.margin_top0 {
  margin-top: 0px !important;
}

.dynamic-createPanel .multiple-item-hr.margin_top15 {
  margin-top: 15px !important;
}

.dynamic-createPanel .multiple-item-hr.margin_bottom20 {
  margin-bottom: 20px !important;
}

.left-pane .multiple-item-hr {
  width: 100% !important;
  margin: 20px 0 0 !important;
  display: block !important;
}

.dynamic-createPanel .multiple-item-hr-wrapper {
  float: left;
  width: 150%;
  border-top-width: 1px;
  margin: 20px 0 20px -40px !important;
}

// FileUpload
.fileLoader {
  border: 4px solid @progress-circle-active-border-color;
  border-radius: 50%;
  border-top: 4px solid @progress-circle-default-border-color;
  width: 18px;
  height: 18px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.dx-fileuploader-file-size,
.dx-fileuploader-file-status-message {
  display: none;
}

.dx-fileuploader-file-container {
  padding-bottom: 0;
  display: none;
}

.dx-fileuploader-file-container .dx-fileuploader-file {
  line-height: 10px;
}

.dx-fileuploader-file-container .dx-fileuploader-button {
  height: 20px;
  width: 20px;
}

.dx-fileuploader-file-container .dx-fileuploader-button:hover {
  border-color: @dark-border-color  !important;
  background-color: @content-back-color;
}

.dx-fileuploader-file-container .dx-fileuploader-button .dx-button-content .dx-icon-close {
  font-size: 13px;
}

.file-upload-wrapper .ant-upload.ant-upload-drag p.ant-upload-drag-icon .anticon,
.file-upload-wrapper .ant-upload.ant-upload-drag p.ant-upload-text {
  color: @default-color  !important;
}

.file-upload-wrapper .ant-upload.ant-upload-drag p.ant-upload-text {
  margin: 0px;
  font-size: @body-font-size;
  font-weight: normal;
  font-family: @body-font-family
}

.file-upload-wrapper .ant-upload.ant-upload-drag p.ant-upload-drag-icon {
  margin: 10px 0
}

.file-upload-wrapper .ant-upload.ant-upload-drag p.ant-upload-drag-icon .anticon {
  font-size: 36px;
}

.file-upload-wrapper .ant-upload-list-item:hover .ant-upload-list-item-info {
  background-color: transparent;
}

.dx-fileuploader-input-wrapper::after {
  display: none;
}

.file-name {
  font-size: 10px;
  color: @body-fore-color-opacity6;
  letter-spacing: 0.14px;
  line-height: 11px;
  text-decoration: underline;
}

.uploaded-files-wrapper .file-name {
  width: calc(100% - 50px);
  line-height: 16px;
  font-size: 12px;
}

.uploaded-files-wrapper.view-mode .file-name {
  font-size: 10px;
}

.uploaded-files-wrapper.view-mode .box-view-wrapper {
  padding: 10px;
  height: 35px;
  background-color: @right-panel-back-color;
  border: 1px solid @control-border-color;
}

.panel-file-upload-wrapper .upload-container {
  display: inline-block;
}

.panel-file-upload-wrapper .ant-upload.ant-upload-drag {
  background: @flat-color;
}

.panel-file-upload-wrapper .ant-upload-drag-container {
  line-height: 0.5;
}

.panel-file-upload-wrapper .ant-upload-drag-icon i {
  font-size: 32px;
  float: left;
}

.panel-file-upload-wrapper .separator {
  border-right: 2px solid @default-border-color;
  margin: 0px 5px;
  float: left;
  height: 32px;
}

.panel-file-upload-wrapper .icon-title {
  line-height: 32px;
  color: @default-color;
  float: left;
  margin: 0 10px;
}

.dx-fileuploader-wrapper {
  padding: 0;
}

.dx-fileuploader-input-wrapper .dx-button {
  width: 50%;
  text-align: center;
  border: 2px dashed @control-border-color  !important;
  border-right: 0 !important;
  border-radius: 4px 0 0 4px;
  position: relative;
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

.dx-fileuploader-input-wrapper .dx-button .dx-button-content {
  padding: 0 10px;
}

.dx-fileuploader-input-wrapper .dx-button .dx-button-content .dx-button-text {
  margin-left: 0;
  vertical-align: super;
  color: @body-fore-color-opacity5;
  font-family: @medium-font-family;
  font-size: 12px;
  letter-spacing: 0.05px;
  line-height: 12px;
  padding: 17px 0;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.dx-fileuploader-input-wrapper .dx-button .dx-button-content svg,
.dx-fileuploader-input-wrapper .dx-fileuploader-input-container svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px
}

.dx-fileuploader-input-wrapper .dx-button .dx-button-content .dx-button-text svg,
.dx-fileuploader-input-wrapper .dx-fileuploader-input-label svg {
  display: inline-block;
}

.dx-fileuploader-input-wrapper .dx-button .dx-button-content svg .attach_file_icon,
.dx-fileuploader-input-wrapper .dx-fileuploader-input-container svg .drop_file_icon {
  fill: @body-fore-color-opacity4;
}

.dx-fileuploader-input-wrapper .dx-button .dx-button-content:before {
  content: "\f0c6";
  font-family: "FontAwesome" !important;
  color: @body-fore-color-opacity4;
  font-size: 17px;
  display: inline-block;
  position: relative;
  padding-right: 10px;
  transform: rotateX(0) rotateY(180deg) rotateZ(-136deg) scale(1.4);
  -moz-transform: rotateX(0) rotateY(180deg) rotateZ(-136deg) scale(1.4);
  -ms-transform: rotateX(0) rotateY(180deg) rotateZ(-136deg) scale(1.4);
  -o-transform: rotateX(0) rotateY(180deg) rotateZ(-136deg) scale(1.4);
  -webkit-transform: rotateX(0) rotateY(180deg) rotateZ(-136deg) scale(1.4);
  top: -1px;
}

.dx-fileuploader-input-wrapper .dx-button.dx-state-hover {
  background: @content-back-color;
}

.dx-fileuploader-input-wrapper {
  border: 0;
  transition: border-color 0.3s;
  cursor: pointer;
  border-radius: 0;
  text-align: center;
  position: relative;
  padding: 0;
  height: 50px;
  background: transparent;
}

.dx-fileuploader-input-wrapper .dx-button+.dx-fileuploader-input-container:before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  background: @dark-border-color;
  width: 2px;
  height: 20px;
}

.dx-fileuploader-input-container {
  width: 50%;
  float: right;
  text-align: center;
  position: relative;
  border: 2px dashed @control-border-color  !important;
  border-left: 0 !important;
  border-radius: 0 4px 4px 0;
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  background: @content-back-color;
}

.dx-fileuploader-input-label {
  vertical-align: super;
  color: @body-fore-color-opacity5;
  font-family: @medium-font-family;
  font-size: 12px;
  letter-spacing: 0.05px;
  line-height: 12px;
  padding: 17px 0 !important;
  min-height: 46px;
  width: auto;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.dx-fileuploader-input-container input.dx-fileuploader-input {
  padding: @label-font-size 0;
  height: auto;
  min-height: 46px;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
}

.dx-fileuploader-show-file-list .dx-fileuploader-files-container {
  padding-top: 0;
}

/** File Hover and File Dragover Css **/
.dx-fileuploader-input-wrapper .dx-button.dx-state-hover {
  width: 100%;
  border-radius: 4px;
  border-right: 2px dashed @control-hover-border-color  !important;
  border-color: @control-hover-border-color  !important;
}

.dx-fileuploader-input-wrapper .dx-button.dx-state-hover .dx-button-content .dx-button-text {
  color: @body-fore-color;
  opacity: 1;
}

.dx-fileuploader-input-wrapper .dx-button.dx-state-hover+.dx-fileuploader-input-container {
  width: 0;
  opacity: 0;
  border: 0 !important;
}

.dx-fileuploader-input-wrapper .dx-button.dx-state-hover .dx-button-content svg .attach_file_icon {
  fill: @primary-color;
  opacity: 1;
}

.dx-fileuploader-input-wrapper .dx-button.dx-state-hover .dx-button-content:before {
  color: @primary-color  !important;
  opacity: 1;
}

.dx-fileuploader-dragover .dx-fileuploader-input-wrapper .dx-button {
  width: 0;
  opacity: 0;
  border: 0 !important;
  display: inline-block !important
}

.dx-fileuploader-dragover .dx-fileuploader-input-container {
  width: 100%;
  border-left: 2px dashed @control-hover-border-color  !important;
  border-color: @control-hover-border-color  !important;
  border-radius: 4px;
}

.dx-fileuploader-dragover .dx-fileuploader-input-container:before {
  opacity: 0;
}

.dx-fileuploader-dragover .dx-fileuploader-input-container .dx-fileuploader-input-label {
  color: @body-fore-color;
  opacity: 1;
}

.dx-fileuploader-dragover .dx-fileuploader-input-wrapper .dx-fileuploader-input-container svg .drop_file_icon {
  fill: @primary-color;
  opacity: 1;
}

// End FileUpload

// create guardian
#chkAddGuardianDefaultName {
  width: 196px;
}

// Card Image
.card-number-with-type-image {
  position: relative;
}

.card-number-with-type-image img {
  position: absolute;
  top: 6px;
  right: 5px;
}

.icon-inside-text {
  position: absolute !important;
  top: 9px !important;
  right: 5px !important;
}

// end Card Image

// Error Notification
.ant-notification-notice-close {
  color: @body-fore-color;
  top: 0px;
  right: 20px;
}

.ant-notification-notice-close::after {
  font-size: 15px;
}

.ant-notification-notice {
  padding: 18px 17px 20px
}

.error-container .ant-notification-notice-icon {
  margin-left: 0;
}

.ant-notification-notice-with-icon .ant-notification-notice-message {
  margin-left: 15px;
}

.ant-notification-notice-with-icon .ant-notification-notice-description {
  margin-left: 40px;
}

.error-notification-container {
  display: none;
}

.ant-notification-notice-with-icon .ant-notification-notice-description .report-link {
  color: @primary-color
}

.ant-notification-notice-with-icon .ant-notification-notice-description .report-link:hover {
  color: @primary-color
}

.error-container .ant-notification-notice-icon {
  color: @asterisk-validation-primary-color
}

.ant-notification-notice-content .error-header {
  font-size: 16px;
  font-family: @semi-bold-font-family
}

// End

.tag label {
  margin-bottom: 0;
  border-radius: 1px;
  background-color: @primary-color;
  position: relative;
  color: @primary-fore-color;
  font-family: @body-font-family;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06px;
  min-width: 22px;
  text-align: center;
  margin-left: 6px;
}

.tag label:after {
  position: absolute;
  left: -6px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid @primary-color;
  display: block;
  content: "";
}

.success-progress .ant-progress-bg {
  background-color: @success-color;
}

// right-panel style
.pane-width760 {
  width: 760px !important;
}

.right-pane-width760 {
  width: 760px !important;
}

.right-pane-width790 {
  width: 790px !important;
}

.right-pane-width550 {
  width: 550px !important;
}

.right-pane-width805 {
  width: 805px !important;
}

.right-pane-width448 {
  width: 448px !important;
}

.right-panel-wrapper nz-form-control {
  padding-left: 0 !important;
  padding-right: 0 !important
}

.right-panel-wrapper .control-label {
  font-size: @label-font-size;
  line-height: 15px !important;
  letter-spacing: 0.15px !important;
  display: block;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  font-family: @medium-font-family  !important;
  color: @body-fore-color  !important
}

.right-panel-wrapper .control-label.color9,
.right-panel-wrapper .viewPanel .control-label.color9 {
  color: @body-fore-color-opacity9  !important;
}

.right-panel-wrapper .control-label.font-size10 {
  font-size: 10px !important;
}

.right-panel-wrapper .control-label.bold-font {
  .bold-font();
}

.right-panel-wrapper .createPanel .control-label.multi-line-control-label {
  white-space: pre-wrap !important;
}

.right-panel-wrapper .ant-form-item {
  min-height: 50px
}

.right-panel-wrapper .multiple-item-hr {
  width: 150%;
  border-top-width: 1px;
  margin: 20px 0 20px -40px;
  border-color: @default-hr-color;
  float: left;
  overflow: hidden;
}

.right-panel-wrapper .multiple-item-hr.before-space {
  margin-left: 5px !important;
}

.right-panel-wrapper .viewPanel .multiple-item-hr {
  margin-top: 0px;
}

.right-panel-wrapper .createPanel .care-type-template .dx-list-item.dx-list-item-selected {
  background-color: @right-panel-back-color  !important;
}

.right-panel-wrapper .createPanel .care-type-template .dx-list-item.dx-state-focused,
.right-panel-wrapper .createPanel .care-type-template .dx-list-item.dx-list-item-selected,
.right-panel-wrapper .createPanel .care-type-template .dx-list-item.dx-list-item-focused,
.right-panel-wrapper .createPanel .care-type-template .dx-list-item.dx-state-hover {
  background-color: transparent !important;
  color: #333333 !important;
}

.right-panel-wrapper .card-number-with-type-image img {
  height: 20px;
  width: 30px;
}

.right-panel-wrapper .dynamic-createPanel .multiple-item-hr {
  display: block;
  margin-top: 0px !important;
  margin-bottom: 20px !important;
}

.right-panel-wrapper .dynamic-createPanel .multiple-item-hr.margin_bottom0 {
  margin-bottom: 0px !important;
}

.right-panel-wrapper .dynamic-createPanel .multiple-item-hr.margin_top20 {
  margin-top: 20px !important;
}

.right-panel-wrapper .viewPanel .control-label.multi-line-control-label {
  line-height: 14px !important;
}

.form-footer {
  background: @content-back-color;
  padding: 10px 30px 10px 20px;
  border-radius: 0 0 1px 1px;
  border-top: 2px solid @control-border-color;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 99;
}

.right-pane .form-footer {
  width: 440px;
  float: left;
  box-shadow: @setting-panel-box-shadow;
}

.right-pane .form-footer-width760 {
  width: 760px;
}

.right-pane .form-footer-width790 {
  width: 790px;
}

.right-pane .form-footer-width550 {
  width: 550px;
}

.right-pane .form-footer-width805 {
  width: 805px;
}

.form-footer .buttom-primary {
  min-width: 118px;
  text-align: center
}

.form-footer .button-secondary {
  min-width: 80px;
  text-align: center
}

.form-footer .dx-button,
.configuration-footer .dx-button {
  min-width: 60px;
}

.sidebar-form .sub-title {
  padding: 8px 30px 8px 20px;
  background: @right-pane-title-back-color;
  margin-bottom: 0;
  width: 100%;
  float: left;
}

.sub-section-title {
  color: @body-fore-color;
  font-family: @semi-bold-font-family;
}

.sidebar-form .sub-title:first-child {
  margin-top: 0px !important
}

.sidebar-form .title-box.success {
  border-bottom: 2px solid @right-panel-header-success-border-color
}

.sidebar-form .title-box.default {
  border-bottom: 2px solid @right-panel-header-default-border-color
}

.sidebar-form .title-box.warning {
  border-bottom: 2px solid @right-panel-header-warning-border-color
}

.sidebar-form .sub-title h3 {
  margin-bottom: 0;
  color: @body-fore-color;
  font-family: @semi-bold-font-family;
  font-size: 14px;
  letter-spacing: 0.06px;
  line-height: 14px;
}

.sidebar-form .container {
  padding: 0 20px
}

form .ant-input-group-wrapper,
form :not(.ant-input-group-wrapper)>.ant-input-group {
  display: flex;
  height: 30px;
}

.ant-input-group .ant-select-selector {
  padding: 0 5px !important;
}

.ant-input-group .ant-select-selector .ant-select-selection-item {
  padding-right: 10px;
}

.panel-backdrop {
  overflow: hidden
}

.sub-container {
  padding: 20px 25px 0px 20px;
  width: 100%;
  float: left;
  background-color: @right-panel-back-color;
}

.inner-sec {
  height: calc(100vh - 94px);
}

.inner-sec.height-370px {
  max-height: calc(100vh - 370px);
  height: 100%;
}

.inner-sec.height-430px {
  max-height: calc(100vh - 430px);
  height: 100%;
}

.dx-scrollable-wrapper {
  max-height: inherit;
}

.dx-scrollable-container {
  max-height: inherit;
}

.sidebar-form .form-field,
.organisation-creation-wrapper .form-field {
  width: 50%;
  padding: 0 5px;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  margin-right: 0;
  margin-bottom: 20px;
}

.form-field.col-span {
  width: 100%;
}

.form-field.only-label-width100 {
  width: 100%;
}

.form-field.only-label-width100 .control-label {
  width: 100%;
}

.form-field.only-label-width100 .formItem {
  width: calc(50% - 5px);
}

.form-field .no-label {
  margin-top: 17px;
}

.white_space_pre_wrap {
  white-space: pre-wrap !important;
}

.white_space_normal {
  white-space: normal !important;
}

.white_space_initial {
  white-space: initial !important;
}

.chk-inline {
  display: inline;
}

.chk-text-inline .dx-checkbox-text {
  display: inline;
}

.chk-with-large-text,
.chk-with-multiple-line {
  width: 100%;
}

.chk-with-large-text .dx-checkbox-container,
.chk-with-multiple-line .dx-checkbox-container {
  display: inline-flex;
}

.chk-with-large-text .dx-checkbox-text {
  white-space: pre-wrap;
}

.chk-with-multiple-line .dx-checkbox-text {
  white-space: pre-wrap;
  margin-top: -2px;
}

// I have created separated css because above class .chk-with-large-text set text little bit up in some case
.option-label {
  line-height: 32px !important;
}

.sub-container .inline-label {
  display: inline-block;
  width: calc(100% - 100px);
  margin-bottom: 0;
}

.dynamic-control .inline-label {
  display: inline-block;
  width: calc(100% - 100px);
}

.sub-container .inline-label.small-label {
  width: calc(100% - 135px);
}

.sub-container .file-upload-label {
  font-size: @body-font-size;
  color: @body-fore-color;
}

.sub-container .remove-icon {
  font-size: 24px;
  float: left;
  line-height: 32px;
  color: @danger-color;
  margin-left: 5px;
  cursor: pointer;
}

.sub-container .add-icon {
  padding: 5px 7px;
  font-size: 19px;
  border: 1px solid @default-border-color;
  float: left;
  color: @primary-color;
  cursor: pointer;
  border-radius: 4px;
  margin-left: 5px;
}

.sub-container .dx-datepicker-small {
  width: calc(100% - 82px) !important;
  float: left;
}

.sub-container .dx-datepicker-medium {
  width: calc(100% - 70px) !important;
  float: left;
}

.sub-container .radio-group-panel .dx-radio-value-container {
  vertical-align: top;
}

.sub-container .radio-group-panel .dx-radiobutton-icon:before {
  width: 14px;
  height: 14px;
}

.sub-container .radio-group-panel .dx-radiobutton-checked .dx-radiobutton-icon-dot {
  margin-top: -14px;
  margin-left: 4px;
  background: @primary-color;
}

.sub-container .radio-group-panel .dx-radiogroup .dx-radiobutton {
  margin-bottom: 10px;
}

.profile-upload-wrapper .ant-upload.ant-upload-drag {
  border: none;
  text-align: left;
  padding: 0;
  width: auto;
  background: transparent;
  display: inline-block;
}

.sub-container .profile-pic-container {
  display: inline-block;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: @content-back-color;
  padding: 4px 4px;
  -webkit-box-shadow: 3px 1px 14px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 1px 14px 3px rgba(0, 0, 0, 0.2);
}

.sub-container .default-pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  margin: 4px auto;
  color: @primary-fore-color;
  display: table-cell;
  vertical-align: middle;
}

.sub-container .photo-icon {
  font-size: 24px;
}

.sub-container .profile-upload-wrapper {
  float: left;
  height: 66px;
  margin-bottom: 20px;
}

.sub-container .profile-text {
  width: 280px;
  vertical-align: top;
  display: table-cell;
  vertical-align: middle;
  height: 66px;
  padding-left: 15px;
  font-size: @small-font-size;
  color: @body-fore-color-opacity3;
}

.div-scrollable-section-display {
  display: inline-block;
}

.single-line-switch-text {
  display: block !important;
  float: left;
}

.single-line-switch-text .control-label {
  display: block !important;
  line-height: 30px !important;
}

.switch-control-text-with-tooltip {
  width: calc(100% - 115px) !important;
}

.switch-control-tooltip-icon {
  vertical-align: top;
  margin-top: 2px;
}

.single-line-text-only-height30px {
  height: 30px;
  padding-top: 7px;
}

.dx-radiobutton-icon:before {
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid @control-border-color;
  background-color: @content-back-color;
  content: "";
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.dx-radiobutton-icon {
  width: 14px;
  height: 14px;
}

.dx-radiobutton.dx-state-hover .dx-radiobutton-icon:before,
.dx-radiobutton.dx-state-focused .dx-radiobutton-icon:before,
.dx-radiobutton.dx-state-hover.dx-state-focused .dx-radiobutton-icon:before {
  border: 2px solid @control-hover-border-color;
}

.dx-radiobutton.dx-radiobutton-checked .dx-radiobutton-icon:before,
.dx-radiobutton.dx-radiobutton-checked.dx-state-hover .dx-radiobutton-icon:before,
.dx-radiobutton.dx-radiobutton-checked.dx-state-focused .dx-radiobutton-icon:before,
.dx-radiobutton.dx-radiobutton-checked.dx-state-hover.dx-state-focused .dx-radiobutton-icon:before {
  border: 4px solid @primary-color;
}

.dx-radiobutton.dx-state-active .dx-radiobutton-icon:before {
  background-color: transparent;
}

.dx-checkbox.dx-state-active .dx-checkbox-icon {
  background-color: transparent;
}

.dx-radiobutton-icon-checked .dx-radiobutton-icon-dot {
  display: none;
}

.dx-radiobutton.dx-state-disabled .dx-radiobutton-icon:before {
  background: @body-fore-color-opacity4;
}

.dx-radiobutton.dx-state-disabled.dx-radiobutton-checked .dx-radiobutton-icon:before {
  background: transparent;
  border-color: @body-fore-color;
}

// .dx-radiobutton.dx-state-disabled {opacity: 1;}
.dx-radiobutton.dx-state-disabled {
  opacity: 1;
  background-color: @default-grayout-color  !important;
}

// end right-panel style

// large pane style
.large-pane {
  width: 640px !important;
}

.large-pane .form-footer {
  width: 640px !important;
  float: right;
}

// end large pane style


// View Panel
.right-panel-wrapper .viewPanel .control-label,
.viewPanel .control-label {
  font-size: 11px !important;
  line-height: 12px !important;
  color: @body-fore-color-opacity6  !important
}

.right-panel-wrapper .viewPanel .control-label,
.viewPanel .control-label {
  letter-spacing: .05px;
  margin-bottom: 3px;
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.right-panel-wrapper .viewPanel .control-label.font-size12,
.viewPanel .control-label.font-size12 {
  .font-size12();
  line-height: 14px !important;
}

.viewPanel .right-pane {
  width: 440px;
  float: left;
}

.viewPanel .formItem {
  font-size: 12px;
}

.viewPanel .control-value {
  min-height: 16px;
  line-height: 16px;
  overflow: hidden;
  word-break: break-word;
}

.viewPanel .sub-container {
  padding-top: 20px;
  padding-left: 15px;
}

.viewPanel.dynamic-createPanel .sub-container {
  padding-left: 10px;
}

.viewPanel.dynamic-createPanel .sub-container .control-label {
  display: inline-block;
  white-space: initial;
  color: @body-fore-color-opacity6  !important;
  margin-bottom: 0px;
}

// sandip: don't include without discussion with me // .viewPanel.dynamic-createPanel .sub-container .colwidth25, .viewPanel.dynamic-createPanel .sub-container .colwidth50, .viewPanel.dynamic-createPanel .sub-container .colwidth75, .viewPanel.dynamic-createPanel .sub-container .colwidth100 {display: initial; float: left;} // sandip: don't include without discussion with me
// .viewPanel .field-box .form-field:nth-child(2) {padding-left: 10px;}
.viewPanel .field-box .form-field:first-child {
  padding-right: 10px;
}

.viewPanel .sub-title h3 {
  float: left;
}

.viewPanel .sub-title span {
  float: right;
}

.viewPanel .control-label.normal-label {
  opacity: 1;
  font-size: 12px;
  margin-bottom: 5px;
  color: @body-fore-color-opacity9  !important;
}

.viewPanel .regular-font-label {
  line-height: 2;
  font-family: @body-font-family  !important;
  color: @body-fore-color  !important;
  font-size: @body-font-size  !important;
}

// End View Panel

// Read Only Panel;
.readOnlyPanel .control-value {
  min-height: 16px;
  line-height: 16px;
  overflow: hidden;
  word-break: break-word;
}

.readOnlyPanel .control-label,
.readOnlyPanel .control-label {
  font-size: 10px !important;
  line-height: @line-height14  !important;
  color: @body-fore-color-opacity6  !important;
}

// sandip: don't apply display: initials
.readOnlyPanel .control-label.smallText-multiline {
  line-height: 14px !important;
  color: @body-fore-color-opacity6  !important;
  font-family: @body-font-family  !important
}

.readOnlyPanel .control-label.normal-label {
  opacity: 1;
  font-size: 12px;
  margin-bottom: 5px;
  color: @body-fore-color-opacity9  !important;
}

// End Read Only Panel;

// Edit OnlyPanel
.right-panel-wrapper .editOnlyPanel .control-label {
  color: @body-fore-color  !important;
  font-size: 12px !important;
  line-height: 15px !important;
  display: block;
  margin-bottom: 4px;
}

// message box in form
.message-container {
  width: 100%;
  float: left;
  font-size: @body-font-size;
  margin-top: 10px;
  background-color: @content-back-color
}

.message-container .message-wrapper {
  padding: 10px 20px 10px 20px;
  color: @body-fore-color;
  float: left;
  width: 100%;
  font-style: italic;
  font-family: @medium-font-family;
  font-size: 12px;
  letter-spacing: 0.05px;
  line-height: 16px;
}

.message-container .message-wrapper span {
  float: left;
  clear: both;
  width: 100%;
}

.message-container .message-header {
  float: left;
}

.message-container .message-description {
  float: left;
  clear: both
}

.message-container .line-break {
  padding-top: 15px
}

.message-container.success {
  box-shadow: inset 4px 0 0 @success-color, inset 0 2px 0 @success-color, inset 0 -2px 0 @success-color, inset -2px 0 0 @success-color;
}

.message-container.default {
  box-shadow: inset 4px 0 0 @dark-border-color, inset 0 2px 0 @dark-border-color, inset 0 -2px 0 @dark-border-color, inset -2px 0 0 @dark-border-color;
}

.message-container.red {
  box-shadow: inset 4px 0 0 @red-color, inset 0 2px 0 @red-color, inset 0 -2px 0 @red-color, inset -2px 0 0 @red-color;
}

.message-container.warning {
  box-shadow: inset 4px 0 0 @warning-color, inset 0 2px 0 @warning-color, inset 0 -2px 0 @warning-color, inset -2px 0 0 @warning-color;
}

.message-container.danger {
  box-shadow: inset 4px 0 0 @message-danger-color, inset 0 2px 0 @message-danger-color, inset 0 -2px 0 @message-danger-color, inset -2px 0 0 @message-danger-color;
}

.sub-container .message-container {
  width: calc(100% + 40px);
  margin-left: -15px;
}

.sub-container .form-field .message-container {
  width: calc(100% + 40px);
  margin-left: -20px;
}

.sub-container .dynamic-form-field .message-container {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-top: 0px;
}

.sub-container .dynamic-form-field-width45 .message-container {
  width: calc(100% + 45px);
  margin-left: -20px;
  margin-top: 0px;
}

// Use  when message container inside sub-container
.sub-container .row2 .message-container {
  width: calc(100% + 40px);
  margin-left: -20px;
}

.message-container .selected-count-label {
  .bold-font();
  .text-decoration-underline();
}

// end message box in form

//.fullHeight .dx-datagrid-rowsview {min-height: calc(100vh - 357px);}
// .single-tab-item .fullHeight .dx-datagrid-rowsview {min-height: calc(100vh - 318px);} // No tab and having grid
.multiple-tab-item-noGrid {
  min-height: calc(100vh - 235px);
  padding: 39px 0 0 0;
}

// Tab having no grid
.only-block-content-no-grid .content-wrapper {
  min-height: calc(100vh - 252px);
  background-color: @content-back-color;
}

.only-block-content-no-grid .level-list-menu-wrapper.horizontal-menu+.level-configuration .content-wrapper {
  min-height: calc(100vh - 283px);
  background-color: @content-back-color;
}

// .grid-with-applied-filters .dx-datagrid-rowsview {min-height: calc(100vh - 350px);}

// .fullHeight .dx-empty {height: calc(100vh - 380px);}
// Other css must be written above
.ant-tag {
  border-radius: 4px;
  border: 1px solid transparent !important;
  font-size: 11px !important;
  letter-spacing: 0.23px !important;
  line-height: 20px !important;
  margin: 0 4px 0 0;
  height: 20px !important;
  font-family: @medium-font-family;
  box-sizing: content-box;
}
.ant-tag.tagMaxWidth {
  white-space: nowrap;
  width: auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  float: none!important;
  display: inline-block;
}
.ant-tag.tagMaxWidth:last-child{ margin-right: 0;}
.ant-tag.tagMaxWidth.max-width-150px {
  max-width: 150px;
}

.ant-tag .anticon-close {
  font-size: 10px !important;
  margin-left: -3px !important;
}
.ant-tag.tagMaxWidth .item-tag ~ .anticon-close{display: inline!important;}
.ant-tag .anticon-close:before {
  display: none;
}

.cursor-default .ant-tag {
  .cursor-default()
}

.primary-tag.ant-tag,
.box-view-wrapper .box-view-content.primary-tag {
  background-color: @primary-selected-color  !important;
  color: @primary-color  !important;
}

.primary-tag.ant-tag .anticon-close {
  color: @primary-color  !important;
}

.success-tag.ant-tag,
.box-view-wrapper .box-view-content.success-tag {
  background-color: @success-extra-light-color  !important;
  color: @success-color  !important;
}

.purple-tag.ant-tag,
.box-view-wrapper .box-view-content.purple-tag {
  background-color: @purple-extra-light-color  !important;
  color: @purple-color  !important;
}

.red-tag.ant-tag,
.box-view-wrapper .box-view-content.red-tag {
  background-color: @red-tag-back-color  !important;
  color: @red-color  !important;
}

.blue-tag.ant-tag,
.box-view-wrapper .box-view-content.blue-tag {
  background-color: @blue-tag-back-color  !important;
  color: @blue-tag-fore-color  !important;
}

.orange-tag.ant-tag,
.box-view-wrapper .box-view-content.orange-tag {
  background-color: @orange-tag-back-color  !important;
  color: @orange-color  !important;
}

.default-tag.ant-tag,
.box-view-wrapper .box-view-content.default-tag {
  background-color: @body-fore-color-opacity1;
  color: @body-fore-color  !important;
}

.default-tag.ant-tag .anticon-close {
  color: @body-fore-color  !important;
}

.tag-wrapper .primary-tag.ant-tag {
  background-color: @content-back-color;
  color: @primary-color  !important;
  border: 1px dashed rgba(51, 51, 51, 0.2);
  border-radius: 4px;
}

.tag-wrapper .ant-tag {
  font-size: 10px !important;
}

.tag-wrapper .normal-tag .ant-tag {
  opacity: 0.6 !important;
  border-radius: 4px;
  margin-bottom: 3px;
}

.tag-wrapper .ant-input {
  font-size: 10px !important;
}

.organisation-creation-wrapper .ant-switch:after,
.ant-switch:before {
  background-color: @primary-color;
}

.organisation-creation-wrapper .billed-container .ant-switch {
  background-color: @content-back-color;
  box-shadow: 0px 0px 10px 6px #ddd;
}

.organisation-creation-wrapper .top2 {
  top: 2px !important;
}

.small-square-tag {
  height: 10px !important;
  width: 10px;
  margin: 0;
  padding: 0;
  position: relative;
  top: 0px;
  left: 0px;
  border-radius: 2px;
}

.small-square-tag.success-tag {
  background-color: @success-color  !important;
  border-color: @success-color  !important;
  color: @content-back-color  !important;
}

.small-square-tag.purple-tag {
  background-color: @purple-color  !important;
  border-color: @purple-color  !important;
  color: @content-back-color  !important;
}

.small-square-tag.blue-tag {
  background-color: @blue-color  !important;
  border-color: @blue-color  !important;
  color: @content-back-color  !important;
}

.small-square-tag::before {
  display: none;
}

.small-square-tag .tag-text {
  position: absolute;
  top: -4px !important;
  left: 0px;
  font-size: 8px;
  margin: 0 auto;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  text-indent: 0;
}

/*-----------------On Boarding Style-----------------*/
.on-boarding-body .white-bg-wrapper {
  .white_box_shadow();
}

.white-bg-wrapper {
  background: @content-back-color;
  min-height: calc(11vh - 62px);
}

.onboarding-flow {
  padding: 70px 0 0 80px;
}

.onboarding-flow-main {
  max-width: 1090px;
}

.onboarding-flow .dx-button .dx-loadindicator {
  margin-top: 0px;
  height: 25px;
  margin-right: 10px;
}

.onboarding-flow .progress-bar-form i {
  color: @default-color-dark  !important;
}

.onboarding-flow .progress-bar-form .activecirculo i {
  color: @content-back-color  !important;
}

.onboarding-flow .dx-dropdowneditor-input-wrapper .dx-texteditor-input {
  font-size: 16px !important
}

.onboarding-flow .centre-grid {
  box-shadow: 0 0 15px -4px rgba(96, 96, 96, 0.5);
  color: @body-fore-color;
}

.onboarding-flow .centre-grid .header.row {
  border-bottom: 5px solid @default-border-color;
}

.onboarding-flow .centre-grid .body-content .row:hover {
  background-color: @row-hover-color;
}

.onboarding-flow .centre-grid .body-content .content-row:not(:first-child) {
  border-top: 1px solid @control-default-border-color;
}

.onboarding-flow .pci-payment img {
  border: 1px solid @default-border-color;
}

.onboarding-flow .pci-payment .pci-title {
  color: @primary-color;
}

.onboarding-flow .dx-datagrid-headers {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

::ng-deep .onboarding-flow .centre-grid .dx-placeholder {
  color: @body-fore-color;
}

.progress-bar-fixed {
  position: fixed;
  top: 50px;
  left: 50px;
  width: auto;
  z-index: 98;
  background: @content-back-color;
  padding: 20px 0 5px 100px;
  transition: all 0.5s ease 0;
  -moz-transition: all 0.5s ease 0;
  -ms-transition: all 0.5s ease 0;
  -o-transition: all 0.5s ease 0;
  -webkit-transition: all 0.5s ease 0;
  right: 10px;
}

.progress-bar-fixed-scroll-position {
  top: 40px;
}

.progress-bar-main {
  max-width: 600px;
}

.on-boarding-body .dx-list-item {
  font-size: @body-font-size-standAlone
}

/* progress-bar */
.progress-bar-form {
  width: 100%;
  margin: 0;
  position: relative;
}

.progress {
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

.progress-bar-form .progress {
  margin: 23px 0 0;
  height: 8px;
  background-color: #ededed;
}

.progress-bar {
  color: @content-back-color;
  background-color: #007bff;
}

.progress-bar-form .progress .progress-bar {
  height: 8px;
  color: #eeeeee;
  width: auto;
}

.step-1 .progress-bar-form .progress .progress-bar {
  width: 10%;
}

.step-2 .progress-bar-form .progress .progress-bar {
  width: 20%;
}

.step-3 .progress-bar-form .progress .progress-bar {
  width: 30%;
}

.step-4 .progress-bar-form .progress .progress-bar {
  width: 35%;
}

.step-5 .progress-bar-form .progress .progress-bar {
  width: 52%;
}

.step-6 .progress-bar-form .progress .progress-bar {
  width: 63%;
}

.step-7 .progress-bar-form .progress .progress-bar {
  width: 70%;
}

.step-8 .progress-bar-form .progress .progress-bar {
  width: 80%;
}

.step-9 .progress-bar-form .progress .progress-bar {
  width: 90%;
}

.step-10 .progress-bar-form .progress .progress-bar {
  width: 100%;
}

.setup-billing-wrapper .step-1 .progress-bar-form .progress .progress-bar {
  width: 20%;
}

.setup-billing-wrapper .step-2 .progress-bar-form .progress .progress-bar {
  width: 35%;
}

.setup-billing-wrapper .step-3 .progress-bar-form .progress .progress-bar {
  width: 55%;
}

.setup-billing-wrapper .step-4 .progress-bar-form .progress .progress-bar {
  width: 69%;
}

.setup-billing-wrapper .step-5 .progress-bar-form .progress .progress-bar {
  width: 100%;
}

.setup-direct-debit .step-1 .progress-bar-form .progress .progress-bar {
  width: 20%;
}

.setup-direct-debit .step-2 .progress-bar-form .progress .progress-bar {
  width: 35%;
}

.setup-direct-debit .step-3 .progress-bar-form .progress .progress-bar {
  width: 55%;
}

.setup-direct-debit .step-4 .progress-bar-form .progress .progress-bar {
  width: 69%;
}

.setup-direct-debit .step-5 .progress-bar-form .progress .progress-bar {
  width: 100%;
}

.step-4 .progress-bar-form .block2 .circulo,
.step-7 .progress-bar-form .block3 .circulo,
.step-10 .progress-bar-form .block4 .circulo,
.setup-billing-wrapper .step-2 .progress-bar-form .block2 .circulo,
.setup-billing-wrapper .step-4 .progress-bar-form .block3 .circulo,
.setup-billing-wrapper .step-5 .progress-bar-form .block4 .circulo,
.setup-direct-debit .step-2 .progress-bar-form .block2 .circulo,
.setup-direct-debit .step-4 .progress-bar-form .block3 .circulo,
.setup-direct-debit .step-5 .progress-bar-form .block4 .circulo {
  background-color: #bdddaa;
}

.step-4 .progress-bar-form .block2 .circulo i,
.step-7 .progress-bar-form .block3 .circulo i,
.step-10 .progress-bar-form .block4 .circulo i,
.setup-billing-wrapper .step-2 .progress-bar-form .block2 .circulo i,
.setup-billing-wrapper .step-4 .progress-bar-form .block3 .circulo i,
.setup-billing-wrapper .step-5 .progress-bar-form .block4 .circulo i,
.setup-direct-debit .step-2 .progress-bar-form .block2 .circulo i,
.setup-direct-debit .step-4 .progress-bar-form .block3 .circulo i,
.setup-direct-debit .step-5 .progress-bar-form .block4 .circulo i {
  color: @content-back-color;
}

.step-4 .progress-bar-form .block1 .circulo i,
.step-7 .progress-bar-form .block2 .circulo i,
.step-10 .progress-bar-form .block3 .circulo i,
.setup-billing-wrapper .step-2 .progress-bar-form .block1 .circulo i,
.setup-billing-wrapper .step-4 .progress-bar-form .block2 .circulo i,
.setup-billing-wrapper .step-5 .progress-bar-form .block3 .circulo i,
.setup-direct-debit .step-2 .progress-bar-form .block1 .circulo i,
.setup-direct-debit .step-4 .progress-bar-form .block2 .circulo i,
.setup-direct-debit .step-5 .progress-bar-form .block3 .circulo i {
  font-size: 0;
}

.step-4 .progress-bar-form .block1 .circulo i:before,
.step-7 .progress-bar-form .block2 .circulo i:before,
.step-10 .progress-bar-form .block3 .circulo i:before,
.setup-billing-wrapper .step-2 .progress-bar-form .block1 .circulo i:before,
.setup-billing-wrapper .step-4 .progress-bar-form .block2 .circulo i:before,
.setup-billing-wrapper .step-5 .progress-bar-form .block3 .circulo i:before,
.setup-direct-debit .step-2 .progress-bar-form .block1 .circulo i:before,
.setup-direct-debit .step-4 .progress-bar-form .block2 .circulo i:before,
.setup-direct-debit .step-5 .progress-bar-form .block3 .circulo i:before {
  content: '\f00c';
  font-family: 'FontAwesome';
  font-size: 10px;
  color: @content-back-color;
}

.progress-bar-form .block1 {
  position: absolute;
  margin: 0;
  height: 20px;
  width: 20px;
  top: -6px;
}

.progress-bar-form .block2 {
  position: absolute;
  margin: 0 0 0 33.33333333%;
  height: 20px;
  width: 20px;
  top: -6px;
}

.progress-bar-form .block3 {
  position: absolute;
  margin: 0 0 0 66.66666666%;
  height: 20px;
  width: 20px;
  top: -6px;
}

.progress-bar-form .block4 {
  position: absolute;
  margin: 0 0 0 97%;
  height: 20px;
  width: 20px;
  top: -6px;
}

.progress-bar-form .activeblock2 {
  position: absolute;
  margin: 0 0 0 33.33333333%;
  height: 20px;
  width: 20px;
  top: -6px;
}

.progress-bar-form .activeblock3 {
  position: absolute;
  margin: 0 0 0 66.66666666%;
  height: 20px;
  width: 20px;
  top: -6px;
}

.progress-bar-form .activeblock4 {
  position: absolute;
  margin: 0 0 0 97%;
  height: 20px;
  width: 20px;
  top: -6px;
}

.progress-bar-form .circulo {
  border-radius: 50%;
  height: 20px;
  width: 20px;
  background-color: #ededed;
  top: 0px;
}

.progress-bar-form .progreso1 {
  transition-delay: 4s;
  transition: all 0.45s ease-in-out;
  width: 33.33333333%;
  animation: 0.5s;
  background-color: #66ccff;
}

.progress-bar-form .progreso2 {
  width: 66.66666666%;
  animation: 0.5s;
  background-color: #66ccff;
  transition: all 0.45s ease;
}

.progress-bar-form .progreso3 {
  width: 100%;
  animation: 0.5s;
  background-color: #66ccff;
  transition: all 0.45s ease;
}

.progress-bar-form .fa-check {
  font-size: 14px;
  color: #404040;
  padding: 2.5px;
}

.progress-bar-form i {
  font-style: normal;
  color: rgba(79, 119, 154, 0.4);
  font-size: 10px;
  letter-spacing: 0.04px;
}

.progress-bar-form i.fa-check {
  font-size: 0;
}

.progress-bar-form .fa-check:before {
  font-size: 10px;
  color: #53a522;
}

.progress-bar-form .activecirculo i {
  color: @body-fore-color;
}

.progress-bar-form i {
  color: @body-fore-color;
}

.progress-bar-form .activecirculo {
  border-radius: 50%;
  height: 20px;
  width: 20px;
  background-color: #bdddaa;
}

.next .next2 {
  display: none;
}

.next .next3 {
  display: none;
}

.bg-info {
  background-color: #bdddaa !important;
  border-radius: 20px;
}

.progress-heading {
  color: @body-fore-color-opacity8;
  font-size: 14px;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06px;
  margin-bottom: 21px;
  position: relative;
}

.progress-heading .onemore {
  display: none;
  opacity: 0.8;
  color: @primary-color;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0.06px;
  font-style: italic;
  position: absolute;
  right: 0;
  text-transform: none;
}

.onboarding-flow-content .section {
  width: 100%;
  position: relative;
  display: none;
  min-height: calc(100vh - 160px);
  margin-bottom: 20px;
}

.show-section,
.video-section {
  display: inline-block !important;
}

.onboarding-flow-content {
  position: relative;
  overflow: hidden;
  padding-left: 18px;
  width: 100%;
  padding-top: 0;
}

.onboarding-flow-content:after {
  content: '';
  background: url(/assets/images/dashed-bg-line.png) no-repeat;
  width: 4px;
  height: 100%;
  position: absolute;
  right: 140px;
  top: 330px;
}

.onboarding-flow-content .section h1 {
  color: @body-fore-color;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: 0.11px;
  margin-bottom: 0;
}

.onboarding-flow-content .section h2 {
  color: @body-fore-color;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: 0.11px;
  margin-bottom: 15px;
}

.onboarding-flow-content .section p {
  color: @body-fore-color-opacity5;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05px;
}

.onboarding-flow-content .section.section-one h1 {
  margin-bottom: 5px;
}

.onboarding-flow-content .section h1 .color-blue {
  word-break: break-word;
}

.white-bg-wrapper .header-sub-text {
  color: @primary-color;
  word-break: break-word;
}

.white-bg-wrapper .btn-save-border-color {
  border: 1px solid #dddee0 !important;
}

.white-bg-wrapper .characters-left {
  color: #f51061 !important;
  font-size: 12px;
  line-height: 12px;
  font-style: italic !important;
  opacity: 1 !important;
}

/* check box with dx-list*/
.on-boarding-checkbox-list .dx-item.dx-list-item.dx-state-hover {
  background-color: @content-back-color  !important;
  border-color: @content-back-color  !important;
}

.on-boarding-checkbox-list .dx-item.dx-list-item.dx-state-focused.dx-list-item-selected.dx-state-hover {
  background-color: @content-back-color  !important;
  border-color: @content-back-color  !important;
}

.on-boarding-checkbox-list .dx-item.dx-list-item.dx-state-focused.dx-state-active {
  background-color: @content-back-color  !important;
  border-color: @content-back-color  !important;
}

.on-boarding-checkbox-list .dx-item.dx-list-item.dx-list-item-selected {
  background-color: @content-back-color  !important;
  border-color: @content-back-color  !important;
}

.on-boarding-checkbox-list .dx-scrollable-container {
  overflow: visible;
}

.on-boarding-checkbox-list .dx-scrollable-content {
  overflow: visible;
}

.on-boarding-checkbox-list .dx-item-content.dx-list-item-content {
  padding-left: 18px;
  font-size: 18px;
  letter-spacing: 0.08px;
  line-height: 20px;
  cursor: pointer;
  color: @body-fore-color;
  font-family: @body-font-family;
  margin-bottom: 0;
  display: inline-block;
}

.on-boarding-checkbox-list .dx-checkbox-icon,
.big-checkbox .dx-checkbox-icon {
  width: 25px;
  height: 25px;
  border-radius: 2px;
}

.on-boarding-checkbox-list .dx-list-select-checkbox.dx-checkbox.dx-widget {
  margin-bottom: 3px;
}

.on-boarding-checkbox-list .dx-checkbox-container .dx-checkbox-text {
  padding-left: 35px;
  height: 25px;
  line-height: 25px;
}

.on-boarding-checkbox-list .dx-list-item,
.dx-list .dx-empty-message {
  border-top: none;
}

.onboarding-tabs ul li a.active:before {
  border-color: @primary-color  !important;
}

.onboarding-tabs .links-column .link-skip .link:hover {
  opacity: 1;
  color: @primary-color;
}

.onboarding-tabs .links-column a:hover .links-name {
  opacity: 1;
  color: @primary-color;
}

/* Comment */
.section .left-cont {
  max-width: 600px;
  width: 100%;
  float: left;
  left: 0;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.section .right-cont {
  max-width: 258px;
  width: 100%;
  float: right;
  background: @content-back-color;
  position: absolute;
  z-index: 1;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.section .right-cont .img2 {
  position: absolute;
  left: 54px;
  bottom: 92px;
}

.section .video {
  border-radius: 10px 10px 2px 2px;
  background-color: @content-back-color;
  text-align: center;
}

.section .video-box-shadow {
  box-shadow: 0 0 40px rgba(57, 155, 243, 0.2);
  border-radius: 10px 10px 0 0;
  padding: 77px 0 86px 0;
  margin-top: 20px;
  position: relative;
}

.section .video-box-shadow img {
  margin: auto;
}

.section .skip-link {
  background: @content-back-color;
  padding-bottom: 18px;
  z-index: 0;
  position: relative;
  text-align: center
}

.section .skip-link .link {
  color: @body-fore-color;
  font-size: 18px;
  text-decoration: underline;
  letter-spacing: 0.08px;
}

.section .skip-link .link:hover {
  color: @primary-color;
}

.section .skip-link .link img {
  display: inline-block;
}

.section .video-play-icon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.section .video-play-icon .icon-bg {
  background: @content-back-color;
  border: solid 8px @primary-color;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  width: 80px;
  height: 80px;
  border-radius: 250px;
  display: inline-block;
  position: relative;
}

.section .video-play-icon .icon-bg:after {
  content: '';
  width: 0px;
  height: 0px;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 25px solid @primary-color;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-32%, -50%);
}

.section .video-play-icon:hover .icon-bg {
  border-color: @body-fore-color;
}

.section .video-play-icon:hover .icon-bg:after {
  border-left: 25px solid @body-fore-color;
}

.section .vertical-align {
  display: table;
  height: 100%;
  width: 100%;
}

.section .vertical-align-m {
  display: table-cell;
  vertical-align: middle;
}

.section .form-field {
  width: 100%;
  margin: 0;
  padding: 0;
}

.section .form-field .g-select-box .select2-container--default {
  max-width: 390px;
}

.section .overlay {
  opacity: 0.2;
  margin-top: 40px;
  clear: both;
}

.color-blue {
  color: @primary-color;
}

.color-male-gender {
  color: @blue-color;
}

.color-female-gender {
  color: @pink-color;
}

.color-other-gender {
  color: @success-color;
}

.onboarding-flow-content .section .overlay h2 {
  margin-bottom: 10px;
}

.section.section-six .overlay .input-field {
  max-width: 390px;
}

.section .overlay .input-field {
  pointer-events: none;
}

.input-field {
  width: 100%;
  height: 40px;
  border-radius: 2px;
  border: 1px solid @control-border-color;
  background-color: @content-back-color;
  padding: 0 10px;
  color: @body-fore-color;
  font-size: 18px;
  letter-spacing: 0.08px;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.textarea-field {
  padding: 6px 10px;
  line-height: 1.3;
  overflow: hidden;
}

.section .input-field {
  max-width: 390px;
  float: left;
}

.section .dx-texteditor {
  width: 390px;
  border-radius: 0;
  line-height: 33px;
}

.dx-input-field {
  float: left;
  height: 40px;
}

.section .dx-widget input,
.section .dx-widget textarea,
.section .dx-button-text,
.section .dx-dropdowneditor-button-visible .dx-texteditor-input {
  height: 38px;
  font-size: 18px;
}

.section .term-based-billing-table .term-based-billing-charge-table .dx-texteditor-input {
  font-size: 14px !important;
}

.section .button-group .dx-item-content {
  height: 26px;
  font-size: 18px;
}

.section .dx-placeholder {
  font-size: 16px;
  line-height: 1;
  color: @body-fore-color-opacity3;
}

.section .dx-button {
  border-radius: 0;
  height: 40px;
}

.section.section-five .switch-cont {
  width: 440px;
  display: inline-block;
}

.section .yes-no-switch {
  width: 160px;
  float: right;
}

.section .button-group .dx-radiobutton {
  line-height: 40px !important;
  padding-bottom: 0px !important;
  padding-top: 0px !important;
  height: 40px !important;
}

.section.success-box {
  background: white;
  z-index: 1;
  padding-top: 20px;
}

// .table td.dotted {color: @control-border-color; height: 2px; width: 21px;}
.table td.remove {
  width: 30px;
  padding-left: 10px;
  text-align: center;
}

.table td.remove .remove-icon {
  width: 30px;
  height: 30px;
  background: @content-back-color;
  color: @body-fore-color;
  border: 1px solid @control-border-color;
  border-radius: 250px;
  position: relative;
  display: block;
}

.table td.remove .remove-icon::after {
  content: '\f068';
  font-family: 'FontAwesome';
  position: absolute;
  top: 20%;
  left: 30%;
  box-sizing: border-box;
}

.table td.remove .remove-icon:hover {
  color: red !important;
  border-color: red !important;
}

.link-skip a {
  color: @body-fore-color;
}

.disabled {
  opacity: 0.2;
}

.field {
  height: 40px;
}

.field-width-half {
  width: 156px !important;
}

.half-width-mobile {
  width: 190px !important;
}

.care-type-template {
  p {
    color: @body-fore-color-opacity5;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.05px;
    margin-bottom: 20px;
  }
}

.care-type-template .dx-list-item:last-child .multiple-item-hr {
  display: none;
}

.section .title {
  font-size: 18px;
  line-height: 18px;
  margin: 11px 0;
}

.inline-field {
  float: left;
}

.section .dx-checkbox-has-text .dx-checkbox-icon,
.section .dx-checkbox-has-text .dx-checkbox-text {
  font-size: 18px;
}

.section .on-boarding-checkbox-list .dx-checkbox-checked .dx-checkbox-icon {
  font-size: 17px !important;
}

.section .on-boarding-checkbox-list .dx-checkbox-checked .dx-checkbox-icon:before {
  background-size: 15px 13px;
  width: 15px;
  height: 13px;
  margin-top: -6px !important;
  margin-left: -7px !important;
}

.section .checkbox-group .dx-checkbox {
  height: 40px;
  vertical-align: middle;
  line-height: normal;
}

.onboarding-flow .on-boarding-days-selection .dx-checkbox {
  width: 85px !important;
}

.section .days-selection-wrapper .checkbox-group .dx-checkbox {
  line-height: 40px;
}

/***/
.review-detail {
  max-width: 500px;
  width: 100%;
  display: inline-block;
  clear: both;
}

.review-detail li {
  float: left;
  font-size: 12px;
  padding: 10px;
  line-height: 12px;
  position: relative;
  word-break: break-word;
}

.review-detail .blue-bg {
  border-radius: 2px;
  background-color: @content-back-color;
  width: 100%;
  display: inline-block;
}

.review-detail .blue-bg:hover {
  border-radius: 2px;
  background-color: @row-hover-color;
  width: 100%;
  display: inline-block;
}

.review-detail li li {
  width: 50%;
  padding: 7px 0 0;
}

.review-detail li .gray {
  color: rgba(51, 51, 51, 0.5);
}

.section .review-detail li p {
  color: @body-fore-color;
  margin-bottom: 0;
  margin-top: 5px;
  opacity: 1;
}

.review-detail li.detail-one {
  color: rgba(51, 51, 51, 0.5);
}

.review-detail li.detail-one {
  width: 31%;
}

.review-detail li.detail-two {
  width: 69%;
  float: right;
  line-height: 16px;
}

.review-detail li.detail-two.separator {
  border-top: 1px solid @control-border-color;
}

.review-detail .edit-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  color: @primary-color;
  display: none;
}

.review-detail .edit-icon:after {
  content: '\f040';
  font-family: 'FontAwesome';
  font-size: 14px;
}

.review-detail .blue-bg:hover li .edit-icon {
  display: inline-block;
}

.btn-save {
  border-color: @control-border-color;
  border-radius: 4px;
}

.btn-another-centre {
  border-radius: 4px;
}

.on-boarding-text-area {
  margin-bottom: 10px;
}

.on-boarding-text-area .dx-texteditor-input {
  height: 120px !important;
}

.dx-numberbox .dx-texteditor-input {
  width: 100% !important;
}

/*-----------------End On Boarding-------------------*/

//Create tag
.tag-label-wrapper {
  width: 100%;
  display: inline-block;
  vertical-align: top;
}

.create-tag-wrapper .dx-treeview-item {
  min-height: 25px;
}

.create-tag-wrapper .dx-treeview-item.dx-state-hover {
  background-color: inherit !important;
}

//End Create tag

// Text Editor/CK Editor
.text-editor .angular-editor-toolbar {
  background-color: @right-panel-back-color  !important;
  padding: 5px 5px 2px !important;
  border-color: @dark-border-color  !important;
  font-size: @body-font-size  !important;
  font-family: @body-font-family  !important;
}

.text-editor [id*="strikeThrough-"],
.text-editor [id*="subscript-"],
.text-editor [id*="superscript-"],
.text-editor [id*="justifyLeft-"],
.text-editor [id*="justifyCenter-"],
.text-editor [id*="justifyRight-"],
.text-editor [id*="justifyFull-"],
.text-editor [id*="heading-"],
.text-editor [id*="fontSelector-"],
.text-editor [id*="fontSizeSelector-"] {
  display: none;
}

.text-editor .angular-editor-toolbar .angular-editor-toolbar-set:nth-of-type(3) {
  display: none !important;
}

.text-editor .angular-editor-toolbar .angular-editor-toolbar-set:nth-of-type(6) {
  display: none !important;
}

.text-editor .angular-editor-toolbar .angular-editor-toolbar-set:nth-of-type(7) {
  display: none !important;
}

.text-editor .angular-editor-toolbar .angular-editor-toolbar-set:nth-of-type(8) {
  display: none !important;
}

.text-editor .angular-editor-toolbar .angular-editor-toolbar-set:nth-of-type(9) {
  display: none !important;
}

// code viewer
.text-editor .angular-editor-toolbar .angular-editor-toolbar-set:nth-of-type(12) {
  display: none !important;
}

.angular-editor .angular-editor-toolbar .angular-editor-toolbar-set [id^=insertImage-] {
  display: none !important;
}

.angular-editor .angular-editor-toolbar .angular-editor-toolbar-set [id^=insertHorizontalRule-] {
  display: none !important;
}

.text-editor #editor {
  margin-top: 0px !important;
}

.text-editor .angular-editor-textarea {
  border-top: 0px !important;
  border-color: @dark-border-color  !important;
  font-size: @body-font-size;
  background-color: @content-back-color  !important;
  padding-top: 10px !important;
  line-height: 18px;
  margin-top: 0px;
}

.text-editor ul li,
.text-editor ol li {
  list-style: inherit !important;
  margin-left: 10px !important
}

.text-editor ul,
.text-editor ol {
  padding: 0 0 0 5px !important;
}

.text-editor.message-wrapper span {
  float: none;
  clear: unset;
  width: auto;
}

.text-editor a {
  word-break: break-word;
}

.text-editor p {
  word-break: break-word;
}

// Overwrite our devex css
.dx-context-menu.dx-state-focused {
  border-color: transparent !important
}

// Footer
.footer-container {
  color: @content-back-color;
  text-align: center;
  margin: 0 auto;
  width: 40px;
  font-size: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
}

.footer-container .footer-logo-wrapper {
  margin-bottom: 10px;
}

.footer-container .footer-copyright-wrapper {
  margin-bottom: 20px;
  line-height: 13px;
  opacity: 0.3
}

.footer-container .footer-tc-wrapper {
  margin-bottom: 20px;
}

.footer-container .footer-tc-wrapper span {
  margin-right: 20px;
}

.footer-container .footer-tc-wrapper span:last-child {
  margin-right: 0px;
}

.footer-container .footer-logo-wrapper svg {
  height: 25px;
  width: 25px;
}

// End Footer

// Dynamic Section
.dynamic-section {
  float: left;
  width: 100%
}

.dynamic-section .sub-title {
  border-top: 0px !important;
  margin-top: 20px !important;
}

.dynamic-section .control-default {
  width: 100%;
  min-height: 32px;
}

.dynamic-section .control-default.dx-checkbox {
  width: auto;
  min-height: auto;
}

.dynamic-section .help-text-wrapper {
  padding-left: 5px;
}

.dynamic-section .sub-container {
  padding-left: 15px !important;
}

.dynamic-section:last-child .sub-container:last-child {
  padding-bottom: 20px !important
}


// Dynamic control
.view-dynamic-control-container {
  width: 100%;
  float: left;
}

// End Dynamic control

// Grid loader
.dx-datagrid .dx-loadpanel-content {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.custom-loader {
  width: 250px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: @body-font-family;
  font-size: @body-font-size;
  text-transform: uppercase;
  font-weight: 900;
  color: @primary-color;
  letter-spacing: 0.2em;

  &::before,
  &::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: @primary-color;
    position: absolute;
    animation: load .7s infinite alternate ease-in-out;
  }

  &::before {
    top: 0;
  }

  &::after {
    bottom: 0;
  }
}

@keyframes load {
  0% {
    left: 0;
    height: 30px;
    width: 15px
  }

  50% {
    height: 8px;
    width: 40px
  }

  100% {
    left: 235px;
    height: 30px;
    width: 15px
  }
}

// End grid loader

//view panel block content
.box-view-container {
  margin-bottom: 5px !important;
}

.box-view {
  max-width: 100%;
  display: inline-block;
  margin-bottom: 5px !important;
}

.box-view-listing {
  max-width: 100%;
  display: inline-block;
}

.box-view-content {
  font-size: 10px;
  border: 1px solid @control-border-color;
  border-radius: 4px;
  background-color: @default-tag-back-color;
  padding: 3px 6px;
}

.box-view-wrapper {
  padding-right: 5px;
  float: left;
}

.box-view-wrapper .box-view-content {
  font-size: 11px;
  background-color: @dark-border-color;
  border: 0px;
  white-space: nowrap;
}

.box-view-wrapper.blue .box-view-content {
  background-color: @blue-tag-back-color  !important;
  color: @blue-tag-fore-color  !important;
}

//

/** Summary Section ********/
span.second-line-text.d-inline-block {
  display: inline-block !important;
  width: auto;
  max-width: inherit;
  float: none;
  position: relative;
}

span.second-line-text.d-inline-block+span.second-line-text.d-inline-block:before {
  content: "|";
  color: @body-fore-color-opacity8;
  font-size: 11px;
  letter-spacing: 0.28px;
  line-height: 11px;
  font-family: Montserrat;
  position: absolute;
  left: 3px;
  top: -1px;
}

span.second-line-text.d-inline-block+span.second-line-text.d-inline-block {
  padding-left: 10px;
}

.title-12 {
  color: @body-fore-color  !important;
  font-family: @medium-font-family  !important;
  font-size: 12px !important;
  letter-spacing: 0.24px !important;
  line-height: 10px !important;
}

.children-wrapper .caretype-wrapper {
  color: @body-fore-color;
  font-family: @medium-font-family;
}


// Family Summary
.family-summary {
  width: 100%;
}

.family-summary .details .dx-accordion {
  border-radius: 0 0 14px 14px !important;
}

.family-summary .col-right {
  width: 440px;
}

.family-summary .col-left {
  width: calc(100% - 440px);
}

.family-summary .header {
  border: 0px solid @dark-border-color;
  border-bottom: 0px solid @dark-border-color;
  border-radius: 4px 4px 0 0;
}

.family-summary .border-bottom1 {
  border-bottom: 1px solid @dark-border-color
}

.family-summary .details {
  border-top: 1px solid @dark-border-color;
  border-right: 0;
  border-left: 0;
  border-radius: 0 0 4px 4px;
}

.family-summary .profile-image-container {
  line-height: 30px;
  text-align: center;
  color: @body-font-family;
  font-family: @bold-font-family;
  font-size: 12px;
  letter-spacing: 0.05px;
  text-transform: uppercase;
}

.family-summary .profile-image-container .img-wrapper {
  color: @content-back-color;
  opacity: 1;
}

.family-summary .ant-tag {
  margin-bottom: 5px;
}

.family-summary .default-tag.ant-tag {
  font-size: 10px;
  border: 0.5px solid @default-opacity2
}

.family-summary span.tag {
  font-size: 8px;
  line-height: 8px;
  padding: 3px 7px;
}

.family-summary .small-text .ant-tag {
  color: @content-back-color
}

.family-summary .inner-sec {
  max-height: 250px;
  height: 100%;
}

.family-summary .attachement-sec .persontype {
  font-size: @label-font-size;
  opacity: 0.6;
  margin-left: -3px;
  font-family: @medium-font-family;
}

.family-summary .details span.tag-name {
  color: @body-fore-color-opacity9;
  font-family: @medium-font-family;
  font-size: 12px;
  letter-spacing: 0.24px;
  line-height: 10px;
  vertical-align: middle;
  display: inline-block;
  float: none;
  padding-top: 1px;
  margin-bottom: 5px;
  width: calc(100% - 170px);
}

.family-summary .details span.tag-name+span.small-text {
  color: @body-fore-color-opacity6;
  font-family: @medium-font-family;
  font-size: 11px;
  letter-spacing: 0.28px;
  line-height: 11px;
  font-style: inherit !important;
  margin-left: 2px !important;
  vertical-align: middle;
  display: inline-block;
  float: none;
  padding-top: 1px;
  margin-bottom: 6px;
}

.family-summary .private-notes-wrapper .dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-vertical .dx-scrollable-content,
.family-summary .private-notes-wrapper .dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-content {
  padding-right: 14px !important;
}

.family-summary .private-notes-wrapper .dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-vertical .dx-scrollable-content,
.family-summary .private-notes-wrapper .dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-content {
  padding-right: 0 !important;
}

.family-summary .width-list50 .width50:nth-child(2n+1) {
  clear: both;
}

.view-notes .search-textbox {
  border-right: 1px solid @dark-border-color  !important;
}

.view-notes .left-pane {
  border-right: 1px solid @dark-border-color;
  height: calc(100vh - 40px);
  float: left;
  background-color: @content-back-color;
}

.view-notes .left-pane .dx-scrollable-content {
  background-color: @content-back-color;
}

.block-wrapper .no-records-wrapper {
  border: 0px solid @dark-border-color;
  border-top: 0px;
  border-radius: 1px;
}

.repeter-inner {
  border-bottom: 1px solid @dark-border-color;
}

ul.list-repeter>li:last-child .repeter-inner {
  border-bottom: 1px solid @content-back-color;
  border-radius: 0 0 4px 4px;
}

.rightpanel ul.list-repeter>li:last-child .repeter-inner {
  border-bottom: 1px solid @dark-border-color;
}

.note-sec .repeter .active {
  background-color: @row-selected-color;
}

.note-sec .repeter {
  border-top: 1px solid @default-border-color;
}

.note-sec.no-search-panel .repeter {
  border-top: 0px
}

.payment-account-list-detail-wrapper .link-wrapper {
  font-size: 10px;
}

.payment-account-list-detail-wrapper .link-wrapper a {
  color: @primary-color;
  font-family: @semi-bold-font-family;
  font-size: 12px;
  letter-spacing: 0.05px;
  line-height: 12px;
}

.payment-account-list-detail-wrapper .row1 .colwidth25 {
  position: relative;
}

.payment-account-list-detail-wrapper .row1 .colwidth25:last-child:before {
  display: none;
}

.payment-account-list-detail-wrapper .row1 .colwidth25:before {
  content: "|";
  font-size: 12px;
  color: @primary-color;
  font-family: @semi-bold-font-family;
  letter-spacing: 0.05px;
  line-height: 12px;
  position: absolute;
  right: 4px;
  top: 1px;
}

.payment-account-list-detail-wrapper .sub-container {
  background: @content-back-color;
}

.payment-account-list-detail-wrapper .sub-title {
  font-family: @semi-bold-font-family;
  padding-bottom: 17px;
}

// .children-wrapper .caretype-wrapper { background-color: @default-light-color;}

.repeter-inner .repeter-top .repeter-title {
  color: @body-fore-color;
  font-family: @medium-font-family;
}

.attachement-sec span.attach span.name {
  color: @body-fore-color-opacity6;
  font-family: @semi-bold-font-family;
}

.repeter-inner .repeter-bottom .name {
  color: @body-fore-color-opacity6;
  font-family: @medium-font-family;
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
  width: calc(100% - 20px);
}

.attachement-sec .attach svg {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -3px;
  margin: 0 3px 0 5px;
}

.repeter-inner .repeter-top .repeter-title span {
  color: @body-fore-color-opacity6;
  font-family: @medium-font-family;
  font-size: @label-font-size;
  letter-spacing: 0.28px;
  line-height: @line-height14;
}

// Attachment
.view-attachment .search-textbox {
  border-right: 1px solid @dark-border-color  !important;
}

.view-attachment .left-pane {
  border-right: 1px solid @dark-border-color;
  height: calc(100vh - 40px);
  float: left;
  background-color: @content-back-color;
}

.view-attachment .left-pane .dx-scrollable-content {
  background-color: @content-back-color;
}

.attachement-sec .repeter .active {
  background-color: @row-selected-color;
}

.attachement-sec .search-textbox-border-bottom {
  border-bottom: 0px solid;
  width: 100%;
  border-right: 0px solid;
  border-top: 0px solid;
  border-left: 0px solid;
}

.attachement-sec .attachment-search-box {
  border-bottom: 1px solid @dark-border-color
}

.img-data .icon-class .icon-function {
  background-color: @content-back-color;
  border: 1px solid @content-back-color;
  border-radius: 5px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}

.editAttachment .attachment-pic {
  border: 1px solid @dark-border-color;
  font-family: @bold-font-family
}

.editAttachment .view-attachments-icon-small {
  padding-left: 10px;
  color: @dark-border-color;
}

.editAttachment .view-attachments-icon-large {
  padding-left: 10px;
  color: @dark-border-color;
  font-size: 16px;
}

// End


// email history
.view-email-interface .left-pane {
  border-right: 1px solid @dark-border-color;
  height: calc(100vh - 40px);
  float: left;
  background-color: @content-back-color;
}

.view-email-interface .left-pane .dx-scrollable-content {
  background-color: @content-back-color;
}

.email-history-sec .repeter .active {
  background-color: @row-selected-color;
}

.email-history-sec .email-search-box {
  border-bottom: 1px solid @dark-border-color;
}

.view-email-interface .search-textbox-border-bottom {
  border-right: 1px solid @dark-border-color  !important;
}

.email-detail .email-subject-wrapper {
  border-bottom: 1px solid @default-border-color;
}

.email-detail .email-subject-wrapper {
  position: relative;
}

.email-detail .email-subject-wrapper span {
  line-height: normal;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

// end

// child-summary
.child-summary .basic-details-wrapper .action-container svg path {
  fill: @primary-color  !important;
}

.child-summary .basic-details-wrapper {
  border: 0px solid @dark-border-color;
}

/* .child-summary .basic-details-wrapper .image-container .profile-image {border: solid 3px @content-back-color} */
.child-summary .basic-details-wrapper .action-container {
  border-bottom: 1px solid @default-hr-color;
  border-top: 1px solid @default-hr-color;
}

.child-summary .detail-section {
  border-bottom: 1px solid @default-hr-color;
  width: 100%;
}

.child-summary .medical-condition-container {
  border: 0px solid @dark-border-color;
  float: left;
  width: 100%;
}

.child-summary .inner-sec {
  max-height: 250px;
  height: 100%;
}

.details-content-wrapper .content-wrapper-seperator {
  border-top: 1px solid @default-hr-color;
}

.child-summary .tab-control.timeline-tab .ant-tabs-tabpane {
  border: 0px !important;
  background-color: @body-back-color;
}

.child-summary .tab-control.timeline-tab .ant-tabs-tabpane .top-filter {
  border: 1px solid @dark-border-color;
}

// END child-summary

.details-header-wrapper .title {
  color: @body-fore-color;
  font-family: @semi-bold-font-family;
}

// create child
.create-child-wrapper .margin_top15 {
  margin-top: 15px !important;
}

// End create child

// medical condition summary
.medical-condition-sub-container {
  width: 100%;
  float: left;
  background-color: @content-back-color;
}

.documentDate {
  padding-left: 20px;
  color: @body-fore-color;
  font-size: 10px !important;
  float: left;
  width: calc(100% - 30px);
  font-family: @medium-font-family;
  line-height: 11px;
  letter-spacing: 0.14px;
}

.medical-condition-list-detail-wrapper {
  background-color: @content-back-color;
}

.documentLink {
  cursor: default;
}

.documentLink .file-name {
  padding-left: 5px;
  max-width: calc(100% - 30px);
  width: auto;
  cursor: pointer;
}

.medical-condition-header-wrapper h1 {
  color: @body-fore-color-opacity9;
  font-family: @semi-bold-font-family
}

.medical-condition-sub-container .sub-title {
  font-family: @semi-bold-font-family;
  padding-bottom: 10px;
}

.expiredLabel {
  color: @red-color;
  font-size: @label-font-size;
  font-family: @semi-bold-font-family
}

// END medical condition summary


// child-enrolment-list
.child-enrolment-list-header {
  border-bottom: 4px solid @dark-border-color;
  border-radius: 1px;
}

.child-enrolment-list .details {
  border-top: 0px;
  border-radius: 1px;
  height: 40px;
  padding: 5px 10px;
  border-bottom: 1px solid @dark-border-color
}

.child-enrolment-list .second-line-text {
  font-size: 10px;
  letter-spacing: 0.04px;
}

.child-enrolment-list .sub-title {
  font-size: 12px;
  height: 16px;
  letter-spacing: 0.05px;
}

// Assign Tags
.assignedTags .editable-tag .ant-tag {
  color: @primary-color  !important
}

.assignedTags .search-input {
  width: calc(100% - 20px)
}

// End

//group-tree view css start
.checkbox-tree-wrapper .dx-treeview-item-with-checkbox .dx-treeview-item {
  padding-left: 24px !important;
}

.checkbox-tree-wrapper.dx-tree-view-wrapper {
  width: 100% !important
}

.checkbox-tree-wrapper.dx-tree-view-wrapper .dx-scrollable {
  max-height: 300px !important
}

.checkbox-tree-wrapper+div.dx-scrollable {
  display: none !important;
}

.checkbox-tree-wrapper {
  max-height: 300px !important;
}

.checkbox-tree-wrapper .dx-treeview-node .dx-treeview-item-with-checkbox .dx-treeview-node-is-leaf div {
  font-weight: 500 !important;
}

.checkbox-tree-wrapper .dx-treeview-item {
  min-height: 25px;
}

.checkbox-tree-wrapper .dx-treeview-item.dx-state-hover {
  background-color: inherit !important;
}

.checkbox-tree-wrapper .dx-scrollable-content {
  padding: 10px !important;
}

//End tree view


/********************** START dx-datagrid css   ****************************/
.dx-datagrid .type-col {
  position: relative;
}

.dx-datagrid .type-col .circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
}

.dx-datagrid .type-col .circle:before {
  content: "";
  border-radius: 50%;
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  border: 2px solid transparent;
  pointer-events: none;
  opacity: 0.2;
}

.dx-datagrid .type-col span {
  display: inline-block;
  vertical-align: middle;
}

.dx-datagrid .type-col .circle~span {
  font-size: 10px;
  letter-spacing: 0.04px;
  line-height: 10px;
  margin-left: 4px;
}

// Green Circle
.dx-datagrid .type-col.green_color .circle {
  background: #2cd1a1;
}

.dx-datagrid .type-col.green_color .circle:before {
  border-color: #2cd1a1;
}

.dx-datagrid .type-col.green_color .circle~span {
  color: #2cd1a1
}

// Purple Circle
.dx-datagrid .type-col.purple_color .circle {
  background: #7e8cff;
}

.dx-datagrid .type-col.purple_color .circle:before {
  border-color: #7e8cff;
}

.dx-datagrid .type-col.purple_color .circle~span {
  color: #7e8cff
}

// Tags
.dx-datagrid .tag-col {
  display: inline-block;
  font-size: 10px !important;
  padding: 4px 6px 4px 8px;
  position: relative;
  font-family: @semi-bold-font-family;
  letter-spacing: 0.04px;
  line-height: 10px;
  background-color: transparent !important;
}

.dx-datagrid .tag-col:before {
  content: "";
  opacity: 0.1;
  position: absolute;
  left: 10px;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0 5px 5px 0;
  z-index: -1;
}

.dx-datagrid .tag-col svg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

// Red Tag
.dx-datagrid .tag-col.red_color {
  color: #ff5596;
}

.dx-datagrid .tag-col.red_color:before {
  background: #ff5596;
}

.dx-datagrid .tag-col.red_color svg path {
  fill: #ff5596;
  opacity: 0.1;
}

/********************** END dx-datagrid css   ****************************/

// Holiday Start
.holiday-list .dx-datagrid td.actionColumn-wrapper {
  padding-left: 20px !important;
}

// Holiday End

.approve-without-grid {
  background-image: url(images/Approved.png);
  background-repeat: no-repeat;
}

.approve-without-grid .status_img~span {
  color: @success-color
}


.reject-without-grid {
  background-image: url(images/Rejected.png);
  background-repeat: no-repeat;
}

.reject-without-grid .status_img~span {
  color: @red-color
}

.payment-pending-without-grid {
  background-image: url(images/statusIcons/Pending.svg);
  background-repeat: no-repeat;
}

.payment-pending-without-grid .status_img~span {
  color: @warning-color;
}

//tree view css start
.tree-wrapper .dx-treeview-item-with-checkbox .dx-treeview-item {
  padding-left: 24px !important;
}

.tree-wrapper .dx-tree-view-wrapper {
  width: 100% !important
}

//End tree view

//tag-list action column START
.tag-list-action-wrapper .dx-datagrid .actionColumn i {
  padding-left: 0px !important;
}

//tag-list action column END

//View session-fees
.session-fees-view-wrapper .dx-accordion-item-title {
  border-bottom: 0px !important;
}

.session-fees-view-wrapper .dx-accordion-wrapper {
  padding-top: 10px !important;
  padding-bottom: 10px;
}

.session-fees-view-wrapper .dx-accordion-item-title {
  height: 60px !important;
  padding-left: 20px !important;
  padding-top: 10px;
}

.session-fees-view-wrapper .dx-accordion {
  background: transparent;
}

.session-fees-view-wrapper .dx-accordion-item {
  border: 0 none;
}

.session-fees-view-wrapper .dx-accordion-item,
.session-fees-view-wrapper .dx-accordion-item-closed {
  border-bottom: solid 1px @dark-border-color  !important;
}

.session-fees-view-wrapper .dx-accordion-item:last-child {
  border-bottom: 0 none !important;
}

.session-fees-view-wrapper .formItem {
  word-break: break-word;
}

.session-fees-view-wrapper .display-inline-block {
  vertical-align: top;
}

.session-fees-view-wrapper .dx-accordion-item-title:before {
  display: block;
  position: absolute;
  right: 14px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  font-size: @label-font-size;
}

.session-fees-view-wrapper .dx-accordion-item-opened .dx-accordion-item-body {
  margin-bottom: 0 !important;
}

//End session-fees

//user-profile
.user-profile-container {
  -webkit-box-shadow: @body-fore-color;
  -moz-box-shadow: @body-fore-color;
  box-shadow: @body-fore-color;
}

.userprofile .sub-title h3 {
  color: @body-fore-color;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.06px;
  font-family: @semi-bold-font-family
}

.userprofile .sub-title {
  background: @content-back-color;
}

::ng-deep .user-profile-container .address-list .address-box-inner {
  background-color: @default-light-color;
}

.user-profile-container .user-panel-box {
  background-color: @right-panel-back-color;
  box-shadow: @body-fore-color;
}

.user-profile-centre-role .address-list ul li .address-box-inner address {
  color: @body-fore-color;
}

.user-profile-centre-role .address-list ul li .address-box-inner address span.location {
  color: @default-light-color;
}

.user-profile-container {
  background: @primary-fore-color;
  -webkit-box-shadow: @body-fore-color;
  -moz-box-shadow: @body-fore-color;
  box-shadow: @body-fore-color;
}

::ng-deep .user-profile-container .search-centre {
  background-color: @default-light-color;
}

::ng-deep .user-profile-container .address-list .address {
  color: @primary-fore-color;
}

::ng-deep .user-profile-container .address-list .address-box-inner .address {
  color: @body-fore-color;
}

.user-profile-container .address-list .address-box-inner .address span.location {
  color: @default-light-color;
}

::ng-deep .user-profile-container .dx-radiogroup-horizontal .dx-radiobutton {
  background: @default-hover-color;
}

::ng-deep .user-profile-container .dx-radiogroup-horizontal .dx-radiobutton:hover,
::ng-deep .user-profile-container .dx-radiogroup-horizontal .dx-radiobutton.dx-radiobutton-checked {
  background: @default-hover-color;
}

::ng-deep span.login-preferences {
  color: @body-fore-color;
}

::ng-deep .user-profile-container .abs-dx-radiobutton {
  background: @default-hover-color;
}

::ng-deep .user-profile-container .abs-dx-radiobutton:hover,
::ng-deep .user-profile-container .abs-dx-radiobutton.dx-radiobutton-checked {
  background: @default-hover-color;
}

::ng-deep .user-profile-container .user-panel-box {
  background-color: @right-panel-back-color;
  box-shadow: @body-fore-color;
}

::ng-deep .user-profile-container .manage-tab.ng-star-inserted {
  background: @default-light-color;
}

.user-profile-container .manage-tab-background,
.user-profile-container .manage-tab-background .abs-dx-radiobutton {
  background: @default-hover-color;
}


.user-profile-container .user-panel-box {
  background: @primary-fore-color  !important;
}

.user-profile-role-list .change-access {
  color: @body-fore-color  !important;
}

.user-profile-role-list .user-profile-access-level-selection .active,
.switch-family-wrapper .family-item.active {
  background-color: @profile-preference-selected-back-color  !important;
}

.user-profile-role-list .choose-preferred-box {
  border: 1px solid @dark-border-color  !important;
  background-color: @default-tag-back-color  !important;
}

.user-profile-role-list .choose-preferred-box {
  color: @body-fore-color  !important;
  font-size: 14px;
  font-family: @semi-bold-font-family;
  letter-spacing: 0.05px;
}

.user-profile-role-list .choose-preferred-box-without-image {
  border: 1px solid @dark-border-color  !important;
  background-color: @default-tag-back-color  !important;
}

.user-profile-role-list .choose-preferred-box-without-image {
  color: @body-fore-color  !important;
  font-size: 14px;
  font-family: @semi-bold-font-family;
  letter-spacing: 0.05px;
}

.user-profile-role-list .default-login {
  background-color: @default-light-color  !important;
  border-top: 1px solid @dark-border-color  !important;
  border-bottom: 1px solid @dark-border-color  !important;
}

.user-profile-role-list .default-login span.pull-left {
  color: @body-fore-color  !important;
  font-size: 14px;
  font-family: @semi-bold-font-family;
  letter-spacing: 0.06px;
}

.user-profile-role-list .choose-back {
  background-color: @default-light-color  !important;
  border-top: 1px solid @dark-border-color  !important;
  border-bottom: 1px solid @dark-border-color  !important;
}

.user-profile-container .user-profile-role-list .address-list {
  background-color: @default-light-color  !important;
}

.user-profile-container .user-profile-role-list .address-list .address-box-inner .address span.location {
  color: @body-fore-color  !important;
}

.user-profile-container .address-list .thumb {
  background-color: @dark-border-color  !important;
}

.user-profile-container .address-list .thumb .img-wrapper-text {
  color: @body-fore-color  !important;
}

.user-profile-role-list .user-profile-login-pefernce {
  background: @primary-fore-color  !important;
  border: 1px solid @dark-border-color  !important;
}

.user-profile-role .address-box-inner {
  background: @primary-fore-color  !important;
}

.delete-user .control-label.role-text {
  opacity: unset;
  font-size: 12px !important;
  font-weight: normal !important;
  font-family: @semi-bold-font-family
}

// End user-profile

//custom validation message
.custom-validation {
  background-color: @control-validation-overlay-color;
  color: @danger-color;
  padding: 5px 20px;
  font-size: 10px;
  clear: both;
  float: left;
  display: block;
  width: 100%;
  border-left: 4px solid @danger-color;
}

.sub-container .custom-validation {
  width: calc(100% + 40px);
  margin-left: -15px;
}

// when custom validation inside sub container
//END custom validation message
// Warning Toaster
// .toast.toast-warning {color: @body-fore-color; background-color: #ffeed5}
#toast-container>div {
  width: 300px !important;
  padding: 15px 15px 15px 50px !important;
  margin: 0px !important;
}

.toaster-icon {
  background-position-x: 10px;
  background-position-y: 15px;
}

.toast .toast-close-button {
  top: 0px !important;
  position: absolute;
  right: 4px !important;
}

.toast-close-button:hover,
.toast-close-button:focus {
  color: @content-back-color;
  opacity: 0.8;
  outline: none;
}

.toast-top-center {
  top: 15px;
}

// End Warning Toaster

// Tab Control
.tab-control .ant-tabs-nav-wrap {
  margin-bottom: 0
}

.tab-control .ant-tabs-nav {
  padding: 0;
}

.tab-control .ant-tabs-bar {
  position: relative;
  top: 0;
  z-index: 0;
  margin: 0;
  border: 0;
  padding: 0;
  left: 0;
  box-shadow: none;
  background: transparent
}

.tab-control .ant-tabs-nav-scroll {
  background-color: transparent;
}

.tab-control .ant-tabs-nav .ant-tabs-tab {
  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.09);
  border-radius: 4px 4px 0 0 !important;
  margin-right: 4px !important;
}

.tab-control .ant-tabs-nav .ant-tabs-tab-active {
  opacity: 1;
  border: 0;
  background-color: @content-back-color;
  border: 1px solid @dark-border-color;
  border-radius: 4px 4px 0 0;
}

.tab-control .ant-tabs-nav .ant-tabs-tab-active,
.tab-control .ant-tabs-nav .ant-tabs-tab:hover {
  border-bottom: 0px;
}

.tab-control .ant-tabs-nav .ant-tabs-tab:hover {
  color: @primary-color;
}

.tab-control .ant-tabs-ink-bar {
  display: none !important;
}

.tab-control .ant-tabs-tabpane {
  border: 0;
  border-radius: 1px;
  background-color: @content-back-color;
}

.tab-control .ant-tabs-tabpane.ng-star-inserted.ant-tabs-tabpane-active {
  border: 1px solid @dark-border-color;
}

.tab-control.no-border-tab .ant-tabs-tabpane {
  border: 0px !important
}

.tab-control.no-border-tab .ant-tabs-tabpane.ng-star-inserted.ant-tabs-tabpane-active {
  border: 0px !important
}

.ant-tabs.ant-tabs-card>.ant-tabs-bar .ant-tabs-nav-container {
  height: auto;
}

// End Tab Control

//create provider
.create-provider-panel .warning-msg {
  line-height: 1;
  color: @red-color  !important;
}

.create-provider-panel .renew-button {
  vertical-align: top;
  display: inline-block;
  margin-left: 4px;
}

.create-provider-panel .inline-block {
  display: inline-block;
}

// END create provider

// Setting Configuration
.setting-configuration-contaianer {
  width: 100%;
}

.setting-configuration-contaianer .ant-card-body {
  padding: 0;
}

.setting-configuration-contaianer .menu-wrapper {
  width: 200px !important;
  float: left;
}

.setting-configuration-contaianer .configuration-wrapper,
.setting-configuration-contaianer .main-configuration-wrapper {
  background-color: @content-back-color;
  float: left;
  position: relative;
}

.setting-configuration-contaianer .main-configuration-wrapper {
  width: calc(100% - 260px);
  height: calc(100vh - 314px);
  box-shadow: -6px 6px 20px 0px @dark-border-color;
  background-color: @right-panel-back-color;
}

.setting-configuration-contaianer .main-configuration-wrapper.full-width {
  width: 100%;
}

.setting-configuration-contaianer .configuration-wrapper {
  width: 100%;
  min-height: calc(100vh - 306px);
}

.setting-configuration-contaianer .no-level-list-wrapper .configuration-wrapper {
  min-height: calc(100vh - 306px);
}

.setting-configuration-contaianer .no-level-list-wrapper .configuration-wrapper.permanent-booking-configuration,
.setting-configuration-contaianer .no-level-list-wrapper .configuration-wrapper.casual-booking-configuration {
  min-height: calc(100vh - 256px);
}

.setting-configuration-contaianer.level-configuration-container .level-content-container {
  background-color: @content-back-color;
}

.setting-configuration-contaianer.level-configuration-container .level-content-container .header-wrapper .header-text {
  font-family: @semi-bold-font-family;
  font-size: 12px;
  padding-left: 0px
}


// level configuration
.level-configuration-edit-container .configuration-selection-sub-text {
  width: 390px;
  letter-spacing: 0.04px;
  line-height: 14px;
}

.level-configuration-wrapper {
  display: flex;
  border-top: 1px solid @dark-border-color;
  width: 100%;
  clear: both;
  background-color: @left-pane-color;
  min-height: calc(100vh - 204px);
}

.no-level-content-container .level-configuration-wrapper {
  min-height: calc(100vh - 63px);
}

.level-configuration-wrapper .level-list-wrapper {
  background-color: @right-panel-back-color;
}

.level-configuration-wrapper .level-list-configuration .level-list-menu-wrapper {
  background-color: @right-panel-back-color;
}

.no-level-list-wrapper.level-configuration-wrapper .level-list-configuration .level-list-menu-wrapper.horizontal-menu {
  border-left: 0px;
}

// Level configuration level lit
.setting-configuration-contaianer .level-configuration-wrapper .level-list-wrapper {
  width: 260px !important;
  float: left;
  height: calc(100vh - 202px);
  position: relative;
}

.no-level-content-container.setting-configuration-contaianer .level-configuration-wrapper .level-list-wrapper {
  height: calc(100vh - 64px);
}

.setting-configuration-contaianer .level-list-wrapper #levelListWrapperScrollView.inner-sec {
  float: left;
  height: calc(100vh - 253px);
}

.no-level-content-container.setting-configuration-contaianer .level-list-wrapper #levelListWrapperScrollView.inner-sec {
  float: left;
  height: calc(100vh - 63px);
}

.setting-configuration-contaianer .level-configuration-wrapper .level-list-menu-wrapper.vertical-menu {
  height: calc(100vh - 252px);
  position: relative;
}

.no-level-content-container.setting-configuration-contaianer .level-configuration-wrapper .level-list-menu-wrapper.vertical-menu {
  height: calc(100vh - 114px);
}

.setting-configuration-contaianer .no-level-list-wrapper.level-configuration-wrapper .level-list-menu-wrapper.vertical-menu {
  height: calc(100vh - 200px);
}

.setting-configuration-contaianer .level-configuration-wrapper .level-list-wrapper .level-list-configuration-wrapper {
  border-bottom: 1px solid @dark-border-color;
}

.setting-configuration-contaianer .level-configuration-wrapper .level-list-wrapper .setting-menu-wrapper {
  float: left;
  width: 260px !important;
}

.setting-configuration-contaianer .level-configuration-wrapper .level-list-wrapper .setting-menu-wrapper .setting-menu-title {
  width: 100% !important;
  float: left;
  margin: 0px;
  background-color: @default-light-color;
  height: 25px;
  padding: 7px 0px 5px 20px;
  vertical-align: middle;
  // display: inline-table; // Sandip: don't uncomment it without discuss me, if we uncomment it it's width changed to more
}

.setting-configuration-contaianer .level-configuration-wrapper .level-list-configuration {
  width: 100%;
  float: left;
  background-color: @right-panel-back-color;
  position: relative;
  padding-top: 50px;
  border-left: 1px solid @control-border-color
}

.setting-configuration-contaianer .no-level-list-wrapper.level-configuration-wrapper .level-list-configuration {
  padding-top: 0;
  border-left: 0px;
}

.setting-configuration-contaianer .level-configuration-wrapper .level-list-configuration .dx-texteditor.dx-invalid .dx-texteditor-input {
  padding: 6px 9px 6px !important;
}

.setting-configuration-contaianer .level-configuration-wrapper .level-list-configuration .configuration-wrapper.general-configuration .inner-sec,
.setting-configuration-contaianer .level-configuration-wrapper .level-list-configuration .configuration-wrapper.permanent-booking-configuration .inner-sec,
.setting-configuration-contaianer .level-configuration-wrapper .level-list-configuration .configuration-wrapper.casual-booking-configuration .inner-sec {
  max-height: calc(100vh - 415px);
  height: calc(100vh - 415px);
}

.setting-configuration-contaianer .level-configuration-wrapper .level-list-configuration .configuration-wrapper.general-configuration .inner-sec.full-height,
.setting-configuration-contaianer .level-configuration-wrapper .level-list-configuration .configuration-wrapper.permanent-booking-configuration .inner-sec.full-height,
.setting-configuration-contaianer .level-configuration-wrapper .level-list-configuration .configuration-wrapper.casual-booking-configuration .inner-sec.full-height {
  max-height: calc(100vh - 314px);
  height: calc(100vh - 314px);
}

.setting-header-wrapper {
  font-size: 14px;
  background-color: @setting-header-back-color;
  padding: 15px 20px;
  height: 50px;
  border-bottom: 1px solid @dark-border-color;
  line-height: 10px;
  position: absolute;
  top: 0;
  z-index: 9;
  width: 100%;
}

.setting-header-wrapper .settings-text {
  font-size: 18px;
}

.setting-header-wrapper .search-text {
  opacity: 0.2;
}

.setting-header-wrapper .header-text {
  font-size: 18px;
  height: 18px;
  line-height: 15px;
}

.setting-header-wrapper .arrow {
  margin: 0 10px;
  font-size: 20px;
  color: @default-color-dark
}

.setting-header-wrapper .configuration-item-text {
  font-size: 14px;
}

.setting-search-header-wrapper {
  font-size: 14px;
  background-color: @setting-header-back-color;
  height: 50px;
  border-bottom: 1px solid @dark-border-color;
  line-height: 10px;
}

.setting-search-header-wrapper .search-header-text.dx-textbox {
  width: 100%;
  height: 100%;
  border: none;
}

.setting-search-header-wrapper .search-header-text.dx-textbox .dx-placeholder {
  font-size: 14px !important;
  letter-spacing: 0.06px;
}

.settings-container .section-wrapper {
  padding: 20px;
  padding-top: 15px;
  border-bottom: 1px solid @default-border-color;
}

.settings-container .section-wrapper:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.settings-container .section-header {
  padding-bottom: 20px;
  font-family: @bold-font-family;
}

.settings-container .section-details {
  float: left;
  width: 142px;
  padding: 20px;
  text-align: center;
  padding-top: 23px;
}

.settings-container .section-details img {
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
  max-height: 66px;
}

.settings-container .section-details span {
  line-height: 14px;
  padding-top: 6px;
  height: 34px;
  float: left;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  cursor: pointer;
}

.only-block-container .content-wrapper .inner-sec {
  max-height: calc(100vh - 61px);
  height: calc(100vh - 61px);
  width: 100%;
}

.propertyPanel .help-text-inline {
  color: @default-color;
}

.propertyPanel .section-title {
  font-size: 14px !important;
  font-family: @semi-bold-font-family
}

.control-option-wrapper .ant-dropdown-menu {
  border-color: @default-border-color
}

.control-option-wrapper .ant-btn {
  padding-left: 0;
  padding-right: 0;
}

.control-option-wrapper .ant-btn:focus,
.control-option-wrapper .ant-btn:hover {
  color: @body-fore-color-opacity8;
}

// Setting Configuration Fixed position
.configuration-footer {
  position: fixed;
  bottom: 12px;
  z-index: 9;
  padding: 10px;
  line-height: 30px;
  background: @content-back-color;
  width: auto !important;
  border-top: 1px solid @control-border-color;
}

.configuration-footer:before {
  content: "";
  background: @body-back-color;
  position: absolute;
  left: -1px;
  right: -1px;
  height: 11px;
  bottom: -11px;
  border-top: 1px solid @control-border-color;
  display: block;
}

.sticky-div.no-scroll .configuration-footer:before,
.setting-configuration-contaianer .sticky-div.no-scroll .level-list-wrapper:before,
.setting-configuration-contaianer .sticky-div.no-scroll .level-list-menu-wrapper.vertical-menu:before,
.setting-configuration-contaianer .sticky-div.no-scroll .level-configuration:before {
  display: none;
}

.setting-configuration-contaianer .configuration-wrapper {
  position: relative;
  border-right: 0 !important
}

.setting-configuration-contaianer .configuration-wrapper .dx-validationgroup:after {
  content: "";
  display: table;
  clear: both;
}

.setting-configuration-contaianer .configuration-wrapper .dx-validationgroup {
  float: left;
  width: 100%;
  position: relative;
}

.setting-configuration-contaianer .level-configuration {
  background-color: @content-back-color;
  position: relative;
  border-left: 1px solid @control-border-color
}

.setting-configuration-contaianer .level-list-wrapper:before,
.setting-configuration-contaianer .level-list-menu-wrapper.vertical-menu:before,
.setting-configuration-contaianer .level-configuration:before {
  content: "";
  background: @body-back-color;
  position: fixed;
  left: 50px;
  right: -10px;
  height: 12px;
  bottom: 0px;
  display: block;
  z-index: 9;
  border-top: 1px solid @control-border-color;
  max-width: 1350px;
  width: calc(100% - 60px);
}

.no-level-list-wrapper.level-configuration-wrapper>.level-list-wrapper+.level-list-configuration>.level-list-menu-wrapper.vertical-menu+.level-configuration .configuration-footer {
  left: 251px !important;
  max-width: 1149px;
  width: calc(100% - 261px) !important;
}

.level-configuration-wrapper>.level-list-wrapper+.level-list-configuration>.level-list-menu-wrapper.vertical-menu+.level-configuration .configuration-footer {
  left: 512px !important;
  max-width: 888px;
  width: calc(100% - 522px) !important;
}

.level-configuration-wrapper>.level-list-wrapper+.level-list-configuration>.level-list-menu-wrapper.horizontal-menu+.level-configuration .configuration-footer {
  left: 311px !important;
  max-width: 1089px;
  width: calc(100% - 322px) !important;
}

.no-level-list-wrapper.level-configuration-wrapper>.level-list-wrapper+.level-list-configuration>.level-list-menu-wrapper.horizontal-menu+.level-configuration .configuration-footer {
  left: 50px !important;
  max-width: 1350px;
  width: calc(100% - 60px) !important;
}

.no-level-list-wrapper.level-configuration-wrapper>.level-list-wrapper+.level-list-configuration>.level-list-menu-wrapper.no-any-menu+.level-configuration .configuration-footer {
  left: 50px !important;
  max-width: 1350px;
  width: calc(100% - 60px) !important;
}

.level-configuration-wrapper>.level-list-wrapper+.level-list-configuration>.level-configuration .configuration-footer {
  left: 311px !important;
  max-width: 1090px;
  width: calc(100% - 322px) !important;
}

.level-configuration-wrapper>.level-list-wrapper+.level-list-configuration .configuration-footer {
  left: 52px !important;
}

.level-configuration-wrapper>.level-list-wrapper+.level-list-configuration>.level-configuration {
  width: 100%;
}

.level-configuration-wrapper>.level-list-wrapper+.level-list-configuration>.level-list-menu-wrapper.vertical-menu+.level-configuration {
  width: calc(100% - 200px);
}

.level-configuration-wrapper>.level-list-wrapper+.level-list-configuration>.level-list-menu-wrapper.horizontal-menu+.level-configuration {
  width: 100%;
  border-left: 0px;
}

.no-level-list-wrapper.level-configuration-wrapper>.level-list-wrapper+.level-list-configuration>.level-list-menu-wrapper.horizontal-menu+.level-configuration {
  border-left: 0px;
}

.with-top-horizontal-menu .left-pane {
  border-right: 0px;
}

.with-top-horizontal-menu .right-pane {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

// 7px is given top padding to checkbox, so every where margin/padding adjust i.e (20-7=13)
.configuration-wrapper .configuration-control-wrapper {
  padding: 0 20px 20px 20px;
  width: 100% !important;
  float: left;
}

.configuration-wrapper .configuration-control-wrapper:first-child {
  padding-top: 20px;
}

.configuration-wrapper .configuration-control-wrapper.terms-conditions {
  padding-bottom: 10px;
  width: 100% !important;
  float: left;
}

.configuration-wrapper .configuration-control-wrapper.with-input-control {
  padding-top: 0px;
}

.configuration-control-wrapper {
  float: left;
  width: 100%;
  line-height: normal;
}

.configuration-control-wrapper .checkbox-control {
  float: left;
  padding-top: 0px;
}

.configuration-control-wrapper .checkbox-label-wrapper {
  float: left;
  padding-left: 10px;
  width: calc(100% - 20px);
  line-height: 1;
}

.checkbox-label-wrapper.checkbox-lable-seperate {
  float: left;
  padding-left: 10px;
  width: calc(100% - 20px);
  line-height: 16px;
}

.configuration-control-wrapper .checkbox-label-wrapper .sub-text {
  clear: both;
  float: left;
  padding-top: 5px;
  margin-bottom: 0;
  width: 100%;
}

.configuration-control-wrapper .checkbox-label-wrapper .input-control {
  margin: 0 10px;
  display: inline-block;
  vertical-align: middle;
  float: none;
}

.configuration-control-wrapper .checkbox-label-wrapper .input-control.dx-textbox {
  width: 100px;
}

.configuration-control-wrapper .checkbox-label-wrapper .control-text {
  line-height: normal;
}

.configuration-control-wrapper.with-input-control .checkbox-label-wrapper .control-text {
  line-height: 25px;
}

.configuration-control-wrapper.with-input-control .checkbox-control {
  float: left;
  padding-top: 7px;
}

.configuration-control-wrapper .sub-control-wrapper {
  float: left;
  padding: 20px 20px 0 25px;
  width: 100%;
}

.configuration-wrapper .multiple-item-hr {
  float: left;
  width: 100%;
  margin: 0px 0px 20px;
}

// End Setting Configuration

// enrolment configuration
.enrolment-configuration-detail-wrapper .ant-dropdown-menu {
  border-color: @default-border-color
}

.enrolment-configuration-detail-wrapper .ant-btn:focus,
.enrolment-configuration-detail-wrapper .ant-btn:hover {
  color: @body-fore-color-opacity8;
}

// end enrolment configuration

// Vacancy & Fee - Horizontal menu
.setting-configuration-contaianer .horizontal-menu {
  width: calc(100% - 200px);
  float: none !important;
}

.setting-configuration-contaianer .horizontal-menu .level-list-configuration-wrapper .ant-menu {
  width: 100% !important;
  line-height: 0px !important
}

.horizontal-menu .level-list-configuration-wrapper .ant-menu-item {
  display: block !important;
}

.horizontal-menu .level-list-configuration-wrapper .ant-menu-item::after,
.horizontal-menu .level-list-configuration-wrapper .ant-menu-item::before {
  content: none !important;
}

.horizontal-menu .level-list-configuration-wrapper .ant-menu-item:hover {
  background-color: transparent;
}

.setting-configuration-contaianer .horizontal-menu .level-list-configuration-wrapper .ant-menu-item-selected,
.setting-configuration-contaianer .horizontal-menu .level-list-configuration-wrapper .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: transparent !important;
  border-bottom: 4px solid @primary-color;
  color: @primary-color  !important;
  padding: 6px 10px 7px 10px !important;
  font-family: @semi-bold-font-family  !important;
}

.setting-configuration-contaianer .horizontal-menu .level-list-configuration-wrapper .ant-menu-inline .ant-menu-item {
  display: inline-block !important;
  width: auto !important;
  padding: 8px 10px !important;
  height: 28px !important;
  margin-bottom: 0px !important;
  font-size: 12px !important;
  font-family: @medium-font-family  !important;
  letter-spacing: 0.24px !important;
}

.setting-configuration-contaianer .horizontal-menu .level-list-configuration-wrapper .ant-menu-inline {
  padding: 0px 15px 0px 10px;
  background-color: @content-back-color  !important;
  border-bottom: 1px solid @default-border-color  !important;
}

// Setting Details
.detail-setting-view {
  border-top: none
}

.detail-setting-view .sub-title {
  padding: 20px 20px 0px;
}

.detail-setting-view .sub-title h3 {
  font-size: 12px;
}

.detail-setting-view .section-wrapper {
  display: table;
  width: 100%;
}

// End // Setting Details

// permanent booking configuration
.permanent-booking-configuration .room-setting-wrapper {
  display: table;
  width: 100%;
  border: 1px solid @dark-border-color;
  min-height: calc(100vh - 665px);
  background-color: @right-panel-back-color;
}

.permanent-booking-configuration .room-setting-wrapper .menu-wrapper,
.permanent-booking-configuration .room-setting-wrapper .configuration-wrapper {
  min-height: calc(100vh - 665px);
  width: calc(100% - 200px);
}

.permanent-booking-configuration .room-setting-wrapper .inner-sec {
  height: auto !important;
  max-height: calc(100vh - 665px) !important;
}

.permanent-booking-configuration .configuration-wrapper .room-booking-configuration {
  border-left: 1px solid @dark-border-color;
  background: @default-light-color;
}

.permanent-booking-configuration .room-setting-wrapper .ant-menu {
  padding: 0px;
}

// end permanent booking configuration

// casual booking configuration
.casual-booking-configuration .room-setting-wrapper {
  display: table;
  width: 100%;
  border: 1px solid @dark-border-color;
  min-height: calc(100vh - 665px);
  background-color: @right-panel-back-color;
}

.casual-booking-configuration .room-setting-wrapper .menu-wrapper,
.casual-booking-configuration .room-setting-wrapper .configuration-wrapper {
  min-height: calc(100vh - 665px);
  width: calc(100% - 200px);
}

.casual-booking-configuration .room-setting-wrapper .inner-sec {
  height: auto !important;
  max-height: calc(100vh - 571px) !important;
}

.casual-booking-configuration .configuration-wrapper .room-booking-configuration {
  border-left: 1px solid @dark-border-color;
  background: @default-light-color;
}

.casual-booking-configuration .room-setting-wrapper .ant-menu {
  padding: 0px;
}

// end casual booking configuration

// custom-control css start
.custom-control-create-panel-wrapper {
  float: left;
  width: 100%;
  padding: 0 5px;
}

.custom-control-create-panel-wrapper .width100 {
  width: 100% !important;
  padding-bottom: 20px !important;
  padding-left: 0 !important;
}

.custom-control-create-panel-wrapper .width50 {
  width: 50% !important;
  padding-bottom: 20px !important;
}

.custom-control-create-panel-wrapper .width33 {
  width: 33.33% !important;
  padding-bottom: 20px !important;
}

.custom-control-create-panel-wrapper .width66 {
  width: 66.66% !important;
  padding-bottom: 20px !important;
}

.custom-control-create-panel-wrapper .width75 {
  width: 75% !important;
  padding-bottom: 20px !important;
}

.custom-control-create-panel-wrapper .width25 {
  width: 25% !important;
  padding-bottom: 20px !important;
}

// .dynamic-createPanel .custom-control-create-panel-wrapper .width100 {padding-top: 20px !important; padding-bottom: 0 !important;}
// .dynamic-createPanel .custom-control-create-panel-wrapper .width50 {padding-top: 20px !important; padding-bottom: 0 !important;}
// .dynamic-createPanel .custom-control-create-panel-wrapper .width33 {padding-top: 20px !important; padding-bottom: 0 !important;}
// .dynamic-createPanel .custom-control-create-panel-wrapper .width66 {padding-top: 20px !important; padding-bottom: 0 !important;}
// .dynamic-createPanel .custom-control-create-panel-wrapper .width75 {padding-top: 20px !important; padding-bottom: 0 !important;}
// .dynamic-createPanel .custom-control-create-panel-wrapper .width25 {padding-top: 20px !important; padding-bottom: 0 !important;}
.dynamic-createPanel .custom-control-create-panel-wrapper .width66.padding_top0 {
  padding-top: 0px !important;
}

.dynamic-createPanel .custom-control-create-panel-wrapper .width33.padding_top0 {
  padding-top: 0px !important;
}

.custom-control-create-panel-wrapper .width100.padding_bottom0 {
  padding-bottom: 0 !important;
}

.custom-control-create-panel-wrapper .width50.padding_bottom0 {
  padding-bottom: 0 !important;
}

.custom-control-create-panel-wrapper .width33.padding_bottom0 {
  padding-bottom: 0 !important;
}

.custom-control-create-panel-wrapper .width66.padding_bottom0 {
  padding-bottom: 0 !important;
}

.custom-control-create-panel-wrapper .width75.padding_bottom0 {
  padding-bottom: 0 !important;
}

.custom-control-create-panel-wrapper .width25.padding_bottom0 {
  padding-bottom: 0 !important;
}

.custom-control-create-panel-wrapper.dynamic-fields {
  padding-left: 10px;
  padding-right: 0;
  padding-top: 0px;
}

// custom-control css end

// detail-setting-view start
.no-level-list-wrapper .detail-setting-view {
  border-left: 0px;
}

.no-level-content-container .detail-setting-view {
  min-height: calc(100vh - 114px);
}

.level-configuration .detail-setting-view .sub-container {
  background: @header-fore-color;
  padding: 20px 20px 0px 20px;
}

.level-configuration .detail-setting-view .sub-container-wrapper {
  padding-bottom: 70px;
}

// detail-setting-view end

//email-template configuration start
.email-template-configuration .ant-card-body {
  padding: 0;
  max-width: 100% !important
}

.email-template-list-container .content-color {
  background: @content-back-color  !important;
}

.email-template-list-container .dx-datagrid {
  border: none !important;
}

.email-template-configuration .top-filter {
  position: relative !important;
  top: 0px !important;
}

.email-template-configuration .dx-datagrid.dx-gridbase-container .dx-datagrid-headers.dx-datagrid-nowrap {
  position: relative !important;
  top: 0px !important
}

.email-template-list-container .sub-text-header-wrapper {
  color: @body-fore-color-opacity6  !important
}

.email-template-list-container .dx-datagrid.dx-gridbase-container .dx-datagrid-headers.dx-datagrid-nowrap {
  width: 100% !important
}

.email-template-list-container .dx-datagrid.dx-gridbase-container .dx-datagrid-rowsview {
  padding-top: 0px !important;
}

.email-template-general-content-container .sub-text {
  font-size: 10px;
  color: @body-fore-color-opacity6;
  margin-bottom: 0px;
  letter-spacing: 0.14px !important;
  line-height: 16px;
}

.email-template-configuration .setting-search-header-wrapper .search-header-text.dx-textbox .dx-placeholder {
  margin-left: 10px !important;
  margin-top: 2px !important;
}

.email-configuration-container .fullHeight .dx-datagrid-rowsview {
  min-height: calc(100vh - 610px) !important;
}

.email-configuration-container .dx-datagrid.dx-gridbase-container .dx-datagrid-headers.dx-datagrid-nowrap {
  width: 100% !important
}

.email-configuration-container .grid-with-grouping .dx-datagrid.dx-gridbase-container .dx-datagrid-rowsview {
  padding-top: 0px !important;
}

.email-configuration-container .dx-datagrid .actionColumn i {
  padding-left: 0px !important;
}

.email-template-list-container .grid-container {
  min-height: calc(100vh - 253px);
  height: calc(100vh - 160px);
}

.email-template-list-container .fullHeight .dx-datagrid-rowsview {
  min-height: calc(100vh - 348px) !important;
}

.email-general-configuration .font-color {
  color: @body-fore-color  !important;
}

.email-template-configuration .email-template-configuration-wrapper {
  background-color: @content-back-color;
  max-width: calc(100% - 208px);
  min-height: calc(100vh - 150px);
  max-height: calc(100vh - 62px);
  float: left;
  border-left: 1px solid @dark-border-color;
  border-right: 1px solid @dark-border-color
}

//email-template configuration end

// View Payment And Billing Profile Start
.view-payment-billing-profile-container .ant-card-body {
  padding: 0;
}

.view-payment-billing-profile-container .sidebar-box-sec {
  background-color: @content-back-color;
  width: 630px;
  float: left;
  border-right: 1px solid @dark-border-color
}

.view-payment-billing-profile-container .sub-container {
  background: @header-fore-color;
}

// View Payment And Billing Profile End

// session report view
// .session-report-general-info { background-color: @primary-selected-color; }

/*Learning Framework start*/

.inside-configuration-container .header-wrapper .header-text {
  font-family: @semi-bold-font-family;
}

.inside-configuration-container .body-wrapper .list-section-wrapper {
  border-color: @dark-border-color  !important;
}

.inside-configuration-container .body-wrapper .main-section-wrapper {
  background: @content-back-color;
  border-color: @dark-border-color  !important;
}

.inside-configuration-container .body-wrapper .main-section-wrapper .title-section {
  border-color: @dark-border-color  !important;
}

.inside-configuration-container {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.inside-configuration-container .header-wrapper {
  padding: 20px;
  max-height: 92px; // sandip: don't remove or update without discuss with me
}

.inside-configuration-container .header-wrapper .header-text {
  font-size: 12px;
}

.inside-configuration-container .header-wrapper .header-text-wrapper {
  width: 100%;
  float: left;
  clear: both;
}

.inside-configuration-container .body-wrapper .list-section-wrapper {
  width: 200px;
  float: left;
  border-top: 1px solid;
  border-right: 1px solid;
  height: calc(100vh - 378px);
  background-color: @right-panel-back-color
}

.inside-configuration-container .body-wrapper .list-section-wrapper .list-category {
  width: 100%;
  float: left;
  margin: 0px;
  height: 30px;
  padding: 8px 0px 8px 20px;
  vertical-align: middle;
  display: inline-table;
}

.inside-configuration-container .body-wrapper .main-section-wrapper {
  width: calc(100% - 200px);
  float: left;
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.inside-configuration-container .body-wrapper .main-section-wrapper .title-section {
  padding: 0 20px;
  height: 40px;
  line-height: 10px;
  border-bottom: 1px solid;
}

.inside-configuration-container .body-wrapper .main-section-wrapper .tree-section {
  padding: 10px 0px;
}

.inside-configuration-container .body-wrapper .main-section-wrapper .tree-section .tree-row-template-view {
  width: 100%;
  height: 40px;
  padding-top: 11px;
  display: table-cell;
  padding-left: 1px;
}

.inside-configuration-container .body-wrapper .main-section-wrapper .tree-section .tree-icon {
  float: left;
}

.inside-configuration-container .body-wrapper .main-section-wrapper .tree-section .tree-text {
  float: left;
  padding-left: 10px;
  width: calc(100% - 30px)
}

.inside-configuration-container .body-wrapper .main-section-wrapper .tree-section .tree-action-menu {
  float: right;
}

.inside-configuration-container .inside-configuration-tree .dx-treeview-item-without-checkbox.dx-state-focused>.dx-treeview-item {
  background: none;
}

.inside-configuration-container .inside-configuration-tree .dx-treeview-item-without-checkbox.dx-state-focused>.dx-treeview-item * {
  color: @body-fore-color-opacity9;
}

.inside-configuration-container .inside-configuration-tree .dx-treeview-item-without-checkbox>.dx-treeview-item {
  padding: 0px 20px;
  height: 40px;
  display: table;
  width: 100%;
}

.inside-configuration-container .inside-configuration-tree .dx-treeview-item-without-checkbox>.dx-treeview-toggle-item-visibility {
  height: 40px;
}

.inside-configuration-container .inside-configuration-tree .dx-treeview-item-without-checkbox>.dx-treeview-toggle-item-visibility::before {
  margin-top: 14px;
  margin-left: 12px;
}

.inside-configuration-container .inside-configuration-tree .dx-treeview-item-without-checkbox>.dx-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened::before {
  margin-top: 22px;
  margin-left: 6px;
}

.dx-treeview-toggle-item-visibility:before,
.dx-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened:before {
  top: 0 !important;
}

.inside-configuration-container .inside-configuration-tree .dx-treeview-item-without-checkbox:hover>.dx-treeview-item {
  background-color: transparent !important;
}

.inside-configuration-container .inside-configuration-tree .dx-treeview-item-without-checkbox:hover>.dx-treeview-toggle-item-visibility {
  background-color: transparent !important;
}

.inside-configuration-container .inside-configuration-tree .dx-treeview-item-without-checkbox:hover>.dx-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened {
  background-color: transparent !important;
}

.inside-configuration-container .setting-search-header-wrapper {
  height: 40px;
}

.inside-configuration-container .body-wrapper .main-section-wrapper .title-section>.col1,
.inside-configuration-container .body-wrapper .main-section-wrapper .title-section>.col4,
.inside-configuration-container .body-wrapper .main-section-wrapper .title-section>.col5 {
  display: table-cell;
  vertical-align: middle;
  float: none;
}

.inside-configuration-container .body-wrapper .main-section-wrapper .title-section {
  display: table;
  width: 100%;
}

.inside-configuration-container .header-wrapper:after {
  display: table;
  content: "";
  clear: both;
}

.inside-configuration-container .header-wrapper .header-text-wrapper {
  width: calc(100% - 40px) !important;
}

.inside-configuration-container .header-wrapper .header-text-wrapper .header-text {
  margin-bottom: 10px;
}

.inside-configuration-container .body-wrapper .main-section-wrapper .title-section .title-text i.action-icon {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  left: -5px;
  padding: 6px;
}

.inside-configuration-container .body-wrapper .main-section-wrapper .title-section .title-text {
  position: relative;
  padding-left: 30px;
}

.inside-configuration-container .body-wrapper .main-section-wrapper .title-section .title-text img {
  position: absolute;
  left: 0px;
  top: 50%;
  width: 20px;
  height: auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.inside-configuration-container .body-wrapper .main-section-wrapper .title-section .title-text .header-text {
  color: @body-fore-color-opacity9;
  font-family: @semi-bold-font-family;
  font-size: 14px;
  letter-spacing: 0.06px;
  line-height: 12px;
}

.inside-configuration-container .body-wrapper .main-section-wrapper .title-section .title-text.col1.title-text-without-icon {
  padding-left: 0;
}

.inside-configuration-container ul.group-title .ant-menu-item {
  position: relative;
  padding-left: 44px !important;
}

.inside-configuration-container ul.group-title .ant-menu-item img {
  position: absolute;
  left: 20px;
  width: 14px;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.dx-treeview-toggle-item-visibility:before {
  content: "" !important;
  background-image: url(images/tree-triangle.svg);
  background-size: 7px 9px;
  width: 7px;
  height: 9px;
  display: block;
  background-repeat: no-repeat;
}

.right-pane .dx-treeview-toggle-item-visibility:before {
  background-size: 22px 9px;
  width: 22px;
  height: 9px;
}

.checkbox-tree-wrapper .dx-treeview-toggle-item-visibility:before {
  background-size: 22px 9px;
  width: 22px;
  height: 9px;
}

.right-pane .dx-treeview-toggle-item-visibility:before,
.right-pane .dx-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened:before {
  top: 7px !important;
  margin-top: 0 !important;
}

.checkbox-tree-wrapper .dx-treeview-toggle-item-visibility:before,
.checkbox-tree-wrapper .dx-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened:before {
  top: 7px !important;
  margin-top: 0 !important;
}

.dx-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened:before {
  content: "" !important;
  transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

/*Learning Framework end*/


/* Reorder List Start */
.reorder-list .dx-list-next-button {
  display: none;
}

// .reorder-list .dx-scrollable-container {display: none;}
.reorder-list .dx-item.dx-list-item {
  overflow: visible;
}

.reorder-list .dx-item.dx-list-item .dx-item-content.dx-list-item-content {
  overflow: visible;
}

.reorder-list .dx-list-item {
  background: @right-panel-back-color  !important;
  border: 0 !important;
  box-shadow: none !important;
}

.reorder-list .dx-item-content.dx-list-item-content {
  float: right !important;
  width: 95.2%;
  padding-right: 27px !important;
  padding-left: 0px !important;
}

.reorder-list .dx-list-item-after-bag.dx-list-reorder-handle-container {
  float: left !important;
  display: block;
  height: 78px;
  position: relative;
  width: 4.8%;
}

.reorder-list .dx-list-item-after-bag.dx-list-reorder-handle-container .dx-list-reorder-handle {
  height: 100%;
  width: 100%;
  padding: 0px
}

.reorder-list .dx-list-item-after-bag.dx-list-reorder-handle-container .dx-list-reorder-handle:before {
  content: "";
  background-image: url(../assets/images/reorder.svg);
  width: 15px;
  height: 15px;
  position: absolute;
  left: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

.reorder-list .dx-list-item.dx-state-hover,
.reorder-list .dx-list-item.dx-state-active {
  background-color: @right-panel-back-color  !important;
}

/* Reorder List End*/

// Activity Type
.activity-type-detail-container .activity-type-detail-section .detail-section {
  border-top: 1px solid @control-border-color;
}

.activity-type-detail-container .activity-type-detail-section .header-section {
  font-size: 10px;
  font-family: @semi-bold-font-family;
  letter-spacing: 0.14px;
  color: @body-fore-color-opacity9
}

.activity-type-detail-container .activity-type-detail-section .header-section .control-option-wrapper button.ant-dropdown-trigger {
  border: 0;
  background-color: transparent;
  line-height: 1;
}

.activity-type-detail-container .activity-type-detail-section .control-type-wrapper {
  font-size: 10px;
  font-family: @medium-font-family;
  letter-spacing: 0.04px;
  color: @body-fore-color-opacity6
}

/*session report start*/
.session-details-main,
.session-head {
  width: 100%;
  display: inline-block;
  letter-spacing: 0.05px;
}

.accordion-header-wrapper,
.accordion-detail-wrapper {
  width: 100%;
  float: left;
  height: auto;
  background-color: @right-panel-back-color;
}

/**/
.session-head,
.session-tabs,
.session-cont,
.session-subsidies,
.session-discount,
.session-other-subsidies,
.session-attendances {
  width: 100%;
  float: left;
}

.session-head {
  border-bottom: 1px solid @control-primary-border-color;
  font-size: 10px;
}

.session-head .block {
  display: inline-block;
}

.session-details-main .block .control-value {
  letter-spacing: 0.05px;
  padding: 0;
}

.session-details-main .block .control-label {
  letter-spacing: 0.04px;
}

.session-details-main .session-tabs .block {
  height: 50px;
  display: table;
  background-color: @header-fore-color;
}

.session-details-main .session-tabs .block5 {
  text-align: center;
}

.session-head .block1,
.session-details-main .block1 {
  padding-left: 20px;
}

.session-head .block2,
.session-details-main .block2 {
  padding-left: 35px;
}

.session-head .block3,
.session-details-main .block3 {
  padding-left: 35px;
}

.session-head .block4,
.session-details-main .block4 {
  padding-left: 29px;
}

.session-head .block1 .v-align,
.session-details-main .block1 .v-align {
  width: 71px;
}

.session-head .block2 .v-align,
.session-details-main .block2 .v-align {
  width: 164px;
}

.session-head .block3 .v-align,
.session-details-main .block3 .v-align {
  width: 97px;
}

/*.session-details-main .block4 .v-align { width:36px; }*/

.session-details-main .block1,
.session-details-main .block2,
.session-details-main .block3,
.session-details-main .block4,
.session-details-main .block5,
.session-details-main .block6 {
  float: left;
}

/**/
.session-details-main .v-align {
  vertical-align: middle;
  display: table-cell;
}

.session-details-main .small {
  font-size: 10px;
  margin: 0;
}

.viewPanel .session-details-main .control-label {
  display: block;
}

.session-details-main .block .control-value,
.session-details-main .block .control-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-details-main .session-tabs .block1 .control-value,
.session-details-main .session-tabs .block1 .control-label {
  max-width: 71px;
}

.session-details-main .session-tabs .block2 .control-value,
.session-details-main .session-tabs .block2 .control-label {
  max-width: 164px;
}

.session-details-main .session-tabs .block3 .control-value,
.session-details-main .session-tabs .block3 .control-label {
  max-width: 97px;
}

.session-details-main .session-tabs .block4 .control-value,
.session-details-main .session-tabs .block4 .control-label {
  max-width: 71px;
}

/**/
.session-details-main .session-cont .block .control-value,
.session-details-main .session-cont .block .control-label {
  max-width: 90px;
}

.session-details-main .session-cont {
  background-color: @primary-selected-color;
}

.session-details-main .session-cont .block {
  height: 64px;
  display: table;
}

.session-details-main .session-cont .block .v-align {
  width: 90px;
}

.session-details-main .session-cont .block {
  padding-left: 10px;
}

.session-details-main .session-cont .block1 {
  padding-left: 20px;
}

.session-details-main .unit.session-cont {
  background-color: transparent;
  padding-bottom: 20px;
}

.session-details-main .unit.session-cont .block {
  height: auto;
}

.session-details-main .full-width {
  width: 100%;
  float: left;
  height: 64px;
  display: table;
  padding-left: 20px;
}

.session-details-main .absence.full-width {
  width: 390px;
  clear: both;
  padding-top: 20px;
  padding-bottom: 16px;
}

.session-details-main .block .control-value.absent {
  color: @red-color;
}

.session-details-main h5 {
  font-size: 12px;
  letter-spacing: 0.05px;
  margin: 0 0 0 20px;
  border-top: 1px solid @control-primary-border-color;
  padding-top: 19px;
  padding-bottom: 6px;
}

.session-details-main .session-subsidies {
  padding: 0 0 20px;
}

.session-details-main .session-subsidies .block {
  height: auto;
}

.session-details-main .session-subsidies .block1 .v-align {
  width: 116px;
}

.session-details-main .session-subsidies .block2 .v-align {
  width: 25px;
}

.session-details-main .session-subsidies .block3 .v-align {
  width: 38px;
}

.session-details-main .session-subsidies .block4 .v-align {
  width: 31px;
}

.session-details-main .session-subsidies .block5 .v-align {
  width: 47px;
}

.session-details-main .session-subsidies .block6 .v-align {
  width: 58px;
}

.session-details-main .session-subsidies .block1 .control-value,
.session-details-main .session-subsidies .block1 .control-label {
  max-width: 116px;
}

.session-details-main .session-subsidies .block2 .control-value,
.session-details-main .session-subsidies .block2 .control-label {
  max-width: 25px;
}

.session-details-main .session-subsidies .block3 .control-value,
.session-details-main .session-subsidies .block3 .control-label {
  max-width: 38px;
}

.session-details-main .session-subsidies .block4 .control-value,
.session-details-main .session-subsidies .block4 .control-label {
  max-width: 31px;
}

.session-details-main .session-subsidies .block5 .control-value,
.session-details-main .session-subsidies .block5 .control-label {
  max-width: 47px;
}

.session-details-main .session-subsidies .block6 .control-value,
.session-details-main .session-subsidies .block6 .control-label {
  max-width: 58px;
}

.session-details-main .session-subsidies .block1 {
  padding-left: 20px;
}

.session-details-main .session-subsidies .block2 {
  padding-left: 47px;
}

.session-details-main .session-subsidies .block3 {
  padding-left: 20px;
}

.session-details-main .session-subsidies .block4 {
  padding-left: 29px;
}

.session-details-main .session-subsidies .block5 {
  padding-left: 20px;
}

.session-details-main .session-subsidies .block6 {
  padding-left: 32px;
}

.session-details-main .session-discount {
  padding: 0 0 20px;
}

.session-details-main .session-discount .block {
  height: auto;
}

.session-details-main .session-discount .block1 .v-align {
  width: 190px;
}

.session-details-main .session-discount .block2 .v-align {
  width: 90px;
}

.session-details-main .session-discount .block1 .control-value,
.session-details-main .session-discount .block1 .control-label {
  max-width: 190px;
}

.session-details-main .session-discount .block2 .control-value,
.session-details-main .session-discount .block2 .control-label {
  max-width: 90px;
}

.session-details-main .session-discount .block1 {
  padding-left: 20px;
}

.session-details-main .session-discount .block2 {
  padding-left: 10px;
}

.session-details-main .session-other-subsidies {
  padding: 0 0 20px;
}

.session-details-main .session-other-subsidies .block {
  height: auto;
}

.session-details-main .session-other-subsidies .block1 .v-align {
  width: 190px;
}

.session-details-main .session-other-subsidies .block2 .v-align {
  width: 90px;
}

.session-details-main .session-other-subsidies .block1 .control-value,
.session-details-main .session-other-subsidies .block1 .control-label {
  max-width: 190px;
}

.session-details-main .session-other-subsidies .block2 .control-value,
.session-details-main .session-other-subsidies .block2 .control-label {
  max-width: 90px;
}

.session-details-main .session-other-subsidies .block1 {
  padding-left: 20px;
}

.session-details-main .session-other-subsidies .block2 {
  padding-left: 10px;
}

.session-details-main .session-attendances .block {
  height: auto;
}

.session-details-main .session-attendances .block1 .v-align {
  width: 80px;
}

.session-details-main .session-attendances .block2 .v-align {
  width: 90px;
}

.session-details-main .session-attendances .block1 {
  padding-left: 20px;
}

.session-details-main .session-attendances .block2 {
  padding-left: 110px;
}

.session-details-main .absence.full-width.block .control-label,
.session-details-main .absence.full-width.block .control-value {
  width: 390px;
  white-space: normal;
}

.session-details-main .dx-accordion-item-title:before {
  display: block;
  position: absolute;
  right: 14px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  font-size: @label-font-size;
}

.session-details-main .dx-accordion-item {
  min-height: 50px !important;
}

/* session report end */

/* Inline Form control and label */
.text-control-wrapper {
  float: left;
  width: 100%;
  line-height: 30px;
  padding-left: 5px;
  margin-bottom: 20px
}

.text-control-wrapper::after,
.text-control-wrapper::before {
  clear: both
}

.text-control-wrapper .input-control {
  float: left;
  margin: 0 10px;
}

.text-control-wrapper .control-text {
  float: left;
}

.input-border-bottom-only {
  border-top: 0px !important;
  border-left: 0px !important;
  border-right: 0px !important;
  border-bottom: 2px solid @primary-fore-color  !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.transparent-background input {
  background-color: transparent;
}

// booking pattern in grid
.booking-pattern-Wrapper .count-wrapper {
  background-color: @default-opacity05;
}

.booking-pattern-Wrapper .arrow-right {
  border-left: 6px solid @row-selected-color;
}

.booking-pattern-Wrapper .text-wrapper {
  font-size: 12px;
  letter-spacing: 0.24px;
  line-height: 10px;
  font-family: @medium-font-family
}

// write any component css above this line

// Role Management
.create-role-container .permission-table {
  width: 100%;
}

.create-role-container .permission-table td {
  height: 25px;
  line-height: 23px;
  display: table-cell;
}

.create-role-container .permission-table th {
  margin-bottom: 10px;
  vertical-align: top;
  height: 32px;
  line-height: 30px;
  color: @body-fore-color-opacity6
}

.create-role-container.view-role-container .permission-table th {
  margin-bottom: 0px;
  vertical-align: top;
  height: 25px;
  line-height: 25px;
}

.create-role-container .permission-table td.parent-item {
  height: 34px;
  border-top: 1px solid @dark-border-color;
  vertical-align: bottom;
}

.create-role-container .permission-table .modulename-column {
  width: 192px;
  font-family: @semi-bold-font-family
}

// .create-role-container .permission-table .modulename-column .text-ellipsis {width: 180px;}
.create-role-container .permission-table .permission-action-column {
  min-width: 50px;
  text-align: center;
  font-size: 10px;
  font-family: @body-font-family;
  vertical-align: top;
}

.create-role-container .permission-table .modulename-column.child-permission {
  padding-left: 15px;
  font-family: @body-font-family
}

.create-role-container .permissions-container {
  border-bottom: 1px solid @dark-border-color;
  float: left;
  width: 100%;
}

.create-role-container .permissions-container .permission-table .dx-checkbox-icon {
  margin-top: 0px;
}

.create-role-container .permissions-container .permission-table .dummy-column-left {
  padding-left: 15px;
}

.create-role-container .permissions-container .permission-table .dummy-column-right {
  padding-right: 20px;
}

.create-role-container .permissions-container .permission-table .permission-action-column .image-wrapper {
  float: left;
  line-height: 1;
  width: 100%;
}

.primary-back-color,
.primary-back-color.dx-state-focused {
  background-color: @primary-color;
  color: @primary-fore-color  !important;
  border-color: @primary-color  !important;
}

.primary-back-color:hover {
  background-color: @primary-hover-color;
  color: @primary-fore-color  !important;
  border-color: @primary-hover-color  !important;
}

.success-back-color,
.success-back-color.dx-state-focused {
  background-color: @success-color;
  color: @success-fore-color  !important;
  border-color: @success-color  !important;
}

.success-back-color:hover {
  background-color: @success-hover-color;
  color: @success-fore-color  !important;
  border-color: @success-hover-color  !important
}

.light-green-back-color {
  background-color: @success-extra-light-color  !important;
}

.flat-back-color,
.flat-back-color.dx-state-focused {
  background-color: @flat-color;
  color: @body-fore-color-opacity9  !important;
  border-color: @control-default-border-color  !important;
}

.flat-back-color:hover {
  background-color: @flat-hover-back-color;
  color: @body-fore-color-opacity9  !important;
  border-color: @flat-hover-color  !important
}

.flat-back-color-with-primary-color-and-border,
.flat-back-color-with-primary-color-and-border.dx-state-focused {
  background-color: #ffffff;
  color: @primary-color  !important;
  border: 2px solid @primary-color  !important;
}

.flat-back-color-with-primary-color-and-border:hover {
  background-color: #ffffff;
  color: @primary-color  !important;
  border: 2px solid @primary-color  !important;
}

.danger-back-color,
.danger-back-color.dx-state-focused {
  background-color: @danger-color;
  color: @danger-fore-color  !important;
  border-color: @danger-border-color  !important;
}

.danger-back-color:hover {
  background-color: @danger-hover-color;
  color: @danger-fore-color  !important;
  border-color: @danger-hover-color  !important
}

.warning-back-color,
.warning-back-color.dx-state-focused {
  background-color: @warning-color;
  color: @warning-fore-color  !important;
  border-color: @warning-border-color  !important;
}

.warning-back-color:hover {
  background-color: @warning-hover-color;
  color: @warning-fore-color  !important;
  border-color: @warning-hover-color  !important
}

.red-fore-white-back-color,
.red-fore-white-back-color.dx-state-focused {
  background-color: @content-back-color;
  color: @red-color  !important;
  border-color: @control-border-color  !important
}

.red-fore-white-back-color:hover {
  background-color: @red-color;
  color: @content-back-color  !important;
  border-color: @red-color  !important
}

.red-background-color,
.red-background-color.dx-state-focused,
.red-background-color:hover {
  background-color: @red-tag-back-color;
  color: @red-color  !important;
  border-color: @red-tag-back-color  !important
}

.primary-text-light-background-color-button,
.primary-text-light-background-color-button.dx-state-focused,
.primary-text-light-background-color-button:hover {
  background-color: @primary-selected-color;
  color: @primary-color  !important;
  border-color: @primary-selected-color  !important
}

.primary-flat-back-color,
.primary-flat-back-color.dx-state-focused {
  background-color: @flat-color;
  color: @primary-color  !important;
  border-color: @primary-border-color  !important
}

.primary-flat-back-color.dx-state-disabled {
  border-color: @control-border-color  !important
}

.primary-flat-back-color:hover {
  background-color: @flat-hover-color;
  color: @flat-color  !important;
  border-color: @flat-hover-color  !important
}

.known-as-check {
  width: 196px;
}

.form-footer-link {
  float: left;
  line-height: 30px;
  color: @primary-color;
  text-decoration: underline;
  cursor: pointer;
}

.sub-text {
  font-size: 10px;
  color: @body-fore-color-opacity6;
  line-height: 14px;
  margin-bottom: 0;
  display: block
}

.split-attendance .dx-template-wrapper {
  padding-left: 9px;
  padding-right: 9px;
}

.split-attendance .split-add {
  padding-right: 4px;
}

.sub-title {
  color: @body-fore-color;
  font-family: @medium-font-family;
}

.second-line-text {
  color: @body-fore-color-opacity8;
  font-family: @medium-font-family;
}

.sidebar-box-sec .multiple-item-hr {
  display: block !important;
}

// fixed content css
// .content-table-data {padding:182px 20px 0 20px;}
// .top-filter {top: 149px;}
// .top-filter-only {top:60px !important;}
// .single-tab-item .top-filter {top: 110px;}
// .single-tab-item .content-table-data {padding-top: 141px;}
// .only-block-content-no-grid {padding-top: 70px;}
// .tab-control-container-in-single-tab-item {position: relative; top: 70px;}
// .single-tab-item-in-tab-control .content-table-data {padding-top: 143px;}
// .content-table-data-only {padding-top: 100px;}
// .content-start.content-only {top: 100px; top: 150px; position: fixed; padding: 20px; overflow: auto; height: calc(100vh - 150px)}
// .grid-with-applied-filters {padding-top: 211px;}

.tab-control-container-in-single-tab-item {
  padding-top: 70px;
}

.medical-condition-wrapper .ant-tag {
  margin-bottom: 5px;
}

.sticky-grid-header {
  position: fixed;
  max-width: 100%;
  background-color: @content-back-color;
  z-index: 1;
  padding-top: 0;
  width: calc(100% - 60px);
}

.grid-without-tab-header-top {
  top: 40px;
}

.grid-with-tab-header-top {
  top: 80px !important;
}

//disabled-checkbox START
.disabled-checkbox.dx-state-disabled.dx-checkbox .dx-checkbox-icon {
  background-color: grey;
  border-color: grey !important;
}

.disabled-checkbox {
  float: left;
  padding-top: 0px;
}

.direct-debit-checkbox-label {
  line-height: 1.5 !important;
}

.review-text-width {
  width: calc(100% - 20px);
  display: inline-block;
}

.range-input-wrapper .first-input {
  border-right: 1px solid @control-border-color  !important;
  border-left: 1px solid @control-border-color  !important;
}

//disabled-checkbox END

// .menu-wrapper {height: calc(100vh - 200px);}

// .single-tab-item.grid-half-width .content-table-data { position: relative; padding-bottom: 18px; }
// .single-tab-item.grid-half-width .content-table-data:before {
//     content: '';
//     background: @content-back-color;
//     position: fixed;
//     width: calc(100% - 90px);
//     height: calc(100% - 150px);
//     left: 69px;
//     top: 131px; }

// font-awesome icon color
.fa.fa-check {
  color: @success-color;
  font-size: 18px;
}

.fa.fa-ban {
  color: @asterisk-validation-primary-color;
  font-size: 18px;
}

.v-seperator {
  padding-right: 20px;
  border-right: 1px solid;
}


.emergencyandpickupicon span.left {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  position: relative;
  width: 20px;
}

.emergencyandpickupicon span.left svg {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.emergencyandpickupicon span.left+span.left {
  margin-left: 10px;
}

.attachmentList .documentDate span.left~span.left {
  font-family: @medium-font-family;
  font-size: 10px;
  letter-spacing: 0.14px;
  line-height: 11px;
}

.attachmentList .documentDate span.left.red {
  opacity: 1 !important;
}

.dx-item-selected .payment-account-list-header-wrapper .action-column svg,
.dx-accordion-item-opened .payment-account-list-header-wrapper .action-column svg {
  transform: rotate(0deg) !important;
  -moz-transform: rotate(0deg) !important;
  -ms-transform: rotate(0deg) !important;
  -o-transform: rotate(0deg) !important;
  -webkit-transform: rotate(0deg) !important;
}

.multiline-cell {
  padding-bottom: 5px !important;
  padding-top: 5px !important;
}

.payment_summery_wrapper .white_box_shadow {
  background: @content-back-color;
}

.payment_summery_leftcard .payment_summery_box:before {
  background: @grid-border-color;
}

.payment_summery_wrapper .payment_summery_box .payment_summery_circle .payment_summery_circle_text {
  color: @content-back-color;
  font-family: @Regular-font-family;
}

.payment_summery_wrapper .payment_summery_box .payment_summery_circle .payment_summery_svg .payment_summery_svg_text {
  color: @content-back-color;
  font-family: @Regular-font-family;
}

.payment_summery_wrapper .payment_summery_box .payment_summery_content .payment_summery_title {
  color: @body-fore-color-opacity9;
}

.payment_summery_wrapper .payment_summery_box .payment_summery_content .payment_summery_subtitle {
  color: @body-fore-color-opacity3;
  font-family: @semi-bold-font-family;
}

.payment_summery_leftcard .payment_summery_box:after {
  background: @grid-border-color;
  color: rgba(0, 0, 0, 0.5);
  font-family: @semi-bold-font-family;
}

.payment_summery_leftcard .payment_summery_box:first-child:after {
  color: rgba(0, 0, 0, 0.5);
  font-family: @semi-bold-font-family;
}

.payment-billing-transaction-category-container {
  overflow: hidden;
}

.message-at-absolute-position .dx-invalid-message {
  position: absolute
}

.left-side-error .dx-invalid-message.dx-overlay {
  right: 160px; // this is the minimum width of error message 150 + 10
  top: -34px;
}

.left-side-error.error-width-170px .dx-invalid-message.dx-overlay {
  right: 180px; // this is the minimum width of error message 170 + 10
  min-width: 170px;
}

.left-side-error .dx-invalid-message .dx-overlay-wrapper:before {
  content: "\f0d9" !important;
  transform: rotate(-180deg);
  right: -4px;
  top: 12px;
}

.left-side-error .dx-invalid-message-content {
  max-width: 100% !important;
  width: 100% !important;
  text-align: right;
}

.dx-row .left-side-error.kiosk-code-text .dx-invalid-message.dx-overlay {
  right: 97px;
  top: 3px;
  min-width: 195px;
}

.api-error-container ul {
  width: 100%;
  float: left;
  padding-top: 10px;
  padding-left: 15px;
}

.api-error-container ul li,
.api-error-container ol li {
  list-style: inherit !important;
}

.api-error-container .text-wrapper {
  width: 100%;
  padding-top: 10px;
  float: left;
}

.overflow-visible {
  overflow: visible !important;
}

.date-grid span.dx-clear-button-area {
  margin: 0 !important;
  min-width: 18px !important;
}

.date-grid .dx-button-normal.dx-button-mode-contained.dx-widget.dx-dropdowneditor-button.margin-right-0 {
  margin: 0 !important;
  min-width: 25px;
}

.date-grid .dx-icon-clear:before {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

// .date-grid span.dx-icon.dx-icon-clear {
//     position: relative;
//     display: block;
// }

.date-grid .dx-button-normal.dx-button-mode-contained.dx-widget.dx-dropdowneditor-button {
  margin: 0 !important;
  min-width: 25px !important;
}

.dx-datebox.dx-auto-width.dx-dropdowneditor-button-visible.date-grid .dx-texteditor-input {
  padding-right: 7px !important;
}

.payment_summery_leftcard.statement_payment_summery {
  width: 100% !important;
}

.payment_summery_leftcard.statement_payment_summery .white_box_shadow .field-box {
  padding: 0 !important;
}

.uploaded-files-wrapper .action-icon svg path {
  fill: @red-color  !important;
}


table.custom_table_wrapper {
  width: 100%;
  background: @flat-color;
}

table.custom_table_wrapper th {
  padding: 0 0 0 20px;
  height: 30px;
  border-bottom: 1px solid @primary-hover-bubble-control-color;
  font-size: 10px;
  font-family: @semi-bold-font-family;
  vertical-align: middle;
  color: @body-fore-color-opacity9;
}

table.custom_table_wrapper tfoot th {
  height: 50px;
}

table.custom_table_wrapper td {
  padding: 0 0 0 20px;
  height: 50px;
  border-bottom: 1px solid @control-border-color;
  font-size: 12px;
  vertical-align: middle;
  color: @body-fore-color-opacity9;
}

table.custom_table_wrapper tbody {
  box-shadow: 0 2px 10px 0 @box-shadow;
  border-radius: 0 0 5px 5px;
}

table.custom_table_wrapper tfoot th {
  font-size: 12px;
  font-family: @semi-bold-font-family;
}

table.custom_table_wrapper td {
  font-family: @body-font-family;
  font-size: 12px;
}

table.custom_table_wrapper .custom_table_date>span {
  font-family: @semi-bold-font-family;
}

table.custom_table_wrapper .custom_table_date>p {
  font-size: 10px;
}

table.custom_table_wrapper a.ant-dropdown-trigger.ant-dropdown-link i.action-icon {
  pointer-events: none;
}

.statement-list table {
  width: 100%;
  background: @flat-color;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 0 0 5px 5px;
}

.statement-list table th {
  padding: 0 0 0 20px;
  height: 30px;
  border-bottom: 1px solid @control-border-color;
  font-size: 10px;
  font-family: @semi-bold-font-family;
  vertical-align: middle;
  color: @body-fore-color-opacity9;
}

.statement-list table tfoot th {
  height: 50px;
}

.statement-list table td {
  padding: 0 0 0 20px;
  height: 50px;
  border-bottom: 1px solid @control-border-color;
  font-size: 12px;
  vertical-align: middle;
  color: @body-fore-color-opacity9;
}

.statement-list table tr.data-row td {
  white-space: pre-line;
  padding-top: 5px;
  padding-bottom: 5px;
}

.statement-list table tbody {
  box-shadow: none;
  border-radius: 0;
}

.statement-list table tfoot th {
  font-size: 12px;
  font-family: @semi-bold-font-family;
}

.statement-list table td {
  font-family: @body-font-family;
  font-size: 12px;
}

.statement-list table .custom_table_date>span {
  font-family: @semi-bold-font-family;
}

.statement-list table .custom_table_date>p {
  font-size: 10px;
}

.statement-list table a.ant-dropdown-trigger.ant-dropdown-link i.action-icon {
  pointer-events: none;
}

.statement-list table tr.fulltr>td {
  background: @grid-group-row-back-color;
  height: 30px;
}

.statement-list .ant-card-body {
  padding-top: 0;
}

.bond-list table {
  overflow: auto;
  display: block;
}

.custom_top_action_wrapper {
  background: @flat-color;
  width: 100%;
  float: left;
  padding: 20px 10px 0 10px;
}

.custom_top_action_wrapper .left {
  float: left;
}

.custom_top_action_wrapper .right {
  float: right;
  padding: 12px 0 0 0;
}

.custom_top_action_wrapper .left>span {
  font-size: 16px;
  line-height: normal;
}

.custom_top_action_wrapper .left>p {
  font-size: 10px;
  line-height: normal;
}

.custom_top_action_wrapper .bulk-action {
  position: relative;
  text-align: left;
  display: inline-block;
}

.custom_top_action_wrapper .bulk-action .bulk-dropdown {
  height: 30px;
  width: 30px;
  border-radius: 4px;
  background-color: @primary-color;
  font-family: @semi-bold-font-family;
  text-align: center;
  padding: 0;
  color: @flat-color;
  font-size: 12px;
  letter-spacing: 0.05px;
  line-height: 12px;
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.custom_top_action_wrapper .bulk-action .bulk-dropdown:before,
.custom_top_action_wrapper .button-wrapper .bulk-dropdown:before {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: 0 5px 10px @primary-color;
  border-radius: 4px;
  opacity: 0.5;
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

.custom_top_action_wrapper .bulk-action .bulk-dropdown:hover:before {
  box-shadow: none;
}

.custom_top_action_wrapper .plus-button-sec {
  display: inline-block;
  margin-left: 10px;
}

.custom_top_action_wrapper .bulk-action .bulk-dropdown a.ant-dropdown-trigger {
  padding: 8px 10px;
  height: 30px;
  display: block;
}

.custom_top_action_wrapper .bulk-action .bulk-dropdown img {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  margin: 0 auto;
  pointer-events: none;
}

.card_header_box_wrapper {
  float: left;
  width: 100%;
  background-color: @content-back-color;
  padding: 20px 10px;
  margin-bottom: 10px;
  border-radius: 6px;
}

.card_wrapper .row {
  margin: 0 -5px;
  width: 100%;
}

.card_wrapper .card_col {
  width: 33.3333%;
  float: left;
  padding: 0 5px;
}

.card_wrapper .card_col .card {
  border-radius: 12px;
  background: @flat-color;
  box-shadow: 0 0 15px @box-shadow;
  padding: 5px;
  text-align: center;
  margin: 0 0 10px 0;
  border: 0;
}

.card_wrapper .card_col .card .card_top_wrapper {
  background: @right-panel-back-color;
  border-radius: 12px;
  padding: 15px 20px 20px 20px
}

// .card_wrapper .card_col .card .card_top_wrapper .card_top_img .table_tr_img {
//     width: 80px;
//     height: 80px;
//     margin: 0;
//     line-height: 80px;
// }

// .card_wrapper .card_col .card .card_top_wrapper .card_top_img .table_tr_img span.noimgname.cal_icon_main {
//     line-height: 80px;
//     font-family: @bold-font-family;
//     font-size: 2px;
// }
.card_wrapper .card_col .card .card_top_wrapper .card_top_img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  border: 5px solid @flat-color;
  box-shadow: 0 0 15px @box-shadow;
}

.card_wrapper .card_col .card .card_top_wrapper .card_top_img img {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.card_wrapper .card_col .card .card_top_wrapper .card_top_title {
  font-size: 16px;
  letter-spacing: 0.05px;
  line-height: 16px;
  padding-bottom: 12px;
  padding-top: 20px;
  color: @body-fore-color-opacity9;
  font-family: @semi-bold-font-family;
}

.card_wrapper .card_col .card .card_top_wrapper p {
  font-size: 14px;
  letter-spacing: 0.14px;
  line-height: 14px;
  color: @body-fore-color-opacity6;
  font-family: @body-font-family;
}

.card_wrapper .card_col .card .card_top_wrapper .card_top_btn {
  margin-top: 20px;
}

.card_wrapper .card_col .card .card_top_wrapper .card_top_btn .cardbtn {
  border-radius: 4px !important;
  background: @flat-color;
  border: 0;
  font-family: @semi-bold-font-family;
  letter-spacing: 0.05px !important;
  line-height: 13px !important;
  font-size: 13px;
  box-shadow: 0 0 15px @box-shadow;
  padding: 0 15px;
  height: 30px;
  cursor: pointer;
  color: @primary-color;
}

.card_wrapper .card_col .card .card_bottom_wrapper {
  padding: 25px 0 16px 0;
}

.card_wrapper .card_col .card .card_bottom_wrapper .card_bottom_col {
  width: 33.3333%;
  float: left;
}

.card_wrapper .card_col .card .card_bottom_wrapper .card_bottom_col .card_bottom_number {
  font-size: 16px;
  letter-spacing: 0.05px;
  line-height: 16px;
  color: @body-fore-color-opacity9;
  font-family: @bold-font-family;
  display: block;
  margin-bottom: 8px;
}

.card_wrapper .card_col .card .card_bottom_wrapper .card_bottom_col p {
  font-size: 12px;
  letter-spacing: 0.14px;
  line-height: 14px;
  color: @body-fore-color-opacity6;
  font-family: @medium-font-family;
}


.like_sidebar_wrapper .tab-wrapper.left {
  width: 100%;
  background: @content-back-color;
}

.like_sidebar_wrapper .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  margin: 0 !important;
  box-shadow: none !important;
}

.like_sidebar_wrapper .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active {
  height: 28px !important;
  padding: 6px 10px !important;
}

.like_sidebar_wrapper .ant-tabs-nav .ant-tabs-tab {
  padding: 8px 10px !important;
  height: 28px !important;
}

.like_sidebar_wrapper .ant-tabs.ant-tabs-card .ant-tabs-card-content>.ant-tabs-tabpane {
  border: 0 !important;
}

.like_sidebar_wrapper .tab-control .ant-tabs-bar {
  margin: 0 0 0 10px;
}

.like_sidebar_wrapper .child-list-section {
  padding: 10px 20px;
  border-radius: 0;
  border-bottom: 1px solid #dce3e8;
}

.like_sidebar_wrapper .tab-control .ant-tabs-tabpane:after {
  content: "";
  display: table;
  clear: both;
}

.like_sidebar_wrapper .tab-control .ant-tabs-tabpane {
  border-top: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
}

.like_sidebar_wrapper .ant-tabs-content.ant-tabs-top-content {
  padding-top: 20px;
  background: @right-panel-back-color;
}

.like_sidebar_wrapper .name-text-wrapper.two-line-wrapper {
  padding-top: 3px;
}

.like_sidebar_wrapper .child-list-section:last-child {
  border: 0;
}

.uploaded-files-wrapper .left.width100.clearBoth .left.text-ellipsis.file-name span.cursor-pointer {
  min-height: 16px;
  line-height: 16px;
  overflow: hidden;
  word-break: break-word;
  color: @body-fore-color-opacity9;
  font-size: 12px !important;
  font-family: @medium-font-family  !important;
}

.uploaded-files-wrapper .left.width100.clearBoth .left.text-ellipsis.file-name span.cursor-pointer.font-size10 {
  font-size: 10px !important;
}


.uploaded-files-wrapper .control-value {
  color: @body-fore-color-opacity9;
}

.uploaded-files-wrapper .left.width100.clearBoth {
  position: relative;
}

.uploaded-files-wrapper .left.width100.clearBoth .left.text-ellipsis.file-name {
  padding-left: 30px !important;
}

.uploaded-files-wrapper .left.width100.clearBoth .left.text-ellipsis.file-name.padding_left5 {
  padding-left: 5px !important;
}

// sandip: do not remove without discussion, required for DD Profile agreement file css

.widget-page {
  height: 100%;
  display: contents;
}

.widget-page .widget-page-container {
  margin: 0 auto;
  float: none;
  display: block;
  -webkit-box-shadow: @setting-panel-box-shadow;
  -moz-box-shadow: @setting-panel-box-shadow;
  box-shadow: @setting-panel-box-shadow
}

.widget-page .widget-page-container:after {
  content: "";
  display: table;
  clear: both;
}

.widget-page .widget-page-container hr.multiple-item-hr {
  width: 100%;
  left: 0;
  margin-left: 0 !important;
}

.widget-page.sidebar-form .form-field,
.xap-modal .form-field {
  max-width: 100% !important;
}

// .widget-page .multiple-item-hr {width: calc(100% - -70px);}

.checkbox-list {
  overflow: visible !important;
}

.checkbox-list .dx-scrollable-container {
  -ms-touch-action: inherit !important;
  touch-action: inherit !important;
  overflow-x: inherit !important;
  overflow-y: inherit !important;
}

.offer-places-preference {
  background: @right-pane-title-back-color;
  margin: 0px -21px 20px -20px;
  width: auto;
  font-size: @body-header-font-size;
  padding: 15px 20px 4px 20px;
}

.sidebar-box-sec.viewPanel.dynamic-createPanel>.sub-container {
  padding-left: 20px;
}

.offer-places .sub-container {
  height: auto;
  border: 0 !important;
}

.offer-places .sub-container .width30px.margin_left10 {
  margin-left: 0 !important;
  width: 50px !important;
  height: auto !important;
}

.offer-places .sub-container .table_tr_img {
  width: 50px;
  height: 50px;
}

.offer-places .sub-container .table_tr_img span.noimgname {
  background: @right-pane-title-back-color;
  line-height: 50px;
  font-family: 'Montserrat-Bold', sans-serif;
  font-size: 21px;
}

.offer-places .sub-container .standard-field-box-width .padding_left5 {
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.offer-places .sub-container .standard-field-box-width .field-box .form-field {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.offer-places .sub-container:before {
  right: 30px !important;
  margin-top: 55px !important;
  top: 0;
  transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  -webkit-transform: translateY(0);
  font-size: 18px;
}

.offer-places.accordion-panel .dx-accordion-item:first-child .sub-container:before {
  margin-top: 37px !important;
}

.offer-places-programs {
  padding: 15px 15px 15px 15px;
  margin: 0 -20px 0 -10px;
}

.offer-places-programs+.createPanel {
  margin: 0 -10px;
  width: auto;
}

.offer-places-programs .width30px.margin_left10 {
  margin-left: 0 !important;
  width: 50px !important;
  height: auto !important;
}

.offer-places-programs .table_tr_img {
  width: 50px;
  height: 50px;
}

.offer-places-programs .table_tr_img span.noimgname {
  background: @right-pane-title-back-color;
  line-height: 50px;
  font-family: 'Montserrat-Bold', sans-serif;
  font-size: 21px;
}

.offer-places-programs .standard-field-box-width .padding_left5 {
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.offer-places-programs .standard-field-box-width .field-box .form-field {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.offer-places-programs+.createPanel .dx-radiobutton {
  vertical-align: middle;
  line-height: normal;
  padding: 10px 0 !important;
}

.centre .offer-places-programs {
  margin: 0 0px !important;
  padding-left: 20px;
  padding-right: 20px;
}

.centre .offer-places-programs .control-value span.sm-icon {
  padding-right: 5px !important;
  width: 15px;
  display: inline-block;
  margin: 0px auto;
  text-align: center;
}

.offer-places-programs-title .left {
  background: @right-pane-title-back-color;
}

.offer-places-programs-title .left .sub-container {
  background: @right-pane-title-back-color;
}

.centre .offer-places-programs .control-value span.centre-info-txt {
  display: inline-block;
  color: @body-fore-color-opacity6  !important;
  font-size: 11px;
  line-height: 8px;
  letter-spacing: 0.28px;
  width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offer-place-accordian {
  margin: 0 -20px 20px -20px !important;
  background: @right-panel-back-color;
  padding: 20px 20px 3px 20px;
}

.offer-places.accordion-panel .dx-accordion-item {
  padding-top: 0 !important;
  margin: 0;
}

.bg-gray {
  background: @right-panel-back-color  !important;
}

.offer-places-programs-title .sub-container {
  margin-bottom: 0 !important;
  padding-top: 0px;
}

.offer-places-programs-title .bold-font.margin_left20 {
  clear: both;
  background: @content-back-color;
  padding-bottom: 5px !important;
  padding-left: 20px !important;
  margin: 0 !important;
}

.offer-places.accordion-panel .dx-accordion-item .sub-container {
  padding-bottom: 15px !important;
  padding-left: 20px;
  padding-top: 0 !important;
}

// .offer-places.accordion-panel .dx-accordion-item .sub-container .field-box.readOnlyPanel:first-child {padding-top: 20px !important;}
.offer-places.accordion-panel .dx-accordion-item .sub-container .message-container {
  width: calc(100% + 40px);
  margin-left: -20px;
}

.centre .offer-places-programs .control-value span.centre-info-txt.address {
  white-space: pre-line;
  width: calc(100% - 16px);
  line-height: 12px;
}

.centre .offer-places-programs .control-value span.sm-icon {
  vertical-align: top;
}

.accept-offer-radiobutton {
  margin: 0 -15px;
}

.accept-offer-radiobutton span.control-label {
  white-space: pre-line;
}

.accept-offer-radiobutton:after {
  content: "";
  display: table;
  clear: both;
}

.requsted-and-offered-programs .sub-title {
  background: @right-panel-back-color;
  padding: 15px 0 !important;
  margin: 0 0 !important;
}

.requsted-and-offered-programs .sub-title h3 {
  padding: 10px 25px 10px 20px;
  background: @page-number-back-color;
}

.offer-places.accordion-panel .dx-accordion-item .offered-program .sub-container {
  padding-left: 20px;
}


.links-column .link-skip {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 13px;
  z-index: 55;
}

.links-column .column3 {
  position: relative;
}

.text-editor {
  white-space: pre-line;
}


.waitlist_small_title {
  width: 100%;
  float: left;
  padding-bottom: 5px;
  color: @body-fore-color-opacity6;
  font-family: @medium-font-family;
  font-size: 10px;
  letter-spacing: 0.15px;
  line-height: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  white-space: pre;
}

.waitlist_medium_title {
  padding: 10px;
  border: 1px solid @control-border-color;
  border-radius: 6px;
  color: @body-fore-color-opacity9;
  font-family: @medium-font-family;
  font-size: 12px;
  letter-spacing: 0.05px;
  line-height: 16px;
  word-break: break-word;
}

.waitlist_reg_title {
  font-family: @semi-bold-font-family;
  color: @body-fore-color-opacity9;
  font-size: 12px;
  letter-spacing: 0.24px;
  line-height: 18px;
}

.waitlistmain_wrapper .waitlistmain_col .card {
  text-align: left;
}

.waitlistmain_request_offer_section .width50 {
  width: 50%;
  float: left;
  padding: 0 10px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title span.waitlist_circle_bottom_title:after {
  content: "";
  display: table;
  clear: both;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title span.waitlist_circle_bottom_title {
  display: block;
  width: 100%;
}

.waitlistmain_wrapper .waitlistmain_col .card {
  padding: 0;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper {
  padding: 0;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_section {
  padding: 20px 20px 15px 20px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_section:after {
  content: "";
  display: table;
  clear: both;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle {
  width: 40px;
  height: 40px;
  float: left;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title {
  float: left;
  width: calc(100% - 60px);
  padding: 0 0 0 15px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_edit_main {
  width: 20px;
  float: left;
  padding-top: 9px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title span.waitlist_circle_top_title {
  display: block;
}

// .waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title span.waitlist_circle_bottom_title {}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title .waitlist_circle_bottom_title .waitlist_circle_bottom_title_left,
.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title .waitlist_circle_bottom_title .waitlist_circle_bottom_title_right {
  display: inline-block !important;
  vertical-align: middle;
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
  line-height: normal;
  float: none;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_location_section {
  padding: 20px;
  padding-top: 0px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_request_offer_section {
  padding: 0px 10px 20px 10px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_request_offer_section+.waitlistmain_request_offer_section .waitlist_small_title {
  display: none;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_location_section:after,
.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_request_offer_section:after {
  content: "";
  display: table;
  clear: both;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_request_offer_section .waitlistmain_request_box_main,
.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_request_offer_section .waitlistmain_offer_box_main {
  clear: both;
  padding: 13px 16px 13px 16px;
  border: 1px solid @control-border-color;
  border-radius: 0 6px 6px 0;
  position: relative;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_request_offer_section .waitlistmain_request_box_main .waitlist_medium_title,
.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_request_offer_section .waitlistmain_offer_box_main .waitlist_medium_title {
  padding: 3px 0 3px 0;
  border: 0;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_request_offer_section .waitlistmain_request_box_main {
  background: #f9f7fe;

}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_request_offer_section .waitlistmain_request_box_main:before {
  content: "";
  background: #8b63e7;
  width: 6px;
  height: auto;
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_request_offer_section .waitlistmain_offer_box_main {
  background: #f5fafe;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_request_offer_section .waitlistmain_offer_box_main:before {
  content: "";
  background: #399bf3;
  width: 6px;
  height: auto;
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_location_section .waitlist_small_title svg,
.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_location_section .waitlist_small_title span {
  display: inline-block;
  vertical-align: middle;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_location_repet_section:last-child {
  padding-bottom: 0px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_request_offer_section .waitlistmain_request_section:before {
  content: "";
  background: url(../assets/images/Dropdown-icon.svg);
  position: absolute;
  right: -5px;
  top: 50%;
  transform: rotate(-90deg);
  width: 10px;
  height: 7px;
  margin-top: 6px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_request_offer_section .waitlistmain_request_section {
  position: relative;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_location_section .waitlist_small_title span {
  margin-right: 10px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_location_section .waitlist_reg_title {
  clear: both;
  padding: 4px 0 4px 0;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title .waitlist_circle_bottom_title .waitlist_circle_bottom_title_right span {
  display: inline-block;
  padding: 1px 0px;
  vertical-align: middle;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title .waitlist_circle_bottom_title .waitlist_circle_bottom_title_right:before {
  content: "";
  background: #ccc;
  position: absolute;
  left: 8px;
  top: -2px;
  width: 1px;
  height: 20px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title .waitlist_circle_bottom_title .waitlist_circle_bottom_title_right {
  padding-left: 20px;
  position: relative;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title .waitlist_circle_bottom_title .waitlist_circle_bottom_title_right span+span {
  padding-left: 18px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title .waitlist_circle_bottom_title .waitlist_circle_bottom_title_left span.tag-text {
  line-height: 12px;
  text-align: center;
  display: inline-block;
  top: 0;
  font-size: 8px;
  cursor: default;
  // background-color: #78d3f2 !important;
  // border-color: #78d3f2 !important;
  color: @content-back-color  !important;
  height: 12px !important;
  width: 12px !important;
  margin: 0 3px 0 0 !important;
  padding: 0 !important;
  vertical-align: top;
  position: relative;
  border-radius: 2px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title .waitlist_circle_bottom_title .waitlist_circle_bottom_title_left .color-female-gender-single-waitlist {
  background-color: @pink-color  !important;
  border-color: @pink-color  !important;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title .waitlist_circle_bottom_title .waitlist_circle_bottom_title_left .color-other-gender-single-waitlist {
  background-color: @success-color  !important;
  border-color: @success-color  !important;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_title .waitlist_circle_bottom_title .waitlist_circle_bottom_title_left .color-male-gender-single-waitlist {
  background-color: @blue-color  !important;
  border-color: @blue-color  !important;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_last_btn_section {
  padding: 20px;
  padding-top: 0px;
  position: relative;
  margin-bottom: 0px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_last_btn_section.no-action-box {
  padding-top: 0px;
  padding-bottom: 10px;
  border: 0;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_last_btn_section.no-action-box .waitlist_medium_title {
  display: none;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_last_btn_section:before {
  // content: "";
  clear: both;
  position: absolute;
  left: 20px;
  right: 20px;
  top: 5px;
  bottom: 15px;
  border: 1px solid @control-border-color;
  border-radius: 5px;
}

.waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_last_btn_section .waitlistmain_last_btn {
  padding-top: 10px;
}



.create-account {
  box-shadow: none !important;
  max-width: fit-content !important;
}

.create-account .header.header-inner {
  padding: 5px 0 5px 7px;
  line-height: 30px;
  z-index: 99;
}

.welcomescreen-content {
  box-shadow: none !important;
  max-width: 100%;
}

.welcomescreen-content header.header {
  width: 100%;
  display: inline-block;
  border-bottom: solid 1px #bbbbbb;
  padding: 8px 0 7px;
  position: relative;
  background: #fff;
  /* z-index: 999; */
  z-index: 1515;
}

.welcomescreen-content header.header .need-help {
  line-height: normal;
  padding: 20px 0 0;
  /* padding: 18px 18px 17px 0; */
}

.welcomescreen-content header.header .need-help a {
  color: #399bf3;
  font-weight: 600;
}

.welcomescreen-content header .button {
  height: 35px;
  margin-left: 5px;
}

.welcomescreen-content button.button {
  font-size: 14px;
  padding: 9px 7px;
  background: #399BF3;
  font-weight: 500;
  color: #fff;
  border-radius: 4px;
  height: 40px;
  line-height: 1;
  border: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.welcomescreen-content .icons-bg {
  width: 100%;
  display: block;
}

.welcomescreen-content .icons-bg .bg {
  text-align: center;
  padding-bottom: 54px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.welcomescreen-content .icons-bg .bg img {
  display: inline-block;
}

.footer-always-bottom.content-footer {
  padding-top: 0px;
}

.welcomescreen-content footer.footer-always-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.welcomescreen-content footer.footer-always-bottom {
  background: #212529;
  color: #fff;
  font-size: 15px;
  padding: 18px 0;
  line-height: normal;
}

.welcomescreen-content footer.footer-always-bottom .textcenter {
  text-align: center !important;
}

.welcomescreen-content .main_content {
  height: 100vh;
  position: relative;
  display: table;
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

.welcomescreen-content .main_content .email-way {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  text-align: center;
}

.footer-always-bottom.content-footer {
  padding-top: 0px;
  background: #212529;
  color: #fff;
}

.footer-always-bottom.content-footer .textcenter {
  padding: 10px;
}

.border-color-primary {
  border-color: @primary-border-color  !important;
}

.check-box-block.dx-checkbox-checked {
  border-color: @primary-border-color  !important;
}

.check-box-block.dx-checkbox-checked.dx-state-disabled {
  border-color: @body-fore-color-opacity6  !important;
}

@media only screen and (min-width: 1023px) {
  .welcomescreen-content header.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
}



.payment_summery_wrapper .payment_summery_leftcard .field-box.left.width25 {
  flex-grow: 1;
  flex-shrink: 0;
}

.payment_summery_circle.datesvg-box {
  background: transparent !important;
  border-radius: 0;
  width: 26px !important;
}

.payment_summery_circle.datesvg-box span.payment_summery_svg svg {
  width: 26px;
  height: 26px;
  margin-top: 0 !important;
}

.payment_summery_circle.datesvg-box span.payment_summery_svg .payment_summery_svg_text {
  font-size: 8px !important;
  padding: 0 0 0 0 !important;
  position: relative !important;
  top: 3px !important;
}

// .payment_summery_circle.datesvg-box.green span.payment_summery_svg svg path {fill: green !important;}
// .payment_summery_circle.datesvg-box.green span.payment_summery_svg .payment_summery_svg_text {color: green !important;}

.payment_summery_wrapper .payment_summery_leftcard .payment_summery_box .payment_summery_content .payment_summery_subtitle {
  width: 100%;
  word-break: break-word;
}

.payment_summery_wrapper .payment_summery_rightcard .payment_summery_box .payment_summery_content .payment_summery_subtitle {
  width: 100px;
}

// child photos and videos summary
.thumnil_img_wraaper {
  background: @right-panel-back-color;
}

.thumnil_img_wraaper .thumnil_img_title_main {
  background-color: @content-back-color;
  border-bottom: 1px solid @grid-border-color;
  border-top: 1px solid @grid-border-color;
}

// end child photos and videos summary

.emailcontent h1,
.emailcontent h2,
.emailcontent h3,
.emailcontent h4,
.emailcontent h5,
.emailcontent h6,
.emailcontent p {
  font-weight: normal;
  color: @body-fore-color;
  margin: 0;
  padding: 10px;
}

.statement-list .white-fill-color svg path {
  fill: @content-back-color  !important;
}



/** 001 SVG Icon Css *********/
.table_tr_img span.cal_icon {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  top: 0;
  bottom: 0;
}

.table_tr_img span.cal_icon svg {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0px auto 0;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 19px;
  height: 19px;
  fill: @content-back-color  !important;
}

.table_tr_img span.cal_icon svg path {
  fill: @content-back-color;
}

.noimgname.cal_icon_main.cal-icon {
  padding-top: 2px;
  font-size: 9px;
}

.table_tr_img.size70 .noimgname.cal_icon_main .cal_icon svg {
  height: 45px;
  width: 45px;
}

.table_tr_img.size70 .noimgname.cal_icon_main.cal-icon {
  padding-top: 5px;
  font-size: 22px;
}

.blue-x-tag.ant-tag {
  color: @content-back-color  !important;
  height: 10px !important;
  width: 10px !important;
  margin: 0 3px 0 0 !important;
  padding: 0 !important;
  vertical-align: top;
  position: relative;
  border-radius: 2px;
}

.blue-x-tag.ant-tag {
  background-color: #4ba4f4 !important;
  border-color: #4ba4f4 !important;
}

.blue-x-tag.ant-tag .tag-text {
  line-height: normal;
  text-align: center;
  margin: 0 auto;
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  height: 10px;
  font-size: 8px;
  cursor: default;
}

.term-based-billing-charge-table .dx-datebox-date {
  min-width: 158px;
}

.term-based-billing-charge-table .dx-datebox-date .dx-icon-clear:before {
  right: 0;
}

.search_svg,
.filter_svg,
.reset_svg,
.svg_peimary_color {
  fill: @primary-color
}

.assignedTags:after {
  content: "";
  display: table;
  clear: both;
}

.assignedTags {
  position: relative
}

.assignedTags i.anticon-close-circle-o {
  position: absolute;
  right: 10px;
  top: 1px;
}

.assignedTags input.dx-texteditor-input {
  padding-right: 30px;
}

.assignedTags .btn svg {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: 1px;
  margin-right: 5px;
}

.assignedTags .btn svg,
.assignedTags .btn svg path {
  fill: @primary-color  !important;
}

.assignedTags .dx-button-text+span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.manage-multiple-items {
  height: 30px;
  line-height: 30px;
  padding-left: 5px;
  float: right;
}

// sandip: this is always at float: right
.manage-multiple-items i {
  font-size: 17px;
  cursor: pointer;
  padding-top: 6px;
}

.manage-multiple-items .hide-item {
  cursor: none;
  width: 17px;
}

.manage-multiple-items:after {
  content: "";
  display: table;
  clear: both;
}

.manage-multiple-items input.dx-texteditor-input {
  padding-right: 30px;
}

.manage-multiple-items .btn svg {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: 1px;
  margin-right: 0;
}

.manage-multiple-items .btn svg,
.manage-multiple-items .btn svg path {
  fill: @primary-color  !important;
}

.manage-multiple-items .btn.red svg,
.manage-multiple-items .btn.red svg path {
  fill: @red-color  !important;
}

.manage-multiple-items .btn.red svg {
  width: 17px;
  height: 17px;
  position: relative;
  top: 3px;
  left: 3px;
}

.manage-multiple-items .btn {
  margin-left: 10px;
}

.manage-multiple-items .dx-button .dx-button-content {
  padding: 5px 6px 5px
}

.dx-icon-clear:before {
  content: "";
  display: block;
  position: relative;
  top: 2px;
  right: 3px;
  background-image: url(images/close_icon_with_circle.svg);
  background-repeat: no-repeat;
  background-size: 14px 14px;
  width: 14px;
  height: 14px;
}

.tag-count-wrapper .remaining-tag-count-wrapper {
  font-family: @medium-font-family;
  color: @body-fore-color-opacity6;
}

.dx-datagrid-rowsview .dx-row:hover .tag-count-wrapper {
  border-color: @row-hover-color;
}

.right-panel-wrapper .family-component span.control-label.option-label {
  display: inline-block;
  margin-bottom: 0px;
  line-height: 30px !important;
}

.block-wrapper .details.content-wrapper>.left {
  width: calc(100% - 25px);
}

.nubmer_star {
  padding-right: 4px;
}

.attachment-list-container .repeter-inner .repeter-bottom .name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
  width: calc(100% - 20px);
}

.attachment-list-container .repeter-inner .repeter-top {
  display: inline-block;
  vertical-align: middle;
  float: none !important;
}

.attachment-list-container .more-option {
  display: inline-block;
  vertical-align: middle;
  padding-left: 5px;
  width: 25px;
}

.ant-popover-placement-left .ant-popover-arrow:before {
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  right: -3px;
  left: auto;
}

.ant-popover-placement-left>.ant-popover-content>.ant-popover-arrow {
  border-color: #d62d20 #d62d20 transparent transparent;
}

.column-wrapper.med-tag-column-wrapper:after,
.column-wrapper:after {
  clear: both;
  content: "";
  display: table;
}

.column-wrapper.med-tag-column-wrapper {
  margin-bottom: 15px;
}

span.attach svg path,
span.lock svg path,
.attachmentList svg path {
  fill: @body-fore-color-opacity6
}

li.repeter {
  position: relative;
}

.repeter-inner.padding_right30>.more-option {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  bottom: auto !important;
}

.dx-datagrid .dx-row.dx-state-disabled td {
  opacity: 0.4 !important;
}

.sidebar-form .title-box span.title {
  display: block;
  width: calc(100% - 30px);
  line-height: 24px;
}

.sidebar-form .title-box {
  min-height: 42px;
}

// sandip: TODO : set width to 440px and then dynamic
.sidebar-form .title-box.default .anticon-cross:before {
  background: url(../assets/images/popup_close_icon_black.png);
}

.sidebar-form .title-box svg {
  width: 21px;
  height: 21px;
  display: block;
  position: relative;
  top: 4px;
}

.sidebar-form .title-box.success svg path {
  fill: @content-back-color;
  opacity: 1;
}

.sidebar-form .title-box.success svg g {
  opacity: 1;
}

.sidebar-form .title-box.default svg path {
  fill: #232426;
  opacity: 1;
}

.sidebar-form .title-box.default svg g {
  opacity: 1;
}

.sidebar-form .title-box.warning svg path {
  fill: @content-back-color;
  opacity: 1;
}

.sidebar-form .title-box.warning svg g {
  opacity: 1;
}

.anticon.default svg path {
  fill: @control-border-color;
  cursor: pointer;
}

.anticon.primary svg path {
  fill: @primary-color;
  cursor: pointer;
}

.anticon.red svg path {
  fill: @red-color;
  cursor: pointer;
}

.anticon-close:before {
  content: "";
  background: url(../assets/images/popup_close_icon.png);
  width: 15px;
  height: 15px;
  display: block;
  position: relative;
  top: 3px;
}

.anticon-cross:before {
  content: "";
  background: url(../assets/images/popup_close_icon_black.svg);
  width: 11px;
  height: 11px;
  display: block;
  position: relative;
  top: 2px;
}

/** box shadow css ***/
.top-filter.ng-star-inserted {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 0 3px 0 0;
}

// Remove shadow from grid header
.dx-datagrid-headers .dx-datagrid-content {
  // box-shadow: 0 16px 10px 0 rgba(0, 0, 0, 0.1);
  box-shadow: none;
}

.sticky-grid-header.dx-datagrid-headers .dx-datagrid-content {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.sticky-grid-header~.dx-datagrid-rowsview {
  padding-top: 30px;
}

/*.sticky-grid-header .dx-row > td{
    padding-top: 15px;
    padding-bottom: 15px;
}*/
.ant-tabs,
.ant-tabs-nav-container,
.dx-datagrid-rowsview,
.ant-tabs-nav-wrap,
.ant-tabs-nav-scroll {
  overflow: visible;
}

.ant-tabs-nav-scroll {
  background: transparent !important;
}

/** box shadow css ***/

.family-shell-main-container .dx-datagrid-rowsview .dx-row>.dx-master-detail-cell {
  background-color: @body-back-color  !important;
}

.dx-master-detail-row td.dx-master-detail-cell {
  background: @content-back-color  !important;
  padding: 15px !important;
}

.detail-back-color-dark .dx-master-detail-row td.dx-master-detail-cell {
  background: @right-panel-back-color  !important;
}

table.custom_table .multiple-row {
  height: 50px;
  position: relative;
  display: table-row;
}

table.custom_table .multiple-row span {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  position: relative;
}

table.custom_table .multiple-row-wrapper {
  position: relative;
}

table.custom_table .multiple-row-wrapper:before {
  content: "";
  border-top: 1px solid @dark-border-color;
  position: absolute;
  top: 50%;
  left: -20px;
  right: -20px;
  z-index: 88;
}

table.custom_table.headerPanel tr th span.ant-table-header-column {
  font-family: @semi-bold-font-family;
  color: @body-fore-color-opacity9;
}

table.custom_table.headerPanel tr td {
  color: @body-fore-color-opacity9;
}

table.custom_table .default-row-color td {
  background-color: @default-hover-color;
  opacity: unset;
}

table.custom_table .default-row-color .default-font {
  color: @body-fore-color-opacity6;
}

table.custom_table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid @dark-border-color;
}

//font-family: "Montserrat Medium";
table.custom_table th,
table.custom_table td {
  padding: 0 20px;
  height: 50px;
  vertical-align: middle;
  text-align: left;
  border-top: 1px solid @dark-border-color;
  color: @body-fore-color-opacity6;
  letter-spacing: 0.05px;
  font-family: @medium-font-family;
}

table.custom_table td.padding0 {
  padding: 0;
}

table.custom_table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid @dark-border-color;
}

table.custom_table tbody+tbody {
  border-top: 2px solid @dark-border-color;
}

table.custom_table th,
table.custom_table td {
  border: 1px solid @dark-border-color;
}

table.custom_table thead th,
table.custom_table thead td {
  border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody+tbody {
  border: 0;
}

.section-close-icon .anticon-close {
  font-size: 16px;
  cursor: pointer;
  color: @danger-color;
}

.section-close-icon .anticon-close::before {
  display: none !important;
}

@media print {
  table.custom_table {
    border-collapse: collapse !important;
  }

  table.custom_table td,
  table.custom_table th {
    background-color: @content-back-color  !important;
  }

  table.custom_table th,
  table.custom_table td {
    border: 1px solid @dark-border-color  !important;
  }
}

//Vacancies & Fee
.vacancy-fee-detail-container .detail-table {
  width: 100%;
}

.vacancy-fee-detail-container .detail-table tbody td,
.vacancy-fee-detail-container .detail-table thead th {
  border: 1px solid @default-hr-color;
  line-height: 50px;
  text-align: center;
  vertical-align: top;
}

.vacancy-fee-detail-container .detail-table thead tr th {
  font-size: 12px;
  font-weight: normal;
  font-family: @semi-bold-font-family;
}

.vacancy-fee-detail-container .detail-table tbody .tr-small-height td {
  line-height: 30px;
  height: 30px;
}

.vacancy-fee-detail-container .detail-table thead th {
  background-color: @right-panel-back-color;
}

.vacancy-fee-detail-container .detail-table .td-menu {
  background-color: @right-panel-back-color;
  text-align: left;
}

.vacancy-detail-container .configuration-footer a,
.meal-plan-container .configuration-footer a {
  color: @primary-color;
  text-decoration: underline !important;
}

.fee-detail-container .web-url {
  text-decoration: underline !important;
  color: @primary-color;
}

// Meal Plans
.meal-plan-container table thead tr th {
  border-right: 1px solid @default-hr-color;
  color: @flat-color;
  font-family: @bold-font-family;
}

.meal-plan-container table.meal-header thead tr th {
  background-color: @flat-fore-color;
}

.meal-plan-container table.meal-type .meal-type-header th {
  /*border:1px solid @default-hr-color; */
  font-family: @semi-bold-font-family;
  color: @flat-color;
}

.meal-plan-container table.meal-type .food-type-col {
  font-family: @bold-font-family;
}


.table-view-item-container .add-item-button {
  display: block;
  float: none !important;
  width: 20px;
  height: 20px;
  text-align: left;
  border-radius: 4px;
  border: 2px dashed @body-fore-color-opacity1  !important;
  background-color: @content-back-color;
  box-sizing: content-box;
  padding: 0;
  margin: 0 auto;
  position: relative !important;
  overflow: hidden;
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

.table-view-item-container .ant-tag .anticon-close {
  margin-left: 0px;
}

.table-view-item-container .add-item-button .dx-button-content {
  padding: 0;
}

.table-view-item-container .add-item-button .dx-button-content i.action-icon {
  padding-right: 5px;
}

.table-view-item-container .add-item-button .dx-button-content i.action-icon svg {
  margin: 0px 0 0 4px;
  width: 12px;
  height: 12px;
}

.table-view-item-container .add-item-button .dx-button-content i.action-icon svg path {
  fill: @body-fore-color-opacity1;
}

.table-view-item-container .add-item-button .dx-button-content span.dx-button-text {
  color: @body-fore-color;
  font-family: @medium-font-family;
  font-size: 12px;
  letter-spacing: 0.05px;
}

.table-view-item-container .add-item-button:hover {
  width: 61px;
  background-color: @content-back-color;
  border-color: #e7e7e7 !important;
}

.table-view-item-container .add-item-button.text-width-85:hover {
  width: 85px;
}

.table-view-item-container .add-item-button.text-width-90:hover {
  width: 90px;
}

.table-view-item-container .add-item-button.text-width-95:hover {
  width: 95px;
}

.table-view-item-container .add-item-button.text-width-100:hover {
  width: 100px;
}


.table-view-item-container .add-item-button:hover .dx-button-content i.action-icon svg {
  margin: 0 0 0 5px;
}

.table-view-item-container .add-item-button:hover .dx-button-content i.action-icon svg path {
  fill: @primary-color;
}


/** Popover Css Start **************************************/
.item-desc-popup {
  display: flex;
  border-radius: 4px 4px 4px 4px;
  background-color: @content-back-color;
}

.item-desc-popup .item-popup-icon {
  width: 40px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  border-radius: 5px 0 0 5px;
  padding: 10px 0;
}

.item-desc-popup .item-popup-icon svg {
  margin: 0 auto
}

.item-desc-popup .item-popup-icon span.itempopup-left-title {
  font-family: @bold-font-family;
  font-size: 8px;
  letter-spacing: 0.19px;
  line-height: 10px;
  padding-top: 5px;
  width: 100%;
  text-transform: uppercase;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

.text-uppercase {
  text-transform: uppercase;
}

.item-desc-popup .item-popup-content {
  width: calc(100% - 50px);
  padding: 10px;
}

.item-desc-popup .item-popup-content .mealpopup-right-title {
  color: @body-fore-color;
  font-family: @semi-bold-font-family;
  font-size: 12px;
  letter-spacing: 0.05px;
  line-height: 16px;
  text-transform: capitalize;
}

.item-desc-popup .item-popup-content p {
  color: @body-fore-color-opacity8;
  font-family: @medium-font-family;
  font-size: 10px;
  letter-spacing: 0.24px;
  line-height: 14px;
  margin: 5px 0 0 0;
}

/** Day Next Prev Button Css Start *************************/
.next-prev-header.prev-btn {
  position: absolute;
  // left: 0;
  top: 0;
}

.next-prev-header.next-btn {
  position: absolute;
  right: 0;
  top: 0;
}

.next-prev-header.dx-button .dx-button-content {
  padding: 3px 5px 2px 5px;
  border: 0 !important;
  min-height: 20px;
}

.next-prev-header.dx-button {
  border: 0;
  background: @primary-color;
}

.next-prev-header.dx-button .dx-button-content i.action-icon svg path {
  fill: @content-back-color  !important;
}

.next-prev-header.dx-button.next-btn {
  border-radius: 0 4px 0 0;
}

.next-prev-header.dx-button.prev-btn {
  border-radius: 0 0 0 0;
}

.next-prev-header.dx-button.prev-btn {
  left: auto;
  right: 0;
  border-radius: 0 4px 0 0;
}

.next-prev-header.dx-button.next-btn+.dx-button.prev-btn {
  right: 21px;
  border-radius: 0;
}

.next-prev-header.dx-button svg,
.next-prev-header.dx-button svg path,
.next-prev-header.dx-button svg g {
  fill: @content-back-color  !important;
  opacity: 1;
}

.next-prev-header.dx-button.next-btn svg {
  transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  position: relative;
}

.next-prev-header.dx-button.prev-btn svg {
  transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  position: relative;
}

/** Day Next Prev Button Css End *************************/

// Child Timeline
.child-timeline-outside-container .activity-group-wrapper {
  background-color: @body-back-color;
}

.child-timeline-photo-wrapper .child-timeline-photo-box .child-timeline-photo-link {
  background: @grid-border-color;
}

.child-timeline-comments-wrapper .child-timeline-posted {
  font-family: @medium-font-family;
  color: @body-fore-color-opacity6;
  border-bottom: 1px solid @control-border-color;
  border-top: 1px solid @control-border-color;
}

.child-timeline-comments-wrapper .child-timeline-comments-box-main .child-timeline-comments-form-box .child-timeline-comments-form-input .child-timeline-comments-input-note p {
  font-family: @medium-font-family;
}

.child-timeline-comments-wrapper .child-timeline-comments-box-main .child-timeline-comments-form-box .child-timeline-comments-form-button span.dx-button-text path {
  fill: @primary-color  !important;
}

.child-timeline-comments-wrapper .child-timeline-more-comments a {
  font-family: @medium-font-family;
}

.child-timeline-title-wrapper.child-timeline-title-center-three-wrapper .child-timeline-title-centerthree-img p {
  font-family: @medium-font-family;
}

.child-timeline-like-box-left .child-timeline-like-box .child-timeline-like-icon svg path {
  fill: @primary-color
}

.child-timeline-like-box-left .child-timeline-like-box .child-timeline-like-icon.unlike svg path {
  fill: @body-fore-color-opacity3
}

.child-timeline-like-box-left .child-timeline-likecomment-box svg path {
  fill: @body-fore-color-opacity3
}

// End Child Timeline

// hide first dynamic horizontal line
.guardian-authorisation-detail-wrapper .multiple-item-hr:first-child {
  display: none !important;
}

.child-health-detail-wrapper .multiple-item-hr:first-child {
  display: none !important;
}

.child-consents-details-wrapper .multiple-item-hr:first-child {
  display: none !important;
}

.child-kinder-garten-detail-wrapper .multiple-item-hr:first-child {
  display: none !important;
}

// Custom table Operational Profile
.operationalProfile .large-column {
  width: 14.5%;
}

.operationalProfile .small-column {
  width: 12.214%;
}

// Custom grid with day column
.view-summary-by-day-grid .dx-datagrid-rowsview {
  border: 0px !important;
}

.view-summary-by-day-grid .dx-scrollable-container {
  overflow: initial !important;
}

.view-summary-by-day-grid .dx-datagrid-headers .dx-datagrid-content,
.view-summary-by-day-grid .dx-datagrid-headers {
  box-shadow: none;
}

.view-summary-by-day-grid .dx-datagrid-headers,
.view-summary-by-day-grid .dx-datagrid-total-footer {
  border-left: 0px !important;
  border-right: 0px !important;
}

.view-summary-by-day-grid .dx-header-row td {
  background-color: black !important;
  color: #fff !important;
  border-left: 1px solid #fff !important;
  padding: 0 10px;
}

.view-summary-by-day-grid .main-row td {
  border: 1px solid @control-border-color;
  vertical-align: middle !important;
}

.plan-learning-category-summary .view-summary-by-day-grid .main-row td {
  min-height: 70px;
  vertical-align: top !important;
}

.plan-learning-category-summary .view-summary-by-day-grid .main-row td:first-child {
  border-left: 1px solid @control-border-color  !important;
  vertical-align: middle !important;
}

.view-summary-by-day-grid .dx-datagrid-rowsview .dx-row:hover {
  background-color: #fff !important;
}

.view-summary-by-day-grid .dx-datagrid-rowsview tbody tr.main-row:first-child td {
  border-top: 0px;
}

.view-summary-by-day-grid .dx-datagrid-rowsview tbody td {
  border-top: 0px;
}

.view-summary-by-day-grid .dx-datagrid-rowsview tbody.color_960893 .main-row td {
  border: 1px solid rgba(150, 8, 47, 0.3) !important;
}

.view-summary-by-day-grid .dx-datagrid-rowsview tbody.color_02af48 .main-row td {
  border: 1px solid rgba(2, 175, 72, 0.3) !important;
}

.view-summary-by-day-grid .dx-datagrid-rowsview tbody.color_2cd1a1 .main-row td {
  border: 1px solid rgba(44, 209, 161, 0.3) !important;
}

.view-summary-by-day-grid .dx-datagrid-rowsview tbody.color_2556e3 .main-row td {
  border: 1px solid rgba(37, 86, 227, 0.3) !important;
}

.view-summary-by-day-grid .dx-datagrid-rowsview tbody.color_9b00ff .main-row td {
  border: 1px solid rgba(155, 0, 255, 0.3) !important;
}

.view-summary-by-day-grid .dx-datagrid-rowsview tbody.color_399bf3 .main-row td {
  border: 1px solid rgba(57, 155, 243, 0.3) !important;
}

.view-summary-by-day-grid .dx-datagrid-rowsview tbody.color_ffb700 .main-row td {
  border: 1px solid rgba(255, 183, 0, 0.3) !important;
}

.view-summary-by-day-grid .dx-datagrid-rowsview tbody.color_ff1aa2 .main-row td {
  border: 1px solid rgba(255, 26, 162, 0.3) !important;
}

.view-summary-by-day-grid .dx-datagrid-rowsview tbody.color_ff2365 .main-row td {
  border: 1px solid rgba(255, 35, 101, 0.3) !important;
}

.view-summary-by-day-grid .dx-datagrid-rowsview tbody.color_f67444 .main-row td {
  border: 1px solid rgba(246, 116, 68, 0.3) !important;
}

.roll-weekly-summary .selected-cell {
  border-color: @primary-color  !important;
}

/********** Custom Table CSS END *********************/
// .cdk-overlay-connected-position-bounding-box .ant-select-dropdown{display: block !important}

.sticky-div .level-list-wrapper,
.sticky-div .level-list-configuration .setting-header-wrapper,
.sticky-div .level-list-menu-wrapper.vertical-menu,
.sticky-div .configuration-header {
  position: fixed !important
}

.sticky-div .level-list-wrapper {
  top: 40px;
}

.sticky-div .level-list-configuration {
  margin-left: 260px;
}

.no-level-list-wrapper.sticky-div .level-list-configuration {
  margin-left: 0px;
}

.sticky-div .level-list-configuration .setting-header-wrapper {
  top: 40px;
  z-index: 9;
  max-width: 1088px !important;
  width: calc(100% - 321px);
  left: 311px;
}

.sticky-div .level-list-menu-wrapper.vertical-menu+.level-configuration {
  margin-left: 200px;
}

.sticky-div .level-list-menu-wrapper.vertical-menu,
.sticky-div .configuration-header {
  top: 90px;
  z-index: 9;
}

.no-level-list-wrapper.sticky-div .level-list-menu-wrapper.vertical-menu,
.no-level-list-wrapper.sticky-div .configuration-header {
  top: 40px;
}

.sticky-div .configuration-header {
  max-width: 888px;
  width: calc(100% - 522px);
  background: @content-back-color;
}

.no-level-list-wrapper.sticky-div .configuration-header {
  width: calc(100% - 261px);
  max-width: 1149px;
}

.sticky-div.level-configuration-wrapper .dx-scrollable-scrollbar.dx-scrollbar-vertical {
  position: fixed;
  left: 299px;
  top: 90px;
}

.sticky-div.level-configuration-wrapper .inner-sec {
  height: calc(100vh - 102px) !important;
}

.sticky-div.level-configuration-wrapper #levelListWrapperScrollView .dx-scrollable-scrollbar.dx-scrollbar-vertical {
  height: calc(100vh - 102px) !important;
}

.setting-configuration-contaianer .sticky-div .level-list-wrapper {
  height: calc(100vh - 50px);
}

.setting-configuration-contaianer .sticky-div .level-list-menu-wrapper.vertical-menu {
  height: calc(100vh - 100px);
}

// Import wizard
.family-shell-main-container .dx-datagrid-headers.sticky-grid-header {
  top: 90px !important;
  width: calc(100% - 321px);
}

.configurationType_DataImportWizard .sticky-div .level-list-configuration {
  width: 100% !important;
}

.configurationType_DataImportWizard .sticky-div .level-list-configuration .setting-header-wrapper {
  width: 100%;
  max-width: calc(100% - 321px) !important;
}

.kidsxap-iframe-container {
  background-color: #fff;
}

.kidsxap-iframe-container .dynamic-createPanel,
.kidsxap-iframe-container .sub-container {
  background-color: #fff;
}

.kidsxap-iframe-container .widget-page .widget-page-container {
  box-shadow: none;
}

.kidsxap-iframe-container .sub-container {
  padding-right: 20px;
}

.kidsxap-iframe-container .sidebar-form .sub-title {
  border-bottom: 1px solid @control-border-color;
}

.kidsxap-iframe-container .message-container {
  margin: 10px 20px 0 20px;
  width: calc(100% - 40px);
}

.kidsxap-iframe-container .sidebar-form .sub-title {
  padding-left: 0;
  padding-right: 0;
  margin: 0 20px;
  width: calc(100% - 40px);
}

.kidsxap-iframe-container .widget-page .widget-page-container hr.multiple-item-hr {
  display: none !important;
}

.kidsxap-iframe-container .sidebar-form .sub-title h3 {
  font-size: 19px;
}

// text with back color
.text-with-back-color {
  padding: 0 4px;
  color: @body-fore-color-opacity9  !important;
  display: inline-block;
  line-height: 18px;
}

// don't assign height because if text long it will goes in new line
.text-with-back-color.success {
  background-color: @success-tag-back-color-dark;
}

.text-with-back-color.blue {
  background-color: @blue-tag-back-color-dark;
}

.text-with-back-color.red {
  background-color: @red-tag-back-color-dark;
}

.text-with-back-color.default {
  background-color: @default-tag-back-color;
}

// Flex
.fx-row {
  display: flex !important;
  flex-direction: row;
}

.fx-column {
  display: flex;
  flex-direction: column;
}

.fx-wrap {
  flex-wrap: wrap;
}

.fx-eq-width>div {
  flex: 1;
}

.fx-space-between {
  justify-content: space-between;
}

.fx-space-around {
  justify-content: space-around;
}

.fx-align-start {
  align-items: flex-start;
}

.fx-align-center {
  align-items: center;
}

.fx-justify-center {
  justify-content: center;
}

.fx-justify-end {
  justify-content: flex-end;
}

.xap-modal {
  z-index: 1000;
}

.xap-modal+.modal-full-screen {
  top: 0px;
  left: 0px;
  position: fixed;
  width: 100%;
  height: 100%;
}

// xapAccourdion panel
.xap-accordion-header {
  position: relative;
  cursor: pointer;
}

.xap-accordion-header::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.xap-accordion-header:not(.is-open)::after {
  border-bottom: 8px solid #555;
}

.xap-accordion-header.is-open::after {
  border-top: 8px solid #555;
}

.tr-align-top td {
  vertical-align: top !important;
}

.icon-primary svg path {
  fill: @primary-color
}

.wizard-footer .dx-button.primary-back-color,
.wizard-footer .dx-button.primary-flat-back-color {
  height: 40px;
  font-size: 16px;
  border-radius: 5px;
  box-shadow: 0 7px 14px 0 fade(@primary-color, 50%);
  padding: 0px 20px;
}

.wizard-body .dx-texteditor.search-box {
  height: 40px !important;
  border: none;
  border-bottom: 1px solid @control-border-color;
  border-radius: 0 !important;
}

.masonry-block-wrapper {
  padding: 0;
  -moz-column-gap: 10px;
  -webkit-column-gap: 10px;
  column-gap: 10px;
  column-count: 3;
}

.masonry-block-wrapper .masonry-block-col {
  margin: 0 0 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  vertical-align: baseline;
  display: inline-block;
  width: calc((100vw / 3) - 31px); // divide by column count
}

.mobile-device .colwidth25 {
  width: 100% !important;
}

.mobile-device .colwidth33 {
  width: 100% !important;
}

.mobile-device .colwidth50 {
  width: 100% !important;
}

.mobile-device .colwidth66 {
  width: 100% !important;
}

.mobile-device .colwidth75 {
  width: 100% !important;
}

.mobile-device .colwidth100 {
  width: 100% !important;
}

.mobile-device .width66 {
  width: 100% !important;
}

.mobile-device .width33 {
  width: 100% !important;
}

.mobile-device .sub-container {
  padding-right: 20px;
}

.mobile-device .right-panel-wrapper .control-label {
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: initial;
}

.mobile-device .form-footer {
  padding-right: 20px;
}

.mobile-device .mobilwWidth100 {
  width: 100% !important;
}

.mobile-device .mobilwWidth50 {
  width: 50% !important;
}

.mobile-device .mobile_padding_left0 {
  padding-left: 0px !important;
}

.mobile-device .mobile_padding_right0 {
  padding-right: 0px !important;
}

.mobile-device .mobile_padding_right5 {
  padding-right: 5px !important;
}

.mobile-device .caretype-tag-container {
  float: left;
  width: 100%;
  margin-top: 15px;
}

.mobile-device .caretype-tag {
  display: inline-block;
  margin-right: 5px
}

.responsive-view-list .dx-datagrid-headers {
  display: none;
}

.responsive-view-list table td {
  height: auto;
  border: 0px;
  padding: 0px;
}

.blinking_red {
  animation: blinkingText 4.5s infinite;
}

// Must be outside of :host
.child-tag-popup {
  .dx-list-item {
    border-bottom: 1px solid rgba(182, 186, 195, 0.2);

    .child-dropdown-item {
      line-height: 30px;
      padding: 10px 10px 10px 10px !important;
      font-family: @semi-bold-font-family;
      font-size: 12px;
      letter-spacing: 0.05px;
    }
  }
}

@keyframes blinkingText {
  0% {
    color: @red-color;
  }

  49% {
    color: @red-color;
  }

  60% {
    color: transparent;
  }

  70% {
    color: @red-color;
  }

  100% {
    color: @red-color;
  }
}

// mozilla firefox specific
@-moz-document url-prefix() {
  .dx-datagrid .dx-column-indicators {
    position: relative;
  }

  .checkbox-list .dx-checkbox-text {
    display: inline !important;
  }

  .section .checkbox-group .dx-checkbox {
    line-height: 40px;
  }
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {

  /* IE10+ CSS styles go here */
  .grid-with-sticky-header-top80 .dx-datagrid-headers,
  .grid-with-sticky-header-top90 .dx-datagrid-headers,
  .grid-with-sticky-header-without-tab-top40 .dx-datagrid-headers {
    position: initial;
    top: 0px;
  }
}

// IE firefox specific
@supports (-ms-ime-align:auto) {
  .create-payment-account .button-group .dx-radiobutton {
    height: auto;
  }

  .column-width25.button-group .dx-radiobutton {
    column-width: 25px;
    -moz-column-width: 25px;
    -webkit-column-width: 25px;
  }

  .days-selection-wrapper .checkbox-group .dx-checkbox {
    column-width: 34px;
    -moz-column-width: 34px;
    -webkit-column-width: 34px;
    padding: 0 10px;
  }

  .section .days-selection-wrapper .checkbox-group .dx-checkbox {
    column-width: 50px;
    -moz-column-width: 50px;
    -webkit-column-width: 50px;
  }

  .checkbox-list .dx-checkbox-text {
    display: inline !important;
  }

  .grid-with-sticky-header-top80 .dx-datagrid-headers,
  .grid-with-sticky-header-top90 .dx-datagrid-headers,
  .grid-with-sticky-header-without-tab-top40 .dx-datagrid-headers {
    position: initial;
    top: 0px;
  }
}

@media (min-width: 768px) {
  .body-container {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .body-container {
    width: 100%;
  }
}

@media (min-width: 1230px) {
  .body-container {
    width: 1223px;
  }
}

// mobile view
// view less than width of 767px
@media only screen and (max-width: 767px) {
  .mobile-view {
    .page-container {
      padding-left: 0;
      padding-right: 0;
    }

    .tab-control {
      padding-top: 10px;
    }

    // sub tab top space

    .bg-white,
    .white_box_shadow,
    .only-block-content-no-grid .content-wrapper {
      border-radius: 0px;
    }

    .guardian-timeline-container {
      min-height: calc(100vh - 69px);
    }

    .only-block-container .content-wrapper .inner-sec {
      max-height: calc(100vh - 69px);
      height: calc(100vh - 69px);
    }

    .header-menu-item a.active .header-menu-icon path,
    .header-menu-item a.hover .header-menu-icon path,
    .header-menu-item a.active-replica .header-menu-icon path {
      fill: @white-color
    }

    .breadcrumb-container {
      display: flex;
      align-items: center;
    }

    .breadcrumb-wrapper {
      background-color: @colorf9f9f9;
      padding: 5px 0px;
      margin: 0;
      color: @body-fore-color-opacity8  !important;
      line-height: unset;
    }

    .breadcrumb-item-wrapper {
      color: @body-fore-color-opacity8  !important;
    }

    .breadcrumb-item-wrapper .breadcrumb-text {
      font-size: 10px !important;
    }

    .breadcrumb-wrapper .home-item svg {
      width: 12px;
    }

    .breadcrumb-wrapper .home-item svg path {
      fill: @body-fore-color-opacity8  !important
    }

    .child-timeline-container {
      padding: 20px 10px;
    }

    .child-timeline-like-box-right {
      max-width: calc(100% - 105px);
      width: calc(100% - 125px);
    }

    .child-timeline-like-user.single-child span.color6 {
      max-width: calc(100% - 35px);
      padding-top: 7px;
    }

    .child-timeline-child-list-view-wrapper {
      width: 100%;
    }

    .child-timeline-child-list-view-wrapper .child-timeline-like-user {
      margin: 0 !important;
      width: 100%;
    }

    .child-timeline-title-center-wrapper .child-timeline-title-centerbtn-main a.child-timeline-title-centerbtn {
      display: inline-block;
      margin-top: 5px !important;
    }

    // Tab
    .manage-tab .ant-tabs-bar {
      position: static;
      padding: 0;
      box-shadow: none;
    }

    .multiple-tab-item-noGrid {
      padding: 0;
    }

    .ant-tabs.ant-tabs-card>.ant-tabs-bar .ant-tabs-nav-container {
      overflow: hidden;
    }

    // dropdown section selection
    .dropdown-tenant-section-container {
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .dropdown-tenant-section-container.padding_left10 {
      padding-left: 10px;
    }

    .dropdown-tenant-section-container.padding_right5 {
      padding-right: 10px;
    }

    .dropdown-tenant-section-container .summary-content-action-column {
      padding: 0px !important;
    }

    // family summary
    .family-summary .col-right {
      width: 100%;
    }

    .family-summary .col-left {
      width: 100%;
    }

    // .family-summary .header {display: none !important; border-radius: 0px;}
    // .family-summary .child-health-info-container.header {display: initial !important;}

    .family-summary .grid_loading_wrapper.details .column.col3,
    .family-summary .grid_loading_wrapper.details .column.col4,
    .family-summary .grid_loading_wrapper.details .column.col5,
    .family-summary .grid_loading_wrapper.details .column.col6 {
      display: none !important;
    }

    .family-summary .summary-content-action-column {
      padding-right: 5px !important;
    }

    .family-summary .header .column.action-column {
      padding-right: 10px !important;
    }

    .family-summary .details .col1 {
      width: calc(50% - 15px) !important;
    }

    .family-summary .details .col2 {
      width: calc(50% - 15px) !important;
    }

    .family-summary .email-history-container .col1,
    .family-summary .email-history-container .col2 {
      width: 50% !important;
    }

    .user-profile-image-header .pro-img .img-wrapper-text {
      font-size: 12px;
      line-height: 24px;
    }

    .mobile-display-flex {
      display: flex !important;
    }

    // To fix scroll issue in mobile
    .pane-width760,
    .right-pane,
    .right-pane-width760,
    .right-pane-width790,
    .right-pane-width550,
    .right-pane-width805,
    .right-pane-width448 {

      .inner-sec,
      .inner-sec.rightpanel,
      .inner-sec.dx-scrollable {
        // height: 100% !important; // 27075 - removed right panel 100% height, so now it will consider default height as (device height - 94px)
        max-height: calc((var(--vh, 100vh)) - 94px);
      }
    }
  }

  #fleeq-bar {
    display: none;
  }

  .width390px,
  .width440px,
  .width450px,
  .width490px,
  .width500px,
  .width600px,
  .width640px,
  .width700px,
  .width760px,
  .width790px,
  .width762px,
  .width805px {
    width: 100% !important;
  }

  .user-profile-container {
    width: 100% !important;
    right: 0 !important;
  }

  .user-profile-role-list .default-login {
    padding: 0 10px !important;
  }

  .user-profile-container .abs-dx-radiobutton .role-item {
    padding: 10px;
  }

  .dx-scrollable-scrollbar.dx-scrollbar-vertical,
  .dx-scrollable-scrollbar.dx-scrollbar-vertical.dx-state-hover {
    width: 5px !important;
  }

  .dx-scrollbar-vertical .dx-scrollable-scroll {
    width: 3px !important;
  }

  .cdk-overlay-pane {
    width: auto !important;
    min-width: 87px;
  }

  // Sandip: I have set min-width as group input expand don't show in mobile view
  .grid-with-sticky-header-top80 .dx-datagrid-headers,
  .grid-with-sticky-header-top90 .dx-datagrid-headers,
  .grid-with-sticky-header-without-tab-top40 .dx-datagrid-headers {
    position: initial;
    top: 0px;
  }

  .top-filter .form-field {
    padding: 0 5px 10px 5px;
    width: 50%;
    margin-right: 0px !important;
    max-width: 200px;
  }

  .top-filter .table-header {
    padding: 20px 5px 0px 5px;
  }

  .top-filter .form-field .formItem.filter-container {
    width: auto !important;
  }

  .top-filter .form-field .formItem {
    width: 100% !important;
  }

  .top-filter .form-field a.search-wrapper,
  .top-filter .form-field a.filter-wrapper,
  .top-filter .form-field a.reset-wrapper {
    width: 30px;
  }

  .top-filter .no-label {
    margin-left: 0px !important;
    margin-right: 0px !important;
    width: auto !important;
  }

  .top-filter .form-field .formItem.applied-filter-container {
    width: auto !important;
  }

  .top-filter .bulk-action .bulk-dropdown {
    height: 25px;
    width: 25px;
  }

  .top-filter .bulk-action .bulk-dropdown a.ant-dropdown-trigger {
    padding-top: 6px;
    padding-left: 2px;
  }

  .top-filter .form-field a.filter-wrapper,
  .top-filter .form-field a.reset-wrapper {
    margin-right: 0px !important;
  }

  .top-filter .plus-btn {
    height: 25px;
    width: 25px;
  }

  .custom_top_action_wrapper {
    padding: 10px;
  }

  .custom_top_action_wrapper .right {
    padding-top: 0px;
  }

  .custom_top_action_wrapper .bulk-action .bulk-dropdown {
    height: 25px;
    width: 25px;
    padding-top: 0px;
  }

  .manage-tab .ant-card-body {
    padding-top: 10px;
  }

  // right pane
  .add-panel-box {
    width: 100%;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }

  .title-box {
    min-width: auto !important;
    width: 100%;
    padding: 9px 7px 9px 10px !important;
  }

  .sidebar-form .sub-title {
    padding: 8px 15px 8px 10px;
  }

  .filterPanel .right-pane,
  .createPanel .right-pane,
  .viewPanel .right-pane,
  .dynamic-createPanel .right-pane,
  .widget-page .widget-page-container.right-pane,
  .pane-width760,
  .right-pane-width760,
  .right-pane-width790,
  .right-pane-width550,
  .right-pane-width805,
  .right-pane-width448 {
    width: 100% !important;
    box-shadow: none;
  }

  .filterPanel .left-pane,
  .createPanel .left-pane,
  .viewPanel .left-pane,
  .dynamic-createPanel .left-pane {
    display: none;
  }

  .filterPanel .right-pane .form-footer,
  .createPanel .right-pane .form-footer,
  .viewPanel .right-pane .form-footer,
  .dynamic-createPanel .right-pane .form-footer,
  .widget-page .widget-page-container .form-footer,
  .form-footer-width760,
  .form-footer-width790,
  .form-footer-width550,
  .form-footer-width805,
  .form-footer-width448 {
    width: 100% !important;
    padding: 10px;
  }

  .filterPanel .sub-container,
  .createPanel .sub-container,
  .viewPanel .sub-container {
    padding: 20px 5px 0px 5px;
  }

  .dynamic-createPanel .sub-container {
    padding: 20px 10px 0px 0px;
  }

  .filterPanel .right-pane.width640px,
  .createPanel .right-pane.width640px,
  .viewPanel .right-pane.width640px,
  .dynamic-createPanel .right-pane.width640px {
    width: 100%;
  }

  .filterPanel .ant-select-selection-selected-value {
    min-width: 60px;
  }

  .sidebar-box-sec .colwidth25,
  .sidebar-box-sec .colwidth33,
  .sidebar-box-sec .colwidth50,
  .sidebar-box-sec .width33 {
    width: 50% !important;
  }

  .sidebar-box-sec .colwidth66,
  .sidebar-box-sec .colwidth75,
  .sidebar-box-sec .width66 {
    width: 100% !important;
  }

  .standard-field-box-width {
    width: 100% !important;
  }

  .family-summary {
    width: 100%;
    margin: 0px !important;
    float: left !important;
    padding-top: 10px !important;
  }

  .family-summary.multiple-tab-item-noGrid .white_box_shadow {
    padding: 0px !important;
  }

  .family-summary.multiple-tab-item-noGrid .white_box_shadow:before {
    right: 0px !important;
    left: 0px !important;
  }

  .family-summary .payment-account-wrapper .header .action-column {
    width: 120px;
    padding-right: 0px !important;
  }

  .mobile-view .payment_summery_wrapper .white_box_shadow {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 5px !important;
  }

  .mobile-view .payment_summery_leftcard.statement_payment_summery .white_box_shadow .field-box {
    width: 50% !important;
    padding-right: 10px !important;
    max-width: 190px;
  }

  .mobile-view .payment-account-list-detail-wrapper .row1,
  .mobile-view .payment-account-list-detail-wrapper .row2 {
    padding: 20px 10px 0px 10px !important;
  }

  .mobile-view .payment-account-wrapper .action-column .dx-checkbox {
    width: auto !important;
  }

  .mobile-view .medical-condition-sub-container .medical-Condition-row1 {
    padding: 20px 10px 0px 10px !important;
  }

  .child-summary .details-content-wrapper .content-wrapper {
    width: 50% !important;
  }

  .family-entitlement-filter-wrapper {
    padding: 10px 10px 0px 5px !important;
  }

  .child-enrolment-list .details .col1,
  .child-enrolment-list .details .col2 {
    width: calc(50% - 10px) !important;
    padding-right: 10px;
  }

  .xap-modal .body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .xap-modal .fx-row {
    background-color: @white-color;
  }

  .review-section {
    padding: 10px !important;
  }

  // single waitlist block
  .card_header_box_wrapper {
    border-radius: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-top: 10px;
  }

  .card_header_box_wrapper .right {
    padding-top: 10px;
  }

  .card_wrapper .row {
    margin: 0;
    width: 100%;
  }

  .card_wrapper .card_col {
    width: 100%;
    padding: 0;
  }

  .card_wrapper .card_col .card .card_top_wrapper,
  .card_wrapper .card_col .card {
    border-radius: 0px;
  }

  .waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_circle_section {
    padding: 20px 10px 15px 10px;
  }

  .waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_last_btn_section,
  .waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_location_section {
    padding: 0px 10px 20px 10px;
  }

  .waitlistmain_wrapper .waitlistmain_col .card .card_top_wrapper .waitlistmain_request_offer_section {
    padding: 0px 0px 20px 0px;
  }

  .guardian-timeline-container {
    max-width: 100% !important;
  }

  .setting-configuration-contaianer.level-configuration-container .level-content-container {
    height: auto !important;
  }

  .setting-configuration-contaianer.level-configuration-container .level-content-container .sub-text {
    width: 100% !important;
  }

  .setting-configuration-contaianer .level-list-wrapper:before,
  .setting-configuration-contaianer .level-list-menu-wrapper.vertical-menu:before,
  .setting-configuration-contaianer .level-configuration:before {
    display: none !important;
  }

  .public-page-body .public-page-container {
    margin-top: 65px !important;
    width: 100% !important;
  }

  .sub-container .message-container {
    margin-left: -5px;
    width: calc(100% + 20px);
  }

  // family summary: payment account
  .sub-container .row2 .message-container {
    width: calc(100% + 22px) !important;
    margin-left: -10px !important;
  }
}

@media (max-width:1024px) {

  .family-summary .col-right {
    width: 100%;
    padding-left: 0;
  }

  .family-summary .col-left {
    width: 100%;
  }

  .dx-datagrid {
    min-height: initial !important;
  }

  .dx-datagrid-pager {
    padding: 10px !important;
  }

  .search_line {
    margin: 5px 5px 0 5px;
    display: none;
  }

  .payment_summery_wrapper .payment-summary-box-wrapper {
    width: 100%;
  }

  .payment_summery_circle.datesvg-box {
    display: none !important;
  }

  .payment_summery_wrapper .payment_summery_content .payment_summery_title {
    font-size: 12px !important;
  }

  .payment_summery_wrapper .payment_summery_box .payment_summery_content {
    margin-left: 5px;
  }

  .payment_summery_leftcard .payment_summery_box:before {
    top: 5px !important;
  }

  // Child Summary
  .child-summary .other-details-wrapper .white_box_shadow:before {
    box-shadow: none;
    border: 1px solid @control-border-color  !important;
  }

  .child-summary.multiple-tab-item-noGrid {
    padding-top: 40px;
  }

  .mobile-view .child-summary.multiple-tab-item-noGrid {
    padding-top: 10px;
  }

  .days-selection-wrapper .checkbox-group {
    display: table !important;
  }

  .days-selection-wrapper .checkbox-group .dx-checkbox {
    padding: 0 12px;
  }

  .dx-popup-title.dx-toolbar {
    padding-top: 25px;
  }

  .meal-header-container {
    overflow: auto;
  }

  .meal-header-container th.day-col,
  .meal-header-container td.day-col {
    min-width: 150px;
    max-width: 250px;
  }

  .create-wizard .wizard-body {
    width: 100% !important;
  }
}

@media only screen and (min-width: 481px) {
  .top-filter .no-label {
    width: auto !important;
  }

  .top-filter .form-field.three-inputs,
  .top-filter .form-field.three-inputs .input-box {
    max-width: 120px !important;
  }

  .payment_summery_wrapper .payment-summary-box-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .child-summary .details-content-wrapper .content-wrapper {
    width: 50%;
  }

  .bond-list table {
    display: table;
  }
}

@media screen and (min-width: 600px) {

  .top-filter .form-field.three-inputs,
  .top-filter .form-field.three-inputs .input-box {
    max-width: 135px !important;
  }
}

@media only screen and (min-width: 768px) {
  .top-filter div.right {
    padding-right: 0px;
  }

  .child-summary .details-content-wrapper .content-wrapper {
    width: 33.33% !important;
  }

  .child-summary .basic-details-wrapper .details-content-wrapper .content-wrapper {
    width: 100% !important;
  }

  .tablet-landscape-view .child-enrolment-list .details .col1,
  .tablet-landscape-view .child-enrolment-list .details .col2 {
    padding-right: 10px;
    width: 200px;
  }

  .tablet-potrait-view .child-enrolment-list .details .col1,
  .tablet-potrait-view .child-enrolment-list .details .col2 {
    padding-right: 10px;
  }

  .card_wrapper .card_col {
    width: 50%;
  }
}

@media only screen and (min-width: 1025px) {
  .top-filter .bulk-action .bulk-dropdown a.ant-dropdown-link span {
    display: inline-block;
  }

  .top-filter .form-field {
    width: 190px;
  }

  .top-filter .form-field.three-inputs,
  .top-filter .form-field.three-inputs .input-box {
    max-width: 190px !important;
    width: 100%;
  }

  .payment_summery_wrapper .payment-account-wrapper {
    width: 170px;
  }

  .payment_summery_wrapper .payment-summary-box-wrapper {
    width: calc(100% - 175px);
    padding-left: 0px;
  }

  .payment_summery_wrapper .payment-summary-box-wrapper.without-payment-account {
    width: 100%;
  }

  .card_wrapper .card_col {
    width: 33.3333%
  }
}

@media only screen and (min-width: 481px) and (max-width: 1024px) {

  // .right-pane-width760.with-left-pane,
  // .right-pane-width790.with-left-pane,
  // .right-pane-width550.with-left-pane,
  // .right-pane-width805.with-left-pane,
  // .right-pane-width448.with-left-pane {
  //   width: calc(100% - 200px) !important;
  //   min-width: 440px;
  // }

  // .form-footer-width760.with-left-pane,
  // .form-footer-width790.with-left-pane,
  // .form-footer-width550.with-left-pane,
  // .form-footer-width805.with-left-pane,
  // .form-footer-width448.with-left-pane {
  //   width: calc(100% - 200px) !important;
  //   min-width: 440px;
  // }

  .payment_summery_wrapper .payment_summery_leftcard,
  .payment_summery_wrapper .payment_summery_rightcard {
    width: 100% !important;
  }

  .payment_summery_wrapper .payment_summery_rightcard {
    margin-top: 10px;
  }
}

/* For landscape layouts only */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation:landscape) {
  .progress-bar-fixed {
    padding-left: 200px;
  }

  .onboarding-flow {
    padding-left: 40px;
  }

  .masonry-block-wrapper {
    column-count: 2;
  }

  .masonry-block-wrapper .masonry-block-col {
    width: calc((100vw / 2) - 31px); // divide by column count
  }
}

/* For portrait layouts only */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation:portrait) {
  .search-form .dx-textbox {
    width: 175px;
  }

  .top-filter .bulk-action button {
    padding: 0 10px;
  }

  .top-filter .bulk-action .ant-dropdown-link span {
    display: none !important;
  }

  .top-filter .bulk-action .ant-dropdown-link span.display-inline-block {
    display: inline-block !important;
  }

  .top-filter .bulk-action button i {
    margin: 0
  }

  .top-filter .form-field .formItem.filter-container {
    width: auto !important;
  }

  .top-filter .form-field a {
    margin-right: 10px;
  }

  .top-filter .reset-wrapper {
    margin-left: 10px;
  }

  .top-filter .no-label {
    margin-left: 0px;
  }

  .top-filter .plus-button-sec {
    margin-left: 10px !important;
  }

  .top-filter .dx-button .dx-button-content {
    padding: 0px 10px;
  }

  /*On Boarding*/
  .section .right-cont {
    max-width: 225px;
    top: calc(50% - 170px);
  }

  .section .left-cont {
    max-width: 445px;
  }

  .onboarding-flow-content {
    padding-left: 0px
  }

  .onboarding-flow {
    padding-left: 40px;
  }

  .section .dx-texteditor {
    width: 330px;
  }

  .progress-bar-fixed {
    padding-left: 100px;
  }

  .section .left-cont h1,
  .section .left-cont h2 {
    font-size: 20px;
  }

  .section .title {
    font-size: 16px !important;
  }

  .section .dx-placeholder,
  .section .dx-widget input,
  .section .dx-button-text,
  .section .dx-checkbox-has-text .dx-checkbox-text {
    font-size: 14px !important
  }

  .section .dx-button-has-text .dx-button-content {
    padding-top: 10px
  }

  .section .field-width-half {
    width: 122px !important;
  }

  .section-9 .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected {
    background-color: @content-back-color  !important;
  }

  /*End On Boarding*/
  .email-template-configuration .email-template-configuration-wrapper {
    max-width: calc(100% - 182px) !important;
  }

  .masonry-block-wrapper {
    column-count: 2;
  }

  .masonry-block-wrapper .masonry-block-col {
    width: calc((100vw / 2) - 31px); // divide by column count
  }
}

.expobsgoal-loading-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

// do not write any css below this line


.attendancetime span {
  font-size: 15px;
  font-family: @semi-bold-font-family  !important;
}

.signinouttime .formItem.input-box span sub {
  font-size: 10px;
  display: initial;
  position: relative;
  top: -2px;
  width: calc(100% - 95px);
}

.signinouttime {
  margin-bottom: 20px;
}

.signinouttime .form-field:nth-child(odd) {
  padding-left: 40px;
  position: relative;
}

.signinouttime .form-field {
  margin: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  float: left;
}

img.signinout_img_svg {
  position: absolute;
  left: 5px;
  top: 0;
}

.signinouttime:after {
  content: "";
  display: table;
  clear: both;
}

table.custom_table_wrapper tbody tr:hover {
  background: @row-hover-color  !important;
}


.wizard-body .button-group .border-color-primary {
  z-index: 9;
}

// review timeline
.child-timeline-title-wrapper .timeline-action-icon-wrapper a.ant-dropdown-trigger.ant-dropdown-link svg path {
  fill: @primary-color  !important;
}

.wizard-body .dx-checkbox-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.activity-primary-tag {
  border: 1px solid @primary-color;
  border-radius: 15px;
  padding: 3px 5px;
  margin: 2px;
  background: fade(@primary-color, 6%);
}

.dx-dropdownbutton-popup-wrapper .dx-popup-normal {
  width: auto !important; // It is must be auto
}

.primary .dx-button-content .dx-button-text {
  color: @primary-color  !important;
}

// xap blue logo style
.header .container .xap-blue-logo {
  height: 50px !important;
}

// book slot selected primary-color
ul.list-slot>.selected-slot {
  background: @primary-color;
  color: @white-color
}

.session-subsidies-list .fullHeight .dx-datagrid {
  min-height: auto !important;
}