body {
    HEIGHT : 100VH;
    WIDTH : 100VW;
    TEXT-ALIGN : RIGHT;
    /*FONT-FAMILY : "ARIAL";*/
    FONT-SIZE : 1.05em;
    FONT-WEIGHT : 490;
    background-color: rgb(245, 245, 245);
    /* background-color: rgba(230,215,160,0.7); */
    color : rgb(57, 57, 57);
}


.menu-body {
    HEIGHT : 75VH;
    /*WIDTH : 100VW;*/
    background-color: rgb(255, 255, 255);
}
.menu-body-h {
    HEIGHT : 80VH;
    background-color: rgb(255, 255, 255);
}


/*----------- 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-3 { PADDING: 3px; }
.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-15 { BORDER-RADIUS : 15px ; }
.border-rad-50 { BORDER-RADIUS : 50% ; }
.border-b { BORDER-BOTTOM : 1px SOLID rgb(175, 175, 175) }


/*----------- rangakan ---------*/
.c-w { color: rgb(255,255,255);}
.bg-w { background-color: rgb(255,255,255);}
.bg-nav { 
    background-color: rgb(255, 255, 255);
    /* background-color: rgb(230,215,160); */
}
.bg-b { background-color: rgb(0,0,0);}
.bg-green { background-color: rgb(71, 218, 91);}
.bg-green-25 { background-color: rgb(149, 226, 159);}
.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-blue-25 { background-color: rgb(152, 186, 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);}

.show-block {
    DISPLAY : INLINE-BLOCK ;
}

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

a {
    TEXT-DECORATION : none;
    color :rgb(57 , 57, 57);
}
.b {
    BORDER : 0;
    DISPLAY : BLOCK;
    BORDER-RADIUS : 7PX;
}
.b-group {
    BORDER : 0;
    DISPLAY : INLINE;
    BORDER-RADIUS : 11px;
}
.b-menu {
    background-color: rgb(255, 255, 255);
    color : rgb(75, 75, 75);
    border: 1px SOLID rgb(115, 115, 115);
    BORDER-RADIUS : 15PX;
    PADDING : 3PX 5PX;
}
.b-menu:hover { 
    color : rgb(75, 75, 75);
    background-color: rgb(235, 235, 235);
    border: 1px SOLID rgb(175, 175, 175);
    BORDER-RADIUS : 15PX;
    PADDING : 3PX 5PX;
}

.b-add {
    background-color: rgb(255, 255, 255);
    color : rgb(75, 75, 75);
    border: 1px SOLID rgb(67, 158, 73);
    BORDER-RADIUS : 15PX;
    PADDING : 3PX 5PX;
}
.b-add:hover { 
    color : rgb(255, 255, 255);
    background-color: rgb(107, 197, 113);
    border: 1px SOLID rgb(107, 197, 113);
    BORDER-RADIUS : 15PX;
    PADDING : 3PX 5PX;
}

.b-vu {
    background-color: rgb(255, 255, 255);
    color : rgb(75, 75, 75);
    border: 1px SOLID rgb(33, 147, 192);
    BORDER-RADIUS : 15PX;
    PADDING : 3PX 5PX;
}
.b-vu:hover { 
    color : rgb(255, 255, 255);
    background-color: rgb(33, 147, 192);
    border: 1px SOLID rgb(33, 147, 192);
    BORDER-RADIUS : 15PX;
    PADDING : 3PX 5PX;
}

.b-ch {
    background-color: rgb(255, 255, 255);
    color : rgb(75, 75, 75);
    border: 1px SOLID rgb(42, 154, 199);
    BORDER-RADIUS : 15PX;
    PADDING : 3PX 5PX;
}
.b-ch:hover { 
    color : rgb(255, 255, 255);
    background-color: rgb(42, 154, 199);
    border: 1px SOLID rgb(42, 154, 199);
    BORDER-RADIUS : 15PX;
    PADDING : 3PX 5PX;
}

.b-close {
    background-color: rgb(255, 255, 255);
    color : rgb(75, 75, 75);
    border: 1px SOLID rgb(75, 75, 75);
    BORDER-RADIUS : 15PX;
    PADDING : 3PX 5PX;
}
.b-close:hover { 
    color : rgb(75, 75, 75);
    background-color: rgb(215, 215, 215);
    border: 1px SOLID rgb(75, 75, 75);
    BORDER-RADIUS : 15PX;
    PADDING : 3PX 5PX;
}

.b-del {
    background-color: rgb(255, 255, 255);
    color : rgb(75, 75, 75);
    border: 1px SOLID rgb(42, 154, 199);
    BORDER-RADIUS : 15PX;
    PADDING : 3PX 5PX;
}
.b-del:hover { 
    color : rgb(255, 255, 255);
    background-color: rgb(236, 65, 65);
    border: 1px SOLID rgb(235, 95, 95);
    BORDER-RADIUS : 15PX;
    PADDING : 3PX 5PX;
}

.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 : 7PX;
}

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

.scrolls { 
    HEIGHT: 75vh;
    OVERFLOW-Y : SCROLL ;
    BORDER-RADIUS : 5PX;
}

.scrolls::-webkit-scrollbar { WIDTH : 5px; BORDER-RADIUS : 5PX; }
.scrolls::-webkit-scrollbar-track { background-color: rgb(245, 245, 245) ; }
.scrolls::-webkit-scrollbar-thumb { background-color: rgb(235, 235, 235) ; }

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-border {
    box-shadow: 0 1px 10px rgb(197, 197, 197);
}