html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0;padding: 0;border: 0;font-family: var(--Roboto-font-family);font-size: 100%;vertical-align: baseline;background: transparent;}
article, aside, figure, footer, header, nav, section, details, summary {display: block;}

html {-webkit-box-sizing: border-box;box-sizing: border-box;scroll-behavior: smooth;}
*::-webkit-scrollbar {width: 7px;}
*::-webkit-scrollbar-track {background-color: #999999;}
*::-webkit-scrollbar-thumb {background: #000000;}
* {scrollbar-color: #000000 #999999;scrollbar-width: thin;}
*,*:before,*:after {-webkit-box-sizing: inherit;box-sizing: inherit;}

:root {
  --white: #FFFFFF;
  --gray: #999999;
  --dark: #000000;

  --Roboto-font-family: 'Roboto', sans-serif;
}
:focus{outline: none !important;box-shadow: 0 0 0 1px rgba(0,0,0, 0.4) !important;border-color: #000000 !important;}

body{background-color: #BCBCBC;}

img {max-width: 100%;height: auto;}
/* ul {display: flex;flex-direction: column;list-style: none;gap: 10px;} */
a {margin: 0;padding: 0;text-decoration: none;vertical-align: baseline;background: transparent;}
a:focus, a:hover {text-decoration: none;vertical-align: baseline;background: transparent;}
p{margin-bottom: 10px;}
hr {display: block;height: 1px;border: 0;border-top: 1px solid #999999;margin: 0;padding: 0;}
strong{font-weight: bold;}
small{font-size: 80%;}
.nowrap{white-space: nowrap;}
label{font-size: 14px;font-weight: 600;}
label span{color: #dc3545;}
input, select {vertical-align: middle;}
input, label, textarea, select, input, option, button {outline: none;}
.form-check-input:checked{background-color: #000;border-color: #000;}

table {width: 100%;background-color: #FFFFFF;border-collapse: collapse;border: 1px solid #000000;color: #000000;}
table td {border: 1px solid #000000;padding: 5px;}
table th {border: 1px solid #000000;padding: 5px;white-space: nowrap;font-weight: 400;}
table td p, table th p{margin-bottom: 0;}
table th a.hasfilter{font-weight: 400;color: #FFF;}
table th a.hasfilter:hover{opacity: 0.8;color: #FFF;}
table thead {background-color: #204260;color: #FFFFFF;}
.ht{display: none;font-size: 12px;line-height: 1;white-space: nowrap;}

.modal .modal-content .modal-header{background-color: #204260;align-items: center;}
.modal .modal-content .modal-header .modal-title{color: #FFFFFF;}
.modal .modal-content .modal-header .close{text-shadow: none;opacity: 1;color: #FFFFFF;}


.mt-n{margin-top: -10px;}
.img-thumbnail{height: 100px;width: 100%;object-fit: contain;object-position: center;margin-bottom: 20px;}

.images_show{display: flex;align-items: center;justify-content: flex-start;gap: 10px;}
.images_show .img-thumbnail{height: 100px;width: 100px;object-fit: contain;object-position: center;margin-bottom: 20px;}

.button, .button:focus, .button:active {display: inline-block;font-size: 14px;font-weight: 600;background: #204260;color: #FFFFFF;line-height: 1;border: 1px solid transparent;border-radius: 5px;letter-spacing: .5;text-transform: uppercase;cursor: pointer;outline: none;padding: 10px 20px;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

.button:hover, .button:focus {background: #000000;color: #FFFFFF;outline: none;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

.button_sm, .button_sm:focus, .button_sm:active {display: inline-block;font-size: 14px;font-weight: 600;background: #204260;color: #FFFFFF;line-height: 1;border: 1px solid transparent;border-radius: 5px;letter-spacing: .5;text-transform: uppercase;cursor: pointer;outline: none;padding: 7px 8px;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

.button_sm:hover, .button_sm:focus {background: #000000;color: #FFFFFF;outline: none;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

h1 {display: block;font-size: 48px;font-weight: 900;line-height: 1;margin-bottom: 20px;}
h2 {display: block;font-size: 40px;font-weight: 900;line-height: 1;margin-bottom: 20px;}
h3 {display: block;font-size: 32px;font-weight: 700;line-height: 1;margin-bottom: 15px;}
h4 {display: block;font-size: 26px;font-weight: 700;line-height: 1;margin-bottom: 15px;}
h5 {display: block;font-size: 22px;font-weight: 500;line-height: 1;margin-bottom: 10px;}
h6 {display: block;font-size: 18px;font-weight: 500;line-height: 1;margin-bottom: 10px;}

section{display: block;width: 100%;padding: 20px 0;}
.head_title{display: block;width: 100%;text-align: center;}
.head_title h2{display: block;font-size: 40px;font-weight: 600;line-height: 1;margin-bottom: 20px;color: #FFF;}


.input_flex{display: flex;align-items: center;justify-content: flex-start;gap: 10px;margin-bottom: 10px;}
.input_flex label{font-size: 16px;white-space: nowrap;}
.input_flex_card{display: flex;align-items: center;justify-content: flex-start;gap: 10px;margin-bottom: 10px;}
.icon_list{display: flex;align-items: center;justify-content: center;gap: 10px;}

/* header */
.controlboard {display: block;width: 100%;background-color: #DDD;}
.controlboard .user{display: flex;align-items: center;justify-content: flex-end;gap:4px;}
.controlboard .user span{display:inline;font-size:18px;font-weight:600;color:#204260;line-height:1.5;padding: 0;margin: 0;}
.controlboard .user i{font-size: 22px;color: #204260;}
.controlboard .user strong{display: block;font-size: 20px;font-weight: 600;line-height: 1;color: #000;padding-left: 10px;}
.controlboard .user strong span{font-size: 12px;font-weight: 400;line-height: 1;color: #000;padding-left: 10px;}


.mian nav[role="navigation"]{display: flex;align-items: center;justify-content: space-between;flex-direction: row-reverse;gap: 10px; width: 100%;  margin: 10px 0;}
.mian nav[role="navigation"] div:first-child{display: flex;justify-content: flex-end;}
.mian nav[role="navigation"] div:nth-child(2){display: flex;justify-content: flex-start;}
.mian nav[role="navigation"] div:nth-child(2) div:nth-child(2){display: none;}


.modal .textfield input, 
.modal .textfield select{height: 44px !important;margin-bottom: 10px;}
.commentsmodal .modal-header {background-color: #204260;color: #FFF;}
.commentsmodal .close {color: #FFF;text-shadow: none;opacity: 1;}
.commentsmodal .modal-content {border: 0;}
.commentsmodal .modal-body .commentbox {height: 260px;overflow-y: scroll;}
.commentsmodal .commentbox {display: block;width: 100%;}
.commentsmodal .commentbox .comments {display: block;width: 100%;border-bottom: 1px solid #dbdbdb;padding: 4px 0;text-align: center;}
.commentsmodal .textfield {display: block;width: 100%;}

.commentsmodal .modal-footer .btn_box {width: auto;}      
.switch_btn {display: flex;justify-content: flex-end;width: 100%;padding: 3px;}
.datepicker {z-index: 9999 !important;top: 170px !important;}       
.comentTable table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;}
.comentTable td,.comentTable th {border: 1px solid #dddddd;text-align: left;padding: 8px;}


.ui-widget-content{width: 100% !important;max-width: 418px !important;}
.ui-widget-content.related_yarn_submit_autocomplete_design{width: 100% !important;max-width: 244px !important;}
.ui-widget-content .ui-menu-item{  font-size: 14px;}


@media only screen and (max-width: 991px)  {
  .ht{display: inline-flex;} 
}

@media only screen and (max-width: 767px)  {
  table{border: 0;}
  .tr {display: block; border: 2px solid #000;margin-bottom: 10px;}
  .tr td{display: flex;align-items: center;justify-content: space-between;width: 100%;margin-bottom: 0px;border: 0;}
  .tr td:not(:last-child){border-bottom: 1px solid #000;} 
  .modal-backdrop {z-index: 10 !important;position: static;}
  .modal {z-index: 1055 !important;position: fixed !important;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}

@media only screen and (max-width: 479px)  {
  .controlboard .user i,
  .controlboard .user span{font-size:16px;}
  .userlogout .button{padding:10px 10px;}
  .form-control{width: 100% !important;}
  .mian nav[role="navigation"]{flex-direction: column-reverse;}
  .mian nav[role="navigation"] div:first-child,
  .mian nav[role="navigation"] div:nth-child(2){width: 100%;}
}