.checkbutton input[type=radio], .checkbutton input[type=checkbox] { display: none; margin: 0px; padding: 0px; color: black; } .checkbutton input[type=radio] + label, .checkbutton input[type=checkbox] + label { border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #b3b3b3; display: inline-block; font-size: 12px; font-weight: lighter; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; background-color: #f5f5f5; background-repeat: repeat-x; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); background-image: linear-gradient(to bottom,#fff,#e6e6e6); margin: 0px; margin-bottom:3px; padding: 0px; } .checkbutton input[type=radio]:checked + label, .checkbutton input[type=checkbox]:checked + label { background-image: none; outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); background-color: #d0d0d0; } .checkbutton input[type=radio] + label #preorder { border-left: 1px solid #CCCCFF; border-right: 1px solid #CCCCFF; border-top: 1px solid #CCCCFF; border-bottom: 1px solid #CCCCFF; display: inline-block; font-size: 12px; font-weight: lighter; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; background-color: #CCCCFF; background-repeat: repeat-x; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); background-image: linear-gradient(to bottom,#fff,#CCCCFF); margin: 0px; padding: 0px; } .checkbutton input[type=radio]:checked + label #preorder { background-image: none; outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); background-color: #BBBBFF; } /*-----------------------------------*/ .checkbutton_active input[type=radio], .checkbutton_active input[type=checkbox] { display: none; margin: 0px; padding: 0px; color: black; } .checkbutton_active input[type=radio] + label, .checkbutton_active input[type=checkbox] + label { margin: 0px; display: inline-block; cursor: pointer; background-color: #4CAF50; border-color: #4CAF50; --bs-badge-padding-x: 0px; --bs-badge-padding-y: 0.55em; --bs-badge-font-size: 13px; --bs-badge-font-weight: 500; --bs-badge-color: #fff; --bs-badge-border-radius: 0.45rem; padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x); font-size: var(--bs-badge-font-size); font-weight: var(--bs-badge-font-weight); line-height: 1; color: var(--bs-badge-color); text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: var(--bs-badge-border-radius); width: 60px; } .checkbutton_active input[type=radio] + label, .checkbutton_active input[type=checkbox] + label:hover { opacity: 0.9; box-shadow: 0 14px 26px -12px rgba(76, 175, 80, 0.4), 0 4px 23px 0 rgba(76, 175, 80, 0.15), 0 8px 10px -5px rgba(76, 175, 80, 0.2); } .checkbutton_inactive input[type=radio], .checkbutton_inactive input[type=checkbox] { display: none; margin: 0px; padding: 0px; color: black; } .checkbutton_inactive input[type=radio] + label, .checkbutton_inactive input[type=checkbox] + label { margin: 0px; display: inline-block; cursor: pointer; background-color: #F44335; border-color: #4CAF50; --bs-badge-padding-x: 0px; --bs-badge-padding-y: 0.55em; --bs-badge-font-size: 13px; --bs-badge-font-weight: 500; --bs-badge-color: #fff; --bs-badge-border-radius: 0.45rem; padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x); font-size: var(--bs-badge-font-size); font-weight: var(--bs-badge-font-weight); line-height: 1; color: var(--bs-badge-color); text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: var(--bs-badge-border-radius); width: 60px; } .checkbutton_inactive input[type=radio] + label, .checkbutton_inactive input[type=checkbox] + label:hover { opacity: 0.9; box-shadow: 0 14px 26px -12px rgba(207, 57, 45, 0.4), 0 4px 23px 0 rgba(207, 57, 45, 0.15), 0 8px 10px -5px rgba(207, 57, 45, 0.2); } .checkbutton_primary input[type=radio], .checkbutton_primary input[type=checkbox] { display: none; margin: 0px; padding: 0px; color: black; } .checkbutton_primary input[type=radio] + label, .checkbutton_primary input[type=checkbox] + label { margin: 0px; display: inline-block; cursor: pointer; /*background-color: #e91e63; background-repeat: repeat-x; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); background-image: linear-gradient(to bottom,#e91e63,#e91e63);*/ border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #b3b3b3; background-color: #f5f5f5; background-repeat: repeat-x; /*-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);*/ background-image: linear-gradient(to bottom,#fff,#e6e6e6); /*border-radius: 10px;*/ --bs-badge-padding-x: 9px; --bs-badge-padding-y: 5px; --bs-badge-font-size: 12px; --bs-badge-font-weight: 500; --bs-badge-border-radius: 0.45rem; padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x); font-size: var(--bs-badge-font-size); /*font-weight: var(--bs-badge-font-weight);*/ /*line-height: 1;*/ /*width: 100px;*/ text-align: center; white-space: nowrap; vertical-align: baseline; margin: 0px auto; } .checkbutton_primary input[type=radio] + label:hover, .checkbutton_primary input[type=checkbox] + label:hover { /*opacity: 0.9; box-shadow: 0 3px 3px 0 rgba(233, 30, 99, 0.15), 0 3px 1px -2px rgba(233, 30, 99, 0.2), 0 1px 5px 0 rgba(233, 30, 99, 0.15);*/ } .checkbutton_primary input[type=radio]:checked + label, .checkbutton_primary input[type=checkbox]:checked + label { background-image: none; outline: 0; /*-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);*/ background-color: #d0d0d0; } .w-200 input[type=radio] + label, .w-200 input[type=checkbox] + label { width: 200px; margin: 0px 5px 0px 5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); font-size: 1rem; font-weight: 600; padding: 9px 10px 9px 10px; border-radius: 50px; } .w-200 input[type=radio]:checked + label, .w-200 input[type=checkbox]:checked + label { width: 200px; margin: 0px 5px 0px 5px; box-shadow: 0 6px 20px #029b9b70; font-size: 1rem; font-weight: 600; padding: 9px 10px 9px 10px; border-radius: 50px; } .w-80 input[type=radio] + label, .w-80 input[type=checkbox] + label { width: 80px; margin: 0px 1px 0px 1px; font-size: 0.8rem; font-weight: 500; padding: 5px 6px 5px 6px; border-radius: 50px; } .w-80 input[type=radio]:checked + label, .w-80 input[type=checkbox]:checked + label { width: 80px; margin: 0px 1px 0px 1px; font-size: 0.8rem; font-weight: 500; padding: 5px 6px 5px 6px; border-radius: 50px; } .w-60 input[type=radio] + label, .w-60 input[type=checkbox] + label { width: 60px; margin: 0px 2px 0px 0px; font-size: 0.8rem; font-weight: 500; padding: 5px 6px 5px 6px; border-radius: 50px; } .w-60 input[type=radio]:checked + label, .w-60 input[type=checkbox]:checked + label { width: 60px; margin: 0px 2px 0px 0px; font-size: 0.8rem; font-weight: 500; padding: 5px 6px 5px 6px; border-radius: 50px; } .w-40 input[type=radio] + label, .w-40 input[type=checkbox] + label { width: 40px; margin: 0px 2px 0px 0px; font-size: 0.8rem; font-weight: 500; padding: 5px 6px 5px 6px; border-radius: 10px; } .w-40 input[type=radio]:checked + label, .w-40 input[type=checkbox]:checked + label { width: 40px; margin: 0px 2px 0px 0px; font-size: 0.8rem; font-weight: 500; padding: 5px 6px 5px 6px; border-radius: 10px; } .checkbutton_onoff input[type=radio], .checkbutton_onoff input[type=checkbox] { display: none; margin: 0px; padding: 0px; color: black; cursor: pointer; } .checkbutton_onoff input[type=radio] + label, .checkbutton_onoff input[type=checkbox] + label { border: 1px solid #e6e6e6; background: linear-gradient(to bottom,#fff,#e6e6e6); color: #333; /*padding: 0.8rem 2rem;*/ text-transform: uppercase; transition: all 0.3s ease-in-out; position: relative; overflow: hidden; } .checkbutton_onoff input[type=radio]:checked + label, .checkbutton_onoff input[type=checkbox]:checked + label { border: 1px solid rgba(255, 255, 255, 0); background: linear-gradient(45deg, #029b9b, #029b9b, #035e5e); color: #fff; /*padding: 0.8rem 2rem;*/ text-transform: uppercase; transition: all 0.3s ease-in-out; position: relative; overflow: hidden; } .checkbutton_onoff input[type=radio] + label:hover, .checkbutton_onoff input[type=checkbox] + label:hover { cursor: pointer; }