/* GENERAL */
@font-face {
    font-family: flat;
    src: url(fontStyles/Metrophobic.ttf);
}

.arial { font-family: 'Arial' !important; }

*,html,body {
	padding:0; 
	margin:0;
}

html,body {
	width:100%;
}

:focus {
  outline-color: transparent;
  outline-style: none;
}

.showprint{
	display:none;
}
body {
	font-family: 'flat', Arial, sans-serif;
	font-size: 14px;
	overflow-y: scroll;
	overflow-x: hidden;
	background:#F6F6F6;
}

:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow:none;
}

.contain-frame {
	position: relative !important;
	width: 1000px;
	display: inline-block;
	/*min-height: 1611px;*/
	padding: 1em 1em 1.5em 1em;
	margin-top: 85px;
	background: #fff;
	box-shadow: 0px 0px 2px #777;
	-moz-box-shadow: 0px 0px 2px #777;
	-webkit-box-shadow: 0px 0px 2px #777;
	border-left: 8px solid #3B5998; 	
}

.flag {
	width: 15px;
	height: 15px;
	position: absolute;
	top: 0;
	right: 100%;
	border-left: 15px solid #F6F6F6;
	border-right: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-top: 15px solid #F6F6F6;	
	background: #999;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }

.float-l { float:left !important; }
.float-r { float:right !important;}
.border-soft { border: 1px solid #DDD; }
.border-hard { border: 1px solid #BDC3C7; }
.no-border { border: none !important; }
.pad-special {padding: 12px 5px 12px 5px;}
.pad-s {padding:0px 5px;}
.pad-1em {padding:1em;}
.pad-1em-i {padding:1em !important;}
.pad-1em-2 {padding:0 1em 0 1em !important;}
.pad-1em-1 {padding:1em 0 1em 0 !important;}
.pad-l {padding-left: 1em !important;}
.pad-t {padding-top: 1em !important;}
.pad-r {padding-right: 1em !important;}
.pad-b {padding-bottom: 1em !important;}
.pad-l-4x {padding-left: 40px !important;}
.pad-4x {padding: 4em !important;}
.pad-1em-nt {padding: 0 1em 1em 1em !important;}
.pad-1em-nr {padding: 1em 0 1em 1em !important;}
.pad-no {padding:0 !important;}
.relative {position: relative;}
.block { display:block; }
.i-block { display:inline-block !important; }

.mar-t-s { margin-top: 6px !important; } 
.mar-a-s { margin: 0.5em !important; } 
.mar-a { margin: 1em !important; } 
.mar-l { margin-left: 1em !important; } 
.mar-r { margin-right: 1em !important; } 
.mar-r-s { margin-right: 10px !important; } 
.mar-t { margin-top: 1em !important; } 
.mar-b { margin-bottom: 1em !important; } 
.mar-tb { margin: 1em 0 !important; } 
.mar-lr { margin: 0 1em !important; } 

a:link, a:hover, a:visited { text-decoration: none; color:#111; }

/* CUSTOM */

h1,h2,h3,h4,h5,h6 {
	margin: 0;
}

.bg-transparent { background: rgba(1,1,1,0.5); }

/* PAGINATION */
.pagination {
  padding-top: 1em;
  float: right;
}

.pagination > li {
	display: inline-block;
}

.pagination > li > a,
.pagination > li > span {
   display: block;
   padding: 5px 12px;
}

.pagination > li:hover > a {
  color: #fff;
  cursor: pointer;
  background-color: #3498DB;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  color: #fff;
  cursor: default;
  background-color: #2980B9;
}

.bg-no {background: inherit;}

/* BUTTON */
a.butn { min-width: 33px; display: block; }
.butn { border: none; padding: 8px 10px; cursor: pointer; background: transparent; }
.butn-2 { border: none; padding: 8px 11px; background:none; }
.butn-new , .butn-success , .butn-danger { border: none; }
.butn-new { background:#3498DB; color:#FFF !important; }
.butn-success { background-color: #27AE60; color:#FFF !important; }
.butn-danger { background-color: #E74C3C; color:#FFF !important; }
.butn-other { background-color:#8E44AD; color:#FFF !important; }
.butn-special{ background-color: #1ABC9C; color:#FFF !important;
	-moz-border-bottom-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-right-radius:10px;
}

.butn-norm { height:36px; }
.butn-special-2{ background-color: #1ABC9C; color:#FFF;
	-moz-border-bottom-left-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    border-bottom-left-radius:10px
}
.butn-custom  { height:100px; width:300px; display:block; font-size:18px; padding: 9% 0 10px 13%; background:#1ABC9C;}
.butn-custom:hover  { background:#16A085; color:#FFF; }
.butn-custom-2  { height:100px; width:250px; display:block; font-size:18px; padding: 3% 0 10px 0; background:#1ABC9C16A085; color:#FFF;}
.butn-custom-2:hover  { background:#16A085; color:#FFF; }

.butn-new:hover { background:#2980B9; color:#FFF; }
.butn-success:hover { background-color: #2ECC71; color:#FFF; }
.butn-danger:hover { background-color: #C0392B; color:#FFF; }
.butn-other:hover { background-color:#9B59B6; color:#FFF; }
.butn-special:hover, .butn-special-2:hover { background-color: #16A085; color:#FFF; }

.butn-icon-link { margin-top: 7px; }

.link-new , a.link-new { color:#3498DB; background-color:none; }
.link-success, a.link-success { color: #2ECC71; background-color:none; }
.link-danger, a.link-danger { color: #E74C3C; background-color:none; }
.link-other, a.link-other { color:#8E44AD; background-color:none; }

.butn-add-data, .butn-print-data, .butn-export-data, 
.butn-right-1, .butn-right-2, .butn-right-3, 
.butn-right-1-l, .butn-right-2-l, .butn-right-3-l { 
	position: fixed; 
	right: 3%;
	width: 45px;
	height: 45px;
	border: none;
	z-index: 999;
	/*
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	
	box-shadow: 0px 0px 3px #777;
	-moz-box-shadow: 0px 0px 3px #777;
	-webkit-box-shadow: 0px 0px 3px #777;
	*/
}

.a-mid {display: table-cell; vertical-align: middle;}
.butn-circle {
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

.aCp { padding: 15px 15px 15px 16px; }
.aCp2 { padding: 15px 15px 15px 17px; }

.butn-add-data, .butn-right-1, .butn-right-1-l, .butn-right-2-l, .butn-right-3-l { 
	bottom:30px;
}
.butn-print-data, .butn-right-2 { 
	bottom:95px;
}

.butn-right-1-l { 
	right:25px;
}
.butn-right-2-l { 
	right:91px;
}
.butn-right-3-l { 
	right:157px;
}

/* HEADER */
header .title-box {
	display: block;
	height: 60px;
	padding: 10px;
	border-bottom: 1px solid #DDD;
}

header .title-box h2 { float: left; }
header .title-box div { float: right; }

header .hTitle, .hTitle  {
	font-size: 12pt;
	text-align: left;
}

header .hTitle > span, .hTitle > span {
	font-size: 18pt;
	margin-left: 10px;
}

div.hTitle {
	padding: 0 0 1.6px 0;
}
/*
 * FOOTER
 */

footer.fly { position: fixed; bottom: 0; left: 0; z-index: 2; }

/* FORM */
input { padding: 5px 4px; border:1px solid #BBB;}
textarea { padding: 7px 8px; resize: none; border:1px solid #BBB; overflow: hidden !important; }
select { padding: 0 1px; border:1px solid #BBB; }
.custom-select { min-width:145px; }
.pointer { cursor: pointer; }
#prependedInput { padding: 6px 8px; }

/* INPUT FILE STYLE */
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
	content: "Browse";
	display: inline-block;
	background: #2980B9;
	padding: 3px 8px;
  	line-height: 28px;
	outline: none;
	white-space: nowrap;
	-webkit-user-select: none;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	color: #FFF;
}
.custom-file-input:hover::before {
  background: #3498DB;
}

.input-icon {
	position: relative;
	display: inline-block;
}

.input-icon > span{
	position: absolute;
	top: 8px;
	right: 8px;
}
.input-icon > button {
	position: absolute;
	top: 0px;
	right: -2px;
	font-size: 13px;
}

.inputFlyRight {
				position: absolute;
			 	top: 0;
			 	right: 0;
			 	white-space: nowrap;
			}
.inputFlyLeft {
				position: absolute;
			 	top: 0;
			 	left: 0;
			 	white-space: nowrap;
			}

/* CHECKBOX STYLE */

input[type=checkbox] { display:none; color: #111;} 
input[type=checkbox] + label:before {
  font-family: 'FontAwesome';
  display: inline-block;
  color: #111;
  font-size: 14px;
}

input[type=checkbox] + label:before { content:"\f1db";  width:13px; height:11px; /*padding:2px 3px 6px 3px; margin-right:1em;*/}
input[type=checkbox] + label:before { letter-spacing: 10px; } 

input[type=checkbox]:checked + label:before { content:"\f058"; width:13px; height:11px; /*padding:2px 3px 6px 3px; margin-right:1em;*/}
input[type=checkbox]:checked + label:before { letter-spacing: 5px; }

/* TABLE */
table tr td { height: 30px; }
table tr td.limit { 
	max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table { border-collapse: collapse; }
.table-custom , .table-custom-no { border-color:#FFF; }
.table-custom tr td, .table-custom-no tr td { 
	padding: 5px;
	border-bottom: 1px solid #ddd;
}

.table-custom tr:hover td, .table-custom-no tr:hover td { 
	background: #16A085 !important;
	color: #fff !important;
}

.table-custom tr:hover td.no-hovers, .table-custom-no tr:hover td.no-hovers { 
	background: #fff !important;
	color: #111 !important;
}
.table-custom tr:hover td.no-hovers2, .table-custom-no tr:hover td.no-hovers2 { 
	background: #ECF0F1 !important;
	color: #fff !important;
}
.table-custom-no .no-hover:hover > td, .table-custom .no-hover:hover > td {
	background: none !important;
	color: #111 !important;
}

.table-custom .thead td, .table-custom .tfoot td,
.table-custom-no .thead td, .table-custom-no .tfoot td { 
	border-bottom: 0;
	-webkit-transition:  all 0.1s ease-in;
	   -moz-transition:  all 0.1s ease-in;
	      -o-transition: all 0.1s ease-in;
	     -ms-transition: all 0.1s ease-in;
        	transition:  all 0.1s ease-in;
}

.table-custom .thead td:hover, .table-custom .tfoot td:hover, .table-custom tr td:hover, .table-custom-no tr td:hover,
.table-custom-no .thead td:hover, .table-custom-no .tfoot td:hover { 
	background: #1ABC9C !important;
	color: #fff !important;
}

.table-custom .thead td.no-hovers:hover, .table-custom .tfoot td.no-hovers:hover, .table-custom tr td.no-hovers:hover, .table-custom-no tr td.no-hovers:hover,
.table-custom-no .thead td.no-hovers:hover, .table-custom-no .tfoot td.no-hovers:hover { 
	background: #fff !important;
	color: #fff !important;
}

.table-custom .thead td.no-hovers2:hover, .table-custom .tfoot td.no-hovers:hover, .table-custom tr td.no-hovers2:hover, .table-custom-no tr td.no-hovers2:hover,
.table-custom-no .thead td.no-hovers2:hover, .table-custom-no .tfoot td.no-hovers2:hover { 
	background: #ECF0F1 !important;
	color: #fff !important;
}

.table-custom .thead, .table-custom-no .thead, .thead { 
	height:45px;
}
.table-custom .tfoot, .table-custom-no .tfoot { 
	height:35px;
}
.table-custom tr:hover td a, .table-custom-no tr:hover td a,
.table-custom tr td:hover a, .table-custom-no tr td:hover a { 
	color: #fff !important;
}

.table-custom tr:hover td.no-hovers2 a, .table-custom-no tr:hover td.no-hovers2 a,
.table-custom tr td.no-hovers2:hover a, .table-custom-no tr td.no-hovers2:hover a { 
	color: #777 !important;
}

.table-custom-no tr:last-child {
	border-bottom: 5px solid rgb(26, 188, 156);
}

/*.table-custom  tr:first-child td:first-child,*/ .table-custom-4 tr:first-child td:first-child {
	/*-moz-border-top-left-radius:10px;
    -webkit-border-top-left-radius:10px;
    border-top-left-radius:10px;*/
}
/*.table-custom tr:first-child td:last-child,*/ .table-custom-4 tr:first-child td:last-child {
   /* -moz-border-top-right-radius:10px;
    -webkit-border-top-right-radius:10px;
    border-top-right-radius:10px;*/
}
.table-custom tr:last-child td:first-child, .table-custom-3 tr:last-child td:first-child {
    /*-moz-border-bottom-left-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    border-bottom-left-radius:10px;*/
}

.table-custom tr:last-child td:last-child, .table-custom-3 tr:last-child td:last-child {
   /* -moz-border-bottom-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-right-radius:10px;*/
}

.table-custom tr td > a {
	color: #777;	
}
.masuk{background:#DABCF9}
.keluar{background:#EFD9D7}
.tbody { border:none; border-left: 1px solid #BDC3C7; border-bottom: 1px solid #BDC3C7; }
.border-lr { border-left: 1px solid #BDC3C7; border-right: 1px solid #BDC3C7; }
.border-lt { border-left: 1px solid #BDC3C7; border-top: 1px solid #BDC3C7; }
.border-lrO { border-top: 0; border-bottom: 0 !important; border-left: 1px solid #BDC3C7; border-right: 1px solid #BDC3C7; }
.border-l { border-left: 1px solid #BDC3C7; }
.border-l2 { border-left: 1px solid red; }
.border-b { border-bottom: 1px solid #BDC3C7 !important; }
.border-nb { border-bottom:0 !important; border-top: 1px solid #BDC3C7 !important; border-left: 1px solid #BDC3C7 !important; border-right: 1px solid #BDC3C7 !important; }
.border-nt { border-top:0 !important; border-bottom: 1px solid #BDC3C7 !important; border-left: 1px solid #BDC3C7 !important; border-right: 1px solid #BDC3C7 !important; }
.border-ntl { border-top:0 !important; border-bottom: 1px solid #BDC3C7 !important; border-left: 0 !important; border-right: 1px solid #BDC3C7 !important; }
.border-nlb { border-bottom:0 !important; border-left:0 !important; border-top: 1px solid #BDC3C7 !important; border-right: 1px solid #BDC3C7 !important; }
.border-nl { border-bottom:1px solid #BDC3C7 !important; border-left:0 !important; border-top: 1px solid #BDC3C7 !important; border-right: 1px solid #BDC3C7 !important; }
.border-nr { border-bottom:1px solid #BDC3C7 !important; border-right:0 !important; border-top: 1px solid #BDC3C7 !important; border-left: 1px solid #BDC3C7 !important; }
.border-tr { border-bottom:0 !important; border-left:0 !important; border-top: 1px solid #BDC3C7 !important; border-right: 1px solid #BDC3C7 !important; }
.border-b-sky { border-bottom: 1px solid #3498DB !important; }
.border-b-g { border-bottom: 1px solid #16A085 !important; }
.border-bw { border-bottom: 1px solid #fff !important; }
.border-r { border-right: 1px solid #BDC3C7; }
.border-rw { border-right: 1px solid #fff; }
.border-rO { border:0 !important; border-right: 1px solid #BDC3C7 !important; }
.border-t { border-top: 1px solid #BDC3C7; }
.border-tO { border:0 !important; border-top: 1px solid #BDC3C7 !important; }
.border-t2b { border-top: 2px solid #111; }
.border-block { border-top: 3px solid #fff; }
.border-a { border: 1px solid #BDC3C7 !important; }
.border-no { border: none !important; }
.th { background-color:#3B5998; color:#FFF; }
.th-g { background-color:#ECF0F1; color:#FFF; }
.gray { background-color:#ECF0F1; }
.green { background-color:#16A085; }
.border-tdash { border-top: 1px dashed #BDC3C7; }
.table-form {
	text-align:left;
}

.table-form  .head {
	padding: 10px 13px;
	font-size: 13px;
	border-top:1px solid #BDC3C7;
	border-left:1px solid #BDC3C7;
	border-right:1px solid #BDC3C7;
}

.table-form input, select, textarea {
	border: none;
	border-bottom: 1px solid #bbb;
	min-height: 29px;
}

input[type=file] { border: 1px solid #BBB; }

#form-invoice .head {	
	width:110px;
}

.table-one {
	
}

.table-one tr td {
	padding: 3px 5px;
}

.table-btn-col {
	position: relative;
}

.table-btn-col:hover > ul {
	visibility: visible;
	opacity: 1;
	right: 100%;
}

.table-btn-col  > a {
	display: block;
	width: 30px;
	color: #777;
}

.table-btn-col  > ul {
	position: absolute;
	top: -10px;
	right: 50%;
	display: block;
	background: #A5C63B;
	color: #fff;
	visibility: hidden;
	z-index: 5;
	opacity: 0;
	box-shadow: -2px 2px 6px #777;
	-moz-box-shadow: -2px 2px 6px #777;
	-webkit-box-shadow: -2px 2px 6px #777;
	-webkit-transition:  all 0.1s ease-in;
	   -moz-transition:  all 0.1s ease-in;
	      -o-transition: all 0.1s ease-in;
	     -ms-transition: all 0.1s ease-in;
        	transition:  all 0.1s ease-in;
}
.table-btn-col  > ul:after { 
	content: " ";
	clear: both;
	display: block;
	position: absolute;
	top: 9px;
	left: 100%;
	width: 0;
	height: 0;
	border-left: 7px solid #A5C63B;
	border-right: 7px solid transparent;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}
.table-btn-col  > ul li {
	display: block;
	width: 40px;
	padding: 10px
}
.table-btn-col  > ul li > a {
	color: #fff;
}
.table-btn-col  > ul li:hover {
	background: #8EB021;
	cursor: pointer;
}

.search-fly, .search-fly-2, .search-fly-3, .search-fly-4 {
	position: absolute;
	bottom: 130%;
	right: 0;
}

.search-fly-2 {
	bottom: 145%;
}

.search-fly-3 {
	bottom: 49px;
}
.search-fly-4 {
	bottom: 21px;
}

.sorting {
	cursor:pointer;float:right;margin-right: 8px;	
}

#table-data {
	padding-top: 10px;
}

.table-list-icon {
	font-size: 12px;
	color: #777;
}

.border-th-bottom {
	border-bottom: 5px solid rgb(26, 188, 156);
}

.alpha-indicator {
	display:inline-block; 
	width:25px; 
	text-align:center; 
	padding: 4px 0;
	text-transform: uppercase;
}

.filterBox {
	margin: 0 0 10px 0;
}

.filterBox #tgl_awal,.filterBox #tgl_akhir, .filterBox input[name=keyword] { padding: 6px 8px; }
.filterBox input,.filterBox select {
	background: none;
}
.filterBox select {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	outline:none;
    display: inline-block;
}
.filterBox select.def {
    padding: 6px 4px;
}
.filterBox tr td > p {
    padding: 7.4px 0px;
    min-height: 35px;
}

.filterBox label {position:relative}
.filterBox label:after {
	content: "<>";
	font: 11px "Consolas",monospace;
	color: #AAA;
	transform: rotate(90deg);
	right: 3px;
	top: 2px;
	border-bottom: 1px solid #AAA;
	border-left: 1px solid #AAA;
	position: absolute;
	pointer-events: none;
	display: block;
	width: 16px;
	height: 17px;
	background-color: #FFF;
	padding-left: 4px;
}
.filterBox label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    position:absolute;
    pointer-events:none;
    display:block;
}

.filterBox select > option {
	padding: 0 5px;
}
.filterBox tr td {
	height: 30px;
	padding: 0 !important;
}

/* OTHER */
.judul { width: 100%; margin-top: 2em; }
.hide-mode {display:none;}
.noView-mode {visibility:hidden;}
.fake-label { background-color:inherit; margin: 0; padding:0; border:none;}
.wfont {color:#FFF; font-weight:bold; font-size:18px;}
.full {width:100%;}
.half {width:50%;}
.full-h {height: 100%;}
.full-h-half {height: 50%;}
.full-fix {width:100%;height:100%; top:0; left:0;}
.cal-icon { 
	position: absolute;
    width: 27px;
    height: 27px;
    top: 1px;
    right: 1px;
    padding: 3px 6px;
    background-color: #fff;
}
.cal-icon:hover { background-color: transparent; }
.cal-icon:hover span { visibility: hidden; }
.free-1em { width:100%; height:1em; }
.free-page { width:100%; height:50px; }
.absolute {position:absolute;}
.absolutes {position:absolute; top:0; left:0;}
.lt {top:0; left:0; }
.rt {top:0; right:0; }
.upper { text-transform: uppercase; }
.t-right { text-align:right; }

.b-fix { position: absolute; bottom: 0; left: 0; }


.col-btn {
	position: absolute;
	bottom: 0px;
	right: 0;
}

.hidden-form {
	position: relative;
	margin-bottom: 2em;
	
}
.imgPreview { max-width:857px; margin: 0 0 1em 0; }
.imgPreview-s { max-width:220px;  margin: 0 0 3em 0;  }
.imgPreview-s2 { max-width:176px;  margin: 0 0 3em 0;  }
.imgPreview, .imgPreview-s, .imgPreview-s2 { width: 100%; border: 2px dashed #BBB; vertical-align:middle; text-align: center; }
.imgPreview img, .imgPreview-s img, .imgPreview-s2 img { max-width: 100%; }
.imgPreview img { max-height: 500px; }

.borHead { width: 100%; height: 8px; position: absolute; bottom:100%; left:0; }


/* ROTATE */

.rot90 {
	-ms-transform: rotate(90deg) !important; /* IE 9 */
    -webkit-transform: rotate(90deg) !important; /* Chrome, Safari, Opera */
    transform: rotate(90deg) !important;
}

/*
 * POS STYLE
 */

.Indca {
	position: absolute;
	top: 2px; right: 100%;
	padding: 2px 5px;	
}

.POS {
	position: relative;
	width: 100%;
	top: 0;
	left: 0;
	/*border-right: 360px solid #F6F6F6;*/
}

.POS .p-head {
	position: fixed;
	width: 100%;
	height: 200px;
	top: 0;
	left: 0;
	
	background: #F6F6F6;
	z-index: 2;
	/*border-right: 360px solid #F6F6F6;*/
	
}

.POS .p-data {
	width: 100%;
	border-top: 200px solid transparent;
}

.bTogglePos {
	position: absolute;
	bottom: 100%;
	left: 15px;
	width: 150px;
}
.bTogglePos button {
	box-shadow: 0px 0px 3px #777;
	-moz-box-shadow: 0px 0px 3px #777;
	-webkit-box-shadow: 0px 0px 3px #777;
}


/* DROP UP POS STYLE */
.drop-up {
	position:fixed;
	top:0;
	right:0;
	opacity: 0;
	margin-top:0px;
	font-size: 15px;
	visibility: hidden;
	-webkit-transition:  all 0.2s ease-out;
	   -moz-transition:  all 0.2s ease-out;
          -o-transition: all 0.2s ease-out;
         -ms-transition: all 0.2s ease-out;
            transition:  all 0.2s ease-out;
     z-index: 3;
}

#toggle{
	position: absolute;
    top: -9999px;
    left: -9999px;
	display:none;
}

input[id=toggle]:checked ~ .drop-up {
    visibility: visible;
	opacity: 1;
}
.drop-up { box-shadow: 0px 0px 3px rgb(119, 119, 119); -moz-box-shadow: 0px 0px 3px rgb(119, 119, 119); -webkit-box-shadow: 0px 0px 3px rgb(119, 119, 119); }
.drop-up ul { padding: 10px 18px; }
.drop-up ul li { display:block; padding-bottom: 5px; }
.drop-up ul li:first-child { text-align: left; padding-bottom: 10px; font-size:20px; }
.drop-up ul li > input { border: none; }
.drop-up ul:after{ 
	content: " ";
	clear: both;
	display: block;
	position: absolute;
	top: 100%;
	right: 20px;
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #1ABC9C;
}

.total-price {
	font-size: 50px;
	padding: 0 3px 0 0;
}

.right-ribbon {
	position: fixed;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height:20px;
	z-index: 9999;
}

.right-ribbon .ribbon-frame {
	display:block;
	width: 90%;
	max-width: 1300px;
}

.right-ribbon .ribbon-btn {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 45px;
}

.r-btn { 
	position: relative;
	width: 45px;
	height: 45px;
	margin-bottom: 1em;
	border: none;
	z-index: 999;
	/*border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;*/
	
	box-shadow: 0px 0px 3px #777;
	-moz-box-shadow: 0px 0px 3px #777;
	-webkit-box-shadow: 0px 0px 3px #777;
}

.r-btn:hover p { visibility: visible;  padding: 8px 31px; }

.r-btn p {
  position: absolute;
  white-space: nowrap;
  right: 80%;
  top: 6px;
  z-index: 0;
  padding: 8px 0px;
  visibility: hidden;
  
  border-right: 1px solid #fff;
  box-shadow: -2px 0px 3px #777;
  -moz-box-shadow: -2px 0px 3px #777;
  -webkit-box-shadow: -2px 0px 3px #777;
  
	-webkit-transition:  all 0.1s ease-in;
	   -moz-transition:  all 0.1s ease-in;
	      -o-transition: all 0.1s ease-in;
	     -ms-transition: all 0.1s ease-in;
        	transition:  all 0.1s ease-in;
}


.personalize { display: table; width:320px; height: 320px; }
.personalize .frame-img { display: table-cell; vertical-align:middle; width: 100%; height: 100%; border: 2px dashed #CCC;  }
.personalize .frame-img img { max-width: 100%; max-height: 100%; }
.personalize .find-img { display: block; position: absolute; bottom: 0; left:0; width: 100%; }
.personalize .find-img input { width: 100%; max-width: 320px; border: 1px solid #DDD; }

/*
 * ALERT RESOLUTION
 */

.AlertSize { position:fixed; top:0; left:0; z-index: 9999;  display: table; width: 100%; height: 100%; visibility: hidden; }
.AlertSize .frame { display: table-cell; text-align: center; vertical-align: middle; width: 100%; height: 100%; }


/*
 * MODAL
 */

.modals{ 
	position: fixed; top:0; left:0; z-index: 9999999; 
	display: none; width: 100%; height: 100%;
}
.modals .frames {
	display: table; width: 100%; height: 100%;
	background: rgba(1,1,1,0.7);
	-webkit-transition:  all 0.2s ease-out;
	   -moz-transition:  all 0.2s ease-out;
          -o-transition: all 0.2s ease-out;
         -ms-transition: all 0.2s ease-out;
            transition:  all 0.2s ease-out;
}
.modals .blocks {
	display: table-cell;
	text-align: center; vertical-align: middle;
}

.modals .blocks {
	display: table-cell;
	text-align: center; vertical-align: middle;
}

.modals .forms { box-shadow: 0px 0px 3px rgb(119, 119, 119); -moz-box-shadow: 0px 0px 3px rgb(119, 119, 119); -webkit-box-shadow: 0px 0px 3px rgb(119, 119, 119); }
.modals .forms ul { padding: 10px 18px; }
.modals .forms ul li { display:block; padding-bottom: 5px; }
.modals .forms ul li:first-child { text-align: left; padding-bottom: 10px; font-size:20px; }
.modals .forms ul li > input { border: none; }
.modals .forms ul:after{ 
	content: " ";
	clear: both;
	display: block;
	position: absolute;
	top: 100%;
	right: 20px;
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #1ABC9C;
}

.modals .forms {
	display: inline-block;
}

/*
 * PLEASE WAIT STYLE
 */

.processFrame {
	display: table;
	width: 100%; height: 100%;
	background: url('../images/home/bg.png');
}
.processFrame .insideFrame {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.waitFrame { 
	display: inline-block;
    padding: 0 2em 2em 2em;
    background-color: #fff;
    width: 100%;
}

.waitFrame img { width: 90px; }
.s-dis { overflow: hidden; }

/*
 * TABS
 */

.tabs tr td { border-bottom: 1px solid #BDC3C7; }
.tabActive { border: 1px solid #BDC3C7; border-bottom: 0 !important; }

/*
 * indexT
 */

.indexT:hover .text , .indexT:hover .text1 { visibility: visible; opacity: 1; }
.indexT .text, .indexT .text1 { 
	position: absolute; 
    left: 0;
    width: 885px;
    height: 30px;
	visibility: hidden;
	opacity: 0;
	z-index: 4; 
	padding: 5px 8px; 
	white-space: nowrap;
	text-align: left;
	font-family: 'Arial';
	/*
	-webkit-transition:  all 0.1s ease-in;
	   -moz-transition:  all 0.1s ease-in;
	      -o-transition: all 0.1s ease-in;
	     -ms-transition: all 0.1s ease-in;
        	transition:  all 0.1s ease-in;*/
}
.indexT .text1 {top: 100%; bottom: auto; border-top: 2px solid #fff; }
.indexT .text {bottom: 100%; top: auto; border-bottom: 2px solid #fff;}

.indexT .text:hover, .indexT .text1:hover { visibility: hidden; opacity: 0; } 

.limit-s {
	max-width: 78%; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.limit { 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prices2 { text-align: right; }
.respHide { display: block; }
/*
 * RESPONSIVE SECTION
 */
@media screen and (max-width:912px) {
	.ResAbs { position: absolute !important; }
	.ResAbs .blocks {  }
	body { overflow-x: scroll; }
	.respHide { display: none; }
	#cssmenu .menu-frame {
		overflow: auto;
    	max-height: 400px;
	}
	#cssmenu  li.has-sub ul {
	  visibility: visible;
	  opacity: 1;  
	  top:100%;
	  position: relative;
	}
	#cssmenu  li.has-sub ul li {
	     margin-left: 25px;
	}
}

@media screen and (max-width:600px) {
	.modals .forms, .modals #menu { width: 100%; }
	.modals #msg { width: 100%; }
	.xBox select { width: 100%; min-width: 0 !important; }
}