body { font-size: var(--f-size-default); }
h1, h2, h3, h4, h5, h6 { color: var(--c-gray); font-family: GothamRoundedMedium, sans-serif; margin: 10px 0; font-weight: 300; }
h1 { line-height: 48px; font-size: 1.75em; }
h2 { line-height: 36px; font-size: 1.50em; }
h3 { line-height: 30px; font-size: 1.25em; }
h4 { line-height: 22px; font-size: 1.00em; }
h5 { line-height: 16px; font-size: .975em; }
small { font-size: 85%; }

.hide { display: none; }
.line-height-initial { line-height: initial!important; }

.opacity-0 { opacity: 0; }
.opacity-1 { opacity: 1; }
.opacity-half { opacity: .5; }

.c-pointer { cursor: pointer!important; }
.c-help { cursor: help!important; }

.text-underline { text-decoration: underline; }
.text-transform-off { text-transform: initial; }

.position-absolute { position: absolute; }
.circle { border-radius: 50%; }

.top { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom:  0; }

.circled { border-radius: 100%; }
.overflow-wrap { overflow-wrap: break-word; }
.text-by-width { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.text-wrap-100 { word-wrap: break-word; max-width: 100px; }
.text-wrap-250 { word-wrap: break-word; max-width: 250px; }
.text-wrap-500 { word-wrap: break-word; max-width: 500px; }
.text-wrap-750 { word-wrap: break-word; max-width: 750px; }
.text-wrap-1000 { word-wrap: break-word; max-width: 1000px; }
/** +----------------------------------------------------------------------------------------------------------------**/
/** | Form group
/** +----------------------------------------------------------------------------------------------------------------**/
.form-group { margin-bottom: .925rem; }
.form-group-md { padding-bottom: .875rem; }
.form-group-map { padding: 0 30px 0 15px; }
.form-group-map #map { border: 1px solid var(--c-gray); border-radius: var(--border-radius-md); box-shadow: 0 2px 6px 0 var(--c-shadow-light); }

.control-label { margin-bottom: 0; line-height: 33px; }
.control-label.line-height-inherit { line-height: inherit; }
.form-control { font-size: var(--f-size-default); line-height: 28px; }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Placeholder
/** +----------------------------------------------------------------------------------------------------------------**/
/* Firefox */
::placeholder { color: var(--c-gray-light); opacity: 1; }
/* Edge 12 -18 */
::-ms-input-placeholder { color: var(--c-gray); }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Scrollbar
/** +----------------------------------------------------------------------------------------------------------------**/
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--c-gray); }
::-webkit-scrollbar-track { background: var(--c-gray-light); }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Color
/** +----------------------------------------------------------------------------------------------------------------**/
.c-inherit { color: inherit; }

.c-white { color: var(--c-white) !important; }
.c-orange { color: var(--c-orange) !important; }
.c-header { color: var(--c-header) !important; }

.c-gray { color: var(--c-gray) !important; }
.c-gray-light { color: var(--c-gray-light) !important; }
.c-gray-dark { color: var(--c-gray-dark) !important; }

.c-red { color: var(--c-red) !important; }
.c-red-dark { color: var(--c-red-dark) !important; }

.c-green { color: var(--c-green) !important; }
.c-green-dark { color: var(--c-green-dark) !important; }

.c-blue { color: var(--c-blue) !important; }
.c-blue-dark { color: var(--c-blue-dark) !important; }
.c-blue-light { color: var(--c-blue-light) !important; }

.c-yellow, .c-warning { color: var(--c-yellow) !important; }
.c-yellow-dark, .c-warning-dark { color: var(--c-yellow-dark) !important; }

.c-violet { color: var(--c-violet) !important; }
.c-violet-dark { color: var(--c-violet-dark) !important; }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Background color
/** +----------------------------------------------------------------------------------------------------------------**/
.bc-off { background-color: initial!important; }
.bc-white { background-color: var(--c-white) !important; }
.bc-header { background-color: var(--c-header) !important; }

.bc-gray { background-color: var(--c-gray) !important; }
.bc-gray-light { background-color: var(--c-gray-light) !important; }
.bc-gray-dark { background-color: var(--c-gray-dark) !important; }

.bc-red { background-color: var(--c-red) !important; }
.bc-red-dark { background-color: var(--c-red-dark) !important; }
.bc-green { background-color: var(--c-green) !important; }
.bc-green-dark { background-color: var(--c-green) !important; }
.bc-initial { background-color: initial !important; }

