@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); @primary-light-100:#E7DEFE; @primary-light-200:#CEBEFE; @primary-light-300:#B49DFE; @primary-light-400:#9F84FD; @primary-default-500:#7C5CFC; @primary-hover-600:#5E43D8; @primary-dark-700:#432EB5; @primary-dark-800:#2D1D92; @secondary-light-100:#F5FCD2; @secondary-light-200:#E8FAA6; @secondary-light-300:#D3F178; @secondary-light-400:#BCE455; @secondary-default-500:#9CD323; @secondary-hover-600:#7FB519; @secondary-dark-700:#659711; @secondary-dark-800:#4C7A0B; @info-default:#209CEE; @info-hover:#0E75B9; @info-light:#ECF7FE; @success-default:#48C774; @success-hover:#257942; @success-light:#EFFAF3; @warning-default:#FFDD57; @warning-hover:#947600; @warning-light:#FFFBEB; @danger-default:#FF3860; @danger-hover:#DB002C; @white-100:#F5F5F5; @white-200:#FAFAFA; @white-300:#FFFFFF; @gray-secondary:#8080A4; @gray-tertiary:#BEBED0; @black-100:#0A0A0A; @black-200:#121212; @black-300:#242424; @black-400:#363636; @black-500:#4A4A4A; @black-600:#7A7A7A; @black-700:#B5B5B5; @black-800:#DBDBDB; @body-background-primary:#FBF9FF; .mulk-emanet-opened-c {width: calc(100% - 774px); height: auto; margin-left: 339px; margin-top: 0px; float: left; .mobile-progress {width: 100%; padding-left: 24px; padding-right: 24px; float: left; height: 40px; .top {width: 100%; height: 12px; float: left; background: #DBDBDB; border-radius:6px; .inner {background-color: @primary-default-500; border-radius: 6px; height: 12px; float: left; display:flex; align-items:center; justify-content: right; span {font-size: 8px; color:white; margin-right: 2px; } } } .bottom {width: 100%; height: 18px; float: left; margin-top: 10px; .item {width: 25%; height: 18px; float: left; display:flex; align-items: center; justify-content: center; span {font-weight: 500; font-size: 12px; color:@gray-secondary; } } .item.active span {color:@black-400;} } } } .mulk-emanet-opened {width: 100%; background-color: white; float: left; border-radius: 10px; border:1px solid #F5F5F5; font-family: 'Inter' !important; padding-bottom:20px; .container {width: 100%; float: left; height: 100%; max-width: 100%; .first { width: 100%; height: 100%; float: left; .title {width: 100%; height: auto; float: left; margin-top: 24px; padding-left: 24px; padding-right: 240px; span {font-size: 32px; font-weight: 500; font-family: 'Roboto'; color:@primary-dark-700; } } .info {width: 100%; height: 62px; float: left; margin-top: 29px; padding-left: 24px; padding-right: 350px; span {font-size: 20px; font-family: 'Roboto'; color:#425466;} } .mobile-vector {width: 100%; height: auto; margin-top: 19px; float: left; .vector {width: 100%; height: auto; float: left; display: flex; justify-content: center; align-items: center; img {width: 100%; height: auto;} } } .content {width: calc(100% - 48px); float: left; margin-left: 24px; margin-top: 21px; .left {width: 395px; float: left; .list {width: 100%; float: left; margin-top: 100px; .item {width: 100%; height: 30px; float: left; margin-top: 13px; .icon {width: 30px; height: 30px; float: left; display:flex; align-items:center; justify-content: center; span {color:#7C5CFC; border-radius:30px; border:1px solid @primary-light-100; font-size: 21px;} } .value {width: calc(100% - 30px); float: left; height: 30px; display:flex; align-items: center; span { color:#363636; font-size: 16px; margin-left: 12px; font-family: Roboto;} } } .item:first-child {margin-top: 0;} } .button {width: 100%; height: 48px; float: left; margin: 0; padding: 0; margin-top: 68px; text-align: center; button {width: 100%; background-color: #7C5CFC; font-weight: 600; border:0px; height: 48px; font-size: 16px; transition: 0.3s; color:white;} button:hover { background-color: @primary-hover-600;} } } .right {width: calc(100% - 410px); float: left; margin-left: 15px; height: 399px; .vector {width: 100%; height: 399px; float: left; display: flex; justify-content: center; align-items: center; img {width: 100%; height: auto;} } } } } .second {width: 100%; height: 100%; float: left; .progress {width: 90%; height: 61px; float: left; margin-top: 36px; max-width: 801px; margin-left: 50%; background-color: transparent; display: block; transform: translateX(-50%); .top {width: 100%; height: 32px; float: left; padding-left: 84px; padding-right: 84px; .icon {width: 32px; height: 32px; float: left; display: flex; align-items:center; justify-content: center; border-radius: 32px; background-color: #F5F5F5; span { font-weight: 500; font-size: 14px; color:#8080A4;} } .stick {width: calc(33% - 52.6px); margin-left: 5px; margin-right: 5px; float: left; height: 2px; margin-top: 15px; background-color: #E5E7EB; } } .bot {width: 100%; height: 21px; float: left; margin-top: 10px; .container {width: 100%; height: 21px; float: left; background-color: transparent; box-shadow: none; .item {width: 25%; height: 21px; text-align: center; float: left;} } } } .form {width: 100%; float: left; margin-top: 72px; border:0px; .container {width: 90%; margin-left: 50%; max-width: 470px; border:0px; transform:translateX(-50%); float: left; background-color:transparent; box-shadow: none; .item {width: 100%; height: auto; float: left; margin-top: 16px; .title {width: 100%; height: 21px; float: left; display: flex; align-items: center; span { font-size: 14px; font-family: 'Roboto'; font-weight: 500; color:#696F79; } } .input {width: 100%; height: 50px; float: left; margin-top: 0; select {width: 100%; height: 50px; background-color: #FAFAFA; color:#6E7191; border-radius: 12px; font-size: 14px; border:0px; padding-left: 16px; padding-right: 16px; } input {width: 100%; height: 50px; background-color: #FAFAFA; color:#6E7191; border-radius: 12px; font-size: 14px; border:0px; padding-left: 16px; padding-right: 16px; } } .check {width: 100%; height: 32px; float: left; margin-top: 10px; .item {width: auto; height: 32px; float: left; margin-top: 0; .input {width: 32px; height: 32px; float: left; text-align: center; border-radius: 32px; background-color: rgba(98, 99, 213, 0.08); input {width: 20px; height: 20px; margin-top: 6px; } } .title {width: auto; height: 32px; float: left; span {line-height: 32px; margin-left: 5px; color:#6E7191; font-size: 14px; font-family: 'Roboto'; } } } .item:last-child {margin-left: 65px;} } } .buttons {width: 100%; height: 50px; float: left; margin-top: 23px; .left {height: 50px; float: left; width: auto; .button {height: 50px; width: auto; float: left; padding: 0; margin: 0; cursor: pointer; background-color:transparent; border-bottom: 1px solid @primary-hover-600; text-align: center; span {line-height: 50px; font-size: 16px; font-weight: 600; color:@primary-hover-600;} } } .right {height: 50px; width: auto; float: right; .button {width: 145px; height: 50px; float: right; text-align: center; padding: 0; margin: 0; button {width: 100%; height: 50px; border:0px; color:white; background-color: @primary-default-500; border-radius: 3px; font-weight: 600; font-size: 16px; transition: 0.3s; } button:hover {background-color: @primary-hover-600;} } } } } } .return-mobile {width: 100%; height: 40px; float: left; margin-top: 21px; align-items: center; justify-content: center; a {border-bottom: 1px solid @primary-hover-600; color:@primary-hover-600; padding-bottom: 8px; font-size: 12px; font-weight: 600; } } } .third { .progress {width: 90%; height: 61px; float: left; margin-top: 36px; max-width: 801px; margin-left: 50%; background-color: transparent; display: block; transform: translateX(-50%); .top {width: 100%; height: 32px; float: left; padding-left: 84px; padding-right: 84px; .icon {width: 32px; height: 32px; float: left; display: flex; align-items:center; justify-content: center; border-radius: 32px; background-color: #F5F5F5; span { font-weight: 500; font-size: 14px; color:#8080A4;} } .stick {width: calc(33% - 52.6px); margin-left: 5px; margin-right: 5px; float: left; height: 2px; margin-top: 15px; background-color: #E5E7EB; } } .bot {width: 100%; height: 21px; float: left; margin-top: 10px; .container {width: 100%; height: 21px; float: left; background-color: transparent; box-shadow: none; .item {width: 25%; height: 21px; text-align: center; float: left;} } } } .form {width: 100%; float: left; .container {width: 530px; background-color:transparent; box-shadow: none; border:0; margin-top: 110px; float: left; margin-left: 50%; transform: translateX(-50%); max-width: 90%; .item {width: 100%; height: auto; float: left; margin-left: 0; margin-top: 16px; .title {width: 100%; height: 21px; float: left; display:flex; align-items: center; span { font-size: 14px; font-family: 'Roboto'; font-weight: 500; color:#696F79; } } .triple {width: 100%; float: left; height: 50px; margin-top: 12px; .input {width: calc(33.3333% - 14.66666666666667px) !important; height: 50px; float: left; margin-top: 0; select {width: 100%; height: 50px; background-color: #FAFAFA; color:#6E7191; border-radius: 12px; font-size: 14px; border:0px; padding-left: 16px; padding-right: 16px; } } .input:nth-child(2) {margin-left: 22px;} .input:nth-child(3) {margin-left: 22px;} } .input {width: 100%; height: 50px; float: left; .input {width: calc(100% - 60px); height: 50px; float: left; input {width: 100%; height: 50px; background-color: #FAFAFA; color:#6E7191; border-radius: 12px; font-size: 14px; border:0px; padding-left: 16px; padding-right: 16px; } } .icon {width: 52px; height: 50px; float: left; margin-left: 8px; background-color: @secondary-default-500; border-radius: 8px; display: flex; align-items:center; justify-content: center; span { color:white; font-size: 21px; } } select {width: 100%; height: 50px; background-color: #FAFAFA; color:#6E7191; border-radius: 12px; font-size: 14px; border:0px; padding-left: 16px; padding-right: 16px;} } } .buttons {width: 100%; height: 50px; float: left; margin-top: 23px; .left {height: 50px; float: left; width: auto; .button {height: 50px; width: auto; float: left; padding: 0; margin: 0; cursor: pointer; background-color:transparent; border-bottom: 1px solid @primary-default-500; text-align: center; span {line-height: 50px; font-size: 16px; font-weight: 600; color:@primary-default-500;} } } .right {height: 50px; width: auto; float: right; .button {width: 145px; height: 50px; float: right; background-color: @primary-default-500; text-align: center; border-radius: 3px; padding: 0; margin: 0; span {line-height: 50px; color:white; font-weight: 600; font-size: 16px; } button {width: 100%; height: 50px; background-color:transparent; border:0px; color:White; } } } } } } .return-mobile {width: 100%; height: 40px; float: left; margin-top: 21px; align-items: center; justify-content: center; a {border-bottom: 1px solid @primary-hover-600; color:@primary-hover-600; padding-bottom: 8px; font-size: 12px; font-weight: 600; } } } .fourth {width: 100%; height: 100%; float: left; .progress {width: 90%; height: 61px; float: left; margin-top: 36px; max-width: 801px; margin-left: 50%; background-color: transparent; display: block; transform: translateX(-50%); .top {width: 100%; height: 32px; float: left; padding-left: 84px; padding-right: 84px; .icon {width: 32px; height: 32px; float: left; display: flex; align-items:center; justify-content: center; border-radius: 32px; background-color: #F5F5F5; span { font-weight: 500; font-size: 14px; color:#8080A4;} } .stick {width: calc(33% - 52.6px); margin-left: 5px; margin-right: 5px; float: left; height: 2px; margin-top: 15px; background-color: #E5E7EB; } } .bot {width: 100%; height: 21px; float: left; margin-top: 10px; .container {width: 100%; height: 21px; float: left; background-color: transparent; box-shadow: none; .item {width: 25%; height: 21px; text-align: center; float: left;} } } } .form {width: 90%; max-width: 801px; margin-left: 50%; transform: translateX(-50%); float: left; margin-top: 23px; .advice {width: 100%; height: 93px; float: left; background-color: @secondary-light-100; border-radius: 4px; padding: 24px; .title {width: 100%; height: 24px; float: left; .icon {width: 24px; height: 24px; float: left; display:flex; align-items: center; justify-content: center; span { color:@primary-dark-700; font-size: 18px; } } .text {width: calc(100% - 30px); margin-left: 6px; height: 24px; float: left; display:flex; align-items: center; span { color:@primary-dark-700; font-size: 16px; } } } .info {width: 100%; height: 21px; float: left; margin-top: 12px; display:flex; align-items: center; p {font-size: 14px; color:#1B1C1D; } } } .samples {width: 100%; float: left; margin-top: 26px; .title {width: 100%; height: 21px; float: left; display:flex; align-items: center; span { font-size: 14px; color:#363636; } } .list {width: 100%; float: left; margin-top: 12px; .sample {width: 100%; float: left; span {font-weight: 300; font-size: 14px; color:#363636; } } } } .editor {width: 100%; height: 171px; margin-top: 24px; float: left; textarea {width: 100%; height: 171px !important; background-color: #FAFAFA; } } .buttons {width: 100%; height: 50px; float: left; margin-top: 23px; .left {height: 50px; float: left; width: auto; .button {height: 50px; width: auto; float: left; padding: 0; cursor: pointer; margin: 0; background-color:transparent; border-bottom: 1px solid @primary-default-500; text-align: center; span {line-height: 50px; font-size: 16px; font-weight: 600; color:@primary-default-500;} } } .right {height: 50px; width: auto; float: right; .button {width: 145px; height: 50px; float: right; background-color: @primary-default-500; text-align: center; border-radius: 3px; padding: 0; margin: 0; span {line-height: 50px; color:white; font-weight: 600; font-size: 16px; } button {width: 100%; height: 50px; background-color:transparent; border:0px; color:White; } } } } } .return-mobile {width: 100%; height: 40px; float: left; margin-top: 21px; align-items: center; justify-content: center; a {border-bottom: 1px solid @primary-hover-600; color:@primary-hover-600; padding-bottom: 8px; font-size: 12px; font-weight: 600; } } } .fifth {width: 100%; height: auto; float: left; .progress {width: 90%; height: 61px; float: left; margin-top: 36px; max-width: 801px; margin-left: 50%; background-color: transparent; display: block; transform: translateX(-50%); .top {width: 100%; height: 32px; float: left; padding-left: 84px; padding-right: 84px; .icon {width: 32px; height: 32px; float: left; display: flex; align-items:center; justify-content: center; border-radius: 32px; background-color: #F5F5F5; span { font-weight: 500; font-size: 14px; color:#8080A4;} } .stick {width: calc(33% - 52.6px); margin-left: 5px; margin-right: 5px; float: left; height: 2px; margin-top: 15px; background-color: #E5E7EB; } } .bot {width: 100%; height: 21px; float: left; margin-top: 10px; .container {width: 100%; height: 21px; float: left; background-color: transparent; box-shadow: none; .item {width: 25%; height: 21px; text-align: center; float: left;} } } } .form {width: 90%; max-width: 940px; margin-left: 50%; margin-top: 64px; transform: translateX(-50%); float: left; .left {width: 379px; height: 314px; float: left; margin-top: 64px; .vector {width: 276px; height: 100%; float: left; img {width: 100%; height: 100%; } } } .right {width: calc(100% - 379px); float: left; .container {width: 100%; height: auto; float: left; background-color: transparent; box-shadow:none; border:0; .title {width: 100%; height: 72px; float: left; span {font-size: 24px; font-weight: 500; color:@primary-dark-700; font-family: 'Roboto'; } } .info {width: 100%; height: 56px; margin-top: 24px; float: left; span {font-family: 'Roboto'; font-size: 16px; color:#425466; font-weight: 400; } } .form {width: 100%; float: left; margin-top: 48px; .item {width: 90%; height: 50px; float: left; max-width: 470px; margin-top: 14px; input {width: 100%; height: 50px; background-color: #FAFAFA; color:#6E7191; border-radius: 12px; font-size: 14px; border:0px; padding-left: 16px; padding-right: 16px; } } .item:first-child {margin-top: 0;} } .buttons {width: 100%; height: 50px; float: left; margin-top: 23px; .left {height: 50px; float: left; width: auto; margin-top: 0; .button {height: 50px; width: auto; float: left; padding: 0; margin: 0; cursor: pointer; background-color:transparent; border-bottom: 1px solid @primary-hover-600; text-align: center; span {line-height: 50px; font-size: 16px; font-weight: 600; color:@primary-hover-600;} } } .right {height: 50px; width: auto; float: right; .button {width: 145px; height: 50px; float: right; background-color: @primary-default-500; text-align: center; border-radius: 3px; padding: 0; margin: 0; button {width: 100%; height: 50px; background-color: transparent; border:0px; outline: 0px; color:white; } } } } } } } .return-mobile {width: 100%; height: 40px; float: left; margin-top: 21px; align-items: center; justify-content: center; a {border-bottom: 1px solid @primary-hover-600; color:@primary-hover-600; padding-bottom: 8px; font-size: 12px; font-weight: 600; } } } } } @media screen and (max-width: 1630px) { .mulk-emanet-opened .container .first .title span {font-size: 30px;} } @media screen and (max-width: 1768px) { .mulk-emanet-opened-c {width: calc(100% - 394px); margin-left: 349px;} } @media screen and (max-width: 1550px) { .mulk-emanet-opened-c {width: calc(100% - 334px); margin-left: 324px;} } @media screen and (max-width: 1420px) { .mulk-emanet-opened-c {width: calc(100% - 253px); margin-left: 243px;} } @media screen and (max-width: 1330px) { .mulk-emanet-opened-c {width: 90%; margin-left: 5%; margin-top: 74px;} } @media screen and (max-width: 768px) { .mulk-emanet-opened .container .fifth .form .right .container .info span {font-size: 12px;} .mulk-emanet-opened .container .fifth .form .right .container .form .item {width: 100%;} .mulk-emanet-opened .container .fifth .form .right .container .form {margin-left: 0; padding: 0; border:0px;} .mulk-emanet-opened .container .fifth .form .right {width: 100%;} .mulk-emanet-opened .container .fourth .form .advice .info {height: 36px; margin-top: 12px;} .mulk-emanet-opened .container .fourth .form .advice .info p {font-size: 12px;} .mulk-emanet-opened .container .fourth .form .advice {padding: 12px;} .mulk-emanet-opened .container .third .form .container {width: calc(100% - 32px); max-width: 100%; margin-left: 16px; background-color: white; border-radius: 10px; border: 1px solid #F5F5F5; transform: translateX(0); padding: 12px; margin-top: 16px;} .mulk-emanet-opened .container .fifth .form {width: calc(100% - 32px); max-width: 100%; margin-left: 16px; background-color: white; border-radius: 10px; border: 1px solid #F5F5F5; transform: translateX(0); padding: 12px; margin-top: 16px;} .mulk-emanet-opened .container .fourth .form {width: calc(100% - 32px); max-width: 100%; margin-left: 16px; background-color: white; border-radius: 10px; border: 1px solid #F5F5F5; transform: translateX(0); padding: 12px; margin-top: 16px;} .mulk-emanet-opened .container .second .return-mobile {display:flex !important;} .mulk-emanet-opened .container .third .return-mobile {display:flex !important;} .mulk-emanet-opened .container .fourth .return-mobile {display:flex !important;} .mulk-emanet-opened .container .fifth .return-mobile {display:flex !important;} .mulk-emanet-opened .container {padding: 0;} .mulk-emanet-opened .container .first {background-color: white; border: 1px solid #F5F5F5; border-radius: 10px; padding: 12px; margin-left: 16px; width: calc(100% - 32px);} .mulk-emanet-opened .container .first .content .left .list .item .value span {font-size: 12px;} .mulk-emanet-opened .container .first .content .left {width: 100%;} .mulk-emanet-opened .container .first .content {width: 100%; margin-left: 0;} .mulk-emanet-opened .container .first .content .left .list {margin-top: 0;} .mulk-emanet-opened-c{ height: auto; margin-top: 64px; width: 100%; margin-left: 0px; margin-bottom: 100px; padding-bottom: 100px;} .mulk-emanet-opened .container .second .form .container .buttons .left {display:none;} .mulk-emanet-opened .container .second .form .container .buttons .right {width: 100%;} .mulk-emanet-opened .container .third .form .container .buttons .right{width: 100%;} .mulk-emanet-opened .container .fourth .form .buttons .right {width: 100%;} .mulk-emanet-opened .container .fifth .form .right .container .buttons .right {width: 100%;} .mulk-emanet-opened .container .second .form .container .buttons .right .button {width: 100%;} .mulk-emanet-opened .container .fifth .form .right .container .buttons .right .button {width: 100%;} .mulk-emanet-opened .container .fourth .form .buttons .right .button {width: 100%;} .mulk-emanet-opened .container .third .form .container .buttons .right .button {width: 100%;} .mulk-emanet-opened .container .second .form {background-color: white; border-radius: 10px; border: 1px solid #F5F5F5; margin-top: 16px; padding-bottom: 24px; margin-left: 16px; width: calc(100% - 32px);} .mulk-emanet-opened {height: auto; padding-bottom: 24px; background-color: transparent;} .mulk-emanet-opened .container .first .title {padding-left: 12px; padding-right: 12px; margin-top: 12px; height: auto;} .mulk-emanet-opened .container .first .info {padding-left: 12px; padding-right: 12px; margin-top: 16px; height: auto;} .mulk-emanet-opened .container .first .title span {font-size: 20px;} .mulk-emanet-opened .container .first .info p {font-size: 12px;} } .input-container input { position: relative; } input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; bottom: 0; color: transparent; cursor: pointer; height: auto; left: 0; position: absolute; right: 0; top: 0; width: auto; }