﻿/*Font size*/
.fs-sm-1 {
    font-size: 0.92307692rem; /*12*/
}

.fs-sm-3 {
    font-size: 0.76923076rem; /*10*/
}

.fs-lg-1 {
    font-size: 1.07692307rem; /*14*/
}

.fs-lg-2 {
    font-size: 1.15384615rem; /*15*/
}

.fs-lg-3 {
    font-size: 1.23076923rem; /*16*/
}

.fs-lg-4 {
    font-size: 1.3076923rem; /*17*/
}

.fs-lg-5 {
    font-size: 1.384615384615385rem; /*18*/
}

.fs-lg-6 {
    font-size: 1.461538461538462rem; /*19*/
}

.fs-lg-7 {
    font-size: 1.538461538461538rem; /*19*/
}

/*Color text*/
.txt-pci-title {
    color: #3A4D57;
}

.txt-pci-body {
    color: #1E232D;
}

.txt-pci-paragraph {
    color: #738E8C;
    font-family: Montserrat;
}


/*backgroung color*/
.bg-warning {
    background-color: #432585 !important;
}
.progress-warning {
    background-color: #E4BC36 !important;
}

.bg-primary {
    background-color: #4A90E2 !important;
}

.bg-danger {
    background-color: #FF4258 !important;
}

.bg-secondary {
    background-color: #BEC2C4 !important;
}

.bg-card-danger {
    color: #FF4258;
    background-image: linear-gradient(to bottom, #f2dede 0, #e7c3c3 100%);
    border-color: #dca7a7;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px !important;
}
/*Text color*/
.text-warning {
    color: var(--moa-warning) !important;
}

.text-primary {
    color: var(--moa-color-primary);
}

.text-danger {
    color: var(--moa-danger) !important;
}

.text-secondary {
    color: var(--moa-secondary-heavy) !important;
}
/*Custom ToolTip*/
.tooltip-inner {
    text-align: left;
}

/*Button Color Style*/
.button-space {
    padding: 2px 15px;
}

.button-warning {
    background-color: #432585;
    color: #fff;
}

.btn.button-warning:hover {
    background-color: #432585;
    color: #fff;
}

.btn.button-warning.active {
    background-color: #432585;
    color: #fff;
}

/*-------------*/
.button-primary {
    background-color: #4A90E2;
    color: #fff;
}

.btn.button-primary:hover {
    background-color: #609de6;
    color: #fff;
}

.btn.button-primary.active {
    background-color: #3483de;
    color: #fff;
}

.btn.button-primary:active {
    background-color: #3483de;
    color: #fff;
}
/*-------------*/
.button-cancel {
    background-color: #BEC2C4;
    color: #fff;
}

.btn.button-cancel:hover {
    background-color: #cbcfd0;
    color: #fff;
}

.btn.button-cancel.active {
    background-color: #b1b5b8;
    color: #fff;
}

.btn.button-cancel:active {
    background-color: #b1b5b8;
    color: #fff;
}
/*-------------*/
.button-extreme {
    background-color: #D0021B;
    color: #fff;
}

.btn.button-extreme:hover {
    background-color: #e9021e;
    color: #fff;
}

.btn.button-extreme.active {
    background-color: #b70218;
    color: #fff;
}

.btn.button-extreme:active {
    background-color: #b70218;
    color: #fff;
}
/*-------------*/
.button-secondary {
    color: #404040;
    background-color: #FFFFFF;
    border-color: #dbdbdb;
}

.btn.button-secondary:hover {
    color: #404040;
    background-color: #FFFFFF;
    border-color: #cbcbcb;
}

.btn.button-secondary.active {
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.06);
    color: #272727;
    background-color: #e3e3e3;
    border-color: #bababa;
}

.btn.button-secondary:active {
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.06);
    color: #272727;
    background-color: #e3e3e3;
    border-color: #bababa;
}
/*-------------*/
.button-deactive {
    background-color: #FF6C7E;
    color: #fff;
}

.btn.button-deactive:hover {
    background-color: #ff8694;
    color: #fff;
}

.btn.button-deactive.active {
    background-color: #ff5368;
    color: #fff;
}

.btn.button-deactive:active {
    background-color: #ff5368;
    color: #fff;
}

.btn-report {
    background-color: #F2F5F7;
    color: #425864;
}

/*Adjust Formgroup input*/
.form-control {
    height: 3rem;
}

