html,
body {
    font-family: 'Roboto', sans-serif;
}

#app-bar {}

#app-nav {
    height: 64px;
    display: flex;
    align-items: center;
}

.app-bar-img {
    width: 100%;
    height: 4px;
    background-image: url("../images/header-bar.svg");
}

#main-content {
    padding-bottom: 30px;
}

.btn-primary {
    color: #fff;
    background-color: #396699;
    border-color: #396699;
    border-radius: 0;
    /* height: 46px;
    font-size: 18px; */
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: #396699;
    border-color: #396699;
}

.btn-primary:disabled {
    background-color: #396699;
    border-color: #396699;
    opacity: .5;
}

.btn-secondary {
    color: #fff;
    background-color: #56BDEA;
    border-color: #56BDEA;
    border-radius: 0;
    /* height: 46px;
    font-size: 18px; */
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
    background-color: #6cc6ec;
    border-color: #6cc6ec;
}

.btn-success {
    color: #fff;
    background-color: #B2D134;
    border-color: #B2D134;
    border-radius: 0;
    /* height: 46px;
    font-size: 18px; */
}

.btn-success:hover,
.btn-success:active,
.btn-success:focus {
    background-color: #b7d348;
    border-color: #b7d348;
}

.btn-info {
    color: #BDBDBD;
    background-color: #EBEBEA;
    border-color: #EBEBEA;
    border-radius: 0;
    /* height: 46px;
    font-size: 18px; */
}

.btn-info:hover,
.btn-info:active,
.btn-info:focus {
    color: #BDBDBD;
    background-color: #EFEFEF;
    border-color: #EFEFEF;
}

.btn-panel {
    /* width: 100%; */
    width: 164px;
}

.form-auth {
    padding-top: 80px;
    text-align: center;
    max-width: 500px;
    width: 100%;
}

.kms-card {
    padding: 20px;
    border: 1px solid #B2D134;
}

.form-auth .kms-card {}

.form-auth button {
    width: 100%;
}

.form-control {
    border-radius: 0;
}

::placeholder {
    opacity: .4 !important;
}

:-ms-input-placeholder {
    opacity: .4 !important;
}

::-ms-input-placeholder {
    opacity: .4 !important;
}

table {
    width: 100%;
    border: 1px solid #EBEBEA;
}

td,
th {
    padding: 0 20px;
    height: 46px;
    border-bottom: 1px solid #EBEBEA;
}

th {
    background-color: #EBEBEA;
}

.pointer {
    cursor: pointer;
}

.panel {}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    /* font-weight: 500; */
    padding: 10px 20px;
    color: #FFF;
    background-color: #56BDEA;
    border: 1px solid #56BDEA;
}

.panel-body {
    padding: 20px 20px;
    border: 1px solid #EBEBEA;
    border-top: unset;
}

a {
    text-decoration: none;
}

.modal-content {
    border-radius: 0;
}

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #bebebe;
    /* old IE */
    background-color: #bebebe;
    /* Modern Browsers */
}

.strategy-topic {
    font-size: 18px;
    font-weight: 500;
}

.strategy-date {
    font-size: 14px;
    color: #999;
}

.strategy-description {
    font-size: 16px;
    color: #666;
}

.step-nav {
    font-weight: 500;
    color: #BABABA;
}

.step-item {}

.step-item.center {
    width: 13.89%;
}

.step-item.start,
.step-item.end {
    width: 8.33%;
}

.step-picture {
    position: relative;
    height: 64px;
}

.step-circle {
    position: absolute;
    top: 0;
    width: 64px;
    height: 64px;
    border-radius: 32px;
    background-color: #EBEBEA;
    line-height: 64px;
    text-align: center;
}

.step-circle.start {
    left: 0;
}

.step-circle.end {
    right: 0;
}

.step-circle.center {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.step-circle>img {
    width: 24px;
    height: 24px;
}

.step-line {
    position: absolute;
    left: 0;
    top: 29px;
    height: 6px;
    width: 100%;
    background-color: #EBEBEA;
}

.step-active-1 {
    background-color: #B2D134;
}

.step-active-2 {
    background-color: #2C4F76;
}

.step-active-3 {
    background-color: #56BDEA;
}

.label-active-1 {
    color: #B2D134;
}

.label-active-2 {
    color: #2C4F76;
}

.label-active-3 {
    color: #56BDEA;
}

.form-select {
    border-radius: 0;
}

h6 {
    margin-bottom: 0;
    color: #666;
    height: 38px;
    line-height: 38px;
}

.fw-500 {
    font-weight: 500;
}

.university {
    font-size: 14px;
    color: #999;
}