myprojectpackageprav/dist/esm/src/pages/settings2/settings.css

My package in npm

.accordions div.accordion-item a.accordion-head {
    justify-content: initial;
    position: relative;
}

.accordions div.accordion-item a {
    font-size: 13px;
}

.settingslist li {
    margin: 10px 0px 0px 10px;
    list-style-type: none;
}

.settingslist {
    margin-left: 25px;
}

.settingslist li a {
    position: relative;
}

.settingslist li a.active {
    color: #1B4CBC;
    text-decoration: underline;
}

.tabcontent {
    display: none;
    width: 100%;
}

.tabactivecontent {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tabactivecontent a.accordion-head.test {
    border: solid 1px var(--rb-bordercolor1);
    border-radius: 5px;
}

.settingtabcontent h2:focus {
    outline: 1px dotted #fff !important;
    outline-offset: 1px;
}

.settingtabcontent .accordion-content {
    padding: 0px !important;
    position: relative;
    top: -2px;
    border-top: 0px !important;

}

.settingtabcontent .accordion-content p {
    line-height: 1.8em;
}



.divider.vertical-line {
    border-color: rgba(112, 112, 112, 0.24);
    border-bottom-width: 1px;
    height: auto;
    border-right-width: thin;
}

.divider {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-width: 0;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.16);
    border-bottom-width: thin;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    line-height: 0px;
    height: auto;
}

.attachmentslist li {
    list-style-type: none;
    display: inline-block;
}

.attachedfiles a {
    color: #0e2982 !important;
    word-break: break-word;
    font-weight: normal;
    font-family: 'sourcesansprosemibold', sans-serif;
    font-size: 12px;
    cursor: pointer;
    border-bottom: none;
    position: relative;
    padding-right: 20px;
    margin-left: 15px;
}

.attachedfiles a span[class^="icon-"] {
    position: absolute;
    left: -15px;
    top: 7px;
}

.attachedfiles:hover {
    text-decoration: underline;
}

.settingsbtns button[aria-label="Cancel"] {

    border: solid 1px var(--rb-bordercolor2) !important;

}

.settingslist li span[class^="icon-"] {
    position: absolute;
    left: -18px;

}

.settingsaddpopup {
    box-shadow: 0 0 3px rgba(0, 0, 0, .12);
    border: 1px solid #0084e6;
}

/* .border-bottom1 {
    border-bottom: 1px solid #0084e6;
} */

.pmgfolder span[class^=icon-emptyfile] {
    color: #015cad;
    font-size: 20px;
}

input.extentions {
    width: calc(100% - 45px);
}

.extension {
    position: absolute;
    right: 10px;
    bottom: 8px;
}


.usergropslist td {
    padding: .5rem .5rem !important;
    border-bottom: none;
    border-right: solid 1px #e7e7e7;
}

.usergropslist td {
    border-bottom: solid 1px #e7e7e7;
}

.usergropslist tr td:last-child {
    border-right: none;

}

.usergropslist tr:last-child td {
    border-bottom: none;
}

.usergropslist tr th {
    border-right: solid 1px #e7e7e7;
}

.usergropslist td ul li {
    position: relative;
    padding-left: 30px !important;
    list-style-type: none;
}

.usergropslist td ul li::before {
    content: '';
    width: 7px;
    height: 7px;
    background-color: #0083E5;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    left: 15px;
}

.addbtn {
    background-color: var(--rb-whitebg);
    color: var(--rb-titletext3);
}

.adduserpopup {
    width: 400px;
    right: 0px;
    background-color: #fff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.36);
    height: auto;
    padding: 12px 15px;
    position: absolute;
    top: 43px;
    z-index: 77;
    border-radius: 4px;
    border: 1px solid #0084E6
}

.adduserpopup span[class^="icon-search"] {
    padding: 0px 3px 0px 0px;
    right: 0px;
}

.adduserpopup ul li {
    list-style-type: none;
}

.adduserpopup input[type="checkbox"] {
    height: auto;
}

.addremovebtn {
    color: #0084e6;
    border: 1px solid #0084e6;
    border-radius: 4px;
    cursor: pointer;

}

.anchorclosebtn {
    padding: 5px 6px;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 0;
    cursor: pointer;
}

.arrow {

    width: 20px;
    height: 20px;
    position: absolute;
    top: -17px;
    overflow: hidden;
    transform: rotate(180deg);
    right: 12px;

}

.arrow::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    left: 50%;
    right: 50%;
    border: 1px solid #0084E6;

}

.dividerdashed.vertical {
    border-bottom-width: 0;
    height: auto;
    border-right-width: thin;
    width: 1px;
}

