@font-face{
	src: url(font/Montserrat-Regular.ttf);
	font-family: mon;
}

*{
	margin: 0;
	padding: 0;
}

#category h4{
	font-size: 1.55rem;
}

.check-with-label{
	display: none;
}

.check-with-label:checked + .label-for-check {
  background-color: #921036;
}

#windowModels div:first-child {
    margin-right: 20px; /* limits the scope of the previous rule */
}

#windowModels{
	display: flex;
}

.label-for-check{
	width: 180px;
	background-color: #cf003d;
	color: white;
	height: 60px;
	border-radius: 6px;
	display: flex;
    justify-content: center;
    align-items: center;
	cursor: pointer;
}

.actionsPvc{
	margin-top: 20px
}

.buttonPvcDor{
	background-color: #cf003d;
    color: #ffffff;
    padding: 10px;
    border-radius: 3px;
    border-width: 0px;
    padding-left: 15px;
    padding-right: 15px;
    cursor: pointer;
    width: auto;
    width: 160px;
    text-align: center;
}

.buttonPvcDor:focus{
	outline: none;
}

.actionsPvc button{
	background-color: #cf003d;
    color: #ffffff;
    padding: 10px;
    border-radius: 3px;
    border-width: 0px;
    padding-left: 15px;
    padding-right: 15px;
}

.custom-file-upload {
	background-color: #b80439;
    display: inline-block;
    padding: 10px;
    cursor: pointer;
	color: white;
	border-radius: 5px;
	margin-top: 10px;
}

.typeFileInput{
	background-color: #cf003d;
	color: white;
}

input[type="file"] {
    display: none;
}


.pvcButton{
	cursor: pointer;
	color: white;
	border: none;
	padding: 7px;
	background-color: #cf003d;
	color: white;
	border-radius: 5px;
}

.pvcButton:focus{
	cursor: pointer;
	color: white;
	outline: none;
}

.pvcButton:hover{
	cursor: pointer;
	color: white;
	background-color: #b80439;
}


.collpaseCategory{
    position: absolute;
    right: 10px;
    cursor: pointer;
}

.download-table:before{
	content: url("../images/icons/download.svg");
}

.collpaseCategoryDown{
    content: url("../images/icons/down.svg");
    margin-top: -4px;
}

.collpaseCategoryUp{
    content: url("../images/icons/up.svg");
    margin-top: -4px;
}

.collapseDivActive{
    display: none;
}

.collapseDivDeactive{
    display: block;
}

.removeUploadImagee{
	margin-top: 15px;
	background-color: #cf003d;
	color: #ffffff;
	padding: 6px; 
	border: none;
	outline: none;
	border-radius: 4px;
	display: none;
}

.removeUploadImageeEdit{
	margin-top: 15px;
	background-color: #cf003d;
	color: #ffffff;
	padding: 6px; 
	border: none;
	outline: none;
	border-radius: 4px;
	display: none;
}

#deleteOffer .row {
    margin-right: 0px;
    margin-left: 0px;
    float: right;
    margin-bottom: 15px;
}

#editProduct .detailProduct{
    margin-top: 10px;
}

label {
    display: inline-block;
    margin-bottom: .5rem;
    font-weight: 600 !important;
}


.footer p{
	font-size: 14px;
    text-align: center;
    padding: 6px;
}

.header-content{
	text-align: right;
}

.header-content img{
	opacity: 0.7;
	transition: 0.6s;
	cursor: pointer;
}

.header-content img:hover{
	opacity: 1;
}

/******************************OFFER***********************/
.customProduct:focus{
	outline: none;
}
.offerFooter{
	margin-top: 40px;
	width: 920px;
	display: grid;
	grid-template-rows: auto auto auto auto auto;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 15px;
}

.note{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

.bruto{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
}

.ulaz{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
}

.rokovi{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 4;
	grid-row-end: 5;
}

.garancije{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 5;
	grid-row-end: 6;
}



.ponuduSastavili{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 4;
}

#buyerData{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-column-gap: 10px;
}

#construction{
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 1;
	grid-row-end: 2;
}

#contactPerson{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
}

#contactPhone{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
}

#contactEmail{
	grid-column-start: 3;
	grid-column-end: 5;
	grid-row-start: 2;
	grid-row-end: 3;
	grid-column-gap: 0px;
}


.imageOfferProduct img{
	max-height: 150px;
}

.inputPriceOffer{
	margin-bottom: 10px;
}

.detailOfferProduct{
	margin-top: 20px;
}
#generatePdfForm .name{
	display: grid;
	grid-template-rows: 1fr;
}

