/*-------- Variables --------*/
:root{
	/*-------- Colors ---------*/
	--form-background-color: rgba(255, 255, 255, 0.75);
	--formsAndMenus-border-color:rgba(84, 241, 202, 0.6);
	--formsAndMenus-shadow-color:rgba(84, 241, 202, 0.6);
	--headerOfDataTable-background-color:#0080ff;
	--headerOfDataTable-font-color: #cce4ff;
	--oddRowsOfDataTable:#e6ebff;
	--evenRowsOfDataTable:#b3c2ff;
	--hoverOddRowsOfDataTable:#CCFF33;
	--hoverEvenRowsOfDataTable:#CCFF33;
	--fontColorOfDetailsRowsOfDataTable: #063b79;
	--data-table-header-font-color: #959393;
	--titles-font-colors: rgb(85, 81, 81);
	--datatable-font-color: rgb(85, 81, 81);
	--tableDetailsRow-font-color: rgb(142, 137, 137);
	--common-input-font-color: #423f3f;
	--search-input-font-color: #635e5e;
	--forms-font-color: rgb(66, 62, 62);
	--disabled-text-font-color: #cacaca;
	--enabled-text-font-color:rgba(0, 0, 0, 0.7);
	--formBox-shadow-color:#cacaca;
	--formBox-border-color:rgba(169, 169, 169, 0.6);
	--searchInputs-border-color:rgba(84, 241, 202, 0.6);
	--searchInputs-shadow-color:rgba(84, 241, 202, 0.6);
	--commonInputs-border-color:rgba(32, 105, 253, 0.6);
	--commonInputs-shadow-color:#2069fd;
	--error-commonInputs-border-color: rgba(255, 46, 46, 0.6);
	--error-commonInputs-shadow-color: #ff0d0d;
	--error-msg-color: #ff0d0d;
	--positive-msg-color: #15d700;
	/*-------- sizes ---------*/
	--object-shadow-size:0 0 10px;
	--object-border-size:1px;
	/*-------- fonts ---------*/
	--inputs-font-size:0.94rem;
	--larg-inputs-font-size:1rem;
	--small-inputs-font-size:0.9rem;

	--table-font-size:0.94rem;
	--detail-cell-font-size:0.812rem; /*joziate jadval*/
	--table-header-font-size:1rem;
	--detail-table-font-size:0.94rem; /*jadval joziat*/
	--header-font-size:1rem;
	--header-font-size-mobile:.95rem;
	--data-table-font:'B_Koodak';
	--form-font:'B_Koodak';
	--detail-table-font:'B_Koodak';
	--header-font-:'B_Koodak';
	--inputs-font:'B_Koodak';
}

/*------------------------------------------------------------------
Data Table, details list and form container
(these tags are in view pages as default by
	dataTableContainer and addFormContainer ID)
------------------------------------------------------------------ */

.loadMsgContainer{
	display: flex;
	flex-direction: column;
	margin: auto;
	text-align: center;
}

.loadMsgContainer img{
	margin: auto;
	height: 100px;
}

.loadMsgContainer div{
	margin:10px auto 0 auto;
	font-size: 1rem;
	color: var(--titles-font-colors);
}
/*------------------------------------------------------------------*/
.formAndTableContainer{
	display: flex;
	flex-direction: column;

}
/*------------------------------------------------------------------
Data Table Style
------------------------------------------------------------------ */
/*#dataTableContainer{*/
/*	!*position: relative; !* برای موقعیت‌دهی مطلق آیکون‌ها *!*!*/
/*	display: flex;*/
/*	flex-direction: column; !* برای قرار دادن آیکون‌ها و جدول زیر هم *!*/
/*}*/

.topTableIconContainer {
	width: 50%;
	margin: 10px auto;
	display: flex;
	justify-content: space-between;
	/*z-index: 10; !* برای اطمینان از نمایش روی جدول *!*/
	font-size: 0.8rem;
}

.leftTopTableIconContainer , .rightTopTableIconContainer{
	display: flex;
	gap: 10px;
}

.topTableIcon {
	cursor: pointer;
	transition: 0.5s;
}

.withTextTopTableIcon{
	border:solid 1px gray;
	border-radius: 8px;
	padding: 3px 5px;
}

.topTableIconContainer img{
	display: inline;
	height: 28px;
	vertical-align: middle;
	margin-left: 5px;
	cursor: pointer;
}

.topTableIcon:hover{
	color: #0080ff;
}

.topTableIcon img :not.withTextTopTableIcon img:hover{
	transform: scale(1.3);
}

.tableWrapper {
	overflow-x: auto; /* برای اسکرول افقی در صورت نیاز */
	/*margin-top: 40px; */
}

table.data {
	width: max-content;
    color:var(--datatable-font-color);
    font-size:var(--table-font-size);
	margin: 5px auto 30px auto; /* top right bottom left*/
   	border-spacing: 0;
	box-shadow: var(--object-shadow-size) var(--formBox-shadow-color);
}

table.data thead {
	background-color:var(--headerOfDataTable-background-color);
	color: var(--headerOfDataTable-font-color);
}

table.data th{
	font-size: var(--table-header-font-size);
	padding:5px 8px;
	white-space: nowrap;
	text-align: center;
}

