/*ver 1.0*/
@font-face {
    font-family: 'Trebuchet MS';
    src: url('../Fonts/TrebuchetMS.eot');
    src: url('../Fonts/TrebuchetMS.eot?#iefix') format('embedded-opentype'), url('../Fonts/TrebuchetMS.woff') format('woff'), url('../Fonts/TrebuchetMS.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

input[type="radio"],
input[type="checkbox"] {
    margin: 0px;
}

:root {
    --color-light: #ddd;
    --color: #aaa;
    --color-dark: #888;
    --color-vary-dark: #666;
    --primary-color-light: #498797;
    --primary-color: #366c7a;
    --primary-color-dark: #274f59;
    --primary-color-vary-dark: #274f59;
    --danger-color-light: #d27979;
    --danger-color: #bf4040;
    --danger-color-dark: #993333;
    --danger-color-vary-dark: #602020;
    --success-color-light: #499779;
    --success-color: #4eb14e;
    --success-color-dark: #275934;
    --success-color-vary-dark: #275939;
    --font-size-small: 12px;
    --font-size: 14px;
    --font-size-large: 16px;
    --line-height: 28px;
    --control-height: 30px;
    --control-padding: 6px 12px;
    --input-check-radio-size-small: 16px;
    --input-check-radio-size: 20px;
    --input-check-radio-size-large: 24px;
}

.gis-form-small {
    --font-size-small: 11px;
    --font-size: 12px;
    --font-size-large: 14px;
    --control-height: 26px;
    --control-padding: 4px 12px;
}

.gis-form-large {
    --font-size-small: 16px;
    --font-size: 18px;
    --font-size-large: 22px;
    --control-height: 34px;
    --control-padding: 8px 12px;
}

.gis-form-color-primary {
    color: var(--primary-color) !important;
}

.gis-form-color-danger {
    color: var(--danger-color) !important;
}

.gis-form-color-success {
    color: var(--success-color) !important;
}

.gis-form-rounded {
    border-radius: 15px !important;
}

.gis-form-align-top {
    align-items: flex-start !important;
}

.gis-form-align-middle {
    align-items: center !important;
}

.gis-form-align-bottom {
    align-items: flex-end !important;
}

.gis-form-no-grow {
    flex-grow: 0 !important;
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #fff;
}

::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
    border-radius: 10px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    box-shadow: inset 0 0 6px #aaa;
    background-color: #bbb;
    border: 2px solid #fff;
}

/*multipleselect*/
.ms-choice > div.icon-caret {
    border-color: #444 transparent transparent transparent;
    border-width: 5px 5px 0 5px
}

.ms-choice > div.icon-caret.open {
    border-color: transparent transparent #444 transparent;
    border-width: 0 5px 5px 5px;
}

/*Bootstrap redefine*/
.form-control {
    font-size: var(--font-size);
    line-height: var(--font-size);
    height: var(--control-height);
    box-shadow: none;
    border-radius: 3px;
}

.dropdown-menu > li > a {
    padding: var(--control-padding);
}

.btn {
    font-size: var(--font-size);
    line-height: var(--font-size);
    height: var(--control-height);
    border-radius: 3px;
}

.btn .caret:last-child:not(:first-child) {
    margin-left: 5px;
}

.btn-group a > i, .btn > i {
    width: 15px;
    text-align: center;
}

.btn-group a > i + span, .btn > i + span {
    margin-left: 5px;
}

/*Timepicker redefine*/
.timepicker .btn {
    height: auto !important;
}

/*Tabulator 5 redefine*/
/* TABULATOR */
.tabulator {
    border: 0px solid #fff;
    font-size: var(--font-size);
}

.tabulator .tabulator-header {
    border-bottom: 1px solid #ddd;
}

.tabulator .tabulator-header .tabulator-col {
    background-color: #ebedf4;
    border: 0px solid #fff;
    border-right: 1px solid #ddd;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background-color: #e4e4e8;
}

.tabulator-row {
    min-height: var(--control-height);
}

.tabulator-row.tabulator-row-even {
    background-color: #f7f7fa;
}

.tabulator-row.tabulator-selected {
    background-color: #92abcc9c;
}

.tabulator-row .tabulator-cell {
    border-right: 1px solid #ddd;
}

.tabulator-row.tabulator-selectable:hover {
    background-color: #fdfdc4 !important;
    cursor: pointer;
}

.tabulator-row.tabulator-selected:hover,
.tabulator-row.tabulator-selectable:hover {
    background-color: #d9e1eb !important;
    cursor: pointer;
}

.tabulator .tabulator-tableHolder {
    overflow: visible;
}


.rowSelection {
    text-align: center !important;
}

.tabulator__footer {
    /*position: relative;*/
    min-width: 600px;
    width: 100%;
    background-color: #fff;
}

.tabulator__footer select,
.tabulator__footer input {
    padding-top: 5px;
}

.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
    font-size: 16px;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 6px;
}

