/* start erase format css*/

*

{

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}



input, textarea, select, button

{

    border: none;

    padding: 0;

    margin: 0;

    background: none;

    font: inherit;

}



.search input:focus

{

    all: unset;

}



ul

{

    list-style: none;

    padding: 0;

    margin: 0;

}



ol

{

    

    padding: 0;

    margin: 0;

}



ol li

{

    margin-left: 30px;

}



a

{

    text-decoration: none;

    color: inherit;

}



button

{

    border: none;

    padding: 0;

    margin: 0;

    background: none;

    font: inherit;

    cursor: pointer;

}



h1, h2, h3, h4, h5, h6

{

    font-weight: normal;

    font-size: 100%;

}



span

{

    font-size: 100%;

    font-weight: normal;

}



table

{

    border-collapse: collapse;

    border-spacing: 0;

}



th, td, tr

{

    border: none;

    padding: 0;

    margin: 0;

    background: none;

    font: inherit;

}



td, th

{

    white-space: nowrap;

}



/* End erase format css */

/* start konfigurasi */

:root

{

    --primary:#3461ff;

    --primarylight: #355db8;

    --primarydark: #0334a6;

    --primaryxd:#022a85;

    --primarygrey:#35559d;

    --secondary:#fff;

    --secondarytrans: rgba(255, 255, 255, 0.2);

    --warning:#ffa600;

    --lightwarning:#fff1c3;

    --danger:red;

    --disable:#afafaf;

    --light:#f7f8fa;

    --dark:#000;

    --gradient:linear-gradient(to bottom, #0060eb, #00c2fa);

    --gradientdark:linear-gradient(to right, #01397f, #0a87b5);

    --green:#12bf24;

    --lightgreen:#eaffed;

    --blue:#3361ff;

    --lightblue:#d0dbfc;

    --red:#e72e2e;

    --lightred:#e9b6b6;

    --black:#212529;

    --purple:#8932ff;

    --lightpurple:#e4d0ff;

    --orange:#ff6632;

    --lightorange:#ffd5c7;

    --darkpurple:#484776;

}



@font-face {

    font-family: Material Icons;

    font-style: normal;

    font-weight: 400;

    src: url(../assets/fonts/MaterialIcons-Regular.ttf) format('truetype');

}



@font-face {

    font-family: 'Arial Black';

    font-style: normal;

    font-weight: 400;

    src: url(../assets/fonts/ARIBLK.ttf) format('truetype');

}



@font-face {

    font-family: 'Arial Narrow';

    font-style: normal;

    font-weight: 400;

    src: url(../assets/fonts/ARIALN.TTF) format('truetype');

}



@font-face {

    font-family: 'Arial';

    font-style: normal;

    font-weight: 400;

    src: url(../assets/fonts/ARIAL.TTF) format('truetype');

}



@font-face {

    font-family: 'Times New Roman';

    font-style: normal;

    font-weight: 400;

    src: url(../assets/fonts/TIMES.TTF) format('truetype');

}



.i

{

    font-family: Material Icons;

    font-weight: normal;

    font-style: normal;

    font-size: 24px;

    display: inline-block;

    width: 1em;

    height: 1em;

    line-height: 1em;

    text-transform: none;

    letter-spacing: normal;

    word-wrap: normal;

    vertical-align: middle;

}



aside li .i, #profil li .i

{

    margin-left: 20px;

    margin-right: 10px;

}



.t

{

    margin-left: 0;

    margin-right: auto;

}



body, html

{

    height: 100%;

}



body

{

    font-family:Arial, Helvetica, sans-serif;

    display: grid;

    height: 100%;

}



.grid-login

{

    grid-template-rows: 52px 1fr 52px;

}



.header-login

{

    grid-row: 1;

    justify-content: flex-end;

}



.main-login

{

    grid-row: 2;

}



.footer-login

{

    grid-row: 3;

}



.grid-dashboard-1

{

    grid-template-rows:1fr 52px;

}



.grid-dashboard-2

{

    grid-template-columns:250px 1fr;

    display: grid;

    grid-row: 1;

}



.aside-dashboard

{

    grid-column: 1;

    background-color: var(--primarydark);

    color: #fff;

}



aside

{

    padding: 0 10px;

}



aside ul li, #profil ul li

{

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    transition: background-color 0.5s;

}



aside ul li:hover

{

    background-color: var(--secondarytrans);

}



aside ul ul li:hover

{

    background-color: var(--secondarytrans);

}



aside ul ul

{

    display: none;

    width: 100%;

    background-color: var(--primaryxd);

    transition: background-color 0.5s;

}



aside ul li a:focus ul

{

    display: block;

}



#profil

{

    display: none;

    position: absolute;

    background-color: var(--secondary);

    width: 150px;

    border-radius: 8px;

    color: var(--dark);

    padding: 8px 0;    

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

    margin-top: 4px;    

}



#profil ul

{

    flex-direction: column;

    width: 100%;

}



#profil ul li

{

    margin: 0;

    

}



#profil ul li:hover

{

    background-color: var(--lightblue);

}



.footer-dashboard

{

    grid-row: 2;

}



.grid-dashboard-3

{

    grid-template-rows:52px 1fr;

    display: grid;

    grid-column: 2;

    background-color: var(--light);

}



.header-dashboard

{

    grid-row: 1;

    justify-content: space-between;

}



.header-dashboard ul

{

    display: flex;

}

.content

{

    grid-row: 2;

    padding: 40px 30px;

    overflow-y: auto;

    max-height: calc(100vh - 190px);

}



.header-desktop

{

    background-image: var(--gradient);

    color: var(--secondary);

    display: flex;

    padding: 10px 20px;

    align-items: center;

}



.header-login ul

{

    display: flex;

    margin-right:130px;

}



.header-desktop ul li

{

    margin-left: 10px;

}



h1

{

    font-size: 20px;

}



.footer-desktop

{

    background-image: var(--gradient);

    color: var(--secondary);

    display: flex;

    justify-content: flex-start;

    padding: 18px 0 18px 16px;

    align-items: center;

}



.footer-desktop span

{

    margin-right: 5px;

    font-size: 14px;

}



aside ul li, #profil ul li

{

    font-size: 14px;

    cursor: pointer;

    line-height: 40px;

}



.tombol

{

    padding: 8px;

    font-size: 14px;

    cursor: pointer;

    justify-content: center;

    align-items: center;

    display: flex;

    border-radius: 4px;

}



.tombolgroup

{

    padding: 8px;

    font-size: 14px;

    justify-content: flex-start;

    align-items: center;

    display: flex;

    border-radius: 4px;

    column-gap: 10px;

}



.tombol img

{

    vertical-align: middle;

    width: 32px;

    margin-right: 8px;

}



.input

{

    padding: 8px;

    font-size: 14px;

    background-color: #fff;

    border: 1px solid var(--disable);

    border-radius: 4px;

}



/* Format Warna*/

.primary

{

    background-color: var(--primary);

    color: var(--secondary);

}

.txttableprimary

{

    color: #1f1f1f;

    font-weight:bold;

}



.detailinfo

{

    font-size: 16px;

    display: flex;

    gap: 1.125rem;

    flex-direction: column;

}

.listinfo

{

    font-size: 12px;

}

.iteminfo

{

    font-size: 14px;

}

.txttablesecondary

{

    color: #444746;

}

.txtprimary

{

    color: var(--primary);

}



.txtbold {

    font-weight: bold;

}



.primarylight

{

    background-color: var(--primarylight);

    color: var(--secondary);

}

.primarydark

{

    background-color: var(--primarydark);

    color: var(--secondary);

}



.disable

{

    background-color: var(--disable);

    color: var(--secondary);

}



.secondary

{

    background-color: var(--secondary);

    color: var(--dark);

    border: 1px solid var(--disable);

}



.noborder

{

    background-color: var(--secondary);

    color: var(--dark);

}



.warning-outline

{

    background-color: var(--secondary);

    color: var(--warning);

    border: 1px solid var(--warning);

}



.orange-outline

{

    background-color: var(--secondary);

    color: var(--orange);

    border: 1px solid var(--orange);

}



.green-outline

{

    background-color: var(--secondary);

    color: var(--green);

    border: 1px solid var(--green);

}



.danger-outline

{

    background-color: var(--secondary);

    color: var(--danger);

    border: 1px solid var(--danger);

}



.primary-outline

{

    background-color: var(--secondary);

    color: var(--primary);

    border: 1px solid var(--primary);

}



.txtsecondary

{

    color: var(--secondary);

}



.on

{

    background-color: var(--secondarytrans);

}



.txtwarning

{

    color: var(--warning);

}



.warning

{

    background-color: var(--warning);

    color: var(--secondary);

}



.danger

{

    background-color: var(--lightred);

    color: var(--red);

}



.blue

{

    background-color:var(--blue) ;

}



.green

{

    background-color:var(--green) ;

    color: var(--secondary);

}



.txtgreen

{

    color: var(--green);

}



.red

{

    background-color: var(--red);

    color: var(--secondary);

}







.black

{

    background-color:var(--black) ;

}



.purple

{

    background-color: var(--purple);

}



.orange

{

    background-color: var(--orange);

}



.darkpurple

{

    background-color: var(--darkpurple);

}



.lightred

{

    background-color: var(--lightred);

    color: var(--red);

    padding: 3px 10px;

    border-radius: 10px;

    font-size: 12px;

}



.lightgreen

{

    background-color: var(--lightgreen);

    color: var(--green);

    padding: 3px 10px;

    border-radius: 10px;

    font-size: 12px;

}



.lightwarning

{

    background-color: var(--lightwarning);

    color: var(--warning);

    padding: 3px 10px;

    border-radius: 10px;

    font-size: 12px;

}



/*End Format Warna*/



.main-desktop

{

    background-color: var(--light);

    display: flex;

}



.form-login

{

    display: flex;

    flex-direction: column;

    row-gap: 15px;

    font-size: 14px;

}



.container-login

{

    display: grid;

    grid-template-columns: 65% 35%;

    background-color: #fff;

    margin: 50px 150px;

    width: 100%;

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

    border-radius: 10px;

}



.item-login1

{

    grid-column: 1;

    background-image: var(--gradientdark);

    border-top-left-radius: 10px;

    border-bottom-left-radius: 10px;

    /*background-color: #12bf24;*/

    /*background-image: linear-gradient(to bottom, #660adf, #04141a);*/

}



.banner-login

{

    width: 100%;

    height: 100%;

}



.item-login2

{

    grid-column: 2;

    display: flex;

    

}



.wrap-login

{

    margin: auto 40px;

    width: 100%;

    display: flex;

    flex-direction: column;

    row-gap: 10px;

}



.wrap-login h2

{

    font-size: 20px;

    text-align: center;

}



.wrap-login h5

{

    font-size: 14px;

    text-align: center;

}



.divider

{

    height: 2px;

    background-color: var(--disable); 

}



.spacer

{

    width: 2px;

    background-color: var(--disable); 

}



.txtdanger

{

    color: var(--danger);

}

.txtdisable

{

    color: var(--disable);

}



.txtred

{

    color: var(--red);

}



.logo

{

    display: flex;

    justify-content: center;

    height: 52px;

    align-items: center;

    margin-bottom: 20px;

}



.logo img

{

    height: 20px;

}



.wrap-rekap, .wrap-manual

{

    color: var(--secondary);

    display: flex;

    flex-wrap: wrap;

    margin-bottom: 10px;

    justify-content: space-between;

    gap: 15px;

}



.wrap-rekap

{

    

}



.bar, .card-3

{

    padding: 20px 0;

    gap: 15px;

    border-radius: 4px;

}



.bar

{

    width: 100%;

    display: flex;

    flex-direction: column;

    padding: 20px;

}



.card-3

{

    width: calc(33.33% - 10px);

    display: flex;

    flex-direction: column;

    align-items: center;

    

}



.card-3 span

{

    text-align: center;

}



.card-3 div

{

    background-color: var(--secondarytrans);

    padding: 10px;

}



.data-title

{

    display: flex;

    font-size: 20px;

}



.data-info

{

    display: flex;

    justify-content: space-between;

}



.data-info i

{

    margin-left: 15px;

}



.data-subtitle, .data-subtitle i

{

    font-size: 12px;

}



.grid-board

{

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

}



.board-wrap, .pop

{

    background-color: var(--secondary);

    padding: 15px;

    gap: 15px;

    flex-direction: column;

    display: flex;

    /*border: 1px solid var(--disable);*/

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

    border-radius: 10px;

}



.board-wrap

{



}



.board-1

{

    grid-column: 1;

}

.board-2

{

    grid-column: 2;

}



.breadcrumb

{

    display: flex;

    margin-bottom: 15px;

    gap: 15px;

}



.group-action

{

    display: flex;

    gap: 10px;

    justify-content: space-between;

}



.group-action-tombol

{

    display: flex;

    gap: 10px;

}

.morerow

{

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));

}



