/*
* Quantum Framework
*
* 1200px - 12 Columns - 30px Gutter
*
* Copyright 2013 Quantum Outsourcing, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built by Quantum Outsourcing
* http://QuantumOutsourcing.com
*
*/


/* ==========================================================================
   960px - 12 columns - 20px gutter 
   ========================================================================== */

   /* Container */ 
   .container-12 { width: 1260px;; margin: 0 auto; } 

   /* Global */ 
   [class*="grid-"] { float: left; display: inline; margin-left: 10px; margin-right: 10px; } 
   .group:before, .group:after { content: ""; display: table; line-height: 0; } 
   .group:after { clear: both; } 

   /* Nested elements */ 
   .alpha { margin-left: 0px; } 
   .omega { margin-right: 0px; } 

   /* Grids */ 
   .container-12 .grid-1 {  width: 85px; }
   .container-12 .grid-2 {  width: 190px; }
   .container-12 .grid-3 {  width: 295px; }
   .container-12 .grid-4 {  width: 400px; }
   .container-12 .grid-5 {  width: 505px; }
   .container-12 .grid-6 {  width: 610px; }
   .container-12 .grid-7 {  width: 715px; }
   .container-12 .grid-8 {  width: 820px; }
   .container-12 .grid-9 {  width: 925px; }
   .container-12 .grid-10 {  width: 1030px; }
   .container-12 .grid-11 {  width: 1135px; }
   .container-12 .grid-12 {  width: 1240px; }

   /* Offset Extra Space */ 
	.container-12 .offset-1 {padding-left: 105px;}
	.container-12 .offset-2 {padding-left: 210px;}
	.container-12 .offset-2 {padding-left: 315px;}
	.container-12 .offset-2 {padding-left: 420px;}
	.container-12 .offset-2 {padding-left: 525px;}
	.container-12 .offset-2 {padding-left: 630px;}
	.container-12 .offset-2 {padding-left: 735px;}
	.container-12 .offset-2 {padding-left: 840px;}
	.container-12 .offset-2 {padding-left: 945px;}
	.container-12 .offset-2 {padding-left: 1050px;}
	.container-12 .offset-2 {padding-left: 1155px;}

/* ==========================================================================
   1200px - 12 columns - 30px gutter 
   ========================================================================== */

   @media (min-width: 1200px) { 

   /* Container */ 
   .container-12 { width: 1260px;; margin: 0 auto; } 

   /* Global */ 
   [class*="grid-"] { float: left; display: inline; margin-left: 10px; margin-right: 10px; } 
   .group:before, .group:after { content: ""; display: table; line-height: 0; } 
   .group:after { clear: both; } 

   /* Nested elements */ 
   .alpha { margin-left: 0px; } 
   .omega { margin-right: 0px; } 

   /* Grids */ 
   .container-12 .grid-1 {  width: 85px; }
   .container-12 .grid-2 {  width: 190px; }
   .container-12 .grid-3 {  width: 295px; }
   .container-12 .grid-4 {  width: 400px; }
   .container-12 .grid-5 {  width: 505px; }
   .container-12 .grid-6 {  width: 610px; }
   .container-12 .grid-7 {  width: 715px; }
   .container-12 .grid-8 {  width: 820px; }
   .container-12 .grid-9 {  width: 925px; }
   .container-12 .grid-10 {  width: 1030px; }
   .container-12 .grid-11 {  width: 1135px; }
   .container-12 .grid-12 {  width: 1240px; }

   /* Offset Extra Space */ 
	.container-12 .offset-1 {padding-left: 105px;}
	.container-12 .offset-2 {padding-left: 210px;}
	.container-12 .offset-2 {padding-left: 315px;}
	.container-12 .offset-2 {padding-left: 420px;}
	.container-12 .offset-2 {padding-left: 525px;}
	.container-12 .offset-2 {padding-left: 630px;}
	.container-12 .offset-2 {padding-left: 735px;}
	.container-12 .offset-2 {padding-left: 840px;}
	.container-12 .offset-2 {padding-left: 945px;}
	.container-12 .offset-2 {padding-left: 1050px;}
	.container-12 .offset-2 {padding-left: 1155px;}

   }

