@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap'); :root { --color-theme: #006AFF; --color-theme-text: #FFFFFF; --color-background: #006AFF; --color-text: #545454; } * { box-sizing:border-box; } html, body { font-family: 'Hind',sans-serif; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ } h1,h2,h3,h4,h5,h6 { font-family: 'Hind',sans-serif; font-weight: 600; } h1 { font-size:24px; } body { overflow-x:hidden; background: var(--color-theme); color: var(--color-text); width:100%; margin: 0; } body > div:nth-child(1) { background: var(--color-background); display: flex; justify-content: center; align-items: center; min-height: calc(100vh); } #content { width:1400px; min-height:calc(100vh - 0px); margin-top:0; } @media only screen and (max-width:992px) { #content { width: 100vw; } } #wrapper { min-height: 100vh; align-items: initial !important; } #wrapper,#wrapper-center,#wrapper-content,#wrapper-activate { position: relative; display: flex; justify-content: center; align-items: center; margin: 0 0 0 220px; } #wrapper-center,#wrapper-activate { min-height:calc(100vh - 50px); } @media only screen and (max-width:992px) { #wrapper { min-height: calc(100vh - 50px); margin: 50px 0 0 0; } } @media only screen and (min-width:993px) { #sidebar { width: 220px; } } #page { width:1040px; min-height:calc(100vh); } @media only screen and (max-width:992px) { #page { width:100vw; min-height:calc(100vh - 50px); } } strong { font-weight:500; } .w3-white { color: var(--color-text) !important; } .w3-button { background: var(--color-theme) !important; color: var(--color-theme-text) !important; font-weight: 600; text-transform:uppercase; } .w3-button:hover { background: var(--color-theme) !important; color: var(--color-theme-text) !important; } .w3-btn { height:48px; padding:14px 8px 0px; font-weight: 600; text-transform:uppercase; } .w3-btn:hover{ box-shadow: none; } input,select { background-color: #FFFFFF !important; color: var(--color-text) !important; height: 48px; } input:focus ~ .floating-label, input:not(:focus):valid ~ .floating-label { top: 2px; left: 4px; font-size: 11px; opacity: 1; padding: 0 4px; } .inputText { width: 100%; border: none; padding: 14px 8px 0px; } select { padding: 14px 3px 0px !important; } .floating-label { position: absolute; pointer-events: none; color: #65618C; top: 14px; left: 8px; transition: 0.3s ease all; } .floating-label-fixed { position: absolute; pointer-events: none; font-size: 11px; color: #65618C; top: 2px; left: 8px; } .switch { position: relative; display: inline-block; width: 40px; height: 22px; margin-top:4px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .2s; transition: .2s; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .2s; transition: .2s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(18px); -ms-transform: translateX(18px); transform: translateX(18px); } .slider.round { border-radius: 22px; } .slider.round:before { border-radius: 50%; } .accordion__title { background-color: #F2F4F6; color: #415262; cursor: pointer; width: 100%; text-align: left; outline: none; font-size: 20px; font-weight: 500; transition: 0.4s; } .active { background-color: #415262; color: #fff; border: 1px solid #415262 !important; } .accordion__title:before { content: '\002B'; color: #415262; font-weight: bold; margin-right: 5px; } .active:before { content: "\2212"; color: #fff; } #loader { display: block; z-index: 101; } .loader,.full-loader { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border: 8px solid var(--color-theme); border-radius: 50%; border-top: 8px solid var(--color-background); -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } @media only screen and (min-width:993px) { .loader { margin: -96px 0 0 70px; } .full-loader { margin: -40px 0 0 -40px; } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }