@font-face {
    font-family: Roboto;
    src: url("fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: 400;
}

* {
}

body {
    font-family: Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background: #f8f9fa;
    font-size: 1.1rem;
    /*color:#333333;*/
    color: #000000;
}

h1, h2, h3, h4, h5 {
    font-weight: 600;
}

h1 {
    font-size: calc(1.3rem + .6vw);
}

h2 {
    font-size: calc(1.275rem + .3vw);
}

h3 {
    font-size: calc(1.25rem + .1vw);
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1.15rem;
}

.form-control::placeholder {
    color: #96B1CC;
    color: #aaa;
}

a:focus {
    outline: 4px solid rgba(13, 110, 253, 0.3);
}

/******************
 BOOTSTRAP REDEFINE
 ******************/
textarea {
    /*height:1em;*/
}

.textarea-1em {
    height: 1em;
}

.btn,
.form-label,
.form-select,
.form-control {
    font-size: 1.1rem;
}

.form-label {
    margin-bottom: .2rem;
}

.col-form-label {
    padding-top: calc(.375rem + 1px);
    padding-bottom: 0;
    font-weight: 650;
}

.form-check {
    padding-left: calc(var(--bs-gutter-x) / 2);
}

.form-select {
    background-position: right .4rem center;
}

.form-select,
.form-control {
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1) inset;
    background-color: #EDF5FD;
    border-color: #6A8FD1;
}

.form-select:disabled,
.form-control:disabled,
.form-control[readonly] {
    background-color: #eee !important;
    border-color: #ccc;
    box-shadow: none;
    /*opacity:0.5;*/
    color: rgb(0, 0, 0);
}

.form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label {
    background-color: #E8F9EA !important;
}

.form-check-input.is-valid:checked ~ .form-check-label,
.was-validated .form-check-input:valid:checked ~ .form-check-label,
.form-control.is-valid,
.was-validated .form-control:valid,
.form-select.is-valid,
.was-validated .form-select:valid {
    background-color: #E8F9EA !important;
    border-color: #198754 !important;
}

.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label {
    background-color: #FDEDF0 !important;
}

.form-check-input.is-invalid:checked ~ .form-check-label,
.was-validated .form-check-input:invalid:checked ~ .form-check-label,
.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid {
    background-color: #FDEDF0 !important;
    border-color: #dc3545 !important;
}

.form-control.is-valid, .was-validated .form-control:valid,
textarea.form-control.is-valid, .was-validated textarea.form-control:valid {
}

.form-control.is-invalid, .was-validated .form-control:invalid,
textarea.form-control.is-invalid, .was-validated textarea.form-control:invalid {
    background-position: right -2rem center;
}

.form-select.is-valid, .was-validated .form-select:valid {
    background-position: right .4rem center, center right 1.75rem;
}

.form-select.is-invalid, .was-validated .form-select:invalid {
    background-position: right .4rem center, center right -2rem;
}

.form-select:focus,
.form-control:focus {
    background-color: #fff !important;
}

.form-autctnCd {
    font-size: 1.5rem;
    text-align: center;
    width: 80%;
    /*border-style:solid;
    border-width:thick;
    border-color:#000000;
    color: #000000;
    background-color: #ffffff;*/
}

