@font-face{
    font-family: "poppins-light";
    src: url(../fonts/Poppins-Light.ttf);
    font-display: swap;
}

@font-face{
    font-family: "poppins-regular";
    src: url(../fonts/Poppins-Regular.ttf);
    font-display: swap;
}

@font-face{
    font-family: "poppins-medium";
    src: url(../fonts/Poppins-Medium.ttf);
    font-display: swap;
}

@font-face{
    font-family: "poppins-semibold";
    src: url(../fonts/Poppins-SemiBold.ttf);
    font-display: swap;
}

@font-face{
    font-family: "poppins-bold";
    src: url(../fonts/Poppins-Bold.ttf);
    font-display: swap;
}

@font-face{
    font-family: "poppins-extrabold";
    src: url(../fonts/Poppins-ExtraBold.ttf);
    font-display: swap;
}

:root{
    --dark-txt-color: #373737;
    --white-txt-color: #fff;
    --gray-txt-color: #787878;
    --light-gray-txt-color: #9e9e9e;
    --blue-txt-color: #2281df;
    --gray-blue-txt-color: #4c5a65;
    --red-txt-color: #ff0000;
    --orange-txt-color: #ffae1a;
    --green-txt-color: #00be00;
    --white-back-color: #fff;
    --blue-back-color: #2281df;
    --black-back-color: #000;
    --dark-back-color: #373737;
    --light-gray-back-color: #ecf1f6;
    --light-gray-back-color-2: #f8f7fc;
    --light-gray-border: #e4e8ec;
    --placeholder-color: #7b7e83;
    --transparent-back: transparent;
    --border-color: #dbdbdb;
    --font-size: 13px;  
}

*, *::before, *::after{
    box-sizing: border-box;
}

html{
    font-size: var(--font-size);
}

/* html, body{
    overflow: hidden;
} */

body{
    position: relative;
    margin: 0;
    padding: 0;
    font-size: inherit;
    background-color: var(--white-back-color);
    color: var(--dark-txt-color);
    font-family: "poppins-medium", sans-serif;
    letter-spacing: 0.02em;
    display: flex;
    min-height: 100vh;
    height: 100%;
    line-height: 1.5;
    /* opacity: 0; */
    transition: all 0.2s linear;
}

::-webkit-scrollbar{
    width: 0.5em; /* Adjust as desired */
    height: 0.5em;
}

::-webkit-scrollbar-track{
    background-color: var(--light-gray-back-color-2);
    -webkit-box-shadow: inset 0 0 5px rgb(192, 192, 192);
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    box-shadow: inset 0 0 5px rgb(192, 192, 192);
}

