*{
    box-sizing: border-box;
}
body{
   margin: 0px;
   display: flex;
   flex-direction: row;
   
}

/* Dashboard */

.side_container{
   
   min-height: 100%;
   min-width: 12rem;
   background-color: blueviolet;
   position: fixed;
   z-index: 100;
   align-content: center;

}

.add_toBucket{
   width: 50%;
   margin-bottom: 2rem;
   border-radius: 20px;
   border-color: black;
   height: 50px;
   font-family : cursive;
   margin-top: 20rem;
   margin-left: 2.5rem;
}

.add_toBucket:hover {
   background-color: #ffd79d;   
}


/* Modal */

.main_container{
   position: relative;
   overflow: auto;
   margin-right: 12rem;
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   flex-wrap: wrap;


}

.division{
   position: relative;
   min-height: 100vh;
   min-width : 19.5rem;
   font-family: cursive;
   text-align: center;

}

.inside{
   position:absolute;
   min-height: 100%;
   min-width: 18rem;
   border: 1px;
   margin-left: 1.9rem;
   background-color: rgb(252, 252, 164);
   box-shadow: 1px 1px 8px rgb(255, 179, 86);
}


.modal_container{
   position: absolute;
   background-color: peachpuff;
   align-self: center;
   margin-left: calc((100vw - 12rem)/2);
   height: 30rem;
   width: 30rem;
   display: flex;
   flex-direction: column;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 2px 2px 2px rgba(0,0,0,0.24);
   border-radius: .25rem;
}

.fa-times-circle{
   display: inline-block;
   position: relative;
   padding-left: 97%;
}

.title_container{
   height: 80%;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
}

.task_name{
   width: 80%;
   align-self: center;
   font-family: cursive;

}

.description{
   align-self: center;
   width: 80%;
   height: 60%;
   font-family: cursive;
}

.choose_priority{
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   font-family: cursive;
   
}


.savebtn{
   width: 100%;
   display: flex;
   justify-content: center;
}

.save_btn{
   margin-top: 4%;
   border-radius: 20px;
   font-family: cursive;
   border-color: black;
   background-color: white;
}

/*------------------------Individual Tickets--------------------------*/

.ticket_container{
   position: relative;
   display: flex;
   flex-direction: column;
   height: 16rem;
   width:16rem;
   margin: 25px 25px 25px 25px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.ticket_container:hover{
   box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.icon_container{
   position: relative;
   width: 100%; 
   padding-right: 14rem;
   background-color: rgb(152, 248, 255);

}
.kebab{
   position: relative;
   display: inline-block;
   
}

.dropdown_content{
   display: none;
   position: absolute;
   background-color: #ffffff;
   min-width: 16px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
   font-family: cursive;
}

.icon_container:hover .dropdown_content {
   display: block;}

.dropdown_content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
}

.dropdown_content a:hover {
   background-color: peachpuff}

.fa-ellipsis-h{
   cursor: pointer;
   position: relative;
   display: inline-block;
}

.information{
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   font-family: cursive;
   border-radius: 0px 0px 100px;
   background-color: rgb(152, 248, 255);

}

.task_title{
   width: 15rem;
   height: 50%;
   text-align: center;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   
}

.sub_information{
   height:  50%;
   width:  100%;
   text-align: center;
}

.id{
   visibility: hidden;
}