body {
    /* width: 1100px; */
    margin: auto;
}








.page_home {
    height: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
}

.page_home .opening h1 {
    font-family: archivo;
    font-size: 50px;
    margin-top: 0;
    color: #303030;
    font-weight: bold;
    margin-bottom: 11px;
}

.page_home .opening {
    margin: auto;
    margin-right: 20%;
}

#pg_2 .opening h6 {
    font-family: Poppins;
    font-size: 13px;
    font-weight: 100;
    color: #6f6f6f;
    margin-top: 0px;
    line-height: 1.8;
    text-align: right;
}


.page_home .opening a{
    border-bottom: #717171 1px solid;
    font-family: Poppins;
    color: #717171;
    font-size: 11px;
    padding: 11px;
    -webkit-transition: 0.2s;
    transition: 0.2s ease-in-out;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid;
    }

.page_home .opening a:hover {
    background: #717171;
    color: white;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.cover_opening {
    width: 85%;
    margin: auto;
    margin-right: 0;
}

.footer {border-top: 1px solid #d5d5d5;padding-top: 50px;padding-bottom: 50px;font-family: Poppins;background: white;z-index: 100;display: grid;grid-template-columns: 50% 50%;margin-top: 20px;width: 100%;}

.footer .colm_contact {
    font-size: 13px;
    color: #4f4f4f;
}

.colm_1 .colm_address {
    width: 50%;
    font-size: 10px;
    color: #828282;
    font-weight: 100;
    display: block;
    margin-bottom: 40px;
    line-height: 1.9;
    margin-top: 20px;
}

.colm_1 .address h5 {
    color: #7e7e7e;
    font-weight: 200;
    float: left;
    margin: 0;
    margin-left: 14px;
}

.colm_1 .address img {
    float: left;
    height: 20px;
}

.colm_1 .address {
    margin-top: 30px;
    display: block;
    height: 20px;
    margin: auto;
}

.colm_2 {
}

.colm_2 .media_social {
    display: grid;
    width: 87px;
    float: right;
    grid-template-columns: 30% 30% 30%;
    box-sizing: border-box;
    /* margin-left: 10px; */
    grid-column-gap: 5%;
    /* text-align: right; */
    margin-bottom: 20px;
}

.colm_2 .media_social .mds {
    margin-bottom: 40%;
    text-decoration: none;
    display: block;
    opacity: 0.7;
    transition: 0.1s ease-in-out;
    float: right;
    width: 100%;
}

.colm_2 .media_social .mds:hover {
    opacity: 1;
    transition: 0.1s ease-in-out;
}

.media_social .page_colm {}

.colm_2 .page_colm {float: right;width: 100%;text-align: right;/* margin-top: 30px; */}

.colm_2 .page_colm a {
    width: 100%;
    text-decoration: none;
    color: #4f4f4f;
    float: right;
    cursor: pointer;
    font-size: 12px;
    margin-bottom: 10px;
}

.offr h2 {
    font-family: archivo;
    text-align: left;
    font-size: 35px;
    color: #474747;
}

.offr .ftr {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-column-gap: 5%;
}

.ftr .fitur h3 {
    font-family: archivo;
    font-size: 20px;
    color: #4c4c4c;
}

.offr .ftr .fitur img.img_fitr {
    width: 100%;
}

.offr .ftr .fitur div {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 100;
    color: #757575;
    margin-top: 0px;
    line-height: 1.5;
}

.offr .ftr .fitur {
    padding: 20px;
    padding-left: 0;
    padding-right: 0;
}

.offr {
    padding: 50px;
}

.ftr .fitur a.fitr_explain {
    border-bottom: white 1px solid;
    font-family: Poppins;
    color: #2f417d;
    font-size: 9px;
    padding: 7px;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    text-decoration: none;
    margin-top: 30px;
    display: block;
    max-width: 60px;
}

.ftr .fitur a.fitr_explain:hover {
    border-bottom: #2f417d 1px solid;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

.explnd_jrny img.line {
    width: 74%;
    text-align: center;
    margin-top: 20px;
}

.explnd_jrny {
    text-align: center;
}

.get_started a.line {
    background: #2f417d;
    font-family: Poppins;
    color: white;
    font-size: 14px;
    padding: 11px;
    -webkit-transition: 0.2s;
    transition: 0.2s ease-in-out;
    text-decoration: none;
}

.get_started {
    text-align: center;
    display: block;
    padding: 50px;
    margin: 10%;
}

.get_started h2 {
    font-family: archivo;
    text-align: center;
    font-size: 28px;
    color: #303030;
    margin-bottom: 50px;
}

.explnd_jrny .opng_fitr {
    font-size: 27px;
    text-align: center;
}

.get_started a {
    background: #303030;
    font-family: Poppins;
    color: white;
    font-size: 14px;
    padding: 11px;
    -webkit-transition: 0.2s;
    transition: 0.2s ease-in-out;
    text-decoration: none;
}

.get_started a:hover {
    background: none;
    color: #303030;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

.tstm h2 {
    font-family: archivo;
    text-align: center;
    font-size: 28px;
    color: #474747;
    margin: 50px;
    margin-top: 10%;
}

.tstm .list  img {
    width: 15%;
    padding: 19px;
}

.list {
    text-align: center;
}

.tstm {
    /* height: 80%; */
    margin: 15%;
}

.cover_opening img {
    width: 100%;
    margin: auto;
}

.page_home#pg_2 {
    margin-left: 0;
}

#pg_2 .cover_opening {
    margin-left: 0;
}

#pg_2  .opening h1 {
    font-size: 27px;
    text-align: right;
}

.opening h6 {
    font-family: Poppins;
    font-size: 15px;
    font-weight: 100;
    color: #5e5e5e;
    margin-top: 0px;
    line-height: 1.8;
}}

#pg_2 .opening a {
    float: right;
}

#pg_2 .opening {
    margin-right: 36px;
    margin-left: 73px;
}

#pg_2 .opening a {
    float: right;
    border-bottom: 1px solid;
}

#pg_3 .opening h1 {
    font-size: 27px;
    text-align: left;
    color: white;
}

.page_home#pg_3 .opening {
    background: #282425;
    padding: 20px;
    color: white;
    max-width: 397px;
    padding: 70px;
    margin-left: 20%;
    margin-right: 0;
}

#pg_3 .opening h6 {
    color: white;
    font-size: 13px;
}

.page_home#pg_3 .opening a {
    color: white;
    border-bottom: 1px solid;
}

#pg_3 .cover_opening {
    margin-top: 0px;
}

.page_home#pg_4 .opening h1 {
    font-size: 27px;
}

#pg_4 .opening h6 {
    font-size: 13px;
}

#pg_4 .opening {
    border: 1px solid #d7d7d7;
    padding: 54px;
    margin-right: 20%;
    margin-left: 0;
    padding-top: 60px;
    padding-bottom: 60px;
}

.contr {
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 100%;
}

.login .img img {
    width: 100%;
    /* margin: auto; */
}

.login {
    height: 50%;
    margin: auto;
    /* background: #fff; */
    /* padding: 50px; */
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
    background: white;
    max-width: 800px;
    margin: auto;
    display: flex;
    height: 400px;
}

.login .main-menu {
    padding: 20px;
    margin: auto;
    font-family: archivo;
    font-size: 16px;
    color: #1bcfed;
    min-height: unset;
    width: 800px;
    padding-top: 10px;
    box-sizing: border-box;
    height: 100%;
}

.login .img {
    margin: auto;
    height: 100%;
    margin-left: 0;
}

.login .main-menu form div {
    width: 100%;
    margin-top: 25px;
}

.login span input {
    width: 100%;
    height: 50px;
    font-size: 15px;
    margin-top: 10px;
    border: 1px solid #e2e2e2;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px;
    color: #707070;
    outline: none;
}

.login span input:focus {
    border: 1px solid #1bcfed;
}

.login input[type="submit"] {
    width: 115px;
    margin-top: 30px;
    font-family: archivo;
    font-size: 13px;
    margin-top: 0;
    background: #1bcfed;
    font-weight: bold;
    margin-bottom: 11px;
    border: none;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    display: block;
    margin-left: auto;
}

.login label {
    font-family: archivo;
    font-size: 13px;
    margin-top: 0;
    color: #646464;
    font-weight: bold;
    margin-bottom: 11px;
}

.login span {
    margin-top: 10px;
}

