html, body, div, span, applet, object, iframe, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	/*vertical-align: baseline;
	background: transparent;*/
}
body, html {
	line-height: 1;
	  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

    body {
      margin: 0;
      #font-family: 'Inter', sans-serif;
      #background: #f0f4f8;
      #color: #1f2937;
    }
    header {
      background: linear-gradient(135deg, #6366f1, #3b82f6);
      color: white;
      padding: 2rem 1rem 3rem;
      text-align: center;
    }
    header h1 {
      font-size: 2.5rem;
      margin-bottom: 0.8rem;
    }
    header p {
      font-size: 1.125rem;
      margin-bottom: 1.9rem;
    }
    .cta {
      background: white;
      color: #3b82f6;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 9999px;
      text-decoration: none;
      font-weight: 600;
      transition: background 0.3s ease;
    }
    .cta:hover {
      background: #e0e7ff;
    }
    .section {
      padding: 3rem 1.5rem;
	  padding-top:0rem;
	  height:auto;
	  margin-bottom:8rem;
    }
    .section-header {
      background: #dbeafe;
	  #color: #9a3412;
      padding: 1rem 2rem;
      border-radius: 0.4rem;
      margin-bottom: 2rem;
	  margin-top:50px;
      max-width: 1400px;
      margin-left: auto;
      margin-right: auto;
	  #background-image: linear-gradient(to top left, rgba(240, 248, 255, 1), rgba(255, 255, 255, 1));
border-top:3px groove #00008b;
border-bottom:3px groove #00008b;
    }
	
	#section-header2 {
		border-top:3px groove #fdba74;
border-bottom:3px groove #fdba74;
color: #9a3412;
background: #ffedd5;
	}


    .section h2 {
      margin: 0;
      font-size: 1.875rem;
      text-align: center;
      color: #1e3a8a;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3rem 2rem;
      max-width: 1400px;
      margin: 0 auto;
    }
    .card:nth-child(5) {
      margin-top: 50px;
    }
	.card:nth-child(6) {
      margin-top: 50px;
    }
	.card:nth-child(7) {
      margin-top: 50px;
    }
	.card:nth-child(8) {
      margin-top: 50px;
    }
    .card {
      background: white;
      border-radius: 1rem;
      padding: 1.5rem;
      box-shadow: 0 10px 25px rgba(59, 130, 246, 0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      border: 1px solid #bfdbfe;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(59, 130, 246, 0.2);
    }
    .card .title-box {
      background-color: #dbeafe;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      margin-bottom: 0.75rem;
      font-weight: 600;
      color: #1e3a8a;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .catalogs-container {
      max-width: 1400px;
      margin: 0 auto;
    }
    .catalogs {
      display: flex;
      flex-wrap: nowrap;
      gap: 2rem;
      justify-content: center;
    }
    .catalog-card {
      width: 300px;
      background: white;
      border-radius: 1rem;
      padding: 1.25rem;
      box-shadow: 0 10px 25px rgba(251, 146, 60, 0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      border: 1px solid #fdba74;
    }
    .catalog-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(251, 146, 60, 0.2);
    }
    .catalog-card .title-box {
      background-color: #ffedd5;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      margin-bottom: 0.75rem;
      font-weight: 600;
      color: #9a3412;
      display: flex;
      align-items: center;
      gap: 0.5rem;

    }
    .title-box svg {
      width: 26px;
      height: 26px;
      stroke-width: 2;
    }
	.title_box_description {
			  #text-align:justify;
		line-height:130%;
	}
	

.lucid-svg {
      width: 22px;
      height: 24px;
      stroke-width: 2;
	  #fill: #003366;
	  color: #003366;
	  margin-right:4px;
	  vertical-align:middle;
}


a {
color:#00BFFF;
text-decoration:none;
}

a:hover {
color:#00BFFF;
text-decoration:underline;
}

a:visited {
color:#1e3a8a;
}

.tab {
    display: inline-block;
    margin-left: 4em;
}

        table {
            #width: 100%;
            margin: 2rem auto;
            border-collapse: collapse;
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
			text-align:center;
			
        }

        table th, td {
            padding: 1rem;
            text-align: center;
            border-bottom: 1px solid #eee;
        }

        table th {
            background: #dbeafe;
            font-size: 1.1rem;
        }

        table tr:last-child td {
            border-bottom: none;
        }

        table.table_more {
            width: 100%;
            margin: 2rem auto;
            border-collapse: collapse;
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
			text-align:center;
			
        }

        table.table_more th, td {
            padding: 1rem;
            text-align: center;
            border-bottom: 1px solid #eee;
        }

        table.table_more th {
            background: #f5f8fa;
            font-size: 1.05rem;
        }

        table.table_more tr:last-child td {
            border-bottom: none;
        }


table.table_sp {
border:0px solid #616161;
line-height: 350%;
	border-collapse: collapse;
text-align:center;
table-layout: fixed;
}
table.table_sp td{
border-bottom:1px solid #616161;
height:35px;
}

table.table_sp th{
border-bottom:3px groove #616161;
border-top:0px solid #616161;
line-height:250%;
color:#000000;
}

.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth scrolling on mobile */
  margin-bottom: 2rem;
}

.table_sp {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: center;
  border: 0px solid #616161;
  line-height: 150%;
  min-width: 600px; /* ensures proper structure when table overflows */
}

.table_sp th,
.table_sp td {
  padding: 0.75rem;
 #overflow: hidden;
 #text-overflow: ellipsis;
 #white-space: nowrap;
 
  white-space: normal;      /* Allow text to wrap */
  word-wrap: break-word;    /* Break long words if needed */
  overflow: visible;        /* No clipping */
  text-overflow: unset;     /* Disable ellipsis */
  vertical-align: top;      /* Optional: align content to the top */
  }

.table_sp th {
  border-bottom: 3px groove #616161;
  border-top: 1px solid #616161;
  line-height: 250%;
  color: #000;
}

.table_sp td {
  border-bottom: 1px solid #616161;
  height: 35px;
}

table.table_sp tbody tr:nth-of-type(even) {
  background-color: #f7f9fb;
}

table.table_sp tbody tr:nth-of-type(odd) {
  background-color: #ffffff;
}

table.table_dsd_conf {
border:0px solid #616161;
line-height: 150%;
	border-collapse: collapse;
text-align:left;
}
table.table_dsd_conf td{
border:0px solid #616161;
height:35px;
font-size:17px;
padding:10px;
}

table.table_dsd_conf th{
border-bottom:3px groove #616161;
#border-top:1px solid #616161;
line-height:250%;
color:#000000;
}

table.table_dsd_map {
border:0px solid #616161;
font-size:16px;
line-height: 200%;
	border-collapse: collapse;
text-align:left;
}
table.table_dsd_map td{
border:0px solid #616161;
border-bottom:1px solid #616161;
height:30px;
padding:0px;
}

table.table_dsd_map th{
border-bottom:3px solid #d0d0d0;
border-top:0px solid #616161;
line-height:250%;
color:#000000;
}


table.table_csv {
border:1px solid #616161;
line-height: 150%;
	border-collapse: separate;
text-align:center;
border-radius: 10px;
background-color:#009ACD;
box-shadow:10px 10px 20px #121212;
}
table.table_csv td{
border:1px solid #616161;
height:35px;
padding:2px;
padding-left:4px;
padding-right:4px;
}

table.table_csv th{
border:1px solid #616161;
border-bottom:3px groove #616161;
line-height:250%;
color:#000000;
}

td.overflow-cell {
    width: 150px;           /* or any fixed width */
    white-space: normal;    /* allow line breaks */
    word-wrap: break-word;  /* break long words if needed */
    word-break: break-word; /* extra support for long words */
    height: auto;           /* allow height to expand */ */
}

table.integratable {
border:0px solid #616161;
line-height: 100%;
	border-collapse: collapse;
text-align:center;
background: linear-gradient(to top, #e0f2ff, #ffffff);
border-radius:0px;
margin:0 auto;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
table.integratable td{
border:0px solid #616161;
padding:2px;
}

table.integratable th{
border:0px solid #616161;
}

table.rdf_basic {
border:0px solid #616161;
line-height: 300%;
	border-collapse: collapse;
text-align:left;
font-size:18px;
  

}
table.rdf_basic td{
border:0px solid #616161;
border-bottom:1px dotted #616161;

padding:5px;
text-align:left;

}

table.rdf_basic th{
border:1px solid #616161;

}

.container {
#	float:left;
#width:100%;
#height:auto;
#border:0px solid black;
  min-height: 100vh;           /* Full height of viewport */
  display: flex;
  flex-direction: column;
  
}

.page_banner {
#width:inherit;
#height:50px;
#background-color:#f5f5f5;
      background: linear-gradient(135deg, #6366f1, #3b82f6);
      color: white;
      padding: 2rem 1rem 3rem;
      text-align: center;
}

.page_banner_title {
font-size:28px;
text-align:center;
width:inherit;
height:inherit;
padding-top:10px;
}

.main {
#clear:both;
#float:left;
#width:inherit;
#height:90%;
#margin-top:10px;
#border:0px solid red;
  flex: 1;

}

.main_intro {
margin:10px;
margin-left:20px;
margin-right:20px;
background: linear-gradient(to right, #C5DCF3, #ffffff);
      border-radius: 0.5rem;
      border-bottom: 1px solid #bfdbfe;
	  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.1);
text-shadow:1px 1px 1px white;
    font-size: 1.1rem;
    padding: 0.5rem;
    line-height: 1.15;

}

.main_intro2 {
#width:95%;
#height:70px;
#margin:10px;
#margin-left:20px;
      border-radius: 0.5rem;
    max-width: 1000px;
    margin: 2.5rem auto 1rem;
    padding: 2rem 2.5rem;
    font-size: 1.125rem;
    line-height: 1.5;
    color: #374151;
    text-align: center;
#	background-color:#ffffff;
	      box-shadow: 0 10px 25px rgba(59, 130, 246, 0.1);
      border: 0px solid #bfdbfe;
text-shadow:1px 1px white;
}

.maker_menu {
#width:95%;
height:40px;
#float:left;
margin:20px;
margin-left:20px;
margin-right:20px;
border-bottom:3px groove #3b82f6;
font-size:18px;
}

.box_area {
clear:both;
float:left;
width:95%;
height:auto;
margin-left:0px;
margin-bottom:40px;
border:0px solid green;
}

.basic_box {
margin:20px;
width:350px;
height:350px;
border:3px groove blue;
float:left;
font-family:verdana;

}

.basic_box2 {
margin:20px;
width:350px;
height:350px;
border:3px groove #ffa500;
float:left;
font-family:verdana;
}

.basic_box_banner {
width:330px;
height:50px;
margin:10px;
background-image: linear-gradient(to top left, rgba(0, 0, 255, 1), rgba(0, 0, 0, 1));
text-align:center;
font-size:18px;
line-height:130%;
}

.basic_box_banner2 {
width:330px;
height:50px;
margin:10px;
background-image: linear-gradient(to top left, rgba(255, 165, 0, 1), rgba(0, 0, 0, 1));

text-align:center;
font-size:18px;
line-height:130%;
}

.basic_box_banner_link {
width:inherit;
height:30px;
padding-top:12px;
}

.basic_box_banner_link2 {
width:inherit;
height:30px;
padding-top:12px;
}

.basic_box_description {
width:320px;
height:250px;
margin:13px;
background-color:#F0F8FF;
text-align:center;
padding:2px;
line-height:130%;
font-family:verdana;
font-size:15px;
padding-top:10px;
}

.basic_box_description2 {
width:320px;
height:250px;
margin:13px;
background-color:#FEF0C9;
text-align:center;
padding:2px;
line-height:130%;
font-family:verdana;
font-size:15px;
padding-top:10px;
}

.sub-inp1 {
	
	color:#FFFFFF;
	box-shadow: 1px 1px 40px #0000ff inset;
	font-weight:bold;
	border:1px solid #0000FF;
	background-color:#000000;
	padding:5px;
	height:30px;
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
border-radius: 8px;
width:80px;
margin:10px;
font-size:14px;		
cursor:pointer;


  background: linear-gradient(to right, #000000, #1a1a1a);
  border: 1px solid #1e40af;
	box-shadow: inset 10px 10px 40px #0000ff;
  transition: all 0.25s ease;
}

.sub-inp1:hover {
	box-shadow: inset 10px 10px 40px #0000ff,  0 6px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.sub-inp1:active {
  transform: translateY(1px);
	box-shadow: inset 10px 10px 40px #0000ff,  0 6px 12px rgba(0, 0, 0, 0.4);
}

.sub-inp2:hover {
	box-shadow: inset 10px 10px 40px #2e8b57,  0 6px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.sub-inp2:active {
  transform: translateY(1px);
	box-shadow: inset 10px 10px 40px #2e8b57,  0 6px 12px rgba(0, 0, 0, 0.4);
}

.sub-inp2 {
	color:#FFFFFF;
	#box-shadow: 1px 1px 40px #2e8b57 inset;
	box-shadow: inset 10px 10px 40px #2e8b57;
	font-weight:bold;
	border:1px solid #000000;
	background-color:#000000;
	padding:5px;
	height:30px;
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
border-radius: 8px;
width:80px;
margin:10px;
font-size:14px;		
cursor:pointer;
}

.sub-inp3 {
	color:#FFFFFF;
	box-shadow: 10px 10px 40px #ff0000 inset;
	#box-shadow: inset 10px 10px 12px #ff0000;
	font-weight:bold;
	border:1px solid #000000;
	background-color:#000000;
	padding:5px;
	height:30px;
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
border-radius: 8px;
width:80px;
margin:10px;
font-size:14px;		
cursor:pointer;
}

.sub-inp3:hover {
	box-shadow: inset 10px 10px 40px #ff0000,  0 6px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.sub-inp3:active {
  transform: translateY(1px);
	box-shadow: inset 10px 10px 40px #ff0000,  0 6px 12px rgba(0, 0, 0, 0.4);
}

.sub-inp4 {
	color:#FFFFFF;
	box-shadow: 10px 10px 40px #ffa500 inset;
	font-weight:bold;
	border:1px solid #000000;
	background-color:#000000;
	padding:5px;
	height:30px;
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
border-radius: 8px;
width:80px;
margin:10px;
font-size:14px;		
cursor:pointer;
}

.sub-inp4:hover {
	box-shadow: inset 10px 10px 40px #ffa500,  0 6px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.sub-inp4:active {
  transform: translateY(1px);
	box-shadow: inset 10px 10px 40px #ffa500,  0 6px 12px rgba(0, 0, 0, 0.4);
}

.sub-inp1b {
	color:#FFFFFF;
	box-shadow: 10px 10px 40px #00008b inset;
	font-weight:bold;
	border:1px solid #000000;
	background-color:#000000;
	padding:5px;
	height:auto;
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
border-radius: 8px;
width:auto;
margin:10px;
font-size:14px;		
}

.sub-inp1b:hover {
	box-shadow: inset 10px 10px 40px #00008b,  0 6px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.sub-inp1b:active {
  transform: translateY(1px);
	box-shadow: inset 10px 10px 40px #00008b,  0 6px 12px rgba(0, 0, 0, 0.4);
}

.sub-inp2b:hover {
	box-shadow: inset 10px 10px 40px #1E90FF,  0 6px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.sub-inp2b:active {
  transform: translateY(1px);
	box-shadow: inset 10px 10px 40px #1E90FF,  0 6px 12px rgba(0, 0, 0, 0.4);
}

.sub-inp2b {
	color:#FFFFFF;
	font-weight:bold;
	box-shadow: 10px 10px 40px #1E90FF inset;
	border:1px solid #000000;
	background-color:#000000;
	padding:3px;
	height:auto;
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
border-radius: 8px;
width:auto;
margin:10px;
font-size:14px;		
}

.radiob {
	background-color: #2E8B57;
}

#model_components_table {
margin-left:2px;
font-size:15px;
margin-bottom:30px;
}

#dsd_catalog_table {
margin-left:2px;
font-size:14px;
margin-bottom:30px;
}

.footer {
      background: linear-gradient(135deg, #6366f1, #3b82f6);
      color: white;
      padding: 2rem 2rem 2rem;
      text-align: right;
	  font-size:15px;
	  clear:both;
	  			margin-top: auto;
				
            font-size: 0.9rem;

    }
	
.maker_main {
height:auto;
margin:20px;
margin-top:10px;
#border-right:3px groove black;
border-right:1px dotted #bfdbfe;
}

#dsd_catalog_main {
height:auto;
margin:0px;
margin-top:10px;
margin-left:20px;
margin-right:20px;
border-right:0px;
}

#main_first_page{
width:100%;
height:auto;
float:left;
}

#main_second_page{
width:100%;
height:auto;
float:left;
clear:both;
}

.main_page_title{
	
padding: 0.5rem;	
font-size:26px;
line-height:160%;
height:40px;
margin:10px;
margin-left:20px;
margin-right:20px;
text-align:center;
font-weight:bold;
color:#ffffff;
#background-image: linear-gradient(to top left, rgba(240, 248, 255, 1), rgba(255, 255, 255, 1));
#->background-image: linear-gradient(#F0F8FF, white,#F0F8FF);
#border-top:3px groove #00008b;
#border-bottom:3px groove #00008b;
      border-radius: 0.5rem;
	  border-top: 1px solid #bfdbfe;
	  border: 3px solid #bfdbfe;
	  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.1);
    #background: linear-gradient(to right, #eff6ff, #dbeafe);
	background: linear-gradient(to left,#1e3a8a, #00008b, #1e3a8a);
	text-shadow:2px 2px 2px black;
    #border-left: 6px solid #ffffff;
	#border-right: 6px solid #ffffff;

}

.main_page_title2{
font-size:24px;
line-height:160%;
width:95%;
height:40px;
margin:10px;
margin-left:20px;
text-align:center;
font-weight:bold;
color:#00008b;
background-image: linear-gradient(to top left, rgba(255, 165, 0, 1), rgba(255, 255, 255, 1));
#background-image: linear-gradient(#F0F8FF, white,#F0F8FF);
border-top:3px groove #ffa500;
border-bottom:3px groove #ffa500;

}

#maker_sidebar {
/*
float:left;
width:560px;
height:inherit;
background-color:#f5f5f5;
margin:20px;
margin-top:10px;
*/
}

