/* =========================================================
   MultiLabel — CCB calculator "purple" redesign (CSS only)
   Scope: only inside .ml-costform
   ========================================================= */

.ml-costform{
  background:var(--violet);
  padding:90px 0;
  overflow:hidden;
  color:white;
}
.ml-costform .ml-title{
	color:white;
}

.ml-costform .calc-container .calc-list .calc-list-inner{
	background:none!important;
	padding: 25px !important;
}
.ml-costform .calc-container .calc-list.calc-fields .calc-list-inner{
	padding:0!important;
}
.ml-costform .calc-container .calc-list:not(.calc-fields) .calc-list-inner {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
}
.ml-costform .ccb-front .calc-list .calc-item-title {
    margin-bottom: 25px;
}
.ml-costform .ccb-front .calc-container-wrapper .calc-container{
	max-width:100%!important;
	display: flex;
    justify-content: center;
    gap: 100px;
}
.ml-costform .ccb-front .calc-container-wrapper .calc-container .calc-list{
	max-width:500px;
}
.ml-costform .ccb-front .calc-container-wrapper .calc-container .calc-list.calc-subtotal{
	max-width:510px;
}
.ml-costform .calculator-settings.ccb-front {
    margin: 0px auto !important;
}
.ml-costform .calc-container .calc-list .calc-item-title .ccb-calc-heading, 
.ml-costform .calc-container .calc-list .calc-item-title h2{
	color: white !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 120%;
}
.ml-costform .ccb-front .calc-item__title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: white !important;
    margin-bottom: 15px;
    word-break: break-all;
    line-height: 120%;
}
.ml-costform .ccb-wrapper-14893 .calc-toggle-container .calc-toggle-item .calc-toggle-label-wrap .calc-toggle-label, 
.ml-costform .ccb-front .calc-item .calc-radio-wrapper label .calc-radio-label, 
.ml-costform .ccb-front .calc-item .calc-checkbox-item label .calc-checkbox-title {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: white !important;
    word-break: break-all;
}

.ml-costform .ccb-front .calc-radio-wrapper input[type=radio]{
	background: none !important;
    border-color: white !important;
	border: 1px solid white!important;
	margin-right: 8px;
}
.ml-costform .ccb-front .calc-item .calc-radio-wrapper input[type=radio]:checked{
    border-color: white !important;
}
.ml-costform .ccb-front .calc-toggle-wrapper input:checked + label, 
.ml-costform .ccb-front .calc-item .calc-radio-wrapper input[type=radio]:checked {
    background: white !important;
}

.ml-costform .calc-radio-wrapper input[type=radio]:checked:before {
    background: var(--violet) !important;
}
.ml-costform .calc-radio-wrapper.boxed-with-radio input[type=radio]:before, 
.ml-costform .calc-radio-wrapper.default input[type=radio]:before{
	width:8px;
	height:8px;
}
.ml-costform .calc-radio-wrapper.default{
	column-gap: 50px;
	row-gap: 15px;
}