.btn {
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

.btn:disabled {
    box-shadow: none;
    border-color: #bbb;
}

.btn-primary {
    background-color: #00295f;
    border-color: #00295f;
}

.btn-primary:focus,
.btn-primary:hover {
    background-color: #32527e;
    border-color: #32527e;
}

.btn-primary:disabled,
.btn-secondary:disabled {
    background-color: #bbb;
}

.btn-outline-primary {
    background-color: #fff;
    border-color: #00295f;
    color: #00295f;
}

.btn-outline-primary:focus,
.btn-outline-primary:hover {
    background-color: #EDF5FD;
    border-color: #32527e;
    color: #32527e;
}

.btn-outline-secondary:focus,
.btn-outline-secondary:hover {
    background-color: #eee;
    color: #333;
}

.btn-outline-primary:disabled,
.btn-outline-secondary:disabled {
    /*background-color:none;*/
    color: #999;
}

.btn.btn-sm {
    font-size: 0.875rem;
}

.btn.btn-lg {
    font-size: 1.25rem;
}

.alert-border {
    border: 2px solid #6A8FD1;
    border-radius: 0;
}

/* CHECKBOX / RADIO */
/*
input[type=checkbox],
input[type=radio]{
    display:none;
}
*/
input[type="radio"],
input[type="radio"]:disabled,
input[type="radio"],
input[type="checkbox"],
input[type="checkbox"]:disabled,
input[type="checkbox"] {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
}

input[type=checkbox] + label,
input[type=radio] + label {
    background-color: rgba(34, 37, 43, 0.04);
    border: 1px solid transparent;
    box-sizing: border-box;
    vertical-align: bottom;
    text-decoration: none;
    display: inline-block;
    padding: 0 10px 2px;
    border-radius: 5px;
    /*     line-height: 40px; */
    height: auto
}

input[type=checkbox] + label:before,
input[type=radio] + label:before {
    background: no-repeat center center;
    background-size: 18px 18px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: 2px;
    height: 18px;
    width: 18px;
    content: "";
}

input[type=checkbox] + label:hover,
input[type=radio] + label:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

input[type=checkbox] + label:active,
input[type=checkbox]:checked + label,
input[type=radio] + label:active,
input[type=radio]:checked + label {
    background-color: #EDF5FD !important;
    border: 1px solid rgba(5, 114, 231, 0.5) !important;
    border: 1px solid #6A8FD1 !important;
}

input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label {
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.3);
}

input[type=checkbox]:disabled + label,
input[type=radio]:disabled + label {
    background-color: #eee !important;
}

input[type=checkbox]:checked:disabled + label,
input[type=radio]:checked:disabled + label {
    border-color: #ccc !important;
}

input[type=checkbox]:not(:checked) + label,
input[type=radio]:not(:checked) + label {
    border-color: transparent !important;
}

input[type=checkbox] + label:before {
    background-image: url(../img/icon_checkbox_off.png);
}

input[type=checkbox]:checked + label:before {
    background-image: url(../img/icon_checkbox_on.png);
}

input[type=checkbox]:disabled + label:before {
    background-image: url(../img/icon_checkbox_off.png);
}

input[type=checkbox]:checked:disabled + label:before {
    background-image: url(../img/icon_checkbox_disabled_on.png);
}

input[type=radio] + label:before {
    background-image: url(../img/icon_radio_off.png);
}

input[type=radio]:checked + label:before {
    background-image: url(../img/icon_radio_on.png);
}

input[type=radio]:disabled + label:before {
    background-image: url(../img/icon_radio_off.png);
}

input[type=radio]:checked:disabled + label:before {
    background-image: url(../img/icon_radio_disabled_on.png);
}

.form-check-input[type=checkbox].is-valid ~ .form-check-label:before, .was-validated .form-check-input[type=checkbox]:valid ~ .form-check-label:before {
    background-image: url(../img/icon_checkbox_valid_off.png);
}

.form-check-input[type=radio].is-valid ~ .form-check-label:before, .was-validated .form-check-input[type=radio]:valid ~ .form-check-label:before {
    background-image: url(../img/icon_radio_valid_off.png);
}

.form-check-input[type=checkbox]:checked.is-valid ~ .form-check-label:before, .was-validated .form-check-input[type=checkbox]:valid ~ .form-check-label:before {
    background-image: url(../img/icon_checkbox_valid_on.png);
}

.form-check-input[type=radio]:checked.is-valid ~ .form-check-label:before, .was-validated .form-check-input[type=radio]:checked:valid ~ .form-check-label:before {
    background-image: url(../img/icon_radio_valid_on.png);
}

.form-check-input[type=checkbox].is-invalid ~ .form-check-label:before, .was-validated .form-check-input[type=checkbox]:invalid ~ .form-check-label:before {
    background-image: url(../img/icon_checkbox_invalid_off.png);
}

.form-check-input[type=radio].is-invalid ~ .form-check-label:before, .was-validated .form-check-input[type=radio]:invalid ~ .form-check-label:before {
    background-image: url(../img/icon_radio_invalid_off.png);
}

.form-check-input[type=checkbox]:checked.is-invalid ~ .form-check-label:before, .was-validated .form-check-input[type=checkbox]:checked:invalid ~ .form-check-label:before {
    background-image: url(../img/icon_checkbox_invalid_on.png);
}

