/* BASE */
:root {
 /* Site Colors are HSL values */
 --siteColor1: 193, 71%, 22%; /* Dark Teal */
 --siteColor2: 42, 82%, 55%; /* Golden Yellow */
 --siteColor3: 202, 8%, 20%; /* Dark Gray */
 --siteColor4: 0, 0%, 80%; /* Light Gray */
 --siteColor5: 192, 39%, 44%; /* Teal */
 --siteColor6: 179, 48%, 60%; /* Light Turquoise */
}

/* Dark Teal */
.site-color-1, .site-color-1-hover:hover { color: hsl(var(--siteColor1)) !important; }
.site-color-1-bg, .site-color-1-bg-hover:hover { background-color: hsl(var(--siteColor1)) !important; }
/* Golden Yellow */
.site-color-2, .site-color-2-hover:hover { color: hsl(var(--siteColor2)) !important; }
.site-color-2-bg, .site-color-2-bg-hover:hover { background-color: hsl(var(--siteColor2)) !important; }
/* Dark Gray */
.site-color-3, .site-color-3-hover:hover { color: hsl(var(--siteColor3)) !important; }
.site-color-3-bg, .site-color-3-bg-hover:hover { background-color: hsl(var(--siteColor3)) !important; }
/* Light Gray */
.site-color-4, .site-color-4-hover:hover { color: hsl(var(--siteColor4)) !important; }
.site-color-4-bg, .site-color-4-bg-hover:hover { background-color: hsl(var(--siteColor4)) !important; }
/* Teal */
.site-color-5, .site-color-5-hover:hover { color: hsl(var(--siteColor5)) !important; }
.site-color-5-bg, .site-color-5-bg-hover:hover { background-color: hsl(var(--siteColor5)) !important; }
/* Light Turquoise */
.site-color-6, .site-color-6-hover:hover { color: hsl(var(--siteColor6)) !important; }
.site-color-6-bg, .site-color-6-bg-hover:hover { background-color: hsl(var(--siteColor6)) !important; }

