#frame_contents #mtop_title_block {
  display: flex;
  height: var(--main_title_height);
  justify-content: space-between;
}


#frame_contents #mtop_title_block #mtop_title {
  line-height: var(--main_title_height);
  vertical-align: bottom;
}
#frame_contents #mtop_title_block #mtop_title .title {
  flex: 1;
  display: inline-block;
  color: var(--color_text_title);
  font-size: 1.3em;
  font-weight: bold;
  margin-left: 0;
}

#frame_contents #mtop_title_block #mtop_title .top_breadcrumb {
  flex: 1;
  display: inline-block;
  margin-left: 1em;
}

#frame_contents #mtop_title_block #mtop_btn_group {
  line-height: var(--main_title_height);
}
#frame_contents #mtop_title_block #mtop_btn_group * {
  vertical-align: text-top;
}


#frame_contents #mtop_search {
  height: var(--main_search_height);
  border-radius: 6px;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
}
#frame_contents #mtop_search .search_item {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 0px;
  margin-left: 1em;
}
#frame_contents #mtop_search .search_item .label_title {
  display: inline-block;
  font-weight: bold;
  min-width: 5em;
  text-align: right;
  padding-right: 10px;
}
#frame_contents #mtop_search .search_item input:not([type=radio]):not([type=checkbox]),
#frame_contents #mtop_search .search_item select {
  min-width: 100px;
}

#frame_contents #main_content {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 25px;
}
#frame_contents #main_content.dashboard {
  background-image: url(/inc/img/main_bg.png);
  border-radius: 3px;
  height: calc(100vh - 160px);
  background-size: cover;
}
#frame_contents #main_content .ctop_title, .ctop_title {
  display: flex;
  justify-content: space-between;
}
#frame_contents #main_content .ctop_title .content_title, .ctop_title .content_title {
  font-size: 1.1em;
  font-weight: bold;
  color: #666;
  padding-left: 10px;
  min-height: 30px;
}
#frame_contents #main_content .tbl_block {
  width:100%;
  overflow: auto;
  margin-top: 6px;
  /*height: 500px;*/
}
#frame_contents #main_content .tbl_block .tabulator-tableholder::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: var(--color_bg_scroll_main);
}
#frame_contents #main_content .tbl_block .tabulator-tableholder::-webkit-scrollbar-thumb {
  background-color: var(--color_bg_scroll_float);
}



#frame_body #hamburger_icon {
  position: absolute;
  display: block;
  background: var(--frame_main_bg);
  top: 1px;
  left: 0;
  height: 2em;
  z-index: 1000;
  border: 1px solid var(--frame_bgcolor_sidebar);
  border-left: none;
  border-start-end-radius: 5px;
  border-end-end-radius: 5px;
  padding: 2px 3px;
  cursor: pointer;
}

#frame_body #hamburger_icon .icon {
  width: 0.8em;
  font-size: 1.5em;
  text-align: center;
  color: var(--color_border_table_top);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display,inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-transition: all 0.5s;
  transition: left 0.5s;
}
#frame_body #hamburger_icon .icon::before {
  content: "\f0d9";
}
.full_width #frame_body #hamburger_icon .icon::before {
  content: "\f0da";
}

#frame_body .dashboard{
  background-image: url(/ksvc/img/main_bg.png);
}

.pop_top_title {
  line-height: 1.6em;
  vertical-align: bottom;
  padding: 0px 10px 24px 10px;
}
.pop_top_title .title {
  flex: 1;
  display: inline-block;
  color: #666;
  font-size: 1.3em;
  font-weight: bold;
  margin-left: 0;
}


