* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

@font-face {
    font-family: 'inter';
    src: url('fonts/Inter-Regular.otf');
    font-weight: normal;
}

@font-face {
    font-family: 'inter';
    src: url('fonts/Inter-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: 'inter';
    src: url('fonts/Inter-Bold.ttf');
    font-weight: 700;
}


:root {
    --background-color: #fff;
    --border-bottom: #ddd;
    --text-color: #616161;
    --backgrond-sidebar: #f8f8f8;
    --background-shadow-sidebar: #ebebea;
    --border-color: #1a1b1f;
}


.darkmode {
    --backgrond-sidebar: #1a1b1f;
    --background-shadow-sidebar: #1a1b1f;
    --background-color: #000;
    --border-color: #1a1b1f;
}

body {
    font-family: 'inter', sans-serif;
    background-color: var(--background-color);
}

div.wrapper {
    display: flex;
}

.dashboard-navbar {
    display: flex;
    flex-wrap: nowrap;
    padding: 0.625rem 1.5rem;
    border-bottom: 2px solid #efefef;
    background-color: #FFF;
    /* box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1); */
}

.welcomeMessage {
    font-size: 23px;
    font-weight: bold;
}

.welcomeMessage > span.daynighticon {
    margin-right: 5px;
    font-size: 19px;
}

.toggle-btn {
    background-color: transparent;
    cursor: pointer;
    border: 0;
    margin-right: 1.5rem;
}

.toggle-btn i {
    font-size: 1.5rem;
    font-weight: 900;
}

.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
}

main.content {
    flex: 1;
    padding: 0px 1rem;
    background-color: #fff;
}


h2.subtitle {
    margin-top: 10px;
    font-weight: bold;
    font-size: 20px;
}
div#defaultDisplay {
    padding: 20px;
}

div#defaultDisplay > p {
    margin-top: 7px;
    color: #616161;
    font-size: 16px;
}

div#defaultDisplay button#btnupdateAll {
    margin-top: 20px;
    border: none;
    background-color: #fff;
    font-family: 'inter';
    font-weight: bold;
    color: #5c5b5b;
    cursor: pointer;
    font-size: 17px;
}

div#defaultDisplay div#lastFeeds {
    margin-top: 15px;
}

div#defaultDisplay h2.subtitle {
    font-size: 29px;

}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.updating-icon {
    display: inline-block;
    animation: spin 1s linear infinite;
}

div#feedDisplay {
    display: none;
}

div#feedDisplay h2.subtitle {
    /* color: #5c5b5b; */
    color: #E63E00;
}

div#feedDisplay div.bxfeedui {
    margin-top: 15px;
    padding: 5px 20px; 
}

div#feedDisplay div.bxfeedui p#cntdNews {
    font-size: 14px;
    margin-top: 8px;
    color: #5c5b5b;
}

div#controls-forms {
    padding: 20px;
}

div#controls-forms ul li {
    display: inline;
    margin-right: 30px;

}

div#controls-forms ul li a,
div#controls-forms ul li button {
    color: #5c5b5b;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

div#overlay {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2;
}


div#modalNewFeed {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    z-index: 20;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: none;
}

div#modalNewFeed div#title-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

div#modalNewFeed div#title-header h2 {
    font-weight: 300;
    font-size: 19px;
}

div#modalNewFeed div#title-header button {
    border: none;
    color: #cecece;
    font-weight: bold;
    font-size: 17px;
    background: none;
    cursor: pointer;
}

div#modalNewFeed div#title-header button:hover {
    color: #000;
}

div#modalNewFeed div.form-group {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;
    flex-direction: column;
}

div#modalNewFeed div.form-group label {
    margin-bottom: 10px;
    font-size: 14px;
}

div#modalNewFeed div.form-group input[type="text"].inputxt,
div#modalNewFeed div.form-group input[type="url"].inputxt,
div#modalNewFeed div.form-group select.inputxt {
    font-family: 'inter';
    display: flex;
    padding: 10px;
    width: 100%;
    outline: none;
    border: 1px solid #e9e9e9;
    border-radius: 8px;
    transition: all 0.13s;
    background-color: #fff;
}

div#modalNewFeed div.form-group input[type="text"].inputxt:focus,
div#modalNewFeed div.form-group input[type="url"].inputxt:focus,
div#modalNewFeed div.form-group select.inputxt:focus {
    border: 1px solid #000;
}

div#modalNewFeed div#form-submit {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}

div#modalNewFeed div#form-submit button {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #f5f5f5;
    border-radius: 8px;
    background-color: #f5f5f5;
    font-family: 'inter';
    font-weight: bold;
    color: #000;
}

div#modalNewFeed div#form-submit button#insertFeed {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #000;
    border-radius: 8px;
    background-color: #000;
    font-family: 'inter';
    font-weight: normal;
    color: #fff;
}


