@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&family=Source+Sans+Pro:wght@300;400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif;
}

body {
    width: 100%;
    height: 100%;
}

/*=========== ESTILIZAÇÃO CORES =========================== */

:root {
    --bs-red: #D40D12;
    --bs-gray: #757575;
    --bs-gray-button: #B5B5B5;
    --bs-gray-light: #EBEBEB;
    --bs-dark: #152836;
    --bs-hover-red: #FF1C23;
    --bs-hover-gray: #A0A3A8;
    --bs-hover-white: #F2ECFF;
    --bs-hover-dark: #364359;
    --bs-hover-text: #748798;
}


/* ========== ESTILIZAÇÃO CORES DE TEXTOS  ================ */

.text-gray {
    color: var(--bs-gray)
}

.text-gray-light {
    color: var(--bs-gray-button)
}

.text-red {
    color: var(--bs-red)
}

.text-dark {
    color: var(--bs-dark) !important;
}

::-webkit-input-placeholder {
    color: black !important;
}
/* ========== ESTILIZAÇÃO BACKGROUND COLORS ================ */
.bg-red {
    background-color: var(--bs-red);
}

.bg-gray {
    background-color: var(--bs-gray);
}

.bg-gray-button {
    background-color: var(--bs-gray-button);
}

.bg-gray-light {
    background-color: var(--bs-gray-light);
}

.bg-dark-button {
    background-color: var(--bs-dark);
}

/* ========== ESTILIZAÇÃO CONTAINERES GLOBAL ========== */

.container-login {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
}

.container-body {
    position: relative;
    height: 100%;
    min-height: 80vh;
    width: calc(100% - 62px);
    transition: 0.3s all ease-in-out;
    z-index: 2;
}

.container-register {
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 10px;
}

.container-sumary {
    border-radius: 10px;
    box-shadow: 0px 3px 6px #00000029;
    height: 100vh;
}

/* ========= ESTILIZAÇÃO HEADER ======================== */

header {
    width: 100%;
    box-shadow: 0px 3px 6px #00000029;
    z-index: 3;
}

.logo-header {
    width: 150px;
}

.content-create-orders {
    border-right: 1px solid var(--bs-gray);
}