.login input[type="submit"]:hover {border: 1px solid #1bcfed;background: none;color: #303030;transition: 0.2s;}

.login .notif {}

.login .main-menu .notif {
    font-family: archivo;
    font-size: 12px;
    margin-top: 0;
    color: #303030;
    font-weight: bold;
    margin-bottom: 11px;
    background: #d23535;
    padding: 17px;
    color: white;
    box-sizing: border-box;
    text-align: center;
}

.tntg_kami {
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    height: 100%;
}

.photo {/* width: 100%; */margin: auto;}

.photo img {
    max-width: 400px;
    margin: auto;
}

.dscrpt {
    margin: 61px;
    margin: auto;
    margin-left: 60px;
    margin-right: 60px;
}

.tntg_kami h1 {
    width: 100%;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    font-size: 29px;
    font-family: archivo;
    font-size: 36px;
    margin-top: 0;
    color: #404040;
    font-weight: bold;
    margin-bottom: 11px;
}

.dscrpt h6 {
    text-decoration: none;
    color: #717171;
    font-family: Poppins;
    width: 100%;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    font-size: 18px;
    font-weight: 100;
}

.tntg_misi {
    width: 100%;
    background: #282425;
    padding: 54px;
    width: 53%;
    text-align: center;
    margin: auto;
    color: white;
    margin: auto;
}

.tntg_misi h1 {
    width: 100%;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    font-size: 29px;
    font-family: archivo;
    font-size: 30px;
    margin-top: 0;
    color: white;
    font-weight: bold;
    margin-bottom: 11px;
}

.tntg_misi h6 {
    text-decoration: none;
    color: white;
    font-family: Poppins;
    width: 350px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    font-size: 14px;
    font-weight: 100;
    text-align: center;
    margin: auto;
}

.dscrpt_almt {
    margin-left: 10px;
    border: 1px solid #d7d7d7;
    width: 400px;
    padding: 100px;
    margin-top: 100px;
    background: white;
}

.dscrpt_almt h1 {
    width: 100%;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    font-family: archivo;
    font-size: 30px;
    margin-top: 0;
    color: #404040;
    font-weight: bold;
    margin-bottom: 11px;
    margin: 60px;
    margin-left: 0;
    margin-bottom: 5px;
    margin-top: 0;
}

.dscrpt_almt h5 {
    text-decoration: none;
    color: #404040;
    font-family: Poppins;
    /* width: 350px; */
    -webkit-transition: 0.2s;
    transition: 0.2s;
    font-size: 16px;
    font-weight: 100;
    text-align: left;
    /* margin: auto; */
}

.almt {
    margin-left: 10px;
    width: 43%;
}

.med_sos {
    -webkit-transition: 0.2s;
    transition: 0.2s;
    font-family: archivo;
    font-size: 24px;
    color: #404040;
    font-weight: bold;
    /* margin-bottom: 11px; */
    margin-top: 150;
    text-align: right;
    box-sizing: border-box;
    display: block;
}

.med_sos h1 {
    font-size: 27px;
    box-sizing: border-box;
}

.media_social {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-column-gap: 5%;
    width: 150px;
    text-align: right;
    text-align: right;
    float: right;
}

.media_social a.mds {
    /* width: 100%; */
}

.container {}

.container .open {
    height: 50%;
    background: #eacc8c;
    padding: 50px;
    background-repeat: no-repeat, repeat;
    background-size: 400px;
    background-position: right bottom;
}

.open .typ h1 {
    font-family: archivo;
    font-size: 40px;
    margin-top: 0;
    color: #282425;
    font-weight: bold;
    margin-bottom: 11px;
}

.open .typ {
    width: 500px;
}

.open .typ h6 {
    width: 299px;
    font-family: Poppins;
    font-size: 11px;
    font-weight: 100;
    color: #4a4949;
    margin-top: 0px;
    line-height: 1.8;
}

.artikel {
    width: 100%;
    /* padding-top: 30px; */
    padding: 30px;
    box-sizing: border-box;
}

.artikel .page {
    display: grid;
    grid-template-columns: 10% 25% 65%;
    height: 300px;
    border-top: 1px solid #d5d5d5;
    /* padding: 50; */
    box-sizing: border-box;
    padding-top: 50px;
}

.artikel .page .img_articl {
    width: 100%;
    background: dimgray;
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-size: cover;
}

.artikel .page .img_articl img {
    width: 100%;
}

.descrpt {
    margin: auto;
    width: 70%;
    margin-right: 0;
    margin-top: 50px;
}

.descrpt h1 {
    font-family: archivo;
    font-size: 33px;
    margin-top: 0;
    color: #3c3c3c;
    font-weight: bold;
    margin-bottom: 11px;
}

.descrpt h6 {
    font-family: Poppins;
    font-size: 11px;
    font-weight: 100;
    color: #7e7c7c;
    margin-top: 0px;
    line-height: 2.0;
    height: 80px;
    overflow: hidden;
}

.descrpt a.link {
    font-family: archivo;
    font-size: 12px;
    margin-top: 0;
    color: #3c3c3c;
    font-weight: bold;
    margin-bottom: 11px;
    text-decoration: none;
    border-bottom: 1px solid;
}

.descrpt a.link:hover {
    border: unset;
    color: #a5a5a5;
}

.artikel .page .no {font-family: archivo;font-size: 60px;margin-top: 0;color: #3c3c3c;font-weight: bold;margin-bottom: 11px;}

.ctlg_prdct .prdct {
    width: 100%;
}

.ctlg_prdct {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-column-gap: 5%;
    padding: 100px;
}

.img_prdct img {
    width: 100%;
}

.ctlg .descrpt {
    margin: 0;
    margin-top: 20px;
}

.prdct .descrpt h5 {
    font-family: archivo;
    font-size: 17px;
    margin-top: 0;
    color: #3c3c3c;
    font-weight: bold;
    margin-bottom: 11px;
    margin-bottom: 1px;
}

.prdct .descrpt h6 {
    height: unset;
    /* font-size: 10px; */
    color: #a3a3a3;
}

.prdct .descrpt .dscrpt_prdct {
    font-size: 9px;
    height: 35px;
    overflow: hiden;
}

.descrpt a.linkproduct {
    font-family: archivo;
    font-size: 14px;
    margin-top: 0;
    color: #3c3c3c;
    font-weight: bold;
    margin-bottom: 11px;
    margin-bottom: 1px;
    border-bottom: 1px solid;
    text-decoration: none;
}

.artikelfll {
    width: 700px;
    margin: auto;
    margin-top: 50px;
    display: block;
}

.artikelfll img.bckgrd_artcl {
    width: 100%;
}

.title div {
    font-family: Poppins;
    font-size: 13px;
    font-weight: 100;
    color: #7e7c7c;
    margin-top: 0px;
    line-height: 1.8;
    overflow: hidden;
}

.artikelfll .title h1 {
    margin-bottom: 0;
}

.artikelfll .title {
    margin-bottom: 30px;
}

.artikelfll .descrpt h6 {
    overflow: unset;
    height: unset;
    width: 100%;
    text-align: justify;
    font-size: 19;
    font-family: roboto;
}

.artikelfll .descrpt {
    width: unset;
    padding: 20px;
    margin-top: 0;
}

a.pervioius_artc {
    float: left;
}

a.next_artc {
    float: right;
}

.artikelfll .button_next {
    width: 100%;
    display: block;
    height: 50px;
    margin-bottom: 30px;
}

.button_next a {
    text-decoration: none;
    font-size: 14px;
    font-family: archivo;
    font-size: 16px;
    margin-top: 0;
    color: #848484;
    font-weight: bold;
    margin-bottom: 11px;
    border-bottom: 1px solid #3c3c3c;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.button_next a:hover {
    color: #848484;
    color: #3c3c3c;
    border: unset;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.artikelfll .page_background {
    padding: 20px;
    width: 100%;
    max-height: 300px;
    overflow: hidden;
}

#pg_4 .cover_opening {
    margin-left: 0;
}

.container .admin_page {
    display: block;
    margin: auto;
    width: 338px;
    padding: 81px;
}

.admin_page h1.verify {
    font-family: archivo;
    font-size: 20px;
    margin-top: 0;
    color: #3c3c3c;
    font-weight: bold;
    margin-bottom: 11px;
    text-align: center;
}

.admin_page .verify_text {
    text-align: center;
    padding: 10px;
    font-family: archivo;
    font-weight: bold;
    margin-bottom: 11px;
    text-align: center;
    margin: auto;
    padding: 20px;
    margin-top: 50px;
    cursor: pointer;
}

.admin_page .verify_text a.form_verify {
    text-decoration: none;
    color: white;
    padding: 20px;
    transition: 0.2s;
    cursor: pointer;
    background: #3c3c3c;
}

.admin_page .verify_text a.form_verify:hover {
    background: none;
    color: #2b2929;
}

.page_home#pg_1 {
    display: block;
    width: 556px;
    margin: auto;
    text-align: -webkit-auto;
    font-size: 40px;
    height: 500px;
    display: block;
    grid-template-columns: unset;
    margin: auto;
}

.page_home#pg_1 .opening {
    text-align: center;
    font-size: 30px;
    width: 100%;
}

#pg_1 .opening h6 {
    font-size: 23px;
    width: 100%;
}

.img_verify {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}

.img_verify img {
    width: 62%;
}

.admin_page .verify_text:hover {}

.img_articl {}

.page#program {
    grid-template-columns: 50% 50%;
    height: 400px;
}

.artikelfll#program {}

#program .page_background {
    padding: unset;
}

div#photoprogram {
    max-height: unset;
}

.merek {
    display: grid;
    grid-template-columns: 50% 50%;
    margin: 50px;
}

.merek .photo {
    margin: unset;
}

.merek h5 {
    font-family: 'Roboto';
    margin-top: 5px;
    font-size: 15px;
    color: #505152;
    font-weight: 100;
}

.merek h4 {
    font-size: 20px;
    margin-bottom: 3px;
}

.merek .deskripsi {
    /* border: 1px solid #b5b5b5; */
    padding: 30px;
    padding-top: 0;
}

.photo_detail {
    width: 100%;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    padding: 14px;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
}

.photo_detail {}

.merek .photo_detail #1 {
    
}

.merek .photo_detail img#pht {
    margin: auto;
    width: 80%;
}

.merek .photo img {
    width: 100%;
    max-width: unset;
}

.merek .pht_dtl {
    padding: 30px;
    padding-top: 0;
}

h4.merek_feedback {
    margin-top: 10px;
    font-size: 20;
}

.radio input[type="radio"] {
    margin-left: 0;
    height: unset;
    text-align: left;
    width: unset;
    height: 30px;
}

.radio img.img_star {
    height: 30px;
}

.container div#colabs {
    background: #282425;
    color: #f0f0f0;
    background-repeat: no-repeat, repeat;
    background-size: 400px;
    background-position: right bottom;
}

div#colabs {}

div#colabs {}

#colabs h1 {
    color: #e0e0e0;
}

#colabs h6 {
    color: #efefef;
}

.open#edk {
    background: #f0f0f0;
    background-repeat: no-repeat, repeat;
    background-size: 400px;
    background-position: right bottom;
}

.photo_detail button {
    width: 100%;
    border: unset;
    background: unset;
    cursor: pointer;
}

.photo_detail img {
    width: 100%;
}

.photo_detail button:hover {
    opacity: 1;
}

.photo_detail img:hover {
    opacity: 0.9;
}

.maps iframe {}

.all {
    font-family: roboto;
    color: #7c7b7b;
    position: absolute;
    bottom: 25px;
    font-size: 12px;
}

.login form {
    margin-bottom: 20px;
}

