/* Images 
-----------------------------------------------------------------------------*/

#rpLogo {
    background: url("/images/rpLogo.png");
    background: url("/images/rpLogo.svg"),linear-gradient(transparent, transparent);
    width: 50px;
    height: 50px;
    display: inline-block;
}

.defaultThumbnail {
    background: no-repeat center url("/images/defaultProfile.png");
    background-size: contain;
    width: 40px;
    height: 40px;
}

.upArrow {
    background: no-repeat center url("/images/arrow-upward.png");
    width: 12px;
    height: 12px;
    display: inline-block;
    position: relative;
    margin-right: 2px;
    top: 1px;
}

.downArrow {
    background: no-repeat center url("/images/arrow-downward.png");
    width: 12px;
    height: 12px;
    display: inline-block;
    position: relative;
    margin-right: 2px;
    top: 1px;
}

.pencilIcon {
    background: no-repeat center url("/images/pencil.png");
    width: 13px;
    height: 13px;
    display: inline-block;
    cursor: pointer;
}

.clipboardIcon {
    background: no-repeat center url("/images/clipboard.png");
    width:7px;
    height: 8px;
    display: inline-block;
    cursor: pointer;

    /*float: right;*/
    position: relative;
    top: -3px;
}

.tripleDotIcon {
    background: no-repeat center url("/images/tripleDot.png");
    width: 4px;
    height: 18px;
    display: inline-block;
    cursor: pointer; 
}

.plusFolderIcon {
    background: no-repeat center url("/images/plusFolder.png");
    width: 18px;
    height: 15px;
    display: inline-block;
    cursor: pointer;  
}

.moveIcon {
    background: no-repeat center url("/images/move.png");
    width: 15px;
    height: 15px;
    display: inline-block;
    cursor: pointer;  
}

.duplicateIcon {
    background: no-repeat center url("/images/duplicate.png");
    width: 14px;
    height: 14px;
    display: inline-block;
    cursor: pointer;  
}

.infoIcon {
    background: no-repeat center url("/images/info.png");
    width: 20px;
    height: 20px; 
    display: inline-block;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #rpLogo {
        background: url("/images/rpLogo@2x.png");
        background: url("/images/rpLogo.svg"),linear-gradient(transparent, transparent);
        background-size: contain !important;
        width: 50px;
        height: 50px;
        display: inline-block;
    }

    .defaultThumbnail {
        background-color: #199ED8;
        background-image: url("/images/defaultProfile@2x.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain !important;
        width: 40px;
        height: 40px;
    }

    .upArrow {
        background: no-repeat center url("/images/arrow-upward@2x.png");
        background-size: contain !important;
        width: 12px;
        height: 12px;
        display: inline-block;
        position: relative;
        margin-right: 2px;
        top: 1px;
    }

    .downArrow {
        background: no-repeat center url("/images/arrow-downward@2x.png");
        background-size: contain !important;
        width: 12px;
        height: 12px;
        display: inline-block;
        position: relative;
        margin-right: 2px;
        top: 1px;
    }
    
    .pencilIcon {
        background: no-repeat center url("/images/pencil@2x.png");
        background-size: contain !important;
        width: 13px;
        height: 13px;
        display: inline-block;
        cursor: pointer;
    }

    .clipboardIcon {
        background: no-repeat center url("/images/clipboard.png");
        background-size: contain !important;
        width: 7px;
        height: 8px;
        display: inline-block;
        cursor: pointer;
        /*float: right;*/
        position: relative;
        top: -3px;
    }

    .tripleDotIcon {
        background: no-repeat center url("/images/tripleDot.png");
        background-size: contain !important;
        width: 4px;
        height: 18px;
        display: inline-block;
        cursor: pointer;
    }

    .plusFolderIcon {
        background: no-repeat center url("/images/plusFolder.png");
        background-size: contain !important;
        width: 18px;
        height: 15px;
        display: inline-block;
        cursor: pointer;
    }

    .moveIcon {
        background: no-repeat center url("/images/move.png");
        background-size: contain !important;
        width: 15px;
        height: 15px;
        display: inline-block;
        cursor: pointer;
    }

    .duplicateIcon {
        background: no-repeat center url("/images/duplicate.png");
        background-size: contain !important;
        width: 14px;
        height: 14px;
        display: inline-block;
        cursor: pointer;
    }

    .infoIcon {
        background: no-repeat center url("/images/info.png");
        background-size: contain !important;
        width: 20px;
        height: 20px;
        display: inline-block;
    }


}

/*---------------------------------------------------------------------------*/


/* General page
-----------------------------------------------------------------------------*/
* {
	box-sizing: border-box;
}