/* ==========================================================================
   1008px - 12 columns - 20px gutter 
   ========================================================================== */

   @media (min-width: 1008px) and (max-width: 1199px) { 

   /* Container */ 
   .container-12 { width: 1008px; margin: 0 auto; } 

   /* Global */ 
   [class*="grid-"] { float: left; display: inline; margin-left: 10px; margin-right: 10px; } 
   .group:before, .group:after { content: ""; display: table; line-height: 0; } 
   .group:after { clear: both; } 

   /* Nested elements */ 
   .alpha { margin-left: 0px; } 
   .omega { margin-right: 0px; } 

   /* Grids */ 
   .container-12 .grid-1 {  width: 64px; }
   .container-12 .grid-2 {  width: 148px; }
   .container-12 .grid-3 {  width: 232px; }
   .container-12 .grid-4 {  width: 316px; }
   .container-12 .grid-5 {  width: 400px; }
   .container-12 .grid-6 {  width: 484px; }
   .container-12 .grid-7 {  width: 568px; }
   .container-12 .grid-8 {  width: 652px; }
   .container-12 .grid-9 {  width: 736px; }
   /*.container-12 .grid-10 {  width: 820px; }*/
   .container-12 .grid-11 {  width: 904px; }
   .container-12 .grid-12 {  width: 988px; }

   /* Offset Extra Space */ 
   .container-12 .offset-1 { padding-left: 84px; }
   .container-12 .offset-2 { padding-left: 168px; }
   .container-12 .offset-3 { padding-left: 252px; }
   .container-12 .offset-4 { padding-left: 336px; }
   .container-12 .offset-5 { padding-left: 420px; }
   .container-12 .offset-6 { padding-left: 504px; }
   .container-12 .offset-7 { padding-left: 588px; }
   .container-12 .offset-8 { padding-left: 672px; }
   .container-12 .offset-9 { padding-left: 756px; }
   .container-12 .offset-10 { padding-left: 840px; }
   .container-12 .offset-11 { padding-left: 924px; }
   
   #wrap_content .box_content > .menu_admin .list_menu{padding: 5px 10px 10px 0px; font-size:12px;}
   #wrap_content .rightcontent .title_rightcontent{font-size:24px;}
   .table th{font-size:12px;}
   .table td{font-size:10px;}
   .print a{font-size:35px;}
   .act_tabel{display:block; font-size:12px; position:relative; width: 130px;}
   #wrap_content .rightcontent .title_rightcontent > .back{left:-20px !important;}
   #wrap_content .rightcontent .box_field > .field .title_field{font-size:14px !important;}
   #wrap_content .rightcontent .box_field > .field .field_input{height:28px; font-size:12px;}
   #wrap_content .rightcontent .box_field > .field .field_textarea{font-size:12px;}
   #wrap_content .rightcontent{padding:5px !important;}
   
   /*TAB*/
   .nav>li{font-size:10px !important;}
   .nav-tabs>li>a{font-size:16px;}
   .nav-tabs>li.active1>a, .nav-tabs>li.active1>a:hover, .nav-tabs>li.active1>a:focus, .nav-tabs>li.active1>a:target{font-size:16px; padding:10px; border-bottom:0px;}
   
   .btn_ext{padding:4px;}
   .stt_btl{font-size:14px;}
   #history #title_h, #list_ext #title_ext{font-size:18px; height:35px;}
   #wrap_content .sbox_field > .sfield .sfield_input{font-size:12px; height:28px;}
   #wrap_content .sbox_field > .sfield .stitle_field{font-size:14px;}
   #wrap_content .sbox_field > .sfield .sfield_textarea{font-size:12px;}
   
   /*POP UP*/
   .popup{height:450px;}
   .popup > .title{font-size:20px; margin-top:0px;}

   }

