/***********************
        GLOBAL
***********************/
html {
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: Reddit Sans;
    font-weight: 400;
    color: #212529;
    font-style: normal;
    font-size: 18px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: #212529;
    transition: all 0.5s ease-in-out;
}

    a, a:hover {
        outline: none;
        text-decoration: underline;
    }

        a img {
            border: none;
        }

iframe {
    border: none !important;
}

p {
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
    font-weight: 300;
}

    p:last-child {
        margin-bottom: 0px;
    }

strong {
    font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
    color: #464646;
    margin: 0 0 11px 0;
}

h1 {
    font-size: 30px;
    line-height: 34px;
    font-weight: 800;
    margin: 0 0 20px 0;
    color: #0047BA;
}

h2 {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: #153A62;
}

h3 {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    margin: 0;
}

h4 {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    margin: 0;
}

h5 {
    font-size: 20px;
    line-height: 30px;
}

h6 {
    font-size: 18px;
}

ul {
    padding: 0;
    margin: 0;
}

ol li {
    margin-bottom: 20px;
}

sup {
    font-size: 50%;
    top: -0.7em;
    font-weight: normal;
    white-space: nowrap;
}

span.block {
    display: inline-block;
}

.block { display: inline-block; }

.text-decoration-none {
    text-decoration: none !important;
}

.references{
    font-size:13px;
    line-height:16px;
    }

.box-shadow {
    -webkit-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.11);
    -moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.11);
    box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.11);
}

.font-sm-size {
    font-size: 16px !important;
    font-family: 'ArialMT', sans-serif;
}

.font-xs-size {
    font-size: 12px !important;
}

main {
    min-height: calc(100vh - 490px); 
    background-color:#D5E9F2;
    padding-bottom:50px;
    border-bottom:10px solid #153A62;
}


/***********************
        BG Color
***********************/
.white-bg {
    background: #fff;
}

.gray-bg {
    background: #FAFAFA;
}

.dark-bg {
    background: #4a5055;
}

.orange-bg {
    background: #ffb25a;
}

.blue-bg {
    background: #D5E9F2;
}

.green-bg {
    background: #a7c55f;
}

.dark-blue-bg {
    background: #153A62 !important;
}

.light-blue-bg {
    background: #4ec1ea !important;
}

.light-green-bg {
    background: #c8d78d !important;
}
/* NewLexetteProduct*/
.purple-bg {
    background: #8173b8;
}

/***********************
        Type Color
***********************/
.text-blue {
    color: #00b0d8 !important;
}

.text-dark-blue {
    color: #153A62 !important;
}

.text-dark-grey {
    color: #455968 !important;
}

.text-grey {
    color: #707070 !important;
}

.text-green {
    color: #00807B !important;
}

.text-red {
    color: #DA001A !important;
}
}

