body {
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    margin: 0
}

.main-nav {
    background: #111
}
h1 {
	font-size: 24px;;
}
.hero-body {
    background-image: -webkit-gradient(linear, left top, right top, from(#583188), to(#c92062));
    background-image: linear-gradient(to right, #583188 0%, #c92062 100%);
    background-repeat: repeat-x;
    padding: 2rem 1.5rem;
    background: #b40505
}

.hero-body,
.section {
    padding-left: 0;
    padding-right: 0
}

img.logo {
    max-height: 2.75rem !important;
    height: 60px;
    padding: 0 !important
}

.navbar {
    border-radius: 0
}

.title {
    color: #fff
}

.invalid {
    border: 1px solid #b40505 !important
}

#header {
    position: fixed;
    height: auto !important;
    left: 0;
    top: 0;
    z-index: 999
}

#header #message {
    margin-left: 17px
}

#header #fullscreen {
    margin-left: 43px
}

#header .el-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

#header .el-row .airport-block,
#header .el-row .logo-block {
    width: 10%
}

#header .el-row .dispached-block,
#header .el-row .refresh-block {
    width: 15%
}

#header .el-row .datepicker-block,
#header .el-row .search-block {
    width: 20%
}

header.el-header {
    padding: 1rem;
    height: auto
}

.el-main {
    margin: 6rem 0rem 2rem;
    padding: 5rem 1% 0 1%
}

.el-footer {
    width: 100%;
    position: static;
    bottom: 0;
    left: 0;
    height: 35px !important
}

.el-footer p {
    padding: 0;
    margin: 8px 0
}

@media screen and (max-width:1024px) {
    #header .el-row .logo-block {
        display: none
    }

    #header .el-row .datepicker-block {
        width: 37%
    }

    #header .el-row .datepicker-block .el-date-editor {
        width: 128px
    }

    #header .el-row .datepicker-block .el-date-editor .el-input__inner {
        padding-right: 5px
    }

    #header .el-row .datepicker-block .date-text {
        font-size: 14px;
        margin-left: 0.25rem
    }

    #header .el-row .airport-block {
        width: 8%
    }

    #header .el-row .search-block {
        width: 15%
    }

    #header .el-row .dispached-block {
        width: 17%
    }

    #header .el-row .refresh-block {
        width: 8%
    }

    #header #planner {
        padding: 4.5rem 0 0 !important
    }

    #header #planner .el-table__body {
        width: auto !important
    }
}

.email {
    text-transform: lowercase !important
}

.el-table__expand-column {
    background: #ddd !important
}

.el-table {
    text-transform: uppercase !important
}

.el-table th>.cell {
    word-break: normal
}

.el-footer,
.el-header {
    background-color: #f9ef55;
    color: #333;
    width: 100%
}

.el-button {
    margin-bottom: 4px
}

.date-text {
    margin-left: 1rem
}

.danger {
    color: #ae0000
}

.edit {
    color: #fff;
    background: #409eff;
    padding: 3px 5px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 2px
}

.price {
    color: #111;
    background: #fff;
    padding: 3px 5px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 2px
}

.notes {
    color: #111;
    background: #fff;
    padding: 3px 5px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 2px;
    font-size: 0.7rem
}

.paid {
    color: #fff;
    background: #67c23a
}

.nopay {
    color: #fff;
    background: #ae0000;
    cursor: pointer
}

.new {
    color: #fff;
    background: #ae0000;
    padding: 3px 5px;
    border-radius: 6px;
    font-size: 8px
}

.fade-enter-active,
.fade-leave-active {
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s
}

.fade-enter-active {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s
}

.fade-enter,
.fade-leave-active {
    opacity: 0
}

.dispached {
    opacity: 0.4 !important
}

.cancelled {
    background: #ffd3d3 !important
}

.pickup {
    background: #dde4fd !important
}

.dropoff {
    background: #faf59d !important
}

.el-table__body tr:hover>td {
    background: none
}

.el-table__body tr td {
    padding: 2px 0;
    border-bottom: none
}