.form-check-input[type=radio]:checked.is-invalid ~ .form-check-label:before, .was-validated .form-check-input[type=radio]:checked:invalid ~ .form-check-label:before {
    background-image: url(../img/icon_radio_invalid_on.png);
}


/**********
 COMMON USE
 **********/
.none {
    display: none;
}

.text-normal {
    font-weight: normal;
}

.text-box {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 3px 6px 1px;
    line-height: 1.6em;
    background: #eee;
    font-size: 85%;
}

.open-new {
    background: url(../img/icon_popup.png) no-repeat right center;
    padding-right: 30px;
}


/**********
 CONTAINERS
 **********/
header {
    background: #0654A8 url(../img/bg3.jpg) no-repeat left top;
    min-width: 1000px;
    height: 80px;
    color: #fff;
}

main {
    box-shadow: 0 0 7px rgba(0, 0, 0, .15);
    /*    min-height:calc(100vh - 120px);*/
    padding: 0 50px !important;
    background: #fff;
}

footer {
    /*    border-top:1px solid #ddd;*/
    letter-spacing: 0.03rem;
    /* line-height: 40px; */
    font-size: 12px;
}

.container {
    max-width: 1000px;
}

.exec {
    background: #EDEDED;
    margin: 3rem -50px -3rem;
    background: rgba(237, 237, 237, 0.95)
}


/****
 HEAD
 ****/
/*
.logo{
    background:url(../img/logo.png) no-repeat left center;
    white-space:nowrap;
    display:inline-block;
    padding-left:70px;
    line-height:80px;
    font-weight:500;
    font-size:24px;
}
*/
.logo {
    background: url(../img/logo_pc.png) no-repeat left center;
    vertical-align: middle;
    margin-top: 8px;
    display: inline-block;
    font-size: 0;
    width: 218px;
    height: 64px;
}