.text-white {
    color: #ffffff !important;
}
/* NewLexetteProduct*/
.text-purple {
    color: #8173b8;
}
/***********************
        margin-top
***********************/
.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-25 {
    margin-top: 25px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-35 {
    margin-top: 35px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-50 {
    margin-top: 50px !important;
}

/***********************
        margin-bottom
***********************/
.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-25 {
    margin-bottom: 25px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-35 {
    margin-bottom: 35px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

/***********************
        margin-left
***********************/
.ml-10 {
    margin-left: 10px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.ml-30 {
    margin-left: 30px !important;
}

.ml-40 {
    margin-left: 40px !important;
}

.ml-50 {
    margin-left: 50px !important;
}


/***********************
        padding-left
***********************/
.pl-10 {
    padding-left: 10px !important;
}

.pl-20 {
    padding-left: 20px !important;
}

.pl-25 {
    padding-left: 25px !important;
}

.pl-30 {
    padding-left: 30px !important;
}

.pl-35 {
    padding-left: 35px !important;
}

.pl-40 {
    padding-left: 40px !important;
}

.pl-45 {
    padding-left: 45px !important;
}

.pl-50 {
    padding-left: 50px !important;
}

/***********************
        padding-right
***********************/
.pr-10 {
    padding-right: 10px !important;
}

.pr-20 {
    padding-right: 20px !important;
}

.pr-25 {
    padding-right: 25px !important;
}

.pr-30 {
    padding-right: 30px !important;
}

.pr-35 {
    padding-right: 35px !important;
}

.pr-40 {
    padding-right: 40px !important;
}

.pr-45 {
    padding-right: 45px !important;
}

.pr-50 {
    padding-right: 50px !important;
}


/***********************
        btn
***********************/
.btn {
    padding: 10px 40px 10px 40px;
    font-weight: 600;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    border-radius: 20px;
    text-transform: uppercase;
    background-color: #CA1105;
    border: 1px solid #CA1105;
    text-decoration:none;
}

    .btn:hover {
        color: #FFFFFF;
        background-color: #AC0C02 !important;
        border: 1px solid #CA1105 !important;
        text-decoration:none !important;
    }

    .btn:active{
        color: #FFFFFF !important;
        background-color: #AC0C02 !important;
        border: 1px solid #CA1105 !important;
    }

    .btn:focus{
        color: #FFFFFF !important;
        background-color: #AC0C02 !important;
        border: 1px solid #CA1105 !important;
    }

.btn-md {
    padding: 10px 23px 10px 23px;
}

.btn.outline {
    color: #fff;
    border: 1px solid #FFFFFF;
    background-color: transparent;
}

    .btn.outline:hover {
        color: #0047BA;
        background-color: #ffffff;
    }
/***********************
      form-control
***********************/
.form-control {
    font-size: 18px;
    padding: 10px 8px;
}

    .form-control:focus {
        box-shadow: none;
        border-color: #00b0d8;
    }

.radio-inline {
    margin-right: 10px;
}

.form-check-label {
    font-weight: 300;
}

.form-inner {
    padding-left: 20px;
}

    .form-inner .radio label,
    .form-inner .checkbox label {
        display: table;
        margin-bottom: 0;
    }

    .form-inner .radio input,
    .form-inner .checkbox input {
        display: table-cell;
    }

    .form-inner .radio span,
    .form-inner .checkbox span {
        padding-left: 15px;
        display: table-cell;
        vertical-align: top;
    }

label {
    margin-bottom: 0px; /*padding-top: 5px;*/
    cursor:pointer;
   
}

.form-check-input {border-color:#B6B6B6;}

.btn-upload {
    background-color: #CA1105;     
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.btn-upload:hover {
    background-color: #a00;      /* darker red */
}

.btn-upload:focus {
    outline: none;
    background-color: #800;
    box-shadow: 0 0 0 0.2rem rgba(200, 0, 0, 0.3);
}

.question-wrapper { margin-bottom:40px;}

.likert-horizontal .form-check-input {
  margin-top: 0rem; /* default vertical align */
  margin-right: 0.5rem; /* spacing between radio and label */
}

.likert-horizontal .form-check-label {
  margin-bottom: 0; /* keep inline label */
}

/* Likert 1–10: keep items centered and prevent wrapping on mobile */
.likert-10 .likert-track {
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll if needed */
}

.likert-10 .form-check {
    flex: 0 0 auto;          /* don't shrink—keeps each option intact */
    width: 3rem;             /* base width per option on mobile */
    text-align: center;
    padding-left:0;
    padding-top: 5px;
}

.likert-10 .form-check-input {
    position: static;        /* remove BS offset */
    margin: 0 0 .25rem 0;    /* radio above number */
}


select.form-control:not([size]):not([multiple]) {
    height: initial;
}

.fileuplbl {
    position: absolute;
    top: -5px;
    /* left: 5px; */
    display: block;
    padding-left: 135px;
    word-break: keep-all;
}

.from-box-details .form-group .form-inner .checkbox span .error {
    padding: 0;
}

.radio-list .radiobtn label {
    display: block;
}

.radio-list .radiobtn label {
    display: block;
}

.radio-list li {
    text-align: center;
    margin: 0px 15px 15px 15px;
    display: inline-block !important;
}

    .radio-list li .radiobtn input {
        margin: 0;
    }

.checkbox-list-vertical label {
    /*margin-right: 10px;
    padding-left: 15px;
    margin-bottom: 2px;*/
    display: inline-flex;
    width: 95%;
    padding-left: 10px;
    line-height: 1.8
}

.checkbox-list-vertical input {
    margin-right: 5px;
}

.radio-list-vertical label {
    margin-right: 10px;
    padding-left: 10px;
    margin-bottom: 5px;
    cursor: pointer;
}

.radio-list-vertical input {
    margin-right: 5px;
    cursor: pointer;
}

.radio-list-horizontal label {
    display: flex;
    cursor: pointer;
}

.radio-list-horizontal input {
    cursor: pointer;
}

.radio-list-horizontal td {
    text-align: center;
    padding: 0 15px;
}

.radio-list-horizontal-inline tbody tr td {
    padding-left: 15px;
}

    .radio-list-horizontal-inline tbody tr td label {
        margin-left: 5px;
    }

    .radio-list-horizontal-inline tbody tr td:first-child {
        padding-left: 0px;
    }

.radio-list-vertical.cssstyle label {
    width: 95%;
    vertical-align: top;
}

@media screen and (max-width: 576px) {
    .radio-list li {
        display: flex !important;
        text-align: left;
        margin: 0;
    }

        .radio-list li .radiobtn input {
            margin-right: 10px;
        }

    .radio-list .radiobtn label {
        display: inline-block;
    }

    .radio-list input {
        margin-top: 5px;
    }

    .radio-list .radiobtn input {
        margin-top: 0;
    }

    .radio-list label {
        padding-top: 0;
    }
}

/*.custom-control-label:before{
        background-color:red;
    }
    .custom-checkbox .custom-control-input:checked~.custom-control-label::before{
        background-color:white;
    }
    .custom-checkbox .custom-control-input:checked~.custom-control-label::after{
        background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='red' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
    }
    .custom-control-input:active~.custom-control-label::before{
        background-color:green;
    }*/

/** focus shadow pinkish **/
/*.custom-checkbox .custom-control-input:focus~.custom-control-label::before{
        box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 0, 247, 0.25); 
    }*/


.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: green !important;
}

.custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 255, 0, 0.25)
}

.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 0, 0, 0.25)
}

.custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
    background-color: #C8FFC8;
}



/***********************
       HEADER
***********************/

#indication-bar {
    color: #ffffff;
    background-color: #072942;
    min-height:40px;
    padding: 4px 0;
    font-size: 12px;
    text-align: center;
}

