/****************************************************/
/*******************  style.css   *******************/
/****************************************************/


/*****  Background/Title *****/
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,600,700');
html{zoom:0.925; background:#f4f6f9; }
body{font-family: 'Open Sans ', sans-serif;  transition: 0.15s; overflow:hidden; opacity:0; margin:0; background:#f4f6f9;}
#scroll{ position: absolute; width:100%; height:100%; overflow-y: scroll; }
#pageContainer{ position: relative; min-height: 100%; padding-bottom: 225px; box-sizing: border-box; }
.unselectable {-webkit-touch-callout: none;  -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
::placeholder{color:#ababab;}
::-webkit-scrollbar-track{ border-radius: 2px; background-color: #FFFFFF; cursor:pointer;}
::-webkit-scrollbar{ height:12px; width: 7px;  background-color: #FFFFFF; }
::-webkit-scrollbar-thumb{ border-radius: 2px; background-color: #bbb; }
.button, button{ font-family: 'Montserrat', sans-serif; background-color: #0070d2; border:1pt solid #0070d2; font-size:13px; transition: 0.1s; border-radius: 2px; text-align: center; min-height: 35px; color:white; font-weight:600;
vertical-align: baseline; padding: 15px 20px; margin-right: 25px; cursor:pointer;  outline:none; text-decoration: none; position: relative;  z-index: 10; -webkit-font-smoothing: antialiased;}
.button:hover, button:hover{ background-color:#005fb2; }
.secondary-button{ background: white; color: #0070d2; border-color:#dddbda;}
.secondary-button:hover{ background: #f5f5f6;  color: #005fb2; }


/*****  Header *****/
#banner{ background: #061c3f; padding:35px 100px; display: flex; align-items: center; }
.main-title{font-size:18px; text-transform:uppercase; letter-spacing:4px; margin-left:25px; color:white;}
#main-sub{letter-spacing:0px; font-size:18px; color:#9a9c9e; margin-left:150px; margin-bottom: 10px; margin-right: 300px;}
.vert-div{ margin-left:35px; background:linear-gradient(to bottom, rgba(255,255,255,0), white, rgba(255,255,255,0));  width:1px; height:50px;}
#announcement{ position:absolute; display:inline-block; margin-left:25%; width:50%; font-size:1.2em; padding:12px 0px; text-align: center; background:#00bee8; 
color:white; border-radius:0px 0px 50px 50px;  }	  
#announcement span{ color: #FFF59D; font-weight: bold; }


/*****  Subheader *****/
#subheader{ background: white; padding:40px 150px; align-items: center;  border-bottom:2px solid #d9dde6; box-sizing: border-box;}
#backButton{color: #009ddb; cursor:pointer; font-size:17px; display: inline-block; font-weight: bold; }
#backButton:hover{ color:#0070d2; }
#backButton i{transition: 0.15s;}
#backButton:hover i{margin-right:5px; margin-left:-5px;}
#subheader-title{ font-size: 27px; font-weight:bold; color:#061c3f; margin-top:25px; letter-spacing: 1px; }
#subheader-desc{ font-size:17px; color:#061c3f; margin-top:5px;}


/*****  Footer *****/
#footer{ color: white;  text-align: center; background: #061c3f; box-sizing: border-box; position: absolute; bottom:0px; width: 100%;
padding:70px 100px; background:url('static/footer.svg') 50%; background-size: cover; }
#footer a{ font-size:12px; background: rgba(255,255,255,1); padding:12px 25px; border-radius: 4px; font-weight: bold;
color:#0070d2 !important; text-decoration: none; border:1px solid #dddbda;  }
#footer a i{margin-right: 8px;}


/*****  Login Form *****/
#logo-sub{font-size:12px; color:gray; margin-left:185px; margin-top:-20px;}
.login-container{width:350px; position:absolute; right:15%; top:20%; margin-top:30px; filter:grayscale(100%);}
form input{width:100%; font-family: 'Montserrat', sans-serif; font-size:16px; border:1px solid #bbb; line-height: 50px; padding-left:10px; border-radius:2px; 
outline:none; height:50px; margin-top:20px;}
form input:focus{ border-color:#00bee8; border-width:2px; padding-left:9px; }
form input::placeholder{color:#ababab;}
form button{ font-family: 'Montserrat', sans-serif; background-color: #00bee8; font-size:14px; transition: 0.1s; border-radius: 2px; text-align: center; min-height: 35px; color:white; font-weight:600; border:0;  vertical-align: baseline; padding: 15px 30px; margin-top: 20px; cursor:pointer; border:none; outline:none; text-decoration: none; width:100%;}
form button:hover{ background-color:#0a87c6; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}


/*****  Profile/Options *****/
#profileButton{position:absolute; z-index:15; top:38px; right:120px; background-color: white; color:#706e6b; color:#16315c; border:1px solid #dddbda;
font-weight: bold; font-size:14px; padding:10px 13px; text-align: center; border-radius: 5px; cursor:pointer;}
#profileButton:hover{background-color: #fafafa; color:#005fb2;}
#profileDropdownContainer{position:absolute; z-index:15; top:45px; padding-top:30px; right:120px; visibility: hidden; }
#profileDropdown{ box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1); border:1px solid #dddbda; background-color: white; visibility: hidden;  border-radius: 5px; padding-top: 15px; padding-bottom: 15px;  width:calc(270px);}
.dropdown-item{ position:relative; width:200px; font-size:13px; letter-spacing:1px; text-transform: uppercase; line-height: 50px; height:50px; padding-left: 70px;  color:#706e6b; font-weight: bold; cursor: pointer;}
.dropdown-item:hover{background-color: #fafafa; color:#0070d2;}
.options-icon{ position: absolute; left:10%; line-height: 50px; }
.support-text{font-size:20px; margin:50px 150px; line-height:3;}
.support-text i{font-size:50px; color:#00bee8; padding-right:50px; cursor:pointer;}
.support-text i:hover{color:#0a87c6;}


/*****  Home Control Bar *****/
#controlBar{ overflow-x: hidden;  padding:35px 0px 15px 145px; background-image: url("static/banner.png"); background-size: cover;}
#controlBar::-webkit-scrollbar-thumb{ border-radius: 1px; background-color: transparent; }
#controlBar::-webkit-scrollbar{ height:1px; width: 9px;  background-color: transparent; }
#controlBar::-webkit-scrollbar-track{ border-radius: 1px; background-color: transparent; }
.demo-search{ font-family: 'Montserrat', sans-serif; font-size:16px; border:1px solid #dddbda; font-weight: 500; min-width: 325px; margin-left: 145px; border-radius:2px; 
line-height: 49px; display:inline-block; height:49px; padding-left:10px; outline:none; background: transparent;  background: white;  }
.demo-search:focus{ border-color:#0070d2; border-width:2px; padding-left:9px; }
.fa-search{ position: relative; z-index: 100 }
#controlBar .demo-search{ padding-left:45px; }
#controlBar .demo-search:focus{ padding-left:44px; padding-right: 40px; }
.fa-backspace{ color:#cdcdcd; margin-left:-40px; cursor:pointer; margin-right:20px;}
.search-placeholder{ margin-left:25px; color: #b4b4b4; margin-right: -40px; }
#demoSearchSuggestions{ box-shadow: 0px 0px 10px -3px rgba(0,0,0,.2); background-color: white; position:absolute; top:197px; left:150px; z-index:100;
visibility: hidden;  border-radius: 1px 1px 10px 10px; padding: 15px 0px 20px;  width:300px;  border:1px solid #dddbda;}
.search-suggestion-item{ color:#78909C; font-size:14px; font-weight: bold; padding:10px 0px; cursor:pointer; }
.search-suggestion-item i{ margin-left:20px; margin-right:10px; }
.search-suggestion-item:hover{ background-color: #fafafa; }
.sticky{position: fixed; top:0; left:0; padding:20px 8px; padding-left:0px; background-color: white; z-index: 12; width: 100%; box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.65)}
#demoSearch:active #demoSearchSuggestions{visibility: visible;}

/*****  Home Containers *****/
#useCases, #prototypes, #visualThemes, #customWidgets{display: flex; margin-left: 130px; max-width: 100%; overflow-x: auto; margin-top: 50px; margin-bottom: 100px; opacity:0; 
display: none; transition: 0.25s; z-index:1; flex-wrap:wrap;  }
#useCases{display: flex; opacity:1;  width: calc(97.5% - 130px); margin-left:135px;  margin-top:30px; overflow-y:hidden;}
#themesPicker{display:flex; width:95%; overflow-x: auto; }
#prototypes{ margin-top:40px; margin-left:135px;}
#customWidgets{ width: calc(90% - 140px); margin-left:139px;  margin-top:45px;}


/*****  Demo Tiles *****/
.demo-card{z-index:1;  cursor:pointer; color:white; margin:15px;  width:340px; min-width: 300px; height:130px; border-radius: 5px; overflow: hidden;  background:white;  perspective: 25px; transition: 0.2s ease; 
position: relative; border:1px solid #dddbda; transform-style: preserve-3d; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1); }
.demo-card-top{height:100%; background: white;}
.demo-card-top-image{ background-image:url("demos/B2B_Demo.JPG");  background-color:#ababab; border-radius:50px; background-size:cover; position:absolute; right:20px; bottom:15px; 
height: 60px; width:60px;  border:1px solid #dcdcdc; }
.demo-card-top-button{ color:transparent; position:absolute; right:19px; bottom:14px; height: 60px; line-height:60px; text-align:center; width:60px; border-radius: 60px; font-size:13px; font-weight:bold;
transform: scale(1.12); color:white; background: #444f5d; border:2px solid white; opacity:0; transition:0.2s; background:rgba(0, 112, 210,0.65);}
.demo-card-top-text{position:absolute; font-family:"Open Sans", sans-serif; text-align:left; font-size:18px; top:0px; white-space: nowrap; left:0px; font-weight: 700; transition:0.2s ease;  width:calc(100% - 40px); 
overflow:hidden; text-overflow: ellipsis;  padding:10px 20px; color:black; padding-top:15px;}
.demo-card-top-text div{ white-space: pre-line; color:#90A4AE; color:black; font-size:13px; font-weight:400; height:26px; width:75%; margin-top:8px; }
.demo-card:hover{ box-shadow: 0px 0px 12px rgba(0,0,0,0.15); transform: translateY(-3px);  }
.demo-card:hover .demo-card-top-image{transform: scale(1.1); filter:brightness(45%); }
.demo-card:hover .demo-card-top-button{ opacity:1; }
.demo-card-tags{ position: absolute; bottom:15px; left:0px; color:#97a7b8; font-size:13px; font-weight: 600;}
.demo-card-tags i{ margin-left:20px; margin-right:10px; }
.tag-orange{ color:#ff9966; }
.tag-blue{ color:#68cbe7; }
.tag-green{ color:#a6de55; }
.tag-purple{ color:#b47fec; }


/*****  Prototype Collections *****/
.prototypeTile{z-index:1; background:white;  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);  margin:15px; cursor:pointer; font-weight: 600; border:1px solid #dddbda; 
color:black; font-size:18px; text-decoration: none; overflow:hidden; transition:0.2s; padding:30px;  transform-style: preserve-3d;
width: 450px; position: relative; border-radius:5px;}
.prototypeNew{ background-color: tomato; color:white; padding:5px; border-radius: 20px; position: absolute; top:20px; right:20px; font-size:10px; }
.prototypeTile:hover{ box-shadow: 0px 0px 6px rgba(0,0,0,0.15); transform: translateY(-3px);  }
.prototypeTile img{ border:1px solid #ababab; border-radius:5px; }
.prototypeTitle{ font-size:14px; margin-top:20px; font-weight: 300;}
.prototypeStars{color:#00bee8; font-size:14px; letter-spacing: 3px; margin-bottom: 10px;}
.prototypeDate{color:#ababab; font-size:12px; font-style: italic;}
.prototypeButton{ color:#00bee8; margin-top:20px; font-size:15px;}
.prototypeButton:hover{ color:#003E8B; }
.prototypeButton span{float:right;}

/*****  Theme Collections *****/
.themeTile{z-index:1; padding:5px; background-color:white; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1); border-radius: 5px; margin:10px; cursor:pointer; font-weight: 600; 
color:#061c3f; font-size:12px; text-decoration: none; border:1px solid #dddbda; transition:0.2s; transform-style: preserve-3d;} /*min-width:190px; height:200px; overflow:hidden; padding-bottom:5px;}*/
.themeTile:hover{ box-shadow: 0px 0px 6px rgba(0,0,0,0.15); transform: translateY(-3px);  }
.themeImage{height:200px; width:190px; object-fit: cover; }
.top-bar{width:calc( 100% - 24px ); background-color:#111; border:8px solid #111; border-radius:12px 12px 0px 0px; border-bottom:8px solid #111;}
.camera{position:relative; width:8px; height:8px; background-color:#444;  border-radius:100%; margin:auto; top:-5px; margin-bottom:10px;}
.bottom-bar{width:calc( 100% - 24px ); background-color:#dcdfe2; border:8px solid #dcdfe2; border-top:0px; height:1px; border-radius:0px 0px 12px 12px; }
.screen-stand{margin:auto; margin-top:0px; width:30%; height:30px; background-color:#dcdfe2; border-top:6px solid #d1d6da;}
.stand-bottom{background-color:#d1d6da; width:50%; margin:auto;margin-top:0px; height:8px; }
#visualThemes i:hover{color:#061c3f !important;}

/*****  Dashboard Page Details *****/
.divider{width:calc(70% - 150px); margin-left:150px; height:1pt; margin-top:25px; margin-bottom: 25px; background-color: transparent;}
.page-name{color:#16325c;  margin-left: 150px; font-size:15px; margin-bottom: 20px;}
.page-name b{ font-size:21px; }
.link-table{margin-left: 150px; margin-top:15px; width:calc(70% - 150px); table-layout: fixed;}
.link-title{width:150px; font-weight: 600; padding-top:15px; padding-bottom: 15px;}
.link-icon{width:2%; font-weight: 600; padding-top:15px; padding-bottom: 15px;}
.page-link{color:#006dcc !important; background: white; padding: 11px; display:inline-block; margin-left:15px; border-radius: 3px; border: 1px solid #e2e2e2; text-decoration: none; white-space: nowrap;}
.copy-button{font-size:13px;  padding: 11px; margin-left:0px; border:1px solid #006dcc; margin-right: 0px;}
.copy-container{margin-left: 150px; margin-top:50px; border-radius:3px; font-size:20px; display: flex; align-items: center; background-color:white; width:575px; 
	padding:30px 25px; border:1px solid #dddbda; margin-bottom:150px;}
.copy-container input{line-height: 30px; font-size:20px; padding-left:5px; width:100px; letter-spacing:2px; border:none; border-bottom:1px solid black; 
	outline:none; background-color:white;}
.page-link a { color: #28a5f1 !important;}

/*****  Branding Settings  *****/
.slider-container{ width:200px; display: inline-block; margin-bottom: 5px; margin-left: 20px; }
.slider { -webkit-appearance: none; width: 100%; height: 8px; background:rgba(0,0,0,0.15); outline: none; border-radius:8px; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 0px; background: #061c3f; border:3px solid white; cursor: pointer; }
.slider::-moz-range-thumb {width: 25px; height: 25px; background: rgba(0,0,0,0.25); cursor: pointer; border:3px solid white; border-radius: 0px; }
.brandingSection{ background-image: url('static/sky.png'); background-size: cover; margin-left:0px; width:100%; box-sizing:border-box; border-bottom:2px solid #d9dde6; padding:40px 100px; padding-left:145px; }
.brandingSection i{ color:#061c3f; background-color:#061c3f30; padding:16px; border-radius: 2px; font-size:18px;  border: 1px solid #7997b1; }
.brandTitle{font-size: 27px; color:#061c3f;}
.brandInstructionsButton{ display: inline; margin-left: 25px; font-style:normal; font-weight:400; border:1px solid #dddbda; padding:5px 15px; color:#006dcc; 
	cursor:pointer; font-size:13px; border-radius:3px; background: white;     vertical-align: middle;}
.brandInstructionsButton:hover{ background-color: #fafafa; }	
#brandInstructions{transition:0.2s; opacity: 0; display: none; position: fixed; top:0px; left:0px; right:0px; bottom:0px; background-color:rgba(0,0,0,0.5); z-index:1000;  }
#brandInstructionPanel{ overflow-y: auto;transition:0.2s ease-out; position:absolute; width:calc(35% - 100px); height:calc(100% - 100px); background-color: white; top:0px; 
	left:65%; box-shadow: 0px 0px 10px rgba(0,0,0,0.5); padding:50px;   }
.brandInstructionTitle{color:#061c3f; font-size:1.25em; font-weight: 700;  margin-top: 45px;}
.brandInstructionSub{ color:#006dcc; margin-top: 35px; font-weight: 600; font-size: 1.15em; }
.brandInstructionText{ font-family: "Open Sans", sans-serif; margin-top:20px; line-height: 1.4; font-size:1em; color: #061c3f;}
.brandInstructionText code{ color:#061c3f; font-size: 1.2em; }
.brandInstructionText a{ color:#006dcc; font-weight: bold; }

/*****  Copy Demo Page  *****/
#demoContainer{margin-left:150px; display: flex; flex-wrap: wrap; width:1020px ; }
.input-small-title{ font-size:11px; margin-bottom:5px; margin-left:140px; border-radius:3px; 
	display:inline-block; padding:1px 10px; font-weight: 900;}
#prefixInput, #apiTokenInput,#inputOldString,#inputNewString,#inputPageArray,#inputWorkspaceId,#inputLogoURL,#inputLogoDrop{ margin:0px 0px 25px 148px; border:1px solid #dddbda; 
	min-width:250px; padding:15px; font-size:14px; border-radius:3px;  }
.copy-demo-container{display:flex; margin-top:15px; margin-bottom:15px;font-size:18px;  align-items: center;  color:#8a8a8a; min-width: 325px;}
.copy-demo-check-box{width:18px; height:15px; border:1px solid #dddbda;  font-size:14px; text-align: center; cursor: pointer;
	border-radius: 2px; color:white; background:white; padding-top:4px;}
.copy-demo-check-box:hover{ background-color:#dedede;  }
.copy-demo-text{cursor:pointer; padding-left: 15px; color:#16325c;}
/*****  Upload img  *****/
.error{ color: #B71C1C; }
#userActions {border:1px solid #dddbda; background:white; 
	min-width:250px; padding:15px; font-size:14px; border-radius:3px; transition:0.2s;}
#userActions:hover{filter:brightness(0.7);}
#uploadButton{color:#0070d290; cursor:pointer;}
#uploadButtonText{padding-top:18px;}
#userActions input{ visibility:hidden; width: 1px; display:none;}
#imgPrime{ display: none; transition:0.2s; max-width:250px; padding:15px;}

/*****  Additional Links  *****/
.link-table{margin-top:0px;}
.link-title{ width:200px; font-weight:400; font-size:17px; padding-left: 30px }
.link-icon{ width: 50px; text-align:center; }
.link-icon i{ font-size:1em; color:#0070d2; background:#0070d230; border-radius: 3px; padding:14px;   }

/*****  Workshop Page  *****/
#contentSelection{ margin-top:50px; margin-left:150px; display:flex; font-weight:600; font-size:18px;}
.subheader-button{ color:#a7b7c8;  cursor: pointer; padding:10px 20px; }
.subheader-button:first-of-type{margin-right:30px;}
.subheader-button-selected{ border-bottom:2px solid #0070d2; color:#0070d2; }
.input-title{ margin-left:150px; margin-bottom: 10px; color:#061c3f; margin-top: 35px;}
.input-title:first-of-type{ margin-top:50px; }
#setupInput select{ -webkit-appearance:none; appearance:none; background: white; outline:none; margin-left: 150px; color:#ababab;
	padding: 15px 10px; padding-right:20px; font-size:14px; border:1px solid #aaa; font-weight: 600; border-radius: 2px; }
.title-note{ z-index:10; color: tomato; font-weight:bold; cursor:pointer; font-size:14px;  position: relative; margin-left:20px;}
.title-note .tooltip{position:absolute; top:180%; left:0%; width:200%; border:1px solid #dedede; border-radius: 7px; line-height: 1.6;
	color:#4f4f4f; font-weight:normal; padding:15px; background:white; box-shadow:0px 0px 10px rgba(0,0,0,0.1); visibility: hidden;}
.title-note:hover .tooltip{ visibility: visible; }
.confirmation-message{ font-size:17px; margin-top:20px; width:60%; line-height: 1.5;}
.confirmation-message a{ font-weight: bold; background-color:#00bee8; padding:1px 5px; color:white; border-radius: 2px;}
#confirmationCompany{ font-weight: bold; display: block; margin:10px 0px; }
#confirmationUser{ display: none }
.instruction-note{ font-family: "Open Sans", sans-serif; margin: 15px 0px 40px 150px; width:65%; }
.instruction-note a{ color:#0a87c6; }

/*****  Alertify *****/
.alertify{z-index:100; background-color: rgba(0,0,0,.5);}
.alertify .dialog>*:before{content: ''; position: relative; width: calc(100% + 80px); height: 3px; 
background: linear-gradient(to right, #0070d2, #0070d2); top: -20px; left: -40px; display: inherit; }
.alertify .dialog>*{font-family: 'Montserrat', sans-serif;  font-weight: 500; padding:20px 40px; max-height: 90%;overflow-y: auto; }
.alertify .dialog input{border:2px solid #ccc; outline:none;}
.alertify .dialog input:focus{border:2px solid #0070d2;}
.alertify .dialog .msg{font-size:17px; line-height: 1.5;}
.alertify-logs>*, .alertify-logs>.default{background-color: #006dcc;}
.loading-overlay { position: fixed; z-index:1000;  left: 0; top: 0; bottom: 0; right: 0; background: #000; opacity: 0.85; }
.loading-gif{margin-left:calc(50% - 75px); margin-top:42.5vh; height:150px; width:150px; filter:grayscale(100%);}