body {
	font-family: proxima_novaregular, Helvetica, Arial;
	font-size: 12px;
	color: #000000;
    background-color: #EDEDED;
}

div {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

a {
	text-decoration: none;
	color: #009DC6;
}

a:hover {
	text-decoration: none;
	color: #999999;
}

img {
	border: none;
}

p, ul {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	font-size: 12px;
    line-height: 18px;
}

p.p1 {
    font-size: 12px;
    line-height: 18px;
}

p.p2 {
    font-size: 14px;
    line-height: 20px;
}

input[type='checkbox'] {
    width: 16px;
    height: 16px;
    background-color: #4a4a4a;
}

.watermark {
    color: #C2C2C2 !important;
    opacity: 1 !important;
}

/*---------------------------------------------------------------------------*/


/* Headings
-----------------------------------------------------------------------------*/
h1 {
    padding: 0px 0px 0px 0px;
	margin: 0px 0px 5px 0px;
	font-family: proxima_novaregular, Helvetica, Arial;
	font-size: 30px;
	color: #000000;
	font-weight: normal;
}

h2 {
    padding: 0px 0px 0px 0px;
	margin: 20px 0px 9px 0px;
	font-family: proxima_novaregular, Helvetica, Arial;
	font-size: 18px;
	color: #333333;
	font-weight: normal;
}
  
h3 {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	font-family: proxima_novaregular, Helvetica, Arial;
	font-size: 25px;
	color: #000000;
	font-weight: normal;
}

h4 {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	font-family: proxima_novaregular, Helvetica, Arial;
	font-size: 30px;
	color: #76B928;
	font-weight: normal;
}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
    margin-top: 0;
}

/*---------------------------------------------------------------------------*/


/* Page Layout
-----------------------------------------------------------------------------*/
#header {
    background-color: #EDEDED;
    height: 135px;
    width: 100%;
    -webkit-app-region: drag;
}

	#mainLogo {
		float: left;
		margin-top: 61px;
		margin-left: 43px;
	    position: absolute;
	}

	#profileRightSide {
		float: right;
		margin-top: 16px;
		margin-right: 26px;
	}

	#profileHeader {
	    float: right;
	    clear: both;
	    margin-right: 22px;
	}

	#profileThumbnail {
	    display: inline-block;
	    width: 40px;
	    height: 40px;
	    border-radius: 100px;
	    border: 1px solid #979797;

	    background-size: contain !important;
	}

	#profileHeaderInfo {
	    display: inline-block;
		font-family: proxima_novaregular, Helvetica, Arial;
	    position: relative;
	    top: -8px;
	    margin-left: 4px;
	}

	#username {
	    font-size: 18px;
	    color: #444444;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}

	#userEmail {
	    display: none;
	}

	#profileHeaderLinks {
	    line-height: 1.3;
	    /*padding-left: 1px;*/
	}

	#profileHeaderLinks a {
	    font-size: 12px;
	    color: #444444;
	    text-decoration: none;
	    cursor: pointer;
	}

	#profileHeaderLinks a:hover {
	    color: #4F8A81;
	    text-decoration: underline;
	}

	#topNav {
	    float: right;
	    clear: both;
	    padding-top: 53px;
	}

	.topNavItem a {
		font-family: proxima_novaregular, Helvetica, Arial;
	    font-size: 18px;
	    color: #848894;
	}

	ul.nav li {
		display: inline;
	    padding: 10px 16px 4px 16px;
	}

	ul.nav a:hover {
	    color: #444444;
	}

	.activeTab {
	    background-color: #FFFFFF;

	}

	.activeTab a {
	    color: #444444;
	}


#core {
    background-color: #FFFFFF;
    width: 100%;
    min-width: 1024px;
    padding-bottom: 82px;
}

    .pageHeader {
        margin-left: 43px;
        padding-top: 30px;
    }

    .pageContents {
        padding-top: 45px;
        margin-left: 43px;
        margin-right: 43px;
    }

    .pageSpecificContents {
        /*display: inline-block;*/
        display: table-cell;
        padding-left: 32px;
        width: 85%;
    }

    .pageSpecificHeader {
        font-size: 24px;
        color: #414141;
        height: 24px;
        line-height: 24px;
        margin-bottom: 5px;

        display: inline-block;
    }

    .pageBackground {
        background-color: #EDEDED;   
    }

    .pageBackgroundActive {
        background-color: #FFFFFF;
    }

    .container {
        border-radius: 3px;
        background-color: #FFFFFF;
        box-shadow: 0 2px 5px 1px #000000;
        box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.26);
    }