.tabulator-col-title input[type=checkbox] {
    margin-left: 2px;
}

.tabulator-col-title input[type=checkbox]:focus,
.tabulator-cell input[type=checkbox]:focus {
    outline: none !important;
}

.tabulator-col-title input[type=checkbox],
.tabulator-cell input[type=checkbox] {
    appearance: none;
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #333;
    background-color: #fff !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    text-align: center;
    outline: none;
}

.tabulator-col-title input[type=checkbox]:before,
.tabulator-cell input[type=checkbox]:before {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    content: " ";
    outline: none;
    border: 0 !important;
}

.tabulator-col-title input[type=checkbox]:checked:before,
.tabulator-cell input[type=checkbox]:checked:before {
    content: "\f00c";
}

.tabulator-col-title input[type=checkbox]:indeterminate:before,
.tabulator-cell input[type=checkbox]:indeterminate:before {
    content: "\f068";
}

.tabulator-col-title input[type=checkbox]:disabled:before,
.tabulator-cell input[type=checkbox]:disabled:before {
    background-color: #F0F0F0 !important;
    cursor: not-allowed;
}

.tabulator-col-title input[type=checkbox]:not(:disabled):hover,
.tabulator-cell input[type=checkbox]:not(:disabled):hover {
    transition-property: width, height, background-color, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: linear;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--primary-color-light);
    border-color: var(--primary-color-light);
    background-color: #fefeff;
    cursor: pointer;
    color: #000;
    text-decoration: none;
    z-index: 2;
}

.tabulator-col-title input[type=checkbox]:focus,
.tabulator-cell input[type=checkbox]:focus {
    border: 1px solid var(--primary-color-light) !important;
    outline: none !important;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--primary-color-light);
    color: #444;
    z-index: 2;
}

.tabulator-cell .gis-form-control-horizontal {
    margin-top: 3px;
}

/*GIS-FORM
 Su base Bootstrap 3
*/
.gis-form-vertical {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: start;
    gap: 10px;
}

.gis-form-horizontal {
    position: relative;
    flex: 1 1 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;					
    align-items: stretch;
    gap: 10px;
}

.gis-form-nowrap {
    flex-wrap: nowrap;
}

.gis-form-alignright {
    justify-content: end;
}

.gis-form-control-vertical {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}