/* ==========================================================================
   768px - 12 columns - 20px gutter 
   ========================================================================== */

   @media (min-width: 768px) and (max-width: 959px) { 

   /* Container */ 
   .container-12 { width: 768px; margin: 0 auto; } 

   /* Global */ 
   [class*="grid-"] { float: left; display: inline; margin-left: 10px; margin-right: 10px; } 
   .group:before, .group:after { content: ""; display: table; line-height: 0; } 
   .group:after { clear: both; } 

   /* Nested elements */ 
   .alpha { margin-left: 0px; } 
   .omega { margin-right: 0px; } 

   /* Grids */ 
   .container-12 .grid-1 {  width: 44px; }
   .container-12 .grid-2 {  width: 108px; }
   .container-12 .grid-3 {  width: 172px; }
   .container-12 .grid-4 {  width: 236px; }
   .container-12 .grid-5 {  width: 300px; }
   .container-12 .grid-6 {  width: 364px; }
   .container-12 .grid-7 {  width: 428px; }
   .container-12 .grid-8 {  width: 492px; }
   .container-12 .grid-9 {  width: 556px; }
   /*.container-12 .grid-10 {  width: 620px; }*/
   .container-12 .grid-11 {  width: 684px; }
   .container-12 .grid-12 {  width: 748px; }

   /* Offset Extra Space */ 
   .container-12 .offset-1 { padding-left: 64px; }
   .container-12 .offset-2 { padding-left: 128px; }
   .container-12 .offset-3 { padding-left: 192px; }
   .container-12 .offset-4 { padding-left: 256px; }
   .container-12 .offset-5 { padding-left: 320px; }
   .container-12 .offset-6 { padding-left: 384px; }
   .container-12 .offset-7 { padding-left: 448px; }
   .container-12 .offset-8 { padding-left: 512px; }
   .container-12 .offset-9 { padding-left: 576px; }
   .container-12 .offset-10 { padding-left: 640px; }
   .container-12 .offset-11 { padding-left: 704px; }
   
   #wrap_content .rightcontent .box-detail{overflow:auto;}
   
   .table th{font-size:12px;}
   .table td{font-size:10px;}
   .print a{font-size:35px;}
   .tb_hidden{display:none;}
   .act_tabel{display:block; font-size:12px; position:relative; width: 130px;}
   .captionsub{font-size:14px;}
   
   #header .box_top > .title_top{font-size:18px;}
    #wrap_content .rightcontent .title_rightcontent{font-size:24px; padding-top:10px}
   .log1{font-size:14px;}
   #wrap_content .box_content{width:100%;}
   #wrap_content .box_content > .menu_admin .list_menu{padding: 5px 10px 10px 0px; font-size:12px;}
   
   /*POP UP*/
   .popup{width:400px; height: 400px;}
   .popup > a > img{float:right; margin-right:10px;}
   .popup > .title{font-size:20px;}
    #wrap_content .sbox_field > .sfield .sfield_input{font-size:12px; height:28px;}
	#wrap_content .sbox_field > .sfield .stitle_field{font-size:14px; padding-left:25px; width:130px;}
	#wrap_content .sbox_field > .sfield .sfield_textarea{font-size:12px;}
	#wrap_content .sbox_field > .sfield{padding:5px;}
	#wrap_content .sbox_field > .sfield .sfield_option{font-size:12px; height:28px;}
	
	#wrap_content .rightcontent .title_rightcontent > .back{margin-left:55px !important;}
	#wrap_content .rightcontent{padding:5px !important;}
	#wrap_content .rightcontent .box_field > .field .title_field{font-size:14px !important;}
	#wrap_content .rightcontent .box_field > .field .field_input{height:28px; font-size:12px; width: 200px;}
	#wrap_content .rightcontent .box_field > .field .field_textarea{font-size:12px; width: 250px;}
	.stt_btl{font-size:13px;position: absolute; z-index:3; right: 0; margin-right: 16px;}
	#dofb{width:150px !important;}
	#dhm{width:200px !important;}
	.btn_ext{padding:4px;}
   
	/*TAB*/
   .nav>li{font-size:10px !important;}
   .nav-tabs>li>a{font-size:14px; padding: 6px !important;}
   .nav-tabs>li.active1>a, .nav-tabs>li.active1>a:hover, .nav-tabs>li.active1>a:focus, .nav-tabs>li.active1>a:target{font-size:14px; padding:10px; border-bottom:0px;}
   
   #wrap_content .rightcontent .line_sakt > .box_caption_line{font-size:12px;}
   #ketrev{margin-top:10px; width:180px !important;}
   #no_so2{width:150px !important;}
   .btn{font-size:12px !important;}
   #history, #list_ext{margin-left:-100px;}
   
   /*Add His*/
   #history #title_h, #list_ext #title_ext{font-size:18px;}
   
	.group_monitor .box_m > .title_m{font-size:14px !important;}
	.group_monitor .box_m > .conten_m > .l_conten {font-size:12px;}

   }

