@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Space+Mono:wght@400;500;600;700&display=swap');

:root {
  --font-poppins: 'Poppins', sans-serif;
  --font-roboto: 'Roboto', sans-serif;
  --font-space-mono: 'Space Mono', monospace;
}
  

*{
    box-sizing: border-box;
}

body{
    width: 100%;
    background-color: rgb(17, 17, 17);
    font-family: var(--font-poppins) !important;
}

button, input[type="checkbox"], input[type="radio"]{
    cursor: pointer;
}

.ui-widget{
    font-family: var(--font-poppins) !important;
}

#grpc-form{
    font-family: var(--font-poppins) !important;
}

#grpc-form #grpc-service, #grpc-form #grpc-method{
    font-family: var(--font-roboto) !important;
}

.full-width-heading{
    display: none;
    background-color: rgba(31, 41, 55);
}

#grpc-form{
    background-color: rgb(17, 17, 17);
    padding: 24px 0px !important;
    padding: 24px 0px !important;
}

#grpc-descriptions{
    overflow: hidden;
    width: 100%;
    margin-top: 20px;
    background-color: #1f2929 !important;
    border-radius: 16px;
    padding: 24px;
} 

#grpc-descriptions pre{
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

#grpc-request-raw-tab pre {
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

.ui-tabs .ui-tabs-panel {
    padding: 24px 0px !important;
}

.grpc-tabcontent.ui-tabs-panel {
    padding: 24px 0px !important;
}

.grpc-desc pre {
    margin: 0px;
    border-left: none !important;
    padding-left: 0px;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: -0.6%;
}

#grpc-descriptions pre{
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

#grpc-request-raw-tab pre {
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

.ui-tabs .ui-tabs-panel {
    padding: 24px 0px !important;
}

.grpc-tabcontent.ui-tabs-panel {
    padding: 24px 0px !important;
}

.grpc-desc pre {
    margin: 0px;
    border-left: none !important;
    padding-left: 0px;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: -0.6%;
}

.grpc-form-label{
    color: #fff;
    font-size: 16px;
    text-transform: capitalize;
    margin-right: 35px;
    width: 100% !important;
    text-align: left !important;
}

.grpc-desc{
    width: 95% !important;
}

.grpc-desc tr td{
    width: 40%;
}

#grpc-desc-selects, #grpc-desc-selects tbody, #grpc-desc-selects tbody tr{
    width: 100%;
}

#grpc-desc-selects tbody tr td:first-of-type{
    width: 165px !important;
}

#grpc-desc-selects tbody tr .grpc-form-label {
    text-align: left !important;
}


.grpc-desc button#grpc-descriptions-toggle{
    background-color: rgb(17, 17, 17) !important;
    position: absolute;
    top: 75px !important;
    left: 325px !important;
    height: 15px !important;
}

#grpc-service{
    height: 32px;
    background-color: transparent;
    border-top: 1px 'solid' #fff !important;
    border-right: 1px 'solid' #fff !important;
    border-bottom: 1px 'solid' #fff !important;
    border-left: 1px 'solid' #fff !important;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    padding: 6px 16px;
    cursor: pointer;
}

#grpc-method{
    height: 32px;
    background-color: transparent;
    border-top: 1px 'solid' #fff !important;
    border-right: 1px 'solid' #fff !important;
    border-bottom: 1px 'solid' #fff !important;
    border-left: 1px 'solid' #fff !important;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    padding: 6px 16px;
    cursor: pointer;
}

.grpc-desc button#grpc-descriptions-toggle{
    background-color: rgb(17, 17, 17);
    background-color: rgb(17, 17, 17);
    margin-top: 7px;
    color: #80D4D9;
    height: 20px;
    width: 25px;
}

.grpc-desc tbody tr{
    display: flex !important;
    flex-wrap: wrap !important;
}

#grpc-service-description, #grpc-service-description-end{
    color: #fff;
    font-weight: semibold;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.6%;
}

#grpc-service-description{
    padding-top: 0px;
}

#grpc-method-description{
    color: #80D4D9;
    padding: 16px 0px;
}

#grpc-service-description-end{
    padding-bottom: 0px;
    padding: 16px 0px;
}

#grpc-request-response {
    background-color: rgb(17, 17, 17) !important;
    border: none !important;
}

#grpc-request-response ul.ui-tabs-nav{
    background-color: rgb(17, 17, 17) !important;
    border-bottom: 1px solid #24222D !important;
}

#grpc-request-response li.ui-state-default{
    background-color: transparent !important;
    color: #49454F !important;
    border: transparent !important;
    border-bottom: 2px solid none !important;
    background-color: transparent !important;
    color: #49454F !important;
    border: transparent !important;
    border-bottom: 2px solid none !important;
    border-radius: 0px;
    z-index: 1 !important;
}

#grpc-request-tab-button{
    border-top-left-radius: 8px !important;
}

#grpc-history-tab-button{
    border-top-right-radius: 8px !important;
}

#grpc-request-response li.ui-tabs-active{
    background-color: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #80D4D9 !important;
}

#grpc-request-response li.ui-tabs-active a {
    color: #fff !important;
}

#grpc-request-raw-tab textarea,
#grpc-request-raw-tab .grpc-curl-panel {
    background-color: #1f2929;
    padding: 16px !important;
    border-radius: 4px;
    border-color: transparent;
    font-size: 14px !important;
    font-family: var(--font-space-mono) !important;
    width: 95% !important;
    margin-left: 1px;
}

#grpc-request-raw-tab textarea{
    color: #4AB249;
}

.grpc-invoke::after {
    content: ' ➜';
    background: #00696D;
    -webkit-background-clip: text;
    -webkit-text-fill-color: white;
    background-clip: text;
    color: white;
}

.grpc-invoke, .grpc-history-clear, .grpc-history-save{
    background: #00696D !important;
    color: white;
    padding: 6px 12px;
    border-color: transparent !important;
    border-color: transparent !important;
    border-radius: 6px;
}

#grpc-form button.delete {
    background-color: transparent !important;
    background-color: transparent !important;
    padding: 2px 4px;
    border-color: transparent !important;
    border-color: transparent !important;
    width: 34px;
    height: 30px;
}

#grpc-form .grpc-request-table button.add {
    background-color: transparent !important;
    border: transparent !important;
    width: 34px;
    height: 30px;
    padding-left: 0px;
}

#grpc-container button{
    border-radius: 6px !important;
}

#grpc-history-list button.load {
    background: #80D4D9 !important;
    color: #002021;
    font-weight: 500;
    border: transparent !important;
    margin: 0 12px;
}

#grpc-history-list .history-item-header {
    border-bottom: 1px solid #3F4949;
    display: flex;
    align-items: center;
    height: max-content;
    gap: 8px
}

#grpc-history-list .history-item-header span {
    width: max-content !important;
}

#grpc-history-list .history-item-panel {
    background-color: #1f2929;
    color: #4AB249 !important;
    color: #4AB249 !important;
    border: none;
    padding: 16px;
    font-family: var(--font-space-mono);
}

#grpc-history-list .history-item-panel .history-detail-metadata th, #grpc-history-list .history-item-panel .history-detail-metadata td {
    color: #4AB249 !important;
}

#grpc-history-list .ui-accordion .history-item-header:nth-child(4n-1) {
    background-color: #1a1a1a;

}

.history-detail-heading table {
    color: #4AB249 !important;
}

#grpc-history-list > .ui-accordion:first-child {
    border: 1px solid #3F4949;
    border-radius: 6px;
}

.history-item-time {
    color: white;
    font-weight: 500;
}

.history-item-method,
.history-item-duration {
    color: #FFF;
    font-family: var(--font-roboto);
}

.history-item-messages{
    padding: 0px !important;
}

.history-item-result {
    color: #00CC00;
}

#grpc-history-list .history-item-header .history-item-result.error {
    color: #FFB4AB;
}

#grpc-request-response .grpc-tabcontent.ui-tabs-panel h3   {
    color: #FFF !important;
    font-size: 20px !important;
    line-height: 22px;
    letter-spacing: -0.7%;
    margin-top: 40px;
    margin-bottom: 24px;
}

.grpc-tabcontent hr{
    border: 1px solid #24222D;
    margin: 24px 0px;
}

.grpc-request-raw-container textarea {
    margin-right: 0px !important;
}

#grpc-request-response .grpc-tabcontent.ui-tabs-panel{
    background-color: transparent !important;
}

#grpc-request-form div#root{
    margin-left: 0px !important;
}

#grpc-request-form #root table{
    width: 100%;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 22px !important;
    letter-spacing: -0.7% !important;
    font-family: var(--font-space-mono) !important;
}

#grpc-request-form #root .input_container{
    padding: 4px;
}

#grpc-request-form .grpc-request-table td.array_button + td{
    padding-left: 0px;
}

#grpc-response-headers{
    color: #fff !important;
}

#grpc-response-tab #grpc-response-headers td{
    border: 1px solid #24222D;
}

#grpc-response-tab #grpc-response-trailers td {
    border: 1px solid #24222D;
    border-radius: 4px !important;
}

#grpc-response-tab #grpc-response-trailers .none, #grpc-response-headers .none {
    border: transparent !important;
    color: #fff !important;
}

#grpc-response-tab .grpc-response-textarea {
    background-color: #1f2929 !important;
    border: transparent;
    border-radius: 4px;
    color: #4AB249;
    padding: 16px;
    font-family: var(--font-space-mono);
    width: 95% !important;
}

.grpc-tabcontent{
    background-color: #0E1415 !important;
    border: #0E1415 !important;
}

.grpc-tabcontent h3{
    color: #FFF !important;
    font-size: 20px;
    line-height: 22px;
    letter-spacing: -0.7%;
}

#grpc-request-form div.one-of-3 {
    background-color: #161D1D;
    border: none;
    border-radius: 4px;
    width: 95%;
}

#grpc-request-form div.two-of-3 {
    border: none;
}

#grpc-request-form div.three-of-3 {
    border: none
}

#grpc-request-form th {
    color: #80D4D9;
}

#grpc-request-form textarea {
    width: 100% !important;
}

.message_field .name{
    text-align: left !important;
    color: #FFF;
    font-family: var(--font-space-mono) !important;
}

.message_field .name strong{
    font-size: 16px !important;
    line-height: 22px;
    letter-spacing: -0.7%;
}

.message_field .name em{
    font-size: 14px !important;
    line-height: 22px;
    letter-spacing: -0.7%;
}

.add-row-label{
    color: #FFF;
}

#grpc-request-form td.name {
    font-size: 14px !important;
    line-height: 22px;
    letter-spacing: -0.7%;
}

#grpc-request-form td input[type=checkbox] { 
    background-color: #161D1D !important;
    border: 1px solid #49454F !important;
}

#grpc-request-form #root table tr th{
    font-family: var(--font-poppins) !important;
}

#grpc-request-metadata-form {
    width: 95% !important;
    background-color: transparent;
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.7%;
    background-color: transparent;
    margin: 0px !important;
}

#grpc-request-metadata .grpc-request-table .metadataRow td, #grpc-request-metadata .grpc-request-table .metadataRow th, #grpc-request-metadata .grpc-request-table tbody tr th{
    height: 48px;
    color: #FEF7FF;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.7%;
    border: 1px solid #434B58;
    background-color: transparent;
}

#grpc-request-metadata-form td {
    padding: 0px !important;
}

#grpc-request-metadata .grpc-request-table tbody td .name, #grpc-request-metadata .grpc-request-table tbody td .value{
    background-color: transparent;
    border: none;
    width: 100%;
    height: 100%;
    padding: 0px;
    text-align: center;
    font-family: var(--font-space-mono);
}

#grpc-request-metadata .grpc-request-table tbody .add-row-label{
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1%;
}

#grpc-request-metadata .grpc-request-table tbody tr td:first-child{
    padding: 10px !important; 
    width: 40px !important;
}

#grpc-curl-text{
    color: #4AB249 !important;
    font-family: var(--font-space-mono);
}

#grpc-request-timeout{
    color: #fff ;
    position: relative;
}

#grpc-request-timeout input{
    background-color: #111111;
    color: #FFF;
    margin-right: 12px;
    border-radius: 4px;
    border: 1px solid #434B58;
    text-align: left;
    padding: 6px 0px 4px 16px;
    margin-left: 1px;
}

.seconds-text{
    color: #fff;
    font-size: 12px;
    line-height:16px;
    letter-spacing: 0.4%;
    text-transform: capitalize;
    background-color: #111111;
    border-right: 5px solid #111111;
    border-left: 5px solid #111111;
    position: absolute;
    top: -8px;
    left: 16px
}
    

.grpc-file-button {
    background-color: #80D4D9 !important;
    color: #002021 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    line-height: 20px;
    letter-spacing: 0.1%;
    width: fit-content !important;
}

textarea{
    width: 95% !important;
}

input[type="text"]{
    width: 163.5px;
    border: 1px solid #434B58;
}

textarea, input[type="text"]{
    background-color: #161F1F;
    color: #FFF;
    font-size: large !important;
    font-family: var(--font-space-mono) !important;
    margin-right: 12px;
    border-radius: 4px;
    border: 1px solid #434B58;
    text-align: left;
    padding: 4px 0px 4px 16px;
    font-size: 14px !important;
}

#grpc-request-response li.ui-tabs-tab:first-child {
    border-top-left-radius: 8px;
}

#grpc-request-response li.ui-tabs-tab:last-child {
    border-top-right-radius: 8px;
}

#grpc-response-trailers {
    color: #fff !important;
}

.input_container table tr.message_field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100% !important;
}

#root .input_container .grpc-request-table {
    width: 100% !important;
}

.input_container table tr.message_field td:last-child {
    flex: 1;
}

#grpc-request-form td.toggle_presence {
    width: max-content !important;
}