:root {
    --white-01: rgba(255, 255, 255, 1);
    --black-01: rgba(0, 0, 0, 0.8);
    --black-02: rgba(5, 28, 1, 1);
    --orange-01: rgba(242, 152, 2, 1);
    --gray-01: rgba(244, 244, 244, 1);
    --gray-02: rgba(159, 159, 159, 1);
    --gray-03: rgba(124, 124, 124, 1);
    --gray-04: rgba(201, 201, 201, 1);
    --gray-05: rgba(221, 221, 221, 1);
    --gray-06: rgba(224, 224, 224, 1);
    --gray-07: rgba(188, 188, 188, 1);
    --gray-08: rgba(112, 112, 112, 1);
    --blue-01: rgba(14, 160, 233, 1);
    /* */
    --blue-02: #00A0E9;
    /* #1E72BE */
    --green-01: rgba(141, 194, 31, 1);
    --pink-01: rgba(214, 92, 92, 1);
}

html, body {
    height: 100%;
}

header {
    height: 60px;
    width: 100%;
    background: #E0E0E0;
    display: flex;
    align-items: center;
}

section.section-main-content {
    min-height: calc(100% - 60px - 73px - 214px);
}

.logo {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    color: var(--white-01);
    line-height: 24.5px;
    letter-spacing: 0.05em;
    padding-left: 28px;
}

.logo img {
    width: 135px;
}

body {
    background: var(--gray-01) !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    margin-bottom: unset !important;
}

p {
    margin: 0;
}

*,
::after,
::before {
    box-sizing: unset;
}

/* 1 */
.progression {
    margin: 58px auto 49px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 633px;
}

.progression>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    --step-color: var(--gray-04);
    position: relative;
}

.step-1.step-current,
.step-1.step-prev {
    --step-color: var(--orange-01);
}

.step-2.step-current,
.step-3.step-current,
.step-2.step-prev,
.step-3.step-prev {
    --step-color: var(--blue-01);
}

.step-4.step-current,
.step-5.step-current,
.step-6.step-current,
.step-4.step-prev,
.step-5.step-prev,
.step-6.step-prev {
    --step-color: var(--green-01);
}

.step-7.step-current {
    --step-color: var(--gray-03);
}

.progression>div:not(:first-child):before,
.progression>div:not(:last-child):after {
    content: '';
    position: absolute;
    width: 34px;
    height: 0px;
    top: 20%;
    background: var(--step-color);
    border: 1px solid var(--step-color);
}

.progression>div:not(.step-prev):after {
    background: var(--gray-04);
    border: 1px solid var(--gray-04);
}

.progression>div.step-1.step-current:after {
    --step-color: var(--gray-04);
}

.progression>div:not(:last-child):after {
    left: 66%;
}

.progression>div:not(:first-child):before {
    right: 66%;
}

.step-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--white-01);
    filter: drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.16));
    border-radius: 50%;
    margin-bottom: 8px;
    position: relative;

    font-family: Arial;
    font-size: 17px;
    letter-spacing: 0.05em;
    line-height: 28px;
    text-align: center;
    color: var(--gray-02);
    cursor: pointer;
}

.step-text {
    font-family: 'Hiragino CNS W3', sans-serif;
    font-size: 12px;
    letter-spacing: 0.05em;
    line-height: 19px;
    text-align: center;
    color: var(--gray-02);
    position: relative;
}

.step-current .step-icon:before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--step-color);
}

.step-prev .step-icon {
    background: var(--step-color);
    position: relative;
}

.step-prev .step-icon:before {
    content: url('./img/check_icon.svg');
    position: absolute;
    top: 11%;
    left: 27%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--step-color);
}

.step-current .step-text {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--black-02);
}

.main-container {
    max-width: 980px;
    background: var(--white-01);
    border-radius: 3px;
    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.06);
    margin: 0 auto;
    padding: 37px 40px 80px;
}

.title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24px;
    letter-spacing: 0.05em;
    line-height: 35px;
    margin-bottom: 9px;
    color: var(--blue-02);
}

.description,
.subtitle {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    letter-spacing: 0.05em;
    padding-bottom: 60px;
}

.description {
    color: #383839;
}

.design-template-selection .sub-container {
    margin-bottom: 31px;
    padding-left: 54px;
}

.design-template-selection .img-wrapper img {
    width: 326px;
    margin-bottom: 9px;
    border-radius: 5px;
}

.design-template-selection .expression p,
.select-template-wrapper label {
    font-family: 'Hiragino CNS W3', sans-serif;
    color: var(--black-02);
    font-size: 14px;
    /* letter-spacing: 0.05em; */
    line-height: 24.5px;
}

.btn-wrapper-step {
    display: flex;
    justify-content: center;
    margin: 64px 0 70px 0;
}

.btn {
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.05em;
    line-height: 35px;
    color: var(--white-01);
    border: none;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn:hover {
    cursor: pointer;
    opacity: 50%;
}

.btn-back {
    width: 200px;
    height: 56px;
    font-size: 16px;
    background: #f4f4f4;
    color: #383839;
    border: 1px solid #383839;
    border-radius: 3px;
}

.btn-next {
    width: 200px;
    height: 56px;
    font-size: 16px;
    background: linear-gradient(to right, #0BA2DB 0%, #0BA2DB 0%, #9AC818 100%);
}

.btn-next:hover {
    color: white !important;
}

.btn-draft {
    width: 200px;
    height: 54px;
    font-size: 16px;
    color: #1E72BE;
    border: 1px solid #1E72BE;
}

.btn-draft:hover {
    background: #e7e7e7;
}

.btn-sample {
    width: 105px;
    height: 25px;
    font-size: 14px;
    background: var(--blue-02);
    margin: 11px 0 15px;
}

/* Custom Radio */
.radio-styled .item:not(.item-blank) {
    cursor: pointer;
}

.radio-styled .item input[type="radio"]:checked,
.radio-styled .item input[type="radio"]:not(:checked) {
    position: absolute;
    left: -99999px;
}

.radio-styled .item input[type="radio"]:checked+label,
.radio-styled .item input[type="radio"]:not(:checked)+label {
    position: relative;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #000;
    word-break: break-all;
}

.radio-styled .item input[type="radio"]:checked+label,
.radio-styled .item input[type="radio"]:not(:checked)+label {
    padding-left: 30px;
}

.radio-styled .item input[type="radio"]:checked+label:before,
.radio-styled .item input[type="radio"]:not(:checked)+label:before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0px;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background: transparent;
}

.radio-styled .item input[type="radio"]:not(:checked)+label:before {
    border: 1px solid var(--gray-03);
}

.radio-styled .item input[type="radio"]:checked+label:before {
    border: 1px solid var(--blue-01);
    top: -3px;
}

.radio-styled .item input[type="radio"]:checked+label:after,
.radio-styled .item input[type="radio"]:not(:checked)+label:after {
    content: '';
    width: 13px;
    height: 13px;
    position: absolute;
    top: 4px;
    left: 7px;
    border-radius: 100%;
}

.radio-styled .item input[type="radio"]:checked+label:after {
    border: 1px solid var(--blue-01);
    top: 3px;
    left: 6px;
}

.radio-styled .item input[type="radio"]:checked+label:after {
    background: var(--blue-01);
}

/* Required tag */
.required {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 9px;
    border-radius: 2px;
    width: 27px;
    border-radius: 2px;
    margin-left: 8px;
    padding: 3px 0;
    color: var(--white-01);
    background: var(--pink-01);
    position: absolute;
    text-align: center;
    margin-top: 3px;
}

.design-template-selection .required {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 9px;
    border-radius: 2px;
    width: 27px;
    border-radius: 2px;
    margin-left: 8px;
    padding: 2px 0;
    color: var(--white-01);
    background: var(--pink-01);
    position: absolute;
    text-align: center;
    margin-top: 2px;
}

/* 2 */

.subtitle {
    color: #383839;
}

.sub-container {
    border-top: 1px solid var(--gray-05);
}

.form-table {
    width: 100%;
    padding-top: 30px;
}

.form-table .row {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.form-table .row>div:first-child {
    width: 230px;
    margin-right: 10px;
}

.form-table .row>div:nth-child(2) {
    width: calc(100% - 240px);
}

.form-table .row>div:nth-child(3) {
    width: 240px;
}

.form-table .row>div:nth-child(4) {
    width: calc(100% - 240px);
}

.form-table .row>div:nth-child(5) {
    width: 240px;
}

.form-table .row>div:nth-child(6) {
    width: calc(100% - 240px);
}

.form-table .row-title {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--gray-03);
    font-size: 16px;
}

.form-table .input-label {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--black-02);
    font-size: 16px;
    margin-bottom: 13px;
}

.form-table .inputs {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--gray-03);
    font-size: 16px;
    margin-bottom: 19px;
    width: 100%;
}

.form-table .inputs input,
.form-table .inputs textarea {
    width: calc(100% - 34px);
    border-radius: 3px;
    border: 1px solid #C9C9C9;
    padding: 8px;
    font-family: 'Hiragino CNS W3', sans-serif;
}

.form-table select {
    border: 1px solid #C9C9C9;
}

.form-table .inputs textarea {
    margin-right: 28px;
    min-height: 80px;
    resize: none;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 28px;
}

.form-table .inputs textarea.area-sm {
    margin-right: 28px;
    min-height: 80px;
    resize: none;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 28px;
}

.form-table .inputs textarea.area-lg {
    margin-right: 28px;
    min-height: 344px;
    resize: none;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 28px;
}

.form-table .inputs textarea.area-md {
    margin-right: 28px;
    min-height: 179px;
    resize: none;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 28px;
}