#generatePdfForm .input-name{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
}

#generatePdfForm .describe-input{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

#generatePdfForm .describe-input{
	margin-left: 10px;
}

#generatePdfForm .describe-input p{
	text-transform: uppercase;
	color: red;
	padding: 10px;
}

#generatePdfForm .input-name .form-control{
	border-radius: 0px;

}

#generatePdfForm .comapanyData{
	color: #cf003d;
	font-size: 24px;
	margin-bottom: 5px;
}

.line{
	height: 2px;
	background-color: #f2f2f2;
	margin-bottom: 10px;
	width: 50%;
}

#generatePdfForm .header{
	display: grid;
	grid-template-rows: 1fr auto;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

#generatePdfForm .header .logo{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	border: 2px solid #f2f2f2;
}

#generatePdfForm .header .detail{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	border: 2px solid #f2f2f2;
}

#generatePdfForm .header .companyDetail{
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;
	border: 2px solid #f2f2f2;
}

#generatePdfForm .header .nameOffer{
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
}
/******************************OFFER***********************/

#parent{
	cursor: pointer;
}

#parent input{
	cursor: pointer;
}

.subCategorySelect{
	width: 50%;
	margin-bottom: 20px;
}

.categorySave{
	background-color: #2f2f2f;
	padding: 10px;
	text-transform: uppercase;
	color: #ffffff;
	border: none;
	border-radius: 7px;
}

html, body{
	height: 100%;
	width: 100%;
	font-family: mon;
	line-height: 1;
}

#parent{
	list-style: none;
	width: 300px;
}

#tezina:checked {
    
   	background-color: #2f2f2f;
   		color: #ffffff;
    

}

#tezina:before{
  background-color:red;
}
#tezina:checked~#tezina::before{
  background-color:black;
}

.categoryLi{
	background-color: #cf003d;
}

.editC.icon-edit, .editsC.icon-edit, .editC.icon-delete, .editsC.icon-delete{
	padding: 7px;
}

.editC.icon-delete:before{
	cursor: pointer;
	color: #ffffff;
	font-size: 12px;
}

.editsC.icon-delete:before{
	cursor: pointer;
	color: #cf003d;
	font-size: 12px;
}

.editC.icon-edit:before{
	cursor: pointer;
	color: #ffffff;
	font-size: 12px;
}

.editsC.icon-edit:before{
	cursor: pointer;
	color: #cf003d;
	font-size: 12px;
}

.categoryLi input{
	border: none;
	padding: 7px;
	background-color: #cf003d;
	color: #ffffff;
	text-transform: uppercase;
}

.subCategoryLi input{
	border: none;
	padding: 7px;
	background-color: #ffffff;
	color: #000;
	text-transform: capitalize;
}

.subCategoryLi{
	background-color: #ffffff;
}

.subcategory{
	list-style: none;
}

.treeDetails h3{
	text-transform: uppercase;
}



.categoryForm .row, .subCategoryForm .row{
	margin-left: 0px;
	margin-right: 0px;
}

.categoryForm, .subCategoryForm{
	margin-bottom: 50px;
}

.categoryForm input, .subCategoryForm input{
	
	padding: 6px;	
}

.categoryForm input[type=text], .subCategoryForm input[type=text]{
	margin-right: 10px;
}

.categoryForm input[type=text]:focus, .subCategoryForm input[type=text]:focus, .subCategoryForm select:focus{
	
	outline: none;
}

.categoryForm input[type=submit], .subCategoryForm input[type=submit]{
	background-color: #cf003d;
	color: #ffffff;
	border-radius: 3px;
	border-width: 0px;
	padding-left: 15px;
    padding-right: 15px;
}

.categoryForm input[type=submit]:focus, .subCategoryForm input[type=submit]:focus{
	outline: none;
}



.subCategoryForm select{
	
	margin-right: 10px;
}



.dsa{
	font-family: mon;
}

.camp .link{
	color: #000000;
}


#login{
	height: 100%;
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	grid-template-columns: 1fr auto 1fr;
	background-color: #191919;

}

.login-content {
    width: 350px;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    display: grid;
    grid-template-rows: 100px 1fr;
    grid-template-columns: 1fr;
    grid-row-gap: 15px;
}

#login .login-content .logo{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	text-align: center;
}



.loginForm{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
}

a:hover {
    text-decoration: none;
}

.loginForm input{
	width: 100%;
	border-radius: 10px;
	height: 45px;
	margin-bottom: 20px;
	border: none;
	padding-left: 10px;
}

.loginForm input:focus{
	outline: none;
}

