body {
    --action-primary-color: rgba(0,159,227,1);
    --alert-watched-color: rgba(255,255,0,1);
    --warning-new-color: rgba(255,0,175,1);
}

.loading {
    align-items: center;
    -webkit-align-items: center;
    background-color: rgb(0 0 0 /50%);
    box-sizing: border-box;
    display: -webkit-flex;
    font-size: 16px;
    justify-content: center;
    -webkit-justify-content: center;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 99999999;
}

.large-indicator {
    display: flex;
    display: -webkit-flex;
}

.large-indicator div {
    height: 1em;
    margin-right: 1em;
    width: 1em;
}

.large-indicator div {
    animation-duration: 0.9s, 2.7s;
    -webkit-animation-duration: 0.9s, 2.7s;
    animation-name: blink, rainbow;
    -webkit-animation-name: blink, rainbow;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

.large-indicator div:nth-of-type(2) {
    animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}

.large-indicator div:nth-of-type(3) {
    animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    33% {
        opacity: 1;
    }

    66% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }

    33% {
        opacity: 1;
    }

    66% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes rainbow {
    0% {
        background-color: var(--action-primary-color);
    }

    33% {
        background-color: var(--action-primary-color);
    }

    33.5% {
        background-color: var(--warning-new-color);
    }

    66.5% {
        background-color: var(--warning-new-color);
    }

    67% {
        background-color: var(--alert-watched-color);
    }

    100% {
        background-color: var(--alert-watched-color);
    }
}

@-webkit-keyframes rainbow {
    0% {
        background-color: var(--action-primary-color);
    }

    33% {
        background-color: var(--action-primary-color);
    }

    33.5% {
        background-color: var(--warning-new-color);
    }

    66.5% {
        background-color: var(--warning-new-color);
    }

    67% {
        background-color: var(--alert-watched-color);
    }

    100% {
        background-color: var(--alert-watched-color);
    }
}


.material-icons-bg{
    background-color: white;
    padding: 6px;
    border-radius: 100%;
}
.tab-menu {
    display:block;
    margin:0;
    padding:0;
}
.tab-menu li {
    list-style:none;
    display:inline-block;
    margin:0 3px 2px 0
}
.tab-menu li a {
    display:block;
    color:#666;
    padding:15px;
    font-size:14px;
    font-family: Arial;
    text-decoration:none;
}
.tab-content {
    display:none
}
#tab1 {
    display:block
}
.tab-container {
    font-family: Arial;
    font-size:14px;
    color:#666
}
.current a {
    color:#39375B !important;
    border-radius: 4px;
    text-decoration: underline;
    background: #F3F4F5;
    box-shadow: inset 5px -5px 10px #e4e5e6,
    inset -5px 5px 10px #ffffff;
}
.page-item .page-link{

    color: #39375B;
    font-size: 15px;
    margin-left: 10px;
    border: 2px solid white;
    border-radius: 46px;
    background: white;

}
.page-item.active .page-link {
    border-radius: 8px;
    color: #fff;
    background-color: #39375B;
    border:2px  white ;
}
.page-item:last-child .page-link {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}
.page-item:first-child .page-link {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.error-section{
    color: white;
    background-color: #E0405A;
    margin: 3px 0px;
    border-radius: 5px;
    padding: 15px 5px;
    font-size: 14px!important;
}
.success-section{
    color: white;
    background-color: #3ECE7E;
    padding: 3px 0px;
    margin: 3px 0px;
    border-radius: 5px;
}


::-webkit-input-placeholder {
    font-size: 25px;
}

:-moz-placeholder { /* Firefox 18- */
    font-size: 25px;
}

::-moz-placeholder {  /* Firefox 19+ */
    font-size: 25px;
}

/* Overriding styles */

::-webkit-input-placeholder {
    font-size: 13px!important;
}

:-moz-placeholder { /* Firefox 18- */
    font-size: 13px!important;
}
::-moz-placeholder {  /* Firefox 19+ */
    font-size: 13px!important;
}

#clipboard-canvas{
    margin: 10px auto;
    width: 90%;
    border: 1px dashed #A9A9C2;
    border-radius: 7px;
}