:root { --box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%); --black : #000000; --grey : #f5f5f5; --dark-grey : #666666; --white : #ffffff; --red : #ff0000; --cyan : #0096f6; --primary-light: #8abdff; --primary: #6d5dfc; --primary-dark: #5b0eeb; --white: #FFFFFF; --greyLight-1: #E4EBF5; --greyLight-2: #c8d0e7; --greyLight-3: #bec8e4; --greyDark: #9baacf; } *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #enable-notifications{display:none !important;} a{text-decoration:none !important;} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, textarea{ margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; font-family: proxima-nova, sans-serif; font-weight: 300; font-style: normal; } button{font-family: proxima-nova, sans-serif;} input[type="submit"]{ font-family: proxima-nova, sans-serif; font-weight: 300 !important; font-style: normal; font-size:1rem !important; } input[type="text"],input[type="number"],input[type="date"],input[type="datetime-local"],input[type="password"],textarea,select{ font-family: proxima-nova, sans-serif; font-weight: 300 !important; font-style: normal; font-size: 1rem !important; } html { margin:0px !important; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } .wp-editor-wrap{width:100%;} p{font-family: proxima-nova, sans-serif; font-weight: 300; font-style: normal;} h2{font-weight:200; font-size:2rem; margin-bottom:1rem;} strong{font-weight:bold;} #wpadminbar{bottom:0px; top:unset !important;} @-webkit-keyframes waves { 0% { transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { transform: scale(2); opacity: 0; } } @keyframes waves { 0% { transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { transform: scale(2); opacity: 0; } } .department_tag{height:22px; display:flex; justify-content:center; align-items:center; border-radius:100px; padding:0px 1rem;} /* PLAY BUTTON */ .circle { grid-column: 2/3; grid-row: 4/6; width: 9rem; height: 100%; justify-self: center; border-radius: 1rem; display: grid; grid-template-rows: 1fr; justify-items: center; align-items: center; } .circle__btn { grid-row: 1/2; grid-column: 1/2; width: 6rem; height: 6rem; display: flex; margin: 0.6rem; justify-content: center; align-items: center; border-radius: 50%; font-size: 3.2rem; color: var(--primary); z-index: 300; background: var(--greyLight-1); box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); cursor: pointer; position: relative; } .circle__btn.shadow { box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white); } .circle__btn .play { position: absolute; opacity: 0; transition: all 0.2s linear; } .circle__btn .play.visibility { opacity: 1; } .circle__btn .pause { position: absolute; transition: all 0.2s linear; } .circle__btn .pause.visibility { opacity: 0; } .circle__back-1, .circle__back-2 { grid-row: 1/2; grid-column: 1/2; width: 6rem; height: 6rem; border-radius: 50%; filter: blur(1px); z-index: 100; } .circle__back-1 { box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2), -0.4rem -0.4rem 0.8rem var(--white); background: linear-gradient(to bottom right, var(--greyLight-2) 0%, var(--white) 100%); -webkit-animation: waves 4s linear infinite; animation: waves 4s linear infinite; } .circle__back-1.paused { -webkit-animation-play-state: paused; animation-play-state: paused; } .circle__back-2 { box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2), -0.4rem -0.4rem 0.8rem var(--white); -webkit-animation: waves 4s linear 2s infinite; animation: waves 4s linear 2s infinite; } .circle__back-2.paused { -webkit-animation-play-state: paused; animation-play-state: paused; } .page_text a{color:#000; text-decoration:underline !important;} .cb_button{position:fixed; bottom:44px; right:22px; display:flex; justify-content:center; align-items:center; width:44px; height:44px; box-shadow:var(--box-shadow); border:solid thin var(--grey); background:var(--grey); border-radius:100px; transition:all .6s; outline:none; cursor:pointer; font-size:1rem; font-weight:200; z-index:99;} .cb_button ion-icon{font-size:22px;} .cb_button:hover{border:solid thin var(--dark-grey); background:var(--dark-grey); color:var(--white);} .button{color:#000; cursor:pointer; width:100%; font-weight:200; border:solid thin #c5c5c5; border-radius:5px; height:44px; padding:11px; outline:none; } .button:hover{transition:all .6s; border:solid thin #dbebff; background:#dbebff;} input[type="text"]{width:100%; min-width:100%; font-weight:200; border:solid thin #c5c5c5; border-radius:5px; height:44px; padding:11px; outline:none; } input[type="text"]:focus{transition:all .6s; border:solid thin #dbebff; background:#dbebff;} input[type="email"]{width:100%; min-width:100%; font-weight:200; border:solid thin #c5c5c5; border-radius:5px; height:44px; padding:11px; outline:none; } input[type="email"]:focus{transition:all .6s; border:solid thin #dbebff; background:#dbebff;} input[type="tel"]{width:100%; min-width:100%; font-weight:200; border:solid thin #c5c5c5; border-radius:5px; height:44px; padding:11px; outline:none; } input[type="tel"]:focus{transition:all .6s; border:solid thin #dbebff; background:#dbebff;} input[type="date"]{width:100%; min-width:100%; font-weight:200; border:solid thin #c5c5c5; border-radius:5px; height:44px; padding:11px; outline:none;} input[type="date"]:focus{transition:all .6s; border:solid thin #dbebff; background:#dbebff;} input[type="datetime-local"]{width:100%; min-width:100%; font-weight:200; border:solid thin #c5c5c5; border-radius:5px; height:44px; padding:11px; outline:none;} input[type="datetime-local"]:focus{transition:all .6s; border:solid thin #dbebff; background:#dbebff;} input[type="password"]{width:100%; font-weight:200; border:solid thin #c5c5c5; border-radius:5px; height:44px; padding:11px; outline:none;} input[type="password"]:focus{transition:all .6s; border:solid thin #dbebff; background:#dbebff;} input[type="submit"]{width:auto; padding:0px 22px; box-shadow:var(--box-shadow); border:solid thin var(--grey); background:var(--grey); border-radius:5px; height:44px; outline:none; cursor:pointer; font-size:1rem; font-weight:200;} input[type="submit"]:hover{transition:all .6s; border:solid thin var(--dark-grey); background:var(--dark-grey); color:var(--white);} textarea{width:100%; border:solid thin #c5c5c5; border-radius:5px; height:44px; padding:11px 11px; outline:none; min-height:400px;} textarea:focus{transition:all .6s; border:solid thin #dbebff; background:#dbebff;} select{width:100%; font-weight:400; border:solid thin #c5c5c5; border-radius:5px; height:44px; padding:0px 11px; outline:none;} select:focus{transition:all .6s; border:solid thin #dbebff; background:#dbebff;} .inner_modal{width:100%; box-shadow:var(--box-shadow); height:44px; display:flex; justify-content:flex-start; align-items:center; padding: 0px 22px; background: var(--grey); border-left: solid 5px green; margin-bottom:22px;} .modal{width:100%; box-shadow:var(--box-shadow); height:44px; display:flex; justify-content:flex-start; align-items:center; position: fixed; top: 22px; left: 5%; padding: 0px 22px; background: var(--grey); border-left: solid 5px green;} .modal_options{margin-top:1rem; width:100%; display:flex; justify-content:space-between; align-items:center;} .modal_button{width:calc(50% - 1rem) !important;} .modal_button_yes{background:var(--cyan); color:var(--white); border:solid thin var(--cyan);} .modal_button_yes:hover{background:#2372a5;} .modal_button_no{background:var(--red); color:var(--white); border:solid thin var(--red);} .modal_button_no:hover{background:#9d0a0e;} .modal_error{border-left: solid 5px red;} .delete_modal{width:400px; padding:22px; background:var(--white); text-align:center; box-shadow:var(--box-shadow); min-height:100px; border-radius:10px; position:fixed; top:22px; left:50%; transform:translateX(-50%); z-index:9999;} .delete_modal span{color:var(--cyan);} .complete_button{display:flex; justify-content:center; align-items:center; border-radius:5px;} .popup_modal{width:100vw; height:100vh; background:rgba(0,0,0,.3); position:fixed; top:0px; left:0px; z-index:9999999999999999; display:none; justify-content:center; align-items:center;} .popup_modal_open{display:flex !important;} .popup_modal_form{background:#e9e9e9; border-radius:22px; width:500px; padding:1rem;} .project_data_checkbox{display:none;} .mydata_button{margin-top:.5rem; width:100%; background:#fff; border-radius:.3rem; display:flex; justify-content:center; align-items:center; flex-direction:column; padding:.5rem; } .mydata_button img{width:auto; height:auto; max-width:100%; max-height:22px;} .mydata_button_complete{background:#a0c7d9 !important; color:#fff;} .mydata_button_pending{background:#ffc94b !important; color:#2e405a; font-weight:bold; cursor:pointer;} .payment_cont{width:100%; min-height:100vh; display:flex; justify-content:center; align-items:Center;} .payment_dock{margin:99px 22px; padding:2rem; background:#e9e9e9; min-width:300px; width:90%; max-width:1200px; border-radius:3rem; height:max-content; border:solid thin #c9c9c9; box-shadow:0 1px 3px 0 rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%) !important;} .payment_logo{width:100%; height:88px;} .payment_logo img{width:auto; height:auto; max-width:100%; max-height:100%;} .payment_info{border-radius:1rem; position:fixed; color:#fff; top:22px; left:50%; transform:translateX(-50%); background:var(--primary-light); min-height:44px; width:90%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; padding:.5rem 1rem;} .payment_info a{margin:0px 4px; color:#fff; text-decoration:underline !important;} .payment_form .col2{margin-bottom:0px !important;} .payment_form .col2 .request_field{margin-bottom:1rem !important;} .general_info{background:#777; width:max-content; height:33px; border-radius:5px; padding:0px 11px; display:flex; justify-content:flex-end; align-items:center; gap:11px;} .general_info_item{font-size:12px; cursor:pointer; background:#d9d9d9; color:#333; font-weight:500; min-width:16px; height:22px; border-radius:5px; padding:0px 6px; display:flex; justify-content:center; align-items:center;} #install-pwa-btn{border:none;} .pwa-not-installed{background:#000; color:#fff;} .pwa-installed{background:#6cff6c; color:#333;} .ios_install_hint {position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: none; z-index: 9999; align-items: center; justify-content: center;} .ios_install_hint_inner {background: #fff; color: #000; max-width: 90%; width: 320px;padding: 16px 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); font-size: 14px;} .ios_install_hint_inner ol {padding-left: 18px; margin: 8px 0 16px;} #enable-push-btn{ border:none; bottom:22px; right:22px;} #enable-push-btn svg{width:16px;} #enable-push-btn.notification_inactive{background:#000 !important;} #enable-push-btn.notification_inactive svg path{stroke:#fff;} #enable-push-btn.notification_active{background:#6cff6c !important;} #enable-push-btn.notification_active svg path{stroke:#333 !important;} .top_bar_tools{display:flex; justify-content:flex-start; align-items:center; gap:11px;} .big_button_pwa{width:100%; margin-top:33px; font-size:18px; height:44px;} .button_grey{background:#000; color:#fff; width:max-content; padding:0px 11px; height:33px; display:flex; justify-content:center; align-items:center; border-radius:5px;} @media screen and (min-width: 1280px) { #ajax-alerts{margin-bottom:11px;} .alert{width:100%; display:flex; justify-content:flex-start; align-items:center; gap:4px; padding:0px 11px; height:33px; border-radius:5px; } .alert-success{background:#68d568; color:#000;} .ticket_container{position:relative; width:100%;} .tickets_list{width:100%; } .tickets_list ul{width:100%; list-style:none; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:11px;} .tickets_list ul li{background:#f9f9f9; width:100%; border-radius:5px; overflow:hidden;} .ticket-li-subject{padding:8px 11px; color:#000;} .tickets_list ul li a{width:100%;} .ticket-li-head{padding:0px 11px; height:33px; background:#000; width:100%; display:flex; justify-content:space-between; align-items:center;} .ticket_id{font-weight:bold; color:#fff;} .ticket-li-meta{display:flex; justify-content:flex-start; align-items:center; gap:4px;} .ticket-li-meta .ticket-li-client{color:#fff; font-size:14px;} .ticket-li-meta .ticket-li-contact{color:#fff; font-size:14px;} .ticket-pill{border-radius:5px; height:18px; font-size:12px; width:max-content; padding:0px 8px; display:flex; justify-content:center; align-items:center;} .ticket-pill.st-open{background:#6cff6c; color:#000;} .ticket-pill.pill-delete{border:none; background:red; color:#fff;} .ticket-pill.pill-read{background:#7360f2; color:#fff;} .ticket-pill.pill-unread{background:#fff; color:#000;} .ticket-li-foot{background:#a9a9a9; height:33px; width:100%; display:flex; justify-content:space-between; align-items:center; padding:0px 11px;} .ticket-li-date{color:#fff; font-size:14px;} .ticket-li-actions{display:flex; justify-content:center; align-items:center; gap:8px;} .new_ticket_button{border-radius:5px; background:#000; color:#fff; height:33px; display:flex; justify-content:center; align-items:center; width:max-content; padding:0px 11px; font-size:14px; cursor:pointer;} .new_ticket_open{bottom:0px !important;} .new_ticket{transition:all .6s; position:fixed; z-index:99999; bottom:-500px; right:0px; padding:22px; width:calc(100% - 44px);} .new_ticket button{border:none; } .new_ticket label{font-size:14px; } .new_ticket .form-group{display:flex; flex-direction:column; gap:6px;} .new_ticket_cont{background:#fff; width:100%; border:solid thin #e9e9e9; right:22px; padding:22px; border-radius:15px;} .new_ticket_two_cols{margin:11px 0px; width:100%; display:flex; justify-content:flex-start; align-items:stretch; gap:22px; } .new_ticket_two_cols .form-group:first-child{width:60%; } .new_ticket_two_cols .form-group:last-child{width:40%; } .new-ticket-submit{margin-top:11px; width:100%; height:44px; display:flex; justify-content:center; align-items:center; background:#000; color:#fff; border-radius:5px; font-size:14px;} .single_ticket{width:100%; } .single_ticket_header{padding:0px 11px; width:100%; display:flex; justify-content:space-between; align-items:center;} .return_to_tickets{border-radius:5px; background:#000; color:#fff; height:33px; display:flex; justify-content:center; align-items:center; width:max-content; padding:0px 11px; font-size:14px; cursor:pointer;} .single_ticket_info{padding:0px 11px; width:100%; display:flex; justify-content:flex-start; align-items:center; gap:6px;} .ticket_container {display: flex; gap: 24px; align-items: flex-start; margin-top: 24px;} .new_ticket_two_cols {display: flex; gap: 24px; align-items: flex-start;} .ticket-dropzone {border: 2px dashed #ccc; border-radius: 6px; padding: 16px; text-align: center; cursor: pointer; font-size: 0.95em; color: #666; margin-bottom: 6px; transition: background-color 0.2s, border-color 0.2s;} .ticket-dropzone.is-dragover {background-color: #f0f8ff; border-color: #007bff;} .ticket-file-list { font-size: 0.9em; color: #444; } .ticket-file-item { border-bottom: 1px solid #eee; padding: 6px 0 8px; margin-bottom: 4px; } .ticket-file-header { display: flex; justify-content: space-between; align-items: center; font-weight: 500; margin-bottom: 4px; gap: 8px; } .ticket-file-remove { border: none; background: transparent !important; color: #dc3545; font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1; } .ticket-file-remove:hover { color: #a71d2a; } .ticket-file-preview img.ticket-file-thumb { max-width: 140px; max-height: 140px; border-radius: 4px; display: block; margin-top: 4px; } .ticket-file-preview audio { width: 100%; margin-top: 4px; } .ticket-file-preview pre { max-height: 140px; overflow: auto; background: #f8f9fa; padding: 6px; border-radius: 4px; margin-top: 4px; white-space: pre-wrap; word-break: break-word; } /* Chat UI */ .chat-thread{ display:flex; flex-direction:column; gap:12px; margin-top:12px; max-height: calc(100vh - 340px); overflow:auto; padding-right:6px; scroll-behavior:smooth; } /* row that contains bubble */ .chat-msg{ display:flex; width:100%; } .chat-msg.mine{ justify-content:flex-end; } /* Εσύ ΔΕΞΙΑ */ .chat-msg.other{ justify-content:flex-start; }/* Άλλος ΑΡΙΣΤΕΡΑ */ /* bubble */ .chat-bubble{ max-width:min(760px, 85%); background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:12px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.06); } .chat-msg.other .chat-bubble{ background:#f6fbff; border-color: rgba(13,110,253,.18); } /* meta */ .chat-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; font-size:12px; color:#666; } .chat-author{ font-weight:600; color:#333; } .chat-time{ white-space:nowrap; opacity:.85; } /* body */ .chat-body{ font-size:14px; line-height:1.5; color:#222; } .chat-body img{ max-width:100%; height:auto; border-radius:10px; } /* attachments wrapper UNDER bubble (must be flex + full width) */ .chat-att-wrap{ display:flex; width:100%; margin-top:-6px; /* να "κολλάει" οπτικά με το bubble */ } .chat-att-wrap.mine{ justify-content:flex-end; } /* Εσύ ΔΕΞΙΑ */ .chat-att-wrap.other{ justify-content:flex-start; } /* Άλλος ΑΡΙΣΤΕΡΑ */ /* optional: keep attachments aligned with bubble width */ .chat-att{ max-width:min(760px, 85%); } /* seen */ .chat-seen{ margin-top:8px; font-size:12px; color:#6c757d; text-align:left; /* default για "other" (αριστερά) */ } .chat-msg.mine .chat-seen{ text-align:right; /* Εσύ δεξιά => seen δεξιά */ } /* (αν χρησιμοποιείς ακόμα το παλιό ul list κάπου) */ .chat-attachments{ margin-top:10px; padding-top:10px; border-top:1px dashed rgba(0,0,0,.12); } .chat-attachments ul{ margin:0; padding-left:18px; } .chat-attachments li{ margin:4px 0; } /* Chat composer (reply) */ .chat-composer { position: sticky; bottom: 0; z-index: 10; background: #fff; border-top: 1px solid rgba(0,0,0,.08); padding: 10px; margin-top: 12px; border-radius: 14px; } .chat-composer .composer-row { display: flex; gap: 10px; align-items: flex-end; } .chat-composer .composer-editor { flex: 1; min-width: 0; } /* TinyMCE iframe wrapper look like input */ .chat-composer .tox-tinymce { border-radius: 14px !important; border: 1px solid rgba(0,0,0,.12) !important; overflow: hidden !important; box-shadow: 0 6px 18px rgba(0,0,0,.05); } /* Hide “Powered by” + reduce clutter */ .chat-composer .tox-statusbar { display: none !important; } .voice-recorder {font-size: 0.9em; color: #444;} .voice-status {margin-left: 8px; display: inline-block;} .voice-btn{margin-top:11px; width:100%; height:44px; display:flex; justify-content:center; align-items:center; background:#000; color:#fff; border-radius:5px; font-size:14px;} .voice-btn.recording {background-color: #dc3545; border-color: #dc3545; color: #fff;} .voice-btn svg{height:33px;} .voice-recorder .btn.voice-btn {margin-top: 6px;} .list_container{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; gap:11px;} .list_container .line{padding-top:.5rem; border-radius:5px; border:solid thin #999; overflow:hidden; width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .list_container .l_col{width:50%; padding:0px 1rem .5rem;} .list_container .r_col{width:50%; display:flex; justify-content:flex-end; align-items:center; gap:1rem; padding:0px 1rem .5rem;} .list_container .small_text{font-size:12px; color:#999;} .list_container .ticket_title{font-weight:bold;} .list_container .ticket_info{} .list_container .ticket_footer{height:33px; padding:0px 1rem; background:var(--grey); font-size:12px; display:flex; justify-content:space-between; align-items:center; width:100%;} .list_container .badge{border-radius:5px; padding:0px 1rem; width:max-content; background:#000; color:#fff;} .badge_gray{background:var(--grey) !important;} .badge_yellow{background:orange !important;} /* WORDPRESS UPDATER */ .plugin_item{width:100%; display:flex; justify-content:space-between; align-items:center; font-size:12px;} .plugin_item:hover{background:#f9f9f9;} .plugin_item_actions{display:flex; justify-content:flex-end; align-items:Center; gap:1rem;} .plugin_item_actions select{height:22px;} .plugin_item_refresh_button ion-icon{font-size:14px; color:#000;} .plugin_item_refresh_button{cursor:pointer;} .core_item{width:100%; display:flex; justify-content:space-between; align-items:center; font-size:12px;} .core_item:hover{background:#f9f9f9;} .core_item_refresh_button ion-icon{font-size:14px; color:#000;} .core_item_refresh_button{cursor:pointer;} .theme_item{width:100%; display:flex; justify-content:space-between; align-items:center; font-size:12px;} .theme_item:hover{background:#f9f9f9;} .theme_item_refresh_button ion-icon{font-size:14px; color:#000;} .theme_item_refresh_button{cursor:pointer;} .self_item{width:100%; display:flex; justify-content:space-between; align-items:center; font-size:12px;} .self_item:hover{background:#f9f9f9;} .self_item_refresh_button ion-icon{font-size:14px; color:#000;} .self_item_refresh_button{cursor:pointer; display:flex; justify-content:center; align-items:Center; gap:1rem;} .self_item_actions{width:100%; display:flex; justify-content:center; align-items:Center;} .wordpress_loading ion-icon { animation: spin 1s linear infinite; display: inline-block; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* END OF WORDPRESS UPDATER */ /* SUBSCRIPTIONS */ .subscription_line_header{width:100%; display:grid; grid-template-columns:1fr 1fr 150px 150px 150px 150px 150px 150px; background:#000; border:solid thin #e9e9e9; margin-bottom:.5rem; height:44px;} .subscription_line_header div{color:#fff; justify-content:center; align-items:center;} .subscription_line{width:100%; display:grid; grid-template-columns:1fr 1fr 150px 150px 150px 150px 150px 150px; border:solid thin #e9e9e9; margin-bottom:.5rem; min-height:44px;} .subscription_aa{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; font-size:16px;} .subscription_type{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; flex-direction:column; overflow:hidden; font-size:14px;} .subscription_type span{font-size:12px;} .subscription_line_header .offer_client{font-size:16px; align-items:center !important; justify-content:center !important;} .subscription_client{border-right:solid thin #e9e9e9; display:flex; justify-content:flex-start; align-items:center; padding:0px 1rem; overflow:hidden; font-size:16px;} .subscription_contact{border-right:solid thin #e9e9e9; display:flex; justify-content:flex-start; align-items:center; padding:0px 1rem; overflow:hidden; font-size:16px;} .subscription_department{font-size:16px; border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .subscription_start{font-size:16px; border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .subscription_recurrent{font-size:16px; border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .subscription_status{font-size:16px; border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .subscription_tools{gap:22px; display:flex; justify-content:flex-end; align-items:center; padding:0px .5rem;} .subscription_tools ion-icon{font-size:16px; color:#fff;} .subscription_tool_item{ border-radius:5px; width:22px; height:22px; display:flex; justify-content:center; align-items:Center;} .subscription_edit{background:var(--cyan);} .subscription_duplicate{background:orange;} .subscription_delete{background:red;} .subscription_payment_link{background:orange; width:22px; height:22px; border-radius:5px; display:flex; justify-content:center; align-items:center;} .cb_create_post_option{display:flex; justify-content:center; align-items:center; flex-direction:column;} .thumbnail{position:relative;} .remove_uploaded_image{border-radius:100px; border:solid 2px #fff; width:22px; height:22px; display:flex; justify-content:center; align-items:center; background:#000; color:#fff; position:absolute; top:0px; right:0px;} .home_tasks_cont{width:100%; padding:1rem; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .task_item{width:100%;} .task_item_company_name{font-weight:bold;} .task_item_col{background:#e9e9e9; padding:5px 11px; width:100%; display:flex; justify-content:space-between; align-items:center;} .task_item_list_open{height:max-content !important;} .task_item_list{margin-bottom:1rem; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; height:0px; overflow:hidden;} .task_list_item{width:100%; display:flex; justify-content:center; align-items:center; border-bottom:solid thin #e9e9e9; padding:5px 11px; min-height:33px;} .task_list_item_name{width:50%;} .task_list_item_time{width:50%; text-align:right;} .calendar{width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; margin-bottom:2rem} .calendar_header{width:100%; display:flex; justify-content:space-between; align-items:center; padding:1rem; border-bottom:solid thin #e9e9e9;} .calendar_header_text{font-weight:bold;} .calendar_prev{cursor:pointer; background:#e9e9e9; display:flex; justify-content:center; align-items:center; width:44px; height:44px; border-radius:44px;} .calendar_next{cursor:pointer; background:#e9e9e9; display:flex; justify-content:center; align-items:center; width:44px; height:44px; border-radius:44px;} .calendar_body{margin-top:1rem; width:100%; overflow-x:auto; } .calendar_body_inner{display:grid; grid-template-columns:repeat(auto-fill,calc((100% / 7) - 2px)); grid-gap:1px;} .calendar_day{min-width:66px; min-height:66px; aspect-ratio:1; border:solid thin #e9e9e9; padding:1rem;} .current_day .day_name_info{background:var(--cyan);} .inactive_day{background:#e9e9e9;} .day_info{margin-bottom:.5rem; position:relative; display:flex; justify-content:flex-start; align-items:Center;} .inactive_day .day_name_info{background:#fff !important;} .inactive_day .day_number_info{background:#fff !important;} .day_name_info{font-size:12px; font-weight:bold; height:33px; width:max-content; border-radius:33px; padding-left:44px; padding-right:1rem; margin-left:-33px; background:#c2c2c2; order:2; z-index:1; display:flex; justify-content:flex-start; align-items:center;} .day_number_info{ background:#e9e9e9; width:33px; height:33px; border-radius:33px; display:flex; justify-content:center; align-items:center;font-size:12px; order:1; z-index:2;} .map_cont{width:100% !important; display:flex !important;} .map_cont #map{width:100%; height:400px; display:flex !important;} .events_counter{font-size:14px; font-weight:500; margin-bottom:.5rem;} .event_slide_left .event_item{margin-left:-265px;} .event_slide_left .event_delete{right:85px;} .event_slide_left .event_edit{right:35px;} .events_cont{width:100%; aspect-ratio:1.2; overflow-y:auto;} .event_element{width:100%; position:relative; overflow:hidden;} .event_element_inner{width:100%; display:flex; justify-content:center; align-items:center; position:relative;} .event_item{transition:all .6s; min-height:50px; position:relative; background:#b8ffb8; margin-bottom:.5rem; width:100%; border-radius:1rem; padding:.5rem;} .event_item_time{font-size:12px; font-weight:bold;} .event_item_desc{font-size:12px;} .event_item_location{position:absolute; top:.5rem; right:.5rem;} .event_item_location a{color:#000; font-size:16px;} .event_delete{border-radius:5px; transition:all .6s; width:33px; height:33px; background:red; position:absolute; top:50%; right:-44px; transform:translateY(-50%); display:flex; justify-content:center; align-items:center; color:#fff;} .event_edit{border-radius:5px; transition:all .6s; width:33px; height:33px; background:cyan; position:absolute; top:50%; right:-110px; transform:translateY(-50%); display:flex; justify-content:center; align-items:center; color:#fff;} .home_tile_events{min-height:150px; overflow-y:auto; width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; padding:1rem;} .home_tile_event{width:100%; background:#b8ffb8; min-height:44px; margin-bottom:1rem; display:flex; justify-content:space-between; align-items:Center; padding:0px .5rem;} .home_tile_event_time{font-size:14px; font-weight:bold; width:55px; display:flex; justify-content:center; align-items:Center;} .home_tile_event_desc{font-size:14px; width:100%; padding:0px .5rem; display:flex; justify-content:flex-start; align-items:center;} .home_tile_event_pin{font-size:14px; width:55px; display:flex; justify-content:center; align-items:Center;} .home_tile_event_pin a{font-size:16px; color:#000; display:flex; justify-content:center; align-items:Center; width:100%;} .event_full_date{font-weight:bold;} .charges_table{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; margin-top:2rem;} .charge_item{margin-bottom:1rem; width:100%; display:flex; justify-content:space-between; align-items:center;} .charge_item_name{width:100%; margin-right:1rem;} .charge_item_cost{width:200px;} .client_tabs{width:100%; display:flex; justify-content:flex-start; align-items:center;} .client_tab{height:44px; display:flex; justify-content:center; align-items:center; padding:0px 1rem; font-size:16px; color:#000; background:#f5f5f5; margin-right:1rem; cursor:pointer;} .client_tab span{margin-left:1rem; font-size:12px; width:max-content; height:22px; padding:0px .5rem; background:#ccc; display:flex; justify-content:center; align-items:center; border-radius:3px;} .client_tile_open{display:inline-block !important;} .client_tab_selected{background:#000 !important; color:#fff !important;} .client_tab_selected span{color:#000 !important;} .contact_name{font-weight:bold; font-size:16px;} .contact_code{font-size:14px;} .disclaimer{font-style:italic; font-size:12px; color:#999;} .home_contract_cont{width:100%; margin:1rem 0px;} .home_contract_company{cursor:pointer; width:100%; font-weight:bold; padding:0px 1rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;} .home_contract_dates{margin-bottom:.5rem; width:100%; padding:0px 1rem; display:flex; justify-content:center; align-items:flex-start; flex-direction:column; height:0px; overflow:hidden;} .home_contract_dates_inner{width:100%; padding:0px 1rem; display:flex; justify-content:space-between; align-items:center; height:33px;} .home_contract_dates_inner:nth-child(2n+1){background:#e9e9e9;} .home_contract_dates div:first-child{font-size:14px;} .home_contract_dates div:last-child{font-weight:bold; text-align:right; font-size:16px;} .home_contract_open{height:auto !important;} .home_contract_expires{width:100%; background:#000; color:#fff; padding:5.5px 1rem; font-weight:bold; text-align:right; font-size:12px;} .home_admin{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:Wrap;} .home_tile{margin-bottom:2rem; width:calc((100% / 3) - 1rem); margin-right: 1rem; border:solid thin #e9e9e9; border-radius:.5rem; box-shadow:2px 2px 4px #eee;} .home_tile_title{width:100%; height:33px; display:flex; justify-content:flex-start; padding:0px 1rem; align-items:center; font-weight:bold; font-size:2ch; background:#e9e9e9; } .home_tile_content{width:100%; display:grid; padding:1rem;} .home_tile_content_3col{grid-template-columns:calc(100% / 3) calc(100% / 3) calc(100% / 3);} .home_tile_col1{width:100%; aspect-ratio:1; padding:.5rem; display:flex; justify-content:center; align-items:center;} .home_tile_col2{width:100%; aspect-ratio:1; padding:.5rem; display:flex; justify-content:center; align-items:center;} .home_tile_col3{width:100%; aspect-ratio:1; padding:.5rem; display:flex; justify-content:center; align-items:center;} .home_tile_counter{cursor:pointer; width:100%; aspect-ratio:1; border-radius:500px; display:flex; justify-content:center; align-items:center; flex-direction:column;} .home_tile_counter span{font-weight:Bold; font-size:2vw;} .home_tile_counter_green{border:solid 10px green;} .home_tile_counter_orange{border:solid 10px orange;} .home_tile_counter_red{border:solid 10px red;} .home_quick_list_cont{width:100%; padding:0px 1rem; display:none; justify-content:center; align-items:center; flex-direction:column;} .home_quick_list{display:grid; grid-template-columns: 50% 50%; width:100%;} .home_quick_list div:first-child{font-weight:bold; font-size:14px;} .home_quick_list div:last-child{text-align:right;} .home_quick_list_open{display:flex !important;} .thankyou{width:100%; height:100vh; display:flex; justify-content:center; align-items:center; flex-direction:column; font-family: proxima-nova, sans-serif;} .thankyou img{width:100%; height:auto; max-width:500px; max-height:100%;} .thankyou div{font-size:1.6rem; text-align:center; margin-top:44px;} .company_information{width:100%; margin:0px .5rem 2rem; display:flex; justify-content:center; align-items:flex-start; flex-direction:column;} .company_information h2{font-size:1.5rem !important; font-weight:bold !important; margin-bottom:0px;} .hp_task_line_header{width:100%; background:#000; display:grid; grid-template-columns:44px 1fr 150px 150px 100px 150px; margin-bottom:1rem;} .hp_task_line_header div{color:#fff; height:44px; display:flex; justify-content:center; align-items:Center;} .hp_task_line{width:100%; display:grid; grid-template-columns:44px 1fr 150px 150px 100px 150px; margin-bottom:1rem; border-bottom:solid thin #333;} .hp_task_line div{height:44px; display:flex; justify-content:center; align-items:Center;} .hp_invoice_line_header{width:100%; background:#000; display:grid; grid-template-columns:44px 1fr 150px 110px; margin-bottom:1rem;} .hp_invoice_line_header div{color:#fff; height:44px; display:flex; justify-content:center; align-items:Center;} .hp_invoice_line{width:100%; display:grid; grid-template-columns:44px 1fr 150px 110px; margin-bottom:1rem; border-bottom:solid thin #333;} .hp_invoice_line div{height:44px; display:flex; justify-content:center; align-items:Center;} .client_tiles_cont{display:flex; width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .client_tile{display:none; min-height:200px; padding:1rem; box-shadow:var(--box-shadow); border-radius:.5rem; background:#f5f5f5; margin:2rem .5rem 0px; width:100%;} .client_tile h2{font-size:1.5rem !important; font-weight:bold;} .client_tile h3{font-size:1.2rem !important; font-weight:bold;} .client_tiles_cont_inner{width:100%; padding:1rem; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap;} .tile_item{width:250px; padding:1rem; margin-right:1rem;} .expiration_circle{border-radius:1000px; width:100%; aspect-ratio:1; display:flex; justify-content:center; align-items:center; flex-direction:column;} .expiration_circle span{font-size:2rem; font-weight:bold;} .expiration_cirlce_orange{border:solid 11px orange;} .expiration_cirlce_red{border:solid 11px red;} .expiration_cirlce_green{border:solid 11px green;} .tile_item_name{font-weight:bold; font-size:14px; width:100%; text-align:center; margin-bottom:1rem;} .page_logo{width:100%; height:66px; margin-bottom:2rem;} .page_logo img{width:auto; height:auto; max-width:100%; max-height:100%;} .order_aa_header{display:none;} .order_type_header{display:none;} .order_client_header{display:none;} .order_date_header{display:none;} .order_date_header{display:none;} .order_code_header{display:none;} .order_tools_header{display:none;} .order_line_header.communication{grid-template-columns:50px 150px 1fr 150px 170px 150px 150px 100px 100px 100px !important;} .order_line.communication{grid-template-columns:50px 150px 1fr 150px 170px 150px 150px 100px 100px 100px !important;} .order_line:hover{background:#f9f9f9;} .order_line_header{width:100%; display:grid; grid-template-columns:250px 150px 1fr 150px 150px 150px 150px 150px; background:#000; border:solid thin #e9e9e9; margin-bottom:.5rem; height:44px;} .order_line_header div{color:#fff; justify-content:center; align-items:center;} .order_line{width:100%; display:grid; grid-template-columns:250px 150px 1fr 150px 150px 150px 150px 150px; border:solid thin #e9e9e9; margin-bottom:.5rem; min-height:44px;} .order_aa{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; font-size:12px;} .order_type{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; flex-direction:column; overflow:hidden; font-size:14px;} .order_type span{font-size:12px;} .order_line_header .order_client{font-size:16px; align-items:center !important; justify-content:center !important;} .order_client{border-right:solid thin #e9e9e9; display:flex; justify-content:flex-start; align-items:center; padding:0px 1rem; overflow:hidden; font-size:12px;} .order_date{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .order_line .order_code{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; font-size:12px; text-align:center;} .order_code{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .order_tools{display:flex; justify-content:flex-end; align-items:center; padding:0px .5rem;} .order_tools ion-icon{font-size:16px; color:#fff;} .order_payment_link{background:orange; width:22px; height:22px; border-radius:5px; display:flex; justify-content:center; align-items:center;} /* OFFERS */ .offer_aa_header{display:none;} .offer_type_header{display:none;} .offer_client_header{display:none;} .offer_date_header{display:none;} .offer_date_header{display:none;} .offer_code_header{display:none;} .offer_tools_header{display:none;} .offer_line_header{width:100%; display:grid; grid-template-columns:250px 1fr 150px 150px 150px 150px 150px 150px; background:#000; border:solid thin #e9e9e9; margin-bottom:.5rem; height:44px;} .offer_line_header div{color:#fff; justify-content:center; align-items:center;} .offer_line{width:100%; display:grid; grid-template-columns:250px 1fr 150px 150px 150px 150px 150px 150px; border:solid thin #e9e9e9; margin-bottom:.5rem; min-height:44px;} .offer_aa{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; font-size:16px;} .offer_type{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; flex-direction:column; overflow:hidden; font-size:14px;} .offer_type span{font-size:12px;} .offer_line_header .offer_client{font-size:16px; align-items:center !important; justify-content:center !important;} .offer_client{border-right:solid thin #e9e9e9; display:flex; justify-content:flex-start; align-items:center; padding:0px 1rem; overflow:hidden; font-size:16px;} .offer_date{font-size:16px; border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .offer_line .offer_date{font-size:12px !important;} .offer_line .offer_code{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; font-size:16px; text-align:center;} .offer_code{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .offer_tools{gap:22px; display:flex; justify-content:flex-end; align-items:center; padding:0px .5rem;} .offer_tools ion-icon{font-size:16px; color:#fff;} .offer_tool_item{ border-radius:5px; width:22px; height:22px; display:flex; justify-content:center; align-items:Center;} .offer_edit{background:var(--cyan);} .offer_duplicate{background:orange;} .offer_delete{background:red;} .offer_payment_link{background:orange; width:22px; height:22px; border-radius:5px; display:flex; justify-content:center; align-items:center;} .new_contact{width:100%;} .footer{width:100%; background:var(--grey); height:44px; display:flex; justify-content:center; align-items:center;} .footer_container{width:95vw; height:44px; display:flex; justify-content:space-between; align-items:center;} .footer .col1{width:50%; display:flex; justify-content:flex-start; align-items:center; height:44px; margin:0px !important; } .footer .col2{width:50%; display:flex; justify-content:flex-end; align-items:center; height:44px; margin:0px !important; font-size:.8rem;} .footer .col2 img{margin-left:1rem; width:auto; height:auto; max-width:22px; max-height:22px;} .footer_item{margin-right: 1rem; position: relative; height: 44px; display: flex; justify-content: flex-start; align-items: center;} .footer_item:after{content:""; width:3px; height:3px; border-radius:6px; background:var(--black); margin-left: 1rem;} .footer_item:last-child:after{content:none !important;} .footer_item a{color:var(--black); font-size:.8rem;} /* GENERAl */ .empty_logo_letter{border:solid thin var(--dark-grey); width:33px; height:33px; border-radius:44px; display:flex; justify-content:center; align-items:center;} .request_field_div{align-items:center !important; height:44px; flex-direction:row !important; font-weight:bold; width:max-content !important;} .col1{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:1rem; flex-wrap:wrap;} .col3{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:1rem;} .col4{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:1rem;} .col2{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:1rem;} .request_field label{margin-bottom:8px; font-weight:bold;} .col2 .request_field{display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:calc((100% / 2) - 11px); margin:0px 5.5px;} .col3 .request_field{display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:calc((100% / 3) - 11px); margin:0px 5.5px;} .col3 .infos{margin-top:22px; display:none; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:calc((100% / 3) - 22px); margin-right:22px;} .col4 .request_field{display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:calc((100% / 4) - 11px); margin:0px 5.5px;} .col4 .infos{margin-top:22px; display:none; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:calc((100% / 4) - 22px); margin-right:22px;} .col1 .request_field{display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:calc(100%);} .warning_message{font-size:.7rem; font-weight:200; font-style:italic; color:red;} .search_button{margin-left:1rem; background:var(--grey); color:var(--black); font-size:1.2rem; border-radius:.3rem; width:44px; height:44px; display:flex; justify-content:center; align-items:center;} .add_button_fixed{transition:all .9s; color:#000; width:44px; height:44px; border-radius:100px; position:fixed; bottom:22px; right:22px; cursor:pointer; background:var(--grey); box-shadow:var(--box-shadow); display:flex; justify-content:center; align-items:center; font-size:22px;} .add_button_fixed:hover{background:var(--dark-grey); color:#fff;} .add_container{width:100%; background:var(--grey); overflow:hidden; height:0px; width:100%;} .add_container_open{height:auto; padding:1rem 1rem 0px 1rem;} .entity_list{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-right:1rem; margin-bottom:1rem; flex-wrap:wrap;} .collection_element{width:calc((100% / 4) - 1rem); padding:1rem; min-height:200px; background:var(--grey); box-shadow:var(--box-shadow); border-radius:.3rem; margin-right:1rem; margin-bottom:1rem; display:flex; justify-content:center; align-items:center; flex-direction:column;} .collection_image_logo{width:88px; height:88px; border-radius:100px; border:solid 1px var(--dark-grey); margin-bottom:1rem; overflow:hidden; display:flex; justify-content:center; align-items:center;} .collection_image_logo img{width:auto; height:auto; max-width:65%; max-height:65%;} .collection_title{font-size:1.4rem; width:80%; text-align:center; line-height:1.8rem; height:3.6rem; overflow:hidden;} .collection_subtitle{font-size:1.1rem; margin-bottom:1rem; font-weight:300;} .collection_icons{margin-top:1rem;} .collection_element .single_toolbox{justify-content:space-evenly;} .collection_element_col_center{display:flex; justify-content:center; align-items:center;} .collection_element_col_start{display:flex; justify-content:flex-start; align-items:center;} .collection_element_col_date{font-size:.8rem; font-weight:400;} .collection_element_col_tools{width:88px; display:flex; justify-content:space-between; align-items:center; margin-top:1rem;} .collection_element_col_tools ion-icon{font-size:1.2rem;} .col_title{padding:.5rem 1rem; background:var(--dark-grey); color:var(--white); margin-bottom:1rem;} .invoices_cont_inner{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-right:1rem; margin-bottom:1rem; flex-wrap:wrap;} .invoice_item{width:calc((100% / 4) - 1rem); padding:1rem; min-height:200px; background:var(--grey); box-shadow:var(--box-shadow); border-radius:.3rem; margin-right:1rem; margin-bottom:1rem; display:flex; justify-content:center; align-items:center; flex-direction:column;} .invoice_client_name{font-size:1.4rem; width:80%; text-align:center; line-height:1.8rem; height:3.6rem; overflow:hidden;} .invoice_number{font-size:1.4rem; width:80%; text-align:center; line-height:1.8rem; font-weight:bold;} .invoice_date{font-size:.8rem; margin-bottom:1rem; font-weight:400;} .invoice_price{font-size:1.4rem; text-decoration:underline;} .invoice_tools{width:176px; display:flex; justify-content:space-evenly; align-items:center; margin-top:1rem; flex-wrap:Wrap;} .invoice_tools ion-icon{font-size:1.2rem;} .view_record{display:flex; justify-content:center; align-items:center; width:33px; height:33px; border-radius:.3rem; background:var(--cyan); color:var(--white);} .view_pdf{display:flex; justify-content:center; align-items:center; width:33px; height:33px; border-radius:.3rem; background:orange; color:var(--white);} .trash_record{display:flex; justify-content:center; align-items:center; width:33px; height:33px; border-radius:.3rem; background:var(--red); color:var(--white);} .single_toolbox{margin-bottom:1rem; width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .single_toolbox .toolbox_item{width:66px; height:66px; box-shadow:var(--box-shadow);} .toolbox_item{transition:all .9s; cursor:pointer; margin-right:1rem; margin-bottom:1rem; display:flex; justify-content:center; align-items:center; flex-direction:column; background:var(--grey); position:relative;} .toolbox_item:hover{background:var(--dark-grey);} .toolbox_item:hover .toolbox_item_title{color:var(--white);} .toolbox_item img{width:auto; height:auto; max-width:33px; max-height:33px;} .toolbox_item .toolbox_item_title{font-size:.7rem; margin-top:.5rem; font-weight:200; color:var(--black);} .toolbox_counter{position:absolute; width:33px; height:22px; border-radius:44px; background:var(--black); top:-11px; right:-11px; display:flex; justify-content:center; align-items:center; color:var(--white); z-index:999; font-size:.7rem;} .single_cont{width:100%;} .col3 div .request_field{width:100% !important; margin:0px !important;} .col2 div{display:none; width:calc((100% / 3) - 11px); margin:0px 5.5px;} .col2 div .request_field{width:100% !important; margin:0px !important;} .subproject{display:none;} .subproject_open{display:flex !important;} .project_tag_options_cont{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .project_tag_option{background:var(--grey); box-shadow:var(--box-shadow); padding:0px 11px; height:33px; display:flex; justify-content:center; align-items:center; border-radius:100px; margin-right:1rem; margin-bottom:1rem; cursor:pointer;} .project_tag_option_selected .project_tag_option_light{background:var(--cyan);} .project_tag_option_light{width:8px; height:8px; background:var(--grey); border-radius:100px; margin-right:.5rem; box-shadow:inset var(--box-shadow); } .questionaire_toolbox{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .questionaire_toolbox_item{background:var(--grey); box-shadow:var(--box-shadow); padding:0px 11px; height:33px; width:auto; display:flex; justify-content:center; align-items:center; border-radius:100px; margin-right:1rem; margin-bottom:1rem; cursor:pointer;} .q_item{display:flex; justify-content:center; align-items:center; flex-direction:column; margin-bottom:1rem;} .q_item textarea{height:44px;} .q_item_delete{color:var(--red); font-size:.7rem; cursor:pointer;} .q_item_move{cursor: move; margin-bottom: -5px; display:flex; justify-content:flex-start; align-items:center;} .q_item_move ion-icon{margin-right:1rem;} .q_item_move .q_item_title{font-size:1rem; font-weight:bold;} .q_item_toolbox{width:100%; display:flex; justify-content:space-between; align-items:center; background:var(--grey); padding:0px 1rem; height:33px;} .q_item_element{border:solid thin var(--grey); border-top:none; padding:1rem; width:100%;} .q_item_multiple{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; margin-top:1rem;} .q_item_multiple input{width:calc(50% - 1rem); min-width:0; margin-bottom:1rem;} .answer_form{width:100%; display:flex; justify-content:center; align-items:flex-start;} .answer_form_cont{width:50vw; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; background:var(--white); box-shadow:var(--box-shadow); margin:1rem 0px; border-radius:1rem; padding:2rem;} .anwser_form_logo{width:100%; display:flex; justify-content:center; align-items:center;} .anwser_form_logo img{width:auto; height:auto; max-width:400px; max-height:400px;} .answer_form_title_item{font-size:2rem; font-weight:bold; width:100%;} .answer_form_subtitle_item{font-size:1rem; line-height:1.4rem; width:100%; font-style:italic; color:#a9a9a9; margin-bottom:1rem;} .answer_form_text_item{width:100%; margin-bottom:1rem; } .answer_form_entity_title{margin-bottom:1rem; border-bottom:solid thin var(--dark-grey); padding-bottom:.5rem;} .answer_form_text_item textarea{min-height:200px;} .answer_form_multiple_items{width:100%; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap;} .answer_form_multiple_item{width:calc(50% - 1rem); height:44px;} .profile_cont{width:100%; display:flex; justify-content:space-between; align-items:flex-start;} .profile_cont .col{width:100%;} .profile_cont_2{width:100%; display:flex; justify-content:space-between; align-items:flex-start;} .profile_cont_2 .col{width:calc(50% - 1rem);} .profile_cont_3{width:100%; display:flex; justify-content:space-between; align-items:flex-start;} .profile_cont_3 .col{width:calc((100% / 3) - 1rem);} .photo_preview{width:100%; min-height:150px;} .photo_preview img{width:auto; height:auto; max-width:100%; max-height:150px;} .create_post_option_info{display:flex; justify-content:center; align-items:center; flex-direction:column; padding:1rem;} .create_post_option_info .select_files{display:flex; justify-content:center; align-items:center; flex-direction:column;} .create_post_option_info .select_files ion-icon{font-size:2rem; color:var(--dark-grey);} .create_post_option_info .select_files div{font-size:.8rem;} .progress{border-radius:1rem; background:var(--grey); margin-top:.5rem; display:none; justify-content:center; align-items:center; font-size:.8rem; padding:.3rem;} .progress_show{display:flex !important;} .progress-bar{background:var(--cyan); border-radius:1rem; display:flex; justify-content:center; align-items:center; color:var(--white);} .thumbnail{width:88px; height:88px; display:flex; justify-content:center; align-items:center; background-position:center !important; background-size:cover !important;} .upload_file{display:none;} /* END OF GENERAL */ /* CLIENTS */ /* END OF CLIENTS */ /* REGISTER */ .register_birthday{width:100%; display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;} .register_birthday select{width:calc((100% / 3) - 1rem);} /* END OF REGISTER */ .login_form{width:600px; display:flex; justify-content:center; align-items:center; flex-direction:column; padding:22px; position:fixed; top:calc(50% - 5rem); left:50%; transform:translate(-50%,-50%);} .login_form_inner{border-radius:10px; box-shadow:var(--box-shadow); background:var(--grey); display:flex; justify-content:center; align-items:center; flex-direction:column; padding:1rem 2rem; width:100%;} .login_form_inner form{width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column;} .logo_outside{width:100%; margin-bottom:5rem;} .logo_outside img{width:auto; height:auto; max-width:100%; max-height:100%;} .top_bar{width:calc(100% - 44px); display:flex; justify-content:space-between; align-items:center; padding:0px 22px; height:33px; position:fixed; top:0px; left:44px; background:var(--grey); z-index:99;} .back_to_start{font-size:12px;} .top_bar .full_name{font-size:12px; color:#000; display:flex; justify-content:flex-end; align-items:center;} .top_bar .full_name strong{margin-left:4px;} .top_bar .full_name ion-icon{margin-right:4px;} fieldset{border:solid thin #c5c5c5; width:100%; min-height:400px; padding-left:22px;} fieldset .container{padding:22px 0px; min-height:400px !important;} legend{padding:0px 11px;} fieldset label{font-size:14px; margin-bottom:11px !important; display:inline-block; font-weight:bold;} .open_info{display:flex !important;} .wrapper{width:100%; min-height:calc(100vh - 44px); display:flex; justify-content:flex-start; align-items:flex-start; position:relative;} .container{width:100%; padding:22px 22px 22px 66px; min-height:calc(100vh - 22px); margin-top:22px;} .wrapper_no_login{width:100%; min-height:calc(100vh - 44px - 44px); display:flex; justify-content:flex-start; align-items:flex-start; position:relative;} .container_no_login{width:100%; padding:22px 22px 22px 22px; min-height:calc(100vh - 44px); margin-top:0px; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .page_text{padding:0px 5rem;} .page_text p{margin-bottom:1rem; font-size:1.2rem; line-height:1.6rem; font-weight:300;} .page_text h3{margin-bottom:1rem; font-size:1.8rem; font-weight:600;} .logo{font-family: 'Syncopate', sans-serif; font-size:22px; margin-bottom:44px; width:44px; display:flex; justify-content:center; align-items:center;} .logo img{width:auto; height:auto; max-width:33px; max-height:33px;} .menu{background:var(--grey); width:44px; height:100vh; box-shadow:var(--box-shadow); display:flex; justify-content:flex-start; align-items:center; padding:11px; flex-direction:column; position:fixed; top:0px; left:0px; z-index:99999;} .menu_tag{display:none;} .menu_item{width:44px; height:44px;} .menu_item a{width:44px; height:44px; position:relative; display:flex; justify-content:center; align-items:center; color:var(--black);} .menu_item img{width:auto; height:auto; max-width:22px; max-height:22px;} .menu_item ion-icon{font-size:22px;} .menu_item .menu_item_title{position:absolute; height:44px; background:var(--grey); padding-left:22px; left:44px; top:0px; width:200px; display:none; justify-content:flex-start; align-items:center;} .menu_item:hover .menu_item_title{display:flex !important; } .ribbon{margin-bottom:1.4rem; width:100%; box-shadow:var(--box-shadow); height:44px; font-weight:300; display:flex; justify-content:space-between; align-items:center; background:var(--grey); padding:0px 22px; font-size:1.3rem;} .ribbon_big{margin-bottom:1.4rem; width:100%; box-shadow:var(--box-shadow); height:55px; font-weight:300; display:flex; justify-content:space-between; align-items:center; background:var(--grey); padding:0px 22px; font-size:1.8rem;} .request_item{width:100%; height:44px; margin-top:22px; display:flex; justify-content:space-between; align-items:center; background:var(--grey); padding:0px 22px;} .request_item_id{flex:1;} .request_item_name{flex:6; text-align:center;} .request_item_date{flex:5; text-align:center;} .request_item_from{flex:4; text-align:center;} .request_item_edit_date{flex:5; text-align:center;} .request_item_edit_from{flex:5; text-align:center;} .request_item_tools{display:flex; justify-content:space-between; align-items:center; width:140px;} .request_item_status{width:15px; height:15px; border-radius:22px; background:#999;} .request_item_tools img{width:22px;} .request_item_client{width:250px;} .send_offer{position:relative;} .send_offer img{cursor:pointer;} .send_panel{width:600px; background:#f4f4f4; display:none; justify-content:flex-start; align-items:flex-start; flex-direction:column; position:absolute; top:34px; right:0px; padding:22px; z-index:999999;} .new_sending{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .open_send_panel{display:flex !important;} .send_offer_email_input{width:100%; margin-bottom:11px; margin-top:11px;} .send_offer_email{background:#3b3b3b; color:#fff; padding:8px; border-radius:5px; cursor:pointer;} .sending_history{width:100%;} .sending_history h3{margin-bottom:11px; font-size:22px; font-weight:bold;} .send_offer_email_text{width:100%;} .history_item{width:100%; display:flex; justify-content:flex-start; align-items:center; border-bottom:solid thin black; padding-bottom:11px; margin-bottom:11px;} .history_item_date{font-weight:bold; font-size:12px; margin-right:22px;} .history_item_emails{font-size:12px;} .selector_images{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; margin-bottom:22px;} .selection_image{width:55px; height:55px; display:flex; justify-content:center; align-items:center; margin-right:11px; margin-bottom:11px;} .selector_images img{width:auto; height:auto; max-width:55px; max-height:55px;} .selector{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .selector_multi{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; margin-bottom:22px;} .selector_multi_line{width:100%; display:flex; justify-content:center; align-items:flex-start; flex-direction:column; margin-bottom:22px;} .selector_multi .select_option{width:calc(100% / 3); font-size:14px;} .selector_multi_line .select_option{width:100%; font-size:14px; margin-bottom:11px;} .selector_multi_line input[type="text"]{width:90% !important;} .selector_option{background:var(--grey); box-shadow:var(--box-shadow); display:flex; justify-content:center; align-items:center; padding:0px 11px; height:33px; border-radius:10px; margin-right:22px; cursor:pointer; transition:all .6s; margin-bottom:11px;} .selector_option ion-icon{display:none;} .selector_option:hover{background:#dbebff;} .selector_option input{display:none;} .matched{background:#dbebff !important;} .matched ion-icon{display:inline-block !important;} .login_title{width:100%; text-align:center; display:flex; justify-content:center; align-items:center; flex-direction:column; font-size:16px; margin-bottom:44px;} .login_col1{width:550px; height:100vh; overflow:hidden;} .login_col1 img{width:auto; height:auto; max-width:100%; max-height:100%;} .login_col2{width:calc(100% - 550px); height:100vh; background:#fff; display:flex; justify-content:center; align-items:center; flex-direction:column;} .adr_title{font-family: 'Syncopate', sans-serif; font-size:4em;} .debugger{background:#dbebff; padding:22px; width:100%;} .add_additional_cost{cursor:pointer; background:green; width:44px; height:44px; border-radius:44px; display:flex; justify-content:center; align-items:center; color:#fff; font-size:28px; margin-top:22px; margin-right:11px;} .remove_additional_cost{cursor:pointer; background:red; width:44px; height:44px; border-radius:44px; display:none; justify-content:center; align-items:center; color:#fff; font-size:28px; margin-top:22px; margin-right:11px;} .col3:last-child .remove_additional_cost{display:flex !important; } .buttons_field{flex-direction:row !important;} /* SCHEDULE */ .section_3{display:none;} .open_section_options{display:flex !important;} .tabs{display:flex; justify-content:flex-start; align-items:center;} .tab{width:150px; cursor:pointer; display:flex; justify-content:center; align-items:center; background:var(--grey); height:44px; margin-right:11px; font-size:14px; transition:all .6s;} .tab:hover{background:black; color:white;} .selected_tab{background:black; color:white;} .full_container{padding:11px 44px !important;} .list{width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column;} .add_new_client{cursor:pointer;} .list_item{width:100%; display:flex; justify-content:flex-start; align-items:center;} .list_item:nth-child(2n+1){background:#f1f1f1;} .list_item:hover{background:#ccc;} .list_item_days:hover{background:transparent !important;} .list_item_client{position:relative; cursor:pointer; border-bottom:solid thin black; border-left:solid thin black; border-right:solid 2px black; width:200px; /*height:calc((100vw - 200px - 88px) / 31);*/ height:53px; display:flex; justify-content:center; align-items:center; font-size:14px;} .list_item_inactive{opacity:0.5;} .list_item_day{border-bottom:solid thin black; border-right:solid thin black; font-size:12px; width:calc((100vw - 200px - 88px) / 31); /*height:calc((100vw - 200px - 88px) / 31);*/ height:53px; display:flex; justify-content:center; align-items:center; position:relative; cursor:pointer;} .list_item_days{border-bottom:solid 2px black;} .list_item .list_item_day:hover{background:#efc0ff;} .list_item_days .list_item_day:hover{background:transparent !important;} .history_cont{height:66px; width:100%; display:flex; justify-content:center; align-items:flex-start; flex-direction:column; overflow-y:scroll;} .history_line{height:22px; width:100%; font-size:12px;} .history_title{font-size:18px; font-weight:bold; margin-bottom:11px;} .step_1{background:#ffc800 !important;} .step_2{background:#00dcff !important;} .step_3{background:#aee1c0 !important;} .step_4{background:black !important; color:#fff;} .step_5{background:red !important;} .hide_colors{background:transparent !important;} .monthly_progress{height:33px; width:100%; background:#aee1c0; color:#000; display:flex; justify-content:flex-start; align-items:center; padding:0px 22px; font-size:14px; font-weight:bold;} .monthly_progress div{margin-right:11px;} .monthly_progress div span{font-weight:400 !important;} .monthly_admin_info{display:flex; justify-content:flex-end; align-items:center;} .monthly_summarize{display:flex; justify-content:flex-start; align-items:center;} .monthly_summarize div{margin-right:11px;} .monthly_budget{height:33px; width:100%; background:#999; color:#000; display:flex; justify-content:space-between; align-items:center; padding:0px 22px; font-size:14px; font-weight:bold;} .monthly_active_clients{margin-right:11px;} .monthly_inactive_clients{margin-right:11px;} .monthly_budget span{font-weight:400 !important;} .date_selector{width:100%; display:flex; justify-content:center; align-items:center; height:44px; background:#000; color:#fff;} .date_selector .nav{width:110px; height:44px; font-size:12px; cursor:pointer;} .date_selector .nav span{font-size:14px; font-size:bold;} .date_selector .prev{display:flex; justify-content:flex-start; align-items:center; text-align:center; padding-left:8px;} .date_selector .next{display:flex; justify-content:flex-end; align-items:center; text-align:center; padding-right:8px;} .date_selector .current_month{width:calc(100% - 220px); height:44px; font-size:18px; font-weight:bold; display:flex; justify-content:center; align-items:center;} .today_flag{background:#dbebff;} .weekdays{background:#c4c4c4;} .color_id{width:100%; justify-content:space-between; align-items:center; background:var(--grey); margin-bottom:11px; height:33px; padding:0px 22px; margin-top:44px;} .color_item{display:flex; justify-content:flex-start; align-items:center;} .color_box{width:11px; height:11px; margin-right:11px;} .color_info{font-size:12px;} .panel_social_caption{min-height:110px !important; font-size:12px;} .panel_social_desc{min-height:110px !important; font-size:12px;} .checkboxes{font-size:12px; display:flex; justify-content:flex-start; align-items:center;} .has_comment{width:16px; height:16px; border-radius:5px; position:absolute; top:3px; right:3px; display:flex; justify-content:center; align-items:center;} .has_comment img{width:auto; height:auto; max-width:100%; max-height:100%;} .panel{position:fixed; width:90vw; height:90vh; top:5vh; left:5vw; overflow-y:scroll; display:none; justify-content:center; align-items:flex-start; background:#f1f1f1; box-shadow:0px 0px 5px #000; transition:all .6s; padding:22px; z-index:99999999;} .panel .container{min-height:80vh !important; padding:0px !important; position:relative;} .panel_show{display:flex !important;} .panel_client{font-size:22px;} .panel_client span{color:blue; font-weight:bold;} .panel_date{font-size:14px;} .panel_line{display:flex; justify-content:center; align-items:center; height:33px;} .panel_line .panel_line_middle{width:100%; height:1px; background:#ccc;} .panel_close{position:absolute; top:-22px; right:22px; font-size:42px;} .checkboxes_cont{display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; margin-bottom:22px;} .checkboxes{margin-right:22px;} .schedule_desc{margin-bottom:22px;} .buttons_area{width:100%; margin-top:22px; display:flex; justify-content:space-between; align-items:center;} .submit_button{height:44px; width:140px; border-radius:5px; background:#000; color:#fff; display:flex; justify-content:center; align-items:center; cursor:pointer;} .delete_button{height:44px; width:140px; border-radius:5px; background:red; color:#000; display:flex; justify-content:center; align-items:center; cursor:pointer;} .user_calendar{position:fixed; width:90vw; height:90vh; top:5vh; left:5vw; overflow-y:scroll; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; background:#f1f1f1; box-shadow:0px 0px 5px #000; transition:all .6s; padding:22px; z-index:99999999;} .user_calendar_client_title{font-size:22px; width:100%; text-align:left; margin-bottom:44px;} .user_calendar_client_title a{color:#000; font-size:16px;} .user_calendar_client_title i{font-size:16px;} .user_calendar_client_months{width:90%; display:flex; justify-content:center; align-items:center; margin-left:5%;} .user_calendar_line{width:calc(100% / 12); display:flex; justify-content:center; align-items:center; flex-direction:column;} .user_calendar_close{width:100%; text-align:right; font-size:42px; cursor:pointer;} .notification{position:fixed; top:44px; right:44px; background:#bfffca; padding:11px; display:flex; justify-content:flex-start; align-items:center; min-height:44px; border-radius:5px; font-size:12px;} .user_calendar_month_price input{width:80px; height:22px; font-size:14px;} .price_per_unit{font-size:8px; position:absolute; bottom:2px; right:2px;} .xorigoumeni_per_unit{font-size:8px; position:absolute; bottom:2px; right:2px;} .xorigoumeni_per_unit_all{font-size:8px; position:absolute; bottom:14px; right:2px;} .day_number{font-size:10px; position:absolute; top:2px; left:2px;} .user_calendar_month_action{font-size:12px; display:flex; justify-content:flex-start; align-items:center;} .user_calendar_month_action input{margin-right:5px;} .add_user_cont{position:fixed; width:90vw; height:90vh; top:5vh; left:5vw; overflow-y:scroll; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; background:#f1f1f1; box-shadow:0px 0px 5px #000; transition:all .6s; padding:22px; z-index:99999999;} .existing_client{font-size:14px;} .add_user_close{width:100%; text-align:right; font-size:42px; cursor:pointer;} .existing_sections_cont{width:100%; display:flex; justify-content:flex-start; align-items:center; margin:22px 0px;} .sections_cont{width:100%; display:flex; justify-content:flex-start; align-items:center; margin:22px 0px;} .section_selection{display:flex; justify-content:flex-start; align-items:center; font-size:12px; margin-right:11px;} .section_selection input{margin-right:5px;} .project_dates{display:flex; justify-content:flex-start; align-items:center; margin-bottom:11px;} .project_dates div{margin-right:11px; display:flex; justify-content:flex-start; align-items:center;} .project_dates div input{font-size:14px;} .customer_info{position:absolute; width:22px; height:22px; display:flex; justify-content:center; align-items:center; bottom:4px; left:4px; z-index:99999;} .customer_info img{width:auto; height:auto; max-width:100%; max-height:100%;} .add_task{position:absolute; width:22px; height:22px; display:flex; justify-content:center; align-items:center; bottom:4px; right:4px; z-index:99999;} .add_task img{width:auto; height:auto; max-width:100%; max-height:100%;} .user_for_task{font-size:14px; margin-bottom:11px;} /* END OF SCHEDULE */ .plan_list{width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap:wrap; max-width:1920px;} .plan_item{width:calc((100% / 4) - 22px); display:flex; justify-content:center; align-items:flex-start; flex-direction:column; box-shadow:0px 0px 2px rgba(0, 0, 0, 0.2); border-radius:max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px; margin-bottom:22px; margin-right:22px; overflow:hidden;} .plan_header{padding:12px 16px; width:100%;} .plan_client_item{width:100%; display:flex; justify-content:flex-start; align-items:center;} .plan_client_item .plan_client_logo{width:40px; height:40px; border-radius:40px; overflow:hidden;} .plan_client_item .plan_client_logo img{width:auto; height:auto; max-width:100%; max-height:100%; display:inline-block;} .plan_client_info{margin-left:6px; display:flex; justify-content:center; align-items:flex-start; width:calc(100% - 50px); flex-direction:column;} .plan_client_info .plan_item_name{font-size:16px; font-weight:500; color:#000;} .plan_client_info .plan_item_date{color:#65676b; font-size:12px;} .plan_item_caption{margin:8px 0px; font-size:14px; min-height:88px; line-height:18px;} .plan_image{width:100%; border-top:solid thin #e7e7e7; border-bottom:solid thin #e7e7e7;} .plan_image img{object-fit:cover; width:100%; height:100%;} .plan_placeholder{width:100%; height:22.7vw; background:#c9c9c9; position:relative;} .plan_placeholder:before{content:"No image available"; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-weight:bold; font-size:2em; text-align:center; color: #a5a5a5; text-shadow: 1px 1px 2px #686868;} .plan_footer{width:100%; padding:12px 16px;} .plan_footer_fake_options{border-top:solid thin #d1d1d1; border-bottom:solid thin #d1d1d1; padding:8px 0px; display:flex; justify-content:space-between; align-items:center;} .plan_footer_fake_option{width:calc(100% / 3); display:flex; justify-content:center; align-items:center; font-size:14px; font-weight:bold; color:#65676b;} .plan_footer_fake_option img{width:auto; height:auto; max-width:16px; max-height:16px; margin-right:8px;} .post_images_cont{width:100%; border:dashed 2px #999; padding:22px 22px;} .input_files{margin-bottom:11px;} .upload_button{height:33px; width:88px; border-radius:5px; background:#000; color:#fff; display:flex; justify-content:center; align-items:center; cursor:pointer; font-size:12px;} .preview{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:11px;} .image_preview{width:88px; height:88px; display:flex; justify-content:center; align-items:center; margin-right:11px; border:solid thin #999; position:relative;} .image_preview img{width:auto; height:auto; max-width:80px; max-height:80px;} .remove_file{position:absolute; top:-11px; right:-11px; width:22px; height:22px; border-radius:22px; background:#000; color:#fff; font-size:22px; display:flex; justify-content:center; align-items:center; cursor:pointer;} .video_planning{width:100%;} .client_plan{position:absolute; width:22px; height:22px; border:solid thin red; left:-22px; top:0px;} .plan_client_logo{display:flex; justify-content:center; align-items:center; border:solid thin #e5e5e5;} .half_black{background:#000; color:#fff; width:50%; height:44px; display:flex; justify-content:center; align-items:center; font-size:12px;} .half_white{background:#fff; color:#000; width:50%; height:44px; display:flex; justify-content:center; align-items:center; font-size:12px;} /* TICKETS */ .add_ticket_cont{width:100%; margin-top:44px;} .tickets_collection{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .ticket_item{width:100%; padding:0px 11px; display:flex; justify-content:flex-start; align-items:center; height:44px; background:#c9c9c9;} .ticket_item .ticket_item_status{width:33px; height:44px; display:flex; justify-content:center; align-items:center; } .ticket_item .ticket_item_status .ticket_item_status_red{width:11px; height:11px; border-radius:22px; background:red;} .ticket_item .ticket_item_status .ticket_item_status_green{width:11px; height:11px; border-radius:22px; background:green;} .ticket_item .ticket_item_status .ticket_item_status_orange{width:11px; height:11px; border-radius:22px; background:orange;} .ticket_item .ticket_item_title{width:100%; height:44px; display:flex; justify-content:flex-start; align-items:center; padding-left:11px; font-size:14px;} .ticket_item .ticket_item_date{width:230px; height:44px; display:flex; justify-content:flex-end; align-items:center; font-size:12px; padding-right:11px;} .ticket_item .ticket_item_client{width:300px; height:44px; display:flex; justify-content:flex-start; align-items:center; font-size:12px; font-weight:bold; } .ticket_item .ticket_item_tools{width:200px; height:44px; display:flex; justify-content:space-between; align-items:center;} .ticket_item_tools img{width:auto; height:auto; max-width:22px; max-height:22px;} .ticket_info_cont{background:var(--grey); padding:22px; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .ticket_info_title{font-size:20px; padding-bottom:22px; border-bottom:solid thin #333; width:100%;} .ticket_info_desc{padding:22px; border-bottom:solid thin #333; margin-bottom:22px; width:100%;} .ticket_info_desc p{font-size:14px; line-height:22px;} .ticket_info_desc ul{font-size:14px; line-height:22px; margin-left:22px;} .ticket_info_desc ol{font-size:14px; line-height:22px; margin-left:22px;} .ticket_info_desc a{font-size:14px; line-height:22px; text-decoration:underline !important;} .ticket_info_date{width:100%; border-top:solid thin #333; display:flex; justify-content:flex-end; align-items:center; font-size:12px; color:#999; padding:11px;} .ticket_info_images{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap;} .ticket_info_image{width:55px; height:55px; display:flex; justify-content:center; align-items:center; margin-right:11px; border:solid thin #333; margin-bottom:22px;} .ticket_info_image img{width:auto; height:auto; max-width:44px; max-height:44px;} .conversation_item_title{font-size:16px; font-weight:bold; padding-bottom:22px; border-bottom:solid thin #333; width:100%;} .conversation_item_title span{font-size:12px; font-weight:400;} .conversation_item_desc{padding:22px; margin-bottom:22px; width:100%; font-size:14px; line-height:22px;} .conversation_item_desc p{font-size:14px; line-height:22px; margin-bottom:22px;} .conversation_item_desc ul{font-size:14px; line-height:22px; margin-left:22px;} .conversation_item_desc li{font-size:14px; line-height:22px;} .conversation_item_desc ol{font-size:14px; line-height:22px; margin-left:22px;} .conversation_item_desc a{font-size:14px; line-height:22px; text-decoration:underline !important;} .conversation_item_date{width:100%; border-top:solid thin #333; display:flex; justify-content:flex-end; align-items:center; font-size:12px; color:#999; padding:11px;} .conversation_item_images{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap;} .conversation_item_image{width:55px; height:55px; display:flex; justify-content:center; align-items:center; margin-right:11px; border:solid thin #333; margin-bottom:22px;} .conversation_item_image img{width:auto; height:auto; max-width:44px; max-height:44px;} .add_answer_cont{margin-left:0px; background:#c9c9c9; padding:22px; margin-top:33px; position:relative;} .add_answer_cont:before{content:""; width: 0; height: 0; border-style: solid; border-width: 0 22px 22px 22px; border-color: transparent transparent #c9c9c9 transparent; position:absolute; top:-22px; left:44px;} .conversation_item{padding:22px;} .conversation_cont{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .admin_answer{background:#d6f9ff; width:calc(100% - 88px); display:flex; justify-content:flex-end; align-items:flex-start; flex-direction:column; margin-left:88px; margin-top:33px; position:relative;} /*.admin_answer:before{content:""; width: 0; height: 0; border-style: solid; border-width: 0 22px 22px 22px; border-color: transparent transparent #d6f9ff transparent; position:absolute; top:-22px; left:44px;}*/ .user_answer{background:var(--grey); width:calc(100% - 88px); display:flex; justify-content:flex-end; align-items:flex-start; flex-direction:column; margin-right:88px; margin-top:33px; position:relative;} /*.user_answer:before{content:""; width: 0; height: 0; border-style: solid; border-width: 0 22px 22px 22px; border-color: transparent transparent var(--grey) transparent; position:absolute; top:-22px; left:44px;}*/ /* END OF TICKETS */ /* PROJECTS */ .project_data{width:100%; margin-bottom:1rem;} .project_data_cont_inner{display:none; box-shadow:0px 0px 1px #333;} .project_data_open .project_data_cont_inner{display:inline-block !important; width:100%;} .project_data_year_header{cursor:pointer; font-weight:bold; display:grid; grid-template-columns:200px 1fr 100px; grid-gap:1rem; width:100%; padding:0px 1rem; height:44px; box-shadow:0px 0px 1px #333;} .project_data_month{width:100%; display:grid; grid-template-columns:200px 200px 200px; grid-gap:1rem; margin-bottom:.5rem;} .project_data_month_name{cursor:pointer; width:200px; padding:0px 1rem; height:44px; background:grey; color:#fff; border-radius:100px; display:flex; justify-content:center; align-items:center;} .project_data_month_selected .project_data_month_name{background:green !important;} .project_data_month_header{width:100%; display:grid; grid-template-columns:200px 200px 200px; grid-gap:1rem; margin-bottom:.5rem; background:grey; height:44px; color:#fff;} .project_data_month_header_name{display:flex; justify-content:center; align-items:center;} .project_data_month_header_price{display:flex; justify-content:center; align-items:center;} .project_data_month_header_xorigoumeni{display:flex; justify-content:center; align-items:center;} .project_data_year_header_year{display:flex; justify-content:flex-start; align-items:Center; font-weight:bold;} .project_data_year_header_toggle{display:flex; justify-content:flex-end; align-items:Center;} .project_type_selection{width:100%; display:grid; grid-template-columns:repeat(auto-fill,200px); grid-gap:1rem;} .social_media_cont{width:100%;} .social_media_header{display:flex; justify-content:space-between; align-items:center; width:100%; height:44px;} .previous_month{width:33px; aspect-ratio:1; border-radius:100px; display:flex; justify-content:center; align-items:Center; font-size:22px; background: var(--grey); box-shadow: var(--box-shadow); cursor:pointer;} .next_month{width:33px; aspect-ratio:1; border-radius:100px; display:flex; justify-content:center; align-items:Center; font-size:22px; background: var(--grey); box-shadow: var(--box-shadow); cursor:pointer;} .current_month{font-weight:bold; font-size:22px;} .social_media_body{margin-top:1rem; width:100%;} .social_media_client_line{width:100%; display:grid; border-bottom:solid thin #999; } .social_media_client_line:hover div{background:#999;} .social_media_client_line:hover a{background:#999;} .social_media_days_line{width:100%;display:grid; border-bottom:solid thin #999; border-top:solid thin #999;} .social_media_days_line_day{text-align:center; border-right:solid thin #999; font-size:12px;} .weekend{background:#e9e9e9;} .social_media_post_day{aspect-ratio:1; width:100%; position:relative; border-right:solid thin #999; cursor:pointer;} .social_media_client_name{display:flex; justify-content:flex-start; align-items:center; background:#e9e9e9; border-left:solid thin #999; border-right:solid thin #999; padding:0px 1rem; font-size:14px; color:#000;} .social_media_days_line_dummy{border-right:solid thin #999; border-left:solid thin #999;} .social_media_post_day .day_number{font-size:12px; position: absolute; top: 2px; left: 2px; background:transparent !important;} .step_1{background:#ffc800 !important;} .step_2{background:#00dcff !important;} .step_3{background:#aee1c0 !important;} .social_media_post_day:hover{background:#efc0ff !important;} .post_data_info_wrapper{position:fixed; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,.8); z-index:99999; display:flex; justify-content:center; align-items:center;} .post_data_info_cont{width:90vw; height:90vh; background:#e9e9e9; position:relative; padding:1rem;} .post_data_info_close{position:absolute; top:0px; right:0px; width:44px; height:44px; display:flex; justify-content:center; align-items:center; background:#fff; font-size:28px; cursor:pointer;} .post_data_info_client{font-size:22px; font-weight:bold;} .post_data_info_date{margin-bottom:1rem;} .post_data_info_title{margin-bottom:1rem;} .social_button{font-family: proxima-nova, sans-serif; font-weight: 300 !important; font-style: normal; font-size: 1rem !important; width: max-content; display:flex; justify-content:center; align-items:Center; padding: 0px 22px; box-shadow: var(--box-shadow); border: solid thin var(--grey); background: var(--grey); border-radius: 5px; height: 44px; outline: none; cursor: pointer;} #post_files{display:none;} .post_data_info_images_cont{width:100%; display:grid; grid-template-columns:repeat(auto-fill,88px); grid-gap:1rem; border: dashed 1px #ccc; padding: 1rem; margin: 1rem 0px;} .post_file_cont{width:100%; height:110px; display:none; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .post_file_cont_show{display:flex !important;} .post_file_remove{width:100%; display:flex; justify-content:flex-start; align-items:center; background:red; color:#fff; font-size:12px;} .post_file_cont_item{background:#fff; width:100%; aspect-ratio:1; display:flex; justify-content:center; align-items:center;} .post_file_cont_item img{width:auto; height:auto; max-width:88px; max-height:88px;} .post_data_info_comments{margin-top:1rem;} .buttons_cont{width:100%; display:flex; justify-content:space-between; align-items:Center;} .project_element{width:100%; display:grid; grid-template-columns:44px 1fr 200px 300px 150px 150px 200px; border:solid thin #999; margin-bottom:1rem; min-height:44px; align-items:center;} .project_social_index{aspect-ratio:1; background:#91eba9; display:flex; justify-content:center; align-items:center; font-size:22px; font-weight:bold; color:#fff;} .project_web_index{aspect-ratio:1; background:#e38d8d; display:flex; justify-content:center; align-items:center; font-size:22px; font-weight:bold; color:#fff;} .project_graphics_index{aspect-ratio:1; background:#91e2eb; display:flex; justify-content:center; align-items:center; font-size:22px; font-weight:bold; color:#fff;} .project_element > div{padding:0px 1rem; display:flex; justify-content:center; align-items:Center;} .project_element_title{justify-content:flex-start !important;} .project_element_tools{justify-content:flex-end !important;} .project_element_tools a{margin-right:11px;} .today{background:#00ff97 !important;} .weekends{background:#e9e9e9 !important;} .project_web_line{width:100%; overflow-x:hidden; overflow-y:hidden; display:grid; grid-template-columns:150px 1fr; align-items:flex-start;} .project_web_timeline{width:calc(100vw - 250px); overflow-x:auto;} .project_web_client{background:#e9e9e9; height:175px; display:flex; justify-content:center; align-items:Center; color:#000;} .project_web_days{width:100%; display:grid; } .project_web_day{border-right:solid thin #999; height:132px; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column;} .project_web_day_name{font-size:12px; width:100%; cursor:pointer; background:#d7d7d7; text-align:center;} .project_web_day_name:hover{background:#000 !important; color:#fff !important;} .project_web_days_header{width:100%; display:grid; } .project_web_day_header{border-right:solid thin #fff; height:22px; display:flex; justify-content:Center; align-items:Center; background:#999; color:#fff;} .project_web_day_name_header{font-size:12px;} .project_web_months_header{width:100%; display:grid; } .project_web_month_header{border-right:solid thin #fff; height:22px; display:flex; justify-content:Center; align-items:Center; background:#000; color:#fff;} .project_web_day_month_header{font-size:12px;} .project_web_day_selected{background:#e9e9e9;} .project_web_info_dates{width:100%; display:grid; grid-template-columns:calc(50% - .5rem) calc(50% - .5rem); grid-gap:1rem; align-items:center; margin-bottom:1rem;} .project_web_info_from_date{min-width:unset !important;} .project_web_info_to_date{min-width:unset !important;} .project_web_info_client{font-weight:bold; font-size:22px;} .project_web_info_user_id{margin-bottom:2rem; font-size:14px;} .project_web_info_status{margin-bottom:1rem;} .project_web_info_notes textarea{min-height:110px;} .progress_bar{height:14px; background:red; width:100%;} .progress_start{height:14px; background:red; border-top-left-radius:10px; border-bottom-left-radius:10px;} .progress_end{height:14px; background:red; border-top-right-radius:10px; border-bottom-right-radius:10px;} .progress_one_day{height:14px; background:red; border-radius:10px;} .progress_bar_1{background:#ffbd59 !important; position:absolute; top:0px; width:100%; cursor:pointer; z-index:100;} .progress_bar_2{background:#85cdaa !important; position:absolute; top:14px; width:100%; cursor:pointer; z-index:100;} .progress_bar_3{background:#2D7452 !important; position:absolute; top:28px; width:100%; cursor:pointer; z-index:100;} .progress_bar_4{background:#f8f376 !important; position:absolute; top:42px; width:100%; cursor:pointer; z-index:100;} .progress_bar_5{background:#a6a6a6 !important; position:absolute; top:56px; width:100%; cursor:pointer; z-index:100;} .progress_bar_6{background:#545454 !important; position:absolute; top:70px; width:100%; cursor:pointer; z-index:100;} .progress_bar_7{background:red !important; position:absolute; top:84px; width:100%; cursor:pointer; z-index:100;} .progress_bar_8{background:#5271ff !important; position:absolute; top:98px; width:100%; cursor:pointer; z-index:100;} .project_web_day_progresses{width:100%; position:relative;} .web_statuses{background:#e9e9e9; margin-bottom:2rem; width:100%; display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); grid-gap:1rem; padding:1rem 1rem;} .web_status{display:flex; justify-content:flex-start; align-items:center;} .web_status_icon{width:11px; height:11px; margin-right:11px;} .web_status_title{font-size:14px;} .web_project_text_analysis_header{height:44px; width:100%; display:flex; justify-content:space-between; align-items:Center; background:#e9e9e9; padding:0px 1rem;} .web_project_text_analysis{height:44px; overflow:hidden; width:100%; margin-bottom:1rem;} .web_project_text_analysis_open{height:max-content !important;} .web_project_text_analysis_line{width:100%; display:grid; grid-template-columns:180px 180px 180px 1fr; } .web_project_text_analysis_line_dates{font-size:14px; display:flex; justify-content:center; align-items:center; background:#e9e9e9; height:44px;} .web_project_text_analysis_line_user{font-size:14px; display:flex; justify-content:center; align-items:center; height:44px; padding:.5rem;} .web_project_text_analysis_line_title{font-size:14px; display:flex; justify-content:center; align-items:center; height:44px; padding:.5rem;} .web_project_text_analysis_line_notes{font-size:14px; display:flex; justify-content:flex-start; align-items:center; height:44px; padding:.5rem; overflow-y:auto;} /* USER TABLE */ .user_table_line{width:100%; display:grid; grid-template-columns:200px 300px 1fr; min-height:44px; align-items:flex-start;} .user_table_line_header{width:100%; display:grid; grid-template-columns:200px 300px 1fr; align-items:center; background:#e9e9e9; color:#000; height:44px;} .user_table_line_privilage{display:grid; grid-template-rows:repeat(12,44px);} .user_table_line_privilage > div{border:solid thin #e9e9e9; border-top:none; display:flex; justify-content:flex-start; align-items:Center;} .user_table_line_privilage_action{display:grid; grid-template-rows:repeat(12,44px);} .user_table_line_privilage_action > div{border:solid thin #e9e9e9; border-top:none; height:44px; display:grid; grid-template-columns:150px 150px 150px; align-items: center;} .client_plan_close{position: absolute; top: 2rem; right: 2rem; background: #000; color: #fff; width: 44px; height: 44px; border-radius: 100px; display: flex; justify-content: center; align-items: center; font-size: 26px; cursor:pointer;} .client_plan_image{background:#e9e9e9; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; padding: 4rem; z-index: 99999; display:none; overflow-y: scroll;} .client_plan_image_show{display:inline-block;} .client_calendar{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; background:#e9e9e9;} .client_calendar_col1{width:20%; padding:1rem;} .client_calendar_col1 .client_calendar_col1_date{font-size:3rem; line-height:4rem; font-weight:bold;} .client_calendar_col1 .client_calendar_col1_date_year{font-size:4rem; line-height:4rem;} .client_calendar_col2{width:80%; display:grid; grid-template-columns:repeat(7,1fr);} .client_calendar_col2 .day_name{background:#000; color:#fff; height:22px; width:100%; display:flex; justify-content:center; align-items:Center;} .client_calendar_col2 .previous_month_day{width:100%; aspect-ratio:1; background:#e9e9e9; border:solid thin white; cursor:pointer;} .client_calendar_col2 .day_cont{width:100%; aspect-ratio:1; border:solid thin #e9e9e9; padding:.5rem; background:#fff;} .client_calendar_col2 .day_cont_number{font-size:18px; margin-bottom:1rem; width:33px; height:33px; background:#e9e9e9; border-radius:100px; display:flex; justify-content:center; align-items:center;} .download_plan{display:none;} #client_calendar .download_plan{display:inline-block !important;} .social_media_analysis{width:100%; display:flex; justify-content:flex-start; align-items:center; height:33px; background:#000; color:#fff; padding:0px 1rem; font-size:14px;} .social_media_analysis div{margin-right:1rem;} } @media screen and (max-width: 1279px) and (min-width: 768px) { /* SUBSCRIPTIONS */ .subscription_line_header{width:100%; display:grid; grid-template-columns:1fr 1fr 150px 150px 150px 150px 150px 150px; background:#000; border:solid thin #e9e9e9; margin-bottom:.5rem; height:44px;} .subscription_line_header div{color:#fff; justify-content:center; align-items:center;} .subscription_line{width:100%; display:grid; grid-template-columns:1fr 1fr 150px 150px 150px 150px 150px 150px; border:solid thin #e9e9e9; margin-bottom:.5rem; min-height:44px;} .subscription_aa{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; font-size:16px;} .subscription_type{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; flex-direction:column; overflow:hidden; font-size:14px;} .subscription_type span{font-size:12px;} .subscription_line_header .offer_client{font-size:16px; align-items:center !important; justify-content:center !important;} .subscription_client{border-right:solid thin #e9e9e9; display:flex; justify-content:flex-start; align-items:center; padding:0px 1rem; overflow:hidden; font-size:16px;} .subscription_contact{border-right:solid thin #e9e9e9; display:flex; justify-content:flex-start; align-items:center; padding:0px 1rem; overflow:hidden; font-size:16px;} .subscription_department{font-size:16px; border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .subscription_start{font-size:16px; border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .subscription_recurrent{font-size:16px; border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .subscription_status{font-size:16px; border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .subscription_tools{gap:22px; display:flex; justify-content:flex-end; align-items:center; padding:0px .5rem;} .subscription_tools ion-icon{font-size:16px; color:#fff;} .subscription_tool_item{ border-radius:5px; width:22px; height:22px; display:flex; justify-content:center; align-items:Center;} .subscription_edit{background:var(--cyan);} .subscription_duplicate{background:orange;} .subscription_delete{background:red;} .subscription_payment_link{background:orange; width:22px; height:22px; border-radius:5px; display:flex; justify-content:center; align-items:center;} .calendar{width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; margin-bottom:2rem} .calendar_header{width:100%; display:flex; justify-content:space-between; align-items:center; padding:1rem; border-bottom:solid thin #e9e9e9;} .calendar_header_text{font-weight:bold;} .calendar_prev{cursor:pointer; background:#e9e9e9; display:flex; justify-content:center; align-items:center; width:44px; height:44px; border-radius:44px;} .calendar_next{cursor:pointer; background:#e9e9e9; display:flex; justify-content:center; align-items:center; width:44px; height:44px; border-radius:44px;} .calendar_body{margin-top:1rem; width:100%; overflow-x:auto; } .calendar_body_inner{display:grid; grid-template-columns:repeat(auto-fill,calc((100% / 7) - 2px)); grid-gap:1px;} .calendar_day{min-width:66px; min-height:66px; aspect-ratio:1; border:solid thin #e9e9e9; padding:1rem;} .current_day .day_name_info{background:var(--cyan);} .inactive_day{background:#e9e9e9;} .day_info{margin-bottom:.5rem; position:relative; display:flex; justify-content:flex-start; align-items:Center;} .inactive_day .day_name_info{background:#fff !important;} .inactive_day .day_number_info{background:#fff !important;} .day_name_info{font-size:12px; font-weight:bold; height:33px; width:max-content; border-radius:33px; padding-left:44px; padding-right:1rem; margin-left:-33px; background:#c2c2c2; order:2; z-index:1; display:flex; justify-content:flex-start; align-items:center;} .day_number_info{background:#e9e9e9; width:33px; height:33px; border-radius:33px; display:flex; justify-content:center; align-items:center;font-size:12px; order:1; z-index:2;} .map_cont{width:100% !important; border:solid thin red; display:flex !important;} .map_cont #map{width:100%; height:400px; display:flex !important;} .events_counter{font-size:14px; font-weight:500; margin-bottom:.5rem;} .event_slide_left .event_item{margin-left:-265px;} .event_slide_left .event_delete{right:85px;} .event_slide_left .event_edit{right:35px;} .events_cont{width:100%; aspect-ratio:1.2; overflow-y:auto;} .event_element{width:100%; position:relative; overflow:hidden;} .event_element_inner{width:100%; display:flex; justify-content:center; align-items:center; position:relative;} .event_item{transition:all .6s; min-height:50px; position:relative; background:#b8ffb8; margin-bottom:.5rem; width:100%; border-radius:1rem; padding:.5rem;} .event_item_time{font-size:12px; font-weight:bold;} .event_item_desc{font-size:12px;} .event_item_location{position:absolute; top:.5rem; right:.5rem;} .event_item_location a{color:#000; font-size:16px;} .event_delete{border-radius:5px; transition:all .6s; width:33px; height:33px; background:red; position:absolute; top:50%; right:-44px; transform:translateY(-50%); display:flex; justify-content:center; align-items:center; color:#fff;} .event_edit{border-radius:5px; transition:all .6s; width:33px; height:33px; background:cyan; position:absolute; top:50%; right:-110px; transform:translateY(-50%); display:flex; justify-content:center; align-items:center; color:#fff;} .home_tile_events{min-height:150px; overflow-y:auto; width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; padding:1rem;} .home_tile_event{width:100%; background:#b8ffb8; min-height:44px; margin-bottom:1rem; display:flex; justify-content:space-between; align-items:Center; padding:0px .5rem;} .home_tile_event_time{font-size:14px; font-weight:bold; width:55px; display:flex; justify-content:center; align-items:Center;} .home_tile_event_desc{font-size:14px; width:100%; padding:0px .5rem; display:flex; justify-content:flex-start; align-items:center;} .home_tile_event_pin{font-size:14px; width:55px; display:flex; justify-content:center; align-items:Center;} .home_tile_event_pin a{font-size:16px; color:#000; display:flex; justify-content:center; align-items:Center; width:100%;} .event_full_date{font-weight:bold;} .client_tabs{width:100%; display:flex; justify-content:flex-start; align-items:center;} .client_tab{height:44px; display:flex; justify-content:center; align-items:center; padding:0px 1rem; font-size:16px; color:#000; background:#f5f5f5; margin-right:1rem; cursor:pointer;} .client_tab span{margin-left:1rem; font-size:12px; width:max-content; height:22px; padding:0px .5rem; background:#ccc; display:flex; justify-content:center; align-items:center; border-radius:3px;} .client_tile_open{display:inline-block !important;} .client_tab_selected{background:#000 !important; color:#fff !important;} .client_tab_selected span{color:#000 !important;} .contact_name{font-weight:bold; font-size:16px;} .contact_code{font-size:14px;} .disclaimer{font-style:italic; font-size:12px; color:#999;} .home_contract_cont{width:100%; margin:1rem 0px;} .home_contract_company{cursor:pointer; width:100%; font-weight:bold; padding:0px 1rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;} .home_contract_dates{margin-bottom:.5rem; width:100%; padding:0px 1rem; display:flex; justify-content:center; align-items:flex-start; flex-direction:column; height:0px; overflow:hidden;} .home_contract_dates_inner{width:100%; padding:0px 1rem; display:flex; justify-content:space-between; align-items:center; height:33px;} .home_contract_dates_inner:nth-child(2n+1){background:#e9e9e9;} .home_contract_dates div:first-child{font-size:14px;} .home_contract_dates div:last-child{font-weight:bold; text-align:right; font-size:16px;} .home_contract_open{height:auto !important;} .home_contract_expires{width:100%; background:#000; color:#fff; padding:5.5px 1rem; font-weight:bold; text-align:right; font-size:12px;} .home_admin{width:100%; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:Wrap;} .home_tile{margin-bottom:2rem; width:calc((100% / 2) - 1rem); margin-right: 1rem; border:solid thin #e9e9e9; border-radius:.5rem; box-shadow:2px 2px 4px #eee;} .home_tile_title{width:100%; height:33px; display:flex; justify-content:flex-start; padding:0px 1rem; align-items:center; font-weight:bold; font-size:2ch; background:#e9e9e9; } .home_tile_content{width:100%; display:grid; padding:1rem;} .home_tile_content_3col{grid-template-columns:calc(100% / 3) calc(100% / 3) calc(100% / 3);} .home_tile_col1{width:100%; aspect-ratio:1; padding:.5rem; display:flex; justify-content:center; align-items:center;} .home_tile_col2{width:100%; aspect-ratio:1; padding:.5rem; display:flex; justify-content:center; align-items:center;} .home_tile_col3{width:100%; aspect-ratio:1; padding:.5rem; display:flex; justify-content:center; align-items:center;} .home_tile_counter{cursor:pointer; width:100%; aspect-ratio:1; border-radius:500px; display:flex; justify-content:center; align-items:center; flex-direction:column;} .home_tile_counter span{font-weight:Bold; font-size:2vw;} .home_tile_counter_green{border:solid 5px green;} .home_tile_counter_orange{border:solid 5px orange;} .home_tile_counter_red{border:solid 5px red;} .home_quick_list_cont{width:100%; padding:0px 1rem; display:none; justify-content:center; align-items:center; flex-direction:column;} .home_quick_list{display:grid; grid-template-columns: 50% 50%; width:100%;} .home_quick_list div:first-child{font-weight:bold; font-size:14px;} .home_quick_list div:last-child{text-align:right;} .home_quick_list_open{display:flex !important;} .thankyou{width:100%; height:100vh; display:flex; justify-content:center; align-items:center; flex-direction:column; font-family: proxima-nova, sans-serif;} .thankyou img{width:100%; height:auto; max-width:500px; max-height:100%;} .thankyou div{font-size:1.6rem; text-align:center; margin-top:44px; width:90%;} .company_information{width:100%; margin:0px .5rem 2rem; display:flex; justify-content:center; align-items:flex-start; flex-direction:column;} .company_information h2{font-size:1.5rem !important; font-weight:bold !important; margin-bottom:0px;} .hp_task_line_header{width:100%; background:#000; display:grid; grid-template-columns:44px 1fr 150px 110px; margin-bottom:1rem;} .hp_task_line_header div{color:#fff; height:44px; display:flex; justify-content:center; align-items:Center;} .hp_task_line{width:100%; display:grid; grid-template-columns:44px 1fr 150px 110px; margin-bottom:1rem; border-bottom:solid thin #333;} .hp_task_line div{height:44px; display:flex; justify-content:center; align-items:Center;} .hp_invoice_line_header{width:100%; background:#000; display:grid; grid-template-columns:44px 1fr 150px 110px; margin-bottom:1rem;} .hp_invoice_line_header div{color:#fff; height:44px; display:flex; justify-content:center; align-items:Center;} .hp_invoice_line{width:100%; display:grid; grid-template-columns:44px 1fr 150px 110px; margin-bottom:1rem; border-bottom:solid thin #333;} .hp_invoice_line div{height:44px; display:flex; justify-content:center; align-items:Center;} .client_tiles_cont{display:flex; width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .client_tile{display:none; overflow-y:auto; padding:1rem; box-shadow:var(--box-shadow); border-radius:.5rem; background:#f5f5f5; margin:2rem .5rem 0px; width:100%;} .client_tile h2{font-size:1.5rem !important; font-weight:bold;} .client_tiles_cont_inner{width:100%; padding:1rem; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap;} .tile_item{width:250px; padding:1rem; margin-right:1rem;} .expiration_circle{border-radius:1000px; width:100%; aspect-ratio:1; display:flex; justify-content:center; align-items:center; flex-direction:column;} .expiration_circle span{font-size:2rem; font-weight:bold;} .expiration_cirlce_orange{border:solid 11px orange;} .expiration_cirlce_red{border:solid 11px red;} .expiration_cirlce_green{border:solid 11px green;} .tile_item_name{font-weight:bold; font-size:14px; width:100%; text-align:center; margin-bottom:1rem;} .page_logo{width:100%; height:66px; margin-bottom:2rem;} .page_logo img{width:auto; height:auto; max-width:100%; max-height:100%;} .order_aa_header{display:none;} .order_type_header{display:none;} .order_client_header{display:none;} .order_date_header{display:none;} .order_date_header{display:none;} .order_code_header{display:none;} .order_tools_header{display:none;} .order_line_header{width:max-content; display:grid; grid-template-columns:250px 250px 450px 150px 150px 150px 150px 150px; background:#000; border:solid thin #e9e9e9; margin-bottom:.5rem; height:44px;} .order_line_header div{color:#fff; justify-content:center; align-items:center;} .order_line{width:max-content; display:grid; grid-template-columns:250px 250px 450px 150px 150px 150px 150px 150px; border:solid thin #e9e9e9; margin-bottom:.5rem;} .order_aa{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .order_type{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; flex-direction:column;} .order_type span{font-size:12px;} .order_client{border-right:solid thin #e9e9e9; display:flex; justify-content:flex-start; align-items:center; padding:0px 1rem;} .order_date{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .order_line .order_code{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; font-size:12px;} .order_code{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .order_tools{display:flex; justify-content:flex-end; align-items:center; padding:0px .5rem;} .order_tools ion-icon{font-size:16px; color:#fff;} .order_payment_link{background:orange; width:22px; height:22px; border-radius:5px; display:flex; justify-content:center; align-items:center;} .new_contact{width:100%;} .footer{width:100%; background:var(--grey); height:44px; display:flex; justify-content:center; align-items:center;} .footer_container{width:95vw; height:44px; display:flex; justify-content:space-between; align-items:center;} .footer .col1{width:50%; display:flex; justify-content:flex-start; align-items:center; height:44px; margin:0px !important; } .footer .col2{width:50%; display:flex; justify-content:flex-end; align-items:center; height:44px; margin:0px !important; font-size:.8rem;} .footer .col2 img{margin-left:1rem; width:auto; height:auto; max-width:22px; max-height:22px;} .footer_item{margin-right: 1rem; position: relative; height: 44px; display: flex; justify-content: flex-start; align-items: center;} .footer_item:after{content:""; width:3px; height:3px; border-radius:6px; background:var(--black); margin-left: 1rem;} .footer_item:last-child:after{content:none !important;} .footer_item a{color:var(--black); font-size:.8rem;} /* GENERAl */ .empty_logo_letter{border:solid thin var(--dark-grey); width:33px; height:33px; border-radius:44px; display:flex; justify-content:center; align-items:center;} .request_field_div{align-items:center !important; height:44px; flex-direction:row !important; font-weight:bold;} .col1{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:1rem;} .col3{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:1rem;} .col4{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:1rem;} .col2{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:1rem;} .request_field label{margin-bottom:8px; font-weight:bold;} .col2 .request_field{display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:calc((100% / 2) - 11px); margin:0px 5.5px;} .col3 .request_field{display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:calc((100% / 3) - 11px); margin:0px 5.5px;} .col3 .infos{margin-top:22px; display:none; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:calc((100% / 3) - 22px); margin-right:22px;} .col4 .request_field{display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:calc((100% / 4) - 11px); margin:0px 5.5px;} .col4 .infos{margin-top:22px; display:none; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:calc((100% / 4) - 22px); margin-right:22px;} .col1 .request_field{display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:calc(100%);} .warning_message{font-size:.7rem; font-weight:200; font-style:italic; color:red;} .search_button{margin-left:1rem; background:var(--grey); color:var(--black); font-size:1.2rem; border-radius:.3rem; width:44px; height:44px; display:flex; justify-content:center; align-items:center;} .add_button_fixed{transition:all .9s; color:#000; width:44px; height:44px; border-radius:100px; position:fixed; bottom:22px; right:22px; cursor:pointer; background:var(--grey); box-shadow:var(--box-shadow); display:flex; justify-content:center; align-items:center; font-size:22px;} .add_button_fixed:hover{background:var(--dark-grey); color:#fff;} .add_container{width:100%; background:var(--grey); overflow:hidden; height:0px; width:100%;} .add_container_open{height:auto; padding:1rem 1rem 0px 1rem;} .entity_list{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-right:1rem; margin-bottom:1rem; flex-wrap:wrap; overflow-x:auto;} .collection_element{width:calc((100% / 2) - 1rem); padding:1rem; min-height:200px; background:var(--grey); box-shadow:var(--box-shadow); border-radius:.3rem; margin-right:1rem; margin-bottom:1rem; display:flex; justify-content:center; align-items:center; flex-direction:column;} .collection_image_logo{width:88px; height:88px; border-radius:100px; border:solid 1px var(--dark-grey); margin-bottom:1rem; overflow:hidden; display:flex; justify-content:center; align-items:center;} .collection_image_logo img{width:auto; height:auto; max-width:65%; max-height:65%;} .collection_title{font-size:1.4rem; width:80%; text-align:center; line-height:1.8rem; height:3.6rem; overflow:hidden;} .collection_subtitle{font-size:1.1rem; margin-bottom:1rem; font-weight:300;} .collection_icons{margin-top:1rem;} .collection_element .single_toolbox{justify-content:space-evenly;} .collection_element_col_center{display:flex; justify-content:center; align-items:center;} .collection_element_col_start{display:flex; justify-content:flex-start; align-items:center;} .collection_element_col_date{font-size:.8rem; font-weight:400;} .collection_element_col_tools{width:88px; display:flex; justify-content:space-between; align-items:center; margin-top:1rem;} .collection_element_col_tools ion-icon{font-size:1.2rem;} .col_title{padding:.5rem 1rem; background:var(--dark-grey); color:var(--white); margin-bottom:1rem;} .invoices_cont_inner{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-right:1rem; margin-bottom:1rem; flex-wrap:wrap;} .invoice_item{width:calc((100% / 4) - 1rem); padding:1rem; min-height:200px; background:var(--grey); box-shadow:var(--box-shadow); border-radius:.3rem; margin-right:1rem; margin-bottom:1rem; display:flex; justify-content:center; align-items:center; flex-direction:column;} .invoice_client_name{font-size:1.4rem; width:80%; text-align:center; line-height:1.8rem; height:3.6rem; overflow:hidden;} .invoice_number{font-size:1.4rem; width:80%; text-align:center; line-height:1.8rem; font-weight:bold;} .invoice_date{font-size:.8rem; margin-bottom:1rem; font-weight:400;} .invoice_price{font-size:1.4rem; text-decoration:underline;} .invoice_tools{width:176px; display:flex; justify-content:space-evenly; align-items:center; margin-top:1rem; flex-wrap:Wrap;} .invoice_tools ion-icon{font-size:1.2rem;} .view_record{display:flex; justify-content:center; align-items:center; width:33px; height:33px; border-radius:.3rem; background:var(--cyan); color:var(--white);} .view_pdf{display:flex; justify-content:center; align-items:center; width:33px; height:33px; border-radius:.3rem; background:orange; color:var(--white);} .trash_record{display:flex; justify-content:center; align-items:center; width:33px; height:33px; border-radius:.3rem; background:var(--red); color:var(--white);} .single_toolbox{margin-bottom:1rem; width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .single_toolbox .toolbox_item{width:66px; height:66px; box-shadow:var(--box-shadow);} .toolbox_item{transition:all .9s; cursor:pointer; margin-right:1rem; margin-bottom:1rem; display:flex; justify-content:center; align-items:center; flex-direction:column; background:var(--grey); position:relative;} .toolbox_item:hover{background:var(--dark-grey);} .toolbox_item:hover .toolbox_item_title{color:var(--white);} .toolbox_item img{width:auto; height:auto; max-width:33px; max-height:33px;} .toolbox_item .toolbox_item_title{font-size:.7rem; margin-top:.5rem; font-weight:200; color:var(--black);} .toolbox_counter{position:absolute; width:33px; height:22px; border-radius:44px; background:var(--black); top:-11px; right:-11px; display:flex; justify-content:center; align-items:center; color:var(--white); z-index:999; font-size:.7rem;} .single_cont{width:100%;} .col3 div{display:none; width:calc((100% / 3) - 11px); margin:0px 5.5px;} .col3 div .request_field{width:100% !important; margin:0px !important;} .col2 div{display:none; width:calc((100% / 3) - 11px); margin:0px 5.5px;} .col2 div .request_field{width:100% !important; margin:0px !important;} .subproject{display:none;} .subproject_open{display:flex !important;} .project_tag_options_cont{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .project_tag_option{background:var(--grey); box-shadow:var(--box-shadow); padding:0px 11px; height:33px; display:flex; justify-content:center; align-items:center; border-radius:100px; margin-right:1rem; margin-bottom:1rem; cursor:pointer;} .project_tag_option_selected .project_tag_option_light{background:var(--cyan);} .project_tag_option_light{width:8px; height:8px; background:var(--grey); border-radius:100px; margin-right:.5rem; box-shadow:inset var(--box-shadow); } .questionaire_toolbox{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .questionaire_toolbox_item{background:var(--grey); box-shadow:var(--box-shadow); padding:0px 11px; height:33px; width:auto; display:flex; justify-content:center; align-items:center; border-radius:100px; margin-right:1rem; margin-bottom:1rem; cursor:pointer;} .q_item{display:flex; justify-content:center; align-items:center; flex-direction:column; margin-bottom:1rem;} .q_item textarea{height:44px;} .q_item_delete{color:var(--red); font-size:.7rem; cursor:pointer;} .q_item_move{cursor: move; margin-bottom: -5px; display:flex; justify-content:flex-start; align-items:center;} .q_item_move ion-icon{margin-right:1rem;} .q_item_move .q_item_title{font-size:1rem; font-weight:bold;} .q_item_toolbox{width:100%; display:flex; justify-content:space-between; align-items:center; background:var(--grey); padding:0px 1rem; height:33px;} .q_item_element{border:solid thin var(--grey); border-top:none; padding:1rem; width:100%;} .q_item_multiple{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; margin-top:1rem;} .q_item_multiple input{width:calc(50% - 1rem); min-width:0; margin-bottom:1rem;} .answer_form{width:100%; display:flex; justify-content:center; align-items:flex-start;} .answer_form_cont{width:50vw; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; background:var(--white); box-shadow:var(--box-shadow); margin:1rem 0px; border-radius:1rem; padding:2rem;} .anwser_form_logo{width:100%; display:flex; justify-content:center; align-items:center;} .anwser_form_logo img{width:auto; height:auto; max-width:400px; max-height:400px;} .answer_form_title_item{font-size:2rem; font-weight:bold; width:100%;} .answer_form_subtitle_item{font-size:1rem; line-height:1.4rem; width:100%; font-style:italic; color:#a9a9a9; margin-bottom:1rem;} .answer_form_text_item{width:100%; margin-bottom:1rem; } .answer_form_entity_title{margin-bottom:1rem; border-bottom:solid thin var(--dark-grey); padding-bottom:.5rem;} .answer_form_text_item textarea{min-height:200px;} .answer_form_multiple_items{width:100%; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap;} .answer_form_multiple_item{width:calc(50% - 1rem); height:44px;} .profile_cont{width:100%; display:flex; justify-content:space-between; align-items:flex-start;} .profile_cont .col{width:100%;} .profile_cont_2{width:100%; display:flex; justify-content:space-between; align-items:flex-start;} .profile_cont_2 .col{width:calc(50% - 1rem);} .profile_cont_3{width:100%; display:flex; justify-content:space-between; align-items:flex-start;} .profile_cont_3 .col{width:calc((100% / 3) - 1rem);} .photo_preview{width:100%; min-height:150px;} .photo_preview img{width:auto; height:auto; max-width:100%; max-height:150px;} .create_post_option_info{display:flex; justify-content:center; align-items:center; flex-direction:column; padding:1rem;} .create_post_option_info .select_files{display:flex; justify-content:center; align-items:center; flex-direction:column;} .create_post_option_info .select_files ion-icon{font-size:2rem; color:var(--dark-grey);} .create_post_option_info .select_files div{font-size:.8rem;} .progress{border-radius:1rem; background:var(--grey); margin-top:.5rem; display:none; justify-content:center; align-items:center; font-size:.8rem; padding:.3rem;} .progress_show{display:flex !important;} .progress-bar{background:var(--cyan); border-radius:1rem; display:flex; justify-content:center; align-items:center; color:var(--white);} .thumbnail{width:88px; height:88px; display:flex; justify-content:center; align-items:center; background-position:center !important; background-size:cover !important;} .upload_file{display:none;} /* END OF GENERAL */ /* CLIENTS */ /* END OF CLIENTS */ /* REGISTER */ .register_birthday{width:100%; display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;} .register_birthday select{width:calc((100% / 3) - 1rem);} /* END OF REGISTER */ .login_form{width:600px; display:flex; justify-content:center; align-items:center; flex-direction:column; padding:22px; position:fixed; top:calc(50% - 5rem); left:50%; transform:translate(-50%,-50%);} .login_form_inner{border-radius:10px; box-shadow:var(--box-shadow); background:var(--grey); display:flex; justify-content:center; align-items:center; flex-direction:column; padding:1rem 2rem; width:100%;} .login_form_inner form{width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column;} .logo_outside{width:100%; margin-bottom:5rem;} .logo_outside img{width:auto; height:auto; max-width:100%; max-height:100%;} .top_bar{width:calc(100% - 44px); display:flex; justify-content:space-between; align-items:center; padding:0px 22px; height:33px; position:fixed; top:0px; left:44px; background:var(--grey); z-index:99;} .back_to_start{font-size:12px;} .top_bar .full_name{font-size:12px; color:#000; display:flex; justify-content:flex-end; align-items:center;} .top_bar .full_name strong{margin-left:4px;} .top_bar .full_name ion-icon{margin-right:4px;} fieldset{border:solid thin #c5c5c5; width:100%; min-height:400px; padding-left:22px;} fieldset .container{padding:22px 0px; min-height:400px !important;} legend{padding:0px 11px;} fieldset label{font-size:14px; margin-bottom:11px !important; display:inline-block; font-weight:bold;} .open_info{display:flex !important;} .wrapper{width:100%; min-height:calc(100vh - 44px); display:flex; justify-content:flex-start; align-items:flex-start; position:relative;} .container{width:100%; padding:22px 22px 22px 66px; min-height:calc(100vh - 22px); margin-top:22px;} .wrapper_no_login{width:100%; min-height:calc(100vh - 44px - 44px); display:flex; justify-content:flex-start; align-items:flex-start; position:relative;} .container_no_login{width:100%; padding:22px 22px 22px 22px; min-height:calc(100vh - 44px); margin-top:0px; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .page_text{padding:0px 5rem;} .page_text p{margin-bottom:1rem; font-size:1.2rem; line-height:1.6rem; font-weight:300;} .page_text h3{margin-bottom:1rem; font-size:1.8rem; font-weight:600;} .logo{font-family: 'Syncopate', sans-serif; font-size:22px; margin-bottom:44px; width:44px; display:flex; justify-content:center; align-items:center;} .logo img{width:auto; height:auto; max-width:33px; max-height:33px;} .menu{background:var(--grey); width:44px; height:100vh; box-shadow:var(--box-shadow); display:flex; justify-content:flex-start; align-items:center; padding:11px; flex-direction:column; position:fixed; top:0px; left:0px; z-index:99999;} .menu_tag{display:none;} .menu_item{width:44px; height:44px;} .menu_item a{width:44px; height:44px; position:relative; display:flex; justify-content:center; align-items:center; color:var(--black);} .menu_item img{width:auto; height:auto; max-width:22px; max-height:22px;} .menu_item ion-icon{font-size:22px;} .menu_item .menu_item_title{position:absolute; height:44px; background:var(--grey); padding-left:22px; left:44px; top:0px; width:200px; display:none; justify-content:flex-start; align-items:center;} .menu_item:hover .menu_item_title{display:flex !important; } .ribbon{margin-bottom:1.4rem; width:100%; box-shadow:var(--box-shadow); height:44px; font-weight:300; display:flex; justify-content:space-between; align-items:center; background:var(--grey); padding:0px 22px; font-size:1.3rem;} .ribbon_big{margin-bottom:1.4rem; width:100%; box-shadow:var(--box-shadow); height:55px; font-weight:300; display:flex; justify-content:space-between; align-items:center; background:var(--grey); padding:0px 22px; font-size:1.8rem;} .request_item{width:100%; height:44px; margin-top:22px; display:flex; justify-content:space-between; align-items:center; background:var(--grey); padding:0px 22px;} .request_item_id{flex:1;} .request_item_name{flex:6; text-align:center;} .request_item_date{flex:5; text-align:center;} .request_item_from{flex:4; text-align:center;} .request_item_edit_date{flex:5; text-align:center;} .request_item_edit_from{flex:5; text-align:center;} .request_item_tools{display:flex; justify-content:space-between; align-items:center; width:140px;} .request_item_status{width:15px; height:15px; border-radius:22px; background:#999;} .request_item_tools img{width:22px;} .request_item_client{width:250px;} .send_offer{position:relative;} .send_offer img{cursor:pointer;} .send_panel{width:600px; background:#f4f4f4; display:none; justify-content:flex-start; align-items:flex-start; flex-direction:column; position:absolute; top:34px; right:0px; padding:22px; z-index:999999;} .new_sending{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .open_send_panel{display:flex !important;} .send_offer_email_input{width:100%; margin-bottom:11px; margin-top:11px;} .send_offer_email{background:#3b3b3b; color:#fff; padding:8px; border-radius:5px; cursor:pointer;} .sending_history{width:100%;} .sending_history h3{margin-bottom:11px; font-size:22px; font-weight:bold;} .send_offer_email_text{width:100%;} .history_item{width:100%; display:flex; justify-content:flex-start; align-items:center; border-bottom:solid thin black; padding-bottom:11px; margin-bottom:11px;} .history_item_date{font-weight:bold; font-size:12px; margin-right:22px;} .history_item_emails{font-size:12px;} .selector_images{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; margin-bottom:22px;} .selection_image{width:55px; height:55px; display:flex; justify-content:center; align-items:center; margin-right:11px; margin-bottom:11px;} .selector_images img{width:auto; height:auto; max-width:55px; max-height:55px;} .selector{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .selector_multi{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; margin-bottom:22px;} .selector_multi_line{width:100%; display:flex; justify-content:center; align-items:flex-start; flex-direction:column; margin-bottom:22px;} .selector_multi .select_option{width:calc(100% / 3); font-size:14px;} .selector_multi_line .select_option{width:100%; font-size:14px; margin-bottom:11px;} .selector_multi_line input[type="text"]{width:90% !important;} .selector_option{background:var(--grey); box-shadow:var(--box-shadow); display:flex; justify-content:center; align-items:center; padding:0px 11px; height:33px; border-radius:10px; margin-right:22px; cursor:pointer; transition:all .6s; margin-bottom:11px;} .selector_option ion-icon{display:none;} .selector_option:hover{background:#dbebff;} .selector_option input{display:none;} .matched{background:#dbebff !important;} .matched ion-icon{display:inline-block !important;} .login_title{width:100%; text-align:center; display:flex; justify-content:center; align-items:center; flex-direction:column; font-size:16px; margin-bottom:44px;} .login_col1{width:550px; height:100vh; overflow:hidden;} .login_col1 img{width:auto; height:auto; max-width:100%; max-height:100%;} .login_col2{width:calc(100% - 550px); height:100vh; background:#fff; display:flex; justify-content:center; align-items:center; flex-direction:column;} .adr_title{font-family: 'Syncopate', sans-serif; font-size:4em;} .debugger{background:#dbebff; padding:22px; width:100%;} .add_additional_cost{cursor:pointer; background:green; width:44px; height:44px; border-radius:44px; display:flex; justify-content:center; align-items:center; color:#fff; font-size:28px; margin-top:22px; margin-right:11px;} .remove_additional_cost{cursor:pointer; background:red; width:44px; height:44px; border-radius:44px; display:none; justify-content:center; align-items:center; color:#fff; font-size:28px; margin-top:22px; margin-right:11px;} .col3:last-child .remove_additional_cost{display:flex !important; } .buttons_field{flex-direction:row !important;} /* SCHEDULE */ .section_3{display:none;} .open_section_options{display:flex !important;} .tabs{display:flex; justify-content:flex-start; align-items:center;} .tab{width:150px; cursor:pointer; display:flex; justify-content:center; align-items:center; background:var(--grey); height:44px; margin-right:11px; font-size:14px; transition:all .6s;} .tab:hover{background:black; color:white;} .selected_tab{background:black; color:white;} .full_container{padding:11px 44px !important;} .list{width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column;} .add_new_client{cursor:pointer;} .list_item{width:100%; display:flex; justify-content:flex-start; align-items:center;} .list_item:nth-child(2n+1){background:#f1f1f1;} .list_item:hover{background:#ccc;} .list_item_days:hover{background:transparent !important;} .list_item_client{position:relative; cursor:pointer; border-bottom:solid thin black; border-left:solid thin black; border-right:solid 2px black; width:200px; /*height:calc((100vw - 200px - 88px) / 31);*/ height:53px; display:flex; justify-content:center; align-items:center; font-size:14px;} .list_item_inactive{opacity:0.5;} .list_item_day{border-bottom:solid thin black; border-right:solid thin black; font-size:12px; width:calc((100vw - 200px - 88px) / 31); /*height:calc((100vw - 200px - 88px) / 31);*/ height:53px; display:flex; justify-content:center; align-items:center; position:relative; cursor:pointer;} .list_item_days{border-bottom:solid 2px black;} .list_item .list_item_day:hover{background:#efc0ff;} .list_item_days .list_item_day:hover{background:transparent !important;} .history_cont{height:66px; width:100%; display:flex; justify-content:center; align-items:flex-start; flex-direction:column; overflow-y:scroll;} .history_line{height:22px; width:100%; font-size:12px;} .history_title{font-size:18px; font-weight:bold; margin-bottom:11px;} .step_1{background:#ffc800 !important;} .step_2{background:#00dcff !important;} .step_3{background:#aee1c0 !important;} .step_4{background:black !important; color:#fff;} .step_5{background:red !important;} .hide_colors{background:transparent !important;} .monthly_progress{height:33px; width:100%; background:#aee1c0; color:#000; display:flex; justify-content:flex-start; align-items:center; padding:0px 22px; font-size:14px; font-weight:bold;} .monthly_progress div{margin-right:11px;} .monthly_progress div span{font-weight:400 !important;} .monthly_admin_info{display:flex; justify-content:flex-end; align-items:center;} .monthly_summarize{display:flex; justify-content:flex-start; align-items:center;} .monthly_summarize div{margin-right:11px;} .monthly_budget{height:33px; width:100%; background:#999; color:#000; display:flex; justify-content:space-between; align-items:center; padding:0px 22px; font-size:14px; font-weight:bold;} .monthly_active_clients{margin-right:11px;} .monthly_inactive_clients{margin-right:11px;} .monthly_budget span{font-weight:400 !important;} .date_selector{width:100%; display:flex; justify-content:center; align-items:center; height:44px; background:#000; color:#fff;} .date_selector .nav{width:110px; height:44px; font-size:12px; cursor:pointer;} .date_selector .nav span{font-size:14px; font-size:bold;} .date_selector .prev{display:flex; justify-content:flex-start; align-items:center; text-align:center; padding-left:8px;} .date_selector .next{display:flex; justify-content:flex-end; align-items:center; text-align:center; padding-right:8px;} .date_selector .current_month{width:calc(100% - 220px); height:44px; font-size:18px; font-weight:bold; display:flex; justify-content:center; align-items:center;} .today_flag{background:#dbebff;} .weekdays{background:#c4c4c4;} .color_id{width:100%; justify-content:space-between; align-items:center; background:var(--grey); margin-bottom:11px; height:33px; padding:0px 22px; margin-top:44px;} .color_item{display:flex; justify-content:flex-start; align-items:center;} .color_box{width:11px; height:11px; margin-right:11px;} .color_info{font-size:12px;} .panel_social_caption{min-height:110px !important; font-size:12px;} .panel_social_desc{min-height:110px !important; font-size:12px;} .checkboxes{font-size:12px; display:flex; justify-content:flex-start; align-items:center;} .has_comment{width:16px; height:16px; border-radius:5px; position:absolute; top:3px; right:3px; display:flex; justify-content:center; align-items:center;} .has_comment img{width:auto; height:auto; max-width:100%; max-height:100%;} .panel{position:fixed; width:90vw; height:90vh; top:5vh; left:5vw; overflow-y:scroll; display:none; justify-content:center; align-items:flex-start; background:#f1f1f1; box-shadow:0px 0px 5px #000; transition:all .6s; padding:22px; z-index:99999999;} .panel .container{min-height:80vh !important; padding:0px !important; position:relative;} .panel_show{display:flex !important;} .panel_client{font-size:22px;} .panel_client span{color:blue; font-weight:bold;} .panel_date{font-size:14px;} .panel_line{display:flex; justify-content:center; align-items:center; height:33px;} .panel_line .panel_line_middle{width:100%; height:1px; background:#ccc;} .panel_close{position:absolute; top:-22px; right:22px; font-size:42px;} .checkboxes_cont{display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; margin-bottom:22px;} .checkboxes{margin-right:22px;} .schedule_desc{margin-bottom:22px;} .buttons_area{width:100%; margin-top:22px; display:flex; justify-content:space-between; align-items:center;} .submit_button{height:44px; width:140px; border-radius:5px; background:#000; color:#fff; display:flex; justify-content:center; align-items:center; cursor:pointer;} .delete_button{height:44px; width:140px; border-radius:5px; background:red; color:#000; display:flex; justify-content:center; align-items:center; cursor:pointer;} .user_calendar{position:fixed; width:90vw; height:90vh; top:5vh; left:5vw; overflow-y:scroll; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; background:#f1f1f1; box-shadow:0px 0px 5px #000; transition:all .6s; padding:22px; z-index:99999999;} .user_calendar_client_title{font-size:22px; width:100%; text-align:left; margin-bottom:44px;} .user_calendar_client_title a{color:#000; font-size:16px;} .user_calendar_client_title i{font-size:16px;} .user_calendar_client_months{width:90%; display:flex; justify-content:center; align-items:center; margin-left:5%;} .user_calendar_line{width:calc(100% / 12); display:flex; justify-content:center; align-items:center; flex-direction:column;} .user_calendar_close{width:100%; text-align:right; font-size:42px; cursor:pointer;} .notification{position:fixed; top:44px; right:44px; background:#bfffca; padding:11px; display:flex; justify-content:flex-start; align-items:center; min-height:44px; border-radius:5px; font-size:12px;} .user_calendar_month_price input{width:80px; height:22px; font-size:14px;} .price_per_unit{font-size:8px; position:absolute; bottom:2px; right:2px;} .xorigoumeni_per_unit{font-size:8px; position:absolute; bottom:2px; right:2px;} .xorigoumeni_per_unit_all{font-size:8px; position:absolute; bottom:14px; right:2px;} .day_number{font-size:10px; position:absolute; top:2px; left:2px;} .user_calendar_month_action{font-size:12px; display:flex; justify-content:flex-start; align-items:center;} .user_calendar_month_action input{margin-right:5px;} .add_user_cont{position:fixed; width:90vw; height:90vh; top:5vh; left:5vw; overflow-y:scroll; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; background:#f1f1f1; box-shadow:0px 0px 5px #000; transition:all .6s; padding:22px; z-index:99999999;} .existing_client{font-size:14px;} .add_user_close{width:100%; text-align:right; font-size:42px; cursor:pointer;} .existing_sections_cont{width:100%; display:flex; justify-content:flex-start; align-items:center; margin:22px 0px;} .sections_cont{width:100%; display:flex; justify-content:flex-start; align-items:center; margin:22px 0px;} .section_selection{display:flex; justify-content:flex-start; align-items:center; font-size:12px; margin-right:11px;} .section_selection input{margin-right:5px;} .project_dates{display:flex; justify-content:flex-start; align-items:center; margin-bottom:11px;} .project_dates div{margin-right:11px; display:flex; justify-content:flex-start; align-items:center;} .project_dates div input{font-size:14px;} .customer_info{position:absolute; width:22px; height:22px; display:flex; justify-content:center; align-items:center; bottom:4px; left:4px; z-index:99999;} .customer_info img{width:auto; height:auto; max-width:100%; max-height:100%;} .add_task{position:absolute; width:22px; height:22px; display:flex; justify-content:center; align-items:center; bottom:4px; right:4px; z-index:99999;} .add_task img{width:auto; height:auto; max-width:100%; max-height:100%;} .user_for_task{font-size:14px; margin-bottom:11px;} /* END OF SCHEDULE */ .plan_list{width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap:wrap; max-width:1920px;} .plan_item{width:calc((100% / 4) - 22px); display:flex; justify-content:center; align-items:flex-start; flex-direction:column; box-shadow:0px 0px 2px rgba(0, 0, 0, 0.2); border-radius:max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px; margin-bottom:22px; margin-right:22px; overflow:hidden;} .plan_header{padding:12px 16px; width:100%;} .plan_client_item{width:100%; display:flex; justify-content:flex-start; align-items:center;} .plan_client_item .plan_client_logo{width:40px; height:40px; border-radius:40px; overflow:hidden;} .plan_client_item .plan_client_logo img{width:auto; height:auto; max-width:100%; max-height:100%; display:inline-block;} .plan_client_info{margin-left:6px; display:flex; justify-content:center; align-items:flex-start; width:calc(100% - 50px); flex-direction:column;} .plan_client_info .plan_item_name{font-size:16px; font-weight:500; color:#000;} .plan_client_info .plan_item_date{color:#65676b; font-size:12px;} .plan_item_caption{margin:8px 0px; font-size:14px; min-height:88px; line-height:18px;} .plan_image{width:100%; border-top:solid thin #e7e7e7; border-bottom:solid thin #e7e7e7;} .plan_image img{object-fit:cover; width:100%; height:100%;} .plan_placeholder{width:100%; height:22.7vw; background:#c9c9c9; position:relative;} .plan_placeholder:before{content:"No image available"; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-weight:bold; font-size:2em; text-align:center; color: #a5a5a5; text-shadow: 1px 1px 2px #686868;} .plan_footer{width:100%; padding:12px 16px;} .plan_footer_fake_options{border-top:solid thin #d1d1d1; border-bottom:solid thin #d1d1d1; padding:8px 0px; display:flex; justify-content:space-between; align-items:center;} .plan_footer_fake_option{width:calc(100% / 3); display:flex; justify-content:center; align-items:center; font-size:14px; font-weight:bold; color:#65676b;} .plan_footer_fake_option img{width:auto; height:auto; max-width:16px; max-height:16px; margin-right:8px;} .post_images_cont{width:100%; border:dashed 2px #999; padding:22px 22px;} .input_files{margin-bottom:11px;} .upload_button{height:33px; width:88px; border-radius:5px; background:#000; color:#fff; display:flex; justify-content:center; align-items:center; cursor:pointer; font-size:12px;} .preview{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:11px;} .image_preview{width:88px; height:88px; display:flex; justify-content:center; align-items:center; margin-right:11px; border:solid thin #999; position:relative;} .image_preview img{width:auto; height:auto; max-width:80px; max-height:80px;} .remove_file{position:absolute; top:-11px; right:-11px; width:22px; height:22px; border-radius:22px; background:#000; color:#fff; font-size:22px; display:flex; justify-content:center; align-items:center; cursor:pointer;} .video_planning{width:100%;} .client_plan{position:absolute; width:22px; height:22px; border:solid thin red; left:-22px; top:0px;} .plan_client_logo{display:flex; justify-content:center; align-items:center; border:solid thin #e5e5e5;} .half_black{background:#000; color:#fff; width:50%; height:44px; display:flex; justify-content:center; align-items:center; font-size:12px;} .half_white{background:#fff; color:#000; width:50%; height:44px; display:flex; justify-content:center; align-items:center; font-size:12px;} /* TICKETS */ .add_ticket_cont{width:100%; margin-top:44px;} .tickets_collection{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .ticket_item{width:100%; padding:0px 11px; display:flex; justify-content:flex-start; align-items:center; height:44px; background:#c9c9c9;} .ticket_item .ticket_item_status{width:33px; height:44px; display:flex; justify-content:center; align-items:center; } .ticket_item .ticket_item_status .ticket_item_status_red{width:11px; height:11px; border-radius:22px; background:red;} .ticket_item .ticket_item_status .ticket_item_status_green{width:11px; height:11px; border-radius:22px; background:green;} .ticket_item .ticket_item_status .ticket_item_status_orange{width:11px; height:11px; border-radius:22px; background:orange;} .ticket_item .ticket_item_title{width:100%; height:44px; display:flex; justify-content:flex-start; align-items:center; padding-left:11px; font-size:14px;} .ticket_item .ticket_item_date{width:230px; height:44px; display:flex; justify-content:flex-end; align-items:center; font-size:12px; padding-right:11px;} .ticket_item .ticket_item_client{width:300px; height:44px; display:flex; justify-content:flex-start; align-items:center; font-size:12px; font-weight:bold; } .ticket_item .ticket_item_tools{width:200px; height:44px; display:flex; justify-content:space-between; align-items:center;} .ticket_item_tools img{width:auto; height:auto; max-width:22px; max-height:22px;} .ticket_info_cont{background:var(--grey); padding:22px; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .ticket_info_title{font-size:20px; padding-bottom:22px; border-bottom:solid thin #333; width:100%;} .ticket_info_desc{padding:22px; border-bottom:solid thin #333; margin-bottom:22px; width:100%;} .ticket_info_desc p{font-size:14px; line-height:22px;} .ticket_info_desc ul{font-size:14px; line-height:22px; margin-left:22px;} .ticket_info_desc ol{font-size:14px; line-height:22px; margin-left:22px;} .ticket_info_desc a{font-size:14px; line-height:22px; text-decoration:underline !important;} .ticket_info_date{width:100%; border-top:solid thin #333; display:flex; justify-content:flex-end; align-items:center; font-size:12px; color:#999; padding:11px;} .ticket_info_images{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap;} .ticket_info_image{width:55px; height:55px; display:flex; justify-content:center; align-items:center; margin-right:11px; border:solid thin #333; margin-bottom:22px;} .ticket_info_image img{width:auto; height:auto; max-width:44px; max-height:44px;} .conversation_item_title{font-size:16px; font-weight:bold; padding-bottom:22px; border-bottom:solid thin #333; width:100%;} .conversation_item_title span{font-size:12px; font-weight:400;} .conversation_item_desc{padding:22px; margin-bottom:22px; width:100%; font-size:14px; line-height:22px;} .conversation_item_desc p{font-size:14px; line-height:22px; margin-bottom:22px;} .conversation_item_desc ul{font-size:14px; line-height:22px; margin-left:22px;} .conversation_item_desc li{font-size:14px; line-height:22px;} .conversation_item_desc ol{font-size:14px; line-height:22px; margin-left:22px;} .conversation_item_desc a{font-size:14px; line-height:22px; text-decoration:underline !important;} .conversation_item_date{width:100%; border-top:solid thin #333; display:flex; justify-content:flex-end; align-items:center; font-size:12px; color:#999; padding:11px;} .conversation_item_images{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap;} .conversation_item_image{width:55px; height:55px; display:flex; justify-content:center; align-items:center; margin-right:11px; border:solid thin #333; margin-bottom:22px;} .conversation_item_image img{width:auto; height:auto; max-width:44px; max-height:44px;} .add_answer_cont{margin-left:0px; background:#c9c9c9; padding:22px; margin-top:33px; position:relative;} .add_answer_cont:before{content:""; width: 0; height: 0; border-style: solid; border-width: 0 22px 22px 22px; border-color: transparent transparent #c9c9c9 transparent; position:absolute; top:-22px; left:44px;} .conversation_item{padding:22px;} .conversation_cont{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .admin_answer{background:#d6f9ff; width:calc(100% - 88px); display:flex; justify-content:flex-end; align-items:flex-start; flex-direction:column; margin-left:88px; margin-top:33px; position:relative;} /*.admin_answer:before{content:""; width: 0; height: 0; border-style: solid; border-width: 0 22px 22px 22px; border-color: transparent transparent #d6f9ff transparent; position:absolute; top:-22px; left:44px;}*/ .user_answer{background:var(--grey); width:calc(100% - 88px); display:flex; justify-content:flex-end; align-items:flex-start; flex-direction:column; margin-right:88px; margin-top:33px; position:relative;} /*.user_answer:before{content:""; width: 0; height: 0; border-style: solid; border-width: 0 22px 22px 22px; border-color: transparent transparent var(--grey) transparent; position:absolute; top:-22px; left:44px;}*/ /* END OF TICKETS */ } @media screen and (max-width: 767px){ /* SUBSCRIPTIONS */ .offer_tool_item{ border-radius:5px; width:22px; height:22px; display:flex; justify-content:center; align-items:Center;} .offer_edit{background:var(--cyan);} .offer_duplicate{background:orange;} .offer_delete{background:red;} .subscription_line_header{width:max-content; display:grid; grid-template-columns:200px 200px 150px 150px 150px 150px 150px 150px; background:#000; border:solid thin #e9e9e9; margin-bottom:.5rem; height:44px;} .subscription_line_header div{color:#fff; justify-content:center; align-items:center;} .subscription_line{width:max-content; display:grid; grid-template-columns:200px 200px 150px 150px 150px 150px 150px 150px; border:solid thin #e9e9e9; margin-bottom:.5rem; min-height:44px;} .subscription_aa{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; font-size:16px;} .subscription_type{border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; flex-direction:column; overflow:hidden; font-size:14px;} .subscription_type span{font-size:12px;} .subscription_line_header .offer_client{font-size:16px; align-items:center !important; justify-content:center !important;} .subscription_client{border-right:solid thin #e9e9e9; display:flex; justify-content:flex-start; align-items:center; padding:0px 1rem; overflow:hidden; font-size:16px;} .subscription_contact{border-right:solid thin #e9e9e9; display:flex; justify-content:flex-start; align-items:center; padding:0px 1rem; overflow:hidden; font-size:16px;} .subscription_department{font-size:16px; border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .subscription_start{font-size:16px; border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .subscription_recurrent{font-size:16px; border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .subscription_status{font-size:16px; border-right:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .subscription_tools{gap:22px; display:flex; justify-content:flex-end; align-items:center; padding:0px .5rem;} .subscription_tools ion-icon{font-size:16px; color:#fff;} .subscription_tool_item{ border-radius:5px; width:22px; height:22px; display:flex; justify-content:center; align-items:Center;} .subscription_edit{background:var(--cyan);} .subscription_duplicate{background:orange;} .subscription_delete{background:red;} .subscription_payment_link{background:orange; width:22px; height:22px; border-radius:5px; display:flex; justify-content:center; align-items:center;} .calendar{width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; margin-bottom:2rem} .calendar_header{width:100%; display:flex; justify-content:space-between; align-items:center; padding:1rem; border-bottom:solid thin #e9e9e9;} .calendar_header_text{font-weight:bold;} .calendar_prev{cursor:pointer; background:#e9e9e9; display:flex; justify-content:center; align-items:center; width:44px; height:44px; border-radius:44px;} .calendar_next{cursor:pointer; background:#e9e9e9; display:flex; justify-content:center; align-items:center; width:44px; height:44px; border-radius:44px;} .calendar_body{margin-top:1rem; width:100%; overflow-x:auto; } .calendar_body_inner{display:grid; grid-template-columns:repeat(auto-fill,100%); grid-gap:1px;} .calendar_day{min-width:66px; min-height:66px; aspect-ratio:1; border:solid thin #e9e9e9; padding:1rem;} .current_day .day_name_info{background:var(--cyan);} .inactive_day{background:#e9e9e9;} .day_info{margin-bottom:1rem; position:relative; display:flex; justify-content:flex-start; align-items:Center;} .inactive_day .day_name_info{background:#fff !important;} .inactive_day .day_number_info{background:#fff !important;} .day_name_info{font-size:12px; font-weight:bold; height:33px; width:max-content; border-radius:33px; padding-left:44px; padding-right:1rem; margin-left:-33px; background:#c2c2c2; order:2; z-index:1; display:flex; justify-content:flex-start; align-items:center;} .day_number_info{background:#e9e9e9; width:33px; height:33px; border-radius:33px; display:flex; justify-content:center; align-items:center;font-size:12px; order:1; z-index:2;} .map_cont{width:100% !important; border:solid thin red; display:flex !important;} .map_cont #map{width:100%; height:400px; display:flex !important;} .event_slide_left .event_item{margin-left:-265px;} .event_slide_left .event_delete{right:85px;} .event_slide_left .event_edit{right:35px;} .events_cont{width:100%; aspect-ratio:1.2; overflow-y:auto;} .event_element{width:100%; position:relative; overflow:hidden;} .event_element_inner{width:100%; display:flex; justify-content:center; align-items:center; position:relative;} .event_item{transition:all .6s; min-height:50px; position:relative; background:#b8ffb8; margin-bottom:.5rem; width:100%; border-radius:1rem; padding:.5rem;} .event_item_time{font-size:12px; font-weight:bold;} .event_item_desc{font-size:12px;} .event_item_location{position:absolute; top:.5rem; right:.5rem;} .event_item_location a{color:#000; font-size:16px;} .event_delete{border-radius:5px; transition:all .6s; width:33px; height:33px; background:red; position:absolute; top:50%; right:-44px; transform:translateY(-50%); display:flex; justify-content:center; align-items:center; color:#fff;} .event_edit{border-radius:5px; transition:all .6s; width:33px; height:33px; background:cyan; position:absolute; top:50%; right:-110px; transform:translateY(-50%); display:flex; justify-content:center; align-items:center; color:#fff;} .home_tile_events{min-height:150px; overflow-y:auto; width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; padding:1rem .5rem;} .home_tile_event{width:100%; background:#b8ffb8; min-height:44px; margin-bottom:1rem; display:flex; justify-content:space-between; align-items:Center; flex-wrap:wrap; padding:.5rem .5rem;} .home_tile_event_time{font-size:14px; font-weight:bold; width:100%; display:flex; justify-content:flex-start; align-items:Center;} .home_tile_event_desc{font-size:14px; width:calc(100% - 55px); display:flex; justify-content:flex-start; align-items:flex-start;} .home_tile_event_pin{font-size:14px; width:55px; display:flex; justify-content:center; align-items:Center;} .home_tile_event_pin a{font-size:16px; color:#000; display:flex; justify-content:center; align-items:Center; width:100%;} .event_full_date{font-weight:bold;} .client_tabs{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-direction:column;} .client_tab{margin-bottom:1rem; height:44px; width:100%; display:flex; justify-content:center; align-items:center; padding:0px 1rem; font-size:16px; color:#000; background:#f5f5f5; margin-right:1rem; cursor:pointer;} .client_tab span{margin-left:1rem; font-size:12px; width:max-content; height:22px; padding:0px .5rem; background:#ccc; display:flex; justify-content:center; align-items:center; border-radius:3px;} .client_tile_open{display:inline-block !important;} .client_tab_selected{background:#000 !important; color:#fff !important;} .client_tab_selected span{color:#000 !important;} .contact_name{font-weight:bold; font-size:16px;} .contact_code{font-size:14px;} .disclaimer{font-style:italic; font-size:12px; color:#999;} .home_contract_cont{width:100%; margin:1rem 0px;} .home_contract_company{cursor:pointer; width:100%; font-weight:bold; padding:0px 1rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;} .home_contract_dates{margin-bottom:.5rem; width:100%; padding:0px 1rem; display:flex; justify-content:center; align-items:flex-start; flex-direction:column; height:0px; overflow:hidden;} .home_contract_dates_inner{width:100%; padding:0px 1rem; display:flex; justify-content:space-between; align-items:center; height:33px;} .home_contract_dates_inner:nth-child(2n+1){background:#e9e9e9;} .home_contract_dates div:first-child{font-size:14px;} .home_contract_dates div:last-child{font-weight:bold; text-align:right; font-size:16px;} .home_contract_open{height:auto !important;} .home_contract_expires{width:100%; background:#000; color:#fff; padding:5.5px 1rem; font-weight:bold; text-align:right; font-size:12px;} .home_admin{width:100%; display:flex; justify-content:space-between; align-items:flex-start; flex-direction:column;} .home_tile{width:calc(100% - 1rem); margin-bottom:1rem; margin-right: 1rem; border:solid thin #e9e9e9; border-radius:.5rem; box-shadow:2px 2px 4px #eee;} .home_tile_title{width:100%; height:33px; display:flex; justify-content:flex-start; padding:0px 1rem; align-items:center; font-weight:bold; font-size:2ch; background:#e9e9e9; } .home_tile_content{width:100%; display:grid; padding:1rem;} .home_tile_content_3col{display:flex; justify-content:center; align-items:center; flex-direction:column;} .home_tile_col1{width:100%; max-width:150px; aspect-ratio:1; padding:.5rem; display:flex; justify-content:center; align-items:center;} .home_tile_col2{width:100%; max-width:150px; aspect-ratio:1; padding:.5rem; display:flex; justify-content:center; align-items:center;} .home_tile_col3{width:100%; max-width:150px; aspect-ratio:1; padding:.5rem; display:flex; justify-content:center; align-items:center;} .home_tile_counter{cursor:pointer; width:100%; aspect-ratio:1; border-radius:500px; display:flex; justify-content:center; align-items:center; flex-direction:column;} .home_tile_counter span{font-weight:Bold; font-size:18px;} .home_tile_counter_green{border:solid 5px green;} .home_tile_counter_orange{border:solid 5px orange;} .home_tile_counter_red{border:solid 5px red;} .home_quick_list_cont{width:100%; padding:0px 1rem; display:none; justify-content:center; align-items:center; flex-direction:column;} .home_quick_list{display:grid; grid-template-columns: 50% 50%; width:100%;} .home_quick_list div:first-child{font-weight:bold; font-size:14px;} .home_quick_list div:last-child{text-align:right;} .home_quick_list_open{display:flex !important;} .company_information{width:100%; margin:0px .5rem 2rem; display:flex; justify-content:center; align-items:flex-start; flex-direction:column;} .company_information h2{font-size:1.2rem !important; font-weight:bold !important; margin-bottom:0px;} .hp_task_line_header{width:100%; background:#000; display:grid; grid-template-columns:44px 1fr 150px 110px; margin-bottom:1rem;} .hp_task_line_header div{color:#fff; height:44px; display:flex; justify-content:center; align-items:Center;} .hp_task_line{width:100%; display:grid; grid-template-columns:44px 1fr 150px 110px; margin-bottom:1rem; border-bottom:solid thin #333;} .hp_task_line div{height:44px; display:flex; justify-content:center; align-items:Center;} .hp_invoice_line_header{width:max-content; background:#000; display:grid; grid-template-columns:44px 300px 150px 110px; margin-bottom:1rem;} .hp_invoice_line_header div{color:#fff; height:44px; display:flex; justify-content:center; align-items:Center;} .hp_invoice_line{width:max-content; display:grid; grid-template-columns:44px 300px 150px 110px; margin-bottom:1rem; border-bottom:solid thin #333;} .hp_invoice_line div{height:44px; display:flex; justify-content:center; align-items:Center;} .client_tiles_cont{display:flex; width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .client_tile{display:none; overflow-y:auto; padding:1rem; box-shadow:var(--box-shadow); border-radius:.5rem; background:#f5f5f5; margin:2rem .5rem 0px; width:100%; overflow-y:auto;} .client_tile h2{font-size:1.5rem !important; font-weight:bold;} .client_tiles_cont_inner{width:100%; padding:1rem; display:flex; justify-content:center; align-items:center; flex-direction:column;} .tile_item{width:250px; padding:1rem; margin-right:1rem;} .expiration_circle{border-radius:1000px; width:100%; aspect-ratio:1; display:flex; justify-content:center; align-items:center; flex-direction:column;} .expiration_circle span{font-size:2rem; font-weight:bold;} .expiration_cirlce_orange{border:solid 11px orange;} .expiration_cirlce_red{border:solid 11px red;} .expiration_cirlce_green{border:solid 11px green;} .tile_item_name{font-weight:bold; font-size:14px; width:100%; text-align:center; margin-bottom:1rem;} input[type="submit"]{width:auto; padding:0px 22px; box-shadow:var(--box-shadow); border:solid thin var(--grey); background:var(--grey); color:#000 !important; border-radius:5px; height:44px; outline:none; cursor:pointer; font-size:1rem; font-weight:200; -webkit-appearance:none;} .page_logo{width:100%; height:66px; margin-bottom:2rem;} .page_logo img{width:auto; height:auto; max-width:100%; max-height:100%;} .order_aa_header{display:flex; background:#000; height:44px; color:#fff; justify-content:center; align-items:center; width:100%; border-bottom:solid thin #fff;} .order_type_header{display:flex; background:#000; height:44px; color:#fff; justify-content:center; align-items:center; width:50%; border-bottom:solid thin #fff;} .order_client_header{display:flex; background:#000; height:44px; color:#fff; justify-content:center; align-items:center; width:100%;} .order_date_header{display:flex; background:#000; height:44px; color:#fff; justify-content:center; align-items:center; width:50%; border-bottom:solid thin #fff;} .order_code_header{display:flex; background:#000; height:44px; color:#fff; justify-content:center; align-items:center; width:50%; border-bottom:solid thin #fff;} .order_tools_header{display:flex; background:#000; height:44px; color:#fff; justify-content:center; align-items:center; width:50%; border-bottom:solid thin #fff;} .order_line_header{width:100%; display:none; grid-template-columns:44px 250px 1fr 150px 150px 150px 200px; background:#000; border:solid thin #e9e9e9; margin-bottom:.5rem; height:44px;} .order_line_header div{color:#fff; justify-content:center; align-items:center;} .order_line{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; border:solid thin #e9e9e9; margin-bottom:2rem;} .order_aa{width:100%; height:44px; border-bottom:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; font-size:12px;} .order_type{width:50%; height:44px; border-bottom:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; flex-direction:column;} .order_type span{font-size:12px;} .order_client{width:100%; border-bottom:solid thin #e9e9e9; display:flex; justify-content:flex-start; align-items:center; padding:0px 1rem;} .order_date{width:50%; height:44px; border-bottom:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .order_line .order_code{border-bottom:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center; font-size:12px;} .order_code{width:50%; height:44px; border-bottom:solid thin #e9e9e9; display:flex; justify-content:center; align-items:center;} .order_tools{width:50%; height:44px; display:flex; justify-content:flex-end; align-items:center; padding:0px .5rem;} .order_tools ion-icon{font-size:16px; color:#fff;} .order_payment_link{background:orange; width:22px; height:22px; border-radius:5px; display:flex; justify-content:center; align-items:center;} .thankyou{width:100%; height:100vh; display:flex; justify-content:center; align-items:center; flex-direction:column; font-family: proxima-nova, sans-serif;} .thankyou img{width:100%; height:auto; max-width:500px; max-height:100%;} .thankyou div{font-size:1.6rem; text-align:center; margin-top:44px;} .new_contact{width:100%;} .footer{width:100%; background:var(--grey); display:flex; justify-content:center; align-items:center;} .footer_container{width:95vw; padding:11px 0px; display:flex; justify-content:center; align-items:center; flex-direction:column;} .footer .col1{width:100%; display:flex; justify-content:flex-start; align-items:center; margin:0px !important; } .footer .col2{flex-direction:row !important; width:100%; display:flex; justify-content:center; align-items:center; margin:11px 0px 0px !important; font-size:.8rem;} .footer .col2 img{margin-left:11px; width:auto; height:auto; max-width:22px; max-height:22px;} .footer_item{position: relative; display: flex; justify-content: flex-start; align-items: center;} .footer_item:last-child:after{content:none !important;} .footer_item a{color:var(--black); font-size:.8rem;} /* GENERAl */ .empty_logo_letter{border:solid thin var(--dark-grey); width:33px; height:33px; border-radius:44px; display:flex; justify-content:center; align-items:center;} .request_field_div{align-items:center !important; height:44px; flex-direction:row !important; font-weight:bold;} .col1{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:1rem; flex-direction:column;} .col3{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:1rem; flex-direction:column;} .col4{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:1rem; flex-direction:column;} .col2{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:1rem; flex-direction:column;} .request_field label{margin-bottom:8px; font-weight:bold;} .col2 .request_field{display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:100%;} .col3 .request_field{display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:100%;} .col3 .infos{margin-top:22px; display:none; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:100%;} .col4 .request_field{display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:100%;} .col4 .infos{margin-top:22px; display:none; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:100%;} .col1 .request_field{display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; width:calc(100%);} .warning_message{font-size:.7rem; font-weight:200; font-style:italic; color:red;} .search_button{margin-left:1rem; background:var(--grey); color:var(--black); font-size:1.2rem; border-radius:.3rem; width:44px; height:44px; display:flex; justify-content:center; align-items:center;} .add_button_fixed{transition:all .9s; color:#000; width:44px; height:44px; border-radius:100px; position:fixed; bottom:22px; right:22px; cursor:pointer; background:var(--grey); box-shadow:var(--box-shadow); display:flex; justify-content:center; align-items:center; font-size:22px;} .add_button_fixed:hover{background:var(--dark-grey); color:#fff;} .add_container{width:100%; background:var(--grey); overflow:hidden; height:0px; width:100%;} .add_container_open{height:auto; padding:1rem 1rem 0px 1rem;} .entity_list{overflow-y:scroll; width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-right:1rem; margin-bottom:1rem; flex-wrap:wrap;} .collection_element{width:100%; padding:1rem; min-height:200px; background:var(--grey); box-shadow:var(--box-shadow); border-radius:.3rem; margin-right:0rem; margin-bottom:1rem; display:flex; justify-content:center; align-items:center; flex-direction:column;} .collection_image_logo{width:88px; height:88px; border-radius:100px; border:solid 1px var(--dark-grey); margin-bottom:1rem; overflow:hidden; display:flex; justify-content:center; align-items:center;} .collection_image_logo img{width:auto; height:auto; max-width:65%; max-height:65%;} .collection_title{font-size:1.4rem; width:80%; text-align:center; line-height:1.8rem; height:3.6rem; overflow:hidden;} .collection_subtitle{font-size:1.1rem; margin-bottom:1rem; font-weight:300;} .collection_icons{margin-top:1rem;} .collection_element .single_toolbox{justify-content:space-evenly;} .collection_element_col_center{display:flex; justify-content:center; align-items:center;} .collection_element_col_start{display:flex; justify-content:flex-start; align-items:center;} .collection_element_col_date{font-size:.8rem; font-weight:400;} .collection_element_col_tools{width:88px; display:flex; justify-content:space-between; align-items:center; margin-top:1rem;} .collection_element_col_tools ion-icon{font-size:1.2rem;} .col_title{padding:.5rem 1rem; background:var(--dark-grey); color:var(--white); margin-bottom:1rem;} .invoices_cont_inner{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-right:1rem; margin-bottom:1rem; flex-wrap:wrap;} .invoice_item{width:calc((100% / 4) - 1rem); padding:1rem; min-height:200px; background:var(--grey); box-shadow:var(--box-shadow); border-radius:.3rem; margin-right:1rem; margin-bottom:1rem; display:flex; justify-content:center; align-items:center; flex-direction:column;} .invoice_client_name{font-size:1.4rem; width:80%; text-align:center; line-height:1.8rem; height:3.6rem; overflow:hidden;} .invoice_number{font-size:1.4rem; width:80%; text-align:center; line-height:1.8rem; font-weight:bold;} .invoice_date{font-size:.8rem; margin-bottom:1rem; font-weight:400;} .invoice_price{font-size:1.4rem; text-decoration:underline;} .invoice_tools{width:176px; display:flex; justify-content:space-evenly; align-items:center; margin-top:1rem; flex-wrap:Wrap;} .invoice_tools ion-icon{font-size:1.2rem;} .view_record{display:flex; justify-content:center; align-items:center; width:33px; height:33px; border-radius:.3rem; background:var(--cyan); color:var(--white);} .view_pdf{display:flex; justify-content:center; align-items:center; width:33px; height:33px; border-radius:.3rem; background:orange; color:var(--white);} .trash_record{display:flex; justify-content:center; align-items:center; width:33px; height:33px; border-radius:.3rem; background:var(--red); color:var(--white);} .single_toolbox{margin-bottom:1rem; width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .single_toolbox .toolbox_item{width:66px; height:66px; box-shadow:var(--box-shadow);} .toolbox_item{transition:all .9s; cursor:pointer; margin-right:1rem; margin-bottom:1rem; display:flex; justify-content:center; align-items:center; flex-direction:column; background:var(--grey); position:relative;} .toolbox_item:hover{background:var(--dark-grey);} .toolbox_item:hover .toolbox_item_title{color:var(--white);} .toolbox_item img{width:auto; height:auto; max-width:33px; max-height:33px;} .toolbox_item .toolbox_item_title{font-size:.7rem; margin-top:.5rem; font-weight:200; color:var(--black);} .toolbox_counter{position:absolute; width:33px; height:22px; border-radius:44px; background:var(--black); top:-11px; right:-11px; display:flex; justify-content:center; align-items:center; color:var(--white); z-index:999; font-size:.7rem;} .single_cont{width:100%;} .col3 div{display:none; width:100%;} .col3 div .request_field{width:100% !important; margin:0px !important;} .col2 div{display:none; width:100%; } .col2 div .request_field{width:100% !important; margin:0px !important;} .subproject{display:none;} .subproject_open{display:flex !important;} .project_tag_options_cont{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .project_tag_option{background:var(--grey); box-shadow:var(--box-shadow); padding:0px 11px; height:33px; display:flex; justify-content:center; align-items:center; border-radius:100px; margin-right:1rem; margin-bottom:1rem; cursor:pointer;} .project_tag_option_selected .project_tag_option_light{background:var(--cyan);} .project_tag_option_light{width:8px; height:8px; background:var(--grey); border-radius:100px; margin-right:.5rem; box-shadow:inset var(--box-shadow); } .questionaire_toolbox{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .questionaire_toolbox_item{background:var(--grey); box-shadow:var(--box-shadow); padding:0px 11px; height:33px; width:auto; display:flex; justify-content:center; align-items:center; border-radius:100px; margin-right:1rem; margin-bottom:1rem; cursor:pointer;} .q_item{display:flex; justify-content:center; align-items:center; flex-direction:column; margin-bottom:1rem;} .q_item textarea{height:44px;} .q_item_delete{color:var(--red); font-size:.7rem; cursor:pointer;} .q_item_move{cursor: move; margin-bottom: -5px; display:flex; justify-content:flex-start; align-items:center;} .q_item_move ion-icon{margin-right:1rem;} .q_item_move .q_item_title{font-size:1rem; font-weight:bold;} .q_item_toolbox{width:100%; display:flex; justify-content:space-between; align-items:center; background:var(--grey); padding:0px 1rem; height:33px;} .q_item_element{border:solid thin var(--grey); border-top:none; padding:1rem; width:100%;} .q_item_multiple{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; margin-top:1rem;} .q_item_multiple input{width:calc(50% - 1rem); min-width:0; margin-bottom:1rem;} .answer_form{width:100%; display:flex; justify-content:center; align-items:flex-start;} .answer_form_cont{width:50vw; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; background:var(--white); box-shadow:var(--box-shadow); margin:1rem 0px; border-radius:1rem; padding:2rem;} .anwser_form_logo{width:100%; display:flex; justify-content:center; align-items:center;} .anwser_form_logo img{width:auto; height:auto; max-width:400px; max-height:400px;} .answer_form_title_item{font-size:2rem; font-weight:bold; width:100%;} .answer_form_subtitle_item{font-size:1rem; line-height:1.4rem; width:100%; font-style:italic; color:#a9a9a9; margin-bottom:1rem;} .answer_form_text_item{width:100%; margin-bottom:1rem; } .answer_form_entity_title{margin-bottom:1rem; border-bottom:solid thin var(--dark-grey); padding-bottom:.5rem;} .answer_form_text_item textarea{min-height:200px;} .answer_form_multiple_items{width:100%; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap;} .answer_form_multiple_item{width:calc(50% - 1rem); height:44px;} .profile_cont{width:100%; display:flex; justify-content:space-between; align-items:flex-start;} .profile_cont .col{width:100%;} .profile_cont_2{width:100%; display:flex; justify-content:space-between; align-items:flex-start; flex-direction:column;} .profile_cont_2 .col{width:100%;} .profile_cont_3{width:100%; display:flex; justify-content:space-between; align-items:flex-start;} .profile_cont_3 .col{width:100%;} .photo_preview{width:100%; min-height:150px;} .photo_preview img{width:auto; height:auto; max-width:100%; max-height:150px;} .create_post_option_info{display:flex; justify-content:center; align-items:center; flex-direction:column; padding:1rem;} .create_post_option_info .select_files{display:flex; justify-content:center; align-items:center; flex-direction:column;} .create_post_option_info .select_files ion-icon{font-size:2rem; color:var(--dark-grey);} .create_post_option_info .select_files div{font-size:.8rem;} .progress{border-radius:1rem; background:var(--grey); margin-top:.5rem; display:none; justify-content:center; align-items:center; font-size:.8rem; padding:.3rem;} .progress_show{display:flex !important;} .progress-bar{background:var(--cyan); border-radius:1rem; display:flex; justify-content:center; align-items:center; color:var(--white);} .thumbnail{width:88px !important; height:88px; display:flex; justify-content:center; align-items:center; background-position:center !important; background-size:cover !important;} .upload_file{display:none;} /* END OF GENERAL */ /* CLIENTS */ /* END OF CLIENTS */ /* REGISTER */ .register_birthday{width:100%; display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;} .register_birthday select{width:calc((100% / 3) - 1rem);} /* END OF REGISTER */ .login_form{width:95vw; display:flex; justify-content:center; align-items:center; flex-direction:column; padding:22px; } .login_form_inner{margin-bottom:2rem; border-radius:10px; box-shadow:var(--box-shadow); background:var(--grey); display:flex; justify-content:center; align-items:center; flex-direction:column; padding:1rem 2rem; width:100%;} .login_form_inner h2{font-weight:bold; font-size:1.4rem !important;} .login_form_inner form{width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column;} .logo_outside{width:100%; margin:4rem 0px;} .logo_outside img{width:auto; height:auto; max-width:100%; max-height:100%;} .top_bar{width:calc(100% - 44px); display:flex; justify-content:space-between; align-items:center; padding:0px 22px; height:33px; position:fixed; top:0px; left:44px; background:var(--grey); z-index:99;} .back_to_start{font-size:12px;} .top_bar .full_name{font-size:12px; color:#000; display:flex; justify-content:flex-end; align-items:center;} .top_bar .full_name strong{margin-left:4px;} .top_bar .full_name ion-icon{margin-right:4px;} fieldset{border:solid thin #c5c5c5; width:100%; min-height:400px; padding-left:22px;} fieldset .container{padding:22px 0px; min-height:400px !important;} legend{padding:0px 11px;} fieldset label{font-size:14px; margin-bottom:11px !important; display:inline-block; font-weight:bold;} .open_info{display:flex !important;} .wrapper{width:100%; min-height:calc(100vh - 93px); display:flex; justify-content:center; align-items:flex-start; position:relative;} .container{width:100%; padding:22px 22px 22px 66px; min-height:calc(100vh - 22px); margin-top:22px;} .wrapper_no_login{width:100%; min-height:calc(100vh - 44px - 44px); display:flex; justify-content:flex-start; align-items:flex-start; position:relative;} .container_no_login{width:100%; padding:22px 22px 22px 22px; min-height:calc(100vh - 44px); margin-top:0px; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .page_text{padding:0px 0px;} .page_text p{margin-bottom:1rem; font-size:1rem; line-height:1.6rem; font-weight:300;} .page_text h3{margin-bottom:1rem; font-size:1.2rem; font-weight:600;} .logo{font-family: 'Syncopate', sans-serif; font-size:22px; margin-bottom:44px; width:44px; display:flex; justify-content:center; align-items:center;} .logo img{width:auto; height:auto; max-width:33px; max-height:33px;} .menu{background:var(--grey); width:44px; height:100vh; box-shadow:var(--box-shadow); display:flex; justify-content:flex-start; align-items:center; padding:11px; flex-direction:column; position:fixed; top:0px; left:0px; z-index:99999;} .menu_tag{display:none;} .menu_item{width:44px; height:44px;} .menu_item a{width:44px; height:44px; position:relative; display:flex; justify-content:center; align-items:center; color:var(--black);} .menu_item img{width:auto; height:auto; max-width:22px; max-height:22px;} .menu_item ion-icon{font-size:22px;} .menu_item .menu_item_title{position:absolute; height:44px; background:var(--grey); padding-left:22px; left:44px; top:0px; width:200px; display:none; justify-content:flex-start; align-items:center;} .menu_item:hover .menu_item_title{display:flex !important; } .ribbon{margin-bottom:1.4rem; width:100%; box-shadow:var(--box-shadow); height:44px; font-weight:300; display:flex; justify-content:space-between; align-items:center; background:var(--grey); padding:0px 11px; font-size:1rem;} .ribbon_big{margin-bottom:1.4rem; width:100%; box-shadow:var(--box-shadow); height:55px; font-weight:300; display:flex; justify-content:space-between; align-items:center; background:var(--grey); padding:0px 11px; font-size:1.4rem;} .request_item{width:100%; height:44px; margin-top:22px; display:flex; justify-content:space-between; align-items:center; background:var(--grey); padding:0px 22px;} .request_item_id{flex:1;} .request_item_name{flex:6; text-align:center;} .request_item_date{flex:5; text-align:center;} .request_item_from{flex:4; text-align:center;} .request_item_edit_date{flex:5; text-align:center;} .request_item_edit_from{flex:5; text-align:center;} .request_item_tools{display:flex; justify-content:space-between; align-items:center; width:140px;} .request_item_status{width:15px; height:15px; border-radius:22px; background:#999;} .request_item_tools img{width:22px;} .request_item_client{width:250px;} .send_offer{position:relative;} .send_offer img{cursor:pointer;} .send_panel{width:600px; background:#f4f4f4; display:none; justify-content:flex-start; align-items:flex-start; flex-direction:column; position:absolute; top:34px; right:0px; padding:22px; z-index:999999;} .new_sending{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .open_send_panel{display:flex !important;} .send_offer_email_input{width:100%; margin-bottom:11px; margin-top:11px;} .send_offer_email{background:#3b3b3b; color:#fff; padding:8px; border-radius:5px; cursor:pointer;} .sending_history{width:100%;} .sending_history h3{margin-bottom:11px; font-size:22px; font-weight:bold;} .send_offer_email_text{width:100%;} .history_item{width:100%; display:flex; justify-content:flex-start; align-items:center; border-bottom:solid thin black; padding-bottom:11px; margin-bottom:11px;} .history_item_date{font-weight:bold; font-size:12px; margin-right:22px;} .history_item_emails{font-size:12px;} .selector_images{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; margin-bottom:22px;} .selection_image{width:55px; height:55px; display:flex; justify-content:center; align-items:center; margin-right:11px; margin-bottom:11px;} .selector_images img{width:auto; height:auto; max-width:55px; max-height:55px;} .selector{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;} .selector_multi{width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; margin-bottom:22px;} .selector_multi_line{width:100%; display:flex; justify-content:center; align-items:flex-start; flex-direction:column; margin-bottom:22px;} .selector_multi .select_option{width:calc(100% / 3); font-size:14px;} .selector_multi_line .select_option{width:100%; font-size:14px; margin-bottom:11px;} .selector_multi_line input[type="text"]{width:90% !important;} .selector_option{background:var(--grey); box-shadow:var(--box-shadow); display:flex; justify-content:center; align-items:center; padding:0px 11px; height:33px; border-radius:10px; margin-right:22px; cursor:pointer; transition:all .6s; margin-bottom:11px;} .selector_option ion-icon{display:none;} .selector_option:hover{background:#dbebff;} .selector_option input{display:none;} .matched{background:#dbebff !important;} .matched ion-icon{display:inline-block !important;} .login_title{width:100%; text-align:center; display:flex; justify-content:center; align-items:center; flex-direction:column; font-size:16px; margin-bottom:44px;} .login_col1{width:550px; height:100vh; overflow:hidden;} .login_col1 img{width:auto; height:auto; max-width:100%; max-height:100%;} .login_col2{width:calc(100% - 550px); height:100vh; background:#fff; display:flex; justify-content:center; align-items:center; flex-direction:column;} .adr_title{font-family: 'Syncopate', sans-serif; font-size:4em;} .debugger{background:#dbebff; padding:22px; width:100%;} .add_additional_cost{cursor:pointer; background:green; width:44px; height:44px; border-radius:44px; display:flex; justify-content:center; align-items:center; color:#fff; font-size:28px; margin-top:22px; margin-right:11px;} .remove_additional_cost{cursor:pointer; background:red; width:44px; height:44px; border-radius:44px; display:none; justify-content:center; align-items:center; color:#fff; font-size:28px; margin-top:22px; margin-right:11px;} .col3:last-child .remove_additional_cost{display:flex !important; } .buttons_field{flex-direction:row !important;} /* SCHEDULE */ .section_3{display:none;} .open_section_options{display:flex !important;} .tabs{display:flex; justify-content:flex-start; align-items:center;} .tab{width:150px; cursor:pointer; display:flex; justify-content:center; align-items:center; background:var(--grey); height:44px; margin-right:11px; font-size:14px; transition:all .6s;} .tab:hover{background:black; color:white;} .selected_tab{background:black; color:white;} .full_container{padding:11px 44px !important;} .list{width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column;} .add_new_client{cursor:pointer;} .list_item{width:100%; display:flex; justify-content:flex-start; align-items:center;} .list_item:nth-child(2n+1){background:#f1f1f1;} .list_item:hover{background:#ccc;} .list_item_days:hover{background:transparent !important;} .list_item_client{position:relative; cursor:pointer; border-bottom:solid thin black; border-left:solid thin black; border-right:solid 2px black; width:200px; /*height:calc((100vw - 200px - 88px) / 31);*/ height:53px; display:flex; justify-content:center; align-items:center; font-size:14px;} .list_item_inactive{opacity:0.5;} .list_item_day{border-bottom:solid thin black; border-right:solid thin black; font-size:12px; width:calc((100vw - 200px - 88px) / 31); /*height:calc((100vw - 200px - 88px) / 31);*/ height:53px; display:flex; justify-content:center; align-items:center; position:relative; cursor:pointer;} .list_item_days{border-bottom:solid 2px black;} .list_item .list_item_day:hover{background:#efc0ff;} .list_item_days .list_item_day:hover{background:transparent !important;} .history_cont{height:66px; width:100%; display:flex; justify-content:center; align-items:flex-start; flex-direction:column; overflow-y:scroll;} .history_line{height:22px; width:100%; font-size:12px;} .history_title{font-size:18px; font-weight:bold; margin-bottom:11px;} .step_1{background:#ffc800 !important;} .step_2{background:#00dcff !important;} .step_3{background:#aee1c0 !important;} .step_4{background:black !important; color:#fff;} .step_5{background:red !important;} .hide_colors{background:transparent !important;} .monthly_progress{height:33px; width:100%; background:#aee1c0; color:#000; display:flex; justify-content:flex-start; align-items:center; padding:0px 22px; font-size:14px; font-weight:bold;} .monthly_progress div{margin-right:11px;} .monthly_progress div span{font-weight:400 !important;} .monthly_admin_info{display:flex; justify-content:flex-end; align-items:center;} .monthly_summarize{display:flex; justify-content:flex-start; align-items:center;} .monthly_summarize div{margin-right:11px;} .monthly_budget{height:33px; width:100%; background:#999; color:#000; display:flex; justify-content:space-between; align-items:center; padding:0px 22px; font-size:14px; font-weight:bold;} .monthly_active_clients{margin-right:11px;} .monthly_inactive_clients{margin-right:11px;} .monthly_budget span{font-weight:400 !important;} .date_selector{width:100%; display:flex; justify-content:center; align-items:center; height:44px; background:#000; color:#fff;} .date_selector .nav{width:110px; height:44px; font-size:12px; cursor:pointer;} .date_selector .nav span{font-size:14px; font-size:bold;} .date_selector .prev{display:flex; justify-content:flex-start; align-items:center; text-align:center; padding-left:8px;} .date_selector .next{display:flex; justify-content:flex-end; align-items:center; text-align:center; padding-right:8px;} .date_selector .current_month{width:calc(100% - 220px); height:44px; font-size:18px; font-weight:bold; display:flex; justify-content:center; align-items:center;} .today_flag{background:#dbebff;} .weekdays{background:#c4c4c4;} .color_id{width:100%; justify-content:space-between; align-items:center; background:var(--grey); margin-bottom:11px; height:33px; padding:0px 22px; margin-top:44px;} .color_item{display:flex; justify-content:flex-start; align-items:center;} .color_box{width:11px; height:11px; margin-right:11px;} .color_info{font-size:12px;} .panel_social_caption{min-height:110px !important; font-size:12px;} .panel_social_desc{min-height:110px !important; font-size:12px;} .checkboxes{font-size:12px; display:flex; justify-content:flex-start; align-items:center;} .has_comment{width:16px; height:16px; border-radius:5px; position:absolute; top:3px; right:3px; display:flex; justify-content:center; align-items:center;} .has_comment img{width:auto; height:auto; max-width:100%; max-height:100%;} .panel{position:fixed; width:90vw; height:90vh; top:5vh; left:5vw; overflow-y:scroll; display:none; justify-content:center; align-items:flex-start; background:#f1f1f1; box-shadow:0px 0px 5px #000; transition:all .6s; padding:22px; z-index:99999999;} .panel .container{min-height:80vh !important; padding:0px !important; position:relative;} .panel_show{display:flex !important;} .panel_client{font-size:22px;} .panel_client span{color:blue; font-weight:bold;} .panel_date{font-size:14px;} .panel_line{display:flex; justify-content:center; align-items:center; height:33px;} .panel_line .panel_line_middle{width:100%; height:1px; background:#ccc;} .panel_close{position:absolute; top:-22px; right:22px; font-size:42px;} .checkboxes_cont{display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; margin-bottom:22px;} .checkboxes{margin-right:22px;} .schedule_desc{margin-bottom:22px;} .buttons_area{width:100%; margin-top:22px; display:flex; justify-content:space-between; align-items:center;} .submit_button{height:44px; width:140px; border-radius:5px; background:#000; color:#fff; display:flex; justify-content:center; align-items:center; cursor:pointer;} .delete_button{height:44px; width:140px; border-radius:5px; background:red; color:#000; display:flex; justify-content:center; align-items:center; cursor:pointer;} .user_calendar{position:fixed; width:90vw; height:90vh; top:5vh; left:5vw; overflow-y:scroll; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; background:#f1f1f1; box-shadow:0px 0px 5px #000; transition:all .6s; padding:22px; z-index:99999999;} .user_calendar_client_title{font-size:22px; width:100%; text-align:left; margin-bottom:44px;} .user_calendar_client_title a{color:#000; font-size:16px;} .user_calendar_client_title i{font-size:16px;} .user_calendar_client_months{width:90%; display:flex; justify-content:center; align-items:center; margin-left:5%;} .user_calendar_line{width:calc(100% / 12); display:flex; justify-content:center; align-items:center; flex-direction:column;} .user_calendar_close{width:100%; text-align:right; font-size:42px; cursor:pointer;} .notification{position:fixed; top:44px; right:44px; background:#bfffca; padding:11px; display:flex; justify-content:flex-start; align-items:center; min-height:44px; border-radius:5px; font-size:12px;} .user_calendar_month_price input{width:80px; height:22px; font-size:14px;} .price_per_unit{font-size:8px; position:absolute; bottom:2px; right:2px;} .xorigoumeni_per_unit{font-size:8px; position:absolute; bottom:2px; right:2px;} .xorigoumeni_per_unit_all{font-size:8px; position:absolute; bottom:14px; right:2px;} .day_number{font-size:10px; position:absolute; top:2px; left:2px;} .user_calendar_month_action{font-size:12px; display:flex; justify-content:flex-start; align-items:center;} .user_calendar_month_action input{margin-right:5px;} .add_user_cont{position:fixed; width:90vw; height:90vh; top:5vh; left:5vw; overflow-y:scroll; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; background:#f1f1f1; box-shadow:0px 0px 5px #000; transition:all .6s; padding:22px; z-index:99999999;} .existing_client{font-size:14px;} .add_user_close{width:100%; text-align:right; font-size:42px; cursor:pointer;} .existing_sections_cont{width:100%; display:flex; justify-content:flex-start; align-items:center; margin:22px 0px;} .sections_cont{width:100%; display:flex; justify-content:flex-start; align-items:center; margin:22px 0px;} .section_selection{display:flex; justify-content:flex-start; align-items:center; font-size:12px; margin-right:11px;} .section_selection input{margin-right:5px;} .project_dates{display:flex; justify-content:flex-start; align-items:center; margin-bottom:11px;} .project_dates div{margin-right:11px; display:flex; justify-content:flex-start; align-items:center;} .project_dates div input{font-size:14px;} .customer_info{position:absolute; width:22px; height:22px; display:flex; justify-content:center; align-items:center; bottom:4px; left:4px; z-index:99999;} .customer_info img{width:auto; height:auto; max-width:100%; max-height:100%;} .add_task{position:absolute; width:22px; height:22px; display:flex; justify-content:center; align-items:center; bottom:4px; right:4px; z-index:99999;} .add_task img{width:auto; height:auto; max-width:100%; max-height:100%;} .user_for_task{font-size:14px; margin-bottom:11px;} /* END OF SCHEDULE */ .plan_list{width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap:wrap; max-width:1920px;} .plan_item{width:calc((100% / 4) - 22px); display:flex; justify-content:center; align-items:flex-start; flex-direction:column; box-shadow:0px 0px 2px rgba(0, 0, 0, 0.2); border-radius:max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px; margin-bottom:22px; margin-right:22px; overflow:hidden;} .plan_header{padding:12px 16px; width:100%;} .plan_client_item{width:100%; display:flex; justify-content:flex-start; align-items:center;} .plan_client_item .plan_client_logo{width:40px; height:40px; border-radius:40px; overflow:hidden;} .plan_client_item .plan_client_logo img{width:auto; height:auto; max-width:100%; max-height:100%; display:inline-block;} .plan_client_info{margin-left:6px; display:flex; justify-content:center; align-items:flex-start; width:calc(100% - 50px); flex-direction:column;} .plan_client_info .plan_item_name{font-size:16px; font-weight:500; color:#000;} .plan_client_info .plan_item_date{color:#65676b; font-size:12px;} .plan_item_caption{margin:8px 0px; font-size:14px; min-height:88px; line-height:18px;} .plan_image{width:100%; border-top:solid thin #e7e7e7; border-bottom:solid thin #e7e7e7;} .plan_image img{object-fit:cover; width:100%; height:100%;} .plan_placeholder{width:100%; height:22.7vw; background:#c9c9c9; position:relative;} .plan_placeholder:before{content:"No image available"; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-weight:bold; font-size:2em; text-align:center; color: #a5a5a5; text-shadow: 1px 1px 2px #686868;} .plan_footer{width:100%; padding:12px 16px;} .plan_footer_fake_options{border-top:solid thin #d1d1d1; border-bottom:solid thin #d1d1d1; padding:8px 0px; display:flex; justify-content:space-between; align-items:center;} .plan_footer_fake_option{width:calc(100% / 3); display:flex; justify-content:center; align-items:center; font-size:14px; font-weight:bold; color:#65676b;} .plan_footer_fake_option img{width:auto; height:auto; max-width:16px; max-height:16px; margin-right:8px;} .post_images_cont{width:100%; border:dashed 2px #999; padding:22px 22px;} .input_files{margin-bottom:11px;} .upload_button{height:33px; width:88px; border-radius:5px; background:#000; color:#fff; display:flex; justify-content:center; align-items:center; cursor:pointer; font-size:12px;} .preview{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:11px;} .image_preview{width:88px; height:88px; display:flex; justify-content:center; align-items:center; margin-right:11px; border:solid thin #999; position:relative;} .image_preview img{width:auto; height:auto; max-width:80px; max-height:80px;} .remove_file{position:absolute; top:-11px; right:-11px; width:22px; height:22px; border-radius:22px; background:#000; color:#fff; font-size:22px; display:flex; justify-content:center; align-items:center; cursor:pointer;} .video_planning{width:100%;} .client_plan{position:absolute; width:22px; height:22px; border:solid thin red; left:-22px; top:0px;} .plan_client_logo{display:flex; justify-content:center; align-items:center; border:solid thin #e5e5e5;} .half_black{background:#000; color:#fff; width:50%; height:44px; display:flex; justify-content:center; align-items:center; font-size:12px;} .half_white{background:#fff; color:#000; width:50%; height:44px; display:flex; justify-content:center; align-items:center; font-size:12px;} /* TICKETS */ .add_ticket_cont{width:100%; margin-top:44px;} .tickets_collection{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .ticket_item{width:100%; padding:0px 11px; display:flex; justify-content:flex-start; align-items:center; height:44px; background:#c9c9c9;} .ticket_item .ticket_item_status{width:33px; height:44px; display:flex; justify-content:center; align-items:center; } .ticket_item .ticket_item_status .ticket_item_status_red{width:11px; height:11px; border-radius:22px; background:red;} .ticket_item .ticket_item_status .ticket_item_status_green{width:11px; height:11px; border-radius:22px; background:green;} .ticket_item .ticket_item_status .ticket_item_status_orange{width:11px; height:11px; border-radius:22px; background:orange;} .ticket_item .ticket_item_title{width:100%; height:44px; display:flex; justify-content:flex-start; align-items:center; padding-left:11px; font-size:14px;} .ticket_item .ticket_item_date{width:230px; height:44px; display:flex; justify-content:flex-end; align-items:center; font-size:12px; padding-right:11px;} .ticket_item .ticket_item_client{width:300px; height:44px; display:flex; justify-content:flex-start; align-items:center; font-size:12px; font-weight:bold; } .ticket_item .ticket_item_tools{width:200px; height:44px; display:flex; justify-content:space-between; align-items:center;} .ticket_item_tools img{width:auto; height:auto; max-width:22px; max-height:22px;} .ticket_info_cont{background:var(--grey); padding:22px; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .ticket_info_title{font-size:20px; padding-bottom:22px; border-bottom:solid thin #333; width:100%;} .ticket_info_desc{padding:22px; border-bottom:solid thin #333; margin-bottom:22px; width:100%;} .ticket_info_desc p{font-size:14px; line-height:22px;} .ticket_info_desc ul{font-size:14px; line-height:22px; margin-left:22px;} .ticket_info_desc ol{font-size:14px; line-height:22px; margin-left:22px;} .ticket_info_desc a{font-size:14px; line-height:22px; text-decoration:underline !important;} .ticket_info_date{width:100%; border-top:solid thin #333; display:flex; justify-content:flex-end; align-items:center; font-size:12px; color:#999; padding:11px;} .ticket_info_images{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap;} .ticket_info_image{width:55px; height:55px; display:flex; justify-content:center; align-items:center; margin-right:11px; border:solid thin #333; margin-bottom:22px;} .ticket_info_image img{width:auto; height:auto; max-width:44px; max-height:44px;} .conversation_item_title{font-size:16px; font-weight:bold; padding-bottom:22px; border-bottom:solid thin #333; width:100%;} .conversation_item_title span{font-size:12px; font-weight:400;} .conversation_item_desc{padding:22px; margin-bottom:22px; width:100%; font-size:14px; line-height:22px;} .conversation_item_desc p{font-size:14px; line-height:22px; margin-bottom:22px;} .conversation_item_desc ul{font-size:14px; line-height:22px; margin-left:22px;} .conversation_item_desc li{font-size:14px; line-height:22px;} .conversation_item_desc ol{font-size:14px; line-height:22px; margin-left:22px;} .conversation_item_desc a{font-size:14px; line-height:22px; text-decoration:underline !important;} .conversation_item_date{width:100%; border-top:solid thin #333; display:flex; justify-content:flex-end; align-items:center; font-size:12px; color:#999; padding:11px;} .conversation_item_images{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap;} .conversation_item_image{width:55px; height:55px; display:flex; justify-content:center; align-items:center; margin-right:11px; border:solid thin #333; margin-bottom:22px;} .conversation_item_image img{width:auto; height:auto; max-width:44px; max-height:44px;} .add_answer_cont{margin-left:0px; background:#c9c9c9; padding:22px; margin-top:33px; position:relative;} .add_answer_cont:before{content:""; width: 0; height: 0; border-style: solid; border-width: 0 22px 22px 22px; border-color: transparent transparent #c9c9c9 transparent; position:absolute; top:-22px; left:44px;} .conversation_item{padding:22px;} .conversation_cont{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;} .admin_answer{background:#d6f9ff; width:calc(100% - 88px); display:flex; justify-content:flex-end; align-items:flex-start; flex-direction:column; margin-left:88px; margin-top:33px; position:relative;} /*.admin_answer:before{content:""; width: 0; height: 0; border-style: solid; border-width: 0 22px 22px 22px; border-color: transparent transparent #d6f9ff transparent; position:absolute; top:-22px; left:44px;}*/ .user_answer{background:var(--grey); width:calc(100% - 88px); display:flex; justify-content:flex-end; align-items:flex-start; flex-direction:column; margin-right:88px; margin-top:33px; position:relative;} /*.user_answer:before{content:""; width: 0; height: 0; border-style: solid; border-width: 0 22px 22px 22px; border-color: transparent transparent var(--grey) transparent; position:absolute; top:-22px; left:44px;}*/ /* END OF TICKETS */ }