.loginForm .loginButton{
	text-align: center;
}

.loginForm .loginButton button{
	width: 50%;
	background-color: #cf003d;
	border: none;
	border-radius: 10px;
	color: white;
	height: 45px;
	-webkit-transition: background-color 0.4s;
}

.loginForm .loginButton button:focus{
	outline: none;
}

.loginForm .loginButton button:hover{
	transition-duration: 0.4s;
	background-color: #b80439;
}

.loginForm .forgetPasswordButton{
	text-align: right;
}

.loginForm .forgetPasswordButton a{
	color: #b80439;
	padding-right: 0px;
	text-decoration-style: none;
}

.loginForm .forgetPasswordButton a:hover{
	color: #b80439;
	padding-right: 0px;
	text-decoration:none;
}

.containerr{
	height: 100%;
	display: grid;
	grid-template-columns: 200px 1fr;
	grid-template-rows: 70px 1fr 35px;
}

.header{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	background-color: white;
	color: black;
	display: grid;
	grid-template-columns: 200px 1fr;
	grid-template-rows: 70px;
}

.appName{
	display: flex;
  	justify-content: center;
  	align-items: center;
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	border-bottom: 1px solid #f5f5f5;
}

.appName img{
	width: 80%;
}

.rest{
	padding: 20px;
	border-bottom: 1px solid #f5f5f5;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

.editUserBtn{
    background-color: #cf003d;;
    border-color: #cf003d;;
    color:#ffffff;
}

.editUserBtn:focus{
    background-color: #cf003d;;
    border-color: #cf003d;
}

.editUserBtn:active{
    background-color: #cf003d;
    border-color: #cf003d;
}

.editUserBtn:hover{
    background-color: #b80439;
    border-color: #b80439;
    color: #ffffff;
}

.sidebar{
	color: #ffffff;
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 4;
	background-color: #191919;
	width: 200px;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 1fr 35px;
}

.nav{
	grid-column-start: 1;
	grid-row-start: 1;
	grid-column-end: 2;
	padding-top: 20px;
	padding-left: 10px;
}

.nav nav ul{
	text-decoration-style: none;
}

.nav nav ul li a{
    font-size: 20px;
	color: #ffffff;
}

.nav nav ul li a:hover{
	text-decoration: none;
}

.sidebarFooter{
	grid-column-start: 1;
	grid-row-start: 2;
	grid-column-end: 3;
	padding: 5px;
	padding-left: 10px;
}


.main-content{
	color: black;
	padding: 20px;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	background-color: #ffffff;
	overflow: auto;
}

.footer{
	color: #ffffff;
	padding: 5px;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 4;
	background-color: #cf003d;
}

.openbtn{
	display: none;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #cf003d; 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #cf003d;
  opacity: 0.4;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #cf003d; 
}

#usersTable table td{
	border: 2px solid #ffffff;

}

.tableHeader{
	color: #ffffff;
	background-color: #cf003d;
}

.tableHeaderr{
	color: #ffffff;
	background-color: #b80439;
}

#usersTable thead tr td{
	padding: 8px;
	font-weight: normal;
}

#usersTable{
	position: relative;
}

#usersTable tbody tr .field{
	padding: 8px;
	font-weight: normal;
}

.edit{
	background-color: #cf003d;
	color: white;
}

.trash{
	background-color: #f20f0f;
	color: white;
}



.edit{
	position: sticky; left: 0;
	z-index: 100;
	padding: 6px 13px 6px 13px;
	text-align: center;
}

.trash{
	position: sticky; 
	left: 44px;
	z-index: 100;
	padding: 6px 13px 6px 13px;
	text-align: center;
}

.addUser{
	background-color: #cf003d;
	color: white;
	border: none;
	padding: 8px;
	text-align: center;
	border-radius: 6px;
	margin-bottom: 15px;
	transition: 0.5s;
	padding: 14px;
}

.btn:focus{
	box-shadow: none;
}

#addUser .row, #editUser .row, #deleteUser .row{
	margin-bottom: 10px;
}

#deleteUser .row{
    margin-right: 0px;
    margin-left: 0px;
    float: right;
}

.deleteUserFormButton{
	background-color: #cf003d;
	border-color: #cf003d;
	color: #ffffff;
}

.deleteUserFormButton:hover{
	background-color: #bd0f14;
	border-color: #bd0f14;
	color: #ffffff;
}

.addUser:hover{
	background-color: #b80439;
	color:#ffffff;
}

.addUser:focus{
	outline: none;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #F2F2F2;
}

