You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							1059 lines
						
					
					
						
							20 KiB
						
					
					
				
			
		
		
	
	
							1059 lines
						
					
					
						
							20 KiB
						
					
					
				@tailwind base; | 
						|
@tailwind components; | 
						|
@tailwind utilities; | 
						|
 | 
						|
@font-face { | 
						|
  font-family: "iransans-medium"; | 
						|
  src: url(./assets/fonts/IRANSansXFaNum-Regular.woff); | 
						|
} | 
						|
 | 
						|
@font-face { | 
						|
  font-family: "sansbold"; | 
						|
  src: url(./assets/fonts/IRANSansWeb_Bold.woff); | 
						|
} | 
						|
 | 
						|
@import "./components/productDesign/ProductDesign.scss"; | 
						|
 | 
						|
body { | 
						|
  font-family: iransans-medium; | 
						|
  direction: rtl; | 
						|
  background-color: #f5f5f5; | 
						|
} | 
						|
 | 
						|
.rtl { | 
						|
  direction: rtl; | 
						|
} | 
						|
 | 
						|
.ltr { | 
						|
  direction: ltr; | 
						|
} | 
						|
 | 
						|
.comment-num { | 
						|
  font-size: 8px; | 
						|
  padding-top: 4px; | 
						|
  padding-bottom: 2px; | 
						|
  padding-left: 4px; | 
						|
  padding-right: 4px; | 
						|
  border-radius: 50%; | 
						|
} | 
						|
 | 
						|
// TODO Start FormInput Component | 
						|
 | 
						|
.rmdp-container { | 
						|
  display: flex !important; | 
						|
  flex-direction: column-reverse; | 
						|
} | 
						|
 | 
						|
.rmdp-container > div { | 
						|
  position: relative !important; | 
						|
  transform: none !important; | 
						|
} | 
						|
 | 
						|
// * end FormInput Component | 
						|
 | 
						|
// TODO Start Alert Component | 
						|
 | 
						|
// varibale Colors | 
						|
// ? common colors: | 
						|
$alertBorderClr: #707070; | 
						|
$alertContentColor: #646464; | 
						|
$white: #fff; | 
						|
// $BgHeaderColor | 
						|
 | 
						|
// ? blue alert Box , error1 | 
						|
$lightBlue: #06bace; | 
						|
$confirmBtnBgColor: #f6feff; | 
						|
$blueTitleBgColor: #dfe6e9; | 
						|
 | 
						|
// * green alert Box , error1 | 
						|
$lightGreen: #3ee924; | 
						|
$darkGreen: #21ae0b; | 
						|
$greenTitleBgColor: #91ff5233; | 
						|
 | 
						|
// ! red alert Box , error7 | 
						|
$darkRed: #c70000; | 
						|
$redTitleBgColor: #ff525233; | 
						|
$red: #e92424; | 
						|
 | 
						|
// ! common styles | 
						|
// * alert box | 
						|
.swal2-container.swal2-center > .swal2-popup { | 
						|
  border: solid 2px $alertBorderClr !important; | 
						|
  border-top-right-radius: 10px !important; | 
						|
  border-top-left-radius: 10px !important; | 
						|
  // | 
						|
  position: relative; | 
						|
} | 
						|
 | 
						|
// * کلاس تمامی تایتل ها | 
						|
.swal2-title { | 
						|
  text-align: right !important; | 
						|
  font-size: 20px !important; | 
						|
  padding: 15px !important; | 
						|
  font-weight: 400 !important; | 
						|
  margin-top: -4px; | 
						|
  border-top-right-radius: 10px !important; | 
						|
  border-top-left-radius: 10px !important; | 
						|
} | 
						|
 | 
						|
// * کلاس متن داخل الرت باکس | 
						|
.swal2-html-container { | 
						|
  text-align: justify !important; | 
						|
  line-height: 1.8 !important; | 
						|
  color: $alertContentColor !important; | 
						|
  font-size: 16px !important; | 
						|
} | 
						|
 | 
						|
// * کلاس ایکن کنسل یا ضربدر بالا سمت چپ الرت باکس | 
						|
.swal2-rtl .swal2-close { | 
						|
  width: 31px !important; | 
						|
  height: 30px !important; | 
						|
  margin-top: 11px; | 
						|
  margin-left: 24px !important; | 
						|
  padding: 0; | 
						|
  border-radius: 5px; | 
						|
  cursor: pointer; | 
						|
  justify-self: end; | 
						|
  font-size: 33px !important; | 
						|
  border-radius: 4px !important; | 
						|
  transition: all 0.2s !important; | 
						|
  z-index: 2; | 
						|
} | 
						|
 | 
						|
