:root{
--clr-lightblue: #64a5f5;
--clr-blue: #2585fa;
}
body{
min-height: 100vh;
background-image:url('../assets/images/bg-fieldcloud.jpg') !important;
        background-size: cover;
        background-attachment: fixed;

/*font-size:1.1rem;*/
}
.bodyClass-acc {
        background-image:url('../assets/images/bg-tropical.jpg') !important;
        background-size: cover;
        background-attachment: fixed;
    }
.bodyClass-spo {
        background-image:url('../assets/images/bg-field.jpg') !important;
        background-size: cover;
        background-attachment: fixed;
    }
    #rname {
        color:#ffffff;
        text-shadow: 2px 2px #333333;
    }
nav
{
/*box-shadow: 0 2px 4px rgba(39, 30, 30, 0.3) !important;
background-color: #00000070 !important; 
position: relative !important;
height: 75px;
padding: 15px 50px !important;*/
}
.nav-container {
width: 100%;
}
.nav-item {
margin-right: 30px;
}
.btn-info {
height: 36px !important;
border-radius: 25px !important;
/* font-size: 14px !important;*/
font-weight: 600;
padding: 5px 10px 10px 10px !important;
color: white;
margin-top: 1%;
background-color: inherit !important;
border: 2px solid #2585fa !important;
position: absolute;
right: 0 !important;
top: 4.5px;
margin-right: 5% !important;
}
button.btn-info:hover {
color: white !important;
background-color: #2585fa !important;
cursor: pointer !important;
padding: 7.5px 10px 10px 10px !important;
}
li.nav-item a.nav-link:hover{
color: #64a5f5 !important;
cursor: pointer !important;
}
li.active {
background-color: inherit !important;
}
.nav-item li{
font-size: 14px;
font-family: Raleway, sans-serif;
font-weight: 700;
/* color: #fff !important; */
}
.nav-link{
margin-top: 2%;
}
/* ADDED BY AMIR 25/5/22 */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: #52307c;
display: flex;
align-items: center;
justify-content: space-between;
/* padding: 2rem 9%; */
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 10%);
height: 65px;
max-width: 100%;
height:60px !important;
}
.header a:hover {
color: #e05a00 !important; 
}
.header .logo {
/*font-size: 2.5rem;*/
font-weight: bolder;
color: #ffffff;
text-decoration :none;
}
.navbar {
position: relative!important;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.icons {
position: relative;
right: 0px;
margin-right: 10px;
display:inline-flex;
}
.header .navbar a {
float: left;
font-size: 16px;
color: #eeeeee;
/* text-align: center; */
padding: 14px 16px;
text-decoration: none;
}
.header .icons div {
margin-left: 15px;
cursor: pointer;
color: white;
}
#menu-btn {
display: none;
}
.navbar .dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/*
.dropdown-content {
display: none;
position: absolute;
background-color: #52307c;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
z-index: 1;
top:55px;
}
*/
.dropdown-content {
display: none;
position: relative;
background-color: #52307c;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-item:hover {
background-color:#52307c!important ;
}
.dropdown-item.head a {
color:#fff;
}
.dropdown-item.head a:hover {
color:#fff;
}
.dropdown-item.active {
color:#52307c;
}
/* ============================Section Check Availability=================================== */
#check_availability{
background-color: #f0efef  !important;
padding:  0px 0px 0px 15px !important;
height: 100px;
box-shadow: 0 1px 4px rgba(39, 30, 30, 0.2) !important;
}
.form-group{
/* margin-right: 10px; */
text-align: left;
flex-grow: 1 !important;
height: 88px;
/* padding: 0 5px; */
/* color: #f0efef  */
}
.form-group label {
margin: 0px 0px 4px 0px!important;
}
.form-group select,.form-group input  {
padding: 8px !important;
height: 48px !important;
font-size: 14px ;
border-radius: 8px !important;
width: 200px !important;
}
.form-group .btn{
margin-top: 28px;
background-color: #64a5f5;
border: #64a5f5;
height: 48px !important;
width: 230px !important;
}
button:hover{
/*background-color: #2585fa !important;
border: 2px solid #64a5f5 !important; */
outline: none !important;
border-style: none !important;
}



/* ============================Section Search Result=================================== */
#search_result{
position: relative !important;
}
.container-fluid{
width: 100%;
/* display: flex;
flex-wrap: wrap; */
display: inline-block !important;
box-sizing: border-box;
padding: 1% 0px 1% 1% !important;
}
@media only screen and (min-width: 720px){
.map-list__toggle--with-bg:before {
content: "";
display: block;
background: url(https://imgcy.trivago.com/q_auto/v1/hardcodedimages/map-entry-background.png) no-repeat;
background-size: cover;
height: 52px;
width: 50% !important;
/* position: absolute; */
left: 89% !important;
top: 1.8%;
border: 2px solid #fff;
border-radius: 8px;
}
}
.map-list__toggle--with-bg button {
font-size: 14px;
padding: 4px 6px !important;
/* margin: 0; */
min-height: 36px;
/* display: block; */
position: absolute;
/* display: inline-block;  */
width: 40% !important;
overflow: hidden;
/* margin: 0px 0; */
left: 55% !important;
top: 7.5px;
vertical-align: middle;
border-radius: 10px;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
font-weight: 700 !important;
font-size: 14px !important;
height: auto;
text-decoration: none;
color: rgb(78, 78, 78);
background-color:rgb(249, 249, 249) !important;
cursor: pointer;
touch-action: manipulation;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
button.map-list-btn:hover,
button.map-list-btn:focus {
background-color: white !important;
color: #ccc !important;
}
.btn-text--full{
display: inline-block;
}
.btn-text{
vertical-align: middle;
}
.container2 {
/* background-color: palegoldenrod; */
width: 100% !important;
/* margin-left: 1%; */
padding: 0px 0px 20px 0px;
}
.form-check{
font-size: 13.5px;
}
.card-filter {
width: 25% !important;
padding: 0px !important;
height: fit-content;
margin-right: 28px;
margin-left: -5px;
}
.card-filter .card{
text-align: left;
width: 100% !important;
height:fit-content;
border-radius:4px !important;
padding:0px !important;
}
.card {
/* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s; */
/* display: flex; */
box-shadow: 0 2px 4px 0 rgba(39, 30, 30, 0.2) !important;
margin-bottom: 10px ;
margin-left: 0px;
margin-right: 25px;
text-align: left;
height: max-content;
width: 100% !important;
border-radius: 6px !important;
border: 1px solid rgb(182, 182, 182) ;
padding:0px 0px 0px 10px !important;
}
.card .row {
/*width: 100%;*/
}
/* .card .col, .card .col-4{
/* background-color: antiquewhite; */
/* margin-right: 1%;
margin-left: 10px;
flex-grow: 2 !important;
flex-wrap: nowrap;
width: fit-content;
padding: 5px;
} */
.card-container{
padding: 10px 0px 0px 0px !important;
width: max-content;
font-size: 13px;
font-family: Roboto, sans-serif;
}
.col-2{
position: relative !important;
}
.row .card-body .btn{
width: 30% ;
cursor: pointer;
background-color: #64a5f5;
border: #64a5f5;
/* bottom: -160px !important;
position: absolute !important; */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
/* margin-top: 100px !important; */
margin-right: 30px !important;
float: right;
}
.btn:hover, .btn:focus {
background-color: #2585fa !important;
outline: none !important;
border-style: none !important;
}
.card-body{
padding: 5px 0px 10px 0px !important;
position: absolute;
/* bottom: 0; */
left:0;
width: 100% !important;
}
.card .hostel-list .col{
/* background-color: aqua !important; */
padding: 20px 4px 2px 0px !important;
margin: 0px !important;
}
.card .hostel-list{
padding: 5px 0px 5px 20px;
/* background-color: pink; */
width: 100%;
}
.card .cont-rate {
margin-top:10px !important;
}
/* .cont{
background-color: olivedrab;
/* margin-right: 0px !important;
} */
i{
margin-left: 4px;
position: relative;
margin-right: 4px;
width: 16px;
}
.bi-star-half, .bi-star-fill{
width: 10px !important;
height: 10px !important;
margin-right: 6px !important;
margin-top: 0px;
}
span .bi-star-fill, span .bi-star-half {
float: right !important;
}
#nav {
margin-top: 2%;
}
.btn-outline-info{
border: none;
outline: none !important;
padding: 10px 10px;
background-color: #f1f1f1 !important;
cursor: pointer;
font-size: 14px;
border-radius: 20px;
}
.active, .btn-outline-info:hover {
background-color:#222 !important;/*#64a5f5*/
color: white;
}
.modal-content{
width:700px !important;
height:550px !important;
}
.modal-header{
width:700px !important;
}
button.close {
width: 28px !important;
}
.bi-heart{
position: absolute;
left: 85% !important;
top: 7.5px;
color: #fff;
width: 50px !important;
height: 50px !important;
font-size: 1.5em;
}
.bi-heart:hover{
cursor: pointer;
}
.pagination_link {
display: inline-flex;
text-decoration: none !important;
}
.pagination_link a{
color: black;
float: left;
padding: 8px 16px;
text-decoration: none !important;
transition: background-color .3s;
}
@media only screen and (max-device-width: 375px){
body{
height: 100vh;
/* overflow: hidden; */
width: 100vw !important;
}
nav.navbar{
padding: 15px 20px !important;
}
li.nb-item{
z-index: 9999 !important;
background-color: #353a3e !important;
padding: 5px 10px 10px 10px;
font-size: 14px;
}
.btn-info{
margin-top: 4%;
}
.form-group{
margin: 2px 4px 40px 0px !important;
display: block !important;
height: 36px;
}
.form-group label{
font-size: 14px;
}
.form-group select,.form-group input  {
height: 36px !important;
font-size: 12px ;
width: 350px !important;
}
.form-group .btn{
width: 350px !important;
margin-top: 5px;
}
#check_availability_mobile{
/* height: 475px !important; */
box-shadow: 0 0px 4px 0px rgba(39, 30, 30, 0.2) !important;
padding: 0px !important;
background-color: #f0efef  !important;
/* background-color: #1e1c48  !important; */
}
button.btn.map-list-btn{
width: 40% !important;
}
div.container-fluid{
padding: 3.75px 10px 3.75px 0px !important;
}
.container2{
width: 100% !important;
padding-right: 0px !important;
}
/* .card-filter{
display: none;
} */
div.cont.t1 {
padding: 0px 0px 0px 0px !important;
}
div.row{
/* padding: 0px 10px 0px 5px !important; */
margin-left: 0px;
width: 100%;
padding: 5px !important;
/* position:sticky !important; 
top: 0 !important; 
z-index:1 !important; */
}
.card.hostel-list{
width: 355px !important;
margin-left: 0px !important;
margin-right: 10px !important;
padding: 0px 10px 0px 0px !important;
}
.card.hostel-list .row {
padding: 0px !important;
}
.card.hostel-list .col{
margin-right: 0px !important;
}
#card-cont.card-container{
width: 140px !important;
/* background-color: antiquewhite; */
}
#col1.col-4{
margin-right: 10px !important;
}
#col1 img{
object-fit: cover;
border-radius: .25rem !important;
margin-left: 0px !important;
}
/* #cont-rate{
background-color: aquamarine;
} */
#cont-rate p{
margin-top: 0px !important;
}
#cont-rate h4 {
font-size: 18px !important;
}
#cont-rate i {
font-size: 8px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
}
select#sort{
width: 200px !important;
}
.row .card-body .btn{
bottom: -100px !important;
width: 50%;
font-size: 13px !important;
}
ul.pagination_link {
padding: 0px !important;
}
.pagination_link a{
font-size: 12px;
}
.lab-record{
font-size: 14px;
}
.loc-name, .dprice span{
font-size: 14px !important ;
}
.dcategory span, .dsize span, .dbed span{
font-size: 12px !important;
}
button.btn.btn-light ,label.btn.btn-light{
color: #2585fa !important;
box-shadow: 0 0px 2px 0px rgba(39, 30, 30, 0.5) !important;
font-size: 13px !important;
width: 95%;
background-color: #fff;
}
button.btn.btn-light:hover,
label.btn.btn-light:hover
{
color: black !important;
background-color: inherit !important;
}
.col-4.d-block {
padding: 0px !important;
margin-top: 5px;
}
/* Filter drawer */
.drawer {
position: fixed;
height: 100% !important;
width: 100%;
left: 0;
/* margin-top: 50%; */
background: #fff;
padding: 20px 10px 10px 20px;
overflow-y: scroll !important;
transition: top 0.5s ease;
color: black;
opacity: 0;
z-index: 9999;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 0 0px 4px 0px rgba(39, 30, 30, 0.2) !important;
}
.wrapper {
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
.open-drawer {
top: 150px;
opacity: 1;
}
.close {
color: white;
width: fit-content;
}
}
.bg-darkpurple { 
background-color:#52307c; 
height:60px;
}
@media (max-width:420px){
button.btn.btn-light.collapsible {
    z-index: 1;
    width: 100%;
    height: 50px;
    margin: 0px 0px 0px 0px;
    border-radius: 0px;
    border: 0px;
    background-color: #f3f3f3;
}

.form-group {
        /* margin-right: 10px; */
        text-align: left;
        flex-grow: 1 !important;
        /*height: 95px;*/
        width:100%;
        /* padding: 0 5px; */
        /* color: #f0efef  */
    }
    .form-group label {
        margin: 0px 0px 4px 0px!important;
    }
    
    .form-group select,.form-group input  {
        padding: 8px !important;
        height: 48px !important;
        font-size: 14px ;
        border-radius: 8px !important;
        width: 100% !important;
    }
    
    .form-group .btn{
        margin-top: 28px;
        background-color: #64a5f5;
        border: #64a5f5;
        height: 48px !important;
        width: 100% !important;
    }
.btn-light {
width:110px;
}
.cont.t1 {
padding-right: 15px!IMPORTANT;
padding-left: 15px;
}
.row .card-body .btn {
width:100%;
}
.header .navbar.active {
padding-top: 10px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
padding-bottom: 21px;
background-color: rgba(0,0,0,0.5);/*#222 !important;*/
}
.header .navbar a {
margin: 10px 10px 0px 10px;
padding: 10px;
background: #7c5295;
font-size: 14px;
display: block;
border-radius: 0.5rem;
float: none;
width:95%;
}
.dropdown {
width:100%;
}
.dropdown-content {
background-color:transparent;
box-shadow:none !important;
/*top: 10px;*/
padding-left:0px;
position:relative;
}
.navbar .dropdown .dropbtn{
background-color:transparent !important;
height: 42px;
width: 95%;
font-size: 14px;
/*margin-left: 11px;*/
margin:10px;
padding-top: 10px !important;
text-align:left;
border-radius: 8px;
}
.form-group select, .form-group input {
width:100% !important;
}
.form-group {
height:65px !important;
margin-right:5px;
}
.form-group .btn {
width:420px !important;
}
ul.pagination_link {
margin-right:0px;
}
button.btn.btn-light.collapsible {
width:335px !important;
}
label.lab-record {
margin-left:25px;
}
.mfilter {
display:none!important;  
}
}
.mobile-view {
display:none;
}
.web-view {
display:block;
}
@media (max-width: 420px) {
    ul.pagination_link {
        margin-left: -44px;
    }
.header .navbar {
position: absolute!important;
top: -66%;
left: 0;
right: 0;
background: #222;
border-top: 0.1rem solid rgba(0,0,0,0.1);
border-bottom: 0.1rem solid rgba(0,0,0,0.1);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
margin-top: 100px;
width:100%;
}
nav.navbar {
width:50px;
}
#menu-btn {
display: inline-block;
}
}
@media (max-width: 420px){
  .header .navbar {
margin-top:0px;
position: absolute !important;
top: -67% !important;
left: 0;
right: 0;
background: #222;
border-top: 0.1rem solid rgba(0,0,0,0.1);
border-bottom: 0.1rem solid rgba(0,0,0,0.1);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
margin-top: 100px !important;
width: 100% !important;
}
.mobile-view {
display:block !important;
}
.web-view {
display:none !important;
}
.card-base {
margin: 10px; 
}
.card-body {
position:relative !important;
padding: 5px 5px 5px -1px !important;
}
.card {
padding:0px !important;
}

.rate {
float: right;
display: grid;
text-align: center;
/*position: absolute;
right: 19px;*/
}
/*
.rate {
float: right;
position: absolute;
right: 19px;
top: 223px;
}
*/
.star {
color:rgb(243, 208, 9);
margin:2px;
}
.price {
color:red;
font-weight: 500;
}
p {
margin:5px !important;
}
.review-rate {
font-size: 10px;
text-align: center;
/*position: absolute;/
font-weight: 600;
/*right: 6px;
top: 226px;*/
}
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.row .card-body .btn {
/*width: 30%;*/
cursor: pointer;
background-color: #64a5f5;
border: #64a5f5;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
/* margin-top: 100px !important; */
margin-right: 0px !important;
float: right;
}
}


/* - -
@media (max-width: 430px){
.header .navbar {
margin-top: 0px;
}
nav.navbar.active {
padding-bottom: 21px;
}
.header .navbar a {
margin: 10px;
padding: 10px;
background: #7c5295;
font-size: 14px;
display: block;
border-radius: 0.5rem;
float: none;
text-align: left;
}
.navbar .dropdown .dropbtn {
width: 95%;
background-color: #7c5295;
border-radius: 6px;
height: 42px;
margin: 0px 10px 0px 10px;
padding: 10px;
text-align: left;
}
.dropdown {
float: none;
}
}
*/
/**** FLIP PHONE ***/



.header .navbar a {
margin: 10px 10px 0px 10px;
padding: 10px;
background: #7c5295;
font-size: 14px;
display: block;
border-radius: 0.5rem;
float: none;
text-align: left;
width: 93%;
}
.logo {
font-size: 20px;
}
.header .logo {
width:244px;
}
nav.navbar {
width: 530px;
padding: 5px;
margin-top: 23px;
display: inline-block;
}
.header .navbar a {
font-size: 13px;
padding: 5px;
}
.navbar .dropdown .dropbtn {
font-size: 13px;
padding: 5px;
margin-left: 10px;
}

#menu-btn {
display: inline-block;
}

.card-body {
position: relative;
margin: 10px;
}
.card {
padding: 0px 0px 0px 0px !important;
}
input.btn.btn-primary.btn-block {
margin-left: -10px;
}
.header .navbar.active {
padding-top: 10px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
padding-bottom:17px;
background-color: rgba(0,0,0,0.5);
position: absolute !important;
}
.dropdown-content {
display: none;
position: relative;
background-color: transparent !important;
min-width: 19%;
box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
z-index: 1;
}

.header .navbar a {
margin: 10px 10px 0px 10px;
padding: 10px;
background: #7c5295;
font-size: 14px;
display: block;
border-radius: 0.5rem;
float: none;
text-align: left;
width: 93%;
}
.logo {
font-size: 20px;
}
.header .logo {
width:244px;
}
nav.navbar {
width: 530px;
padding: 5px;
margin-top: 23px;
display: inline-block;
}
.header .navbar a {
font-size: 13px;
padding: 5px;
}
.navbar .dropdown .dropbtn {
font-size: 13px;
padding: 5px;
margin-left: 10px;
}
.header .navbar {
position: absolute !important;
top: -67% !important;
/*left: 0;*/
right: 122px;
background: #222;
border-top: 0.1rem solid rgba(0,0,0,0.1);
border-bottom: 0.1rem solid rgba(0,0,0,0.1);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
margin-top: 100px !important;
width:20%;
}
#menu-btn {
display: inline-block;
}

