body {
    background: #f1f5fb;
    font-family: 'DM Sans', sans-serif;
}

:-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(196, 196, 196);
}

::-webkit-scrollbar-thumb {
    background-color: rgb(196, 196, 196);
}

.wapper {
    align-items: stretch;
    display: flex;
    width: 100%;
}

.shadow-tw {
    box-shadow: 0 0 2px 1px #dfdfdf;
}

svg.bi {
    margin-left: -15px;
    margin-right: 5px;
}

header .nav-link {
    color: #000;
}

.main {
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-width: 0;
    transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out, margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
    flex-direction: column;
}

/* .mainContent {
    margin-left: 250px;
    flex: 1 1 0;
    transition: 0.3s ease-in-out;

} */
.mainContent {
    margin: 0 auto;

}

.offcanvas-start {
    width: 250px !important;
    visibility: visible;
    box-shadow: 0 0 2px 1px #dfdfdf;
    border: none !important;
    background: #1e293b;
    color: #fff;
}

.topbbs {
    background: none;
    border: none;
    margin-right: 20px;
    color: rgb(48, 48, 48);
}

.side-margin {
    margin-left: 0px !important;
}

#nav-container {
    margin-left: 200px;
    transition: 0.3s ease-in-out;
}

.w-80 {
    max-width: 80% !important;
}

.nav-main {
    margin: 10px 0 5px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #535f74;
}


/* SideNav  */


.bars-btn {
    position: absolute;
    top: 13px;
    right: 10px;
    transition: 0.2s ease-in;
    cursor: pointer
}

/* 
.bars-btn:hover .btn-holder {
    background: #e2e2e2;
} */

.btn-holder {
    background: black;
    transition: 0.2s ease-in;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    width: 30px;
    height: 30px;
}

.bars-btn svg {
    margin-left: 0;
    margin-right: 0;
}

.shift-btn {
    right: -40px
}

.shift-btn .btn-holder {
    background: white;
    color: black
}

.navbar{
    /* background: #a31d23!important; */
    background: #fff!important;
}
.navbar-head {
    transition: 0.3s ease-in-out
}

.navbar-brand{
    color: white!important;
}

/* End Sidenav */
.btn {    
    margin-right: 10px;
}

.btn-primary {
    background-color: #0073AA;
    border-color: #0073AA;

}

.btn-primary:hover {
    background-color: #00557c;
    border-color: #004d71;

}

