@charset "utf-8";

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('../../fonts/roboto-regular.eot'); 
	src: local(''),
		url('../../fonts/roboto-regular.eot?#iefix') format('embedded-opentype'), 
		url('../../fonts/roboto-regular.woff2') format('woff2'), 
		url('../../fonts/roboto-regular.woff') format('woff'), 
		url('../../fonts/roboto-regular.ttf') format('truetype'), 
		url('../../fonts/roboto-regular.svg#Roboto') format('svg'); 
}

@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	src: url('../../fonts/roboto-italic.eot'); 
	src: local(''),
		url('../../fonts/roboto-italic.eot?#iefix') format('embedded-opentype'), 
		url('../../fonts/roboto-italic.woff2') format('woff2'), 
		url('../../fonts/roboto-italic.woff') format('woff'), 
		url('../../fonts/roboto-italic.ttf') format('truetype'), 
		url('../../fonts/roboto-italic.svg#Roboto') format('svg'); 
}

/* roboto-700 - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: bold;
	src: url('../../fonts/roboto-bold.eot'); 
	src: local(''),
		url('../../fonts/roboto-bold.eot?#iefix') format('embedded-opentype'), 
		url('../../fonts/roboto-bold.woff2') format('woff2'), 
		url('../../fonts/roboto-bold.woff') format('woff'), 
		url('../../fonts/roboto-bold.ttf') format('truetype'), 
		url('../../fonts/roboto-bold.svg#Roboto') format('svg'); 
}


*, *::before, *::after {
    box-sizing: border-box;
    outline: none !important;
}

html{
	height: 100% !important;
}


body{
	font-family:'Roboto', sans-serif;
	text-rendering:optimizeLegibility;
	margin:0px; 
	padding:0px; 
    height:100% !important;  
	font-style:normal;
	font-size:12px;
}


a{color:#333;text-decoration:none}
a:link{ text-decoration:none }
a:visited{ color:#000000; text-decoration:none }
a:hover{ color:#FF6600; text-decoration:none }



.box-form.tools a:focus{ color:#ff9900; text-decoration:none }
 
a.UI.cut-direction:focus{ border:2px solid #ff9900 !important; } 
a.orientation:focus, a.grainor:focus, a.grain-material:focus{border:2px solid #ff9900 !important; } 
a.make:focus{ border:2px solid #ff9900 !important; color:#000000 }


.UI{display:inline; float:left; background-image:url(../img/sprite-tools18.png); background-attachment: scroll; background-color: transparent;  background-repeat: no-repeat; }

.cart{background-position:-261px -221px; width:20px; height:18px;}
.portrait{background-position:left top; width:10px; height:12px;}
.landscape{background-position:-10px -2px; width:12px; height:10px;}
.print{background-position:-22px top; width:14px; height:12px;}
.network{background-position:-36px top; width:16px; height:13px;}
.save{background-position:-67px top; width:12px; height:12px;}
.email{background-position:-79px top; width:16px; height:11px;}
.trashbin{background-position:-95px top; width:16px; height:16px;}
.close{background-position:-139px top; width:12px; height:12px;}
.arrowdown{background-position:-151px top; width:10px; height:7px;}
.edit{background-position:-161px top; width:16px; height:16px;} 
.add{background-position:left -28px; width:16px; height:16px;}
.remove{background-position:-16px -28px; width:16px; height:16px;}
.undo{background-position:-32px -28px; width:16px; height:16px;}
.check{background-position:-48px -28px; width:16px; height:16px;}
.pdf{background-position:-64px -28px; width:15px; height:16px;}
.code{background-position:-79px -28px; width:20px; height:16px;}
.info-cut{background-position:-99px -28px; width:16px; height:16px;}
.info-cut.changed{background-position:-115px -28px; width:16px; height:16px;}
.stop{background-position:-181px top; width:44px; height:44px;}
.stop-mini{background-position:-225px -21px; width:23px; height:23px;}
.key{background-position:-131px -28px; width:16px; height:16px;}
.import{background-position:-148px -28px; width:14px; height:18px; }
.copy{background-position:-162px -28px; width:14px; height:16px; }
.maxx{background-position:-250px -28px; width:16px; height:16px; }
.minn{background-position:-267px -28px; width:16px; height:16px; }
.check-simple{background-position:-228px -2px; width:15px; height:13px; }
.useredit{ background-position:-209px -88px; width:18px; height:18px;}
.billing{ background-position:-199px -107px; width:18px; height:18px;}
.logout{ background-position:-199px -125px; width:18px; height:18px;}
.terminals{ background-position:-217px -107px; width:18px; height:12px;}
.dxf{background-position:-250px top; width:14px; height:16px;}
.run{background-position:-232px -88px; width:16px; height:16px;}
.newWindow{background-position:-222px -226px; width:16px; height:16px;}

.settings{background-position:-178px -87px; width:18px; height:18px;}
.settings2{background-position:-240px -88px; width:18px; height:18px;}

.billing2{ background-position:-237px -107px; width:13px; height:18px;}


#topBtns .icon{padding: 0px !important;}

.madera.orvetas-x{background-position:-124px -47px; width:57px; height:41px; border:2px solid #fff;}
.madera.orvetas-landscape{background-position:-177px -47px; width:57px; height:41px;border:2px solid #fff;}
.madera.orvetas-portrait{background-position:-230px -47px; width:57px; height:41px;border:2px solid #fff;}

.madera.ver-port{background-position:left -47px; width:45px; height:33px;border: 2px solid white; }
.madera.ver-auto{background-position:-41px -47px; width:45px; height:33px;border: 2px solid white; }
.madera.ver-land{background-position:-82px -47px; width:45px; height:33px;border: 2px solid white; }

.madera.hor-port{background-position:left -76px; width:45px; height:33px; border: 2px solid white; }
.madera.hor-auto{background-position:-41px -76px; width:45px; height:33px; border: 2px solid white; }
.madera.hor-land{ background-position: -82px -76px; width: 45px; height: 33px; border: 2px solid white; }

.carton.orvetas-x{background-position:left -147px; width:56px; height:41px; border:2px solid #fff;}
.carton.orvetas-landscape{background-position:-53px -147px;width:56px; height:41px;border:2px solid #fff;}
.carton.orvetas-portrait{background-position:-106px -147px; width:56px; height:41px;border:2px solid #fff;}

.carton.ver-port{background-position:left -184px; width:45px; height:33px;border:2px solid white; }
.carton.ver-auto{background-position:-41px -184px; width:45px; height:33px;border:2px solid white; }
.carton.ver-land{background-position:-82px -184px; width:45px; height:33px;border:2px solid white; }

.carton.hor-port{background-position:left -213px; width:45px; height:33px;border:2px solid white; }
.carton.hor-auto{background-position:-41px -213px; width:45px; height:33px;border:2px solid white; }
.carton.hor-land{background-position:-82px -213px; width:45px; height:33px;border:2px solid white; }

.classic.ver-port,.classic.hor-port{background-position:-123px -184px; width:45px; height:33px;border:2px solid white; }
.classic.ver-auto,.classic.hor-auto{background-position:-164px -184px; width:45px; height:33px;border:2px solid white; }
.classic.ver-land,.classic.hor-land{background-position:-205px -184px; width:45px; height:33px;border:2px solid white; }

.cuts-auto{background-position:left -108px; width:70px; height:41px;border:2px solid #fff;}
.cuts-hor{background-position:-66px -108px; width:70px; height:41px;border:2px solid #fff; }
.cuts-ver{background-position:-132px -108px; width:70px; height:41px;border:2px solid #fff; }

a.info-cut:focus{ background-position:-246px -184px; width:16px; height:16px; }
a.UI.remove:focus{ background-position:-262px -184px; width:16px; height:16px; } 
a#add-secondary-edging:focus span.UI.add{background-position:-261px -163px; width:16px; height:16px; }

.modo.text{ display:none; }

.addImage, .removeImage{
	position: absolute;
	z-index: 1;
	background-color: white;
	border-radius: 12px;
}

.removeImage{
	border-radius: 3px;
}

.addImage{background-position:left -28px; width:16px; height:16px;}
.removeImage{background-position:-16px -28px; width:16px; height:16px;}
.uploadImg{background-position:left -79px; width:80px; height:80px;}

img.logo-pdf { 
	max-width: 100%;
    min-height: 50px;
    border-radius: 4px;
    max-height: 100px;
    background-color: white;
    border: 2px solid #dbdbdb;
    box-sizing: unset;
    margin-right: 10px;
    float:left;
    margin-bottom: 3px
}

#logo-pdf .upload-info{
	
	float:left;
	margin: 3px 0;
	
}

#logo-pdf .action-upload{
	
	cursor:pointer;
	
}

.imageDropContainer{
	
	border: 1px solid #dbdbdb;
    padding: 5px;
    border-radius: 4px;
    color: #000;
    background-color: #c7c7c7;
    width: 99% !important;
    min-height: 40px;
	
}

.dz-drag-hover{
 	background-color: #4e4e4d !important;	
}

.sizes-container{float:left;}
.UIgrain{
	display:inline; 
	background-image:url(../img/sprite-grains2.png); 
	background-attachment: scroll; 
	background-color: transparent;  
	background-repeat: no-repeat;
}

.UIgrain.loadfast{
	background-position:left top;
	width:0px; height:0px;
}

.grain-helper .UIgrain.board-grain.madera.hor{
	background-position:left -160px;
}

.grain-helper .UIgrain.board-grain.madera.ver{
	background-position:-185px -160px;
}

.grain-helper .UIgrain.board-grain.madera.auto{
	background-position:left top;

}

.grain-helper .UIgrain.board-grain.carton.hor{
	background-position:left -345px;

}

.grain-helper .UIgrain.board-grain.carton.ver{
	background-position:-185px -345px;

}

.grain-helper .UIgrain.board-grain.carton.auto{
	background-position:-185px top;
}



.grain-helper{
	position:absolute;	
	background-color:#ffffff;
    box-shadow: 0px 2px 10px 6px grey;
    padding: 0 0 5px 5px;
    display:none;
}

.grain-helper .board-width{
	position:relative;
 	text-align: center;
  	margin: 3px 0;
}

.grain-helper .board-height{
	position:relative;
 	
    writing-mode: horizontal-tb;
    white-space: nowrap;
    -webkit-transform: translate(0.7em,0) rotate(90deg);
    -moz-transform: translate(0.7em,0) rotate(90deg);
    -o-transform: translate(0.7em,0) rotate(90deg);
    
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform: translate(0.7em,0) rotate(90deg);
	transform-origin: 0 0;
    width: max-content;
    margin:0 3px; 
}

.grain-helper .board-grain{
    position: absolute;
}

.box-form.details-r.blue li{
	width:50% !important
}

.box-form.details-r.blue li:first-child {
    width: 100% !important;
}

.box-form.details-r.green a.link{
	width:50% !important
}


a.link.opened{
    border-top: 2px solid #dbdbdb;
    border-left: 2px solid #dbdbdb;
    border-right: 2px solid #dbdbdb;
    border-radius: 4px 4px 0 0;
    background-color: #dbdbdb; 
    font-weight: bold;
}
 
span.cupon{
    
}

span.cupon.valid{
    color: #6dca07;
	font-weight:bold;
}

span.cupon.invalid{
	color: #ff0000;
	font-weight:bold;
}

span.cupon.extra{
	
}

span.cupon-description{
	
}

#header{
    float: left;
    width: 100%;
    background-color: #333;
    border-bottom: 2px solid #fff000;
    padding: 4px 0;
}

#topBtns {
    float: right;
    padding: 4px 0.5%;
    text-align: right;
    width:65%;
}

.logo{ 

	width: 284px;
	float: left;
	margin: 6px 0 0 5px;	
}

#topBtns a{
	
	font-size: 16px;
	color: #FFF;
	padding: 5px 0px 5px 0px;
	border-radius: 4px;
	text-align: center;
	width: 33%;
	max-width:330px;
	margin: 0 2.5px;
	float: right;
	border: 1px solid #dbdbdb;
}

#topBtns a:first-child{
	
	 margin-right: 0;
}

#topBtns a:last-child{
	
	 margin-left: 0;
}


#topBtns a.selected{

	background-color:#000;
	border:1px solid #FFFF00 !important;
	
}

#topBtns a:hover{
	
	background-color: #000;
    text-decoration: underline;
    
    border:1px solid #FFFF00 !important;
    transition:all 0.5s cubic-bezier(0.58, 0.01, 0.01, 0.99);
    
}

.body-container{
	float: left;
	width:100%;
	min-height:180px;	
	margin: 5px 0px;
    /* padding: 0px 3px; */

}

