.duration {
    width: 15%;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    border-color: #1DC116;
    font-size: 1.5em;
    vertical-align: middle;
}

.duration-info{

    height: 70%;
    width: 100%;
    text-align: center;
}

.agenda-item {
    box-shadow: 3px 3px 3px #888888;
    border-radius: 10px;
    margin-right: 15Px;
}

.agenda-item-info {
    background-color: #ffffff;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 60%;
}

.agenda-container{
    overflow-y: scroll;
   max-height: 78vh;
    padding-bottom: 1%;
}

.foto{
    border-radius: 100px;
    height: 150px;
    width: 150px;
}



/*ACCORDION CLASS */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.accordion:active, .accordion:hover {
    background-color: #ccc;
}

.accpanel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}


/* MY CHAT CLASS*/

.my-chat-text{

}


/*Colors*/

.light-blue-btn{
    border: solid 2px #0071bc;
    border-radius: 5px;
    color: #000000;
    background-color: #c0e9ff;
}
.light-green-btn{
    border: solid 2px #22b573;
    border-radius: 5px;
    color: #000000;
    background-color: #9ee5c1;
}
.light-orange-btn{
    border: solid 2px #f7931e;
    border-radius: 5px;
    color: #000000;
    background-color: #ffd4ae;
}
.light-red-btn{
    border: solid 2px #dd3131;
    border-radius: 5px;
    color: #000000;
    background-color: #ffc0c0;
}
.dark-blue-badge{
    background-color: #0071bc;
    border-color: #0071bc;
}

/*Annotations*/
.top-right-panel-annotation{
    position: absolute;
    top:3%;
    right:3%;
    color: grey;
    font-size: 0.9vw;
}

.top-left-panel-annotation{
    position: absolute;
    top:3%;
    left:3%;
    color: grey;
    font-size: 0.9vw;
}

.bottom-right-panel-annotation{
    position: absolute;
    bottom:3%;
    right:3%;
    color: grey;
    font-size: 0.9vw;
}

.bottom-left-panel-annotation{
    position: absolute;
    bottom:3%;
    left:3%;
    color: grey;
    font-size: 0.9vw;
}

/*Danger Annotations*/
.top-left-panel-danger{
    position: absolute;
    top:3%;
    left:3%;
    color: #dd3131;
    font-size: 0.9vw;
}
.top-right-panel-danger{
    position: absolute;
    top:3%;
    right:3%;
    color: #dd3131;
    font-size: 0.9vw;
}

.bottom-left-panel-danger{
    position: absolute;
    bottom:3%;
    left:3%;
    color: #dd3131;
    font-size: 0.9vw;
}

.bottom-right-panel-danger{
    position: absolute;
    bottom:3%;
    right:3%;
    color: #dd3131;
    font-size: 0.9vw;
}

/*Avatar*/

.avatar-circle {
    width: 50px;
    height: 50px;
    background-color: #FFC107;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.initials {
    position: relative;
    top: 12px; /* 25% of parent */
    font-size: 25px; /* 50% of parent */
    line-height: 25px; /* 50% of parent */
    color: #fff;
    font-weight: bold;
}