.admin .user img {
    height: 50px;
    /* float: left; */
    text-align: center;
    /* margin: 10px; */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.username h1 {
    margin: auto;
    /* float: left; */
    font-size: 17px;
}

.user {
    /* height: 50px; */
    margin-top: 10px;
    /* margin-bottom: 50px; */
    padding: 10px;
    display: flex;
    color: #2c2c2c;
}

.lbl h1 {
    font-family: archivo;
    font-size: 20px;
    margin-bottom: 10px;
    color: #656565;
    margin-top: 0;
}

.button-add {
    font-family: archivo;
    font-size: 14px;
    background: #1bcfed;
    font-weight: bold;
    border: none;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    padding: 17px;
    border-radius: 3px;
    margin-left: auto;
    /* height: 100px; */
    display: block;
    width: 100px;
    text-align: center;
    position: relative;
    /* height: 50px; */
    border-collapse: collapse;
}

div#order_label h1, #payment_label h1 {
    font-size: 15px;
    color: #696868;
    font-weight: bold;
    font-family: archivo;
    margin-bottom: 3;
}

a.button-add:hover {
    border: 1px solid #1bcfed;
    background: none;
    color: #1bcfed;
    transition: 0.2s;
}

.table th {
    text-align: left;
    font-size: 13px;
    padding: 20px;
    padding-left: 10;
    border-bottom: 1px solid #b6b5b5;
}

.table table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    font-family: archivo;
    font-size: 12px;
    border-radius: 15px;
    border-bottom: 0px;
}

.table {
    margin: 20px;
    position: relative;
}

.table td {
    padding: 17;
    padding-left: 10px;
    color: #626262;
    font-family: archivo;
    position: relative;
    /* background: white; */
    /* margin-bottom: 20px; */
}

.table tr {padding-left: 20px;}

a.button-add#edit {
    margin-bottom: 0;
    background: none;
    padding: 10px;
    /* margin: 20px; */
    border: 1px solid;
    color: #7e8285;
    background: white;
    font-size: 13;
    width: 40;
    margin: 0 10 10 0;
    margin-bottom: 0;
}

a.button-add#delete {
    background: none;
    padding: 10px;
    border: 1px solid;
    color: #7e8285;
    width: 40;
    margin: 0 10 10 0;
    margin-bottom: 0;
}

a.button-add#edit:hover {
    border: 1px solid #f6da30;
    background: #f6da30;
    color: #ffffff;
    transition: 0.2s;
}

a.button-add#delete:hover {
    border: 1px solid #ff683a;
    background: #ff683a;
    color: #ffffff;
    transition: 0.2s;
}

.table th#act {
    text-align: center;
    width: 100px;
}

td#act {
    text-align: center;
    /* width: 220px; */
    display: flex;
    margin: auto;
}

.table td #view {
    text-decoration: none;
    color: #626262;
}

.table td #view:hover {
    color: #1bcfed;
}

.admin_page .form label {
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
}

.form input[type="submit"] {
    width: 115px;
    margin-top: 30px;
    font-family: archivo;
    font-size: 15px;
    margin-top: 0;
    background: #1bcfed;
    font-weight: bold;
    margin-bottom: 11px;
    border: none;
    color: white;
    cursor: pointer;
    transition: 0.2s;
}

.form input[type="submit"]:hover {
    border: 1px solid #1bcfed;
    background: none;
    color: #303030;
    transition: 0.2s;
}

.form input {
    width: 100%;
    height: 50px;
    font-size: 13;
    margin-top: 10px;
    border: 1px solid #c7c7c7;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px;
    color: #6e6e6e;
}

.adms_list {
    margin-left: 30px;
    overflow: hidden;
    display: none;
}

i.fa.fa-angle-left {
    font: normal normal normal 23px/1 FontAwesome;
    float: right;
}

i.fa.fa-angle-right {
    font: normal normal normal 23px/1 FontAwesome;
    float: right;
}

i.fa.fa-search {
    font-size: 14px;
    margin-right: 30px;
    cursor: pointer;
}

div#search\ product label {
    font-size: 20px;
}

div#search\ product input[type="text"] {
    width: 100%;
    height: 50px;
    border: 1px solid #d8d2d2;
    font-size: 15px;
    padding-left: 10px;
    color: #656565;
    margin-bottom: 20px;
    width: 100%;
    height: 60px;
    font-size: 20px;
    margin-top: 10px;
    border: 1px solid #c7c7c7;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px;
    color: #6e6e6e;
    margin-bottom: 50px;
}

div#search\ product {
    /* background: #1bcfed; */
    margin: 30px;
    padding: 20px;
}

input[type="date"] {
    width: 100%;
    height: 50px;
    border: 1px solid #d8d2d2;
    font-size: 15px;
    padding-left: 10px;
    color: #6b6a6a;
    width: 100%;
    height: 50px;
    font-size: 14px;
    margin-top: 10px;
    border: 1px solid #c7c7c7;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px;
    outline: none;
    background: white;
}

a.button-add#faktur {
    padding: 10px;
    margin: 20px;
    width: 20px;
}

i.fa.fa-arrow-right {
    margin-left: 10px;
}

.taable_file td {
    font-size: 15px;
    font-weight: bold;
    font-family: archivo;
    font-size: 15px;
    margin-bottom: 10px;
    color: #656565;
    /* background: #bababa; */
    border-bottom: 1px solid;
    text-decoration: none;
    text-align: left;
    width: 10%;
    height: 20px;
}

td input[type="text"],td input[type="number"] {
    height: 40px;
    /* width: 100%; */
    font-size: 15;
    margin-top: 0;
    border: 1px solid #c7c7c7;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px;
    color: #6e6e6e;
    margin-bottom: 0;
    width: 120px;
}

.search_form form {
    width: 100%;
    display: grid;
    grid-template-columns: 30% 30% 40%;
}

search_form .form {}

.search_form form div {
    padding: 20px;
}

.form_search form {
    display: grid;
    grid-template-columns: 45% 45% 10%;
}

.form_search input, .form_search select {
    margin-top: 0px;
    margin-bottom: 0px;
    background: #fffdfd;
}

.form_search input[type="submit"] {
    background: #d0d0d0;
}

.addbtn {margin-left: auto;float: right;height: 50px;}

.form_search {
    width: width;
}

#stock form {
    grid-template-columns: 30% 30% 30%;
    column-gap: 5%;
    margin-bottom: 0;
}

input.button-add {
    width: 115px;
    font-family: archivo;
    font-size: 17px;
    margin-top: 0;
    background: #1bcfed;
    font-weight: bold;
    margin-bottom: 11px;
    border: none;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    height: 60px;
    text-decoration: none;
    padding: 20px;
    margin-top: 20px;
    border-radius: 5px;
}

input.button-add:hover {
    border: 1px solid #1bcfed;
    background: none;
    color: #303030;
    transition: 0.2s;
}

.admin_page {}

.notification {
    width: 100%;
    font-family: archivo;
    font-size: 11px;
    margin-top: 0;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 30px;
    text-decoration: none;
    /* padding-right: 0px; */
    box-sizing: border-box;
    width: 100%;
    background: #ff683a;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
}

img#loading-image {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
}

div#jmlh_hal {
    width: 100%;
    height: 50px;
    /* margin-top: 50px; */
    /* float: right; */
    /* margin-left: auto; */
    font-size: 13px;
}

.jmlh_hal select {}

#jmlh_hal select {
    /* height: 30; */
    margin-bottom: 0;
    display: block;
    border: 0px;
    background: #fffdfd;
    margin-top: 0;
    height: 50px;
    padding: 15px;
    width: 100%;
    border: 1px solid #c1c0c0;
    color: #555555;
    font-size: 13;
}

.pagination {
    /* float: right; */
}

.colom {
    /* float: right; */
    margin-left: auto;
    /* position: relative; */
    /* right: 0; */
    width: 310px;
    margin-top: 20px;
    text-align: right;
}

div#pagination {
    color: #535454;
    float: left;
    padding: 10px;
    border: 1px solid #bfc1c2;
    margin: 5px;
    border-radius: 5px;
}

div#pagination:hover {
    background: #1bcfed;
    color: white;
    border: 1px solid #1bcfed;
}

button#\31 {}

button#\31 {}

.colom button {
    width: 40px;
    height: 30;
    background: white;
    border: 1px solid #dbd9dd;
    /* padding: 10px; */
    border-radius: 4px;
    font-size: 9;
}

.colom .first {
    width: 40px;
}

h1.null_data {
    font-family: archivo;
    text-align: center;
    font-size: 20;
}

.id_product input {
    height: 50px;
    font-size: 17px;
    width: 150px;
    font-size: 20px;
    margin-top: 10px;
    border: 1px solid #c7c7c7;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px;
}

tr#\31 {}

h1.notif_stock {
    text-align: center;
    background: #1bcfed;
    padding: 10;
    color: white;
    font-family: archivo;
    border-radius: 5px;
    font-size: 14;
    margin: 20px;
}

th#number, th#number {text-align: center;width: 18%;min-width: 150px;}

.price_percent {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    column-gap: 5%;
}

div#code_start {
    /* display: grid; */
    grid-template-columns: 45% 45%;
    column-gap: 10%;
}

div#code_start {}

input select .form input :focus, input .form input select:hover {
    border: 1px solid #1bcfed;
}


.search_product_order input {
    margin-bottom: 0px;
}

input#button_left {
    float: left;
}

input#button_right {
    float: right;
}

div#table {
    /* margin-top: 20px; */
    display: block;
    padding: 20px;
    padding-top: 0;
}

tbody {
    border-bottom: none;
}

tr.list_input {
    border: none;
}

input#description {}

button.input_order {
    text-align: left;
    font-size: 17;
    padding: 20px;
    padding-left: 10;
    background: none;
    border: none;
    font-weight: bold;
    color: #1bcfed;
    cursor: pointer;
}

#prc_price .form input {
    margin-top: 0;
}

th#add_item {width: 50%;}

.data_product {
    background: white;
    padding: 20px;
    border: 1px solid #1bcfed;
    font-size: 15px;
    font-family: archivo;
    height: 200px;
    overflow: scroll;
    overflow-x: hidden;
    position: absolute;
    z-index: 80;
}