table {
    background: #fff;
    font-size: 14px;
    border-radius: 10px;
    width: 100%;
    box-shadow: rgb(30 41 59 / 4%) 0 2px 4px 0;
    border: 1px px solid rgba(98, 105, 118, .16);
    background: var(--tblr-card-bg, #fff);    
    transition: transform .3s ease-out, opacity .3s ease-out, box-shadow .3s ease-out;
}

.card-box {
    box-shadow: rgb(30 41 59 / 4%) 0 2px 4px 0;
    border: 1px solid rgba(98, 105, 118, .16);
    background: #fff;
    border-radius: 3px;
    transition: transform .3s ease-out, opacity .3s ease-out, box-shadow .3s ease-out;
}

.card-box .summary {
    padding: 10px 10px 0;
}

.table-index thead th {
    color: #626976;
    background: #f2f3f4;
    font-size: .625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.6;
    color: #626976;
    padding: 9px 4px;
    border-top: 1px solid #d5d6d7;
    border-bottom: 1px solid #d5d6d7;
    white-space: nowrap;
    box-shadow: inset 0 0 0 9999px #00000000;
}

.table-index thead tr {
    background: #fbfbfb;
    border-bottom: 1px solid #e9eaeb;
}

.table-index thead tr td {
    padding: .75rem .75rem;

}

.table-index thead a {
    color: #000;
    text-decoration: none;
}

.table-index tbody tr td {
    padding: 10px;
    border-bottom: 1px solid #e9eaeb;
    box-shadow: inset 0 0 0 9999px #00000000;
    color: #626976;
}

.table-bordered> :not(caption)>* {
    border: none;
}

.btn-small {
    width: 100px;
    font-size: 11px;
    padding: 0;
    background: none;
    border: none;
    color: #dc3545;
}
.btn-blue{
    width: 100px;
    font-size: 11px;
    padding: 0;
    background: none;
    border: none;
    color: #369afe;
}

.google-logo-only {
    background: url('google.svg');
    width: 30px;
    height: 30px;
    display: block;
}

.tickIcon {
    background: url(tick.svg) no-repeat center;
    width: 24px;
    height: 24px;
    display: block;
}

.exlamanationIcon {
    background: url(ex.png) no-repeat center;
    width: 24px;
    height: 24px;
    display: block;
}


.link-logo-only {
    background: url('link.svg') no-repeat center;
    width: 30px;
    height: 30px;
    display: block;
}

.table-link {
    color: #1e1e1e;
    text-decoration: none;
    font-size: 16px;
}

.bdge {
    padding: 2px 5px;
    border-radius: 5px;
    text-decoration: none;
    white-space: nowrap;
}

.bdge-danger {
    background: #ffbdbd;
    color: #9f4242;
    border: 1px solid #9f4242;
    font-size: 12px;
    padding: 3px 5px;
}

.postimage {
    font-size: 12px;
    margin: 20px 0 40px;
    color: rgb(110, 110, 110);
    max-width: 450px;
}

.bdge-blue {

    background: #0073aa;
    color: #fff;
}

.bdge-yellow {

    background: #d6ca41;
    color: #2c2900;
}

.linkrelated {
    display: block;
    text-decoration: none;
}

.table> :not(:first-child) {
    border-top: none !important;
}

.smalltext {
    font-size: 16px;

}

.moduletx {
    color: #558fa6;
    font-style: italic;
}

.pagination {
    margin: 20px 10px;
}

.pagination .active a {
    color: #143361;
    background-color: transparent;
    font-weight: 600;
    background: #0d6efd;
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff;
}

.pagination .active a:hover {
    background-color: transparent;
    color: #143361;
    border: 0px;
}

.pagination .active a:focus {
    background-color: transparent;
    color: #143361;
    outline: none;
}

.pagination li a {
    border: 1px;
    margin-left: 0px;
    color: #707070;
    padding: 7px 2px;
    margin: 0px 20px;
    text-decoration: none;
}

.pagination li a:hover {
    background-color: transparent;
    color: #4a90e2;
    padding-bottom: 2px;
    border-bottom: 1px solid;
}

.pagination li a:focus {
    outline: none;
    background-color: transparent;
    /*color:#707070;*/
}

.pagination li:first-child a,
.pagination li:last-child a {
    border: 2px solid #143361 !important;
    border-radius: 6px;
    margin: 0px;
    padding: 6px 12px;
    border: 2px solid;
    font-size: 14px;
    color: #143361;
}

.pagination li:first-child a:hover,
.pagination li:last-child a:hover {
    text-decoration: none !important;
    color: #fff;
    background-color: #143361;
}

.pagination li:first-child a:focus,
.pagination li:last-child a:focus {
    outline: none;
}

.bdge-vs {
    font-size: 12px;
    text-decoration: none;
    padding: 4px;
    text-overflow: ellipsis;

}

.postimage img {
    margin: 10px 0;
    max-width: 450px;
    width: 100%;
}

.modify-index {
    border: none;
    background: none;
    color: #767676;
}

.is {
    font-size: 29px;
    margin-top: 20px;
    display: block;
    margin-left: 25px;
    color: #545454;
}

.of {
    font-size: 18px;
    margin-top: 28px;
    display: block;
    color: #545454;
}

.relation-box .card-text {
    color: #787878;
    font-style: italic;
    font-size: 16px;
}

.relation-peoplename {
    font-size: 18px;
}

.has-error input {
    border: 1px solid #cf0000;
    font-size: 12px;
}

.has-error .help-block {
    color: #cf0000;
    font-size: 12px;
}

.dp {
    font-size: 12px;
}

.dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
}