table.data td:not(.detailsContainerCell,.SMSTextContainerCell,.explainContainerCell) {
	padding:  4px 10px;
	text-align: center;
}

.simpleColumnTitle{
	display: none;
}
.complexColumnTitle{
	display: table-cell;
}

table.data img{
	height: 25px;
	cursor: pointer;
	margin-top: 3px;
}

/*.clickableRow{*/
/*	cursor: pointer;*/
/*}*/

tr.totalValueContainer{
	font-size: 18px;
	color: white;
	background-color: rgb(187, 187, 187);
}

.clickable:hover{
	cursor: pointer;
}

#odd {
	background-color:var(--oddRowsOfDataTable);
}
#even {
	background-color: var(--evenRowsOfDataTable);
}
#odd:hover {
	background-color: var(--hoverOddRowsOfDataTable);
}
#even:hover {
	background-color: var(--hoverOddRowsOfDataTable);
}

#wrapper {
	margin: auto;
	background-color: gray;
	height: 320px;
	width:auto;
	overflow-x: scroll;
	overflow-y: scroll;
}

#dataTableContainer{
	text-align: center;
}

#dataTableMessage{
	text-align: center;
}

.actionIcon{
	margin: 0 8px 0 8px;
	cursor: pointer;
	height: 25px;
}

.disActiveActionIcon{
	margin: 0 8px 0 8px;
	height: 25px;
}

.detailsContainerRow{ /* for details (transaction) rows of payment table */
	font-size: var(--detail-cell-font-size);
	background-color: var(--form-background-color);
}

.hiddenDetailsContainerRow{
	display: none;
}

.detailsContainerCell{
	text-align: right;
	padding-right: 30px;
	max-width: 585px;
	color:var(--tableDetailsRow-font-color) ;

}

.detailsContainerCell div{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 25px;
}

.detailsContainerCell ui{
	color: var(--fontColorOfDetailsRowsOfDataTable) ;
}

.detailsContainerCell ui:hover{
	color: #0080ff;
	/*background-color: #0080ff;*/
}

.detailsContainerCell img{
	display: inline;
	vertical-align: sub;
	margin-left: 5px;
}

.detailsContainerCell label{
	cursor: pointer;
}

.noData{
	margin:20px auto;
	color: #ffa500;
}

.pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	/*margin-top: 10px;*/
}

.page-btn {
	height: 30px;
	padding: 5px 10px;
	font-family: var(--inputs-font);
	color: var(--search-input-font-color);
	background-color: rgba(255, 255, 255, 0);
	border: 0px;
	border-radius: 9px;
	box-shadow: var(--object-shadow-size) #d7d7d7;
	cursor: pointer;
}

.page-btn:not(.disabledPrev,.disabledNext):hover  {
	outline: var(--object-border-size) solid var(--searchInputs-border-color);
	box-shadow: var(--object-shadow-size) var(--searchInputs-shadow-color);
}

.prev{
	padding: 5px 13px;
	background: url(../images/previous_icon.png) no-repeat center;
	background-size: 10px;
}

.disabledPrev{
	background: url(../images/disablePrevious_icon.png) no-repeat center;
	background-size: 10px;
	cursor: auto;
}

.next{
	padding: 5px 13px;
	background: url(../images/next_icon.png) no-repeat center;
	background-size: 10px;
}

.disabledNext{
	background: url(../images/disableNext_icon.png) no-repeat center;
	background-size: 10px;
	cursor: auto;
}

.selectedPageBtn{
	box-shadow: var(--object-shadow-size) var(--searchInputs-shadow-color);
	background-color: var(--headerOfDataTable-background-color);
	color: var(--headerOfDataTable-font-color);
}

.SMSTextContainerCell{ /* for details (SMS text) cell of auto SMS table */
	padding: 7px;
	text-align: right;
	word-break: break-word;
	max-width: 300px;
}

.summationRow{
	font-size: 0.98rem;
	background-color: rgba(17, 186, 147, 0.71);
	color: white;
}
/* --------------------------------------------------------- */
.tableAndFormTitle { /* this class is for the tables that contain titles of data tables */
	margin:0px auto 8px auto;
	text-align: center;
	color: var(--titles-font-colors);
	font-size: var(--header-font-size);
	line-height: 2rem;
	font-weight: bold;
	border-radius: 8px;
	background-color: var(--form-background-color);
	padding: 10px 20px;
	box-shadow: var(--object-shadow-size) var(--formBox-shadow-color);
	border:var(--object-border-size) var(--formBox-border-color);
	width: max-content;
	max-width: 600px;
}

.leftSideOfTitleContainerTd{ /* the left side Td of the table of form title */
	padding-left: 32px;
}

.showAddFormIcon{ /* the image tag in the td at right side of the table of form title contains add icon*/
	cursor: pointer;
	vertical-align: 10px;
	width: 32px;
}

.hideFormIcon{
	height: 22px;
	cursor: pointer;
	margin-left: 8px;
}
/*---------------- guidance menu ----------------------*/
.userGuidanceContainer{
	border: solid var(--object-border-size) var(--formBox-border-color);
	background-color: var(--form-background-color);
	box-shadow: var(--object-shadow-size) var(--formBox-shadow-color);
	border-radius: 8px ;
	width: max-content;
	max-width: 550px;
	margin:40px auto 40px auto;
	padding: 15px 30px 15px 15px;
	font-size: 0.9rem;
}

