/*Modal Styles*/

.klipboard-new-modal.wide-modal .modal-dialog{
	width: 800px;
}

.modal-body, .modal-footer {
	background-color: var(--kb-warm-biscuit);
}


.modal-as-drawer.new-style .modal-body{
	overflow: scroll;
	height: calc( 100% - 80px );
	padding-bottom: 80px;
}
	.modal-as-drawer.new-style .modal-footer{
	background: white;
	position: fixed;
	bottom: 0;
	width: 100%;
	width: calc(100% - 20px);

}
/* Drawer Modal */
.modal-as-drawer.new-style {
	border-top-left-radius: 6px !important;
	top: 60px;
	top: 0px;
}

	.modal-as-drawer.new-style:focus{
		outline: 0!important;
	}
	.modal-as-drawer.new-style.wide-drawer .modal-dialog {
		width: 500px;
	}


	.modal-as-drawer.new-style .modal-content {
		border-top-left-radius: 6px !important;
		height: 100%;
		position: relative;
	}

.modal-as-drawer.new-style .modal-header {
	background-color: var(--kb-purple);
	padding-top: 30px;
	border-bottom: 0;
	border-top-left-radius: 6px !important;
}

.modal-as-drawer.new-style .modal-header h4 {
	text-transform: capitalize;
}

	.modal-as-drawer.new-style .modal-body {
		background-color: var(--kb-warm-biscuit);
	}
	.modal-as-drawer.new-style .modal-dialog {
		box-shadow: 1px 1px 3px;
	}
.modal-as-drawer.new-style .modal-body .invoice-service-holder {
	padding: 0;
	background: white;
	margin: 0;
	padding: 10px;
	margin-top: 20px;
}

.modal-as-drawer.new-style .modal-body .invoice-service-holder thead th {
	text-transform: none;
	padding-bottom: 20px;
	color: #737373;
	border-bottom: 1px solid #e9e9e9;
}



/* XERO Modals - new styles */
.xero-xntegration .modal-content.new-style {
	border: 0;
	border-radius: 4px !important;
	background-color: var(--kb-warm-biscuit);
}

	.xero-xntegration .modal-content.new-style .modal-header {
		background-color: var(--kb-purple);
		border-top-left-radius: 4px !important;
		border-top-right-radius: 4px !important;
		padding: 25px 15px 10px 15px;
	}
.xero-xntegration .modal-content.new-style .modal-header h4 {
	text-transform: capitalize;
}
	.xero-xntegration .modal-content.new-style .modal-body{
		padding-bottom: 10px;
	}

	.xero-xntegration .modal-content.new-style .modal-footer {
		background: white;
		border-bottom-left-radius: 4px !important;
		border-bottom-right-radius: 4px !important;
		text-align: right;
		height: auto;
		border: 0;
	}
		.xero-xntegration .modal-content.new-style .modal-footer .btn {
			border-radius: 40px !important;
			font-size: var(--btn-font-size);
			padding: 6px 20px;
			width: auto;
			font-size: 14px;
		}

			.xero-xntegration .modal-content.new-style .modal-footer .btn + .btn {
				margin-left: 0px;
				margin-bottom: 0;
			}
		
.xero-xntegration .modal-content.new-style .modal-footer .btn-info {
	background-color: var(--kb-darknavy) !important;
	border: 1px solid var(--kb-darknavy);
}




/* PORTAL SIDE BAR MODAL */
.modal-as-drawer-for-job.new-style .modal-dialog{
	border-top-left-radius: 6px!important;
}

/* modal as drawer - - header */
.modal-as-drawer-for-job.new-style .modal-header {
	padding: 30px 30px 9px;
	max-height: 10%;
	background-color: var(--kb-purple);
}
	.modal-as-drawer-for-job.new-style .modal-header h4 {
		text-indent: 0;
	}
/* modal as drawer - - body */
.modal-as-drawer-for-job.new-style .modal-body {
	padding: 30px;
	height: calc(94.5% - 80px);

}
.modal-as-drawer-for-job.new-style .modal-body .row p{
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border-grey);
}
.modal-as-drawer-for-job.new-style .modal-content {
	box-shadow: none;
}

