@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
.side-tab a.active {
  @apply bg-indigo-800 text-orange-500;
  position: relative;
}
.side-tab a.active i {
}
.side-tab a.active::after {
  @apply bg-orange-500;
  content: "";
  position: absolute;
  height: 100%;
  width: 4px;
  right: 0px;
  top: 0px;
  /* border-radius: 0px 3px 3px 0px; */
}

/* Button */
.go-primary-button {
  @apply px-6 py-2 cursor-pointer text-sm font-semibold text-white border rounded-md shadow-sm hover:bg-orange-400 hover:text-white;
  background-color: #F48020;
  border-color: #F48020
}
.go-primary-button.full-width {
  @apply w-full py-2;
  display: block;
  text-align: center
}
.go-basic-button {
  @apply px-4 py-2.5 cursor-pointer text-sm font-medium text-slate-600 bg-white rounded-md border border-slate-100 hover:bg-slate-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-slate-200
}
.go-basic-button.full-width {
  @apply w-full;
  display: block;
  text-align: center;
}

/* Breadcrumb */
.breadcrumbs {
  @apply text-sm;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.breadcrumbs span.separator {
  @apply text-slate-400;
  font-size: 20px;
}
.breadcrumbs span {
  @apply text-slate-500;
}
.breadcrumbs a,
.breadcrumbs span {
  padding: 0px 6px;
}
.breadcrumbs a {
  @apply text-slate-700;
}
.breadcrumbs .first {
  padding-left: 0px;
}
.breadcrumbs a:hover {
  @apply text-orange-600;
  /* text-decoration: underline; */
}
.go-line-card {
  @apply rounded-lg border border-slate-200 
}
.go-card {
  @apply bg-white rounded-lg border border-slate-200  
}
.go-card-content {
  @apply px-5 py-3
}
.go-basic-button {
  @apply px-4 py-2.5 cursor-pointer text-sm font-medium text-slate-600 bg-white rounded-md border border-slate-100 hover:bg-slate-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-slate-200
}
.go-basic-button.full-width {
  @apply w-full;
  display: block;
  text-align: center;
}
.with-circle-effect::before {
  @apply bg-orange-600;
  content: "";
  position: absolute;
  z-index: 1;
  width: 240px;
  height: 210px;
  top: -125px;
  right: -130px;
  border-radius: 50%;
  opacity: 1;
  transform: rotate(40deg);
}
.with-circle-effect::after {
  @apply bg-orange-800;
  content: "";
  position: absolute;
  width: 210px;
  height: 254px;
  z-index: 1;
  top: -25px;
  right: -160px;
  border-radius: 50%;
  opacity: 0.2;
  transform: rotate(40deg);
}
.go-outline-disable-button {
  @apply h-min px-6 py-1.5 text-slate-300 ring-slate-300 ring-1 font-medium rounded-lg text-sm text-center inline-flex items-center gap-2 cursor-not-allowed	
}
.go-outline-button {
  @apply px-6 py-1.5 cursor-pointer font-semibold text-sm bg-white text-slate-700 rounded-md shadow-sm outline outline-2 outline-offset-1 outline-orange-400
}
.go-outline-button.full-width {
  @apply w-full;
  display: block;
  text-align: center;
}
.go-analytics-card {
  @apply rounded-lg relative overflow-hidden;
  background: rgb(10, 25, 41);
}
.go-analytics-card::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  background: linear-gradient(140.9deg, rgb(144, 202, 249) -14.02%, rgba(144, 202, 249, 0) 77.58%);
  border-radius: 50%;
  top: -160px;
  right: -130px;
}
.go-analytics-card::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  background: linear-gradient(210.04deg, rgb(144, 202, 249) -50.94%, rgba(144, 202, 249, 0) 83.49%);
  border-radius: 50%;
  top: -30px;
  right: -180px;
}
.available-user-status-bar::after {
  @apply bg-green-500;
  content: "";
  position: absolute;
  height: 100%;
  width: 4px;
  border-radius: 0px 4px 4px 0px;
}
.unavailable-user-status-bar::after {
  @apply bg-slate-300;
  content: "";
  position: absolute;
  height: 100%;
  width: 4px;
  border-radius: 0px 4px 4px 0px;
}
.project-list-action, .user-list-action { 
  zoom: 1;
  filter: alpha(opacity=0);
  opacity: 0;
  transition-duration: .3s;
}
.project-list-row:hover .project-list-action, .user-list-row:hover .user-list-action { 
  zoom: 1;
  filter: alpha(opacity=100);
  opacity: 1; 
}
.go-details-link {
  @apply text-blue-500 bg-slate-50 font-medium rounded-lg text-sm py-1 px-2 text-center inline-flex items-center
}
/*Pagy nav css*/
.pagy-nav,
.pagy-nav-js {
  @apply flex space-x-1;
}
.pagy-nav .page a,
.pagy-nav .page.active,
.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page a,
.pagy-nav-js .page.active,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply block rounded-lg ml-1 px-2.5 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
  font-weight: normal;
  &:hover{
    @apply bg-gray-300;
  }
  &:active{
    @apply bg-gray-400 text-white;
  }
}
.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply text-gray-400 cursor-default;
  &:hover {
    @apply text-gray-400 bg-gray-200;
  }
  &:active {
    @apply text-gray-400 bg-gray-200;
  }
}
.pagy-nav, .pagy-nav .page.active, .pagy-nav .page.next.disabled, .pagy-nav .page.prev.disabled, .pagy-nav .page a {
  box-shadow: none;
}
.pagy-nav .page.active,
.pagy-nav-js .page.active {
  @apply text-white cursor-default bg-blue-600;
  &:hover {
    @apply text-white bg-gray-400;
  }
  &:active {
    @apply bg-gray-400 text-white;
  }
}
.pagy-combo-nav-js {
  @apply flex max-w-max rounded-full px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
}
.pagy-combo-nav-js .pagy-combo-input {
  @apply bg-white px-2 rounded-sm
}
.pagy-combo-nav-js .page.prev,
.pagy-combo-nav-js .page.next {
  &:hover {
    @apply text-gray-800;
  }
  &:active {
    @apply text-gray-800;
  }
}
.pagy-combo-nav-js .page.prev.disabled,
.pagy-combo-nav-js .page.next.disabled {
  @apply text-gray-400 cursor-default;
}
.pagy-nav .page.active, .pagy-nav .page a {
  border-radius: 50%;
  font-weight: normal;
}
.pagy-nav .page.next a, .pagy-nav .page.prev a {
  border-radius: 5px;
}
.go-filter-button {
  @apply text-blue-600 border border-blue-700 hover:bg-blue-600 hover:text-white font-normal rounded-md text-sm px-5 text-center inline-flex items-center transition ease-in py-1.5
}
/* Card */
.go-card {
  @apply bg-white rounded-lg border border-slate-200 
}

