/*********************Portal Notes*********************/
.gridMessages {
    background: transparent !important;
}
.gridMessages .attachments {
    padding-left: 22px;
  border-top:1px dotted rgba(0,0,0,0.3);
  margin-top:3px;
  padding-top:5px;
}
.RadCalendarPopup .t-button {
    margin: 0;
    padding: 0px;
    border: none;
    line-height: 1.42857143;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    outline: 0;
    position: relative
}
    .gridMessages .attachments span.t-icon {
        margin-left: -22px;
    }
/*    .gridMessages .button {
        background: linear-gradient(white, rgba(255, 255, 255,0.3));
    }*/
    .gridMessages .button.dark:hover {
        background: #1f2737 !important;
    }
    .gridMessages .button.small:hover {
        background: linear-gradient(white, rgba(255, 255, 255,0.6));
    }
    .gridMessages .button.red:hover {
        background: #ff3c41;
        color:#000!important;
    }
    .gridMessages .button.small {
        /* padding: 2px 7px;
    border: none;*/
        border-radius: 7px;
        font-size: 11px;
    }

.notes-controls {
    background-image: linear-gradient(white,#e3e3e3);
    line-height: 28px;
    padding: 5px;
    margin-top:2px;
}
    .notes-controls > label {
        display: inline-block;
        margin-right:15px;
        width:auto!important;
    }
    
    .notes-controls .RadComboBox {
        margin-bottom:0px;
    }
@media screen and (max-width: 800px) {


    .notes-txt, .notes-controls {
        width: 100%;
        float:none;
    }

}
.groupHeader:hover{
    cursor:pointer;
}
.notes-controls .RadUpload {
    line-height: 20px;
    padding: 0px 5px;
    display: inline-block;
    width: auto !important;
    height: 28px;
}
.notes-controls .RadUpload ul {
    background: #f00;
    background-image: linear-gradient(white,#e3e3e3) !important;
}
/*.gridMessages .attachments a {
    margin-right: 10px;
    margin-bottom: 5px;
    border-left: solid 3px #66AED2;
    text-decoration: none;
    vertical-align: top;
}*/
.fileList {
    list-style: none;
    margin: 10px 0px !important;
    padding: 0 !important;
    width: 100%;
}

.fileList li {
    display: inline;
    margin: 0px 5px 5px 0px !important;
    padding: 0 !important;
    background-image: none !important;
}

    .fileList li a, .gridMessages .attachments a {
        display: inline-block;
        padding: 2px 5px;
        /*background: rgba(31, 39, 55,0.3) !important;*/
        background: rgba(255, 255, 255,0.7) !important;
        color: rgba(0, 0, 0,0.7) !important;
        -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.30);
        -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.30);
        box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.30);
        /*text-overflow: ellipsis;
    max-width:200px;*/
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 10px;
        margin-bottom: 5px;
        border-left: solid 3px #66AED2;
        text-decoration: none;
        vertical-align: top;
        max-width: none;
        text-overflow: initial;
    }



        .gridMessages .attachments a.downImg {
            display: inline-block;
            padding: 0px;
            width: 18px;
            background-color: rgba(0, 0, 0,0.3)!important;
            
            /*-webkit-box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.30);
            -moz-box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.30);
            box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.30);*/
            margin-left: -31px;
            margin-top: 44px;
            border-left: none;
            /*display: inline-block;
            
            color: #fff;
            z-index: 3;
            background-color: rgba(0, 0, 0,0.3);
            right: 13px;
            bottom: 2px;
            border: none;*/
        }
a.downImg span {
    width: 16px;
    height: 16px;
    padding: 2px;
    border: none;
    color: #fff !important;
    margin-left: 0px !important;
}
/*.fileList li a:hover, .gridMessages .attachments a:hover {
    scale: 105%;
    color:#fff;
}
.fileList li a:hover, .gridMessages .attachments a.downImg:hover {
    scale: 100%;
    
}*/


