@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi+Ink&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Distressed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lemonada:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;	
	font-family: Raleway, sans-serif;
    
}
body{overflow-x: hidden;direction: rtl;}
a{
  text-decoration: none!important;
}
.my-login-chars {
	background: linear-gradient(90deg, #C7C5F4, #776BCC);
    max-height: 100vh;
    overflow: hidden;
    direction: ltr!important;
}

.my-login-chars .compname{
  color: whitesmoke;
  font-weight: bold;
  text-align:right;
  margin-top: 12vh;
  font-family: 'Lemonada', cursive;
  font-size: 30px;
  padding-right: 0px;
  text-shadow: 2px 2px 0px #42275a, 4px 4px 0px rgba(0,0,0,0.25);
}

.my-login-chars .compname span{
  font-size: 18px;
  padding-top:15px;
  font-family: Arial, Helvetica, sans-serif;
  padding-right: 50px;
  color: #42275a;
  text-shadow: none;
  text-shadow: 2px 3px 5px rgba(255, 255, 255, 0.5);
  font-weight: bold;
}

.ch_login_container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}
.screen {		
	background: linear-gradient(90deg, #5D54A4, #7C78B8);		
	position: relative;	
	height: 600px;
	width: 360px;	
	box-shadow: 0px 0px 24px #5C5696;
}

.screen__content {
	z-index: 1;
	position: relative;	
	height: 100%;
}

.screen__background {		
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);	
}

.screen__background__shape {
	transform: rotate(45deg);
	position: absolute;
}

.screen__background__shape1 {
	height: 520px;
	width: 520px;
	background: #FFF;	
	top: -50px;
	right: 120px;	
	border-radius: 0 72px 0 0;
}

.screen__background__shape2 {
	height: 220px;
	width: 220px;
	background: #6C63AC;	
	top: -172px;
	right: 0;	
	border-radius: 32px;
}

.screen__background__shape3 {
	height: 540px;
	width: 190px;
	background: linear-gradient(270deg, #5D54A4, #6A679E);
	top: -24px;
	right: 0;	
	border-radius: 32px;
}

.screen__background__shape4 {
	height: 400px;
	width: 200px;
	background: #7E7BB9;	
	top: 420px;
	right: 50px;	
	border-radius: 60px;
}

.login {
	width: 320px;
	padding: 30px;
	padding-top: 100px;
}

.login__field {
	padding: 20px 0px;	
	position: relative;	
}

.login__icon {
	position: absolute;
	top: 30px;
	color: #7875B5;
}

.login__input {
	border: none;
	border-bottom: 2px solid #D1D1D4;
	background: none;
	padding: 10px;
	padding-left: 24px;
	font-weight: 700;
	width: 75%;
	transition: .2s;
}

.login__input:active,
.login__input:focus,
.login__input:hover {
	outline: none;
	border-bottom-color: #6A679E;
}

.login__submit {
	background: #fff;
	font-size: 14px;
	margin-top: 30px;
	padding: 16px 20px;
	border-radius: 26px;
	border: 1px solid #D4D3E8;
	text-transform: uppercase;
	font-weight: 700;
	display: flex;
	align-items: center;
	width: 100%;
	color: #4C489D;
	box-shadow: 0px 2px 2px #5C5696;
	cursor: pointer;
	transition: .2s;
}

.login__submit:active,
.login__submit:focus,
.login__submit:hover {
	border-color: #6A679E;
	outline: none;
}

.button__icon {
	font-size: 24px;
	margin-left: auto;
	color: #7875B5;
}

.social-icons {
	display: flex;
	align-items: center;
	justify-content: center;
}
.screen__content .rowad-login-tittle{
    font-weight: bold;
    font-size: 25px;
    color: #4C489D;
    text-shadow: 1px 2px 1px #d4d4d1;
    text-align: left;
    padding: 5px 15px;
}

.screen__content img{
  width: 80px ;
  height: 100px;
  position:absolute;
  right: 5px;
  top: 5px;
  border-radius: 5px;
  backdrop-filter: blur(10px);
  

  /*
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  backdrop-filter: brightness(90%);
  */
}


/* #########################################################################
############################### navbar #####################################
############################################################################ */
.navbar{
    background: #42275a;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #734b6d, #42275a);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #734b6d, #42275a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    margin: 0 !important;}
    
    /* navbar brand turn arround */
    /*
    .navbar-brand {
      color: #FFBB5C;
      font-family: 'Lemonada', cursive;
      font-size: 25px;
    }
    .navbar-brand {animation: rd-rotate 8s infinite;}
    @keyframes rd-rotate  {  
      0%  {
          transform: rotateY(0deg); 
          transform-origin: 50% 5% 0;
          }  
      100% {
           transform: rotateY(360deg); 
           transform-origin: 50% 5% 0;
           }  
      }
    
    .navbar-brand:hover {
      color: #fff;
    }*/

    .navbar-brand img{
      width: 50px ;
      height: 50px;
      background-color: #F2F2F2;
      background-size: cover;
      background-position: center;
      border-radius: 5px;
      box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

    }

    .navbar button{color: #FFFFFF;}
    
    .navbar .nav-item .nav-link{
      color: #fff;
      font-weight: bold;
      font-family: 'Lemonada', cursive;
    }
    .navbar .nav-item .nav-link:hover{
      color: #FFBB5C;
    }
    .navbar .navbar-nav{justify-content: center;justify-items: center;align-items: center;}
    
    /*color of button icon mobile view*/
    .navbar .navbar-toggler-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    } 
  
    .dropdown-menu {width: 300px}
    .navbar .icon_nav {
      width: 20px;
      height: 20px;
    }
  /*############################################
    ###### footer ############################
    ############################################*/
    .myfooter {
      background: #42275a;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #734b6d, #42275a);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #734b6d, #42275a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */        
      margin-top: 15vh;
      font-weight: bold;
      text-align: center;
      overflow-x: hidden;
    }
  
  
    .myfooter .copyright {
      color: #fff;
      text-decoration: none;
      transition: all 0.3s;
      padding: 30px;
    }
    .myfooter .copyright  .royalname{color: #FFBB5C;font-family: 'Reem Kufi', sans-serif;}


    /*ACCORDION*/


    .intro {
    padding: 200px 5px;
  }
    /* chars page table */
    .chars_table form button{font-size: 14px;box-shadow: 1px 2px 3px #61818b;}
    .chars_table .table-responsive thead{border : 2px solid #aaa;}


    .chars_table .btn_edit_speak789{font-size: 12px;}

  .whyus{
    vertical-align: middle;
    margin-top: 150px;
    width: 80%;
    margin: auto;
}
  .whyus .accordion .accordion-button{
    background: #42275a;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #734b6d, #42275a);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #734b6d, #42275a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */        
    color: #fff;
    border-radius: 22px 15px 0 0;
    padding: 25px 30px;
    margin: 5px 0;
    line-height: 1.5;
  }
  .accordion-item{border: none!important;}
  .whyus .accordion .accordion-button:hover{
    background: #42275a;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #734b6d, #42275a);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #734b6d, #42275a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
  }
  .whyus .accordion .accordion-button:focus{
    background: #42275a;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #734b6d, #42275a);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #734b6d, #42275a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */        
    color: #fff;
  }
  .whyus .accordion .accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
    margin-left: 10px;
  }


  /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
  ________________________ main form add _____________________
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

  /* Progressbar */
  .progressbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    counter-reset: step;
    margin-bottom: 80px;
    margin-top: 40px;
    transition: 1s;
  }
  .progressbar::before,
  .progress {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background-color: var(--soft-black);
    z-index: -1;
    transition: 1s;
  }
  .progress {
    background-color: var(--mc-light);
    width: 0%;
    transition: 0.3s;
    transition: 1s;
  }
  .progress-step {
    width: 2.1875rem;
    height: 2.1875rem;
    background-color: var(--soft-black);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#fff;
    font-size: 20px;
    transition: 1s;
  }
  .progress-step::before {
    counter-increment: step;
    content: counter(step);
    transition: 1s;
  }
  .progress-step::after {
    content: attr(data-title);
    position: absolute;
    top: calc(100% + 0.5rem);
    font-size: 0.75rem;
    color: var(--mc-light);
    font-weight: bold;
    transition: 1s;
  }
  .progress-step-active {
    background-color: var(--mc-light);
    color: #f3f3f3;
    font-size: 22px;
    font-weight: bold;
  }


  .form label {
    display: block;
    margin-bottom: 0.5rem;
    margin-right: 3%;
  }
  .form .form-step .input-group input,.form .form-step select{
    display: block;
    width: 100%;
    padding: 0.75rem;
    border: 2.1px groove #5C5696;
    border-radius: 15px!important;
  }
  .form .form-step .input-group input:focus{
    border-color: #7E7BB9;
  }
  .form {
    width: clamp(900px, 40%, 530px);
    margin: 150px auto;
    border: 5px groove #C7C5F4;
    border-radius: 0.35rem;
    padding: 1.5rem;
    box-shadow: 1px 2px 5px rgba(5, 12, 46, 0.2);;
  }
  @media only screen and (max-width: 600px){
    .form {
      width: clamp(98%, 30%, 430px);
    }
    .form .btns-group a{
      width: 40% !important;
      font-size: 13px;
    }
    form .btns-group .btn-next{
      margin-right: 40%!important;
    }
  }
  .form-step {
    display: none;
    transform-origin: top;
    animation: animate 0.5s;
  }
  
  .form-step-active {
    display: block;
  }
  
  .input-group {
    margin: 2rem 0;
  }
  
  @keyframes animate {
    from {
      transform: scale(1, 0);
      opacity: 0;
    }
    to {
      transform: scale(1, 1);
      opacity: 1;
    }
  }
  /*small add form like repo or filetype*/
  /*
  .add_my .form input{outline: none !important;}
  .add_my .form input:active,.add_my .form input:active{background-color: #243B55;}
  .add_my .form input:hover{outline: none !important;border:none !important;background-color: greenyellow;}
  */
  .add_my .form input:active,.add_my .form input:focus{outline: none;border-color:#4C489D !important ;}
  .add_my{margin: 150px auto;}
  .add_my .form input,.add_my .form textarea,.add_my .form select{
    width: 100%;
    padding: 0.75rem;
    border-radius: 5px!important;
    box-shadow: 1px 2px 3px #fff;
    outline: none;
  }
  .add_my .form input:hover,.add_my .form input:focus,.add_my .form textarea:hover,.add_my .form textarea:focus{
    box-shadow: 1px 2px 3px #5C5696;
    outline: none;
  }

  .add_my .add_my_p {
  background: linear-gradient(-225deg,#383838 0%, #faba3b 29%,#243B55 27%, #000 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  padding: 10px;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 5s linear infinite;
  font-size: 25px;
  text-align: center;
  align-items: center;
  align-content: center;
  justify-content: center;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.khair_form .my_main_tittle{
  border-radius: var(--bs-border-radius-pill) !important;
  --bs-bg-opacity: 1;
  background: #485563;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #29323c, #485563);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #29323c, #485563); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  --bs-text-opacity: 1;
  color: rgba(var(--bs-light-rgb),var(--bs-text-opacity)) !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  padding: 1rem !important;
  margin-top: .25rem !important;
  margin: auto !important;
  width: 65% !important;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
  text-shadow: 1px 1px 1px #141E30;
}
/* logo and comp name */
  .khair_form .liwan_calc_logo{width: 60px ;height: 60px;transition: 1.7s;}
  .khair_form .div_of_logo:hover .liwan_calc_logo{rotate: 360deg;transition: 1.4s;}
  @media screen and (max-width: 920px){
  .khair_form .liwan_calc_logo{display: none;}
  }
  .khair_form .sys_name{font-family: 'Reem Kufi Ink', sans-serif;font-weight: 800;font-size: 28px;padding-right: 7px;text-shadow: 1px 1px 1px #dfb561;display: inline;}
  .khair_form sub{font-size: 14px;font-weight: bold;display:block;font-family: 'Reem Kufi Ink', sans-serif;}
  .khair_form .liwan_calc_logo_p2{width: 50px ;height: 50px;}
  
  /*####################################################### Button ########################################################
  #######################################################################################################################*/
  form .btns-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }  
  .form .btn,.my-btn-sys-color {
    padding: 0.75rem;
    display: block;
    text-decoration: none;
    background-color: #7E7BB9;
    color: #f3f3f3;
    text-align: center;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: 0.3s;
    outline: none;
  }
  .form .btn:hover,.my-btn-sys-color {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #f3f3f3;
    font-weight: bold;
    background-color: #42275a;
  }
  form .btns-group .btn-next{
    margin-right: 75%;
  }
  /*cusbtn*/
   .cusbtn {
    background-color: #fff!important;
  }
   .cusbtn:hover,.cusbtn:focus{
    border:none!important;
    outline:none!important;
    box-shadow: none!important;
  }

/* accordion information */
.introinfoacc {
  padding-top: 150px;
  padding-bottom: 0;
  margin: auto;
  width: 75%;
  
}
.introinfoacc .accordion-item .accordion-button{
  background-color: #fff;
  color: #ddd;
  font-weight: bold;
  text-align: center;
  border: 0;
  outline: 0;
  margin: auto;
  box-shadow: none;
}
.introinfoacc .accordion-item .accordion-button:active{border: none;}
.introinfoacc .accordion-item .accordion-button::after{display: none;}


/* HOME PAGE */
.sec_result_home{
  
  min-height: 90vh;
  margin: auto;
  margin-top: 150px;
  vertical-align: middle;
  text-align: center;
  align-items: center;
  background: #ADA996;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
  width: 95vw;
  box-shadow: 1px 4px 15px #5D54A4;
  border-radius: 20px;
}

.sec_result_home .main_tit{
  font-weight: bold;
  font-size: 18px;
  padding: 20px 5px;
  border-radius: 5px;
  box-shadow: 1px 2px 10px #7E7BB9;
  text-align: center;
  margin: auto;
  color: #fff;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
  background: #BA8B02;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #181818, #BA8B02);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #181818, #BA8B02); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-family: 'Lemonada', cursive;
}

/* accordion point result */
.points_info_accordion .accordion-item .accordion-button{
  background: #0F2027;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  box-shadow: rgba(0,0,0, 0.4) 0px 4px 12px;
  border-radius: 5px;
  color: #f3f3f3;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
  font-weight: bold;
  text-align: center;
  display: block;
  margin: auto;
  border: 0;
  outline: 0;
  margin: 16px auto;
  max-width: 90vw;
}
.points_info_accordion .accordion-item .accordion-button:hover,.points_info_accordion .accordion-item .accordion-button:active,.points_info_accordion .accordion-item .accordion-button:focus{
  background: #0F2027;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
}
.points_info_accordion .accordion-item{
  background: rgba(255,255,255,.15);
  box-shadow:  2px 2px 11px ivory inset;
  translate: 2s;
}

.points_info_accordion form button{
  background: #00bf8f;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #001510, #00bf8f);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #001510, #00bf8f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #fff;
  padding: 20px 10px;
  border-radius: 10px;
  box-shadow: 1px 5px 5px #7C78B8;
  width: 100%;
  border: 0;
  outline: 0;
  margin-top: 20px;
  font-weight: 850;
  font-family: 'Lemonada', cursive;
  translate: 2s;
}

/* RESULT PAGE */
.majors_result{
  margin: 150px 0;
}
.majors_result .main_res_tittle{
  text-align: center;
  font-weight: bold;
  background: #4b6cb7;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #182848, #4b6cb7);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #182848, #4b6cb7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding: 20px 35px;
  border-radius: 5px;
  box-shadow: 1px 2px 15px #FFBB5C;
  color: #fff;
  font-family: 'Lemonada', cursive;
  font-size: 18px;
}

/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
                 pie SECOND 
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

.progress-pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #E5E5E5;
  position: relative;
}

.ppc-progress {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 200px, 200px, 100px);
}
.ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 100px, 200px, 0);
  transform: rotate(60deg);
}
.gt-50 .ppc-progress {
  clip: rect(0, 100px, 200px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
  clip: rect(0, 200px, 200px, 100px);
  background: #E5E5E5;
}
.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 86.9565217391px);
  top: calc(50% - 86.9565217391px);
  width: 173.9130434783px;
  height: 173.9130434783px;
  background: #fff;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
}
.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}
body {
  font-family: Arial;
  background: #f7f7f7;
}
.progress-pie-chart {
  margin: 50px auto 0;
}

.pie_weak .gt-50,.ppc-progress .pie_weak{
  background: #ED213A;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #93291E, #ED213A);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #93291E, #ED213A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.pie_normal .gt-50,.ppc-progress .pie_normal{
  background: #FDC830;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #F37335, #FDC830);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
}
.pie_good ,.ppc-progress .pie_good{
  background: #56ab2f;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
}
.pie_excellent,.ppc-progress .pie_excellent{
  background: #0052D4;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #6FB1FC, #4364F7, #0052D4);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #6FB1FC, #4364F7, #0052D4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
}

.pie_weak span{
  color: #ED213A;
}
.pie_normal span{
  color: #FDC830;
}
.pie_good span{
  color: #56ab2f;
}
.pie_excellent span{
  color: #0052D4;
}
/*
// Responsive My Skills Box Widget
// Made with ❤ by @Pawan_Mall
// http://www.pawanmall.net 
*/

#SkillBox {
    font-size: 20px;
    font-family: 'Indie Flower', cursive;
    width: 95%;
    height: auto;
    margin: 40px auto;
    background-color: #fff;
    border: 1px solid #cdcdcd;
    padding: 10px;
    border-radius:20px;
    -o-border-radius:20px;
    -webkit-border-radius:20px;
    -ms-border-radius:20px;
    -moz-border-radius:20px;
    box-shadow: 1px 2px 8px #4b6cb7;
}
.myskill_tittle{
  text-align: center;
  padding: 25px 0;
  font-family: 'Lemonada', cursive;
  font-size: 20px;
  color: #4364F7;
  font-weight: bold;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}

.myskill_tittle2{
  text-align: center;
  padding: 15px 0;
  font-family: "Cairo", sans-serif;
  font-size: 17px;
  color: #2C3930;
  font-weight: bold;
  text-shadow: 1px 2px 2px rgba(0,0,0,0.2);
}

.myskill_tittle3{
  text-align: center;
  padding: 10px 0;
  font-family: 'Lemonada', cursive;
  font-size: 18px;
  color: #2C3930;
  font-weight: bold;
  text-shadow: 1px 2px 3px rgba(0,0,0,0.3);
}

.myskill_tittle4{
  text-align: center;
  font-family: "Cairo", sans-serif;
  font-size: 18px;
  color: #f7f7f7;
  font-weight: bold;
  text-shadow: 1px 2px 3px rgba(192, 247, 105, 0.3);
}

.SkillBar {
    height: 50px;
    position: relative;
    background: rgba(17, 17, 17, .2);
    margin: 10px auto;
}

#Skill-degree{
  width: 100%;
  animation: Animate-HTML 4s;
  -webkit-animation: Animate-HTML 4s;
  -moz-animation: Animate-HTML 4s;
  -o-animation: Animate-HTML 4s;
  height: 50px;
  position: absolute;
  border-radius: 8px 0 0 8px; /*TL TR BR BL*/
  box-shadow: 1px 2px 5px #8d8d8d;
}
.bar_weak{
  background: #ED213A;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #93291E, #ED213A);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #93291E, #ED213A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bar_normal{
  background: #FDC830;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #F37335, #FDC830);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
}
.bar_good{
  background: #56ab2f;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
}
.bar_excellent{
  background: #0052D4;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #6FB1FC, #4364F7, #0052D4);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #6FB1FC, #4364F7, #0052D4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
}

