@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');
body{
  box-sizing: border-box;
  overflow-x: hidden;
}
/* #########################################################################
############################### navbar #####################################
############################################################################ */
.navbar{
background: #141E30;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
margin: 0 !important;}
.navbar-brand {
  color: #D1B464;
  font-family: 'Rubik Distressed', 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 button{color: #FFFFFF;}
.navbar .nav-item .nav-link{
  color: #fff;
  font-weight: bold;
  font-family: 'Reem Kufi', sans-serif;
}
.navbar .nav-item .nav-link:hover{
  color: #D1B464;
}
.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");
}

 /*############################################
  ###### footer ############################
  ############################################*/
  .myfooter {
    background: #141E30;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #243B55, #141E30);
    margin-top: 15vh;
    font-weight: bold;
    text-align: center;
  }


  .myfooter .copyright {
    color: #fff;
    text-decoration: none;
    transition: all 0.3s;
    padding: 30px;
  }
  .myfooter .copyright  .royalname{color: #D1B464;font-family: 'Reem Kufi', sans-serif;}
  
/* #########################################################################
############################### form #####################################
############################################################################ */
  .sign-in {
    justify-content: center;
    align-items: center;
    margin: 10% 0;
    }
  .form-button {
    text-align: center; }
  
  .form-group {
    position: relative;
    margin-bottom: 25px;
    overflow: hidden; }
  .form-group:last-child {
     margin-bottom: 0px; }
  
  .form-submit {
    display: inline-block;
    background: #141E30;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #243B55, #141E30);
    color: #fff;
    border-bottom: none;
    width: auto;
    font-weight: bold;
    padding: 15px 39px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    margin-top: 25px;
    cursor: pointer;
  transition: all 1s; }
  
  .form-submit:hover {
    background: #16222A;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #3A6073, #16222A);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #3A6073, #16222A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */    
    color: #D1B464;
    transition: 0.5s; 
  }
  
  .register-form {
    width: 100%; }
  
  input {
    width: 100%;
    display: block;
    border: none;
    text-align: center;
    border-bottom: 3px groove #243B55;
    padding: 15px 30px;
    box-sizing: border-box; }
    input:focus{
    border: 2px groove #141E30;
    }
  .agree-term {
    display: inline-block;
    width: auto; }
  
  label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    color: #141E30; }
  
    .sign-in .sign-in-div img{
      max-height: 235px!important;
      max-width: 235px!important;
      margin:auto
      }
    @media screen and (max-width: 768px) {
  .signin-image {
    padding: 20%;
    margin: auto;
    }
    }
  .my-custom-login-hr{
    padding: 2px;
    color: #243B55;
    width: 50%;
    margin: auto;
    }
  
  .sign-in .s_co_name{
    background: #141E30;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #243B55, #141E30);
    color: #fff;
  }


  /*######################################### Forms ############################################################################################
  ############################################################################################################################*/
  /*main add form*/
  .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: 1.5px solid var(--soft-black);
    border-radius: 15px!important;
  }
  .form .form-step .input-group input:focus{
    border-color: var(--mc-light);
  }
  .form {
    width: clamp(800px, 30%, 430px);
    margin: 0 auto;
    border: 5px groove rgb(115, 136, 239,0.3);
    border-radius: 0.35rem;
    padding: 1.5rem;
  }
  @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,.add_my .form textarea,.add_my .form select{
    width: 100%;
    padding: 0.75rem;
    border: 2.5px groove var(--soft-black);
    border-radius: 15px!important;
  }
  .add_my .form input:hover,.add_my .form input:focus,.add_my .form textarea:hover,.add_my .form textarea:focus{
    border: 2.5px groove var(--mc-light);
    box-shadow: 1px 2px 3px var(--mc-light);
    outline: none;
  }

  .add_my .add_my_p {
  background: linear-gradient(-225deg,var(--mc) 0%,var(--mc) 29%,rgb(255, 199, 87) 27%,#203d8d 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;
  }
}
  /*table to show add things like repo or filetype*/

  .custom_table .custom_table_my:hover{
    background:var(--yellow-gradiant);
  }
  .custom_table .w_controll{
    width: 300px!important;
  }
  @media only screen and (max-width: 720px){
    .custom_table .w_controll{
      width: 90vw!important;
    }
  }
  /*####################################################### 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: var(--mc-light);
    color: #f3f3f3;
    text-align: center;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: 0.3s;
  }
  .form .btn:hover,.my-btn-sys-color {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--mc-light);
    font-weight: bold;
  }
  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;
  }

/*dropup menu show inline*/
@media only screen and (min-width: 992px){
.dropdown-menu.show {
  display: block!important;
}
}
.mydropup_manager .dropdown-menu button{
  background: var(--yellow-gradiant);
  width: 100%;
  padding: 5px 0;
  margin: 5px 0;
  border-radius: 5px;
  color: var(--midum-black);
  text-shadow: 1px 1px 1px #eee;
  border:0;
  font-weight: bold;
}
/*set custom m_icon height to fix it with text*/
.mycontroll_benfs .m_icon{top: 4px;position: relative;}