*{
  padding: 0;
  margin: 0;
}

html,body{
  height: 100%;
  background-color: #E8E8E8;
  font-family: 'roboto';
}

.wrapper{
  min-height: 100%;
}

.main{
padding-bottom: 60px;
}

/* footer {
  padding: 25px;
  bottom: 0px;
  width: 100%;
  height: 70px;
  color:white;
} */

.footer {
  padding: 20px;
  bottom: 0px;
  color:white;
    width: 100%;
  position: relative;
  height: 60px;
  clear: both;
}

span{
  font-family: 'roboto';
}

textarea {
  resize: none;
}


.like-button{
  border:none ;
  background-color: transparent;
}

.row-margin{
  margin-top : 2rem;
}

.widget{
  -webkit-box-shadow: -1px 9px 40px -12px rgba(0,0,0,1);
  -moz-box-shadow: -1px 9px 40px -12px rgba(0,0,0,1);
  box-shadow: 1px 2px 8px -6px rgba(0,0,0,1);
  border-style: solid;
  border-width: 1px;
  border-color: #C0C0C0;
}



.card-spacing{
  margin-top: 3%;
  margin-bottom: 9%;
}

.card-style{
margin-top: 15%;
margin-bottom: auto;
width: 400px;
-webkit-box-shadow: -1px 9px 40px -12px rgba(0,0,0,1);
-moz-box-shadow: -1px 9px 40px -12px rgba(0,0,0,1);
box-shadow: 5px 5px 8px -6px rgba(0,0,0,1);
opacity: .9;
}


@media screen and (min-width: 768px){
  .searchstyle{
    width: 25rem !important;
  }
  .card-holder > img {
    width: auto;
    height:11rem;
  }
  .black-container{
    height: 19rem;
    width: auto;
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    background-color: black;
  }
  .stick{ /*PC only*/
    position: -webkit-sticky;
    position: sticky;
    top: 7rem;
  }
  .card-body-css{
    height: 10rem;
  }

  .card-body-css{
    display: block;

     overflow: hidden;
     margin-bottom: 10%;
  }
}

@media screen and (max-width: 767px){
  .searchstyle{
    width: auto !important;
  }
  /*
  card body size more mobile
  */
  .card-body-css{
    display: none;
  }
  .card-header > b{
    height: 40px;
    font-size: 75%;

  }
  .card-footer > .like-button{
    font-size: 65%;
      display: grid;
      float: left;
  }
  .card-holder > img{
    width: auto;
    height: 7rem;
  }
  .black-container{

    height: 13rem;
    width: auto;
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    background-color: black;
  }
  .title-size > h1{
     margin-top: 4%;
  }
}

.find-image{
  height: 1rem;
}

.no-item{
  background-color : #FDA0A0;
  border-radius : 3px;
  border-style : solid;
  border-color : red;
  border-width : 1px;
  padding: 15px;
}

#previewing{
  height:14rem; /* might change*/
  width:19rem;
}

#card-hack > .card-holder > img:hover{
    -webkit-filter: brightness(70%);
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    transition: all 0.35s ease;
    cursor: pointer;
    -webkit-transform: scale(1.2);
}

#card-hack > .card-holder > img{
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    transition: all 0.35s ease;
    cursor: pointer;
    -webkit-transform: scale(1);
}

#card-hack > .card-holder{
  overflow: hidden;
}



.card-horizontal {
    display: flex;
    flex: 1 1 auto;
}

.modal-body p {
    word-wrap: break-word;
}

.dotHover:hover{
  color: blue;
  text-decoration: underline;
}

.box > img {
  width: 100%;
  height: 100%;
}

.textbox-custom{
  max-height: 50%;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.custom-file-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal {
  overflow-y:auto;
}

.recommendedEllipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.recommended:hover{
  cursor: pointer;
}

.recommended:hover > .recommendedImage > img{
  -webkit-filter: brightness(70%);
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  transition: all 0.35s ease;

  -webkit-transform: scale(1.2);
}

.recommended > .recommendedImage > img{
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  transition: all 0.35s ease;
  cursor: pointer;
  -webkit-transform: scale(1);
}

.recommendedImage{
  overflow: hidden;
}