body {
 
  font-family: "Open Sans", Helvetica, Roboto, Arial, sans-serif;
    margin:0!important;
  }

.row.expanded .row .row {
  margin-right: -0.9375rem;
  margin-left: -0.9375rem;
}



h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: "Open Sans", Helvetica, Roboto, Arial, sans-serif;}

a, .link-to-modal {color:#1C65E3;}
a:hover , .link-to-modal:hover {color:#0a64ff;}


/*BUTTONS*/

.button{
    background-color:#000000;
    border-radius: 7px;
}


.button.secondary{
    background-color: #efefef;
    color: #000000;
}
.button.secondary:focus {background-color:#dcdcdc; color: #000000;}


.button:hover{
    background-color:#1d1d1d;
    transition: ease-in-out .2s;
    box-shadow: 0px 3px 6px #dbd3d3;
}

.button.secondary:hover{
    background-color: #e4e4e4;
    color: #383838;
    box-shadow: none!important;
}
.button:focus {
   background-color: #737373;
    color: #ffffff;
    box-shadow:none;
}
.close-button {font-size: 1.3em;}
/*HEADER*/
.logo-bar-header {padding:0;}
.logo-bar {
    background: #fff;
    box-shadow: 0px 4px 6px #e2e2e2;
}
.logo-bar .large-11 {padding:10px 0px;}
.logo-bar h3 {margin-bottom:0;}
img.logo {width:120px;padding: 10px;}


/*ACTION ERRORS*/
.alert-box.alert {    background: #cc4b37;
    padding: 1em;
    color: white;}

.alert-box.success {    background: #5c8d4f;
    padding: 1em;
    color: white;}

ul.alert-box {list-style-type: none;margin-left:0;}
/*FOOTER*/

.footer {
    background:#383838; 
    color:#fff!important;  
    padding: 3em 0 0 0;
}

/*CALLOUTS*/

.callout.primary {
    background-color: #fff;
    color: #0a0a0a;
    border-radius: 15px;
    border: 1px solid #d9d9d9;
    padding: 1.5em 2.25em;
    box-shadow:0px 4px 6px #e2e2e2;
}
.callout.secondary {border:none; background:#f2f2f2;}
/*SPINNER*/
#spinner-div {
  position: fixed!important;
  display: none;
  width: 100%!important;
  height: 100%!important;
  top: 0!important;
    padding-top: 35vh;
  left: 0!important;
  text-align: center!important;
  background-color: rgba(255, 255, 255, 0.8)!important;
  z-index: 2!important;
}

/*WT PAYMENTS CHECKOUT*/
.checkout-wrapper {background: #e0e0e0;}
.checkout-main {    background: #f9f9f9;
    max-width: 70em;
    margin: 3em auto;
    padding: 2em 0em;
    border-radius: 15px;
    box-shadow: 0px 4px 6px #9e9e9e;}
img.cc-logo {padding-top: 20px;}

.checkout-logo-bar h5 {margin-bottom:0;font-weight:700;font-weight: 600;    padding-top: 4px;}

/*ADMIN*/
.main-content .court-payments.admin {padding: 2%!important;}
img.admin-logo {width:65px;}
.admin .logo-bar {padding: 5px 0px;}
/*FORMS*/
[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea, input {
    
    border: 1px solid #cacaca;
    border-radius: 5px;
    background-color: #fefefe;
    box-shadow: none;
    height:auto;
    font-weight: 500;
}

select {font-weight: 500;}

label {
    font-weight: 700;
    font-size: 1rem;
}
/*
footer {
    background: black;
    min-height: 100px;
}
*/


/* CLOUD APPS GLOBAL */

.apps {
    background:#FBFBFB;
    min-height: 100vh;
}


/* COURT PAYMENTS ONLY */
.main-content .court-payments {padding: 6vh 1em 13vh 1em;}
.court-select a h3, .court-select a p {color:#000;}
.contact-info {margin-top: 2em;}
.search-results .row,  .row.confirmation {    padding: 0.5em 0;
    border-bottom: 1px solid #dedede;}
/*.row.confirmation {font-size: 1.25rem;}*/

.search-results .button {margin-top: 1.5em;}
.search-results .input-group {margin-bottom: 0;}

/*ADMIN*/
.button.cancel, .button.remove {padding-top:.8rem; margin-right:10px;}
.button.cancel:before {font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f05e";    color: #de6363;
    padding-right: 5px; ;}
.button.remove:before {font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f00d";    color: #de6363;
    padding-right: 5px;}

/*Admin Table*/
table.dataTable thead>tr>th.sorting_asc:before {opacity: .125!important;}
table.hover tbody tr:hover , table.hover:not(.unstriped) tr:nth-of-type(even):hover {
    background-color: #f9f9f9;
}
table {border-spacing:0!important;}
thead {background: #383838!important;}
table.dataTable thead tr, table.hover thead tr:hover {background-color: #4d4d4d;
    color: #fff;}

table.hover thead tr th:hover {background: #393939;}

th.sorting_desc_disabled:hover, th.sorting_asc_disabled:hover {background:inherit;}

table.dataTable thead>tr>th.sorting:before, table.dataTable thead>tr>th.sorting:after, table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_asc:after, table.dataTable thead>tr>th.sorting_desc:before, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>th.sorting_asc_disabled:before, table.dataTable thead>tr>th.sorting_asc_disabled:after, table.dataTable thead>tr>th.sorting_desc_disabled:before, table.dataTable thead>tr>th.sorting_desc_disabled:after, table.dataTable thead>tr>td.sorting:before, table.dataTable thead>tr>td.sorting:after, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_asc:after, table.dataTable thead>tr>td.sorting_desc:before, table.dataTable thead>tr>td.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc_disabled:before, table.dataTable thead>tr>td.sorting_asc_disabled:after, table.dataTable thead>tr>td.sorting_desc_disabled:before, table.dataTable thead>tr>td.sorting_desc_disabled:after {
  bottom:53%!important;
    opacity: .5!important;
    left: 10px!important;
    right:0!important;
    line-height: 9px;
    font-size: .65em!important;
    color: #fff!important;}

table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting_asc_disabled, table.dataTable thead>tr>th.sorting_desc_disabled, table.dataTable thead>tr>td.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting_asc_disabled, table.dataTable thead>tr>td.sorting_desc_disabled {
  
    padding: 10px 26px!important;
}
table.unstriped tbody, table.unstriped tbody tr {
    background-color: #fff;
}
.has-tip {border-bottom:none;}
/*date picker*/
#datepicker {
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), 0 6px 6px rgba(0, 0, 0, 0.13);
}
#datepicker button {
  background-color: #f2efed;
  color: #5c575e;
}
.datepicker.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  color: #333;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  line-height: 18px;
}
.datepicker.dropdown-menu th,
.datepicker.dropdown-menu td {
  padding: 4px 5px;
}
.datepicker {
  display: none;
  position: absolute;
  padding: 4px;
  margin-top: 1px;
  direction: ltr;
}

.datepicker-inline {
  width: 220px;
}
.datepicker-rtl {
  direction: rtl;
}
.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 #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -7px;
  left: 6px;
}
.datepicker-dropdown:after {
  content: "";
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  top: -6px;
  left: 7px;
}
.datepicker > div {
  display: none;
}

.datepicker.days div.datepicker-days {
  display: block;
}
.datepicker.months div.datepicker-months {
  display: block;
}
.datepicker.years div.datepicker-years {
  display: block;
}
.datepicker table {
  border: 0;
  margin: 0;
}
.datepicker td,
.datepicker th {
  text-align: center;
  width: 20px;
  height: 20px;
  border: 0;
  font-size: 12px;
  padding: 4px 8px;
  background: #fff;
  cursor: pointer;
}
.datepicker td.active.day,
.datepicker th.active.day {
  background: #cbcbcb;
}
.datepicker td.active.year,
.datepicker th.active.year {
  background: #cbcbcb;
}
.datepicker td span.active,
.datepicker th span.active {
  background: #cbcbcb;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
  background-color: transparent;
}
.datepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
}
.datepicker th.date-switch {
  width: 145px;
}
.datepicker thead tr:first-child th,
.datepicker tfoot tr:first-child th {
  cursor: pointer;
}
.datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle;
}
.datepicker thead tr:first-child th.cw {
  cursor: default;
  background-color: transparent;
}
.datepicker-dropdown::before,
.datepicker-dropdown::after {
  display: none;
}
.datepicker-close {
  position: absolute;
  top: -30px;
  right: 0;
  width: 15px;
  height: 30px;
  padding: 0;
  display: none;
}
.datepicker td.old,
.datepicker td.new {
  color: #999;
}
.datepicker td.day.disabled {
  color: #eee;
}

.list-unstyled .datepicker {
  display: block;
  position: relative;
}
.list-unstyled .datepicker > div {
  display: block;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
  position: absolute;
  background-color: #ffffff !important;
  z-index: 1000;
}
.bootstrap-datetimepicker-widget.dropdown-menu ul.list-unstyled {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/*DatePicker*/
.ui-datepicker {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 34px -8px rgba(0, 0, 0, 0.75);
  padding: 0.65rem 0.65rem 0;
}
.ui-datepicker select {
  width: auto;
}
.ui-datepicker-title {
  text-align: center;
}
a.ui-datepicker-prev {
  display: block;
  float: left;
  padding: 0.25rem 0 0.25rem 0.5rem;
}
a.ui-datepicker-prev:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f104";
  color: #5c575e;
  padding-right: 0.25em;
}
a.ui-datepicker-next {
  display: block;
  float: right;
  padding: 0.25rem 0.5rem 0.25rem 0;
}
a.ui-datepicker-next:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f105";
  color: #5c575e;
  padding-left: 0.25em;
}


@media print {
    .row {
    max-width: 95%;}
    .footer {display:none;}
}

@media only screen and (max-width: 600px) {
  img.logo {
      width: 75px;}
    .main-content .court-payments {
    padding:5% 5% 25% 5%!important;
}
    .special-instructions {font-size:.9em;}
    
    .contact-info {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: .8em;
}
    
    .callout.primary
    {padding: 1em!important; }
    
    .search-results {
            font-size: .9em!important;
    }
    .search-results .row.collapse , .row.confirmation {margin-left:5px!important; margin-right:5px!important;}
}