.button-create-orders {
    border: none;
    border-radius: 50%;
    color: #FFFFFF;
    width: 35px;
    height: 35px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-perfil {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.dropdown-toggle::after {
    padding-bottom: 8px;
    color: var(--bs-red);
}

.perfil-content {
    position: absolute !important;
    z-index: 4;
    margin-left: -10px !important;
}

.profile-photo {
    object-fit: cover;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    border: 2px solid var(--bs-red);
}

.description-profile {
    font-size: 14px;
}
.form-select.select-register{
    border-radius:10px;
}
/* =========== MENU ==================================== */
.flex-is-one {
    flex: 1;
}

input::placeholder{
    opacity:70%;
}

#button-menu {
    background-color: transparent;
    border-radius: none;
    border: none;
    transform: rotateY(180deg);
    -webkit-animation: flip-vertical-left 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: flip-vertical-left 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

    #button-menu.active {
        -webkit-animation: flip-vertical-right 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
        animation: flip-vertical-right 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    }

.sidebar-menu {
    position: relative;
    min-height: 90vh;
    width: 62px;
    background-color: var(--bs-dark);
    left: 0;
    transition: 0.3s all ease-in-out;
    padding-bottom: 80px;
    overflow-y: auto;
}

    .sidebar-menu.active {
        width: 234px;
        transition: 0.3s all ease-in-out !important;
    }

        .sidebar-menu nav ul li, .sidebar-menu > .px-3.d-flex.align-items-center {
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .sidebar-menu.active nav ul li, .sidebar-menu.active > .px-3.d-flex.align-items-center {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

        .sidebar-menu nav ul li a,
        .sidebar-menu div p {
            text-decoration: none;
            display: none;
            visibility: hidden;
        }

            .sidebar-menu nav ul li a:hover {
                color: var(--bs-red);
            }

            .sidebar-menu nav ul li a small:hover {
                cursor: pointer;
                color: var(--bs-hover-text);
            }

    .sidebar-menu.active nav ul li a,
    .sidebar-menu.active div p {
        display: block;
        visibility: visible;
    }

    .sidebar-menu.active ~ .container-body {
        width: calc(100% - 234px);
    }

#title-dashboard {
    border-radius: 20px;
    font-size: 12px;
}

.sub-items {
    margin-left: 57px;
}


/* ========== ESTILIZAÇÃO BOTÕES ================ */

.buttons {
    height: 55px;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 10px;
}

.buttons-aplication {
    height: 45px;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 10px;
}

.button-new {
    color: #FFFFFF;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    background-color: var(--bs-red) !important;
}

.btn-action-profile a {
    font-size: 14px;
}

    .btn-action-profile a img {
        height: 18px;
    }

.button-select-traveler {
    border: none !important;
    font-size: 12px;
    border-radius: 10px;
}

    .buttons:hover,
    .button-new:hover,
    .button-select-traveler:hover,
    .buttons-aplication:hover {
        cursor: pointer;
    }

.btn-hover-red,
.btn-hover-gray,
.btn-hover-white,
.btn-hover-dark {
    transition: .2s ease-in-out;
}

    .btn-hover-red:hover,
    .button-new:hover {
        background-color: var(--bs-hover-red);
    }

    .btn-hover-gray:hover {
        background-color: var(--bs-hover-gray);
    }

    .btn-hover-white:hover {
        background-color: var(--bs-hover-white) !important;
    }

    .btn-hover-dark:hover {
        background-color: var(--bs-hover-dark)
    }

/* ========== ESTILIZAÇÃO INPUTS GLOBAL  =============== */

.input-globals {
    width: 100%;
    height: 55px;
    border-radius: 10px;
    border: 1px solid #B5B5B5;
    outline: none;
    padding: 0 20px;
    font-weight: 300;
}

.input-icons {
    background: #FFFFFF;
    display: flex;
    align-items: center;
    border-radius: 10px;
    border: 1px solid var(--bs-gray);
}

    .input-icons input {
        width: 90%;
        height: 45px;
        padding: 0 10px 0 20px;
        border: none;
        outline: none;
        border-radius: 10px;
    }

    .input-icons img {
        height: 20px;
    }

.input-create-new {
    display: flex;
    align-items: center;
    min-height: 45px;
    display: flex;
    padding: 0 0;
    align-items: center;
    border: 1px solid var(--bs-gray);
    border-radius: 10px;
    margin: 0;
}

    .input-create-new select {
        width: 70%;
        height: 100%;
        padding-left: 10px;
        border: none;
        background-image: url("../assets/icones/chevron-down.png") !important;
    }

    .input-create-new .create-new {
        display: flex;
        justify-content: end;
        align-items: center;
        width: 30%;
        height: 100%;
        border-left: 1px solid var(--bs-gray);
    }


textarea, .form-select {
    border-radius: 10px !important;
    border: 1px solid var(--bs-gray) !important;
}
.input-file {
    min-height: 45px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    border: 1px solid var(--bs-gray);
    border-radius: 10px;
    margin: 0;
}


    .input-file div:nth-child(1) {
        height: 100%;
        border-right: 1px solid var(--bs-gray);
        display: flex;
        align-items: center;
    }

    .input-file div:nth-child(2) {
        height: 100%;
        display: flex;
        align-items: center;
    }

input[type='file'] {
    display: none;
}

.input-text-area {
    width: 100%;
    display: flex;
    border: 1px solid var(--bs-gray);
    border-radius: 10px;
    outline: none !important;
}

.input-airline {
    border-radius: 10px;
    border: 1px solid var(--bs-gray);
}

    .input-airline div input {
        height: 45px;
        padding: 0 10px;
        width: 100%;
        border: none;
        outline: none;
    }

    .input-airline div:nth-child(1) {
        border-right: 1px solid var(--bs-gray);
    }

.select-register {
    border-radius: 10px;
    border: 1px solid var(--bs-gray);
    color: var(--bs-gray);
    padding-left: 20px;
    height: 45px;
    background-image: url("../assets/icones/chevron-down.png");
}

.form-check-input {
    font-size: 20px;
    background-color: var(--bs-gray-light);
}

    .form-check-input:checked {
        background-color: var(--bs-gray-light) !important;
    }

.form-switch .form-check-input:checked {
    background-image: url("../assets/icones/checked.svg") !important;
    border-color: transparent;
}

.check-table-content {
    padding: 0 !important;
}

.form-check-table {
    margin-left: 0 !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.title-underline {
    border-bottom: 1px solid var(--bs-gray);
}

.form-check-input:checked {
    background-color: var(--bs-red);
}

.form-check-radio-title {
    background-image: url("../assets/icones/icon-radio-button.svg");
    font-size: 18px;
}

    .form-check-radio:checked[type=radio],
    .form-check-radio-title:checked[type=radio] {
        background-color: var(--bs-red) !important;
        background-image: url("../assets/icones/icon-radio-button-checked.svg");
    }

.form-check-radio-sumary {
    background-color: #FFFFFF !important;
    background-image: url("../assets/icones/icon-radio-button.svg") !important;
}

    .form-check-radio-sumary:checked[type=radio] {
        background-image: url("../assets/icones/icon-radio-button.svg") !important;
        font-size: 18px;
    }

#flexCheckDefaulCheckbox {
    background-color: #FFFFFF;
}

    #flexCheckDefaulCheckbox:checked {
        background-color: var(--bs-red) !important;
    }

.chip {
    padding: 10px 10px 10px 25px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    border-radius: 25px;
    background-color: var(--bs-gray-light);
}

.closebtn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15px;
    width: 15px;
    color: var(--bs-gray-light);
    background-color: var(--bs-gray);
    border-radius: 50%;
    font-weight: bold;
    float: right;
    font-size: 14px;
    cursor: pointer;
    margin-left: 10px;
}

    .closebtn:hover {
        color: #000;
    }

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.number-input {
    border: 2px solid #ddd;
    border-radius: 10px;
    display: inline-flex;
}

    .number-input,
    .number-input * {
        box-sizing: border-box;
    }

        .number-input button {
            outline: none;
            -webkit-appearance: none;
            background-color: transparent;
            border: none;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
            cursor: pointer;
            margin: 0;
            position: relative;
        }

            .number-input button:before,
            .number-input button:after {
                display: inline-block;
                position: absolute;
                content: '';
                width: 1rem;
                height: 2px;
                background-color: var(--bs-gray);
                transform: translate(-50%, -50%);
            }

            .number-input button.plus:after {
                transform: translate(-50%, -50%) rotate(90deg);
            }

        .number-input input[type=number] {
            font-family: sans-serif;
            max-width: 3rem;
            padding: .5rem;
            border: solid #ddd;
            border-width: 0 2px;
            font-size: 20px;
            height: 3rem;
            font-weight: bold;
            text-align: center;
            color: var(--bs-red);
        }

