FREEFORMATTER.COM
Contact

Search tools...
Formatters
JSON Formatter
HTML Formatter
XML Formatter
SQL Formatter
Validators
JSON Validator
HTML Validator
XML Validator - XSD
XPath Tester
Credit Card Number Generator & Validator
Regular Expression Tester (RegEx)
Java Regular Expression Tester (RegEx)
Cron Expression Generator - Quartz
Encoders & Decoders
Url Encoder & Decoder
Base 64 Encoder & Decoder
Convert File Encoding
QR Code Generator
Code Minifiers / Beautifier
JavaScript Beautifier
CSS Beautifier
JavaScript Minifier
CSS Minifier
Converters
XSD Generator
XSLT (XSL Transformer)
XML to JSON Converter
JSON to XML Converter
CSV to XML Converter
CSV to JSON Converter
Epoch Timestamp To Date
Cryptography & Security
Message Digester (MD5, SHA-256, SHA-512)
HMAC Generator
MD5 Generator
SHA-256 Generator
SHA-512 Generator
String Escaper & Utilities
String Utilities
HTML Escape
XML Escape
Java and .Net Escape
JavaScript Escape
JSON Escape
CSV Escape
SQL Escape
Web Resources
Lorem Ipsum Generator
List of MIME types
HTML Entities
Url Parser / Query String Splitter
i18n - Formatting standards & code snippets
ISO country list - HTML select snippet
USA state list - HTML select snippet
Canada province list - HTML select snippet
Mexico state list - HTML select snippet
Time zone list - HTML select snippet
CSS Beautifier
Formats a CSS files with the chosen indentation level for optimal readability. Supports 4 indentation levels: 2 spaces, 3 spaces, 4 spaces and tabs.

*The maximum size limit for file upload is 2 megabytes. All files bigger than 500k will be formatted to a new window for performance reason and to prevent your browser from being unresponsive.

