/* Rules for sizing the icon. */
.material-icons {
    display: inline-flex;
    vertical-align: top;
}

.material-icons.md-16 {
    font-size: 16px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

.material-icons.md-56 {
    font-size: 56px;
}

.material-icons.md-64 {
    font-size: 64px;
}

.pointer {
    cursor: pointer;
}

.m-6 {
    margin: 2.5rem 4rem 3rem 8rem;
}

.mt-11 {
    margin-top: 11.0rem !important;
}

.mt-7rem {
    margin-top: 7rem;
}

.mt-10rem {
    margin-top: 10rem;
}

.mw-200px {
    max-width: 210px;
}

.mw-350px {
    max-width: 350px;
}

.mh-700px {
    min-height: 700px;
}

.text-spf {
    color: #5e62ff;
}

.fs-30 {
    font-size: 3.0rem;
    font-weight: bold;
}

.btn-grad1 {
    background-image: linear-gradient(to right, #00d2ff 0%, #3a7bd5 51%, #00d2ff 100%);
}

.btn-grad6 {
    background-image: linear-gradient(to right, #fe8c00 0%, #f83600 51%, #fe8c00 100%);
}

.icon1 {
    font-size: 18px;
    margin-top: 8px;
}

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

.bg-srepf {
    background: #004e73 !important;
}

.bg-pink {
    background: #ed1aa2 !important;
}
.border-pink {
    border-color: #ed1aa2!important;
}
.btn-outline-pink { color: #ed1aa2; border-color: #ed1aa2; }
.btn-outline-pink:hover { color: white; border-color: #ed1aa2; background-color: #ed1aa2; }

.img-container { position: relative; height: 170px; width: 100%;     margin-top: 2rem;     display: flex;     justify-content: center;
    align-items: center; align-content: center; overflow: hidden; }
.img-container_p { position: relative; width: 100%; height: 170px;  display: flex;     justify-content: center;     align-items: center;     align-content: center;     overflow: hidden; }

.yu-container {
    position: relative;
    height: 173px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
}

.btn-favorite {
    position: absolute;
    top: 25px;
    right: 25px;
    box-sizing: content-box;
    width: 24px;
    height: 24px;
    padding: 0.25em 0.25em;
    color: #000;
    border: 0;
    border-radius: 0.25rem;
    opacity: .5;
    z-index: 1;
}

.btn-favorite:hover {
    opacity: 0.8;
}

.btn-favorite:hover {
    background: pink !important;
    opacity: 1.0;
}

.btn-pink {
    color: #fff;
    background-color: #f377c7;
    border-color: #cf41cf;
}

.text-pink {
    color: #ed1aa2 !important;
}

.btn-animate {
    transition: transform 250ms;
}

.btn-animate:hover {
    transform: translateY(-5px);
}

.offcanvas {
    z-index: 1060 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/*public profile*/
.feature-content {
    position: relative;
    padding: 30px 20px 20px;
    margin-bottom: 50px;
    border-bottom: solid #c1c3ca 1px;
}

.feature-content{
    position:relative;background:#fff;padding:30px 20px 20px;
    margin-bottom:30px;border-radius:0 20px 20px 20px;
}
.feature-title {    background: #004e73; border-radius: 0 5px 5px 5px; }
.feature-title{display:block;position:absolute;top:-20px;width:fit-content;background:#007bce;color:#fff;font-size:16px;font-family:'Noto Sans JP ',sans-serif;padding:8px 15px;border-radius:0 10px 10px 10px;box-shadow:1px 1px 5px rgb(0 0 0 / 20%);text-shadow:1px 1px 2px rgb(0 0 0 / 50%)}
.feature-title:before { content: ' '; position: absolute; top: 0; left: -21px; border-bottom: 20px solid #055f9c;
    border-left: 21px solid transparent; border-right: 0px solid transparent; }
.strip-figure{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%) scale(1);-moz-transform:translate(-50%,-50%) scale(1);-ms-transform:translate(-50%,-50%) scale(1);-o-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;width:100%;z-index:1;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.strip-figure:hover{-webkit-transform:translate(-50%,-50%) scale(1.1);-moz-transform:translate(-50%,-50%) scale(1.1);-ms-transform:translate(-50%,-50%) scale(1.1);-o-transform:translate(-50%,-50%) scale(1.1);transform:translate(-50%,-50%) scale(1.1)}

/*login*/
.login_box{margin:0 auto;max-width:400px;width:100%;min-height:100%;display:flex;flex-direction:column;justify-content:center}
.login_wrapper .login_form .form-group{margin-bottom:20px;position:relative}
.login_wrapper .login_form h3{margin:0 0 25px;font-size:22px;font-weight:700;font-family:'Asul ',sans-serif;color:#272323;position:relative;padding:0 0 15px}
.login_wrapper .login_form h3 span{color:#0e76bc}
.login_wrapper .login_form h3:after{display:block;content:" ";position:absolute;left:0;right:0;width:50px;height:1px;background:#0e76bc;margin:0 auto;bottom:0}
.login_wrapper .login_form .form-group i.fa {
    position: absolute;
    top: 14px;
    width: 20px;
    text-align: center;
    left: 7px;
    color: #0e76bc;
}

.login_wrapper .login_form .input-text {
    outline: none;
    width: 100%;
    padding: 10px 10px 10px 35px;
    font-size: 15px;
    outline: 0;
    font-weight: 400;
    color: #717171;
    height: 45px;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    border-bottom: 1px solid #ccc;
    background: transparent;
}

.login_wrapper .login_form .input-text~.focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0e76bc;
    transition: 0.4s;
    -webkit-transition: 0.4s;
}

.login_wrapper .login_form .input-text:focus~.focus-border {
    width: 100%;
    transition: 0.4s;
    -webkit-transition: 0.4s;
}

.login_wrapper .login_form .btn-md {
    cursor: pointer;
    padding: 10px 50px 8px 50px;
    height: 45px;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Josefin Sans ', sans-serif;
    border-radius: 50px;
    text-transform: uppercase;
}

.login_wrapper .login_form .form-group span.fa {
    position: absolute;
    top: 14px;
    width: 20px;
    text-align: center;
    left: 7px;
    color: #0e76bc;
}

.login_wrapper .login_form .input-text~.focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0e76bc;
    transition: 0.4s;
    -webkit-transition: 0.4s;
}

.login_wrapper .login_form input [type=checkbox],
input [type=radio] {
    margin-right: 3px;
}

.login_wrapper .login_form button:focus {
    outline: none;
    outline: 0 auto -webkit-focus-ring-color;
}

.login_wrapper .login_form .btn-theme.focus,
.btn-theme:focus {
    box-shadow: none;
}

.login_wrapper .login_form .btn-theme {
    background: #0e76bc;
    border: none;
    color: #fff;
}

.login_wrapper .login_form .btn-theme:hover {
    background: #0e76bc;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
}

.login_wrapper .login_form .terms {
    margin-left: 3px;
}

.login_wrapper .login_form .checkbox {
    margin-bottom: 20px;
    font-size: 14px;
}

.login_wrapper .login_form .form-check {
    margin-bottom: 0;
}

.login_wrapper .login_form .form-check a {
    color: #717171;
    float: right;
}

.login_wrapper .login_form .form-check-input {
    position: absolute;
    margin-left: 0;
    opacity: 0;
}

.login_wrapper .login_form .form-check label::before {
    content: " ";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    margin-left: -25px;
    border: 1px solid #c5c3c3;
    border-radius: 3px;
    background-color: #fff;
}

.login_wrapper .login_form .form-check-label {
    padding-left: 5px;
    margin-bottom: 0;
    font-size: 14px;
    color: #403838;
    line-height: 18px;
}

.login_wrapper .login_form input [type="checkbox "]:checked+label::before {
    background-color: #0e76bc;
    border-color: #0e76bc;
}

.login_wrapper .login_form input [type=checkbox],
input [type=radio] {
    margin-top: 4px;
}

.login_wrapper .login_form .checkbox a {
    font-size: 14px;
    color: #403838;
    float: right;
}

#module{font-size:1rem;line-height:1.5}
#module #collapseAboutText.collapse:not(.show){display:block;height:3rem;overflow:hidden}
#module #collapseAboutText.collapsing{height:3rem}
#module a.collapsed::after{content:'+ Read More'}
#module a:not(.collapsed)::after{content:'- Show Less'}