/*NEW CUSTOM CSS FOR DINAMIK*/

.navbar-scrolled [data-navbar="fixed"] {
    background-color: rgb(50, 52, 51);
}

.bg-dynamics {
    background-color: 'rgb(117, 82, 59)';
    border: 1px solid;
    border-radius: 100%;
    padding: 13px; 
    border-color:  'rgba(249, 247, 242, .1)';
    
}
.asd:hover {
    color: red;
    font-style: italic;
}

.dynamics-shadow {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.36);
}

.dynamics-shadow-green {
    box-shadow: 0 0 7px rgba(172, 212, 59, 0.96);
}

.dynamics-image-fit-cover {
    object-fit: cover;
}

.dynamics-image-product {
    height: 100vw;
    width: 100%;
}

.dynamics-image-success-cart {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.dynamics-border-divider {
    border-bottom: 10px solid #f1f2f3;
}

.dynamics-border-divider-small {
    border-bottom: 6px solid #f1f2f3;
}

.dynamics-border-divider-small-margin {
    border-bottom: 6px solid #f1f2f3;
    padding-top: 5vw;
    padding-bottom: 5vw;
}

.dynamics-bg-light-dark{
    background-color: rgb(220, 220, 220);
}

.dynamics-searchbar{
    background-color: rgb(68, 68, 68);
    border-radius: 15px 0 0 15px !important;
}

.form-control.dynamics-searchbar {
    /* height: 23px; */
}

.input-group-text.dynamics-searchbar {
    padding-right: 0;
    border-radius: 0 15px 15px 0 !important;
}

.dynamics-searchbar {
    transition: all 0.3s ease-out;
}

.form-control:focus + .input-group-append .input-group-text.dynamics-searchbar {
    background-color: white;
}

.input-group-text.dynamics-searchbar i {
    padding: 5px 15px 5px 0;
    /* border: none; */
}

.dynamics-navbar {
    background-color: rgb(50, 52, 51);
    top: 0;
}

.dynamics-btn-green {
    background-color:  rgb(172, 212, 59);
}

.dynamics-btn-grey {
    background-color:  rgb(121, 121, 121);
}

.dynamics-outline-green {
    border: 1px solid rgb(172, 212, 59);
}

.dynamics-text-green {
    color: rgb(172, 212, 59);
}

.dynamics-text-grey {
    color: rgb(121, 121, 121);
}

.dynamics-fs-17 {
    font-size: 1.7em;
}

/* CSS Button Bawah */
.dynamics.dynamics-button.dynamics-active {
    margin-top:-20px
}

.dynamics.dynamics-button.dynamics-active .dynamics-button-logo-wrapper {
    position: relative;
}

.dynamics.dynamics-button.dynamics-active .dynamics-button-logo-wrapper .dynamics-button-logo-frame {
    position:relative;
    background-color: rgb(172, 212, 59);
    border: 2px solid white;
    border-radius: 100%;
    height:50px;
    width: 50px;
    box-shadow: 2px 2px #888888;
    left: 20%
}

.dynamics.dynamics-button.dynamics-active .dynamics-button-logo-wrapper .dynamics-button-logo-frame .dynamics-button-logo {
    position: relative;
    top:25%;
    color: white !important;
}

/* css button sort */
.sort .active span {
    color:  rgb(172, 212, 59);
    font-weight: 500;
}

.sort span i.fa{
    display: none;
}

.sort .active span i.fa{
    display: block;
}

.dynamics-overflow-slide {
    overflow-x: auto;
    flex-wrap: nowrap;
}

.dynamics-overflow-slide > .col-6{
    display: inline-block;
    float: none;
}
/* CSS Halaman Logo */
.dynamics.logo-page{
    background-color: rgb(68, 68, 68) ;
    align-items: center;
    display: flex;
}

.dynamics.logo-page.logo{
    width: 40%;
}

/* CSS Halaman Logo */
.form-control.login-form{
    background-image: linear-gradient(#acacac, #acacac),linear-gradient(#eaeff4, #eaeff4) !important
}

.form-control.login-form:focus{
    color: #bbb
}

.login-form{
    padding: 5vw;
}

.login-button{
    background-color: #658a3c;
    border-color: #658a3c;
    width: 50%;
    padding-top: 1px;
    padding-bottom: 0px;
}

.dynamics-voucher-check {
    opacity: 0;
}

.dynamics-voucher, .dynamics-voucher * {
    transition: background-color 0.5s ease, opacity 0.5s ease;
}

.dynamics-voucher.active .dynamics-voucher-wing {
    background-color: #3cd458 !important;
}

.dynamics-voucher.active .dynamics-voucher-check {
    opacity: 1;
}

.dynamics-payment-check {
    opacity: 0;
}

.dynamics-payment, .dynamics-payment * {
    transition: background-color 0.5s ease, opacity 0.5s ease;
}

.dynamics-payment.active .dynamics-payment-wing {
    background-color: #ffba00 !important;
}

.dynamics-payment.active .dynamics-payment-check {
    opacity: 1;
}

/* CSS Halaman Notification */
.dynamics.notification-page{
    background-color: rgb(220, 219, 217) ;
}

.dynamics.notification-bar{
    padding-left: 10vw;
    padding-top: 0.5vw;
    color: white;
    background-color: rgb(68, 68, 68);
    border-radius: 50px;
    font-size: 80%;
    height: 7.1vw;
}

.notification-page.dynamics-notification{
    z-index: 100;
    position: absolute;
}

.notification-page.layout{
    padding-top: 5vw;
    padding-bottom: 5vw;
    background-color: white;
    color: black;
    padding-left: 8px;
    padding-right: 8px;
}

.notification-page.day{
    padding-top: 1vw;
    padding-bottom: 1vw;
    color: white;
    font-size: 80%;
}

.notification-page.question-logo{
    width: auto;
}

.notification-page.desc{
    font-size: 70%;
    margin-top:-7px;
    color: rgb(121, 121, 121);
}

.notification-page.green-cart{
    background-color: rgb(172, 212, 59);
    border-radius: 100%;
    color: white;
    width: 31px;
    margin-left: 2px;
}

.notification-page.grey-cart{
    background-color: rgb(121, 121, 121);
    border-radius: 100%;
    color: white;
    width: 31px;
    margin-left: 2px;
}

.truncate{
    width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

hr 
{
    margin: 1rem;
    border: 0;
    border-top: 2px solid rgba(220, 219, 217, 1);
}

/* CSS Halaman Profile */
.profile-page.image-div{
    background-color: rgb(68, 68, 68);
    color: white;
    padding: 3vw;
    padding-left: 3vw;
    padding-right: 3vw;
}

.profile-page.profile-image{
    border-radius: 50%;
    height: 60px;
    width: 60px;
}

.profile-page.icon{
    width: 20px;
    height: 20px;
    color: rgb(68, 68, 68)
}

/* CSS Halaman Account Detail */
.account-page.layout{
    padding: 5vw;
    background-color: white;
    color: black;
}

.account-page.profile-image{
    padding: 2vw;
    border-radius: 50%;
    height: 120px;
    width: 120px;
}

.account-page.desc{
    font-size: 70%;
    color: rgb(121, 121, 121) !important;
    font-style: italic;
    margin-top: -5px;
}

.account-page.layout2{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    color: rgb(68, 68, 68);
}

.account-page.icon{
    width: 15px;
    height: 15px;
    color: rgb(68, 68, 68)
}

/* CSS Halaman Account Detail Edit */
.small-form{
    border: 1px solid rgb(68, 68, 68);
    height: 6vw;
}

.save-button{
    background-color:  rgb(172, 212, 59);
    border-color:  rgb(172, 212, 59);
    width: 70%;
    font-size: 4vw;
    padding-top: 1px;
    padding-bottom: 0px;
}

.border-voucher{
    border: 1px solid rgb(121, 121, 121);
    border-style: dashed;
}
.border-voucher{
    border: 15px solid #bbb; 
    border-radius: 50%;
}

.chat-float-right {
    position: fixed;
    z-index: 1001;
    right: 6%;
    bottom: 13%;
}

.chat-float-right-2 {
    position: fixed;
    z-index: 1001;
    right: 5%;
    bottom: 5%;
}

.text-field-chat {
    position: fixed;
    z-index: 1001;
    bottom: 0%;
}

.sender-bubble{
    background-color: #658a3c;
    color: white;
}

.admin-bubble{
    background-color:  rgb(172, 212, 59);
    color: rgb(68, 68, 68);
}

#toast-container>div{
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

body #toast-container > div {
    opacity: 1;
}

.circle-red { 
    width: 140px;
    height: 140px;
    background: red; 
    -moz-border-radius: 70px; 
    -webkit-border-radius: 70px; 
    border-radius: 70px;
 }