:root {
    --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
        "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
        "Source Han Sans CN", sans-serif;
}

.main-container {
    overflow: hidden;
}

.main-container,
.main-container * {
    box-sizing: border-box;
}

input,
select,
textarea,
button {
    outline: 0;
}

.main-container {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: #ffffff;
    overflow: hidden;
}
.top-right-group{
    border: 1px solid #ffffff;
    z-index: 50;
    height: 50px;
    border-radius: 10px;
    padding: 5px;
}
.rectangle {
    /* position: relative;
    width: 100px; */
    height: 50px;
    /* margin: 24px 0 0 1796px; */
    border: 1px solid #ffffff;
    z-index: 50;
    border-radius: 16px;
    padding:10px
}

.globe {
    /* position: absolute; */
    width: 40px;
    height: 40px;
    top: 4px;
    left: 6px;
    background: url(../../images/muscat/4927815c-89b7-4bf2-85b6-133867149e51.png) no-repeat center;
    background-size: cover;
    z-index: 48;
    overflow: hidden;
}

.arabic {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /* position: absolute; */
    height: 35px;
    top: 4px;
    left: 53px;
    color: #ffffff;
    font-family: Zen Kaku Gothic Antique, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 34.101px;
    text-align: left;
    white-space: nowrap;
    z-index: 49;
}

.mask-group {
    position: relative;
    width: 102px;
    height: 100px;
    margin-left: 5rem;
    background: url(../../images/muscat/f5d55a58-5d1a-4302-84f8-56edc604a620.png) no-repeat center;
    background-size: cover;
    z-index: 2;
}

.flex-row {
    position: relative;
    /* width: 1136.5px; */
    height: 639px;
    /* margin-left: 8rem; */
    z-index: 38;
}

.div-section {
    position: absolute;
    width: 35%;
    height: 639px;
    top: 0;
    left: 579.5px;
    z-index: 3;
    /* overflow: hidden; */
    border-radius: 12px;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    position: relative;
    width: 146px;
    margin: 77.834px 0 0 48.439px;
    z-index: 6;
}

.frame {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 4px;
    position: relative;
    width: 58px;
    z-index: 7;
}

.chevron-back {
    flex-shrink: 0;
    position: relative;
    width: 24px;
    height: 24px;
    z-index: 8;
    overflow: hidden;
}

.vector {
    position: relative;
    width: 8.25px;
    height: 15px;
    margin: 4.5px 0 0 8.25px;
    background: url(../../images/muscat/968b219e-88ff-4b55-9c52-fe1d9c3b3bef.png) no-repeat center;
    background-size: 100% 100%;
    z-index: 9;
}

.back {
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 20px;
    color: #303030;
    font-family: Zen Kaku Gothic Antique, var(--default-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
    z-index: 10;
}

.verify-otp {
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 54px;
    color: #000000;
    font-family: Zen Kaku Gothic Antique, var(--default-font-family);
    font-size: 30.27448081970215px;
    font-weight: 500;
    line-height: 53.283px;
    text-align: left;
    white-space: nowrap;
    z-index: 11;
}

.form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 19.376px;
    position: relative;
    width: 460.172px;
    margin: 10px;
    z-index: 12;
}

.frame-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 16px;
    position: relative;
    z-index: 13;
}

.web-page-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 4px;
    position: relative;
    z-index: 14;
}

.enter-verification-code {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 400px;
    height: 32px;
    color: #191c1d;
    font-family: Zen Kaku Gothic Antique, var(--default-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    text-align: justified;
    white-space: nowrap;
    letter-spacing: -0.48px;
    z-index: 15;
}

.description {
    flex-shrink: 0;
    position: relative;
    width: 400px;
    font-family: Zen Kaku Gothic Antique, var(--default-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    z-index: 16;
}

.verification-code-sent {
    position: relative;
    color: #747778;
    font-family: Zen Kaku Gothic Antique, var(--default-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}

.email-address {
    position: relative;
    color: #747778;
    font-family: Zen Kaku Gothic Antique, var(--default-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}

.frame-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 32px;
    position: relative;
    z-index: 17;
}

.web-verification-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 32px;
    position: relative;
    z-index: 18;
}

.passcode-box-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    flex-wrap: nowrap;
    flex-shrink: 0;
    position: relative;
    z-index: 19;
}

.verification-code-input {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 10px;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 4px 4px 4px 4px;
    cursor: pointer;
    background: transparent;
    border: 1px solid #c4c7c7;
    z-index: 20;
    border-radius: 8px;
}

.label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 9px;
    height: 20px;
    color: #191c1d;
    font-family: SF Pro Text, var(--default-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    z-index: 21;
}

.verification-code-input-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 10px;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 4px 4px 4px 4px;
    cursor: pointer;
    background: transparent;
    border: 1px solid #c4c7c7;
    z-index: 22;
    border-radius: 8px;
}

.label-4 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 9px;
    height: 20px;
    color: #191c1d;
    font-family: SF Pro Text, var(--default-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    z-index: 23;
}

.verification-code-input-5 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 10px;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 4px 4px 4px 4px;
    cursor: pointer;
    background: transparent;
    border: 1px solid #c4c7c7;
    z-index: 24;
    border-radius: 8px;
}

.label-6 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 9px;
    height: 20px;
    color: #191c1d;
    font-family: SF Pro Text, var(--default-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    z-index: 25;
}