.gridMessages .attachments a.jpg, .gridMessages .attachments a.jpeg, .gridMessages .attachments a.png {
    background: #fff !important;
    padding: 3px;
    border-left: none;
    max-width: none;
}

.gridMessages .attachments a img {
    display: block;
    height: 60px !important;
}


/*.fileList li a
.fileList li a:hover {
    max-width: none;
    text-overflow: initial;
}*/

.b2 .fileList li a {
    border-left: solid 3px rgb(145, 208, 189);
}

/*.fileList li a:hover {*/
    /*color: #fcd000 !important;*/
/*}*/

.note-details #note-frm, .note-details #note-frm-FN, .note-details #note-frm-PN {
    background: rgba(255,255,255,0.5) !important;
    padding: 15px;
    border-radius: 5px;
    margin-top: 10px;
    box-shadow: 2px 3px 7px rgba(0,0,0,0.2);
}

    .note-details #note-frm h3 {
        margin-top: 0px;
        padding-top: 0px;
    }



  

/*.fileList li a {
    background: rgb(31, 39, 55) !important;
}
*/
.b .fileList li a, .b0 .fileList li a, .b .attachments a, .b0 .attachments a {
    border-color: #999 !important;
}

.b1 .fileList li a, .b1 .attachments a {
    border-color: rgb(102, 174, 210) !important;
}

.b2 .fileList li a, .b2 .attachments a {
    border-color: #91d0bd !important;
}

.b3 .fileList li a, .b3 .attachments a {
    border-color: #ddc6fa !important;
}
.fileList li a:hover, .attachments a:hover {
    background: rgba(31, 39, 55,0.8) !important;
}

.b .fileList li a:hover, .b0 .fileList li a:hover, .b .attachments a:hover, .b0 .attachments a:hover {
    color: #999 !important;
    max-width: none;
}

.b1 .fileList li a:hover, .b1 .attachments a:hover {
    color: rgb(102, 174, 210) !important;
    max-width: none;
}

.b2 .fileList li a:hover, .b2 .attachments a:hover {
    color: #91d0bd !important;
    max-width: none;
}

.b3 .fileList li a:hover, .b3 .attachments a:hover {
    color: #ddc6fa !important;
    max-width: none;
}
.child-notes .nameP {
    margin: 0px 5px 0px 0px;
    font-weight: 600;
}
.b0 > span.nameP, .mkey .b0 {
    color: #898787;
}

.b1 > span.nameP, .mkey .b1 {
    color: #4d8eae
}
.b2 > span.nameP, .mkey .b2 {
    color: #359076;
}
.b3 > span.nameP, .mkey .b3 {
    color: #805fac
}
.b4 > span.nameP, .mkey .b4 {
    color: #be779a
}
.b5 > span.nameP, .mkey .b5 {
    color: #b05f1b
}

.gridMessages .rgRow, .gridMessages .rgAltRow, .gridMessages .rgRow > td, .gridMessages .rgAltRow > td {
    background: transparent !important;
    border: none !important;
    margin:0px!important;
}
    .gridMessages .rgRow:hover, .gridMessages .rgAltRow:hover {
        /* background: rgba(255,255,255, 0.2) !important;*/
        /*background: linear-gradient(#EDF0F4 25%, rgba(255,255,255,0.8) 50%, #EDF0F4 75%) !important;*/
    }

.note-details .info {
    font-size: 12px !important;
    color: #333 !important;
}

.gridMessages .note-details {
    background: #aed6ea;
    border-left: solid 5px #66aed2;
    border-radius: 5px 5px 0px 5px;
    padding: 15px 15px 10px 15px;
    width: auto;
    display: inline-block;
    margin-bottom: 5px;
    float: left;
    position:relative;  
}
.gridMessages .reverse .note-details {
    float: right !important;
    border-left: none;
    border-right: solid 5px #66aed2;
}

.gridMessages .note-details.sm {
    background: #edc2c2;
    border-left: solid 5px #f00;
}


