body {
    HEIGHT : 100VH;
    WIDTH : 100VW;
    TEXT-ALIGN : RIGHT;
    FONT-SIZE : 1.3em;
    
    FONT-FAMILY : "Beiruti", sans-serif;
    FONT-OPTICAL-SIZING: AUTO;
    FONT-WEIGHT : 400;
    /* FONT-STYLE: normal; */

background-color: rgb(223, 223, 223);

}
/* $2y$10$6QK1qYjq3nTgHyOMhSdk8eIrrvq6OgjKUlt11fGNx3p7HWSG.TaDa */

.vmenu {

  }

.brand-model {
    background-color: rgb(224, 231, 255);
    /*background-color: rgb(115, 109, 155);*/
    color : rgb(24, 25, 88);
    HEIGHT : 9vh;
}
.menu {
    HEIGHT : 98VH;
    /*WIDTH : 100VW;*/
    border-radius: 20px;
    MARGIN : 9 ;


    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10.1px);
    -webkit-backdrop-filter: blur(10.1px);
    /* border: 1px solid rgba(216, 186, 186, 0.73); */
}

.log {
    HEIGHT : 70VH;
    /*WIDTH : 100VW;*/
    border-radius: 1.5rem;
    MARGIN-TOP : 2em ;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10.1px);
    -webkit-backdrop-filter: blur(10.1px);
    border: 1px solid rgba(190, 190, 190, 0.73);
}


.sub-menu {
    DISPLAY : NONE;
}
.sub-menu.show {
    DISPLAY : BLOCK;
    BORDER-BOTTOM : 1px SOLID rgb(235, 235, 235);
}

.menu-body {
    HEIGHT : 98VH;
    /*WIDTH : 100VW;*/
    border-radius: 20px;
    MARGIN : 10 ;
    /* background-color: rgb(255, 255, 255); */


    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10.1px);
    -webkit-backdrop-filter: blur(10.1px);
    /* border: 1px solid rgba(216, 186, 186, 0.73); */
}
.menu-body-nav {
    /* background-color: rgb(255, 255, 255); */
    /*background-color: rgb(115, 125, 153);*/
    color : rgb(0, 0, 0);
    border-radius: 1.5rem;
    HEIGHT : 7vh;
    /* BORDER-BOTTOM : 1px SOLID rgb(243, 243, 243); */
    /* box-shadow:  -3px 0 3px rgb(231, 231, 231) INSET; */
}
/*-5px 3px 9px rgb(201, 201, 201) ,*/


/*----------- QYASAKAN ----------*/
.w-100 { WIDTH : 100%; }
.w-50 { WIDTH : 50%; }
.w-20 { WIDTH : 20%; }
.w-30 { WIDTH : 30%; }
.w-35 { WIDTH : 35%; }
.w-15 { WIDTH : 15%; }
.w-10 { WIDTH : 10%; }
.w-7 { WIDTH : 7%; }
.w-5 { WIDTH : 5%; }

.vh-50 { 
    WIDTH: 100%;
    HEIGHT: 40VH;
}



/*---------- PADDING AND MARGIN -----------*/
.marg-0 { MARGIN : 0; }
.marg-5 { MARGIN : 5px; }
.marg-r-5 { MARGIN : 5px; }
.marg-10 { MARGIN : 10px; }
.marg-15 { MARGIN : 15px; }
.marg-20 { MARGIN : 20px; }
.marg-25 { MARGIN : 25px; }
.marg-10-20 { MARGIN : 10px 20px; }

.marg-l-10 { MARGIN-LEFT : 10px; }
.marg-b-3 { MARGIN-BOTTOM : 5px; }

.pad-0 { PADDING: 0; }
.pad-1 { PADDING: 1px; }
.pad-3 { PADDING: 3px; }
.pad-5 { PADDING: 5px; }
.pad-7 { PADDING: 7px; }
.pad-10 { PADDING: 10px; }
.pad-0-10 { PADDING: 0 10px; }
.pad-15 { PADDING: 15px; }
.pad-20 { PADDING: 20px; }
.pad-25 { PADDING: 25px; }


/*------------- border ----------------*/
.border-0 { BORDER : 0 ; }
.border-5 { border: 5px ; }
.border-rad-0 { BORDER-RADIUS : 0 ; }
.border-rad-3 { BORDER-RADIUS : 3px ; }
.border-rad-5 { BORDER-RADIUS : 1.5rem ; }
.border-rad-50 { BORDER-RADIUS : 50% ; }
.border-b { BORDER-BOTTOM : 1px SOLID rgb(175, 175, 175) }
.border-a { BORDER : 1px SOLID rgb(175, 175, 175) }


/*----------- rangakan ---------*/
.bg-w { background-color: rgb(255,255,255);}
.c-w { color: rgb(255,255,255);}
.bg-b { background-color: rgb(0,0,0);}
.bg-green { background-color: rgb(88, 173, 105);}
.bg-yellow { background-color: rgb(241, 217, 110);}
.bg-red { background-color: rgb(226, 87, 76);}

.bg-blue { background-color: rgb(89, 186, 204);}
.bg-gray-25 { background-color: rgb(215, 215, 215);}
.bg-gray-35 { background-color: rgb(240, 240, 240);}
.bg-gray { background-color: rgb(175, 175, 175);}
.color-gray { color :rgb(83, 83, 83); }
.border-gray { border-color: rgb(215, 215, 215) }


.bg-warn { background-color: rgb(252, 213, 213) !important;}
.bg-warn-2 { background-color: rgb(250, 87, 87);}
.bg-warn-3 { background-color: rgb(166, 250, 87);}
.bg-warn-4 { background-color: rgb(18, 157, 221);}



