/*** START : React Grid Data Table ***/
.react-grid-HeaderCell  {
  border-bottom: 0px solid rgb(224, 224, 224) !important;
  border-left: 0px solid rgb(224, 224, 224) !important;
  background-color: #fff !important;
  line-height: 2;
  font-size: 13px !important;
  text-transform: uppercase !important;
  font-weight: normal !important;
  color: rgb(25, 25, 25);
  border-bottom: 1px solid #ddd !important;
}

.react-grid-HeaderCell-sortable {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: bold;
  text-transform: capitalize;
  font-size: 14px;
  color: #333;
}

.react-grid-Cell__value div {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size:14px;
  color: #666;
}


.react-grid-Row--odd .react-grid-Cell {
  /* background-color: #fafafa !important; */
  background-color: #fff !important;
}

.react-grid-Cell {
    background-color: #fff;
    padding-left: 8px;
    padding-right: 8px;
    border-right: 0px solid #eee !important;
    border-bottom: 1px solid #ddd
}
.react-grid-Cell:nth-last-of-type(2) {
    border-right: 1px solid #eee !important;
}
.react-grid-Cell:focus {
    /*
    outline: 2px solid #66afe9;
    outline-offset: -2px
    */
    outline: none !important;
}
.react-grid-Cell--locked:focus {
    z-index: 100
}
.react-grid-Cell:focus .drag-handle {
    position: absolute;
    bottom: -5px;
    right: -4px;
    background: #66afe9;
    width: 8px;
    height: 8px;
    border: 1px solid #fff;
    border-right: 1;
    border-bottom: 0;
    z-index: 8;
    cursor: crosshair;
    cursor: -webkit-grab
}
.react-grid-item  {
    border:0 !important;
}
.dragCancel  {
    background-color: inherit !important;
    margin-top: 0px !important;
    padding-top: 0px !important;
}
.react-grid-item > div  {
    background-color: #fff;
    border-radius:5px 5px 0 0;
    padding:15px 10px 0px 15px !important;
}
 .react-grid-item > div span h4 {
    font-family: "Helvetica Neue","Segoe UI",Roboto,Helvetica,Arial,Tahoma,Verdana,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    color: #000;
 }
