/*#####################################################################################################################*/
:root{--lg:#F3F6F9;--wg:#F2B544;--sb:#0670cc;--nb:#123B67;}

@font-face {
    font-family: 'Inter';
    src: url('../font/inter/Inter.ttc');
    font-weight: normal;
    font-style: normal;
}

/*GLOBAL STYLE */
html, body {color:var(--nb); font-family:Inter ,sans-serif; font-size: 1rem; line-height: 1.2em; height: 100%; width: 100%; margin: 0; padding: 0;}
.nav-text{font-size:1rem;}
a,a:visited {text-decoration: none; color: var(--nb); outline: none;}
a:hover,a:visited:hover {text-decoration: none; color: var(--sb); outline: none;}

.navbar-light .navbar-nav .nav-item {
    padding:10px 15px 10px 15px !important;
}

.navbar-light .navbar-nav > li > a {
    padding:10px 2px !important;
    text-decoration:none;
    color:var(--nb);
    font-size:1rem;
    transition:.25s;
    position:relative;
    border-bottom:solid 3px #fff;
}

.navbar-nav .nav-link.active{
    color:var(--nb);
    font-weight:600;
    border-bottom:solid 3px var(--sb);
}

.navbar-light .navbar-nav > li > a:hover {
    color:var(--sb);
    border-bottom:solid 3px var(--sb);
}

a.btn-primary{color: #fff; background-color:var(--sb); padding: 8px 20px; border-radius: 20px;}
a.btn-primary:hover{background-color:var(--nb); color: #fff;}

button.btn-primary{
    background-color:var(--sb); padding: 8px 20px; border-radius: 30px; padding: 15px 30px;
}

button.btn-primary:hover{
    background-color:var(--nb);
}

@media (max-width: 1200px) {
    .navbar-light .navbar-nav .nav-item {
        padding:8px 10px !important;
    }
    .navbar-light .navbar-nav > li > a {
        font-size:0.9rem;
    }
    a.btn-primary{
        padding:8px 8px;
        font-size:0.9rem;
    }
}
@media (max-width: 768px) {
    .navbar-nav{background-color:var(--lg); border-top:solid 3px var(--wg);}
    .navbar-light .navbar-nav .nav-item {
        padding:10px 15px 10px 15px !important;
    }
    .navbar-light .navbar-nav > li > a {
        font-size:1rem;
        border-bottom:solid 3px var(--lg);
    }
    a.btn-primary{
        padding: 8px 20px;
        font-size:1rem;
    }
}

.navbar{
    background-color:#fff;
}
.navbar-toggler{border-color:var(--nb);}
.navbar-toggler:hover{border-color:var(--sb);}
.navbar-toggler:focus{box-shadow: none;}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2818, 59, 103, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler-icon:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%286, 112, 204, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Standard syntax */
.form-control::placeholder {
    color: var(--nb);
    opacity: 1; /* Ensures full color visibility in Firefox */
}

/* Chrome, Safari, Edge */
.form-control::-webkit-input-placeholder {
    color: var(--nb);
    opacity: 1;
}

/* Firefox */
.form-control::-moz-placeholder {
    color: var(--nb);
    opacity: 1;
}

/* Internet Explorer 10-11 */
.form-control:-ms-input-placeholder {
    color: var(--nb);
}

/* Microsoft Edge (Legacy) */
.form-control::-ms-input-placeholder {
    color: var(--nb);
}

.form-label{cursor: pointer;}
input[type="checkbox"] {cursor: pointer;}
.chec-div{width:20px; text-align: center;}

option {
    background-color: #ffffff; /* White background for options */
    color: var(--nb);            /* Dark text */
}

button {position: relative; margin: 0; padding: 1em; z-index: 1;}

a.footer-nav, a.footer-nav:visited{
    color:rgba(248,249,250,.5);
    position: relative; /* Needed for pseudo-element positioning */
    padding-left: 1em; /* Space for bullet */
    transition: color 0.3s ease;
}

/* Hide bullet by default */
a.footer-nav::before {
    content: "›";
    position: absolute;
    left: 0;
    color: transparent; /* Invisible initially */
    transition: color 0.3s ease;
}

a.footer-nav:hover{
    color: var(--b);
}
a.footer-nav:hover::before {
    color: var(--o); /* Bullet color matches hover color */
    font-weight: bold;
    font-size: 18px;
    line-height: 14px;
}

a.footer-contact, a.footer-contact:visited{
    color:rgba(248,249,250,.5);
}
a.footer-contact:hover{
    color: var(--b);
}
.row {margin-right: 0px; margin-left: 0px;}
.row-centered {text-align: center;}
.col-centered {margin: 0 auto;}
/*#####################################################################################################################*/
/*UPGRADE BROWSER PAGE*/
.container-ie{border:none;background:url('../images/sprite/browsers-sprite.png') -506px 0px;  height:126px;width:126px;}
.container-chrome{border:none;background:url('../images/sprite/browsers-sprite.png')  0px 0px;height:126px;width:126px;}
.container-firefox{border:none;background:url('../images/sprite/browsers-sprite.png') -127px 0px;height:126px;width:126px;}
.container-safari{border:none;background:url('../images/sprite/browsers-sprite.png') -256px 0px;height:126px;width:126px;}
/*#####################################################################################################################*/
/*CONTENT STYLES*/
.hero{
    line-height: 2.2rem;
    font-weight:700;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.9);
}

.hero-text{
    line-height: 1.7rem;
    text-shadow: 1.1px 1.1px 1px rgba(255, 255, 255, 1);
    width:25%;
    margin-bottom: 2rem;
}

.search-container{
    background-color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 1200px) {
    .hero{
        line-height: 2.2rem;
        font-weight:700;
        text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.9);
    }

    .hero-text{
        line-height: 1.7rem;
        width:40%;
    }
}
@media (max-width: 768px) {
    .hero{
        line-height: 2.2rem;
        font-weight:700;
        text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.9);
    }

    .hero-text{
        line-height: 1.7rem;
        width:100%;
        margin-bottom: 1rem;
    }
}