.bc-success { background-color: var(--c-success); !important; }
.bc-warning { background-color: var(--c-yellow); !important; }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Button
/** +----------------------------------------------------------------------------------------------------------------**/
.btn { line-height: 19px; font-size: var(--f-size-default); padding: 5px 16px; margin: 2px; border-radius: var(--border-radius);  }
.btn-md { line-height: 18px; font-size: .925em; padding: 5px 10px; }
.btn-sm { line-height: 15px; font-size: .85em; padding: 4px 8px; }
.btn:hover { opacity: .5; border: 1px solid var(--c-white); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn i { font-size: var(--f-size-default); }
.btn-md i { font-size: .925em; }
.btn-sm i { font-size: .85em; }

.btn.btn-blue { border: 1px solid var(--c-blue); color: var(--c-white)!important; background-image: -webkit-linear-gradient(top, var(--c-blue-light) 0%, var(--c-blue) 100%); }
.btn.btn-blue-outline { border: 1px solid var(--c-blue-light); color: var(--c-blue)!important; background-image: -webkit-linear-gradient(top, var(--c-white) 0%, var(--c-blue-gradient) 100%); }
.btn.btn-blue-outline:hover { border: 1px solid var(--c-white); color: var(--c-white)!important; background-image: -webkit-linear-gradient(top, var(--c-blue-light) 0%, var(--c-blue) 100%); }

.btn.btn-green { color: var(--c-white)!important; background-image: -webkit-linear-gradient(top, var(--c-green-light) 0%, var(--c-green) 100%); }
.btn.btn-green-outline { border: 1px solid var(--c-green-light); color: var(--c-green-dark)!important; background-image: -webkit-linear-gradient(top, var(--c-white) 0%, var(--c-green-gradient) 100%); }
.btn.btn-green-outline:hover { border: 1px solid var(--c-white); color: var(--c-white)!important; background-image: -webkit-linear-gradient(top, var(--c-green-light) 0%, var(--c-green) 100%); }

.btn.btn-danger { background-image: -webkit-linear-gradient(top, var(--c-red-light) 0%, var(--c-red) 100%); }
.btn.btn-danger-outline { border: 1px solid var(--c-red-light); color: var(--c-red)!important; background-image: -webkit-linear-gradient(top, var(--c-white) 0%, var(--c-red-gradient) 100%); }
.btn.btn-danger-outline:hover { border: 1px solid var(--c-white); color: var(--c-white)!important; background-image: -webkit-linear-gradient(top, var(--c-red-light) 0%, var(--c-red) 100%); }

.btn.btn-warning, .btn.btn-yellow { color: var(--c-white)!important; background-image: -webkit-linear-gradient(top, var(--c-yellow-light) 0%, var(--c-yellow-dark) 100%); }
.btn.btn-warning-outline, .btn.btn-yellow-outline { border: 1px solid var(--c-yellow-dark); color: var(--c-yellow-dark)!important; background-image: -webkit-linear-gradient(top, var(--c-white) 0%, var(--c-yellow-gradient) 100%); }
.btn.btn-warning-outline:hover, .btn.btn-yellow-outline:hover { border: 1px solid var(--c-white); color: var(--c-white)!important; background-image: -webkit-linear-gradient(top, var(--c-yellow-light) 0%, var(--c-yellow-dark) 100%); }

.btn.btn-violet { border: 1px solid var(--c-violet); color: var(--c-white)!important; background-image: -webkit-linear-gradient(top, var(--c-violet-light) 0%, var(--c-violet) 100%); }
.btn.btn-violet-outline { background: var(--white); border: 1px solid var(--c-violet); color: var(--c-violet)!important; background-image: -webkit-linear-gradient(top, var(--c-white) 0%, var(--c-violet-gradient) 100%); }
.btn.btn-violet-outline:hover { border: 1px solid var(--c-white); color: var(--c-white)!important; background-image: -webkit-linear-gradient(top, var(--c-violet-light) 0%, var(--c-violet) 100%); }

.btn.btn-white { border: 1px solid var(--c-gray-light); color: var(--c-gray)!important; background-image: -webkit-linear-gradient(top, var(--c-white) 0%, var(--c-gray-gradient) 100%); }
.btn.btn-white:hover { border: 1px solid var(--c-border); background-image: -webkit-linear-gradient(top, var(--c-white) 0%, var(--c-gray-gradient) 100%); }

.btn-default, .btn-default.disabled { border: 1px solid var(--c-gray-light); }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Link
/** +----------------------------------------------------------------------------------------------------------------**/
a { font-size: 1em; cursor: pointer; }
a.link-sm { font-size: .9375em; }
a.link-md { font-size: .9750em; }

a.link-gray { color: var(--c-gray); }
a.link-gray:hover { color: var(--c-orange); }

a.link-white { color: var(--c-white); }
a.link-white:hover { color: var(--c-orange); }

a.link-blue { color: var(--c-blue); }
a.link-blue:hover { color: var(--c-blue-dark); }

a.link-orange { color: var(--c-orange); }
a.link-orange:hover { color: var(--c-orange-dark); }

a.link-disabled { pointer-events: none; cursor: not-allowed!important; text-decoration: none; opacity: .5; }
/*a.link-disabled.link-blue, a.link-disabled.link-orange { color: var(--c-gray); }*/

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Badge
/** +----------------------------------------------------------------------------------------------------------------**/
.badge { padding: 4px 6px; font-size: 12px; margin: 2px 1px; }
.badge.circle { border-radius: 100%; }

.badge-success { color: var(--c-white); background-color: var(--c-green-dark); }
.badge-success-outline { color: var(--c-green-dark); border: 1px solid var(--c-green-dark); background-color: initial; }
.user_status_link .badge.badge-success-outline:hover { color: var(--c-white); box-shadow: 0 2px 6px 0 var(--c-green-light); background-image: -webkit-linear-gradient(top, var(--c-green-light) 0%, var(--c-green) 100%); }

.badge-danger-outline { color: var(--c-red); border: 1px solid var(--c-red); background-color: initial; }
.user_status_link .badge-danger-outline:hover { color: var(--c-white); box-shadow: 0 2px 6px 0 var(--c-red-light); background-image: -webkit-linear-gradient(top, var(--c-red-light) 0%, var(--c-red) 100%);}

.badge-violet-outline { color: var(--c-violet); border: 1px solid var(--c-violet); background-color: initial; }
.badge-info-outline { color: var(--c-blue-dark); border: 1px solid var(--c-blue-dark); background-color: initial; }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Shadow
/** +----------------------------------------------------------------------------------------------------------------**/
.box-shadow-off { box-shadow: none!important; }
.box-shadow-gray { box-shadow: 0 0 7px 2px var(--c-border); }
.box-shadow-gray-light { box-shadow: 0 0 7px 2px var(--c-header); }
.b-shadow-gray-md { box-shadow: 0 0 7px 2px var(--c-shadow-gray); }
.b-shadow-gray-lg { box-shadow: 0 0 7px 2px var(--c-shadow-hight); }

.box-shadow-red { box-shadow: 0 0 7px 2px var(--c-shadow-red); }

.text-blue-shadow-sm { text-shadow: 0 0 16px var(--c-shadow-blue-sm); }
.text-blue-shadow-md { text-shadow: 0 0 16px var(--c-shadow-blue-md); }
.text-blue-shadow-lg { text-shadow: 0 0 16px var(--c-shadow-blue-lg); }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Border
/** +----------------------------------------------------------------------------------------------------------------**/
.border-top-light { border-top: 1px solid var(--c-border-light) !important; }
.border-left-light { border-left: 1px solid var(--c-border-light) !important; }
.border-bottom-light { border-bottom: 1px solid var(--c-border-light) !important; }
.border-right-light { border-right: 1px solid var(--c-border-light) !important; }

.border-top-dark { border-top: 1px solid var(--c-gray-dark) !important; }
.border-left-dark { border-left: 1px solid var(--c-gray-dark) !important; }
.border-bottom-dark { border-bottom: 1px solid var(--c-gray-dark) !important; }
.border-right-dark { border-right: 1px solid var(--c-gray-dark) !important; }

.border-top-red { border-top: 1px solid var(--c-red) !important; }
.border-left-red { border-left: 1px solid var(--c-red) !important; }
.border-bottom-red { border-bottom: 1px solid var(--c-red) !important; }
.border-right-red { border-right: 1px solid var(--c-red) !important; }
.border-top-red-light { border-top: 1px solid var(--c-red-light) !important; }
.border-left-red-light { border-left: 1px solid var(--c-red-light) !important; }
.border-bottom-red-light { border-bottom: 1px solid var(--c-red-light) !important; }
.border-right-red-light { border-right: 1px solid var(--c-red-light) !important; }

.border-blue { border: 1px solid var(--c-blue) !important; }
.border-blue-light { border: 1px solid var(--c-blue-light) !important; }
.border-blue-dark { border: 1px solid var(--c-blue-dark) !important; }
.border-top-blue { border-top: 1px solid var(--c-blue) !important; }
.border-right-blue { border-right: 1px solid var(--c-blue) !important; }
.border-bottom-blue { border-bottom: 1px solid var(--c-blue) !important; }
.border-left-blue { border-left: 1px solid var(--c-blue) !important; }

.border-green { border: 1px solid var(--c-green) !important; }
.border-green-light { border: 1px solid var(--c-green-light) !important; }
.border-green-dark { border: 1px solid var(--c-green-dark) !important; }

.border-yellow { border: 1px solid var(--c-yellow) !important; }
.border-yellow-light { border: 1px solid var(--c-yellow-light) !important; }
.border-yellow-dark { border: 1px solid var(--c-yellow-dark) !important; }

.border-red, input.border-red[type=text], input.border-red[type=email], input.border-red[type=password] { border: 1px solid var(--c-border-red) !important; }
.border-red-light { border: 1px solid var(--c-red-light) !important; }
.border-red-dark { border: 1px solid var(--c-red-dark) !important; }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Border radius
/** +----------------------------------------------------------------------------------------------------------------**/
.border-radius-0 { border-radius: initial!important; }

.border-radius-sm { border-radius: var(--border-radius-sm)!important; }
.border-radius { border-radius: var(--border-radius) !important; }
.border-radius-lg { border-radius: var(--border-radius-lg) !important; }
/** +----------------------------------------------------------------------------------------------------------------**/
/** | Width
/** +----------------------------------------------------------------------------------------------------------------**/
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Font
/** +----------------------------------------------------------------------------------------------------------------**/
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.fs-10, .font-size-10 { font-size: 10px!important; }
.fs-11, .font-size-11 { font-size: 11px!important; }
.fs-12, .font-size-12 { font-size: 12px!important; }
.fs-13, .font-size-13 { font-size: 13px!important; }
.fs-14, .font-size-14 { font-size: 14px!important; }
.fs-15, .font-size-15 { font-size: 15px!important; }
.fs-16, .font-size-16 { font-size: 16px!important; }
.fs-18, .font-size-18 { font-size: 18px!important; }
.fs-19, .font-size-19 { font-size: 19px!important; }
.fs-20, .font-size-20 { font-size: 20px!important; }
.fs-22, .font-size-22 { font-size: 22px!important; }
.fs-24, .font-size-24 { font-size: 24px!important; }
.fs-26, .font-size-26 { font-size: 26px!important; }
.fs-28, .font-size-28 { font-size: 28px!important; }
.fs-30, .font-size-30 { font-size: 30px!important; }
.fs-32, .font-size-32 { font-size: 32px!important; }
.fs-34, .font-size-34 { font-size: 34px!important; }
.fs-36, .font-size-36 { font-size: 36px!important; }
.fs-default, .font-size-default { font-size: 1em; }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Line height
/** +----------------------------------------------------------------------------------------------------------------**/
.lh-24 { line-height: 24px!important; }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Datepicker
/** +----------------------------------------------------------------------------------------------------------------**/
.datepicker.dropdown-menu { border-radius: var(--border-radius); }
.datepicker td { height: 28px; width: 28px; }
.datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active:active,
.datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active:hover:active,
.datepicker table tr td.active:hover:hover, .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active[disabled] { background-color: var(--c-blue); color: var(--c-white); }
.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover.disabled, .datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:hover[disabled], .datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active:active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover.disabled, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active:hover[disabled], .datepicker table tr td span.active[disabled] { background-color: var(--c-blue); background-image: initial; color: var(--c-white); }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Input
/** +----------------------------------------------------------------------------------------------------------------**/
input, textarea, select, .custom-select, .form-control { height: 33px; padding: 2px 8px!important; border: 1px solid var(--c-border); color: var(--c-gray); border-radius: var(--border-radius)!important; }
input, select, input[type=text], input[type=search], input[type=file], input[type=email], input[type=number], input[type=password] { height: 33px!important; box-shadow: 0 2px 6px 0 var(--c-shadow-light); border-radius: var(--border-radius-md) !important; }
input:focus, select, input[type=text], input[type=search], input[type=file], input[type=email], input[type=number], input[type=password] { height: 33px!important; box-shadow: 0 2px 6px 0 var(--c-shadow-light); border-radius: var(--border-radius-md) !important; }
select { padding: 0 10px 0 15px!important; }
select:focus, select:active, select:hover { border: 1px solid var(--c-border) !important; opacity: .75; }
textarea { box-shadow: 0 2px 6px 0 var(--c-shadow-light); }
select { -webkit-appearance: none; -moz-appearance: none; cursor: pointer; background: url(../../images/basic/arrow-down.png) no-repeat; background-position-x: 98%; background-position-y: center; background-size: 10px; }

input::placeholder, textarea::placeholder, .form-control::placeholder { color: var(--c-gray-light); }
select option:disabled { color: var(--c-gray-light); }

.form-control:focus { border: 1px solid var(--c-gray-light) !important; box-shadow: 0 0 12px 0 var(--c-gray-light); }

.input-group-append .btn.btn-danger-outline, .input-group-append .btn.btn-green-outline { border: 1px solid var(--c-border); }
.page-container .input-group .form-control { margin-top: 1px; }
.page-container .input-group .input-group-prepend, .page-container .input-group .input-group-append { box-shadow: 0 2px 6px 0 var(--c-shadow-light); border: 1px solid var(--c-border); }
.page-container .input-group .input-group-prepend { border-right: initial; }
.page-container .input-group .input-group-append { border-left: initial; border-bottom-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius); }
.page-container .input-group .input-group-append .btn { margin: 0; }

