/* the element that this class is applied to, should have a max width for this to work*/ .page-container { margin-top: 40px; } .page-head { border-bottom: 1px solid #d1d8dd; height: 70px; position: fixed; left: 0; right: 0; top: 41px; margin: auto; background-color: #fff; z-index: 101; } .sub-heading { display: inline-block; margin-right: 10px; max-width: 50%; vertical-align: middle; } @media (min-width: 767px) { .page-body { overflow-x: hidden; min-height: calc(60vh); } } .page-title { position: relative; } .page-title h6 { margin-top: -8px; } .page-title h1 { margin-top: 17px; } .page-title .indicator { vertical-align: middle; } .page-title .title-text { margin-right: 7px; max-width: 75%; display: inline-block; vertical-align: middle; } .page-title .title-image { width: 46px; height: 0; padding: 23px 0; background-size: contain; background-repeat: no-repeat; background-position: center center; border-radius: 4px; color: #fff; text-align: center; line-height: 0; float: left; margin-right: 10px; } .editable-title .title-text { cursor: pointer; } .editable-title .title-text:hover { background-color: #fffce7; } .page-actions { padding-top: 17px; padding-bottom: 17px; } .page-icon-group { vertical-align: middle; } .page-icon-group a { margin-right: 7px; } .page-content { margin-top: 70px; } /* show menu aligned to the right border of the dropdown */ .page-actions .dropdown-menu, .form-inner-toolbar .dropdown-menu { right: 0px; left: auto; } .layout-main-section { border: 1px solid #d1d8dd; border-top: 0px; } .layout-main-section-wrapper { margin-bottom: 60px; } .layout-footer { border: 1px solid #d1d8dd; border-top: 0px; padding: 3px 15px; font-size: 12px; } .page-form { margin: 0px; padding-right: 15px; padding-top: 10px; border-bottom: 1px solid #d1d8dd; background-color: #F7FAFC; } .page-form .form-group { padding-right: 0px; margin-bottom: 10px; } .page-form .checkbox { margin-top: 4px; margin-bottom: 4px; } .page-form .checkbox .help-box { display: none; } select.input-sm { line-height: 1.2em !important; } .message-page { padding-top: 10rem; } .message-page .message-page-icon { font-size: 10rem; margin-bottom: 1rem; } .message-page .message-page-image { margin-bottom: 1rem; } .message-page .btn-home { margin-top: 1rem; } @media (max-width: 991px) { .page-head .page-title h1 { font-size: 22px; margin-top: 22px; } } @media (max-width: 767px) { .page-actions { max-width: 150px; float: right; } .page-title { position: absolute; left: 0; right: 101px; width: 100%; } .page-title h1 { padding-right: 170px; } .page-head .page-title h1 { font-size: 18px; } } #page-setup-wizard { margin-top: 30px; } @media (min-width: 768px) { .setup-wizard-slide { max-width: 500px; } } .setup-wizard-slide { margin: 60px auto; padding: 10px 50px; border: 1px solid #d1d8dd; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1); } .setup-wizard-slide .slides-progress { margin-top: 20px; } .setup-wizard-slide .lead { margin: 30px; color: #777777; text-align: center; font-size: 24px; } .setup-wizard-slide .col-sm-12 { padding: 0px; } .setup-wizard-slide .section-body .col-sm-6:first-child { padding-left: 0px; } .setup-wizard-slide .section-body .col-sm-6:last-child { padding-right: 0px; } .setup-wizard-slide .form-control { font-weight: 500; } .setup-wizard-slide .form-control.bold { background-color: #fff; } .setup-wizard-slide .add-more { margin: 0px; } .setup-wizard-slide .footer { padding: 30px 7px; } .setup-wizard-slide a.next-btn.disabled { background-color: #b1bdca; color: #fff; border-color: #b1bdca; } .setup-wizard-slide a.complete-btn.disabled { background-color: #b1bdca; color: #fff; border-color: #b1bdca; } .setup-wizard-slide .fa-fw { vertical-align: middle; font-size: 10px; } .setup-wizard-slide .fa-fw.active { color: #5e64ff; } .setup-wizard-slide .icon-circle-blank { font-size: 7px; } .setup-wizard-slide .icon-circle { font-size: 10px; } .setup-wizard-slide .frappe-control[data-fieldtype="Attach Image"] { width: 140px; height: 180px; margin-top: 20px; } .setup-wizard-slide .frappe-control[data-fieldtype="Attach Image"] .form-group { display: none; } .setup-wizard-slide .frappe-control[data-fieldtype="Attach Image"] .clearfix { display: none; } .setup-wizard-slide .missing-image { display: block; position: relative; border-radius: 4px; border: 1px solid #d1d8dd; border-radius: 6px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .setup-wizard-slide .missing-image .octicon { position: relative; top: 50%; transform: translate(0px, -50%); -webkit-transform: translate(0px, -50%); } .setup-wizard-slide .attach-image-display { display: block; position: relative; border-radius: 4px; } .setup-wizard-slide .img-container { height: 100%; width: 100%; padding: 2px; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid #d1d8dd; border-radius: 6px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .setup-wizard-slide .img-overlay { display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; color: #777777; background-color: rgba(255, 255, 255, 0.7); opacity: 0; } .setup-wizard-slide .img-overlay:hover { opacity: 1; cursor: pointer; } .setup-state { background-color: #f5f7fa; } .page-card { max-width: 360px; padding: 15px; margin: 70px auto; border: 1px solid #d1d8dd; border-radius: 4px; background-color: #fff; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); } .page-card .page-card-head { padding: 10px 15px; margin: -15px; margin-bottom: 15px; border-bottom: 1px solid #d1d8dd; } .state-icon-container { display: flex; justify-content: center; } .state-icon { position: relative; width: 100px !important; height: 100px !important; display: flex; justify-content: center; align-items: center; } @keyframes lds-rolling { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes lds-rolling { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } .lds-rolling { -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px); transform: translate(-100px, -100px) scale(1) translate(100px, 100px); } .lds-rolling div { position: absolute; width: 60px; height: 60px; border: 3px solid #d1d8dd; border-top-color: transparent; border-radius: 50%; -webkit-animation: lds-rolling 1s linear infinite; animation: lds-rolling 1s linear infinite; top: 50px; left: 50px; } .lds-rolling div:after { position: absolute; width: 60px; height: 60px; border: 3px solid #d1d8dd; border-top-color: transparent; border-radius: 50%; -webkit-transform: rotate(90deg); transform: rotate(90deg); }