/*--------------------- alignment ---------------------*/
.left {
	text-align: left;
	font-weight: bold;
}

.right {
	text-align: right;
}

.leftLTR {
	text-align: left;
	direction: ltr;
}

.rightRTL {
	text-align: right;
	direction: rtl;
}


/*--------------------- login ---------------------*/


.LoginPanel {
    width: 100% !important;
    display: flex;
    justify-content: center;
}
.LoginPanel .borderlinegroup {
    padding:10px;
}

.btnMaster, .btnSlave {
    font-weight: bold;
    background-color: #20a3f0 !important;
    border: 1px solid #004981;
    border-radius: 5px;
    min-width: 200px;
    text-align: center;
    float: none;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
    cursor: pointer !important;
    padding:7px;
}

.btnSlave {
    background-color: #ffffff !important;
    border: 1px solid #004981;
    min-width: 150px;
}

.btnMaster a, .btnMaster {
    color: #ffffff !important;
    text-decoration: none;
    display: inline-block !important;
}

.btnSlave a, .btnSlave {
    color: #303030 !important;
    text-decoration: none;
    display: inline-block !important;
}

.btnMaster:hover {
    background-color: #004981 !important;
    color: #ffffff !important;
}

.btnSlave:hover {
    background-color: #a8a9ad !important;
    color: #303030 !important;
}
@media all and (max-width: 500px) {
    .btnMaster, .btnSlave {
        margin: 1%;
        width: 94%;
        padding: 2%;
        min-width: auto;
    }
}




/*--------------------- groupbox ---------------------*/
.borderlinegroup {
	position: relative;
	border: 2px solid #cccccc;
	border-radius: 10px;
	padding-bottom: 30px;
	background-color: #f6f5f5;
	margin-bottom: 40px;
direction:rtl;
}

.headertitle {
	box-shadow: 0 5px 5px -5px #333;
	font-weight: 400;
	color: #616161;
	font-size: 20px;
	text-align: center;
	margin-left: 15px;
}


.borderlinegroup i {
	font-style: normal;
	background: #fff;
	border: 2px solid #f4f4f4;
	border-radius: 15px;
	position: relative;
	padding: 8px;
	top: -20px;
}

/*--------------------- textbox|drp|checkbox ---------------------*/

.required::after {
	color: red;
	font-size: 14pt;
	font-weight: bold;
	content: ' *';
}



input[type='text'], input[type='password'], textarea {
	border: 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 10px;
	font-size: 12pt;
	color: #000000;
	background-color: white;
	-webkit-transition: all .55s ease-in;
	-moz-transition: all .55s ease-in;
	-o-transition: all .55s ease-in;
	transition: all .55s ease-in;
	width: auto;
	outline: none;
	line-height: 100%;
}

	input[type='text']:focus, input[type='password']:focus, textarea:focus {
		outline: none;
		border: 1px solid #004981;
	}

textarea {
	border: 1px solid #cccccc;
}

.ddl {
	line-height: 100% !important;
	outline: none;
	border: 0;
	border: 1px solid #cccccc;
	border-radius: 5px;
	    padding: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
	width: 100%;
	background-color: #ffffff;
	font-size: 12pt !important;
}



	.ddl * {
		
	}

input[type=radio], input[type=checkbox] {
	display: none;
}


	input[type=radio] + label:before {
		content: "";
		display: inline-block;
		width: 20px;
		height: 20px;
		vertical-align: middle;
		margin-right: 8px;
		margin-left: 8px;
		background-color: #fff;
		box-shadow: inset 0px 0px 4px rgba(0, 0, 0, .2);
		border: 1px solid #ccc;
		border-radius: 50%;
		cursor: pointer;
		font-size: 120%;
	}

	input[type=checkbox] + label:before {
		content: "";
		display: inline-block;
		width: 20px;
		height: 20px;
		vertical-align: middle;
		margin-right: 8px;
		margin-left: 8px;
		background-color: #fff;
		box-shadow: inset 0px 0px 4px rgba(0, 0, 0, .2);
		border:1px solid #ccc;
		border-radius: 4px;
		cursor: pointer;
	}

	input[type=checkbox] + label, input[type=radio] + label {
		
	}

	input[type=radio]:checked + label:before {
		background-color: #004981;
		text-shadow: 0px 0px 3px #000000;
	}

	input[type=checkbox]:checked + label:before {
		content: " \2714"; /* Tick */
		color: #004981;
		background-color: #000;
		text-align: center;
		font-size: 22pt !important;
		line-height: 20px;
		text-indent:-3px;
		text-shadow: 0px 0px 2px #000000;
	}






/*============================================= persian form label ==========================================*/
.field {
    padding-bottom: 0px; /* space between textbox*/
    margin-right: 10px;
    margin-left: 10px;
    display: flex;
    flex-direction: column-reverse;
    direction: rtl; /*------------------------- Language */
}

    .field span {
        padding-left: 5px;
        padding-right: 5px;
        transition: all 0.2s ease-in;
        pointer-events: none;
        font-weight: bold;
    }
.textover span {
    transform: translate(-5px,44px); /* label over textbox position*/
    text-align: right; /*------------------------- Language */
}
.textupper span {

    transform: translate(-5px,0px); /* label over dropdown position*/
    text-align: right; /*------------------------- Language */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (min-width:0\0),\0screen\,screen\9, screen\9 {
    .textover span {
        transform: translate(-5px,4px); /* label position in IE always in top*/
        padding-top: 15px;
    }
}
.field input:focus + span, .field textarea:focus + span {
    color: #004981; /* label color when focus */
}
/* Move up label when typing or when textbox has value*/
.field input:not(:placeholder-shown) + span,
.field input:focus + span {
    transform: translate(-5px, 0px) scale(1);
    cursor: pointer;
}
/* Placeholder color */
::-webkit-input-placeholder {
    color: transparent !important;
    transition: inherit;
}
:-moz-placeholder {
    color: transparent !important;
    transition: inherit;
}
::-moz-placeholder {
    color: transparent !important;
    transition: inherit;
}
:-ms-input-placeholder {
    color: #cccccc !important;
    transition: inherit;
}
input:focus::-webkit-input-placeholder {
    color: #cccccc !important;
}
input:focus:-moz-placeholder {
    color: #cccccc !important;
}
input:focus::-moz-placeholder {
    color: #cccccc !important;
}
textarea::-webkit-input-placeholder {
    color: #cccccc !important;
}
textarea:-moz-placeholder {
    color: #cccccc !important;
}
textarea::-moz-placeholder {
    color: #cccccc !important;
}
textarea:-ms-input-placeholder {
    color: #cccccc !important;
}