.ml-costform .ccb-front .calc-range-slider__progress {
    background: rgba(255, 255, 255, 0.1) !important;
}
.ml-costform .ccb-front .calc-range-slider__progress:before{
	background: white;
}
.ml-costform .calc-range-slider{
	--thumb-size: 18px;
	--thumb-shadow-hover: white;
    --thumb-shadow-active: white;
}
.ml-costform .ccb-front .calc-container .calc-list .calc-fields-container {
    row-gap: 30px !important;
}
.ml-costform .ccb-front .calc-range-slider-min-max span {
    color: white !important;
    font-size: 13px;
    font-weight: 400;
}
.ml-costform .calc-item .calc-file-upload .ccb-label-span {
    font-size: 15px;
    font-weight: 600;
}
.ml-costform .ccb-front .calc-item .calc-file-upload .info-tip-block .info-icon {
    color: white !important;
}
.ml-costform .calc-item .calc-file-upload .calc-file-upload-actions {
    column-gap: 10px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.ml-costform .calc-item .calc-file-upload .calc-file-upload-actions>button {
    font-size: 17px !important;
    color: white !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    width: auto !important;
}
.ml-costform .ccb-front .calc-buttons .calc-btn-action.success {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 19px 30px !important;
    height: auto !important;
    max-width: 250px !important;
    width: 100% !important;
}
.ml-costform .calc-item .calc-file-upload .calc-file-upload-actions>button:not(.success){
	display:flex;
	gap:10px;
	align-items:center;
}
.ml-costform .calc-item .calc-file-upload .calc-file-upload-actions>button:not(.success):before{
	content:"";
	width:26px;
	height:24px;
	display:block;
	background-image:url('/wp-content/themes/printspace-child/assets/img/url.svg');
	background-repeat:no-repeat;
	background-size:100%;
}

.ml-costform .ccb-front .calc-container .calc-list .calc-accordion-btn {
    background: white !important;
}
.ml-costform .ccb-front .calc-container .calc-list .calc-subtotal-list .calc-subtotal-list-header {
    color: white !important;
    padding: 0;
    background: none !important;
    margin-bottom: 10px;
}
.ml-costform .ccb-front .calc-container .calc-list .calc-subtotal-list .sub-list-item{
	color: white !important;
	font-size:15px!important;
	font-weight:600!important;
}
.ml-costform .calc-container .calc-list .calc-subtotal-list .sub-list-item.inner .sub-inner{
	padding:0!important;
}
.ml-costform .calc-container .calc-list .calc-subtotal-list.show-unit .sub-item-unit{
	color: white !important;
	font-size:13px!important;
	font-weight:400!important;
}
.ml-costform .ccb-front .calc-container .calc-list .calc-subtotal-list .calc-subtotal-list-accordion, 
.ml-costform .ccb-front .calc-container .calc-list .calc-subtotal-list {
    row-gap: 15px !important;
}
.ml-costform .calc-container .calc-list .calc-subtotal-list.show-unit .sub-list-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0px auto 0;
    padding-bottom: 15px!important;
    width: 100%;
}
.ml-costform .calc-container .calc-list .calc-subtotal-list.show-unit .sub-list-item[break-border]{
	padding-bottom: 0!important;
}
.ml-costform .calc-container .calc-list .calc-subtotal-list.show-unit .sub-item-title {
    width: 100%;
}
.ml-costform .ccb-front .calc-container .calc-list .calc-subtotal-list.totals {
    border-bottom: none !important;
    padding: 0 !important;
}
.ml-costform .ccb-front .calc-container .calc-list .calc-subtotal-list .sub-list-item.total {
    color: var(--green) !important;
	font-size: 15px !important;
	font-weight:600!important;
}

.ml-costform .ccb-front .calc-container .calc-list .calc-subtotal-list .calc-subtotal-list-header span {
    font-size: 16px !important;
    font-weight: 700 !important;
}

.ml-costform .calc-container.vertical .calc-subtotal .calc-subtotal-list .ccb-next-content .calc-buttons button {
    font-size: 17px !important;
    background: var(--green) !important;
    max-width: 240px !important;
    width: 100% !important;
    padding: 19px 10px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
}

.ml-costform .calc-container.vertical .calc-subtotal .calc-subtotal-list .ccb-next-content .calc-buttons button:hover{
	background: var(--violet) !important;
}
.ml-costform .calc-item .calc-date-picker-select, 
.ml-costform .calc-item .calc-drop-down-with-image-current, 
.ml-costform .calc-item .calc-input-wrapper input, 
.ml-costform .calc-item input[type=email], 
.ml-costform .calc-item input[type=number], 
.ml-costform .calc-item input[type=password], 
.ml-costform .calc-item input[type=text], 
.ml-costform .calc-item select, 
.ml-costform .calc-item textarea{
	width: 100%!important;
    background: rgba(255, 255, 255, .10)!important;
    border: 1px solid rgba(255, 255, 255, .20)!important;
    color: #fff!important;
    border-radius: 10px!important;
    padding: 16px 20px!important;
    outline: none!important;
    font-size: 15px!important;
    min-height: 60px!important;
}

