.wrapper-page-number, .wrapper-data-number {
    text-align: center;
}

.text-elipsis {
    overflow: hidden;
    max-width: 100% !important;
    max-height: 17px;
    white-space: pre-wrap;
    word-break: break-word;
    text-overflow: ellipsis;
}

.pb0 {
    padding: 5px 5px 0px 5px;
}

.w23 {
    width: 23%;
}
.slideshow-wc {
	/* display: flex;
	align-items: center;
	justify-content: center; */
	overflow: hidden;
	position: relative;
    height: calc(100vh - 58.4px);
}

.hauto {
    height: auto;
}

.jcc {
    justify-content: center;
}

.detail-info-domba {
    font-size: 10pt;
}

.slideshow-wc .slide-wc {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	height: 100%;
	width: 100%;
	transform: scale(1.05);
	transition: opacity 6s ease;
}

.slideshow-wc .slide-wc::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.41) 50%,rgba(0,0,0,0.4) 50%,rgba(0,0,0,0.1) 100%);
}

.slideshow-wc .slide-wc.active {
	animation: grow 8s linear forwards;	opacity: 1;
}

@keyframes grow {
	0%, 25% {
		transform: scale(1);
	}
	
	75%, 100% {
		transform: scale(1.05);
	}
}

.slideshow-wc .blok-msg {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}

.slideshow-wc .msg {
    position: relative;
    z-index: 2;
    width: 80%;
    margin: 0 auto;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    color: #fff;
}