div#modalSettings {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    z-index: 20;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: none;
}

div#modalSettings div#title-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

div#modalSettings div#title-header h2 {
    font-weight: 300;
    font-size: 19px;
}

div#modalSettings div#title-header button {
    border: none;
    color: #cecece;
    font-weight: bold;
    font-size: 17px;
    background: none;
    cursor: pointer;
}

div#modalSettings div#title-header button:hover {
    color: #000;
}

div#modalSettings div#modal-body div#description span {
    font-size: 14px;
    color: #616161;
}

div#modalSettings div#modal-body div#controls-categoria,
div#modalSettings div#modal-body div#controls-filtro {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
}

div#modalSettings div#modal-body div#controls-categoria button,
div#modalSettings div#modal-body div#controls-filtro button {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f5f5f5;
    font-family: 'inter';
    font-weight: bold;
    color: #000;
}

div#modalSettings div#modal-body div#catItems,
div#modalSettings div#modal-body div#myFilters div.filtros {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 10px;
}

div#modalSettings div#modal-body div#catItems div.catSetting {
   display: flex;
   justify-content: space-between;
   width: 100%; 
   border: 1px solid #ddd;
   border-radius: 4px;
   padding: 8px;
   outline: none;
}

div#modalSettings div#modal-body div#myFilters div.filtros input[type="text"].inputxt {
   display: flex;
   width: 100%; 
   font-family: 'inter';
   border: 1px solid #ddd;
   border-radius: 4px;
   padding: 8px;
   outline: none;
}

div#modalSettings div#modal-body div#catItems div.catSetting:hover,
div#modalSettings div#modal-body div#myFilters div.filtros div.filterSetting:hover {
    background-color: #f8f8f8;
}

div#modalSettings div#modal-body div#catItems div.catSetting span.nameCategoria,
div#modalSettings div#modal-body div#myFilters div.filtros div.filterSetting span.nameFilter {
    font-size: 14px;
    color: #5c5b5b;
    padding: 5px;
}

div#modalSettings div#modal-body div#catItems div.catSetting div.divbtns,
div#modalSettings div#modal-body div#myFilters div.filtros div.filterSetting div.divbtns {
    padding: 5px;
}

div#modalSettings div#modal-body div#catItems div.catSetting button,
div#modalSettings div#modal-body div#myFilters div.filtros div.filterSetting button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    margin-left: 20px;
}

div#modalSettings div#modal-body div#catItems div.catSetting button i,
div#modalSettings div#modal-body div#myFilters div.filtros div#filterSetting button i {
    font-size: 17px;
    color: #5c5b5b;
}



div#modalNewCat {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    z-index: 20;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: none;
}

div#modalNewCat div#title-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

div#modalNewCat div#title-header h2 {
    font-weight: 300;
    font-size: 19px;
}

div#modalNewCat div#title-header button {
    border: none;
    color: #cecece;
    font-weight: bold;
    font-size: 17px;
    background: none;
    cursor: pointer;
}

div#modalNewCat div#title-header button:hover {
    color: #000;
}


div#modalNewCat div.form-group {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;
    flex-direction: column;
}

div#modalNewCat div.form-group label {
    margin-bottom: 10px;
    font-size: 14px;
}

div#modalNewCat div.form-group input[type="text"].inputxt,
div#modalNewCat div.form-group input[type="url"].inputxt,
div#modalNewCat div.form-group select.inputxt {
    font-family: 'inter';
    display: flex;
    padding: 10px;
    width: 100%;
    outline: none;
    border: 1px solid #e9e9e9;
    border-radius: 8px;
    transition: all 0.13s;
}

div#modalNewCat div.form-group input[type="text"].inputxt:focus,
div#modalNewCat div.form-group input[type="url"].inputxt:focus,
div#modalNewCat div.form-group select.inputxt:focus {
    border: 1px solid #000;
}

div#modalNewCat div#form-submit {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}

div#modalNewCat div#form-submit button {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #f5f5f5;
    border-radius: 8px;
    background-color: #f5f5f5;
    font-family: 'inter';
    font-weight: bold;
    color: #000;
}

div#modalNewCat div#form-submit button#insertCategoria {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #000;
    border-radius: 8px;
    background-color: #000;
    font-family: 'inter';
    font-weight: normal;
    color: #fff;
}


div#modalEditCat {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    z-index: 20;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: none;
}

div#modalEditCat div#title-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

div#modalEditCat div#title-header h2 {
    font-weight: 300;
    font-size: 19px;
}

div#modalEditCat div#title-header button {
    border: none;
    color: #cecece;
    font-weight: bold;
    font-size: 17px;
    background: none;
    cursor: pointer;
}

div#modalEditCat div#title-header button:hover {
    color: #000;
}