.online-dot {
    background: #67bf5d;
}

.red-dot {
    background: #962148;
}

.analysis-logo-only {
    background: url(analysis.svg) no-repeat center;
    width: 30px;
    height: 30px;
    display: block;
    background-size: 20px;
}

.main-container {
    margin-top: 20px;
}

.table-bordered th,
.table-bordered td {
    border: none;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fdfdfd;
}

.articlebioapp .bg-dark {
    background-color: #212529 !important;
}

.summary {
    font-size: 12px;
    color: rgb(116, 116, 116);
    margin-bottom: 10px;
}

.control-label {
    font-size: 12px;
    color: #676767;
}

.nav-link {
    font-size: 14px;
    color: #000;
    /* color:white; */
}

.nav-link:hover {
    /* color:white!important; */
    opacity: 0.9;
}

.nav-link.active {
    color: #000!important;;
    font-weight: 600;
}

.breadcrumb {
    font-size: 12px;
}

.imageaddtinymce {
    display: inline-block;
    text-decoration: none;
    font-size: 13px;
    line-height: 26px;
    height: 28px;
    margin: 15px 15px 15px 0px;
    padding: 0 10px 1px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    color: #555;
    border-color: #cccccc;
    background: #f7f7f7;
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, .08);
    box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, .08);
    vertical-align: top;
}

.writing-panel {
    position: fixed;
    left: 0;
    width: 75%;
    overflow-y: scroll;
    height: calc(100vh - 57px);
    top: 57px;
    padding-bottom: 50px;
}

.tox-tinymce {
    border-radius: 5px !important;
}

.tox-editor-container {
    border-radius: 5px;
}

.texteditorcontainer {
    max-width: 780px;
    margin: auto;
}

.btn-success {
    color: #fff;
    background-color: #1c5d2c;
    border-color: #2d6f3c;
}

.aside-writer {
    position: fixed;
    right: 0;
    width: 25%;
    height: calc(100vh - 57px);
    background: #fff;
    top: 57px;
    overflow-y: scroll;
    padding: 20px;
    border-left: 1px solid #d7e0e7;
}

.aside-writer .accordion {
    margin: 20px -20px;
}

main>.container {
    padding: 20px 15px 20px;
}

.footer {
    background-color: #f5f5f5;
    font-size: .9em;
    height: 60px;
}