.note {
    margin-top: 12px;
    color: var(--gray-03);
    font-size: 12px;
}

/* custom checkbox */

.checkbox-styled label.cursor-default:hover {
    cursor: default;
}

.checkbox-styled label:hover {
    cursor: pointer;
}

.checkbox-styled input:not(:checked),
.checkbox-styled input:checked {
    position: absolute;
    left: -9999px;
}

.checkbox-styled input:not(:checked)+label,
.checkbox-styled input:checked+label {
    position: relative;
    cursor: pointer;
    display: inline-block;
    word-break: break-all;
}

.checkbox-styled input:not(:checked)+label,
.checkbox-styled input:checked+label {
    padding-left: 30px;
}

.checkbox-styled input:not(:checked)+label:after,
.checkbox-styled input:checked+label:after {
    content: '';
    position: absolute;
    top: 4px;
    left: 2px;
}

.checkbox-styled input:not(:checked)+label:before,
.checkbox-styled input:checked+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    background: transparent;
    border-radius: 1px;
}

.checkbox-styled input:checked+label:before {
    background: var(--blue-02);
}

.my-page .checkbox-styled input:checked+label:before {
    background: #FFFFFF;
}

.my-page .checkbox-styled input:checked+label:after {
    background: url('./img/check_icon_blue.svg') no-repeat center center;
    background-size: contain;
    width: 12px;
    height: 8px;
}

.checkbox-styled input:checked+label:after {
    background: url('./img/check_icon.svg') no-repeat center center;
    background-size: contain;
    width: 12px;
    height: 8px;
}

.checkbox-styled input:not(:checked)+label:before {
    background: var(--gray-06);
}

/* 3 */
.declaration-efforts .form-table .inputs input,
.declaration-efforts .form-table .inputs textarea {
    width: calc(100% - 48px);
}

.goal-inputs {
    position: relative;
}

.goal-actions {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 42px;
    position: absolute;
    top: 0;
    right: 0;
}

.goal-actions>div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-family: 'Noto Sans JP', sans-serif;
}

.goal-actions .add-goal {
    background-color: #BCBCBC;
    width: 16px;
    height: 16px;
    color: #FFFFFF;
    border-radius: 50%;
}

.goal-actions .remove-goal {
    background-color: #BCBCBC;
    width: 15px;
    height: 15px;
    color: #7C7C7C;
    border: 0.5px solid #707070;
    background: #FFFFFF;
    border-radius: 50%;
}

.goal-actions>div:hover {
    cursor: pointer;
}

.hidden-btn {
    opacity: 0;
    user-select: none;
}

.hidden-btn:hover {
    cursor: default !important;
}

.goals-selection {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: -10px;
}

.goals-selected {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: -10px;
}

.goals-selection p.error {
    margin-top: -20px;
}

.goals-selection .item input+label {
    font-size: 13px;
    font-family: 'Noto Sans JP', sans-serif;
}

.declaration-efforts .upload-image-wrapper {
    margin-top: 32px;
    margin-bottom: 67px;
}

.declaration-efforts .upload-image-wrapper .row-title {
    margin-bottom: 19px;
}

.declaration-efforts .form-table {
    border-bottom: 1px solid #DDDDDD;
}

.btn-upload-img {
    font-size: 13px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 29px;
    color: #1E72BE;
    border-radius: 1px;
    border: 1px solid #1E72BE;
    background: #FAF8F8;
    width: 137px;
    height: 34px;
}

.add-more {
    margin-top: 14px;
}

.add-more a {
    font-size: 13px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 29px;
    color: var(--blue-02);
    text-decoration: none;
}

.declaration-efforts .subtitle {
    padding-bottom: 55px;
}

/* Quick fix for Safari */

select {
    /* -webkit-text-fill-color: rgba(0, 0, 0, 1); */
    -webkit-opacity: 1;
    opacity: 1;
    text-indent: 1px;
}

/* custom select */

select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    outline: none;
}

input,
textarea,
select {
    box-shadow: none;
    outline: none;
}

.select-styled select {
    background: #fff url('./img/icon_arrow_down.svg') no-repeat calc(100% - 16px) 50%;
    border-radius: 3px;
}

/* 4 */

.materiality select {
    width: 193px;
    height: 40px;
    margin-bottom: 20px;
    text-align-last: center;
}

.materiality .form-table {
    border-bottom: 1px solid var(--gray-05);
}

.materiality .subtitle {
    padding-bottom: 50px;
}

/* 5 */

.border-top {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--gray-05);
}

.value-chain .radio-styled {
    display: flex;
    flex-direction: row;
}

.value-chain .radio-styled .item:last-child {
    margin-left: 50px;
    margin-bottom: 25px;
}

.value-chain .row:not(:last-child) {
    border-bottom: 1px solid var(--gray-05);
    margin-bottom: 37px;
    /* padding-bottom: 67px */
}

.value-chain .subtitle {
    padding-bottom: 50px;
}

/* 6 */

.dflex-wrap {
    display: flex;
    flex-wrap: wrap;
    row-gap: 14px;
    column-gap: 40px;
}

.mt70 {
    margin-top: 70px;
}

.mt30 {
    margin-top: 30px;
}

.pb50 {
    padding-bottom: 50px;
}

.value-creation-model .subtitle {
    padding-bottom: 50px;
}

.value-creation-model .form-table .border-bottom {
    border-bottom: 1px solid var(--gray-05);
}

.value-creation-model .specific-efforts {
    margin: 34px 0 29px;
}

.value-creation-model .specific-efforts p:not(:last-child) {
    margin-bottom: 13px;
}

/* Datepicker */
.datepicker table tr td {
    width: 50px;
    height: 50px;
}

.datepicker table tfoot {
    color: var(--blue-02);
}

.form-select {
    text-align: left;
    padding-left: 10px;
}

.cursor-pointer {
    cursor: pointer;
}

p.error {
    color: #D65C5C;
}

.preview-image {
    overflow: hidden;
}

.preview-image img {
    object-fit: cover;
    max-height: 250px;
    max-width: 250px;
}

.modal .preview-image {
    margin-top: -8px !important;
}

.datepicker tfoot tr th:hover {
    background-color: unset;
}

.pdr-35 {
    padding-right: 35px;
}

.dropdown-username {
    padding: 0 24px;
}

.custom-select {
    background: url(./img/dropdown.png) no-repeat right;
    -webkit-appearance: none;
    background-position-x: 99%;
}

.btn-modal-l {
    margin-left: 0.5rem !important;
}

.btn-modal-r {
    margin-right: 0.5rem !important;
}

.disabled {
    pointer-events: none;
    color: #AAA !important;
}

#pills-tab a.nav-link {
    padding: 0.2rem 0 !important;
}
#pills-tab .nav-item:first-child {
    margin-left: 10px;
}


.action-tab {
    align-items: center;
    display: flex;
}

.action-tab svg {
    padding-right: 5px;
}

#modal-conmplete-save-draft .modal-dialog,
#modal-logout .modal-dialog,
#modal-complete .modal-dialog,
#modal-confirm-publish .modal-dialog,
#modal-confirm-delete-user .modal-dialog,
#modal-preview-confirm-remove .modal-dialog,
#modal-confirm-delete .modal-dialog {
    max-width: 600px !important;
}

#modal-preview .modal-dialog {
    min-width: 1111px;
    min-height: 845px;
}

#modal-preview iframe {
    width: 1052px;
    min-height: 688px;
}

#modal-preview .modal-header,
#modal-preview .modal-footer {
    border-bottom: unset !important;
    border-top: unset !important;
}

.text-brown {
    color: #7C7C7C !important;
}

.hide {
    display: none;
}

.show-error-message {
    color: red;
}

.pre-line {
    white-space: pre-line;
}

header .header-right {
    text-align: center;
    display: flex;
}

header .header-right .item {
    padding: 0 16px 0 16px;
}

header .header-right a {
    color: #383839;
    font-size: 14px;
}

.keep-all {
    word-break: keep-all
}

/* Css Login */
.main-container-login {
    width: 600px;
    background: var(--white-01);
    border-radius: 3px;
    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.06);
    margin: 0 auto;
    padding: 110px 0px;
    margin-top: 95px;
    margin-bottom: 60px;
}

.main-container-login .title-login {
    font-size: 36px;
    text-align: center
}

.main-container-login .form-input {
    width: 440px;
    margin: auto;
}

.main-container-login .form-input label {
    font-size: 14px;
}

.main-container-login .login-box {
    width: 440px;
    height: 54px;
    background: linear-gradient(to right, #0BA2DB 0%, #0BA2DB 0%, #9AC818 100%);
    font-size: 16px;
    border-radius: 5px;
    padding: 0;
    margin-top: 35px
}

.register-box.btn {
    width: 440px;
    height: 54px;
    border: 1px solid #1D73BF;
    background-color: white;
    color: black;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    margin-top: 22px;
}

.custom-toast-top-right {
    top: 70px;
    right: 12px;
}

.register-box.btn:hover {
    border: 1px solid #60AEF2;
}

.main-container-login .login-box:hover {
    background-color: #0E85EF;
    color: black;
}

.main-container-login .form-input input::placeholder {
    color: #C6C6C6;
    font-size: 14px;
}

.form-control-contact::placeholder {
    color: #C6C6C6;
    font-size: 14px;
}

.text-forgot-password {
    font-size: 12px;
    text-align: center;
    color: #7C7C7C;
    margin-top: 23px;
    margin-bottom: 28px;
}

.text-or {
    width: 440px;
    text-align: center;
    color: #7C7C7C;
    border-bottom: 1px solid #DDDDDD;
    line-height: 0.1em;
    font-size: 12px;
    margin: 0 auto
}

.text-or span {
    background: var(--gray-01);
    padding: 0 10px;
}

/* Css Register */
.main-container-registration {
    width: 600px;
    background: var(--white-01);
    border-radius: 3px;
    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.06);
    margin: 0 auto;
    padding: 73px 40px 84px;
    margin-top: 95px;
    margin-bottom: 95px;
}