.group-action .search

{

    margin-right: 0;

    margin-left: auto;

    font-size: 14px;

}



.group-action .i

{

    cursor: pointer;

}



.search form

{

    display: flex;

    align-items: center;

}



.search .input

{

    padding: 4px 4px 4px 8px;

    margin-left: 4px;

    vertical-align: middle;

    line-height: 24px;

}





.board-wrap thead

{

    /*background-color: var(--primary);

    color: var(--secondary);*/

}



.board-wrap thead tr

{

    line-height: 48px;

    border-bottom: 1px solid #c7c7c7;

}





.board-wrap tbody tr

{

    line-height: 48px;

    /* text-align: center;*/

    /* border-bottom: 1px solid var(--disable); */

    border-bottom: 1px solid #c7c7c7;

}



.board-wrap tbody tr:hover

{

    background-color: #e1e3e1;

}



.dataonly tbody tr:hover

{

    background-color: var(--secondary);

}



.dataonly tbody tr td

{

    text-align: left;

}



.board-wrap tbody .tombol

{

    /*padding: 5px 10px;*/

}



.td-action

{

    text-align: right;

    display: flex;

    gap: 10px;

    justify-content: center;

}



.td-action a 

{

    line-height: 1;

    width: fit-content;

}



tbody tr:hover

