:root {
    --container-width: 100vw;
    --container-height: 100vh;

    --background-color-primary: #0069d9;
    --background-color-secondary: #6c757d;
    --background-color-tertiary: #218838;

    --color-primary: #000;
    --color-secondary: #fff;
    --color-tertiary: #58585a;
    --color-quartenary: #404040;
    --color-subtitle: #5d5d5d;

    --color-title: #1f1f1f;
    --color-subtitle: #666;

    --font-primary: 'Roboto', sans-serif;

    --font-size-title: 24px;
    --font-size-subtitle: 13px;
    --font-size-text: 12px;
    --font-size-small: 0.75rem;

    --border-radius-input: 3px;
    --border-radius-button: 4px;
    --border-radius-card: 0.5rem;
    --border-radius-modal: 4px;

    --shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);

    --modal-width: 60vw;
    --modal-height: 40vh;

    --neutral-color-dark-01: #1A1A1A;
    --neutral-color-dark-03: #404040;
    --neutral-color-dark-04: #5D5D5D;
    --neutral-color-dark-05: #888888;
    --neutral-color-light-01: #AFAFAF;
    --brand-color-primary-light: #87C984;
    --status-color-ok-base: #00AF39;
    --brand-color-primary-base: #00A335;
    --brand-color-primary-dark: #00863F;
    --status-color-critical-base: #CC1414;
    --status-color-critical-light: #E65C5C;
    --status-color-alert-base: #F8C43E;
    --status-color-alert-dark: #CC8F00;
    --status-color-alert-light: #FFD880;
    --neutral-color-dark-05: #888888;
    --neutral-color-light-04: #FAFAFA;
    --neutral-color-light-05: #FFFFFF;
    --product-color-lightest: #95ADB7;
    --neutral-color-light-03: #E2E2E2;
    --status-color-ok-lightest: #E7FFE6;
    --brand-color-secondary-lightest: #627F87;
}

* {
    font-family: 'Open Sans', sans-serif;
}

body {
    zoom: 0.95;
}


#page-body {
    width: 95%;
    height: 90%;
    background-color: white;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
}

#title-page {
    font-weight: bold;
    font-size: 22px;
    color: var(--neutral-color-dark-03);
    margin-bottom: 5px;
}

#page-body::-webkit-scrollbar {
    width: 10px;
}

#page-body::-webkit-scrollbar-thumb {
    background-color: #00863F;
    border-radius: 20px;
    border: 3px solid white;
}

.field-name {
    width: 25%;
    min-height: 40px;
    background-color: white;
    color: #797979;
    font-weight: 500;
    border-radius: 3px;
    box-shadow: 0 1px 3px 0 rgb(64, 64, 64, 0.2);
    display: inline-flex;
    align-items: center;
    font-size: small;
    padding-left: 1%;
}

/* ICONES */
.setting-icon,
.eye-icon {
    font-size: 20px;
    cursor: pointer;
    color: #00A335;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
}

.icon-format {
    font-size: 20px;
    cursor: pointer;
    color: var(--brand-color-primary-base);
}

.icon-format2 {
    font-size: 20px;
    cursor: pointer;
    color: var(--brand-color-primary-base);
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
}

.check-circle-icon {
    font-size: 20px;
    color: #00A335;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
}

.cancel-icon {
    font-size: 20px;
    color: #E86969;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
}

.delete-icon {
    font-size: 20px;
    cursor: pointer;
    color: #E86969;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
}

.logout-icon {
    font-size: 20px;
    cursor: pointer;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 25,
        'opsz' 48;
}

.arrow-down-icon {
    display: none;
    margin-right: 15px;
    float: right;
    font-size: 20px;
    cursor: pointer;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 25,
        'opsz' 48;
}

#sidebar {
    transition: 500ms;
    background-image: linear-gradient(to bottom right, #2C383D, #181E22) !important;
    color: white;
    width: 300px;
    height: 150vh;
    display: inline-block;
    overflow: hidden;
}

#sidebar-mobile {
    display: none;
    background-image: linear-gradient(to bottom right, #2C383D, #181E22) !important;
    color: white;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1000;
    position: absolute;
}

#sidebar.sidebar-toggle {
    transition: 500ms;
    background-image: linear-gradient(to bottom right, #2C383D, #181E22) !important;
    color: white;
    width: 55px;
    height: 100vh;
    display: inline-block;
    overflow: visible;
}

#buttons-closed {
    display: none;
}

#buttons-closed.visible {
    display: inline-block;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#div-btn-menu {
    margin-top: 10px;
}

#title-intelbras-mobile {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    color: #00A94C;
    font-size: 30px;
    font-weight: bold;
}

#title-intelbras {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    color: #00A94C;
    font-size: 30px;
    font-weight: bold;
}

#title-intelbras.closed {
    visibility: hidden;
}

.table-div table {
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: normal;
    border-collapse: collapse;
    border: 1px solid rgb(222, 222, 222);
    box-shadow: 0px 3px 6px #00000029;
    table-layout: auto;
}

