style.css 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248
  1. @charset "UTF-8";
  2. /*custom font*/
  3. @import url(https://fonts.googleapis.com/css?family=Montserrat);
  4. /*basic reset*/
  5. * {
  6. margin: 0;
  7. padding: 0;
  8. }
  9. html {
  10. min-height: 100%;
  11. height: auto;
  12. /*Image only BG fallback*/
  13. /*background = gradient + image pattern combo*/
  14. /* background:
  15. linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6)); */
  16. }
  17. body {
  18. font-family: 'Montserrat', sans-serif;
  19. background-color: white;
  20. font-size: 1.05rem;
  21. }
  22. .ml {
  23. margin-left: 10px;
  24. }
  25. .mr {
  26. margin-right: 10px;
  27. }
  28. .mb {
  29. margin-bottom: 12px;
  30. }
  31. .top {
  32. margin-top: 20px;
  33. position: -webkit-sticky;
  34. position: sticky;
  35. top: 0;
  36. left: 50%;
  37. z-index: 20;
  38. background-color: inherit;
  39. }
  40. .navbar {
  41. background-color: white;
  42. }
  43. /* .imf {
  44. position: fixed;
  45. top: 0;
  46. left: 50%;
  47. transform: translateX(-50%);
  48. z-index: 3;
  49. } */
  50. .img_banner {
  51. background-image: url("images/banner_top1.jpg");
  52. background-repeat: no-repeat;
  53. background-size: contain;
  54. background-position: center;
  55. width: 100%;
  56. height: 65px;
  57. }
  58. /*form styles*/
  59. .img_logo {
  60. display: inline-block;
  61. margin: 0 auto;
  62. margin-bottom: 10px;
  63. }
  64. .title__block {
  65. display: -webkit-box;
  66. display: -ms-flexbox;
  67. display: flex;
  68. -webkit-box-pack: center;
  69. -ms-flex-pack: center;
  70. justify-content: center;
  71. -webkit-box-align: center;
  72. -ms-flex-align: center;
  73. align-items: center;
  74. margin: 0px auto;
  75. }
  76. .sub-logo {
  77. display: inline-block;
  78. font-weight: 700;
  79. font-size: 1.4rem;
  80. color: white;
  81. }
  82. .slogan {
  83. display: block;
  84. font-weight: 700;
  85. font-size: 1.2rem;
  86. color: white;
  87. }
  88. .notice_card {
  89. -webkit-box-sizing: border-box;
  90. box-sizing: border-box;
  91. width: 80%;
  92. margin: 0 10%;
  93. margin-bottom: 1.5rem;
  94. background: white;
  95. border: 0 none;
  96. border-radius: 3px;
  97. -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  98. box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  99. padding: 10px 20px;
  100. line-height: 1.5rem;
  101. }
  102. #myProgress {
  103. width: 100%;
  104. background-color: #ddd;
  105. }
  106. #myBar {
  107. width: 10%;
  108. height: 30px;
  109. background-color: #1C7CE0;
  110. text-align: center;
  111. line-height: 30px;
  112. color: white;
  113. }
  114. .go_title {
  115. color: white;
  116. font-family: 'Montserrat', sans-serif;
  117. padding: 1rem;
  118. }
  119. .nav-list {
  120. color: white;
  121. margin-top: 3rem;
  122. }
  123. .nav-list-item {
  124. font-size: 1.2rem;
  125. cursor: pointer;
  126. position: relative;
  127. }
  128. .nav-list-item::after {
  129. content: " ";
  130. position: absolute;
  131. width: 100%;
  132. height: 100%;
  133. left: 0;
  134. top: 0;
  135. border-bottom: 1px solid white;
  136. opacity: 0;
  137. -webkit-transition: all .4s;
  138. transition: all .4s;
  139. }
  140. .nav-list-item:hover::after {
  141. opacity: 1;
  142. }
  143. .right-text {
  144. position: absolute;
  145. bottom: 0rem;
  146. }
  147. .loader {
  148. position: absolute;
  149. top: 30%;
  150. left: 45%;
  151. }
  152. .imgfr {
  153. width: 90px;
  154. height: 90px;
  155. border-radius: 50%;
  156. overflow: hidden;
  157. margin: 1rem auto 0 auto;
  158. }
  159. .card-title {
  160. font-family: 'Montserrat', sans-serif;
  161. }
  162. .strong {
  163. font-weight: 600;
  164. }
  165. .card {
  166. border: none;
  167. position: relative;
  168. }
  169. .card.active {
  170. border: 1px solid gray;
  171. }
  172. .card.active::before {
  173. position: absolute;
  174. content: "✓";
  175. bottom: 0;
  176. right: 5px;
  177. }
  178. .zoomin {
  179. display: none;
  180. position: absolute;
  181. bottom: 0;
  182. left: 0;
  183. }
  184. .script_err {
  185. display: none;
  186. }
  187. /* .history-modal {
  188. height: 80vh;
  189. }
  190. .history-modal .modal-content{
  191. height: 80vh;
  192. }
  193. .history-modal .modal-conten .modal-terms {
  194. height: 90%;
  195. overflow: scroll;
  196. } */
  197. .historyList-item {
  198. padding: 1rem;
  199. display: block;
  200. width: 80%;
  201. margin: 1rem auto;
  202. border: 1px solid #b1b1b1;
  203. border-radius: 10px;
  204. display: -webkit-box;
  205. display: -ms-flexbox;
  206. display: flex;
  207. font-size: .9rem;
  208. }
  209. .historyList-link {
  210. text-decoration: none;
  211. color: #494949;
  212. }
  213. .historyList-link:hover {
  214. color: #7c7c7c;
  215. }
  216. .content {
  217. width: calc(100% - 250px);
  218. }
  219. /*form styles*/
  220. #msform {
  221. max-width: 1000px;
  222. min-width: 370px;
  223. margin: 50px auto;
  224. margin-bottom: 20px;
  225. text-align: center;
  226. position: relative;
  227. }
  228. #msform fieldset {
  229. background: white;
  230. border: 0 none;
  231. border-radius: 3px;
  232. -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  233. box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  234. padding: 20px 30px;
  235. -webkit-box-sizing: border-box;
  236. box-sizing: border-box;
  237. width: 80%;
  238. margin: 3rem 10%;
  239. /*stacking fieldsets above each other*/
  240. position: relative;
  241. }
  242. /*Hide all except first fieldset*/
  243. /*inputs*/
  244. #msform input[type="text"], #msform textarea, #msform input[type="email"] {
  245. padding: 15px;
  246. border: 1px solid #ccc;
  247. border-radius: 3px;
  248. margin-bottom: 16px;
  249. width: 100%;
  250. -webkit-box-sizing: border-box;
  251. box-sizing: border-box;
  252. font-family: montserrat;
  253. color: #2C3E50;
  254. font-size: 14px;
  255. }
  256. /*buttons*/
  257. #msform .action-button {
  258. width: 100px;
  259. background: #1C7CE0;
  260. font-weight: bold;
  261. color: white;
  262. border: 0 none;
  263. border-radius: 1px;
  264. cursor: pointer;
  265. padding: 10px 5px;
  266. margin: 10px auto;
  267. display: block;
  268. }
  269. #msform .action-button:hover, #msform .action-button:focus {
  270. -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
  271. box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
  272. }
  273. #msform .next[disabled] {
  274. background-color: grey;
  275. }
  276. /*headings*/
  277. .fs-title {
  278. font-size: 15px;
  279. text-transform: uppercase;
  280. color: #2C3E50;
  281. margin-bottom: 10px;
  282. }
  283. .fs-subtitle {
  284. display: inline-block;
  285. font-weight: normal;
  286. font-size: 18px;
  287. color: #666;
  288. margin-bottom: 20px;
  289. padding-bottom: 3px;
  290. border-bottom: 2px solid #1C7CE0;
  291. margin-left: 2rem;
  292. margin-right: 2rem;
  293. }
  294. .fs-label {
  295. display: block;
  296. text-align: left;
  297. margin-bottom: 8px;
  298. }
  299. .fs-label > i {
  300. margin-right: 3px;
  301. }
  302. /*progressbar*/
  303. #progressbar {
  304. margin-bottom: 30px;
  305. overflow: hidden;
  306. /*CSS counters to number the steps*/
  307. counter-reset: step;
  308. }
  309. #progressbar li {
  310. list-style-type: none;
  311. color: black;
  312. text-transform: uppercase;
  313. font-size: 12px;
  314. width: 33.33%;
  315. float: left;
  316. position: relative;
  317. }
  318. #progressbar li:before {
  319. content: counter(step);
  320. counter-increment: step;
  321. width: 20px;
  322. line-height: 20px;
  323. display: block;
  324. font-size: 12px;
  325. color: #333;
  326. background: white;
  327. border-radius: 3px;
  328. margin: 0 auto 5px auto;
  329. }
  330. /*progressbar connectors*/
  331. #progressbar li:after {
  332. content: '';
  333. width: 100%;
  334. height: 2px;
  335. background: white;
  336. position: absolute;
  337. left: -50%;
  338. top: 9px;
  339. z-index: -1;
  340. /*put it behind the numbers*/
  341. }
  342. #progressbar li:first-child:after {
  343. /*connector not needed before the first step*/
  344. content: none;
  345. }
  346. /*marking active/completed steps green*/
  347. /*The number of the step and the connector before it = green*/
  348. #progressbar li.active:before, #progressbar li.active:after {
  349. background: #27AE60;
  350. color: white;
  351. }
  352. p.error-text {
  353. bottom: -23px;
  354. left: 24px;
  355. color: rgba(255, 0, 0, 0.7);
  356. font-size: .8em;
  357. margin-bottom: 0;
  358. }
  359. #term-error {
  360. color: rgba(255, 0, 0, 0.7);
  361. font-size: .8em;
  362. bottom: -23px;
  363. left: 24px;
  364. }
  365. select {
  366. padding: 15px;
  367. border: 1px solid #ccc;
  368. border-radius: 3px;
  369. margin-bottom: 10px;
  370. width: 100%;
  371. -webkit-box-sizing: border-box;
  372. box-sizing: border-box;
  373. font-family: montserrat;
  374. color: #2C3E50;
  375. font-size: 13px;
  376. background-color: transparent;
  377. }
  378. .pl-0 {
  379. padding-left: 0;
  380. }
  381. .terms {
  382. font-size: .9rem;
  383. width: 95%;
  384. min-width: 250px;
  385. height: auto;
  386. overflow: scroll;
  387. margin-bottom: 1rem;
  388. margin-left: auto;
  389. margin-right: auto;
  390. border: 1px solid #a3a3a3;
  391. line-height: 1.5rem;
  392. }
  393. .term-link a {
  394. text-decoration: none;
  395. color: black;
  396. }
  397. .h2 {
  398. text-align: center;
  399. font-size: 1.2rem;
  400. font-weight: 500;
  401. margin-top: 2rem;
  402. }
  403. .left_align {
  404. font-size: 18px;
  405. text-align: left;
  406. }
  407. #overlay {
  408. position: fixed;
  409. /* Sit on top of the page content */
  410. display: none;
  411. width: 100%;
  412. height: 100%;
  413. top: 0;
  414. left: 0;
  415. right: 0;
  416. bottom: 0;
  417. background-color: rgba(0, 0, 0, 0.5);
  418. z-index: 2;
  419. cursor: pointer;
  420. }
  421. .thankyou {
  422. margin: auto;
  423. min-width: 350px;
  424. height: 250px;
  425. margin-top: 190px;
  426. background: #fff;
  427. padding: 15px 20px;
  428. line-height: 25px;
  429. border-radius: 4px;
  430. text-align: center;
  431. }
  432. .thankyou input {
  433. margin-top: 40px;
  434. }
  435. .thankyou h3 {
  436. font-size: 2rem;
  437. font-weight: 700;
  438. color: #21ba45;
  439. line-height: 2.5rem;
  440. margin-bottom: 1.5rem;
  441. }
  442. .check_button {
  443. display: none;
  444. }
  445. .fs-label-type {
  446. background: transparent;
  447. padding: 5px;
  448. border: 1px solid black;
  449. border-radius: 5px;
  450. display: inline-block;
  451. }
  452. .check_button:checked + .fs-label-type {
  453. background-color: #27AE60;
  454. color: white;
  455. padding: 5px;
  456. border: 1px solid #27AE60;
  457. border-radius: 5px;
  458. }
  459. #checker1, #checker2 {
  460. display: inline;
  461. }
  462. .fs-label-info {
  463. background: transparent;
  464. padding: 5px;
  465. border: 1px solid black;
  466. border-radius: 5px;
  467. display: inline-block;
  468. margin-bottom: 8px;
  469. }
  470. input[type="radio"] {
  471. display: none;
  472. }
  473. input[type="radio"]:checked + .fs-label-info {
  474. background-color: #27AE60;
  475. color: white;
  476. padding: 5px;
  477. border: 1px solid #27AE60;
  478. border-radius: 5px;
  479. }
  480. input[type="checkbox"]:checked + .fs-label-info {
  481. background-color: #27AE60;
  482. color: white;
  483. padding: 5px;
  484. border: 1px solid #27AE60;
  485. border-radius: 5px;
  486. }
  487. .btn-exit {
  488. padding: .5rem .75rem;
  489. background-color: transparent;
  490. border: 1px solid black;
  491. margin-top: .3rem;
  492. }
  493. .btn-term-exit {
  494. padding: .5rem .75rem;
  495. background-color: transparent;
  496. border: 1px solid black;
  497. margin-top: .3rem;
  498. display: block;
  499. margin-left: auto;
  500. margin-right: auto;
  501. margin-bottom: 2rem;
  502. }
  503. footer {
  504. padding: 2rem;
  505. padding-top: .5rem;
  506. }
  507. .footer {
  508. display: -webkit-box;
  509. display: -ms-flexbox;
  510. display: flex;
  511. -webkit-box-pack: center;
  512. -ms-flex-pack: center;
  513. justify-content: center;
  514. }
  515. .img_fr {
  516. width: 80%;
  517. max-width: 850px;
  518. min-width: 300px;
  519. height: 60px;
  520. -o-object-fit: contain;
  521. object-fit: contain;
  522. -o-object-position: center;
  523. object-position: center;
  524. }
  525. .img_fr img {
  526. width: 100%;
  527. height: 90%;
  528. }
  529. #msform #userid, #msform #area {
  530. height: 0;
  531. padding: 0;
  532. margin: 0;
  533. border: none;
  534. }
  535. #msform input[type="text"].error {
  536. border-color: red;
  537. }
  538. .modal-header {
  539. border-bottom: none;
  540. }
  541. #avatarmega .modal-content {
  542. background-color: transparent;
  543. border: none;
  544. }
  545. #avatarmega .modal-title {
  546. color: white;
  547. }
  548. #avatarmega .btn-close {
  549. background: none;
  550. }
  551. #avatarmega .modal-header {
  552. position: absolute;
  553. top: -.5rem;
  554. right: 1.5rem;
  555. }
  556. .linker__box {
  557. padding: .5rem 1rem;
  558. border-radius: 1rem;
  559. -webkit-box-shadow: 1px 1px 5px 1px #c9c9c9;
  560. box-shadow: 1px 1px 5px 1px #c9c9c9;
  561. width: -webkit-max-content;
  562. width: -moz-max-content;
  563. width: max-content;
  564. margin: 0 auto;
  565. display: none;
  566. }
  567. .linker__box p {
  568. margin-bottom: 0;
  569. color: gray;
  570. }
  571. .linker__box i {
  572. color: gray;
  573. position: relative;
  574. }
  575. .linker__box i::after {
  576. position: absolute;
  577. content: " ";
  578. right: -5px;
  579. top: -10%;
  580. border-right: 2px solid #a3a3a3;
  581. width: 1px;
  582. height: 120%;
  583. }
  584. .item_imgfr {
  585. width: 15%;
  586. height: 50px;
  587. border-radius: 50%;
  588. overflow: hidden;
  589. margin: auto .5rem;
  590. }
  591. .item_imgfr img {
  592. height: 100%;
  593. width: 100%;
  594. }
  595. .content-box {
  596. width: 75%;
  597. }
  598. .box-title {
  599. margin-bottom: .2rem;
  600. cursor: pointer;
  601. }
  602. .box-title:hover {
  603. color: grey;
  604. text-decoration: underline;
  605. }
  606. .box-link {
  607. cursor: pointer;
  608. }
  609. .img_uploader {
  610. display: none;
  611. }
  612. #msform input[type="text"].imgsrc {
  613. width: calc(100% - 8rem);
  614. margin-right: 5px;
  615. }
  616. .upload-btn {
  617. display: inline-block;
  618. width: 6rem;
  619. background-color: #75a7dd;
  620. color: white;
  621. padding: .4rem .5rem;
  622. font-size: .9rem;
  623. border-radius: 3px;
  624. -webkit-transition: all .3s;
  625. transition: all .3s;
  626. cursor: pointer;
  627. }
  628. .upload-btn img {
  629. width: 30px;
  630. height: 30px;
  631. }
  632. .upload-btn:hover {
  633. background-color: #3b86d6;
  634. }
  635. .add, .addimg {
  636. cursor: pointer;
  637. display: inline-block;
  638. width: 2rem;
  639. height: 2rem;
  640. background-color: #67abf3;
  641. font-size: 1.2rem;
  642. color: white;
  643. border-radius: 50%;
  644. -webkit-transition: all .3s;
  645. transition: all .3s;
  646. }
  647. .add:hover, .addimg:hover {
  648. background-color: #398ee9;
  649. }
  650. body {
  651. font-family: "Lato", sans-serif;
  652. }
  653. .sidenav {
  654. height: 100%;
  655. width: 250px;
  656. position: fixed;
  657. z-index: 1;
  658. top: 0;
  659. left: 0;
  660. background: -webkit-gradient(linear, left top, left bottom, from(#1C7CE0), to(#150051));
  661. background: linear-gradient(to bottom, #1C7CE0, #150051);
  662. overflow-x: hidden;
  663. -webkit-transition: 0.5s;
  664. transition: 0.5s;
  665. }
  666. .sidenav a {
  667. text-decoration: none;
  668. font-size: 25px;
  669. color: #818181;
  670. display: block;
  671. -webkit-transition: 0.3s;
  672. transition: 0.3s;
  673. }
  674. .sidenav a:hover {
  675. color: #f1f1f1;
  676. }
  677. .sidenav .closebtn {
  678. position: absolute;
  679. top: 0;
  680. right: 25px;
  681. font-size: 36px;
  682. margin-left: 50px;
  683. }
  684. .container-login {
  685. width: 100vw;
  686. height: 100vh;
  687. display: -ms-grid;
  688. display: grid;
  689. -ms-grid-columns: (1fr)[2];
  690. grid-template-columns: repeat(2, 1fr);
  691. grid-gap: 7rem;
  692. padding: 0rem;
  693. }
  694. .navbar-nav button {
  695. background: white;
  696. border: none;
  697. outline: none;
  698. }
  699. .img-wave {
  700. position: fixed;
  701. bottom: 0;
  702. left: 0;
  703. height: 100%;
  704. z-index: -1;
  705. }
  706. .img-wave-profile {
  707. height: 80%;
  708. }
  709. .row-img {
  710. position: relative;
  711. display: -webkit-box;
  712. display: -ms-flexbox;
  713. display: flex;
  714. -webkit-box-pack: center;
  715. -ms-flex-pack: center;
  716. justify-content: center;
  717. -webkit-box-align: center;
  718. -ms-flex-align: center;
  719. align-items: center;
  720. background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(16, 68, 142, 0.7)), to(rgba(16, 68, 142, 0.7))), url("../img/sideImg.png");
  721. background-image: linear-gradient(to right bottom, rgba(16, 68, 142, 0.7), rgba(16, 68, 142, 0.7)), url("../img/sideImg.png");
  722. background-size: cover;
  723. background-position: center;
  724. }
  725. .row-img .row-img-box {
  726. color: white;
  727. }
  728. .row-img .row-img-txt {
  729. position: absolute;
  730. bottom: 2rem;
  731. color: white;
  732. left: 2rem;
  733. font-size: 1.3rem;
  734. }
  735. .row-login {
  736. display: -webkit-box;
  737. display: -ms-flexbox;
  738. display: flex;
  739. -webkit-box-pack: start;
  740. -ms-flex-pack: start;
  741. justify-content: flex-start;
  742. -webkit-box-align: center;
  743. -ms-flex-align: center;
  744. align-items: center;
  745. text-align: center;
  746. }
  747. .row-login .title {
  748. position: relative;
  749. color: #052859;
  750. }
  751. .row-login .title::after {
  752. position: absolute;
  753. content: "";
  754. left: 45%;
  755. top: 20%;
  756. width: 10%;
  757. height: 100%;
  758. border-bottom: 4px solid #052859;
  759. }
  760. .login-content {
  761. width: 80%;
  762. min-width: 350px;
  763. -webkit-box-shadow: 0 0 12px 5px #dddddd;
  764. box-shadow: 0 0 12px 5px #dddddd;
  765. padding: 1.5rem;
  766. border-radius: 2rem;
  767. }
  768. .link_privacy {
  769. color: black;
  770. }
  771. .login-content img {
  772. height: 80px;
  773. }
  774. .row-img img {
  775. width: 450px;
  776. }
  777. .login-content .form-floating input {
  778. border: none;
  779. border-bottom: 2px solid #d9d9d9;
  780. border-radius: 0;
  781. }
  782. .login-content .form-floating input:focus {
  783. -webkit-box-shadow: none;
  784. box-shadow: none;
  785. }
  786. .login-content #btn_login {
  787. background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
  788. background: linear-gradient(90deg, #0162c8, #55e7fc);
  789. font-weight: bold;
  790. color: white;
  791. border: 0 none;
  792. border-radius: 40px;
  793. cursor: pointer;
  794. padding: 10px 50px;
  795. margin: 10px auto;
  796. display: block;
  797. }
  798. .login-content #btn_login:hover {
  799. -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
  800. box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
  801. }
  802. .login-content .btn-register {
  803. background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
  804. background: linear-gradient(90deg, #0162c8, #55e7fc);
  805. font-weight: bold;
  806. color: white;
  807. border: 0 none;
  808. border-radius: 40px;
  809. cursor: pointer;
  810. padding: 10px 50px;
  811. margin: 10px auto;
  812. display: block;
  813. }
  814. .login-content .btn-register:hover {
  815. -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
  816. box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
  817. }
  818. .login-content .nav-tabs {
  819. border-bottom: none;
  820. }
  821. .login-content .nav {
  822. -webkit-box-orient: vertical;
  823. -webkit-box-direction: normal;
  824. -ms-flex-direction: column;
  825. flex-direction: column;
  826. -webkit-box-align: center;
  827. -ms-flex-align: center;
  828. align-items: center;
  829. }
  830. .login-content .nav-tabs .nav-link {
  831. color: grey;
  832. }
  833. .login-content .nav-tabs .nav-link.active {
  834. border-color: #fff;
  835. text-transform: uppercase;
  836. color: black;
  837. }
  838. .navbar .btn-gocreate {
  839. background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
  840. background: linear-gradient(90deg, #0162c8, #55e7fc);
  841. color: white;
  842. border: 0 none;
  843. border-radius: 40px;
  844. cursor: pointer;
  845. padding: 10px 50px;
  846. }
  847. .container-profile {
  848. width: 100vw;
  849. height: 100vh;
  850. overflow-y: hidden;
  851. }
  852. .container-bg {
  853. position: absolute;
  854. width: 600px;
  855. height: 400px;
  856. right: 0;
  857. bottom: 0;
  858. }
  859. .container-profile .card-profile {
  860. width: 30%;
  861. min-width: 320px;
  862. margin: auto;
  863. margin-top: 4rem;
  864. border-radius: 10px;
  865. padding: 2rem;
  866. text-align: center;
  867. -webkit-box-shadow: 0px 0px 20px 1px #b4b4b4;
  868. box-shadow: 0px 0px 20px 1px #b4b4b4;
  869. }
  870. .container-profile .card-profile img {
  871. width: 120px;
  872. margin: 1rem auto;
  873. }
  874. .card-profile-txt {
  875. color: #6d6d6d;
  876. font-size: 1.2rem;
  877. font-weight: 500;
  878. }
  879. .card-profile-cnt {
  880. font-size: 1.5rem;
  881. font-weight: 700;
  882. }
  883. @media screen and (max-width: 900px) {
  884. .container-login {
  885. -ms-grid-columns: 1fr;
  886. grid-template-columns: 1fr;
  887. }
  888. .row-img {
  889. display: none;
  890. }
  891. .img-wave {
  892. display: none;
  893. }
  894. .row-login {
  895. -webkit-box-pack: center;
  896. -ms-flex-pack: center;
  897. justify-content: center;
  898. }
  899. .container-bg {
  900. width: 400px;
  901. height: 300px;
  902. right: 0;
  903. bottom: 0;
  904. }
  905. }
  906. @media screen and (max-height: 450px) {
  907. .sidenav {
  908. padding-top: 15px;
  909. }
  910. .sidenav a {
  911. font-size: 18px;
  912. }
  913. }
  914. /* Pricing */
  915. .pricingTable {
  916. background: #fff;
  917. font-family: 'Open Sans', sans-serif;
  918. text-align: center;
  919. padding: 30px 15px 15px;
  920. border-radius: 25px;
  921. overflow: hidden;
  922. position: relative;
  923. z-index: 1;
  924. }
  925. .pricingTable:before,
  926. .pricingTable:after {
  927. content: '';
  928. background: linear-gradient(-45deg, #5A98FB, #5A98FB, #3F64FA, #3F64FA);
  929. height: 170px;
  930. width: 150%;
  931. outline: 5px solid #fff;
  932. outline-offset: -10px;
  933. opacity: 0.9;
  934. -webkit-transform: translateX(-50%) rotate(7deg);
  935. transform: translateX(-50%) rotate(7deg);
  936. position: absolute;
  937. left: 50%;
  938. top: -65px;
  939. z-index: -1;
  940. }
  941. .pricingTable:after {
  942. height: 250px;
  943. -webkit-transform: translateX(-50%) rotate(-20deg) rotateX(180deg);
  944. transform: translateX(-50%) rotate(-20deg) rotateX(180deg);
  945. top: auto;
  946. bottom: -150px;
  947. }
  948. .pricingTable .pricingTable-header {
  949. color: #fff;
  950. margin: 0 0 75px;
  951. }
  952. .pricingTable .title {
  953. font-size: 40px;
  954. font-weight: 700;
  955. text-transform: uppercase;
  956. letter-spacing: 1px;
  957. margin: 0;
  958. }
  959. .pricingTable .pricing-content {
  960. text-align: left;
  961. padding: 0;
  962. margin: 0 0 10px;
  963. display: inline-block;
  964. }
  965. .pricingTable .pricing-content li {
  966. color: #333;
  967. font-size: 17px;
  968. font-weight: 500;
  969. line-height: 22px;
  970. text-transform: uppercase;
  971. padding: 0 40px 0 0;
  972. margin: 0 0 15px;
  973. list-style-position: inside;
  974. position: relative;
  975. }
  976. .pricingTable .pricing-content li:after {
  977. content: "\f00c";
  978. color: #e58e26;
  979. font-family: "Font Awesome 5 Free";
  980. font-size: 18px;
  981. font-weight: 900;
  982. position: absolute;
  983. top: 0;
  984. right: 0;
  985. }
  986. .pricingTable .pricing-content li.disable:after {
  987. content: "\f00d";
  988. }
  989. .pricingTable .price-value {
  990. margin: 0 0 15px;
  991. }
  992. .pricingTable .price-title {
  993. color: #C70039;
  994. font-size: 30px;
  995. text-align: left;
  996. text-transform: uppercase;
  997. line-height: 30px;
  998. width: calc(100% - 130px);
  999. padding: 15px 0 0;
  1000. display: inline-block;
  1001. }
  1002. .pricingTable .price-title b {
  1003. display: block;
  1004. }
  1005. .pricingTable .price-amount {
  1006. color: #3F64FA;
  1007. background: #fff;
  1008. font-size: 30px;
  1009. font-weight: 700;
  1010. line-height: 30px;
  1011. width: 120px;
  1012. height: 120px;
  1013. padding: 33px 10px 10px;
  1014. display: inline-block;
  1015. vertical-align: top;
  1016. -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
  1017. clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
  1018. position: relative;
  1019. z-index: 1;
  1020. }
  1021. .pricingTable .price-amount:before,
  1022. .pricingTable .price-amount:after {
  1023. content: "";
  1024. background: linear-gradient(-45deg, #5A98FB, #5A98FB, #3F64FA, #3F64FA);
  1025. width: calc(100% - 12px);
  1026. height: calc(100% - 12px);
  1027. -webkit-transform: translateX(-50%) translateY(-50%);
  1028. transform: translateX(-50%) translateY(-50%);
  1029. position: absolute;
  1030. top: 50%;
  1031. left: 50%;
  1032. z-index: -1;
  1033. -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
  1034. clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
  1035. }
  1036. .pricingTable .price-amount:after {
  1037. background: #fff;
  1038. width: calc(100% - 16px);
  1039. height: calc(100% - 16px);
  1040. }
  1041. .pricingTable .price-amount .duration {
  1042. font-size: 16px;
  1043. font-weight: 600;
  1044. text-transform: capitalize;
  1045. display: block;
  1046. }
  1047. .pricingTable .pricingTable-signup a {
  1048. color: #fff;
  1049. font-size: 20px;
  1050. font-weight: 700;
  1051. letter-spacing: 2px;
  1052. text-transform: uppercase;
  1053. padding: 10px 20px;
  1054. border: 2px solid #fff;
  1055. border-radius: 50px;
  1056. display: inline-block;
  1057. -webkit-transition: all 0.3s;
  1058. transition: all 0.3s;
  1059. }
  1060. .pricingTable .pricingTable-signup a:hover {
  1061. text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
  1062. -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
  1063. box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
  1064. }
  1065. .pricingTable.green:before,
  1066. .pricingTable.green:after,
  1067. .pricingTable.green .price-amount:before {
  1068. background: linear-gradient(-45deg, #76D243, #76D243, #109739, #109739);
  1069. }
  1070. .pricingTable.green .price-amount {
  1071. color: #109739;
  1072. }
  1073. .pricingTable.pink:before,
  1074. .pricingTable.pink:after,
  1075. .pricingTable.pink .price-amount:before {
  1076. background: linear-gradient(-45deg, #E969A6, #E969A6, #ED2E96, #ED2E96);
  1077. }
  1078. .pricingTable.pink .price-amount {
  1079. color: #ED2E96;
  1080. }
  1081. @media only screen and (max-width: 990px) {
  1082. .pricingTable {
  1083. margin: 0 0 40px;
  1084. }
  1085. }
  1086. /*# sourceMappingURL=style.css.map */