.center {
    display: flex;
    justify-content: center;
    align-items: center
}

ul,
ol,
li {
    padding: inherit;
    margin: inherit;
}

.note-editable ul>li {
    list-style-type: disc !important;
    margin-left: 0.8rem;
}

.note-modal-backdrop {
    display: none !important
}

.note-modal-footer {
    height: 10vh !important
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 10px white inset;
}

:root {
    --orange: #FF8127;
    --green-light: #39FF27;
    --light-blue: #27A5FF;
}

.bg-blue-light {
    background: var(--light-blue);
    color: #ffffff
}

.bg-green-light {
    background: var(--green-light);
    color: #ffffff
}

.bg-orange {
    background-color: var(--orange);
    color: #ffffff;
}

.height-full {
    height: 100vh;
}

.content-form-login {
    width: 75%;
    height: 60vh;
    padding: 2rem;
    border: 1px solid transparent;
    margin: auto;
    display: grid;
    align-items: center;
}

.content-input-form {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem;
    margin-bottom: 1rem;
}

.input-login {
    margin: 0!important;
    outline: 0 !important;
    margin-bottom: 0 solid transparent !important;
}

.btn-send-form {
    width: 100%;
    background-color: var(--orange);
    padding: 1rem;
    font-weight: 600;
    font-size: 1.2rem;
    color: #ffffff;
    cursor: pointer
}

.btn-send-form:hover {
    background-color: #ff8127ce
}

.btn-send-form:active {
    background-color: #ff8127ce
}

.content-input-form i {
    color: #8F8074
}

input {
    color: #8F8074
}

#text-welcome-form {
    font-size: 1.2rem;
    color: #8F8074
}

#list-menu {
    height: 95%;
    width: 98%;
    background-color: #ffffff;
}

#content-body {
    height: 96%;
    width: 99%;
    background-color: #ffffff;
}

#title-section {
    color: #8F8074;
    font-weight: 600;
    text-align: left;
    padding: 0 2rem;
}

#title-section h5 {
    border-bottom: 1px solid #8F8074;
    padding: 0.8rem 0rem;
}

.btn-add {
    display: flex;
    width: 90%;
    height: 7vh;
    border: 1px solid #27A5FF;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 200px;
    font-weight: 600;
    background-color: #27A5FF;
    color: #ffffff;
    transition: all 300ms
}

.Btn-table {
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.4rem;
    color: #ffffff
}


/****input*************/

.input-text {
    border: 1px solid #cccccc;
    border-radius: 0.4rem;
}

.input-text input[type=text] {
    padding: 0.2rem 0.4rem
}

label {
    font-size: 1.2rem;
    font-weight: 600;
}


/*********TABLE NOTIFY*************/

table {
    width: 100%
}

table td:first-child {
    width: 5%;
    text-align: center;
}

table td:nth-child(2) {
    width: 50%;
}

table td:nth-child(3) {
    width: 10%;
    text-align: center
}

table td:nth-child(4) {
    width: 10%;
    text-align: center
}

table td:nth-child(5) {
    width: 5%;
    text-align: center
}

table td:last-child {
    justify-content: center;
}

th {
    text-align: center;
}

tbody td {
    padding: 0.3rem;
    vertical-align: middle;
}

.mr-1 {
    margin-right: 1rem
}

h5 {
    margin: 0;
}

.title-modal {
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.8rem;
    margin: 0;
}


/*********PRELOADER CSS*************/

.loader {
    color: var(--orange);
    font-size: 20px;
    margin: 100px auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load4 1.3s infinite linear;
    animation: load4 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

@-webkit-keyframes load4 {
    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }
    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }
    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }
    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}

@keyframes load4 {
    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }
    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }
    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }
    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}


/******************************/

.input-field label {
    color: #000;
}


/* label focus color */

.input-field input[type=text]:focus+label {
    color: #000;
}


/* label underline focus color */

.input-field input[type=text]:focus {
    border-bottom: 1px solid transparent;
    box-shadow: 0 1px 0 0 #000;
}


/* valid color */

.input-field input[type=text].valid {
    border-bottom: 1px solid transparent;
    box-shadow: 0 1px 0 0 #000;
}


/* invalid color */

.input-field input[type=text].invalid {
    border-bottom: 1px solid transparent;
    box-shadow: 0 1px 0 0 #000;
}


/* icon prefix focus color */

.input-field .prefix.active {
    color: #000;
}


/*********************SUMMERNOTE*****************************/

.applyBtn {
    background-color: var(--light-blue) !important;
}

.cancelBtn {
    background-color: #bdbdbd;
    color: #ffffff
}

.daterangepicker td.in-range {
    background-color: #FFE0C9
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.active {
    background-color: var(--orange)
}

.note-editor.note-airframe .note-editing-area .note-editable,
.note-editor.note-frame .note-editing-area .note-editable {
    background-color: #ffffff
}

.sn-checkbox-open-in-new-window input{
    opacity: unset !important;
    position: unset !important;
    pointer-events: unset !important;
}

.sn-checkbox-use-protocol input {
    opacity: unset !important;
    position: unset !important;
    pointer-events: unset !important;
}

#formContent {
    overflow-y: scroll;
}