// * کلاس کانفرم باتن | 
						|
.swal2-styled.swal2-confirm { | 
						|
  transition: all 0.4s !important; | 
						|
  outline: none !important; | 
						|
  border-radius: 4px !important; | 
						|
} | 
						|
 | 
						|
// * کلاس هاور کانفرم باتن | 
						|
.swal2-styled.swal2-confirm:hover { | 
						|
  transform: translateY(-5px) !important; | 
						|
} | 
						|
 | 
						|
// * کلاس کنسل باتن | 
						|
.swal2-styled.swal2-cancel { | 
						|
  transition: all 0.4s !important; | 
						|
} | 
						|
 | 
						|
// * کلاس هاور کنسل باتن | 
						|
.swal2-styled.swal2-cancel:hover { | 
						|
  transform: translateY(-5px) !important; | 
						|
} | 
						|
 | 
						|
// * ایکن اررور | 
						|
.swal2-icon.swal2-error { | 
						|
  border-color: $darkRed !important; | 
						|
  color: $darkRed !important; | 
						|
} | 
						|
 | 
						|
// ? error 1 lightBlue | 
						|
// * به اررور های ابی رنگ کلاس هایی دادم که اخرش با 1 تمام میشود | 
						|
//  TODO باکس اول از سمت راست در فایل پی اس دی | 
						|
//  ? تایتل | 
						|
.title-error-1 { | 
						|
  color: $lightBlue !important; | 
						|
  background-color: $blueTitleBgColor !important; | 
						|
} | 
						|
 | 
						|
// * دکمه ضربدر بالا سمت چپ | 
						|
.close-button-1 { | 
						|
  background-color: $lightBlue !important; | 
						|
  color: $white !important; | 
						|
} | 
						|
 | 
						|
// * هاور دکمه ضربدر بالا سمت چپ | 
						|
.close-button-1:hover { | 
						|
  background-color: $white !important; | 
						|
  color: $lightBlue !important; | 
						|
  border: solid 2px $lightBlue !important; | 
						|
} | 
						|
 | 
						|
// * کانفرم باتن | 
						|
.confirm-button-1 { | 
						|
  background-color: $confirmBtnBgColor !important; | 
						|
  border: solid 1px $lightBlue !important; | 
						|
  color: $lightBlue !important; | 
						|
  // | 
						|
  position: absolute !important; | 
						|
  left: 20px !important; | 
						|
  margin-bottom: 33px !important; | 
						|
} | 
						|
 | 
						|
// * هاور کانفرم باتن | 
						|
.confirm-button-1:hover { | 
						|
  background-color: $lightBlue !important; | 
						|
  color: $white !important; | 
						|
} | 
						|
 | 
						|
// ? error 2 lightBlue | 
						|
// TODO کنسل باتن | 
						|
.cancle-button1 { | 
						|
  background-color: $lightBlue !important; | 
						|
  color: $white !important; | 
						|
  border: solid 1px $lightBlue !important; | 
						|
  // | 
						|
  position: absolute !important; | 
						|
  left: 33% !important; | 
						|
  margin-bottom: 33px !important; | 
						|
} | 
						|
 | 
						|
// TODO هاور کنسل باتن | 
						|
.cancle-button1:hover { | 
						|
  background: $white !important; | 
						|
  color: $lightBlue !important; | 
						|
} | 
						|
 | 
						|
// ? error3 | 
						|
// TODO تایتل | 
						|
.title-error-2 { | 
						|
  color: $darkGreen !important; | 
						|
  background-color: $greenTitleBgColor !important; | 
						|
} | 
						|
 | 
						|
// * دکمه ضربدر بالا سمت چپ | 
						|
.close-button-2 { | 
						|
  background-color: $lightGreen !important; | 
						|
  color: $white !important; | 
						|
} | 
						|
 | 
						|
// * هاور دکمه ضربدر بالا سمت چپ | 
						|
.close-button-2:hover { | 
						|
  background-color: $white !important; | 
						|
  color: $lightGreen !important; | 
						|
  border: solid 2px $lightGreen !important; | 
						|
} | 
						|
 | 
						|
// * کانفرم باتن | 
						|
.confirm-button-2 { | 
						|
  background-color: $white !important; | 
						|
  border: solid 1px $lightGreen !important; | 
						|
  color: $darkGreen !important; | 
						|
  // | 
						|
  position: absolute !important; | 
						|
  left: 20px !important; | 
						|
  margin-bottom: 33px !important; | 
						|
} | 
						|
 | 
						|
// * هاور کانفرم باتن | 
						|
.confirm-button-2:hover { | 
						|
  background-color: $lightGreen !important; | 
						|
  color: $white !important; | 
						|
} | 
						|
 | 
						|
