/* DATATABLES CSS */

.dataTables_filter, #searchPanel{
    padding: 6px 0em !important;
}

table.dataTable>tbody>tr {
    cursor: pointer;
}

table.dataTable tbody td {
    vertical-align:middle;
  }

.form-control-sm {  
    padding: .25rem .85rem;
 
}


.no-click { pointer-events: none; }

.spinner-border{
    width: 1em;
    height: 1em;
}

button:disabled,
.btn:disabled {
    outline: none !important;  /* Remove outline */
    box-shadow: none !important; /* Remove focus shadow */
    border: none !important;
    opacity: 0.65; /* Keep Bootstrap's default disabled styling */
}
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td, .daterangepicker .ranges li,.daterangepicker .drp-selected, .daterangepicker .drp-buttons .btn {
    font-size: inherit !important;
}

/* dataTables Search input box */
 
.dataTables_filter {
    position: relative;
}

 

div.dt-container div.dt-search input {
    width: 480px; /* Set your desired width */
   
  /*  height: 40px; background: #fcfcfc;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;*/
    text-indent: 10px;
}

.dataTables_filter .fa-search {
    position: absolute;
    top: 10px;
    left: auto;
    right: 10px;
}


table.dataTable tbody th, table.dataTable tbody td {
    padding: 6px 10px; /* e.g. change 8x to 4px here */
    }

/* DATATABLES CSS */

  body {
            font-family: 'Nunito', sans-serif;
        }

 

        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        .b-example-divider {
            height: 3rem;
            background-color: rgba(0, 0, 0, .1);
            border: solid rgba(0, 0, 0, .15);
            border-width: 1px 0;
            box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
        }

        @media (min-width: 992px) {
            .rounded-lg-3 {
                border-radius: .3rem;
            }
        }
        #facebook {
            width: 450px;
        }

        .menuactive {
                color: red !important;
        }

        .btn-group-xs > .btn, .btn-xs {
            padding: 1px 4px;
            font-size: 10px;
            line-height: 1.5;
            border-radius: 3px;
            }


       

/* PAGE LAYOUT */

html, body {
    font-size:1rem;
 }
 h1 {
   font-size: 1.2rem;
 }
 h2 {
   font-size: 1.1rem;
 }
 h6, .fs-6 {
    font-size: 0.8rem !important;
  }
  

 @media (min-width: 768px) {
    html {
      font-size: 0.8rem;
    }
    h1 {
        font-size: 1rem;
    }
    h2 {
        font-size: 0.9rem;
    }
  }

 @media (min-width: 991px) {
   html {
     font-size: 1rem;
   }
   h1 {
       font-size: 1.2rem;
   }
   h2 {
       font-size: 1.1rem;
   }
 }
 

 
 @media (min-width: 1200px) {
   html {
     font-size: 1rem;
   }
   h1 {
       font-size: 1.7rem;
   }
   h2 {
       font-size: 1.6rem;
   }
 }
 
 @media (min-width: 1400px) {
    html {
      font-size: 1.4rem;
    }
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.8rem;
    }
  }

  @media (min-width: 2400px) {
    html {
      font-size: 1.8rem;
    }
    h1 {
        font-size: 3rem;
    }
    h2 {
        font-size: 2.5rem;
    }
  }


#main-container-1 {    
    min-height:calc(100vh - 255px);
  }
.container-fluid.min-vh-100.px-4.py-2.my-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    flex-wrap: nowrap;
}



.container-fluid.min-vh-100.px-4.py-2.my-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    flex-wrap: nowrap;
}

.form-control{
    /*font-size: inherit;*/
    font-size: 1rem;
}
#formAuthor h4  {
    font-size: 1rem;
    
}
#formAuthor .btn  {
    font-size: 0.8rem;
    
}

.manager_comment{
    max-width: 100%;
    word-wrap: break-word;
    }

.dataTables_wrapper .bottom,.dataTables_wrapper  .top {
    display: flex;
    justify-content: space-between;
}


#formCustomMessages .nav-tabs .nav-link{
    color: rgb(39, 39, 39) !important;
}
#formCustomMessages .active {
    color: rgb(0, 0, 0) !important;
}

/* Custom CSS to add outline to inactive tabs */
#formCustomMessages .nav-tabs .nav-link:not(.active) {
    border: 1px solid #ccc; /* Change the color and thickness as needed */
    border-radius: 0.25rem; /* Optional: Adjust border radius */
    margin-bottom: -1px; /* Maintain consistent spacing */   
    background-color: rgb(236, 236, 236); /* Set inactive tab background color */
    color:rgba(0, 0, 0, .15);
  }

  

/* Inactive Tab Hover Styles (Optional) */
#formCustomMessages .nav-tabs   .nav-link:hover {
    background-color: #cfcfcf; /* Set hover background color */
}

