body{
    margin: 0px 0px;
    background-color: #2C2C2C;
    user-select: none;
}
div {
    background-color: transparent;
}
select{
    direction: rtl;
    -webkit-appearance: none;
    padding: 0 0.5em 0 0;
}

#main_container{
    background-color: #2C2C2C;
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-rows: 3.8em 120px 1fr; 
    grid-row-gap: 30px;
}
/*HEDER*/
    #header {
        display: grid;
        grid-template-areas: "header_left header_center header_right";
        grid-template-columns: 1fr 6fr 1fr; 
        grid-template-rows: 1fr; 
        background-color: #3A3E46;
    }
    
    #header_left{
        font-family:SegoeUI-Light, Segoe UI;
        font-weight: 300;
        padding: 1em 1em 1em 1em;
        font-size: 1.2em;
        line-height: 1.2em;
        color: #FFFFFF;
        grid-area: header_left;
    }
    #header_left:hover{
        font-size: 1.3em;
        padding: 0.9em 0.9em 0.9em 0.9em;
        cursor: pointer;
    }
    #header_left i{
        color: #FCB415;
    }
    
    #header_right{
        font-family:SegoeUI-Light, Segoe UI;
        font-weight: 300;
        padding: 1em 1em 1em 1em;
        font-size: 1.2em;
        line-height: 1.2em;
        color: #FFFFFF;
        text-align: right;
        word-wrap: normal;
        grid-area: header_right;
    }
    #header_right:hover{
        font-size: 1.3em;
        padding: 0.9em 0.9em 0.9em 0.9em;
        cursor: pointer;
    }
    /*header_center*/
        #header_center{
            display: grid;
            grid-template-columns: repeat(6,1fr); 
            grid-template-rows: 1fr; 
            grid-column-gap: 2em;
            margin-left: 12em;
            margin-right: 2em;
            grid-area: header_center;
        }
        #header_center .header_center_box{
            font-family:SegoeUI-Light, Segoe UI;
            font-weight: 300;
            padding: 1.2em 1em 1em 1em;
            font-size: 1em;
            line-height: 1.2em;
            color: #FFFFFF;
            text-align: center;
            word-wrap: normal;
            border-top: none;
        }
        #header_center .header_center_box.selected{
            color:#FCB415;
            border-top:5px solid #FCB415;
            padding:0.9em 1em 1em 1em;
        }
        
        #header_center .header_center_box:hover{
/*            font-size: 1.1em;
            padding: 1em 0.9em 0.9em 0.9em;*/
            cursor: pointer;
        }
    @media only screen and (max-width: 1400px) {
        #header {
            /*grid-template-areas: "header_left  header_right";*/
            grid-template-columns: 1fr 1fr; 
            /*grid-template-rows: 1fr 1fr;*/ 
            /*background-color: #3A3E46;*/
        }
        #header_center {
            display: grid;
            grid-template-columns: 1fr; 
            grid-template-rows: repeat(6, 1fr); 
            background-color: #3A3E46;
            position: absolute;
            top: 3.9em;
        }
        #header_center .header_center_box{
            display: none;
        }
        #header_center{
            margin-left: 0em;
        }
    }
    @media only screen and (min-width: 1400px) {
        /*display: block;*/
        display: grid;
        grid-template-columns: repeat(6,1fr); 
        grid-template-rows: 1fr; 
        grid-column-gap: 2em;
        margin-left: 12em;
        margin-right: 2em;
        grid-area: header_center;
    }

#sub_header {
    background-color: #FCB415;
    margin-left: 2em;
    margin-right: 2em;
}

.sub_header_wrapper{
    background-color: transparent;
    margin: 1em 2em 1em 2em;
}

.sub_header_main_text{
    font-size: 2.8em;
}
.sub_header_plain_text{
    font-size: 1.2em;
}

.sub_header_text{
    background-color: #FCB415;
    font-family:SegoeUI-Light, Segoe UI;
    font-weight: 300;
    color: #232831;
    text-align: right;
}
/*MAIN*/
    #main {
        background-color: #3A3E46;
        margin-left: 2em;
        margin-right: 2em;
        display: grid;
        grid-template-areas: "main_left main_center main_right";
        grid-template-columns: 1fr 1fr 1fr; 
        grid-template-rows: 1fr; 
        grid-column-gap:4em;
        grid-row-gap: 4em;
        padding: 4em 4em 4em 4em;
    }
        @media only screen and (max-width: 1400px) {
            #main {
                grid-template-areas: "main_center main_right" ". main_left";
                grid-template-columns: 1fr 1fr; 
                /*grid-template-rows: 1fr 1fr;*/ 
            }
        }
        @media only screen and (max-width: 1100px) {
            #main {
                grid-template-areas: "main_right" "main_center" "main_left";
                grid-template-columns: minmax(400px, 1fr); 
                /*grid-template-rows: 1fr 1fr;*/ 
            }
        }
    .main_box_wrapper{
        /*height: 70vh;*/
        /*background-color: #303030;*/
        /*display: flex;*/
    /*    justify-content: center;
        align-items: center;*/
    }

    #main_footer{
        grid-column: 1 / -1;

    }

    .main_box_header{
        text-align: center;
        padding: 0.5em 0.5em;
    }
    .main_box_content{
        text-align: right;
        display: grid;
        grid-template-columns: 1fr; 
        /*grid-template-rows: 1fr;*/ 
        grid-row-gap: 4em;
        background-color: #303030;
        padding: 4em 4em 4em 4em;
        
    }
    .main_box_header .header_text{
        font-size: 1.5em;
    }

    .main_box_header .content_text{
        font-size: 1em;
    }

    .main_box_content .content_box{
        background-color: #FCB415;
        text-align: center;
        font-family:SegoeUI-Light, Segoe UI;
        font-size: 1.2em;
        color: #232831;
        padding: 1em 0em 1em 0em;
    }

    .main_box_content .content_box:hover{
/*        font-size: 1.3em;
        padding: 0.9em 0em 0.9em 0em;*/
        cursor: pointer;
    }
    
    #main_right{
        grid-area: main_right;
    }
    #main_center{
        grid-area: main_center;
    }
    #main_left{
        grid-area: main_left;
    }
    