.dividerdashed {
    flex-shrink: 0;
    border: dashed #CBCBCB;
    border-width: 0 0 thin;
    align-self: stretch;
    line-height: 0;
}

/*****************************/
/*Announcemntes/
/*****************************/
.settingsannouncements div.Title {
    max-width: 37%;
    min-width: 37%;
}

.settingsannouncements div.Created {
    max-width: 26%;
    min-width: 26%;
}

.settingsannouncements div.IsArchived {
    max-width: 12%;
    min-width: 12%;
}

.settingsannouncements div.Actions {
    max-width: 20%;
    min-width: 20%;
    justify-content: end;
}

/*****************************/
/*Point Of Contact/
/*****************************/
.settingPoc div.Name {
    max-width: 15%;
    min-width: 15%;
}

.settingPoc div.PhoneNumber {
    max-width: 14%;
    min-width: 14%;
}


.settingPoc div.Modified {
    max-width: 25%;
    min-width: 25%;
}

.settingPoc div.IsArchived {
    max-width: 15%;
    min-width: 15%;
}

.settingPoc div.Actions {
    max-width: 19%;
    min-width: 19%;
    justify-content: end;
}

/*****************************/
/*Quick links/
/*****************************/
.settingsquicklinks div.Title {
    max-width: 32%;
    min-width: 32%;
}

.settingsquicklinks div.Created {
    max-width: 26%;
    min-width: 26%;
}

.settingsquicklinks div.IsArchived {
    max-width: 12%;
    min-width: 12%;
}

.settingsquicklinks div.Actions {
    max-width: 20%;
    min-width: 20%;
    justify-content: end;
}


/*****************************/
/*Policy Memos and Guidelines/
/*****************************/
.settingPMG div.foldername {
    max-width: 25%;
    min-width: 25%;
    display: flex;
    align-items: center;
}

.settingPMG div.Created {
    max-width: 27%;
    min-width: 27%;
}

.settingPMG div.Modified {
    max-width: 23%;
    min-width: 23%;
}

.settingPMG div.Actions {
    max-width: 17%;
    min-width: 17%;
    justify-content: end;
}

/*****************************/
/*Form Tooltips/
/*****************************/
.settingformtooltips div.Labelname {
    max-width: 15%;
    min-width: 15%;
}

.settingformtooltips div.LabelID {
    max-width: 14%;
    min-width: 14%;
}


.settingformtooltips div.Description {
    max-width: 25%;
    min-width: 25%;
}

.settingformtooltips div.Modified {
    max-width: 15%;
    min-width: 15%;
}

.settingformtooltips div.Actions {
    max-width: 19%;
    min-width: 19%;
    justify-content: end;
}

/*****************************/
/*Site Feedback/
/*****************************/
.settingssitefeedback div.Subject {
    max-width: 15%;
    min-width: 15%;
}

.settingssitefeedback div.FeedbackAbout {
    max-width: 17%;
    min-width: 17%;
}

.settingssitefeedback div.Description {
    max-width: 20%;
    min-width: 20%;
}

.settingssitefeedback div.Attachments {
    max-width: 20%;
    min-width: 20%;
}

.settingssitefeedback div.Modified {
    max-width: 20%;
    min-width: 20%;
}

.customwidth {
    min-width: 200px;
}



