.cbx-custom {
    float: left !important;
    position: relative !important;
    margin-top: 5px;
    opacity: 1 !important;
    overflow: unset !important;
    z-index: 1 !important;
}
.header-main{display: none;}
.cbxl-label-custom {
    float: left;
    position: relative;
    margin-top: 5px;
    padding: 0 0 0 5px;
}
.checkbox-el {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.cbxl-label-custom::before {
    content: none;
}

.pf-title {
    font-size: 15px;
    text-align: left;
}

/*.repeater-item {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}*/

.selectpicker {
    border-color: red !important;
}
#frmRegister4 input[type=text], #frmRegister4 input[type=number] {
    padding: 0.375rem 0.75rem;
    border: 1px solid #B0BEC5 !important;
}

.select2-selection--single {
    min-height: calc(2.25rem + 2px) !important;
    border: 1px solid #ced4da !important;
    /*padding-top: 4px;*/
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 6px;
}

/*    .bootstrap-select .dropdown-toggle {
        height: 0 !important;
        min-height: calc(2.25rem + 2px) !important;
        border: 1px solid #ced4da !important;
    }*/

.bootstrap-select .dropdown-toggle .filter-option {
    height: auto !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #e4e4e4;
}

.bootstrap-select .dropdown-menu {
    max-width: 100%;
}

:root {
    --cs-color: #5F34D9;
    --cs-gray: #B0BEC5;
}

.item-col-title {
    padding-bottom: 1em;
}

.nav-link {
    padding: 8px;
    color: black;
    border: 1px solid #ddd;
    border-radius: 0;
    border-collapse: collapse;
    justify-content: center;
    /*display: grid;
    place-items: center;*/
}

.pref-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 14px 10px
}

.work-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 12px 30px;
}

.nav-pills .nav-link, .nav-pills .nav-link {
    border-radius: 0;
    color: var(--cs-gray);
}

.nav-link:hover {
    color: var(--keycolor);
    border: 1px solid var(--keycolor) !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    box-sizing: border-box;
    border: 1px solid var(--keycolor) !important;
    color: var(--keycolor);
    background-color: transparent;
}

.bootstrap-select > .dropdown-toggle.btn-light, .bootstrap-select > .dropdown-toggle.btn-secondary {
    background-color: transparent;
    color: #575962;
    border-color: #ebedf2;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.bootstrap-select .dropdown-toggle {
    height: 0 !important;
    min-height: calc(2.25rem + 2px) !important;
}

.bootstrap-select > .dropdown-toggle.btn-light.active, .bootstrap-select > .dropdown-toggle.btn-light:focus, .bootstrap-select > .dropdown-toggle.btn-secondary.active, .bootstrap-select > .dropdown-toggle.btn-secondary:focus {
    background-color: transparent !important;
}


/*.exp-wrapper {
    max-width: inherit;
    margin: auto;
    position: relative;
    display: inline-block;
}*/

.number-of-year {
    padding-right: 35px;
}

.exp {
    position: absolute;
    top: 8px;
    right: 50px;
}

.skill-close-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}
/*.m-close-btn {
    display: none;
}

.skill-line:hover .m-close-btn{
    display: block;
}*/
/*.m-close-btn {
    opacity: 0.2;
}

    .m-close-btn:hover {
        opacity: 1;
    }*/
/*.form-group {
    margin-bottom: 2rem;
}*/
.sticky-wrapper {
    display: none;
}

body {
    background-color: #F4F7F9;
}
*:not(i) {
    font-family: "Noto Sans JP", sans-serif !important;
}
.signin-popup-box h3{
    font-weight: 600;
    font-size: 2.25rem;
}
.register-note{
    margin: 1.5rem 0;
    text-align: left;
    font-size: 1rem;
}

.account-popup{
    width: 600px !important;
}

.form-register{
    background: #ffffff;
    padding: 3rem 5.25rem;
}
.pf-title{
    font-size: 0.875rem;
    font-weight: 700;
    text-wrap: wrap;
}
.form-register input[type=text]:not(.bs-searchbox input[type=text]), .form-register input[type=password], .form-register input[type=number] {
    height: 3.3125rem;
    border: 1px solid #B0BEC5 !important;
}
.form-register textarea {
    border: 1px solid #B0BEC5 !important;
    font-size: 0.875rem !important;
}
.text-align-left{
    text-align: left !important;
}
.form-label-custom {
    color: #333;
    /* Small_bold */
    font-family: Noto Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}
