@import url("open-iconic/font/css/open-iconic-bootstrap.min.css");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");


.app-loading-container {
    background-image: url(../images/TelaLoginVelari.png);
    background-size: cover;
    background-position: fixed;
    background-repeat: no-repeat;
    background-attachment: fixed;

    width: 100vw;
    height: 100vh;
}

/* @media (max-width: 766px) {
    .app-loading-container, section.login {
        background-image: url(../images/TelaLoginVelari.png);
    }
}

@media (min-width: 767px) {
    .app-loading-container, section.login {
        background-image: url(../images/TelaLoginVelari.png);
    }
}

@media (min-width: 991px) {
    .app-loading-container, section.login {
        background-image: url(../images/TelaLoginVelari.png);
    }
}

@media (min-width: 1199px) {
    .app-loading-container, section.login {
        background-image: url(../images/TelaLoginVelari.png);
    }
} */

.app-loading-container .logoBx {
    padding-left: 6%;
    padding-top: 6%;
}

.app-loading-container .logoSafeWrapper {
    position: relative;
    height: 100px;
}

.app-loading-container .logoSafeWrapper img {
    height: 100%;
}

.app-loading-container .spinner-border {
    width: 3rem;
    height: 3rem;
}


/*Personalizações do Grid  */
.e-grid .e-detailheadercell,
.e-grid .e-headercell {
    padding: 0 14px;
}

.e-grid .e-gridheader tr th:first-child,
.e-grid .e-gridheader tr th:first-child.e-filterbarcell {
    padding-left: 14px;
}

.e-grid .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv,
.e-grid .e-gridheader .e-sortfilter .e-rightalign.e-fltr-icon .e-headercelldiv {
    margin: -7px 4px -7px -7px;
}

.e-grid .e-rowcell:first-child,
.e-grid .e-summarycell:first-child,
.e-grid .e-rowcell {
    padding-left: 14px;
}

.e-grid .e-groupcaption {
    overflow: visible;
}


/*Fim*/

/*Input Group com Botão, */
.e-input-group .e-ddl.e-control-container.e-control-wrapper {
    border: none;
    margin-top: -4px;
}

.e-input-group .e-ddl.e-control-container.e-control-wrapper.e-input-focus {
    border: none !important;
    margin-top: -4px;
}

.e-input-group .e-ddl.e-control-container.e-control-wrapper.e-input-focus::before,
.e-input-group .e-ddl.e-control-container.e-control-wrapper.e-input-focus::after {
    bottom: -6px;
}

.e-input-group.e-control-wrapper.e-input-focus {
    border: none;
}

.e-input-group .e-btn {
    margin-bottom: -1px;
    margin-left: 10px;
}

/*Fim*/

:root {
    --body-background-color: rgb(247 247 247);
}

html,
body {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #676a6c;
    background: var(--body-background-color);
}