#indication-bar .form-control {
    max-width: 200px;
    border-radius: 6px;
}

#indication-bar .form-control::placeholder {
    text-align: center;  /* centers only the placeholder text */
}


.header {
    padding: 20px 0 20px;
    background-color:#D5E9F2;
    position: relative;
}

.hdr-logo {
    max-height: 70px;
}

.myLeqselviStory-logo {
     max-height: 60px;
    }



/***********************
       PAGE ELEMENTS
***********************/

.round-box { background-color:#ffffff; border-top-left-radius:50px; border-bottom-right-radius:50px; padding:80px;}

.blue-box {
    background-color: #0047ba;
    padding: 30px;
    color: #ffffff;
    border-radius: 10px;
}

    .blue-box h1 {
        font-size: 36px;
        color: #ffffff;
        line-height: 40px;
        margin-bottom: 40px;
    }


    .blue-box h2 {
        font-size: 30px;
        color: #ffffff;
        line-height: 34px;
        margin-bottom: 40px;
    }

    .blue-box h3 {
        font-size: 30px;
        color: #ffffff;
        line-height: 34px;
        margin-bottom: 40px;
    }

    .blue-box p {
        font-size: 22px;
        color: #ffffff;
        font-weight:500;
        line-height: 25px;
    }

    .blue-box a {
        color: #ffffff;
    }

        .blue-box a i {
            margin-left: 6px;
            font-size: 15px;
            font-weight: 600;
        }

.section-hdr { 
    padding:20px; 
    border-radius:10px;
}

.section-hdr h2{
    font-size:18px;
    font-weight:900;
    color:#ffffff;
    margin:0;
}
/***********************
       FOOTER
***********************/
footer {
    padding: 50px 0;
}

    footer p {
        font-size: 16px;
        margin-bottom: 0;
    }

footer a{ text-decoration:underline; font-weight:700; margin-bottom:10px;    display: block; }
footer a:hover{ text-decoration:none; }

footer .logo { max-width: 103px; }
/***********************
      MODAL
***********************/
.modal .modal-lg {
    max-width: 950px;
}

.modal .modal-header {
    border: none;
    padding: 10px;
    padding-bottom: 0;
}

    .modal .modal-header .close {
        position: absolute;
        top: 45px;
        right: 55px;
        height: 45px;
        width: 45px;
        text-align: center;
        color: #00b0d8;
        border: 2px solid #ced4da;
        border-radius: 100%;
        font-size: 30px;
        line-height: 6px;
        padding-left: 13px;
    }
/*.modal .modal-body { padding: 0px 30px 30px 30px; }*/
#ThankyouModal .modal-body {
    height: 484px;
}

#contact-form {
    min-height: 500px;
    overflow-y: hidden;
}

/***********************
/* Missing Bootstrap style
***********************/
.modal-content {
    padding: 30px;
}

.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}


/***********************
      PAGE SPECIFIC
***********************/

/* HOME PAGE */

.home-main {
    background-color:#ffffff;
}