::-webkit-scrollbar-thumb{
    background-color: var(--blue-back-color); /* Blue background */
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover{
    background-color: var(--blue-back-color);
}

.system-content::-webkit-scrollbar, .table-drivers::-webkit-scrollbar, .table-orders::-webkit-scrollbar, .table-places::-webkit-scrollbar, .table-reports::-webkit-scrollbar{
    width: 0.4em;
    height: 0.4em;
}

.system-content::-webkit-scrollbar-track, .table-drivers::-webkit-scrollbar-track, .table-orders::-webkit-scrollbar-track, .table-places::-webkit-scrollbar-track, .table-reports::-webkit-scrollbar-track{
    background-color: var(--light-gray-back-color-2);
    -webkit-box-shadow: inset 0 0 5px rgb(192, 192, 192);
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    box-shadow: inset 0 0 5px rgb(192, 192, 192);
}

.system-content::-webkit-scrollbar-thumb, .table-drivers::-webkit-scrollbar-thumb, .table-orders::-webkit-scrollbar-thumb, .table-places::-webkit-scrollbar-thumb, .table-reports::-webkit-scrollbar-thumb{
    background-color: var(--blue-back-color);
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}

.system-content::-webkit-scrollbar-thumb:hover, .table-drivers::-webkit-scrollbar-thumb:hover, .table-orders::-webkit-scrollbar-thumb:hover, .table-places::-webkit-scrollbar-thumb:hover, .table-reports::-webkit-scrollbar-thumb:hover{
    background-color: var(--blue-back-color);
}

input, textarea, button, select, a, i, svg{
  -webkit-tap-highlight-color: rgba(255, 255, 255,0);
}

h1, h2, h3, h4, h5, h6, p, label, input, a, button, figure, strong, b, textarea, th, td, ul, ol, li{
	font-weight: 400;
	margin: 0;
    padding: 0;
}

input, textarea, button, select, a, i, svg, img, span, div, .aside-products .wrapper-text p{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

ol, ul{
    list-style-type: none;
}

a, button{
    color: inherit;
    cursor: pointer;
}

a{
    text-decoration: none;
}

button{
    background-color: var(--transparent-back);
}

input::-webkit-input-placeholder{
	color: rgb(97, 97, 97) !important;
}

input:-ms-input-placeholder{
	color: rgb(97, 97, 97) !important;
}

input::placeholder{
	color: rgb(97, 97, 97) !important;
}

#overlay-submit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 999999;
    display: none;
}

.remove-driver-modal .header, .activate-driver-modal .header, .edit-place-modal .header,
.edit-seat-price-modal .header, .edit-night-price-modal .header, .edit-additional-address-price-modal .header, .edit-meet-greet-price-modal .header, 
.change-driver-modal .header, .delay-order-modal .header{
    position: static;
}

.ui.modal.remove-driver-modal > .header,
.ui.modal.remove-driver-modal > .content,
.ui.modal.remove-driver-modal > .actions,
.ui.modal.activate-driver-modal > .header,
.ui.modal.activate-driver-modal > .content,
.ui.modal.activate-driver-modal > .actions,
.ui.modal.edit-place-modal > .header,
.ui.modal.edit-place-modal > .content,
.ui.modal.edit-place-modal > .actions,
.ui.modal.edit-seat-price-modal > .header,
.ui.modal.edit-seat-price-modal > .content,
.ui.modal.edit-seat-price-modal > .actions,
.ui.modal.edit-night-price-modal > .header,
.ui.modal.edit-night-price-modal > .content,
.ui.modal.edit-night-price-modal > .actions,
.ui.modal.edit-additional-address-price-modal > .header,
.ui.modal.edit-additional-address-price-modal > .content,
.ui.modal.edit-additional-address-price-modal > .actions,
.ui.modal.edit-meet-greet-price-modal > .header,
.ui.modal.edit-meet-greet-price-modal > .content,
.ui.modal.edit-meet-greet-price-modal > .actions,
.ui.change-driver-modal > .header,
.ui.change-driver-modal > .content,
.ui.change-driver-modal > .actions,
.ui.delay-order-modal > .header,
.ui.delay-order-modal > .content,
.ui.delay-order-modal > .actions{
    padding: 0.7em 1em;
    font-size: 1.2em !important;
}

.ui.modal.remove-driver-modal > .content p,
.ui.modal.activate-driver-modal > .content p,
.ui.modal.edit-place-modal > .content p,
.ui.modal.edit-seat-price-modal > .content p,
.ui.modal.edit-night-price-modal > .content p,
.ui.modal.edit-additional-address-price-modal > .content p,
.ui.modal.edit-meet-greet-price-modal > .content p,
.ui.modal.change-driver-modal > .content p,
.ui.modal.delay-order-modal > .content p{
    font-size: 0.75em;
}

.ui.modal.remove-driver-modal > .actions,
.ui.modal.activate-driver-modal > .actions,
.ui.modal.edit-place-modal > .actions,
.ui.modal.edit-seat-price-modal > .actions,
.ui.modal.edit-night-price-modal > .actions,
.ui.modal.edit-additional-address-price-modal > .actions,
.ui.modal.edit-meet-greet-price-modal > .actions,
.ui.modal.change-driver-modal > .actions,
.ui.modal.delay-order-modal > .actions{
    display: flex;
    justify-content: flex-end;
}

.ui.modal.remove-driver-modal > .actions .ui.negative,
.ui.modal.remove-driver-modal > .actions .ui.positive,
.ui.modal.activate-driver-modal > .actions .ui.negative,
.ui.modal.activate-driver-modal > .actions .ui.positive,
.ui.modal.edit-place-modal > .actions .ui.negative,
.ui.modal.edit-place-modal > .actions .ui.positive,
.ui.modal.edit-seat-price-modal > .actions .ui.negative,
.ui.modal.edit-seat-price-modal > .actions .ui.positive,
.ui.modal.edit-night-price-modal > .actions .ui.negative,
.ui.modal.edit-night-price-modal > .actions .ui.positive,
.ui.modal.edit-additional-address-price-modal > .actions .ui.negative,
.ui.modal.edit-additional-address-price-modal > .actions .ui.positive,
.ui.modal.edit-meet-greet-price-modal > .actions .ui.negative,
.ui.modal.edit-meet-greet-price-modal > .actions .ui.positive,
.ui.modal.change-driver-modal > .actions .ui.negative,
.ui.modal.change-driver-modal > .actions .ui.positive,
.ui.modal.delay-order-modal > .actions .ui.negative,
.ui.modal.delay-order-modal > .actions .ui.positive{
    margin-right: 0;
    margin-left: 1em;
}

.ui.negative.button, .ui.positive.button,
.ui.negative.activate, .ui.positive.button{
    font-size: 0.8em;
    padding: 0.7em 1.5em;
}

.row{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1rem;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, 
.col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, 
.col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, 
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, 
.col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, 
.col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12,
.col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, 
.col-xxl-11, .col-xxl-12, .col-xxxl-1, .col-xxxl-2, .col-xxxl-3, .col-xxxl-4, .col-xxxl-5, .col-xxxl-6, .col-xxxl-7, .col-xxxl-8, 
.col-xxxl-9, .col-xxxl-10, .col-xxxl-11, .col-xxxl-12, .search-section .wrapper-search-result #ajax-wrapper article{
	position: relative;
    min-height: 1px;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

.wrapper-title h1{
    font-size: 1.4em;
    line-height: 1.3;
    color: var(--dark-txt-color);
    font-family: "poppins-semibold", sans-serif;
}

.wrapper-title h1 span{
    color: var(--blue-txt-color);
}

.wrapper-title h2{
    font-size: 1.3em;
    line-height: 1.4;
    color: var(--dark-txt-color);
    font-family: "poppins-regular", sans-serif;
}

.wrapper-text{
    margin-top: 1em;
}

.wrapper-text p{
    font-size: 1em;
    margin-bottom: 1em;
    line-height: 1.6;
}

.wrapper-text p:last-child{
    margin-bottom: 0;
}

.wrapper-btn{
    display: flex;
    align-items: center;
    margin-top: 1.5em;
}

.wrapper-btn a, .wrapper-btn button{
    /* height: 3.3em; */
    padding: 0.67857143em 1em;
    font-size: 1em;
    line-height: 1.1;
    border-width: 0.07em;
    border-style: solid;
    border-radius: 0.2em;
    align-items: center;
    transition: all 0.5s ease;
    font-family: "poppins-regular", sans-serif;
}

.wrapper-btn a svg, .wrapper-btn button svg{
    font-size: 0.8em;
}

.col-fast-links{
    margin-bottom: 1.5em;
}

.col-fast-links .wrapper-links{
    overflow-x: auto;
}

.fast-links{
    white-space: nowrap;
    padding-bottom: 0.5em;
}

.fast-links .only-icon-btn{
    width: 4.5em;
    height: 4.5em;
    border-width: 0.07em;
    border-style: solid;
    font-size: 0.7em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 1em;
    border-radius: 0.2em;
}

.fast-links .only-icon-btn svg{
    font-size: 1.4em;
}

.wrapper-img img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.system-content legend{
    padding: 0 0.5em;
    font-size: 1.1em;
    font-family: "poppins-semibold", sans-serif;
}

.table{
    display: table;
}

.flex{
    display: flex;
}

.flex-wrap{
    display: flex;
    flex-wrap: wrap;
}

.wrap{
    flex-wrap: wrap;
}

.inline-flex{
    display: inline-flex;
}

.block{
    display: block;
}

.none{
    display: none;
}

.inline-block{
    display: inline-block;
}

.inline{
    display: inline;
}

.relative{
    position: relative;
}

.absolute{
    position: absolute;
}

.fixed{
    position: fixed;
}

.align-center{
    align-items: center;
}

.align-end{
    align-items: flex-end;
}

.align-start{
    align-items: flex-start;
}

.align-baseline{
    align-items: baseline;
}

.align-content-center{
    align-content: center;
}

.align-content-start{
    align-content: flex-start;
}

.align-content-between{
    align-content: space-between;
}

.justify-center{
    justify-content: center;
}

.justify-between{
    justify-content: space-between;
}

.justify-around{
    justify-content: space-around;
}

.space-evenly{
    justify-content: space-evenly;
}

.justify-end{
    justify-content: flex-end;
}

.direction-column{
    flex-direction: column;
}

.direction-row{
    flex-direction: row;
}

.uppercase{
    text-transform: uppercase;
}

.lowercase{
    text-transform: lowercase;
}

.capitalize{
    text-transform: capitalize;
}

.pointer{
    cursor: pointer;
}

.text-left{
    text-align: left;
}

.text-center{
    text-align: center;
}

.text-right{
    text-align: right;
}

.dark-txt{
    color: var(--dark-txt-color);
}

.white-txt{
    color: var(--white-txt-color);
}

.gray-txt{
    color: var(--gray-txt-color);
}

.light-gray-txt{
    color: var(--light-gray-txt-color);
}

.gray-blue-txt{
    color: var(--gray-blue-txt-color);
}

.blue-txt{
    color: var(--blue-txt-color);
}

.red-txt{
    color: var(--red-txt-color);
}

.orange-txt{
    color: var(--orange-txt-color);
}

.green-txt{
    color: var(--green-txt-color);
}

.light-grey-back{
    background-color: var(--light-gray-back-color);
}

.light-grey-back-2{
    background-color: var(--light-gray-back-color-2);
}

.white-back{
    background-color: var(--white-back-color);
}

.blue-back{
    background-color: var(--blue-back-color);
}

.black-back{
    background-color: var(--black-back-color);
}

.dark-back{
    background-color: var(--dark-back-color);
}

.transparent-back{
    background-color: var(--transparent-back);
}

.blue-border{
    border-color: var(--blue-back-color);
}

.light-gray-border{
    border-color: var(--light-gray-border);
}

/* Start Styling Form */

.fieldset-part{
    margin-bottom: 1em;
    padding: 0.2em 1em 1em;
    border: 0.07em solid var(--border-color);
    border-radius: 0.28571429rem;
}

.section-panel .system-body .ui.dropdown > .remove.icon{
    display: none;
}

.section-panel .system-body .column-field{
    margin-top: 1em;
}

.section-panel .system-body .column-field > b{
    display: block;
    margin-bottom: 0.2em;
}

.section-panel .system-body .column-field .ui input{
    width: 100%;
}

.section-panel .system-body .column-field .error{
    margin-top: 0.5em;
    color: var(--red-txt-color);
}

.section-panel .system-body .wrapper-note textarea{
    width: 100%;
    min-height: 11em;
    resize: vertical;
}

.section-panel .system-body .meet-greet{
    margin-top: 1.5em;
}

.section-panel .system-body .meet-greet label, .section-panel .system-body .child-check label,
.section-panel .system-body .remark-check label{
    line-height: 1.4;
}

.section-panel .system-body .meet-greet #meet-greet-info{
    margin-top: 1em;
}

.section-panel .system-body #additional-address-part{
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.section-panel .system-body #additional-address-part .title-form{
    margin-right: 2em;
}