{

    /*background-color: var(--light);*/

}



.black-board

{

    display: none;

    position: fixed;

    z-index: 1000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.2);

    justify-content: center;

    align-items: flex-start;

}



.pop

{

    position: relative;

    width: 60%;

    margin-top: 26px;

    /*max-height: 80%;

    overflow-y: auto;*/

}



table, td input, td select

{

    width: 100%;

    font-size: 14px;

}



.pop table

{

    margin-bottom: 10px;

}



td input

{

    box-sizing: border-box;

}



.pop td

{

    line-height: 36px;

    padding: 5px 0;

    position: relative;

}



.pop td .input

{

    line-height: 1;

}



.datacontent

{

    overflow-y: auto;

    max-height: 400px;

    margin-bottom: 10px;

}



.overflow-content

{

    overflow-y: auto;

    max-height: 500px;

}



.datacontent#cb

{

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.cb

{

    width: calc(25% - 30px);

    padding: 8px;

    line-height: 30px;

    border: none;

    cursor: pointer;

    box-sizing: border-box;

    display: flex;

    gap: 5px;

}



.cbkelas

{

    width: auto;

    padding: 8px;

    line-height: 30px;

    border: none;

    box-sizing: border-box;

    display: flex;

    flex-wrap: nowrap;

    gap: 5px;

}



.cbkelas input

{

    width: auto;

}



.cbkelas input:hover, .cbkelas label:hover

{

    cursor: pointer;

}



.cb label

{

    cursor: pointer;

}



.cb.selected

{

    border: 1px solid var(--disable);

}



form .group-action a

{

    margin-left: auto;

    margin-right: 0;

}



form .group-action

{

    margin-top: 15px;

}



.pagination

{

    display: flex;

}



.pagination a

{

    padding: 5px;

    background-color: var(--secondary);

    color: var(--primary);

    border: 1px solid var(--disable);

}



.pagination .active

{

    background-color: var(--primary);

    color: var(--secondary);

    border: 1px solid var(--primary);

}



.kop 

{

    border-bottom: 2px solid #000;

    font-family: Arial Black;

}



.arial

{

    font-family: Arial;

}



.arialblack

{

    font-family: Arial Black;

}



.arialnarrow

{

    font-family: Arial Narrow;

}



.timesnewroman

{

    font-family: Times New Roman;

}



#result-siswa

{

    max-height: 500px;

    overflow-y: auto;

    position: absolute;

    width: 99%;

    z-index: 100;

    border: 1px solid var(--disable);

    border-radius: 4px;

    margin-top: 0;

    background-color: #fff;

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

}



#result-siswa:empty{

    border: none;

}