.el-table td {
    padding: 0;
    border: 1px solid #2a3968
}

.app-modal {
    background-color: rgba(40, 40, 40, 0.5);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2000
}

.app-modal-inner {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 2rem;
    width: 90%;
    max-width: 700px;
    min-width: 300px
}

.modal-enter-active,
.modal-leave-active {
    -webkit-transition: all 200ms;
    transition: all 200ms
}

.modal-enter,
.modal-leave-active {
    opacity: 0
}

td.el-table__expanded-cell {
    padding: 4px 0.5em !important
}

td.el-table__expanded-cell:hover {
    background-color: #fffcc5 !important
}

td.el-table__expanded-cell .el-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

td.el-table__expanded-cell .el-row .el-col {
    max-width: 380px
}

td.el-table__expanded-cell .el-row .el-col p {
    overflow: auto;
    line-height: 40px
}

td.el-table__expanded-cell .el-row .el-col p .el-select {
    float: right
}

td.el-table__expanded-cell .el-row .el-col:nth-of-type(2) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

td.el-table__expanded-cell .el-row .el-col:nth-of-type(2) p {
    width: 100%;
    height: 40px
}

td.el-table__expanded-cell .el-row .el-col:nth-of-type(2) .el-button {
    font-size: 11px;
    padding: 6px
}

td.el-table__expanded-cell .el-row .el-col:nth-of-type(3) p {
    line-height: normal
}

td.el-table__expanded-cell .el-row .el-col:nth-of-type(3) .el-button {
    text-align: left;
    width: auto
}

.el-table__body,
.el-table__header {
    table-layout: auto
}

.el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: inherit !important
}

.el-table__expand-icon {
    width: 40px;
    height: 45px;
    position: relative;
    left: -10px
}

@media (min-device-width:1367px) {
    #header .el-row>div:first-of-type .el-input {
        width: 135px
    }

    #header .el-row>div:first-of-type .date-text {
        margin-left: 0.25rem
    }

    #planner .el-table .el-table__header-wrapper table thead tr {
        width: 92vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:first-of-type {
        width: 3%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(2) {
        width: 7%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(3) {
        width: 5%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(4) {
        width: 5.5%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(5) {
        width: 7%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(6) {
        width: 8%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(7) {
        width: 7%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(8) {
        width: 4.5%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(9) {
        width: 28%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(10) {
        width: 3%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(11) {
        width: 15%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(12) {
        width: 7%
    }

    #planner .el-table table {
        width: 100% !important
    }

    #planner .el-table table tbody {
        width: 100%
    }

    #planner .el-table table tbody tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 96vw;
        min-height: 46px
    }

    #planner .el-table table tbody tr>td:first-of-type:not(.el-table__expanded-cell) {
        width: 3%
    }

    #planner .el-table table tbody tr>td:nth-of-type(2) {
        width: 7%
    }

    #planner .el-table table tbody tr>td:nth-of-type(3) {
        width: 5%
    }

    #planner .el-table table tbody tr>td:nth-of-type(4) {
        width: 5.5%
    }

    #planner .el-table table tbody tr>td:nth-of-type(5) {
        width: 7%
    }

    #planner .el-table table tbody tr>td:nth-of-type(6) {
        width: 8%
    }

    #planner .el-table table tbody tr>td:nth-of-type(7) {
        width: 7%
    }

    #planner .el-table table tbody tr>td:nth-of-type(8) {
        width: 4.5%
    }

    #planner .el-table table tbody tr>td:nth-of-type(9) {
        width: 28%
    }

    #planner .el-table table tbody tr>td:nth-of-type(9) .notes {
        margin-top: 0.5em
    }

    #planner .el-table table tbody tr>td:nth-of-type(10) {
        width: 3%
    }

    #planner .el-table table tbody tr>td:nth-of-type(11) {
        width: 15%
    }

    #planner .el-table table tbody tr>td:nth-of-type(12) {
        width: 7%
    }

    #planner .el-table table tbody tr>td:nth-of-type(12) .el-button {
        width: 100%
    }

    #planner .el-table table tbody tr>td.el-table__expanded-cell {
        width: 100%
    }

    #planner .el-table table tbody tr>td.el-table__expanded-cell .el-row .el-col {
        max-width: 380px
    }
}