.sky-blue{
    color:var(--sb);
}

.text-justify{
    text-align: justify;
}

.search-heading{
    font-weight:600;
}

.bi-house,.bi-geo,.bi-geo-alt,.bi-houses{
    font-size:1.5rem
}

.form-check-label{line-height:1.5rem; cursor:pointer;font-size: .875rem;}

.form-check-input:checked {
    background-color: var(--sb);
    border-color: var(--sb);
}
.search-select{
    border:none !Important;
    padding-top: .18rem;
    padding-bottom: 0.18rem;
    color:var(--nb);
}

.fade-from-left{-webkit-animation-name:fadeInLeft; animation-name:fadeInLeft;}
.fade-from-right{-webkit-animation-name:slideInRight; animation-name:slideInRight;}
.fade-from-down{-webkit-animation-name:fadeInUp; animation-name:fadeInUp;}
.fade-from-up{-webkit-animation-name:fadeInDown; animation-name:fadeInDown;}

.fade-from-left, .fade-from-right, .fade-from-down, .fade-from-up{
    -webkit-animation-duration: 1s;
    animation-duration: 1.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.bi-about{
    font-size: 40px;
    color: var(--o);
}

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
}

.col-xs-15 {
    width: 10%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}
.white{color:#fff;}

.width-per-10{width:10%;}
.width-per-20{width:20%;}
.width-per-30{width:30%;}
.width-per-40{width:40%;}
.width-per-50{width:50%;}
.width-per-60{width:60%;}
.width-per-70{width:70%;}
.width-per-80{width:80%;}
.width-per-90{width:90%;}
.width-per-100{width:100%;}

.clear {clear: both;}

.whitebg {background-color: #fff; }
.blackbg {background-color: #000;}

.text-size-14{font-size: 14px;}

.position-relative{position: relative;}
.display-inline{display: inline;}

.divider {
    width: 100px;
    height: 5px;
    border-radius: 1000px;
    margin-bottom: 12px;
    align-self: flex-start;
	background: #DB0812;
}

.display-inline{display:inline;}

/* Shrink */
.hvr-shrink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}
.padding-rignt{padding:0px 25px 25px 0px;}
.padding-left{padding:0px 0px 25px 25px;}

.margin-none{margin:0px;}
.padding-none{padding:0px;}

.margin-bot-10{margin-bottom:10px;}

@media (max-width: 767px) {
    .width-per-10{width:100%;}
    .width-per-20{width:100%;}
    .width-per-30{width:100%;}
    .width-per-40{width:100%;}
    .width-per-50{width:100%;}
    .width-per-60{width:100%;}
    .width-per-70{width:100%;}
    .width-per-80{width:100%;}
    .width-per-90{width:100%;}
    .width-per-100{width:100%;}
}
/*#####################################################################################################################*/
/*FONT STYLES*/
.bold {font-weight: bold;}
.italic {font-style: italic;}
.white {color: white;}
/*#####################################################################################################################*/
/*FONTS COLORS*/
.text-danger {color: #000;}
/*#####################################################################################################################*/
/*CONTACT FORM*/
.loading-form {
    width: 47px;
    height: 39px;
    background-image: url(../images/ico/loading.gif);
    background-repeat: no-repeat;
}
/*#####################################################################################################################*/
.clearfix:before, .clearfix:after { content: ""; display: table;}
.clearfix:after { clear: both;}
.clearfix { *zoom: 1;}

.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 0px;
    --bs-accordion-color: #fff;
    --bs-accordion-border-radius: 0;
}

.accordion-button {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23737373' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed) {
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23737373' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-color: transparent;
}
.accordion-button:focus{
    box-shadow: none;
}
.accordion-item {
    border-bottom: solid 1px #737373;
}

.field-icon {
    float: right;
    margin-right: 10px;
    margin-top: -35px;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.panel {
    margin-bottom: 20px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
    padding: 15px;
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
    color: inherit;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}
.panel-title > a {
    color: inherit;
}
.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.panel > .list-group {
    margin-bottom: 0;
}
.panel > .list-group .list-group-item {
    border-width: 1px 0;
    border-radius: 0;
}
.panel > .list-group:first-child .list-group-item:first-child {
    border-top: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel > .list-group:last-child .list-group-item:last-child {
    border-bottom: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.panel-heading + .list-group .list-group-item:first-child {
    border-top-width: 0;
}
.list-group + .panel-footer {
    border-top-width: 0;
}
.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
    margin-bottom: 0;
}
.panel > .table:first-child,
.panel > .table-responsive:first-child > .table:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
    border-top-left-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
    border-top-right-radius: 3px;
}
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
    border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
    border-bottom-right-radius: 3px;
}
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive {
    border-top: 1px solid #ddd;
}
.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
    border-top: 0;
}
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
    border: 0;
}
.panel > .table-bordered > thead > tr > th:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
.panel > .table-bordered > tbody > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
.panel > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-bordered > thead > tr > td:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
.panel > .table-bordered > tbody > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
.panel > .table-bordered > tfoot > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
}
.panel > .table-bordered > thead > tr > th:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.panel > .table-bordered > tbody > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.panel > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-bordered > thead > tr > td:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.panel > .table-bordered > tbody > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.panel > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
}
.panel > .table-bordered > thead > tr:first-child > td,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.panel > .table-bordered > tbody > tr:first-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
.panel > .table-bordered > thead > tr:first-child > th,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
.panel > .table-bordered > tbody > tr:first-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
    border-bottom: 0;
}
.panel > .table-bordered > tbody > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
.panel > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-bordered > tbody > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
.panel > .table-bordered > tfoot > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
    border-bottom: 0;
}
.panel > .table-responsive {
    margin-bottom: 0;
    border: 0;
}
.panel-group {
    margin-bottom: 20px;
}
.panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
}
.panel-group .panel + .panel {
    margin-top: 5px;
}
.panel-group .panel-heading {
    border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: 1px solid #ddd;
}
.panel-group .panel-footer {
    border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
    border-bottom: 1px solid #ddd;
}
.panel-default {
    border-color: #ddd;
}
.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #ddd;
}
.panel-default > .panel-heading .badge {
    color: #f5f5f5;
    background-color: #333;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #ddd;
}
.panel-primary {
    border-color: #428bca;
}
.panel-primary > .panel-heading {
    color: #fff;
    background-color: #428bca;
    border-color: #428bca;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #428bca;
}
.panel-primary > .panel-heading .badge {
    color: #428bca;
    background-color: #fff;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #428bca;
}
.panel-success {
    border-color: #d6e9c6;
}
.panel-success > .panel-heading {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.panel-success > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #d6e9c6;
}
.panel-success > .panel-heading .badge {
    color: #dff0d8;
    background-color: #3c763d;
}
.panel-success > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #d6e9c6;
}
.panel-info {
    border-color: var(--b);
}
.panel-info > .panel-heading {
    color: #fff;
    background-color: var(--b);
    border-color: #bce8f1;
}
.panel-info > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #bce8f1;
}
.panel-info > .panel-heading .badge {
    color: #d9edf7;
    background-color: #31708f;
}
.panel-info > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #bce8f1;
}
.panel-warning {
    border-color: #faebcc;
}
.panel-warning > .panel-heading {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #faebcc;
}
.panel-warning > .panel-heading .badge {
    color: #fcf8e3;
    background-color: #8a6d3b;
}
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #faebcc;
}
.panel-danger {
    border-color: #ebccd1;
}
.panel-danger > .panel-heading {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.panel-danger > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #ebccd1;
}
.panel-danger > .panel-heading .badge {
    color: #f2dede;
    background-color: #a94442;
}
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #ebccd1;
}

