html, body { height: 100%; }

div, label, html, body, section {

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

}

strong { font-weight: normal; font-family: font-semiBold; }

.crPointer { cursor: pointer; }

.crDefault { cursor: default; }

label.section-title { font-size: 22px; color: #242424; font-family: 'font-bold'; letter-spacing: -.5px; }

label.list-title { font-family: 'font-semiBold'; letter-spacing: -.5px; font-size: 18px; display: flex; padding-bottom: 4px; }

script, title, style { display: none; }

div.notice {

    flex-direction: row;

    padding: 15px 20px;

    margin-bottom: 15px;

    border-radius: 5px;

    background-color: #ffcc00;

    justify-content: space-between;

}



div.block {

    display: block;

    line-height: 22px;

}



div.notice label {

    font-family: font-semiBold;

    display: flex;

    flex-direction: row;

}



div.notice span {

    font-family: font-regular;

    margin-right: 10px;

}



div.section-title {

    display: flex;

    flex-direction: row;

    align-items: center;

    cursor: pointer;

    margin: 0 0 15px 0;

    border: #d4d4d4 1px solid;

    border-radius: 5px;

    padding: 10px;

    background-color: #f5f5f5;

}



div.section-title.open {

    border-radius: 5px 5px 0 0;

    margin: 0;

}



div.section-title label {

    font-size: 13px;

    color: #242424;

    font-family: 'font-bold';

    padding: 0 10px 0 5px;

    cursor: pointer;

}

div.section-title i { font-size: 18px; }

div.section-title .line {

    flex: 1;

    height: 1px;

    background-color: #e8e8e8;

}



span.type {    

    color: #ffffff;

    font-size: 10px;

    font-family: 'font-semiBold';

    padding: 4px 10px;

    border-radius: 3px;

    margin-right: 5px;

    width: 34px;

    text-align: center;

    display: inline-block;

    cursor: default;

}



span.type.vefat { background-color: #cc0001; }

span.type.sakatlik { background-color: #242424; }



.form-container {

    padding: 10px 20px;

    margin: 0 0 20px 0;

    border-left: #d4d4d4 1px solid;

    border-right: #d4d4d4 1px solid;

    border-bottom: #d4d4d4 1px solid;

    border-radius: 0 0 5px 5px;

    position: relative;

}



.fancy-scroll::-webkit-scrollbar-thumb { background: #182e73; margin-right: 5px; border-radius: 14px; }

.fancy-scroll::-webkit-scrollbar { width: 6px; margin-right: 5px; }

.fancy-scroll::-webkit-scrollbar-track { background: transparent; }



.tippy-content { font-size: 11px !important; }

.tippy-tooltip { border-radius: 2px !important; }

.icon-col { flex-direction: row; align-items: center; }

.icon-col i { font-size: 18px; color: #707070; }

p.info {

    font-size: 11px;

    padding: 5px 0 5px 10px;

    border-left: #7098e5 3px solid;

    margin-left: 5px;

}

@font-face{ font-family: 'font-black'; src: url('font/inter/Inter-Black.ttf') format("truetype"); }

@font-face{ font-family: 'font-bold'; src: url('font/inter/Inter-Bold.ttf') format("truetype"); }

@font-face{ font-family: 'font-extraBold'; src: url('font/inter/Inter-ExtraBold.ttf') format("truetype"); }

@font-face{ font-family: 'font-extraLight'; src: url('font/inter/Inter-ExtraLight.ttf') format("truetype"); }

@font-face{ font-family: 'font-italic'; src: url('font/inter/Inter-Italic.ttf') format("truetype"); }

@font-face{ font-family: 'font-light'; src: url('font/inter/Inter-Light.ttf') format("truetype"); }

@font-face{ font-family: 'font-medium'; src: url('font/inter/Inter-Medium.ttf') format("truetype"); }

@font-face{ font-family: 'font-regular'; src: url('font/inter/Inter-Regular.ttf') format("truetype"); }

@font-face{ font-family: 'font-semiBold'; src: url('font/inter/Inter-SemiBold.ttf') format("truetype"); }

@font-face{ font-family: 'font-thin'; src: url('font/inter/Inter-Thin.ttf') format("truetype"); }

@font-face{ font-family: 'font-blackItalic'; src: url('font/inter/Inter-BlackItalic.ttf') format("truetype"); }

@font-face{ font-family: 'font-boldItalic'; src: url('font/inter/Inter-BoldItalic.ttf') format("truetype"); }

@font-face{ font-family: 'font-extraBoldItalic'; src: url('font/inter/Inter-ExtraBoldItalic.ttf') format("truetype"); }

@font-face{ font-family: 'font-extraLightItalic'; src: url('font/inter/Inter-ExtraLightItalic.ttf') format("truetype"); }

@font-face{ font-family: 'font-lightItalic'; src: url('font/inter/Inter-LightItalic.ttf') format("truetype"); }

@font-face{ font-family: 'font-mediumItalic'; src: url('font/inter/Inter-MediumItalic.ttf') format("truetype"); }

@font-face{ font-family: 'font-semiBoldItalic'; src: url('font/inter/Inter-SemiBoldItalic.ttf') format("truetype"); }

@font-face{ font-family: 'font-thinItalic'; src: url('font/inter/Inter-ThinItalic.ttf') format("truetype"); }



.show-on-mobile { display: none; }

.hide-on-mobile { }

.color-orange { color: #ff6600; }

.color-gray { color: #707070; }

.color-green { color: #009900; }

.color-red { color: #cc0001; }

.bg-white { background-color: #ffffff; }



h1.title1 { font-family: font-bold; font-size: 22px; margin: 0; color: #242424; letter-spacing: -.5px; }

span.email { color: #707070; }



a:link, a:visited { color: #1a48a0; text-decoration: none; }

a:hover { color: #242424; text-decoration: underline; }

a.icon-link:link, a.icon-link:visited { display: flex; flex-direction: row; align-items: center; padding: 5px; }

a.icon-link i { margin-right: 5px; }

a.lit-button:link, a.lit-button:visited { text-decoration: none; transition: all .5s; background-color: #cc0001; color: #ffffff !important; font-size: 12px !important; padding: 5px 15px; border-radius: 5px; }

a.lit-button:hover { background-color: #242424; }

b { font-family: 'font-bold'; }

.fs12 { font-size: 12px; }

.fs13 { font-size: 13px; }

.fs14 { font-size: 14px; }

.fs15 { font-size: 15px; }

.fs16 { font-size: 16px; }

.fs18 { font-size: 18px; }

.fs20 { font-size: 20px; }

.fs22 { font-size: 22px; }

.uppercase { text-transform: uppercase; }

.full-width { width: 100% !important; }

.flex-row { flex-direction: row; }

.flex-unset { flex: unset !important; }

.justify-content-center { justify-content: center; }

.justify-content-fe { justify-content: flex-end; }

.justify-content-fs { justify-content: flex-start; }

.justify-content-sb { justify-content: space-between; }

.flex-wrap { flex-wrap: wrap; }

.align-self-fe { align-self: flex-end; }

.align-items-center { align-items: center; }

.align-items-fe { align-items: flex-end; }

.align-items-fs { align-items: flex-start; }

.flex-1 { flex: 1; }

.flex-2 { flex: 2; }

.flex-3 { flex: 3; }

.jc-center { justify-content: center; }

.jc-sb { justify-content: space-between; }

.ai-center { align-items: center; }

.ai-start { align-items: flex-start; }

.checkbox-group { cursor: pointer; flex-direction: row; align-items: center; }

.checkbox-group i { color: #242424; }

.checkbox-group.selected i { color: #009900; }

.checkbox-group.row-end { flex-direction: row-reverse; justify-content: space-between;}

.row { flex-direction: row; }

.border-bottom { border-bottom: #e8e8e8 1px solid; }

.no-padding-top { padding-top: 0; }

.no-padding-bottom { padding-bottom: 0; }



.right-item { align-items: flex-end; }

.left-item { align-items: flex-start; }

.image-radius { border-radius: 6px; }



.right-item img, .left-item img {

    max-width: 80%;

}



body {

    font-family: 'font-regular'; 

    font-size: 12px;

    margin: 0; 

    padding: 67px 0 0 0; 

}



.tab-container { flex-direction: row; border-bottom: #e8e8e8 1px solid; margin-bottom: 20px; }

.tab-container label { font-family: font-semiBold; display: flex; flex: 1; padding: 12px 0; align-items: center; justify-content: center; cursor: pointer; margin-bottom: -1px; border-bottom: transparent 2.5px solid; }

.tab-container.with-icon label { flex-direction: row; font-family: font-semiBold; }

.tab-container.with-icon label img { width: 20px; margin-right: 8px; }

.tab-container label.selected { cursor: default; border-bottom: #009900 2.5px solid; color: #009900; }



.sidebar-container { flex-direction: row; display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; justify-content: flex-end; z-index: 110; }

.sidebar-container.show { display: flex; }

.sidebar-container .shadow { background-color: #12132A; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 100; opacity: .65; }

.sidebar-container .content { transition: width .75s; width: 0px; position: relative; background-color: #ffffff; z-index: 110; flex-direction: column; overflow: auto; }

.sidebar-container .content .title { flex-direction: row; padding: 22px 26px; justify-content: space-between; }

.sidebar-container .content .title label { font-size: 22px; color: #242424; font-family: 'font-bold'; letter-spacing: -.5px; }

.sidebar-container .content .title a i { color: #242424; }

.sidebar-block {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

}



#vanillatoasts-container { z-index: 200; justify-content: flex-end; flex-direction: row; }

.vanillatoasts-toast, .vanillatoasts-warning { flex-direction: column; }

.vanillatoasts-toast { border-radius: 4px; padding: 10px 20px; margin: 10px 10px 0 0; }

.vanillatoasts-toast p { margin: 0; font-size: 12px; }

.vanillatoasts-text { font-size: 18px; font-family: font-regular; line-height: 18px; }

.vanillatoasts-error { background-color: #FB2B41; border-bottom: transparent 0px solid; }

.vanillatoasts-info, .vanillatoasts-notice, .vanillatoasts-success { background-color: #242424; border-bottom: transparent 0px solid; }

.vanillatoasts-warning { background-color: #f68d1f; border-bottom: transparent 0px solid; }

.vanillatoasts-error .vanillatoasts-text { color: #ffffff; }

.vanillatoasts-success .vanillatoasts-text { color: #ffffff; }

.vanillatoasts-info .vanillatoasts-text, .vanillatoasts-notice .vanillatoasts-text { color: #ffffff; }

.vanillatoasts-warning .vanillatoasts-text { color: #ffffff; }



#load-content { flex-direction: row; flex: 1; align-items: flex-start; overflow: auto; padding: 0 20px; }

#load-content img.loader { margin-top: 50px; width: 32px; align-self: flex-start; }

#load-content .content { flex: 1; overflow: auto; }

#load-content .content .playground { flex: 1; padding: 20px 40px; }

#load-content .footer { padding: 20px; }



.container { width: 80%; }

.container.limited { width: 1200px; }



#topbar {

    background-color: #ffffff;

    padding: 0;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 100;

}



#topbar.shadow {

    box-shadow: 0 0 5px #d4d4d4;

    border-bottom: #e8e8e8 1px solid;

}



.logo {

    flex-direction: row;

    padding: 10px;

    align-items: center;

    cursor: pointer;

}



.logo img {

    margin-right: 10px;

}



.logo label {

    font-size: 18px;

    font-family: font-semiBold;

    letter-spacing: -1px;

    margin-bottom: 3px;

    cursor: pointer;

}



#topbar img { 

    height: 30px; 

}



a.logo:link, a.logo:visited, a.logo:hover {

    display: flex;

    flex-direction: row;

    align-items: center;

    font-family: 'font-semiBold';

    color: #242424;

    font-size: 22px;

    text-decoration: none;

    padding: 20px;

}



a.logo img { margin-right: 15px; }

a.logo label { cursor: pointer; }



nav {

    flex-direction: row;

    padding-right: 10px;

    display: flex;

}



nav a:link,

    nav a:visited,

        div.has-menu {

    color: #242424;

    margin: 0 20px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    font-family: font-semiBold;

    padding: 25px 0 22px 0;

    border-bottom: transparent 3px solid;

}



nav a:hover, div.has-menu:hover {

    color: #009900;

    border-bottom: #009900 3px solid;

}



div.has-menu {

    position: relative;

    cursor: default;

}



div.has-menu .submenu {

    position: absolute;

    background-color: #ffffff;

    top: 65px;

    box-shadow: 0 0 5px #d4d4d4;

    padding: 5px;

    display: none;

}



div.has-menu:hover .submenu {

    display: flex;

}



div.has-menu .submenu a {

    display: flex;

    flex-direction: row;

    align-items: center;

    padding: 10px 25px 10px 15px;

    margin: 0;

    white-space: nowrap;

    border-bottom: transparent 0px solid;

    border-radius: 4px;

}



div.has-menu .submenu a:hover {

    background-color: #009900;

    color: #ffffff;

}



div.has-menu .submenu a i {

    margin-right: 10px;

    font-size: 18px;

}



nav a.active {

    border-bottom: #009900 3px solid;

    color: #009900;

}



.toolbar {

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

}



h3 {

    font-family: 'font-bold';

    font-size: 32px;

    letter-spacing: -1px;

    line-height: 40px;

    text-align: center;

    margin: 0 0 0 0;

}



h3.light { font-family: 'font-semiBold'; font-size:32px; }

h3.bold { font-size: 52px; }

h3.panel-header {

    text-align: left;

    display: flex;

    line-height: unset;

    padding: 10px 0;

}

h3.panel-header span {

    font-size: 18px;

    margin-left: 8px;

}



h5 {

    font-family: 'font-semiBold';

    font-size: 66px;

    letter-spacing: -1px;

    line-height: 1.1;

    margin: 0 0 30px 0;

}



section.copyright {

    align-items: center;

    justify-content: space-between;

    flex-direction: row;

    font-size: 12px;

    color: #28282a;

    padding: 20px;

}



#playground {

    display: flex;

    flex-direction: row;

    flex: 1;

    overflow: hidden;

}

/* menu bar */

#menu-bar {

    width: 240px;

    border-right: #e8e8e8 1px solid;    

    transition: width .2s;

    background-color: #f5f5f5;

}



#menu-bar.hide {

    width: 75px;

    background-color: #1a48a0;

}

    #menu-bar .logo {

        padding: 25px;

    }

    

    #menu-bar.hide .logo {

        padding: 10px;

    }

        #menu-bar .logo img.normal {

            display: inherit;

        }

        

        #menu-bar .logo img.icon {

            display: none;

        }

        

        #menu-bar.hide .logo img.normal {

            display: none;

        }

        

        #menu-bar.hide .logo img.icon {

            display: inherit;

        }



    #menu-bar ul {

        margin: 0 0;

        padding: 0;

        flex: 1;

        overflow: auto;

    }

    #menu-bar.hide ul {

        overflow: unset;

    }



        #menu-bar ul li {

            list-style: none;

            padding: 0;

            margin: 0;

        }



            #menu-bar ul li a:link, #menu-bar ul li a:visited, #menu-bar div a:link, #menu-bar div a:visited {

                color: #242424;

                text-decoration: none;

                padding: 10px 25px;

                display: flex;

                flex-direction: row;

                align-items: center;

                font-family: 'font-semiBold';

                border-radius: 4px;

                margin: 0 10px;

                transition: padding .4s;

                font-size: 12px;

            }



            #menu-bar ul li a:hover, #menu-bar div a:hover {

                background-color: #e8e8e8;

            }



                #menu-bar ul li a i, #menu-bar div a i {

                    margin-right: 25px;

                }

                

                #menu-bar ul li a span, #menu-bar div a span {

                    display: flex;

                    white-space: nowrap;

                    line-height: 25px;

                }



            #menu-bar ul li a.active, #menu-bar div a.active {

                color: #029edf;

            }

        #menu-bar ul li em {

            width: 100%;

            height: 1px;

            background-color: #445d8b;

            border-top: transparent 1.5px solid;

            margin: 15px 0;

        }



#menu-bar.hide ul li a span, #menu-bar.hide div a span {

    display: none;

}



#menu-bar.hide ul li {

    align-items: center;

}



#menu-bar.hide ul li a, #menu-bar.hide div a {

    padding: 10px;

    width: 44px;

}



#menu-bar.hide ul li a {

    border-radius: 50%;

}



#menu-bar.hide ul li a i, #menu-bar.hide div a i {

    margin-right: 0;

}



#menu-bar.hide ul li a:link, #menu-bar.hide ul li a:visited, #menu-bar.hide div a:link, #menu-bar.hide div a:visited {

    color: #ffffff;

}



#menu-bar.hide ul li a:hover, #menu-bar.hide div a:hover {

    background-color: #0c2f73;

}



#menu-bar.hide ul li em {

    border-top: #3f5f9e 1px solid;

}



#menu-bar.hide ul li a.active {

    color: #ffcc00;

}



/* content area */

#content {

    flex-direction: column;

    flex: 1;

    overflow: auto;

    align-items: center;

}



    #content .page-header {

        padding: 35px 20px 20px 20px;

        flex-direction: row;

    }



    #content .page-header.no-horizontal-padding {

        padding: 35px 0 20px 0;

    }



        #content .page-header p {

            margin: 5px 0;

            font-size: 15px;

            line-height: 24px;

            color: #707070;

        }



        #content .page-header .title-area h3 {

            text-align: left;

            margin: 10px 0;

            font-size: 28px;

        }

        

        #content .page-header ul {

            margin: 0;

            padding: 0;

            flex-direction: row;

        }

            #content .page-header ul li a:link, #content .page-header ul li a:visited {

                font-size: 13px;

                text-decoration: none;

                margin-right: 10px;

                color: #707070;

            }

            

            #content .page-header ul li a:hover {

                text-decoration: underline;

            }

            

            #content .page-header ul li span {

                font-size: 13px;

                text-decoration: none;

                margin-right: 10px;

                color: #242424;

                cursor: default;

            }

        

            #content .page-header ul li a:after {

                content: '/';

                padding-left: 10px;

            }

            

        #content .page-header .title-area {

            flex-direction: row;

            align-items: center;

            margin: 10px 0;

        }

        

            #content .page-header .title-area .title-buttons {

                flex: 1;

                flex-direction: row;

                justify-content: flex-end;

            }



            #content .page-header .title-area .title-buttons a:link, #content .page-header .title-area .title-buttons a:visited {

                background-color: transparent;

                text-decoration: none;

                font-size: 14px;

                margin-left: 10px;

                padding: 12px 17px;

                border-radius: 4px;

                color: #242424;

                background-color: #f2f2f2;

                transition: all .5s;

            }

            #content .page-header .title-area .title-buttons a:hover {

                background-color: #1a48a0;

                color: #ffffff;

            }



            .page-header .toolbar {

                align-items: center;

                justify-content: flex-end;

                flex-direction: row;

            }