#wrapper-additional-places .row-additional-address-1{
    margin-top: 1.5em;
}

.section-panel .system-body .wrapper-price p{
    font-size: 1.5em;
}

.section-panel .system-body .wrapper-price p b{
    font-family: "poppins-semibold", sans-serif;
    color: green;
}

.section-panel .system-body .checkbox-children, .section-panel .system-body .checkbox-remark{
    margin: 0.5em 0 1em;
}

.message-info{
    margin-top: 1em;
}

.wrapper-btn .loading-icon{
    display: none;
    width: 2.5em;
    transform: translateX(1.5em) rotateZ(0deg);
    animation: rotate_loader 2s linear infinite;
    animation-play-state: paused;
}

@keyframes rotate_loader{
    0%{
        transform: translateX(1.5em) rotateZ(0deg);
    }
    100%{
        transform: translateX(1.5em) rotateZ(360deg);
    }
}

#remark-ticket-price-item{
    margin-top: 1em;
}

/* End Styling Form */

.system-aside, 
.system-aside .middle-aside a .system-aside-text, 
.system-aside .bottom-aside a .system-aside-text, 
.system-content{
   transition: all 0.5s ease;
}

.system-aside{
    top: 0;
    left: 0;
    width: 16em;
    height: 100%;
    padding: 1.5em 0;
    z-index: 999;
}