.gridMessages .b0 .note-details {
    background: #E1E4E8 !important;
    border-left: none;
    border-right: solid 5px #999;
    border-radius: 5px 5px 5px 0px;
    float: right;
}
.gridMessages .b0.reverse .note-details {
    float: left !important;
    border-left: solid 5px #999;
    border-right:none;
}
.gridMessages .b4.reverse .note-details {
    float: left !important;
    border-left: solid 5px #999;
    border-right: none;
}
.gridMessages .note-details ul.child-notes {
    list-style: none;
    margin: 15px 0px 0px 0px;
    padding: 0px 0px 0px 5px;
    
}



    .gridMessages .note-details ul.child-notes > li {
        background: url(/images/bg-msg-black.png) no-repeat top left;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 10px 11px;
        position: relative;
        vertical-align: top!important;
 
    }
    .gridMessages .note-details ul.child-notes > li > div {
        padding-right:30px;
    }
.gridMessages .note-details ul.child-notes > li:last-child {
    background: url(/images/bg-msg-last-black.png) no-repeat top left;
}

.gridMessages .ack-tick {
    background: url(../../../images/icons-png/user-black.png) no-repeat right center;

    color: #fff;
    clear: both;
    text-align: right;
    padding-right: 25px;
    width: auto;
    color: #ccc;
}

.gridMessages .note-details .ack-tick {
    background: url(../../../images/icons-png/user-black.png) no-repeat right center;
    color: #000;
}
div.b, div.b0, div.b1, div.b2, div.b3, div.b4, div.b5 {
    border-radius: 5px 5px 5px 5px;
    padding: 5px;
}

.note-details .b, .note-details .b0, .note-details .b1, .note-details .b2, .note-details .b3, .note-details .b4, .note-details .b5, .fileList li a {
    border-left: solid 5px #66aed2;
    box-shadow: 2px 3px 7px rgba(0,0,0,0.2);
}


.note-details div.b, .note-details div.b .fileList li a {
    background: #E1E4E8;
    border-color: #999;
}

.b0 .note-details, .note-details div.b0 {
    background: #E1E4E8;
    border-color: #999;
}

.b1 .note-details, .note-details div.b1 {
    background: #c1ddeb;
    border-color: rgb(102, 174, 210) !important;
}

.b2 .note-details, .note-details div.b2 {
    background: #c5ebe0;
    border-color: #91d0bd !important;
}

.b3 .note-details, .note-details div.b3 {
    background: #eadff8;
    border-color: #ddc6fa !important;
}

.b4 .note-details, .note-details div.b4 {
    background: #fbe2ed;
    border-color: #ff52a7 !important;
}

.b5 .note-details, .note-details div.b5 {
    background: #f7e5b9;
    border-color: #fbcb56!important;
}
.mkey {

    margin-top: 15px;
    text-align: right;
    vertical-align: central;
    display: inline-block;
    float: right;
    font-size: 12px;
    line-height: 17px!important;
    vertical-align: middle;
    color: #000;
    font-size: 12px;
    font-weight: normal;
}
.mkey .button{
    float:right;
}
.mkey .t-icon {
    margin-top: -4px!important;
}
.mkey .p-icon {
    margin-top: -1px !important;
}
.mkey > span  {
    float: right;
    /*margin: 0px 0px 0px 10px;*/
}
    
    .mkey .b0, .mkey .b1, .mkey .b2, .mkey .b3, .mkey .b4, .mkey .b5 {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 0px !important;
        margin-right: 1px;
        line-height: 19px;
    }
    .mkey > button {
        line-height: 15px !important;
        padding: 5px 10px !important;
    }
.mkey .b0, .mkey .b0.rbToggled {
    background: #E1E4E8 !important;
    border-color: #E1E4E8 !important;
    color: #898787 !important;
}

.mkey .b1, .mkey .b1.rbToggled {
    background: #c1ddeb !important;
    border-color: #c1ddeb !important;
    color: #4d8eae !important;
}

