﻿.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
.input-group .form-control2:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color:#222;
}
.input-group-addon, .input-group-btn, .input-group .form-control2 {
    display: table-cell;
}
.input-group .form-control2 {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
    height:50px;
    background:none;
}
.form-control2 {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #fff;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}
.input-group.date .input-group-addon {
    cursor: pointer;
}
.input-group-addon:last-child {
    border-left: 0;
}
.input-group .form-control2:last-child, .input-group-addon:last-child, .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:first-child>.btn-group:not(:first-child)>.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.input-group-addon, .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.input-group-addon, .input-group-btn, .input-group .form-control2 {
    display: table-cell;
}
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-time:before {
    content: url("../images/hour-party.webp");
  
}
:before, :after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.input-group.date .input-group-addon {
    cursor: pointer;
}
.formrow {
    margin-bottom: 10px;
}
.textarea
{
    min-height:100px!important;    
}

/* Time picker — white boxes, black arrows / AM-PM text */
.form-control2 {
    color: #333 !important;
    background-color: #fff !important;
}

.bootstrap-datetimepicker-widget {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    padding: 8px !important;
}

.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    color: #000 !important;
    background: transparent !important;
}

html body .bootstrap-datetimepicker-widget .btn,
html body .bootstrap-datetimepicker-widget .btn.btn-primary,
html body .bootstrap-datetimepicker-widget a.btn,
html body .bootstrap-datetimepicker-widget button.btn,
html body .bootstrap-datetimepicker-widget button[data-action],
html body .bootstrap-datetimepicker-widget a[data-action],
html body .bootstrap-datetimepicker-widget table td .btn,
html body .bootstrap-datetimepicker-widget table td a {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    min-width: 38px;
    min-height: 28px;
    line-height: 1.2 !important;
}

html body .bootstrap-datetimepicker-widget .btn:hover,
html body .bootstrap-datetimepicker-widget .btn:focus,
html body .bootstrap-datetimepicker-widget .btn:active,
html body .bootstrap-datetimepicker-widget .btn.btn-primary:hover,
html body .bootstrap-datetimepicker-widget .btn.btn-primary:focus,
html body .bootstrap-datetimepicker-widget .btn.btn-primary:not(:disabled):not(.disabled):active,
html body .bootstrap-datetimepicker-widget button[data-action]:hover,
html body .bootstrap-datetimepicker-widget a[data-action]:hover {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
    color: #000 !important;
    border-color: #bbb !important;
    box-shadow: none !important;
}

html body .bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"],
html body .bootstrap-datetimepicker-widget button.btn-primary[data-action="togglePeriod"] {
    background: #fff !important;
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
    font-weight: 600;
}

html body .bootstrap-datetimepicker-widget .btn .fas,
html body .bootstrap-datetimepicker-widget .btn .fa,
html body .bootstrap-datetimepicker-widget .btn .glyphicon,
html body .bootstrap-datetimepicker-widget .fas,
html body .bootstrap-datetimepicker-widget .fa,
html body .bootstrap-datetimepicker-widget .glyphicon {
    color: #000 !important;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
    background-color: #eee !important;
    color: #000 !important;
    text-shadow: none !important;
}

.bootstrap-datetimepicker-widget .glyphicon-chevron-up:before {
    content: "▲";
    font-family: inherit !important;
    font-size: 11px;
    color: #000;
}

.bootstrap-datetimepicker-widget .glyphicon-chevron-down:before {
    content: "▼";
    font-family: inherit !important;
    font-size: 11px;
    color: #000;
}