.userGuidanceContainer p {
	position: relative;
	line-height: 1.8;
	text-align: justify;
}

.userGuidanceContainer p::before {
	content: " "; /* اضافه کردن یک فضای خالی به content */
	margin-left: 8px;
	position: absolute;
	right: -30px;
	transform: translateY(40%);
	width: 20px; /* عرض آیکون */
	height: 20px; /* ارتفاع آیکون */
	background-image: url('../icons/ball_icon.png'); /* مسیر تصویر */
	background-size: 9px 8px; /* تنظیم اندازه تصویر */
	background-repeat: no-repeat; /* جلوگیری از تکرار */
	display: inline-block; /* اطمینان از نمایش صحیح عنصر */

}
/* --------------------- forms ------------------------ */
.form{
	display: grid;
	grid-template-columns: repeat(4,auto);
	border-radius: 8px ;
	border: solid var(--object-border-size) var(--formBox-border-color);
	background-color: var(--form-background-color);
	box-shadow: var(--object-shadow-size) var(--formBox-shadow-color);
	margin: 15px auto 50px auto;
	padding: 20px;
	max-width: max-content;
	/*width: 80%;*/
}

.formTitle{
	grid-column: 1/-1;
	text-align: center;
	font-size: var(--header-font-size);
	color: var(--data-table-header-font-color);
	padding-top: 15px;
}

.hiddenFormTitle{
	display: none;
}

.hiddenFormTitle img{
	display: inline;
	height: 20px;
	vertical-align: sub;
	cursor: pointer;
}
/*--------------- form separator ---------------*/
.formSeparator{
	grid-column: 1/-1;
	padding: 10px 0 20px 0;
	color: var(--data-table-header-font-color);
	font-size: var(--table-header-font-size);
	display: flex;
	flex-direction: row;
}

.rightSeparator{
	width: 5%;
}

.titleSeparator{
	width: 16%;
	min-width: max-content;
	padding-right:10px ;
	padding-left:10px ;
}

.formSeparator hr{
	margin-top: 20px;
}

.formSeparator img{
	/*display: inline;*/
	/*height: 25px;*/
	/*margin-left: 6px;*/
}

.form img,.details img{
	display: inline;
	height: 25px;
	margin-left: 6px;
}

.formTitle img{
	height: 25px ;
	vertical-align: sub;
}

.formTitle img:hover{
	cursor: pointer;
}

.leftSeparator{
	width: 79%;
}

.fullFormSeparator{
	grid-column: 1/-1;
	padding: 20px 5px 20px 5px;
}

.fullFormSeparator hr{
	width: 100%;
}
/*-----------------------------------------*/
.inputComponentsContainer{
	display: grid;
	grid-template-columns: max-content max-content;
	grid-template-rows: auto max-content;
	/*border: black 1px solid;*/
}

.checkAndRadioContainer{
	display: flex;
	flex-direction: row;
}

.displayComponents{
	margin: auto;
}

.bigInputComponentsContainer{
	grid-column: span 2;
}

.tripleRowInputComponentsContainer{
	grid-column: span 3;
}


.fullRowInputComponentsContainer{
	grid-column: span 4;
}

.rangeInputComponentsContainer{
	display: grid;
	grid-template-columns: max-content max-content max-content;
	grid-template-rows: auto max-content;
	grid-column: span 2;

}

.hiddenInputComponentContainer{
	display: none;
}

.inFormImageContainer{
	text-align: left;
	grid-column: 1 / -1;
	padding-left: 50px;
	display: none;
	margin-bottom: 35px;
}

.inFormImageContainer img{
	height: 90px;
}

.inFormImageContainer div{
	display: inline;
	vertical-align: 40px;
	margin-left: 30px;
}

.inFormExplainContainer{
	grid-column: 1 / -1;
	padding: 15px 3px 0px 3px;
	word-wrap: break-word; /* متن را بشکن */
	word-break: break-word; /* برای مرورگرهای قدیمی */
	white-space: normal; /* اجازه بده متن شکسته شود */
	max-width: 650px; /* محدودیت عرض */
	text-align: right;
	line-height: 2.2; /* فاصله بین خطوط */
}

.inFormExplainContainer a{
	cursor: pointer;
	font-size: 0.9rem;
	color: #0080ff;
	margin-right: 10px;
}

.inFormDetailsContainer{
	grid-column: 1 / -1;
	text-align: right;
	color: var(--error-commonInputs-shadow-color);
	font-size: 0.8rem;
	padding: 5px 20px 5px 3px;
	display: none;
	line-height: 2rem;
}

.inFormTableContainer{
	grid-column: 1 / -1;
	text-align: center;
}

#inFormFormSeparator{
	display: none;
}

.inFormFormContainer{
	grid-column: 1 / -1;
	text-align: center;
	display: grid;
	grid-template-columns: repeat(4,auto);
	width: 100%;
}

.inFormActionContainer{
	color: var(--fontColorOfDetailsRowsOfDataTable);
	cursor: pointer;
}

.inFormActionContainer label{
	vertical-align: top;
}

.inFormActionContainer:hover{
	color: #0080ff;
}