#dsd_maker_sidebar {

float:left;
width:560px;
height:inherit;
margin-top:10px;

}

#dsd_configurator_sidebar {
float:left;
width:560px;
height:inherit;
#background-color:#f5f5f5;
margin:20px;
margin-top:10px;
}

.dsd_help_box {
font-size:17px;
line-height:150%;
width:521px;
padding:20px;
#background-image: linear-gradient(to top left, rgba(240, 248, 255, 1), rgba(255, 255, 255, 0.5));
    #box-shadow: 4px 0 10px rgba(0, 0, 0, 0.05);
	#border-radius: 1rem;
    #border-right: 1px solid #cbd5e1;

top: 0;
    #background: linear-gradient(to bottom, #e0f2ff, #ffffff);
#!position: sticky;
}

.dsd_help_box2 {
font-size:17px;
line-height:150%;
width:521px;
padding:20px;
#background-image: linear-gradient(to top right rgba(240, 248, 255, 1), rgba(255, 255, 255, 0.5));
#box-shadow: 4px 0 10px rgba(0, 0, 0, 0.15);
#border-right: 1px solid rgba(255, 255, 255, 0.1);
#border-radius: 1rem;
top: 0;
#background-image: linear-gradient(to top,#ffffff, #f0f4ff);
#!position: sticky;
}