.mkey .b2, .mkey .b2.rbToggled {
    background: #c5ebe0 !important;
    border-color: #c5ebe0 !important;
    color: #359076 !important;
}

.mkey .b3 , .mkey .b3.rbToggled{
    background: #eadff8 !important;
    border-color: #eadff8 !important;
    color: #805fac !important;
}

.mkey .b4 , .mkey .b4.rbToggled{
    background: #fbe2ed !important;
    border-color: #fbe2ed !important;
    color: #be779a !important;
}

.mkey .b5, .mkey .b5.rbToggled {
    background: #f7e5b9 !important;
    border-color: #f7e5b9 !important;
    color: #b05f1b !important;
}

#newMessages {
    text-align: center;
    display: inline-block;
    float: left;
    
}

    #newMessages a {
        height: 22px;
        line-height:24px;
        display: block;
        line-height: 24px;
        font-size: 14px;
        margin-right: 10px;
        text-decoration: none;
        font-weight: bold;
   
        float: left;
        
    }

        #newMessages a.new {
            background: #ff5b5b;
            color: #fff;
            width: auto;
            padding: 2px 5px;
            border-radius: 5px;
            /*box-shadow: 2px 2px 5px rgba(0,0,0,0.5);*/
            /*border: solid 2px #fff;*/
        }

        #newMessages a.ping {
            background: #fff;
            color: #ff5b5b;
            width: auto;
            padding: 2px 5px;
            border-radius: 5px;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
            /*border: solid 2px #ff5b5b;*/
            animation: pulse 1.5s infinite;
            
        }
        #newMessages a.new .t-icon {
            font-size: 18px;
            height: 16px;
            line-height: 16px;
            padding: 0px;
            color: #fff;
        }
        #newMessages a.ping .t-icon {
            font-size: 18px;
            height: 16px;
            line-height: 16px;
            padding: 0px;
            color: #ff5b5b;
        }

/*.new-message {
    float: left;*/
    /*background: ##ff5b5b;*/
    /*background: #ff3c41;
    color: #fff;
    width: auto;
    padding: 0px 15px;
    margin-top: -20px;
    margin-left: -15px;
    border-radius: 5px 0px 5px 0px;
}*/
    .new-message {
    /*float: left;
    background: #ff5b5b;
    
    color: #fff;
    width: auto;
    padding: 2px 5px;
    margin-top: -30px;
    margin-left: -10px;
    border-radius: 5px;
    box-shadow:2px 2px 5px rgba(0,0,0,0.3);*/
}

.new-message .t-icon  {
    font-size: 18px;
    height: 16px;
    line-height: 16px;
    padding: 0px;
    color: #fff;

}

.new-message {
    position: absolute;
    margin-top: 0px !important;
    margin-left: -37px !important;
    border-radius: 5px;
    padding: 0px;
    background: transparent;
    box-shadow: none;
    margin-bottom:0px;
}

.child-notes .new-message {
    margin-left: -27px !important;
    /*position: absolute;
    margin-top: 0px !important;
    margin-left: -13px !important;
    border-radius: 5px;
    padding:0px;
    background:transparent;
    box-shadow:none;*/
}
.note-details.new, .note-details .new{
    box-shadow: 2px 3px 7px rgba(0,0,0,0.5);
    border-left: solid 24px #ff5b5b!important;
    border-color: #ff5b5b !important;
}
.gridMessages .b0 .note-details .new, .gridMessages .b1 .note-details .new, .gridMessages .b2 .note-details .new, .gridMessages .b3 .note-details .new, .gridMessages .b4 .note-details .new, .gridMessages .b5 .note-details .new {
    border-left: solid 24px #ff5b5b !important;
    border-color: #ff5b5b !important
}

.showall{
    position:absolute;
    left:50%;
    margin-left:-30px;
    margin-top:10px;
    background:rgba(0,0,0,0.1);
    color:#999;;
}

