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

.brand-model {
    background-color: rgb(255, 255, 255);
    /*background-color: rgb(115, 109, 155);*/
    color : rgb(255,255,255);
    HEIGHT : 9vh;
}
.menu {
    HEIGHT : 100VH;
    WIDTH : 100VW;
    background-color: rgb(241, 241, 241);
    BORDER-LEFT : 1px SOLID rgb(207, 207, 207);
}
.sub-menu {
    background-color: rgb(241, 241, 241);
    DISPLAY : NONE;
}
.sub-menu.show {
    DISPLAY : BLOCK;
    BORDER-BOTTOM : 1px SOLID rgb(231, 231, 231);
}

.menu-body {
    HEIGHT : 100VH;
    WIDTH : 100VW;
    background-color: rgb(241, 241, 241);
}
.menu-body-nav {
    background-color: rgb(224, 224, 224);
    /*background-color: rgb(115, 125, 153);*/
    color : rgb(0, 0, 0);
    HEIGHT : 9vh;
}



/*----------- 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-b { BORDER-BOTTOM : 1px SOLID rgb(175, 175, 175) }


/*----------- rangakan ---------*/
.bg-w { background-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(255, 191, 191) !important;}
.bg-warn-2 { background-color: rgb(250, 87, 87);}
.bg-warn-3 { background-color: rgb(166, 250, 87) !important;}
.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 0 5px 0 }

.b {
    BORDER : 0;
    DISPLAY : BLOCK;
    BORDER-RADIUS : 3PX;
}
.b-group {
    BORDER : 0;
    DISPLAY : INLINE;
    BORDER-RADIUS : 3px;
}
.b-menu {
    background-color: rgb(241, 241, 241);
    COLOR : rgb(0,0,0);
    BORDER-BOTTOM : 1px SOLID rgb(231, 231, 231);
}
.b-sub-menu {
    COLOR : rgb(0, 0, 0);
    PADDING-RIGHT : 35px;
}
.b-menu:hover , .b-sub-menu:hover { 
    color : rgb(0, 0, 0);
    background-color: rgb(235, 235, 235);
    TEXT-DECORATION : none;
}
.b-menu-ac { 
    background-color: rgb(245, 245, 245);
    BORDER-RIGHT : 3px SOLID rgb(12, 12, 12);
}

.b-add {
    background-color: rgb(158, 207, 161);
    color : rgb(75, 75, 75);
}
.b-add:hover { 
    color : rgb(75, 75, 75);
    background-color: rgb(133, 207, 137);
    TEXT-DECORATION : none;
}

.b-vu {
    background-color: rgb(108, 201, 149);
    color : rgb(255, 255, 255);
}
.b-vu:hover { 
    color : rgb(75, 75, 75);
    background-color: rgb(133, 207, 185);
    TEXT-DECORATION : none;
}

.b-ch {
    background-color: rgb(107, 128, 199);
    color : rgb(255, 255, 255);
}
.b-ch:hover { 
    color : rgb(75, 75, 75);
    background-color: rgb(150, 164, 211);
    TEXT-DECORATION : none;
}

.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);
    TEXT-DECORATION : none;
}

.b-del {
    background-color: rgb(235, 112, 112);
    color : rgb(255, 255, 255);
}
.b-del:hover { 
    color : rgb(75, 75, 75);
    background-color: rgb(235, 95, 95);
    TEXT-DECORATION : none;
}

.sd { FLOAT : LEFT ; }

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

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