#result-siswa ul

{

    position: absolute;

    overflow-y: auto;

    max-height: 300px;

    width: 100%;

    z-index: 100;

    margin-top: 5px;

    border: 1px solid var(--black);

    border-radius: 10px;

}



#result-siswa ul li

{

    position: relative;

    z-index: 100;

    background-color: #fff;

    padding:0 8px;

}



#result-siswa ul li:hover

{

    cursor: pointer;

    background-color: var(--primary);

    color: var(--secondary);

}







#result-siswa th

{

    position: sticky;

    top: 0;

    z-index: 100;

    background-color: #fff;

    color: var(--green);

    border-bottom: 2px solid var(--green);

}



#result-siswa td

{

    text-align: center;

    line-height: 2;

}



#result-siswa tbody tr:hover

{

    background-color: var(--lightblue);

    color: #000;

    cursor: pointer;

}



.datacontent th

{

    position: sticky;

    top: 0;

    z-index: 100;

    background-color: var(--green);

    color: var(--secondary);

    line-height: 2;

    padding: 5px 0;

}



.datacontent td

{

    text-align: center;

    line-height: 2;

    border: 1px solid var(--green);

}



#pembayaran td

{

    text-align: left;

    padding-left: 10px;

    border: none;

}



#pembayaran tr:hover

