header.header-fixed-top{
    position:fixed; 
    width:100%;
}

div.tqa-headerMenuContainer{
    height: 7.5rem;
}

div.tqa-PageTitle{
    font-size: 2.5rem !important;
    font-weight: bolder !important;
}

.navbar-fixed-top{
    z-index: 10000;
   position: fixed;
   top: 0px;
   width: 100%;
}

.navbar.navbar-expand-lg.tqa-navbar-bg-color{
    background-color: #104d88;
}

.navbar.navbar-expand-lg.tqa-navbar-bg-color.tqa-menu{
    height: 2.5rem !important;
}

.nav-item.tqa-color{
    color: transparent;
}

.nav-item.tqa-color > a {
    color: #f1a83e !important;    
}

div.tqa-menu-container{
    width: 100%;
    padding: 0 1rem 0 1rem;
}


a.navbar-brand.tqa-logo{
    height: 5rem;
    width: 7rem;
    
}

a.navbar-brand.tqa-logo > img{
    height: 100%;
    width: 100%;
    
}

div.tqa-menu-width-separator{
    height: 100%;
    width: 2.5rem;
    background-color: aqua;
}

div.tqa-menu-width-separator-right{
    height: 4rem;
    width: 5rem;
    background-color: aqua;
}

div.row.title{
    padding-bottom: 0.5rem;
    border-bottom: 0.2rem solid #f1a83e;
}

div.textDiv{    
    text-align: center;
    vertical-align: middle;
    color: #f1a83e;
    font-weight: bold;
    font-size: 2rem;
    background-color: transparent !important;
    width: 100% !important;
    height: 2.5rem !important;
}

div.textDiv.tqa-menu-row{
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    height: 2rem;
    justify-content: center !important;
}

div.row.tqa-menu-row{
    margin-top: 0.5rem !important;
    height: 2.5rem!important;
}

.collapse.navbar-collapse.tqa-menu{
    text-align: center;
    height: 2rem;
    justify-content: center !important;
}

ul.navbar-nav.tqa-menu{
    height: 2rem;
}

.navbar-nav.tqa-menu > li.nav-item{
    font-size: 1.4rem;
}



li.navbar-nav.tqa-menu > li.tqa-color{
    display: none;
}

.navbar-nav.tqa-menu *> a.nav-link{
    height:2.5rem;
     padding: 0.2rem 1rem 0.2rem 1rem !important;
}

.navbar-nav.tqa-menu *> a.nav-link:hover{
    background-color:#f1a83e !important;
    color:#104d88 !important;
    border-radius: 0.5rem;
    padding: 0.2rem 1rem 0.2rem 1rem !important;
}

li.nav-item.tqa-color.dropdown > div.dropdown-menu{
    background-color: #1681F5 !important;
}

li.nav-item.tqa-color.dropdown > div.dropdown-menu > a.dropdown-item:hover{
    background-color: #0366D0 !important;
    color:#f1a83e !important;
    font-weight: bold;
}

body.tqa-body-page{
    background-color: #DCF4EF;
} 

/*Menu left corner*/
div.tqh-navbar-right-corner{
    height: 6.8rem;
    width: 13rem;
    min-width: 13rem;
    background-color: silver;
    border-radius: 1rem;
    margin-left: 0.5rem;
}

div.tqh-navbar-right-corner > div.tqh-menu-user-name{
    text-align:center;
    font-size: 1.4rem;
    font-weight: bold;
    color: #104d88;
}

div.tqh-navbar-right-corner > div.tqh-menu-user-rol{
    text-align:center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #1681F5;
}

div.tqh-menu-user-icons{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
}

    div.tqh-menu-user-icons > div.tqh-menu-user-profile{
        margin-left: 1rem;
        color: #104d88;
        
    }

    div.tqh-menu-user-icons > div.tqh-menu-user-profile > a{
        color: #104d88;
    }

    div.tqh-menu-user-icons > div.tqh-menu-user-close-session{
        margin-right: 1rem;
    }

    div.tqh-menu-user-icons > div.tqh-menu-user-close-session > a{
        color: red;
    }
/*#1681F5*/

.tqa-footer{
    background-color: #104d88;
    width: 100%;
    color: #f1a83e;
    text-align: center;

}

