/* Margin */
.m-t-0 {
    margin-top: 0px;
}
.m-t-10 {
    margin-top: 10px;
}
.m-t-20 {
    margin-top: 20px;
}

.m-b-0 {
    margin-bottom: 0px;
}

.m-b-10 {
    margin-bottom: 10px;
}

.m-b-20 {
    margin-bottom: 20px;
}

/* Padding */
.p-t-0 {
    padding-top: 0px;
}
.p-t-10 {
    padding-top: 10px;
}
.p-t-20 {
    padding-top: 20px;
}
.p-t-30 {
    padding-top: 30px;
}
.p-t-40 {
    padding-top: 40px;
}

.p-b-0 {
    padding-bottom: 0px;
}

.p-b-10 {
    padding-bottom: 10px;
}

.p-b-20 {
    padding-bottom: 20px;
}

.p-r-0 {
    padding-right: 0px;
}

.p-r-10 {
    padding-right: 10px;
}

.p-r-20 {
    padding-right: 20px;
}

.p-r-30 {
    padding-right: 30px;
}

.p-l-0 {
    padding-left: 0px;
}

.p-l-10 {
    padding-left: 10px;
}

.p-l-20 {
    padding-left: 20px;
}

.p-l-30 {
    padding-left: 30px;
}

.p-l-40 {
    padding-left: 40px;
}

.p-l-50 {
    padding-left: 50px;
}

.p-l-60 {
    padding-left: 60px;
}

/* Color Of Text */
.text-white {
    color: #ffffff;
}

.text-black {
    color: #000000;
}

.text-yellow {
    color: #c7da2c;
}

/* Copyright Hide */
.highcharts-credits {
    display: none;
}

@media(min-width: 768px) {
    .p-l-responsive {
        padding-left: 0px;
    }
}

.modal-dialog {
    margin-top: 10%;
}

.modal-custom {
    position: relative;
    margin: auto;
    padding: 0;
    border: 1px solid #888888;
    border-radius: 4px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

.modal-custom-small {
    width: 70%;
}

.modal-custom-background {
    background-image: url(/assets/images/bg-batik.png), linear-gradient(-360deg, #9d9d9d, #ffffff);
    background-position: 0% 0%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 90%, 100%;
}

.modal-custom .modal-header {
    border-bottom: none;
}

.modal-custom .modal-footer {
    border-top: none;
}

.modal-custom .modal-body {
    position: relative;
    padding: 2px 34px;
    padding-top: 42px;
}

.avatar {
    position: absolute;
    width: 140px;
    height: 140px;
    background-color: white;
    left: 50%;
    top: 0%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    color: white;
    padding: 0px;
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}