.footer>.container {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after,
a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th,
.grid-view td:last-child {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li>form>button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

@media(max-width:767px) {
    .nav li>form>button.logout {
        display: block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.nav>li>form>button.logout:focus,
.nav>li>form>button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.nav>li>form>button.logout:focus {
    outline: none;
}

.asideacco {
    position: relative;
    padding: 16px 48px 16px 16px;
    outline: none;
    width: 100%;
    font-weight: 500;
    text-align: left;
    color: #1e1e1e;
    border: none;
    box-shadow: none;
    transition: background .1s ease-in-out;
    height: auto;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0px;

}

.asideacco:focus {
    box-shadow: 0 0 0 #007cba #007cba;
    outline: 3px solid transparent;
}

.tagContainer {
    margin-top: 10px;
    display: flex;
}

.tagitemcontainer {
    display: inline-flex;
    margin-right: 10px;
    padding: 5px 10px;
    background: #e9e9e9;
    border-radius: 3px;
    margin-top: 10px;
}

.tagitem {
    cursor: pointer;
    padding: 0 6px;
    width: auto;
    height: auto;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    margin-right: -6px;
}

.image-create .items {}

.image-create .items .item {
    display: inline-block;
    margin: 3px;
}

.image-create .items .item a {
    border: 5px solid #fff;
    display: block;
}

.image-create .items .item a.active {
    border: 5px solid rgb(0, 76, 152);
    display: block;
}

#filemanager .items {
    padding: 20px;
}

.box-images {
    overflow-y: auto;
    width: 75%;
    top: 40px;
    bottom: 60px;
    overflow: auto;
    position: absolute;
    left: 0;
    padding-bottom: 20px;
}

.accbox .header {
    padding: 20px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 10px -20px;
    padding: 15px;
    font-weight: bold;
    font-size: 16px;
}

.box-select-load {
    overflow-y: auto;
    position: absolute;
    right: 0;
    padding-bottom: 20px;
    padding-right: 20px;
    background: #f6f7f7;
    top: 0;
    width: 25%;
    top: 40px;
    padding-left: 20px;
}

.iframemodelmain .modal-header {
    border: none;
    z-index: 1000;
}

#fileinfo {
    font-size: 14px;
    font-style: italic;
    color: #1bab1b;
}

.rtsd {
    display: flex;
}

#topmessagealert {
    font-size: 14px;
    font-style: italic;
    color: #1bab1b;
    margin-right: 5px;
}

.insert-button-box {
    border-top: 1px solid #e2e2e2;
    position: absolute;
    text-align: end;
    padding: 15px;
    bottom: 0;
    right: 0;
    width: 100%;
    background: white;
    z-index: 99;
}

.iframemodelmain .modal-body {
    padding: 0px !important;
}

ul.detail {
    margin: 0px;
    padding: 0px;
}

ul.detail li {
    list-style: none;
    font-size: 12px;
    color: #717070;
    margin-bottom: 2px;
}

.featureimage {
    width: 100%;
    height: auto;
    display: block;
    background: #ccc;
    text-align: center;
    padding: 50px 0;
    text-decoration: none;
    color: #555;
}

.featureimage:hover {
    background: rgb(170, 170, 170);
}

.asidefimage {
    width: 100%;
}

.containerFbox {
    position: relative;
}

.containerFbox .rmfi {
    position: absolute;
    bottom: 0;
    background: #830000;
    padding: 2px 10px;
    margin: 5px;
    border-radius: 5px;
    color: #fff;
    right: 0;
}

.containerFbox .rmfi:hover {
    background: #500000;
    cursor: pointer;
}

.writingHeader {
    position: fixed;
    top: 0;
    background: #fff;
    width: 100%;
    left: 0;
    border-bottom: 1px solid #dddddd;
    z-index: 10;
}

.wp-btn {

    white-space: nowrap;
    background: #007cba;
    color: #fff;
    text-decoration: none;
    text-shadow: none;
    outline: 1px solid transparent;
    font-family: inherit;
    font-weight: 400;
    font-size: 13px;
    margin: 0;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    transition: box-shadow .1s linear;
    height: 36px;
    align-items: center;
    box-sizing: border-box;
    padding: 6px 20px;
    border-radius: 5px;
    border-bottom: 2px solid #22526a;


}

.wp-btn:hover {
    background: #015178;
}

.switch input {
    display: none;
}

.switch {
    display: inline-block;
    width: 60px;
    /*=w*/
    height: 30px;
    /*=h*/
    margin: 4px;
    transform: translateY(50%);
    position: relative;
}

.slider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 30px;
    box-shadow: 0 0 0 2px #777, 0 0 4px #777;
    cursor: pointer;
    border: 4px solid transparent;
    overflow: hidden;
    transition: 0.2s;
}

.slider:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #777;
    border-radius: 30px;
    transform: translateX(-30px);
    /*translateX(-(w-h))*/
    transition: 0.2s;
}

input:checked+.slider:before {
    transform: translateX(30px);
    /*translateX(w-h)*/
    background-color: limeGreen;
}

input:checked+.slider {
    box-shadow: 0 0 0 2px limeGreen, 0 0 8px limeGreen;
}

