/* RTA Fonts */
@font-face {
    font-family: 'RTA-Light';
    src: url('fonts/RTA-Light.eot');
    src: url('fonts/RTA-Light.eot?#iefix') format('embedded-opentype'), url('fonts/RTA-Light.ttf') format('truetype');
    font-display: swap;
    
}

@font-face {
    font-family: 'RTA-Regular';
    src: url('fonts/RTA-Regular.eot');
    src: url('fonts/RTA-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/RTA-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'RTA-Bold';
    src: url('fonts/RTA-Bold.eot"');
    src: url('fonts/RTA-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/RTA-Bold.ttf') format('truetype');
    font-display: swap;
}




:root {
    --color-white: #ffffff;
    /* --color-light: #f6fafd; */
    --color-light: #fafaff;
    --color-input-light: #f0f0fc;
    --color-black: #121212;
    --color-night: #001632;
    --color-red: #E71425;
    --color-blue: #1A278B;
    --color-gray: #80868b;
    --color-grayish: #dadce0;
    --shadow-normal: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 15px 30px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  
  html {
    font-size: 100%;
    font-size-adjust: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
  }
  
  *,
  *::before,
  *::after {
    padding: 0;
    margin: 0;
    box-sizing: inherit;
    list-style: none;
    list-style-type: none;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  body {
    font-family: 'RTA-Regular', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    color: var(--color-black);
    background: var(--color-light);
    background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(250,250,255,1) 100%);
  }

  
  a,
  button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    text-decoration: none;
  }
  
 
  
  .text {
    font-family: inherit;
    line-height: inherit;
    text-transform: unset;
    text-rendering: optimizeLegibility;
  }
  .text-large {
    font-size: 2rem;
    font-weight: 600;
  }
  .text-normal {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-black);
  }

  .text-small {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-gray);
  }

  .text-links {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-blue);
  }
  .text-links:hover {
    text-decoration: underline;
  }
  
  .main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;  
    height: 100vh;  
  }

  .heading {
    text-align: center;

  }

  .heading h1 {
    color: var(--color-blue) ;
	font-size: 1.8rem;
  }

  
  header.logo-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 1em;
    max-width: 62rem;
    
  }

   .login-wrapper {
    max-width: 28rem;
    width: 100%;
    padding: 2rem 2.5rem;
    border: none;
    outline: none;
    border-radius: 0.25rem;
    color: var(--color-black);
    background: var(--color-white);
    box-shadow: var(--shadow-large);
    align-self: center;
    position: relative;
    border-bottom: 2px solid rgba(29, 39, 139, 0.5);

  }

  .main .login-wrapper .form {
    width: 100%;
    height: auto;
    margin-top: 2rem;
  }

  /* .iam-logo {
    position: absolute;
    top: -30px;
    inset-inline-start: calc(50% - 50px);
    background-color: var(--color-blue);
    box-shadow: 0 15px 30px -3px rgba(26, 39, 139, 0.1),
    0 4px 6px -2px rgba(26, 39, 139, 0.05);;
    padding:1em;
    border-radius: 0.5em;
    width:90px;
    height: 90px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    
  } */

  input.larger {
    transform: scale(1.5);
    margin-inline: 5px 10px;
  }

  .main .login-wrapper .form .input-control {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-direction: column;
    font-size: 0.8em;
    color: var(--color-gray);
    position: relative;
  }

  .main .login-wrapper .form .input-field {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: inherit;
    width: 100%;
    height: auto;
    padding: 0.75rem 0.75rem;
    padding-inline-start: 2.8rem;
    border: none;
    outline: none;
    border-radius: .3rem;
    color: var(--color-black);
    background-color: var(--color-input-light);
    text-transform: unset;
    text-rendering: optimizeLegibility;
    border: 1px solid #d7d7f7;
  }

  .main .login-wrapper .form .input-field:focus {
    color: var(--color-black);
    box-shadow: var(--shadow-large);
    transition: all 0.5s;
  }

  .user-icon {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
  }

  .pwd-icon {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
  }

  .pwd-show-icon {
    position:absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
  }


  .main .login-wrapper .form .input-submit {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: inherit;
    cursor: pointer;
    min-width: 40%;
    height: auto;
    padding: 0.65rem 1.25rem;
    border: none;
    outline: none;
    border-radius: .3rem;
    color: var(--color-white);
    background: var(--color-blue);
    box-shadow: var(--shadow-medium);
    text-transform: capitalize;
    text-rendering: optimizeLegibility;
    margin: 1em 0 1.5em;
  }

  .main .login-wrapper .form .input-submit:hover {
    background: var(--color-red);
    box-shadow: var(--shadow-large);
    text-transform: capitalize;
    text-rendering: optimizeLegibility;
  }

  .iam-powered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.9em;
    margin-top: 3em;
  }
  
  .iam-logo-text {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .iam-powered span {
    margin-inline-start: 0.3em;
    color: var(--color-blue);
  }

  .m-0 {
    margin: 0 !important;
  }

  .support-links {
    display: flex;
    justify-content: space-between;
  }

.error-msg {
  background-color: rgba(230, 0 , 0, 0.32);
  font-size:0.80rem;
  border-radius:0.3rem;
  text-align: center;
  padding: 7px 3px 3px 3px;
}


  footer {
    padding: 1em;
  }

  footer .text-small {
    font-size: 0.6rem;
  }

  @media (max-width: 575.98px) { 

    header.logo-wrapper {
      justify-content: center;
     }

     .logo_govDubai {
      display: none;
     }

     .container {
      margin: 0 0.75rem;
     }

   }
   
.smartbanner {display: none;} 
 
 /* Smart Banner  */

@media only screen and (max-width: 600px) {
  .smartbanner {
  display: block;
  left:0;top:0;
  width:100%;
  min-height:78px;
  background-color:#fff;
  overflow:hidden;
  border-bottom: 1px solid #ccc;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:none;
  z-index:999999;
  
}

.smartbanner-container {
  margin:0 auto;
}

.smartbanner-container a {
    color: #fff;
}

.smartbanner-close {
  position:absolute;
  left:7px;top:7px;
  display:block;
  font-family:'ArialRoundedMTBold',Arial;
  font-size:15px;
  text-align:center;
  text-decoration:none;
  border-radius:14px;
  -webkit-font-smoothing:subpixel-antialiased;
  border:0;
  width:17px;
  height:17px;
  line-height:17px;
  color:#b1b1b3;
  background:#efefef;
}

.smartbanner-close:active,.smartbanner-close:hover {
  color:#333;
}

.smartbanner-icon{
  position:absolute;
  left:30px;
  top:10px;
  display:block;
  width:57px;
  height:57px;
  background-color: #fff;
  background-size:cover;
  background-image: url("../images/icon.png");
  border: 1px solid #ebebeb;
  border-radius: 6px;
}

.smartbanner-info{
  position:absolute;
  left:98px;
  top:15px;
  width:44%;
  font-size:12px;
  line-height:1.2em;
  font-weight:bold;
  color:#999;
}

.smartbanner-title {
  font-size:15px;
  line-height:17px;
  color:#000;
  font-weight:bold;
  margin-top: 10px;
}

.smartbanner-button{
  position:absolute;
  right:20px;
  top:24px;
  border-bottom:3px solid #171C8F;
  padding:0 10px;
  min-width:12%;
  height:24px;
  font-size:14px;
  line-height:24px;
  text-align:center;
  font-weight:bold;
  color:#fff;
  background-color:#171C8F;
  text-decoration:none;
  border-radius:5px;
}

.smartbanner-button:hover {
  background-color: #07095a;
  border-bottom:3px solid #07095a;
}

.smartbanner-button-text {
  text-align:center;
  display:block;
  padding:0 5px;
}
}