/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css);


.main-section-dashboard {
  padding-top: 10px;
  /* padding-bottom: 100px; */
  margin-top: 60px;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .main-section-new {
      margin-top: 75px;
      margin-bottom: 100px;
    }

    .main-section-login {
      margin-top: 75px;
      margin-bottom: 100px;
    }

    .main-section-layanan {
        margin-top: 75px;
        /* margin-bottom: 100px; */
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .main-section-new {
      margin-top: 80px;
      margin-bottom: 100px;
    }

    .main-section-login {
      margin-top: 80px;
      margin-bottom: 100px;
    }

    .main-section-layanan {
        margin-top: 75px;
        /* margin-bottom: 100px; */
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .main-section-new {
        margin-top: 120px;
        margin-bottom: 100px;
    }

    .main-section-login {
        margin-top: 120px;
        margin-bottom: 100px;
    }

    .img-product {
        /* width: 100%;
        height: 12vw;
        object-fit: cover;
        border-radius: 2rem 2rem 0px 0px; */
        /*width: 100%;
        height: 200px;
        background-position:center center;
        background-repeat: no-repeat;*/
        border-radius: 2rem 2rem 0px 0px;
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 200px;
    }
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .main-section-new {
        margin-top: 140px;
        margin-bottom: 100px;
    }

    .main-section-login {
        margin-top: 140px;
        margin-bottom: 100px;
    }

    .main-section-layanan {
        padding-top: 10px;
        background-color: #E8E8E8;
        /* padding-bottom: 100px; */
        margin-top: 70px;
    }

    .img-product {
        /* width: 100%;
        height: 10vw;
        object-fit: cover; */
        /*width: 100%;
        height: 200px;
        background-position:center center;
        background-repeat: no-repeat;
        border-radius: 2rem 2rem 0px 0px;*/
        border-radius: 2rem 2rem 0px 0px;
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 200px;
    }

    .img-product-list {
        width: 15vw;
        height: 10vw;
        object-fit: cover;
    }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .main-section-new {
        margin-top: 140px;
        margin-bottom: 100px;
    }

    .main-section-login {
        margin-top: 92px;
        margin-bottom: 100px;
    }

    .main-section-layanan {
        padding-top: 10px;
        background-color: #E8E8E8;
        /* padding-bottom: 100px; */
        margin-top: 70px;
    }

    .img-product {
        /* width: 100%;
        height: 10vw;
        object-fit: cover; */
        /*width: 100%;
        height: 200px;
        background-position:center center;
        background-repeat: no-repeat;
        border-radius: 2rem 2rem 0px 0px;*/
        border-radius: 2rem 2rem 0px 0px;
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 200px;
    }

    .img-product-list {
        width: 15vw;
        height: 10vw;
        object-fit: cover;
    }
}

.nav-link {
  font-size: 1em;
}

main > .container {
  padding: 60px 15px 0;
}

/*.footer {
  background-color: #f5f5f5;
}*/

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

@media (min-width: 768px) {
	.bd-placeholder-img-lg {
	  font-size: 3.5rem;
	}
}

@media (min-width: 1200px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl {
	    max-width: 1380px;
	}
}

.bg-dark {
    background-color: #4d4d4d !important;
}

.footer {
    background-color: #fff;
}

.main {
    margin-top: 73px;
    margin-bottom: 70px;
}

.main-profile {
    margin-top: 25px;
    margin-bottom: 70px;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,1);
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: rgb(232 98 41);
}

.bg-dark {
    background-color: #4D4D4D !important;
}

/*.main-section-new {
    margin-top: 70px;
    margin-bottom: 100px;
}

.main-section-login {
    margin-top: 150px;
    margin-bottom: 100px;
}*/

/*.main-section-reg {
    margin-top: 100px;
    margin-bottom: 100px;
}*/

.bg-register {
    background-image: url('../../../assets/img/bg-register.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 110%;
}

.bg-custom {
    background-color: #E4E4E4;
}

.dropdown-menu {
  min-width: 7rem;
}

.img-sosmed {
  max-width: 25px;
}

.table-sosmed td {
  padding: 8px;
}

.border{
  border-bottom:1px solid #F1F1F1;
  margin-bottom:10px;
}
.main-secction{
  box-shadow: 10px 10px 10px;
}
.image-section{
  padding: 0px;
}
.image-section img{
  width: 100%;
  height:250px;
  position: relative;
}
.user-image{
  position: absolute;
  margin-top:-50px;
}
.button-banner {
  position: absolute;
  margin-top:-70px;
  margin-right: 100px;
}
.user-left-part{
  margin: 0px;
}
.user-image img{
  width:150px;
  height:150px;
}
.user-profil-part{
  padding-bottom:30px;
  /*background-color:#FAFAFA;*/
}
.follow{    
  margin-top:70px;   
}
.button-profile {
  margin-top:70px;   
  margin-left: 120px
}
.button-circle {
  border-radius: 45%;
}
.user-detail-row{
  margin:0px; 
}
.user-detail-section2 p{
  font-size:12px;
  padding: 0px;
  margin: 0px;
}
.user-detail-section2{
  margin-top:10px;
}
.user-detail-section2 span{
  color:#7CBBC3;
  font-size: 20px;
}
.user-detail-section2 small{
  font-size:12px;
  color:#D3A86A;
}
.profile-right-section{
  padding: 20px 0px 10px 15px;
  background-color: #FFFFFF;  
}
.profile-right-section-row{
  margin: 0px;
}
.profile-header-section1 h1{
  font-size: 25px;
  margin: 0px;
}
.profile-header-section1 h5{
  color: #0062cc;
}
.req-btn{
  height:30px;
  font-size:12px;
}
.profile-tag{
  padding: 10px;
  border:1px solid #F6F6F6;
}
.profile-tag p{
  font-size: 12px;
  color:black;
}
.profile-tag i{
  color:#ADADAD;
  font-size: 20px;
}
.image-right-part{
  background-color: #FCFCFC;
  margin: 0px;
  padding: 5px;
}
.img-main-rightPart{
  background-color: #FCFCFC;
  margin-top: auto;
}
.image-right-detail{
  padding: 0px;
}
.image-right-detail p{
  font-size: 12px;
}
.image-right-detail a:hover{
  text-decoration: none;
}
.image-right img{
  width: 100%;
}
.image-right-detail-section2{
  margin: 0px;
}
.image-right-detail-section2 p{
  color:#38ACDF;
  margin:0px;
}
.image-right-detail-section2 span{
  color:#7F7F7F;
}

.nav-link{
  font-size: 1.2em;    
}

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}
  
.text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.card-body {
  flex: 1 1 auto;
  min-height: 1px;
  padding: 0.75rem;
}

.line {
  border-bottom: 2px solid #9a9a9a;
  display:block;
}

.border-radius-none {
  border-radius: 0px;
}

.btn-warning {
  color: #fff;
  background-color: #F26300 !important;
  border-color: #fff;
}

.bg-warning {
    background-color: #F26300 !important;
}

.text-warning {
  color: #F26300 !important;
}

a.text-warning:focus, a.text-warning:hover {
  color: #ff8b3b!important;
}

.btn-outline-warning {
  color: #F26300;
  border-color: #F26300;
}

.btn-outline-warning:hover {
  color: #FFF;
  border-color: #F26300;
  background-color: #F26300;
}

.rounded-pill {
  border-radius: 2rem!important;
}

.img-product {
  /*width: 100%;
  height: 200px;*/
  /*object-fit: cover;*/
  /*background-position:center center;
  background-repeat: no-repeat;
  border-radius: 2rem 2rem 0px 0px;*/
  border-radius: 2rem 2rem 0px 0px;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 200px;
}

.img-featured {
  width: 100%;
  height: 200px;
  background-position:center center;
  background-repeat: no-repeat;
  /*object-fit: cover;*/
  border-radius: 2rem 0px 0px 2rem;
}

.vl {
  border-left: 1px solid rgba(0,0,0,.125);
  height: 20px;
}

.vl-2 {
  border-left: 1px solid rgba(0,0,0,.125);
  height: 105px;
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #ced4da!important;
}

.btn-secondary-new {
  color: #fff;
  background-color: #ced4da!important;
  border-color: #ced4da!important;
}

.bg-modal {
  background-color: #666666;
  color: #ffffff;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #e86229;
  border-color: #e86229;
}

.img-banner {
  width: 1920px;
  height: 515px;
  background-position:center center;
  background-repeat: no-repeat;
}

.img-trx {
  width: 140px;
  height: 100px;
  background-position:center center;
  background-repeat: no-repeat;
}

.img-product-comment {
  width: 50px;
  height: 50px;
  background-position:center center;
  background-repeat: no-repeat; 
  object-fit: cover;
}

.img-profile-comment {
  width: 30px;
  height: 30px;
  background-position:center center;
  background-repeat: no-repeat; 
  object-fit: cover;
}