body{
    font-family: 'Nunito', sans-serif;
    color: white;
    background: #1d1d1d;
}

div#VideoList {
    width: 250px;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: auto;
    position: absolute;
    padding-left: 20px;
    box-sizing: border-box;
    border-right: 1px solid #313131;
}

div#VideoContainer {
    width: 450px;
    top: 0;
    left: 250px;
    bottom: 0;
    overflow: auto;
    position: absolute;
    padding: 20px;
    box-sizing: border-box;
}

div#BreakdownDetails {
    position: absolute;
    left: calc(250px + 450px);
    top: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    border-left: 1px solid #313131;
    padding: 0px 20px;
    max-width: 600px;
}

.btn {
    padding: 8px 0px;
    border-radius: 8px;
    box-shadow: 0px 3px 7px -5px #555;
    margin: 15px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 120px;
    box-sizing: border-box;
    font-weight: bold;
    background: none;
    border: 1px solid rgb(229 121 83);
    color: rgb(229 121 83);
}

.videoItem {
    padding: 10px;
    cursor: pointer;
}

.videoItem:hover {
    background: #ffffff0f;
}

.videoItem.selected {
    background: #e5795369;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div#VideoList .flex {
    padding-right: 20px;
}

div#VideoContainer video {
    width: 100%;
}

input {
    margin-bottom: 10px;
    width: 100%;
    height: 100%;
    padding: 9px;
    outline: none;
    border: 1px solid #a9a9a92e;
    border-radius: 4px;
    font-family: 'Nunito', sans-serif;
    box-sizing: border-box;
    background: #ffffff14;
    color: #adadad;
}

.breakItem {
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #313131;
    padding: 15px 0px;
}

.breakItem select {
    font-size: 12px;
    width: 100%;
    height: 100%;
    padding: 1px 9px;
    outline: none;
    border: 1px solid #a9a9a92e;
    border-radius: 4px;
    font-family: 'Nunito', sans-serif;
    box-sizing: border-box;
    background: #ffffff14;
    color: #adadad;
}

.breakItem h5 {
    margin: 0px;
}

.deleteItemBtn {
    color: #ff000057;
    cursor: pointer;
}

.deleteItemBtn:hover {
    color: red;
}

.time small {
    font-weight: bold;
    margin-right: 5px;
    font-size: 10px;
}

.time {
    font-size: 20px;
    font-weight: bold;
}

.smallText {
    font-size: 11px;
}

.smallText>div {
    margin-left: 20px;
}

.smallText>div span {
    font-weight: bold;
}

.breakItem.selected {
    background: #f2f2f20f;
    padding: 15px 20px;
    margin: 0px -20px;
}

div#Wrapper {
    position: absolute;
    width: 100%;
    max-width: calc(250px + 450px + 600px);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* margin: auto; */
}

canvas#canvas1,#canvas2 {
    overflow: auto;
    opacity: 0;
    position: absolute;
    z-index: -1;
    pointer-events: none;
}