/*!
  * hyperhdr.css
  * Copyright (c) 2020-2025 awawa-dev
  * Licensed under MIT (https://github.com/awawa-dev/HyperHDR/blob/master/LICENSE)
  */
@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Regular.woff2") format('woff2'),
	 url("../fonts/Roboto-Regular.ttf") format('ttf');
}

body {
    font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 15px;
    margin: 0 auto;
}

body:not(.dark-mode) .text-info {
	color: #0090c0 !important;
}

.dark-mode .text-primary {
	color: #5499d3 !important;
}

body:not(.dark-mode) svg.svg4hyperhdr.top-left-menu:hover {
	color: #cf0d0d;
}

.dark-mode svg.svg4hyperhdr.top-left-menu:hover {
	color: #dc3545;
}

.modal-hyperhdr-header h4{
	margin-bottom: 0;
}

body:not(.dark-mode) .stats-report-ok {
	color: ForestGreen;
}

.dark-mode .stats-report-ok {
	color: Lime;
}

body:not(.dark-mode) .stats-report-warning {
	color: DarkOrange;
}

.dark-mode .stats-report-warning {
	color: orange;
}

.stats-report-error {
	color: red;
}

.svg4hyperhdr {
    display: inline-flex;
    align-self: center;	
}

svg.svg4hyperhdr {
    height:auto;
    width:1em;
    margin-right: 0.5rem;
    position: relative;
    top: -2px;
}

button.btn>svg.svg4hyperhdr {
	width:1.2em;
    margin-right: 0.175rem;
}

.card-header svg.svg4hyperhdr {
    top: -1px;
    width:24px;
}

svg.svg4hyperhdr.leftmenu{
    top: -2px;
    width:20px;
    margin-left: 0.0em;
    margin-right: 0.5em;
}

.col.bottom-menu .svg4hyperhdr{
    width:22px;
}

.dark-mode .performance_stats .badge.bg-danger,
.dark-mode .performance_stats .badge.bg-success,
.dark-mode .performance_stats .badge.bg-secondary{
	color: #000000 !important;
}

.dark-mode svg.specialchar{
	background-color: #303030;
}

body:not(.dark-mode) svg.specialchar{
	background-color: #ececec;
}

.dark-mode svg.specialchar.cpu_low_usage{
	fill: lime;
}
body:not(.dark-mode) svg.specialchar.cpu_low_usage{
	fill: ForestGreen;
}
svg.specialchar.cpu_medium_usage{
	fill: orange;
}
svg.specialchar.cpu_high_usage{
	fill: red;
}
.dark-mode span.cpu_low_usage{
	color: lime;
}
body:not(.dark-mode) span.cpu_low_usage{
	color: ForestGreen;
}
span.cpu_medium_usage{
	color: orange;
}
body:not(.dark-mode) span.cpu_high_usage{
	color: red;
}
.dark-mode span.cpu_high_usage{
	color: #FF2a2a;
}

body:not(.dark-mode) #perf_cpu_usage>span[class^="cpu_"], body:not(.dark-mode) #perf_ram_usage>span[class^="cpu_"]{
	font-weight:bold;
}

.nav li>hr.dropdown-divider{
	border-top: 0px;
	border-bottom: 0.666667px;
	border-style: solid;
	border-color: #dee2e6;
}

.dark-mode #new_modal_dialog:not(.modal-hyperhdr-danger-warning-success) .modal-dialog .modal-content {
	border-width: 3px;
	border-style: solid;
	border-radius: 10px;
	border-color:#1074b1 !important;
}

.dark-mode #new_modal_dialog.modal-hyperhdr-danger-warning-success .modal-dialog .modal-content {
	border-width: 2px;
	border-style: solid;
	border-radius: 10px;
	border-color:#909090 !important;
}

.hyperhdr-vcenter {
	display: flex;
	justify-content: center;
	align-items: center;
}

