/* ============================================================================ TABLE OF CONTENT ========================================================================== */ /* * 01 - IMPORT * 02 - OVERALL BASICS * 03 - TYPO & LIST * 04 - MESSAGES & ALERTS * 05 - LINKS & BUTTONS * 06 - FORMS * 07 - IMAGES * 08 - TABLE * 09 - NAVIGATION * 10 - HELPERS * 11 - MODULES * 12 - OTHERS PRE-BUILD LAYOUT * 13 - CUSTOMS * 14 - MEDIAS QUERIES * 15 - ANIMATIONS */ /* ============================================================================ 01 - IMPORTS ========================================================================== */ @import url(reset.css); @import url(simplegrid.css); @import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,500,700,900,900i&display=swap'); /* ============================================================================ 02 - OVERALL BASICS ========================================================================== */ html { font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-size: 62.5%; scroll-behavior: smooth; height: 100%; } body { font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif, Georgia, serif; font-size: 1.6rem; line-height:1.6; letter-spacing:.01em; height: 100%; color:#606c76; background-color: #E0E0E0; } body.cke_editable { background: none; padding: 15px; } body { background-image: url(../images/bg_head2.jpg); background-repeat: no-repeat; background-position: top center; background-color: #E0E0E0; } body.login { background: rgb(5,111,94); background: linear-gradient(90deg, rgba(5,111,94,1) 0%, rgba(1,51,43,1) 100%); background-size: 400% 400%; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } body.iframe { background-image: none; padding: 20px; } body.payment { background-image: none; padding: 20px; background-color:#E0E0E0; } body.approbation { background-image: none; padding: 20px; background-color:#E0E0E0; } :root { color-scheme: only light !important; } .ui-datepicker-title select { padding: 3px !important; font-size:16px !important; } .ckeditor iframe { width: 100%; } /* SELECTION */ ::-moz-selection { background: #232323; color: #fff; text-shadow: none; } ::selection { background: #232323; color: #fff; text-shadow: none; } :root { /* COLORS */ --main-color: #056f5e; --main-color-hover: #002B27; --second-color: #333333; --second-color-hover: #212121; /* CUSTOM COLORS */ --second-color-dark-white: #E5E5E5; --second-color-light-gray: #B7B7B7; --accent-color: #056f5e; /* input accent color */ } /* ============================================================================ 03 - TYPO & LIST ========================================================================== */ /* HEADERS */ h1,h2,h3,h4,h5 { margin-bottom: 1rem; font-weight: 300; margin-top:0; letter-spacing:-0.1rem; } h1 { color:#606c76; font-size: 4.6rem; line-height: 1.2; } h2 { color:#606c76; font-size: 3.6rem; line-height: 1.25; } h3 { color:#606c76; font-size: 2.8rem; line-height: 1.3; } h4 { color:#606c76; font-size: 2.2rem; line-height: 1.35; letter-spacing:-0.08rem; } h5 { color:#606c76; font-size: 1.8rem; line-height: 1.5; letter-spacing:-0.05rem; } .iframe h1 { font-size: 2.6rem; } /* PARAGRAPHS */ p { font-size: 1.6rem; line-height: 1.6; font-weight: 400; margin-bottom: 2.5rem; color:var(--second-color); } p.spacer { padding: 20px; } p.spacer-large { padding: 40px; } small { font-size: 1.4rem; } /* CHARACTES STYLES */ i, em { font-style: italic; } strong, b { font-weight: bold; } sub, sup { font-size: 1rem; } sub { vertical-align: sub; } sup { vertical-align: super; } blockquote { font-size: 2.25rem; line-height:1.6; width:70%; margin:3rem auto; font-style:italic; color: var(--second-color); padding: 2rem 3rem 2rem 8rem; border-left:8px solid var(--main-color); position: relative; background:var(--second-color-dark-white); } blockquote::before { font-family:Arial; content: "\201C"; color:var(--second-color); font-size:4em; position: absolute; left: 10px; top:-10px; } blockquote::after { content: ''; } blockquote span { display:block; color:var(--second-color); font-style: normal; font-weight: bold; margin-top:1em; } /* LIST */ dl, ol, ul { list-style:none; padding:0; margin:0; font-weight: 300; } ul { list-style: circle inside; margin-bottom: 2.5rem; } ul ul, ul ol { margin: 1.5rem 0 1.5rem 3.0rem } ul li { margin-bottom: 1rem; } ol { list-style: decimal inside; margin-bottom: 2.5rem; } ol ol, ol ul { margin: 1.5rem 0 1.5rem 3.0rem } ol li { margin-bottom: 1rem; } /* TAG */ .tag { background-color:var(--second-color); color:#FFF; text-decoration: none; margin: 0 0 10px 0; display:inline-block; padding:1.1rem 1rem; font-size:1.2rem; line-height: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .tag:hover { background-color:var(--accent-color); color:#FFF; text-decoration: none; } /* ============================================================================ 04 - MESSAGES & ALERTS ========================================================================== */ .message { clear: both; display: block; padding: 15px; position: relative; margin-bottom: 10px; color: #31708f; background-color: #d9edf7; border: 1px solid #70B2D1; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .message p { color:#31708f; margin: 0; } .message:before { font-family: "Font Awesome 5 Free"; content:"\f06a"; padding: 0 6px 0 5px; font-weight: 900; } .message.error { color:#BA0D0D; background-color:#F7B4B4; border: 1px solid #FC7474; } .message.error p { color:#BA0D0D; } .message.error:before { font-family: "Font Awesome 5 Free"; content:"\f057"; padding: 0 6px 0 5px; font-weight: 900; } .message.success { color:#3c763d; background-color:#ACEFAD; border: 1px solid #53AA55; } .message.success p { color:#3c763d; } .message.success:before { font-family: "Font Awesome 5 Free"; content:"\f058"; padding: 0 6px 0 5px; font-weight: 900; } .message.warning { color:#665b40; background-color:#fff7c2; border: 1px solid #CEB984; } .message.warning p { color:#665b40; } .message.warning:before { font-family: "Font Awesome 5 Free"; content:"\f071"; padding: 0 6px 0 5px; font-weight: 900; } /* function display_alert() */ .alert { } .alert-content { } .alert-content h2 { } .alert-content h2:before { font-family: "Font Awesome 5 Free"; content:"\f071"; padding: 0 6px 0 5px; font-weight: 900; } /* ============================================================================ 05 - LINKS & BUTTONS ========================================================================== */ a { color:var(--main-color); text-decoration: underline; } a:hover { color:var(--main-color-hover); -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } a:focus:not(a) { background-color:#D30000; color:#FFF !important; padding:0.25rem; text-decoration: none; border:none; outline: none; } a.button { background-color:#242533; display: inline-block; margin-bottom: 3px; color:#FFF; padding: 6px 14px; text-decoration: none; -webkit-appearance: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } a.button:hover { background-color: #000; } a.button i { margin-right: 7px; } a.edit { background-color:var(--main-color); float:right; margin-left:6px; } a.edit:hover { background-color:var(--main-color-hover); } a.add { color:#FFF; background-color: #5bb85d; margin: 0 2px; } a.add:hover { color:#FFF; background-color: #42A543; } a.back { color:#FFF; background-color: #7C7C7C; float:left; margin-right: 10px; } a.fancy-link { color: #FF3F00; text-decoration: none; position: relative; } a.fancy-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: currentColor; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; transition: -webkit-transform 250ms ease-in; transition: transform 250ms ease-in; transition: transform 250ms ease-in, -webkit-transform 250ms ease-in; } a.fancy-link:hover::after { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; } /* ============================================================================ 06 - FORMS ========================================================================== */ /* LABELS */ label { cursor: pointer; } .checkbox { display: block; margin-bottom:1rem; } .checkbox label { display: block; padding:1.25rem 1.5rem; cursor: pointer; border:1px solid var(--second-color-light-gray); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .checkbox label:hover { background-color: var(--second-color); color:#FFF; border:1px solid var(--second-color-hover); } .checkbox input[type=checkbox] { float: left; margin:1.5rem 1rem 0 1.25rem; } .checkbox input[type=checkbox]:checked + label { background-color: var(--main-color); color:#FFF; } /* SELECT BOX */ select { color:#6D6D6D; width: 100%; padding:1.25rem 1.5rem; margin-bottom: 1rem; border:1px solid #CCCCCC; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } select:hover { background-color: #FFFADD; } select:focus { border:1px solid #58D300 !important; } option { width: 100%; } /* RADIO */ .radio { display: block; margin-bottom:1rem; } .radio label { display: block; padding:1.25rem 1.5rem; cursor: pointer; border:1px solid var(--second-color-light-gray); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .radio label:hover { background-color: var(--second-color); color:#FFF; border:1px solid var(--second-color-hover); } .radio input[type=radio] { float: left; margin:20px 18px; } .radio input[type=radio]:checked + label { background-color: var(--main-color); color:#FFF; } input[type=radio] { width: auto; } /* INPUT */ input { accent-color: var(--accent-color); } input:hover { background-color: #FFFADD; } input:focus { border:1px solid #58D300 !important; } input.missing, textarea.missing, select.missing { border: 1px solid #FF0000 !important; } .missing { color: #FF0000; } input[type=text], input[type=password], input[type=search], input[type=url], input[type=file], input[type=tel], input[type=date], input[type=email], input[type=time], input[type=number], input[type=range], input[type=color], textarea { font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; color:#3F3F3F; font-weight: 400; font-size: 1.6rem; width: 100%; padding:1.25rem 1.5rem; margin-bottom: 1rem; border:1px solid #CCCCCC; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; -webkit-appearance: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } table.proposal-request-data input[type=text] { padding:0.5rem 1.5rem; margin-bottom: 0rem; } table.proposal-request-data select { padding:1rem 1.5rem; margin-bottom: 0rem; } /* TEXTAREA */ textarea { min-height: 100px; resize: vertical; } textarea:focus { border:1px solid #58D300 !important; } /* BUTTONS */ input[type=submit] { padding: 13px 28px; color:#FFF; transition: 0.5s; background-color: #5bb85d; border: none; border-bottom: 4px solid #4F8E4F; cursor: pointer; font-size: 18px; line-height: 18px; -webkit-appearance: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } input[type=submit]:hover { background-color: #35B737; } input[type=submit].save { float:right; } #filters select, #filters input { font-size: 14px; padding: 6px 10px; width: 140px; } input#client_no { font-size: 14px; padding: 6px 10px; width: 180px; float: left; margin-right: 10px; } input#client_search { font-size: 14px; padding: 6px 10px; width: 180px; float: left; margin-right: 10px; } input#proposal_no { font-size: 14px; padding: 6px 10px; width: 80px; float: left; margin-right: 10px; } input#client_name { width:250px; } input.proposal-submit { cursor: pointer; position: fixed; border: 0; display: none; z-index: 10; bottom:0; left: 0; width: 100%; background-color: #389900; color:#FFF; padding: 15px; font-size: 16px; text-align: center; } a.payment-link { text-decoration: none; } /* ============================================================================ 07 - IMAGES ========================================================================== */ img:not(.fancybox__image) { width: auto !important; height: auto !important; max-width:100%; height: auto; vertical-align: middle; } img:focus { border:#58D300 !important; } img.border { border:10px solid #FFF; box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; } /* ============================================================================ 08 - TABLE ========================================================================== */ table.form-table { width: 100%; margin-bottom: 30px; } table.form-table tr td { padding: 0 2rem 3rem 0; border:none; } table.form-table tr td input, table.form-table tr td select, table.form-table tr td textarea { margin-bottom: 0; } table.form-table tr { background:none !important; } table { width: 100%; margin-bottom: 30px; } table thead tr th { background-color:#046f5f; color: white; } table tr td { display: table-cell; padding: 0.5rem; vertical-align: middle; border-bottom: 1px solid #898989; } table tr:hover { background-color:#abe8de; } table tr th { display: table-cell; padding: 0.5rem; vertical-align: middle; border-bottom: 1px solid #898989; font-weight: bold; text-align: left; color:#5B5B5B; } table.no-border, table.no-border tr, table.no-border tr td, table.no-border tr td, table.no-border thead tr th { border:none; background: none; } table.border { width: 100%; margin-bottom: 12px; border: 1px solid #D3D3D3; } table.border tr td { display: table-cell; vertical-align: middle; border: 1px solid #D3D3D3; } table.border tr th { display: table-cell; vertical-align: middle; border: 1px solid #D3D3D3; } table.edit-table, table.edit-table tr td, table.edit-table tr th { border:none; padding: 3px; vertical-align: top; } table.edit-table { margin-bottom: 10px; } table.edit-table tr:nth-child(even) { background:none; } table.edit-table tr:hover { background:none; } table.edit-table input, table.edit-table select, table.edit-table textarea { margin-bottom: 0; } table.table-report-data { font-size:14px; line-height: 16px; } table.table-report-data tr td { padding: 1.6rem; } table.table-report-data tr th { padding: 1.6rem; border-bottom: 2px solid #686868; } table.table-report-data tr:hover { cursor: pointer; background-color: #FFF2C1; } table.table-client-section { margin-bottom:10px; border: 1px solid #D3D3D3; font-size:14px; } table.table-client-section tr { } table.table-client-section tr th { padding:2px 5px; border:none; line-height: 18px; } table.table-client-section tr td { padding:2px 5px; border:none; line-height: 18px; } table.table-client-section span.tx-number { font-weight: 400; font-size:12px;} table.proposal-request-data i.fas.fa-arrow-right { color: rgb(1, 167, 1); } /* ============================================================================ 09 - NAVIGATION ========================================================================== */ .breadcrumbs { margin-bottom: 10px; } .breadcrumbs a { font-size: 1.4rem; display: inline-block; text-decoration: none; } .breadcrumbs a:after { font-family: "Font Awesome 5 Free"; content:"\f105"; padding: 0 6px 0 5px; font-weight: 900; } #button-burger { z-index:100; display: none; background-color: #E53D00; color:#FFF; cursor: pointer; position: fixed; top:2px; right:2px; border:none; width: 52px; height: 52px; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } #button-burger .fas { color:#fff; font-size:26px; line-height: 26px; } .menu { z-index:100; background-color: var(--main-color); position: fixed; top:0; left:0; width: 90px; height: 100%; max-height: 100%; -webkit-box-shadow: 0px 4px 8px 5px rgba(0,0,0,0.36); box-shadow: 0px 4px 8px 5px rgba(0,0,0,0.36); } .menu .icon-title { z-index:100; position: absolute; top:51px; left:0; letter-spacing: -0.35px; color:#FFF; opacity: 0.5; font-size:12px; width: 100%; text-align: center; font-weight: 300; } .menu .icon-title .fa-circle { font-size: 8px; color:#FFE100; opacity: 1; } .menu span.menu-notif { z-index:100; position: absolute; top:10px; right:10px; color:#FFF; background-color:#E04A00; padding-top:1px; text-align: center; opacity:1; font-size:12px; width:20px; height:20px; text-align: center; font-weight: 300; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; } .menu a { position: relative; display: block; text-decoration: none; width: 100%; height: 80px; padding-top:18px; } .menu ul { list-style: none; margin:0; padding:0; } .menu ul li { margin-bottom:1px; } .menu li.logo { text-align: center; height: 80px; margin-bottom: 10px; border-bottom: 1px solid #117F6D; } .menu li.logo a:hover { background: none; } .menu a img { width:58px !important; height: auto !important; } .menu a:hover, .menu a.current { background-color: var(--main-color-hover); } .menu a:hover .icon-title { display:block; color:#FFF; opacity: 1; } .menu a .icon { color:#FFF; font-size: 26px; display: block; text-align: center; margin:auto; } /* ============================================================================ 10 - HELPERS ========================================================================== */ .clear { display: block; clear: both; overflow: hidden; height:0; margin:0; padding: 0; } .loading-bar { display: none; } /* CARDS */ .card { border:1px solid #A0A0A0; background-color: #FFF; } .card img { opacity:0.9; } .card img:hover { opacity:1; } .card-content { padding:2rem; } .card-content-title { font-size:2rem; font-weight:700; margin-bottom:1rem; } .card-content-description { } .card-content a.button:after { content:"\f105"; font-family: "Font Awesome 5 Free"; padding-left:1rem; font-weight: 900; } /* BOX */ .box { background-color: #FFF; padding: 3rem; margin-bottom: 30px; border: 1px solid #EAEAEA; border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; } .box.box-shadow { background-color: #FFF; padding: 3rem; margin-bottom: 30px; box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25); border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; } .box *:last-child { margin-bottom: 0; } /* LOADING BOX */ #loading-box { background-color: #000; opacity: 0.85; position: fixed; top:0; left:0; width:100%; height:100%;} .spinner { -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; z-index: 2; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; width: 50px; height: 50px; } .spinner .path { stroke: #93bfec; stroke-linecap: round; -webkit-animation: dash 1.5s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite; } /* ============================================================================ 11 - MODULES ========================================================================== */ /* ============================================================================ 12 - OTHERS PRE-BUILD LAYOUT ========================================================================== */ /* ============================================================================ 13 - CUSTOMS ========================================================================== */ .header { } .header .nav-fonc { float: right; text-align: right; } .header #add_button { position: relative; display: inline-block; font-size:22px; color:#FFF; text-decoration: none; padding: 7px 12px; cursor: pointer; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .header #add_button:hover { background-color: #429E43; } .header .add-menu-box { display: none; width: 160px; z-index: 10; position: absolute; top:100%; right:0; padding: 20px; background-color: #FFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3; } .header .add-menu-box ul { margin: 0; padding: 0; } .header .add-menu-box ul li { list-style: none; display: block; margin:0; } .header .add-menu-box ul li a { display: block; color:#242533; font-size:15px; padding: 3px 6px; font-weight: bold; } .header .add-menu-box ul li a:hover { color:var(--main-color-hover); } .header a { display: inline-block; font-size:22px; color:#FFF; text-decoration: none; padding: 4px 10px; } .header .welcome { float: left; } .header .welcome-name { color:#FFF; font-size:25px; } .header .welcome a { font-size:14px; text-decoration: none; background-color: #636584; color:#FFF; padding: 3px 6px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .header .welcome ul { margin: 0; padding: 0; } .header .welcome ul li { list-style: none; display: inline-block; } input#search { position: relative; margin-top:5px; display: inline-block; width: 260px; float: right; margin-right: 30px; padding: 8px 14px; background-color: #004338; color:#FFF; border:none; } input#search:hover, input#search:focus { background-color: #004338; border:1px solid #004338 !important; } input#postal_code { text-transform: uppercase; } span.search-type { color:#FFF; font-size:14px; line-height: 14px; padding: 3px 6px; display: inline-block; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } span.search-type.clients { background-color: #38BAD1; } span.search-type.feeds { background-color: #593E22; } span.search-type.proposal { background-color: #0C47A0; } .notifications-wrapper { z-index:100; display: none; background-color: #FFF; overflow: scroll; padding: 30px; position: fixed; top:0; right: 0; width: 500px; min-height: 100%; -webkit-box-shadow: 0px 4px 8px 5px rgba(0,0,0,0.36); box-shadow: 0px 4px 8px 5px rgba(0,0,0,0.36); } .notifications { } .close-notification { text-align: right; } .notif-preview { display:block; border: 1px solid #AFAFAF; padding: 12px; margin-bottom: 5px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .notif-preview a { display: block; text-decoration: none; } .notif-preview.new-notif { border: 1px solid #E04300; background-color: #FFE5DB; } .notif-preview.new-notif:hover { border: 1px solid #B73400; background-color: #FFD5C6; } .notif-datetime { display: block; font-size:13px; } .highlighted { border-color: #E00300; background-color: #FFD5C6; } .highlighted-2 { background-color: #ffd5c6; } .login-wrap { background-color: #FFF; position: absolute; top:0; right:0; width: 30%; min-height: 100%; padding: 50px; } .login-wrap input[type=text], .login-wrap input[type=password] { font-size:24px; padding: 10px 12px 12px 50px; font-weight: 300; width: 100%; margin-bottom: 15px; border:1px solid #CCCCCC; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; -webkit-appearance: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .login-wrap input[type=text] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23B2B2B2' d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z'/%3E%3C/svg%3E") no-repeat 16px center; background-size: 22px; } .login-wrap input[type=password] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23B2B2B2' d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z'/%3E%3C/svg%3E") no-repeat 16px center; background-size: 22px; } .login-wrap input[type=submit] { width: 100%; margin-bottom: 30px; } .intro-logo { display: block; margin: 20px 0 50px 0; } .saved { z-index: 100; opacity: 0; visibility: hidden; transition: 0.25s; position: fixed; bottom:50px; right:50px; padding: 10px 20px; background-color: #3A993B; color:#FFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .not-saved { z-index: 100; opacity: 0; visibility: hidden; transition: 0.25s; position: fixed; bottom:50px; right:50px; padding: 10px 20px; background-color: #BF0000; color:#FFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .tabs { } .tabs ul { margin: 0 0 0 10px; padding: 0; } .tabs ul li { list-style: none; display: inline-block; margin:0; } .tabs ul li a { display: block; color:#FFF; text-decoration: none; text-decoration: none; padding: 10px 20px; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; } .tabs ul li a.current, .tabs ul li a:hover { background-color: #FFF; color:#242533; } .tabs span.number { background-color: #D60000; color:#FFF; padding: 0px 5px; float: right; margin-left: 5px; font-size:13px; -webkit-border-radius: 300px; -moz-border-radius: 300px; border-radius: 300px; } .tabs-no-href { } .tabs-no-href ul { margin: 0 0 0 10px; padding: 0; } .tabs-no-href ul li { display: inline-block; color:#FFF; text-decoration: none; text-decoration: none; padding: 10px 20px; transition: 0.25s; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; } .tabs-no-href ul li.current, .tabs-no-href ul li:hover { background-color: #FFF; color:#242533; cursor: pointer; } .tabs-no-href.tabs-fixed { z-index:2; position:fixed; top:0;left:0; width:100%; background-color:#7A7A7A; padding-left:110px; } .tab-content { display:none; } .tab-content h2 { font-size:20px; font-weight: bold; border-bottom:1px solid #ADADAD; margin-bottom:20px; color:var(--main-color); letter-spacing:0; } .wrapper-general { margin-left:10px; min-height: 100%; height: 100%; width:98%; padding-left: 100px; } .wrapper-contain { background-color: #FFF; min-height: 110%; box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .fancybox__content { max-width: 850px !important; padding:0 !important; max-height: 100%; width: 80%; height: 98% !important; margin: 0; } .iframe input#submit { width: 100%; } a.export-to-csv { text-decoration: none; font-size:14px; float: right; color:#262626; background-color: #FFDB8E; padding: 7px 18px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } a.export-to-csv:hover { background-color: #FFD27A; } .feed { border: 1px solid #ccc; position: relative; padding: 15px; background: #fafafa; margin-bottom: 3px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .feed:hover { background: #FFFEEF; } .feed .private-feed { position: absolute; top:10px; right: 70px; color:#FFF; background-color:#F00; padding:1px 8px; font-size:12px; display:inline-block; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .feed-icon { float: left; } .feed-content { padding-left: 30px; } .activity-date { font-weight: 300; margin: 10px 0 5px 0; } .feed-title { font-weight: 500; font-size: 18px; line-height: 24px; margin-bottom: 10px; } .feed-title a { text-decoration: none; line-height: 24px; } .feed-desc { font-weight: 300; line-height: 24px; } .feed-desc p { margin-bottom: 10px; } .feed-desc ul { margin-left: 30px; } .feed-date { padding-left: 30px; margin-top: 10px; font-size:13px; font-weight: 300; color:#8C8C8C; } .feed-content p:last-of-type{ margin-bottom: 0; } .feed-client-logo { float:right; margin: 0 10px; } .user-thumb { display: inline-block; width: 40px; height: 40px; overflow: hidden; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .feed-image { margin-bottom: 20px; max-width: 768px; max-height: 768px; overflow: hidden; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .feed-modify a { font-size:12px; color:#939393; } .feed-modify a:hover { color:#000000; } .feed { margin-bottom: 10px; } .feed-intro { margin-bottom: 4px; color:#878787; font-weight: 300; } .feed-thumb { float: right; margin: 0 10px; width: 60px; height:60px; } .feed-content .user-thumb { width: 60px; height:60px; } .feed-edit { font-size:14px; color:#878787; font-weight: 300; display: inline-block; } .feed a.answer { font-size:14px; text-decoration: none; color:#FFF; background-color: #47B247; display: inline-block; margin: 3px 0; padding: 3px 7px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .feed a.answer:hover { font-size:14px; text-decoration: none; color:#FFF; background-color: #429E43; } .feed-answers { margin-top:30px; } .feed-answer { border: 1px solid #ccc; padding: 15px; background: #fafafa; margin-bottom: 3px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .feed-answer-date { padding: 0px; margin-top: 10px; font-size:13px; font-weight: 300; color:#8C8C8C; } .feed-like-box { text-align: right; } .feed-like-button { color:#545454; padding:4px 10px; text-align: center; display:inline-block; font-size:20px; } .feed-like-button.liked { color:#3F95FF; } .feed-viewed.action { color:#FFF; text-align: center; font-size:15px; display:inline-block; position:absolute; top:10px; right:5px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .feed-viewed.action i { margin:0; } p.section-title { border-bottom: 1px solid #141414; font-weight: bold; font-size:15px; } p.sub-section-title { text-transform: uppercase; border-bottom: 1px solid #eee; font-weight: 700; } p.note { background-color:#FFE2B5; color:#383838; border: 1px solid #F9D093; padding: 10px 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .align-left { float:left; margin-right: 20px; } .align-right { float:right; margin-left: 20px; } .align-center { text-align: center; } a.quick-notes { padding:15px; background-color: #FFFFC4; color:#262626; text-decoration: none; display: block; margin-bottom: 10px; word-break: break-all; } a.quick-notes:hover { background-color: #F9F9A7; text-decoration: none; color:#000; } ul.reports-list { margin: 0; padding: 0; } ul.reports-list li { list-style: none; } ul.reports-list li a { display: block; margin-bottom: 3px; padding:15px 25px; text-decoration: none; border: 1px solid #E2E2E2; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } ul.reports-list li a:hover { background-color:#E2E2E2; color:#000; } .proposal-not-viewed { font-weight:bold; background-color:#FFFEED; } .feed-not-viewed { border:3px solid #282828;} .actions-in-table { text-align: right; } a.action { margin-bottom:1px; display: inline-block; padding:5px 10px; background-color:var(--main-color); color:#FFF; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } a.action i { margin-right:6px; } a.action.action-icon-only i { margin-right:0; } a.action:hover { background-color:var(--main-color-hover); } .proposal-preview { display:block; } .proposal-preview-box { margin-bottom:30px; } input.monument-size, input.base-size { width:65px; text-align: center; margin-right:3px; } select#monument_unite { width:100px; } select#base_unite { width:100px; } label.input-price { display:block; } input.input-price { width:160px; } #add_file_box { display:block; text-align: center; width:100%; text-decoration: none; padding:20px; margin-bottom:30px; border:2px dashed #444444; background-color:#EAEAEA; font-size:20px; } #add_file_box:hover { background-color: #AAAAAA; text-decoration: none; } .sketch-prev { border: 1px solid #D1D1D1; padding:20px; margin-bottom:10px; } .sketch-prev.highlighted { border: 1px solid #FFE591; background-color:#FFF6DB; } .sketch-image { float:left; margin-right:20px; width:200px; } .sketch-content { float:left; } .delete-sketch { color:#DD0000; } .send-sketch-approbation { display:block; font-size:14px; } .send-approbation-success { font-size:bold; color:#05AF00; } .file-refused { font-weight:bold; color:#C40000; } .file-accepted { font-weight:bold; color:#05AF00; } label[for="extra_leveling"], label[for="extra_collage"], label[for="extra_date"], label[for="extra_photo"] { display:block; padding:10px; margin-top:28px; margin-bottom:10px; border:1px solid #CCCCCC; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } table.price-summary tr td { text-align: right; } input.input-rebate { text-align: right; padding:2px; width:100px; margin:0; } input.input-rebate-code { text-align: right; padding:2px; width:100px; margin:0 12px 0 0; } input#extra_date_detail { width: 150px; } table tr.line-bold { border-top:3px solid #000; } .payment-box { width:98%; max-width:500px; padding:30px; background-color:#FFF; margin: auto; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .payment-box-head { background-color: var(--main-color); text-align: center; padding: 30px; margin-top:10px; margin-bottom:20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .payment-box p.total-due { color:#FFF; font-size:36px; line-height: 40px; font-weight: bold; } .payment-box p.total-title { color:#FFF; font-size:20px; line-height: 24px; } .payment-box p.proposal-detail { color:#FFF; font-size:14px; line-height: 20px; margin:0; } .approval-box { width:98%; max-width:1024px; margin:auto; padding-bottom:30px; } .sketch-box { width:100%; padding:30px; margin-bottom:20px; background-color:#FFF; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .sketch-box p.no { margin:0; font-size:20px; } .sketch-box h1 { font-size:24px; font-weight:bold; color:#000; } .sketch-box p.address { font-size:15px; line-height: 24px; } #payment-form input[type="submit"] { width:100%; } .payment-custom-card-box input#card_number { font-size:20px; } .payment-custom-card-box input#card_cvv { font-size:20px; } .payment-custom-card-box input#postal_code { font-size:20px; text-transform: uppercase; } #payment-form input::placeholder { color:#BFBFBF; } .contact-method { margin-bottom:15px; border:1px solid #C9C9C9; padding:10px 15px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } a.print-button { color:#FFF; background-color:#666666; font-size:15px; margin-bottom:2px; padding:5px 12px; text-align: center; text-decoration: none; display: inline-block; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } a.print-button:hover { background-color: #545454; } .send-proposal-approb i { font-size:30px;height:100%; float:left; padding-top:10px; padding-right:10px; } .green-check { color:#34BC52; } .red-check { color:#F7E30C; } .proposal-header { text-align: right; } .proposal-header p { font-size:15px; line-height: 20px; margin:0; } .proposal-address { border-left:1px solid #D8D8D8; padding:10px; font-size:14px; margin:0; } .client-feed-box { border: 1px solid #C9C9C9; padding: 12px; margin-bottom: 5px; } p.client-feed-date { margin: 0; font-size:12px; font-style: italic; } p.client-feed-desc { margin: 0; font-weight: bold; } a.client-feed-action { margin: 10px 0 0 0; font-size:12px;} span.client-feed-private { color:#fff; background-color: #CE0000; padding:2px 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .proposal-comments-list { display:none; margin-top:20px; } #soumission-form p.title { font-size:15px; font-weight: bold; margin-bottom: 0; color:#056f5e; } #soumission-form p.price { font-size:14px; font-weight: bold; float: right; margin-bottom: 4px; margin-top: -40px; margin-right: 10px; } #soumission-form .ckeditor p { margin-bottom: 0; font-size:14px; line-height:16px; margin-bottom: 4px; color:#606c76; } .proposal-files { margin-bottom:10px; } .proposal-total { font-size:18px; line-height: 22px; margin: 2px 0; } .approbation-option { float:left; width:32.33%; margin:0 1% 0 0; border:1px solid #DBDBDB; } .approbation-option-content { padding:20px; text-align: center; min-height:270px; } .approbation-option-content i { font-size:50px; margin-bottom:12px; } .approbation-option-content span {display:block;} .approb-acceptation { color:#44B200; background-color: #DAFCD1; border:1px solid #44B200; } .approb-acceptation:hover { cursor:pointer; background-color: #B3EAA4; } .approb-refused { color:#AF0000; background-color: #FFDBDB; border:1px solid #AF0000; padding-top:30px; } .approb-refused:hover { cursor:pointer; background-color: #FCA4A4; } .sketch-sending-box { display:block; position:fixed; z-index:100000; top:0; left:0; right:0; bottom:0; background-image: url(../images/bg_trans.png); } .sketch-sending-box-content { max-width:500px; background-color:#FFF; padding:30px; margin: auto; text-align: center; margin-top:10%; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; } .approbation-option-content.selected { border:3px solid #000; } .close-modal { display:block; margin-top:20px; } #refused_error_message { display: none; } .proposal-notes { font-size:12px; margin:20px 0 0 0; } .proposal-notes ul { margin:0; } .proposal-notes li { margin:0 0 5px 0; } .signature-client { display: none; } .feed-box { border: 1px solid #C9C9C9; padding: 12px; margin-bottom: 5px; } p.proposal-feed-date { margin: 0; font-size:12px; font-style: italic; } .proposal-feed-text, .proposal-feed-text p { font-weight: bold; margin:0; color:#4F4F4F; } .proposal-accepted { color:#57B500; } .proposal-refused { color:#C90000; margin-bottom:0; } .proposition-flag-hide-all { float:right; margin-left:12px; } .proposal-status-client { color:#FFF; background-color:#282828; font-weight:bold; display:inline-block; font-size:12px; line-height: 12px; padding:4px 6px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .view-only { display:inline-block; font-size:13px; line-height:12px; float:right; letter-spacing:0; color:#FFF; background-color:#FC0000; padding:3px 6px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .proposal-status-paid, .proposal-status-partial {display: inline-block;padding: 20px 40px;font-weight: 900;font-size: 2em;margin: 20px 0;text-align: center;text-transform: uppercase;letter-spacing: 4px;transform: rotate(-7deg);position: relative;width: auto;float: right;clear: both;border: 6px double;border-radius: 0;text-shadow: 1px 1px 0 rgba(0,0,0,0.1); } .proposal-status-paid {color: #ff0000;border-color: #ff0000;font-size: 1.5em;padding: 15px 30px; } .proposal-status-partial {color: #000;border-color: #000;font-size: 1.5em;padding: 15px 30px; } .blocked { position: fixed; z-index: 11; bottom:0; left: 0; width: 100%; background-color: #FF7F00; color:#FFF; padding: 13px; font-size: 15px; text-align: center; } .sp-replacer { width: 140px !important; float:right !important; } .ccv-help { position:absolute; right:16px; top:46%; } .response { position:relative; border:1px solid #FF5900; background-color:#FFD8D8; padding:10px; } .response .action-required { position:absolute; top:10px; right:-140px; color:#FFF; background-color:#CC4300; padding:2px 6px; font-size:15px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; } .pagination { padding: 20px 0; text-align: center; } .page-link { display: inline-block; padding: 3px 10px; margin-right: 2px; text-decoration: none; border:1px solid #D3D3D3; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .page-link:hover, .page-link.current { background-color: #D3D3D3; color:#000; } span.filename { display:none; } .first-step { width: 50%; } .button.convert-in-proposal { background-color: #5bb85d; } .button.convert-in-proposal:hover { background-color: #42A543; } .customer-creation { border: black 1px solid; padding: 10px 0px 0px 0px; margin: 30px 0px; border-radius: 5px; background-color: gainsboro;} .customer-creation h2, .customer-creation p { padding: 0px 20px; } .additionnal-details { border: black 1px solid; padding: 10px 0px 0px 0px; margin: 30px 0px; border-radius: 5px; background-color: gainsboro; } .additionnal-details h2, .additionnal-details p { padding: 0px 20px; } table.proposal-request-data tr th, table.proposal-request-data tr td { padding: 5px 20px; } table.proposal-request-data { margin-bottom: 0px; } i.fas.fa-check-circle { color:#046f5f; font-size: 25px;} .photos-client { margin:20px 0; } .photos-client .photos-client-box { display:inline-block; width:20%; float:left; text-align: center; padding:5px; } .report-filter { margin:30px 0; } .report-filter input, .report-filter select { width:auto; } /* ============================================================================ 14 - MEDIAS QUERIES ========================================================================== */ /* XXLARGE SCREEN */ @media only screen and (max-width : 1680px) { } /* XLARGE SCREEN */ @media only screen and (max-width : 1440px) { } /* LARGE SCREEN */ @media only screen and (max-width : 1280px) { } /* MEDIUM SCREEN */ @media only screen and (max-width : 1024px) { } /* INTER SCALE */ @media only screen and (max-width : 960px) { } /* SMALL SCREEN */ @media only screen and (max-width : 768px) { } /* INTER SCALE */ @media only screen and (max-width : 640px) { .wrapper-general { width:98%; padding-left: 0px; } } /* XSMALL SCREEN */ @media only screen and (max-width : 479px) { } /* ============================================================================ 15 - ANIMATIONS ========================================================================== */ @-webkit-keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes rotate { 100% { transform: rotate(360deg); } } @-webkit-keyframes dash { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } } @keyframes dash { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } } .login-form { max-width: 400px; margin: 0 auto; } .login-form .input_username, .login-form .input_password { position: relative; margin-bottom: 15px; } .login-form .input_username i, .login-form .input_password i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #606c76; font-size: 18px; z-index: 1; } .login-form input[type="text"], .login-form input[type="password"] { padding-left: 45px; height: 50px; font-size: 16px; border: 1px solid #ccc; background-color: #fff; margin-bottom: 0; } .login-form input[type="submit"] { width: 100%; margin-top: 15px; background-color: var(--main-color); border-bottom-color: var(--main-color-hover); } .login-form input[type="submit"]:hover { background-color: var(--main-color-hover); }