@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

.container{
    margin:auto;
    width:70%;
    padding: 50px 20px ;
    position: relative;
    align-self: center;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 20px;
    box-shadow: 3px 3px 5px 2px #aeaeae, inset 3px 3px 5px 2px #ffffff1f;
}

* {
    user-select: none;
}


input, textarea{
    user-select: text;
}


textarea{
    resize: vertical;
}

.form-header{
    color:#0c455f;
    font-family: 'Rubik';
}

.form-sub-header{
    color:#0c455f;
    font-family: 'Rubik';
}

.flexv{
    display: flex;
    flex-direction: column;
    flex:1;
}

.flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
}

.proforma{
    margin-top: 50px;
    margin-bottom: 50px;
    gap:20px;
    max-width: 100%;
    width: 100%;
}

p[l]{
    margin: 0;
    color:#0c455f;
    font-family: 'Rubik';
}

.flexh{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
}

.flex-nogap{
    gap:1px;
}

.flex-end{
    align-items: flex-end;
}

.flex-right{
    justify-content: flex-end;
}


.flex-30{
    flex: 0 0 30%;
    max-width: 30%;
}

.flex-40{
    flex: 0 0 40%;
    max-width: 40%;
}

.flex-30 > label{
    width: 100% !important;
    max-width: 100% !important;
}

input{
    border-radius: 5px;
    border: none;
    height: 30px;
    background: rgb(216 216 216);
}

select{
    border: none;
    height: 30px;
    background: rgb(216 216 216);
}

input:focus, select:focus, textarea:focus{
    border: 1px solid grey;
    outline: none;
}

textarea{
    border-radius: 5px;
    border: none;
    background: rgb(216 216 216);
}

body{
    background: linear-gradient(90deg, #d7e8e3, #e3e2d4);
    background-repeat: no-repeat;
    overflow: auto;
    height: auto;
    min-height: 100vh;
}

#next-btn, #prev-btn{
    font-size: 2rem;
    font-family: 'Rubik';
    color: #0c455f;
    font-weight: 600;;
    padding: 5px;
    border-radius: 2px;
    width: max-content;

}

#next-btn:hover, #prev-btn:hover{
    cursor: pointer;
    color:#e0e3d7;
    background: #0c455f;
}


.fileinput {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.fileinput + label {
    font-size: 1.25em;
    height: 30px;
    font-weight: 500;
    font-family: 'Rubik';
    color: white;
    background-color: #0c455f;
    display: inline-block;
    margin: 0;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 10px;

    /* width: 50%; */
    /* max-width: 50%; */
    /* min-width: 150px; */
    flex:1;

}

.fileinput:focus + label,
.fileinput + label:hover {
    background-color: white;
    color: #0c455f;
}


#fileUploadauth ~ label{
    max-width: 100%;
    width: 100%;
}

.w33{
    width: 33%;
}

.hr{
    flex:1;
    height: 1px;
    border-bottom: 1px solid #0c455f;
}

.form-section{
    margin: 0;
    color:#0c455f;
    font-family: 'Rubik';
    font-weight: 200;
    font-size: 1.25em;
}

.flex-center{
    align-items: center;
}

.form-section-header{
    margin-top: 30px;
}

.nowrap{
    flex-wrap: nowrap;
}

.vertical-center{  
    align-items: center;
    justify-content: space-between;
}

.w400{
    font-weight: 400;
}

p[d]{
    flex:1;
}

.decl-text{
    color:#0c455f;
    font-family: 'Charm';
    font-size: 2rem;
}

.agree-text{
    opacity: 0.2;
    transition: 0.5s ease;
}

#disputed-amount,
#sanctioned-load,
#contract-demand{
    text-align: right;
}

#contract-demand-div{
    display: none;
}

.agree-label{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2em;
}

.label__checkbox {
    display: none;
}
  
.label__check {
    display: inline-block;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    background: white;
    vertical-align: middle;
    margin-right: 20px;
    width: 2em;
    height: 2em;
    min-width: 2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border .3s ease;

    i.icon {
        opacity: 0.2;
        font-size: 2rem;
        color: transparent;
        transition: opacity .3s .1s ease;
        -webkit-text-stroke: 1px rgba(0,0,0,.5);
    }

    &:hover {
        border: 1px solid rgba(0,0,0,0.2);
    }
}

.label__checkbox:checked + .label__check {
    animation: check .5s cubic-bezier(0.895, 0.030, 0.685, 0.220) forwards;

    .icon {
        opacity: 1;
        transform: scale(0);
        color: white;
        -webkit-text-stroke: 0;
        animation: icon .3s cubic-bezier(1.000, 0.008, 0.565, 1.650) .1s 1 forwards;
    }
}

.label__checkbox:checked ~ .decl-text {
    opacity: 1;
}

.content-wrapper{
    display: contents;
}