@media screen and (max-width:1024px){
	.ml-costform{
		padding: 60px 0;
	}
	.ml-costform .ccb-front .calc-container-wrapper .calc-container{
		flex-wrap:wrap;
		flex-direction:column;
		gap:30px;
	}
	.ml-costform .ccb-front .calc-container-wrapper .calc-container .calc-list.calc-subtotal,
	.ml-costform .ccb-front .calc-container-wrapper .calc-container .calc-list
	{
		max-width: 100%;
	}
	.ml-costform .calc-item .calc-file-upload .calc-file-upload-actions{
		width: 52%;
	}
	.ml-costform .calc-container.vertical .calc-subtotal .calc-subtotal-list .ccb-next-content .calc-buttons button{
		padding: 17px 10px !important;
	}
}
@media screen and (max-width:640px){
	.ml-costform .calc-container .calc-list .calc-item-title .ccb-calc-heading, .ml-costform .calc-container .calc-list .calc-item-title h2 {
		font-size: 20px !important;
	}
	.ml-costform .ccb-front .calc-item__title{
		font-size: 13px !important;
	}
	.ml-costform .ccb-wrapper-14893 .calc-toggle-container .calc-toggle-item .calc-toggle-label-wrap .calc-toggle-label, .ml-costform .ccb-front .calc-item .calc-radio-wrapper label .calc-radio-label, .ml-costform .ccb-front .calc-item .calc-checkbox-item label .calc-checkbox-title{
		font-size: 11px !important;
	}
	.ml-costform .ccb-front .calc-radio-wrapper input[type=radio]{
		max-height: 12px;
		max-width: 12px;
		min-height: 12px;
		min-width: 12px;
	}
	.ml-costform .ccb-front .calc-radio-wrapper input[type=radio]{
		margin-right: 5px;
	}
	.ml-costform .calc-radio-wrapper.boxed-with-radio input[type=radio]:before, .ml-costform .calc-radio-wrapper.default input[type=radio]:before {
		width: 5px;
		height: 5px;
		
	}
	.ml-costform .ccb-front .calc-container .calc-list .calc-fields-container {
		row-gap: 25px !important;
	}
	.ml-costform .calc-item .calc-file-upload .ccb-label-span {
		font-size: 13px;
	}
	.ml-costform .calc-item .calc-file-upload .calc-file-upload-actions>button{
		font-size: 13px !important;
	}
	.ml-costform .ccb-front .calc-buttons .calc-btn-action.success{
		border-radius: 15px !important;
	}
	.ml-costform .calc-item .calc-file-upload .calc-file-upload-actions>button:not(.success):before{
		width: 20px;
		height: 19px;
	}
	.ml-costform .calc-item .calc-file-upload .calc-file-upload-actions {
        width: 100%;
        max-width: 460px;
    }
	.ml-costform .calc-container .calc-list .calc-subtotal-list.show-unit .sub-item-title{
		font-size:13px;
	}
	.ml-costform .calc-container .calc-list .calc-subtotal-list.show-unit .sub-item-unit{
		font-size:10px!important;
	}
	.ml-costform .ccb-front .calc-container .calc-list .calc-subtotal-list .calc-subtotal-list-header span {
		font-size: 14px !important;
	}
	.ml-costform .calc-container.vertical .calc-subtotal .calc-subtotal-list .ccb-next-content .calc-buttons button{
		font-size:13px!important;
	}
	.ml-costform .calc-item .calc-date-picker-select, .ml-costform .calc-item .calc-drop-down-with-image-current, .ml-costform .calc-item .calc-input-wrapper input, .ml-costform .calc-item input[type=email], .ml-costform .calc-item input[type=number], .ml-costform .calc-item input[type=password], .ml-costform .calc-item input[type=text], .ml-costform .calc-item select, .ml-costform .calc-item textarea {
		font-size: 12px !important;
		min-height: 50px !important;
	}
}