input[type="range"]{
	vertical-align: sub;
}

.rangeValueContainer{
	padding:0 20px 0 20px;
	/*min-width: 180px;*/
}

.inputTitleContainer{
	padding-left: 8px;
	padding-right: 20px;
}

.emptyInputTitleContainer{
	padding: 0px;
}

.inputMessageContainer{
	grid-column: span 2;
	text-align: right;
	font-size: 0.8rem;
	color: var(--error-msg-color);
	grid-column: 3/2;
	padding: 5px 0 5px 0;
	height: 35px;
	min-width: 140px ;
}

.positiveMsgContainer{
	color: var(--positive-msg-color);
}

.necessaryInput{
	padding-left: 30px; /* to show star in big inputs */
	background-image:url(../icons/star_icon.png);
	background-repeat: no-repeat;
	background-size: 7px;
	background-position: 17px center;
}

.necessaryDateInput {
	padding-left: 20px;
	background-image:url(../icons/star_icon.png) ;
	background-repeat: no-repeat;
	background-size: 7px;
	background-position: 5px 10px;
}

.btnComponentContainer{
	grid-column: 1/-1;
}

.btnContainer{
	grid-column: 1/-1;
	text-align: center;
	/*padding-top: 15px;*/
}

.elementsAndUnits{
	margin-right: 8px;
}

.rightInputLabel{
	margin-right:2px;
	margin-left:14px ;
	vertical-align: 5px;
}

.disabledRightInputLabel{
	margin-right:2px;
	margin-left:14px ;
	vertical-align: 5px;
	color: var(--disabled-text-font-color);
}

.widthRightInputLabel{
	margin-left:36px
}

.dynamicComponentContainer{
	display: flex;
	flex-direction: column;
	text-align: right;
}

#sampleTextContainer{
	width: 580px;
	/*max-width: 600px;*/
	height: 90px;
	/*max-height: 100px;*/
	color: #09f509;
	overflow-wrap: break-word;
	outline: var(--object-border-size) solid var(--commonInputs-border-color);
	box-shadow: var(--object-shadow-size) var(--commonInputs-shadow-color);
	border-radius: 8px;
	text-align: right;
}

#SMSCounterContainer{
	color: #848282;
	font-size: 14px;
	padding: 0 20px 0 0;
}

#SMSCounterContainer div{
	margin-top: 3px;
	margin-bottom: 3px;
}

/*------------ the style for user profile data --------------*/
.userProfileData{
	text-align: right;
	color:var(--datatable-font-color);
	font-size:var(--header-font-size);
	padding: 10px;
	margin: 30px 0px 30px 0px;
	display: inline-table;
	box-shadow: var(--object-shadow-size) var(--formsAndMenus-shadow-color);
	border-radius: 8px;
	border-spacing: 0;
}

.userProfileData td{
	padding: 5px;
	text-align: right;
}
/*---------- the styles for common class inputs ----------*/
textarea{
	display: block; /*------ to remove default textarea bottom margin (by default is inline-block) ------*/
	padding: 2px;
	/*width: 90%;*/
	height: 30px;
	font-size:var(--small-inputs-font-size) ;
	font-weight: 100 ;
	color: var(--search-input-font-color);
	text-align: right;
	border: 0px;
	border-radius: 5px ;
	cursor:auto ;
	box-shadow: var(--object-shadow-size) var(--formBox-shadow-color);
	font-family: var(--inputs-font);
	resize: none;
}

textarea:focus{
	outline: var(--object-border-size) solid var(--commonInputs-border-color);
	box-shadow: var(--object-shadow-size) var(--commonInputs-shadow-color);
}

input[type='number']{
	width: 50px;
}

select{
	font-size: var(--small-inputs-font-size) ;
	font-weight: 100 ;
	font-family: var(--inputs-font);
	color: var(--search-input-font-color);
	text-align: right;
	border: 0px;
	border-radius: 5px ;
	cursor:auto ;
	box-shadow: var(--object-shadow-size) #cacaca;
}

select:focus{
	outline: var(--object-border-size) solid var(--commonInputs-border-color);
	box-shadow: var(--object-shadow-size) var(--commonInputs-shadow-color);
}

.common {
	height: 30px;
	font-size: var(--inputs-font-size) ;
	font-weight: 100 ;
	font-family:var(--inputs-font);
	color: var(--common-input-font-color);
	border: 0px;
	border-radius: 15px ;
	padding-left: 5px ;
	padding-right: 5px ;
	cursor:auto ;
	outline: var(--object-border-size) var(--formBox-border-color);
	box-shadow: var(--object-shadow-size)  var(--formBox-shadow-color);
}

.common:focus{
	outline: var(--object-border-size) solid var(--commonInputs-border-color);
	box-shadow: var(--object-shadow-size) var(--commonInputs-shadow-color);
}

.invalid:focus{
	outline: var(--object-border-size) solid var(--error-commonInputs-border-color);
	box-shadow: var(--object-shadow-size) var(--error-commonInputs-shadow-color);
}

.invalid{
	outline: var(--object-border-size) solid var(--error-commonInputs-border-color);
	box-shadow: var(--object-shadow-size) var(--error-commonInputs-shadow-color);
}