// * کنسل باتن | 
						|
.cancle-button2 { | 
						|
  background-color: $lightGreen !important; | 
						|
  color: $white !important; | 
						|
  border: solid 1px $lightGreen !important; | 
						|
  // | 
						|
  position: absolute !important; | 
						|
  left: 33% !important; | 
						|
  margin-bottom: 33px !important; | 
						|
} | 
						|
 | 
						|
// * هاور کنسل باتن | 
						|
.cancle-button2:hover { | 
						|
  background: $white !important; | 
						|
  color: $lightGreen !important; | 
						|
} | 
						|
 | 
						|
// ? error4 | 
						|
// TODO تایتل | 
						|
.title-error-4 { | 
						|
  text-align: center !important; | 
						|
  color: $darkGreen !important; | 
						|
} | 
						|
 | 
						|
// * کانفرم باتن | 
						|
.confirm-button-4 { | 
						|
  background-color: $white !important; | 
						|
  border: solid 1px $lightGreen !important; | 
						|
  color: $darkGreen !important; | 
						|
} | 
						|
 | 
						|
// * هاور کانفرم باتن | 
						|
.confirm-button-4:hover { | 
						|
  background-color: $lightGreen !important; | 
						|
  color: $white !important; | 
						|
} | 
						|
 | 
						|
// * کنسل باتن | 
						|
.cancle-button4 { | 
						|
  background-color: $lightGreen !important; | 
						|
  color: $white !important; | 
						|
  border: solid 1px $lightGreen !important; | 
						|
} | 
						|
 | 
						|
// * هاور کنسل باتن | 
						|
.cancle-button4:hover { | 
						|
  background: $white !important; | 
						|
  color: $lightGreen !important; | 
						|
} | 
						|
 | 
						|
// * alert box width | 
						|
.alert-popup4 { | 
						|
  width: 440px !important; | 
						|
} | 
						|
 | 
						|
// ? error5 | 
						|
// TODO کانفرم باتن | 
						|
.confirm-button-5 { | 
						|
  background-color: $lightGreen !important; | 
						|
  padding: 12px 15px !important; | 
						|
  border-top-right-radius: 0px !important; | 
						|
  border-bottom-right-radius: 0px !important; | 
						|
  position: absolute; | 
						|
  left: 4% !important; | 
						|
  bottom: 8% !important; | 
						|
} | 
						|
 | 
						|
// *input field | 
						|
.input-error-5 { | 
						|
  position: relative; | 
						|
  border-top-left-radius: 0px !important; | 
						|
  border-bottom-left-radius: 0px !important; | 
						|
} | 
						|
 | 
						|
// ? error6 | 
						|
// TODO دکمه ضربدر بالا سمت چپ | 
						|
.close-button-6 { | 
						|
  color: $lightBlue !important; | 
						|
} | 
						|
 | 
						|
// ? error7 | 
						|
// TODO تایتل | 
						|
.title-error-7 { | 
						|
  color: $darkRed !important; | 
						|
  background-color: $redTitleBgColor !important; | 
						|
} | 
						|
 | 
						|
// * دکمه ضربدر بالا سمت چپ | 
						|
.close-button-7 { | 
						|
  background-color: $red !important; | 
						|
  color: $white !important; | 
						|
} | 
						|
 | 
						|
// * هاور دکمه ضربدر بالا سمت چپ | 
						|
.close-button-7:hover { | 
						|
  background-color: $white !important; | 
						|
  color: $red !important; | 
						|
  border: solid 2px $red !important; | 
						|
} | 
						|
 | 
						|
// * کانفرم باتن | 
						|
.confirm-button-7 { | 
						|
  background-color: $redTitleBgColor !important; | 
						|
  border: solid 1px $darkRed !important; | 
						|
  color: $darkRed !important; | 
						|
  // | 
						|
  position: absolute !important; | 
						|
  left: 20px !important; | 
						|
  margin-bottom: 33px !important; | 
						|
} | 
						|
 | 
						|
// * هاور کانفرم باتن | 
						|
.confirm-button-7:hover { | 
						|
  background-color: $red !important; | 
						|
  color: $white !important; | 
						|
} | 
						|
 | 
						|
// * کنسل باتن | 
						|
.cancle-button7 { | 
						|
  background-color: $red !important; | 
						|
  border: solid 1px $red !important; | 
						|
  color: $white !important; | 
						|
  // | 
						|
  position: absolute !important; | 
						|
  left: 33% !important; | 
						|
  margin-bottom: 33px !important; | 
						|
} | 
						|
 | 
						|
// * هاور کنسل باتن | 
						|
.cancle-button7:hover { | 
						|
  background: $white !important; | 
						|
  color: $red !important; | 
						|
} | 
						|
 | 
						|
