/* Generated by script */

/* Regular font weight */

@font-face {
    font-family: 'DanaFanum';
    src: url('fonts/DanaFaNum-Regular.woff2') format('woff2');
    font-weight: 400;
    /* Normal weight */
    font-style: normal;
}


/* Bold font weight */

@font-face {
    font-family: 'DanaFanum';
    src: url('fonts/DanaFaNum-Bold.woff2') format('woff2');
    font-weight: 700;
    /* Bold weight */
    font-style: normal;
}


/* Black font weight */

@font-face {
    font-family: 'DanaFanum';
    src: url('fonts/DanaFaNum-Black.woff2') format('woff2');
    font-weight: 900;
    /* Bold weight */
    font-style: normal;
}

  

        :root {
            --theme-color: #2196F3;
            --theme-radius: 15px;
        }

        * {
            font-family: DanaFanum;
            transition:0.2s;
            box-sizing: border-box;
        }
        body {
            display: flex;
            justify-content: center;
            height: 90vh;
            margin: 0;
            background-color: #fff;
            align-items: center;
            align-content: center;
        }
        .container {
            justify-content: center;
            align-items: center;
            width: 100%;
            max-width: 320px;
            background: #fff;ً
            border-radius: var(--theme-radius);
            overflow: hidden;
            text-align: center;
            padding: 0 30px
        }
        .form-container {
            display: flex;
            width: 100%;
            transition: transform 0.5s ease;
        }
        .input-container, .otp-container {
            width: 100%;
            box-sizing: border-box;
        }


.registration-container{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-content: space-between;
}
        h2 {
            margin: 0px 0;
            color: #555;
            font-size: 18px;
            font-weight: 900;
        }
        input[type="text"] {
            width: 100%;
            margin: 10px 0 10px 0;
            text-align: center;
            color: #555;
        }
        input[type="number"] {
            margin: 10px 0 10px 0;
            text-align: center;
            color: #555;
        }

        button {
            width: 100%;
            margin: 10px 0 0 0;
            padding: 12px 20px;
            font-size: 14px;
            background-color: var(--theme-color);
            color: white;
            border: none;
            border-radius: var(--theme-radius);
            cursor: pointer;
            font-weight: bold;
        }
        .otp-inputs {
           display: flex;
           justify-content: space-evenly;
           gap: 0px;
           max-width: 320px;
           margin: auto;
        }
        .otp-input {
            width: 20%;
            padding: 15px 5px!important;
            text-align: center;
            border-radius: 15px;
            font-size: 25px !important;
            font-weight: bold;
            outline: 2px solid #ddd;
            border: 0px solid #cdcdcd;
            margin: 5px 0 5px 0 !important;
        }
        
     .otp-input:focus {
outline: 3px var(--theme-color) solid !important;
        }
        
         
        .description {
            color: gray;
            margin: 8px 0 15px 0;
            font-size: 14px;
        }
        .edit-phone {
            color: var(--theme-color);
            cursor: pointer;
            font-weight: bold;
            text-decoration: underline;
        }
        .resend-btn {
    background-color: #fff;
    color: var(--theme-color);
    border: 0px solid var(--theme-color);
    padding: 13px 20px;
    font-size: 13px;
    }
        
        .btnbar{
     display: flex;
     gap: 15px;
     flex-direction: row-reverse;
     margin: 10px 0 0 0;
     }
        
        .loginlogo {
    height: 30px;
    margin: 0;
        filter: grayscale(1);
    } 
        
        
     footer {
    text-align: center; padding: 20px 0; width: 100%; position: fixed; bottom: 0; left: 0;
 }

footer p {
    color: gray;
    font-size: 12px;
}
 footer a {
    color: #949494;
    text-decoration: none;
    padding: 0 10px;
 }





[type=checkbox],
[type=radio] {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
  -webkit-appearance: none;
  background: none;
  border: 0;
  outline: 0;
  flex-grow: 0;
  border-radius: 5px;
  background-color: #eeeeee;
  transition: background 300ms;
  cursor: pointer;
      margin-bottom: 10px;
}