.spinner-centralized {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

a,
.btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {}

.valid.modified:not([type="checkbox"]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
    font-size: 0.9em;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.e-grid .e-altrow {
    background-color: #fafafa;
}
.switch-forms-container {
    width: 100%;
    padding-top: 10px;
}

/* Position custom.
-------------------------------------------------- */
.position-center-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/* Display custom.
-------------------------------------------------- */
.display-none {
    display: none !important;
}

.display-block {
    display: block !important;
}

.visible {
    visibility: visible !important;
}

.invisible {
    visibility: hidden !important;
}

/* Width custom.
-------------------------------------------------- */
.w-95 {
    width: 95% !important;
}

.w-90 {
    width: 90% !important;
}

.w-85 {
    width: 85% !important;
}

.w-80 {
    width: 80% !important;
}

.w-70 {
    width: 70% !important;
}

.w-65 {
    width: 65% !important;
}

.w-60 {
    width: 60% !important;
}

.w-55 {
    width: 55% !important;
}

.w-45 {
    width: 45% !important;
}

.w-40 {
    width: 40% !important;
}

.w-35 {
    width: 35% !important;
}

.w-30 {
    width: 30% !important;
}

.w-20 {
    width: 20% !important;
}

.w-15 {
    width: 15% !important;
}

.w-10 {
    width: 10% !important;
}

.w-100-px {
    width: 100px !important;
}

.w-95-px {
    width: 95px !important;
}

.w-90-px {
    width: 90px !important;
}

.w-85-px {
    width: 85px !important;
}

.w-80-px {
    width: 80px !important;
}

.w-75-px {
    width: 75px !important;
}

.w-70-px {
    width: 70px !important;
}

.w-65-px {
    width: 65px !important;
}

.w-60-px {
    width: 60px !important;
}

.w-55-px {
    width: 55px !important;
}

.w-50-px {
    width: 50px !important;
}

.w-45-px {
    width: 45px !important;
}

.w-40-px {
    width: 40px !important;
}

.w-35-px {
    width: 35px !important;
}

.w-30-px {
    width: 30px !important;
}

.w-25-px {
    width: 25px !important;
}

.w-20-px {
    width: 20px !important;
}

.w-15-px {
    width: 15px !important;
}

.w-10-px {
    width: 10px !important;
}

/* height custom.
-------------------------------------------------- */
.h-95 {
    height: 95% !important;
}

.h-90 {
    height: 90% !important;
}

.h-85 {
    height: 85% !important;
}

.h-80 {
    height: 80% !important;
}

.h-70 {
    height: 70% !important;
}

.h-65 {
    height: 65% !important;
}

.h-60 {
    height: 60% !important;
}

.h-55 {
    height: 55% !important;
}

.h-45 {
    height: 45% !important;
}

.h-40 {
    height: 40% !important;
}

.h-35 {
    height: 35% !important;
}

.h-30 {
    height: 30% !important;
}

.h-20 {
    height: 20% !important;
}

.h-15 {
    height: 15% !important;
}

.h-10 {
    height: 10% !important;
}

.h-100-px {
    height: 100px !important;
}

.h-95-px {
    height: 95px !important;
}

.h-90-px {
    height: 90px !important;
}

.h-85-px {
    height: 85px !important;
}

.h-80-px {
    height: 80px !important;
}

.h-75-px {
    height: 75px !important;
}

.h-70-px {
    height: 70px !important;
}

.h-65-px {
    height: 65px !important;
}

.h-60-px {
    height: 60px !important;
}

.h-55-px {
    height: 55px !important;
}

.h-50-px {
    height: 50px !important;
}

.h-45-px {
    height: 45px !important;
}

.h-40-px {
    height: 40px !important;
}

.h-35-px {
    height: 35px !important;
}

.h-30-px {
    height: 30px !important;
}

.h-25-px {
    height: 25px !important;
}

.h-20-px {
    height: 20px !important;
}

.h-15-px {
    height: 15px !important;
}

.h-10-px {
    height: 10px !important;
}

/* Line Height custom.
-------------------------------------------------- */
.line-height-1 {
    line-height: 1 !important;
}

.line-height-0 {
    line-height: 0 !important;
}

/* Border custom.
-------------------------------------------------- */
.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-right {
    border-right: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.border-left {
    border-left: 1px solid #e5e5e5;
}

.border-red {
    border: 1px solid red !important;
}

.border-green {
    border: 1px solid green !important;
}

.border-blue {
    border: 1px solid blue !important;
}

.border-radius-0 {
    border-radius: 0px !important;
}

/* Fonts custom.
-------------------------------------------------- */
.font-s-2r {
    font-size: 2rem !important;
}

.font-s-1r {
    font-size: 1rem !important;
}

.font-s-09r {
    font-size: .9rem !important;
}

.font-s-08r {
    font-size: .8rem !important;
}

.font-s-07r {
    font-size: .7rem !important;
}

.font-s-06r {
    font-size: .6rem !important;
}

.font-s-05r {
    font-size: .5rem !important;
}

/* Texts colors custom.
-------------------------------------------------- */
.text-color-white {
    color: white !important;
    font-weight: 600;
}

/* Texts Uppercase.
-------------------------------------------------- */
.child-input-uppercase>input.e-textbox.e-input {
    text-transform: uppercase;
}

/* Modals custom. 
    NT: Modal quando criada no componente fica entre a tag body, deste modo qualquer alteração css fica neste arquivo.
-------------------------------------------------- */
/* Fazer alteração da modal ID="agendamento" aqui. */
#modal-agendamento .e-dialog {
    max-width: 1000px !important;
    max-height: 550px !important;
}

#modal-agendamento .e-dialog .e-dlg-header-content {
    padding: 12px;
}

#modal-agendamento .e-dialog .e-dlg-header-content .e-dlg-header {
    width: 100%;
}