.contents_multi_column {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.contents_multi_column .contents_column_list {
  display: grid;
  /*overflow: auto; 재고현황 문제*/
  overflow: hidden;
  align-content: stretch;
}
.contents_multi_column .has_full {
  grid-template-rows: 100%;
}
.contents_multi_column .has_title {
  grid-template-rows: 20px 100%;
}
.contents_multi_column .has_title_sk {
  grid-template-rows: 30px calc(100% - 40px);
}
.contents_multi_column .contents_column_list:not(:first-child).has_title_sk {
  grid-template-rows: 30px calc(100% - 50px);
}
.contents_multi_column .has_title .article_title + div {
  height: calc(100% - 30px);
}
.contents_multi_column .contents_column_list:not(:first-child) {
  margin-top: 10px;
}
.contents_multi_column .column_size_0{
  height:0;
}
.contents_multi_column .column_size_1{
  height:10%;
}
.contents_multi_column .column_size_2{
  height:20%;
}
.contents_multi_column .column_size_3{
  height:30%;
}
.contents_multi_column .column_size_4{
  height:40%;
}
.contents_multi_column .column_size_5{
  height:50%;
}
.contents_multi_column .column_size_5_1{
  height: calc(50% - 20px);
}
.contents_multi_column .column_size_6{
  height:60%;
}
.contents_multi_column .column_size_7{
  height:70%;
}
.contents_multi_column .column_size_8{
  height:80%;
}
.contents_multi_column .column_size_9{
  height:90%;
}
.contents_multi_column .column_size_10{
  height:100%;
}
.contents_multi_column .contents_column_list .column_tb_lator {
  margin-top: 6px;
  height:100%;
}
.tb_mh_5 {
  min-height: calc(50vh - 147px); /* 200 + 각title 20 */
}


.contents_multi_block {
  display: flex;
  justify-content: space-between;
  overflow: auto;
}
.contents_multi_block.wrap{
  flex-wrap: wrap;
}
.contents_multi_block .cotents_multi_list {
  flex: 1;
}
.contents_column_list .cotents_multi_list {
  display: grid;
}
.contents_multi_block .cotents_multi_list:not(:first-child) {
  margin-left: 20px;
}
.contents_multi_block .block_size_0 {
  flex: 0;
}
.contents_multi_block .block_size_1 {
  flex: 1;
}
.contents_multi_block .block_size_2 {
  flex: 2;
}
.contents_multi_block .block_size_3 {
  flex: 3;
}
.contents_multi_block .block_size_4 {
  flex: 4;
}
.contents_multi_block .block_size_5 {
  flex: 5;
}
.contents_multi_block .block_size_6 {
  flex: 6;
}
.contents_multi_block .block_size_7 {
  flex: 7;
}
.contents_multi_block .block_size_8 {
  flex: 8;
}
.contents_multi_block .block_size_9 {
  flex: 9;
}
.contents_multi_block .block_size_10 {
  flex: 10;
}
.contents_multi_block .block_size_11 {
  flex: 11;
}
.contents_multi_block .block_size_12 {
  flex: 12;
}


/* 조업시간 캘린더 */
#scalendar {

}
#scalendar .calTable {
  width: 100%;
  height: calc( 100% - 100px );
}
#scalendar .calTable th,
#scalendar .calTable td {
  width: calc( 100% / 7 );
}
#scalendar .calTable thead {
  background-color: var(--color_bg_table_title);
  border-right: 1px solid var(--color_border_table_hright);
}
#scalendar .calTable thead th,
#scalendar .calTable thead td {
  line-height: 200%;
  text-align: center;
  border-top: 1px solid var(--color_border_table_top);
  border-left: 1px solid var(--color_border_table_hright);
}
#scalendar .calTable tbody {
  border-bottom: 1px solid var(--color_border_table_bottom);
  border-right: 1px solid var(--color_border_table_rline);
}
#scalendar .calTable tbody th,
#scalendar .calTable tbody td {
  min-height: calc( 100% / 6 );
  border-top: 1px solid var(--color_border_table_bline);
  border-left: 1px solid var(--color_border_table_rline);
  position: relative;
  vertical-align: top;
}
#scalendar .calTable tbody td .calcls {
  display: block;
  padding: 6px 0 0 6px;
  font-weight: bold;
}
#scalendar .calTable tbody tr th:first-child .calcls,
#scalendar .calTable tbody tr td:first-child .calcls {
  color: var(--color_text_tsub);
}
#scalendar .calTable tbody tr th:last-child .calcls,
#scalendar .calTable tbody tr td:last-child .calcls {
  color: var(--color_text_title);
}
#scalendar .calTable tbody tr th .caltext label,
#scalendar .calTable tbody tr td .caltext label {
  /*display: block;*/
  padding-left: 10px;
  margin-bottom: 2px;
}

#scalendar .selDiv {
  text-align: center;
  margin-bottom: 0.5em;
}
#scalendar .selDiv a i {
  display: inline-block;
  font-size: 1.6em;
  margin: 0 0.5em;
  vertical-align: middle;
}

#main_content .float-btn {
  position: absolute;
  top: 0px;
  right: 0px;
}


/* 기본테이블 */
.basetable {
  width: 100%;
  border-collapse: separate;
  border-bottom: 1px solid var(--color_border_table_bottom);
}
.basetable th {
  text-align: center;
  background-color: var(--color_bg_table_title);
  border-top: 1px solid var(--color_border_table_top);
  border-bottom: 1px solid var(--color_border_table_hbottom);
  color: var(--color_text_dsub); font-weight: normal;
  height: 26px;
}
.basetable th:not(:first-child) {
  border-left: 1px solid var(--color_border_table_hright);
}
.basetable td {
  white-space: nowrap;
  text-align: center;
  border-bottom: 1px solid var(--color_border_table_bline);
  height: 26px;
}
.basetable td:not(:last-child:first-child) {
  border-left: 1px solid var(--color_border_table_rline);
}
.basetable td:last-child:first-child {
  border-right: 1px solid var(--color_border_table_rline);
}
.basetable thead.top_sticky, .basetable thead.top_sticky th {
  position: sticky;
  top:0;
  left:0;
}


/* 타임라인 챠트용 */
.sg-gantt {
  border-top: 1px solid var(--color_border_table_top);
  border-bottom: 1px solid var(--color_border_table_bottom);
}
.sg-gantt .sg-header,
.sg-gantt .sg-table-header {
  background-color: var(--color_bg_table_title);
}
.sg-gantt .column-header-cell.svelte-1eoeq9j.svelte-1eoeq9j {
  border-right: 1px solid var(--color_border_table_hright);
  border-bottom: 1px solid var(--color_border_table_hbottom);
}
.sg-gantt .sg-task {
  border-radius: 3px;
  overflow: hidden;
  border: solid 1px #424242;
  cursor: all-scroll;
  text-shadow: 1px 1px 3px black;
}
.sg-gantt .sg-task.selected.svelte-6l5eiz {
  outline: none;
}

.sg-gantt .sg-task.color1 {
  color: #212121;
  background-color: #eceff1;
}
.sg-gantt .sg-task.color1.selected {
  color: #212121;
  background-color: #fafafa;
}

.sg-gantt .sg-task.color2 {
  color: #212121;
  background-color: #cfd8dc;
}
.sg-gantt .sg-task.color2.selected {
  color: #212121;
  background-color: #f5f5f5;
}

.sg-gantt .sg-task.color3 {
  color: #212121;
  background-color: #b0bec5;
}
.sg-gantt .sg-task.color3.selected {
  color: #212121;
  background-color: #eeeeee;
}

.sg-gantt .sg-task.color4 {
  color: #212121;
  background-color: #90a4ae;
}
.sg-gantt .sg-task.color4.selected {
  color: #212121;
  background-color: #e0e0e0;
}

.sg-gantt .sg-task.color5 {
  background-color: #78909c;
}
.sg-gantt .sg-task.color5.selected {
  background-color: #bdbdbd;
}

.sg-gantt .sg-task.color6 {
  background-color: #607d8b;
}
.sg-gantt .sg-task.color6.selected {
  background-color: #9e9e9e;
}

