*
{
	margin: 0pt;
	padding: 0pt;
}

html
{
}

body
{
	background-color: #FFF;
	color: #333333;
	font-size: 62.5%;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size-adjust: none;
	text-align: center;
	
}

img.png
{
	_behavior: url(../webforms/iepngfix.htc);
}

table
{
	font-family: "Lucida Grande", "Segoe UI", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
}

img, input, table
{
	border: 0pt;
}

.png
{
	behavior: url(../webforms/iepngfix.htc);
}

br
{
	clear: both;
}

ul
{
	display: block;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
}

li
{

}

li a
{

}

li a:hover
{

}

.box, .button, .drop
{
	font-size: 1.0em;
	padding: 2px;
}

.box
{
	border: 1px solid #202528;
}

.button
{
	background-color: #202528;
	color: #FFF;
}

.button:hover
{
	background-color: #444;
}

.drop
{
	border: 1px solid #202528;
}

.wrapper
{
	font-family: "Lucida Grande", "Segoe UI", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	margin: 0px auto;
	text-align: left;
	padding: 20px;
}

.navigation
{
	text-align: center;
	padding: 10px;
}

.container
{
	padding: 0px;
}

.title-l
{
	background: transparent url(../images/menu/clo.gif) no-repeat scroll 0% 0%;
	padding: 0pt 0pt 0pt 5px;
}

.title-r
{
	background: transparent url(../images/menu/cro.gif) no-repeat scroll 100% 0%;
	padding: 0pt 5px 0pt 0pt;
}

.title
{
	color: #FFF;
	height: 28px;
	font-size: 1.4em;
	font-family: "Lucida Grande", "Segoe UI", Arial, Helvetica, sans-serif;
	font-weight:bold;
	line-height: 1.7em;
	padding: 2px 0pt;
	background: transparent url(../images/menu/cho.gif);
}

/* FOR WORKSHEET */
 /* Custom 3D button styles */
        .btn-3d {
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        
        .btn-3d:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }
        
        .btn-3d:hover:before {
            left: 100%;
        }
        
        .btn-3d:active {
            transform: translateY(1px) scale(0.98);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        }
        
        .btn-3d:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }
        
        .btn-3d:disabled:before {
            display: none;
        }
        
        /* Custom scrollbar for form panel */
        .custom-scrollbar::-webkit-scrollbar {
            width: 8px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #e2e8f0;
            border-radius: 4px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 4px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }
        
        /* Form overlay positioning - Fixed for new layout */
        #canvas-container {
            position: relative;
        }
        
        #form-overlay {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 10;
        }
        
        #form-overlay input, #form-overlay button {
            position: absolute;
            pointer-events: auto;
            border: 1px solid rgba(59, 130, 246, 0.5);
            background-color: rgba(255, 255, 255, 0.9);
        }
        
        #form-overlay input:focus, #form-overlay button:focus {
            outline: 2px solid #3b82f6;
            outline-offset: 1px;
        }
        
        #pdf-canvas {
            display: block;
        }
        
        /* Loading spinner */
        .loading-spinner {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            border: 5px solid #e2e8f0;
            border-top: 5px solid #3b82f6;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            z-index: 1000;
            display: none;
        }
        
        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }