/* ===========================================================
   BASIGARO
   Profile Completion
   =========================================================== */

.profile-card{

    background:#ffffff;

    border-radius:24px;

    padding:50px;

    box-shadow:0 20px 60px rgba(18,53,111,.10);

    overflow:hidden;

}

.profile-header{

    text-align:center;

    margin-bottom:40px;

}

.profile-header h2{

    color:#12356F;

    font-size:34px;

    font-weight:700;

    margin-bottom:12px;

}

.profile-header p{

    color:#6c757d;

    font-size:15px;

    line-height:1.8;

    margin:0;

}

.profile-photo-wrapper{

    text-align:center;

}

.profile-photo{

    width:150px;

    height:150px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

    border:6px solid rgba(25,184,165,.15);

    background:#F8F9FA;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.profile-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.btn-upload{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:20px;

    padding:10px 22px;

    border-radius:30px;

    background:#19B8A5;

    color:#ffffff;

    cursor:pointer;

    transition:.3s;

    font-size:14px;

    font-weight:600;

}

.btn-upload:hover{

    background:#129886;

    color:#ffffff;

    text-decoration:none;

}

.form-group{

    margin-bottom:22px;

}

.form-group label{

    font-size:14px;

    font-weight:600;

    color:#12356F;

    margin-bottom:8px;

}

.form-control{

    height:52px;

    border-radius:14px;

    border:1px solid #dce3ea;

    box-shadow:none;

    transition:.25s;

}

textarea.form-control{

    height:auto;

    min-height:120px;

    resize:vertical;

    padding-top:14px;

}

.form-control:focus{

    border-color:#19B8A5;

    box-shadow:0 0 0 .2rem rgba(25,184,165,.12);

}

.btn-auth{

    min-width:240px;

    height:52px;

    border-radius:14px;

    background:#12356F;

    color:#ffffff;

    border:none;

    font-weight:600;

    transition:.3s;

}

.btn-auth:hover{

    background:#0D2D5F;

    color:#ffffff;

}

.btn-auth:focus{

    box-shadow:none;

}

/* ===========================================================
   Select2
   =========================================================== */

.select2-container{

    width:100% !important;

}

.select2-container--bootstrap4 .select2-selection{

    height:52px;

    border-radius:14px;

    border:1px solid #dce3ea;

    display:flex;

    align-items:center;

    transition:.25s;

}

.select2-container--bootstrap4.select2-container--focus
.select2-selection{

    border-color:#19B8A5;

    box-shadow:0 0 0 .2rem rgba(25,184,165,.12);

}

.select2-container--bootstrap4
.select2-selection__rendered{

    line-height:50px;

    color:#495057;

    padding-left:14px;

}

.select2-container--bootstrap4
.select2-selection__arrow{

    height:50px;

    right:10px;

}

.select2-dropdown{

    border-radius:12px;

    border:1px solid #dce3ea;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.select2-search__field{

    border-radius:8px !important;

}


/* ===========================================================
   Flatpickr
   =========================================================== */

.flatpickr-calendar{

    border:none;

    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.flatpickr-day.selected{

    background:#19B8A5;

    border-color:#19B8A5;

}

.flatpickr-day.today{

    border-color:#12356F;

}


/* ===========================================================
   Form Animation
   =========================================================== */

.form-control,
.select2-selection{

    transition:all .25s ease;

}

.form-control:hover{

    border-color:#19B8A5;

}

.select2-selection:hover{

    border-color:#19B8A5 !important;

}


/* ===========================================================
   Button Animation
   =========================================================== */

.btn-auth,
.btn-upload{

    transition:all .25s ease;

}

.btn-auth:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(18,53,111,.25);

}

.btn-upload:hover{

    transform:translateY(-2px);

}


/* ===========================================================
   Responsive
   =========================================================== */

@media (max-width:1200px){

    .profile-card{

        padding:40px;

    }

}

@media (max-width:992px){

    .profile-card{

        padding:35px;

    }

    .profile-header h2{

        font-size:30px;

    }

}

@media (max-width:768px){

    .profile-card{

        padding:28px;

        border-radius:20px;

    }

    .profile-photo{

        width:130px;

        height:130px;

    }

    .profile-header{

        margin-bottom:30px;

    }

    .profile-header h2{

        font-size:28px;

    }

    .btn-auth{

        width:100%;

    }

}

@media (max-width:576px){

    .profile-card{

        padding:22px;

        border-radius:18px;

    }

    .profile-header h2{

        font-size:24px;

    }

    .profile-header p{

        font-size:14px;

    }

    .profile-photo{

        width:110px;

        height:110px;

    }

    .btn-upload{

        width:100%;

    }

    .form-group{

        margin-bottom:18px;

    }

}