/**
 * /PresentationLayer/Upper/css/system/main.css
 *
 *
 *
 * This file is to be used for general styles that may be used across multiple pages in Fusion.
 *
 *
 */


/********************************************* STANDARD FORMATTING ************************************/

	/***********************
	 *CLASS: main-card-row
	 *USE: 
	 ***********************/
	.main-card-row{
		padding-left: 20px;
	}
	
	.bg-tan {
	  background-color: #CC9F4F;
	}
	.bg-black {
	  background-color: #212121;
	}
	.bg-pink {
	  background-color: #EB28AF;
	}
	.bg-white {
	  background-color: #ffffff;
	}
	.bg-main {
	  background-color: #F4F4F4;
	}
	.bg-light-gray{
		background-color: #F4F4F4;
	}
	.text-white {
	  color: white;
	}
	.container-bg {
	  background-color: #F4F4F4;
	}
	.main-main {
	  margin-bottom: 50px;
		display:none;
	}
	.main-body {
	  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	}

	.main-card {
	  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
	  border-radius: 0.5rem;
	  padding: 20px 20px 20px 20px !important;
	}

	.main-card-column {
		margin-right: 20px !important;
	}

.main-card-text a {
	font-size:16px;
}

	.main-container {
	  margin-top: 95px;
	}

	.main-container-mobile {
	  margin-top: 195px !important;
	  padding-left: 0px !important;
	  padding-right: 0px !important;
	}

	.main-main-container-row {
	  margin-left: 210px !important;
	}
	.main-main-container-row-mobile {
	  margin-left: 0px;
	}

	.main-card-title {
	  font-size: 1.25rem;
	  color: #575757;
	  font-weight: 500;
	  margin-bottom: 20px;
	}
	.main-card-title-no-margin {
	  margin-bottom: 0px;
	}
	.main-card-subtitle {
	  font-size: 1.0rem;
	  color: #575757;
	}

	.main-option-icon {
		margin-left: 10px;
		cursor: pointer;
		line-height: 1.5em;
	}

	.main-help-icon{
		color: #DFDFDF;
	}

	/***********************
	 *CLASS: main-card-row
	 *USE: 
	 ***********************/
	.main-column {
		padding-right: 50px;
		padding-left: 40px;
	}

	.page-title {
		font-size: 24px;
	}
	
	.page-title a {
		font-size: 24px;
		color: #575757;
	}