// ? error8 | 
						|
.title-error-8 { | 
						|
  color: $darkRed !important; | 
						|
  text-align: center !important; | 
						|
} | 
						|
 | 
						|
// * کانفرم باتن | 
						|
.confirm-button-8 { | 
						|
  background-color: $redTitleBgColor !important; | 
						|
  border: solid 1px $darkRed !important; | 
						|
  color: $darkRed !important; | 
						|
} | 
						|
 | 
						|
// * هاور کانفرم باتن | 
						|
.confirm-button-8:hover { | 
						|
  background-color: $red !important; | 
						|
  color: $white !important; | 
						|
} | 
						|
 | 
						|
// * کنسل باتن | 
						|
.cancle-button-8 { | 
						|
  background-color: $red !important; | 
						|
  border: solid 1px $red !important; | 
						|
  color: $white !important; | 
						|
} | 
						|
 | 
						|
// * هاور کنسل باتن | 
						|
.cancle-button-8:hover { | 
						|
  background: $white !important; | 
						|
  color: $red !important; | 
						|
} | 
						|
 | 
						|
// * alert box width | 
						|
.alert-popup8 { | 
						|
  width: 440px !important; | 
						|
} | 
						|
 | 
						|
// ? error9 | 
						|
.title-error-9 { | 
						|
  color: $white !important; | 
						|
} | 
						|
 | 
						|
.alert-popup9 { | 
						|
  background-color: $darkRed !important; | 
						|
  border-color: $darkRed !important; | 
						|
} | 
						|
 | 
						|
.close-button-9 { | 
						|
  background-color: $white !important; | 
						|
  color: $red !important; | 
						|
} | 
						|
 | 
						|
.confirm-button-9 { | 
						|
  background-color: $red !important; | 
						|
} | 
						|
 | 
						|
.cancle-button9 { | 
						|
  background-color: $white !important; | 
						|
  color: $red !important; | 
						|
} | 
						|
 | 
						|
.footer-error-9 a { | 
						|
  color: $white !important; | 
						|
} | 
						|
 | 
						|
// ? error10 | 
						|
 | 
						|
.alert-popup10 { | 
						|
  background-color: $darkGreen !important; | 
						|
  border-color: $darkGreen !important; | 
						|
} | 
						|
 | 
						|
.close-button-10 { | 
						|
  background-color: $white !important; | 
						|
  color: $darkGreen !important; | 
						|
} | 
						|
 | 
						|
.confirm-button-10 { | 
						|
  background-color: $lightGreen !important; | 
						|
} | 
						|
 | 
						|
.cancle-button10 { | 
						|
  background-color: $white !important; | 
						|
  color: $lightGreen !important; | 
						|
} | 
						|
 | 
						|
// * end Alert Component | 
						|
 | 
						|
// TODO Start Blogs/Design2 Component | 
						|
 | 
						|
.child-text { | 
						|
  transition: all 0.4s; | 
						|
} | 
						|
.parent:hover .child-text { | 
						|
  transition: all 0.4s; | 
						|
  transform: translateY(-7px) !important; | 
						|
} | 
						|
 | 
						|
// * end Blogs/Design2 Component | 
						|
 | 
						|
// TODO  Start CardDesign3 Component | 
						|
 | 
						|
.scrollYDesign::-webkit-scrollbar { | 
						|
  position: absolute; | 
						|
  left: 1px; | 
						|
  bottom: 0; | 
						|
  z-index: 2; | 
						|
  width: 4px; | 
						|
  /* width: 5px !important; */ | 
						|
} | 
						|
 | 
						|
.scrollYDesign::-webkit-scrollbar-button { | 
						|
  display: none; | 
						|
  appearance: none; | 
						|
} | 
						|
 | 
						|
.scrollYDesign::-webkit-scrollbar-thumb { | 
						|
  border-radius: 10px; | 
						|
  background-color: #b9d1f3; | 
						|
} | 
						|
 | 
						|
.scrollYDesign::-webkit-scrollbar-track { | 
						|
  background-color: transparent !important; | 
						|
  display: none; | 
						|
  appearance: none; | 
						|
} | 
						|
 | 
						|
// * end CardDesign3 Component | 
						|
 | 
						|
// TODO  Start ContactInfoSection Component | 
						|
 | 
						|
.customer-support { | 
						|
  transition: all 0.4s; | 
						|
} | 
						|
 | 
						|
.customer-support:hover { | 
						|
  transform: translateY(-7px) !important; | 
						|
} | 
						|
 | 
						|
// * end ContactInfoSection Component | 
						|
 | 
						|