.panel-body:before,
.panel-body:after {
    display: table;
    content: " ";
}

.panel-body:after{
    clear: both;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

/* NOTIFICATION ALERTS */
.alert-box{
  top:18%;
	right:0;
	bottom:0;
	position:fixed;
	display:flex;
	flex-flow:column;
	overflow-y:auto;
	padding: 20px;
	width:auto;
}
.noti{
	display:flex;
	flex-flow:row;
	margin:10px 0;
	width:250px;
	min-height:90px;
	height:auto;
	background-color:#cecece;
	border-radius:4px;
	color:#fff;
	box-shadow: 0 10px 46px -21px rgba(0,0,0,0.75);
	transition: all 0.3s cubic-bezier(0,0,0.3,1);
	cursor:pointer;
}
.noti:hover{
	box-shadow: 0px 10px 60px -21px rgba(0,0,0,0.80);
}
.noti.sucess{
	background-color:#3db56e;
}
.noti.request{
	background-color:#67a4c0;
}
.noti.wait{
	background-color:#c3d2d9;
}
.noti.failed{
	background-color:#c84346;
}

.noti-icon{
	margin: unset;
	font-weight:300;
	display: flex;
	align-items: center;
	justify-content: center;
	width:30%;
	border-radius: 4px 0 0 4px;
	background-color:rgba(0,0,0,0.2);
	&.bi-x{
		font-size: 40px;
	}
	&.bi-check{
		font-size: 40px;
	}
}

.bi-info-circle-fill:hover{cursor: help;}

.noti-icon .bi{
	font-size: 40px;
	width: unset;
	height: unset;
}
.noti-content{
	position:relative;
	padding:10px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-flow:column;
	width:100%;
}
.noti-close{
	position:absolute;
  font-size:14px;
	top:2px;
	right:5px;
	cursor:pointer;
}
.noti-title{
	padding-right: 12px;
  font-size:16px;
	font-weight:700;
}
.noti-subtitle{
	display:flex;
	flex-flow:column;
	margin-top:5px;
	font-size:.4em;
	font-weight:300;
}