.switch200 .slider:before {
    width: 200%;
    transform: translateX(-82px);
    /*translateX(-(w-h))*/
}

.switch200 input:checked+.slider:before {
    background-color: red;
}

.switch200 input:checked+.slider {
    box-shadow: 0 0 0 2px red, 0 0 8px red;
}

.published-status {
    margin: 0px 0 35px;
    color: #777;
    font-size: 14px;
}

.published {
    color: #32cd32;
}

.module-status {
    display: flex;
    margin: 20px 0px 5px;
}

.module-status .headerLabel {
    width: 45%;
}

.module-status .headerData {
    width: 65%;
    text-align: right;
}

.asidedropdown {
    min-width: 250px;
    margin: 250px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 6px rgb(0 0 0 / 5%);
    border-radius: 2px;
}

.asideProheader {
    font-weight: bold;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
    display: block;
    padding: 10px 20px;
}

.pagemoduleradio {
    padding: 4px 20px;

}

.pagemoduleradio:hover {
    cursor: pointer;
    background: #ccc;
}

.pagemoduleradio label {
    display: flex;
    align-items: center;
}

.pagemoduleradio input[type=radio] {
    height: 25px;
    width: 25px;
}

.accordion-head {
    transition: all 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
    color: #000 !important;
    padding: 16px 20px !important;
    border-radius: 0px !important;
}

.accordion-item {
    border-radius: 0px !important;
    border: 0px !important;
    border-bottom: 1px solid #f1f1f1;
}

.accordion-header {
    border-top: 1px solid #d7e0e7 !important;
}

.accordion-head:hover {
    background: #f0f0f0 !important;
}

.bt1 {
    border-top: 1px solid #d7e0e7;
}

.accordion-head:focus {
    outline: 2px solid #3a87fb !important;
}

.makesurepageModule {
    font-size: 14px;
    line-height: 17px !important;
    font-style: italic;
    color: #959595;
    display: block;
}

.asidedatedisplayInput {
    color: #0d6efd;
    border: none;
    text-align: right;
}

.asidedatedisplayInput:focus {
    outline: none !important;
}

.authoraside {
    margin: 20px 0px;
    font-weight: 500;
    font-size: 18px;
}

.logo-box-hdr {
    display: flex;
}

.lg-wbox {
    margin: -12px 12px -8px -12px;
    padding: 12px 15px;
    background: #000;
    color: #fff;
    font-weight: bold;
    font-size: 24px;
}

.lg-wbox:hover {
    background: #fff;
    color: #000;
    cursor: pointer;

}

.tox-tinymce {
    border: 1px solid #ced4da !important;
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    border-bottom: 1px solid #ced4da !important;
}

div.tox-tinymce--toolbar-sticky-on div.tox-editor-header {
    top: 40px !important;
}

.previewSeo h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #1e0fbe;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 512px;
    display: block;
    overflow: hidden;
    margin: 0
}

.previewSeo span.url {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #006621;
    width: 510px;
    margin-top: -4px
}

.previewSeo p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #545454;
    width: 559px;
    margin-top: -2px;
    line-height: 18px
}

.writingHeader .btnd {
    padding: 15px 25px 4px;
    color: #686868;
    text-decoration: none;
    /* background: #000; */
    margin: -8px 0;
    border-right: 1px solid #ddd;
}

#pagemodulechange {
    padding: 15px 0px 4px;
    color: #686868;
    text-decoration: none;
    margin: -8px 0;
}

#pagemodulechange .btnd {
    padding: 20px;
}

.bdmessagebox{
    background: #e8e2ff;
    padding: 40px 40px 20px;
    margin-bottom: 20px;
    color: #1f0095;
}
.fillo {
    margin-bottom: 10px;
}
.fillo .nav-tabs {
    border-bottom: 0!important;
}