.body-container .section{
    float: left;
    border-radius: 3px;
    border: 1px solid rgba(16, 102, 174, 0.7);
    width: 24.4%;
    text-align: center;
    font-size: 15px;
    padding: 5px;
    margin: 0.4% 0.4% 8px 0.4%;
    
}

.body-container .section:hover{
	
}

.body-container .section:hover{
	
	background-color: #C5E8F1;
    transition:background-color 0.5s cubic-bezier(0.58, 0.01, 0.01, 0.99);
    
}

.body-container .section.selected{
	background-color: #C5E8F1;
}


.body-container .section:first-child { margin-left: 0px; }
.body-container .section:nth-child(4n+4) { margin-right: 0;  }



@media screen and (min-width: 0px) and (max-width: 450px) {
	
	#header{
		padding: 4px 0 0px 0;
	}
	
	.logo{
		width:214px;
		margin: 1px 0 5px 0px;
	}
	
	#topBtns{
		padding: 4px 2px;
		width:100%;
	}
	
		
	#topBtns a{
		font-size: 10px;
  		width: 33%;
	}

	.body-container .section{
		padding: 5px 2px;
		width: 49.4%;
  		font-size: 13px;
		margin: 4px 0.4% 4px 0.4%;
	}
	
	
	
	.body-container .section:nth-child(odd) { margin-left: 0;  }
	.body-container .section:nth-child(even) { margin-right: 0;  }
	.body-container .section:nth-child(1) { margin-bottom: 0;  }
	.body-container .section:nth-child(2) { margin-bottom: 0;  }

	
}

@media screen and (min-width: 400px) and (max-width: 450px) {
	#topBtns a{
		font-size: 12px;
  		width: 33%;
	}

}

@media screen and (min-width: 451px) and (max-width: 520px) {

	.logo{
		width: 234px;
		/* margin: 1px 0 5px 5px;*/
		margin: 1px 0 3px 5px;
	}
	
	#topBtns{
		padding: 4px 0.5% 0 0.5%;
		width:100%;
	 
	}
	
		
	#topBtns a{
		font-size: 12px;
  		width: 33%;
	}

	.body-container .section{
		padding: 5px 2px;
		width: 49.4%;
		font-size: 14px;
		margin: 4px 0.4% 4px 0.4%;
	}
	
	
	
	.body-container .section:nth-child(odd) { margin-left: 0;  }
	.body-container .section:nth-child(even) { margin-right: 0;  }
	.body-container .section:nth-child(1) { margin-bottom: 0;  }
	.body-container .section:nth-child(2) { margin-bottom: 0;  }

	
}


@media screen and (min-width: 521px) and (max-width: 800px) {


	.logo{
		width: 234px;
		/* margin: 1px 0 5px 5px;*/
		margin: 1px 0 3px 5px;
	}
	
	#topBtns{
		padding: 4px 0.5% 0 0.5%;
		width:100%;
	 
	}
	
		
	#topBtns a{
		font-size: 16px;
  		width: 33%;
	}

	.body-container .section{
		padding: 5px 2px;
		width: 49.4%;
		font-size: 14px;
		margin: 4px 0.4% 4px 0.4%;
	}
	
	
	
	.body-container .section:nth-child(odd) { margin-left: 0;  }
	.body-container .section:nth-child(even) { margin-right: 0;  }
	.body-container .section:nth-child(1) { margin-bottom: 0;  }
	.body-container .section:nth-child(2) { margin-bottom: 0;  }

}




