.head_x {position: fixed; background: rgba(var(--putih), 1.00); left: 0px; right: 0px; top: 0px; z-index: 99;
         padding: 10px 40px 10px 30px;}
  .head_x_border {border-bottom: 2px solid rgba(var(--color_1), 0.2);}
.head_0 {display: flex; flex-wrap: nowrap; align-items: center; width: 100%;}
.head_1 {flex: 1 0 auto;}
  .head_1 img {display: block;}
.head_2 {flex-basis: 100%; text-align: center;}
  .head_2_0 {display: none;}
.head_3 {flex: 1 0 auto;}
  .head_3_0 {display: flex; flex-wrap: nowrap; align-items: center; width: 100%;}
  .head_3_1 {margin-right: 10px;}
  .head_3_2 {font-size: 14px;}
    .head_3_2 a {color: rgba(var(--color_1), 1.00) !important;}
  .head_3_3 {display: flex; flex-wrap: nowrap; align-items: center;}

.head_login_1 {font-weight: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;}
.head_login_2 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; font-size: 11px; color: rgba(var(--color_1), 0.70);}

.head_login_pic {width: 40px; height: 40px; background: rgba(var(--color_1), 0.30) url('/img/icon-user.png') 50% 50% no-repeat; background-size: 50%; border-radius: 50px; overflow: hidden;}
  .head_login_pic img {display: block;}

.head_icon {flex: 0 0 40px; position: relative; width: 40px; height: 40px;}
.head_icon_space {width: 30px;}
.head_icon_notif {width: 40px; height: 40px; background: transparent url('/img/icon-notif.png') 50% 50% no-repeat; background-size: 20px;}
.head_icon_mail {width: 40px; height: 40px; background: transparent url('/img/icon-mail.png') 50% 50% no-repeat; background-size: 22px;}

.head_notif_0 {background: rgba(var(--merah_2), 1.00); color: rgba(var(--putih), 1.00); font-size: 10px; font-weight: 2; text-align: center; border-radius: 50px;
               display: inline-block; padding: 2px 2px; width: 25px; position: absolute; top: 0px; right: -10px; margin: auto 5px;
               border: 2px solid rgba(var(--putih), 1.00);}
#head_icon_notif,#head_icon_mail {display: none;}

.body_x {margin-top: 60px; background: rgba(var(--putih), 1.00); padding-bottom: 50px; border-bottom: 1px solid rgba(var(--color_1), 0.2);}
.body_0 {padding: 25px 0px 0px 0px; max-width: 1210px; margin: 0 auto;}

.main_back {background: rgba(var(--color_1), 0.05);
            position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: -10;}

.main_foot_0 {display: flex; flex-wrap: nowrap; align-items: top; width: 100%;
              padding: 20px 40px 20px 30px; font-size: 11px;}
.main_foot_1 {flex-basis: 100%;}
.main_foot_2 {flex: 1 0 auto; text-align: center;}

/* Portrait */
@media only screen and (orientation:portrait) {
  .head_x {padding: 10px 10px 10px 10px;}
  .head_2_0 {display: none;}
  .head_3_1 {margin-right: 0px;}
  .head_3_2 {display: none;}
  .head_icon_space {width: 10px;}

  .body_0 {padding: 25px 10px 50px 10px;}

  .main_foot_0 {flex-wrap: wrap; padding: 20px 20px 20px 20px; font-size: 11px;}
  .main_foot_1 {margin-bottom: 20px; display: none;}
  .main_foot_2 {flex-basis: 100%;}
}