.list_prdct {
    padding: 10px;
    color: #4e4e4e;
    cursor: pointer;
}


}::-webkit-scrollbar {
  width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #ffffff; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ffffff; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffffff; 
}

::-webkit-scrollbar {
  width: 10px;
    
}

/* Track */
::-webkit-scrollbar-track {
  background: #efefef; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #1bcfed; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #1bcfed; 
}

div#order {background: none;}

.button_opsi {
    margin-top: 50px;
}

#form_register form div {
    margin-bottom: 20px;
}

.button_opsi {
    margin-bottom: 20px;
}

a#button_left {
    text-decoration: none;
    text-align: left;
    font-size: 17;
    padding: 20px;
    background: none;
    border: none;
    font-weight: bold;
    color: #1bcfed;
    cursor: pointer;
    font-family: archivo;
    width: 80px;
    background: white;
    border: 1px solid #e7e7e7;
    display: block;
    text-align: center;
    margin-right: auto;
}

#button_right {
    /* float: right; */
    /* text-align: right; */
    background: none;
    border: none;
    font-family: archivo;
    text-align: left;
    font-size: 17;
    padding: 20px;
    background: none;
    border: none;
    font-weight: bold;
    background: #1bcfed;
    cursor: pointer;
    text-decoration: none;
    display: block;
    width: 109px;
    text-align: center;
    color: white;
    margin-left: auto;
}

div#product_list {
    border-top: 1px solid #bcbcbc;
    margin-top: 60px;
}

button#button_right:hover, #button_left:hover {
    color: #1bcfed;
}

.form_list_product {
    display: grid;
    grid-template-columns: 32% 15% 15% 15% 15%;
    column-gap: 2%;
    /* position: absolute; */
    background: white;
    padding: 20;
    border-radius: 8px;
    /* border: 1px solid #efe9e9; */
    padding-bottom: 40px;
    /* top: 613px; */
    /* left: 147px; */
    /* width: 1000; */
    z-index: 105;
    /* position: absolute; */
    transition: 0.2s;
    box-shadow: rgb(173 173 173 / 20%) 0px 7px 29px 0px;
}

.input_product button#button_right {
    background: #1bcfed;
    border-radius: 5px;
    color: white;
    margin-top: 27px;
    padding: 15px;
    float: none;
    font-size: 13;
}

.list_prdct:hover {
    background: #1bcfed;
    color: white;
}

h5.note {
    color: #9b9b9b;
    margin-top: 5px;
    margin-bottom: 0px;
}

tr.total {
    border-top: 1px solid #cdcdcd;
    font-size: 16;
    font-weight: bold;
}

.list_input th {
    border-bottom: none;
    font-size: 15px;
}

input#discount_input {
    width: 80px;
    margin-right: 5px;
    margin-top: 0;
    height: 40px;
}

i.fa.fa-times {
    color: #ff5e5e;
    font-size: 18;
    margin-right: 10;
    cursor: pointer;
    z-index: 30;
}

th#discount_input_table {
    width: 20%;
    padding-left: 0;
}

select#satuan {
    width: 70px;
    margin-bottom: 0;
    height: 40;
    margin-top: 0;
}

button#add_button, button#add_button_tax, #add_button_bk {
    background: white;
    border: 0;
    /* border-radius: 5px; */
    /* padding: 10px; */
    color: #212121;
    cursor: pointer;
    transition: 0.2s;
    border-bottom: 3px solid #ffffff;
    height: unset;
}

button#add_button:hover, button#add_button_tax:hover, #add_button_bk:hover {
    border-bottom: 3px solid #1bcfed;
}

th.qty {
    width: 20%;
}

th.harga {width: 20%;}

tr.discount_tax {
}

div#search\ product_order {
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
}

div#search\ product_order div label {
    font-size: 15px;
}

#search_product_order div {
    height: 100px;
}

label {}

div#search_product_order {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 10%;
    column-gap: 2.5%;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #e3e2e2;
    border-radius: 5px;
    background: #fcfbfb;
    box-shadow: 2px 4px 5px 0px #f4f4f4;
    /* height: 100px; */
}

input[type="text"] {
    width: 100%;
    height: 50px;
    font-size: 13px;
    margin-top: 10;
    border: 1px solid #c7c7c7;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px;
    color: #6e6e6e;
}

.form_search input[type="text"] {
    margin-top: 0;
}

div#search_product_order {}

.search_product_order input {}

thead {
    border-bottom: 1px solid #7c7a7a;
}

div#order_label {
    font-size: 14;
    padding: 20px;
    color: #123;
}

.lael_form {
    width: 100%;
}

.order_new label {
    font-size: 13;
}

#order_label label, #payment_label label {
    color: black;
    display: block;
    margin-bottom: 10;
}

.logo {
    display: block;
    width: 300px;
    margin-left: auto;
    position: relative;
    /* border-bottom: 2px solid #1bcfed; */
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.logo img {
    margin-right: auto;
    width: 300px;
    display: block;
    /* padding: 20px; */
    padding-top: 0;
    /* position: absolute; */
}

div#order_label h2 {
    font-size: 14px;
    margin-bottom: 20px;
    margin-top: 0px;
    color: #5d5d5d;
    font-weight: 100;
}

body.print_page {
    width: 210mm;
    height: 297mm;
    /* background: white; */
}

div#print_page {
    background: white;
    width: unset;
    margin: unset;
    padding: 20;
    display: block;
    /* height: 100%; */
}

::before {}

i.fa.fa-long-arrow-right {
    font-size: 21px;
    padding-left: 20;
}

#search_order {
    color: #1bcfed;
    font-weight: 100;
    border: 1px solid;
    background: white;
    width: 100%;
    display: block;
    margin-top: auto;
    height: 50px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    position: relative;
    top: 25px;
}

#search_order:hover {
    background: #1bcfed;
    color: white;
}

.lael_form input {
    border: none;
    font-family: archivo;
    font-size: 15px;
    margin-top: 0;
    color: #686868;
    font-weight: bold;
    margin-bottom: 0;
    display: inline;
    height: 30px;
    /* padding: 5; */
    width: 200px;
    padding: 10;
}

#search_product_order input {
    /* margin: 0; */
}

#search_order {}

.list_update {
    /* margin: 10px; */
    border-radius: 5px 0px 5px  5px;
    background: #1bcfed24;
    background: none;
    border-radius: unset;
    font-weight: bold;
    font-family: archivo;
    font-size: 13px;
    border: none;
    box-shadow: none;
    border-left: 0.5mm solid #bbbbbb69;
}

.list_update ul {
    list-style-type: none;
    /* height: 400px; */
    margin: 0;
    padding: 0;
}

.list_update li {
    padding: 5;
    cursor: pointer;
    text-decoration: none;
    display: block;
    text-align: right;
    border-radius: 5px;
}

.list_update li:hover {
    border-radius: 5px;
}

.list_update li a {
    text-decoration: none;
    color: #1c79b7;
    display: block;
    padding: 10px;
    text-align: right;
    border-radius: 3px;
}

.list_update li {}

.form_button {
    padding: 20px;
    padding-top: 0;
}

#filter_button {
    font-family: archivo;
    font-size: 13px;
    background: #fffdfd;
    font-weight: bold;
    border: none;
    color: #1bcfed;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    /* padding: 15px; */
    border-radius: 3px;
    margin-right: auto;
    display: block;
    width: 100%;
    text-align: center;
    display: block;
    height: 50px;
    border: 1px solid #c1c0c0;
    color: #555555;
}

.button_filter {
    width: 300px;
    display: block;
    display: grid;
    grid-template-columns: 40% 40%;
    column-gap: 5%;
}

i#exit_list_order {
    color: #818181;
    font-size: 15;
    display: block;
    margin-left: auto;
    width: 10px;
    margin-top: 10px;
}

i#search_filter {
    margin-right: 0;
}

#search_product_order input:focus, #search_product_order select:focus, #jmlh_hal select:focus {
    outline: none;
    border: 1px solid #1bcfed;
}

.list_update li a:hover {
    color: #ffffff;
    background: #1c79b7;
}

.page_print {
    /* padding: 30px; */
    width: 210mm;
    background: white;
    /* border: 1px solid #e9e9e9; */
    page-break-after: always;
    page-break-inside: avoid;
    page-break-after:auto;
    /* display:block; */
    padding-bottom: 20px;
    margin: auto;
}

label#invoice {
    font-size: 35px;
    display: block;
    width: 400px;
    color: #1ac9e7;
    /* font-weight: bold; */
    margin-bottom: 20px;
    font-family: archivo;
}

.header_invoice {border-bottom: 1px solid #cdcdcd;}

.lael_form h1 {
    font-family: archivo;
    font-size: 17px;
    margin-top: 10;
    color: #686868;
    font-weight: bold;
    margin-bottom: 30px;
    display: inline;
}

.no_order {
}

.lael_form input:hover {
    background: #eaeaea;
}

.lael_form input:focus {
    outline: none;
    border: 1px solid #1bcfed;
    border-radius: 5px;
}


.lael_form input:focus {
    outline: none;
    border: 1px solid #1bcfed;
    border-radius: 5px;
}

.form_new_order {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    font-family: archivo;
    font-weight: bold;
    /* overflow: auto; */
    height: 500px;
    width: 50%;
    z-index: 105;
    box-sizing: border-box;
    display: block;
    display: none;
}

.form_new_order h1 {
    font-size: 17px;
    text-align: center;
}

.order_new {
    margin-bottom: 20px;
}

.order_new textarea {
    height: 70px;
    margin-bottom: 0;
    margin-top: 10px;
}

.form_new_order i.fa.fa-times {
    display: block;
    text-align: right;
    font-size: 22;
    color: black;
}

.order_new input, .order_new select {
    /* height: 40px; */
}

.order_new select#client {
    margin-bottom: 0;
}

div#order_new_button {
    margin-top: 0;
}

#add_button_bk {}

input#tax_input {}