.main-container-login .checkbox-styled .checkbox-register input:not(:checked)+label:before {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: solid 1px #C9C9C9;
    border-radius: 3px;
    background-color: white;
}

.main-container-login .checkbox-styled .checkbox-register input:checked+label:before {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

.main-container-login .checkbox-styled .checkbox-register input:not(:checked)+label:after,
.main-container-login .checkbox-styled .checkbox-register input:checked+label:after {
    top: 9px;
    left: 5px;
}

.main-container-login .form-control {
    box-sizing: border-box;
    height: 50px;
    appearance: auto;
    -moz-appearance: auto;
    -webkit-appearance: auto;
}

.form-charge-name {
    width: 286px;
}

.main-container-login label.user-name {
    margin-top: 40px;
}

.mr-88 {
    margin-right: 88px;
}

input.border-error {
    border: 1px solid red !important;
}

textarea.border-error {
    border: 1px solid red !important;
}

.mt-100 {
    margin-top: 100px;
}

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

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

.mt-56 {
    margin-top: 56px;
}

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

.my-page .sub-container .img-wrapper {
    margin-bottom: 31px;
    padding-left: 54px;
}

.my-page .sub-container .checkbox-styled {
    padding-left: 15px;
}

.my-page .sub-container .img-wrapper {
    margin-bottom: unset;
    padding-left: 40px;
}

.my-page .img-wrapper img {
    width: 240px;
    margin-bottom: 9px;
}

.my-page .expression p,
.select-template-wrapper label {
    font-family: 'Hiragino CNS W3', sans-serif;
    color: var(--black-02);
    font-size: 14px;
    /* letter-spacing: 0.05em; */
    line-height: 24.5px;
}

.expression p {
    width: 326px;
}

.expression-template1 {
    width: 85%;
}

.expression-template2 {
    width: 76%;
}

.my-page .sub-container {
    border-top: unset;
    border-bottom: 1px solid var(--gray-05);
    position: relative;
}

.border-bottom {
    border-bottom: 1px solid var(--gray-05);
}


.border-bottom-none {
    border-bottom: unset !important;
}

.f-14 {
    font-size: 14px !important;
}

.f-13 {
    font-size: 13px;
}

.f-12 {
    font-size: 12px;
}

.f-16 {
    font-size: 16px !important;
}

.my-page .checkbox-styled input:not(:checked)+label:after,
.checkbox-styled input:checked+label:after {
    content: '';
    position: absolute;
    top: 8px;
    left: 3px;
}

.my-page .checkbox-styled input:not(:checked)+label:before {
    background: none;
}

.my-page .checkbox-styled input:not(:checked)+label:before,
.checkbox-styled input:checked+label:before {
    border: 1px solid #CECECE;
    top: 3px;
}

.template-selection {
    display: flex;
}

.template-selection .item {
    width: 45%;
}

.template-selection .link-public {
    width: 50%;
}

.btn-publish {
    background: linear-gradient(to right, #0BA2DB 0%, #0BA2DB 0%, #9AC818 100%);
    width: 147px;
    height: 32px;
    font-size: 14px;
    color: white;
    padding: 0;
}

.btn-certificate {
    width: 236px;
    height: 33px;
    font-size: 14px;
    color: white;
    padding: 0 0px;
}

.btn-certificate.edit-certificate {
    width: 60px;
    font-size: 14px;
    color: white;
    padding: 0 10px;
}

.btn-certificate.create-corporate {
    background-color: #0AA2DA;
    width: 300px;
}

.btn-certificate.create-business {
    background-color: #73BE4E;
    width: 335px;
}

.btn-certificate.btn-checklist {
    width: 220px;
}

.btn-certificate.create-business:hover {
    color: white !important;
}

.btn-certificate.create-corporate:hover {
    color: white !important;
}

.publish-template .btn-open {
    background: linear-gradient(to right, #278E2A 0%, #419A23 30%, #ABCD03 100%);
    width: 147px;
    height: 32px;
    font-size: 14px;
    color: white;
    padding: 0;
}

.my-page .draff-date {
    position: absolute;
    bottom: 9px;
    right: 15px;
    font-size: 12px;
    color: #7C7C7C;
}

.my-page .label-draff {
    color: #383839;
    background-color: #FFFFFF;
    width: 75px;
    height: 24px;
    text-align: center;
    border-radius: 2px;
    font-size: 13px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    border: 1px solid #707070;
}

.preview-template {
    text-align: center;
    align-items: center;
    justify-content: center;
    display: inline-flex;
}

.preview-template:hover::before {
    content: '';
    background: black;
    width: 100%;
    height: 100%;
    opacity: 0.6;
}

.preview-template.disabled-preview:hover label {
    display: none;
}
.preview-template.disabled-preview:hover::before {
    background: none;
    cursor: default;
}

.preview-template label {
    display: none;
}

.preview-template:hover label {
    position: absolute;
    color: white;
    font-size: 14px;
    display: block;
    cursor: pointer;
}

.btn-publish-all {
    height: 40px;
    padding: 0;
}

.btn-delete,.btn-logout,.btn-cancel-registration {
    background: #7C7C7C;
    width: 147px;
    height: 40px;
    font-size: 14px;
    color: white;
    padding: 0;
}

.btn-delete-user {
    background: #7C7C7C;
    width: 147px;
    height: 40px;
    font-size: 14px;
    color: white;
    padding: 0;
}

.btn-close {
    background: white;
    width: 147px;
    height: 38px;
    font-size: 14px;
    color: #383839;
    padding: 0;
    border: 1px solid #383839;
}

.action-template {
    display: flex;
    float: right;
}

.header-title {
    display: flow-root;
}

.header-title .title {
    float: left;
}

.my-page .sub-container.active {
    background-color: #F4FBFF;
}

.modal-custom .modal-dialog {
    border-radius: 10px;
}

.modal-custom .modal-dialog .modal-content {
    padding: 70px 50px 70px 50px;
}

.modal-custom .modal-footer {
    border-top: unset;
    justify-content: center;
}

.modal-custom .modal-content .content {
    font-size: 16px;
    color: #051C01;
}

/* Css Register User Info */
.main-container-login .user-info {
    font-size: 36px;
    text-align: center;
}

.main-container-login .user-information {
    font-size: 14px;
    text-align: center;
    margin-top: 42px;
}

.main-container-login .form-user-info {
    width: 210px;
}

.main-container-login .contact-user-info {
    width: 125px;
}

.main-container-login hr {
    border-top: 1px solid black;
    width: 14px;
}

.main-container-login .strikethrough1 {
    margin-top: 10px;
    margin-left: 15px;
}

.main-container-login .strikethrough2 {
    margin-left: -36px;
    margin-top: 10px;
}

.main-container-login .block-02 {
    margin-left: -50px
}

.main-container-login .block-03 {
    margin-left: 268px;
    margin-top: -52px;
}

.main-container-login .back-url {
    font-size: 14px;
    text-align: center;
    margin-top: 30px;
    color: black;
}

.main-container-login .input-label {
    font-size: 14px;
}

.register-confirm .input-label {
    font-size: 14px;
    color: #B4B4B4;
}

.register-confirm .input-label-contact {
    font-size: 14px;
    color: var(--black-01);
}

.pagination-wrapper {
    display: block;
    line-height: 24px;
}

.pagination-wrapper .btn {
    min-width: 24px;
    height: 24px;
    padding: 0;
    background: #fff;
    border-radius: 3px;
    margin-left: 30px;
    color: #352A2A;
    font-weight: 500;
    font-size: 16px;
}

.pagination-wrapper .btn a {
    padding: .4rem 0.4rem;
    color: #7C7C7C;
}

.pagination-wrapper .btn-prev a,
.pagination-wrapper .btn-next a {
    padding: 0;
}

.pagination-wrapper .btn-prev,
.pagination-wrapper .btn-next {
    border: none;
}

.pagination-wrapper .btn.active {
    min-width: 32px;
    height: 32px;
    background: #383839;
    border-radius: 3px;
    color: white;
}

.pagination-wrapper .btn.active span {
    color: white;
}

.pagination-wrapper .paginator li {
    width: 32px;
    height: 32px;
    border-radius: 3px;
}

.pagination-wrapper .btn span {
    line-height: 24px;
}

.pagination-wrapper .btn.total {
    display: inline-block;
    background: #ffffff;
    color: #707070;
}

.pagination-wrapper .btn:hover {
    opacity: 0.8;
}

.pagination-wrapper p.btn {
    background: none;
    cursor: auto !important;
}

.pagination-wrapper .btn-first,
.pagination-wrapper .btn-start,
.pagination-wrapper .btn-end,
.pagination-wrapper .btn-next,
.pagination-wrapper .btn-prev {
    margin-left: 0;
}

.pagination-wrapper .btn.btn-prev,
.pagination-wrapper .btn.btn-next {
    padding: 0;
    background: none;
}

.pagination-wrapper .btn.btn-prev a,
.pagination-wrapper .btn.btn-next a {
    display: inline-block;
    width: 100%;
}

.pagination-wrapper .btn.btn-prev span i,
.pagination-wrapper .btn.btn-next span i {
    line-height: 24px;
    color: #000000;
}

.pagination-wrapper .btn.btn-prev.disabled,
.pagination-wrapper .btn.btn-next.disabled {
    opacity: 0.6;
}

.pagination-wrapper .btn.btn-prev.disabled:hover,
.pagination-wrapper .btn.btn-next.disabled:hover {
    opacity: 0.6;
}

.pagination-wrapper .btn.active a:hover {
    cursor: default !important;
}

.pagination-wrapper .btn.active a {
    cursor: default !important;
}

.pagination-wrapper li:hover {
    cursor: auto !important;
}

.pagination-wrapper .btn.active span:hover {
    cursor: default !important;
}

.pagination-wrapper .btn.active:hover {
    cursor: default !important;
}

.pagination-wrapper .btn.total:hover {
    cursor: default !important;
}

.pagination-wrapper .btn.total span:hover {
    cursor: default !important;
}

.pagination-wrapper i.la {
    font-size: 28px;
}

.part-pagination {
    margin-top: 10px;
}

.pagination-wrapper .total {
    display: inline-block;
    font-size: 13px;
    padding-right: 15px;
    margin-top: 1px;
    margin-bottom: 10px;
}

.pagination-wrapper .paginator {
    display: flex;
}

.area-paging {
    margin: 64px 0 0 0;
}

.no-border {
    border: unset !important;
}

.note-upload p {
    color: #7C7C7C;
    font-size: 12px;
}

.m-0 {
    margin: 0;
}

.hidden {
    display: none;
}

.bg-error-input {
    background-color: #FFF8F8;
}

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

.list-style-none li {
    list-style: none;
}

.dropdown-menu-center {
    left: -50% !important;
    right: auto !important;
    text-align: center !important;
    transform: translate(-50%, 0) !important;
    top: 30px !important;
}

.action-template .management-link {
    color: #00A0E9;
    text-align: center;
    padding: 10px;
    border-radius: 50px;
    width: 25px;
    height: 25px;
}

.certificate-container .action-template .management-link {
    margin-top: -10px;
}

.certificate-container .dropdown-menu ul li a {
    color: #383839;
}

.certificate-container .dropdown-menu ul li:hover a {
    background-color: #E6F7FF;
    color: var(--blue-02);
}

.certificate-container .dropdown-menu ul li:hover path {
    stroke: var(--blue-02);
}

.action-template .management-link:hover {
    border-radius: 50%;
    background-color: #E8E8E8;
}

.action-template .management-link i {
    cursor: pointer;
}

.dropdown-menu ul {
    cursor: pointer;
}

.dropdown-menu ul li {
    color: #383839;
    font-size: 14px;
    padding: 9px 0 9px 24px;
    cursor: pointer;
    text-align: left;
}

.dropdown-menu ul li:hover {
    background-color: #E6F7FF;
    color: var(--blue-02);
}

.dropdown-menu ul li:hover path {
    stroke: var(--blue-02);
}

.icon-lock {
    background: url('./img/icon_lock.svg') no-repeat;
    width: 25px;
    height: 21px;
}

.icon-lock-small {
    background: url('./img/icon_lock_small.svg') no-repeat;
    width: 15px;
    height: 14px;
}

.icon-pencil-small {
    background: url('./img/icon_pencil_small.svg') no-repeat;
    width: 15px;
    height: 14px;
}

.icon-trash-small {
    background: url('./img/icon_trash_small.svg') no-repeat;
    width: 15px;
    height: 13px;
}

.icon-eye-small {
    background: url('./img/icon_eye_small.svg') no-repeat;
    width: 15px;
    height: 10px;
}

.icon-new-tab {
    background: url('./img/icon_new_tab.png') no-repeat;
    width: 11px;
    height: 11px;
    margin-left: 5px;
    margin-top: 5px;
}

.icon-plus {
    background: url('./img/icon_group.svg') no-repeat;
    width: 14px;
    height: 14px;
}

.dropdown-menu {
    min-width: 111px;
}

.main-container-mypage-detail {
    width: 980px;
    background: var(--white-01);
    border-radius: 3px;
    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.06);
    margin: 0 auto;
    margin-top: 35px;
    margin-bottom: 64px;
    padding-top: 40px;
}

.title-mypage {
    width: 988px;
    margin: 0 auto;
    font-size: 36px;
    margin-top: 73px;
}

.title-mypage .company-name {
    word-break: break-word;
    word-wrap: break-word;
}

.main-container-mypage-detail .user-detail {
    font-size: 36px;
}

.main-container-mypage-detail .form-input {
    width: 640px;
    margin: auto;
}

.main-container-mypage-detail .form-input.form-user {
    width: 91.5%;
}

.main-container-mypage-detail .detail-title {
    margin-top: 56px;
    font-size: 21px;
    color: #1E72BE;
}

.main-container-mypage-detail .login-box {
    width: 440px;
    height: 54px;
    background: linear-gradient(to right, #0BA2DB 0%, #0BA2DB 0%, #9AC818 100%);
    font-size: 16px;
    border-radius: 10px;
    padding: 0;
    margin: 0 auto;
}

.main-container-mypage-detail .border-style {
    border-bottom: solid 1px #DDDDDD;
    display: block;
    margin: 30px auto;
    text-align: center;
    width: 900px;
}

.break-all {
    word-break: break-all;
}

.main-container-mypage-detail .nav-link {
    margin: 30px 30px -20px 30px;
}

.main-container-mypage-detail .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #00A0E9;
    background-color: white;
    font-size: 21px;
}header .header-left

.main-container-mypage-detail .nav-link {
    color: #9F9F9F;
    background-color: white;
    font-size: 21px;
}

.main-container-mypage-detail .tab-information {
    width: 640px;
    margin: 0 auto
}

.main-container-mypage-detail .tab-information .title-info {
    font-size: 14px;
    color: #B4B4B4;
}

.btn-wrapper-footer {
    display: flex;
    justify-content: center;
    margin: 120px 0 70px 0;
}

.my-page-tab .login-box {
    width: 200px;
    height: 56px;
    margin: 0 auto;
    background: linear-gradient(to right, #0BA2DB 0%, #0BA2DB 0%, #9AC818 100%);
    font-size: 16px;
    border-radius: 5px;
    padding: 0;
    margin-bottom: 103px;
}

.display-none {
    display: none;
}

.main-container-mypage-detail hr {
    border-top: 1px solid black;
    width: 14px;
}

.main-container-mypage-detail .strikethrough1 {
    margin-top: 10px;
    margin-left: 25px;
}

.main-container-mypage-detail .strikethrough2 {
    margin-left: -18px;
    margin-top: 10px;
}

.main-container-mypage-detail .block-02 {
    margin-left: -46px
}

.main-container-mypage-detail .block-03 {
    margin-left: 434px;
    margin-top: -52px;
}

.main-container-mypage-detail .my-page-info {
    width: 297px;
}

.main-container-mypage-detail .mb-bottom {
    margin-bottom: 80px;
}

.btn-back-mypage {
    width: 200px;
    height: 56px;
    font-size: 16px;
    color: #383839;
    border: solid 1px #7C7C7C;
    border-radius: 3px;
}

.btn-next-mypage {
    width: 200px;
    height: 56px;
    font-size: 16px;
    background: linear-gradient(to right, #0BA2DB 0%, #0BA2DB 0%, #9AC818 100%);
}

.btn-show-password {
    width: 305px;
    height: 50px;
    border: solid 1px #7C7C7C;
    color: #383839;
    border-radius: 3px;
    background-color: #F5F5F5;
}

.btn-show-password:hover {
    border: solid 1px #1E72BE;
}

.table-title {
    font-size: 14px;
    font-weight: unset;
    color: #B4B4B4;
}

.user-title-text {
    color: #1E72BE;
    font-size: 13px;
}

table .custom-icon {
    width: 0px;
    padding-right: 80px;
}

.header .custom-icon {
    width: 155px;
    margin-left: 30px;
    margin-top: 10px;
}

.header .dropdown-item:hover {
    width: 203px;
}

.header .border-style {
    border-bottom: solid 1px #DDDDDD;
    display: block;
    margin-top: 20px;
    text-align: center;
}

.tab-user .action-template .management-link {
    color: #00A0E9;
    text-align: center;
    padding: 10px;
    border-radius: 50px;
    width: 25px;
}

.header .management-link {
    color: #383839;
    text-align: center;
    padding: 10px 20px 10px 24px;
    border-radius: 50px;
    width: 25px;
    cursor: pointer;
}

.tab-user .dropdown-menu ul li {
    color: #383839;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.main-container-mypage-detail a.nav-link {
    color: #9F9F9F;
    font-size: 21px;
}

.button-action-right {
    position: fixed;
    right: 0;
    bottom: 5%;
}

.btn-save-right {
    width: 120px;
    background: #00A0E9;
    height: 64px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    font-size: 14px;
}

.btn-preview-right {
    width: 120px;
    background: #383839;
    height: 64px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    font-size: 14px;
}

.btn-preview-right:hover {
    color: #FFFFFF !important;
}

.btn-preview-certificate
{
    width: 120px;
    background: #383839;
    height: 64px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    font-size: 14px;
}

.btn-preview-certificate:hover {
    color: #FFFFFF !important;
}

.icon-hidden-password {
    background: url('./img/eye.svg') no-repeat;
    float: right;
    margin-right: 10px;
    margin-top: -30px;
    position: relative;
    z-index: 2;
    width: 22px;
    height: 13px;
}

.icon-show-password {
    background: url('./img/eye_smash.svg') no-repeat;
    float: right;
    margin-right: 10px;
    margin-top: -32px;
    position: relative;
    z-index: 2;
    width: 22px;
    height: 18px;
}

.header .dropdown-menu ul li:hover {
    background-color: #E6F7FF;
    color: #00A0E9;
}

.header .dropdown-menu ul li a {
    color: #383839;
    text-decoration: none;
}

.header .dropdown-menu ul a:hover {
    text-decoration: none;
}

.header .dropdown-menu ul li:hover a {
    color: #00A0E9;
    text-decoration: none;
}

.header .dropdown-menu ul li:hover path,
.header .dropdown-menu ul li:hover g {
    stroke: #00A0E9;
}

.logout-form {
    padding: 10px 0px;
}

.dot {
    height: 10px;
    width: 10px;
    background-color: #000;
    border-radius: 50%;
    display: inline-block;
}

.submit-box
{
    width: 200px;
    height: 56px;
    background: linear-gradient(to right, #0BA2DB 0%, #0BA2DB 0%, #9AC818 100%);
    font-size: 16px;
    padding: 0;
    margin-top: 35px;
    border-radius: 5px;
}

.btn-submit-bottom {
    display: flex;
    justify-content: center;
}

.table th, .table td {
    vertical-align: middle;
}

.login-box {
    width: 440px;
    height: 54px;
    background: linear-gradient(to right, #0BA2DB 0%, #0BA2DB 0%, #9AC818 100%);
    font-size: 16px;
    border-radius: 5px;
    padding: 0;
    margin: 0 auto;
}

.top-60 {
    margin-top: 60px;
}

.btn-back-register {
    width: 440px;
    height: 54px;
    font-size: 16px;
    border-radius: 5px;
    padding: 0;
    border: 1px solid #383839;
    background-color: #F4F4F4;
    color: #383839;
}

.tab-user table th {
    border-top: none;
}

.tab-user .table td, .table th {
    border-top: none;
    border-bottom: 1px solid #DDDDDD;
}

.tab-user .table thead th {
    border-bottom: 1px solid #DDDDDD;
    font-weight: unset;
}

.name-errors {
    width: 210px;
    margin: auto;
}

.design-template-selection {
    margin-bottom: 60px;
}

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

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

::-ms-reveal {
    display: none;
}

.note-password {
    color: #7C7C7C;
}

.role-type-radio span{
    color: #7C7C7C;
}

.header-in-container {
    padding: 48px 40px;
}

.header-in-container p{
    letter-spacing: 1.2px;
    color: var(--blue-02);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24px;
    line-height: 35px;
}

.content-complete {
    letter-spacing: 1.12px;
    color: #333333;
    margin-bottom: 191px;
    font-weight: bold;
}

.content-complete .content-header {
    margin-bottom: 55px;
    font-weight: bold;
    font-size: 20px;
}

.content-complete .content-description {
    font-size: 16px;
    line-height: 25px;
}

.btn-contact {
    border: 1px solid #383839;
    border-radius: 25px;
    padding: 0px 10px;
    color: #383839;
    font-weight: bold;
}

.f-14 {
    font-size: 14px;
}

textarea.form-control {
    padding: 1rem 0.75rem;
}

.header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .header-right {
    align-items: center;
    font-weight: bold;
}

.popover {
    background: #383839 0% 0% no-repeat padding-box;
    opacity: 1
}

.popover .popover-body{
    color: #FFFFFF;
    font-size: 14px;
}

.icon-help {
    background: url('./img/icon_help.png') no-repeat;
    width: 18px !important;
    height: 18px !important;
    border-radius: unset !important;
}

label.icon-help {
    position: absolute;
    margin: 5px 0 0 10px;
    cursor: pointer;
}

.bs-popover-auto[x-placement^=bottom]>.arrow::after, .bs-popover-bottom>.arrow::after {
    border-bottom-color: #383839;
}

label.goal-link {
    background-repeat: no-repeat !important;
    background-size: contain !important;
    width: 96px;
    height: 96px;
    display: inline-flex;
}

.goal-link img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    margin-left: 8px;
    margin-bottom: 8px;
}

.goals-selection .item label.goal-link::before {
    content: '';
    background: #FFFFFF;
    width: 100%;
    height: 100%;
    opacity: 60%;
}

.goals-selection .item label {
    cursor: pointer;
}

.goals-selection .item.disabled label.goal-link::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #383839;
}

.item.disabled img {
    opacity: 30%;
}

.img-checked img {
    border: 3px solid #707070;
}

.img-checked img {
    width: 92px;
    height: 92px;
}

.icon-save-draft {
    background: url('./img/icon_save_draft.svg') no-repeat;
    width: 16px;
    height: 16px;
}

.icon-preview {
    background: url('./img/icon_preview.svg') no-repeat;
    width: 14px;
    height: 14px;
}

/** Media */
.file-area {
    width: 100%;
    position: relative;
}

input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 999;
}

.file-area .file-dummy {
    padding: 25px;
    border: 3px dashed #CECECE;
    border-radius: 1px;
    text-align: center;
    transition: background 0.3s ease-in-out;
    height: 144px;
}

.file-area:hover .file-dummy {
    background: rgb(147 147 147 / 10%);
}

#modal-media-libraries .btn {
    display: inline;
    height: 56px;
    width: 200px;
    margin-top: 16px;
}

.list-media {
    margin: 0;
    padding: 0;
    margin-left: -8px;
}

.list-media li {
    list-style-type: none;
    display: inline-block;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 16px;
    position: relative;
    cursor: pointer;
}

.list-media li.active img {
    border: 2px solid #00A0E9;
    width: 156px;
    height: 76px;
}

.list-media li img {
    vertical-align: middle;
    border-style: none;
    width: 159px;
    height: 80px;
    object-fit: cover;
}

.list-media li .delete, .list-media li .select {
    display: none;
    position: absolute;
}

li.image:hover:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
}

.list-media li:hover .delete, .list-media li.active .delete {
    display: inline-block;
}

.list-media li .delete {
    top: -10px;
    right: -10px;
    cursor: pointer;
}

.list-media .delete {
    background: #383839;
    display: inline-block;
    height: 24px;
    width: 24px;
    border-radius: 50%;
}

.list-media .delete:after {
    content: "";
    background: url('./img/icon-trash-white.png') no-repeat;
    width: 15px;
    height: 18px;
    position: absolute;
    top: 3px;
    left: 5px;
}

.file-details {
    overflow: hidden;
}

.file-details .image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-details .image-preview {
    width: 378px;
    height: 189px;
    display: inline-block;
    padding-right: 32px;
}

.file-details .title {
    font-size: 16px;
    font-family: 'Hiragino CNS W3', sans-serif;
    letter-spacing: 0.8px;
    color: #383839;
    font-weight: bold;
    margin-bottom: 25px;
}

.file-details .image-info {
    display: inline-block;
    width: calc(100% - 410px);
}

#modal-media-libraries .file-details .btn {
    float: right;
    margin-top: 25px;
}

