@font-face {
    font-family: 'antonregular';
    src: url('/fonts/anton-regular/anton-regular-webfont.woff2') format('woff2'),
        url('/fonts/anton-regular/anton-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* background color vars */
    --primary-background-color: 23, 25, 35;
    --secondary-background-color: 37, 42, 55;
    --tertiary-background-color: 81, 85, 95;

    /* text color vars */
    --primary-text-color: 252, 253, 255;

    /* Headings */
    --primary-heading-color: 255, 45, 32;
    --secondary-heading-color: 255, 77, 156;


    /* border color vars */
    --primary-border-color: 30, 30, 30;

    /* hover opacity animations */
    --opacity-value-60: .6 !important;
    --opacity-value-50: .5 !important;
    --opacity-value-30: .3 !important;
    --opacity-value-20: .2 !important;
    --opacity-value-10: .1 !important;
    --opacity-value-0: .0 !important;
}

body {
    font-family:
        antonregular,
        Arial;
    background-color: rgba(var(--primary-background-color), 1) !important;
    color: rgba(var(--primary-text-color), 1) !important;

    margin: 0px !important;
    /* padding: 1.5rem !important; */
    padding-top: 0px !important;

    transition: background-color .5s;
}

/* clasify btn class && custom btn classes */
.btn {
    border-radius: 0px !important;
    margin: auto !important;
}

.btn-custom {
    width: 100%;
    display: inline-block;
    background-color: transparent;
    color: rgba(var(--primary-text-color), 1);
    border: 1px solid rgba(var(--primary-text-color), 1);

    transition: all .5s ease;
}

.btn-custom:hover {
    background-color: rgba(var(--primary-text-color), 1);
    color: rgba(var(--secondary-background-color), 1);
    border: 1px solid rgba(var(--primary-text-color), 1);

}

.btn-custom-small {
    display: inline-block;
    background-color: transparent;
    color: rgba(var(--primary-text-color), 1);
    border: 1px solid rgba(var(--primary-text-color), 1);

    transition: all .5s ease;
}

.btn-custom-small:hover {
    background-color: rgba(var(--primary-text-color), 1);
    color: rgba(var(--secondary-background-color), 1);
    border: 1px solid rgba(var(--primary-text-color), 1);

}

h1 {
    text-transform: uppercase;
    font-size: 500%;
    /* color: rgba(var(--secondary-background-color), 1); */
    color: rgba(var(--primary-heading-color), 1);
    /* text-shadow:
        -1px -1px 0px rgba(var(--primary-text-color), var(--opacity-value-30)),
        6px 6px 0px rgba(var(--primary-heading-color), var(--opacity-value-10)),
        4px 4px 0px rgba(var(--primary-heading-color), var(--opacity-value-30)),
        2px 2px 0px rgba(var(--primary-heading-color), var(--opacity-value-60)); */
}

h2,
h3,
h4 {
    text-transform: capitalize;
    color: rgba(var(--primary-heading-color), 1);
}

h2 {
    font-size: 300%;
}

h3 {
    font-size: 200%;
}

h4 {
    font-size: 150%;
}

p {
    font-family: arial;
}

hr {
    border-color: rgba(var(--primary-text-color), 1);
}

.container-inner>a {
    padding: 2px;
    color: rgba(var(--primary-heading-color), var(--opacity-value-60));
    transition: .5s all;
    /* border: 1px solid transparent; */
    border-bottom: 1px solid rgba(var(--primary-heading-color), 1);
}

.container-inner>a:hover {
    color: rgba(var(--primary-heading-color), 1);
    text-decoration: none;
}

/* body content variables */
.body-content {
    overflow: hidden;
    padding: 1rem !important;
    padding-top: 0px;
    margin-top: 1rem;
    width: 80%;
    min-height: 70vh;
}

.container-inner {
    display: inline-block;
    width: 100%;
    margin-bottom: 4rem;
}

.container-inner>img {
    width: 50%;
    max-width: 60%;
}

.codeindent {
    background-color: rgba(var(--tertiary-background-color), var(--opacity-value-30));
    padding: .20rem;
    color: rgba(var(--secondary-heading-color), .9);
}

/* HEADER */

.header {
    overflow: hidden;
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
    width: 100%;
    border: none;
    border-bottom: 2px solid rgba(var(--tertiary-background-color), 1);
    /* -webkit-box-shadow:
        5px 5px 0px 0px rgba(var(--primary-heading-color), var(--opacity-value-60)),
        10px 10px 0px 0px rgba(var(--primary-heading-color), var(--opacity-value-30)),
        15px 15px 0px 0px rgba(var(--primary-heading-color), var(--opacity-value-10));
    box-shadow:
        5px 5px 0px 0px rgba(var(--primary-heading-color), var(--opacity-value-60)),
        10px 10px 0px 0px rgba(var(--primary-heading-color), var(--opacity-value-30)),
        15px 15px 0px 0px rgba(var(--primary-heading-color), var(--opacity-value-10)); */
}


.header-svg>svg>path {
    stroke: rgba(var(--primary-heading-color), 1) !important;
    background-color: red;
}

/* FOOTER */

.footer {
    z-index: 2;
    margin-top: 2rem;
    position: relative;
    bottom: 0;

}

.footer-innerdata {
    margin: auto;


    padding: 2rem;
}

.footer>.data {
    background-color: rgba(0, 0, 0, 1);
}

.footer>.social {
    text-align: center;
    display: inline-block;
}

footer>.social>i {
    font-size: 300%;
}

.footer-col>a {
    color: white;
}

.footer>.social>span,
.footer>.social>i {
    color: rgba(var(--primary-text-color), 1);
    font-size: 300%;
}

.sup,
.sub {
    font-size: small;
    color: rgba(var(--primary-heading-color), 1);
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;
}

.sup {
    bottom: 1ex;
}

.sub {
    top: .5ex;
}

.req_res {
    margin: auto;
    margin-top: 0;
    width: 100%;
    height: 100%;
    padding: 1rem;
    color: rgba(var(--secondary-heading-color), .9);
    box-shadow: 5px 5px 10px 5px rgba(var(--primary-text-color), .08);
    -webkit-box-shadow: 5px 5px 10px 5px rgba(var(--primary-text-color), .08);
    -moz-box-shadow: 5px 5px 10px 5px rgba(var(--primary-text-color), .08);
    border: 1px solid transparent;
    border-radius: 5px;
}

.req_res>p,
.req_res>h1,
.req_res>h2,
.req_res>h3,
.req_res>h4,
.req_res>h5 {
    margin: auto;
    text-align: justify;
    padding: auto;
}

.req_res>.container>pre {
    color: rgba(var(--primary-text-color), 1);
}

.left {
    margin-right: 2%;
}

.right {
    margin-left: 2%;
}

/***************************************************
 * Generated by SVG Artista on 8/3/2022, 10:40:06 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-stroke-1 {
    0% {
        stroke-dashoffset: 5099.75634765625px;
        stroke-dasharray: 5099.75634765625px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 5099.75634765625px;
    }
}

@keyframes animate-svg-stroke-1 {
    0% {
        stroke-dashoffset: 5099.75634765625px;
        stroke-dasharray: 5099.75634765625px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 5099.75634765625px;
    }
}

@-webkit-keyframes animate-svg-fill-1 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 45, 31);
    }
}

@keyframes animate-svg-fill-1 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 45, 31);
    }
}

.svg-elem-1 {
    -webkit-animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
        animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
    animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
        animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
    0% {
        stroke-dashoffset: 5099.75634765625px;
        stroke-dasharray: 5099.75634765625px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 5099.75634765625px;
    }
}

@keyframes animate-svg-stroke-2 {
    0% {
        stroke-dashoffset: 5099.75634765625px;
        stroke-dasharray: 5099.75634765625px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 5099.75634765625px;
    }
}

.svg-elem-2 {
    -webkit-animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
        animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
    animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
        animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
    0% {
        stroke-dashoffset: 10693.9140625px;
        stroke-dasharray: 10693.9140625px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 10693.9140625px;
    }
}

@keyframes animate-svg-stroke-3 {
    0% {
        stroke-dashoffset: 10693.9140625px;
        stroke-dasharray: 10693.9140625px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 10693.9140625px;
    }
}

.svg-elem-3 {
    -webkit-animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
        animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
    animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
        animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
    0% {
        stroke-dashoffset: 1933.298828125px;
        stroke-dasharray: 1933.298828125px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 1933.298828125px;
    }
}

@keyframes animate-svg-stroke-4 {
    0% {
        stroke-dashoffset: 1933.298828125px;
        stroke-dasharray: 1933.298828125px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 1933.298828125px;
    }
}

@-webkit-keyframes animate-svg-fill-4 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(37, 42, 55);
    }
}

@keyframes animate-svg-fill-4 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(37, 42, 55);
    }
}

.svg-elem-4 {
    -webkit-animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
        animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
    animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
        animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}


/* inputs */

input[type='text'],
input[type='password'],
input[type='username'],
input[type='email'],
.textarea_upload {
    font-family: Arial;
    border: none;
    border-bottom: 2px solid rgba(var(--primary-heading-color), 1);
    background-color: transparent;
    border-radius: 0px !important;
    color: rgba(var(--primary-text-color), 1);
    transition: all .5s ease;
}
.textarea_upload {
    background-color: rgba(var(--secondary-background-color),1) !important;
}

input[type='text']:hover,
input[type='password']:hover,
input[type='username']:hover,
input[type='email']:hover,
input[type='text']:active,
input[type='password']:active,
input[type='username']:active,
input[type='email']:active,
input[type='text']:focus,
input[type='password']:focus,
input[type='username']:focus,
input[type='email']:focus,
.textarea_upload:focus {
    border: none;
    border-bottom: 2px solid rgba(var(--primary-heading-color), 1);
    background-color: transparent;
    color: rgba(var(--primary-text-color), 1);
    -webkit-box-shadow:
        5px 5px 0px 0px rgba(var(--primary-heading-color), var(--opacity-value-60)),
        10px 10px 0px 0px rgba(var(--primary-heading-color), var(--opacity-value-30)),
        15px 15px 0px 0px rgba(var(--primary-heading-color), var(--opacity-value-10));
    box-shadow:
        5px 5px 0px 0px rgba(var(--primary-heading-color), var(--opacity-value-60)),
        10px 10px 0px 0px rgba(var(--primary-heading-color), var(--opacity-value-30)),
        15px 15px 0px 0px rgba(var(--primary-heading-color), var(--opacity-value-10));
}


/* body tables */
.table_custom {
    font-family: Arial;
}

.table_custom>th {
    width: auto !important;
}

table.dataTable tbody tr {
    color: rgba(var(--primary-text-color), 1) !important;
    background-color: transparent !important;
}

.dataTables_length>label>select,
.dataTables_filter>label {
    font-family: Arial;
    color: rgba(var(--primary-text-color), 1) !important;
    background-color: transparent !important;
}

.dataTables_length>label>select>option,
.dataTables_filter>label>input {
    font-family: Arial;
    color: rgba(var(--primary-text-color), 1) !important;
    background-color: rgba(var(--primary-background-color), 1) !important;
}


.paginate_button:hover {
    background-color: transparent !important;
}

.card {
    background-color:transparent;
    border: 1px solid transparent;
}

.card-header {
    background-color: rgba(var(--secondary-background-color),1);
}