:root {
    --primary: #21a6ae;
    /* --primary: #262626d6;  */
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #eee;
}

.main-wrapper {
    width: 100%;
    height: 100vh;
    background-image: url('/assets/images/bglogo.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: right;
    position: relative;

}

.card-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card-css {
    width: 900px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 1rem;
    border-radius: 1rem;
    background-color: white;
}

.form__group {
    position: relative;
    padding: 15px 0 0;
    /* margin-top: 10px; */
    width: 100%;
}

.form__field {
    width: 100%;
    border: 0;
    border-bottom: 2px solid #9b9b9b;
    outline: 0;
    font-size: 15px;
    color: black;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.2s;
}

.form__field::placeholder {
    color: transparent;
}

.form__field:placeholder-shown~.form__label {
    font-size: 15px;
    cursor: text;
    top: 20px;
}

.form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 11px;
    color: #9b9b9b;
}

.form__field:focus {
    width: 100%;
    padding-bottom: 6px;
    /* font-weight: 700; */
    border-width: 3px;
    border-image: linear-gradient(to right, #11998e, #11998e);
    border-image-slice: 1;
}

.form__field:focus~.form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 1rem;
    color: #11998e;
    font-size: 11px;
    /* font-weight: 700; */
}

/* reset input */
.form__field:required,
.form__field:invalid {
    box-shadow: none;
}

.btn_btn {
    display: flex;
    justify-content: end;
}

.btn_btn .btn {
    cursor: pointer;
    padding: .2rem 1rem;
    background: #33b1b6;
    color: white;
}

.Information {
    right: 0;
    top: 40%;
}

.Information.weight {
    right: 7% !important;
}

@media (max-width:992px) {
    .card-css {
        width: 500px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        padding: 1rem;
        border-radius: 1rem;
        background-color: white;
    }
}

.form-check .form-check-label input[type="checkbox"] + .input-helper::before{
  border: solid var(--primary) !important;
}

.form-check .form-check-label input[type="checkbox"]:checked + .input-helper::before{
  background: var(--primary) !important; 
}

.btn.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:not(:disabled):not(.disabled):active{
  background-color: var(--primary);
  border-color: var(--primary);
}

.bg-primary{
    background-color: var(--primary) !important;
}

.navbar .navbar-menu-wrapper {
    background-color: #f4f4f4 !important;
}

.border-bottom {
    border-bottom: 1px solid #c6c6c6 !important;
}


.text-primary {
    color: var(--primary) !important;
}

.w-20{
    width:  20% !important;
}

.nav-link.active{  
    opacity: 1;
    font-weight: bold;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    color: var(--primary) !important;
}

.nav-link{
    opacity:0.6;
    transition: .5s ease;
}

#dt-length-0{
    margin-right: 8px; 
}

.loaderDiv{
    height: 300px;
}

.loader {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
}

.loader::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid var(--primary);
    animation: prixClipFix 2s linear infinite ;
}

@keyframes rotate {
    100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

.HideClass{
display:none !important;
}

.select2.select2-container{
    z-index: 1;
} 

/* My Work */
/* .first .form-control{
    border: none !important;
    border-bottom: 1px solid #c6c6c6 !important;
    border-radius: 0 !important;
    outline: none !important;
} */
/*

.form-label{
    font-size: 12px !important;
}

.MyBorder{
    border: 1px solid black !important;
} */

.my-border-raduis{
    border-radius: 5px;
}

.form-control::placeholder{
    color: #1e1e1e !important;
}

.table thead th {
    font-weight: 600;
    color: var(--primary);
}

.border-2-danger{
    border-bottom: 2px solid red !important;
}