#dsd_warning {
width:90%;
margin-left:2%;
height:auto;
float:left;
padding:10px;
color:red;
}

#dsd_warning2 {
width:90%;
margin-left:2%;
height:auto;
float:left;
padding:10px;
color:blue;
font-size:18px;
text-align:right;
}

.sidebar_title {
text-align:center;
color:#ffffff;
padding-top:3px;
padding-bottom:3px;
width:inherit;
font-size:18px;
border:1px solid black;
background-image: linear-gradient(to bottom right, rgba(0, 0, 255, 0.6), rgba(0, 0, 139, 1));
border-radius: 0.8rem;
}

.sidebar_box {
float:left;
width:inherit;
    background: linear-gradient(to top, #e0f2ff, #ffffff);
    color: #1e3a8a;
    padding: 2rem 1rem;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.05);
    border-right: 0px solid #cbd5e1;
    position: sticky;
border-radius: 1rem;
    top: 20px;
	margin-left:20px;
}

#component_info {
height:auto;
#background-image: linear-gradient(to top left, rgba(240, 248, 255, 1), rgba(255, 255, 255, 0.5));
}

#dsd_component_info {
height:inherit; 
border-right:0px dotted black;
border-bottom:0px dotted black;
#background-image: linear-gradient(to top left, rgba(240, 248, 255, 1), rgba(255, 255, 255, 0.5));
}

