html,
body {
    font-family: "Montserrat", sans-serif;
    margin: 0 auto;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: var(--black);
    margin: 0;
    padding: 0;
}

a {
    color: unset;
    text-decoration: none;
}

input::placeholder {
    font-family: "Montserrat", sans-serif;
}

button,
select,
input[type="number"],
input[type="text"],
input[type="password"],
input[type="date"] {
    font-family: "Montserrat", sans-serif;
    border: 1px solid #dddddd;
    outline: none;
    padding: 5px 15px;
}

input[type="checkbox"] {
    width: 17px;
    height: 17px;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

textarea {
    font-family: "Montserrat", sans-serif;
    border: 1px solid #dddddd;
    outline: none;
}

/** Custom Scroll Bar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #1b1b1b;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--red);
}

/** Custom Scroll Bar */
/** Backgrounds & Colors */
.bg-accent {
    background-color: var(--red);
}

.color-main-black {
    color: var(--black);
}

.bg-main-black {
    background-color: var(--black);
}

.color-main-gray {
    color: #85868c;
}

.bg-main-gray {
    background-color: #85868c;
}

.color-main-white {
    color: var(--white);
}

.bg-main-white {
    background-color: var(--white);
}

.color-main-light-gray {
    color: rgb(241, 241, 241, 0.6);
}

.bg-main-light-gray {
    background-color: var(--blue-gray);
}

.color-main-red {
    color: var(--red);
}

.bg-main-red {
    background-color: var(--red);
}

.color-main-blue {
    color: var(--light-blue);
}

.bg-main-blue {
    background-color: var(--light-blue);
}

.bg-main-blue:hover {
    transition-duration: 0.2s;
    background-color: var(--blue);
}

.color-main-green {
    color: var(--green);
}

.bg-main-green {
    background-color: var(--green);
}

.color-main-yellow {
    color: #e1da18;
}

.bg-main-yellow {
    background-color: #e1da18;
}

.bg-main-yellow:hover {
    transition-duration: 0.2s;
    background-color: #c2bc16;
}

/** Backgrounds & Colors */
/** Text */
.text-500 {
    font-weight: 500;
}

.text-700 {
    font-weight: 700;
}

.text-capitalize {
    text-transform: capitalize;
}

/** Text */
/** Shadows */
.shadow-xl {
    box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/** Shadows */
/** Borders */
.border-radius-s {
    border-radius: 8px;
}

/** Borders */
/** Floats */
.float-left {
    float: left;
}

.float-right {
    float: right;
}

/** Floats */
/** Display*/
.display-none {
    display: none;
}

.display-block {
    display: block;
}

.display-flex {
    display: flex;
}

/** Display*/
/** Hover */
.cursor-pointer {
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/** Hover */
/** Content */
section.content {
    position: relative;
    overflow: hidden;
}

section.content .full-section {
    width: 100%;
}

section.content .half-section {
    width: 50%;
}

section.content .full-section,
section.content .half-section {
    float: left;
    overflow: hidden;
    margin-bottom: 25px;
}

section.content .full-section div,
section.content .half-section div {
    margin-bottom: 12.5px;
}

/** Content */
@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 768px) {}

@media only screen and (min-width: 992px) {
    h1 {
        font-size: 32px;
        line-height: 32px;
    }

    p {
        font-size: 14px;
        line-height: 14px;
    }

    a {
        font-size: 12px;
        line-height: 12px;
    }

    input::placeholder {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 1px;
    }

    label,
    select,
    input[type="text"],
    input[type="password"],
    input[type="date"],
    input[type="number"] {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 1px;
        /* margin-left: 10px; */
    }

    /** Content */
    section.content {
        top: 110px;
        left: 180px;
        width: calc(100% - 280px);
        height: calc(100vh - 210px);
        padding: 50px;
    }

    /** Content */
}

@media only screen and (min-width: 1920px) {
    h1 {
        font-size: 36px;
        line-height: 36px;
    }

    p {
        font-size: 18px;
        line-height: 18px;
    }

    a {
        font-size: 16px;
        line-height: 16px;
    }

    input::placeholder {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 1px;
    }

    label,
    select,
    input[type="text"],
    input[type="password"],
    input[type="date"],
    input[type="number"] {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 1px;
        /* margin-left: 10px; */
    }

    /** Content */
    section.content {
        top: 110px;
        left: 300px;
        width: calc(100% - 400px);
        height: calc(100vh - 210px);
        padding: 50px;
    }

    /** Content */
}


:root {
    --black: #1b1b1b;
    --white: #FBFCFD;
    --red: #FF0000;
    --dark-red: #cf0a0a;
    --blue-gray: #F0F2F8;
    --gray: #C6C6C6;
    --dark-gray: #9c9da1 ;
    --alert-gray: #F9F9F9;
    --alert-lines-gray: #DDDDDD;
    --green: #0DBD00;
    --darkGreen: #0e9c04;
    --blue: #007DF9;
    --light-blue: #1F8DF9;
    --alice-blue: #E5F7FF;
    --icon-gray: #DDDDDD;
    --icon-red: #CF0A0A;
    --icon-yellow: #FFD300;
    --icon-orange: #FF5B00;
    --icon-green: #51AE32;
    --font: "Montserrat", sans-serif;
    --size24: 24px;
    --size18: 18px;
    --size16: 16px;
    --size14: 14px;
    --size12: 12px;
    --size10: 10px;
    --bold: 600;
    --semi-bold: 500;
    --normal: 300;
}

:host {
    --svg-color: #ddd;
}