style.css 39 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137
  1. @font-face {
  2. font-family: 'urw-demi';
  3. src: url('/vendor/fonts/URW/URWGothic-Demi.ttf') format('truetype');
  4. }
  5. @font-face {
  6. font-family: 'libre-italic';
  7. src: url('/vendor/fonts/LibreBaskerville/LibreBaskerville-Italic.ttf') format('truetype');
  8. }
  9. @font-face {
  10. font-family: 'noto-serif-medium';
  11. font-weight: 900;
  12. src: url('/vendor/fonts/NotoSerif-Medium.woff2') format('woff2');
  13. }
  14. @font-face {
  15. font-family: 'noto-serif-regular';
  16. font-weight: 900;
  17. src: url('/vendor/fonts/NotoSerif-Regular.woff2') format('woff2');
  18. }
  19. :root {
  20. --pry-color: #191919;
  21. --sec-color: #a41001;
  22. /* --sec-color: #aa2828; */
  23. --light-sec-color: #ffe3e3;
  24. }
  25. ::-moz-selection {
  26. background: var(--pry-color);
  27. color: #fff;
  28. }
  29. ::selection {
  30. background: var(--pry-color);
  31. color: #fff;
  32. }
  33. html {
  34. scroll-behavior: smooth;
  35. }
  36. body {
  37. display: flex;
  38. flex-direction: column;
  39. min-height: 100vh;
  40. width: 100%;
  41. font-family: 'noto-serif-medium', serif;
  42. /* font-family: 'Poppins', sans-serif; */
  43. background-color: #fff;
  44. color: #000;
  45. }
  46. p {
  47. font-size: 17px;
  48. }
  49. .bg-sec {
  50. background-color: var(--sec-color);
  51. }
  52. .text-light-sec {
  53. color: var(--light-sec-color);
  54. }
  55. .bg-light-sec {
  56. background-color: var(--light-sec-color);
  57. }
  58. .btn {
  59. font-weight: 500;
  60. }
  61. .btn-shadow {
  62. box-shadow: 0px 15px 15px rgba(11, 28, 91, 0.101961);
  63. }
  64. .btn-pry {
  65. background-color: var(--pry-color);
  66. color: #fff;
  67. padding: 15px 40px;
  68. }
  69. .btn-pry:hover {
  70. transition: .5s;
  71. box-shadow: 0px 15px 15px rgba(11, 28, 91, 0.101961);
  72. color: rgba(255, 255, 255, .8);
  73. }
  74. .btn-sec {
  75. background-color: var(--sec-color);
  76. color: #fff;
  77. padding: 15px 40px;
  78. border-radius: 20px;
  79. }
  80. .btn-sec:hover {
  81. transition: .5s;
  82. box-shadow: 0px 15px 15px rgba(11, 28, 91, 0.101961);
  83. color: rgba(255, 255, 255, .8);
  84. padding: 15px 40px;
  85. }
  86. .btn-grey {
  87. color: var(--pry-color);
  88. background-color: rgba(26, 21, 57, 0.0509804);
  89. padding: 15px 40px;
  90. box-shadow: 0px 5px 5px rgba(11, 28, 91, 0.101961);
  91. }
  92. .btn-grey:hover {
  93. transition: .5s;
  94. box-shadow: 0px 15px 15px rgba(11, 28, 91, 0.101961);
  95. color: var(--pry-color);
  96. background-color: rgba(26, 21, 57, 0.0509804);
  97. padding: 15px 40px;
  98. }
  99. .ui-widget-header {
  100. border: none;
  101. font-weight: normal;
  102. background-color: #ffffff;
  103. }
  104. .ui-datepicker-calendar thead th {
  105. font-weight: normal;
  106. border-bottom: 2px solid #333;
  107. margin-bottom: 5px;
  108. }
  109. .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  110. border: none;
  111. }
  112. .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  113. border: none;
  114. background-color: #f6f6f6;
  115. color: #454545;
  116. }
  117. .ui-state-hover,
  118. .ui-widget-content .ui-state-hover,
  119. .ui-widget-header .ui-state-hover,
  120. .ui-button:hover,
  121. .ui-state-highlight:hover, .ui-widget-content .ui-state-highlight:hover, .ui-widget-header .ui-state-highlight:hover{
  122. background-color: #e4f9e2;
  123. }
  124. .ui-widget.ui-widget-content {
  125. background-color: #ddd;
  126. border:none;
  127. }
  128. .ui-datepicker td span, .ui-datepicker td a {
  129. text-align: center;
  130. display: grid;
  131. place-items: center;
  132. border-radius: 100%;
  133. height: 30px;
  134. width: 30px;
  135. }
  136. .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
  137. background-color: var(--sec-color);
  138. color: #fff;
  139. }
  140. .ui-slider-handle, .ui-widget-content .ui-slider-handle, .ui-widget-header .ui-slider-handle, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  141. height: 20px;
  142. width: 20px;
  143. margin-top: -5px;
  144. border-radius: 100%;
  145. background-color: var(--sec-color);
  146. }
  147. .ui-slider-horizontal .ui-slider-range {
  148. border: .6px solid var(--sec-color);
  149. background-color: var(--sec-color);
  150. }
  151. .ui-slider-horizontal {
  152. height: 4px;
  153. }
  154. .radio-block [type="radio"] {
  155. position: absolute;
  156. height: 0;
  157. width: 0;
  158. }
  159. .radio-block {
  160. display: inline;
  161. width: 100%;
  162. }
  163. .radio-block span{
  164. display: grid;
  165. place-items: center;
  166. padding: 10px 20px;
  167. border: 1.5px solid #ddd;
  168. border-radius: 5px;
  169. background-color: #ffffff;
  170. cursor: pointer;
  171. }
  172. .radio-block:nth-child(2) span{
  173. border-radius: 0;
  174. border-left:0;
  175. border-right:0;
  176. }
  177. .radio-block:nth-child(1) span{
  178. border-top-right-radius: 0;
  179. border-bottom-right-radius: 0;
  180. }
  181. .radio-block:nth-child(3) span{
  182. border-top-left-radius: 0;
  183. border-bottom-left-radius: 0;
  184. }
  185. .radio-block [type="radio"]:checked ~ span{
  186. border: 1.5px solid var(--sec-color);
  187. }
  188. .flex-radios {
  189. display: flex;
  190. }
  191. .pros-list {
  192. padding: 20px;
  193. }
  194. .pros-list:not(:last-child){
  195. border-bottom: 1px solid #ccc;
  196. }
  197. .checker input:checked ~ .checkmark {
  198. background-color: var(--sec-color);
  199. }
  200. .modal-backdrop {
  201. z-index: 1;
  202. }
  203. .filter-btn {
  204. position: fixed;
  205. bottom: 0;
  206. width: 100%;
  207. border-radius: 0;
  208. margin: 0 !important;
  209. left: 0;
  210. z-index: 200;
  211. }
  212. .team {
  213. display: flex;
  214. align-items: flex-start;
  215. flex-wrap: wrap;
  216. gap: 40px;
  217. }
  218. .member {
  219. display: flex;
  220. flex-direction: column;
  221. align-items: center;
  222. text-align: center;
  223. }
  224. .member .mb-img {
  225. height: 150px;
  226. width: 150px;
  227. overflow: hidden;
  228. /* border-radius: 100%; */
  229. border: 1px solid #000;
  230. margin-bottom: 15px;
  231. }
  232. .member .mb-img img{
  233. height: 150px;
  234. width: 100%;
  235. }
  236. .member .qst{
  237. font-size: 19px;
  238. }
  239. .member p{
  240. font-size: 16px;
  241. }
  242. .bg-pry {
  243. background-color: var(--pry-color);
  244. color: #fff;
  245. }
  246. .bg-cream {
  247. background-color: #ffebeb !important;
  248. border-radius: 10px;
  249. padding: 20px;
  250. }
  251. .bg-cream img {
  252. width: 100%;
  253. }
  254. .avatar {
  255. width: 50px;
  256. }
  257. .conversation-ellipsis {
  258. width: 180px;
  259. white-space: nowrap;
  260. overflow: hidden;
  261. text-overflow: ellipsis;
  262. }
  263. small {
  264. font-size: 14px;
  265. }
  266. footer {
  267. margin-top: auto;
  268. background: var(--pry-color);
  269. }
  270. button {
  271. outline:none !important;
  272. }
  273. *:focus {
  274. outline: 0 !important;
  275. }
  276. @media screen and (min-width:1400px) {
  277. .container-lg {
  278. max-width: 1400px;
  279. }
  280. }
  281. .separator::before {
  282. margin-inline: 10px;
  283. border-right: 1px solid #aaa;
  284. content: '';
  285. font-family: sans-serif;
  286. font-size: 40px;
  287. font-weight: 100 !important;
  288. }
  289. .web {
  290. display: block;
  291. }
  292. .mobile {
  293. display: none;
  294. }
  295. .title {
  296. font-size: 45px;
  297. }
  298. strong, b {
  299. font-family: 'Noto Serif', serif !important;
  300. }
  301. .navbar-brand {
  302. display: block;
  303. }
  304. .navbar-brand img {
  305. height: 50px;
  306. /* width: 100%; */
  307. object-fit: contain;
  308. }
  309. nav.navbar {
  310. padding: 0;
  311. background: #fff;
  312. z-index: 200;
  313. width: 100%;
  314. }
  315. nav .container {
  316. /* border-bottom: 1px solid #000; */
  317. }
  318. .nav-item{
  319. margin-right: 20px;
  320. }
  321. .nav-link {
  322. color: #000;
  323. border-bottom:1px solid transparent;
  324. }
  325. .nav-link.active,
  326. .nav-link:hover,
  327. .nav-link:focus {
  328. color: #000;
  329. border-bottom:1px solid var(--sec-color);
  330. transition: .5s;
  331. }
  332. .info {
  333. margin-top: 40px;
  334. }
  335. .top-dash {
  336. padding-top: 50px;
  337. margin-top: -40px;
  338. border-top: 1px dashed var(--sec-color);
  339. }
  340. .blank {
  341. list-style: none;
  342. margin-top: 20px;
  343. padding-left: 10px;
  344. }
  345. .blank li {
  346. display: flex;
  347. align-items: flex-start;
  348. margin-bottom: 20px;
  349. }
  350. .blank .num {
  351. margin-top: -5px;
  352. height: 30px;
  353. width: 30px;
  354. display: grid;
  355. place-items: center;
  356. border-radius: 100%;
  357. background-color: var(--sec-color);
  358. color: #fff;
  359. margin-right: 10px;
  360. }
  361. .input-button {
  362. display: flex;
  363. align-items: center;
  364. background-color: #fff;
  365. padding: 10px;
  366. border-radius: 8px;
  367. }
  368. .input-button input {
  369. border: 0;
  370. }
  371. .input-button .btn {
  372. border-left: 1px solid #aaa;
  373. }
  374. .gc-popup {
  375. /* background-image: url('/img/confetti.gif'); */
  376. background-position: top;
  377. background-size: contain;
  378. background-color: var(--sec-color);
  379. }
  380. .gc-popup .modal-body {
  381. background-color: rgba(255, 255, 255, 0.8);
  382. }
  383. .text-sans {
  384. /* font-family: serif; */
  385. font-size: 20px;
  386. font-weight: bold;
  387. }
  388. .form-control:focus {
  389. outline: 0;
  390. box-shadow: 0;
  391. }
  392. .pro-intro {
  393. max-width: 500px;
  394. background-color: #ffffff;
  395. padding: 30px 30px 60px 30px;
  396. border-radius: 20px;
  397. margin-top: -250px;
  398. border-bottom-left-radius: 0;
  399. border-bottom-right-radius: 0;
  400. }
  401. .pro-top {
  402. background-position:right;
  403. background-size: 70%;
  404. background-repeat: no-repeat;
  405. height: 550px;
  406. }
  407. .overlay-cream {
  408. background-image: url('/app/pyg/img/overlay-cream.png');
  409. background-position: left;
  410. background-size: cover;
  411. background-repeat: no-repeat;
  412. width: 100%;
  413. height: 100%;
  414. }
  415. .btn-outline-sec {
  416. background-color: transparent;
  417. border: 1px solid var(--sec-color);
  418. color: var(--sec-color);
  419. transition: .5s;
  420. padding: 11px 50px;
  421. font-size: 16px;
  422. border-radius: 20px;
  423. }
  424. .btn-outline-sec:hover {
  425. border-radius: 20px;
  426. font-size: 16px;
  427. background: var(--sec-color);
  428. color: #fff;
  429. border: 1px solid var(--sec-color);
  430. transition: .5s;
  431. }
  432. .btn-sec:hover, .btn-google-login:hover, .btn-facebook-login:hover {
  433. color: #fff;
  434. box-shadow: 0px 20px 25px rgb(76 97 110 / 7%), 0px 41.7776px 33.4221px rgb(76 97 110 / 3%), 0px 22.3363px 17.869px rgb(76 97 110 / 1%), 0px 12.5216px 10.0172px rgb(76 97 110 / 1%), 0px 6.6501px 5.32008px rgb(76 97 110 / 0%);
  435. }
  436. .text-pry {
  437. color: var(--pry-color);
  438. }
  439. .text-red {
  440. color: var(--sec-color);
  441. }
  442. .text-sec {
  443. color: var(--sec-color);
  444. }
  445. .bg-pry {
  446. border: 1px solid #000;
  447. }
  448. .bg-light-grey {
  449. background-color: #FBFBFB;
  450. border: 1px solid #D6D6D6;
  451. border-radius: 5px;
  452. width: 100%;
  453. }
  454. .gallery-0 { grid-area: menu}
  455. .gallery-1 { grid-area: topleft}
  456. .gallery-2 { grid-area: topright}
  457. .gallery-3 { grid-area: bottomleft}
  458. .gallery-4 { grid-area: bottomright}
  459. .pswp-gallery {
  460. display: grid;
  461. grid-template-areas:
  462. 'menu menu topleft topright'
  463. 'menu menu bottomleft bottomright';
  464. gap: 8px;
  465. margin-bottom: 20px;
  466. }
  467. .pswp-gallery a:not(.gallery-0) {
  468. height: 100px;
  469. }
  470. .pswp-gallery a {
  471. max-height: 210px;
  472. display: block;
  473. overflow: hidden;
  474. border:1px solid #eee;
  475. border-radius: 8px;
  476. position: relative;
  477. }
  478. .pswp-gallery a:hover {
  479. box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  480. }
  481. .pswp-gallery img {
  482. height: 100%;
  483. width: 100%;
  484. object-fit: cover;
  485. }
  486. .more-gallery {
  487. position: absolute;
  488. background-color: rgba(0,0,0,.5);
  489. z-index: 1;
  490. top: 0;
  491. bottom: 0;
  492. width: 100%;
  493. color: #fff;
  494. display: grid;
  495. place-items: center;
  496. }
  497. .pswp__item {
  498. text-align: center;
  499. display: flex !important;
  500. align-items: center;
  501. width: 100%;
  502. }
  503. .pswp__img {
  504. object-fit: contain;
  505. /* width: 400px !important; */
  506. }
  507. #backToTop {
  508. display: none;
  509. position: fixed;
  510. bottom: 20px;
  511. right: 30px;
  512. z-index: 200;
  513. cursor: pointer;
  514. padding: 6px 12px;
  515. border-radius: 4px;
  516. background-color: rgba(255, 255, 255, .4);
  517. border: 1px solid #ccc;
  518. }
  519. #backToTop:hover {
  520. background-color: #ffffff;
  521. }
  522. .steps {
  523. display: flex;
  524. align-items: center;
  525. justify-content: center;
  526. }
  527. .steps .underline.sec {
  528. background-color: var(--sec-color);
  529. }
  530. .steps .underline {
  531. height: 3px;
  532. margin-top: -50px;
  533. display: block;
  534. width: 100%;
  535. background-color: #F2F1F3;
  536. }
  537. .list li {
  538. padding: 5px 0;
  539. width: 98%;
  540. font-size: 19px;
  541. }
  542. .featured-img, .profile-img {
  543. height: 100px;
  544. width: 100px;
  545. position: relative;
  546. border-radius: 8px;
  547. overflow: hidden;
  548. }
  549. .profile-img img {
  550. width: 100%;
  551. height: 150px;
  552. object-fit: cover;
  553. }
  554. .profile-title {
  555. font-size: 26px;
  556. }
  557. .profile-top {
  558. padding: 40px 60px;
  559. border-radius: 10px;
  560. position: relative;
  561. }
  562. .flex-gallery {
  563. display: flex;
  564. align-items: flex-start;
  565. gap: 15px;
  566. }
  567. .edit-pp {
  568. position: relative;
  569. cursor: pointer;
  570. }
  571. .edit-pp:hover::before {
  572. content: '+';
  573. z-index: 1;
  574. position: absolute;
  575. margin: auto;
  576. padding-top: 10px;
  577. width: 100%;
  578. height: 100px;
  579. text-align: center;
  580. background-color: rgba(0,0,0,.1);
  581. color: #fff;
  582. font-size: 50px;
  583. }
  584. .mt-neg {
  585. margin-top: -100px;
  586. }
  587. .large {
  588. font-size: 22px;
  589. }
  590. .times, .check {
  591. padding-left: 0;
  592. }
  593. .times li, .check li, .check-circle li{
  594. padding: 5px 0;
  595. display: flex;
  596. align-items: flex-start;
  597. list-style: none;
  598. font-size: 19px;
  599. }
  600. .check-circle li i {
  601. margin-top: 2px;
  602. margin-right: 10px;
  603. font-size: 24px;
  604. }
  605. .times li::before, .check li::before{
  606. content: '';
  607. background: url('/img/times.svg');
  608. background-size: contain;
  609. background-repeat: no-repeat;
  610. height: 9px;
  611. width: 12px;
  612. margin-top: 8px;
  613. margin-right: 10px;
  614. }
  615. .check li::before {
  616. background: url('/img/check.svg');
  617. }
  618. .video-wrapper {
  619. width: 90%;
  620. }
  621. .video-container {
  622. margin-left: 10%;
  623. width: 87%;
  624. border-radius: 20px;
  625. overflow: hidden;
  626. position: relative;
  627. margin-bottom: -200px;
  628. transform: translateZ(0);
  629. }
  630. .st-container {
  631. margin-right: -20px;
  632. border: 1px solid rgba(112, 112, 112, 0.2);
  633. box-shadow: 0px 13px 26px rgba(0, 0, 0, 0.05);
  634. border-radius: 16px;
  635. padding: 40px;
  636. padding-right: 60px;
  637. }
  638. .st-title {
  639. font-size: 30px;
  640. font-weight: bold;
  641. font-weight: 'RegolaProBold';
  642. }
  643. .form-control {
  644. height: 48px;
  645. }
  646. textarea.form-control {
  647. height: 150px;
  648. resize: none;
  649. }
  650. .svc-container {
  651. display: flex;
  652. align-items: flex-start;
  653. justify-content: space-between;
  654. gap: 15px;
  655. }
  656. .svc {
  657. position: relative;
  658. display: grid;
  659. place-items: center;
  660. cursor: pointer;
  661. font-size: 13px;
  662. text-align: center;
  663. }
  664. .sv-icon {
  665. border: 1px solid #ccc;
  666. padding: 20px;
  667. margin-bottom: 10px;
  668. }
  669. .sv-icon img {
  670. height: 60px;
  671. width: 60px;
  672. object-fit: contain;
  673. }
  674. .hidden {
  675. display: none;
  676. }
  677. .hidden-checkbox {
  678. visibility: hidden;
  679. position: absolute;
  680. }
  681. .top {
  682. background: #fff;
  683. color: rgba(0,0,0,0.9);
  684. padding: 20px 0;
  685. /* margin-top: 90px; */
  686. }
  687. .top-title {
  688. margin-top: 30px;
  689. font-size: 50px;
  690. /* font-family: 'noto-serif-medium', serif; */
  691. }
  692. .top-title span {
  693. position: relative;
  694. }
  695. .top-title span::after {
  696. position: absolute;
  697. content: '';
  698. background: url('/img/bright_words.svg');
  699. background-size: contain;
  700. background-repeat: no-repeat;
  701. top: -50px;
  702. right: -60px;
  703. height: 200px;
  704. width: 150px;
  705. }
  706. .user span, .pagination * {
  707. /* font-family: sans-serif; */
  708. font-size: 14px;
  709. }
  710. .user i {
  711. font-size: 14px;
  712. }
  713. .top p {
  714. width: 90%;
  715. margin: 20px 0;
  716. font-size: 19px;
  717. }
  718. .top h6 {
  719. font-size: 28px;
  720. /* font-family: 'noto-serif-medium', serif; */
  721. }
  722. .top-nav-unread-badge {
  723. position: absolute;
  724. right: -2px;
  725. top: 0px;
  726. font-size: 10px;
  727. background: #000;
  728. color: #fff;
  729. height: 15px;
  730. line-height: 15px;
  731. min-width: 17px;
  732. text-align: center;
  733. border-radius: 3px;
  734. }
  735. .btn-nav {
  736. border: 1px solid #000;
  737. border-radius: 50px;
  738. padding: 0.6rem 2rem !important;
  739. transition: .3s;
  740. }
  741. .btn-nav:hover {
  742. background: #000;
  743. color: #fff;
  744. transition: .3s;
  745. }
  746. [moe][large] form, [moe][large] [url] {
  747. width: 450px;
  748. }
  749. [moe][wide] form, [moe][wide] [url] {
  750. width: 550px;
  751. }
  752. [moe][huge] form, [moe][huge] [url] {
  753. width: 750px;
  754. }
  755. [moe][extra-huge] form, [moe][extra-huge] [url] {
  756. width: 900px;
  757. }
  758. [moe][bottom] form,
  759. [moe][bottom] div[url]{
  760. bottom: 100%;
  761. }
  762. .moe-disabled[moe] {
  763. cursor: not-allowed;
  764. }
  765. .moe-disabled[moe] [start][show] {
  766. opacity: 0.5;
  767. pointer-events: none;
  768. }
  769. .log, .log-dark {
  770. background-color: #ffffff;
  771. padding: 20px;
  772. }
  773. .log-dark {
  774. background-color: var(--pry-color);
  775. color: #fff;
  776. }
  777. .log-btn {
  778. background-color: var(--pry-color);
  779. color: #fff !important;
  780. padding: 10px 30px !important;
  781. }
  782. .log-dark .log-btn {
  783. background-color: #ffffff;
  784. color: #000 !important;
  785. }
  786. .header {
  787. /*SAL CHANGED FROM 45 to 38*/
  788. font-size: 38px;
  789. font-weight: 600;
  790. width: 70%;
  791. letter-spacing: -2px
  792. }
  793. .msg-header {
  794. background-color: #FB6108;
  795. color: #fff;
  796. }
  797. .msg-input {
  798. border: 1px solid #ccc;
  799. background-color: #ffffff;
  800. padding: 5px;
  801. border-radius: 50px;
  802. width: 100%;
  803. display: flex;
  804. align-items: center;
  805. justify-content: space-between;
  806. overflow: hidden;
  807. }
  808. .msg-input textarea, .msg-input textarea:focus{
  809. outline:0;
  810. box-shadow: 0;
  811. border:none;
  812. resize: none;
  813. width: 100%;
  814. height: 35px !important;
  815. }
  816. .btn-input, .btn-input:hover, .btn-input:focus {
  817. height: 40px;
  818. width: 44px;
  819. font-size: 18px;
  820. padding: 0;
  821. display: grid;
  822. place-items:center;
  823. border-radius: 100%;
  824. background: #32abd1;
  825. color: #fff;
  826. }
  827. .btn-input i {
  828. margin-left: -4px;
  829. }
  830. .sans *:not(i, .subtitle) {
  831. /* font-family: sans-serif; */
  832. }
  833. a, a:hover{
  834. color: var(--sec-color);
  835. text-decoration: none !important;
  836. }
  837. .pp-sm-container {
  838. background-color: #ffffff;
  839. border: 1px solid #eee;
  840. border-radius: 100%;
  841. width: 50px !important;
  842. height: 50px !important;
  843. }
  844. .pp-overlay, .pp-square-container {
  845. width: 220px;
  846. height: 220px;
  847. overflow: hidden;
  848. border:1px solid #ccc;
  849. cursor: pointer;
  850. background-color: #000;
  851. position: relative;
  852. }
  853. .pp-overlay:hover::after{
  854. content: '+';
  855. color: #fff;
  856. position: absolute;
  857. font-size: 100px;
  858. top:15%;
  859. left: calc(50% - 30px);
  860. margin: auto;
  861. width: 220px;
  862. height: 220px;
  863. }
  864. .pp-overlay img, .pp-square-container img {
  865. background-color: #ffffff;
  866. width: 220px;
  867. height: 220px;
  868. object-fit: cover;
  869. cursor: pointer;
  870. }
  871. .pp-square-container img {
  872. cursor: default;
  873. }
  874. .pp-overlay:hover img {
  875. opacity: .8;
  876. }
  877. .num {
  878. display: flex;
  879. align-items: start;
  880. }
  881. .num h6 {
  882. height: 35px;
  883. width: 35px;
  884. background: var(--pry-color);
  885. color: #fff;
  886. display: grid;
  887. place-items: center;
  888. font-size: 18px;
  889. margin-top: 10px;
  890. margin-right: 12px;
  891. border-radius: 100%;
  892. }
  893. .num h6.sec {
  894. background: var(--sec-color);
  895. color: #fff;
  896. }
  897. .num h6.bright {
  898. position: relative;
  899. }
  900. .num h6.bright::before {
  901. position: absolute;
  902. content: '';
  903. background: url('/img/bright_nums.svg');
  904. background-size: contain;
  905. background-repeat: no-repeat;
  906. left: -40px;
  907. height: 90px;
  908. width: 60px;
  909. }
  910. .center {
  911. display: grid;
  912. place-items: center;
  913. }
  914. .title {
  915. font-size: 45px;
  916. /* font-family: 'noto-serif-medium', serif; */
  917. }
  918. .subtitle {
  919. font-size: 40px;
  920. line-height: 55px;
  921. /* font-family: 'noto-serif-medium', serif; */
  922. }
  923. .sm-subtitle {
  924. width: 60%;
  925. }
  926. .heading, .subheading {
  927. /* font-family: 'noto-serif-medium', serif; */
  928. font-size: 30px;
  929. }
  930. .subheading {
  931. font-size: 20px;
  932. }
  933. .sub-bright {
  934. position: relative;
  935. }
  936. .sub-bright::after {
  937. position: absolute;
  938. content: '';
  939. background: url('/img/bright_words.svg');
  940. background-size: contain;
  941. background-repeat: no-repeat;
  942. top: -50px;
  943. right: -60px;
  944. height: 200px;
  945. width: 150px;
  946. }
  947. .video {
  948. width: 100%;
  949. height: 350px;
  950. }
  951. .video[poster] {
  952. object-fit: cover;
  953. }
  954. .qst {
  955. font-size: 22px;
  956. font-family: 'libre-italic', sans-serif;
  957. }
  958. .qst-lg {
  959. font-size: 35px
  960. }
  961. .form-control {
  962. border-radius: 0;
  963. font-size: 16px;
  964. color: #000000;
  965. }
  966. .training-steps {
  967. margin-top: 50px;
  968. display: flex;
  969. align-items: flex-start;
  970. flex-wrap: wrap;
  971. justify-content: space-between;
  972. }
  973. .training-steps img {
  974. height: 60px;
  975. }
  976. .overlay-support {
  977. display: flex;
  978. align-items: center;
  979. background-color: #FBFBFB;
  980. }
  981. .overlay-support>div {
  982. width: 100%;
  983. }
  984. .img-holder {
  985. overflow: hidden;
  986. }
  987. .img-holder img {
  988. object-position: center;
  989. }
  990. .content {
  991. padding: 80px;
  992. }
  993. .content h3 {
  994. font-size: 50px;
  995. line-height: 65px;
  996. /* font-family: 'noto-serif-medium', serif; */
  997. }
  998. .bd-bottom-light {
  999. border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  1000. }
  1001. .footer-logo img {
  1002. height: 50px;
  1003. width: 100%;
  1004. object-fit: contain;
  1005. }
  1006. .footer-links a {
  1007. display: block;
  1008. margin-bottom: 15px;
  1009. font-size: 16px;
  1010. color: #fff;
  1011. text-decoration: none;
  1012. transition: .5s;
  1013. }
  1014. .footer-links a:hover {
  1015. color: var(--sec-color);
  1016. transition: .5s;
  1017. }
  1018. .around {
  1019. justify-content: space-around;
  1020. }
  1021. .bd-right {
  1022. border-right:1px solid #000;
  1023. padding-right: 30px;
  1024. }
  1025. .about-context {
  1026. text-align: left;
  1027. }
  1028. .board-member {
  1029. margin-bottom: 40px;
  1030. }
  1031. .board-member img{
  1032. width: 100%;
  1033. margin-bottom: 20px;
  1034. }
  1035. .courses > div {
  1036. padding: 70px 0;
  1037. background-size: cover;
  1038. background-position: center;
  1039. background-repeat: no-repeat;
  1040. }
  1041. .course-1 {
  1042. background-image: url('/img/courses/course_bg_1.jpg');
  1043. }
  1044. .course-2 {
  1045. background-image: url('/img/courses/course_bg_2.jpg');
  1046. }
  1047. .course-3 {
  1048. background-image: url('/img/courses/course_bg_3.jpg');
  1049. }
  1050. .course-4 {
  1051. background-image: url('/img/courses/course_bg_4.jpg');
  1052. }
  1053. .course-5 {
  1054. background-image: url('/img/courses/course_bg_5.jpg');
  1055. }
  1056. .user {
  1057. border: 1px solid #eee;
  1058. padding: 12px;
  1059. display: flex;
  1060. align-items:flex-start;
  1061. }
  1062. .user:hover {
  1063. background-color: #f1f1f1;
  1064. }
  1065. .pp-container {
  1066. display: block;
  1067. height: 90px;
  1068. width: 100px;
  1069. position: relative;
  1070. }
  1071. .pp-container > div {
  1072. height: 90px;
  1073. width: 100px;
  1074. background-color: #ffffff;
  1075. border: 1px solid #eee;
  1076. border-radius: 5px;
  1077. overflow: hidden;
  1078. }
  1079. .pp-container img {
  1080. object-fit: cover;
  1081. width: 100%;
  1082. height: 100%;
  1083. }
  1084. .pp-container i {
  1085. color: #ddd;
  1086. font-size: 10px;
  1087. position: absolute;
  1088. border-radius: 100%;
  1089. border:2px solid #fff;
  1090. top: -5px;
  1091. right: -5px;
  1092. }
  1093. .pp-container i.online {
  1094. color: #30ba06;
  1095. }
  1096. .days {
  1097. display: flex;
  1098. flex-wrap: wrap;
  1099. }
  1100. .days a {
  1101. background-color: #fff;
  1102. padding: 12px;
  1103. display: grid;
  1104. place-items:center;
  1105. cursor: pointer;
  1106. }
  1107. .days a:hover {
  1108. background-color: #f1f2f1;
  1109. }
  1110. .days a.active {
  1111. background-color: var(--sec-color);
  1112. color: #fff;
  1113. }
  1114. .accordion-item {
  1115. border:none;
  1116. border-bottom: 1px solid #000;
  1117. }
  1118. .accordion-item:first-child {
  1119. border-top: 1px solid #000;
  1120. }
  1121. .accordion-button {
  1122. border-radius: 0 !important;
  1123. /* font-family: 'noto-serif-medium', serif; */
  1124. font-size: 18px;
  1125. padding: 18px 0;
  1126. }
  1127. .accordion-button::after {
  1128. display: none;
  1129. }
  1130. .accordion-button::before {
  1131. content: '';
  1132. background: url('/img/plus.svg');
  1133. background-size: cover;
  1134. height: 14px;
  1135. width: 14px;
  1136. margin-right: 20px;
  1137. transition: .5s;
  1138. }
  1139. .accordion-button:not(.collapsed)::before {
  1140. content: '';
  1141. background: url('/img/minus.svg');
  1142. background-size: contain;
  1143. background-repeat: no-repeat;
  1144. height: 5px;
  1145. width: 14px;
  1146. margin-right: 20px;
  1147. margin-top: 5px;
  1148. transition: .5s;
  1149. }
  1150. .accordion-button:focus, .accordion-button:not(.collapsed) {
  1151. background: #fff;
  1152. border: none;
  1153. box-shadow: none;
  1154. color: #000000;
  1155. }
  1156. .page-item.active .page-link {
  1157. background-color: var(--sec-color);
  1158. border-color: var(--sec-color);
  1159. }
  1160. .page-link {
  1161. color: var(--sec-color);
  1162. }
  1163. .morph-button-modal-btn button img {
  1164. width: 100%;
  1165. }
  1166. /* RESPONSIVENESS */
  1167. @media screen and (max-width:1399px) {
  1168. .sm-subtitle {
  1169. width: 70%;
  1170. }
  1171. }
  1172. @media screen and (max-width:1199px) {
  1173. .nav-item {
  1174. margin-right: 2px;
  1175. }
  1176. .mb-down {
  1177. margin-bottom: -45px;
  1178. }
  1179. .info-card {
  1180. top: 0;
  1181. height: auto;
  1182. position: relative;
  1183. }
  1184. .top {
  1185. background: url('/img/yoga/yoga.png');
  1186. background-size: cover;
  1187. background-repeat: no-repeat;
  1188. background-position: center;
  1189. /* color: #fff; */
  1190. padding: 0;
  1191. }
  1192. .btn-sec {
  1193. padding: 8px 40px;
  1194. margin-bottom: 5px;
  1195. }
  1196. .training {
  1197. background: url('/img/training.jpg');
  1198. background-size: cover;
  1199. background-repeat: no-repeat;
  1200. background-position: center;
  1201. }
  1202. .about {
  1203. background: var(--pry-color);
  1204. color: #fff;
  1205. }
  1206. .overlay {
  1207. padding-bottom: 40px;
  1208. background: rgba(255,255,255, 0.6);
  1209. }
  1210. .svc-container {
  1211. flex-wrap: wrap;
  1212. justify-content: flex-start;
  1213. }
  1214. .st-container {
  1215. padding: 20px;
  1216. }
  1217. .st-container, .st-video {
  1218. margin-inline: 0 !important;
  1219. }
  1220. .st-video.video-container {
  1221. width: 100%;
  1222. border-radius: 0;
  1223. }
  1224. .m-video {
  1225. position: absolute;
  1226. right: 20px;
  1227. top: 20px;
  1228. font-size: 20px;
  1229. }
  1230. .video-modal {
  1231. height: 40px;
  1232. width: 40px;
  1233. display: grid;
  1234. place-items: center;
  1235. background-color: var(--light-sec-color);
  1236. border-radius: 100%;
  1237. z-index: 1;
  1238. }
  1239. .support-experience {
  1240. background: url('/app/pyg/img/pose.jpg');
  1241. background-size: cover;
  1242. background-repeat: no-repeat;
  1243. background-position: center;
  1244. }
  1245. .overlay-support {
  1246. background-color: rgba(251, 251, 251, 0.9);
  1247. }
  1248. .pro-top {
  1249. background-size: cover;
  1250. border-bottom: 1px solid #333;
  1251. height: 300px;
  1252. margin-bottom: 100px;
  1253. }
  1254. .container-lg {
  1255. /* max-width: 1140px; */
  1256. }
  1257. .pro-top .row {
  1258. align-items: center;
  1259. }
  1260. .pro-top .top-title {
  1261. padding-top: 0 !important;
  1262. padding-bottom: 50px;
  1263. }
  1264. .pro-intro {
  1265. margin-top: 0;
  1266. padding: 20px;
  1267. margin-inline: auto;
  1268. }
  1269. .sm-subtitle {
  1270. width: 90%;
  1271. }
  1272. .sub-bright::after {
  1273. top: -30px;
  1274. right: -25px;
  1275. height: 181px;
  1276. width: 100px;
  1277. }
  1278. .mobile {
  1279. display: block;
  1280. }
  1281. .web {
  1282. display: none;
  1283. }
  1284. .about-context {
  1285. text-align: center;
  1286. }
  1287. .training-steps {
  1288. justify-content: center;
  1289. }
  1290. .training-steps>div {
  1291. margin-left: 30px;
  1292. margin-right: 30px;
  1293. }
  1294. .overlay-cream {
  1295. height: 300px;
  1296. background-image: none;
  1297. background-color: rgba(244, 243, 237, .8);
  1298. }
  1299. .edit-pp::before {
  1300. content: '+';
  1301. z-index: 1;
  1302. position: absolute;
  1303. margin: auto;
  1304. padding-top: 15px;
  1305. width: 100%;
  1306. height: 150px;
  1307. text-align: center;
  1308. background-color: rgba(0,0,0,.1);
  1309. color: #fff;
  1310. font-size: 80px;
  1311. }
  1312. .navbar-toggler {
  1313. color: var(--pry-color);
  1314. border: 1px solid var(--pry-color);
  1315. background-color: #fff;
  1316. padding: 15px 12px;
  1317. margin-bottom: 0;
  1318. border-radius: 8px;
  1319. }
  1320. .navbar-toggler:focus {
  1321. box-shadow: none;
  1322. }
  1323. #navBar {
  1324. background: #fff;
  1325. padding: 0;
  1326. position: absolute;
  1327. width: 100%;
  1328. top: 70px;
  1329. left: 0;
  1330. z-index: 200;
  1331. }
  1332. .nav-item {
  1333. margin-right: 0;
  1334. width: 100%;
  1335. padding-inline: 10px;
  1336. }
  1337. .nav-link {
  1338. border-bottom: 1px solid #000;
  1339. color: #000;
  1340. white-space: nowrap;
  1341. }
  1342. .nav-item:last-child .nav-link:last-child {
  1343. border-bottom: 0;
  1344. }
  1345. }
  1346. @media screen and (max-width:1199px) and (min-width: 992px) {
  1347. .navbar-expand-lg {
  1348. flex-wrap: wrap;
  1349. justify-content: space-between;
  1350. }
  1351. .navbar-expand-lg .navbar-collapse{
  1352. display: none !important;
  1353. }
  1354. .navbar-expand-lg .navbar-collapse.show{
  1355. display: flex !important;
  1356. flex-basis: 100%;
  1357. align-items: center;
  1358. }
  1359. .navbar-expand-lg .navbar-toggler {
  1360. display: block;
  1361. }
  1362. .navbar-expand-lg .navbar-nav {
  1363. display: block;
  1364. padding-left: 0;
  1365. margin-bottom: 0;
  1366. list-style: none;
  1367. width: 100%;
  1368. padding: 0 15px;
  1369. }
  1370. }
  1371. @media screen and (max-width:991px) {
  1372. nav.navbar {
  1373. /* background-color: var(--pry-color);; */
  1374. }
  1375. nav.navbar .container {
  1376. padding: 0 15px !important;
  1377. position: relative;
  1378. border-bottom: none;
  1379. }
  1380. .pp-container, .pp-container > div {
  1381. height: 100px;
  1382. }
  1383. .min-width-200px {
  1384. min-width: 100px;
  1385. }
  1386. .pagination {
  1387. flex-wrap: wrap;
  1388. }
  1389. .top-dash {
  1390. border-top:none;
  1391. }
  1392. .info-card .title {
  1393. font-size: 35px;
  1394. line-height: 40px
  1395. }
  1396. .info-card .subtitle {
  1397. font-size: 25px;
  1398. line-height: 35px
  1399. }
  1400. .user {
  1401. display: grid;
  1402. place-items:center;
  1403. }
  1404. .title {
  1405. font-size: 35px;
  1406. }
  1407. }
  1408. @media screen and (max-width:767px) {
  1409. .top p {
  1410. width: 100%;
  1411. }
  1412. .content {
  1413. padding: 70px 40px;
  1414. }
  1415. .info-card .title {
  1416. font-size: 35px;
  1417. line-height: 40px;
  1418. }
  1419. .info-card .subtitle {
  1420. font-size: 20px;
  1421. }
  1422. .info-card .cleaner-title {
  1423. font-size: 25px;
  1424. }
  1425. .mb-scroll {
  1426. display: flex;
  1427. }
  1428. .im-container .im-lhs {
  1429. min-width: 100px;
  1430. max-width: 100px;
  1431. }
  1432. .im-container .im-lhs .d-flex{
  1433. display: none !important;
  1434. }
  1435. }
  1436. @media screen and (max-width:580px) {
  1437. .subtitle {
  1438. font-size: 29px;
  1439. line-height: 40px;
  1440. }
  1441. .num h6 {
  1442. margin-top: 5px;
  1443. }
  1444. .content h3 {
  1445. font-size: 30px;
  1446. line-height: 40px;
  1447. }
  1448. .footer-logo img {
  1449. height: 90px;
  1450. }
  1451. .footer-links a {
  1452. font-size: 14px;
  1453. }
  1454. .content {
  1455. padding: 50px 15px;
  1456. }
  1457. .footer-links {
  1458. width: 50%;
  1459. margin-bottom: 20px;
  1460. }
  1461. .around {
  1462. justify-content: flex-start;
  1463. }
  1464. .top-title span::after {
  1465. display: none;
  1466. }
  1467. .top-title span {
  1468. color: var(--sec-color);
  1469. }
  1470. .info-card .title {
  1471. font-size: 25px;
  1472. line-height: 30px;
  1473. }
  1474. .info-card .cleaner-title {
  1475. font-size: 20px;
  1476. }
  1477. .num {
  1478. display: grid;
  1479. place-items: center;
  1480. }
  1481. .num .subtitle {
  1482. /* text-align: center; */
  1483. }
  1484. }
  1485. @media screen and (max-width:400px) {
  1486. .top-title {
  1487. font-size: 45px;
  1488. }
  1489. .btn-sec {
  1490. padding: 10px 25px;
  1491. font-size: 14px;
  1492. margin-bottom: 5px;
  1493. }
  1494. }
  1495. @media screen and (max-width:580px) {
  1496. [moe] {
  1497. position: static !important;
  1498. }
  1499. [moe] form {
  1500. position: absolute;
  1501. display: block;
  1502. top: 2rem;
  1503. left: 1rem;
  1504. width: calc(100vw - 2rem);
  1505. max-width: calc(100vw - 2rem);
  1506. }
  1507. }
  1508. .accordion .accordion-content {
  1509. display: none;
  1510. }
  1511. .accordion .accordion-content.show {
  1512. display: block;
  1513. }
  1514. .accordion .accordion-title {
  1515. cursor: pointer;
  1516. }
  1517. .appt-title-section {
  1518. width: 50%;
  1519. }
  1520. .dashboard {
  1521. max-width: 95%;
  1522. }
  1523. .dashboard .profile-card {
  1524. position: relative;
  1525. padding: 30px 30px 0 30px;
  1526. }
  1527. .dashboard .profile-card h4 {
  1528. font-weight: 600;
  1529. font-size: 28px;
  1530. line-height: 48px;
  1531. color: #fff;
  1532. }
  1533. .dashboard .profile-card .profile-snapshot {
  1534. background-color: #fff;
  1535. padding: 20px;
  1536. border-bottom-left-radius: 0;
  1537. border-bottom-right-radius: 0;
  1538. }
  1539. .dashboard .profile-card .profile-snapshot .pp-round-container {
  1540. width: 100px;
  1541. height: 100px;
  1542. }
  1543. .dashboard .profile-card .profile-snapshot .pp-round-container img {
  1544. width: 100px;
  1545. height: 100px;
  1546. cursor: pointer;
  1547. }
  1548. .dashboard .profile-card .profile-snapshot .profile-link {
  1549. font-weight: 500;
  1550. color: #1A1539;
  1551. }
  1552. .dashboard .account-finance {
  1553. background: linear-gradient(228.77deg, #69C982 -14.18%, #068374 94.11%);
  1554. border-radius: 12px;
  1555. color: #fff;
  1556. padding: 30px;
  1557. }
  1558. .dashboard .icon {
  1559. display: inline-block;
  1560. width: 30px;
  1561. height: 30px;
  1562. color: #fff;
  1563. text-align: center;
  1564. border-radius: 3px;
  1565. }
  1566. .dashboard .icon i {
  1567. margin-top: 6px;
  1568. }
  1569. .dashboard .icon.green {
  1570. background-color: #57BC80;
  1571. }
  1572. .dashboard .icon.dark-blue {
  1573. background-color: #395076;
  1574. }
  1575. .dashboard .icon.secondary{
  1576. background-color: #FFE6E3;
  1577. }
  1578. .dashboard .account-finance h6 {
  1579. font-weight: 600;
  1580. font-size: 18px;
  1581. }
  1582. .dashboard .account-finance h3 {
  1583. font-weight: 600;
  1584. font-size: 32px;
  1585. line-height: 24px;
  1586. }
  1587. .dashboard .account-finance .btn-grey {
  1588. color: #fff;
  1589. background-color: var(--sec-color);
  1590. padding: 15px 40px;
  1591. box-shadow: none;
  1592. border-radius: 30px;
  1593. }
  1594. .dashboard .contracts-profiles {
  1595. background: linear-gradient(93.81deg, #1A1539 6.4%, #1E437A 106.01%);
  1596. mix-blend-mode: normal;
  1597. border-radius: 12px;
  1598. padding: 20px 30px;
  1599. color: #fff;
  1600. }
  1601. .dashboard .contracts-profiles h6 {
  1602. font-weight: 600;
  1603. margin-bottom: 0;
  1604. }
  1605. .dashboard .contracts-profiles .profiles {
  1606. }
  1607. .dashboard .contracts-profiles .profiles img {
  1608. width: 60px;
  1609. height: 60px;
  1610. border-radius: 50%;
  1611. border: 1px solid rgba(28, 45, 95, 0.8);
  1612. padding: 2px;
  1613. background-color: #fff;
  1614. margin-right: 10px;
  1615. }
  1616. .dashboard .card {
  1617. border: none;
  1618. }
  1619. .dashboard .card .card-header {
  1620. background-color: #fff;
  1621. border: 1px solid #CDCCD3;
  1622. border-radius: 8px;
  1623. padding: 15px;
  1624. }
  1625. .dashboard .card .card-header h6 {
  1626. font-weight: bold;
  1627. }
  1628. .cw-55 {
  1629. width: 55px;
  1630. display: inline-block;
  1631. }
  1632. .dashboard .btn-outline-dark {
  1633. border-color: rgba(0, 0, 0, 0.2);
  1634. color: #1A1539;
  1635. }
  1636. .dashboard .btn-outline-dark:hover,
  1637. .dashboard .btn-outline-dark:focus {
  1638. color: #fff;
  1639. }
  1640. .fc .fc-toolbar.fc-header-toolbar {
  1641. margin-bottom: 10px;
  1642. }
  1643. .fc-col-header thead th {
  1644. background: #FFE6E3;
  1645. color: #EF7F72;
  1646. font-weight: normal;
  1647. }
  1648. .fc-theme-standard td, .fc-theme-standard th {
  1649. border: 1px solid rgba(239, 127, 114, 0.4);
  1650. }
  1651. .fc-theme-standard .fc-scrollgrid {
  1652. border: 1px solid rgba(239, 127, 114, 0.4);
  1653. border-right: none;
  1654. border-bottom: none;
  1655. }
  1656. .fc .fc-daygrid-day-number {
  1657. color: #1A1539;
  1658. }
  1659. .fc .fc-button {
  1660. text-transform: capitalize;
  1661. }
  1662. .fc .fc-daygrid-day-number {
  1663. padding: 4px 20px 4px 4px;
  1664. }
  1665. .dashboard .fc-direction-ltr .fc-daygrid-event.fc-event-end,
  1666. .dashboard .fc-direction-rtl .fc-daygrid-event.fc-event-start {
  1667. border-radius: 50%;
  1668. width: 20px;
  1669. height: 20px;
  1670. overflow: hidden;
  1671. color: transparent;
  1672. cursor: pointer;
  1673. }
  1674. .dashboard .fc-h-event .fc-event-main {
  1675. color: transparent;
  1676. }
  1677. .dashboard .fc-daygrid-day-events {
  1678. display: flex;
  1679. }
  1680. .event-popover {
  1681. background: #E4EFFF;
  1682. padding: 30px;
  1683. border-radius: 4px;
  1684. }
  1685. .popover {
  1686. border-color: transparent;
  1687. max-width: 330px;
  1688. }
  1689. .popover-body {
  1690. padding: 0;
  1691. }
  1692. .event-popover h6 {
  1693. background-color: #fff;
  1694. border-radius: 15px;
  1695. padding: 5px 10px;
  1696. color: #567EBA;
  1697. font-weight: 400;
  1698. font-size: 14px;
  1699. }
  1700. .event-popover .time {
  1701. color: #567EBA;
  1702. }
  1703. .event-popover h5 {
  1704. margin-top: 10px;
  1705. margin-bottom: 10px;
  1706. }
  1707. .event-popover h5 a {
  1708. color: #567EBA;
  1709. font-weight: 500;
  1710. font-size: 14px;
  1711. }
  1712. .event-popover .pro{
  1713. font-weight: 400;
  1714. font-size: 14px;
  1715. line-height: 19px;
  1716. color: #567EBA;
  1717. }
  1718. .event-popover.Declined {
  1719. background: #ffe5dd;
  1720. }
  1721. .event-popover.Declined h6 {
  1722. background-color: #ea430f;
  1723. color: #fff;
  1724. }
  1725. .event-popover.Declined .time,
  1726. .event-popover.Declined h5 a,
  1727. .event-popover.Declined .pro {
  1728. color: #ea430f;
  1729. }
  1730. .event-popover.Confirmed {
  1731. background: #E3F7E9;
  1732. }
  1733. .event-popover.Confirmed h6 {
  1734. background-color: #5A9269;
  1735. color: #fff;
  1736. }
  1737. .event-popover.Confirmed .time,
  1738. .event-popover.Confirmed h5 a,
  1739. .event-popover.Confirmed .pro {
  1740. color: #5A9269;
  1741. }
  1742. .event-popover.Pending {
  1743. background: #FFFAE3;
  1744. }
  1745. .event-popover.Pending h6 {
  1746. background-color: #EAA80F;
  1747. color: #fff;
  1748. }
  1749. .event-popover.Pending .time,
  1750. .event-popover.Pending h5 a,
  1751. .event-popover.Pending .pro {
  1752. color: #EAA80F;
  1753. }
  1754. .im-container .im-rhs .im-input textarea {
  1755. height: 60px;
  1756. border-color: #ccc;
  1757. padding: 0.3rem;
  1758. box-shadow: none !important;
  1759. }
  1760. .im-container .im-rhs .im-input.pr-input textarea {
  1761. height: 150px;
  1762. }
  1763. .im-container .im-rhs .im-input textarea:focus,
  1764. .im-container .im-rhs .im-input textarea:active,
  1765. .im-container .im-rhs .im-input textarea:focus-visible {
  1766. /* border: 1px solid #307899 !important; */
  1767. }
  1768. .im-container .im-rhs .im-input #selected-files .selected-file {
  1769. background: #eee;
  1770. border: 1px solid #ccc;
  1771. border-radius: 3px;
  1772. padding: 2px 20px 2px 5px;
  1773. cursor: pointer;
  1774. position: relative;
  1775. margin-top: 6px;
  1776. margin-right: 6px;
  1777. }
  1778. .im-container .im-rhs .im-input #selected-files .selected-file:hover {
  1779. color: #b11313;
  1780. }
  1781. .im-container .im-rhs .im-input #selected-files .selected-file:after {
  1782. position: absolute;
  1783. content: '✕';
  1784. right: 4px;
  1785. color: #b11313;
  1786. }
  1787. .im-container .im-rhs .im-video-container {
  1788. max-width: 480px;
  1789. display: inline-block;
  1790. position: relative;
  1791. margin-top: 4px;
  1792. }
  1793. .im-container .im-rhs .im-video-container video {
  1794. max-width: 100%;
  1795. }
  1796. .im-container .im-rhs .im-video-container .vs-control {
  1797. opacity: 0;
  1798. transition: opacity 0.3s ease;
  1799. position: absolute;
  1800. margin: 0 !important;
  1801. top: 0;
  1802. right: 0;
  1803. background: rgba(238, 238, 238, 0.75) !important;
  1804. border: 0 !important;
  1805. border-bottom-left-radius: 3px;
  1806. text-align: right !important;
  1807. width: auto !important;
  1808. font-size: 11px !important;
  1809. }
  1810. .im-container .im-rhs .im-video-container:hover .vs-control {
  1811. opacity: 1;
  1812. background: rgba(238, 238, 238, 1) !important;
  1813. }
  1814. .im-container .im-rhs .im-video-container .vs-control select {
  1815. width: auto !important;
  1816. border: 0 !important;
  1817. }
  1818. .im-message.proofreading {
  1819. border: 2px solid #9aceb8;
  1820. padding: 4px !important;
  1821. background: #f1fff9;
  1822. border-radius: 5px;
  1823. }
  1824. .msg-header {
  1825. background-color: #FB6108;
  1826. color: #fff;
  1827. }
  1828. .msg-input {
  1829. border: 1px solid #ccc;
  1830. background-color: #ffffff;
  1831. padding: 0 !important;
  1832. border-radius: 50px;
  1833. width: 100%;
  1834. display: flex;
  1835. align-items: center;
  1836. justify-content: space-between;
  1837. overflow: visible !important;
  1838. }
  1839. .msg-input textarea, .msg-input textarea:focus{
  1840. outline:0;
  1841. box-shadow: 0;
  1842. border:none;
  1843. resize: none;
  1844. width: 100%;
  1845. height: 35px !important;
  1846. margin-left: 12px;
  1847. }
  1848. .im-btn-send {
  1849. margin-right: -1px !important;
  1850. margin-top: -1px !important;
  1851. margin-bottom: -1px !important;
  1852. }
  1853. .btn-input, .btn-input:hover, .btn-input:focus {
  1854. /*height: 40px;
  1855. width: 44px;
  1856. font-size: 18px;
  1857. padding: 0;
  1858. display: grid;
  1859. place-items:center;
  1860. border-radius: 100%;
  1861. background: #32abd1;
  1862. color: #fff;*/
  1863. margin-right: -1px !important;
  1864. margin-top: -1px !important;
  1865. margin-bottom: -1px !important;
  1866. z-index: 1;
  1867. }
  1868. .btn-input i {
  1869. margin-left: -4px;
  1870. }
  1871. .im-date-separator {
  1872. height: 20px;
  1873. line-height: 20px;
  1874. position: relative;
  1875. text-align: center;
  1876. margin: 16px 0;
  1877. }
  1878. .im-date-separator::before {
  1879. border-top: 1px solid #0003;
  1880. position: absolute;
  1881. width: 100%;
  1882. content: '';
  1883. top: 9px;
  1884. left: 0;
  1885. }
  1886. .im-date-separator>span {
  1887. position: absolute;
  1888. background: #fff;
  1889. top: 0;
  1890. left: calc(50% - 70px);
  1891. width: 140px;
  1892. color: #1A153999;
  1893. font-weight: normal;
  1894. }
  1895. .im-message .on-hover-visible-header-item {
  1896. display: none;
  1897. }
  1898. .im-message:hover .on-hover-visible-header-item {
  1899. display: block;
  1900. }
  1901. .video-intro {
  1902. display: grid;
  1903. place-items: center;
  1904. }
  1905. .video-intro video {
  1906. max-height: 500px;
  1907. width: 100%;
  1908. object-fit: contain;
  1909. }
  1910. .flex-gallery {
  1911. display: flex;
  1912. align-items: flex-start;
  1913. gap: 15px;
  1914. }
  1915. .gallery-upload-photo {
  1916. width: 100%;
  1917. cursor: pointer;
  1918. text-align: center;
  1919. border: 1px solid #ddd;
  1920. border-radius: 4px;
  1921. padding: 5px 15px;
  1922. background-color: #EFEFEF;
  1923. display: flex;
  1924. align-items: center;
  1925. justify-content: center;
  1926. position: relative;
  1927. }
  1928. .gallery-upload-photo input[type=file] {
  1929. width: 100%;
  1930. height: 100%;
  1931. position: absolute;
  1932. opacity: 0;
  1933. cursor: pointer;
  1934. }
  1935. .gallery-upload-photo i {
  1936. font-size: 50px;
  1937. color: #bfbcbc;
  1938. cursor: pointer;
  1939. }
  1940. .up-img-container {
  1941. height: 170px;
  1942. width: 180px;
  1943. background-color: #ffffff;
  1944. position: relative;
  1945. margin-bottom: 5px;
  1946. }
  1947. .up-img-container img {
  1948. height: 100%;
  1949. width: 100%;
  1950. object-fit: contain;
  1951. }
  1952. .up-img-container a {
  1953. position: absolute;
  1954. top: 0;
  1955. right: 5px;
  1956. cursor: pointer;
  1957. text-align: center;
  1958. }
  1959. ul.flex-gallery {
  1960. list-style-type: none;
  1961. margin: 0;
  1962. padding: 0;
  1963. }
  1964. .note-editor button.note-btn {
  1965. width: auto !important;
  1966. }