.home-main h1{
    font-size: 32px;
    font-weight: 600;
    color: #072942;
    line-height: 40px;
    margin:0;
    }


.home-main h2{
    font-size:18px;
    font-weight:400;
    color:#072942;
    }
.hero-wrapper{
    background-color:#D5E9F2;
    }
.hero {
   /* background-image: url(/img/leqsevi-lg.gif);
    background-repeat: no-repeat;
    background-size: cover;
    min-height:600px;*/
    margin-bottom:50px;
    position: relative; /* anchor point for absolute children */
}

.hero img.bottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1; /* lower layer */
}

.hero img.top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2; /* sits above bottom */
}

.hero-note {
    font-size: 0.75rem;     /* small like a disclaimer */
    color: #fff;            /* white text */
    margin-bottom: 10px;    /* lift it up slightly from the very bottom */
    text-shadow: 0 1px 2px rgba(0,0,0,0.6); /* optional for contrast */
}


/* ISI */
.page-isi {
    margin-top: 50px;
    margin-bottom: 50px;
}

    .page-isi h2, .sticky-isi-wrap h2 {
        color:#153A62;
        text-transform: uppercase;
        font-size: 22px;
        margin-bottom: 20px;
    }

        .page-isi h2.text-grey, .sticky-isi-wrap h2.text-grey {
            text-transform: initial;
        }

    .page-isi p, .sticky-isi-wrap p {
        color: #404041;
    }

    .page-isi ul {
        padding: 0 0 0 20px;
        margin: 0 0 20px 0;
        color:#404041;
    }

    .page-isi a {
        color:#404041;
    }

/* AUTHENTICATION */


.authorization-txt {
    margin-bottom: 10px;
}

.read-more-wrapper {
    margin-top: 10px;
    margin-bottom: 20px;
}

    .read-more-wrapper .read-more {
        display: block;
    }

    .read-more-wrapper .read-less {
        display: none;
    }

/* REGISTRATION */


/* SURVEY */
.survey-hero {
    background-image: url(/img/survey-hero-bkgd.png);
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 50px;
    padding-bottom: 15px;
}

/*Added content 09-12-2022 -- Move from page to style*/
.clspadding {
    padding-left: 45px;
}

.circle__spinner {
    animation: 2s linear infinite svg-animation;
    max-width: 100px;
}

.circle_loader {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    background-color: rgba(0,0,0,0.6);
}

.circle__item {
    width: 200px;
    height: 200px;
}

.message {
    width: 100%;
    position: fixed;
    top: 50px;
    z-index: 100000;
    padding: 0;
    font-size: 15px;
}

/***********************
        Responsive
***********************/
@media (max-width:1199px) {
    .form-group .form-inner .checkbox-list-vertical label,
    .form-group .form-inner table tbody tr td label {
        font-size: 16px;
    }

    .radio-list-horizontal td {
        padding: 0 7px;
    }
}

@media (max-width:991px) {
    .radio-list-horizontal-inline tbody tr td {
        display: block;
        padding-left: 0;
        padding-bottom: 10px;
    }

    .radio-list-horizontal td {
        text-align: left;
        padding: 0;
        padding-bottom: 10px;
        display: block;
    }

    .radio-list-horizontal label {
        display: inline-block;
        margin-left: 5px;
    }

    .radio-list-vertical,
    .radio-list-vertical tr,
    .radio-list-vertical tr td {
        width: 100%;
    }

        .radio-list-vertical td {
            padding-bottom: 10px;
            display: flex;
            align-items: flex-start;
        }

            .radio-list-vertical td input {
                margin-top: 5px;
            }

        .radio-list-vertical label {
            margin-right: 0;
            margin-bottom: 0;
            width: 80%;
        }

        .radio-list-vertical.cssstyle label {
            width: 80%;
            padding-left: 0px;
            padding-top: 2px;
            margin-right: 0px;
            margin-bottom: 0px;
        }

    .checkbox-list-vertical label {
        width: 80%;
    }

    .clspadding {
        padding-left: 0;
    }
}

@media (min-width: 768px) {
  .likert-horizontal .form-check {
    flex-direction: column;         /* stack radio above label */
    align-items: center;            /* center horizontally */
    text-align: center;             /* center label text */
  }

  .likert-horizontal .form-check-input {
    position: static;               /* remove Bootstrap left offset */
    margin: 0 0 0.25rem 0;          /* no side margins, small bottom gap */
  }

  .likert-horizontal .form-check-label {
    margin: 0;                      /* remove leftover spacing */
  }

  .likert-10 .likert-track {
        overflow: visible;           /* no scroll needed on desktop */
        justify-content: space-between;
        gap: .5rem;
    }
    .likert-10 .form-check {
       width: 3.5rem;               /* give a bit more room on desktop */
       padding-top: 5px;
    }
}