@media (min-device-width:963px) and (max-device-width:1366px) {
    #header .el-row>div:first-of-type .el-input {
        width: 135px
    }

    #header .el-row>div:first-of-type .date-text {
        margin-left: 0.25rem
    }

    #planner .el-table .el-table__header-wrapper table thead tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 92vw
    }

    #planner .el-table .el-table__header-wrapper table thead tr th {
        font-size: 13px
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:first-of-type {
        width: 5%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(2) {
        width: 7%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(3) {
        width: 6%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(4) {
        width: 7%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(5) {
        width: 8%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(6) {
        width: 8%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(7) {
        width: 9%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(8) {
        width: 6%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(9) {
        width: 18%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(10) {
        width: 5%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(11) {
        width: 14%
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(12) {
        width: 7%
    }

    #planner .el-table table {
        width: 100% !important
    }

    #planner .el-table table tbody {
        width: 100%
    }

    #planner .el-table table tbody tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 92vw;
        min-height: 46px
    }

    #planner .el-table table tbody tr>td:first-of-type:not(.el-table__expanded-cell) {
        width: 5%
    }

    #planner .el-table table tbody tr>td:nth-of-type(2) {
        width: 7%
    }

    #planner .el-table table tbody tr>td:nth-of-type(2) i {
        display: none
    }

    #planner .el-table table tbody tr>td:nth-of-type(3) {
        width: 6%
    }

    #planner .el-table table tbody tr>td:nth-of-type(4) {
        width: 7%
    }

    #planner .el-table table tbody tr>td:nth-of-type(5) {
        width: 8%
    }

    #planner .el-table table tbody tr>td:nth-of-type(6) {
        width: 8%
    }

    #planner .el-table table tbody tr>td:nth-of-type(7) {
        width: 9%
    }

    #planner .el-table table tbody tr>td:nth-of-type(8) {
        width: 6%
    }

    #planner .el-table table tbody tr>td:nth-of-type(9) {
        width: 18%
    }

    #planner .el-table table tbody tr>td:nth-of-type(9) .notes {
        margin-top: 0.5em
    }

    #planner .el-table table tbody tr>td:nth-of-type(10) {
        width: 5%
    }

    #planner .el-table table tbody tr>td:nth-of-type(11) {
        width: 14%
    }

    #planner .el-table table tbody tr>td:nth-of-type(11) .el-input__inner {
        font-size: 12px;
        height: 30px;
        line-height: 30px;
        padding: 0 5px
    }

    #planner .el-table table tbody tr>td:nth-of-type(11) .el-input__suffix {
        right: 10px
    }

    #planner .el-table table tbody tr>td:nth-of-type(11) .el-input__icon {
        width: 5px;
        line-height: 30px
    }

    #planner .el-table table tbody tr>td:nth-of-type(12) {
        width: 7%
    }

    #planner .el-table table tbody tr>td:nth-of-type(12) .el-button {
        width: 100%
    }

    #planner .el-table table tbody tr>td.el-table__expanded-cell {
        width: 100%
    }

    #planner .el-table table tbody tr>td.el-table__expanded-cell .el-row .el-col {
        max-width: 380px
    }
}