.gis-form-control-horizontal {
    position: relative;
    flex: 1 1 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.gis-form-vertical > *,
.gis-form-horizontal > * {
    flex: 1 1 0px;
}

.gis-form-header1 {
    display: flex;
    flex-direction: row;
    gap: 15px;
    font-family: Helvetica,Arial,sans-serif;
    align-items: center;
}

.gis-form-vertical .gis-form-header1 {
    margin-bottom: 15px;
}

.gis-form-right {
    justify-content: end;
}

.gis-form-left {
    justify-content: start;
}

.gis-form-center {
    justify-content: center;
}

.gis-form-header1 > i {
    font-size: 24px;
}

.gis-form-header1 > span {
    font-size: 30px;
}

.gis-form-header2 {
    display: flex;
    flex-direction: row;
    gap: 10px;
    font-family: Helvetica,Arial,sans-serif;
    align-items: center;
    margin-bottom: 12px;
}

.gis-form-vertical .gis-form-header2 {
    margin-bottom: 12px;
}

.gis-form-header2 > i {
    font-size: 20px;
}

.gis-form-header2 > span {
    font-size: 26px;
}

.gis-form-header3 {
    display: flex;
    flex-direction: row;
    gap: 8px;
    font-family: Helvetica,Arial,sans-serif;
    align-items: center;
    margin-bottom: 10px;
}

.gis-form-vertical .gis-form-header3 {
    margin-bottom: 10px;
}

.gis-form-header3 > i {
    font-size: 18px;
}

.gis-form-header3 > span {
    font-size: 22px;
}

.gis-form-header4 {
    display: flex;
    flex-direction: row;
    gap: 8px;
    font-family: Helvetica,Arial,sans-serif;
    align-items: center;
    margin-bottom: 10px;
}

.gis-form-vertical .gis-form-header4 {
    margin-bottom: 10px;
}

.gis-form-header4 > i {
    font-size: 16px;
}

.gis-form-header4 > span {
    font-size: 18px;
}

.gis-form-header5 {
    display: flex;
    flex-direction: row;
    gap: 8px;
    font-family: Helvetica,Arial,sans-serif;
    align-items: center;
    margin-bottom: 10px;
}

.gis-form-vertical .gis-form-header5 {
    margin-bottom: 5px;
}

.gis-form-header5 > i {
    font-size: 14px;
}

.gis-form-header5 > span {
    font-size: 16px;
}

.gis-form-label {
    font-family: "Trebuchet MS", Arial;
    font-weight: bold;
    font-size: var(--font-size-small);
    text-align: justify;
    margin-bottom: 0;
    line-height: 18px;
}

.gis-form-label[for] {
    cursor: pointer;
}

.gis-form-span {
    height: var(--control-height);
    max-height: var(--control-height);
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-family: "Trebuchet MS", Arial;
    font-weight: bold;
    font-size: 12px;
    padding: var(--control-padding);
    text-align: justify;
    margin-bottom: 0;
}

.gis-form-text {
    flex-grow: 1;
    box-sizing: border-box;
    height: var(--control-height);
    max-height: var(--control-height);
    white-space: nowrap;
    outline: none;
    font-family: Helvetica,Arial,sans-serif;
    font-size: var(--font-size);
    padding: var(--control-padding);
    align-self: stretch;
}

.gis-form-text-wrap {
    flex-grow: 1;
    box-sizing: border-box;
    outline: none;
    font-family: Helvetica,Arial,sans-serif;
    font-size: var(--font-size);
    padding: var(--control-padding);
    align-self: stretch;
}


.gis-form-control-horizontal > .gis-form-label:first-child,
.gis-form-control-horizontal > .gis-form-span:first-child {
    flex: 0 0 0px;
    align-self: center;
}

.gis-form-input {
    flex-grow: 1;
    box-sizing: border-box;
    height: var(--control-height);
    max-height: var(--control-height);
    border: 1px solid #ddd;
    border-radius: 3px;
    outline: none;
    font-family: Helvetica,Arial,sans-serif;
    font-size: var(--font-size);
    line-height: var(--font-size);
    padding: var(--control-padding);
    align-self: stretch;
}

.gis-form-input:disabled {
    background-color: #F0F0F0 !important;
    cursor: not-allowed;
}

.gis-form-select {
    flex-grow: 1;
    box-sizing: border-box;
    height: var(--control-height);
    max-height: var(--control-height);
    border: 1px solid #ddd;
    border-radius: 3px;
    outline: none;
    font-family: Helvetica,Arial,sans-serif;
    font-size: var(--font-size);
    padding: 4px 8px;
}

.gis-form-multipleselect {
    flex-grow: 1;
    box-sizing: border-box;
    height: var(--control-height);
    max-height: var(--control-height);
    font-family: Helvetica,Arial,sans-serif;
    font-size: var(--font-size);
    width: 100%;
}

.gis-form-multipleselect li {
    height: 24px;
}

.gis-form-multipleselect .ms-choice {
    flex-grow: 1;
    height: var(--control-height);
    line-height: var(--control-height);
    border-radius: 3px;
    border: 1px solid #ddd;
}

.gis-form-multipleselect .ms-drop li > label {
    display: flex;
}

.gis-form-multipleselect .ms-drop li > label > span {
    margin-left: 10px;
    font-size: var(--font-size);
}

.gis-form-control-horizontal:has(>.gis-form-label) {
    gap: 10px;
}

.gis-form-multipleselect .ms-drop ul > li:hover {
    background-color: #f7f7fb !important;
}

.gis-form-multipleselect .ms-drop input[type="radio"],
.gis-form-multipleselect .ms-drop input[type="checkbox"] {
    margin-top: 2px;
}


.gis-form-group-start,
.gis-form-group-start > .ms-choice {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right-width: 0 !important;
}

.gis-form-group-middle,
.gis-form-group-middle > .ms-choice {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-right-width: 0 !important;
}

.gis-form-group-end,
.gis-form-group-end > .ms-choice {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.gis-form-textarea {
    flex-grow: 1;
    box-sizing: border-box;
    min-height: var(--control-height);
    border-radius: 3px;
    border: 1px solid #ddd;
    outline: none;
    font-family: Helvetica,Arial,sans-serif;
    font-size: var(--font-size);
    padding: var(--control-padding);
}

.gis-form-vertical > .gis-form-input, .gis-form-vertical > .gis-form-textarea {
    width: 100%;
}

.gis-form-input[required], .gis-form-textarea[required], .gis-form-button[required], .gis-form-multipleselect[required] .ms-choice {
    border-color: var(--primary-color-light);
}

.gis-form-img {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 1px solid #ddd;
    padding: 5px;
}

.gis-form-iconbutton {
    flex-grow: 0;
    font-family: Helvetica,Arial,sans-serif;
    font-size: var(--font-size);
    box-sizing: border-box;
    background-color: transparent;
    border: 0px;
    /*padding: var(--control-padding);*/
    padding: 0;
    margin: 0;
    line-height: var(--font-size);
    border-radius: 3px;
    display: flex;
    gap: 10px;
    align-items: center;
    height: var(--control-height);
    color: #444;
    align-self: center;
    max-width: var(--control-height);
    min-width: var(--control-height);
    max-height: var(--control-height);
    min-height: var(--control-height);
    justify-content: center;
}

.gis-form-button {
    flex-grow: 0;
    font-family: Helvetica,Arial,sans-serif;
    font-size: var(--font-size);
    line-height: var(--font-size);
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: var(--control-padding);
    margin: 0;
    border-radius: 3px;
    display: flex;
    gap: 10px;
    align-items: center;
    height: var(--control-height);
    color: #444;
    align-self: center;
}

.gis-form-button-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color-dark);
}

