.start {padding: 0 0 40px 0px; width: 98%; margin: auto;}
    .start h1 { color: #fff; font-size: 11px; font-family: 'Montserrat',sans-serif; font-weight: 400; text-transform:uppercase; }
#product-list-controls {display:flex; justify-content: space-between; gap: 10px; margin: 20px 0;}
    #product-list-controls .searchField { width: 100%; min-width: 290px; margin: 0px; border-radius: 10px; border: 0.5px solid #ffffff10; display: flex; justify-content: flex-start; align-items: center; background: #ffffff10; padding: 0 15px; height: 45px; box-sizing: border-box; }
        #product-list-controls .searchField input { width: 100%; font-size: 12px; color: #e1e1e1; background: none; border: none; margin: 0 0 0 15px; outline: none; font-weight: 100; }
    #product-list-controls .searchField input::placeholder {font-size: 12px; font-weight: 400;}
        #product-list-controls .searchField input::placeholder { color: #e1e1e1; }
        #product-list-controls .product-list-control { padding: 12px 15px; background: #ffffff10; border-radius: 10px; border: 0.5px solid #ffffff10; color: #fff; font-family: 'Mona-Sans Regular', sans-serif; font-size: 12px; display: flex; justify-content: space-between; align-items: center; gap: 33px; }

    #product-list-controls .product-list-control .label { display: flex; justify-content: center; align-items: center; gap: 8px; color: #fff; font-weight: 400; }
    #product-list-controls .product-list-control .label img:last-child { }
    #product-list-controls .product-list-control .dropdown-control { border: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("/gfx/caret-down-white.svg"); background-color:#ffffff00; background-repeat: no-repeat; background-position: right 5px center; background-size: 20px; width: 50px; font-family: 'Mona-Sans Regular', sans-serif; font-size: 12px; color:#fff; }
    #product-list-controls .product-list-control .dropdown-control option{color:#000;}

#addRestNoteNotifications {background:#fff; width: 184px; box-sizing:border-box; border-radius:10px; display:flex; justify-content:center; align-items:center; flex-shrink: 0; cursor:pointer;}
    #addRestNoteNotifications p { color: #000; margin: 0; text-align: center; white-space: nowrap; font-size: 12px; font-family: 'Mona-Sans Regular', sans-serif; display: flex; justify-content:center; align-items:center; gap: 5px; }
    #addRestNoteNotifications:hover {background: var(--purple);}
    #addRestNoteNotifications:hover p { color:#fff; }
        #addRestNoteNotifications:hover p img { filter:invert(100); }
#productTable { }
    #productTable .row,
    #productTable .tableHeader { display: flex; justify-content: space-between; background: #E9E4FF; }
    #productTable .row,
    #productTable .expand-row { background: #fff; }
        #productTable .row:nth-child(even of .row),
        #productTable .expand-row:nth-child(even of .expand-row) { background: #F4F5F7; }
            #productTable .row:hover,
            #productTable .row:nth-child(even of .row):hover { background: #F2ECFF; }



    #productTable .expand-row {display:none;}
        #productTable .row div,
        #productTable .tableHeader div { border-right: 1px solid #fff; }
    #productTable .row .notification,
    #productTable .tableHeader .notification { border:none; }
    #productTable .tableHeader div { display:flex; justify-content:flex-start; align-items:center;  font-size: 10px; color: #000; font-family: 'Mona-Sans SemiBold', Arial, sans-serif; text-align: left; font-weight: 500; padding: 12.5px 10px; box-sizing: border-box; }
    #productTable .tableHeader { border-top-right-radius: 10px; border-top-left-radius: 10px; }
    #productTable .row div { font-family: 'Montserrat', Arial, Sans-serif; font-size: 10px;  color: #3B3B3B; padding: 10px 10px 7px 10px; box-sizing: border-box; border-color: #fff; vertical-align: top; word-break:break-word; hyphens: auto;}
    #productTable .row:nth-last-child(1 of .row) { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
        #productTable .nameAndForm {width: 12.3%;}
        #productTable .substance { width: 10%; }
        #productTable .atc { width: 4.6%; white-space:nowrap; }
        #productTable .status { width: 7.2%; }
        #productTable .strength { width: 4.8%; }
        #productTable .packaing { width: 9.8%; }
        #productTable .vnr { width: 6.4%; }
        #productTable .altInfo { width: 14.5%; position:relative; }
        #productTable .date { width: 5.7%; white-space:nowrap;}
        #productTable .reason { width: 7.4%; position:relative; }
    #productTable .company { width: 6.7%; position: relative; }
        #productTable .notification { width: 5.1%; text-align:center !important; cursor:pointer; justify-content:center !important; border-right:none;}
            #productTable .notification img { margin: -6px 0 0 0; padding: 6px; }
    #productTable .notification:hover img { background:#fff; border-radius: 100px; }
        #productTable .expand-col {display:none !important; width:45px;}
    #productTable .row .expand-col .expand { display: block; mix-blend-mode: darken; }
    #productTable .row .expand-col .minimize { display: none; mix-blend-mode: darken; }
    #productTable .row .expand-col.open .expand { display: none; }
    #productTable .row .expand-col.open .minimize { display: block; }

        #productTable .status span {padding: 4px 10px; border-radius: 100px; white-space:nowrap;}
    #productTable .status .red { background: #F5161610; color: #F51616; }
    #productTable .status .purple { background: #7C3DFD10; color: #7C3DFD; }
    #productTable .status .green { background: #08c20010; color: #08c200; }
    #productTable .popup { display: none; position: absolute; top: 0; left: 0; background: #E6DAFF; color: #3B3B3B; padding: 10px; width: 344px; z-index: 2; min-height: 100%; box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.14); }
    #productTable .row div:hover .popup {display:block; cursor:default;}
    #productTable .reason .popup {width: 200px;}
    #productTable .company .popup { width: 150px; }

    #productTable .expand-row { padding: 20px 15px 7px 15px; display: none; cursor: pointer; border-bottom: 0.5px solid #EBEBEB; }
        #productTable .expand-row div { width: 100%; display: none; justify-content: space-between; align-items: flex-start; color: #000; font-weight: 600; font-size: 12px; margin: 0 0 13px 0; }
            #productTable .expand-row div .expand-row-header { font-weight: bold; color: var(--grey); font-family: 'Mona-Sans', sans-serif; font-weight: 500; }
                #productTable .expand-row div .expand-row-text {text-align:right; max-width: 60%;}

                .pager { clear: both; display: flex; justify-content: space-between; align-items: center; margin: 20px 0 0; }
        .pager .pages { display: flex; justify-content: flex-end; align-items: center; }
        .pager a, .selectPageDDL { font-size: 11px; width: 31px; height: 30px; color: #fff !important; text-decoration: none; display: flex; justify-content: center; align-items: center; border-radius: 4px; border: 0.5px solid #fff; margin: 0 2px; }
            .selectPageDDL {background:var(--purple); border: 0.5px solid var(--purple);}
            .pager .current,
            .pager a:hover { font-weight: bold; border: 1px solid var(--purple); background-color: var(--purple); color: #fff; }
            .pager a.arrow { }
    .pages a.arrow .caret { }
.pages a.arrow.right .caret { position: relative; display: inline-block; border-right: 2px solid #fff; border-bottom: 2px solid #fff; width: 6px; height: 6px; transform: rotate(-45deg); }
.pages a.arrow.left .caret { position: relative; display: inline-block; border-left: 2px solid #fff; border-top: 2px solid #fff; width: 6px; height: 6px; transform: rotate(-45deg); }

    .pager a.arrow.right { margin: 0 0 0 20px; }
    .pager a.arrow.left { margin: 0 20px 0 0; }
.pager .pageingText { color: #80808E; font-size: 12px; font-weight: 500; }
.selectPageDDL { width: auto; height: 32px; }
.fancybox-slide--html .fancybox-close-small {right: 20px !important; top: 20px !important;}
#notificationPopup { max-width: 466px; height:309px; padding: 40px; box-sizing: border-box; border-radius: 40px; display: inline-flex; justify-content: center; align-items: center; }
    #notificationPopup h2 {text-align:center; font-size: 18px; margin: 0 0 30px 0; color:#000; }
    #notificationPopup p { text-align: center; font-size: 14px; margin: 0 0 20px 0; color: #555668; }
    #notificationPopup .notificationForm {display:flex; justify-content:space-between; gap: 10px;}
    #notificationPopup input[type=text] { width: 294px; padding: 10px; box-sizing: border-box; font-size: 16px; font-family: 'Montserrat', Arial, Sans-serif; border: 0.5px solid #CCCCD2; border-radius: 10px; }
    #notificationPopup input[type=submit] { background: var(--purple); color: #fff; border-radius: 10px; width: 82px; text-align: center; border: none; cursor: pointer; font-family: 'Mona-Sans', Arial, sans-serif; font-weight:400;}
    #notificationPopup input[type=submit]:hover {opacity:0.9;}

    #notificationPopup .success p {color:#128b00; font-size: 16px; text-align:left; margin: 10px 0 0 0; font-size: 14px;}
    #notificationPopup .error p { color: #8b0000; font-size: 16px; text-align: left; margin: 10px 0 0 0; font-size: 14px; }
#overlay { z-index: 3; background: #ffffff80; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; width: 100%; height: 100%; display: none; }

#filter { z-index: 3; background: #00000060; position: absolute; top: 0; width: 100%; height: 100%; display:none; }

#restNotesPopup { position: absolute; top: 10px; right: 10px; background: #F6F6F6; width: 906px; max-width: 90%; height: auto; max-height: calc(100% - 40px); overflow-y: auto; z-index: 4; padding: 20px; box-sizing: border-box; border-radius: 10px; display: none; }
#closePopup { background: #F6F6F6; width:44px; height:44px; border-radius:100px; position:absolute; top: 10px; right: 926px; display:flex; justify-content:center; align-items:center; cursor:pointer; z-index:5; display:none;}
#closePopup:hover {background:#d7d7d7;}
#restNotesPopupHeader h2 { color: #000; font-size: 22px; font-family: 'Mona-Sans', Arial, sans-serif; font-weight: 400; margin: 0 0 10px 0; }
#restNotesPopupHeader p {color:#000; font-size: 14px; margin:0;}
#restNotesContactForm {background:#fff; border-radius: 30px; border: 1px solid #00000010; margin: 15px 0 20px 0; padding: 20px;}
#restNotesContactFormHeader {margin: 0 0 15px 0;}
    #restNotesContactFormHeader p,
    #restNotesProductListHeader p { font-size: 16px; color: #000; display: flex; justify-content: flex-start; align-items: center; margin: 0; gap: 6px; font-weight:600; }
#restNotesContactFormHeader p img {position:relative; bottom: 2px;}
#restNotesContactFromBody {display:flex; justify-content: flex-start; gap: 20px; flex-wrap:wrap;}
#restNotesContactFromBody .width-50 {width: calc(50% - 10px);}
#restNotesContactFromBody .width-33 {width: calc(33% - 12.3px);}
    #restNotesContactFromBody input[type=text] { width: 100%; padding: 8px 25px; box-sizing: border-box; border: 0.5px solid #ccccd2; border-radius: 10px; font-family: 'Montserrat', Arial, Sans-serif; font-size: 14px; color: #00021D; font-weight:600; }
    #restNotesContactFromBody div p { color: #555668; font-size: 14px; font-family: 'Mona-Sans', Arial, sans-serif; font-weight: 400; }

#restNotesProductListHeader { display: flex; justify-content: space-between; align-items: center; margin: 0 0 15px 0;}
    #restNotesProductListHeader span { color: #555668; font-size: 14px; font-family: 'Mona-Sans', Arial, sans-serif; }

#restNotesProductAdded {display:flex; justify-content:space-between; gap: 7px; }
    #restNotesProductAdded .vnrNumber,
    #restNotesProductAdded .productName { background: #fff; border: 1px solid #ccccd2; color: #00021D; border-radius:10px; min-height: 20px; display:flex; justify-content:center; align-items:center; font-weight:600; padding: 5px 20px; box-sizing:border-box; }
    #restNotesProductAdded .vnrNumber { width: 14.5%; font-size: 12px; }
    #restNotesProductAdded .productName {width: 75%; align-items:flex-start; flex-direction:column; font-size: 12px;}
        #restNotesProductAdded .productName span.info { color: #555668; font-size: 12px; font-weight:400; }
        #restNotesProductAdded .productName span.bull { margin: 0 5px; display: inline-block; background: #00000020; width: 5px; height: 5px; border-radius: 100px; position:relative; bottom: 2px; }
    #restNotesProductAdded .removeProduct { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: 12px; color: #555668; }
        #restNotesProductAdded .removeProduct .count span { font-weight: 600;}
        #restNotesProductAdded .removeProduct img {display:block;}
    #restNotesAddProduct { background: #fff; border: 0.5px solid #ccccd2; border-radius: 10px; display: flex; justify-content: center; margin: 0 0 10px 0; }
div#restNotesAddProduct input[type=text] { width: 80%; padding: 10px 15px; border:none; box-sizing: border-box; border-radius:10px; font-family: 'Montserrat', Arial, Sans-serif; font-size: 14px; color: #00021D; font-weight: 500; }
    div#restNotesAddProduct input[type=text]:focus {outline:none;}
    #restNotesAddProduct input[type=submit] { background: var(--purple); color: #fff; border-radius: 10px; width: 20%; padding: 10px 0; box-sizing: border-box; font-family: 'Mona-Sans', Arial, sans-serif; font-weight: 500; font-size: 16px; cursor: pointer; border: none; }
    #restNotesAddProduct input[type=submit]:hover {opacity:0.9;}

    #restNotesPopup p.error {color:#f00; margin: 10px 0 0 0; }

    #sendForm {margin: 20px 0 0 0;}
        #sendForm input[type=submit] { background: var(--purple); color: #fff; border-radius: 18px; width: 100%; padding: 16px 25px; box-sizing: border-box; font-family: 'Mona-Sans', Arial, sans-serif; font-weight: 500; font-size: 16px; cursor: pointer; border: none; }

#restNotesDone { display: flex; justify-content: center; align-items: center; flex-direction:column; padding: 0 15%; height:545px; max-height:100%; position:relative; }
#doneHeader { font-size: 30px; font-weight: 600; font-family: 'Mona-Sans', Arial, sans-serif; margin: 30px 0; color:#000; }
#doneMessage {color:#000; text-align:center;}
#closeDoneBtn {position:absolute; bottom: 0px; text-align:center; background:var(--purple); color:#fff; border-radius: 12px;padding: 16px 65px; font-weight: 600; cursor:pointer;}
#closeDoneBtn:hover {opacity:0.9;}

@media only screen and (max-width: 1300px) { #productTable .row .reason, #productTable .tableHeader .reason { display: none; }
    #productTable .expand-row .reason { display: flex; }
    #productTable .row .altInfo,
    #productTable .tableHeader .altInfo { display: none; }
    #productTable .expand-row .altInfo { display: flex; }
    #productTable .row .expand-col,
    #productTable .tableHeader .expand-col { display: flex !important; }
    #productTable .row .notification,
    #productTable .tableHeader .notification { border-right: 1px solid #fff; }

    #productTable .tableHeader .expand-col { border-right:none; }
    #productTable .date { width: 8%; }

    #productTable .vnr { width: 7%; }
}

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

    #productTable .row .company,
    #productTable .tableHeader .company { display: none; }
    #productTable .expand-row .company { display: flex; }
    #productTable .row .vnr,
    #productTable .tableHeader .vnr { display: none; }
    #productTable .expand-row .vnr { display: flex; }
    #productTable .row .atc,
    #productTable .tableHeader .atc { display: none; }
    #productTable .expand-row .atc { display: flex; }
    #productTable .row .substance,
    #productTable .tableHeader .substance { display: none; }
    #productTable .expand-row .substance { display: flex; }
    #productTable .notification {width: 10%;}
    #productTable .date { width: 12%; }
    #productTable .status,
    #productTable .strength,
    #productTable .packaing { width: 12%; }
}
@media only screen and (max-width: 1000px) {
    #closePopup {right: 92%;}
}


    @media only screen and (max-width: 700px) {
        #restNotesContactForm,
        #restNotesPopup { padding: 20px; }
        #restNotesContactFromBody .width-50 { width: calc(50% - 10px); }
        #restNotesContactFromBody .width-33 { width: calc(50% - 10px); }
    }

    @media only screen and (max-width: 660px) {
        .start { width: 96%; }
        #product-list-controls { flex-direction: column; }
            #product-list-controls .searchField { height: 35px; }
            #product-list-controls .product-list-control { padding: 5px 15px; }
        #productTable .row .packaing,
        #productTable .tableHeader .packaing { display: none; }
        #productTable .expand-row .packaing { display: flex; }
        #productTable .row .date,
        #productTable .tableHeader .date { display: none; }
        #productTable .expand-row .date { display: flex; }
        #productTable .nameAndForm { width: 25%; }
        #productTable .status,
        #productTable .strength { width: 26%; }
        #productTable .notification { width: 20%; }

        #notificationPopup { max-width: 95%; height: 250px; }
            #notificationPopup h2 { font-size: 14px; }
        #ctl00_ContentPlaceHolder1_NotificationPanel { max-width: 100%; }
        #notificationPopup input[type="text"] { width: 200px; }
        #product-list-controls .searchField input { font-size: 16px; }

        #restNotesPopup { max-width: calc(100% - 20px); }
        #closePopup { width: 33px; height: 33px; top: 20px; right: 20px; border: 0.5px solid #ccccd2; }
        #restNotesPopupHeader h2 { font-size: 22px; }
        #restNotesProductAdded .removeProduct {flex-direction:column; justify-content:center}
        #restNotesProductAdded .vnrNumber, #restNotesProductAdded .productName {padding: 10px; font-size: 10px;}
            #restNotesProductAdded .productName span.info{font-size:10px;}
        div#restNotesAddProduct input[type=text] { padding: 15px; font-size: 16px; }
        #restNotesAddProduct input[type=submit] { padding: 15px 0; font-size: 14px;}

        #addRestNoteNotifications {padding: 10px 0;}

        #restNotesDone { justify-content: flex-start; padding: 0 5%; max-height: 80%; }
        #doneHeader {font-size: 22px;}
    }

    @media only screen and (max-width: 480px) {
        #restNotesContactForm { margin: 15px 0 20px; }
        #restNotesContactFormHeader { margin: 0 0 15px 0; }
        #restNotesContactFromBody .width-50,
        #restNotesContactFromBody .width-33 { width: 100%; }
        #restNotesContactFromBody input[type="text"] { padding: 8px 12px; font-size: 16px; border-radius: 8px; }
        #restNotesProductAdded .vnrNumber{width: 20%;}
        #restNotesAddProduct input[type=submit]{width:30%;}
        div#restNotesAddProduct input[type=text] {width: 70%;}
    }

    @media only screen and (max-width: 400px) {
        #productTable .status,
        #productTable .strength { font-size: 8px !important; }
    }