body.login-body{
   font-family: 'Trebuchet MS';
   background: linear-gradient(#ececec, #c7c7c7);
   min-height: calc(100vh - 5cm);
   vertical-align: middle;
}
.card.login-card{
   margin-top: 20px;
   margin-bottom: 20px;
   margin-left: 10px;
   margin-right: 12px;
   box-shadow: 0 0 20px rgb(0, 0, 0);
   border-radius: 12px;
}
.card.login-card h3{
   text-align: center;
   margin-top: 20px;
   margin-bottom: 1cm;
   font-family: 'Trebuchet MS';
   border-bottom: 1px solid #000;
}
img.img-logo-login{
   width: 100%;
   max-height: calc(100vh - 2cm);
   object-fit: contain;
   
}
.form-group label{
   font-weight: bold;
}
.val-text{
   font-size: 11px;
   color: rgb(202, 3, 3);
}
h2.penjumlahan{
   font-weight: bold;
}
.btn-password a{
   color: black;
   text-decoration: none;
}
.btn-signin{
   color: #fff;
   background-color: rgb(35, 104, 207);
   padding: 10px 12px;
   display: block;
   width: 100%;
   border-radius: 20px;
}
.btn-signin:hover{
   color: rgb(22, 22, 22);
   background-color: rgb(159, 169, 194);
}
.btn-signin:focus{
   box-shadow: none;
}
.form-group .form-control{
   margin-top: 5px;
   height: 1.1cm;
   border-radius: 20px;
   border: 1px solid #969595;
}
.form-control:focus, .form-select:focus{
   box-shadow: none;
   border-color: #000000cf;
}
.text-center{
   align-items: center;
   justify-content: center;
}
.bg-gradient-dark {
   background: #343a40 linear-gradient(180deg, #52585d, #343a40) repeat-x !important;
   color: #fff;
}
.info-box {
   /* box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2); */
   box-shadow: 0 0 12px rgb(81, 85, 88) !important;
   border-radius: 0.25rem;
   background: #fff;
   /* display: -ms-flexbox; */
   /* display: flex; */
   border: 1px solid #2670b6;
   margin-bottom: 1rem;
   min-height: 80px;
   padding: 0.5rem;
   position: relative;
}
.info-box:hover{
    cursor: pointer;
}
.info-box .info-box-icon {
   color: #343a40;
   border-radius: 0.25rem;
   -ms-flex-align: center;
   align-items: center;
   font-size: 1.875rem;
   -ms-flex-pack: center;
   justify-content: center;
   text-align: center;
   width: 70px;
}
.info-box .info-box-icon > img {
   max-width: 100%;
}
.info-box .info-box-content {
   -ms-flex: 1;
   flex: 1;
   padding: 5px 10px;
}
.info-box .info-box-number {
   display: block;
   font-weight: 700;
}
.info-box .info-box-text,
.info-box .progress-description {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.info-box .info-box-more {
   display: block;
}
.info-box.list-role{
   margin-top: 12px;
   box-shadow: 0 0 12px rgb(81, 85, 88) !important;
}
.info-box.list-role:hover{
   box-shadow: 0 0 12px rgb(54, 85, 151) !important;
}
.info-box-text-list-role{
   font-size: 15px;
   color: #000;
   font-weight: bolder;
}
.info-box-content.list-role span{
   vertical-align: middle;
   
}