@keyframes overflow-delay {
    from { overflow-y: hidden; }
    to { overflow-y: auto; }
}

/**********************************
 * Forms
 **********************************/
form { display: block; }
.form-wrapper { display: block; max-width: 65rem; margin: auto; }
input[type=text], input[type=password], input[type=file], textarea, select, .file-selector {
    display: inline-block;
    border: none;
    border-radius: 0.3rem;
    line-height: 4rem;
    padding: 0 1.5rem;
    text-align: left;
    background-color: #EEEEEE;
    color: #2B2B2B;
    font-weight: bold;
}
input[type=text][size], input[type=password][size] { min-width: 0; width: auto; }
textarea:not([cols]), input[type=text]:not([size]), input[type=password]:not([size]) { width: 23em; max-width: 100%; }
input[type=text]:focus, input[type=password]:focus, input[type=file]:focus, textarea:focus, select:focus
input[type=text]:active, input[type=password]:active, input[type=file]:active, textarea:active, select:active { box-shadow: 0 0px 2px #7BA4CC inset; }
textarea { line-height: 1.2 !important; }
textarea:not([rows]) { min-height: 12rem; }
input:disabled {background-color: #DEDEDE; color: #555555;}

select {
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.8rem 1.8rem;
    background-image: url("/img/icons/down.svg");
    padding: 0 2rem 0 0.8rem;
    background-color: #FFFFFF;
}
select:hover, span.selector > input[type="text"]:hover {
    background-image: url("/img/icons/1365AD/down.svg");
}
option {
    line-height: 2.4rem;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 0.6rem;
}
option:hover {
    background-color: #1365AD;
    color: white;
}
label { display: inline-block; line-height: 3rem; font-weight: bold; }
div > label + span { display: inline-block; line-height: 3rem; margin-left: 1em; }

/**********************************
 * form-control class
 **********************************/
.form-control, .text-label { display: flex; margin-bottom: 2rem; vertical-align: top; }
.form-control > * { flex: 0 0 auto; }
.form-control > *:last-child { flex: 1 1 auto; }
.form-control > label:first-child, .text-label > label:first-child {
    display: inline-block;
    font-weight: bold;
    line-height: 4rem;
    padding-right: 1.5rem;
}

.form-control > input[type=text], .form-control > input[type=password], .form-control > input[type=file], .form-control > textarea, .form-control > select, .form-control > span {
    line-height: 4rem;
}
.form-control > input[type=text][size], .form-control > input[type=password][size], .form-control > textarea[cols] { display:inline-block; width: auto; }

.form-inline .form-control > label:first-child, .form-inline.form-control > label:first-child {}
.form-inline .form-control > label + input[type=text], .form-inline.form-control > label + input[type=text],
.form-inline .form-control > label + input[type=password], .form-inline.form-control > label + input[type=password],
.form-inline .form-control > label + input[type=file], .form-inline.form-control > label + input[type=file],
.form-inline .form-control > label + textarea, .form-inline.form-control > label + textarea,
.form-inline .form-control > label + select, .form-inline.form-control > label + select,
.form-inline .form-control > label + .datepicker, .form-inline.form-control > label + .datepicker {}

.form-inline .form-control > label + input[type=text][size], .form-inline.form-control > label + input[type=text][size],
.form-inline .form-control > label + input[type=password][size], .form-inline.form-control > label + input[type=password][size],
.form-inline .form-control > label + textarea[cols], .form-inline.form-control > label + textarea[cols],
.form-inline .form-control > label + .datepicker, .form-inline.form-control > label + .datepicker { min-width: 0; }

ul > li > .form-control { margin: 0; }

/********************************************
 * Checkbox / Radio (label class="checkbox")
 *******************************************/
label.checkbox, label.radio {
    display: inline-block;
    position: relative;
    line-height: 4rem;
    height: 4rem;
    padding: 0;
    cursor: pointer;
    font-weight: normal;
}
label.checkbox + label.checkbox, label.radio + label.radio { margin-left: 1em; }

label.checkbox > input[type=checkbox],
label.radio > input[type=radio] {
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
}
label.checkbox > span.checkbox,
label.radio > span.radio {
    display: inline-block;
    position: relative;
    width: 4rem;
    height: 2.6rem;
    cursor: pointer;
    border-radius: 1.5rem;
    background-color: #CCC;
    box-shadow: inset 1px 1px 1px #444444;
    margin: 0.7rem 0.6rem 0.7rem 0;
    transition: background-color 0.5s ease;
}
label.checkbox > span.checkbox:before,
label.radio > span.radio:before {
    display: block;
    content: "";
    position: absolute;
    width: 1.8rem;
    height: 1.8rem;
    margin: 0.4rem .4rem;
    top: 0;
    left: 0;
    border-radius: 1rem;
    background: #FFFFFF;
    box-shadow: 1px 1px 1px #444444;
    transition: left 0.5s ease;
}

label.checkbox > input[type=checkbox]:checked + span.checkbox { background-color: #40BB5A; }
label.checkbox > input[type=checkbox]:checked + span.checkbox:before { left: 1.5rem; }
label.checkbox:hover > span.checkbox { background-color: #C2DFC8; }
label.checkbox:hover  > input[type=checkbox]:checked + span.checkbox{ background-color: #67C97C; }
label.checkbox > input[type=checkbox]:disabled + span.checkbox,
label.checkbox:hover > input[type=checkbox]:disabled + span.checkbox { background-color: #888888; }
label.checkbox > input[type=checkbox]:disabled + span.checkbox:before,
label.checkbox:hover > input[type=checkbox]:disabled + span.checkbox:before { background-color: #AAAAAA; }

label.radio > input[type=radio]:checked + span.radio { background-color: #40BB5A; }
label.radio > input[type=radio]:checked + span.radio:before { left: 1.5rem; }
label.radio:hover > span.radio { background-color: #C2DFC8; }
label.radio:hover  > input[type=radio]:checked + span.radio { }
label.radio > input[type=radio]:disabled + span.radio,
label.radio:hover > input[type=radio]:disabled + span.radio { background-color: #888888; }
label.radio > input[type=radio]:disabled + span.checkbox:before,
label.radio:hover > input[type=radio]:disabled + span.checkbox:before { background-color: #AAAAAA; }

label.checkbox.checkbox-sm, label.radio.radio-sm { line-height: 1.5rem; height: 1.5rem; }
label.checkbox.checkbox-sm > span.checkbox, label.radio.radio-sm > span.radio { width: 2.5rem; height: 1.5rem; border-radius: 0.75rem; }
label.checkbox.checkbox-sm > span.checkbox:before, label.radio.radio-sm > span.radio:before { width: 1rem; height: 1rem; margin: .25rem; border-radius: 0.5rem; }
label.checkbox.checkbox-sm > input[type=checkbox]:checked + span.checkbox:before { left: 1rem; }
label.radio.radio-sm > input[type=radio]:checked + span.radio:before { left: 1rem; }


label.checkbox > .btn-icon, label.radio > .btn-icon {
    color: #444;
    border: none;
    padding: 0;
    background: #FFFFFF;
    background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
    box-shadow: 1px 1px 1px #444444;
}
label.checkbox:hover > .btn-icon, label.checkbox > input:checked + .btn-icon,
label.radio:hover > .btn-icon, label.radio > input:checked + .btn-icon {
    color: #000;
    background-image: linear-gradient(to bottom, #e0e0e0 0%, #fff 100%);
    box-shadow: 1px 1px 1px #444444 inset;
    text-shadow: 1px 1px 1px #444444;
}
label.checkbox > input:checked + .btn-icon, label.radio > input:checked + .btn-icon { color: #1365AD; }
label.checkbox > input:checked + .btn-icon.btn-remove-sign, label.radio > input:checked + .btn-icon.btn-remove-sign { color: #a94442; }

/*********************************************************
 * Select (class="select" > a.btn-select + ul.nav-select)
 ********************************************************/
.select { display: inline-block; position: relative; }
.select > a.btn { border: solid 1px #888; border-radius: 0.3rem; color: #444444; background-color: #FFFFFF; line-height: 3rem; }
.select.active > a.btn, .select > a.btn:hover {
    color: #FFFFFF;
    background-color: #1365AD;
}
.select > a.btn:hover, .select.active > a.btn, .select:target > a.btn, .select:not([id]):hover > a.btn {}
.select > a.btn:after {
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    font-size: 1.2rem;
    float: right;
    margin-left: 0.5em;
    content: "\e114";
}
.select > .nav.nav-select {
    display: block;
    visibility: hidden;
    overflow: hidden;
    position: absolute;
    max-height: 0;
    top: 99%;
    left: 0;
    min-width: 100%;
    background-color: #FFFFFF;
    border: solid 1px #DEDEDE;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    transition: max-height 0.2s linear, visibility 0.4s linear;
}
.select.select-bottom-right > .nav.nav-select {}
.select.select-bottom-left  > .nav.nav-select{ left: auto; right: 0; }
.select.select-top-right  > .nav.nav-select{ top: auto; bottom: 99%; }
.select.select-top-left > .nav.nav-select { top: auto; bottom: 99%; left: auto; right: 0; }

.select:target > .nav.nav-select, .select.active > .nav.nav-select, .select:not([id]):hover > .nav.nav-select {
    display: block;
    visibility: visible;
    max-height: 40rem;
    overflow-y: auto;
    transition: max-height 0.5s linear;
    animation: 1.5s overflow-delay;
    z-index: 99;
}
.select > .nav.nav-select > li  {
    display: block;
    line-height: 1.8;
    font-size: 1.4rem;
    white-space: nowrap;
}
.select > .nav.nav-select > li > a  {
    display: block;
    white-space: nowrap;
    width: 100%;
    font-weight: normal;
    line-height: 1.8;
    padding: 0 0.5em;
}
.select > .nav.nav-select > li > a:hover { color: #FFFFFF; background-color: #1365AD; }

.select > .nav.nav-select > li > label.checkbox { display: block; }
.select > .nav.nav-select > li > label.checkbox > span.checkbox,
.select > .nav.nav-select > li > label.radio > span.radio {
    display: block;
    width: auto;
    height: auto;
    cursor: pointer;
    border-radius: 0;
    background-color: #FFFFFF;
    box-shadow: none;
    margin: 0;
    padding: 0.5rem;
    transition: background-color 0.5s ease, color 0.5s ease;
    font-weight: normal;
}
.select > .nav.nav-select > li > label.checkbox > span.checkbox:before,
.select > .nav.nav-select > li > label.radio > span.radio:before { content: none; }

.select > .nav.nav-select > li > label.checkbox > input[type=checkbox]:checked + span.checkbox { background-color: #1365AD; color: #FFFFFF; }
.select > .nav.nav-select > li > label.checkbox:hover > span.checkbox { background-color: #71A8D8; }
.select > .nav.nav-select > li > label.checkbox:hover  > input[type=checkbox]:checked + span.checkbox{ background-color: #71A8D8; }
.select > .nav.nav-select > li > label.checkbox > input[type=checkbox]:disabled + span.checkbox,
.select > .nav.nav-select > li > label.checkbox:hover > input[type=checkbox]:disabled + span.checkbox { background-color: #888888; }

.select > .nav.nav-select > li > label.radio > input[type=radio]:checked + span.radio { background-color: #1365AD; color: #FFFFFF; }
.select > .nav.nav-select > li > label.radio:hover > span.radio { background-color: #71A8D8; }
.select > .nav.nav-select > li > label.radio:hover  > input[type=radio]:checked + span.radio { }
.select > .nav.nav-select > li > label.radio > input[type=radio]:disabled + span.radio,
.select > .nav.nav-select > li > label.radio:hover > input[type=radio]:disabled + span.radio { background-color: #888888; }

/*********************************************************
 * Date selector (input class="datepicker")
 ********************************************************/
.datepicker {
    display: inline-block;
    position: relative;
    overflow: visible;
}
input[type=text].datepicker,
.datepicker > input[type=text] {
    display: inline-block;
    width: 8em;
    min-width: 8em;
    padding-right: 2.8rem;
    background-position: right 0.2rem center;
    background-size: 2.4rem 2.4rem;
    background-repeat: no-repeat;
    background-image: url(/img/icons/888888/calendar.svg);
    overflow: hidden;
}
input[type=text].datepicker:hover, .datepicker > input[type=text]:hover { background-image: url(/img/icons/1365AD/calendar.svg); }
.datepicker > .datepicker {
    display: none;
    position: absolute;
    top: 0;
    right: -28rem;
    width: 28.2rem;
    height: auto;
    border: solid 1px #444;
    box-shadow: 0 0 0.5rem #000;
    border-radius: 0.5rem;
    background: white;
    overflow: hidden;
    z-index: 999;
}
.datepicker > .datepicker > .dtp-head, .datepicker > .datepicker > .dtp-content, .datepicker > .datepicker > .dtp-foot { display: block;  }
.datepicker > .datepicker input[type=button] {
    display: inline-block;
    width: 3.2rem;
    height: 3.2rem;
    min-width: 2.4rem;
    min-height: 2.4rem;
    font-size: 1.8rem;
    line-height: 2.4rem;
    padding: 0;
    margin: 0;
    text-align: center;
    border:none;
}
.datepicker > .datepicker > .dtp-head { height: 3.2rem; line-height: 3.2rem; }
.datepicker > .datepicker > .dtp-head > select {
    font-size: 1.4rem;
    display: inline-block;
    line-height: 3.2rem;
    padding: 0;
    width: 7.5rem;
    min-width: auto;
    margin: 0;
    border: none;
    background: transparent;
    color: #444;
    text-align: center;
}
.datepicker > .datepicker > .dtp-head > .btn-close {
    display: block;
    position: absolute;
    top: -1.4rem;
    left: 50%;
    height: 1.5rem;
    min-height: 1.2rem;
    max-height: 1.2rem;
    width: 4rem;
    margin-left: -2rem;
    background-size: 1.5rem 1.5rem;
    background-position: center center;
    border-radius: 0.6rem 0.6rem 0 0;
    border-top: solid 1px #888;
}
.datepicker > .datepicker > .dtp-content > .dtp-day-label,
.datepicker > .datepicker > .dtp-content > .dtp-day {
    display: inline-block;
    padding: 0;
    margin: 0;
    line-height: 3.2rem;
    border-radius: 0;
    width: 4rem;
    height: 3.2rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem;
    background: #FFFFFF;
    color: #444;
    border-radius: 0;
}
.datepicker > .datepicker > .dtp-content > .dtp-day-label { border: solid 1px white; background-color: #1365AD; color: white;  }
.datepicker > .datepicker > .dtp-content > .dtp-day.dtp-day-we { background: #CCCCCC; color: #888; }
.datepicker > .datepicker > .dtp-content > .dtp-day.dtp-day-prev, .datepicker > .datepicker > .dtp-content > .dtp-day.dtp-day-next { background: #DDDDDD; }
.datepicker > .datepicker > .dtp-content > .dtp-day:hover, .datepicker > .datepicker > .dtp-content > .dtp-day.active {
    background: #1365AD;
    border-color: #444;
    color: white;
}
.datepicker > .datepicker > .dtp-content > .dtp-day.active { border-radius: 2rem; }


/***********************************************************
 * File selector (input type="file" class="file-selector")
 **********************************************************/
.file-selector {
    position: relative;
    padding: 0 !important;
    vertical-align: middle;
    overflow: hidden;
    height: auto !important;
}
.file-selector.alerts {
    position: relative;
    border-color: red;
    top: auto; left: auto; right: auto; bottom: auto;
    background-color: transparent;
}
.file-selector > a.btn-file-selector {
    display: block;
    line-height: 2.3rem;
    font-size: 1.2rem;
    padding: 0 0.4rem;
    margin: 0.2rem;
    background-color: #FFFFFF;
    border: none;
    color: #666666;
}
.file-selector > a.btn-file-selector:hover { background-color: #1365AD; border-color: #1365AD; color: #FFFFFF; }
.file-selector > .file-selector-files { display: block; }
.file-selector > .file-selector-files > .alert { font-size: 1.1rem; }

/**********************************
 * Sortable Vertical
 **********************************/
.sortable-ghost {
    display: block !important;
    position: absolute !important;
    opacity: 0.6 !important;
    box-shadow: 0 0 0.2rem red;
    z-index: 100;
}
.sortable.selected { box-shadow: 0 0 0.4rem black; background-color: #CCCCCC; }