@media (min-width: 768px){
	.alert.parentAlert {
		padding-left: 74px;
	}

	.alert .notIcon {
		text-align: center;
		width: 60px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;	  
		padding-top: 15px;
		border-radius: 6px 0 0 6px;
		border-color: none;
	}

	.alert .alertProgress {
		width: 4px;
		position: absolute;
		bottom: 0;
		left: 60px;	  
		border-color: none;
	}

	.alert .notIcon i {
		font-size: 20px;
		color: #fff;
		left: 21px;
		margin-top: -10px;
		position: absolute;
		top: 50%;
	}

	#notification-target{
		width: 75% !important;
		left: 12% !important;
	}

	#logmessages {
		height: 34pc;
	}
}

@-webkit-keyframes fadeAlertOut {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
  to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }
}

@keyframes fadeAlertOut {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
  to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }
}

@keyframes alertProgressAnim {
  100% {
    height: 100%;
  }
}

.remove-alert {
	animation: fadeAlertOut 0.5s ease-in-out forwards;
}

.dark-mode .alert.parentAlert {
	border-color: #f39c12;
	background: #f0d080;
	color: #101010;
}

.dark-mode .alert .notIcon {
	background: #f39c12;
}

.dark-mode .alert .text-end.text-muted {
	color: #5a5a5a !important;
}

.dark-mode .alert .alertProgressAnim {
	background: #60a0dd;
	animation: alertProgressAnim 5s linear forwards;
	border-radius: 3px 3px 0px 0px ;
}

body:not(.dark-mode) .alert .alertProgressAnim {
	background: #2daef0;
	animation: alertProgressAnim 5s linear forwards;
	border-radius: 3px 3px 0px 0px ;
}

body:not(.dark-mode) .alert .notIcon {
	background: #ffc107;
}

body:not(.dark-mode) .alert.parentAlert {
	border-color: #ffc107;
	background: #fff3cd;
}

@media (max-width: 767px){

	#remote_color>.picker_wrapper.popup.popup_bottom .picker_arrow {
		left: 100px !important;
	}

	#remote_color>.picker_wrapper.popup.popup_bottom {
		left: -100px !important;
	}

	.parentAlert {
		padding-left: 21px;
	}

	.alert .notIcon {
		text-align: center;
		width: 12px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;	  
		padding-top: 15px;
		border-radius: 6px 0 0 6px;
		border-color: none;
		animation: alertProgress 5s linear forwards;
	}

	.hidden-xs {
	  display: none !important;
	}

	#notification-target{
		width: 96% !important;
		left: 2% !important;
	}

	.alert .alertProgress {
		width: 4px;
		position: absolute;
		bottom: 0;
		left: 12px;	  
		border-color: none;		
	}

	#logmessages {
		height: 30pc;
	}

	#log_head {
		display: none;
	}
}

.dark-mode .toast-header.bg-success {
	background-color: #198754 !important;
}

/*wizard button*/
.btn-wizard {
    color: #fff;
    background-color: #993399;
    border-color: #732673;
}
.btn-wizard:hover{
    color: #fff;
    background-color: #732673;
    border-color: #602060;
}
.btn-wizard:focus{
    color: #fff;
    background-color: #732673;
    border-color: #602060;
}

/*minimal visible button*/
.btn-transparent {
  background-color: transparent;
  border-style: none;
}

/*led preview & led visualisation*/
#leds_canvas {background-color:#AAAAAA; position:absolute; margin:10px; background-image:url(/img/hyperhdr/hyperhdrlogo.png); background-repeat:no-repeat; background-position: center;}
.led { display:inline-block; border: 1px solid black; position:absolute; opacity:0.8; text-align:center; vertical-align:middle; padding:4px;  border-radius:2px;}
.led_num, .led_prev_num {display:none; position:relative; color:black; background-color: white; border-radius:2px; padding:1px; vertical-align:middle; text-align:center;  font-size:0.8em;}
.led_ex{height:15px;width:25px;border-radius:3px;display:inline-block;border:1px solid black}


