style.css 41 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366
  1. @charset "UTF-8";
  2. /*custom font*/
  3. @import url(https://fonts.googleapis.com/css?family=Montserrat);
  4. @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
  5. /*basic reset*/
  6. * {
  7. margin: 0;
  8. padding: 0;
  9. }
  10. html {
  11. min-height: 100%;
  12. height: auto;
  13. /*Image only BG fallback*/
  14. /*background = gradient + image pattern combo*/
  15. /* background:
  16. linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6)); */
  17. }
  18. body {
  19. font-family: "Montserrat", sans-serif;
  20. background-color: white;
  21. font-size: 1.05rem;
  22. }
  23. .loading {
  24. width: 100%;
  25. height: 100%;
  26. opacity: 0.8;
  27. background-color: white;
  28. z-index: 10000;
  29. display: block;
  30. position: fixed;
  31. top: 0;
  32. left: 0;
  33. background-color: rgba(225, 225, 225, 0.8);
  34. background-image: url("../img/Cube-0.9s-197px.gif");
  35. background-repeat: no-repeat;
  36. background-position: 50% 50%;
  37. }
  38. .ml {
  39. margin-left: 10px;
  40. }
  41. .mr {
  42. margin-right: 10px;
  43. }
  44. .mb {
  45. margin-bottom: 12px;
  46. }
  47. .top {
  48. margin-top: 20px;
  49. position: -webkit-sticky;
  50. position: sticky;
  51. top: 0;
  52. left: 50%;
  53. z-index: 20;
  54. background-color: inherit;
  55. }
  56. .copy {
  57. cursor: pointer;
  58. }
  59. .navbar {
  60. background-color: white;
  61. }
  62. @media screen and (min-width: 1025px) {
  63. .navbar .menu-bar {
  64. display: none;
  65. }
  66. }
  67. @media screen and (max-width: 767px) {
  68. .navbar-des {
  69. display: none;
  70. }
  71. }
  72. /* .imf {
  73. position: fixed;
  74. top: 0;
  75. left: 50%;
  76. transform: translateX(-50%);
  77. z-index: 3;
  78. } */
  79. .img_banner {
  80. background-image: url("images/banner_top1.jpg");
  81. background-repeat: no-repeat;
  82. background-size: contain;
  83. background-position: center;
  84. width: 100%;
  85. height: 65px;
  86. }
  87. /*form styles*/
  88. .img_logo {
  89. display: inline-block;
  90. margin: 0 auto;
  91. margin-bottom: 10px;
  92. }
  93. .title__block {
  94. display: -webkit-box;
  95. display: -ms-flexbox;
  96. display: flex;
  97. -webkit-box-pack: center;
  98. -ms-flex-pack: center;
  99. justify-content: center;
  100. -webkit-box-align: center;
  101. -ms-flex-align: center;
  102. align-items: center;
  103. margin: 0px auto;
  104. }
  105. .sub-logo {
  106. display: inline-block;
  107. font-weight: 700;
  108. font-size: 1.4rem;
  109. color: white;
  110. }
  111. .slogan {
  112. display: block;
  113. font-weight: 700;
  114. font-size: 1.2rem;
  115. color: white;
  116. }
  117. .notice_card {
  118. -webkit-box-sizing: border-box;
  119. box-sizing: border-box;
  120. width: 80%;
  121. margin: 0 10%;
  122. margin-bottom: 1.5rem;
  123. background: white;
  124. border: 0 none;
  125. border-radius: 3px;
  126. -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  127. box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  128. padding: 10px 20px;
  129. line-height: 1.5rem;
  130. }
  131. #myProgress {
  132. width: 100%;
  133. background-color: #ddd;
  134. }
  135. #myBar {
  136. width: 10%;
  137. height: 30px;
  138. background-color: #1c7ce0;
  139. text-align: center;
  140. line-height: 30px;
  141. color: white;
  142. }
  143. .go_title {
  144. color: white;
  145. font-family: "Montserrat", sans-serif;
  146. padding: 1rem;
  147. }
  148. .nav-list {
  149. color: white;
  150. margin-top: 1.5rem;
  151. }
  152. .nav-list-item {
  153. font-size: 1.2rem;
  154. cursor: pointer;
  155. position: relative;
  156. }
  157. .nav-list-item::after {
  158. content: " ";
  159. position: absolute;
  160. width: 100%;
  161. height: 100%;
  162. left: 0;
  163. top: 0;
  164. border-bottom: 1px solid white;
  165. opacity: 0;
  166. -webkit-transition: all 0.4s;
  167. transition: all 0.4s;
  168. }
  169. .nav-list-item:hover::after {
  170. opacity: 1;
  171. }
  172. .loader {
  173. position: absolute;
  174. top: 30%;
  175. left: 45%;
  176. }
  177. .imgfr {
  178. width: 90px;
  179. height: 90px;
  180. border-radius: 50%;
  181. overflow: hidden;
  182. margin: 1rem auto 0 auto;
  183. cursor: pointer;
  184. }
  185. .card-title {
  186. font-family: "Montserrat", sans-serif;
  187. font-size: 1rem;
  188. }
  189. .strong {
  190. font-weight: 600;
  191. }
  192. .card {
  193. border: none;
  194. position: relative;
  195. }
  196. .card.active {
  197. border: 1px solid gray;
  198. }
  199. .card.active::before {
  200. position: absolute;
  201. content: "✓";
  202. bottom: 0;
  203. right: 5px;
  204. }
  205. .zoomin {
  206. display: none;
  207. position: absolute;
  208. bottom: 0;
  209. left: 0;
  210. }
  211. .script_err {
  212. display: none;
  213. }
  214. /* .history-modal {
  215. height: 80vh;
  216. }
  217. .history-modal .modal-content{
  218. height: 80vh;
  219. }
  220. .history-modal .modal-conten .modal-terms {
  221. height: 90%;
  222. overflow: scroll;
  223. } */
  224. .input-sec {
  225. box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  226. -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  227. }
  228. .input-sec .remove-btn {
  229. position: absolute;
  230. right: .2rem;
  231. bottom: .2rem;
  232. font-size: .8rem;
  233. padding: .2rem;
  234. background-color: #cacaca;
  235. }
  236. .upload-cta.box-active {
  237. height: 80px;
  238. width: 80px;
  239. background-size: cover !important;
  240. background-repeat: no-repeat;
  241. border-radius: 1rem;
  242. }
  243. .history {
  244. height: 75vh;
  245. overflow: scroll;
  246. }
  247. .historyList-item {
  248. padding: 1rem;
  249. display: block;
  250. width: 80%;
  251. margin: 1rem auto;
  252. border-radius: 10px;
  253. display: -webkit-box;
  254. display: -ms-flexbox;
  255. display: flex;
  256. font-size: 0.9rem;
  257. -webkit-box-shadow: 1px 1px 4px 1px #cfcfcf;
  258. box-shadow: 1px 1px 4px 1px #cfcfcf;
  259. background-color: white;
  260. }
  261. .historyList-link {
  262. text-decoration: none;
  263. color: #494949;
  264. }
  265. .historyList-link:hover {
  266. color: #7c7c7c;
  267. }
  268. .listimg__fr {
  269. width: 50px;
  270. height: 50px;
  271. border-radius: 50%;
  272. overflow: hidden;
  273. margin: auto 0.5rem;
  274. }
  275. .listimg__fr img {
  276. width: 100%;
  277. height: 100%;
  278. }
  279. .content {
  280. width: calc(100% - 250px);
  281. }
  282. /*form styles*/
  283. #msform {
  284. max-width: 1000px;
  285. min-width: 370px;
  286. margin: 50px auto;
  287. margin-bottom: 20px;
  288. text-align: center;
  289. position: relative;
  290. }
  291. #msform fieldset {
  292. background: white;
  293. border: 0 none;
  294. border-radius: 3px;
  295. -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  296. box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  297. padding: 20px 30px;
  298. -webkit-box-sizing: border-box;
  299. box-sizing: border-box;
  300. width: 80%;
  301. margin: 3rem 10%;
  302. /*stacking fieldsets above each other*/
  303. position: relative;
  304. }
  305. @media screen and (max-width: 767px) {
  306. #msform fieldset {
  307. width: 90%;
  308. margin: 3rem auto;
  309. padding: 10px 15px;
  310. }
  311. }
  312. /*Hide all except first fieldset*/
  313. /*inputs*/
  314. #msform input[type="text"],
  315. #msform textarea,
  316. #msform input[type="email"] {
  317. padding: 15px;
  318. border: 1px solid #ccc;
  319. border-radius: 3px;
  320. margin-bottom: 16px;
  321. width: 100%;
  322. -webkit-box-sizing: border-box;
  323. box-sizing: border-box;
  324. font-family: montserrat;
  325. color: #2c3e50;
  326. font-size: 14px;
  327. }
  328. #msform input[type="text"],
  329. #msform textarea,
  330. #msform input[type="email"] {
  331. padding: 15px;
  332. border: 1px solid #ccc;
  333. border-radius: 3px;
  334. margin-bottom: 16px;
  335. width: 100%;
  336. -webkit-box-sizing: border-box;
  337. box-sizing: border-box;
  338. font-family: montserrat;
  339. color: #2c3e50;
  340. font-size: 14px;
  341. }
  342. #msform .img-inputTest input[type="text"],
  343. #msform .img-inputTest textarea,
  344. #msform .img-inputTest input[type="email"] {
  345. width: 80%;
  346. }
  347. /*buttons*/
  348. #msform .action-button {
  349. width: 100px;
  350. background: #1c7ce0;
  351. font-weight: bold;
  352. color: white;
  353. border: 0 none;
  354. border-radius: 1px;
  355. cursor: pointer;
  356. padding: 10px 5px;
  357. margin: 10px auto;
  358. display: block;
  359. }
  360. #msform .action-button:hover,
  361. #msform .action-button:focus {
  362. -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
  363. box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
  364. }
  365. #msform .next[disabled] {
  366. background-color: grey;
  367. }
  368. #msform .sender[disabled] {
  369. background-color: grey;
  370. }
  371. .draft-btn {
  372. padding: 10px 5px;
  373. background-color: #d1d1d1;
  374. display: inline-block;
  375. position: absolute;
  376. left: 1rem;
  377. bottom: 1rem;
  378. font-size: 1rem;
  379. -webkit-transition: all 0.3s;
  380. transition: all 0.3s;
  381. cursor: pointer;
  382. }
  383. .draft-btn:hover {
  384. background-color: #aaaaaa;
  385. }
  386. /*headings*/
  387. .fs-title {
  388. font-size: 15px;
  389. text-transform: uppercase;
  390. color: #2c3e50;
  391. margin-bottom: 10px;
  392. }
  393. .fs-subtitle {
  394. display: inline-block;
  395. font-weight: normal;
  396. font-size: 18px;
  397. color: #666;
  398. margin-bottom: 20px;
  399. padding-bottom: 3px;
  400. border-bottom: 2px solid #1c7ce0;
  401. margin-left: 2rem;
  402. margin-right: 2rem;
  403. }
  404. .fs-label {
  405. display: block;
  406. text-align: left;
  407. margin-bottom: 8px;
  408. }
  409. .fs-label > i {
  410. margin-right: 3px;
  411. }
  412. /*progressbar*/
  413. #progressbar {
  414. margin-bottom: 30px;
  415. overflow: hidden;
  416. /*CSS counters to number the steps*/
  417. counter-reset: step;
  418. }
  419. #progressbar li {
  420. list-style-type: none;
  421. color: black;
  422. text-transform: uppercase;
  423. font-size: 12px;
  424. width: 33.33%;
  425. float: left;
  426. position: relative;
  427. }
  428. #progressbar li:before {
  429. content: counter(step);
  430. counter-increment: step;
  431. width: 20px;
  432. line-height: 20px;
  433. display: block;
  434. font-size: 12px;
  435. color: #333;
  436. background: white;
  437. border-radius: 3px;
  438. margin: 0 auto 5px auto;
  439. }
  440. /*progressbar connectors*/
  441. #progressbar li:after {
  442. content: "";
  443. width: 100%;
  444. height: 2px;
  445. background: white;
  446. position: absolute;
  447. left: -50%;
  448. top: 9px;
  449. z-index: -1;
  450. /*put it behind the numbers*/
  451. }
  452. #progressbar li:first-child:after {
  453. /*connector not needed before the first step*/
  454. content: none;
  455. }
  456. /*marking active/completed steps green*/
  457. /*The number of the step and the connector before it = green*/
  458. #progressbar li.active:before,
  459. #progressbar li.active:after {
  460. background: #27ae60;
  461. color: white;
  462. }
  463. p.error-text {
  464. bottom: -23px;
  465. left: 24px;
  466. color: rgba(255, 0, 0, 0.7);
  467. font-size: 0.8em;
  468. margin-bottom: 0;
  469. }
  470. #term-error {
  471. color: rgba(255, 0, 0, 0.7);
  472. font-size: 0.8em;
  473. bottom: -23px;
  474. left: 24px;
  475. }
  476. select {
  477. padding: 15px;
  478. border: 1px solid #ccc;
  479. border-radius: 3px;
  480. margin-bottom: 10px;
  481. width: 100%;
  482. -webkit-box-sizing: border-box;
  483. box-sizing: border-box;
  484. font-family: montserrat;
  485. color: #2c3e50;
  486. font-size: 13px;
  487. background-color: transparent;
  488. }
  489. .pl-0 {
  490. padding-left: 0;
  491. }
  492. .terms {
  493. font-size: 0.9rem;
  494. width: 95%;
  495. min-width: 250px;
  496. height: auto;
  497. overflow: scroll;
  498. margin-bottom: 1rem;
  499. margin-left: auto;
  500. margin-right: auto;
  501. border: 1px solid #a3a3a3;
  502. line-height: 1.5rem;
  503. }
  504. .term-link a {
  505. text-decoration: none;
  506. color: black;
  507. }
  508. .h2 {
  509. text-align: center;
  510. font-size: 1.2rem;
  511. font-weight: 500;
  512. margin-top: 2rem;
  513. }
  514. .left_align {
  515. font-size: 18px;
  516. text-align: left;
  517. }
  518. #overlay {
  519. position: fixed;
  520. /* Sit on top of the page content */
  521. display: none;
  522. width: 100%;
  523. height: 100%;
  524. top: 0;
  525. left: 0;
  526. right: 0;
  527. bottom: 0;
  528. background-color: rgba(0, 0, 0, 0.5);
  529. z-index: 2;
  530. cursor: pointer;
  531. }
  532. .thankyou {
  533. margin: auto;
  534. min-width: 350px;
  535. height: 250px;
  536. margin-top: 190px;
  537. background: #fff;
  538. padding: 15px 20px;
  539. line-height: 25px;
  540. border-radius: 4px;
  541. text-align: center;
  542. }
  543. .thankyou input {
  544. margin-top: 40px;
  545. }
  546. .thankyou h3 {
  547. font-size: 2rem;
  548. font-weight: 700;
  549. color: #21ba45;
  550. line-height: 2.5rem;
  551. margin-bottom: 1.5rem;
  552. }
  553. .check_button {
  554. display: none;
  555. }
  556. .fs-label-type {
  557. background: transparent;
  558. padding: 5px;
  559. border: 1px solid black;
  560. border-radius: 5px;
  561. display: inline-block;
  562. }
  563. .check_button:checked + .fs-label-type {
  564. background-color: #27ae60;
  565. color: white;
  566. padding: 5px;
  567. border: 1px solid #27ae60;
  568. border-radius: 5px;
  569. }
  570. #checker1,
  571. #checker2 {
  572. display: inline;
  573. }
  574. .fs-label-info {
  575. background: transparent;
  576. padding: 5px;
  577. border: 1px solid black;
  578. border-radius: 5px;
  579. display: inline-block;
  580. margin-bottom: 8px;
  581. }
  582. input[type="radio"] {
  583. display: none;
  584. }
  585. input[type="radio"]:checked + .fs-label-info {
  586. background-color: #27ae60;
  587. color: white;
  588. padding: 5px;
  589. border: 1px solid #27ae60;
  590. border-radius: 5px;
  591. }
  592. input[type="checkbox"]:checked + .fs-label-info {
  593. background-color: #27ae60;
  594. color: white;
  595. padding: 5px;
  596. border: 1px solid #27ae60;
  597. border-radius: 5px;
  598. }
  599. .btn-exit {
  600. padding: 0.5rem 0.75rem;
  601. background-color: transparent;
  602. border: 1px solid black;
  603. margin-top: 0.3rem;
  604. }
  605. .btn-term-exit {
  606. padding: 0.5rem 0.75rem;
  607. background-color: transparent;
  608. border: 1px solid black;
  609. margin-top: 0.3rem;
  610. display: block;
  611. margin-left: auto;
  612. margin-right: auto;
  613. margin-bottom: 2rem;
  614. }
  615. footer {
  616. padding: 2rem;
  617. padding-top: 0.5rem;
  618. }
  619. .footer {
  620. display: -webkit-box;
  621. display: -ms-flexbox;
  622. display: flex;
  623. -webkit-box-pack: center;
  624. -ms-flex-pack: center;
  625. justify-content: center;
  626. }
  627. .img_fr {
  628. width: 80%;
  629. max-width: 850px;
  630. min-width: 300px;
  631. height: 60px;
  632. -o-object-fit: contain;
  633. object-fit: contain;
  634. -o-object-position: center;
  635. object-position: center;
  636. }
  637. .img_fr img {
  638. width: 100%;
  639. height: 90%;
  640. }
  641. #msform #userid,
  642. #msform #area {
  643. height: 0;
  644. padding: 0;
  645. margin: 0;
  646. border: none;
  647. }
  648. #msform input[type="text"].error {
  649. border-color: red;
  650. }
  651. .modal-header {
  652. border-bottom: none;
  653. }
  654. .btn-dismiss {
  655. background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
  656. background: linear-gradient(90deg, #0162c8, #55e7fc);
  657. font-weight: bold;
  658. color: white;
  659. border: 0 none;
  660. border-radius: 20px;
  661. cursor: pointer;
  662. padding: 10px 35px;
  663. margin: 10px auto;
  664. display: block;
  665. }
  666. #avatarmega .modal-content {
  667. background-color: transparent;
  668. border: none;
  669. }
  670. #avatarmega .modal-title {
  671. color: white;
  672. }
  673. #avatarmega .modal-header {
  674. position: absolute;
  675. top: -0.5rem;
  676. right: 1.5rem;
  677. }
  678. .linker__box {
  679. padding: 0.5rem 1rem;
  680. border-radius: 1rem;
  681. -webkit-box-shadow: 1px 1px 5px 1px #c9c9c9;
  682. box-shadow: 1px 1px 5px 1px #c9c9c9;
  683. width: -webkit-max-content;
  684. width: -moz-max-content;
  685. width: max-content;
  686. margin: 0 auto;
  687. display: none;
  688. }
  689. .linker__box p {
  690. margin-bottom: 0;
  691. color: gray;
  692. }
  693. .linker__box i {
  694. color: gray;
  695. position: relative;
  696. }
  697. .linker__box i::after {
  698. position: absolute;
  699. content: " ";
  700. right: -5px;
  701. top: -10%;
  702. border-right: 2px solid #a3a3a3;
  703. width: 1px;
  704. height: 120%;
  705. }
  706. .item_imgfr {
  707. width: 15%;
  708. height: 50px;
  709. border-radius: 50%;
  710. overflow: hidden;
  711. margin: auto 0.5rem;
  712. }
  713. .item_imgfr img {
  714. height: 100%;
  715. width: 100%;
  716. }
  717. .content-box {
  718. width: 75%;
  719. }
  720. .box-title {
  721. margin-bottom: 0.2rem;
  722. cursor: pointer;
  723. }
  724. .box-title:hover {
  725. color: grey;
  726. text-decoration: underline;
  727. }
  728. .box-link {
  729. cursor: pointer;
  730. }
  731. .img_uploader {
  732. display: none;
  733. }
  734. #msform input[type="text"].imgsrc {
  735. width: 80%;
  736. }
  737. .upload-btn {
  738. display: inline-block;
  739. width: 6rem;
  740. background-color: #75a7dd;
  741. color: white;
  742. padding: 0.4rem 0.5rem;
  743. font-size: 0.9rem;
  744. border-radius: 3px;
  745. -webkit-transition: all 0.3s;
  746. transition: all 0.3s;
  747. cursor: pointer;
  748. }
  749. #msform .input-sec {
  750. position: relative;
  751. }
  752. #msform .img-inputTest .upload-btn {
  753. display: inline-block;
  754. position: absolute;
  755. left: 0;
  756. top: 0;
  757. width: 20%;
  758. height: 100%;
  759. background-color: #75a7dd;
  760. background-position: center;
  761. background-size: cover;
  762. background-image: url(../img/upload_img.png);
  763. color: white;
  764. padding: 0.4rem 0.5rem;
  765. font-size: 0.9rem;
  766. -webkit-transition: all 0.3s;
  767. transition: all 0.3s;
  768. cursor: pointer;
  769. border-radius: 0;
  770. }
  771. .upload-btn img {
  772. width: 30px;
  773. height: 30px;
  774. }
  775. .upload-btn:hover {
  776. background-color: #3b86d6;
  777. }
  778. .add,
  779. .add-subline,
  780. .addimg,
  781. .addsec {
  782. cursor: pointer;
  783. display: inline-block;
  784. width: 2rem;
  785. height: 2rem;
  786. background-color: #67abf3;
  787. font-size: 1.2rem;
  788. color: white;
  789. border-radius: 50%;
  790. -webkit-transition: all 0.3s;
  791. transition: all 0.3s;
  792. }
  793. .add:hover,
  794. .add-subline:hover,
  795. .addimg:hover,
  796. .addsec:hover {
  797. background-color: #398ee9;
  798. }
  799. body {
  800. font-family: "Lato", sans-serif;
  801. }
  802. .avatar-checkbox {
  803. display: none;
  804. }
  805. #mySidenav::-webkit-scrollbar-track {
  806. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  807. border-radius: 10px;
  808. background-color: #f5f5f5;
  809. }
  810. #mySidenav::-webkit-scrollbar {
  811. width: 12px;
  812. background-color: #f5f5f5;
  813. display: none;
  814. }
  815. #mySidenav::-webkit-scrollbar:hover {
  816. display: block;
  817. }
  818. #mySidenav::-webkit-scrollbar-thumb {
  819. border-radius: 10px;
  820. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  821. background-color: #aaa;
  822. }
  823. .sidenav a {
  824. text-decoration: none;
  825. font-size: 25px;
  826. color: #818181;
  827. display: block;
  828. -webkit-transition: 0.3s;
  829. transition: 0.3s;
  830. }
  831. .sidenav a:hover {
  832. color: #f1f1f1;
  833. }
  834. .sidenav .closebtn {
  835. position: absolute;
  836. top: 0;
  837. right: 25px;
  838. font-size: 36px;
  839. margin-left: 50px;
  840. }
  841. @media screen and (max-width: 576px) {
  842. #msform input[type="text"].imgsrc,
  843. #msform input[type="text"].txtsrc,
  844. #msform input[type="text"].subsrc {
  845. width: 100%;
  846. }
  847. #msform .input-sec > input[type="text"]:nth-of-type(1) {
  848. margin-top: 77%;
  849. }
  850. #msform .input_eng .input-sec > input[type="text"]:nth-of-type(1) {
  851. margin-top: 80%;
  852. }
  853. #msform .input-sec .upload-btn {
  854. width: 100%;
  855. height: 60%;
  856. }
  857. #msform .input_eng .input-sec .upload-btn {
  858. height: 45%;
  859. }
  860. }
  861. .container-login {
  862. width: 100vw;
  863. height: 100vh;
  864. display: -ms-grid;
  865. display: grid;
  866. -ms-grid-columns: (1fr)[2];
  867. grid-template-columns: repeat(2, 1fr);
  868. grid-gap: 7rem;
  869. padding: 0rem;
  870. }
  871. .navbar-nav button {
  872. background: white;
  873. border: none;
  874. outline: none;
  875. }
  876. .img-wave {
  877. position: fixed;
  878. bottom: 0;
  879. left: 0;
  880. height: 100%;
  881. z-index: -1;
  882. }
  883. .img-wave-profile {
  884. height: 80%;
  885. }
  886. .row-img {
  887. position: relative;
  888. display: -webkit-box;
  889. display: -ms-flexbox;
  890. display: flex;
  891. -webkit-box-pack: center;
  892. -ms-flex-pack: center;
  893. justify-content: center;
  894. -webkit-box-align: center;
  895. -ms-flex-align: center;
  896. align-items: center;
  897. background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(16, 68, 142, 0.7)), to(rgba(16, 68, 142, 0.7)));
  898. background-image: linear-gradient(to right bottom, rgba(16, 68, 142, 0.7), rgba(16, 68, 142, 0.7));
  899. background-size: cover;
  900. background-position: center;
  901. overflow: hidden;
  902. }
  903. .row-img .video {
  904. height: 100%;
  905. z-index: -1;
  906. position: absolute;
  907. left: -10%;
  908. top: 0;
  909. }
  910. .row-img .row-img-box {
  911. color: white;
  912. }
  913. .row-img .row-img-txt {
  914. position: absolute;
  915. bottom: 2rem;
  916. color: white;
  917. left: 2rem;
  918. font-size: 1.3rem;
  919. }
  920. .row-login {
  921. display: -webkit-box;
  922. display: -ms-flexbox;
  923. display: flex;
  924. -webkit-box-pack: start;
  925. -ms-flex-pack: start;
  926. justify-content: flex-start;
  927. -webkit-box-align: center;
  928. -ms-flex-align: center;
  929. align-items: center;
  930. text-align: center;
  931. position: relative;
  932. }
  933. @media screen and (max-width: 767px) {
  934. .row-login {
  935. -webkit-box-align: start;
  936. -ms-flex-align: start;
  937. align-items: start;
  938. margin-top: 50px;
  939. }
  940. }
  941. .row-login .title {
  942. position: relative;
  943. color: #052859;
  944. }
  945. .row-login .title::after {
  946. position: absolute;
  947. content: "";
  948. left: 45%;
  949. top: 20%;
  950. width: 10%;
  951. height: 100%;
  952. border-bottom: 4px solid #052859;
  953. }
  954. .row-login .login-top {
  955. position: absolute;
  956. right: 1rem;
  957. top: 1rem;
  958. }
  959. .row-login .login-top .navbar-nav {
  960. -webkit-box-orient: horizontal;
  961. -webkit-box-direction: normal;
  962. -ms-flex-direction: row;
  963. flex-direction: row;
  964. }
  965. .row-login .login-top .navbar-nav .nav-item {
  966. margin: 0 0.5rem;
  967. }
  968. .row-login .login-top .navbar-nav .nav-item a {
  969. color: black;
  970. }
  971. .btn-deleteSec {
  972. background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
  973. background: linear-gradient(90deg, #0162c8, #55e7fc);
  974. color: white;
  975. border: none;
  976. outline: none;
  977. }
  978. .btn-deleteSec:hover {
  979. color: white;
  980. }
  981. .login-content {
  982. width: 80%;
  983. min-width: 350px;
  984. -webkit-box-shadow: 0 0 12px 5px #dddddd;
  985. box-shadow: 0 0 12px 5px #dddddd;
  986. padding: 1.5rem;
  987. border-radius: 2rem;
  988. }
  989. .link_privacy {
  990. color: black;
  991. }
  992. .login-content img {
  993. height: 80px;
  994. }
  995. .row-img img {
  996. width: 450px;
  997. }
  998. .login-content .form-floating input {
  999. border: none;
  1000. border-bottom: 2px solid #d9d9d9;
  1001. border-radius: 0;
  1002. }
  1003. .login-content .form-floating input:focus {
  1004. -webkit-box-shadow: none;
  1005. box-shadow: none;
  1006. }
  1007. .login-content #btn_login {
  1008. background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
  1009. background: linear-gradient(90deg, #0162c8, #55e7fc);
  1010. font-weight: bold;
  1011. color: white;
  1012. border: 0 none;
  1013. border-radius: 40px;
  1014. cursor: pointer;
  1015. padding: 10px 50px;
  1016. margin: 10px auto;
  1017. display: block;
  1018. }
  1019. .login-content #btn_login:hover {
  1020. -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
  1021. box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
  1022. }
  1023. .login-content .btn-register {
  1024. background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
  1025. background: linear-gradient(90deg, #0162c8, #55e7fc);
  1026. font-weight: bold;
  1027. color: white;
  1028. border: 0 none;
  1029. border-radius: 40px;
  1030. cursor: pointer;
  1031. padding: 10px 50px;
  1032. margin: 10px auto;
  1033. display: block;
  1034. }
  1035. .login-content .btn-register:hover {
  1036. -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
  1037. box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
  1038. }
  1039. .login-content .nav-tabs {
  1040. border-bottom: none;
  1041. }
  1042. .login-content .nav {
  1043. -webkit-box-orient: vertical;
  1044. -webkit-box-direction: normal;
  1045. -ms-flex-direction: column;
  1046. flex-direction: column;
  1047. -webkit-box-align: center;
  1048. -ms-flex-align: center;
  1049. align-items: center;
  1050. }
  1051. .login-content .nav-tabs .nav-link {
  1052. color: grey;
  1053. }
  1054. .login-content .nav-tabs .nav-link.active {
  1055. border-color: #fff;
  1056. text-transform: uppercase;
  1057. color: black;
  1058. }
  1059. .navbar .btn-gocreate {
  1060. background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
  1061. background: linear-gradient(90deg, #0162c8, #55e7fc);
  1062. color: white;
  1063. border: 0 none;
  1064. border-radius: 40px;
  1065. cursor: pointer;
  1066. padding: 10px 50px;
  1067. }
  1068. .container-bg {
  1069. position: absolute;
  1070. width: 600px;
  1071. height: 400px;
  1072. right: 0;
  1073. bottom: 0;
  1074. z-index: -1;
  1075. }
  1076. .container-profile .card-profile {
  1077. margin-top: 4rem;
  1078. border-radius: 10px;
  1079. padding: 2rem;
  1080. text-align: center;
  1081. -webkit-box-shadow: 0px 0px 20px 1px #b4b4b4;
  1082. box-shadow: 0px 0px 20px 1px #b4b4b4;
  1083. }
  1084. .container-profile .card-profile img {
  1085. width: 120px;
  1086. margin: 1rem auto;
  1087. }
  1088. .card-profile-txt {
  1089. color: #6d6d6d;
  1090. font-size: 1.2rem;
  1091. font-weight: 500;
  1092. }
  1093. .card-profile-cnt {
  1094. font-size: 1.5rem;
  1095. font-weight: 700;
  1096. }
  1097. @media screen and (max-width: 900px) {
  1098. .container-login {
  1099. -ms-grid-columns: 1fr;
  1100. grid-template-columns: 1fr;
  1101. }
  1102. .row-img {
  1103. display: none;
  1104. }
  1105. .img-wave {
  1106. display: none;
  1107. }
  1108. .row-login {
  1109. -webkit-box-pack: center;
  1110. -ms-flex-pack: center;
  1111. justify-content: center;
  1112. }
  1113. .container-bg {
  1114. width: 400px;
  1115. height: 300px;
  1116. right: 0;
  1117. bottom: 0;
  1118. }
  1119. }
  1120. .psd_visible,
  1121. .psd_invisible {
  1122. right: 0.5rem;
  1123. top: 50%;
  1124. -webkit-transform: translateY(-50%);
  1125. transform: translateY(-50%);
  1126. }
  1127. .register__policies {
  1128. font-size: 12px;
  1129. color: gray;
  1130. }
  1131. @media screen and (max-height: 450px) {
  1132. .sidenav {
  1133. padding-top: 15px;
  1134. }
  1135. .sidenav a {
  1136. font-size: 18px;
  1137. }
  1138. }
  1139. /* Pricing */
  1140. @media screen and (max-width: 767px) {
  1141. #pricing-nav {
  1142. display: none;
  1143. }
  1144. }
  1145. .pricingTable {
  1146. background: #fff;
  1147. font-family: "Open Sans", sans-serif;
  1148. text-align: center;
  1149. padding: 30px 15px 15px;
  1150. border-radius: 25px;
  1151. overflow: hidden;
  1152. position: relative;
  1153. z-index: 1;
  1154. }
  1155. .pricingTable:before,
  1156. .pricingTable:after {
  1157. content: "";
  1158. background: linear-gradient(-45deg, #5a98fb, #5a98fb, #3f64fa, #3f64fa);
  1159. height: 170px;
  1160. width: 150%;
  1161. outline: 5px solid #fff;
  1162. outline-offset: -10px;
  1163. opacity: 0.9;
  1164. -webkit-transform: translateX(-50%) rotate(7deg);
  1165. transform: translateX(-50%) rotate(7deg);
  1166. position: absolute;
  1167. left: 50%;
  1168. top: -65px;
  1169. z-index: -1;
  1170. }
  1171. .pricingTable:after {
  1172. height: 250px;
  1173. -webkit-transform: translateX(-50%) rotate(-20deg) rotateX(180deg);
  1174. transform: translateX(-50%) rotate(-20deg) rotateX(180deg);
  1175. top: auto;
  1176. bottom: -150px;
  1177. }
  1178. .pricingTable .pricingTable-header {
  1179. color: #fff;
  1180. margin: 0 0 75px;
  1181. }
  1182. .pricingTable .title {
  1183. font-size: 40px;
  1184. font-weight: 700;
  1185. text-transform: uppercase;
  1186. letter-spacing: 1px;
  1187. margin: 0;
  1188. }
  1189. @media screen and (max-width: 767px) {
  1190. .pricingTable .title {
  1191. font-size: 30px;
  1192. }
  1193. }
  1194. .pricingTable .pricing-content {
  1195. text-align: left;
  1196. padding: 0;
  1197. margin: 0 0 10px;
  1198. display: inline-block;
  1199. }
  1200. .pricingTable .pricing-content li {
  1201. color: #333;
  1202. font-size: 17px;
  1203. font-weight: 500;
  1204. line-height: 22px;
  1205. text-transform: uppercase;
  1206. padding: 0 40px 0 0;
  1207. margin: 0 0 15px;
  1208. list-style-position: inside;
  1209. position: relative;
  1210. }
  1211. .pricingTable .pricing-content li:after {
  1212. content: "\f00c";
  1213. color: #e58e26;
  1214. font-family: "Font Awesome 5 Free";
  1215. font-size: 18px;
  1216. font-weight: 900;
  1217. position: absolute;
  1218. top: 0;
  1219. right: 0;
  1220. }
  1221. .pricingTable .pricing-content li.disable:after {
  1222. content: "\f00d";
  1223. }
  1224. .pricingTable .price-value {
  1225. margin: 0 0 15px;
  1226. }
  1227. .pricingTable .price-title {
  1228. color: #c70039;
  1229. font-size: 30px;
  1230. text-align: left;
  1231. text-transform: uppercase;
  1232. line-height: 30px;
  1233. width: calc(100% - 130px);
  1234. padding: 15px 0 0;
  1235. display: inline-block;
  1236. }
  1237. .pricingTable .price-title b {
  1238. display: block;
  1239. }
  1240. .pricingTable .price-amount {
  1241. color: #3f64fa;
  1242. background: #fff;
  1243. font-size: 30px;
  1244. font-weight: 700;
  1245. line-height: 30px;
  1246. width: 120px;
  1247. height: 120px;
  1248. padding: 33px 10px 10px;
  1249. display: inline-block;
  1250. vertical-align: top;
  1251. -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
  1252. clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
  1253. position: relative;
  1254. z-index: 1;
  1255. }
  1256. .pricingTable .price-amount:before,
  1257. .pricingTable .price-amount:after {
  1258. content: "";
  1259. background: linear-gradient(-45deg, #5a98fb, #5a98fb, #3f64fa, #3f64fa);
  1260. width: calc(100% - 12px);
  1261. height: calc(100% - 12px);
  1262. -webkit-transform: translateX(-50%) translateY(-50%);
  1263. transform: translateX(-50%) translateY(-50%);
  1264. position: absolute;
  1265. top: 50%;
  1266. left: 50%;
  1267. z-index: -1;
  1268. -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
  1269. clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
  1270. }
  1271. .pricingTable .price-amount:after {
  1272. background: #fff;
  1273. width: calc(100% - 16px);
  1274. height: calc(100% - 16px);
  1275. }
  1276. .pricingTable .price-amount .duration {
  1277. font-size: 16px;
  1278. font-weight: 600;
  1279. text-transform: capitalize;
  1280. display: block;
  1281. }
  1282. .pricingTable .pricingTable-signup a {
  1283. color: #fff;
  1284. font-size: 20px;
  1285. font-weight: 700;
  1286. letter-spacing: 2px;
  1287. text-transform: uppercase;
  1288. padding: 10px 20px;
  1289. border: 2px solid #fff;
  1290. border-radius: 50px;
  1291. display: inline-block;
  1292. -webkit-transition: all 0.3s;
  1293. transition: all 0.3s;
  1294. }
  1295. .pricingTable .pricingTable-signup a:hover {
  1296. text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
  1297. -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
  1298. box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
  1299. }
  1300. .pricingTable.green:before,
  1301. .pricingTable.green:after,
  1302. .pricingTable.green .price-amount:before {
  1303. background: linear-gradient(-45deg, #76d243, #76d243, #109739, #109739);
  1304. }
  1305. .pricingTable.green .price-amount {
  1306. color: #109739;
  1307. }
  1308. .pricingTable.pink:before,
  1309. .pricingTable.pink:after,
  1310. .pricingTable.pink .price-amount:before {
  1311. background: linear-gradient(-45deg, #e969a6, #e969a6, #ed2e96, #ed2e96);
  1312. }
  1313. .pricingTable.pink .price-amount {
  1314. color: #ed2e96;
  1315. }
  1316. @media only screen and (max-width: 990px) {
  1317. .pricingTable {
  1318. margin: 0 0 40px;
  1319. }
  1320. }
  1321. @media screen and (max-width: 767px) {
  1322. .profile-bgimg {
  1323. width: 100%;
  1324. height: 300px;
  1325. -o-object-fit: cover;
  1326. object-fit: cover;
  1327. display: none;
  1328. }
  1329. }
  1330. @media screen and (min-width: 1025px) {
  1331. .profile-bgimg-m {
  1332. display: none;
  1333. }
  1334. }
  1335. .navbar {
  1336. background: none !important;
  1337. }
  1338. .arrowdoup {
  1339. -webkit-transform: rotate(180deg);
  1340. transform: rotate(180deg);
  1341. }
  1342. .arrowdown {
  1343. cursor: pointer;
  1344. }
  1345. .userprofile {
  1346. position: relative;
  1347. top: -80px;
  1348. z-index: 20;
  1349. }
  1350. @media screen and (max-width: 767px) {
  1351. .userprofile {
  1352. top: 10px;
  1353. z-index: 0;
  1354. }
  1355. }
  1356. .userprofile .userprofile-content {
  1357. width: 83vw;
  1358. }
  1359. @media screen and (max-width: 767px) {
  1360. .userprofile .userprofile-content {
  1361. width: 95vw;
  1362. }
  1363. }
  1364. .userprofile .userprofile-content .user-information .information {
  1365. width: 50%;
  1366. margin: 0 auto;
  1367. }
  1368. @media screen and (max-width: 767px) {
  1369. .userprofile .userprofile-content .user-information .information {
  1370. width: 100%;
  1371. }
  1372. }
  1373. .userprofile .userprofile-content .user-information .information h1 {
  1374. color: #707070;
  1375. font-size: 56px;
  1376. }
  1377. .userprofile .userprofile-content .user-information .information .share {
  1378. font-size: 16px;
  1379. }
  1380. @media screen and (max-width: 767px) {
  1381. .userprofile .userprofile-content .user-information .information .share .facebook {
  1382. left: 15px;
  1383. top: 1px;
  1384. }
  1385. }
  1386. .userprofile .userprofile-content .user-information .information .share a {
  1387. text-decoration: none;
  1388. color: #183790;
  1389. }
  1390. .userprofile .userprofile-content .user-information .card {
  1391. -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  1392. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  1393. border-radius: 15px;
  1394. }
  1395. .userprofile .userprofile-content .user-information .check-history {
  1396. cursor: pointer;
  1397. }
  1398. .userprofile .userprofile-content .user-information .historical-record th {
  1399. border-bottom: none !important;
  1400. color: #183790;
  1401. font-weight: 900;
  1402. }
  1403. .userprofile .userprofile-content .user-information .historical-record td {
  1404. font-size: 15px;
  1405. }
  1406. .userprofile .userprofile-content .user-information .draft {
  1407. color: #183790;
  1408. font-weight: 900;
  1409. }
  1410. .userprofile .userprofile-content .user-information .draft-table th {
  1411. border-bottom: none !important;
  1412. color: #183790;
  1413. font-weight: 900;
  1414. }
  1415. .userprofile .userprofile-content .user-information .draft-table .draft-content-icon {
  1416. cursor: pointer;
  1417. }
  1418. .userprofile .userprofile-content .user-information .share .form-control:hover,
  1419. .userprofile .userprofile-content .user-information .share .form-control:focus,
  1420. .userprofile .userprofile-content .user-information .share .form-control:active {
  1421. outline: none !important;
  1422. -webkit-box-shadow: none;
  1423. box-shadow: none;
  1424. }
  1425. .userprofile .userprofile-content .user-information .share .btn:hover,
  1426. .userprofile .userprofile-content .user-information .share .btn:focus,
  1427. .userprofile .userprofile-content .user-information .share .btn:active {
  1428. outline: none !important;
  1429. -webkit-box-shadow: none;
  1430. box-shadow: none;
  1431. }
  1432. .draft-table th {
  1433. border-bottom: none !important;
  1434. color: #183790;
  1435. font-weight: 900;
  1436. }
  1437. .draft-table .draft-content-icon {
  1438. cursor: pointer;
  1439. }
  1440. #draftModal .draft-table {
  1441. font-size: .9rem;
  1442. }
  1443. .sidenav {
  1444. width: 250px;
  1445. position: fixed;
  1446. height: 100%;
  1447. z-index: 50;
  1448. top: 0;
  1449. overflow-x: hidden;
  1450. -webkit-transition: 0.5s;
  1451. transition: 0.5s;
  1452. text-align: center;
  1453. background: -webkit-gradient(linear, left top, left bottom, from(#1c7ce0), to(#150051));
  1454. background: linear-gradient(to bottom, #1c7ce0, #150051);
  1455. }
  1456. @media screen and (min-width: 1025px) {
  1457. .sidenav {
  1458. left: 0;
  1459. }
  1460. }
  1461. @media screen and (max-width: 767px) {
  1462. .sidenav {
  1463. display: none;
  1464. right: 0px;
  1465. }
  1466. }
  1467. @media screen and (min-width: 1025px) {
  1468. .sidenav .sidenav-content .close-btn {
  1469. display: none;
  1470. }
  1471. }
  1472. @media screen and (min-width: 1025px) {
  1473. .sidenav .sidenav-content .Mobile-nav {
  1474. display: none;
  1475. }
  1476. }
  1477. @media screen and (max-width: 767px) {
  1478. .sidenav .sidenav-content .choozmologo {
  1479. margin-top: 10px;
  1480. }
  1481. }
  1482. .sidenav .sidenav-content .reply {
  1483. margin-left: 70px;
  1484. }
  1485. @media screen and (min-width: 1025px) {
  1486. .sidenav .sidenav-content .reply {
  1487. display: none;
  1488. }
  1489. }
  1490. .sidenav hr {
  1491. background: #fff;
  1492. opacity: 1 !important;
  1493. height: 1px;
  1494. width: 85%;
  1495. margin: 15px auto;
  1496. }
  1497. .sidenav .sidebar {
  1498. width: 80%;
  1499. margin: 0 auto;
  1500. }
  1501. .sidenav .user {
  1502. -o-object-fit: cover;
  1503. object-fit: cover;
  1504. width: 8vw;
  1505. }
  1506. @media screen and (max-width: 767px) {
  1507. .sidenav .user {
  1508. width: 20vw;
  1509. }
  1510. }
  1511. .sidenav .user-name {
  1512. font-size: 1.5rem;
  1513. }
  1514. .sidenav .navbar-nav {
  1515. -webkit-box-orient: horizontal;
  1516. -webkit-box-direction: normal;
  1517. -ms-flex-direction: row;
  1518. flex-direction: row;
  1519. }
  1520. .sidenav .navbar-nav .btn-gocreate {
  1521. font-size: 1.7vmin;
  1522. background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
  1523. background: linear-gradient(90deg, #0162c8, #55e7fc);
  1524. color: white;
  1525. border: 0 none;
  1526. border-radius: 10px;
  1527. cursor: pointer;
  1528. margin: 10px 3px;
  1529. display: inline;
  1530. }
  1531. @media screen and (max-width: 767px) {
  1532. .sidenav .navbar-nav .btn-gocreate {
  1533. font-size: 3.5vmin;
  1534. }
  1535. }
  1536. .sidenav .navbar-nav .active {
  1537. background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
  1538. background: linear-gradient(90deg, #0162c8, #55e7fc);
  1539. }
  1540. .sidenav a {
  1541. text-decoration: none;
  1542. font-size: 32px;
  1543. color: #f1f1f1;
  1544. display: block;
  1545. -webkit-transition: 0.3s;
  1546. transition: 0.3s;
  1547. }
  1548. .sidenav a:hover {
  1549. color: #818181;
  1550. }
  1551. .sidenav .sidenav .closebtn {
  1552. position: absolute;
  1553. top: 0;
  1554. right: 25px;
  1555. font-size: 36px;
  1556. margin-left: 50px;
  1557. }
  1558. .sidenav .nav-list {
  1559. color: white;
  1560. list-style: none;
  1561. text-align: center;
  1562. }
  1563. .sidenav .nav-list .nav-list-item {
  1564. font-size: 18px;
  1565. cursor: pointer;
  1566. position: relative;
  1567. }
  1568. .sidenav .nav-list .nav-list-item::after {
  1569. content: " ";
  1570. position: absolute;
  1571. width: 50%;
  1572. height: 100%;
  1573. left: 25%;
  1574. top: 5px;
  1575. border-bottom: 1px solid white;
  1576. opacity: 0;
  1577. -webkit-transition: all 0.4s;
  1578. transition: all 0.4s;
  1579. }
  1580. .sidenav .nav-list .nav-list-item:hover::after {
  1581. opacity: 1;
  1582. }
  1583. .sidenav .right-text {
  1584. padding-top: 150px;
  1585. color: #fff;
  1586. }
  1587. @media screen and (max-width: 767px) {
  1588. .sidenav .right-text {
  1589. padding-top: 50px;
  1590. }
  1591. }
  1592. .sidenav .right-text a {
  1593. font-size: 16px;
  1594. display: inline;
  1595. margin: 2px;
  1596. }
  1597. .sidenav .right-text a img {
  1598. -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
  1599. filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
  1600. }
  1601. @media only screen and (max-width: 1280px) {
  1602. .sidenav .right-text p {
  1603. font-size: 16px;
  1604. }
  1605. }
  1606. .index-banner {
  1607. width: 85vw;
  1608. margin: 0 auto;
  1609. margin-top: 50px;
  1610. }
  1611. @media screen and (max-width: 767px) {
  1612. .index-banner {
  1613. margin-top: 30px;
  1614. width: 100vw;
  1615. }
  1616. }
  1617. .index-banner .PC-img {
  1618. width: 100%;
  1619. }
  1620. @media screen and (max-width: 767px) {
  1621. .index-banner .PC-img {
  1622. margin-top: 30px;
  1623. width: 100vw;
  1624. }
  1625. }
  1626. .index-banner h1 {
  1627. font-size: 48px;
  1628. }
  1629. @media screen and (max-width: 767px) {
  1630. .index-banner h1 {
  1631. font-size: 36px;
  1632. text-align: center;
  1633. }
  1634. }
  1635. .index-banner p {
  1636. margin-top: 30px;
  1637. font-size: 24px;
  1638. width: 30vw;
  1639. }
  1640. @media screen and (max-width: 767px) {
  1641. .index-banner p {
  1642. width: 90vw;
  1643. font-size: 18px;
  1644. text-align: center;
  1645. margin: 0 auto;
  1646. }
  1647. }
  1648. .index-banner .index-CTA {
  1649. margin-top: 50px;
  1650. }
  1651. @media screen and (max-width: 767px) {
  1652. .index-banner .index-CTA {
  1653. margin-top: 30px;
  1654. text-align: center;
  1655. }
  1656. }
  1657. .index-banner .index-CTA .CTA-btnA {
  1658. margin-right: 10px;
  1659. }
  1660. .CTA-btnA {
  1661. text-decoration: none;
  1662. border-radius: 30px;
  1663. border: none;
  1664. padding: 10px;
  1665. background: #fff;
  1666. width: 200px;
  1667. color: #ea5413;
  1668. font-size: 24px;
  1669. }
  1670. @media screen and (max-width: 767px) {
  1671. .CTA-btnA {
  1672. margin: 10px;
  1673. }
  1674. }
  1675. .CTA-btnB {
  1676. text-decoration: none;
  1677. border-radius: 30px;
  1678. border: none;
  1679. padding: 10px;
  1680. background: #ea5413;
  1681. width: 200px;
  1682. color: #fff;
  1683. font-size: 24px;
  1684. }
  1685. @media screen and (max-width: 767px) {
  1686. .CTA-btnB {
  1687. margin: 10px;
  1688. }
  1689. }
  1690. .index-sec02 {
  1691. background: -webkit-gradient(linear, left bottom, left top, color-stop(80%, #d4daec), color-stop(80%, #fff));
  1692. background: linear-gradient(to top, #d4daec 80%, #fff 80% 100%);
  1693. padding-bottom: 50px;
  1694. }
  1695. @media screen and (max-width: 767px) {
  1696. .index-sec02 {
  1697. background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, #d4daec), color-stop(30%, #fff));
  1698. background: linear-gradient(to top, #d4daec 30%, #fff 30% 100%);
  1699. padding-bottom: 10px;
  1700. }
  1701. }
  1702. .index-sec02 .make-video {
  1703. width: 90vw;
  1704. margin: 0 auto;
  1705. }
  1706. .index-sec02 .make-video .makeVideo-text {
  1707. margin-top: 150px;
  1708. }
  1709. .index-sec02 .make-video .makeVideo-text h1 {
  1710. font-size: 48px;
  1711. color: #2a3863;
  1712. }
  1713. @media screen and (max-width: 767px) {
  1714. .index-sec02 .make-video .makeVideo-text h1 {
  1715. font-size: 36px;
  1716. text-align: center;
  1717. }
  1718. }
  1719. .index-sec02 .make-video .makeVideo-text p {
  1720. margin-top: 30px;
  1721. font-size: 24px;
  1722. color: #2a3863;
  1723. }
  1724. @media screen and (max-width: 767px) {
  1725. .index-sec02 .make-video .makeVideo-text p {
  1726. font-size: 18px;
  1727. text-align: center;
  1728. }
  1729. }
  1730. .sec-usecase {
  1731. margin-top: 100px;
  1732. margin-bottom: 100px;
  1733. }
  1734. .sec-usecase h1 {
  1735. text-align: center;
  1736. font-weight: 900;
  1737. font-size: 2rem;
  1738. color: #2a3863;
  1739. }
  1740. .sec-usecase hr {
  1741. width: 7vw;
  1742. height: 6px;
  1743. background: #2a3863;
  1744. opacity: 1 !important;
  1745. margin: 0 auto;
  1746. }
  1747. @media screen and (max-width: 767px) {
  1748. .sec-usecase hr {
  1749. width: 15vw;
  1750. }
  1751. }
  1752. .sec-usecase .usecase-block {
  1753. border: none;
  1754. position: relative;
  1755. background-color: transparent;
  1756. z-index: 1;
  1757. margin-top: 30px;
  1758. }
  1759. @media screen and (max-width: 767px) {
  1760. .sec-usecase .usecase-block {
  1761. margin-top: 15px;
  1762. }
  1763. }
  1764. .sec-usecase .usecase-block::after {
  1765. position: absolute;
  1766. bottom: 1rem;
  1767. left: 5%;
  1768. width: 90%;
  1769. height: 10rem;
  1770. background-color: #d4daec;
  1771. content: " ";
  1772. z-index: -1;
  1773. border-radius: 2rem;
  1774. margin-left: auto;
  1775. margin-right: auto;
  1776. }
  1777. @media screen and (max-width: 1281px) {
  1778. .sec-usecase .usecase-block::after {
  1779. bottom: 0rem;
  1780. }
  1781. }
  1782. @media screen and (max-width: 767px) {
  1783. .sec-usecase .usecase-block::after {
  1784. height: 7rem;
  1785. bottom: 3rem;
  1786. }
  1787. }
  1788. .sec-usecase .usecase-block .usecase-imgfr {
  1789. width: 80%;
  1790. margin: 0 auto;
  1791. height: 40vh;
  1792. background-position: center center;
  1793. background-size: contain;
  1794. background-repeat: no-repeat;
  1795. }
  1796. @media screen and (max-width: 767px) {
  1797. .sec-usecase .usecase-block .usecase-imgfr {
  1798. width: 80%;
  1799. }
  1800. }
  1801. .sec-usecase .usecase-block .usecase-sub {
  1802. background-color: transparent;
  1803. color: #193179;
  1804. position: relative;
  1805. bottom: 25px;
  1806. font-size: 1rem;
  1807. font-weight: 900;
  1808. }
  1809. @media screen and (max-width: 1281px) {
  1810. .sec-usecase .usecase-block .usecase-sub {
  1811. bottom: 5px;
  1812. }
  1813. }
  1814. @media screen and (max-width: 767px) {
  1815. .sec-usecase .usecase-block .usecase-sub {
  1816. bottom: 50px;
  1817. }
  1818. }
  1819. .sec-usecase .usecase-block .usecase-sub i {
  1820. color: #193179;
  1821. }
  1822. .indxe-CTA {
  1823. background: #f0f0f0;
  1824. }
  1825. .indxe-CTA h2 {
  1826. color: #ea5413;
  1827. }
  1828. .indxe-CTA .CTA-btnB {
  1829. text-decoration: none;
  1830. border-radius: 30px;
  1831. border: none;
  1832. padding: 10px;
  1833. background: #ea5413;
  1834. width: 200px;
  1835. color: #fff;
  1836. font-size: 24px;
  1837. }
  1838. .price-int {
  1839. padding: 8vw 0px;
  1840. }
  1841. @media screen and (max-width: 767px) {
  1842. .price-int {
  1843. padding: 20vw 0px;
  1844. }
  1845. }
  1846. .price-int .price-content {
  1847. width: 80vw;
  1848. }
  1849. @media screen and (max-width: 767px) {
  1850. .price-int .price-content {
  1851. width: 90vw;
  1852. }
  1853. }
  1854. .price-int .price-content .CTA-btnB {
  1855. margin-top: 30px;
  1856. }
  1857. .price-int .price-content hr {
  1858. width: 7vw;
  1859. height: 6px;
  1860. background: #2a3863;
  1861. opacity: 1 !important;
  1862. margin: 0 auto;
  1863. }
  1864. @media screen and (max-width: 767px) {
  1865. .price-int .price-content hr {
  1866. width: 15vw;
  1867. }
  1868. }
  1869. .price-int .price-content h1 {
  1870. text-align: center;
  1871. font-weight: 900;
  1872. font-size: 2rem;
  1873. color: #2a3863;
  1874. }
  1875. .price-int .price-content .price-content-1 .price-item {
  1876. margin-top: 50px;
  1877. }
  1878. @media screen and (max-width: 767px) {
  1879. .price-int .price-content .price-content-1 .price-item {
  1880. margin-top: 30px;
  1881. }
  1882. }
  1883. .price-int .price-content .price-content-1 img {
  1884. width: 128px;
  1885. }
  1886. @media screen and (max-width: 767px) {
  1887. .price-int .price-content .price-content-1 img {
  1888. width: 100px;
  1889. }
  1890. }
  1891. .price-int .price-content .price-content-1 h2 {
  1892. margin-top: 15px;
  1893. font-weight: 600;
  1894. font-size: 1.3rem;
  1895. color: #ea5413;
  1896. }
  1897. @media screen and (max-width: 767px) {
  1898. .price-int .price-content .price-content-1 h2 {
  1899. text-align: left;
  1900. font-size: 5.5vmin;
  1901. }
  1902. }
  1903. .price-int .price-content .price-content-1 ul {
  1904. text-align: left;
  1905. color: #ea5413;
  1906. }
  1907. .price-int .price-content .price-content-1 ul li {
  1908. list-style-type: disc;
  1909. }
  1910. @media screen and (max-width: 767px) {
  1911. .price-int .price-content .price-content-1 ul li {
  1912. font-size: 4vmin;
  1913. }
  1914. }
  1915. .price-int .price-content .price-content-1 .price-text {
  1916. padding-left: 80px;
  1917. }
  1918. @media screen and (max-width: 767px) {
  1919. .price-int .price-content .price-content-1 .price-text {
  1920. padding-left: 0px;
  1921. }
  1922. }
  1923. .price-int .price-content .get-started {
  1924. border: none;
  1925. border-radius: 3rem;
  1926. padding: 1rem 2.5rem;
  1927. background: linear-gradient(20deg, #ea5413, #920783);
  1928. color: #fff;
  1929. font-size: 1.2rem;
  1930. font-weight: 900;
  1931. }
  1932. .price-int .price-content p {
  1933. font-size: 24px;
  1934. }
  1935. @media screen and (min-width: 1025px) {
  1936. .register_btn {
  1937. display: none;
  1938. }
  1939. }
  1940. @media screen and (max-width: 767px) {
  1941. .register_text {
  1942. display: none;
  1943. }
  1944. }
  1945. .footer {
  1946. background-color: #f0f0f0;
  1947. padding: 3rem;
  1948. padding-left: 13rem;
  1949. }
  1950. @media screen and (max-width: 767px) {
  1951. .footer {
  1952. padding: 0.5rem;
  1953. text-align: center;
  1954. padding-top: 3rem;
  1955. padding-left: 0;
  1956. }
  1957. }
  1958. .footer h5 {
  1959. font-size: 16px;
  1960. font-weight: 700;
  1961. color: #555555;
  1962. }
  1963. .footer .row {
  1964. display: -webkit-box;
  1965. display: -ms-flexbox;
  1966. display: flex;
  1967. -webkit-box-align: center;
  1968. -ms-flex-align: center;
  1969. align-items: center;
  1970. }
  1971. .footer .footer-aigirl {
  1972. font-weight: 600;
  1973. font-size: 1.5rem;
  1974. margin-top: 1rem;
  1975. margin-bottom: 2.5rem;
  1976. color: #555555;
  1977. }
  1978. @media screen and (max-width: 767px) {
  1979. .footer .footer-aigirl {
  1980. font-size: 1.3rem;
  1981. margin-bottom: 2rem;
  1982. }
  1983. }
  1984. .footer .footer-follow {
  1985. font-size: 1rem;
  1986. margin-bottom: 1rem;
  1987. }
  1988. @media screen and (max-width: 767px) {
  1989. .footer-socials {
  1990. margin-bottom: 2rem;
  1991. }
  1992. }
  1993. .footer .footer-socials a {
  1994. margin-right: 5px;
  1995. }
  1996. @media screen and (max-width: 767px) {
  1997. .footer .footer-socials a {
  1998. margin-right: 10px;
  1999. }
  2000. }
  2001. @media screen and (max-width: 767px) {
  2002. .footer-contacts {
  2003. font-size: 14px;
  2004. }
  2005. }
  2006. .menu-box {
  2007. width: 40vw;
  2008. right: 0px;
  2009. position: fixed;
  2010. z-index: 20;
  2011. overflow: hidden;
  2012. display: none;
  2013. top: 0px;
  2014. }
  2015. @media screen and (min-width: 1025px) {
  2016. .menu-box {
  2017. display: none;
  2018. }
  2019. }
  2020. .menu-box .menu-box2 {
  2021. padding-bottom: 5vw;
  2022. position: relative;
  2023. width: 40vw;
  2024. background: -webkit-gradient(linear, left top, left bottom, from(#1c7ce0), to(#150051));
  2025. background: linear-gradient(to bottom, #1c7ce0, #150051);
  2026. z-index: 7;
  2027. text-align: center;
  2028. }
  2029. .menu-box .menu-box2 a {
  2030. display: inline-block;
  2031. text-decoration: none;
  2032. color: #fff;
  2033. font-size: 18px;
  2034. text-align: center;
  2035. }
  2036. /*# sourceMappingURL=style.css.map */