/* ========= ESTILIZAÇÃO LINK GLOBAL ================== */

.links {
    font-size: 14px;
    color: var(--bs-gray);
    text-decoration: none;
}

/* ============ ESTILIZAÇÃO MODALS ====================== */

.modal-content {
    border-radius: 10px !important;
}

.modal-header {
    border-bottom: none;
    padding: 1rem 1rem 0 1rem !important;
}

.modal-footer {
    border-top: none;
}

.chipTravelers {
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    border-radius: 10px;
    background-color: var(--bs-gray-light);
    color: var(--bs-dark);
}

.popover-body {
    background-color: var(--bs-dark);
    color: #FFFFFF;
    font-size: 12px;
    text-align: justify !important;
    padding: 20px;
}

.bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: var(--bs-dark) !important;
}

.data-travelers {
    position: absolute;
    display: none !important;
    visibility: hidden;
    border: 1px solid var(--bs-gray);
    margin-left: 60px;
    border-radius: 10px;
    box-shadow: 0px 3px 6px #00000029;
}

.show-data-travelers {
    display: block !important;
    visibility: visible;
}

/* =========== ESTILIZAÇÃO TABELAS ====================== */

.table,
.table-airplane-content,
.table-monitoring-content {
    overflow-x: auto;
    max-height: 430px !important;
    overflow-y: auto !important;
}