/*Modal icons*/
@media (min-width: 768px){
	[class*="modal-icon"]{
		border-radius: 110px;
		color:white;
		font-size:110px !important;
	}
}
@media (max-width: 768px){
	[class*="modal-icon"]{
		border-radius: 55px;
		color:white;
		font-size:55px !important;
	}
}
.modal-icon-check{
	background-color:#198754;
}
.modal-icon-warning{
	background-color:#f39c12;
}
.modal-icon-error{
	background-color:#d1322e;
}

.modal-icon-edit{
	background-color:#3579b6;
}

.layout_default .picker_editor {
    width: 11rem !important;
}

.layout_default.picker_wrapper {  
    width: 29em !important;
}

.layout_default.picker_wrapper {  
    z-index: 100;
}

/* drag and resizable modal http://gijgo.com/ */
body:not(.dark-mode) .modal-header.gj-draggable{
	background-color:#1d9ef0 !important;	
}

.dark-mode .modal-header.gj-draggable{
	background-color:#0c78bd !important;
}

.modal-header > .close {
	line-height: normal !important;
	font-size: 2rem  !important;
	color: #fff !important;
}

h4.modal-title {
	color: #fff !important;
}

body:not(.dark-mode) #live_preview_dialog{
	border-color: lightgray !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-top-left-radius: 6px !important;
	border-top-right-radius: 6px !important;
	touch-action: none;
}

.dark-mode #live_preview_dialog{
	border-color: #3e454d !important;	
	border-width: 1px !important;
	border-style: solid !important;
	border-top-left-radius: 6px !important;
	border-top-right-radius: 6px !important;
	touch-action: none;
}

/*////////////////////////////////////////////////////////////////////////*/
code.db_info {
	color: DarkGreen !important;
}
code.db_debug {
	color: #151500 !important;
}
code.db_warning {
	color: MediumVioletRed !important;
}
code.db_error {
	color: #B00000 !important;
}

.dark-mode code.db_info {
	color: LightGreen !important;
}
.dark-mode code.db_debug {
	color: LemonChiffon !important;
}
.dark-mode code.db_warning {
	color: LightPink !important;
}
.dark-mode code.db_error {
	color: #FF7070 !important;
}
/*////////////////////////////////////////////////////////////////////////*/


body:not(.dark-mode) .callout-link {
	color: #00f !important;
}

.dark-mode .callout-link {
	color: #66f !important;
}

.input-group-append>.input-group-text {
	min-width: 60px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

/*Panels*/
.card {
	margin-bottom:1.5rem !important;
}

#page-content:not(.small-me) .card-header {
	font-size:18px;
}

body:not(.dark-mode) .modal-hyperhdr-header {
	background-color:#1d9ef0 !important;
	border-color:#199AEA !important;
	color:#FFFFFF !important;
}

.dark-mode .modal-hyperhdr-header {
	background-color:#0c78bd !important;
	border-color:#1074b1 !important;
	color:#FFFFFF !important;
}

.modal-header.modal-hyperhdr-header.modal-hyperhdr-header-danger {
	background-color:#d1322e !important;
	border-color:#d1322e !important;
}


.modal-header.modal-hyperhdr-header.modal-hyperhdr-header-success {
	background-color:#198754 !important;
	border-color:#198754 !important;
}

.modal-header.modal-hyperhdr-header.modal-hyperhdr-header-warning {
	background-color:#f39c12 !important;
	border-color:#f39c12 !important;
}

.card-default{
	/*background-color:#fff !important;
	border-color:#d0d0d0 !important;*/
}

body:not(.dark-mode) .card-default>.card-header{
	background-color:#1d9ef0 !important;
	border-color:#199AEA !important;
	color:#FFFFFF !important;
}

.dark-mode .card-default>.card-header{
	background-color:#0c78bd !important;
	border-color:#1074b1 !important;
	color:#FFFFFF !important;
}


.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    margin-top: 15px;
    border-bottom: 1px solid #eee;	
}

.page-header > span {
	font-size: 1.5rem !important;
}