.modal-as-drawer-for-job.new-style .modal-body .form-area .new-input {
	margin-top: 5px;
}
	.modal-as-drawer-for-job.new-style .modal-body .form-area label{
		font-size: 14px;
		font-family: 'Inter var';
	}
	/* text area */
	.modal-as-drawer-for-job.new-style .modal-body .form-area .new-input input, .modal-as-drawer-for-job.new-style .modal-body .form-area .new-input textarea {
		border: 0;
		padding: 6px 8px;
		border-radius: var(--input-radius)!important;
		border: none;
	}
	.modal-as-drawer-for-job.new-style .modal-body .form-area .new-input textarea {
		padding-top: 10px;
	}
.Portal .modal-as-drawer-for-job.new-style .modal-body .form-area .new-input textarea:hover,
.Portal .modal-as-drawer-for-job.new-style .modal-body .form-area .new-input textarea:focus,
.Portal .modal-as-drawer-for-job.new-style .modal-body .form-area .new-input textarea:active {
	border: 0;
	outline: 0;
}
.Portal .modal-as-drawer-for-job.new-style .modal-body .form-area .sms-character-count{
	border: none;
	border-bottom-left-radius: 4px!important;
	border-bottom-right-radius: 4px!important;
}
.modal-as-drawer-for-job.new-style .modal-body .form-area .new-input .k-widget.k-dropdown.k-header {
	border-radius: var(--input-radius) !important;
	border: none !important;
}

	.modal-as-drawer-for-job.new-style .modal-body .form-area .new-input .k-widget.k-dropdown.k-header .k-dropdown-wrap.k-state-default {
		border-radius: var(--input-radius) !important;
		border: none !important;
		font-size: 13px;

	}

	.modal-as-drawer-for-job.new-style .modal-body .form-area .new-input .k-widget.k-dropdown.k-header .k-dropdown-wrap.k-state-default span.k-input {
		color: #999;
	}
	/* modal form date time picker */
	.modal-as-drawer-for-job.new-style .modal-body .form-area .new-input .k-widget.k-datetimepicker.k-header.datetimepicker {
	width: 100%;
	border-radius: var(--input-radius) !important;
	font-size: 13px;
	border: 0;
}
		.modal-as-drawer-for-job.new-style .modal-body .form-area .new-input .k-widget.k-datetimepicker.k-header.datetimepicker .k-picker-wrap.k-state-default {
			border: 0;
			border-radius: var(--input-radius) !important;
			padding-right: 9.5em;
		}
		.modal-as-drawer-for-job.new-style .modal-body .form-area .new-input .k-widget.k-datetimepicker.k-header.datetimepicker input.datetimepicker {
			padding-right: 0;
			padding-left: 0;
			text-indent: 10px;
			border: 0;
			border-radius: var(--input-radius) !important;
			font-size: 13px;
			border-top-right-radius: 0!important;
			border-bottom-right-radius: 0!important;
		}

		.modal-as-drawer-for-job.new-style .modal-body .form-area .new-input .k-widget.k-datetimepicker.k-header.datetimepicker .k-picker-wrap.k-state-default .k-select {
			width: 9.5em;
		}
			.modal-as-drawer-for-job.new-style .modal-body .form-area .new-input .k-widget.k-datetimepicker.k-header.datetimepicker .k-picker-wrap.k-state-default .k-select .k-icon.k-i-calendar,
			.modal-as-drawer-for-job.new-style .modal-body .form-area .new-input .k-widget.k-datetimepicker.k-header.datetimepicker .k-picker-wrap.k-state-default .k-select .k-icon.k-i-clock {
				margin: 13px;
			}
		
			.modal-as-drawer-for-job.new-style .modal-body .form-area .form-info {
			color: var(--dark-grey);
		}

/* modal as drawer - - footer */
.modal-as-drawer-for-job.new-style .modal-footer {
	background: white;
	margin-top: 0;
	text-align: right;
	border-top: 0;
	/* makes footer stick to bottom*/
	position: absolute;
	position: sticky;
	bottom: 0;
	width: 100%;
}

