/* Vertical scrollbar always visible */
html {
    overflow-y: scroll;
}
/* END  */

.pt-row-sm {
    padding-top: 0.75rem !important;
}

.fs-xs {
    font-size : 11px;
}

.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px !important;
}

.tx-20 {
    font-size: 20px;
}

.tx-25 {
    font-size: 25px !important;
}

.text-justify {
    text-align: justify;
}

.fi-12 {
    width: 12px;
    height: 12px;
}

.fi-14 {
    width: 14px;
    height: 14px;
}

.fi-15 {
    width: 15px;
    height: 15px;
}

.fi-16 {
    width: 16px;
    height: 16px;
}

.fi-17 {
    width: 17px;
    height: 17px;
}

.fi-19 {
    width: 19px;
    height: 19px;
}

.fi-22 {
    width: 22px;
    height: 22px;
}

.fi-25 {
    width: 25px;
    height: 25px;
}

.fi-27 {
    width: 27px;
    height: 27px;
}

.fi-28 {
    width: 28px;
    height: 28px;
}

.fi-35 {
    width: 35px;
    height: 35px;
}

.fi-50 {
    width: 50px;
    height: 50px;
}

.fi-60 {
    width: 60px;
    height: 60px;
}

.fi-80 {
    width: 80px;
    height: 80px;
}

.fi-100 {
    width: 100px;
    height: 100px;   
}

.w-4 {
    width : 4em !important;    
}

#profile_pict_user_asal, #profile_pict_user_tujuan {
    max-width: 65px !important;
    height: auto !important;
}

.ht-85 {
    height: 85px;
}

.ht-110 {
    height: 110px !important;
}

.ht-350 {
    height: 350px !important;
}

.ht-380 {
    height: 380px !important;
}

.ht-420px {
    height: 420px !important;
}

.ht-100p {
    height: 100% !important;
}

/*.mt-2 {
    margin-top: 2px !important;
}*/

.mt-n15 {
    margin-top: -15px;
}

.mt-n25 {
    margin-top: -25px;
}

.mt-n30 {
    margin-top : -30px;
}

.mt-31 {
    margin-top : 31px;
}

.mt-35 {
    margin-top: 35px;
}

.bg-aqua {
    background: #9df0e1 !important;
}

.border-right-rad-0 {
    border-top-right-radius: 0;
    border-bottom-right-radius : 0;
}

.border-left-rad-0 {
    border-top-left-radius: 0;
    border-bottom-left-radius : 0;
}

/* Plug-in Loader */
/* https://cssloaders.github.io/  */
.loader1 {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #FF3D00; /* Red */
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader2 {
    width: 38px;/*48px;*/
    height: 38px;/*48px;*/
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid #597FFD; /* Blue */
    border-right: 4px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader2::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;/*48px;*/
    height: 38px;/*48px;*/
    border-radius: 50%;
    border-bottom: 4px solid #006142; /* Green */
    border-left: 4px solid transparent;
}

.loader3 {
    width: 18px;/*48px;*/
    height: 18px;/*48px;*/
    border-radius: 50%;
    display: inline-block;
    border-top: 2px solid #597FFD; /* Blue */
    border-right: 2px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader3::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;/*48px;*/
    height: 18px;/*48px;*/
    border-radius: 50%;
    border-bottom: 2px solid #006142; /* Green */
    border-left: 2px solid transparent;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* END */

/* Float Action Button */
.fab{
    position:fixed;
    bottom: 50px;
    right: 25px;
    box-shadow: 2px 2px 3px #999;
}
/* END */

/* Filter RightSide */
.slideout {
    position: fixed;
    width: 300px;
    /*width: 500px;*/
    height: 100%;
    left: 100%;
    top: 10%;
    transition: left .3s ease-out;
    z-index: 200;
}

.slideout.active {
    left: 77%;
    /*left: 63%;*/
}

.handle {
    position: absolute;
    top: 10px;
    left: -75px;
    cursor: pointer;
}

.filter_container {
    position: absolute;
    /*background: #7671f1;*/
    background: #f9fafb;
    width: 100%;
    min-height: 200px;
    border-radius: 5px;
    border: 5px solid #6571ff;
}
/* END */

/* Media Query */
@media (max-width: 480px) {
    .slideout {
        width: 250px;
    }

    .slideout.active {
        left: 31%;
    }

    /* Logo Tanoto */
    .tanoto_hei {
        /* Perbandingan width : height */
        /* 33.5 : 12  */
        /* 100px : 36px */
        margin-top : 18px !important;
        width: 67px !important;
        height: 24px !important;
    }

    .tanoto_me {
        margin-left : 24px !important; /* 100% dari logo height */
    }

    .tanoto_mr {
        margin-right: 24px !important; /* 100% dari logo height */
    }

    .partner_logo_hei {
        /* 110% dari tanoto logo height */
        margin-top: 18px !important;
        width: 67px !important; /* 73px */
        height: 26px !important;
    }
    /* END */

    #login_img_container {
        display: none;
    }
}

@media (min-width: 768px) and (max-width:  1024px) {
    .slideout {
        width: 300px;
    }

    .slideout.active {
        left: 60%;
    }

    #side_img{
        width: 100% !important;
        height: 75% !important;
        background-size: cover !important;
    }
}
/* END */

/* Logo Tanoto */
.tanoto_hei {
    /* Perbandingan width : height */
    /* 33.5 : 12  */
    /* 100px : 36px */
    width: 80px;
    height: 28px;
}

.tanoto_me {
    margin-left : 28px; /* 100% dari logo height */
}

.tanoto_mr {
    margin-right: 28px; /* 100% dari logo height */
}

.partner_logo_hei {
    /* 110% dari tanoto logo height */
    width: 80px;
    height: 31px;
}
/* END */

.carousel-control-prev,
.carousel-control-next {
    /*background-color: #A6C0CD;*/
    background-color: #D3DFDF;
    border-radius: 50px;
    height: 50px;
    width : 50px;
    margin-top:auto;
    margin-bottom:auto;
    margin-right: 10px;
    margin-left: 10px;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23194569'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23194569'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

#highlight_xs .carousel-indicators button {
    background: #194569;
    border-radius: 20px;
    width: 20px;
    height: 100%;
}

.circle-btn {
    position: absolute;
    left : 240px;
    bottom : 220px;
    border-radius: 50px;
}

.perfect-scrollbar-example {
    position: relative;
    max-height: 400px;
}

#notif_container > a:hover{
    color: #7b85ff !important;
}

.uncolor_link {
    color : inherit !important;
}

.uncolor_link:hover {
    color : #576CBC !important;
}

.img_fit_cover {
    border-radius: 5px;
    object-fit: cover;
    /*height: 340px;*/
    height: 155px;
    width: 100%;
}

/*.sweetAlert_cancel_btn {
    background-color: transparent !important;
    color : black !important;
}*/

.p_etika{
    margin-top: 50px;
    font-size: 1rem;
    text-align: justify;
    float: inline-end;
}

.p_etika .card .card-body p {
    margin-bottom: 10px;
    /*color : #434343;*/
    color : #666666;
}

.p_etika .card {
    padding-left : 10px;
    padding-right: 10px;
}

.p_etika .card .card-body ul li {
    /*color : #434343;*/
    color : #666666;
}