/* Layout */ .container.main-content { display: flex; margin-top: 80px; width: 100%; max-width: 100%; } .menu-container { width: 8%; } .main-content-container { width: 92%; padding: 0 20px; } .login-container { top: 25vh; } /* Common CSS */ .cp { cursor: pointer; } .frsa { display: flex; flex-direction: row; justify-content: space-between; } .white-well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #FFFFFF; border: 1px solid #e3e3e3; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); box-shadow: inset 0 1px 1px rgba(0,0,0,.05); } .ls-none { list-style: none; } .ls-pd0 { -webkit-padding-start: 0; } .padding-side-15 { padding: 0px 15px; } /* Side Menu */ .side-menu { padding-top: 10px; max-width: 100px; border-right: 1px solid #ccc; } .button-container { text-align: center; } .button-container a { color: black; } .side-menu-button { width: 65px; height: 65px; } .achievement-body { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .button-container.active .side-menu-button { color: #fff; background-color: #286090; border-color: #122b40; } .button-container.active .button-title { color: #286090; } .button-container a:hover { text-decoration: none; } .current-user-container { width: 100%; display: inline-block; font-size: 14px; text-align: left; background-color: #fff; height: 40px; -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.2); box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); margin-bottom: 10px; } .current-user-container:hover{ cursor: pointer; -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.4); box-shadow: 0 1px 1px 0 rgba(0,0,0,.3); } .current-user-container > .current-user-split{ background: #337ab7; width: 33px; float: left; color: #fff!important; height: 100%; text-align: center; } .current-user-container > .current-user-split > .glyphicon{ position:relative; top: calc(50% - 9px)!important; /* 50% - 3/4 of icon height */ } .current-user-container > .current-user-split.update-success{ background: #5cb85c!important; } .current-user-container .current-user-text { color: black; } .current-user-container > .current-user-split.update-danger{ background: #d9534f!important; } .current-user-container > .current-user-split.update-info{ background: #5bc0de!important; } .current-user-container > .current-user-text{ line-height: 19px; padding-top: 11px; padding-left: 45px; padding-right: 20px; } .current-user-container i.fa.fa-user { padding: 10px; font-size: 20px; } .profiles { border: 1px solid #dddddd; margin-bottom: 20px; } .profile-content { width: 320px; padding: 15px; padding-bottom:0px; } .profile-content:before, .profile-content:after { display: table; content: ""; line-height: 0; } .profile-footer{ background-color:#DDD; } .profile-footer-content { padding:15px 15px 15px 15px; } .profile-container .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } .demo-title { text-align: center; font-size: 3rem; margin-bottom: 50px; } .invite-option { border: 1px solid #e5e5e5; } .invite-card-container { flex-wrap: wrap; width: 100%; display: flex; } .invite-card-container .invite-option { width: 25%; background: white; float: left; padding: 2%; text-align: center; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; margin: 5px; } .invite-card-container .invite-option:hover { /*cursor: pointer;*/ box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.3); -webkit-transform: scale(1.04); transform: scale(1.04); } .invite-card-container .invite-option:hover i, .invite-card-container .invite-option:hover h1, .invite-card-container .invite-option:hover span, .invite-card-container .invite-option:hover b { color: #286090; } .invite-card-container .invite-option:hover .front { opacity: 0; visibility: hidden; } .invite-card-container .invite-option:hover .back { opacity: 1 !important; visibility: visible !important; } .invite-card-container .invite-option:hover .back a.button { cursor: pointer; -webkit-transform: translateY(0px) !important; transform: translateY(0px) !important; } .invite-card-container .invite-option hr { border: none; border-bottom: 1px solid #F0F0F0; } .invite-card-container .invite-option i { color: #D8D8D8; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .invite-card-container .invite-option h1 { margin: 10px 0; color: #212121; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .invite-card-container .invite-option p { color: #999; padding: 0 10px; line-height: 1.3; } .invite-card-container .invite-option .price { position: relative; } .invite-card-container .invite-option .price .front span.price { font-size: 2rem; text-transform: uppercase; margin-top: 20px; display: block; font-weight: 700; position: relative; } .invite-card-container .invite-option .price .front span.price b { position: absolute; font-size: 1rem; margin-left: 2px; font-weight: 600; } .invite-card-container .invite-option .price .back { opacity: 0; visibility: hidden; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .invite-card-container .invite-option .price .back a.button { background: #286090; padding: 15px 20px; display: inline-block; text-decoration: none; color: white; position: absolute; font-size: 13px; top: -5px; left: 0; right: 0; width: 150px; margin: auto; text-transform: uppercase; -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .invite-card-container .invite-option .price .back a.button:hover { background: #286090; } .invite-card-container .invite-option:hover i { color: white; } .website-card-button-group { display: flex; justify-content: space-around; } .media { border: 1px solid #d5dbdd; padding: 5px 20px; border-radius: 5px; box-shadow: 0px 2px 1px rgba(0,0,0,0.04); background: #fff; display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; } .align-self-center { -ms-flex-item-align: center !important; align-self: center !important; } .rounded-circle { border-radius: 50%; } .media .media-left img { width: 75px; } .shares-container { list-style: none; -webkit-padding-start: 0px; } /* ————————————————————– Tree core styles */ .tree { margin: 1em; } .tree input { position: absolute; clip: rect(0, 0, 0, 0); } .tree input ~ ul { display: none; } .tree input:checked ~ ul { display: block; } /* ————————————————————– Tree rows */ .tree li { line-height: 1.2; position: relative; padding: 0 0 1em 1em; } .tree ul li { padding: 1em 0 0 1em; } .tree > li:last-child { padding-bottom: 0; } /* ————————————————————– Tree labels */ .tree_label { position: relative; display: inline-block; background: #fff; } label.tree_label { cursor: pointer; } label.tree_label:hover { color: #666; } /* ————————————————————– Tree expanded icon */ label.tree_label:before { /*background: #000;*/ color: #000; position: relative; z-index: 1; float: left; margin: 0 1em 0 -2em; width: 1em; height: 1em; border-radius: 1em; font-family: FontAwesome; content: '\f07b'; text-align: center; line-height: .9em; } :checked ~ label.tree_label:before { content: '–'; } /* ————————————————————– Tree branches */ /*.tree li:before { position: absolute; top: 0; bottom: 0; left: -.5em; display: block; width: 0; border-left: 1px solid #777; content: ""; }*/ .tree_label:after { position: absolute; top: 0; left: -1.5em; display: block; height: 0.5em; width: 1em; border-bottom: 1px solid #777; border-left: 1px solid #777; border-radius: 0 0 0 .3em; content: ''; } .tree_label.filez:after { position: absolute; font-family: FontAwesome; top: 0; left: -1.5em; display: block; height: 0.5em; width: 1em; border-bottom: 1px solid #777; border-left: 1px solid #777; border-radius: 0 0 0 .3em; content: '\f15c'; } label.tree_label:active:before, label.tree_label:hover:before { position: absolute; font-family: FontAwesome; top: 0; display: block; height: 0.5em; width: 1em; border-bottom: 1px solid #777; border-left: 1px solid #777; border-radius: 0 0 0 .3em; content: '\f07c'; } .breadcrumbs-list:last-child { color: #777; } li.move-back { margin-left: -20px; } label.tree_label:after { border-bottom: 0; } ul.tree.files-only.ls-none { margin-left: 30px; } :checked ~ label.tree_label:after { border-radius: 0 .3em 0 0; border-top: 1px solid #777; border-right: 1px solid #777; border-bottom: 0; border-left: 0; bottom: 0; top: 0.5em; height: auto; } .tree li:last-child:before { height: 1em; bottom: auto; } .tree > li:last-child:before { display: none; } .tree_custom { display: block; background: #eee; padding: 1em; border-radius: 0.3em; } .tree ul { -webkit-padding-start: 0; } .websites-tile img { height: auto; max-width: 100%; vertical-align: middle; } .websites-tile iframe { border-width: 2px; border-style: none; border-color: none; border-image: inone; } .websites-tile .btn { background-color: white; border: 1px solid #cccccc; color: #696969; padding: 0.5rem; text-transform: uppercase; } .websites-tile .btn--block { display: block; width: 100%; } .websites-tile .cards { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .websites-tile .cards__item { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1rem; } @media (min-width: 40rem) { .websites-tile .cards__item { width: 50%; } } @media (min-width: 56rem) { .websites-tile .cards__item { width: 33.3333%; } } .websites-tile .card { background-color: white; border-radius: 0.25rem; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; max-width: 350px; min-width: 350px; } .websites-tile .card:hover .card__image { -webkit-filter: contrast(100%); filter: contrast(100%); } .websites-tile .card__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 1rem; } .websites-tile .card__image { background-position: center center; background-repeat: no-repeat; background-size: cover; background: rgba(0, 0, 0, 0.5); border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; -webkit-filter: contrast(70%); filter: contrast(70%); overflow: hidden; position: relative; -webkit-transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); } .websites-tile .card__title { color: #696969; font-size: 1.25rem; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; } .websites-tile .card__text { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; font-size: 0.875rem; line-height: 1.5; margin-bottom: 1.25rem; } .card__title.text-center { margin-bottom: 10px; } a:hover, a:focus { color: #2a6496; text-decoration: none; } .square-service-block{ position:relative; overflow:hidden; margin:15px auto; } .square-service-block a { background-color: #e74c3c; border-radius: 5px; display: block; padding: 60px 20px; text-align: center; width: 100%; } .square-service-block a:hover{ background-color: rgba(231, 76, 60, 0.8); border-radius: 5px; } .ssb-icon { color: #fff; display: inline-block; font-size: 28px; margin: 0 0 20px; } h2.ssb-title { color: #fff; font-size: 20px; font-weight: 200; margin:0; padding:0; text-transform: uppercase; } .folder-actions-list .root { display: none; } .folder-actions-list { margin: 20px 0px; -webkit-padding-start: 0px; } .folder-actions-list i { color: #337ab7; } .folder-actions-list li { padding: 5px 0px; }