.fillo .normal_tab.active {
    background: #f1f5fb;
    padding-bottom: 12px;
    border-bottom: 0;
    border-bottom: 0px !important;
}
.nav.nav-tabs li a {
    padding: 10px 20px;
}
.fillo .normal_tab {
    margin-right: 10px!important;
    margin-bottom: -1px;
    background-color: #f9f9f9;
   
    
}

.fillo .normal_tab:hover {
    border-bottom: 0px !important;
}

.normal_tab {
    display: inline-block;
    padding: 10px;
    background: 0 0;
    border: 1px solid #c7c7c7 !important;
    cursor: pointer;
    border-bottom: 0;
    background: #d6d6d6;
    margin-bottom: 0;
    border-bottom-color: #f1f5fb !important;
}
.border-bottom {
    border-bottom: 1px solid #c7c7c7 !important;
}



.badge {
    justify-content: center;
    align-items: center;
    background: #6c7a91;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: var(--tblr-border-width) solid transparent;
    min-width: 1.3571429em;
    font-weight: var(--tblr-font-weight-bold);
    letter-spacing: .04em;
    vertical-align: bottom;
    padding: 0.5em 1em;
    border-radius: 0px;
}

.bg-purple-lt {
    color: #ae3ec9 !important;
    background: #f7ebf9 !important;
}

.bg-indigo {
    background-color:  #4263eb !important;
}

.bg-purple {
    background-color:#ae3ec9 !important;
}

.rounded{
    border-radius: 15% !important;
}

.text-white{
    color: #fff!important;
}

.global-button{
    color: #fff;
    background: #2563EB;
    border-radius: 5px;
    border: 0px;
    padding: 10px 20px;
}

.inside-tab-button{
    font-size: 14px;
    padding: 8px 17px;
    color: #fff;;
    border-radius: 5px;
    border: 0px;
}
.topic-tab{
    text-decoration: none;
    color: #d53030;
    padding: 11px;
    border-radius: 4px;
    background: #d5303033;
    border:0;
}

.topic-tab:hover{
    color: #d53030;
    background: #d5303057;
}


.topic-tab-button-container .active{
    background: #ffffff;
    border-radius: 4px 4px 0 0;
    border: 1px solid #e2e2e2;
    border-bottom: 0;    
}

.topic-tab-button{
    text-decoration: none;
    color: black;
    padding: 10px 20px;
    font-weight: 500;
    border: 0;
    background: transparent    
}

.task-status {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width:100%;
    grid-template-rows: repeat(2, 1fr);
    background: white;
    margin-bottom: 0px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
    border: 1px solid #ccd0d4;
    padding-left:0;
    padding-right:0;
    border-bottom:0;
}

.task-status p {
    font-size: 14px;
    margin-top: 0px;
    font-weight: 600;
}

.task-status span {
    font-size: 25px;
    font-weight: 800;
}

.task-status-box {
    padding: 15px;
    position:relative;
    border: 1px solid #f2f2f2;
}

.task-status-box:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
}

.task-status-box:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
}

.task-status-box:nth-child(3) {
    grid-area: 2 / 1 / 3 / 2;
}

.task-status-box:nth-child(4) {
    grid-area: 2 / 2 / 3 / 3;
} 

.imagesize-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right:10px;
    width: 180px;
}

.imagesize-box p{
    font-size:32px;
    font-weight:bold;
    margin-bottom:4px;
}

.imagesize-box .size-small{
    font-size:12px;
}

.imagesize-box .size-label{
    font-size:14px;
}
h1.projecttitle{
    font-size: 28px;
    margin-top: 20px;
    margin-left: 10px;
}
.btnproject{
    margin-top: 10px;
    margin-left: 10px;
}
.projectbar{
    border-bottom: 1px solid #e4e4e4;
}

.projectbar .linktab{
    color: #646464;
    font-weight: bold;
}

.projectbar .linktab:hover{
    color: #000;
}
.projectbar .nav-item{
    margin-left: 20px;
}
.projectbar .active{
    border-bottom: 2px solid #646464;
    color: #000!important;
}