@media screen and (min-width: 801px) and (max-width: 900px) {
	
	.logo{
		width: 260px;
		margin: 6px 0 0 5px;
	}
	
	#topBtns {
	    width: 66%;
	    margin-top:0;
	}
	
	#topBtns a{
		font-size: 15px;
	}

}



.count-cuts {
    float: right;
}

.block-group-edging {
    float: left;
    border: 2px solid #dbdbdb;
    background-color: #f0f0f0;
    margin-top: 10px;
    border-radius: 2px;
    width: 100%;
    padding: 0 8px 8px 8px;
    
}

.block-group-edging.secondary {
	display:none;	
}

.box-impresion {
    float: left;
    width: 50%;
    padding: 5px 0 0 5px;
}


.box-impresion .previewLinks a{
	margin: 3px;
   	float: left;
    clear: both; 
}

.box-impresion .previewer{
	display:none;
   	float: left; 
}

.box-impresion .previewer .explanation{
 	float:left; 
	font-size: small;
	padding:5px 0 0 0px
}

.box-aplicacion {
    width: 50%;
    float: left;
    border-right: 2px solid #dbdbdb;
    padding: 5px 5px 0 0;
}



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

	.box-impresion, .box-aplicacion {
	    width: 100%;
	    margin-bottom: 20px;
	}

	
}

.dimW{
	width:100%;
	float:left;
}

.dimH{
	float:right;
}

.info{
	position:absolute;
	text-align:center;
	overflow: hidden;
}

.vertical{
	writing-mode:tb;
	width:100%;
	height:100%;
}

.versions.selected{
	background-color: #cecece;
    font-weight:bold;
}

.versions{
	font-size: 13px;
    float: right;
    border: 1px solid #bcbcbc;
    margin: 0 2px 0px 2px;
    padding: 2px 4px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.title-blueprint{
	float: left;
    font-size: 17px;
}

.subtitle {

    float: left;
    text-align: left;
    padding: 3px 0 0 10px;
    font-size: 14px;
    font-style: oblique;
}


.madera{cursor: pointer;}

.import{
	float: left !important;
    margin-right: 3px;
    cursor: pointer;
    
}


.fixedRatio {
    float: left;
    width: 100%;
    margin-bottom: 7px;
    border: 1px solid darkred;
    background-color: #ffdada;
    color: #401e1e;
    padding: 4px;
    border-radius: 4px;
    display: none;
    line-height: 23px;
}

.fixedRatio .UI {
    float: left;
    margin: 0 4px 0 0;
    
}

.fixedRatio a:hover {
    color: #000 !important;
    text-decoration: none;
}

.fixedRatio a:visited {
    color: #401e1e !important;
    text-decoration: none;
}



.partialOptimization-active {
    float: left;
    width: 100%;
    margin-bottom: 7px;
    border: 1px solid darkred;
    background-color: #ffdada;
    color: #401e1e;
    padding: 4px;
    border-radius: 4px;
    display: none;
    line-height: 23px;
}

.partialOptimization-active .UI {
    float: left;
    margin: 0 4px 0 0;
    
}

.partialOptimization-deactivate {
	float: left;
    width: 100%;
    margin-bottom: 7px;
    border: 1px solid #2196F3;
    background-color: #e4f3ff;
    color: #000000;
    padding: 4px;
    border-radius: 4px;
    line-height: 18px;
}

.partialOptimization-deactivate .UI {
    float: left;
    margin: 0 4px 0 0;
}

a.import-cuts {
    border: 2px solid #dbdbdb;
    padding: 6px;
    border-radius: 3px;
    float: right;
    font-weight:bold;
    margin-top: 10px;
    background-color: #ffffff;
}

a.export-cuts {
    border: 2px solid #dbdbdb;
    padding: 6px;
    border-radius: 3px;
    float:left;
    font-weight:bold;
    margin-top: 10px;
    background-color: #ffffff;
}

textarea.email-msj {
    float: left;
    resize: vertical;
}

textarea.block-import-cuts {
    float: left;
    margin-top: 10px;
    resize: vertical;
}

textarea.block-export-cuts {
    float: left;
    margin-top: 10px;
    resize: vertical;
    display:none;
}

.calc-costs-block {
    float: left;
    margin-top: 10px;
    width: 100%;
}

.calc-costs-block.open {
    border: 2px solid #dbdbdb;
    background-color: #f0f0f0;
    border-radius: 2px;
    padding: 5px;
}


div.orientations-classic{
	cursor:pointer;
}

span.UI.cut-direction{
	cursor:pointer;
}

span.UI.edit{
	cursor:pointer;
}

.aviso-actualizacion-material{
	
	border: 1px solid #ff0022;
    width: 100%;
    float: left;
    background-color: #fdf6f7;
    padding: 5px;
    margin: 5px 0;
    border-radius: 4px;
    font-size: 14px;
    
}

.cut-direction {
     margin-right: 12px;
}


.autosave .trashbin{
	margin-top: 2px;
}

.demo-version{    
	float: left;
    width: 100%;
    border: 1px solid red;
    border-radius: 4px;
    padding: 4px;
    background-color: #f9e2e2 !important;
    font-size: 14px !important;
    color: #6f1616 !important;
    text-shadow:#dac4c4 -1px 1px 1px !important;
    margin-bottom: 20px !important;
    margin-top: 10px;
}

.demo-version-legacy{
	
	float: left;
    width: 100%;
    border: 1px solid #ffbd00;
    border-radius: 4px;
    padding: 4px;
    background-color: #fbf9d4 !important;
    font-size: 14px !important;
    color: #2d2a2a !important;
    text-shadow: #ccc -1px 1px 1px !important;
    margin-bottom: 30px !important;
    margin-top: 10px;
		
}


.ie-msg{
	margin-top: 4px;
	margin-bottom: 4px;
    border: 1px solid #ff0000;
    border-radius: 3px;
    float: left;
    width: 100%;
    background-color: #FF5E00;
    border-width: 1px;
    color: #fff;
    font-size: 20px;
    padding:3px;
}

.ie-msg a:visited{
	color:#fff;
}

.ie-msg a:link{
	color:#fff;
	text-decoration: underline;
}

.ie-msg a:hover{
	color:#fff;
	text-decoration:none;
}


#MainContainer {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin-bottom: -4.6em !important;
}


		
#bannerAjaxStatus{
		
	background-color: #FCD3D3;
	border: 1px solid #F00;
	z-index: 10000;
	padding: 10px;
	width: 70%;
	text-align: center;
	font-size: 15px;

}


.upgrade-msg {
    float: left;
    width: 100%;
    background-color:rgba(255, 232, 61, 0.5);
    padding: 4px;
    color: #333;
    margin-bottom: 4px;
    font-size: 15px;
}

.dm-msg{
	position:absolute;
	color:#333;
 	width: 100%;
    height: 100%;
}


.showWhenElse{
	display:block;
	float:left;
}
/**/	



@media screen and (min-width: 768px){
	
	.demo-version, .demo-version-legacy{    
	    font-size: 15px !important;
	}

		
}

@media screen and (min-width: 0px) and (max-width: 450px) {
		
	.upgrade-msg {
	    font-size: 11px;
	}
	
}



.box-faq,.box-tutoriales{
	float:left;
	width:100%
}


.faq-anwser{
	float:left;
	width:100%;
	font-size:15px;	
}

.box{
	float:left;
	width: 100%;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	margin:10px 0 20px 0;
}



.tools{
	float:right;
	width:30%;
    margin-bottom: 10px;
	
}

.canvas{
	float:left;
	width: 69%;
	text-align: center;
	background-color:white;
}

.fixed{
	position: fixed !important;
 	top: 0px;

}

.pagination-blueprints{
	float: left;
    font-size: 14px;
    width: 100%;
    text-align: right;
    padding: 3px;
    margin-top: 2px;
    
    
}
.pagination-blueprints a{
	margin: 3px;
    padding:2px 3px;
    border-radius: 3px;
		
}

 
@media screen and (max-width: 600px) {
	
	.pagination-blueprints{
	    font-size: 11px;
	    padding: 3px;
	    margin-top: 2px;
	}
	.pagination-blueprints a{
		margin: 2px;
	    padding: 2px;
			
	}
	
}


