style.css 24 KB

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