.text-white, .text-white:hover { color: #fff !important; }
.text-black, .text-black:hover { color: #000 !important; }

.hidden {display: none;}
input[type=text], input[type=email], input[type=password], textarea {width: 100%; max-width: 100%;}

.treeview .app-menu__item-icnd[data-toggle='treeview'] {background: #fff; border-color: var(--primary); color: #333;}

.table th, .table td { padding: 10px 5px; }

/* .app-content > .container { width: 100%; max-width: 800px; } */

.card { width: 100%; }
.card-header:after {content: ''; display: table; clear: both;}

.form-group { margin-bottom: 20px; /* padding-bottom: 20px; border-bottom: 1px solid #f3f3f3; */ }
.form-group-half { display: inline-block; vertical-align: bottom; width: 46%; margin-right: -4px; }
.form-group-divider { display: inline-block; vertical-align: bottom; width: 8%; margin-right: -4px; padding: 0 2px; text-align: center; line-height: 2.75; }

.counter { padding: 10px 15px; }
.counter:nth-child(even) { background: #E5E5E5; }
.count-btn { outline: none; display: inline-block; vertical-align: top; width: 50px; height: 50px; padding: 10px; border: none; font-size: 20px; color: #fff; text-align: center; }
.count-btn.disabled { background: #ccc; }
.minus-btn { background: #a80f0f; }
.plus-btn { background: #0f7421; }
.count { outline: none; display: inline-block; vertical-align: top; width: 100px !important; height: 50px; padding: 10px; font-size: 20px; text-align: center; }
.counter label { display: inline-block; padding: 15px 0 0 10px;; font-family: sans-serif; font-size: 20px; }

.form-group .length-input { display: inline-block; vertical-align: middle; width: 100px; max-width: 100%; }
.form-group .length-input-label { display: inline-block; vertical-align: middle; width: 300px; max-width: 100%; }
.extra-wrap .form-group { margin-bottom: 10px; padding: 10px 15px; }
.extra-wrap .form-group:nth-child(odd) { background: #E5E5E5; }

.click-to-copy { cursor: pointer; }

/* SORTABLE ELEMENTS */
#sort-list {padding: 0;}
#sort-list > li {list-style: none;}
#sort-list td {vertical-align: middle;}

/* FORMS */
.edit-form .datepicker {width: 200px; max-width: 100%;}
.edit-form textarea {min-height: 100px;}

/* TINY MCE */
.mce-tinymce {width: 100% !important;}

/* UPLOADED THUMBNAIL IMAGES */
.thumbnail-group {margin-bottom: 0; padding: 0;}
.thumbnail-group > li {list-style: none; min-width: 150px; margin-bottom: 15px;}
.thumbnail-group .thumbnail-wrap {padding: 5px; border: 1px solid rgba(255,255,255,0.75); border-radius: 3px;}
.thumbnail-group .thumbnail-img {display: block; width: 100%; height: auto;}
.thumbnail-group .btn {display: block; margin-top: 7px;}

/* MULTI UPLOAD GALLERY */
.multi-upload-form .template-upload.in, .multi-upload-form .template-download.in {opacity: 1;}
.form-multi-group .thumbnail-wrap hr {margin: 10px 30px; border-color: #fff;}


/* SWEET ALERT */
.swal-icon { margin: 15px auto !important; }
.swal-footer { margin: 0 !important; padding: 15px 10px; }

/* DATEPICKER INPUTS */
.datepicker-wrap {cursor: pointer; display: block; position: relative; background: #fff;}
.datepicker-wrap:after {content: "\f133"; display: block; position: absolute; top: 7px; right: 12px; z-index: 1; font-family: 'FontAwesome'; font-size: 18px; color: #ccc;}
.datepicker {cursor: pointer !important; padding-right: 30px; position: relative; z-index: 2; background: #fff !important;}

/* DATEPICKER CALENDAR */
#ui-datepicker-div {width: 300px; z-index: 7000 !important; font-size: 14px !important; line-height: 2 !important;}
.ui-datepicker {background: #f5f5f5; border: 0; border-radius: 0; box-shadow: #000 0 0 50px -14px;}
.ui-datepicker .ui-datepicker-header {background: none; border: none; padding: 0 !important; font-weight: normal;}
.ui-datepicker .ui-datepicker-title {width: 100%; height: 30px !important; margin: 0 auto !important; background: var(--primary); border-bottom: 1px solid var(--primary); font-size: 14px; color: #fff; line-height: 2.25 !important; text-align: center;}
.ui-datepicker .ui-datepicker-next {width: 34px !important; height: 30px !important; top: 0 !important; right: 0 !important; background: url('/images/layout/datepicker-next-white.png') no-repeat center center !important; cursor: pointer; opacity: 0.75;}
.ui-datepicker .ui-datepicker-prev {width: 34px !important; height: 30px !important; top: 0 !important; left: 0 !important; background: url('/images/layout/datepicker-prev-white.png') no-repeat center center !important; cursor: pointer; opacity: 0.75;}
.ui-datepicker .ui-datepicker-next:after,
.ui-datepicker .ui-datepicker-prev:after {display: none !important;}
.ui-datepicker .ui-datepicker-next-hover {top: 0 !important; right: 0 !important; opacity: 1; border: 0 !important;}
.ui-datepicker .ui-datepicker-prev-hover {top: 0 !important; left: 0 !important; opacity: 1; border: 0 !important;}
.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev span {display: none !important;}
.ui-datepicker .ui-datepicker-calendar .ui-state-default {text-align: center !important;}
.ui-datepicker-calendar th {font-size: 12px; line-height: 1; font-weight: normal;}
.ui-datepicker-calendar td {position: relative; line-height: 2;}
.ui-datepicker-calendar td span,
.ui-datepicker-calendar td a {width: 40px; height: 40px; padding: 8px 5px !important; background: var(--primary) !important; border: 1px solid var(--primary) !important; font-size: 12px; color: #fff !important; text-align: center;}
.ui-datepicker-calendar td a:hover {background: #eee !important; color: #444 !important; font-weight: normal;}
.ui-datepicker .ui-state-disabled:after {content:""; display: block; position: absolute; top: 50%; right: 0; left: 0; border-bottom: 2px solid #fff;}
.ui-datepicker .ui-datepicker-other-month:after {display: none;}
.ui-datepicker .ui-state-disabled.ui-datepicker-today span,
.ui-datepicker .ui-datepicker-today span {background: #f7f7f7 !important; border: 1px solid #444 !important; color: #000 !important;}
.ui-datepicker .ui-datepicker-today span:hover {background: #fff !important; color: var(--primary) !important; font-weight: 700;}
.ui-datepicker .ui-state-disabled.ui-datepicker-today:after {display: none;}
.ui-datepicker .dp-highlight .ui-state-default {background: hsl(42, 82%, 55%) !important; border-color: hsl(42, 82%, 55%) !important; color: #fff !important;}

@media (max-width: 568px) {
  .count { width: calc(100% - 107px) !important; }
  .counter label { display: block; padding-left: 0; }
  .form-group .length-input, .form-group .length-input-label { display: block; width: 100%; margin-bottom: 10px !important; }
  .form-group .length-input-label h5 { margin: 0 !important; padding: 0 !important; }
}
@media (max-width: 480px) {
  .edit-form .datepicker { width: 100%; }
  .form-group-half, .form-group-divider { display: block; width: 100%; margin-right: 0; }
}