.tqa-main-gradient{
    background-image: linear-gradient(to bottom right, #104d88, #f1a83e);
}

/*TQA Index starts*/
html {
    height: 100%; /* <------------ */
}

.tqa-index-body{
    height: 100%;
    background-image: linear-gradient(to bottom right, #104d88, #f1a83e, #104d88);
    /*
    vertical-align: middle;
    text-align: center;*/
    display: flex; /* establish flex container */
    justify-content: center; /* center flex items horizontally, in this case */
    align-items: center; /* center flex items vertically, in this case */
}
/*TQA Index ends*/

.tqa-icon-menu-color{
    color: #f1a83e;
}

/*general starts*/

.validation-message{
    margin-top: 0.5rem;
    background-color: transparent;    
    border-radius: 1rem;
    position: relative;
    text-align: center;
}

.validation-message.invalid{
    background-color: red;    
}

.validation-message > label{
    color: whitesmoke;    
}

.validation-message > label{
    background-color: transparent;
    font-weight: bold;
}

.validation-message.invalid{
    color: red;
}

#tqhMessage.modal-header{
    background-color: #104d88 !important;
}

.tqh-invalid-field{
    border: 0.2rem solid rgb(244, 36, 36) !important;
}

.b-hidden{
    display: none !important;
}

a.a-button
{
    display: flex;
    justify-content: center;
    border: 0.1rem solid #f1a83e;
    border-radius: 0.5rem;
    padding: 0.3rem 0.3rem 0.3rem 0.3rem;
    color: #104d88;    
    
}

a.a-button.disabled{
    color: lightgray;
}

a.a-button:hover{
    border: 0.1rem solid #104d88;
    color: #f1a83e;    
    text-decoration: none !important;
}

a.a-button.disabled:hover{
    pointer-events: none;
    text-decoration: none !important;
    text-decoration: none !important;
}

a.a-button-righ-margin-2{
    margin-right: 2rem;
}
/*tooltip tqa-custom-tooltip bs-tooltip-auto fade show*/
div.tooltip.tqa-custom-tooltip {
    --bs-tooltip-bg: #104d88;
    --bs-tooltip-color: #f1a83e;
    border-radius: var(--bs-tooltip-border-radius);
    border: 0.1rem solid #f1a83e;

    /*
    --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
--#{$prefix}tooltip-max-width: #{$tooltip-max-width};
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$prefix}tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
--#{$prefix}tooltip-color: #{$tooltip-color};
--#{$prefix}tooltip-bg: #{$tooltip-bg};
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$prefix}tooltip-opacity: #{$tooltip-opacity};
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
    */
  }

  div.offcanvas.tqa-offcanvas-profile {
    top: 7.8rem !important;
    width: 30rem;
    height: 30rem;
    border: 0.3rem solid #f1a83e;
    background-color: #104d88;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-header {
    background-color: #1681F5;
    color: #f1a83e;
    font-weight: bold;
    border-top-left-radius: 1rem;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-header > div.tqa-offcanvas-title {
    color: #f1a83e;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body > div.form-floating {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body > div.form-floating > label,
  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body *> div.form-floating > label {
    color: #f1a83e;
    font-weight: bold;
    background-color: transparent;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body > div.form-floating > label::after,
  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body *> div.form-floating > label::after {
    display: none;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body > div.form-floating-2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body > div.form-floating-2 > div.form-floating {
    width: 48%;
  }

  
  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body > div.form-floating > input,
  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body *> div.form-floating > input {
    font-weight: bold;
    font-size: 1.2rem;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body > div.form-floating > input[disabled],
  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body *> div.form-floating > input[disabled] {
    background-color: #0366D0;

  }
/*general ends*/

/* TQA Login starts*/

.tqa-login-main-div{
    
    width: 20rem;
    height: 28rem;
    border-radius: 1rem;
    /*display: inline-block;*/
    background-image: linear-gradient(to bottom right, #f1a83e, #104d88);
    border: 0.2rem solid #104d88;
}

.tqa-login-main-div > div.card{
    width: 100% !important;        
    background-color: transparent;
}

.tqa-login-main-div > div.card > div.card-header{
    width: 100%;
    display:flex; 
    justify-content:center
}

.tqa-login-main-div > div.card > div.card-header > img.card-img-top{
    width: 4.5rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: start;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-icon,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-icon,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-icon{
    display:flex;
    justify-content: center;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-type,
.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-confirm,
.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-policies-state,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-username,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-code,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-password,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-username{
    width: 100%; 
    margin-top: 1rem; 
    position: relative;  
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-type > input,
.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-confirm > input,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-username > input,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-code > input,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-password > input,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-username > input{
    width: 100%;
    padding-left: 1.7rem;  
    border-radius: 0.7rem;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-type > i.fa-key,
.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-confirm > i.fa-key,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-username > i.fa-envelope,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-code > i.fa-spell-check,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-password > i.fa-key,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-username > i.fa-envelope{
    position: absolute;
    top: 0.5rem; 
    left: 0.5rem;   
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-buttons,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-buttons,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-button-login{
    margin-top: 1rem;
    width: 100%;
    display: flex;
    justify-content:center
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-forgot-link{
    margin-top: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #f1a83e;
    border-radius: 1rem;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-forgot-link > a.tqa-login-forgot-link.a-link{
    font-weight: bold;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-forgot-link > a.tqa-login-forgot-link.a-link:hover{
    color: #1681F5;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-options{
    margin-top: 1rem;
    margin-left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #104d88;
    background-color: #f1a83e;
    border-radius: 1rem;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-options > div.btn-group{
    height:1.8rem;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-options > div.btn-group > label{
    padding-top: 0rem;
    padding-bottom: 0rem;
    height: 1.7rem;
    color: #f1a83e;
    margin-bottom: 0;
}

div.tqa-set-password-policies-state{
    background-color: #104d88;
    width: 100px;
    text-align: center;
    border-radius: 1rem;
    min-height: 1.5rem;
    max-height: 2.2;
}

div.tqa-set-password-policies-state.invalid{
    background-color: red;
}

div.tqa-set-password-policies-state > label{
    font-size: 0.75rem;
    color:whitesmoke;
}

li.tqa-password-validator > span{
    display:none;
}

li.tqa-password-validator.tqa-valid > span.tqa-valid{
    display: inline;
}


li.tqa-password-validator.tqa-invalid > span.tqa-invalid{
    display: inline;
}

span.tqa-valid{
    color:green;
}

span.tqa-invalid{
    color:red;
}

div.tqa-new-user-form{
    width: 100%;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;    
}

div.tqa-new-user-form > form{
    width: 47%;
}

div.tqa-new-user-form label::after{    
    display:none;
}

div.tqa-modal-gradient-bg {
    background-image: linear-gradient(to bottom right, #717469, #867D62);
}

div.tqa-modal-gradient-bg select,
div.tqa-modal-gradient-bg input{
    background-color: rgb(184, 182, 182);
}


/* TQA login ends*/

/* TQA Users */
/*
--tqa-main-color: #104d88;
--tqa-secondary-color: #f1a83e;
--tqa-third-color: whitesmoke;

*/
div.alert{
    margin-bottom: 0 !important;
}

button:hover{
    cursor: pointer;
}

div.form-floating > span#req{
    display: none;
}

div.form-floating[required] > span#req{
    display: block;
    color: red;
    position: absolute;
    top: 0.2rem;
    right: 0.5rem;
}

div.offcanvas.offcanvas-end.tqa-offcanvas-user-data{    
    top: 7.8rem !important;
    width: 60rem;
    height: 22rem;
    border: 0.3rem solid #104d88;
    background-color: aliceblue;
    /*
    border: 0.3rem solid #f1a83e;
    background-color: #104d88;
    */
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;     
    
    div.offcanvas-header{
        background-color: lightblue;
        border-top-left-radius: 1rem;
        border-bottom: 0.3rem solid #104d88;

        h5.tqa-offcanvas-title{
            color: #104d88;
            font-weight: bold;
        }
    }

    
    

    div.form-add-new-user{
        
        div.tqh-field-invalid > input,
        div.tqh-field-invalid > select {
            border-color: red !important;
        }

        div.form-floating{
            select,
            input{
                background-color: #edf3f9;
                border: 0.1rem solid #f1a83e;
                color: black;
                font-size: 1rem;
            }
            
            select[disabled],
            input[disabled]{
                background-color: #d1d6db;
                border: 1px solid #f1a83a;
            }
            
            .btn-close{
                color: whitesmoke;  
            }

            label{
              color: #104d88;
              font-size: 0.8rem;
            }
            
            label:after{
                background-color: transparent;            
            }
        }
        
        div.user-identifiers{
            display: flex;
            flex-direction: row;                    
            margin-bottom: 0.5rem;
            column-gap: 1%;

            div.field-user-names{
                width: 18%;                
            }

            div.field-user-lastNames{
                width: 18%;
            }
            
            div.field-user-dob{
                width: 16%;
            }
            
            div.field-user-email{
                width: 30%;
            }
            
            div.field-user-username{
                width: 18%;
            }
        }

        div.user-job-desc{
            display: flex;
            flex-direction: row;                    
            margin-bottom: 0.5rem;
            column-gap: 1%;
            div.field-user-rol{
                width: 25%;
            }
            
            div.field-user-area{
                width: 25%;
            }            

            div.field-user-position{
                width: 25%;
            }
            
            div.field-user-depto{
                width: 25%;
            }
        }

        div.user-boss-and-actions{
            display: flex;
            flex-direction: row;                    
            margin-bottom: 0.5rem;
            column-gap: 1%;
            div.field-user-location{
                width: 25%;
            }

            div.field-user-job{
                width: 50%;                
            }
            
            div.field-user-last-access{
                width: 24.5%;
                margin-right: 1%;
            }
            
            div.field-user-status{
                width: 24.5%;
            }
        }

        div.user-actions{
            display: flex;
            flex-direction: row;                    
            margin-bottom: 0.5rem;
            justify-content: end;
            column-gap: 0.3rem;
            
            button{
                width: fit-content;
                height: fit-content;
                border: 0.1rem solid black;
                border-radius: 0.5rem;
            }
            
            button.btn-user-block{
                border-color: red;
                
                color: red;
            }
            
            button.btn-user-edit{
                border-color: #104d88;
                color: #104d88;
            }

            button.btn-user-cancel{
                border-color: #f1a83a;
                color: #f1a83a;
            }

            button[disabled]{
                color: darkgray !important;
            }
        }
    }    
}

.tqa-tooltip{
    --bs-tooltip-bg: var(--bd-violet-bg);
    --bs-tooltip-color: var(--bs-white);
}