@font-face
 { font-family : 'helvetica-school';
   src : url('../fonts/helvetica-school.ttf') format('truetype');
   font-weight : normal;
   font-style : normal;
 }

*
 { margin : 0px;
   padding : 0px;
   font-family : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

body
 { background : #f5f5f5;
 }

.scroll-hidden
 { overflow : auto;
   scrollbar-width : none; /* untuk Firefox */
   -ms-overflow-style : none;  /* untuk IE 10+ */
 }

.scroll-hidden::-webkit-scrollbar
 { display: none; /* untuk Chrome, Safari, Opera */
 }

.kontainer
 { width : calc(100% - 40px);
   max-width : 1100px;
   margin-left : auto;
   margin-right : auto;
 }

.kontainer2
 { width : 100%;
   max-width : 1100px;
   margin-left : auto;
   margin-right : auto;
 }

.header
 { background : #0889db;
   padding : 10px 0px 20px 0px;
 }

.toolbar
 { background : #0889db;
   padding : 15px 0px;
   color : white;
   position : fixed;
   width : 100%;
   top : 0px;
   z-index : 3;
   font-weight : bold;
   font-size : 16px;
 }

@media only screen and (max-width : 1140px)
 { .kontainer
    { padding : 0px 20px;
    }
 }

.header .konten
 { display : grid;
   grid-template-columns : auto 1fr;
   column-gap : 20px;
   row-gap : 10px;
   align-items : center;
 }

@media only screen and (max-width : 500px)
 { .header .konten
    { grid-template-columns : 1fr;
    }
 }

.header .konten div img
 { width : 100%;
   max-width : 200px;
 }

.header .cari
 { position : relative;
 }

.header .cari input[type='text']
 { width : calc(100% - 65px);
   padding : 0px 50px 0px 10px;
   font-size : 14px;
   height : 38px;
 }

.header .cari button
 { position : absolute;
   top : 5px;
   right : 5px;
   height : 32px;
   width : 40px;
   background : #0889db;
   color : white;
   border : 0px;
   border-radius : 5px;
 }

.header .cari button:active
 { background : #0871b4;
 }

.produk
 { margin : 20px 0px;
   flex : 1;
   padding-bottom : 80px;
 }

.produk .kontainer
 { display : grid;
 }

.item
 { background : #0889db;
   border-radius : 5px;
   overflow : hidden;
 }

.item .icon
 { border : 1px solid silver;
   border-radius : 5px;
   background : white;
   color : #5d5d5d;
   text-align : center;
   position : relative;
 }

.item .icon img
 { width : 100%;
 }

.item .label
 { background : #0889db;
   color : white;
   padding : 10px;
   width : calc(100% - 20px);
   margin-top : -5px;
   z-index : 2;
   position : relative;
   text-align : center;
   font-size : 14px;
 }

.halaman
 { display : none;
   min-height : 100vh;
 }

/*.halaman .konten:nth-child(n+2)
 { padding-top : 50px;
 }*/

.halaman.aktif
 { display : block;
 }

.bottomMenu
 { position : fixed;
   z-index : 3;
   bottom : 0px;
   width : 100%;
   display : grid;
   grid-template-columns : 1fr 1fr 1fr;
   color : white;
   user-select : none;
 }

.bottomMenu .item-menu
 { text-align : center;
   background : #0889db;
   cursor : pointer;
   padding : 10px;
   position : relative;
 }

.bottomMenu .item-menu.aktif, .bottomMenu .item-menu:hover
 { background : #035f99;
 }

.bottomMenu .item-menu .notif
 { position : absolute;
   top : 5px;
   right : 5px;
   background : #f9ed37;;
   color : #0889db;
   padding : 5px;
   border-radius : 50%;
   width : 15px;
   height : 15px;
   display : flex;
   align-items : center;
   justify-content : center;
   font-weight : bold;
   font-size : 10px;
 }

button
 { padding : 7px 7px;
   font-size : 14px;
   font-weight : bold;
   border : 1px solid silver;
   border-radius : 3px;
   background : #e9e9ed;
 }

button:active
 { background : #b1b1b9;
   border-color : #8d8d93;
 }

button.btn-primary
 { background : #0889db;
   color : white;
   border-color : #0479c3;
   cursor : pointer;
 }

button.btn-primary:active
 { background : #0567a5;
   border-color : #025184;
 }

button.btn-success
 { background : #2dc00b;
   color : white;
   border-color : #209804;
 }

button.btn-success:active
 { background : #209804;
   border-color : #1a8102;
 }

button.btn-warning
 { background : #d4db08;
   color : white;
   border-color : #bdc402;
 }

button.btn-warning:active
 { background : #bdc402;
   border-color : #acb201;
 }

button.btn-danger
 { background : #f41b1b;
   color : white;
   border-color : #e41111;
 }

button.btn-danger:active
 { background : #e41111;
   border-color : #d20c0c;
 }

textarea
 { resize : none;
   height : 18px;
 }

input[type='text'], input[type='number'], input[type='password'], textarea, .input-read-only
 { padding : 5px;
   border : 1px solid #ccc;
   border-radius : 4px;
   font-size : 15px;
   width : calc(100% - 12px);
   min-height : 17px;
 }

input[type='text']:focus, input[type='number']:focus, input[type='password']:focus, textarea:focus
 { border : 1px solid #007BFF;
   outline : none;
 }

input[type=number]
 { -moz-appearance: textfield; /* Firefox */
 }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button
 { -webkit-appearance: none;  /* Chrome, Safari, Edge */
   margin: 0;
 }

.group-input
 { border : 1px solid silver;
   padding : 17px 15px 17px 15px;
   position : relative;
 }

.group-input .group-title
 { display : inline-block;
   font-weight : bold;
   position : absolute;
   top : -10px;
   background : white;
   padding : 0px 5px;
 }

.form-input
 { display : grid;
   grid-template-columns : auto 1fr;
   column-gap : 20px;
   row-gap : 5px;
   align-items : center;
 }

.form-input>div:nth-child(odd)
 { /*padding-top : 7px;*/
 }

.error, .error2
 { color : red;
   font-weight : normal !important;
 }

#kontainer-chat
 { margin : 0px auto;
   max-width : 1100px;
   background : white;
   box-shadow : 0 0 5px gray;
   color : #4d4d4d;
   display : grid;
   grid-template-rows : 1fr auto;
 }

#kontainer-chat #list-chat
 { padding : 10px;
 }

#kontainer-chat .tools-sematan
 { position : relative;
   cusor : pointer;
   user-select : none;
 }

#kontainer-chat .tools-sematan .sematan-konten
 { padding : 10px;
   border : 1px solid silver;
   border-radius : 5px;
   background : #eaf5ff;
   margin-bottom : 10px;
 }

#kontainer-chat .tools-sematan .sematan-konten .sematan-title
 { color : #0aaa2b;
   font-weight : bold;
   margin-bottom : 5px;
 }

#kontainer-chat .tools-sematan .sematan-konten .sematan-title.me
 { color : #0889db;
 }

#kontainer-chat .tools-sematan .sematan-konten .sematan-title.admin
 { color : #6c02c4;
 }

#kontainer-chat .tools-sematan .sematan-konten .sematan-file
 { border-bottom : 1px solid silver;
   margin-bottom : 5px;
   padding-bottom : 5px;
 }

#kontainer-chat .tools-sematan .sematan-konten .sematan-teks
 { display : -webkit-box;
   -webkit-line-clamp : 3;   /* jumlah baris */
   -webkit-box-orient : vertical;
   overflow : hidden;
   text-overflow : ellipsis;
 }

#kontainer-chat .tools-sematan .sematan-close
 { position : absolute;
   right : 5px;
   top : 0px;
 }

#kontainer-chat #tools-chat
 { padding : 10px;
   border-top : 1px solid silver;
   position : relative;
 }

#kontainer-chat #tools-chat #info-pesan
 { position : absolute;
   top : -60px;
   right : 20px;
   background-color : #069b33;
   color : #fff;
   border-radius : 5px;
   font-size : 14px;
   box-shadow : 0 8px 18px rgba(128, 166, 141, 0.84);
   user-select : none;
   cusor : pointer;
 }

#kontainer-chat #tools-chat .tools-file
 { display : flex;
   overflow-x : auto; /* aktifkan scroll horizontal */
   white-space : nowrap; /* mencegah turun ke baris berikutnya */
   gap : 10px; 
   width : calc(100vw - 20px);
   max-width : 1080px;
 }

#kontainer-chat #tools-chat .tools-file .item-file
 { display : inline-flex; /* agar ukurannya ikut konten */
   align-items : center;
   justify-content : center;
   border : 1px solid silver;
   position : relative;
   margin-bottom : 10px;
   height : auto;
 }

#kontainer-chat #tools-chat .tools-file .item-file img
 { max-height : 250px; /* batas tinggi */
   width : auto;       /* biarkan rasio gambar normal */
   height : auto;
 }

#kontainer-chat #tools-chat .tools-file .item-file .delete-file
 { position : absolute;
   bottom : 0px;
   background : #0000009e;
   color : white;
   text-align : center;
   width : calc(100% - 10px);
   user-select : none;
   cursor : pointer;
   padding : 5px;
 }

#kontainer-chat #tools-chat .tools-file .item-file .delete-file:hover
 { text-decoration : underline;
 }

#kontainer-chat #tools-chat .tools-chat
 { display : grid;
   grid-template-columns : auto 1fr auto;
   gap : 5px;
 }

#kontainer-chat #tools-chat .tools-chat .attachment
 { position : relative;
 }

#kontainer-chat #tools-chat .tools-chat .attachment .jenis-attachment
 { position : absolute;
   bottom : 50px;
   width : max-content;
   max-width : calc(100vw - 30px);
   background : white;
   display : none;
   border-radius : 5px;
   border : 1px solid silver;
   box-shadow : 1px 1px 3px silver;
   padding : 5px 0px;
 }

#kontainer-chat #tools-chat .tools-chat .attachment .jenis-attachment.show
 { display : grid;
   grid-template-columns : auto;
 }

#kontainer-chat #tools-chat .tools-chat .attachment .jenis-attachment .group
 { display : grid;
   padding : 5px 10px;
   grid-template-columns : 25px auto;
   align-items : center;
   cursor : pointer;
   user-select : none;
   background : white;
   transition : background 0.5s;
 }

#kontainer-chat #tools-chat .tools-chat .attachment .jenis-attachment .group:hover
 { background : #eaf5ff;
 }

#kontainer-chat #tools-chat .tools-chat .text-box
 { position : relative;
 }

#kontainer-chat #tools-chat .tools-chat .text-box textarea
 { padding-right : 30px;
   width : calc(100% - 40px);
   max-height : 100px;
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* Internet Explorer & Edge lama */
 }

#kontainer-chat #tools-chat .tools-chat .text-box i
 { position : absolute;
   right : 13px;
   top : 7px;
 }

#kontainer-chat #tools-chat .tools-chat .fa-file-image-o, #kontainer-chat #tools-chat .tools-chat .fa-send
 { font-size : 22px;
 }

#list-chat
 { background-color : #eaf5ff;
   overflow-y : auto;
 }

#list-chat .item-list-chat .chat-kontainer
 { display : flex;
   flex-direction : row;
   gap : 10px;
   margin-bottom : 15px;
 }

#list-chat .item-list-chat .chat-kontainer.me
 { flex-direction : row-reverse;
 }

#list-chat .item-list-chat .chat-kontainer .chat-left
 { max-width : 80%;
 }

#list-chat .item-list-chat .chat-kontainer .chat-left .chat-border
 { background : white;
   border : 1px solid #0aaa2b;
   border-radius : 5px;
   padding : 10px;
   transition : background-color 0.5s;
 }

#list-chat .item-list-chat .chat-kontainer.me .chat-left .chat-border
 { border : 1px solid #0889db;
 }

#list-chat .item-list-chat .chat-kontainer.admin .chat-left .chat-border
 { border : 1px solid #6c02c4;
 }

#list-chat .item-list-chat .chat-kontainer .chat-left .chat-border.highlight, #list-chat .item-list-chat .chat-kontainer.me .chat-left .chat-border.highlight
 { background : #37def93d;
 }

#list-chat .item-list-chat .chat-kontainer .chat-left .chat-border .chat-title
 { color : #0aaa2b;
   margin-bottom : 5px;
   font-weight : bold;
 }

#list-chat .item-list-chat .chat-kontainer.me .chat-left .chat-border .chat-title
 { color : #0889db;
 }

#list-chat .item-list-chat .chat-kontainer.admin .chat-left .chat-border .chat-title
 { color : #6c02c4;
 }

#list-chat .item-list-chat .chat-kontainer .chat-left .chat-border .chat-foto
 { width : 100%;
   overflow-x : auto;
   display : flex;
   flex-wrap : nowrap;
   gap : 20px;
 }

#list-chat .item-list-chat .chat-kontainer .chat-left .chat-border .chat-foto img
 { max-height : 250px; /* batas tinggi */
   width : auto;       /* biarkan rasio gambar normal */
   height : auto;
   border : 1px solid silver;
 }

#list-chat .item-list-chat .chat-kontainer .chat-footer
 { display : grid;
   grid-template-columns : auto 1fr;
   gap : 10px;
   font-size : 12px;
   cursor : pointer;
   user-select : none;
   position : relative;
 }

.list-pesanan
 { display : none;
 }

.list-pesanan.active
 { display : block;
 }

.chat-footer .view-user-read
 { display : none;
   gap : 10px;
   background : white;
   padding : 5px;
   border : 1px solid silver;
   border-radius : 3px;
   position : absolute;
   top : 100%;
   left : 0px;
   right : unset;
   width : max-content;
   max-width : calc(100vw - 30px);
   box-shadow : 3px 3px 3px silver;
 }

#list-chat .item-list-chat .chat-kontainer.me .chat-footer
 { grid-template-columns : 1fr auto;
 }

#list-chat .item-list-chat .chat-kontainer.me .chat-footer .chat-time
 { text-align : right;
 }

.chat-kontainer.me .chat-footer .view-user-read
 { right : 0px;
   left : unset;
 }

.chat-footer .view-user-read.show
 { display : grid;
   grid-template-columns : auto 1fr;
 }

.box-emoji
 { display : flex;
   flex-wrap : wrap;
 }

.box-emoji div
 { width : 30px;
   padding : 5px;
   text-align : center;
 }

.penawaran-masuk
 { background : #f9f9f9;
   padding : 10px;
   border-radius : 5px;
   border-left : 3px solid #0aaa2b;
 }

.penawaran-masuk img
 { width : 100%;
   border-radius : 10px;
   max-width : 100px;
 }

.penawaran-masuk .form-input
 { column-gap : 10px;
   margin-top : 5px;
 }

.penawaran-masuk .grid
 { display : grid;
   grid-template-columns : auto auto;
   gap : 5px;
 }

.penawaran-masuk .grid i
 { color : #0aaa2b;
 }

.penawaran-masuk .tindakan
 { text-align : center;
   margin-top : 10px;
 }

.invoice-masuk
 { background : #f9f9f9;
   padding : 10px;
   border-radius : 5px;
   border-left : 3px solid #e62d2d;
   position : relative;
 }

.invoice-masuk hr
 { border : 1px solid black;
   border-top : 0px;
   border-left : 0px;
   border-right : 0px;
   margin : 6px 0px;
 }

.invoice-masuk .title
 { color : #e62d2d;
   font-weight : bold;
   margin-bottom : 5px;
 }

.invoice-masuk .price
 { display : grid;
   grid-template-columns : 1fr auto;
   gap : 10px;
   margin-bottom : 5px;
 }

.invoice-masuk .price div:nth-child(2)
 { text-align : right;
 }

.invoice-masuk .action
 { display : grid;
   grid-template-columns : 1fr 1fr;
   gap : 10px;
 }

.invoice-masuk .approval
 { position : absolute;
   top : 50%;
   left : 50%;
   transform : translate(-50%, -50%);
 }

.invoice-masuk .approval img
 { width : 100%;
   max-width : 100px;
   opacity : 0.5;
 }

@media only screen and (max-width : 600px)
 { 
   .form-input
    { grid-template-columns : 1fr;
    }
 }

@media only screen and (min-width : 200px)
 { .produk .kontainer
    { grid-template-columns : 1fr 1fr;
      gap : 20px;
    }
 }
@media only screen and (min-width : 600px)
 { .produk .kontainer
    { grid-template-columns : 1fr 1fr 1fr;
      gap : 20px;
    }
 }
@media only screen and (min-width : 800px)
 { .produk .kontainer
    { grid-template-columns : 1fr 1fr 1fr 1fr;
      gap : 20px;
    }
 }
@media only screen and (min-width : 1000px)
 { .produk .kontainer
    { grid-template-columns : 1fr 1fr 1fr 1fr 1fr;
      gap : 20px;
    }
 }


/* animasi "lompat-lompat" */
@keyframes hop
 { 0%   { transform: translateY(0) scale(1); }
   20%  { transform: translateY(-18px) scale(1.03); } /* naik */
   40%  { transform: translateY(0)  scale(0.99); }    /* mendarat */
   60%  { transform: translateY(-8px)  scale(1.02); } /* hop kecil */
   80%  { transform: translateY(0)  scale(1); }       /* settle */
   100% { transform: translateY(0)  scale(1); }
 }

/* jalankan animasi perlahan-lahan berulang */
.jump-box
 { animation: hop 2.2s cubic-bezier(.2,.9,.3,1) infinite;
   animation-delay: 0.5s;
 }

/* sedikit efek hover/fokus untuk interaksi */
.jump-box:hover, .jump-box:focus
 { transform: translateY(-6px) scale(1.03);
   transition: transform 180ms;
   outline: none;
 }

/* aksesibilitas: respect reduced motion */
@media (prefers-reduced-motion: reduce)
 { .jump-box { animation: none; }
 }