@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {font-family: 'Montserrat', sans-serif; }

.logo {padding: 16px; object-fit: contain; object-position: top left } 
.invoice-title h2, .invoice-title h3 {display: inline-block; } 
/*.table-borderless>td {padding: 4px; } */
.table>tbody>tr>.no-line {border-top: none; } 
.payment-container {position: fixed; width: 100%; bottom: 24px; } 
body {padding:0 20px 20px; } 
.container {/*background: white;*/ display: block; margin: 0 auto; padding: 0; } 
.header {padding: 20px 0 0 0; } 
/*.save-action {position: relative; cursor: pointer; float: right; top: -27px; right: 4px; }*/


@media screen and (min-width: 767px) {
	.container {/*background: white; padding: 48px;*/ display: block; margin: 0 auto; width: 600px; } 
	.header {padding: 0 0 48px 0; }
}

@media screen and (max-width: 600px) {
	body {padding: 20px; font-size: 50%; } 
	.container {/*background: white;*/ display: block; margin: 0 auto; padding: 0; } 
	.header {padding: 20px 0 0 0; }
	.container-area{ padding:30px 20px !important;}
}


/*New CSS Code open*/
.mr-0{ margin-right: 0 }
.btn-block{ display: block; }
label{ text-transform: uppercase; font-size: 12px;margin-bottom:0; }
label small{ font-weight: 600 }
.btn{ background: #4fc6e0; color: #fff; text-transform: uppercase; font-size: 16px; font-weight: 500; padding: 10px; border-radius: 20px; display: block; text-align: center; margin: 10px auto 0;}
.border-dark{margin-top: 10px !important}
.table-borderduble{ border-bottom: 3px solid #000}
.border-dark td{ border-color: #000 !important; padding-top: 10px !important; }

.theme_gradient{background: #4fc6e0; background: -moz-linear-gradient(-45deg, #4fc6e0 0%, #347df0 100%); background: -webkit-linear-gradient(-45deg, #4fc6e0 0%,#347df0 100%); background: linear-gradient(135deg, #4fc6e0 0%,#347df0 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4fc6e0', endColorstr='#347df0',GradientType=1 );}
.theme_white{background: #fff;}
.theme_gray{background: #ecf1f3;}

.container-area{ padding: 50px; border-radius: 4px; box-shadow:0 0 40px 0px rgba(0, 0, 0, 0.2); position: relative; }
.logo-area img{ width: 300px }
.fiels{ position: relative; }
.form-field{padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 20px; width: 100%; box-sizing: border-box; color: #2C3E50; font-size: 13px;}
.save-action {position: absolute; cursor: pointer; float: right; bottom: 19px; right: 4px; }
.billing td {padding: 7px 0; font-size: 14px;}
.billing td strong{ font-size: 130% }
.billing td:first-child{ padding-right: 3px !important }
.billing td:last-child{ width: 100px;}

/*Second page Formating Opne*/
body.index_1 {padding:20px; } 
.index_1 .logo { padding: 0px;}
.index_1 .container-area { padding:10px 30px 30px;}
.card{ position: relative; }
.index_1 .card{ padding: 20px; margin-bottom: 20px;box-shadow: 1px 2px 0 1px rgba(0,0,0,.03);}
.card .edit{ position: absolute; right: 15px; top: 10px; z-index: 1; opacity: .5 }
.card .edit img{ width: 24px; padding: 5px }
.index_1 p{ font-size: 14px; margin-bottom: 5px }
.index_1 h6{ font-weight: 600; margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 5px }
.index_1 .billing{ margin-bottom: 60px }
/*.index_1 .billing td{ background: #fff; padding: 5px; margin-bottom: 5px }*/
.fix_bottom{ position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid #ddd; background: #fff; padding: 15px; font-size: 14px; }
.fix_bottom .btn{ margin: 0; font-size: 14px }
.index_1 .billing td strong {font-size: 110%; }


.fix_bottom strong{ font-size: 130%;color: #3598e2; }
/*Second page Formating close*/

/*Third page Formating Opne*/
body.index_2 {padding:0 20px 20px; }
.index_2 .card{ padding: 30px; margin: 0 -15px 20px; box-shadow: 1px 2px 0 1px rgba(0,0,0,.05);}
.index_2 h6{ font-weight: 600; margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 5px }
.index_2 p{ font-size: 14px; margin-bottom: 5px }
.index_2 .fix_bottom{ position: relative; bottom: 0; left: 0; width: 100%; border-top: none; background: #fff; padding: 5px 0; font-size: 14px; }
.index_2 .fix_bottom .btn{ margin: 0 auto; padding: 10px 50px; }
.index_2 .container-area {padding: 50px 30px 20px;}

/*Third page Formating Close*/

/*New CSS Code close*/


@media screen and (min-width: 767px) {
	.index_1 .container {width: 550px; }
}

@media screen and (max-width: 600px) {
	.index_1 .container-area { padding:10px 20px 20px !important;}
	.container.container-area{ width: 100%; border-radius: 0;box-shadow: none; }
	body.index_2{ padding: 0 }
	.index_2 .card{ margin:0 20px 10px }
}

@media screen and (max-width: 420px) {
	.panel-default .col-6{ width: 100% !important; max-width: 100% !important;flex: 0 0 100%; }
	.logo-area img{ padding: 0; width: 70%; }
	.index_1 .card{ padding: 10px}
	.card .edit { right: 10px;}
	.fix_bottom, .index_2 .fix_bottom{ position: fixed;padding: 10px 15px 6px; }
	.index_2 .billing{ margin-bottom: 50px }
	.index_2 .fix_bottom{ border-top: 1px solid #ddd; padding: 10px 15px; right: 0; width: auto; }
	.index_2 .fix_bottom .btn{ display: block; width: 100%; }
	.index_2 .card{margin: 0 0px 10px}
	.btn{ margin: 0 auto !important }
}