div.card-body{
	padding: 15px;
}

.card-body td{
	padding: 0.5rem;	
}

.col-form-label>label{
	padding-left:0px !important;
	padding-right:0px !important;
	font-weight: bold;
	
}

.dark-mode div.col-form-label>label{
	font-weight: 300 !important;	
}


.card.card-body.mb-3{
	border: none;
}

/* toggle component in the remote */
.toggle-group > .toggle-off
{
	padding-left: 20px;	
	background-color: red;
    border-color: purple;
}

body:not(.dark-mode) .toggle-group > .toggle-handle
{	
	background-color: #EEE;
	border-color: #CCC;	
}

.dark-mode .toggle-group > .toggle-handle
{	
	background-color: #888;
	border-color: #999;	
}

/* log messages */
body:not(.dark-mode) pre > #logmessages
{
	display: block;
	padding: 9.5px;
	margin: 0 0 10px;	
	word-break: normal;	
	color: #333;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.dark-mode pre > #logmessages
{
	display: block;
	padding: 9.5px;
	margin: 0 0 10px;	
	word-break: normal;	
	color: #BBB;
	background-color: #212529;
	border: 1px solid #333;
	border-radius: 4px;
}

/* light colors in the overview */
.dark-mode #tab_components > tr
{
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* accordion */
.accordion-item {
    background-color: transparent !important;
}

.accordion-header.card.card-default,.card.accordion-collapse.collapse.show {
    margin-bottom: 1px !important;
}

#collapse3 > .card-body > .container 
{
	padding-left: 0px;
	padding-right: 0px;
}

/* large checkbox */
.input-group > .form-check-input
{
	border-radius: .25em;
    height: 1.5rem;
    width: 1.5rem;	
}

.card .fa, .page-header>.fa
{
	margin-right: 0.2em;
}

/* fix logo */
nav-link brand-link logo-switch {
	padding: 0px;
}

.nav-sidebar > .nav-item {
    margin-bottom: 0;
}

/* links */
body:not(.dark-mode) .my-text-success {
	color: #198754 !important;
}

.dark-mode .my-text-success {
	color: #00bc8c !important;
}

.nav-pills li:not(.menu-is-opening) > .nav-link:hover {
	cursor: pointer;	
}

.nav-pills li.menu-is-opening > .nav-link:hover {
	cursor: default;		
}

.sidebar-light:not(.dark-mode) .menu-is-opening > .nav-link {
	background: rgb(247, 250, 253);
}

.sidebar-light:not(.dark-mode) .nav-pills .nav-item > .nav-link:hover {
	background: rgb(241, 244, 247);
}

.dark-mode .menu-is-opening > .nav-link {
	background: rgb(55, 61, 68);	
}

.dark-mode .nav-pills .nav-item > .nav-link:hover {
	background: rgb(59, 65, 72);
}

.sidebar-light:not(.dark-mode) {
   background-color:#fff
}

.bottom-menu {
	margin-bottom: .2rem;
	display: block;
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.dark-mode #hyperhdr_instances_list{
	background: #212529;
	color: white;
}
/* instance */
.dark-mode #btn_hypinstanceswitch.disabled, .dark-mode #btn_lock_ui.disabled {
	color: gray;
}

body:not(.dark-mode) #btn_hypinstanceswitch.disabled, body:not(.dark-mode) #btn_lock_ui.disabled {
	color: LightGray;
}

.component-none
{
    width:  1.5em;
    height: 1.5em;
    background-size: 1.5em 1.5em;
    padding-left: calc(0.25*1em + 1px);
    padding-top: calc(0.25*1em);
}

#hyperhdr_instances_list.show
{
	margin-left: -3rem !important;
	margin-top: 0.5rem !important;	
}

.dark-mode #hyperhdr_instances_list>.dropdown-divider
{
	border-color:#606060;
}

.dark-mode #hyperhdr_instances_list
{
	border-color:#606060;
}

body:not(.dark-mode) #hyperhdr_instances_list
{
	background-color:#f9f9f9;
}