table {
    width: 100%;
    min-width: 850px;
    border-spacing: 0 10px !important;
    border-collapse: separate !important;
}

    table thead,
    table tbody {
        border-radius: 30px !important;
        border-color: transparent
    }

        table thead tr th,
        table tbody tr td {
            padding: 8px 0px 8px 8px;
        }

        table thead tr :first-child {
            border-top-left-radius: 10px !important;
            border-bottom-left-radius: 10px !important;
        }

        table thead tr :last-child {
            border-top-right-radius: 10px !important;
            border-bottom-right-radius: 10px !important;
        }

        table thead tr,
        table tbody tr {
            border-radius: 10px;
            box-shadow: 0px 3px 3px #00000029 !important;
        }

            table tbody tr th,
            table tbody tr th td {
                padding: 5px 8px;
            }

            table tbody tr th {
                color: var(--bs-red) !important;
                font-weight: normal !important;
                font-size: 14px;
            }

            table tbody tr td {
                color: var(--bs-gray) !important;
                font-size: 14px;
            }

            table tbody tr :first-child {
                border-top-left-radius: 10px !important;
                border-bottom-left-radius: 10px !important;
            }

            table tbody tr td:last-child {
                border-top-right-radius: 10px !important;
                border-bottom-right-radius: 10px !important;
            }

.numbers-travels {
    color: var(--bs-red) !important;
}

.button-action {
    border: none !important;
    background-color: transparent !important;
}