textarea.invalid{
	outline: var(--object-border-size) solid var(--error-commonInputs-border-color);
	box-shadow: var(--object-shadow-size) var(--error-commonInputs-shadow-color);
}

.common::-webkit-input-placeholder {
	font-size: var(--small-inputs-font-size);
	color: #c3c3c3;
}

input[type=checkbox].common{
	outline: 0px;
}

input[type=number].common{
	width: 50px;
}
/*---------- the styles for radio buttons for common class ----------*/
input.radioCommon{
	-webkit-appearance:none;
	width:20px;
	height:20px;
	border:var(--object-border-size) solid --formBox-border-color;
	border-radius:50%;
	outline:none;
	box-shadow:var(--object-shadow-size) var(--formBox-shadow-color);
}

.radioLabel{
	vertical-align:5px ;
}

input.radioCommon:hover {
	border: var(--commonInputs-border-color) solid var(--object-border-size);
	box-shadow:var(--object-shadow-size) var(--commonInputs-shadow-color) ;
}

input.radioCommon:before {
	content:'';
	display:block;
	width:60%;
	height:60%;
	margin: 20% auto;
	border-radius:50%;
}

input.radioCommon:checked:before {
	background: var(--commonInputs-border-color);
	box-shadow:var(--object-shadow-size) var(--commonInputs-shadow-color) ;
}

/*---------- the styles for inputs of search class ----------*/
.search {
	height: 30px;
	font-size: var(--inputs-font-size) ;
	font-weight: 100 ;
	font-family: var(--inputs-font);
	color: var(--search-input-font-color);
	background-color: rgba(255, 255, 255, 0);
	border: 0px;
	border-radius: 20px ;
	padding: 3px 5px 3px 5px;
	cursor: auto ;
	box-shadow: var(--object-shadow-size) #d7d7d7;
	margin-bottom: 4px;
}

.search:focus{
	outline: var(--object-border-size) solid var(--searchInputs-border-color);
	box-shadow: var(--object-shadow-size) var(--searchInputs-shadow-color);
}

input.search::-webkit-input-placeholder {
	font-size: var(--small-inputs-font-size);
	font-family: var(--inputs-font);
	color: #c3c3c3;
}
/*------------ style of range input ------------*/
.slider {
	width: 175px;
	cursor: pointer;
}
/*--------------------- date input (search forms) ----------------- */
.dateInputContainer{
	width: 50px;
	background-color: rgba(255, 255, 255, 0);
	outline: 0px solid;
	border-radius: 50px;
	padding: 3px 5px 3px 5px;
	cursor: auto ;
	box-shadow: var(--object-shadow-size) var(--formBox-shadow-color);
	margin-top: 10px;
}

.dateInputContainer img {
	display: inline;
	margin-left: 0px;
	margin-right: 0px;
	height: 25px;
	vertical-align: middle;
	cursor: pointer;
}

.dateInput {
	font-size: var(--inputs-font-size) ;
	font-weight: 100 ;
	font-family: var(--inputs-font);
	color: var(--search-input-font-color);
	height: 20px;
	width: 80px;
	background-color: rgba(255, 255, 255, 0);
	border: 0px;
}

.dateInput:focus{
	outline: 0px solid rgba(255, 255, 255, 0);
}

input.dateInput::-webkit-input-placeholder {
	font-size: var(--small-inputs-font-size);
	color: #c3c3c3;
}
/*---------- the styles for radio buttons for search class ----------*/
input.radioSearch{
	-webkit-appearance:none;
	width:20px;
	height:20px;
	border:var(--object-border-size) solid var(--formBox-border-color);
	border-radius:50%;
	outline:none;
	box-shadow:var(--object-shadow-size) var(--formBox-shadow-color);
	/*margin-top: 10px;*/
}

input.radioSearch:hover {
	box-shadow:var(--object-shadow-size) var(--searchInputs-shadow-color) ;
	border: var(--searchInputs-border-color) solid var(--object-border-size);
}

input.radioSearch:before {
	content:'';
	display:block;
	width:60%;
	height:60%;
	margin: 20% auto;
	border-radius:50%;
}

input.radioSearch:checked:before {
	background: var(--searchInputs-border-color);
	box-shadow:var(--object-shadow-size) var(--searchInputs-shadow-color) ;
}
/*---------- the styles for search and common check box class ----------*/
input[type="checkbox"].search,input[type="checkbox"].common,input[type="checkbox"].disable {
	/*visibility: hidden;*/
	display: none;
}

label.searchCheck,label.commonCheck,label.disableCheck {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	margin: 0 20px 0 auto;
	background-color: #fff;
	cursor: pointer;
	border: var(--formBox-border-color) solid var(--object-border-size);
	box-shadow:var(--formBox-shadow-color) var(--object-shadow-size);
	vertical-align: top;
}

.disableText{
	color: var(--disabled-text-font-color);
}

.enabledText{
	color: var(--enabled-text-font-color);
}
/*------ search ------*/
input:checked + label.searchCheck {
	background:  url(../images/searchCheckmark.png) no-repeat;
	background-size: 20px 20px;
}

input:hover + label.searchCheck {
	border: var(--searchInputs-border-color) solid var(--object-border-size);
	box-shadow:var(--searchInputs-shadow-color) var(--object-shadow-size);
}
/*------ common ------*/
input:checked + label.commonCheck {
	background:  url(../images/commonCheckMark.png) no-repeat;
	background-size: 20px 20px;
}

