@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
*{
  font-family: "Open Sans", sans-serif!important;
}

html,
body {
  position: relative;
  background-color: #F6F6F6;
}

p {
  font-weight: 400;
  font-size: 14px;
  line-height: 23px;
}
.img-profile-menu{
  width: 45px;
  height: 45px;
  position: relative;
  overflow: hidden;
  display: flex;
  border-radius: 100%;
  float: left;
}
.img-profile-menu > img{
  position: absolute;
  border-radius: 0% !important;
  height: auto;
  width: 100% !important;
  left: 50%;
  transform: translate(-50%, 0);
}
.form-custom{
  border-width: 2px;
  padding:10px 13px;
  padding-right: 39px;
}
.form-control::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #979797;
  font-weight: 300;
  font-size: 1rem;
  opacity: 1;
}

.form-control:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #979797;
  font-weight: 300;
  font-size: 1rem;
  opacity: 1;
}
.form-control::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #979797;
  font-weight: 300;
  font-size: 1rem;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #979797;
  font-weight: 300;
  font-size: 1rem;
  opacity: 1;
}

.form-control::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #979797;
  font-size: 1rem;
  font-weight: 300;
  opacity: 1;
}
.breadcrumb-item{
  font-size: 0.75rem;
  font-weight: 500;
}
.offcanvas-header, .offcanvas-body{
  padding: 25px!important;
}
.offcanvas-body{
  padding-bottom:75px!important;
}
::placeholder {
  /* Most modern browsers support this now. */
  color: #797979;
}
.border-danger{
  border:1px solid #DC3545;
}
.p-app{
  font-size: 0.72rem!important;
}
.p-app-mini{
  font-size: 0.63rem!important;
}
.p-app-mini-1{
  font-size: 0.6rem!important;
}
.col-mobile{
  padding-left:0px;
  padding-right:0px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
}
.col-mobile2{
  padding-left:5px;
  padding-right:5px;
  margin-bottom: 12px;
}
.col-mobile1{
  padding-left:5px;
  padding-right:5px;
}

.loading {
  width: 100%;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0px;
  background: rgba(0, 0, 0, 0.9);
  z-index: 11112;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: visibility 0.5s, opacity 0.5s linear;
}
.form-group{
  position: relative;
}
.deleteText{
  position: absolute;
  right: 5px;
  bottom: 25px;
  padding: 10px;
}
.deleteText:hover{
  cursor: pointer;
  color: #DC3545;
}
.deleteTextArea{
  position: absolute;
  right: 5px;
  top: 0px;
  padding: 10px;
}
.deleteTextArea:hover{
  cursor: pointer;
  color: #DC3545;
}
.loading.active {
  visibility: visible;
  opacity: 1;
  padding:35px;
  display: flex !important;
  transition: visibility 0.5s, opacity 0.5s linear !important;
}
.prompt-1{
  width:100%; height:100%; z-index: 2000; margin: 0 auto;     width: 100%;
  height: 100%; background:rgb(0 0 0 / 90%);
  position: fixed;
  top: 0px;
}
.modal-catatan{
  width: 50%;
  margin: auto;
}
#toolbar{
  display: none!important;
}
.prompt-2{
  width:50%; margin:auto; background:#fff; padding:25px; box-shadow:0 3px 6px 0 rgb(0 0 0 / 15%)!important;
}
.profile-total {
  position: absolute;
  right: 75px;
  top: 33%;
  font-weight: bold;
}
@media (max-width: 600px) {
  .prompt-2{
    width:100%;
  }
  .btn-full-mobile{
    width: 100%;
    padding:8px;
  }
  .form-control::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #979797;
    font-weight: 300;
    font-size: 1rem;
    opacity: 1;
  }
  
  .form-control:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #979797;
    font-weight: 300;
    font-size: 1rem;
    opacity: 1;
  }
  .form-control::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #979797;
    font-weight: 300;
    font-size: 1rem;
    opacity: 1;
  }
  
  .form-control:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #979797;
    font-weight: 300;
    font-size: 1rem;
    opacity: 1;
  }
  
  .form-control::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #979797;
    font-size: 1rem;
    font-weight: 300;
    opacity: 1;
  }
}
.modal.fade.modal-confirm .modal-dialog {
  transition: transform .2s ease-out;
  transform: translate(0, 250px);
  position:absolute;
  bottom:0px;
  left: 0;
  right: 0;
}
.modal.modal-confirm.show .modal-dialog {
  transform: none;
}
/* LOADING DATA */
.sk-chase {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: sk-chase-dot 2.0s infinite ease-in-out both;
}