@keyframes flashing-style {
	0% {
		
	  opacity: 0.2;
	  background-color:#7fe14e;
	  
 	}
	50% {
  		opacity: 1;
 	}
	100% {
		opacity: 0.3;
  
 	}
 
}

.flashPaginationLink{
	animation:flashing-style 0.2s ease 10; 	
}

.persistentBorderSelectPiece{ 
	border:1px solid #7fe14e !important;
}

.selectBlueprintPiece{
	background-color:#7fe14e;
}

.selectCutFromList{
	background-color:#7fe14e !important;
	
}
.block{
	float:left;
	/* height: 38px;*/
	margin-bottom: 3px;
 	border-radius: 3px;
  	width: 100%;
}

.tapacanto {
    float: left;
    width: 50px;
    height: 28px;
    margin:3px;
}

.tapacanto-sec{
    float: left;
    width: 50px;
    height: 28px;
    margin:3px;
	
}

.orientations-classic, .orientations-grains{
	margin-top: 3px;
	float: left;
	padding-left: 3px;
	cursor:pointer;
}

.orientations{
	float:left;
    margin: 4px 2px;
    
}

.orientations-classic .orientation{
	border: 3px solid rgb(0, 102, 255); 
	padding: 2px; 
	float: left; 
}


.orientation, .tapacanto{display:none;}
 
.label-import {
    float: left;
    text-align: left;
   	width: 100%;
}

.label-import .title{
	font-style: normal;
	margin-bottom: 4px; 
	display: inline-block;
	width: 100%;
}

a.tutorial-question {
    font-size: 1.2em;
    margin: 3px 0 3px 0;
    display: inline-block;
    width: 100%;
}

div.tutorial {
    display:none;
    padding: 0 0 0 5px;
    margin-bottom: 10px;
}

div.tutorial .column {
    float: left;
    border: 1px solid #ccc;
    padding: 2px;
    margin: 2px;
    background-color: #ffffff;
}


.notice-dxf{
    float: left;
    text-align: left;
    font-style: italic;
	font-size: 12px;
 	padding: 8px 0 2px 4px;	
}

.choose-unit, .batch-import{
	display:none;
	float:left;
    background-color: #f0f0f0;
    display: none;
    border: 2px solid #dbdbdb;
    padding: 10px;
    margin-top: 10px;
	margin-bottom: 10px;	
 	width: 100%;
}


.maquinas-remove-edit{
	float:left;
}

.add-edit-maquina{
	float:left;
}

.title-head{float:left;}


.doBtn{
	width:100%;
	text-align: center;
	font-size:15px;
	border:2px solid #dbdbdb;
	border-radius: 3px;
	font-weight:bold;
}


#details-after{
	display:block !important;
}

.box-form.green .box-head {
	background-color: #8FD2FE !important;
    border-bottom: 1px solid #C0C0C0;
	color: #054D93;
}

.box-form.blue .box-head {
	background-color: #8FD2FE !important;
    border-bottom: 1px solid #C0C0C0;
    color: #054D93;
}

.box-form.grey .box-head {
	background-color: #8FD2FE !important;
    border-bottom: 1px solid #C0C0C0;
    color: #054D93;
}


.box-form.grey .header{
 
    float: left;
    clear: both;
    width: 100%;
    padding-top: 4px;
 
}

.box-form.grey .product{
	float: left;
 	width: 66%;
    padding-right: 5px;
    border-right: 1px solid #dbdbdb;
}

.box-form.grey .price{
	float: left;
    width: 34%;
    text-align: right;
    overflow: hidden;	
}



.box-form.grey li{
	border-bottom: 1px solid #dbdbdb;
}

.grey li.total{
	
	margin-top: 10px;
    padding-top: 10px;
}


.grey li.total .product{
	font-weight:bold;
}

.box-form.notif-box {
    margin: 0 0 10px 0;
    float: left;
}

.box-form.notif-box .close{
	cursor: pointer;
}

.box-form.notif-box .notice {
    padding:0 4px;
    float:left;
    font-size: 1.1em;
    width: 100%;
}

.box-form.green {
	
	margin-bottom: 10px;
	clear:none !important;
	
}

.box-form-sub{
	border: 2px solid rgb(214, 214, 214);
    background-color: rgb(245, 245, 245);
    border-radius:0px 0px 3px 3px;
    padding:5px;
    
}

.box-form.blue {

	/*min-height: 200px;*/
	margin-bottom: 10px;
	clear:none !important;

}

.box-form.green .envio-email,.box-form.green .select-terminal, 
.box-form.green .guardar-blueprint, .box-form.green .container-print-options,
.box-form.green .dxf-details, .box-form.green .history-changes-menu{
	
	float:left;
	width:100% !important;
 	margin-bottom: 5px;
    
}



.envio-email .text, .envio-email .field, .select-terminal .text, 
.select-terminal .field, .guardar-blueprint .text, .guardar-blueprint .field{
	width:100% !important
}


.box-form li{
	float:left;
	padding:2px;
	width:100%;
    margin: 3px 0;
}

.box-form ul{
	float: left;
	list-style-type: none;
	padding:2px 0 0 0px;
	margin:0px;
	width:100%;
}

.details-r{
	float:left;
	
}

.details-r .link{
	float:left;
	padding:5px;
	width:100%;
	
	
}

.details-r .link span{
	margin-right: 5px;
	
}

.details-r .close{
	float:right;
	margin-right: 10px;
}

.blueprint{
	float:left;
}

.blueprint-container{

	margin-top: 10px;
	font-size:12px;
	width: 100%;
	display:inline-table;
	text-rendering: optimizeSpeed;

}


.blueprint.base{
	background-image: url("../img/background-dark-diagonal-lines.png");	
	width: 300px; 
	height: 150px;
	position:relative;
	border:1px solid #666;
	background-color:#fff;
	float:left	
}


.autosave{
	float: right;
    color: rgb(150, 150, 150);
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    padding-right: 5px;
		
}

.autosave span{
	margin-right: 6px;
}

.autosave .UI{
	
	float: right;
	opacity: 0.7;
	cursor:pointer;
	
}

.autosave .UI:hover{
	opacity: 1;
}


.blueprint.base .loader{
	margin: auto;
	width: 100%;
	font-size: 25px;
	text-align: center;
}


.progress-display {
    float: left;
    width: 100%;
    height: 20px;
}

.progress-display em{
	text-align: center;
	float: left;
	width: 100%;
	font-size: 14px;
	color: #333;
}

.progress-bar{
	float:left;
	height: 3px;
	background-color: #fff000;
	
}

.support-lines{
	float: left;
	font-size: 14px;
	margin-bottom:30px
}



@media screen and (min-width: 0px) and (max-width: 481px) {

	.blueprint{
		font-size:10px;
	}

	
	#MainContainer{ 
		padding:0px;
		min-width:320px;
		width:100%; 
		position:relative;
		margin:0 auto;
	}
			
	.field input[type="text"]{
		/* width: 100%;*/
	}
	

	.tools{
		float:right;
		width:100%;
		
		
	}
	
	.canvas{
		width:100%;
		padding-bottom: 10px;
		display:none;
	}

	
	.box-form{
		padding: 0 2px;
	}


}


@media screen and (min-width: 482px) and (max-width: 786px) {
	.modo.text{
		display:block;
	}

	.blueprint{
		font-size:11px;
	}

	
	.details-r{
		width:50% !important;
	}

	.box-form.details-r.grey, .box-form.details-r.black{
		width:100% !important;
	}	
	
	.canvas{
		width:100%;
		padding-bottom: 10px;
		display:none;
	}
	

	
	.field input[type="text"]{
		/*width: 100%;*/
	}
	

	.tools{
		float:right;
		width:100%;
		
		
	}

	
	#MainContainer{ 
		padding:0px;
		min-width:320px;
		width:100%; 
		position:relative;
		margin:0 auto;
	}
	
	
	.box-form{
		padding: 0 2px;
	}
	
}