/* Pseudo element for check styling */

[type=checkbox]::before,
[type=radio]::before {
  content: "";
  color: transparent;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: background: #e9e9e9;
  ;
  background-size: contain;
}


/* Checked */

[type=checkbox]:checked,
[type=radio]:checked {
  background-color: var(--theme-color);
}

[type=checkbox]:checked::before,
[type=radio]:checked::before {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}


/* Disabled */

[type=checkbox]:disabled,
[type=radio]:disabled {
  background-color: var(--theme-color);
  opacity: 0.84;
  cursor: not-allowed;
}


/* IE */

[type=checkbox]::-ms-check {
  content: "";
  color: transparent;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: transparent;
  background-size: contain;
  box-shadow: inset 0 0 0 1px var(--theme-color);
}

[type=checkbox]:checked::-ms-check {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}



        * {
            font-family: 'DanaFaNum', Arial, sans-serif;
            -webkit-tap-highlight-color: transparent;
            font-size: 12px;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            direction: rtl;
            transition: .2s;
        }

        .container {
            max-width: 400px;
            background: #fff;
            margin: 30px auto;
            padding: 40px;
            border-radius: 40px;
            overflow: hidden;
            height: auto;
        }


        button {
            background: #007BFF;
            color: #ffffff;
            border: none;
            padding: 12px 15px;
            border-radius: 15px;
            font-size: 14px;
            cursor: pointer;
            font-weight: bold;
            height: unset;
            margin: 10px 0;
        }


        .flex-input-box {
            display: flex;
            gap: 16px;
            width: 100%;
            padding: 8px 0;
        }

        .grid-input-box {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            padding: 16px 0px 25px 0px;
        }







        .input-container {
            position: relative;
            width: 100%;
        }

        .input-field {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #ddd;
            border-radius: 15px;
            font-size: 16px;
            transition: 0.2s;
            background: transparent;
            position: relative;
            z-index: 2;
        }


        .input-label {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: #fff;
            padding: 0 8px;
            font-size: 14px;
            color: #777;
            transition: 0.2s;
            z-index: 1;
        }

        .input-field:focus {
            border-color: #007BFF;
            outline: none;
        }


        .input-field:focus+.input-label,
        .input-field:not(:placeholder-shown)+.input-label {
            top: 10px;
            font-size: 13px;
            font-weight: 900;
            color: #007bff;
            z-index: 3;
        }

        /* Checkboxes */
        .checkbox-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }



        [type=checkbox],
        [type=radio] {
            width: 30px;
            height: 30px;
            color: #007bff;
            vertical-align: middle;
            -webkit-appearance: none;
            background: none;
            border: 2px solid #ddd;
            outline: 0;
            flex-grow: 0;
            border-radius: 10px;
            /* background-color: #ddf7f5; */
            transition: background 300ms;
            cursor: pointer;
        }


        /* Pseudo element for check styling */

        [type=checkbox]::before,
        [type=radio]::before {
            content: "";
            color: transparent;
            display: block;
            width: inherit;
            height: inherit;
            border-radius: inherit;
            border: 0;
            background-color: background: #e9e9e9;
            ;
            background-size: contain;
        }


        /* Checked */

        [type=checkbox]:checked,
        [type=radio]:checked {
            background-color: currentcolor;
            border: 0;
        }

        [type=checkbox]:checked::before,
        [type=radio]:checked::before {
            box-shadow: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
        }


        /* Disabled */

        [type=checkbox]:disabled,
        [type=radio]:disabled {
            background-color: #CCD3D8;
            opacity: 0.84;
            cursor: not-allowed;
        }


        /* IE */

        [type=checkbox]::-ms-check {
            content: "";
            color: transparent;
            display: block;
            width: inherit;
            height: inherit;
            border-radius: inherit;
            border: 0;
            background-color: transparent;
            background-size: contain;
            box-shadow: inset 0 0 0 1px #CCD3D8;
        }

        [type=checkbox]:checked::-ms-check {
            box-shadow: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
        }