.table-area {

    border-top: #e8e8e8 1px solid;

}



.table-area .table-info {

    flex-direction: row;

    justify-content: space-between;

    padding: 25px 25px;

    align-items: center;

}

.table-area .table-info span {

    font-size: 13px;

    color: #242424;

}



.table-area .table-info .pagination {

    flex-direction: row;

    flex: 1;

    justify-content: flex-end;

    align-items: center;

}



.table-area .table-info .pagination a.arrow:link, .table-area .table-info .pagination a.arrow:visited {

    color: #707070;

    margin: 0 10px;

    text-decoration: none;

}



.table-area .table-info .pagination a.arrow:hover {

    color: #029edf;

}



.table-area .table-info .pagination a i {

    font-size: 32px;

}



.dd {

    border: #d4d4d4 1px solid;

    border-radius: 3px;

    flex-direction: row;

    justify-content: center;

    padding: 12px;

    position: relative;

    margin: 0 10px;

}



.dd .combo-arrow {

    margin-left: 12px;

    font-size: 20px;

}



.dd label {

    font-size: 14px;

    color: #707070;

}



.dd .dd-content {

    display: none;

    position: absolute;

    left: -20px;

    right: -20px;

    bottom: -50%;

    top: -125%;

    max-height: 150px;

    overflow: auto;

    border: #e8e8e8 1px solid;

    box-shadow: 0 0 5px #d4d4d4;

    background-color: #ffffff;

}



