/*==============================================
/* PRESET COLOR
/* You can change your brand color from here!
================================================*/


/* Theme primary color
-------------------------------------------------------------- */
a, 
a:hover, 
a:focus,
.primary-color,
.text-primary,
.package-price,
.featured-item .icon i,
.facts-wrapper .counter-wrap i {
    color: #00b0ff;
}


/* Theme primary background color 
---------------------------------------------------------------*/
.primary-bg,
.label.label-primary,
.tt-main-header,
.section-divider,
.tt-preloader-wave:before,
.tt-preloader-wave:after,
.featured-item:hover .icon i,
.tt-screenshot-wrap .arrow-left:hover, 
.tt-screenshot-wrap .arrow-right:hover,
.featured-carousel.owl-theme .owl-dots .owl-dot.active span, 
.featured-carousel.owl-theme .owl-dots .owl-dot:hover span {
    background-color: #00b0ff;
}


/*
Button Style
------------------------------------------------------------*/
.btn.btn-primary, 
.btn.btn-primary:hover, 
.btn.btn-primary:focus, 
.btn.btn-primary:active, 
.btn.btn-primary.active, 
.btn.btn-primary:active:focus, 
.btn.btn-primary:active:hover, 
.btn.btn-primary.active:focus, 
.btn.btn-primary.active:hover, 
.open > .btn.btn-primary.dropdown-toggle, 
.open > .btn.btn-primary.dropdown-toggle:focus, 
.open > .btn.btn-primary.dropdown-toggle:hover, 
.navbar .navbar-nav > li > a.btn.btn-primary, 
.navbar .navbar-nav > li > a.btn.btn-primary:hover, 
.navbar .navbar-nav > li > a.btn.btn-primary:focus, 
.navbar .navbar-nav > li > a.btn.btn-primary:active, 
.navbar .navbar-nav > li > a.btn.btn-primary.active, 
.navbar .navbar-nav > li > a.btn.btn-primary:active:focus, 
.navbar .navbar-nav > li > a.btn.btn-primary:active:hover, 
.navbar .navbar-nav > li > a.btn.btn-primary.active:focus, 
.navbar .navbar-nav > li > a.btn.btn-primary.active:hover, 
.open > .navbar .navbar-nav > li > a.btn.btn-primary.dropdown-toggle, 
.open > .navbar .navbar-nav > li > a.btn.btn-primary.dropdown-toggle:focus, 
.open > .navbar .navbar-nav > li > a.btn.btn-primary.dropdown-toggle:hover {
    background-color: #00b0ff;
    color: #fff;
}

.btn.btn-primary, 
.navbar .navbar-nav > li > a.btn.btn-primary {
    box-shadow: 0 2px 2px 0 rgba(0, 176, 255, 0.14), 0 3px 1px -2px rgba(0, 176, 255, 0.2), 0 1px 5px 0 rgba(0, 176, 255, 0.12);
}

.btn.btn-primary:focus, 
.btn.btn-primary:active, 
.btn.btn-primary:hover, 
.navbar .navbar-nav > li > a.btn.btn-primary:focus, 
.navbar .navbar-nav > li > a.btn.btn-primary:active, 
.navbar .navbar-nav > li > a.btn.btn-primary:hover {
    box-shadow: 0 14px 26px -12px rgba(0, 176, 255, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 176, 255, 0.2);
}

.btn.btn-primary.btn-simple, 
.navbar .navbar-nav > li > a.btn.btn-primary.btn-simple {
    color: #00b0ff;
    box-shadow: none;
    background-color: transparent;
}

.btn.btn-white, 
.btn.btn-white:focus, 
.btn.btn-white:hover, 
.navbar .navbar-nav > li > a.btn.btn-white, 
.navbar .navbar-nav > li > a.btn.btn-white:focus, 
.navbar .navbar-nav > li > a.btn.btn-white:hover {
    color: #00b0ff;
    background-color: #fff;
}


/*
Form Styling
------------------------------------------------------------*/
.form-control, 
.form-group .form-control,
.form-group.is-focused .form-control {
    background-image: linear-gradient(#00b0ff, #00b0ff), linear-gradient(#D2D2D2, #D2D2D2);
}

.form-group.is-focused label,
.form-group.is-focused label.control-label {
  color: #00b0ff;
}

.checkbox input[type=checkbox]:checked + .checkbox-material .check,
.radio input[type=radio]:checked ~ .check {
    background-color: #00b0ff;
}
.slider .noUi-handle,
.radio input[type=radio]:checked ~ .circle,
.togglebutton label input[type=checkbox]:checked + .toggle:after {
    border-color: #00b0ff;
}

.togglebutton label input[type=checkbox]:checked + .toggle {
    background-color: rgba(0, 176, 255, 0.7);
}

.card .header-primary {
    background: linear-gradient(60deg, #6bd1ff, #00b0ff);
}

/*
Navbar
--------------------------------------------------*/
.navbar, 
.navbar.navbar-default,
.navbar.navbar-primary {
    background-color: #00b0ff;
}

.navbar .dropdown-menu li > a:hover, 
.navbar .dropdown-menu li > a:focus, 
.navbar.navbar-default .dropdown-menu li > a:hover, 
.navbar.navbar-default .dropdown-menu li > a:focus {
    color: #fff;
    background-color: #00b0ff;
}

@media screen and (max-width: 768px) {
    .navbar.navbar-transparent {
        background-color: #00b0ff;
    }
}

@media screen and (max-width: 767px) {
    .navbar .navbar-nav > li > a:hover, 
    .navbar .navbar-nav > li > a:focus,
    .navbar .navbar-nav .open .dropdown-menu > li > a:hover, 
    .navbar .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #00b0ff;
        background-color: #fff;
    }
    .navbar .navbar-nav > li > a.btn.btn-white.btn-simple {
        text-align: left;
    }
}

/*
Progress Bar
------------------------------------------------------*/
.progress .progress-bar, 
.progress .progress-bar.progress-bar-default,
.progress .progress-bar.progress-bar-primary {
    background-color: #00b0ff;
}
.progress.progress-line-primary {
    background-color: rgba(0, 176, 255, 0.2);
}


/*
Pagination
------------------------------------------------------*/
.pagination > .active > a, 
.pagination > .active > a:focus, 
.pagination > .active > a:hover, 
.pagination > .active > span, .pagination > 
.active > span:focus, .pagination > .active > span:hover {
    background-color: #00b0ff;
    border-color: #00b0ff;
    color: #fff;
    box-shadow: 0 4px 5px 0 rgba(0, 176, 255, 0.14), 0 1px 10px 0 rgba(0, 176, 255, 0.12), 0 2px 4px -1px rgba(0, 176, 255, 0.2);
}