{

    /*background-color: #fff;*/

}



.toaster

{

    display: flex;

    /*-webkit-box-align: center;*/

    align-items: center;

    /*-webkit-box-pack: justify;*/

    justify-content: space-between;

    width: 100%;

    background-color: var(--primary);

    padding: 12px 16px;

    border-radius: 8px;

    max-width: 560px;

    margin: 0px auto;

    position: fixed;

    top: 0px;

    left: 50%;

    z-index: 99999;

    transform: translate(-50%, 96px);

    transition: transform 0.3s ease-in-out;

    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);*/

}



.btn-toaster

{

    background-color: transparent;

    border: 0px;

    cursor: pointer;

    padding: 0px;

    margin-right: 8px;

    margin-left: 32px;

}

.dashboard-mobile {

    display: none;

}



td .group-action {

    margin: 0;

}

td .group-action a {

    margin-left: auto;

    margin-right: auto;

}

.mini td {

    line-height: normal;

}

.mini thead, .mini td {

    line-height: 36px;

}

.balon {

    background-color: var(--red);

    border-radius: 8px;

    font-size: 14px;

    color: var(--secondary);

    padding: 0 8px;

    margin-left: 5px;

}



#profilButton {

    width: 200px;

}



#profilButton .t {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.list-tagihan ul {

    margin-top: 10px;

    margin-bottom: 58px;

}

.list-tagihan ul li {

    background-color: var(--secondary);

    margin-bottom: 5px;

    display: flex;

    padding: 0 20px;

    gap: 20px;

    line-height: 58px;

}

.list-tagihan ul li label {

    display: flex;

    justify-content: space-between;

    width: 100%;

}

.checkout {

    /*position: fixed;*/

    bottom: 58px;

    margin-bottom: 0;

    width: 100%;

    background-color: var(--secondary);

    display: flex;

    height: 58px;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    border-top: 1px solid var(--primarylight);

    border-bottom: 1px solid var(--primarylight);

}



#selectAll {

    margin-left: 20px;

}

#bayar {

    margin-right: 20px;

    display: flex;

    gap: 20px;

}

#bayar span {

    text-align: right;

}

span.no-tagihan {

    width: 100%;

    text-align: center;

}

#textArea {

    display: flex;

}

#textArea textarea {

    width: 100%;

    border: 1px solid var(--dark);

    border-radius: 4px;

    line-height: normal;

    padding: 8px;

}