input:hover + label.commonCheck {
	border: var(--commonInputs-border-color) solid var(--object-border-size);
	box-shadow:var(--commonInputs-shadow-color) var(--object-shadow-size);
}

.checkBoxLabel{
	vertical-align: top;
	margin-right: 5px;
	margin-left: 0px;
}

/*------ disable (checkbox) ------*/
input:checked + label.disableCheck {
	background:  url(../images/disabledCheckMark.png) no-repeat;
	background-size: 20px 20px;
}

/*input:hover + label.disableCheck {*/
	/*border: var(--commonInputs-border-color) solid var(--object-border-size);*/
	/*box-shadow:var(--commonInputs-shadow-color) var(--object-shadow-size);*/
/*}*/
/*---------- the styles for dropDown menu for search class ----------*/
select.optionSearch{
	background-color: rgba(255, 255, 255, 0);
	font-size: var(--small-inputs-font-size);
	font-weight: 100 ;
	color: #c3c3c3;
	text-align: right;
	border: 0px;
	border-radius: 5px ;
	cursor:auto ;
	box-shadow: var(--object-shadow-size) #cacaca;
	padding: 2px;
	margin-top: -3px;
}

select.optionSearch:focus{
	outline: 1px solid var(--searchInputs-border-color);
	box-shadow: var(--object-shadow-size) var(--searchInputs-shadow-color);
}
/*-------------------the styles for inputs of submission class----------------------*/
.submission {
	width:114px;
	height:49px;
	background:url(../images/submission_blue.png) no-repeat;
	border:none;
	cursor:pointer;
	color: white;
	font-family: var(--form-font);
	font-size: var(--larg-inputs-font-size);
	padding-bottom: 10px;
}

.disabledSubmission{
	width:114px;
	height:49px;
	margin: auto;
	background:url(../images/submission_gray.png) no-repeat;
	border:none;
	color: white;
	font-size: var(--larg-inputs-font-size);
	font-family: var(--form-font);
	padding-bottom: 10px;
}

.submission:hover{
	background:url(../images/submission_yellow.png) no-repeat;
}

.searchSubmission {
	width:100px;
	height:38px;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: rgba(255, 255, 255, 0);
	border: solid var(--object-border-size) var(--formBox-border-color);
	border-radius: 50px;
	box-shadow: var(--object-shadow-size) var(--formBox-shadow-color);
	cursor:pointer;
	color: var(--search-input-font-color);
	font-size: var(--inputs-font-size);
}
.searchSubmission:hover{
	border: solid 1px #cacaca;
	box-shadow: var(--object-shadow-size) var(--searchInputs-shadow-color);
	border: solid var(--object-border-size) var(--searchInputs-border-color);
}
/*------------------ for brows file input button ------------------*/
.custom-file-input {
	display: inline-block;
	position: relative;
}
.custom-file-input input {
	visibility: hidden;
	width: 0px;
}
.custom-file-input:before {
	height: 30px;
	content: 'انتخاب کنید';
	background:url(../images/submission_blue.png) no-repeat 50% 25%;
	color: white;
	font-size: var(--small-inputs-font-size);
	border:none;
	border-radius: 50px;
	padding:5px 17px 5px 17px;  /* top right bottom left*/
	outline: none;
	cursor: pointer;
	text-align: center;
	vertical-align:center;
	position: marker;
	left: 0;
	right: 0;
}

.custom-file-input:after {
	width: 0px;
	height: 0px;
}

.fileUploadInfo ui:not(.previousUserImage) {
	font-size: 0.9rem;
	text-align:left;
	direction: ltr;
	color: darkgrey;
	margin-right: 5px;
}


#loadingGif{
	vertical-align: bottom;
}
/*---------------------- for tabs of management page --------------------*/
/*.tabTable{ !* the table contain tabs*!*/
/*	margin:  auto auto 50px auto;*/
/*	font-size: var(--table-font-size);*/
/*}*/

/*.tabTd{ !* the td that contain circle spans of tabs *!*/
/*	padding: 20px 8px 0px 8px;!* top right bottom left*!*/
/*	text-align: center;*/
/*}*/

/*.tabSubTitleTd{*/
/*	text-align: center;*/
/*	color: darkgray;*/
/*}*/

/*.tabImageBackground { !* the circle span that contains tab icon*!*/
/*	height: 75px;*/
/*	width: 96px;*/
/*	border-radius: 50%;*/
/*	display: inline-block;*/
/*	cursor: pointer;*/
/*	background-image: url("../images/tab_off.png") ;*/
/*	background-size: 96px 96px;*/
/*	background-repeat: no-repeat;*/
/*	text-align: center;*/
/*	padding-top: 20px;*/
/*	margin-bottom: 0px;*/
/*}*/

/*.tabImageBackground:hover{ !* the circle span that contains tab icon in hover mode*!*/
/*	background-image: url("../images/tab_on.png") ;*/
/*	background-size: 96px 96px;*/
/*	background-repeat: no-repeat;*/
/*}*/

/*.tabImageBackground:hover ~ .tabSubTitleTd { !* dont work :( *!*/
/*	color: blue;*/
/*}*/