@media (max-device-width:962px) {
    #header {
        padding: 0.5em
    }

    #header .el-row>div {
        font-size: 13px
    }

    #header .el-row>div input {
        height: 30px;
        line-height: 30px
    }

    #header .el-row>div .el-input__icon {
        line-height: 30px
    }

    #header .el-row>div:first-of-type {
        width: 40%
    }

    #header .el-row>div:first-of-type .el-input {
        width: 132px;
        font-size: 13px
    }

    #header .el-row>div:first-of-type .date-text {
        font-size: 13px;
        margin-left: 0.25rem
    }

    #header .el-row>div:nth-of-type(2) {
        width: 8%
    }

    #header .el-row>div:nth-of-type(3) {
        width: 14%
    }

    #header .el-row>div:nth-of-type(4) {
        font-size: 13px
    }

    #header .el-row>div:nth-of-type(5) .el-button {
        font-size: 13px
    }

    #header .el-row>div #message {
        margin-left: 30px
    }

    #header .el-row>div #message span {
        display: none
    }

    #header .el-row>div #fullscreen {
        margin-left: 12px
    }

    #planner>.el-row {
        margin: 0 !important
    }

    #planner .el-table .el-table__header-wrapper table thead tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 90vw
    }

    #planner .el-table .el-table__header-wrapper table thead tr th {
        font-size: 13px
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:first-of-type {
        width: 40px
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(2) {
        width: 65px
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(3) {
        width: 55px
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(4) {
        width: 70px
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(5) {
        width: 90px
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(6) {
        width: 111px
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(7) {
        width: 77px
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(8) {
        width: 58px
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(9) {
        width: 143px
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(10) {
        width: 50px
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(11) {
        width: 105px
    }

    #planner .el-table .el-table__header-wrapper table thead tr th:nth-of-type(12) {
        width: 80px
    }

    #planner .el-table table {
        width: 100% !important
    }

    #planner .el-table table tbody {
        width: 100%
    }

    #planner .el-table table tbody tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 90vw;
        min-height: 46px
    }

    #planner .el-table table tbody tr>td {
        font-size: 12px
    }

    #planner .el-table table tbody tr>td:first-of-type:not(.el-table__expanded-cell) {
        width: 40px
    }

    #planner .el-table table tbody tr>td:nth-of-type(2) {
        width: 65px
    }

    #planner .el-table table tbody tr>td:nth-of-type(2) i {
        display: none
    }

    #planner .el-table table tbody tr>td:nth-of-type(3) {
        width: 55px
    }

    #planner .el-table table tbody tr>td:nth-of-type(4) {
        width: 70px
    }

    #planner .el-table table tbody tr>td:nth-of-type(5) {
        width: 90px
    }

    #planner .el-table table tbody tr>td:nth-of-type(6) {
        width: 111px
    }

    #planner .el-table table tbody tr>td:nth-of-type(7) {
        width: 77px
    }

    #planner .el-table table tbody tr>td:nth-of-type(8) {
        width: 58px
    }

    #planner .el-table table tbody tr>td:nth-of-type(9) {
        width: 143px
    }

    #planner .el-table table tbody tr>td:nth-of-type(10) {
        width: 50px
    }

    #planner .el-table table tbody tr>td:nth-of-type(11) {
        width: 105px
    }

    #planner .el-table table tbody tr>td:nth-of-type(11) .el-input__inner {
        font-size: 12px;
        height: 30px;
        line-height: 30px;
        padding: 0 5px
    }

    #planner .el-table table tbody tr>td:nth-of-type(11) .el-input__suffix {
        right: 10px
    }

    #planner .el-table table tbody tr>td:nth-of-type(11) .el-input__icon {
        width: 5px;
        line-height: 30px
    }

    #planner .el-table table tbody tr>td:nth-of-type(12) {
        width: 80px
    }

    #planner .el-table table tbody tr>td.el-table__expanded-cell .el-row .el-col p .el-select {
        width: 190px
    }

    #planner .el-table table tbody tr>td.el-table__expanded-cell .el-row .el-col .el-button {
        width: 100%;
        margin-bottom: 5px
    }

    #planner .el-table table tbody tr>td.el-table__expanded-cell .el-row .el-col .el-button:last-of-type {
        margin-bottom: 0
    }

    #planner .el-table table tbody tr>td.el-table__expanded-cell .el-row .el-col .el-button span {
        display: block;
        height: 20px;
        line-height: 20px
    }

    .el-select-dropdown .el-select-dropdown__item {
        font-size: 12px
    }
}

.button__outer,
.input__outer,
.select__outer {
    font-size: 15px;
    margin: 0 0 1rem
}