/* ==========================================================================
   Mobile 
   ========================================================================== */

   @media only screen and (max-width: 767px) {

   /*body { padding-left: 20px; padding-right: 20px; }*/

   /* Container */
   .container-12 { width: auto; }

   /* Global */
   [class*="grid-"] { display: block; margin-left: 0px; margin-right: 0px; }

   /* Nested Elements */
   .alpha { margin-left: 0px; }
   .omega { margin-right: 0px; }

   /* Grids */
   .container-12 .grid-1,
   .container-12 .grid-2,
   .container-12 .grid-3,
   .container-12 .grid-4,
   .container-12 .grid-5,
   .container-12 .grid-6,
   .container-12 .grid-7,
   .container-12 .grid-8,
   .container-12 .grid-9,
   .container-12 .grid-10,
   .container-12 .grid-11,
   .container-12 .grid-12 { width: 100%; }

   /* Offset Extra Space */
   .container-12 .offset-1, 
   .container-12 .offset-2, 
   .container-12 .offset-3, 
   .container-12 .offset-4, 
   .container-12 .offset-5, 
   .container-12 .offset-6, 
   .container-12 .offset-7, 
   .container-12 .offset-8, 
   .container-12 .offset-9, 
   .container-12 .offset-10, 
   .container-12 .offset-11 { padding-left: 0; }
   
   #header .box_top > .title_top{font-size:14px;}
   .log1{font-size:12px;}
   
   
   #wrap_content .box_content{width:100%;     margin-top: -5px;}
   #wrap_content .box_content > .menu_admin .list_menu{padding: 5px 5px 5px 0px; font-size:12px; border-radius: 0px !important;}
   #header .box_top > .nav-top{margin-right: 60px;}
   .log1{margin-right: 50px; margin-top: 5px;}
   #wrap_content .rightcontent .title_rightcontent{font-size:20px; height: 40px;}
   
   #wrap_content .box_content > .menu_admin .list_menu > .iconlist{font-size:18px;}
   
   .btn_add_data{font-size:12px; margin-right:10px;}
   #wrap_content .rightcontent .box_btn_act > .box_src .btn_src{font-size:13px;}
   .print a{font-size:30px;}
   .print{margin-right:10px; width: 60px;}
   .print .printtitle{display:none;}
   
    .table th{font-size:12px;}
	.table td{font-size:10px;}
	#wrap_content .rightcontent .box-detail{overflow:auto;}
	
	 /*POP UP*/
   .popup{width: 350px; height: 360px;}
   .popup > a > img{float:right; margin-right:10px;}
   .popup > .title{font-size:20px;}
    #wrap_content .sbox_field > .sfield .sfield_input{font-size:12px; height:28px; width:200px;}
	#wrap_content .sbox_field > .sfield .stitle_field{font-size:14px; padding-left:50px; width:130px;}
	#wrap_content .sbox_field > .sfield .sfield_textarea{font-size:12px;}
	#wrap_content .sbox_field > .sfield{padding:5px;}
	#wrap_content .sbox_field > .sfield .sfield_option{font-size:12px; height:28px;}
	
	/*TAB*/
	.nav>li{font-size:10px !important;}
	.nav-tabs>li>a{font-size:14px; padding: 6px !important;}
	.nav-tabs>li.active1>a, .nav-tabs>li.active1>a:hover, .nav-tabs>li.active1>a:focus, .nav-tabs>li.active1>a:target{font-size:14px; padding:6px!important; border-bottom:0px; border-top: 2px solid #428bca; color: #f00;}
	.tab-content>.tab-pane{padding:0px;}
   
	#wrap_content .rightcontent .box_field > .field .title_field{font-size:14px !important;}
	#wrap_content .rightcontent .box_field > .field .field_input{height:28px; font-size:12px; width: 200px;}
	#wrap_content .rightcontent .box_field > .field .field_textarea{font-size:12px; width: 250px;}
	#wrap_content .rightcontent .box_field > .field .field_option{font-size:12px; width:200px; margin-left: 0px;}
	#wrap_content .rightcontent .box_field{margin-top: 0px !important;}
	.stt_btl{font-size:12px; z-index:3; right: 0; margin-right:-16px;}
	#dofb{width:150px !important;}
	#dhm{width:200px !important;}
	.btn_ext{padding:4px;}
	.act_tabel{display:block; font-size:12px; position:relative; width: 130px;}
	
	/*perpanjang*/
	.ext{width:100% !important;}
	#list_ext1 #title_ext1{font-size:10px;}
	.tb_hidden{display:none;}
	
	#wrap_content .rightcontent .line_sakt > .box_caption_line{font-size:12px;}
	
	/*History*/
	#history, #list_ext{left:0 !important; width:100% !important; top: 500px !important;}
	#history #title_h, #list_ext #title_ext{font-size:18px;}
	#h2, #h1{padding:0px !important;}
	#ketrev{width:200px !important; margin-top:10px;}
	
	#mc{margin-left:0px !important; width: 100% !important;}
	.group_monitor .box_m > .title_m{font-size:14px !important;}
	.group_monitor .box_m > .conten_m > .l_conten {font-size:12px;}
	
	#ti1{padding-left:0px !important; width:50px !important;}
	#ti2{padding-left:0px !important; width:100px !important;}
	#mi{width:100px !important; margin-left: -55px;}
	
	#wrap_content .rightcontent .title_rightcontent > .back{margin-left: 40px; width: 0px;}
	#header .box_top > .nav-top .dropdown > li a .captionsub{font-size:13px;}
	
	.con{width: 900px;}
	.graph{overflow:auto;}

   }