/* table */

.go-table {
  @apply table-auto text-sm w-full;
}
.go-table thead tr {
  /* @apply bg-slate-100 */
}
.go-table thead th {
  @apply border-b font-medium py-2 px-3 text-slate-500 text-left
}
.go-table tbody tr td {
  @apply border-b border-slate-100 p-3 text-slate-500
}
/* case state */
.go-label.go-project-open {
  @apply bg-slate-100 text-slate-600;
}
.go-label.go-project-allocated {
  @apply bg-blue-100 text-blue-600;
}
.go-label.go-project-in_progress {
  @apply bg-green-100 text-green-600;
}
.go-label.go-project-field_verified {
  @apply bg-amber-100 text-amber-600;
}
.go-label.go-project-data_approved {
  @apply bg-red-100 text-red-600;
}
.go-label.go-project-report_generated {
  @apply bg-indigo-100 text-indigo-600;
}
.go-label.go-project-report_verified {
  @apply bg-violet-100 text-violet-600;
}
.go-label.go-project-report_submitted {
  @apply bg-violet-100 text-violet-600;
}
.go-label.go-project-completed {
  @apply bg-violet-100 text-violet-600;
}
.go-label.go-project-closed {
  @apply bg-violet-100 text-violet-600;
}
.go-label.go-project-rejected {
  @apply bg-violet-100 text-violet-600;
}
.go-label.go-project-cancelled {
  @apply bg-violet-100 text-violet-600;
}
/* Navbar */
.nav-bg{
  background-color: #2D286F;
}
/* will pagination */
.will_pag {
  background: white;
  cursor: default;
}
.will_pag a, .will_pag span, .will_pag em {
  padding: 0.2em 0.5em;
  display: block;
  float: left;
  margin-right: 4px; 
  border-radius: 4px;
}
.will_pag .disabled {
  color: #999999;
  border: 1px solid #dddddd; 
}
.will_pag .current {
  font-style: normal;
  font-weight: bold;
  background: s#FEF2E9;
  color: #F48020;
  border: 1px solid #F48020; 
}
.will_pag a {
  text-decoration: none;
  color: #000;
  border: 1px solid #7E7E8D; 
}
.will_pag a:hover, .will_pag a:focus {
  color: #F48020;
  border: 1px solid #F48020; 
}
.will_pag .page_info {
  padding: 0.4em 0.6em;
  width: 22em;
  margin-bottom: 0.3em;
  text-align: center; 
}
.will_pag .page_info b {
  color: #000033;
  background: #6aa6ed;
  padding: 0.1em 0.25em; 
}
.will_pag:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; 
}
* html .will_pag {
  height: 1%; 
}
*:first-child + html .will_pag {
  overflow: hidden; 
}

