@import url('https://fonts.googleapis.com/css?family=Tajawal:400,500,600,700&display=swap');

/*@media only screen and (max-width: 320px) {
   body {
      font-size: 1.5em; 
   }
}*/

body {
    font-family: Tajawal, Calibri, sans-serif;
    margin: 0;
    min-width: 270px;
    background-color: #F9FAFB;
}

header {
    width: 100%;
    position: sticky;
    top: 0;
    height: 70px;
    background-color: #1C2F82;
    box-shadow: 0 12px 14px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

/* Default size for mobile devices and up */
.title {
    width: 100%;
    min-width: 100%;
    text-align: center;
    padding-top: 12px;
    color: #F9FAFB;
    font-family: Tajawal, Calibri, sans-serif;
    font-size: 1em;
    text-wrap: avoid;
}

main {
    padding: 20px;
    margin-bottom: 100px;
}

.logoimagediv {
    width: 100%;
    text-align: center;
}

/* Default size for mobile devices and up */
.logo-img {
    width: 150px;
    height: auto; /* Maintains aspect ratio */
    max-width: 150px; /* Prevents image from getting larger than its original size or a specified limit */
}

.admintitlediv {
    width: 100%;
    min-width: 100%;
    text-align: center;
    color: #F9FAFB;
    font-size: 0.8em;
    text-wrap: avoid;
}

.suspend {
    text-align: center;
    font-size: 1rem;
    -webkit-text-fill-color: orange;
}

.labelstyle {
    color: #fff;
    font-size: 0.9rem;
}

.card {
    width:300px;
    margin-top: 10px;
    padding: 10px;
    background-color: #1C2F82;
    border-radius: 1rem;
}

.card .radiobutton {
    transform: scale(1);
    text-align: center;
    direction: rtl;
}

.card .button {
    cursor: pointer;
    padding: 0.5rem;
    width: 100%;
    text-align: center;
    font-family: Tajawal, Calibri, sans-serif;
    font-size: 0.9rem;
    color: #F9FAFB;
    background-color: #2AA9E1;
    border: 0;
    border-radius: 15px;
    box-shadow: inset 0 -2px 25px -4px #F9FAFB;
    background-image: linear-gradient( 0deg, hsl(189, 92%, 58%), hsl(189, 99%, 26%) 100% );
}


.input-data {
    width: 100%;
    margin: 0px 0px 0px 0px;
    position: relative;
    font-family: Tajawal, Calibri;
    font-size: 0.9rem;
}

.textarea {
    width: 92%;
    resize: none;
    padding: 10px;
    font-family: Tajawal, Calibri;
    font-size: 0.9rem;
}

.card .textcombobox {
    font-family: Tajawal, Calibri;
    background-color: #fff;
    font-size: 0.9rem;
    padding-right:20px;
    padding-left:20px;
}

.gridrow {
    padding: 10px;
    font-size: 0.9rem;
    background-color: #F9FAFB;
    z-index:100;
}

.gridrowselected {
    padding: 10px;
    font-size: 0.9rem;
    background-color: #1C2F82;
    color: #fff;
    z-index:100;
}


.card .form-row {
    margin-top: 150px;
}

.card .error {
    border:0px solid white;
    width:100%;
    height: 55px;
    margin-top: 7px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 0.9rem;
    font-family: Tajawal, Calibri, sans-serif;
    -webkit-background-clip: text;
    -webkit-text-fill-color: orange;
}

.hidden {
    display: none;
}

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



footer {
    width: 100%;
    bottom: 0px;
    position: fixed;
    color: white;
    background-color: #1C2F82;
    padding: 1rem;
    text-align: center;
    z-index: 1000;
}





/*.card .text {
    color: #F9FAFB;
    text-align: center;
}





.card .card_title__container .card_title {
    margin-top: 20px;
}

.input-data .underline {
    position: absolute;
    bottom: 0;
    height: 2px;
    width: 100%;
}

    .input-data .underline:before {
        position: absolute;
        content: "";
        height: 2px;
        width: 100%;
        background: #3498db;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.3s ease;
    }

.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before,
.textarea textarea:focus ~ .underline:before,
.textarea textarea:valid ~ .underline:before {
    transform: scale(1);
}

.submit-btn .input-data {
    overflow: hidden;
    height: 45px !important;
    width: 25% !important;
}

    .submit-btn .input-data .inner {
        height: 100%;
        width: 350%;
        position: absolute;
        left: -100%;
        background: -webkit-linear-gradient(right, #15508A, #1691D0, #15508A, #1691D0);
        transition: all 0.4s;
    }

    .submit-btn .input-data:hover .inner {
        left: 0;
    }

    .submit-btn .input-data input {
        background: none;
        border: none;
        color: #F9FAFB;
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        position: relative;
        z-index: 2;
    }*/





/* For tablets and larger phones (min-width: 450px) */
/*@media (min-width: 450px) {
    .responsive-img {
      width: 110%;
      padding-top:20px;
    }
}*/

/* For tablets and larger phones (min-width: 700px) */
/*@media (min-width: 700px) {
    .responsive-img {
      width: 110%;
      padding-top:0px;
    }
}*/

/* For laptops and desktops (min-width: 992px) */
/*@media (min-width: 992px) {
    .responsive-img {
      width: 250px;
    }
}*/

/*--white: hsl(0, 0%, 100%);
  --black: hsl(240, 15%, 9%);
  --paragraph: hsl(0, 0%, 83%);
  --line: hsl(240, 9%, 17%);
  --primary: hsl(189, 92%, 58%);*/


/**{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: Tajawal, Calibri, sans-serif;
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 10px;
  font-family: Tajawal, Calibri, sans-serif;
  background: linear-gradient(115deg, #15508A 10%, #1691D0 90%);
}

.input-data select:focus,
.input-data select:valid
{
  font-size: 18px;
  width: 100%;
  padding: 1px;
}

.input-data input,
.textarea textarea{
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  font-family: Tajawal, Calibri;
  font-size: 18px;
  border-bottom: 2px solid rgba(0,0,0, 0.12);
}

.input-data input:focus ~ label, .textarea textarea:focus ~ label,
.input-data input:valid ~ label, .textarea textarea:valid ~ label{
  transform: translateY(-20px);
  font-family: Tajawal, Calibri;
  font-size: 18px;
  color: gray;
}

.input-data input:focus ~ span,
.input-data input:valid ~ span{
  transform: translateY(-20px);
  font-family: Tajawal, Calibri;
  font-size: 18px;
  color: gray;
}

.input-data label{
  position: absolute;
  pointer-events: none;
  bottom: 10px;
  font-size: 18px;
  transition: all 0.3s ease;
}

.input-data span{
  position: absolute;
  pointer-events: none;
  bottom: 10px;
  font-size: 18px;
  transition: all 0.3s ease;
}






.textarea label{
  width: 100%;
  bottom: 40px;
  background: #F9FAFB;
}

@media (max-width: 700px) {
  .container .text{
    font-size: 30px;
  }
  .container form{
    padding: 10px 0 0 0;
  }
  .container form .form-row{
    display: block;
  }
  form .form-row .input-data{
    margin: 35px 0!important;
  }
  .submit-btn .input-data{
    width: 40%!important;
  }
}








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

.card .card_title__container .card_subtitle {
  font-size: 14px;
  margin-top: 20px;
  color: var(--white);
}

.card .card_title__container .card_paragraph {
  margin-top: 0.25rem;
  width: 65%;

  font-size: 0.5rem;
  color: var(--paragraph);
}

.card .card__border {
  overflow: hidden;
  pointer-events: none;

  position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background-image: linear-gradient(
    0deg,
    hsl(0, 0%, 100%) -50%,
    hsl(0, 0%, 40%) 100%
  );

  border-radius: 1rem;
}

.card .card__border::before {
  content: "";
  pointer-events: none;

  position: fixed;
  z-index: 200;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%), rotate(0deg);
  transform-origin: left;

  width: 200%;
  height: 10rem;
  background-image: linear-gradient(
    0deg,
    hsla(0, 0%, 100%, 0) 0%,
    hsl(189, 100%, 50%) 40%,
    hsl(189, 100%, 50%) 60%,
    hsla(0, 0%, 40%, 0) 100%
  );

  animation: rotate 8s linear infinite;
}


.card .line {
  width: 100%;
  height: 0.1rem;
  background-color: var(--line);

  border: none;
}


*/