.select2-container--default .select2-selection--single {
    height: 3rem;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        height: 3rem;
        line-height: 3rem;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b:after {
        line-height: 3rem;
    }

.form-control-success + span, .form-control-error + span {
    line-height: 40px;
}

.icon-search-modify {
    padding-top: 7px;
    font-size: 1.8rem;
}
/*Adjust button*/
.btn {
    margin-bottom: 5px;
    margin-top: 4px;
    font-weight: 500;
}

.btn-group-lg > .btn, .btn-lg {
    font-size: 1rem;
}
/*----------------------------------*/
.btn-default {
    background-color: #D4D7D8;
    border-color: #D4D7D8;
}

    .btn-default:hover {
        color: #fff;
        background-color: #BEC2C4;
        border-color: #BEC2C4;
        border-bottom-color: #D4D7D8
    }
/*----------------------------------*/
.btn-danger {
    color: #fff;
    background-color: #FF2458;
    border-color: #FF2458;
}

    .btn-danger:hover {
        color: #fff;
        background-color: #ff5468;
        border-color: #ff5468;
        border-bottom-color: #e53b4f
    }
/*----------------------------------*/
.btn-warning {
    color: #fff;
    background-color: #432585;
    border-color: #432585;
    border-bottom-color: #432585 !important;
}

    .btn-warning:hover {
        color: #fff;
        background-color: #432585 !important;
        border-color: #432585 !important;
        border-bottom-color: #432585 !important;
    }
    .btn-warning:focus-within {
        color: #fff;
        background-color: #432585 !important;
        border-color: #432585 !important;
        border-bottom-color: #432585 !important;
    }
    .btn-warning:focus {
        color: #fff;
        background-color: #432585 !important;
        border-color: #432585 !important;
        border-bottombottom-color: #432585 !important;
    }
    
/*----------------------------------*/
.btn-secondary {
    color: #fff;
    background-color: #BEC2C4;
}

    .btn-secondary:hover {
        color: #fff;
        background-color: #c4c8c9;
        border-color: #c4c8c9;
        border-bottom-color: #989b9c
    }

/*Modify radio button*/
.moa-radio-button {
    min-width: 80px;
    line-height: 37px;
    background-color: var(--moa-color-primary);
    border-radius: var(--radius-large);
    color: #fff;
    text-align: center;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
}

.btn-group > .moa-radio-button:not(.active) {
    background-color: #fff;
    color: var(--moa-color-foreground-alt);
    border: 1px solid var(--moa-color-border);
}

.btn-group > .moa-radio-button.moaErrorClass {
    border: 1px solid var(--moa-error);
}

.btn-group > .moa-radio-button.moa-radio-button-error {
    border: 1px solid var(--moa-error);
}

.disabled .moa-radio-button.active:hover{
    opacity:1 !important;
}
.disabled .moa-radio-button{
    cursor:not-allowed !important;
}
.disabled .moa-radio-button:not(.active) {
    background-color: var(--moa-bodyalt-bg) !important;
    color: var(--moa-disabled) !important;
}

.btn-group:not(.disabled):not(.disabled-radio-group):not(.no-hover) > .moa-radio-button.active:not(.disabled):not(:disabled):hover {
    background-color: var(--moa-color-primary-heavy) !important;
    opacity: 1 !important;
}
.btn-group > .moa-radio-button:not(.active):not(.disabled):not(:disabled):hover {
    background-color: #eee;
    color: #545E64;
    /*box-shadow: none;*/
    border-color: #D4D7D8;
}

.btn-group > .moa-radio-button.active {
    background-color: var(--moa-color-primary);
}

.btn-group input[type="radio"] {
    display: none;
}

/*.moa-radio-view {
    background-color: #fff;
    color: #949A9E;
    box-shadow: none;
}

    .moa-radio-view i {
        font-size: 1.384rem;
    }

    .moa-radio-view:not(.active) {
        border: 1px solid #BEC2C4;
    }

    .moa-radio-view.active {
        background-color: #4A90E2;
        color: white;
    }*/

.btn-group input[type="radio"] {
    display: none;
}

/*Modify checkbox*/
.custom-control-input:checked ~ .custom-control-color::after {
    background-color: #E4BC36;
}
/*Scrollbar modify*/

.styleScrollBar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

.styleScrollBar::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

.styleScrollBar::-webkit-scrollbar-thumb {
    background-color: #E4BC36;
}

/*Modify avatar*/
.avatar {
    float: left;
}

    .avatar .icon {
        line-height: 23px;
    }

    .avatar .thumb {
        border-radius: 50%;
        width: 2.615384615384615rem;
        margin-right: .769231rem;
        text-align: center;
        line-height: 2.615384615384615rem;
        font-weight: bold
    }

    .avatar + div {
        margin-left: 3.384615384615385rem;
    }

.userFullname h6 {
    margin-top: -5px;
}

.genderMale {
    background-color: #8B8EFA;
    color: #fff;
}

.genderFemale {
    background-color: #FF80B1;
    color: #fff;
}

.genderOther {
    background-color: #F5F5F5;
    color: #696767;
}

#showmoreButton:hover {
    text-decoration: underline;
}

