@font-face {
    font-family: OpenSans_sm;
    src: url(OpenSans-Regular.ttf);
}

/* div, img, table tr td{border: solid 1px;} */

body{
    font-family: OpenSans_sm;
    margin: 0 !important; width: 100%;
}
.ui-page{background-color: white !important;}
#mainDiv{overflow: hidden;}

#main_page_width{width: 100%; margin: 0 auto; background-color: white; max-width: 1920px;}

img#logo{
    width: 250px; height: auto;
    /* margin-left: 10%; */
}
img#logo_ojk{
    width: 80%; height: auto;
}

label{font-weight: 700 !important;}

.popUp_box{
    padding: 1%; border: solid 1px; color: white !important;
    background-color: #005B96 !important; text-shadow: none !important;
    -webkit-border-radius: 5px;
		   -moz-border-radius: 5px;
                border-radius: 5px;
    text-align: justify;
    max-width: 30%;
    margin-left: 50%;
    transform: translate(-50%);
}

.menu{color: rgba(0, 0, 0, 0.5); width: 80%; scrollbar-width: none; margin: 0 auto;
    overflow-x: scroll;
}
.menu::-webkit-scrollbar {
    display: none;
}
.menu_item {
    white-space: nowrap;
    padding: 0 1em;
}
.menu > div > div.menu_item{margin:0 auto ; font-weight: bold; cursor: pointer !important; text-align: center;}
.menu_underLine{background-color: #005B96; height: 1px; border: solid 1px #005B96; display: none; margin-top: 4px;}
.menu_underLine_on{display: block; visibility: visible;}
.underLine_menuBig{
    height: 3px; background-color: #80ADCB; width: 8%; margin: 0 auto;
}
.underLine_menuBig2{
    height: 3px; background-color: #80ADCB;
    margin: 1% 0 0 0 !important; width: 15%; 
}
.underLine_menuBig3{
    height: 3px; background-color: #80ADCB;
    margin: 10px auto !important;
}
.content_menu{width: 70%; margin: 0 auto;}
.side_menu > div{text-align: center; cursor: pointer; margin: 8% auto;}

.ui-page-theme-a{
    text-shadow: none !important;
}

.bottom_part{align-items: flex-start !important;}

.text_blue{color: #005B96;}
.text_grey{color: #828282;}
.text_white{color: white;}
.text_black{color: black;}
.bold{font-weight: bold;}
.f30{font-size: 30px;}
.f20{font-size: 20px;}
.f18{font-size: 18px;}
.f16{font-size: 16px;}
.f14{font-size: 14px;}
.f10{font-size: 10px;}
.f12{font-size: 12px;}
.f11{font-size: 11px;}
.f24{font-size: 24px;}
.center{text-align: center;}
.margin_text{margin: 1em 0;}
.line_h19{line-height: 19px !important;}
.line_h22{line-height: 22px !important;}
.line_h25{line-height: 25px !important;}
.bg_grey{background-color:  #F1F2F7;}
.bg_blue{background-color:  #005B96;}
.bg_white{background-color: white !important;}
.bg_cream{background-color: #F7F4F0;}
.bg_lightBlue{ background-color: #7CA8C3 !important;}
.border{border: solid 1px rgba(0, 91, 150, 0.14);}
.w80{width: 80%;}
.w100{width: 100%;}
.row40{width: 40%;}
.row30{width: 30%;}
.margin_s{margin: 1% !important;}
.margin_m{margin: 2% !important;}
.margin_l{margin: 4% !important;}
.padding_s{padding: 1% !important;}
.padding_m{padding: 2% !important;}
.padding_l{padding: 4% !important;}

.flex-container{
    display: flex;
    flex-wrap: wrap;
    flex-flow: row;
}

.flex-container-col{
    display: flex;
    flex-wrap: wrap;
    flex-flow: column;
}

.flex-container-tab-col{
    display: table;
    flex-wrap: wrap;
    flex-flow: column;
}
.flex-container-tab-item{
    display: table-cell;
}

.flex-container > div{
    margin: 0.5%;
}

.flex-wrap{flex-flow: wrap;}

.flex-container.bigMargin > div{
    margin: 5% !important;
}

.flex-item-center{
    justify-content: center;
    align-items: center;
}
.flex-item-top{
    justify-content: center;
    align-items: flex-start;
}
.flex-item-top_itemCenter{
    justify-content: flex-start;
    align-items: center;
}
.flex-item-left{
    justify-content: flex-start;
    align-items: flex-start;
}

.flex-item-left-center{
    justify-content: flex-start;
    align-items: center;
}

.flex-item-evenly{
    justify-content: space-evenly; margin: 0 auto;
}

.flex-item-between{
    justify-content: space-between;
    margin: 0 auto;
}

.flex-item-around{
    justify-content: space-around;
}

/* changeOnSmall */
.flex-item-evenly-toLeft{ 
    justify-content: space-evenly; margin: 0 auto;
}

.icon{
    width: 80px; height: 80px;
		-webkit-border-radius: 40px;
		   -moz-border-radius: 40px;
                border-radius: 40px;
    background-color: rgba(0, 91, 150, 0.5);
}

.checkBox_bg{
    padding: 0.25em; margin-right: 2% !important;
    background-color: #80ADCB;
}

.produk{
    width: 11em; height: 11em;
    padding: 1em;
    text-align: center;
    cursor: pointer;
    background-color: #80ADCB;
    line-height: 16px;
}
.produk > img{
    width: 70%; height: auto;
}

.round5{
    -webkit-border-radius: 5px;
		   -moz-border-radius: 5px;
                border-radius: 5px;
}

.round10{
    -webkit-border-radius: 10px;
		   -moz-border-radius: 10px;
                border-radius: 10px;
}

.round-top-10{
    -webkit-border-radius: 10px 10px 0 0;
		   -moz-border-radius: 10px 10px 0 0;
                border-radius: 10px 10px 0 0;
}

.btn_large{
    padding: 1.5em;
    text-align: center;
    background-color: #005B96;
    cursor: pointer;
		-webkit-border-radius: 1em;
		   -moz-border-radius: 1em;
                border-radius: 1em;
}

.btn_small{
    padding: 0.5em; display: inline-block;
    text-align: center;
    background-color: #005B96;
    cursor: pointer;
		-webkit-border-radius: 1em;
		   -moz-border-radius: 1em;
                border-radius: 1em;
}

.bulat5{
    width: 30; height: 30px; min-width: 30px;
    -webkit-border-radius: 30px;
		   -moz-border-radius: 30px;
                border-radius: 30px;
}

.ring_blue{
    border: solid 8px #005B96;
    margin: 1%;
    width: 80px; height: 80px;
    -webkit-border-radius: 80px;
		   -moz-border-radius: 80px;
                border-radius: 80px;
}

/* .detail_content{width: 100%; padding-bottom: 0%;} */
.detail_content{width: 100%; padding: 10px 0;}

.komisaris_direksi_prof > div{
    margin: 4% !important;
}

/* .judul_detail_content{padding-top: 1%} */
.sub_menu{margin-top: 20px;}
.content_width_adj{width: 70%; margin: 0 auto 1% auto;}

.item_hub_kami{width: 100%; margin: 0 auto;}
.item_hub_kami > div{margin: 0 2em 2% 2em; line-height: 20px; text-align: center;}

.rekanan_bisnis{width: 70%; margin: 0 auto;}
.rekanan_bisnis > div{margin:0 2%}
.rekanan_bisnis > div > img{
    width: 100px; height: auto;
}
/* 005B96 */
#main_div{margin: 1em;}
.ui-btn{background-color: #7CA8C3 !important; color: white !important; text-shadow:none !important;}
/* .ui-select{background-color: #7CA8C3 !important;} */
.list_faq > div{margin-bottom: 20px; display: inline-block;}


ul.regular_list li, ol.regular_list li{
    margin: 1% 0; left: 0 !important; margin-left: 0 !important; padding-left: 0 !important;
}
ul.angka li{
    list-style-type: decimal;
}
ul.huruf li{
    list-style-type: lower-alpha;
}

.img_kecil_ttgKami > div{
    width: 33%; height: auto;
}
.img_kecil_ttgKami > div > img{
    max-width: 100%; max-height: 100%;
}
.komisaris_direksi > div{
    width: 20%;
}
div#input_saran{width: 50%; text-align: left;}
div#input_saran > div.div_btn_submit{text-align: right;}
.div_input_saran > div{width: 50%;}
.img_etf{text-align: right; background-image: url('../images/saran.png'); background-size: 50%; background-position: left top; background-repeat: no-repeat; position: relative;}
.img_etf > div{bottom: 0 !important; right: 0; position: absolute;}
.img_etf > img{margin: 1%;}

.faq_bottom_item > div{width: 25%; background-color: red;}
#popUp_info{min-width: 50%; min-height: 75px;}

/* div.item_pilar{flex-basis: 40%;}
div.item_pilar_desc {flex-basis: 40%;}
div.item_pilat_pic {flex-basis: 60%;}
div.item_pilat_pic > img {width: 80%; height: auto;} */

table.tb_list_company{width: 50%;}
table.tb_list_company tr td div > img {width: 80%; height: auto;}
table.tb_list_company tr td div > span:first-child {font-weight: bold;}

table.tb_share_saham{width: 80%; border: solid 1px lightgrey; border-collapse: collapse;}
table.tb_share_saham tr td{
    border: solid 1px lightgrey; border-collapse: collapse; padding: 6px;
}

.bar_separator_outer{
    height: 100%; width: 60px; margin: 0 auto; vertical-align: middle;
}
.bar_separator{
    background-color: lightgray; height: 90%; margin: 0 auto; width: 5%;
}


@media screen and (max-width: 900px){
    #main_page_width{width: 100%; margin: 0 auto;}

    .menu{width: 90%;}
    .content_menu{width: 100%;}
    .row {   
      flex-direction: column;
      align-items: center;
    }
    img#logo{
        width: 175px; height: auto;
        margin-left: 1%;
    }
    img#logo_ojk{
        width: 55%; height: auto;
    }
    /* .flex-item-left{
        justify-content: center;
        align-items: center;
    } */
    .row40,.row30,.w80{width: 95%;}
    .underLine_menuBig{width: 20%;}
    .underLine_menuBig2{width: 40%;}
    .popUp_box{max-width: 90%; padding: 3%;}
    .judul_detail_content{padding: 2%}
    .flex-container-col{flex-flow: row;}
    .flex-container-tab-col{flex-flow: row;}

    .flex-container > div{
        margin: 1.5% 0.5% 0.5% 0.5%;
    }

    .content_width_adj{width: 90%;}
    .flex-item-evenly-toLeft{ 
        align-items : flex-start ;
    }
    .item_hub_kami{width: 100%;}
    .rekanan_bisnis{width: 100%;}
    .rekanan_bisnis > div > img{
        width: 90px; height: auto;
    }
    .komisaris_direksi > div{
        width: 40%;
    }
    div#input_saran{width: 100%; margin: 0 auto;}
    .div_input_saran > div{width: 100%;}
    
    .img_etf{text-align: center; background-size: 30%; background-position: left top;}
    .img_etf > div{bottom: 0 !important; position: unset;}
    .img_etf > img{margin: 1%;}

    .side_menu > div{margin: 2% auto;}
    .item_hub_kami > div{margin: 0 1em 2% 1em;}

    /* ------------------scale */
    .f30{font-size: 27px;}
    .f20{font-size: 17px;}
    .f18{font-size: 15px;}
    .f16{font-size: 13px;}
    .f14{font-size: 11px;}
    .f10{font-size: 7px;}
    .f12{font-size: 9px;}
    .f11{font-size: 8px;}
    .f24{font-size: 21px;}
    .line_h19{line-height: 16px !important;}
    .line_h22{line-height: 19px !important;}
    .line_h25{line-height: 22px !important;}

    .margin_s{margin: 2% !important;}
    .margin_m{margin: 3% !important;}
    .margin_l{margin: 5% !important;}
    .padding_s{padding: 2% !important;}
    .padding_m{padding: 3% !important;}
    .padding_l{padding: 5% !important;}

    .underLine_menuBig3{
        height: 2px;
    }

    .list_faq > div{margin-bottom: 20px; display: inherit;}
    #popUp_info{min-width: 70%; min-height: 75px;}

    table.tb_list_company{width: 100%;}
    table.tb_share_saham{width: 100%;}

    /* ul.regular_list, ol.regular_list{
        padding-left: 4%;
    } */

    .flex-container-tab-item{
        display: block; width: 100%;
    }
    
    .bar_separator_outer{
        height: 100%; width: 100%; margin: 6% auto 2% auto;
    }
    .bar_separator{
        height: 3px; width: 95%;
    }
}