.menu-list {
    height: 75vh !important;
    overflow: auto;
    overflow-x: hidden;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
}

.menu-list::-webkit-scrollbar {
    width: 4px;
}

.menu-list::-webkit-scrollbar-thumb {
    background-color: white;
    border-radius: 50px;
}

.menu-list-mobile {
    /* height: 75vh !important; */
    overflow: auto;
    overflow-x: hidden;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
}

.menu-list-mobile::-webkit-scrollbar {
    width: 4px;
}

.menu-list-mobile::-webkit-scrollbar-thumb {
    background-color: white;
    border-radius: 50px;
}

#content-body {
    display: inline-block;
    width: 100%;
    height: 100vh;
}


#navbar {
    background-color: #FFFFFF;
    box-shadow: 5px 5px 5px rgba(105, 105, 105, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 60px;
    padding: 20px;
}

.project-tab #tabs .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #00863F;
    background-color: transparent;
    border-color: transparent;
    border-bottom: 4px solid;
    font-size: 14px;
    font-weight: bold;
}

#tabs {
    padding-bottom: 20px;
}

#icon-menu-mobile {
    cursor: pointer;
    margin-left: 15px;
    margin-top: 5px;
}

#icon-menu {
    cursor: pointer;
    margin-left: 15px;
    margin-top: 5px;
}

.item-menu.showMenu .submenu-list {
    display: block;
}

.item-menu.showMenu i {
    display: inline;
}

.submenu-list {
    padding-left: 0;
    display: none;
    list-style-type: none;
}

.submenu-list-li a {
    text-decoration: none;
    color: white;
    display: block;
    height: 30px;
    width: 100%;
}

.submenu-list-li {
    white-space: nowrap;
    cursor: pointer;
    font-size: 10px;
    padding-left: 35px;
    text-transform: uppercase;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #1A2326;
    height: 30px;
    text-decoration: none;
    color: white;
    text-align: left;
    width: 100%;
    line-height: 30px;
}

.submenu-list-li:hover {
    border-left: 3px solid #00A335;
    font-weight: bold;
    background-image: linear-gradient(to right, #181E22, #181E22, #2C383D) !important;
}

.button-menu {
    overflow: none;
    white-space: nowrap;
    cursor: pointer;
    font-size: 13px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #1A2326;
    height: 40px;
    text-decoration: none;
    color: white;
    text-align: left;
    width: 100%;
    line-height: 37px;
}

.button-menu:hover {
    border-left: 3px solid #00A335;
    font-weight: bold;
    background-image: linear-gradient(to right, #181E22, #181E22, #2C383D) !important;
}

.button-menu i {
    display: inline-block;
    font-size: 15px;
    margin-left: 15px;
}

.bx.bxs-chevron-down {
    display: none;
    margin-top: 12px;
    margin-right: 15px;
    float: right;
}

.title-btn-menu-p {
    display: inline-block;
    margin-left: 5px;
}

.title-btn-menu {
    display: inline-block;
    text-decoration: none;
    color: white;
}

.menu-list.closed {
    display: none;
}

#toggle-btn-mob {
    height: 60px;
    width: 60px;
    display: none;
    align-items: center;
    justify-content: center;
    float: left;
}

#toggle-btn-mob button {
    height: 45px;
    width: 45px;
    border: none;
    border-radius: 50%;
    color: white;
    background-color: #2C383D;
}

#user-circle {
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    margin-right: 15px;
    position: relative;
}

#user-circle button {
    height: 50px;
    width: 50px;
    border: none;
    border-radius: 50%;
    color: #045C2F;
    background-color: #BEDCBC;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

#user-circle .dropdown-content {
    display: none;
    position: absolute;
    background-color: #FFFFFF;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    margin-top: 120px;
    margin-right: 60px;

}