.dd:hover .dd-content {

    display: flex;

}



.dd .dd-content a:link, .dd .dd-content a:visited {

    font-size: 14px;

    padding: 12px;

    text-decoration: none;

    color: #242424;

}



.dd .dd-content a:hover {

    background-color: #f5f5f5;

}



/* tables */

table { border-collapse: collapse; width: 100%; border: transparent 0px solid; }

table.full-table { width: 100%; }

table.zebra tbody tr:nth-child(odd) { background-color: #f9f9fd; }

table.hovered tr:hover, table.zebra.hovered tr:hover { background-color: #f9f9f9; }

table.grid { border: #cccccc 1px solid; }

table.grid th, table.grid td { border-bottom: #cccccc 1px solid; border-right: #cccccc 1px solid; }

table.grid.data td { background-color: #ffffff; }



th { cursor: default; text-transform: uppercase; background-color: #ffffff; padding: 12px 15px; color: #242424; font-family: 'font-semiBold'; text-align: left; font-weight: normal; font-size: 12px; border-bottom: #999999 1px solid; }

th.seperate { padding-top: 25px; } /* ustten padding vererek kendinden onceki elemandan uzaklasmasi saglanir */

td { padding: 10px 15px; border-bottom: #e8e8e8 1px solid; font-size: 12px; color: #242424; }

td.first-col i { font-size: 18px; margin-right: 5px; }

td.icon-col i { position: absolute; left: 0; top: 10px; }

.action-col { text-align: right; }

.action-col a:link, td.action-col a:visited { color: #707070; display: inline-block; }

.action-col a:hover { color: #029edf !important; }

.action-col i { font-size: 24px; }

table.hovered tr.no-hover:hover, table.zebra tbody tr.no-hover { background-color: transparent; } /* hovered classini ezer */

tr.check-row, table.hovered tr:hover { cursor: pointer; }

tr.check-row td:nth-child(1) i { margin-top: 2px; color: #707070; font-size: 22px; }

tr.check-row.checked { background-color: #dce2eb !important; }

tr.check-row.checked td:nth-child(1) i { color: #3f51b5; }

tr.check-row.checked td { border-top: #fff 1px solid; }

table.vertical-align-top td { vertical-align: top; padding-top: 15px; }







.upload-area { border: #d4d4d4 1px solid; overflow: hidden; cursor: pointer; width: 200px; height: 200px; padding: 20px; background-color: #f5f5f5; border-radius: 14px; align-items: center; justify-content: center; background-position: center; background-repeat: no-repeat; background-size: cover; }

.upload-area i { display: flex; padding: 10px; background-color: #ffffff; border-radius: 50%; }

.upload-area p { display: flex; padding: 10px; margin: 15px 0 0 0; background-color: #ffffff; border-radius: 8px; text-align: center; font-size: 14px; }

.mce-container-body div { flex-direction: row; }

.status-toggle-label { display: flex; flex-direction: row; align-items: center; }

.status-toggle-label span { flex: 1; text-align: right; padding-right: 10px; font-size: 14px; }

.toggle-button { cursor: pointer; display: flex; position: relative; width: 25px; height: 15px; align-items: center; flex-direction: row; }

.toggle-button .track { width: 25px; background-color: #999999; height: 10px; border-radius: 4px; border: #999999 1px solid; }

.toggle-button .circle{ background: unset; width: 15px; height: 15px; background-color: #cccccc; border: #cccccc 1px solid; border-radius: 50%; position: absolute; top: 0; left: 0; }

.toggle-button.active .track { background-color: #20a73b; border: #20a73b 1px solid; }

.toggle-button.active .circle{ background-color: #2fc34c; border: #1f9e38 1px solid; left: unset; right: 0; } 

img.loading { width: 14px; margin-right: 10px; display: none; }

.inprogress { display: flex; align-items: center; justify-content: center; }

.inprogress img.loading { display: inline-block; }

div.loading-area { flex-direction: row; justify-content: center; width: 100%; }

div.loading-area img { width: 24px; }



#alert-container { display: none; position: absolute; right: 0; top: 0; left: 0; bottom: 0; flex-direction: row; align-items: center; justify-content: center; z-index: 180; }

#alert-container.show { display: flex; }

#alert-container .shadow { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: #12132A; opacity: .6; }

#alert-container .content { position: relative; background-color: #252641; padding: 60px 40px; border-radius: 14px; flex-direction: column; width: 750px; max-width: 90%; align-items: center; justify-content: center; }

#alert-container .content label { font-family: font-medium; font-size: 22px; color: #ffffff; text-align: center; line-height: 32px; margin-bottom: 50px; }

#alert-container .content i { position: absolute; right: 0; top: 0; padding: 15px; color: #ffffff; }



.box-column { width: 270px; min-width: 270px; border-radius: 14px; margin-right: 20px; padding: 35px 0 20px 0; background-color: #f5f5f5; align-self: flex-start; }

.box-column.vertical { margin-right: 0; margin-bottom: 20px; flex-direction: row; width: 100%; padding: 35px 25px; }

.page-data .content { flex: 1; }

.circle {    

    border-radius: 50%;

    align-items: center;

    justify-content: center;    

    font-family: 'font-semiBold';

    text-transform: uppercase;

}

.circle.orange { background: transparent linear-gradient(271deg, #F04E30 0%, #F04E30 23%, #F7941D 100%) 0% 0% no-repeat padding-box; color: #ffffff; }

.circle.blue { background-color: #1a48a0; color: #ffffff; }

.circle.red { background-color: #cc0001; color: #ffffff; }

.circle.yellow { background-color: #ffcc00; color: #ffffff; }

.circle.green { background-color: #009900; color: #ffffff; }

.circle.w120 { width: 120px; min-width: 120px; height: 120px; font-size: 50px; }

.circle.w64 { min-width: 64px; width: 64px; height: 64px; font-size: 24px; }

.circle.w36 { min-width: 36px; width: 36px; height: 36px; font-size: 14px; }

.circle.w14 { min-width: 14px; width: 14px; height: 14px; font-size: 9px; }

.user-info { }

.user-info.horizontal { flex-direction: row; align-items: center; }

.user-info.noborder { border-bottom: transparent 0px solid; }

.user-info label { margin: 3px 0; font-family: font-semiBold; }

.user-info a { text-decoration: none; }

.link-list { padding: 20px 0 0 0; }

.link-list a:link, .link-list a:visited { color: #707070; text-decoration: none; display: flex; flex-direction: row; padding: 15px 20px; align-items: center; margin: 0 15px; border-radius: 6px; }

.link-list a:hover { background-color: #1a48a0; color: #ffffff; }

.link-list a i { font-size: 22px; margin-right: 15px; }

.dot { width: 12px; height: 12px; margin-right: 10px; border-radius: 50%; }

.dot.green { background-color: #009900; }

.dot.red { background-color: #cc0001; }

.dot.orange { background-color: #F04E30; }

.dot.yellow { background-color: #ffcc00; }

.dot.blue { background-color: #1a48a0; }

.status-label {padding: 5px 15px !important; border-radius: 15px; font-size: 12px; white-space: nowrap; }

.status-label.green { background-color: #009900; color: #ffffff !important; }

.status-label.orange { background-color: #F04E30; color: #ffffff !important; }

.status-label.blue { background-color: #1a48a0; color: #ffffff !important; }

.status-label.red { background-color: #cc0001; color: #ffffff !important; }

.status-label.yellow { background-color: #ffcc00; color: #242424; }

.portled { background-color: #f5f5f5; border-radius: 14px; padding: 35px; }

.portled h2 { margin: 0 0 0 0; cursor: pointer; flex-direction: row; display: flex; align-items: center; }

.portled h2 i { margin-right: 10px; }

.portled h2:hover { color: #1a48a0; }

.portled .content { margin-top: 5px; }

.portled .content span { font-size: 14px; color: #707070; padding-left: 36px; }

.portled .content table span { padding-left: unset; }



span.message { font-size: 13px; padding: 8px 15px; background-color: #e2d9b7; border-radius: 15px; }

span.info-msg { display: flex; padding: 5px; color: #707070; font-size: 13px; }

span.date { color: #999999; font-size: 13px; }

span.priority { font-size: 13px; text-transform: uppercase; }

span.priority.blue { color: #1a48a0; }

span.priority.orange { color: #F04E30; }

span.priority.gray { color: #707070; }



.dropdown {

    min-width: 200px;

    position: relative;

}



.dropdown label {

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    font-family: 'font-semiBold';

    border: #e8e8e8 1px solid;

    padding: 10px 12px;

    border-radius: 5px;

}



.dropdown label i { font-size: 16px; }

.dropdown .submenu {

    position: absolute;

    display: none;

    top: 34px;

    left: 0;

    right: 0;

    border: #e8e8e8 1px solid;

    background-color: #ffffff;

    overflow: hidden;

    border-radius: 0 0 5px 5px;

}



.dropdown:hover .submenu { display: flex; }

.dropdown:hover .submenu a:link, .dropdown:hover .submenu a:visited {

    color: #242424;

    text-decoration: none;

    padding: 8px 10px;

}



.dropdown:hover .submenu a:hover {

    background-color: #009900;

    color: #ffffff;

}



.ticket-balloon { background-color: #ffffff; border-radius: 14px; padding: 25px; flex-direction: row; margin-bottom: 25px; width: 98%; max-width: 750px; }

.ticket-balloon:last-child { margin-bottom: 0; }

.ticket-balloon .message-area { flex: 1; }

.ticket-balloon .message-area .header { margin-bottom: 25px; }

.ticket-balloon h3 { font-size: 26px; text-align: left; }

.ticket-balloon h4 { font-family: 'font-bold'; font-size: 20px; color: #242424; }

.ticket-balloon .message { font-size: 15px; line-height: 24px; }

.ticket-balloon .message p { margin: 0 0 10px 0; }



#search-area { margin: -40px 0 20px 0; border: #d4d4d4 1px solid; border-radius: 14px; padding: 10px 15px; background-color: #f5f5f5; }



h3.customer-portled-title { justify-content: space-between; display: flex; font-size: 22px; flex-direction: row; align-items: center; padding: 0 5px 15px 5px; color: #1a48a0; letter-spacing: -0.25px; }

h3.customer-portled-title .icon { width: 24px; height: 24px; margin-right: 10px; }

h3.customer-portled-title a:link, h3.customer-portled-title a:visited {

    text-decoration: none;

    font-family: font-regular;

    font-size: 14px;

}



h3.customer-portled-title a:hover {

    color: #cc0001;

}



.customer-portled { border: #d4d4d4 1px solid; border-radius: 8px; overflow: hidden; }

.customer-portled .no-row { display: flex; flex-direction: column; height: 75px; justify-content: center; align-items: center; font-size: 15px; }

.customer-portled .customer-order-row { cursor: pointer; flex-direction: row; padding: 25px; border-bottom: #d4d4d4 1px solid; }

.customer-portled .customer-order-row.nopadding { padding: 0; }

.customer-portled .customer-order-row:last-child { border-bottom: transparent 0px solid; }

.customer-portled .customer-order-row .circle { width: 12px; height: 12px; margin-top: 4px; margin-right: 10px; }

.customer-portled .customer-order-row .title { flex-direction: column; flex: 1; }

.customer-portled .customer-order-row .title.row { flex-direction: row; }

.customer-portled .customer-order-row .title.row .status-label { margin-top: 5px; }

.customer-portled .customer-order-row .title label { cursor: pointer; font-size: 20px; font-family: 'font-bold'; color: #242424; }

.customer-portled .customer-order-row .title span { font-size: 13px; text-transform: uppercase; color: #707070; padding-bottom: 5px; }

.customer-portled .customer-order-row .title span.black { color: #242424; }

.customer-portled .customer-order-row .dates { flex-direction: column; padding-left: 15px; }

.customer-portled .customer-order-row .dates .date-row { flex-direction: row; align-items: center; margin: 3px 0;  }

.customer-portled .customer-order-row .dates .date-row.col { flex-direction: column; align-items: unset;  }

.customer-portled .customer-order-row .dates .date-row label { cursor: pointer; width: 80px; font-size: 13px; text-transform: uppercase; }

.customer-portled .customer-order-row .dates .date-row span { font-size: 13px; font-family: 'font-semiBold'; }



.customer-portled .customer-order-row .dates .last-update { flex-direction: column; align-items: flex-end; margin: 5px 0;  }

.customer-portled .customer-order-row .dates .last-update label { cursor: pointer; width: 80px; font-size: 13px; text-transform: uppercase; }

.customer-portled .customer-order-row .dates .last-update span { font-size: 13px; font-family: 'font-regular'; margin: 3px 0; }



.customer-portled.header {

    background-color: #f5f5f5;

    border: #f5f5f5 1px solid;

    padding: 25px;

}



.customer-portled.header i.icon {

    font-size: 52px;

    color: #242424;

    margin-right: 15px;

}



.customer-portled.header label {

    font-family: font-semiBold;

}

.customer-portled.header span {

    color: #707070;

    font-size: 14px;

    margin: 5px 0;

}



p.description { padding: 10px 20px; font-size: 14px; line-height: 22px; }

.warning { margin: 20px 0; border: #999999 1px solid; border-radius: 5px; padding: 20px; text-align: center; background-color: #ffcc00; }

.customer-order { padding: 0 20px; flex: 1; flex-direction: column; }

.customer-order .status-box { flex-direction: row; padding: 3px 9px; }

.customer-order .status-box span { width: 60px; font-size: 13px; font-family: font-semiBold; margin-right: 8px; }

.customer-order .status-box label { font-size: 13px; color: #707070; }

.customer-order .product-box { flex-direction: column; background-color: #1a48a0; padding: 25px; border-radius: 6px; color: #ffffff; }

.customer-order .product-box.flat-bottom { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.customer-order .product-box .product-box-row { border-top: #336699 1px solid; flex-direction: row; flex: 1; padding: 10px 0; }

.customer-order .product-box .product-box-row:first-child { border-top: transparent 0px solid; }

.customer-order .product-box .product-box-row .info { flex-direction: column; flex: 1; }

.customer-order .product-box .product-box-row .info span { font-size: 13px; color: #d4d4d4; margin: 2px; }

.customer-order .product-box .product-box-row .info label { font-size: 20px; font-family: 'font-bold'; margin: 5px 0; }

.customer-order .product-box .product-box-row .price { font-size: 30px; font-family: 'font-bold'; letter-spacing: -1px; justify-content: flex-end; }

.customer-order .product-box .product-box-row .price.normal { font-size: 15px; font-family: font-semiBold; }

.customer-order #paymentNotificationForm { margin-top: 20px; background-color: #f5f5f5; border-radius: 6px; padding: 10px 20px; }



.admin-note-row {

    background-color: #ffffff;

    border-radius: 6px;

    padding: 25px;

    margin-bottom: 20px;

}



.admin-note-row .title {

    font-family: font-semiBold;

    flex-direction: row;

    align-items: center;

}



.admin-note-row .title .action {

    flex-direction: row;

    align-items: center;

    margin-left: 25px;

}



.admin-note-row .title .action a:link, .admin-note-row .title .action a:visited {

    text-decoration: none;

    color: #707070; 

    margin-left: 10px;

}



.admin-note-row .title .action a i {

    font-size: 16px;

}



.admin-note-row p {

    margin: 10px 0 0 0;

}



.searchbox { width: 300px; position: relative; margin-bottom: 20px; }

.searchbox i { position: absolute; left: 12px; top: 7px; color: #707070; font-size: 18px; }

.ufield.vertical.searchbox input { padding-left: 30px; }

.searchbox.topbar { width: 200px; margin-bottom: 0px; }

.searchbox.topbar input { padding: 10px 12px 10px 30px; }

.searchbox.topbar i { left: 9px; top: 10px; }

.searchbox.right i { left: unset; right: 12px; top: 9px; }

.ufield.vertical.searchbox.right input { padding-left: 12px; }

.ufield.icon-container { position: relative; }

.ufield.icon-container i.icon { position: absolute; right: 10px; font-size: 18px; color: #707070; bottom: 8px; cursor: pointer; }

.row.panel {

    background-color: #e4f3e1;

    padding: 10px 20px;

    border-radius: 6px;

}



.row.panel.purple {

    background-color: #eceef9;

}



.row.panel.purple table {

    border-radius: 6px;

    overflow: hidden;

    background-color: #ffffff; 

}



.row.panel.purple table th {

    border-bottom: #f5f5f5 1px solid;

}



td div.first-col {

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    padding: 10px 0;

}



td div.first-col i {

    font-size: 16px;

    margin-right: 10px;

}



td div.first-col label {

    font-family: 'font-semiBold';

    letter-spacing: -0.25px;

}



.searchbox.clickable i {

    cursor: pointer;

}



.note-row { margin-bottom: 30px; }

.note-row .title { flex-direction: row; flex-direction: row; justify-content: space-between; max-width: 70%; }

.note-row .title .action { flex-direction: row; padding-right: 15px; }

.note-row .title .action a:link, .note-row .title .action a:visited { color: #707070; text-decoration: none; margin-left: 10px; }

.note-row .title .action a:hover { color: #1a48a0; }

.note-row .title .action a i { font-size: 16px; }

.note-row .title label { font-size: 15px; font-family: 'font-semiBold'; margin: 0 10px 0 15px; }

.note-row .title span { font-size: 15px; color: #707070; }

.note-row .note { background-color: #ffcc00; padding: 25px; border-radius: 14px; max-width: 70%; margin: 10px 0; font-size: 15px; line-height: 24px; }

.note-row.customer .title, .note-row.customer .note { max-width: 100%; }

.note-row.customer .title { padding: 0 5px; }

.note-row.customer .title span { margin-left: 15px; }



.info-row { background-color: #f5f5f5; font-size: 15px; padding: 25px; border-radius: 14px; flex-direction: column; }

.info-row i.icon { width: 48px; height: 48px; border-radius: 50%; background-color: #ffcc00; align-items: center; justify-content: center; display: flex; margin-right: 22px; }

.info-row i.copy { cursor: pointer; color: #707070; margin: 0 5px; }

.info-row a.history { margin-left: 70px; }



.mobile-menu, #menu-bar div #menu-close-link { display: none; }

sup {

    display: flex;

    width: 20px;

    height: 20px;

    align-items: center;

    justify-content: center;

    background-color: #cc0001;

    color: #ffffff;

    border-radius: 50%;

    font-size: 10px;

    margin-top: -7px;

    margin-left: 3px;

}



.tab-container label { flex-direction: row; }

.tab-container label sup {

    font-size: 7px; 

    width: 12px;

    height: 12px;

    background-color: #242424;

    display: none;

}

.tab-container label sup.show { display: flex; }



tr.odd { background-color: #f5f5f5; }

tr.even { background-color: #ffffff; }



.dashboard-box { margin: 10px; background-color: #a95bc6; border-radius: 5px; padding: 20px; flex-direction: row; align-items: flex-start; }

.dashboard-box label { color: #ffffff; flex: 1; cursor: pointer; background-color: #a95bc6; border-radius: 5px; padding-right: 20px; flex-direction: row; }

.dashboard-box span { font-size: 36px; font-family: font-bold; color: #ffffff; }

.dashboard-data-list { background-color: #e2e6ec; }

.dashboard-data-list ul, .dashboard-data-list li { display: flex; list-style: none; margin: 0; padding: 0; }

.dashboard-data-list ul { flex-direction: row; flex-wrap: wrap; padding: 15px; }

.dashboard-data-list li { padding: 10px; width: 25%; }

.dashboard-data-list li .data-con { cursor: pointer; flex-direction: row; border-radius: 6px; background-color: #ffffff; padding: 20px; display: flex; flex: 1; position: relative; min-height: 100px; }

.dashboard-data-list li .data-con:hover { box-shadow: 0 0 10px #999999; }

.dashboard-data-list li .data-con .labels { flex: 1; display: flex; flex-direction: column; padding-right: 30px; padding-top: 5px; }

.dashboard-data-list li .data-con .labels label { cursor: pointer; font-family: font-semiBold; font-size: 15px; margin-bottom: 3px; }

.dashboard-data-list li .data-con .labels label.price { color: #707070; }

.dashboard-data-list li .data-con span { font-size: 30px; font-family: 'font-bold'; letter-spacing: -1.5px; }

.dashboard-data-list li .data-con.noclick, .dashboard-data-list li .data-con.noclick label { cursor: default; }



.list-area { flex: 1; border-radius: 6px; overflow: auto; }

.page-data { flex: 1; }

span.label {

    font-size: 11px;

    text-transform: uppercase;

    background-color: #009900;

    color: #ffffff;

    margin: 2px;

    padding: 4px 8px;

    border-radius: 3px;

}



span.label.purple { background-color: #955191; }



.ufield.vertical.fixed-height {

    min-height: unset;

    margin-bottom: 0;

}



.box {

    width: 500px; 

    display: flex;

    flex-direction: column;

    padding: 0px 0;

}



h2.page-title {

    font-family: font-bold;

    margin: 0;

    font-size: 24px;

    letter-spacing: -1px;

    text-align: center;

}



.checkbox-container {

    display: flex;

    flex-direction: row;

    align-items: center;

    font-size: 12px;

    color: #666666;

}



.ufield .checkbox-container {

    margin-top: 5px;

}



.checkbox-container.error {

    color: #cc0001;

}



.checkbox-container i {

    color: #ffffff;

    background-color: #ffffff;

    border-radius: 3px;

    font-size: 16px;

    margin-right: 8px;

    cursor: pointer;

    transition: .5s all;

    border: #d4d4d4 1.5px solid;

}



.checkbox-container.error i {

    border: #cc0001 1.5px solid;

}



.checkbox-container i:hover {

    border: #009900 1.5px solid;

}



.checkbox-container i.selected {

    background-color: #ffffff;

    color: #0f53fa;

    border: #0f53fa 1.5px solid;

}



.file-item {

    display: flex;

    align-items: center;

    flex-direction: row;

    padding: 5px 8px;

    border-radius: 4px;

    background-color: #ffcc00;

    align-self: flex-start;

    margin: 5px;

    position: relative;

}



.file-item span.title {

    font-size: 11px;

    margin: 0 5px;

    font-family: 'font-bold';

}



.file-item span.date {

    font-size: 10px;

    margin: 0 5px;

    color: #242424;

}



.file-item i {

    font-size: 18px;

    cursor: pointer;

    margin-top: 2px;

}



.file-item a {

    margin-left: 5px;

    color: #000000;

}



a.add-file:link, a.add-file:visited {

    display: flex;

    align-items: center;

    margin: 5px;

    border-radius: 6px;

    color: #242424;

    background-color: #f5f5f5;

    padding: 5px 15px 5px 10px;

    text-decoration: none;

    align-self: flex-start;

}



a.add-file:hover {

    color: #ffffff;

    background-color: #1a48a0;

}



h4.form-section-title {

    width: 100%;

    margin: 0 0 10px 0 !important;

    padding: 0 0 10px 0;

    border-bottom: #d4d4d4 1px solid;

    font-size: 12px;

    font-family: 'font-semiBold';

}



.select-row { cursor: pointer; flex-direction: row; }

.select-row label { cursor: pointer; padding: 3px 0 0 5px; align-self: flex-start; }



.report-view-header {

    margin-top: 20px;

    display: flex;

    flex-direction: row;

    padding-bottom: 10px;

    border-bottom: #e8e8e8 1px solid;

    margin-bottom: 5px;

    justify-content: space-between;

}



.report-view-header label {

    display: flex;

    flex-direction: row;

    align-items: center;

    font-size: 14px;

    font-family: 'font-semiBold';

}



.report-view-header i {

    margin-right: 10px;

}



span.status {

    text-transform: uppercase;

    font-size: 10px;

    border-radius: 4px;

    padding: 5px 12px 5px 12px;

    font-family: font-semiBold;

}



span.status.yellow {

    background-color: #ffcc00;

    color: #242424;

}



span.status.gray {

    background-color: #e8e8e8;

    color: #242424;

}



span.status.blue {

    background-color: #1155c9;

    color: #ffffff;

}



span.status.purple {

    background-color: #ad12a1;

    color: #ffffff;

}



span.status.purple_light {

    background-color: #d1b1ce;

    color: #242424;

}



span.status.red {

    background-color: #cc0001;

    color: #ffffff;

}



span.status.green {

    background-color: #009900;

    color: #ffffff;

}



.comment-item label {

    display: block;

    padding: 5px 15px;

}



.comment-item .comment {

    padding: 15px;

    border-radius: 6px;

    background-color: #f5f5f5;

    margin: 10px 5px;

}



.pagination-container { display: flex; flex-direction: row; padding-top: 15px; border-top: #d4d4d4 1px solid; }

ul.pagination { margin: 0; padding: 0; display: flex; flex-direction: row; border: #d4d4d4 1px solid; border-radius: 3px; overflow: hidden; }

.pagination li { border-left: #d4d4d4 1px solid; list-style: none; }

.pagination li a { display: block; padding: 5px 10px; text-decoration: none; }

.pagination li:first-child { border-left: transparent 0px solid; }

.pagination li a:hover { background-color: #f9f9f9; }

.pagination li.active { background-color: #1a48a0; color: #ffffff; }

td.otomatik { border-left: #ffcc00 5px solid; }

td.onayli { border-left: #009900 5px solid; }



.ucheckbox { flex-direction: row; align-items: center; cursor: pointer; padding-top: 5px; padding-bottom: 5px; }

.ucheckbox i { margin-right: 5px; color: #707070; }

.ucheckbox label { cursor: pointer; }

.ucheckbox:hover i { color: #1a73e8; }

.ucheckbox.selected i { color: #009900; }



.calculate-row {  position: relative; }

.calculate-row .dipnot { background-color: #ffffff; padding: 15px; border-radius: 5px; align-items: center; }

.calculate-row .dipnot .price { font-weight: bold; align-items: center; color: #707070; }

.calculate-row .dipnot .price span { font-size: 20px; margin-left: 15px; color: #242424;  font-family: font-semiBold; font-weight: bold; }

.option-menu { display: flex; flex-direction: row; }

.option-menu a:link, .option-menu a:visited { color: #707070; text-decoration: none; margin: 0 5px; }

.option-menu a:hover { color: #242424; }

.option-menu a i { font-size: 24px; }



.log-list { flex-direction: column; }

.log-row { flex-direction: row; margin-bottom: 20px; }

.log-row .log-body { padding: 0 15px; flex-direction: column; }

.log-row .log-body .log-header { flex-direction: row; padding-top: 10px; }

.log-row .log-body .log-header span.date { font-size: 12px; font-family: font-semiBold; }

.log-row .log-body .log-header label { display: block; margin-left: 10px; }

.log-row .log-body p { margin-top: 20px; font-size: 13px; line-height: 22px; }



.inline-link { display: flex; flex-direction: row; align-items: center; }

.inline-link a:link, .inline-link a:visited { text-decoration: none; color: #747474; }

.inline-link a:hover { color: #000000; }

.inline-link a i { font-size: 16px; margin-left: 5px; }



/* TABLET YATAY */

@media only screen and (width : 1024px) {

}



/* TABLET DIKEY */

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

}



/* TELEFON */

@media only screen and (max-width : 760px) {

    .show-on-mobile { display: flex; }

    .hide-on-mobile { display: none !important; }

    .mobile-menu { flex-direction: row; padding: 15px; justify-content: space-between; background-color: #1a48a0; }

    .mobile-menu a { color: #ffffff; }

    #menu-bar { display: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; width: unset; z-index: 200; }

    #menu-bar.show { display: flex; }

    #menu-hide-link { display: none !important; }

    .customer-portled.header i.icon { font-size: 30px; }

    .customer-portled.header .row .flex-row { margin-bottom: 20px; }

    .customer-portled.header { padding: 25px 10px; }

    .customer-portled .customer-order-row { flex-direction: column; }

    .mobile-data label { margin-bottom: 6px; }

    .tab-container { flex-direction: column; }

    .tab-container label { justify-content: flex-start; padding-left: 7px; }

    .customer-portled .customer-order-row .dates .last-update { align-items: flex-start; margin-top: 15px; }

    .portled { padding: 20px; }

    .page-data { padding: 0 20px 20px 20px; }

    .mobile-menu, #menu-close-link { display: flex; }

}