/*dashboard*/
.side-bar {
    max-width: 400px;
    min-width: 250px;
}

.menu-section {
    height: 100vh;
    overflow: auto;
    border-left: 1px solid #d1d5db;
    width: 100%;
}

.saludo {
    font-size: 50px;
}

.img-saludo {
    height: 164px;
    display: block;
    margin: auto;
}

.container-side-bar {
    position: relative;
}

.side-items {
    padding: 10px;
    gap: 15px;
    font-weight: 500;
    color: #707070;
    cursor: pointer;
}

    .side-items img {
        filter: invert(47%) sepia(2%) saturate(179%) hue-rotate(78deg) brightness(92%) contrast(88%);
    }

    .side-items.selected img {
        filter: invert(99%) sepia(99%) saturate(0%) hue-rotate(303deg) brightness(103%) contrast(102%);
    }

    .side-items p {
        font-size: 16px;
    }

    .side-items i {
        font-size: 18px;
    }

.items-center span {
    font-size: 16px;
}
.log-out {
    margin-left: 10px;
    position: absolute;
    bottom: 20px;
}

.avatar{
    flex-direction:column;
}

.avatar img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    flex: 1 1 0%;
}

.avatar h1 {
    flex: 1 1 100%;
}


.selected {
    background: #009bdd;
    color: white;
}


.section-btn {
    border-bottom: 2px solid #d90046;
}

aria-selected :active {
    background: red;
}

.tab[aria-selected="true"] {
    color: #d90046;
    border-bottom: 2px solid #d90046;
}

.tab:hover {
    border-bottom: 1px solid #d1d5db;
}

.btn-logout {
    border: none;
    position: fixed;
    bottom: 0;
}

    .btn-logout:focus {
        outline: none;
    }

/*Modal*/

.modal {
    position: fixed;
    overflow: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #009bddc2;
    -webkit-overflow-scrolling: touch;
    display: none;
    z-index:100;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

.modal-body {
    background: white;
    width: 400px;
    height: 400px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
}

.body-border {
    display: flex;
    background: #f5f3f36e;
    border-radius: 7px;
    width: 90%;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border: 2px dashed gray;
    height: 90%;
}

.upload-container {
    position: relative;
}

.avatar-uploaded {
    opacity: 0.5;
    border-radius: 100%;
    width: 220px;
    height: 220px;
}

.img-upload-btn {
    background: #d90046;
    border-radius: 28px;
    font-weight: 500;
    padding: 10px;
    color: white;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

.edit-input {
    display: none;
}


.icon-icon {
    width: 50px;
    filter: invert(44%);
}

.paragraph {
    color: black;
    font-weight: 600;
    text-align: center;
    font-size: 15px;
}

.highlighted-area {
    border: 2px dashed #3b3939 !important;
}

.show-modal {
    display: flex;
}

.disabled-btn {
    opacity: 0.5;
}

.delete-button-Edu {
    background: #009bdd;
    border-radius: 28px;
    margin-left: auto;
}


.delete-button {
    background: #009bdd;
    border-radius: 28px;
}

/*styles del formulario de portagfolio*/
.input-img-container-s, .input-img-container-l, .only-img {
    /*height: 100%;*/
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 20px 0px;
}

.only-img {
    cursor: default;
}

    .only-img img {
        height: 100px;
    }

.input-img-container-s img,
.input-img-container-l img {
    height: 100px;
}

/*Table*/

.btn-atendido {
    background: #009bdd;
    border-radius: 28px;
    visibility: hidden;
}

.contact-row:hover .btn-atendido {
    visibility: visible;
}


.accordion-container__item {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

/*.accordion-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}*/

.item-icon-project {
    height: 15px;
}

/*section productos*/
.dragging {
    opacity: 0.6;
}

.btn-add, .btn-outline-delete {
    text-transform: uppercase;
    background: #009bdd;
    border-radius: 28px;
    margin-left: auto;
    width: auto;
    padding: 0px 40px;
    color: white;
    font-weight: 500;
    height: 40px;
    display: block;
    margin-top: 40px;
}

.btn-outline-delete {
    background: none;
    color: black;
}

.btn-right {
    margin: 0px;
}

.btn-save {
    background: #d90046;
    text-transform: uppercase;
    border-radius: 28px;
    margin-left: auto;
    margin-right:auto;
    width: auto;
    padding: 0px 40px;
    color: white;
    font-weight: 500;
    height: 40px;
    display: block;
    margin-top: 40px;
}

    .btn-save:active {
        outline: none
    }

.btn-add:active {
    outline: none
}


/*switch*/

.switch {
    width: 80px;
    height: 38px;
    background-color: #f9fafb;
    border-radius: 8px;
    display: block;
    position: relative;
    border-width: 1px;
    cursor: pointer;
}

    .switch::after {
        content: '';
        width: 31px;
        height: 31px;
        background: gray;
        display: block;
        left: 3px;
        top: 3px;
        position: absolute;
        border-radius: 8px;
        transition: linear .3s;
    }

.checkbox {
    display:none;
}

    .checkbox:checked + .switch::after {
        left: calc(100% - 34px);
        background: #009bdd;
    }


/*section of summary in tab CV*/
.upload-pdf {
    display: flex;
    width: 300px;
    height: 400px;
    background: #f9fafb;
    justify-content: center;
    align-items: center;
    border: 1px solid #d3d3d3;
    border-radius: 15px;
    margin-top: 15px;
    cursor: pointer;
}

/*section of summary in tab skill*/
.modal-skill {
    background: white;
    width: 600px;
    height: 400px;
    margin: auto;
    display: block;
    padding: 20px;
    border-radius: 7px;
}

.search {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    gap: 5px;
}

    .search img {
        width: 15px;
        height: 15px;
    }


.filter {
    padding-right: 40px;
}


.btn-edit {
    width: 15px;
    height: 15px;
    display: none;
    border: none;
}

    .btn-edit img {
        filter: invert(47%) sepia(24%) saturate(3584%) hue-rotate(167deg) brightness(92%) contrast(101%);
    }

    .btn-edit:focus {
        outline: none;
    }


.item-skill:hover .btn-edit {
    display: block
}

.item-skill-added {
    cursor: pointer;
}

    .item-skill-added:hover .btn-edit {
        display: block
    }

.item-list {
    overflow: auto;
    height: 118px;
}

.btn-add-skill {
    background: #009bdd;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-add-skill img {
        filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(44deg) brightness(102%) contrast(101%);
    }

    .btn-add-skill:focus {
        outline: none;
    }

.btn-delete {
    text-transform: uppercase;
    border-radius: 28px;
    width: auto;
    padding: 0px 40px;
    color: white;
    font-weight: 500;
    height: 40px;
    display: block;
    margin-top: 40px;
    color: black;
}

.save-skill {
    margin: 0px;
    margin-top: 40px;
}

button:focus {
    outline: none;
}

.btn-plus-hidden {
    display: none;
}

/*tab about me*/

/*tab portafolio */
.chips-container {
    display: flex;
    flex-wrap:wrap;
    align-items:center;
    gap: 8px;
    background: #f9fafb;
    border-radius: .5rem;
    border: 1px solid #d1d5db;
    padding:20px;
}

.chip-container {
    background: white;
    padding: 5px 30px 5px 20px;
    position: relative;
    box-shadow: 1px 1px 1px 1px #0202020d;
    border-radius:8px;
    display:flex;
}

.chip-delete{
    position:absolute;
    right:10px;

}