:root {
    --primarycolor: rgb(0, 71, 171);
    --lightprimary: rgb(145, 195, 253);
    --secondarycolor: rgb(10, 73, 158);
    --whitesmoke: rgb(245, 245, 245);
    --lightgray: #eeeeee;
    --white: #ffffff;
    --green: rgb(34, 139, 34);
    --darkgreen: rgb(0, 100, 0);
    --blue: rgb(0, 71, 171);
    --bluehover: rgb(0, 115, 207);
    --candyred: rgb(255, 8, 0);
    --candyredhover: rgb(151, 10, 5);
    --black: #000000;
    --emailHeaderColor: #2f1c68;
    --yellowcolor: #FFD800;
    --yellowhover: #d8b807;
    --gray: rgb(92, 92, 92);
}

[x-cloak] {
    display: none;
}


/* Primary color */

.primary-text {
    color: var(--primarycolor);
}

.primary-bg {
    background-color: var(--primarycolor) !important;
}


/* Secondary color */

.secondary-text {
    color: var(--secondarycolor);
}

.secondary-bg {
    background-color: var(--secondarycolor);
}


/* Yellow color */

.yellow-text {
    color: var(--yellowcolor);
}

.yellow-bg {
    background-color: var(--yellowcolor);
}

.yellow-hover-bg {
    background-color: var(--yellowcolor);
}

.yellow-hover-bg:hover {
    background-color: var(--yellowhover);
}


/* end of yellow color */


/* red color */

.red-text {
    color: var(--candyred);
}

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


/* dark red color */

.dark-red-text {
    color: var(--candyredhover);
}

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


/* Gray color */

.gray-text {
    color: var(--gray);
}

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

.gray-primary-hover-text {
    color: var(--gray);
}

.gray-primary-hover-text:hover {
    color: var(--primarycolor);
}


/* end of gray color */


/* green color */

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

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


/* dark green color */

.dark-green-text {
    color: var(--darkgreen);
}

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


/* white color */

.white-text {
    color: var(--white) !important;
}

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


/* White Smoke color */

.white-smoke-text {
    color: var(--whitesmoke) !important;
}

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


/* white gray bg... */

.white-gray-hover-bg {
    background-color: transparent;
}

.white-gray-hover-bg:hover {
    background-color: var(--lightgray);
}


/* end of white gray bg */


/* blue color */

.blue-text {
    color: var(--blue);
}

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


/* Dark blue color */

.dark-blue-text {
    color: var(--bluehover);
}

.dark-blue-bg {
    background-color: var(--bluehover);
}


/* Black color */

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

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


/* Light primary color */

.light-primary-text {
    color: var(--lightprimary);
}

.light-primary-bg {
    background-color: var(--lightprimary);
}


/* Light gray color */

.lightgray-text {
    color: var(--lightgray);
}

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


/* Hoverable states */


/* Primary hover state */

.primary-hover-text {
    color: var(--primarycolor);
}

.primary-hover-text:hover {
    color: var(--secondarycolor);
}

.primary-hover-bg {
    background-color: var(--primarycolor) !important;
}

.primary-hover-bg:hover {
    background-color: var(--secondarycolor) !important;
}


/* End of Primary hover state */


/* Secondary hover */

.secondary-hover-text {
    color: var(--secondarycolor);
}

.secondary-hover-text:hover {
    color: var(--primarycolor);
}

.secondary-hover-bg {
    background-color: var(--secondarycolor);
}

.secondary-hover-bg:hover {
    background-color: var(--primarycolor);
}


/* transparent text */

.transparent-text {
    color: transparent !important;
    visibility: hidden;
}


/* end of transparent text */


/* end of secondary hover */


/* Green hover state */

.green-hover-text {
    color: var(--green);
}

.green-hover-text:hover {
    color: var(--darkgreen);
}

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

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


/* end of green hover state */


/* Dark Green hover */

.dark-green-hover-text {
    color: var(--darkgreen);
}

.dark-green-hover-text:hover {
    color: var(--green);
}

.dark-green-hover-bg {
    background-color: var(--darkgreen);
}

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


/* end of dark green hover */


/* Blue hover state */

.blue-hover-text {
    color: var(--blue);
}

.blue-hover-text:hover {
    color: var(--bluehover);
}

.blue-hover-bg {
    background-color: var(--blue) !important;
}

.blue-hover-bg:hover {
    background-color: var(--bluehover) !important;
}


/* end of blue hover state */


/* Dark blue hover state */

.dark-blue-hover-text {
    color: var(--bluehover);
}

.dark-blue-hover-text:hover {
    color: var(--blue);
}