.button__outer label,
.input__outer label,
.select__outer label {
    display: block;
    margin: 0 0 0.5rem;
    font-weight: 600
}

.select__outer .el-select {
    width: 100%
}

.button__outer button {
    width: 100%
}

.table__default {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 40px;
    margin-bottom: 2.5rem;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 15px
}

.table__default td,
.table__default th {
    padding: 12px 15px;
    border-bottom: 1px solid #e1e1e1
}

.table__default td:first-child,
.table__default th:first-child {
    padding-left: 0
}

.table__default td:last-child,
.table__default th:last-child {
    padding-right: 0
}

.table__head th {
    text-align: left
}

.table__body tr:nth-child(odd) {
    background-color: whitesmoke
}

.table__body tr td span {
    font-weight: bold;
    margin: 0 0.5rem 0 0;
    text-transform: uppercase;
    display: none
}

.table__pagination {
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.table__pagination li {
    padding: 12px 15px;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer
}

.table__pagination li.active,
.table__pagination li:hover {
    background-color: #f0f0f0
}

.table__pagination li.disabled {
    cursor: not-allowed;
    background-color: transparent
}

.table__pagination li.disabled a {
    opacity: 0.5
}

.table__pagination li.left-arrow {
    border-left: 1px solid #e1e1e1;
    border-radius: 4px 0 0 4px
}

.table__pagination li.right-arrow {
    border-right: 1px solid #e1e1e1;
    border-radius: 0 4px 4px 0
}

.car__details {
    padding: 1rem;
    margin: 2rem 0 2.5rem;
    border-radius: 6px;
    background-color: #fbfbfb;
    border: 1px solid #e1e1e1
}

.car__details--button {
    width: 100%
}

.nav__menu.el-menu--horizontal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
}

.nav__menu .el-menu-item {
    text-transform: uppercase;
    font-weight: 600
}

.nav__menu .nav__menu__link {
    text-decoration: none
}

@media screen and (min-device-width:600px) and (max-device-width:1024px) {
    table .table__head {
        display: none
    }

    table .table__body {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 28px 1fr 28px 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 28px
    }

    table .table__body tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
        border-radius: 3px
    }

    table .table__body tr:nth-child(odd) {
        background-color: transparent
    }

    table .table__body tr td {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    table .table__body tr td:first-child {
        padding-left: 15px
    }

    table .table__body tr td:last-child {
        padding-right: 15px
    }

    table .table__body tr td span {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex
    }
}

@media screen and (min-device-width:600px) and (max-device-width:768px) {
    table .table__body {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr
    }
}

@media screen and (max-device-width:599px) {
    .el-main {
        margin: 6rem 1rem 2rem
    }

    .nav__menu.el-menu--horizontal {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    td.el-table__expanded-cell .el-row {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 100vw
    }

    td.el-table__expanded-cell .el-row .el-col {
        width: 100%
    }

    .app-modal-inner {
        max-height: 600px;
        overflow-y: scroll
    }

    .app-modal-inner .el-col.el-col-12 {
        width: 100%
    }

    table .table__head {
        display: none
    }

    table .table__body {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 28px
    }

    table .table__body tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        width: 100%
    }

    table .table__body tr:nth-child(odd) {
        background-color: transparent
    }

    table .table__body tr td {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        font-size: 14px
    }

    table .table__body tr td:first-child {
        padding-left: 15px
    }

    table .table__body tr td:last-child {
        padding-right: 15px
    }

    table .table__body tr td span {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex
    }

    .table__pagination {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .table__pagination li.number {
        display: none
    }

    #planner .el-table .el-table__header-wrapper table thead tr {
        display: table-row
    }

    #planner .el-table table tbody tr {
        display: table-row
    }

    #planner .el-table--scrollable-x .el-table__body-wrapper {
        overflow-x: scroll
    }
}

.form {
    margin-top: 2rem
}

.form label {
    margin-bottom: 0.25rem;
    display: bl
}

.form .input-outer {
    margin-bottom: 0.75rem
}

.ql-editor p {
    margin-bottom: 1rem !important
}