body:not(.dark-mode) .btn-warning-noset
{
	background-color: #ffda6a !important;
	border-color: #ffda6a !important;
}

body:not(.dark-mode) .btn-warning-set
{
	background-color: #ffc107 !important;
}

.dark-mode .btn-warning-noset
{
	background-color: #cc9a06 !important;
	border-color: #cc9a06 !important;
}

.dark-mode .btn-warning-set
{
	background-color: #ffc107 !important;
}

/* login background*/

body:not(.dark-mode) .content-wrapper-nonactive {
    background-color: #f4f6f9 !important;
}

.dark-mode .content-wrapper-nonactive {
	background-color: #32383e !important;
}

#show_pw {
	border-radius: 0.25em !important;
}

/*Config introduction*/
.introd h4{padding-left:14px;border-left:5px solid #0088cc; font-size: 1.15rem;}

/* support */
.unlink,.unlink:hover{text-decoration:none;}
.support-container ul{padding-left:0px;list-style-type: none;}
.support-container{text-align: center;margin-top:15px;}
.support-container .bg-color-wf{line-height:58px;font-size:54px;width:80px;height:80px;padding:7px;border-radius: 80px;border: 0px solid;transition: background-color 0.5s linear, color 0.5s linear;}
.support-container h4{margin-top:13px;}
.support-container:hover .bg-color-fb{background-color:#3b5998;color:white;}
.support-container:hover .bg-color-tw{background-color:#1da1f2; color:white;}
.support-container:hover .bg-color-g{background-color:#cc181e; color:white;}
.support-container:hover .bg-color-wf{background-color:#0088cc; color:white;}
.support-container:hover .bg-color-btc{background-color:#f7931a; color:white;}
.support-container:hover .bg-color-pp{background-color:#0070ba; color:white;}
.support-container:hover .bg-color-am{background-color:#ef9c00; color:white;}
.support-container:hover .bg-color-ig{background-color:#ab3392; color:white;}

body:not(.dark-mode) .unlink,.unlink:hover{color: #0c78bd}
body:not(.dark-mode) .support-container{color: #0c78bd}
.dark-mode .unlink,.unlink:hover{color: #5499d3}
.dark-mode .support-container{color: #5499d3}

.accordion-item {border: none;}

/* video mode */
#videoDeviceInfoPanelContent {
	padding-left: 6px;
	padding-right: 6px;
}

.dark-mode .videoDeviceInfoImpColumn {
	border-color: rgb(101,106,110) !important;
}

body:not(.dark-mode) .button_vid_mode:not(.button_vid_mode_selected) {
	border-color: #9da9b5 !important;
	color: #0b517b !important;
}

.dark-mode .button_vid_mode:not(.button_vid_mode_selected) {
	color: #aBdEfA !important;
}

body:not(.dark-mode) .button_rate_mode:not(.button_rate_mode_selected) {
	border-color: #9da9b5 !important;
	color: #0b517b !important;
}

.dark-mode .button_rate_mode:not(.button_rate_mode_selected) {
	color: #aBdEfA !important;
}

body:not(.dark-mode) .vidcol4 > span.text-info {
	color: #1074b1 !important;
}

.dark-mode .videoDeviceInfoImpColumn {
	font-weight: normal !important;
}

.dark-mode .button_vid_mode_selected {
	background-color: #109740 !important;
	border-color: #109740 !important;
	color: #FFF !important;
}

.dark-mode .button_rate_mode_selected {
	background-color: #109740 !important;
	border-color: #109740 !important;
	color: #FFF !important;
}

body:not(.dark-mode) .button_vid_mode.disabled {
	opacity: 0.4;
}

body:not(.dark-mode) .button_rate_mode.disabled {
	opacity: 0.4;
}

.dark-mode .button_vid_mode.disabled {
	opacity: 0.5;
}

.dark-mode .button_rate_mode.disabled {
	opacity: 0.5;
}

/* main */
.main-no-margin > #hyper-subpage {
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.dark-mode button.close {
	color: #fff;
}

.icon-menu-control
{
	color: #777;
}

.dark-mode .icon-menu-control
{
	color: #999;
}

.specialchar {
	margin-left: 2px;
	font-size: 18px;
	font-family: 'Courier New', Courier, 'MS PGothic', monospace;
}

.fullscreen-canvas {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:2147483647;
	box-sizing:border-box;
	margin:0;
	width:100%;
	height:100%;
	cursor:none;
}

body:not(.dark-mode) input.picker_editor_hyperhdr_R { background-color: #ffb0b0 !important;}
body:not(.dark-mode) input.picker_editor_hyperhdr_G { background-color: #b0ffb0 !important;}
body:not(.dark-mode) input.picker_editor_hyperhdr_B { background-color: #a0b0ff !important;}

body:not(.dark-mode) .picker_wrapper.popup, body:not(.dark-mode) .picker_wrapper.popup .picker_arrow::before, body:not(.dark-mode) .picker_wrapper.popup .picker_arrow::after {
	background-color: #f0f2f5;
}
body:not(.dark-mode) .picker_wrapper {
	background-color: #f0f2f5;
}

.dark-mode input.picker_editor_hyperhdr_R { color: #ffa0a0 !important;}
.dark-mode input.picker_editor_hyperhdr_G { color: #a0ffa0 !important;}
.dark-mode input.picker_editor_hyperhdr_B { color: #a0b0ff !important;}

.dark-mode .picker_wrapper.popup, .dark-mode .picker_wrapper.popup .picker_arrow::before, .dark-mode .picker_wrapper.popup .picker_arrow::after {
	background-color:#363C42;
}
.dark-mode .picker_wrapper {
	background-color:#363C42;
}


body:not(.dark-mode) .alert-yellow{
	color:#664d03;
	background-color:#fff3cd;
	border-color:#ffecb5
}

.dark-mode .alert-yellow{
	color: #212529;
	background-color: #f39c12;
	border-color: #e08e0b;
}

body:not(.dark-mode) .lutdownloader{
	background-color: #bbbbbb !important;
	border-color: #a0a0a0 !important;
	min-width: 360px;
	max-width: 360px;
}

.dark-mode .lutdownloader{
	background-color: #505050 !important;
	border-color: #909090 !important;
	min-width: 360px;
	max-width: 360px;
}

.crosslineDark {
     background: 
         linear-gradient(to top left,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 1px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 1px),
             rgba(0,0,0,0) 100%),
         linear-gradient(to top right,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 1px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 1px),
             rgba(0,0,0,0) 100%);
}

.crosslineWhite {
     background: 
         linear-gradient(to top left,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 1.5px),
             rgba(255,255,255,1) 50%,
             rgba(0,0,0,0) calc(50% + 1.5px),
             rgba(0,0,0,0) 100%),
         linear-gradient(to top right,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 1.5px),
             rgba(255,255,255,1) 50%,
             rgba(0,0,0,0) calc(50% + 1.5px),
             rgba(0,0,0,0) 100%);
}

.beforeAnimation {
  -moz-transition: .2s cubic-bezier(.24, 0, .5, 1);
  -o-transition: .2s cubic-bezier(.24, 0, .5, 1);
  -webkit-transition: .2s cubic-bezier(.24, 0, .5, 1);
  transition: .2s cubic-bezier(.24, 0, .5, 1);
}

.afterAnimation {
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, .04), 0 4px 9px hsla(0, 0%, 0%, .13), 0 3px 3px hsla(0, 0%, 0%, .05);
  -moz-transition: .35s cubic-bezier(.54, 1.60, .5, 1);
  -o-transition: .35s cubic-bezier(.54, 1.60, .5, 1);
  -webkit-transition: .35s cubic-bezier(.54, 1.60, .5, 1);
  transition: .35s cubic-bezier(.54, 1.60, .5, 1);
}

.inactiveToggleMixin {
	 content: "";
	 position: absolute;
	 display: block;
}
 .beforeToggleAnimation {
	 -moz-transition: .2s cubic-bezier(.24,0,.5,1);
	 -o-transition: .2s cubic-bezier(.24,0,.5,1);
	 -webkit-transition: .2s cubic-bezier(.24,0,.5,1);
	 transition: .2s cubic-bezier(.24,0,.5,1);
}
 .afterToggleAnimation {
	 box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 4px 0px 0 rgba(0,0,0,0.04), 0 4px 9px rgba(0,0,0,0.13), 0 3px 3px rgba(0,0,0,0.05);
	 -moz-transition: .35s cubic-bezier(.54,1.60,.5,1);
	 -o-transition: .35s cubic-bezier(.54,1.60,.5,1);
	 -webkit-transition: .35s cubic-bezier(.54,1.60,.5,1);
	 transition: .35s cubic-bezier(.54,1.60,.5,1);
}
 input.mobileToggle {
	 opacity: 0;
	 position: absolute;
}
 input.mobileToggle + label {
	 position: relative;
	 display: inline-block;
	 user-select: none;
	 -moz-transition: .4s ease;
	 -o-transition: .4s ease;
	 -webkit-transition: .4s ease;
	 transition: .4s ease;
	 -webkit-tap-highlight-color: transparent;
	 height: 30px;
	 width: 52px;	 
	 border-radius: 60px;
}
 input.mobileToggle + label:before {
	 content: "";
	 position: absolute;
	 display: block;
	 -moz-transition: .2s cubic-bezier(.24,0,.5,1);
	 -o-transition: .2s cubic-bezier(.24,0,.5,1);
	 -webkit-transition: .2s cubic-bezier(.24,0,.5,1);
	 transition: .2s cubic-bezier(.24,0,.5,1);
	 height: 30px;
	 width: 52px;
	 top: 0;
	 left: 0;
	 border-radius: 30px;
}
 input.mobileToggle + label:after {
	 content: "";
	 position: absolute;
	 display: block;
	 box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 4px 0px 0 rgba(0,0,0,0.04), 0 4px 9px rgba(0,0,0,0.13), 0 3px 3px rgba(0,0,0,0.05);
	 -moz-transition: .35s cubic-bezier(.54,1.60,.5,1);
	 -o-transition: .35s cubic-bezier(.54,1.60,.5,1);
	 -webkit-transition: .35s cubic-bezier(.54,1.60,.5,1);
	 transition: .35s cubic-bezier(.54,1.60,.5,1);
	 background: whitesmoke;
	 height: 28px;
	 width: 28px;
	 top: 1px;
	 left: 0px;
	 border-radius: 60px;
}
 input.mobileToggle:checked + label:before {
	 -moz-transition: width .2s cubic-bezier(0,0,0,.1);
	 -o-transition: width .2s cubic-bezier(0,0,0,.1);
	 -webkit-transition: width .2s cubic-bezier(0,0,0,.1);
	 transition: width .2s cubic-bezier(0,0,0,.1);
}

 input.mobileToggle:checked + label:after {
	 left: 24px;
}

body:not(.dark-mode) input.mobileToggle:checked + label:before
{	
	background: #198754;	
}

.dark-mode input.mobileToggle:checked + label:before
{	
	background: #00bc8c;	
}

body:not(.dark-mode) input.mobileToggle + label:before
{	
	background: #dc3545;	
}

.dark-mode input.mobileToggle + label:before
{	
	background: #e74c3c;
}

body:not(.dark-mode) input.mobileToggle:not(:checked) + label
{	
	border-color: #ec4555;
}

.dark-mode input.mobileToggle:not(:checked) + label
{	
	border-color: #f75c4c;
}

body:not(.dark-mode) input.mobileToggle:checked + label
{	
	border-color: #299764;
}

.dark-mode input.mobileToggle:checked + label
{	
	border-color: #10cc9c;
}

input.mobileToggle:disabled + label:before
{	
	background: #a0a0a0 !important;	
}