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

@layer base {
    h1 {
        @apply text-2xl;
    }
    
    .titleCard{
    	position: relative;
    	font-size: 2rem;
    	font-weight: 300;
		line-height: 2;
    }
    
    .card-body{
    	padding-top: 0px !important;
    }
    
    .boxConteudoPage{
    	min-height: 600px;
    	padding-top: 10px !important;
    	padding-bottom: 0px !important;
    	border-top: 3px solid #3c8dbc !important;
    	margin: 0px 3px 3px 3px !important;
    }
    
    .titleHeader{
    	max-width: 75% !important;
    	font-size: 23px !important;
    	padding-left: 30px !important;
    }
    
    .headerPage{
    	background-color: #d1e5f7;
    	margin-top: 0px !important;
    	padding: 5px 0px !important;
    	height: fit-content !important;
   		max-width: 104% !important;
    }
    
    .box-outter-login{
    	width: 400px !important;
    	height: 430px !important;
    	max-width: 100% !important;
    	max-height: 80% !important;
    	top: 10px !important;
    	position: absolute !important;
    }
    
    label{
    	color: gray;
    }
    
    input{
    	border-color: #d2d6de;
    	border-radius: 4px !important;
    	border-width: 2px !important;
    	padding: 6px !important;
    }
    
    textarea{
    	border-color: #d2d6de;
    	border-radius: 4px !important;
    	border-width: 2px !important;
    	padding: 6px !important;
    	height: 40px !important;
    }
    
    .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all{
    	background: #007bff61 !important;
    }
    
    .ui-state-default{
    	background: #9ecdff45 !important;
    }
    
    .ui-datepicker-calendar td{
    	padding: 0.5px !important;
    }
    
    .ui-datepicker .ui-datepicker-title select {
    	font-weight: 500 !important;
    }
        
    select{
    	border-color: #d2d6de;
    	border-radius: 4px;
    	border-width: 2px !important;
    	padding: 6px !important;
    }
    
    .row{
    	padding-top: 3px;
    }
    
    .fieldError{
    	border-color: crimson !important;
    }
    
    .borderError{
    	background-color: #ffeaef !important;
    }
    
	input.invalid {
	  background-color: #ffdddd;
	}
	
	.step {
	  height: 15px;
	  width: 15px;
	  margin: 0 2px;
	  background-color: #bbbbbb;
	  border: none;
	  border-radius: 50%;
	  display: inline-block;
	  opacity: 0.5;
	}
	
	.step.active {
	  opacity: 1;
	}
	
	.step.finish {
	  background-color: #04AA6D;
	}
	
	.divButtonControlSteps{
		position: sticky;
	    bottom: 0;
	    background-color: #ffffff;
	    border-radius: 2rem 2rem 0px 0px;
	    border-top: solid 0.2rem #e9ecef !important;
	}
	
	.ui-helper-hidden-accessible {
    	display: none;
	}
	
	.iconCalendarButton{
		padding-left: 5px !important;
	}
	
	.ui-autocomplete {
	    border: 1px solid #ddd !important;
	    max-height: 200px !important;
	    max-width: 335px !important;
	    overflow-y: auto !important;
	    background-color: #fff!important;
	    border-radius: 5px !important;
	}
	
	.li-cidade-autocomplete {
	    padding: 0px !important;
	}
	
	.ui-state-active{
		background-color: #6495ed8c !important;
	}
	
	.ui-menu-item-wrapper{
		padding: 8px !important;
	}

	.ui-menu-item {
	    font-size: 14px !important;
	    cursor: pointer !important;
	}
	
	.no-results {
	    font-style: italic !important;
	    color: #999 !important;
	    width: 80% !important;
	    border-radius: 5px !important;
	}
	
    @media (max-width: 700px) {
    	.intputCheckMobile{
    		bottom: 10px !important;
    	}
    	.groupCheckMobile{
    		padding-left: 0px !important;
    	}
    	.nomeFantasiaMobileHeader{
    		display: none !important;
    	}
    	.centerContentMobile{
    		justify-content: center !important;
    	}
    	.radioTableSpan{
    		text-align: left !important;
    		font-size: 1.5rem !important;
		    font-weight: 400 !important;
		    display: contents !important;
		    padding: 20px !important;
    	}
    	.tdCustomMobile{
	        display: block !important;
	        width: 100% !important;
        	border: 0px none !important;
	        -webkit-box-sizing: border-box !important;
	        -moz-box-sizing: border-box !important;
	        box-sizing: border-box !important;
	        float: left !important;
	        clear: left !important;
    	}
    	.tHeadCustomMobile{
    		display: none !important;
    	}
    	.titleCadastro{
	    	top: 165px !important;
	    	position: absolute !important;
		    color: forestgreen !important;
		    font-size: 1.8rem !important;
		    font-weight: 400 !important;
		    line-height: 1 !important;
    	}
    	.titleBox{
    		display: flex !important;
    		flex-direction: column !important;
    		text-align: center !important;
    	}
    	.botaoSairDiv{
    		padding-right: 25px !important;
    	}
    	.divButtonSteps{
    		padding-bottom: 15px !important;
    		text-align: center !important;
    		height: 4rem !important;
    	}
    	.button-alone-steps{
    		width: 60% !important;
    		height: 100% !important;
    	}
    	.button-duo{
    		 width: 100% !important;
    		 height: 100% !important;
    	}
    	.div-title-status{
    		min-height: 95vh !important;
    	}
    	.box-status{
   			left: 10px;
    		top: 230px !important;
    		position: absolute !important;
    		display: flex !important;
    		flex-direction: column !important;
    		text-align: center !important;
    		max-width: 94% !important;
	        width: 100% !important;
    	}
    	.boxConteudoPage{
    		max-width: 98% !important;
    	}
    }
    
    @media (min-width: 700px) {
    	.headerPage{
    		height: 65px !important;
    		max-width: 104% !important;
    	}
    	.groupCheckMobile{
    		padding-left: 160px !important;
    	}
    	.radioTableSpan{
    		text-align: center !important;
    		font-size: 1.5rem !important;
		    font-weight: 400 !important;
		    padding: 20px !important;
    	}
    	.titleCadastro{
    		color: forestgreen !important;
		    font-size: 2.8rem !important;
		    font-weight: 400 !important;
		    line-height: 2 !important;
    	}
    	.titleBox{
    		top: 20% !important;
    		position: sticky !important;
    		display: flex !important;
    		flex-direction: column !important;
    		text-align: center !important;
    	}
    	.row-not-bordered{
    		border: 0px !important;
    	}
    	.botaoSairDiv{
    		padding-top: 5px !important;
    	}
    	.inputCamera{
    		display: none !important;
    	}
    	.divButtonSteps{
    		padding-bottom: 15px !important;
    		justify-content: space-evenly !important;
    		display: flex !important;
    	}
    	.div-title-status{
    		min-height: 500px !important;
    	}
    	.box-status{
    		top: 40% !important;
    		position: sticky !important;
    		display: flex !important;
    		flex-direction: column !important;
    		text-align: center !important;
    		max-width: 94% !important;
    		padding-left: 3% !important;
    	}
    }
    
    @media (min-width: 700px) and (max-width: 800px) {
    	.headerPage{
    		max-width: 104% !important;
    		height: 100px !important;
    	}
    }
    
    .modal-header .close {
	    margin: -1rem 0rem -1rem auto !important;
    }
    
	.modal-header-fixed {
       position: sticky;
       top: 0;
       z-index: 1020;
	}
	.modal-body {
	    max-height: calc(100vh - 120px);
	    overflow-y: auto;
	}
	
	.btnDisabled {
		background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3)) !important;
		color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3)) !important;
		border-color: light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3)) !important;
	}
}