/* General */
    :root {
        --color-primary: #3457DC;
        --bs-link-color: var(--color-primary);
        --bs-danger-rgb: 220, 52, 52;
    }

    html, body {
        font-family: 'Space Grotesk', Helvetica, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background:#F0F7F7;
        font-size: 14px;
    }

    h3 {font-size:20px; font-weight:bold;}
    .error-message { color: rgb(var(--bs-danger-rgb)); }
    .col-10p { width: 12%; }
    .op-75 { opacity: 0.75; }
    .op-50 { opacity: 0.5; }
    .op-25 { opacity: 0.25; }
    .op-10 { opacity: 0.1; }


/**
* Page
*/
    .page {display: flex;flex-direction: column;align-items: center;min-height: 100vh;justify-content: center;padding: 20px;}
    .page__header {height: 50px;}
    .page__main {background: white;flex-grow: 1;border: black 4px solid;border-radius: 10px;width: 100%;height: 50vh;position: relative;padding: 10px;padding-top: 35px;}
    .page__footer {width: 100%;height: 75px;}

    @media screen and (max-width: 767px) {
        .page {}
        .page__header {}
        .page__main {}
        .page__footer {}
    }

/**
* Alert
*/
    .alert {padding: 10px;}


/**
* Button
*/
    .btn {}
    .btn-primary {background-color: var(--color-primary);text-transform: uppercase;}
    .btn-lg {font-size: 16px;font-weight: 500;}

/**
* Main element
*/
    .main-wrapper {
        --padding: 40px;
        display: flex;flex-direction: column;align-items: center;min-height: 100vh;justify-content: center;padding: var(--padding);
    }
    .main {max-width: 984px;min-height: 575px;margin: 0 auto;border: black 4px solid;border-radius: 10px;display: flex;background: white;margin-bottom: 20px;position: relative;}
    .main__side {width: 50%;position: relative;color: white;padding-right: 80px;padding-left: 30px;display: flex;align-items: center;font-size: 14px;}
    
    .main__side:before { content:''; display:block;background: var(--color-primary);position: absolute;top: 0;left: 0;width: 100%;height: 100.1%;z-index: 0;clip-path: polygon(0 0, 0 100%, 80% 100%, 100% 0);border-top-left-radius: 3px;border-bottom-left-radius: 3px;}
    .main__side__content { position:relative; z-index:1; }
    .main__side__content h1 a { color:inherit; text-decoration: none; }
    .main__content {width: 50%;padding: 0 40px;display: flex;flex-direction: column;align-content: center;justify-content: center;}
    .main__side h1 {font-size: 30px;font-weight: bold;}
    .main__side p { }
    .main__side ul { }
    .main__account {/* border: red 1px solid; */position: absolute;top: 0;right: 0px;/* width: 200px; */height: 30px;transform: translateY(-100%);text-align: right;}

    @media screen and (max-width: 767px) {
        .main-wrapper { 
            display: block; 
            --padding: 30px;
        }
        .main { flex-direction: column; }
        .main__side { width: auto; padding: var(--padding); }
        
        .main__side:before {clip-path: none; border-bottom-left-radius: 0; border-top-right-radius: 3px;}
        .main__side__content { }
        .main__side__content h1 a { }
        .main__content { width: auto; padding: var(--padding); }
        .main__side h1 {}
        .main__side p { }
        .main__side ul { }
    }

    @media screen and (max-width: 450px) {
        .main-wrapper { 
            --padding: 15px;
        }

    }


/**
* Footer
*/
    .footer {text-align: center;padding: 10px 0;}
    .footer__links { margin-bottom: 10px; }
    .footer__links a {color: rgba(0,0,0,0.40);font-weight: 500;text-decoration: none;}
    .footer__madeby {color: black;font-weight: 500;text-decoration: none;}