// TODO  Start DateRangePicker Component | 
						|
 | 
						|
.rmdp-arrow-container { | 
						|
  background-color: #3b98f3; | 
						|
  border-radius: 4px !important; | 
						|
  height: 24px !important; | 
						|
  width: 24px !important; | 
						|
} | 
						|
 | 
						|
.rmdp-arrow-container:hover { | 
						|
  box-shadow: none !important; | 
						|
} | 
						|
 | 
						|
.rmdp-day { | 
						|
  color: #1073d5 !important; | 
						|
} | 
						|
 | 
						|
.rmdp-day.rmdp-deactive, | 
						|
.rmdp-day.rmdp-disabled { | 
						|
  color: #8798ad !important; | 
						|
} | 
						|
 | 
						|
.disabled { | 
						|
  background-color: transparent !important; | 
						|
} | 
						|
 | 
						|
.rmdp-arrow-container .rmdp-arrow { | 
						|
  border: solid #fff; | 
						|
  border-width: 0 2px 2px 0; | 
						|
  margin-top: 8px !important; | 
						|
} | 
						|
 | 
						|
.rmdp-wrapper .start { | 
						|
  background: #3b98f3 !important; | 
						|
  color: #fff !important; | 
						|
  border: none !important; | 
						|
  box-shadow: none !important; | 
						|
  border-top-right-radius: 4px !important; | 
						|
  border-bottom-right-radius: 4px !important; | 
						|
} | 
						|
 | 
						|
.rmdp-wrapper .end { | 
						|
  background: #3b98f3 !important; | 
						|
  color: #fff !important; | 
						|
  border: none !important; | 
						|
  box-shadow: none !important; | 
						|
  border-top-left-radius: 4px !important; | 
						|
  border-bottom-left-radius: 4px !important; | 
						|
} | 
						|
 | 
						|
.rmdp-range { | 
						|
  background: #f7f7f7 !important; | 
						|
  color: #3b98f3 !important; | 
						|
  border: none !important; | 
						|
  box-shadow: none !important; | 
						|
} | 
						|
 | 
						|
.rmdp-header-values span { | 
						|
  color: #12508e !important; | 
						|
  font-weight: bold !important; | 
						|
} | 
						|
 | 
						|
.rmdp-week-day { | 
						|
  color: #3b98f3; | 
						|
  font-size: 9px !important; | 
						|
} | 
						|
 | 
						|
.rmdp-shadow { | 
						|
  box-shadow: none !important; | 
						|
  border: solid 1px #dbdbdb !important; | 
						|
} | 
						|
 | 
						|
.rmdp-day.rmdp-today span { | 
						|
  color: #f7f7f7 !important; | 
						|
  background-color: #7ea6f0 !important; | 
						|
  border-radius: 4px !important; | 
						|
} | 
						|
 | 
						|
.rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover { | 
						|
  color: #fff; | 
						|
  border-radius: 4px; | 
						|
  background: #f7f7f7 !important; | 
						|
  color: #3b98f3 !important; | 
						|
} | 
						|
 | 
						|
// * end DateRangePicker Component | 
						|
 | 
						|
// TODO  Start Folderlist Component | 
						|
 | 
						|
.no-scrollbar { | 
						|
  -ms-overflow-style: none; /* IE and Edge */ | 
						|
  scrollbar-width: none; /* Firefox */ | 
						|
} | 
						|
 | 
						|
.tabbar { | 
						|
  cursor: pointer; | 
						|
} | 
						|
 | 
						|
.active2, | 
						|
.active2 li a { | 
						|
  cursor: move !important; | 
						|
} | 
						|
 | 
						|
// * end Folderlist Component | 
						|
 | 
						|
// TODO  Start Footer/Design1 Component | 
						|
 | 
						|
.footer-items { | 
						|
  transition: all 0.4s; | 
						|
} | 
						|
 | 
						|
.footer-items:hover { | 
						|
  transform: translateY(-2px) !important; | 
						|
} | 
						|
 | 
						|
// * end Footer/Design1 Component | 
						|
 | 
						|
// TODO  Start LeafletMap Component | 
						|
 | 
						|
.leaflet-container { | 
						|
  width: 100%; | 
						|
  height: 100vh; | 
						|
} | 
						|
 | 
						|
.leaflet-control-scale-line:not(:first-child) { | 
						|
  display: none !important; | 
						|
} | 
						|
 | 
						|
.leaflet-tile { | 
						|
  border: 1px solid gray; | 
						|
 | 
						|
  box-sizing: content-box; | 
						|
} | 
						|
 | 
						|
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon { | 
						|
  display: none !important; | 
						|
} | 
						|
 | 
						|
// .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle { | 
						|
//   display: none !important; | 
						|