.table-striped.table.table-bordered.table-hover{
	border: none;
}

.table-bordered td, .table-bordered th {
    border: none;
}

.pageTitle{
    font-size:28px;
    color: #191919;
}

.offer.row{
	margin-top: 35px;
	margin-left: 0px;
	margin-right: 0px;
}

.offer.row .box{
	padding-top: 10px;
	border-radius: 4px;
	width: 200px;
	text-align: center;
}

.ic.icon-doc-color:before {
  content: "\e906";
  color: #ffffff;
  font-size: 17px;
}

.icon-doc-color:before{
	font-size: 17px;
}

.ic.icon-doc-color{
  margin-bottom: 10px;
}

.offer.row .box p{
	margin-bottom: 10px;
}

.offer.row .box.one {
	border: 3px solid #191919;
	color: #191919;
}

.offer.row .box.third{
	border: 3px solid #059652;
	color: #191919;
}

.offer.row .box.one, .offer.row .box.two, .offer.row .box.third{
	margin-right: 15px;
}

.offer.row .box.two{
	
	border: 3px solid #ffab35;
	
}

.offer.row .box.fourth{
	
	border: 3px solid #cf003d;
	
}

.clr.icon-korisnik:before{
	content: "\e903";
  	color: #cf003d;
}

.ic.icon-edit:before{
	content: "\1f301";
  	color: #ffffff;
  	font-size: 12px;
}

.ic.icon-email-user:before{
	content: "\e907";
  	color: #ffffff;
  	font-size: 12px;
}

.ic.icon-password-reset:before {
  content: "\e908";
  color: #fefefe;
  font-size: 12px;
}

.userOptions.row{
	margin-left: 0px;
	margin-right: 0px;
}

.btn.options{background-color: #cf003d;
 color: white;
 border: none;
 text-align: center;
 border-radius: 6px;
 margin-bottom: 15px;
 transition: 0.5s;
 padding: 14px;
 text-transform: uppercase;
 margin-right: 15px;
}

.btn.options:hover{
	background-color: #b80439;
}

#table thead{
	background-color: #cf003d;
	color: #ffffff;
}

#table thead tr th{
	font-weight: normal;
}

.page-item.active{
	background-color: #2f2f2f;
	border: 1px solid black;
}

.page-link{
	display: inline;
}

.page-link:focus{
	box-shadow: none;
}

.backFormBtn{
    background-color: #2f2f2f;
}

.page-item.active .page-link{
	background-color: #2f2f2f;
	border: 1px solid transparent;
}

.page-size{
	color: #ffffff;
}

.float-right.pagination{
    margin-top: 15px !important;
}

.text-nowrap.table.table-bordered.table-hover{
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
}

.text-nowrap.table.table-bordered.table-hover tr th{
    border-bottom: 0px;
}

.text-nowrap.table.table-bordered.table-hover tbody tr{
    border-bottom: 1px solid #f2f2f2;
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
	background-color: #f2f2f2;
	color: #000000;
	transition: 0.3s;
}

.page-item.active{
	margin-top: -1px;
}

.page-link{
	color: #000000;
}

.page-link:hover{
	color: #000000;
}

.camp {
    margin-bottom: 40px;
    font-size: 14px;
}

.dropdown-item.active{
	background-color: #cf003d;
}

.dropdown-item:active{
	background-color: #cf003d;
}

.addUserFormButton{
	background-color: #cf003d;
	border-color: #cf003d;
	color: #ffffff;
}

.addUserFormButton:hover{
	background-color: #cf003d;
	border-color: #cf003d;
	color: #ffffff;
}

.form-control:focus{
	box-shadow: none;
	border-color: #ced4da;
}

.float-right.search.btn-group{
	float: left !important;
}

.menu-button{
    display:none;
}

@media screen and (max-width: 1024px){
	.offer.row .box {
	    width: 183px;
	}
}

@media screen and (max-width: 768px){
	.offer.row .box {
	    width: 169px;
	}
}

