.FlyOutAnchor-main-panel-class
{
    position: relative;
    display: inline-block;
    padding:5px;
}

.FlyOutAnchor-button-panel-class
{
    background-color: inherit;
    padding:10px;
    border: solid 1px lightgray;
    display: inline-block;
}

.FlyOutAnchor-button-panel--text-class
{
    float: left;
    padding:0px 5px 0px 5px;
}

.img-icon-container-class
{
    float: left;
    text-align: center;
    align-self: center;
}

.img-icon-previewer-container-class
{
    text-align: center;
    align-self: center;
}

.img-icon-slideshow-class, .img-icon-previewer-class
{
   padding:10px 5px 10px 5px;
   color: #ffffff;
}

.img-icon-previous-class
{
   margin-left: 12px;
   margin-right: 22px;
}

.img-icon-refresh-class
{
   color: #666;
}

.slideShow-navigation-bar-outer-container, .previewer-navigation-bar-outer-container
{
   height: 40px;
   visibility: visible;
   background-color: whitesmoke
}

.FlyOutAnchor-menu-class
{
    position: absolute;
    background-color: white;
    width: max-content;
    overflow: auto;
    box-shadow: 0px 16px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    display: grid;
    grid-template-rows: auto;
    padding:3px;
    border-radius: 2px;
}

.hide
{
    display: none;
}

.FlyOutAnchor-menu-item-class
{
    position: relative;
    display: inline-block;
    border-bottom: 1px solid lightgray ;
    padding:5px 3px 5px 3px;
}

.FlyOutAnchor-DisabledMenu-class
{
   opacity: 0.4;
}

.defaultImageIcon-class
{
    min-width: 20px;
    min-height: 20px;
}

.FlyOutAnchor-menu-itemText-class
{
    float: left;
    padding-left: 12px;
    font-size: 12px;
}

[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    vertical-align: middle;
}

/* Comments */

.comments-outer-container
{
    overflow: auto;
    padding: 2px 2px 2px 15px;
}

.comments-card-list-container
{
   background-color:  #f8f8f8;
}

.comment-card-parent-class
{
   border-radius: 5px;
   background-color: white;
   display: grid;
   grid-template-columns: .2fr 3fr .5fr;
   grid-template-rows: auto;
   padding:10px;
   margin-bottom: 4px;
   grid-row-gap: 5px;
}

.comment-card-author-comment-date-content-class
{
   display: grid;
   grid-template-columns: 0fr 1fr;
   grid-template-rows: auto;
   grid-row-gap: 5px;
}

.comment-author-card
{
   font-size: 14px;
   color: #252423;
   font-family: 'Segoe UI semibold';
   letter-spacing: 0.16px;
}

.comment-author-card-replyDisabled
{
   grid-column: 2/4;
}

@keyframes backgroundColorfade {
   0% {background-color: rgb(243, 233, 231);;}
}

.comment-message-class
{
   font-size: 12px;
   color: #252423;
   word-break: break-all;
   font-style: normal;
   font-weight: normal;
   line-height: 16px;
}

.comment-numChildrens-class
{
   font-size: 13px;
   color: #2B5C9C;
   font-family: 'Segoe UI semibold';
   border: none;
   background: none;
   padding: unset;
   text-align: left;
}

.comment-childThreadsPane-class
{
   border-radius: 3px;
   grid-column: 1/4;
   margin-bottom: 4px;
   grid-row-gap: 2px;
   margin-left:25px;
}

.comment-card-child-class
{
   padding: 10px 10px 15px 5px;
   border: 1px solid #DEDEDE;
   box-sizing: border-box;
}

.user-presence-class
{
   border-radius: 50%;
   margin-left: -15px;
   width: 20px;
   height: 20px;
   font-size: 8px;
   text-align: center;
   line-height: 20px;
   z-index: 1; /*should come above borders.*/
}

.user-presence-1
{
   background: #4F6BED;
   color: white;
}