td#detailpesan {

    white-space: wrap;

}







/*CSS Mobile */



@media only screen and (max-width: 768px) {

body

{

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}

.main-desktop

{

    background-color: transparent;

    display: flex;

}

.header-login ul

{

    display: flex;

    flex-direction: column;

    margin-right:0;

}

.header-desktop h1

{

    text-align: center;

    font-size: 18px;

}

.footer-desktop

{

    display: flex;

    flex-wrap: wrap;

    text-align: center;

    justify-content: center;

    padding: 18px 0 18px 16px;

    align-items: center;

}

.container-login

{

    display: flex;

    margin: 0;

    width: 100%;

    box-shadow: none;

    border-radius: 0;

    padding: 0;

}

.item-login1

{

    display: none;

}

.header-desktop ul

{

    display: none;

}

.wrap-login

{

    margin: 20px;

    width: 100%;

    display: flex;

    flex-direction: column;

    row-gap: 10px;

}

.item-login2

{

    display: flex;

    width: 100%;

}

.tombol

{

    padding: 14px;

    font-size: 14px;

    cursor: pointer;    

}



.tombolgroup

{

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

    gap: 10px;

    text-align: center;

}



.form-login

{

    display: flex;

    flex-direction: column;

    row-gap: 15px;

    font-size: 14px;

}

.input

{

    padding: 14px;

    font-size: 14px;

    background-color: #fff;

    border: 1px solid var(--disable);

    border-radius: 4px;

}

.grid-dashboard-2

{

    display: flex;

    flex-direction: column-reverse;

}

.grid-dashboard-3

{

    display: flex;

    flex-direction: column;

}

.aside-dashboard

{

    display: flex;

    flex-direction: column;

    background-color: var(--secondary);

    color: var(--disable);

    margin:0;

    position: fixed;

    width:100%;

    bottom: 0;

    left: 0;

}

.on

{

    background-color: var(--secondarytrans);

    color: var(--primarydark);

}

.on ul {

    display: none !important;

}

aside {

    padding: 0;

}



aside li .i {

    margin: 0 20px;

}

aside ul

{

    /*display: flex;

    overflow-x: auto;

    justify-content: space-around;*/

    border-top: 1px solid var(--primarydark);

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));

    gap: 10px;

}

aside ul li

{

    display: flex;

    flex-direction: column;

    padding: 7px 0;

    width: 100%;

    justify-content: center;

    align-items: center;

}

aside ul li .t

{

    font-size: 10px;

    text-align: center;

    margin: 0;

    padding: 0;

    line-height: 2;

}

aside ul li i:nth-of-type(2)

{

    display: none;

}

aside ul li ul

{

    position: absolute;

    bottom: 64px;

    display: flex;

    flex-direction: column;

    /*padding: 0;*/

    

}

aside ul li ul li

{

    padding: 0;

    border: 1px solid var(--secondary);

    box-sizing: border-box;

}

aside ul ul

{

    display: none;

    width: auto;

    background:none;   

    background-color: var(--secondary);

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

    padding: 8px;

    border-radius: 8px;

    border: none;

}

aside li ul li .i

{

    display: none;

}

aside ul li ul li .t

{

    font-size: 14px;

    color: #000;

    margin-right: auto;

    padding: 12px;

}

aside .logo

{

    display: none;

    margin: 0;

    justify-content: flex-start;

}



header.mobile

{

    display: none;

}

.grid-board

{

    display: flex;

    flex-direction: column;

    grid-template-columns: 1fr 1fr;

    gap: 0;

}

.wrap-manual

{

    color: var(--secondary);

    display: flex;

    flex-direction: column;

    margin-bottom: 10px;

    justify-content: space-between;

    gap: 15px;

}

.wrap-rekap {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    margin-bottom: 10px;

    gap: 15px;

}

.bar

{

    width: 100%;

    display: flex;

    flex-direction: column;

    padding: 0;

    flex-wrap: wrap;

}



.bar .i, .bar .data-subtitle

{

    display: none;

}



.card-3

{

    width: 100%;

    display: flex;

    /*flex-direction: row-reverse;*/

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-around;

    

}

#sisa_tagihan.card-3 {

    align-items: flex-start;

}