.fileList a {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.gridMessages .date-container {
    vertical-align: top;
    color: #999;
    font-size: 15px;
    min-width:90px;
}
    .gridMessages .date-container.right .lock{
        position:absolute;
        margin-left:-35px;
        background:rgba(255,0,0,0.8);
        color:#fff;
        border-radius:10px;
    }
    .gridMessages .time {
        font-size: 14px;
        color: #000;
    }

.gridMessages .link {
    color: #ffff !important;
    margin-bottom: 5px;
    display: inline-block;
    font-size: 120%;
}

.parentNote {
    font-style: italic;
    text-align: center;
    padding: 10px;
    color: #343434;
}

.gridMessages div.buttons {
    margin-top: 10px;
    border-radius: 0px;
}
    .gridMessages div.buttons .RadComboBox {
       float:none;
       margin-left:10px;
    }


.gridMessages .extra-details {
    background: rgba(255,255,255,0.3);
    margin: 10px -15px -15px -15px;
    display: none;
}
    .gridMessages .extra-details div {
        display: table-cell;
        width: 1%;
        padding: 0px 10px 10px 10px;
    }
        .gridMessages .extra-details > div.alt {
            background: rgba(255,255,255,0.2);
        }
.gridMessages .extra-details h2 {
    font-size:13px;
}

.group-header {
    background: none !important;
    box-shadow: none !important;
    text-align: center !important;
    border-bottom: solid 1px #333;
    font-size: 14px !important;
}
.note-details .RadComboBoxDropDown .rcbTemplate label {
    float: left !important;
    display: inline-block !important;
}

.note-details .rcbCheckBox[disabled="disabled"], .note-details li.rcbTemplate[aria-checked="false"] .rcbCheckBox {
    visibility: hidden;
}



.RadEditor {
    background: transparent !important;
    padding: 0px !important;
    border: none !important;
}

.reToolBarWrapper {
    background: transparent !important;
}

.reToolBar {
    margin-right: 3px !important;
    height: 31px
}

    .reToolBar li {
        padding: 3px 5px;
    }

#FileSize {
    width: auto;
    max-width: 300px;
    float: right;
}



.note ul {
    list-style: unset;
}

.note li {
    list-style: unset;
}
.gridMessages .note {
    display: block
}
.gridMessages .pn .note {
    display: block;
}
.name {
    font-weight: bold;
    margin-right: 10px;
}
/*.date .time{
    font-size:inherit;
    display:none;
}
.date:hover .time {
    
    display: inline-block;
}*/.date .time{
    font-size:inherit;
    
}
/*.date:hover .time {
    
    display: inline-block;
}*/



#note-frm {
    background: #F7F8FB;
}

.gridMessages {
    border: none !important
}

.messageCount {
    background: #343434;
    color:#fff;
    border-radius:20px;
    width:20px;
    height:20px;
    display:inline-block;
    line-height:20px;
    font-size:11px;
    text-align:center;
    margin-left:10px;
}

.note-details.ping {
    animation: pulse 2.5s infinite;
    border-color: rgba(255, 60, 65, 1) !important;
}
.note-details a.delete-inner {
    position: absolute;
    top: 2px;
    right:0px;
    z-index:2;
    
}

    .note-details a.delete-inner .t-icon, .main-del .t-icon.trash {
        color: rgba(0,0,0,0.2);
    }
    .note-details a.delete-inner:hover .t-icon, .main-del:hover .t-icon.cross {
        color: #f00 !important;
    }