#my_dsd {
#height:500px;
#background-image: linear-gradient(to top left, rgba(238, 243, 226, 1), rgba(255, 255, 255, 0.5));
}

.sidebar_box_data {
width:540px;
line-height:130%;
margin:10px;	
}

#component_data {
height:280px;
#font-weight:bold;
text-shadow:0.2px 0.2px #0000FF;
}

#my_dsd_data {
height:415px;
font-weight:bold;
text-shadow:0.2px 0.2px #00FF00;
}

.dsd_configurator_div{
width:95%;
height:auto;
float:left;
margin:10px;
margin-left:0px;
border-bottom:0px dotted #616161;
font-size:16px;
padding-bottom:20px;
margin-top:0px;

}

.dsd_configurator_title {
font-weight:bold;
font-size:20px;
margin-bottom:20px;
background-color:#00008B;
color:white;
height:50px;
width:100%;
line-height:240%;
padding-right:20px;
text-align:right;
font-style:italic;
#background-image: linear-gradient(to left, rgba(0, 0, 139, 1), rgba(255, 255, 255, 0.5));
    border-radius: 2.1rem;
	box-shadow: 0 10px 25px rgba(59, 130, 246, 0.1);
background: linear-gradient(to left, #00008b, #1e3a8a);
	text-shadow:1px 1px black;
}

.dsd_input {
font-size:15px;
}

.dsd_conf_selector{
	color:#FFFFFF;
	box-shadow: 1px 1px 50px #2E8B57 inset;
	font-weight:bold;
	border:1px solid #ffffff;
	background-color:#000000;
	padding:5px;
	height:35px;
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
border-radius: 8px;
width:160px;
margin:10px;
margin-left:20px;
font-size:15px;		
cursor:pointer;
margin-bottom:0px;
}

.dsd_conf_selector2 {
	color:#FFFFFF;
	box-shadow: 1px 1px 50px #cd0000 inset;
	font-weight:bold;
	border:1px solid #ffffff;
	background-color:#000000;
	padding:5px;
	height:35px;
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
border-radius: 8px;
width:130px;
margin:10px;
margin-left:20px;
font-size:15px;		
cursor:pointer;
margin-bottom:0px;
}

#dsd_preview{
font-family:courier;
padding:20px;
width:1100px;
height:inherit;
margin:20px;
margin-top:30px;
float:left;
background-color:#f5f5f5;
border:1px solid black;
font-size:15px;
}