.system-aside a .system-aside-text{
    margin-left: 3em;
}

.system-aside .top-aside .hamburger{
    width: 2.3em;
    margin-left: 0.7em;
}

.system-aside .top-aside .hamburger svg{
    font-size: 2.2em;
}

.system-aside .middle-aside{
    margin-top: 4em;
}

.system-aside .middle-aside > div{
    margin-bottom: 0.5em;
}

.system-aside .middle-aside > div#active-aside-link{
    background-color: var(--blue-back-color);
    color: var(--white-txt-color);
}

.system-aside .middle-aside > div a, .system-aside .bottom-aside > div a{
    position: relative;
    display: flex;
    align-items: center;
    font-size: 1.1em;
    white-space: nowrap;
    width: 100%;
    padding: 0.7em 0.5em 0.7em 0.7em;
    overflow: hidden;
}

.system-aside .middle-aside > div a svg, .system-aside .bottom-aside > div a svg{
    font-size: 1.1em;
    position: absolute;
    left: initial;
    width: 1.8em;
    white-space: nowrap;
}

.system-aside .middle-aside a:last-child{
    margin-bottom: 0;
}

.system-content{
    /* height: 100%; */
    height: 100vh;
    flex-grow: 1;
    position: fixed;
    top: 0;
    left: 17em;
    right: 0;
    /* bottom: 0; */
    overflow-y: auto;
}