input#tax_input {
    background: none;
    outline: none;
    border: none;
    width: 37px;
    font-size: 15;
    height: unset;
    margin-top: 0;
}

input#bk_input {
    width: 150;
    height: 40;
    margin-top: 0;
}

.table_report table td {
    color: #585858;
}

#print_cetak tr.sub_total {
    border-top: 1px solid #000000;
    font-size: 16;
    font-weight: bold;
    display: grid;
    grid-template-columns: 50% 50%;
    padding: unset;
    margin-bottom: 10px;
    box-sizing: border-box;
    padding-top: 10px;
}

tbody.Total {
}

.form {
}

.input_product {
    text-align: center;
    /* margin: auto; */
}

.header_invoice {
    padding: 40px;
    padding-bottom: 10px;
    padding-top: 20px;
}

div#print {
    background: none;
    /* margin: 0; */
    margin-top: 0;
}

input[type="text"] {
}

div#discount_input_table {
    position: absolute;
    background: white;
    box-shadow: 6px 4px 16px 0px #e0e0e0;
    padding: 20;
    border-radius: 8px;
    border: 1px solid #efe9e9;
    /* left: 448px; */
    display: flex;
    z-index: 80;
    right: 40;
    top: -19px;
}

i#exit {
    margin: auto;
    padding-left: 20;
}

.bk_input_table {
    position: absolute;
    background: white;
    box-shadow: 6px 4px 16px 0px #e0e0e0;
    padding: 20;
    border-radius: 8px;
    border: 1px solid #efe9e9;
    display: flex;
    z-index: 30;
    right: 40;
    top: 9px;
}

i#exit_bk {
    margin: auto;
}

.text_bk {
    margin: auto;
    /* padding: 20; */
    padding-left: 20;
}

.text_tax {
    position: absolute;
    margin-top: 0px;
    left: -10;
}

td.tax_flex {
    display: flex;
}

div#tax_input_table {
    height: us;
    position: relative;
    top: -1px;
}

th.none {
    display: none;
    width: 0;
}

td.exit_column {
    padding: 0;
}

button.button_arrow {
    border: 0px;
    font-size: 14;
    color: #1bcfed;
    background: none;
    font-weight: bold;
    /* padding: 9px; */
    border-bottom: 3px solid #ffffff;
    cursor: pointer;
    padding: 0;
}

button.button_arrow:hover {
    border-bottom: 3px solid #1bcfed;
}

select#set_price {
    margin-bottom: 0px;
}

.form_invoice {
    padding: 20px;
    padding-top: 0;
}

input#quantity {
    border: 1px solid #d8d2d2;
    color: #656565;
    width: 100%;
    height: 50px;
    font-size: 14;
    margin-top: 10px;
    border: 1px solid #c7c7c7;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px;
    color: #6e6e6e;
}

div#opsi_button {
    /* padding: 20px; */
    margin-top: 0;
    width: 210mm;
    display: block;
    /* height: 100px; */
    display: grid;
    grid-template-columns: 50% 50%;
    margin: auto;
}

#opsi_button div {
}

div#order_label {
    padding: 0;
    padding-top: 10px;
    /* margin-bottom: 40px; */
}

label#judul {
    display: block;
    margin-bottom: 20;
    font-size: 17px;
    color: black;
    font-family: archivo;
}

.alamat {
    width: 250px;
    font-weight: 100;
}

div#payment_label {
    padding: 0;
    padding-top: 10px;
    margin-bottom: 40px;
}

label#judul {}

.keterangan {
    font-weight: 100;
    color: #575757;
}

.info_invoice {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
}

.ttg_perusahaan h1 {
    display: block;
    margin-bottom: 20;
    font-size: 17px;
    color: #1bcfed;
    font-family: archivo;
    font-size: 14px;
    margin-bottom: 0;
    display: table-row;
}

#payment_label h1 {
}

.poplr_prdct h1 {/* right: 16px; */font-family: archivo;font-size: 37px;color: #434343;margin-top: 0;font-weight: bold;/* float: left; *//* top: 12px; */margin-bottom: 0;}
}

input#date_payment {
    margin-top: 0;
}

.info_order {
    margin-top: 1;
    margin-bottom: 20px;
}

.info_order h1 {
    display: block;
    margin-top: 0;
    margin-bottom: 3px;
    font-family: archivo;
    font-size: 14;
    display: table-row;
}

button#button_right_new_order {
    width: 100;
    font-family: archivo;
    font-size: 12px;
    background: #1bcfed;
    font-weight: bold;
    border: none;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    padding: 15px;
    border-radius: 3px;
    margin-left: auto;
    /* height: 100px; */
    display: block;
    width: 150px;
    text-align: center;
}

button#button_right_new_order:hover {
    background: none;
    border: none;
    color: #1bcfed;
}

footer {
    background: #1bcfed;
    height: 100px;
    /* page-break-after: always; */
    display: block;
    text-align: center;
    margin: 20px;
}

@page { 
    @bottom-center { content: element(footer) }
}

div#update_status {
    /* height: unset; */
    overflow: unset;
    border-radius: 10px;
    padding: 20px;
    overflow: scroll;
}

button#update {
    color: #1bcfed;
    padding: 10px;
    font-size: 12px;
    border: none;
    background: none;
    font-weight: bold;
    font-family: archivo;
    cursor: pointer;
    transition: 1s;
    border-bottom: 1px solid #fff;
    padding-left: 0;
}

button#update:hover {
    border-bottom: 1px solid #1bcfed;
    transition: 0.2s;
}

i#button {
    cursor: pointer;
}

.keterangan select {
    border: none;
    font-family: archivo;
    font-size: 15px;
    margin-top: 0;
    color: #686868;
    margin-bottom: 0;
    display: inline;
    height: 30px;
    /* padding: 5; */
    width: 250px;
    padding: 0;
    font-weight: 100;
    color: #575757;
    outline: none;
}

button#tanggal_button {
    border: none;
    font-family: archivo;
    font-size: 15px;
    margin-top: 0;
    color: #686868;
    font-weight: bold;
    margin-bottom: 0;
    display: inline;
    height: 30px;
    /* padding: 5; */
    width: 200px;
    background: white;
    text-align: left;
    padding-left: 10;
    border-radius: 5px;
    cursor: pointer;
}

button#tanggal_button:hover {
    background: #eaeaea;
}

.page {
    margin: 20px;
    margin-bottom: 0;
}

.button-add.btn {
    margin: 0;
}

a#ctgry {
    width: 130px;
}

.filter_page {
     display: block;
     margin-top: 20px;
     padding: 20px;
     border: 1px solid #e3e2e2;
     border-radius: 1px  5px 5px 5px;
     background: #fcfbfb;
     box-shadow: 2px 4px 5px 0px #f4f4f4;
     /* height: 100px; */
}

    
}

input[type="text"]:focus {}

input[type="text"]:focus {
    outline: none;
    border: 1px solid #1bcfed;
}

select {}

.summary label {
    font-family: archivo;
    font-size: 16px;
    margin-bottom: 50px;
    color: #2c2c2c;
    margin-top: 0;
    font-weight: bold;
}

#form_register label {
    margin-bottom: 10;
}

#form_register select {
    margin-bottom: 0px;
}

a#rak {
    width: 130px;
}

select {}

select:focus {
    outline: none;
    border: 1px solid #1bcfed;
}

div#update {
    float: none;
    width: 100px;
    height: unset;
    margin: unset;
    display: block;
}

#update #input_data {
    width: 140px;
    margin-top: unset;
    font-size: 13px;
    height: unset;
    padding: 15px;
    display: block;
}

a#prc_prs {
    width: 150px;
    font-size: 13;
}

button#input_button {
    font-family: archivo;
    font-size: 15;
    background: #fffdfd;
    font-weight: bold;
    border: none;
    color: #1bcfed;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    /* padding: 15px; */
    border-radius: 3px;
    margin-right: auto;
    display: block;
    width: 100%;
    text-align: center;
    display: block;
    height: 50px;
    border: 1px solid #c1c0c0;
    color: #555555;
}

div#column_id {
    display: flex;
    grid-template-columns: none;
    width: 400px;
}

#page_prc_price select {
    margin-bottom: 0;
}

#page_prc_price {
    width: 50%;
    min-width: 300px;
}

#page_prc_price .form input {}

#prc_price form {
    margin-bottom: 0;
}

a#pelanggan {
    width: 150px;
    font-size: 13;
}

#pelanggan div {
    margin-bottom: 20px;
}

#pelanggan textarea {
    margin-bottom: 010;
}

a#spplr {
    width: 150px;
    font-size: 13;
}

#user input {
    margin-top: 10;
}

#user select#status {
    margin-bottom: 10;
}

#user div {
    margin-bottom: 20px;
}

#user label {
    margin-bottom: 0;
}

.form input:focus {
    outline: none;
    border: 1px solid #1bcfed;
}

textarea:focus {
    outline: none;
    border: 1px solid #1bcfed;
}

#rak div {
    margin-bottom: 20;
}

.summary {
    /* height: 300px; */
    padding: 20px;
    /* margin: 20px 0px 0px 0px; */
    border-radius: 15px;
}

.summary .chart {background: white;/* padding: 20px; *//* margin-top: 20px; */border-radius: 15px;/* width: 100%; */padding: 20px;padding-top: 0;min-height: 350px;}

.content {
    display: grid;
    column-gap: 2%;
    grid-template-columns: 68% 30%;
    width: 100%;
}

.report_finnce {
    float: left;
    /* margin-top: 20px; */
    /* width: 100%; */
    display: grid;
    grid-template-rows: 50% 48%;
    row-gap: 2%;
}

.avr_pendapatan {
    /* padding: 20px; */
    background: white;
    border-radius: 15px;
    position: relative;
}

.result h1 {
    font-size: 24px;
    font-family: archivo;
    font-weight: bold;
    margin: 20px 0px 20px 0px;
    color: #1bcfed;
    display: block;
}

.result {
    /* border-top: 1px solid #b6bcc1; */
    margin-top: 10px;
    margin: auto;
    display: block;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
}