.modal-as-drawer-for-job.new-style .modal-footer button{
	width: auto;
}
.modal-as-drawer-for-job.new-style .modal-footer .button-spacer {
	width: 20px;
	height: 1px;
	display: inline-block;
}



/* New Modal Style */
.klipboard-new-modal{
}

	.klipboard-new-modal .modal-content {
		border-radius: var(--border-radius) !important;
		border: none;
		/*box-shadow: var(--box-shadow-dark);*/
	}

	.klipboard-new-modal .modal-content .modal-header {
		background-color: var(--kb-purple);
		border-radius: var(--border-radius) !important;
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
		font-family: var(--font-inter);
		padding: 25px 20px 10px 20px;
	}
		.klipboard-new-modal .modal-content .modal-header .close{
			margin-top: -20px;
		}
		.klipboard-new-modal .modal-content .modal-header h4 {
			font-weight: normal;
			text-transform: none;
		}

	.klipboard-new-modal .modal-content .modal-body{
		border: 0;
		padding: 20px;
		background: var(--kb-warm-biscuit);
		font-size: 14px;
	}
		.klipboard-new-modal .modal-content .modal-body.border-top{
			border-top: 1px solid var(--grey);
		}
		.klipboard-new-modal .modal-content .modal-body p {
			font-family: var(--font-inter);
			font-size: 14px;
			line-height: 22px;
		}
		.klipboard-new-modal .modal-content .modal-body h5 {
			font-family: var(--font-inter);
			font-size: 18px;
			font-weight: 600;
			margin-bottom: 10px;
			color: var(--kb-purple);
		}
		.klipboard-new-modal .modal-content .modal-footer {
			background-color: white;
			border-radius: var(--border-radius) !important;
			border-top-left-radius: 0 !important;
			border-top-right-radius: 0 !important;
			text-align: right;
			border: 0 !important;
			padding: 15px;
		}
		.modal-as-drawer.new-style .modal-footer,
		.klipboard-new-modal .modal-content .modal-footer {
		}


/* work requests new form dropdown text make smaller*/
.Portal .k-animation-container .k-item,
.Portal .k-animation-container .k-list-optionlabel {
	font-family: var(--font-family) !important;
	font-size: 13px !important;
}

.Portal .k-calendar .k-content .k-link, 
.Portal .k-calendar .k-footer .k-link {
	color: var(--dark-grey);
	font-weight: bold;
}

.Portal .k-calendar .k-other-month, .k-calendar .k-other-month .k-link{
	color: var(--grey)!important;
}
.Portal .k-calendar .k-content .k-today .k-link {
	color: white !important;
}


/* Main App - Jobs OVerview - Modal as Drawer title Fix - rr*/
.modal.modal-as-drawer.js-job-attach-PO-modal .modal-body .modal-title h4,
	.modal.modal-as-drawer.js-job-attach-quote-modal .modal-body .modal-title h4 {
	padding: 8px 0;
}

.modal-font-family body{
	font-family: var(--font-inter)!important;
}


body {
	font-family: var(--font-inter) !important;
}

.k-widget.k-window{
	border-radius: var(--border-radius)!important;
}
.k-widget.k-window .k-window-titlebar.k-header{
	border-top-left-radius: 4px!important;
	border-top-right-radius: 4px!important;
	background: var(--kb-purple);
}

	.k-widget.k-window .k-popup-edit-form.k-scheduler-edit-form.k-window-content.k-content {
		border-bottom-left-radius: 4px !important;
		border-bottom-right-radius: 4px !important;
	}

	.k-widget.k-window .k-button.k-primary.k-scheduler-update,
	.k-widget.k-window	.k-button.k-scheduler-cancel{
		border-radius: var(--btn-radius)!important;
	}

	.k-widget.k-window .k-button.k-primary.k-scheduler-update{
		background: var(--kb-aqua);
		border-color: var(--kb-aqua);
	}



/* Onboarding modals */
.onboarding-modal {
	/*top: unset;*/
	bottom: 50px;
	left: 140px;
	right: unset;
	width: 100%;
}