.file-details .info {
    font-size: 13px;
    color: #7C7C7C;
    letter-spacing: 0.65px;
    line-height: 24px;
}

#modal-media-libraries .modal-body  {
    padding: 10px;
}

#modal-media-libraries .modal-content {
    width: auto;
    padding: 0px;
}

#modal-media-libraries .modal-body  {
    padding: 0px 30px 30px 30px;
}

#modal-media-libraries h3 {
    font-size: 16px;
    padding-bottom: 10px;
    color: #7C7C7C;
}

#modal-media-libraries .modal-content hr {
    margin-top: 30px;
    margin-bottom: 35px;
}

#modal-media-libraries .modal-content .from-user {
    margin-bottom: 35px;
}

.modal-content-backdrop {
    background-color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    opacity: 0.8;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.modal-content-backdrop i {
    background: url('./img/drag-file.png') no-repeat center center;
    background-size: contain;
    width: 81px;
    height: 93px;
    position: absolute;
    right: 46%;
    margin-bottom: 90px;
}

.modal-content-backdrop h3 {
    color: #fff;
    font-size: 30px !important;
    padding-top: 130px;
}

#modal-media-libraries .image-wrapper {
    max-height: 600px;
    overflow-y: auto;
    margin-right: -2px;
}
/** End Media */