/*.tabImage{ !* the image tag that it's src=tab icon *!*/
/*	width: 48px;*/
/*}*/
/*---------------------------------------*/

/*------------------ detail and Properties container ------------------*/
.details{ /* is a div */
	min-width: max-content;
	width: 80%;
	display:grid;
	grid-template-columns: repeat(5,auto);
	border-radius: 8px ;
	font-size: var(--detail-table-font-size);
	color: var(--forms-font-color);
	background-color: var(--form-background-color);
	border: solid var(--object-border-size) var(--formBox-border-color);
	box-shadow: var(--object-shadow-size) var(--formBox-shadow-color);
	padding: 15px;
	margin: 5px auto 5px auto; /* top right bottom left*/
	border-radius: 8px ;
}

.redFrame{ /* in class be form haye joziat baray moavaghat va gheyre faal ha ezafe mishavad */
	border: var(--object-border-size) solid var(--error-commonInputs-border-color);
	box-shadow: var(--object-shadow-size) var(--error-commonInputs-shadow-color);
}

.greenFrame{ /* in class be form haye joziat baray tasvieh shode va  faal ha ezafe mishavad */
	border: var(--object-border-size) solid rgba(9, 245, 9, 0.66);
	box-shadow: var(--object-shadow-size) #1bd406;
}


.detailComponentContainer{
	display: flex;
	flex-direction: row;
	/*border: red 1px solid;*/
	padding: 0 5px 7px 15px;

}

.doubleDetailComponentContainer{
	grid-column: span 2;
}

.detailTitleContainer{
	padding: 7px 0px 7px 5px;

	/*border: #2069fd 1px solid;*/
}

.detailContainer{
	padding: 7px 5px 7px 0px;
	/*border: #2069fd 1px solid;*/

}
/*------- for massages -------*/
.error {
	font-size:1rem;
	text-align : center;
	margin: auto;
	padding: 0px;
	color:var(--error-msg-color);
}

/*.successful {*/
/*	font-size:16px;margin:auto; color: #52ff52;*/
/*}*/

/*.errorFlag{*/
/*	margin-right: 15px;*/
/*	margin-left: 8px;*/
/*	height: 19px;*/
/*}*/

/*.errorRow{*/
/*	margin: 0;*/
/*	font-size: 10px;*/
/*}*/

/*.errorRow td{*/
/*	color: var(--error-commonInputs-shadow-color);*/
/*	font-size: 12px;*/
/*	padding-right: 0px;*/
/*	padding-bottom: 5px;*/
/*}*/

/*.rightEC{*/
/*	text-align: right;*/
/*}*/

/*.leftEC{*/
/*	text-align: left;*/
/*}*/
/*---------------------------*/
hr.separatorLine{
	text-align : center;
	width: 30%;
}

/*------------------------------*/
.helpIcon{
	height: 35px;
	padding-right: 5px;
	cursor: pointer;
	vertical-align: top;
}
/*--------------------------------*/
.passwordInputImg{
	height: 15px;
	vertical-align: -35%;
	margin-right:5px;
	cursor: pointer;
}
/*------------------- for pagination styles --------------------*/
/*.pageBtn {*/
/*	height: 5px;*/
/*	outline: var(--object-border-size) solid var(--formsAndMenus-border-color);*/
/*	padding-left: 6px;*/
/*	padding-right: 6px;*/
/*	margin: 3px;*/
/*	cursor: pointer;*/
/*	border-radius: 3px;*/
/*}*/

/*.pageBtn:hover{*/
/*	background-color: rgba(98, 145, 246, 0.3);*/
/*}*/

/*.beforeBtn{*/
/*	height: 22px;*/
/*	margin-right: 7px;*/
/*	margin-left: 7px;*/
/*	cursor: pointer;*/
/*	vertical-align: bottom;*/
/*}*/

/*.beforeBtn :hover{*/
/*	outline: var(--object-border-size) solid var(--formsAndMenus-border-color);*/
/*}*/

/*#pageToPageBtnContainer{*/
/*	background-color: white;*/
/*	padding-right: 200px;*/
/*	font-size: 13px;*/
/*	!*text-align: center;*!*/
/*}*/


/*#pageToPageBtnContainer td{*/
/*	text-align: center;*/
/*}*/
/*------------ load data msg ------------*/
table.loadDataMsg{
	margin: 30px auto 30px auto;
}

.loadDataMsg img{
	height: 70px;
}

.loadDataMsg td{
	padding-bottom: 15px;
}