.sg-gantt .sg-task.color7 {
  background-color: #546e7a;
}
.sg-gantt .sg-task.color7.selected {
  background-color: #757575;
}

.sg-gantt .sg-task.color8 {
  background-color: #455a64;
}
.sg-gantt .sg-task.color8.selected {
  background-color: #616161;
}

.sg-gantt .sg-task.color9 {
  background-color: #37474f;
}
.sg-gantt .sg-task.color9.selected {
  background-color: #424242;
}

.sg-gantt .sg-task.color10, .sg-gantt .sg-task.color0 {
  background-color: #263238;
}
.sg-gantt .sg-task.color10.selected, .sg-gantt .sg-task.color0.selected {
  background-color: #212121;
}

.sg-gantt .sg-task.selected {
  /*
  border-top-width: 2px;
  border-bottom-width: 2px;*/
}

.sg-task.selected.svelte-6l5eiz {
  z-index: 3;
}

.sg-gantt .sg-task.dragging-enabled {
  z-index: 2;
}

.sg-gantt .sg-task.dragging-enabled.svelte-6l5eiz:hover::after,
.sg-gantt .sg-task.dragging-enabled.svelte-6l5eiz:hover::before {
  border-color: #666;
}

.sg-gantt .sg-time-range-control {
  display: none;
}

.off_hours {
  background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0) 46%, #666666 49%, #595858 51%, rgba(0, 0, 0, 0) 55%) !important;
}

.main_form, .main_box {
  position: relative;
  background-color: #fff;
  padding: 10px;
  height: 100%;
  overflow: auto;
  margin-top: 6px;
  border-top: 1px solid var(--color_border_table_top);
}
.main_form .fld-block {
  display: flex;
  border-bottom: solid 1px #e4e4e4;
  padding-bottom: 6px;
  padding-top: 8px;
}

.main_form .fld-block .btn-group label {
  white-space: nowrap;
}

.main_form label.title {
  min-width: 100px;
  border-right: solid 1px gray;
  padding-right: 12px;
  margin-right: 12px;
  text-align: right;
  margin-bottom: 0px;
}

.main_form .fld-bottom {
  position: sticky;
  bottom:0;
  left:0;
  text-align: center;
  padding: 6px;
  margin-top: 6px;
  background-color: #E8E8E8;
  z-index: 1;
}

.main_form .btnClose {
  position: sticky;
  top: 0px;
  left: 0px;
}

.main_form .btn-group > .btn {
  font-size: 12px;
}

.main_form.member_info {
  padding: 20px;
}
.main_form .disabled {
  background-color: #F0f0f0;
  border: none;
}

#attfilepond, #rdrawfilepond{
  position: absolute;
  top: -10000px;
  left: -10000px;
}


/* 기타 ETC ... ??? */

input.cals {
  background-image: url(/ksvc/inc/img/cals.png);
  background-repeat: no-repeat;
  background-position: right;
}

.s_exp {
  font-size: 0.8em;
  color: darkcyan;
}

.d-hide {
  display: none !important;
}

#loading_div {
  position: fixed;
  width: 100vw;
  height: 100vh;
  line-height: 100vh;
  top: 0px;
  left: 0px;
  background: #00000055;
  z-index: 1000;
  text-align: center;
}

/*.sg-gantt .sg-task.color1 {*/
/*  background-color: #d32f2f;*/
/*}*/
/*.sg-gantt .sg-task.color1.selected {*/
/*  background-color: #b71c1c;*/
/*}*/

/*.sg-gantt .sg-task.color2 {*/
/*  background-color: #7b1fa2;*/
/*}*/
/*.sg-gantt .sg-task.color2.selected {*/
/*  background-color: #4a148c;*/
/*}*/

/*.sg-gantt .sg-task.color3 {*/
/*  background-color: #303f9f;*/
/*}*/
/*.sg-gantt .sg-task.color3.selected {*/
/*  background-color: #1a237e;*/
/*}*/