.footer-fixed .deletes {
    text-align: center;
    position: fixed;
    bottom: -5px;
    left: 80px;
    color: #FFFFFF;
    width: calc(50% - 120px);
    background: #7C7C7C 0% 0% no-repeat padding-box;
    border-radius: 14px 14px 0px 0px;
    opacity: 1;
}

.footer-fixed .deletes:hover {
    color: #FFFFFF !important;
}

.footer-fixed .displays {
    text-align: center;
    position: fixed;
    bottom: -5px;
    right: 80px;
    width: calc(50% - 120px);;
    color: #FFFFFF;
    background: #383839 0% 0% no-repeat padding-box;
    border-radius: 14px 14px 0px 0px;
    opacity: 1;
}

.footer-fixed .displays:hover {
    color: #FFFFFF !important;
}

.icon-unchecked {
    background: url('./img/unchecked.svg') no-repeat;
    width: 22px;
    height: 17px;
}

#modal-preview-template .modal-body {
    margin-top: -18px;
    margin-bottom: -18px;
    /* height: 594px; */
}

#modal-preview-template .modal-body {
    padding: 0;
}

.icon-close-x {
    display: inline-block;
    background: url('./img/icon-close-x.png') no-repeat;
    background-size: contain;
    width: 15px;
    height: 15px;
    margin-top: 5px;
    cursor: pointer;
}

.icon-web {
    display: inline-block;
    background: url('./img/icon-web.png') no-repeat;
    background-size: contain;
    width: 15px;
    height: 17px;
    margin-right: 5px;
    margin-top: 6px;
    cursor: pointer;
}