// } | 
						|
 | 
						|
// .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker { | 
						|
//   display: none !important; | 
						|
// } | 
						|
 | 
						|
.leaflet-right .leaflet-draw-actions li:first-child a { | 
						|
  border-radius: 0px !important; | 
						|
} | 
						|
 | 
						|
.leaflet-right .leaflet-draw-actions li:last-child a { | 
						|
  border-radius: 4px 0 0 4px; | 
						|
} | 
						|
 | 
						|
.leaflet-popup-content, | 
						|
.leaflet-draw-toolbar a, | 
						|
.leaflet-popup-content, | 
						|
.leaflet-draw-toolbar span, | 
						|
.leaflet-popup-content, | 
						|
.leaflet-draw-toolbar title, | 
						|
.leaflet-popup-content, | 
						|
.leaflet-draw-toolbar p, | 
						|
l.leaflet-popup-content, | 
						|
.leaflet-draw-toolbar i { | 
						|
  font-family: "iransans-medium" !important; | 
						|
} | 
						|
 | 
						|
.leaflet-touch .leaflet-draw-actions a { | 
						|
  font-family: "iransans-medium" !important; | 
						|
} | 
						|
 | 
						|
// * end LeafletMap Component | 
						|
 | 
						|
// TODO  Start PopupCard Component | 
						|
 | 
						|
.MuiOutlinedInput-input { | 
						|
  box-shadow: none !important; | 
						|
  font-family: iransans-medium !important; | 
						|
} | 
						|
 | 
						|
.MuiOutlinedInput-input::placeholder { | 
						|
  font-family: iransans-medium !important; | 
						|
} | 
						|
 | 
						|
// * end PopupCard Component | 
						|
 | 
						|
// TODO  Start ProductImage Component | 
						|
 | 
						|
.no-scrollbar::-webkit-scrollbar { | 
						|
  display: none; | 
						|
} | 
						|
 | 
						|
/* Hide scrollbar for IE, Edge and Firefox */ | 
						|
.no-scrollbar { | 
						|
  -ms-overflow-style: none; /* IE and Edge */ | 
						|
  scrollbar-width: none; /* Firefox */ | 
						|
} | 
						|
 | 
						|
// * end PopupCard ProductImage | 
						|
 | 
						|
// TODO  Start ReactTable4 Component | 
						|
 | 
						|
.customeClass1 .customeClass2 input { | 
						|
  display: none !important; | 
						|
} | 
						|
.customeClass1 .customeClass2 span { | 
						|
  display: none !important; | 
						|
} | 
						|
.no-scrollbar { | 
						|
  -ms-overflow-style: none; /* IE and Edge */ | 
						|
  scrollbar-width: none; /* Firefox */ | 
						|
} | 
						|
.tabbar { | 
						|
  cursor: pointer; | 
						|
} | 
						|
.active2, | 
						|
.active2 li a { | 
						|
  cursor: move !important; | 
						|
} | 
						|
 | 
						|
// * end PopupCard ReactTable4 | 
						|
 | 
						|
// TODO  Start ReactTable5 Component | 
						|
 | 
						|
.customeClass1 .customeClass2 input { | 
						|
  display: none !important; | 
						|
} | 
						|
 | 
						|
.customeClass1 .customeClass2 span { | 
						|
  display: none !important; | 
						|
} | 
						|
 | 
						|
.no-scrollbar { | 
						|
  -ms-overflow-style: none; /* IE and Edge */ | 
						|
  scrollbar-width: none; /* Firefox */ | 
						|
} | 
						|
 | 
						|
.tabbar { | 
						|
  cursor: pointer; | 
						|
} | 
						|
 | 
						|
.active2, | 
						|
.active2 li a { | 
						|
  cursor: move !important; | 
						|
} | 
						|
 | 
						|
// * end PopupCard ReactTable5 | 
						|
 | 
						|
// TODO  Start ReactTable5 Component | 
						|
 | 
						|
.no-scrollbar { | 
						|
  -ms-overflow-style: none; /* IE and Edge */ | 
						|
  scrollbar-width: none; /* Firefox */ | 
						|
} | 
						|
 | 
						|
.tabbar { | 
						|
  cursor: pointer; | 
						|
} | 
						|
 | 
						|
.active2, | 
						|
.active2 li a { | 
						|
  cursor: move !important; | 
						|
} | 
						|
 | 
						|
// * end PopupCard SelectYear | 
						|
 | 
						|
// TODO  Start SemiDonut Component | 
						|
 | 
						|
.apexcharts-legend { | 
						|
  display: flex; | 
						|
  overflow: auto; | 
						|
  padding: 0 10px; | 
						|
  position: absolute !important; | 
						|
  left: 0px; | 
						|
  top: 200px !important; | 
						|
  justify-content: center !important; | 
						|
} | 
						|
 | 
						|
