div:not(.onSite_input) .input_container { float:left; position:relative; width:50%; padding:5px; margin:10px 0 5px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; }
div:not(.onSite_input) .input_container.flex-start { justify-content:start; }
div:not(.onSite_input) .input_container25 { width:25%; }
div:not(.onSite_input) .input_container30 { width:33.3%; }
div:not(.onSite_input) .input_container50 { width:50%; }
div:not(.onSite_input) .input_container66 { width:66.6%; }
div:not(.onSite_input) .input_container100 { width:100%; }
div:not(.onSite_input) .input_container .label { margin:0 10px; }

#MainContainer div:not(.onSite_input) input:not([type=checkbox]):not([type=radio])+label,
#MainContainer div:not(.onSite_input) input:not([type=checkbox]):not([type=radio])+.picker+label,
#MainContainer div:not(.onSite_input) textarea+label,
#MainContainer div:not(.onSite_input) textarea+.tox-tinymce+label,
#MainContainer div:not(.onSite_input) select+label,
/* FANCYBOX */
.fancybox-container div:not(.onSite_input) input:not([type=checkbox]):not([type=radio])+label,
.fancybox-container div:not(.onSite_input) input:not([type=checkbox]):not([type=radio])+.picker+label,
.fancybox-container div:not(.onSite_input) textarea+label,
.fancybox-container div:not(.onSite_input) textarea+.tox-tinymce+label,
.fancybox-container div:not(.onSite_input) select+label
{ position:absolute; top:-10px; right:0; width:fit-content; padding:5px; background:#FFF; /*border-radius:15px;*/ color:#000; /*border:2px solid #000; box-shadow:0 0 5px #FFF;*/ }

#MainContainer div:not(.onSite_input) input[type=text], 
#MainContainer div:not(.onSite_input) input[type=number],
#MainContainer div:not(.onSite_input) input[type=email],
#MainContainer div:not(.onSite_input) input[type=tel],
#MainContainer div:not(.onSite_input) input[type=password],
#MainContainer div:not(.onSite_input) textarea,
#MainContainer div:not(.onSite_input) select,
/* FANCYBOX */
.fancybox-container div:not(.onSite_input) input[type=text], 
.fancybox-container div:not(.onSite_input) input[type=number],
.fancybox-container div:not(.onSite_input) input[type=email],
.fancybox-container div:not(.onSite_input) input[type=tel],
.fancybox-container div:not(.onSite_input) input[type=password],
.fancybox-container div:not(.onSite_input) textarea,
.fancybox-container div:not(.onSite_input) select{
    width:100%;
    padding:10px;
    box-sizing:border-box;
    color:#333;
    background:#FFF;
    border-radius:5px;
    border:none;
    font-size:18px;
    border:1px solid #cecece;
    font-family: 'Comfortaa', sans-serif;
    transition:all 0.3s;
}

#MainContainer div:not(.onSite_input) input[type=color],
.fancybox-container div:not(.onSite_input) input[type=color]{
    width: 100%;
    padding:10px;
    box-sizing:border-box;
    color:#333;
    border:1px solid #cecece;
    font-family: 'Comfortaa', sans-serif;
    height: 50px;
    /*border-radius:10px;*/
    transition:all 0.3s;
}

#MainContainer div:not(.onSite_input) textarea,
.fancybox-container div:not(.onSite_input) textarea {
	min-height:120px; 
}

#MainContainer div:not(.onSite_input) input[type=text], 
#MainContainer div:not(.onSite_input) input[type=number],
#MainContainer div:not(.onSite_input) input[type=email],
#MainContainer div:not(.onSite_input) input[type=tel],
#MainContainer div:not(.onSite_input) input[type=password],
#MainContainer div:not(.onSite_input) select,
/* FANCYBOX */
.fancybox-container div:not(.onSite_input) input[type=text], 
.fancybox-container div:not(.onSite_input) input[type=number],
.fancybox-container div:not(.onSite_input) input[type=email],
.fancybox-container div:not(.onSite_input) input[type=tel],
.fancybox-container div:not(.onSite_input) input[type=password],
.fancybox-container div:not(.onSite_input) select { height:50px; }

#MainContainer div:not(.onSite_input) input[type=text]:active, #MainContainer div:not(.onSite_input) input[type=text]:focus, 
#MainContainer div:not(.onSite_input) input[type=number]:active, #MainContainer div:not(.onSite_input) input[type=number]:focus,
#MainContainer div:not(.onSite_input) input[type=email]:active, #MainContainer div:not(.onSite_input) input[type=email]:focus,
#MainContainer div:not(.onSite_input) input[type=tel]:active, #MainContainer div:not(.onSite_input) input[type=tel]:focus,
#MainContainer div:not(.onSite_input) input[type=password]:active, #MainContainer div:not(.onSite_input) input[type=password]:focus,
#MainContainer div:not(.onSite_input) input[type=color]:active, #MainContainer div:not(.onSite_input) input[type=color]:focus,
#MainContainer div:not(.onSite_input) textarea:active, #MainContainer div:not(.onSite_input) textarea:focus,
#MainContainer div:not(.onSite_input) select:active, #MainContainer div:not(.onSite_input) select:focus,
/* FANCYBOX */
.fancybox-container div:not(.onSite_input) input[type=text]:active, .fancybox-container div:not(.onSite_input) input[type=text]:focus, 
.fancybox-container div:not(.onSite_input) input[type=number]:active, .fancybox-container div:not(.onSite_input) input[type=number]:focus,
.fancybox-container div:not(.onSite_input) input[type=email]:active, .fancybox-container div:not(.onSite_input) input[type=email]:focus,
.fancybox-container div:not(.onSite_input) input[type=tel]:active, .fancybox-container div:not(.onSite_input) input[type=tel]:focus,
.fancybox-container div:not(.onSite_input) input[type=password]:active, .fancybox-container div:not(.onSite_input) input[type=password]:focus,
.fancybox-container div:not(.onSite_input) input[type=color]:active, .fancybox-container div:not(.onSite_input) input[type=color]:focus,
.fancybox-container div:not(.onSite_input) textarea:active, .fancybox-container div:not(.onSite_input) textarea:focus,
.fancybox-container div:not(.onSite_input) select:active, .fancybox-container div:not(.onSite_input) select:focus {
    /*color:#FBC600;*/
    border:1px solid #FBC600;
    outline:none;
}

#MainContainer div:not(.onSite_input) input:not([type=checkbox]):not([type=radio]):focus+label, 
#MainContainer div:not(.onSite_input) input:not([type=checkbox]):not([type=radio]):focus+.picker+label, 
#MainContainer div:not(.onSite_input) textarea:focus+label, 
#MainContainer div:not(.onSite_input) textarea:focus+.tox-tinymce+label, 
#MainContainer div:not(.onSite_input) select:focus+label,
/* FANCYBOX */
.fancybox-container div:not(.onSite_input) input:not([type=checkbox]):not([type=radio]):focus+label, 
.fancybox-container div:not(.onSite_input) input:not([type=checkbox]):not([type=radio]):focus+.picker+label, 
.fancybox-container div:not(.onSite_input) textarea:focus+label, 
.fancybox-container div:not(.onSite_input) textarea:focus+.tox-tinymce+label, 
.fancybox-container div:not(.onSite_input) select:focus+label{
    color:#FFF;
    background:#333;
}

button.btn { 
    width:100%;
    padding:10px;
    box-sizing:border-box;
    background:#000;
    color:#FFF;
    /*border-radius:10px;*/
    font-size:18px;
    font-family: 'Comfortaa', sans-serif;
    cursor:pointer;
    transition:all 0.3s;
}
button.btn.btn-form{
    float:right;
    width:auto;
    margin:5px;
}
button.btn:hover { 
    background:#FBC600;
    color:#000;
    outline:none;
}

button.btn.btn-add, button.btn.btn-update {
    background:#04471C;
}

button.btn.btn-delete {
    background:#5A0002;
}

button.btn.btn-add:hover, button.btn.btn-update:hover {
    background:#0D2818;
    color:#FFF;
}

button.btn.btn-delete:hover {
    background:#440D0F;
    color:#FFF;
}

a.btn {
	padding:5px; 
	text-decoration:none;
}

.btn.colorSecond { 
    background:#FBC600;
    color:#000;
}
.btn.colorSecond:hover { 
    background:#000;
    color:#FBC600;
}

/* TOGGLE */ 
.tgl { display:none; }
.tgl + .tgl-btn {
    outline: 0;
    display: block;
    width: 4em;
    height: 2em;
    margin:1em 1em 1em 0;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* FLAT INPUT DESIGN */
.tgl-flat + .tgl-btn {
    padding: 2px;
    transition: all .2s ease;
    background: #fff;
    border: 4px solid #f2f2f2;
    border-radius: 2em;
}
.tgl-flat + .tgl-btn:after {
    transition: all .2s ease;
    background: #f2f2f2;
    content: "";
    border-radius: 1em;
} 
.tgl-flat:checked + .tgl-btn {
    border: 4px solid #FBC600;
}
.tgl-flat:checked + .tgl-btn:after {
    left: 50%;
    background: #FBC600;
}

.tgl-btn:after,
.tgl-btn::before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}
.tgl-btn::after {
    left: 0;
}
    
.tgl-btn:before {
    display: none;
}
.tgl + .tgl-btn + .label { line-height : 4em; }

/* SKEWED INPUT DESIGN */
.tgl-skewed + .tgl-btn{
    overflow: hidden;
    transform: skew(-10deg);
    backface-visibility: hidden;
    transition: all .2s ease;
    font-family: sans-serif;
    background: #888;
}
		
.tgl-skewed + .tgl-btn:after,
.tgl-skewed + .tgl-btn:before {
			transform: skew(10deg);
			display: inline-block;
			transition: all .2s ease;
			width: 100%;
			text-align: center;
			position: absolute;
			line-height: 2em;
			font-weight: bold;
			color: #fff;
			text-shadow: 0 1px 0 rgba(0,0,0,.4);
		}
    
.tgl-skewed + .tgl-btn:after {
    left: 100%;
    content: attr(data-tg-on);
}
    
.tgl-skewed + .tgl-btn:before {
    left: 0;
    content: attr(data-tg-off);
}
.tgl-skewed + .tgl-btn:active {
	background: #f2f2f2;
}
.tgl-skewed + .tgl-btn:active:before {
    left: -10%;
}
.tgl-skewed:checked + .tgl-btn {
    background: #FBC600;
}
.tgl-skewed:checked + .tgl-btn:before {
    left: -100%;
}
.tgl-skewed:checked + .tgl-btn:after {
    left: 0;
}
.tgl-skewed:checked + .tgl-btn:active:after {
    left: 10%;
}

.upload_zone {
	background:rgba(255,255,255,0.3)!important;
	border:3px dashed #FBC600!important;
}

@media screen and (max-width:700px){
    div:not(.onSite_input) .input_container25, div:not(.onSite_input) .input_container30, div:not(.onSite_input) .input_container33, div:not(.onSite_input) .input_container50,
    div:not(.onSite_input) .input_container66, div:not(.onSite_input) .input_container75,
    div:not(.onSite_input) .input_container100 { width:100%; }
}
@media screen and (min-width:701px) and (max-width:1200px){
    div:not(.onSite_input) .input_container66, div:not(.onSite_input) .input_container75,
    div:not(.onSite_input) .input_container100 { width:100%; }
    div:not(.onSite_input) .flexbox.flex-row { flex-direction:row; }
}