.stepbar {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.stepbar li {
    background: url(../img/stepbar_yet.png) no-repeat center 25px;
    white-space: nowrap;
    text-align: center;
    font-size: 85%;
    width: 115px;
}

.stepbar li:last-child {
    background-image: url(../img/stepbar_yet_end.png);
}

.stepbar li:not(:first-child).step-current {
    background-image: url(../img/stepbar_current.png);
}

.stepbar li:first-child.step-current {
    background-image: url(../img/stepbar_current_start.png);
}

.stepbar li:last-child.step-current {
    background-image: url(../img/stepbar_current_end.png);
}

.stepbar li.step-done {
    background-image: url(../img/stepbar_done.png);
}

.stepbar li:first-child.step-done {
    background-image: url(../img/stepbar_done_start.png);
}

/*
.stepbar li:first-child{
    background-position:left 25px;
}
.stepbar li:last-child{
    background-position:right 25px;
}
*/
.step-number {
    border: 2px solid #fff;
    margin: 12px auto 5px;
    background: #00439C;
    border-radius: 15px;
    line-height: 28px;
    display: block;
    height: 30px;
    width: 30px;
}

.stepbar li.step-current .step-number {
    background: #F68701;
}

.stepbar li.step-done .step-number {
    background: #6A8FD1 url(../img/icon_step_check.png) no-repeat center center;
    font-size: 0;
    border: 0;
}

.stepbar li.step-done .step-label {
    opacity: .5;
}


/****
 MAIN
 ****/
main h1 {
    border-bottom: 3px solid #6A8FD1;
    display: inline-block;
    margin-bottom: 1rem;
    margin-left: -50px;
    padding: .8em 1em .65em;
}

main h2 {
    border-bottom: 2px solid #6A8FD1;
}

main ul {
    margin: .5em 0;
    padding-left: 1.5rem;
}

main li {
    margin-bottom: .2em;
    margin-top: .2em;
}


/************
 INITIAL PAGE
 ************/
.initial-page {
    background: #0654A8 url(../img/bg3.jpg) no-repeat left top;
    background-size: cover;
}

.initial-page header {
    background: transparent;
}

.initial-page main {
    min-height: calc(100vh - 120px);
    background: transparent;
    box-shadow: none;
}

.initial-page main h1 {
    text-align: center;
    display: block;
    color: #fff;
    margin: 0;
    border: 0
}

.initial-page main .guidance {
    border: 2px solid #fff;
    margin-bottom: 30px;
    border-radius: 5px;
    padding: 20px;
    color: #fff;
}

.initial-page main ul {
    margin: 0;
}

.initial-page main li {
    margin-bottom: .5rem;
    font-size: 1rem;
}

.initial-page main li:last-child {
    margin-bottom: 0;
}

.box {
}

.box.box-login {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 20px;
    background: #fff;
    width: 55%;
}

.box.box-login .col-auto {
    margin-top: 10px;
}

.initial-page main input[type=text] {
    text-align: center;
    padding: .2rem .5rem;
    font-size: 24px;
}

/*
.initial-page main .form-check{
    background-color:rgba(0,41,95,0.15);
    padding:5px 10px 5px 36px;
    border-radius:4px;
}
.initial-page main input[type=checkbox] + label{
    background-color:rgba(0,41,95,0.15);
}
.initial-page main input[type=checkbox] + label:active,
.initial-page main input[type=checkbox]:checked + label{
    background-color:rgba(255,255,255,0.2) !important;
}
*/
.initial-page main hr {
    background-color: rgba(0, 0, 0, .7);
    margin: 30px -30px;
}

.initial-page footer {
    color: #fff;
}


/**********
 AGREEMENTS
 **********/
.agreements {
}

.agreements input[type=checkbox] + label:before {
    position: absolute;
    left: 18px;
    top: 18px;
}

.agreements input[type=checkbox] + label {
    padding: 15px 15px 15px 50px;
    /*    border:1px solid #ddd;*/
    line-height: 1.6em;
    position: relative;
    /*    background:#fff;*/
    font-weight: 700;
    display: block;
    height: auto;
}

.referer {
    margin-left: 53px;
}

.referer iframe {
    height: calc(100vh / 2);
}

.open-view {
    line-height: 1.6em;
    padding: .5em 0;
    display: inline-block;
}

.open-view:after {
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    border: 1px solid #0d6efd;
    display: inline-block;
    padding: 3px 6px 1px;
    line-height: 1.6em;
    border-radius: 4px;
    margin-left: 10px;
    background: #fff;
    font-size: 85%;
    content: "表示";
}

.open-view.opened:after {
    content: "閉じる";
}

.check-count {
    background: rgba(204, 0, 0, 0.9);
    text-align: center;
    padding: .3rem;
    color: #fff;
}

.check-count.checkedall {
    background: rgb(0, 103, 192)
}

.check-count > span {
    vertical-align: middle;
}

@media screen and (min-width: 768px) {
    .sp-only {
        display: none;
    }

    .sp-only-width {
        width: 65%
    }
}


@media screen and (max-width: 768px) {
    textarea {
        height: auto;
    }

    /*
        .col-form-label{
            margin-bottom:-5px;
        }
    */
    .pc-only {
        display: none;
    }

    .pc-only-width {
        width: 98%
    }

    .referer {
        margin-left: 1em;
    }

    header {
        min-width: auto;
        height: 100px;
    }

    main {
        min-height: calc(100vh - 140px);
        padding: 0 15px !important;
    }

    .exec {
        margin: 3rem -15px -3rem;
    }


    .logo {
        background: url(../img/logo_sp.png) no-repeat center center;
        width: 330px;
        height: 32px;
        margin: 6px 0 2px;
    }

    .stepbar {
        position: relative;
        top: -8px
    }

    .stepbar .step-number {
        margin-bottom: 1px;
    }

    .stepbar .step-label {
        line-height: 1.1em;
        font-size: .8rem;
        /*        display:none;*/
    }

    main h1 {
        border-bottom: 3px solid #6A8FD1;
        margin-right: -15px;
        margin-left: -15px;
        text-align: center;
        display: block;
    }

    .initial-page {
        background-position: -400px top;
        background-size: cover;
    }

    .initial-page main {
        min-height: calc(100vh - 140px);
        max-width: none;
    }

    .initial-page main .guidance {
        margin-bottom: 10px;
        padding: 10px;
        width: 96%;
    }

    .box.box-login {
        padding: 15px;
        width: 96%;
    }

    .initial-page main hr {
        margin: 20px 10px;
    }

    .my-dealer {
        text-align: center;
    }
}

/* DIALOG */
.ui-widget-overlay {
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
    z-index: 1040;
}

.ui-dialog.ui-widget.ui-widget-content {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid #f4f7fc;
    background: #f4f7fc;
    padding: 0;
}

.ui-dialog-titlebar.ui-widget-header {
    background: #114f8c;
    border-radius: 0;
    color: #fff;
    padding: 0;
    border: 0;
}

.ui-dialog .ui-dialog-title {
    padding: 0 0 0 20px;
    font-weight: normal;
    line-height: 60px;
    font-size: 20px;
    margin: 0;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: transparent;
    outline: none;
    height: 40px;
    width: 40px;
    right: 10px;
    padding: 0;
    margin: 0;
    border: 0;
    top: 10px;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.ui-icon.ui-icon-closethick {
    background: url(../img/icon_close.png) no-repeat center center !important;
    height: 40px;
    width: 40px;
    margin: 0;
    left: 0;
    top: 0;
}

.ui-dialog .ui-dialog-content {
    padding: 5px;
}

.no-titlebar .ui-dialog-titlebar {
    display: none;
}

#dialog-message.ui-dialog-content,
#dialog-confirm.ui-dialog-content,
#dialog-warning.ui-dialog-content,
#dialog-error.ui-dialog-content {
    /*padding: 20px 20px 20px 100px;*/
    padding: 15px 50px 15px;
    background: no-repeat 30px center;
    background-size: 48px;
}

#dialog-message.ui-dialog-content {
    /*background-image: url(../img/icon_dialog_info.png);*/
}