#footer {
    background-color: #EDEDED;
    height: 188px;
    width: 100%;
}
    
    #rpCopyright {
        margin-top: 57px;
        margin-left: 43px;
        float: left;
    }

    #copyrightInfo {
      display: inline-block;
      position: relative;
      top: -4px;
      width: 258px;
      margin-left: 24px;
      font-size: 11px;
      line-height: 18px;
      color: #323232;
    }

    #footerLinks {
        float: right;
        margin-right: 41px;
        margin-top: 37px;
    }

    #axureLinks, #legalLinks, #resourceLinks, #emailLinks {
        display: inline-block;
        float: left;
    }

    #axureLinksLabel, #legalLinksLabel, #resourceLinksLabel, #emailLinksLabel {
        font-family: proxima_novabold, Helvetica, Arial;
        font-size: 10px;
        line-height: 16px;
        width: 180px;
    }

    #axureLinks a, #legalLinks a, #resourceLinks a, #emailLinks a {
        color: #222222;
        font-size: 10px;
        display: block;
    }

    #axureLinks a:hover, #legalLinks a:hover, #resourceLinks a:hover, #emailLinks a:hover {
        color: #4F8A81;
    }

    #axureLinks0, #axureLinks1 {
        float: left;
        margin-right: 20px;
    }

    #axureLinks0, #axureLinks1,  #legalLinks0, #resourceLinks0, #emailLinks0 {
        line-height: 14px;
    }

.responsiveWidth {
    height: 100%;
    min-width: 1024px;
    max-width: 1200px;
    margin: 0 auto;
}

.electron-renderer #core,
.electron-renderer .responsiveWidth {
    min-width: unset;
}

.scroll-hidden::-webkit-scrollbar {
    display: none;
}
  
/*---------------------------------------------------------------------------*/


/* Buttons and Speech bubbles
-----------------------------------------------------------------------------*/

.axGreyBtn, .axGreenBtn, .axGreenRoundedBtn, .axRedRoundedBtn, .axGreyRoundedBtn, 
.axBlueRoundedBtn, .axWhiteRoundedBtn, .axPurpleRoundedBtn {
    font-size: 11px;
    color: #FFFFFF;
    cursor: pointer;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* IE/Edge */
    user-select: none;    
}

.axGreyContextBtn {
    font-family: proxima_novabold, Arial;
    font-size: 8.2px;
    color: #323232;
    cursor: pointer;
    padding: 3px 9px 3px 9px;
    text-align: center;
    display: inline-block;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* IE/Edge */
    user-select: none;    
}

.axGreyBtn:active, .axGreenBtn:active, .axGreenRoundedBtn:active, .axRedRoundedBtn:active, 
.axGreyRoundedBtn:active, .axBlueRoundedBtn:active, .axWhiteRoundedBtn:active, 
.axGreyContextBtn:active, .axPurpleRoundedBtn:active {
    background-color: #898989;
}

.axGreyBtn {
    background-color: #BFBFBF;
}

.axGreenBtn {
    background-color: #74BC68;
}
    
.axGreenRoundedBtn, .axRedRoundedBtn, .axGreyRoundedBtn, .axBlueRoundedBtn, .axPurpleRoundedBtn {
    text-align: center;

    border-radius: 5px;
    box-shadow: inset 0 -2px 0 0 #898989;
    box-shadow: inset 0 -2px 0 0 rgba(137, 137, 137, 0.58);
}

.axGreenRoundedBtn {
    background-color: #74BC68;
}

.axRedRoundedBtn {
    background-color: #D62839;
}

.axGreyRoundedBtn {
    background-color: #BFBFBF;
}

.axBlueRoundedBtn {
    background-color: #199ED8;
}

.axWhiteRoundedBtn {
    /*background-color: #D3D3D3;*/
    color: #000000 !important;
    border: 1px solid #D3D3D3;
    border-radius: 6px;
}

.axPurpleRoundedBtn {
    background-color: #B722B8;
}

.axGreyContextBtn {
    background-color: #FFFFFF;
    border: 1px solid #323232;
    border-radius: 3px;
}





div.axSpeechBubble, div.axGreenSpeechBubble, div.axPurpleSpeechBubble, div.axClearMsgBubble, div.axContextSpeechBubble {
    z-index: 2;
    position: absolute;
    text-align: left;
    padding: 10px;

    background-color: #FFFFFF;
    border-right: 0.5px solid #F2F2F2;
    border-left: 0.5px solid #F2F2F2;
    border-bottom: 0.5px solid #F2F2F2;

    box-shadow: 0 2px 4px 0 #000000;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 4px 0 #000000;
    -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

    div.axSpeechBubble:before, div.axGreenSpeechBubble:before, div.axPurpleSpeechBubble:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        top: -15px;
        border: 7px solid;
    }

