.l-container{padding:0 24px;}
.flex {
    display: flex;
}
.flex-wrap{
    flex-wrap: wrap;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: end;
}

.align-center {
    align-items: center;
}

.mg-0-auto {
    margin: 0 auto;
}

.border-r-50 {
    border-radius: 50%;
}

.p-form-item {
    padding: 16px 24px !important;
}

.p-form-item-h {
    padding: 16px 12px !important;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0 24px;
}

.pagination__inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination__inner .dots {
    background-color: #fff;
    padding: 6px 0;
}

.pagination__inner>*:not(:first-child) {
    margin-left: 8px;
}

.pagination__inner a {
    float: left;
    /* padding: 8px 12px; */
    text-decoration: none;
    color: #000;
    background-color: #fff;
    border-radius: 4px;
    height: 40px;
    font-size: 0.875rem;
    border: 1px solid #CCCCCC;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination__inner a.active {
    /* background-color: #32BBBB; */
    /* color: #fff; */
    background-color: rgba(50, 187, 187, 0.1);
    border: 1px solid #32BBBB;
}

.pagination__inner a.disabled {
    display: none;
}

.pagination__inner a:hover:not(.active):not(.disabled) {
    /* color: #fff; */
    background-color: rgba(50, 187, 187, 0.1);
    border: 1px solid #32BBBB;
}
/* .header-action{margin-right:28px;} */
.c-input--radio{height: 56px !important;}

body .l-frame .c-input--radio input + label {
    height: 56px !important;
}