#dialog-confirm.ui-dialog-content {
    /*background-image: url(../img/icon_dialog_query.png);*/
}

#dialog-error.ui-dialog-content {
    background-image: url(../img/icon_dialog_error.png);
}

#dialog-warning.ui-dialog-content {
    background-image: url(../img/icon_dialog_warn.png);
}

.ui-dialog .ui-dialog-buttonpane {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;
    background: transparent;
    padding: 5px 20px;
    margin: 0;
    border: 0;
}

.ui-dialog-buttonpane .ui-dialog-buttonset button {
    background-color: #717B86;
    margin: .5em .4em .5em 0;
    padding: .4em 1em;
    border-radius: 3px;
    cursor: pointer;
    min-width: 6em;
    color: #F3F7F9;
    outline: none;
    border: 0;
}

.ui-dialog-buttonpane .ui-dialog-buttonset button:hover {
    background-color: rgba(113, 123, 134, .8);
}

.ui-dialog-buttonpane .ui-dialog-buttonset button:first-child {
    background-color: #2A6BB5;
}

.ui-dialog-buttonpane .ui-dialog-buttonset button:first-child:hover {
    background-color: rgba(42, 107, 181, .8);
}

[v-cloak] {
    display: none;
}

.outline-none:focus {
    outline: 0;
}

.my-5-inv {
    margin-top: 0rem !important;
    margin-bottom: 1rem !important;
}

img.selected-image {
    border: solid 1px;
    border-color: red;
}

img.no-selected-image {
    opacity: 0.5;
}

img.red-frame {
    border: 5px #ff0000 solid;
}

div.div-red-border {
    border: 5px #ff0000 solid;
}

img.inactive {
    filter: grayscale(100%);
}

.py-1-title {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    margin-top: 2rem !important;
    margin-bottom: 0.25rem !important;
}

.pane {
    /* box-shadow: 0 3px 3px rgba(46, 75, 109, .15); */
    /* border: 1px solid #D2E0F1; */
    margin-bottom: 15px;
    position: relative;
    border-radius: 8px;
    background: #fff;
    padding: 5px;
}

.tag {
    background-color: #666;
    vertical-align: bottom;
    display: inline-block;
    white-space: nowrap;
    padding: 2px 8px 0;
    border-radius: 3px;
    line-height: 34px;
    font-weight: 300;
    color: #F3F7F9;
    margin: 2px 0;
    margin: 0;
}

input[type].necessary {
    background-image: url(../img/tag_necessary.png);
    background-position: right 5px center;
    background-repeat: no-repeat;
    padding-right: 45px;
}

.tag.tag-sm {
    padding: .2em .5em 0.5em;
    line-height: 1.5em;
    font-size: .75rem;
}

.tag.tag-necessary {
    background-color: #F38A99;
}

.tag.tag-step {
    background-color: #6EA6B4;
}

.balloonoya {
    position: relative; /* 指定した分だけ相対的に移動 */
}

