<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/js/plugins/bootstrap-datepicker.js"></script>
</head>
<div class="section section-javascript" id="javascriptComponents">
<div class="container">
<h3 class="title">Javascript components</h3>
<div class="row" id="modals">
<div class="col-md-6">
<h4>Modal</h4><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch Modal
</button>
<button class="btn btn-warning" data-toggle="modal" data-target="#myModal1">
Launch Modal Mini
</button>
</div>
<div class="col-md-6">
<h4>Popovers</h4>
<button type="button" class="btn btn-default" data-container="body" data-original-title="Popover On Left" data-toggle="popover" data-placement="left" data-content="Here will be some very useful information about his popover." data-color="primary">
On left
</button>
<button type="button" class="btn btn-default" data-container="body" data-original-title="Popover on Top" data-toggle="popover" data-placement="top" data-content="Here will be some very useful information about his popover.">
On top
</button>
<button type="button" class="btn btn-default" data-container="body" data-original-title="Popover on Right" data-toggle="popover" data-placement="right" data-content="Here will be some very useful information about his popover.<br> Here will be some very useful information about his popover.">
On right
</button>
<button type="button" class="btn btn-default" data-container="body" data-original-title="Popover on Bottom" data-toggle="popover" data-placement="bottom" data-content="Here will be some very useful information about his popover.">
On bottom
</button>
</div>
<br><br>
<div class="col-md-6">
<h4>Datepicker</h4>
<div class="row">
<div class="col-md-6">
<div class="datepicker-container">
<div class="form-group">
<input type="text" class="form-control date-picker" value="10/05/2016" data-datepicker-color="primary">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h4>Tooltips</h4>
<button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="left" title="" data-container="body" data-animation="true" data-delay="100" data-original-title="Tooltip on left">On left</button>
<button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="top" title="" data-container="body" data-animation="true" data-original-title="Tooltip on top">On top</button>
<button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="bottom" title="" data-container="body" data-animation="true" data-original-title="Tooltip on bottom">On bottom</button>
<button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="right" title="" data-container="body" data-animation="true" data-original-title="Tooltip on right">On right</button>
<div class="clearfix"></div><br><br>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header justify-content-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="now-ui-icons ui-1_simple-remove"></i>
</button>
<h4 class="title title-up">Modal title</h4>
</div>
<div class="modal-body">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default">Nice Button</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade modal-mini modal-primary" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header justify-content-center">
<div class="modal-profile">
<i class="now-ui-icons users_circle-08"></i>
</div>
</div>
<div class="modal-body">
<p>Always have an access to your profile</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link btn-neutral">Back</button>
<button type="button" class="btn btn-link btn-neutral" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<footer class="footer text-center ">
<p>Made with <a href="https://demos.creative-tim.com/now-ui-kit/index.html" target="_blank">Now UI Kit</a> by Creative Tim</p>
</footer>
@font-face {
font-family: 'Nucleo Outline';
src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot");
src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot") format("embedded-opentype");
src: url("https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/fonts/nucleo-outline.woff2");
font-weight: normal;
font-style: normal;
}
.datepicker {
padding: 8px 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
direction: ltr;
-webkit-transform: translate3d(0, -40px, 0);
-moz-transform: translate3d(0, -40px, 0);
-o-transform: translate3d(0, -40px, 0);
-ms-transform: translate3d(0, -40px, 0);
transform: translate3d(0, -40px, 0);
transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
display: block;
width: 254px;
max-width: 254px;
}
.datepicker.dropdown-menu:before {
display: none;
}
.datepicker.datepicker-primary {
background-color: #f96332;
}
.datepicker.datepicker-primary th,
.datepicker.datepicker-primary .day div,
.datepicker.datepicker-primary table tr td span {
color: #FFFFFF;
}
.datepicker.datepicker-primary:after {
border-bottom-color: #f96332;
}
.datepicker.datepicker-primary.datepicker-orient-top:after {
border-top-color: #f96332;
}
.datepicker.datepicker-primary .dow {
color: rgba(255, 255, 255, 0.8);
}
.datepicker.datepicker-primary table tr td.old div,
.datepicker.datepicker-primary table tr td.new div,
.datepicker.datepicker-primary table tr td span.old,
.datepicker.datepicker-primary table tr td span.new {
color: rgba(255, 255, 255, 0.4);
}
.datepicker.datepicker-primary table tr td span:hover,
.datepicker.datepicker-primary table tr td span.focused {
background: rgba(255, 255, 255, 0.1);
}
.datepicker.datepicker-primary .datepicker-switch:hover,
.datepicker.datepicker-primary .prev:hover,
.datepicker.datepicker-primary .next:hover,
.datepicker.datepicker-primary tfoot tr th:hover {
background: rgba(255, 255, 255, 0.2);
}
.datepicker.datepicker-primary table tr td.active div,
.datepicker.datepicker-primary table tr td.active:hover div,
.datepicker.datepicker-primary table tr td.active.disabled div,
.datepicker.datepicker-primary table tr td.active.disabled:hover div {
background-color: #FFFFFF;
color: #f96332;
}
.datepicker.datepicker-primary table tr td.day:hover div,
.datepicker.datepicker-primary table tr td.day.focused div {
background: rgba(255, 255, 255, 0.2);
}
.datepicker.datepicker-primary table tr td.active:hover div,
.datepicker.datepicker-primary table tr td.active:hover:hover div,
.datepicker.datepicker-primary table tr td.active.disabled:hover div,
.datepicker.datepicker-primary table tr td.active.disabled:hover:hover div,
.datepicker.datepicker-primary table tr td.active:active div,
.datepicker.datepicker-primary table tr td.active:hover:active div,
.datepicker.datepicker-primary table tr td.active.disabled:active div,
.datepicker.datepicker-primary table tr td.active.disabled:hover:active div,
.datepicker.datepicker-primary table tr td.active.active div,
.datepicker.datepicker-primary table tr td.active:hover.active div,
.datepicker.datepicker-primary table tr td.active.disabled.active div,
.datepicker.datepicker-primary table tr td.active.disabled:hover.active div,
.datepicker.datepicker-primary table tr td.active.disabled div,
.datepicker.datepicker-primary table tr td.active:hover.disabled div,
.datepicker.datepicker-primary table tr td.active.disabled.disabled div,
.datepicker.datepicker-primary table tr td.active.disabled:hover.disabled div,
.datepicker.datepicker-primary table tr td.active[disabled] div,
.datepicker.datepicker-primary table tr td.active:hover[disabled] div,
.datepicker.datepicker-primary table tr td.active.disabled[disabled] div,
.datepicker.datepicker-primary table tr td.active.disabled:hover[disabled] div,
.datepicker.datepicker-primary table tr td span.active:hover,
.datepicker.datepicker-primary table tr td span.active:hover:hover,
.datepicker.datepicker-primary table tr td span.active.disabled:hover,
.datepicker.datepicker-primary table tr td span.active.disabled:hover:hover,
.datepicker.datepicker-primary table tr td span.active:active,
.datepicker.datepicker-primary table tr td span.active:hover:active,
.datepicker.datepicker-primary table tr td span.active.disabled:active,
.datepicker.datepicker-primary table tr td span.active.disabled:hover:active,
.datepicker.datepicker-primary table tr td span.active.active,
.datepicker.datepicker-primary table tr td span.active:hover.active,
.datepicker.datepicker-primary table tr td span.active.disabled.active,
.datepicker.datepicker-primary table tr td span.active.disabled:hover.active,
.datepicker.datepicker-primary table tr td span.active.disabled,
.datepicker.datepicker-primary table tr td span.active:hover.disabled,
.datepicker.datepicker-primary table tr td span.active.disabled.disabled,
.datepicker.datepicker-primary table tr td span.active.disabled:hover.disabled,
.datepicker.datepicker-primary table tr td span.active[disabled],
.datepicker.datepicker-primary table tr td span.active:hover[disabled],
.datepicker.datepicker-primary table tr td span.active.disabled[disabled],
.datepicker.datepicker-primary table tr td span.active.disabled:hover[disabled] {
background-color: #FFFFFF;
}
.datepicker.datepicker-primary table tr td span.active:hover,
.datepicker.datepicker-primary table tr td span.active:hover:hover,
.datepicker.datepicker-primary table tr td span.active.disabled:hover,
.datepicker.datepicker-primary table tr td span.active.disabled:hover:hover,
.datepicker.datepicker-primary table tr td span.active:active,
.datepicker.datepicker-primary table tr td span.active:hover:active,
.datepicker.datepicker-primary table tr td span.active.disabled:active,
.datepicker.datepicker-primary table tr td span.active.disabled:hover:active,
.datepicker.datepicker-primary table tr td span.active.active,
.datepicker.datepicker-primary table tr td span.active:hover.active,
.datepicker.datepicker-primary table tr td span.active.disabled.active,
.datepicker.datepicker-primary table tr td span.active.disabled:hover.active,
.datepicker.datepicker-primary table tr td span.active.disabled,
.datepicker.datepicker-primary table tr td span.active:hover.disabled,
.datepicker.datepicker-primary table tr td span.active.disabled.disabled,
.datepicker.datepicker-primary table tr td span.active.disabled:hover.disabled,
.datepicker.datepicker-primary table tr td span.active[disabled],
.datepicker.datepicker-primary table tr td span.active:hover[disabled],
.datepicker.datepicker-primary table tr td span.active.disabled[disabled],
.datepicker.datepicker-primary table tr td span.active.disabled:hover[disabled] {
color: #f96332;
}
.datepicker-inline {
width: 220px;
}
.datepicker.datepicker-rtl {
direction: rtl;
}
.datepicker.datepicker-rtl.dropdown-menu {
left: auto;
}
.datepicker.datepicker-rtl table tr td span {
float: right;
}
.datepicker-dropdown {
top: 0;
left: 0;
}
.datepicker-dropdown:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid transparent;
border-top: 0;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
}
.datepicker-dropdown:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-top: 0;
position: absolute;
}
.datepicker-dropdown.datepicker-orient-left:before {
left: 6px;
}
.datepicker-dropdown.datepicker-orient-left:after {
left: 7px;
}
.datepicker-dropdown.datepicker-orient-right:before {
right: 6px;
}
.datepicker-dropdown.datepicker-orient-right:after {
right: 7px;
}
.datepicker-dropdown.datepicker-orient-bottom:before {
top: -7px;
}
.datepicker-dropdown.datepicker-orient-bottom:after {
top: -6px;
}
.datepicker-dropdown.datepicker-orient-top:before {
bottom: -7px;
border-bottom: 0;
border-top: 7px solid transparent;
}
.datepicker-dropdown.datepicker-orient-top:after {
bottom: -6px;
border-bottom: 0;
border-top: 6px solid #fff;
}
.datepicker table {
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 241px;
max-width: 241px;
}
.datepicker .day div,
.datepicker th {
-webkit-transition: all 300ms ease 0s;
-moz-transition: all 300ms ease 0s;
-o-transition: all 300ms ease 0s;
-ms-transition: all 300ms ease 0s;
transition: all 300ms ease 0s;
text-align: center;
width: 30px;
height: 30px;
line-height: 2.2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 50%;
font-weight: 300;
font-size: 14px;
border: none;
z-index: 1;
position: relative;
cursor: pointer;
}
.datepicker th {
color: #f96332;
}
.table-condensed>tbody>tr>td,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>td,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>thead>tr>th {
padding: 2px;
text-align: center;
cursor: pointer;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
background-color: transparent;
}
.datepicker table tr td.day:hover div,
.datepicker table tr td.day.focused div {
background: #eee;
cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
color: #888888;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
background: none;
color: #888888;
cursor: default;
}
.datepicker table tr td.highlighted {
background: #d9edf7;
border-radius: 0;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
background-color: #fde19a;
background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
border-color: #fdf59a #fdf59a #fbed50;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #000;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
background-color: #fdf59a;
}
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active {
background-color: #fbf069 \9;
}
.datepicker table tr td.today:hover:hover {
color: #000;
}
.datepicker table tr td.today.active:hover {
color: #fff;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
background: #eee;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
background-color: #f3d17a;
background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: linear-gradient(to bottom, #f3c17a, #f3e97a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
border-color: #f3e97a #f3e97a #edde34;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled] {
background-color: #f3e97a;
}
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active {
background-color: #efe24b \9;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
background-color: #9e9e9e;
background-image: -moz-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -ms-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
background-image: -webkit-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -o-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: linear-gradient(to bottom, #b3b3b3, #808080);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
border-color: #808080 #808080 #595959;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] {
background-color: #808080;
}
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
background-color: #666666 \9;
}
.datepicker table tr td.active div,
.datepicker table tr td.active:hover div,
.datepicker table tr td.active.disabled div,
.datepicker table tr td.active.disabled:hover div {
background-color: #f96332;
color: #FFFFFF;
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
}
.datepicker table tr td.active:hover div,
.datepicker table tr td.active:hover:hover div,
.datepicker table tr td.active.disabled:hover div,
.datepicker table tr td.active.disabled:hover:hover div,
.datepicker table tr td.active:active div,
.datepicker table tr td.active:hover:active div,
.datepicker table tr td.active.disabled:active div,
.datepicker table tr td.active.disabled:hover:active div,
.datepicker table tr td.active.active div,
.datepicker table tr td.active:hover.active div,
.datepicker table tr td.active.disabled.active div,
.datepicker table tr td.active.disabled:hover.active div,
.datepicker table tr td.active.disabled div,
.datepicker table tr td.active:hover.disabled div,
.datepicker table tr td.active.disabled.disabled div,
.datepicker table tr td.active.disabled:hover.disabled div,
.datepicker table tr td.active[disabled] div,
.datepicker table tr td.active:hover[disabled] div,
.datepicker table tr td.active.disabled[disabled] div,
.datepicker table tr td.active.disabled:hover[disabled] div {
background-color: #f96332;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span {
display: block;
width: 41px;
height: 41px;
line-height: 41px;
float: left;
margin: 1%;
font-size: 14px;
cursor: pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
background: #eee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
background: none;
color: #888888;
cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
color: #fff;
background-color: #f96332;
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
background-color: #f96332;
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
color: #888888;
}
.datepicker .datepicker-switch {
width: auto;
border-radius: 0.1875rem;
}
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
cursor: pointer;
}
.datepicker .prev,
.datepicker .next {
width: 35px;
height: 35px;
}
.datepicker i {
position: relative;
top: 2px;
}
.datepicker .prev i {
left: -1px;
}
.datepicker .next i {
right: -1px;
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
background: #eee;
}
.datepicker .prev.disabled,
.datepicker .next.disabled {
visibility: hidden;
}
.datepicker .cw {
font-size: 10px;
width: 12px;
padding: 0 2px 0 5px;
vertical-align: middle;
}
.dropdown-menu.open,
.dropdown.show .dropdown-menu {
opacity: 1;
filter: alpha(opacity=100);
visibility: visible;
transform: translateZ(0) !important;
}
.popover {
font-size: 14px;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
border: none;
line-height: 1.7;
max-width: 240px;
}
.popover.bs-popover-top .arrow:before,
.popover.bs-popover-left .arrow:before,
.popover.bs-popover-right .arrow:before,
.popover.bs-popover-bottom .arrow:before {
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
.popover .popover-header {
color: rgba(182, 182, 182, 0.6);
font-size: 14px;
text-transform: capitalize;
font-weight: 600;
margin: 0;
margin-top: 5px;
border: none;
background-color: transparent;
}
.popover:before {
display: none;
}
.popover.bs-tether-element-attached-top:after {
border-bottom-color: #FFFFFF;
top: -9px;
}
.popover.popover-primary {
background-color: #f96332;
}
.popover.popover-primary .popover-body {
color: #FFFFFF;
}
.popover.popover-primary.bs-popover-right .arrow:after {
border-right-color: #f96332;
}
.popover.popover-primary.bs-popover-top .arrow:after {
border-top-color: #f96332;
}
.popover.popover-primary.bs-popover-bottom .arrow:after {
border-bottom-color: #f96332;
}
.popover.popover-primary.bs-popover-left .arrow:after {
border-left-color: #f96332;
}
.popover.popover-primary .popover-header {
color: #FFFFFF;
opacity: .6;
}
.tooltip.bs-tooltip-right .arrow:before {
border-right-color: #FFFFFF;
}
.tooltip.bs-tooltip-top .arrow:before {
border-top-color: #FFFFFF;
}
.tooltip.bs-tooltip-bottom .arrow:before {
border-bottom-color: #FFFFFF;
}
.tooltip.bs-tooltip-left .arrow:before {
border-left-color: #FFFFFF;
}
.tooltip-inner {
padding: 0.5rem 0.7rem;
min-width: 130px;
background-color: #FFFFFF;
font-size: 14px;
color: inherit;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
}
.btn {
border-width: 2px;
font-weight: 400;
font-size: 0.8571em;
line-height: 1.35em;
margin: 10px 1px;
border: none;
border-radius: 0.1875rem;
padding: 11px 22px;
cursor: pointer;
background-color: #888888;
color: #FFFFFF;
}
.btn:hover,
.btn:focus,
.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled):active:focus,
.btn:active:hover {
background-color: #979797;
color: #FFFFFF;
box-shadow: none;
}
.btn:hover {
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.17);
}
.btn:disabled,
.btn:disabled:hover,
.btn:disabled:focus,
.btn:disabled:active,
.btn[disabled],
.btn[disabled]:hover,
.btn[disabled]:focus,
.btn[disabled]:active {
background-color: #888888;
border-color: #888888;
}
.btn.btn-link {
color: #888888;
}
.btn.btn-link:hover,
.btn.btn-link:focus,
.btn.btn-link:not(:disabled):not(.disabled):active,
.btn.btn-link:not(:disabled):not(.disabled):active:focus,
.btn.btn-link:active:hover {
background-color: transparent;
color: #979797;
text-decoration: none;
box-shadow: none;
}
.btn:hover,
.btn:focus {
opacity: 1;
filter: alpha(opacity=100);
outline: 0 !important;
}
.btn:active {
-webkit-box-shadow: none;
box-shadow: none;
outline: 0 !important;
}
.btn:not(.btn-icon) .now-ui-icons {
position: relative;
top: 1px;
}
.btn-primary {
background-color: #f96332;
color: #FFFFFF;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:active:hover {
background-color: #fa7a50;
color: #FFFFFF;
box-shadow: none;
}
.btn-primary:hover {
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.17);
}
.btn-primary:disabled,
.btn-primary:disabled:hover,
.btn-primary:disabled:focus,
.btn-primary:disabled:active,
.btn-primary[disabled],
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:active {
background-color: #f96332;
border-color: #f96332;
}
.btn-primary.btn-link {
color: #f96332;
}
.btn-primary.btn-link:hover,
.btn-primary.btn-link:focus,
.btn-primary.btn-link:not(:disabled):not(.disabled):active,
.btn-primary.btn-link:not(:disabled):not(.disabled):active:focus,
.btn-primary.btn-link:active:hover {
background-color: transparent;
color: #fa7a50;
text-decoration: none;
box-shadow: none;
}
.btn-warning {
background-color: #FFB236;
color: #FFFFFF;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:active:hover {
background-color: #ffbe55;
color: #FFFFFF;
box-shadow: none;
}
.btn-warning:hover {
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.17);
}
.btn-warning:disabled,
.btn-warning:disabled:hover,
.btn-warning:disabled:focus,
.btn-warning:disabled:active,
.btn-warning[disabled],
.btn-warning[disabled]:hover,
.btn-warning[disabled]:focus,
.btn-warning[disabled]:active {
background-color: #FFB236;
border-color: #FFB236;
}
.btn-warning.btn-link {
color: #FFB236;
}
.btn-warning.btn-link:hover,
.btn-warning.btn-link:focus,
.btn-warning.btn-link:not(:disabled):not(.disabled):active,
.btn-warning.btn-link:not(:disabled):not(.disabled):active:focus,
.btn-warning.btn-link:active:hover {
background-color: transparent;
color: #ffbe55;
text-decoration: none;
box-shadow: none;
}
.btn-danger {
background-color: #FF3636;
color: #FFFFFF;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger:active:hover {
background-color: #ff5555;
color: #FFFFFF;
box-shadow: none;
}
.btn-danger:hover {
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.17);
}
.btn-danger:disabled,
.btn-danger:disabled:hover,
.btn-danger:disabled:focus,
.btn-danger:disabled:active,
.btn-danger[disabled],
.btn-danger[disabled]:hover,
.btn-danger[disabled]:focus,
.btn-danger[disabled]:active {
background-color: #FF3636;
border-color: #FF3636;
}
.btn-danger.btn-link {
color: #FF3636;
}
.btn-danger.btn-link:hover,
.btn-danger.btn-link:focus,
.btn-danger.btn-link:not(:disabled):not(.disabled):active,
.btn-danger.btn-link:not(:disabled):not(.disabled):active:focus,
.btn-danger.btn-link:active:hover {
background-color: transparent;
color: #ff5555;
text-decoration: none;
box-shadow: none;
}
.btn-neutral {
background-color: #FFFFFF;
color: #f96332;
}
.btn-neutral:hover,
.btn-neutral:focus,
.btn-neutral:not(:disabled):not(.disabled):active,
.btn-neutral:not(:disabled):not(.disabled):active:focus,
.btn-neutral:active:hover {
background-color: #FFFFFF;
color: #FFFFFF;
box-shadow: none;
}
.btn-neutral:hover {
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.17);
}
.btn-neutral:disabled,
.btn-neutral:disabled:hover,
.btn-neutral:disabled:focus,
.btn-neutral:disabled:active,
.btn-neutral[disabled],
.btn-neutral[disabled]:hover,
.btn-neutral[disabled]:focus,
.btn-neutral[disabled]:active {
background-color: #FFFFFF;
border-color: #FFFFFF;
}
.btn-neutral.btn-danger {
color: #FF3636;
}
.btn-neutral.btn-danger:hover,
.btn-neutral.btn-danger:focus,
.btn-neutral.btn-danger:active {
color: #ff5555;
}
.btn-neutral.btn-primary {
color: #f96332;
}
.btn-neutral.btn-primary:hover,
.btn-neutral.btn-primary:focus,
.btn-neutral.btn-primary:active {
color: #fa7a50;
}
.btn-neutral.btn-warning {
color: #FFB236;
}
.btn-neutral.btn-warning:hover,
.btn-neutral.btn-warning:focus,
.btn-neutral.btn-warning:active {
color: #ffbe55;
}
.btn-neutral.btn-default {
color: #888888;
}
.btn-neutral.btn-default:hover,
.btn-neutral.btn-default:focus,
.btn-neutral.btn-default:active {
color: #979797;
}
.btn-neutral:hover,
.btn-neutral:focus,
.btn-neutral:not(:disabled):not(.disabled):active,
.btn-neutral:not(:disabled):not(.disabled):active:focus,
.btn-neutral:active:hover {
background-color: #FFFFFF;
color: #fa7a50;
box-shadow: none;
}
.btn-neutral:hover,
.btn-neutral:focus {
color: #fa7a50;
}
.btn-neutral:hover:not(.nav-link),
.btn-neutral:focus:not(.nav-link) {
box-shadow: none;
}
.btn-neutral.btn-link {
color: #FFFFFF;
}
.btn-neutral.btn-link:hover,
.btn-neutral.btn-link:focus,
.btn-neutral.btn-link:not(:disabled):not(.disabled):active,
.btn-neutral.btn-link:not(:disabled):not(.disabled):active:focus,
.btn-neutral.btn-link:active:hover {
background-color: transparent;
color: #FFFFFF;
text-decoration: none;
box-shadow: none;
}
.btn-link:disabled,
.btn-link:disabled:hover,
.btn-link:disabled:focus,
.btn-link:disabled:active,
.btn-link[disabled],
.btn-link[disabled]:hover,
.btn-link[disabled]:focus,
.btn-link[disabled]:active {
background-color: transparent;
}
.btn-link {
border: 0;
padding: 0.5rem 0.7rem;
background-color: transparent;
}
.form-control::-moz-placeholder {
color: #888888;
opacity: 0.8;
filter: alpha(opacity=80);
}
.form-control:-moz-placeholder {
color: #888888;
opacity: 0.8;
filter: alpha(opacity=80);
}
.form-control::-webkit-input-placeholder {
color: #888888;
opacity: 0.8;
filter: alpha(opacity=80);
}
.form-control:-ms-input-placeholder {
color: #888888;
opacity: 0.8;
filter: alpha(opacity=80);
}
.form-control {
background-color: transparent;
border: 1px solid #E3E3E3;
border-radius: 30px;
color: #2c2c2c;
line-height: normal;
font-size: 0.8571em;
-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-webkit-box-shadow: none;
box-shadow: none;
}
.form-control:focus {
border: 1px solid #f96332;
-webkit-box-shadow: none;
box-shadow: none;
outline: 0 !important;
color: #2c2c2c;
}
.form-group .form-control {
padding: 10px 18px 10px 18px;
}
.form-group {
margin-bottom: 10px;
position: relative;
}
.form-control[disabled],
.form-control[readonly] {
background-color: #E3E3E3;
color: #888888;
cursor: not-allowed;
}
.form-group input[type=file] {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
button,
input {
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
h3,
h4 {
font-weight: 400;
}
small {
font-size: 60%;
}
a {
color: #f96332;
}
a:hover,
a:focus {
color: #f96332;
}
h3,
.h3 {
font-size: 1.825em;
margin-bottom: 30px;
line-height: 1.4em;
}
h4,
.h4 {
font-size: 1.5em;
line-height: 1.45em;
margin-top: 30px;
margin-bottom: 15px;
}
p {
line-height: 1.61em;
font-weight: 300;
font-size: 1.2em;
}
.title {
font-weight: 700;
padding-top: 30px;
}
.title.title-up {
text-transform: uppercase;
}
.title.title-up a {
color: #2c2c2c;
text-decoration: none;
}
body {
color: #2c2c2c;
font-size: 14px;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
overflow-x: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
[data-toggle="collapse"][data-parent="#accordion"] i {
-webkit-transition: transform 150ms ease 0s;
-moz-transition: transform 150ms ease 0s;
-o-transition: transform 150ms ease 0s;
-ms-transition: all 150ms ease 0s;
transition: transform 150ms ease 0s;
}
[data-toggle="collapse"][data-parent="#accordion"][aria-expanded="true"] i {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.title-up {
text-transform: uppercase;
}
.now-ui-icons {
display: inline-block;
font: normal normal normal 14px/1 'Nucleo Outline';
font-size: inherit;
speak: none;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@-webkit-keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes nc-icon-spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.now-ui-icons.ui-1_simple-remove:before {
content: "\ea53";
}
.now-ui-icons.users_circle-08:before {
content: "\ea23";
}
.now-ui-icons.arrows-1_minimal-left:before {
content: "\ea3a";
}
.now-ui-icons.arrows-1_minimal-right:before {
content: "\ea3b";
}
.popover {
font-size: 14px;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
border: none;
line-height: 1.7;
max-width: 240px;
}
.popover:before {
display: none;
}
.modal-content {
border-radius: 0.1875rem;
border: none;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.5);
}
.modal-content .modal-header {
border-bottom: none;
padding-top: 24px;
padding-right: 24px;
padding-bottom: 0;
padding-left: 24px;
}
.modal-content .modal-header button {
position: absolute;
right: 27px;
top: 30px;
outline: 0;
}
.modal-content .modal-header .title {
margin-top: 5px;
margin-bottom: 0;
}
.modal-content .modal-body {
padding-top: 24px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
line-height: 1.9;
}
.modal-content .modal-footer {
border-top: none;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.modal-content .modal-footer button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
}
.modal-content .modal-body+.modal-footer {
padding-top: 0;
}
.modal.modal-mini p {
text-align: center;
}
.modal.modal-mini .modal-dialog {
max-width: 255px;
margin: 0 auto;
}
.modal.modal-mini .modal-profile {
width: 70px;
height: 70px;
background-color: #FFFFFF;
border-radius: 50%;
text-align: center;
line-height: 5.7;
box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
}
.modal.modal-mini .modal-profile i {
color: #f96332;
font-size: 21px;
}
.modal.modal-mini .modal-profile[class*="modal-profile-"] i {
color: #FFFFFF;
}
.modal.modal-mini .modal-footer button {
text-transform: uppercase;
}
.modal.modal-mini .modal-footer button:first-child {
opacity: .5;
}
.modal.modal-primary .modal-content {
background-color: #f96332;
color: #FFFFFF;
}
.modal.modal-primary .modal-header .close {
color: #FFFFFF;
}
.modal.show.modal-mini .modal-dialog {
-webkit-transform: translate(0, 30%);
-o-transform: translate(0, 30%);
transform: translate(0, 30%);
}
.modal .modal-header .close {
color: #FF3636;
text-shadow: none;
}
.modal .modal-header .close:hover,
.modal .modal-header .close:focus {
opacity: 1;
}
.section {
padding: 70px 0;
position: relative;
background: #FFFFFF;
}
[data-background-color="orange"] {
background-color: #e95e38;
}
[data-background-color="black"] {
background-color: #2c2c2c;
}
[data-background-color]:not([data-background-color="gray"]) {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) .title,
[data-background-color]:not([data-background-color="gray"]) p {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) h3,
[data-background-color]:not([data-background-color="gray"]) h4,
[data-background-color]:not([data-background-color="gray"]) a:not(.btn):not(.dropdown-item) {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) .form-control::-moz-placeholder {
color: #ebebeb;
opacity: 1;
filter: alpha(opacity=100);
}
[data-background-color]:not([data-background-color="gray"]) .form-control:-moz-placeholder {
color: #ebebeb;
opacity: 1;
filter: alpha(opacity=100);
}
[data-background-color]:not([data-background-color="gray"]) .form-control::-webkit-input-placeholder {
color: #ebebeb;
opacity: 1;
filter: alpha(opacity=100);
}
[data-background-color]:not([data-background-color="gray"]) .form-control:-ms-input-placeholder {
color: #ebebeb;
opacity: 1;
filter: alpha(opacity=100);
}
[data-background-color]:not([data-background-color="gray"]) .form-control {
border-color: rgba(255, 255, 255, 0.5);
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) .form-control:focus {
border-color: #FFFFFF;
background-color: transparent;
color: #FFFFFF;
}
#javascriptComponents .btn {
margin: 0 0px 10px;
}
@media (max-width: 768px) {
.btn {
margin-bottom: 10px;
}
}
#javascriptComponents {
padding-bottom: 0;
}
.section-javascript .title {
margin-bottom: 0;
}
footer {
margin-top: 50px;
color: #555;
background: #fff;
padding: 25px;
font-weight: 300;
background: #f7f7f7;
}
.footer p {
margin-bottom: 0;
}
footer p a {
color: #555;
font-weight: 400;
}
footer p a:hover {
color: #e86c42;
}
$(document).ready(function() {
$('.date-picker').each(function() {
$(this).datepicker({
templates: {
leftArrow: '<i class="now-ui-icons arrows-1_minimal-left"></i>',
rightArrow: '<i class="now-ui-icons arrows-1_minimal-right"></i>'
}
}).on('show', function() {
$('.datepicker').addClass('open');
datepicker_color = $(this).data('datepicker-color');
if (datepicker_color.length != 0) {
$('.datepicker').addClass('datepicker-' + datepicker_color + '');
}
}).on('hide', function() {
$('.datepicker').removeClass('open');
});
});
// Activate the Tooltips
$('[data-toggle="tooltip"], [rel="tooltip"]').tooltip();
// Activate Popovers and set color for popovers
$('[data-toggle="popover"]').each(function() {
color_class = $(this).data('color');
$(this).popover({
template: '<div class="popover popover-' + color_class + '" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});
});
});