.img-profile {
  border-radius: 6px;
  width: 120px;
}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}

.sk-chase-dot:nth-child(1) {
  animation-delay: -1.1s;
}

.sk-chase-dot:nth-child(2) {
  animation-delay: -1.0s;
}

.sk-chase-dot:nth-child(3) {
  animation-delay: -0.9s;
}

.sk-chase-dot:nth-child(4) {
  animation-delay: -0.8s;
}

.sk-chase-dot:nth-child(5) {
  animation-delay: -0.7s;
}

.sk-chase-dot:nth-child(6) {
  animation-delay: -0.6s;
}

.sk-chase-dot:nth-child(1):before {
  animation-delay: -1.1s;
}

.sk-chase-dot:nth-child(2):before {
  animation-delay: -1.0s;
}

.sk-chase-dot:nth-child(3):before {
  animation-delay: -0.9s;
}

.sk-chase-dot:nth-child(4):before {
  animation-delay: -0.8s;
}

.sk-chase-dot:nth-child(5):before {
  animation-delay: -0.7s;
}

.sk-chase-dot:nth-child(6):before {
  animation-delay: -0.6s;
}

@keyframes sk-chase {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes sk-chase-dot {

  80%,
  100% {
    transform: rotate(360deg);
  }
}

@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4);
  }

  100%,
  0% {
    transform: scale(1.0);
  }
}

/* LOADING DATA */

label {
  color: #000;
  font-weight: 400;
}

.form-select {
  font-weight: 300;
  padding-top: 8px;
  font-size: 0.9rem;
  line-height: 23px;
}

.form-control {
  font-size: 0.9rem;
  font-weight: 400;
}

.table>thead>tr>th,
.table>tbody>tr>td {
  font-size: 0.8rem;
}

.payment>p {
  font-size: 0.8rem;
  font-weight: 400;
}

.payment>p>b {
  font-size: 0.9rem;
  font-weight: 700;
}

.form-label {
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
}
.nav-link{
  font-size: 0.9rem;
}
.navbar-expand-lg .navbar-nav .nav-link:hover {
  color: #D92550;
}

.navbar-expand-lg .navbar-nav.navbar-1 .nav-link:hover {
  color: #0D6EFD !important;
  background: #E9F0FF;
  border-radius: 35px;
  font-weight: 500 !important;
  transition: 0s;
}

.nav-link.button,
.nav-link.button:active,
.nav-link.button:focus {
  background-color: #0D0C22 !important;
  border-radius: 7.5px;
  font-weight: 600;
  color: #fff !important;
  padding: 10px 35px !important;
  padding-right: 20px !important;
  text-align: left;
  transition: all .2s;
}

.nav-link.button:hover {
  color: #7431F9 !important;
  transition: all .2s;
}

.showEvent {
  color: #F63854;
  text-decoration: none;
  font-weight: 700;
}

.showEvent:hover {
  color: #ff1639;
}

.ng-view {
  height: 100%;
}

.nopadding {
  padding: 0px;
}