.gis-form-button-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.gis-form-button-danger {
    color: #fff;
    background-color: var(--danger-color);
    border-color: var(--danger-color-dark);
}

.gis-form-button-primary:not(:disabled):hover {
    color: #fff !important;
    background-color: var(--primary-color-dark) !important;
    border-color: var(--primary-color-vary-dark) !important;
}

.gis-form-button-success:not(:disabled):hover {
    color: #fff !important;
    background-color: #449d44 !important;
    border-color: #398439 !important;
}

.gis-form-button-danger:not(:disabled):hover {
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--danger-color-light) !important;
    background-color: var(--danger-color-dark) !important;
    border-color: var(--danger-color-vary-dark) !important;
    color: #fff !important;
}

.gis-form-button:disabled,
.gis-form-iconbutton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.gis-form-button i,
.gis-form-iconbutton i {
    font-size: var(--font-size-large);
    min-width: 10px;
}

.gis-form-button span {
    font-size: var(--font-size);
    white-space: nowrap;
}

.gis-form-input[type=file] {
    position: relative;
    padding-top: 7px;
    outline: none;
}

.gis-form-input[type=file]:focus {
    outline: none;
    border: 1px solid var(--primary-color-light) !important;
    outline: none !important;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--primary-color-light);
    color: #444;
}