.result h2 {
    font-size: 13px;
    font-family: archivo;
    font-weight: bold;
    margin: 20px 0px 20px 0px;
    color: #989898;
    float: left;
}

.result div {
    font-size: 15px;
    color: #b1b1b1;
    font-weight: 100;
    float: right;
    margin-top: 4;
}

.nilai_inventorys {
    padding: 20px;
    background: white;
    border-radius: 15px;
}

.label_dsb {
    border-bottom: 1px solid #ccc;
    padding: 16px;
    padding-bottom: 6px;
    /* font-weight: bold; */
    font-size: 10pz;
}

label {}

.label_dsb label {
    font-size: 15px;
}

img.ifif {
    width: 200px;
}

.ttl_ordr {
    background: white;
    padding: 20px;
    border-radius: 15px;
}




span.icon-icon_order {
    font-size: 60px;
    color: #1bcfed;
}

.line_order_rpt {
    background: white;
    overflow: overlay;
    border-radius: 15px;
}

.line_ordr {
    display: grid;
    grid-template-columns: 22.5% 20% 20% 22.5%;
    column-gap: 5%;
}

div#order_report {
    padding: 20px;
    margin: 0px;
    padding-top: 0;
    border-radius: 15px;
}

.line_order_rpt {
    padding: 15px;
}

.line_order_rpt label {
    font-size: 13px;
    display: block;
    margin-bottom: 10;
    color: #1bcfed;
}

.line_order_rpt h1 {
    right: 16px;
    font-family: archivo;
    font-size: 37px;
    color: #434343;
    margin-top: 0;
    font-weight: bold;
    /* float: left; */
    position: absolute;
    top: 12px;
}

.conntent {
    position: relative;
}

div#inventory {
    padding-top: 0;
    display: block;
    display: grid;
    grid-template-columns: 45% 25% 25%;
    column-gap: 2.5%;
}

.ttl_prdct {
    /* padding: 20px; */
    border-radius: 15px;
    float: left;
}

.lst_prdct {
    font-family: archivo;
    font-size: 16px;
    color: #434343;
    margin-top: 0;
    font-weight: 100;
    /* margin-left: 20px; */
    margin-top: 20px;
}

.lst_prdct ol {
    padding: 0;
}

.lst_prdct ol li {
    padding: 6px;
}

.poplr_prdct {
    float: left;
    background: white;
    padding: 20px;
    border-radius: 15px;
    position: relative;
    min-height: 200px;
}

span#iconorder {
    color: #1bcfed;
    font-size: 7vw;
}

.poplr_prdct label {
    font-size: 15;
    display: block;
    margin-bottom: 0;
}

.poplr_prdct .conntent {
    top: 25px;
    text-align: center;
    position: absolute;
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
}

.poplr_prdct #iconorder {
    display: block;
    font-size: 9vw;
}

.avr_pendapatan #iconorder {
    position: absolute;
    font-size: 48px;
    left: -14px;
    bottom: -35px;
}

#module {
    font-size: 27px;
    margin-right: 10px;
}

#module div {}

.button-admin div {
    margin: auto;
    margin-left: 0;
}

i.fa.fa-minus-circle, i.fa.fa-plus-circle {
    margin: auto;
    margin-right: 0;
}

i.fa.fa-plus-circle {}

a#adms {}

span#h1_name {
    font-size: 30;
}

span#user_module {
    font-size: 40px;
    color: #1bcfed;
}

.username {
    text-align: left;
    padding-left: 10px;
    color: #7f7878;
    width: 160;
}

.username h2 {
    font-size: 12px;
    margin-top: 5;
}

.notif {
    position: fixed;
    top: 0;
    right: 0;
    padding: 10px;
    background: white;
    border: 1px;
    border: 1px solid #dcdcdc;
    box-shadow: 6px 3px 9px 4px #dcdcdc;
    border-radius: 0px 0px 0px 15px;
    z-index: 99;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    max-width: 250px;
}

.notif button {
    background: white;
    border: none;
    font-family: archivo;
    font-size: 16px;
    margin-bottom: 50px;
    color: #434343;
    margin-top: 0;
    font-weight: bold;
    margin-bottom: 10px;
    border-radius: 15px;
    cursor: pointer;
    padding: 5;
    margin: 0;
    position: relative;
    width: 100%;
    text-align: left;
    padding-right: 20px;
}
}

.notif button {}

.notif button:hover {
    color: #ff683a;
}

.count_notif {
    position: absolute;
    font-size: 9px;
    top: 4px;
    right: 0;
    background: #ff683a;
    color: white;
    padding: 4;
    border-radius: 10px;
    margin-left: 10px;
}

button.btn_setting {
    font-family: archivo;
    font-size: 15px;
    margin-bottom: 10px;
    color: #656565;
    margin-top: 0;
    padding: 20px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-top: 1px solid #bcb9bf;
    position: relative;
    cursor: pointer;
    padding: 20px;
    font-weight: bold;
}

i#arrow-setting {
    text-align: right;
    position: absolute;
    right: 20px;
    font-size: 18px;
}

button.btn_setting:hover {
    background: #e9e9e9;
}

.filter label {
    font-family: archivo;
    font-size: 16px;
    margin-bottom: 10px;
    color: #656565;
    margin-top: 0;
    \: bold;
}

.form-setting label {
    margin-bottom: 10px;
}

.form-setting {
    padding: 20px;
    display: none;
}

input {}

.form-setting input {
    margin-top: 10px;
    margin-bottom: 20px;
}

.form-setting input#submit, #ttg_enter {
    font-family: archivo;
    font-size: 14px;
    background: #1bcfed;
    font-weight: bold;
    border: none;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    padding: 17px;
    border-radius: 3px;
    margin-left: auto;
    /* height: 100px; */
    display: block;
    width: 100px;
    text-align: center;
    position: relative;
    /* height: 50px; */
    border-collapse: collapse;
}

.photo_logo img {
    height: 53px;
    padding-left: 20px;
}

.photo_logo {
    /* float: left; */
}

.progress_bar {
    height: 30px;
    background: #eaeaea;
    border-radius: 15px;
}

input#file {
    display: block;
    margin-top: 10px;
    font-size: 17px;
    font-family: archivo;
    font-size: 15px;
    border: none;
}

input#upload,#upload_csv {
    font-family: archivo;
    font-size: 14px;
    background: #1bcfed;
    font-weight: bold;
    border: none;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    padding: 17px;
    border-radius: 3px;
    /* height: 100px; */
    display: block;
    width: 100px;
    text-align: center;
    position: relative;
    height: 50px;
    border-collapse: collapse;
}

button#upload_btn {
    font-family: archivo;
    font-size: 14px;
    background: none;
    font-weight: bold;
    border: 1px solid #1bcfed;
    color: #1bcfed;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    border-radius: 3px;
    /* height: 100px; */
    display: block;
    text-align: center;
    position: relative;
    height: 50px;
    border-collapse: collapse;
    /* overflow: hidden; */
    padding: 10px;
    min-width: 150px;
}

div#upload_form {
    display: flex;
}

input#upload,#upload_csv {
    margin: unset;
}

.photo_logo h1 {
    font-family: archivo;
    font-size: 14px;
    background: none;
    font-weight: bold;
    color: #ffa22f;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    border-radius: 3px;
    /* height: 100px; */
    display: block;
    text-align: center;
    position: relative;
    height: 50px;
    border-collapse: collapse;
    /* overflow: hidden; */
    padding: 10px;
    min-width: 150px;
}

.note_ h3 {
    font-size: 13px;
    color: #00b3d1;
    font-weight: 100;
    margin: 0;
    margin-top: 5px;
    display: table-row;
    padding: 20;
}

.nama_list {
    color: #454545;
    font-size: 15px;
    font-weight: bold;
}

.note_ {
    margin: 10;
}

.list_terlaris {
    background: white;
    margin: 10px;
    padding: 10px;
    border-radius: 13px;
    margin-left: 0;
    position: relative;
    padding-left: 15px;
    margin-bottom: 0;
}

span#iconlist12 {
    font-size: 56px;
    position: absolute;
    color: #1bcfed;
    right: 24px;
    top: 9px;
}

.logo_mad img {
    width: 120px;
    /* position: absolute; */
    /* bottom: 0; */
    text-align: center;
}

.logo_mad {
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    position: absolute;
    bottom: 0;
}

a#po {
    width: 160;
}

select#supplier {
    margin-bottom: 0;
}

.info_order b, .ttg_perusahaan b {
    display: table-cell;
    padding-right: 1em;
    width: 78px;
}

.admin_page .form_list_product label {
    font-size: 13px;
    color: #252525;
}

i#exit_tax {
    position: unset;
}

.note_ h3 b {
    display: table-cell;
    padding-right: 1em;
}

#report #btn {
    display: block;
    width: 100%;
    padding: 20px;
    font-family: archivo;
    font-size: 15px;
    color: #656565;
    margin-top: 0;
    padding: 20px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-top: 1px solid #bcb9bf;
    position: relative;
    cursor: pointer;
    padding: 20px;
    font-weight: bold;
    border-radius: 15px;
}

#report #btn:hover {
    background: #1bcfed;
    color: white;
}

div#report {
    padding: 0;
    margin-bottom: 20px;
}

.start_from {display: flex;}

.start_from label {
    font-size: 14px;
}

.filter_ {
    margin: 20px;
    margin-left: 0px;
    margin-top: 5px;
    margin-bottom: 0;
    position: relative;
    width: 150;
}

.filter {
    /* background: white; */
    padding: 20px;
    padding-left: 0;
    padding-top: 0px;
    position: relative;
}

.filter_ button {
    position: absolute;
    bottom: 0;
    font-family: archivo;
    font-size: 14px;
    background: #1bcfed;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    padding: 15px;
    border-radius: 3px;
    text-align: center;
    border: 1px solid #1bcfed;
}

.filter_ button:hover {
    background: #ffffff;
    color: #1bcfed;
    border: 1px solid #1bcfed;
}

input[type="date"]:focus {
    border: 1px solid #1bcfed;
}

