/*---------------------- Custom style -----------------------*/
.tvcp-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: calc(100% - 18px);
}

.tvcp-container > div {
    margin-top: 10px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    background: rgba(61, 86, 110, 0.3);
    height: 56px;
}

.tvcp-container > div > * {
    margin-left: 20px;
}

.tvcp-container .bg-color {
    width: 250px;
    cursor: pointer;
    height: 30px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    border: 1px solid rgba(3, 201, 169, 0.6);
    border-radius: 3px 3px 3px 3px;
}

.tvcp-container .bg-color .color {
    width: 50px;
    height: 100%;
    background: red;
}

.tvcp-container .bg-color .title {
    display: -webkit-flex;
    display: flex;
    height: 100%;
    -webkit-align-items: center;
    align-items: center;
    width: calc(100% - 30px);
    -webkit-justify-content: center;
    justify-content: center;
    background: #fff;
}

.success-db {
    width: calc(100% - 18px);
    background: #2CC36B;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    height: 30px;
}

.error-db {
    width: calc(100% - 18px);
    height: 30px;
    background: #EA6153;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.tvcp-container .tvcp-save {
    width: 30%;
    height: 50px;
    border: none;
    outline: none;
    cursor: pointer;
    margin: 20px auto 0;
    background: #9AB2CD;
}