@media screen and (min-width: 787px) and (max-width: 1047px) {
	
	.blueprint{
		font-size:11px;
	}

	
	.details-r{
		width:100% !important;
	}

	.box-form.details-r.grey, .box-form.details-r.black{
		width:100% !important;
	}	
	
	
	.tools{
		float:right;
		width:40%;
		
		
	}
	
	.canvas{
		width:60%;
		padding-bottom: 10px;
		display:block;
	 	padding-right: 5px;
	}
	

	
	.field input[type="text"]{
		/* width: 100%;*/
	}
	

	#MainContainer{ 
		padding:0px;
		min-width:320px;
		width:100%; 
		position:relative;
		margin:0 auto;
	}
	
	.box-form{
		padding: 0 2px 0px 0px;
	}
	
}

@media screen and (min-width: 950px) and (max-width: 1000px) {
	.tools{ 
		width:36%;
		
		
	}
	
	.canvas{
		width:64%;
    	padding-right: 5px;
	}
	
	
}

@media screen and (min-width: 1350px) {
	.tools{   
		float: right;
    	width: 24%;
    	margin-bottom: 10px; 
    
	}
	
	.canvas{
		padding-right: 5px;
		width: 76%;
	}
}


@media screen and (min-width: 1048px) and (max-width: 19100px){
	
	.cut-direction {
	    margin-right: 10px;

	}
	
	.blueprint{
		font-size:12px;
	}

	.canvas{
		 
		display:block;
	}



	#details-before{
		display:none;	
		
	}
	
	#details-after{
		display:block;

	}
	
	/* basic structure */
	
	#MainContainer{ 
		 
		position:relative;
		margin:0 auto;
		width:100%;		
		padding:0px;
	}

	#bannerAjaxStatus{
		background-color: #FCD3D3;
		border: 1px solid #F00;
		z-index: 10000;
		padding: 10px;
		width: 50%;
		text-align: center;
		font-size: 15px;
		
	}
	
	.box-form{
		padding: 0 2px 0px 0px;
	}

}


.recorte, .waste{
	background-image: url("../img/background-dark-diagonal-lines.png");
	position: absolute;
	text-align: center;
	/* font-family: Arial;*/
	overflow:hidden;
	
}

.pieza{
	
	position: absolute;
	text-align: center;
	/* font-family: Arial;*/
	overflow:hidden;
	
}



.subdiv{
	
	z-index: 1;
	position: absolute;
    /*background-color:#5ce85c;
	opacity: 0.15; */
	
}

.cCotaW {
	
    position: absolute;
    height: 14px;
	 
}

.cCotaW .cotaW {
    position: absolute;
    width: max-content;
    padding: 3px;
    border-radius: 3px;
    z-index:1000;
}

.cCotaH {
	 
    writing-mode: horizontal-tb;
    white-space: nowrap;
    
    -webkit-transform: translate(14px,0) rotate(90deg);
    -moz-transform: translate(14px,0) rotate(90deg);
    -o-transform: translate(14px,0) rotate(90deg);
    
    
    transform: translate(14px,0) rotate(90deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    position: absolute;
    height: 14px; 
}

.cCotaH .cotaH {
    width: max-content;
    position: absolute;
    padding: 2px;
    border-radius: 3px; 
     
}

.delete-acotation {
    background-color: black;
    width: 30px;
    height: 30px;
    position: absolute;
    display:none;

}

.height-blueprint {
    position: relative;
    font-weight:bold;
    border-color:#9e9e9e;
    border-style:solid;
    border-width:1px 1px 1px 0;
}

.width-blueprint {
    position: relative;
    font-weight:bold;
    border-color:#9e9e9e;
    border-style:solid;
    border-width:1px 1px 0 1px;
    
}

.height-blueprint div{
	writing-mode: horizontal-tb;

	white-space: nowrap;
     
	-webkit-transform: translate(0,0) rotate(90deg);
       -moz-transform: translate(0,0) rotate(90deg);
         -o-transform: translate(0,0) rotate(90deg);
            transform: translate(0,0) rotate(90deg);
            
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;

	width: max-content;
	position: absolute;
}



.height-blueprint div:first-child{

    background-color: #fff;    
    padding: 0 4px;
	
}

.height-blueprint div:nth-child(2) {

	left: 16px;
    text-align: center;

    border-color:#008000;
    border-style:solid;
    border-width:1px 1px 0 1px;
   
    color:#008000;
    font-size: 11px;
}



.width-blueprint div:first-child{
    background-color: #fff;
    width: max-content;
    position: absolute;
    padding: 0 4px;
}

.width-blueprint div:nth-child(2) {
	background-color: #fff;
    top: 8px;
    position: absolute;
    
    border-color:#008000;
    border-style:solid;
    border-width:1px 1px 0 1px;

    color:#008000;
    font-size: 11px;
}

.box-head, .section-name{
	text-align: left;
	float: left;
	width: 100%;
	font-size:16px;
	border-bottom: 1px solid #DBDBDB;
	background-color: #F0F0F0;
	padding:4px 4px 2px 3px;
	margin-bottom: 10px;
    font-weight: bold;
    margin-top: 0;
    color: #353131;
}

h2.box-head{
	float: left;
	width: 100%;
	font-size:18px;
	border-bottom: 1px solid #DBDBDB;
	background-color: #F0F0F0;
	padding: 6px 0px 5px 3px;
	margin-bottom: 20px;
    font-weight: normal;
    margin-top: 0;
}

div.explanation .subtitle{
	margin-bottom: 10px;
}

.explanation{
	
	float: left;
    width: 100%;
    font-size: 12px;
    padding: 0px 4px;
    color: #333;
}


@media screen and (min-width: 0px) and (max-width: 471px) {
	.playeryt{
		width:314px;
		height:177px;
	}
	
	div.explanation .subtitle{
		width:314px;
	}
}

@media screen and (min-width: 472px) and (max-width: 679px) {
	.playeryt{
		width:466px;
		height:263px;
	}
	
	div.explanation .subtitle{
		width:466px;
	}
}

@media screen and (min-width: 680px) and (max-width: 19100px){

	.playeryt{
		width:680px;
		height:384px;
	}
	
	div.explanation .subtitle{
		width:680px;
	}

}

.box-description{
	float: left;
	width: 100%;
	font-size: 12px;
	padding: 6px;
	margin:-20px 0 0 0;

}

/**
*	CONFIG PART BELOW
*/

#change-pass{
	cursor: pointer;
	font-size: 12px;
	font-weight:bold;
	padding-top: 4px;
	text-align: left;
}

.box-password, .box-cuenta{
	float: left;
	width: 50%;
    min-height: 500px;
}

div#block-facturacion {
    float: left;
    background-color: #eee;
    border-radius: 4px;
    padding: 4px;
    display: none;
    width: 100%;
}

div#block-password{
	
	float: left;
    float: left;
    background-color: #eee;
    border-radius: 4px;
    padding: 4px;
    display: none;
    width: 100%;	
}

.box-cuenta{
	
	padding: 0 5px 0 0;
	border-right:2px solid #dbdbdb;
	
	
}

.box-password {
    padding: 0 0 0 5px;
}


@media screen and (max-width: 800px){
	
	.box-password, .box-cuenta{
		float: left;
		width: 100%;
		min-height:0;
		
	}
	
	.box-cuenta{
		margin-bottom: 30px;
		
	}	
}

.box-presupuesto{
	float: left;
	width: 100%;
}

.box-terminales{
	float: left;
	width: 100%;
}

.multi-checkbox label input {
    width: 20px;
}

.multi-checkbox label {
	width: 100%;
    float: left;
    cursor: pointer;
}

.instructions-terminal{
	margin:0 auto;
	width: 100%;
	clear: both;
	padding: 20px 0px;
	font-size: 14px;
}

.instructions-terminal em{
	font-style: normal;
}

.instructions-terminal div.item{
	margin: 4px 0;
}