.login-1 {
  width: 100%;
  min-height: 100%;
  position: relative;
  background: #EBEDEE;
  background-image: linear-gradient(1deg, rgba(255, 255, 255, 0.01), #f6f6f6 85%),radial-gradient(ellipse at top left, rgba(13, 110, 253, 0.1), transparent 50%),radial-gradient(ellipse at top right, rgba(255, 228, 132, 0.1), transparent 50%),radial-gradient(ellipse at center right, rgba(112.520718, 44.062154, 249.437846, 0.1), transparent 50%),radial-gradient(ellipse at center left, rgba(214, 51, 132, 0.1), transparent 50%);
}

.login-1-1 {
  width: 85%;
  margin: auto;
  max-height: 100%;
  justify-content: center;
  align-items: center;
}
.login-1-1-1 {
  width: 80%;
  margin: auto;
  min-height: 100vh;
  max-height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.center-align {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}
.fw-bold{
  font-size: 0.75rem;
}
.justify-content{
  justify-content: center;
  align-items: center;
}
.justify-content-full{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.login-1-2 {
  width: 66.66666667%;
  height: 100%;
  background-size: cover!important;
  background-position: center;
  background-image: linear-gradient(to bottom, rgb(255 255 255 / 0%) 75%, rgb(0 0 0 / 50%), rgb(0 0 0 / 85%)), url(../../uploads/login/galesong-hut-2024.webp)!important;
  position: fixed;
}

.navbar-nav .nav-link.active{
  color: #0A66C2!important;
  background: #E9F0FF;
  border-radius: 35px;
  font-weight: 500 !important;
}
.navbar-nav .nav-link-profile.nav-link.active{
  background: transparent!important;
}
.navbar-expand-lg .navbar-nav .nav-link{
  padding-left:18px;
  padding-right:18px;
  transition: 0s;
}

.login-2 {
  width: 200px;
}

.login-3 {
  width: 350px;
}

/* registration */
.reg-1 {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
}

.reg-1-1 {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 150px);
  justify-content: center;
  display: flex;
}

.footer {
  position: fixed;
  bottom: 15px;
  text-align: center;
  font-size: 0.8rem;
  width: 66.66666667%;
  margin-bottom: 0px;
  color: #fff;
}

.login-22 {
  position: relative;
}

/* form registration */
.password-container {
  position: relative;
}

.password-input {
  padding-right: 30px;
  /* Adjust this value as needed */
}

.password-toggle {
  position: absolute;
  top: 57%;
  right: 10px;
  cursor: pointer;
  color: #0A66C2;
  font-size: 0.8rem;
  font-weight: 500;
}


/* NAVBAR */
.navbar {
  background-color: rgb(248 249 250 / 30%) !important;
  padding: 0px;
}

.navbar.nav-public {
  background-color: rgb(255 255 255 / 73%) !important;
  box-shadow: 0 0rem 0rem;
  padding: .85rem 0;
}

.navbar-1>li {
  padding-left: 5px;
  padding-right: 5px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.navbar-2>li {
  padding-left: 15px;
  padding-right: 15px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.navbar-2>li>a {
  color: #000;
}

.navbar-brand {
  color: #fff !important;
}

.navbar-brand>img {
  width: 148px;
}

.navbar-1>li>a {
  color: rgb(6, 3, 24);
  font-weight: 500!important;
}
.badge {
  font-size: 0.6rem;
  font-weight: 500;
}

.nav-link>ion-icon {
  position: relative;
  top: 3px;
}
.box-shadow{
  border-radius: 12px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 1, .15);
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active {
  color: rgb(6, 3, 24);
}

/* PROFILE */
.profile-1 {
  width: 65%;
  margin: 0 auto;
  padding-bottom: 90px;
}

.profile-2 {
  background: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 1, .15);
}

.card {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 1, .15);
  border: 1px solid rgb(13 12 34 / 15%);
}

.card-menu {
  transition: all .1s;
}

.card-menu:hover {
  background: #fbfbfb;
  transition: all .1s;
  cursor: pointer;
}

.card-menu.nohover:hover {
  background: #fff;
  transition: all .2s;
  cursor: pointer;
}

.card-menu.active {
  background: #712CF9;
  color: #fff;
}

/* .card-menu:hover>* {
  color: #fff;
} */

.card-menu.nohover:hover>* {
  color: rgb(33, 37, 41);
}

.card-menu>.card-body {
  padding-left: 65px;
  padding-right: 150px;
}
.card-menu>.card-body.approval {
  padding-left: 65px;
  padding-right: 200px;
}
.confirmbutton{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  align-items: center;
  justify-content: center;
  display: flex;
}
.trwithfocus{
  background-color: #dedede;
}
.tdwithfocus{
  font-weight: bold;
  background: #ffffe5 !important;
}

.arrow-profile {
  position: absolute;
  right: 25px;
  top: 35%;
}

.arrow-profile-left {
  position: absolute;
  left: 25px;
  top: 32%;
}

ion-icon {
  position: relative;
  top: 2.5px;
}
.header-approval{
  padding: 15px 0px;
  /* border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6; */
}
.btn{
  font-size: 0.7rem;
  font-weight: 600;
  position: relative;
}
.btn-1{
  background:#0D0C22;
  color: #fff;
}
.btn-1:hover{
  background: #565564;
  color: #fff;
}
.btn-outline-1{
  background:#fff;
  color: #0D0C22;
  border:1px solid #0D0C22;
}
.btn-outline-1:hover{
  background:#fff;
  color: #565564;
  border:1px solid #565564;
}
.btn-primary {
  color: #fff;
  background-color: #6528e0;
  border-color: #6528e0;
}

.arrow-profile-left>ion-icon {
  font-size: 1.35rem;
}

.arrow-profile-left>img {
  width: 35px;
  border-radius: 100%;
}

.arrow-profile {
  font-size: 1rem;
}

.arrow-profile>ion-icon {
  font-size: 1.2rem;
}

.arrow-listevent>ion-icon {
  font-size: 1.2rem;
}

.arrow-listevent {
  font-weight: bold;
  color: #D92550;
}

.arrow-listevent:hover {
  cursor: pointer;
}

.list-group>li {
  padding-left: 60px;
  transition: all .2s;
}

.list-group>li:hover {
  background-color: #eeeeee;
  cursor: pointer;
  transition: all .2s;
}

small {
  font-size: .750em;
  font-weight: 400;
}

.div-bottom-right-align {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: right;
  align-items: end;
}

.height100 {
  height: 100%;
}

.pwithlink>a {
  text-decoration: none;
  color: #0D0C22;
  font-size: 1rem;
  font-weight: 400;
}
.box-profile{
  padding-left:15px;
}
.box-profile-1{
  position: relative;
}
.box-profile-1 > .img-box {
  float: left;
  margin-right: 10px;
  height: 85px;
}
.whatsapp{
  position: fixed;
  bottom: 15px;
  right: 12px;
  border-radius: 25px;
  padding:0px 15px;
  width: auto;
  height: 30px;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  font-size: 0.7rem;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
  transition: all .1s;
  opacity: 0.6;
}
.whatsapp:hover{
  cursor: pointer;
  background: #f7f7f7;
  opacity: 1;
}
.whatsapp > div {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #f63854;
  position: absolute;
  top: 3px;
  right: 0px;
}
.whatsapp > ion-icon{
  color: #20B356;
  font-size: 2rem;
  position: relative;
  top: 0px;
}
/* FORM WIZARD */
.dropzone {
  background: white;
  border-radius: 0px;
  border: 2px dashed rgb(0, 135, 247);
  border-image: none;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: 0.2s all ease-out;
}

.dropzone .dz-preview .dz-image {
  border-radius: 0px;
}

.dropzone:hover {
  background: rgb(231, 231, 231);
  transition: 0.2s all ease-in;
}

.container1 {
  position: relative;
  width: 100%;
}

.img-wrapper-circle-13 {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
}

.img-gallery {
  width: 100%;
}

.img-gallery:hover {
  cursor: pointer;
}
.symbol-right{
  position: absolute; right: 15px; top:0; bottom:0; margin:auto;
}
.img-circle-13 {
  position: absolute;
  border-radius: 0% !important;
  height: auto;
  width: 120% !important;
  left: 50%;
  transform: translate(-50%, 0);
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .2s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .2s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container1:hover .image {
  opacity: 0.3;
}

.container1:hover .middle {
  opacity: 1;
}

.form-switch {
  padding-left: 0px;
}

.select2-container--default .select2-selection--single,
.select2-selection .select2-selection--single,
.select2.select2-container.select2-container--default,
.select2.select2-container.select2-container--default {
  width: 100% !important;
  max-width: 100% !important;
}

.select2-container--default .select2-selection--single {
  border: 1px solid #DEE2E6 !important;
  height: auto;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding: .375rem 2.25rem .375rem .75rem;
  font-weight: 300;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 10px;
  right: 7.5px;
}

.select2-container--default .select2-results>.select2-results__options {
  font-weight: 300;
  font-size: 0.9rem;
}

.labelSmall {
  float: right;
  color: #979797;
  position: relative;
  top: 5px;
}

/* Nav Mobile */
.nav-mobile{
  width: 100%;
  height: auto;
  position: fixed;
  z-index: 10000;
  background: #000000b8;
  display: none;
  top: 0px;
}
.nav-mobile.active{
  display:block;
}
.nav-mobile-1 > li > a{
  color:#fff;
  font-family: 'Lato', sans-serif;
  font-size:1.2rem;
  margin-bottom:15px;
  font-weight: 400;
}
.nav-mobile-1 > li > a.active{
  color:#fff;
  font-family: 'Lato', sans-serif;
  font-size:1.2rem;
  font-weight: 800;
}
.nav-mobile-2{
  width: 100%;
  height: 100vh;
  text-align: center;
}
.nav-mobile-3{
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 15px;
  color: #000;
  z-index: 1000;
}
.nav-mobile-3 > ion-icon{
  font-size: 2rem;
}
.nav-mobile-4{
  width:100%;
  margin:0 auto;
  background-color: #fff;
}
.nav-mobile-5{
  margin-top:50px;
}
.list-unstyled.menu > li{
  padding: 15px;
  border-top: 1px solid #F0F0F0;
}
.profile-3{
  width: 75%;
  margin: auto;
}
.profile-3 > p {
  opacity: 0.6;
}
input:focus{
  border-color: #9e9d9d !important;
  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075), 0 0 0px #0D0C22!important;
  outline: none!important;
}
.mobile{
  position: relative;
  min-height: 90vh;
  width: 100%;
  background: #EBEDEE;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.01), #f6f6f6 85%),radial-gradient(ellipse at top left, rgba(13, 110, 253, 0.1), transparent 50%),radial-gradient(ellipse at top right, rgba(255, 228, 132, 0.1), transparent 50%),radial-gradient(ellipse at center right, rgba(112.520718, 44.062154, 249.437846, 0.1), transparent 50%),radial-gradient(ellipse at center left, rgba(214, 51, 132, 0.1), transparent 50%);
}
.approval-1{
  position: relative;
  z-index: 1;
  top: -15px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 1, .10);
}
.approval-2{
  width: 100%;
  height: 100%;
  background: #fff;
  padding:12px;
  border-radius: 12px;
  position: relative;
}
.approval-2:hover{
  cursor: pointer;
  background:#fbfbfb;
}
.approval-2.active{
  background: var(--bs-dark);
  color: var(--bs-body-bg);
}
.approval-2.nonactive{
  color: #8f8f8f58;
}
.approval-2 > ion-icon{
  font-size:1.6rem;
  margin-bottom: 3px;
}
.approval-2-flat{
  width: 100%;
  height: 100%;
  background: #fff;
  padding:20px;
  padding-right:25px;
  border-radius: 12px;
  position: relative;
  border:1px solid #e2e9f0;
}
.mobile-title-small{
  padding: 0px;
  padding-bottom: 8px;
  color: #000;
}
.alert-danger{
  padding: 12px;
  font-size: 0.8rem;
  font-weight: bold;
}
.table-mini > tbody > tr > td{
  font-size:0.7rem!important;
  vertical-align: middle;
}
.table-mini > tr > td{
  font-size:0.7rem!important;
  vertical-align: middle;
}
.mobile-details{
  position: absolute;
  top:0px;
  background: #f0f0f0;
  min-height: 100vh;
  width: 100%;
  padding-bottom: 100px;
  z-index: 10000;
}
.mobile-details-1{
  position: relative;
  background: #fff;
}
.mobile-details-1 > ion-icon {
  font-size: 24px;
  padding: 13px;
  position: relative;
  z-index: 2;
}
.mobile-details-1 > span {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  top: 2.5px;
  padding: 13px;
  font-weight: bold;
}
.mb-mini{
  border-bottom: 1px solid #F0F0F0;
}
.mb-mini:last-child{
  border-bottom: 0px solid #F0F0F0;
}
.mobile-details-2{
  position: relative;
  background: #fff;
  padding: 15px;
  border-radius: 12px;
}
.mobile-details-3{
  position: relative;
  background: #fff;
  padding: 10px 12px;
  padding-bottom: 25px!important;
}
.mobile-details-3{
  position: relative;
  background: #fff;
  padding: 20px;
  min-height: 100%;
}
.padding-mobile{
  padding: 10px;
  padding-bottom:120px;
}
.mobile-details-title{
  font-weight: bold;
}
.form-search {
  padding: 15px 25px;
  border-radius: 8px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 1, .15);
}
.modal{
  z-index: 11111;
  background:rgb(0 0 0 / 39%);
}
.modal-catatan{
  max-width: 50%;
  margin: auto;
}
.accordion-button:not(.collapsed){
  background-color: transparent;
}
.display-flex{
  width: 100%; float: left; overflow: auto; display: flex;
  overflow: overlay;
  scrollbar-gutter: auto; /* I tried rest of all values*/
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
  padding-left: 5px;
  padding-right: 5px;
}
/* Styling the scrollbar in Chrome and Safari */
.display-flex::-webkit-scrollbar {
  width: 0px;
}