.apexcharts-canvas { | 
						|
  top: -54px !important; | 
						|
} | 
						|
 | 
						|
.apexcharts-legend-text { | 
						|
  margin-right: 5px !important; | 
						|
  font-family: iransans-medium !important; | 
						|
} | 
						|
 | 
						|
.apexcharts-legend-marker { | 
						|
  border-radius: 0px !important; | 
						|
  width: 15px !important; | 
						|
  height: 15px !important; | 
						|
} | 
						|
 | 
						|
.apexcharts-legend-series { | 
						|
  margin-top: 10px !important; | 
						|
} | 
						|
 | 
						|
.apexcharts-datalabels { | 
						|
  display: none !important; | 
						|
} | 
						|
 | 
						|
// * end PopupCard SemiDonut | 
						|
 | 
						|
// TODO  Start Sidebar/SidebarDesign2 Component | 
						|
 | 
						|
.no-scrollbar::-webkit-scrollbar { | 
						|
  display: none; | 
						|
} | 
						|
 | 
						|
/* Hide scrollbar for IE, Edge and Firefox */ | 
						|
.no-scrollbar { | 
						|
  -ms-overflow-style: none; /* IE and Edge */ | 
						|
  scrollbar-width: none; /* Firefox */ | 
						|
} | 
						|
 | 
						|
// * end PopupCard Sidebar/SidebarDesign2 | 
						|
 | 
						|
// TODO  Start Sidebar/SidebarMenu Component | 
						|
 | 
						|
.no-scrollbar::-webkit-scrollbar { | 
						|
  display: none; | 
						|
} | 
						|
 | 
						|
/* Hide scrollbar for IE, Edge and Firefox */ | 
						|
.no-scrollbar { | 
						|
  -ms-overflow-style: none; /* IE and Edge */ | 
						|
  scrollbar-width: none; /* Firefox */ | 
						|
} | 
						|
 | 
						|
// * end PopupCard Sidebar/SidebarMenu | 
						|
 | 
						|
// TODO  Start StarRating Component | 
						|
 | 
						|
.on { | 
						|
  color: #ffbd35; | 
						|
} | 
						|
 | 
						|
.off { | 
						|
  color: #ccc; | 
						|
} | 
						|
 | 
						|
// * end PopupCard StarRating | 
						|
 | 
						|
// TODO  Start Switch Component | 
						|
 | 
						|
input:checked ~ .dot { | 
						|
  transform: translateX(100%); | 
						|
  background-color: #65a9ff; | 
						|
} | 
						|
 | 
						|
input:checked ~ .dot { | 
						|
  transform: translateX(100%); | 
						|
  background-color: #65a9ff; | 
						|
} | 
						|
 | 
						|
// * end PopupCard Switch | 
						|
 | 
						|
// TODO  Start TimeLineComponent Component | 
						|
 | 
						|
#root { | 
						|
  width: 100%; | 
						|
} | 
						|
 | 
						|
.timeline-container::after { | 
						|
  background-color: #06bace; | 
						|
  content: ""; | 
						|
  position: absolute; | 
						|
  right: calc(50% - 2px); | 
						|
  width: 4px; | 
						|
  height: 100%; | 
						|
  border-radius: 10px; | 
						|
} | 
						|
 | 
						|
.timeline-item:nth-child(odd) { | 
						|
  align-self: flex-start; | 
						|
  justify-content: flex-end; | 
						|
  padding-right: 0px; | 
						|
  padding-left: 30px; | 
						|
} | 
						|
 | 
						|
.timeline-item-content::after { | 
						|
  content: ""; | 
						|
  background-color: #fff; | 
						|
  box-shadow: 1px -1px 1px #d6d6d6; | 
						|
  width: 15px; | 
						|
  height: 15px; | 
						|
  position: absolute; | 
						|
  transform: rotate(45deg); | 
						|
  right: -7.5px; | 
						|
  top: calc(50% - 5px); | 
						|
} | 
						|
 | 
						|
.timeline-item:nth-child(odd) .timeline-item-content { | 
						|
  align-items: flex-start; | 
						|
  text-align: left; | 
						|
} | 
						|
 | 
						|
.timeline-item:nth-child(odd) .timeline-item-content::after { | 
						|
  box-shadow: -1px 1px 1px #d6d6d6; | 
						|
  right: auto; | 
						|
  left: -7.5px; | 
						|
} | 
						|
 | 
						|