@media screen and (max-width: 1366px) and (min-width:1023px) {

    /*****************************/
    /*Announcemntes/
/*****************************/
    .settingsannouncements div.Title {
        max-width: 45%;
        min-width: 45%;
    }

    .settingsannouncements div.Created {
        max-width: 45%;
        min-width: 45%;
    }

    .settingsannouncements div.IsArchived {
        max-width: 45%;
        min-width: 45%;
    }

    .settingsannouncements div.Actions {
        max-width: 45%;
        min-width: 45%;
    }


    /*****************************/
    /*Point Of Contact/
/*****************************/
    .settingPoc div.Name {
        max-width: 48%;
        min-width: 48%;
    }

    .settingPoc div.PhoneNumber {
        max-width: 45%;
        min-width: 45%;
    }


    .settingPoc div.Modified {
        max-width: 48%;
        min-width: 48%;
    }

    .settingPoc div.IsArchived {
        max-width: 15%;
        min-width: 15%;
    }

    .settingPoc div.Actions {
        max-width: 25%;
        min-width: 25%;
    }


    /*****************************/
    /*Quick links/
/*****************************/
    .settingsquicklinks div.Title {
        max-width: 45%;
        min-width: 45%;
    }

    .settingsquicklinks div.Created {
        max-width: 45%;
        min-width: 45%;
    }

    .settingsquicklinks div.IsArchived {
        max-width: 45%;
        min-width: 45%;
    }

    .settingsquicklinks div.Actions {
        max-width: 45%;
        min-width: 45%;
    }

    /*****************************/
    /*Policy Memos and Guidelines/
/*****************************/
    .settingPMG div.foldername {
        max-width: 23%;
        min-width: 23%;
        display: flex;
        align-items: center;
    }

    .settingPMG div.Created {
        max-width: 23%;
        min-width: 23%;
    }

    .settingPMG div.Modified {
        max-width: 23%;
        min-width: 23%;
    }

    .settingPMG div.Actions {
        max-width: 23%;
        min-width: 23%;
    }


    /*****************************/
    /*Form Tooltips/
/*****************************/
    .settingformtooltips div.Labelname {
        max-width: 45%;
        min-width: 45%;
    }

    .settingformtooltips div.LabelID {
        max-width: 45%;
        min-width: 45%;
    }


    .settingformtooltips div.Description {
        max-width: 35%;
        min-width: 35%;
    }

    .settingformtooltips div.Modified {
        max-width: 35%;
        min-width: 35%;
    }

    .settingformtooltips div.Actions {
        max-width: 20%;
        min-width: 20%;
    }

    /*****************************/
    /*Site Feedback/
/*****************************/
    .settingssitefeedback div.Subject {
        max-width: 20%;
        min-width: 20%;
    }

    .settingssitefeedback div.FeedbackAbout {
        max-width: 20%;
        min-width: 20%;
    }

    .settingssitefeedback div.Description {
        max-width: 30%;
        min-width: 30%;
    }

    .settingssitefeedback div.Attachments {
        max-width: 40%;
        min-width: 40%;
    }

    .settingssitefeedback div.Modified {
        max-width: 40%;
        min-width: 40%;
    }
}

@media screen and (max-width: 1022px) and (min-width:768px) {
    .customwidth {
        min-width: auto;
    }

    /*****************************/
    /*Announcemntes/
/*****************************/
    .settingsannouncements div.Title {
        max-width: 70%;
        min-width: 70%;
    }

    .settingsannouncements div.Created {
        max-width: 28%;
        min-width: 28%;
    }

    .settingsannouncements div.IsArchived {
        max-width: 70%;
        min-width: 70%;
    }

    .settingsannouncements div.Actions {
        max-width: 28%;
        min-width: 28%;
    }

    /*****************************/
    /*Point Of Contact/
/*****************************/
    .settingPoc div.Name {
        max-width: 48%;
        min-width: 48%;
    }

    .settingPoc div.PhoneNumber {
        max-width: 45%;
        min-width: 45%;
    }

    .settingPoc div.Modified {
        max-width: 48%;
        min-width: 48%;
    }

    .settingPoc div.IsArchived {
        max-width: 15%;
        min-width: 15%;
    }

    .settingPoc div.Actions {
        max-width: 25%;
        min-width: 25%;
    }

    /*****************************/
    /*Quick links/
/*****************************/
    .settingsquicklinks div.Title {
        max-width: 70%;
        min-width: 70%;
    }

    .settingsquicklinks div.Created {
        max-width: 28%;
        min-width: 28%;
    }

    .settingsquicklinks div.IsArchived {
        max-width: 70%;
        min-width: 70%;
    }

    .settingsquicklinks div.Actions {
        max-width: 28%;
        min-width: 28%;
    }

    /*****************************/
    /*Policy Memos and Guidelines/
/*****************************/
    .settingPMG div.foldername {
        max-width: 48%;
        min-width: 48%;
        display: flex;
        align-items: center;
    }

    .settingPMG div.Created {
        max-width: 48%;
        min-width: 48%;
    }

    .settingPMG div.Modified {
        max-width: 48%;
        min-width: 48%;
    }

    .settingPMG div.Actions {
        max-width: 25%;
        min-width: 25%;
    }

    /*****************************/
    /*Form Tooltips/
/*****************************/
    .settingformtooltips div.Labelname {
        max-width: 38%;
        min-width: 38%;
    }

    .settingformtooltips div.LabelID {
        max-width: 38%;
        min-width: 38%;
    }


    .settingformtooltips div.Description {
        max-width: 38%;
        min-width: 38%;
    }

    .settingformtooltips div.Modified {
        max-width: 38%;
        min-width: 38%;
    }

    .settingformtooltips div.Actions {
        max-width: 20%;
        min-width: 20%;
    }

    /*****************************/
    /*Site Feedback/
/*****************************/
    .settingssitefeedback div.Subject {
        max-width: 33%;
        min-width: 33%;
    }

    .settingssitefeedback div.FeedbackAbout {
        max-width: 33%;
        min-width: 33%;
    }

    .settingssitefeedback div.Description {
        max-width: 33%;
        min-width: 33%;
    }

    .settingssitefeedback div.Attachments {
        max-width: 48%;
        min-width: 48%;
    }

    .settingssitefeedback div.Modified {
        max-width: 48%;
        min-width: 48%;
    }

}

