body {background-color:#edf2f9; padding-top: 60px;}
#sidebarMenu {min-width:200px;}
.bx {box-shadow: 2px 2px 18px rgba(0, 0, 0, 0.2);}
.imgHand {cursor:pointer;}
.card-border {box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2); border:0;}
.barra-superior {box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); background-color:#edf2f9; padding:8px;}
.icono_cabecera {margin-right:10px;}
.hover:hover {background-color: rgb(225, 242, 255);}

.form-switch {margin-left: 8px;}
.form-switch .form-check-input {width: 3em; height: 1.5em; margin-top:0px;}

.dataTableContentPendiente { color: #000000 !important; }
.dataTableContentEnProceso { color: #0000ff !important; }
.dataTableContentFinalizado { color: #008800 !important; font-weight: bold; }
.dataTableContentCancelado { color: #ff0000 !important; }
.dataTableContentNoFacturable { color: #008800 !important; }
.dataTableContentEnviadoPteReembolso { color: #CCCC00 !important; font-weight: bold; }

.div2Cols {display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 50%;}
.div2Cols > .label2Col {width: 120px; margin-left:4px;}
.div2Cols > .label2ColV {width: 80px; padding-left: 30px;}
.columnDir {flex-direction: row;}
.w2Cols {width: 50%;}

@media screen and (max-width: 1300px) {
  .div2Cols {width: 100%;}
  .div2Cols > .label2Col {width: 206px; margin-left:0px;}
  .div2Cols > .label2ColV {width: 90px; padding-left: 0px;}
}

@media screen and (max-width: 992px) {
  #tabla-principal-grupo {flex-direction: column;}
  #selected-card {align-self: center;}
}

@media screen and (max-width: 768px) {
  #cuerpoConMenu {flex-direction: column-reverse;}
  #tabla-principal{padding: 0!important;}
  .columnDir {flex-direction: column;}
  .w2Cols {width: 100%;}
  .div2Cols {width: 50%;}
  .div2Cols > .label2Col {width: 120px; margin-left:4px;}
  .div2Cols > .label2ColV {width: 80px; padding-left: 30px;}
  .cabProducts {margin-top: 30px;}
}

@media screen and (max-width: 576px) {
  .div2Cols {width: 100%;}
  .div2Cols > .label2Col {width: 206px; margin-left:0px;}
  .div2Cols > .label2ColV {width: 90px; padding-left: 0px;}
}

@media screen and (max-width: 400px) {
  #popupGrupoForm {flex-direction: column-reverse !important;}
  #divImgProdOferta {align-self: center; margin-bottom: 6px;}
}