.slideshow-wc .msg .text1 {
    font-size: 60px;
    line-height: 68px;
    font-weight: 500;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.slideshow-wc .msg .text2 {
    font-size: 28px;
    line-height: 38px;
    letter-spacing: 1px;
}

.slideshow-wc .msg button {
    letter-spacing: 2p;
    border-radius: 4px;
    margin: 20px 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #34a400;
    background-color: #fff;
    border: 1px solid #fff;
    vertical-align: top;
    padding: 12px 18px;
    text-transform: uppercase;
   transition: all .2s ease-in;
}

.slideshow-wc .msg button:hover {
    background: #34a400;
    border-color: #34a400;
    color: #fff;
}

.slideshow-wc .addr-contact {
    position: absolute;
    bottom: 0;
    padding: 10px;
    background-color: #0009;
    width: 100%;
    display: flex;
    align-items: center;
}

.slideshow-wc .addr-contact a {
   color: #fff;

}

.slideshow-wc .addr-contact .blok-addr {
    width: 65%;
}

.slideshow-wc .addr-contact .blok-contact {
    width: 35%;
    text-align: right;
}

.blok-content {
    width: auto;
}


.blok-jenis-domba .title {
    letter-spacing: 1px;
    color: #34a400;
    font-size: 28pt;
    font-weight: 600;
    line-height: 38px;
    margin: 50px 0 25px;
    text-align: center;
}

.pa {
    display: none;
}

.jenis-domba {
    width: 10%;
    padding: 10px;
}

.jenis-domba:hover {
    cursor: pointer;
}

.jenis-jenis-domba img {
    width: 100%;
}

table.data-domba {
    display: none;
}
.foto-domba-asli {
    cursor: pointer;
}

.foto-domba-asli.active,
.foto-domba-asli:hover,
.list-data-domba-asli.active .text,
.list-data-domba-asli:hover,
.jenis-domba-new:hover {
    /* color: #34a400;
    text-shadow: 0px 0px 10px #34a400; */
    transform: scale(1.1);
    transition: all .2s ease-in;
}

.list-data-domba-asli .text-bc, .jenis-domba-new div {
    padding: 5px;
    font-weight: bold;
    font-size: 13pt;
    border-radius: 5px;
    cursor: pointer;
}

.jenis-domba-new {
    margin: 3px 0px;
}

.filter-jk {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 25px auto;
}

.btn-jk {
    border-radius: 4px;
    color: #34a400;
    background-color: transparent;
    border: 1px solid #34a400;
    text-transform: uppercase;
    padding: 8px 15px;
    text-align: center;
    transition: all .2s ease-in;
    margin: 0 10px;
}

.btn-jk.active,
.btn-jk:hover {
    cursor: pointer;
    color: #fff;
    background-color: #34a400;
}

.btn-disabled {
    border-radius: 4px;
    background-color: #dee2e6;
    border: 1px solid #dee2e6;
    text-transform: uppercase;
    padding: 8px 15px;
    text-align: center;
    margin: 0 10px;
}

.btn-disabled:hover {
    cursor: not-allowed;
}

.blok-list-domba {
    display: flex;
    flex-wrap: wrap;
}

.blok-list-domba.more {
    justify-content: left;
}

.blok-list-domba.less {
    justify-content: center;
}

.blok-list-domba .blok-domba {
    width: 16.66667%;
    padding: 5px;
}


.blok-list-domba .blok-domba:hover {
   cursor: pointer;
}

.blok-domba .card-body {
    padding: 10px;
}

.blok-domba .nama {
    color: rgba(15, 15, 15, 0.88);
    font-size: 14pt;
    font-weight: bolder;
    line-height: 1;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-bottom: 2px;
}

.blok-domba .jenis {
    font-size: 10pt;
    margin: 0px 0px;
}

.blok-domba .harga {
    color: #dc3545;
    font-size: 16pt;
    font-weight: bolder;
}

.blok-domba .jk {
    font-size: 10pt;
    color: #6D7588;
    margin: 5px 0px;
}

.blok-domba .jk i {
    color: #dc3545;
    margin-right: 2px;
}

.blok-domba .blok-action {
    display: flex;
    align-items: center;
}

.blok-domba a {
    width: calc(100% - 32px);
}

.blok-domba .btn-info,
.blok-domba .btn-add-cart {
    width: 35px;
    border: 1px solid #606060;
    background-color: transparent;
    color: #606060;
    margin-left: 4px;
    padding: 6px;
}

.detail-info-domba {
    display: flex;
    padding : 2px;
}

.detail-info-domba .title, .title {
    font-size: 14pt;
    font-weight: bolder;
    margin-bottom: 5px;
}

.detail-domba {
    width: 50%;
    padding: 5px;
}

.detail-domba .desc {
    display: flex;
    align-items: center;
    padding: 5px 0px;
    border-bottom: 1px solid #dee2e6;
}

.detail-domba .desc .left {
    width: 50%;
    font-weight: bold;
}

.detail-domba .desc .left i {
    color: #34a400;
}

.detail-domba .desc .right {
    width: 50%;
    text-align: right;
    font-weight: bolder;
}

.info-domba {
    /* width: 50%; */
    padding-left: 10px;
}

.info-domba .desc {
    display: flex;
    padding: 5px 0px;
}

.info-domba .left {
    margin-right: 10px;
    height: 32px;
    min-width: 32px;
    background: #dee2e6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.info-domba .text1 {
    font-weight: 600;
}

.info-domba .text2 {
    font-weight: bolder;
    font-size: 14pt;
    line-height: 1;
}

.data-domba-kosong {
    letter-spacing: 1px;
    color: #34a400;
    font-size: 28pt;
    font-weight: 600;
    line-height: 38px;
    margin: 50px 0;
    text-align: center;
}

/* .is-animated { */
    /* opacity: 0; */
    /* transform: translateY(10%);
    transition: opacity 0.7s, transform 0.7s; */
/* } */

.is-animated.scrolled-into-view {
    opacity: 1;
    /* transform: translateY(0);
    transition: opacity 0.7s, transform 0.7s; */
}

[data-hover]::after {
    content: attr(data-hover);
    color: white;
    background-color: rgba(15, 15, 15, 0.8);
    padding: 5px 8px;
    white-space: nowrap;
    z-index: 999;
    visibility: hidden;
    position: absolute;
    left: -10px;
    bottom: calc(100% + 7px);
    border-radius: 4px;
    font-size: 0.875rem;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

[data-hover]::before {
    position: absolute;
    left: 50%;
    top: auto;
    margin: -12px 0px 0px -6px;
    width: 0;
    height: 0;
    border: solid transparent;
    border-top-width: medium;
    border-top-color: transparent;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
    border-width: 5px;
    border-top-color: rgba(15, 15, 15, 0.8);
    content: "";
    pointer-events: none;
    visibility: hidden;
}

.mySlides {
    display: block;
    width: 20%;
    padding: 5px;
}

.slideshow-container {
    display: block ruby !important;
}

.flex.idomba {
    display: flex;
}

@media (max-width: 767px) {
    
    .blok-content {
        width: 100%;
    }

    .wrapper-page-number, .wrapper-data-number {
        margin-top: 20%;
    }

    .toggle-css {
        width: 95px;
    }

    .blok-jenis-domba .title {
        margin: 50px 0px 0px 0px;
    }
    
    .idomba {
        display: flex;
    }

    .mySlides {
        width: 40%;
    }

    .wrapper-data-number {
        margin-top: 40px;
    }

    .slideshow-wc {
        height: calc(100vh - 48px);
        display: none;
    }

    .slideshow-wc .msg {
        width: 95%
    }

    .slideshow-wc .msg .text1 {
        font-size: 31px;
        line-height: 44px;
    }
    
    .slideshow-wc .msg .text2 {
        font-size: 22px;
        line-height: 28px;
        margin: 0 0 25px;
    }

    .slideshow-wc .addr-contact a {
        font-size: 10pt;
    }

    .blok-content {
        width: calc(100% - 10px);
    }

    .list-jenis-domba {
        overflow: auto;
        margin: -15px -5px;
    }

    .list-jenis-domba.more {
        display: block ruby;
    }

    .list-jenis-domba.less {
        justify-content: center;
    }

    .jenis-domba {
        width: 33.3334%;
        padding: 10px 2px;
        margin: 15px 5px;
    }

    .filter-jk {
        font-size: 10pt;
        width: 100%;
        justify-content: center;
    }

    .btn-jk,
    .btn-disabled {
        padding: 8px 2px;
        margin: 0px 2px;
        width: 33.3334%;
    }

    .blok-list-domba .blok-domba, .wm50 {
        width: 50% !important;
    }

    .wm98 {
        width: 98% !important;
    }

    .wm100 {
        width: 100%;
    }

    .h136 {
        height: auto;
    }

    .detail-info-domba {
        display: block;
    }

    .detail-domba {
        width: 50%;
        padding-right: 0;
        margin-bottom: 0;
        font-size: 85%;
    }

    .info-domba {
        width: 100%;
        padding-left: 0px;
    }

    table.data-domba {
        margin-top: 20px;
    }

    .jenis-jenis-domba li {
        width: 25% !important;
    }

    .jenis-jenis-domba {
        width: 680px;
        /* height: 200px; */
        overflow: scroll;
        flex-wrap: inherit !important;
        padding: 20px;
    }

    table.data-domba tbody td {
        font-size: 8pt;
    }
    
    .arrow {
        visibility: visible !important;
        opacity: 1 !important;
    }

    .fsm8 {
        font-size: 8pt;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .wm100 {
        width: 50%;
    }

    .button-swicth {
        font-size: 8pt;
    }

    .blok-swicth {
        font-size: 60% !important;
    }
}

.arrow {
    opacity: 0;
    visibility: hidden;
}

.jenis-jenis-domba {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: center;
    align-content: center;
}

.new-domba {
    margin: 2% 5%;
}

.jenis-jenis-domba li {
    margin: 0;
    width: 10%;
    text-align: center;
}

.jenis-jenis-domba li img {
    width: 100%;
}

.jenis-jenis-domba::before {
    position: absolute;
    left: 50%;
    top: auto;
    margin: -15px 0px 0px -10px;
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 5px;
    border-bottom-color: #fff;
    content: "";
    pointer-events: none;
}

/* HISTORY DOMBA */
.data-history {
    max-height: 215px;
    overflow: auto;
    scrollbar-width: thin;
}

ul.history {
    list-style: none;
    margin: 0;
}

ul.history li {
    margin-left: 0;
    display: flex;
    grid-gap: 15px;
    position: relative;
    padding: 8px;
}

ul.history li::before {
    content: "";
    position: absolute;
    inset:  10px auto -10px 137px;
    border-left: 1px dashed #efc032;
}

ul.history li .tanggal {
    position: relative;
    color: #34a400;
    margin-right: 50px;
    font-size: 14pt;
    font-weight: bolder;
    width: auto;
}

ul.history li .tanggal::after {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 50%;
    background: #7DBB02;
    background: #34a400;
    border: 5px solid #fff;
    box-shadow: 0px 3px 10px #0003;
    position: absolute;
    top: -5px;
    left: 115px;
}

ul.history li:last-child::before {
    display: none;
}

ul.history li .isi-history {
    text-align: justify;
}
p.peringatan {
    font-size: 15pt;
    font-weight: bold;
    color: red;
    text-align: center;
}

.flex-w {
    display: flex;
    flex-wrap: wrap;
}

.pengobatan-domba, .pemeliharaan-domba, .penimbangan-domba {
    display: none;
}

.image-domba img:hover {
    opacity: 0.7;
    cursor: zoom-in;
}

.mySlides img:hover {
    opacity: 0.7;
    cursor: zoom-in;
}

.wm100 {
    padding: 20px;
}

.image-domba {
    justify-content: center;
}

.scroll {
    max-height: 300px;
    overflow: auto;
    scrollbar-width: thin;
}

.scroll-tabel {
    max-height: 183px;
    overflow: auto;
    scrollbar-width: thin;
}

div.text-bc {
    background: rgb(52, 164, 0);
    color: white;
}