.btn-custom:hover{
    background: #000;
    border: 1px solid #dbdbdb;
}
.btn-custom{
    background: #fff;
    border: 1px solid #dbdbdb;
}
.normalbtn{
    font-size:13px;
    text-decoration: none;
}
.switch-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-right: 8px;
    position: relative;
  }
  
  .switch-icon:before {
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #ccc;
    transition: all 0.2s ease;
  }
  
  .switch-icon.active:before {
    left: 50%;
    transform: translateX(-50%);
    background-color: #007bff;
  }

  .taskTitleInput textarea{
    font-size: 18px !important;
    font-weight: 500;
    border: 1px solid #fff;
    width: 100%;
  }

  .text-desc{
    font-size: 14px !important;    
    border: 1px solid #fff;
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
  }

  .taskformupdate label{
    color: #6c6c6c;
    font-size: 13px;
  }
  .ddbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    color: #718096;
    white-space: nowrap;
    background-color: #fff;
    border-width: 1px;
    border-color: #edf2f7;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }
  
  .ddbtn:hover {
    background-color: #f7fafc;
  }
  
  .ddbtn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  
  .ddbtn:focus:not(:focus-visible) {
    box-shadow: none;
  }
  
/* End Task BOx      */
.post-design {
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .post-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }
  
  .profile-image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
  }
  
  .post-info {
    flex-grow: 1;
  }
  
  .post-body {
    margin-bottom: 12px;
  }
  
  .post-message {
    width: 100%;
    height: 80px;
    resize: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid #f1f5fb;
    border-radius: 8px;
    outline-color: #adc6ed;
  }
  
  .post-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 8px;
  }
  
  .post-footer {
    text-align: right;
  }
  
  .help-block {
    color: #f00;
    margin-top: 5px;
  }
  
  /* Adjust the styles based on your desired design */
  
.taskactivity .fieldname {
    color: #898b8e;
    font-size: 13px;
}

.fieldname .rttxt {
    font-style: italic;
    color: #7c818f;
    font-size: 11px;
}

.filesattach {
    display: block;
    padding: 5px;
    border-color: #718096;
    border-width: 1px 0;
    border-style: solid;
    font-size: 0.875rem; /* 14px */
    color: #4a5568;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .box-itemattach{
    display: block;
    padding: 5px;
    border-color: #718096;
    border-width: 1px 0;
    border-style: solid;
    font-size: 0.875rem; /* 14px */
    color: #898989;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  

  /* // Dashboard Box  */

.heading-dash {
    font-size: 24px;
    margin-bottom: 15px;
}

.ehrdashboard .data-card-box {
    background: white;
    border-radius: 0.375rem;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    overflow: hidden;
    opacity: 0.8;
}

.ehrdashboard .box-heading {
    /* font-weight: 600; */
    font-size: 1.25rem;
    line-height: 2rem;
    margin-bottom: 1rem;
}

.ehrdashboard .data-icon-box {
    width: 2.5rem;
    height: 2.5rem;
}

.ehrdashboard .light-text {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(156 163 175 / 1);
    margin-bottom: 0px;
    white-space: pre;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.ehrdashboard .heavy-text {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 600;
    display: block;
    white-space: pre;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.ehrdashboard .small-text {
    font-size: 1.45rem !important;
}


.logo-main{
    width:350px;
}


  /* dash main card  */

  .card-top {
    background-color: #fff;
    border-radius: 0.275rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1rem;
    overflow: hidden;
        border: 1px solid #e2e2e2;
}

.card-top.blue {
    border-top: 5px solid #198ff5;
}

.card-top .social-data-monthly .data-number {
    font-weight: 700;
    font-size: 3rem;
    color: #000;
}

.card-top .social-data-monthly {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-top .social-data-monthly .data-type {
    font-size: 0.875rem;
    color: #63687e;
    text-transform: uppercase;
    letter-spacing: 0.5rem;
}