@font-face {
   font-family: 'Inter-Regular';
   src: url('../fonts/Inter-Regular.eot');
   src: url('../fonts/Inter-Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Inter-Regular.woff2') format('woff2'),
       url('../fonts/Inter-Regular.woff') format('woff'),
       url('../fonts/Inter-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}
body {
   display: block;
   margin: 0 auto;
   background: url(../img/litigasi/bg-desktop-litigasi.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   font-family: 'Inter-Regular';
   min-height: 100%;
   background-color: #C6D8FF;
   
}
.container {
   margin-right: auto;
   margin-left: auto;
   /* padding-left: 15px;
   padding-right: 15px; */
   width: 1136px;
}
.top {
   position: relative;
   display: flex;
   margin-top: 30px;
   justify-content: space-between;
}
.top .logo {
   /* width: 100%; */
}
.top .logo img {
   height: 42px;
}
.top .login {
   width: 42px;
   height: 42px;
}
.login img  {
   width: 110px;
}
.content {
   position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 44px;
    width: 100%;
    /* height: 84vh; */
}
.left-content {
   width: 37%;
}
.top-left {
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.top-left img {
   width: 100%;
}
.body {
   margin-top: -5px;
   position: relative;
   padding: 20px 20px 24px 20px;
   background: #1D3671;
}
.body-text {
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 22px;
   color: #fff;
}
.share {
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
}
.sosmed-share {
   padding: 20px 0px 0px 0px;
   display: flex;
    gap: 5px;
    color: #fff;
    align-items: center;
}
.right-content {
  position: relative;  
  width: 61%; 
}
.right-content .box {
   background-color: #fff;
   width: auto;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
   position: relative;
   overflow: hidden;
   /* top: 120px; */
   bottom: 0;
   height: calc(100vh - 106px);
}
.box.disabled::after {
   content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    display: block;
    z-index: 99;
    position: absolute;
    top: 0;
}

.info-text   {
   position: relative;
   background: #FCAB26;
   color: #fff;
   padding: 12px 20px;
   border-radius: 100px;
   margin: 20px auto;
   width: 327px;
   text-align: center;
}
.term-condition {
   position: absolute;
   text-decoration: underline;
   cursor: pointer;
   color: #376DEC;
   font-size: 12px;
   font-weight: 500;
   line-height: 22px;
   bottom: 30px;
}
.popup-term-condition {
   display: block;
   position: absolute;
   width: 659px;
   border-radius: 10px;
   background: #1D3671;
   padding: 32px 16px 15px 16px;
   margin: -50px auto;
   top: 100px;
   left: 25%;
   right: 25%;
   -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  z-index: 99;

}
.title-popup {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    color: #fff;
    text-align: center;
    padding-bottom: 20px;
}
.body-popup {
   border-radius: 5px;
   background: #F1F4FD;
}
.text-popup {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    padding: 1px 20px 20px 20px;
}
.checkbox-popup {
   position: relative;
   display: flex;
   padding: 0px 0px 0px 20px;
}
.checkbox-text {
   color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    padding: 0px 20px 20px 20px;
    text-align: justify;
}
input {
   width: 30px;
   height: 30px;
   accent-color: #CBD2E7;
   color: #1D3671;
   border-radius: 5px;
 }
 .close {
   position: absolute;
    top: 0;
    right: 0px;
    cursor: pointer;
    padding: 16px;
 }
 .close img {
   width: 32px;
 }
 .background-mobile {
   display: none;
 }

 .warp-user-avatar .right-avatar a {
   text-decoration: none !important;
 }

 .alert-container {
   display: none ;
 }
 .menu-sso-login img {
   width: 42px !important;
   height: 42px !important;
 }

 @media (max-width: 575.98px) {
   body {
      /* background: url(../img/litigasi/bg-mobile-litigasi.png) !important; */
      background-repeat: no-repeat !important;
      background-size: 100% !important;
      background: linear-gradient(180deg, #FFF 11.98%, #B4C7F0 100%) !important;
   }
   .background-mobile {
      display: block;
      width: auto;
      padding: 20px 40px 0px 40px;
   }
   .background-mobile img {
      width: 100%;
   }
   .top {
      /* justify-content: unset !important; */
      justify-content: space-between
   }
   .top .logo {
      /* width: 85%; */
      margin-left: 16px;
      width: unset;
   }
   .container {
      padding-right: 0px !important;
      padding-left: 0px !important;
      width: auto !important;
      padding: 0;
   }
   .menu-sso-login {
      width: unset !important;
      /* left: 40px !important; */
   }

   .menu-sso {
      width: unset !important;
   }
   .menu-sso-login.logged img {
      margin-left: 0px !important;
      left: 0px !important;
      margin-left: -50px !important;
    width: 42px !important;
    height: 42px !important;
      
   }
   .content {
      display: block;
      margin-left: 16px;
      margin-right: 16px;
      margin-top: 20px;
      width: auto;
      height: auto !important;
   }
   .left-content {
      width: auto !important;
   }
   .term-condition {
      /* left: 16px;
      top: 510px; */
      position: relative;
      bottom: 0;
      margin-top: 8px;
   }
   .right-content {
      margin-top: 60px;
      width: auto !important;
   }
   .right-content .box {
      width: 100%;
    position: relative;
    box-shadow: unset;
    /* overflow: scroll; */
    top: 0px;
    height: 150vh !important;
    margin-bottom: 16px;
   }
   .popup-term-condition {
      width: auto;
      margin: 0px 16px;
      left: unset !important;
      right: unset !important;
      padding: 32px 0px 0px 0px;
   }
   .checkbox-text {
      text-align: justify;
   }
   input {
      margin-top: 7px;
   }
   .info-text {
      width: auto;
    font-size: 14px;
    margin-top: 56px;
    margin-left: 16px;
    margin-right: 16px;
    padding: 12px 16px;
   }
   .login-popup {
      position: fixed !important;
      background: #1f1f1f !important;
      padding: 12px 16px !important;
      border-radius: 0px !important;
      top: 0px !important;
      right: 0 !important;
      width: 263px !important;
      min-height: 100vh !important;
      -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5) !important;
      box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5) !important;
   }
   .warp-user-avatar .right-avatar .username {
      color: #DE2027 !important;
   }
   .warp-user-avatar .close-avatar {
      right: 16px !important;
   }
   .close-avatar img {
      width: 30px !important;
      height: 30px !important;
   }
   .drop-menu-sso .title-complete-data {
      color: #fff !important;
   }
   .drop-menu-sso .desc-complete-data {
      color: #fff !important;
   }
   .alert-container {
      background-color: #fff;
    border: 2px solid #509af8;
    box-shadow: 0 4px 4px #000 0 25px 40px -10px #000;
    border-radius: 20px 20px 0 0;
    padding-bottom: 20px;
    z-index: 999;
    position: fixed;
    bottom: 0;
    display: block;
    left: 0;
    max-width: 640px;
    right: 0;
    margin: auto;
   }
   .alert-container .close-btn {
      float: right;
      padding: 15px 15px 0 0;
  }
   .alert-container .close-btn img {
      width: 11.67px;
      height: 11.67px;
   }
   .alert-container .alert-warp {
      display: flex;
      margin-top: 40px;
      margin-bottom: 25px;
    }
    .alert-container .alert-warp .alert-icon {
      margin-right: 10px;
      margin-left: 10px;
   }
   .alert-container .alert-warp .alert-icon img {
      width: 21px;
      height: 21px;
  }
  .alert-container .alert-warp .alert-text {
   font-size: 14px;
   line-height: 140%;
   margin-right: 10px;
   color: #0c2a75;
}
strong {
   font-family: Inter-Bold;
}
.alert-container .alert-btn {
   width: 288px;
   height: 44px;
   border-radius: 10px;
   margin: auto;
}
.alert-container .alert-btn a {
   text-align: center;
   font-weight: 700;
   line-height: 140%;
   font-family: Inter-Medium;
   font-size: 14px;
   background-color: #509af8;
   padding: 15px 16px;
   color: #fff;
   border-radius: 10px;
   text-decoration: none;
   display: block;
}
   
 }

 @media (min-width: 576px) and (max-width: 767.98px)  {
   /* @media (min-width: 576px) and (max-width: 999px)  { */
   body {
      /* background: url(../img/litigasi/bg-mobile-litigasi.png) !important; */
      background-repeat: no-repeat !important;
      background-size: 100% !important;
      background: linear-gradient(180deg, #FFF 11.98%, #B4C7F0 100%) !important;
      
   }
   .background-mobile {
      display: block;
      width: auto;
      padding: 20px 40px 0px 40px;
   }
   .background-mobile img {
      width: 100%;
   }
   .top {
      /* justify-content: unset !important; */
      justify-content: space-between
   }
   .top .logo {
      /* width: 100%; */
      margin-left: 16px;
   }
   .container {
      padding-right: 0px !important;
      padding-left: 0px !important;
      width: auto !important;
      padding: 0;
   }
   .menu-sso {
      width: unset !important;
   }
   .menu-sso-login {
      width: unset !important;
      left: -16px !important;
   }
   .menu-sso-login.logged img {
      margin-left: 0px !important;
      left: 0px !important;
      margin-left: -50px !important;
      width: 42px !important;
      height: 42px !important;
   }
   .content {
      display: block;
      margin-left: 16px;
      margin-right: 16px;
      margin-top: 20px;
      width: auto;
      height: auto !important;
   }
   .left-content {
      width: auto !important;
   }
   .term-condition {
      /* left: 16px;
      top: 510px; */
      position: relative;
      bottom: 0;
      margin-top: 8px;
   }
   .right-content {
      margin-top: 60px;
      width: auto !important;
   }
   .right-content .box {
      width: 100%;
      position: relative;
      box-shadow: unset;
      overflow: scroll;
      top: 0;
      height: 91vh;
      margin-bottom: 16px;
   }
   .popup-term-condition {
      width: auto;
      margin: 0px 16px;
      left: unset;
      right: unset;
      padding: 32px 0px 0px 0px;
   }
   .checkbox-text {
      text-align: justify;
   }
   input {
      margin-top: 7px;
   }
   .info-text {
      width: auto;
    font-size: 14px;
    margin-top: 56px;
    margin-left: 16px;
    margin-right: 16px;
    padding: 12px 16px;
   }
   .login-popup {
      background: #1f1f1f !important;
      padding: 12px 16px !important;
      border-radius: 0px !important;
      top: 0 !important;
      right: 0 !important;
      width: 263px !important;     
      -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5) !important;
      box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5) !important;
   }
   .warp-user-avatar .right-avatar .username {
      color: #DE2027 !important;
   }
   .warp-user-avatar .close-avatar {
      right: 16px !important;
   }
   .close-avatar img {
      width: 30px !important;
      height: 30px !important;
   }
   .drop-menu-sso .title-complete-data {
      color: #fff !important;
   }
   .drop-menu-sso .desc-complete-data {
      color: #fff !important;
   }
   .alert-container {
      background-color: #fff;
    border: 2px solid #509af8;
    box-shadow: 0 4px 4px #000 0 25px 40px -10px #000;
    border-radius: 20px 20px 0 0;
    padding-bottom: 20px;
    z-index: 999;
    position: fixed;
    bottom: 0;
    display: block;
    left: 0;
    max-width: 640px;
    right: 0;
    margin: auto;
   }
   .alert-container .close-btn {
      float: right;
      padding: 15px 15px 0 0;
  }
   .alert-container .close-btn img {
      width: 11.67px;
      height: 11.67px;
   }
   .alert-container .alert-warp {
      display: flex;
      margin-top: 40px;
      margin-bottom: 25px;
    }
    .alert-container .alert-warp .alert-icon {
      margin-right: 10px;
      margin-left: 10px;
   }
   .alert-container .alert-warp .alert-icon img {
      width: 21px;
      height: 21px;
  }
  .alert-container .alert-warp .alert-text {
   font-size: 14px;
   line-height: 140%;
   margin-right: 10px;
   color: #0c2a75;
}
strong {
   font-family: Inter-Bold;
}
.alert-container .alert-btn {
   width: 288px;
   height: 44px;
   border-radius: 10px;
   margin: auto;
}
.alert-container .alert-btn a {
   text-align: center;
   font-weight: 700;
   line-height: 140%;
   font-family: Inter-Medium;
   font-size: 14px;
   background-color: #509af8;
   padding: 15px 16px;
   color: #fff;
   border-radius: 10px;
   text-decoration: none;
   display: block;
}
 
 }

 /* @media (max-width: 1030px) {
   .container {
      width: 1000px;
   }
   .menu-sso-login {
      padding-left: 15px !important;
   }
  
 } */
 @media (max-width: 999px)  {
  .container {
   width: 730px;
  }
  .popup-term-condition {
   width: auto;
   left: 10%;
   right: 10%;
  }
  .left-content {
   width: 35%;
   }
   .right-content {
      width: 62%;
   }
   .content {
      height: 100vh;
   }
   .right-content .box {
      height: calc(100vh - 90px);
   }
   .menu-sso-login {
      padding-left: 0px !important;
   }

 }

 .hidden {
   display: none !important;
}