Option 1: Copy-paste your CSS string here
form .error{color:#d50000;font-size:small}.background{background-image:url("/images/bg.jpg");background-position:center center;background-size:cover;background-repeat:no-repeat}.user-view .white-text{text-shadow:0px 0px 4px #000}.sidenav .user-view .name{margin-top:0}.brand-logo img{height:40px;margin:5px 0}.btn-custom{margin-bottom:1rem;width:100%}table.mobile-table{margin-top:1rem}table.mobile-table,table.mobile-table thead,table.mobile-table tbody,table.mobile-table th,table.mobile-table td,table.mobile-table tr{display:block}table.mobile-table thead tr{position:absolute;top:-9999px;left:-9999px}table.mobile-table tr{margin:0 0 1rem 0;display:flex;flex-wrap:wrap}table.mobile-table tr{background:#eee!important}table.mobile-table td{border:none;position:relative;padding-left:25%;width:50%;padding-top:5px;padding-bottom:5px;border-bottom:1px solid #dfdfdf}table.mobile-table td:first-child,table.mobile-table td:nth-child(2){background-color:#CCC}table.mobile-table td:last-child{width:100%;border-bottom:none}table.mobile-table td:before{position:absolute;top:5px;left:15px;width:25%;font-weight:bold;padding-right:10px;white-space:nowrap}table.mobile-table td:nth-of-type(1):before{content:"Fecha"}table.mobile-table td:nth-of-type(2):before{content:"Ref."}table.mobile-table td:nth-of-type(3):before{content:"Cliente"}table.mobile-table td:nth-of-type(4):before{content:"Área"}table.mobile-table td:nth-of-type(5):before{content:"Descripción"}.dateWrapper{display:flex;justify-content:space-between;align-items:center}.dateWrapper input[type="date"]{max-width: 65%}.linea .row {margin-bottom: 0}.linea{background-color:#eee;padding-top:0.5rem;margin-bottom:0.5rem}.oneLiner{display:flex}.oneLiner .unidades{width:30%}.oneLiner .articulo{width:70%}dl{display:flex;flex-flow:column wrap;max-height:5em;margin:0}dt{padding:2px 4px;background:#999;color:#fff}dd{margin:0;padding:4px;min-height:1.5em}dl.twoLines{max-height:6em}dl.twoLines dd{min-height:3em}.botoneraPlaceholder{display:inline-block;height:58px;width:100%;line-height:54px}.botonera{position:fixed;bottom:0;width:100%;display:flex;justify-content:space-evenly;z-index:100}.botonera .btn-large{width:50%;border-radius:0;display:flex;justify-content:center}.lineasWrapper .addBtn{margin-top:-0.5em}.btn-full-width{width:100%!important;display:flex;justify-content:center}.horario .input-field>div{display:flex;align-items:center}.horario label{margin-top:-2rem}.horario .select-wrapper input.select-dropdown{padding: 0 0.5rem;width:90%}.horario .select-wrapper .caret{top:-1rem}.logos-empresas{display:inline-flex;width:calc(100% - 75px);margin:0 auto;align-items:center;height:56px;justify-content:space-between}.logos-empresas img{height:35px}nav .logos-empresas a{color:#fff;height:56px;display:flex;align-items:center}nav{background-color: #1A1A1A}nav.azul{background-color:#0d47a1!important}nav.rojo{background-color:#F44336!important}.flex-column-center{display:flex;flex-direction:column;justify-content:space-around;align-items:center}.empresas{height:300px}
Option 2: Or upload your CSS file
Ningún archivo seleccionado 
UTF-8
Indentation level:

Tab delimited
BEAUTIFY CSS BEAUTIFY CSS IN NEW WINDOW
Beautified CSS:
form .error {
	color: #d50000;
	font-size: small
}

.background {
	background-image: url("/images/bg.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat
}

.user-view .white-text {
	text-shadow: 0px 0px 4px #000
}

.sidenav .user-view .name {
	margin-top: 0
}

.brand-logo img {
	height: 40px;
	margin: 5px 0
}

.btn-custom {
	margin-bottom: 1rem;
	width: 100%
}

table.mobile-table {
	margin-top: 1rem
}

table.mobile-table,
table.mobile-table thead,
table.mobile-table tbody,
table.mobile-table th,
table.mobile-table td,
table.mobile-table tr {
	display: block
}

table.mobile-table thead tr {
	position: absolute;
	top: -9999px;
	left: -9999px
}

table.mobile-table tr {
	margin: 0 0 1rem 0;
	display: flex;
	flex-wrap: wrap
}

table.mobile-table tr {
	background: #eee!important
}

table.mobile-table td {
	border: none;
	position: relative;
	padding-left: 40%;
	width: 50%;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #dfdfdf
}

table.mobile-table td:first-child,
table.mobile-table td:nth-child(2) {
	padding-left: 15%;
	width: 50%;
}

table.mobile-table td:first-child,
table.mobile-table td:nth-child(2) {
	background-color: #CCC
}

table.mobile-table td:last-child {
	width: 100%;
	border-bottom: none
}

table.mobile-table td:before {
	position: absolute;
	top: 5px;
	left: 15px;
	width: 40%;
	font-weight: bold;
	padding-right: 10px;
	white-space: nowrap
}

table.mobile-table td:nth-of-type(1):before {
	content: "Fecha"
}

table.mobile-table td:nth-of-type(2):before {
	content: "Ref."
}

table.mobile-table td:nth-of-type(3):before {
	content:  attr(data-label);
}

table.mobile-table td:nth-of-type(4):before {
	content: "Observaciones"
}
table.mobile-table td:nth-of-type(6):before {
	content: "Usuario"
}

table.mobile-table-pedidos {
	margin-top: 1rem
}

table.mobile-table-pedidos,
table.mobile-table-pedidos thead,
table.mobile-table-pedidos tbody,
table.mobile-table-pedidos th,
table.mobile-table-pedidos td,
table.mobile-table-pedidos tr {
	display: block
}

table.mobile-table-pedidos thead tr {
	position: absolute;
	top: -9999px;
	left: -9999px
}

table.mobile-table-pedidos tr {
	margin: 0 0 1rem 0;
	display: flex;
	flex-wrap: wrap
}

table.mobile-table-pedidos tr {
	background: #eee!important
}

table.mobile-table-pedidos td {
	border: none;
	position: relative;
	padding-left: 25%;
	width: 50%;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #dfdfdf
}

table.mobile-table-pedidos td:first-child,
table.mobile-table-pedidos td:nth-child(2) {
	background-color: #CCC
}

table.mobile-table-pedidos td:last-child {
	width: 100%;
	border-bottom: none
}

table.mobile-table-pedidos td:before {
	position: absolute;
	top: 5px;
	left: 15px;
	width: 25%;
	font-weight: bold;
	padding-right: 10px;
	white-space: nowrap
}

table.mobile-table-pedidos td:nth-of-type(1):before {
	content: "Fecha"
}

table.mobile-table-pedidos td:nth-of-type(2):before {
	content: "F. entrega"
}

table.mobile-table-pedidos td:nth-of-type(3):before {
	content: "Pedido"
}

table.mobile-table-pedidos td:nth-of-type(4):before {
	content: "Área"
}

table.mobile-table-pedidos td:nth-of-type(5):before {
	content: "Cliente"
}

.dateWrapper {
	display: flex;
	justify-content: space-between;
	align-items: center
}

.dateWrapper input[type="date"] {
	max-width: 65%
}

.linea .row {
	margin-bottom: 0
}

.linea {
	background-color: #eee;
	padding-top: 0.5rem;
	margin-bottom: 0.5rem
}

.oneLiner {
	display: flex
}

.oneLiner .unidades {
	width: 30%
}

.oneLiner .articulo {
	width: 70%
}

dl {
	display: flex;
	flex-flow: column wrap;
	max-height: 5em;
	margin: 0
}

dt {
	padding: 2px 4px;
	background: #999;
	color: #fff
}

dd {
	margin: 0;
	padding: 4px;
	min-height: 1.5em
}

dl.twoLines {
	max-height: 6em
}

dl.twoLines dd {
	min-height: 3em
}

.botoneraPlaceholder {
	display: inline-block;
	height: 58px;
	width: 100%;
	line-height: 54px
}

.botonera {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	z-index: 100
}

.botonera .btn-large {
	width: 50%;
	border-radius: 0;
	display: flex;
	justify-content: center
}

.lineasWrapper .addBtn {
	margin-top: -0.5em
}

.btn-full-width {
	width: 100%!important;
	display: flex;
	justify-content: center
}

.horario .input-field>div {
	display: flex;
	align-items: center
}

.horario label {
	margin-top: -2rem
}

.horario .select-wrapper input.select-dropdown {
	padding: 0 0.5rem;
	width: 90%
}

.horario .select-wrapper .caret {
	top: -1rem
}

.logos-empresas {
	display: inline-flex;
	width: calc(100% - 75px);
	margin: 0 auto;
	align-items: center;
	height: 56px;
	justify-content: space-between
}

.logos-empresas img {
	height: 35px
}

nav .logos-empresas a {
	color: #fff;
	height: 56px;
	display: flex;
	align-items: center;
	padding: 0;
}

nav .logos-empresas a:first-child {
	padding-left: 1em;
}

nav {
	background-color: #1A1A1A
}

nav.azul {
	background-color: #0d47a1!important
}

nav.rojo {
	background-color: #F44336!important
}

.flex-column-center {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center
}

.empresas {
	height: 300px
}

.admin-toolbar {
	margin: 0 -10px!important;
}

.mod_usuarios>div>div>label {
    -webkit-transform: translateY(-14px) scale(0.8);
    transform: translateY(-14px) scale(0.8);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

#tabla_tiempos_wrapper {
    padding-bottom: 10px;
}

.dt-buttons {
    position: absolute;
    bottom: 0;
    right: 0;
}

.dt-buttons button {
    text-decoration: none;
    color: #fff;
    background-color: #26a69a;
    text-align: center;
    letter-spacing: .5px;
    -webkit-transition: background-color .2s ease-out;
    transition: background-color .2s ease-out;
    cursor: pointer;
    border: none;
    border: none;
    border-radius: 2px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    text-transform: uppercase;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    -webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
}

@media only screen and (min-width: 993px) {
	nav a.sidenav-trigger {
		display: block;
	}
}


.carousel-item h5, .carousel-item p {
	padding-left: 1.5em;
}

.carousel-item h5 {
	position: absolute;
	top: 0.5em;
	left: 0.5em;
	margin: 0;
	padding: 0;
	text-align: left;
}


.carousel-item p {
	position: absolute;
	margin: 0;
	padding: 0;
	right: 0.5em;
	top: 0.5em;
}

.lineasWrapper {
	display: inline-block;
	width: 100%;
	margin-top: 2em;
}

.table-pagination .pagination li span {
	color: #444 !important;
    display: inline-block !important;
    font-size: 1.2rem !important;
    padding: 0 10px !important;
    line-height: 30px !important;
}

.table-pagination .pagination li span {
	color: #444 !important;
    display: inline-block !important;
    font-size: 1.2rem !important;
    padding: 0 10px !important;
    line-height: 30px !important;
}

.table-pagination .pagination li.active span {
	color: #fff !important;
}

.loteWrapper {
	background-color: #efefef;
	padding: 5px;
}

.loteWrapper td{
    padding: 0px;

}

.pwa-install-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff; /* azul bootstrap */
    color: white;
    border: none;
    border-radius: 30px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.3s ease;
}

.pwa-install-btn:hover {
    transform: scale(1.03);
}

.pwa-install-btn:active {
    transform: scale(0.97);
}