/*------------------- First Breaking Point -----------------------*/
@media screen and (max-width: 1200px){ /* if screen width size is less than 1200px following styles will apply to site element*/
	.form ,.inFormFormContainer {
		grid-template-columns: repeat(3, auto);
	}
	/*.rightSeparator{*/
	/*	width: 5%;*/
	/*}*/
	/*.titleSeparator{*/
	/*	width: 22%;*/
	/*}*/
	/*.leftSeparator{*/
	/*	width: 73%;*/
	/*}*/
}
/*------------------- 2th Breaking Point -----------------------*/
@media screen and (max-width: 900px){ /* if screen width size is less than 9800px following styles will apply to site element*/
	.form , .inFormFormContainer{
		grid-template-columns: repeat(2, auto);
		min-width: 90%;
		width: max-content;
	}

	.details{ /* is a div */
		width: max-content;
		min-width: 90%;
		grid-template-columns: repeat(3,auto);
	}
	.emptyDetailComponent{
		display: none;
	}
}
/*------------------- 3th Breaking Point -----------------------*/
@media screen and (max-width: 550px){ /* if screen width size is less than 600px following styles will apply to site element*/
	/*:root{*/
	/*	--header-font-size:1.6rem;*/
	/*}*/
	.form ,.inFormFormContainer {
		width: 95%;
		display: flex;
		flex-direction: column;
		padding: 0;
	}
	.formTitle{
		padding-top: 25px;
		font-size: 1.3rem;
	}
	.rightSeparator{
		padding-right: 5px;
		width: 40%;
	}
	.titleSeparator{
		width: 18%;
	}
	.leftSeparator{
		padding-left: 5px;
		width: 42%;
	}
	.fullFormSeparator{
		padding: 20px 5px 30px 8px;
	}
	.inputComponentsContainer{
		font-size: 1.1rem;
	}
	.inputComponentsContainer:not(.displayComponents){
		display: flex;
		flex-direction: column;
		width: 90%;
		margin: auto;
	}

	.displayComponents{
		display: flex;
		flex-direction: row;
		margin:0 auto 15px auto;
	}

	.hiddenInputComponentContainer {
		display: none !important;
	}

	#estimatedProperty{
		display: none;
	}
	/*-----------------------------------------------*/
	.rangeInputComponentsContainer{
		margin: auto;
		grid-template-areas: "inputTitleContainer inputContainer"
                         	 "rangeValueContainer rangeValueContainer"
                             "inputMessageContainer inputMessageContainer";
	}
	.inputTitleContainer{
		grid-area:inputTitleContainer;
		padding: 0px;

	}

	.inputContainer{
		grid-area:inputContainer;
	}

	.checkAndRadioContainer{
		flex-direction: column;
		align-items: flex-start;
	}

	.checkAndRadioContainer div{
		padding: 0;
		margin: 15px 30% 0 0px;
	}

	.checkBoxLabel {
		vertical-align: middle;
	}

	.rangeValueContainer{
		grid-area:rangeValueContainer;
	}

	.inputMessageContainer{
		grid-area:inputMessageContainer;
	}

	input[type="range"]{
		margin-right: 15px;
	}

	input[type=number].common{
		width: 75px;
	}

	select {
		height: 30px; /* یا هر اندازه‌ای که خواستی */
	}

	select.optionSearch{
		margin-top: 5px;
	}
	/*-----------------------------------------------*/
	.horizontalComponentContainer{
		margin: auto;
	}
	.inputContainer{
		text-align: center;
	}

	.inputTitleContainer{
		padding-bottom: 8px;
	}
	.common,.search {
		width: 90%;
		height: 43px;
		border-radius:30px ;
		font-size: 1.4rem;
		padding-right: 15px;
		text-align: center;
	}
	textarea {
		/*margin-right: 21px;*/
		margin: auto;
		max-width: 90%;
		height: 80px;
		padding: 3px;
		font-size: 1.2rem;
	}
	.dateInputContainer{
		display: block; /* to set height */
		height: 45px;
		width: 90%;
		margin: auto;
	}
	.dateInputContainer input{
		width: 83%;
		height: 45px;
		text-align: center;
		font-size: 1.5rem;
	}
	.dateInputContainer img{
		height: 33px;
		margin-bottom: 8px;
	}
	.elementsAndUnits{
		/*padding-top: 10px;*/
	}
	.necessaryInput{
		background-position: 1px center;
		padding-left: 0px;
	}
	.necessaryDateInput {
		background-position: 0px 18px;
		padding-left: 0px;
	}
	#cardNum1,#cardNum2,#cardNum3,#cardNum4{
		width: 20%;
		padding-right: 8px;
	}
	.submission:not(.modal-content .submission ) {
		width: 90%;
		height:60px;
		font-size: 1.3rem;
		background:url(../images/mediumSubmission_blue.png) no-repeat;
		background-size:100% 60px;
		margin:3px auto 10px auto;
		padding-top: 1.5%;
	}
	.disabledSubmission:not(.modal-content .submission ){
		width: 90%;
		height:60px;
		background:url(../images/mediumSubmission_gray.png) no-repeat;
		background-size:100% 60px;
	}
	.submission:not(.modal-content .submission ):hover{
		background:url(../images/mediumSubmission_yellow.png) no-repeat;
		background-size:100% 60px;
	}
	.inputMessageContainer{
		text-align: center;
		font-size: 0.9rem;
	}
	.details {
		width: 95%;
		display: flex;
		flex-direction: column;
		padding: 3px;
		/*grid-template-columns: auto;*/
	}

	.tableAndFormTitle { /* this class is for the tables that contain titles of data tables */
		width: max-content;
		max-width: 90%;
		font-size: var(--header-font-size-mobile);
	}

	.simpleColumnTitle{
		display: table-cell;
	}

	.complexColumnTitle{
		display: none;
	}

	.noImportanceColumn{/*ستون های کم اهمیت جدول*/
		display: none;
	}

	.userGuidanceContainer{
		max-width: 95%;
	}

	#sampleTextContainer{
		width: 98%;
	}
}