/**
* Result
*/
    .result {
        --padding:20px;
        padding: var(--padding);overflow: auto;height: 100%;
    }
    .resline {margin: var(--padding) 0;}
    .resline__wrapper {display: flex;flex-direction: row;flex-wrap: nowrap;}
    .resline__image {width: 120px;height: 75px;overflow: auto;border: #ddd 1px solid;}
    .resline__image img {width: 100%;}
    .resline__title {font-size: 16px;font-weight: normal;}
    .resline__url {color: black !important;text-decoration: none;font-size: 0.8em;font-weight: bold;}
    .resline__url:hover { opacity: 0.6;}
    .resline__actions {  }
    .resline__col1 {width: 120px;flex-shrink: 0;display: flex;justify-content: center;align-items: center;}
    .resline__col2 {flex-grow: 1;padding-left: var(--padding);}
    .resline__col3 {flex-grow: 0;flex-shrink: 0;width: 50px;justify-self: flex-end;display: flex;justify-content: center;align-items: center;}
    .resline__children {padding-left: var(--padding); position:relative;flex-basis: 100%;}
    .resline__children:before { content:'';width: 2px;background: #eee;height: calc(100% - var(--padding));display: block;position: absolute;top: var(--padding);left: 0;}
    .resline__children .resline:last-child { margin-bottom: 0; }


    @media screen and (max-width: 991px) {
        .result { --padding: 10px;}
        .resline {}
        .resline__wrapper {}
        .resline__image { height: 50px; }
        .resline__image img {}
        .resline__title { font-size: 14px; }
        .resline__url {}
        .resline__url:hover { }
        .resline__actions {  }
        .resline__col1 { width: 80px; }
        .resline__col2 {}
        .resline__col3 {}
        .resline__children {}
        .resline__children:before { }
        .resline__children .resline:last-child { }
    }

    
/**
* Tree
*/
    .tree-container {width: 100%;position: relative;height: 100%;display: flex;align-content: center;align-items: center;}
    .tree-container .Controls { transform: translateY(20px); }


/**
* Other
*/
    .form-label {font-weight: 500;margin-bottom: 0;}
    .excludeline {position: relative;}
    .excludeline__delete {position: absolute;left: calc(100% + 10px);top: 50%;transform: translateY(-50%);}
    .excludeline :is(select, input) {/* font-size: 0.90em; */font-size: 10px;}

    @media screen and (max-width: 450px) {
        .form-label {}
        .excludeline {}
        .excludeline__delete { left: calc(100% + 3px); }
    }
    
/**
* Submenu
*/
    .submenu {
        position: absolute;
        top: 0;
        left: 0;
        font-weight: 500;
        color: white;
        padding: 2px 10px;
        background: white;
        z-index: 2;
        width: 100%;
        background: var(--color-primary);
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    .submenu > a:first-child { padding-left:0 }
    .submenu > a {color: inherit;padding: 0 10px;text-decoration: none;}

    @media screen and (max-width: 450px) {
        .submenu {}
    }


/**
* Header
*/
    .header {display: flex;width: 100%;align-items: center;}
    .header__logo {font-size: 30px;font-weight: bold;color: var(--color-primary);text-decoration: none;}
    .header__menu {font-size: 18px;margin-left: 20px;}
    .header__menu a {color: rgba(0,0,0,0.80);text-decoration: none;/* padding: 0 15px; */transition: all 0.5s;/* margin-left: 20px; */}
    .header__menu a:hover { color: var(--color-primary); }  
    .header__menu a.active {
        color: var(--color-primary);
        font-weight: bold;
    }
    .header__menu a:last-child { padding-right:0; }
    .header__menu--right {margin-left: auto;}

    @media screen and (max-width: 991px) {
        .header {}
        .header__logo { font-size: 20px; }
        .header__menu { font-size: 14px; }
        .header__menu a {}
        .header__menu a:hover { }
        .header__menu a.active { }
        .header__menu a:last-child { }
        .header__menu--right {}
    }



/**
* Account header
*/
    .accheader {/* white-space: nowrap; */}
    .accheader a {text-decoration: none;/* margin-right: 20px; */}
    .accheader a:last-child { margin-right: 0;}