/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.light-style .menu .app-brand.demo {
  height: 64px;
}

.dark-style .menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  width: 30px;
  height: 30px;
}

.app-brand.demo .app-brand-link{
	position: relative;
	left:-6px;
}


.app-brand-logo.demo svg {
  width: 1.7rem;
  height: 1.7rem;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.45px;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}



.innerDesignerDivCol .card {
	box-shadow: none;
	border: 1px solid #fff;
}

.innerDesignerDivCol .card:hover, .innerDesignerDivCol .card.active {
  box-shadow: 0 2px 10px rgba(38, 60, 85, 0.12);
  border: 1px solid #5a8dee;
}

.leftMenuBox ul li:hover { background-color: #fff; cursor: pointer; color: #5a8dee; }
.leftMenuBox ul li span { margin-left: 5px; }
.leftMenuBox ul li i { font-size: 1.5rem; }
.crossIcon {
  width: 18px;
  position: absolute;
  top: -2px;
  right: 3px;
  z-index: 99;
  opacity: 0;
}
.crossIcon img {
  width: 18px;
}
.innerDesignerDivCol .card .dragLinesOuter {  
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  left: 0;
  background: #edf3fd;
  border-radius: 6px 6px 0 0;  
  opacity: 0;
}
.innerDesignerDivCol .card .crossIcon  {
  opacity: 0;
}
.innerDesignerDivCol .card:hover .dragLinesOuter, .innerDesignerDivCol .card:hover .crossIcon, .innerDesignerDivCol .card.active .dragLinesOuter, .innerDesignerDivCol .card.active .crossIcon {  
  opacity: 1;
}

.controlsForm .col-md-12 { margin-bottom: 10px; }
.controlsForm .radioCheckOuter { display: inline-block; margin-left: 10px; }
.controlsForm .radioCheckOuter label { margin-right: 5px; }
.required {
	color:#ff0000;
}

.card.publishAreaheader {
	position: fixed;
	left: 0;
	width: 100%;
	top: 60px;
	z-index:99;
}

.boxOuterDesign { border: 1px solid #ddd; }
.leftMenuBox.boxOuterDesign ul { border-radius: 8px; } 
/* .right-sec.boxOuterDesign { background: #fff; } */

.formDesignerHeight { max-height: calc(100vh - 250px); overflow: hidden; }
.titleFont {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #516377;
    margin-bottom: 5px;
    margin-top: 5px;
}
.app-brand-logo img { max-width: 130px; }
.sidebarLogo img { width: 60px; }

/** New theme Design **/
.menu-vertical .menu-item .menu-link, .menu-vertical .menu-block {
	padding: 0.625rem 0.638rem !important;
}
.menu-icon {
	margin-right: 0.3rem !important;
}
#template-customizer { display: none !important; } 
.table tr { background-color: #fff; }
.table thead tr { background-color: #22418e; border-radius: 10px; }
.table {
	border-color: #E1E6EE !important;
}

.table > :not(caption) > * > * {
	padding: 0.625rem 0.8rem !important;
}
.fileInpurHidden { width: 1px; height: 1px; opacity: 0; position: absolute; }  
label.form-label, label.col-form-label {
	font-size: 0.85rem;
	text-transform: none;
	font-weight: 500;
	/* color: #000; */
}
span.input-group-text {	color: #0F3D93;  font-weight: 500;}
.dark-style span.input-group-text {	color: #fff;}

/* h5.card-header { color: #5E5E5E; }  */
.main-heading { font-size: 1.5rem; }
table tr .btn-icon {
	width: calc(1.951rem + 2px);
	height: calc(1.951rem + 2px);
}
.table th {
	text-transform: none !important;
	font-size: 0.9rem !important;
	letter-spacing: normal !important;
  font-weight: 500 !important;
}

.table th, .table td {
	border-right: none !important;
	border-left: none;
}
.table th:first-child, .table td:first-child { border-left: 1px solid #e1e6ee; }
.table th:last-child, .table td:last-child { border-right: 1px solid #e1e6ee !important; }
.nav-align-top .nav-pills + .tab-content, .nav-align-top .tabs-line + .tab-content, .nav-align-right .nav-pills + .tab-content, .nav-align-right .tabs-line + .tab-content, .nav-align-bottom .nav-pills + .tab-content, .nav-align-bottom .tabs-line + .tab-content, .nav-align-left .nav-pills + .tab-content, .nav-align-left .tabs-line + .tab-content {
  box-shadow: none !important;
}
.tab-content {
	border-radius: 0.55rem !important;
}
.badge {
	text-transform: none !important;
	line-height: 0.92;
	font-size: 14px !important;
	vertical-align: top;
}
hr {
	color: #f3f4f4 !important;
}

.customeDotList { list-style: none; }
.customeDotList li { padding-left: 15px; position: relative; padding-bottom: 10px; }
.customeDotList li::before {
	background-color: #a8b1bb !important;
	content: "";
	position: absolute;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	top: 8px;
}
.btn.btn-text  i { font-size: 22px; }
.btn {
	border-radius: 5px !important;
	padding: 9px 15px !important;
  font-weight: 500 !important;
}
.no-shadow { box-shadow: none !important; } 
.border-radius10 { border-radius: 10px !important;  }
.authentication-wrapper.authentication-basic .authentication-inner::after { display: none !important; }
.authentication-wrapper.authentication-basic .authentication-inner::before { display: none !important; }
.borderLeftRightNone tbody tr td, .table-borderless tr th, .table-borderless tr td { border-left: none !important; border-right: none !important; }
.borderLeftRightNone tbody tr td:last-child, .table-borderless tr th:last-child, .table-borderless tr td:last-child { border-right: none !important; }
.addTaskTemplateOuter { padding-left: 0px; }
.addTaskTemplateOuter .layout-navbar.navbar { left: 0px !important; }
* { outline: none; } 

.colorPicker { position: relative; }
.colorPicker span, .colorPicker .pickr {
	width: 32px;
	height: 32px;
	background: #ddd;
	display: inline-block;
	position: absolute;
	right: 2px;
	top: 2px;
	border-radius: 5px;
}
.flex-basis-auto { flex-basis: auto !important; }

.menu-vertical .menu-inner > .menu-item {
  margin: 0.0625rem 0.638rem !important;
}
.menu-vertical .menu-block, .menu-vertical .menu-inner > .menu-item, .menu-vertical .menu-inner > .menu-header {
  /* width: 14.974rem !important; */
}
.form-control {
	border-radius: 5px !important;
}
.btn.btn-secondary {
  background-color: #2989C9;
  border-color: #2989C9;
}
.btn.btn-secondary:hover {
  background-color: #1e7bb9;
  border-color: #1e7bb9;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.localizationMenuInner li a { font-size: 14px; color: #677788; font-weight: 400; }
.iconInput { position: relative; }
.iconInput input { padding-left: 30px; }
.iconInput i { position: absolute; top: 8px; left: 8px; font-size: 18px; }

.layout-menu-collapsed .app-brand {
	padding-right: 0.25rem !important;
	padding-left: 0.5rem !important;
}
html:not([dir="rtl"]) .menu-vertical .app-brand {
	padding-right: 0.95rem !important;
	padding-left: 0.8rem !important;
}

.dark-style .table tr {
	background-color: #1b2231;
}
.dark-style .table {
	border-color: #283144 !important;
}
.dark-style .table th:first-child, .dark-style .table td:first-child { border-left: 1px solid #283144; }
.dark-style .table th:last-child, .dark-style .table td:last-child { border-right: 1px solid #283144 !important; }
.dark-style .btn-label-primary {
	color: #fff;
}
.dark-style .darkThemeBg.table tr { background-color: #283144; }
.dark-style hr {
	background-color: #1c222f;
}

.formBuiderHeader { background: #FCFCFC; position: fixed; left: 0px; top: 58px; width: 100%; padding: 10px 25px; border-bottom: 1px solid #D0D5DE; z-index: 99; }
.formBuiderHeader h3 { font-size: 18px; font-weight: 500;}
.formBuiderHeader .btn { line-height: 1; }

.actionOuter  { position: relative; }
.actionOuter .bootstrap-select {	border: none !important;	border-radius: 7px 7px 0 0 !important;}
.formBuilderInner .card { border-radius: 7px 0px 7px 7px !important; }
.formBuilderInner h4 {	font-size: 15px;	color: #abb7d2;	margin: 0px;	font-weight: 400;}
.dark-style .formBuiderHeader {	background: #283144;	border-bottom: 1px solid #546990;}

.actionOuter.activeBox .card { border-left: 7px solid #0F3D93; box-shadow: 0 2px 8px rgba(38, 60, 85, 0.06) !important; min-height: 240px; position: relative; z-index: 1; }
.actionRightBox { display: none;	width: 55px;	padding: 8px;	background: #fff;	position: absolute;	right: -35px;	top: 50px;	border-radius: 0 15px 15px 0px;}
.actionRightBox ul { padding: 0px; margin: 0px; list-style: none; }
.actionRightBox ul li { padding: 0px; margin: 0px; text-align: center; margin: 3px 0; }
.actionRightBox ul li a { color:#444444; font-size: 18px; height: 36px; width: 36px; line-height: 34px; background: #F8F8F8; display: inline-block; border-radius: 50px; }
.actionRightBox ul li a:hover, .actionRightBox ul li a.active { background:#DEE8FB; }

.setupValidationBox { position: absolute; z-index: 9; display: block; background: #F9FBFE; border: 1px solid #DEE8FB; border-radius: 8px; width: 90%; right: 15px; top: 55px; padding: 15px; z-index: 2; box-shadow: 0 2px 10px rgba(38, 60, 85, 0.1) !important; min-height: 110px; } 
.leftToggleText { padding-right: 25px; }
.text-nowrap { white-space: nowrap; }
.settingCloseBtn { position: absolute; top: -5px; left: -5px; }
.settingCloseBtn i { font-size: 24px; }

.setupValidationBox:after {
	left: 100%;
	top: 25px;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #DEE8FB;
	border-width: 10px;
	margin-top: -10px;
}

.activeBox .actionRightBox { display: block; }
input.singleSelectOptionInput { min-height: 16px !important; border-radius: 0px !important; font-size: 14px; }
.singleSelectOptionInput:focus { border-bottom: 1px solid #283144 !important; box-shadow: none !important; }
.width80px { max-width: 80px; }  
.input-group.has-validation > .form-control:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}


/** new table dark mode css start **/
.dark-style .dx-datagrid {
	background-color: #1b2231 !important;
}
	.dark-style .dx-datagrid .dx-column-lines > td {
		border-left: 1px solid #283144 !important;
		border-right: 1px solid #283144 !important;
		background: #1b2231;
	}
.dark-style .dx-editor-cell .dx-texteditor, .dark-style .dx-editor-cell .dx-texteditor .dx-texteditor-input {
	background: #222a3a !important;
	color:#fff;
}
.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
	padding: 5px !important;
}
.dark-style .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
	border-bottom: 1px solid #283144 !important;
	background: #1b2231;
	padding: 5px;
}
.dark-style .dx-datagrid-borders > .dx-datagrid-filter-panel, .dark-style .dx-datagrid-borders > .dx-datagrid-headers {
	border-top: 1px solid #283144 !important;
}
.dark-style .dx-datagrid-borders > .dx-datagrid-headers, .dark-style .dx-datagrid-borders > .dx-datagrid-rowsview, .dark-style .dx-datagrid-borders > .dx-datagrid-total-footer {
	border-left: 1px solid #283144 !important;
	border-right: 1px solid #283144 !important;
}

.dark-style .dx-datagrid-borders > .dx-datagrid-rowsview, .dark-style .dx-datagrid-borders > .dx-datagrid-total-footer {
	border-bottom: 1px solid #283144 !important;
}
.dark-style .dx-datagrid-borders .dx-datagrid-rowsview, .dark-style .dx-datagrid-headers + .dx-datagrid-rowsview, .dark-style .dx-datagrid-rowsview.dx-datagrid-after-headers {
	border-top: 1px solid #283144 !important;
}
.dark-style .dx-toolbar {
	background-color: #1b2231 !important;
}
.dark-style .dx-button-mode-contained {
	background-color: #2889cb !important;
	border-color: #2889cb !important;
}

.dx-datagrid-filter-row .dx-menu {
	top: 2px !important;
	left: 3px !important;
	margin-left: -2px !important;
	margin-top: 0 !important;
	height: 29px !important;
}
.dark-style .dx-toolbar-label .dx-toolbar-item-content > div {
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
	white-space: nowrap;
}
.dx-datagrid-rowsview .dx-row {
	border-bottom: 1px solid #ddd;
}
.dark-style .dx-datagrid-rowsview .dx-row {
	border-bottom: 1px solid #283144;
}
.dark-style .dx-datagrid-rowsview .dx-row.dx-group-row:not(.dx-row-focused) {
	color: #959595;
	background-color: #1b2231;
}
	.dark-style .dx-datagrid-rowsview .dx-row.dx-group-row td {
		border-top-color: #283144;
		border-bottom-color: #283144;
	}
/** new table dark mode css end **/

.actionOuter .deleteableBox { padding-bottom: 50px; position: relative; }  
.deleteRow { position: absolute; bottom: 0px;	padding: 10px 15px;	border-top: 1px solid #f3f4f4;	width: 100%; left: 0; text-align: right;}

.settingCloseBtn {
	position: absolute;
	top: 0;
	left: 0px;
	height: 100%;
	background: #dee8fb;
	border-radius: 7px 0px 0 7px;
  width: 24px;
}
.setupValidationBox {
	padding-left: 35px;
}
.settingCloseBtn i {
	font-size: 24px;
	top: 50%;
	position: absolute;
	margin-top: -12px;
}
.dark-style .actionRightBox {
	background: #283144;
}
.dark-style .actionRightBox ul li a:hover, .dark-style .actionRightBox ul li a.active {
	background: #1E5ACA;
	color: #fff;
}
.dark-style .actionRightBox ul li a {
	color: #a1b0cb;
	background: #1c222f;
}
.dark-style .setupValidationBox {
	background: #1C222F;
	border: 1px solid #546990;
}
.dark-style .settingCloseBtn {
	background: #546990;
	color: #1c222f !important;
}
.dark-style .setupValidationBox::after {
	border-left-color: #546990;
}
.dark-style .deleteRow {
	border-top: 1px solid #1c222f;
}

.setupValidationBox.d-none {
	transform: scale(0);
	display: inline-block !important;
}

.setupValidationBox {
	transition: ease-in-out 0.8s;
	transform: scale(1);
	transform-origin: 105% 25px;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
	border-radius: 5px 0 0 5px !important;
}

.dark-style .lightModeLogo { display: none; }
.darkModeLogo { display: none; }
.dark-style .darkModeLogo { display: block; }

.app-brand-logo img.darkModeLogo  { display: none; }
.dark-style .app-brand-logo img.darkModeLogo  { display: block; }

.rowHover { position: relative; }
.rowHover > * { z-index: 9; position: relative; }
.rowHover:hover::before { position: absolute; width: 100%; height: 100%; left: 0px;	top: 0px; background: #f3f4f4;	content: ""; border-radius: 5px;}
.rowHover input.form-control { background: transparent; }
.rowHover a i.bx.bx-x { margin-top: -3px; }

.setupValidationBox.addressValidation {
	position: relative;
	display: block;
	background: #F9FBFE;
	border: 1px solid #DEE8FB;
	border-radius: 0 0 8px 8px;
	width: 100%;
	right: 0px;
	top: -4px;
	padding: 15px;
	z-index: 2;
	box-shadow: none !important;
	min-height: 110px;
}
.setupValidationBox.addressValidation::after { display: none; }
.setupValidationBox .tab-content { background: transparent !important; }

.actionOuter .pickr .pcr-button::after {
	border-radius: 5px;
}
.actionOuter .pickr .pcr-button::before {
	border-radius: 5px;
}
.actionOuter .pickr .pcr-button {
	height: 1.5em;
	width: 1.5em;
	top: -3px;
}
.addButtonIcon { height: 1.5em; width: 1.5em; border-radius: 5px; border: none; background: #444444; }
.addButtonIconOuter a { color: #444444; }

/** View Mode **/
.formViewMode {	position: fixed; width: 100%; height:calc(100% - 13%); text-align: center;	top: 13%; left: 0; z-index: 9999; overflow: auto;}
.formViewMode_content {	position: relative;	width: 320px; margin: auto;}
.formViewMode_content_phoneFrame img { width: 320px; }
.formViewMode_content_formContent {	background: #fff; text-align: left; position: absolute; top: 50px; left: 32px; width: calc(100% - 64px); height: calc(100% - 82px); border-radius: 20px; overflow: hidden;}
.formViewMode_content_formContent_header { padding: 10px 10px; }
.formViewMode_content_formContent_header h2 { color: #000; font-size: 18px;margin: 0px 0 5px 0; white-space: pre-wrap; }
.formViewMode_content_formContent_header h3 { color: #707070; font-size: 16px; font-weight: 400; margin: 0px; }
.formViewMode_content_formContent_body { background: #F3F4F4; /*max-height: calc(100% - 65px);*/ padding: 15px 10px; border-radius: 20px;}
.formViewMode_content_formContent_body_sectionBox h3 { font-size: 16px; margin-bottom: 5px; white-space: pre-wrap; }
.formViewMode_content_formContent_body_sectionBox .card-body { padding: 15px 10px; border-radius: 7px; }
.formViewMode_content_formContent_body_sectionBox .card-body h3 { font-size: 14px; font-weight: 400; color: #000; }
.iconInputRight i { position: absolute; top: 8px; right: 8px; }
.iconInputRight input { padding-right: 30px; }
.formViewMode_content_formContent_body_sectionBox .custom-option-basic .custom-option-content { padding: 10px; padding-left: 2.7em; border-radius: 7px; }
.formViewMode_content_formContent_body_sectionBox .dz-preview { margin: 0.5rem; }


.formViewMode_content_formContent_body .card-body button {
	position: relative!important;
}

	.formViewMode_content_formContent_body .card-body button.selected:after {
		content: "";
		background: url('../img/checkcirclebtn.svg') 0px 0px no-repeat;
		width: 20px;
		height: 20px;
		position: absolute;
		left: 5px;
		top: 12px;
	}

.starBox i { font-size: 22px; }
.btn-white { background-color: #fff; }
.closeViewMode { width: 32px; height: 32px; background-color: rgba(0,0,0,0.5);	border-radius: 50px; display: inline-block;	font-size: 18px; color: #fff; text-align: center; margin-top: 20px;}
.closeViewMode i { font-size: 22px; }
.closeViewMode:hover { background-color: rgba(0,0,0,1); color: #fff; }


.ql-editor {
	height: calc(100% - 50px) !important;
}
.dx-datagrid .dx-datagrid-headers .dx-header-filter, .dx-datagrid .dx-datagrid-headers .dx-header-row > td {
	background: #F2F4F6 !important;
}
.dark-style .dx-datagrid .dx-datagrid-headers .dx-header-filter, .dark-style .dx-datagrid .dx-datagrid-headers .dx-header-row > td {
	background: #222a3a !important;
}
.actionOuter .filter-option .bx {
	vertical-align: text-top;
	font-size: 1.20rem;
	line-height: 1;
}
.addButtonIconOuter i {
	font-size: 24px;
	vertical-align: middle;
}
.dx-datagrid-borders > .dx-datagrid-header-panel, .dx-toolbar {
	background: #f3f4f4 !important;
}
.dark-style .dx-datagrid-borders > .dx-datagrid-header-panel, .dark-style .dx-toolbar {
	background: #1b2231 !important;
}
.dark-style .rowHover:hover::before {
	background: #2d384f;
}
.dark-style .addButtonIconOuter a {
	color: #a1b0cb;
}
.actionOuter ul.dropdown-menu li .bx {
	vertical-align: text-top;
	font-size: 1.15rem;
	line-height: 1;
}
.actionOuter .drag-handle {
	position: absolute;
	top: 40px;
	/* top: 3px; */
	z-index: 9;
	width: 100%;
	text-align: center;
	color: #abb7d2;
}
.sortable-chosen { opacity: 0.5;  }
.actionOuter a i.bx-x { font-size: 1.30rem !important; } 
.selectInput .dropdown-menu { z-index: 9999 !important; }


.dx-datagrid-filter-row .dx-editor-cell .dx-editor-with-menu .dx-texteditor-input {
	padding-left: 32px;
	border: 1px solid #ddd;
	border-radius:5px;
}
.dx-datagrid-filter-row .dx-editor-cell .dx-editor-with-menu .dx-placeholder::before {
	border-width: 0px !important;
}

.dark-style .dx-datagrid-filter-row .dx-editor-cell .dx-editor-with-menu .dx-texteditor-input {
	padding-left: 32px;
	border: 1px solid #546990;
}
.dx-datagrid-drop-highlight td {
	color: #677788 !important;
}
.dark-style tr.dx-datagrid-drop-highlight td {
	color: #a1b0cb !important;
}

.dx-datagrid-content .dx-datagrid-table .dx-row > td, .dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
	vertical-align: middle !important;
}

.dx-datagrid-column-chooser.dx-datagrid-column-chooser-mode-drag .dx-popup-content .dx-treeview-search {
	margin-bottom: 10px;
	margin-top: 10px !important;
}
.dx-texteditor-container {
	height: auto !important;
}
.dx-button-mode-text .dx-icon {
	color: #677788 !important;
}

/** new sectop page  **/	
.newPageStartLabel { border-bottom: 2px solid #ABB7D2; padding-bottom: 10px; margin: 30px 0 10px 0; }
.newPageStartLabel h3, .newSectionStartLabel h3 { margin-bottom: 0px; font-size: 14px; font-weight: 500; color: #ABB7D2; }
.pageTitle, .sectionTitle { margin-bottom: 20px; }	
.pageTitle h2, .sectionTitle h2 { color: #677788; font-size: 20px; word-wrap: break-word; }

.newSectionStartLabel { padding-bottom: 10px; margin: 20px 0 0px 0; }
.newSectionStart, .actionOuter { padding-left: 15px; padding-right: 15px; }

.formBuilderInner .bootstrap-select .dropdown-menu.inner {
    margin-top: 0px;
    width: 420px;
    margin-bottom: 0px;
    flex-wrap: wrap-reverse;
    display: flex;
}
.formBuilderInner .bootstrap-select .dropdown-menu.inner li {
	position: relative;
	width: 50%;
}

/*.formBuilderInner:hover {
    background: #0F3D93;
    padding: 0 7px 3px 7px;
    border-radius: 12px;
    cursor: pointer !important;
}*/

.dx-texteditor-buttons-container {
	position:absolute;
	right:1px;
	top:1px;
	min-height:32px;
}
.dx-datebox-date .dx-dropdowneditor-icon {
	height: 31px;
}
.dx-overlay-wrapper .dx-filter-menu {
	display:none !important;
}
.dx-item.dx-menu-item.dx-menu-item-has-submenu {
	cursor:default !important;
}

/*--viewscreentab--*/
.viewscreentab{
text-align: center;
border:0px;
justify-content: center;
display: flex;
list-style: none;
margin: 0px 0 20px;
padding: 0px;
}
.viewscreentab li{
	margin: 0 3px;
}
.viewscreentab li button{
	background: rgba(0,0,0,.5);
	width: 52px;
	height: 52px;
	border-radius:50px;
	text-align: center;
	border: 0px;
}
.viewscreentab li.active button{
	background: #0F3D93;
}
/* .tab-content.viewscreentab{
	position: fixed;
	width: 100%;
	min-height:80%;
	text-align: center;
	top: 20%;
	left: 0;
	z-index: 9999;
} */
.formViewMode_content.ipad_priview_content{
max-width:488px;
width: 100%;
}
.formViewMode_content.ipad_priview_content .formViewMode_content_phoneFrame img{
max-width:480px;
width: 100%;
}

.formViewMode_content.desktop_priview_content{
	max-width:1024px;
	width:90%;
}
.formViewMode_content.desktop_priview_content .formViewMode_content_phoneFrame img{
	display: none;
	}
.formViewMode_content.desktop_priview_content .formViewMode_content_phoneFrame{
max-width:1024px;
height:700px;
border: solid 2px #000;
border-radius: 20px;
background: #fff;
}
.formViewMode_content.desktop_priview_content .formViewMode_content_formContent{
	top: 2px;
	height: calc(100% - 4px);
	left: 0;
width: 70%;
margin: auto;
right: 0px;
}

.FormHeaderStyle h2{
color: #000;
font-size: 18px;
font-family: "Rubik", "Times New Roman", serif;
}
.SubLabelStyle .card-body label.form-label{
	font-size: 0.85rem;
	color: #68788a;
font-family: "Rubik", "Times New Roman", serif;
font-weight: normal;
}
.expandimg{
display: inline-block;
vertical-align: baseline;
}

.formViewMode_content_formContent.ps{
	position: absolute;
}
.dark-style .dx-datagrid {
	color: #a1b0cb
}

.misc-wrapper{
	display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: calc(100vh - (1.875rem * 2));
text-align: center;
padding: 1.875rem 0;
}

@media (min-width: 1200px){
.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .menu-vertical .menu-inner > .menu-item > .menu-link .menu-icon, .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu.menu-vertical .menu-inner > .menu-item > .menu-link .menu-icon {
  margin-left: -1.576rem!important;}
}
.layout-menu-collapsed.layout-menu-hover{
	margin-left: 4px!important;
}
.text-danger
{
	color:red;
}
.dark-style .dx-datagrid {
	color: #a1b0cb
}
.misc-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: calc(100vh - (1.875rem * 2));
	text-align: center;
	padding: 1.875rem 0;
}

.ipad_priview_content .formViewMode_content_formContent {
	background: #fff;
	text-align: left;
	position: absolute;
	top: 50px;
	left: 32px;
	width: calc(100% - 64px);
	height: calc(100% - 110px);
	border-radius: 2px;
	overflow: hidden;
}
.formViewMode_content .formViewMode_content_formContent {
	background: #F3F4F4;
}
.formViewMode_content_formContent>.formViewMode_content_formContent_header {
	padding: 10px 10px;
	padding-bottom: 50px;
}
.formViewMode_content_formContent_body {
	margin-top: -30px;
}
.custom-option-header span {
	line-height:normal;
}
.light-style .flatpickr-calendar.noCalendar {
	width: 14.45rem !important;
}

.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
	white-space:nowrap;
}

.noFormData {
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-align:center;
}
.noFormData i {
	font-size:50px
}
.noFormData h3 {
	width:100%;
	margin-top:20px
}

.formViewMode .closeViewMode {
	position: absolute;
	right: -22px;
	top: -36px;
}

.task-tem-input-gp .input-group .form-control {
	line-height: 1.6;
}
.temp-file-upload .text-danger {
	font-size:14px;
	font-weight:normal

}


.uploadBtnPadding {
	padding: 8px 15px !important;
}


/*colapse css*/

.collapseAction .collapsedBar {
	background: #fff;
	padding: 5px;
	border-radius: 10px;
}

.dark-style .collapseAction .collapsedBar {
	background: #283144;
}

.collapseAction .collapseContent {
	position: absolute;
	top: 5px;
	left: 120px;
	width: calc(100% - 360px);
	background: none;
}

	.collapseAction .collapseContent .card-body {
		padding: 0px;
	}

		.collapseAction .collapseContent .card-body div:not(:first-child) {
			display: none;
		}

	.collapseAction .collapseContent input.form-control-lg {
		min-height: 30px;
		height: 38px;
	}

.collapseAction > .drag-handle {
	display: none;
}

.collapseAction .collapsedBar .drag-handle {
	position: static;
	width: auto;
	margin: 0 !important;
	display: inline-block !important;
}



.collapseAction .collapsedBar {
	background: #fff;
	padding: 5px;
	border-radius: 10px;
}

.dark-style .collapseAction .collapsedBar {
	background: #283144;
}

.collapseAction .collapseContent {
	position: absolute;
	top: 5px;
	left: 120px;
	width: calc(100% - 360px);
	background: none;
}

	.collapseAction .collapseContent .card-body {
		padding: 0px;
	}

		.collapseAction .collapseContent .card-body div:not(:first-child) {
			display: none;
		}

	.collapseAction .collapseContent input.form-control-lg {
		min-height: 30px;
		height: 38px;
	}

.collapseAction > .drag-handle {
	display: none;
}

.collapseAction .collapsedBar .drag-handle {
	position: static;
	width: auto;
	margin: 0 !important;
	display: inline-block !important;
}



/*--form view css for mobile, ipad, destop and default view*/
.firstName-lastName {
	display: flex;
}

	.firstName-lastName input:first-of-type {
		margin-right: 10px
	}

.radio-button-gprow {
	display: flex
}

	.radio-button-gprow .form-check {
		margin-right: 10px
	}

.time-input .iconInputRight {
	width: 140px
}

.formViewMode_content_formContent_body_sectionBox .form-control.form-select {
	width: 50%
}

.formViewMode_content_formContent_body_sectionBox .iconInputRight.dt-input {
	width: 140px
}

.phonenumber-input input {
	width: 160px
}

.address-gprow {
	display: flex;
	flex-wrap: wrap;
}

.address-gprow input {
margin-right: 10px;
width: 26%;
}

.address-gprow input:first-of-type {
	width: 49%;
}

.address-gprow input:nth-of-type(2) {
	width: 48%;
	margin: 0;
}

.temperature-input input, .numeric-input input {
	width: 115px
}

.desktop_priview_content .address-gprow input:first-of-type {
	width: 49%;
}
.desktop_priview_content .address-gprow input:nth-of-type(2) {
	width: 49%;
	margin: 0;
}
.supportbutton_top {
	background: #0F3D93;
	color: #fff;
	border: 0;
	border-radius: 5px 0 0 5px;
	right: 0;
	padding: 2px 3px 3px 5px
}

.mobile_priview_content .radio-button-gprow {
	display: block
}

.mobile_priview_content .radio-button-gprow .form-check {
}

.mobile_priview_content .address-gprow {
	display: block;
	flex-wrap: inherit;
}

.mobile_priview_content .address-gprow input:first-of-type, .mobile_priview_content .address-gprow input:nth-of-type(2), .mobile_priview_content .address-gprow input {
	width: 100%;
}
.mobile_priview_content .formViewMode_content_formContent_body_sectionBox .form-control.form-select {
	width:100%
}
.mobile_priview_content .phonenumber-input input {
	width: 100%
}
/*--form view css for mobile, ipad, destop and default view*/


/*--table coloum setting css*/
.dark-style .dx-popup-draggable .dx-popup-content .dx-texteditor-input {
	background: #222a3a
}

.dark-style .dx-popup-draggable .dx-texteditor.dx-editor-outlined {
	border-color: #546990;
	background: transparent;
}

.dark-style .dx-datagrid-column-chooser .dx-popup-draggable.dx-overlay-content .dx-popup-content .dx-column-chooser-item {
	background-color: #222a3a;
	border-color: #546990;
}

.dark-style .dx-popup-wrapper > .dx-overlay-content {
	border-color: #546990;
}
/*--table coloum setting css*/

.fm-btn-cntrol {
	column-gap:6px;
}
.formViewMode_content_formContent_body .card-body button {
	position: relative !important;
	width: calc(50% - 3px) !important;
	border: 2px solid #3d88c8 !important;
	color: #434343 !important;
	background:#fff !important;
	/* column-gap: 5px; */
}
	.formViewMode_content_formContent_body .card-body button.selected {
		border: 2px solid #3d88c8 !important;
		color: #fff !important;
		background: #3d88c8 !important;
		/* column-gap: 5px; */
	}
	.formViewMode_content_formContent_body .card-body button.selected:after {
		display:none;
	}
.task-tem-table-cont {
	position:relative;
}
	.task-tem-table-cont > .btn {
		position: absolute;
		left: 0;
		top: 2px;
		z-index: 1;
	}
.form-check-input.form-check-square {
	border-radius: 0 !important;
}
.radio-btn-grp2 {
	flex-wrap: wrap
}

	.radio-btn-grp2 .subtitleJSON {
		width: 100%
	}

.address-cols .col-md-6:nth-of-type(3), .address-cols .col-md-6:nth-of-type(4), .address-cols .col-md-6:nth-of-type(5) {
	width: 30%
}

.mobile_priview_content .firstName-lastName .col-md-6 {
	width: 100%
}

.mobile_priview_content .address-cols .col-md-6 {
	width: 100%
}

	.mobile_priview_content .address-cols .col-md-6:nth-of-type(3), .mobile_priview_content .address-cols .col-md-6:nth-of-type(4), .mobile_priview_content .address-cols .col-md-6:nth-of-type(5) {
		width: 100%
	}
h5.card-header label {
	font-size: 14px;
	font-weight: 300;
}

.dx-pager .dx-page-sizes .dx-page-size {
	padding: 7px 9px 8px 10px;
	color: #a1b0cb;
}
.dx-pager .dx-page-sizes .dx-page-size {
	padding: 7px 9px 8px 10px;
	color: #a1b0cb;
}
.dx-pager .dx-page-sizes .dx-selection, .dx-pager .dx-pages .dx-selection {
	color: #fff;
	background-color: #2e5bcd;
}
.dx-pager .dx-pages .dx-next-button, .dx-pager .dx-pages .dx-prev-button {
	color: #a1b0cb;
}
.dark-style .localizationMenuInner, .dark-style .modal-title {
	color: #fff;
}
.dx-pager .dx-pages .dx-page, .dx-separator {
	color: #a1b0cb;
}