.gap-8px{
    gap: 8px;
}
input[type=checkbox] {
    position: relative;
    box-sizing: border-box;
    border: 1px solid #ABB5BE;
    border-radius: 2px;
    background: none;
    cursor: pointer;
    line-height: 0;
    margin: 0 .6em 0 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 20px;
    width: 20px;
    -webkit-appearance: none;
    opacity: .5;
}

input[type=checkbox]:hover {
  opacity: 1;
}

input[type=checkbox]:checked {
    border-color: #5F34D9;
    background-color: #5F34D9;
    opacity: 1;
}

input[type=checkbox]:before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 4px;
  height: 10px;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  margin: -1px -1px 0 -1px;
  transform: rotate(45deg) translate(-50%, -50%);
  z-index: 2;
}
#btn-register {
    margin: 1.5rem 0;
    width: 100%;
    background: var(--keycolor);
    padding: 1rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
.link-color {
    color: #348AD9;
}
.btn-disabled {
    background: #CFD8DC !important;
}
.register-logo{padding: 1.875rem 0; background:#ffffff;}
.register-success-content p{font-size: 1rem; text-align: left; margin-bottom: 24px;}
.account-popup{padding: 0;}
.notif-register-success .form-register, .final-register-success .form-register {
    padding: 3rem 2.5rem;
}
.register-step-2 .account-popup, .register-step-3 .account-popup{width: 960px !important;}
.register-final .account-popup {
    width: 800px !important;
}
.remove-bottom{max-width: 100%}
.account-popup-area.static{overflow-x: hidden}
select {
    border: 1px solid #B0BEC5 !important;
    height: 3.3125rem !important;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("/Content/images/Icons/select_arrow_down.png");
    background-position: calc(100% - 20px) calc(1em + 9px), calc(100% - 15px) calc(1em + 2px), calc(100% - .5em) .5em;
    background-repeat: no-repeat;
}
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
.selected-pref-group, .selected-pref, .btn-attachment {
    width: 100%;
    max-width: 18.75rem;
    height: 3.5rem;
    text-align: center;
}
.attachment-label {
    max-width: 18.75rem;
    width: 100%;
}
.btn-attachment {
    color: var(--cs-color) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.selected-pref, .selected-pref:focus, .btn-attachment {
    border: 1px solid #5F34D9;
    border-radius: 4px !important;
}
.selected-pref:hover{cursor: pointer}

.btn-custom-parent {
    display: block;
    width: 100%;
    text-align: center;
}
.btn-custom{
    background: var(--cs-color) !important;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    float: unset !important;
    height: 3.5rem;
    border: 4px;
}
.w-50{
    width: 50% !important;
}
.clear-both{clear:both}
#files-names .file-name-item{border: 1px solid #B0BEC5 !important;margin-top: 15px;padding:10px;border-radius: 4px;}
.select2-selection__rendered {
    line-height: 2.25rem !important;   
}

.select2-container .select2-selection--single {
    height: 2.25rem !important;
}

.select2-selection__arrow {
    height: 2.25rem !important;
}
.select2-container--default {
    border: 1px solid #B0BEC5 !important;
    border-radius: 4px;
}

.select2-selection--multiple:before, .select2-selection--single:before {
    content: url("/Content/images/Icons/select_arrow_down.png");
    position: absolute;
    right: 15px;
    top: 15px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: #348AD9;
    color: white;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}
.select2-container .select2-selection--single{height: 3.3125rem !important}
.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    color: var(--cs-color);
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    color: #000;
    background-color: #EEEEF9 !important;
    border: 1px solid #DDE0E1 !important;
    border-radius: 2px;
    font-size: 0.75rem;
}

.select2-search__field{
    margin-top: 0 !important;
    font-size: 1rem !important;
}
.bootstrap-select .btn {
    border-style: solid;
    border: 1px solid #B0BEC5 !important;
    height: 3.3125rem !important;
    font-size: 1rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.dropdown-toggle::after, .dropup .dropdown-toggle::after {
    border: none;
}

.bootstrap-select .btn:after {
    content: url("/Content/images/Icons/select_arrow_down.png");
    position: absolute;
    right: 1.5rem;
    top: 13px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.start_time_item{
    font-size: 0.875rem;
}
.text-placeholder{color: #CFD8DC !important; font-size: 0.875rem;}
.dropdown-menu.show{width: 100%}
.add-skill-link, .add-skill-link:hover{color: #348AD9;}
/* label container */
.radio-button-container {
    display: block;
    position: relative;
    padding-left: 2rem;
    line-height: 1.5rem;
    margin-bottom: 12px;
    margin-right: 1.875rem;
    cursor: pointer;
    font-size: 0.875rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Hide the browser's default radio button */
.radio-button-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.5rem;
    width: 1.5rem;
    background-color: rgba(0,0,0,0);
    border: 1px solid #ABB5BE;
    border-radius: 50%;
    transition: all 0.25s linear;
}
/* On mouse-over, add a grey background color */
.radio-button-container:hover input ~ .checkmark {
    border-color: rgba(0,0,0,0.5);
}
/* When the radio button is checked */
.radio-button-container input:checked ~ .checkmark {
    background-color: var(--cs-color);
    border-color: var(--cs-color);
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the indicator (dot/circle) when checked */
.radio-button-container input:checked ~ .checkmark:after {
    display: block;
}
/* Style the indicator (dot/circle) */
.radio-button-container .checkmark:after {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: #fff;
    top: 0.35rem;
    left: 0.4rem;
}
.btn-custom-back {
    background-color: #FFFFFF !important;
    border: 1px solid var(--keycolor) !important;
}
.register-step-3 .form-register, .register-step-2 .form-register {
    padding: 3rem 10rem;
}
.btn-custom-parent button, .btn-custom-parent input[type=button] {
    max-width: 18.75rem;
    width: 100% !important;
}
.sp-responsive, .sp-newline {
    display: none;
}
.select2-container--open {
    border: none !important;
}

@media only screen and (max-width: 992px){
    .register-step-3 .form-register, .register-step-2 .form-register {
        padding: 3rem 5rem;
    }
}

@media only screen and (max-width: 768px){
    #progressbar{
        width: 100%;
    }
    #progressbar .fs-1rem{font-size: 0.875rem !important;}
    .form-register, .register-step-3 .form-register, .register-step-2 .form-register {
        padding: 3rem 1.5rem;
    }
    .btn-custom-parent button, .btn-custom-parent input[type=button] {
        text-wrap: wrap;
    }
    .sp-responsive {
        display: block;
    }

    .pc-responsive {
        display: none;
    }
    .container{
        max-width: 800px;
    }
    .remove-padding{
        padding-left: unset !important;
        padding-right: unset !important;
    }
    .UserSkills .col-8, .UserSkills .col-3 {
        padding-left: 10px !important;
        padding-right: 5px !important;
    }
}

.btn-disabled {
    background: #CFD8DC !important;
    color: #FFF !important;
}
.register-pr-interview{
    padding: 16px !important;
    padding-top: 0 !important;
}
.register-pr-interview .account-popup{
    width: 800px !important;
}
.register-pr-interview .register-interview-content {
    padding: 24px;
}
.register-pr-interview .popup-interview-content{
    padding-left: 0;
    /*padding-right: 0;*/
}
.register-pr-interview .register-interview{
    text-align: left;
}
.register-pr-interview .register-interview-title {
    padding: 16px 24px;
    border-bottom: 1px solid #CFD8DC;
    font-weight: 700;
    font-size: 14px;
}

.register-pr-interview .form-register{
    margin-top: 0 !important;
    padding: 0;
}
#form:has(.register-pr-interview) {
    margin-top: 0 !important;
}
.pr-style:has(.register-pr-interview) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
@media only screen and (max-width: 767.98px) {
    .register-pr-interview {
        padding: 0 !important;
    }
    #step-progress .container:has(.register-pr-interview) {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .pr-col-12:has(.register-pr-interview) {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}