.FlyOutAnchor-button-class{
   border: none;
   background: none;
   text-align: left;
   width: 100%;
   height: 100%;
   padding: 14px 12px;
}
.FlyOutAnchor-button-div-class{
   padding: 8px 3px 8px 3px;
}
.user-presence-2
{
   background: linear-gradient(0deg, #038387, #038387);
   color: white;
}

.user-presence-3
{
   background: linear-gradient(0deg, #D13438, #D13438);
   color: white;
}

.user-presence-4
{
   background: linear-gradient(0deg, #E3008C, #E3008C);
   color: white;
}

.user-presence-5
{
   background: linear-gradient(0deg, #5C2E91, #5C2E91);
   color: white;
}

.user-presence-6
{
   background: linear-gradient(0deg, #004E8C, #004E8C);
   color: white;
}

.user-presence-comment-childThread-class
{
   margin-left: -15px;
}

.comment-OptionsColumn-class
{
   text-align: right;
}

.disable-comments-reply-class
{
   display: none;
}

.hide-childThreads-class
{
   display: none;
}

.comment-date-class
{
   grid-column: 2/4;
   font-size: 12px;
   color: #605E5C;
   font-style: normal;
   font-weight: normal;
   line-height: 16px;
}

.comment-mentions-class, #jSanity_comment-mentions-class
{
   color: #17589A;
}

.comment-card-expanded-class
{
   position: relative;
}

.comment-card-expanded-class::after, .comment-card-highlighted-deeplink::after
{
   border-left: 2px solid #979797;
   height: calc(100% - 14px);
   content:"";
   display:block;
   position: absolute;
   bottom: 0;
   top: 14px;
   border-bottom-left-radius: 5px;
   margin-left:-1px
}


.comment-card-highlighted-deeplink
{
   background-color: white;
   margin-left: -1px;
   animation: backgroundColorfade 3s;
   position: relative;
}

.comments-pane-icons-container-prevComment, .comments-pane-icons-container-nextComment
{
   display: inline-block;
   padding: 0px 4px 0px 4px;
   box-sizing: border-box;
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
   border: 1px solid #DEDEDE;
   padding-top: 2px;
}

.backIconContainer-class{
   float: left;
}

.comments-pane-icons-container-prevComment
{
   margin-right: 8px;
}

.slideShow-pane-icons-container, .previewer-pane-icons-container
{
   display: inline-block;
   width: 40px;
   height: 40px;
   background-color: #000000;
   opacity: 0.42;
}

.slideshow-toolbar-icons-container
{
   display: inline-block;
   width: 40px;
   height: 40px;
   background-color: #6B6B6A;
}

.slideshow-toolbar-icons-container:focus {
   outline: 2px solid #FFFFFF !important; 
   position: relative;
   z-index: 1;
}

.comments-pane-icons-container-prevComment:hover, .comments-pane-icons-container-nextComment:hover
{
   background-color: lightgray;
}

.comment-navi-button-disabled
{
   vertical-align: baseline;
}

.currentSlide-box-ssNavigator-inputBox
{
   text-align: center;
   width: 30px;
   height: 20px;
   border: solid 1px black;
   background-color: white;
}

.currentSlide-box-ssNavigator,.totalSlides-box-ssNavigator
{
   vertical-align: top;
   font-size: 18px;
}

.ms-Icon {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-weight: normal;
   font-size: 20px;
}

.prev-slide-navi-container-prevComment{
   padding-left: 11.5px;
   padding-right: 15.5px;
}
.next-slide-navi-container-nextComment{
   padding-left: 15.5px;
   padding-right: 11.5px;
}
.next-slide-navi-container-nextComment, .prev-slide-navi-container-prevComment{
   padding-top: 6.75px;
   padding-bottom: 6.75px;
   background: #FFFFFF;
   mix-blend-mode: normal;
   box-shadow: 0px 2px 8px rgba(49, 49, 49, 0.2);
   border-radius: 53px;
}

.slide-detailed-navigation-bar-container{
   display: flex;
   justify-content: space-between;
}
.slide-detailed-container{
    position: absolute;
    z-index: 2;
    padding-left: 16px;
    padding-right: 16px;
    width: calc(100vw - 32px);
}

.hide-slide-navi-button{
   visibility: hidden;
}

.hide-slide-detailed-navi-bar{
   display: none;
}

.slideShowCloseIcon-container-class
{
   width: 16px;
   height: 16px;
   overflow: hidden;
   display: inline-block;
   vertical-align: middle;
}


.per-slideShowCloseIcon-Image-class
{
   top: -101px;
   left: -247px;
   position: relative;
}

.font-16
{
   font-size: 16px;
}

/*SVG classes Starts*/
svg > path.OfficeIconColors_HighContrast:not([class*='OfficeIconColors_m']) {
   fill: transparent;
}

svg > path.OfficeIconColors_m20 {
   fill: rgba(250, 250, 250, 1.000);
}
svg > path.OfficeIconColors_m22 {
   fill: rgba(58, 58, 56, 1.000);
}
svg > path.OfficeIconColors_m24 {
   fill: rgba(30, 139, 205, 1.000);
}

/* SVG classes ends*/

.single-slide-image-class {
   width: 100%;
   height: 98%;
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.14), 0px 2px 2px rgba(0, 0, 0, 0.2);
}

.single-slide-shimmer-class {
   width: 100%;
   height: 98%;
}

/*No slide shimmer classes Starts*/

.br {
   border-radius: 8px;  
}

.w100 {
   width: 100%;
}

.w30 {
   width: 30%;
}

.shimmer-container {
   width: 0px;
   animation: fullView 0.5s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

.line {
   background: #777;
}

.two-lines-container {
   height: 100%;
   width: 100%;
   display: block;
}

.line-1 {
   float: left;
}

.line-2 {
   float: right;
}

@keyframes fullView {
   100% {
       width: 100%;
   }
}

.animate {
   animation : shimmer 2s infinite linear;
   background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
   background-size: 1000px 100%;
}

@keyframes shimmer {
   0% {
       background-position: -1000px 0;
   }

   100% {
       background-position: 1000px 0;
   }
}

/*No slide shimmer classes ends*/

.rtl-mobileweb-class .img-icon-container-class
{
   float: right;
}

.rtl-mobileweb-class .backIconContainer-class
{
   float: right;
}

.rtl-mobileweb-class .FlyOutAnchor-menu-itemText-class
{
    float: right;
    padding-left: unset;
    padding-right: 12px;
}

.rtl-mobileweb-class .comments-outer-container
{
   padding: 2px 15px 2px 2px;
}

.rtl-mobileweb-class .comment-card-child-class
{
   padding: 10px 5px 15px 10px;
}

.rtl-mobileweb-class .user-presence-class
{
   margin-left: 0px;
   margin-right: -15px;
}

.rtl-mobileweb-class .comments-navigation-bar-outer-container
{
   direction: ltr;
}

.rtl-mobileweb-class .comment-card-expanded-class::after, .comment-card-highlighted-deeplink::after
{
   border-left: unset;
   border-bottom-left-radius: unset;
   border-bottom-right-radius: 5px;
   border-right: 2px solid #979797;
   margin-left: unset;
   margin-right: -1px;
}

.rtl-mobileweb-class .comment-numChildrens-class
{
   text-align: right;
}

.rtl-mobileweb-class .comment-childThreadsPane-class
{
   margin-left: unset;
   margin-right: 25px;
}

.rtl-mobileweb-class .slide-detailed-navigation-bar-container{
   direction: ltr;
}
/* App header */

.app-mobile-header-container-class
{
   display: block;
   position: relative;
   width: 100%;
   flex-wrap: wrap;
   max-height: 60px;  
   min-height: 60px;  
   /* overflow-x: hidden; */
   border: solid 1px red;
   min-width:320px; /* we don't support less than this */
}

.app-mobile-header-grid-title-class {
   margin: 0px 20px 0px 20px;
   padding: 6px 0px 6px 0px;
   display: inherit;
   text-align: center;
   color: #B9492C;
   font-size: 16px;
   justify-self: center;
   overflow: hidden;
   text-overflow:ellipsis;
   white-space: nowrap;
   max-height: 22px; /* font-height and padding */
   min-height: 22px; /* font-height and padding */
}

.default-FontStyle{
   font-family: 'Segoe UI','Segoe UI Web', sans-serif;
}

.pptIconContainer-class
{
   max-width: 42px;
   float: left;
}

.headerV2-ppto-icon-class
{
   height: 26px;
   width: 26px;
   max-width: 26px;
   margin-left: 8px;
   margin-right: 8px;
}

.header-ss-icon-class
{
   width: 22px;
   height: 22px;
   max-width: 22px;
   max-height: 22px;
}

.slideNavHeader-class
{
   position: absolute;
   left: 50%;
   transform: translate(-50%);
   font-size: 16px;
   color: #252423;
}

.headerActionBar-class
{
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   text-align: center;
   display: inline-block;
}

.headerActionBar-hideToolBar-class {
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   text-align: center;
}

.dropDownId-FlyOutAnchor-main-panel-class, .refreshIconContainer-class, .editIconContainer-class,.slideShowIconContainer-class
{
   float: left;
   outline: none;
   margin-left: 20px;
}

.dropDownId-FlyOutAnchor-main-panel-class
{
   padding: 0px;
   margin-left: 10px;
   top: -8px;
   margin-right: 2px;
   border: none;
   background: none;
}

.headerActionBar-leftheader-class, .right-float-class{
   float: right !important;
}

.right-float-class
{
   margin-right: 12px;
}

.dropDownId-FlyOutAnchor-button-panel-class
{
   padding: 8px 10px 0px 10px;
   border: none;
}

.dropDownId-FlyOutAnchor-menu-class
{
   right: 5px;
}

.icon-disabled-class
{
   pointer-events: none;
   opacity: 0.4;
}

/** RTL for App Header starts here **/

.rtl-mobileweb-class .pptIconContainer-class
{
   float: right;
}

.rtl-mobileweb-class .dropDownId-FlyOutAnchor-main-panel-class, 
.rtl-mobileweb-class .refreshIconContainer-class, 
.rtl-mobileweb-class .editIconContainer-class,
.rtl-mobileweb-class .slideShowIconContainer-class
{
   float: right;
   margin-left: unset;
   margin-right: 20px;
}

.rtl-mobileweb-class .dropDownId-FlyOutAnchor-main-panel-class
{
   margin-left: 2px;
   margin-right: 10px;
}

.rtl-mobileweb-class .headerActionBar-leftheader-class, 
.rtl-mobileweb-class .right-float-class{
   float: left !important;
}

.rtl-mobileweb-class .right-float-class
{
   margin-right: unset;
   margin-left: 12px;
}

.rtl-mobileweb-class .img-icon-previous-class
{
   margin-left: 2px;
   margin-right: 12px;
}

.rtl-mobileweb-class .ms-Icon-prvw
{
   transform: scaleX(-1);
}

/** RTL for App Header ends here **/

/* App Header ends*/