/* Active Tab Styles (Optional) */
#formCustomMessages .nav-tabs   .nav-link.active {
    border-color: #ccc; /* Add a border color to active tab */
    background-color: #fff; /* Set active tab background color */
    border-bottom: 0px; 
}


/*LANGUAGE */
 
ul.language_bar_chooser {
    list-style: none;
    margin: 0 0 5px auto;
    width: 90%;
    padding: 0;
    min-height: 16px;
}
ul.language_bar_chooser li
{
	float: left;
	margin-right: 10px;
}
ul.language_bar_chooser li.active
{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);
}

.flag {
    min-width: 1.5em; 
    min-height: 0.8em; 
	width: 25px;
	height: 15px;
    
    background-size: 100%;

    border: 0 !important;
    border-style: none !important;
    outline: none !important;
	
}
 
.flag.flag-pt {background:url('/image/languages/country-pt.svg') no-repeat   top left}
.flag.flag-es {background:url('/image/languages/country-es.svg ') no-repeat top left}
.flag.flag-en {background:url('/image/languages/language-en.svg') no-repeat top left}


    #registerForm, .form-signin { 
        max-width: 60%;
            background-color: #ffffff;
            margin: 40px auto;
            padding: 40px;
            box-shadow: 0px 6px 18px rgb(0 0 0 / 9%);
            border-radius: 12px;
        }
        #registerForm .form-header, .form-signin .form-header {
            gap: 5px;
            text-align: center;
            font-size: 1.2em;
        }
        #registerForm .form-header .stepIndicator {
            position: relative;
            flex: 1;
            padding-bottom: 30px;
        }
        #registerForm .form-header .stepIndicator.active {
            font-weight: 800;
        }
        #registerForm .form-header .stepIndicator.finish {
            font-weight: 600;
            color: #009688;
        }
        #registerForm .form-header .stepIndicator::before {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            z-index: 9;
            width: 20px;
            height: 20px;
            background-color: #d5efed;
            border-radius: 50%;
            border: 3px solid #ecf5f4;
        }
        #registerForm .form-header .stepIndicator.active::before {
            background-color: #a7ede8;
            border: 3px solid #d5f9f6;
        }
        #registerForm .form-header .stepIndicator.finish::before {
            background-color: #009688;
            border: 3px solid #b7e1dd;
        }
        #registerForm .form-header .stepIndicator::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 8px;
            width: 100%;
            height: 3px;
            background-color: #f3f3f3;
        }
        #registerForm .form-header .stepIndicator.active::after {
            background-color: #a7ede8;
        }
        #registerForm .form-header .stepIndicator.finish::after {
            background-color: #009688;
        }
        #registerForm .form-header .stepIndicator:last-child:after {
            display: none;
        }
        #registerForm input, #registerForm textarea {
            padding: 15px 20px;
            /* width: 100%; */
            font-size: 1rem;
            border: 1px solid #e3e3e3;
            border-radius: 5px;
        }
        #registerForm input:focus {
            border: 1px solid #009688;
            outline: 0;
        }
        #registerForm input.invalid , #registerForm select.invalid{
            border: 1px solid #ffaba5;
            color:crimson;
        }

        #registerForm input.invalid::placeholder {
            color: red !important;
            opacity: 1;
        }

        #registerForm .step {
        display: none;
        }
        #registerForm .form-footer{
            overflow:auto;
            gap: 20px;
        }
        #registerForm .form-footer button{
            background-color: #009688;
            border: 1px solid #009688 !important;
            color: #ffffff;
            border: none;
            padding: 13px 30px;
            font-size: 1rem;
            cursor: pointer;
            border-radius: 5px;
            flex: 1;
            margin-top: 5px;
        }
        #registerForm .form-footer button:hover {
        opacity: 0.8;
        }
        
        #registerForm .form-footer #prevBtn {
            background-color: #fff;
            color: #009688;
        }

        #registerForm .nav-tabs .nav-link {

            border-width: 5px;

        }
        #registerForm .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            background-color: aliceblue;
        }

        
        #registerForm  .form-control:read-only{
            background-color: #e9ecef;
            opacity: 1;
            transition: none;
            appearance: none;
            pointer-events: none;
        }
            
        
    @media only screen and (max-width: 768px)  {
    .custom-select{
        width: 100%;
    }
    #registerForm, .form-signin {
        max-width: 100%;
    }
    }

    @media only screen and (min-width: 769px)  {
    .input-group {
        width:90%;
    }
    .input-group-text {
        min-width:30%;
    }

    #registerForm, .form-signin {
        max-width: 60%;
    }
    }


    @media only screen and (max-width: 1440px)  {
    .input-group {
        width:90%;
    }
    .input-group-text {
        min-width:30%;
    }

    #registerForm, .form-signin {
        max-width: 80%;
    }
    }