/* 
Responsive design having in mind iPhone8
minimal resolution in px iPhone8 375 x 667
main frame size (-2px): 373 x 665
*/

/* ==================================== NORMAL LANDSCAPE === */
/* Elemetns not to be shown in Landscape or Portrait should  */ 
/* be defined as not visible in media section.               */
/* LARGE screen shoud overwrite the defaults                 */

/* "Arial", sans-serif, Helvetica Neue */
html, body, table, input, label, select, button { font-family: "Helvetica Neue"; font-size: 12px; }
* {box-sizing: border-box}

body { background: #4f4f4f; margin: 0px; padding-top: 1.4em; } /*  overflow-x: hidden; padding-top no effect */
form { margin:0; margin-top: .5em; font-size: 0; }
form input { font-size: 12px; }
a { color: #3BAFDA} 

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

input { /* #editTable */ 
  border-radius: 1px;
  border: 0.1px solid lightgrey;
  padding: 3px 2px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

input[readonly] { background-color:inherit; border: 0.1px solid gray;} /* border: 1px solid gray */
input.error { background-color:#FFCE54;; }

/* Tested iPhone8 - 665px, iPhone X - 694px */
/* border: none  border: 1px solid #646464; */
.main_frame { border: none; position: relative; width: 665px; margin: auto; margin-top: 10px; height:100% } /* TODO Testiks lisatud "height:100%" */

.nomargin { margin:0; padding:0; }
.float_left { float: left; }
.float_right { float: right; }
.border { border: 1px solid black; }

table.no-spacing {
  border-spacing:0; /* Removes the cell spacing via CSS */
  border-collapse: collapse;  /* Optional - if you don't want to have double border where cells touch */
}

/* === CONTENT STYLE ======================================== */

.login_form { border-radius: 10px; padding: 1em; margin: 1em; background-color: #E6E9ED; -webkit-overflow-scrolling: touch; overflow: scroll; } 
.login_form input { width: 15em; }
.login_form hr { border-width: 1px; background-color: white; border-color: white; margin-top: 3px; margin-bottom: 3px;}
.login_form h1 { font-size: x-large; margin-top: 0; } 
.login_form th { width: 5em; text-align: right; padding-right: 1em;}

.max_height {
  height: calc( 100vh - 5em ); /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100 - 5em);
}

.selectTable td {white-space: nowrap; overflow: hidden;} /* Kas on vaja ? */

.btn { display: inline-block; text-align: center; height: 2.1em; padding: 5px 0px; border-radius: 4px; border-width: 1px; color: #3BAFDA; border-color: #3BAFDA; background-color: inherit; cursor:pointer; border-style: solid;} /* b-color #4FC1E9 */
.main { background-color: #3BAFDA; color: white; } /* border:none; */
.btn[disabled], btn:disabled { background-color: lightgrey; }
.btn:focus { background-color: #4FC1E9; color: white; text-decoration: underline; }
.btn-h2 {height: 2.8em;} 

input.uploadFile { width: 29.5em; margin-right: 6px; margin-bottom: 5px; }

/* .login_form  */
.btn { width: 15em; }
.main { width: 15em; }
.tiny { width: 3em;}
.small { width: 5.45em; }
.medium { width: 13.1em; }
.medium-4 { width: 13.1em; }
.max { width: 100%; }
.narrow { height: 1.8em; line-height:.9em; }
.fileUpload {width: 5.45em; }

.right { text-align: right; }
.center {text-align: center; }
.left { text-align: left; }
.align_left { position: absloute; left: 4px; }
.align_right { position: absolute; right: 10px; } /* text-align: right; */
.align_center { position: absolute; left: 50%; }

.vertical_center { top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); }

.hidden { display: none; }

.button_orange { width: 7em; height: 2em; border: none; border-radius: 4px; color: white; background-color: #E4A600; }
.button_orange:hover { background-color: #FFCE54;}

/* Ledger  */
.ledger_form { border-radius: 4px; padding: 0; margin: 0; background-color: #E6E9ED; -webkit-overflow-scrolling: touch; overflow: scroll; }
.ledger_form input { margin-left: -2px;} /* TODO remove */
.ledger_form .medium { width: 7.25em; }

.ledger_form {
  height: calc( 100vh - 5em ); /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100 - 5em);
}
.ledgerFooter_ {
  position: absolute; background-color: #E6E9ED; border-top: grey 1px solid;
  bottom: 5px; /* calc( 100vh - 10.5em ); Fallback for browsers that do not support Custom Properties */
  bottom: calc(100vh - calc(var(--vh, 1vh) * 100) + 5px); /* calc(var(--vh, 1vh) * 100 - 10.5em);  100vh - calc(var(--vh, 1vh) * 100 */
}

/* currency_acc style */
.currency_acc {
  font-style: italic;
  color: grey;
}

/* Tooltips */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #4f4f4f; /* If you want dots under the hoverable text */
}

/* Bottom Tooltip */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 3.6em;
  background-color: #4f4f4f;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}
/* Right tooltip */
.tooltip .tooltiptext {
  top: -5px;
  left: 105%; 
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* Report */
.print-only { display: none; }
.report { background-color: inherit; }
.reportTable { width: 100%; border-collapse: collapse; }
.reportTable th { text-align: left; border-bottom: 2px solid grey; border-top: 1px solid grey; padding: 3px 2px } /* background-color: grey; color: white; */ 
.reportTable tr td { padding: 3px 2px; }
.reportTable tr.level0 td { background-color: grey; color: white; } 
.reportTable tr.level1 td { background-color: lightgrey; } 
.reportTable tr.level2 td { border-bottom: 2px solid grey; }
.reportTable tr.level3 td { border-bottom: 1px solid lightgrey; }

.find_date{ width: 7em; }
.find_account { width: 6em; }
.find_cur { width: 3em; }
.find_descr { width: 10em; }
.find_doc_type { width: 2em; }
.find_doc_nr { width: 5.85em; } /* 4.85 */
.find_inc_exp { width: 10em; }
.find_project { width: 5em; }
.find_project_label { display: inline-block; width: 6.8em; text-align: right;} 
.find_reference_label { display: inline-block; width: 8.95em; text-align: right;}
.find_transaction_label { display: inline-block; width: 6.1em; text-align: right;}
.find_reference { width: 7em; }
.find_transaction { width: 4em;  }

.ledger_description_select { width: 9em;}
.ledger_form input { margin-top: 2px;}
.ledger_description { width: 21em;}
.inc_exp_description { width:20.1em; }
.inc_exp_label { display: inline-block; width: 6.5em; }
.due_date_label_P { display: inline-block; width: 7.9em; text-align: right;}
.due_date_label_L { display: inline-block; width: 1.6em; text-align: right;}
.vat_pct_label { display: inline-block; width: 2.7em; }
.vat_label { display: inline-block; width: 1.8em; text-align: right;}
.project_label { display: inline-block; width: 7.4em; text-align: right; }
.reference_label { display: inline-block; width: 7.9em; text-align: right;}
.transaction_label { display: inline-block; width: 7.4em; text-align: right; }
.rate_label { display: inline-block; width: 7.9em; text-align: right;}
.instruction { display: inline-block; border-top: 1px solid #AAB2BD; border-bottom: 1px solid #AAB2BD; background: #CCD1D9; width: 27.5em; padding: 0.2em; margin-top: -0.25em;}

/* Find Debt Table*/
.debt_date { width:5.5em; padding-left: 3px; }
.debt_description {width: 12em;}

/* Message */
ul.status { list-style: none; line-height: 0.2em; margin: 0; padding: 0; font-weight: bold; width: 100%; min-width: 23em; text-align: center;}
li.status { padding-left: 0.3em; border-top: 1px solid #e0b7b7; border-bottom: 1px solid #e0b7b7; background: #ffe5e5; width: 100%; }
li.status_pos { padding-left: 0.3em; border-top: 1px solid #b7e0bc; border-bottom: 1px solid #b7e0bc; background: #c6f1cb; width: 100%; }

ul.message { list-style: none; line-height: 0.2em; margin: .5em 0; padding: 0; font-weight: bold; width: 27em;}
li.negative { padding-left: 0.3em; border-top: 1px solid #e0b7b7; border-bottom: 1px solid #e0b7b7; background: #ffe5e5; width: 27em; }
li.positive { padding-left: 0.3em; border-top: 1px solid #b7e0bc; border-bottom: 1px solid #b7e0bc; background: #c6f1cb; width: 27em; }

/* Edit Checkbox */
input.edit { display: none; }
.submit { display: none; }
label.edit { display: inline-block; text-align: center; padding: 5px 10px; height: 2em; width: 15em; border-radius: 4px; cursor:pointer; border-width: 1px; border-style: solid; background-color: #3BAFDA; color: white; border:none; }
label.edit-off { display: none; text-align: center; padding: 5px 10px; height: 2em; width: 15em; border-radius: 4px; border-width: 1px; color: #3BAFDA; border-color: #4FC1E9; background-color: inherit; cursor:pointer; border-style: solid;}
label.edit:hover { background-color: #4FC1E9; color: white; }
label.edit-off:hover { font-weight: bold; } /* background-color: #4FC1E9; color: white; */
input.edit:checked ~ * .edit { display: none; }
input.edit:checked ~ * .edit-off { display: inline-block; }
/* label.edit[disabled], label.edit:disabled { background-color: lightgrey; }  TODO remove ? */
label.disabled { background-color: lightgrey; }
label.disabled:hover { background-color: lightgrey; }
label.medium { width: 13.1em; }

/* selectTable  tbody max-height:12em; */
.selectTable { display:block; font-style: normal; border: 1px solid #ccc; border-collapse: collapse; width: 15em; background-color: white; overflow-y: scroll; -webkit-overflow-scrolling: touch;}
.selectTable tbody { display:block;  overflow: auto; -webkit-overflow-scrolling: touch; overflow-y: scroll; }
.selectTable tr { display: table; width:100%; cursor: pointer; table-layout: fixed;}
.selectTable td, .selectTable th { border: 1px solid #ddd; padding: 5px; }
.selectTable th { text-align: left; background-color: #4CAF50; color: white; }
.selectTable_ tr:hover {background-color: #ddd;} /* TODO remove */
.selectTable .empty_row { background-color: #E6E9ED; font-style: italic; }
.selectTable tr.approved { font-weight: bold; } /* background-color: #E6E9ED; font-weight: bold; font-style: italic; */
.selectTable tr.balance { background-color:  #eceff3; } /*  #E6E9ED #F5F7FA; */
.selectTable tr.archived { background-color: #F5F7FA; }
.selectTable tr.selected { background-color: lightblue; }
.selectTable tr.suspended { color: gray; font-style: italic;}

.selectTable tbody {
  max-height: calc( 100vh - 20.5em ); /* Fallback for browsers that do not support Custom Properties */
  max-height: calc(var(--vh, 1vh) * 100 - 20.5em);
}

.selectTable.adjust tbody {
  max-height: calc( 100vh - 24.75em ); /* Fallback for browsers that do not support Custom Properties */
  max-height: calc(var(--vh, 1vh) * 100 - 24.75em);
}

.selectTable.max tbody {
  height: calc( 100vh - 20.5em ); /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100 - 20.5em);
}
.selectTable.max1 tbody {
  max-height: calc( 100vh - 16.5em ); /* Fallback for browsers that do not support Custom Properties */
  max-height: calc(var(--vh, 1vh) * 100 - 16.5em);
  height: calc( 100vh - 1.5em ); /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100 - 1.5em);
}

.selectTable.debtTable tbody {
  max-height: calc( 100vh - 26em ); /* Fallback for browsers that do not support Custom Properties */
  max-height: calc(var(--vh, 1vh) * 100 - 26em);
}

.selectTable.debtTable.adjust tbody {
  max-height: calc( 100vh - 28.15em );
  max-height: calc(var(--vh, 1vh) * 100 - 28.15em);
}

/*
.editTable { display: block; }
.editTable tbody {
  height: calc( 100vh - 280px ); 
  height: calc(var(--vh, 1vh) * 100 - 280px);
} */

/* searchForm radio */
input.radio { display:none; }
label.radio { display: inline-block; text-align: center; margin: -2; padding: 5px 5px; height: 2.1em; width: 5.65em; cursor:pointer; border-width: 1px; border-style: solid; border-color: #E6E9ED; background-color: #3BAFDA; color: white; }
label.left {border-top-left-radius: 4px;}
label.right {border-top-right-radius: 4px;}
label.radio:hover { background-color: #4FC1E9; color: white; }
input.radio:checked + span > label.radio { background-color: inherit; color: #3BAFDA; border-color: #3BAFDA; border-bottom-color: #E6E9ED; }

/* ledgerForm searchForm radio */
.ledger_form label.radio { width: 5em; }
.ledger_form label.left { margin-left: 0;}
.ledger_form label.right { margin-right: 0;}

/* TODO üle vaadata ja paika loksutada 
.search_descr { position: relative; width: 27em; border: none; } /*1px solid #646464; none */
.alignRight { float: right; margin-left: 2px; }
.maxSearchInput { width: calc(100% - 120px); }

/* === Function Autocomplete ============================== */
/*the container must be positioned relative:*/
.autocomplete { position: relative; display: inline-block; }
/*position the autocomplete items to be the same width as the container:*/  
.autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; top: 100%;left: -2px; right: 0; } /* oli left: 0 */
.autocomplete-items div { padding: 5px 2px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; }
/*when hovering an item:*/
.autocomplete-items div:hover { background-color: #e9e9e9; }
/*when navigating through the items using the arrow keys:*/
.autocomplete-active { background-color: DodgerBlue !important; color: #ffffff; }

/* === MENU SECTION ======================================== */

.flexbox { display: -ms-flex; display: -webkit-flex; display: flex; width: 100%; height: 100%; position: fixed; left: 0; top: 2.7em; }
.flex_menu { display: none; background: inherit; min-width: 10em; flex-grow: 0; position: relative; border-top: .5px solid lightgray; }
.flex_content { background: #F5F7FA; flex-grow: 1; overflow-y: auto; overflow-x: hidden; }

/* Menüü */
input.menu { visibility: hidden; }
input.menu:checked ~ * .flex_menu { display: inline; }
/* input.menu:checked ~ label.menu { font-weight: bold; } */

label.menu { color: white; background-color: inherit; display: block; cursor: pointer; user-select:none; text-align: left; padding: 0.825em 3em 0.6em 2.5em; position: fixed; top: 0; left: 0; overflow: hidden; }
label.menu:after { content:"\2630"; font-size: 1.5em; position: absolute; left: .50em; top: .25em; } /* 2261 2630 !?! ☰ */
label.menu:hover { text-decoration: underline; }

/* Title */
.menu_title { position: fixed; left: 10em; text-align: left; top: 0; display: block; height: 2.7em; min-width: 7em; height: 2.7em; }
.menu_title ul, .menu_title li { float: left; margin: 0; padding: 0.45em 0.375em; list-style-type: none; }
.menu_title li a { color: white; text-align: center;  text-decoration: none; }
.menu_title li a:hover { text-decoration: underline; }

/* Lang, Login */
.menu_top_right { position: fixed; top: 0; right: 6px; display: block; height: 2.7em; }
.menu_top_right ul, .menu_top_right li { float: left; margin: 0; padding: 0.45em 0.375em; list-style-type: none; }
.menu_top_right li a { color: white; text-align: center;  text-decoration: none; }
.menu_top_right li a:hover{ text-decoration: underline; }
.menu_top_right li a:active { font-weight: bold; }  
.menu_top_right li .active { text-decoration: underline; }  

/* Side Menu */
#side_menu { background-color: inherit; list-style: none; margin-left: 0; margin-top: 0; padding-left: 0; }
#side_menu li { color: white; padding: .45em .45em; cursor: pointer; border-bottom: .5px solid lightgray; }
#side_menu li:hover { text-decoration: underline; }
#side_menu ul { background-color: #707070; list-style: none; margin-left: 0; padding-left: 0; cursor: pointer;  }
#side_menu a { color: white; text-decoration:none; display:block; }

/* 25B6 */
#side_menu .caret::after { content: "\25c3"; font-family: "system-ui"; color: white; display: inline-block; position: absolute; right: 2px; }
#side_menu .caret-down::after { -ms-transform: rotate(-90deg); /* IE 9 */ -webkit-transform: rotate(-90deg); /* Safari */ transform: rotate(-90deg); }
#side_menu .nested { display: none; }
#side_menu .active { display: block; }

/* === DATEPICKER ======================================= */

button.datepicker {
  width: 16px;
  height: 16px;
  padding: 0px;
  background-image: url(../images/mainico16.png);
  background-repeat: no-repeat;
  background-position: -160px 0px;
  background-color: transparent;
  text-indent: -9999px;
  border: none;
  margin: 0px 0px 2px 0px;
  margin-left: -20px;
  vertical-align: middle;
}

/* === MEDIA SECTION ======================================= */

@media (hover: none) and (pointer: coarse) {
    /* Smartphones and touchscreens */
}

@media (hover: hover) and (pointer: fine) {
    /* Desktops with mouse */
    .btn:hover { background-color: #4FC1E9; color: white; text-decoration: underline; }
}

/* ======================================== LARGE SCREEN === */
/* Design for a width of 700 (originally 1050px) and more    */
/* Elements width adjustments for Large view                 */

@media all and (min-width: 920px) { .flex_menu { display: block; } } /* oli 850px ja display:inline */

@media all and (min-width: 776px) { /* oli 700px */
    .main_frame { width: 775px; } /* tested 697px või 775,833? */
    html, body, table, input, label, button { font-size: 14px; }
    form input { font-size: 14px; }
    .selectTable tbody {
      max-height: calc( 100vh - 20.25em ); /* Fallback for browsers that do not support Custom Properties */
      max-height: calc(var(--vh, 1vh) * 100 - 20.25em);
    }
    .selectTable.adjust tbody {
      max-height: calc( 100vh - 22.25em ); /* Fallback for browsers that do not support Custom Properties */
      max-height: calc(var(--vh, 1vh) * 100 - 22.25em);
    }
    .selectTable.debtTable tbody {
      max-height: calc( 100vh - 23.5em ); /* Fallback for browsers that do not support Custom Properties */
      max-height: calc(var(--vh, 1vh) * 100 - 23.5em);
    }
    .selectTable.max1 tbody {
      max-height: calc( 100vh - 15.5em ); /* Fallback for browsers that do not support Custom Properties */
      max-height: calc(var(--vh, 1vh) * 100 - 15.5em);    
      height: calc( 100vh - 1em ); /* Fallback for browsers that do not support Custom Properties */
      height: calc(var(--vh, 1vh) * 100 - 1em);
    }
    .selectTable.debtTable.adjust tbody {
      max-height: calc( 100vh - 25.5em ); /* Fallback for browsers that do not support Custom Properties */
      max-height: calc(var(--vh, 1vh) * 100 - 25.5em);
    }
    .ledger_form { /* Test: lisatud "height: 100%;" */
      height: calc( 100vh - 6em ); /* Fallback for browsers that do not support Custom Properties */
      height: calc(var(--vh, 1vh) * 100 - 6em);
    }
}

/*============================================= PORTRAIT === */
/* iPhone8 landscape detects 665px as maximum width          */
/* Elements width adjustments for Portrait view              */
/* Hide Landscape elements not to be shown in Portrait view  */

@media all and (max-width: 664px) {
    .main_frame { width: 373px; } /* Tested iPhone8 = 31em; */
    .hide_in_portrait_ { display:none; width:0; height:0; opacity:0; visibility: collapse; }
    .hide_in_portrait { display: none; }
    .selectTable tbody {
      max-height: calc( 100vh - 21.75em ); /* Fallback for browsers that do not support Custom Properties */
      max-height: calc(var(--vh, 1vh) * 100 - 21.75em);
    }
    .selectTable.adjust tbody {
      max-height: calc( 100vh - 24em ); /* Fallback for browsers that do not support Custom Properties */
      max-height: calc(var(--vh, 1vh) * 100 - 24em);
    }
    .selectTable.max tbody {
      height: calc( 100vh - 20em ); /* Fallback for browsers that do not support Custom Properties */
      height: calc(var(--vh, 1vh) * 100 - 20em);
    }
    .selectTable.max1 tbody {
      max-height: calc( 100vh - 18.5em ); /* Fallback for browsers that do not support Custom Properties */
      max-height: calc(var(--vh, 1vh) * 100 - 18.5em);    
      height: calc( 100vh - 1em ); /* Fallback for browsers that do not support Custom Properties */
      height: calc(var(--vh, 1vh) * 100 - 1em);
    }
    .selectTable.debtTable tbody {
      max-height: calc( 100vh - 29.5em ); /* Fallback for browsers that do not support Custom Properties */
      max-height: calc(var(--vh, 1vh) * 100 - 29.5em);
    }
    .selectTable.debtTable.adjust tbody {
      max-height: calc( 100vh - 31.7em ); /* Fallback for browsers that do not support Custom Properties */
      max-height: calc(var(--vh, 1vh) * 100 - 31.7em);
    }
    .ledger_form { /* Test: lisatud "height: 100%;" */
      height: calc( 100vh - 4.65em ); /* Fallback for browsers that do not support Custom Properties */
      height: calc(var(--vh, 1vh) * 100 - 4.65em);
    }
    input.uploadFile { width: 26.5em; margin-right: 0px; }
    .fileUpload {width: 11em; }
}

/*============================================ LANDSCAPE === */
/* Hide Portrait elements not to be shown in Landscape view  */

@media all and (min-width: 665px) {
    .hide_in_landscape_ { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 
    .hide_in_landscape { display: none; }
    .find_descr { width: 11.25em; }
    .find_inc_exp { width: 11.7em; }
    .find_project { width: 7em; }
    .find_transaction { width: 7em; }
    .find_reference { width: 8.5em; }
    .ledger_description_select { width: 20em; }
    .ledger_description { width: 22em; }
    .rate_label { width: 3.8em; }
    .project_label { width: 6.8em; }
    .reference_label { width: 8.5em; }
    .instruction { width: 44.3em; }
    .debt_description {width: 19em;}
    .debt_date { width:6em; padding-left: 3px; }
    .medium-4 { width: 12.5em; }
}

/*============================================ PRINT === */
@media print {
  @page { 
    margin: 0; /* this affects the margin in the printer settings */
  }  
  head { display: none !important; }
  body {
      width: 21cm;
      height: 29.7cm;
      margin: 20mm 20mm 20mm 20mm; /* this affects the margin on the content before sending to printer */ 
      -webkit-print-color-adjust: exact;
      margin-top: 0 !important;
 }
 html, body, table, label, button { font-family: "Helvetica Neue"; font-size: 14px; }
 .main_frame { margin-left: 2cm; width: 19cm; }
 .flex_content { background-color: white; }
 .flex_menu, .menu, .menu_top_right, .menu_title, form, button, .no_print { display: none !important; }
 .print-only { display: block; }
 a { color: black; text-decoration: none; }
}


/*============================================ MORE SWITCH ===*/
.more-switch > input[type="checkbox"] { display: none; }
.more-switch { display: inline-block; font-size: 100%; height: 1em; position: relative; text-align: center; color: #3BAFDA;}
.more-switch .more-switch-style { display: block; height: 1.4em; position: absolute; width: 1.4em; right: 0; color: #fff; background-color: #3BAFDA; border: 1px solid #3BAFDA; -webkit-border-radius: 50%; border-radius: 50%; cursor: pointer; top: -1px}
.more-switch-style::before { content: "\25c3"; font-family: "system-ui"; color: #3BAFDA; display: inline-block; position: absolute; left: -14px; }
.more-switch-style::after { content: "+"; }

._more-switch .info-switch-style { height: 1.6em; left: 0; display: inline-block; position: relative; top: 0em; width: 3em; cursor: pointer; }
.more-switch > input[type="checkbox"]:checked + .more-switch-style::before { -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); top: 0em} /* 0.3em */
._more-switch > input[type="checkbox"]:checked + .more-switch-style::after { -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); top: 0.2em; right: 0.15em}
.more-switch > input[type="checkbox"]:checked + .more-switch-style::after { content: '-'; }

/*============================================ INFO SWITCH ===*/
.info-switch > input[type="checkbox"] { display: none; }
.info-switch { display: inline-block; font-size: 100%; height: 1.6em; position: relative; text-align: center; color: #3BAFDA;}
.info-switch-style::before { content: "\25c3"; font-family: "system-ui"; color: #3BAFDA; display: inline-block; position: absolute; right: 2px; }
.info-switch .info-switch-style { height: 1.6em; left: 0; display: inline-block; position: relative; top: 0em; width: 3em; cursor: pointer; }
.info-switch > input[type="checkbox"]:checked + .info-switch-style::before { -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.info-switch-text { display: none; padding: 0.3em; background-color: #F5F7FA; border: 1px solid #434A54; color: #656D78; border-radius: 4px;}

/*============================================ SWITCH COMPONENT ===*/
.el-switch, .el-switch-style, .el-switch-style:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.el-switch { display: inline-block; font-size: 100%; height: 1.6em; margin-top: -0.6em; position: relative; } /*  height: 1.6em; 1.4em */
.el-switch .el-switch-style { height: 1.6em; left: 0; background: hsl(212, 26%, 80%); -webkit-border-radius: 0.8em; border-radius: 0.8em; display: inline-block; position: relative; top: 0.4em; width: 3em; cursor: pointer; margin-right: 0.2em; margin-left: 0.1em;}
.el-switch .el-switch-style:before { display: block; content: ''; height: 1.4em; position: absolute; width: 1.4em; background-color: #fff; -webkit-border-radius: 50%; border-radius: 50%; left: 0.1em; top: 0.1em; }
.el-switch > input[type="checkbox"] { display: none; } /* visibility: hidden */
.el-switch > input[type="checkbox"][disabled] + .el-switch-style { cursor: default; background-color: #D3DCE6; }
.el-switch > input[type="checkbox"]:checked + .el-switch-style { background-color: #3BAFDA; }
.el-switch > input[type="checkbox"]:checked + .el-switch-style:before { left: 50%; }
.el-switch > input[type="checkbox"]:checked[disabled] + .el-switch-style { background-color: #b0d7f5; }

/* TODO Delete the following ? */
.el-switch.el-switch-blue > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #20a0ff;
}
.el-switch.el-switch-blue > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #b0d7f5;
}
.el-switch.el-switch-green > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #13ce66;
}
.el-switch.el-switch-green > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #a1efc4;
}
.el-switch.el-switch-red > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #ff4949;
}
.el-switch.el-switch-red > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #f9b3b3;
}
.el-switch.el-switch-yellow > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #f7ba2a;
}
.el-switch.el-switch-yellow > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #fbeac1;
}
/*define size*/
.el-radio.el-radio-sm,
.el-checkbox.el-checkbox-sm,
.el-switch.el-switch-sm {
  font-size: 85%;
}
.el-radio.el-radio-lg,
.el-checkbox.el-checkbox-lg,
.el-switch.el-switch-lg {
  font-size: 125%;
}