.gis-form-input[type=file]:disabled::file-selector-button {
    opacity: 0.6;
    cursor: not-allowed;
}

.gis-form-input[type=file]::file-selector-button {
    flex-grow: 0;
    border: 0;
    box-sizing: border-box;
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color-dark);
    padding: var(--control-padding);
    margin: 0;
    line-height: var(--font-size);
    display: flex;
    gap: 5px;
    align-items: center;
    height: 32px;
    align-self: center;
    position: absolute;
    right: -2px;
    top: -1px;
}

.gis-form-input[type=file]:not(:disabled)::file-selector-button:hover {
    color: #fff !important;
    background-color: var(--primary-color-dark) !important;
    border-color: var(--primary-color-vary-dark) !important;
    cursor: pointer;
}


.gis-form-checkbox {
    flex: 0 0 0px;
    appearance: none;
    display: block;
    min-width: var(--input-check-radio-size);
    min-height: var(--input-check-radio-size);
    max-width: var(--input-check-radio-size);
    max-height: var(--input-check-radio-size);
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #333;
    background-color: #fff !important;
    text-align: center;
    outline: none;
}

.gis-form-multipleselect .gis-form-checkbox {
    min-width: var(--input-check-radio-size-small);
    min-height: var(--input-check-radio-size-small);
    max-width: var(--input-check-radio-size-small);
    max-height: var(--input-check-radio-size-small);
}

    .gis-form-multipleselect .gis-form-checkbox:before {
        font-size: var(--font-size-small);
        line-height: var(--font-size-large);
    }

.gis-form-checkbox:before {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    content: " ";
    outline: none;
    border: 0 !important;
}

.gis-form-checkbox:checked:before {
    content: "\f00c";
}

.gis-form-checkbox:indeterminate:before {
    content: "\f068";
}

.gis-form-checkbox:disabled {
    background-color: #F0F0F0 !important;
    cursor: not-allowed;
}

.gis-form-radio {
    flex: 0 0 0px;
    appearance: unset;
    display: block;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    border: 1px solid #ddd;
    border-radius: 50px;
    color: #333;
    text-align: center;
}

.gis-form-radio:before {
    display: block;
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 600;
    font-size: 11px;
    line-height: 18px;
    content: "";
}

.gis-form-radio:checked:before {
    content: "\f111";
}

.gis-form-radio:disabled {
    background-color: #F0F0F0 !important;
    cursor: not-allowed;
}

.gis-form-checkbox:focus,
.gis-form-radio:focus {
    outline: none !important;
}

.gis-form-input:not(:disabled):hover,
.gis-form-select:not(:disabled):hover,
.gis-form-multipleselect .ms-choice:not(.disabled):hover,
.gis-form-textarea:not(:disabled):hover,
.gis-form-button:not(:disabled):hover,
.gis-form-checkbox:not(:disabled):hover,
.gis-form-radio:not(:disabled):hover,
.gis-form-switch:has(input:not(:disabled)):hover {
    transition-property: width, height, background-color, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: linear;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--primary-color-light);
    border-color: var(--primary-color-light);
    background-color: #fefeff;
    cursor: pointer;
    color: #000;
    text-decoration: none;
    z-index: 2;
}

.gis-form-iconbutton:not(:disabled):hover {
    transition-property: width, height, background-color, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: linear;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--primary-color-light);
    cursor: pointer;
    text-decoration: none;
    z-index: 2;
}

