:root{
    --blue-icon: #3a86ff;
    --green-icon: #4bc703;
    --disabled-icon: #d2d2d2;
    --redish-icon: #ff3d00;
}

body {
    background-color: #ffffff;
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23C9F6FF'/%3E%3Cstop offset='1' stop-color='%23CEC5FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='24' height='24' patternUnits='userSpaceOnUse'%3E%3Ccircle fill='%23ffffff' cx='12' cy='12' r='12'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0.1'/%3E%3C/svg%3E");*/
    /*background-image: url('/images/purple_background.svg');*/
    /*background-attachment: fixed;*/
    background-color: #ccc;
}

.container{
    background-color: #fff;
    padding:0;
    height:calc(100vh - 60px);
    position:relative;
    overflow:auto;
    border-radius: 0 0 5px 5px;
}
.redish{
    color: var(--redish-icon);
}
.greenish{
    color: var(--green-icon);
}
.blueish{
    color: var(--blue-icon);
}

.pointer{
    cursor: pointer !important;
}
.menu-logo{
    height: 80px;
    margin-right: 10px;
}

.my-navbar {
    background-color: #f9f9f9;
    display: grid;
    grid-template-columns: 3fr 6fr 1fr;
    padding-bottom:20px;
    /*border-bottom:1px solid #ccc;*/
}

.my-navbar div {
    display: flex;
    align-items: center;
}

.my-navbar button {
    margin-right:20px;
}
.my-navbar label{
    margin-left:50px;
    position:relative;
    top:-10px;
    color:#999;
    font-size:1.4em;
}
.my-navbar ul{
    display:flex;
    align-items: flex-end;;
    margin-right:50px;
    margin-bottom:-21px;
}
.my-navbar ul li{
    text-align:center;
    padding:30px 10px 8px 10px;
    border-radius: 10px 10px 0 0;
    margin: 0 8px;
    background-color:#f6f6f6;
    color:#777;
    border-top:1px solid #ebebeb;
    border-left:1px solid #ebebeb;
    border-right:1px solid #ebebeb;
    /*border-bottom:1px solid #ccc;*/
}
.my-navbar ul li:hover{
    background-color:#f9f9f9;
    color:#666;
    cursor:pointer;
}
.my-navbar ul li.active{
    border-bottom : none;
    background-color:#fff;
    border-top:1px solid ForestGreen;
    border-left: 1px solid ForestGreen;
    border-right: 1px solid ForestGreen;
    color: ForestGreen;
}
.logout-btn{
    position:relative;
    top:-45px;
    right:40px;
    font-size:1.2rem;
    color:#999;
    cursor:pointer;
}
.logout-btn:hover{
    color:#666;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.documents-list li{
    display:grid;
    grid-template-columns:1fr 8fr ;
    gap:15px;
    padding:5px 0 5px 15px;
    border-bottom:1px solid #b2b2b2;
    margin-bottom: 10px;
}

.code-holder {
    position: relative;
    height: 750px;
    background-color: #fff;
    margin-top: 50px;
    padding: 20px;
    /*border: 1px solid #ebebeb;*/
    /*border-radius: 25px;*/
    /*box-shadow: #aaa 2px 5px 2px*/
}

.logo-picture {
    display: block;
    height: 80px;
    width: auto;
    margin:25px 25px 25px 50px;
}

h2 {
    margin-top: 40px;
    text-align: center;
    color: #444;
}

p {
    padding: 0 25px;
    width: 100%;
    /*text-align: center;*/
    /* color: #444; */
}

.sms-code-input {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    font-size: 2em !important;
    padding: 10px;
    text-align: center;
    border-radius: 15px;
    border-color: #ebebeb;
    box-shadow: none;
    height: 70px !important;
    spacing: 1.2em;
    text-spacing: 1.2em;
    letter-spacing: 8px;
}

.sms-code-input:focus {
    border-color: green;
}

.sms-code-input::placeholder {
    color: #d2d2b2;
    letter-spacing: 2px;
}


.waiter {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    height: 150vh;
    overflow: hidden;
}

.circle {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle:before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
}

.circle-1 {
    background-color: #49b8e5;
}

.circle-1:before {
    background-color: #49b8e5;
    animation-delay: 200ms;
}

.circle-2 {
    background-color: #1e98d4;
}

.circle-2:before {
    background-color: #1e98d4;
    animation-delay: 400ms;
}

.circle-3 {
    background-color: #2a92d0;
}

.circle-3:before {
    background-color: #2a92d0;
    animation-delay: 600ms;
}

.circle-4 {
    background-color: #3a88c8;
}

.circle-4:before {
    background-color: #3a88c8;
    animation-delay: 800ms;
}

.circle-5 {
    background-color: #507cbe;
}

.circle-5:before {
    background-color: #507cbe;
    animation-delay: 1000ms;
}

@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%, 75% {
        transform: scale(2.5);
    }
    78%, 100% {
        opacity: 0;
    }
}
.message-page{
    padding: 25px 25px 10px;
    /*border-radius: 25px;*/
    /*border: 1px solid #ebebeb;*/
    /*box-shadow: #aaa 2px 5px 2px;*/
    background-color: #fff;
}
.secured-message{
    margin-top: 10px;
    padding: 25px;
    border-radius:5px;
    background-color: #f9f9f9;
}
.reply-btn{
    border:none;
    display:block;
    width:auto;
    position:absolute;
    top:0px;
}
.site-footer {
    margin: 0 auto;
    padding: 0;
    max-width: 820px;
    position: relative;
    top:15px;
}
.site-footer__fineprint {
    font-size: 0.9rem;
    line-height: 1.3;
    font-weight: 300;
    text-align: center;
    color:#666;
}
/* Hide the up and down arrows for number input */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

.overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}
.loader {
    width: 100px;
    height: 100px;
    border: 6px dotted #FFF;
    border-style: solid solid dotted dotted;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 2s linear infinite;
    left: 50%;
        margin-left:-50px;
    margin-top: 30px;
}
.overlay > h3{
    color: #fff;
    text-align: center;
    font-size: 1.5em;
    margin-top: 20%;
}
.loader::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 6px dotted #FF3D00;
    border-style: solid solid dotted;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    animation: rotationBack 1s linear infinite;
    transform-origin: center center;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}