.optimizationCheckout{
	display: flex;
	padding: 10px;
	border: 1px solid #f79b20;
	border-radius: 6px;
	background-color: #f7c54f;
	font-size: 0.9rem;
	font-weight: bold;
	width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.optimizationCheckout .cart{
	margin-left: 10px;
}

.checkOutText {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    color: #373737;
    font-size: 0.7rem;
    text-align: center;
}

textarea[name="checkout-text"]{
	resize:vertical;
 	 
}
.form-add-web, .form-add-terminal, .form-add-api{ display:none; }

.callback-url .callback-label {
    font-size: 1rem;
    font-weight: bold;
    padding: 3px 0;
    display: inline-block;
}

.form-add-callback, .callback-url{
	float: left;
	width: 100%;
	padding: 3px 5px;
	border:2px solid rgb(45, 156, 191);
	border-radius: 4px;
	margin-top: 5px;
	background-color: #eee;
}

.form-add-callback .explanation{
	float: left;
	width: 100%;
	margin-top: 15px;
 	word-break: break-word;
}

.callback-url .checkout-text{ 
    max-height: 60px;
    font-family: Roboto;
    resize: none !important;
}

.list-terminales, .list-api, .list-web{
	width: 100%;
	float: left;
	margin-bottom: 50px;
	border-bottom: 2px solid #dbdbdb;
}



.block-list{
	width: 62%;
	float: left;
}


.list-loader{
	display:none;
	background-color: #fff;
}

.list-terminales .tbl-head, .list-api  .tbl-head, .list-web .tbl-head{
	float: left;
	width: 100%;
	font-size: 14px;
	font-weight:bold;
	height: 30px;
	border-bottom: 1px solid rgb(219, 219, 219);
	background-color: rgb(240, 240, 240);	
}

.list-terminales .tbl-row, .list-api  .tbl-row, .list-web .tbl-row{
	float: left;
	width: 100%;
	height: 30px;
	border-bottom: 1px solid rgb(219, 219, 219);	
	
}

.list-web .tbl-row-code{
	float: left;
	width: 100%;
	border-bottom: 1px solid rgb(219, 219, 219);
	 
	display:none;	
	
}

.list-api .tbl-row-code{
	float: left;
	width: 100%;
	border-bottom: 1px solid rgb(219, 219, 219);
 	padding: 10px;
	display:none;	
	
}

.list-web .code-title{
    font-size: 14px;
    float: left;
    width: 100%;
    margin: 5px 0;
    font-weight:bold;
}

.list-web .code-row{
	
    font-size: 10px;
    float: left;
    border: 1px solid #ccc;
    margin: 5px 0;
    padding: 5px;
		
}

.list-web .link-title{
	
	float: left;
	width: 100%;
    font-weight: bold;
    font-size: 14px;
    margin-top: 4px;
}

.list-web .link-url {
    float: left;
    margin-bottom: 10px;
    width: 100%;
    padding: 4px;
}

.list-terminales .tbl-column.fecha-creado, .list-api  .tbl-column.fecha-creado, .list-web .tbl-column.fecha-creado{
	font-size:11px;
}
.list-terminales .tbl-column.fecha-acceso, .list-api  .tbl-column.fecha-acceso, .list-web .tbl-column.fecha-acceso{
	font-size:11px;
}

.list-terminales .tbl-column, .list-api  .tbl-column, .list-web .tbl-column{
	float: left;
	width: 25%;
	height: 30px;
	padding: 6px;	
	overflow:hidden;
}

.list-terminales .tbl-column span, .list-api  .tbl-column span, .list-web .tbl-column span{
	margin-left: 15px;
}

.add-terminales .box-form, .edit-terminales .box-form, .add-api  .box-form, .add-web .box-form {
	margin: auto;
	width: 100%;
}

.add-terminales, .edit-terminales, .add-api, .edit-api, .add-web, .edit-web{
	width: 37%;
	float: right;
	padding-bottom: 10px;
	clear:right;
}

.edit-terminales,.edit-api,.edit-web{
	display:none;
}

@media screen and (min-width: 0px) and (max-width: 786px){
	.list-terminales, .list-api, .list-web{
	    width: 100%;
	    float: left;
	    min-height:0;
	}	
	.add-terminales, .edit-terminales, .add-api, .edit-api, .add-web, .edit-web {
	    width: 100%;
	    float: right;
	}
	
	.block-list{
		width: 100%;
		float: left;
	}
}

@media screen and (min-width: 0px) and (max-width: 470px){
	
	.list-terminales .tbl-row, .list-api  .tbl-row, .list-web .tbl-row{
	    height: 40px;
	}	
	
	.list-terminales .tbl-column, .list-api  .tbl-column, .list-web .tbl-column{
	    height: 40px;
	}
	
	.list-terminales .tbl-column.usuario, .list-api  .tbl-column.usuario, .list-web .tbl-column.usuario{
		width: 31%;
	}
	
	.list-terminales .tbl-column span, .list-api  .tbl-column span, .list-web .tbl-column span{
		margin-left: 5px;
	}
	
	.list-terminales .tbl-column.accion, .list-api  .tbl-column.accion, .list-web .tbl-column.accion{
		width: 19%;
	}
	
}


.history-changes-menu .list{
    overflow-y: auto;
    float: left;
    width: 100%;
    max-height: 200px;
    border: 1px solid #dbdbdb;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.history-changes-menu .tbl-head{
	float: left;
	width: 100%;
	font-size: 12px;
	font-weight:bold;
	height: 25px;
	border-bottom: 1px solid rgb(219, 219, 219);
	background-color: rgb(240, 240, 240);
	
	padding-right: 18px; /* accounting for the scroll width in the list below*/
}
 
 
.history-changes-menu .footer {
    float: left;
    padding: 5px;
    width: 100%;
    border-bottom: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
    border-right: 1px solid #dbdbdb;
}
		
.footer em{
	width: 100%;
    float: left;
    margin: 3px;
    padding-top: 3px;
}

.footer em span{
	margin-right:5px;	
 	margin-top:-2px;
	
}	

				
.tbl-row:hover{
	border-color:rgb(155, 152, 152);
}	
			
.history-changes-menu .tbl-row{
	float: left;
	width: 100%;
	height: 26px;
	border-bottom: 1px solid rgb(219, 219, 219);	
	cursor: pointer;
	font-size:11px;
}

.history-changes-menu .tbl-column{
	float: left;
	height: 26px;
	padding: 6px;
	overflow: hidden;
}


.history-changes-menu .tbl-column.waste2{
	width: 17%;
}

.history-changes-menu .tbl-column.offcuts{
	width: 17%;
}

.history-changes-menu .tbl-column.pieces{
	width: 14%;
}

.history-changes-menu .tbl-column.qty{
	width: 13%;
}

.history-changes-menu .tbl-column.date{
	width: 24%;
	display:block;
}

.history-changes-menu .tbl-column.select-version{
	width: 9%;
	display:block;
}


.history-changes-menu .tbl-column.loader{
	width: 9%;
}



.tbl-column img.loader{
    margin: -3px 0 !important;
}



/**
* CONFIG PART END HERE.
*
* PROYECTOS BELOW
*/

.box-proyectos{
	float: left;
	width: 100%;
}

.search-proyectos .box-form{
	margin: auto;
	width: 100%;
}

.list-proyectos{
	
	width: 75%;
	float: left;
	padding-right: 4px;
}


.search-proyectos{
	width: 25%;
	float: right;
	padding-bottom: 10px;
}

.list-proyectos .lista{
    overflow-y: auto;
    float: left;
    width: 100%;
}

.list-proyectos .tbl-head{
	float: left;
	width: 100%;
	font-size: 14px;
	font-weight:bold;
	height: 30px;
	border-bottom: 1px solid rgb(219, 219, 219);
	background-color: rgb(240, 240, 240);	
}
 
							
.tbl-row:hover{
	border-color:rgb(155, 152, 152);
}	
			
.list-proyectos .tbl-row{
	float: left;
	width: 100%;
	height: 30px;
	border-bottom: 1px solid rgb(219, 219, 219);	
	cursor: pointer;
}

.list-proyectos .tbl-column{
	float: left;
	height: 26px;
	padding: 6px;
	overflow: hidden;
}


.tbl-column.accion .progress {
    float: left;
    overflow: hidden;
    color: mediumseagreen;
    padding: 2px;
    margin-left: 5px;
    background-color: aliceblue;
    border-radius: 2px;
    border: 1px solid;
    margin-top: -1px;
}

.closeSearch{
	
	position: absolute;
    margin: 9px;
    cursor:pointer;
    
}
 
.list-proyectos .tbl-column.ocupado{
	width: 3%;
}

.list-proyectos .tbl-column.ID{
	width: 11%;
}

.list-proyectos .tbl-column.cliente{
	width: 19%;
}

.list-proyectos .tbl-column.descripcion{
	width: 40%;
}

.list-proyectos .tbl-column.fecha{
	width: 14%;
	display:block;
}

.list-proyectos .tbl-column.accion{
	width: 11%;
}

.list-proyectos .tbl-column.accion span {
    margin: 0px 3px;
}

.list-proyectos .tbl-column.accion .historyChanges{
	font-family:"Courier New";
 	font-size: 11px;
}

.list-proyectos .tbl-row:hover{
	background-color: #f2f2f2;
}

/** Facturacion area **/

.list-factura{
	width: 100%;
    display: table;
    vertical-align: top;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}


.list-factura .tbl-head{
	float: left;
	width: 100%;
	font-size: 14px;
	font-weight:bold;
	height: 30px;
	border-bottom: 1px solid rgb(219, 219, 219);
	background-color: rgb(240, 240, 240);	
}

.list-factura .tbl-row{
	float: left;
	width: 100%;
	height: 30px;
	border-bottom: 1px solid rgb(219, 219, 219);	
	cursor: pointer;
}

.list-factura .tbl-column{
	float: left;
	height: 22px;
	padding: 6px;
	overflow: hidden;
}

.list-factura .tbl-column.ID{
	width: 30%;
 	min-width: 240px;
}

.list-factura .tbl-column.fecha{
	width: 30%;
	display:block;
	min-width: 160px;
}

.list-factura .tbl-column.accion{
	width: 4%;
 	float: right !important;
}

a.link-invoices {
    font-size: 14px;
    padding: 4px;
    float: left;
    width: 100%;
    font-weight:bold;
}

@media screen and (min-width: 430px) and (max-width: 861px) {
	.list-factura{
		
		max-width:100%;
		
	}
}
 


@media screen and (min-width:1900px) {
	.list-factura{
		max-width:700px;
	}
}
 

@media screen and (min-width:0px) and (max-width: 430px) {

	.list-factura{
		width: 100%;
		max-width: 100%;	
	}
	
	.list-factura .tbl-column.ID {
	    width: 58%;
	    min-width:0 !important;
	}
	
	.list-factura .tbl-column.fecha {
	    width: 33%;
	    display: block;
	    min-width:0 !important;
	}		
	
	.list-factura .tbl-column.accion {
	    width: 8%;
	}	
	
}
 

@media screen and (min-width: 0px) and (max-width: 540px){
	
	.list-proyectos .tbl-column{
		font-size:10px;
		padding: 6px 2px;
	}
	
	
	.list-proyectos .tbl-row {
	    height: 40px;
	}	
	
	.list-proyectos .tbl-column {
	    height: 34px;
	    overflow: hidden;
	}
	
	

	.list-proyectos .tbl-column.ocupado{
		width: 4%;
	}
	
	.list-proyectos .tbl-column.ID{
		width: 20%;
		font-size: 10px;
	}
	
	.list-proyectos .tbl-column.cliente{
		width: 29%;
	}
	
	.list-proyectos .tbl-column.descripcion{
		width: 32%;
	}
	
	.list-proyectos .tbl-column.fecha{
		width: 15%;
		display:none;
	}
	
	.list-proyectos .tbl-column.accion{
		width: 14%;
	}
	
	.list-proyectos .tbl-column.accion span {
	    margin-left: 0 !important;
	}
		
	
}





@media screen and (min-width: 0px) and (max-width: 786px){
	
	.list-proyectos {
	    width: 100%;
	    float: left;
	    min-height:0;
	    padding-right:0px;
	}	
	.search-proyectos{
	    width: 100%;
	    float: right;
	}
}


.maker{ display:block}


/**
* PROYECTOS END HERE
*
* FACTURACIoN START BELOW
*/

.payment-methods{
	
 	display: inline-block;
    text-align: center;
	width: 100%;
 	margin-bottom: 20px;
}

.payment-methods .img{
	
	max-width: 320px;
	margin: 20px 80px;

}
	
.payment-methods .note{
	float: left;
	padding: 20px 5px;
}
	
.payment-methods .main{
	float: right;
	width: 46%;
	font-size: 22px;
}


.payments-methods{
    float: left;
    width: 100%;
    text-align: left;
}

.payments-methods .payment-icon{
	transform: translate(-25%, -25%) scale(0.5, 0.5);
}

.payments-methods .payment-gateway{
	font-size: 1.5rem;
    border-bottom:2px solid #2d9cbf;
    color: #333333;
    padding: 4px;
    box-shadow: 0px 1px 2px #4c4c4c45;
    float: left;
	width: 100%;
}

.payments-methods .payment-country{
	color: #2d9cbf;
	float: left;
	font-size: 1.3rem;
	margin-left: 10px;
	margin-top: 5px;
}

.payments-methods .payment-type{
	color: #4a9625;
    font-size: 1rem;
    padding-top: 10px;
    float: left;
    padding: 10px 5px;
    width: 100%;
}

.payments-methods .payment-logos{
	margin: 10px 0 5px 0;
	float: left;
	display:none;
}
 

.payments-methods .payment-acreditation-wait{
	padding: 4px 15px;
    color: #0897e3;
    float: left;
    width: 100%;
    font-size: 13px;
    
}

.mercadopago{
    margin-bottom: 0px !important;
    float:left
}

.paypal{
    margin-bottom: 0px !important;
    float:left
}


div.plans, .facturacion-payment, .facturacion-link, .details-plan{
	width:100%; 
    display:table;
    vertical-align: top;
    
}


.due-date {
    text-align:right;
}

.plan-name {
    text-align:right;
}

.details-plan {
    font-size: 14px;
    text-align: right;
    border-bottom: 3px solid #dbdbdb;
    padding-bottom: 4px;
    margin-top: 10px;
}

@media screen and (min-width: 600px){
	
	div.plans, .facturacion-payment, .facturacion-link, .details-plan{
		max-width: 600px;
		margin-left: auto;
    	margin-right: auto;
	}
	
}


.facturacion-payment, .facturacion-link{
	
    margin-top: 20px !important;
    padding: 4px;
    border-radius: 5px;	
    
}

.img-pp,.img-mp{
	
	clear: both;
	margin: 0px auto;
	width: 320px;
}

.img-pp img, .img-mp img{
	width: 100%;
	max-width: 320px;
}

.billing-steps{
	float: left;
	width: 100%;
	font-size: 16px;
	margin-bottom: 10px;
	margin-top: 10px;
	color: #000000;
	border-bottom: 3px solid #777;
	padding-bottom: 5px;
	font-weight:bold;
	text-align: left;
}

.payment-option {
    float: left;
    width: 50%;
    padding: 10px 3px;
    cursor:pointer;
    
}

.payment-option:nth-child(even){
	border-right: 1px solid #ccc;
}

.billing-provider{
	font-size: 14px;
	font-style: normal;
	padding: 10px 0px;
	float: left;
	width:100%;
	text-align: center;
}


@media screen and (min-width: 0px) and (max-width: 380px){
	.payment-option {
		
		padding-left:2px;
		padding-right:2px;
		
	}
	
	.img-pp,.img-mp{
		width: 300px;
	}
}

@media screen and (min-width: 0px) and (max-width: 728px){

	.payment-option {
		width:100%;
	}
	
	.payment-option{
		border-right:none;
	}
	
	.payment-option:nth-child(even){
		border-right:none;
		border-bottom:1px solid #ccc;
	}
	
	
}


.box-facturacion {
    float: left;
    width:100%;
    text-align: center;
}


.box-facturacion .label {
    font-size: 22px;
    padding:10px 4px 4px 4px;
    float: left;
    font-weight:bold;
    color: #2d9cbf;
    
}

.box-facturacion .link-features{
	float: left;
 	padding: 0px 0px 6px 6px;
    clear: both;
    text-decoration: underline;
}

.box-facturacion .tbl-column a {
    font-size: 12px;
    float: left;
    padding: 5px;
}

.box-facturacion .tbl-row.last {
    margin-bottom: 40px !important;
}


.tbl-column .title {
    font-size: 16px;
    float: left;
    padding: 4px;

}

.description .label2 {
    float: left;
    padding: 0 0px 0 7px;
    font-size: 14px;
    text-align: left;
    width: 90%;
}

.description .option {
    float: left;
    width: 100%;
    padding: 4px 0 0 16px;
}

.box-facturacion .description {
    float: left;
    clear: both;
    width: 100%;
    display:none;
    padding: 10px 0;
}

.plans .tbl-head{
	float: left;
	width: 100%;
	font-size: 14px;
	font-weight:bold;
	border-bottom: 1px solid rgb(219, 219, 219);
	background-color: rgb(240, 240, 240);	
}

.plans .tbl-row{
	float: left;
	width: 100%;
	border-bottom: 1px solid #bfbfbf;	
	font-size: 14px;
	
}

.plans .tbl-column{
	float: left;
	padding: 6px;
	text-align: center;	
	font-size: 17px;
}


.plans .tbl-column.A{
	width: 50%;
	text-align: left !important;
}

.plans .tbl-column.B{
	width: 25%;
}

.plans .tbl-column.C{
    width: 50%;
}



.plans .tbl-column.D{
	width: 33%;
}

@media screen and (max-width: 600px){
	
	.box-facturacion .label {
    	font-size: 19px;
	}
	
	.plans .tbl-column {
	    padding: 4px;
	    font-size: 15px;
	}	
    
}

.plans .choose,.plans .choose-free{
	cursor:pointer;

	
}

@media screen and (min-width: 0px) and (max-width: 489px){

	.title-blueprint {
	    float: left;
	    font-size: 15px;
	    width: 100%;
	    margin-bottom: 3px;
	}	
	
	.subtitle {
	    float: left;
	    width: 58%;
	    text-align: left;
	    padding: 5px 2px 0px 0;
	    font-size: 12px;
	}
	
	.versions {
    	float: left;
	}
	
	.versions:nth-of-type(1){
	    margin-left:0px !important;
	}	
}


div.cancel{
	float:left;
	width: 100%;
}

.cancel .message, .destroy .message{
	float:left;
	width:100%;
	font-size: 15px;
	padding:10px
	
}

div.destroy{
	float:left;
	width: 100%;
	
}



@media screen and (min-width: 0px) and (max-width: 500px){
	
	.cancel .message, .destroy .message{
		font-size: 12px;
		
	}
	
}



.registro-completo, .registro-incompleto, .recover-completo, .soporte-completo{
	display:none;
}


.btnLoader{
	display:none;
}

.loader{
	margin-top: 0px;
	float: right;
}



.login-wait{
	display:none;
	margin: auto;
	width: 30%;
	min-width:50px;
	max-width:198px;

}

.login-wait .img{
	margin:60px auto;
	width: 100%;
}


.form-login .options-login{
 
    float: left;
    margin: 10px 0;
    font-size: 15px;
    font-weight:bold;
    clear: both;
	
}


.box-html{
	font-size: 17px;
	float:left;
}
.box-registro{
    float: left;
    width: 100%;
}
.system-msg, .form-msg{

	float: left;
	background-color: #FFBD00;
	width: 100%;
	border: 1px solid #FFB400;
	border-radius: 3px;
	margin-bottom: 5px;
	display: none;
	font-size: 18px;
	color: #383838;
	text-align: left;
	padding: 5px;		
}


@media screen and (min-width: 0px) and (max-width: 600px){
	
	.system-msg, .form-msg{
		font-size: 14px;
	}
	
	
}



.mini-table {
    float: left;
    width: 100%;
}

.mini-table .head {
    float: left;
    width: 100%;
    font-size: 12px;
    padding: 4px;
}

.mini-table .row {
	float: left;
	width: 100%;
	border-bottom: 1px solid #DBDBDB;
	padding: 6px 2px 5px 2px;
}

.mini-table .row:nth-child(even){
	background-color:rgba(255, 225, 0, 0.17);
}

.mini-table .column {
    float: left;
}

.mini-table .column.nombre {
    width: 80%;
}

.mini-table .column.accion {
    width: 20%;
}

.mini-table .column.accion span{
    margin:0 3px;
    cursor:pointer;
}

.mini-table .column.accion span:first-child{
	margin-left:0px !important;
}

.mini-table .column.accion span:last-child{
	margin-right:0px !important;
}

.mini-table.materiales-remove-edit{
    overflow-y: auto;
    height: 600px;
	
}

.usage{ 
	float:left; 
	width: 16px; 
	height: 16px;
}


footer {
    position: relative;
    height: 4em !important;
    float: left;
    width: 100%;
    border-top:2px solid #FFF000;
    padding-top:20px;
    margin-top:5px;
    background-color:#ffffff;
}


footer a{
	padding: 2px 5px;
	width: 16.4%;
	float: left;
	text-align: center;
}


@media screen and (min-width: 0px) and (max-width: 500px){
	
	footer a{
		padding: 2px 5px;
		width: 50%;
		float: left;
		text-align:left;
	}
	
	

}

@media screen and (min-width: 501px) and (max-width: 1000px){
		
	footer a{
		padding: 2px 5px;
		width: 33%;
		float: left;
		text-align:left;
	}

}


@media screen and (min-width: 0px) and (max-width: 320px){
	
	footer a {
	    width: 100%;
	    float: left;
	    text-align: left;
     	padding: 5px 10px;
	    font-size: 13px;
	}
	
}


a.email-address, a.wsp-number {
    font-weight:bold;
}

#lblMatSelect{display:none;}


/** 2select styling **/
.select2-container--default .select2-selection--single{
	border-radius: 3px !important; 
    background-color: white !important;
    color:black !important;
    border: 2px solid #dbdbdb !important;
    height: auto !important;
}

.select2-selection--single:hover{
    border: 2px solid #737373 !important;
    transition: all 0.5s cubic-bezier(0.58, 0.01, 0.01, 0.99);
}

.select2-selection--single:focus{
	border-radius: 3px !important;
    border: 2px solid #ff9900 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
	color:black !important;
	padding: 4px 20px 4px 8px !important;
 	font-size:15px !important;
 	line-height: normal !important;
}

.select2-results__option[aria-selected] {
    font-size: 15px !important;
}


.select2-dropdown{
	background-color: white !important; 
    border-radius: 3px !important;
   	border-left: 2px solid #dbdbdb !important;
    border-right: 2px solid #dbdbdb !important;
    border-bottom: 2px solid #dbdbdb !important;
}

@media screen and (min-width: 0px) and (max-width: 499px){
	
	.select2-container--default .select2-selection--single .select2-selection__rendered{
	    font-size: 12px !important;
		padding:2px 2px 2px 5px !important;
	}
	
	.select2-container--default .select2-selection--single .select2-selection__arrow {
    	height: 20px !important;
	}
	
	.select2-results__option[aria-selected] {
	    font-size: 12px !important;
	}
	
	
		
}

@media screen and (min-width: 482px) and (max-width: 786px){
	
	#lblMatSelect{display:block;}

	.select2-results__option[aria-selected] {
	    font-size: 14px !important;
	}

	.select2-container--default .select2-selection--single .select2-selection__rendered{
	    font-size: 14px !important;
		padding:4px 4px 4px 7px !important;
	}
	
}


@media screen and (min-width: 1501px){
	.select2-container--default .select2-selection--single .select2-selection__rendered{
	    font-size: 17px !important;
	    padding: 4px !important;
	}

}

#lblSecEdg{
	width:auto !important;
}

@media screen and (min-width: 499px) and  (max-width: 786px){
	
	#lblSecEdg{
		width:50% !important;
	}
	
}