.onboarding-modal#R1-S4modal .modal-body {
	height: 400px;
}
/*body.modal-open.onboarding-modal-open .modal-backdrop {
	background-color: rgba(225, 225, 225, 0.8);
}*/
.onboarding-modal .modal-dialog {
	padding: 0;
	right: 0;
	width: calc(100% - 240px);
	left: 0;
	margin: 0;
}

.onboarding-modal .modal-dialog .modal-content{
	border-radius: 8px;
	width: 100%;
}

	.onboarding-modal .modal-dialog .modal-content .modal-header{
		border: 0;
		padding-top: 20px;
		padding-bottom: 15px;
	}
		.onboarding-modal .modal-dialog .modal-content .modal-header h3 {
			width: 50%;
			display: inline-block;
			color: var(--kb-purple);
			font-size: 18px;
		}
		.onboarding-modal .modal-dialog .modal-content .modal-header h3 .step-counter-bg {
			border: 2px solid var(--kb-purple);
			border-radius: 50%;
			width: 20px;
			height: 20px;
			display: inline-block;
			text-align: center;
			color: var(--kb-purple);
			line-height: 16px;
			font-weight: bold;
			font-size: 12px;
			margin-right: 5px;
			top: -2px;
			position: relative;
			line-height: 20px;
		}

		.onboarding-modal .modal-dialog .modal-content .modal-header .close {
			opacity: 1;
			padding: 1px 5px;
			background-color: transparent;
			margin-top: -3.5px;
		}
			.onboarding-modal .modal-dialog .modal-content .modal-header .close:hover {
				background-color: #777;
				color: white !important;
			}

			.onboarding-modal .modal-dialog .modal-content .modal-body {
				background: white;
				/*color: var(--kb-purple);*/
				border-bottom-right-radius: 8px;
				border-bottom-left-radius: 8px;
				padding-top: 10px;
			}
			.onboarding-modal .modal-dialog .modal-content .modal-body .progressbar {
				width: 100%;
				height: 20px;
				background: #f1f1f1;
				border: 1px solid #e1e1e1;
			}
		.onboarding-modal .modal-dialog .modal-content .modal-body .progressbar .k-progress-status {
			color: #555;
			font-size: 12px;
			line-height: 20px;
			margin: 0;
			margin-top: 1px;
			display: block;

		}
		.k-progressbar-horizontal .k-state-selected {
			border-top-color: var(--icon-green)!important;
			border-bottom-color: var(--icon-green)!important;
			border-left-color: #e0e0e0;
			border-right-color: #e0e0e0;
		}
.k-progressbar .k-state-selected {
	/*background-color: var(--icon-green) !important;*/
	background: linear-gradient( 337deg, rgba(58,255,184,1) 44%, rgba(29,255,255,1) 100%);
	border-bottom: none;
}


.onboarding-modal .modal-dialog .modal-content .modal-body {
	padding: 0px 45px 10px 45px;
	border-radius: 0;
	height: 700px;
	overflow: auto;
}
	.onboarding-modal .modal-dialog .modal-content .modal-body .modal-tagline{
		color: #777;
		font-size: 14px;
		line-height: 22px;
	}
	.onboarding-modal .modal-body .row h5{
		font-size: 16px;
		margin-bottom: 20px;
	}
.onboarding-modal .modal-body  p {
	font-size: 14px;
	color: #444;
	line-height: 22px;
}

.onboarding-modal .modal-dialog .modal-content .modal-footer {
	background: white;
	text-align: right;
	margin-top: 0;
	padding: 0 20px;
	border: 0;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	position: absolute;
	width: calc(100% - 41px);
	border: 1px solid rgba(0, 0, 0, 0.2);
}
.onboarding-modal .modal-dialog .modal-content .modal-footer .inner-footer-modal{
	padding: 20px 0;
}

	.videoModal .modal-dialog .modal-content .modal-footer a,
	.onboarding-modal .modal-dialog .modal-content .modal-footer .inner-footer-modal .btn {
		width: auto!important;
		padding: 2px 10px;
	}




