body { font-family: 'Open Sans', sans-serif; }
.main-box { width:100%; margin:0 auto; padding:50px; }
.box600 { width: 600px; margin: 0 auto; padding: 50px; border:1px solid #000; border-radius:5px; }
.center { text-align:center; }
.left { text-align:left; }
.button { margin: 20px; display: inline-block; padding: 0.5em 3em; text-align: center; text-decoration: none; font-size: 16px; font-family: Helvetica; cursor: pointer; border: 1px solid #000; color: #3498db; border-radius: 3px; margin-bottom:20px; }
.button-dark { background-color:#f1f1f1;}
.button-blue { background-color:#3498db; color:#fff; }
.button-red { background-color:#DA203D; color:#fff; font-weight: bold;}
.image-box:hover img { /*transform: scale(2); border:1px solid #000; transition: all 0.3s ease-in-out; */}
.exists { color:green; font-size:8px; }
.warning { color:red; font-size:8px; }
.form-box { border:1px solid #000; border-radius:5px; width:600px; margin:0 auto; padding:50px 0px; text-align: center !important;}
.image-box { max-width: 200px !important; }



  /* SGA Table */
  .sga-table {
    border-collapse: collapse;
    margin: 20px auto;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 300px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }
  .sga-table thead tr {
    background-color: #ae1930;
    color: #ffffff;
    text-align: left;
  }
  .sga-table th,
  .sga-table td {
    padding: 20px 25px;
  }
  .sga-table tbody tr {
    border-bottom: 1px solid #dddddd;
  }
  .sga-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
  }
  .sga-table tbody tr:last-of-type {
    border-bottom: 2px solid #ae1930;
  }
  .sga-table tbody tr:hover {
    background-color: #dadada; 
  }
  .sga-table td input {
    width: 100%;
    padding: 20px;
    font-size:12px;
  }
  .mobile-only { display: none; }

  @media screen and (max-width: 500px) { 
    .mobile-only { display:block; }
    .desktop-only { display:none; }
    .container { padding: 20px 10px; }
  }
  /* Search Div */
  .search-div { width:100%; margin:50px auto; text-align:center; } 
  .search-input { width:400px; }
  #select_columns { display: none; }

  /* Login Page */
  .login-box { max-width:500px; background-color:#fafafa; border:1px solid #999; border-radius:5px; margin:50px auto; text-align:center; padding:20px; }
  @media screen and (max-width: 500px) { 
    .login-container { width: 100%; padding:0 20px; } 
    .login-box { width: 100%;} 
  }
  
  /* Container */
  .container { width: 100%; }


  /* product page tabs */
  .product-content p { margin: 0 0 20px; line-height: 1.5; }
  .product { min-width: 320px; margin: 0 auto; background: #fff; }
  .product section { display: none; padding: 20px 0 0; border-top: 1px solid #ddd; }
  .product input { display: none; }
  .product label { display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; color: #bbb; border: 1px solid transparent; }
  .product label:before { font-family: fontawesome; font-weight: normal; margin-right: 10px; }
  .product label[for*='1']:before { content: '\f00b'; }
  .product label[for*='2']:before { content: '\f05a'; }
  .product label[for*='3']:before { content: '\f03e'; }
  .product label[for*='4']:before { content: '\f02d'; }
  .product label:hover { color: #888; cursor: pointer; }
  .product input:checked + label { color: #555; border: 1px solid #ddd; border-top: 2px solid #DA203D; border-bottom: 1px solid #fff; }
  #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; }

  /* product page table */
  .table-column { float:left; width:50%; padding: 5px; }
  .product-table { display: table; min-width:400px; margin:50px auto; width:80%; }
  .product-table tr:hover td{ cursor: pointer; }
  #myTable td, #myTable th { padding: 20px !important; }
  .media { width: 100% !important; border-spacing: 2em 0; border-collapse: separate; }
  .media td { text-align:center !important;}

  .producttable { width: 80%; margin: 50px auto !important;}
  .producttable thead tr { background-color: #303030 !important; font-weight:700; }
  .producttable .l { border-right: 1px solid #dddddd; font-weight:700; width:35%; }
  .producttable td { padding: 20px 25px;}
  .producttable .empty { display: none; }
  .producttable .table-subtitle { background-color:#f3f3f3; padding:10px 25px; border-bottom: 1px solid #dddddd;}

  @media screen and (max-width: 500px) { 
    .table-column { width:100%; display: block; }
    .producttable { width: 100%; }
    .product span { visibility:hidden; font-size:0px;}
  }

  /* repair form */
  .form-design { width: 80%; margin:0 auto; }
  .form-design input, select { padding: 10px; width: 100%; border: 2px solid #D0D0D0; outline: 0; background-color:#f5f5f5; }
  .form-design input:focus { background-color: #F0FFFF; border-color: #87CEEB}
  .form-design .j-tasks, .w-tasks { display: none; }
  .form-design .form-row { display: block; margin-bottom:20px;}
  .form-design .subheader { font-weight:700; font-size: 18px; border-bottom: 1px solid #333; padding-bottom:20px;}
  .form-design .header { background-color: #ae1930; color: #ffffff; text-align: left; padding: 20px 25px; font-weight:700; font-size:28px;}
  .form-design .cell-l { display: inline-block; width:30%; border-bottom:3px solid #fff; padding:10px 25px;  }
  .form-design .cell-full { padding:10px 25px;  }
  .form-design .cell-r { display: inline-block; width: 69%; }
  .task-header { padding: 10px 0px; border-bottom:1px solid #333; margin-bottom: 30px; font-size: 20px; font-weight:700;}
  .task button { background-color:#DA203D; padding: 5px; border-radius: 5px; color:#fff; border: 1px solid #ae1930; float:right;}
  .task_button { background-color:#DA203D; padding: 5px; border-radius: 5px; color:#fff; border: 1px solid #ae1930; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);}
  .form-design .l-div { width: 49%; float:left; }
  .form-design .r-div { width: 49%; float:right; }
  .form-design .wrapper-box { box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); padding:20px; }
  .select-design { padding: 10px; width: 90%; border: 0; border-bottom: 2px solid #333; outline: 0; background-color:#f5f5f5;}
  .items-j, .items-w { margin-bottom:20px; }
  .form-design .submit-btn { background-color: #ae1930; color: #ffffff; text-align: center; width:100%; font-weight:700; outline:0; border:0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); padding: 20px 0px; font-size:22px; }
  .submit-btn-sml { background-color: #333; color: #ffffff; text-align: center; width:100%; font-weight:700; outline:0; border:0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); padding: 10px 0px; font-size:16px; }
  .l-input { width: 70% !important; display:inline-block; border: 0 !important; border-bottom: 2px solid #333 !important; outline: 0 !important; background-color:#f5f5f5 !important; }
  .r-input { width: 20% !important; margin-left:10px; display:inline-block;}
  .remove_button { display:inline-block !important; float:none !important; margin-left:10px !important; }
  .cell-r img { width: 200px; }

  @media screen and (max-width: 767px) { 
    .form-design { width: 100%; }
    .form-design .l-div { display:block; float: none; width: 100%; }
    .form-design .r-div { display:block; float: none; width: 100%; margin-top: 20px; }
    .form-design .cell-l { display:block; width: 100%; padding: 0px; }
    .form-design .cell-r { display:block; width: 100%; }
    .cell-r img { width: 100%; }
    .l-input { width: 65% !important; font-size: 14px; }
    .r-input { font-size: 14px; }
  }

  @media screen and (max-width: 1440px) { 

    .pim-padding { padding: 10px 30px; }
    .form-design { width: 100%; }
    .form-design .form-row { font-size: 14px; }
    .form-design .cell-l { padding: 10px; }
  }