/*------------ layakan -----------*/
a , p , span , h1,h2,h3,h4,h5,h6 { USER-SELECT : none; }
span { VERTICAL-ALIGN : MIDDLE ; }
hr { 
    MARGIN : 3px 9px 3px 9px ;
    background-color: rgb(255, 255, 255);
}

a {
    TEXT-DECORATION : none;
}
.b {
    BORDER : 0;
    DISPLAY : BLOCK;
    BORDER-RADIUS : 1.50REM;
}
.b-group {
    BORDER : 0;
    DISPLAY : INLINE;
    BORDER-RADIUS : 1.50REM;
    /* ALIGN-ITEMS : CENTER; */
}
.b-pad {
    PADDING : 0 15px 3px;
}
.b-menu {
    background-color: rgba(214, 210, 210, 0.29);
    COLOR : rgb(49, 49, 49);
    /* BORDER-BOTTOM : 2px SOLID rgb(241, 241, 241); */
    MARGIN : 5PX 10px;

}
.b-menu-lk {
    background-color: rgb(255, 255, 255);
    COLOR : rgb(0,0,0);
}
.b-menu-lk:hover { COLOR : rgb(0,0,0); }

.b-sub-menu {
    COLOR : rgb(70, 70, 70);
    PADDING-RIGHT : 15px;
    MARGIN : 5PX 25PX 5PX 10px;
}
.b-menu:hover , .b-sub-menu:hover { 
    color : rgb(31, 31, 31);
    background-color: rgba(214, 210, 210, 0.466);
}
.b-menu-ac { 
    background-color: rgba(94, 94, 230, 0.637);
    color: rgb(255, 255, 255);
}
/* rgb(89, 186, 204) */
.b-add {
    background-color: rgb(255, 255, 255);
    color : rgb(75, 75, 75);
    border: 1px SOLID rgb(88, 173, 105);
}
.b-add:hover { 
    color : rgb(75, 75, 75);
    background-color: rgb(133, 207, 137);
}

.b-vu {
    background-color: rgb(255, 255, 255);
    color : rgb(88, 173, 105);
    border: 1px SOLID rgb(88, 173, 105);
}

.b-vu:hover { 
    color : rgb(236, 235, 235);
    background-color: rgb(88, 173, 105);
}

.b-ch {
    /* background-color: ; */
    background-color: rgb(255, 255, 255);
    color : rgb(89, 186, 204);
    border: 1px SOLID rgb(89, 186, 204);
}
.b-ch:hover { 
    color : rgb(51, 51, 51);
    background-color: rgb(89, 186, 204);
}

.b-w {
    /* background-color: rgb(255, 188, 73); */
    background-color: rgb(255, 255, 255);
    color : rgb(241, 217, 110);
    border: 1px SOLID rgb(241, 217, 110);
}
.b-w:hover { 
    color : rgb(90, 89, 89);
    background-color: rgb(241, 217, 110);
}

.b-close {
    background-color: rgb(190, 190, 190);
    color : rgb(75, 75, 75);
}
.b-close:hover { 
    color : rgb(75, 75, 75);
    background-color: rgb(173, 173, 173);
    
}

.b-del {
    background-color:rgb(255, 255, 255);
    color : rgb(226, 86, 76);
    border: 1px SOLID rgb(226, 86, 76);
}
.b-del:hover { 
    color : rgb(255, 255, 255);
    background-color: rgb(226, 87, 76);
}

.sd { 
    FLOAT : LEFT ;
    PADDING : 0 5PX 3PX 5PX;
    VERTICAL-ALIGN : MIDDLE;
}

/*----------------- RAST W CHAP -------------*/
.r {
    TEXT-ALIGN : RIGHT;
}
.c {
    TEXT-ALIGN : CENTER;
}
.l {
    TEXT-ALIGN : LEFT;
}

/* ----------------- FORM INPUT ------------*/
.Box_In {
    border : 0;
    background-color: rgb(245, 245, 245);
    BORDER-BOTTOM : 1px SOLID rgb(153, 153, 153);
    DISPLAY : BLOCK;
    WIDTH : 100%;
    BORDER-RADIUS : 3PX;
}

.modal_Box_In {
    
    border : 0;
    BORDER-BOTTOM : 1px SOLID rgb(109, 109, 109);
    DISPLAY : BLOCK;
    WIDTH : 100%;
    BORDER-RADIUS : 1.5rem;
    PADDING-RIGHT : 1EM
}
.modal_Box_In:focus {
    OUTLINE : NONE;
    BORDER : 1px SOLID rgb(109, 109, 109);
    BORDER-RADIUS : 1.5rem;
}
SELECT {
    APPEARANCE : none;
}

.scrolls { 
    HEIGHT: 88vh;
    OVERFLOW-Y : SCROLL ;

}

.scrolls_ { 
    WIDTH : AUTO;
    OVERFLOW-X : SCROLL ;
}
.sub-scroll { MIN-HEIGHT : 90vh; }
.scrolls::-webkit-scrollbar { WIDTH : 2px; }
.scrolls_::-webkit-scrollbar { HEIGHT : 2px; }
.scrolls::-webkit-scrollbar-track { background-color: rgb(235,235,235) ; }
.scrolls::-webkit-scrollbar-thumb { background-color: rgb(195, 195, 195) ; }


INPUT::-webkit-inner-spin-button,
INPUT::-webkit-outer-spin-button {
    -WEBKIT-APPEARANCE : NONE;
}


/*----------------- MEDIA ----------------*/
.message_box { DISPLAY : NONE ; }
.mdTable Th , .mdTable Td {
    TEXT-ALIGN : CENTER;
    PADDING : 0;
}


.shadow-l{
    box-shadow:INSET -3px 1px 7px rgb(221, 221, 221);

}