.verification-code-input-7 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 10px;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 4px 4px 4px 4px;
    cursor: pointer;
    background: transparent;
    border: 1px solid #c4c7c7;
    z-index: 26;
    border-radius: 8px;
}

.label-8 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 9px;
    height: 20px;
    color: #191c1d;
    font-family: SF Pro Text, var(--default-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    z-index: 27;
}

.verification-code-input-9 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 10px;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 4px 4px 4px 4px;
    cursor: pointer;
    background: transparent;
    border: 1px solid #c4c7c7;
    z-index: 28;
    border-radius: 8px;
}

.label-a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 9px;
    height: 20px;
    color: #191c1d;
    font-family: SF Pro Text, var(--default-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    z-index: 29;
}

.web-element-input {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 10px;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 4px 4px 4px 4px;
    cursor: pointer;
    background: transparent;
    border: 1px solid #c4c7c7;
    z-index: 30;
    border-radius: 8px;
}

.label-b {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 9px;
    height: 20px;
    color: #191c1d;
    font-family: SF Pro Text, var(--default-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    z-index: 31;
}

.web-element-resend {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 4px;
    position: relative;
    z-index: 32;
}

.not-received-message {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 109px;
    height: 20px;
    color: #747778;
    font-family: Zen Kaku Gothic Antique, var(--default-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    z-index: 33;
}

.resend-after-seconds {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 150px;
    height: 20px;
    color: #747778;
    font-family: Zen Kaku Gothic Antique, var(--default-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    z-index: 34;
}

.btn-pry-template {
    flex-shrink: 0;
    position: relative;
    width: 460.172px;
    height: 67.815px;
    cursor: pointer;
    font-size: 0px;
    background: transparent;
    border: none;
    z-index: 35;
    border-radius: 9.688px;
}

.get-started {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 345.129px;
    height: 50.861px;
    margin: 8.477px 0 0 57.521px;
    color: #ffffff;
    font-family: Zen Kaku Gothic Antique, var(--default-font-family);
    font-size: 15.500535011291504px;
    font-weight: 700;
    line-height: 27.283px;
    text-align: center;
    z-index: 37;
}

.rectangle-c {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #212121;
    z-index: 36;
    border-radius: 9.688px;
}

.group {
    position: absolute;
    width: 557px;
    height: 639px;
    top: 0;
    left: 0;
    z-index: 4;
}

.main-div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fafafa;
    z-index: 5;
    border-radius: 29.063px 29.063px 0 0;
}

.slide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 58.127px;
    /* position: absolute; */
    width: 460.172px;
    height: 332.271px;
    /* top: 72.293px; */
    margin-top:3rem;
    left: 0;
    z-index: 38;
}

.header-d {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 29.063px;
    position: relative;
    width: 460.172px;
    z-index: 39;
}

.building-future {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 460.172px;
    height: 72.659px;
    color: #ffffff;
    font-family: Zen Kaku Gothic Antique, var(--default-font-family);
    font-size: 47.30084991455078px;
    font-weight: 700;
    line-height: 56.759px;
    text-align: left;
    white-space: nowrap;
    z-index: 40;
}

.muscat-municipality {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    width: 460px;
    height: 170px;
    color: #ffffff;
    font-family: Zen Kaku Gothic Antique, var(--default-font-family);
    font-size: 19.375667572021484px;
    font-weight: 400;
    line-height: 34.101px;
    text-align: left;
    z-index: 41;
}

.carousel-slider {
    flex-shrink: 0;
    position: relative;
    width: 161.666px;
    height: 2.422px;
    z-index: 42;
}

.controller {
    position: absolute;
    width: 39.7%;
    height: 249.99%;
    top: -75%;
    left: -1.87%;
    background: url(../../images/muscat/d58fc6d3-01f5-4d64-9feb-ed84cb7bc9bd.png) no-repeat center;
    background-size: 100% 100%;
    z-index: 43;
}

.controller-e {
    position: absolute;
    width: 25.47%;
    height: 100%;
    top: 0;
    left: 43.82%;
    background: url(../../images/muscat/39b91510-a446-4d0d-ab9d-6409c305829c.png) no-repeat center;
    background-size: 100% 100%;
    z-index: 44;
}

.controller-copy {
    position: absolute;
    width: 25.47%;
    height: 100%;
    top: 0;
    left: 75.28%;
    background: url(../../images/muscat/82ae789d-f4fd-48a8-bb22-57946e23ef50.png) no-repeat center;
    background-size: 100% 100%;
    z-index: 45;
}

.rectangle-f {
    position: absolute;
    width: 100%;
        height: 100%;
    top: 0;
    left: 0;
    background: url(../../images/muscat/a9c5cf4d-d90f-4261-8eeb-a84ba54a9801.png) no-repeat center;
    background-size: cover;
}

.bg-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../../images/muscat/0e98f396-6d3c-4c48-9531-c7e5741a0cc0.png) no-repeat center;
    background-size: 100% 100%;
    z-index: 1;
}

.login-box{
    position: relative;
        z-index: 100;
        margin: 20px;
}
.error-msg-div{
    padding: 12px;
}

.login-group{
    background: white;
    border-radius: 10px;
    width: 30%;
    height: 639px;
}
#btn-otp,#btn-regenerate{
    margin:0 2px 0 0;
}