/********************************************* FORM FORMATTING ************************************/
	
	/***********************
	 *CLASS: main-check-label
	 *USE: adjust the label for check boxes (MDB)
	 ***********************/
	.main-check-label {
		display: flex !important;
	}

	.main-form-error {
		box-shadow: 0 0 0 0.1rem rgb(249 49 84);
	}

	.btn-row {
		text-align: center;
		margin-top:25px;
	}



	.main-form-field {
	  margin-top: 20px !important;
	}

	.main-help-button{
		border: none;
		background-color: #fff;
		color: #9F9B9B;
	}


	/*********************** HIJACKING THE MDB BOOTSTRAP TO MAKE FORM FIELDS HAVE PINK *********************/

	.form-outline .form-control:focus ~ .form-label {
		color: #EB28AF !important
	}
	.form-outline .form-control:focus ~ .form-notch .form-notch-middle {
		border-bottom-color: #EB28AF !important;
		box-shadow: 0 1px 0 0 #EB28AF !important;
	}
	.form-outline .form-control:focus ~ .form-notch .form-notch-leading {
		border-color: #EB28AF !important;
		box-shadow: -1px 0 0 0 #EB28AF, 0 1px 0 0 #EB28AF, 0 -1px 0 0 #EB28AF !important
	}
	.form-outline .form-control:focus ~ .form-notch .form-notch-trailing {
		border-color: #EB28AF !important;
		box-shadow: 1px 0 0 0 #EB28AF, 0 -1px 0 0 #EB28AF, 0 1px 0 0 #EB28AF !important
	}


	.form-select:focus {
	  border-color: #EB28AF !important;
	  /*outline: 0;*/
	  box-shadow: inset 0 0 0 1px #EB28AF !important
	}
	.form-check-input:checked {
	  border-color: #EB28AF !important
	}
	.form-check-input:checked:focus {
	  border-color: #EB28AF !important
	}
	.form-check-input:checked:focus:before {
	  box-shadow: 0 0 0 13px #EB28AF !important;
	  /*transform: scale(1);
	  transition: box-shadow .2s, transform .2s*/
	}
	.form-check-input:indeterminate:focus:before {
	  box-shadow: 0 0 0 13px #EB28AF !important
	}
	.form-check-input[type=checkbox]:checked {
	  /*background-image: none;*/
	  background-color: #EB28AF !important
	}
	.form-check-input[type=checkbox]:checked:focus {
	  background-color: #EB28AF !important
	}
	.form-check-input[type=checkbox]:indeterminate {
	  border-color: #EB28AF !important
	}
	.form-check-input[type=radio]:checked:after {
	  border-color: #EB28AF !important;
	  background-color: #EB28AF !important;
	}
	.form-switch .form-check-input:checked:focus:before {
	  box-shadow: 3px -1px 0 13px #EB28AF !important;
	}
	.form-switch .form-check-input:checked[type=checkbox]:after {
	  background-color: #EB28AF !important;
	}
	.input-group > .form-control:focus {

	  border-color: #EB28AF !important;
	  box-shadow: inset 0 0 0 1px #EB28AF !important;
	}
	.datepicker-cell.selected .datepicker-cell-content {
	  background-color: #EB28AF !important;
	}
	.buttons-container {
		background-color: #EB28AF !important;
	}
	.timepicker-head {
	  background-color: #EB28AF !important;
	}
	.timepicker-time-tips-hours.active, .timepicker-time-tips-inner.active, .timepicker-time-tips-minutes.active {

		background-color: #EB28AF !important;
	}
	.timepicker-hand-pointer {
		background-color: #EB28AF !important;
	}
	.timepicker-circle {
		border: 14px solid #EB28AF !important;
	}
	.timepicker-middle-dot {
		background-color: #EB28AF !important;
	}
	.timepicker-button {
		color: #EB28AF !important
	}
	.timepicker-button.timepicker-submit.timepicker-submit-inline
	{
	  color: #FFFFFF !important
	}
	.datetimepicker-toggle-button:focus, .datetimepicker-toggle-button:hover, .timepicker-input:focus + .timepicker-toggle-button, .timepicker-input:focus + .timepicker-toggle-button i, .timepicker-toggle-button:focus, .timepicker-toggle-button:hover {
	  color: #EB28AF !important
	}
	.datetimepicker-toggle-button:focus, .datetimepicker-toggle-button:hover {
	  color: #EB28AF !important
	}
	.datepicker-header {
	  background-color: #EB28AF !important
	}
	.datepicker-toggle-button:focus, .datepicker-toggle-button:hover {
	  color: #EB28AF !important
	}
	.datepicker-footer-btn{
		color: #EB28AF !important
	}
	.select-input.focused ~ .select-arrow {
	  color: #EB28AF !important
	}
	.select-clear-btn:focus {
	  color: #EB28AF !important;
	}
	.select-input.focused ~ .select-label {
	  color: #EB28AF !important
	}
	.select-input.focused ~ .form-notch .form-notch-leading {
	  border-top: 2px solid #EB28AF !important;
	  border-bottom: 2px solid #EB28AF !important;
	  border-left: 2px solid #EB28AF !important;
	}
	.select-input.focused ~ .form-notch .form-notch-middle {
	  border-bottom: 2px solid;
	  border-color: #EB28AF !important;
	}
	.select-input.focused ~ .form-notch .form-notch-trailing {
	  border-color: currentcolor currentcolor currentcolor #EB28AF !important;
	  border-bottom: 2px solid #EB28AF !important;
	  border-right: 2px solid #EB28AF !important;
	  border-top: 2px solid #EB28AF !important;
	}
	.select-input.focused ~ .select-arrow {
	  color: #EB28AF !important
	}
	.loading-spinner {
	  color: #EB28AF !important;
	}

	.main-primary-button {
		background-color: #EBEFF3 !important;
		color: #272727 !important;
		font-weight: bold !important;
		  margin-left: 10px !important;
		  height: 35px !important;
		padding: 0.625rem 1.5rem 0.5rem !important;
	}

	.main-secondary-button {
		background-color: #CC9F4F !important;
		color: white !important;
		margin-left: 10px !important;
		height: 35px !important;
		padding: 0.625rem 1.5rem 0.5rem !important;
	}

	.main-secondary-button:hover {
		border: none;
	}

	.main-button-upper-right {
		float: right;
	}

	.main-card-button {
		margin-top: 15px;
	}

	.btn-outline-danger {
	  padding-top: 7.5px !important;
	  padding-bottom: 5.5px !important;
	}

	.main-row {
		margin-top: 15px !important;
	}

	.invalid-feedback{
		margin: 20px;
	}
	.error {
	   border-color: #F93154;
	}

	.error-label {
	   color: #F93154;
	}

	.stepper-active .stepper-head-icon {
		background-color: #EB28AF !important;
	}

	.stepper-completed .stepper-head-icon {
		background-color: #CC9F4F !important;
	}

	.form-control{
		margin: 0px !important;
	}

	.main-form-input {
	  margin-bottom: 17px;
	}

.card-iframe-top{
	border-top-left-radius: calc(0.5rem - 1px);
    border-top-right-radius: calc(0.5rem - 1px);
	overflow: hidden;
}

.table-sm>:not(caption)>*>*{
	padding-left: 10px !important;
	padding-right: 10px !important;
}


/********************************************* FOLDER DISPLAY LIST FORMATTING ************************************/

	/***********************
	 *CLASS: folder-dark
	 *USE: modifies the folder icon from mdb
	 ***********************/
	.folder-dark{
		color: #CC9F4F !important;
	}

	/***********************
	 *CLASS: folder-row
	 *USE: used in sections where we display folders (ie. cpn_folder)
	 ***********************/
	.folder-row{
		padding: 5px !important;
		font-size: 12px;
	}

	.folder-list-padding{
		padding: 10px;
	}

	.folder-breadcrumb{
		border: none;
		background-color: transparent;
	}

	.modal-folder-path{
		font-size: 12px;
	}

	.modal-folder-card{
		background-color: #F1F1F1 !important;
		margin: 0px;
		margin-top: 20px;
		padding-left: 0px !important;
		padding-right: 0px !important;
		
	}

/********************************************* MODAL FORMATTING ************************************/
	.modal-title1{
		font-weight: 500;
		margin-bottom: 0;
		line-height: 1.6;
		display: block;
		color: #575757;
		font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
		font-size: 20pt;
	}


	.modal-container-pad{
		padding-left: 15px;
	}

	.main-modal-add{
		margin-top: 20px;
	}
	.headline-text {
	  font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
	}

	.main-modal-clear{
		margin-bottom: 10px;
	}

	.modal-footer{
		justify-content: center !important;
	}

/********************************************* TOAST FORMATTING ************************************/


/********************************************* DATATABLE FORMATTING ************************************/
	.datatable-checkbox{
		width: 25px;
	}
	.datatable table td, .datatable table th{
		padding: 10px;
	}
	/* hijacking/overwriting mdb styles */
	tr div {
		max-height:none !important;
	}
	b {
		font-weight: bold !important;
	}

	.table {
		font-size: 12px !important;
	}

	.table {
		padding: 10px !important;
	}

	.datatable thead th {
		font-weight: bold !important;
		color: whitesmoke !important;
		font-size: 14px !important;
		background-color: slategrey !important;
	}