.modal-open-twice {
	overflow: hidden;
}
.videoModal {
	/*display: block;*/
	width: 650px;
	/*position: fixed;*/
	margin: 0 auto;
	top: 60px;
	left: 0;
	background: white;
	border-radius: 4px;
	border: 1px solid #777;
	right: 0;
	margin: 0 auto;
	overflow: auto;
	height: fit-content;
	z-index: 99999;
	bottom: auto;
}
.videoModal .modal-dialog{
	width: 100%;
	padding: 0;
}
	.videoModal .modal-dialog .modal-content {
		width: 100%;
		border: 0;
		padding-top: 10px;
	}
	.videoModal .modal-dialog .modal-content .modal-body{
		width: 100%;
		border: 0;
		background: none;
		padding: 0 20px;
		margin: 0;
	}

	.videoModal .modal-dialog .modal-content .modal-body p{
		width: 100%;
		display: inline-block;
		margin-right: -10px;
		margin-top: -5px;
	}

	.videoModal .modal-dialog .modal-content .modal-body iframe{
		width: 100%;
		margin-top: 10px;
	}
		.videoModal .modal-dialog .modal-content .modal-footer{
			background: none;
		}




/* onboarding styled modals */
.outside-OB.modal.onboarding-modal:focus{
	outline: 0!important;
}

.outside-OB.modal.onboarding-modal .modal-dialog .modal-content .modal-body {
	height: auto!important;
	min-height: auto!important;
}


/* single page new job form scheudler add event modal */
#NewJobEventSideBar{
	top: 0!important;
	width: 100%;
	background: transparent;
	height: 100%!important;
	pointer-events: all;
	transform: none!important;
	position: fixed;
}
	#NewJobEventSideBar .k-window-titlebar{
		width: 600px;
		right: 0;
	}
	#NewJobEventSideBar .k-popup-edit-form {
		padding: 0;
		width: 600px;
		margin: 0;
		margin-right: auto;
		margin-left: auto;
		float: right;
		position: fixed; 
		right:0;
		margin-top: 0px;
		height: calc(100% - 65px);
	}
		#NewJobEventSideBar .k-popup-edit-form .k-edit-form-container .row{
			padding: 20px 20px 0 20px;
		}
		#NewJobEventSideBar .k-popup-edit-form h4 {
			margin-bottom: 20px;
			font-size: 16px;
		}
		#NewJobEventSideBar .k-popup-edit-form label{
			font-size: 14px;
			margin-bottom: 5px;
		}
	#NewJobEventSideBar .k-scheduler-edit-form .k-edit-form-container{
		width: 100%!important;
		height: 100%;
	}

	#NewJobEventSideBar .modal-top-half-height {
		height: 390px;
	}
	#NewJobEventSideBar .rest-of-modal-height {
		height: calc(100% - 490px);
	}
	#NewJobEventSideBar #teamusers-grid .controls {
		height: 100%;
		display: table;
	}
	#NewJobEventSideBar #teamusers-grid{
		height: 100%;
	}
#NewJobEventSideBar .support-team-grid.form-group {
	height: calc(100% - 70px);
}
	#NewJobEventSideBar .support-team-grid.form-group .form-group{
		height: 100%;
	}
	.so-small-its-hidden {
		opacity: 0;
		height: 1px;
	}

#NewJobEventSideBar .time-validation {
	margin: 10px 20px;
	border: 1px solid var(--red);
	padding: 10px;
	/*display: inline-block;*/
	width: calc(100% - 40px);
	border-radius: 4px;
	margin: 0;
	box-sizing: border-box;
	font-size: 14px;
	color: var(--red);
	background: #feedec;
	position: absolute;
	top: 85px;
	right: 20px;
}
        