.timeline-item-content .circle { | 
						|
  background-color: #06bace; | 
						|
  border: solid 4px #fff; | 
						|
  border-radius: 50%; | 
						|
  width: 20px; | 
						|
  height: 20px; | 
						|
  position: absolute; | 
						|
  top: calc(50% - 10px); | 
						|
  right: -41px; | 
						|
  z-index: 100; | 
						|
} | 
						|
 | 
						|
.timeline-item:nth-child(odd) .timeline-item-content .circle { | 
						|
  right: auto; | 
						|
  left: -41px; | 
						|
} | 
						|
 | 
						|
@media only screen and (max-width: 767px) { | 
						|
  .timeline-item-content, | 
						|
  .timeline-item:nth-child(odd) .timeline-item-content { | 
						|
    padding: 15px 10px; | 
						|
    text-align: center !important; | 
						|
    align-items: center !important; | 
						|
  } | 
						|
 | 
						|
  .timeline-item-content .tag { | 
						|
    width: calc(100% - 10px); | 
						|
  } | 
						|
 | 
						|
  .timeline-item-content time { | 
						|
    margin-top: 20px; | 
						|
  } | 
						|
 | 
						|
  .timeline-item-content a { | 
						|
    text-decoration: underline; | 
						|
  } | 
						|
 | 
						|
  .timeline-item-content a::after { | 
						|
    display: none; | 
						|
  } | 
						|
} | 
						|
 | 
						|
// * end PopupCard TimeLineComponent | 
						|
 | 
						|
// TODO  Start Toast Component | 
						|
 | 
						|
$red: #e92424; | 
						|
$errorToastBgColor: #ffeaea; | 
						|
 | 
						|
$lightGreen: #3ee924; | 
						|
$successToastBgColor: #f2ffea; | 
						|
 | 
						|
$white: #fff; | 
						|
 | 
						|
.swal2-popup.swal2-toast .swal2-title { | 
						|
  font-size: 14px !important; | 
						|
} | 
						|
 | 
						|
.swal2-popup.swal2-toast .swal2-close { | 
						|
  margin-left: 0px !important; | 
						|
  margin-top: 0px !important; | 
						|
} | 
						|
 | 
						|
.swal2-timer-progress-bar-container { | 
						|
  direction: ltr !important; | 
						|
} | 
						|
 | 
						|
// .swal2-timer-progress-bar { | 
						|
//   background-color: yellow !important; | 
						|
// } | 
						|
 | 
						|
.swal2-icon { | 
						|
  font-size: 13px !important; | 
						|
} | 
						|
 | 
						|
// ! error Tost | 
						|
.error-toast-title { | 
						|
  color: $red !important; | 
						|
} | 
						|
 | 
						|
.error-toast-modalBox, | 
						|
.error-toast-modalBox-timer { | 
						|
  background-color: $errorToastBgColor !important; | 
						|
} | 
						|
 | 
						|
.error-toast-closeButton { | 
						|
  background-color: $red !important; | 
						|
  color: $white !important; | 
						|
  padding: 15px !important; | 
						|
} | 
						|
 | 
						|
.success-toast-title { | 
						|
  color: $lightGreen !important; | 
						|
} | 
						|
 | 
						|
.success-toast-modalBox, | 
						|
.success-toast-modalBox-timer { | 
						|
  background-color: $successToastBgColor !important; | 
						|
} | 
						|
 | 
						|
.success-toast-closeButton { | 
						|
  background-color: $lightGreen !important; | 
						|
  color: $white !important; | 
						|
  padding: 15px !important; | 
						|
} | 
						|
 | 
						|
.error-toast-modalBox-timer .swal2-timer-progress-bar-container { | 
						|
  background-color: #e9242455 !important; | 
						|
} | 
						|
 | 
						|
.error-toast-modalBox-timer .swal2-timer-progress-bar { | 
						|
  background-color: $red !important; | 
						|
} | 
						|
 | 
						|
.success-toast-modalBox-timer .swal2-timer-progress-bar-container { | 
						|
  background-color: #3ee92455 !important; | 
						|
} | 
						|
 | 
						|
.success-toast-modalBox-timer .swal2-timer-progress-bar { | 
						|
  background-color: $lightGreen !important; | 
						|
} | 
						|
 | 
						|
// * end Toast Component | 
						|
 | 
						|
// TODO  Start vodProductDesign Component | 
						|
 | 
						|
.playBtnImg { | 
						|
  transition: all 0.4s; | 
						|
} | 
						|
 | 
						|
// * end vodProductDesign Component | 
						|
 | 
						|
// ? class for selectbox inside -->> CustomSelectBox  <<-- | 
						|
.customizeSelect { | 
						|
  background-position: left 0.5rem center; | 
						|
  padding-right: 1rem; | 
						|
}
 | 
						|
 |