/* TABLES */

table td,
table th {
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
  max-width: 20px;
}
tbody td {
  font-weight: 700;
  color: #666666;
}


.shadow_ret{
  padding: 75px 0;
  box-shadow: rgba(238, 223, 92, 0.918) 0px 30px 60px -12px inset, rgba(238, 223, 92, 0.918) 0px 18px 36px -18px inset;
}



/* logo and comp name  final report*/
.logo_print{
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.logo_print .liwan_calc_logo{width: 100px ;height: 100px;transition: 1.7s;}
.logo_print .div_of_logo:hover .liwan_calc_logo{rotate: 360deg;transition: 1.4s;}
@media screen and (max-width: 920px){
.logo_print .liwan_calc_logo{display: none;}
}
.logo_print .sys_name{font-family: 'Reem Kufi Ink', sans-serif;font-weight: 800;font-size: 38px;padding-right: 7px;text-shadow: 1px 1px 1px #dfb561;display: inline;}
.logo_print sub{font-size: 25px;font-weight: bold;display:block;font-family: 'Reem Kufi Ink', sans-serif;}
.logo_print .liwan_calc_logo_p2{width: 50px ;height: 50px;}



/* show password */
.letsshowpass{opacity: 0.6;transition: 1s;}
.letsshowpass:hover{
  cursor:  pointer;
  opacity: 1;
  transition: 1s;
}


/*-----------------------------------------------------
Notification Part latest project
-------------------------------------------------------*/
.latest_proj .latest_box .itsarial{font-family: Arial, Helvetica, sans-serif;}
.latest_proj .latest_box{
  padding: 25px 10px;
  line-height: 1.8;
  margin-top: 30px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  font-family: 'Lemonada', cursive;
  border-radius: 5px;
}
  .notiunread{
  background: #fceabb;
  background: -webkit-linear-gradient(to right, #F8F6E3, #fceabb);
  background: linear-gradient(to right, #F8F6E3, #fceabb); 
  }    
  .notiread{
  background: #ECE9E6;
  background: -webkit-linear-gradient(to right, #FFFFFF, #ECE9E6);  
  background: linear-gradient(to right, #FFFFFF, #ECE9E6);
  }
.latest_proj .box-title{
  font-weight: bold;
  background-color: #061127;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

.latest_proj .iconofmsgtittle{
  color: #1a2d55;
  box-shadow: rgba(255, 255, 255, 0.06) 0px 2px 4px 0px inset;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
  padding-top: 120px;
}

.section-title h2 {
  font-size: 28px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #37517e;
}
.section-title h2 strong{color: #734b6d;text-shadow: 1px 2px 2px #7E7BB9}
.section-title h2::before {
  content: '';
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 70px);
}

.section-title h2::after {
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 4px;
  background: #6C63AC;
  bottom: 0;
  left: calc(50% - 20px);
  animation: mymove 2s infinite;
}
.section-title p {
  margin-bottom: 0;
}

@keyframes mymove {
  from {left: calc(50% - 20px);}
  50%  {left: calc(50% - 40px);}
  to {left: calc(50% - 20px);}
}

.notiicon{cursor: pointer;}

/* ##  for style of speaking add and edit speaks  ##*/
/* char info */
.charinfo_rev{
  margin-top: 50px;
  height: 80px;
  vertical-align: middle;
  align-items: center;
  z-index: 9999999999;
  opacity: 0.9;
  font-size: 18px;
  font-weight: bold;
  font-family: 'Lemonada', cursive;
  color: #4b6cb7;
  text-align: center;
}
.charinfo_rev .cha_info_eva{
width: 15%;
position:fixed;
right: 10px;
top: 200px;

}

.charinfo_rev .cha_img_eva{
  width: 13%;
  margin: auto;
  position:fixed;
  left: 15px;
  top: 200px;
}
.charinfo_rev img{
background-size:contain;
height:80px;
}
@media only screen and (max-width: 480px){
  .charinfo_rev{display: none;}
}

.add_my .my_speak_point{
  color: dimgray;
  padding: 20px 25px;
  line-height: 1.7;
  font-weight: 800;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}



.add_my .my_speak_icon{
  margin-right: 20px;
  font-size: 23px;
  color: #BA8B02;
  animation: diamond 6s infinite linear;
  cursor: pointer;
  position: relative;
}

.add_my .makemefixced{
  position: fixed;
  z-index: 9999999;
  width: 100%;
  min-height: 65px;
  margin: auto;
  display: grid;
  align-items: center;
  top: 6px;
  right: 0px;
  background: #42275a;
  background: -webkit-linear-gradient(to right, #734b6d, #42275a);
  background: linear-gradient(to right, #734b6d, #42275a);
  color: #fff;
  box-shadow: #BA8B02 0px 3px, #BA8B02 0px 5px;
  padding: 5px 3px ;
}

@keyframes diamond {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/* export speeks table */
.exp_tbl .w_20px{
  width: 5%;
  writing-mode: vertical-lr;
  font-family: 'Lemonada', cursive;
  font-size: 16px;
  color: #000;
  font-weight: bold;
  background-color: #494848;
  border-right: 4px solid #ebebec;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

.exp_tbl .w_40px{
  width: 70%;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-family: 'Lemonada', cursive;
  background: #1F1C2C;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #928DAB, #1F1C2C);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #928DAB, #1F1C2C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}

.exp_tbl td{text-align: start!important;padding-right: 20px;font-family: 'Lemonada', cursive;}

/* show hide result page */
.rotate_me{
  writing-mode: vertical-lr;
  font-size: 14px;
  color: #0f0c29;
  text-align: center;
  vertical-align: middle;
}


/* logo and comp name */
.logo_print{
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.logo_print .liwan_calc_logo{width: 100px ;height: 100px;transition: 1.7s;}
.logo_print .div_of_logo:hover .liwan_calc_logo{rotate: 360deg;transition: 1.4s;}
@media screen and (max-width: 920px){
.logo_print .liwan_calc_logo{display: none;}
}
.logo_print .sys_name{font-family: 'Reem Kufi Ink', sans-serif;font-weight: 800;font-size: 38px;padding-right: 7px;text-shadow: 1px 1px 1px #dfb561;display: inline;}
.logo_print sub{font-size: 25px;font-weight: bold;display:block;font-family: 'Reem Kufi Ink', sans-serif;}
.logo_print .liwan_calc_logo_p2{width: 50px ;height: 50px;}



/*
###############################################
###### allspeakssec SECTION #####
###############################################
*/
.allspeakssec ::selection{
  background-color: #0f0c29;
  color: #fff;
}

.allspeakssec h2{
  font-family: 'Reem Kufi Ink', sans-serif;
  font-size : 35px!important;
}

.allspeakssec h3,.allspeakssec h4{
  font-family: "Cairo", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-variation-settings:"slnt" 0;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
  0px 8px 13px rgba(0,0,0,0.1),
  0px 18px 23px rgba(0,0,0,0.1);
}

.allspeakssec h4{
  background: #0f0c29;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #ECE2DF;
  line-height: 1.7;
  border-radius: 15px 2px 15px 2px;
}

.allspeakssec h3{
  background: #ad5389;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #3c1053, #ad5389);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
  color: #fff;  
}

.allspeakssec p{
  font-family: "Lateef", serif;
  font-weight: 400;
  font-style: normal;
  font-size : 24px;
}

.allspeakssec h5{
  font-family: "Lateef", serif;
  font-weight: 400;
  font-style: normal;
  font-size : 29px;
  margin-top: 20px;
  padding: 5px 30px;
  color: #0f0c29;
  background: #FFEFBA;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FFFFFF, #FFEFBA);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FFFFFF, #FFEFBA); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.allspeakssec .allspeakssec_span{
  padding: 3px 20px;
  background-color: #0f0c29;
  color: #fff;
  margin: 0;
  margin-left: 25px;
  border-radius: 37px 8px 37px 8px;
  border: 2px solid #6C63AC;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.allspeakssec .nospeakadded{
  padding-right: 30%!important;
  color: #302b63!important;
  font-size: 30px!important;
  opacity: 0.8;
}