div#modalEditCat div.form-group {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;
    flex-direction: column;
}

div#modalEditCat div.form-group label {
    margin-bottom: 10px;
    font-size: 14px;
}

div#modalEditCat div.form-group input[type="text"].inputxt,
div#modalEditCat div.form-group input[type="url"].inputxt,
div#modalEditCat div.form-group select.inputxt {
    font-family: 'inter';
    display: flex;
    padding: 10px;
    width: 100%;
    outline: none;
    border: 1px solid #e9e9e9;
    border-radius: 8px;
    transition: all 0.13s;
}

div#modalEditCat div.form-group input[type="text"].inputxt:focus,
div#modalEditCat div.form-group input[type="url"].inputxt:focus,
div#modalEditCat div.form-group select.inputxt:focus {
    border: 1px solid #000;
}

div#modalEditCat div#form-submit {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}

div#modalEditCat div#form-submit button {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #f5f5f5;
    border-radius: 8px;
    background-color: #f5f5f5;
    font-family: 'inter';
    font-weight: bold;
    color: #000;
}

div#modalEditCat div#form-submit button#updateCategoria {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #000;
    border-radius: 8px;
    background-color: #000;
    font-family: 'inter';
    font-weight: normal;
    color: #fff;
}


div#modalEditFeedData {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    z-index: 20;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: none;
}

div#modalEditFeedData div#title-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

div#modalEditFeedData div#title-header h2 {
    font-weight: 300;
    font-size: 19px;
}

div#modalEditFeedData div#title-header button {
    border: none;
    color: #cecece;
    font-weight: bold;
    font-size: 17px;
    background: none;
    cursor: pointer;
}

div#modalEditFeedData div#title-header button:hover {
    color: #000;
}

div#modalEditFeedData div.form-group {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;
    flex-direction: column;
}

div#modalEditFeedData div.form-group label {
    margin-bottom: 10px;
    font-size: 14px;
}

div#modalEditFeedData div.form-group input[type="text"].inputxt,
div#modalEditFeedData div.form-group input[type="url"].inputxt,
div#modalEditFeedData div.form-group select.inputxt {
    font-family: 'inter';
    display: flex;
    padding: 10px;
    width: 100%;
    outline: none;
    border: 1px solid #e9e9e9;
    border-radius: 8px;
    transition: all 0.13s;
}

div#modalEditFeedData div.form-group input[type="text"].inputxt:focus,
div#modalEditFeedData div.form-group input[type="url"].inputxt:focus,
div#modalEditFeedData div.form-group select.inputxt:focus {
    border: 1px solid #000;
}

div#modalEditFeedData div#form-submit {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}

div#modalEditFeedData div#form-submit button {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #f5f5f5;
    border-radius: 8px;
    background-color: #f5f5f5;
    font-family: 'inter';
    font-weight: bold;
    color: #000;
}

div#modalEditFeedData div#form-submit button#updateFeed {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #000;
    border-radius: 8px;
    background-color: #000;
    font-family: 'inter';
    font-weight: normal;
    color: #fff;
}


/**********************  Modal de apagar feed ***************************/


div#modalDeleteFeed {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    z-index: 20;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: none;
}

div#modalDeleteFeed div#title-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

div#modalDeleteFeed div#title-header h2 {
    font-weight: 300;
    font-size: 19px;
}

div#modalDeleteFeed div#title-header button {
    border: none;
    color: #cecece;
    font-weight: bold;
    font-size: 17px;
    background: none;
    cursor: pointer;
}

div#modalDeleteFeed div#title-header button:hover {
    color: #000;
}

div#modalDeleteFeed div#body-modal {
    padding: 10px;
}

div#modalDeleteFeed div#body-modal span.message {
    font-size: 14px;
    color: #616161;
}

div#modalDeleteFeed div#form-submit {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}

div#modalDeleteFeed div#form-submit button {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #f5f5f5;
    border-radius: 8px;
    background-color: #f5f5f5;
    font-family: 'inter';
    font-weight: bold;
    color: #000;
    margin-left: 10px;
}

div#modalDeleteFeed div#form-submit button.cancel {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #616161;
    border-radius: 8px;
    background-color: #fff;
    font-family: 'inter';
    font-weight: bold;
    color: #616161;
}

div#modalDeleteFeed div#form-submit button.confirm {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #eb303a;
    border-radius: 8px;
    background-color: #eb303a;
    font-family: 'inter';
    font-weight: normal;
    color: #fff;
}



div#modalDeleteCat {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    z-index: 20;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: none;
}

div#modalDeleteCat div#title-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

div#modalDeleteCat div#title-header h2 {
    font-weight: 300;
    font-size: 19px;
}