div.axGreenSpeechBubble {
    width: 474px;
    /*height: 90px;*/

    border-top: 3px solid #74bc68;
}

    div.axGreenSpeechBubble:before {
        left: 230px;
        border-color: transparent transparent #74bc68 transparent;
    }

div.axPurpleSpeechBubble {
    width: 285px;
    /*height: 180px;*/

    border-top: 3px solid #B722B8;
}

    div.axPurpleSpeechBubble:before {
        left: 143px;
        border-color: transparent transparent #B722B8 transparent;
    }

div.axClearMsgBubble {
    max-width: 300px;
    text-align: center;
}

    div.axClearMsgBubble:before {
        border: none;
    }

    div.axClearMsgBubble span {
        margin: 2px;

        white-space: pre-wrap;
        white-space: -moz-pre-wrap; /* Firefox */    
        white-space: -pre-wrap;     /* Opera <7 */   
        white-space: -o-pre-wrap;   /* Opera 7 */    
        word-wrap: break-word;      /* IE */
    }


div.axContextSpeechBubble {
    position: absolute;
    padding: 0px;
    background: #FFFFFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: #7F7F7F solid 1px;
    text-align: center;
}

    div.axContextSpeechBubble:before {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 0 6px 6px;
        border-color: #7F7F7F transparent;
        display: block;
        width: 0;
        margin-left: -7px;
        top: -7px;
        left: 50%;
    }

    div.axContextSpeechBubble:after {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 0 5px 5px;
        border-color: #FFFFFF transparent;
        display: block;
        width: 0;
        margin-left: -6px;
        top: -5px;
        left: 50%;
    }

    div.axContextSpeechBubble span {
        font-size: 10px;
        margin: 5px;
    }

    .back-to-login-screen {
        border-radius: 4px;
        margin-left: 45px;
        margin-top: 20px;
    }
/*---------------------------------------------------------------------------*/


/* Loading Spinner 
-----------------------------------------------------------------------------*/

.spinner {
    width: 16px;
    text-align: center;
    display: inline-block;
}

    .spinner > div {
        width: 4px;
        height: 4px;
        background-color: #4BB1A6;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

.loadingSpinnerContainer {
    float: left;
    margin-top: 5px;
    margin-left: 2px;
}

/*---------------------------------------------------------------------------*/

/* Log In Page
-----------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------*/


/* Row Action Menu
 ----------------------------------------------------------------------------*/

.rowActionMenu {
    width: 175px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: left;

    z-index: 2;
    position: absolute;

    cursor: default;
    background-color: #FFFFFF;
    border: 1px solid #979797;
    box-shadow: 0 2px 4px 0 #000000;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.rowActionMenuOption {
    /*margin-left: 15px;*/
    font-size: 12px;
    line-height: 19px;
    cursor: pointer;
}

.rowActionMenuOption span {
    margin-left: 17px;
}

.rowActionMenuOption:hover {
    background-color: #D1E5F5;
}

/*---------------------------------------------------------------------------*/


/* Animated Loading Row Placeholder
   TODO: Move this into Site.css for axshare_mvc
-----------------------------------------------------------------------------*/

.timeline-item {
    background: #FFFFFF;
    padding: 10px;
    position: relative;
}

@keyframes placeHolderShimmer {
    0% {
        background-position: -1200px 0
    }

    100% {
        background-position: 1200px 0
    }
}

.animated-background {
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 200px;
    height: 65px;
    position: relative;
}

.background-masker {
    background: #FFFFFF;
    position: absolute;
}

    .masker0 {
        width: 20px;
        height: 45px;
        top: 30px;
    }

    .masker1 {
        width: 12px;
        height: 65px;
        left: 30px;
        top: 10px;
    }

    .masker2 {
        width: 203px;
        left: 42px;
        height: 10px;
        top: 25px;
    }

    .masker3 {
        width: 128px;
        height: 20px;
        left: 117px;
        top: 10px;
    }

    .masker4 {
        width: 203px;
        height: 10px;
        left: 42px;
        top: 42px;
    }

    .masker5 {
        width: 203px;
        height: 16px;
        left: 42px;
        top: 59px;
    }

    .masker6 {
        height: 65px;
        /*width: 523px;*/
        width: 600px;
        top: 10px;
        left: 245px;
    }

    .masker7 {
        height: 15px;
        width: 274px;
        top: 10px;
        left: 768px;
    }

    .masker8 {
        height: 15px;
        /*width: 92px;*/
        width: 42px;
        top: 25px;
        left: 1000px;   
    }

    .masker9 {
        width: 274px;
        height: 35px;
        left: 768px;
        top: 40px;
    }

/*---------------------------------------------------------------------------*/

.alert {
  position: relative;
  padding: 12px 20px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}