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

.mosaic-model {
    width: 70% !important;
    height: 100% !important;
}

.img-box {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: contain;
}

.modal-mosaic {
    width: 100%;
    height: auto;
}

.box-col-xs-12 {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
}

.box-col-ms-12 {
    height: 30rem;
}

.between-col {
    flex-direction: column;
    justify-content: space-between;
}

.box-col-xs-6 {
    width: 100%;
}

.box-col-ms-6 {
    height: 12rem;
}

.col-md-3 {
    width: 45%;
}

.box-col-xs-12 {
    height: 25rem;
}

.box-col-xs-3 {
    width: 95%;
}

.box-col-ms-3 {
    height: 12rem;
}

.border-all-gray {
    border-radius: 3px;
}

.clear-box {
    padding: 0 !important;
}

.clear-box-margin {
    margin: auto 0px;
}

.clear-box-content {
    justify-content: right;
}


.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.ghost {
  opacity: 0.5;
}
.list-group {
  min-height: 20px;
}
.list-group-item {
  cursor: move;
}
.list-group-item i {
  cursor: pointer;
}

.grid-container {
  display: grid;
  gap: 10px;
  padding: 10px;
  height: 500px;
}
.grid-item {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  max-width:100%;
  height:auto;
  font-size: 30px;
}

.grid-template-1{
  grid-template-areas:
    'mos1 mos1 mos1 mos1 mos2 mos2 mos2 mos2'
    'mos1 mos1 mos1 mos1 mos3 mos3 mos4	mos4';
}

.grid-template-2{
  grid-template-areas:
    'mos1 mos1 mos1 mos1 mos2 mos2 mos4 mos4'
    'mos1 mos1 mos1 mos1 mos3 mos3 mos4	mos4';
}

.grid-template-3{
  grid-template-areas:
    'mos1 mos1 mos3 mos3 mos3 mos3 mos4 mos4'
    'mos2 mos2 mos3 mos3 mos3 mos3 mos5	mos5';
}

.grid-template-4{
  grid-template-areas:
    'mos1 mos1 mos3 mos3 mos4 mos4 mos5 mos5'
    'mos2 mos2 mos3 mos3 mos4 mos4 mos6	mos6';
}

.item1 { grid-area: mos1; }
.item2 { grid-area: mos2; }
.item3 { grid-area: mos3; }
.item4 { grid-area: mos4; }
.item5 { grid-area: mos5; }
.item6 { grid-area: mos6; }

/*.edit{*/
/*  left: 40%;*/
/*  z-index: 1;*/
/*  border: 0;*/
/*  visibility: hidden;*/
/*}*/
/*.grid-item:hover .edit {*/
/*  visibility: visible;*/
/*}*/

.trash{
  right: 5px;
  top: 5px;
  z-index: 1;
  border: 0;
  visibility: hidden;
}
.edit{
  right: 5px;
  top: 25px;
  z-index: 1;
  border: 0;
  visibility: hidden;
}

.grid-item:hover .edit {
  visibility: visible;
}

.grid-item:hover .trash {
  visibility: visible;
}