#dsd_preview_area {
width:1200px;
height:inherit;
margin:20px;
margin-top:10px;
float:left;
border-top:0px dotted #616161;
}

#dsd_preview_sidebar {
float:left;
width:560px;
height:inherit;
background-color:#f5f5f5;
margin:20px;
margin-top:10px;
}

.my_dsd_button{
float:right;
margin:20px;	
box-shadow:3px 3px 3px 3px #000000;
}

#button_area {
	width:100%;
	height:60px;
	float:left;
margin:0 auto;
	border-top:1px dotted #616161;
	border-bottom:1px dotted #616161;
	background-color:#a5a5a5;
}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  margin-top:60px;
  width: 100%; /* Full width */
  height: 90%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}



/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Modal Header */
.modal-header {
  padding: 2px 32px;
  background-color: #00008b;
  color: white;
}

/* Modal Body */
.modal-body {
	padding: 20px 30px;
	 background-color:rgba(26,15,11,0.99);
	 color:#C3BE98;
text-shadow:1px 1px black;
	}

/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
  background-color: #00008b;
  color: white;
  height:20px;

}

#close_modal_footer{
font-size:16px;
color:blue;
border:1px solid #ffffff;
padding:2px;
background-color:white;
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s;
   font-family:courier;
  overflow-wrap: break-word;
  font-size:16px;
}