.dropdown-content a {
    cursor: pointer;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.pabx-logo {
    width: 100px;
    margin-left: 10px;
}

.intelbras-logo {
    width: 140px;
}

.btn-group.dropend {
    border: none;
    border-radius: 0px;
    width: 100%;
    height: 40px;
}

.btn-group.dropend button {
    border: none;
    border-radius: 0px;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-bottom: 1px solid #1A2326;
    cursor: pointer;
    color: white;
}

.btn-group.dropend:hover {
    border-left: 3px solid #00A335;
    background-image: linear-gradient(to right, #181E22, #181E22, #2C383D) !important;
}

.btn-group.dropend .dropdown-menu {
    background-image: linear-gradient(to bottom right, #2C383D, #181E22) !important;
    overflow: auto;
    max-height: 40vh;
}

.btn-group.dropend .dropdown-menu::-webkit-scrollbar {
    width: 4px;
}

.btn-group.dropend .dropdown-menu::-webkit-scrollbar-thumb {
    background-color: white;
    border-radius: 50px;
}

.btn-group.dropend .dropdown-menu li a {
    color: white;
    font-size: 12px;
    text-transform: uppercase;
}

.btn-group.dropend .dropdown-menu li a:hover {
    background-image: linear-gradient(to right, #098C34, #194E31) !important;
}

.form-check-input {
    border: none;
}

.form-switch .form-check-input:checked {
    background-color: #00A335;
}

.form-switch .form-check-input:focus {
    box-shadow: none;
}

.form-check-input {
    background-color: #E1E1E1;
}


/* Tabela */
.table-div table {
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: normal;
    border-collapse: collapse;
    border: 1px solid rgb(222, 222, 222);
    box-shadow: 0px 3px 6px #00000029;
    table-layout: auto;
}

.table-div table th {
    padding: 8px;
    font-weight: normal;
}

.table-div table tbody td {
    padding: 4px;
}

.table-div table tr {
    padding: 10px;
}

.table-div table thead tr {
    background-color: #5D5D5D;
    color: white;
}

.table-div table tbody tr {
    border-top: 1px solid rgb(222, 222, 222);
}

.table-div table tbody tr:first-child {
    border-top: none;
}

table tbody tr:hover {
    background-color: #e5e6e7;
}



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

#label-whatsapp-nome {
    font-size: 12px;
    width: 50%;
    padding-right: 20px;
}

.whatsapp-select-options {
    border: 1px solid;
    border-radius: 3px;
    width: 40%;
    height: auto;
    align-items: center;
    padding: 10px;
    border-color: #DEE2E6;
    font-size: 12px;
}

#nome,
#nome-altera,
.div-modal-whatsapp .whatsapp-select,
.modal-config .whatsapp-select {
    display: block;
    border: 1px solid;
    border-radius: 3px;
    width: 100%;
    height: 35px;
    align-items: center;
    padding: 10px;
    border-color: #DEE2E6;
    font-size: 12px;
}

#label-mensagem,
#label-mensagem-altera {
    font-size: small;
    width: 100%;
    min-height: 25%;
}

#label-finaliza-op {
    font-size: small;
    width: 50%;
    padding-right: 20px;
}

#label-finaliza-cl {
    font-size: small;
    width: 50%;
}

#label-msg-pronta {
    font-size: small;
    width: 100%;
}


/* Estilização de */
#filter-inside {
    display: flex;
    border: 1px solid #888888;
    border-radius: 3px;
    width: 100%;
    height: 40px;
    align-items: center;
}

#filter-icon {
    font-size: 24px;
    display: inline-block;
    border: none;
    min-width: 30px;
    padding-left: 5px;
}

#filter-input-chat {
    display: inline-block;
    border: none;
    width: 100%;
}

#filter-input {
    display: inline-block;
    border: none;
    width: 100%;
}

#search {
    display: inline-block;
    border: none;
    width: 100%;
}


#clear-filter {
    border: none;
    height: 100%;
    background: transparent;
    display: none;
}

#filter-button {
    font-size: 10px;
    display: inline-block;
    border: none;
    min-width: 110px;
    height: 100%;
    background-color: #3E5055;
    color: white;
    border-radius: 0px 1px 1px 0px;
}

#icon-config-act {
    color: #00A335;
    padding-right: 5px;
}

#icon-delete-act {
    color: #E86969;
}

#field-name {
    width: 25%;
    min-height: 35px;
    background-color: white;
    color: #797979;
    font-weight: 500;
    border-radius: 3px;
    box-shadow: 0 1px 3px 0 rgb(64, 64, 64, 0.2);
    display: inline-flex;
    align-items: center;
    font-size: small;
    padding-left: 1%;
}

*::-webkit-scrollbar {
    width: 10px;
}

*::-webkit-scrollbar-thumb {
    background-color: #00863F;
    border-radius: 20px;
    border: 3px solid white;
}

.form-select:focus {
    outline: none;
    box-shadow: none;
    border-color: #00A335;
}

.form-check-input:checked {
    background-color: #00863F;
    border-color: #00863F;
}

input:focus,
textarea:focus {
    outline: none;
    box-shadow: none;
    border-color: #00A335 !important;
}

input:focus,
textarea:focus {
    outline: none;
    box-shadow: none;
    border-color: #00A335 !important;
}

input:disabled {
    cursor: not-allowed;
    background-color: #E2E2E2;
    color: #AFAFAF;
    border: 1px solid #888888 !important;
}

.form-check-input:focus {
    box-shadow: none !important;
    border-color: #ccc !important;
}

.pagination {
    margin: 2px;
    padding: 2px 8px !important;
    text-decoration: none;
    color: #000000;
    border: 1px solid #707070;
    font-size: 12px;
}

.pagination.active {
    background-color: #E2E2E2;
}

@media screen and (max-width: 900px) {
    #toggle-btn-mob {
        display: flex;
    }

    #sidebar {
        display: none;
    }

    #sidebar-mobile.open {
        display: block;
    }

    #sidebar.sidebar-toggle {
        display: none;
    }

    .pabx-logo {
        margin-left: 0px;
    }
}