.section-panel{
    padding: 1em 1em 3.5em 1.2em;
    /* white-space: nowrap; */
    transition: unset;
}

.section-panel .system-header{
    white-space: nowrap;
}

.section-panel .system-header .login-info{
    margin-left: 1em;
}

.section-panel .system-header .login-info .wrapper-span{
    border-radius: 0.6em;
}

.section-panel .system-header .login-info .wrapper-span span{
    border: 0.2em solid var(--blue-back-color);
    border-radius: 50%;
    width: 3em;
    height: 3em;
}

.section-panel .system-header .login-info .wrapper-span span img{
    width: 100%;
}

.section-panel .system-body{
    margin-top: 2em;
}

.total-items{
    margin: 0 0 2em;
}

.total-items p{
    font-size: 1.5em;
    font-family: "poppins-light", sans-serif;
}

.table-drivers, .table-orders, .table-places, .table-reports{
    overflow-x: auto;
    /* overflow-y: auto; */
    /* min-height: 60vh; */
    /* max-height: 75vh; */
}

.table-drivers table, .table-orders table, .table-places table, .table-reports table{
    width: 100%;
    border-collapse: collapse;
}

/* .table-drivers table thead, .table-orders table thead.main-thead{
    position: sticky;
    top: 0;
} */

.table-drivers table thead tr, .table-orders table thead tr, .table-places table thead tr, .table-reports table thead tr{
    border-bottom: 0.07em solid var(--border-color);
}

.table-drivers table tr th, .table-orders table tr th, .table-places table tr th, .table-reports table tr th{
    text-align: left;
    padding: 1em 2em 1em 0;
    vertical-align: baseline;
    font-family: "poppins-bold", sans-serif;
    white-space: nowrap;
}

.table-drivers table thead tr th, .table-drivers table tbody tr td,
.table-orders table thead tr th, .table-orders table tbody tr td,
.table-places table thead tr th, .table-places table tbody tr td,
.table-reports table thead tr th, .table-reports table tbody tr td{
    padding: 0.6em 1.5em 0.6em 0.8em;
    white-space: nowrap;
}

.table-drivers table tbody tr, .table-orders table tbody tr, .table-places table tbody tr, .table-reports table tbody tr{
    border-bottom: 0.07em solid var(--border-color);
}

