.htmlMain { Background: #EDEDED; min-height: 100%; display: flex; flex-direction: column; scroll-behavior: smooth; font-family: 'Roboto'; } .bodyMain { background: unset; display: flex; flex-direction: column; align-items: center; flex-grow: 1; min-height: 100vh; position: relative; letter-spacing: 1px; font-size: 18px; line-height: 1.5; word-break: break-word; color: #434343; text-shadow: 0 0 1px rgba(0,0,0,0.15); font-weight: 500; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.15); } ::-webkit-scrollbar-thumb { max-width: 10px; border-radius: 2px; background-color: #4c82a3; cursor: grab; } .secMain { width: 100%; display: flex; flex-direction: column; align-items: center; } .containerMain { max-width: 1400px; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: end; padding: 0 10px 0 10px; position: relative; } .containerMain.containerMainFullHeight { flex-grow: 1; } .secMain.secMainBody { flex-grow: 1; } p { margin: 0; } .secMainFooterInsideTopSec.secMainFooterInsideTopSecLeft { grid-gap: 25px; } @media (max-width: 768px) { .secMainFooterInsideTopSec.secMainFooterInsideTopSecLeft { justify-content: center; align-items: center; } } .secMainFooterInsideTopSec.secMainFooterInsideTopSecMid { } .secMainFooterInsideTopSec.secMainFooterInsideTopSecRight { } .btnMain { transition: ease 0.2s; width: auto; border-radius: 4px; outline: unset; border: unset; background: unset; color: #ffffff; background: #4c82a3; font-weight: 500; font-size: 14px; padding: 8px 15px; white-space: nowrap; display: flex; flex-direction: row; grid-gap: 12px; justify-content: center; align-items: center; text-decoration: unset; position: relative; cursor: pointer; } .btnMain:hover { transition: ease 0.2s; background: #5e8eab; color: white; } .btnMain:active { transition: ease 0.2s; background: #447592; color: white; } .linkMain { transition: ease 0.4s; color: #4c82a3; text-decoration: unset; } .linkMain:hover { transition: ease 0.4s; color: #4c82a3; text-decoration: underline; } .linkMain.linkMainAlt { color: #ffffff; text-decoration: underline; } .btnMainImg { border-radius: 100px; width: 20px; height: 20px; background: rgb(255,255,255); } .btnMainIcon { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 14px; } .secMainBodySec { width: 100%; display: flex; flex-direction: column; padding: 25px 0px; align-items: center; } .secMainBodySecInside { width: 100%; display: flex; flex-direction: column; } h1, h2, h3, h4, h5, h6 { margin: 0; } .searchMain { overflow: hidden; border-radius: 4px; display: flex; flex-direction: row; grid-gap: 0px; outline: solid 1px #dddddd; background: white; } @media (max-width: 768px) { .searchMain { width: 100%; } } .inputMain { border-radius: 4px; border: solid 1px rgba(0,0,0,0.15); padding: 5px 10px; font-size: 16px; width: 100%; background: linear-gradient(rgba(0,0,0,0.00), rgba(0,0,0,0.00) 100%), linear-gradient(white, white); } .inputMain:focus { border: solid 1px rgba(0,0,0,0.15); outline: none; background: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05) 100%), linear-gradient(white, white); } .inputMain.searchMainInput { border: unset; border-radius: 0px; } .btnMain.searchMainBtn { border-radius: 0px; } .dropdownMain { } .btnMain.dropdownMainBtn { width: 100%; justify-content: space-between; height: 100%; } .dropdown-menu.dropdownMainMenu { background: #ffffff; border: unset; border-radius: 4px; padding: 5px 5px 0px 5px; margin: 3px 0 0 0!important; box-shadow: 0 0 4px 0 rgb(0,0,0,0.25); width: 100%; clip-path: inset(0 0 0 0); } .dropdown-item.dropdownMainMenuItem { transition: ease 0.2s; border-radius: 4px; color: #696969; background: white; font-weight: 500; font-size: 14px; margin: 0 0 5px 0; padding: 5px 10px; display: flex; flex-direction: row; align-items: center; grid-gap: 10px; } .dropdown-item.dropdownMainMenuItem:hover { transition: ease 0.2s; color: #ffffff; background: #4c82a3; } .fieldWrapper { display: flex; flex-direction: column; grid-gap: 5px; } .labelMain { font-size: 16px; margin: 0; } .labelMain.labelMainWhite { } .inputMain.inputMainAlt { background: rgba(255,255,255,0.1); border: solid 1px rgba(255,255,255,0.15); color: white; } .inputMain.inputMainAlt::placeholder { color: rgba(255,255,255,0.2); } .checkboxWrapper { display: flex; flex-direction: row; grid-gap: 10px; align-items: center; } .labelMain.labelMainCheckbox { font-size: 13px; color: rgba(0,0,0,0.5); text-align: start; } .checkboxMain { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 18px; height: 18px; content: ''; border: solid 1px #4c82a3; border-radius: 2px; cursor: pointer; position: relative; background: rgba(0,0,0,0.1); font-family: 'Roboto'; } .checkboxMain::before { content: '\2714'; color: rgba(0,0,0,0.15); font-size: 10px; text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .checkboxMain:checked::before { content: '\2714'; color: #ffffff; font-size: 7px; text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #4c82a3; display: flex; flex-direction: column; justify-content: center; align-items: center; } .filesPageSecSidesSecToolsItemIcon { font-size: 15px; } .btnMainInputFile { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; cursor: pointer; } .btnMain.filesPageSecMidActionsBottomBtn { width: 100%; max-width: 300px; } .secMainFooter2 { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px 0; border-top: solid 1px rgba(0,0,0,0.1); } .secMainFooter2Inside { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .secMainFooter2InsideText { text-align: center; color: rgba(0,0,0,0.5); font-size: 12px; } .checkboxWrapper.checkboxWrapperAlt { border-radius: 4px; background: rgba(255,255,255,0); color: white; border: solid 1px rgba(0,0,0,0.1); overflow: hidden; } .checkboxMain.checkboxMainAlt { height: 100%; min-height: 25px; width: 25px; border: 0px; border-radius: 0px; } .checkboxMain.checkboxMainAlt::before { font-size: 14px; } :root { --bs-font-sans-serif: usnet; --bs-font-monospace: unset; --bs-body-font-family: unset; } .alertMain { width: 100%; border-radius: 5px; padding: 10px 15px; background: rgba(255,255,255,0.5); text-align: start; font-size: 14px; font-weight: 500; color: #434343; display: flex; flex-direction: column; grid-gap: 5px; position: relative; outline: solid 1px rgba(0,0,0,0.15); } .alertMain > .alertMainText { } .alertMain > .alertMainText.alertMainTextTitle { font-size: 12px; color: rgba(0,0,0,0.5); } .alertMain.alertMainRed > .alertMainText.alertMainTextTitle { font-size: 12px; color: rgba(255,255,255,0.75); } .alertMain.alertMainRed { background: #ff7c64; color: white; } .alertMain.alertMainGreen { background: #7ec97e; color: #434343; } .btnMain.alertMainBtn { background: unset; position: absolute; top: 0; right: 0; padding: 10px; font-size: 4px; } .alertMain > .btnMain.alertMainBtn { color: #434343; } .alertMain.alertMainRed > .btnMain.alertMainBtn { color: #ffffff; } .toggleMain { overflow: hidden; border-radius: 4px; position: relative; width: calc(50px + 2px); height: 26px; background: rgb(76,130,163); justify-content: center; align-items: center; box-shadow: inset 0 0 8px 0 rgb(0,0,0,0.15); } .toggleMain > div { background: white; box-shadow: 0 0 4px 0 rgb(0,0,0,0.15); } .toggleMainBall { transition: ease 0.2s; width: 18px; height: 18px; border-radius: 2px; position: absolute; top: 4px; left: 4px; right: 100%; } .toggleMainBall.toggleMainBallChecked { transition: ease 0.2s; left: calc(100% - 20px - 3px); right: 0%; } .toggleMainCheckbox { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .toggleMain.toggleMainAlt { background: #ffffff; outline: solid 2px #4c82a3; } .toggleMain.toggleMainAlt > div { background: #4c82a3; } .secMainBodySecInsideTitle { width: 100%; display: flex; flex-direction: row; grid-gap: 0px; margin: 0 0 15px 0; grid-gap: 10px; } .inputMainWrapperBtns { display: flex; flex-direction: row; grid-gap: 10px; } .btnMain.btnMainRed { background: #ff6347; } .btnMain.btnMainRed:hover { background: #ff7f68; } .inputMainWrapperText { font-size: 14px; color: rgba(0,0,0,0.75); font-weight: 400; padding: 0 0 0 5px; }