.input-group>.input-group-append>.input-group-text { color: var(--c-gray); background: var(--c-header) !important; z-index: 1; }
.input-group.input-left input, .input-group.select-left select, .input-group.select-left .select2-selection { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group.input-right input, .input-group.select-right select,  .input-group.select-right .select2-selection { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group-text { display: inline; padding: initial; align-content: center; line-height: 31px; min-width: 36px; border: 1px solid var(--c-border); border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
.input-group-text i { margin: 0 auto; }
.input-group>.input-group-append:not(:last-child)>.input-group-text { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
.input-group-append.calendar, .input-group-prepend.calendar { cursor: pointer; }
.input-group-append.calendar i, .input-group-prepend.calendar i { color: var(--c-blue); }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Input error message
/** +----------------------------------------------------------------------------------------------------------------**/
form .error-block, form .error[generated="true"] {color: var(--c-red); }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Select2
/** +----------------------------------------------------------------------------------------------------------------**/
.select2-container { width: 100%!important; }
.select2-container--default .select2-selection { padding: initial!important; color: var(--c-gray-light); box-shadow: 0 2px 6px 0 var(--c-shadow-light); }
.select2-container--default .select2-selection--multiple { min-height: 33px!important; line-height: 19px; padding: initial; border-radius: var(--border-radius-md); border: 1px solid var(--c-border); box-shadow: 0 2px 6px 0 var(--c-shadow-light); text-shadow: 0 0 4px #85858573; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered li { color: var(--c-gray);  }
.select2-container--default .select2-selection--single { height: 33px; color: var(--c-gray); border-radius: var(--border-radius-md); border: 1px solid var(--c-border); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 31px; color: var(--c-gray); }
.select2-container--default .select2-selection--single .select2-selection__arrow b { margin-top: initial; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { border-radius: var(--border-radius); }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Input invalid
/** +----------------------------------------------------------------------------------------------------------------**/
input:focus:invalid, textarea:focus:invalid, select:focus:invalid, select:invalid + .select2-container--default .select2-selection--single:focus { border: 1px solid var(--c-border-red) !important; }
input:invalid, textarea:invalid, select:invalid, select:invalid + .select2-container--default .select2-selection--single { border: 1px solid var(--c-border-red) !important; box-shadow: 0 2px 6px 0 var(--c-border-red) !important; }
input:invalid + .input-group-append .input-group-text, select:invalid + .input-group-append .input-group-text, select:invalid + .select2-container--default .select2-selection--single + .input-group-append .input-group-text { border: 1px solid var(--c-border-red)!important; box-shadow: 0 2px 6px 0 var(--c-border-red) !important; }
input:invalid + .input-group-append .input-group-text i, select:invalid + .input-group-append .input-group-text, select:invalid + .select2-container--default .select2-selection--single i + .input-group-append .input-group-text { color: var(--c-red-light); }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Fieldset
/** +----------------------------------------------------------------------------------------------------------------**/
fieldset legend { margin: 1.75rem 0; font-size: 15px; font-weight: bold; border-bottom: 1px solid var(--c-border-orange); color: var(--c-orange-light); font-family: 'FontAwesome'; }
fieldset legend.empty { margin-bottom:initial; border-bottom: initial; color: initial; }

fieldset legend.legend-blue { border-color: var(--c-blue); color: var(--c-blue); }
fieldset legend.legend-blue-dark { border-color: var(--c-blue-dark); color: var(--c-blue-dark); }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Bootstrap switch
/** +----------------------------------------------------------------------------------------------------------------**/
.bootstrap-switch { box-shadow: 2px 3px 6px 0 var(--c-shadow-light) }
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default { color: var(--c-gray) !important; }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Table & DataTable
/** +----------------------------------------------------------------------------------------------------------------**/
table > thead > tr > th { border-bottom: 1px solid var(--c-gray-dark)!important; color: var(--c-gray-dark); background: var(--c-header) !important; line-height: 28px; }
table tbody { color: var(--c-gray); }
table td { border-bottom: 1px solid var(--c-border); }
table th, table td { align-content: center; text-align: center; }
table > tbody > tr > td, table > tfoot > tr > td, table > thead > tr > td { border-top: 0; border-right: 0; }

table.table-striped tbody tr:nth-of-type(odd) { background-color: var(--c-header); }

.dataTables_wrapper > .row { margin-left: initial; margin-right: initial; }
.dataTables_wrapper .row div { margin-left: initial; margin-right: initial; padding-left: initial; padding-right: initial; }
.dataTables_wrapper .dt-buttons { padding: 0 10px 10px 0!important; }
.dataTables_wrapper table.dataTable tr th { font-weight: 600; vertical-align: middle; }
.dataTables_wrapper table.dataTable { margin-bottom: 0; margin-top: 0;  border-radius: var(--border-radius) !important; }
.dataTables_wrapper table.dataTable thead .sorting { background: var(--c-header) !important; }
.dataTables_wrapper table.dataTable thead .sorting:after, .dataTables_wrapper table.dataTable thead .sorting_asc::after, .dataTables_wrapper table.dataTable thead .sorting_desc::after { color: var(--c-blue); }
.dataTables_wrapper table.dataTable.table-bordered > tbody > tr > td { padding: 6px 4px; }
.dataTables_wrapper table.dataTable.table-bordered > tbody > tr > td .container-checkbox { padding-top: 5px; }
.dataTables_wrapper table.dataTable tbody>tr.selected { background-color: var(--c-border)!important; }

.dataTables_wrapper .dataTables_empty { font-style: italic; font-size: 95%; color: var(--c-gray-light) !important; }
.dataTables_wrapper .dataTables_info {color: var(--c-gray-dark); }
.dataTables_wrapper .dataTables_length { margin-bottom: 10px; margin-right: 10px!important; }
.dataTables_wrapper .dataTables_length label { color: var(--c-gray-dark); }
.dataTables_wrapper .dataTables_length select { margin: 0 4px; background: var(--c-header) !important; }
.dataTables_wrapper .dataTables_filter { padding-right: 0; margin-bottom: 10px; }
.dataTables_wrapper .dataTables_filter input { background: var(--c-header) !important; margin-right: 4px; }
.dataTables_wrapper .dataTables_paginate  { padding-right: 0; padding-top: .5rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button { font-size: 1em; padding: 4px 9px !important; margin-right: 2px; color: var(--c-blue) !important;  background-color: var(--c-white) !important; border-radius: var(--border-radius-md)!important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--c-blue) !important; color: var(--c-white) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--c-blue-light) !important; color: var(--c-white) !important; }

.dataTables_wrapper div.dtsp-panesContainer .dtsp-titleRow button { color: var(--c-blue)!important; padding: 4px 10px; font-size: .925em; }
.dataTables_wrapper div.dtsp-panesContainer .dtsp-titleRow button:hover{ background: var(--c-blue-light) !important; color: var(--c-white) !important;}
.dataTables_wrapper div.dtsp-panesContainer .dtsp-titleRow div.dtsp-title { color: var(--c-gray-dark); }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes table.dataTable { border:initial!important; border-radius: initial!important;; }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes input { box-shadow: initial; border: 1px solid var(--c-border)!important; }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes button { font-size: 18px; }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dataTables_wrapper { border-radius: var(--border-radius) !important; }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane span[title="No data"] { color: var(--c-gray-light); font-style: italic; }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane input.dtsp-paneInputButton.dtsp-search { border-radius: 6px; padding-left: 8px; margin-top: 4px; height: 30px; line-height: 30px; color: var(--c-gray) !important; }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane input.dtsp-paneInputButton.dtsp-search::placeholder { color: var(--c-gray); }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane span.dtsp-name { cursor: pointer; }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane span.dtsp-pill { color: var(--c-gray-dark); border-radius: var(--border-radius-sm) !important; }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane span.dtsp-pill:not(.dtsp-custom) { background-color: var(--c-border)!important; }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane button.dtsp-paneButton { height: 33px; margin: 4px 0 0 2px; line-height: 28px; }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane button.dtsp-paneButton:hover { margin-right: -1px; border-bottom-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius); }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dtsp-topRow { padding-bottom: 3px; }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dtsp-topRow { font-size: var(--f-size-default); }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dtsp-topRow input { box-shadow: 0 2px 6px 0 var(--c-shadow-light); height: 31px!important; }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dtsp-topRow div.dtsp-subRow1 div.dtsp-searchCont { padding-right: 2px; }
.dataTables_wrapper div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dtsp-topRow.dtsp-bordered { border-radius: 12px; padding-bottom: 4px; padding-left: 2px; }
.dataTables_wrapper div.dtsp-panesContainer button.dtsp-collapseAll:hover, div.dtsp-panesContainer button.dtsp-clearAll:hover, div.dtsp-panesContainer button.dtsp-showAll:hover { border-radius: var(--border-radius); }

.dataTables_wrapper .dataTables_processing { width: auto; margin: 0 auto; }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Grid
/** +----------------------------------------------------------------------------------------------------------------**/
@media (min-width: 1px) {
    .row .col-xl-half { -ms-flex: 0 0 100%; flex: 0 0 50%; max-width: 100%; }
}

@media (min-width: 575px) {
    .row .col-xl-half { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
}

@media (min-width: 768px) {
    .row .col-xl-half { -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333%; }
}

@media (min-width: 991px) {
    .row .col-xl-half { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; }
}

@media (min-width: 1400px) {
    .row .col-xl-half { -ms-flex: 0 0 16.666666667%; flex: 0 0 16.666666667%; max-width: 16.666666667%; }
}

@media (min-width: 1500px) {
    .row .col-xl-half { -ms-flex: 0 0 12.5%; flex: 0 0 12.5%; max-width: 12.5%; }
}

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Modal dialog
/** +----------------------------------------------------------------------------------------------------------------**/
.modal .modal-dialog .modal-content { border-radius: var(--border-radius-md); }
.modal .modal-dialog .modal-content .modal-header .modal-title { color: var(--c-orange-dark); font-size: 1.5rem; }
.modal .modal-dialog .modal-content .modal-header, .modal .modal-content .modal-footer { background: var(--c-header); }
.modal .modal-dialog .modal-content .modal-body { padding: 1rem; background-color: var(--c-page); }
.modal .modal-dialog .modal-content .modal-header { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius-md); }
.modal .modal-dialog .modal-content .modal-footer { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius-md); }

.bootbox.modal .modal-dialog { margin-top: 33vh; }
.bootbox.modal .modal-dialog .bootbox-close-button { position: absolute; right: 1rem; }
.bootbox.modal .modal-dialog .modal-header .modal-title { color: var(--c-orange-dark); font-weight: 300; }
.bootbox.modal .modal-dialog .modal-body { font-size: 1em; }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Page content
/** +----------------------------------------------------------------------------------------------------------------**/
.notify-docker { position: fixed; top: 0; left: 0; right: 0; z-index: 10001;}
.notify-docker .flash-notify { position: relative; padding: 20px; border-radius: 8px; width: 50%; font-size: 16px; text-align: center; margin: 0 auto 2px; z-index: 1; cursor: pointer; color: var(--c-white);  }
.flash-notify.poppay-flash-notify { opacity: .85; padding: 20px; border-radius: 8px; width: 50%; font-size: 16px; text-align: center; margin: 0 auto 2px; z-index: 1; cursor: pointer; color: var(--c-white); }
.notify-docker .flash-notify span { line-height: 1.25; }

#page-wrapper { background-color: var(--c-page); }
#page-wrapper .page-container { padding-bottom: 25px; }
#page-wrapper .page-container .container-fluid { padding: 10px 20px; }
#page-wrapper .page-container .page-header .page-header_title { font-weight: 700; font-size: 1.25em; text-transform: capitalize; color: var(--c-orange); }
#page-wrapper .page-container .page-header .page-header_title small { font-size: 80%; }
#page-wrapper .page-container .page-body .page-body_card { box-shadow: 0 0 8px 0 var(--c-shadow); margin-bottom: -1px; border-radius: var(--border-radius); background-color: var(--c-white); }
#page-wrapper .page-container .page-body .page-body_card.body_card-default { padding: initial; box-shadow: initial; }
#page-wrapper .page-container .page-body .page-body_card .nav-tabs { background: var(--c-page); }
#page-wrapper .page-container .page-body .page-body_card .nav-tabs li { background-color: var(--c-header); padding: 6px 16px; margin: 0 6px -1px 0; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); border: 1px solid var(--c-border); }
#page-wrapper .page-container .page-body .page-body_card .nav-tabs.tab-inverse li { background: var(--c-white); }
#page-wrapper .page-container .page-body .page-body_card .nav-tabs li a { color: var(--c-gray); }
#page-wrapper .page-container .page-body .page-body_card .nav-tabs li a:hover { color: var(--c-orange); }
#page-wrapper .page-container .page-body .page-body_card .nav-tabs li.active { background-color: var(--c-white); border: 1px solid var(--c-border); border-bottom: 1px solid var(--c-white); }
#page-wrapper .page-container .page-body .page-body_card .nav-tabs.tab-inverse li.active { background-color: var(--c-header); border-bottom: 1px solid var(--c-header); }
#page-wrapper .page-container .page-body .page-body_card .nav-tabs li.active a { font-weight: 600; color: var(--c-blue); }
.nav-tabs>li>a:focus, .nav-tabs>li>a:hover { background-color: initial; }

#page-wrapper .page-container .page-body .page-body_card .tab-content { box-shadow: 0 0 8px 0 var(--c-shadow); border-bottom-right-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); }
#page-wrapper .page-container .page-body .page-body_card .tab-content.tab-inverse { background-color: var(--c-header); }

#page-wrapper .page-container .page-body .page-body_title { padding-top: 15px; font-weight: 600; font-size: 1em; }
#page-wrapper .page-container .page-body .page-body_title:first-child { padding-top: 0; }
#page-wrapper .page-container .page-body .table-filter { margin: 0 0 15px; padding-bottom: 15px; border-bottom: 1px solid var(--c-border); }

#page-wrapper .page-container .page-body .page-body_card,
#page-wrapper .page-container .page-body .page-body_card .tab-content { padding: 25px; }

/** Section **/
section { border-radius: var(--border-radius); border: 1px solid var(--c-border); }
section .white-box { margin-bottom: initial;}

/* Section profile details */
.section-profile-details { min-height: 84px; }
.section-profile-details .item-profile-details { align-content: center; }
.section-profile-details .image { width: max-content; height: max-content; border-radius: var(--border-radius); display: inline-table; }
.section-profile-details .image .edit-profile { display: none; }
.section-profile-details .image:hover { cursor: pointer; width: 200px; height: 200px; box-shadow: 0 0 46px 2px var(--c-shadow-gray); background-color: var(--c-white); border: 1px solid var(--c-border); z-index: 1; position: absolute; }
.section-profile-details .image:hover img { width: auto; max-width: 100%; height: 100%; padding: 6px; }
.section-profile-details .image:hover .edit-profile { display: block; font-weight: 700; position: absolute; right: 0; left: 0; bottom: 5px; }
.section-profile-details .description { color: var(--c-gray-dark); font-size: 14px; }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Header
/** +----------------------------------------------------------------------------------------------------------------**/
.navbar { padding: initial; line-height: 60px; }
.navbar .navbar-header { box-shadow: 1px 0 20px var(--c-shadow); display: block; }
.navbar .navbar-header .navbar-toggler { position: absolute; right: 0; }
.navbar .navbar-header .navbar-links i { font-size: 12px; }
.navbar .navbar-header .navbar-links li a i { display: none; }
.navbar .navbar-header .navbar-links li a.active { display: block; }
.navbar .navbar-header .navbar-links > li > a:hover { background: initial; color: var(--c-orange-light); font-weight: 600; opacity: .75; }
.navbar .navbar-header .navbar-links > li > a:hover i { display: initial; }
.navbar .navbar-header .navbar-links > li > a:after { color: var(--c-border); }
.navbar .navbar-header .navbar-links li a.active { color: var(--c-orange); }
.navbar .navbar-header .navbar-links li a.active i { display: initial!important; }

.navbar .navbar-header .sidebar { box-shadow: 1px 0 20px var(--c-shadow); }
.navbar .navbar-header .navbar-toggler { display: none; }

@media (max-width: 1170px) {
    .navbar .navbar-header .navbar-static-top { padding: initial!important; }
    .navbar .navbar-header .navbar-toggler { display: block; padding: initial; z-index: 11; }
    .navbar .navbar-header .navbar-links { padding-right: 30px; }
}

@media (max-width: 767px) {
    .navbar { line-height: 48px; }
    .navbar-top-links > li > a { line-height: 48px; }
    .navbar .navbar-header .navbar-header { display: flex; }
}

@media (max-width: 282px) {
    .navbar .navbar-header .navbar-toggler .nav-toggler i { padding: 6px 6px 4px 6px; background-color: var(--c-white); }
}

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Left menu
/** +----------------------------------------------------------------------------------------------------------------**/
.sidebar { z-index: 10; }

.sidebar-nav .sidebar-logo { margin: initial; padding: 8px 0; }
.sidebar-nav .sidebar-logo a i { margin-left: 15px; }
.sidebar-nav .sidenav-profile-photo { padding: 20px 0; }
.sidebar-nav .sidenav-profile-photo .sidenav-profile-photo-box { width: 82px!important; }

.sidebar-mini { position: absolute; top: 0; left: 0; }
.sidebar-mini .sidebar-nav { display: flex; overflow: hidden; height: 100%; }
.sidebar-mini .sidebar-nav img { padding: 8px 0; margin-left: 30px; width: 150px; }
.sidebar-mini .sidebar-nav .navbar-mini-toggler-js { display: inline; line-height: 60px; margin-left: 15px; }

#side-menu { background-color: var(--c-border-hight); border: 1px solid var(--c-border-hight); margin: 10px; border-radius: 6px;  }
#side-menu li a:hover { color: var(--c-orange); font-weight: 600; }
#side-menu li, #side-menu li a { width: 100%; }
#side-menu li.active { background-color: var(--c-gray-dark); font-weight: 600; }
#side-menu li a:before { content: ""; border: 2px solid #909090; width: 12px; height: 12px; border-radius: 50%; display: inline-block; position: absolute; left: 13px; top: 17px; }
#side-menu li a.icon-effect:hover:before, #side-menu li a.icon-effect.active:before, #side-menu li.active a:before { display: none; position: initial; }
#side-menu li a.icon-effect:hover, #side-menu li.active a.icon-effect { background-color: initial; padding-left: 13px; color: var(--c-orange-light); font-weight: 600; opacity: .75; }
#side-menu li a.icon-effect.active, #side-menu ul:not(.drop-menus) li.active a { padding-left: 13px; color: var(--c-orange); background-color: var(--c-gray-dark); border-bottom: 1px solid var(--c-border-hight); }
#side-menu li a.icon-effect:hover i, #side-menu li a.icon-effect.active i, #side-menu li.active a i { padding-right: 2px; display: initial; }

#side-menu li a.icon-effect i { display: none; }
#side-menu li a.active i { display: block; }

#side-menu .drop-menus:not(.collapse) {  background-color: var(--c-gray-dark); }
#side-menu .drop-menus li a { display: flex; line-height: 24px; }
#side-menu .drop-menus li:first-child { padding-top: 4px; }
#side-menu .drop-menus li:last-child { padding-bottom: 4px; }
#side-menu .nav.nav-second-level a.active { color: var(--c-orange); }
#side-menu .nav.nav-second-level li a:before { display: none; }
#side-menu .nav-second-level li a { padding: 4px 10px 4px 40px; }

@media (max-width: 1170px) {
    .sidebar .navbar-mini-toggler-js { display: none; }
}

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Footer
/** +----------------------------------------------------------------------------------------------------------------**/
.footer { padding: 15px 15px 10px; font-size: 12px; box-shadow: 1px 0 20px var(--c-shadow); }
.footer .languages { margin-bottom: 5px; }

@media (max-width: 767px) {
    .footer { padding: 10px; }
    .footer .languages { margin-bottom: 5px; }
}

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Card
/** +----------------------------------------------------------------------------------------------------------------**/
.card { background-color: var(--c-header); box-shadow: 0 0 8px 4px var(--c-shadow); }
.card-header, .card-body, .card-footer { padding: 1rem; }

/** +----------------------------------------------------------------------------------------------------------------**/
/** | Minimal Tooltip
/** +----------------------------------------------------------------------------------------------------------------**/
#MinimalTip { box-shadow: 0 0 7px 2px var(--c-gray); -webkit-box-shadow: 0 0 7px 2px var(--c-gray); border-radius: var(--border-radius); line-height: 16px; font-size: .975rem; padding: 2px 8px; font-family: initial; color: var(--c-white); }