.data-info

{

    display: flex;

    padding: 20px;

    flex-direction: column-reverse;

}



footer.mobile

{

    display: none;

}



.tablemobile

{

    overflow-x: auto;

}



.tablemobile td, .tablemobile th, .mini td, .mini th, #result-siswa td, #result-siswa th

{

    height: 60px;

    vertical-align: middle;

}



.tablemobile td, .mini td, #result-siswa td

{    

    border-bottom: 1px solid var(--disable);

    padding: 5px;

}

.group-action

{

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}

.pop

{

    width: 100%;

    height: 100%;

    margin: 0;

}

.pop tr, .dataonly tr

{

    display: flex;

    flex-direction: column;

}

.dataonly {

    justify-content: center;

    display: flex;

    flex-direction: column;

    gap:10px

}



.mini tr

{

    display: table-row;

}





td .tombol

{

    padding: 0 20px;

    border: none;

    background-color: transparent;

}



.board-wrap, .pop

{

    /*background-color: var(--secondary);*/

    padding: 15px;

    gap: 15px;

    flex-direction: column;

    display: flex;

    /*border: 1px solid var(--disable);*/

    box-shadow: none;

    border-radius: 0;

}



.board-wrap.primarylight {

    background-color: var(--primarylight);

}

.content

{

    padding: 0;

    overflow-y: auto;

    min-height: calc(100vh - 116px);

    max-height: calc(100vh - 116px);

    margin: 58px 0;        

}

.breadcrumb

{

    margin: 10px 20px;

}

#result-siswa tr

{

    display: table-row;

    text-align: center;

    line-height: 2;

}

.dashboard-mobile {

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    padding: 5px;

    position: fixed;

    background-color: var(--primarydark);

    top: 0;

    width: 100%;

}

.logo, .profil-mobile

{

    display: flex;

    height: 48px;

    margin-bottom: 0;

}



.logo {

    margin-left: 10px;

}

.profil-mobile {

    margin-right: 10px;

}



#profilButton {

    width: 48px;

    background: none;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    border: 3px solid var(--secondary);

}



#profilButton img {

    height: 52px;

    width: auto;

    object-fit: contain;

}

#Home.dashboard-mobile {

    background-color: var(--primarylight);

}

#Pembayaran.dashboard-mobile, #Profil.dashboard-mobile {

    background-color: var(--secondary);

    padding: 17px 12px;

}

.nama-mobile {

    display: flex;

    color: var(--secondary);

    justify-content: flex-start;

    align-items: center;

}

.nama-mobile .t{

    max-width: 200px;

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

}

.bantuan-mobile {

    background-color: var(--primarydark);

    color: var(--secondary);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 5px;

    gap: 5px;

    border-radius: 4px;

    margin-right: 8px;

}

.bantuan-mobile .t {

    font-size: 10px;

    

}

.card-3.primarydark span {

    margin-left: 20px;

}

.list-tagihan ul {

    margin-top: 10px;

    margin-bottom: 58px;

}

.list-tagihan ul li {

    background-color: var(--secondary);

    margin-bottom: 5px;

    display: flex;

    padding: 0 20px;

    gap: 20px;

    line-height: 58px;

}

.list-tagihan ul li label {

    display: flex;

    justify-content: space-between;

    width: 100%;

}



.checkout {

    position: fixed;

    bottom: 58px;

    margin-bottom: 0;

    width: 100%;

    background-color: var(--secondary);

    display: flex;

    height: 58px;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    border-top: 1px solid var(--primarylight);

    border-bottom: 1px solid var(--primarylight);

}



#selectAll {

    margin-left: 20px;

}

#bayar {

    margin-right: 20px;

    display: flex;

    gap: 20px;

}

#bayar span {

    text-align: right;

}

span.no-tagihan {

    width: 100%;

    text-align: center;

}

.primary-outline

{

    background-color: var(--secondary);

    color: var(--primarydark);

    border: 1px solid var(--primarydark);

}

.group-action-tombol {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(150px,1fr));

    gap: 10px;

}

.overflow-content

{

    /*overflow-y: auto;*/

    max-height: calc(100vh - 84px);

}

























} /* end css mobile */