@charset "utf-8";
/* CSS Document */
:root{
transition-effect: 0.25s cubic-bezier(0.25, -0.59, 0.82, 1.66);
}

/*bundle political*/
#bundlepreview{
/*	padding:0px 10px !important;*/
}
#bundlecolumn{
	padding:0px 10px;
}
.bundledetail{
	padding: 0px 0px;
}

.bundlerowtitle{
	background-color: darkblue;
	color: white;
	font-size: 0.9em;
	height:35px;
}
.ccol-10 {
    float: left;
    width: 10%;
	padding: 0px 0px 0px 2px;
}
.ccol-15 {
    float: left;
    width: 15%;
	padding: 0px 0px 0px 2px;
}
.ccol-20 {
    float: left;
    width: 20%;
	padding: 0px 0px 0px 2px;
}
.ccol-5 {
    float: left;
    width: 5%;
	padding: 0px 0px 0px 2px;
}
.ccol-55 {
    float: left;
    width: 55%;
	padding: 0px 0px 0px 2px;
}
.ccol-50 {
    float: left;
    width: 50%;
	padding: 0px 0px 0px 2px;
}
.ccol_qty{
	background-color: darkblue;
	color: white;
/*	font-size: 0.9em;	*/
    height: 100%;
    display: flex;
    align-items: center;	
	justify-content: center;
}
.ccol_product{
	height: 100%;
    display: inline-flex;
    align-items: flex-start;
    flex-direction: column;
}
.div_colvalue{
	text-align: right;
	padding-right: 5px;
}
.crow {
	margin: 0px;
	display: flex;
	align-items: center;
}
.crow::after {
    content: "";
    display: table;
    clear: both;
}
.bundlerowproduct{
	height: 40px;
}
.productname{
	padding-left: 5px;
    font-size: 1em;	
    font-weight: bolder;
    color: black;
		
}
/*bundle political*/


#quickorder .form-order-info .form-content .instantform .sign-info_new_re {
    flex: 1;
    width: 100%;
    height: 450px;
    background-image: url("../images/Blankcustomre.gif");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#quickorder #content-re {
    margin-top: 15px;
    width: 80%;
    padding: 5px 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
    font-size: 20px;
}
.material-section {
    max-width: 100%;
    margin: auto;
}
.material-section .material-content {
    display: flex;
    background: white;
}
.material-section .material-content .material-info {
    width: 33%;
    padding: 10px 10px;
}
.material-section .material-content .material-info .mat-show {
    font-size: 13px;
}
.material-section .material-content .material-info .mat-show table {
    width: 100%;
    background: #f1f1f1;
}
.panel-option {
    margin: 10px 0px;
}

.image-ledbox-24x18 {
    position: absolute;
    top: 10%;
    left: 15%;	
	width: 40%;
    height: auto;
    box-shadow: -4px 4px 5px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
    filter: contrast(100%) brightness(90%) saturate(1);
    cursor: url( "../images/plugit.png"), auto;
}

.image-ledbox-18x24 {
    position: absolute;
    top: 10%;
	left: 20%;
	width: 30%;
    height: auto;
    box-shadow: -4px 4px 5px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
    filter: contrast(100%) brightness(90%) saturate(1);
    cursor: url( "../images/plugit.png"), auto;
}
.image-ledbox-36x24 {
    position: absolute;
    top: 10%;
	left: 10%;    
	width: 54%;
    height: auto;
    box-shadow: -4px 4px 5px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
    filter: contrast(100%) brightness(90%) saturate(1);
    cursor: url( "../images/plugit.png"), auto;
}
.image-ledbox-24x36 {
    position: absolute;
    top: 2%;
	left: 15%;
	width: 36%;
    height: auto;
    box-shadow: -4px 4px 5px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
    filter: contrast(100%) brightness(90%) saturate(1);
    cursor: url( "../images/plugit.png"), auto;
}
.lightON {
    filter: contrast(100%) brightness(110%) saturate(1.1);
    cursor: url( "../images/plugit.png"), auto;
}
.fc-template {
    padding: 8px 8px;
}
.fc-template ul {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}
.portrait {
    max-width: 17%;
}
.landscape {
    max-width: 23%;
}
.template {
    min-width: 80px;
    display: block;
    list-style: none;
    text-align: center;
    margin: 7px 7px;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.r-image-ashape {
    width: 100%;
    height: 100%;
/*    box-shadow: -4px 4px 5px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);*/
}
.r-image-ledbox {
    width: 100%;
    height: 100%;
/*	border: 7.3px solid #000000;*/
/*    box-shadow: -4px 4px 5px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);*/
}
.r-image-fc:hover {
    filter: contrast(100%) brightness(120%) saturate(1.1);
}
.switchbox {
    width: 2rem;
    height: 2.5rem;
    padding: 0 0 0 0;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom : 5px;
    left : 5px;
    text-align: center;
    margin: 3px 3px;
}
.switch-toggle {
    width: 100%;
    margin: 0 auto;
    height: 1.2rem;
    appearance: none;
    background: #65aaf1;
    border-radius: 0.6rem;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0 0 16px rgb(0, 0, 0, 0.5);
    transition: var(--transition-effect);
}
.switch-toggle:before {
    content: "";
    width: 1rem;
    height: 1rem;
    position: absolute;
    left: 0.1rem;
    top: 0.1rem;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0,0,0,0.5);
    transition: var(--transition-effect);
}
.switch-toggle:checked {
    background: #1c8cff;
}
.switch-toggle:checked:before {
    left: 0.9rem;
    background: #ffbd72;
}
.l-switch-toggle{
    font-size: 0.5rem;
}

.catgroup {
    position: absolute;
/*    left: 59.5%;	100% if parent*/
/*
	top: 28%;
	left: 58.5%;	
	height: 60.5%;
    width: 21.5%;
*/
	top: 17%;
    left: 52%;
    height: 68.5%;
    width: 25.5%;
	
/*    filter: contrast(100%) brightness(90%) saturate(1); why ??*/
    transform: rotateY(-36deg) rotateX(17deg);
}

.catgroup{
    list-style-type: none;    
	display: flex;
	justify-content: space-around;
	font-size: 14px;
}
.catlgroup li{
	display: block;
}