/* state timeline */
.bg-gradient-white-to-blue-400 {
  background-image: linear-gradient(to right, rgb(255,255,255), rgb(96, 165, 250));
}
.bg-gradient-grey-200-to-white {
  background-image: linear-gradient(to right, rgb(229 231 235) 80%, rgb(255,255,255));
}
.bg-gradient-white-to-trans-bt {
  background-image: linear-gradient(to top, rgb(255 255 255) 30%, rgba(255,255,255, 0));
}
.bg-gradient-blue-400-to-white {
  background-image: linear-gradient(to right, rgb(96, 165, 250), rgb(255,255,255) );
}
.bg-gradient-red-400-to-white {
  background-image: linear-gradient(to right, rgb(251 113 133), rgb(255,255,255) );
}
/* Tab header */
.settings-tab a.active{
  color: #F48020;
  position: relative;
}
.settings-tab a.active::after {
  content: "";
  position: absolute;
  height: 4px;
  width: 60px;
  left: calc(50% - 30px);
  top: 36px;
  border-radius: 3px 3px 0px 0px;
  background-color: #F48020;
}
.bg-primary-btn{
  background-color: #F48020;
}
.bg-disabled-primary-btn{
  @apply cursor-not-allowed;
  background-color: #EBEBF3;
}
.green-chip{
  @apply text-xs px-2 rounded-full text-white;
  background-color: #31DB75;
}

/* select2 */
.select2-selection__rendered {
  line-height: 31px !important;
}
.select2-container .select2-selection--single {
  height: 35px !important;
}
.select2-selection__arrow {
  height: 34px !important;
}

.go-hover-card{
  @apply px-4 py-3 rounded-lg border border-slate-200 bg-white transform transition duration-500 hover:scale-105 hover:shadow-lg;
}

.file-field {
  position: relative;
  padding: 10px !important;
  /* border: 1px dashed #ddd; */
  border-radius: 4px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ddd, 0 0 0 10px #fff;
}
.file-field .btn {
  float: inherit;
}
.file-field input[type=file] {
  /* border: 1px solid magenta; */

  line-height: 16em;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
}
.file-field .file-path-wrapper {
  height: 16em;
  /* border-bottom: 0px solid #9e9e9e; */
  /* border: 1px solid blue; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.file-field .file-path-wrapper {
  padding-left: 0px;
}
.file-field .img {
  height: 16em;
  width: 250px;
  line-height: 16em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.file-field .img img {
  height: 17rem;
  /* border-radius: 4px; */
  /* overflow: hidden; */
}

.fr-submit-button .show-when-enabled{
  display: initial;
}
.fr-submit-button .show-when-disabled{
  display: none;
}
.fr-submit-button:disabled .show-when-enabled {
  display: none;

}
.fr-submit-button[disabled] .show-when-disabled {
  display: initial;
}

.my-content {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--read-more-line-clamp, 1);
}
body{
    background-color: rgb(229, 231, 235);
    padding: 0;
}
.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 90px;

    
    
  }
  
  .log_in_form{
   
    width: 400px;
    /*height: 350px;*/
    
    border-radius: 10px;
    background-color: white;
   
  }
.label{
 
  font-size: .75rem;
  line-height: 1rem;
  padding-top: 7%;
  font-family: Poppins,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  

}
p{
    font-family: Poppins,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}
input[type=text], select {
  width: 100%;
  padding: 7px 16px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: white;
  margin-top: 0px;

  
}
input[type=password], select {
    width: 100%;
    padding: 7px 16px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: white;
    margin-top: 0px;
    /*margin-bottom: 20px;*/
    
  }

input[type=submit] {
  width: 100%;
  padding-left: 3%;
  padding: 7px 16px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  background-color: #F48020;
  border-color: #F48020;
  font-family: Poppins,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}


input[type=submit]:hover {
  background-color:#e7791f;

}
a{
  font-size: .75rem;
  line-height: 1rem;
  font-family: Poppins,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
 

}
a:hover{
color: #e7791f;
}
.log_in{
  font-weight: bold;
  font-size: x-large;
  text-align: center;
  font-family: Poppins,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  
}

/* This Tooltip is using for strong password policy */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 100%;
}

.tooltip::before {
  content: "Minimum 1 special character, Minimum 1 uppercase alphabet, Minimum 1 lowercase alphabet, Minimum 8 characters long";
  color: #64748b;
  border-width: 1px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  font-size: 16px;
  font-family: 'Times New Roman', Times, serif;
  position: absolute;
  width: 100% !important;
  height: auto;
  padding: 10px;
  margin-left: 10px;
  border-radius: 5px;
  top: 0%;
  left: 100%; /* Move the tooltip off-screen initially */
  background-color: #ffffff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tooltip:hover::before {
  opacity: 1;
  left: 100%; /* Move the tooltip to the right side */
}

.tooltip:hover::after {
  opacity: 1;
}

.face_match_form{
  padding-left: 200px
  text-alig
  pad
  

}

  /* This Tooltip is using for strong password policy hints*/
  .tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  .tooltip::before {
    content: "Minimum 1 special character, Minimum 1 uppercase alphabet, Minimum 1 lowercase alphabet, Minimum 8 characters long";
    color: #64748b;
    border-width: 1px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    font-size: 16px;
    font-family: 'Times New Roman', Times, serif;
    position: absolute;
    width: 200%;
    height: auto;
    padding: 10px;
    margin-left: 10px;
    border-radius: 5px;
    top: -30%;
    left: 100%; /* Move the tooltip off-screen initially */
    background-color: #ffffff;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .tooltip:hover::before {
    opacity: 1;
    left: 100%; /* Move the tooltip to the right side */
  }
  
  .tooltip:hover::after {
    opacity: 1;
  }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */