input.vs__search {
    border: none;
}

.vs--searchable .vs__dropdown-toggle {
    padding: 4px 10px 6px 10px !important;
    border: solid 1px #ededed;
}

.style-chooser .vs__search::placeholder,
.style-chooser .vs__dropdown-toggle,
.style-chooser .vs__dropdown-menu {
    background: #ffffff;
}

.v-select .vs__dropdown-menu li {
    padding: 14px !important;
    border-bottom: 1px solid #eee;
    font-size: 12px;
}

.v-select .vs__dropdown-menu li img {
    padding: 0 6px 0 0;
    border: 0 none;
    position: relative;
    vertical-align: middle;
    width: 60px;
    margin-right: 15px;
}

.v-select .vs__dropdown-menu li:hover,
.vs__dropdown-menu li:visited,
.vs__dropdown-menu li:focus,
.vs__dropdown-menu li:focus-within,
.vs__dropdown-menu li:active {
    background-color: #f99a00;
}

.v-select .vs__dropdown-menu li.highlight {
    background-color: #f99a00;
}

.btn-primary {
    border-radius: 6px;
    background-color: #f99a00 !important;
    border: solid 1px #f99a00 !important;
}

.vue-form-wizard.md .wizard-navigation .wizard-progress-with-circle {
    top: 20px !important;
    height: 3px !important;
}

.vue-form-wizard.md .wizard-icon-circle {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
}

.vue-form-wizard.md .wizard-nav-pills>li.active>a .wizard-icon {
    font-size: 12px !important;
}

.vue-form-wizard .wizard-icon-circle .wizard-icon {
    font-style: normal !important;
}

.vue-form-wizard .wizard-tab-content {
    padding: 0 !important;
}

.title-form-pengiriman hr {
    border: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.vue-form-wizard .wizard-header {
    padding: 10px !important;
}

.vue-form-wizard .wizard-nav-pills {
    margin-top: 0;
    position: relative;
    text-align: left !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.vue-form-wizard .wizard-nav-pills a,
.vue-form-wizard .wizard-nav-pills li {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: unset !important;
    -ms-flex-align: unset !important;
    align-items: unset !important;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.ui.dropdown .menu .selected.item,
.ui.dropdown.selected {
    color: #ffffff !important;
    background-color: #f99a00 !important;
}

.vs__selected-options input{
    min-height: 24px !important;
}

.vs__selected{
    font-size: 12px;
}

.frameworks {
    display: flex;
    flex-wrap: wrap;
}
.frameworks .vtc {
    width: 80%;
    height: 150px;
    margin-right: -5px;
}
.frameworks .stroke {
    stroke-width: 2;
}
.frameworks .fill {
    opacity: 0.2;
}
.frameworks .active-line {
    stroke: rgba(0, 0, 0, 0.2);
}
.frameworks .point {
    display: none;
}
.frameworks .point.is-active {
    display: block;
}
.framework {
    width: 100%;
}
@media (max-width: 699px) {
    .framework:nth-child(n + 2) {
        margin-top: 30px;
   }
    .framework:nth-child(n + 4) {
        display: none;
   }
}
@media (min-width: 700px) {
    /* .framework {
        width: calc(50% - 25px);
   } */
    .framework:nth-child(2n) {
        margin-left: 50px;
   }
    .framework:nth-child(n + 3) {
        margin-top: 50px;
   }
}
.framework__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.framework__name {
    /* width: 150px; */
}
.framework__period {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.5;
}
.framework__period-icon {
    display: block;
    height: 10px;
    width: auto;
    margin-right: 5px;
}
.framework__period-text {
    font-size: 11px;
    line-height: 16px;
    white-space: nowrap;
}
.framework__data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 150px;
}
.framework__downloads {
    font-size: 24px;
}

.framework.paket {
    border-bottom: 2px solid rgba(57, 175, 119, 0.2);
}
.framework.pengiriman {
    border-bottom: 2px solid rgba(97, 218, 251, 0.2);
}
.framework.perjalanan {
    border-bottom: 2px solid rgba(216, 0, 43, 0.2);
}
.framework.pendapatan {
    border-bottom: 2px solid rgba(254, 188, 107, 0.2);
}

.curve-paket .stroke {
    stroke: #39af77;
}
.curve-paket .fill {
    fill: #39af77;
}
.curve-paket .point {
    fill: #39af77;
    stroke: #39af77;
}

.curve-pengiriman .stroke {
    stroke: #61dafb;
}
.curve-pengiriman .fill {
    fill: #61dafb;
}
.curve-pengiriman .point {
    fill: #61dafb;
    stroke: #61dafb;
}

.curve-perjalanan .stroke {
    stroke: #d8002b;
}
.curve-perjalanan .fill {
    fill: #d8002b;
}
.curve-perjalanan .point {
    fill: #d8002b;
    stroke: #d8002b;
}

.curve-pendapatan .stroke {
    stroke: #febc6b;
}
.curve-pendapatan .fill {
    fill: #febc6b;
}
.curve-pendapatan .point {
    fill: #febc6b;
    stroke: #febc6b;
}