/*.sg-gantt .sg-task.color4 {*/
/*  background-color: #0288d1;*/
/*}*/
/*.sg-gantt .sg-task.color4.selected {*/
/*  background-color: #01579b;*/
/*}*/

/*.sg-gantt .sg-task.color5 {*/
/*  background-color: #00796b;*/
/*}*/
/*.sg-gantt .sg-task.color5.selected {*/
/*  background-color: #004d40;*/
/*}*/

/*.sg-gantt .sg-task.color6 {*/
/*  background-color: #689f38;*/
/*}*/
/*.sg-gantt .sg-task.color6.selected {*/
/*  background-color: #33691e;*/
/*}*/

/*.sg-gantt .sg-task.color7 {*/
/*  background-color: #fbc02d;*/
/*}*/
/*.sg-gantt .sg-task.color7.selected {*/
/*  background-color: #f57f17;*/
/*}*/

/*.sg-gantt .sg-task.color8 {*/
/*  background-color: #f57c00;*/
/*}*/
/*.sg-gantt .sg-task.color8.selected {*/
/*  background-color: #e65100;*/
/*}*/

/*.sg-gantt .sg-task.color9 {*/
/*  background-color: #5d4037;*/
/*}*/
/*.sg-gantt .sg-task.color9.selected {*/
/*  background-color: #3e2723;*/
/*}*/

/*.sg-gantt .sg-task.color10 {*/
/*  background-color: #455a64;*/
/*}*/
/*.sg-gantt .sg-task.color10.selected {*/
/*  background-color: #263238;*/
/*}*/


/*
Project:	Toggle Switchy
Version:	1.14
Updated:	8/20/2020
Author:		Adam Culpepper | @adamculpepper
Website:	https://toggleswitchy.com
Docs:		https://github.com/adamculpepper/toggle-switchy
Issues:		https://github.com/adamculpepper/toggle-switchy/issues
Releases:	https://github.com/adamculpepper/toggle-switchy/releases
*/

/* Customizable styles */