.table-orders table tfoot tr th, .table-reports table tfoot tr th{
    padding-right: 1em;
    font-size: 1.1em;
}

.td-small, .td-num-order{
    white-space: normal !important;
}

.td-small{
    min-width: 23em;
    max-width: 30em;
}

.td-num-order{
    min-width: 10em;
    max-width: 15em;
}

.total-price-column{
    font-size: 1.5em;
    color: var(--green-txt-color);
}

/* .search-section{
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.search-section #overflow-search,
.search-section .wrapper-form{
    opacity: 0;
    transition: all 0.3s ease;
}

.search-section #overflow-search{
    background-color: hsl(0deg 0% 16.68% / 80%);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.search-section .wrapper-form{
    position: relative;
    padding: 3em 0;
    background-color: var(--first-back-color);
    z-index: 10;
    width: 100%;
    transform: translateY(-100%);
}

#search-result .wrapper-text,
#ajax-wrapper .wrapper-text{
    margin-top: 1em;
    margin-bottom: 0;
}

.search-section .wrapper-content .wrapper-close img{
    width: 1.6em;
    cursor: pointer;
}

.search-section .wrapper-content > div.wrapper-text{
    margin-top: 1em;
    margin-bottom: 0;
}

.search-section .wrapper-content > div.wrapper-text p{
    font-size: 2em;
    font-family: "poppins-medium", sans-serif;
}

.search-section .wrapper-search{
    margin-top: 1.5em;
    margin-bottom: 1em;
}

.search-section .wrapper-search .input-field{
    margin-top: 0;
}

.search-section .wrapper-search-result #search-result{
    padding-bottom: 7em;
    padding-right: 1.2rem;
    overflow-y: auto;
    max-height: 75vh;
    display: none;
}

.search-section .wrapper-search-result #search-result article,
.search-section .wrapper-search-result #ajax-wrapper article{
    margin-top: 1.5em;
}

.search-section .wrapper-search-result .search-title{
    font-size: 1.8em;
} */

.col-filters{
    margin-top: -1.3em;
    margin-bottom: 1.5em;
}

.col-filters .form-date-filter > div{
    margin-right: 0.5em;
    margin-top: 0;
}

.col-filters .form-date-filter > div:last-child{
    margin-right: 0;
}

.col-filters .form-date-filter > div label{
    margin-right: 0.5em;
    font-size: 1.1em;
}

.col-filters .form-date-filter > div button[type="submit"] svg,
.col-filters .form-today-filter button[type="submit"] svg{
    font-size: 1.1em;
}

.col-date-from .ui.fluid.input, .col-date-to .ui.fluid.input{
    width: 12em;
}

.col-filters .order-filters form{
    margin-top: 1em;
    margin-right: 1em;
}

.col-filters .form-today-filter button{
    margin: 0 0.2em;
}

.wrapper-pagination{
    margin-top: 1.5em;
}

.pagination li{
    margin: 0.3em;
}

.pagination li a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 3.3em;
    height: 3.3em;
    border: 0.07em solid #d1d4d8;
    cursor: pointer;
}

.wrapper-pagination ul li.active a {
    background-color: var(--blue-back-color);
    color: var(--white-txt-color);
}

@media screen and (min-width: 100px){
    .col-xs-1{
		max-width: 8.33%;
		flex-basis: 8.33%;
	}
	.col-xs-2{
		max-width: 16.66%;
		flex-basis: 16.66%;
	}
	.col-xs-3{
		max-width: 25%;
		flex-basis: 25%;
	}
	.col-xs-4{
		max-width: 33.33%;
		flex-basis: 33.33%;
	}
	.col-xs-5{
		max-width: 41.66%;
		flex-basis: 41.66%;
	}
	.col-xs-6{
		max-width: 50%;
		flex-basis: 50%;
	}
	.col-xs-7{
		max-width: 57.47%;
		flex-basis: 57.47%;
	}
	.col-xs-8{
		max-width: 66.66%;
		flex-basis: 66.66%;
	}
	.col-xs-9{
		max-width: 75%;
		flex-basis: 75%;
	}
	.col-xs-10{
		max-width: 83.33%;
		flex-basis: 83.33%;
	}
	.col-xs-11{
		max-width: 91.74%;
		flex-basis: 91.74%;
	}
	.col-xs-12{
		max-width: 100%;
		flex-basis: 100%;
	}
    .ui.mini.modal.remove-driver-modal{
        max-width: 330px;
    }
}

@media screen and (min-width: 576px){
    .col-sm-1{
		max-width: 8.33%;
		flex-basis: 8.33%;
	}
	.col-sm-2{
		max-width: 16.66%;
		flex-basis: 16.66%;
	}
	.col-sm-3{
		max-width: 25%;
		flex-basis: 25%;
	}
	.col-sm-4{
		max-width: 33.33%;
		flex-basis: 33.33%;
	}
	.col-sm-5{
		max-width: 41.66%;
		flex-basis: 41.66%;
	}
	.col-sm-6{
		max-width: 50%;
		flex-basis: 50%;
	}
	.col-sm-7{
		max-width: 57.47%;
		flex-basis: 57.47%;
	}
	.col-sm-8{
		max-width: 66.66%;
		flex-basis: 66.66%;
	}
	.col-sm-9{
		max-width: 75%;
		flex-basis: 75%;
	}
	.col-sm-10{
		max-width: 83.33%;
		flex-basis: 83.33%;
	}
	.col-sm-11{
		max-width: 91.74%;
		flex-basis: 91.74%;
	}
	.col-sm-12{
		max-width: 100%;
		flex-basis: 100%;
	}
    .ui.mini.modal.remove-driver-modal{
        max-width: 320px;
    }
}

@media screen and (min-width: 768px){
    .col-md-1{
		max-width: 8.33%;
		flex-basis: 8.33%;
	}
	.col-md-2{
		max-width: 16.66%;
		flex-basis: 16.66%;
	}
	.col-md-3{
		max-width: 25%;
		flex-basis: 25%;
	}
	.col-md-4{
		max-width: 33.33%;
		flex-basis: 33.33%;
	}
	.col-md-5{
		max-width: 41.66%;
		flex-basis: 41.66%;
	}
	.col-md-6{
		max-width: 50%;
		flex-basis: 50%;
	}
	.col-md-7{
		max-width: 57.47%;
		flex-basis: 57.47%;
	}
	.col-md-8{
		max-width: 66.66%;
		flex-basis: 66.66%;
	}
	.col-md-9{
		max-width: 75%;
		flex-basis: 75%;
	}
	.col-md-10{
		max-width: 83.33%;
		flex-basis: 83.33%;
	}
	.col-md-11{
		max-width: 91.74%;
		flex-basis: 91.74%;
	}
	.col-md-12{
		max-width: 100%;
		flex-basis: 100%;
	}
    .ui.mini.modal.remove-driver-modal{
        width: 100%;
        max-width: 340px;
    }
}

@media screen and (min-width: 992px){
    .col-lg-1{
		max-width: 8.33%;
		flex-basis: 8.33%;
	}
	.col-lg-2{
		max-width: 16.66%;
		flex-basis: 16.66%;
	}
	.col-lg-3{
		max-width: 25%;
		flex-basis: 25%;
	}
	.col-lg-4{
		max-width: 33.33%;
		flex-basis: 33.33%;
	}
	.col-lg-5{
		max-width: 41.66%;
		flex-basis: 41.66%;
	}
	.col-lg-6{
		max-width: 50%;
		flex-basis: 50%;
	}
	.col-lg-7{
		max-width: 57.47%;
		flex-basis: 57.47%;
	}
	.col-lg-8{
		max-width: 66.66%;
		flex-basis: 66.66%;
	}
	.col-lg-9{
		max-width: 75%;
		flex-basis: 75%;
	}
	.col-lg-10{
		max-width: 83.33%;
		flex-basis: 83.33%;
	}
	.col-lg-11{
		max-width: 91.74%;
		flex-basis: 91.74%;
	}
	.col-lg-12{
		max-width: 100%;
		flex-basis: 100%;
	}
    .ui.mini.modal.remove-driver-modal{
        max-width: 360px;
    }
}

