/*
 * Base structure
 */


.col:after, .clr:after, .wpex-clr:after, .group:after, dl:after, .vc-empty-shortcode-element:after, ul.page-numbers:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; zoom: 0; }
.compose-mode .vc_element.vc_empty .vc_empty-element:after { visibility: visible !important }
.clear, .wpex-clear { clear: both }


div.jtable-column-header-container { height: auto !important; }
.nav-tabs > .active > a, .nav-tabs > .active > a:hover { outline: none; }
.table-striped tbody tr.highlight td { background-color: #1995DC; }
.test { }
body { position: relative; height: 100%; }


.ssht { height: 350px; /*height: 404px;*/
    /*height: auto !important;*/
    /*overflow:auto;*/
margin-bottom: 20px; overflow-y: auto; /* Trigger vertical scroll    */
overflow-x: auto;/* Hide the horizontal scroll */
}
.group { background: yellow; width: 200px; height: 500px; }
.group .subgroup { background: orange; width: 150px; height: 200px; }
.fixed { position: fixed; }
.bs-docs-sidebar { padding-left: 20px; margin-top: 20px; margin-bottom: 20px; }
/* all links */

.bs-docs-sidebar .nav>li>a { color: #999; border-left: 2px solid transparent; padding: 4px 20px; font-size: 13px; font-weight: 400; }
/* nested links */

.bs-docs-sidebar .nav .nav>li>a { padding-top: 1px; padding-bottom: 1px; padding-left: 30px; font-size: 12px; }
/* active & hover links */

.bs-docs-sidebar .nav>.active>a, .bs-docs-sidebar .nav>li>a:hover, .bs-docs-sidebar .nav>li>a:focus { color: #563d7c; text-decoration: none; background-color: transparent; border-left-color: #563d7c; }
/* all active links */

.bs-docs-sidebar .nav>.active>a, .bs-docs-sidebar .nav>.active:hover>a, .bs-docs-sidebar .nav>.active:focus>a { font-weight: 700; }
/* nested active links */

.bs-docs-sidebar .nav .nav>.active>a, .bs-docs-sidebar .nav .nav>.active:hover>a, .bs-docs-sidebar .nav .nav>.active:focus>a { font-weight: 500; }
/* hide inactive nested list */

.bs-docs-sidebar .nav ul.nav { display: none; }
/* show active nested list */

.bs-docs-sidebar .nav>.active>ul.nav { display: block; }
.neg-margins { margin: -15px; border-top-left-radius: 4px; border-top-right-radius: 4px; }
.vtop { margin-top: 0px; margin-bottom: 0px; display: inline-block; vertical-align: top; float: none; }
/*dynamically wraps the discover page*/

#discover_creators_square > div:nth-child(4n+1) { clear: both; }
img { /*        display: inline-block;
        height: 100%;
        vertical-align: middle;
        width:  auto;*/
border: 1px solid #021a40;/*horizontal-align: middle;*/
}
#creator_search { margin-top: 3px; }
.thin-hr { margin-top: 20px; margin-bottom: 10px; }
.discover-tile { /* height: 580px;*/
}
.discover-values { height: 35px; }
.discover-under-name { height: 40px; }
.discover-image { margin: -15px; padding: 0px; border: 0px; border-top-left-radius: 4px; border-top-right-radius: 4px;/*       display: block;
       
       height:206.25px !important;
       width:auto !important;*/
}
 @media (min-width: 992px) {
.discover-desc { height: 152px !important; width: auto !important;  }
}
 @media (min-width: 1200px) {
.discover-desc { height: 114px !important; width: auto !important;}
}
.remove-border { border: 0px; border-top-left-radius: 4px; border-top-right-radius: 4px; }
.list-group-item { margin-top: -2px; margin-bottom: -2px; }
.carousel-inner>.item>img, .carousel-inner>.item>a>img { /*        position: absolute;
        margin-left:auto; margin-right:auto;
        overflow:hidden;
        vertical-align:middle;
        display:table-cell;
        text-align: center;*/
}
#disqus_thread p { font-size: 13px; color: black !important; ; background-color: #2c2c2c; }
#dsq-content { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: black !important; }
.dsq-comment-text p { color: black !important; }
.nav-list { width: 228px; margin: 30px 0 0; padding: 0; background-color: #F7F7F7; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .065); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .065); box-shadow: 0 1px 4px rgba(0, 0, 0, .065); }
.nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); background-color: #BABABA; }
#midCol.affix-top { position: fixed; margin-left: -18px; margin-right: 10px; }
#midCol.affix-bottom { position: static; }
#midCol.affix { position: static; }
@font-face { font-family: 'Glyphicons Halflings'; src: url('bootstrap-dist/fonts/glyphicons-halflings-regular.eot'); src: url('bootstrap-dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('bootstrap-dist/fonts/glyphicons-halflings-regular.woff') format('woff'), url('bootstrap-dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('bootstrap-dist/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); }
.navbar-input-group { font-size: 0px;/*removes whitespace between button and input*/
}
#creator_search > button { margin-left: -2px; }
.navbar-input-group input { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
.navbar-input-group .btn { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: 0px; }
.navbar-input-group { margin-top: 0px; margin-bottom: 0px; margin-right: 0px; margin-left: 0px; }
.pager-footer { height: 41px; }
.pager { margin-top: -6px; }
.table { font-size: .85em; }
/*dropdown hover*/

ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; }
.input-group-addon { background-color: #F7F7F7; }
.mini-submenu { display: none; background-color: rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 0, 0, 0.9); border-radius: 4px; padding: 9px; /*position: relative;*/
width: 42px; }
.mini-submenu:hover { cursor: pointer; }
.mini-submenu .icon-bar { border-radius: 1px; display: block; height: 2px; width: 22px; margin-top: 3px; }
.mini-submenu .icon-bar { background-color: #999; }
#slide-submenu { background: rgba(0, 0, 0, 0.45); display: inline-block; padding: 0 8px; border-radius: 4px; cursor: pointer; }
.announcement-heading { font-size: 35px; margin: 0; }
.announcement-text { margin: 0; font-size: 12px; }
.announcement-bottom { font-size: 14px; }
.sidebar { padding-left: 40px; }
/*
 * Global add-ons
 */

.sub-header { padding-bottom: 10px; border-bottom: 1px solid #eee; }


@media(max-width:993px) {
.affix { position: static; width: auto; top: 0; }
.affix-top { width: 100%; }
.nav-tabs {margin-top: 15px !important}
}
 @media(min-width:993px) {
#mynav { font-size: .75em; }
#mynav > li { height: 30px; }
#mynav.affix-top { position: static; margin-top: 30px; width: 275px; }
#mynav.affix { /*    position: fixed;
  top:-200px;*/
position: static; margin-top: -150px; width: 275px; }

}


/* Hide for mobile, show later */

@media (min-width: 768px) {
/*  .affix,.affix-top,#midCol.affix,#midCol.affix-top {
    position:static;
    }*/
.navbar { height: 70px; padding-top: 11px; }
.sidebar { position: fixed; top: 52px; bottom: 0; left: 0; z-index: 1000; display: block; padding: 20px; overflow-x: hidden; overflow-y: auto;/* Scrollable contents if viewport is shorter than content. */
        /*background-color: #f5f5f5;*/
        /*border-right: 1px solid #eee;*/
}
.right-sidebar { position: relative; float: right; top: 51px; bottom: 0; /*right: 0;*/
z-index: 1000; display: block; padding: 20px; overflow-x: hidden;/*overflow-y: auto; */
        /* Scrollable contents if viewport is shorter than content. */
        /*background-color: #f5f5f5;*/
        /*border-right: 1px solid #eee;*/
}
}

.main .page-header .main-col { margin-top: 0; }
/*
 * Placeholder dashboard ideas
 */

.placeholders { margin-bottom: 30px; text-align: center; }
.placeholders h4 { margin-bottom: 0; }
.placeholder { margin-bottom: 20px; }
.placeholder img { display: inline-block; border-radius: 50%; }
.fullscreen-chart { height: 70vh; }
.small-chart { /*height: 50vh;*/
height: 350px;/*overflow: auto;*/
}
.small-table { height: 339px; overflow: auto; }
.btn { margin: 3px; padding: 4px 12px; }
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */


/* Carousel base class */

.carousel { height: 400px; margin-bottom: 52px; margin-top: -20px; }
/* Since positioning the image, we need to help out the caption */

.carousel-caption { z-index: 10; }
.blur { -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); }
/* Declare heights because of positioning of img element */

.carousel .item { height: 400px; background-color: #222222; }
.carousel-inner > .item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 400px; }
/* MARKETING CONTENT
-------------------------------------------------- */


/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 { margin-bottom: 20px; text-align: center; }
.marketing h2 { font-weight: normal; }
.marketing .col-lg-4 p { margin-right: 10px; margin-left: 10px; }
/* Featurettes
------------------------- */

.featurette-divider { margin: 80px 0;/* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */

.featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -1px; }
.carousel-body { padding-bottom: 40px;/*  color: #DBDBDB;
background-color: #222222;*/
}
.navbar { background: #272425; box-shadow: none; border: 0; }
.navbar-default .navbar-form { border-color: #fff }
.navbar-default .navbar-collapse { border: 0; box-shadow: none !important }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #fff; color: #000 }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: #fff; color: #000 }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: #272425; color: #fff }
.navbar-default .navbar-toggle { border-color: #fff; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #fff; }
.navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar { background-color: #272425; }
.nav-tabs { text-align: right; padding: 0 100px 0 0; margin-top: -30px; }
.nav-tabs > li { float: none; display: inline-block; vertical-align: top; }
div.jtable-main-container div.jtable-title { background: #ad1015; border-color: #ad1015 }
.dropdown-menu > li > a { padding: 10px 20px }
div.jtable-main-container table.jtable tbody > tr.jtable-row-even, div.jtable-main-container table.jtable tbody > tr { background-color: inherit; color: #000 !important; text-shadow: none !important; }
div.jtable-main-container table.jtable tbody > tr:hover { background: #e8eaef }
div.jtable-main-container table.jtable tbody > tr.jtable-row-selected, div.jtable-main-container table.jtable tbody > tr.jtable-row-selected:hover { background: #ffffaa }
.logo img { border: 0 }
.navbar-brand img { border: 0 }
#payer_table { width: 100% }
.navbar-brand { padding: 0px 0 0 15px }
div.jtable-main-container table.jtable a { text-decoration: underline; }
table { width: 100%; }
.navbar-nav > li > a, .navbar-form .form-control { font-weight: 700; }
#footer-bottom { background: #222 none repeat scroll 0 0; color: #999; font-size: 0.923em; min-height: 40px; text-align: center; }
html, body { height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -58px;}
footer, .push { height: 58px; }
#footer-bottom > .container { padding-bottom: 20px; padding-top: 20px; position: relative; }
#footer-bottom a { color: #aaa; }
#footer-bottom-menu { height: 40px; line-height: 40px; margin-top: -20px; position: absolute; right: 0; top: 50%; }
#footer-bottom-menu ul { list-style: outside none none; margin: 0; }
#footer-bottom-menu ul li:first-child { margin-left: 0; }
#footer-bottom-menu ul li { float: left; margin-left: 20px; }
#footer-bottom a { color: #aaa; }
#footer-bottom a:hover { color: #fff; text-decoration: none; }
div.jtable-main-container table.jtable tbody > tr > td:nth-child(8) { text-align: right }
 @media (max-width: 767px) {
.navbar { padding-top: 8px; }
#wrapper { margin: 0 auto -97px; padding-bottom: 20px; }
.footer, .push { height: 97px; }
#copyright { font-size: 12px; }
#footer-bottom-menu { text-align: center; position: static; margin: 0; height: auto; line-height: height; }
#footer-bottom-menu ul { display: inline-block; ; vertical-align: top; }
}


.btn-print { background:#ad1015 ;color:#fff; font-weight: 700; text-transform: capitalize;}
.btn-print:hover{background: #333; color: #fff;}
#header{ display: inline-block; vertical-align: top; margin: 0}  
.popup-with-form{ font-size: 14px; margin-left: 15px; font-weight:normal; display: inline-block; vertical-align: top; padding-top: 6px}
.mfp-container{ width: 800px !important; height: 300px !important; background: #fff; margin: -100px auto 0 !important; right:0 !important; bottom: 0; vertical-align: middle; top:50% !important; overflow: auto; overflow-x: hidden;  padding: 0 30px}
.mfp-close{ width: 24px; height: 24px; right:-30px; top:0px; line-height: 20px; background:#000 !important; color:#fff !important}
.mfp-content{ vertical-align: top; padding-top: 5px;}


.table-box{ border: 1px solid #000; margin:0 5px  14px 5px; min-height: 60px; position: relative; text-align: center; background: #d9d9d9; font-weight: 700; padding: 0 5px 20px 5px; font-size: 13px; color: #000}
.table-box .number{ display: block; background: #fff;  border-top: 1px solid #000; height: 20px; position: absolute; left:0; bottom: 0; width: 100%; }
.summary-text .table-box{ background: none; border: 0; color: #000; min-height: 0; padding-top: 4px;text-align: left; margin-left:15px; margin-right: 0}
.summary-text .table-box .number{ position: static;}
.summary-text span{ display:inline-block;font-weight: 700; color: #000; padding: 5px 0;}
.summary-text span i{display: block;font-weight: 700; color: #000 ; border-top:1px solid #000; font-style: normal; padding-left:7px}
.summary-text{ margin-top: 88px;}
#exportExcel{float: right; margin-right: 62px;}
#exportExcel img{ width:26px; border: 0}
#exportAnalysisExcel{float: right; margin-right: 62px;}
#exportAnalysisExcel img{ width:26px;  border: 0}



.k-grid-header,.k-header{ background: url("../bower_components/jtable/lib/themes/lightcolor/bg-thead.png") repeat-x scroll left top; border-color: #9ab4c7; white-space: pre-line !important; background-size:cover; position: relative;}
    
.k-grid-header .k-header .k-link{ color:#222;  font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px; font-weight: 700}
    
.k-grid table{ color: #222;
    /*font-family: Verdana,Arial,Helvetica,sans-serif;*/
    font-size: 11px;
      font-family:"Calibri", Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
    font-weight: 400;}  
    
.k-grid table tr{ background: #fff;}
.k-grid table tr:hover{ background:#e8eaef} 

.k-grid table .k-state-selected,.k-grid table .k-state-selected:hover{ color: #222; background:#ffffaa}     
.k-grid td{ border:0; border-bottom: 1px solid #e7e6e6;}        
.navbar{ margin-bottom:0px;} 
#login_form{ margin-top: 20px;}   
.btn-print{ margin-bottom: -35px; position: relative;z-index: 10;}    

.k-header>.k-grid-filter {width: 20px; position: absolute; right:0; top:0; height: 100%;}
.k-grid-header .k-header .k-icon{ position: absolute; right: 4px;}
.k-header>.k-grid-filter.k-state-border-up {background: gray;}
.k-header>.k-grid-filter.k-state-border-down {background: gray;}
.k-filter{ background:url(../bower_components/jtable/lib/themes/lightcolor/k-filter.png) no-repeat left top; top:8px}
.k-header>.k-grid-filter.k-state-border-down .k-filter{ background:url(../bower_components/jtable/lib/themes/lightcolor/k-filter2.png) no-repeat left top; top:8px}

.k-popup.k-list-container{ overflow: scroll;}

 @media print
   {
    .mrg-print{ padding-top:150px;}
   }


@font-face {
    font-family: 'GOTHICB';
    src: url('../bower_components/fonts/GOTHICB.eot');
    src: url('../bower_components/fonts/GOTHICB.eot') format('embedded-opentype'),
         url('../bower_components/fonts/GOTHICB.woff2') format('woff2'),
         url('../bower_components/fonts/GOTHICB.woff') format('woff'),
         url('../bower_components/fonts/GOTHICB.ttf') format('truetype'),
         url('../bower_components/fonts/GOTHICB.svg#GOTHICB') format('svg');
}

@font-face {
    font-family: 'Calibri';
    src: url('../bower_components/fonts/Calibri.eot');
		src: url('../bower_components/fonts/Calibri.eot') format('embedded-opentype'),
		url('../bower_components/fonts/Calibri.woff2') format('woff2'),
		url('../bower_components/fonts/Calibri.woff') format('woff'),
		url('../bower_components/fonts/Calibri.ttf') format('truetype'),
		url('../bower_components/fonts/Calibri.svg#Calibri') format('svg');
}

@font-face {
    font-family: 'GOTHIC';
    src: url('../bower_components/fonts/GOTHIC.eot');
    src: url('../bower_components/fonts/GOTHIC.eot') format('embedded-opentype'),
         url('../bower_components/fonts/GOTHIC.woff2') format('woff2'),
         url('../bower_components/fonts/GOTHIC.woff') format('woff'),
         url('../bower_components/fonts/GOTHIC.ttf') format('truetype'),
         url('../bower_components/fonts/GOTHIC.svg#GOTHIC') format('svg');
}



.dashaborder-title{ color:#d8dbda;
    display: inline-block;
    vertical-align: top;
    font-size: 36px;
    margin-left: 21px;
    font-weight: 300;  font-family: 'GOTHIC';}
    
    
  .k-grid-header .k-header{color: #222;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: 700;  }
    
   .k-grid tbody .k-grid-edit,.k-grid tbody .k-grid-delete, .k-grid tbody .k-grid-add, .k-grid tbody .k-grid-creates{ font-size: 0; margin:0 3px;  min-width: 0; padding: 3px; background-color: #666; border: 0}
   .k-button-icontext .k-icon{margin: 0}
 

.tab-content .k-grid{
    background-color: #fff;
}

.k-button.k-button-icontext.k-grid-creates span{background: url('../bower_components/kendo/2013.3.1119/Default/add.png') center center no-repeat; height: 16px; width: 16px; display: inline-block; opacity:0.8;} 
.k-button.k-button-icontext.k-grid-creates:hover span{opacity:1;}

.policy_excel_logo { float: right; }
.policy_excel_logo img{ border: 0}
.tab-content{font-family: "Calibri"}



@keyframes onoff3_on {
  0% {
    background-position: 0 0, 0 0, 0 55%, 0.7em 0, 0.7em 0, 0.7em 55%, 0 0, 0 0, 0 0;
    background-size: 0.2em 100%, 0.6em 0.2em, 0.4em 0.2em, 0.2em 100%, 0.6em 0.2em, 0.4em 0.2em, 0.2em 100%, 0.2em 100%, 100% 100%;
  }
  50% {
    background-position: 0 0, 0 0, 0 55%, 0 0, 0 0, 0 55%, 0 0, 0 0, 0 0;
    background-size: 0.2em 100%, 0.2em 0.2em, 0.2em 0.2em, 0.2em 100%, 0.2em 0.2em, 0.2em 0.2em, 0.2em 100%, 0.2em 100%, 100% 100%;
  }
  100% {
    background-position: 0 0, 0 0, 0 55%, 0 0, 0 0, 0 55%, 0.4em 0, 0.15em 0, 0 0;
    background-size: 0.2em 100%, 0.2em 0.2em, 0.2em 0.2em, 0.2em 100%, 0.2em 0.2em, 0.2em 0.2em, 0.2em 100%, 0.35em 100%, 100% 100%;
  }
}

@keyframes onoff3_off {
  0% {
    background-position: 0 0, 0 0, 0 55%, 0 0, 0 0, 0 55%, 0.4em 0, 0.15em 0, 0 0;
    background-size: 0.2em 100%, 0.2em 0.2em, 0.2em 0.2em, 0.2em 100%, 0.2em 0.2em, 0.2em 0.2em, 0.2em 100%, 0.35em 100%, 100% 100%;
  }
  50% {
    background-position: 0 0, 0 0, 0 55%, 0 0, 0 0, 0 55%, 0 0, 0 0, 0 0;
    background-size: 0.2em 100%, 0.2em 0.2em, 0.2em 0.2em, 0.2em 100%, 0.2em 0.2em, 0.2em 0.2em, 0.2em 100%, 0.2em 100%, 100% 100%;
  }
  100% {
    background-position: 0 0, 0 0, 0 55%, 0.7em 0, 0.7em 0, 0.7em 55%, 0 0, 0 0, 0 0;
    background-size: 0.2em 100%, 0.6em 0.2em, 0.4em 0.2em, 0.2em 100%, 0.6em 0.2em, 0.4em 0.2em, 0.2em 100%, 0.2em 100%, 100% 100%;
  }
}
.custom_new_look label{
  color: white !important;
  margin-right: 6px !important;
  margin-bottom: 0px !important;
  cursor: pointer !important;
}
.custom_new_look{
  margin-right: 8px !important;
    padding-top: 15px;
    display: flex !important;
    
}
.custom_new_look li{
    display: flex !important;
    cursor: pointer !important;
}
.custom_new_look input{
  cursor: pointer !important;
}
.onoff3 {
  --time: 0.25s;
  appearance: none;
  position: relative;
  font-size: 1.2em;
    width: 2em;
  aspect-ratio: 2;
  border: max(2px, 0.025em) solid;
  border-radius: 100vmax;
  box-sizing: border-box;
  margin-right: 2em;
  min-width: 2em;

  border-color: #dc3545;
    --bs-form-switch-bg: url(data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(220 53 69)'/></svg>);
    margin-left: -2.5em;
    background-image: var(--bs-form-switch-bg);
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out;
    margin-top: 0px !important;
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 42%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid #0000;
    background: white;
    transition: left var(--time);
  }
  
  &::after {
    /* content: ""; */
    position: absolute;
    height: 85%;
    left: 105%;
    top: 50%;
    transform: translateY(-50%);
    width: 1.4em;
    background: 
      /* common */
      linear-gradient(currentcolor 0 0) 0 0 / 0.2em 100%,
      /* ff */
      linear-gradient(currentcolor 0 0) 0 0 / 0.2em 0.2em,
      linear-gradient(currentcolor 0 0) 0 0 / 0.2em 0.2em,
      linear-gradient(currentcolor 0 0) 0 0 / 0.2em 100%,
      linear-gradient(currentcolor 0 0) 0 0 / 0.2em 0.2em,
      linear-gradient(currentcolor 0 0) 0 55% / 0.2em 0.2em,
      /* n */
      linear-gradient(currentcolor 0 0) 0 0 / 0.2em 100%,
      linear-gradient(to bottom left, #0000 40%, currentcolor 0 70%, #0000 0) 0 0 / 0.2em 100%,
      #0000;
    background-repeat: no-repeat;
    animation: onoff3_off var(--time) linear 1 forwards;
  }
  
  &:checked {
    &::before {
      left: 75%;
    }
    
    &::after {
      animation: onoff3_on var(--time) linear 1 forwards;
    }
  }
  
  &[disabled] {
    opacity: 0.25;
    
    &, &::before, &::after {
      transition-duration: 0s ;
      animation-duration: 0s;
    }
  }
}

@media print {
  .onoff3 {
    &, &::before, &::after {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }
}

@media (prefers-reduced-motion) {
  .onoff3 {
    &, &::before, &::after {
      transition: none !important;
      animation: none !important;
    }
  }
}