button[type=submit]{
    color: white;
    border: none;
    font-family: 'Rubik';
    font-weight: 500;
    font-size: 2rem;
    text-transform: uppercase;
    width: max-content;
    padding: 10px 50px;
    overflow: hidden;
    position: relative;
    background: gray;
	background-size: 400% 400%;

    cursor: pointer;
    /* transition: transform 0.3s ease; */

}

button[type=submit]:hover{
    background: linear-gradient(-45deg, #eb6122, #043f52);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    /* transform: scale(1.02); */
    /* transform-origin: center center; */
}


.dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    position: absolute;
    background-color: white;
    width: 100%;
    z-index: 999;
    top:50px;
}

.suggestion-item {
    padding: 8px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #0c455f;
    
}

.suggestion-item:hover div{
    color:white;
}

.suggestion-item:hover div:last-child{
    color:wheat !important;
}

.suggestion-info {
    padding: 8px;
    color: #888;
    font-style: italic;
}

.suggestion-error {
    padding: 8px;
    color: red;
    font-style: italic;
}

#info-note{
    display: none;
    color: #0c455f;
    font-size: 1.6rem;
    font-family: Rubik;
    align-items: center;
    gap:2rem;
}

#info-note i{
    font-size: 2.4rem;
}

@keyframes gradient {
    0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
 
@keyframes icon {
    from {
      opacity: 0;
      transform: scale(0.3);
    }
    to {
      opacity: 1;
      transform: scale(1)
    }
}
  
@keyframes check {
    0% {
      width: 1.5em;
      height: 1.5em;
      min-width: 1.5em;
      border-width: 5px;
    }
    10% {
      width: 1.5em;
      height: 1.5em;
      min-width: 1.5em;
      opacity: 0.1;
      background: rgba(0,0,0,0.2);
      border-width: 15px;
    }
    12% {
      width: 1.5em;
      height: 1.5em;
      min-width: 1.5em;
      opacity: 0.4;
      background: rgba(0,0,0,0.1);
      border-width: 0;
    }
    50% {
      width: 2em;
      height: 2em;
      min-width: 2em;
      background: #00d478;
      border: 0;
      opacity: 0.6;
    }
    100% {
      width: 2em;
      height: 2em;
      min-width: 2em;
      background: #00d478;
      border: 0;
      opacity: 1;
    }
}



.radio-container {
    display: flex;
    position: relative;
    width: 80px;
    height: 30px;
    min-width: 80px;
    border: 1px solid rgb(67, 67, 67);
}

/* Hide default radio buttons */
input[type="radio"] {
    display: none;
}

/* Label styling */
.radio-label {
    flex: 1;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    color: rgb(169, 169, 169);
    transition: color 0.3s;
    font-family: 'Rubik';
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0;
}

/* Background indicator */
.ind_ {
    position: absolute;
    top:-1px;
    width: 40px;
    height: 30px;
    background: #323232;
    left: 39px;
    transition: transform 0.3s;
    z-index: 0;
  
}

.ind {
    position: absolute;
    top:-1px;
    width: 40px;
    height: 30px;
    background: #323232;
    transition: transform 0.3s;
    z-index: 0;
    left: -1px;
  
}

/* Move indicator when YES is selected */
.opt2:checked ~ .ind {
    transform: translateX(40px);
}

.opt1_:checked ~ .ind_ {
    transform: translateX(-40px);
}

.radio-option:checked + .radio-label {
    color:white;
}

.disabled-label {
    pointer-events: none;
    opacity: 0.5;
}


.applicant-type-fields, .complaint-type-fields{
    display: none;
}


.remove-btn, .view-btn{
    font-size: 1.25em;
    height: 30px;
    font-weight: 500;
    font-family: 'Rubik';
    color: white;
    background-color: #0c455f;
    width: 30px;

    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    /* border: 1px solid transparent; */
    /* margin-left:1px; */

    display: none;
}

.remove-btn:hover , .view-btn:hover{
    background-color: white;
    color: #0c455f;
}



/*
error inputs
*/

.error input, .error textarea{
    box-shadow: 0 0 0px 1px red;
}

.error select , .error .fileinput + label{
    box-shadow: 0 0 1px 1px red;
    background: #ff5d5d4d;
    color:red;
}

.error .fileinput + label:hover {
    background-color: white;
    color: #0c455f;
}


.error .label__check{
    border: 1px solid red;
}

.error .check-icon{
    -webkit-text-stroke: 1px rgb(255 0 0 / 50%) !important;
    opacity: 1 !important;
}

.error .agree-text{
    -webkit-text-stroke: 1px rgb(255 0 0 / 50%);
}

.error-msg{
    font-size: 0.9rem;
    color: red;
    margin-left: 10px;
    visibility: hidden;
    font-family: sans-serif;
    margin-right: 10px;
}

.error .error-msg{
    visibility: visible;
}