/* Style Guide Modal Styling */

/* Modal Sizes */

.modal-sm {
	min-width: 590px;
	max-width: 590px;
	min-height: 510px;
    max-height: 510px;
}

.modal-lg {
	min-width: 974px;
	max-width: 974px;
	min-height: 1150px;
	max-height: 1150px;
}
.modal-lg-width {
	min-width: 974px;
	max-width: 974px;
	min-height: 1150px;
	max-height: 1150px;
	font-size: 11px !important;
}

.modal-lg-scroll {
	min-width: 974px;
	max-width: 974px;
	min-height: 851px;
	max-height: 851px;
}
.wordBreakAll {
word-break: break-all;
}

/* Modal Content Styling */

.modal-content-sm {
	padding: 40px;
	border-radius: 10px;
	background-color: #fff;
}

.modal-content-lg {
	padding: 34px 40px;
	border-radius: 10px;
	background-color: #fff;
}

/* Modal Header Styling */

.modal-header-style-guide {
	padding: 0;
	border: none;
	margin-bottom: 31px;
}

/*  Modal Title Styling */
.modal-title-style-guide {
	margin: 0;
	font-size: 22px;
	line-height: 29px;
	font-family: 'Aleck Regular', sans-serif;
	color: #444444;
}

.modal-title-style-guide-compare {
	margin: 0;
	font-size: 18px;
	line-height: 18px;
	padding-bottom: 10px;
	font-family: 'Aleck Regular', sans-serif;
	color: #444444;
}

/* Modal Close Styling */
.modal-close-style-guide {
	width: 20px;
	height: 20px;
	float: right;
	background: none;
	border: 0px solid #444444;
	border-radius: 100;
	padding: 0px;
	margin-right: -10px;
    margin-top: -10px;
	
}

.modal-close-style-guide2 {
	width: 20px;
	height: 20px;
	float: right;
	background: none;
	border: 0px solid #444444;
	border-radius: 100;
	padding:30px;
	margin-right: -10px;
    margin-top: -10px;
	
}

.modal-close-icon {
  width: 20px;
  height: 20px; 
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.reportsClose {
    line-height: 2px;
    text-align: -webkit-center;
    font-size: 20px;
    margin-right: -10px !important;
    margin-top: -10px;
    border: 1.2px solid #595959;
    color: #595959;
}  

/* Modal Body Styling */
.modal-body-style-guide {
	padding: 0;
	margin-bottom: 40px;
	font-family: "Lucida Console", Monaco, monospace;
	border: 1px solid #4A4A4A;
	border-radius: 4px;
	max-height: 750px;
	overflow-y: scroll;
	padding: 20px 15px;
}

.modal-body-style-guide-no-border {
	padding: 0;
	margin-bottom: 40px;
	font-family: 'Aleck Regular', sans-serif;
	border-radius: 4px;
	max-height: 750px;
	overflow-y: scroll;
	padding: 20px 15px;
}

.modal-body-style-guide-no-scroll {
	padding: 0;
	margin-bottom: 40px;
	font-family: "Lucida Console", Monaco, monospace;
	border: 1px solid #4A4A4A;
	border-radius: 4px;
	padding: 20px 15px;
}

.modal-body-style-guide-no-border-no-scroll {
	padding: 0;
	margin-bottom: 40px;
	font-family: "Lucida Console", Monaco, monospace;
	border-radius: 4px;
	max-height: 750px;
	padding: 20px 15px;
}

.modal-body-style-guide-compare-scroll {
	padding: 0;
	margin-bottom: 40px;
	font-family: "Lucida Console", Monaco, monospace;
	border: 1px solid #4A4A4A;
	border-radius: 4px;
	max-height: 626px;
	overflow-y: scroll;
	overflow-x: hidden;
	padding: 20px 15px;
}

.modal-body-style-guide-aleck {
	padding: 0;
	margin-bottom: 40px;
	font-family: 'Aleck Regular', sans-serif;
	border: 1px solid #4A4A4A;
	border-radius: 4px;
	max-height: 750px;
	overflow-y: scroll;
	padding: 20px 15px;
}

/* Modal Footer Styling */
.modal-footer-style-guide {
	padding: 0;
}

.modal-footer-btn-right {
	text-align: right;
}

/* Modal Search box right */
.modal-search-right {
	float: right;
	border-radius: 4px;
	border: 1px solid #979797;
	min-height: 28px;
	top:0;
	right:0;
	position:sticky;
}
/* Scroll bar in Modal styling */

/* width */
::-webkit-scrollbar {
    width: 10px !important;

}

/* Track */
::-webkit-scrollbar-track {
    background: none !important;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
	background: #4A4A4A !important;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #4A4A4A !important;
}


/* Modal Body with compare Heading styling  */

.modal-compare-heading {
	display: flex;
	flex-wrap: nowrap;
}

.modal-compare-heading>div {
	flex-grow: 1;
}

.modal-body-font-family{
	font-family: 'Aleck Regular', sans-serif;
}

.modal-dotted-horizontal-line{
	border-top: dotted 1px;
}