.balloonoya:hover .balloon {
    display: inline; /* インライン要素として表示 */
}

.balloon {
    position: absolute; /* 親要素を基準 */
    display: none; /* 要素を非表示 */
    padding: 2px; /* テキストの前後の余白 */
    background-color: rgba(102, 102, 255, 0.50); /* 背景色（透明度） */
    width: 180px; /* 吹き出し全体の幅 */
    right: -1%; /* 表示位置 */
    font-size: 80%; /* 文字サイズ */
}

.balloon:after {
    border-right: 12px solid rgba(102, 102, 255, 0.50); /* 吹き出し口の幅・色 */
    border-top: 10px solid transparent; /* 吹き出し口の高さ１／２ */
    border-bottom: 10px solid transparent; /* 吹き出し口の高さ１／２ */
    left: -12px; /* 吹き出し口の位置調整 */
    top: 5%; /* 吹き出し口の縦位置 */
    content: ""; /* コンテンツの挿入 */
    position: absolute; /* 親要素を基準 */
}

.ul-alter {
    list-style: none;
}

.ul-alter.fc-red {
    color: red;
    font-size: 0.675em;
}

.ul-alter.fc-blue {
    color: #6495ED;;
    font-size: 0.675em;
}

#wrapper {
    height: 600px;
    overflow-y: scroll;
}

.alert-warning {
    color: #084298;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

/* Spinner Wrapper */
.loader {
    width: 100vw;
    height: 100vh;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.7;
}

.loader-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
}

/* Spinner */
.lds-roller {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 32px 32px;
}

.lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #333;
    margin: -3px 0 0 -3px;
}

.lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
    top: 50px;
    left: 50px;
}

.lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
    top: 54px;
    left: 45px;
}

.lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
    top: 57px;
    left: 39px;
}

.lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
    top: 58px;
    left: 32px;
}

.lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
    top: 57px;
    left: 25px;
}

.lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
    top: 54px;
    left: 19px;
}

.lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
    top: 50px;
    left: 14px;
}

.lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
    top: 45px;
    left: 10px;
}

@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*demo1*/
/*.ispinner {*/
/*    position: relative;*/
/*    width: 40px;*/
/*    height: 40px; }*/
/*.ispinner .ispinner-blade {*/
/*    position: absolute;*/
/*    top: 6.5px;*/
/*    left: 8.5px;*/
/*    width: 2.5px;*/
/*    height: 6.5px;*/
/*    background-color: #8e8e93;*/
/*    border-radius: 1.25px;*/
/*    animation: iSpinnerBlade 1s linear infinite;*/
/*    will-change: opacity; }*/
/*.ispinner .ispinner-blade:nth-child(1) {*/
/*    transform: rotate(45deg) translateY(-6.5px);*/
/*    animation-delay: -1.625s; }*/
/*.ispinner .ispinner-blade:nth-child(2) {*/
/*    transform: rotate(90deg) translateY(-6.5px);*/
/*    animation-delay: -1.5s; }*/
/*.ispinner .ispinner-blade:nth-child(3) {*/
/*    transform: rotate(135deg) translateY(-6.5px);*/
/*    animation-delay: -1.375s; }*/
/*.ispinner .ispinner-blade:nth-child(4) {*/
/*    transform: rotate(180deg) translateY(-6.5px);*/
/*    animation-delay: -1.25s; }*/
/*.ispinner .ispinner-blade:nth-child(5) {*/
/*    transform: rotate(225deg) translateY(-6.5px);*/
/*    animation-delay: -1.125s; }*/
/*.ispinner .ispinner-blade:nth-child(6) {*/
/*    transform: rotate(270deg) translateY(-6.5px);*/
/*    animation-delay: -1s; }*/
/*.ispinner .ispinner-blade:nth-child(7) {*/
/*    transform: rotate(315deg) translateY(-6.5px);*/
/*    animation-delay: -0.875s; }*/
/*.ispinner .ispinner-blade:nth-child(8) {*/
/*    transform: rotate(360deg) translateY(-6.5px);*/
/*    animation-delay: -0.75s; }*/
/*.ispinner.ispinner-large {*/
/*    width: 70px;*/
/*    height: 70px; }*/
/*.ispinner.ispinner-large .ispinner-blade {*/
/*    top: 11.5px;*/
/*    left: 15px;*/
/*    width: 5px;*/
/*    height: 12px;*/
/*    border-radius: 2.5px; }*/
/*.ispinner.ispinner-large .ispinner-blade:nth-child(1) {*/
/*    transform: rotate(45deg) translateY(-11.5px); }*/
/*.ispinner.ispinner-large .ispinner-blade:nth-child(2) {*/
/*    transform: rotate(90deg) translateY(-11.5px); }*/
/*.ispinner.ispinner-large .ispinner-blade:nth-child(3) {*/
/*    transform: rotate(135deg) translateY(-11.5px); }*/
/*.ispinner.ispinner-large .ispinner-blade:nth-child(4) {*/
/*    transform: rotate(180deg) translateY(-11.5px); }*/
/*.ispinner.ispinner-large .ispinner-blade:nth-child(5) {*/
/*    transform: rotate(225deg) translateY(-11.5px); }*/
/*.ispinner.ispinner-large .ispinner-blade:nth-child(6) {*/
/*    transform: rotate(270deg) translateY(-11.5px); }*/
/*.ispinner.ispinner-large .ispinner-blade:nth-child(7) {*/
/*    transform: rotate(315deg) translateY(-11.5px); }*/
/*.ispinner.ispinner-large .ispinner-blade:nth-child(8) {*/
/*    transform: rotate(360deg) translateY(-11.5px); }*/