/* Colors: Default (blue) */
.toggle-switchy {color:#fff;}
.toggle-switchy > .toggle:before {content:attr(on);}
.toggle-switchy > .toggle:after {content:attr(off);}
.toggle-switchy > .toggle > .switch {background:#fff;}
.toggle-switchy > .toggle + .label {color:#000;}
.toggle-switchy > input:checked + .toggle,
.toggle-switchy > .checked.toggle {background:var(--btn_bg_numG);}
.toggle-switchy > input:not(:checked) + .toggle,
.toggle-switchy > .notchecked.toggle {background:var(--color_check_table_label);}
.toggle-switchy > input:checked + .toggle > .switch,
.toggle-switchy > .checked.toggle > .switch {border:2px solid var(--btn_bg_numG);}
.toggle-switchy > input:not(:checked) + .toggle > .switch,
.toggle-switchy > .notchecked.toggle > .switch {border:2px solid var(--color_check_table_label);}

/* Rounded switch corners */
.toggle-switchy > .toggle {border-radius:4px;}
.toggle-switchy > .toggle .switch {border-radius:6px;}

/* //////////////////////////
CORE STYLES BELOW - NO TOUCHY
////////////////////////// */
.toggle-switchy {display:inline-flex; align-items:center; user-select:none; position:relative; vertical-align:middle; margin-bottom:0;}
.toggle-switchy:hover {cursor:pointer;}
.toggle-switchy > input {position:absolute; opacity:0;}
.toggle-switchy > .toggle {align-items:center; position:relative;}
.toggle-switchy > .toggle {overflow:hidden; position:relative; flex-shrink:0;}
.toggle-switchy > input[disabled] + .toggle,
.toggle-switchy > .disabled.toggle{opacity:0.5;}
.toggle-switchy > input[disabled] + .toggle:hover,
.toggle-switchy > .disabled.toggle:hover {cursor:not-allowed;}
.toggle-switchy > .toggle {width:100%; height:100%; margin:0; cursor:pointer;}
.toggle-switchy > .toggle > .switch {display:block; height:100%; position:absolute; right:0; z-index:3; box-sizing:border-box;}

/* Labels */
.toggle-switchy > .toggle:before,
.toggle-switchy > .toggle:after {display:flex; align-items:center; position:absolute; z-index:2; height:100%;}
.toggle-switchy > .toggle:before {right:55%;}
.toggle-switchy > .toggle:after {left:50%;}
.toggle-switchy > .toggle + .label {margin-left:10px;}
.toggle-switchy[data-label='left'] > .toggle {order:2;}
.toggle-switchy[data-label='left'] > .toggle + .label {order:1; margin-left:0; margin-right:10px;}

/* Show / Hide */
.toggle-switchy > .toggle:before {opacity:0;}
.toggle-switchy > input:checked + .toggle:before,
.toggle-switchy > .checked.toggle:before {opacity:1;}
.toggle-switchy > input:checked + .toggle:after,
.toggle-switchy > .checked.toggle:after {opacity:0;}

/* Transitions */
.toggle-switchy > .toggle {transition:background 30ms linear, box-shadow 30ms linear;}
.toggle-switchy > .toggle:before,
.toggle-switchy > .toggle:after {transition:all 30ms linear;}
.toggle-switchy > .toggle > .switch {transition:right 30ms linear, border-color 30ms linear;}
/* //////////////////////////
CORE STYLES ABOVE - NO TOUCHY
////////////////////////// */

/* Size: Extra Large */
.toggle-switchy[data-size='xl'] > .toggle							{width:85px; height:40px;}
.toggle-switchy[data-size='xl'] > .toggle > .switch					{width:40px;}
.toggle-switchy[data-size='xl'] > .toggle:before,
.toggle-switchy[data-size='xl'] > .toggle:after						{font-size:1.2rem;}
.toggle-switchy[data-size='xl'] > input:not(:checked) + .toggle > .switch,
.toggle-switchy[data-size='xl'] > .notchecked.toggle > .switch {right:calc(100% - 40px);}

/* Size: Large */
.toggle-switchy[data-size='lg'] > .toggle							{width:75px; height:35px;}
.toggle-switchy[data-size='lg'] > .toggle > .switch					{width:35px;}
.toggle-switchy[data-size='lg'] > .toggle:before,
.toggle-switchy[data-size='lg'] > .toggle:after						{font-size:1rem;}
.toggle-switchy[data-size='lg'] > input:not(:checked) + .toggle > .switch,
.toggle-switchy[data-size='lg'] > .notchecked.toggle > .switch {right:calc(100% - 35px);}

/* Size: Default (Medium) */
.toggle-switchy > .toggle											{width:65px; height:30px;}
.toggle-switchy > .toggle	> .switch								{width:30px;}
.toggle-switchy > .toggle:before,
.toggle-switchy > .toggle:after										{font-size:0.8rem;}
.toggle-switchy > input:not(:checked) + .toggle > .switch,
.toggle-switchy > .notchecked.toggle > .switch {right:calc(100% - 30px);}

/* Size: Small */
.toggle-switchy[data-size='sm'] > .toggle							{width:55px; height:22px;}
.toggle-switchy[data-size='sm'] > .toggle > .switch					{width:22px;}
.toggle-switchy[data-size='sm'] > .toggle:before,
.toggle-switchy[data-size='sm'] > .toggle:after						{font-size:0.75rem;}
.toggle-switchy[data-size='sm'] > input:not(:checked) + .toggle > .switch,
.toggle-switchy[data-size='sm'] > .notchecked.toggle > .switch {right:calc(100% - 22px);}

/* Size: Extra Small */
.toggle-switchy[data-size='xs'] > .toggle							{width:45px; height:18px;}
.toggle-switchy[data-size='xs'] > .toggle > .switch					{width:18px;}
.toggle-switchy[data-size='xs'] > .toggle:before,
.toggle-switchy[data-size='xs'] > .toggle:after						{font-size:0.7rem;}
.toggle-switchy[data-size='xs'] > input:not(:checked) + .toggle > .switch,
.toggle-switchy[data-size='xs'] > .notchecked.toggle > .switch {right:calc(100% - 18px);}

/* Style: Rounded */
.toggle-switchy[data-style='rounded'] > .toggle,
.toggle-switchy[data-style='rounded'] > .toggle > .switch			{border-radius:50px;}
.toggle-switchy[data-style='rounded'] > .toggle:before				{right:42%;}
.toggle-switchy[data-style='rounded'] > .toggle:after				{left:42%;}

/* Style: Square */
.toggle-switchy[data-style='square'] > .toggle						{border-radius:0;}
.toggle-switchy[data-style='square'] > .toggle .switch				{border-radius:0;}

/* Text: Off */
.toggle-switchy[data-text='false'] > .toggle:before,
.toggle-switchy[data-text='false'] > .toggle:after					{content:'';}
.toggle-switchy[data-text='false'][data-size='xl'] > .toggle		{width:80px;}
.toggle-switchy[data-text='false'][data-size='lg'] > .toggle		{width:70px;}
.toggle-switchy[data-text='false'] > .toggle						{width:60px;}
.toggle-switchy[data-text='false'][data-size='sm'] > .toggle		{width:50px;}
.toggle-switchy[data-text='false'][data-size='xs'] > .toggle		{width:40px;}

/* Color: Red */
.toggle-switchy[data-color='red'] > input:checked + .toggle,
.toggle-switchy[data-color='red'] > .checked.toggle {background:#e74c3c;}
.toggle-switchy[data-color='red'] > input:checked + .toggle > .switch,
.toggle-switchy[data-color='red'] > .checked.toggle > .switch		{border-color:#e74c3c;}

/* Color: Orange */
.toggle-switchy[data-color='orange'] > input:checked + .toggle,
.toggle-switchy[data-color='orange'] > .checked.toggle {background:#e67e22;}
.toggle-switchy[data-color='orange'] > input:checked + .toggle > .switch,
.toggle-switchy[data-color='orange'] > .checked.toggle > .switch {border-color:#e67e22;}

 /* Color: Yellow */
.toggle-switchy[data-color='yellow'] > input:checked + .toggle,
.toggle-switchy[data-color='yellow'] > .checked.toggle {background:#f1c40f;}
.toggle-switchy[data-color='yellow'] > input:checked + .toggle > .switch,
.toggle-switchy[data-color='yellow'] > .checked.toggle > .switch	{border-color:#f1c40f;}

/* Color: Green */
.toggle-switchy[data-color='green'] > input:checked + .toggle,
.toggle-switchy[data-color='green'] > .checked.toggle {background:#2ecc71;}
.toggle-switchy[data-color='green'] > input:checked + .toggle > .switch,
.toggle-switchy[data-color='green'] > .checked.toggle > .switch {border-color:#2ecc71;}

/* Color: Blue */
.toggle-switchy[data-color='blue'] > input:checked + .toggle,
.toggle-switchy[data-color='blue'] > .checked.toggle {background:#3498db;}
.toggle-switchy[data-color='blue'] > input:checked + .toggle > .switch,
.toggle-switchy[data-color='blue'] > .checked.toggle > .switch{border-color:#3498db;}

/* Color: Purple */
.toggle-switchy[data-color='purple'] > input:checked + .toggle,
.toggle-switchy[data-color='purple'] > .checked.toggle {background:#9b59b6;}
.toggle-switchy[data-color='purple'] > input:checked + .toggle > .switch,
.toggle-switchy[data-color='purple'] > .checked.toggle > .switch {border-color:#9b59b6;}

/* Color: Gray */
.toggle-switchy[data-color='gray'] > input:checked + .toggle,
.toggle-switchy[data-color='gray'] > .checked.toggle {background:#555;}
.toggle-switchy[data-color='gray'] > input:checked + .toggle > .switch,
.toggle-switchy[data-color='gray'] > .checked.toggle > .switch {border-color:#555;}