@media screen and (min-width: 1200px){
    .col-xl-1{
		max-width: 8.33%;
		flex-basis: 8.33%;
	}
	.col-xl-2{
		max-width: 16.66%;
		flex-basis: 16.66%;
	}
	.col-xl-3{
		max-width: 25%;
		flex-basis: 25%;
	}
	.col-xl-4{
		max-width: 33.33%;
		flex-basis: 33.33%;
	}
	.col-xl-5{
		max-width: 41.66%;
		flex-basis: 41.66%;
	}
	.col-xl-6{
		max-width: 50%;
		flex-basis: 50%;
	}
	.col-xl-7{
		max-width: 57.47%;
		flex-basis: 57.47%;
	}
	.col-xl-8{
		max-width: 66.66%;
		flex-basis: 66.66%;
	}
	.col-xl-9{
		max-width: 75%;
		flex-basis: 75%;
	}
	.col-xl-10{
		max-width: 83.33%;
		flex-basis: 83.33%;
	}
	.col-xl-11{
		max-width: 91.74%;
		flex-basis: 91.74%;
	}
	.col-xl-12{
		max-width: 100%;
		flex-basis: 100%;
	}
    .ui.mini.modal.remove-driver-modal{
        max-width: 390px;
    }
}

@media screen and (min-width: 1440px){
    .col-xxl-1{
		max-width: 8.33%;
		flex-basis: 8.33%;
	}
	.col-xxl-2{
		max-width: 16.66%;
		flex-basis: 16.66%;
	}
	.col-xxl-3{
		max-width: 25%;
		flex-basis: 25%;
	}
	.col-xxl-4{
		max-width: 33.33%;
		flex-basis: 33.33%;
	}
	.col-xxl-5{
		max-width: 41.66%;
		flex-basis: 41.66%;
	}
	.col-xxl-6{
		max-width: 50%;
		flex-basis: 50%;
	}
	.col-xxl-7{
		max-width: 57.47%;
		flex-basis: 57.47%;
	}
	.col-xxl-8{
		max-width: 66.66%;
		flex-basis: 66.66%;
	}
	.col-xxl-9{
		max-width: 75%;
		flex-basis: 75%;
	}
	.col-xxl-10{
		max-width: 83.33%;
		flex-basis: 83.33%;
	}
	.col-xxl-11{
		max-width: 91.74%;
		flex-basis: 91.74%;
	}
	.col-xxl-12{
		max-width: 100%;
		flex-basis: 100%;
	}
    .ui.mini.modal.remove-driver-modal{
        max-width: 410px;
    }
}

@media screen and (min-width: 1920px){
    .col-xxxl-1{
        max-width: 8.33%;
        flex-basis: 8.33%;
    }
    .col-xxxl-2{
        max-width: 16.66%;
        flex-basis: 16.66%;
    }
    .col-xxxl-3{
        max-width: 25%;
        flex-basis: 25%;
    }
    .col-xxxl-4{
        max-width: 33.33%;
        flex-basis: 33.33%;
    }
    .col-xxxl-5{
        max-width: 41.66%;
        flex-basis: 41.66%;
    }
    .col-xxxl-6{
        max-width: 50%;
        flex-basis: 50%;
    }
    .col-xxxl-7{
        max-width: 58.33%;
        flex-basis: 58.33%;
    }
    .col-xxxl-8{
        max-width: 66.66%;
        flex-basis: 66.66%;
    }
    .col-xxxl-9{
        max-width: 75%;
        flex-basis: 75%;
    }
    .col-xxxl-10{
        max-width: 83.33%;
        flex-basis: 83.33%;
    }
    .col-xxxl-11{
        max-width: 91.66%;
        flex-basis: 91.66%;
    }
    .col-xxxl-12{
        max-width: 100%;
        flex-basis: 100%;
    }
    .ui.mini.modal.remove-driver-modal{
        max-width: 440px;
    }
}

@media screen and (max-width: 575px){
    html{
        font-size: calc(var(--font-size) - 1.3px);
    }
    .col-date-from .ui.fluid.input, .col-date-to .ui.fluid.input{
        width: 10.5em;
    }
}

@media screen and (max-width: 400px){
    html{
        font-size: calc(var(--font-size) - 2px);
    }
}

@media screen and (max-width: 360px){
    html{
        font-size: calc(var(--font-size) - 3px);
    }
}