@media only screen and (max-width: 768px) {
   /* For mobile phones: */
   body{
      min-height: 100vh !important;
   }

   .content-wrapper {
      min-height: 100vh !important;
   }
 }
@font-face {
   font-family: 'FontAwesome';
   src: url('../font/fontawesome-webfont.eot?v=4.7.0');
   src: url('../font/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../font/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../font/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../font/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../font/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: 'Glyphicons Halflings';
   src: url('../font/glyphicons-halflings-regular.eot');
   src: url('../font/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../font/glyphicons-halflings-regular.woff') format('woff'), url('../font/glyphicons-halflings-regular.ttf') format('truetype'), url('../font/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
.btn-purple {
   color: #fff;
   background-color: #6f42c1;
   border-color: #6f42c1;
   box-shadow: none;
}
.btn-purple:hover {
   color: #fff;
   background-color: #633ea7;
   border-color: #633ea7;
}
.btn-purple:focus, .btn-purple.focus {
   color: #fff;
   background-color: #633ea7;
   border-color: #633ea7;
   box-shadow: 0 0 0 0 rgba(99, 62, 167, 0.5);
}
.btn-purple.disabled, .btn-purple:disabled {
   color: #fff;
   background-color: #6f42c1;
   border-color: #6f42c1;
}
.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show>.btn-purple.dropdown-toggle {
   color: #fff;
   background-color: #633ea7;
   border-color: #633ea7;
}
.btn-purple:not(:disabled):not(.disabled):active:focus, .btn-purple:not(:disabled):not(.disabled).active:focus, .show>.btn-purple.dropdown-toggle:focus {
   box-shadow: 0 0 0 0 rgba(99, 62, 167, 0.5);
}
.btn-outline-purple {
   color: #6f42c1;
   border-color: #6f42c1;
}
.btn-outline-purple:hover {
   color: #fff;
   background-color: #6f42c1;
   border-color: #6f42c1;
}
.btn-outline-purple:not(:disabled):not(.disabled).active, .btn-outline-purple:not(:disabled):not(.disabled):active, .show>.btn-outline-purple.dropdown-toggle {
   color: #fff;
   background-color: #6f42c1;
   border-color: #6f42c1;
}
.btn-outline-purple.focus, .btn-outline-purple:focus {
   box-shadow: 0 0 0 0 rgba(99, 62, 167, 0.5);
}
[class*="accent-"] a.btn-purple {
   color: #fff;
}
[data-toggle="tooltip"] {
   position: relative;
}
.control-sidebar-light {
   background-color: #4b545c;
}
.control-sidebar-light, .control-sidebar-light a, .control-sidebar-light .nav-link {
   color: #c2c7d0;
}
.control-sidebar-light a:hover {
   color: #fff;
}
.control-sidebar-light h1, .control-sidebar-light h2, .control-sidebar-light h3, .control-sidebar-light h4, .control-sidebar-light h5, .control-sidebar-light h6, .control-sidebar-light label {
   color: #fff;
}
.control-sidebar-light .nav-tabs {
   background-color: rgba(255, 255, 255, 0.1);
   border-bottom: 0;
   margin-bottom: 5px;
}
.control-sidebar-light .nav-tabs .nav-item {
   margin: 0;
}
.control-sidebar-light .nav-tabs .nav-link {
   border-radius: 0;
   padding: 10px 20px;
   position: relative;
   text-align: center;
}
.control-sidebar-light .nav-tabs .nav-link, .control-sidebar-light .nav-tabs .nav-link:hover, .control-sidebar-light .nav-tabs .nav-link:active, .control-sidebar-light .nav-tabs .nav-link:focus, .control-sidebar-light .nav-tabs .nav-link.active {
   border: 0;
}
.control-sidebar-light .nav-tabs .nav-link:hover, .control-sidebar-light .nav-tabs .nav-link:active, .control-sidebar-light .nav-tabs .nav-link:focus, .control-sidebar-light .nav-tabs .nav-link.active {
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-top-color: transparent;
   color: #fff;
}
.control-sidebar-light .nav-tabs .nav-link.active {
   background-color: #343a40;
}
.control-sidebar-light .tab-pane {
   padding: 10px 15px;
}
.page-link {
   border: none;
   border-radius: 5px;
}
.page-link:focus {
   box-shadow: none;
}
table.dataTable {
   clear: both;
   margin-top: 10px !important;
   margin-bottom: 10px !important;
   max-width: none !important;
   border-collapse: separate !important;
}
table.dataTable td, table.dataTable th {
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
}
table.dataTable td.dataTables_empty, table.dataTable th.dataTables_empty {
   text-align: center;
}
table.dataTable.nowrap th, table.dataTable.nowrap td {
   white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_length label {
   font-weight: normal;
   text-align: left;
   white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_length select {
   width: 75px;
   display: inline-block;
}
div.dataTables_wrapper div.dataTables_filter {
   text-align: right;
}
div.dataTables_wrapper div.dataTables_filter label {
   font-weight: normal;
   white-space: nowrap;
   text-align: left;
}
div.dataTables_wrapper div.dataTables_filter input {
   margin-left: 0.5em;
   display: inline-block;
   width: auto;
}
div.dataTables_wrapper div.dataTables_info {
   padding-left: 10px;
   white-space: nowrap;
}
table.dataTable.no-footer {
   border-bottom: 1px solid #ddd;
}
div.dataTables_wrapper div.dataTables_processing {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 200px;
   margin-left: -100px;
   margin-top: -26px;
   text-align: center;
   padding: 1em 0;
}
table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting {
   padding-right: 30px;
}
table.dataTable thead>tr>th:active, table.dataTable thead>tr>td:active {
   outline: none;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
   cursor: pointer;
   position: relative;
}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
   position: absolute;
   bottom: 8px;
   right: 8px;
   display: block;
   font-family: 'Glyphicons Halflings';
   opacity: 0.5;
}
table.dataTable thead .sorting:after {
   opacity: 0.2;
   content: "\e150";
   /* sort */
}
table.dataTable thead .sorting_asc:after {
   content: "\e155";
   /* sort-by-attributes */
}
table.dataTable thead .sorting_desc:after {
   content: "\e156";
   /* sort-by-attributes-alt */
}
table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
   color: #eee;
}
div.dataTables_scrollHead table.dataTable {
   margin-bottom: 0 !important;
}
div.dataTables_scrollBody table {
   border-top: none;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
}
div.dataTables_scrollBody table thead .sorting:after, div.dataTables_scrollBody table thead .sorting_asc:after, div.dataTables_scrollBody table thead .sorting_desc:after {
   display: none;
}
div.dataTables_scrollBody table tbody tr:first-child th, div.dataTables_scrollBody table tbody tr:first-child td {
   border-top: none;
}
div.dataTables_scrollFoot table {
   margin-top: 0 !important;
   border-top: none;
}
@media screen and (max-width: 767px) {
   div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
      text-align: center;
   }
}
table.dataTable.table-condensed>thead>tr>th {
   padding-right: 20px;
}
table.dataTable.table-condensed .sorting:after, table.dataTable.table-condensed .sorting_asc:after, table.dataTable.table-condensed .sorting_desc:after {
   top: 6px;
   right: 6px;
}
table.table-bordered.dataTable th, table.table-bordered.dataTable td {
   border-left-width: 0;
}
table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child, table.table-bordered.dataTable td:last-child {
   border-right-width: 0;
}
table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
   border-bottom-width: 0;
}
div.dataTables_scrollHead table.table-bordered {
   border-bottom-width: 0;
}
div.table-responsive>div.dataTables_wrapper>div.row {
   margin: 0;
}
div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child {
   padding-left: 0;
}
div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child {
   padding-right: 0;
}
table.dataTable .btn-simple.btn-icon {
   padding: 3px;
}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
   position: relative;
   display: inline-block;
   bottom: 1px;
   right: -7px;
   font-family: 'FontAwesome';
   opacity: 0.8;
   font-size: 12px;
}
table.dataTable thead .disabled-sorting.sorting:after, table.dataTable thead .disabled-sorting.sorting_asc:after, table.dataTable thead .disabled-sorting.sorting_desc:after, table.dataTable thead .disabled-sorting.sorting_asc_disabled:after, table.dataTable thead .disabled-sorting.sorting_desc_disabled:after {
   display: none;
}
table.dataTable thead .sorting:after {
   opacity: 0.4;
   content: "\f0dc";
}
table.dataTable thead .sorting_asc:after {
   content: "\f0de";
   top: 2px;
}
table.dataTable thead .sorting_desc:after {
   content: "\f0dd";
   top: -3px;
}
table.dataTable>thead>tr>th, table.dataTable>tbody>tr>th, table.dataTable>tfoot>tr>th, table.dataTable>thead>tr>td, table.dataTable>tbody>tr>td, table.dataTable>tfoot>tr>td {
   padding: 10px !important;
   outline: 0;
}
table.dataTable>thead>tr:not(.border)>th {
   border: none;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.child, table.dataTable.dtr-inline.collapsed>tbody>tr>th.child, table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty {
   cursor: default !important;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.child:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.child:before, table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before {
   display: none !important;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child {
   position: relative;
   padding-left: 30px;
   cursor: pointer;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
   top: 50%;
   margin-top: -9px;
   left: 4px;
   height: 18px;
   width: 18px;
   display: block;
   position: absolute;
   color: #4caf50;
   border: 0px solid white;
   border-radius: 14px;
   box-shadow: 0 0 3px #444;
   box-sizing: content-box;
   text-align: center;
   font-family: 'Courier New', Courier, monospace;
   line-height: 18px;
   content: '+';
   background-color: #FFF;
}
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before {
   content: '-';
   color: #f44336;
}
table.dataTable.dtr-inline.collapsed>tbody>tr.child td:before {
   display: none;
}
table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child, table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child {
   padding-left: 27px;
}
table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child:before {
   top: 5px;
   left: 4px;
   height: 14px;
   width: 14px;
   border-radius: 14px;
   line-height: 14px;
   text-indent: 3px;
}
table.dataTable.dtr-column>tbody>tr>td.control, table.dataTable.dtr-column>tbody>tr>th.control {
   position: relative;
   cursor: pointer;
}
table.dataTable.dtr-column>tbody>tr>td.control:before, table.dataTable.dtr-column>tbody>tr>th.control:before {
   top: 50%;
   left: 50%;
   height: 16px;
   width: 16px;
   margin-top: -10px;
   margin-left: -10px;
   display: block;
   position: absolute;
   color: white;
   border: 2px solid white;
   border-radius: 14px;
   box-shadow: 0 0 3px #444;
   box-sizing: content-box;
   text-align: center;
   font-family: 'Courier New', Courier, monospace;
   line-height: 14px;
   content: '+';
   background-color: #31b131;
}
table.dataTable.dtr-column>tbody>tr.parent td.control:before, table.dataTable.dtr-column>tbody>tr.parent th.control:before {
   content: '-';
   background-color: #d33333;
}
table.dataTable>tbody>tr.child {
   padding: 0.5em 1em;
}
table.dataTable>tbody>tr.child:hover {
   background: transparent !important;
}
table.dataTable>tbody>tr.child ul {
   display: inline-block;
   list-style-type: none;
   margin: 0;
   padding: 0;
}
table.dataTable>tbody>tr.child ul li {
   border-bottom: 1px solid #efefef;
   padding: 0.5em 0;
}
table.dataTable>tbody>tr.child ul li:first-child {
   padding-top: 0;
}
table.dataTable>tbody>tr.child ul li:last-child {
   border-bottom: none;
}
table.dataTable>tbody>tr.child span.dtr-title {
   display: inline-block;
   min-width: 75px;
   font-weight: bold;
}
.material-datatables .input-sm {
   height: 35px;
   padding: 0;
}
@media screen and (max-width: 767px) {
   div.dtr-modal div.dtr-modal-display {
      width: 95%;
   }
   table.dataTable>tbody>tr>td:first-child {
      padding-left: 30px !important;
   }
   table>thead>tr>th {
      width: 60px !important;
   }
}
@media all and (min-width: 520px) and (max-width: 730px) {
   table.dataTable .btn-simple.btn-icon {
   display: block;
   margin: 0;
   }
}
.table>thead>tr>th {
   border-bottom: 1px solid #ddd !important;
   border-bottom-width: 2px;
   font-size: 1.25em;
   font-weight: 500;
}
.table .radio, .table .checkbox {
   margin-top: -1px;
   margin-bottom: 0;
   padding: 0;
   width: 15px;
}
.table .radio .icons, .table .checkbox .icons {
   position: relative;
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
   padding: 12px 8px;
   vertical-align: middle;
}
.table>tbody>tr {
   position: relative;
}
.card .table {
   margin-bottom: 0;
}
.card .table tr:first-child td {
   border-top: none;
}
.table-no-bordered>tbody>tr>td {
   border: none !important;
   font-size: 14px;
}
table#datatables thead>tr {
   margin: 10px 0px;
}
table#datatables thead th {
   border-bottom: 1px solid #dddddd;
}
table.datatablesmaterial thead>tr {
   margin: 10px 0px;
}
table.datatablesmaterial thead th {
   border-bottom: 1px solid #dddddd;
}
.dataTables_wrapper .dataTables_paginate {
   float: right;
   text-align: right;
   padding-top: .25em
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
   box-sizing: border-box;
   display: inline-block;
   min-width: 2.5em;
   padding: 0rem 0rem;
   margin-left: 2px;
   text-align: center;
   text-decoration: none !important;
   cursor: pointer;
   color: #333 !important;
   border: 1px solid transparent;
   border-radius: 2px
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
   color: #fff !important;
   border: 1px solid #fff;
   background-color: #fff;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #fff));
   background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
   background: -moz-linear-gradient(top, #fff 0%, #fff 100%);
   background: -ms-linear-gradient(top, #fff 0%, #fff 100%);
   background: -o-linear-gradient(top, #fff 0%, #fff 100%);
   background: 2near-gradient(to bottom, #fff 0%, #fff 100%);
   padding: 0rem 0rem;
   border-radius: .2rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
   cursor: default;
   color: #666 !important;
   border: 1px solid transparent;
   background: transparent;
   box-shadow: none
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
   color: #fff !important;
   border: 1px solid #fff;
   background-color: #fff;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #fff));
   background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
   background: -moz-linear-gradient(top, #fff 0%, #fff 100%);
   background: -ms-linear-gradient(top, #fff 0%, #fff 100%);
   background: -o-linear-gradient(top, #fff 0%, #fff 100%);
   background: 2near-gradient(to bottom, #fff 0%, #fff 100%);
   padding: 0rem 0rem;
   border-radius: .2rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
   outline: none;
   background-color: #fff;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #fff));
   background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
   background: -moz-linear-gradient(top, #fff 0%, #fff 100%);
   background: -ms-linear-gradient(top, #fff 0%, #fff 100%);
   background: -o-linear-gradient(top, #fff 0%, #fff 100%);
   background: linear-gradient(to bottom, #fff 0%, #fff 100%);
   box-shadow: none
}
.dataTables_wrapper .dataTables_paginate .ellipsis {
   padding: 0 1em
}
/* Background Loading*/

.bg {
   background: rgba(255, 255, 255, 0.7);
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: 1052;
}
.sk-wave {
   margin: 0px auto;
   width: 50px;
   height: 40px;
   text-align: center;
   font-size: 10px;
   position: fixed;
   top: 50%;
   left: 50%;
}
.sk-wave .sk-rect {
   background-color: #333;
   height: 100%;
   width: 6px;
   display: inline-block;
   -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
   animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}
.sk-wave .sk-rect1 {
   -webkit-animation-delay: -1.2s;
   animation-delay: -1.2s;
}
.sk-wave .sk-rect2 {
   -webkit-animation-delay: -1.1s;
   animation-delay: -1.1s;
}
.sk-wave .sk-rect3 {
   -webkit-animation-delay: -1s;
   animation-delay: -1s;
}
.sk-wave .sk-rect4 {
   -webkit-animation-delay: -0.9s;
   animation-delay: -0.9s;
}
.sk-wave .sk-rect5 {
   -webkit-animation-delay: -0.8s;
   animation-delay: -0.8s;
}
@-webkit-keyframes sk-waveStretchDelay {
   0%, 40%, 100% {
      -webkit-transform: scaleY(0.4);
      transform: scaleY(0.4);
   }
   20% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
   }
}
@keyframes sk-waveStretchDelay {
   0%, 40%, 100% {
      -webkit-transform: scaleY(0.4);
      transform: scaleY(0.4);
   }
   20% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
   }
}
/* End Background Loading*/

[data-notify="progressbar"] {
   margin-bottom: 0px;
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
   height: 5px;
   background-color: #000;
}  

.pills-menu {
   gap: 8px 8px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
   color: #fff;
   background-color: #6f42c1;
   transition: all .5s;
}
.pills-menu .nav-link:not(.active) {
   color: #495057;
   background-color: #b6b7b8;
}
.pills-menu .nav-link:not(.active):hover {
   color: #495057;
   background-color: #6f42c1;
   transition: all .5s;
}
.nav-pills .nav-link:not(.active):hover {
   background-color: #6f42c1;
   color: #fff;
}
.alert-purple {
   color: #fff;
   background-color: #6f42c1;
   border-color: #6f42c1;
}
.widget-user .widget-user-image {
   left: 50%;
   margin-left: -60px;
   position: absolute;
   top: 85px;
}
.widget-user .widget-user-image>img {
   border: 0px;
   height: auto;
   width: 125px;
}
.toasts-top-right {
   position: absolute;
   right: 5px;
   top: 5px;
   z-index: 1040;
}
.widget-user .card-footer {
   padding-top: 50px;
   padding-bottom: 35px;
}
.height-375 {
   height: 375px;
}
.max-height-250 {
   max-height: 250px;
}
.fz-12 {
   font-size: 12px !important;
}

.p-5px {
   padding: 5px !important;
}

.my-rounded{
   border-radius: 10px;
}


.img-dashboard{
   border-radius: 10px;
}

.small-box{
   overflow: hidden;
}
.status-pembayaran{
   position: absolute;
   bottom: 10%;
   right: -23px;
   transform: rotate(-45deg);
   color: rgba(0, 0, 0, .45);
   text-align: center;
}

.user-dashboard{
   width: 100%;
   background: white;
   border-radius: 10px;
   box-shadow: 0 0 2px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
   padding: 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.user-dashboard-detail{

}

.user-dashboard-detail h4{
   font-size: 18px;
   font-weight: 600;
}

.user-dashboard-detail h5{
   font-size: 16px;
}

.img-card-dashboard{
   width: 60px;
   height: 60px;
   object-fit: cover;
   object-position: 0% 0%;
   border-radius: 50%;
   margin: 2% 0;
}

.widget-dashboard{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}


.circle-icon.bi{
   display: inline-block;
   border-radius: 10px;
   box-shadow: 0 0 2px #888;
   padding: 0.3em 0.5em;
   font-size: 1.5rem;
}

.shadow-top{
   box-shadow: 1px -3px 29px -2px rgba(0,0,0,0.2);
}

.my-rounded-top{
   border-top-right-radius: 25px;
   border-top-left-radius: 25px;
}

.my-navbar .navbar-nav{
   align-items: center;
}

.circle{
   width: 40px;
   height: 40px;
   object-position: 0% 0%;
   object-fit: cover;
   border-radius: 50%;
}

.presensi .info-box{
   min-height: 96px;
}

:root {
   --card-line-height: 1.2em;
   --card-padding: 12px;
   --card-radius: 0.5em;
   --color-green: #558309;
   --color-gray: #e2ebf6;
   --color-dark-gray: #c4d1e1;
   --radio-border-width: 2px;
   --radio-size: 1.5em;
 }

.grid-rekening{
   display: grid;
   grid-gap: var(--card-padding);
   margin: 0 auto;
   max-width: 100%;
   padding: 0;
   align-items: start;
   
   @media (min-width: 42em) {
      grid-template-columns: repeat(3, 1fr);
   }
}

.card-rekening{
   background-color: #fff;
   border-radius: var(--card-radius);
   position: relative;
   
   &:hover {
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
   }
}

.radio{
   font-size: inherit;
   margin: 0;
   position: absolute;
   right: calc(var(--card-padding) + var(--radio-border-width) - 10px);
   top: calc(var(--card-padding) + var(--radio-border-width) - 10px);
}

@supports(-webkit-appearance: none) or (-moz-appearance: none) { 
   .radio {
     -webkit-appearance: none;
     -moz-appearance: none;
     background: #fff;
     border: var(--radio-border-width) solid var(--color-gray);
     border-radius: 50%;
     cursor: pointer;
     height: var(--radio-size);
     outline: none;
     transition: 
       background 0.2s ease-out,
       border-color 0.2s ease-out;
     width: var(--radio-size); 
 
     &::after {
       border: var(--radio-border-width) solid #fff;
       border-top: 0;
       border-left: 0;
       content: '';
       display: block;
       height: 0.75rem;
       left: 25%;
       position: absolute;
       top: 50%;
       transform: 
         rotate(45deg)
         translate(-50%, -50%);
       width: 0.375rem;
     }
 
     &:checked {
       background: var(--color-green);
       border-color: var(--color-green);
     }
   }
   
   .card-rekening:hover .radio {
     border-color: var(--color-dark-gray);
     
     &:checked {
       border-color: var(--color-green);
     }
   }
 }

 .rekening-details {
   border: var(--radio-border-width) solid var(--color-gray);
   border-radius: var(--card-radius);
   cursor: pointer;
   display: flex;
   flex-direction: column;
   padding: var(--card-padding);
   transition: border-color 0.2s ease-out;
 }

 .card-rekening:hover .plan-details {
   border-color: var(--color-dark-gray);
 }
 
 .radio:checked ~ .plan-details {
   border-color: var(--color-green);
 }
 
 .radio:focus ~ .plan-details {
   box-shadow: 0 0 0 2px var(--color-dark-gray);
 }
 
 .radio:disabled ~ .plan-details {
   color: var(--color-dark-gray);
   cursor: default;
 }
 
 .radio:disabled ~ .plan-details .plan-type {
   color: var(--color-dark-gray);
 }
 
 .card-rekening:hover .radio:disabled ~ .plan-details {
   border-color: var(--color-gray);
   box-shadow: none;
 }
 
 .card-rekening:hover .radio:disabled {
     border-color: var(--color-gray);
   }
 
 .rekening-type {
   color: var(--color-green);
   font-size: 16px;
   font-weight: bold;
   line-height: 1em;
 }
 
 .rekening-cost {
   font-size: 18px;
   font-weight: bold;
   padding: 0.5rem 0;
 }
 
 .slash {
   font-weight: normal;
 }
 
 .rekening-cycle {
   font-size: 2rem;
   font-variant: none;
   border-bottom: none;
   cursor: inherit;
   text-decoration: none;
 }
 
 .hidden-visually {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   white-space: nowrap;
   width: 1px;
 }

 .checkbox {
   -webkit-appearance: none;
   -moz-appearance: none;
   cursor: pointer;
   background: #aeb0b3;
   border-radius: 50%;
   height: 2em;
   margin: 0;
   margin-left: auto;
   flex: none;
   outline: none;
   position: absolute;
   top: 0;
   right: 0;
   transition: all 0.2s;
   width: 2em; 
   
   &:after {
     border: 2px solid #fff;
     border-top: 0;
     border-left: 0;
     content: '';
     display: block;
     height: 1em;
     left: 0.625em;
     position: absolute;
     top: 0.25em;
     transform: rotate(45deg);
     width: 0.5em;
   }
   
   &:focus {
       box-shadow: 0 0 0 2px rgba(100, 193, 117, 0.6);
     }
   
   &:checked {
     background: #6f42c1;
     border-color: #6f42c1;
   }
 }

 .checkbox-control__target {
   bottom: 0;
   cursor: pointer;
   left: 0;
   opacity: 0;
   position: absolute;
   right: 0;
   top: 0;
 }

 .checkbox-control{
   position: absolute;
   top: 5%;
   right: 5%;
   width: 100%;
   height: 100%;
 }

 .btn-dister{
   background-color: #03AABD;
   color: #fff;
 }

 .btn-bayar{
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .label-item{
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .btn-clear-cart:hover{
   box-shadow: 0 0 0 0 rgba(99, 62, 167, 0.5);
   
 }

 @media only screen and (max-width: 768px) {
   /* For mobile phones: */
   .btn-bayar{
     position: fixed;
     bottom: 100px;
     width: 92%;
     height: 48px;
     margin: 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     z-index: 99;
   }

   /* .checkout-sum{
      position: fixed;
      bottom: 100px;
      width: 92%;
      justify-content: center;
   } */
  
 }