div#modalDeleteCat div#title-header button {
    border: none;
    color: #cecece;
    font-weight: bold;
    font-size: 17px;
    background: none;
    cursor: pointer;
}

div#modalDeleteCat div#title-header button:hover {
    color: #000;
}

div#modalDeleteCat div#body-modal {
    padding: 10px;
}

div#modalDeleteCat div#body-modal span.message {
    font-size: 14px;
    color: #616161;
}

div#modalDeleteCat div#form-submit {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}

div#modalDeleteCat div#form-submit button {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #f5f5f5;
    border-radius: 8px;
    background-color: #f5f5f5;
    font-family: 'inter';
    font-weight: bold;
    color: #000;
    margin-left: 10px;
}

div#modalDeleteCat div#form-submit button.cancel {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #616161;
    border-radius: 8px;
    background-color: #fff;
    font-family: 'inter';
    font-weight: bold;
    color: #616161;
}

div#modalDeleteCat div#form-submit button.confirm {
    padding: 6px 10px;
    cursor: pointer;
    border: 1px solid #eb303a;
    border-radius: 8px;
    background-color: #eb303a;
    font-family: 'inter';
    font-weight: normal;
    color: #fff;
}


div#feedReadLater div.bxfavoritosui {
    margin-top: 15px;
    padding: 5px 20px; 
}



div#linksFeed {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 10px;
}

.feed {
    display: flex;
    flex-direction: column;
    width: 80%;
    padding: 20px;
    border: 1px solid #e7e7e7;
    /* box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); */
    transition: all 0.13s;
    border-radius: 8px;
    margin-bottom: 15px;
    background-color: #fff;
}

.feed:hover {
    background-color: #fffaf8;
    border-color: #ebd3c9;
}

.feed > h2 > a {
    display: flex;
    font-size: 19px;
    text-decoration: none;
    color: #000;
    margin-bottom: 6px;
    transition: all 0.13s;
}

.feed:hover > h2 > a {
    color: #E63E00;
}

.feed > p.feedname {
    color: #616161;
    font-size: 14px;
    margin-bottom: 5px;
}

.feed > p.description {
    font-size: 13px;
    margin-bottom: 8px;
    color: #616161;
}

.feed > div.controls-article {
    display: flex;
}

.feed > div.controls-article button {
    border: none;
    background: none;
    font-family: 'inter';
    font-size: 13px;
    font-weight: bold;
    color: #616161;
    margin-right: 20px;
    cursor: pointer;
}

.feed > div.controls-article button:hover {
    color: #2c75ff;
}

.feed > div.controls-article button i {
    font-size: 19px;
}

.feed > div.controls-article > p.publicationDate {
    font-size: 13px;
    color: #616161;
    margin-top: 5px;
}

div.msg_empty {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   color: #616161; 
   height: 330px;
}

div.msg_empty img {
    margin-bottom: 20px;
}

div.msg_empty h2.subtitle_min {
    font-size: 19px;
    margin-bottom: 5px;
}

div.msg_empty p {
    font-size: 14px;
}

div#controlVermais {
    padding: 5px 10px;
    margin-bottom: 20px;
    width: calc(80%);
}

div#controlVermais button {
    display: flex;
    width: 100%;
    padding: 10px 6px;
    cursor: pointer;
    border: 0.125rem solid #e7e7e7;
    border-radius: 8px;
    background-color: #fff;
    font-family: 'inter';
    font-weight: bold;
    color: #616161;
    transition: all 0.13s;
}

div#controlVermais button:hover {
    color: #2c75ff;
    border-color: #2c75ff;
}


div#myFilters > div.info {
    margin: 10px 0;
    padding: 10px ;
}

div#myFilters > div.info > h2 {
    font-size: 17px;
    margin-bottom: 5px;
    color: #5c5b5b;
}

div#myFilters > div.info > span {
    font-size: 14px;
    color: #616161;
}


.toast {
    display: flex;
    margin: 15px 0;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #40454b;
}

.toast span {
    margin: 8px 12px;
}

.toast i {
    margin-right: 10px;
    font-size: 1.1rem;
    font-weight: bold;
}

.toast.success {
    background-color: #effaf6;
    border: 2px solid #73ccb0;
}

.toast.success i {
    color: #3b8d73;
}

.toast.invalid {
    background-color: #fdf4eb;
    border: 2px solid #eeab5e;
}

.toast.invalid i {
    color: #b37b3b;
}

.toast.error {
    background-color: #fbeded;
    border: 2px solid #e26771;
}

.toast.error i {
    color: #e26771;
}


div#toastMessages {
    display: flex;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 100%;
    max-width: 90%;
    justify-content: center;
    align-items: center;
    margin: 2px 0;
    flex-direction: column;
}

div#copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    color: #616161;
    font-size: 14px;
}

div#copyright p.pyear {
    margin: 0px 5px;
}