@media screen and (max-width: 425px){
	.offer.row{
	    display: flex;
	    justify-content: center;
	}

	.offer.row .box.one, .offer.row .box.third, .offer.row .box.two {
	    margin-right: 0px;
	    margin-left: 0px;
	    margin-bottom: 15px;
	}

	.offer.row .box {
	    width: 200px;
	}

	.userOptions.row{
		display: flex;
		justify-content: center;
	}

	.userOptions.row button{
		width: 200px;
		margin-bottom: 15px;
		padding: 0px;
		margin-right: 0px;
	}
}

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

	.menu-button{
		display: block;
	}
	
	.header-content{
	    display: none;
	}

	

	.sidebar{
		margin-left: -200px;
	}

	.sidebar.displaySidebar{
		margin-left: 0px;
		transition: 0.4s;
		z-index: 999;
	}

	.sidebar.removeSidebar{
		margin-left: -200px;
		transition: 0.4s;
		z-index: 999;
	}

	.main-content{
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
	}

	.footer{
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 3;
		grid-row-end: 4;
		background-color: #2f2f2f;
	}

	.dark{
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: gray;
		opacity: 0.5;
		z-index: 333;
	}
	
	#login .login-content .logo img{
    	width:100%;
    }
    
    #login{
    	height: 100%;
    	display: grid;
    	grid-template-rows: 1fr 330px 1fr;
    	grid-template-columns: 1fr 330px 1fr;
    	background-color: #191919;
    }

	#addUser .row, #editUser .row{
		margin-bottom: 0px;
	}
	
	#deleteUser .row{
		margin-right: 0px;
		margin-left: 0px;
		float:right;
	}

	#addUser .row .col-md-6, #editUser .row .col-md-6, #deleteUser .row{
		margin-bottom: 10px;
	}
}

.menu-button {
	float: right;
	cursor: pointer;
	opacity: 1;
	font-size: 18px;
}


.menu-icon {
	width: 35px;
	height: 24px;
	position: relative;
}

.menu-icon div {
	display: block;
	height: 2px;
	border-radius: 100px;
	width: 35px;
	background-color: black;
	position: absolute;
	transition: all 0.3s;
}

.m1 {
	top: 0px; 
	transform: rotateZ(0deg); 
}

.m1a {
	top: 12px; 
	transform: rotateZ(45deg);
}

.m2 {
	top: 12px;
	transform: rotateZ(0deg);
}

.m2a {
	transform: rotateZ(45deg);
}

.m3 {
	top: 24px;
	transform: rotateZ(0deg);
}

.m3a {
	top: 12px; 
	transform: rotateZ(-45deg);
}





@media screen and (max-width: 360px){
    #login .login-content .logo img{
    	width:100%;
    }
    
    #login{
    	height: 100%;
    	display: grid;
    	grid-template-rows: 1fr 280px 1fr;
    	grid-template-columns: 1fr 280px 1fr;
    }
}


@media (min-width: 576px){
	.modal-dialog {
	    max-width: 750px;
	    margin: 1.75rem auto;
	}

	.modal-dialog.delete{
		max-width: 500px;
	    margin: 1.75rem auto;
	}
}

.download-table:before{
	content: url("../images/icons/download.svg");
}

.download-color:before{
	content: url("../images/icons/download-color.svg");
}

.copyoffer:before{
	content: url("../images/icons/copyoffer.svg");
}


.dokumenti:before{
	content: url("../images/icons/1.svg");
}

.cekanje:before{
	content: url("../images/icons/2.svg");
}

.prihvacene:before{
	content: url("../images/icons/3.svg");
}

.odbijene:before{
	content: url("../images/icons/4.svg");
}

.btn-tableButtons{
	background-color: #2f2f2f;
}

.dropdown-toggle:after{
	color: #ffffff;
}


.klasica1 {
    margin-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

.checkbox {
    width: 100%;
    margin: 15px auto;
    position: relative;
    display: block;
}

.checkbox input[type="checkbox"] {
    width: auto;
    opacity: 0.00000001;
    position: absolute;
    left: 0;
    margin-left: -20px;
}
.checkbox label {
    position: relative;
}
.checkbox label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    margin-top: -3px;
    width: 22px;
    height: 22px;
    transition: transform 0.28s ease;
    border-radius: 3px;
    border: 2px solid #cf003d;
}
.checkbox label:after {
  content: '';
    display: block;
    width: 10px;
    height: 5px;
    margin-top: -6px;
    border-bottom: 2px solid #cf003d;
    border-left: 2px solid #cf003d;
    -webkit-transform: rotate(-45deg) scale(0);
    transform: rotate(-45deg) scale(0);
    transition: transform ease 0.25s;
    will-change: transform;
    position: absolute;
    top: 12px;
    left: 10px;
}
.checkbox input[type="checkbox"]:checked ~ label::before {
    color: #cf003d;
}

.checkbox input[type="checkbox"]:checked ~ label::after {
    -webkit-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1);
}

.checkbox label {
    min-height: 34px;
    display: block;
    padding-left: 40px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    vertical-align: sub;
}
.checkbox label span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.checkbox input[type="checkbox"]:focus + label::before {
    outline: 0;
}