.react-grid-Cell:not(.editing) .react-grid-Cell__value {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}
.react-grid-Cell:not(.editing):not(.rdg-child-cell) .react-grid-Cell__value {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px !important;
}
.rdg-child-cell .react-grid-Cell__value {
    line-height: 35px
}
.react-grid-Cell.readonly {
    background-color: #000
}
.react-grid-Cell.copied {
    background: rgba(0, 0, 255, .2)!important
}
.react-grid-Cell--locked:last-of-type {
    border-right: 1px solid #ddd;
    box-shadow: none
}
.react-grid-Cell:hover:focus .drag-handle .glyphicon-arrow-down {
    display: block;
}
.react-grid-Cell.is-dragged-over-down{
  border-right:1px dashed #000;border-left:1px dashed #000;border-bottom:1px dashed #000
}
.react-grid-Cell.is-dragged-over-up{
  border-right:1px dashed #000;border-left:1px dashed #000;border-top:1px dashed #000
}
.react-grid-Cell.is-dragged-over-up .drag-handle{
  top:-5px
}
.react-grid-Cell:hover{
  background:#fff !important;
}
.react-grid-Cell--odd:hover{
  background:#fafafa !important;
}
.react-grid-cell .form-control-feedback{
  color:#a94442;
  position:absolute;
  top:0;
  right:10px;
  z-index:1000000;
  display:block;
  width:34px;
  height:34px
}
.react-grid-Cell.was-dragged-over{
  border-right:1px dashed #000;
  border-left:1px dashed #000
}
.react-grid-Cell:hover:focus .drag-handle{
  position:absolute;
  bottom:-8px;
  right:-7px;
  background:#fff;
  width:16px;
  height:16px;
  border:1px solid #66afe9;
  z-index:8;
  cursor:crosshair;
  cursor:-webkit-grab
}
.react-grid-Row.row-selected .react-grid-Cell{
  background-color:#dbecfa
}
.react-grid-Cell.editing{
  padding:0;
  overflow:visible!important
}
.react-grid-Cell--locked.editing{
  z-index:100
}
.react-grid-Cell.editing .has-error input{
  border:2px solid red!important;
  border-radius:2px!important
}.react-grid-Cell__value ul {
    margin-top: 0;
    margin-bottom: 0;
    display: inline-block
}
.react-grid-Cell__value .btn-sm {
    padding: 0
}
.cell-tooltip {
    position: relative;
    display: inline-block
}
.cell-tooltip .cell-tooltip-text {
    visibility: hidden;
    width: 150px;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: -150%;
    left: 50%;
    margin-left: -60px;
    opacity: 1s
}
.cell-tooltip:hover .cell-tooltip-text {
    visibility: visible;
    opacity: .8
}
.cell-tooltip .cell-tooltip-text:after {
    content: " ";
    position:absolute;
    bottom:100%;
    left:50%;
    margin-left:-5px;
    border-width:5px;
    border-style:solid;
    border-color:transparent transparent #000
}
.react-grid-Canvas.opaque .react-grid-Cell.cell-tooltip:hover .cell-tooltip-text {
    visibility: hidden
}
.rdg-cell-expand {
    top: 0;
    right: 20px;
    position: absolute;
    cursor: pointer
}
.rdg-child-row-action-cross-last:before,
.rdg-child-row-action-cross:before,
.rdg-child-row-action-cross-last:after,
.rdg-child-row-action-cross:after {
    content: "";
    position:absolute;
    background:grey;
    height:50%
  }
  .rdg-child-row-action-cross:before{
    left:21px;
    width:1px;
    height:35px
  }
  .rdg-child-row-action-cross-last:before {
    left: 21px;
    width: 1px
}
.rdg-child-row-action-cross-last:after,
.rdg-child-row-action-cross:after {
    top: 50%;
    left: 20px;
    height: 1px;
    width: 15px;
    content: "";
    position:absolute;
    background:grey
}
.rdg-child-row-action-cross:hover{
  background:red
}
.rdg-child-row-btn{
  position:absolute;
  cursor:pointer;
  border:1px solid grey;
  border-radius:14px;
  z-index:3;
  background:#fff
}
.rdg-child-row-btn div {
    font-size: 12px;
    text-align: center;
    line-height: 19px;
    color: grey;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 60%;
    left: 53%;
    margin-top: -10px;
    margin-left: -10px
}
.rdg-empty-child-row:hover .glyphicon-plus-sign,
.rdg-empty-child-row:hover a {
    color: green
}
.rdg-child-row-btn .glyphicon-remove-sign:hover {
    color: red
}
.last-column .cell-tooltip-text {
    right: 100%;
    left: 0!important
}
.radio-custom,
.react-grid-checkbox {
    opacity: 0;
    position: absolute
}
.radio-custom,
.radio-custom-label,
.react-grid-checkbox,
.react-grid-checkbox-label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer
}
.radio-custom-label,
.react-grid-checkbox-label {
    position: relative
}
.radio-custom+.radio-custom-label:before,
.react-grid-checkbox+.react-grid-checkbox-label:before {
    content: "";
    background:#fff;
    border:2px solid #ddd;
    display:inline-block;
    vertical-align:middle;
    width:13px !important;
    height:13px !important;
    text-align:center;
    margin-top:5px !important;
}
.react-grid-checkbox:checked+.react-grid-checkbox-label:before {
    background: #556775 !important;
    box-shadow: inset 0 0 0 0px #fff  !important
}
.radio-custom:focus+.radio-custom-label,
.react-grid-checkbox:focus+.react-grid-checkbox-label {
    outline: 1px solid #ddd
}
.react-grid-HeaderCell input[type=checkbox] {
    z-index: 99999
}
.react-grid-HeaderCell>.react-grid-checkbox-container {
    padding: 0 10px;
    height: 100%
}
.react-grid-HeaderCell>.react-grid-checkbox-container>.react-grid-checkbox-label {
    margin: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}