.table_report table {
    width: 100%;
    font-size: 14px;
    font-family: archivo;
    border-collapse: collapse;
    text-align: left;
    padding: 20px;
    border-bottom: 1px solid #737373;
}

.table_report {
    /* width: 100%; */
    padding: 20px;
}

.table_report table th, .table_report table td {
    padding: 14px;
    font-size: 13px;
}

.table_report table th {
    border-bottom: 1px solid #8f8f8f;
}


.table_report table tr:nth-child(even) {
  background-color: #ebebeb;
}

th.deskripsi_tbl {
    width: 30%;
}

td.nominal {
    text-align: right;
}

.table_report table td.sub_laba {
    padding-left: 40px;
    text-align: left;
    width: 21%;
}

.table_report table th.lb_rg_cls {
    border-bottom: none;
    border-top: 1px solid #8f8f8f;
    text-align: right;
}

th.judul_colm {
    width: 50%;
}

th#ttl {
    text-align: left;
}

th.jdl_left {
    text-align: right;
}

a.lst_desc {
    display: flex;
    text-decoration: none;
    /* padding: 17; */
    /* padding-left: 10px; */
    color: #626262;
    font-family: archivo;
    position: relative;
    padding: 10px;
    font-size: 12px;
    border-radius: 10px;
    margin: 5;
    float: left;
}
}

p {}

.lst_desc p {
    margin: 0;
}

.lst_desc #notif {
    font-size: 30px;
    margin: auto;
}

a.lst_desc:hover {
    background: #ff683a;
    color: white;
}

.form-setting input#enter {
    font-family: archivo;
    font-size: 14px;
    background: #1bcfed;
    font-weight: bold;
    border: none;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    padding: 17px;
    border-radius: 3px;
    margin-left: auto;
    /* height: 100px; */
    display: block;
    width: 100px;
    text-align: center;
    position: relative;
    /* height: 50px; */
    border-collapse: collapse;
}

a#enter {margin: auto;font-family: archivo;font-size: 14px;background: #1bcfed;font-weight: bold;border: none;color: white;cursor: pointer;transition: 0.2s;text-decoration: none;padding: 17px;border-radius: 3px;margin-left: auto;/* height: 100px; */display: block;width: 80%;text-align: center;position: relative;/* height: 50px; */border-collapse: collapse;}
}

.button-add a#excel {
    
}

a#excel {
    background: white;
    color: #1bcfed;
    border: 1px solid #1bcfed;
    margin-right: 20;
}

a#excel:hover {
    border: 1px solid #1bcfed;
    background: none;
    color: #1bcfed;
    transition: 0.2s;
}

div#order {}

tr.order_list_order {
    /* background: white; */
    border-radius: 15px;
    /* position: absolute; */
    /* box-shadow: 13px 9px 17px 0px; */
    border-radius: 15px;
    background: white;
    margin-bottom: 5px;
}

table.order_list {
    margin-bottom: 10px;
    margin-top: 10px;
}

.order_list_order {
    width: 100%;
    display: block;
    background: white;
    margin-top: 10px;
    position: relative;
    /* padding: 20px; */
    display: grid;
    grid-template-columns: 5% 20% 15% 15% 25% 20%;
    text-align: center;
    border-radius: 5px;
    font-family: archivo;
    font-size: 12px;
    border: 1px solid #ffffff;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    z-index: 2;
}

.order_list_order div {
    margin: auto;
    padding: 20px;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    width: unset;
}

div#juudultable {
    background: none;
    border-radius: unset;
    font-weight: bold;
    font-family: archivo;
    font-size: 13px;
    border: none;
    border-bottom: 1px solid #929496;
    box-shadow: none;
}

div#status_form {
    margin: auto;
    padding: 0;
    margin-top: 10px;
}

#status_form select#status {
    margin-bottom: 20;
}

#status_form div {}

#status_form label {
    color: #101010;
    text-align: left;
    display: block;
    margin-bottom: 5;
}

.no_table {
    padding: 20px;
}

.order_list_order .no_table {
    padding-left: 10px;
}

.order_list_order:hover {
    /* border: 1px solid #1bcfed; */
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.order_list_order .list_update {
    padding: 5px;
}

.list_option {display: block;margin-left: auto;width: 200px;}

.tracking {
    margin: 20px;
    background: white;
    margin-top: 0;
    padding: 20px;
    border-radius: 5px;
    display: none;
    /* position: relative; */
    top: -1px;
    z-index: 1;
    border: 1px solid #ddd;
}

span#tracking_bold {}

.tracking_line {
    font-size: 43px;
    text-align: center;
    display: block;
}

.tracking_icon {
}

.tracking_bold {
    font-size: 14px;
    display: block;
    margin: auto;
    text-align: center;
}
}

.description_tracking {}

.icon {
    width: 46px;
}

.description_tracking h1, .description_tracking h2 {
    background: none;
    border-radius: unset;
    font-weight: bold;
    font-family: archivo;
    font-size: 11px;
    border: none;
    box-shadow: none;
    margin-top: 0;
    margin-bottom: 5px;
    color: unset;
    position: relative;
}

.description_tracking {
    display: grid;
    grid-template-columns: 15% 15% 50% 45%;
    color: #d2d2d2;
}

span#tracking {
    font-size: 37px;
    display: block;
    margin-right: 10;
}

.description_tracking h1 {
    font-size: 13px;
    /* color: #131313; */
}


.box_shadow{
    
    
    box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
}

.table_tracking {
    display: grid;
    grid-template-columns: 50% 45%;
    column-gap: 5%;
}

#status_form input[type="date"],#status_form input[type="file"] {
    margin-bottom: 20px;
}

.input_text_sign {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 50% 50%;
}

.input_text_sign .note textarea {
    height: 150;
    padding: 10;
    font-size: 13;
    color: #606060;
    margin-bottom: 0;
}

.sign {
    font-family: 'Archivo';
    width: 200px;
    margin-left: auto;
    display: block;
    text-align: center;
    margin-top: 30;
}

.sign_jabatan {}

div#jabatan_dign {
    margin-top: 100px;
    /* height: 50px; */
    display: block;
    border-top: 1px solid #84919e;
}

.input_text_sign .note h4 {
    font-size: 13px;
    margin-bottom: 5px;
}

.upload_photo button {
    background: #1bcfed24;
    border: none;
    padding: 10;
    border-radius: 2px;
    font-size: 11px;
    color: #1bcfed;
    font-weight: bold;
    cursor: pointer;
}

.upload_form {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 15px;
    font-family: archivo;
    font-weight: bold;
    /* height: 500px; */
    width: 350px;
    z-index: 105;
}

.admin_page .upload_form label {
    font-size: 17px;
    text-align: center;
    color: #616161;
    margin: 10px;
    margin-bottom: 10px;
    padding: 20px;
    width: 100%;
    text-align: center;
    margin: auto;
    display: block;
}

.upload_form div {
    margin: 20px;
}

.upload_form input.button_right_new_order {
    width: 100;
    font-family: archivo;
    font-size: 12px;
    background: #1bcfed;
    font-weight: bold;
    border: none;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    padding: 15px;
    border-radius: 3px;
    margin-left: auto;
    /* height: 100px; */
    display: block;
    width: 150px;
    text-align: center;
}

i.fa.fa-times.exit_upload {
    color: #272727;
    display: block;
    margin-left: auto;
    width: 20px;
}

.upload_bkt img {
    width: 100%;
}

.upload_form .upload_bkt {
    /* width: 100%; */
    overflow: auto;
    height: 250px;
    border-radius: 10px;
    position: real;
}

.upload_form .tdk_photo {
    text-align: center;
    margin: auto;
    display: block;
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.input_text_sign .note textarea:disabled {
    background: white;
}

table.product_list {
    margin-bottom: 20px;
}

button.button_upload {width: 100;font-family: archivo;font-size: 12px;background: #1bcfed;font-weight: bold;border: none;color: white;cursor: pointer;transition: 0.2s;text-decoration: none;padding: 15px;border-radius: 3px;margin-left: auto;/* height: 100px; */display: block;width: 150px;text-align: center;width: 100%;}
}

button.upload_btn {}

button.upload_btn {
    font-family: archivo;
    font-size: 14px;
    background: none;
    font-weight: bold;
    border: 1px solid #1bcfed;
    color: #1bcfed;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    border-radius: 3px;
    /* height: 100px; */
    display: block;
    text-align: center;
    position: relative;
    height: 50px;
    border-collapse: collapse;
    /* overflow: hidden; */
    padding: 10px;
    min-width: 150px;
    margin-left: auto;
    width: 100%;
}

button#bukti_telah_dibayar {}

.notif_per {
    background: #1bcfed;
    padding: 10px;
    color: white;
    text-align: center;
    border-radius: 5px;
}

::before {}

.fa-check {}

#update i.fa.fa-check {
    color: #ffffff;
    font-size: 11px;
    background: #57E7FB;
    padding: 4px;
    border-radius: 20px;
}

button.tanggal_tracking {
    background: none;
    border-radius: unset;
    font-weight: bold;
    font-family: archivo;
    font-size: 12px;
    border: none;
    box-shadow: none;
    margin-top: 0;
    margin-bottom: 5px;
    color: unset;
    cursor: pointer;
    transition: 0.2s;
}

button.tanggal_tracking:hover {
    /* background: #1bcfed80; */
    color: #005996;
    font-size: 12px;
}

.description_t {
    position: relative;
}

.hover_date_tracking {
    position: absolute;
    background: #035d9a;
    padding: 10px;
    border-radius: 5px;
    right: -83px;
    top: -37px;
    box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
    color: white;
}

i.fa.fa-caret-up {
    font-size: 35px;
    position: absolute;
    left: -8px;
    bottom: -15px;
    transform: rotate(225deg);
    color: #035d9a;
}

input.tracking_date {
    height: 30px;
    font-size: 13;
    width: 150;
    margin: 0;
    border: none;
    cursor: pointer;
    margin-top: 0;
    background: none;
    color: white;
    font-family: archivo;
}