.dark-blue-hover-bg {
    background-color: var(--bluehover);
}

.dark-blue-hover-bg:hover {
    background-color: var(--blue);
}


/* end of dark blue hover state */


/* Red hover state */

.red-hover-text {
    color: var(--candyred);
}

.red-hover-text:hover {
    color: var(--candyredhover);
}

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

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


/* end of red hover state */

.form-outline {
    outline: transparent !important;
}


/* form outline */

.form-outline:focus {
    outline: none !important;
    border: 1px solid lightgray !important;
}


/* Dark red hover state */

.dark-red-hover-text {
    color: var(--candyredhover);
}

.dark-red-hover-text:hover {
    color: var(--candyred);
}

.dark-red-hover-bg {
    background-color: var(--candyredhover);
}

.dark-red-hover-bg:hover {
    background-color: var(--candyred);
}


/* end of dark red hover state */


/* End of Hoverable states */


/* Gradient section */

.primary-gradient {
    background: var(--primarycolor);
    background: linear-gradient(90deg, var(--primarycolor) 70%, var(--secondarycolor) 100%);
}


/* end of gradient section */

.primary-active {
    background-color: var(--white);
    color: var(--primarycolor);
}


/* small text */

.small-text {
    font-size: 12px;
}

.white-hover-bg:hover {
    background-color: var(--whitesmoke);
    color: var(--primarycolor);
}

.submit-button-white-hover-bg {
    background-color: var(--white);
    color: var(--primarycolor);
}

.submit-button-white-hover-bg:hover {
    background-color: var(--primarycolor);
    color: var(--white);
    border: 2px solid white;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}


/* Hide scrollbar for Chrome, Safari and Opera */

.no-scrollbar::-webkit-scrollbar {
    display: none;
}


/* Hide scrollbar for IE, Edge and Firefox */

.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}


/* Fancy scrollbar */

.scrollbar::-webkit-scrollbar {
    display: block;
    width: 5px;
    height: 5px;
    cursor: auto;
}

.scrollbar {
    scrollbar-width: 5px;
    cursor: auto;
}

.scrollbar::-webkit-scrollbar-track {
    background: var(--primarycolor);
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: rgb(200, 200, 200);
    border: 1px solid transparent;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.scrollbar::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 10px;
}

.scrollbar::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 10px;
}


/* Body Fancy scrollbar */

.body-scrollbar::-webkit-scrollbar {
    display: block;
    width: 10px;
    height: 5px;
}

.body-scrollbar {
    scrollbar-width: 10px;
}

.body-scrollbar::-webkit-scrollbar-track {
    background: var(--lightgray);
}

.body-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgb(200, 200, 200);
    border: 1px solid transparent;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.body-scrollbar::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 10px;
}

.body-scrollbar::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 10px;
}


/* Table scrollbar */

.table-scrollbar::-webkit-scrollbar {
    display: block;
    width: 5px;
    height: 5px;
    cursor: auto;
}

.table-scrollbar {
    scrollbar-width: 5px;
    cursor: auto;
}

.table-scrollbar::-webkit-scrollbar-track {
    background: var(--lightgray);
}

.table-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgb(200, 200, 200);
    border: 1px solid transparent;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.table-scrollbar::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 10px;
}

.table-scrollbar::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 10px;
}


/* Body Fancy scrollbar */

.body-scrollbar::-webkit-scrollbar {
    display: block;
    width: 10px;
    height: 5px;
}

.body-scrollbar {
    scrollbar-width: 10px;
}

.body-scrollbar::-webkit-scrollbar-track {
    background: var(--lightgray);
}

.body-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgb(200, 200, 200);
    border: 1px solid transparent;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.body-scrollbar::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 10px;
}

.body-scrollbar::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 10px;
}


/* set s primary borders */

.primary-border-1 {
    border: 1px solid var(--primarycolor);
}

.primary-border-2 {
    border: 2px solid var(--primarycolor);
}

.primary-border-3 {
    border: 3px solid var(--primarycolor);
}

.primary-border-4 {
    border: 4px solid var(--primarycolor);
}

.primary-border-5 {
    border: 5px solid var(--primarycolor);
}


/* End of primary borders */


/* Light gray border */

.lightgray-border-1 {
    border: 1px solid var(--lightgraycolor);
}

.lightgray-border-2 {
    border: 2px solid var(--lightgrayColor);
}

.lightgray-border-3 {
    border: 3px solid var(--lightgraycolor);
}

.lightgray-border-4 {
    border: 4px solid var(--lightgraycolor);
}

.lightgray-border-5 {
    border: 5px solid var(--lightgraycolor);
}


