@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

body.dark {
    --main-bg-color: #1e1e2f;
    --card-title-color: white;
    --card-separator-color: rgba(255, 255, 255, 0.5);
    --label-color: rgba(255,255,255,0.7);
    --main-first-color: #00bdbc;
    --main-border-color: rgba(255,255,255,.2);
    --input-bg-color: rgba(27,38,61,0.9);
    --input-font-color: rgba(255,255,255,0.8);
    --input-disabled-font-color: rgba(255,255,255,0.7);
    --input-placeholder-font-color: rgba(255,255,255,.5);
    --input-focus-font-color: white;
    --checkbox-label-color: rgba(255,255,255,0.8);
    --popup-bg-color: #1e1e2f;
    --popup-title-color: white;
    --popup-close-button: white;
    --popup-details-bg-color: #27293d;
    --main-second-color: #21336e;
    --text-label-color: #d7d7d7;
    --text-value-color: white;
    --grid-tab-btn-color: white;
    --grid-tab-btn-background: rgba(255,255,255,.1);
    --grid-tab-btn-hover-background: rgba(255,255,255,.3);
    --dashboard-panel-border-color: rgba(255,255,255,.1);
    --dashboard-panel-hover-bg-color: rgba(255,255,255,.1);
    --dashboard-panel-bg-color: #27293d;
    --disabled-bg-color: #334352;
    
    /*new*/
    --form-layout-bg-color: #27293d;
    --form-layout-border-color:#7a8187;
    --form-layout-header-text-color: white;
    --form-layout-header-icon-color: white;
    --control-bg-color: #27293d;
    --control-disabled-bg-color: #334352;
    --control-font-color: #cbcbcb;
    --control-focus-font-color: white;
    --control-disabled-font-color: rgba(255,255,255,0.7);
    --control-border-color: #626472;
    --control-focus-border-color: #00c0ff;
    --control-label-color: white;
    --control-placeholder-font-color: rgba(255,255,255,.5);
    --match-code-font-color: rgba(255,255,255,0.7);
    --dashboard-match-code-font-color: #6b4e4e;
}

body.light {
    --main-bg-color: #f5f6fa;
    --card-title-color: #222a42;
    --card-separator-color: rgba(0,0,0,.3);
    --label-color: #1d253b;
    --main-first-color: #00bdbc;
    --main-border-color: #1e1e2f;
    --input-bg-color: white;
    --input-font-color: #27293d;
    --input-disabled-font-color: rgba(29,37,59,0.7);
    --input-placeholder-font-color: rgba(29,37,59,0.5);
    --input-focus-font-color: #27293d;
    --checkbox-label-color: #1d253b;
    --popup-bg-color: #f5f6fa;
    --popup-title-color: #1d253b;
    --popup-close-button: #1d253b;
    --popup-details-bg-color: white;
    --main-second-color: #21336e;
    --text-label-color: #222a42;
    --text-value-color: black;
    --grid-tab-btn-color: black;
    --grid-tab-btn-background: rgba(0,0,0,.1);
    --grid-tab-btn-hover-background: rgba(0,0,0,.3);
    --dashboard-panel-border-color: rgba(0,0,0,.5);
    --dashboard-panel-hover-bg-color: rgba(255,255,255,.1);
    --dashboard-panel-bg-color: white;
    --disabled-bg-color: lightgray;
    
    /*new*/
    --form-layout-bg-color: white;
    --form-layout-border-color:#7a8187;
    --form-layout-header-text-color: black;
    --form-layout-header-icon-color: black;
    --control-bg-color: white;
    --control-disabled-bg-color: #eeeeee;
    --control-font-color: #313131;
    --control-focus-font-color: black;
    --control-disabled-font-color: #4f4b4b;
    --control-border-color: #808080;
    --control-focus-border-color: #00c0ff;
    --control-label-color: black;
    --control-placeholder-font-color: rgba(29,37,59,0.5);
    --match-code-font-color: #4f4b4b;
    --dashboard-match-code-font-color: #6b4e4e;
}

html {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #525f7f;
    text-align: left;
    background-color: var(--main-bg-color);
    height: 100%;
}

#app {
    max-height: inherit;
    height: inherit;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    /* outline: 1px solid #26b050;*/
}

.invalid {
    /* outline: 1px solid red;*/
}

.validation-message {
    color: red;
    font-size: 12px;
}

.check__error__container .validation-message {
    color: red;
    font-size: 20px;
}

.dark .loading__screen__container {
    top: 0;
    display: flex;
    color: #1e1e2f;
    position: absolute;
    width: 100%;
    text-align: center;
    background-color: #1e1e2f;
    height: 100%;
}

.light .loading__screen__container {
    top: 0;
    display: flex;
    color: #f5f6fa;
    position: absolute;
    width: 100%;
    text-align: center;
    background-color: #f5f6fa;
    height: 100%;
}

.light .loader {
    margin: auto;
    border: 10px solid #babcd3;
    border-radius: 50%;
    border-top: 10px solid #673ab7;
    width: 70px;
    height: 70px;
    animation: spin 4s linear infinite;
}

.dark .loader {
    margin: auto;
    border: 10px solid #EAF0F6;
    border-radius: 50%;
    border-top: 10px solid #00bdbc;
    width: 70px;
    height: 70px;
    animation: spin 4s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}