.card-body {
position: relative;
margin: 10px;
}
.card {
padding: 0px 0px 0px 0px !important;
}
input.btn.btn-primary.btn-block {
margin-left: -10px;
}
.header .navbar.active {
padding-top: 10px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
padding-bottom: 17px;
background-color: rgba(0,0,0,0.5);
position: absolute !important;
}
.dropdown-content {
display: none;
position: relative;
background-color: transparent !important;
min-width: 19%;
box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
z-index: 1;
}

.d-sm-none {
    display: none;
}
@media (max-width: 380px){
.header {
padding: 0px !important;
}
}
@media (max-width: 430px){
.header .navbar {
margin-top: 0px;
position: absolute !important;
top: -66%;
left: 0;
right: 0;
background: #222;
border-top: 0.1rem solid rgba(0,0,0,0.1);
border-bottom: 0.1rem solid rgba(0,0,0,0.1);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
margin-top: 100px !important;
width: 100%;
}
nav.navbar.active {
padding-bottom: 21px;
background-color: rgba(0,0,0,0.5);/*#222 !important;*/
position: absolute !important;
/*margin-top: 348px;*/
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.header .navbar a {
margin: 10px 10px 0px 10px;
padding: 10px;
background: #7c5295;
font-size: 14px;
display: block;
border-radius: 0.5rem;
float: none;
text-align: left;
width:95%;
max-width:388px;
}
.navbar .dropdown .dropbtn {
width: 95%;
background-color: transparent;
border-radius: 6px;
height: 42px;
margin: 10px 10px 0px 10px;
padding: 10px;
text-align: left;
}
.dropdown {
float: none;
width:83%;
max-width:340px
}
#menu-btn {
display: inline-block;
}
.dropdown-content {
box-shadow: none !important;
position: relative;
background-color: transparent;
 width: 139%;
}
}
@media (max-width: 680px){
    label {
     /* transform: translateX(-287px); */ 
    }
    select#roomtype {
        margin-bottom: 10px;
    }
    .header .navbar {
    position: absolute !important;
    top: -67% !important;
    left: 0;
    right: 0;
    background: #222;
    border-top: 0.1rem solid rgba(0,0,0,0.1);
    border-bottom: 0.1rem solid rgba(0,0,0,0.1);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    margin-top: 100px !important;
    width:100%;
    }
        .d-sm-none {
    display: block !important;
    }
    .col.d-none.d-sm-block {
    display: none !important;
    }

    .web-view {
    display:none !important;
    }
    #check_availability {
    display:none !important;
    }
    .card-filter {
    display:none !important;
    }
    .d-sm-bloc {
    display:none !important;
    }

    .mobile-view {
    display: block !important;
    /*margin-top: 10px;*/
    }
    .col.d-none.d-sm-block {
    display: none !important;
    }  
    .dropdown-content{
      min-width: 98%;  
    }
    .form-group {
        /* margin-right: 10px; */
        text-align: left;
        flex-grow: 1 !important;
        /*height: 50px;*/
        width:100%;
        /* padding: 0 5px; */
        /* color: #f0efef  */
    }
    .form-group label {
        margin: 0px 0px 4px 0px!important;
        transform: none;
    }
    
    .form-group select,.form-group input  {
        padding: 8px !important;
        height: 48px !important;
        font-size: 14px ;
        border-radius: 8px !important;
        width: 100% !important;
    }
    
    .form-group .btn{
        margin-top: 28px;
        background-color: #64a5f5;
        border: #64a5f5;
        height: 48px !important;
        width: 100% !important;
    }
}

button.btn.btn-light.collapsible.active {

    background-color:#222 !important;/*#64a5f5*/
color: white;
}