.header-red-table {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.header-dark-table {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: var(--bs-dark);
}

.table-airplane {
    width: 100%;
    min-width: none !important;
    border-spacing: 0 !important;
    border-top: 1px solid var(--bs-gray);
}

.table-airplane-content,
.table-monitoring-content,
.table-modal-operator-content {
    font-size: 14px;
    color: var(--bs-gray);
    font-weight: normal;
}

.table-airplane thead,
.table-airplane tbody,
.table-airplane thead tr,
.table-airplane tbody tr,
.table-airplane thead tr th,
.table-airplane tbody tr th,
.table-airplane tbody tr td,
.table-monitoring thead,
.table-monitoring tbody,
.table-monitoring thead tr,
.table-monitoring tbody tr,
.table-monitoring thead tr th,
.table-monitoring tbody tr th,
.table-monitoring tbody tr td {
    border-radius: 0 !important;
}

    .table-airplane thead tr th {
        color: var(--bs-gray);
        font-weight: normal;
    }

    .table-airplane thead tr,
    .table-airplane tbody tr {
        box-shadow: none !important;
        border-bottom: 1px solid var(--bs-gray);
    }

    .table-airplane thead tr {
        border-top: 1px solid var(--bs-gray) !important;
    }

    .table-airplane tbody tr,
    .table-airplane tbody tr td {
        padding: 15px 10px !important;
    }

        .table-airplane tbody tr td:last-child,
        .table-modal-operator tbody tr td:last-child {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }

.table-monitoring thead {
    border-bottom: none !important;
}

    .table-monitoring thead tr {
        border-top: none !important;
        box-shadow: none;
        color: var(--bs-gray);
    }

        .table-monitoring thead tr th {
            border-bottom: none !important;
        }

    .table-monitoring thead tr,
    .table-monitoring tbody tr {
        box-shadow: none !important;
    }

        .table-monitoring tbody tr td {
            border-bottom: 1px solid var(--bs-gray-button) !important;
        }


            .table-monitoring thead tr th:first-child,
            .table-monitoring tbody tr td:first-child {
                padding-left: 50px !important;
            }

            .table-monitoring tbody tr td:last-child {
                padding-right: 50px;
                border-top-right-radius: 0 !important;
                border-bottom-right-radius: 0 !important;
            }


.table-modal-operator-content {
    width: 100%;
}

.content-modal-operator {
    max-width: 1140px !important;
}

.table-modal-operator thead tr {
    box-shadow: none !important;
}

.table-modal-operator tbody tr td:first-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.table-modal-operator tbody tr {
    box-shadow: none !important;
    border-bottom: 1px solid var(--bs-gray);
}

.table-modal-operator-content {
    overflow-x: auto;
    max-height: 200px !important;
    overflow-y: auto !important;
}


.border-top-table tbody tr {
    border-top: 1px solid var(--bs-gray-button);
}

.border-bottom-table {
    border-bottom: 1px solid var(--bs-gray-button);
}


/* ===========  ESTILIZAÇÃO TELA LOGIN ================== */

.form-login {
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 20px;
}

.date-city {
    height: 435px;
    right: 5%;
}

.footer-login {
    padding: 0 5%;
}

/* ESTILIZAÇÃO TELA DASHBOARD =========================== */

.select-search {
    border-radius: 10px;
    color: var(--bs-gray);
    height: 45px;
    border: 1px solid var(--bs-gray);
    background-image: url("../assets/icones/chevron-down.png");
}

    .select-search i {
        color: var(--bs-red);
    }

.button-dashboard {
    width: 100% !important;
    height: 120px !important;
    border: none;
    border-radius: 10px;
}

    .button-dashboard a {
        display: flex;
        flex-direction: column;
    }

        .button-dashboard a span:nth-child(1) {
            font-size: 40px;
        }

.select-language {
    height: 45px;
    border-radius: 10px;
    border: 1px solid var(--bs-gray);
    color: var(--bs-red);
    background-image: url("../assets/icones/chevron-down.png");
}

.container-sumary div p {
    line-height: 1.1;
}

.name-monitoring {
    border-radius: 10px !important;
}

.breadcrumb-item a {
    color: var(--bs-gray);
    font-size: 16px;
    text-decoration: none !important;
}

/* ===========  ESTILIZAÇÃO FOOTER  =============== */

footer {
    z-index: 2;
}

.links-footer {
    list-style-type: none;
}

    .links-footer li a {
        text-decoration: none;
        font-size: 12px;
        width: 100%;
        color: #FFFFFF;
    }

.footer-border-top {
    border-top: 1px solid #FFFFFF;
}


/* ============ MEDIA QUERYS ============================ */
@media (max-width: 1330px) {

    .container-body > .d-flex, .tables.ng-scope > .d-flex, .main-page.ng-scope > .d-flex {
        flex-direction: column;
    }

        .container-body > .d-flex > .col-lg-3, .tables.ng-scope > .d-flex > .col-lg-3, .main-page.ng-scope > d-flex > .col-lg-3{
            width: 100%;
        }
        .container-sumary{
            height:max-content;
            flex-direction:column!important;
        }
}

@media (max-width: 576px) {

    .content-create-orders {
        border-right: none;
    }

    .perfil {
        justify-content: flex-end !important;
    }
}

@media (max-width: 768px) {
    .date-city {
        top: 20px;
        height: auto;
        width: 100%;
    }

    .form-login {
        margin-top: 30px;
    }

    .button-form {
        width: 100% !important;
    }

    .input-create-new {
        flex-direction: column;
    }

        .input-create-new select {
            width: 100%;
            height: 45px;
        }

        .input-create-new .create-new {
            border-top: 1px solid var(--bs-dark);
            border-left: none;
            width: 100%;
            height: 45px;
            padding: 0 !important;
        }
}

@media (max-width: 991px) {
    .container-sumary {
        min-height: 150px !important;
    }
}


/* ============ ANIMAÇÕES  ============================ */

@-webkit-keyframes flip-vertical-right {
    0% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes flip-vertical-right {
    0% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes flip-vertical-left {
    0% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }

    100% {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }
}

@keyframes flip-vertical-left {
    0% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }

    100% {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }
}

@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}