.flexcenter{display: flex;justify-content: center;align-items: center;}
.flexleft{display: flex;justify-content: left;align-items: center;}
.flexright{display: flex;justify-content: right;align-items: center;}
.image-banner{position:relative;overflow:hidden;background:#c4edf7;border-radius:5px;padding:10px;text-align:center;}
.image-banner img{width:60%;margin:0 auto;height:auto;}
.head-profile{position:relative;overflow:hidden;margin:-20px 20px 0;}
.head-profile-image{width:130px;height:130px;border-radius:5px;background:#fff;border:#bdbdbd 2px solid;border-radius:50%;margin:0 10px 0 0;}
.head-profile-image img{width:60%;margin:0 auto;height:auto;}
.me-2{font-size:120%;}
.detail-height{position:relative;height:calc(100vh - 100px) !important;width:100%;overflow:hidden !important;}
.closemodal{position:absolute;top:15px;right:15px;z-index:100;}
.closemodal-tombol{width:35px;height:35px;background:#ff4213;border-radius:4px;cursor:pointer;}
.closemodal-tombol:hover{background:#c10000;}
.closemodal-tombol svg{width:18px;height:18px;fill:#fff;}
.notif-user{padding:10px 10%;}
.notif-user i.fa{font-size:400%;margin:0 5px 0 0;line-height:1;padding:0;color:#ff5500;}
.notif-user p{font-size:100%;margin:0;line-height:1.1;padding:0;font-weight:bold;}

.forcheck ul{list-style:none;margin:0 0 10px;padding:0;}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
.forcheck input[type=checkbox],
.forcheck input[type=radio] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px #bdbdbd;
    --border: #919191;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 25px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
.forcheck input[type=checkbox]:after,
.forcheck input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }
.forcheck input[type=checkbox]:checked,
.forcheck input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
.forcheck input[type=checkbox]:disabled,
.forcheck input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
.forcheck input[type=checkbox]:disabled:checked,
.forcheck input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
.forcheck input[type=checkbox]:disabled + label,
.forcheck input[type=radio]:disabled + label {
    cursor: not-allowed;
  }
.forcheck input[type=checkbox]:hover:not(:checked):not(:disabled),
.forcheck input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
.forcheck input[type=checkbox]:focus,
.forcheck input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
.forcheck input[type=checkbox]:not(.switch),
.forcheck input[type=radio]:not(.switch) {
    width: 25px;
  }
.forcheck input[type=checkbox]:not(.switch):after,
.forcheck input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }
.forcheck input[type=checkbox]:not(.switch):checked,
.forcheck input[type=radio]:not(.switch):checked {
    --o: 1;
  }
.forcheck input[type=checkbox] + label,
.forcheck input[type=radio] + label {
    font-size: 100%;
    line-height: 25px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 5px;
  }

.forcheck input[type=checkbox]:not(.switch) {
    border-radius: 25px;
  }
.forcheck input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }
.forcheck input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }
.forcheck input[type=checkbox].switch {
    width: 50px;
    border-radius: 25px;
  }
.forcheck input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 19px;
    height: 19px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }
.forcheck input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 25px;
  }
.forcheck input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }

.forcheck input[type=radio] {
    border-radius: 50%;
  }
.forcheck input[type=radio]:after {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }
  input[type=radio]:checked {
    --s: .5;
  }
}

.no-member{position:fixed;top:0;left:0;right:0;bottom:0;background:#000 url(../../assets/images/latar.jpg) no-repeat center;background-size:cover;text-align:center;}
.no-member h1{font-size:400%;margin:0 0 20px;text-align:center;padding:0;line-height:1;font-weight:bold;color:#ffc000;}
.no-member h3{font-size:120%;margin:0 0 20px;text-align:center;padding:0;line-height:1.2;font-weight:500;color:#bdbdbd}
.no-member img{width:auto;height:25vh;margin:0 0 0 10px;}
.no-member-box{border:#717171 2px solid;background:rgba(0,0,0,0.6);padding:50px;border-radius:10px;}

.form-control{border-color:#dbdbdb !important;}


@media (max-width: 992px) {
.image-banner img{width:90%;}
.head-profile{position:relative;overflow:hidden;margin:-10px 10px 0;}
.head-profile-image{width:80px;height:80px;margin:0 auto 10px;}
.head-profile.flexleft{display:block !important;text-align:center;}
.profile-img-content{text-align:center !important;}
.profile-img-content h3{font-size:120% !important;}
.profile-img-content h5{font-size:100% !important;}
.no-member-box{margin:0 20px;}
.no-member h1{font-size:250%;}
}