@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Comfortaa&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,500,300,700);
@import url(https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap);

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    margin: 0
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace
}

:root {
    --toastify-color-light: #fff;
    --toastify-color-dark: #121212;
    --toastify-color-info: #3498db;
    --toastify-color-success: #07bc0c;
    --toastify-color-warning: #f1c40f;
    --toastify-color-error: #e74c3c;
    --toastify-color-transparent: hsla(0, 0%, 100%, .7);
    --toastify-icon-color-info: var(--toastify-color-info);
    --toastify-icon-color-success: var(--toastify-color-success);
    --toastify-icon-color-warning: var(--toastify-color-warning);
    --toastify-icon-color-error: var(--toastify-color-error);
    --toastify-toast-width: 320px;
    --toastify-toast-background: #fff;
    --toastify-toast-min-height: 64px;
    --toastify-toast-max-height: 800px;
    --toastify-font-family: sans-serif;
    --toastify-z-index: 9999;
    --toastify-text-color-light: #757575;
    --toastify-text-color-dark: #fff;
    --toastify-text-color-info: #fff;
    --toastify-text-color-success: #fff;
    --toastify-text-color-warning: #fff;
    --toastify-text-color-error: #fff;
    --toastify-spinner-color: #616161;
    --toastify-spinner-color-empty-area: #e0e0e0;
    --toastify-color-progress-light: linear-gradient(90deg, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
    --toastify-color-progress-dark: #bb86fc;
    --toastify-color-progress-info: var(--toastify-color-info);
    --toastify-color-progress-success: var(--toastify-color-success);
    --toastify-color-progress-warning: var(--toastify-color-warning);
    --toastify-color-progress-error: var(--toastify-color-error)
}

.Toastify__toast-container {
    box-sizing: border-box;
    color: #fff;
    padding: 4px;
    -webkit-transform: translateZ(9999);
    -webkit-transform: translateZ(var(--toastify-z-index));
    width: 320px;
    width: var(--toastify-toast-width);
    z-index: var(--toastify-z-index)
}

.Toastify__toast-container--top-left {
    left: 1em;
    top: 1em
}

.Toastify__toast-container--top-center {
    left: 50%;
    top: 1em;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.Toastify__toast-container--top-right {
    right: 1em;
    top: 1em
}

.Toastify__toast-container--bottom-left {
    bottom: 1em;
    left: 1em
}

.Toastify__toast-container--bottom-center {
    bottom: 1em;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.Toastify__toast-container--bottom-right {
    bottom: 1em;
    right: 1em
}

@media only screen and (max-width:480px) {
    .Toastify__toast-container {
        left: 0;
        margin: 0;
        padding: 0;
        width: 100vw
    }

    .Toastify__toast-container--top-center,
    .Toastify__toast-container--top-left,
    .Toastify__toast-container--top-right {
        top: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    .Toastify__toast-container--bottom-center,
    .Toastify__toast-container--bottom-left,
    .Toastify__toast-container--bottom-right {
        bottom: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    .Toastify__toast-container--rtl {
        left: auto;
        right: 0
    }
}

.Toastify__toast {
    border-radius: 4px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .1), 0 2px 15px 0 rgba(0, 0, 0, .05);
    box-sizing: border-box;
    cursor: default;
    direction: ltr;
    display: flex;
    font-family: sans-serif;
    font-family: var(--toastify-font-family);
    justify-content: space-between;
    margin-bottom: 1rem;
    max-height: 800px;
    max-height: var(--toastify-toast-max-height);
    min-height: 64px;
    min-height: var(--toastify-toast-min-height);
    overflow: hidden;
    padding: 8px;
    position: relative;
    z-index: 0
}

.Toastify__toast--rtl {
    direction: rtl
}

.Toastify__toast--close-on-click {
    cursor: pointer
}

.Toastify__toast-body {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    margin: auto 0;
    padding: 6px
}

.Toastify__toast-icon {
    -webkit-margin-end: 10px;
    display: flex;
    flex-shrink: 0;
    margin-inline-end: 10px;
    width: 20px
}

.Toastify--animate {
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.Toastify--animate-icon {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@media only screen and (max-width:480px) {
    .Toastify__toast {
        border-radius: 0;
        margin-bottom: 0
    }
}

.Toastify__toast-theme--dark {
    background: #121212;
    background: var(--toastify-color-dark);
    color: #fff;
    color: var(--toastify-text-color-dark)
}

.Toastify__toast-theme--colored.Toastify__toast--default,
.Toastify__toast-theme--light {
    background: #fff;
    background: var(--toastify-color-light);
    color: #757575;
    color: var(--toastify-text-color-light)
}

.Toastify__toast-theme--colored.Toastify__toast--info {
    background: #3498db;
    background: var(--toastify-color-info);
    color: #fff;
    color: var(--toastify-text-color-info)
}

.Toastify__toast-theme--colored.Toastify__toast--success {
    background: #07bc0c;
    background: var(--toastify-color-success);
    color: #fff;
    color: var(--toastify-text-color-success)
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
    background: #f1c40f;
    background: var(--toastify-color-warning);
    color: #fff;
    color: var(--toastify-text-color-warning)
}

.Toastify__toast-theme--colored.Toastify__toast--error {
    background: #e74c3c;
    background: var(--toastify-color-error);
    color: #fff;
    color: var(--toastify-text-color-error)
}

.Toastify__progress-bar-theme--light {
    background: linear-gradient(90deg, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
    background: var(--toastify-color-progress-light)
}

.Toastify__progress-bar-theme--dark {
    background: #bb86fc;
    background: var(--toastify-color-progress-dark)
}

.Toastify__progress-bar--info {
    background: #3498db;
    background: var(--toastify-color-progress-info)
}

.Toastify__progress-bar--success {
    background: #07bc0c;
    background: var(--toastify-color-progress-success)
}

.Toastify__progress-bar--warning {
    background: #f1c40f;
    background: var(--toastify-color-progress-warning)
}

.Toastify__progress-bar--error {
    background: #e74c3c;
    background: var(--toastify-color-progress-error)
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {
    background: hsla(0, 0%, 100%, .7);
    background: var(--toastify-color-transparent)
}

.Toastify__close-button {
    align-self: flex-start;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    opacity: .7;
    outline: none;
    padding: 0;
    transition: .3s ease
}

.Toastify__close-button--light {
    color: #000;
    opacity: .3
}

.Toastify__close-button>svg {
    fill: currentColor;
    height: 16px;
    width: 14px
}

.Toastify__close-button:focus,
.Toastify__close-button:hover {
    opacity: 1
}

@-webkit-keyframes Toastify__trackProgress {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    to {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
}

@keyframes Toastify__trackProgress {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    to {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
}

.Toastify__progress-bar {
    bottom: 0;
    height: 5px;
    left: 0;
    opacity: .7;
    position: absolute;
    -webkit-transform-origin: left;
    transform-origin: left;
    width: 100%;
    z-index: 9999;
    z-index: var(--toastify-z-index)
}

.Toastify__progress-bar--animated {
    -webkit-animation: Toastify__trackProgress linear 1 forwards;
    animation: Toastify__trackProgress linear 1 forwards
}

.Toastify__progress-bar--controlled {
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s
}

.Toastify__progress-bar--rtl {
    left: auto;
    right: 0;
    -webkit-transform-origin: right;
    transform-origin: right
}

.Toastify__spinner {
    -webkit-animation: Toastify__spin .65s linear infinite;
    animation: Toastify__spin .65s linear infinite;
    border: 2px solid #e0e0e0;
    border-color: var(--toastify-spinner-color-empty-area);
    border-radius: 100%;
    border-right-color: #616161;
    border-right-color: var(--toastify-spinner-color);
    box-sizing: border-box;
    height: 20px;
    width: 20px
}

@-webkit-keyframes Toastify__bounceInRight {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }

    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes Toastify__bounceInRight {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }

    to {
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes Toastify__bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes Toastify__bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

@-webkit-keyframes Toastify__bounceInLeft {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }

    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes Toastify__bounceInLeft {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }

    to {
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes Toastify__bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes Toastify__bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

@-webkit-keyframes Toastify__bounceInUp {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes Toastify__bounceInUp {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes Toastify__bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes Toastify__bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

@-webkit-keyframes Toastify__bounceInDown {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }

    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes Toastify__bounceInDown {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }

    to {
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes Toastify__bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes Toastify__bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

.Toastify__bounce-enter--bottom-left,
.Toastify__bounce-enter--top-left {
    -webkit-animation-name: Toastify__bounceInLeft;
    animation-name: Toastify__bounceInLeft
}

.Toastify__bounce-enter--bottom-right,
.Toastify__bounce-enter--top-right {
    -webkit-animation-name: Toastify__bounceInRight;
    animation-name: Toastify__bounceInRight
}

.Toastify__bounce-enter--top-center {
    -webkit-animation-name: Toastify__bounceInDown;
    animation-name: Toastify__bounceInDown
}

.Toastify__bounce-enter--bottom-center {
    -webkit-animation-name: Toastify__bounceInUp;
    animation-name: Toastify__bounceInUp
}

.Toastify__bounce-exit--bottom-left,
.Toastify__bounce-exit--top-left {
    -webkit-animation-name: Toastify__bounceOutLeft;
    animation-name: Toastify__bounceOutLeft
}

.Toastify__bounce-exit--bottom-right,
.Toastify__bounce-exit--top-right {
    -webkit-animation-name: Toastify__bounceOutRight;
    animation-name: Toastify__bounceOutRight
}

.Toastify__bounce-exit--top-center {
    -webkit-animation-name: Toastify__bounceOutUp;
    animation-name: Toastify__bounceOutUp
}

.Toastify__bounce-exit--bottom-center {
    -webkit-animation-name: Toastify__bounceOutDown;
    animation-name: Toastify__bounceOutDown
}

@-webkit-keyframes Toastify__zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

@keyframes Toastify__zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

@-webkit-keyframes Toastify__zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

@keyframes Toastify__zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

.Toastify__zoom-enter {
    -webkit-animation-name: Toastify__zoomIn;
    animation-name: Toastify__zoomIn
}

.Toastify__zoom-exit {
    -webkit-animation-name: Toastify__zoomOut;
    animation-name: Toastify__zoomOut
}

@-webkit-keyframes Toastify__flipIn {
    0% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg)
    }

    40% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg)
    }

    60% {
        opacity: 1;
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg)
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes Toastify__flipIn {
    0% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg)
    }

    40% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg)
    }

    60% {
        opacity: 1;
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg)
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@-webkit-keyframes Toastify__flipOut {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        opacity: 1;
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg)
    }

    to {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg)
    }
}

@keyframes Toastify__flipOut {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        opacity: 1;
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg)
    }

    to {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg)
    }
}

.Toastify__flip-enter {
    -webkit-animation-name: Toastify__flipIn;
    animation-name: Toastify__flipIn
}

.Toastify__flip-exit {
    -webkit-animation-name: Toastify__flipOut;
    animation-name: Toastify__flipOut
}

@-webkit-keyframes Toastify__slideInRight {
    0% {
        -webkit-transform: translate3d(110%, 0, 0);
        transform: translate3d(110%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInRight {
    0% {
        -webkit-transform: translate3d(110%, 0, 0);
        transform: translate3d(110%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes Toastify__slideInLeft {
    0% {
        -webkit-transform: translate3d(-110%, 0, 0);
        transform: translate3d(-110%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInLeft {
    0% {
        -webkit-transform: translate3d(-110%, 0, 0);
        transform: translate3d(-110%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes Toastify__slideInUp {
    0% {
        -webkit-transform: translate3d(0, 110%, 0);
        transform: translate3d(0, 110%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInUp {
    0% {
        -webkit-transform: translate3d(0, 110%, 0);
        transform: translate3d(0, 110%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes Toastify__slideInDown {
    0% {
        -webkit-transform: translate3d(0, -110%, 0);
        transform: translate3d(0, -110%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInDown {
    0% {
        -webkit-transform: translate3d(0, -110%, 0);
        transform: translate3d(0, -110%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes Toastify__slideOutRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(110%, 0, 0);
        transform: translate3d(110%, 0, 0);
        visibility: hidden
    }
}

@keyframes Toastify__slideOutRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(110%, 0, 0);
        transform: translate3d(110%, 0, 0);
        visibility: hidden
    }
}

@-webkit-keyframes Toastify__slideOutLeft {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(-110%, 0, 0);
        transform: translate3d(-110%, 0, 0);
        visibility: hidden
    }
}

@keyframes Toastify__slideOutLeft {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(-110%, 0, 0);
        transform: translate3d(-110%, 0, 0);
        visibility: hidden
    }
}

@-webkit-keyframes Toastify__slideOutDown {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(0, 500px, 0);
        transform: translate3d(0, 500px, 0);
        visibility: hidden
    }
}

@keyframes Toastify__slideOutDown {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(0, 500px, 0);
        transform: translate3d(0, 500px, 0);
        visibility: hidden
    }
}

@-webkit-keyframes Toastify__slideOutUp {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(0, -500px, 0);
        transform: translate3d(0, -500px, 0);
        visibility: hidden
    }
}

@keyframes Toastify__slideOutUp {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(0, -500px, 0);
        transform: translate3d(0, -500px, 0);
        visibility: hidden
    }
}

.Toastify__slide-enter--bottom-left,
.Toastify__slide-enter--top-left {
    -webkit-animation-name: Toastify__slideInLeft;
    animation-name: Toastify__slideInLeft
}

.Toastify__slide-enter--bottom-right,
.Toastify__slide-enter--top-right {
    -webkit-animation-name: Toastify__slideInRight;
    animation-name: Toastify__slideInRight
}

.Toastify__slide-enter--top-center {
    -webkit-animation-name: Toastify__slideInDown;
    animation-name: Toastify__slideInDown
}

.Toastify__slide-enter--bottom-center {
    -webkit-animation-name: Toastify__slideInUp;
    animation-name: Toastify__slideInUp
}

.Toastify__slide-exit--bottom-left,
.Toastify__slide-exit--top-left {
    -webkit-animation-name: Toastify__slideOutLeft;
    animation-name: Toastify__slideOutLeft
}

.Toastify__slide-exit--bottom-right,
.Toastify__slide-exit--top-right {
    -webkit-animation-name: Toastify__slideOutRight;
    animation-name: Toastify__slideOutRight
}

.Toastify__slide-exit--top-center {
    -webkit-animation-name: Toastify__slideOutUp;
    animation-name: Toastify__slideOutUp
}

.Toastify__slide-exit--bottom-center {
    -webkit-animation-name: Toastify__slideOutDown;
    animation-name: Toastify__slideOutDown
}

@-webkit-keyframes Toastify__spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes Toastify__spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.login {
    font-family: Poppins, sans-serif !important;
    width: 450px
}

.login-main-div {
    height: 86.5vh
}

.text-heading {
    background: transparent;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 20px);
    font-style: normal;
    font-weight: 700;
    margin-left: 5px;
    margin-top: 11px;
    text-shadow: 2px 2px 2px #000
}

.my-about,
.paragraph {
    text-align: center
}

.paragraph {
    font-family: Comfortaa;
    padding: auto
}

.form {
    background: #fff;
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: 2px 1px 19px 2px gray
}

.input-gr {
    background: #edf5e9;
    cursor: pointer;
    width: 34px
}

.form input {
    background: #edf5e9;
    border: 0;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 14px;
    outline: 0
}

.form input:focus {
    background: #dbdbdb
}

.form #buttonId {
    background: #026d02;
    border: 0;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-family: Poppins, sans-serif !important;
    font-size: 14px;
    outline: 0;
    padding: 5px;
    text-transform: uppercase;
    transition: all .3 ease;
    width: 100%
}

.form button:active {
    background: #395591
}

input[type=checkbox] {
    -webkit-appearance: checkbox;
    appearance: checkbox;
    display: inline-block;
    height: 12px;
    width: 12px
}

.password-container {
    position: relative
}

.eye-icon {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.about {
    overflow-x: scroll;
    overflow-y: scroll
}

.password-toggle {
    cursor: pointer;
    position: absolute;
    right: 35px;
    top: 74%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-user-select: none;
    user-select: none
}

.about {
    height: 700px;
    max-width: 976px;
    min-width: 375
}

.tooltip-icon {
    cursor: pointer;
    right: 0;
    top: 30%
}

.tooltip-icon,
.tooltip-text {
    position: absolute;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.tooltip-text {
    background-color: #333;
    border-radius: 6px;
    color: #fff;
    opacity: 0;
    padding: 5px;
    right: calc(100% + 10px);
    text-align: center;
    top: 50%;
    transition: opacity .3s;
    visibility: hidden;
    width: 120px;
    z-index: 1
}

.tooltip-icon:hover+.tooltip-text,
.tooltip-icons:hover+.tooltip-text {
    opacity: 1;
    visibility: visible
}

.icon {
    display: inline-block
}

.tooltip-icons {
    cursor: pointer;
    position: absolute;
    right: -14px;
    top: 59%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.vertical {
    border-left: 1px solid #dcc9c9;
    height: 75%;
    left: 50%;
    position: absolute;
    top: 15%
}

.refresh {
    color: #2b6e5b;
    cursor: pointer;
    font-size: medium;
    -webkit-user-select: none;
    user-select: none
}

.error-message {
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    margin: 5px
}

.password-toggle {
    top: 72%
}

.InputCaptcha {
    background-color: rgba(5, 90, 5, .19) !important;
    height: 91%;
    width: 50%
}

.CaptchaText {
    color: green;
    font-family: Poppins, sans-serif !important;
    font-size: 15px;
    font-weight: 400
}

.CaptchTextCenter {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%
}

.RefreshInputCaptcha {
    background-color: #4b6cb7 !important;
    color: #fff !important;
    font-family: Poppins, sans-serif !important;
    height: 58% !important;
    width: 100%
}

.CaptchaForFill {
    background-image: url(https://thumbs.dreamstime.com/b/grid-paper-abstract-striped-background-color-blue-horizontal-lines-geometric-pattern-school-wallpaper-textures-lined-grid-184815554.jpg);
    background-size: cover;
    cursor: default;
    display: flex;
    -webkit-filter: brightness(.9);
    filter: brightness(.9);
    font-size: 20px;
    font-weight: 500;
    height: 32px !important;
    justify-content: center;
    padding: 0;
    text-decoration: line-through;
    text-decoration-line: underline;
    width: 100%
}

.LoginButton,
.SignUpButton {
    width: auto
}

.form .SignUpButton {
    background: #4b6cb7;
    border: 0;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-family: Poppins, sans-serif !important;
    font-size: 14px;
    outline: 0;
    padding: 8px !important;
    text-transform: uppercase;
    transition: all .3 ease;
    width: 50% !important
}

.LoginForgot,
.LoginRememberme {
    color: #4b6cb7;
    cursor: pointer;
    font-family: Poppins, sans-serif !important;
    font-size: 12px;
    font-weight: 600
}

.LoginForgot {
    text-wrap: nowrap
}

.LoginPassword {
    color: #4b6cb7;
    cursor: pointer;
    font-family: Poppins, sans-serif !important;
    font-size: 12px;
    font-weight: 600
}

#rememberMe:checked+label {
    color: green
}

.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    height: 16px;
    outline: none;
    position: relative;
    width: 16px
}

.custom-checkbox:before {
    border: 2px solid #4caf50;
    border-radius: 3px;
    box-sizing: border-box;
    content: "";
    height: 14px;
    position: absolute;
    width: 14px
}

.custom-checkbox:checked:before {
    background-color: #4caf50;
    background-image: url(/static/media/whiteTick.445f6880ffaa7f0a769c.webp);
    background-size: 100% 100%;
    color: #fff
}

.paragraphofcaptcha {
    align-items: center;
    display: flex;
    font-size: 24px;
    height: 100%;
    justify-content: center;
    margin-top: 0;
    padding: 0;
    text-align: center;
    width: 100%
}

.text-danger.hidden {
    display: none
}

.text-danger.visible {
    color: red;
    display: block
}

.CaptchaMessage {
    left: 241px;
    position: absolute;
    top: 232px
}

.check-labels {
    margin-left: 17px
}

.login-main-div {
    background-image: linear-gradient(45deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(https://www.natlawreview.com/sites/default/files/article/aux/1132/India%20on%20a%20globe%20at%20night%20indian%20globalization_0.jpg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.para-body {
    background-color: #253a58d6;
    color: #fff;
    padding: 10px
}

.geopicx-heading {
    color: #eee8aa;
    font-family: Poppins, sans-serif;
    font-size: 32px;
    font-weight: 700
}

.col-geopicx-4 {
    margin: 7rem 7rem 0
}

.col-geopicx-6 {
    margin: auto
}

.remeberWraper {
    display: flex !important;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 20px
}

.image img {
    -webkit-filter: drop-shadow(2px 4px 6px #000);
    filter: drop-shadow(2px 4px 6px black)
}

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

.password-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.Captchwraper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px
}

.w_100 {
    width: 100%
}

.geopicx_deatils_text {
    font-family: Lora, serif;
    font-size: 1.6rem;
    font-weight: 200;
    text-align: justify
}

@media (min-width:280px) and (max-width:479px) {
    .form {
        width: 97% !important
    }

    .LoginForgot {
        text-wrap: wrap
    }

    .vertical {
        display: none;
        margin: 5px
    }

    .col-geopicx-4 {
        margin: 0
    }
}

@media (min-width:768px) and (max-width:1023px) {
    .col-geopicx-6 {
        margin-left: 20px;
        margin: 0 20px
    }

    .p-md-5 {
        padding: 0 !important
    }

    .vertical {
        height: 0
    }

    .para-body {
        margin: 0;
        padding: 0
    }

    .loginwraper.col-sm-5 {
        flex: 0 0 41.666667%;
        max-width: 57.666667%
    }
}

.loginclose {
    color: #fff
}

.loginclose:hover {
    color: #f44336
}

.refresh-icon.rotate {
    -webkit-animation: rotate .1s linear;
    animation: rotate .1s linear
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
}

@media (min-width:1024px) and (max-width:1279px) {
    .para-body {
        margin: 0
    }

    .geopicx_deatils_text {
        font-size: 12px
    }
}

@media (min-width:1280px) and (max-width:1535px) {
    .para-body {
        margin: 0
    }
}

@media (min-width:1536px) {
    .col-geopicx-6 {
        margin: 40px auto auto
    }
}

#password::-webkit-input-placeholder {
    color: #888;
    font-size: small
}

#password::placeholder {
    color: #888;
    font-size: small
}

#username::-webkit-input-placeholder {
    color: #888;
    font-size: small
}

#username::placeholder {
    color: #888;
    font-size: small
}

#captcha::-webkit-input-placeholder {
    color: #888;
    font-size: small
}

#captcha::placeholder {
    color: #888;
    font-size: small
}

.GeopicsHeadingLogin {
    color: #fff;
    font-family: Eras ITC, sans-serif;
    font-size: 50px;
    font-weight: 400;
    margin: 0 0 0 7px;
    text-shadow: 3px 1px 3px #a557cd
}

.GatewayLogin {
    color: #ffff92;
    font-family: Trebuchet MS, Arial, sans-serif;
    font-size: 16px;
    font-weight: 100;
    text-shadow: 1px .5px #000
}

.geopicx_deatils_text {
    align-items: "center";
    color: #c2f1f3;
    display: flex;
    font-family: Open Sans, sans-serif;
    font-size: 13px;
    font-weight: 100;
    justify-content: center;
    line-height: 1.5;
    text-align: left;
    text-shadow: 2px 2px #000
}

.loginwraper {
    padding-top: 60px
}

@media (min-width:1300px) and (max-width:1750px) {
    .col-geopicx-4 {
        margin: 7rem 0 !important
    }
}

@media (min-width:992px) and (max-width:1299px) {
    .col-geopicx-4 {
        margin: 7rem 0 !important
    }
}

@media (min-width:768px) and (max-width:991px) {
    .col-geopicx-4 {
        margin: 7rem 0 !important
    }

    .login-main-div {
        height: 100%
    }
}

@media (min-width:576px) and (max-width:767.98px) {
    .p-md-5 {
        padding: 0 !important
    }

    .login-main-div {
        height: 100%;
        height: auto
    }

    .vertical {
        display: none
    }

    .row.align-items-center.p-md-5.loginwraper {
        display: flex;
        flex-direction: column
    }

    .col-geopicx-6 {
        margin: 0 20px
    }

    .col-geopicx-4 {
        margin: 7rem 0 !important
    }
}

@media (max-width:575.98px) {
    .col-geopicx-6 {
        margin: 0 20px
    }

    .col-geopicx-4 {
        margin: 7rem 0 !important
    }

    .login-main-div {
        height: auto;
        width: 100%
    }

    .vertical {
        display: none
    }
}

@media (min-width:480px) and (max-width:767px) {
    .login-main-div {
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll
    }
}

@media (min-width:320px) and (max-width:425px) {
    .LoginForgotDisplay {
        display: none
    }

    .remeberWraper {
        gap: 62px
    }

    .mobileviewbuttonlogin {
        padding: 5px 9px !important
    }

    .LoginForgot,
    .LoginRememberme {
        font-size: 11px
    }

    .remeberWraper {
        margin: 0
    }
}

.bg-footer {
    background-color: #18374f
}

.footer-heading {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    letter-spacing: .5px
}

.footer-link a {
    color: #ffffffd6;
    line-height: 25px;
    transition: all .5s
}

.footer-link a,
.list-inline {
    font-size: min(3vw, 15px)
}

.footer-link a:hover {
    color: #1bbc9b
}

.contact-info {
    color: #acacac;
    font-size: min(3vw, 15px)
}

.footer-social-icon {
    border-radius: 3px;
    display: inline-block;
    height: 30px;
    line-height: 20px;
    text-align: center;
    width: auto
}

.footer-social-icon:hover {
    color: #1bbc9b;
    cursor: pointer
}

.apple,
.facebook,
.google,
.twitter {
    color: #fff
}

.footer-alt {
    color: #acacac
}

.footer-heading {
    font-size: 18px;
    padding-bottom: 12px;
    position: relative
}

.footer-heading:after {
    border-bottom: 2px solid #1bbc9b;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    width: 30px
}

.ParagraphOfFooter {
    color: #ffffffd6;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: .5px
}

ul li {
    list-style: none;
    margin: 0;
    padding: 0
}

.Footer-content-row {
    margin: 0 20rem
}

.GeopicsHeadingInside-footer {
    color: #fff;
    font-family: Eras ITC, sans-serif;
    font-size: min(6vw, 25px);
    font-weight: 400;
    margin: 0 0 0 7px;
    text-shadow: 3px 1px 3px #a557cd
}

.Footer-geopics {
    align-items: center;
    display: flex;
    justify-content: flex-start
}

@media (min-width:992px) and (max-width:1299px) {
    .Footer-content-row {
        margin: 0 85px !important
    }
}

@media (min-width:768px) and (max-width:991px) {
    .Footer-content-row {
        margin: 0 !important
    }
}

@media (min-width:280px) and (max-width:767.98px) {
    .Footer-content-row {
        margin: 0 !important
    }

    @media (max-width:575px) {
        .Footer-content-row {
            margin: 0 !important
        }
    }
}

.GeopicxModalOverlay {
    align-items: center;
    -webkit-animation: fadeIn .3s forwards;
    animation: fadeIn .3s forwards;
    background: rgba(0, 0, 0, .5);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.GeopicxModal {
    -webkit-animation: slideIn .3s forwards;
    animation: slideIn .3s forwards;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    opacity: 0;
    overflow: hidden;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    width: 800px
}

.GeopicxModalHeader {
    align-items: center;
    background: #2196f3;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 3px 0
}

.GeopicxModalLogo {
    -webkit-filter: drop-shadow(2px 2px 4px #000);
    filter: drop-shadow(2px 2px 4px black);
    height: 20px;
    margin: 0 5px 0 7px;
    width: 20px
}

.GeopicxModalTitle {
    flex-grow: 1;
    font-family: Eras ITC, Eras Light ITC, sans-serif;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0;
    margin-left: 5px
}

.GeopicxCloseButton {
    cursor: pointer;
    height: 10px;
    margin-right: 8px;
    width: 10px
}

.GeopicxCloseButton:hover {
    color: red
}

.GeopicxModalBodyLogoSec {
    align-items: center;
    display: flex;
    gap: 7px;
    justify-content: center;
    padding-bottom: 5px;
    padding-top: 10px
}

.GeopicxModalIcon {
    height: 22px;
    width: 22px
}

.GeopicxModalHeading {
    color: #464545;
    font-family: Lucida, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700
}

.GeopicxModalBody {
    text-align: center
}

.GeopicxModalMessageBox2 {
    max-height: 75px;
    overflow-y: auto;
    scrollbar-width: thin
}

.GeopicxModalMessage1 {
    color: #090909;
    font-family: Calibri, sans-serif;
    font-size: 1.7rem;
    font-weight: 500;
    margin-bottom: 7px;
    margin-top: 5px
}

.GeopicxModalMessage2 {
    color: #474747;
    font-family: Roboto, sans-serif;
    font-size: 1.3rem;
    margin-bottom: 7px;
    margin-top: 5px;
    padding: 0 15px
}

.GeopicxModalMessage3 {
    color: #2c159a;
    font-family: Arial Narrow, sans-serif;
    font-size: 1.65rem;
    margin-bottom: 5px;
    margin-top: 5px
}

.GeopicxModalFooter {
    display: flex;
    justify-content: center;
    padding: 10px
}

.GeopicxModalCancelButton,
.GeopicxModalConfirmButton {
    background: #2196f3;
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    margin: 5px;
    padding: 5px 30px
}

.GeopicxModalCancelButton {
    background-color: #cd6727
}

.GeopicxModalCancelButton:hover {
    background-color: #ab683f9e
}

.GeopicxModalConfirmButton:hover {
    background-color: #c4ddf2e1;
    color: #2196f3
}

.GeopicxModal--success .GeopicxModalHeader {
    background: #409142
}

.GeopicxModal--error .GeopicxModalHeader {
    background: #9f1910
}

.GeopicxModal--confirm .GeopicxModalHeader {
    background: #1382dd
}

.GeopicxModal--warning .GeopicxModalHeader,
.GeopicxModal--warningConfirm .GeopicxModalHeader,
.GeopicxModal--warningInput .GeopicxModalHeader {
    background: #e40675
}

.GeopicxModal--info .GeopicxModalHeader {
    background: #0d4b7d
}

.GeopicxModal--fail .GeopicxModalHeader {
    background: #ff0015
}

.GeopicxModal--help .GeopicxModalHeader {
    background: #918829
}

.GeopicxModal--multiline .GeopicxModalBody {
    max-height: 300px;
    overflow-y: auto
}

.GeopicxModalInputSection {
    padding: 10px;
    text-align: center
}

.GeopicxModalInputLabel {
    font-size: 14px;
    font-weight: 400
}

.GeopicxModalInput {
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    padding: 2px 4px;
    width: 50%
}

.Select-Dir-Div {
    align-items: center;
    display: flex;
    justify-content: center
}

@media (max-width:420px) {
    .GeopicxModal {
        height: auto;
        width: 80%
    }
}

.centralized-formB {
    background-color: #fff;
    border-radius: 1px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    margin: 0 auto
}

.form-headerB {
    align-items: center;
    border-radius: 0 0 0 0;
    display: flex;
    justify-content: space-between;
    padding: 8px
}

.form-logo img {
    max-width: 30px
}

.Header-textB {
    color: #fff;
    font-size: 20px;
    margin: 0;
    text-shadow: 4px 3px 4px #000
}

.header-left {
    align-items: center;
    display: flex
}

.form-bodyB {
    padding: 10px
}

.close-buttonH {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    transition: color .3s ease
}

.close-buttonH:hover {
    color: red
}

.custom-button.clicked,
.custom-button:active {
    -webkit-transform: scale(.99);
    transform: scale(.99)
}

.custom-button:disabled {
    cursor: not-allowed
}

.custom-button:hover:not(.disabled) {
    background-color: #ccc;
    background-color: var(--hover-bg-color, #ccc);
    border-color: transparent;
    border-color: var(--hover-border-color, transparent);
    color: #000;
    color: var(--hover-text-color, #000)
}

.custom-button.disabled {
    cursor: not-allowed;
    opacity: .6
}

.custom-button.clicked {
    -webkit-transform: scale(.98);
    transform: scale(.98)
}

.btn-outline-primary {
    background-color: #007bff
}

.custom-button.disabled:hover {
    background-color: #ddd;
    border-color: #ddd;
    color: #aaa
}

.custom-button.default {
    background-color: #007bff
}

.custom-button.default:disabled {
    background-color: #6c757d
}

.custom-button.login {
    background-color: #2b6e5b;
    height: 50px;
    width: 150px
}

.custom-button.login:disabled {
    background-color: #6c757d
}

.custom-button.logout {
    background-color: red;
    height: 50px;
    width: 150px
}

.custom-button.primary {
    background-color: #007bff
}

.custom-button.primary:disabled {
    background-color: #6c757d
}

.custom-button.success {
    background-color: #28a745
}

.custom-button.success:disabled {
    background-color: #6c757d
}

.custom-button.danger {
    background-color: #dc3545
}

.custom-button.danger:disabled {
    background-color: #6c757d
}

.custom-button.warning {
    background-color: #ffc107;
    color: #000
}

.custom-button.warning:disabled {
    background-color: #6c757d
}

.custom-button {
    background-color: initial;
    background-color: var(--bg-color, transparent);
    border: 2px solid #000;
    border: 2px solid var(--border-color, #000);
    border-radius: 4px;
    color: #fff;
    color: var(--text-color, #fff);
    cursor: pointer;
    font-size: 16px;
    padding: 10px 20px;
    padding: var(--padding, 10px 20px);
    transition: background-color .3s, color .3s, border-color .3s
}

.custom-button:hover {
    background-color: #ccc;
    background-color: var(--hover-bg-color, #ccc);
    border-color: #000;
    border-color: var(--hover-border-color, #000);
    color: #000;
    color: var(--hover-text-color, #000)
}

@media (max-width:576px) {
    .custom-button {
        margin: 10px
    }
}

@media (max-width:375px) {
    .custom-button {
        font-size: 12px !important;
        padding: 5px 20px;
        width: -webkit-fit-content !important;
        width: -moz-fit-content !important;
        width: fit-content !important
    }
}

.Button2 {
    align-items: center;
    background: var(--bg-color-start);
    border: 2px solid var(--border-color);
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 16px;
    font-weight: 700;
    justify-content: center;
    padding: 10px;
    position: relative;
    text-shadow: var(--text-shadow);
    text-transform: uppercase;
    transition: background .15s ease, color .15s ease, border-color .15s ease
}

.Button2 .button-text {
    font-family: Trebuchet MS, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif;
    font-size: 20px;
    height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.Button2:disabled {
    cursor: not-allowed;
    opacity: .5
}

.Button2:after {
    background: var(--border-bottom-color);
    border-radius: 0 0 10px 10px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    transition: height .15s ease
}

.Button2:hover {
    background: var(--hover-bg-color);
    background-color: var(--hover-bg-color);
    border-color: var(--hover-border-color);
    color: var(--hover-text-color)
}

.button-icon-left {
    margin-right: 8px
}

.button-icon-right {
    margin-left: 8px
}

@media (min-width:320px) and (max-width:425px) {
    .buttonWrapperMobileView {
        flex-direction: row !important
    }
}

.mainBodyOfappication {
    height: 87vh
}

.DashBordFirstImage {
    background-image: url(/static/media/pixelcut-export.eee4baa3d0ddbe232bae.png);
    background-size: cover;
    padding-top: 100px
}

.DashBordFirstImage,
.DashBordImage2 {
    background-position: 50%;
    background-repeat: no-repeat;
    min-height: 350px
}

.DashBordImage2 {
    background-image: url(/static/media/DashBord_image2.17b63266bdbfed65aaf2.png);
    background-size: contain
}

.DashBordImage2MainBox h2 {
    color: #fffaf0
}

.DashBordImage2MainBox ul {
    color: #fffaf0;
    font-size: 1.3rem;
    padding-left: 0
}

.DashBordImage3MainBox h2 {
    color: #fffaf0
}

.DashBordImage3MainBox ul {
    color: #fffaf0;
    font-size: 1.3rem;
    padding-left: 0
}

.DashBordFirstImageMainBox button {
    background-color: #4c9dd4;
    border-radius: 1rem;
    box-shadow: 1px 1px 1px #000, inset 2px 2px 20px #000;
    color: #fff;
    font-family: calibri;
    font-weight: 500;
    padding: 1rem
}

.DashBordFirstImageMainBox p {
    font-size: 16px;
    font-weight: 400;
    padding-top: 8rem;
    text-align: justify
}

@media (max-width:575px) {
    .DashBordFirstImage {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 150px;
        padding-top: 20px
    }

    .DashBordFirstImageMainBox p {
        font-size: 12px;
        padding-top: 2rem
    }

    .DashBordFirstImageMainBox button {
        font-size: .85rem;
        padding: .75rem
    }
}

@media (min-width:576px) and (max-width:768px) {
    .DashBordFirstImage {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 200px;
        padding-top: 30px
    }

    .DashBordFirstImageMainBox p {
        font-size: 12px;
        padding-top: 4rem
    }

    .DashBordFirstImageMainBox button {
        font-size: 1rem;
        padding: 1rem
    }
}

@media (min-width:768px) and (max-width:991px) {
    .DashBordFirstImage {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 300px;
        padding-top: 50px
    }

    .DashBordFirstImageMainBox p {
        font-size: 15px;
        padding-top: 6rem
    }

    .DashBordFirstImageMainBox button {
        font-size: 1.5rem;
        padding: 1rem
    }
}

@media (min-width:992px) and (max-width:1299px) {
    .DashBordFirstImage {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 350px;
        padding-top: 70px
    }

    .DashBordFirstImageMainBox p {
        font-size: 16px;
        padding-top: 7rem
    }

    .DashBordFirstImageMainBox button {
        font-size: 2rem;
        padding: 1rem
    }
}

@media (min-width:1300px) and (max-width:1750px) {
    .DashBordFirstImage {
        background-size: cover;
        min-height: 400px;
        padding-top: 80px
    }

    .DashBordFirstImageMainBox p {
        font-size: 16px;
        padding-top: 8rem
    }

    .DashBordFirstImageMainBox button {
        font-size: 3.1rem;
        padding: 1.1rem
    }
}

@media (min-width:425px) and (max-width:768px) {
    .DashBordImage2 {
        background-image: url(/static/media/DashBord_image2.17b63266bdbfed65aaf2.png);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 350px
    }

    .mobileView {
        padding: 0 12px !important;
        text-align: center !important
    }

    .responsivemainContaiofdashboard {
        padding: 10px !important
    }

    .vertical {
        display: none
    }

    .row.align-items-center.p-md-5.loginwraper {
        display: flex;
        flex-direction: column
    }

    .col-geopicx-6 {
        margin: 0 20px
    }

    .col-geopicx-4 {
        margin: 7rem 0 !important
    }
}

@media (min-width:320px) and (max-width:425px) {
    .DashBordImage2 {
        background-image: url(/static/media/DashBord_image2.17b63266bdbfed65aaf2.png);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 350px
    }

    .mobileView {
        padding: 0 12px !important;
        text-align: center !important
    }

    .responsivemainContaiofdashboard {
        padding: 10px !important
    }

    .vertical {
        display: none
    }

    .row.align-items-center.p-md-5.loginwraper {
        display: flex;
        flex-direction: column
    }

    .col-geopicx-6 {
        margin: 0 20px
    }

    .col-geopicx-4 {
        margin: 7rem 0 !important
    }
}

@media (min-width:768px) and (max-width:1024px) {
    .DashBordImage2 {
        background-image: url(/static/media/DashBord_image2.17b63266bdbfed65aaf2.png);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 350px
    }

    .mobileView {
        padding: 0 12px !important;
        text-align: center !important
    }

    .responsivemainContaiofdashboard {
        padding: 10px !important
    }

    .vertical {
        display: none
    }

    .row.align-items-center.p-md-5.loginwraper {
        display: flex;
        flex-direction: column
    }

    .col-geopicx-6 {
        margin: 0 20px
    }

    .col-geopicx-4 {
        margin: 7rem 0 !important
    }
}

.navtext {
    text-transform: uppercase
}

.nav_link_home:visited {
    color: #fff
}

.geopixnav {
    background-color: #026d02 !important;
    border-radius: 0
}

.navbaricon {
    height: .9em !important;
    vertical-align: initial !important
}

.applicationsDropdown,
.dashDropDown {
    right: 17px
}

.backnavarrow,
.backnavarrowM {
    margin-right: 33px
}

.header {
    margin-top: -1px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100
}

.mars {
    background: -webkit-linear-gradient(#fff, #fff);
    font-family: Comfortaa, cursive;
    font-style: italic;
    font-weight: 700
}

.my-nav {
    background-color: #079ef5;
    padding: 10px
}

.my-nav,
.nav_link_home {
    align-items: center;
    display: flex
}

.nav_link_home {
    color: #fff;
    font-size: 1.4rem;
    overflow: hidden;
    padding: 2px 10px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s
}

.active_nav_link_home,
.nav_link_home:focus {
    outline: none;
    text-decoration: none
}

.active_nav_link_home {
    background-color: #131334c9;
    border-radius: 21px;
    color: #fff
}

.applicationsDropdownbtn {
    background-color: initial
}

.geopicnavicon {
    font-size: 13px
}

.navbar {
    min-height: 40px
}

.searchIcon {
    font-size: 15px;
    padding: 2px
}

.adminusername {
    position: absolute;
    right: -725px;
    top: 13px
}

.authorizeusername {
    position: absolute;
    right: -412px;
    top: 13px
}

.sadminusername {
    position: absolute;
    right: -567px;
    top: 13px
}

.nav-bg {
    margin-top: -5px
}

.lang {
    color: #000
}

.welcome {
    color: #fff;
    padding-right: 10px;
    top: 65px
}

.disabled-link,
.h1 {
    cursor: not-allowed;
    pointer-events: none
}

.User-Profile {
    color: #fff
}

.agrilinkdrop.disabled-item {
    color: #999;
    cursor: not-allowed
}

.agrilinkdrop .disabled-message {
    color: rgba(0, 0, 0, .267)
}

.marslinkdrop.disabled-item {
    color: #999;
    cursor: not-allowed
}

.marslinkdrop .disabled-message {
    color: rgba(0, 0, 0, .267)
}

.waterlinkdrop.disabled-item {
    color: #999;
    cursor: not-allowed
}

.waterlinkdrop .disabled-message {
    color: rgba(0, 0, 0, .267)
}

.Main-Header-ProfilePopUp {
    position: absolute;
    right: 70px;
    top: 32px
}

.Application-nav-row {
    margin-left: 15px
}

.disabled-link {
    color: gray
}

.disabled-text {
    color: grey
}

.geopixnav {
    position: relative
}

.geopicnaviconss {
    cursor: pointer;
    padding: 16px;
    position: absolute;
    right: 0;
    top: 0
}

@media (max-width:767px) {
    .User-Profile {
        left: 98% !important;
        position: absolute !important;
        top: 6% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important
    }
}

.geopicnaviconsu {
    cursor: pointer;
    height: 30px !important;
    padding: 20px;
    position: absolute;
    right: 10px;
    top: 0;
    width: 30px !important
}

@media (max-width:1550px) {
    .welcome {
        font-size: 10px;
        padding-left: 5px;
        padding-right: 10px;
        position: fixed;
        right: 43px !important;
        top: 63px
    }

    .search {
        display: flex;
        left: -4px !important;
        position: relative;
        width: 100%
    }
}

@media (max-width:748px) {
    .welcome {
        font-size: 20px !important
    }
}

@media (max-width:765px) {
    .backnavarrowM {
        margin-bottom: 25px
    }
}

@media (max-width:767px) {
    .AgricultureNavbar {
        max-width: 180px
    }

    .MiningNavbar {
        max-width: 190px
    }

    .DefenceNavbar,
    .Waternavbar {
        max-width: 180px
    }

    .applicationsDropdown,
    .dashDropDown {
        right: -99px;
        top: -26px
    }
}

.small-screen-mt-class {
    margin-top: -32px !important
}

.dropdown-toggle:after {
    background: #2b6e5b;
    color: #fff;
    display: none
}

.navtext .nav_link_home:hover {
    color: orange
}

.application_dropdown:hover .dropdown_menu_item {
    display: block
}

.custom-dropdownCAr {
    max-width: 100%
}

.custom-dropdown-menuCAr {
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 40vh;
    height: auto;
    justify-content: center !important;
    padding: 10px !important
}

.custom-dropdown-itemCAr {
    align-items: center;
    border-radius: 5px;
    color: #fff;
    display: flex;
    margin: 5px 0;
    padding: 10px 15px;
    transition: background-color .3s ease
}

.grid-container {
    grid-column-gap: 0;
    align-items: center;
    background-color: #373737;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #fff;
    display: grid;
    justify-content: center;
    padding: 0 5px
}

.dragg-opt-nav {
    margin-left: 5px
}

.grid-item {
    padding: 5px 10px
}

.grid-item,
.grid_item_other {
    color: #fff;
    text-align: center;
    transition: background-color .3s ease, -webkit-transform .3s ease;
    transition: background-color .3s ease, transform .3s ease;
    transition: background-color .3s ease, transform .3s ease, -webkit-transform .3s ease
}

.grid_item_other {
    padding: 2px
}

.grid_item_other .dropdown-item .row {
    display: flex;
    justify-content: flex-start;
    width: 100%
}

.itmesofHEaderDropdown {
    align-items: center;
    display: flex;
    font-family: Eras ITC, sans-serif;
    font-size: 13px;
    font-weight: 400
}

.vertical-lineDAsahbord {
    background-color: #ccc;
    display: inline-block;
    height: 30px;
    width: 2px
}

.single-item-center {
    align-items: center;
    grid-template-columns: 1fr;
    justify-items: center
}

.custom-dropdown-menuCAr.dropdown-menu.show {
    background-color: initial;
    box-shadow: none;
    margin: 0
}

.Notification_BG {
    background-color: rgba(0, 0, 0, .9);
    margin-top: 15px;
    padding: 10px 15px;
    width: 263px
}

.Notification_BG,
.theme_dropdown .dropdown-item {
    align-items: center;
    border-radius: 5px;
    color: #fff;
    display: flex;
    justify-content: center
}

.theme_dropdown .dropdown-item {
    box-sizing: border-box;
    flex-basis: calc(33.33% - 10px);
    flex-grow: 1;
    flex-shrink: 1;
    padding: 10px;
    text-align: center;
    transition: background-color .3s ease, -webkit-transform .3s ease;
    transition: background-color .3s ease, transform .3s ease;
    transition: background-color .3s ease, transform .3s ease, -webkit-transform .3s ease
}

a.grid-item.dropdown-item:hover {
    background-color: #fff;
    color: #000
}

.theme_dropdown .dropdown-item .row {
    display: flex;
    justify-content: flex-start;
    width: 100%
}

.grid-item-icon {
    margin-right: 10px
}

.itmesofHEaderDropdown {
    flex-grow: 1
}

.custom-dropdownCAr {
    box-sizing: border-box;
    height: auto !important;
    left: 0;
    padding: 5px 10px;
    position: absolute;
    top: 77%;
    width: 100%
}

a.grid_item_other.dropdown-item:hover {
    background-color: #fff;
    border: none;
    border-radius: 5px;
    outline: none
}

a.grid-item.dropdown-item.disabled:hover {
    background-color: #fff !important;
    border: none;
    border-radius: 5px;
    outline: none
}

.notification_text {
    color: #fff;
    font-size: 13px;
    text-transform: capitalize
}

.navbar_wraper {
    background-color: #026d02 !important;
    height: 40px;
    padding: 0 10px 0 5px
}

.navbar_wraper,
.navbar_wraper .navbar-container {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.navbar_wraper .navbar-container {
    width: 100%
}

.navbar_wraper .navbar-links {
    display: flex
}

.navbar_wraper .nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0
}

.navbar_wraper .nav-item {
    padding: 0 5px;
    position: relative;
    width: -webkit-max-content;
    width: max-content
}

.nav-link,
.navbar_wraper .nav-item,
.navbar_wraper .nav-item a {
    align-items: center;
    color: #fff;
    font-size: 1.4rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s
}

.nav-link,
.navbar_wraper .nav-item a {
    padding: 2px 5px
}

.navbar_wraper .nav-item.active a {
    background-color: #131334c9;
    border-radius: 10px;
    color: #fff
}

.navbar_wraper .nav-item a:hover {
    color: orange
}

.navbar_wraper .dropdown {
    cursor: pointer
}

.navbar_wraper .dropdown_menu {
    box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
    left: 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    transition: all .5s ease;
    visibility: hidden;
    z-index: 999
}

.navbar_wraper .dropdown:hover .dropdown_menu,
.navbar_wraper .dropdown_menu.show {
    opacity: 1;
    visibility: visible
}

.navbar_wraper .dropdown-item {
    padding: 10px;
    text-align: left
}

.navbar_wraper .dropdown-item a {
    color: #f8f3f3 !important;
    text-decoration: none
}

.navbar_wraper .navbar-user .btn {
    background-color: #dc3545;
    border: none;
    color: #fff;
    padding: 5px 10px
}

.navbar_wraper .navbar-user .btn:hover {
    background-color: #c82333
}

.disabled-li {
    opacity: .5;
    pointer-events: none
}

.verticle_line_home {
    border-left: 1px solid hsla(0, 22%, 96%, .28);
    height: 38px;
    margin: 0 18px
}

.theme_dropdown {
    grid-column-gap: 0;
    align-items: center;
    background-color: #373737;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #fff;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    padding: 2px 5px;
    width: 600px
}

.grid_container {
    justify-content: space-between;
    position: relative
}

.grid-item,
.grid_container {
    align-items: center;
    display: flex
}

.grid-item {
    justify-content: center
}

.vertical_line_Img {
    background-color: #f31a1a !important;
    border-left: 1px solid gray;
    display: inline-block;
    height: 40px;
    margin: 0 10px;
    width: 1px
}

.Loginbutton {
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
    padding: 6px 12px;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
    width: 200px
}

.formargin {
    margin-left: 35rem !important
}

@media (max-width:575.98px) {
    .navbar_wraper .navbar-user .btn {
        padding: 3px !important
    }

    .ApplicationHome {
        margin: 8px 0 !important
    }

    .nav_link_home {
        margin: 10px 0 !important
    }

    .formargin {
        margin-left: 0 !important
    }

    .navbar_wraper .nav-list {
        background-color: #165906bf;
        display: flex;
        flex-direction: column;
        left: 0;
        list-style: none;
        margin: 10px 0 0;
        padding: 0;
        position: absolute;
        width: 200px
    }

    .theme_dropdown {
        grid-template-columns: repeat(1, 1fr);
        width: 200px
    }

    .grid_container .vertical_line_Img {
        display: none
    }

    .BackIcon {
        color: #f9fbfd !important;
        font-size: 25px !important;
        left: 3px !important;
        position: fixed !important;
        top: 98px !important
    }
}

@media (min-width:576px) and (max-width:767.98px) {
    .ApplicationHome {
        margin: 8px 0 !important;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }

    .nav_link_home {
        margin: 10px 0 !important
    }

    .formargin {
        margin-left: 0 !important
    }

    .navbar_wraper .nav-list {
        background-color: #165906bf;
        display: flex;
        flex-direction: column;
        left: 0;
        list-style: none;
        margin: 10px 0 0;
        padding: 0;
        position: absolute;
        width: 200px
    }

    .theme_dropdown {
        grid-template-columns: repeat(1, 1fr)
    }

    .grid-item {
        height: 50px;
        margin: 5px
    }

    .grid-item,
    .theme_dropdown {
        width: 200px
    }

    .grid_container .vertical_line_Img {
        display: none
    }

    .BackIcon {
        color: #f9fbfd !important;
        font-size: 25px !important;
        left: 3px !important;
        position: fixed !important;
        top: 98px !important
    }
}

@media (min-width:768px) and (max-width:991px) {
    .formargin {
        margin-left: 10rem !important
    }

    .theme_dropdown {
        margin-left: -100px;
        width: 400px
    }

    .nav-link,
    .navbar_wraper .nav-item a {
        font-size: 1rem;
        padding: 2px 4px
    }

    .navbar_wraper .nav-item {
        font-size: 1rem;
        padding: 0 3px
    }

    .geopicnavicon {
        font-size: 9px
    }
}

@media (min-width:992px) and (max-width:1299px) {
    .formargin {
        margin-left: 10rem !important
    }

    .User_Profile {
        font-size: 13px
    }

    .theme_dropdown {
        margin-left: -100px;
        width: 600px
    }

    .nav-link,
    .navbar_wraper .nav-item a {
        font-size: 1rem
    }

    .navbar_wraper .nav-item {
        font-size: 1rem;
        padding: 0 3px
    }
}

.hamburger {
    cursor: pointer;
    display: none;
    font-size: 24px
}

@media (max-width:768px) {
    .verticle_line_home {
        display: none
    }

    .navbar_wraper .nav-item {
        padding: 15px 5px
    }

    .navbar-links {
        transition: width .5s ease, margin-top .5s ease;
        width: 0
    }

    .navbar-links.show {
        margin-top: 20px
    }

    .hamburger {
        display: block;
        transition: -webkit-transform .3s ease;
        transition: transform .3s ease;
        transition: transform .3s ease, -webkit-transform .3s ease
    }

    .navbar-links-transition {
        transition: all .5s ease
    }

    .hamburger.open {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    .navbaricon {
        transition: color .3s ease
    }
}

.ApplicationHome {
    margin: 0 114px 0 15px;
    padding-left: 4px !important;
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important
}

.logoutUserprofile {
    font-size: 10px;
    margin-bottom: -2px
}

.Card-Modal {
    height: 134px;
    margin-left: -140px;
    position: absolute
}

.Close {
    color: #aaa;
    font-size: 28px
}

.Close:hover {
    color: #000
}

.logout-button {
    justify-content: center
}

* .user-profile,
.logout-button {
    align-items: center;
    display: flex
}

.user-image img {
    border-radius: 50%;
    height: 30px;
    margin-right: 10px;
    width: 30px
}

.user-details {
    margin-left: 35px;
    margin-top: -27px
}

.logout-button {
    margin-left: 10px
}

.Label-Name {
    color: #000
}

.updateButton {
    font-size: 11px;
    margin-left: -10px;
    padding: 4px;
    width: 92px
}

.Heading-Name {
    color: #000
}

.Card-Modal {
    background-color: #fff;
    border: 3px solid;
    border-radius: 14px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    height: auto;
    padding: 5px;
    width: 189px;
    z-index: 10
}

@media (max-width:1760px) {
    .Card-Modal {
        background-color: #fff;
        border: 3px solid;
        border-radius: 14px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .2);
        height: auto;
        margin-left: -250px;
        padding: 5px;
        position: absolute;
        width: 189px;
        z-index: 10
    }
}

@media (max-width:768px) {
    .Card-Modal {
        height: auto;
        margin: 0;
        width: 100%
    }
}

@media (max-width:576px) {
    .Card-Modal {
        height: auto;
        margin: 0 auto;
        max-width: 90%
    }

    .user-profile {
        flex-direction: column;
        text-align: center
    }

    .user-image img {
        margin: 0 auto
    }

    .user-details {
        margin-top: 10px
    }
}

.card_waper {
    right: -23px;
    top: 23px
}

.avatar {
    align-items: center;
    background-color: #007bff;
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 24px;
    height: 45px;
    justify-content: center;
    margin: 0 auto;
    width: 45px
}

.card_waper .card-body {
    text-align: center
}

.list-group-item {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.other-profiles {
    margin-top: 10px;
    text-align: center
}

.card_waper .close-btn {
    background: none;
    border: none;
    color: #fff !important;
    cursor: pointer;
    font-size: 23px !important;
    position: absolute;
    right: -4px;
    top: -9px
}

.card_waper .close-btn:hover {
    color: red !important
}

.card_waper .card-header {
    background-color: #17a2b8 !important;
    color: #fff;
    padding: 15px;
    position: relative;
    text-align: center
}

.userNane_text {
    font-size: 12px
}

.profile_list_text {
    color: #000;
    font-size: 13px;
    transition: color .3s ease
}

.profile_list_text:hover {
    color: #553988
}

.logout_text {
    font-size: 13px;
    font-weight: 400
}

#Profile {
    background-color: rgba(0, 0, 0, .5);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100
}

.Profile-Popup-Content {
    margin: 13rem auto 2.5%;
    max-width: 900px;
    padding-right: 0;
    width: 80%
}

@media only screen and (max-width:768px) {
    .Profile-Popup-Content {
        height: 82vh;
        overflow-y: scroll
    }
}

.Profile-HeadingText {
    color: #000;
    font-weight: 500;
    margin-bottom: 0;
    margin-top: 8px;
    text-align: center
}

.Col-Class-1 {
    margin-top: -45px
}

.Profile-SaveBtn {
    text-align: center
}

.Manage-UserProfile {
    font-size: 14px;
    font-weight: 700;
    margin-left: 30px;
    text-align: left
}

.card_waper {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    margin: 14px auto;
    position: absolute;
    right: 6px;
    top: 80px;
    width: 17rem
}

.preloader-overlay {
    align-items: center;
    background-color: rgba(0, 0, 0, .4);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999
}

.preloader-spinner {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #3498db;
    height: 100px;
    width: 100px
}

.percentage-container {
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.percentage {
    color: #fff;
    font-size: 16px;
    font-weight: 700
}

.is-invalid {
    border-color: red
}

.input_container {
    align-items: center;
    display: flex;
    width: 100%
}

.input_label {
    color: #000;
    font-size: 1.4rem !important;
    margin-top: 2px !important
}

.input_label,
.lableclassName {
    font-weight: 500;
    margin-bottom: 0 !important
}

.lableclassName {
    font-size: 1.6rem !important
}

.inputBox_wraper.form-control.form-control-lg::-webkit-input-placeholder {
    color: #999;
    font-size: 13px;
    padding-left: 5px
}

.inputBox_wraper.form-control.form-control-lg::placeholder {
    color: #999;
    font-size: 13px;
    padding-left: 5px
}

select.form-control {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    font-size: 13px;
    padding: 2px 8px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%
}

select.form-control::-ms-expand {
    display: none
}

select.form-control:focus {
    border-color: #66afe9;
    box-shadow: 0 0 5px rgba(102, 175, 233, .6);
    outline: 0
}

select.form-control:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: .6
}

input.inputBox_wraper.form-control.form-control-lg {
    font-size: small;
    padding: 2px 8px
}

input.inputBox_wraper_box.form-control.form-control-lg {
    height: 40px;
    padding: 2px 8px
}

.custom-select-height {
    height: 50px;
    line-height: 1.5
}

:root,
div#root {
    overflow: hidden;
    width: 100%
}

.MainContentOfApp {
    box-sizing: border-box;
    overflow-x: hidden;
    scrollbar-width: none;
    width: 100%
}

body.day {
    background-color: #fff;
    color: #000
}

body.night {
    background-color: #5a5858;
    color: #fff
}

.switch {
    display: inline-block;
    height: 21px;
    position: relative;
    width: 58px
}

.switch input {
    height: 0;
    opacity: 0;
    width: 0
}

.sliders {
    background-color: #ccc;
    border-radius: 34px;
    bottom: 0;
    cursor: pointer;
    left: 0;
    right: 0;
    top: 0
}

.sliders,
.sliders:before {
    position: absolute;
    transition: .4s
}

.sliders:before {
    background-color: #fff;
    border-radius: 50%;
    bottom: 4px;
    content: "";
    height: 14px;
    left: 4px;
    width: 14px
}

input:checked+.sliders {
    background-color: #020d16
}

input:checked+.sliders:before {
    -webkit-transform: translateX(37px);
    transform: translateX(37px)
}

.svg_icon {
    font-size: 11px
}

.image {
    align-items: center;
    background-color: #54008b;
    border-radius: 0 0 0 0;
    display: flex;
    height: 55px
}

.GeopicsHeading {
    color: #fff;
    font-family: Eras ITC, sans-serif;
    font-size: 37px;
    font-weight: 400;
    margin-left: 7px;
    margin-top: 1px;
    text-shadow: 3px 1px 3px #a557cd
}

.text-geopicx {
    color: #fff;
    color: #faebd7;
    font-family: Roboto Condensed, sans-serif;
    font-size: 10px;
    font-weight: 300;
    left: 62px;
    letter-spacing: .4px;
    position: absolute;
    text-shadow: 1px 2px 1px #000;
    top: 30px
}

.LogoMicronet {
    height: 40px;
    width: 40PX
}

.header-micronet-popup {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 14px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    padding: 10px;
    position: absolute;
    right: 20px;
    text-align: justify;
    width: 170px;
    z-index: 1000
}

@media (max-width:584px) {
    .text-geopicx {
        text-wrap: wrap
    }
}

.copyright-footer {
    align-items: center;
    background-color: #775a91;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 1rem;
    position: fixed;
    width: 100%;
    z-index: 1
}

.footer-text-center {
    color: #fff;
    font-family: Roboto Condensed, sans-serif;
    font-size: 11px;
    left: 50%;
    margin: 0;
    position: fixed;
    text-align: center;
    text-shadow: 2px 1px 2px #000;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.footer-links-right {
    font-size: 11px;
    margin: 0 0 0 auto;
    text-align: right
}

.textFooters {
    color: #fff;
    display: inline-block;
    font-family: Roboto Condensed, sans-serif;
    margin-left: 15px;
    position: relative;
    text-decoration: none;
    text-shadow: 2px 1px 2px #000
}

.textFooters:before {
    background: #fff;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: center;
    transform-origin: center;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    width: 100%
}

.textFooters:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

@media screen and (max-width:768px) {
    .copyright-footer {
        align-items: center;
        flex-direction: column;
        padding: .5rem;
        text-align: center
    }

    .footer-text-center {
        left: 127px;
        position: relative
    }

    .footer-links-right {
        margin-left: 0;
        margin-top: .5rem;
        text-align: center
    }

    .textFooters {
        margin-left: 10px
    }
}

@media screen and (max-width:480px) {
    .footer-text-center {
        left: 101px;
        position: relative
    }

    .copyright-footer {
        padding: .5rem
    }

    .footer-text-center {
        font-size: 9px
    }

    .footer-links-right {
        font-size: 9px;
        margin-top: .5rem
    }

    .textFooters {
        margin-left: 8px
    }
}

.cbody {
    height: 100px
}

.body-container-card {
    margin-left: 20px
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    background: 50% 100% 100% no-repeat purple;
    color: purple;
    display: inline-block;
    -webkit-filter: invert(20%);
    filter: invert(20%)
}

.text-card {
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-animation: textclip 5s linear infinite;
    animation: textclip 5s linear infinite;
    background-clip: initial;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(-225deg, #148506, #2f332fa8 29%, #27020e 67%, #7e02cf);
    background-size: initial;
    background-size: 200% auto;
    color: #fff;
    display: inline-block;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 25px);
    font-weight: 700;
    margin-bottom: 33px;
    text-align: center;
    text-transform: uppercase
}

.text-mars-home {
    -webkit-animation: swift-up .5s ease-out forwards, fade-in .5s ease-out forwards;
    animation: swift-up .5s ease-out forwards, fade-in .5s ease-out forwards;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    color: #000 !important;
    font-family: Mukta, sans-serif;
    font-size: 13px;
    margin: 0 9rem;
    word-spacing: 3px
}

@-webkit-keyframes fade-in {
    to {
        opacity: 1
    }
}

.card-scroll-container-y {
    max-height: 400px;
    overflow-y: auto
}

.scrollbars {
    height: 400px;
    top: 30px
}

.card-space,
.scrollbars {
    position: relative
}

#carousel1 .carousel-control-prev-icon {
    margin-left: -360px
}

#carousel1 .carousel-indicators {
    bottom: 20px;
    bottom: -30px;
    left: 737px;
    position: absolute
}

.Card.Text p,
.text-success {
    text-align: center
}

.Card.Text p {
    color: #000;
    font-family: serif
}

.custom-link {
    color: blue
}

.ParaForCarouselCard {
    -webkit-animation: swift-up .5s ease-out forwards, fade-in .5s ease-out forwards;
    animation: swift-up .5s ease-out forwards, fade-in .5s ease-out forwards;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    color: #6495ed;
    font-family: Playfair, serif;
    font-size: 20px;
    opacity: 0
}

@keyframes fade-in {
    to {
        -webkit-animation-delay: .1s;
        animation-delay: .1s;
        opacity: 1
    }
}

.HeadingOfCard {
    -webkit-animation: swift-up .5s ease-in-out forwards;
    animation: swift-up .5s ease-in-out forwards;
    font-family: open sans, sans-serif;
    font-size: 18px
}

@-webkit-keyframes swift-up {
    to {
        -webkit-animation-delay: .1s;
        animation-delay: .1s;
        top: 0
    }
}

@keyframes swift-up {
    to {
        -webkit-animation-delay: .1s;
        animation-delay: .1s;
        top: 0
    }
}

.CardButtonMore {
    background: #7e02cf;
    border-radius: 5px;
    color: #fff;
    display: flex;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    justify-content: center;
    margin: 0 auto;
    overflow: auto;
    width: 35%
}

.CardButtonMore:hover {
    background: #148506 !important
}

.card-animation {
    opacity: .9;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    transition: opacity 0s ease-in-out, -webkit-transform 1s ease-in-out 3s;
    transition: opacity 0s ease-in-out, transform 1s ease-in-out 3s;
    transition: opacity 0s ease-in-out, transform 1s ease-in-out 3s, -webkit-transform 1s ease-in-out 3s
}

.card-animation.card-visible {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.my-animation-enter {
    opacity: 0
}

.my-animation-enter-active {
    opacity: 1;
    transition: opacity 3ms
}

.my-animation-exit {
    opacity: 1
}

.my-animation-exit-active {
    opacity: 0;
    transition: opacity 3ms
}

.info {
    color: #7e02cf
}

.MarsCraouselCard {
    background-color: #38cb241a
}

.text-card-mars {
    font-family: Playfair, serif;
    font-weight: 700
}

.MarsCraouselCardMars {
    background-color: #4b008217
}

.AgriCraouselCard {
    background-color: #daa5201f
}

.MinningCraouselCard {
    background-color: #f0f8ff
}

.DefenceCraouselCard {
    background-color: #4682b42e
}

.WaterManagementCraouselCard {
    background-color: #7fff0029
}

.HeadingOfApplicationCard {
    background-color: #483d8b;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(2vw, 24px);
    margin: 0;
    padding: 10px
}

.DefenceHome {
    margin-bottom: -875px
}

.DimgH {
    border: .3px solid #7cfc00;
    border-radius: 8px 8px 0 0;
    width: 100%
}

.ItemS {
    padding-left: 20px;
    padding-right: 20px
}

.CardD:hover {
    box-shadow: 10px 10px 15px rgba(0, 0, 0, .3);
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.cards-texts {
    font-size: 20px;
    height: 140px
}

.CardD:after,
.CardD:before {
    background: hsla(0, 0%, 100%, .1);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: scale3d(0, 0, 1);
    transform: scale3d(0, 0, 1);
    transition: -webkit-transform .3s ease-out 0s;
    transition: transform .3s ease-out 0s;
    transition: transform .3s ease-out 0s, -webkit-transform .3s ease-out 0s
}

.CardD:before {
    -webkit-transform-origin: left top;
    transform-origin: left top
}

.CardD:after {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom
}

.CardD:focus:after,
.CardD:focus:before,
.CardD:hover:after,
.CardD:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.HeadingOfdefemce {
    font-size: 18px;
    width: 6%
}

:root {
    --brand-color: #ffc300;
    --font-title: "Montserrat", sans-serif;
    --font-text: "Lato", sans-serif
}

*,
:after,
:before {
    box-sizing: border-box
}

.card__description,
body,
h2 {
    margin: 0
}

.card__description {
    color: #fff;
    color: var(--white);
    font-family: Lato, sans-serif;
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.5
}

.flow>*+* {
    margin-top: 1em;
    margin-top: var(--flow-space, 1em)
}

:root {
    --bg-light: #f5f5fc;
    --bg-dark: #35353c;
    --bg-darker: #15151c;
    --font-body: #55555c;
    --shadow: #c5c5cc
}

.tpn_card {
    background: #dee2e6;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    box-shadow: 5px 5px 6px;
    color: #55555c;
    color: var(--font-body);
    font-family: Inter, sans-serif;
    margin: 6px;
    padding: 5px
}

.tpn_card img {
    border-radius: 12px;
    box-shadow: 1px 7px 13px #c5c5cc;
    box-shadow: 1px 7px 13px var(--shadow)
}

.tpn_card h5 {
    color: #35353c;
    color: var(--bg-dark);
    font-size: 20px
}

.tpn_card p {
    color: #55555c;
    color: var(--font-body);
    font-family: Inter, sans-serif;
    font-weight: 400;
    margin-bottom: 24px
}

.Exp-btn {
    background: #dee2e6;
    border: 1px solid #343838;
    border-radius: 14px;
    color: #343838;
    margin: 40px auto;
    padding: 2px 14px;
    text-decoration: none
}

.Exp-btn:hover {
    background: #343838;
    color: #fff;
    text-decoration: none
}

.inner-img {
    transition: .5s
}

.inner-img:hover {
    cursor: pointer;
    -webkit-transform: scale(.9);
    transform: scale(.9)
}

.products-cards {
    margin: 2px 14rem 10px 13rem
}

@media only screen and (max-width:480px) {
    .products-cards {
        margin: 2px 4rem 10px 3rem
    }

    .text-mars-home {
        font-size: 14px
    }
}

@media screen and (max-width:576px) {
    .tpn_card h5 {
        font-size: 20px
    }

    .Exp-btn {
        font-size: 14px
    }

    .products-cards {
        margin: 0 2rem
    }

    .text-mars-home {
        font-size: 12px
    }
}

@media only screen and (max-width:768px) {
    .text-mars-home {
        font-size: 12px;
        margin: 0
    }
}

@media screen and (min-width:576px) and (max-width:768px) {
    .tpn_card h5 {
        font-size: 25px
    }

    .Exp-btn {
        font-size: 16px
    }

    .products-cards {
        margin: 0 4rem
    }

    .text-mars-home {
        font-size: 16px
    }
}

@media screen and (min-width:768px) and (max-width:992px) {
    .tpn_card h5 {
        font-size: 15px
    }

    .Exp-btn {
        font-size: 10px
    }

    .products-cards {
        margin: 0 4rem
    }

    .text-mars-home {
        font-size: 16px;
        margin: 0 5rem
    }
}

@media screen and (min-width:992px) {
    .tpn_card h5 {
        font-size: 24px
    }

    .Exp-btn {
        font-size: 16px
    }

    .products-cards {
        margin: 2px 8rem 8px
    }
}

.confirm-buttons {
    background-color: green !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    padding: 6px 12px !important
}

.modalbutton {
    margin-left: 19px !important
}

.HomeContainer {
    background: #fff;
    height: 87.5vh
}

.visually-hidden {
    opacity: 0
}

.carousel {
    position: relative;
    top: -34px
}

.cara-head {
    position: relative;
    top: 0
}

.carousel-indicators .active {
    height: 0
}

.text-primary {
    color: #f9fbfd !important;
    font-family: open sans, sans-serif
}

.carousel-indicators {
    bottom: 0 !important;
    display: none !important
}

.cara-desc {
    color: #f4f7f7 !important;
    font-family: open sans, sans-serif
}

.cara-cap {
    margin: 0 54rem 30rem -32rem
}

.carousel-inner .cara-Img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

@-webkit-keyframes colorChange {
    0% {
        color: #fff
    }

    to {
        color: #fc0
    }
}

@keyframes colorChange {
    0% {
        color: #fff
    }

    to {
        color: #fc0
    }
}

@-webkit-keyframes fontSizeChange {
    0% {
        font-size: 18px
    }

    to {
        font-size: 24px
    }
}

@keyframes fontSizeChange {
    0% {
        font-size: 18px
    }

    to {
        font-size: 24px
    }
}

.caption h3 {
    -webkit-animation: colorChange 1s ease-in-out infinite alternate;
    animation: colorChange 1s ease-in-out infinite alternate
}

.caption p {
    -webkit-animation: fontSizeChange 1s ease-in-out infinite alternate;
    animation: fontSizeChange 1s ease-in-out infinite alternate
}

.HomeAboutPage {
    background-color: #f0f8ff
}

.HomeServicesPage {
    background-color: #93c5721f
}

.HomeProduct {
    margin-bottom: 5px;
    margin-top: 5px
}

.Drone {
    position: absolute;
    top: 40px
}

.AboutUSHome {
    font-size: min(4vw, 40px);
    letter-spacing: normal;
    line-height: normal
}

.AboutUSHome,
.Testimonial {
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-animation: textclip 10s linear infinite;
    animation: textclip 10s linear infinite;
    background-clip: initial;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(-225deg, #148506, #2f332fa8 29%, #27020e 67%, #7e02cf);
    background-size: initial;
    background-size: 200% auto;
    color: #fff;
    font-family: open sans, sans-serif;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase
}

.Testimonial {
    font-size: min(4vw, 25px)
}

@-webkit-keyframes textclip {
    to {
        background-position: 200%
    }
}

@keyframes textclip {
    to {
        background-position: 200%
    }
}

.content-inside-home {
    background-color: #d6dbdb
}

.text-bloc {
    font-family: Bruno Ace SC, cursive;
    margin: 0 100px;
    padding: 0
}

.img_heading {
    background-color: #626b7b85;
    margin: 5px 20rem
}

.section-background {
    background-position: 50%;
    background-size: cover;
    color: #fff;
    display: flex;
    height: 89vh;
    width: 100%
}

.ParaForProduct {
    font-weight: 100;
    padding: 20px
}

.ParaForProduct,
.prod-para {
    font-family: Mukta, sans-serif;
    word-spacing: 3px
}

.prod-para {
    color: #000 !important;
    font-weight: 200;
    margin: 2px 14rem 10px
}

@media only screen and (max-width:768px) {
    h2 {
        font-size: 80px
    }

    .section-background {
        background-repeat: no-repeat !important;
        background-size: contain;
        background-size: cover;
        height: 38vh
    }

    .ParaForProduct {
        font-size: 12px;
        padding: 5px
    }

    .img_heading {
        margin: 1px 2rem
    }

    .prod-para {
        font-size: 16px;
        margin: 0 5rem 1px
    }

    .cara-desc {
        font-size: 12px
    }

    .cara-cap {
        padding-bottom: 1rem
    }
}

@media screen and (min-width:768px) and (max-width:992px) {
    .prod-para {
        font-size: 16px;
        margin: 2px 10rem 10px
    }

    .img_heading {
        margin: 2px 2rem
    }

    .ParaForProduct {
        font-size: 14px;
        padding: 10px
    }

    .cara-cap {
        padding-bottom: 12rem
    }
}

@media only screen and (max-width:480px) {
    h2 {
        font-size: 60px
    }

    .section-background {
        height: 40vh
    }

    .ParaForProduct {
        font-size: 12px;
        height: 18vh;
        overflow: scroll
    }

    .prod-para {
        font-size: 12px;
        margin: 0 2rem
    }
}

.aboutUS {
    background-attachment: fixed;
    background-color: #f2f1f3;
    padding: 30px 0
}

.aboutUS .heading h2 {
    color: #fff;
    font-size: min(4vw, 45px);
    font-weight: 700;
    margin: 0;
    padding: 0
}

.aboutUS .heading h2 span {
    color: #f24259
}

.aboutUS .heading p {
    color: #3d3434;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.7;
    padding: 0
}

.aboutUS h3 {
    font-size: 25px;
    font-weight: 700;
    margin: 0;
    padding: 0
}

.aboutUS p {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    margin: 20px 0 15px;
    padding: 0
}

.aboutUS h4 {
    font-size: 15px;
    font-weight: 500;
    margin: 8px 0
}

.aboutUS h4 i {
    color: #f24259;
    margin-right: 10px
}

.aboutUS h4 a {
    color: #fff
}

.animated-button {
    align-items: center;
    border: 4px solid transparent;
    border-radius: 100px;
    box-shadow: 0 0 0 2px #ccc;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 4px;
    overflow: hidden;
    padding: 1px 18px;
    position: relative;
    transition: all .6s cubic-bezier(.23, 1, .32, 1)
}

.animated-button svg {
    fill: #fff;
    position: absolute;
    transition: all .8s cubic-bezier(.23, 1, .32, 1);
    width: 15px;
    z-index: 9
}

.animated-button .arr-1 {
    right: 16px
}

.animated-button .arr-2 {
    left: -25%
}

.animated-button .circle {
    background-color: #c5e5e4;
    border-radius: 50%;
    height: 20px;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all .8s cubic-bezier(.23, 1, .32, 1);
    width: 20px
}

.animated-button .text {
    position: relative;
    -webkit-transform: translateX(-12px);
    transform: translateX(-12px);
    transition: all .8s cubic-bezier(.23, 1, .32, 1);
    z-index: 1
}

.animated-button:hover {
    border-radius: 12px;
    box-shadow: 0 0 0 12px transparent;
    color: #212121
}

.animated-button:hover .arr-1 {
    right: -25%
}

.animated-button:hover .arr-2 {
    left: 16px
}

.animated-button:hover .text {
    -webkit-transform: translateX(12px);
    transform: translateX(12px)
}

.animated-button:hover svg {
    fill: #1f387e
}

.animated-button:active {
    box-shadow: 0 0 0 4px #adff2f;
    scale: .95
}

.animated-button:hover .circle {
    height: 220px;
    opacity: 1;
    width: 220px
}

.animated-button {
    max-width: 100%;
    width: 118px
}

.services-link {
    cursor: pointer;
    transition: all .6s cubic-bezier(.23, 1, .32, 1);
    z-index: 1
}

.service-lnk:hover .services-link {
    -webkit-transform: translateX(12px);
    transform: translateX(12px)
}

@media only screen and (max-width:767px) {
    .animated-button {
        width: 90px
    }

    .aboutUS p {
        font-size: 12px
    }
}

@media only screen and (max-width:480px) {
    .animated-button {
        width: 80px
    }
}

.slider--container {
    border-radius: .125rem;
    height: 90vh;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 100vw
}

.slider--heading {
    background-color: rgba(0, 0, 0, .7);
    color: rgba(0, 0, 0, .5);
    height: 100%;
    left: 0;
    padding: 1rem;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transform: translate3d(-6%, -50%, 0);
    transform: translate3d(-6%, -50%, 0);
    width: 29%;
    z-index: 99
}

.slider--heading,
.slider--heading h1 {
    font: 300 1.25rem/1.25 Verdana, sans-serif
}

.slider--heading h1 {
    color: rgba(72, 6, 173, .5);
    text-transform: uppercase
}

@media only screen and (min-width:30em) {
    .slider--heading h1 {
        font-size: 1.5rem
    }
}

@media only screen and (min-width:48em) {
    .slider--heading h1 {
        font-size: 1.75rem
    }
}

.Textaofcraousel-Container {
    align-items: "center";
    color: #c2f1f3;
    display: flex;
    font-family: Open Sans, sans-serif;
    font-size: 13px;
    font-weight: 100;
    justify-content: center;
    line-height: 1.5;
    text-align: left;
    text-shadow: 2px 2px #000
}

.slider--image {
    -webkit-animation: 45s ease-in-out infinite;
    animation: 45s ease-in-out infinite;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.slider--image:first-of-type {
    -webkit-animation-name: slide-01;
    animation-name: slide-01
}

.slider--image:nth-of-type(2) {
    -webkit-animation-name: slide-02;
    animation-name: slide-02
}

.slider--image:nth-of-type(3) {
    -webkit-animation-name: slide-03;
    animation-name: slide-03
}

.slider--image:nth-of-type(4) {
    -webkit-animation-name: slide-04;
    animation-name: slide-04
}

.slider--image:nth-of-type(5) {
    -webkit-animation-name: slide-05;
    animation-name: slide-05
}

.HeadingOfcarousel {
    align-items: center !important;
    color: #aaa;
    display: flex;
    font-family: Rowdies, sans-serif;
    font-size: 40px !important;
    justify-content: center !important;
    text-shadow: 2px 2px 0 #e693f7, 4px 4px 0 #666, 6px 6px 0 #333, 10px 10px 0 #111
}

@-webkit-keyframes slide-01 {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.4) translate(0)
    }

    16% {
        opacity: 1;
        -webkit-transform: scale(1.2) translate(-20px, -10px)
    }

    33% {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0)
    }

    50% {
        opacity: 0
    }

    67% {
        opacity: 0
    }

    84% {
        opacity: 0
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1.4) translate(0)
    }
}

@-webkit-keyframes slide-02 {
    0% {
        opacity: 0
    }

    16% {
        opacity: 0;
        -webkit-transform: scale(1.2) translate(-20px, -10px)
    }

    33% {
        opacity: 1;
        -webkit-transform: scale(1.4) translate(0)
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.2) translate(-20px, 10px)
    }

    67% {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0)
    }

    84% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

@-webkit-keyframes slide-03 {
    0% {
        opacity: 0
    }

    16% {
        opacity: 0
    }

    33% {
        opacity: 0
    }

    50% {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0)
    }

    67% {
        opacity: 1;
        -webkit-transform: scale(1.4) translate(-20px, 10px)
    }

    84% {
        opacity: 1;
        -webkit-transform: scale(1.2) translate(20px, -10px)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0)
    }
}

@-webkit-keyframes slide-04 {
    0% {
        opacity: 0
    }

    16% {
        opacity: 0
    }

    33% {
        opacity: 0
    }

    50% {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0)
    }

    67% {
        opacity: 1;
        -webkit-transform: scale(1.4) translate(-20px, 10px)
    }

    84% {
        opacity: 1;
        -webkit-transform: scale(1.2) translate(20px, -10px)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0)
    }
}

@-webkit-keyframes slide-05 {
    0% {
        opacity: 0
    }

    16% {
        opacity: 0
    }

    33% {
        opacity: 0
    }

    50% {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0)
    }

    67% {
        opacity: 1;
        -webkit-transform: scale(1.4) translate(-20px, 10px)
    }

    84% {
        opacity: 1;
        -webkit-transform: scale(1.2) translate(20px, -10px)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0)
    }
}

@keyframes slide-01 {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.4) translate(0);
        transform: scale(1.4) translate(0)
    }

    16% {
        opacity: 1;
        -webkit-transform: scale(1.2) translate(-20px, -10px);
        transform: scale(1.2) translate(-20px, -10px)
    }

    33% {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0);
        transform: scale(1.4) translate(0)
    }

    50% {
        opacity: 0
    }

    67% {
        opacity: 0
    }

    84% {
        opacity: 0
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1.4) translate(0);
        transform: scale(1.4) translate(0)
    }
}

@keyframes slide-02 {
    0% {
        opacity: 0
    }

    16% {
        opacity: 0;
        -webkit-transform: scale(1.2) translate(-20px, -10px);
        transform: scale(1.2) translate(-20px, -10px)
    }

    33% {
        opacity: 1;
        -webkit-transform: scale(1.4) translate(0);
        transform: scale(1.4) translate(0)
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.2) translate(-20px, 10px);
        transform: scale(1.2) translate(-20px, 10px)
    }

    67% {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0);
        transform: scale(1.4) translate(0)
    }

    84% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

@keyframes slide-03 {
    0% {
        opacity: 0
    }

    16% {
        opacity: 0
    }

    33% {
        opacity: 0
    }

    50% {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0);
        transform: scale(1.4) translate(0)
    }

    67% {
        opacity: 1;
        -webkit-transform: scale(1.4) translate(-20px, 10px);
        transform: scale(1.4) translate(-20px, 10px)
    }

    84% {
        opacity: 1;
        -webkit-transform: scale(1.2) translate(20px, -10px);
        transform: scale(1.2) translate(20px, -10px)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0);
        transform: scale(1.4) translate(0)
    }
}

@keyframes slide-04 {
    0% {
        opacity: 0
    }

    16% {
        opacity: 0
    }

    33% {
        opacity: 0
    }

    50% {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0);
        transform: scale(1.4) translate(0)
    }

    67% {
        opacity: 1;
        -webkit-transform: scale(1.4) translate(-20px, 10px);
        transform: scale(1.4) translate(-20px, 10px)
    }

    84% {
        opacity: 1;
        -webkit-transform: scale(1.2) translate(20px, -10px);
        transform: scale(1.2) translate(20px, -10px)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0);
        transform: scale(1.4) translate(0)
    }
}

@keyframes slide-05 {
    0% {
        opacity: 0
    }

    16% {
        opacity: 0
    }

    33% {
        opacity: 0
    }

    50% {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0);
        transform: scale(1.4) translate(0)
    }

    67% {
        opacity: 1;
        -webkit-transform: scale(1.4) translate(-20px, 10px);
        transform: scale(1.4) translate(-20px, 10px)
    }

    84% {
        opacity: 1;
        -webkit-transform: scale(1.2) translate(20px, -10px);
        transform: scale(1.2) translate(20px, -10px)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(1.4) translate(0);
        transform: scale(1.4) translate(0)
    }
}

#galleryOfHome {
    background: linear-gradient(45deg, #15151600, #01181573 14%, #041e33bd 26%, #0527213d 49%, #207cca70 72%, #737d7b66 88%, #485763) fixed, url(https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3B4MTMzNzkzMC1pbWFnZS1rd3Z4eGlydC5qcGc.jpg) no-repeat 50% fixed;
    background-size: cover;
    box-sizing: border-box;
    max-height: 100vh !important;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
    position: relative;
    scrollbar-width: none;
    width: 35%
}

#galleryOfHome::-webkit-scrollbar {
    width: 8px
}

#galleryOfHome::-webkit-scrollbar-track {
    background: #f1f1f1
}

#galleryOfHome::-webkit-scrollbar-thumb {
    background-color: #379ea1;
    border-radius: 10px
}

#galleryOfHome::-webkit-scrollbar-thumb:hover {
    background: #207cca
}

.WelcomHome {
    color: #ffd5a9;
    font-family: cursive;
    font-size: 15px;
    font-weight: 100
}

.Gateway {
    color: #ffff92;
    font-family: Trebuchet MS, Arial, sans-serif;
    font-size: 16px;
    font-weight: 100;
    text-shadow: 1px .5px #000
}

.HomeSlideSow {
    display: flex;
    height: 86.5vh;
    width: 100%
}

.HighlighthomeSpan {
    color: #ffd5a9;
    font-family: cursive;
    font-size: 15px;
    font-weight: 100
}

.BlowSpan {
    color: #fff;
    font-weight: 100
}

.custom-slideh .contentHome {
    background-color: rgba(0, 0, 0, .6);
    border-radius: 15px 0 0 15px;
    bottom: 0;
    bottom: 85px;
    color: #fff;
    opacity: 1;
    padding: 10px;
    position: absolute;
    right: 0;
    transition: opacity .5s ease, bottom .5s ease;
    transition: bottom .4s ease;
    width: 92%
}

.custom-slideh .titleHome {
    color: #fafac4;
    font-weight: 700
}

.custom-slideh .descriptionHome {
    font-size: 13px;
    font-weight: 100;
    text-shadow: 1px solid #929090
}

@media (max-width:768px) {
    #galleryOfHome {
        width: 100%
    }

    .cara-Img,
    .custom-slideh img {
        height: auto;
        width: 100%
    }
}

@media (max-width:480px) {

    .cara-Img,
    .custom-slideh img {
        height: auto;
        max-width: 100%;
        min-width: 300px;
        overflow: hidden;
        width: 100%
    }

    #galleryOfHome {
        max-height: 60vh
    }

    #slides {
        width: 100%
    }

    .Gateway,
    .descriptionHome {
        font-size: .85rem
    }
}

@media screen and (max-width:768px) {
    #galleryOfHome {
        display: none
    }
}

.Home-geopics {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px
}

.GeopicsHeadingInsideCrausel {
    color: #fff;
    font-family: Eras ITC, sans-serif;
    font-size: 50px;
    font-weight: 400;
    margin: 0 0 0 7px;
    text-shadow: 3px 1px 3px #a557cd
}

@media (min-width:1300px) and (max-width:1750px) {
    .HomeSlideSow {
        height: 82.5vh
    }
}

.custom-slideh {
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all .4s linear;
    width: 100%
}

.custom-slideh.show {
    display: block !important;
    opacity: 1;
    z-index: -1
}

.aboutmain {
    height: 86.5vh
}

.about-container {
    border: 3px solid hsla(0, 20%, 95%, .26);
    margin: 0 auto;
    max-width: 1200px;
    padding: 5px 20px
}

.hero {
    align-items: end;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    padding: 100px 10px;
    text-align: center
}

.hero h1 {
    color: #eee8aa;
    font-family: Poppins, sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    padding: 5px
}

.hero p {
    color: #ccc;
    font-family: math;
    font-size: 18px;
    margin-bottom: 40px
}

.cta-button {
    background-color: #fff;
    border-radius: 5px;
    color: #333;
    font-weight: 700;
    padding: 10px 20px;
    text-decoration: none
}

@media screen and (min-width:768px) and (max-width:992px) {
    .hero p {
        font-size: 16px;
        margin-bottom: 20px
    }

    .about-container {
        padding: 6px 10px
    }

    .hero {
        padding: 70px 10px
    }

    .hero h1 {
        font-size: 30px;
        margin-bottom: 10px
    }
}

@media only screen and (max-width:768px) {
    .hero p {
        font-size: 14px;
        margin-bottom: 18px
    }

    .hero {
        padding: 50px 10px
    }

    .about-container {
        padding: 5px 8px
    }

    .hero h1 {
        font-size: 28px;
        margin-bottom: 7px
    }
}

@media only screen and (max-width:480px) {
    .hero p {
        font-size: 12px;
        margin-bottom: 8px
    }

    .hero {
        padding: 30px 5px
    }

    .about-container {
        padding: 5px
    }

    .hero h1 {
        font-size: 22px;
        margin-bottom: 5px
    }
}

.centralized-heading {
    align-items: center;
    display: flex;
    font-family: Roboto, sans-serif !important;
    justify-content: center;
    text-align: center
}

.centralized-heading.h1 {
    font-family: Roboto, sans-serif !important;
    font-size: 2.5rem;
    font-weight: 700
}

.centralized-heading.h2 {
    font-size: 2rem;
    font-weight: 700
}

.centralized-heading .centered-text {
    font-family: Roboto, sans-serif !important
}

.centralized-paragraph {
    font-family: "Arial, sans-serif";
    font-size: 16px;
    margin: 20px 0;
    text-align: center
}

.custom-paragraph {
    font-size: 1.2em;
    line-height: 1.6
}

.another-custom-paragraph {
    font-size: 1em;
    font-style: italic
}

:root {
    --primary-color: #010712;
    --secondary-color: #818386;
    --bg-color: #fcfdfd;
    --button-color: #3b3636;
    --h1-color: #3f444c
}

[data-theme=dark] {
    --primary-color: #fcfdfd;
    --secondary-color: #818386;
    --bg-color: #010712;
    --button-color: #818386;
    --h1-color: #fcfdfd
}

.formbackground {
    height: 86.5vh
}

.contact-container {
    background: #fcfdfd;
    background: var(--bg-color);
    display: flex;
    height: 100%;
    width: 100vw
}

.left-col {
    align-items: center;
    background-image: url(https://assets.science.nasa.gov/content/dam/science/esd/eo/content-feature/nightlights/images/media/BlackMarble_2016_Americas_composite.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    width: 55vw
}

.contact_left_heading {
    color: #fff;
    font-family: Helvetica Neue, sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 4.5rem;
    padding: 110px
}

.logo {
    padding: 1.5rem;
    width: 20rem
}

.right-col {
    background: linear-gradient(112.1deg, #05050a 11.4%, #2c2b41 70.2%);
    padding: 9rem 3.5rem;
    width: 55vw
}

.cont-sub-btn,
.contact-heading,
.description,
.font-field {
    font-family: Jost, sans-serif;
    font-weight: 400;
    letter-spacing: .1rem
}

.contact-heading {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: .1rem;
    margin-left: 0;
    margin-top: 8px;
    text-transform: uppercase
}

.description,
.font-field {
    color: #818386;
    color: var(--secondary-color);
    font-size: 12px;
    text-transform: uppercase
}

.cont-us-form {
    margin-top: 2rem;
    padding: 1rem 0;
    position: relative
}

.cont-input,
.font-field,
.text-area-input {
    display: block;
    width: 35vw
}

.cont-input,
.text-area-input,
placeholder {
    font-family: Helvetica Neue, sans-serif
}

.cont-input::-webkit-input-placeholder,
.text-area-input::-webkit-input-placeholder {
    color: #010712;
    color: var(--primary-color)
}

.cont-input::placeholder,
.text-area-input::placeholder {
    color: #010712;
    color: var(--primary-color)
}

.cont-input,
.text-area-input {
    background: #dee2e6;
    border: none;
    border-bottom: 1px solid #818386;
    border-bottom: 1px solid var(--secondary-color);
    color: #010712;
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 1rem;
    outline: none;
    padding: .5rem 5px
}

.text-area-input {
    resize: none
}

.cont-sub-btn {
    background: #3b3636;
    background: var(--button-color);
    border: none;
    border-radius: 2px;
    color: #fcfdfd;
    color: var(--bg-color);
    cursor: pointer;
    font-weight: 300;
    height: 3.5rem;
    outline: none;
    text-transform: uppercase;
    width: 10rem
}

.cont-input:hover,
.cont-sub-btn:hover,
.text-area-input:hover {
    opacity: .5
}

.cont-sub-btn:active {
    opacity: .8
}

#error,
#success-msg {
    color: #818386;
    color: var(--secondary-color);
    font-family: Jost;
    font-size: .75rem;
    margin: .125rem 0;
    text-transform: uppercase;
    width: 40vw
}

#success-msg {
    transition-delay: 3s
}

@media (max-width:767px) {
    .right-col {
        padding: 4rem 2rem 21rem 1rem
    }

    .cont-input,
    .font-field,
    .text-area-input {
        display: block;
        width: 40vw
    }

    .cont-us-form {
        margin-top: 1rem;
        padding: 0
    }
}

@media only screen and (max-width:950px) {
    .logo {
        width: 14rem
    }

    .contact-heading {
        font-size: 1.75rem
    }

    .description {
        font-size: .3rem;
        margin-left: .4rem
    }

    .cont-sub-btn {
        width: 7rem
    }

    .theme-switch-wrapper {
        width: 120px
    }

    .theme-switch {
        height: 28px;
        width: 50px
    }

    .theme-switch .cont-input {
        display: none
    }

    .slider:before {
        background-color: #fff;
        bottom: .25rem;
        content: "";
        height: 20px;
        left: .25rem;
        position: absolute;
        transition: .4s;
        width: 20px
    }

    .cont-input:checked+.slider:before {
        -webkit-transform: translateX(16px);
        transform: translateX(16px)
    }

    .slider.round {
        border-radius: 15px
    }

    .slider.round:before {
        border-radius: 50%
    }
}

.imagecontact {
    align-items: center;
    display: flex;
    height: 60px;
    padding-top: 15px !important
}

.text_heading_contact {
    color: #fff;
    font-family: Eras ITC, sans-serif;
    font-size: 35px;
    font-weight: 400;
    margin-left: 7px;
    margin-top: 1px;
    text-shadow: 3px 1px 3px #a557cd
}

@media (min-width:280px) and (max-width:479px) {
    .contact_left_heading {
        font-size: 20px;
        line-height: 3rem;
        padding: 15px
    }

    .left-col {
        display: none
    }

    .right-col {
        padding: 30px;
        width: 100%
    }

    .cont-input,
    .font-field,
    .text-area-input {
        display: block;
        width: 100%
    }
}

@media (min-width:480px) and (max-width:767px) {
    .contact_left_heading {
        font-size: 20px;
        line-height: normal;
        padding: 20px
    }

    .contact-container {
        display: flex;
        flex-direction: column;
        height: auto
    }

    .left-col,
    .right-col {
        padding: 30px;
        width: 100%
    }

    .cont-input,
    .font-field,
    .text-area-input {
        display: block;
        width: 100%
    }
}

@media (min-width:768px) and (max-width:1023px) {
    .contact_left_heading {
        font-size: 22px;
        line-height: 3rem;
        padding: 50px
    }
}

.serviceHeading {
    color: brown;
    font-family: open sans, sans-serif;
    font-size: min(3vw, 20px);
    margin: auto auto auto 10px;
    text-align: left
}

.slide {
    color: #00008b;
    font-family: Merriweather, serif;
    font-weight: 700;
    margin-top: 0
}

.HeadingOfServices {
    color: #316525;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 40px);
    font-weight: 700;
    text-transform: capitalize !important
}

.Services {
    margin-top: 35px
}

.ListOfServices {
    font-family: noticia text, serif;
    font-size: min(2.5vw, 16px)
}

.ServiceMain {
    height: 86.5vh
}

.camera-container {
    position: absolute;
    right: 0;
    top: 0
}

.camera-container .circle {
    align-items: center;
    background: radial-gradient(circle at 50% 120%, #ddd, #fff 80%, #000 100%);
    border-radius: 50%;
    box-shadow: 8px 8px 15px #000;
    display: flex;
    height: 70px;
    justify-content: center;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 70px
}

.camera-container .circle .top {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 45px;
    left: -7px;
    position: absolute;
    top: -12px;
    width: 84px;
    z-index: 2
}

.camera-container .circle .camera-eye {
    -webkit-animation: camera 8s linear infinite;
    animation: camera 8s linear infinite;
    background: linear-gradient(45deg, #222, #444 30%, #444 35%, #222);
    border-radius: 50%;
    height: 42px;
    left: 14px;
    margin: 10px 0 0;
    position: absolute;
    top: 14px;
    width: 42px
}

.camera-container .circle .camera-eye .inner-eye {
    align-items: center;
    background: radial-gradient(circle, #111 30%, hsla(0, 0%, 100%, .7));
    border-radius: 50%;
    display: flex;
    height: 42px;
    justify-content: center;
    width: 42px
}

.camera-container .circle .camera-eye .inner-eye .blinking {
    -webkit-animation: colour 2s linear infinite;
    animation: colour 2s linear infinite;
    border: 3px dotted #93d3ed;
    border-radius: 50%;
    height: 20px;
    width: 20px
}

@-webkit-keyframes colour {
    0% {
        border: 3px dotted #93d3ed
    }

    65% {
        border: 3px dotted #93d3ed
    }

    68% {
        border: 3px dotted red
    }

    75% {
        border: 3px dotted #93d3ed
    }
}

@keyframes colour {
    0% {
        border: 3px dotted #93d3ed
    }

    65% {
        border: 3px dotted #93d3ed
    }

    68% {
        border: 3px dotted red
    }

    75% {
        border: 3px dotted #93d3ed
    }
}

@-webkit-keyframes camera {
    0% {
        -webkit-transform: none;
        transform: none
    }

    30% {
        -webkit-transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(.78);
        transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(.78)
    }

    65% {
        -webkit-transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(.78);
        transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(.78)
    }

    90% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes camera {
    0% {
        -webkit-transform: none;
        transform: none
    }

    30% {
        -webkit-transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(.78);
        transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(.78)
    }

    65% {
        -webkit-transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(.78);
        transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(.78)
    }

    90% {
        -webkit-transform: none;
        transform: none
    }
}

.gear-container {
    height: 70px;
    position: absolute;
    right: 0;
    top: 0;
    width: 70px
}

.arrow-rectangle {
    background-color: #0c4c91;
    bottom: 5%;
    -webkit-clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0 100%, 5% 50%, 0 0);
    clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0 100%, 5% 50%, 0 0);
    height: 10%;
    left: 5%;
    position: absolute;
    width: 90%
}

.arrow-placeholder {
    background-color: #fff;
    box-shadow: 8px 8px 15px #000;
    height: 94%;
    left: 3%;
    top: 3%;
    width: 94%
}

.arrow-circle,
.arrow-placeholder {
    border-radius: 50%;
    position: absolute
}

.arrow-circle {
    background: radial-gradient(circle, #3a6a54 0, #133 100%);
    height: 90%;
    left: 5%;
    top: 5%;
    width: 90%
}

.arrow-circle:before {
    border-radius: 50%;
    height: 80%;
    left: 10%;
    top: 10%;
    width: 80%
}

.arrow-circle:after,
.arrow-circle:before {
    background-color: #fff;
    content: "";
    position: absolute
}

.arrow-circle:after {
    -webkit-animation: arrow-move 3s linear 0s infinite normal forwards;
    animation: arrow-move 3s linear 0s infinite normal forwards;
    -webkit-clip-path: polygon(50% 1%, 0 12%, 50% 23%, 100% 23%, 50% 12%, 100% 1%);
    clip-path: polygon(50% 1%, 0 12%, 50% 23%, 100% 23%, 50% 12%, 100% 1%);
    height: 51%;
    left: 45%;
    top: -1%;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    width: 10%
}

.gear {
    -webkit-animation: gear-rotate 3s linear 0s infinite normal forwards;
    animation: gear-rotate 3s linear 0s infinite normal forwards;
    height: 50%;
    left: 25%;
    top: 25%;
    width: 50%
}

.gear,
.gear:before {
    background: radial-gradient(circle, #6fb6b1 0, #0c4c91 100%);
    border-radius: 50%;
    position: absolute
}

.gear:before {
    content: "";
    height: 70%;
    left: 15%;
    top: 15%;
    width: 70%;
    z-index: 1
}

.tooth-1 {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.tooth-1,
.tooth-2 {
    background: #0c4c91;
    border-radius: 5px;
    height: 120%;
    left: 43%;
    position: absolute;
    top: -10%;
    width: 14%
}

.tooth-2 {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
}

.tooth-3 {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg)
}

.tooth-3,
.tooth-4 {
    background: #0c4c91;
    border-radius: 5px;
    height: 120%;
    left: 43%;
    position: absolute;
    top: -10%;
    width: 14%
}

.tooth-4 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.tooth-5 {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg)
}

.tooth-5,
.tooth-6 {
    background: #0c4c91;
    border-radius: 5px;
    height: 120%;
    left: 43%;
    position: absolute;
    top: -10%;
    width: 14%
}

.tooth-6 {
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg)
}

.tooth-7 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.tooth-7,
.tooth-8 {
    background: #0c4c91;
    border-radius: 5px;
    height: 120%;
    left: 43%;
    position: absolute;
    top: -10%;
    width: 14%
}

.tooth-8 {
    -webkit-transform: rotate(210deg);
    transform: rotate(210deg)
}

.tooth-9 {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg)
}

.tooth-10,
.tooth-9 {
    background: #0c4c91;
    border-radius: 5px;
    height: 120%;
    left: 43%;
    position: absolute;
    top: -10%;
    width: 14%
}

.tooth-10 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
}

.tooth-11 {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg)
}

.tooth-11,
.tooth-12 {
    background: #0c4c91;
    border-radius: 5px;
    height: 120%;
    left: 43%;
    position: absolute;
    top: -10%;
    width: 14%
}

.tooth-12 {
    -webkit-transform: rotate(330deg);
    transform: rotate(330deg)
}

@-webkit-keyframes arrow-move {
    to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}

@keyframes arrow-move {
    to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}

@-webkit-keyframes gear-rotate {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes gear-rotate {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.services-container {
    align-items: center;
    -webkit-animation: background 90s linear infinite;
    animation: background 90s linear infinite;
    background: url(https://dgnqg0yj711w4.cloudfront.net/images/homepage%20services%20bg.png) #0c4c91;
    background-attachment: fixed;
    background-position: top;
    background-repeat: repeat;
    background-size: initial;
    display: flex;
    flex-direction: column;
    height: 2000px;
    justify-content: space-evenly;
    width: 100%
}

@media screen and (max-width:1530px) {
    .services-container {
        height: 1900px
    }
}

@media screen and (max-width:991px) {
    .services-container {
        font-size: min(3vw, 20px);
        height: 5700px
    }
}

@-webkit-keyframes background {
    0% {
        background-position: 0 0
    }

    50% {
        background-position: 100% 100%
    }

    to {
        background-position: 0 0
    }
}

@keyframes background {
    0% {
        background-position: 0 0
    }

    50% {
        background-position: 100% 100%
    }

    to {
        background-position: 0 0
    }
}

#services-top-row {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: min(3vw, 20px);
    height: 50%;
    justify-content: space-around;
    width: 80%
}

@media screen and (max-width:991px) {
    #services-top-row {
        flex-direction: column;
        font-size: min(3vw, 20px);
        height: 30% !important;
        width: 100%
    }
}

#services-bottom-row {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: min(3vw, 20px);
    height: 50%;
    justify-content: space-around;
    width: 80%
}

@media screen and (max-width:991px) {
    #services-bottom-row {
        flex-direction: column;
        height: 40% !important;
        width: 90%
    }
}

.services-glass-card {
    align-items: center;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: hsla(0, 0%, 100%, .2);
    border: 1px solid hsla(0, 0%, 100%, .2);
    border-radius: 10px;
    box-shadow: 0 54px 55px rgba(0, 0, 0, .25), 0 -12px 30px rgba(0, 0, 0, .22), 0 4px 6px rgba(0, 0, 0, .22), 0 12px 13px rgba(0, 0, 0, .27), 0 -3px 5px rgba(0, 0, 0, .19);
    display: flex;
    flex-direction: column;
    font-size: min(3vw, 20px);
    height: 51%;
    justify-content: flex-start;
    position: relative;
    text-align: center;
    width: 26%
}

@media screen and (max-width:991px) {
    .services-glass-card {
        height: 30%;
        width: 60%
    }
}

@media screen and (max-width:664px) {
    .services-glass-card {
        width: 75%
    }
}

@media screen and (max-width:570px) {
    .services-glass-card {
        width: 80%
    }
}

@media screen and (max-width:490px) {
    .services-glass-card {
        width: 85%
    }
}

@media screen and (max-width:400px) {
    .services-glass-card {
        width: 90%
    }
}

@media screen and (max-width:340px) {
    .services-glass-card {
        width: 94%
    }
}

.service-card-info {
    align-items: center;
    bottom: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 163px;
    position: relative
}

@media screen and (min-width:992px) and (max-width:1160px) {
    .service-card-info {
        height: 530px
    }
}

@media screen and (max-width:750px) {
    .service-card-info {
        height: 530px
    }
}

@media screen and (max-width:450px) {
    .service-card-info {
        height: 600px
    }
}

.service-card-info i {
    color: #0c4c91;
    font-size: 23pt;
    padding-top: 14px
}

.service-card-info h2 {
    font-size: 18pt;
    text-shadow: 0 0 20px #000
}

.service-card-info p {
    background-color: #0c4c9188;
    margin-bottom: 80px;
    padding: 20px
}

figure {
    margin: 0 !important
}

.service-card-video {
    bottom: 0;
    height: auto;
    position: absolute;
    width: 100%
}

.tool-tip-container {
    color: navy;
    font-size: 10px;
    left: 50%;
    position: absolute;
    top: -20px;
    width: 100%
}

.tool-tip-container p {
    left: -50%;
    position: relative
}

.service-card-video figure {
    background: #0c4c91;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    text-align: center
}

.service-card-video figure img {
    opacity: .8
}

.service-card-video figure img,
.service-card-video figure video {
    border-radius: 10px;
    display: block;
    position: relative
}

.service-card-video figure figcaption {
    color: #fff;
    font-size: 14pt
}

.service-card-video figure figcaption:before,
.service-card-videofigure figcaption:after {
    pointer-events: none
}

.service-card-video figure figcaption,
.service-card-video figure figcaption>a {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.service-card-video figure figcaption>a {
    font-size: 0;
    opacity: 0;
    text-indent: 100%;
    white-space: wrap;
    z-index: 1000
}

figure.effect-ming {
    background: #0c4c91
}

figure.effect-ming img,
figure.effect-ming video {
    opacity: .9;
    transition: opacity .35s
}

figure.effect-ming figcaption:before {
    border: 2px solid #fff;
    bottom: 30px;
    box-shadow: 0 0 0 30px hsla(0, 0%, 100%, .2);
    content: "";
    left: 30px;
    position: absolute;
    right: 30px;
    top: 30px;
    -webkit-transform: scale3d(1.4, 1.4, 1);
    transform: scale3d(1.4, 1.4, 1)
}

figure.effect-ming figcaption:before,
figure.effect-ming p {
    opacity: 0;
    transition: opacity .35s, -webkit-transform .35s;
    transition: opacity .35s, transform .35s;
    transition: opacity .35s, transform .35s, -webkit-transform .35s
}

figure.effect-ming p {
    padding: 1em;
    position: relative;
    top: 38%;
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}

figure.effect-ming:hover h2 {
    -webkit-transform: scale(.9);
    transform: scale(.9)
}

figure.effect-ming:hover figcaption:before,
figure.effect-ming:hover p {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

figure.effect-ming:hover figcaption {
    background-color: rgba(58, 52, 42, 0)
}

figure.effect-ming:hover img {
    opacity: .5 !important
}

figure.effect-ming:hover video {
    opacity: .5
}

.ParaOfProfessional {
    background: none;
    color: #fff
}

.img-fluids {
    height: 250px;
    object-fit: cover;
    width: -webkit-fill-available
}

.ListOfImgPro {
    font-size: 15px;
    margin-top: 0;
    text-align: left;
    top: 0
}

.List_1_2 {
    list-style: none
}

.List_1_2,
.fontOfSate {
    color: #191970
}

.earth-container {
    height: 150px;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 150px
}

.earth {
    -webkit-animation: earth-rotate 10s linear infinite;
    animation: earth-rotate 10s linear infinite;
    background: radial-gradient(circle, #3a6a54 0, #133 100%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    height: 100%;
    position: relative;
    width: 100%
}

.earth:before {
    background: radial-gradient(circle, #6fb6b1 0, #0c4c91 100%);
    border-radius: 50%;
    content: "";
    height: 80%;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 80%
}

@-webkit-keyframes earth-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes earth-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.text5 {
    -webkit-text-stroke: 1px #f8f8f8;
    color: #4a7e4e;
    font-size: 35px;
    text-shadow: 0 1px 4px #23430c
}

.text2 {
    color: #0c4c91;
    font-size: 40px;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15)
}

main {
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
    height: 100%;
    position: relative;
    width: 100%
}

.item {
    background-position: 50%;
    background-size: cover;
    border-radius: 20px;
    box-shadow: inset 0 20px 30px hsla(0, 0%, 100%, .3);
    height: 300px;
    list-style-type: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: left .75s, top .75s, width .75s, height .75s, -webkit-transform .1s;
    transition: transform .1s, left .75s, top .75s, width .75s, height .75s;
    transition: transform .1s, left .75s, top .75s, width .75s, height .75s, -webkit-transform .1s;
    width: 200px;
    z-index: 1;

    &:first-child,
    &:nth-child(2) {
        border-radius: 0;
        box-shadow: none;
        height: 100%;
        left: 0;
        opacity: 1;
        top: 0;
        -webkit-transform: none;
        transform: none;
        width: 100%
    }

    &:nth-child(3) {
        left: 50%
    }

    &:nth-child(4) {
        left: calc(50% + 220px)
    }

    &:nth-child(5) {
        left: calc(50% + 440px)
    }

    &:nth-child(6) {
        left: calc(50% + 660px);
        opacity: 0
    }
}

.contentsOfServices {
    color: #fff;
    display: none;
    font: 400 .85rem helvetica, sans-serif;
    left: 3rem;
    opacity: 0;
    position: absolute;
    text-shadow: 0 3px 8px rgba(0, 0, 0, .5);
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: min(30vw, 400px);

    .title {
        color: #fff;
        font-family: arial-black;
        font-size: 2.2rem;
        text-transform: uppercase
    }

    & .descriptions {
        font-size: 1.4rem;
        line-height: 1.7;
        margin: 1rem 0 1.5rem
    }

    & button {
        background-color: rgba(0, 0, 0, .1);
        border: 2px solid #fff;
        border-radius: .25rem;
        color: #fff;
        cursor: pointer;
        font-size: 1.5rem;
        padding: .75rem;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }
}

.item:nth-of-type(2) .contentsOfServices {
    -webkit-animation: show .75s ease-in-out .3s forwards;
    animation: show .75s ease-in-out .3s forwards;
    display: block
}

@-webkit-keyframes show {
    0% {
        -webkit-filter: blur(5px);
        filter: blur(5px);
        -webkit-transform: translateY(calc(-50% + 75px));
        transform: translateY(calc(-50% + 75px))
    }

    to {
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1
    }
}

@keyframes show {
    0% {
        -webkit-filter: blur(5px);
        filter: blur(5px);
        -webkit-transform: translateY(calc(-50% + 75px));
        transform: translateY(calc(-50% + 75px))
    }

    to {
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1
    }
}

.navser {
    bottom: 11rem;
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-user-select: none;
    user-select: none;
    z-index: 5;

    & .btnser {
        background-color: hsla(0, 0%, 100%, .5);
        border: 2px solid rgba(0, 0, 0, .6);
        border-radius: 50%;
        color: rgba(0, 0, 0, .7);
        cursor: pointer;
        margin: 0 1.25rem;
        padding: 1.75rem;

        &:hover {
            background-color: hsla(0, 0%, 100%, .3)
        }
    }
}

@media (min-width:651px) and (max-width:899px) {
    .contentsOfServices {
        & .title {
            font-size: 1.6rem
        }

        & .description,
        & button {
            font-size: .7rem
        }
    }

    .item {
        height: 270px;
        width: 160px;

        &:nth-child(3) {
            left: 50%
        }

        &:nth-child(4) {
            left: calc(50% + 170px)
        }

        &:nth-child(5) {
            left: calc(50% + 340px)
        }

        &:nth-child(6) {
            left: calc(50% + 510px);
            opacity: 0
        }
    }
}

@media (max-width:649px) {
    .contentsOfServices {
        & .title {
            font-size: 1.6rem
        }

        & .description {
            font-size: .65rem
        }

        & button {
            font-size: .7rem
        }
    }

    .item {
        height: 220px;
        width: 130px;

        &:nth-child(3) {
            left: 50%
        }

        &:nth-child(4) {
            left: calc(50% + 140px)
        }

        &:nth-child(5) {
            left: calc(50% + 280px)
        }

        &:nth-child(6) {
            left: calc(50% + 420px);
            opacity: 0
        }
    }
}

.slider {
    margin-top: -9px
}

.navser,
ul {
    list-style: none
}

textarea {
    resize: none
}

a {
    color: inherit;
    cursor: pointer;
    opacity: 1
}

a:hover {
    text-decoration: none
}

.text2 {
    font-family: Roboto, sans-serif;
    font-weight: 500;
    margin: 10px auto 5px;
    text-align: center
}

.hrh1 {
    border: 3px solid #9c9a40;
    margin: 0 auto 28px;
    width: 142px
}

section .Servicep {
    font-family: Lato, sans-serif;
    line-height: 2;
    margin-bottom: 35px;
    padding: 0 20px;
    text-align: center
}

.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%
}

.slideanim {
    visibility: hidden
}

.Serviceslide {
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-name: slideSer;
    -webkit-animation-name: slideSer;
    -moz-animation-name: slideSer;
    visibility: visible
}

@keyframes slideSer {
    0% {
        opacity: 0;
        -webkit-transform: translateY(60%);
        transform: translateY(60%)
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes slideSer {
    0% {
        opacity: 0;
        -webkit-transform: translateY(60%)
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

.slideanimleft {
    visibility: hidden
}

.slideleft {
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    animation-name: slideleft;
    -webkit-animation-name: slideleft;
    -moz-animation-name: slideleft;
    visibility: visible
}

@keyframes slideleft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(50%);
        transform: translateX(50%)
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes slideleft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(50%)
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@media (max-width:375px) {
    section {
        padding: 20px 10px
    }

    .bg-section h1,
    .text2 {
        font-size: 27px
    }
}

.header-full {
    background: url(https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3BmLXMxMjQtYWstMjY4MV8yLmpwZw.jpg) no-repeat;
    background-position: bottom;
    background-size: cover;
    color: #fff;
    padding-bottom: 150px
}

.header-full .logo-law {
    height: 100px;
    left: 0;
    position: absolute;
    width: 150px
}

.header-full .logo-law:hover {
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%)
}

.header-full .navbar {
    background-color: initial;
    border: none;
    border-radius: 0;
    height: 120px;
    overflow-x: none;
    width: 100%
}

.header-full .navbar-right li {
    margin-top: 25px;
    position: absolute;
    right: 40px
}

.header-full .navbar-right .menu-icon {
    position: absolute;
    right: 100px
}

.header-full .navbar-right>li>a {
    border: 1px solid #fff;
    border-radius: 0;
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    position: absolute;
    right: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.header-full .navbar-nav>li>a:before {
    background: #eee;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0;
    transform-origin: 0;
    transition-duration: .4s;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-timing-function: ease;
    z-index: -1
}

.header-full .navbar-nav>li>a:active,
.header-full .navbar-nav>li>a:focus,
.header-full .navbar-nav>li>a:hover {
    color: #41ac86
}

.header-full .navbar-nav>li>a:active:before,
.header-full .navbar-nav>li>a:focus:before,
.header-full .navbar-nav>li>a:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.menu-icon {
    cursor: pointer;
    display: inline-block
}

.menu-icon:hover {
    color: #41ac86;
    cursor: pointer
}

.icon-bar1,
.icon-bar2,
.icon-bar3 {
    background-color: #fff;
    border-radius: 0;
    height: 5px;
    margin: 6px 0;
    transition: .5s;
    width: 35px
}

.change .icon-bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px)
}

.change .icon-bar2 {
    opacity: 0
}

.change .icon-bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px)
}

.overlay {
    background-color: #000;
    background-color: rgba(0, 0, 0, .9);
    height: 0;
    left: 0;
    overflow-y: hidden;
    position: fixed;
    top: 0;
    transition: .7s;
    width: 100%;
    z-index: 5
}

.overlay-content {
    margin-top: 10px;
    position: relative;
    text-align: center;
    top: 25%;
    width: 100%
}

.overlay a {
    color: #757575;
    display: block;
    font-size: 38px;
    font-weight: 600;
    padding: 7px;
    text-decoration: none;
    transition: .5s
}

.overlay a:focus,
.overlay a:hover {
    color: #fff
}

.header-full .welcome-header {
    background-color: #fff;
    border-right: 10px solid #555;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .7);
    margin-bottom: 130px;
    margin-top: 80px;
    opacity: .9;
    padding: 15px;
    text-align: center;
    width: 800px
}

.header-full .welcome-header h1 {
    color: #9c9a40;
    font-family: Lato, sans-serif;
    font-size: 55px;
    font-weight: 700;
    margin-bottom: 36px
}

.header-full .welcome-header p {
    color: #545454;
    font-family: Lato, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 auto 20px;
    max-width: 660px
}

.header-full .welcome-contact {
    background-color: #fff;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, .7);
    left: 0;
    margin-bottom: 50px;
    opacity: .8;
    position: absolute;
    width: 300px
}

.header-full .contact-info {
    color: #555;
    font-size: 14px;
    font-weight: 500;
    line-height: 5px;
    padding: 20px;
    right: 0
}

@media (max-width:375px) {
    .header-full {
        background-position: bottom;
        background-size: cover;
        color: #fff;
        padding-bottom: 100px
    }

    .header-full .logo-law {
        display: none !important
    }

    .header-full .navbar-nav>li>a {
        margin: 0 5px 20px;
        padding: 8px 16px;
        text-align: center
    }

    .header-full .welcome-header {
        border-right: none;
        margin-bottom: 40px;
        margin-top: 10px;
        width: 100%
    }

    .header-full .welcome-header h1 {
        font-size: 25px;
        margin-bottom: 20px
    }

    .header-full .welcome-header p {
        font-size: 16px
    }

    .header-full .welcome-contact {
        font-size: 14px;
        width: 100%
    }

    .header-full .contact-info {
        font-size: 12px;
        line-height: 2px;
        padding: 20px
    }

    .overlay {
        overflow-y: 0
    }

    .overlay a {
        font-size: 25px
    }

    .overlay .closebtn {
        font-size: 40px;
        right: 35px;
        top: 15px
    }
}

#about {
    background-color: #fff
}

#about img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    height: 100%;
    width: 100%
}

#about img:hover {
    -webkit-filter: grayscale(80%);
    filter: grayscale(80%);
    margin-right: 0;
    transition: .5s ease-in-out
}

#about .img-txt-bg:hover {
    background-color: #005960;
    opacity: .7
}

#about .carousel {
    background-color: #fff;
    height: 478px;
    margin-left: 0
}

#about .about-me h3 {
    background-color: #005960;
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 25px;
    font-weight: 600;
    margin: 0 auto;
    opacity: .7;
    padding: 20px;
    text-transform: none
}

#about .carousel-inner p {
    color: rgba(25, 25, 25, .6);
    font-family: Mukta, sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 22px;
    padding: 25px 40px;
    text-align: left;
    word-spacing: 3px
}

#about .img-txt-bg:hover p {
    color: #fff
}

#about .carousel-indicators li {
    background-color: #fff;
    border: 2px solid #005960;
    border-radius: 50%;
    height: 16px;
    margin-right: 10px;
    right: 10px;
    width: 16px
}

#about .img-txt-bg:hover li {
    background-color: #005960;
    border-color: #fff
}

#about .carousel-indicators li.active {
    background-color: #005960;
    border: 2px solid #005960
}

#about .img-txt-bg:hover li.active {
    background-color: #fff;
    border-color: #fff
}

#about .no-padding {
    margin: 0 !important;
    padding: 0 !important
}

@media (max-width:375px) {
    #about .carousel-inner p {
        font-size: 16px;
        line-height: 20px;
        padding: 10px
    }

    #about .carousel {
        min-height: 520px
    }
}

#service {
    background-color: #eee
}

#service .tab-content {
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .6)), url(https://www.esri.in/content/dam/distributor-share/esri-in/services/engagement/product-and-solutions-testing-esri-india-updated-1.jpg);
    background-size: cover;
    min-height: 443px;
    padding: 25px
}

#service .brand-pills li a,
#service .brand-pills li a:focus {
    background-color: #005960;
    border-radius: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    padding: 32px 15px;
    text-transform: uppercase
}

#service .brand-pills li.active a,
#service .brand-pills li.active a:focus,
#service .brand-pills li.active a:focus:hover,
#service .brand-pills li.active a:hover,
#service .brand-pills>li>a:focus:hover,
#service .brand-pills>li>a:hover {
    background-color: #9c9a40
}

#service li.brand-nav.active a:after {
    border-bottom: 55px solid transparent;
    border-left: 25px solid #9c9a40;
    border-top: 55px solid transparent;
    content: " ";
    display: block;
    height: 0;
    left: 100%;
    margin-top: -55px;
    position: absolute;
    top: 50%;
    width: 0;
    z-index: 2
}

#service h3 {
    color: #99d1e5;
    font-size: 24px;
    font-weight: 500;
    text-align: center
}

#service p {
    color: #ffffffb5;
    font-family: Mukta, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 25px;
    text-align: justify;
    word-spacing: 3px
}

@media (max-width:375px) {
    #service .tab-content {
        min-height: 680px;
        padding: 10px
    }

    #service h3 {
        font-size: 20px
    }

    #service p {
        line-height: 20px;
        padding: 5px
    }

    #service .brand-pills li a,
    #service .brand-pills li a:focus {
        font-size: 14px;
        padding: 20px 15px
    }

    #service li.brand-nav.active a:after {
        border-bottom: 30px solid transparent;
        border-left: 10px solid #9c9a40;
        border-top: 30px solid transparent;
        margin-top: -30px
    }
}

#blog {
    background-color: #fff
}

article {
    min-height: 200px
}

.blog-h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    text-align: center
}

.text-blog {
    color: #323232;
    text-align: left
}

.badge-more {
    background-color: #555;
    border-radius: 0;
    color: #fff;
    padding: 3px
}

.posted {
    color: #757575;
    font-style: italic
}

.post-meta {
    margin-bottom: 10px
}

.header-blog {
    margin-bottom: 0
}

@media (max-width:375px) {
    aside {
        margin-bottom: 25px
    }

    .post {
        margin: 25px 0
    }
}

#testimonials {
    background-color: #eee
}

#testimonials .projects {
    margin: auto 80px
}

#testimonials .grid .result {
    background-clip: content-box;
    background-color: #555;
    background-position: 50%;
    background-size: cover;
    border-radius: none;
    min-height: 220px;
    padding: 5px
}

#testimonials .grid .small {
    background-color: #9c9a40;
    display: block;
    flex-basis: 40%
}

#testimonials .grid .big {
    background-color: #005960;
    display: block;
    flex-basis: 60%
}

#testimonials .text {
    border: 1px solid transparent;
    height: 80%;
    margin: 20px;
    position: relative
}

#testimonials .text p {
    color: #fff;
    font-family: Montserrat, serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 25px;
    padding: 10px;
    text-transform: uppercase
}

#testimonials .text:after,
#testimonials .text:before {
    background: #fff;
    content: "";
    height: 4px;
    position: absolute;
    transition: all .3s linear;
    width: 0
}

#testimonials p:after,
#testimonials p:before {
    background: #fff;
    content: "";
    height: 0;
    position: absolute;
    transition: all .3s linear;
    width: 4px
}

#testimonials .text:hover:after,
#testimonials .text:hover:before {
    width: 100%
}

#testimonials .text:hover p:after,
#testimonials .text:hover p:before {
    height: 100%
}

#testimonials .text:after {
    bottom: 0;
    left: 0;
    transition-duration: .5s
}

#testimonials .text p:after,
#testimonials .text:before {
    right: 0;
    top: 0;
    transition-duration: .5s
}

#testimonials .text p:before {
    bottom: 0;
    left: 0;
    transition-duration: .5s
}

@media (max-width:375px) {
    #testimonials .projects p {
        font-size: 14px;
        line-height: 20px;
        padding: 20px
    }
}

#contact {
    background-color: #fff
}

#contact .cont-box {
    height: 150px;
    margin-bottom: 10px
}

#contact .contact-address {
    background-color: #00474d
}

#contact .contact-hours {
    background-color: #005e66
}

#contact .contact-contact {
    background-color: #007580
}

#contact .cont-box h4 {
    color: #fff;
    font-weight: 600;
    padding: 15px 0 5px;
    text-align: center
}

#contact .cont-box p {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 10px;
    text-align: center
}

#contact .contacts>[class*=col-] {
    padding-left: 0;
    padding-right: 0
}

#contact .hr-contact {
    margin: 5px auto;
    width: 90%
}

#contact .form-dropdown {
    background-color: #007580;
    margin-top: 12px;
    min-height: 360px;
    padding: 20px 10px;
    z-index: 10
}

#contact .form-group {
    padding: 0 auto
}

#contact .btn-form {
    background-color: #007580;
    border-color: #fff;
    border-radius: 0;
    color: #fff;
    justify-content: center;
    margin: 20px 130px;
    padding: 10px 25px
}

#contact .btn-form:hover {
    background-color: #fff;
    color: #007580
}

#contact .form-app input,
#contact .form-app textarea {
    background-color: #007580;
    border-color: #fff;
    border-radius: 15px;
    color: #fff
}

#contact .contact-buttons {
    padding-bottom: 30px
}

#contact .btn-two {
    background-color: #007580;
    border-color: #fff;
    border-radius: 0;
    border-width: 1px;
    color: #fff;
    padding: 5px 10px
}

#contact .btn-two:hover {
    background-color: #fff;
    color: #007580
}

@media (max-width:375px) {
    #contact .cont-box {
        margin: 10px
    }

    #contact .cont-box h4 {
        padding: 15px 0 0
    }

    #contact .cont-box p {
        padding: 10px
    }
}

#footer {
    background-color: #191919;
    background-color: rgba(25, 25, 25, .8);
    color: #fff;
    padding: 80px 70px
}

#footer h4 {
    color: #0c9;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center
}

#footer .footer-info {
    text-align: left
}

#footer .footer-icons a {
    background-color: #33383b;
    border-radius: 0;
    color: #00b386;
    cursor: pointer;
    display: inline-block;
    font-size: 22px;
    height: 35px;
    line-height: 35px;
    margin-right: 15px;
    text-align: center;
    width: 35px
}

#footer .footer-icons a:hover {
    background-color: #fff
}

#footer .contacts .fa {
    color: #00b386
}

#footer ul {
    color: #fff;
    font-size: 14px;
    line-height: 2.2;
    padding-bottom: 20px
}

#footer li,
#footer ul {
    margin-left: 0;
    padding-left: 0
}

#footer li {
    text-align: left
}

#footer .nav-links a:hover {
    color: #00b386
}

#footer .hr-footer {
    color: #fff;
    display: block;
    margin: 25px 0;
    width: 100%
}

@media (max-width:375px) {
    #footer {
        padding: 50px 10px
    }

    #footer h4 {
        font-size: 20px;
        margin-bottom: 15px
    }

    #footer .nav-links a {
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 20px
    }

    #footer .footer-info {
        padding-bottom: 30px
    }
}

.copyright {
    background-color: #00aa9c
}

.copyright p {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 0;
    padding: 5px 0
}

.copyright p,
.to-top {
    color: #fff;
    text-align: center
}

.to-top {
    background-color: #aaa;
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 0;
    bottom: 15px;
    font-size: 30px;
    height: 40px;
    opacity: .7;
    position: fixed;
    right: 15px;
    text-decoration: none;
    width: 40px
}

.to-top:hover {
    background-color: #222;
    color: #00b386;
    transition: all 1s ease
}

@media (max-width:375px) {
    .to-top {
        bottom: 5px;
        right: 0
    }
}

.breadcrumb {
    background-color: #aaa;
    border-radius: 0;
    color: #fff
}

.breadcrumb>li:hover>a {
    color: #005960
}

.pagination>li>a {
    background-color: #fff;
    border-color: #005960;
    border-radius: 0;
    color: #005960
}

.pagination>li.active a,
.pagination>li.active:hover a,
.pagination>li:hover:focus>a,
.pagination>li:hover>a {
    background-color: #005960;
    border: 1px solid #005960;
    color: #fff
}

aside {
    background-color: #eee;
    box-shadow: 2px 2px 2px 0 hsla(0, 0%, 47%, .8)
}

aside h3 {
    background-color: #005960;
    color: #fff;
    font-size: 18px;
    opacity: .7;
    padding: 7px;
    text-align: center
}

.sidebar-posts ol {
    margin-left: 10px;
    padding-bottom: 10px;
    padding-left: 10px
}

.sidebar-posts li {
    color: #555;
    font-size: 14px;
    margin-left: 10px;
    padding-left: 10px;
    text-align: left
}

.sidebar-hr {
    border-color: #555;
    margin-left: 0;
    margin-top: 0;
    padding-left: 0;
    width: 90%
}

.main-content {
    background-color: #eee;
    min-height: 700px
}

.header-h3 h3 {
    color: #005960;
    font-size: 30px;
    font-weight: 600;
    padding-top: 20px;
    text-align: center
}

.header-h3 .post-meta {
    text-align: right
}

.main-content .text-blog {
    color: rgba(25, 25, 25, .8);
    font-size: 15px;
    padding: 20px
}

.main-content .text-blog:first-letter {
    color: #005960;
    font-size: 150%;
    font-weight: 600
}

@media (max-width:375px) {
    .text-blog {
        line-height: 20px
    }
}

:root {
    --d: 700ms;
    --e: cubic-bezier(0.19, 1, 0.22, 1);
    --font-sans: "Rubik", sans-serif;
    --font-serif: "Cardo", serif
}

* {
    box-sizing: border-box
}

.dd_heading {
    font-family: roboto thin;
    text-align: center
}

.page-content {
    grid-gap: 1rem;
    display: grid;
    font-family: Rubik, sans-serif;
    font-family: var(--font-sans);
    margin: 0 auto;
    max-width: 1024px;
    padding: 1rem
}

@media (min-width:600px) {
    .page-content {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:800px) {
    .page-content {
        grid-template-columns: repeat(6, 1fr)
    }
}

.d_card {
    align-items: flex-end;
    background-color: #f5f5f5;
    border-radius: 15px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 2px 2px rgba(0, 0, 0, .1), 0 4px 4px rgba(0, 0, 0, .1), 0 8px 8px rgba(0, 0, 0, .1), 0 16px 16px rgba(0, 0, 0, .1);
    color: #f5f5f5;
    display: flex;
    overflow: hidden;
    padding: 1rem;
    position: relative;
    text-align: center;
    width: 100%
}

@media (min-width:600px) {
    .d_card {
        height: 250px
    }
}

.d_card:before {
    background-position: 0 0;
    background-size: cover;
    height: 110%;
    transition: -webkit-transform 1.05s cubic-bezier(.19, 1, .22, 1);
    transition: -webkit-transform calc(var(--d)*1.5) var(--e);
    transition: transform 1.05s cubic-bezier(.19, 1, .22, 1);
    transition: transform calc(var(--d)*1.5) var(--e);
    transition: transform 1.05s cubic-bezier(.19, 1, .22, 1), -webkit-transform 1.05s cubic-bezier(.19, 1, .22, 1);
    transition: transform calc(var(--d)*1.5) var(--e), -webkit-transform calc(var(--d)*1.5) var(--e)
}

.d_card:after,
.d_card:before {
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%
}

.d_card:after {
    background-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .009) 11.7%, rgba(0, 0, 0, .034) 22.1%, rgba(0, 0, 0, .072) 31.2%, rgba(0, 0, 0, .123) 39.4%, rgba(0, 0, 0, .182) 46.6%, rgba(0, 0, 0, .249) 53.1%, rgba(0, 0, 0, .32) 58.9%, rgba(0, 0, 0, .394) 64.3%, rgba(0, 0, 0, .468) 69.3%, rgba(0, 0, 0, .54) 74.1%, rgba(0, 0, 0, .607) 78.8%, rgba(0, 0, 0, .668) 83.6%, rgba(0, 0, 0, .721) 88.7%, rgba(0, 0, 0, .762) 94.1%, rgba(0, 0, 0, .79));
    display: block;
    height: 200%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: -webkit-transform 1.4s cubic-bezier(.19, 1, .22, 1);
    transition: -webkit-transform calc(var(--d)*2) var(--e);
    transition: transform 1.4s cubic-bezier(.19, 1, .22, 1);
    transition: transform calc(var(--d)*2) var(--e);
    transition: transform 1.4s cubic-bezier(.19, 1, .22, 1), -webkit-transform 1.4s cubic-bezier(.19, 1, .22, 1);
    transition: transform calc(var(--d)*2) var(--e), -webkit-transform calc(var(--d)*2) var(--e)
}

.d_card:first-child:before {
    background-image: url(/static/media/sate.1b124c784981190155be.png);
    background-size: cover
}

.d_card:nth-child(2):before {
    background-image: url(/static/media/natural.8e81f0b1b7dfa607d71e.jpeg);
    background-size: cover
}

.d_card:nth-child(3):before {
    background-image: url(/static/media/mineral.c8cbc9490edd05fe749a.jpg)
}

.d_card:nth-child(4):before {
    background-image: url(/static/media/database.f530e109d97c49949012.jpg);
    background-size: cover
}

.d_card:nth-child(5):before {
    background-image: url(/static/media/topo.2e508a5b2e83477107ac.jpg);
    background-size: cover
}

.d_card:nth-child(6):before {
    background-image: url(/static/media/urban.1a6f678c0b9a4f604cd8.png);
    background-size: cover
}

.contentNew {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    position: relative;
    transition: -webkit-transform .7s cubic-bezier(.19, 1, .22, 1);
    transition: -webkit-transform var(--d) var(--e);
    transition: transform .7s cubic-bezier(.19, 1, .22, 1);
    transition: transform var(--d) var(--e);
    transition: transform .7s cubic-bezier(.19, 1, .22, 1), -webkit-transform .7s cubic-bezier(.19, 1, .22, 1);
    transition: transform var(--d) var(--e), -webkit-transform var(--d) var(--e);
    width: 100%;
    z-index: 1
}

.contentNew>*+* {
    margin-top: 1rem
}

.heading {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2
}

.data-content {
    font-family: Cardo, serif;
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.35
}

@media (hover:hover) and (min-width:600px) {
    .d_card:after {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .contentNew {
        -webkit-transform: translateY(calc(100% - 4.5rem));
        transform: translateY(calc(100% - 4.5rem))
    }

    .contentNew>:not(.heading) {
        opacity: 0;
        -webkit-transform: translateY(1rem);
        transform: translateY(1rem);
        transition: opacity .7s cubic-bezier(.19, 1, .22, 1), -webkit-transform .7s cubic-bezier(.19, 1, .22, 1);
        transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
        transition: transform .7s cubic-bezier(.19, 1, .22, 1), opacity .7s cubic-bezier(.19, 1, .22, 1);
        transition: transform var(--d) var(--e), opacity var(--d) var(--e);
        transition: transform .7s cubic-bezier(.19, 1, .22, 1), opacity .7s cubic-bezier(.19, 1, .22, 1), -webkit-transform .7s cubic-bezier(.19, 1, .22, 1);
        transition: transform var(--d) var(--e), opacity var(--d) var(--e), -webkit-transform var(--d) var(--e)
    }

    .d_card:focus-within,
    .d_card:hover {
        align-items: center
    }

    .d_card:focus-within:before,
    .d_card:hover:before {
        -webkit-transform: translateY(-4%);
        transform: translateY(-4%)
    }

    .d_card:focus-within:after,
    .d_card:hover:after {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .d_card:focus-within .contentNew,
    .d_card:hover .contentNew {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .d_card:focus-within .contentNew>:not(.heading),
    .d_card:hover .contentNew>:not(.heading) {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        transition-delay: 87.5ms;
        transition-delay: calc(var(--d)/8)
    }

    .d_card:focus-within .contentNew,
    .d_card:focus-within .contentNew>:not(.heading),
    .d_card:focus-within:after,
    .d_card:focus-within:before {
        transition-duration: 0s
    }
}

@media (max-width:420px) {
    .descriptions {
        font-size: 10px !important
    }

    .title {
        font-size: 15px !important
    }
}

#demo {
    background: linear-gradient(112deg, #fff 50%, #faebd7 0);
    box-shadow: 0 0 1px;
    margin: auto;
    max-width: 900px
}

.carouselcaption {
    color: rgba(78, 77, 77, .856);
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 700;
    line-height: 2rem;
    padding: 5rem 8rem;
    position: static;
    text-align: center;
    z-index: 10
}

@media(max-width:767px) {
    .carouselcaption {
        color: rgba(78, 77, 77, .856);
        font-size: .7rem;
        font-style: italic;
        font-weight: 700;
        line-height: 1.5rem;
        padding: 3rem 2rem;
        position: static;
        text-align: center;
        z-index: 10
    }
}

.carouselcaption img {
    border-radius: 5rem;
    margin-top: 2rem;
    width: 6rem
}

@media(max-width:767px) {
    .carouselcaption img {
        border-radius: 4rem;
        margin-top: 1rem;
        width: 4rem
    }
}

#image-caption {
    font-size: 1rem;
    font-style: normal;
    margin-top: .5rem
}

@media(max-width:767px) {
    #image-caption {
        font-size: .6rem;
        font-style: normal;
        margin-top: .5rem
    }
}

.Icon {
    background-color: #df3859;
    padding: 1.4rem
}

@media(max-width:767px) {
    .Icon {
        padding: .8rem
    }
}

.CarouselControlPrev {
    justify-content: flex-start
}

.carousel-control-next {
    justify-content: center
}

.carousel-control-next,
.carousel-control-prev {
    opacity: 1;
    transition: none
}

.TestimonialCon {
    margin-top: 71px
}

.Toastify__toast-container {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 9999
}

.Toastify__toast-body {
    font-size: 14px;
    padding: 10px
}

.Toastify__toast--success {
    background-color: #28a745
}

.Toastify__toast--error {
    background-color: #dc3545
}

.mainboxAuthorise {
    height: 86.5vh
}

.required-field {
    color: red
}

.radio-group {
    display: flex;
    justify-content: center
}

.input1 {
    font-size: 13px
}

.uform {
    background-color: #f2f2f2;
    border-radius: 8px;
    box-shadow: 2px 3px 4px 3px #ddd;
    height: 560px;
    margin: 12px auto !important;
    margin-left: auto;
    max-width: 1200px;
    padding: 20px;
    width: 100%
}

.GeC {
    height: 670px;
    margin: 12px auto !important;
    overflow: hidden;
    padding: 12px auto;
    width: 100%;
    width: 600px
}

.headingname,
h3 {
    font-weight: 700;
    margin-top: -.5vw;
    text-align: left
}

.lable1 {
    color: #000;
    font-size: 13px;
    font-weight: 500;
    height: .6vw;
    margin-left: 130px;
    text-align: left
}

.input1 {
    padding: 5px 5px 5px 0
}

.passwordcontent {
    font-size: 9px;
    margin-bottom: 0;
    text-align: left;
    width: 290px
}

.signupbtnbox {
    background-color: #2b6e5b;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: min(4vw, 18px);
    font-weight: 500;
    width: 100%
}

.passwordseth {
    left: 130px;
    position: relative;
    top: -25px;
    width: 300px
}

.eye-iconReg {
    color: hsla(0, 2%, 50%, .974);
    cursor: pointer;
    font-size: 15px;
    left: 128px;
    margin-left: 271px;
    position: relative;
    top: -27px
}

input[type=radio] {
    margin: 9px 4px 0
}

.custom-hr {
    border: 1px solid #d1d1d1;
    border-radius: 47px
}

.validations-text {
    font-size: 15px;
    font-size: 10px;
    line-height: 1.5;
    position: relative
}

.validations-a {
    font-size: 14px;
    left: 15px;
    margin-bottom: 10px;
    position: absolute
}

.authorizeregt {
    background-color: #f2f2f2;
    border-radius: 8px;
    box-shadow: 2px 3px 4px 3px #ddd;
    padding: 20px
}

.authorizeregt,
.authorizeregtA {
    height: auto;
    max-width: 1000px;
    width: 100%
}

.col-md-3,
.col-md-4 {
    text-align: left
}

.input1 {
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #000;
    margin-bottom: 8px;
    margin-left: 130px;
    max-width: 300px;
    padding: 5px;
    width: 100%
}

.lable2 {
    color: #000;
    font-size: 1.4rem !important;
    font-weight: 500;
    height: 0;
    text-align: left
}

.authsignupbtn {
    background-color: #2b6e5b;
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 550;
    max-width: 130px;
    padding: 5px;
    width: 100%
}

.authsignupbtn:hover {
    background-color: #fff;
    border: 1px solid #28a745;
    color: #4caf50
}

.authpasswordseth {
    width: 100%
}

.password-toggle {
    top: 59%
}

.AU_Toogle_btnG {
    padding: 6px 40px
}

.AU_Toogle_btnA {
    padding: 6px 35px
}

@media(max-width:575.98px) {
    .AU_Toogle_btnG {
        padding: auto !important;
        padding: 4px 6px !important;
        width: auto !important
    }

    .AU_Toogle_btnA {
        padding: 4px 5px !important
    }
}

.sp {
    background-color: #fff;
    background-image: none;
    color: #495057;
    display: block;
    font-weight: 400;
    line-height: 1.5
}

.error-messageGU {
    color: red;
    font-size: 11px;
    font-style: italic;
    padding-left: 20px
}

.error-messageMaxlength {
    color: blue;
    font-size: 11px;
    font-style: italic
}

.error-messageMaxlengthGU {
    color: #1e90ff;
    display: none;
    position: absolute;
    text-align: center;
    transition: display .5s ease-in-out;
    width: 120px;
    z-index: 1
}

.error-messageUU {
    color: red;
    font-size: 11px;
    font-style: italic;
    padding-left: 20px
}

.error-messageMaxlengthUU {
    color: #1e90ff;
    display: none;
    position: absolute;
    text-align: center;
    transition: display .5s ease-in-out;
    width: 120px;
    z-index: 1
}

.Toastify__toast-body>div:last-child {
    background-color: #f2f2f200;
    color: #fff;
    flex: 1 1;
    word-break: break-word
}

.remark-control {
    background-color: #fff;
    background-image: none;
    color: #495057;
    display: block;
    font-weight: 400;
    line-height: 1.5
}

.input-group {
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: -1px;
    position: relative;
    width: 80%
}

.country-code-dropdown2 {
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #000;
    margin-bottom: 8px;
    margin-left: 5px;
    max-width: 60px;
    padding: 1.4px 5px 5px;
    top: -22PX;
    width: 86%
}

.eye-icon-authorize {
    color: hsla(0, 2%, 50%, .974);
    cursor: pointer;
    font-size: 14px;
    left: 198px;
    position: relative;
    top: -53px
}

.country-code-dropdown-au {
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #000;
    font-size: 10px;
    height: 30px;
    left: 2px;
    margin-bottom: 8px;
    max-width: 56px;
    position: absolute;
    top: 27px
}

.mb-control {
    left: 60px;
    position: absolute;
    top: 21px;
    width: 145px
}

.fontA {
    font-size: min(4vw, 24px);
    text-transform: uppercase
}

.fontA,
.validations-p {
    font-family: open sans, sans-serif
}

.validations-p {
    font-size: min(3vw, 10px);
    font-style: italic;
    line-height: normal
}

.gene-heading {
    font-family: open sans, sans-serif;
    font-size: min(4vw, 18px)
}

.text-danger {
    position: relative;
    right: 3px
}

.registrationBack {
    background-color: #2b6e5b;
    border-radius: 7px;
    left: 6px;
    padding: 6px;
    position: fixed;
    top: 105px
}

.registrationButton {
    background-color: #2b6e5b;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 16px
}

.GUtoUU {
    height: 83.5vh !important
}

.RadiocontentGuAu {
    border: 1px solid #007bff;
    border-radius: 7px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1)
}

.the-legend {
    background-color: #402588bd;
    border: 1px solid #e0e0e0;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 14px);
    font-weight: 700;
    margin-bottom: 0;
    padding: 2px 10px;
    width: auto
}

.the-fieldset {
    border: 2px solid #e0e0e0;
    padding: 10px
}

.success-modal {
    align-items: center;
    background: rgba(0, 0, 0, .7);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%
}

.success-content {
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    text-align: center
}

.success-content h2 {
    color: green
}

.success-content button {
    background: green;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    padding: 10px 20px
}

.cancel-button {
    background-color: red !important;
    margin-right: 10px !important
}

.cancel-button,
.confirm-button {
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    padding: 6px 12px !important
}

.confirm-button {
    background-color: green !important;
    margin-left: 13px
}

.modal-content {
    align-items: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    display: flex;
    flex-direction: column;
    left: 50%;
    max-width: 90%;
    padding: 20px;
    position: relative;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.modalbutton {
    margin-left: 36px !important
}

.TextOfMODAl {
    font-weight: 700
}

@media (max-width:768px) {
    .modal-content {
        max-width: 100%
    }

    h2 {
        font-size: 20px
    }
}

.password-strength-bar {
    background-color: #e0e0e0;
    border-radius: 2px;
    height: 2px;
    margin-bottom: 2px;
    margin-top: 3px;
    overflow: hidden;
    width: 100%
}

.password-strength-bar-fill {
    height: 100%;
    transition: width .5s ease-in-out
}

.password-strength-text {
    font-size: 12px;
    margin-top: 0;
    text-align: right
}

input#inputEmail4::-webkit-input-placeholder {
    padding: 0
}

input#inputEmail4::placeholder {
    padding: 0
}

input#inputPassword4::-webkit-input-placeholder {
    padding: 0
}

input#inputPassword4::placeholder {
    padding: 0
}

input#inputCity::-webkit-input-placeholder {
    padding: 0
}

input#inputCity::placeholder {
    padding: 0
}

input#inputZip::-webkit-input-placeholder {
    padding: 0
}

input#inputZip::placeholder {
    padding: 0
}

input#inputAddress2::-webkit-input-placeholder {
    padding: 0
}

input#inputAddress2::placeholder {
    padding: 0
}

input#inputAddress::-webkit-input-placeholder {
    padding: 0
}

input#inputAddress::placeholder {
    padding: 0
}

input#EmailId::-webkit-input-placeholder {
    padding: 0
}

input#EmailId::placeholder {
    padding: 0
}

input#Password::-webkit-input-placeholder {
    padding: 0
}

input#Password::placeholder {
    padding: 0
}

input#security-answer::-webkit-input-placeholder {
    padding: 0
}

input#security-answer::placeholder {
    padding: 0
}

.no-padding-left {
    font-size: 13px !important;
    padding-left: 4px !important
}

input.placeHolder_Font_size::-webkit-input-placeholder {
    font-size: 13px !important
}

input.placeHolder_Font_size::placeholder {
    font-size: 13px !important
}

input#inputCity {
    font-size: 13px
}

.authorizeregt_wraper {
    background-color: #f2f2f2;
    border-radius: 8px;
    box-shadow: 2px 3px 4px 3px #ddd;
    padding: 20px
}

.authorizeregt_wraper,
.authorizeregt_wraperA {
    height: auto;
    max-width: 1050px;
    width: 100%
}

input.passwordInput.form-control.form-control-lg {
    padding-right: 30px
}

input.passwordInput.is-invalid.form-control.form-control-lg,
textarea#exampleTextarea {
    font-size: small
}

.ProductsDiv {
    --tw-bg-opacity: 1;
    background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
    color: #444;
    font-family: Avenir;
    margin: 0;
    overflow: auto;
    overflow-x: hidden;
    text-shadow: 0 1px 0 #333
}

.wrapper {
    background: #fcf6f5;
    border: 3px solid rgba(15, 1, 1, .26);
    border-radius: 40px 0;
    box-shadow: 0 15px 20px -12px rgba(0, 0, 0, .5);
    margin: 40px 7% 0;
    padding: 1% 5%
}

.heightProduct {
    height: 86.5vh
}

:root {
    --background: #ecf0f1;
    --accent: #e74c3c;
    --text-color: #111
}

article {
    box-sizing: border-box;
    margin: 1.5em auto 0;
    max-width: 70em;
    padding: 0 2em;
    width: 100%
}

.strssword {
    color: #901
}

article header,
article img {
    margin-bottom: 1.5em
}

.name-logo {
    -webkit-animation: bounce 4s infinite;
    animation: bounce 4s infinite;
    margin-bottom: -.5em
}

article img {
    max-width: 100%
}

article p {
    -webkit-column-gap: 2em;
    column-gap: 2em;
    font-family: Mukta, sans-serif;
    font-size: 13px;
    font-weight: 100;
    text-align: justify;
    word-spacing: 3px
}

:root {
    --white: #fff;
    --black: #000
}

body {
    overflow: hidden
}

header #inner_header_post_thumb {
    background-position: 50%;
    background-size: cover;
    height: 87vh;
    position: relative
}

header #inner_header_post_thumb video {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.outter.hero-video {
    background-position: 50%;
    background-size: cover
}

@media (max-width:767px) {
    .outter .hero-video {
        height: 325px
    }

    article p {
        font-size: 16px
    }
}

.hero-video .video-container {
    background-position: 50%;
    background-size: cover;
    height: 87vh;
    overflow: hidden;
    position: relative
}

@media (max-width:767px) {
    .hero-video .video-container {
        height: 325px
    }
}

.hero-video video {
    height: 87vh;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%
}

@media (max-width:767px) {
    .hero-video video {
        height: 325px
    }
}

.video-container:after {
    background: rgba(0, 0, 0, .2);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

@media (max-width:767px) {
    h1 {
        font-size: 32px
    }
}

@media (min-width:768px) {
    h1 {
        font-size: 52px
    }
}

.desc {
    color: #fff;
    font-size: 18px;
    font-weight: 400
}

.callout {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin-left: 10%;
    position: relative;
    width: 60%;
    z-index: 10
}

@media (max-width:767px) {
    .callout {
        width: 90%
    }
}

@media (max-width:480px) {
    article p {
        font-size: 14px
    }
}

.img-heading {
    color: #fff;
    font-size: 35px;
    letter-spacing: -.5px;
    margin: 0 0 1rem;
    padding: 0
}

.button,
.img-heading {
    font-weight: 700;
    text-transform: uppercase
}

.button {
    background-color: initial;
    background-color: #fff;
    border-radius: 12px;
    color: #1b1b1b;
    font-size: 25px;
    margin-top: 50px;
    padding: 4px 17px;
    text-align: center;
    text-decoration: none;
    width: 25vh
}

@media (max-width:767px) {
    .button {
        border-radius: 7px;
        font-size: 18px;
        margin-top: 15px;
        padding: 1px 10px;
        width: 15vh
    }

    .img-heading {
        font-size: 18px;
        letter-spacing: .5px;
        white-space: nowrap;
        width: 80rem
    }
}

.button:hover {
    background-color: #6e9e01;
    cursor: pointer
}

@-webkit-keyframes text {
    0% {
        width: 0
    }

    to {
        width: 36.5ch
    }
}

@keyframes text {
    0% {
        width: 0
    }

    to {
        width: 36.5ch
    }
}

@media(min-width:320px) and (max-width:425px) {
    .img-heading {
        font-size: 11px
    }
}

.ApplicationText {
    font-size: 20px;
    line-height: 2;
    margin: 20px 9px
}

.cardFashion {
    background: #80808047;
    color: #064d70;
    -ms-flex: 1 1 auto;
    font-weight: 600;
    height: 350px;
    line-height: 2;
    text-align: center
}

.ApplicationCardText {
    font-size: 41px
}

.ApplicationText {
    font-size: 16px
}

.ApplicationTextTitle {
    color: blue;
    font-size: 20px;
    line-height: 28px;
    position: relative;
    text-align: center;
    top: 60px
}

.CardView {
    left: 65px;
    position: relative;
    top: 70px
}

.Application-main-content {
    background-color: #bfff00;
    height: 235px;
    margin-top: -51px
}

.Archival-logo {
    height: 60px;
    margin-left: -204px;
    width: 100px
}

.Archival-card-header,
.Retrieval-card-header,
.Search-card-header {
    background-color: #1c1c64
}

.ArchivalCardText {
    color: #fff;
    font-size: 41px;
    margin-left: 50px;
    margin-top: -58px
}

.Retrival-logo {
    height: 60px;
    margin-left: -204px;
    width: 100px
}

.RetrievalCardText {
    color: #fff;
    font-size: 41px;
    margin-left: 60px;
    margin-top: -58px
}

.Search-logo {
    height: 60px;
    margin-left: -204px;
    width: 100px
}

.SearchCardText {
    color: #fff;
    font-size: 41px;
    margin-left: 20px;
    margin-top: -58px
}

.Mainbody-of-application {
    height: 86.5vh
}

.AgricultureTextTitle {
    color: blue;
    font-size: 20px;
    line-height: 28px;
    position: relative;
    text-align: center;
    top: 60px
}

.Agriculture-main-content {
    background-color: #3cff00;
    height: 235px;
    margin-top: 100px
}

.NDVICardText {
    margin-left: 20px;
    margin-top: -58px
}

.Card-header {
    background-color: #1c1c64
}

.NDVICardText {
    color: #fff;
    font-size: 41px;
    margin-left: 4px;
    position: relative;
    top: 28px
}

.SAVICardText {
    margin-left: 60px;
    top: -24px
}

.SAVICardText,
.StackCardText {
    color: #fff;
    font-size: 41px;
    height: 0;
    position: relative
}

.StackCardText {
    margin-left: 20px;
    top: -22px
}

.ClassCardText {
    color: #fff;
    font-size: 41px;
    height: 0;
    margin-left: 5px;
    position: relative;
    top: -21px
}

.ClassificationText,
.NDVIText,
.SAVIText,
.StackingText {
    font-size: 13px;
    margin: 20px 9px;
    word-spacing: 7px
}

.WaterApplication {
    background-color: #00008b;
    border-radius: 7px;
    color: #fff;
    margin: 9px 1751px 6px 0;
    padding: 4px
}

.layerstacking {
    background: #00000045;
    border-radius: 10px;
    color: #fff;
    font-size: 38px;
    left: 1076px;
    position: absolute;
    top: 530px
}

.AgricultureA {
    margin: 9px 1672px 6px 0
}

.AgricultureA,
.DefenceA {
    background-color: #00008b;
    border-radius: 7px;
    color: #fff;
    padding: 4px
}

.DefenceA {
    margin: 9px 1715px 6px 0
}

.DimgA {
    border-radius: 12px;
    height: 300px;
    width: 100%
}

.PTagOfA {
    color: #fff;
    font-size: 51px;
    margin: -177px 122px
}

.Fourth,
.PTagOfA {
    background-color: initial
}

.Fourth {
    color: #551313
}

.HeadingOfApplicationGis {
    color: #3aafb9 !important;
    font-family: open sans, sans-serif;
    font-size: min(20vw, 45px);
    left: 49px;
    position: fixed;
    top: 267px
}

.BannerApplication {
    -webkit-animation: rotateImage 5s linear infinite;
    animation: rotateImage 5s linear infinite;
    background-size: cover;
    height: 850px;
    object-fit: cover;
    width: 100%
}

.ParaForApplication {
    background-size: cover;
    background: url(https://static.vecteezy.com/system/resources/previews/030/680/631/non_2x/white-texture-high-quality-free-photo.jpg);
    border: 4px solid #104a86;
    border-radius: 20px 0 20px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-variation-settings: "wdth" var(--text-axis);
    font-weight: 600;
    line-height: revert;
    margin: -50rem 10rem 15px;
    padding: 12px
}

.ApllicationOfAgri {
    color: green;
    font-size: min(4vw, 45px);
    margin-top: 10px;
    text-align: center
}

.ImageOfApplication {
    border: .3px solid #00ced1;
    border-radius: 5px;
    width: 100%
}

.ParaForAGri {
    color: #000;
    font-family: open sans, sans-serif;
    font-size: min(3vw, 18px);
    letter-spacing: normal;
    line-height: normal
}

.ApllicationOfMilitary {
    color: #008b8b
}

.ApllicationOfMilitary,
.ApllicationOfMinning {
    font-size: min(4vw, 45px);
    margin-top: 10px;
    text-align: center
}

.ApllicationOfMinning {
    color: #d2691e
}

.ApllicationOfWater {
    color: teal;
    font-size: min(4vw, 45px);
    margin-top: 10px;
    text-align: center
}

.ParagraphOfFooter {
    font-size: min(3vw, 15px)
}

.fixedWrapper {
    background-attachment: fixed;
    background-position: 50%;
    background-repeat: no-repeat;
    min-height: 700px;
    position: relative;

    &:nth-child(odd) {
        background-color: #c7c4bf
    }

    &:first-child {
        background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/39377/cat1_(1).png");
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%
    }

    &:nth-child(2) {
        background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/39377/cat2_(1).png");
        background-size: 100%
    }

    &:nth-child(3) {
        background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/39377/cat4_(1).png")
    }

    &:nth-child(3),
    &:nth-child(4) {
        background-size: 100%;
        height: 100%
    }

    &:nth-child(4) {
        background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/39377/cat3_(1).png")
    }

    &:nth-child(5) {
        background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/39377/cat5_(1).png")
    }

    &:nth-child(5),
    &:nth-child(6) {
        background-size: 100%;
        height: 100%
    }

    &:nth-child(6) {
        background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/39377/cat6_(1).png")
    }

    &:nth-child(7),
    &:nth-child(8) {
        background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/39377/cat-last_(1).png");
        background-size: 100%;
        height: 100%
    }
}

.contentA {
    background-color: #ffffffad;
    border-radius: 33px;
    color: #0c0000;
    font-family: serif;
    font-size: min(2.5vw, 18px);
    font-style: italic;
    height: 250px;
    left: 0;
    margin: -125px auto 0;
    max-height: 150px;
    overflow-y: auto;
    padding: 14px;
    position: absolute;
    right: 0;
    top: 80%;
    width: 80%
}

@-webkit-keyframes rotateImage {
    0% {
        background-position: 0 0
    }

    50% {
        background-position: 10% 10%
    }

    to {
        background-position: 0 0
    }
}

@keyframes rotateImage {
    0% {
        background-position: 0 0
    }

    50% {
        background-position: 10% 10%
    }

    to {
        background-position: 0 0
    }
}

.contentB {
    border-radius: 33px;
    color: #0c0000;
    font-family: serif;
    font-size: min(1.5vw, 18px);
    font-style: italic;
    height: auto;
    left: 0;
    margin: -125px auto 0;
    max-height: 240px;
    padding: 36px;
    position: absolute;
    right: 0;
    top: 80%;
    width: 75%
}

.background {
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 50%;
    z-index: 1
}

.section {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 2;

    >* {
        width: 50%
    }

    &__img {
        display: flex;
        position: relative;

        &__inner {
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-size: contain;
            height: 100vh;
            left: 10%;
            mix-blend-mode: multiply;
            position: fixed;
            top: 0;
            width: 40%
        }
    }

    &__body {
        align-items: center;
        display: flex;
        position: relative;
        z-index: 100
    }

    &__text {
        padding: 0
    }
}

.section__img__inner {
    background-position: 50% 40%;
    -webkit-filter: blur(30px);
    filter: blur(30px);
    opacity: 0;
    transition: opacity .6s ease, background-position .8s ease, -webkit-filter .6s ease;
    transition: filter .6s ease, opacity .6s ease, background-position .8s ease;
    transition: filter .6s ease, opacity .6s ease, background-position .8s ease, -webkit-filter .6s ease
}

.section.active .section__img__inner {
    background-position: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1
}

.Agri {
    font-size: 50px;
    font-size: min(10vw, 50px);
    left: 86px;
    text-shadow: 8px -8px rgba(71, 61, 139, .568);
    top: -449px
}

.Agri,
.App-button {
    color: #fff !important;
    color: #483d8b;
    position: relative
}

.App-button {
    background-color: #366a8ded;
    border-radius: 20px;
    font-size: min(10vw, 25px);
    margin: 40px 12rem 2px;
    padding: 4px;
    text-align: center;
    top: -79rem;
    width: 45vh
}

.App-Heading {
    color: #fff !important;
    color: #483d8b;
    font-size: 50px;
    letter-spacing: 17.5px;
    margin: 17px 9rem 2px;
    position: relative;
    text-shadow: 8px -8px rgba(71, 61, 139, .568);
    text-transform: uppercase;
    top: -78rem;
    width: 45rem
}

.mINNING:hover {
    background-color: #639;
    color: #000;
    cursor: pointer
}

.App-button:hover {
    background-color: #2580be;
    color: #000;
    cursor: pointer
}

.mINNING {
    background-color: #44acf35e;
    border-radius: 20px;
    color: #fff !important;
    color: #483d8b;
    font-size: 50px;
    font-size: min(10vw, 30px);
    left: 86px;
    margin-right: 86%;
    padding: 6px;
    position: relative;
    text-align: center;
    top: -449px
}

.MoreContent {
    background-color: #4caf50;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none
}

.ApplicationDR {
    color: #00008b;
    font-size: min(25vw, 45px);
    font-weight: 700
}

@media (max-width:768px) {
    .App-Heading {
        font-size: 20px;
        letter-spacing: 10.5px;
        margin: 1px 1rem 2px 4rem;
        top: -46rem;
        width: 24rem
    }

    .App-button {
        font-size: 12px;
        margin: 22px 1rem 2px 6rem;
        top: -46rem;
        width: 26vh
    }

    .BannerApplication {
        height: 613px
    }

    .ParaForApplication {
        font-size: 12px;
        margin: -26rem 2rem 12px
    }
}

@media (min-width:480px) and (max-width:767px) {
    .App-Heading {
        font-size: 29px;
        letter-spacing: 13.5px;
        margin: 3px 2rem 2px 8rem;
        width: 33rem
    }

    .App-button {
        font-size: 17px;
        margin: 20px 4rem 1px 10rem;
        top: -46rem;
        width: 29vh
    }

    .ParaForApplication {
        font-size: 14px;
        margin: -30rem 5rem 12px
    }
}

@media ((min-width:768px) and (max-width:1023px)) {
    .App-Heading {
        font-size: 30px;
        margin: 2px 6rem 3px 5rem;
        top: -66rem;
        width: 37rem
    }

    .App-button {
        font-size: 21px;
        margin: 32px 6rem 2px 10rem;
        top: -66rem;
        width: 30vh
    }

    .ParaForApplication {
        font-size: 16px;
        margin: -39rem 7rem 12px
    }
}

.container1 {
    align-items: center;
    height: 100vh;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%
}

.container1 h1 {
    background: #9c2e2e;
    background: linear-gradient(14deg, #9c2e2e, #c60000);
    border-radius: 0 40px 40px 40px;
    color: #fff;
    font-family: Arial;
    font-size: 5rem;
    font-weight: 900;
    left: 50%;
    letter-spacing: -.1ch;
    padding: 0 15px 5px;
    position: absolute;
    top: 30vh;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.container1 h1 span {
    font-size: 15px
}

.container1 img {
    height: 100%;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.smoke1 {
    opacity: 1;
    width: 200%
}

.smoke2 {
    height: 150%;
    opacity: .5;
    width: 200%
}

.body {
    background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(https://st3.depositphotos.com/1008648/19538/i/450/depositphotos_195386404-stock-photo-globe-network-hologram-with-america.jpg);
    background-attachment: fixed;
    background-size: cover;
    width: 100%
}

.body div {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    font-family: Arial;
    margin: 0 auto;
    max-width: 1200px;
    padding: 30px 0 0
}

.body-1 div {
    flex: 2 1;
    margin: 20px;
    min-width: 300px
}

.body-1 div h1 {
    color: #2e77a6;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative
}

.body-1 div h1:after {
    background: #9c2e2e;
    background: linear-gradient(14deg, #101626, #2e90cd);
    content: "";
    height: 100%;
    left: -1.5ch;
    position: absolute;
    top: 0;
    width: .8ch;
    z-index: 1
}

.body-1 div p {
    color: #e9ecefde;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2rem;
    font-weight: 600
}

.body-1 aside {
    flex: 4 1;
    padding: 20px;
    position: relative
}

.body-1 aside img {
    border-radius: 10px;
    height: 100%;
    min-width: 350px;
    object-fit: cover;
    width: 100%
}

.body-1 aside:after {
    background: #fafafa;
    content: "";
    height: 250%;
    position: absolute;
    right: 0;
    top: -100%;
    width: 100%;
    z-index: -1
}

.body-1 aside p {
    font-family: Times New Roman, Times, serif
}

.body-1 aside a {
    color: #000;
    text-decoration: none
}

.Marsbg {
    background-color: #b6d7ed !important;
    box-shadow: 2px 2px 2px 0 hsla(0, 0%, 47%, .8)
}

.body-2 div {
    flex: 2 1;
    margin: 20px;
    min-width: 300px
}

.body-2 div h1 {
    color: #b1c23b;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
    margin-left: 205px;
    position: relative
}

.body-2 div h1:after {
    background: #9c2e2e;
    background: linear-gradient(14deg, #3b5f37, #849848);
    content: "";
    height: 100%;
    left: 14.2ch;
    position: absolute;
    top: 0;
    width: .8ch;
    z-index: 1
}

.AgriBgborder {
    background-color: #b5c0ae;
    box-shadow: 2px 2px 2px 0 hsla(0, 0%, 47%, .8)
}

.body-2 div p {
    color: #e9ecefde;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: end
}

.body-2 aside {
    flex: 4 1;
    padding: 20px;
    position: relative
}

.body-2 aside img {
    border-radius: 10px;
    height: 100%;
    min-width: 350px;
    object-fit: cover;
    width: 100%
}

.body-2 aside:after {
    background: #fafafa;
    content: "";
    height: 250%;
    position: absolute;
    right: 0;
    top: -100%;
    width: 100%;
    z-index: -1
}

.body-2 aside p {
    font-family: Antonio
}

.body-2 aside a {
    color: grey;
    text-decoration: none
}

.body-3 div {
    flex: 2 1;
    margin: 20px;
    min-width: 300px
}

.body-3 div .water {
    color: #877e55;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
    margin-left: 263px;
    position: relative
}

.body-3 div h1:after {
    background: #9c2e2e;
    background: linear-gradient(14deg, #685f38, #16343c);
    content: "";
    height: 100%;
    left: 10.2ch;
    position: absolute;
    top: 0;
    width: .8ch;
    z-index: 1
}

.Waterbg {
    background-color: #647c87;
    box-shadow: 2px 2px 2px 0 hsla(0, 0%, 47%, .8)
}

.body-3 div p {
    color: #e9ecefde;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: end
}

.body-3 aside {
    flex: 4 1;
    padding: 20px;
    position: relative
}

.body-3 aside img {
    border-radius: 10px;
    height: 100%;
    min-width: 350px;
    object-fit: cover;
    width: 100%
}

.body-3 aside:after {
    background: #fafafa;
    content: "";
    height: 250%;
    position: absolute;
    right: 0;
    top: -100%;
    width: 100%;
    z-index: -1
}

.body-3 aside p {
    font-family: Antonio
}

.body-3 aside a {
    color: grey;
    text-decoration: none
}

.body-4 div {
    flex: 2 1;
    margin: 20px;
    min-width: 300px
}

.body-4 div .Minning {
    color: #886f6b;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative
}

.body-4 div h1:after {
    background: #9c2e2e;
    background: linear-gradient(14deg, #edddd2, #917b72);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: .8ch;
    z-index: 1
}

.body-4 div p {
    color: #e9ecefde;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: start
}

.body-4 aside {
    flex: 4 1;
    padding: 20px;
    position: relative
}

.body-4 aside img {
    border-radius: 10px;
    height: 100%;
    min-width: 350px;
    object-fit: cover;
    width: 100%
}

.body-4 aside:after {
    background: #fafafa;
    content: "";
    height: 250%;
    position: absolute;
    right: 0;
    top: -100%;
    width: 100%;
    z-index: -1
}

.body-4 aside p {
    font-family: Antonio
}

.body-4 aside a {
    color: grey;
    text-decoration: none
}

.MiningbgBorder {
    background-color: #cecac8;
    box-shadow: 2px 2px 2px 0 hsla(0, 0%, 47%, .8)
}

.body-5 div {
    flex: 2 1;
    margin: 20px;
    min-width: 300px
}

.body-5 div h1 {
    color: #458fb1;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative
}

.body-5 div h1:after {
    background: #9c2e2e;
    background: linear-gradient(14deg, #007696, #879fb6);
    content: "";
    height: 100%;
    left: -1.5ch;
    position: absolute;
    top: 0;
    width: .8ch;
    z-index: 1
}

.body-5 div p {
    color: #e9ecefde;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2rem;
    font-weight: 600
}

.body-5 aside {
    flex: 4 1;
    padding: 20px;
    position: relative
}

.body-5 aside img {
    border-radius: 10px;
    height: 100%;
    min-width: 350px;
    object-fit: cover;
    width: 100%
}

.body-5 aside:after {
    background: #fafafa;
    content: "";
    height: 250%;
    position: absolute;
    right: 0;
    top: -100%;
    width: 100%;
    z-index: -1
}

.body-5 aside p {
    font-family: Antonio
}

.body-5 aside a {
    color: grey;
    text-decoration: none
}

.Defencebg {
    background-color: #d3deef;
    box-shadow: 2px 2px 2px 0 hsla(0, 0%, 47%, .8)
}

@media only screen and (max-width:800px) {
    header .left .searchbar {
        margin: 0;
        padding: 0;
        width: 100%
    }

    .middle {
        flex: 0 1
    }

    header nav a {
        font-size: 1rem;
        margin: 0
    }

    .container1 h1 {
        font-size: 3rem
    }
}

#slideshow {
    display: flex;
    height: 100%;
    width: 100%
}

#slides {
    width: 83%;
    z-index: 0
}

#gallery,
#slides {
    overflow: hidden;
    position: relative
}

#gallery {
    width: 17%
}

#gallery img,
#slides img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%
}

.custom-slide {
    height: 100%;
    position: absolute;
    top: 0;
    transition: all .4s linear;
    width: 100%
}

.custom-slide.show {
    opacity: 1;
    z-index: 1000
}

.thumbnail {
    cursor: pointer;
    height: 165px;
    overflow: hidden;
    position: relative
}

.custom-slide-btn {
    align-items: center;
    background: transparent;
    color: #000;
    cursor: pointer;
    display: flex;
    font-size: 40px;
    height: 100%;
    padding: 0 20px;
    position: absolute;
    top: 0;
    transition: all .4s linear;
    z-index: 1000
}

.custom-slide-btn:hover {
    background-color: rgba(0, 0, 0, .5);
    color: #fff
}

.next {
    right: 0
}

.prev {
    left: 0
}

.custom-slide .contentAp {
    background-color: rgba(0, 0, 0, .5);
    bottom: -999px;
    color: #fff;
    left: 0;
    padding: 25px;
    position: absolute;
    transition: bottom .4s ease
}

.custom-slide .title {
    font-weight: 700
}

.custom-slide .contentAp {
    bottom: 0;
    opacity: 1;
    transition: opacity .5s ease, bottom .5s ease
}

.custom-slide:hover .contentAp {
    bottom: 0;
    opacity: .8
}

.thumbnail .title {
    height: 30px;
    left: -999px;
    padding: 0 10px;
    top: 0
}

.thumbnail .description,
.thumbnail .title {
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    display: flex;
    font-size: 12px;
    position: absolute;
    transition: all .4s ease
}

.thumbnail .description {
    bottom: -999px;
    left: 0;
    padding: 10px
}

.thumbnail:hover .title {
    left: 0
}

.thumbnail:hover .description {
    bottom: -12px
}

.thumbnail {
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0
}

@media screen and (max-width:768px) {
    .body-2 div h1 {
        margin-left: 137px
    }

    .body-1 div {
        margin: 0 20px;
        padding-top: 0
    }

    .body-1 div p {
        font-size: 1rem;
        font-weight: 500
    }

    .body-2 div {
        margin: 0 20px;
        padding-top: 0
    }

    .body-2 div p {
        font-size: 1rem;
        font-weight: 500
    }

    .body-3 div {
        margin: 0 20px;
        padding-top: 0
    }

    .body-3 div p {
        font-size: 1rem;
        font-weight: 500
    }

    .body-4 div {
        margin: 0 20px;
        padding-top: 0
    }

    .body-4 div p {
        font-size: 1rem;
        font-weight: 500
    }

    .body-5 div {
        margin: 0 20px;
        padding-top: 0
    }

    .body-5 div p {
        font-size: 1rem;
        font-weight: 500
    }

    .body-3 div .water {
        margin-left: 178px
    }

    #slides {
        width: 100%
    }

    #gallery {
        display: none
    }
}

@media screen and (min-width:769px) and (max-width:1186px) {
    .body-2 div h1 {
        margin-left: 137px
    }

    .body-3 div .water {
        margin-left: 178px
    }

    body-1 div {
        margin: 0 20px;
        padding-top: 0
    }

    .body-1 div p {
        font-size: 1rem;
        font-weight: 500
    }

    .body-2 div {
        margin: 0 20px;
        padding-top: 0
    }

    .body-2 div p {
        font-size: 1rem;
        font-weight: 500
    }

    .body-3 div {
        margin: 0 20px;
        padding-top: 0
    }

    .body-3 div p {
        font-size: 1rem;
        font-weight: 500
    }

    .body-4 div {
        margin: 0 20px;
        padding-top: 0
    }

    .body-4 div p {
        font-size: 1rem;
        font-weight: 500
    }

    .body-5 div {
        margin: 0 20px;
        padding-top: 0
    }

    .body-5 div p {
        font-size: 1rem;
        font-weight: 500
    }
}

@media screen and (max-width:729px) {
    .body-1 div {
        order: 0
    }

    .body-1 aside,
    .body-2 div {
        order: 1
    }

    .body-2 aside {
        order: 2
    }

    .body-3 aside {
        order: 3
    }
}

.custom-slide {
    display: block
}

.custom-slide.show {
    display: block !important
}

.custom-slide:hover {
    opacity: 1
}

.custom-slide {
    opacity: 0
}

@media (min-width:320px) and (max-width:425px) {

    .body-1 aside img,
    .body-2 aside img,
    .body-3 aside img,
    .body-4 aside img,
    .body-5 aside img {
        min-width: 280px;
        width: 100%
    }
}

.response-item {
    background-color: #f5f5f5
}

.SearchDisplayResult {
    display: flex;
    flex: 1 1;
    flex-direction: column
}

.SearchDisplayResultHeader {
    align-items: flex-end;
    background-color: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, .2);
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    padding: 10px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1
}

.SearchDispalyResultPanel,
.SearchDisplayResult {
    color: #041223;
    padding-bottom: 10px
}

.SearchDispalyResultPanelListItem:first-of-type {
    margin-top: 5px
}

.SearchDispalyResultPanelListItem {
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, .2);
    display: flex;
    flex-direction: column;
    font-size: 13px;
    margin: 5px;
    padding: 5px;
    position: relative;
    transition: all .4s ease
}

.SearchDisplayResultPrivewimg {
    align-items: center;
    display: flex;
    flex: 1 1;
    font-style: italic;
    max-width: 64px;
    opacity: .6;
    padding: 0 0 5px;
    text-align: center;
    word-break: break-word
}

.SearchDispalyResultPanelListItemContainer {
    grid-gap: 5px 10px;
    display: grid;
    grid-template-columns: auto auto
}

.SearchDisplayResultDataName {
    word-wrap: anywhere
}

.SearchDisplayResultDetails {
    box-sizing: border-box;
    display: flex;
    flex: 1 1;
    flex-direction: column;
    justify-content: flex-start
}

.SearchDisplayResultContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.SearchDisplayResultContent div {
    padding: 2px 2px 0 0
}

.SearchDisplayResultContent,
.SearchDisplayResultOtherContent {
    display: flex;
    flex-direction: row;
    font-size: 13px;
    padding: 3px 0
}

.visbtn {
    align-self: center;
    font-size: 12px;
    padding: 2px 5px;
    text-align: center
}

.visbtn.small {
    font-size: 10px;
    padding: 6px 10px
}

.visbtn {
    align-items: center;
    background: #845ec2;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 12px;
    text-decoration: none
}

.SearchDisplayResultFooter {
    display: flex;
    flex-direction: row
}

.SearchDisplayResultDataTags {
    display: flex;
    flex-wrap: wrap
}

.SearchDisplayResultDataTag {
    align-content: center;
    align-self: center;
    background-color: #dbdfe3;
    border-radius: 10px;
    color: #041223;
    font-size: 10px;
    font-weight: 700;
    margin: 1px 5px 1px 0;
    padding: 2px 5px;
    text-align: center
}

.SearchDisplayResultButtons {
    fill: #845ec2;
    align-items: center;
    color: #845ec2;
    cursor: pointer;
    display: flex;
    font-size: 14px
}

.SearchDisplayResultFooter>:last-child {
    margin-left: auto
}

.SearchDisplayResultButtons>i {
    font-size: 16px;
    margin: 0 3px;
    width: 20px
}

.newpopup {
    z-index: 9999
}

.newpopup-content {
    background-color: #fefefe;
    border: 1px solid #888;
    margin: 100px auto 2.5%;
    max-width: 1000px;
    padding: 10px;
    width: 80%
}

.newclosebox {
    padding: 2px
}

#SearchCoordinate {
    border: 2px solid #777;
    bottom: 1%;
    display: inline-block;
    font-size: 11px;
    line-height: 70%;
    padding: 4px 10px;
    right: 6%;
    text-shadow: 1px 1px #fff;
    width: 11.5%
}

#autocomplete {
    background-color: #f5f5f5;
    border: 1px solid #8080808a;
    border-radius: 5px;
    font-size: 13px;
    padding: 12px;
    right: 12rem;
    width: 181px
}

#autocomplete,
#search {
    position: fixed;
    top: 11rem
}

#search {
    right: 7.4rem;
    z-index: 500
}

#SearchButton {
    background-color: #f5f5f5;
    border: 1px solid #8080808a;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
    padding: 12px
}

#autocomplete.fade-in {
    -webkit-animation: slideIn .8s ease-in-out forwards;
    animation: slideIn .8s ease-in-out forwards
}

#autocomplete.fade-out {
    -webkit-animation: slideOut .8s ease-in-out forwards;
    animation: slideOut .8s ease-in-out forwards
}

@-webkit-keyframes slideOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    to {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@keyframes slideOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    to {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
}

.mapbox .leaflet-control-attribution {
    font-size: 9px;
    height: 13px;
    right: 69.6vw;
    text-align: center;
    top: -8px
}

.leaflet-control-scale-line {
    background: rgba(2rgb(137, 24, 24)255, 255, .8);
    bottom: -1rem;
    color: #000;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    max-width: 65px;
    padding: 1px 10px;
    position: absolute;
    right: 10%;
    z-index: 999
}

.leaflet-image-layer,
.leaflet-layer,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-pane,
.leaflet-pane>canvas,
.leaflet-pane>svg,
.leaflet-tile,
.leaflet-tile-container,
.leaflet-zoom-box {
    left: 0;
    position: absolute;
    top: 0
}

.leaflet-container {
    overflow: hidden
}

.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none
}

.leaflet-tile::selection {
    background: transparent
}

.leaflet-safari .leaflet-tile {
    image-rendering: -webkit-optimize-contrast
}

.leaflet-safari .leaflet-tile-container {
    height: 1600px;
    -webkit-transform-origin: 0 0;
    width: 1600px
}

.leaflet-marker-icon,
.leaflet-marker-shadow {
    display: block
}

.leaflet-container .leaflet-overlay-pane svg {
    max-height: none !important;
    max-width: none !important
}

.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
    max-height: none !important;
    max-width: none !important;
    padding: 0;
    width: auto
}

.leaflet-container img.leaflet-tile {
    mix-blend-mode: plus-lighter
}

.leaflet-container.leaflet-touch-zoom {
    touch-action: pan-x pan-y
}

.leaflet-container.leaflet-touch-drag {
    touch-action: none;
    touch-action: pinch-zoom
}

.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
    touch-action: none
}

.leaflet-container {
    -webkit-tap-highlight-color: transparent
}

.leaflet-container a {
    -webkit-tap-highlight-color: rgba(51, 181, 229, .4)
}

.leaflet-tile {
    -webkit-filter: inherit;
    filter: inherit;
    visibility: hidden
}

.leaflet-tile-loaded {
    visibility: inherit
}

.leaflet-zoom-box {
    box-sizing: border-box;
    height: 0;
    width: 0;
    z-index: 800
}

.leaflet-overlay-pane svg {
    -moz-user-select: none
}

.leaflet-pane {
    z-index: 400
}

.leaflet-tile-pane {
    z-index: 200
}

.leaflet-overlay-pane {
    z-index: 400
}

.leaflet-shadow-pane {
    z-index: 500
}

.leaflet-marker-pane {
    z-index: 600
}

.leaflet-tooltip-pane {
    z-index: 650
}

.leaflet-popup-pane {
    z-index: 700
}

.leaflet-map-pane canvas {
    z-index: 100
}

.leaflet-map-pane svg {
    z-index: 200
}

.leaflet-vml-shape {
    height: 1px;
    width: 1px
}

.lvml {
    behavior: url(#default#VML);
    display: inline-block;
    position: absolute
}

.leaflet-control {
    pointer-events: visiblePainted;
    pointer-events: auto;
    position: relative;
    z-index: 800
}

.leaflet-bottom,
.leaflet-top {
    pointer-events: none;
    position: absolute;
    z-index: 1000
}

.leaflet-top {
    top: 0
}

.leaflet-right {
    right: 0
}

.leaflet-bottom {
    bottom: 0
}

.leaflet-left {
    left: 0
}

.leaflet-control {
    clear: both;
    float: left
}

.leaflet-right .leaflet-control {
    float: right
}

.leaflet-top .leaflet-control {
    margin-top: 10px
}

.leaflet-bottom .leaflet-control {
    margin-bottom: 10px
}

.leaflet-left .leaflet-control {
    margin-left: 10px
}

.leaflet-right .leaflet-control {
    margin-right: 10px
}

.leaflet-fade-anim .leaflet-popup {
    opacity: 0;
    transition: opacity .2s linear
}

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
    opacity: 1
}

.leaflet-zoom-animated {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

svg.leaflet-zoom-animated {
    will-change: transform
}

.leaflet-zoom-anim .leaflet-zoom-animated {
    transition: -webkit-transform .25s cubic-bezier(0, 0, .25, 1);
    transition: transform .25s cubic-bezier(0, 0, .25, 1);
    transition: transform .25s cubic-bezier(0, 0, .25, 1), -webkit-transform .25s cubic-bezier(0, 0, .25, 1)
}

.leaflet-pan-anim .leaflet-tile,
.leaflet-zoom-anim .leaflet-tile {
    transition: none
}

.leaflet-zoom-anim .leaflet-zoom-hide {
    visibility: hidden
}

.leaflet-interactive {
    cursor: pointer
}

.leaflet-grab {
    cursor: grab
}

.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
    cursor: crosshair
}

.leaflet-control,
.leaflet-popup-pane {
    cursor: auto
}

.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
    cursor: move;
    cursor: grabbing
}

.leaflet-image-layer,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-pane>svg path,
.leaflet-tile-container {
    pointer-events: none
}

.leaflet-image-layer.leaflet-interactive,
.leaflet-marker-icon.leaflet-interactive,
.leaflet-pane>svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
    pointer-events: visiblePainted;
    pointer-events: auto
}

.leaflet-container {
    background: #ddd;
    outline-offset: 1px
}

.leaflet-container a {
    color: #0078a8
}

.leaflet-zoom-box {
    background: hsla(0, 0%, 100%, .5);
    border: 2px dotted #38f
}

.leaflet-container {
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-size: .75rem;
    line-height: 1.5
}

.leaflet-bar {
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .65)
}

.leaflet-bar a {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    color: #000;
    display: block;
    height: 26px;
    line-height: 26px;
    text-align: center;
    text-decoration: none;
    width: 26px
}

.leaflet-bar a,
.leaflet-control-layers-toggle {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block
}

.leaflet-bar a:focus,
.leaflet-bar a:hover {
    background-color: #f4f4f4
}

.leaflet-bar a:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

.leaflet-bar a:last-child {
    border-bottom: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

.leaflet-bar a.leaflet-disabled {
    background-color: #f4f4f4;
    color: #bbb;
    cursor: default
}

.leaflet-touch .leaflet-bar a {
    height: 30px;
    line-height: 30px;
    width: 30px
}

.leaflet-touch .leaflet-bar a:first-child {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px
}

.leaflet-touch .leaflet-bar a:last-child {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    font: 700 18px Lucida Console, Monaco, monospace;
    text-indent: 1px
}

.leaflet-touch .leaflet-control-zoom-in,
.leaflet-touch .leaflet-control-zoom-out {
    font-size: 22px
}

.leaflet-control-layers {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .4)
}

.leaflet-control-layers-toggle {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
    height: 36px;
    width: 36px
}

.leaflet-retina .leaflet-control-layers-toggle {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
    background-size: 26px 26px
}

.leaflet-touch .leaflet-control-layers-toggle {
    height: 44px;
    width: 44px
}

.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    display: none
}

.leaflet-control-layers-expanded .leaflet-control-layers-list {
    display: block;
    position: relative
}

.leaflet-control-layers-expanded {
    background: #fff;
    color: #333;
    padding: 6px 10px 6px 6px
}

.leaflet-control-layers-scrollbar {
    overflow-x: hidden;
    overflow-y: scroll;
    padding-right: 5px
}

.leaflet-control-layers-selector {
    margin-top: 2px;
    position: relative;
    top: 1px
}

.leaflet-control-layers label {
    display: block;
    font-size: 13px;
    font-size: 1.08333em
}

.leaflet-control-layers-separator {
    border-top: 1px solid #ddd;
    height: 0;
    margin: 5px -10px 5px -6px
}

.leaflet-default-icon-path {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=)
}

.leaflet-container .leaflet-control-attribution {
    background: #fff;
    background: hsla(0, 0%, 100%, .8);
    margin: 0
}

.leaflet-control-attribution,
.leaflet-control-scale-line {
    color: #333;
    line-height: 1.4;
    padding: 0 5px
}

.leaflet-control-attribution a {
    text-decoration: none
}

.leaflet-control-attribution a:focus,
.leaflet-control-attribution a:hover {
    text-decoration: underline
}

.leaflet-attribution-flag {
    display: inline !important;
    height: .6669em;
    vertical-align: initial !important;
    width: 1em
}

.leaflet-left .leaflet-control-scale {
    margin-left: 5px
}

.leaflet-bottom .leaflet-control-scale {
    margin-bottom: 5px
}

.leaflet-control-scale-line {
    background: hsla(0, 0%, 100%, .8);
    border: 2px solid #777;
    border-top: none;
    box-sizing: border-box;
    line-height: 1.1;
    padding: 2px 5px 1px;
    text-shadow: 1px 1px #fff;
    white-space: nowrap
}

.leaflet-control-scale-line:not(:first-child) {
    border-bottom: none;
    border-top: 2px solid #777;
    margin-top: -2px
}

.leaflet-control-scale-line:not(:first-child):not(:last-child) {
    border-bottom: 2px solid #777
}

.leaflet-touch .leaflet-bar,
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers {
    box-shadow: none
}

.leaflet-touch .leaflet-bar,
.leaflet-touch .leaflet-control-layers {
    background-clip: padding-box;
    border: 2px solid rgba(0, 0, 0, .2)
}

.leaflet-popup {
    margin-bottom: 20px;
    position: absolute;
    text-align: center
}

.leaflet-popup-content-wrapper {
    border-radius: 12px;
    padding: 1px;
    text-align: left
}

.leaflet-popup-content {
    font-size: 13px;
    font-size: 1.08333em;
    line-height: 1.3;
    margin: 13px 24px 13px 20px;
    min-height: 1px
}

.leaflet-popup-content p {
    margin: 1.3em 0
}

.leaflet-popup-tip-container {
    height: 20px;
    left: 50%;
    margin-left: -20px;
    margin-top: -1px;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    width: 40px
}

.leaflet-popup-tip {
    height: 17px;
    margin: -10px auto 0;
    padding: 1px;
    pointer-events: auto;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 17px
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: #fff;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .4);
    color: #333
}

.leaflet-container a.leaflet-popup-close-button {
    background: transparent;
    border: none;
    color: #757575;
    font: 16px/24px Tahoma, Verdana, sans-serif;
    height: 24px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 24px
}

.leaflet-container a.leaflet-popup-close-button:focus,
.leaflet-container a.leaflet-popup-close-button:hover {
    color: #585858
}

.leaflet-popup-scrolled {
    overflow: auto
}

.leaflet-oldie .leaflet-popup-content-wrapper {
    -ms-zoom: 1
}

.leaflet-oldie .leaflet-popup-tip {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
    margin: 0 auto;
    width: 24px
}

.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
    border: 1px solid #999
}

.leaflet-div-icon {
    background: #fff;
    border: 1px solid #666
}

.leaflet-tooltip {
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    color: #222;
    padding: 6px;
    pointer-events: none;
    position: absolute;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap
}

.leaflet-tooltip.leaflet-interactive {
    cursor: pointer;
    pointer-events: auto
}

.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before,
.leaflet-tooltip-top:before {
    background: transparent;
    border: 6px solid transparent;
    content: "";
    pointer-events: none;
    position: absolute
}

.leaflet-tooltip-bottom {
    margin-top: 6px
}

.leaflet-tooltip-top {
    margin-top: -6px
}

.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
    left: 50%;
    margin-left: -6px
}

.leaflet-tooltip-top:before {
    border-top-color: #fff;
    bottom: 0;
    margin-bottom: -12px
}

.leaflet-tooltip-bottom:before {
    border-bottom-color: #fff;
    margin-left: -6px;
    margin-top: -12px;
    top: 0
}

.leaflet-tooltip-left {
    margin-left: -6px
}

.leaflet-tooltip-right {
    margin-left: 6px
}

.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
    margin-top: -6px;
    top: 50%
}

.leaflet-tooltip-left:before {
    border-left-color: #fff;
    margin-right: -12px;
    right: 0
}

.leaflet-tooltip-right:before {
    border-right-color: #fff;
    left: 0;
    margin-left: -12px
}

@media print {
    .leaflet-control {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact
    }
}

.marker-icon,
.marker-icon:focus {
    background-color: #fff;
    border: 1px solid #38f;
    border-radius: 50%;
    height: 14px !important;
    margin: -8px 0 0 -8px !important;
    outline: 0;
    transition: opacity .3s ease;
    width: 14px !important
}

.marker-icon-middle,
.marker-icon-middle:focus {
    height: 10px !important;
    margin: -6px 0 0 -6px !important;
    opacity: .7;
    width: 10px !important
}

.leaflet-pm-draggable {
    cursor: move !important
}

.cursor-marker {
    cursor: crosshair;
    opacity: 0;
    pointer-events: none
}

.cursor-marker.visible {
    opacity: 1 !important
}

.geoman-draw-cursor {
    cursor: crosshair
}

.rect-start-marker,
.rect-style-marker {
    opacity: 0
}

.rect-start-marker.visible,
.rect-style-marker.visible {
    opacity: 1 !important
}

.vertexmarker-disabled {
    opacity: .7
}

.pm-text-marker {
    height: 0;
    width: 0
}

.pm-textarea {
    background-color: #fff;
    border: none;
    border-radius: 3px;
    color: #000;
    cursor: pointer;
    outline: 0;
    padding-bottom: 0;
    padding-left: 7px;
    padding-top: 4px;
    resize: none
}

.leaflet-pm-draggable .pm-textarea {
    cursor: move
}

.pm-textarea:active,
.pm-textarea:focus,
.pm-textarea:focus-visible,
.pm-textarea:focus-within {
    border: 2px solid #000;
    outline: 0
}

.pm-textarea.pm-disabled {
    border: none;
    -webkit-user-select: none;
    user-select: none
}

.pm-textarea.pm-hasfocus {
    cursor: auto
}

.leaflet-pm-toolbar .leaflet-buttons-control-button {
    box-sizing: border-box;
    padding: 5px;
    position: relative;
    z-index: 3
}

.leaflet-pm-toolbar .button-container a.leaflet-buttons-control-button,
.leaflet-pm-toolbar .leaflet-pm-actions-container a.leaflet-pm-action:first-child:not(.pos-right),
.leaflet-pm-toolbar .leaflet-pm-actions-container a.leaflet-pm-action:last-child.pos-right {
    border-radius: 0
}

.leaflet-pm-toolbar .button-container:last-child a.leaflet-buttons-control-button {
    border-radius: 0 0 2px 2px
}

.leaflet-pm-toolbar .button-container:first-child a.leaflet-buttons-control-button {
    border-radius: 2px 2px 0 0
}

.leaflet-pm-toolbar .button-container:last-child a.leaflet-buttons-control-button {
    border-bottom: none
}

.leaflet-pm-toolbar .control-fa-icon {
    font-size: 19px;
    line-height: 24px
}

.leaflet-pm-toolbar .control-icon {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    height: 100%;
    width: 100%
}

.leaflet-pm-toolbar .leaflet-pm-icon-marker {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik0xNS41IDI0Ljg3OGMtLjIxIDAtLjMyNi0uMDMxLS44NC0uNjQzQzEwLjIyIDE5LjQxMiA4IDE1LjUwMSA4IDEyLjUwNUE3LjUwMiA3LjUwMiAwIDAgMSAxNS41IDVjNC4xNDIgMCA3LjUgMy4zNiA3LjUgNy41MDQgMCA0LjQ5Ni00LjcxMiA5LjQyMy02LjY2NiAxMS43NC0uNTEyLjYwNi0uNjI1LjYzNS0uODM0LjYzNFptMC05LjM0NWMxLjc3NSAwIDMuMjE0LTEuNDE1IDMuMjE0LTMuMTZzLTEuNDM5LTMuMTYtMy4yMTQtMy4xNi0zLjIxNCAxLjQxNS0zLjIxNCAzLjE2IDEuNDM5IDMuMTYgMy4yMTQgMy4xNloiIGlkPSJhIi8+PC9kZWZzPjx1c2UgZmlsbD0iIzVCNUI1QiIgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMgLTMpIi8+PC9zdmc+)
}

.leaflet-pm-toolbar .leaflet-pm-icon-polygon {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJNMTkuNDIgOS4xNjVhMy41IDMuNSAwIDEgMSAzLjU4IDEuOHY4LjA3QTMuNSAzLjUgMCAxIDEgMTkuMDM1IDIzaC04LjA3YTMuNSAzLjUgMCAxIDEtMS44LTMuNThMMTkuNDIxIDkuMTY2Wm0xLjQxNSAxLjQxNEwxMC41NzkgMjAuODM1Yy4wMy4wNTQuMDU4LjExLjA4NC4xNjVoOC42NzRBMy41MTQgMy41MTQgMCAwIDEgMjEgMTkuMzM3di04LjY3NGEzLjQ4OCAzLjQ4OCAwIDAgMS0uMTY1LS4wODRaTTIyLjUgOWExLjUgMS41IDAgMSAwIDAtMyAxLjUgMS41IDAgMCAwIDAgM1ptMCAxNWExLjUgMS41IDAgMSAwIDAtMyAxLjUgMS41IDAgMCAwIDAgM1ptLTE1IDBhMS41IDEuNSAwIDEgMCAwLTMgMS41IDEuNSAwIDAgMCAwIDNaIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMgLTMpIj48bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYSIvPjwvbWFzaz48dXNlIGZpbGw9IiM1QjVCNUIiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2EiLz48ZyBmaWxsPSIjNUI1QjVCIiBtYXNrPSJ1cmwoI2IpIj48cGF0aCBkPSJNMCAwaDMwdjMwSDB6Ii8+PC9nPjwvZz48L3N2Zz4=)
}

.leaflet-pm-toolbar .leaflet-pm-icon-polyline {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJtOS4xNjUgMTkuNDIgOS4yNTYtOS4yNTVhMy41IDMuNSAwIDEgMSAxLjQxNCAxLjQxNGwtOS4yNTYgOS4yNTZhMy41IDMuNSAwIDEgMS0xLjQxNC0xLjQxNFpNMjEuNSAxMGExLjUgMS41IDAgMSAwIDAtMyAxLjUgMS41IDAgMCAwIDAgM1ptLTE0IDE0YTEuNSAxLjUgMCAxIDAgMC0zIDEuNSAxLjUgMCAwIDAgMCAzWiIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zIC0zKSI+PG1hc2sgaWQ9ImIiIGZpbGw9IiNmZmYiPjx1c2UgeGxpbms6aHJlZj0iI2EiLz48L21hc2s+PHVzZSBmaWxsPSIjNUI1QjVCIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHhsaW5rOmhyZWY9IiNhIi8+PGcgZmlsbD0iIzVCNUI1QiIgbWFzaz0idXJsKCNiKSI+PHBhdGggZD0iTTAgMGgzMHYzMEgweiIvPjwvZz48L2c+PC9zdmc+)
}

.leaflet-pm-toolbar .leaflet-pm-icon-circle {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik0xOC4yOSA2Ljc4NmEzLjUgMy41IDAgMCAxIDQuOTI0IDQuOTI0QTkuNDY4IDkuNDY4IDAgMCAxIDI0IDE1LjUgOS41IDkuNSAwIDEgMSAxNC41IDZjMS4zNDcgMCAyLjYyOS4yOCAzLjc5Ljc4NlptLTEuMTQgMS42OTZhNy41IDcuNSAwIDEgMCA0LjM2OCA0LjM2OCAzLjUgMy41IDAgMCAxLTQuMzY4LTQuMzY4Wk0xNC41IDE3YTEuNSAxLjUgMCAxIDEgMC0zIDEuNSAxLjUgMCAwIDEgMCAzWm02LTZhMS41IDEuNSAwIDEgMCAwLTMgMS41IDEuNSAwIDAgMCAwIDNaIiBpZD0iYSIvPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMyAtMykiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PG1hc2sgaWQ9ImIiIGZpbGw9IiNmZmYiPjx1c2UgeGxpbms6aHJlZj0iI2EiLz48L21hc2s+PHVzZSBmaWxsPSIjNUI1QjVCIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHhsaW5rOmhyZWY9IiNhIi8+PGcgbWFzaz0idXJsKCNiKSIgZmlsbD0iIzVCNUI1QiI+PHBhdGggZD0iTTAgMGgzMHYzMEgweiIvPjwvZz48L2c+PC9zdmc+)
}

.leaflet-pm-toolbar .leaflet-pm-icon-circle-marker {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM1QjVCNUIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMzUiLz48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIzIiBmaWxsPSIjNUI1QjVCIi8+PC9zdmc+)
}

.leaflet-pm-toolbar .leaflet-pm-icon-rectangle {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJNMjMgMTAuOTY1djguMDdBMy41IDMuNSAwIDEgMSAxOS4wMzUgMjNoLTguMDdBMy41IDMuNSAwIDEgMSA3IDE5LjAzNXYtOC4wN0EzLjUgMy41IDAgMSAxIDEwLjk2NSA3aDguMDdBMy41IDMuNSAwIDEgMSAyMyAxMC45NjVabS0yLS4zMDJBMy41MTQgMy41MTQgMCAwIDEgMTkuMzM3IDloLTguNjc0QTMuNTE0IDMuNTE0IDAgMCAxIDkgMTAuNjYzdjguNjc0QTMuNTE0IDMuNTE0IDAgMCAxIDEwLjY2MyAyMWg4LjY3NEEzLjUxNCAzLjUxNCAwIDAgMSAyMSAxOS4zMzd2LTguNjc0Wk03LjUgOWExLjUgMS41IDAgMSAwIDAtMyAxLjUgMS41IDAgMCAwIDAgM1ptMTUgMGExLjUgMS41IDAgMSAwIDAtMyAxLjUgMS41IDAgMCAwIDAgM1ptMCAxNWExLjUgMS41IDAgMSAwIDAtMyAxLjUgMS41IDAgMCAwIDAgM1ptLTE1IDBhMS41IDEuNSAwIDEgMCAwLTMgMS41IDEuNSAwIDAgMCAwIDNaIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMgLTMpIj48bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYSIvPjwvbWFzaz48dXNlIGZpbGw9IiM1QjVCNUIiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2EiLz48ZyBmaWxsPSIjNUI1QjVCIiBtYXNrPSJ1cmwoI2IpIj48cGF0aCBkPSJNMCAwaDMwdjMwSDB6Ii8+PC9nPjwvZz48L3N2Zz4=)
}

.leaflet-pm-toolbar .leaflet-pm-icon-delete {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Im0xNy43ODcgMTguNDgxLTYuMTM5LTUuMTMxLTUuMjQzIDYuMDMyIDQuMTQ5IDMuNjA2aDMuMzE1bDMuOTE4LTQuNTA3Wm0tMS4yOCA0LjUwN0gyNnYySDkuODA3bC00LjcxNC00LjA5N2EyIDIgMCAwIDEtLjE5OC0yLjgyMkwxNi4wNDggNS4yNGEyIDIgMCAwIDEgMi44MjItLjE5N2w2LjAzNyA1LjI0OWEyIDIgMCAwIDEgLjE5OCAyLjgyMWwtOC41OTggOS44NzZaIiBpZD0iYSIvPjwvZGVmcz48dXNlIGZpbGw9IiM1QjVCNUIiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2EiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zIC0zKSIvPjwvc3ZnPg==)
}

.leaflet-pm-toolbar .leaflet-pm-icon-edit {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJNMTMuNSAxMWEzLjUgMy41IDAgMSAxIDAtNyAzLjUgMy41IDAgMCAxIDAgN1ptMC0yYTEuNSAxLjUgMCAxIDAgMC0zIDEuNSAxLjUgMCAwIDAgMCAzWk0xMiA3LjUzYTEuNSAxLjUgMCAwIDAgLjk4IDEuMzc4TDMgMTV2LTJsOS01LjQ3Wm0yLjIxNy0xLjM0OEwxOS40NTMgM2gzLjIwNmwtNy42NyA0LjY4MmExLjUgMS41IDAgMCAwLS43NzItMS41Wm05LjIyNiAxMy4xMDNoLTMuMzE1bDEuNzQ1IDQuMjVhLjU4LjU4IDAgMCAxLS4yOTUuNzVsLTEuNTM3LjY3YS41NTMuNTUzIDAgMCAxLS43MjktLjMwNGwtMS42NTgtNC4wMzYtMi43MDggMi43ODZjLS4zNi4zNzEtLjk0Ni4wODUtLjk0Ni0uNDAyVjkuNTcyYzAtLjUxMy42MjMtLjc2My45NDYtLjQwMmw4Ljg4OCA5LjE0MmMuMzU5LjM1LjA5NC45NzMtLjM5Ljk3M1oiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMyAtMykiPjxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNhIi8+PC9tYXNrPjx1c2UgZmlsbD0iIzVCNUI1QiIgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYSIvPjxnIGZpbGw9IiM1QjVCNUIiIG1hc2s9InVybCgjYikiPjxwYXRoIGQ9Ik0wIDBoMzB2MzBIMHoiLz48L2c+PC9nPjwvc3ZnPg==)
}

.leaflet-pm-toolbar .leaflet-pm-icon-drag {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJNMjEgMTR2LTRsNiA1LTYgNXYtNGgtNXY1aDRsLTUgNi01LTZoNHYtNUg5djRsLTYtNSA2LTV2NGg1VjloLTRsNS02IDUgNmgtNHY1aDVaIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMgLTMpIj48bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYSIvPjwvbWFzaz48dXNlIGZpbGw9IiNEOEQ4RDgiIHhsaW5rOmhyZWY9IiNhIi8+PGcgZmlsbD0iIzVCNUI1QiIgbWFzaz0idXJsKCNiKSI+PHBhdGggZD0iTTAgMGgzMHYzMEgweiIvPjwvZz48L2c+PC9zdmc+)
}

.leaflet-pm-toolbar .leaflet-pm-icon-cut {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Im0xMi45NyAxMy40OTQgOC4wNjItNy45NTIgMi40MzMuMTM1LTYuNDE4IDguODM0IDEwLjUxOSAyLjYyMi0xLjc3NyAxLjY2OC0xMS4yMDQtLjkwMi0uOTM2IDEuMjg5YTMuNSAzLjUgMCAxIDEtMi4yMTUtLjM1NGwxLjI0Ny0xLjcxNi0uMTU3LS43NDMtLjU3My0xLjA3NC0yLjA1OC0uNTEzYTMuNSAzLjUgMCAxIDEgMS40NjktMS42OTVsMS42MDcuNFptLTUuMjEyLS4yNjlhMS41IDEuNSAwIDEgMCAuNzI2LTIuOTEgMS41IDEuNSAwIDAgMC0uNzI2IDIuOTFabTMuMDQ1IDguMTc4YTEuNSAxLjUgMCAxIDAgMi40MjcgMS43NjMgMS41IDEuNSAwIDAgMC0yLjQyNy0xLjc2M1oiIGlkPSJhIi8+PC9kZWZzPjx1c2UgZmlsbD0iIzVCNUI1QiIgZmlsbC1ydWxlPSJub256ZXJvIiB0cmFuc2Zvcm09InJvdGF0ZSgtMzIgOS4zNjIgMTkuMzk0KSIgeGxpbms6aHJlZj0iI2EiLz48L3N2Zz4=)
}

.leaflet-pm-toolbar .leaflet-pm-icon-snapping {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik0yMiAxMC45NDN2Ni4zODRDMjIgMjEuNTY1IDE4LjY0MiAyNSAxNC41IDI1IDEwLjM1OCAyNSA3IDIxLjU2NSA3IDE3LjMyN1YxMC45OWw0LjAwMi4wMDctLjAwMSAyLjE1N0wxMSAxNy4zMjdDMTEgMTkuMzc2IDEyLjU4OCAyMSAxNC41IDIxczMuNS0xLjYyNCAzLjUtMy42NzNsLS4wMDEtNi4zMzYgNC0uMDQ4Wk0xMCA3YTEgMSAwIDAgMSAxIDF2Mkg3VjhhMSAxIDAgMCAxIDEtMWgyWm0xMSAwYTEgMSAwIDAgMSAxIDF2MmgtNFY4YTEgMSAwIDAgMSAxLTFoMloiIGlkPSJhIi8+PC9kZWZzPjx1c2UgZmlsbD0iIzVCNUI1QiIgZmlsbC1ydWxlPSJub256ZXJvIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAxNi42MjEgMTAuODc5KSIgeGxpbms6aHJlZj0iI2EiLz48L3N2Zz4=)
}

.leaflet-pm-toolbar .leaflet-pm-icon-rotate {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJNMjEuMiA1LjhjLS4xLS4yLS4yLS4zLS4zLS41bC0uMS0uMmMtLjEtLjItLjItLjMtLjMtLjVsLS4xLS4yYy0uMS0uMi0uMi0uMy0uNC0uNWwtLjItLjNMMjIuNi41IDE4IC42bC00LjYuMS41IDQuNS41IDQuNSAzLjItMy42di4xbC4xLjJjLjEuMS4xLjIuMi4ybC4xLjJjMCAuMiAwIC4zLjEuNC4zLjcuNiAxLjQuNyAyLjEuMiAxLjQgMCAyLjktLjYgNC4ybC0uMi40LS4xLjEtLjMuNS0uMS4yYy0uMi4yLS40LjUtLjYuNy0uNS41LTEuMSAxLTEuNyAxLjMtLjYuNC0xLjMuNi0yLjEuOC0uNy4xLTEuNS4yLTIuMi4xLS44LS4xLTEuNS0uMy0yLjItLjUtLjctLjMtMS4zLS43LTEuOS0xLjJsLS40LS40LS4yLS4zTDYgMTVjLS4xLS4xLS4yLS4yLS4yLS4zbC0uMy0uNC0uMS0uMS0uMi0uNGMwLS4xLS4xLS4xLS4xLS4ybC0uMy0uNS0uMS0uMi0uMy0uOWMtLjItLjgtLjMtMS42LS4zLTIuNHYtLjdjMC0uMiAwLS4zLjEtLjRsLjEtLjYuMi0uNmMuMy0uOC43LTEuNSAxLjItMi4yLjUtLjcgMS4xLTEuMyAxLjgtMS44LjItLjEuMy0uNC4xLS42LS4xLS4xLS4yLS4yLS4zLS4yaC0uMmwtLjEuMWMtLjkuNC0xLjYgMS0yLjMgMS42QzQgNC45IDMuNSA1LjcgMyA2LjZjLS45IDEuOC0xLjIgMy44LS44IDUuOC4xLjUuMi45LjMgMS40bC4zLjhjLjEuMS4yLjIuMi40bC4yLjRjMCAuMS4xLjIuMS4ybC4zLjVjLjEuMi4yLjMuMy41bC4xLjJjLjEuMS4yLjMuMy40bC43LjZjLjcuNyAxLjYgMS4zIDIuNSAxLjguOS41IDEuOS44IDMgLjkuNS4xIDEgLjEgMS41LjEuNiAwIDEuMSAwIDEuNi0uMSAxLS4yIDIuMS0uNSAzLTFsLjItLjFjLjItLjEuMy0uMi41LS4zbC43LS40Yy4yLS4xLjMtLjIuNC0uM2wuMi0uMmMuMi0uMS40LS4zLjUtLjVsLjEtLjFjLjMtLjMuNy0uNy45LTFsLjYtLjkuNC0uNmMxLTEuOSAxLjQtNC4xIDEuMS02LjItLjItMS4xLS41LTIuMi0xLTMuMXoiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDIpIj48bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYSIvPjwvbWFzaz48dXNlIGZpbGw9IiM1QjVCNUIiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2EiLz48ZyBmaWxsPSIjNUI1QjVCIiBtYXNrPSJ1cmwoI2IpIj48cGF0aCBkPSJNMCAwaDMwdjMwSDB6Ii8+PC9nPjwvZz48L3N2Zz4=)
}

.leaflet-pm-toolbar .leaflet-pm-icon-text {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzViNWI1YjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjIuNXB4IiBkPSJNMTkuNjQgNy4yN1Y0SDEydjE2aDMuOTEtNy44MkgxMlY0SDQuMzZ2My4yNyIgZGF0YS1uYW1lPSJFYmVuZSAyIi8+PC9zdmc+)
}

.leaflet-buttons-control-button:focus,
.leaflet-buttons-control-button:hover {
    background-color: #f4f4f4;
    cursor: pointer
}

.active>.leaflet-buttons-control-button {
    box-shadow: inset 0 -1px 5px 2px rgba(81, 77, 77, .31)
}

.leaflet-buttons-control-text-hide {
    display: none
}

.button-container {
    position: relative
}

.button-container .leaflet-pm-actions-container {
    direction: ltr;
    display: none;
    left: 100%;
    position: absolute;
    top: 0;
    white-space: nowrap;
    z-index: 2
}

.leaflet-right .leaflet-pm-toolbar .button-container .leaflet-pm-actions-container {
    left: auto;
    right: 100%
}

.button-container.active .leaflet-pm-actions-container {
    display: block
}

.button-container .leaflet-pm-actions-container:not(.pos-right) a.leaflet-pm-action:last-child {
    border-radius: 0 3px 3px 0;
    border-right: 0
}

.button-container .leaflet-pm-actions-container.pos-right a.leaflet-pm-action:first-child {
    border-radius: 3px 0 0 3px
}

.button-container .leaflet-pm-actions-container.pos-right a.leaflet-pm-action:last-child {
    border-right: 0
}

.button-container .leaflet-pm-actions-container .leaflet-pm-action {
    background-color: #666;
    border-bottom: none;
    border-right: 1px solid #eee;
    color: #fff;
    display: inline-block;
    height: 29px;
    line-height: 29px;
    padding: 0 10px;
    -webkit-user-select: none;
    user-select: none;
    width: auto
}

.leaflet-pm-toolbar .button-container:first-child.pos-right.active a.leaflet-buttons-control-button {
    border-top-left-radius: 0
}

.leaflet-pm-toolbar .button-container:first-child.active:not(.pos-right) a.leaflet-buttons-control-button {
    border-top-right-radius: 0
}

.button-container .leaflet-pm-actions-container .leaflet-pm-action:focus,
.button-container .leaflet-pm-actions-container .leaflet-pm-action:hover {
    background-color: #777;
    cursor: pointer
}

.leaflet-pm-toolbar.activeChild {
    z-index: 801
}

.leaflet-buttons-control-button.pm-disabled {
    background-color: #f4f4f4
}

.leaflet-buttons-control-button.pm-disabled>.control-icon {
    -webkit-filter: opacity(.6);
    filter: opacity(.6)
}

.otpPage {
    margin-top: 120px
}

.Input-Field-Label {
    color: #555;
    font-size: 1.5rem
}

.uforms {
    background-color: hsla(0, 0%, 100%, .03);
    border: none;
    border-radius: 8px;
    max-width: 600px;
    padding: 20px
}

.uforgotforms,
.uforms {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px !important;
    outline: none;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%
}

.uforgotforms {
    border: none;
    border-radius: 12px;
    max-width: 536px
}

.Input-Field:disabled {
    border: 1px solid #eee;
    cursor: not-allowed
}

.formTitlechange {
    color: #2f2d3b;
    font-size: min(4vw, 28px);
    font-weight: 600;
    margin-top: 0;
    text-align: center
}

.inputDiv {
    margin: 14px
}

.EnterOtp-div,
.inputDiv {
    display: flex;
    flex-direction: column
}

.EnterOtp-div {
    margin: 0 14px 14px
}

.formTitle {
    color: #2f2d3b;
    font-size: min(5vw, 24px);
    font-weight: 600;
    text-align: center
}

.LogoForgot {
    background: transparent;
    color: #fff;
    font-size: min(10vw, 48px);
    text-align: center
}

.mainDiv {
    align-items: center;
    background-color: #f9f9f9;
    display: flex;
    font-family: Open Sans, sans-serif;
    justify-content: center;
    min-height: 100%
}

.cardStyle {
    border-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .25);
    margin: 0;
    padding: 16px 18px;
    width: 100%
}

.submitButton {
    background-color: #065492;
    border-color: #065492;
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .035);
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: min(3vw, 15px);
    height: 25%;
    margin: auto;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
    width: 50%
}

.submitButton:disabled,
button[disabled] {
    background-color: #ccc;
    border: 1px solid #ccc;
    color: #666
}

.buttonWrapper {
    cursor: pointer;
    margin-top: 30px
}

.OTPFORm {
    background-color: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(8, 7, 16, .6);
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px !important;
    max-width: 536px;
    outline: none;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%
}

.LogoForgotOTP {
    background: transparent;
    color: #fff;
    left: 55px;
    top: 6px
}

.Otptime {
    font-size: min(4vw, 12px)
}

.Otpbutton {
    font-size: min(4vw, 14px);
    width: auto
}

.Otp-Input-Box {
    display: flex;
    justify-content: space-around
}

.Otp-Label {
    font-size: 20px
}

.Otp-input-field {
    font-size: 20px;
    height: 50px;
    margin: 13px;
    text-align: center;
    width: 50px
}

.Otp-input-field:disabled {
    color: #89888b
}

.Otp-input-field:focus {
    border: 3px solid #5786ad
}

.text-center-size {
    font-size: min(4vw, 14px)
}

@media (min-width:320px) and (max-width:767.98px) {
    .cardStyle {
        padding: 16px 4px
    }

    .uforgotforms {
        margin-top: 10rem !important
    }

    .buttonWrapper {
        flex-direction: column;
        margin-top: 20px
    }

    .uforgotforms {
        border-radius: 6px
    }

    .submitButton {
        font-size: 1.1rem;
        width: 60%
    }

    .Input-Field-Label {
        color: #555;
        font-size: min(4vw, 12px)
    }

    .Otp-Label {
        font-size: 14px
    }

    .OTPFORm {
        max-width: 40rem
    }

    .Otpbutton {
        font-size: 1.2rem
    }

    .Input-Field-Label {
        font-size: 1.3rem
    }

    .Otp-input-field {
        font-size: 14px;
        height: 34px;
        margin: 8px;
        text-align: center;
        width: 34px
    }

    .EnterOtp-div {
        margin: 0 10px 10px
    }
}

@media (min-width:768px) and (max-width:991.98px) {
    .Input-Field-Label {
        font-size: 1.3rem
    }

    .OTPFORm {
        max-width: 45rem
    }

    .Otp-input-field {
        font-size: 16px;
        height: 45px;
        margin: 10px;
        text-align: center;
        width: 45px
    }

    .Otp-Label {
        font-size: 1.8rem
    }

    .Otpbutton {
        font-size: 1.2rem
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .Input-Field-Label {
        font-size: 1.4rem
    }
}

@media (min-width:320px) and (max-width:420px) {
    .Otp-input-field {
        height: 27px;
        width: 27px
    }

    .OtpButtonMobileView {
        padding: 5px
    }
}

.Changepass-uforms {
    background-color: hsla(0, 0%, 100%, .03);
    border: none;
    border-radius: 8px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 536px;
    outline: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
    width: 100%
}

.Confirmpassword {
    margin-bottom: -12px
}

.Changepass-mainDiv {
    align-items: center;
    background-color: #f9f9f9;
    display: flex;
    font-family: Open Sans, sans-serif;
    justify-content: center;
    min-height: 100%
}

.Change-pass-cardStyle {
    background: #fff;
    background: repeating-radial-gradient(#df8c8c24, #d5a5d41c 100px);
    border-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .25);
    margin: 0;
    padding: 5px 0;
    width: 500px
}

.Backbutton-changepass,
.submitButton-changepass {
    background-color: #065492;
    border-color: #065492;
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .035);
    color: #fff;
    cursor: pointer;
    font-size: min(3vw, 14px);
    padding: 2px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .12)
}

.submitButton-changepass:disabled,
button[disabled] {
    background-color: #ccc;
    border: 1px solid #ccc;
    color: #666
}

.changepass-CloseSign {
    color: red;
    font-size: 15px;
    font-weight: 1000;
    position: absolute;
    right: 13px;
    top: 7px
}

.changepass-LogoForgot {
    background: transparent;
    color: #fff;
    font-size: min(10vw, 48px);
    text-align: center
}

.formTitle-changepass {
    color: #2f2d3b;
    font-size: min(4vw, 28px);
    font-weight: 600;
    margin-top: 0;
    text-align: center
}

.changepass-Info {
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px
}

.changepass_btn_div {
    display: flex;
    gap: 3rem;
    margin-top: 12px
}

@media (max-width:575.98px) {
    .Change-pass-cardStyle {
        padding: 5px;
        width: 100%
    }

    .Backbutton-changepass,
    .submitButton-changepass {
        font-size: 12px
    }

    .changepass-LogoForgot {
        font-size: 28px
    }

    .formTitle-changepass {
        font-size: 20px
    }

    .Changepass-uforms {
        padding: 10px
    }

    .changepass-Info {
        font-size: 10px
    }
}

@media (min-width:576px) and (max-width:767.98px) {
    .Change-pass-cardStyle {
        padding: 5px;
        width: 100%
    }

    .Backbutton-changepass,
    .submitButton-changepass {
        font-size: 12px;
        padding: 3px
    }

    .changepass-LogoForgot {
        font-size: 28px
    }

    .formTitle-changepass {
        font-size: 20px
    }

    .Changepass-uforms {
        padding: 10px
    }
}

@media (min-width:768px) and (max-width:991.98px) {
    .Change-pass-cardStyle {
        padding: 10px;
        width: 100%
    }

    .Backbutton-changepass,
    .submitButton-changepass {
        font-size: 13px
    }

    .changepass-LogoForgot {
        font-size: 32px
    }

    .formTitle-changepass {
        font-size: 24px
    }

    .Changepass-uforms {
        padding: 15px
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .Change-pass-cardStyle {
        padding: 7px;
        width: 100%
    }

    .Backbutton-changepass,
    .submitButton-changepass {
        font-size: 13px
    }

    .changepass-LogoForgot {
        font-size: 36px
    }

    .formTitle-changepass {
        font-size: 28px
    }

    .Changepass-uforms {
        padding: 20px
    }
}

@media (min-width:1200px) and (max-width:1399.98px) {
    .Change-pass-cardStyle {
        padding: 14px
    }

    .Backbutton-changepass,
    .submitButton-changepass {
        font-size: 13px
    }

    .changepass-LogoForgot {
        font-size: 40px
    }

    .formTitle-changepass {
        font-size: 32px
    }

    .Changepass-uforms {
        padding: 25px
    }
}

@media (min-width:1400px) {
    .Change-pass-cardStyle {
        padding: 8px;
        width: 100%
    }

    .Backbutton-changepass,
    .submitButton-changepass {
        font-size: 13px
    }

    .changepass-LogoForgot {
        font-size: 44px
    }

    .formTitle-changepass {
        font-size: 30px
    }

    .Changepass-uforms {
        padding: 30px
    }

    .text-cp {
        color: #059ff9
    }
}

.loader {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.jimu-primary-loading:after,
.jimu-primary-loading:before {
    content: "";
    position: absolute;
    top: 0
}

.jimu-primary-loading:before {
    left: -19.992px
}

.jimu-primary-loading:after {
    -webkit-animation-delay: .32s !important;
    animation-delay: .32s !important;
    left: 19.992px
}

.jimu-primary-loading,
.jimu-primary-loading:after,
.jimu-primary-loading:before {
    -webkit-animation: loading-keys-app-loading .8s ease-in-out infinite;
    animation: loading-keys-app-loading .8s ease-in-out infinite;
    background: #076fe5;
    height: 32px;
    width: 13.6px
}

.jimu-primary-loading {
    -webkit-animation-delay: .16s !important;
    animation-delay: .16s !important;
    margin: auto;
    position: absolute;
    right: calc(50% - 6.8px);
    text-indent: -9999em;
    top: calc(50% - 16px)
}

@-webkit-keyframes loading-keys-app-loading {

    0%,
    80%,
    to {
        box-shadow: 0 0 #076fe5;
        height: 32px;
        opacity: .75
    }

    40% {
        box-shadow: 0 -8px #076fe5;
        height: 40px;
        opacity: 1
    }
}

@keyframes loading-keys-app-loading {

    0%,
    80%,
    to {
        box-shadow: 0 0 #076fe5;
        height: 32px;
        opacity: .75
    }

    40% {
        box-shadow: 0 -8px #076fe5;
        height: 40px;
        opacity: 1
    }
}

#fitImageZoom {
    background-color: rgba(0, 0, 0, .5);
    display: none;
    height: -webkit-fill-available;
    width: 100%;
    z-index: 99999
}

.modal {
    background-color: #000;
    background-color: rgba(0, 0, 0, .9);
    overflow: auto;
    padding-top: 10px;
    z-index: 10000
}

.closeModal {
    background-color: rgba(0, 0, 0, .5);
    color: #f1f1f1;
    font-size: 40px;
    font-weight: 700;
    position: absolute;
    right: 15px;
    top: 15px;
    transition: .3s
}

#caption,
.modal-contents {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-name: zoom;
    animation-name: zoom
}

.modal-contents {
    display: block;
    margin: auto;
    max-width: 700px
}

.btns-primary {
    background-image: linear-gradient(180deg, #337ab7 0, #265a88);
    background-repeat: repeat-x;
    border-color: #245580;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff337ab7", endColorstr="#ff265a88", GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.btns {
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap
}

.info {
    float: right;
    padding: 50px 30px 0 0;
    position: relative
}

.info_button {
    background: rgba(43, 28, 170, .9);
    border: .11em solid #000;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px;
    position: fixed;
    right: 10px;
    top: 128px;
    z-index: 1000
}

.info_button:hover {
    background: hsla(0, 0%, 48%, .7)
}

.info_div {
    color: #000;
    max-width: 300px;
    position: fixed;
    right: 10px;
    top: 128px;
    z-index: 1000
}

.info_table {
    background-color: #d4ebf2;
    border: 0 solid #000;
    border-radius: 7px
}

.info_close {
    text-align: right
}

.info_close_button {
    background: linear-gradient(90deg, hsla(8, 13%, 66%, .6), hsla(31, 33%, 62%, .7));
    border: 1px solid #000;
    border-radius: 2px;
    color: red;
    font-weight: 700
}

.info_close_button:hover {
    background: linear-gradient(90deg, hsla(31, 33%, 62%, 0), #bfa07f)
}

.info_textarea {
    border: 0;
    font-family: sans-serif;
    font-size: 12px;
    line-height: 1.5em;
    overflow: no-display;
    padding: 0 12px;
    text-align: justify
}

.legend {
    background-color: hsla(0, 0%, 100%, .9);
    box-shadow: 0 0 3px rgba(70, 70, 70, .35);
    left: 50%;
    margin-left: -125px;
    padding: 5px 5px 0;
    position: fixed;
    top: 127px;
    width: 210px;
    z-index: 2
}

.panel {
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    display: none;
    left: 10px;
    margin-bottom: 20px;
    position: fixed;
    top: 475px;
    width: 320px
}

.mouse-position {
    background-color: aqua;
    border: 1px solid gray;
    border-radius: 10px;
    bottom: 15%;
    font-weight: 700;
    left: 60%;
    position: fixed;
    right: auto;
    top: auto;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.scale-line {
    background-color: hsla(0, 0%, 100%, .5);
    border-radius: 5px;
    padding: 5px
}

.scale-line .ol-scale-line-inner {
    border: 1px solid #000
}

.ol-scale-line {
    bottom: 10px;
    left: 10px
}

.ol-zoom {
    top: 42.5em !important
}

#info {
    background-color: #333;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    height: auto;
    left: 50%;
    padding: 5px;
    pointer-events: none;
    position: absolute;
    text-align: center;
    -webkit-transform: translateX(3%);
    transform: translateX(3%);
    visibility: hidden;
    width: auto;
    z-index: 100
}

.DistrictDropdown,
.StateDropdown {
    margin-bottom: 20px
}

.District,
.State {
    display: block;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 5px
}

.SelectDistrict {
    border: 1px solid #63b0e3;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    padding: 8px;
    width: 100%
}

.OptionDistrict,
.OptionState,
.SearchButton {
    font-size: 16px
}

.SearchButton {
    background-color: #4e932e;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    transition: background-color .3s ease
}

.SearchButton:hover {
    background-color: #b61ae9b8
}

.SidebarMenu {
    background-color: #7295b36b
}

.ol-overviewmap {
    bottom: .5em !important;
    left: 12.5em !important
}

.ol-control button,
.ol-control button:focus {
    background-color: rgba(219, 63, 63, .5)
}

.ol-control button:hover {
    background-color: #db3f3f
}

.ol-scale-line {
    background-color: rgba(219, 63, 63, .5)
}

.ol-overviewmap {
    bottom: 2em
}

.ol-mouse-position {
    font-family: monospace
}

.ol-dragzoom {
    background-color: rgba(219, 63, 63, .1) !important;
    border-color: #db3f3f !important;
    border-width: 2px !important
}

.buttonAgri {
    background: #fff;
    border: 2px solid green;
    border-radius: 40px;
    color: green;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    height: 40px;
    letter-spacing: 1px;
    outline: none;
    text-align: center;
    text-shadow: 0;
    transition: all .25s ease;
    width: 100px
}

.buttonAgri:hover {
    background: green;
    color: #fff
}

.buttonAgri:active {
    letter-spacing: 2px
}

.buttonAgri:after {
    content: ""
}

.onclic {
    -webkit-animation: rotating 2s linear .25s infinite;
    animation: rotating 2s linear .25s infinite;
    border-color: #bbb #bbb #bbb green;
    border-width: 3px;
    font-size: 0;
    width: 40px
}

.onclic:after {
    content: ""
}

.onclic:hover {
    background: #fff;
    color: green
}

.validate {
    background: green;
    color: #fff;
    font-size: 13px
}

.onclic:after {
    content: "\f00c";
    font-family: FontAwesome
}

@-webkit-keyframes rotating {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes rotating {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.buttonAgric {
    background: #fff;
    border: 2px solid #cd321e;
    border-radius: 40px;
    color: #cd321e;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    height: 40px;
    letter-spacing: 1px;
    outline: none;
    text-align: center;
    text-shadow: 0;
    transition: all .25s ease;
    width: 100px
}

.buttonAgric:hover {
    background: #cd321e;
    color: #fff
}

.buttonAgric:active {
    letter-spacing: 2px
}

.buttonAgric:after {
    content: ""
}

.buttonAgrih {
    background: #fff;
    border: 2px solid #1e21cd;
    border-radius: 40px;
    color: #1e21cd;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    height: 40px;
    letter-spacing: 1px;
    outline: none;
    text-align: center;
    text-shadow: 0;
    transition: all .25s ease;
    width: 100px
}

.buttonAgrih:hover {
    background: #1e4dcd;
    color: #fff
}

.buttonAgrih:active {
    letter-spacing: 2px
}

.buttonAgrih:after {
    content: ""
}

.draggable-table {
    border-collapse: collapse;
    cursor: move;
    font-family: Merriweather;
    max-width: -webkit-min-content;
    max-width: min-content;
    position: absolute;
    -webkit-user-select: none;
    user-select: none;
    z-index: 1
}

.draggable-table td {
    border: 1px solid #0ff30c;
    font-family: Merriweather;
    padding: 8px
}

.draggable-table thead {
    background-color: #f2f2f2
}

.draggable-table tbody {
    background-color: #fff
}

.ButtonOfCreateProject {
    background-color: none
}

.Administrativeselection {
    color: #000;
    cursor: pointer;
    font-size: 16px
}

.Administrativeselection:hover {
    color: #fff
}

.Administrativeselection:focus {
    outline: 2px solid red
}

.ButtonOfCreateProject:active {
    background-color: #3c7dc2;
    color: purple;
    -webkit-transform: scale(.9);
    transform: scale(.9)
}

.buttons.active {
    background-color: #7faee0
}

.Administrativeselection[data-visited=true] {
    color: purple
}

.cancel-symbol {
    color: red;
    cursor: pointer
}

.ButtonOfagri {
    margin-top: 35px
}

.iconofAGRI {
    font-size: min(3vw, 16px)
}

.AgriForm {
    background-color: #fff
}

:host,
:root {
    --ol-background-color: #fff;
    --ol-accent-background-color: #f5f5f5;
    --ol-subtle-background-color: hsla(0, 0%, 50%, .25);
    --ol-partial-background-color: hsla(0, 0%, 100%, .75);
    --ol-foreground-color: #333;
    --ol-subtle-foreground-color: #666;
    --ol-brand-color: #0af
}

.ol-box {
    background-color: hsla(0, 0%, 100%, .75);
    background-color: var(--ol-partial-background-color);
    border: 1.5px solid #fff;
    border: 1.5px solid var(--ol-background-color);
    border-radius: 2px;
    box-sizing: border-box
}

.ol-mouse-position {
    position: absolute;
    right: 8px;
    top: 8px
}

.ol-scale-line {
    background: hsla(0, 0%, 100%, .75);
    background: var(--ol-partial-background-color);
    border-radius: 4px;
    bottom: 8px;
    left: 8px;
    padding: 2px;
    position: absolute
}

.ol-scale-line-inner {
    border: 1px solid #666;
    border: 1px solid var(--ol-subtle-foreground-color);
    border-top: none;
    color: #333;
    color: var(--ol-foreground-color);
    font-size: 10px;
    margin: 1px;
    text-align: center;
    transition: all .25s;
    will-change: contents, width
}

.ol-scale-bar {
    bottom: 8px;
    left: 8px;
    position: absolute
}

.ol-scale-bar-inner {
    display: flex
}

.ol-scale-step-marker {
    background-color: #333;
    background-color: var(--ol-foreground-color);
    float: right;
    height: 15px;
    width: 1px;
    z-index: 10
}

.ol-scale-step-text {
    bottom: -5px;
    font-size: 10px;
    z-index: 11
}

.ol-scale-step-text,
.ol-scale-text {
    color: #333;
    color: var(--ol-foreground-color);
    position: absolute;
    text-shadow: -1.5px 0 hsla(0, 0%, 100%, .75), 0 1.5px hsla(0, 0%, 100%, .75), 1.5px 0 hsla(0, 0%, 100%, .75), 0 -1.5px hsla(0, 0%, 100%, .75);
    text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color)
}

.ol-scale-text {
    bottom: 25px;
    font-size: 12px;
    text-align: center
}

.ol-scale-singlebar {
    border: 1px solid #333;
    border: 1px solid var(--ol-foreground-color);
    box-sizing: border-box;
    height: 10px;
    position: relative;
    z-index: 9
}

.ol-scale-singlebar-even {
    background-color: #666;
    background-color: var(--ol-subtle-foreground-color)
}

.ol-scale-singlebar-odd {
    background-color: #fff;
    background-color: var(--ol-background-color)
}

.ol-unsupported {
    display: none
}

.ol-unselectable,
.ol-viewport {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.ol-viewport canvas {
    all: unset;
    overflow: hidden
}

.ol-viewport {
    touch-action: pan-x pan-y
}

.ol-selectable {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text
}

.ol-grabbing {
    cursor: grabbing
}

.ol-grab {
    cursor: move;
    cursor: grab
}

.ol-control {
    background-color: hsla(0, 0%, 50%, .25);
    background-color: var(--ol-subtle-background-color);
    border-radius: 4px;
    position: absolute
}

.ol-zoom {
    left: .5em;
    top: .5em
}

.ol-rotate {
    right: .5em;
    top: .5em;
    transition: opacity .25s linear, visibility 0s linear
}

.ol-rotate.ol-hidden {
    opacity: 0;
    transition: opacity .25s linear, visibility 0s linear .25s;
    visibility: hidden
}

.ol-zoom-extent {
    left: .5em;
    top: 4.643em
}

.ol-full-screen {
    right: .5em;
    top: .5em
}

.ol-control button {
    background-color: #fff;
    background-color: var(--ol-background-color);
    border: none;
    border-radius: 2px;
    color: #666;
    color: var(--ol-subtle-foreground-color);
    display: block;
    font-size: inherit;
    font-weight: 700;
    height: 1.375em;
    line-height: .4em;
    margin: 1px;
    padding: 0;
    text-align: center;
    text-decoration: none;
    width: 1.375em
}

.ol-control button::-moz-focus-inner {
    border: none;
    padding: 0
}

.ol-zoom-extent button {
    line-height: 1.4em
}

.ol-compass {
    display: block;
    font-weight: 400;
    will-change: transform
}

.ol-touch .ol-control button {
    font-size: 1.5em
}

.ol-touch .ol-zoom-extent {
    top: 5.5em
}

.ol-control button:focus,
.ol-control button:hover {
    color: #333;
    color: var(--ol-foreground-color);
    outline: 1px solid #666;
    outline: 1px solid var(--ol-subtle-foreground-color);
    text-decoration: none
}

.ol-zoom .ol-zoom-in {
    border-radius: 2px 2px 0 0
}

.ol-zoom .ol-zoom-out {
    border-radius: 0 0 2px 2px
}

.ol-attribution {
    align-items: center;
    bottom: .5em;
    display: flex;
    flex-flow: row-reverse;
    max-width: calc(100% - 1.3em);
    right: .5em;
    text-align: right
}

.ol-attribution a {
    color: #666;
    color: var(--ol-subtle-foreground-color);
    text-decoration: none
}

.ol-attribution ul {
    color: #333;
    color: var(--ol-foreground-color);
    font-size: 12px;
    margin: 0;
    padding: 1px .5em;
    text-shadow: 0 0 2px #fff;
    text-shadow: 0 0 2px var(--ol-background-color)
}

.ol-attribution li {
    display: inline;
    list-style: none
}

.ol-attribution li:not(:last-child):after {
    content: " "
}

.ol-attribution img {
    max-height: 2em;
    max-width: inherit;
    vertical-align: middle
}

.ol-attribution button {
    flex-shrink: 0
}

.ol-attribution.ol-collapsed ul {
    display: none
}

.ol-attribution:not(.ol-collapsed) {
    background: hsla(0, 0%, 100%, .75);
    background: var(--ol-partial-background-color)
}

.ol-attribution.ol-uncollapsible {
    border-radius: 4px 0 0;
    bottom: 0;
    right: 0
}

.ol-attribution.ol-uncollapsible img {
    margin-top: -.2em;
    max-height: 1.6em
}

.ol-attribution.ol-uncollapsible button {
    display: none
}

.ol-zoomslider {
    height: 200px;
    left: .5em;
    top: 4.5em
}

.ol-zoomslider button {
    height: 10px;
    position: relative
}

.ol-touch .ol-zoomslider {
    top: 5.5em
}

.ol-overviewmap {
    bottom: .5em;
    left: .5em
}

.ol-overviewmap.ol-uncollapsible {
    border-radius: 0 4px 0 0;
    bottom: 0;
    left: 0
}

.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button {
    display: block
}

.ol-overviewmap .ol-overviewmap-map {
    border: 1px solid #666;
    border: 1px solid var(--ol-subtle-foreground-color);
    height: 150px;
    width: 150px
}

.ol-overviewmap:not(.ol-collapsed) button {
    bottom: 0;
    left: 0;
    position: absolute
}

.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {
    display: none
}

.ol-overviewmap:not(.ol-collapsed) {
    background: hsla(0, 0%, 50%, .25);
    background: var(--ol-subtle-background-color)
}

.ol-overviewmap-box {
    border: 1.5px dotted #666;
    border: 1.5px dotted var(--ol-subtle-foreground-color)
}

.ol-overviewmap .ol-overviewmap-box:hover {
    cursor: move
}

.App-stack .Fields-stack {
    border: 1px solid #000;
    margin: 48px 2px 60px 75px;
    padding: 15px
}

.drop-layer {
    width: 80px
}

.drop-layer,
.drop-layer-output {
    background-color: #d0d3d4b8;
    margin-left: 2rem
}

.drop-layer-output {
    width: 15rem
}

.data-type-stack {
    border: 1px solid #aea7a7;
    padding: 1rem
}

.label-datatype {
    padding: 0 0 5px
}

.data-types-labels {
    margin-top: 0
}

.stack-buttons {
    margin: 1rem 35rem
}

.text-area-stack {
    border: 1px solid #aea7a7;
    padding: 1rem
}

.text-area-button {
    border: 1px solid #666464;
    margin: 5px;
    padding: 2px;
    width: 8rem
}

.input-section-stack {
    align-items: center;
    display: flex;
    margin-top: 10px;
    position: relative
}

.output-section-stack {
    align-items: center;
    display: flex;
    margin-left: 50px
}

.output-section-stack label {
    margin-right: 10px
}

.file-input {
    align-items: center;
    display: flex
}

.inputField-stack,
.outputField-stack {
    flex: 1 1;
    margin-right: 10px;
    margin-top: 5px;
    width: 40vh
}

.outputField-stack {
    margin-left: 5px
}

.choosefile-stack {
    color: #0056b3;
    cursor: pointer;
    font-size: 20px;
    margin: 0 0 0 1rem
}

.choose-file-btn:hover {
    background-color: #0056b3
}

.Lable-Input-stack,
.Lable-Output-stack {
    display: inline-block;
    margin-left: -4px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.main-containOfPolicies {
    height: 86vh
}

.Disclaimer {
    background: linear-gradient(hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, .8)), url(/static/media/privacy.95daf4be8fad903a67e6.jpeg);
    background-attachment: fixed;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.paragraphOfDisclaimer {
    color: #000;
    font-family: MATH;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3em;
    text-shadow: 1px #383636 !important
}

.primary-heading {
    color: #6495ed;
    font-family: josefin sans;
    font-size: 4em;
    text-align: center;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15)
}

.headingOfCondition {
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(https://www.fiitjeelogin.com/policies/privacy.jpg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 23vh;
    padding-top: 35px;
    position: -webkit-sticky;
    position: sticky;
    text-align: center;
    top: 0
}

.Disclaimer {
    padding: 20px 8.5vw 20px 10vw
}

.privacypoliecisheading {
    color: #fff;
    font-family: Eras ITC, sans-serif;
    font-size: 35px;
    font-weight: 400;
    margin-left: 7px;
    margin-top: 1px;
    text-shadow: 3px 1px 3px #a557cd
}

.LinksOfPdT {
    color: #a557cd;
    font-weight: 100 !important
}

@media (max-width:991px) {
    .headingOfCondition {
        padding-top: 0
    }

    .privacypoliecisheading {
        font-size: 25px
    }

    .Disclaimer {
        padding: 20px
    }
}

@media (max-width:576px) {
    .headingOfCondition {
        padding-top: 0
    }
}

.TranscoBox .leaflet-bottom .leaflet-control-scale {
    bottom: -84px
}

.TranscoOpen-tools {
    background: #1a0991;
    border-radius: 40px;
    color: #fff;
    cursor: pointer;
    display: block;
    left: 10px;
    position: absolute;
    text-align: center;
    top: 10px;
    z-index: 9999
}

.ToolsOpen,
.TranscoChevron-collapse {
    border: 2.4px solid #fff;
    border-radius: 50px;
    font-size: 15px;
    height: 35px;
    width: 35px
}

.ToolsOpen {
    padding: 7px
}

.OpenTool {
    background-color: #00008b;
    border: 2px solid #fff;
    border-radius: 10px;
    color: #fff;
    font-size: 10px;
    left: 6px;
    padding: 4px 10px;
    position: absolute;
    top: 58px;
    z-index: 9999
}

.OpenToolModel {
    background-color: rgba(0, 0, 0, .5);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100
}

.OpenToolModelContent {
    background-color: #fefefe;
    border: 1px solid #888;
    margin: 100px auto 2.5%;
    max-width: 1000px;
    padding: 10px;
    width: 80%
}

.OpenToolModelClosebox {
    padding: 2px
}

.OpenToolModelCloseBtn {
    background-color: #fff;
    color: #aaa;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 5px
}

.OpenToolModelCloseBtn:focus,
.OpenToolModelCloseBtn:hover {
    color: #000;
    cursor: pointer;
    text-decoration: none
}

.OpenToolModelHeader {
    background-color: #90c7f7;
    display: flex;
    justify-content: space-between;
    padding: 3px
}

.OpenToolModelHeading {
    font-size: 17px;
    font-weight: 600
}

.OpenToolModelBody {
    display: flex
}

.OpenToolModelBodyFirstBox,
.OpenToolModelBodySecondBox {
    width: 50%
}

.OpenToolModelBodyFirstBox input[type=file] {
    background-color: beige;
    cursor: pointer;
    font-size: 50px;
    line-height: 0;
    margin: 0;
    opacity: 0;
    padding: 12px;
    position: absolute;
    right: 99.5rem;
    top: 168px;
    width: 40px;
    z-index: 999
}

input::-webkit-input-placeholder {
    font-size: 15px;
    padding: 10px
}

input::placeholder {
    font-size: 15px;
    padding: 10px
}

.TranscoPath {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555;
    font-size: 12px;
    height: 31px;
    margin-right: 12px;
    max-width: 404px;
    padding: 7px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%
}

.GdbFolderPath,
.OutputFolderPath {
    margin-right: 10px;
    width: 90%
}

.SubmitGDBForm {
    border: 1px solid gray;
    color: #555;
    padding: 1px 10px
}

.OpenToolModelBOX {
    margin-top: 7px
}

.output-folder-path {
    color: #007bff;
    font-size: 9px
}

.mars-home-page-main {
    overflow: hidden
}

.underConstructionOfMars {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif
}

.LoaderOfMars {
    -webkit-animation: spin .7s linear infinite;
    animation: spin .7s linear infinite;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #a1db34;
    height: 120px;
    width: 100px
}

.SpinnerOfMars {
    display: inline-block;
    vertical-align: middle
}

.MainContentOfMars {
    padding: 20px;
    text-align: center
}

.Application-main-content {
    height: 316px
}

.flip-card {
    min-height: 400px;
    -webkit-perspective: 1000px;
    perspective: 1000px
}

.flip-card-inner {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
    height: 100%;
    min-height: 400px;
    position: relative;
    text-align: center;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform .6s;
    transition: transform .6s;
    transition: transform .6s, -webkit-transform .6s;
    width: 100%
}

.flip-card-back,
.flip-card-front {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.flip-card-front {
    align-items: center;
    background-color: initial;
    color: #000;
    display: flex;
    justify-content: center;
    min-height: 400px;
    position: relative;
    z-index: 1
}

.flip-card-front img {
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    width: 100%
}

.flip-card-back {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg)
}

.flip-card:hover .flip-card-inner {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.flip-text {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 5px;
    color: #fff;
    padding: 10px;
    position: absolute
}

.flip-card-back {
    align-items: center;
    background-color: #4682b4;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.flip-card-back .content-container {
    height: 100%;
    overflow-y: auto;
    padding: 15px
}

.section-one {
    align-items: center;
    background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .2)), url(https://www.wallpaperflare.com/static/797/995/828/planet-space-space-art-digital-art-wallpaper.jpg);
    background-position: 50%;
    background-size: cover;
    display: flex;
    -webkit-filter: brightness();
    filter: brightness();
    flex-direction: column;
    height: 37vh;
    justify-content: center;
    width: 100vw
}

.Mars {
    color: #fff;
    text-align: center
}

.Headingforamars {
    font-size: min(3vw, 25px);
    font-weight: 400;
    text-transform: uppercase
}

.paraforamars {
    font-size: min(3vw, 20px);
    margin: 20px 0 40px
}

.MarsHome {
    height: 86.5vh
}

@media (min-width:280px) and (max-width:479px) {
    .Headingforamars {
        font-size: 23px
    }

    .paraforamars {
        font-size: min(3vw, 20px);
        margin: 10px 0 40px
    }
}

@media (min-width:576px) and (max-width:767.98px) {
    .Headingforamars {
        font-size: 23px;
        margin: 0
    }

    .paraforamars {
        font-size: min(3vw, 20px);
        margin: 10px 0 40px
    }
}

@media (max-width:575.98px) {
    .Headingforamars {
        margin: 0
    }

    .paraforamars {
        font-size: min(3vw, 20px);
        margin: 10px 0 40px
    }
}

@media (min-width:480px) and (max-width:767px) {
    .Headingforamars {
        font-size: 23px;
        margin: 0
    }

    .paraforamars {
        font-size: min(3vw, 13px);
        margin: 10px 0 40px
    }
}

@media (min-width:768px) and (max-width:991px) {
    .paraforamars {
        font-size: min(3vw, 13px);
        margin: 10px 0 40px
    }
}

@media(min-width:320px)and (max-width:425px) {
    .flip-card-front {
        margin-bottom: 20px
    }
}

.mainarchivalbody {
    height: calc(100vh - 129px);
    position: relative
}

.archivalmainheading {
    font-size: 24px;
    font-weight: 600;
    text-align: center
}

.read-xml-file-tab-container .Read-XMLFileCount {
    background-color: #e6ba8d;
    border-bottom: 1px solid #727171;
    display: flex;
    font-size: 12px;
    padding: 2px
}

.achivalparaheading {
    color: #2f4f4f;
    font-size: 18px;
    font-weight: 700
}

.archivalboxhead2 {
    color: #fff;
    font-size: 18px;
    font-weight: 700
}

.maincontainer {
    display: flex;
    height: 100%;
    position: relative;
    width: 100%
}

.contanierbox {
    background: linear-gradient(135deg, #f9f9f9, #e2effa);
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    padding: 10px;
    width: 100%
}

.maincontainerbox1,
.maincontainerbox2 {
    background: #000;
    height: auto;
    width: 100%
}

.maincontainerbox1 {
    max-width: 30%;
    overflow: auto;
    padding: 8px;
    scrollbar-width: none
}

.maincontainerbox2 {
    border-left: 1px solid gray;
    max-width: 70%;
    overflow: auto
}

.arch-products-divs {
    background: #454545;
    border-radius: 5px;
    margin: 4px 0 8px;
    padding: 5px
}

.Fieldset-div {
    margin-bottom: 1rem
}

.dropdown-flex-container {
    grid-gap: 14px;
    display: grid;
    flex-wrap: wrap;
    gap: 14px;
    grid-template-columns: auto auto;
    padding: 4px 6px;
    width: 100%
}

.File-div {
    width: 100%
}

.file-path {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555;
    font-size: 12px;
    padding: 2px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%
}

.file-path.disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    transition: background-color .3s ease
}

.Extract-Div {
    padding: 2px 6px
}

.ClearExtract-btn-div,
.Extract-btn-div {
    display: flex;
    margin-top: 5px;
    padding: 10px 0
}

.ErrorShowDisableUplodBtn {
    align-items: center;
    color: orange;
    font-size: 9px;
    margin-left: 1rem;
    text-shadow: 1px 2px #000;
    text-transform: uppercase
}

.dimFileName_class {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555;
    font-size: 12px;
    padding: 2px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%
}

.dimFileName_class.disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    transition: background-color .3s ease
}

.add-photo-btn {
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 5px;
    color: #555;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    margin-right: 12px;
    max-width: 99px;
    overflow: hidden;
    padding: 3px;
    position: relative;
    text-align: center;
    width: 100%
}

.add-photo-btn.disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    transition: background-color .3s ease
}

#messagePopup {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    display: none;
    left: 50%;
    padding: 20px;
    position: fixed;
    text-align: center;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10000
}

#okButton {
    background-color: #007bff;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 10px 20px
}

.popup {
    z-index: 9999
}

.popup-content {
    background-color: #fefefe;
    border: 1px solid #888;
    margin: 2.5% auto;
    max-width: 900px;
    padding: 10px;
    width: 80%
}

.close {
    color: #aaa
}

.close:focus,
.close:hover {
    color: #000;
    cursor: pointer;
    text-decoration: none
}

.editinfo-container {
    background: linear-gradient(135deg, #f9f9f9, #f0f7fe);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    height: 750px;
    max-width: 900px;
    overflow: auto;
    padding: 20px 25px;
    width: 100%
}

#editinfo-container {
    &::-webkit-scrollbar-thumb {
        background: #888
    }

    &::-webkit-scrollbar {
        width: 5px
    }

    &.more-width::-webkit-scrollbar {
        width: 10px
    }
}

.editinfo-container .editinfo-heading {
    font-size: 25px;
    font-weight: 600;
    padding: 0 0 20px;
    position: relative;
    text-align: center
}

.editinfo-container .sub-heading {
    font-size: 25px;
    font-weight: 500;
    padding: 20px 0 10px;
    position: relative
}

.editinfo-container .editinfo-heading:before {
    background: linear-gradient(135deg, #71b7e6, #9b5b);
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 100%
}

.editinfo-container form .main-card-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 15px
}

.main-card-box {
    padding: 0 0 0 40px
}

form .card-details .card-box {
    margin-bottom: 15px;
    width: calc(50% - 10px)
}

.card-details .card-box .details {
    display: block;
    font-weight: 500;
    margin-bottom: 5px
}

.card-details .card-box input {
    border: solid #ccc;
    border-radius: 5px;
    border-width: 1px 1px 2px;
    font-size: 16px;
    height: 35px;
    outline: none;
    padding-left: 15px;
    transition: all .3s ease;
    width: 80%
}

.card-box-btn {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 5px;
    padding: 10px
}

#cardboxbtn {
    align-content: center;
    background-color: #fff;
    border-bottom-width: 2px;
    border-color: #007bff;
    border-radius: 5px;
    color: #000;
    cursor: pointer;
    font-size: 16px;
    height: 100%;
    max-height: 40px;
    max-width: 200px;
    transition: all .3s ease;
    width: 100%
}

#cardboxbtn:hover {
    border-color: #9b5b;
    transition: all .3s ease
}

#cancel-cardboxbtn {
    align-content: center;
    background-color: #fff;
    border-bottom-width: 2px;
    border-color: #ff0000b4;
    border-radius: 5px;
    color: #000;
    cursor: pointer;
    font-size: 16px;
    height: 100%;
    max-height: 40px;
    max-width: 200px;
    transition: all .3s ease;
    width: 100%
}

#cancel-cardboxbtn:hover {
    border-color: #9b5b;
    transition: all .3s ease
}

.card-details .card-box input:focus,
.card-details .card-box input:valid {
    border-color: #007bff
}

.editinfo-container:not(:first-child) {
    margin-top: 30px
}

.viewInfo-class {
    word-wrap: break-word;
    color: #333;
    font-size: 13px;
    height: 60vh;
    line-height: 1.42857143;
    word-break: break-all
}

.pre-xmldata {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 4px;
    border-top: none;
    display: block;
    height: 54.7vh;
    margin-bottom: 0;
    padding: 9.5px
}

.pre-xmldata,
.read-xml-file-tab-container {
    word-wrap: break-word;
    color: #333;
    font-size: 13px;
    line-height: 1.42857143;
    scrollbar-width: thin;
    word-break: break-all
}

.read-xml-file-tab-container {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 0;
    height: 60vh;
    margin: 0;
    overflow: auto
}

.read-xml-file-tab-container .nav-link {
    align-items: center;
    color: inherit;
    margin: 0;
    text-decoration: none;
    transition: color .3s
}

.read-xml-file-tab-container .nav-link.active {
    background-color: gray;
    border-color: gray;
    color: #fff;
    font-weight: 600;
    padding: 2px 4px
}

.read-xml-file-tab-container button:not(:disabled) {
    background-color: initial;
    background-color: #d8d8d8;
    cursor: pointer;
    font-weight: 600;
    padding: 2px 4px
}

.read-xml-file-tab-container .nav .nav-item {
    border-left: 1px solid #000 !important
}

.read-xml-file-tab-container .nav .nav-item:last-child .nav-link {
    border-right: 1px solid #000 !important
}

.read-xml-file-tab-container .nav-link:hover {
    background-color: #e2cd92;
    border-color: #bdbebf #e9ecef #977835;
    color: #000
}

.bandstabledata_data,
.maintabledata_data,
.maintabledataheading {
    border: 1px solid #bbb;
    font-family: Arial Narrow, Arial, sans-serif;
    text-align: left;
    white-space: nowrap
}

.bandstabledata_data {
    white-space: nowrap
}

.maintabledataheading {
    background-color: #f2f2f2;
    font-size: 12px;
    font-weight: 700;
    height: 20px;
    position: -webkit-sticky;
    position: sticky;
    top: -1px
}

.maintabledataheading-srno {
    max-width: 5%;
    width: 3%
}

.nodata-table-heading {
    font-size: 12px
}

.maintabledata_data-srno {
    text-align: right
}

.table-heading2,
.table-heading3,
.table1-heading {
    background-color: #e6ba8d;
    border: 1px solid #444;
    color: #333;
    display: flex;
    font-size: min(4vw, 14px);
    font-weight: 700;
    justify-content: left;
    padding-left: 5px;
    position: -webkit-sticky;
    position: sticky;
    text-align: center;
    top: 0
}

.maintabledatarow {
    background-color: #f5f5f5
}

.maintabledatarow.background-yellow {
    background-color: #797972 !important;
    color: #fff
}

.maintabledatarow.background-red {
    background-color: #963838 !important;
    color: #fff
}

.maintabledatarow.background-blue {
    background-color: #3e72a1 !important;
    color: #fff
}

table.maintabledata {
    margin-bottom: 3px
}

table.maintabledata tr:nth-child(2n) {
    background-color: #f2f2f2
}

.tableInput {
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%
}

.tableInput,
.tableInput:focus {
    outline: none
}

.action-btns {
    display: flex;
    gap: 5px
}

.table-container1,
.table-container2,
.table-container3 {
    height: auto
}

.tablebox {
    height: 24vh;
    overflow: auto;
    scrollbar-width: thin
}

.editinfo-btn {
    background-color: #fdd35d;
    border: 2px outset #afabab;
    border-left: none;
    border-top: none;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 2px 22px;
    transition: all .3s ease
}

.editinfo-btn:active {
    box-shadow: inset 4px 4px 4px #bf9000
}

.editinfo-btn.disabled {
    background-color: #ccc;
    box-shadow: none;
    color: #666;
    cursor: not-allowed;
    transition: background-color .3s ease
}

.editinfo-btn.disabled,
.readxml-btn {
    border: 2px outset #afabab;
    border-left: none;
    border-top: none
}

.readxml-btn {
    background-color: #fdd35d;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 2px 22px;
    transition: all .3s ease
}

.readxml-btn:active {
    box-shadow: inset 4px 4px 4px #bf9000
}

.readxml-btn.disabled {
    background-color: #ccc;
    box-shadow: none;
    color: #666;
    cursor: not-allowed;
    transition: background-color .3s ease
}

.readxml-btn.disabled,
.viewinfo-btn {
    border: 2px outset #afabab;
    border-left: none;
    border-top: none
}

.viewinfo-btn {
    background-color: #fdd35d;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 2px 22px;
    transition: all .3s ease
}

.viewinfo-btn:active {
    box-shadow: inset 4px 4px 4px #bf9000
}

.viewinfo-btn.disabled {
    background-color: #ccc;
    box-shadow: none;
    color: #666;
    cursor: not-allowed;
    transition: background-color .3s ease
}

.map-btn,
.viewinfo-btn.disabled {
    border: 2px outset #afabab;
    border-left: none;
    border-top: none
}

.map-btn {
    background-color: #fdd35d;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 2px 22px;
    transition: all .3s ease
}

.map-btn:active {
    box-shadow: inset 4px 4px 4px #bf9000
}

.map-btn.disabled {
    background-color: #ccc;
    border: 2px outset #afabab;
    border-left: none;
    border-top: none;
    box-shadow: none;
    color: #666;
    cursor: not-allowed;
    transition: background-color .3s ease
}

.button1 {
    background-color: #fff;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 2px;
    width: 100%
}

.button1:hover {
    border-color: #9b5b;
    transition: all .3s ease
}

.button1:active {
    box-shadow: inset 4px 4px 4px #bf9000
}

.button2 {
    background-color: #fff;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 2px;
    width: 100%
}

.button2:hover {
    border-color: #9b5b;
    transition: all .3s ease
}

.button2:active {
    box-shadow: inset 4px 4px 4px #bf9000
}

.button3 {
    background-color: #fff;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 2px;
    width: 100%
}

.button3:hover {
    border-color: #9b5b;
    transition: all .3s ease
}

.button3:active {
    box-shadow: inset 4px 4px 4px #bf9000
}

.submit_taks {
    background-color: #00b050;
    border: 4px outset #afabab36;
    border-left: none;
    border-radius: 16px;
    border-top: none;
    box-shadow: 4px 3px 5px #262626;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 3rem;
    width: 100%
}

.submit_taks:active {
    box-shadow: inset 4px 4px 6px #c4bfb0
}

.submit_taks.disabled {
    background-color: #ccc;
    border: 4px outset #afabab2b;
    border-left: none;
    border-top: none;
    color: #666;
    cursor: not-allowed;
    transition: background-color .3s ease
}

.Reset-btn {
    background-color: #f93;
    border: 4px outset #afabab36;
    border-left: none;
    border-radius: 16px;
    border-top: none;
    box-shadow: 4px 3px 5px #262626;
    color: #000;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 3rem;
    width: 100%
}

.Reset-btn:active {
    box-shadow: inset 3px 3px 6px #cfcbc1
}

.Reset-btn.disabled {
    background-color: #ccc;
    border: 4px outset #afabab2b;
    border-left: none;
    border-top: none;
    color: #666;
    cursor: not-allowed;
    transition: background-color .3s ease
}

.shapefileExport {
    background-color: #2e75b6;
    border: 4px outset #afabab70;
    border-left: none;
    border-radius: 16px;
    border-top: none;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    width: 100%
}

.shapefileExport:active {
    box-shadow: inset 4px 3px 4px #949188
}

.shapefileExport.disabled {
    background-color: #ccc;
    border: 4px outset #afabab2b;
    border-left: none;
    border-top: none;
    box-shadow: none;
    color: #666;
    cursor: not-allowed;
    transition: background-color .3s ease
}

.Quit-btn {
    background-color: #bfbfbf;
    border: 4px outset #afabab36;
    border-left: none;
    border-radius: 16px;
    border-top: 2px #afabab36;
    color: #000;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    width: 100%
}

.Quit-btn:active {
    box-shadow: inset 4px 4px 4px #7c796f
}

.Quit-btn.disabled {
    background-color: #ccc;
    border: 4px outset #afabab2b;
    border-left: none;
    border-top: none;
    box-shadow: none;
    color: #666;
    cursor: not-allowed;
    transition: background-color .1s ease
}

.mapbox {
    height: 60vh;
    z-index: 1
}

.map-main-div {
    width: 100%
}

#map .leaflet-control-custom-zoom {
    top: 10rem
}

.imagebutntoggle {
    background-color: #fff;
    border: 2px solid #694d82;
    border-radius: 4px;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    left: 11px;
    padding: 2px;
    position: absolute;
    top: 114px;
    transition: all .3s ease;
    width: 33px;
    z-index: 999
}

.imagebutntoggle.disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed
}

.polygon-control-box {
    background-color: #fff;
    border: 2px solid #694d82;
    border-radius: 4px;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    left: 11px;
    padding: 2px;
    position: absolute;
    top: 152px;
    transition: all .3s ease;
    width: 33px;
    z-index: 999
}

.toolTipTextImage {
    background-color: #000;
    border-radius: 6px;
    color: #fff;
    font-size: 10px;
    left: calc(100% + 5px);
    padding: 5px 0;
    position: absolute;
    text-align: center;
    top: 1px;
    transition: visibility .3s ease;
    visibility: hidden;
    width: 160px;
    z-index: 1
}

.imagebutntoggle:hover .toolTipTextImage {
    visibility: visible
}

.polygonebutntoggle {
    cursor: pointer;
    left: 0;
    left: 12px;
    position: absolute;
    top: 55px;
    transition: all .3s ease;
    z-index: 1000
}

.polygonebutntoggle:disabled,
button[disabled] {
    cursor: not-allowed
}

.archivalmappolygontip {
    left: 8px;
    position: absolute;
    top: 5rem;
    z-index: 1000
}

.tooltipTextPolygone {
    background-color: #000000a6;
    border-radius: 6px;
    color: #fff;
    font-size: 10px;
    left: calc(100% + 50px);
    padding: 5px 0;
    position: absolute;
    text-align: center;
    top: 0;
    transition: visibility .3s ease;
    visibility: hidden;
    width: 10rem;
    z-index: 1
}

.polygonebutntoggle-div .tooltipTextPolygone:after {
    border: 5px solid transparent;
    border-left-color: #000;
    content: " ";
    margin-top: -5px;
    position: absolute;
    right: 95%;
    top: 50%
}

.polygonebutntoggle-div:hover .tooltipTextPolygone {
    visibility: visible
}

.polygonebutntoggle-div {
    display: flex;
    justify-content: flex-start;
    margin-right: 5px
}

#coordinate {
    align-items: center;
    background-color: #f0f8ff;
    background: hsla(0, 0%, 100%, .8);
    border: 2px solid #777;
    bottom: .5%;
    box-sizing: border-box;
    color: #000;
    display: flex;
    font-size: 10px;
    font-weight: 600;
    justify-content: center;
    line-height: .9;
    padding: 2px 1px;
    position: absolute;
    right: .9%;
    white-space: nowrap;
    width: 16%;
    z-index: 999
}

@media (max-width:768px) {
    #coordinate {
        font-size: 9px;
        max-width: 30%;
        padding: 2px 4px;
        width: auto
    }
}

@media (max-width:480px) {
    #coordinate {
        font-size: 8px;
        max-width: 40%;
        padding: 2px 3px
    }
}

.mapbox .leaflet-control-scale-line {
    background: none;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    bottom: -20px;
    box-sizing: border-box;
    color: #000;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    left: 3px;
    line-height: 70%;
    margin-bottom: 5px;
    padding: 2px 28px 2px 10px;
    position: absolute;
    text-align: center;
    text-shadow: none;
    white-space: nowrap
}

#map .leaflet-control-zoom {
    position: absolute;
    top: 8.9rem;
    z-index: 10
}

#map .leaflet-control-zoom-in,
#map .leaflet-control-zoom-out {
    box-sizing: border-box;
    padding: 1px;
    z-index: 3
}

#map .leaflet-control-zoom-in span[aria-hidden=true] {
    background-image: url(/static/media/NAZoom_In128.4e3ad3692fe850813649.svg)
}

#map .leaflet-control-zoom-in span[aria-hidden=true],
#map .leaflet-control-zoom-out span[aria-hidden=true] {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 24px;
    overflow: hidden;
    text-indent: -9999px;
    width: 24px
}

#map .leaflet-control-zoom-out span[aria-hidden=true] {
    background-image: url(/static/media/NAZoom_Out128.943a53fd4c943ab2d254.svg)
}

.polygonebutntoggle.disable-polygonebutntoggle {
    background-color: #ccc;
    border: 4px outset #aa76290f;
    border-left: none;
    border-top: none;
    box-shadow: none;
    color: #666;
    cursor: not-allowed;
    transition: background-color .3s ease
}

.ArchivalVextorLayerIcon.disable-ArchivalVextorLayerIcon {
    background-color: gray;
    cursor: not-allowed
}

.ArchivalVextorLayerIcon {
    background-color: #fff;
    background-image: url(/static/media/LYVectors_Layers128.cc4f9c0fe5a0490fe568.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: 1px 1px 3px #000, inset -1px -1px 3px #545454, inset 1px 1px 3px #fff;
    box-sizing: border-box;
    display: block;
    height: 3rem;
    width: 4rem
}

#map .leaflet-control-custom-zoom {
    margin-bottom: 20px;
    position: absolute;
    top: 11rem;
    z-index: 1
}

#map .leaflet-control-zoom-in {
    border-top: 1px solid #ccc
}

#map .leaflet-control-zoom-in,
#map .leaflet-control-zoom-out {
    background-color: #ededed;
    box-shadow: 1px 1px 5px #000, inset -1px -1px 5px #545454, inset 1px 1px 5px #fff;
    color: #000;
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    width: 40px
}

#map .leaflet-control-zoom-out {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

#map .leaflet-bottom .leaflet-control {
    margin: 0 .8rem 1.5rem
}

#map .leaflet-top .leaflet-control {
    margin-right: 10px;
    margin-top: 10px
}

#map .leaflet-bottom .leaflet-control-scale {
    bottom: 11px;
    margin: 8px
}

.error-archival {
    color: #f44336;
    font-size: 11px;
    font-style: italic;
    margin: 5px
}

.inpuselectionoption {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555;
    cursor: pointer;
    font-size: 12px;
    padding: 2px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%
}

.collapsible {
    background-color: #777;
    background: linear-gradient(135deg, #dfdfdf, #baddfa);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    outline: none;
    padding: 10px;
    text-align: left;
    width: 100%
}

.collapsactive,
.collapsible:hover {
    background: linear-gradient(135deg, #c5c5c5, #acb8c1);
    border: 1px solid #8385f3;
    border-radius: 5px
}

.collapsible:after {
    border-radius: 5px;
    color: #fff;
    content: "\002B";
    float: right;
    font-weight: 700;
    margin-left: 5px
}

.collapsactive:after,
.content {
    border-bottom: 2px solid #8385f3;
    border-radius: 5px;
    content: "\2212"
}

.content {
    background: linear-gradient(135deg, #f9f9f9, #e2effa);
    border-radius: 5px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease-out
}

#MainTbaleDataHeight {
    background: #888;
    border-radius: 5px;
    height: 230px;
    height: 50px;
    height: 8px;
    overflow: auto;
    width: 8px;
    width: 5px
}

.privewimagebox {
    height: 40%;
    justify-content: center;
    padding: 10px;
    width: 40%
}

.newfromheader {
    background-color: #a7dff3;
    display: flex;
    height: 33px;
    justify-content: space-between;
    padding: 3px
}

.new-form-header-label {
    display: flex;
    width: 100%
}

.newformheading {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0;
    margin-left: 4px;
    margin-top: 0;
    text-align: center
}

.newpopup {
    background-color: rgba(0, 0, 0, .5);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100
}

.Archival-data-newpopup-content {
    background-color: #fefefe;
    border: 1px solid #888;
    margin: 95px auto 2.5%;
    max-width: 1334px;
    padding: 10px 10px 0;
    width: 80%
}

.newclosebox {
    float: right;
    padding: 4px
}

.newclose {
    background-color: #fff;
    color: #aaa;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 5px
}

.newclose:focus,
.newclose:hover {
    color: #000;
    cursor: pointer;
    text-decoration: none
}

.formbox {
    background-color: #fff;
    border-radius: 5px;
    height: 75vh;
}

.Archival-data-newpopup-content,
.ArchivalTab-content,
.formbox,
.mapbox,
.marstable,
.marstablerow,
.miantablebox,
.scrollable-div,
.scrollable-div1 {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

.Mars-main-table {
    background: #494545;
    height: auto;
    width: 100%
}

.newfromfooter {
    background-color: #a7dff3;
    display: flex;
    font-size: 10px;
    justify-content: space-between;
    padding: 1px 3px
}

.Fiftth-part-main-div,
.primeryinfomainbox {
    margin-top: 5px
}

.primeryinfofirstbox {
    display: flex
}

.data-Name-div {
    margin-right: 15px;
    width: 65%
}

.company-name-div {
    width: 35%
}

.satelite-name-div {
    width: 48%
}

.card-box-new-client {
    display: grid;
    width: 50%
}

.imageinfomainbox {
    margin-top: 5px
}

.image-info-third-box {
    grid-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
    display: grid;
    grid-template-columns: auto auto
}

.third-box-input-div {
    width: 100%
}

.imageinfosecondbox {
    width: 50%
}

.loactioninfomainbox {
    margin-top: 5px
}

.loactioninfofirstbox {
    grid-column-gap: 8px;
    align-items: center;
    -webkit-column-gap: 8px;
    column-gap: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    justify-items: stretch
}

.card-box-new-loaction,
.card-box-new-loactionname {
    display: grid
}

.imgdetailsinfomainbox {
    display: flex
}

.imgdetailsinfofirstbox,
.imgdetailsinfosecondbox,
.imgdetailsinfothirdbox {
    width: 50%
}

::-webkit-input-placeholder {
    color: #afafaf
}

::placeholder {
    color: #afafaf
}

.dcode {
    width: 70%
}

.dcode,
.dname {
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: min(3vw, 12px)
}

.dname {
    padding: 2px;
    width: 100%
}

#myForm input:invalid {
    -webkit-animation: shake .3s ease forwards;
    animation: shake .3s ease forwards;
    border: 2px solid red
}

.ArchivalinvalidInput:invalid {
    -webkit-animation: shake .3s ease forwards;
    animation: shake .3s ease forwards;
    border: 2px solid red
}

@-webkit-keyframes shake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    25% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }

    50% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }

    75% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes shake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    25% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }

    50% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }

    75% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.clRef,
.cl_address1,
.cl_address2,
.cl_orderna,
.cl_projna,
.cl_purpose,
.cname,
.dloca_cy,
.imgDataProcSpec,
.imgDataType,
.imgDate,
.img_dt_rng,
.senName,
.sname {
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: min(3vw, 12px);
    padding: 2px;
    width: 100%
}

.loactioninfosecondbox {
    display: flex
}

.dloca_dt,
.dloca_loca,
.dloca_st {
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: min(3vw, 12px);
    padding: 2px;
    width: 100%
}

.dArea,
.dBands,
.dCloud,
.dCols,
.dGSDAlt,
.dGSDAxt,
.dPRJName,
.dPRJTable,
.dPixelX,
.dPixelY,
.dRows,
.dSize,
.dSnow,
.dTiles {
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: min(3vw, 12px);
    padding: 2px;
    width: 96%
}

.al_da_path,
.al_ql_path,
.al_sh_path,
.dAQBits,
.dBits,
.dFormat,
.dINAngle,
.dPRBits,
.dQLname,
.dSign,
.dType,
.xmlFile {
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: min(3vw, 12px);
    padding: 2px;
    width: 100%
}

.newFormtable {
    border: 1px solid #bbb;
    max-width: 100%;
    width: 30%
}

.newFormtableRow,
.newFormtabledata,
.newFormtableheader {
    border: 1px solid #bbb;
    font-size: 11px;
    font-weight: 600;
    text-align: center
}

.maintabledatarow .maintabledataheading-srno {
    text-align: right
}

.marstable {
    background-color: #f5f5f5;
    width: 100px
}

.marstabledata,
.marstableheader,
.marstablerow {
    border: 1px solid #bbb;
    color: #333;
    font-family: Arial Narrow, Arial, sans-serif;
    font-size: 10px;
    padding: 1px 5px;
    white-space: nowrap
}

.marstablerow:nth-child(2n) {
    background-color: #e6e6e6
}

.marstableheader {
    background-color: #f5f5f5;
    font-size: 12px;
    font-weight: 700;
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

.tooltipDownloadtimer {
    display: flex;
    justify-content: space-around;
    margin: 2rem 0
}

.tooltipDownloadtimer .tooltiptextTimer {
    background-color: #000;
    border-radius: 6px;
    color: #fff;
    left: 6%;
    margin-left: -60px;
    padding: 5px 0;
    position: absolute;
    text-align: center;
    top: 108%;
    width: 180px;
    z-index: 1
}

.tooltipDownloadtimer .tooltiptextTimer:after {
    border: 5px solid transparent;
    border-bottom-color: #000;
    bottom: 100%;
    content: "";
    left: 50%;
    margin-left: -5px;
    position: absolute
}

.highlight {
    background-color: #ff0
}

.highlight,
.highlighted {
    color: #000;
    font-weight: 700
}

.highlighted {
    background-color: orange
}

.Search-bar-XML {
    align-items: center;
    background: #494545;
    border-radius: 5px;
    display: flex;
    float: right;
    margin: 5px;
    padding: 5px;
    position: absolute;
    right: 2rem;
    top: 4.5rem;
    width: 33rem
}

.search-position-text {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 100;
    margin: 0 1px;
    text-align: center;
    width: 72px
}

.Search-bar-input {
    background: #494545;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 6px;
    width: 14rem
}

.Search-bar-input:hover {
    background-color: #666161
}

.Search-bar-XML input[type=text]::-webkit-input-placeholder {
    color: #cfc9c9;
    font-size: 12px
}

.Search-bar-XML input[type=text]::placeholder {
    color: #cfc9c9;
    font-size: 12px
}

.search-btn-con {
    background: #494545;
    border: none;
    color: #fff;
    font-size: 12px;
    padding-top: 3px
}

.search-btn-con:hover {
    background-color: #666161;
    border-radius: 8px
}

#fileDropdown {
    position: absolute;
    right: 36rem
}

#fileDropdown1 {
    position: absolute;
    right: 46rem;
    top: 24px
}

.ReloadButton {
    background-color: #bc7a1a;
    border: 4px outset #aa762926;
    border-left: none;
    border-radius: 14px;
    border-top: none;
    box-shadow: 4px 3px 5px #262626;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    padding: 4px 24px;
    position: relative;
    text-align: center
}

.ReloadButton:active {
    box-shadow: inset 3px 3px 3px #d19928
}

.ReloadButton.disabled {
    background-color: #ccc;
    border: 4px outset #aa76290f;
    border-left: none;
    border-top: none;
    box-shadow: none;
    color: #666;
    cursor: not-allowed;
    transition: background-color .3s ease
}

.Ext-img-info {
    background-color: #548235;
    border: 4px outset #45662f17;
    border-left: none;
    border-radius: 14px;
    border-top: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
    box-shadow: 4px 3px 5px #262626;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    padding: 4px 24px;
    position: relative;
    text-align: center
}

.Ext-img-info:active {
    box-shadow: inset 3px 3px 3px #87a871a4
}

.Ext-img-info.disabled {
    background-color: #ccc;
    border: 4px outset #aa76290f;
    border-left: none;
    border-top: none;
    box-shadow: none;
    color: #666;
    cursor: not-allowed;
    transition: background-color .3s ease
}

.listDataNotGetMainBox {
    left: 63rem;
    position: absolute;
    top: 24rem
}

.listDataNotGet {
    background-color: #faebd7;
    font-size: smaller;
    inline-size: -webkit-max-content;
    inline-size: max-content;
    overflow: auto;
    padding: 5px;
    position: absolute;
    z-index: 100
}

.listDataNotGet p {
    background-color: #fff;
    line-height: 1.6
}

.XMLFileCount-div {
    background-color: #e3f8ff;
    padding: 4px
}

.XMLFileCount {
    font-size: 15px;
    font-weight: 600
}

.formbox,
hr {
    margin-bottom: 0;
    margin-top: 0
}

.ArchivalTab-content-container {
    height: 53.9vh;
    overflow: auto;
    scrollbar-width: thin
}

.ArchivalTabs {
    cursor: pointer;
    display: flex;
    padding: 8px 4px
}

.Archivaltab {
    background-color: #fdd35d;
    font-size: 14px;
    font-weight: 500;
    margin-right: 1rem;
    padding: .2rem 2rem
}

.ArchivalActive-tab {
    background-color: #bf9000;
    box-shadow: 2px 4px 2px #262626;
    font-weight: 600
}

.ArchivalTab-content {
    display: none
}

.ArchivalActive-tab-content {
    display: block
}

.preview-image {
    cursor: grab;
    max-height: 100%;
    max-width: 100%
}

.preview-img-zoom {
    display: flex;
    height: 54vh;
    margin-top: 2px;
    overflow: hidden;
    position: relative;
    width: 100%
}

.preview-img-content-box p {
    color: #0a0a0a
}

.view-info-Preview-img-label {
    background-color: #e6ba8d;
    border: 1px solid #727171;
    display: flex;
    font-size: 12px;
    padding: 0 2px
}

.formMainBoxArchival {
    border: 1px solid #a4a4a4;
    display: flex;
    gap: 5px;
    height: 69vh;
    overflow: hidden
}

.FirstBoxForm {
    height: 100%;
    margin-bottom: 10px;
    overflow: auto;
    scrollbar-width: thin;
    width: 40%
}

.xml-tab-heading {
    background-color: #e3f8ff;
    padding: 4px
}

.xmlTabHeading {
    font-size: 15px;
    font-weight: 600
}

.xml-tab-heading p {
    margin: 0
}

.SecondBoxForm {
    width: 65%
}

.SecondBoxForm .nav {
    margin-bottom: 2px;
    margin-top: 3px
}

.FirstBoxForm,
.SecondBoxForm {
    background-color: #fff;
    padding: 0 5px
}

.SecondBoxForm .tab-content {
    height: 62.5vh;
    overflow: auto;
    padding-bottom: 5px;
    padding-right: 4px;
    scrollbar-width: thin
}

.SecondBoxForm .nav {
    background-color: #fff !important
}

.SecondBoxForm .nav-link {
    align-items: center;
    color: inherit;
    margin: 0;
    text-decoration: none;
    transition: color .3s
}

.SecondBoxForm .nav-link.active {
    background-color: gray;
    border-color: gray;
    color: #fff;
    font-weight: 600;
    padding: 2px 4px
}

.SecondBoxForm button:not(:disabled) {
    background-color: initial;
    background-color: #d8d8d8;
    cursor: pointer;
    font-weight: 600;
    padding: 2px 4px
}

.SecondBoxForm .nav .nav-item {
    border-left: 1px solid #000 !important
}

.SecondBoxForm .nav .nav-item:last-child .nav-link {
    border-right: 1px solid #000 !important
}

.SecondBoxForm .nav-link:hover {
    background-color: #e2cd92;
    border-color: #977835 #e9ecef;
    color: #000
}

.vl-line-edit-info {
    border-left: 1px solid green;
    height: 95%;
    margin: 16px 0
}

.bandsinfomainbox,
.coordinatesinfomainbox {
    margin-top: 5px
}

.dataMissIformation {
    color: #a93434
}

.archivalinfomainbox,
.clientinfomainbox {
    margin-top: 5px
}

.clientinfomainbox-two {
    margin-top: 5px;
    width: 48%
}

.ArchivalFormSectionHeading {
    font-size: min(3vw, 15px);
    margin-bottom: 0;
    margin-top: 0
}

.ArchivalFormLable {
    color: gray;
    font-size: min(3vw, 12px);
    font-weight: 500;
    margin-bottom: 0;
    margin-top: 4px
}

.ArchivalFormValidationtooltip {
    color: red;
    font-size: min(3vw, 9px);
    font-style: italic;
    margin-left: 3px
}

.ArchivalmaxLengthError {
    color: blue;
    font-size: min(3vw, 9px);
    font-style: italic
}

.MarsPagination,
.MarsPagination button,
.MarsPagination span {
    align-items: center;
    display: flex;
    justify-content: center
}

.MarsPagination button,
.MarsPagination span {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 20%;
    cursor: pointer;
    font-size: 16px;
    height: 23px;
    margin: 0 5px;
    transition: all .3s ease;
    width: 23px
}

.MarsPagination button:hover {
    background-color: #fbfbfb;
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
    color: #007bff
}

.MarsPagination button.active {
    background-color: #007bff;
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
    color: #fff;
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.MarsPagination button:disabled {
    cursor: not-allowed;
    opacity: .5
}

.MarsPagination span {
    cursor: default;
    margin: 0 10px
}

.skeleton {
    -webkit-animation: pulse 1.5s ease-in-out infinite;
    animation: pulse 1.5s ease-in-out infinite;
    background-color: #e0e0e0
}

@-webkit-keyframes pulse {
    0% {
        background-color: #e0e0e0
    }

    50% {
        background-color: #f0f0f0
    }

    to {
        background-color: #e0e0e0
    }
}

@keyframes pulse {
    0% {
        background-color: #e0e0e0
    }

    50% {
        background-color: #f0f0f0
    }

    to {
        background-color: #e0e0e0
    }
}

.skeleton-text {
    height: 1em;
    margin: .5em 0;
    width: 100%
}

.skeleton-row {
    display: flex
}

.skeleton-cell {
    flex: 1 1;
    height: 1.5em;
    margin: .5em
}

.archivaltableloading {
    -webkit-animation: gleam 1.5s infinite;
    animation: gleam 1.5s infinite;
    background: linear-gradient(90deg, #f4f7f9 30%, #ebeff2 47.5%, #ebeff2 52.5%, #f4f7f9 70%);
    background-repeat: no-repeat;
    background-size: 300%;
    border-radius: 3px;
    min-height: 15px;
    width: 100%
}

@-webkit-keyframes gleam {
    0% {
        background-position-x: 100%
    }

    95% {
        background-position-x: 0
    }

    to {
        background-position-x: 0
    }
}

@keyframes gleam {
    0% {
        background-position-x: 100%
    }

    95% {
        background-position-x: 0
    }

    to {
        background-position-x: 0
    }
}

.ArchivalLayerMainBox {
    border-bottom: 1px dotted #ccc;
    display: flex;
    justify-content: flex-end;
    position: relative
}

.ArchivalLayer-control {
    background-color: #f9f9f9;
    border: 2px solid #ccc;
    border-radius: 5px;
    left: 6rem;
    max-width: 100%;
    padding: 5px;
    position: relative;
    top: 5.4rem;
    z-index: 1001
}

.ArchivalLayerMainBox .ArchivalLayer-control:after {
    border: 10px solid transparent;
    border-bottom-color: #ccc;
    content: " ";
    left: -24%;
    margin-left: -5px;
    position: absolute;
    rotate: -89deg;
    top: 3%
}

.ArchivalLayer-item {
    margin-bottom: 10px
}

.ArchivalLayer-item:last-child {
    margin-bottom: 0
}

.ArchivalLayer-item label {
    align-items: center;
    display: flex;
    font-size: 11px
}

.ArchivalLayer-item input[type=checkbox] {
    cursor: pointer;
    margin-right: 10px
}

.ArchivalLayer-control,
.ArchivalLayer-item {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: slideFromLeft;
    animation-name: slideFromLeft;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes slideFromLeft {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes slideFromLeft {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.Extract-metadata-label,
.product-para-label {
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 0
}

.the-archival-legend {
    background-color: #262626;
    border: 1px solid #ff0;
    box-shadow: 4px 5px 3px #262626;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 16px);
    font-weight: 700;
    margin-bottom: 0;
    padding: 1px 10px;
    width: auto
}

.the-archival-fieldset {
    border: 1.5px solid #868282e3;
    border-radius: 8px;
    padding: 5px
}

.products-legend {
    background-color: #ffb871;
    border-style: none;
    border-width: 0;
    box-shadow: 5px 4px 4px #262626;
    color: #000;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 14px);
    font-weight: 700;
    margin-bottom: 0;
    padding: 0 4px;
    width: auto
}

.products-fieldset {
    border: 1.5px solid #868282e3;
    border-radius: 4px;
    padding: 8px
}

.View-table-legend {
    background-color: #ffb871;
    border-style: none;
    border-width: 0;
    box-shadow: 5px 4px 4px #262626;
    color: #000;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 14px);
    font-weight: 700;
    margin-bottom: 0;
    padding: 0 4px;
    width: auto
}

.View-table-fieldset {
    border: 1.5px solid #868282e3;
    border-radius: 4px;
    padding: 8px
}

.hidden-file-input {
    display: none
}

.custom-file-div {
    margin-left: 5px
}

.custom-file-upload {
    background-color: #fcba03;
    border: 2px outset #fcba03;
    border-radius: 4px;
    color: #262626;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    margin-bottom: 0;
    padding: 1px 8px;
    text-align: center;

    &:hover {
        background-color: #e7ad0c
    }
}

.custom-file-upload.disabled {
    background-color: #8a8989;
    border-color: #8a8989
}

.maincontainerbox1 input[type=file] {
    display: none
}

.archivalUploadIcon {
    font-size: 10px
}

.databasetablebox,
.togglebuttonbox {
    display: flex;
    justify-content: space-between;
    padding: 10px 6px 2px
}

.databasetablebox {
    gap: 4px
}

.table-visible {
    background-color: #bf9000;
    border-left: none;
    border-top: none;
    box-shadow: 2px 4px 2px #262626;
    color: #000;
    font-weight: 600
}

.table-hidden {
    background-color: #fdd35d;
    border: 2px outset #afabab;
    border-left: none;
    border-top: none;
    color: #000
}

.maincontainerbox2-inner-div {
    background-color: #494545
}

.cont-box2-legend {
    background-color: #262626;
    border: 1px solid #ff0;
    box-shadow: 4px 5px 3px #262626;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 14px);
    font-weight: 700;
    margin-bottom: 0;
    padding: 1px 10px;
    width: auto
}

.cont-box2-fieldset {
    border: 1.5px solid #868282e3;
    border-radius: 12px;
    padding: 5px
}

.Tab-Btn {
    opacity: 1
}

.view-Info-closebtn:hover {
    background: #be6767;
    border-radius: 24px;
    color: #fff
}

.view-Info-closebtn {
    cursor: pointer;
    margin-left: 43%
}

.Heading-t1-fieldset {
    border: 1.5px solid #868282e3;
    border-radius: 12px;
    padding: 8px
}

.Heading-t1-legend {
    background-color: #262626;
    border: 1px solid #ff0;
    box-shadow: 4px 5px 3px #262626;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 14px);
    font-weight: 700;
    margin-bottom: 2px;
    padding: 1px 10px;
    width: auto
}

#map .leaflet-control-layers-toggle {
    background-image: url(/static/media/LYBase_Layers128.1a7566d8f3b69b73ab35.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: 1px 1px 3px #000, inset -1px -1px 3px #545454, inset 1px 1px 3px #fff;
    box-sizing: border-box;
    display: block;
    height: 3rem;
    width: 4rem
}

#map .OurToolArchival {
    position: absolute;
    top: 8.7rem
}

#map .leaflet-pm-toolbar .control-icon {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    height: 100%;
    width: 100%
}

#map .leaflet-pm-toolbar .leaflet-pm-icon-fullextent {
    background-image: url(/static/media/NAFull_Extent128.4ffae883925af4e5237c.svg)
}

#map .leaflet-pm-toolbar .leaflet-pm-icon-MapPan {
    background-image: url(/static/media/NAPan128.9e8db12755f71a3aff98.svg)
}

#map .leaflet-pm-toolbar .leaflet-pm-icon-FixedZoomOut {
    background-image: url(/static/media/NAFixed_Zoom_Out128.036956bd2cdd5b1974cc.svg)
}

#map .leaflet-pm-toolbar .leaflet-pm-icon-FixedZoomIn {
    background-image: url(/static/media/NAFixed_Zoom_In128.f2ad0312d6e2ea77d911.svg)
}

#map .leaflet-pm-toolbar .leaflet-pm-icon-GoToPreviousExtent {
    background-image: url(/static/media/NAGo_To_Previous_Extent128.c557feef9321d43e528b.svg)
}

#map .leaflet-pm-toolbar .leaflet-pm-icon-GoToNextExtent {
    background-image: url(/static/media/NAGo_To_Next_Extent128.50a4c0b6a2d10e896a36.svg)
}

#map .leaflet-pm-toolbar .leaflet-pm-icon-ZoomSelected {
    background-image: url(/static/media/NAZoom_Select128.ac3292c6d377acabbf0e.svg)
}

#map .leaflet-pm-toolbar .leaflet-pm-icon-SelectedZoomIn {
    background-image: url(/static/media/NAZoom_In128.4e3ad3692fe850813649.svg)
}

#map .leaflet-pm-toolbar .leaflet-pm-icon-SelectedZoomOut {
    background-image: url(/static/media/NAZoom_Out128.943a53fd4c943ab2d254.svg)
}

#map .leaflet-pm-toolbar .leaflet-buttons-control-button {
    background-color: #ededed;
    border-bottom: 1px solid #ccc;
    box-shadow: 1px 1px 5px #000, inset -1px -1px 5px #545454, inset 1px 1px 5px #fff;
    box-sizing: border-box;
    color: #000;
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 4px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 40px;
    z-index: 3
}

#map .leaflet-right .leaflet-pm-toolbar .button-container .leaflet-pm-actions-container {
    left: auto;
    right: 100%
}

#map .button-container .leaflet-pm-actions-container {
    direction: ltr;
    display: block;
    left: 100%;
    position: absolute;
    top: 0;
    white-space: nowrap;
    z-index: 2
}

#map .leaflet-pm-actions-container a {
    background-color: #691d1d;
    box-shadow: 1px 1px 5px #000, inset -1px -1px 5px #545454, inset 1px 1px 5px #fff;
    font-family: Roboto Condensed, sans-serif;
    font-size: .9rem;
    height: 27px;
    letter-spacing: .3px;
    line-height: 28px;
    text-transform: uppercase
}

#map .button-container .leaflet-pm-actions-container.pos-right a.leaflet-pm-action:first-child {
    border-radius: 3px 0 20px 0
}

.zoomoutactive {
    cursor: url(/static/media/NAZoom_Out128.943a53fd4c943ab2d254.svg)
}

.ArchivalSelectedZoomIn {
    cursor: zoom-in
}

.ArchivalSelectedZoomOut {
    cursor: zoom-out
}

.zoomoutactive {
    color: #007bff
}

#map .leaflet-buttons-control-button.active-btn {
    background-color: #ededed;
    border-bottom: 1px solid #ccc;
    box-shadow: 2px 2px 4px #000, inset 3px 3px 5px 2px #989898, inset -3px -3px 5px 1px #c5c5c5;
    color: #000;
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    width: 40px
}

#map .leaflet-pm-toolbar .leaflet-buttons-control-button:active {
    background-color: #ededed;
    border-bottom: 1px solid #ccc;
    box-shadow: 1px 1px 5px #000, inset 10px 10px 15px #545454;
    color: #000
}

.ArchivalTab-container {
    background-color: #d3d3d3 !important
}

.ArchivalTab-container .nav {
    background-color: #fff !important
}

.ArchivalTab-container .nav-link.active {
    background-color: #e2cd92;
    border-color: #dee2e6 #dee2e6 #d3d3d3;
    color: #000;
    font-weight: 600;
    padding: 2px 4px
}

.ArchivalTab-container button:not(:disabled) {
    background-color: bisque;
    color: #000;
    cursor: pointer;
    font-weight: 600;
    padding: 2px 4px
}

.ArchivalTab-container .tab-content {
    overflow: auto;
    scrollbar-width: thin
}

.ArchivalTab-container .fade {
    opacity: 1
}

.ArchivalTab-container .nav-link:hover {
    background-color: #d3d3d3;
    border-color: #bdbebf #e9ecef #977835;
    color: #000
}

.ArchivalTab-container .nav-tabs {
    border-bottom: 1px solid #d3d3d3
}

.ArchivalTab-container .nav-tabs>li {
    float: left;
    margin-bottom: 0
}

.ArchivalTab-container .nav>li {
    display: block;
    position: relative
}

.ArchivalTab-container .nav-link {
    margin: 0;
    text-decoration: none;
    transition: color .3s
}

.Read-xml-Tabs-closed {
    top: 4px
}

.Read-xml-Tabs-closed,
.View-Info-Tabs-closed {
    color: #000;
    cursor: pointer;
    font-weight: 700;
    position: absolute;
    right: 1rem
}

.View-Info-Tabs-closed {
    top: 5px
}

.Read-xml-Tabs-closed:hover,
.View-Info-Tabs-closed:hover {
    color: red
}

.vertical-line {
    background-color: #ff0303;
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 2px
}

.ArchivalTab-container .nav .nav-item {
    border-left: 1px solid #000 !important
}

.ArchivalTab-container .View-Info-Tabs .nav-item:last-child {
    border-right: 1px solid #000 !important
}

.read-xml-file-tab-container .fade {
    opacity: 1
}

.read-xml-file-tab-container .nav {
    background-color: #fff !important
}

@media (min-width:768px) and (max-width:991px) {
    .maincontainerbox1 {
        padding: 5px
    }

    .the-archival-fieldset {
        border-radius: 5px;
        padding: 3px
    }

    .the-archival-legend {
        font-size: min(2vw, 12px);
        padding: 1px 3px
    }

    .products-fieldset {
        padding: 0 0 5px
    }

    .products-legend {
        box-shadow: 3px 2px 2px #262626;
        font-size: min(2vw, 10px);
        padding: 0 3px
    }

    .dropdown-flex-container {
        display: block
    }

    .product-para-label {
        font-size: 10px;
        font-weight: 300
    }

    .inpuselectionoption {
        font-size: 10px
    }

    .Extract-metadata-label {
        font-size: 10px;
        font-weight: 300
    }

    .ErrorShowDisableUplodBtn {
        font-size: 6px;
        margin-left: 3px
    }

    .dimFileName_class,
    .file-path {
        font-size: 10px;
        padding: 1px
    }

    .custom-file-upload {
        border-width: 1px;
        padding: 0 4px
    }

    .ClearExtract-btn-div,
    .Extract-btn-div {
        padding: 4px 0
    }

    .tooltip-inner {
        display: none
    }

    .Ext-img-info,
    .ReloadButton {
        font-size: 10px;
        padding: 1px 10px
    }

    .Ext-img-info.disabled,
    .ReloadButton.disabled {
        border: 2px outset #aa76290f
    }

    .togglebuttonbox {
        display: flex;
        flex-direction: column;
        padding: 5px 2rem 2px;
        row-gap: 4px
    }

    .editinfo-btn,
    .map-btn,
    .readxml-btn,
    .viewinfo-btn {
        font-size: 10px;
        font-weight: 600
    }

    .View-table-fieldset {
        padding: 0 0 5px
    }

    .View-table-legend {
        box-shadow: 3px 2px 2px #262626;
        font-size: min(2vw, 10px);
        padding: 0 3px
    }

    .databasetablebox {
        display: flex;
        flex-direction: column;
        padding: 5px 2rem 2px;
        row-gap: 4px
    }

    .button1,
    .button2,
    .button3 {
        font-size: 10px
    }

    .tooltipDownloadtimer {
        display: flex;
        flex-direction: column;
        margin: .5rem 3rem;
        row-gap: 4px
    }

    .Reset-btn,
    .submit_taks {
        margin-bottom: 4px
    }

    .Quit-btn,
    .Reset-btn,
    .shapefileExport,
    .submit_taks {
        font-size: 12px
    }

    .Quit-btn.disabled,
    .Reset-btn.disabled,
    .shapefileExport.disabled,
    .submit_taks.disabled {
        border: 2px outset #afabab2b
    }

    .table-visible {
        box-shadow: 2px 2px 2px #262626
    }

    .ArchivalTab-content-container {
        height: 55.2vh
    }

    .tablebox {
        height: 23.7vh
    }

    .ArchivalTabs {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        padding: 5px
    }

    .Archivaltab {
        font-size: 12px;
        margin: 0;
        padding: 0 .6rem
    }

    .Search-bar-XML {
        margin: 3px;
        padding: 2px;
        right: .5rem;
        top: 4.2rem;
        width: 26rem
    }

    .Search-bar-input {
        font-size: 12px;
        padding: 2px;
        width: 11rem
    }

    .search-position-text {
        font-size: 10px;
        margin: 0 1px;
        width: 58px
    }

    .search-btn-con {
        font-size: 8px
    }

    .table-heading2,
    .table-heading3,
    .table1-heading {
        font-size: min(2vw, 12px);
        padding-left: 2px
    }

    #xml_data_id,
    .preview-img-content-box p {
        font-size: 10px
    }

    .pre-xmldata {
        height: 54.3vh
    }

    #coordinate {
        width: 25%
    }

    #map .leaflet-control-layers-toggle {
        height: 2.5rem;
        width: 3.5rem
    }

    #map .leaflet-pm-toolbar .leaflet-buttons-control-button {
        height: 25px;
        width: 35px
    }

    #map .ArchivalVextorLayerIcon {
        height: 2.5rem;
        width: 3.5rem
    }

    .polygonebutntoggle {
        top: 46px
    }

    #map .OurToolArchival {
        top: 7.2rem
    }

    .tooltipTextPolygone {
        border-radius: 6px;
        font-size: 9px;
        left: calc(100% + 45px);
        padding: 3px 0;
        position: absolute;
        top: -9px;
        z-index: 1
    }
}

@media (min-width:992px) and (max-width:1299px) {
    .maincontainerbox1 {
        padding: 5px
    }

    .the-archival-fieldset {
        border-radius: 5px;
        padding: 3px
    }

    .the-archival-legend {
        font-size: min(4vw, 14px);
        padding: 1px 4px
    }

    .products-fieldset {
        padding: 0 0 5px
    }

    .products-legend {
        box-shadow: 3px 2px 2px #262626;
        font-size: min(4vw, 11px);
        padding: 0 3px
    }

    .dropdown-flex-container {
        gap: 7px
    }

    .product-para-label {
        font-size: 10px;
        font-weight: 300
    }

    .inpuselectionoption {
        font-size: 10px
    }

    .Extract-metadata-label {
        font-size: 10px;
        font-weight: 300
    }

    .ErrorShowDisableUplodBtn {
        font-size: 7px;
        margin-left: 3px;
        text-shadow: 1px 1px #000
    }

    .dimFileName_class,
    .file-path {
        font-size: 10px;
        padding: 1px
    }

    .custom-file-upload {
        border-width: 1px;
        padding: 0 4px
    }

    .ClearExtract-btn-div,
    .Extract-btn-div {
        padding: 4px 0
    }

    .Ext-img-info,
    .ReloadButton {
        font-size: 11px;
        padding: 1px 10px
    }

    .ArchivalLayer-control {
        left: 5.8rem;
        top: 4.4rem
    }

    .tooltip .arrow,
    .tooltip-inner {
        display: none
    }

    .Ext-img-info.disabled,
    .ReloadButton.disabled {
        border: 2px outset #aa76290f
    }

    .togglebuttonbox {
        display: flex;
        gap: 4px;
        padding: 8px 6px 2px
    }

    .editinfo-btn,
    .map-btn,
    .readxml-btn,
    .viewinfo-btn {
        font-size: 11px;
        padding: 2px 0;
        width: 40%
    }

    .View-table-fieldset {
        padding: 0 0 5px
    }

    .View-table-legend {
        box-shadow: 3px 2px 2px #262626;
        font-size: min(4vw, 11px);
        padding: 0 3px
    }

    .databasetablebox {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px 4rem 2px
    }

    .button1,
    .button2,
    .button3 {
        font-size: 11px
    }

    .tooltipDownloadtimer {
        -webkit-column-gap: 14px;
        column-gap: 14px;
        display: flex;
        margin: .5rem 1rem
    }

    .Reset-btn,
    .submit_taks {
        margin-bottom: 10px
    }

    .Quit-btn,
    .Reset-btn,
    .shapefileExport,
    .submit_taks {
        font-size: 14px
    }

    .Quit-btn.disabled,
    .Reset-btn.disabled,
    .shapefileExport.disabled,
    .submit_taks.disabled {
        border: 2px outset #afabab2b
    }

    .table-visible {
        box-shadow: 2px 2px 2px #262626
    }

    .ArchivalTab-content-container {
        height: 55.1vh
    }

    .tablebox {
        height: 23vh
    }

    .ArchivalTabs {
        display: flex;
        gap: 10px;
        padding: 5px
    }

    .Archivaltab {
        font-size: 12px;
        margin: 0;
        padding: 0 .6rem
    }

    .Search-bar-XML {
        margin: 3px;
        padding: 2px;
        right: .5rem;
        top: 4.2rem;
        width: 26rem
    }

    .Search-bar-input {
        font-size: 12px;
        padding: 2px;
        width: 11rem
    }

    .search-position-text {
        font-size: 10px;
        margin: 0 1px;
        width: 58px
    }

    .search-btn-con {
        font-size: 8px
    }

    .table-heading2,
    .table-heading3,
    .table1-heading {
        font-size: min(2vw, 12px);
        padding-left: 2px
    }

    #xml_data_id,
    .preview-img-content-box p {
        font-size: 10px
    }

    .pre-xmldata {
        height: 54.3vh
    }

    #coordinate {
        width: 20%
    }

    .Fieldset-div {
        margin-bottom: 2rem
    }

    #map .leaflet-control-layers-toggle {
        height: 2.5rem;
        width: 3.5rem
    }

    #map .leaflet-pm-toolbar .leaflet-buttons-control-button {
        height: 25px;
        width: 35px
    }

    #map .ArchivalVextorLayerIcon {
        height: 2.5rem;
        width: 3.5rem
    }

    .polygonebutntoggle {
        top: 46px
    }

    #map .OurToolArchival {
        top: 7.2rem
    }

    .tooltipTextPolygone {
        border-radius: 6px;
        font-size: 9px;
        left: calc(100% + 45px);
        padding: 4px 0;
        top: -10px;
        transition: visibility .3s ease;
        z-index: 1
    }
}

@media (min-width:1300px) and (max-width:1750px) {
    .maincontainerbox1 {
        padding: 5px
    }

    .the-archival-legend {
        font-size: min(4vw, 15px)
    }

    .products-fieldset {
        padding: 0 0 5px
    }

    .products-legend {
        font-size: min(4vw, 12px);
        padding: 0 4px
    }

    .dropdown-flex-container {
        row-gap: 4px
    }

    .inpuselectionoption {
        font-size: 11px
    }

    .ErrorShowDisableUplodBtn {
        font-size: 8px;
        margin-left: 3px;
        text-shadow: 1px 2px #000
    }

    .dimFileName_class,
    .file-path {
        font-size: 11px
    }

    .ClearExtract-btn-div,
    .Extract-btn-div {
        margin-top: 0;
        padding: 6px 0
    }

    .custom-file-upload {
        padding: 0 7px
    }

    .Ext-img-info,
    .ReloadButton {
        font-size: 12px;
        padding: 3px 14px
    }

    .ArchivalLayer-control {
        top: 4.4rem
    }

    .Ext-img-info.disabled,
    .ReloadButton.disabled {
        border: 2px outset #aa76290f
    }

    .togglebuttonbox {
        display: flex;
        gap: 4px;
        padding: 8px 6px 2px
    }

    .editinfo-btn,
    .map-btn,
    .readxml-btn,
    .viewinfo-btn {
        font-size: 12px;
        padding: 2px;
        width: 40%
    }

    .View-table-fieldset {
        padding: 0 0 5px
    }

    .View-table-legend {
        font-size: min(4vw, 12px);
        padding: 0 4px
    }

    .button1,
    .button2,
    .button3 {
        font-size: 11px;
        padding: 2px 0
    }

    .tooltipDownloadtimer {
        -webkit-column-gap: 16px;
        column-gap: 16px;
        margin: 2rem 1rem
    }

    .Reset-btn,
    .submit_taks {
        margin-bottom: 2rem
    }

    .Quit-btn,
    .Reset-btn,
    .shapefileExport,
    .submit_taks {
        font-size: 16px
    }

    .Quit-btn.disabled,
    .Reset-btn.disabled,
    .shapefileExport.disabled,
    .submit_taks.disabled {
        border: 2px outset #afabab2b
    }

    .read-xml-file-tab-container .Read-XMLFileCount {
        font-size: 11px
    }

    .ArchivalTab-content-container {
        height: 53.8vh
    }

    .tablebox {
        height: 23vh
    }

    .ArchivalTabs {
        display: flex;
        gap: 10px;
        padding: 5px
    }

    .Archivaltab {
        font-size: 14px;
        padding: 0 .6rem
    }

    .Search-bar-XML {
        margin: 3px;
        padding: 2px;
        right: .5rem;
        top: 4.6rem;
        width: 26rem
    }

    .Search-bar-input {
        font-size: 12px;
        padding: 2px;
        width: 11rem
    }

    .search-position-text {
        font-size: 10px;
        margin: 0 1px;
        width: 58px
    }

    .search-btn-con {
        font-size: 8px
    }

    .table-heading2,
    .table-heading3,
    .table1-heading {
        font-size: min(2vw, 12px);
        padding-left: 2px
    }

    #xml_data_id,
    .preview-img-content-box p {
        font-size: 10px
    }

    .pre-xmldata {
        height: 53.7vh
    }

    #coordinate {
        width: 17%
    }

    .Mars-main-table {
        margin-bottom: 1px
    }

    .Fieldset-div {
        margin-bottom: 2rem
    }

    #map .leaflet-control-layers-toggle {
        height: 2.7rem;
        width: 3.7rem
    }

    #map .leaflet-pm-toolbar .leaflet-buttons-control-button {
        height: 27px;
        width: 37px
    }

    #map .ArchivalVextorLayerIcon {
        height: 2.7rem;
        width: 3.7rem
    }

    .polygonebutntoggle {
        top: 47px
    }

    #map .OurToolArchival {
        top: 7.2rem
    }

    .tooltipTextPolygone {
        left: calc(100% + 47px);
        top: -9px
    }

    .tooltip .arrow,
    .tooltip-inner {
        display: none
    }

    .SecondBoxForm .tab-content {
        height: 61.5vh;
        margin-bottom: 5px;
        overflow: auto;
        padding-bottom: 5px;
        padding-right: 4px;
        scrollbar-width: thin
    }

    .FirstBoxForm {
        padding-bottom: 4px
    }
}

.loader-overlay {
    align-items: center;
    -webkit-animation: fadeIn .3s forwards;
    animation: fadeIn .3s forwards;
    background: rgba(0, 0, 0, .5);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000
}

.loader-content {
    -webkit-animation: slideIn .3s forwards;
    animation: slideIn .3s forwards;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    opacity: 0;
    overflow: hidden;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    width: 550px
}

.loader-header {
    align-items: center;
    background: #2196f3;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 3px 0
}

.Loaderlogo {
    -webkit-filter: drop-shadow(2px 2px 4px #000);
    filter: drop-shadow(2px 2px 4px black);
    height: 20px;
    margin: 0 5px 0 7px;
    width: 20px
}

.LoaderHeadingBox {
    color: #fff;
    display: grid
}

.LoaderGeopicsHeading {
    flex-grow: 1;
    font-family: Eras ITC, Eras Light ITC, sans-serif;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0;
    margin-left: 5px
}

.LoaderTextGeopicx {
    color: #fff;
    font-size: 8px;
    font-style: italic;
    margin-left: 10px
}

.header-text {
    color: #333;
    font-size: 18px
}

.Loadernewclosebox {
    margin-top: 2px;
    padding: 2px
}

.Loadernewclose {
    background-color: hsla(0, 0%, 100%, .15);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 5px
}

.Loadernewclose:hover {
    background-color: #fff;
    color: #333;
    transition: background-color .3s ease
}

.close-btn {
    background-color: initial;
    border: none;
    color: #999;
    font-size: 20px
}

.loader-body {
    padding: 10px
}

.LoaderBodyBox {
    display: grid;
    justify-content: space-around
}

.loaderEfficet {
    -webkit-animation: l5 2s steps(11) infinite;
    animation: l5 2s steps(11) infinite;
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    color: #116d6e;
    font-family: monospace;
    font-size: 20px;
    font-weight: 700;
    margin-left: 39px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.loaderEfficet:before {
    content: "Loading..."
}

@-webkit-keyframes l5 {
    to {
        -webkit-clip-path: inset(0 -1ch 0 0);
        clip-path: inset(0 -1ch 0 0)
    }
}

@keyframes l5 {
    to {
        -webkit-clip-path: inset(0 -1ch 0 0);
        clip-path: inset(0 -1ch 0 0)
    }
}

.checkmark {
    stroke: #4bb71b;
    -webkit-animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    border-radius: 50%;
    box-shadow: inset 0 0 0 #4bb71b;
    display: block;
    height: 40px;
    margin: 0 auto;
    position: relative;
    right: 5px;
    width: 40px
}

.checkmark,
.checkmark__circle {
    stroke-width: 2;
    stroke-miterlimit: 10
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke: #4bb71b;
    fill: #fff;
    -webkit-animation: stroke .6s cubic-bezier(.65, 0, .45, 1) forwards;
    animation: stroke .6s cubic-bezier(.65, 0, .45, 1) forwards
}

.checkmark__check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    -webkit-animation: stroke .3s cubic-bezier(.65, 0, .45, 1) .8s forwards;
    animation: stroke .3s cubic-bezier(.65, 0, .45, 1) .8s forwards;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

@-webkit-keyframes stroke {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes stroke {
    to {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes scale {

    0%,
    to {
        -webkit-transform: none;
        transform: none
    }

    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1)
    }
}

@keyframes scale {

    0%,
    to {
        -webkit-transform: none;
        transform: none
    }

    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1)
    }
}

@-webkit-keyframes fill {
    to {
        box-shadow: inset 0 0 0 30px #4bb71b
    }
}

@keyframes fill {
    to {
        box-shadow: inset 0 0 0 30px #4bb71b
    }
}

.loader-progress {
    background-color: #f0f0f0;
    border: 2px solid;
    border-radius: 10px;
    border-radius: 20px;
    color: #28a745d6;
    height: 14px;
    overflow: hidden;
    padding: 2px;
    position: relative
}

.progress-bar {
    background-color: #28a745d6;
    border-radius: 10px;
    height: 100%
}

.loader-buttons {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px
}

.ok-btn,
.pause-btn,
.resume-btn {
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    padding: 5px 30px;
    transition: background-color .3s ease
}

.pause-btn {
    background-color: #f44336
}

.resume-btn {
    background-color: #4caf50
}

.ok-btn {
    background-color: #2196f3
}

.ok-btn:hover,
.pause-btn:hover,
.resume-btn:hover {
    background-color: rgba(0, 0, 0, .9)
}

.cancel-btn {
    background-color: #ff4d4f;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 17px;
    padding: 5px 30px
}

.cancel-btn:hover {
    background-color: #ff7875
}

.ExtractData {
    color: #090909;
    font-family: Calibri, sans-serif;
    font-size: 1.7rem;
    font-weight: 500;
    margin-bottom: 7px;
    margin-top: 5px
}

.ok-btn:disabled {
    cursor: not-allowed
}

#ArchivalMyImg:hover {
    opacity: .7
}

.ArchivalMyModalMainBackground {
    background: rgba(0, 0, 0, .66);
    display: block;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 500
}

.ArchivalModal {
    height: 56.7rem;
    padding: 4px;
    width: 71rem
}

.ArchivalModal-Image {
    background: #fff;
    height: 60rem;
    left: 50%;
    overflow: hidden;
    position: absolute;
    top: 40rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 71rem
}

.Caption-closed-btn-div {
    display: flex;
    justify-content: space-between
}

.view-Image-Name {
    align-items: center;
    display: flex;
    padding-left: 5px
}

.closebtn {
    cursor: pointer;
    font-size: 16px;
    padding: 4px
}

.plus {
    top: 7rem
}

.minus,
.plus {
    cursor: pointer;
    font-size: 18px
}

.minus {
    top: 10rem
}

.reset {
    color: #000;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    text-align: center;
    top: 13rem
}

.ArchivalModal span {
    cursor: pointer;
    position: absolute;
    right: -1px
}

.ArchivalModal span:hover {
    background: #d4caca;
    border-radius: 8px
}

.ArchivalModal-content {
    left: 0;
    position: absolute;
    top: 0
}

#ArchivalCaption {
    word-wrap: break-word;
    color: #686868;
    display: block;
    font-size: 12px;
    font-weight: bolder;
    margin: auto;
    padding: 5px 0;
    white-space: normal
}

#ArchivalCaption,
.ArchivalModal-content {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-name: zoom;
    animation-name: zoom
}

.img-View-logo {
    height: 25px;
    margin-right: 4px;
    width: 25px
}

@-webkit-keyframes zoom {
    0% {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.ArchivalClose:focus,
.ArchivalClose:hover {
    color: #bbb;
    cursor: pointer;
    text-decoration: none
}

@media only screen and (max-width:700px) {
    .ArchivalModal-content {
        width: 100%
    }
}

.GeopicxTablesContainerBodyHeader,
.GeopicxTablesfirstHeader {
    background: linear-gradient(90deg, #c0ced8, #d7d9da);
    display: flex;
    justify-content: space-between
}

.GeopicxTablesContainerBodyHeader h5,
.GeopicxTablesfirstHeader h5 {
    margin-bottom: 0;
    margin-top: 0
}

.GeopicxTablesSecondHeaderLeftBoxitems {
    background: linear-gradient(90deg, #c4c4c4, #f5f5f5)
}

.resizable-panel {
    background-color: #fff;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative
}

.handle {
    background: #ccc;
    position: absolute;
    z-index: 1
}

.handle-right {
    right: 0
}

.handle-left,
.handle-right {
    cursor: ew-resize;
    height: 100%;
    top: 0;
    width: 3px
}

.handle-left {
    left: 0
}

.handle-top {
    top: 0
}

.handle-bottom,
.handle-top {
    cursor: ns-resize;
    height: 3px;
    left: 0;
    width: 100%
}

.handle-bottom {
    bottom: 0
}

.handle-bottom-left,
.handle-bottom-right,
.handle-top-left,
.handle-top-right {
    height: 3px;
    width: 3px
}

.handle-top-left {
    cursor: nwse-resize;
    left: 0;
    top: 0
}

.handle-top-right {
    cursor: nesw-resize;
    right: 0;
    top: 0
}

.handle-bottom-left {
    bottom: 0;
    cursor: nesw-resize;
    left: 0
}

.handle-bottom-right {
    bottom: 0;
    cursor: nwse-resize;
    right: 0
}

.GeopicxTablesMainBoxBody {
    flex: 1 1;
    overflow: auto
}

.GeopicxTables {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%
}

.GeopicxTables th {
    background: #f1f1f1;
    cursor: pointer;
    position: relative
}

.resizer {
    background: rgba(0, 0, 0, .1);
    cursor: col-resize;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 5px
}

.GeopicxTables td,
.GeopicxTables th {
    border: 1px solid #ddd;
    overflow: hidden;
    text-overflow: ellipsis
}

.GeopicxTables th:hover .resizer {
    background: rgba(0, 0, 0, .3)
}

.GeopicxTablesFooterContainer {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.GeopicxTablesTapsNumberofTable {
    background-color: #f0f8ff;
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px
}

.geopicx-tab {
    background-color: #f0f0f0;
    border: 1px solid;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-color: #ccc #ccc #fff;
    cursor: pointer;
    font-size: 11px;
    padding: 2px
}

.geopicx-tab.active {
    background-color: #f0f0f0;
    border: 1px dotted gray;
    font-weight: 700
}

.GeopicxTables td.selectable {
    cursor: pointer
}

.GeopicxTables tr.selected {
    background-color: #70d9e8
}

#GeopicxTablesRecordComplete,
#GeopicxTablesRecordSeletced,
.GeopicxTablesRecordBtn {
    border: 1px solid gray;
    font-size: 1rem
}

.GeopicxHandleRecord {
    height: 20px;
    width: 32px
}

.GeopicxTablesFooter {
    display: flex;
    gap: 1rem;
    padding: 1px
}

.GeopicxTablesMainBoxContainer {
    border-color: #d4d4d4 gray gray #d4d4d4;
    border-style: solid;
    border-width: 1px
}

.GeopicxTablesModalMainContainer {
    align-items: center;
    -webkit-animation: fadeIn .3s forwards;
    animation: fadeIn .3s forwards;
    background: rgba(0, 0, 0, .5);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000
}

.GeopicxTablesmodal-content {
    -webkit-animation: slideIn .3s forwards;
    animation: slideIn .3s forwards;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
    max-width: 100%;
    opacity: 0;
    padding: 10px;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    width: 550px
}

@-webkit-keyframes slideIn {
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes slideIn {
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.GeopicxTablesfieldlistMainBox {
    display: flex;
    gap: 15px
}

.GeopicxTablesfield-listLeftbox {
    border: 1px solid gray;
    max-height: 250px;
    max-width: 100%;
    overflow-y: auto;
    padding: 0 0 5px 5px;
    width: 50%
}

.GeopicxTablesfield-listLeftboxFixed {
    background-color: #fff;
    border-right: 1px solid #ddd;
    font-size: 1.2rem;
    margin-right: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1
}

.GeopicxTablesfield-item label {
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0;
    margin-left: 3px
}

.GeopicxTablesModalFieldsHeader {
    display: flex;
    gap: .3rem;
    padding: 5px 5px 5px 0
}

.GeopicxTablesModalHeaderChecklist,
.GeopicxTablesModalHeaderMoveDown,
.GeopicxTablesModalHeaderMoveToDown,
.GeopicxTablesModalHeaderMoveToTop,
.GeopicxTablesModalHeaderMoveUp,
.GeopicxTablesModalHeaderOptionsTxt,
.GeopicxTablesModalHeaderUnChecklist {
    transition: background-color .3s ease, border .3s ease
}

.GeopicxTablesModalHeaderChecklist,
.GeopicxTablesModalHeaderUnChecklist {
    border: 1px solid gray;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 2px 2px 0
}

.GeopicxTablesModalHeaderChecklist:hover,
.GeopicxTablesModalHeaderUnChecklist:hover {
    background-color: #f0f8ff !important;
    border: 1px solid rgba(98, 181, 254, .316) !important
}

.GeopicxTablesModalHeaderMoveDown,
.GeopicxTablesModalHeaderMoveUp,
.GeopicxTablesModalHeaderOptionsTxt {
    border: 1px solid hsla(0, 0%, 100%, .028);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 1px 5px
}

.GeopicxTablesModalHeaderMoveToDown,
.GeopicxTablesModalHeaderMoveToTop {
    border: 1px solid hsla(0, 0%, 100%, .028);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 1px 2px
}

.GeopicxTablesModalHeaderDirectionDown:hover .GeopicxTablesModalHeaderMoveDown,
.GeopicxTablesModalHeaderDirectionDown:hover .GeopicxTablesModalHeaderMoveToDown,
.GeopicxTablesModalHeaderDirectionUp:hover .GeopicxTablesModalHeaderMoveToDown,
.GeopicxTablesModalHeaderDirectionUp:hover .GeopicxTablesModalHeaderMoveUp,
.GeopicxTablesModalHeaderOptionsBtn:hover .GeopicxTablesModalHeaderMoveToDown,
.GeopicxTablesModalHeaderOptionsBtn:hover .GeopicxTablesModalHeaderOptionsTxt {
    background-color: #f0f8ff !important;
    border: 1px solid rgba(98, 181, 254, .316) !important
}

.GeopicxTablesModalBox {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    position: absolute;
    z-index: 1000
}

.GeopicxTablesModalBoxOption {
    cursor: pointer;
    font-size: 1.2rem;
    padding: 2px;
    transition: background-color .3s ease, border .3s ease
}

.GeopicxTablesModalBoxOption:hover {
    background-color: #f0f8ff
}

.GeopicxTablesmodal-contentTopHeader {
    background-color: #f0f8ff;
    display: flex;
    justify-content: space-between
}

.GeopicxClosebtn {
    cursor: pointer
}

.GeopicxClosebtn:hover {
    background-color: red;
    color: #fff;
    padding: 0 2px
}

.GeopicxTablesModalFieldsRightBoxApperance {
    border: 1px solid gray;
    height: 17.5rem;
    width: 100%
}

.GeopicxTablecollapsible-container {
    margin-bottom: 10px
}

.GeopicxTablecollapsible-button,
.GeopicxTablecollapsible-icon {
    background-color: #d3d3d3;
    cursor: pointer;
    font-size: 1.2rem
}

.GeopicxTablecollapsible-button {
    width: 100%
}

.GeopicxTablecollapsible-containerbox {
    display: flex;
    gap: 5px
}

.GeopicxTablesModalFieldsRightBoxApperancerow td {
    cursor: pointer;
    text-align: left
}

.GeopicxTablesModalFieldsRightBoxApperancerow {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.GeopicxTablesModalFieldsRightBoxApperancerow-item {
    margin: 5px 0
}

.GeopicxTablesModalFieldsRightBoxApperancerow-item select {
    height: 20px;
    width: 50px
}

.GeopicxTablesfield-item.selected {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    font-weight: 700
}

.GeopicxTablesModalFieldsRightBoxApperancerowdetailsbox {
    background-color: #d3d3d382;
    border: 1px solid gray;
    height: 7rem;
    margin-top: 5px;
    padding: 0 0 5px 5px;
    width: 25rem
}

.GeopicxTablesModalFieldsRightBoxApperancerowdetailsbox span {
    font-size: 1.2rem;
    font-style: italic
}

.collapesTitle {
    font-style: italic;
    font-weight: 700
}

.GeopicxTableBtnBox {
    display: flex;
    justify-content: flex-end
}

.GeopicxTableBtnBox button {
    margin-left: 10px;
    margin-top: 10px
}

.FilesQueryModalBox {
    align-items: center;
    -webkit-animation: fadeIn .3s forwards;
    animation: fadeIn .3s forwards;
    background: rgba(0, 0, 0, .5);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000
}

.fields-query-modal {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    font-size: 1.2rem;
    padding: 10px;
    position: relative;
    width: 600px
}

.modal-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px
}

.FilesQueryModalBoxModal-header {
    background-color: #f0f8ff;
    display: flex;
    justify-content: space-between
}

.FilesQueryModalBoxClose-button {
    cursor: pointer
}

.FilesQueryModalBoxClose-button:hover {
    background-color: red;
    color: #fff;
    padding: 0 2px
}

.modal-body {
    gap: 20px
}

.modal-body,
.where-clause-section {
    display: flex;
    flex-direction: column
}

.where-clause-section {
    gap: 10px
}

.field-select,
.operator-select,
.value-input {
    align-items: center;
    display: flex;
    gap: 10px
}

.field-select label,
.operator-select label,
.value-input label {
    font-weight: 700
}

.field-select select,
.operator-select select,
.value-input input {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 8px
}

.where-clause-output {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 10px
}

.modal-footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 20px
}

.modal-footer button {
    background-color: #007bff;
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    padding: 10px 20px
}

.modal-footer button:hover {
    background-color: #0056b3
}

.retrival-home-page-main {
    overflow: hidden
}

.underConstructionOfRetrival {
    font-family: Arial, sans-serif
}

.LoaderOfRetrival {
    -webkit-animation: spin .7s linear infinite;
    animation: spin .7s linear infinite;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #a1db34;
    height: 120px;
    width: 100px
}

.MainContentOfRetrival {
    padding: 20px;
    text-align: center
}

.LoadingSpinnerRetrival {
    left: 874px;
    position: absolute;
    top: 600px
}

.PAragraphOfRetrival {
    color: rgba(99, 15, 15, .774)
}

.HeadingOfLoadingRetrival {
    align-items: center;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
    color: #040547;
    display: flex;
    font-family: FontAwesome;
    justify-content: center;
    margin-top: 80px !important
}

:root {
    --font-family-roboto-condensed: "Roboto Condensed", sans-serif
}

.tools-wrapper {
    height: 821px
}

.clicked-tools-wrapper,
.tools-wrapper {
    background-color: #0089ba;
    color: #868fa0;
    max-width: 440px;
    position: relative;
    z-index: 500
}

.clicked-tools-wrapper {
    height: 100%
}

.search-main-container-box {
    flex-flow: column
}

.open-tools {
    background: #0a4393;
    border-radius: 40px;
    box-shadow: 2px 3px 4px 3px #adacac;
    color: #fff;
    cursor: pointer;
    left: 51px;
    position: absolute;
    text-align: center;
    top: 20px;
    z-index: 2
}

.ToolsOepn,
.open-tools {
    display: block;
    transition: all .4s ease
}

.ToolsOepn {
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    width: 30px
}

#LogoHeader {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 50px;
    justify-content: space-between;
    max-height: 50px;
    min-height: 50px;
    padding: 10px
}

.SearchHeaderLogo {
    height: 3.8vh;
    margin-top: -10px;
    padding-left: -32px;
    width: 100%
}

.SearchHeaderHeading {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    position: absolute;
    top: 6px
}

#LogoHeader,
.Left {
    align-items: center;
    display: flex;
    gap: 5px
}

.toggle-settings {
    align-items: center;
    cursor: pointer;
    display: inherit;
    margin-left: 5px;
    transition: all .5s ease
}

.chevron-collapse {
    border: 2px solid #fff;
    border-radius: 50px;
    height: 30px;
    width: 30px
}

.search-heading-box {
    margin-bottom: 10px
}

.SearchMapBox {
    height: 100%;
    width: 100%;
    z-index: 1
}

.formsearch {
    height: 100%
}

.searchmainheadingbox {
    color: #fff;
    font-family: Glyphicons Halflings;
    font-size: 25px;
    margin-left: 5px
}

.outer-frame-for-container {
    height: 33%;
    width: 100%
}

.searchsubheading {
    color: #eef5ff;
    font-size: 14px;
    font-weight: 700;
    position: relative;
    top: -9px
}

.custom-hr-location,
.search-sub-contanier-box {
    position: relative;
    top: -11px
}

.search-sub-contanier-box {
    height: 190px
}

.search-sub-contanier-box,
.search-sub-contanier-box1 {
    background-color: rgba(3, 3, 3, .7);
    padding: 10px;
    width: 100%
}

.search-sub-contanier-box1 {
    height: 183px;
    position: relative;
    top: -11px
}

.search-buttons-boxs {
    padding: 10px 3px 2px
}

.search-toggle-button-box {
    position: relative;
    top: -15px
}

.bounds,
.selectaoi,
.xylocation {
    max-width: 76px
}

.SelectLocationonMap,
.bounds,
.selectaoi,
.xylocation {
    background-color: #fff;
    border-bottom-width: 2px;
    color: #000;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    padding: 3px;
    transition: all .3s ease;
    width: 100%
}

.SelectLocationonMap {
    max-width: 180px
}

.input-container-box {
    position: relative;
    top: -27px
}

.SearchFilePath {
    font-size: 12px;
    margin-right: 10px;
    max-width: 349px;
    width: 60%
}

.selectAOIasshapefile_label {
    color: #fff;
    font-size: 11px
}

.file-input input[type=file] {
    background-color: beige;
    cursor: pointer;
    font-size: 50px;
    line-height: 0;
    margin: 0;
    opacity: 0;
    padding: 7px 83px 12px 0;
    position: absolute;
    top: 0;
    width: 15%;
    z-index: 999
}

#uploadbtn {
    background-color: #fff;
    border: 2px solid gray;
    border-radius: 5px;
    color: #000;
    font-weight: 500;
    margin-bottom: 10px;
    max-width: 72px;
    width: 100%
}

#uploadbtn,
.view-map1 {
    cursor: pointer;
    font-size: 10px;
    padding: 5px
}

.view-map1 {
    background-color: #5f9ea0;
    background: linear-gradient(135deg, #0c0c0cb3, #0c0c0cb3);
    box-shadow: 0 0 0 1px #adacac;
    color: #fff;
    font-weight: 600;
    width: 23%;
    z-index: 1000
}

.input-XY-locationMainBox {
    display: flex;
    position: relative
}

.xy-input-div {
    margin: 12px 0 0
}

.first-input-X-box {
    max-width: 27rem;
    width: 100%
}

.providexlongitudeindegreedecimal_label {
    color: azure;
    font-size: 10px;
    font-weight: 400;
    margin-bottom: 2px
}

.inputxcoordinate,
.inputycoordinate {
    background-color: #f1e8c1;
    border: none;
    font-size: 12px;
    padding: 2px 2px 2px 6px;
    width: 100%
}

.SearchFilePath::-webkit-input-placeholder,
.inputxcoordinate::-webkit-input-placeholder,
.inputycoordinate::-webkit-input-placeholder {
    font-size: 12px
}

.SearchFilePath::placeholder,
.inputxcoordinate::placeholder,
.inputycoordinate::placeholder {
    font-size: 12px
}

.Aoi-File-path::-webkit-input-placeholder {
    font-size: 12px
}

.Aoi-File-path::placeholder {
    font-size: 12px
}

.Buffer-dist-input {
    background-color: #f1e8c1;
    border: none;
    padding: 2px 2px 2px 6px;
    width: 100%
}

.second-input-Y-box {
    max-width: 27rem;
    width: 100%
}

.provideylatitudeindegreedecimal_label {
    color: azure;
    font-size: 10px;
    font-weight: 400;
    margin-bottom: 0
}

.view-map2 {
    background-color: #9c6515;
    border: 3px outset #aa762926;
    border-left: none;
    border-radius: 14px;
    border-top: none;
    box-shadow: inset 1px 1px 2px #fffaed;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: .5rem 4rem;
    position: relative;
    text-align: center
}

.ViewMap {
    margin-left: 2px;
    position: relative
}

.Outer-border-bounds {
    height: 60%;
    margin-bottom: 3px;
    width: 100%
}

.upper-right-XY-box {
    display: flex;
    justify-content: flex-end
}

.upper-right-X {
    height: 51px;
    width: 187px
}

.upperright-xlongitudeindd_label {
    border-radius: 10px;
    color: #fff;
    font-size: 10px
}

.upper-right-Y {
    height: 51px;
    width: 170px;
    z-index: 9999
}

.upperright-ylatitudeindd_label {
    border-radius: 10px;
    color: #fff;
    font-size: 10px
}

.lower-left-XY-box {
    display: flex;
    height: 60%;
    margin-bottom: 10px;
    position: relative;
    top: -6px;
    width: 100%
}

.lower-left-X {
    height: 51px;
    width: 40%
}

.ResoluationInputFiled::-webkit-input-placeholder,
.daInceAngleINputFiled::-webkit-input-placeholder {
    font-size: 12px
}

.ResoluationInputFiled::placeholder,
.daInceAngleINputFiled::placeholder {
    font-size: 12px
}

.SearchFilePath::-webkit-input-placeholder {
    font-size: 12px
}

.SearchFilePath::placeholder {
    font-size: 12px
}

.input-LowerLeft-X-inDD::-webkit-input-placeholder,
.input-LowerLeft-Y-inDD::-webkit-input-placeholder,
.input-UpperRight-X-inDD::-webkit-input-placeholder,
.input-UpperRight-Y-inDD::-webkit-input-placeholder {
    font-size: 12px
}

.input-LowerLeft-X-inDD::placeholder,
.input-LowerLeft-Y-inDD::placeholder,
.input-UpperRight-X-inDD::placeholder,
.input-UpperRight-Y-inDD::placeholder {
    font-size: 12px
}

.input-selectedx::-webkit-input-placeholder,
.input-selectedy::-webkit-input-placeholder {
    font-size: 12px
}

.input-selectedx::placeholder,
.input-selectedy::placeholder {
    font-size: 12px
}

.lower-left-xlongitudeindd_label {
    border-radius: 10px;
    color: #fff;
    font-size: 10px
}

.lower-left-Y {
    height: 51px;
    width: 43%
}

.lower-left-ylatitudeindd_label {
    border-radius: 10px;
    color: #fff;
    font-size: 10px;
    margin-left: 26px
}

.input-select-location-on-map {
    position: relative
}

.Selected-XY-on-map {
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 2px 8px
}

.first-input-X-on-map {
    display: grid;
    margin: 0;
    padding-left: 0;
    width: 100%
}

.Draw-on-fileName-Input-div {
    display: flex
}

.selectedexlongitudeindegreedecimal_label {
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    margin-bottom: 2px
}

.input-selectedx {
    font-size: 12px;
    width: 170px
}

.second-input-Y-on-map {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding-right: 0 !important;
    width: 50%
}

.y-coordinates-input {
    width: 100%
}

.selectedylatitudeindegreedecimal_label {
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    margin-bottom: 2px;
    width: 100%
}

.input-selectedy {
    font-size: 12px;
    width: 170px
}

::-webkit-input-placeholder {
    color: #777;
    margin: 0;
    padding: 0
}

::placeholder {
    color: #777;
    margin: 0;
    padding: 0
}

.searchByAttributeContainer {
    background: #454545;
    border-radius: 5px;
    margin: 0 0 8px;
    padding: 4px
}

.searchByAttributeContainerheading {
    color: #d6ffff;
    font-size: 14px;
    font-weight: 700
}

.productSearcInputBox {
    display: flex;
    gap: 8px;
    width: 100%
}

.Period-search-container,
.Product-div {
    padding: 4px
}

.periodSearchInputBox {
    display: flex
}

.OtherParamSearcHInputBox,
.addiAttriSearchInputBox {
    display: flex;
    gap: 12px;
    justify-content: left
}

.OtherParamSearcHeading,
.addiAttriHeading,
.periodSearcHeading,
.productSearcHeading {
    color: #b4fbfb;
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline
}

.OtherParamSearcHlable,
.addiAttriSearchlable,
.aoisearchlable1,
.periodSearchlable,
.productsearchlable,
.productsearchlable1 {
    color: azure;
    font-size: 10px;
    font-weight: 400;
    margin-bottom: 2px
}

.aoisearchlable1 {
    left: 5px;
    position: relative;
    top: -5px
}

.periodEndlable,
.periodStartlable {
    color: azure;
    font-size: 10px;
    font-weight: 400;
    margin-bottom: 0
}

.addiAttriSearchlable,
.productsearchlable {
    margin-left: 10px
}

.InpuSelectionOption {
    margin-left: 0
}

.InpuSelectionOption,
.InpuSelectionOption-DataType {
    background-color: #f1e8c1;
    border: none;
    font-size: 12px;
    padding: 2px;
    width: 100%
}

.InpuSelectionOption-Mission {
    background-color: #f1e8c1;
    font-size: 12px
}

.firstProductSearchbox,
.fourthAddiAttriSearchbox,
.secondPeriodSearchbox,
.thirdOtherParamSearchbox {
    margin-bottom: 1rem
}

.fourthAddiAttriSearchbox {
    top: 280px
}

.thirdOtherParamSearchbox {
    top: 200px
}

.secondPeriodSearchbox {
    top: 120px
}

.button-search {
    display: flex;
    gap: 4rem;
    padding: 8px
}

.Get-save-querybtn-div {
    width: 35%
}

.applyQuery-btn-div {
    width: 65%
}

.ResoluationInputFiled {
    background-color: #f1e8c1;
    border: none;
    font-size: 12px;
    padding: 2px 2px 2px 6px;
    width: 50px
}

.ResoluationInputFiled::-webkit-input-placeholder {
    font-size: 10px
}

.ResoluationInputFiled::placeholder {
    font-size: 10px
}

input.CloudCoverINputFiled[type=range] {
    background-color: #fff
}

input.CloudCoverINputFiled[type=range],
input.SnowCoverINputFiled[type=range] {
    accent-color: cyan;
    display: block;
    height: 4px;
    margin-top: 8px;
    width: 100%
}

.Dataprocesslable {
    color: azure;
    font-size: 10px;
    font-weight: 400;
    margin-bottom: 2px
}

.dataProcessingTypeINputFiled {
    background-color: #f1e8c1;
    border: none;
    font-size: 12px;
    padding: 2px;
    width: 100%
}

.daInceAngleINputFiled {
    background-color: #f1e8c1;
    border: none;
    font-size: 12px;
    padding: 2px 2px 2px 6px;
    width: 50px
}

.daInceAngleINputFiled::-webkit-input-placeholder {
    font-size: 10px
}

.daInceAngleINputFiled::placeholder {
    font-size: 10px
}

.SearchCloudCheckBox,
.SearchSnowCheckBox {
    margin-top: 4px
}

.DispalyResposneResult {
    height: 532px;
    overflow: auto
}

.DispalyResposneResult,
.Table-Scroll-Search::-webkit-scrollbar {
    width: 8px
}

.DispalyResposneResult,
.Table-Scroll-Search::-webkit-scrollbar-thumb {
    background: #888
}

.tableStyle {
    overflow-x: scroll;
    overflow-y: scroll;
    text-align-last: left;
    width: 100%
}

.tableStyle tr {
    cursor: pointer
}

.Search-SRNO {
    max-width: 10px;
    min-width: 10px
}

.Search-SRNO,
.Search-TD,
.Search-TD-1 {
    text-align-last: left
}

.Search-TD-1 {
    width: 23%
}

.Search-Action-TD {
    max-width: 150%
}

.Search-Close-button {
    color: red;
    cursor: pointer;
    float: right;
    font-size: 10px;
    font-weight: 700;
    left: 40px;
    position: relative
}

.col-map {
    flex: 0 0 78%;
    max-width: 77.3%
}

.close-search {
    color: #000;
    cursor: pointer;
    float: right;
    font-size: 25px;
    font-weight: 700;
    left: 3px;
    position: relative
}

.close-search:hover {
    color: #f70f0f;
    cursor: pointer;
    text-decoration: none
}

.search-table-font {
    font-size: 10px;
    font-weight: 700;
    top: -2px
}

.searchTableHeadingBox {
    align-items: center;
    background-color: #e6ba8d;
    border: 1px solid #444;
    display: flex;
    justify-content: space-between;
    padding: 2px
}

.search-table-heading {
    color: #333;
    font-size: min(4vw, 14px);
    font-weight: 700;
    margin: 0;
    padding-left: 5px
}

.searchTableClaoseIcon {
    color: #333;
    font-weight: 700;
    margin-top: 0;
    padding: 0 4px
}

.SearchActionsButtons {
    fill: #845ec2;
    color: #845ec2;
    cursor: pointer;
    display: flex;
    font-size: 13px
}

.Action-Download,
.Action-LayerToggle,
.Action-Popup,
.Action-ZoomIn {
    padding: 1px 5px
}

.file-info {
    margin-bottom: 5px
}

.remove-button {
    border: none;
    border-radius: 5px;
    padding: 5px 10px
}

.Search-RemoveButton,
.remove-button {
    background-color: #ff5c5c;
    color: #fff;
    cursor: pointer
}

.Search-RemoveButton {
    border: none;
    border-radius: 15px;
    font-size: 10px;
    margin-left: 8px;
    margin-top: 2px;
    padding: 0 3px
}

.file-upload-modal {
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1
}

.file-upload-modal-dialog {
    background-color: #fff;
    border-radius: 5px;
    max-width: 600px;
    width: 60%
}

.file-upload-modal-content {
    padding: 20px
}

.file-upload-modal-header {
    align-items: center;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px
}

.file-upload-modal-content,
.file-upload-modal-dialog,
.file-upload-modal-header {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.file-upload-modal-body {
    padding: 20px 0
}

.file-upload-modal-footer {
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: flex-end;
    padding-top: 10px
}

.close:hover {
    color: red
}

.InpuSelectionOption-Mission-Drop {
    background-color: #f1e8c1;
    font-size: 12px;
    height: 22px;
    max-height: 58%;
    padding: 2px 2px 2px 7px;
    scrollbar-color: #000;
    scrollbar-width: thin;
    width: 100%
}

.InpuSelectionOption-Mission-DropDown {
    background-color: #f1e8c1;
    border: 1px solid #ccc;
    left: 0;
    max-height: 150px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 100%;
    width: 100%;
    z-index: 10
}

.checkbox-label {
    font-weight: 400;
    margin-bottom: 0
}

.checkbox-hover:hover {
    background-color: #1967d2;
    color: #fff
}

.InpuSelectionOption-Mission-DropDown input[type=checkbox] {
    -webkit-appearance: checkbox;
    appearance: checkbox;
    display: inline-block;
    height: 12px;
    margin: 0 5px 0 0;
    width: 12px
}

.InpuSelectionOption-Mission::-webkit-scrollbar {
    height: 5px;
    width: 5px
}

.InpuSelectionOption-Mission ::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px
}

.InpuSelectionOption-Mission::-webkit-scrollbar-track {
    background-color: initial
}

.Upload-btn {
    padding: 1rem 4px
}

.Empty-file {
    margin-top: -13.5%
}

.unique-dropdown-menu {
    background-color: #fff;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
    display: none;
    max-height: 100px;
    min-width: 160px;
    overflow-y: auto;
    position: absolute;
    z-index: 1
}

.unique-dropdown-menu.show {
    display: block
}

.unique-empty-file {
    padding: 8px
}

.unique-btn-secondary {
    background-color: #6c757d;
    border: none;
    color: #fff;
    cursor: pointer
}

.unique-search-remove-button {
    background-color: #dc3545;
    border: none;
    color: #fff;
    cursor: pointer
}

.unique-dropdown-divider {
    border-top: 1px solid #e9ecef;
    margin: 0;
    padding: 0
}

.unique-dropdown-container {
    bottom: 22%;
    color: #b62323;
    display: inline-block;
    margin-left: 0;
    margin-top: -12%;
    vertical-align: top
}

.unique-dropdown-item {
    background-color: #fff;
    color: #b62323;
    font-size: 12px;
    margin-left: 34px;
    margin-top: 0;
    padding: 2px
}

.dropdown-menu-file {
    color: #fff;
    left: 20%;
    margin-top: 9%;
    position: relative
}

.clicked {
    background-color: #2aa72c;
    color: #f6fbf6;
    padding: 1px 40px;
    text-align: center
}

.dropBOX {
    display: ruby-text;
    display: flex;
    flex-direction: column;
    font-size: 11px;
    height: 100%;
    max-height: 110%;
    overflow-y: auto;
    width: 22rem
}

.dropdowns-toggle:after {
    display: none
}

.Container_Table {
    width: 100%
}

.DropDown-List {
    margin-top: -5.8%;
    max-height: 70%;
    overflow-x: auto;
    padding: 1px;
    width: 60%
}

.clicked-Row-Color {
    background-color: #ffdead
}

.custom-tooltip {
    background-color: rgba(0, 0, 0, .7);
    border: none;
    color: #fff;
    font-size: 14px
}

.info-closed {
    background-color: #fff;
    color: #aaa;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 5px;
    position: absolute;
    right: 24%;
    top: 105px
}

.collapse-icon {
    position: absolute;
    right: 1%
}

.info-label {
    align-items: center;
    display: flex;
    margin: 0;
    min-width: 140px
}

.newpopup-info-content {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    background-color: #fefefe;
    border: 1px solid #888;
    height: auto;
    margin: 100px auto 2.5%;
    max-width: 1000px;
    padding: 10px;
    width: 80%
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.icon-footprints {
    top: 1.2%
}

.export-layer,
.icon-footprints {
    cursor: pointer;
    position: relative
}

.export-layer {
    border-radius: 15px;
    color: #fff;
    font-size: 12px;
    left: 12px;
    padding: 0 3px
}

.arrow-span {
    cursor: pointer;
    padding-top: 2px;
    position: relative;
    right: 20px
}

.new-UploadFiles {
    bottom: 22%;
    display: inline-block;
    left: 5px;
    position: absolute;
    top: 30px;
    vertical-align: top
}

.new-hr {
    left: -25px;
    margin-bottom: 0;
    margin-top: 0;
    position: relative
}

.uploaded-file,
.uploaded-file-list {
    font-size: 13px;
    width: 190px
}

.uploaded-file-list {
    color: #000;
    cursor: pointer
}

.selectAoi-File-Div {
    display: flex;
    position: relative
}

.DropDown-List-UL {
    background-color: #fff;
    color: #000;
    cursor: pointer;
    font-size: 13px;
    left: 0;
    max-height: 93%;
    overflow-y: auto;
    padding-left: 2%;
    position: absolute;
    top: 102.3%;
    width: 92.2%;
    z-index: 1
}

#searchMap,
#searchMap1 {
    width: 100%;
    z-index: 1
}

.search-th-1 {
    max-width: 5%
}

.SearchDownloadAoiReportBtn {
    display: flex;
    left: 210px;
    position: absolute;
    top: 25px
}

.SearchDownloadAoiReportBtn .svg-inline--fa {
    height: 1.6rem
}

.Download-AOI-Icons,
.Download-footsprint-Icon,
.Download-report-Icon {
    background-color: #337ab7;
    border-color: #2e6da4;
    border-radius: 4px;
    color: #fff;
    margin-right: 15px;
    padding: 1px 10px
}

.Download-AOI-Iconsdisabled,
.Download-footsprint-Icondisabled,
.Download-report-Icondisabled {
    background-color: #ccc;
    border-radius: 4px;
    color: #666;
    cursor: not-allowed;
    margin-right: 15px;
    padding: 1px 10px
}

.Table-Scroll-Search {
    height: 27.4vh;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-width: thin
}

.Search-mapbox .leaflet-control-zoom {
    top: -20px
}

.leaflet-bottom .leaflet-control-scale {
    bottom: 5px
}

.leaflet-control-attribution {
    display: none
}

#SearchCoordinate {
    align-items: center;
    background-color: #f0f8ff;
    background: hsla(0, 0%, 100%, .8);
    border: 1px solid #777;
    bottom: .5%;
    box-sizing: border-box;
    color: #000;
    display: flex;
    font-size: 10px;
    font-weight: 600;
    justify-content: center;
    line-height: .9;
    padding: 2px 1px;
    position: absolute;
    right: .9%;
    white-space: nowrap;
    width: 13%;
    z-index: 999
}

#searchMap .leaflet-control-scale-line,
#searchMap1 .leaflet-control-scale-line {
    background: none;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    box-sizing: border-box;
    color: #000;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    left: 5px;
    line-height: 70%;
    margin-bottom: 5px;
    padding: 2px 28px 2px 10px;
    position: absolute;
    text-align: center;
    text-shadow: none;
    white-space: nowrap
}

.AcquisitionModelabel {
    color: azure;
    font-size: 10px;
    font-weight: 400;
    margin-bottom: 2px
}

.InpuSelectionOption-AcquisitionMode {
    background-color: #f1e8c1;
    border: none;
    font-size: 12px;
    margin-left: 0;
    padding: 2px;
    width: 100%
}

.iconfaChevronDown {
    font-size: 11px;
    font-weight: 700
}

.mainTableDataRespo {
    height: 20em;
    overflow: auto
}

.SearchProductTabs {
    margin-top: 10px
}

.SearchNewPopup {
    background-color: rgba(0, 0, 0, .5);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 500
}

.SearchNewfromheader {
    background-color: #0089ba;
    color: azure;
    display: flex;
    height: 33px;
    justify-content: space-between;
    padding: 3px
}

.SearchNewformheading {
    font-weight: 700;
    margin-left: 4px;
    margin-top: 0;
    text-align: center
}

.SearchNewclosebox {
    padding: 2px
}

.SearchNewclose {
    background-color: #fff;
    color: #aaa;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 5px
}

.Maincontainer-search {
    height: 100%;
    width: 100%
}

.Maincontainer-upper {
    background-color: #313030;
    display: flex;
    height: calc(100vh - 130px);
    width: 100%
}

.Search-box-1,
.Search-box-2 {
    height: auto;
    scrollbar-width: none;
    width: 100%
}

.Search-box-1 {
    max-width: 30%
}

.Search-box-1,
.Search-box-2 {
    overflow: auto;
    scrollbar-width: none
}

.Search-box-2 {
    border-left: 1px solid gray;
    max-width: 70%
}

.Search-map-mainDiv {
    background: #494545;
    padding: 10px
}

.Map-Search-fieldset {
    border: 1.5px solid #868282e3;
    border-radius: 4px;
    padding: 5px
}

.Map-Search-legend {
    background-color: #262626;
    border: 1px solid #82827a;
    box-shadow: 4px 5px 3px #262626;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 16px);
    font-weight: 700;
    margin-bottom: 0;
    padding: 1px 10px;
    width: auto
}

.spatialSearch-fieldset-DIV {
    background: #454545;
    border-radius: 5px;
    margin: 6px 0 10px;
    padding: 5px
}

.Head-Search-fieldset {
    border: 1.5px solid #868282e3;
    border-radius: 8px;
    padding: 5px
}

.Head-Search-legend {
    background-color: #262626;
    border: 1px solid #82827a;
    box-shadow: 4px 5px 3px #262626;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 16px);
    font-weight: 700;
    margin-bottom: 0;
    padding: 1px 10px;
    width: auto
}

.Head-Field-set {
    padding: 8px
}

.spatialSearch-fieldset {
    border: 1.5px solid #868282e3;
    border-radius: 4px;
    padding: 5px
}

.spatialSearch-legend {
    background-color: #262626;
    border: 1px solid #82827a;
    box-shadow: 4px 5px 3px #262626;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 14px);
    font-weight: 700;
    margin-bottom: 0;
    padding: 1px 6px;
    width: auto
}

.Aoi-custom-file-div {
    margin-left: -2px
}

.Aoi-hidden-file-input {
    display: none
}

.Aoi-UploadIcon {
    font-size: 11px
}

input[type=file] {
    display: none
}

.Aoi-custom-file-upload {
    background-color: #fcba03;
    border: 2px outset #fcba03;
    border-radius: 4px;
    color: #262626;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    margin-bottom: 0;
    padding: 1px 8px;
    text-align: center;

    &:hover {
        background-color: #e7ad0c
    }
}

.Aoi-File-path {
    background-color: #f1e8c1;
    background-image: none;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555;
    font-size: 12px;
    padding: 2px 2px 2px 6px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%
}

.spatial-Aoi-label {
    color: azure;
    font-size: 10px;
    font-weight: 400;
    margin-bottom: 0
}

.View-on-map-btn {
    background-color: #9c6515;
    border: 3px outset #aa762926;
    border-left: none;
    border-radius: 14px;
    border-top: none;
    box-shadow: inset 1px 1px 2px #fffaed;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: .5rem 4rem;
    position: relative;
    text-align: center
}

.input-XY-location {
    padding: 3px
}

.Viewmap-btnDIv {
    display: flex;
    justify-content: flex-start;
    margin-top: 5px;
    padding: 10px
}

.None-btn {
    color: #fff;
    margin-top: 10px;
    padding: 10px 4px;
    text-align: center
}

.No-spati-sele-label {
    background-color: #c00000;
    border: 1px solid #000;
    font-size: 1.1rem;
    padding: 2px;
    width: 100%
}

.xyLocation-fieldset {
    border: 1.5px solid #868282e3;
    margin-bottom: 1.5rem;
    padding: 0 4px 8px
}

.xyLocation-legend {
    background-color: #ffc000;
    border-style: none;
    border-width: 0;
    box-shadow: 4px 5px 3px #262626;
    color: #000;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 12px);
    font-weight: 700;
    margin-bottom: 0;
    margin-left: 4px;
    padding: 1px 4px;
    width: auto
}

.xyLocation-fieldset-div {
    margin-top: 20px
}

.Buffer-div {
    display: flex;
    margin-left: 0;
    margin-right: 0;
    padding: 0 3px
}

.buffer-type-col {
    display: flex;
    float: left;
    margin: 0;
    padding: 0;
    width: 50%
}

.Buffer-inner-row {
    align-items: center;
    display: flex;
    width: 100%
}

.Label-buffer-type {
    float: left;
    padding-left: 0;
    padding-right: 0;
    width: 40%
}

.LAbelOf-Buffer {
    color: azure;
    font-size: 11px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    width: 100%
}

.circle-box-btn {
    display: flex;
    float: left;
    gap: 5px;
    margin: 0;
    padding: 0;
    width: 100%
}

.buffer-Dist-unit-col {
    flex: 0 0 50%;
    max-width: 50%
}

.Buff-dist-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.buff-dist-l,
.buff-unit-label {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0;
    max-width: 40%;
    padding: 0;
    width: 100%
}

.buff-dist-Input-div {
    font-size: 12px;
    margin: 0;
    max-width: 50%;
    padding: 0;
    width: 100%
}

.Buff-unit-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 1.5rem !important
}

.buff-unit-input {
    margin: 0;
    max-width: 50%;
    padding: 0;
    width: 100%
}

.OptionsSearch {
    background-color: #ebdea9 !important;
    border: 0;
    border-radius: 0 !important;
    font-size: 12px;
    margin: 0;
    padding: 2px 2px 2px 6px;
    width: 100%
}

.Buff-search-btn1 {
    padding: 1px 10px
}

.Buff-search-btn1,
.Buff-search-btn2 {
    background-color: #fcba03;
    border: 1px solid #000;
    border-radius: 2px;
    box-shadow: 2px 2px 4px #000, inset -3px -3px 5px 1px #a96b01, inset 3px 3px 4px 1px #fdf3e2;
    color: #000;
    display: inline-block;
    font-family: Trebuchet MS;
    font-weight: 700;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 2px #fff
}

.Buff-search-btn2 {
    padding: 1px 14px
}

.spec-search-btn {
    cursor: pointer;
    font-family: Roboto Condensed, sans-serif;
    font-family: var(--font-family-roboto-condensed);
    padding: 2px 3px;
    transition: background-color .3s, color .3s
}

.spec-search-btn.active {
    background-color: #f48d05;
    box-shadow: 2px 2px 4px #000, inset 3px 3px 5px 2px #8f5a00, inset -3px -3px 5px 1px #fed27b;
    text-shadow: 1px 1px 2px hsla(0, 0%, 100%, .8)
}

.spec-search-btn.active,
.spec-search-btn.inactive {
    border: 1px solid #000;
    border-radius: 2px;
    color: #000;
    display: inline-block;
    font-family: Roboto Condensed, sans-serif;
    font-family: var(--font-family-roboto-condensed);
    font-weight: 700;
    position: relative;
    width: 100%
}

.spec-search-btn.inactive {
    background-color: #fcba03;
    box-shadow: 2px 2px 4px #000, inset -3px -3px 5px 1px #a96b01, inset 3px 3px 4px 1px #fdf3e2;
    text-shadow: 1px 1px 2px #fff
}

.Leg-square-input {
    box-shadow: 3px 3px 3px #262626;
    margin-right: 8px
}

.xyLocation-legend input {
    margin: 0
}

.drawOn-map-Para {
    background-color: #c00000;
    border: 4px solid #172c51;
    border-radius: 8px;
    color: #fff;
    font-weight: 500;
    margin: 1rem .5rem 0;
    padding: 1rem;
    text-shadow: 1px 2px 2px #000
}

.second-input-Y-on-mapBuffer {
    padding: 6px
}

.drawOn-map-Para p {
    font-size: 1.1rem
}

.bullet-circle-icon {
    color: #ffe842;
    font-size: 8px;
    margin-right: 4px
}

.DrawOn-File-Name-Input {
    background-color: #f1e8c1;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555;
    font-size: 12px;
    padding: 1px 1px 1px 6px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%
}

.DrawOn-File-Name-Input::-webkit-input-placeholder {
    font-size: 12px;
    margin-left: 0
}

.DrawOn-File-Name-Input::placeholder {
    font-size: 12px;
    margin-left: 0
}

.DrawOn-File-custom-file-div {
    height: 22px;
    margin-left: 5px
}

.DrawOnMap-UploadIcon {
    font-size: 10px;
    padding-bottom: 3px
}

.DrawOnMap-file-input {
    display: none
}

.Save-Geo-btn-div {
    padding: 2rem 1rem
}

.GEOMETRY-map-btn {
    background-color: #548235;
    border: 3px outset #66ca208c;
    border-left: none;
    border-radius: 14px;
    border-top: none;
    box-shadow: inset 0 1px 3px #fffaed;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: .5rem 4rem;
    position: relative;
    text-align: center
}

.DrawOnMap-custom-file-upload {
    background-color: #fcba03;
    border: 2px outset #fcba03;
    border-radius: 4px;
    color: #262626;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    margin-bottom: 0;
    padding: 1px 5px;
    text-align: center;

    &:hover {
        background-color: #e7ad0c
    }
}

.Attribute-search-fieldset {
    border: 1.5px solid #868282e3;
    border-radius: 4px;
    padding: 5px
}

.Attribute-search-legend {
    background-color: #262626;
    border: 1px solid #82827a;
    box-shadow: 4px 5px 3px #262626;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 14px);
    font-weight: 700;
    margin-bottom: 0;
    margin-left: 12px;
    padding: 1px 6px;
    width: auto
}

.dropdown-icon {
    float: right;
    margin: 0 4px
}

.Other-para-row {
    display: flex;
    gap: 8px;
    padding: 4px
}

.Other-para-col {
    margin-right: 0;
    padding: 0
}

.atrribute-search-col {
    margin-right: 0;
    padding-left: 0;
    padding-right: 0
}

.Additional-attri-div {
    display: flex;
    padding: 4px
}

.data-processing-div {
    padding-left: 0
}

#date {
    border: 1px solid #aaa;
    color: #aaa;
    outline: none;
    padding: 6px 28px;
    width: 150px
}

.date-container {
    float: left;
    position: relative
}

.date-text {
    left: 12px;
    top: 6px
}

.date-icon,
.date-text {
    color: #aaa;
    position: absolute
}

.date-icon {
    cursor: pointer;
    object-fit: cover;
    right: 25px;
    top: -2px;
    width: 24px
}

.ENDDateINputFiled,
.startDateINputFiled {
    background-color: #f1e8c1;
    border: none;
    font-size: 12px;
    padding: 2px;
    width: 55%
}

.ENDDateINputFiled::-webkit-input-placeholder,
.startDateINputFiled::-webkit-input-placeholder {
    font-size: 12px;
    padding-left: 2px
}

.ENDDateINputFiled::placeholder,
.startDateINputFiled::placeholder {
    font-size: 12px;
    padding-left: 2px
}

.endDateperiodSearch,
.startDateperiodSearch {
    margin-right: 10px;
    max-width: none;
    padding: 0
}

.search-btn-col {
    margin: 0;
    padding: 0
}

.the-fieldset-Bounds {
    border: 2px dashed gray;
    box-sizing: border-box;
    height: 15rem;
    position: relative;
    width: 100%
}

.the-fieldset-Bounds:before {
    border-color: #f48d05 #f48d05 transparent transparent;
    border-style: solid;
    border-width: 2px;
    content: "";
    height: 2vw;
    position: absolute;
    right: -2px;
    top: -2px;
    width: 2vw;
    z-index: 1
}

.the-fieldset-Bounds:after {
    border-color: transparent transparent #f48d05 #f48d05;
    border-style: solid;
    border-width: 2px;
    bottom: 146px;
    content: "";
    height: 11px;
    position: absolute;
    right: -11px;
    width: 11px;
    z-index: 1
}

.Lower-y-label,
.lower-x-label,
.upper-x-label,
.upper-y-label {
    background-color: #161514;
    border: 1px solid gray;
    color: #fff;
    font-family: sans-serif;
    font-size: 9.5px;
    padding: 2px;
    position: absolute;
    text-align: center
}

.upper-x-label {
    padding: 2px 3px;
    right: 21rem;
    top: -11px
}

.upper-x-Input {
    right: 21rem
}

.upper-x-Input,
.upper-y-Input {
    position: absolute;
    top: 12px;
    width: 144px
}

.upper-y-Input {
    right: 5rem
}

.upper-y-label {
    padding: 2px 7px;
    right: 5rem;
    top: -11px
}

.lower-x-label {
    bottom: -11px;
    left: 5rem;
    padding: 2px 6px
}

.lower-x-label:before {
    border-bottom: 2px solid #f48d05;
    border-left: 2px solid #f48d05;
    border-right: 2px solid transparent;
    bottom: 8px;
    content: "";
    height: 2vw;
    left: -53px;
    position: absolute;
    width: 2vw
}

.lower-x-label:after {
    border-left: 2px solid transparent;
    border-right: 2px solid #f48d05;
    border-top: 2px solid #f48d05;
    content: "";
    height: 11px;
    position: absolute;
    right: 193px;
    top: 8px;
    width: 11px
}

.lower-x-Input {
    bottom: 12px;
    left: 5rem;
    position: absolute;
    width: 144px
}

.Lower-y-label {
    bottom: -11px;
    left: 21rem;
    padding: 2px 10px
}

.Lower-y-Input {
    bottom: 12px;
    left: 21rem;
    position: absolute;
    width: 144px
}

.input-LowerLeft-X-inDD,
.input-LowerLeft-Y-inDD,
.input-UpperRight-X-inDD,
.input-UpperRight-Y-inDD {
    background-color: #f1e8c1;
    border: none;
    font-size: 12px;
    padding: 2px 2px 2px 6px;
    width: 100%
}

.input-Bounds {
    margin: 10px 0;
    padding: 5px;
    position: relative;
    width: 100%
}

.ViewMap3 {
    padding-top: 10px;
    position: relative
}

.view-map3 {
    background-color: #9c6515;
    border: 3px outset #aa762926;
    border-left: none;
    border-top: none;
    box-shadow: inset 1px 1px 2px #fffaed;
    cursor: pointer;
    font-size: 14px;
    padding: .5rem 4rem;
    position: relative;
    text-align: center
}

.save-query-btn,
.view-map3 {
    border-radius: 14px;
    color: #fff;
    font-weight: 600
}

.save-query-btn {
    background-color: #00b050;
    border: 4px outset #e7d9d969;
    box-shadow: 3px 3px 5px #262626;
    padding: 4px;
    width: 100%
}

.get-query-btn {
    background-color: #2e75b6;
    border: 4px outset #dbe2e824;
    border-radius: 14px;
    box-shadow: 3px 3px 5px #262626
}

.apply-query-btn,
.get-query-btn {
    color: #fff;
    font-weight: 600;
    padding: 4px;
    width: 100%
}

.apply-query-btn {
    background-color: #548235;
    border: 4px outset #b9c2b345;
    border-radius: 14px;
    box-shadow: 4px 3px 5px #262626
}

.rest-btn {
    background-color: #f93;
    border: 4px outset #fffbf740;
    border-radius: 14px
}

.quit-btn,
.rest-btn {
    box-shadow: 3px 3px 5px #262626;
    font-weight: 600;
    padding: 4px;
    width: 100%
}

.quit-btn {
    background-color: #bfbfbf;
    border: 4px outset #ffeded54;
    border-radius: 14px
}

.quitbtn-div,
.resetbtn-div {
    margin: 0
}

.resetbtn-div {
    padding-left: 0
}

.quitbtn-div {
    padding-right: 0
}

.leaflet-control-custom-zoom a img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

#searchMap .leaflet-control-custom-zoom,
#searchMap1 .leaflet-control-custom-zoom {
    margin-bottom: 20px;
    position: absolute;
    top: 6rem;
    z-index: 1
}

#searchMap .leaflet-control-layers-toggle {
    background-image: url(/static/media/LYBase_Layers128.1a7566d8f3b69b73ab35.svg)
}

#searchMap .leaflet-control-layers-toggle,
#searchMap1 .leaflet-control-layers-toggle {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: 1px 1px 3px #000, inset -1px -1px 3px #545454, inset 1px 1px 3px #fff;
    box-sizing: border-box;
    display: block;
    height: 3rem;
    width: 4rem
}

#searchMap .leaflet-control-layers-expanded .leaflet-control-layers-toggle,
#searchMap1 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    background-image: url(/static/media/LYBase_Layers128.1a7566d8f3b69b73ab35.svg)
}

#searchMap1 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    display: none
}

#searchMap1 .leaflet-control-layers-toggle {
    background-image: url(/static/media/LYBase_Layers128.1a7566d8f3b69b73ab35.svg)
}

#searchMap .leaflet-pm-toolbar .leaflet-pm-icon-marker,
#searchMap1 .leaflet-pm-toolbar .leaflet-pm-icon-marker {
    background-image: url(/static/media/DWDraw_Point128.020bfa76d4999ca811dd.svg)
}

#searchMap .leaflet-pm-toolbar .leaflet-pm-icon-polyline,
#searchMap1 .leaflet-pm-toolbar .leaflet-pm-icon-polyline {
    background-image: url(/static/media/DWDraw_Line128.553df8b7b3c648fe9de3.svg)
}

#searchMap .leaflet-pm-toolbar .leaflet-pm-icon-rectangle,
#searchMap1 .leaflet-pm-toolbar .leaflet-pm-icon-rectangle {
    background-image: url(/static/media/DWDraw_Box_Poly128.f0934ad3725db3f0fda2.svg)
}

#searchMap .leaflet-pm-toolbar .leaflet-pm-icon-polygon,
#searchMap1 .leaflet-pm-toolbar .leaflet-pm-icon-polygon {
    background-image: url(/static/media/DWDraw_Poly128.244b9bb770bda0cda5fd.svg)
}

#searchMap .leaflet-pm-toolbar .leaflet-pm-icon-edit,
#searchMap1 .leaflet-pm-toolbar .leaflet-pm-icon-edit {
    background-image: url(/static/media/DWEdit_Move_Feature128.c8b4fb82e7466266c6d7.svg)
}

#searchMap .leaflet-pm-toolbar .leaflet-pm-icon-fullextent,
#searchMap1 .leaflet-pm-toolbar .leaflet-pm-icon-fullextent {
    background-image: url(/static/media/NAFull_Extent128.4ffae883925af4e5237c.svg)
}

#searchMap .leaflet-pm-toolbar .leaflet-pm-icon-MapPan,
#searchMap1 .leaflet-pm-toolbar .leaflet-pm-icon-MapPan {
    background-image: url(/static/media/NAPan128.9e8db12755f71a3aff98.svg)
}

#searchMap .leaflet-pm-toolbar .leaflet-pm-icon-FixedZoomOut,
#searchMap1 .leaflet-pm-toolbar .leaflet-pm-icon-FixedZoomOut {
    background-image: url(/static/media/NAFixed_Zoom_Out128.036956bd2cdd5b1974cc.svg)
}

#searchMap .leaflet-pm-toolbar .leaflet-pm-icon-FixedZoomIn,
#searchMap1 .leaflet-pm-toolbar .leaflet-pm-icon-FixedZoomIn {
    background-image: url(/static/media/NAFixed_Zoom_In128.f2ad0312d6e2ea77d911.svg)
}

#searchMap .leaflet-pm-toolbar .leaflet-pm-icon-GoToPreviousExtent,
#searchMap1 .leaflet-pm-toolbar .leaflet-pm-icon-GoToPreviousExtent {
    background-image: url(/static/media/NAGo_To_Previous_Extent128.c557feef9321d43e528b.svg)
}

#searchMap .leaflet-pm-toolbar .leaflet-pm-icon-GoToNextExtent,
#searchMap1 .leaflet-pm-toolbar .leaflet-pm-icon-GoToNextExtent {
    background-image: url(/static/media/NAGo_To_Next_Extent128.50a4c0b6a2d10e896a36.svg)
}

#searchMap .leaflet-pm-toolbar .leaflet-pm-icon-ZoomSelected,
#searchMap1 .leaflet-pm-toolbar .leaflet-pm-icon-ZoomSelected {
    background-image: url(/static/media/NAZoom_Select128.ac3292c6d377acabbf0e.svg)
}

#searchMap .leaflet-pm-toolbar .leaflet-pm-icon-SelectedZoomIn {
    background-image: url(/static/media/NAZoom_In128.4e3ad3692fe850813649.svg)
}

#searchMap .leaflet-pm-toolbar .leaflet-pm-icon-SelectedZoomOut,
#searchMap1 .leaflet-pm-toolbar .leaflet-pm-icon-SelectedZoomIn,
#searchMap1 .leaflet-pm-toolbar .leaflet-pm-icon-SelectedZoomOut {
    background-image: url(/static/media/NAZoom_Out128.943a53fd4c943ab2d254.svg)
}

#searchMap .leaflet-control-custom-zoom .ZoomInIcon,
#searchMap1 .leaflet-control-custom-zoom .ZoomInIcon {
    background-image: url(/static/media/NAZoom_In128.4e3ad3692fe850813649.svg)
}

#searchMap .leaflet-control-custom-zoom .ZoomOutIcon,
#searchMap1 .leaflet-control-custom-zoom .ZoomOutIcon {
    background-image: url(/static/media/NAZoom_Out128.943a53fd4c943ab2d254.svg)
}

#searchMap .leaflet-control-zoom-in,
#searchMap1 .leaflet-control-zoom-in {
    background-color: #ededed;
    border-top: 1px solid #ccc;
    box-shadow: 1px 1px 5px #000, inset -1px -1px 5px #545454, inset 1px 1px 5px #fff;
    color: #000;
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    width: 40px
}

#searchMap .leaflet-control-zoom-out,
#searchMap1 .leaflet-control-zoom-out {
    background-color: #ededed;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 1px 1px 5px #000, inset -1px -1px 5px #545454, inset 1px 1px 5px #fff;
    color: #000;
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    width: 40px
}

#searchMap .leaflet-control-layers-expanded .leaflet-control-layers-list {
    display: block;
    position: relative
}

#searchMap .leaflet-control-custom-zoom .control-icon,
#searchMap1 .leaflet-control-custom-zoom .control-icon {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    height: 100%;
    width: 100%
}

#searchMap1 .leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    box-sizing: border-box;
    padding: 2px;
    z-index: 3
}

#searchMap .OurTool,
#searchMap1 .OurTool {
    position: absolute;
    top: 5.5rem
}

#searchMap .leaflet-pm-toolbar .leaflet-buttons-control-button,
#searchMap1 .leaflet-pm-toolbar .leaflet-buttons-control-button {
    background-color: #ededed;
    border-bottom: 1px solid #ccc;
    box-shadow: 1px 1px 5px #000, inset -1px -1px 5px #545454, inset 1px 1px 5px #fff;
    color: #000;
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    width: 40px
}

#searchMap .leaflet-pm-actions-container a {
    background-color: #691d1d;
    box-shadow: 1px 1px 5px #000, inset -1px -1px 5px #545454, inset 1px 1px 5px #fff;
    font-family: Roboto Condensed, sans-serif;
    font-size: .9rem;
    height: 27px;
    letter-spacing: .3px;
    line-height: 28px;
    text-transform: uppercase
}

#searchMap .button-container .leaflet-pm-actions-container.pos-right a.leaflet-pm-action:first-child {
    border-radius: 3px 0 0 20px
}

#searchMap .leaflet-pm-toolbar .leaflet-buttons-control-button,
#searchMap1 .leaflet-pm-toolbar .leaflet-buttons-control-button {
    box-sizing: border-box;
    padding: 4px;
    position: relative;
    z-index: 3
}

.OurTool .leaflet-pm-toolbar .button-container a.leaflet-buttons-control-button {
    border-bottom: 1px solid #ccc
}

#searchMap .leaflet-buttons-control-button.active-btn,
#searchMap1 .leaflet-buttons-control-button.active-btn {
    background-color: #ededed;
    border-bottom: 1px solid #ccc;
    box-shadow: 2px 2px 4px #000, inset 3px 3px 5px 2px #989898, inset -3px -3px 5px 1px #c5c5c5;
    color: #000;
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    width: 40px
}

#searchMap .leaflet-pm-toolbar .leaflet-buttons-control-button:active,
#searchMap1 .leaflet-pm-toolbar .leaflet-buttons-control-button:active {
    background-color: #ededed;
    border-bottom: 1px solid #ccc;
    box-shadow: 1px 1px 5px #000, inset 10px 10px 15px #545454;
    color: #000
}

.SearchSelectedZoomIn {
    cursor: zoom-in
}

.SearchSelectedZoomOut {
    cursor: zoom-out
}

.inputxcoordinate.is-invalid,
.inputycoordinate.is-invalid {
    border-color: #dc3545
}

.invalid-feedback {
    position: absolute
}

.invalid-feedback,
.invalid-feedbackbolefx,
.invalid-feedbackbolefy {
    color: orange;
    display: block;
    font-size: .7em
}

.Buff-search-btn1.active,
.Buff-search-btn2.active {
    background-color: #f48d05;
    border: 1px solid #000;
    border-radius: 2px;
    box-shadow: 2px 2px 4px #000, inset 3px 3px 5px 2px #8f5a00, inset -3px -3px 5px 1px #fed27b;
    color: #000;
    display: inline-block;
    font-family: Trebuchet MS;
    font-weight: 700;
    height: 30px;
    position: relative;
    text-shadow: 1px 1px 2px hsla(0, 0%, 100%, .8)
}

.xy-input-div {
    display: flex
}

.datapicker {
    display: inline-block;
    position: relative
}

.hidden-date-input {
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%
}

.calendar-icon {
    cursor: pointer;
    height: 30px;
    width: 30px
}

.MarsSearchPadMar input {
    border: none;
    padding: 2px 2px 2px 6px
}

.Att-search-fieldset-div {
    padding: 4px
}

@media (min-width:768px) and (max-width:991.98px) {
    #SearchCoordinate {
        font-size: 9px;
        max-width: 30%;
        padding: 2px 4px;
        width: auto
    }

    .Search-box-1 {
        padding: 5px
    }

    .Head-Field-set {
        padding: 0
    }

    .Head-Search-fieldset {
        border-radius: 5px;
        padding: 3px
    }

    .Head-Search-legend {
        font-size: min(2vw, 12px);
        padding: 1px 3px
    }

    .spatialSearch-fieldset-DIV {
        margin: 4px 0 8px;
        padding: 4px
    }

    .spatialSearch-fieldset {
        padding: 2px
    }

    .spatialSearch-legend {
        box-shadow: 3px 2px 2px #262626;
        font-size: min(2vw, 10px);
        padding: 0 3px
    }

    .search-buttons-boxs {
        display: flex;
        flex-direction: column;
        padding: .5rem 3rem;
        row-gap: 2px
    }

    .spec-search-btn {
        font-size: min(2vh, 12px);
        padding: 2px 12px
    }

    .None-btn {
        margin-top: 0;
        padding: 4px
    }

    .spatial-Aoi-label {
        font-size: 9px;
        margin-left: 0
    }

    .Aoi-custom-file-upload {
        padding: 0 4px
    }

    .Aoi-File-path {
        font-size: min(2vh, 10px);
        padding: 0
    }

    .Aoi-custom-file-div {
        margin-left: -5px
    }

    .arrow-span {
        padding-top: 0
    }

    .iconfaChevronDown {
        font-size: 10px;
        font-weight: 700
    }

    .View-on-map-btn {
        border: 1px outset #aa762926;
        font-size: min(2vh, 10px);
        padding: .2rem 1rem
    }

    .Upload-btn {
        padding: .3rem
    }

    .xy-input-div {
        flex-direction: column;
        margin-top: 0
    }

    .provide-x-div {
        padding-right: 0
    }

    .provide-y-div {
        padding-left: 0
    }

    .inputxcoordinate,
    .inputycoordinate {
        font-size: 10px;
        padding-left: 3
    }

    .xyLocation-fieldset-div {
        margin-top: 8px
    }

    .xyLocation-legend input {
        height: 10px;
        width: 10px
    }

    .xyLocation-legend {
        font-size: min(2vw, 9px);
        margin-left: 0
    }

    .Leg-square-input {
        box-shadow: 2px 2px 3px #262626
    }

    .Viewmap-btnDIv {
        padding: 7px 0 0
    }

    .xyLocation-fieldset {
        margin-bottom: .6rem;
        padding: 0 6px 8px
    }

    .buff-unit-input {
        max-width: 60%
    }

    .Buffer-div {
        flex-direction: column;
        padding: 8px 0 0
    }

    .buffer-type-col {
        width: 100%
    }

    .Label-buffer-type {
        max-width: 39%;
        width: 100%
    }

    .Buffer-inner-row {
        display: flex;
        width: 100%
    }

    .Buff-search-btn1,
    .Buff-search-btn2 {
        padding: 3px 6px
    }

    .Buff-search-btn1,
    .Buff-search-btn1.active,
    .Buff-search-btn2,
    .Buff-search-btn2.active {
        font-size: 10px;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        width: 100%
    }

    .buffer-Dist-unit-col {
        max-width: 100%;
        width: 100%
    }

    .buff-dist-Input-div {
        margin: 4px 0;
        max-width: 60%;
        width: 100%
    }

    .Buffer-dist-input {
        font-size: 10px
    }

    .Buffer-dist-input::-webkit-input-placeholder {
        font-size: 10px;
        margin: 0
    }

    .Buffer-dist-input::placeholder {
        font-size: 10px;
        margin: 0
    }

    .Buff-dist-row {
        align-items: center;
        justify-content: flex-start
    }

    .Buff-unit-row {
        justify-content: flex-start;
        margin-top: .5rem !important
    }

    .view-map2 {
        border: 1px outset #aa762926;
        font-size: min(2vh, 10px);
        padding: .2rem 1rem
    }

    .OptionsSearch {
        font-size: 10px;
        padding: 2px
    }

    .drawOn-map-Para {
        border: 2px solid #172c51;
        border-radius: 5px;
        font-weight: 400;
        margin: 0 .2rem;
        padding: .3rem;
        text-shadow: 1px 2px 2px #000
    }

    .drawOn-map-Para p {
        font-size: 10px
    }

    .bullet-circle-icon {
        font-size: 5px;
        margin-right: 0
    }

    .LAbelOf-Buffer {
        font-size: 10px
    }

    .second-input-Y-on-mapBuffer {
        margin-top: 8px;
        padding: 4px
    }

    .Selected-XY-on-map {
        flex-direction: column;
        gap: 4px;
        padding: 2px 4px
    }

    .second-input-Y-on-map {
        width: 100%
    }

    .Attribute-search-fieldset {
        padding: 2px
    }

    .Attribute-search-legend {
        font-size: min(2vw, 10px);
        margin-left: 10px;
        padding: 1px 3px
    }

    .Att-search-fieldset-div {
        margin-top: 4px;
        padding: 4px 4px 0
    }

    .productSearcInputBox {
        flex-direction: column;
        gap: 0
    }

    .InpuSelectionOption,
    .InpuSelectionOption-DataType {
        font-size: 10px
    }

    .InpuSelectionOption-Mission-Drop {
        font-size: 10px;
        height: 20px;
        padding-left: 4px
    }

    .InpuSelectionOption-AcquisitionMode {
        font-size: 10px
    }

    .periodSearchInputBox {
        flex-direction: column
    }

    .ENDDateINputFiled,
    .startDateINputFiled {
        font-size: 10px
    }

    .Other-para-row {
        flex-direction: column
    }

    .ResoluationInputFiled {
        font-size: 10px
    }

    .Additional-attri-div {
        flex-direction: column;
        padding: 0
    }

    .dataProcessingTypeINputFiled {
        font-size: 10px
    }

    .data-incidence-div,
    .data-processing-div {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        width: 100%
    }

    .daInceAngleINputFiled {
        font-size: 10px
    }

    .button-search {
        flex-direction: column;
        gap: 1rem
    }

    .Get-save-querybtn-div,
    .applyQuery-btn-div {
        width: 100%
    }

    .save-query-btn {
        border: 2px outset #e7d9d969;
        font-size: 12px
    }

    .get-query-btn {
        border: 2px outset #dbe2e824;
        font-size: 12px
    }

    .apply-query-btn {
        border: 2px outset #b9c2b345;
        font-size: 12px
    }

    .rest-btn {
        border: 2px outset #fffbf740;
        font-size: 12px
    }

    .quit-btn {
        border: 2px outset #ffeded54;
        font-size: 12px
    }

    .GEOMETRY-map-btn {
        border: 1px outset #718f5c;
        font-size: min(2vh, 10px);
        padding: .2rem 1rem
    }

    .Save-Geo-btn-div {
        padding: .4rem
    }

    .selectedexlongitudeindegreedecimal_label,
    .selectedylatitudeindegreedecimal_label {
        font-size: 10px;
        margin-left: 0
    }

    .view-map3 {
        border: 1px outset #aa762926;
        font-size: min(2vh, 10px);
        padding: .2rem 1rem
    }

    .the-fieldset-Bounds:before {
        height: 1.5vw;
        right: -2px;
        top: -2px;
        width: 1.5vw
    }

    .the-fieldset-Bounds:after {
        bottom: 96px;
        height: 7px;
        right: -7px;
        width: 7px
    }

    .upper-x-label {
        font-size: 8px;
        padding: 0 1px;
        right: 9rem;
        top: -16px;
        width: 70px
    }

    .upper-x-Input {
        position: absolute;
        right: 9rem;
        top: 6px;
        width: 70px
    }

    .input-UpperRight-X-inDD {
        font-size: 9px;
        width: 100%
    }

    .lower-x-label:before {
        bottom: 12px;
        height: 1.5vw;
        left: -13px;
        width: 1.5vw
    }

    .lower-x-label:after {
        height: 7px;
        left: -18px;
        top: 11px;
        width: 7px
    }

    .lower-x-label {
        bottom: -15px;
        font-size: 8px;
        left: 1rem;
        padding: 1px;
        width: 70px
    }

    .lower-x-Input {
        bottom: 13px;
        left: 1rem;
        width: 70px
    }

    .input-LowerLeft-X-inDD {
        font-size: 9px;
        width: 100%
    }

    .Lower-y-label {
        bottom: -15px;
        font-size: 8px;
        left: 9rem;
        padding: 1px 3px;
        width: 70px
    }

    .Lower-y-Input {
        bottom: 13px;
        left: 9rem;
        width: 70px
    }

    .input-LowerLeft-Y-inDD {
        font-size: 9px;
        width: 100%
    }

    .upper-y-label {
        font-size: 8px;
        padding: 0 3px;
        right: 1rem;
        top: -16px;
        width: 70px
    }

    .upper-y-Input {
        right: 1rem;
        top: 6px;
        width: 70px
    }

    .input-UpperRight-Y-inDD {
        font-size: 9px;
        width: 100%
    }

    .the-fieldset-Bounds {
        height: 10rem
    }

    .Other-para-row,
    .Period-search-container,
    .Product-div {
        padding: 0
    }

    .DrawOn-File-Name-Input::-webkit-input-placeholder {
        font-size: 10px
    }

    .DrawOn-File-Name-Input::placeholder {
        font-size: 10px
    }

    .arrow-span {
        right: 16px
    }

    .dropdown-item label {
        font-size: 10px;
        margin-bottom: 0
    }

    .dropdown-item input[type=checkbox] {
        margin: 0
    }

    .DrawOnMap-UploadIcon {
        font-size: 8px
    }

    .Draw-on-fileName-Input-div input {
        padding-left: 2px
    }

    .DropDown-List-UL {
        width: 85.4%
    }

    .uploaded-file-list {
        font-size: 10px
    }

    .Search-RemoveButton {
        border-radius: 15px;
        font-size: 9px;
        margin-top: 2px;
        padding: 2px 3px 0
    }

    .buff-dist-l,
    .buff-unit-label {
        align-items: center;
        display: flex;
        justify-content: center;
        margin: 0;
        max-width: 39.666667%;
        padding: 0;
        width: 100%
    }

    .invalid-feedback {
        position: relative
    }

    .invalid-feedback,
    .invalid-feedbackbolefx,
    .invalid-feedbackbolefy {
        font-family: Arial Narrow, Arial, sans-serif;
        font-size: 7px;
        font-weight: 500;
        letter-spacing: .4px
    }

    .search-table-heading {
        font-size: min(4vw, 13px);
        font-weight: 400
    }

    .search-table-font {
        font-size: 10px
    }

    #searchMap .leaflet-control-layers-toggle,
    #searchMap1 .leaflet-control-layers-toggle {
        height: 2.5rem;
        width: 3.5rem
    }

    #searchMap .leaflet-pm-toolbar .leaflet-buttons-control-button,
    #searchMap1 .leaflet-pm-toolbar .leaflet-buttons-control-button {
        height: 25px;
        width: 35px
    }

    .addiAttriSearchlable,
    .productsearchlable {
        margin-left: 0
    }
}

@media (min-width:992px) and (max-width:1299px) {
    #SearchCoordinate {
        font-size: 9px;
        max-width: 30%;
        padding: 2px 4px;
        width: auto
    }

    .Search-box-1 {
        padding: 5px
    }

    .Head-Field-set {
        padding: 0
    }

    .Head-Search-fieldset {
        border-radius: 5px;
        padding: 3px
    }

    .Head-Search-legend {
        font-size: min(4vw, 13px);
        padding: 1px 3px
    }

    .spatialSearch-fieldset-DIV {
        margin: 4px 0 8px;
        padding: 4px
    }

    .spatialSearch-fieldset {
        padding: 2px
    }

    .spatialSearch-legend {
        box-shadow: 3px 2px 2px #262626;
        font-size: min(2vw, 11px);
        padding: 0 3px
    }

    .search-buttons-boxs {
        display: flex;
        padding: 4px 3px 2px;
        row-gap: 2px
    }

    .spec-search-btn {
        font-size: min(2vh, 7px);
        padding: 4px 1px
    }

    .None-btn {
        margin-top: 0;
        padding: 4px
    }

    .spatial-Aoi-label {
        font-size: 9px;
        margin-left: 0
    }

    .Aoi-custom-file-upload {
        padding: 0 4px
    }

    .Aoi-File-path {
        font-size: min(2vh, 10px);
        padding: 0
    }

    .Aoi-custom-file-div {
        margin-left: -5px
    }

    .arrow-span {
        padding-top: 0
    }

    .iconfaChevronDown {
        font-size: 10px;
        font-weight: 700
    }

    .View-on-map-btn {
        border: 1px outset #aa762926;
        font-size: min(2vh, 10px);
        padding: .2rem 1rem
    }

    .Upload-btn {
        padding: .3rem
    }

    .xy-input-div {
        flex-direction: column;
        gap: 8px;
        margin-top: 0
    }

    .provide-x-div {
        padding-right: 0
    }

    .provide-y-div {
        padding-left: 0
    }

    .inputxcoordinate,
    .inputycoordinate {
        font-size: 10px;
        padding-left: 3px
    }

    .xyLocation-fieldset-div {
        margin-top: 2rem
    }

    .xyLocation-legend input {
        height: 10px;
        width: 10px
    }

    .xyLocation-legend {
        font-size: min(2vw, 9px);
        margin-left: 0
    }

    .Leg-square-input {
        box-shadow: 2px 2px 3px #262626
    }

    .Viewmap-btnDIv {
        padding: 7px 0 0
    }

    .xyLocation-fieldset {
        margin-bottom: .6rem;
        padding: 0 6px 8px
    }

    .Buffer-div {
        flex-direction: column;
        padding: 8px 0 0
    }

    .buffer-type-col {
        width: 100%
    }

    .Label-buffer-type {
        max-width: 42%;
        width: 100%
    }

    .Buffer-inner-row {
        display: flex;
        width: 100%
    }

    .Buff-search-btn1,
    .Buff-search-btn1.active,
    .Buff-search-btn2,
    .Buff-search-btn2.active {
        font-size: 10px;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        width: 100%
    }

    .buffer-Dist-unit-col {
        max-width: 100%;
        width: 100%
    }

    .buff-dist-Input-div {
        margin: 4px 0;
        max-width: 58%;
        width: 100%
    }

    .Buffer-dist-input {
        font-size: 10px
    }

    .Buffer-dist-input::-webkit-input-placeholder {
        font-size: 8px
    }

    .Buffer-dist-input::placeholder {
        font-size: 8px
    }

    .Buff-dist-row,
    .Buff-unit-row {
        align-items: center;
        gap: 4px;
        justify-content: flex-start
    }

    .Buff-unit-row {
        margin-top: .5rem !important
    }

    .view-map2 {
        border: 1px outset #aa762926;
        font-size: min(2vh, 10px);
        padding: .2rem 1rem
    }

    .OptionsSearch {
        font-size: 10px;
        padding: 2px
    }

    .drawOn-map-Para {
        border: 2px solid #172c51;
        border-radius: 5px;
        font-weight: 400;
        margin: 0 .2rem;
        padding: .3rem;
        text-shadow: 1px 2px 2px #000
    }

    .drawOn-map-Para p {
        font-size: 10px
    }

    .bullet-circle-icon {
        font-size: 5px;
        margin-right: 0
    }

    .LAbelOf-Buffer {
        font-size: 10px
    }

    .second-input-Y-on-mapBuffer {
        margin-top: 8px;
        padding: 4px
    }

    .Selected-XY-on-map {
        flex-direction: column;
        gap: 4px;
        padding: 2px 4px
    }

    .second-input-Y-on-map {
        width: 100%
    }

    .Attribute-search-fieldset {
        padding: 2px
    }

    .Attribute-search-legend {
        font-size: min(2vw, 11px);
        margin-left: 10px;
        padding: 1px 3px
    }

    .Att-search-fieldset-div {
        margin-top: 4px;
        padding: 4px 4px 0
    }

    .productSearcInputBox {
        align-items: center;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        justify-items: stretch
    }

    .InpuSelectionOption,
    .InpuSelectionOption-DataType {
        font-size: 10px
    }

    .InpuSelectionOption-Mission-Drop {
        font-size: 10px;
        height: 20px;
        padding-left: 4px
    }

    .InpuSelectionOption-AcquisitionMode {
        font-size: 10px
    }

    .periodSearchInputBox {
        grid-gap: 8px;
        align-items: center;
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr 1fr;
        justify-content: stretch
    }

    .ENDDateINputFiled,
    .startDateINputFiled {
        font-size: 10px
    }

    .Other-para-row {
        flex-direction: column
    }

    .ResoluationInputFiled {
        font-size: 10px
    }

    .Additional-attri-div {
        align-items: center;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: stretch;
        padding: 3px 0
    }

    .dataProcessingTypeINputFiled {
        font-size: 10px
    }

    .data-processing-div {
        max-width: 94%
    }

    .data-incidence-div,
    .data-processing-div {
        padding-left: 0;
        padding-right: 0;
        width: 100%
    }

    .data-incidence-div {
        max-width: 100%
    }

    .daInceAngleINputFiled {
        font-size: 10px
    }

    .button-search {
        gap: 1rem
    }

    .productsearchlable {
        margin-bottom: 2px;
        margin-left: 0
    }

    .addiAttriSearchlable,
    .productsearchlable {
        margin-left: 0
    }

    .resetbtn-div {
        padding-left: 0;
        padding-right: 2px
    }

    .quitbtn-div {
        padding-left: 2px;
        padding-right: 0
    }

    .Get-save-querybtn-div {
        width: 55%
    }

    .applyQuery-btn-div {
        width: 100%
    }

    .save-query-btn {
        border: 2px outset #e7d9d969;
        font-size: 12px;
        padding: 2px
    }

    .get-query-btn {
        border: 2px outset #dbe2e824;
        font-size: 12px;
        padding: 2px
    }

    .apply-query-btn {
        border: 2px outset #b9c2b345;
        font-size: 12px;
        padding: 2px
    }

    .rest-btn {
        border: 2px outset #fffbf740
    }

    .quit-btn,
    .rest-btn {
        font-size: 12px;
        padding: 2px
    }

    .quit-btn {
        border: 2px outset #ffeded54
    }

    .GEOMETRY-map-btn {
        border: 1px outset #718f5c;
        font-size: min(2vh, 10px);
        padding: .3rem 1rem
    }

    .Save-Geo-btn-div {
        padding: .4rem
    }

    .selectedexlongitudeindegreedecimal_label,
    .selectedylatitudeindegreedecimal_label {
        font-size: 10px;
        margin-left: 0
    }

    .view-map3 {
        border: 1px outset #aa762926;
        font-size: min(2vh, 10px);
        padding: .2rem 1rem
    }

    .the-fieldset-Bounds:before {
        height: 1.2vw;
        right: -2px;
        top: -2px;
        width: 1.2vw
    }

    .the-fieldset-Bounds:after {
        bottom: 96px;
        height: 7px;
        right: -7px;
        width: 7px
    }

    .upper-x-label {
        font-size: 8px;
        padding: 0 1px;
        right: 9rem;
        top: -16px;
        width: 70px
    }

    .upper-x-Input {
        position: absolute;
        right: 9rem;
        top: 7px;
        width: 70px
    }

    .input-UpperRight-X-inDD {
        font-size: 9px;
        width: 100%
    }

    .lower-x-label:before {
        bottom: 12px;
        height: 1.2vw;
        left: -13px;
        width: 1.2vw
    }

    .lower-x-label:after {
        height: 7px;
        left: -18px;
        top: 11px;
        width: 7px
    }

    .lower-x-label {
        bottom: -15px;
        font-size: 8px;
        left: 1rem;
        padding: 1px;
        width: 70px
    }

    .lower-x-Input {
        bottom: 13px;
        left: 1rem;
        width: 70px
    }

    .input-LowerLeft-X-inDD {
        font-size: 9px;
        width: 100%
    }

    .Lower-y-label {
        bottom: -15px;
        font-size: 8px;
        left: 9rem;
        padding: 1px 3px;
        width: 70px
    }

    .Lower-y-Input {
        bottom: 13px;
        left: 9rem;
        width: 70px
    }

    .input-LowerLeft-Y-inDD {
        font-size: 9px;
        width: 100%
    }

    .upper-y-label {
        font-size: 8px;
        padding: 0 3px;
        right: 1rem;
        top: -16px;
        width: 70px
    }

    .upper-y-Input {
        right: 1rem;
        top: 7px;
        width: 70px
    }

    .input-UpperRight-Y-inDD {
        font-size: 9px;
        width: 100%
    }

    .the-fieldset-Bounds {
        height: 10rem
    }

    .Other-para-row,
    .Period-search-container,
    .Product-div {
        padding: 3px 0
    }

    .DrawOn-File-Name-Input::-webkit-input-placeholder {
        font-size: 10px
    }

    .DrawOn-File-Name-Input::placeholder {
        font-size: 10px
    }

    .arrow-span {
        right: 16px
    }

    .dropdown-item label {
        font-size: 10px;
        margin-bottom: 0
    }

    .dropdown-item input[type=checkbox] {
        margin: 0 5px 0 0
    }

    .DrawOnMap-UploadIcon {
        font-size: 8px;
        margin-bottom: 2px
    }

    .Draw-on-fileName-Input-div input {
        padding-left: 2px
    }

    .buff-unit-input {
        max-width: 58%
    }

    .endDateperiodSearch,
    .startDateperiodSearch {
        margin-right: 0
    }

    .DropDown-List-UL {
        width: 89.2%
    }

    .uploaded-file-list {
        font-size: 10px
    }

    .Search-RemoveButton {
        border-radius: 15px;
        font-size: 9px;
        margin-top: 2px;
        padding: 2px 3px 0
    }

    .invalid-feedback {
        position: absolute
    }

    .invalid-feedback,
    .invalid-feedbackbolefx,
    .invalid-feedbackbolefy {
        font-family: Arial Narrow, Arial, sans-serif;
        font-size: 7px;
        font-weight: 500;
        letter-spacing: .4px
    }

    .search-table-heading {
        font-size: min(4vw, 13px);
        font-weight: 400
    }

    .search-table-font {
        font-size: 10px
    }

    #searchMap .leaflet-control-layers-toggle,
    #searchMap1 .leaflet-control-layers-toggle {
        height: 2.5rem;
        width: 3.5rem
    }

    #searchMap .leaflet-pm-toolbar .leaflet-buttons-control-button,
    #searchMap1 .leaflet-pm-toolbar .leaflet-buttons-control-button {
        height: 25px;
        width: 35px
    }

    .ENDDateINputFiled::-webkit-input-placeholder,
    .startDateINputFiled::-webkit-input-placeholder {
        font-size: 10px;
        padding-left: 2px
    }

    .ENDDateINputFiled::placeholder,
    .startDateINputFiled::placeholder {
        font-size: 10px;
        padding-left: 2px
    }
}

@media (min-width:1300px) and (max-width:1750px) {
    #SearchCoordinate {
        font-size: 9px;
        max-width: 30%;
        padding: 2px 4px;
        width: auto
    }

    .Search-box-1 {
        padding: 5px
    }

    .Head-Field-set {
        padding: 0
    }

    .Head-Search-fieldset {
        border-radius: 5px;
        padding: 3px
    }

    .Head-Search-legend {
        font-size: min(4vw, 14px);
        padding: 1px 3px
    }

    .spatialSearch-fieldset-DIV {
        margin: 4px 0 8px;
        padding: 4px
    }

    .spatialSearch-fieldset {
        padding: 4px
    }

    .spatialSearch-legend {
        box-shadow: 3px 2px 2px #262626;
        font-size: min(4vw, 12px);
        padding: 0 3px
    }

    .search-buttons-boxs {
        display: flex;
        padding: 4px 3px 2px;
        row-gap: 2px
    }

    .spec-search-btn {
        font-size: min(2vh, 10px);
        padding: 3px 1px
    }

    .None-btn {
        margin-top: 0;
        padding: 4px
    }

    .spatial-Aoi-label {
        font-size: 9px;
        margin-left: 0
    }

    .Aoi-custom-file-upload {
        padding: 0 4px
    }

    .Aoi-File-path {
        font-size: min(2vh, 10px);
        padding: 0
    }

    .Aoi-custom-file-div {
        margin-left: -5px
    }

    .arrow-span {
        padding-top: 0
    }

    .iconfaChevronDown {
        font-size: 10px
    }

    .View-on-map-btn {
        border: 1px outset #aa762926;
        font-size: min(2vh, 10px);
        padding: .4rem 2rem
    }

    .Upload-btn {
        padding: .3rem
    }

    .xy-input-div {
        margin-top: 0
    }

    .provide-y-div {
        padding-left: 0
    }

    .inputxcoordinate,
    .inputycoordinate {
        font-size: 10px;
        padding-left: 3
    }

    .xyLocation-fieldset-div {
        margin-top: 2rem
    }

    .xyLocation-legend input {
        height: 10px;
        width: 10px
    }

    .xyLocation-legend {
        font-size: min(2vw, 10px);
        margin-left: 0
    }

    .Leg-square-input {
        box-shadow: 2px 2px 3px #262626
    }

    .Viewmap-btnDIv {
        padding: 7px 0 0
    }

    .xyLocation-fieldset {
        margin-bottom: .6rem;
        padding: 0 6px 8px
    }

    .Buffer-div {
        gap: 8px;
        padding: 8px 0 0
    }

    .buffer-type-col {
        width: 100%
    }

    .Label-buffer-type {
        max-width: 30%;
        width: 100%
    }

    .Buffer-inner-row {
        display: flex;
        gap: 4px;
        width: 100%
    }

    .Buff-search-btn1,
    .Buff-search-btn1.active,
    .Buff-search-btn2,
    .Buff-search-btn2.active {
        font-size: 11px;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        padding: 4px 10px;
        width: 100%
    }

    .buffer-Dist-unit-col {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        width: 100%
    }

    .buff-dist-Input-div {
        margin: 4px 0;
        max-width: 58%;
        width: 100%
    }

    .Buffer-dist-input {
        font-size: 10px
    }

    .Buff-dist-row {
        align-items: center;
        margin-left: 0;
        margin-right: 0
    }

    .Buff-unit-row {
        margin-left: 0;
        margin-right: 0;
        margin-top: .5rem !important
    }

    .view-map2 {
        border: 1px outset #aa762926;
        font-size: min(2vh, 10px);
        padding: .4rem 2rem
    }

    .OptionsSearch {
        font-size: 10px;
        padding: 2px
    }

    .drawOn-map-Para {
        border: 2px solid #172c51;
        border-radius: 5px;
        font-weight: 400;
        margin: 0 .2rem;
        padding: .3rem;
        text-shadow: 1px 2px 2px #000
    }

    .drawOn-map-Para p {
        font-size: 10px
    }

    .bullet-circle-icon {
        font-size: 5px;
        margin-right: 0
    }

    .LAbelOf-Buffer {
        font-size: 10px
    }

    .second-input-Y-on-mapBuffer {
        margin-top: 8px;
        padding: 4px
    }

    .Selected-XY-on-map {
        flex-direction: column;
        gap: 4px;
        padding: 2px 4px
    }

    .second-input-Y-on-map {
        width: 100%
    }

    .Attribute-search-fieldset {
        padding: 4px
    }

    .Attribute-search-legend {
        font-size: min(4vw, 12px);
        margin-left: 10px;
        padding: 1px 3px
    }

    .Att-search-fieldset-div {
        margin-top: 4px;
        padding: 4px 4px 0
    }

    .productSearcInputBox {
        align-items: center;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        justify-items: stretch
    }

    .InpuSelectionOption,
    .InpuSelectionOption-DataType {
        font-size: 10px
    }

    .InpuSelectionOption-Mission-Drop {
        font-size: 10px;
        height: 20px;
        padding-left: 4px
    }

    .InpuSelectionOption-AcquisitionMode {
        font-size: 10px
    }

    .periodSearchInputBox {
        grid-gap: 8px;
        align-items: center;
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: stretch
    }

    .ENDDateINputFiled,
    .ResoluationInputFiled,
    .startDateINputFiled {
        font-size: 10px
    }

    .Additional-attri-div {
        align-items: center;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: stretch;
        padding: 4px 0
    }

    .dataProcessingTypeINputFiled {
        font-size: 10px
    }

    .data-incidence-div,
    .data-processing-div {
        max-width: 95%;
        padding-left: 0;
        padding-right: 0;
        width: 100%
    }

    .daInceAngleINputFiled {
        font-size: 10px
    }

    .button-search {
        gap: 1rem
    }

    .resetbtn-div {
        padding-left: 0;
        padding-right: 2px
    }

    .quitbtn-div {
        padding-left: 2px;
        padding-right: 0
    }

    .Get-save-querybtn-div {
        width: 55%
    }

    .applyQuery-btn-div {
        width: 100%
    }

    .save-query-btn {
        border: 2px outset #e7d9d969;
        font-size: 12px
    }

    .get-query-btn {
        border: 2px outset #dbe2e824;
        font-size: 12px
    }

    .apply-query-btn {
        border: 2px outset #b9c2b345;
        font-size: 12px
    }

    .rest-btn {
        border: 2px outset #fffbf740;
        font-size: 12px
    }

    .quit-btn {
        border: 2px outset #ffeded54;
        font-size: 12px
    }

    .GEOMETRY-map-btn {
        border: 1px outset #718f5c;
        font-size: min(2vh, 10px);
        padding: .4rem 2rem
    }

    .Save-Geo-btn-div {
        padding: 1rem .4rem
    }

    .selectedexlongitudeindegreedecimal_label,
    .selectedylatitudeindegreedecimal_label {
        font-size: 10px;
        margin-left: 0
    }

    .view-map3 {
        border: 1px outset #aa762926;
        font-size: min(2vh, 10px);
        padding: .4rem 2rem
    }

    .the-fieldset-Bounds:before {
        height: 1.2vw;
        right: -2px;
        top: -2px;
        width: 1.2vw
    }

    .the-fieldset-Bounds:after {
        bottom: 116px;
        height: 7px;
        right: -7px;
        width: 7px
    }

    .upper-x-label {
        font-size: 10px;
        padding: 1px 2px;
        right: 12rem;
        top: -16px;
        width: 90px
    }

    .upper-x-Input {
        position: absolute;
        right: 12rem;
        top: 15px;
        width: 89px
    }

    .input-UpperRight-X-inDD {
        font-size: 11px;
        padding: 0 0 0 5px;
        width: 100%
    }

    .lower-x-label:before {
        bottom: 12px;
        height: 1.2vw;
        left: -23px;
        width: 1.2vw
    }

    .lower-x-label:after {
        height: 7px;
        left: -28px;
        top: 16px;
        width: 7px
    }

    .lower-x-label {
        bottom: -15px;
        font-size: 10px;
        left: 2rem;
        padding: 1px;
        width: 89px
    }

    .lower-x-Input {
        bottom: 17px;
        left: 2rem;
        width: 89px
    }

    .input-LowerLeft-X-inDD {
        font-size: 11px;
        padding: 0 0 0 5px;
        width: 100%
    }

    .Lower-y-label {
        bottom: -15px;
        font-size: 10px;
        left: 12rem;
        padding: 1px 3px;
        width: 89px
    }

    .Lower-y-Input {
        bottom: 17px;
        left: 12rem;
        width: 89px
    }

    .input-LowerLeft-Y-inDD {
        font-size: 11px;
        padding: 0 0 0 5px;
        width: 100%
    }

    .upper-y-label {
        font-size: 10px;
        padding: 1px 3px;
        right: 2rem;
        top: -16px;
        width: 89px
    }

    .upper-y-Input {
        right: 2rem;
        top: 15px;
        width: 89px
    }

    .input-UpperRight-Y-inDD {
        font-size: 11px;
        padding: 0 0 0 5px;
        width: 100%
    }

    .the-fieldset-Bounds {
        height: 12rem
    }

    .Period-search-container,
    .Product-div {
        padding: 4px 0
    }

    .Other-para-row {
        padding: 6px 0
    }

    .DrawOn-File-Name-Input::-webkit-input-placeholder {
        font-size: 10px
    }

    .DrawOn-File-Name-Input::placeholder {
        font-size: 10px
    }

    .arrow-span {
        right: 16px
    }

    .dropdown-item label {
        font-size: 10px;
        margin-bottom: 0
    }

    .dropdown-item input[type=checkbox] {
        margin: 0
    }

    .DrawOnMap-UploadIcon {
        font-size: 8px;
        margin-bottom: 2px
    }

    .Draw-on-fileName-Input-div input {
        padding-left: 2px
    }

    .buff-unit-input {
        max-width: 58%
    }

    .endDateperiodSearch,
    .startDateperiodSearch {
        margin-right: 0
    }

    .DropDown-List-UL {
        width: 91.9%
    }

    .uploaded-file-list {
        font-size: 10px
    }

    .Search-RemoveButton {
        border-radius: 15px;
        font-size: 9px;
        margin-top: 2px;
        padding: 2px 3px 0
    }

    .invalid-feedback,
    .invalid-feedbackbolefx,
    .invalid-feedbackbolefy {
        font-family: Arial Narrow, Arial, sans-serif;
        font-size: 8px;
        font-weight: 500;
        letter-spacing: .4px
    }

    .search-table-heading {
        font-size: min(4vw, 14px);
        font-weight: 400
    }

    .search-table-font {
        font-size: 12px
    }

    #searchMap .leaflet-control-layers-toggle,
    #searchMap1 .leaflet-control-layers-toggle {
        height: 2.5rem;
        width: 3.5rem
    }

    #searchMap .leaflet-pm-toolbar .leaflet-buttons-control-button,
    #searchMap1 .leaflet-pm-toolbar .leaflet-buttons-control-button {
        height: 25px;
        width: 35px
    }

    .ENDDateINputFiled::-webkit-input-placeholder,
    .startDateINputFiled::-webkit-input-placeholder {
        font-size: 10px;
        padding-left: 2px
    }

    .ENDDateINputFiled::placeholder,
    .startDateINputFiled::placeholder {
        font-size: 10px;
        padding-left: 2px
    }

    .date-icon {
        right: 15px;
        top: 0;
        width: 22px
    }

    .addiAttriSearchlable,
    .productsearchlable {
        margin-left: 0
    }
}

.date-container .react-datepicker__year-read-view--selected-year {
    display: none
}

.date-container .react-datepicker .react-datepicker__year-read-view--down-arrow {
    left: 38px;
    top: -17px
}

.react-datepicker__navigation-icon {
    margin-left: 24px
}

.react-datepicker__navigation-icon--previous {
    margin-right: 45px
}

.react-datepicker__year-dropdown {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.react-datepicker__month-dropdown,
.react-datepicker__year-dropdown {
    grid-gap: 5px;
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(3, 1fr);
    left: 0;
    max-height: 128px;
    overflow-y: scroll;
    padding: 10px
}

.react-datepicker__year-dropdown {
    background-color: #f0f0f0;
    border: 1px solid #aeaeae;
    border-radius: .3rem;
    left: -1% !important;
    position: absolute;
    text-align: center;
    top: 30px;
    width: 100% !important;
    z-index: 1
}

.react-datepicker__year-option {
    cursor: pointer;
    padding: 5px;
    text-align: center
}

.react-datepicker__year-option:hover {
    background-color: #ebd8d8
}

.react-datepicker__year-dropdown::-webkit-scrollbar {
    width: 8px
}

.react-datepicker__year-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1
}

.react-datepicker__year-dropdown::-webkit-scrollbar-thumb {
    background-color: gray;
    border: 2px solid #f1f1f1;
    border-radius: 10px;
    width: 5px
}

.react-datepicker__year-dropdown::-webkit-scrollbar-thumb:hover {
    background-color: green
}

.date-container .react-datepicker .react-datepicker__year-read-view--down-arrow {
    border-style: none;
    font-size: 35px;
    height: 25px;
    left: 9px;
    position: absolute;
    top: -30px;
    width: 22px
}

.date-container .react-datepicker .react-datepicker__year-read-view--down-arrow:hover {
    cursor: pointer
}

.react-datepicker__month-dropdown-container--scroll {
    display: inline-block;
    left: 14px;
    margin: 0 15px;
    position: absolute;
    top: 6px
}

.react-datepicker__month-read-view--selected-month {
    color: transparent
}

.react-datepicker__month-dropdown {
    background-color: #f0f0f0;
    border: 1px solid #aeaeae;
    border-radius: .3rem;
    left: -31px !important;
    position: absolute !important;
    text-align: center;
    top: 30px !important;
    width: auto !important;
    z-index: 1 !important
}

.react-datepicker__month-read-view--down-arrow {
    border-color: #ccc;
    border-style: solid;
    border-style: none !important;
    border-width: 3px 3px 0 0;
    content: "";
    display: block;
    height: 9px;
    position: absolute;
    top: 6px;
    width: 9px
}

.ant-tooltip .ant-tooltip-inner {
    word-wrap: break-word !important;
    background-color: rgba(0, 0, 0, .85) !important;
    border-radius: 6px !important;
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12), 0 9px 28px 8px rgba(0, 0, 0, .05) !important;
    box-sizing: border-box !important;
    color: #fff !important;
    font-size: 10px !important;
    margin: 0 !important;
    min-height: 10px !important;
    min-width: .5em !important;
    padding: 0 5px !important;
    text-align: start !important;
    text-decoration: none !important
}

.download-report-modal {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 160px;
    width: 100%;
    z-index: 100
}

.download-report-modal-dialog {
    background-color: #fff;
    border-radius: 5px;
    font-size: 12px;
    left: 208px;
    position: relative;
    top: 5px;
    width: 207px;
    z-index: 2
}

.download-report-modal-content {
    padding: 5px 7px 10px
}

.Exportabutton {
    background-color: #006400
}

.ExportCancel,
.Exportabutton {
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 4px
}

.ExportCancel {
    background-color: #cb0202d4
}

.DownloadReport {
    color: navy;
    font-weight: 600;
    margin: 0;
    text-align: center
}

.SelectReport {
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    text-align: center;
    width: 90%
}

.LAbelToSElectFile {
    margin-top: 0
}

.buttonExportFile {
    margin-top: 20px
}

.report-cancel-btn {
    color: red;
    cursor: pointer;
    font-weight: bolder;
    left: 190px;
    position: absolute;
    top: 5px
}

.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow,
.react-datepicker__navigation-icon:before,
.react-datepicker__year-read-view--down-arrow {
    border-color: #ccc;
    border-style: solid;
    border-width: 3px 3px 0 0;
    content: "";
    display: block;
    height: 9px;
    position: absolute;
    top: 6px;
    width: 9px
}

.react-datepicker-wrapper {
    border: 0;
    display: inline-block;
    padding: 0
}

.react-datepicker {
    background-color: #fff;
    border: 1px solid #aeaeae;
    border-radius: .3rem;
    color: #000;
    display: inline-block;
    font-family: Helvetica Neue, helvetica, arial, sans-serif;
    font-size: .8rem;
    line-height: normal;
    position: relative
}

.react-datepicker--time-only .react-datepicker__time-container {
    border-left: 0
}

.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
    border-bottom-left-radius: .3rem;
    border-bottom-right-radius: .3rem
}

.react-datepicker-popper {
    line-height: 0;
    z-index: 1
}

.react-datepicker-popper .react-datepicker__triangle {
    stroke: #aeaeae
}

.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
    fill: #f0f0f0;
    color: #f0f0f0
}

.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
    fill: #fff;
    color: #fff
}

.react-datepicker__header {
    background-color: #f0f0f0;
    border-bottom: 1px solid #aeaeae;
    border-top-left-radius: .3rem;
    padding: 8px 0;
    position: relative;
    text-align: center
}

.react-datepicker__header--time {
    padding-bottom: 8px;
    padding-left: 5px;
    padding-right: 5px
}

.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
    border-top-left-radius: 0
}

.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
    border-top-right-radius: .3rem
}

.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__year-dropdown-container--select {
    display: inline-block;
    margin: 0 15px
}

.react-datepicker-time__header,
.react-datepicker-year-header,
.react-datepicker__current-month {
    color: #000;
    font-size: .944rem;
    font-weight: 700;
    margin-top: 0
}

h2.react-datepicker__current-month {
    margin: 0;
    padding: 0
}

.react-datepicker-time__header {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.react-datepicker__navigation {
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    height: 32px;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-align: center;
    text-indent: -999em;
    top: 2px;
    width: 32px;
    z-index: 1
}

.react-datepicker__navigation--previous {
    left: 2px
}

.react-datepicker__navigation--next {
    right: 2px
}

.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
    right: 85px
}

.react-datepicker__navigation--years {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 0
}

.react-datepicker__navigation--years-previous {
    top: 4px
}

.react-datepicker__navigation--years-upcoming {
    top: -4px
}

.react-datepicker__navigation:hover :before {
    border-color: #a6a6a6
}

.react-datepicker__navigation-icon {
    font-size: 20px;
    position: relative;
    top: -1px;
    width: 0
}

.react-datepicker__navigation-icon--next {
    left: -2px
}

.react-datepicker__navigation-icon--next:before {
    left: -7px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.react-datepicker__navigation-icon--previous {
    right: -2px
}

.react-datepicker__navigation-icon--previous:before {
    right: -7px;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg)
}

.react-datepicker__month-container {
    float: left
}

.react-datepicker__year {
    margin: .4rem;
    text-align: center
}

.react-datepicker__year-wrapper {
    display: flex;
    flex-wrap: wrap;
    max-width: 180px
}

.react-datepicker__year .react-datepicker__year-text {
    display: inline-block;
    margin: 2px;
    width: 4rem
}

.react-datepicker__month {
    margin: .4rem;
    text-align: center
}

.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
    display: inline-block;
    margin: 2px;
    width: 4rem
}

.react-datepicker__input-time-container {
    clear: both;
    float: left;
    margin: 5px 0 10px 15px;
    text-align: left;
    width: 100%
}

.react-datepicker__input-time-container .react-datepicker-time__caption,
.react-datepicker__input-time-container .react-datepicker-time__input-container {
    display: inline-block
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
    display: inline-block;
    margin-left: 10px
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
    width: auto
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
    -moz-appearance: textfield
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
    display: inline-block;
    margin-left: 5px
}

.react-datepicker__time-container {
    border-left: 1px solid #aeaeae;
    float: right;
    width: 85px
}

.react-datepicker__time-container--with-today-button {
    border: 1px solid #aeaeae;
    border-radius: .3rem;
    display: inline;
    position: absolute;
    right: -87px;
    top: 0
}

.react-datepicker__time-container .react-datepicker__time {
    background: #fff;
    border-bottom-right-radius: .3rem;
    position: relative
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
    border-bottom-right-radius: .3rem;
    margin: 0 auto;
    overflow-x: hidden;
    text-align: center;
    width: 85px
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
    box-sizing: initial;
    height: calc(195px + .85rem);
    list-style: none;
    margin: 0;
    overflow-y: scroll;
    padding-left: 0;
    padding-right: 0;
    width: 100%
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
    height: 30px;
    padding: 5px 10px;
    white-space: nowrap
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
    background-color: #f0f0f0;
    cursor: pointer
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
    background-color: #216ba5;
    color: #fff;
    font-weight: 700
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
    background-color: #216ba5
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
    color: #ccc
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
    background-color: initial;
    cursor: default
}

.react-datepicker__week-number {
    color: #ccc;
    display: inline-block;
    line-height: 1.7rem;
    margin: .166rem;
    text-align: center;
    width: 1.7rem
}

.react-datepicker__week-number.react-datepicker__week-number--clickable {
    cursor: pointer
}

.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected, .react-datepicker__week-number--keyboard-selected):hover {
    background-color: #f0f0f0;
    border-radius: .3rem
}

.react-datepicker__week-number--selected {
    background-color: #216ba5;
    border-radius: .3rem;
    color: #fff
}

.react-datepicker__week-number--selected:hover {
    background-color: #1d5d90
}

.react-datepicker__week-number--keyboard-selected {
    background-color: #2a87d0;
    border-radius: .3rem;
    color: #fff
}

.react-datepicker__week-number--keyboard-selected:hover {
    background-color: #1d5d90
}

.react-datepicker__day-names {
    margin-bottom: -8px;
    white-space: nowrap
}

.react-datepicker__week {
    white-space: nowrap
}

.react-datepicker__day,
.react-datepicker__day-name,
.react-datepicker__time-name {
    color: #000;
    display: inline-block;
    line-height: 1.7rem;
    margin: .166rem;
    text-align: center;
    width: 1.7rem
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
    cursor: pointer
}

.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
    background-color: #f0f0f0;
    border-radius: .3rem
}

.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
    font-weight: 700
}

.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
    background-color: #3dcc4a;
    border-radius: .3rem;
    color: #fff
}

.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
    background-color: #32be3f
}

.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
    color: #f0f
}

.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
    color: green
}

.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
    background-color: #ff6803;
    border-radius: .3rem;
    color: #fff;
    position: relative
}

.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
    background-color: #333;
    border-radius: 4px;
    bottom: 100%;
    color: #fff;
    left: 50%;
    opacity: 0;
    padding: 4px;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    transition: visibility 0s, opacity .3s ease-in-out;
    visibility: hidden;
    white-space: nowrap
}

.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
    background-color: #cf5300
}

.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
    opacity: 1;
    visibility: visible
}

.react-datepicker__day--in-range,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--selected,
.react-datepicker__month-text--in-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--selected,
.react-datepicker__quarter-text--in-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__year-text--in-range,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--selected {
    background-color: #216ba5;
    border-radius: .3rem;
    color: #fff
}

.react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__day--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover {
    background-color: #1d5d90
}

.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
    background-color: #bad9f1;
    border-radius: .3rem;
    color: #000
}

.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
    background-color: #1d5d90
}

.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {
    background-color: rgba(33, 107, 165, .5)
}

.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range) {
    background-color: #f0f0f0;
    color: #000
}

.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
    color: #ccc;
    cursor: default
}

.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
    background-color: #333;
    border-radius: 4px;
    bottom: 70%;
    color: #fff;
    left: 50%;
    opacity: 0;
    padding: 4px;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    transition: visibility 0s, opacity .3s ease-in-out;
    visibility: hidden;
    white-space: nowrap
}

.react-datepicker__input-container {
    display: inline-block;
    position: relative;
    width: 100%
}

.react-datepicker__input-container .react-datepicker__calendar-icon {
    box-sizing: initial;
    padding: .5rem;
    position: absolute
}

.react-datepicker__view-calendar-icon input {
    padding: 6px 10px 5px 25px
}

.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view,
.react-datepicker__year-read-view {
    border: 1px solid transparent;
    border-radius: .3rem;
    position: relative
}

.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover,
.react-datepicker__year-read-view:hover {
    cursor: pointer
}

.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow {
    border-top-color: #b3b3b3
}

.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow,
.react-datepicker__year-read-view--down-arrow {
    right: -16px;
    top: 0;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg)
}

.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown,
.react-datepicker__year-dropdown {
    background-color: #f0f0f0;
    border: 1px solid #aeaeae;
    border-radius: .3rem;
    left: 25%;
    position: absolute;
    text-align: center;
    top: 30px;
    width: 50%;
    z-index: 1
}

.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover,
.react-datepicker__year-dropdown:hover {
    cursor: pointer
}

.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable,
.react-datepicker__year-dropdown--scrollable {
    height: 150px;
    overflow-y: scroll
}

.react-datepicker__month-option,
.react-datepicker__month-year-option,
.react-datepicker__year-option {
    display: block;
    line-height: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%
}

.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type,
.react-datepicker__year-option:first-of-type {
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem
}

.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type,
.react-datepicker__year-option:last-of-type {
    border-bottom-left-radius: .3rem;
    border-bottom-right-radius: .3rem;
    -webkit-user-select: none;
    user-select: none
}

.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover,
.react-datepicker__year-option:hover {
    background-color: #ccc
}

.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming {
    border-bottom-color: #b3b3b3
}

.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous {
    border-top-color: #b3b3b3
}

.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected,
.react-datepicker__year-option--selected {
    left: 15px;
    position: absolute
}

.react-datepicker__close-icon {
    background-color: initial;
    border: 0;
    cursor: pointer;
    display: table-cell;
    height: 100%;
    outline: 0;
    padding: 0 6px 0 0;
    position: absolute;
    right: 0;
    top: 0;
    vertical-align: middle
}

.react-datepicker__close-icon:after {
    background-color: #216ba5;
    border-radius: 50%;
    color: #fff;
    content: "×";
    cursor: pointer;
    display: table-cell;
    font-size: 12px;
    height: 16px;
    line-height: 1;
    padding: 2px;
    text-align: center;
    vertical-align: middle;
    width: 16px
}

.react-datepicker__close-icon--disabled {
    cursor: default
}

.react-datepicker__close-icon--disabled:after {
    background-color: #ccc;
    cursor: default
}

.react-datepicker__today-button {
    background: #f0f0f0;
    border-top: 1px solid #aeaeae;
    clear: left;
    cursor: pointer;
    font-weight: 700;
    padding: 5px 0;
    text-align: center
}

.react-datepicker__portal {
    align-items: center;
    background-color: rgba(0, 0, 0, .8);
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 2147483647
}

.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__time-name {
    line-height: 3rem;
    width: 3rem
}

@media (max-height:550px),
(max-width:400px) {

    .react-datepicker__portal .react-datepicker__day,
    .react-datepicker__portal .react-datepicker__day-name,
    .react-datepicker__portal .react-datepicker__time-name {
        line-height: 2rem;
        width: 2rem
    }
}

.react-datepicker__portal .react-datepicker-time__header,
.react-datepicker__portal .react-datepicker__current-month {
    font-size: 1.44rem
}

.react-datepicker__children-container {
    height: auto;
    margin: .4rem;
    padding-left: .2rem;
    padding-right: .2rem;
    width: 13.8rem
}

.react-datepicker__aria-live {
    border: 0;
    -webkit-clip-path: circle(0);
    clip-path: circle(0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.react-datepicker__calendar-icon {
    height: 1em;
    vertical-align: -.125em;
    width: 1em
}

.underConstructionOfAgriculture {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif
}

.ForFirAgri {
    background: url(https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcm00MjItMDQ3LWtxOTJ3eDl5LmpwZw.jpg);
    background-size: cover;
    border: 1px solid #a9a9a9
}

.LoaderOfAgriculture {
    -webkit-animation: spin .7s linear infinite;
    animation: spin .7s linear infinite;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #a1db34;
    height: 120px;
    width: 100px
}

.SpinnerOfAgriculture {
    display: inline-block;
    vertical-align: middle
}

.MainContentOfAgriculture {
    padding: 20px;
    text-align: center
}

.AgricultureHome.png,
.headingingOfAgri {
    text-align: center
}

.ParaForAgri {
    font-family: Playfair, serif;
    font-size: 18px
}

.AgriCultureHome {
    height: 87vh
}

.PicOfNdvi {
    margin-top: -17px
}

.ParaForNdvi {
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    margin: 5px 110px;
    text-align: center
}

.titleOfAgriculture {
    background-color: #006400;
    color: #fff;
    font-family: Merriweather, serif;
    font-size: 24px;
    margin: 0;
    padding: 0
}

.CardForAgriculture {
    background-color: #228b2230;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 600;
    height: 100px;
    text-align: center
}

.HeadingOfCardAgriculture {
    background-color: #228b22;
    color: #fff;
    font-family: Merriweather, serif;
    font-size: 20px;
    margin: 0;
    padding: 10px
}

.BannerOfAgri {
    height: 400px;
    object-fit: cover;
    object-position: center;
    width: 100%
}

.pushed-wrapper {
    position: relative
}

.pushed-image {
    background-image: url(/static/media/NdviPic.d995caded75b00351d6f.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%
}

.pushed-header {
    margin-bottom: 10px
}

.pushed-header span {
    display: block
}

.pushed-header .header-1 {
    color: #143e63;
    font-size: 1.6rem;
    font-weight: 600
}

.pushed-header .header-2 {
    color: #000;
    font-size: 4rem;
    font-weight: 600
}

.pushed-header .header-3 {
    color: #111;
    font-size: 2.2rem;
    font-style: italic;
    font-weight: 400
}

.pushed-content {
    background: #fff;
    font-size: 1.6rem;
    padding: 15px 15px 40px;
    position: relative
}

.right-bottom {
    bottom: 15px;
    position: absolute;
    right: 15px
}

.pushed-header {
    padding: 0 15px
}

@media (min-width:768px) {
    .pushed-image {
        height: 500px;
        width: 52%
    }

    .pushed-content {
        border: 3px solid #d11111;
        border-radius: 0 20px;
        box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, .42);
        color: #000;
        font-family: math;
        min-height: 200px
    }

    .pushed-box {
        left: 48%;
        max-width: 50%;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

.mainName {
    border: 10px solid #dee2e6;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .5), 0 0 10px rgba(0, 0, 0, .5)
}

.AgricultureParaofimage {
    align-items: center;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    justify-content: center;
    text-align: justify
}

.Ndvi-text {
    font-family: Marion;
    font-size: 16px;
    font-weight: 600;
    text-align: justify;
    word-spacing: 0
}

.HeadingOfndvi {
    color: green;
    font-size: 23px;
    font-weight: 600
}

a {
    text-decoration: none
}

a,
a:hover {
    transition: all .5s ease-in-out
}

.we-are-block {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: auto;
    justify-content: center;
    width: 100%
}

@media screen and (max-width:860px) {
    .we-are-block {
        height: 2200px
    }
}

@media screen and (max-width:500px) {
    .we-are-block {
        height: 2300px
    }
}

#about-us-section {
    align-items: center;
    background-color: #0c9136;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 50%;
    justify-content: center;
    position: relative;
    width: 100%
}

@media screen and (max-width:860px) {
    #about-us-section {
        flex-direction: column;
        justify-content: space-between
    }
}

.about-us-image {
    height: 100%;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0
}

@media screen and (max-width:860px) {
    .about-us-image {
        height: 45%;
        position: relative;
        width: 100%
    }
}

@media screen and (max-width:747px) {
    .about-us-image {
        height: 35%
    }
}

@media screen and (max-width:644px) {
    .about-us-image img {
        left: -220px;
        position: absolute
    }
}

.about-us-info {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    height: 80%;
    justify-content: space-evenly;
    margin-left: 12px;
    margin-right: 850px;
    width: 40%;
    z-index: 2
}

@media screen and (max-width:1353px) {
    .about-us-info {
        background: #0c4c9199;
        margin-right: 400px;
        padding: 0 25px 0 0;
        width: 60%
    }
}

@media screen and (max-width:1238px) {
    .about-us-info {
        margin-right: 340px;
        width: 100%
    }
}

@media screen and (max-width:1111px) {
    .about-us-info {
        margin-right: 270px
    }
}

@media screen and (max-width:910px) {
    .about-us-info {
        margin-right: 150px
    }
}

@media screen and (max-width:860px) {
    .about-us-info {
        align-items: center;
        height: 55%;
        margin: 0 !important;
        padding: 0 20px !important;
        width: 100%
    }
}

@media screen and (max-width:747px) {
    .about-us-info {
        height: 65%
    }
}

.about-us-info h2 {
    color: #fff;
    font-size: 40pt;
    text-align: right
}

@media screen and (max-width:860px) {
    .about-us-info h2 {
        font-size: 25pt;
        padding-bottom: 5px;
        text-align: center
    }
}

.about-us-info p {
    color: #fff;
    font-size: 14pt;
    text-align: right
}

@media screen and (max-width:860px) {
    .about-us-info p {
        text-align: center
    }
}

.about-us-info a {
    background-color: #fff;
    box-shadow: 0 20px 30px -10px #26394d;
    color: #0c4c91;
    font-size: 14pt;
    padding: 15px 0;
    text-align: center;
    width: 180px
}

.about-us-info a:hover {
    background: #404140;
    box-shadow: 0 22px 70px 4px rgba(0, 0, 0, .56);
    color: #fff;
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

#history-section {
    align-items: center;
    background-color: aqua;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 50%;
    justify-content: center;
    position: relative;
    width: 100%
}

@media screen and (max-width:860px) {
    #history-section {
        flex-direction: column;
        justify-content: space-between
    }
}

.history-image {
    height: 100%;
    left: 0;
    max-width: 820px;
    overflow: hidden;
    position: absolute;
    top: 0
}

@media screen and (max-width:860px) {
    .history-image {
        height: 40%;
        position: relative;
        width: 100%
    }
}

@media screen and (max-width:747px) {
    .history-image {
        height: 35%
    }
}

@media screen and (max-width:644px) {
    .history-image img {
        position: absolute;
        right: -220px
    }
}

.history-info {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 80%;
    justify-content: space-evenly;
    margin-left: 850px;
    margin-right: 12px;
    width: 40%;
    z-index: 2
}

@media screen and (max-width:1353px) {
    .history-info {
        background: #ffffff99;
        margin-left: 400px;
        padding: 0 0 0 25px;
        width: 60%
    }
}

@media screen and (max-width:1238px) {
    .history-info {
        margin-left: 340px;
        width: 100%
    }
}

@media screen and (max-width:1111px) {
    .history-info {
        margin-left: 270px
    }
}

@media screen and (max-width:910px) {
    .history-info {
        margin-left: 150px
    }
}

@media screen and (max-width:860px) {
    .history-info {
        align-items: center;
        height: 60%;
        margin: 0 !important;
        padding: 0 40px !important;
        width: 100%
    }
}

@media screen and (max-width:747px) {
    .history-info {
        height: 65%
    }
}

.history-info h2 {
    color: #0c4c91;
    font-size: 40pt;
    text-align: left
}

@media screen and (max-width:860px) {
    .history-info h2 {
        font-size: 25pt;
        padding-bottom: 5px;
        text-align: center
    }
}

.history-info p {
    color: #0c4c91;
    font-size: 14pt;
    text-align: left
}

@media screen and (max-width:860px) {
    .history-info p {
        text-align: center
    }
}

.history-info a {
    background-color: #0c4c91;
    box-shadow: 0 20px 30px -10px #26394d;
    color: #fff;
    font-size: 14pt;
    padding: 15px 0;
    text-align: center;
    width: 180px
}

.history-info a:hover {
    background: #404140;
    box-shadow: 0 22px 70px 4px rgba(0, 0, 0, .56);
    color: #fff;
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

@media (max-width:575.98px) {

    .about-us-info p,
    .history-info p {
        font-size: 12px
    }

    .ParaForAgri {
        font-size: 18px !important
    }

    .we-are-block {
        height: auto !important
    }
}

@media (min-width:576px) and (max-width:767.98px) {

    .about-us-info p,
    .history-info p {
        font-size: 13px
    }

    .we-are-block {
        height: auto !important
    }

    .ParaForAgri {
        font-size: 18px !important
    }
}

@media (min-width:768px) and (max-width:991px) {
    .we-are-block {
        height: auto !important
    }
}

@media (min-width:320px) and (max-width:425px) {
    .titleOfAgriculture {
        font-size: 18px !important
    }
}

.underConstructionNdvi {
    font-family: Arial, sans-serif
}

.loaders {
    -webkit-animation: spin .7s linear infinite;
    animation: spin .7s linear infinite;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #3498db;
    height: 100px;
    width: 100px
}

.spinner {
    display: inline-block;
    vertical-align: middle
}

.MAinContentOfNdvi {
    padding: 20px;
    text-align: center
}

.PAragraphOfApplication {
    color: maroon
}

.HeadingOfLoading {
    color: olive;
    font-size: 36px
}

.NdviHome {
    margin-bottom: -397px
}

.underConstructionOfStack {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif
}

.LoaderOfStack {
    -webkit-animation: spin .7s linear infinite;
    animation: spin .7s linear infinite;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #a1db34;
    height: 120px;
    width: 100px
}

.SpinnerOfStack {
    display: inline-block;
    vertical-align: middle
}

.MainContentOfStack {
    padding: 20px;
    text-align: center
}

.LayerStacking {
    margin-bottom: -397px
}

.MainDivOfClassification {
    font-family: Arial, sans-serif
}

.LoaderOfClassification {
    -webkit-animation: spin .7s linear infinite;
    animation: spin .7s linear infinite;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #34db34;
    height: 100px;
    width: 100px
}

.spinnerOfClassification {
    display: inline-block;
    vertical-align: middle
}

.MainContentOfClassification {
    padding: 20px;
    text-align: center
}

.PAragraphOfApplicationClassification {
    color: maroon
}

.HeadingOfLoadingClassfication {
    align-items: center;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
    color: #80004f;
    display: flex;
    font-family: FontAwesome;
    justify-content: center;
    margin-top: 80px !important
}

.Classification {
    height: 87vh
}

.underConstructionOfWater {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif
}

.LoaderOfWater {
    -webkit-animation: spin .7s linear infinite;
    animation: spin .7s linear infinite;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #a1db34;
    height: 120px;
    width: 100px
}

.SpinnerOfWater {
    display: inline-block;
    vertical-align: middle
}

.MainContentOfWater {
    padding: 20px;
    text-align: center
}

.LoadingSpinner {
    left: 874px;
    position: absolute;
    top: 600px
}

.PAragraphOfApplication {
    color: rgba(250, 12, 12, .774)
}

.HeadingOfLoading {
    align-items: center;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
    color: #474704;
    display: flex;
    font-family: FontAwesome;
    justify-content: center;
    margin-top: 80px !important
}

.MainDivOfConstruction {
    background-color: #ff5733
}

.HeadingOfCardWater {
    background-color: #2f4f4f;
    color: #fff;
    font-family: Merriweather, serif;
    font-size: 20px;
    margin: 0;
    padding: 10px
}

.CardTextsWater {
    background-color: #b0c4de;
    font-family: Montserrat, sans-serif;
    font-size: max(12px, 8px);
    font-weight: 600;
    height: 100px;
    margin-top: 0;
    overflow-y: auto;
    text-align: center
}

.HeadingForWater {
    background-color: #007373;
    border: 2px solid #000;
    border-radius: 12px;
    color: #fff;
    margin: 20px 785px 5px
}

.titleOfWater {
    font-family: Merriweather, serif;
    font-size: 24px;
    margin: 0;
    padding: 0
}

.WaterHome {
    height: 84.5vh !important
}

.MainContentOfFlood {
    font-family: Arial, sans-serif
}

.SpinnerOfFlood {
    -webkit-animation: spin .7s linear infinite;
    animation: spin .7s linear infinite;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #db3482;
    height: 100px;
    width: 100px
}

.LoaderOfFlood {
    display: inline-block;
    vertical-align: middle
}

.ContentOfFloodBody {
    padding: 20px;
    text-align: center
}

.LoadingSpinnerofFlood {
    left: 874px;
    position: absolute;
    top: 600px
}

.PAragraphOfFlood {
    color: #007780
}

.HeadingOfFlood {
    align-items: center;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
    color: #1f0320;
    display: flex;
    font-family: FontAwesome;
    justify-content: center;
    margin-top: 80px !important
}

.FloodHome {
    margin-bottom: -254px
}

.MainContentOfDrough {
    font-family: Arial, sans-serif
}

.LoaderOfDrough {
    -webkit-animation: spin .7s linear infinite;
    animation: spin .7s linear infinite;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #db4d34;
    height: 100px;
    width: 100px
}

.spinnerOfDrough {
    display: inline-block;
    vertical-align: middle
}

.MainContentOfDrough {
    padding: 20px;
    text-align: center
}

.LoadingSpinnerOfDrough {
    left: 874px;
    position: absolute;
    top: 600px
}

.PAragraphOfDrough {
    color: #221910;
    font-size: 18px
}

.HeadingOfDrough {
    align-items: center;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
    color: #380324;
    display: flex;
    font-family: FontAwesome;
    font-size: 36px;
    justify-content: center;
    margin-top: 80px !important
}

.DroughtHome {
    margin-bottom: -254px
}

.underConstructionOfNdwi {
    font-family: Arial, sans-serif
}

.LoaderOfNdwi {
    -webkit-animation: spin .7s linear infinite;
    animation: spin .7s linear infinite;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #2c3b10;
    height: 120px;
    width: 100px
}

.SpinnerOfNdwi {
    display: inline-block;
    vertical-align: middle
}

.MainContentOfNdwi {
    padding: 20px;
    text-align: center
}

.LoadingSpinnerNdwi {
    left: 874px;
    position: absolute;
    top: 600px
}

.PAragraphOfNdwi {
    color: rgba(39, 1, 1, .774)
}

.HeadingOfLoadingNdwi {
    align-items: center;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
    color: #272ae2;
    display: flex;
    font-family: FontAwesome;
    justify-content: center;
    margin-top: 80px !important
}

@-webkit-keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }

    60% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }
}

.screen {
    -webkit-animation: slide 4s linear infinite;
    animation: slide 4s linear infinite;
    opacity: .25
}

.star {
    -webkit-animation: bounce 4s linear infinite;
    animation: bounce 4s linear infinite
}

.shaddow {
    -webkit-animation: bounceShaddow 4s linear infinite;
    animation: bounceShaddow 4s linear infinite;
    -webkit-transform-origin: center center;
    transform-origin: center center
}

@-webkit-keyframes slide {
    0% {
        -webkit-transform: translatex(-10%);
        transform: translatex(-10%)
    }

    to {
        -webkit-transform: translatex(100%);
        transform: translatex(100%)
    }
}

@keyframes slide {
    0% {
        -webkit-transform: translatex(-10%);
        transform: translatex(-10%)
    }

    to {
        -webkit-transform: translatex(100%);
        transform: translatex(100%)
    }
}

@keyframes bounce {

    0%,
    40%,
    50%,
    60%,
    to {
        -webkit-transform: translatey(0);
        transform: translatey(0)
    }

    45%,
    55% {
        -webkit-transform: translatey(-10%);
        transform: translatey(-10%)
    }
}

@-webkit-keyframes bounceShaddow {

    0%,
    40%,
    50%,
    60%,
    to {
        color: #ff5733;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    45%,
    55% {
        color: #3498db;
        opacity: .3;
        -webkit-transform: scale(.8, .7) translateY(10%);
        transform: scale(.8, .7) translateY(10%)
    }
}

@keyframes bounceShaddow {

    0%,
    40%,
    50%,
    60%,
    to {
        color: #ff5733;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    45%,
    55% {
        color: #3498db;
        opacity: .3;
        -webkit-transform: scale(.8, .7) translateY(10%);
        transform: scale(.8, .7) translateY(10%)
    }
}

.ThankYou {
    left: 781px;
    position: absolute;
    top: 318px
}

.NdwiHome {
    margin-bottom: -254px
}

.HeadingForMinning {
    background-color: #8b0500;
    border: 2px solid #000;
    border-radius: 12px;
    color: #fff;
    font-size: min(18vh, 30px);
    margin: 20px 800px 5px
}

.MinningHome {
    height: 86.5vh
}

.HeadingOfMinningCard {
    background-color: #708090;
    color: #fff;
    font-family: Merriweather, serif;
    font-size: 20px;
    margin: 0;
    padding: 10px
}

.cardsTextsOfMinning {
    background-color: silver;
    font-family: Montserrat, sans-serif;
    font-size: max(12px, 8px);
    font-weight: 600;
    height: 100px;
    overflow-y: auto;
    text-align: center
}

@media (min-width:1200px) and (max-width:1600px) {
    .cardsTextsOfMinning {
        font-size: 10px
    }
}

.HeadingForDefence {
    background-color: #00008b;
    border: 2px solid #000;
    border-radius: 12px;
    color: #fff;
    margin: 20px 800px 5px
}

.DefenceHome {
    margin-bottom: -784px
}

.Dimg {
    height: 300px;
    width: 100%
}

.items {
    padding-left: 50px;
    padding-right: 50px
}

.items-cards {
    cursor: pointer;
    transition: .5s
}

.items-card-title i,
.items-cards-title {
    cursor: pointer;
    font-size: 15px;
    transition: 1s
}

.items-card-title i {
    color: #ffa710
}

.cards-titles i:hover {
    color: #18d4ca;
    -webkit-transform: scale(1.25) rotate(100deg);
    transform: scale(1.25) rotate(100deg)
}

.cardD:hover {
    box-shadow: 10px 10px 15px rgba(0, 0, 0, .3);
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.cards-texts {
    background-color: #77889947;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 600;
    height: 100px;
    text-align: center
}

.cardD:after,
.cardD:before {
    background: hsla(0, 0%, 100%, .1);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: scale3d(0, 0, 1);
    transform: scale3d(0, 0, 1);
    transition: -webkit-transform .3s ease-out 0s;
    transition: transform .3s ease-out 0s;
    transition: transform .3s ease-out 0s, -webkit-transform .3s ease-out 0s
}

.cardD:before {
    -webkit-transform-origin: left top;
    transform-origin: left top
}

.cardD:after {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom
}

.cardD:focus:after,
.cardD:focus:before,
.cardD:hover:after,
.cardD:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.BannerOfDefence {
    height: 400px;
    width: 100%
}

.titleOfdefemce {
    font-family: Merriweather, serif;
    font-size: 24px;
    margin: 0;
    padding: 0
}

.HeadingOfdefemce {
    background-color: #00008b;
    border: 2px solid #000;
    border-radius: 8px;
    font-size: 15px;
    margin: 15px 0;
    padding: 5px;
    width: 5%
}

.HeadingOfCardDefence,
.HeadingOfdefemce {
    color: #fff;
    font-family: Merriweather, serif
}

.HeadingOfCardDefence {
    background-color: #2f4f4f;
    font-size: 20px;
    margin: 0;
    padding: 10px
}

.HeadingOfSpace {
    background-color: #00008b;
    border: 2px solid #000;
    border-radius: 8px;
    color: #fff;
    font-family: Merriweather, serif;
    font-size: 15px;
    margin: 15px 0;
    padding: 5px;
    width: 4%
}

.SpaceHome {
    margin-bottom: -275px
}

.MilitaryHome {
    margin-bottom: -262px
}

.PlanetHome {
    margin-bottom: -275px
}

.active_link {
    background: #4b743b;
    color: red
}

.SU_Image {
    align-items: center;
    background-color: #553988;
    display: flex;
    height: 55px
}

.SU_Navtext {
    width: 100%
}

.nav {
    background-color: #026d02 !important;
    border-radius: 0
}

.navbar-dark .navbar-nav .nav-link .Su_Nav-Bg {
    border-radius: 0;
    color: #fff;
    margin-top: 0;
    min-height: 40px
}

.SU_Header {
    margin-top: -1px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100
}

.navwraper .navbar {
    border: none;
    margin-bottom: 20px;
    position: relative
}

.search {
    display: none
}

.searchButton {
    height: 30 px
}

.nav-link:hover {
    color: #91edac
}

.welcome {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.text-light {
    top: 0
}

.text-mars {
    left: 48px;
    top: 36px
}

.card-content-su {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 14px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    padding: 10px;
    position: absolute;
    width: 170px;
    z-index: 10
}

.User_PofileIcon {
    height: 18px;
    padding-left: 5px;
    width: 18px
}

.Su-Nav-Link {
    align-items: center;
    color: #fff;
    text-decoration: none;
    transition: color .3s
}

.Su_Nav-Bg {
    border-radius: 0;
    color: #fff;
    margin-top: 6.2px;
    min-height: 40px
}

.Su-Active-Link {
    background-color: orange
}

.Su-Nav-Bg:visited {
    color: #fff
}

.Su-Nav-Bg:hover {
    color: #c2c2d9
}

.Su_App_Menu {
    height: 100%;
    padding: 4px 15px;
    text-decoration: none;
    text-transform: uppercase
}

.Header-Username {
    color: #fff;
    left: 1300px;
    position: absolute;
    top: 11px
}

.navwraper {
    height: 40px
}

.custom-navbar {
    align-items: center;
    background-color: #026d02;
    display: flex;
    justify-content: space-between
}

.left-section {
    display: flex
}

.Su-Active-Link {
    background-color: #131334c9;
    border-radius: 15px;
    color: #fff;
    text-decoration: none
}

.main_section .navLink_wrap {
    margin: 0 10px 0 0;
    padding: 0
}

.main_section .Su_Link {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 1.4rem;
    overflow: hidden;
    padding: 2px 10px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s
}

.main_section .Su_Link:hover {
    color: orange
}

.main_section .Su_Link:focus {
    outline: none
}

.right-section {
    align-items: center;
    display: flex;
    justify-content: flex-end
}

.right-section .welcome {
    margin-right: 15px
}

.main_section {
    justify-content: space-between
}

.User_Profile,
.main_section {
    align-items: center;
    display: flex
}

.User_Profile {
    color: #fff;
    cursor: pointer;
    justify-content: center
}

@media (max-width:575.98px) {
    .main_section .Su_Link {
        font-size: 1rem
    }
}

@media (min-width:768px) and (max-width:991px) {

    .User_Profile,
    .main_section .Su_Link {
        font-size: 1rem
    }
}

@media (min-width:992px) and (max-width:1299px) {
    .right-section .welcome {
        margin-bottom: 5px;
        margin-right: 0
    }
}

.your-div-class {
    border: none
}

.B-MainText {
    position: relative
}

.SU-AU-Table {
    border: 1px solid #83774c;
    height: auto;
    width: 100%
}

.Create-AU-TD {
    font-size: 12px;
    padding: 1px;
    text-align: center;
    white-space: nowrap
}

.SR-Space {
    padding: auto;
    width: 82px
}

.CR-Date,
.SR-Space {
    font-size: 14px
}

.Input-Text {
    background-color: #fff;
    background-image: none;
    color: #495057;
    display: block;
    font-weight: 400;
    line-height: 1.5;
    width: 100%
}

.CreateAdmin-Card-Body {
    word-wrap: break-word;
    background-clip: initial;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    width: 850px
}

.Timer {
    color: #517906;
    left: 470px;
    position: absolute;
    top: 5px
}

.Horizontal-Line {
    border-top: 1px solid #ddd
}

.create-admin {
    background-size: cover;
    height: 86vh;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-y: scroll;
    padding-left: 15px;
    padding-right: 15px;
    scrollbar-width: none
}

@media only screen and (max-width:768px) {
    .create-admin {
        height: 82vh;
        overflow-y: scroll
    }
}

.error-messageSU {
    padding-left: 5px
}

.error-messageSU,
.error-messageUsername {
    color: red;
    font-size: 11px;
    font-style: italic
}

.AdminList {
    color: #080808;
    font-size: 18px;
    font-weight: 700
}

.Country-Code-Dropdown-ADMIN {
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #000;
    font-size: 10px;
    height: 33px;
    max-width: 56px
}

.A-ProfileModal {
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
    display: none;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%
}

.A-CancelBtn {
    left: 500px;
    position: absolute
}

.admin-heading {
    font-size: min(3vw, 20px)
}

.error-messageMaxlength-SU {
    color: blue;
    font-size: 11px;
    font-style: italic;
    margin-left: -5px
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-image: none;
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem)
}

.mob-invalid {
    background-image: none;
    border-color: #dc3545
}

.Cre-admin-Time {
    color: #2b6e5b;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    position: relative;
    right: 5px
}

.the-fieldsetAdmin {
    border: 2px solid #e0e0e0;
    padding-bottom: 0;
    padding-top: 20px
}

.fontH {
    font-size: 16px
}

.fontAdminH {
    font-size: 14px
}

.AU-font {
    font-size: 12px
}

.AU-Table-Heading {
    bottom: 268px;
    position: fixed
}

.Create-admin-button {
    align-items: center;
    display: flex;
    gap: 15px;
    justify-content: center
}

.btn_outline_primary {
    outline: none
}

.btn_outline_primary:focus {
    outline: none !important
}

@media (max-width:575.98px) {
    .CreateAdmin-Card-Body {
        width: 100%
    }

    .fontAdminH {
        font-size: 12px !important
    }
}

@media (min-width:320px) and (max-width:425px) {
    .CreateAdmin-Card-Body {
        width: 100%
    }

    .fontAdminH {
        font-size: 10px !important
    }

    .the-legend {
        font-size: 12px;
        padding: 0 3px
    }

    .Header-textB {
        font-size: 13px
    }
}

@media (min-width:576px) and (max-width:767.98px) {
    .CreateAdmin-Card-Body {
        width: 100%
    }

    .Mobileviewhide {
        margin-bottom: 6px
    }
}

@media (min-width:768px) and (max-width:991.98px) {
    .CreateAdmin-Card-Body {
        width: 740px
    }
}

.View-ProfileModal {
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
    cursor: pointer;
    display: none;
    display: flex;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%
}

.View-Content-Profile {
    align-items: flex-start;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    width: 20%
}

@media screen and (min-width:290px) {
    .View-Content-Profile h5 {
        word-wrap: break-word;
        overflow: visible;
        overflow: initial;
        text-overflow: clip;
        white-space: normal
    }
}

.Closed-Button {
    position: relative
}

.View-Table {
    border-collapse: collapse;
    margin-top: 10px
}

.View-Table td {
    word-wrap: break-word;
    border: 1px solid #ddd;
    font-size: 10px;
    padding: 5px;
    text-align: left;
    white-space: nowrap
}

.View-Table td:first-child {
    font-weight: 700;
    max-width: 10%;
    overflow: hidden;
    text-overflow: ellipsis
}

.View-Table td:nth-child(2) {
    max-width: 250px;
    white-space: normal
}

.View-Table td:nth-child(2) b {
    word-wrap: break-word
}

.View-Table td b {
    font-size: 10px;
    font-weight: 700
}

.Word {
    word-wrap: break-word
}

table.View-Table {
    width: 460px
}

@media (min-width:320px) and (max-width:425px) {
    table.View-Table {
        overflow-x: hidden;
        overflow-y: scroll;
        width: 90% !important
    }

    .View-ProfileModal {
        left: 13px
    }

    .Header-textB {
        font-size: 13px
    }
}

@media (max-width:575.98px) {
    table.View-Table {
        overflow-x: hidden;
        overflow-y: scroll;
        width: 90% !important
    }
}

.user-modal {
    top: 60%
}

.user-modal,
.usermoder_wrap {
    left: 48%;
    outline: none;
    padding: 20px;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.usermoder_wrap {
    top: 45%
}

.modal-overlay {
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0
}

.modal-content {
    font-size: 12px;
    margin-left: 35px
}

.Row-height {
    margin-top: 10px
}

.ValueClass {
    margin-top: -12px
}

.Row-1 {
    margin-top: 0
}

.Pop-Heading {
    color: #3d8fbe;
    text-align: center
}

.SU-submitbutton {
    left: 170px;
    position: relative
}

.close_icon {
    background-color: initial;
    border: none;
    cursor: pointer;
    font-size: 18px;
    position: absolute;
    right: 10px;
    top: 10px
}

.close_icon svg {
    color: #000
}

.verify_text {
    font-size: 1.4rem !important;
    font-weight: 400
}

p.ValueClass {
    font-size: 13px;
    font-weight: 600
}

.ED-MainText {
    font-size: min(4vw, 20px)
}

.AdminEditForm-HeadingText {
    font-size: min(4vw, 22px);
    font-weight: 700
}

.Table {
    cursor: pointer;
    margin-top: -25px
}

.SU-General-Btn,
.UD-Btn,
.WC-Btn {
    background-color: #8bb370 !important
}

.S-UU-Table {
    cursor: pointer;
    height: auto;
    margin-top: -5px;
    width: 100%
}

#Time-Timer {
    color: #517906;
    font-size: 13px;
    left: 580px;
    top: 5px
}

.DateOfGEneral {
    color: #2b6e5b;
    display: flex;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    justify-content: flex-end;
    position: relative;
    right: 4px
}

.the-fieldsetGeneral {
    border: 2px solid #e0e0e0
}

.Admin-Table-heading {
    position: relative;
    top: -20px
}

.UU-Table-heading {
    position: relative;
    top: 0
}

.table-container {
    max-height: 300px;
    overflow-x: auto;
    overflow-y: auto
}

.AU-Table {
    border: 1px solid #83774c;
    height: auto;
    width: 100%
}

.AU-TD {
    font-size: 12px
}

.AU-TD,
.Block-Btn {
    padding: 1px 5px;
    text-align: center;
    white-space: nowrap
}

.Block-Btn {
    font-size: 14px
}

.CR-Date {
    font-size: 12px;
    width: 230px
}

.AU-Space {
    font-size: 14px;
    padding: auto;
    width: 82px
}

.popup {
    top: 99px
}

.EditBtn {
    left: 50px;
    position: relative;
    top: 15px
}

.DeleteBtn {
    left: -360px;
    position: relative;
    top: 0
}

.DeleteBtn,
.EditBtn {
    flex: 1 1;
    margin-right: 5px
}

.CancelBtn {
    left: 500px;
    position: absolute
}

.SaveGeneralBtn {
    left: 400px;
    position: relative
}

#Hrline {
    border: 1px solid #eee
}

.Heading-Details {
    color: #490830;
    font-weight: 700;
    left: -360px;
    position: relative;
    top: -11px
}

.custom-outline {
    background-color: #091f1e;
    border: 2px solid #22ac22;
    margin: 0;
    padding: 7px 10px
}

.success-outline {
    background-color: #f0e;
    border: 2px solid #094309;
    margin: 0;
    padding: 7px 10px
}

.Unclicked-Btn {
    padding: 8px 16px
}

.Manage-AU {
    margin-left: 30px
}

.Manage-AU,
.Manage-UU {
    font-size: 14px;
    font-weight: 700;
    text-align: left
}

.Manage-UU {
    margin-left: 35px
}

.Manage-GU {
    font-size: 14px;
    font-weight: 700;
    margin-left: 30px;
    text-align: left
}

.Close {
    color: #421d1d;
    cursor: pointer;
    float: right;
    font-weight: 700;
    margin-top: -17px;
    position: relative
}

.Close:focus {
    color: #000
}

.Close:focus,
.Close:hover {
    cursor: pointer;
    text-decoration: none
}

.Close:hover {
    color: #f70f0f
}

.Clicked {
    background-color: #fc0
}

.UnClicked {
    background-color: #d8e0e8;
    width: 20px
}

.TD-DATA {
    width: 12%
}

.Edit-Horizontal-Line {
    border: 0;
    border-top: 1px solid #eee;
    margin-bottom: 20px;
    margin-left: 14px;
    margin-top: -20px;
    width: 538px
}

.AUU-Popup-Content {
    margin: 5.8% auto;
    padding: 6px;
    width: 60%
}

.AUU-Popup-Content,
.General-Popup-Content {
    border-radius: 1rem;
    cursor: pointer;
    max-width: 900px
}

.General-Popup-Content {
    margin: 100px auto 2.5%;
    top: 46px;
    width: 80%
}

.General-EditForm {
    position: relative
}

.Edit-BtnColor {
    color: #8c00ff;
    font-size: 14px
}

.SelectedValue {
    color: #fff
}

.last-line-hr-UU {
    margin-top: 0
}

.SU-Row {
    margin-top: 50px
}

.Closed-Button {
    color: #e51313;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    right: 10px;
    top: 1px
}

.hoverable-image:hover:after {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #000;
    content: "Unblock user";
    left: 50%;
    padding: 5px;
    position: absolute;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1
}

.SU-Module-Label {
    font-size: 14px;
    font-weight: 700;
    margin-left: 10px
}

.S-SelectModuleBoxMain {
    width: 100%
}

.SS-SelectModuleBox {
    height: 140px;
    margin-left: 15px;
    width: 83rem
}

.S-SelectModuleBoxItems {
    border: 1px solid #444;
    display: flex;
    flex-wrap: wrap
}

.s-unique-module-row {
    box-sizing: border-box;
    padding: 5px;
    width: calc(33% + 140px)
}

.clear-float {
    clear: both
}

.SU-EditCheckBox {
    left: 8px;
    margin-bottom: 0;
    width: 0
}

.SU-ModuleLabel {
    -webkit-appearance: checkbox;
    appearance: checkbox;
    height: -12px;
    text-align: left;
    width: 250px
}

.SU-Module {
    margin-top: -10px
}

.Bold-text {
    font-weight: 700
}

.Mobile-field {
    width: 10rem
}

.s-unique-module-row input[type=checkbox] {
    margin-top: 5px
}

.selected-row,
.selected-row .AU-Space,
.selected-row .AU-TD,
.selected-row .AU-TD .Bold-text,
.selected-row .AU-TD .SelectedValue,
.selected-row .AU-TD .UnClicked,
.selected-row .CR-Date,
.selected-row .TD-DATA {
    color: #fff
}

.SUEditUser-form ::-webkit-input-placeholder {
    font-size: 12px
}

.SUEditUser-form ::placeholder {
    font-size: 12px
}

.su_Edit {
    height: 86vh;
    overflow-y: scroll;
    scrollbar-width: none
}

.the-legendSuEditUse {
    background-color: #402588bd;
    border: 1px solid #e0e0e0;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 14px);
    font-weight: 500;
    margin-bottom: 0;
    padding: 2px 10px;
    text-align: left;
    width: auto
}

.AUU-Popup-Content {
    height: 82vh;
    overflow-y: none
}

.button_wraper {
    display: flex;
    justify-content: space-around !important
}

@media (max-width:575.98px) {
    .AUU-Popup-Content {
        height: 82vh;
        overflow-y: scroll;
        padding: 6px;
        width: 85%
    }
}

@media (min-width:576px) and (max-width:767.98px) {
    .AUU-Popup-Content {
        height: 82vh;
        overflow-y: scroll;
        padding: 6px;
        width: 85%
    }
}

.btn.activebut.activebut {
    color: #fff
}

.btn.activebut.Nactive {
    color: #000
}

.Unblocked:hover {
    color: #fff
}

@media (min-width:768px) and (max-width:991.98px) {
    .AUU-Popup-Content {
        padding: 6px;
        width: 90%
    }
}

@media (min-width:320px) and (max-width:425px) {
    .ResponsiveButtonEdituser {
        font-size: 11px !important
    }
}

.SuEdit-Time {
    color: #2b6e5b;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    position: relative;
    right: 6px;
    top: 10px
}

.modal {
    cursor: pointer
}

.AuModal {
    background-color: #fff;
    border-radius: 8px;
    position: relative;
    width: 400px
}

.close {
    font-size: 20px;
    font-weight: 600;
    position: absolute;
    right: 20px
}

.close_model {
    color: #fff;
    cursor: pointer;
    font-size: 20px
}

.close_model:hover {
    color: red
}

.Model_header_wraper {
    background-color: #c0c062;
    background-color: #2196f3;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    padding: 5px 8px
}

.ModalTitle_su {
    color: #fff;
    flex-grow: 1;
    font-size: 20px;
    font-weight: 700;
    margin-left: 5px
}

.AuModal-Btn {
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    padding: 10px 20px
}

.AuModal-Btn:hover {
    background-color: #0056b3
}

.AuModal-Input-Remark {
    margin-left: 30px
}

.Re-error-message-su {
    color: #f44336;
    font-size: 12px;
    font-style: italic;
    font-weight: lighter;
    left: 5px;
    margin: 2px;
    position: relative
}

.Remark-Maxlength {
    color: blue;
    font-size: 11px;
    font-style: italic;
    margin: 5px
}

.maxlength-message-supop {
    left: 6%;
    position: relative
}

.Au_Image {
    align-items: center;
    background-color: #553988;
    display: flex;
    height: 55px
}

.Au_Navtext {
    padding-left: 15px
}

.Au-nav {
    background-color: #026d02 !important
}

.navbar-dark .navbar-nav .nav-link .Au_Nav-Bg {
    border-radius: 0;
    color: #fff;
    margin-top: 0;
    min-height: 40px
}

.icon,
.log {
    color: #fff
}

.log {
    font-family: sans-serif;
    font-size: larger
}

.logB {
    font-size: medium;
    height: auto;
    margin: inherit;
    width: 73px
}

.Au_Header {
    margin-top: -1px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100
}

.icon {
    font-size: 15px;
    margin-right: 5px
}

.navbar {
    border: 1px solid transparent;
    margin-bottom: 20px;
    position: relative
}

.btn btn-danger {
    width: 75px
}

.search {
    display: flex;
    position: relative;
    width: 100%
}

.searchTerm {
    border: 3px solid #4378d9fc;
    border-radius: 5px 0 0 5px;
    border-right: none;
    color: #9dbfaf;
    height: 30px;
    outline: none;
    padding: 5px;
    width: 100%
}

.searchTerm:focus {
    color: #4378d9fc
}

.searchButton {
    background: #4378d9fc;
    border: 1px solid #4378d9fc;
    border-radius: 0 5px 5px 0;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    height: 30px;
    text-align: center;
    width: 40px
}

.wrap {
    left: 80%;
    position: absolute;
    top: 47%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 13%
}

.nav-bg {
    border-radius: 0;
    margin-top: -5.2px;
    min-height: 40px
}

.nav-bg,
.nav-link:visited {
    color: #fff
}

.LogoOfMicronet {
    position: absolute;
    right: 9px;
    top: 8px
}

.lang {
    position: absolute;
    right: 16px;
    top: 20px
}

.welcome {
    padding-left: 5px;
    padding-right: 0;
    position: fixed;
    right: 43px;
    top: 63px
}

.popup {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .1);
    color: #000;
    display: block;
    font-size: 12px;
    height: 86px;
    left: 659px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 45px;
    width: 141px;
    z-index: 1
}

.login-user {
    position: absolute;
    right: 590px;
    top: 5px
}

.text-light {
    left: 48px;
    top: -4px
}

.text-light,
.text-mars {
    font-style: italic;
    position: absolute
}

.text-mars {
    color: #fff;
    font-size: 8px;
    left: 60px;
    top: 35px
}

.h1,
h1 {
    font-family: Glyphicons Halflings;
    font-size: 45px;
    margin-left: 12px;
    margin-top: -4px
}

.disabled-link {
    cursor: not-allowed;
    pointer-events: none
}

.disabled-link:hover:after {
    background: rgba(0, 0, 0, .8);
    border-radius: 5px;
    color: #fff;
    content: "Please login to use this";
    left: 50%;
    padding: 5px;
    position: absolute;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    white-space: nowrap
}

.navbar-nav {
    float: none;
    position: static
}

.menu {
    left: 145px;
    top: 37px
}

.menu,
.overlay {
    position: absolute
}

.overlay {
    background-color: #d5eb98;
    box-sizing: border-box;
    color: #0b0b0b;
    height: 80px;
    left: 150px;
    max-width: 200px;
    overflow: hidden;
    padding: 10px;
    text-overflow: ellipsis;
    top: 10px;
    white-space: normal;
    z-index: 1000
}

.admin-item:hover+.sub-dropdown {
    display: block
}

.sub-dropdown {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: none;
    left: 0;
    position: absolute;
    top: 100%
}

.sub-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.sub-dropdown li {
    cursor: pointer;
    padding: 10px
}

.sub-dropdown li:hover {
    background-color: #ddd
}

.drop {
    background-color: initial;
    font-size: 17px;
    margin-top: -7px;
    position: fixed;
    top: 71px;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    transition: all .3s ease-in-out
}

.admin-list,
.dropdown-menulist {
    position: relative
}

.admin-list {
    left: 1px;
    top: 36px
}

.submenulist {
    left: 81px;
    position: relative;
    top: 38px
}

.DropDownOfApplication {
    left: 851px;
    position: absolute;
    top: 3px
}

.DropDownDashboard {
    left: 1015px;
    position: absolute
}

.PopupBoxForLogoImage {
    background: rgba(0, 0, 0, .7);
    border-radius: 5px;
    color: #fff;
    display: none;
    font-size: 14px;
    left: 50%;
    padding: 10px;
    position: absolute;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1
}

.LogoOfMicronet.hovered {
    background-color: #f0f0f0
}

.LogoOfMicronet.open {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.ActiveStatus {
    background-color: #007bff !important;
    color: #fff !important
}

.card-content-au {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 14px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    padding: 5px;
    position: absolute;
    right: 20px;
    text-align: justify;
    z-index: 10
}

.PopUpAboveMicronetLogo {
    color: #9932cc;
    font-family: system-ui;
    font-size: 11px;
    font-weight: 700
}

.LogoPopUpCancelButton {
    background-color: red !important;
    border: none !important;
    border-radius: 5px;
    color: #fff !important;
    cursor: pointer !important;
    margin-right: 10px !important;
    padding: 6px 12px !important
}

.LogoPopUpMoreButton {
    background: green;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    padding: 6px 12px
}

.dropdownagriculture,
.dropdownmars,
.dropdownwater {
    background-color: initial;
    border: 0;
    clear: both;
    color: #212529;
    font-weight: 400;
    list-style: none;
    padding: .25rem 1.5rem;
    text-decoration: none;
    transition: background-color .3s ease;
    white-space: nowrap;
    width: 100%
}

.dropdownmars {
    top: 0
}

.dropdownagriculture,
.dropdownmars {
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    display: none;
    float: left;
    font-size: 12px;
    left: 167px;
    list-style: none;
    margin: 2px 0 0;
    min-width: 60px;
    opacity: 0;
    padding: 5px 0;
    position: absolute;
    text-align: left;
    transition: opacity .3s ease
}

.dropdownagriculture {
    top: 30px
}

.dropdownwater {
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    display: none;
    float: left;
    font-size: 12px;
    left: 167px;
    list-style: none;
    margin: 2px 0 0;
    min-width: 60px;
    opacity: 0;
    padding: 5px 0;
    position: absolute;
    text-align: left;
    top: 66px;
    transition: opacity .3s ease
}

.agrilinkdrop,
.marslinkdrop,
.waterlinkdrop {
    font-weight: 700
}

.agrilinkdrop:hover .dropdownagriculture,
.marslinkdrop:hover .dropdownmars,
.waterlinkdrop:hover .dropdownwater {
    display: block;
    opacity: 1
}

.archivallink:hover,
.classificationlink:hover,
.droughlink:hover,
.floodlink:hover,
.ndvilink:hover,
.ndwilink:hover,
.reterivallink:hover,
.searchlink:hover,
.stacklink:hover {
    border-left: 3px solid rgba(8, 156, 242, .3);
    color: #333;
    list-style: none;
    text-decoration: none
}

.User-Profile {
    cursor: pointer;
    left: 101%;
    position: absolute;
    top: 47%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.BackIcon {
    color: #f9fbfd;
    font-size: 25px;
    left: 5px;
    position: fixed;
    top: 60px
}

.UserIcon {
    left: 1617px;
    position: absolute;
    top: 65px
}

.Au-Nav-Link {
    align-items: center;
    color: #fff;
    text-decoration: none;
    transition: color .3s
}

.Au_Nav-Bg {
    border-radius: 0;
    color: #fff;
    margin-top: 6.2px;
    min-height: 40px
}

.Au-Active-Link {
    background-color: #0b0b0b;
    color: #fff
}

.Au-Nav-Bg:visited {
    color: #fff
}

.Au-Nav-Bg:hover {
    color: #c2c2d9
}

.main_nav .Au_App_Menu {
    background-color: #131334c9;
    border-radius: 21px;
    color: #fff;
    outline: none;
    text-decoration: none
}

.main_nav .Au_nav_link {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 1.4rem;
    margin-right: 10px;
    overflow: hidden;
    padding: 2px 10px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s
}

.main_nav .Au_nav_link:hover {
    color: orange
}

.main_nav .Au_App_Menu:focus {
    outline: none;
    text-decoration: none
}

.Menu-HomeS {
    display: flex;
    margin-left: 220px;
    margin-top: 2px
}

.A-Profile-Hr-Model {
    align-content: flex-end;
    display: flex;
    justify-content: flex-end
}

@media (max-width:500px) {
    .LogoOfMicronet {
        position: absolute;
        right: 9px !important;
        top: 8px !important
    }

    .text-geopicx {
        text-wrap: wrap
    }
}

@media (max-width:767px) {
    .A-Profile-Hr-Model {
        align-content: center;
        display: flex;
        justify-content: center;
        margin: auto !important;
        padding: auto !important
    }
}

.Profile-Hr-Model {
    display: flex;
    justify-content: flex-end;
    margin-top: -1px !important
}

@media (max-width:575.98px) {
    .main_nav .Au_nav_link {
        font-size: 1rem
    }
}

@media (min-width:768px) and (max-width:991px) {
    .main_nav .Au_nav_link {
        font-size: 1.2rem
    }

    .User_Profile {
        font-size: 1rem
    }
}

@media (min-width:1300px) and (max-width:1750px) {
    .right-section .welcome {
        margin-bottom: 5px;
        margin-right: 0
    }
}

.Au-Body-MainText {
    position: relative
}

.Main-text {
    font-weight: 700;
    margin-top: -.5vw;
    text-align: left
}

.Main-LableName {
    font-size: 18px
}

.Label-Input {
    margin-left: -272px
}

table {
    border-collapse: collapse;
    height: auto;
    width: 100%
}

td,
th {
    border: 1px solid #444;
    font-size: 10px;
    padding: 1px 5px;
    text-align: center;
    white-space: nowrap
}

th {
    background-color: #f2f2f2;
    background: #fff;
    font-size: 13px;
    height: 20px;
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

tr {
    background-color: #f5f5f5;
    border: 1px solid #444
}

tr:nth-child(2n) {
    background-color: #f2f2f2
}

#Au-Card-Body {
    word-wrap: break-word;
    background-clip: initial;
    background-color: #fff;
    border: 0 solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    display: flex;
    flex-direction: column;
    margin-left: -432px;
    position: relative;
    width: 74%
}

.SubmitBtn {
    left: 50px;
    position: relative;
    top: 15px
}

.CreateAdminBtn {
    left: 288px;
    position: absolute;
    top: 0
}

.small-option {
    font-size: 12px;
    font: 700
}

#Au-Time {
    font-size: min(3vw, 14px);
    font-style: italic
}

.table-container-au {
    bottom: 20px;
    max-height: 300px;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    scrollbar-width: auto
}

.popup {
    background-color: rgba(0, 0, 0, .5);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100
}

.AuthorizedBtn,
.EditBtn,
.EditCancelBtn,
.RejectBtn {
    flex: 1 1;
    margin-right: 5px
}

.Button {
    width: 100%
}

#Hrline {
    border: 0;
    border-top: 1px solid #eee;
    margin-bottom: 20px;
    margin-top: -18px
}

.form-check-label {
    left: 49px;
    margin-bottom: 0;
    margin-left: 20px
}

.ModuleLable-Name {
    font-weight: 700
}

.Selected-Modules {
    left: -105px;
    position: absolute;
    top: 23px
}

.Auth-Btn {
    background-color: #b96e6e !important
}

.General-Btn {
    background-color: #bdb271 !important
}

.Unclicked-Btn {
    border: 1px solid #000;
    font-weight: 700
}

.hline {
    background-color: #ccc;
    height: 1px;
    margin-right: auto;
    width: 100%
}

.Au-Horizontal-Line {
    border: 0;
    border-top: 1px solid #eee
}

.Popup-ContentAuEDit {
    height: 68rem;
    margin: 5.8% auto;
    max-width: 900px;
    padding: 10px 0 10px 10px;
    width: 80%
}

.the-fieldsetAu {
    border: 2px solid #e0e0e0;
    height: 60vh;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 10px
}

.the-legendAu {
    background-color: #402588bd;
    border: 1px solid #e0e0e0;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(4vw, 14px);
    font-weight: 500;
    margin-bottom: 0;
    padding: 2px 10px;
    text-align: end;
    width: auto
}

.Au-Close {
    color: #421d1d;
    cursor: pointer;
    float: right;
    font-size: 25px;
    font-weight: 700;
    margin-top: -17px;
    position: relative
}

.Au-Close:hover {
    color: #f70f0f;
    cursor: pointer;
    text-decoration: none
}

.Au-Edit-Input-Text {
    background-color: #fff;
    background-image: none;
    color: #495057;
    display: block;
    font-weight: 400;
    line-height: 1.5;
    width: 100%
}

.Edit-Btn {
    color: #4f3a03
}

.Approve-Btn,
.Edit-Btn {
    font-weight: 700;
    padding: "10px 20px 15px 25px"
}

.Approve-Btn {
    color: #125505
}

.Reject-Btn {
    color: #660623
}

.Block-Btn,
.Reject-Btn {
    font-weight: 700;
    padding: "10px 20px 15px 25px"
}

.Block-Btn {
    color: #111011
}

.Uu-ProfileModal {
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
    display: none;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: -1rem;
    width: 100%
}

.Close-Button-Profile {
    color: #e51313;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    right: 10px;
    top: 1px
}

.UU-Table {
    border: 1px solid #83774c;
    height: auto;
    width: 100%
}

.UU-TD {
    font-size: 12px;
    padding: 1px 1px 1px 5px;
    text-align: center;
    white-space: nowrap
}

.UU-CR-DATE {
    font-size: 12px;
    width: 230px
}

.UUSpace {
    font-size: 14px;
    position: relative;
    width: 82px
}

.SelectedValueUU {
    color: #fff
}

#UUTD {
    border: 1px solid #444;
    font-size: 14px;
    padding: 1px 5px;
    text-align: center;
    white-space: nowrap
}

.module-column {
    align-items: center;
    padding: 0 10px;
    width: 500%
}

.ModuleLabel {
    -webkit-appearance: checkbox;
    appearance: checkbox;
    height: -12px;
    text-align: left;
    width: 200px
}

.a-unique-module-row input[type=checkbox] {
    margin-top: 11px
}

.SelectModuleBoxMain {
    border: 1px solid #444
}

.Module-Label {
    font-weight: 700
}

.hoverable-image {
    cursor: pointer
}

.A-Bold-text {
    font-weight: 700
}

.AU-Col-Class-2 {
    margin-top: -15px
}

.fontSize16 {
    font-size: 12px
}

.error-messageAU {
    color: red;
    font-size: 11px;
    font-style: italic;
    padding-left: 5px
}

.error-messageMaxlengthAU {
    color: blue;
    display: none;
    font-size: 11px;
    font-style: italic;
    transition: display .5s ease-in-out
}

.fade-in {
    display: inline-block
}

.fade-out {
    display: none
}

.MA-User-heading {
    font-size: min(3vw, 20px)
}

.View-heading {
    font-size: min(2vw, 16px)
}

.Remark_leble {
    font-size: 1.4rem !important;
    font-weight: 500
}

textarea#text_area {
    font-size: 1.3rem;
    padding: 2px 9px
}

.custom-checkbox {
    align-items: center;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    transition: background-color .3s
}

.custom-checkbox.checked {
    background-color: #d4edda
}

.custom-checkbox.unchecked {
    background-color: #f8d7da
}

.custom-checkbox.disabled {
    opacity: .6
}

.custom-checkbox .icon {
    font-size: 1.2em;
    margin-left: 10px
}

.ModuleLabel {
    display: inline-block;
    flex-grow: 1
}

.Icon_box {
    background-color: #fff;
    border-radius: 2px;
    margin-left: 5px;
    padding-left: 2px;
    padding-right: 2px
}

.icon_box_border {
    border: 1px solid #f96
}

.Icon_box_background {
    background-color: #f96
}

.Icon_Text_color {
    color: #f96
}

.icon_box_border_success {
    border: 1px solid #28a745 !important
}

.Module_wraper {
    align-items: flex-start;
    display: flex
}

.Modle_heading_tage {
    font-size: 1.5rem;
    font-weight: 500
}

@media (max-width:575.98px) {
    .Popup-Content {
        width: 98%
    }
}

.AuEdit-Time {
    color: #2b6e5b;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    position: relative;
    right: 6px;
    top: 10px
}

.Admin-UU-Table-MainHeading {
    font-size: min(4vw, 20px);
    left: 30px;
    position: relative;
    top: 2px
}

.Admin-UU-Table-heading {
    position: relative
}

.UU-Main-Heading {
    font-size: min(4vw, 20px)
}

.Manage-AU-UU {
    font-size: 14px;
    font-weight: 700;
    margin-left: 30px;
    text-align: left
}

@media (min-width:320px) and (max-width:425px) {
    .UU-Main-Heading {
        font-size: 11px
    }

    .MobileheadingTableadmin {
        font-size: 11px !important
    }
}

.modal {
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%
}

.modal.open {
    display: flex
}

.AuModal_wrap {
    background-color: #fff;
    border-radius: 8px;
    margin: 5px;
    max-width: 660px !important;
    min-width: 400px
}

.close {
    color: #000;
    cursor: pointer;
    float: right;
    font-size: 30px;
    font-weight: 700;
    left: 3px;
    margin-top: -17px;
    position: relative
}

.close:hover {
    color: #f70f0f;
    cursor: pointer;
    text-decoration: none
}

.AuModal_Btn_model {
    background-color: #5cb85c;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    margin-top: 15px;
    padding: 10px 20px
}

.AuModal_Btn_model:hover {
    background-color: #5cb85ca8
}

.AuModal-Btn:hover {
    background-color: #5cb85c8f
}

.SaveBtn {
    text-align: center
}

.AuModal-label {
    margin-top: 5px
}

.AuModal-Status,
.AuModal-U-label,
.AuModal-label {
    font-weight: 700
}

.AuModal-Input {
    margin-left: 10px;
    width: 250px
}

.AuModal-Input-Remark {
    margin-left: 17px;
    width: 250px
}

.AU-Container {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px
}

.module-row {
    width: calc(39.33% - 4px)
}

.Blocked-Input-Fields {
    margin-left: 108px;
    position: relative;
    top: -51px;
    top: -30px;
    width: 250px
}

.Reject-Remark-Required,
.Remark-Requireds {
    position: absolute
}

.Re-error-message-au {
    color: #f44336;
    font-size: 12px;
    font-style: italic;
    font-weight: lighter;
    left: 5px;
    margin: 2px;
    position: relative
}

.Re-error-messageMaxlength {
    color: blue;
    font-size: 11px;
    font-style: italic;
    margin: 2px
}

.maxlength-message-aupop {
    left: 6%;
    position: relative
}

.Icon_box_model {
    background-color: #fff;
    border-radius: 2px;
    height: 20px;
    margin-left: 5px;
    padding-left: 2px;
    padding-right: 2px;
    width: 20px
}

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

.CancelBtn {
    text-align: center
}

.AuModal_CancelBtn_model {
    background-color: #ab683f;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    left: 33px;
    margin-top: 15px;
    padding: 10px 20px;
    position: relative
}

.AuModal_CancelBtn_model:hover {
    background-color: #ab683f9e
}

.AuModal_RejectBtn_model {
    background-color: #888;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    margin-top: 15px;
    padding: 10px 20px;
    position: relative
}

.AuModal_RejectBtn_model:hover {
    background-color: #888888b0
}

.Heading-Name {
    text-align: center
}

.Chart-Heading {
    position: relative
}

.Agriform {
    background: #8080801f
}

.AgriClose {
    color: red
}

.AgriNext {
    background-color: #00008b;
    border: 1px solid #00008b
}

.iconForCreateproject {
    color: #2f4f4f;
    font-size: 33px
}

.Agriform {
    background: #d3d3d3;
    width: 1100px
}

.AgriClose {
    color: #ff0000ab;
    font-size: 20px;
    font-weight: bolder;
    text-align: end
}

.Agri-Heading {
    font-size: 16px
}

.Project_info {
    border: 1px solid gray
}

.AgriLabel {
    font-size: 15px
}

.scrollable-input {
    height: 100px;
    overflow-y: auto
}

.AgriCancel {
    background: #bb2525;
    border: 1px red;
    border-radius: 5px
}

.AgriCancel,
.AgriNext {
    color: #fff;
    font-size: 19px
}

.AgriNext {
    background-color: #006400;
    border: none;
    border-radius: 5px
}

.agrilogo {
    height: 50px;
    padding: 0 !important
}

.SidebarMenu {
    height: 822px
}

.Agrihedingnav {
    color: #2e7b2c;
    font-size: 22px;
    font-weight: 600
}

.agrilogoSidebar {
    height: 55px
}

.AgriRow {
    background-color: #e9ecef
}

.SidebarMenu {
    transition: width .5s;
    width: 250px
}

.collapsed {
    width: 100px
}

.expanded {
    width: 200px
}

.AgriBack {
    left: 355px;
    position: fixed
}

.activeAgri {
    background-color: #2d8530;
    color: #fff
}

.Iconnextandprevious {
    font-size: 12px
}

.Asign_Autherise {
    background-color: #fff;
    height: 200px;
    overflow-y: scroll;
    width: 100%
}

.Section_ThreeManagement {
    border: .5px solid gray;
    margin: auto
}

.Section_TwoMAnagement {
    background-color: gray
}

.Agrihr {
    background-color: #80808057;
    border: none;
    height: .5px
}

.BackgroundAgricontainer {
    position: relative
}

.backgroundAgriimage {
    -webkit-filter: brightness(.5);
    filter: brightness(.5);
    height: 100vh;
    object-fit: cover;
    width: 100%
}

.overlay-text {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    left: 60%;
    position: absolute;
    top: 40%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.iconForCreateproject {
    width: 25px
}

.buttons.active {
    background-color: #2d8530;
    color: #fff
}

.sectionOfAgrisidebar:hover {
    background-color: #faebd7
}

.ButtonOfCreateProject {
    background-color: initial;
    border: none;
    color: #2f4f4f;
    font-weight: 600
}

.maincontent {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    overflow-y: auto
}

.SidebarContainer {
    display: flex
}

.SidebarMenu {
    height: 830px
}

.SidebarMenu.expanded {
    width: 250px
}

.SidebarMenu.collapsed {
    width: 60px
}

.SidebarMenu {
    transition: width .3s
}

.errores {
    border: .1px solid #dc3545 !important
}

input:focus {
    outline: none
}

.FormId {
    background-color: hsla(0, 0%, 95%, .5);
    height: 100%;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 2
}

.LIst_input_text {
    border: 1px solid #ced4da;
    height: 35px;
    margin: auto;
    padding: 6px 0 8px;
    width: 270px
}

.project_input {
    border: none;
    height: 30px;
    padding-left: 10px;
    width: 100%
}

.project_input:focus {
    outline: none
}

.List_ProjectId {
    background-color: #fff;
    border: 1px solid #ccc;
    bottom: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    left: 50%;
    max-height: 200px;
    overflow-y: auto;
    padding: 20px;
    position: absolute;
    top: 154px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 270px;
    z-index: 1000
}

.List_ProjectId li {
    padding: 8px
}

.List_ProjectId li:hover {
    background-color: #f8f9fa
}

.icon_Projectid {
    border-left: 1px solid #adbfce;
    font-size: 16px;
    padding: 5px 4px;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.remove_outline_border {
    background-color: #f3f3f3
}

input.remove_outline_border:focus,
textarea.remove_outline_border:focus {
    border: none !important;
    outline: none !important
}

.icon_Projectid.rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.scrollable-item {
    border-bottom: 1px solid #ccc;
    padding: 8px
}

.Form_shadow {
    box-shadow: 0 54px 55px rgba(0, 0, 0, .25), 0 -12px 30px rgba(0, 0, 0, .12), 0 4px 6px rgba(0, 0, 0, .12), 0 12px 13px rgba(0, 0, 0, .17), 0 -3px 5px rgba(0, 0, 0, .09)
}

.Nvdi_title {
    font-family: Times New Roman, Times, serif;
    font-size: 25px
}

.user_Modal-wraper .modal-overlay {
    align-items: center;
    background-color: gray !important;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 10px
}

.model_condent {
    font-size: 12px;
    margin: 0;
    width: 338px
}

.ReactModal__Content.ReactModal__Content--after-open.user-modal.user_Modal-wraper {
    left: 48%;
    top: 35% !important
}

.HorizontalLine {
    border: 1px solid gray
}

.heading_h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 1px !important
}

.heading_top {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase
}

.Super-Card-Body {
    word-wrap: break-word;
    background-clip: initial;
    background-color: #f2f2f2;
    border: 0 solid rgba(0, 0, 0, .125);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    top: -25px;
    width: 919px !important
}

.password-icon {
    font-size: 12px
}

.is-invalid {
    border-color: #f44336
}

.error-message {
    color: #f44336;
    font-size: 11px;
    padding-left: 1px
}

.Super-Card-Body .small-option {
    font-size: 1.5rem
}

.Super-Card-Body .form-control {
    background-color: #fff;
    background-image: none;
    color: #495057;
    display: block;
    font-weight: 400;
    line-height: 1.5
}

.user_Modal-wrapper {
    left: 48%;
    position: absolute;
    top: 34% !important;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 22%
}

.user_Modal-wrapper .modal-content-custom {
    border-radius: 8px;
    padding: 20px
}

.user_Modal-wrapper label {
    font-size: 1.3rem;
    margin-right: 10px !important
}

.user_Modal-wrapper .form-control {
    flex-grow: 0;
    width: 230px
}

.btn_success {
    background-color: #2b6e5b !important;
    color: #fff;
    margin-top: 10px;
    outline: none !important
}

.btn_success:focus {
    outline: none
}

.super_user_bg {
    background-blend-mode: overlay;
    background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(/static/media/CreateSuperUserBackGroundImg.7edf68ef878f86525483.PNG)
}

.Super-Card-Body label {
    color: #000;
    font-weight: 500;
    margin-bottom: 0;
    margin-top: 0 !important
}

.popup-overlay-su-create {
    align-items: center;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .5);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000
}

.popup-content-su-create {
    align-items: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    color: red;
    display: grid;
    font-size: 24px;
    font-weight: 700;
    height: 15%;
    padding: 20px;
    position: relative;
    text-align: center;
    width: 25%
}

.CSU-Timer {
    color: #f44336;
    font-size: 20px;
    font-style: italic;
    font-weight: 600
}

.StartRow {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 5px
}

.CreateSuTime {
    left: 60px;
    position: relative;
    top: 63px
}

.Cre-SU-Time {
    color: #2b6e5b;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    font-weight: 700
}

.text-su {
    color: #059ff9
}

.page-not-found {
    background-color: #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    margin-top: 50px;
    padding: 50px;
    text-align: center
}

.page-not-found h1 {
    color: #333;
    font-size: 3em;
    margin-bottom: 20px
}

.page-not-found p {
    color: #666;
    font-size: 1.5em;
    margin-bottom: 30px
}

.page-not-found a {
    background-color: #007bff;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    font-size: 1.2em;
    padding: 10px 20px;
    text-decoration: none;
    transition: background-color .3s
}

.page-not-found a:hover {
    background-color: #0056b3
}

.page_404 {
    background: #fff;
    font-family: Arvo, serif;
    padding: 40px 0
}

.page_404 img {
    width: 100%
}

.four_zero_four_bg {
    background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
    background-position: 50%;
    height: 400px
}

.four_zero_four_bg h1,
.four_zero_four_bg h3 {
    font-size: 80px
}

.link_404 {
    background: #39ac31;
    color: #fff !important;
    display: inline-block;
    margin: 20px 0;
    padding: 10px 20px
}

.popup-overlay {
    align-items: center;
    background-color: rgba(0, 0, 0, .7);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%
}

.popup-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    padding: 20px;
    text-align: center;
    width: 500px
}

.popup-close-btn {
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    margin-top: 15px;
    padding: 8px 16px
}

.popup-close-btn:hover {
    background-color: #0056b3
}

body>.dragging-layer {
    --default-background-color: #fff;
    border: none;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    opacity: .6;
    overflow: visible;
    padding: 0;
    pointer-events: none;
    position: absolute !important;
    white-space: nowrap;
    z-index: 9999
}

body>.dragging-layer>:first-child {
    box-shadow: 0 0 8px rgba(0, 0, 0, .1), inset 0 0 8px rgba(0, 0, 0, .1);
    overflow: hidden !important;
    pointer-events: none !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important
}

body>.dragging-layer>.dragging {
    opacity: 1 !important
}

body>.dragging-layer>div:last-child {
    left: 12px;
    position: absolute;
    top: 12px
}

.drag-initiator {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none
}

.drag-accept-reject:after {
    content: "🚫"
}

.dock {
    display: flex;
    height: 100%;
    position: absolute;
    width: 100%
}

.dock,
.dock-bar {
    box-sizing: border-box;
    overflow: hidden
}

.dock-bar {
    zoom: 1;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    position: relative;
    white-space: nowrap
}

.dock-ink-bar {
    background-color: #108ee9;
    box-sizing: border-box;
    height: 0;
    margin-top: -3px;
    position: absolute;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 0
}

.dock-tab-btn-disabled {
    color: #ccc;
    cursor: default
}

.dock-nav-animated {
    transition: -webkit-transform .25s cubic-bezier(.35, 0, .25, 1);
    transition: transform .25s cubic-bezier(.35, 0, .25, 1);
    transition: transform .25s cubic-bezier(.35, 0, .25, 1), -webkit-transform .25s cubic-bezier(.35, 0, .25, 1)
}

.dock-tab {
    background: #fafafd;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    float: left;
    font-weight: 500;
    height: 30px;
    margin-right: 10px;
    min-width: 30px;
    outline: none;
    padding: 0;
    position: relative;
    text-align: center;
    transition: color .25s cubic-bezier(.35, 0, .25, 1)
}

.dock-tab.dragging {
    opacity: .3
}

.dock-tab>div {
    outline-color: #108ee9;
    padding: 4px 14px
}

.dock-tab:hover {
    color: #349fec
}

.dock-tab-active,
.dock-tab-active:hover {
    color: #108ee9;
    cursor: default;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.dock-tab-disabled {
    color: #ccc;
    cursor: default
}

.dock-tab-disabled:hover {
    color: #ccc
}

.dock-content-animated {
    transition: margin .3s
}

.dock-bottom>.dock-nav .dock-ink-bar-animated,
.dock-bottom>div>.dock-nav .dock-ink-bar-animated,
.dock-top>.dock-nav .dock-ink-bar-animated,
.dock-top>div>.dock-nav .dock-ink-bar-animated {
    transition: width .3s, left .3s, right .3s
}

.dock-content-animated .dock-tabpane {
    flex-shrink: 0
}

.no-flexbox .dock-content {
    overflow: auto;
    -webkit-transform: none !important;
    transform: none !important
}

.dock-tabpane:not(.dock-tabpane-active) {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-name: dock-fadeOut;
    animation-name: dock-fadeOut
}

@-webkit-keyframes dock-fadeOut {
    0% {
        height: 100%;
        visibility: visible
    }

    to {
        height: 100%;
        visibility: visible
    }
}

@keyframes dock-fadeOut {
    0% {
        height: 100%;
        visibility: visible
    }

    to {
        height: 100%;
        visibility: visible
    }
}

.dock-top {
    flex-direction: column
}

.dock-top .dock-bar {
    background: #fafafd;
    border-bottom: 1px solid #f3f3f3;
    flex: 0 0 auto;
    padding-left: 8px
}

.dock-top .dock-content-animated {
    flex-direction: row
}

.dock-top .dock-tab-next {
    right: 2px
}

.dock-tab-close-btn {
    color: #ddd;
    cursor: pointer;
    font-family: Fredoka One, sans-serif;
    font-size: 12px;
    outline: none;
    position: absolute;
    right: -3px;
    text-align: center;
    top: 6px;
    transition: all .25s ease-in-out;
    width: 16px
}

.dock-tab-close-btn:before {
    content: "X"
}

.dock-tab-close-btn:focus,
.dock-tab-close-btn:hover {
    color: #666;
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.dock-tab-close-btn:focus,
.dock-tab:hover .dock-tab-close-btn {
    color: #a2a2a2;
    opacity: 1
}

.dock-tab-hit-area {
    bottom: 0;
    left: -5px;
    pointer-events: none;
    position: absolute;
    right: -5px;
    top: 0
}

.dock-content,
.dock-pane-cache {
    height: 100%;
    width: 100%
}

.dock-content {
    display: flex
}

.dock-content-holder {
    flex: auto
}

.dock-top>.dock-content-holder {
    height: 0
}

.dock-content .dock-tabpane {
    flex: none;
    height: 100%;
    outline: none;
    overflow: hidden;
    position: relative;
    width: 100%
}

.dock-nav {
    flex: none;
    position: relative
}

.dock-nav,
.dock-nav-operations {
    display: flex
}

.dock-nav-more {
    align-self: flex-end;
    background: transparent;
    border: none;
    color: rgba(0, 0, 0, .85);
    cursor: pointer;
    height: 30px;
    position: relative
}

.dock-nav-more:after {
    box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, .08);
    content: "";
    height: 30px;
    left: -30px;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 30px;
    z-index: 1
}

.dock-nav-wrap {
    align-self: stretch;
    flex: auto;
    overflow: hidden;
    -webkit-transform: translate(0);
    transform: translate(0);
    white-space: nowrap
}

.dock-nav-list,
.dock-nav-wrap {
    display: flex;
    position: relative
}

.dock-nav-list {
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s
}

.dock-extra-content {
    display: flex;
    height: 30px
}

.dock-extra-content .dock-tab-close-btn {
    position: relative;
    right: 4px
}

.dock-dropdown {
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    box-sizing: border-box;
    color: rgba(0, 0, 0, .85);
    display: block;
    font-size: 14px;
    font-variant: tabular-nums;
    left: -9999px;
    line-height: 1.5715;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -9999px;
    z-index: 1050
}

.dock-dropdown-hidden {
    display: none
}

.dock-dropdown-menu {
    background-clip: padding-box;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
    list-style-type: none;
    margin: 0;
    max-height: 200px;
    outline: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 0;
    text-align: left
}

.dock-dropdown-menu-item {
    color: rgba(0, 0, 0, .85);
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin: 0;
    min-width: 120px;
    overflow: hidden;
    padding: 5px 12px;
    position: relative;
    text-overflow: ellipsis;
    transition: all .3s;
    white-space: nowrap
}

.dock-dropdown-menu-item .dock-tab-hit-area {
    left: 0;
    right: 0
}

.dock-dropdown-menu-item .dock-tab-close-btn {
    right: 2px
}

.dock-dropdown-menu-item:hover {
    background: #f5f5f5
}

.dock-dropdown-menu-item-disabled,
.dock-dropdown-menu-item-disabled:hover {
    background: 0 0;
    color: #ccc;
    cursor: not-allowed
}

body.dock-dragging .dock-tab-hit-area {
    pointer-events: inherit
}

body.dock-dragging {
    user-select: none;
    -webkit-user-select: none
}

body.dock-dragging iframe {
    pointer-events: none
}

.dock-panel {
    background: #fff;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: rgba(0, 0, 0, .85);
    position: relative
}

.dock-panel.dragging {
    opacity: .3
}

.dock-panel-drag-size {
    position: absolute;
    z-index: 300
}

.dock-panel-drag-size-t {
    cursor: ns-resize;
    height: 8px;
    left: 4px;
    right: 4px;
    top: -4px
}

.dock-panel-drag-size-b {
    bottom: -4px;
    cursor: ns-resize;
    height: 8px;
    left: 4px;
    right: 4px
}

.dock-panel-drag-size-l {
    bottom: 4px;
    cursor: ew-resize;
    left: -4px;
    top: 4px;
    width: 8px
}

.dock-panel-drag-size-r {
    bottom: 4px;
    cursor: ew-resize;
    right: -4px;
    top: 4px;
    width: 8px
}

.dock-panel-drag-size-t-l {
    cursor: nwse-resize;
    height: 8px;
    left: -4px;
    top: -4px;
    width: 8px
}

.dock-panel-drag-size-t-r {
    cursor: nesw-resize;
    height: 8px;
    right: -4px;
    top: -4px;
    width: 8px
}

.dock-panel-drag-size-b-l {
    bottom: -4px;
    cursor: nesw-resize;
    height: 8px;
    left: -4px;
    width: 8px
}

.dock-panel-drag-size-b-r {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Cpath fill='rgba(0, 0, 0, 0.1)' d='M2 12 12 2v10z'/%3E%3C/svg%3E")
}

.divider-box,
.dock-box {
    align-items: stretch;
    box-sizing: border-box;
    display: flex
}

.divider-box>:nth-child(odd) {
    flex: 1 1 auto
}

.dock-divider {
    background: transparent;
    box-sizing: border-box;
    flex: 0 0 4px;
    z-index: 1
}

.dock-hbox>.dock-divider {
    cursor: ew-resize;
    -webkit-transform: scaleX(3);
    transform: scaleX(3)
}

.dock-vbox {
    flex-direction: column
}

.dock-vbox>.dock-divider {
    cursor: ns-resize;
    -webkit-transform: scaleY(3);
    transform: scaleY(3)
}

.dock-fbox {
    pointer-events: none;
    z-index: 200
}

.dock-fbox>.dock-panel {
    box-shadow: 0 0 4px #aaa;
    pointer-events: visible;
    position: absolute
}

.dock-fbox>.dock-panel.dragging {
    opacity: .8;
    pointer-events: none
}

.dock-mbox {
    height: 100%;
    width: 100%;
    z-index: 250
}

.dock-mbox>.dock-panel {
    box-shadow: 0 0 4px #aaa;
    height: 100%;
    width: 100%
}

.dock-mbox.dock-mbox-show {
    -webkit-animation: dock-mbox-show .2s ease;
    animation: dock-mbox-show .2s ease;
    visibility: visible
}

.dock-mbox.dock-mbox-hide {
    -webkit-animation: dock-mbox-hide .2s ease;
    animation: dock-mbox-hide .2s ease;
    opacity: 0;
    pointer-events: none;
    visibility: hidden
}

@-webkit-keyframes dock-mbox-show {
    0% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
        visibility: visible
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        visibility: visible
    }
}

@keyframes dock-mbox-show {
    0% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
        visibility: visible
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        visibility: visible
    }
}

@-webkit-keyframes dock-mbox-hide {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
        visibility: visible
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.9);
        transform: scale(.9);
        visibility: visible
    }
}

@keyframes dock-mbox-hide {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
        visibility: visible
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.9);
        transform: scale(.9);
        visibility: visible
    }
}

.dock-wbox {
    height: 100%;
    position: absolute;
    width: 100%
}

.dock-wbox>.dock-panel {
    border: none;
    height: 100%;
    width: 100%
}

.dock-layout {
    overflow: hidden;
    position: relative
}

.dock-layout>.dock-box {
    height: 100%;
    position: absolute;
    width: 100%
}

.dock-layout>.dock-drop-indicator {
    background: #88c7f4;
    border: 1px solid #fff;
    box-shadow: 0 0 4px #ddd;
    box-sizing: border-box;
    display: none;
    opacity: .5;
    pointer-events: none;
    position: absolute;
    transition: all .1s ease-out;
    z-index: 400
}

.dock-drop-edge {
    background: #fff;
    border: none;
    opacity: .01;
    z-index: 100
}

.dock-drop-edge,
.dock-drop-layer {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 30px
}

.dock-drop-layer {
    pointer-events: none
}

.dock-drop-layer .dock-drop-square {
    background: #fff;
    border: 1px solid transparent;
    box-sizing: border-box;
    color: #ddd;
    font-family: Fredoka One, sans-serif;
    height: 32px;
    left: calc(50% - 16px);
    pointer-events: visible;
    position: absolute;
    top: calc(50% - 16px);
    width: 32px;
    z-index: 300
}

.dock-drop-layer .dock-drop-square .dock-drop-square-box {
    border: 1px solid #ddd;
    box-sizing: border-box;
    height: 100%;
    width: 100%
}

.dock-drop-layer .dock-drop-square:before {
    display: block;
    height: 100%;
    line-height: 30px;
    position: absolute;
    text-align: center;
    width: 100%
}

.dock-drop-layer .dock-drop-float {
    border: none;
    height: 100%;
    left: 0;
    opacity: .01;
    top: 0;
    width: 100%;
    z-index: 100
}

.dock-drop-layer .dock-drop-left {
    left: calc(50% - 48px)
}

.dock-drop-layer .dock-drop-left.dock-drop-deep {
    left: calc(50% - 64px);
    width: 16px
}

.dock-drop-layer .dock-drop-left:before {
    content: ">";
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.dock-drop-layer .dock-drop-right {
    left: calc(50% + 16px)
}

.dock-drop-layer .dock-drop-right.dock-drop-deep {
    left: calc(50% + 48px);
    width: 16px
}

.dock-drop-layer .dock-drop-right:before {
    content: ">"
}

.dock-drop-layer .dock-drop-top {
    top: calc(50% - 48px)
}

.dock-drop-layer .dock-drop-top.dock-drop-deep {
    height: 16px;
    top: calc(50% - 64px)
}

.dock-drop-layer .dock-drop-top.dock-drop-deep:before {
    line-height: 14px
}

.dock-drop-layer .dock-drop-top:before {
    content: ">";
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
}

.dock-drop-layer .dock-drop-bottom {
    top: calc(50% + 16px)
}

.dock-drop-layer .dock-drop-bottom.dock-drop-deep {
    height: 16px;
    top: calc(50% + 48px)
}

.dock-drop-layer .dock-drop-bottom.dock-drop-deep:before {
    line-height: 14px
}

.dock-drop-layer .dock-drop-bottom:before {
    content: ">";
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.dock-drop-layer .dock-drop-square-dropping {
    background: #88c7f4;
    color: #fff
}

.dock-panel.dock-panel-dropping .dock-tab-close-btn {
    pointer-events: none
}

.dock-panel-max-btn,
.dock-panel-min-btn {
    box-sizing: border-box;
    cursor: pointer;
    font-family: Fredoka One, sans-serif;
    height: 25px;
    margin: 2px 2px 2px 0;
    outline: none;
    padding: 6px 4px 4px 2px;
    transition: all .25s ease-in-out;
    -webkit-user-select: none;
    user-select: none;
    width: 21px
}

.dock-panel-max-btn:before,
.dock-panel-min-btn:before {
    border: 2px solid #ddd;
    border-radius: 1px;
    box-sizing: border-box;
    content: " ";
    height: 13px;
    position: absolute;
    width: 13px
}

.dock-panel-max-btn:focus,
.dock-panel-max-btn:hover,
.dock-panel-min-btn:focus,
.dock-panel-min-btn:hover {
    color: #a2a2a2
}

.dock-panel-max-btn:focus:before,
.dock-panel-max-btn:hover:before,
.dock-panel-min-btn:focus:before,
.dock-panel-min-btn:hover:before {
    border-color: #a2a2a2
}

.dock-panel-max-btn:hover,
.dock-panel-min-btn:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.dock-panel-min-btn:before {
    border: none;
    border-radius: 1px;
    color: #666;
    content: "-";
    font-size: 20px;
    height: 9px;
    line-height: 4px;
    position: absolute;
    width: 9px
}

.dock-panel-min-btn:focus:before,
.dock-panel-min-btn:hover:before {
    color: #999
}

.dock-panel.dock-style-place-holder {
    border: none
}

.dock-panel.dock-style-place-holder .dock-bar {
    display: none
}

.dock-layout>:not(.dock-fbox) .dock-panel.dock-style-headless {
    border: none
}

.dock-layout>:not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar {
    height: 20px;
    opacity: 0;
    position: absolute;
    transition: all .15s ease-in-out;
    width: 100%;
    z-index: 1
}

.dock-layout>:not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:focus-within,
.dock-layout>:not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:hover,
.dock-layout>:not(.dock-fbox) .dock-panel.dock-style-headless.dock-panel-dropping .dock-bar {
    height: 31px;
    opacity: 1
}

.dock-layout>:not(.dock-fbox) .dock-panel.dock-style-headless .dock-content {
    height: 100%
}

.dock-panel.dock-style-main {
    border: none
}

.dock-panel.dock-style-main .dock-bar {
    background: none;
    border-bottom: 1px solid #eee
}

.dock-panel.dock-style-main .dock-tab {
    background: #fff
}

.dock-panel.dock-style-card .dock-tab {
    border: 1px solid #ddd;
    border-radius: 5px 5px 0 0;
    margin-right: 2px
}

.dock-panel.dock-style-card .dock-tab.dock-tab-active {
    background: #fff;
    border-bottom: 1px solid #fff
}

.dock-panel.dock-style-card .dock-bar {
    border-bottom: 1px solid #ddd;
    overflow: visible
}

.dock-panel.dock-style-card .dock-nav-wrap {
    padding-top: 5px;
    -webkit-transform: translateY(1px);
    transform: translateY(1px)
}

.dock-panel.dock-style-card .dock-ink-bar {
    background: #fff;
    opacity: 0
}

.dock-panel.dock-style-card .dock-tab-hit-area {
    left: -2px;
    right: -2px
}

.dock-panel.dock-style-card .dock-panel-max-btn,
.dock-panel.dock-style-card .dock-panel-min-btn {
    margin-top: 4px
}

.dock-panel.dock-style-card .dock-tab-close-btn {
    font-size: 10px;
    right: 0;
    top: 8px
}

.dock-panel.dock-style-card .dock-extra-content {
    height: 35px
}

.MyLayout-DropBox-container {
    height: 100%;
    margin: 4px
}

.list {
    display: flex;
    gap: 10px
}

.header-section {
    align-items: center;
    display: flex;
    gap: 6rem
}

.header-section-icons {
    align-items: center;
    display: flex;
    gap: 3rem
}

.audra-wss-mors-div {
    display: flex;
    gap: 1rem
}

.header-section-home-icons {
    padding-left: 6px
}

.drop-zones {
    display: flex;
    height: 100%;
    padding-bottom: 20px;
    width: 100%
}

.drop-zone {
    border: 1px solid gray;
    margin: 2px
}

.dropZoneTwo {
    height: 100%;
    width: 100%
}

.dropZoneOne,
.dropZoneThree {
    width: 20%
}

.drop-zone--col2 {
    width: 100%
}

.drop-zone--active {
    background-color: rgba(0, 255, 0, .1);
    border-color: green
}

.console {
    margin-top: 20px
}

.Layout-head-heading {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0
}

.Layout-Box-header {
    background: #fff;
    border-bottom: 1px dashed #000;
    cursor: grab;
    position: relative
}

.dock-panel {
    border: 1.5px solid #9b9b9b
}

.Layout-main-div {
    height: 83vh;
    padding: 4px;
    position: relative
}

.Layout-main-div .dock-top .dock-bar {
    background: #fafafd;
    border-bottom: 1px dashed #8f8f8f;
    flex: 0 0 auto;
    padding-left: 4px
}

.Layout-main-div .dock-panel[data-dockid=panel2-bottom] .dock-top .dock-bar,
.Layout-main-div .dock-panel[data-dockid=panel2] .dock-top .dock-bar {
    border-bottom: 2px solid #a8a7a7
}

.dock-tab-title,
.map-middle-part {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.dock-tab-title,
.map-middle-part span {
    font-family: Eras ITC, sans-serif;
    font-size: 14px
}

.dock-panel-max-btn,
.dock-panel-min-btn {
    display: none !important
}

.Layout-main-div .dock-extra-content {
    align-items: center;
    font-size: 10px;
    height: 22px
}

.Layout-main-div .dock-extra-content .custom-down-btn,
.Layout-main-div .dock-extra-content .custom-pin-btn {
    padding: 4px
}

.Layout-main-div .dock-extra-content .custom-close-btn {
    box-sizing: border-box;
    cursor: pointer;
    font-family: Fredoka One, sans-serif;
    font-weight: 600;
    outline: none;
    padding: 4px;
    transition: all .25s ease-in-out;
    -webkit-user-select: none;
    user-select: none
}

[data-dockid=panel2] .dock-bar {
    cursor: default;
    pointer-events: none
}

.Layout-main-div [data-dockid=panel2] .dock-bar {
    padding-left: 0
}

[data-dockid=panel2] .dock-tab {
    background-color: #aaa7a7;
    height: 100%;
    padding: 2px 8px 0
}

[data-dockid=panel2] .dock-nav {
    height: 100%
}

.Layout-main-div [data-dockid=panel2-bottom] .dock-bar {
    padding-left: 0
}

[data-dockid=panel2-bottom] .dock-tab {
    background-color: #aaa7a7;
    height: 100%;
    padding: 2px 8px 0
}

[data-dockid=panel2-bottom] .dock-nav {
    height: 100%
}

.table-tab-title span {
    font-family: Eras Medium ITC, Arial, sans-serif;
    font-size: 14px
}

.close-btn {
    color: #535353;
    cursor: pointer;
    font-size: 10px;
    font-weight: 300;
    margin-left: 10px
}

.map-middle-name,
.tble-name {
    color: #fdf8f8;
    margin-left: 5px
}

.fa-earth,
.fa-table {
    color: #000
}

.close-btn:hover {
    color: darkred
}

.dock-tab {
    border-bottom: 0;
    height: 22px;
    margin-right: 2px
}

.dock-tab .dock-tab-btn {
    padding: 0
}

.reopen-btn {
    background-color: red;
    background-color: green;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    margin-left: 10px;
    padding: 5px 10px
}

.dock-top .dock-ink-bar {
    bottom: 0;
    display: none;
    height: 2px;
    left: 0
}

.custom-down-btn {
    transition: max-height .3s ease
}

.Layout-Header {
    align-items: center;
    background-color: #d4ebf5;
    border: 1px solid #a7a3a3;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px
}

.dropdown {
    display: inline-block;
    position: relative
}

.dropdown-btn {
    background-color: #3f5f9b;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 10px
}

.dropdown-btn:hover {
    background-color: #2e4777
}

.reopen-dropdown-menu {
    background-color: #f9f9f9;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0 10px;
    position: absolute;
    z-index: 99
}

.reopen-dropdown-menu li {
    cursor: pointer;
    display: block;
    font-size: 12px;
    padding: 2px;
    text-decoration: none
}

.reopen-dropdown-menu:hover {
    background-color: #978989;
    color: #fff
}

.unpin-dropdown {
    display: inline-block;
    position: relative;
    right: 2px
}

.unpin-dropdown-btn {
    background-color: #3f5f9b;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    width: 13rem
}

.unpin-dropdown-btn:hover {
    background-color: #2e4777
}

.unpin-dropdown-menu {
    background-color: #f9f9f9;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 13rem;
    z-index: 99
}

.unpin-dropdown-menu li {
    border: 1px solid #474646;
    cursor: pointer;
    display: block;
    font-size: 12px;
    padding: 2px 4px;
    text-decoration: none;
    transition: all .5s ease
}

.unpin-dropdown-menu li:hover {
    background-color: #7d89a0;
    color: #fff;
    font-weight: 600;
    transition: all .8s ease
}

.dropdown:hover .reopen-dropdown-menu,
.unpin-dropdown:hover .unpin-dropdown-menu {
    display: block
}

.Layout-main-div .dock-drop-layer .dock-drop-left {
    left: calc(49% - 48px)
}

.Layout-main-div .dock-drop-layer .dock-drop-right {
    left: calc(51% + 16px)
}

.Layout-main-div .dock-drop-layer .dock-drop-top {
    top: calc(48% - 48px)
}

.Layout-main-div .dock-drop-layer .dock-drop-bottom {
    top: calc(52% + 16px)
}

.Layout-main-div .dock-drop-layer .dock-drop-top.dock-drop-deep {
    top: calc(40% - 64px)
}

.Layout-main-div .dock-drop-layer .dock-drop-bottom.dock-drop-deep {
    top: calc(60% + 48px)
}

.Layout-main-div .dock-drop-layer .dock-drop-right.dock-drop-deep {
    left: calc(55% + 16px);
    width: 16px
}

.Layout-main-div .dock-drop-layer .dock-drop-left.dock-drop-deep {
    left: calc(46% - 48px);
    width: 16px
}

.Layout-main-div .dock-drop-square.dock-drop-middle {
    display: none
}

.dock-drop-layer .dock-drop-square {
    background: #8fabdd
}

.dock-panel[data-dockid=panel1],
.dock-panel[data-dockid=panel2-bottom],
.dock-panel[data-dockid=panel3],
.dock-panel[data-dockid=panel4],
.dock-panel[data-dockid=panel5] {
    flex-basis: auto;
    min-height: 28px !important;
    min-width: 10px !important
}

.dock-panel-drag-size-b-r {
    background-image: none;
    bottom: -4px;
    cursor: nwse-resize;
    height: 17px;
    right: -4px;
    width: 17px
}

.unpin-btn {
    background-color: #007bff;
    border: none;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    color: #fff;
    cursor: pointer;
    padding: 6px
}

.dock-hbox>.dock-divider {
    cursor: col-resize
}

.dock-vbox>.dock-divider {
    cursor: row-resize
}

.custom-point-icon {
    align-items: center;
    background-color: #38f;
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 12px;
    height: 24px;
    justify-content: center;
    text-align: center;
    width: 24px
}

@media (min-width:768px) and (max-width:991.98px) {
    .Layout-main-div {
        height: 79vh
    }
}

@media (min-width:992px) and (max-width:1299px) {
    .Layout-main-div {
        height: 80vh
    }
}

@media (min-width:1300px) and (max-width:1750px) {
    .Layout-main-div {
        height: 80vh
    }
}

.analytics-container {
    background: #e0ecf8;
    border: 1px solid gray;
    opacity: 0;
    z-index: 1000
}

.analytics-header {
    align-items: center;
    background: #174a7a;
    color: #fff;
    display: flex;
    font-style: italic;
    font-weight: 700;
    justify-content: space-between;
    padding: 6px 15px
}

.header-icon {
    height: 24px;
    margin-right: 10px;
    width: 24px
}

.header-title {
    flex-grow: 1;
    font-size: 16px
}

.close-button {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px
}

.close-button:hover {
    color: #fdd
}

.analytics_tabs {
    align-items: center;
    border-bottom: 1px solid gray;
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: auto;
    padding: 5px 0
}

.tab-button {
    background: #05bcfe;
    border: 2px solid #05bcfe;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    padding: 7px 15px;
    transition: all .3s ease;
    width: 250px
}

.tab-button.active {
    background: #069cd1;
    color: #fff
}

.tab-button:hover {
    background: #07c
}

.morphometric-container {
    display: flex;
    justify-content: flex-end;
    padding: 10px 25px 0
}

.analytics-body {
    padding: 0 25px
}

.section-title {
    color: #000;
    font-size: 16px;
    font-weight: 700
}

.button-group {
    display: flex;
    gap: 5px
}

.param-button {
    background: linear-gradient(180deg, #f0f0f0 0, #dcdcdc);
    border: 1px solid #999;
    border-radius: 3px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, .3);
    color: #000;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    text-shadow: 1px 1px 1px hsla(0, 0%, 100%, .8);
    transition: all .2s ease-in-out
}

.param-button:hover {
    background: linear-gradient(180deg, #e0e0e0 0, silver)
}

.param-button:active {
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
    -webkit-transform: translateY(1px);
    transform: translateY(1px)
}

.content-box_warper {
    background-color: #d5dce6;
    border: 2px solid #ccc;
    max-height: 500px;
    overflow-y: auto;
    padding: 15px
}

.content-box_warper::-webkit-scrollbar {
    width: 6px
}

.content-box_warper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px
}

.content-box_warper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px
}

.content-box_warper::-webkit-scrollbar-thumb:hover {
    background: #555
}

.content-box {
    justify-content: space-between
}

.content-box,
.content-item {
    align-items: center;
    display: flex
}

.content-item {
    width: 100%
}

.content-label {
    background-color: #a2b5e0;
    border: 1px solid #7d92c4;
    border-radius: 2px;
    color: #fff;
    flex: 0 0 90%;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
    padding: 4px 12px
}

.content-label.active {
    background-color: #688feb;
    border-color: #5a74a6;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    color: #fff;
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    transition: all .2s ease-in-out
}

.edit-btn {
    background-color: #e5ecfb;
    border: 1px solid gray;
    border-radius: 3px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
    cursor: pointer;
    flex: 0 0 10%;
    padding: 5px;
    transition: background .3s ease
}

.edit-btn:hover {
    background-color: #d0d8f1
}

.edit-icon {
    color: #3b4f8e
}

.range-container {
    background: #e6f2ff;
    border: 1px solid #ccc;
    border-radius: 5px;
    gap: 40px;
    margin-bottom: 5px;
    padding: 6px 15px;
    width: 100%
}

.range-container,
.range-row {
    align-items: center;
    display: flex
}

.range-row {
    gap: 10px
}

.range-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%
}

.range-row:last-child {
    border-bottom: none
}

.range-input {
    background: #f1f2f3;
    border: 2px solid #99c2ff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    padding: 2px;
    text-align: center;
    transition: border-color .2s ease-in-out;
    width: 80px
}

.range-input:focus {
    border-color: #06c;
    box-shadow: 0 0 5px rgba(0, 102, 204, .5)
}

.range-symbol {
    color: #007bff;
    font-size: 16px;
    font-weight: 700;
    padding: 0 5px
}

.range-interpretation {
    background: #f1f2f3;
    border: 2px solid #99c2ff;
    border-radius: 4px;
    color: #004080;
    font-size: 14px;
    font-weight: 700;
    margin-top: 5px;
    outline: none;
    padding: 3px 10px;
    transition: border-color .2s ease-in-out;
    width: 100%
}

.range-interpretation:focus {
    border-color: #06c;
    box-shadow: 0 0 5px rgba(0, 102, 204, .5)
}

.range-index {
    color: #004080;
    font-size: 14px;
    font-weight: 700;
    min-width: 25px;
    text-align: right
}

.map-content-main-div {
    height: 100%;
    overflow: auto
}

.contextMenu--option {
    cursor: default;
    font-size: 12px;
    min-width: 160px;
    padding: 6px 50px 5px 10px
}

.contextMenu--option:hover {
    background: linear-gradient(0deg, #555, #333);
    color: #fff
}

.contextMenu--separator {
    background: #ccc;
    height: 1px;
    margin: 0;
    width: 100%
}

.leaflet-draw-section {
    position: relative
}

.leaflet-draw-toolbar {
    margin-top: 12px
}

.leaflet-draw-toolbar-top {
    margin-top: 0
}

.leaflet-draw-toolbar-notop a:first-child {
    border-top-right-radius: 0
}

.leaflet-draw-toolbar-nobottom a:last-child {
    border-bottom-right-radius: 0
}

.leaflet-draw-toolbar a {
    background-clip: padding-box;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAAeCAYAAACWuCNnAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAG7AAABuwBHnU4NQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAbvSURBVHic7dtdbBxXFQfw/9nZ3SRKwAP7UFFUQOoHqGnUoEAoNghX9tyxVcpD1X0J+WgiUQmpfUB5ACSgG1qJIKASqBIUIauqAbWseIlqb+bOWHVR6y0FKZBEqdIUQROIREGRx3FFvR/38ODZst3a3nE8Ywfv+T2t7hzdM3fle/bOnWtACCGEEEIIIYQQQgghhBBCCCGEEEIIIcRa0EbfgBDdFItFKwzDAa3175LuWylVAvBIR/MxrXUp6Vxx9dp4VyObVEdKKW591lonXgiVUg6AHzPzk9ls9meVSmUh6RzXkz179uQKhcIgM+8CACI6U6vVnp+enm6knXt4ePiuTCbzWQAwxlSDIHg57ZwroDAMnwKwz3XdBzzPG08hxzsTNprQG2lTjtd13WFmfghAP4A+AJcATFiW9YNKpfL3uP0kUliiX4SG1pqUUpx0wXJd9/PMXAGwPWq6yMyPz8/P/7xarf4nyVwt7QV4JWkU52i8YwBu6bh0wRhzJAiCF5POCQCDg4N2Pp//NYDRjkuTxph9QRCESeYrFov5ubm5R5n5AIAPtV1aYOb7BgYGTpZKJeO67lFmPsbM9/i+/8Ja8y6zylhOYquPXhsvAJRKpczMzMwTAIaJ6LFGo+HNzs5eKRQKNxPRAWb+CoAjWuvn4vS35skWFasxAAdbbUlOYqVUPwAPwI4lLr8J4KeWZT1eqVTmksoZ5d2QghUVKx/AlmVCFph5yPf9l5LMCwBKqUksFqszRHQcAJj5GwB2MfOE7/tfTDKf4zjHiejrAE4CuNhqZ+bf2rY9FYbhGBH92/O8o47j3Oj7/uUk86+3XhsvACilHmPmgW3btn3pxIkTVzuvj4yMfNoY85wxZiQIglPd+lvTZIuq5xiAQwCe6evr218ul5tr6bNd9GiiAbyvS+hFrfVHk8oLbEzBih4Dz+G9K6t3IaLXFhYWdib5eBh911UA8wBu1lq/CQBDQ0M3WJb1OoAdRPQZz/NeSSqnUuofAKpa6/vb26MfwacA7AdwFcCdWuu/JpU3yl1C91VHoquNXhvvyMjIx4wxr1iWtbNSqfxruTjHcR4AcMj3/bu79XnNe1hpFyvHcXYT0QS6FysASHR1tVEKhcIguhQrAGDm23K53BcATCWV27KsAWYGgPOtYgUAU1NT/1RKnQewxxjzOQCJFSwANwI4297QtmLfD+AtZr43m83OJ5iz3bGU+l1OT43XGFNk5mdXKlYAYNv2eBiG31dK3aS1vrRSbOZabqRYLFppFisAIKJxAB+MGf56krk30O64gZlMJnZsHMxsoo8fHxoauqHVHn3+BAAQUaxV57Xq2F54i5nvIaJXm81mYoX5etID491JRH/sFlQul5tEdMoYc3u32FUXrLYvObViBQDM/MQqwi8knX8jEJHpHrXIGJNo8WDm1spph2VZgeu6+5RSX7YsK8D/Xnb8Psmcnebm5h7G4uS9ysxutOH8VQC70sy7UTb7eImImTnWlgkzUyaT6fr3v6qC1fGL8EytVjuQRrECANu2fwHg1TixzPyXNO5hvTHz6VWE/znJ3L7vzxBRa9PzDmb+FYBfArgjajvd39+f9vGGKwACZh5te6mwmc8KburxMvO5TCbzqW5xxWLRArDbsqyu8z32HtZSxSrNM0Hlcrnpum6JmZ+NEb4pHglrtdrz+Xz+AoBbu4Ser9fra37d3YEBfBvAkq+XmfmbpVIp9grwWnie9zSAp9PMcT3Z7OPNZrO/aTQaf1BKfbd9X7RTGIaHmPlcnPNYsVZYSikOw7AB4CAzj/f19e1fjwOMnueVEeMxJJfLbYqCNT093TDGHAGw0qHYBQBH0vj+Pc+bYOb3HFRk5nHf9yeTzgfgMhF9uEvMTQD+71/vR3pqvJOTk28AeBJAeXR09P1LxbiuuxfA9wB8LU6fsVdYrUOhtm0fTusxcAlMRN+KziUt5SqAM3v37r00OZnGfFp/QRC86DjOUCaTGWPm2zoun8fiIbuZtPLX6/UH8/n8rQDuippertfrD6aRKyqOR5VS81ji8Z+IbmfmgwB+mEb+9dZr4wWA/v7+R6rV6k+azeYpx3EezeVyJ7dv335lfn7+lkajcZCZDzPzYd/3/xSnv9gFq3UuaR2LFQDA87xAKVUB8BEAZ6N9nrNEdEZr/TcArLVOPG8aJ9jj8n3/pcHBwZ1btmx5519zmPl0vV5/Ie2V7fT09Nujo6Nus9kcA4CtW7ce1lq/nUYu27a/Mzs7CyI6gMVX/u/CzJeZ+Ue2bcc9pb1aXc8lJZms18YLANE2wkOu694N4OFGo3E8DMMPAHiDiCaY+ZOb4YCsEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhEjYfwGO+b5dFNs4OgAAAABJRU5ErkJggg==);
    background-image: linear-gradient(transparent, transparent), url(/static/media/spritesheet.a4e0eb7ad904a4858361.svg);
    background-repeat: no-repeat;
    background-size: 300px 30px
}

.leaflet-retina .leaflet-draw-toolbar a {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAA8CAYAAAC6nMS5AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAA16SURBVHic7d1/jBxneQfw7zNzvotdn+9sVQkxoRKoammBqqpbk6uT5mLfvHPn42yn1VFRVCEhoFH5IYpoSaUCKi1NcGkcfrbCVRFKEwG2aHLn83pmLvY2CTqT1AmCOBE0EOT4B0nBPw/snb2dp3/sLr6s77i923dud/a+H8ny7tzMo8f3eud99p133gGIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiFYGaXYCRETUPMYYrWe/MAzZX2QQ27d5OpqdABFROxgZGVlz5cqVrzuOc18QBJPNzofsYvvSYrVcgTVftZ2l6npgYODXHMc5oKoHHcfZHQTB2WbnRETpGRkZWVMoFA6IyO2qutX3/R1Z64TnO8fWOwLSzti+mSKDg4M3l0qlnSJyG4CbAFwP4ByAlwE8paoPX3fddcH4+PjP00yk5QqsrDPGvAZAHsBrReRNqvpeY8x/iMg9QRCcaXJ6ZIHv+xtUdReAHQBej/IHGABOAnhORMY6OjoempiYONe0JC3zPM84jjOqqrfi6r/3RQCPAdgXhmHUvOyaa3R01L1w4cJBALdVNq1W1THP87woir7ZzNyocWzf7PA8b4uI7E6S5A9Frqknb6j8eZOIvKNQKPzU9/1/dhznvlwuV0gjn5YbFapW09Vqu/Z9K9u2bdsNruvmUe50axUAfMV13X/I5XInlzcze2x/28lCu1b19fWt7u7u/hCAvwGwboHdL6jq7unp6T1TU1OXlyG9VAwODv5mkiR7Ady6wK6Plkqldz/yyCPfX468bBkaGuqamZm5E8DbReQNANYscMiLIrI1CILnZ280xrwHwL+hck4VkacBDLTS6HVaIxWt/Blm+zauldu3atOmTas2bNjwWRG5s7LplKp+VUQOuq77/bVr17589uzZ9SKy0XGcAVUdFZE/qOx7zHXdXWn0yy31i6sMw/4MyF6BZYy5XlWPiMhvL7BrrKpfcxznE7Uf4ixYqQWW53kbATw060NZr28nSbJzcnLyRBp5pcnzvNtE5CEAvXUecg7ArjAMH00xLWuGhoZuKpVKEwB+p85DXnRd9/ZcLvcDAOjv778un88XAChwtRMWkW+jxTpfYOV1wGxfO1q1fav6+vpWr1u3blxVtwH4uar+/fT09OcW+mJrjBkBcC+AXwdwBoAJw/AZm7m1zC+uUlyNA9g6189buZH7+/t/tbOz8wiANy7isKKqftV13U8eOnToe2nlZttKLLAqJ+qjAF69xBAnZ2Zmbj58+PApm3mlqTJydRTXFldHAUxVXvcBuLnm5+dU9c1RFP1v2jk2YmhoqKtUKj2B+jvfE0mS3D45OflD4OqcHADPh2H4F6h0wp7nva1YLOby+fz5dDKnerB9Vwzxff8BVX0bgFMAdoZheKzeg4eHh9cXi8WvAfAAvOC67ptzudz/WUvOVqBGVO7OmBCR/vn2adWOuL+/v7ezs3MSwKYlhkgAHBSRjwdB8JTF1FKx0gqsymXBxwH8XoOh/ieO41vz+fwVG3mlzRjzKF55WfA8gD8LwzA3ez/P87aLyIMAeqrbVDUfRdHty5Pp0hhjPgDgM9X3qnq/iNwPYM5RCdd1T1RPvLM63+q/ce/sTpiaj+27Mvi+f6eq/iuAi67r9uVyuWcXG6NSjB8B0KeqE1EUvcVWfk3v3OYZuXosjuPt+Xx+ull51WNgYKBHRKIlXDaaS6Kq+6Mo+lMLsVKz0gosz/M+KiKfsBTub8MwvMdSrNQYYzwAYc3m7bXFVZXv+8OqemD2NlUdiKLokbRybJQx5lsANlfefi4Mww/UedyvADgI4I9mbxeRDwdB8C92s0yHrc9wK3922b6Na+X2BYD+/v61nZ2dz6M8cX00DMP9S421ffv2V83MzDwHoNfmucuxEWSpslxcjYyMrHEcZ8xScQUAjoj8vqVYZIHv+xtE5MMWQ941PDy83mK8VIjIW2s2HZ2vuAKAIAgmADyxQIxWM3uu5J56DhgZGVkDYBw1nS+ApwB82VJeZAfbt82tWrXqPSgXV481UlwBwMGDB3+sqncDgIh81EZ+QBMLrKwXV5Uh5NoPYqMyN+m9nanqHVj4bsHF6InjeKfFeKmoLMUw+/2Ct6KLyOM1m2x/NmxbW30RhuGPFtp5jstGVU+JiNdqE57rEYahzB6lWOz7Fsf2be/2hYj8SeXlvTbiFYvFLwK4DOAWY8z1NmI2pcDKcnE1OjraWSgU9uPaD2LDRKSlJwavQCO2A4rIDtsxU7BxsQeoau2Jeak3BDTDL72kUm/n63neaFoJUkPYvm3G9/0NKN9gc7mrq6t2OsOSVGqPSQCuiAzaiLnsBVaWiysAuHDhwn4AQ2nEVtUfpBGXluwNKcRcaBmPVpDMfiMiW+o4pnafZM69MmYxnW9lsj9lCNs3m1T1tSjXL89aXo39WCX+62wEW9YCK+vFVcXLKcbmJcLW8qoUYmZhZOfFmvc3e563fb6djTFvwdUJxfPFyJx6O1/f999a6Xz5ZIwMYftm2o2Vv60+HUVETldeLnoUfy7LVmC1SXEFVf0YgFSeX5QkCQus9tfyIzsicnSObQ/6vj9cu71SXP1nPTGyplAo5FDT+arqk3Ecb5s9J0dV2flmENs3u0REgTmnJjRkVjwrd2Iuy3+adimuACCKotPGmC8A+GvLoZOZmZkXLMekBojIaVX9DcthTy+8S3MlSTIuIu+q2dyjqgeMMU8A+CYAUdUtAOa8izZJkvG081wG19xN5jjO4ByLTLrLlRBZxfbNrjMAICI3LrTjIlVHrqyMjKU+gtVOxVVVHMf/hHkWrGvAiawsQrlSqOqiF61rRkzbOjo6AsxfCG4G8FcAPvhLlih5qVgsWpl42kIyezcZ1YXtmy0/QvlqwG9V1i6zZRMAiIiV+dCpFljtWFwBQOUbzqcth+XlwdZjfRRGRMZsx7St8mT5zzcQ4r52+LKgqp9S1U8B+GTtZSPKPrZvdlXaagrAalU1NmJWCrVtAEqO4xyyETO1S4TtWlxVXbp06b7u7u6/BHCTjXiqygKrxYjIQ6p6L2Y9BqZB51etWtXyBRYAuK77hVKp9H5cnUxarzOu634xjZyWWxRFdzU7B0oP2zfbVPUbIrLFcZwPAfivRuOJyPtUdbWq5m09jzCVEax2L64AYGpq6rKq/qOteI7jsMBqMUEQnFXV3bbiqerdExMT52zFS1Mul7soIovugETkI7lc7mIaORERVRWLxS8BeElVb/F9v6EnR/i+f6Oq3gUAjuPYejSavQLLGKPVP4VC4Wd4ZXF1pKura7Bdiquq3t7efwfwnKVwLLBa0PT09B5U1kZp0BPFYvGzFuIsmyAI7kf5uWz1OhgEwTV3FLaoX5yLKosWLknNsZcayohsYvu2uUo98TEAUNW9vu8vad3CoaGhLlX9BoBeAONBEByxleNyLNPwWBzHOywvBtYS9u3bV1LVj1sKxwKrBU1NTV12XXcXgFMNhDmpqndkcF6SisifAzhRx76n4jh+Byzd3rwMjldfqOqSV+xPkmT2yvzH592RlhvbdwUIw3AvgAcArFPVcHBwcFHPBvZ9f0OpVDqA8qrwL8Rx/E6b+VkvsGqfZ9ROlwXnEkXRfgDfajCMXrx48Yc28iH7crncSVXdrKpPLvZYEXk6SZItURS1/PIMcwmC4KzjOCMAam9dn+0SgJ35fP4ny5SWDQ/Mer3HGLPoTtgYMyIiv3gOmqpmZfRuJWD7rgwax/G7UH7EzcYkSf7bGHNXX1/f6oUO9H1/Z+WcPoDysgw7bJ/DUl8Hq52LqwoVkb9T1WiRx8UoX158RlWfnJqaupxCbmRJFEWn+/r6buvu7v4ggI9g4Ynv50XknkKh8JkMjly9wqFDh77j+/6oqo4BqD1xXRaRPw6CwMZl1GXjuu6XSqXSOwH8LoD1AMaMMecA1PtF53WV4wCUC+menp699jOlpWD7rhz5fP5Kf3//UFdX132q+l4Ad3d3d7/fGPN1EZlQ1e/19PS8dPbs2fWu694kIgOqOqqqm4Dy4rKlUumOw4cPN3KVYk7WVkE1xsx5aSBLT+duhDEmQrkSnssZlIeXnxWRY6p6PI7j41nveFeq4eHh9XEc7xSRnQBej6t3kp5EuWh+OI7jh+dYsDDTfN/frKrjAKpPmv9pkiS7JicnH29mXku1devWV3d0dBxAuRNeMhF5ulgsjqRxgk7DfOfqxWr1czvbtzGt3r5zGRwc7FPV3ap6y0L7ishPAHx63bp1e/bt2xenkQ8LLEuMMZtE5JCqfhfAMwCeSZLkO2vWrDk+NjbGyZHUFjzP2yginwcAVX1fVi99Vo2OjnaeP3/+3SLydgBvBNBd56GXAHxXVR/s7e3dm9YJOg0rqQNm+y5dFtp3HmKM2QxgF8qr9b8GwA0AzgH4MYBjIjJ28eLFkFeOiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIhWgv8Hnffz4dmwY9cAAAAASUVORK5CYII=);
    background-image: linear-gradient(transparent, transparent), url(/static/media/spritesheet.a4e0eb7ad904a4858361.svg)
}

.leaflet-draw a {
    display: block;
    text-align: center;
    text-decoration: none
}

.leaflet-draw a .sr-only {
    clip: rect(0, 0, 0, 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.leaflet-draw-actions {
    display: none;
    left: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    white-space: nowrap
}

.leaflet-touch .leaflet-draw-actions {
    left: 32px
}

.leaflet-right .leaflet-draw-actions {
    left: auto;
    right: 26px
}

.leaflet-touch .leaflet-right .leaflet-draw-actions {
    left: auto;
    right: 32px
}

.leaflet-draw-actions li {
    display: inline-block
}

.leaflet-draw-actions li:first-child a {
    border-left: 0
}

.leaflet-draw-actions li:last-child a {
    border-radius: 0 4px 4px 0
}

.leaflet-right .leaflet-draw-actions li:last-child a {
    border-radius: 0
}

.leaflet-right .leaflet-draw-actions li:first-child a {
    border-radius: 4px 0 0 4px
}

.leaflet-draw-actions a {
    background-color: #919187;
    border-left: 1px solid #aaa;
    color: #fff;
    font: 11px/19px Helvetica Neue, Arial, Helvetica, sans-serif;
    height: 28px;
    line-height: 28px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none
}

.leaflet-touch .leaflet-draw-actions a {
    font-size: 12px;
    height: 30px;
    line-height: 30px
}

.leaflet-draw-actions-bottom {
    margin-top: 0
}

.leaflet-draw-actions-top {
    margin-top: 1px
}

.leaflet-draw-actions-bottom a,
.leaflet-draw-actions-top a {
    height: 27px;
    line-height: 27px
}

.leaflet-draw-actions a:hover {
    background-color: #a0a098
}

.leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
    height: 26px;
    line-height: 26px
}

.leaflet-draw-toolbar .leaflet-draw-draw-polyline {
    background-position: -2px -2px
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polyline {
    background-position: 0 -1px
}

.leaflet-draw-toolbar .leaflet-draw-draw-polygon {
    background-position: -31px -2px
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon {
    background-position: -29px -1px
}

.leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
    background-position: -62px -2px
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
    background-position: -60px -1px
}

.leaflet-draw-toolbar .leaflet-draw-draw-circle {
    background-position: -92px -2px
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle {
    background-position: -90px -1px
}

.leaflet-draw-toolbar .leaflet-draw-draw-marker {
    background-position: -122px -2px
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-marker {
    background-position: -120px -1px
}

.leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
    background-position: -273px -2px
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
    background-position: -271px -1px
}

.leaflet-draw-toolbar .leaflet-draw-edit-edit {
    background-position: -152px -2px
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit {
    background-position: -150px -1px
}

.leaflet-draw-toolbar .leaflet-draw-edit-remove {
    background-position: -182px -2px
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove {
    background-position: -180px -1px
}

.leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled {
    background-position: -212px -2px
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled {
    background-position: -210px -1px
}

.leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled {
    background-position: -242px -2px
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled {
    background-position: -240px -2px
}

.leaflet-mouse-marker {
    background-color: #fff;
    cursor: crosshair
}

.leaflet-draw-tooltip {
    background: #363636;
    background: rgba(0, 0, 0, .5);
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    font: 12px/18px Helvetica Neue, Arial, Helvetica, sans-serif;
    margin-left: 20px;
    margin-top: -21px;
    padding: 4px 8px;
    position: absolute;
    visibility: hidden;
    white-space: nowrap;
    z-index: 6
}

.leaflet-draw-tooltip:before {
    border-bottom: 6px solid transparent;
    border-right: 6px solid rgba(0, 0, 0, .5);
    border-top: 6px solid transparent;
    content: "";
    left: -7px;
    position: absolute;
    top: 7px
}

.leaflet-error-draw-tooltip {
    background-color: #f2dede;
    border: 1px solid #e6b6bd;
    color: #b94a48
}

.leaflet-error-draw-tooltip:before {
    border-right-color: #e6b6bd
}

.leaflet-draw-tooltip-single {
    margin-top: -12px
}

.leaflet-draw-tooltip-subtext {
    color: #f8d5e4
}

.leaflet-draw-guide-dash {
    font-size: 1%;
    height: 5px;
    opacity: .6;
    position: absolute;
    width: 5px
}

.leaflet-edit-marker-selected {
    background-color: rgba(254, 87, 161, .1);
    border: 4px dashed rgba(254, 87, 161, .6);
    border-radius: 4px;
    box-sizing: initial
}

.leaflet-edit-move {
    cursor: move
}

.leaflet-edit-resize {
    cursor: pointer
}

.leaflet-oldie .leaflet-draw-toolbar {
    border: 1px solid #999
}

.Layout-mapbox .leaflet-control-zoom {
    display: none
}

#LayoutMap .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    background-image: url(/static/media/LYBase_Layers128.1a7566d8f3b69b73ab35.svg)
}

#LayoutMap .leaflet-pm-toolbar .leaflet-pm-icon-marker {
    background-image: url(/static/media/DWDraw_Point128.020bfa76d4999ca811dd.svg)
}

#LayoutMap .leaflet-pm-toolbar .leaflet-pm-icon-polyline {
    background-image: url(/static/media/DWDraw_Line128.553df8b7b3c648fe9de3.svg)
}

#LayoutMap .leaflet-pm-toolbar .leaflet-pm-icon-rectangle {
    background-image: url(/static/media/DWDraw_Box_Poly128.f0934ad3725db3f0fda2.svg)
}

#LayoutMap .leaflet-pm-toolbar .leaflet-pm-icon-polygon {
    background-image: url(/static/media/DWDraw_Poly128.244b9bb770bda0cda5fd.svg)
}

#LayoutMap .leaflet-pm-toolbar .leaflet-pm-icon-edit {
    background-image: url(/static/media/DWEdit_Move_Feature128.c8b4fb82e7466266c6d7.svg)
}

#LayoutMap .leaflet-pm-toolbar .leaflet-pm-icon-fullextent {
    background-image: url(/static/media/NAFull_Extent128.4ffae883925af4e5237c.svg)
}

#LayoutMap .leaflet-pm-toolbar .leaflet-pm-icon-MapPan {
    background-image: url(/static/media/NAPan128.9e8db12755f71a3aff98.svg)
}

#LayoutMap .leaflet-pm-toolbar .leaflet-pm-icon-FixedZoomOut {
    background-image: url(/static/media/NAFixed_Zoom_Out128.036956bd2cdd5b1974cc.svg)
}

#LayoutMap .leaflet-pm-toolbar .leaflet-pm-icon-FixedZoomIn {
    background-image: url(/static/media/NAFixed_Zoom_In128.f2ad0312d6e2ea77d911.svg)
}

#LayoutMap .leaflet-pm-toolbar .leaflet-pm-icon-GoToPreviousExtent {
    background-image: url(/static/media/NAGo_To_Previous_Extent128.c557feef9321d43e528b.svg)
}

#LayoutMap .leaflet-pm-toolbar .leaflet-pm-icon-GoToNextExtent {
    background-image: url(/static/media/NAGo_To_Next_Extent128.50a4c0b6a2d10e896a36.svg)
}

#LayoutMap .leaflet-pm-toolbar .leaflet-pm-icon-ZoomSelected {
    background-image: url(/static/media/NAZoom_Select128.ac3292c6d377acabbf0e.svg)
}

#LayoutMap .leaflet-pm-toolbar .leaflet-pm-icon-SelectedZoomIn {
    background-image: url(/static/media/NAZoom_In128.4e3ad3692fe850813649.svg)
}

#LayoutMap .leaflet-pm-toolbar .leaflet-pm-icon-SelectedZoomOut {
    background-image: url(/static/media/NAZoom_Out128.943a53fd4c943ab2d254.svg)
}

#LayoutMap .leaflet-control-custom-zoom .ZoomInIcon {
    background-image: url(/static/media/NAZoom_In128.4e3ad3692fe850813649.svg)
}

#LayoutMap .leaflet-control-custom-zoom .ZoomOutIcon {
    background-image: url(/static/media/NAZoom_Out128.943a53fd4c943ab2d254.svg)
}

#LayoutMap .OurTool {
    position: absolute;
    top: 5.5rem
}

#LayoutMap .leaflet-control-layers-toggle {
    background-image: url(/static/media/LYBase_Layers128.1a7566d8f3b69b73ab35.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: 1px 1px 3px #000, inset -1px -1px 3px #545454, inset 1px 1px 3px #fff;
    box-sizing: border-box;
    display: block;
    height: 25px;
    width: 30px
}

#LayoutMap .leaflet-pm-toolbar .leaflet-buttons-control-button {
    background-color: #ededed;
    border-bottom: 1px solid #ccc;
    box-shadow: 1px 1px 5px #979595, inset -1px -1px 5px #dddada, inset 1px 1px 5px #fff;
    box-sizing: border-box;
    color: #000;
    display: block;
    font-size: 1.5rem;
    padding: 4px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 30px;
    z-index: 3
}

.map-button-alignment {
    display: flex;
    flex-direction: column;
    gap: 2px
}

#map-tool-btn .leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar,
.map-tool-btn {
    border: none
}

.Main-div-of-map {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative
}

.ordinate-div {
    display: flex;
    gap: 6px
}

.co-ordinate-select {
    height: 100%;
    width: 19rem
}

.Lod-div {
    height: 100%;
    width: 8rem
}

.Layout-mapbox {
    flex: 1 1;
    position: relative
}

.map-footer {
    border-top: 1.5px solid #9b9b9b;
    display: flex;
    height: auto;
    justify-content: space-between;
    padding: 1px;
    position: relative
}

.int-feature-div {
    align-items: center;
    display: flex;
    font-size: 12px;
    gap: 5px;
    padding: 0 2px
}

.input-feature-selected {
    font-size: 11px
}

.input-feature-selected::-webkit-input-placeholder {
    font-size: 12px
}

.input-feature-selected::placeholder {
    font-size: 12px
}

.font-10 {
    font-size: 10px;
    font-weight: 600
}

.vr-line {
    border: 1px solid #9b9b9b
}

.int-feature-div .rotedbtn-map {
    background-color: #297bdf;
    border-radius: 10px;
    color: #fff;
    padding: 3px;
    rotate: 35deg;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.box-marker,
.triangle-marker {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.dropdown-container {
    cursor: pointer;
    font-family: Arial, sans-serif;
    position: relative;
    width: 100px
}

.dropdown-header {
    background-color: #fff;
    font-size: 10px;
    padding: 3px 6px
}

.dropdown-header:hover {
    border-color: #007bff
}

.dropdown-arrow {
    color: #333;
    font-size: 10px
}

.dropdown-list {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    left: 0;
    margin-bottom: 0;
    overflow-y: auto;
    padding: 0;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 1000
}

.dropdown-up {
    bottom: 100%;
    top: auto
}

.dropdown-item {
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color .2s
}

.dropdown-item:last-child {
    border-bottom: none
}

.dropdown-item:hover {
    background-color: #007bff;
    color: #fff
}

.hidden-item {
    display: none
}

.dropdown-item.disabled {
    color: #666;
    cursor: default;
    text-align: center
}

.dropdown-list::-webkit-scrollbar {
    width: 8px
}

.dropdown-list::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px
}

.dropdown-list::-webkit-scrollbar-thumb:hover {
    background-color: #999
}

.SVG-TAZoom-size img {
    height: 15px;
    width: 15px
}

.map-controls-tool {
    left: 0;
    position: absolute;
    z-index: 1000
}

.button_container_map {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .2);
    cursor: pointer;
    margin: 1px 0;
    padding: 2px;
    transition: -webkit-transform .1s ease;
    transition: transform .1s ease;
    transition: transform .1s ease, -webkit-transform .1s ease
}

.button_container_map:hover {
    box-shadow: 0 0 6px rgba(0, 0, 0, .3);
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.button_container_map.active-btn {
    border: 2px solid #1677ff
}

img.map-control-icon {
    height: 22px;
    width: 28px
}

.gp-content-main-div {
    height: 100%;
    overflow: auto
}

.gp-content-div-fix {
    width: 379px
}

::-webkit-scrollbar {
    height: 5px;
    width: 5px
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 5px #fff
}

::-webkit-scrollbar-thumb {
    background: #b8b0b0;
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
    background: #a38c8c
}

.gp-info-heading {
    background-color: #bdd7ee;
    margin-bottom: .5rem;
    padding: 6px 8px
}

.gp-info-heading,
.ops-info-heading {
    display: flex;
    font-size: 10px;
    font-style: italic;
    font-weight: 500
}

.ops-info-heading {
    border: 1px solid;
    margin-left: 5px;
    padding: 2px 10px 2px 2px
}

#LayoutMap {
    height: 100%;
    width: 100%;
    z-index: 1
}

.Layout-mapbox .leaflet-control-zoom {
    top: -6px
}

.Select-Drainage-Div {
    display: flex;
    position: relative
}

.Drainage-LayerFile-path {
    background-image: none;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555;
    font-size: 12px;
    max-width: 336px;
    padding: 2px 2px 2px 6px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%
}

.Drainage-LayerFile-path::-webkit-input-placeholder {
    color: #afafaf;
    font-size: 12px;
    font-style: italic
}

.Drainage-LayerFile-path::placeholder {
    color: #afafaf;
    font-size: 12px;
    font-style: italic
}

.Drainage-arrow-span {
    cursor: pointer;
    padding-top: 2px;
    position: relative;
    right: 20px
}

.Drainage-ordering-div {
    padding: 6px 2px
}

.Drainage-custom-file-div {
    margin-left: 4px
}

.Drainage-custom-hidden-file-input {
    display: none
}

.Drainage-custom-file-upload {
    background-color: #fcba03;
    border: 2px outset #fcba03;
    border-radius: 4px;
    color: #262626;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    margin-bottom: 0;
    padding: 1px 8px;
    text-align: center
}

.Drainage-contents {
    max-width: 380px;
    padding: 4px;
    width: 100%
}

.Drainage-btnDIv {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: flex-start;
    padding: 6px 2px
}

.Drainage-draw-btn {
    padding: .1rem 1.2rem
}

.Drainage-draw-btn,
.Drainage-read-btn {
    background-color: #bdd7ee;
    border: 1.5px solid #868080;
    color: #000;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    position: relative;
    text-align: center
}

.Drainage-read-btn {
    padding: .1rem 1.5rem
}

.Drainage-read-btn:disabled {
    background-color: #efefef;
    border: 1px solid #3d3d3d;
    color: #000;
    cursor: not-allowed;
    opacity: .6
}

.Drainage-read-btn:isLoading {
    background-color: #efefef;
    border: 1px solid #3d3d3d;
    color: #000;
    cursor: not-allowed;
    opacity: .6
}

.Drainage-contents label {
    font-size: 11px;
    font-weight: 400;
    margin-bottom: 0
}

.pour-input {
    border: 1px dashed #a7a2a2;
    font-size: 10px;
    padding: 4px 2px 4px 6px;
    width: 100%
}

.Pour-btnDIv {
    display: flex;
    gap: 6px;
    padding: 6px 2px
}

.Multi-Point-btn,
.Single-Point-btn {
    background-color: #ceb3e78c;
    border: 1.5px solid #868080;
    color: #000;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    padding: .1rem 1rem;
    position: relative;
    text-align: center;
    width: 40%
}

.select-options-div {
    align-items: center;
    display: flex
}

.selectOpt-btnDIv {
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 6px
}

.Shreve-Ordering,
.Strahler-Ordering,
.select-append,
.select-delete,
.select-new {
    background-color: #bdd7ee;
    border: 1.5px solid #868080;
    color: #000;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    position: relative;
    text-align: center
}

.select-new {
    padding: .1rem 2rem
}

.select-append {
    padding: .1rem 1rem
}

.select-delete {
    padding: .1rem 1.4rem
}

.Strahler-Ordering {
    font-size: 16px;
    padding: .1rem 2rem
}

.Shreve-Ordering {
    padding: .1rem 2rem
}

.Strahler-Ordering-btn {
    border: 1px solid gray;
    padding: 1px
}

.Drainage-ordering-btn {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-left: 7px;
    padding: 6px 2px
}

.Drainage-fieldset {
    border: 1.5px solid #868282e3;
    border-radius: 4px;
    margin-bottom: .8rem;
    padding: 4px
}

.Drainage-legend {
    background-color: #302766;
    border: 1px solid #82827a;
    border-radius: 4px;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(2vw, 10px);
    font-style: italic;
    font-weight: 500;
    margin-bottom: 0;
    padding: 1px 6px;
    width: auto
}

.console-textarea {
    border: 1px solid #ccc;
    width: 100%
}

.quit-ref-btnDIv {
    gap: 5px;
    margin: .2rem 1rem
}

.ausaveclas {
    display: flex;
    margin-bottom: .2rem
}

.ausaveclas .GpAudralaloader {
    margin-top: 5px
}

.ausaveclas .Drainage-read-btn {
    font-size: 14px;
    margin-left: 9px;
    margin-top: 3px
}

.dock-tab {
    color: #a8a7a7
}

.dock-tab-active {
    color: #af8ad0
}

.dock-nav-more {
    display: none
}

.dock-nav-wrap {
    display: block
}

.dock-tab-title,
.map-middle-part .map-middle-name {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.dock-panel[data-dockid=panel2] .dock-nav-list {
    height: 100%
}

.my-panel-extra-btn {
    color: red;
    cursor: pointer;
    display: inline-block;
    font-family: Fredoka One;
    height: 24px;
    line-height: 30px;
    opacity: .3;
    text-align: center;
    transition: all .25s ease-in-out;
    width: 18px
}

.my-panel-extra-btn:hover {
    opacity: 1
}

.btn {
    margin: 1px 5px;
    padding: 1px 5px
}

.GpAudralaloader {
    -webkit-animation: l23 1s steps(12) infinite;
    animation: l23 1s steps(12) infinite;
    aspect-ratio: 1;
    background: linear-gradient(0deg, rgba(0, 0, 255, .5) 30%, #0000 0 70%, #00f 0) 50%/8% 100%, linear-gradient(90deg, rgba(0, 0, 255, .25) 30%, #0000 0 70%, rgba(0, 0, 255, .75) 0) 50%/100% 8%;
    background-repeat: no-repeat;
    border-radius: 50%;
    display: grid;
    height: 17px;
    width: 17px
}

.GpAudralaloader:after,
.GpAudralaloader:before {
    background: inherit;
    border-radius: 50%;
    content: "";
    grid-area: 1/1;
    opacity: .915;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
}

.GpAudralaloader:after {
    opacity: .83;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg)
}

@-webkit-keyframes l23 {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes l23 {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.Group-nuber-div {
    align-items: center;
    display: flex;
    gap: 2px;
    padding: 3px 2px
}

.arrow-size {
    border: #000;
    color: #0619c9;
    cursor: pointer;
    font-size: 25px
}

.Group-nuber-div .group-number-dropdown {
    cursor: pointer;
    height: 30px;
    width: 12rem
}

.Group-nuber-div .group-number-dropdown,
.ant-select-single .ant-select-selector {
    font-size: 11px
}

.Group-nuber-div .group-number-dropdown,
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
    padding: 0 6px
}

.Group-nuber-div .group-number-dropdown,
.ant-select-single .ant-select-selector .ant-select-selection-item,
.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
    align-self: center;
    line-height: 12px;
    padding: 0;
    transition: all .3s, visibility 0s
}

.Group-nuber-div .group-number-dropdown,
.ant-select-single.ant-select-show-arrow .ant-select-selection-item,
.ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
    -webkit-padding-end: 17px;
    padding-inline-end: 17px
}

.Group-nuber-div .group-number-dropdown,
.ant-select-dropdown .ant-select-item {
    border-radius: 4px;
    box-sizing: border-box;
    color: rgba(0, 0, 0, .88);
    cursor: pointer;
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5714285714285714;
    min-height: 20px;
    padding: 5px;
    position: relative;
    transition: background .3s ease
}

.quit-ref-btn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .5rem
}

.quit-ref-btn button {
    font-size: 13px
}

.Img-icon-size {
    height: 25px;
    margin-right: 2px;
    width: 25px
}

.ClickInfo {
    height: 30px;
    margin-right: 2px;
    width: 23px
}

.disabled-img {
    opacity: .5;
    pointer-events: none
}

.Stati-modal-overlay {
    align-items: center;
    background: rgba(0, 0, 0, .5);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999
}

.Stati-modal-content {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
    height: 50%;
    max-height: 700;
    max-width: 800px;
    padding: 5px;
    position: relative;
    width: 50%
}

.Stati-close-btn {
    background: #96a6b3;
    border: none;
    color: #b12020;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800
}

.Stati-modal-header {
    background: #bdd7ee;
    display: flex;
    justify-content: space-between
}

.Eras-ITC-fntFamily {
    font-family: Eras ITC, sans-serif
}

.stat-heading {
    font-weight: 600
}

.audra-console-fieldset {
    height: 100%;
    margin-bottom: 2px
}

.Drainage-Console-box {
    height: 22.3vh
}

.stat-dropdown {
    display: inline-block;
    position: relative;
    width: 100%
}

.dropdown-header {
    align-items: center;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 5px;
    width: 100%
}

.arrow {
    margin-left: auto
}

.dropdown-content {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    margin-top: 2px;
    padding: 3px;
    position: absolute;
    width: 100%;
    z-index: 1000
}

.dropdown-item {
    align-items: center;
    display: flex;
    padding: 2px
}

.dropdown-item input {
    margin-right: 8px
}

.calcu-sub-btn {
    background-color: #bdd7ee;
    border: 1.5px solid #868080;
    color: #000;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    padding: .4rem 3.5rem;
    position: relative;
    text-align: center
}

.fnt {
    font-size: 11px;
    font-weight: 400;
    margin-bottom: 0
}

.statistic-table .GeopicxTablesMainBoxBody {
    height: 250px
}

.Tble-Header {
    align-items: center;
    border: 1.5px solid #868282e3;
    display: flex;
    justify-content: space-between;
    margin: 2px;
    padding: 2px
}

.Tbl-Menu-bar {
    border-right: 1.5px solid #868282e3
}

.dropdown-submenu {
    position: relative
}

.dropdown-submenu .dropdown-menu {
    display: block;
    left: 100%;
    margin-left: -1px;
    margin-top: -6px;
    top: 0
}

.fa-caret-down {
    float: right;
    margin-top: 2px;
    rotate: 270deg
}

.Tbl-Menu-bar .dropdown-item {
    font-size: 12px;
    padding: 0 1.5rem
}

.Tbl-Menu-bar .dropdown-divider {
    margin: .2rem 0
}

.Drop-down-font-size {
    font-size: 10px
}

.Table-Body-div .GeopicxTablesContainerBodyHeaderRightBox,
.Table-Body-div .GeopicxTablesfirstHeader {
    display: none
}

.Table-Body-div th,
td {
    font-size: 10px
}

.btn {
    margin: 0 2px;
    padding: 0 2px
}

.SVG-icon-size img {
    height: 13px;
    margin-right: 15px;
    width: 13px
}

.watershed-content-div-fix {
    width: 379px
}

.watershed-info-heading {
    background-color: #bdd7ee;
    display: flex;
    font-size: 9px;
    font-style: italic;
    font-weight: 500;
    line-height: 11px;
    margin-bottom: .5rem;
    padding: 6px 8px
}

.watershed-contents {
    max-width: 380px;
    padding: 4px;
    width: 100%
}

.watershed-contents label {
    font-size: 11px;
    font-weight: 400;
    margin-bottom: 0
}

.watershed-fieldset {
    border: 1.5px solid #868282e3;
    border-radius: 4px;
    margin-bottom: .8rem;
    padding: 4px
}

.watershed-legend {
    background-color: #4c4c9f;
    border: 1px solid #82827a;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(2vw, 10px);
    font-style: italic;
    font-weight: 500;
    margin-bottom: 0;
    padding: 1px 6px;
    width: auto
}

.Select-watershed-Div {
    display: flex;
    position: relative
}

.watershed-LayerFile-path {
    background-image: none;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555;
    font-size: 12px;
    max-width: 336px;
    padding: 2px 2px 2px 6px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%
}

.watershed-arrow-span {
    cursor: pointer;
    padding-top: 2px;
    position: relative;
    right: 20px
}

.watershed-custom-file-div {
    margin-left: 4px
}

.WSDrainage-custom-file-upload,
.watershed-custom-file-upload {
    background-color: #fcba03;
    border: 2px outset #fcba03;
    border-radius: 4px;
    color: #262626;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    margin-bottom: 0;
    padding: 1px 8px;
    text-align: center
}

.WSDrainage-custom-file-div {
    margin-left: 4px
}

.Drainage-LayerFile-path.disabled {
    cursor: not-allowed
}

.WSDrainage-custom-file-upload.disabled {
    background-color: #f0efef;
    border-color: #f0efef;
    color: #000;
    cursor: not-allowed;
    opacity: .6
}

.watershed-custom-hidden-file-input {
    display: none
}

.watershed-btnDIv {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: flex-start;
    margin-top: 5px;
    padding: 5px 2px
}

.Clear_PolySel,
.Draw_PolySel,
.watershed-draw-btn {
    background-color: #bdd7ee;
    border: 1.5px solid #868080;
    color: #000;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    padding: .1rem 1.5rem;
    position: relative;
    text-align: center
}

.watershed-draw-btn:disabled {
    background-color: #efefef;
    border: .2px solid #3d3d3d;
    color: #000;
    cursor: not-allowed;
    opacity: .6
}

.watershed-Img-icon-size img {
    height: 20px;
    margin-right: 2px;
    width: 20px
}

.Multi-watershed,
.One-watershed,
.One-watershed-Attb {
    background-color: #bdd7ee;
    border: 1.5px solid #868080;
    color: #000;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    position: relative;
    text-align: center
}

.Multi-watershed:disabled,
.One-watershed-Attb:disabled,
.One-watershed:disabled {
    background-color: #efefef;
    border: 1px solid #3d3d3d;
    color: #000;
    cursor: not-allowed;
    opacity: .6
}

.One-watershed {
    width: 13rem
}

.Multi-watershed,
.One-watershed-Attb {
    padding: .1rem 0;
    width: 13rem
}

.one-multi-watershed-btn {
    display: flex;
    justify-content: space-between
}

.Watershed-Code-div {
    align-items: center;
    display: flex;
    gap: 2rem;
    padding: 3px 2px;
    position: relative
}

.Watershed-quit-ref-btn {
    display: flex;
    justify-content: end;
    margin: .5rem
}

.Watershed-quit-ref-btn button {
    font-size: 13px
}

.Watershed-quit-ref-btnDIv {
    gap: 5px;
    margin: 0 1rem
}

.wscode-input-box {
    border: 1px dashed #a7a2a2;
    font-size: 10px;
    padding: 4px 2px 4px 6px;
    width: 100%
}

.Watershed-quit-btn {
    background-color: #bdd7ee;
    border: 1.5px solid #868080;
    color: #000;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    padding: .1rem 1.5rem;
    position: relative;
    text-align: center
}

.Watershed-quit-btn:disabled {
    background-color: #efefef;
    border: 1px solid #3d3d3d;
    color: #000;
    cursor: not-allowed;
    opacity: .6
}

.Watershed-refresh-btn {
    background-color: #bdd7ee;
    border: 1.5px solid #868080;
    color: #000;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    padding: .1rem 1.2rem;
    position: relative;
    text-align: center
}

.Watershed-Statistics-ref-btnDIv {
    gap: 5px;
    margin: 0 1rem
}

.Watershed-Console-box {
    height: 24.8vh
}

.Watershed-console-textarea {
    border: 1px solid #ccc;
    width: 100%
}

.Watershed-Statistics-btn {
    background-color: #bdd7ee;
    border: 1.5px solid #868080;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: .1rem 2rem;
    position: relative;
    text-align: center
}

.watershed-console-fieldset {
    height: 100%;
    margin-bottom: 2px
}

.dropdown-options {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    max-height: 150px;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    z-index: 1000
}

.dropdown-item {
    cursor: pointer;
    padding: 8px
}

.dropdown-item:hover {
    background: #f0f0f0
}

.wsCode-input {
    font-size: 10px;
    padding-left: 2px
}

.wsCode-input::-webkit-input-placeholder {
    color: gray;
    font-size: 12px;
    padding-left: 1px
}

.wsCode-input::placeholder {
    color: gray;
    font-size: 12px;
    padding-left: 1px
}

.group-number-dropdown:disabled,
.wsCode-input:disabled {
    background-color: #efefef;
    color: #000;
    cursor: not-allowed;
    opacity: .6
}

.group-number-dropdown:disabled {
    border: 1px solid #3d3d3d
}

.select-editable {
    background-color: #fff;
    position: relative
}

.select-editable select {
    font-size: 14px;
    left: 0;
    margin: 0;
    top: 0;
    width: 120px
}

.select-editable input {
    border: none;
    font-size: 12px;
    left: 1px;
    padding: 1px;
    position: absolute;
    top: 1px;
    width: 100px
}

.select-editable input:focus,
.select-editable select:focus {
    outline: none
}

.ReactModal__Overlay {
    background: rgba(0, 0, 0, .5);
    inset: 0;
    z-index: 9999 !important
}

.custom-modal-overlay {
    align-items: center;
    -webkit-animation: fadeIn .3s forwards;
    animation: fadeIn .3s forwards;
    background: rgba(0, 0, 0, .5);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000
}

.custom-modal {
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    color: #000;
    float: inline-end;
    max-height: 40rem;
    padding: 0;
    text-align: center;
    width: 800px
}

.modal-logo {
    margin-bottom: 10px;
    width: 100px
}

.modal-icon {
    margin-bottom: 10px;
    width: 50px
}

.modal-buttons {
    margin-top: 20px
}

.cancel-btn,
.confirm-btn {
    border: none;
    cursor: pointer;
    font-weight: 700;
    margin: 0 10px;
    padding: 8px 16px
}

.confirm-btn {
    background-color: green;
    color: #fff
}

.cancel-btn {
    background-color: gray
}

.wspopup-heading-div {
    align-items: center;
    background-color: #1382dd;
    display: flex;
    justify-content: space-between;
    padding: 0 2px
}

.wspopup-cross {
    align-items: center;
    display: flex;
    padding-right: 2px
}

.wspopup-cross-btn {
    cursor: pointer;
    height: 10px;
    width: 10px
}

.wspopup-heading p {
    margin: 0
}

.wspopup-heading {
    align-items: center;
    border-bottom: 1.5px solid #979797;
    color: #fff;
    display: flex;
    font-family: Eras ITC, Eras Light ITC, sans-serif;
    font-size: 20px;
    font-weight: 400;
    gap: 5px;
    text-align: start
}

.WSCODE-Btn[loading] {
    opacity: .6;
    pointer-events: none
}

.WSCODE-ConfirmBtn {
    background: #2196f3;
    cursor: pointer;
    padding: 5px 21px
}

.WSCODE-CancelBtn,
.WSCODE-ConfirmBtn {
    border: none;
    border-radius: 3px;
    color: #fff;
    margin: 5px;
    width: 12rem
}

.WSCODE-CancelBtn {
    background-color: #cd6727;
    cursor: pointer !important;
    opacity: 1 !important;
    padding: 6px 28px;
    pointer-events: auto !important
}

.WSCODE-ConfirmBtn:disabled {
    border-radius: 3px
}

.WSCODE-CancelBtn:hover {
    background-color: #ab683f9e
}

.WSCODE-ConfirmBtn:not(:disabled):hover {
    background-color: #c4ddf2e1;
    color: #2196f3
}

.wspopup-content,
.wspopup-content-div {
    position: relative
}

.wspopup-content {
    grid-column-gap: 8rem;
    grid-row-gap: 1.5rem;
    background: #cdf3ff3d;
    border: 4px solid #ede9e9;
    -webkit-column-gap: 8rem;
    column-gap: 8rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 100%;
    margin: 4px 5rem;
    max-height: 18rem;
    overflow: scroll;
    overflow-x: hidden;
    padding: 4px 1rem;
    row-gap: 1.5rem
}

.wspopup-Message1 {
    color: #090909;
    font-family: Calibri, sans-serif;
    font-size: 1.7rem;
    font-weight: 500;
    margin-bottom: 7px;
    margin-top: 5px
}

.wspopup-Message2 {
    color: #474747;
    font-family: Roboto, sans-serif;
    font-size: 1.3rem;
    margin-bottom: 7px;
    margin-top: 5px;
    padding: 0 15px
}

.wspopup-Message3 {
    color: #2c159a;
    font-family: Arial Narrow, sans-serif;
    font-size: 1.65rem;
    margin-bottom: 5px;
    margin-top: 5px
}

.wspopup-logoHeading {
    align-items: center;
    display: flex;
    gap: 7px;
    justify-content: center;
    padding-bottom: 5px;
    padding-top: 10px
}

.wspopup-logoMessage {
    color: #464545;
    font-family: Lucida, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700
}

.morsis-content-div-fix {
    width: 379px
}

.morsis-info-heading {
    background-color: #bdd7ee;
    display: flex;
    font-size: 9px;
    font-style: italic;
    font-weight: 500;
    line-height: 11px;
    margin-bottom: .5rem;
    padding: 6px 8px
}

.morsis-contents {
    max-width: 380px;
    padding: 4px;
    width: 100%
}

.morsis-contents label {
    font-size: 11px;
    font-weight: 400;
    margin-bottom: 0
}

.morsis-fieldset {
    border: 1.5px solid #868282e3;
    border-radius: 4px;
    margin-bottom: .8rem;
    padding: 4px
}

.morsis-legend {
    background-color: #e2e2e2;
    background-color: #4c4c9f;
    border: 1px solid #82827a;
    color: #000;
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: min(2vw, 10px);
    font-style: italic;
    font-weight: 500;
    margin-bottom: 0;
    padding: 1px 6px;
    width: auto
}

.Select-morsis-Div {
    display: flex;
    position: relative
}

.text-gold {
    color: #c06c2b
}

.Drainage-LayerFile-path:disabled,
.morsis-LayerFile-path:disabled {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    color: #999;
    cursor: not-allowed
}

.morsis-LayerFile-path {
    background-image: none;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555;
    font-size: 12px;
    max-width: 336px;
    padding: 2px 2px 2px 6px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%
}

.morsis-LayerFile-path::-webkit-input-placeholder {
    color: #afafaf;
    font-size: 12px;
    font-style: italic
}

.morsis-LayerFile-path::placeholder {
    color: #afafaf;
    font-size: 12px;
    font-style: italic
}

.morsis-arrow-span {
    cursor: pointer;
    padding-top: 2px;
    position: relative;
    right: 20px
}

.morsis-custom-file-div {
    margin-left: 4px
}

.morsis-custom-file-upload {
    background-color: #fcba03;
    border: 2px outset #fcba03;
    border-radius: 4px;
    color: #262626;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    margin-bottom: 0;
    padding: 1px 8px;
    text-align: center
}

.morsis-custom-hidden-file-input {
    display: none
}

.morsis-btnDIv {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: flex-start;
    padding: 6px 2px
}

.morsis-draw-btn,
.morsis-save-btn {
    background-color: #bdd7ee;
    border: 1.5px solid #868080;
    color: #000;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    padding: .1rem 1.5rem;
    position: relative;
    text-align: center
}

.morsis-draw-btn :disabled,
.morsis-save-btn :disabled {
    background-color: #efefef;
    border: 1px solid #3d3d3d;
    color: #000;
    cursor: not-allowed;
    opacity: .6
}

.morsis-Img-icon-size img {
    height: 22px;
    margin-right: 1rem;
    width: 22px
}

.morpho-btn {
    background-color: #bdd7ee;
    border: 1.5px solid #868080;
    color: #000;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    padding: 1px 18px;
    position: relative;
    text-align: center
}

.morphometric-analysis-main-div {
    display: flex;
    justify-content: space-between
}

.morsis-quit-ref-btn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .5rem
}

.morsis-quit-ref-btn button {
    font-size: 13px
}

.morsis-quit-ref-btnDIv {
    gap: 5px;
    margin: 0 1rem
}

.morsis-quit-btn {
    background-color: #bdd7ee;
    border: 1.5px solid #868080;
    color: #000;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    padding: .1rem 1.5rem;
    position: relative;
    text-align: center
}

.morsis-quit-btn:disabled {
    background-color: #efefef;
    border: 1px solid #3d3d3d;
    color: #000;
    cursor: not-allowed;
    opacity: .6
}

.morsis-refresh-btn {
    background-color: #bdd7ee;
    border: 1.5px solid #868080;
    color: #000;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    padding: .1rem 1.2rem;
    position: relative;
    text-align: center
}

.morsis-Statistics-ref-btnDIv {
    gap: 5px;
    margin: .5rem 1rem
}

.morsis-console-textarea {
    border: 1px solid #ccc;
    width: 100%
}

.morsis-Statistics-btn {
    background-color: #bdd7ee;
    border: 1.5px solid #868080;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    margin-left: 9px;
    margin-top: 3px;
    padding: .1rem 2rem;
    position: relative;
    text-align: center
}

.morsis-Console-box {
    height: 35.3vh
}

.morsis-console-fieldset {
    height: 100%;
    margin-bottom: 2px
}

.uploader-container {
    background: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%
}

.file-box-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    margin-bottom: -4px;
    margin-top: -4px;
    width: 100%
}

.upload-box {
    border: 1px solid #000;
    border-radius: 2px;
    height: 25px;
    padding: 3px;
    position: relative;
    transition: background .3s ease-in-out;
    width: 100%
}

.upload-box:hover {
    background: #f4f4f4
}

.upload-icon {
    color: #000;
    font-size: 12px
}

.upload-text {
    color: #666;
    font-size: 12px
}

.file-name {
    color: gray;
    font-size: 12px;
    font-style: italic;
    padding-left: 3px
}

.hidden-input {
    display: none
}

.reset-btn:hover {
    background: #bd2130
}

.reset-icon {
    font-size: 14px
}

.process-btn:hover {
    background: #556
}

.download-btn {
    background: #17769b;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    padding: 5px 20px;
    transition: background .3s ease-in-out
}

.download-btn:hover {
    background: #218838
}

.message-text {
    color: #333;
    font-size: 14px;
    margin-top: 10px
}

.heading_geomoris {
    font-size: 20px
}

.polygon-no-edges {
    shape-rendering: crispEdges
}

.leaflet-tile-container img {
    border: none !important;
    image-rendering: crisp-edges;
    outline: none !important
}

.leaflet-tile {
    image-rendering: pixelated !important;
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.watershed .watershed-draw-btn {
    align-items: center;
    background-color: #bdd7ee;
    color: #000;
    text-align: center !important
}

.watershed .reset-btn,
.watershed .watershed-draw-btn {
    border: 1.5px solid #868080;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    height: 25px;
    padding: .1rem 1.5rem;
    position: relative
}

.watershed .reset-btn {
    background: #dc3545;
    color: #fff;
    text-align: center;
    transition: background .3s ease-in-out
}

.leaflet-tile {
    border: none !important
}

.morsis-contents .watershed-btnDIv {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: flex-start;
    padding: 2px
}

.pdf_downlod_text {
    color: #5dff88 !important
}

.container_agri {
    background-color: #fff;
    border-radius: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    height: auto;
    margin: 0 auto;
    max-width: 500px;
    padding: 20px;
    width: 90%
}

.NDVIborder {
    background-color: #f8f9fa;
    border: 1px solid gray
}

.Headerbox {
    height: 100%;
    padding-left: 10px;
    width: 50%
}

.h3_heading {
    color: green;
    font-size: 18px;
    font-weight: 600
}

input[type=radio] {
    line-height: normal;
    margin: 0 4px;
    margin-top: 1px\9
}

.mainborder {
    background-color: #f8f9fa;
    border: 1px solid gray;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
}

.NDVIcontent {
    align-items: center;
    background-color: #a0f095;
    border-radius: 0;
    display: flex;
    justify-content: flex-start;
    margin: 0;
    width: 100%
}

.NDVIcontent p {
    color: #000;
    font-size: 9px;
    margin: 0 10px;
    text-align: justify;
    width: 100%
}

.Inputfile-frame {
    background-color: #f8f9fa;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    margin: 20px auto;
    max-width: 500px;
    padding: 10px;
    width: 95%
}

.inputheader-frame {
    border-radius: 5px;
    position: relative;
    width: 100%
}

.Inputheading-frame {
    align-items: center;
    background-color: #e2e2e2;
    border: 1px solid gray;
    display: flex;
    gap: 10px;
    padding: 0 10px;
    position: absolute;
    top: -20px
}

.radioButton {
    height: 13px;
    margin: 0;
    width: 13px
}

.headingLabel {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    margin: 0
}

.inputRaster {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 0
}

.inputRasterLabel {
    color: #000;
    font-size: 12px;
    font-weight: 0;
    margin-top: 10px
}

.bandselection {
    align-items: center;
    display: flex;
    gap: 5px;
    justify-content: space-between;
    margin: -10px 0 0;
    padding: 0
}

.bandSelectionLabel {
    margin-top: 10px
}

.leabelname {
    flex-shrink: 0;
    font-size: 12px;
    margin-right: 10px
}

.NIRbox,
.REDbox {
    align-items: center;
    display: flex;
    gap: 10px
}

.bandName {
    font-size: 10px;
    min-width: 40px
}

.bandDropdown {
    border: 1px solid #ccc;
    color: gray;
    cursor: pointer;
    font-size: 9px;
    padding: 2px 5px
}

@media (max-width:768px) {
    .bandselection {
        flex-direction: column;
        gap: 15px
    }
}

.textAreaFrame {
    background-color: #fff;
    height: 100px
}

.emptyRow {
    height: 20px
}

.outputpath {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 0
}

.outputpathLabel {
    color: #000;
    font-size: 12px;
    font-weight: 0;
    margin-top: 10px
}

.Inputindividualband-frame {
    background-color: #f8f9fa;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    margin: 20px auto;
    max-width: 500px;
    padding: 10px;
    width: 95%
}

.inputbandheader-frame {
    border-radius: 5px;
    position: relative;
    width: 100%
}

.Inputbandheading-frame {
    align-items: center;
    background-color: #e2e2e2;
    border: 1px solid gray;
    display: flex;
    gap: 10px;
    padding: 0 10px;
    position: absolute;
    top: -20px
}

.radioButton-band {
    height: 13px;
    margin: 0;
    width: 13px
}

.bandheadingLabel {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    margin: 0
}

.inputNIR {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 10px
}

.inputNIRLabel {
    color: #000;
    font-size: 12px;
    font-weight: 0;
    margin-top: 10px
}

.inputRED {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between
}

.inputREDLabel {
    color: #000;
    font-size: 12px;
    font-weight: 0;
    margin-top: 10px
}

.combobox {
    color: gray;
    font-size: 10px
}

.browseButton {
    background-color: #202020
}

.browseButton:hover {
    background-color: #b9a9c0
}

.band-frameContainer {
    background-color: #fff;
    border: 1px solid #ccc;
    max-width: 500px;
    width: 100%
}

.band-headerContainer {
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between
}

.band-header {
    color: #000;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    width: 50%
}

.band-areaButtonContainer {
    display: flex;
    flex-direction: row
}

.band-textAreaFrame {
    background-color: #fff;
    border-right: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    height: 100px;
    overflow-y: auto;
    width: 50%
}

.band-emptyRow {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    height: 20px
}

.band-verticalButtonContainer {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px
}

.band-iconButton {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 12px;
    height: 22px;
    text-align: center;
    width: 22px
}

.band-iconButton:hover {
    background-color: #e0e0e0
}

@media (max-width:768px) {
    .band-frameContainer {
        max-width: 100%
    }
}

.band-outputpath {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 0
}

.band-outputpathLabel {
    color: #000;
    font-size: 12px;
    font-weight: 0;
    margin-top: 10px
}

.band-combobox {
    border: 1px solid gray;
    border-radius: 0;
    flex-grow: 1;
    font-size: 10px;
    padding: 2px
}

.band-browseButton {
    background-color: #202020;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 5px
}

.band-browseButton:hover {
    background-color: #b9a9c0
}

.VI-frame-container {
    background-color: #f8f9fa;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    margin: 20px auto;
    max-width: 500px;
    padding: 10px;
    position: relative;
    width: 95%
}

.VI-frame-heading {
    background-color: #fff;
    background-color: #e2e2e2;
    border: 1px solid gray;
    font-size: 12px;
    font-weight: 600;
    left: 10px;
    padding: 0 10px;
    position: absolute;
    top: -10px
}

.indextype {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 0
}

.indextypeLabel {
    color: #000;
    font-size: 12px;
    font-weight: 0;
    margin-top: 10px
}

.combobox {
    border: 1px solid gray;
    border-radius: 0;
    flex-grow: 1;
    font-size: 11px;
    padding: 2px
}

.indexformula {
    color: #000;
    font-size: 12px;
    font-weight: 100px
}

.indexformulaLabel {
    font-weight: 700
}

.calculate-button-container {
    margin-top: 20px;
    text-align: center
}

.calculate-button {
    border: none;
    border-radius: 5px;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    padding: 5px 10px;
    transition: background-color .3s
}

.calculate-button:hover {
    background-color: #b9a9c0
}

.container_SENTINEL {
    background-color: #fff;
    border-radius: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    height: auto;
    margin: 0 auto;
    max-width: 500px;
    padding: 20px;
    width: 90%
}

.Sentinel-border {
    background-color: #f8f9fa;
    border: 1px solid gray
}

.Sentinel-Headerbox {
    height: 100%;
    padding-left: 10px;
    width: 100%
}

.Sentinel_h3_heading {
    color: green;
    font-size: 18px;
    font-weight: 600
}

.Sentinel-mainborder {
    background-color: #f8f9fa;
    border: 1px solid gray;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
}

.Sentinel-content {
    align-items: center;
    background-color: #a0f095;
    border-radius: 0;
    display: flex;
    justify-content: flex-start;
    margin: 0;
    width: 100%
}

.Sentinel-content p {
    color: #000;
    font-size: 9px;
    margin: 0 10px;
    text-align: justify;
    width: 100%
}

.Sentinel-Inputfile-frame {
    background-color: #f8f9fa;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    margin: 20px auto;
    max-width: 500px;
    padding: 10px;
    width: 95%
}

.Sentinel-inputheader-frame {
    border-radius: 5px;
    position: relative;
    width: 100%
}

.inputRasterLabel,
.label {
    color: #333;
    font-size: 12px;
    font-weight: 700
}

.Sentinel-Inputheading-frame {
    align-items: center;
    background-color: #e2e2e2;
    border: 1px solid gray;
    display: flex;
    gap: 10px;
    padding: 0 10px;
    position: absolute;
    top: -25px
}

.SentinelheadingLabel {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    margin: 0
}

.Sentinel-Login-form {
    margin: 10 auto;
    max-width: 415px
}

.Sentinel-Login-form .Sentinel-Form-group {
    margin-bottom: .1rem
}

.Sentinel-Login-form .Sentinel-Form-group label {
    color: #000;
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 2px
}

.small-input {
    font-size: 10px;
    height: 10px;
    padding: 5px
}

.Sentinel-Login-form .Sentinel-Form-control {
    background-clip: padding-box;
    background-color: #fff;
    border-radius: -.75rem;
    color: #495057;
    display: block;
    font-size: 11px;
    font-weight: 400;
    height: calc(1.7em + .75rem - 10px);
    line-height: 7.5;
    padding: 9px 5px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%
}

.Sentinel-Login-form .Sentinel-Form-control:focus {
    background-color: #fff;
    border-color: gray;
    box-shadow: 0 0 0 .1rem rgba(23, 23, 24, .25);
    color: #495057;
    outline: 0
}

.Show-password {
    align-items: center;
    display: flex;
    font-size: 12px;
    gap: 2px
}

.Show-password label {
    font-size: 10px !important;
    /* !important se ensure ki sirf is label pe effect ho */
    font-size: 8px
}

.Show-password input {
    cursor: pointer
}

.show-password input[type=checkbox] {
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.login-form .form-group label {
    color: #000;
    font-size: 12px;
    font-weight: 700;
    margin-top: 5px
}

.login-form .form-control {
    border: 1px solid #ccc;
    font-size: 12px;
    padding: 12px 0;
    width: 100%
}

.login-form .button-container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    width: 412px
}

.small-btn {
    border: none;
    border-radius: 3px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 5px;
    transition: all .3s ease-in-out
}

.login-btn {
    background-color: #007bff
}

.login-btn:hover {
    background-color: #0056b3
}

.logout-btn {
    background-color: #dc3545
}

.logout-btn:disabled {
    background-color: #eec4c4;
    cursor: not-allowed
}

.logout-btn:hover:not(:disabled) {
    background-color: #a71d2a
}

.AOIfile-frame {
    background-color: #f8f9fa;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    margin: 20px auto;
    max-width: 500px;
    padding: 10px;
    width: 95%
}

.AOIheader-frame {
    border-radius: 5px;
    position: relative;
    width: 100%
}

.AOIRasterLabel,
.label {
    color: #333;
    font-size: 12px;
    font-weight: 700
}

.AOIheading-frame {
    align-items: center;
    background-color: #e2e2e2;
    border: 1px solid gray;
    display: flex;
    gap: 10px;
    padding: 0 10px;
    position: absolute;
    top: -20px
}

.AOIheadingLabel {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    margin: 0
}

.AOIinputVector {
    align-items: center;
    display: flex;
    gap: 6px
}

.AOIinputVectorLabel {
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin-top: 10px
}

.AOIcombobox {
    color: gray;
    font-size: 11px;
    height: 20px;
    width: 73%
}

.browseButton {
    padding: 2px 5px
}

.browseButton:hover {
    background-color: #a0f095
}

.datasourcesLabel {
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin-top: 5px
}

.two-column-container {
    display: flex;
    font-family: Arial, sans-serif;
    gap: 8px;
    margin-top: -8px;
    max-width: 600px
}

.column {
    border: 1px solid #ccc;
    flex: 1 1;
    margin-bottom: 0;
    padding: 3px 0 10px 5px
}

.sentinel-section {
    display: none;
    margin-top: 3px
}

.sentinel-section label {
    align-items: center;
    display: flex;
    margin: -12px 18px;
    padding: 2px 0
}

.column label {
    font-size: 11px
}

.column b {
    font-size: 12px
}

.date-rangeLabel {
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin-top: 10px
}

.date-range-content {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    margin-top: -12px
}

.date-range-content label {
    color: #000;
    font-size: 11px;
    font-weight: 400
}

.date-range-content .form-group {
    width: 48%
}

.date-range-content input[type=date] {
    border: 1px solid #ccc;
    font-size: 11px;
    margin: -6px 0 0;
    padding: 8px;
    width: 100%
}

.outputPathContainer {
    align-items: center;
    display: flex;
    gap: 6px;
    margin-top: 5px
}

.outputPathLabel {
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin-top: 10px
}

.outputCombobox {
    color: gray;
    font-size: 11px;
    height: 20px;
    width: 70%
}

.browseButton {
    background-color: #000;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 4px
}

.browseButton:hover {
    background-color: green
}

.buttonContainer {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-top: 10px
}

.refreshButton,
.searchButton {
    background-color: gray;
    border: none;
    border-radius: 3px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    height: 20px;
    padding: 1px 4px;
    width: 50px
}

.refreshButton {
    background-color: gray
}

.searchButton:hover {
    background-color: #0056b3
}

.refreshButton:hover {
    background-color: #218838
}

.console-frame {
    background-color: #f8f9fa;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    margin: 20px auto;
    max-width: 500px;
    padding: 10px;
    width: 95%
}

.consoleheader-frame {
    border-radius: 5px;
    padding-top: 5px;
    position: relative;
    width: 100%
}

.consoleheading-frame {
    align-items: center;
    background-color: #e2e2e2;
    border: 1px solid gray;
    display: flex;
    gap: 10px;
    padding: 0 10px;
    position: absolute;
    top: -20px
}

.consoleheadingLabel {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    margin: 0
}

.frameContainer {
    background-color: #fff;
    border: 1px solid #ccc;
    max-width: 500px;
    width: 100%
}

.textareaButtonContainer {
    display: flex;
    flex-direction: row;
    gap: 5px
}

.textAreaFrame {
    background-color: #80808026;
    border-right: 1px solid #ccc;
    display: block;
    height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%
}

.dataRow {
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    display: flex;
    height: 15px;
    padding-left: 10px
}

.dataRow.selected {
    background-color: #91f3c5
}

.emptyRow {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    height: 15px
}

.textAreaFrame::-webkit-scrollbar {
    width: 10px
}

.textAreaFrame::-webkit-scrollbar-thumb {
    background: #888
}

.textAreaFrame::-webkit-scrollbar-thumb:hover {
    background: #555
}

.verticalButtonContainer {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px
}

.iconButton {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 12px;
    height: 22px;
    text-align: center;
    width: 22px
}

.addButton {
    font-size: 30px;
    font-weight: 700
}

.container_SENTINEL .btn-primary {
    background-color: #000;
    color: #fff;
    font-size: 12px;
    margin-top: -15px;
    padding: 0 10px
}

.process-section {
    flex-direction: column;
    text-align: center
}

.process-section,
.progress-container {
    align-items: center;
    display: flex;
    justify-content: center
}

.progress-container {
    background-color: #495057;
    margin-top: 15px
}

.process-section .progress {
    border-radius: 5px;
    height: 15px;
    max-width: 500px;
    width: 95%
}

.mt-3,
.my-3 {
    margin-top: .5rem !important
}

.process-section .progress-bar {
    background-color: green;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    transition: width .6s ease;
    white-space: nowrap
}

.download-msg {
    color: green;
    font-size: 11px;
    font-weight: 700;
    margin-top: 5px
}

.progress {
    background-color: #e9ecef;
    border-radius: 4px;
    height: 20px;
    position: relative
}

.progress-bar {
    background-color: #28a745;
    transition: width .3s ease
}

.cancel-button,
.progress-bar {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 12px;
    justify-content: center
}

.cancel-button {
    background-color: #dc3545;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    padding: 0;
    position: absolute;
    right: 5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 20px
}

.cancel-button:hover {
    background-color: #c82333
}

.file-name {
    word-wrap: break-word;
    color: #000;
    font-size: 10px;
    overflow: hidden;
    padding-left: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.container_STACKING {
    background-color: #fff;
    border-radius: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    height: auto;
    margin: 0 auto;
    max-width: 500px;
    padding: 20px
}

.Stacking-border {
    background-color: #f8f9fa;
    border: 1px solid gray
}

.StackingHeaderbox {
    height: 100%;
    padding-left: 10px;
    width: 50%
}

.StackingMainborder {
    background-color: #f8f9fa;
    border: 1px solid gray;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
}

.Stacking-content {
    align-items: center;
    background-color: #a0f095;
    border-radius: 0;
    display: flex;
    justify-content: flex-start;
    margin: 0;
    width: 100%
}

.Stacking-content p {
    color: #000;
    font-size: 9px;
    margin: 0 10px;
    text-align: justify;
    width: 100%
}

.StackingInputfile-frame {
    background-color: #f8f9fa;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    margin: 20px auto;
    max-width: 500px;
    padding: 10px;
    width: 95%
}

.StackingInputheader-frame {
    border-radius: 5px;
    position: relative;
    width: 100%
}

.StackingInputheading-frame {
    align-items: center;
    background-color: #e2e2e2;
    border: 1px solid gray;
    display: flex;
    gap: 10px;
    padding: 0 10px;
    position: absolute;
    top: -20px
}

.StackingHeadingLabel {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 0;
    max-width: 100%
}

.StackingInputRasterLabel,
.label {
    color: #333;
    font-size: 12px;
    font-weight: 700
}

.StackingInputRaster {
    align-items: center;
    display: flex;
    gap: 14px
}

.StackingInputRasterLabel {
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin-top: 10px
}

.StackingInputCombobox {
    font-size: 12px;
    width: 69%
}

.StackingBrowseButton {
    background-color: #000;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 5px
}

.StackingBrowseButton:hover {
    background-color: #a0f095
}

.StackingLayer-frame {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    font-family: Arial, sans-serif;
    padding: 5px;
    width: 410px
}

.label {
    color: #333;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 5px
}

.layer-display {
    margin-bottom: 15px
}

.StackingFrameContainer {
    background-color: #fff;
    border: 1px solid #ccc;
    max-width: 500px;
    width: 100%
}

.StackingTextareaButtonContainer {
    display: flex;
    flex-direction: row;
    gap: 0
}

.StackingTextAreaFrame {
    background-color: #80808026;
    border-right: 1px solid #ccc;
    display: block;
    height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%
}

.StackingLayer-list {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    font-size: 14px;
    height: 100px;
    overflow-y: scroll;
    padding: 2px;
    resize: none;
    width: 100%
}

.StackingEmptyRow {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    font-size: 10px;
    height: 20px;
    padding: 3px
}

.StackingEmptyRow.selected {
    background-color: #e0f0ff;
    border: 1px solid #007bff
}

.StackingTextAreaFrame::-webkit-scrollbar {
    width: 10px
}

.StackingTextAreaFrame::-webkit-scrollbar-thumb {
    background: #888
}

.StackingTextAreaFrame::-webkit-scrollbar-thumb:hover {
    background: #555
}

.StackingVerticalButtonContainer {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px
}

.StackingIconButton {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 12px;
    height: 22px;
    text-align: center;
    width: 22px
}

.iconButton:hover {
    background-color: #e0e0e0
}

@media (max-width:768px) {
    .frameContainer {
        max-width: 100%
    }
}

.StackingAction-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 5px
}

.AddButton,
.ClearButton {
    background-color: #007bff;
    border: none;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 15px;
    transition: background-color .3s ease
}

.button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    margin: 10px 0 50px
}

.button:hover:not(:disabled) {
    background-color: #0056b3
}

.StackingOutput-selection {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-top: 5px
}

.StackingOutput-selectionLabel {
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin-top: 10px
}

.StackingOutputCombobox {
    font-size: 11px;
    height: 21px;
    width: 82%
}

.StackingOutputCombobox::-webkit-input-placeholder {
    color: gray;
    font-size: 11px
}

.StackingOutputCombobox::placeholder {
    color: gray;
    font-size: 11px
}

.StackingButton-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 10px 0
}

.StackingCancel-button,
.StackingOk-button {
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    height: 30px;
    width: 100px
}

.StackingOk-button {
    background-color: green;
    color: #fff
}

.StackingOk-button:hover {
    background-color: #006400
}

.StackingCancel-button {
    background-color: red;
    color: #fff
}

.StackingCancel-button:hover {
    background-color: darkred
}

.loader-container {
    display: inline-block;
    position: relative
}

.loader {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    border: 2px solid #f3f3f3;
    border-radius: 100%;
    border-top-color: #000;
    display: none;
    height: 10px;
    width: 10px
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.agriculture-layout {
    display: flex;
    height: 100vh
}

.sidebar_agriculture {
    background-color: #f3f4f6;
    padding: 16px;
    width: 250px
}

.sidebar_agriculture_title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem
}

.sidebar_agriculture_links {
    list-style: none;
    margin: 0;
    padding: 0
}

.sidebar_agriculture_link {
    color: #3b82f6;
    display: block;
    margin-bottom: 8px;
    text-decoration: none
}

.sidebar_agriculture_link:hover {
    text-decoration: underline
}

.main-content {
    flex-grow: 1;
    padding: 16px
}

.container_Unsupervised {
    font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
    margin: 2rem auto;
    max-width: 800px
}

.headersection {
    background-color: #2c3e50;
    border-radius: 5px 5px 0 0;
    color: #fff;
    padding: 1rem;
    text-align: center
}

.main-content_Unsupervised {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0 0 5px 5px;
    padding: 1.5rem
}

.description-section {
    background-color: #e9ecef;
    border-radius: 5px;
    font-size: .9rem;
    margin-bottom: 1.5rem;
    padding: 1rem
}

.section-card {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    margin-bottom: 1.5rem;
    padding: 1.25rem
}

.section-header {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1rem;
    padding-bottom: .75rem
}

.section-header h5 {
    color: #2c3e50;
    font-weight: 600;
    margin: 0
}

.input-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem
}

.input-row label {
    font-weight: 500;
    margin-right: 1rem;
    width: 200px
}

.input-group {
    display: flex;
    flex: 1 1
}

.file-input,
.number-input {
    border: 1px solid #ced4da;
    border-radius: 4px;
    flex: 1 1;
    font-size: 1rem;
    padding: .5rem .75rem
}

.browse-btn,
.cancel-btn,
.ok-btn {
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    margin-left: .5rem;
    padding: .5rem 1rem;
    transition: all .2s
}

.browse-btn {
    background-color: #6c757d;
    color: #fff
}

.browse-btn:hover {
    background-color: #5a6268
}

.ok-btn {
    background-color: #28a745;
    color: #fff
}

.ok-btn:hover:not(:disabled) {
    background-color: #218838
}

.cancel-btn {
    background-color: #dc3545;
    color: #fff
}

.cancel-btn:hover:not(:disabled) {
    background-color: #c82333
}

.cancel-btn:disabled,
.ok-btn:disabled {
    cursor: not-allowed;
    opacity: .65
}

.button-section {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    margin-top: 1rem
}

.response-message {
    border-radius: 4px;
    font-weight: 500;
    margin-top: 1.5rem;
    padding: 1rem
}

.response-message.success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724
}

.response-message.error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24
}

@media (max-width:768px) {
    .container_Unsupervised {
        padding: 0 1rem
    }

    .input-row {
        align-items: flex-start;
        flex-direction: column
    }

    .input-row label {
        margin-bottom: .5rem;
        width: 100%
    }

    .input-group {
        width: 100%
    }

    .button-section {
        flex-direction: column
    }

    .cancel-btn,
    .ok-btn {
        margin: .25rem 0;
        width: 100%
    }
}

.Subset_container {
    background-color: #fff;
    border-radius: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    height: auto;
    margin: 0 auto;
    max-width: 500px;
    padding: 20px;
    width: 90%
}

.Subsetborder {
    background-color: #f8f9fa;
    border: 1px solid gray
}

.SubsetHeaderbox {
    height: 100%;
    padding-left: 10px;
    width: 50%
}

.Subset_h3_heading {
    color: green;
    font-size: 18px;
    font-weight: 600
}

.Subset_mainborder {
    background-color: #f8f9fa;
    border: 1px solid gray;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
}

.Subset_content {
    align-items: center;
    background-color: #a0f095;
    border-radius: 0;
    display: flex;
    justify-content: flex-start;
    margin: 0;
    width: 100%
}

.Subset_content p {
    color: #000;
    font-size: 9px;
    margin: 0 10px;
    text-align: justify;
    width: 100%
}

.SubsetInputfile-frame {
    background-color: #f8f9fa;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    margin: 20px auto;
    max-width: 500px;
    padding: 10px;
    width: 95%
}

.SubsetInputheader-frame {
    border-radius: 5px;
    position: relative;
    width: 100%
}

.SubsetInputheading-frame {
    align-items: center;
    background-color: #e2e2e2;
    border: 1px solid gray;
    display: flex;
    gap: 10px;
    padding: 0 10px;
    position: absolute;
    top: -20px
}

.SubsetHeadingLabel {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    margin: 0
}

.SubsetInputRaster {
    align-items: center;
    display: flex;
    gap: 5px
}

.SubsetInputRasterLabel {
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin-top: 10px
}

.SubsetCombobox {
    font-size: 12px;
    width: 69%
}

.SubsetInputBrowseButton {
    background-color: #000;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 5px
}

.SubsetBrowseButton:hover {
    background-color: #a0f095
}

.SubsetInputAOI {
    align-items: center;
    display: flex;
    gap: 12px
}

.SubsetInputAOILabel {
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin-top: 10px
}

.SubsetAOICombobox {
    font-size: 12px;
    width: 69%
}

.SubsetAOIBrowseButton {
    background-color: #000;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 5px
}

.SubsetAOIBrowseButton:hover {
    background-color: #a0f095
}

.SubsetOutputfile-frame {
    background-color: #f8f9fa;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    margin: 20px auto;
    max-width: 500px;
    padding: 10px;
    width: 95%
}

.SubsetOutputheader-frame {
    border-radius: 5px;
    position: relative;
    width: 100%
}

.SubsetOutputheading-frame {
    align-items: center;
    background-color: #e2e2e2;
    border: 1px solid gray;
    display: flex;
    gap: 10px;
    padding: 0 10px;
    position: absolute;
    top: -20px
}

.SubsetOutputHeadingLabel {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    margin: 0
}

.SubsetOutputRaster {
    align-items: center;
    display: flex;
    gap: 9px
}

.SubsetOutputRasterLabel {
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin-top: 10px
}

.SubsetOutputCombobox {
    font-size: 12px;
    width: 69%
}

.SubsetOutputBrowseButton {
    background-color: #000;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 5px
}

.SubsetOutputBrowseButton:hover {
    background-color: #a0f095
}

.Button-row {
    display: flex;
    gap: 10px;
    margin-left: 15px;
    margin-top: 20px;
    padding-bottom: 10px
}

.OK-button {
    border: none;
    color: #3f3e3e;
    cursor: pointer;
    font-size: 14px;
    padding: 0 25px;
    transition: background-color .3s
}

.OK-button:hover {
    background-color: #b9a9c0
}

.Cancel-button {
    border: none;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    padding: 0 25px;
    transition: background-color .3s
}

.Cancel-button:hover {
    background-color: #b9a9c0
}

.Reproject_container {
    background-color: #fff;
    border-radius: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    height: auto;
    margin: 0 auto;
    max-width: 500px;
    padding: 20px;
    width: 90%
}

.ReprojectBorder {
    background-color: #f8f9fa;
    border: 1px solid gray
}

.ReprojectHeaderbox {
    height: 100%;
    padding-left: 10px;
    width: 50%
}

.Reproject_h3_heading {
    color: green;
    font-size: 18px;
    font-weight: 600
}

.Reproject_mainborder {
    background-color: #f8f9fa;
    border: 1px solid gray;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
}

.Reproject_content {
    align-items: center;
    background-color: #a0f095;
    border-radius: 0;
    display: flex;
    justify-content: flex-start;
    margin: 0;
    width: 100%
}

.Reproject_content p {
    color: #000;
    font-size: 9px;
    margin: 0 10px;
    text-align: justify;
    width: 100%
}

.ReprojectInputfile-frame {
    background-color: #f8f9fa;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    margin: 20px auto;
    max-width: 500px;
    padding: 10px;
    width: 95%
}

.ReprojectInputheader-frame {
    border-radius: 5px;
    position: relative;
    width: 100%
}

.ReprojectInputheading-frame {
    align-items: center;
    background-color: #e2e2e2;
    border: 1px solid gray;
    display: flex;
    gap: 10px;
    padding: 0 10px;
    position: absolute;
    top: -20px
}

.ReprojectHeadingLabel {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    margin: 0
}

.ReprojectInputRaster {
    align-items: center;
    display: flex;
    gap: 14px
}

.ReprojectInputRasterLabel {
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin-top: 10px
}

.ReprojectCombobox {
    font-size: 12px;
    width: 69%
}

.ReprojectInputBrowseButton {
    background-color: #000;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 5px
}

.ReprojectBrowseButton:hover {
    background-color: #a0f095
}

.OutputProjection-frame {
    background-color: #f8f9fa;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    margin: 20px auto;
    max-width: 500px;
    padding: 10px;
    width: 95%
}

.OutputProjectionHeader-frame {
    border-radius: 5px;
    position: relative;
    width: 100%
}

.OutputProjectionHeading-frame {
    align-items: center;
    background-color: #e2e2e2;
    border: 1px solid gray;
    display: flex;
    gap: 10px;
    padding: 0 10px;
    position: absolute;
    top: -20px
}

.OutputProjectionLabel {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    margin: 0
}

.CategoriesInput {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-top: 5px
}

.CategoriesInputLabel {
    color: #000;
    font-size: 12px;
    margin-right: 5px
}

.CategoriesCombobox {
    flex: 1 1;
    font-size: 12px;
    padding: 0
}

.CategoriesInputButton {
    align-items: center;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    height: 28px;
    justify-content: center;
    padding: 2px
}

.globe-icon {
    height: 20px;
    object-fit: contain;
    width: 20px
}

.UnitsAndIgnoreRow {
    justify-content: space-between;
    margin: -5px 15px 5px 21px
}

.UnitsAndIgnoreRow,
.UnitsInput {
    align-items: center;
    display: flex
}

.UnitsInput {
    gap: 10px
}

.UnitsInputLabel {
    color: #000;
    font-size: 12px
}

.UnitsCombobox {
    font-size: 12px;
    width: 200px
}

.IgnoreZeroCheckbox label {
    align-items: center;
    color: #000;
    display: flex;
    font-size: 12px;
    gap: 5px
}

.ProjectionInput {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-top: 5px
}

.ProjectionInputLabel {
    color: #000;
    font-size: 12px;
    margin-right: 5px
}

.ProjectionCombobox {
    font-size: 12px;
    padding: 0
}

.ReprojectOutputfile-frame {
    background-color: #f8f9fa;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    margin: 20px auto;
    max-width: 500px;
    padding: 10px;
    width: 95%
}

.ReprojectOutputheader-frame {
    border-radius: 5px;
    position: relative;
    width: 100%
}

.ReprojectOutputheading-frame {
    align-items: center;
    background-color: #e2e2e2;
    border: 1px solid gray;
    display: flex;
    gap: 10px;
    padding: 0 10px;
    position: absolute;
    top: -20px
}

.ReprojectOutputHeadingLabel {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    margin: 0
}

.ReprojectOutputRaster {
    align-items: center;
    display: flex;
    gap: 5px
}

.ReprojectOutputRasterLabel {
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin-top: 10px
}

.ReprojectOutputCombobox {
    font-size: 12px;
    width: 69%
}

.ReprojectOutputBrowseButton {
    background-color: #000;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 5px
}

.ReprojectOutputBrowseButton:hover {
    background-color: #a0f095
}

.ReprojectButton-row {
    display: flex;
    gap: 10px;
    margin-left: 15px;
    margin-top: 20px;
    padding-bottom: 10px
}

.ReprojectOK-button {
    border: none;
    color: #3f3e3e;
    cursor: pointer;
    font-size: 14px;
    padding: 0 25px;
    transition: background-color .3s
}

.ReprojectOK-button:hover {
    background-color: #b9a9c0
}

.ReprojectCancel-button {
    border: none;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    padding: 0 25px;
    transition: background-color .3s
}

.ReprojectCancel-button:hover {
    background-color: #b9a9c0
}

.spatial-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .15);
    font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
    margin: 2rem auto;
    max-width: 900px;
    overflow: hidden
}

.spatial-header {
    align-items: center;
    background: linear-gradient(90deg, #2c3e50, #4a6491);
    color: #fff;
    display: flex;
    gap: 16px;
    padding: 24px 32px
}

.spatial-header h1 {
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: .5px
}

.header-icon {
    color: #64b5f6;
    font-size: 1.8rem
}

.spatial-content {
    padding: 32px
}

.section-title {
    align-items: center;
    color: #2c3e50;
    display: flex;
    font-size: 1.4rem;
    gap: 10px;
    margin-bottom: 20px
}

.section-title i {
    color: #4a6491
}

.selection-cards {
    grid-gap: 20px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom: 20px
}

.mode-card {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    cursor: pointer;
    padding: 20px;
    position: relative;
    transition: all .3s ease
}

.mode-card:hover {
    border-color: #64b5f6;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px)
}

.mode-card.active-mode {
    background: #e3f2fd;
    border-color: #2196f3
}

.card-icon {
    color: #90a4ae;
    font-size: 1.2rem;
    position: absolute;
    right: 20px;
    top: 20px
}

.active-mode .card-icon {
    color: #2196f3
}

.card-title {
    color: #2c3e50;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 8px
}

.card-desc {
    color: #6c757d;
    font-size: .95rem;
    font-size: 1.2rem;
    line-height: 1.5
}

.crs-section {
    margin: 32px 0
}

.crs-selector {
    background: #f8f9fa;
    border-radius: 12px;
    margin-top: 10px;
    padding: 20px
}

.selector-label {
    color: #2c3e50;
    display: block;
    font-weight: 500;
    margin-bottom: 12px
}

.custom-dropdown,
.custom-input {
    background: #fff;
    border: 2px solid #dee2e6;
    border-radius: 10px;
    color: #495057;
    font-size: 1rem;
    padding: 14px 20px;
    transition: all .3s ease;
    width: 100%
}

.custom-dropdown:focus,
.custom-input:focus {
    border-color: #64b5f6;
    box-shadow: 0 0 0 4px rgba(100, 181, 246, .2);
    outline: none
}

.helper-text {
    color: #6c757d;
    display: block;
    font-size: 1rem;
    margin-top: 8px
}

.file-import {
    margin-top: 10px
}

.file-input-label {
    align-items: center;
    background: #fff;
    border: 2px dashed #dee2e6;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 150px;
    padding: 30px;
    text-align: center;
    transition: all .3s ease
}

.file-input-label:hover {
    background: #f1f8ff;
    border-color: #64b5f6
}

.file-input-label i {
    color: #90a4ae;
    font-size: 2rem;
    margin-bottom: 12px
}

.file-input-label p {
    color: #6c757d;
    font-weight: 500
}

.file-input {
    display: none
}

.file-imported {
    align-items: center;
    background: #e8f5e9;
    border-radius: 6px;
    color: #2e7d32;
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 10px
}

.details-section {
    margin: 32px 0
}

.detail-grid {
    grid-gap: 15px;
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-top: 15px
}

.detail-item {
    background: #fff;
    border-left: 4px solid #2196f3;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    padding: 15px
}

.detail-label {
    align-items: center;
    color: #2c3e50;
    display: flex;
    font-weight: 600;
    gap: 8px;
    margin-bottom: 8px
}

.detail-value {
    color: #495057;
    font-size: 1.05rem
}

.error-section {
    background: #ffebee;
    border-left: 4px solid #e53935;
    border-radius: 12px;
    margin-top: 20px;
    padding: 20px
}

.error-title {
    align-items: center;
    color: #e53935;
    display: flex;
    font-weight: 600;
    gap: 8px;
    margin-bottom: 10px
}

.action-buttons {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 20px
}

.spatial-button {
    align-items: center;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    gap: 8px;
    padding: 8px 32px;
    transition: all .3s ease
}

.spatial-button.primary {
    background: linear-gradient(90deg, #2196f3, #1976d2);
    box-shadow: 0 4px 12px rgba(33, 150, 243, .3);
    color: #fff;
    font-size: 1.5rem
}

.spatial-button.primary:hover {
    background: linear-gradient(90deg, #1976d2, #0d47a1);
    box-shadow: 0 6px 16px rgba(33, 150, 243, .4);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px)
}

.spatial-button.secondary {
    background: #f5f5f5;
    border: 1px solid #dee2e6;
    color: #495057;
    font-size: 1.5rem
}

.spatial-button.secondary:hover {
    background: #e9ecef;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px)
}

@media (max-width:768px) {
    .spatial-content {
        padding: 24px
    }

    .spatial-header {
        padding: 20px
    }

    .spatial-header h1 {
        font-size: 1.5rem
    }

    .section-title {
        font-size: 1.2rem
    }

    .selection-cards {
        grid-template-columns: 1fr
    }

    .action-buttons {
        flex-direction: column
    }

    .spatial-button {
        justify-content: center;
        width: 100%
    }
}

/*# sourceMappingURL=main.244865e8.css.map*/