@media screen and (max-width: 767px) and (min-width:360px) {
    div.Actions {
        position: absolute;
        right: 0px;
        width: 56px;
        min-width: 56px !important;
    }


    div.Actions button {
        font-size: 0px !important;
        width: 40px;
        height: 40px;
        border-radius: 100px !important;
    }

    div.Actions button span[class^="icon-"] {
        font-size: 15px !important;
        padding: 0px !important;
        line-height: 40px;
    }

    /*****************************/
    /*Announcemntes/
/*****************************/

    .settingsannouncements div.Title {
        max-width: 100%;
        min-width: 100%;
    }

    .settingsannouncements div.Created {
        max-width: 100%;
        min-width: 100%;
    }

    .settingsannouncements div.IsArchived {
        max-width: 70%;
        min-width: 70%;
    }


    /*****************************/
    /*Point Of Contact/
/*****************************/
    .settingPoc div.Name {
        max-width: 100%;
        min-width: 100%;
    }

    .settingPoc div.PhoneNumber {
        max-width: 100%;
        min-width: 100%;
    }


    .settingPoc div.Modified {
        max-width: 100%;
        min-width: 100%;
    }

    .settingPoc div.IsArchived {
        max-width: 100%;
        min-width: 100%;
    }

    /*****************************/
    /*Quick links/
/*****************************/
    .settingsquicklinks div.Title {
        max-width: 100%;
        min-width: 100%;
    }

    .settingsquicklinks div.Created {
        max-width: 100%;
        min-width: 100%;
    }

    .settingsquicklinks div.IsArchived {
        max-width: 70%;
        min-width: 70%;
    }

    /*****************************/
    /*Policy Memos and Guidelines/
/*****************************/
    .settingPMG div.foldername {
        max-width: 100%;
        min-width: 100%;
        display: flex;
        align-items: center;
    }

    .settingPMG div.Created {
        max-width: 100%;
        min-width: 100%;
    }

    .settingPMG div.Modified {
        max-width: 100%;
        min-width: 100%;
    }


    /*****************************/
    /*Form Tooltips/
/*****************************/
    .settingformtooltips div.Labelname {
        max-width: 100%;
        min-width: 100%;
    }

    .settingformtooltips div.LabelID {
        max-width: 100%;
        min-width: 100%;
    }


    .settingformtooltips div.Description {
        max-width: 100%;
        min-width: 100%;
    }

    .settingformtooltips div.Modified {
        max-width: 100%;
        min-width: 100%;
    }

    /*****************************/
    /*Site Feedback/
/*****************************/
    .settingssitefeedback div.Subject {
        max-width: 100%;
        min-width: 100%;
    }

    .settingssitefeedback div.FeedbackAbout {
        max-width: 100%;
        min-width: 100%;
    }

    .settingssitefeedback div.Description {
        max-width: 100%;
        min-width: 100%;
    }

    .settingssitefeedback div.Attachments {
        max-width: 100%;
        min-width: 100%;
    }

    .settingssitefeedback div.Modified {
        max-width: 100%;
        min-width: 100%;
    }

    /*****************************/
    /*User Groups/
/*****************************/
    .adduserpopup {
        left: 0px;
        width: 280px;
    }

    .arrow {
        left: 12px;
    }

    .adduserpopup button {
        font-size: 0px !important;
        position: relative;
        top: -12px;
        min-height: 29px;
    }

    .adduserpopup span[class^=icon-search] {
        padding: 0px;
    }

}

@media screen and (max-width: 670px) and (min-width:360px) {}


/*****************************/
/*Calendar css/
/*****************************/
.SettingCalendar .fc-button-primary {
    color: #1B4CBC;
    border-color: #e8e8e8;
    background: none;
}

.SettingCalendar .fc-button-primary:hover {
    background-color: #1B4CBC;
}

.SettingCalendar .fc-button-primary:disabled,
.SettingCalendar .fc-button-primary {
    color: #0084e6;
    background: none;
    text-transform: capitalize;
    opacity: inherit;
    border: 1px solid #e8e8e8;
}

.SettingCalendar .fc-button-primary:not(:disabled):active,
.SettingCalendar .fc-button-primary:not(:disabled).fc-button-active {
    color: #fff;
    background-color: #0084e6;
    border-color: #e8e8e8;
}