.async-api-modal-body {
    width: 100%;
    height: 200px;
    border: 1px solid black;
}

.async-api-view-yaml-container {
    width: calc(50% - 2px);
    float: left;
    overflow-y: auto;
    height: 100%;
}

.async-api-view-spec-container {
    width: calc(50% - 2px);
    float: right;
    /*border: 1px solid red;*/
    height: 100%;
    overflow: scroll;
}

.async-api-generator-container {
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: scroll;
}

.async-api-generator-container label:not(.skip) {
    color: #fff;
}

.async-api-generator-container h4 {
    color: #fff;
}

.async-api-generator-container .button-container {
    margin-left: 15px;
}

.async-api-generator-container textarea {
    margin-bottom: 10px;
}

.async-api-generator-container input[type=radio] {
    margin-right: 5px;
    margin-left: 5px;
}

.clear-fix {
    clear: both;
}

.asyncAPi {
    right: 650px;
}

.async-api-source-sink-list {
    display: block;
    overflow: hidden;
    width: 100%;
    padding: 10px;
}

.toggle-view-button:hover, .async-api-view-button:hover {
    color: #fff;
    transition: 0.15s;
}

.toggle-view-button, .async-api-view-button {
    transition: 0.15s;
    font-weight: bold;
    color: #333;
    width: 100%;
    background-color: #6aa53f;
    margin-bottom: 10px;
}

.toggle-view-button, .async-api-add-update-button {
    transition: 0.15s;
    font-weight: bold;
    color: #333;
    width: 100%;
    background-color: #ea5829;
    margin-bottom: 10px;
}

.toggle-view-button, .asyncbtn-to-code-view {
    transition: 0.15s;
    font-weight: bold;
    color: #333;
    width: 100%;
    background-color: #6aa53f;
    margin-bottom: 10px;
}

.asyncapitooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/*!* Tooltip text *!*/
/*.asyncapitooltip .asyncapitooltiptext {*/
/*    visibility: hidden;*/
/*    !*width: 120px;*!*/
/*    background-color: black;*/
/*    color: #fff;*/
/*    text-align: center;*/
/*    padding: 5px 0;*/
/*    border-radius: 6px;*/
/*    border-color: #eee;*/
/*    !* Position the tooltip text - see examples below! *!*/
/*    position: absolute;*/
/*    z-index: 1;*/
/*}*/

/*!* Show the tooltip text when you mouse over the tooltip container *!*/
/*.asyncapitooltip:hover .asyncapitooltiptext {*/
/*    visibility: visible;*/
/*    color: #fff;*/
/*    background: #000;*/
/*    border-color: #eee;*/
/*    border: 1px solid #eee;*/
/*    top: -50px;*/
/*    padding: 5px;*/
/*    width: 100%;*/
/*}*/

.asyncapi__channels > div {
    background: rgba(51 122 183 0.3);
}

.asyncapi .text-sm {
    font-size: 1.0rem;
}