.modal-open-here {
	pointer-events: none;
	overflow: hidden;
}
.row.recurring-section{
	padding-top: 0!important;
}
.row.recurring-section h4{
	margin-bottom: 10px;
}
.row.recurring-section p {
	font-size: 14px;
	padding-bottom: 20px;
	display: block;
}
		.row.recurring-section .k-widget.k-numerictextbox, 
		.row.recurring-section .k-widget.k-dropdown.k-header {
		border-radius: 4px;
		border: 1.5px solid white;
		height: 36px;
		line-height: 36px;
	}
			.row.recurring-section .k-widget.k-dropdown.k-header .k-dropdown-wrap.k-state-default .k-input,
			.row.recurring-section .k-widget.k-dropdown.k-header .k-dropdown-wrap.k-state-default .k-input{
				height: 36px;
				line-height: 30px;
				color: #999;
			}
	.k-dropdown-wrap.k-state-default {
		height: 36px;
		line-height: 36px;
	}
			.row.recurring-section .k-widget.k-numerictextbox:hover,
			.row.recurring-section .k-widget.k-numerictextbox:active,
			.row.recurring-section .k-widget.k-numerictextbox:focus-within,
			.row.recurring-section .k-widget.k-dropdown.k-header:focus,
			.row.recurring-section .k-widget.k-dropdown.k-header:focus-within,
			.row.recurring-section .k-widget.k-dropdown.k-header:hover,
			.row.recurring-section .k-widget.k-dropdown.k-header:active {
				border: 1.5px solid var(--kb-purple) !important;
			}


	.row.recurring-section .k-dropdown-wrap.k-state-default {
		border: 0;
	}

.block-team-users-if {
			position: absolute;
			width: calc(100% - 40px);
			height: inherit;
			background: rgba(51, 25, 91, 0.5);
			text-align: center;
			z-index: 9;
			border-radius: 4px;
			cursor: not-allowed;
			display: table;
		}
.block-team-users-if  div{
	color: white;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

	.block-team-users-if div a {
		display: block;
		width: fit-content;
		margin: 0 auto;
		padding-left: 30px;
		padding-right: 30px;
		margin-top: 20px;
	}

		.block-team-users-if div a:hover,
		.block-team-users-if div a:active,
		.block-team-users-if div a:focus {
			color: var(--kb-purple) !important;
		}


.block-recurring-users-if {
    position: absolute;
    width: calc(100% - 40px);
    height: inherit;
    background: rgba(51, 25, 91, 0.5);
    text-align: center;
    z-index: 9;
    border-radius: 4px;
    cursor: not-allowed;
    display: table;
}

    .block-recurring-users-if div {
        color: white;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

        .block-recurring-users-if div a {
            display: block;
            width: fit-content;
            margin: 0 auto;
            padding-left: 30px;
            padding-right: 30px;
            margin-top: 20px;
        }

            .block-recurring-users-if div a:hover,
            .block-recurring-users-if div a:active,
            .block-recurring-users-if div a:focus {
                color: var(--kb-purple) !important;
            }


.block-dateerror-users-if {
    position: absolute;
    width: calc(100% - 40px);
    height: inherit;
    background: rgba(51, 25, 91, 0.5);
    text-align: center;
    z-index: 9;
    border-radius: 4px;
    cursor: not-allowed;
    display: table;
}

.block-dateerror-users-if div {
    color: white;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.block-dateerror-users-if div a {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 20px;
}

.block-dateerror-users-if div a:hover,
.block-dateerror-users-if div a:active,
.block-dateerror-users-if div a:focus {
    color: var(--kb-purple) !important;
}
 

#ClientContactModal {
    overflow-y: auto;
}
#ClientContactModal .modal-header {
	height: 60px;
}

#ClientContactModal .modal-body {
	height: calc(100% - 126px);
	padding-bottom: 66px;
}

#ClientContactModal .modal-footer {
	height: 66px;
	position: absolute;
	width: 100%;
	bottom: 0;
}
	#ClientContactModal #Telephone {
		width: 100%
	}


.klipboard-modal .modal-header h5,
.klipboard-modal .modal-header h4{
	width: 100%;
}
.modal-as-drawer.new-style .modal-header .close {
	color: white;
	opacity: 0.5;
	padding: 0px 10px;
	margin: -2px 0 0 auto;
}
.modal-as-drawer.modal-as-drawer-for-job-wide .modal-dialog{
	max-width: 800px;
}
.modal-as-drawer .modal-footer {
	margin-top: 15px;
	padding: 19px 30px 20px;
}
.modal-as-drawer .modal-footer .btn{
	flex: none!important;
}