#modal-agendamento .e-dialog .e-dlg-content .content-accordion {
    height: calc(100vh - 304px);
    max-height: 355px;
}

#modal-agendamento .e-dialog .e-dlg-content .e-control .Content-accordion {
    max-height: 314px;
}


#modal-agendamento .btns-agendamento button {
    width: 200px;
    background: rgb(180 180 180);
    border: 0;
}

#modal-agendamento .btns-agendamento button:active:focus {
    background: rgb(226 226 226);
    color: black;
    border: 0;
}



.fa-toolbar {
    font-size: 0.8em;
}

.fa,
.fas {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
}

.far {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 400 !important;
}

.fal {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 300 !important;
}

.fad {
    position: relative;
    font-family: 'Font Awesome 5 Duotone' !important;
    font-weight: 900 !important;
}

.fab {
    font-family: 'Font Awesome 5 Brands' !important;
    font-weight: 400 !important;
}

/* Faz alteração na modal id="e-dropdown-popup" PopUp - ref. ao componente Notification*/
.e-dropdown-popup.e-control.notification-dropdown {
    font-size: 12.5px;
    font-family: 'Open Sans';
    left: 992px;
    /*top: 42px;*/
    z-index: 1002;
    padding: 18px;
    padding-top: 32px;
    box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
    max-height: 520px;
    width: 318px;
    align-items: baseline;
    overflow-x: scroll;
}

.e-dropdown-popup.e-control.notification-dropdown::-webkit-scrollbar {
    width: 0.5em;
}

.e-dropdown-popup.e-control.notification-dropdown::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    width: 150px;
}

.e-dropdown-popup.e-control.notification-dropdown::-webkit-scrollbar-thumb {
    background-color: #a6a6a6;
    border-radius: 8px;
}


/*Faz alteração no estilo do login do Avatar do componente Cabeçalho e também nos elementos do componente Notification*/
.e-control.e-btn.e-lib.e-dropdown-btn.notification-dropdown.hasunread.e-icon-button {
    width: 48px;
}

.fas.fa-bell.e-btn-icon.e-icon-left {
    width: 12px;
}

.e-btn-icon.e-icons.e-caret {
    width: 0;
}

.e-control.e-btn.e-lib.e-dropdown-btn {
    background: none;
}

/*Cores icones dropdown notification*/
.fas.fa-check {
    color: #19e54c;
}

.fas.fa-times {
    color: orange;
}

.fas.fa-ban {
    color: red;
}

.fas.fa-arrow-alt-circle-left {
    color: cornflowerblue;
}

.fas.fa-user-plus {
    color: forestgreen;
}

.fas.fa-lock {
    color: darkred;
}

.fas.fa-user-alt-slash {
    color: darkgoldenrod;
}

.fas.fa-briefcase {
    color: saddlebrown;
}

.fas.fa-user-lock {
    color: darkslategray;
}

.fas.fa-times {
    color: orangered;
}

.fas.fa-clipboard-list {
    color: gray;
}

.fas.fa-retweet {
    color: #585b7a;
}

.fas.fa-user-clock {
    color: orange;
}


@media (max-width: 640.98px) {
    .pagina-cabecalho {
        margin-left: -15px;
        margin-right: -15px;
    }
}


/* Componente Listing*/
.buttons-container{
   margin-top: 5px;
   margin-bottom: 5px;
}
.buttons-container > div > button{
   margin-right: 8px;
}
/*Fim*/

/*Forms*/
.form-group{
   margin-bottom: 3px;
}


.e-mention .e-dropdownbase .e-list-item {
    white-space: normal;
    text-indent: 0;
    padding-left: 10px;
 
 }

.e-upload.highlight-drag{
   
}

.e-upload.highlighted-drag{
   border-color: var(--color-sf-primary);
}