.notes-controls .rcbSlide {
    margin-right: 50px;
    left: 50px !important;
}
.dd-files {
    font-size: 12px !important;
    
}
    .dd-files .rcbCheckBox {
        margin-right: 10px !important;
        float:left;
        margin-top:13px!important;
    }

    .dd-files .rcbItem,
    .dd-files .rcbHovered {
        float: left;
        margin: 0 1px;
        min-height: 40px!important;
        overflow: hidden;
        padding: 2px 19px 2px 6px;
        width: 290px;
        vertical-align:bottom;
        line-height:40px!important;
    }

    .dd-files .rcbDisabled {
        display: block !important;
        width: 100% !important;
        float:none;
        clear:both;
    }
    .dd-files .rcbItem rcbCheckBox {
        float: left;
    }

    .dd-files .rcbDisabled .rcbCheckBox {
        display: none;
    }

    .dd-files span.list-thm {
        /*width: 40px;
        height: 35px;*/
        overflow: hidden;
        margin-right: 5px;
        float: left;
        
        line-height: 40px;
        vertical-align: middle !important;
        display: flex;
        justify-content: center;
        
    }

        .dd-files span.list-thm img {
            /*max-width: 50px;
            max-height: 40px;
            margin: auto;
            display: block;*/
            width: 50px;
            height: 40px;
            object-fit: contain;
            object-position: center;
        }

    .dd-files .files span.list-thm img {
        /*max-width: 50px;
            max-height: 40px;
            margin: auto;
            display: block;*/
        width: 20px;
        height: 20px;
        object-fit: contain;
        object-position: center;
    }

    .dd-files span.list-txt {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
        line-height: 24px;
    }
    .dd-files span.list-txt .info {
        display: block;
        line-height:12px;
        
    }

    .dd-files .sub-files {
        margin-left: 0px;
    }


        .dd-files .sub-files .list-thm, .dd-files .sub-files .list-txt {
            margin-bottom: 5px;
        }

        .dd-files .sub-files .images {
            max-width: 300px;
        }

            .dd-files .sub-files .images .list-thm {
                float: left !important;
                display: block !important;
                margin-right: 5px;
                max-width: none;
            }

                .dd-files .sub-files .images .list-thm img {
                    max-width: none;
                }
                a.button{
                    color:#000!important;
                }
.note-source {
    display: inline-block;
    float: right;
    background: rgba(255,255,255,0.4);
    padding: 1px 5px;
    border-radius: 5px;
    margin-right: 5px;
    font-size: 11px;
    color: rgba(0,0,0,0.6);
    margin-top: 3px;
}
a.p-link {
    display: inline-block;
    /*float:right;*/
    
    padding: 1px 5px;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    text-decoration: none;
    font-size: 130%;
    font-weight: 600;
    color: #444!important;
}
.t-icon.pending {
    color: #ff5b5b!important;
}
.child-notes .t-icon.tick, .date-container .t-icon.tick {
    color: #75b648
}
.t-icon.notification.on {
    color: #f00 !important;
}
.p-user {
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    padding-right: 10px;
    color: #444;
    border: none !important;
    box-shadow: none !important;
}
    .p-user.b1 {
        color: #4d8eae;
    }
    .p-user.b2 {
        color: #359076;
    }
    .p-user.b3 {
        color: #805fac;
    }
.a-user {
    font-size: 12px;
    white-space: nowrap;
    


    color: #444
}
.date-container .p-user, .date-container .a-user {
    display: block;
}
.p-user .t-icon {
    padding-left: 0px;
    border-left: none;

}
.child-notes .p-user {
    
   /* display: inline-block;*/

}
.child-notes .date {
   color:rgba(0,0,0,0.3);
    padding-right:10px;
}
.gridMessages .rwWindowContent > div {
    overflow: hidden !important
}
@keyframes pulse {
    0% {
        /*transform: scale(0.99);*/
        box-shadow: 0 0 0 0 rgba(255, 60, 65, 1);
        /* box-shadow: rgba(240, 46, 170, 0.4) 0px 0px 0px 0px;*/
    }

    50% {
        /*transform: scale(1);*/
        box-shadow: 0 0 0 15px rgba(255, 60, 65, 0);
        /*box-shadow: rgba(240, 46, 170, 0.2) 5px 5px 5px 5px;*/
    }

    100% {
        /*transform: scale(0.99);*/
        
        box-shadow: 0 0 0 0 rgba(255, 60, 65, 0);
        /*box-shadow: rgba(240, 46, 170, 0) 0px 0px 0px 0px;*/
    }
}