.active .icon-web {
    background: url('./img/icon-web-active.png') no-repeat;
    background-size: contain;
}

.icon-pdf {
    display: inline-block;
    background: url('./img/icon-pdf.png') no-repeat;
    background-size: contain;
    width: 16px;
    height: 11px;
    margin-right: 5px;
    margin-top: 9px;
    cursor: pointer;
}

.active .icon-pdf {
    background: url('./img/icon-pdf-active.png') no-repeat;
    background-size: contain;
}

.icon-edit-box {
    display: inline-block;
    background: url('./img/icon_edit_box.svg') no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    margin-top: 4px;
    cursor: pointer;
}

.icon-edit {
    display: inline-block;
    background: url('./img/icon-edit.png') no-repeat;
    background-size: contain;
    width: 14px;
    height: 18px;
    margin-right: 5px;
    margin-top: 4px;
    cursor: pointer;
}

.icon-remove {
    display: inline-block;
    background: url('./img/icon-remove.png') no-repeat;
    background-size: contain;
    width: 15px;
    height: 17px;
    margin-right: 5px;
    margin-top: 4px;
    cursor: pointer;
}

.label-edit {
    cursor: pointer;
}

.label-remove {
    margin-right: 40px;
    margin-left: 40px;
    cursor: pointer;
}

#modal-preview-template .modal-header {
    padding: 15px 22px;
}

.label-preview.label-web {
    margin-right: 32px;
}

.label-preview {
    height: 31px;
    margin: 0;
    padding: 2px 16px;
    font-size: 14px;
    font-family: "Hiragino Sans CNS";
    line-height: 31px;
    display: inline-flex;
    cursor: pointer;
    z-index: 1000;
}

.label-preview.active {
    background-color: #00A0E9;
    color: #fff;
    border-radius: 16px;
}

.label-help.label-web {
    margin-right: 32px;
}

.label-help {
    height: 31px;
    margin: 0;
    padding: 0px 16px;
    font-size: 14px;
    font-family: "Hiragino Sans CNS";
    line-height: 31px;
    display: inline-flex;
    cursor: pointer;
}

.label-help.active {
    background-color: #00A0E9;
    color: #fff;
    border-radius: 16px;
}

.img-help {
    text-align: center;
    padding-top: 26px;
    padding-bottom: 26px;
}

.img-help img {
    width: 80%;
}

#modal-help-template .title {
    font-size: 18px;
    margin: 0;
    position: relative;
    left: -16%;
    top: -5px;
}

.file-dummy .title {
    color: #383839;
    font-size: 18px;
}

.file-dummy .or {
    font-size: 14px;
}

.note-title {
    letter-spacing: 0.7px;
    color: #7C7C7C;
    font-size: 14px;
}

.select-preset {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    float: left;
    margin-right: 25px;
    margin-bottom: 20px;
}

.select-preset.active {
    border: 1px solid #00A0E9;
    width: 34px;
    height: 34px;
}

.select-preset label {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 0;
    cursor: pointer;
}

.select-preset .preset_black {
    background-color: #111111;
}

.select-preset .preset_grey {
    background-color: #C4C4C4;
}

.select-preset .preset_red {
    background-color: #F84C4C;
}

.select-preset .preset_blue {
    background-color: #3777F0;
}

.select-preset .preset_green {
    background-color: #44C762;
}

.select-preset .preset_yellow {
    background-color: #EDE520;
}

.select-preset .preset_orange {
    background-color: #F8A24B;
}

.select-preset .preset_pink {
    background-color: #FF96BB;
}

.select-preset .preset_purple {
    background-color: #C382F2;
}

.select-preset .preset_brown {
    background-color: #C69B60;
}

.img-preset {
    border: 1px solid #C9C9C9;
}

.img-preset img {
    width: 100%;
}

.btn-confirm-close {
    border: 1px solid #383839 !important;
    color: #383839;
    margin: 4px;
}

.btn-confirm-submit {
    color: #fff;
    background: #7C7C7C;
    margin: 4px;
}

.label-next {
    position: absolute;
    top: 53%;
    right: 60px;
    z-index: 10;
}

.label-prev {
    position: absolute;
    top: 53%;
    left: 60px;
    z-index: 10;
}

.icon-next {
    background: url('./img/icon-next.png') no-repeat;
    width: 32px;
    height: 32px;
    display: inline-block;
    cursor: pointer;
}

.icon-prev {
    background: url('./img/icon-prev.png') no-repeat;
    width: 32px;
    height: 32px;
    display: inline-block;
    cursor: pointer;
}

.label-navigation {
    position: absolute;
    bottom: 25px;
    right: 50px;
    z-index: 10;
}

.icon-nav {
    width: 10px;
    height: 10px;
    background-color: #9F9F9F;
    display: inline-block;
    margin-right: 8px;
    border-radius: 50%;
    cursor: pointer;
}

.icon-nav.active {
    background-color: #00A0E9;
}

.label-private,
.label-public {
    margin-right: 40px;
    cursor: pointer;
}

.label-private svg {
    margin-top: -5px;
}

.label-public svg {
    margin-top: -3px;
}

.label-edit svg,
.label-remove svg {
    margin-bottom: 3px;
}

.label-edit:hover,
.label-remove:hover,
.label-private:hover,
.label-public:hover {
    color: var(--blue-02);
}

.label-edit:hover path,
.label-remove:hover path,
.label-private:hover path,
.label-public:hover path {
    stroke: var(--blue-02);
}

#modal-preview-slider .modal-body {
    margin-top: -34px;
    margin-bottom: -34px;
    height: 594px;
}

#modal-preview-slider .pv-col-3 .img-wrapper img {
    width: 63px;
    height: 63px;
    margin-bottom: 8px;
}

#modal-preview-template .pv-col-3 .img-wrapper img {
    width: 63px;
    height: 63px;
    margin-bottom: 8px;
}

#modal-preview-slider .layout-pdf .pv-col-2 ul:before {
    top: 13px;
}

#modal-preview-slider .layout-preview {
    overflow-x: hidden;
}

#modal-preview-template .layout-preview {
    overflow-x: hidden;
}

#modal-preview-slider .slider-step {
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    position: relative;
    top: 0;
    right: 0;
}

#modal-preview-template .slider-step {
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    position: relative;
    top: 0;
    left: 0;
}

#modal-preview-slider .slider-step.hide {
    display: inline-block !important;
    position: fixed;
    right: -1500px;
    height: 0px;
    overflow: hidden;
}

#modal-preview-slider .slider-step.right.hide {
    right: 1200px;
}

.layout-help {
    max-height: 572px;
    margin: auto;
    overflow-y: scroll;
    -webkit-transform: scale(0.8);
}

@media (min-width: 1200px) {
    #modal-preview-slider .modal-xl {
        max-width: 1234.5px;
    }

    #modal-preview-template .modal-xl {
        max-width: 1234.5px;
    }
}

@media (min-width:1200px) and (max-width:1400px) {
    .modal-scale {
        -webkit-transform: scale(0.9) !important;
    }
}

@media (min-width:1600px) and (max-width:2200px) {
    .modal-scale {
        -webkit-transform: scale(1.2) !important;
    }
}

@media (min-width:2201px) and (max-width:2600px) {
    .modal-scale {
        -webkit-transform: scale(1.5) !important;
    }
}

@media (min-width:2601px) {
    .modal-scale {
        -webkit-transform: scale(1.7) !important;
    }
}

#modal-confirm-publish,
#modal-confirm-private {
    z-index: 2000;
}

.preview-template1 {
    background-image: url('/assets/css/frontend/img/image_1.jpg');
    width: 240px;
    height: 125px;
    background-size: cover;
}

.preview-template2 {
    background-image: url('/assets/css/frontend/img/image_2.jpg');
    width: 240px;
    height: 125px;
    background-size: cover;
}

.preview-template3 {
    background-image: url('/assets/css/frontend/img/image_3.jpg');
    width: 240px;
    height: 125px;
    background-size: cover;
}

.preview-template4 {
    background-image: url('/assets/css/frontend/img/image_4.jpg');
    width: 240px;
    height: 125px;
    background-size: cover;
}

.main-footer {
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 56px 0 54px 0;
    height: 104px;
    background-color: #6F6F6F;
    width: 100%;
    bottom: 0;
}

.logo-footer {
    background: url('/assets/css/frontend/img/logo_footer.svg') no-repeat;
    width: 274px;
    height: 50px;
    background-size: contain;
}

.privacy-policy a {
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    margin-top: 37px;
    justify-content: center;
}

.position-absolute {
    position: absolute;
}

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

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
       .list-media li img {
           width: 156px;
       }
    }
}

.paging-slider1 {
    margin-bottom: 50px !important;
    padding-bottom: 400px !important;
}

.paging-slider2 {
    padding-top: 40px !important;
    border-radius: 0 !important;
    padding-bottom: 400px !important;
}

.certificate-container .certificate-name {
    width: 100%;
    text-align: left;
    font-size: 14px;
}

.certificate-container .certificate-item {
    height: 70px;
    border-bottom: solid 2px #C1C1C1;
    color: #383839;
    margin-top: 16px;
    padding: 16px;
}

.certificate-item-action {
    display: flex;
    justify-content: space-between;
}

.action-top {
    max-width: 1056px;
    margin: auto;
    height: 60px;
    padding-top: 25px;
    margin-bottom: -100px;
}

.action-top .action-left {
    float: left;
}

.action-top .action-left .btn-export-pdf {
    color: #212529 !important;
    padding: 0px 10px;
    border: 1px solid #212529;
    border-radius: 5px;
    margin-left: 0px !important;
}


.action-top .action-right {
    float: right;
}

