@charset "utf-8";

/* CSS Document */
:root {
    --primary-color: #000000;
    --secondary-color: #707070;
    --tertiary-color: #BBBBBB;
    --quaternary-color: #EAEAEA;
    --white-color: #FFFFFF;
    --highlight-color: #5063F0;
    --error-color: #B50000;
    --validation-color: #72AF7C;
}
@import:url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
body {font-family: 'Cairo', sans-serif !important; font-size: 18px; font-weight: 400; color:var(--primary-color);}
.bg-login{background:url(../Images/bg.png) no-repeat center center; background-size:cover;}
.h-100-vh {height: 100vh;}
.login-area{max-width:540px;}
.login-area h1{font-size:30px; font-weight:400; line-height:1.3}
.login-card{background:var(--white-color); padding:30px 60px; box-shadow: 0px 3px 6px #00000029; border-radius: 10px;}
.custom-login-form input{width:100%; border-radius:0px; background:var(--quaternary-color); border-color:var(--quaternary-color); padding:12px 15px; font-size:18px;}
.custom-login-form inpu:focus{background:var(--quaternary-color); outline:none}
.custom-login-form .form-control:focus{color: #495057;
background-color: var(--quaternary-color);
border-color: var(--quaternary-color);
outline: 0;
box-shadow: none;}
::placeholder {color: #BBBBBB; opacity: 1;}
:-ms-input-placeholder {color: #BBBBBB;}
::-ms-input-placeholder {color: #BBBBBB;}
.custom-login-form button.btn-primary{ border-radius:0px; background:var(--highlight-color); width:100%; padding: 15px; font-size:18px; font-weight:600; letter-spacing:.21px}
.lost-pass a{color:var(--secondary-color); text-decoration:underline}
.lost-pass a:hover{color:var(--highlight-color)}
.form-control.is-invalid {z-index: 3; background-image: url('../images/exclamation-circle-fill.svg'); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.95em + 0.375rem) calc(0.95em + 0.375rem); border-color:var(--error-color);}
.invalid-feedback {color: var(--error-color); font-weight:700; text-align:left; letter-spacing:.21px}
header{background:var(--quaternary-color); padding:40px 0}
.container{max-width:1640px}
header .logo{max-width:170px; margin-right:60px;}
.tag-line{font-size:20px; line-height:1.2; max-width:220px; color:var(--secondary-color);}

.navigation{min-width:600px; margin-right:65px;}
.navigation ul{margin:0; padding:0}
.navigation ul, .navigation ul li{list-style:none;}
.navigation ul > li{position:relative; line-height:1}

.navigation ul li a{ font-size:20px; color:#000; padding: 10px 15px 12px; display:block}
.navigation ul li a.bb{text-decoration:underline; color:#5063F0}
.navigation ul li a.bb img{width: 15px; margin-right: 5px;}
.navigation ul > li > a:hover{background:#BBBBBB; text-decoration:none; color:#5063F0}
.navigation ul > li:hover > a{background:#BBBBBB; text-decoration:none; color:#5063F0}
.navigation ul > li > ul{display:none; position:absolute; left:0; top:100%; background:#BBBBBB; min-width:180px}
.navigation ul > li:hover > ul{display:block}
.navigation ul > li > ul > li{border-bottom:1px solid #fff}
.navigation ul > li > ul > li a:hover{background:#707070; color:#fff;}

.logout a{background:#fff; box-shadow: 0px 3px 6px #00000029; padding:12px 16px; font-size:18px; color:#5063F0; display: flex; align-items: center; justify-content: space-between; min-width: 200px;}
.logout a .timer{font-size:20px; color:#BBBBBB; }
.logout a:hover{text-decoration:none; opacity:0.9}
.logout a .log{text-decoration:underline}

.bread-crumb{ padding:35px 0;}
.bread-crumb .title{font-size:32px; color:#000000; margin-right:45px; min-width:180px;}
.bread-crumb .title a{color:#5063F0}
.bread-crumb .description{color:var(--secondary-color)}

.data-tables .top-section{background:#EAEAEA; padding:10px 12px; font-size:14px;}
.data-tables .top-section .dropdown-toggle::after {
    display: inline-block;
    width: 7px;
    height: 7px;
    content: "";
    border-top: 0;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
	border-left:0px;
    transform: rotate(45deg);
    margin-left: 6px;
vertical-align: .255em;}
.data-tables .top-section .dropdown-menu{min-width: auto;
padding: 0;
margin: .125rem 0 0;
font-size: 14px;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: 0;}
.data-tables .top-section .dropdown-item {
  padding: 4px 15px;}
  .data-table .top-section a{color:#000000}

.table tbody *{font-size:16px; color:#707070; line-height:1.2}
.table tbody tr:nth-child(even){background:#F8F8F8}
.table tbody tr:nth-child(even) td{border-bottom:2px solid #EAEAEA}
.table thead td{border-bottom: 1px solid #4F67E8;}
.table td {border-bottom: 1px solid #EAEAEA;}
.table td, .table th{ vertical-align: middle;}  
.table table thead td:hover{cursor:pointer;} 
.table table thead .sorting div{position:relative} 
.table table thead .sorting div.shortingasc:before{content: "\f0d8";font-family: FontAwesome; font-size:15px; left:-12px; position:absolute; top:-2px	; color:gray; cursor:pointer} 
.table table thead .sorting div.shortingasc:after{content: "\f0d7";font-family: FontAwesome; font-size:15px; left:-12px; position:absolute; bottom:-2px; color:#5063F0; cursor:pointer}
.table table thead .sorting div.shortingdesc:before{content: "\f0d8";font-family: FontAwesome; font-size:15px; left:-12px; position:absolute; top:-2px	; color:#5063F0; cursor:pointer} 
.table table thead .sorting div.shortingdesc:after{content: "\f0d7";font-family: FontAwesome; font-size:15px; left:-12px; position:absolute; bottom:-2px; color:gray; cursor:pointer}
.table table thead .sorting div.shortingNone:before{content: "\f0d8";font-family: FontAwesome; font-size:15px; left:-12px; position:absolute; top:-2px	; color:gray; cursor:pointer} 
.table table thead .sorting div.shortingNone:after{content: "\f0d7";font-family: FontAwesome; font-size:15px; left:-12px; position:absolute; bottom:-2px; color:gray; cursor:pointer}
.m-c{font-size:12px; color:#5063F0; max-width:60px; display:inline-block; margin-left:12px; line-height:1.2}
.table tbody td.sticky-left a{cursor:pointer; color:#707070}
.table tbody td.sticky-left a:hover{color:#5063F0;}

.table tbody,
.table thead{position:relative; overflow-x:auto}
.table tbody tr,
.table thead tr{position:relative; overflow-x:auto}
.table thead tr td:first-child{position:sticky; left:0}
.table tbody td.sticky-right{min-width:200px;}
.table tbody td.sticky-right a,
.table tbody td.sticky-right a i{font-size:20px; color:#5063F0}

.data-table tr.normal .more{max-height:50px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}


.modal-dialog.edit-dialog{max-width: 1200px;}
.custom-edit-form input{height: calc(2.25rem + 2px);
padding: .375rem 1.75rem .375rem .75rem;}
.custom-edit-form label{text-align:right; padding-right:10px; margin-bottom:0px; color:#707070}
.first-f-col{min-width:105px; text-align:right;}
.custom-edit-form button.btn-primary{ border-radius:0px; background:var(--highlight-color); width:100%; max-width:300px; padding: 15px; font-size:18px; font-weight:600; letter-spacing:.21px}
.custom-edit-form button.btn.btn-light{ border-radius:0px; background:#BBBBBB; width:100%; max-width:150px; padding: 10px; font-size:14px; font-weight:400; letter-spacing:.21px; color:#fff; margin-top:-40px}

.radio-bg {background: #5063F0; padding: 0px 10px; display: flex; align-items: center;}
.radio-bg label{color:#fff; padding-left:5px;}

/** Upload **/
.file {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.file > input[type='file'] {
  display: none
}

.file > label {
  font-size: 1rem;
  font-weight: 300;
  cursor: pointer;
  outline: 0;
  user-select: none;
  border-color: #5167E8;
  border-style: dashed;
  border-radius: 10px;
  border-width: 2px;
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 29%);
  padding-top: 60px;
  padding-bottom: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width:100%; margin-bottom:50px;
}

.file > label:hover {
  border-color: hsl(0, 0%, 21%);
}

.file > label:active {
  background-color: hsl(0, 0%, 96%);
}

.file > label > i {
  padding-right: 0px; display:block; font-size:36px; padding-bottom:20px
}

.file--upload > label {
  color: hsl(204, 86%, 53%);
  border-color: hsl(204, 86%, 53%);
}
.file--upload > label span{display:block; color:#707070; font-size:18px; padding-bottom:20px}
.file--upload > label span.f-upload{color:#5167E8; font-size:34px;}
.file--upload > label:hover {
  border-color: hsl(204, 86%, 53%);
  background-color: hsl(204, 86%, 96%);
}

.file--upload > label:active {background-color: hsl(204, 86%, 91%);}
.input-url label{font-size:22px;}
.input-url input.form-control{border-right:0px;}
.input-url .input-group-addon{background-color:transparent; font-size:14px; color:#5063F0}

/** Sucess **/
.success{display: flex;
  justify-content: center;
  align-items: center; flex-direction: column; margin-bottom:30px;}
  .success i{color:#5167E8}
  .success h3{color:#5167E8; font-size:34px; line-height:2}
  .success p{font-size:18px; color:#707070}
  
.success-data{border:1px solid #5167E8; border-radius:5px; padding:15px 20px}  
.success-data .table td, .success-data .table th{border-top:0px;}
.success-data .table tbody tr:nth-child(2n) {background: transparent;}
 .success-data .table tbody tr:nth-child(2n) td {border-bottom: 1px solid #EAEAEA;}

/* */
.filter-nav .dropdown-menu.show{}
.filter-nav .from-to.dropdown-menu.show{ padding-left:15px; padding-right:15px; min-width:200px;} 
.filter-nav .from-to.dropdown-menu.show .form-control{padding: .2rem .5rem; border-left:0px;}
.filter-nav .from-to.dropdown-menu.show .input-group-text{background:transparent; border-right:0px;}

.filter-nav .check.dropdown-menu.show{ padding-left:15px; padding-right:15px;}

.filter-nav .menu.dropdown-menu.show li a{color:#000; display:block; padding:8px 20px 8px 10px; position:relative}
.filter-nav .menu.dropdown-menu.show li a:before{content:''; position:absolute; background:url(../Images/dot-m.jpg) no-repeat left top; width:8px; height:12px; right:10px; top:15px}
.filter-nav .menu.dropdown-menu.show li a:hover{color:#fff; background:#5167E8; text-decoration:none}
.filter-nav .menu.dropdown-menu.show li a:hover:before{background:url(../Images/dot-w.png)}

.filter-nav .menug.dropdown-menu.show li a{color:#000; display:block; padding:8px 20px 8px 10px; position:relative}
.filter-nav .menug.dropdown-menu.show li a:hover{color:#fff; background:#5167E8; text-decoration:none}

.filter-nav .btn.export{background:#5063F0; color:#fff; padding:8px 25px; font-size:20px; border-radius:0px;}
.filter-nav .btn.export:hover{opacity:0.8}
@media only screen and (max-width:1366px){
.navigation {min-width: 550px; margin-right: 15px;}	
header .logo {
  max-width: 160px;
  margin-right: 40px;
}
}
@media only screen and (max-width:1250px){
.navigation {min-width: 550px; margin-right: 15px;}	
}

@media only screen and (max-width:575px){
.login-card {padding: 30px 15px;}
}



/*---*/
.theadtrMove *{font-size:18px; color:#000;}
.theadtrMove td{border-bottom: 1px solid #4F67E8;}
.theadtrMove td:hover{cursor:pointer;} 

.theadtrMove .sorting div.shorting{position:relative} 
.theadtrMove .sorting div.shorting:before{content: "\f0d8";font-family: FontAwesome; font-size:15px; left:-12px; position:absolute; top:-2px	; color:#5063F0; cursor:pointer} 
.theadtrMove .sorting div.shorting:after{content: "\f0d7";font-family: FontAwesome; font-size:15px; left:-12px; position:absolute; bottom:-4px; color:#5063F0; cursor:pointer}

.theadtrMove .sorting div.shortingasc{position:relative} 
.theadtrMove .sorting div.shortingasc:before{content: "\f0d8";font-family: FontAwesome; font-size:15px; left:-12px; position:absolute; top:-2px	; color:gray; cursor:pointer} 
.theadtrMove .sorting div.shortingasc:after{content: "\f0d7";font-family: FontAwesome; font-size:15px; left:-12px; position:absolute; bottom:-4px; color:#5063F0; cursor:pointer}

.theadtrMove .sorting div.shortingdesc{position:relative} 
.theadtrMove .sorting div.shortingdesc:before{content: "\f0d8";font-family: FontAwesome; font-size:15px; left:-12px; position:absolute; top:-2px	; color:#5063F0; cursor:pointer} 
.theadtrMove .sorting div.shortingdesc:after{content: "\f0d7";font-family: FontAwesome; font-size:15px; left:-12px; position:absolute; bottom:-4px; color:gray; cursor:pointer}

.theadtrMove .sorting div.shortingNone{position:relative} 
.theadtrMove .sorting div.shortingNone:before{content: "\f0d8";font-family: FontAwesome; font-size:15px; left:-12px; position:absolute; top:-2px	; color:gray; cursor:pointer} 
.theadtrMove .sorting div.shortingNone:after{content: "\f0d7";font-family: FontAwesome; font-size:15px; left:-12px; position:absolute; bottom:-4px; color:gray; cursor:pointer}

.theadtrMove .m-c{font-size:12px; color:#5063F0; max-width:60px; display:inline-block; margin-left:12px; line-height:1.2; white-space: normal;}
.theadtrMove a,
.theadtrMove .sticky-left a i,
.theadtrMove .sticky-right a i{color:#0056b3 !important; font-size:20px;}
.theadtrMove{position:relative; overflow-x:auto}
.theadtrMove tr{position:relative; overflow-x:auto}
.theadtrMove tr td:first-child{position:sticky; left:0}
.check {
  width: 300px !important;
}

select {
  &:invalid {
    color: gray;
    font-style: italic;
  }
  [disabled] {
    color: gray;
    font-style: italic;
  }
  option {
    color: black;
  }
}