.display-flex::-webkit-scrollbar-thumb {
  background-color: transparent; /* Set thumb color for Chrome and Safari */
}

.display-flex::-webkit-scrollbar-track {
  background-color: transparent; /* Set track color for Chrome and Safari */
}
.display-flex > .mobile-details-2{
  min-width: 40vh!important;
  margin-left: 5px;
  margin-right: 5px;
}

.home-content-4-1 {
  position: relative;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding:0px 6px;
  padding-bottom: 15px;
}
.home-content-4-2{
  padding: 15px;
  background-color: #fff;
  min-height: 105px;
  max-height: 100%;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.img-wrapper-circle-13-article {
  width: 175px;
  height: 125px;
  position: relative;
  overflow: hidden;
  display: flex;
  /* box-shadow: rgb(29 65 98 / 10%) 4px 20px 50px 0px; */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.img-circle-13 {
  position: absolute;
  border-radius: 0% !important;
  height: auto;
  width: 120% !important;
  left: 50%;
  transform: translate(-50%, 0);
}
.berita > .owl-stage-outer > .owl-stage {
  /* right: -9px; */
}
.galeri > .owl-stage-outer > .owl-stage {
  right: -9px;
}
.owl-dots{
  display: none!important;
}
.text-link{
  text-decoration: none;
  color: #000;
}
/* register page mobile view */
@media (max-width: 600px) {
  .modal-catatan{
    max-width: 100%;
    margin: auto;
    width: 100%;
  }
  p, .breadcrumb-item{
    font-size: 0.7rem!important;
  }
  small {
    font-size: 0.8rem!important;
    font-weight: 400;
  }
  a{
    font-size: 0.7rem;
  }
  .badge{
    font-size: 0.6rem;
  }
  .img-profile {
    border-radius: 100%;
    width: 60px;
    height: 60px;
  }
  .navbar{
    margin-top: 0px!important;
  }
  .background-container {
    display: none;
  }
  .form-search {
    padding: 12px 18px;
    border:0px;
    border-radius: 8px;
    box-shadow: 0 0rem 0rem rgba(0, 0, 1, .15);
  }
  .login-1-1{
    width: 95%;
  }
  .card-body {
    min-height: max-content;
  }

  .arrow-profile-left {
    display: none;
  }

  .arrow-forward {
    display: none;
  }

  .arrow-profile {
    position: absolute;
    right: 25px;
  }
  .profile-3{
    width: 100%;
  }
  .profile-1{
    width:100%;
  }
  .profile-1 > * {
    text-align: center;
  }
  .centerMobile{
    text-align: center;
  }
  .card-menu>.card-body{
    text-align: left;
    padding: 20px 25px;
  }
  .hidden-mobile{
    display: none;
  }
  .show-mobile{
    display: block;
  }
  .card-menu {
    background: #fff;
    transition: all .2s;
    cursor: pointer;
    color: #000;
  }
  .navbar{
    background-color: #fff!important;
    box-shadow: 0 0 0 0;
    padding: 10px;
    padding-left: 2px;
    padding-right: 4px;
  }
  .menu-md > ion-icon {
    font-size: 2.2rem;
  }
  .menu-md > ion-icon.red {
    color: #000;
    font-size: 2.2rem;
  }
  .list-group>li{
    text-align: left;
    padding:12px;
  }
  .footer12{
    width: 75%;
    margin:0 auto;
  }
  /* .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
  } */
  .card-menu>.card-body.approval {
    padding-left: 25px;
    padding-right: 25px;
  }
  .confirmbutton{
    margin-top: 25px;
    position: relative!important;
    left: auto;
    right: auto;
    display: block;
  }
  .accordion-button{
    padding: 15px 10px!important;
    padding-left: 0px!important;
  }
  .accordion-flush .accordion-item{
    border:0px!important;
  }
}
.profile-1{
  width: 80%;
}
@media (max-width: 720px) {
  .profile-1{
    width: 100%;
  }
}
@media (min-width: 721px) and (max-width: 996px) {
  .profile-1{
    width: 100%;
  }
}
.navbar-bottom{
  background-color: #fff!important;
  padding:0px;
  padding-bottom:18px;
}
.border-radius{
  position: relative;
}
.border-radius > *{
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  perspective: 1px;
}
.navbar-bottom-link > * > a{
  opacity: 0.7;
  font-size: 0.7rem;
  font-weight: 400;
  padding:6px 5px;
  border-top: 2px solid #fff;
}
.navbar-bottom-link > * > a > ion-icon {
  font-size: 1.7rem;
  padding-bottom: 2px;
}
.navbar-bottom-link > * > a.active{
  color: #065DA9;
  opacity: 1;
  border-top: 2px solid #065DA9;
}
.mobile-details-approve{
  color: #3a8663;
  border-radius: 8px;
  padding: 12px;
}
.mobile-details-approve>p,.mobile-details-cancel>p{
  font-size: 0.8rem!important;
}
.mobile-details-cancel{
  color: #DC3545;
  border-radius: 8px;
  padding: 12px;
}
.form-login{
  padding:12px 15px!important;
  font-size: 1rem;
  font-weight: 400;
  border:1px solid #c0c0c0;
}
.form-login:focus{
  border:1px solid #0D0C22!important;
}
.button-login{
  padding:12px 15px!important;
  font-size: 1.1rem;
  font-weight: 500;
  border:1px solid transparent;
  position: relative;
}