body .l-frame .c-input--radio input {
    height: 56px !important;
}
body .c-dashboard-list__wrap .selected-chart-nav .c-input--radio input[type=radio]:checked + label {
    background-color: #fff !important;
    color: #162337 !important;
    border-bottom-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

body .l-frame .c-input--radio input[type="radio"]:checked+label {
    background-color: #32BBBB !important;
}

.w-1{
    width:10%;
}

.w-2{
    width:20%;
}

.w-3{
    width:30%;
}

.w-4{
    width:40%;
}

.w-5 {
    width: 50%;
}

.w-6 {
    width: 60%;
}

.w-7 {
    width: 70%;
}

.w-8 {
    width: 80%;
}

.w-9 {
    width: 90%;
}

.w-10 {
    width: 100%;
}

.c-input-group {
    margin: 10px 0;
}

.f-weight-7{
    font-weight: 700 !important;
}

.text-center{
    text-align: center;
}

.text-left{
    text-align: left;
}

.color-aqua{color:#32BBBB}

.a-button-aqua {
border: 1px solid #32BBBB;
color: #32BBBB;
background-color: #fff;
}

.a-button-aqua:hover {
border: 1px solid #32BBBB;
color: #fff;
background-color: #32BBBB;
}

.a-button-bg-aqua {
border: 1px solid #32BBBB;
color: #fff;
background-color: #32BBBB;
}

.a-button-bg-aqua:hover {
border: 1px solid #32BBBB;
color: #32BBBB;
background-color: #fff;
}

.a-button-red {
border: 1px solid #BB3232;
color: #BB3232;
background-color: #fff;
}

.a-button-red:hover {
border: 1px solid #BB3232;
color: #fff;
background-color: #BB3232;
}

.a-button-bg-red {
border: 1px solid #BB3232;
color: #fff;
background-color: #BB3232;
}

.a-button-bg-red:hover {
border: 1px solid #BB3232;
color: #BB3232;
background-color: #fff;
}

.a-button-dblue {
border: 1px solid #162337;
color: #162337;
background-color: #fff;
}

.a-button-dblue:hover {
border: 1px solid #162337;
color: #fff;
background-color: #162337;
}

.a-button-bg-dblue {
border: 1px solid #162337;
color: #fff;
background-color: #162337;
}

.a-button-bg-dblue:hover {
border: 1px solid #162337;
color: #162337;
background-color: #fff;
}

.a-button-orange {
border: 1px solid #FFC93D;
color: #FFC93D;
background-color: #fff;
}

.a-button-orange:hover {
border: 1px solid #FFC93D;
color: #fff;
background-color: #FFC93D;
}

.a-button-bg-orange {
border: 1px solid #FFC93D;
color: #fff;
background-color: #FFC93D;
}

.a-button-bg-orange:hover {
border: 1px solid #FFC93D;
color: #FFC93D;
background-color: #fff;
}

.pt-24{padding-top:24px;}
.pr-24{padding-right:24px;}
.pb-24{padding-bottom:24px;}
.pl-24{padding-left:24px;}
.pr-12{padding-right:12px;}
.pl-12{padding-left:12px;}
.widget-box{background: #FFFFFF; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); border-radius: 10px;height: auto;}
.widget-box-wrapper{max-height:295px;}
.box-1{padding-right:12px;}
.box-2{padding-left:12px;}
.widget-title{/*! padding-bottom:20px; */}
.widget-title p{font-weight: 700; font-size: 18px; line-height: 150%;letter-spacing: 0.04em;color: #162337}
.widget-body{}
.widget-body ul{}
.widget-body ul li{border-bottom: 1px solid #E9E9E9;padding:24px;padding-bottom: 16px;padding-top: 16px;}
.widget-body ul li:nth-child(1){padding-top: 0;}
.widget-body ul li a p{font-weight: 700;font-size: 14px;}
.widget-body ul li p{font-weight: 700;font-size: 14px;}
.widget-footer{}
.widget-footer p{font-weight: 400;font-size: 16px;line-height: 28px;text-align: right;color: #162337;}

#column_chart{width:100%;}
.chart-nav-btn{border: none;height: 51px;padding: 0 60px;border-top-left-radius: 10px;border-top-right-radius: 10px;cursor: pointer;transition: .5s;font-weight: 700;display: flex;align-items: center;color: #162337;}
.chart-nav-btn:hover{background: #fff;}

.p-detailBox__head {justify-content: space-between;}
.p-detailBox__head p{font-size: 18px;font-weight: 700;line-height: 27px;}

.notif-item a img {animation: bell 1s 1s both infinite;}
.notif-item a::before {content: "";width: 8px;height: 8px;position: relative;top: 10px;background: #BB3232;border-radius: 50%;display: block;left: 14px;border: 1px solid #fff;z-index: 1;}
.notif-item span.pop-up-notif {background: #8FC9FF;padding: 10px;color: #000;position:absolute;right: 60px;font-size: 13px;box-shadow: 0px 4px 10px #ccc;}
.notif-item span.pop-up-notif:hover {cursor: pointer;}
/* .caret-right {position: absolute;} */
.notif-item span.pop-up-notif .arrow {height: 17px;position: absolute;right: -5px;color: #8FC9FF;box-shadow: 0px 4px 10px #ccc;}
.error-message{font-family: "Noto Sans";font-size: 14px;font-weight: 400;line-height: 16px;letter-spacing: 0px;text-align: left;padding: 2px 0px;color: #BB3232;}
.is-invalid {border: 1px solid #BB3232 !important;}
.table-actions a.a-button {width:110px;}
.p-table tr td div {font-family: "Noto Sans";font-size: 16px;font-weight: 400;line-height: 16px;letter-spacing: 0px;}
.p-table th div {font-family: "Noto Sans";font-size: 16px;font-weight: 700;line-height: 16px;letter-spacing: 0px;}

.c-input--file{flex-direction: unset;align-items: center;}
.c-input--file label::after{height: auto !important;}
.input-image, .input-image2{max-width: 200px;margin-right: 10px;}
.input-preview-image label img, .input-preview-image2 label img, .p-list__item__data img{object-fit: contain;}
.show-pv-img{display: block !important;}
.hide-pv-img{display: none !important;}
.input-image label, .input-image2 label{background-image:none !important;border: 1px solid #32BBBB;text-align: center;padding: 8px 10px;border-radius: 90px;height: 37px;background: #ffffff;width: auto;transition: 0.5s;}
.input-image label:hover, .input-image2 label:hover{background-color:#32BBBB !important;border: 1px solid #32BBBB;color: #ffffff;}
.input-preview-image label, .input-preview-image2 label{background: none !important;}
.input-preview-image label:hover, .input-preview-image2 label:hover{background: none !important;border: none !important;}

/* Home Page Styles */
.h-body-container .widget-box{height: 295px;}
.h-body-container .widget-box-wrapper{transition: 0.5s ease-in-out;}
.widget-notif-item {position: relative;margin-right:16px;width: 48px;height: 48px;}
.widget-notif-item img {border-radius:50%;}
/* .widget-notif-item::after {content: "";width: 12px;height: 12px;position: absolute;background: #BB3232;border-radius: 50%;display: block;border: 1px solid #fff;bottom: 35px;right: 2px;} */
.widget-box-wrapper.box-2 li{padding:16px;}
.widget-sm-text{color: #858494 !important;font-size: 12px;font-weight: normal;margin-left: 0 !important;letter-spacing: 0.4px;}
.event-list:nth-child(1) .flex.el-h-img::after {content: url('/image/icon/gold_crown.svg');}
.event-list:nth-child(2) .flex.el-h-img::after {content: url('/image/icon/silver_crown.svg');}
.event-list:nth-child(3) .flex.el-h-img::after {content: url('/image/icon/bronze_crown.svg');}

#react-datetime{width: 100%;}