@media (max-width:767px) {

    h1 {
        font-size: 30px;
        line-height: 50px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    h5 {
        font-size: 18px;
    }


    /***********************
            margin-top
    ***********************/
    .mt-30 {
        margin-top: 15px !important;
    }

    .mt-40 {
        margin-top: 25px !important;
    }

    .mt-50 {
        margin-top: 30px !important;
    }

    /***********************
            margin-bottom
    ***********************/

    .mb-25 {
        margin-bottom: 10px !important;
    }

    .mb-30 {
        margin-bottom: 15px !important;
    }

    .mb-40 {
        margin-bottom: 25px !important;
    }

    .mb-50 {
        margin-bottom: 30px !important;
    }

    /***********************
            margin-left
    ***********************/

    .ml-30 {
        margin-left: 15px !important;
    }

    .ml-40 {
        margin-left: 25px !important;
    }

    .ml-50 {
        margin-left: 30px !important;
    }


    /***********************
            padding-left
    ***********************/

    .pl-25 {
        padding-left: 10px !important;
    }

    .pl-30 {
        padding-left: 15px !important;
    }

    .pl-35 {
        padding-left: 20px !important;
    }

    .pl-40 {
        padding-left: 25px !important;
    }

    .pl-45 {
        padding-left: 28px !important;
    }

    .pl-50 {
        padding-left: 30px !important;
    }

    /***********************
            padding-right
    ***********************/

    .pr-25 {
        padding-right: 10px !important;
    }

    .pr-30 {
        padding-right: 15px !important;
    }

    .pr-35 {
        padding-right: 20px !important;
    }

    .pr-40 {
        padding-right: 25px !important;
    }

    .pr-45 {
        padding-right: 28px !important;
    }

    .pr-50 {
        padding-right: 30px !important;
    }

    /* PAGE ELEMENTS */
    .blue-box h1 {
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 18px;
    }

    /* HOME PAGE */
    .home-hero {
        background-image: url(/img/mobile-home-hero-bkgd.png);
        background-repeat: no-repeat;
        background-position: center top;
        min-height: 600px;
        padding-top: 260px;
    }

    /* AUTHENTICATON PAGE */
    .authentication-hero {
        background-image: url(/img/mobile-home-hero-bkgd.png);
        background-repeat: no-repeat;
        background-position: center top;
        padding-top: 260px;
    }

    .authenticate-btn .btn {
        padding: 10px 35px 10px 35px
    }

    /* REGISTRATON */
    .round-box {
        margin:0 15px;
        padding: 30px;
     }

    .form-inner {
        padding-left: 0;
    }

    .likert-10 small.left, .likert-10 small.right{
        width:40%;
    }
    .likert-10 small.right{ text-align:right;}

    /* FOOTER */
    footer {
        padding: 86px 0 30px 0;
    }


}

@media (max-width:575px) {
    .form-group .form-inner {
        padding-left: 0;
    }

    .form-group .both label span {
        padding-left: 10px;
        vertical-align: top;
    }

    .radio-list-horizontal-inline label {
        padding-left: 10px;
        vertical-align: top;
    }

    .radio-list-horizontal label {
        padding-left: 10px;
        vertical-align: top;
    }

    .radio-list-vertical  label {
        padding-left: 10px !important;
        vertical-align: top;
    }
}

@media (max-width:479px) {
}

@media (max-width:392px) {
    h1 {
        font-size: 30px;
        line-height: 40px;
    }
}


.radio-list.matrix li label {
    display: table-cell !important;
}

.bluebox-error {
    color: #fba811;
    line-height: 24px;
}

.error {
    color: red;
}

    .error ul {
        margin-left: 20px;
        margin-top: 10px;
    }

        .error ul li {
            margin-bottom: 10px;
            list-style-type: disc !important;
        }


/*Added content 09-12-2022 -- Move from page to style*/
.clspadding {
    padding-left: 45px;
}

.circle__spinner {
    animation: 2s linear infinite svg-animation;
    max-width: 100px;
}

.circle_loader {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    background-color: rgba(0,0,0,0.6);
}

.circle__item {
    width: 200px;
    height: 200px;
}

.message {
    width: 100%;
    position: fixed;
    top: 50px;
    z-index: 100000;
    padding: 0;
    font-size: 15px;
}