/*@keyframes iSpinnerBlade {*/
/*    0% {*/
/*        opacity: 0.85; }*/
/*    50% {*/
/*        opacity: 0.25; }*/
/*    100% {*/
/*        opacity: 0.25; } }*/


/*demo2*/
.spinner {
    font-size: 48px;
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
}

.spinner.center {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.spinner .spinner-blade {
    position: absolute;
    left: 0.4629em;
    bottom: 0;
    width: 0.074em;
    height: 0.2777em;
    border-radius: 0.0555em;
    background-color: #2A6BB5;
    -webkit-transform-origin: center -0.2222em;
    -ms-transform-origin: center -0.2222em;
    transform-origin: center -0.2222em;
    -webkit-animation: spinner-fade 1s infinite linear;
    animation: spinner-fade 1s infinite linear;
}

.spinner .spinner-blade:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

.spinner .spinner-blade:nth-child(2) {
    -webkit-animation-delay: 0.083s;
    animation-delay: 0.083s;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

.spinner .spinner-blade:nth-child(3) {
    -webkit-animation-delay: 0.166s;
    animation-delay: 0.166s;
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}

.spinner .spinner-blade:nth-child(4) {
    -webkit-animation-delay: 0.249s;
    animation-delay: 0.249s;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.spinner .spinner-blade:nth-child(5) {
    -webkit-animation-delay: 0.332s;
    animation-delay: 0.332s;
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

.spinner .spinner-blade:nth-child(6) {
    -webkit-animation-delay: 0.415s;
    animation-delay: 0.415s;
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}

.spinner .spinner-blade:nth-child(7) {
    -webkit-animation-delay: 0.498s;
    animation-delay: 0.498s;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.spinner .spinner-blade:nth-child(8) {
    -webkit-animation-delay: 0.581s;
    animation-delay: 0.581s;
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
}

.spinner .spinner-blade:nth-child(9) {
    -webkit-animation-delay: 0.664s;
    animation-delay: 0.664s;
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
}

.spinner .spinner-blade:nth-child(10) {
    -webkit-animation-delay: 0.747s;
    animation-delay: 0.747s;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.spinner .spinner-blade:nth-child(11) {
    -webkit-animation-delay: 0.83s;
    animation-delay: 0.83s;
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
}

.spinner .spinner-blade:nth-child(12) {
    -webkit-animation-delay: 0.913s;
    animation-delay: 0.913s;
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}

@-webkit-keyframes spinner-fade {
    0% {
        background-color: #69717d;
    }
    100% {
        background-color: transparent;
    }
}

@keyframes spinner-fade {
    0% {
        background-color: #2A6BB5;
    }
    100% {
        background-color: transparent;
    }
}

.text-red {
    color: red;
}

.text-black {
    color: black;
}

.dialog-text {
    font-size: 0.9em; /* 调整字体大小为正常大小的90% */
}

.dialog-button {
    width: 60%; /* 设置按钮宽度为60% */
    margin: auto; /* 使按钮居中 */
}