.action-top .action-right .btn-certificate-back {
    color: #212529 !important;
    padding: 0px 20px;
    border: 1px solid #212529;
    border-radius: 5px;
}

.action-top .action-right .btn-edit {
    color: #ffffff;
    padding: 0px 20px;
    border-radius: 5px;
    background-color: #00A0E9;
}

.sub-container .subtitle {
    padding-top: 30px;
    padding-bottom: 0px;
    text-align: center;
}

.row-number .row-title {
    text-align: left;
    margin: 0 !important;
}

.row-number .row-title .label-number {
    padding: 5px;
    font-size: 20px;
}

.form-table .row-number>div:first-child {
    width: 100px;
    text-align: center;
}

.form-table .row-number>div:nth-child(2) {
    width: calc(100% - 100px);
}

.form-table .inputs table {
    width: calc(100% - 17px);
}

.form-table .inputs .table td, .table th {
    padding: 0.5rem;
    font-size: 13px;
}

.form-table .inputs .table td input {
    width: 83%;
}

.form-table .background-mute {
    background-color: #f2f2f2;
}

.table-no-boder td, .table th {
    border: unset;
}

.table-no-boder td input {
    width: 90% !important;
}

.c-certificate .title {
    color: #383839;
}

.certificate-container {
    background-color: #F7F7F7;
    padding: 32px;
    min-height: 200px;
    border-radius: 2px;
}

.certificate-container .sub-container {
    border-bottom: unset !important;
}

.certificate-container .title-corporate {
    color: #0AA2DA;
    font-size: 18px;
    margin-bottom: 32px;
    font-weight: bold;
}

.certificate-container .title-business {
    color: #73BE4E;
    font-size: 18px;
    margin-bottom: 24px;
}

.btn-certificate.btn-action {
    height: 32px;
    color: #FFFFFF;
    margin-top: 16px;
    background: #0AA2DA 0% 0% no-repeat padding-box;
    border-radius: 2px;
    opacity: 1;
    font-size: 13px;
}

.btn-edit-certificate {
    width: 74px;
}

.form-table .row-number input,
.form-table .row-number textarea {
    width: calc(95% - 19px);
}

.form-table .row-number .inputs {
    position: relative;
}

.level-checklist {
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
}

.level-checklist .level {
    padding: 7px 16px;
    border: 1px solid #D0D0D0;
    font-size: 14px;
    height: 18px;
    position: relative;
}

.level-checklist .level .level-none {
    position: absolute;
    border-top: 1px solid #707070;
    width: 16px;
    top: 15px;
    left: 65px;
    text-align: center;
}

.level-checklist .level.approve .level-none {
    position: unset;
    border-top: none;
    width: auto;
    top: 15px;
    left: 65px;
}

.level-checklist > :first-child {
    border-right: none;
}

.level-checklist .active {
    background-color: #0AA2DA;
    color: #FFFFFF;
    width: 105px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}

.level-checklist .level-content {
    width: 122px;
}

.main-certificate-checklist {
    padding: 0px 40px 0px 40px;
}

.main-certificate-checklist .checklist {
    display: flex;
}

.main-certificate-checklist .checklist > :first-child {
    margin-right: 40px;
}


.main-certificate-checklist .checklist .checklist-type {
    font-size: 18px;
    color: #9D9D9D;
}

.main-certificate-checklist .checklist .checklist-type.active-blue {
    color: #0AA2DA;
}

.main-certificate-checklist .checklist .checklist-type.active-green {
    color: #73BE4E;
}

.main-certificate-checklist .level-star {
    display: flex;
    margin-top: 17px;
}