/* end of light gray border */


/* Green border */

.green-border-left-1 {
    border-left: 1px solid var(--green);
}


/* end of green border */


/* outline */


/* Primary Outline */

.primary-outline-1 {
    outline: 1px solid var(--primarycolor);
}

.primary-outline-2 {
    outline: 2px solid var(--primarycolor);
}

.primary-outline-3 {
    outline: 3px solid var(--primarycolor);
}

.primary-outline-4 {
    outline: 4px solid var(--primarycolor);
}

.primary-outline-5 {
    outline: 5px solid var(--primarycolor);
}


/* end of primary outline */


/* end of outline */


/* Focus border section */

.primary-border-1-focus:focus {
    border: 1px solid var(--gray);
    box-shadow: 1px 1px 1px var(--primarycolor), -1px -1px 1px var(--primarycolor);
}


/* end of focus border section */


/* Primary and white hover state */

.white-primary-hover {
    background-color: var(--white);
    color: var(--primarycolor);
    border: 1px solid var(--primarycolor);
}

.white-primary-hover:hover {
    background-color: var(--primarycolor);
    color: var(--white);
    border: none;
}

.black-border-1 {
    border: 1px solid var(--black) !important;
}


/* end of this section */


/* Transition class */

.transition {
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}


/* end of transition class */


/* Tranform section */

.transform-scale:hover {
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
}


/* end of transform */


/* Table font size */

.table-header-text {
    font-size: smaller;
}


/* end of table font size */


/* Alert style */

.alert {
    position: fixed;
    right: 1vw !important;
    top: 70px;
    z-index: 100;
}


/* end of alert style */

#alert {
    display: block;
    animation: disappear 0.3s ease-in-out;
    -webkit-animation: disappear 0.3s ease-in-out;
    -ms-animation: disappear 0.3s ease-in-out;
    -o-animation: disappear 0.3s ease-in-out;
    -moz-animation: disappear 0.3s ease-in-out;
}

@keyframes disappear {
    0% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        opacity: 1;
    }
}

@-moz-keyframes disappear {
    0% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        opacity: 1;
    }
}

@-o-keyframes disappear {
    0% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes disappear {
    0% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        opacity: 1;
    }
}

@keyframes disappear {
    0% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        opacity: 1;
    }
}

.header-section {
    background-image: url('../images/support2.jpg') !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-clip: border-box;
    height: 400px !important;
    width: 100% !important;
    object-fit: cover;
}


/* Disabled button */

.disabled-button {
    background-color: lightgrey;
    color: grey;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    cursor: not-allowed;
}

.overlay-container {
    background-image: url('../images/4.jpg');
    background-size: cover !important;
    height: 500px !important;
    background-attachment: fixed !important;
    position: relative !important;
    background-color: var(--primarycolor);
}

.overlay-section {
    position: absolute;
    top: 0px !important;
    left: 0px !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #000000 !important;
    opacity: 0.9 !important;
    z-index: 2 !important;
}

.content-section {
    z-index: 5;
    position: absolute;
    top: 0px !important;
    left: 0px !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
}

.shadow-text {
    color: var(--white);
    text-shadow: 5px 10xp 5px red !important;
    font-weight: bolder;
}


/* end of disabled button */


/* Email header text */

.email-header-text {
    color: var(--emailHeaderColor);
}


/* end of email header text */


/* font style...  */

.font-style {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.admin-active {
    color: var(--primarycolor);
    background-color: var(--lightgray);
}

.topbar-hover:hover {
    color: var(--white);
    background-color: var(--primarycolor);
}

.topbar-active {
    color: var(--white);
    background-color: var(--primarycolor);
}

.sidebar-hover:hover {
    color: var(--primarycolor);
    background-color: var(--lightgray);
}

.sidebar-active {
    color: var(--primarycolor);
    background-color: var(--white);
    font-weight: bold;
}

.home-section {
    height: 400px auto !important;
    width: 100% !important;
    background-image: url('../images/bg.png') !important;
    background-size: cover !important;
}

.primary-box {
    background-color: var(--lightgray) !important;
    color: var(--primarycolor) !important;
}

.p-b-b {
    border-bottom: 1px solid var(--primarycolor) !important;
}

.primary-box:hover {
    background-color: var(--primarycolor) !important;
    color: var(--white) !important;
}

.header-font {
    font-size: 60px !important;
}

.form-bg {
    background-image: url('../images/blob.svg') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.
/* end of font style */


/* Media query */

@media screen and (min-width: 653px) {
    .header-font {
        font-size: 100px !important;
    }
}