.icon-location {
    color: #BEC2C4;
}

.item-benhmark {
    float: left;
    margin-right: 10px;
}

.benchmark-content {
    display: inline-block;
}

    .benchmark-content .txt-c {
        font-size: 15px;
        border-radius: 2px;
        line-height: 35px;
        padding: 0px 12px;
        background-color: #949A9E;
        color: #fff;
        min-width: 50px;
        text-align: center;
    }

    .benchmark-content input {
        height: 35px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        width: 95px !important;
    }

input.recipientsNum {
    width: 100px;
    height: 35px;
    border-radius: 5px;
}



@media (min-width: 1065px) {
    .radio-button-manageservices {
        right: 35px;
        top: 70px;
        position: absolute;
    }
}

.navPaging {
    display: inline-block;
}

.pageSizeStyle {
    display: inline-block;
    width: 45px;
    height: 35px;
    border: 1px solid #D4D7D8;
}

/*item download activity details*/



.template-upload {
    display: block;
}

.icon-x {
    float: right;
    background: rgba(0,0,0,0.0);
    box-shadow: none;
}

.display-block-flex {
    display: inline-flex;
}

.file-name {
    width: 200px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.name-updload {
    overflow: hidden;
    height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files .name {
    width: 400px !important;
    word-wrap: normal !important;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 580px) {
    .files .name {
        width: 70px !important;
    }

    .file-name {
        width: 100px;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

@media (max-width: 900px) and (min-width: 580px) {
    .files .name {
        width: 150px !important;
    }

    .name-updload {
        width: 135px;
        overflow: hidden;
        height: 40px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.datetimepicker table tbody tr td.day.active {
    background: #432585;
}

    .datetimepicker table tbody tr td.day.active:hover {
        background: #6f45cb;
    }

.datetimepicker table tr td span.active.active {
    background: #432585;
}

    .datetimepicker table tr td span.active.active:hover {
        background: #6f45cb;
    }

@media (min-width: 992px) {
    .checkbox-trial {
        padding-top: 45px;
    }
}

h3 {
    color: #3A4D57;
    font: "Nunito Sans", sans-serif;
}
/*.moa-fieldset {
    border: 1px solid #ddd !important;
    padding: 10px 15px;
    border: unset;
    margin-bottom: 20px;
    border-color: #4A90E2 !important;
}*/
/*Modify color radio*/
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--moa-color-primary);
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: var(--moa-color-primary);
}

.custom-control-input:checked ~ .custom-control-label::after {
    color: var(--moa-color-primary);
}

.custom-control-input:checked ~ .custom-control-color::after {
    color: #fff;
}

.button-upload {
    min-width: 107px;
    background-color: #fff;
    color: #545E64;
    border-color: #D4D7D8;
}

    .button-upload:hover {
        border-color: #BEC2C4;
        color: #1E232D;
    }

.ps > .ps__rail-y > .ps__thumb-y {
    background-color: var(--moa-color-primary);
}

.ps.ps--scrolling-y > .ps__rail-y > .ps__thumb-y, .ps:hover > .ps__rail-y > .ps__thumb-y {
    background-color: var(--moa-color-primary);
}

.divPaging {
    text-align: right;
}

.pagingItemsCard {
    margin-top: 1.154rem;
}

@media (max-width: 850px) and (min-width:575px) {
    .navPaging .pagination .page-item:not(.prev):not(.next) {
        display: none;
    }

    .divPaging {
        text-align: right;
    }
}

@media (max-width: 575px) {
    .pagingItemsCard {
        margin-top: 0;
    }

    .navPaging .pagination .page-item:not(.prev):not(.next) {
        display: none;
    }

    .divPaging {
        text-align: left;
    }
}

.moadate .input-group-append > div {
    border: none;
}

    .moadate .input-group-append > div:first-child {
        border-right: 1px solid #dee2e6;
    }

.moadate .input-group-append {
    border: 1px solid #dee2e6;
}

.moadate input:focus + div {
    border-color: var(--moa-color-primary);
}