/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

.rdfiser_basic_titles{
#width:inherit;
text-align:center;
font-size:24px;
height:32px;
border:0px solid blue;
margin-top:5px;
margin-bottom:20px;
line-height:130%;
}


.plus_circle {
background-color:#fff;
border:1px solid black;    
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
padding:5px;
cursor:pointer;
}

.plus_circle:hover {
	border:1px solid green;    
}

.plus_circle:visited {
	background-color:green;    
}

.long_box_area{
width:1200px;
height:180px;
border-bottom:3px groove black;
margin:20px;	
float:left;
clear:left;
}

.long_box_area_title{
font-size:24px;
font-weight:bold;
float:left;
height:70px;
margin:5px;
margin-top:15px;
}

.long_box_area_text{
clear:left;
float:left;
font-size:17px;
width:90%;
height:40px;
padding-top:30px;
margin-left:20px;
line-height:130%;
}

.checkbox_class{
	margin:5px;
	width:20px;
	height:20px;
	vertical-align: middle;
	margin-bottom:10px;
	margin-right:10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  top:10px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 30px;
}

.slider.round:before {
  border-radius: 50%;
}

.back-link {
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
	text-align:right;
}

.back-link a {
    text-decoration: none;
    color: #4b6cb7;
    font-weight: bold;
    transition: color 0.2s ease;
}

.back-link a:hover {
    color: #2d3e50;
}