.main-certificate-checklist .level-star .star-item {
    width: 212px;
    text-align: center;
    height: 100px;
    border: 1px solid #F7F7F7;
    margin-right: 15px;
    background-color: #F7F7F7;
    display: grid;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.main-certificate-checklist .level-star .star-item.active{
    border: 2px solid #0AA2DA;
}

.main-certificate-checklist .level-star .star-item span {
    font-size: 14px;
    color: #383839;
    padding-bottom: 20px;
}

.main-certificate-checklist .level-star .star-item div {
    margin-top: 20px;
}

.main-certificate-checklist .level-star > :last-child {
    margin-right: 0px;
}

.icon-star-lv1 {
    background: url('./img/star_lv_1.svg') no-repeat;
    width: 103px;
    height: 19px;
}

.icon-star-lv2 {
    background: url('./img/star_lv_2.svg') no-repeat;
    width: 103px;
    height: 19px;
}

.icon-star-lv3 {
    background: url('./img/star_lv_3.svg') no-repeat;
    width: 103px;
    height: 19px;
}

.icon-star-lv4 {
    background: url('./img/star_lv_4.svg') no-repeat;
    width: 103px;
    height: 19px;
}

.main-certificate-checklist .guide {
    display: flex;
    margin-top: 17px;
    margin-bottom: 16px;
    font-size: 13px;
}

.main-certificate-checklist .guide .guide-item {
    display: flex;
    margin-right: 40px;
}

.main-certificate-checklist .guide .guide-item .box-pink {
    width: 23px;
    height: 23px;
    background-color: #FFF2F2;
    border: 1px solid #D0D0D0;
}

.main-certificate-checklist .guide .guide-item .box-blue {
    width: 23px;
    height: 23px;
    background-color: #F2FCFF;
    border: 1px solid #D0D0D0;
}

/* .main-certificate-checklist .guide .guide-item .box-red {
    width: 23px;
    height: 23px;
    box-shadow: 0px -1px 6px #FF1D1D;
    border: 1px solid #FF0000;
} */

.main-certificate-checklist .background-brown {
    background-color: #F7F7F7;
}

.main-certificate-checklist .background-pink {
    background-color: #FFF2F2;
}

.main-certificate-checklist .background-blue {
    background-color: #F2FCFF;
}

/* .main-certificate-checklist .background-grey {
    background-color: #F7F7F7;
} */

.main-certificate-checklist .checkbox-styled input:checked+label:after {
    background: url('./img/check_icon_white.svg') no-repeat center center;
    background-size: contain;
    width: 15px;
    height: 9px;
}

.main-certificate-checklist .checkbox-styled input:checked+label:before {
    background: #5D5D5D;
}

.main-certificate-checklist .checkbox-styled input:not(:checked)+label,
.main-certificate-checklist .checkbox-styled input:checked+label {
    padding-bottom: 10px;
}

.main-certificate-checklist .checkbox-styled input:not(:checked)+label:before,
.main-certificate-checklist .checkbox-styled input:checked+label:before {
    width: 20px;
    height: 20px;
}

.main-certificate-checklist .checkbox-styled input:not(:checked)+label:before {
    background: #FFFFFF;
}

.main-certificate-checklist .checkbox-styled input:not(:checked)+label:after,
.main-certificate-checklist .checkbox-styled input:checked+label:after {
    top: 10px;
    left: 3px;
}

.main-certificate-checklist table tr .tag {
    width: 50px;
    border-radius: 14px;
    margin-left: 25px;
    padding: 4.3px 0;
}

.main-certificate-checklist table tr .tag.pink {
    background-color: #FFCBCB;
}

.main-certificate-checklist table tr .tag.yellow {
    background-color: #FDEE9F;
}

.btn-judgement {
    width: 200px;
    height: 56px;
    font-size: 16px;
    background: linear-gradient(to right, #0BA2DB 0%, #0BA2DB 0%, #9AC818 100%);
    margin: auto;
    margin-top: 55px;
    margin-bottom: 32px;
}

.main-certificate-checklist .info-checklist {
    display: flex;
    justify-content: center;
}

.main-certificate-checklist .info-checklist .info-item {
    width: 160px;
    height: 50px;
    border: 1px solid #D0D0D0;
    font-size: 14px;
    margin-right: 16px;
    display: flex;
}

.info-checklist .info-item .label-info {
    background-color: #F7F7F7;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-checklist .info-item .conten-info {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-certificate-checklist .info-checklist .text-blue {
    color: #0AA2DA !important;
}

.f-20 {
    font-size: 20px;
}

.main-certificate-checklist .company-profile {
    margin-top: 66px;
}

.main-certificate-checklist .company-profile .title {
    font-size: 18px;
    color: #383839;
}

.main-certificate-checklist .company-profile .note {
    font-size: 14px;
    color: #7C7C7C;
}

.main-certificate-checklist .company-profile .box-info {
    background-color: #F7F7F7;
    border-radius: 6px;
    margin-top: 16px;
    padding-bottom: 12px;
    padding-top: 32px;
    margin-bottom: 72px;
}

.main-certificate-checklist .form-table .inputs input,
.main-certificate-checklist .form-table .inputs textarea {
    width: calc(100% + 75px);
}

.main-certificate-checklist .form-table .row>div:first-child {
    width: 120px;
    margin-left: 40px;
}

.main-certificate-checklist .form-table .row>div:nth-child(2) {
    width: calc(100% - 280px);
}

.main-certificate-checklist .div-export-pdf {
    margin-top: 3px;
}

.btn-print {
    border-radius: 28px;
    background-color: #6F6F6F;
    width: 200px;
    height: 40px;
    margin: auto;
}

.btn-print:disabled {
    opacity: 1 !important;
    pointer-events: none;
}

.main-certificate-checklist .input-name {
    height: 26px;
    border-radius: 3px;
    margin-top: 17px;
    max-width: 874px;
}

.icon-check {
    background: url('./img/icon_check.svg') no-repeat;
    width: 16px;
    height: 16px;
}

.icon-list {
    background: url('./img/icon_list.svg') no-repeat;
    width: 14px;
    height: 16px;
}

.vertical-align-top {
    vertical-align: top !important;
}

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

.btn.disabled, .btn:disabled {
    opacity: 0.45;
}

.warning-certificate {
    color: #7C7C7C;
    font-size: 12px;
    margin-bottom: 20px;
    margin-top: -10px;
}

.action-row-number {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
}

.action-row-number .add-goal {
    background-color: #BCBCBC;
    width: 16px;
    height: 16px;
    color: #FFFFFF;
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: -26px;
    cursor: pointer;
}

.action-row-number .remove-goal {
    background-color: #BCBCBC;
    width: 16px;
    height: 16px;
    color: #FFFFFF;
    border-radius: 50%;
    position: absolute;
    right: -20px;
    top: -26px;
    cursor: pointer;
}

.action-row-number>div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-family: 'Noto Sans JP', sans-serif;
}

.c-certificate select {
    width: 96%;
    /* height: 100px; */
    margin-bottom: 20px;
    text-align-last: left;
    padding-left: 10px;
}

.show {
    display: unset !important;
}

.table-level {
    display: none;
    font-size: 14px;
}

.c-certificate .checkbox-styled {
    padding-left: 0px !important;
}

.c-certificate .checkbox-styled label {
    margin-bottom: 19px;
    margin-left: 20px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 10px !important;
}

.select2-container--default {
    margin-bottom: 15px !important;
}

.btn-preview-right:disabled {
    opacity: 1 !important;
    pointer-events: none;
}

.inputs.checkbox-styled{
    cursor: default;
}

.box-td-center {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.box-td-end {
    padding-left: 24px !important;
}

.c-certificate .nav-item {
    margin-right: 16px;
    font-size: 16px;
    width: 160px;
    height: 56px;
    text-align: center;
    letter-spacing: 0.8px;
}

.c-certificate .nav-item .nav-link {
    background-color: #E3E3E3 !important;
    color: #B5B5B5 !important;
    height: 56px;
    padding: 0;
    border-radius: unset;
    border-color: unset;
    border: unset;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-certificate .nav-item .nav-link.active {
    background-color: #F7F7F7 !important;
    color: #0AA2DA !important;
    border-color: unset;
    border: unset;
}

.c-certificate .nav-tabs {
    border: none;
}

#myTabContent {
    background: #F7F7F7;
    padding: 25px 18px 30px 32px;
    border-radius: 6px;
    margin-bottom: 56px;
}

.btn-save-certificate:hover,
.btn-print:hover,
.btn-save-year:hover {
    color: #FFFFFF;
}

.c-certificate .layout-preview.layout-pdf {
    padding-bottom: 20px;
}


.c-certificate input::placeholder,
.c-certificate textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #9D9D9D;
}

.layout-preview.layout-pdf .table-corporate-bottom {
    margin-bottom: 0px;
}

.table-corporate-form {
    margin: 0 0 20px 0px;
    width: 99%;
}

.table-corporate-form td{
    border: unset !important;
    padding: 4px !important;
}

.table-corporate-form input {
    width: calc(100% - 20px);
    border-radius: 3px;
    border: 1px solid #C9C9C9;
    padding: 8px;
    font-family: 'Hiragino CNS W3', sans-serif;
}

.note-checklist {
    margin-top: 16px;
    margin-bottom: 24px;
    font-size: 13px;
    display: none;
}

.note-level {
    margin-top: 16px;
    margin-bottom: 24px;
    font-size: 13px;
}

.btn-preview-certificate:disabled {
    opacity: 1 !important;
    pointer-events: none;
}

.c-certificate .input-checkbox input:checked+label:after,
.c-certificate .input-checkbox-business input:checked+label:after {
    background: url('./img/check_icon_white.svg') no-repeat center center;
    background-size: contain;
    width: 15px;
    height: 9px;
}

.c-certificate .input-checkbox input:checked+label:before,
.c-certificate .input-checkbox-business input:checked+label:before {
    background: #0AA2DA;
}

.c-certificate .input-checkbox input:not(:checked)+label,
.c-certificate .input-checkbox input:checked+label,
.c-certificate .input-checkbox-business input:not(:checked)+label,
.c-certificate .input-checkbox-business input:checked+label {
    padding-bottom: 10px;
}

.c-certificate .input-checkbox input:not(:checked)+label:before,
.c-certificate .input-checkbox input:checked+label:before,
.c-certificate .input-checkbox-business input:not(:checked)+label:before,
.c-certificate .input-checkbox-business input:checked+label:before {
    width: 20px;
    height: 20px;
}

.c-certificate .input-checkbox input:not(:checked)+label:before,
.c-certificate .input-checkbox-business input:not(:checked)+label:before {
    background: #FFFFFF;
}

.c-certificate .input-checkbox input:not(:checked)+label:after,
.c-certificate .input-checkbox input:checked+label:after,
.c-certificate .input-checkbox-business input:not(:checked)+label:after,
.c-certificate .input-checkbox-business input:checked+label:after {
    top: 10px;
    left: 3px;
}

.c-certificate .form-table .input-label {
    font-weight: bold;
}

.input-checkbox {
    border-bottom: 1px solid #E6E6E6;
    display: flex;
}

.input-checkbox .label-input-checkbox {
    min-width: 176px;
}

.checkbox-item {
    margin-right: 10px;
}

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

.layout-preview.layout-pdf {
    position: relative;
}

.row-attempt-title {
    display: none;
}

.sub-container.no-data {
    min-height: 100px;
}

.c-certificate select:invalid {
    color: #9D9D9D !important;
}

.c-certificate select > option {
    color: black;
}

.c-certificate select option[value=""], select option:not([value]) {
    color: #9D9D9D !important;
}

.vertical-top {
    vertical-align: top !important;
}

/* .table-bordered .border-red>td:nth-child(1) {
    border-top: 2px solid #FF1D1D;
    border-bottom: 2px solid #FF1D1D;
    border-left: 2px solid #FF1D1D;
}

.table-bordered .border-red>td:nth-child(2) {
    border-top: 2px solid #FF1D1D;
    border-bottom: 2px solid #FF1D1D;
}

.table-bordered .border-red>td:nth-child(3) {
    border-top: 2px solid #FF1D1D;
    border-bottom: 2px solid #FF1D1D;
    border-right: 2px solid #FF1D1D;
} */

.btn-export-pdf-draft {
    width: 200px;
    height: 40px;
    background: #6F6F6F;
    border-radius: 28px;
}

/* wb 6988 */
#modal-preview-slider .modal-content,
#modal-preview-template .modal-content {
    height: 642px;
}

#modal-preview-slider .modal-dialog,
#modal-preview-template .modal-dialog {
    margin-top: 55px;
}

.layout-preview.layout-web {
    max-height: 940px;
    border: 1px solid #CBCBCB;
    overflow-y: scroll;
    -webkit-transform:scale(0.518);
    -moz-transform-scale(0.518);
    margin-top: -160px !important;
}

.layout-preview.layout-pdf {
    max-height: 730px;
    border: 1px solid #CBCBCB;
    overflow-y: scroll;
    -webkit-transform: scale(0.669);
    -moz-transform-scale(0.518): ;
    margin-top: -57px !important;
}

.layout-preview.layout-web .page-container {
    min-height: 780px;
}

.layout-preview.layout-pdf .contribution.keep-together {
    min-height: 720px;
}

.declaration-lead-statement input::placeholder, textarea::placeholder {
    color: #9F9F9F;
    font-size: 16px;
}

.title-certificate {
    margin-bottom: 30px;
    font-size: 24px;
}

.btn-delete-year {
    margin-right: 10px;
    font-size: 30px;
}

.title-list-certificate {
    font-weight: bold;
    color: #0AA2DA;
    font-size: 18px;
}

.title-certificate .create-year {
    background-color: #0AA2DA;
    width: 112px;
    font-weight: bold;
}

.certificate-item .year {
    color: #383839;
    font-size: 14px;
    font-weight: bold;
}

.remove-year {
    color: black;
    font-size: 14px;
    outline: none;
}

.btn-certificate.priority {
    width: 217px;
    height: 33px;
    border-radius: 16px;
    font-size: 13px;
    color: white;
    opacity: 100%;
    background-color: #7E7E7E;
    padding: 0 0px;
}

.icon-download {
    background: url('./img/icon_download.svg') no-repeat center;
    width: 15px;
    height: 15px;
}

.icon-delete-history {
    background: url('./img/icon_delete_history.svg') no-repeat center;
    width: 20px;
    height: 20px;
}

.btn-certificate.progress {
    width: 150px;
    height: 33px;
    border-radius: 16px;
    font-size: 13px;
    color: white;
    opacity: 100%;
    background-color: #7E7E7E;
    padding: 0 0px;
}

.btn-certificate.new-progress {
    background-color: #0AA2DA;
    width: 168px;
}

.certificate-container .certificate-item.new {
    background-color: #FFFFFF;
    border-bottom: unset;
}

.btn-save-year {
    border-radius: 28px;
    background-color: #0AA2DA;
    width: 200px;
    height: 40px;
    margin: auto;
}

.certificate-container .certificate-item:last-child {
    border-bottom: unset;
}

.certificate-container .certificate-item.old {
    margin-top: 30px;
    padding-left: unset;
}

.form-table.certificate-process .row {
    margin-left: unset;
}

.form-table.certificate-process .row>div:first-child {
    width: 80px;
    margin-right: 10px;
    margin-top: 15px;
}

.form-table.certificate-process .row>div:nth-child(2) {
    width: calc(100% - 90px);
}

.form-table.certificate-process .inputs input {
    height: 35px;
}

.form-table.certificate-process .inputs input {
    width: calc(100% - 15px);
}