.gis-form-input:disabled:hover,
.gis-form-input[type=file]:disabled:hover
.gis-form-select:disabled:hover,
.gis-form-multipleselect .ms-choice.disabled:hover,
.gis-form-textarea:disabled:hover,
.gis-form-iconbutton:disabled:hover,
.gis-form-button:disabled:hover,
.gis-form-checkbox:disabled:hover,
.gis-form-radio:disabled:hover {
    cursor: not-allowed;
}

.gis-form-input:not(:read-only):focus,
.gis-form-select:not(:read-only):focus,
.gis-form-textarea:not(:read-only):focus,
.gis-form-button:not(:read-only):focus,
.gis-form-checkbox:focus,
.gis-form-radio:focus {
    border: 1px solid var(--primary-color-light) !important;
    outline: none !important;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--primary-color-light);
    color: #444;
}

.gis-form-iconbutton:not(:read-only):focus {
    outline: none !important;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--primary-color-light);
}

/*--------------
    SWITCH
*/
.gis-form-switch {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 56px;
    height: 24px;
    border-radius: 18px;
    cursor: pointer;
    flex-grow: 0;
    min-width: 40px;
    white-space: nowrap;
}

.gis-form-switch:has(input[disabled]) {
    opacity: 0.6;
}

.gis-form-switch__greenred {
}

.gis-form-switch-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: pointer;
}

.gis-form-switch-label {
    position: relative;
    display: block;
    white-space: nowrap;
    height: inherit;
    font-size: 10px;
    text-transform: uppercase;
    background: #eceeef;
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
    -webkit-transition: 0.15s ease-out;
    -moz-transition: 0.15s ease-out;
    -o-transition: 0.15s ease-out;
    transition: 0.15s ease-out;
    -webkit-transition-property: opacity background;
    -moz-transition-property: opacity background;
    -o-transition-property: opacity background;
    transition-property: opacity background;
}

.gis-form-switch__greenred .gis-form-switch-label {
    background: var(--danger-color);
}

.gis-form-switch-label:before, .gis-form-switch-label:after {
    position: absolute;
    top: 50%;
    margin-top: -.5em;
    line-height: 1;
    -webkit-transition: inherit;
    -moz-transition: inherit;
    -o-transition: inherit;
    transition: inherit;
}

.gis-form-switch-label:before {
    content: attr(data-off);
    right: 11px;
    color: #aaa;
    text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}

.gis-form-switch-label:after {
    content: attr(data-on);
    left: 11px;
    color: white;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    opacity: 0;
}

.gis-form-switch-input:checked ~ .gis-form-switch-label {
    background: var(--primary-color);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}

.gis-form-switch__greenred .gis-form-switch-input:checked ~ .gis-form-switch-label {
    background: var(--success-color);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}

.gis-form-switch__greenred .gis-form-switch-label:before,
.gis-form-switch__greenred .gis-form-switch-label:after {
    color: white;
    text-shadow: 0 1px rgba(0, 0, 0, 0.6);
}

.gis-form-switch-input:checked ~ .gis-form-switch-label:before {
    opacity: 0;
}

.gis-form-switch-input:checked ~ .gis-form-switch-label:after {
    opacity: 1;
}

.gis-form-switch-handle {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
    background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
    background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
    background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
    -webkit-transition: left 0.15s ease-out;
    -moz-transition: left 0.15s ease-out;
    -o-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
}

.gis-form-switch-handle:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -6px;
    width: 12px;
    height: 12px;
    background: #f9f9f9;
    border-radius: 6px;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
    background-image: -webkit-linear-gradient(top, #eeeeee, white);
    background-image: -moz-linear-gradient(top, #eeeeee, white);
    background-image: -o-linear-gradient(top, #eeeeee, white);
    background-image: linear-gradient(to bottom, #eeeeee, white);
}

.gis-form-switch-input:checked ~ .gis-form-switch-handle {
    right: 1px;
    left: auto;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

.gis-form-switch-green > .gis-form-switch-input:checked ~ .gis-form-switch-label {
    background: #4fb845;
}