.input_date_tracking {
    z-index: 20;
    position: absolute;
    background: #035d9a;
    padding: 5px;
    border-radius: 4px;
    right: -141px;
    top: -34px;
    box-shadow: rgb(50 50 93 / 25%) -1px 3px 7px 1px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
    color: white;
}

.description_tracking h2 {
    position: relative;
}

i.fa-times.exit_date {
    color: #035d9a;
    position: absolute;
    background: #ffffff;
    padding: 5px;
    top: -13px;
    right: -21px;
    border-radius: 20px;
    font-size: 18px;
}

h1 {}

.b {}

.ttg_perusahaan b {}

.ttg_perusahaan {
    width: 300px;
    margin-left: auto;
    font-size: 14px;
    margin-top: 10px;
    text-align: justify;
}

.form_new_order form {
    box-sizing: border-box;
    padding: 10px;
    display: block;
}

.form_input {
    height: 70%;
    overflow: scroll;
    padding: 10;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.notif_set {
    width: 100%;
    text-align: center;
    font-family: archivo;
    font-size: 15px;
    margin-bottom: 10px;
    color: #656565;
    margin-top: 0;
    padding: 20px;
    width: 100%;
    background: none;
    border: none;
    padding: 10px;
    font-weight: bold;
    box-sizing: border-box;
    background: #1bcfed;
    color: white;
    border-radius: 5px;
}

div.label_print {
    width: 210mm;
    background: white;
    margin: auto;
    height: 140mm;
    padding: 20px;
    box-sizing: border-box;
}

.nm_lg h1 {
    font-size: 27px;
}

#label_pengiriman .info_order h1 {
    font-size: 20px;
    color: #1ac9e7;
    width: 100%;
}

#label_pengiriman label#invoice {
    margin-bottom: 10;
}

div#label_pengiriman {
    margin: 20px;
    box-sizing: border-box;
    border: 1px solid #cdcdcd;
}

#label_pengiriman .info_order {
    width: 100%;
}

#print_cetak #grid b {
    display: table-cell;
    padding-right: 1em;
    width: 10px;
}

#label_pengiriman b {
    width: 100px;
}

#order_label {}

#label_pengiriman .info_invoice {
    display: block;
}

#label_pengiriman .info_invoice #order_label label, #label_pengiriman .info_invoice #order_label label .keterangan, #label_pengiriman .info_invoice #order_label label .keterangan .alamat {
    font-size: 18px;
    width: 100%;
}

.alamat {}

.total_num {
    text-align: right;
}

table_report table {}

.form_date {
    width: 200px;
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
    position: absolute;
    top: 35px;
    left: 22px;
    z-index: 1;
    padding-top: 20;
}

.form_date button.the_date {
    width: 95%;
    display: block;
    padding: 10px;
    margin: 5px;
    box-sizing: border-box;
    border: 0px;
    border-radius: 5px;
    font-family: archivo;
    font-size: 14px;
    cursor: pointer;
}

.form_date button.the_date:hover {
    background: #1bcfed;
    color: white;
}

.filter .periode {
    /* background: white; */
    /* padding: 15px; */
    font-family: archivo;
    font-size: 15px;
    width: 150px;
    box-sizing: border-box;
    /* box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px; */
    border-radius: 5px;
    z-index: 100;
    cursor: pointer;
}

div#dshbrd {
    display: flex;
    width: 100%;
    gap: 20px;
}

pos {}

.ctgry_fltr {
    position: relative;
    width: 100%;
    display: block;
}

div#option {
    z-index: 97;
    display: none;
}

select#dashbrd_yrs, #periode_category, #optional_category, #optional_category_2 {
    margin-bottom: 0;
    margin-top: 0;
    background: white;
}

div#option_1 {
    z-index: 80;
    top: 0;
    display: none;
}

button#input {
    border: 1px solid #1bcfed;
    background: none;
    color: #1bcfed;
    transition: 0.2s;
    font-family: archivo;
    font-size: 14px;
    background: #1bcfed;
    font-weight: bold;
    border: none;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    padding: 17px;
    border-radius: 3px;
    /* height: 100px; */
    display: block;
    width: 100px;
    text-align: center;
    position: relative;
    /* height: 50px; */
    border-collapse: collapse;
}

select#optional_category {}

div#option_2 {
    display: none;
}

div#option_3 {
    display: none;
}

button#order_new {
    width: 100;
    font-family: archivo;
    font-size: 12px;
    background: #1bcfed;
    font-weight: bold;
    border: none;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    padding: 15px;
    border-radius: 3px;
    margin-left: auto;
    /* height: 100px; */
    display: block;
    width: 150px;
    text-align: center;
}

div#login {
    width: 100%;
    /* background: white; */
    /* max-width: 700px; */
    position: relative;
    padding: 20px;
}

img#logo_logi {
    height: 100%;
    display: block;
    margin-left: auto;
    float: right;
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    box-sizing: border-box;
}

.nm_lg {
    position: relative;
}

.pht {
    height: 100%;
    overflow: hidden;
    border-radius: 10px 0px 0px 10px;
    width: 70%;
}

img#logo_scrr {
    height: 100%;
}

.notif_lgn {
    background: #ff683a;
    padding: 10;
    text-align: center;
    color: white;
    border-radius: 5px;
    font-size: 13;
}

#prc_btn {
    float: none;
    width: 100px;
    height: unset;
    margin: unset;
    display: block;
}

#prc_btn #input_data {
    width: 140px;
    margin-top: unset;
    font-size: 13px;
    height: unset;
    padding: 15px;
    display: block;
}

.fadein {
    width: 100%;
    height: 100%;
    background: white;
    z-index: 100;
    position: absolute;
    top: -586px;
    top: 0;
    transition: 2s;
}
}

.fadein img#logo_logi {
    /* width: 50px; */
    height: unset;
}

.fadein img#logo_logi {
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 30%;
    height: unset;
    float: unset;
    right: unset;
}



.tgl_mn {
    display: none;
}

select#client {
    background: white;
}

select#supplier {
    background: white;
}

.taable_file table {
    width: 100%;
    display: block;
}

.taable_file {
    display: block;
    width: 700px;
    min_width: 450px;
    margin-bottom: 30px;
}

.clmn {
    display: flex;
}

tr {}

.taable_file th {
    font-family: archivo;
    font-size: 15px;
    color: #525252;
    text-align: left;
    height: 30px;
}

td#file_nm {
    width: 80%;
}

a#file_delete:hover {
    background: #5d5d5d;
    color: white;
}

a#file_delete {
    padding: 10px;
    color: #5d5d5d;
    text-decoration: unset;
}

.print_ops {
    display: grid;
    grid-template-columns: 50% 50%;
}

div#print_cetak {
    margin: unset;
    width: 58mm;
    page-break-after: always !important;
    page-break-before: always !important;
}

#print_cetak .logo img {
    width: 150px;
    text-align: center;
    margin: auto;
    box-sizing: border-box;
}

#print_cetak .header_invoice {
    padding: 5px;
    padding-top: 20px;
    border-bottom: 1px solid #000000;
}

#print_cetak .logo {
    width: 150px;
    margin: unset;
    margin: auto;
}

#print_cetak .info_order {
    margin: 10px;
    font-size: 10;
}

#print_cetak .info_order h1 {
    font-size: 12px;
    color: black;
}

#print_cetak .info_order b, #print_cetak .ttg_perusahaan b {
    width: 60px;
    color: black;
}

#print_cetak .form_invoice {
    padding: unset;
}

#print_cetak .table {
    margin: 5px;
}

#print_cetak .table td {
    padding: unset;
    font-size: 11;
    margin: auto;
}

#print_cetak .table td#grid {
    width: 50mm;
    display: grid;
    color: black;
}

#print_cetak tbody {
    width: 58mm;
    color: white;
}

#print_cetak .table table {
    box-sizing: border-box;
    width: 100%;
}

#print_cetak tr.data_product_list {
    padding: unset;
    display: grid;
    grid-template-columns: 10% 90%;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

#print_cetak tr.data_product_list #grid div {
    width: 100%;
    display: table-row;
}

#print_cetak #bld {
    font-weight: bold;
    font-size: 10px;
}

#print_cetak tr.data_product_list #grid #prc {
    display: grid;
    padding-top: 5px;
    display: table-row;
}

#print_cetak td.tax_flex {
    display: unset;
}

#print_cetak tr.sub_total td {
    text-align: left;
    margin: unset;
    color: black;
}

#print_cetak tr#list_out {
    border-top: unset;
}

.thx {
    font-weight: bold;
    font-size: 15px;
    font-family: archivo;
    text-align: center;
    margin-top: 20px;
}

a#ctak {
    float: right; */
    /* text-align: right; */
    background: none;
    border: none;
    font-family: archivo;
    text-align: left;
    font-size: 17;
    padding: 20px;
    background: none;
    border: none;
    font-weight: bold;
    background: #1bcfed;
    cursor: pointer;
    text-decoration: none;
    display: block;
    width: 109px;
    text-align: center;
    color: white;
    margin-left: auto;
}

.update-fls {
    position: absolute;
    background: white;
    padding: 20px;
    box-shadow: rgb(156 156 156 / 49%) 0px 4px 12px;
    display: none;
}

.inp {
    display: block;
    display: flex;
    width: 100%;
    margin-top: 20px;
}

button.update-btn {
    font-weight: bold;
    background: white;
    border: none;
    padding: 10px;
    text-decoration: unset;
    color: #1bcfed;
    cursor: pointer;
}

button.update-btn:hover {
    background: #1bcfed;
    color: white;
}

.update-fls i.fa.fa-close {
    position: absolute;
    top: -9px;
    right: -6px;
    font-size: 24px;
    cursor: pointer;
}

input.updt_csv-t {
    font-family: archivo;
    font-size: 14px;
    background: #1bcfed;
    font-weight: bold;
    border: none;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    padding: 17px;
    border-radius: 3px;
    /* height: 100px; */
    display: block;
    width: 100px;
    text-align: center;
    position: relative;
    height: 50px;
    border-collapse: collapse;
    margin: unset;
}