/*main_new_steps*/    
    .main_new_steps{
        padding-bottom: 1em;
        cursor: no-drop;
    }
    .main_new_steps.enabled{
        padding-bottom: 1em;
        cursor: pointer;
    }
    .main_new_steps_one_line{
        line-height: 2em;
        display: inline-block;
    }
    
    .main_new_steps_one_line.circle{
        padding-top: 1.25em;
        font-size: 0.5em;
        color:#38ADB6;
        float: left;
    }
        .main_new_steps.selected .main_new_steps_one_line.circle{
            color: #38B650;
            /*text-shadow: 0.1em 0.1em 1em #38B650;*/
        }
        
    .main_new_steps_one_line.text{
        padding-right: 2em;
        color: #FFFFFF;
    }
        .main_new_steps.selected .main_new_steps_one_line.text{
            color: #38B650;
            /*text-shadow: 0.1em 0.1em 1em #38B650;*/
        }
        
    .main_new_steps_one_line.order{
        text-align: center;
        height: 2em;
        width: 2em;
        background-color: #F2AE17;
        color: #303030;
    }
    
/*step_1*/
.options_box{
    text-align: center;
    font-family:SegoeUI-Light, Segoe UI;
}
    /*.options_box.step_1, .options_box.step_2{*/
    .options_box_step_line{
        margin-bottom: 1em;
        background-color: #303030;
        color: #FFFFFF;
        border: 1px solid #95989A;
        font-size: 1em;
        padding: 0.5em 0 0.5em 0;
        cursor: no-drop;
    }
    /*.options_box.step_1.done, .options_box.step_2.done{*/
    .options_box_step_line.done{
        margin-bottom: 1em;
        background-color: #FCB415;
        color: #232831;
        border: none;
        cursor: pointer;
    }
    /*.options_box.step_1.editable, .options_box.step_2.editable{*/
    .options_box_step_line.editable{
        margin-bottom: 1em;
        background-color: #FCB415;
        color: #232831;
        border: none;
        cursor: pointer;
    }
    
    /*.options_box[class*="step_1_"].editable{*/
    .options_box.options_box_step_line_level2.editable{
        text-align: right;
        cursor: context-menu;
        padding-left: 1em;
        padding-right: 1em;
        padding-bottom: 0.8em;
    }
    /*.options_box[class*="step_1_"] label{*/
    .options_box.options_box_step_line_level2 label{
        /*text-align: right;*/
        /*padding-right: 1.2em;*/
    }
    /*.options_box[class*="step_1_"] input{*/
    .options_box.options_box_step_line_level2 input{
        width: 100%;
        text-align: right;
        /*padding: 0.5em;*/
    }
    /*.options_box[class*="step_1_"] textArea{*/
    .options_box.options_box_step_line_level2 textArea{
        width: 100%;
        text-align: right;
        resize: vertical;
        min-height: 3em;
        /*padding: 0.5em;*/
    }
    /*.options_box[class*="step_1_"] select{*/
    .options_box.options_box_step_line_level2 select{
        width: 100%;
        text-align: right;
    }
    /*.options_box[class*="step_1_"] sele*/
    .options_box.options_box_step_line_level2 select option{
        padding-right: 1em;
    }
    /*.options_box[class*="step_1_"]{*/
    .options_box.options_box_step_line_level2{
        line-height: 2em;
    }
    /*.options_box[class*="step_1_"] i{*/
    .options_box.options_box_step_line_level2 i.control{
        padding-left: 0.5em;
        padding-top: 0.5em;
        float: left;
        font-size: 1.2em;
    }
        /*.options_box[class*="step_1_"] i:nth-of-type(1){*/
        .options_box.options_box_step_line_level2 i.control:nth-of-type(1){
            color: #FF0000;
        }
        /*.options_box[class*="step_1_"] i:nth-of-type(2){*/
        .options_box.options_box_step_line_level2 i.control:nth-of-type(2){
            color: #38B650;
        }
        
        .options_box.options_box_step_line_level2 i.control:hover{
            padding-top: 0em;
            font-size: 1.7em;
            text-shadow: 0.1em 0.1em 1em #FFFFFF;
        }
        
    .savaBut, .savaBut label{
        text-align: center !important;
        cursor: pointer !important;
    }
    
        
.modal-wrapper{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    background: rgba(0,0,0,0.8);
}
.modal-conteiner{
    margin: 25vh 25vw;
    width: 50vw;
    height: 50vh;
    background: #FFFFFF;
    padding: 1em 1em;
    overflow: auto;
    /*border: 1em #FF0000 solid;*/
    color: #000000;
    font-size: 2em;
    position: absolute;
}