body {
    HEIGHT : 100VH;
    WIDTH : 100VW;
    TEXT-ALIGN : RIGHT;
    /* FONT-FAMILY : "ARIAL"; */
    FONT-SIZE : 1.1em;
    FONT-WEIGHT : 490;
}

.brand-model {
    background-color: rgb(223, 223, 223);
    /*background-color: rgb(115, 109, 155);*/
    color : rgb(24, 25, 88);
    HEIGHT : 9vh;
}
.menu {
    HEIGHT : 100VH;
    /*WIDTH : 100VW;*/
    background-color: rgb(241, 241, 241);
    OVERFLOW-Y : SCROLL ;
}
.sub-menu {
    DISPLAY : NONE;
}
.sub-menu.show {
    DISPLAY : BLOCK;
    BORDER-BOTTOM : 1px SOLID rgb(235, 235, 235);
}

.menu-body {
    HEIGHT : 100VH;
    /*WIDTH : 100VW;*/
    background-color: rgb(255, 255, 255);
}
.menu-body-nav {
    background-color: rgb(255, 255, 255);
    /*background-color: rgb(115, 125, 153);*/
    color : rgb(0, 0, 0);
    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-10 { MARGIN : 10px; }
.marg-15 { MARGIN : 15px; }
.marg-20 { MARGIN : 20px; }
.marg-25 { MARGIN : 25px; }
.marg-10-20 { MARGIN : 10px 20px; }


.pad-0 { PADDING: 0; }
.pad-5 { PADDING: 5px; }
.pad-10 { PADDING: 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 : 5px ; }
.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(71, 218, 91);}
.bg-yellow { background-color: rgb(255,255,25);}
.bg-red { background-color: rgb(255, 25, 25);}

.bg-blue { background-color: rgb(25,100, 255);}
.bg-gray-25 { background-color: rgb(215, 215, 215);}
.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(250, 198, 87);}



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

a {
    TEXT-DECORATION : none;
}
.b {
    BORDER : 0;
    DISPLAY : BLOCK;
    BORDER-RADIUS : 7PX;
}
.b-group {
    BORDER : 0;
    DISPLAY : INLINE;
    BORDER-RADIUS : 11px;
}
.b-menu {
    background-color: rgb(243, 243, 243);
    COLOR : rgb(0,0,0);
    BORDER-BOTTOM : 1px 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(0, 0, 0);
    PADDING-RIGHT : 45px;
}
.b-menu:hover , .b-sub-menu:hover { 
    color : rgb(0, 0, 0);
    background-color: rgb(235, 235, 235);
}
.b-menu-ac { 
    background-color: rgb(103, 101, 255);
    color: rgb(255, 255, 255);
}

.b-add {
    background-color: rgb(137, 209, 142);
    color : rgb(75, 75, 75);
}
.b-add:hover { 
    color : rgb(75, 75, 75);
    background-color: rgb(133, 207, 137);
}

.b-vu {
    background-color: rgb(29, 137, 180);
    color : rgb(255, 255, 255);
}
.b-vu:hover { 
    color : rgb(255, 255, 255);
    background-color: rgb(33, 147, 192);
}

.b-ch {
    background-color: rgb(42, 154, 199);
    color : rgb(255, 255, 255);
}
.b-ch:hover { 
    color : rgb(75, 75, 75);
    background-color: rgb(150, 164, 211);
}

.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(41, 172, 224);
    color : rgb(255, 255, 255);
}
.b-del:hover { 
    color : rgb(75, 75, 75);
    background-color: rgb(235, 95, 95);
}

.sd { 
    FLOAT : LEFT ;
    PADDING : 3PX 5PX;
}

/*----------------- 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 : 5PX;
}
.modal_Box_In:focus {
    OUTLINE : NONE;
    BORDER : 1px SOLID rgb(109, 109, 109);
    BORDER-RADIUS : 5PX;
}
SELECT {
    APPEARANCE : none;
}

.scrolls { 
    HEIGHT: 91vh;
    OVERFLOW-Y : SCROLL ;
}
.sub-scroll { MIN-HEIGHT : 85vh; }
.scrolls::-webkit-scrollbar { WIDTH : 5px; }
.scrolls::-webkit-scrollbar-track { background-color: rgb(235,235,235) ; }
.scrolls::-webkit-scrollbar-thumb { background-color: rgb(195, 195, 195) ; }

.menu::-webkit-scrollbar { WIDTH : 5px; }
.menu::-webkit-scrollbar-track { background-color: rgb(235,235,235) ; }
.menu::-webkit-scrollbar-thumb { background-color: rgb(230, 230, 230) ; }

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);

}