.radio-custom+.radio-custom-label:before {
    border-radius: 50%
}
.radio-custom:checked+.radio-custom-label:before {
    background: #ccc;
    box-shadow: inset 0 0 0 4px #fff
}
.checkbox-align {
    text-align: center
}
.react-grid-Container {
    clear: both;
    margin-top: 0;
    padding: 0;
    width: 100% !important;
}
.react-grid-Main {
    background-color: #fff;
    color: inherit;
    padding: 0;
    outline: 1px solid #e7eaec;
    clear: both
}
.react-grid-Grid {
    border: 1px solid #ddd
}
.react-grid-Canvas,
.react-grid-Grid {
    background-color: #fff;
    width: 100% !important;
}
.react-grid-Cell input.editor-main,
select.editor-main {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}
input.editor-main:focus,
select.editor-main:focus {
    border-color: #66afe9;
    border: 2px solid #66afe9;
    background: #eee;
    border-radius: 4px
}
.react-grid-Cell input.editor-main::-moz-placeholder,
select.editor-main::-moz-placeholder {
    color: #999;
    opacity: 1
}
.react-grid-Cell input.editor-main:-ms-input-placeholder,
select.editor-main:-ms-input-placeholder {
    color: #999
}
.react-grid-Cell input.editor-main::-webkit-input-placeholder,
select.editor-main::-webkit-input-placeholder {
    color: #999
}
.react-grid-Cell input.editor-main[disabled],
.react-grid-Cell input.editor-main[readonly],
fieldset[disabled] .react-grid-Cell input.editor-main,
fieldset[disabled] select.editor-main,
select.editor-main[disabled],
select.editor-main[readonly] {
    cursor: not-allowed;
    background-color: #eee;
    opacity: 1
}
textarea.react-grid-Cell input.editor-main,
textareaselect.editor-main {
    height: auto
}
.react-grid-ScrollShim {
    z-index: 10002
}
  .react-grid-Header {
    box-shadow: 0 0 4px 0 #ddd;
    background: #ffffff !important;
}
.react-grid-Header--resizing {
    cursor: ew-resize
}
.react-grid-HeaderCell,
.react-grid-HeaderRow {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.react-grid-HeaderCell {
    background: #f9f9f9;
    padding: 0px 8px 0px 8px !important;
    font-weight: 700;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd
}
.react-grid-HeaderCell__value {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}
.react-grid-HeaderCell__resizeHandle:hover {
    cursor: ew-resize;
    background: #ddd
}
.react-grid-HeaderCell--locked:last-of-type {
    box-shadow: none
}
.react-grid-HeaderCell--resizing .react-grid-HeaderCell__resizeHandle {
    background: #ddd
}
.react-grid-HeaderCell__draggable {
    cursor: col-resize
}
.rdg-can-drop>.react-grid-HeaderCell {
    background: #ececec
}
.react-grid-HeaderCell .Select {
    max-height: 30px;
    font-size: 12px;
    font-weight: 400
}
.react-grid-HeaderCell .Select-control {
    max-height: 30px;
    border: 1px solid #ccc;
    color: #555;
    border-radius: 3px
}
.react-grid-HeaderCell .is-focused:not(.is-open)>.Select-control {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}
.react-grid-HeaderCell .Select-control .Select-placeholder {
    line-height: 20px;
    color: #999;
    padding: 4px
}
.react-grid-HeaderCell .Select-control .Select-input {
    max-height: 28px;
    padding: 4px;
    margin-left: 0
}
.react-grid-HeaderCell .Select-control .Select-input input {
    padding: 0;
    height: 100%
}
.react-grid-HeaderCell .Select-control .Select-arrow-zone .Select-arrow {
    border-color: gray transparent transparent;
    border-width: 4px 4px 2.5px
}
.react-grid-HeaderCell .Select-control .Select-value {
    padding: 4px;
    line-height: 20px!important
}
.react-grid-HeaderCell .Select--multi .Select-control .Select-value {
    padding: 0;
    line-height: 16px!important;
    max-height: 20px
}
.react-grid-HeaderCell .Select--multi .Select-control .Select-value .Select-value-icon,
.react-grid-HeaderCell .Select--multi .Select-control .Select-value .Select-value-label {
    max-height: 20px
}
.react-grid-HeaderCell .Select-control .Select-value .Select-value-label {
    color: #555!important
}
.react-grid-HeaderCell .Select-menu-outer .Select-option {
    padding: 4px;
    line-height: 20px
}
.react-grid-HeaderCell .Select-menu-outer .Select-menu .Select-option.is-focused,
.react-grid-HeaderCell .Select-menu-outer .Select-menu .Select-option.is-selected {
    color: #555
}
  .react-grid-Row.row-context-menu .react-grid-Cell,
.react-grid-Row:hover .react-grid-Cell {
    background-color: transparent !important;
}
/*.react-grid-Row--odd:hover .react-grid-Cell {
    background-color: #fafafa !important;
}*/
.react-grid-Row:hover .rdg-row-index {
    display: none
}
.react-grid-Row:hover .rdg-actions-checkbox {
    display: none !important;
}
.react-grid-Row:hover .rdg-drag-row-handle {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    width: 12px;
    height: 30px;
    margin-left: 0;
    /*background-image: url(\"data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjlweCIgaGVpZ2h0PSIyOXB4IiB2aWV3Qm94PSIwIDAgOSAyOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMzkgKDMxNjY3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5kcmFnIGljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQWN0dWFsaXNhdGlvbi12MiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkRlc2t0b3AiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNS4wMDAwMDAsIC0yNjIuMDAwMDAwKSIgZmlsbD0iI0Q4RDhEOCI+CiAgICAgICAgICAgIDxnIGlkPSJJbnRlcmFjdGlvbnMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1LjAwMDAwMCwgMjU4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJvdy1Db250cm9scyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImRyYWctaWNvbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMTIiIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iNyIgY3k9IjEyIiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0zMCIgY3g9IjIiIGN5PSIxNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iMTciIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iMiIgY3k9IjIyIiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0zMCIgY3g9IjciIGN5PSIyMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMjciIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iNyIgY3k9IjI3IiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==\");*/
    background-repeat: no-repeat
}
.react-grid-Row.row-selected,
.react-grid-Row .row-selected {
    /* background-color: #F89270 !important;  ; */
    background-color: #dadada !important;
}
.react-grid-row-group .row-expand-icon:hover {
    color: #777
}
.react-grid-row-index {
    padding: 0 18px
}
.rdg-row-index {
    display: block;
    text-align: center
}
.rdg-row-actions-cell {
    padding: 0
}
.rdg-actions-checkbox {
    display: none;
    text-align: center
}
.rdg-actions-checkbox.selected {
    display: block
}
.rdg-dragging {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing
}
.rdg-dragged-row {
    border-bottom: 1px solid #000
}

.drag-handle { display: none; }
/*** END : React Grid Data Table ***/

.react-grid-Main{
    height: 100%;
}
    
.react-grid-Container{
    height: 100%;
}

.react-grid-Grid{
    min-height: 100% !important;
}

.react-grid-Canvas{
    height: 100% !important;
}

.react-grid-HeaderCell-formatter {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;
    text-transform: capitalize;
    font-size: 14px;
    color: #333;
  }