/* --- CSS for LinksPage and All LinkSourceType Pages --- */
/*--- in the order of how things appear on the page ---*/
  
/*--- css for addon pages goes here ---*/
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

/*--- Narrow Page CSS ---*/
     .bigholder { }
	 .main-addon-holder { margin:0 auto; width:100%; max-width:700px; text-align:left; }
	 .main-addon-usage-holder { width:100%; max-width:700px; text-align:left; }
	 .main-addon-first { margin-top:-140px; }
	 
	 .icon-camera-subtitle { width:20px; display:inline; opacity:0.8; vertical-align:-20%; padding-left:3px; }
	 .icon-camera-subtitle:hover { opacity:1; }
	 .icon-camera-text { width:15px; display:inline; opacity:0.8; vertical-align:0; padding-left:1px; }
	 .icon-camera-text:hover { opacity:1; }
	 .list-bump { padding-left:20px; }
	 .addon-two { display:inline; }
	 .addon-two-image { width:48%; display:inline; border:solid 1px #eee; }
	 .addon-twoimages-holder { padding-top:-10px; padding-bottom:40px; }
	 .addon-one-image { width:85%; }
	 .addon-single-image { width:90%; }
	 .addon-border-none { border:none }
	 .addon-first-panel { margin-top:120px; }

	 .addon-main-title { font-size:4rem; font-weight:900; line-height:4.2rem; text-align:center; padding-bottom:20px; padding-top:60px; }
	 .addon-main-subtitle { font-size:2rem; text-align:center; padding-bottom:20px; }
	 .addon-main-pricing { color:#ff3399; font-weight:900; text-align:center; padding-bottom:20px; }
	 .addon-main-button-div { text-align:center; margin-bottom:100px; }
	 .addon-main-button { text-align:center; width:50%; margin:0 auto; }
  	 
	 .addon-panel-title { font-size:4rem; font-weight:300; line-height:4.2rem; text-align:center; padding:0 0 20px 0; margin-top:100px; }
	 .addon-panel-text { font-size:1.6rem; line-height:2.2rem; margin-bottom:40px; text-align:left; padding:0 2px 20px 0; }
	 .addon-panel-subtitle { font-size:2rem; font-weight:700; line-height:2.5rem; padding:0 0 5px 0; }

	 .addon-panel-pricing-title { margin:0 auto; text-align:center; font-weight:400; font-size:2rem; padding:10px 0; }
     .addon-panel-pricing-subtitle { margin:0 auto; text-align:center; font-weight:900; font-size:2rem; padding:10px 0; color:#ff3399; }
     .addon-panel-pricing-subtitle-last { margin:0 auto; text-align:center; font-weight:400; font-size:2rem; padding:10px 0; }
     .addon-panel-pricing-now { margin:0 auto; text-align:center; font-weight:400; font-size:2rem; padding:10px 0; }
     .addon-panel-pricing-bold { margin:0 auto; text-align:center; font-weight:900; font-size:3.5rem; padding:10px 0; }
     .addon-panel-pricing-smallbold { margin:0 auto; text-align:center; font-weight:900; font-size:2.5rem; padding:10px 0; }
     .addon-panel-pricing-smalltext { margin:0 auto; text-align:center; font-weight:400; font-size:1.4rem; padding:0 0 10px 0; }


	 .addon-media-full { width:100%; padding-bottom:40px; text-align:center; }
	 .addon-media-notfull { width:100%; text-align:center; padding:0 10px; }
	 .addon-media-border { border:solid 1px #efefef; border-radius:2px; }
	 .addon-image-full { width:100%; text-align:center; }
	 .addon-image-half { width:50%; text-align:center; }
	 .addon-image-small { width:400px; text-align:center; }
	 .addon-image-max { max-width: 1100px; }
	 .addon-image-max2 { max-width: 900px; }
	 .addon-image-max600 { max-width: 600px; }
	 .addon-image-max500 { max-width: 500px; }
	 .addon-image-max400 { max-width: 400px; }
	 
	 .addon-image-border { border: solid 1px #ccc; }
	 .addon-image-context { font-size:1.1rem; }
	 .addon-main-image { width:70%; text-align:center; border:solid 1px #efefef; }

	 /*--- Code holder CSS for Agent page and others ---*/
	 .addon-code-holder { overflow:auto; font-size:1.2rem; background-color:#ddd; padding:20px 10px; font-family: "Lucida Console", Monaco, monospace; margin:20px 0; width:100%; }
	 .addon-code-title { font-size:1.6rem; font-weight:700; padding-bottom:10px; }
     .addon-code-r1 { width:100px; }
     .addon-code-r2 { }

	 
	 #usageguide { margin-top:120px; }
	 .addon-usage-maintitle { font-size:3rem; font-weight:500; line-height:4.2rem; text-align:center; padding-bottom:20px; margin-top:150px; }
     .addon-usage-title { }
     .addon-usage-text { padding-bottom:20px; }
     .addon-usage-media { text-align:left; }

/*--- Addon chat button on bottom of page ---*/
     .addon-chatbottom-button { width:150px; height:25px; border:1px solid #bbb; background-color:#fff; position:fixed; bottom:0; left:50px; z-index:100; border-top-left-radius:2px; border-top-right-radius:2px; padding-top:10px; }
     .addon-chatbottom-button:hover { color:#ddd; background-color:#efefef; }
     .addon-chatbottom-text { color:#333; text-align:center; vertical-align:50%; }
   	
   	 #faqs { padding-top:20px; }	
   
   /*--- RIGHT ALIGNED ADD-ON PAGES ---*/
	 .mini-os { display:inline; width:20px; padding-top:5px; padding-left:3px; vertical-align:-20%; }
	 .mini-button { display:inline; width:20px; padding-top:5px; padding-left:3px; vertical-align:-35%; }

/*.ui-accordion .ui-accordion-header { text-align:center; }*/

 .ui-accordion .ui-accordion-content { padding:10px 0 25px 0; }
  #purchaseform{
	width:100%;
	margin:0 auto;
	padding-top:40px;
  }
  #purchaseform .dialog-layout{ padding:40px; width:360px; margin:0 auto; background: #fff; color:#333; border-radius: 10px; text-align:center;} /* -- No border on mobile + full background --*/
  #purchaseform .dialog-centered-layout{ padding:40px; width:360px; margin:0 auto; background: #fff; color:#333; border-radius: 10px; text-align:center;} /* -- No border on mobile + full background --*/
  #purchaseform .backup-dialog-layout{ padding:40px; width:500px; margin:0 auto; background: #fff; color:#333; border-radius: 10px; text-align:center;} /* -- No border on mobile + full background --*/
  #purchaseform .information-text{ padding:0 0 20px 0; width:500px; margin:0 auto; background: #fff; color:#333; text-align:left;} /* -- No border on mobile + full background --*/
  #purchaseform .spacemembership-dialog-layout{ padding:40px; width:650px; margin:0 auto; background: #fff; color:#333; border-radius: 10px; text-align:center;} /* -- No border on mobile + full background --*/
  #purchaseform .spaceinvite-dialog-layout{ padding:40px; width:650px; margin:0 auto; background: #fff; color:#333; border-radius: 10px; text-align:center;} /* -- No border on mobile + full background --*/
  #purchaseform .dialog-thankyou-layout{ padding:40px; width:360px; margin:0 auto; background: #fff; color:#333; border-radius: 10px; text-align:center;} /* -- No border on mobile + full background --*/
  #purchaseform .enable-addon-dialog-layout {padding:40px; width:360px; margin:0 auto; background: #fff; color:#333; border-radius: 10px; text-align:center; }
  #purchaseform .enable-addon-dialog-layout .title { color:#333; font-size:2.4rem; font-weight:300; text-align:center; margin-top:-20px; padding-bottom:15px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
  #purchaseform .enable-addon-dialog-layout .sub-title {color:#333; font-size:1.4rem; font-weight:400; text-align:center; padding-bottom:20px; width:100%;}
  #purchaseform .title {color:#333; font-size:2.4rem; font-weight:300; text-align:center; margin-top:-20px; padding-bottom:15px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
  #purchaseform .sub-title {text-align:justify; padding-bottom:20px; width:100%; white-space: pre-wrap;}
  #purchaseform .dialog-centered-layout .sub-title {text-align:center; padding-bottom:20px; width:100%;}
  #purchaseform .post-button-text {padding-top:15px; margin-bottom:-10px;}
  #purchaseform .context{ font-size:11px; color:#aaa; margin:-8px; padding-bottom:20px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
  #purchaseform .error{ font-size:1.4rem; color:red; padding:0 10px 20px 10px;}
  #purchaseform .input-title{ font-size:1.1rem; color:#999; padding-left:10px; text-transform:uppercase; text-align:left; padding-bottom:1px;}
  #purchaseform .textarea-title{ font-size:1.1rem; color:#999; padding-left:10px; text-transform:uppercase; text-align:left; padding-bottom:1px;}
  #purchaseform .input-row { color:#333; background: #fff; font-size:2rem; display:block; margin-bottom:15px; font-weight:300; padding-right:5px;}
  #purchaseform .multi-value-input {display: flex;}
  #purchaseform .input-checkbox-row {color:#333; background: #fff; font-size:2rem; display:flex; margin-bottom:15px; font-weight:300;}
  #purchaseform .input-row > input { border:solid 1px #ccc; width: 100%; font-weight:300; }
  #purchaseform .input-row input:focus { outline: none; border:solid 1px #45a0c4;}
  #purchaseform .input-row .no-input-text-field { text-align: left; padding-left: 9px; width: 100%; font-weight:300; }
  #purchaseform .textarea-row { color:#333; background: #fff; font-size:2rem; display:block; margin-bottom:20px; font-weight:300;}
  #purchaseform .textarea-row > textarea { border:solid 1px #ccc; width: 100%; font-weight:300; }
  #purchaseform .textarea-row textarea:focus { outline: none; border:solid 1px #45a0c4;}
  #purchaseform .spaces-email-textarea-row { color:#333; background: #fff; font-size:2rem; display:block; margin-bottom:20px; font-weight:300; }
  #purchaseform .spaces-email-textarea-row > textarea { border:solid 1px #ccc; width: 100%; font-weight:300; }
  #purchaseform .spaces-email-textarea-row textarea:focus { outline: none; border:solid 1px #45a0c4;}
  #purchaseform .formbutton { text-align:center; margin-top:10px; margin-bottom:0; }
  #purchaseform .formbutton .disabled { opacity: 0.6; }
  #purchaseform .formbutton .submitting { opacity: 0.6; }
  #purchaseform .cancel {text-align:center; padding-top:20px; margin-bottom:0;}
  #purchaseform .process-action-status { color:#333; font-size:2.0rem; font-weight:300; text-align:center; padding-bottom:40px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

  #purchaseform .spacemembership-dialog-layout .close { text-align: right; color:#51b7e0; font-size:2.0rem; font-weight:700; margin-top:-25px; margin-right: -15px; cursor: pointer; }
  /*.main-dialog-title mimics the #pagetitle in the odrive.css*/
  #purchaseform .spacemembership-dialog-layout .main-dialog-title {
    font-size:3rem;
    font-weight: 300;
    padding: 15px 10px 40px 10px;
    text-align: left;
  }
  #purchaseform .spacemembership-dialog-layout .title { text-align: center; color:#333; font-size:1.8rem; font-weight:300; padding-bottom:15px}
  #purchaseform .spacemembership-dialog-layout .actionbar { border-bottom: 1px solid #ccc; }
  #purchaseform .spacemembership-dialog-layout .addmembers { text-align: right; color:#51b7e0; font-size:11px; text-transform:uppercase; font-weight:400; cursor: pointer; padding-bottom: 20px; }

  #purchaseform .spaceinvite-dialog-layout .title { text-align: center; color:#333; font-size:2.4rem; font-weight:300; padding-bottom:15px}
  #purchaseform .spaceinvite-dialog-layout .textarea-row > textarea { border:solid 1px #ccc; width: 100%; font-weight:300; height:250px; }

  .purchase-thankyou-title {color:#333; font-size:4.2rem; font-weight:300; text-align:center; margin-top:0; padding-bottom:15px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
  .purchase-thankyou-title-medium {color:#333; font-size:3.2rem; font-weight:300; text-align:center; margin-top:0; padding-bottom:15px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
  .purchase-thankyou-subtitle {color:#333; font-size:1.4rem; font-weight:400; text-align:justify; padding-bottom:25px; width:100%;}
  .purchase-thankyou-subtitle-center {color:#333; font-size:1.4rem; font-weight:400; text-align:center; padding-bottom:15px; width:100%;}
  .purchase-thankyou-image-div { }
  .purchase-thankyou-image-img { width: 100%; margin-bottom: 20px; }
  .purchase-enable-title {color:#333; font-size:2.4rem; font-weight:500; text-align:center; margin-top:0; padding-bottom:15px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
  .purchase-enable-subtitle {color:#333; font-size:1.4rem; font-weight:400; text-align:justify; padding-bottom:25px; width:100%;}
  .button-purchase-thankyou { width:200px; margin-top:0;}
  .button-purchase-thankyou .submitting { opacity: 0.6; cursor: none; }

  #trialstatusbutton{
	padding: 35px 15px 20px 15px;
  }

  #trialstatusbutton .expire-text {color: #333; font-size:1.4rem; font-weight: 700; padding-bottom: 5px;}
  #trialstatusbutton .upgrade-text {color: #333; font-size:1.4rem; font-weight: 400; padding-bottom: 5px;}
  #trialstatusbutton .button-cancel-trial {color: #51b7e0; font-size:1.4rem; font-weight: 400;}
  #trialstatusbutton .subscriptions-text {padding-top:15px; font-size:1.2rem; font-weight:400; line-height:2rem; }

/*--- Universal ---*/
.bottomspace { padding-bottom:20px; }

/*--- Cancellation modal code ---*/
#cancelScreen:target, #cancelScreen:target + #editCover{ display:block; opacity:1; }
#linkform .dialog-layout-cancelation { padding:40px; }
#linkform .dialog-layout-cancelation { width:360px; margin:0 auto; background: #fff; color:#333; border-radius: 10px; text-align:center;} /* -- No border on mobile + full background --*/
#linkform .dialog-layout-cancelationconfirm { padding:40px; }
#linkform .dialog-layout-cancelationconfirm { width:360px; margin:0 auto; background: #fff; color:#333; border-radius: 10px; text-align:center;} /* -- No border on mobile + full background --*/
#linkform .dialog-layout-cancelationconfirm .confirm-cancel-title {color:#333; font-size:3.0rem; font-weight:300; text-align:center; margin-top:0; padding-bottom:15px;}
#linkform .dialog-layout-cancelationconfirm .confirm-cancel-subtitle {color:#333; font-size:1.4rem; font-weight:400; text-align:center; padding-bottom:25px; width:100%;}

.radio-holder { text-align:left; font-size:1.4rem; font-weight:400; margin-bottom:13px; } 
.input-cancel-title { font-size:1.8rem; font-weight:400; text-align:left; padding-bottom:5px; padding-top:10px; }
.radio-button { width:1rem; margin-right:10px; vertical-align:3%; }
.radio-textarea { height:275px; font-size:1.4rem; font-weight:400; }


/*--- Join Space CSS ---*/
.join-title { font-size:4rem; font-weight:300; line-height:4rem; }
.join-subtitle { font-size:2.5rem; font-weight:300; line-height:3rem; padding-top:10px; }
.join-instructions { padding-top:40px; max-width:500px;  }
.join-button { padding-top:40px; }
.odrivecolor { color:#fff; background-color: #51b7e0; border:none;  }
.odrivecolor:hover { color:#fff; background-color: #0FA0CE; border:none; }
.button-control { }
.button-control:disabled { border: none; cursor: progress; opacity:0.4; color:#fff; background-color: #0FA0CE; }
.join-bold { font-weight:900; }

/*--- SPECIAL FOR UNIFIED ACCESS FEATURES PAGE ---*/
#supported-storage { padding:0 0 100px; }
#supported-storage .box { margin:0 auto; width:90%; }
#supported-storage .invisy { visibility:hidden; }
#supported-storage .subtitle { font-size:2rem; font-weight:700; }
#supported-storage .tablespacer { padding:0 5px 20px 5px; }
#supported-storage .e-holder-holder { margin-left:-62px; }
#supported-storage .everything-holder { margin:0 auto; text-align:center; width:100%; }
#supported-storage .thumb { display:inline; padding:0 0 0 62px; margin-top:20px; }
#supported-storage .link-container { color:#333; border-radius: 10px; border:solid 1px #e1e8ed; background: #fff; padding:5px; width:50px; height:50px; margin-top:20px; }
#supported-storage .link-container:hover { border:solid 1px #ccd6dd; }


/*---- Media tags ----*/

@media (min-width: 320px) {
    #linkform .dialog-layout-cancelation { width:300px; }
    .radio-textarea { height:100px; }
    .addon-panel-title { padding:0 20px 20px 20px; }
    .addon-panel-text { padding:0 20px 20px 20px; }
    .addon-panel-subtitle { padding:0 20px 5px 20px; }

    /*--- Link/Edit form module ---*/
    #purchaseform { padding:20px 0 0 0; }
    #purchaseform .dialog-layout{ width:320px; padding-top:20px; }
    #purchaseform .backup-dialog-layout{ width:500px; padding-top:20px; }
    #purchaseform .spacemembership-dialog-layout{ width:650px; padding-top:20px; }
    #purchaseform .spaceinvite-dialog-layout{ width:650px; padding-top:20px; }
    #purchaseform .dialog-thankyou-layout{ width:360px; padding-top:20px; }
    #purchaseform .enable-addon-dialog-layout { width:320px; padding-top:20px; }
    #purchaseform .title {color:#333; font-size:1.8rem; font-weight:300; text-align:center; padding-bottom:15px;}
    #purchaseform .input-title{ font-size:.8rem; color:#999; padding-left:10px; text-transform:uppercase; text-align:left; padding-bottom:1px;}
    #purchaseform .textarea-title{ font-size:.8rem; color:#999; padding-left:10px; text-transform:uppercase; text-align:left; padding-bottom:1px;}
    #purchaseform .input-row > input { border:solid 1px #ccc; width: 95%; font-weight:400; }
    #purchaseform .input-row { color:#333; background: #fff; font-size:1.2rem; display:block; margin-bottom:8px; font-weight:400;}
    #purchaseform .textarea-row > textarea { border:solid 1px #ccc; width: 100%; font-weight:400; }
    #purchaseform .textarea-row { color:#333; background: #fff; font-size:1.2rem; display:block; margin-bottom:8px; font-weight:400;}
    #purchaseform .formbutton { text-align:center; margin-top:10px; }
    #purchaseform .cancel {text-align:center; padding-top:10px; margin-bottom:0;}

    #trialstatusbutton{ padding:0 0 20px 0; }
  
    .addon-two-image { width:90%; display:inline; border:solid 1px #eee; }
    .addon-one-image { width:90%; }
}/*--- End 320px ---*/

@media (min-width: 400px) {
    #linkform .dialog-layout-cancelation { width:360px; }
    .radio-textarea { height:100px; }
}/*--- End 400px ---*/

@media (min-width: 550px) {
    #linkform .dialog-layout-cancelation { width:360px; }
    .radio-textarea { height:200px; }

/* --- Link/Edit forms module --- */
    #purchaseform .dialog-layout{ padding:40px; }
    #purchaseform .backup-dialog-layout{ padding:40px; }
    #purchaseform .spacemembership-dialog-layout{ padding:40px; }
    #purchaseform .spaceinvite-dialog-layout{ padding:40px; }
    #purchaseform .dialog-thankyou-layout{ padding:40px; }
    #purchaseform .enable-addon-dialog-layout{ padding:40px; }
    #purchaseform .title {color:#333; font-size:2.4rem; font-weight:300; text-align:center; padding-bottom:15px;}
    #purchaseform .input-title{ font-size:1.1rem; color:#999; padding-left:10px; text-transform:uppercase; text-align:left; padding-bottom:1px;}
    #purchaseform .textarea-title{ font-size:1.1rem; color:#999; padding-left:10px; text-transform:uppercase; text-align:left; padding-bottom:1px;}
    #purchaseform .input-row > input { border:solid 1px #ccc; width: 100%; font-weight:300; }
    #purchaseform .textarea-row > textarea { border:solid 1px #ccc; width: 100%; font-weight:300; }

    #trialstatusbutton { float:right; text-align:right; clear:none; max-width:40%; padding-top:35px; }
}/*--- End 550px ---*/

/*--- Old code - should be removed after all pages are updated ---*/
/*--- AddonsPage CSS here ---*/

@media (min-width: 590px) {

}/*--- End 590px ---*/

@media (min-width: 600px){
    #purchaseform { padding:40px 0 0 0; }
    .addon-two-image { width:48%; display:inline; border:solid 1px #eee; }
    .addon-one-image { width:65%; }
}/*--- End 600px ---*/

@media (min-width: 750px) {
    .addon-panel-title { padding:0 0 20px 0; }
    .addon-panel-text { padding:0 0 20px 0; }
    .addon-panel-subtitle { padding:0 0 5px 0; }

    #linkform .dialog-layout-cancelation { width:700px; }
    .radio-textarea { height:300px; }
    #purchaseform .input-row { color:#333; background: #fff; font-size:2rem; display:block; margin-bottom:15px; font-weight:300;}
    #purchaseform .textarea-row { color:#333; background: #fff; font-size:2rem; display:block; margin-bottom:15px; font-weight:300;}
    .addon-image-progsync { margin:-50px 0 -50px 0; }

    #supported-storage .everything-holder { width:100%; }
    #supported-storage { padding:0 0 120px; }
    #supported-storage .box { margin:0 auto; width:90%; }
}/*--- End 750px ---*/

@media (min-width:900px) {
    #supported-storage .everything-holder { width:100%; }

}/*--- End 900px ---*/

@media (min-width: 1000px) {
    .addon-image-progsync { margin:-100px 0 -100px 0; }
    #supported-storage { padding:0 0 180px; }
    #supported-storage .box { margin:0 auto; width:90%; }
    #supported-storage .everything-holder { width:100%; }
}/*--- End 1000px ---*/

@media (min-width: 1200px) {
    .addon-image-progsync { margin:-150px 0 -150px 0; }
}/*--- End 1200px ---*/

/*--- Specifically for links in link and addon accordions ---*/
.linky { color:#51b7e0; }
.linky:hover { color: #0FA0CE; }